:root{
  --tb-bg:#b0a1ba; --tb-edge-dark:#5b5164; --tb-edge-lite:#d8d0de;
  --tb-btn-bg:#c6bbcf; --tb-btn-hover:#d7cfe0; --tb-btn-pressed:#a394ab; --tb-text:#221b29;
}

.tiid-taskbar{
  position:fixed; left:0; right:0; bottom:0; height:48px; z-index:9999;
  background:var(--tb-bg); border-top:2px solid var(--tb-edge-dark);
  box-shadow: inset 0 2px 0 var(--tb-edge-lite);
  display:flex; align-items:center; gap:10px; padding:6px 8px;
  font:14px/1.1 "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color:var(--tb-text);
}

.tb-btn{
  display:inline-flex; align-items:center; gap:.5ch; height:34px; padding:0 12px; min-width:44px;
  background:var(--tb-btn-bg); border:2px solid var(--tb-edge-dark);
  box-shadow: inset 0 2px 0 var(--tb-edge-lite), inset 0 -2px 0 rgba(0,0,0,.08);
  border-radius:4px; color:inherit; text-decoration:none; cursor:pointer;
}
.tb-btn:hover{ background:var(--tb-btn-hover) }
.tb-btn:active{ background:var(--tb-btn-pressed); box-shadow: inset 0 2px 0 rgba(0,0,0,.15) }

.tb-start{ font-weight:600; padding-left:10px }
.tb-start .heart{ font-size:15px; margin-right:2px }

.tb-tasks{ display:flex; gap:10px; margin-left:8px; flex:1 }

.tb-clock{
  margin-left:auto; height:34px; min-width:88px;
  padding:0 10px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--tb-btn-bg); border:2px solid var(--tb-edge-dark);
  box-shadow: inset 0 2px 0 var(--tb-edge-lite); border-radius:4px; font-variant-numeric: tabular-nums;
}

.tb-menu{
  position:fixed; left:8px; bottom:56px; width:220px; padding:8px; display:none;
  background:var(--tb-bg); border:2px solid var(--tb-edge-dark);
  box-shadow: inset 0 2px 0 var(--tb-edge-lite), 0 12px 30px rgba(0,0,0,.25); border-radius:6px;
}
.tb-menu.open{ display:block; animation:pop .08s ease-out both }

@keyframes pop{
  from{ transform:translateY(6px); opacity:.0 }
  to{   transform:translateY(0);  opacity:1 }
}

.tb-menu a{
  display:block; padding:10px 10px; margin:3px 0; border:2px solid transparent; border-radius:4px;
  color:inherit; text-decoration:none; background:transparent;
}
.tb-menu a:hover{ background:var(--tb-btn-hover); border-color:var(--tb-edge-dark) }

@media (max-width:640px){
  .tiid-taskbar{ height:42px; padding:4px 6px }
  .tb-btn, .tb-clock{ height:30px }
  .tb-menu{ bottom:50px }
}