/* ─── 0. Base mobile resets ──────────────────────────────────────────────── */
@media (max-width: 768px) {

.power-fab { display: none !important; }

  html { font-size: 14px; }

  body {
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
  }

  /* Safe area padding for notched phones */
  .main {
    padding: 0.85rem 0.75rem env(safe-area-inset-bottom, 4rem);
    max-width: 100%;
  }

  /* Global button touch targets */
  .btn, button {
    min-height: 36px;
  }

  /* ─── Topbar ───────────────────────────────────────────────────────────── */
  .topbar {
    padding: 0 0.85rem;
    height: 52px;
    gap: 0.5rem;
  }

  .topbar-logo {
    font-size: 0.95rem;
    flex-shrink: 0;
  }

  .brand-live { display: none; }

  .topbar-right {
    gap: 0.3rem;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* Hide PassKey input on mobile — user uses stored session */

  .server-dots { padding: 0.25rem 0.55rem; }
  .srv-label   { display: none; }

  /* ─── PassKey card ──────────────────────────────────────────────────────── */
  .pk-card {
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
  }

  .pk-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .expiry-info { text-align: left; }

  /* ─── Usage widget ──────────────────────────────────────────────────────── */
  .usage-widget {
    flex-direction: row;
    gap: 0.6rem;
  }

  .usage-plan {
    min-width: 0;
    flex: 1;
    padding: 0.75rem 0.85rem;
  }

  .usage-big { font-size: 1.5rem !important; }

  .usage-quick {
    flex-direction: row;
    gap: 0.4rem;
    min-width: unset;
    align-items: stretch;
  }

  .usage-quick-btn {
    flex: 1;
    padding: 0.5rem 0.4rem;
    min-width: 52px;
  }

  .usage-quick-num { font-size: 1rem; }
  .usage-quick-lbl { font-size: 0.55rem; }

  /* ─── Toolbar ───────────────────────────────────────────────────────────── */
  .toolbar {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .toolbar h2 { font-size: 0.9rem; }

  .toolbar-right {
    gap: 0.3rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .toolbar-right::-webkit-scrollbar { display: none; }

  .search-input { width: 110px; font-size: 0.75rem; }

  .view-toggle { width: 28px; height: 28px; font-size: 0.78rem; }

  .sort-btn { padding: 0.32rem 0.6rem; font-size: 0.72rem; }

  /* ─── Banners ───────────────────────────────────────────────────────────── */
  .banner {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
  }

  .banner-actions { flex-wrap: wrap; gap: 0.35rem; }

}

/* ─── 1. Minimal view mobile layout ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Shell */
  .tb-shell {
    border-radius: 12px !important;
    overflow: visible;
  }

  .tb-head {
    padding: 8px 12px;
    border-radius: 12px 12px 0 0 !important;
    gap: 6px;
    flex-wrap: wrap;
  }

  .tb-head-title { font-size: 11px; }
  .tb-head-badge { font-size: 9px; }
  .tb-head-live  { font-size: 9px; }
  .tb-head-addon { font-size: 9px; }

  /* Tree column — narrower on mobile */
  .tb-tree { width: 28px; }
  .tb-tree::before { left: 13px; }
  .tb-tree::after  { left: 13px; width: 14px; }

  /* Row: allow wrapping so action buttons stack */
  .tb-row {
    min-height: 44px;
    align-items: flex-start;
    flex-wrap: nowrap;
    position: relative;
  }

  /* ── Inner row: two-line layout on mobile ── */
  .tb-inner {
    flex-wrap: wrap;
    padding: 8px 10px 8px 2px;
    gap: 4px;
    row-gap: 5px;
    align-items: center;
  }

  /* Pin button — smaller */
  .tb-pin {
    width: 16px;
    height: 16px;
    font-size: 9px;
    flex-shrink: 0;
  }

  /* Slot icon */
  .tb-slot-icon {
    width: 22px;
    height: 22px;
    font-size: 11px;
    flex-shrink: 0;
  }

  /* Name: allow it to shrink and truncate */
  .tb-name {
    font-size: 11.5px;
    flex: 1 1 90px;
    min-width: 60px;
    max-width: calc(100vw - 200px);
  }

  /* Platform badge — hide label, keep icon only */
  .tb-plat {
    font-size: 8px;
    padding: 1px 4px;
  }

  /* Status */
  .tb-live-badge {
    font-size: 8px;
    padding: 2px 5px;
    gap: 3px;
  }

  .tb-status { font-size: 9px; }

  /* Media chip */
  .tb-mchip {
    font-size: 9px;
    padding: 2px 5px;
    max-width: 90px;
  }

  /* Dividers — hide on mobile to save space */
  .tb-vd { display: none; }

  /* Spacer — shrink */
  .tb-sp { flex: 0 0 2px; min-width: 0; }

  /* ── Upload / playlist buttons: stacked group ── */
  .tb-upload-wrap {
    flex-direction: row;
    gap: 3px;
    flex-shrink: 0;
  }

  .tb-pl-grp { gap: 2px; }

  /* All tb-btn: smaller */
  .tb-btn {
    font-size: 9.5px;
    padding: 3px 7px;
    border-radius: 5px;
    min-height: 26px;
  }

  .tbb-up  { padding: 3px 6px; }
  .tbb-pl  { padding: 3px 6px; }
  .tbb-key { padding: 3px 6px; }

  /* Icon buttons: slightly smaller */
  .tb-ib {
    width: 26px;
    height: 26px;
    font-size: 10px;
    border-radius: 5px;
  }

  /* ── Action area: break onto second line ── */
  /* On mobile, the row wraps: name+status first line, buttons second line */
  .tb-row .tb-inner {
    display: grid;
    grid-template-areas:
      "pin icon name name name plat status"
      ". . upload upload pl sp btns";
    grid-template-columns: 16px 22px 1fr 1fr 1fr auto auto;
    align-items: center;
    row-gap: 4px;
    column-gap: 4px;
  }

  .tb-pin         { grid-area: pin; }
  .tb-slot-icon   { grid-area: icon; }
  .tb-name        { grid-area: name; }
  .tb-plat        { grid-area: plat; }
  .tb-live-badge,
  .tb-status      { grid-area: status; }
  .tb-upload-wrap { grid-area: upload; }
  .tb-pl-grp      { grid-area: pl; }

  /* Buttons group — right side of second line */
  /* We wrap all .tb-ib and right .tb-btn into a flex row */
  .tb-inner > .tb-ib,
  .tb-inner > .tbb-key,
  .tb-inner > .tbb-edit,
  .tb-inner > .tbb-del {
    grid-area: btns;
  }

  /* ── Addon tag ── */
  .tb-addon-tag { font-size: 7px; padding: 1px 4px; }

  /* ── Addon divider ── */
  .tb-addon-divider {
    padding: 5px 12px 4px;
    font-size: 9px;
  }

  /* ── Lock overlay ── */
  .tb-lock-overlay {
    padding: 0 10px;
    gap: 6px;
    font-size: 9px;
  }

  /* ── Playlist popup — full width on mobile ── */
  .tb-pl-drop { width: 18px; height: 24px; font-size: 7px; }

  #tbPlDdPopup {
    position: fixed !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem) !important;
    width: auto !important;
    max-width: 100% !important;
    border-radius: 14px;
    z-index: 9990;
  }

}

