/* ============ taskbar.css ============ */
#taskbar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 52px; z-index: 3000;
  display: flex; align-items: center; padding: 0 10px; gap: 8px;
  background: var(--taskbar-bg); backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--border);
}
.tb-start {
  width: 42px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, transform 0.12s;
}
.tb-start:hover { background: var(--hover); }
.tb-start:active { transform: scale(0.92); }
.tb-start svg { width: 22px; height: 22px; }

.tb-items { flex: 1; display: flex; align-items: center; gap: 5px; height: 100%; overflow-x: auto; overflow-y: hidden; }
.tb-items::-webkit-scrollbar { height: 0; }
.tb-item {
  position: relative; height: 38px; min-width: 42px; padding: 0 11px;
  border-radius: 9px; display: flex; align-items: center; gap: 8px;
  transition: background 0.12s; max-width: 190px;
}
.tb-item:hover { background: var(--hover); }
.tb-item.active { background: var(--surface-2); }
.tb-item .tbi-ico { width: 20px; height: 20px; display: inline-flex; }
.tb-item .tbi-ico svg, .tb-item .tbi-ico img { width: 100%; height: 100%; }
.tb-item .tbi-label { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.tb-item .tbi-underline {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  height: 3px; border-radius: 3px; background: var(--accent); transition: width 0.18s;
  width: 6px;
}
.tb-item.active .tbi-underline { width: 22px; }

.tb-tray { display: flex; align-items: center; gap: 4px; padding-left: 6px; }
.tray-btn { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); transition: background 0.12s, color 0.12s; }
.tray-btn:hover { background: var(--hover); color: var(--text); }
.tray-btn .ico { width: 18px; height: 18px; }
.tb-clock {
  text-align: right; font-size: 12px; line-height: 1.35; padding: 6px 12px;
  border-radius: 8px; color: var(--text); transition: background 0.12s; cursor: default;
}
.tb-clock:hover { background: var(--hover); }
.tb-clock .clk-date { color: var(--text-dim); font-size: 11px; }
.tb-showdesk { width: 6px; height: 38px; margin-left: 2px; border-left: 1px solid var(--border); }
.tb-showdesk:hover { background: var(--hover); }