/* ─── 2. Smaller phones — further simplification ─────────────────────────── */
@media (max-width: 480px) {

  .main { padding: 0.65rem 0.6rem env(safe-area-inset-bottom, 4rem); }

  /* Topbar */
  .topbar { padding: 0 0.7rem; height: 50px; }
  .topbar-logo { font-size: 0.88rem; }

  /* tb-inner: switch to simpler 2-line flex layout on very small screens */
  .tb-row .tb-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
    column-gap: 4px;
    padding: 7px 8px 7px 2px;
  }

  .tb-name {
    font-size: 11px;
    flex: 1 1 80px;
    max-width: calc(100vw - 180px);
  }

  /* On very small screens hide less important elements to keep rows clean */
  .tb-plat { display: none; }

  .tb-mchip { max-width: 70px; font-size: 8.5px; }

  /* Keep action buttons but make them tiny */
  .tb-ib { width: 24px; height: 24px; font-size: 9px; }

  .tb-btn {
    font-size: 9px;
    padding: 2px 5px;
    min-height: 24px;
  }

  /* Name truncation */
  .tb-name { max-width: 120px; }

  /* Head simplification */
  .tb-head { gap: 4px; }
  .tb-head-badge { display: none; }

  /* Tree narrower */
  .tb-tree { width: 24px; }
  .tb-tree::before { left: 11px; }
  .tb-tree::after  { left: 11px; width: 12px; }
  .tb-tree-dot { width: 7px; height: 7px; }

  /* Addon divider */
  .tb-addon-divider-lbl { font-size: 9px; }

  /* Usage widget stacked */
  .usage-widget {
    flex-direction: column;
    gap: 0.5rem;
  }

  .usage-quick {
    flex-direction: row;
    justify-content: space-between;
  }

  .usage-quick-btn { flex: 1; }

}

@media (max-width: 360px) {

  .tb-name { font-size: 10.5px; max-width: 100px; }
  .tb-ib   { width: 22px; height: 22px; }
  .tb-btn  { font-size: 8.5px; padding: 2px 4px; }
  .main    { padding: 0.5rem 0.5rem env(safe-area-inset-bottom, 4rem); }

  .tb-mchip { display: none; } /* free up space on very tiny screens */
  .tb-addon-tag { display: none; }

}

/* ─── 3. Floating buttons — mobile repositioning ─────────────────────────── */
@media (max-width: 768px) {

  /* Show power panel FABs on mobile */
  .power-fab,
  .note-fab,
  .theme-fab,
  .door-fab,
  .door-panel {
    /* Override the desktop hide */
  }

  /* Power FAB — bottom right stack */
  .power-fab {
    display: none !important;
  }

  .note-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3.25rem);
    right: 1rem;
    width: 40px;
    height: 40px;
  }

  .theme-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    right: 1rem;
    width: 40px;
    height: 40px;
    display: flex !important;
  }

  /* Door FAB — hide on mobile (too cramped) */
  .door-fab,
  .door-panel { display: none !important; }

  /* Power panel — full width bottom sheet on mobile */
  .power-panel {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: 72vh;
    border-radius: 20px 20px 0 0;
    border: none;
    border-top: 1px solid var(--border2);
    z-index: 600;
  }

  .power-panel.open { display: flex; }

  .power-panel-inner { flex-direction: row; }

  .power-tabs-strip {
    width: 44px;
    padding: 8px 0;
    gap: 4px;
  }

  .power-tab-icon {
    width: 30px !important;
    height: 30px !important;
  }

  .power-content {
    padding: 10px 12px 4rem;
  }

  /* Note panel — full width on mobile */
  .note-panel {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-width: 100%;
  }

  /* Toast — bottom center on mobile */
  #toast-rack {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem);
    right: 0.75rem;
    left: 0.75rem;
    align-items: center;
  }

  .toast {
    max-width: 100%;
    width: 100%;
    font-size: 0.8rem;
  }

}

/* ─── 4. Modals — full screen on mobile ──────────────────────────────────── */
@media (max-width: 600px) {

  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 1.25rem 1.1rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
    max-height: 92vh;
    overflow-y: auto;
  }

  .modal-overlay.active .modal {
    transform: scale(1) translateY(0);
  }

  /* MV widget — full screen bottom sheet */
  .mv-widget-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .mv-widget {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
  }

  /* Playlist widget */
  .pl-widget-overlay { padding: 0; align-items: flex-end; }
  .pl-widget {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
  }

  /* Pin modal */
  .pin-modal-overlay { padding: 0; align-items: flex-end; }
  .pin-modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 1.5rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.75rem) !important;
  }

}

/* ─── 5. Slot cards (normal view fallback on mobile) ─────────────────────── */
@media (max-width: 768px) {

  .slots-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }

  .slot-card { border-radius: 12px !important; }

  .slot-hdr {
    padding: 0.75rem 0.9rem !important;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .slot-name {
    font-size: 0.85rem !important;
    max-width: 60%;
  }

  .slot-body { padding: 0.75rem 0.9rem !important; }

  .slot-actions {
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.65rem !important;
    padding-top: 0.65rem !important;
  }

  .slot-actions .btn-sm {
    font-size: 0.74rem !important;
    padding: 0.32rem 0.6rem !important;
  }

  .autostop-tabs { flex-wrap: wrap; }

  .schedule-input {
    font-size: 0.72rem;
    padding: 0.28rem 0.45rem;
  }

}

/* ─── 6. Info hub tabs — stacked on mobile ───────────────────────────────── */
@media (max-width: 600px) {

  .info-hub-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid var(--border);
  }
  .info-hub-tabs::-webkit-scrollbar { display: none; }

  .info-hub-tab {
    flex: 0 0 auto;
    font-size: 0.72rem;
    padding: 0.55rem 0.75rem;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    border-left: none !important;
  }

  .info-hub-tab.active {
    border-left-color: transparent !important;
    border-bottom-color: var(--accent) !important;
    background: none;
  }

  .info-hub-pane { padding: 0.85rem 0.9rem; }

}

/* ─── 7. Onboarding / validity jars ─────────────────────────────────────── */
@media (max-width: 600px) {

  .validity-jars-wrap {
    gap: 0.65rem;
    justify-content: center;
  }

  .jar-outer { width: 44px; height: 72px; }
  .jar-neck  { width: 22px; height: 6px; }
  .jar-days-text { font-size: 0.68rem; }
  .jar-plan-label { font-size: 0.52rem; }

  .checklist-wrap { padding: 0.7rem 0.9rem; }
  .check-item { font-size: 0.75rem; }

}

/* ─── 8. Festival widget ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #festivalWidget {
    top: 60px;
    width: calc(100% - 1.5rem);
    padding: 1rem 1.25rem;
  }
}

/* ─── 9. Sort dropdown ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sort-dropdown {
    position: fixed !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    z-index: 9000;
    border-radius: 14px;
  }

  .sort-sub {
    position: fixed !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12rem) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    z-index: 9001;
    border-radius: 14px;
  }
}

/* ─── 10. Group popup ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #grpPopup {
    position: fixed !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 14px;
    z-index: 9500;
  }
}

/* ─── 11. Bulk action bar ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #bulkProgressBar {
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem) !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* ─── 12. Slot lock FAB ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .slot-lock-fab {
    top: 60px;
    right: 0.75rem;
    padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  }
  .slf-icon { width: 24px; height: 24px; }
  .slf-label { font-size: 0.65rem; }
  .slf-info  { display: none; }
}

/* ─── 13. Addons / renewal section ──────────────────────────────────────── */
@media (max-width: 600px) {

  .addon-bar {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
  }

  .addon-actions { flex-wrap: wrap; }

  .addon-pkg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .addon-pkg-card { padding: 0.65rem 0.4rem; }
  .addon-pkg-slots { font-size: 1rem; }
  .addon-pkg-price { font-size: 0.68rem; }

  .billing-toggle { width: 100%; }
  .billing-opt { flex: 1; text-align: center; }

}

/* ─── 14. Light theme overrides for mobile ───────────────────────────────── */
body.light-theme .tb-shell {
  background: #ffffff;
  border-color: rgba(30, 50, 100, 0.12);
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.07);
}

body.light-theme .tb-head {
  background: linear-gradient(135deg, #f5f8ff, #ffffff);
  border-bottom-color: rgba(30, 50, 100, 0.09);
}

body.light-theme .tb-row {
  border-bottom-color: rgba(30, 50, 100, 0.07);
}

body.light-theme .tb-row:hover {
  background: #fafbff;
}

body.light-theme .tb-inner { color: #0f172a; }

body.light-theme .tb-tree::before,
body.light-theme .tb-tree::after {
  background: rgba(30, 50, 100, 0.14);
}

body.light-theme .tb-tree-dot {
  background: #cbd5e1;
  border-color: #94a3b8;
}

body.light-theme .tb-tree-dot.td-live   { background: #10b981; border-color: #059669; box-shadow: 0 0 6px rgba(16,185,129,0.5); }
body.light-theme .tb-tree-dot.td-crash  { background: #ef4444; border-color: #dc2626; }
body.light-theme .tb-tree-dot.td-start  { background: #f59e0b; border-color: #d97706; }

body.light-theme .tb-name { color: #0f172a; }
body.light-theme .tb-status.ts-off { color: #94a3b8; }

body.light-theme .tb-ib {
  background: #f1f5ff;
  border-color: rgba(30, 50, 100, 0.14);
  color: #475569;
}
body.light-theme .tb-ib:hover  { background: #e8edf7; color: #0f172a; }
body.light-theme .tb-ib-go     { background: rgba(5,150,105,0.1);   border-color: rgba(5,150,105,0.25);   color: #059669; }
body.light-theme .tb-ib-st     { background: rgba(220,38,38,0.08);  border-color: rgba(220,38,38,0.2);    color: #dc2626; }
body.light-theme .tb-ib-re     { background: rgba(217,119,6,0.1);   border-color: rgba(217,119,6,0.25);   color: #d97706; }

body.light-theme .tb-btn       { background: #f1f5ff; border-color: rgba(30,50,100,0.14); color: #475569; }
body.light-theme .tb-btn:hover { background: #e8edf7; color: #0f172a; }
body.light-theme .tbb-up       { background: rgba(232,98,10,0.1); border-color: rgba(232,98,10,0.25); color: #c2410c; }
body.light-theme .tbb-pl       { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.2); color: #2563eb; }
body.light-theme .tbb-key      { background: rgba(232,98,10,0.1); border-color: rgba(232,98,10,0.25); color: #c2410c; }
body.light-theme .tbb-del      { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.2); color: #dc2626; }

body.light-theme .tb-mchip {
  background: rgba(5,150,105,0.1);
  border-color: rgba(5,150,105,0.25);
  color: #065f46;
}

body.light-theme .tb-addon-divider {
  background: #f5f8ff;
  border-color: rgba(30, 50, 100, 0.09);
}

body.light-theme .tb-lock-overlay {
  background: rgba(248, 250, 255, 0.92);
}

body.light-theme .tb-head-live {
  background: rgba(5,150,105,0.1);
  border-color: rgba(5,150,105,0.3);
  color: #065f46;
}

body.light-theme .tb-head-live-dot { background: #059669; }

body.light-theme .tb-live-badge {
  background: rgba(5,150,105,0.1);
  border-color: rgba(5,150,105,0.3);
  color: #065f46;
}

body.light-theme .tb-live-dot { background: #059669; }

body.light-theme .power-panel {
  background: #ffffff;
  border-top-color: rgba(30, 50, 100, 0.12);
}

body.light-theme .power-tabs-strip {
  background: #f5f8ff;
  border-right-color: rgba(30, 50, 100, 0.1);
}

body.light-theme .power-tab-icon        { color: #64748b; }
body.light-theme .power-tab-icon:hover  { background: rgba(30,50,100,0.06); color: #0f172a; }
body.light-theme .power-tab-icon.active { background: rgba(232,98,10,0.1); color: #c2410c; }

body.light-theme #toast-rack .toast {
  background: #ffffff;
  border-color: rgba(30, 50, 100, 0.14);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.1);
}

/* ─── 15. Accessibility & reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Larger tap targets for accessibility */
@media (max-width: 768px) {
  .tb-ib, .tb-btn, .tb-pin, .tb-pl-drop, .tb-mchip-del, .tb-pl-del,
  .pin-btn, .pin-eye, .modal-close {
    min-width: 28px;
    min-height: 28px;
  }

  input[type="datetime-local"],
  input[type="number"],
  select {
    font-size: 16px; /* Prevents iOS zoom on focus */
    min-height: 36px;
  }
}

/* ─── 16. Scrollable row actions on very narrow screens ──────────────────── */
@media (max-width: 390px) {

  /* Scroll the inner row horizontally rather than wrapping badly */
  .tb-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .tb-inner::-webkit-scrollbar { display: none; }

  /* Fix pin + icon so they never scroll away */
  .tb-pin,
  .tb-slot-icon {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 2;
  }

  body.light-theme .tb-pin,
  body.light-theme .tb-slot-icon {
    background: #ffffff;
  }

  .tb-name { flex: 0 0 auto; max-width: 100px; }
}