/* @AI_CRITICAL_GUARD v3.0: UNTOUCHABLE ZONE — MACE APPROVAL REQUIRED.
   Protects: Enterprise UI/UX · Realtime Sync Logic · Core State Management ·
   Database/API Adapters · Tab Isolation · Virtual Column State ·
   QuickBase Settings Persistence · Auth Flow.
   DO NOT modify any existing logic, layout, or structure in this file without
   first submitting a RISK IMPACT REPORT to MACE and receiving explicit "CLEARED" approval.
   Violations will cause regressions. When in doubt — STOP and REPORT. */

/**
 * @file main_studio.css
 * @description Main Studio stylesheet
 * @module MUMS/Styles
 * @version UAT
 */
/* @AI_CRITICAL_GUARD v3.0: UNTOUCHABLE ZONE — MACE APPROVAL REQUIRED.
   Protects: Enterprise UI/UX · Realtime Sync Logic · Core State Management ·
   Database/API Adapters · Tab Isolation · Virtual Column State ·
   QuickBase Settings Persistence · Auth Flow.
   DO NOT modify any existing logic, layout, or structure in this file without
   first submitting a RISK IMPACT REPORT to MACE and receiving explicit "CLEARED" approval.
   Violations will cause regressions. When in doubt — STOP and REPORT. */

    /* Ensure my_quickbase styles work inside the studio canvas */
    #qbs-root { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
    #qbs-root .main.card.pad { overflow: hidden !important; padding: 0 !important; height: 100% !important; }
  

    /* ─────────────────────────────────────────────────────────────────
       MUMS SUPPORT STUDIO — HD Premium Base Styles v35
    ───────────────────────────────────────────────────────────────── */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --ss-bg:        #010409;
      --ss-surface:   #0d1117;
      --ss-surface2:  #161b22;
      --ss-surface3:  #1c2128;
      --ss-border:    rgba(255,255,255,.09);
      --ss-border2:   rgba(255,255,255,.05);
      --ss-text:      #d0d8e4;
      --ss-muted:     #8b949e;
      --ss-accent:    var(--ss-accent, #58a6ff);
      --ss-accent2:   #0073ea;
      --ss-green:     #3fb950;
      --ss-purple:    #a25ddc;
      --ss-danger:    #f85149;
      --ss-warn:      #d29922;
      --ss-cyan:      #22d3ee;
      --ss-orange:    #fb923c;
      --ss-radius:    7px;
      --ss-font:      'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
      --ss-mono:      'JetBrains Mono', 'Courier New', monospace;
    }

    html, body {
      height: 100%;
      overflow: hidden;
      background: var(--ss-bg);
      color: var(--ss-text);
      font-family: var(--ss-font);
      font-size: 13px;
      line-height: 1.5;
    }

    .ss-shell {
      display: flex;
      flex-direction: column;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
    }

    /* ── SCROLLBAR — slim, premium ──────────────────── */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

    /* ─────────────────────────────────────────────────────────────────
       HEADER — HD Premium
    ───────────────────────────────────────────────────────────────── */
    .ss-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      height: 46px;
      min-height: 46px;
      background: var(--ss-surface);
      border-bottom: 1px solid var(--ss-border);
      z-index: 100;
      flex-shrink: 0;
      gap: 12px;
    }

    .ss-header-left {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .ss-brand {
      display: flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .ss-brand-icon {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: linear-gradient(135deg, #0073ea 0%, #a25ddc 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #fff;
      box-shadow: 0 2px 8px rgba(0,115,234,.35);
      flex-shrink: 0;
    }

    .ss-brand-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .ss-brand-name {
      font-size: 13px;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: .01em;
      line-height: 1;
    }

    .ss-brand-sub {
      font-size: 8px;
      font-weight: 600;
      color: var(--ss-muted);
      letter-spacing: .06em;
      text-transform: uppercase;
      line-height: 1;
    }

    /* Tab group */
    .ss-tabs {
      display: flex;
      gap: 3px;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .ss-tabs::-webkit-scrollbar { display: none; }

    .ss-tab {
      background: transparent;
      border: 1px solid transparent;
      color: var(--ss-muted);
      padding: 5px 11px;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      font-size: 11px;
      font-family: var(--ss-font);
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all .15s;
      white-space: nowrap;
    }

    .ss-tab:hover {
      color: var(--ss-text);
      background: rgba(255,255,255,.05);
    }

    .ss-tab.active {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
      color: var(--ss-accent);
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 32%, transparent);
    }

    /* QuickBase grouped menu */
    .ss-quickbase-menu {
      position: relative;
      flex-shrink: 0;
    }
    .ss-quickbase-trigger {
      background: transparent;
      border: 1px solid transparent;
      color: var(--ss-muted);
      padding: 5px 11px;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 700;
      font-size: 11px;
      font-family: var(--ss-font);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all .15s;
      white-space: nowrap;
    }
    .ss-quickbase-trigger:hover {
      color: var(--ss-text);
      background: rgba(255,255,255,.05);
    }
    .ss-quickbase-menu.open .ss-quickbase-trigger,
    .ss-quickbase-trigger.active {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
      color: var(--ss-accent);
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 32%, transparent);
    }
    .ss-quickbase-logo {
      width: 13px;
      height: 13px;
      object-fit: contain;
      display: inline-block;
      flex-shrink: 0;
    }
    .ss-quickbase-caret {
      font-size: 9px;
      opacity: .85;
      margin-left: 1px;
    }
    .ss-quickbase-dropdown {
      position: fixed;
      top: 0;
      left: 0;
      min-width: 188px;
      padding: 5px;
      border-radius: 10px;
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 25%, transparent);
      background: rgba(13,17,23,.98);
      box-shadow: 0 12px 28px rgba(0,0,0,.45);
      display: none;
      z-index: 9999;
      backdrop-filter: blur(8px);
    }
    .ss-quickbase-menu.open .ss-quickbase-dropdown {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .ss-quickbase-dropdown .ss-tab {
      width: 100%;
      justify-content: flex-start;
    }

    /* ── Premium glowing "Menu" dropdown ──────────────────────────────── */
    .ss-menu-group { position: relative; flex-shrink: 0; }
    .ss-menu-trigger {
      position: relative;
      display: flex; align-items: center; gap: 7px;
      padding: 5px 13px; border-radius: 7px; cursor: pointer;
      font-family: var(--ss-font); font-weight: 800; font-size: 11px; letter-spacing: .04em;
      color: #cfe6ff;
      background: linear-gradient(135deg, color-mix(in srgb, var(--ss-accent, #58a6ff) 16%, transparent), rgba(34,211,238,.12));
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 45%, transparent);
      box-shadow: 0 2px 10px rgba(34,211,238,.14);
      overflow: hidden; isolation: isolate;
      transition: color .15s, border-color .15s, box-shadow .25s, transform .12s;
      animation: ss-menu-breathe 3.2s ease-in-out infinite;
    }
    .ss-menu-trigger:hover { color: #fff; border-color: rgba(34,211,238,.7); transform: translateY(-1px); }
    .ss-menu-trigger:active { transform: translateY(0) scale(.98); }
    .ss-menu-ico {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 5px; font-size: 11px; z-index: 2;
      color: #8fd6ff; background: rgba(34,211,238,.14); border: 1px solid rgba(34,211,238,.3);
    }
    .ss-menu-label { position: relative; z-index: 2; }
    .ss-menu-caret { font-size: 9px; opacity: .9; margin-left: 1px; transition: transform .18s; z-index: 2; }
    .ss-menu-group.open .ss-menu-caret { transform: rotate(180deg); }
    .ss-menu-glow {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.22) 45%, rgba(255,255,255,0) 60%);
      transform: translateX(-120%); animation: ss-menu-sheen 3.6s ease-in-out infinite;
    }
    .ss-menu-group.open .ss-menu-trigger,
    .ss-menu-trigger.active {
      color: #fff;
      border-color: rgba(34,211,238,.85);
      box-shadow: 0 0 18px rgba(34,211,238,.45), inset 0 0 12px color-mix(in srgb, var(--ss-accent, #58a6ff) 18%, transparent);
      animation: none;
    }
    @keyframes ss-menu-breathe {
      0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--ss-accent, #58a6ff) 18%, transparent), 0 2px 10px rgba(34,211,238,.12); }
      50%      { box-shadow: 0 0 16px rgba(34,211,238,.42), 0 2px 12px color-mix(in srgb, var(--ss-accent, #58a6ff) 22%, transparent); }
    }
    @keyframes ss-menu-sheen {
      0%, 65% { transform: translateX(-120%); }
      85%, 100% { transform: translateX(220%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .ss-menu-trigger { animation: none; }
      .ss-menu-glow { display: none; }
    }
    .ss-menu-dropdown {
      position: fixed; top: 0; left: 0; min-width: 208px; padding: 5px;
      border-radius: 10px; border: 1px solid rgba(34,211,238,.3);
      background: rgba(13,17,23,.98);
      box-shadow: 0 14px 32px rgba(0,0,0,.5), 0 0 24px rgba(34,211,238,.12);
      display: none; z-index: 4000;
    }
    .ss-menu-group.open .ss-menu-dropdown { display: flex; flex-direction: column; gap: 2px; }
    .ss-menu-dropdown .ss-tab { width: 100%; justify-content: flex-start; }

    /* Home icon tab */
    .ss-home-btn {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.10);
      color: var(--ss-muted,#7d8590);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0;
      font-size: 13px;
      padding: 0;
      transition: background .18s, border-color .18s, color .18s, transform .15s, box-shadow .18s;
      position: relative;
    }
    .ss-home-btn:hover {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent);
      color: var(--ss-accent, #58a6ff);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent);
    }
    .ss-home-btn:active { transform: scale(.93); }
    .ss-home-btn.active,
    .ss-home-btn.ss-tab.active {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent) !important;
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent) !important;
      color: var(--ss-accent, #58a6ff) !important;
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent) !important;
    }
    body:has(#canvas-home.active) #ss-left-sidebar { display: none !important; }
    body:has(#canvas-home.active) #ss-center-canvas { flex: 1 !important; }
    body:has(#canvas-search_engine_2.active) #ss-left-sidebar { display: none !important; }
    body:has(#canvas-search_engine_2.active) #ss-center-canvas { flex: 1 !important; }

    /* Home canvas — Split Panel layout */
    #canvas-home { background: var(--ss-bg); overflow: hidden; }

    /* ── HOME SPLIT ── */
    .home-split { display: flex; height: 100%; overflow: hidden; }

    /* ══════════════════════════════════════════════════════════════════
       YCT PANEL — Premium Enterprise Card Design v3.0
    ══════════════════════════════════════════════════════════════════ */
    .yct-panel {
      width: 430px; min-width: 380px; display: flex; flex-direction: column;
      border-right: 1px solid var(--ss-border); overflow: hidden; flex-shrink: 0;
      background: var(--ss-surface);
    }
    .yct-header {
      padding: 12px 16px 10px; border-bottom: 1px solid var(--ss-border2); flex-shrink: 0;
      background: linear-gradient(135deg, color-mix(in srgb, var(--ss-accent, #58a6ff) 5%, transparent), transparent);
    }
    .yct-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .yct-icon {
      width: 28px; height: 28px; border-radius: 8px;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
      color: var(--ss-accent); font-size: 11px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .yct-title { font-size: 13px; font-weight: 900; color: #e6edf3; letter-spacing: -.01em; }
    .yct-count {
      margin-left: auto; font-size: 9px; font-weight: 900; padding: 3px 9px;
      border-radius: 20px; background: color-mix(in srgb, var(--ss-accent, #58a6ff) 14%, transparent);
      color: var(--ss-accent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
    }
    .yct-meta { font-size: 10px; color: var(--ss-muted); margin-bottom: 2px; }
    .yct-name-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 9px; border-radius: 20px;
      background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.2);
      color: var(--ss-cyan); font-size: 9px; font-weight: 800;
      letter-spacing: .04em; margin-top: 5px;
    }
    .yct-filter-row {
      display: flex; gap: 5px; padding: 8px 16px; border-bottom: 1px solid var(--ss-border2);
      flex-shrink: 0; flex-wrap: wrap;
    }
    .yct-pill {
      font-size: 9px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
      border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
      color: var(--ss-muted); cursor: pointer; transition: all .15s;
    }
    .yct-pill.active { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); color: var(--ss-accent); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent); }
    .yct-pill:hover:not(.active) { border-color: rgba(255,255,255,.18); color: var(--ss-text); }
    /* YCT Compact mode — hide card body & notes, show header only */
    #yct-list.yct-compact .yct-card-body  { display: none !important; }
    #yct-list.yct-compact .yct-notes-section { display: none !important; }
    #yct-list.yct-compact .yct-card-footer { display: none !important; }
    #yct-list.yct-compact .yct-entry { padding-bottom: 0 !important; cursor: pointer; }
    #yct-list.yct-compact .yct-card-header { padding-bottom: 8px !important; }

    /* ── CASE LIST ── */
    .yct-list { flex: 1; overflow-y: auto; padding: 10px 10px 14px; }
    .yct-list::-webkit-scrollbar { width: 3px; }
    .yct-list::-webkit-scrollbar-track { background: transparent; }
    .yct-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 99px; }

    /* ══ PREMIUM CASE ENTRY CARD ══════════════════════════════════════ */
    .yct-entry {
      margin-bottom: 9px;
      border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
      cursor: pointer; background: rgba(13,17,23,.7);
      transition: all .2s; position: relative; overflow: hidden;
    }
    .yct-entry:hover {
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 4%, transparent);
      box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
      transform: translateY(-1px);
    }
    .yct-entry.yct-warn:hover { border-color: rgba(210,153,34,.35); background: rgba(210,153,34,.03); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
    .yct-entry.yct-green:hover { border-color: rgba(63,185,80,.35); background: rgba(63,185,80,.03); box-shadow: 0 6px 24px rgba(0,0,0,.35); }

    /* Left accent bar */
    .yct-accent {
      position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px;
    }
    .yct-acc-blue  { background: linear-gradient(180deg,#58a6ff,#1d6bbd); }
    .yct-acc-warn  { background: linear-gradient(180deg,#d29922,#b07800); }
    .yct-acc-init  { background: rgba(255,255,255,.15); }
    .yct-acc-green { background: linear-gradient(180deg,#3fb950,#218838); }

    /* ── Card Header Row: Case# + Status + Age + TIME ── */
    .yct-card-header {
      display: flex; align-items: center; gap: 7px;
      padding: 10px 12px 8px 14px;
      border-bottom: 1px solid rgba(255,255,255,.05);
      flex-wrap: nowrap;
    }
    .yct-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .yct-dot-on   { background: #58a6ff; box-shadow: 0 0 6px rgba(88,166,255,.6); animation: yctpulse 2s infinite; }
    .yct-dot-warn { background: #d29922; box-shadow: 0 0 5px rgba(210,153,34,.5); }
    .yct-dot-res  { background: #3fb950; box-shadow: 0 0 5px rgba(63,185,80,.4); }
    @keyframes yctpulse { 0%,100%{opacity:1} 50%{opacity:.35} }

    .yct-cnum {
      font: 800 12px var(--ss-mono); color: var(--ss-accent, #58a6ff); letter-spacing: .03em;
    }
    .yct-badge {
      font-size: 8px; font-weight: 800; padding: 2px 7px; border-radius: 5px;
      letter-spacing: .05em; text-transform: uppercase;
    }
    .yct-cb-inv  { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); color: var(--ss-accent2, #79c0ff); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 25%, transparent); }
    .yct-cb-init { background: rgba(210,153,34,.12); color: #e3b341; border: 1px solid rgba(210,153,34,.25); }
    .yct-cb-res  { background: rgba(63,185,80,.12); color: #56d364; border: 1px solid rgba(63,185,80,.25); }
    .yct-cb-wait { background: rgba(162,93,220,.12); color: #d2a8ff; border: 1px solid rgba(162,93,220,.25); }

    /* Age pill */
    .yct-age-pill {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 9px; font-weight: 700; color: #7d8590;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
      border-radius: 20px; padding: 2px 8px;
    }
    .yct-age-pill i { font-size: 7px; opacity: .6; }

    /* PHT Time chip — NOW IN HEADER, prominent size */
    .yct-time-chip {
      margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 800;
      color: #22d3ee; font-family: var(--ss-mono);
      background: rgba(34,211,238,.08);
      border: 1px solid rgba(34,211,238,.22);
      border-radius: 7px; padding: 3px 9px;
      letter-spacing: .04em;
      flex-shrink: 0;
    }
    .yct-time-chip i { font-size: 9px; opacity: .8; }

    /* ── Card Body ── */
    .yct-card-body { padding: 9px 12px 0 14px; }

    /* End User row — full-width prominent display */
    .yct-eu-row { margin-bottom: 7px; }
    .yct-eu-tag {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 10px; border-radius: 6px;
      background: rgba(162,93,220,.1); border: 1px solid rgba(162,93,220,.22);
      color: #c084fc; font-size: 10px; font-weight: 800; letter-spacing: .03em;
    }
    .yct-eu-tag i { font-size: 9px; opacity: .75; }
    /* End User label prefix */
    .yct-eu-prefix {
      font-size: 8px; font-weight: 700; color: rgba(192,132,252,.55);
      text-transform: uppercase; letter-spacing: .07em; margin-right: 2px;
    }

    /* Case description */
    .yct-desc {
      font-size: 11px; font-weight: 700; color: #e6edf3; line-height: 1.45;
      margin-bottom: 9px; letter-spacing: .005em;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* ── Case Notes Section ── */
    .yct-notes-section {
      margin: 0 12px 10px 14px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(0,0,0,.25);
      overflow: hidden;
    }
    .yct-notes-header {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 9px;
      border-bottom: 1px solid rgba(255,255,255,.05);
      background: rgba(255,255,255,.025);
    }
    .yct-notes-label {
      font-size: 8px; font-weight: 800; letter-spacing: .08em;
      text-transform: uppercase; color: rgba(255,255,255,.3);
    }
    /* PHT timestamp chip — mini version kept for notes header compat */
    .yct-pht-chip {
      margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
      font-size: 8px; font-weight: 700;
      color: rgba(34,211,238,.6); font-family: var(--ss-mono);
      background: rgba(34,211,238,.05); border: 1px solid rgba(34,211,238,.1);
      border-radius: 4px; padding: 1px 6px;
    }
    .yct-pht-chip i { font-size: 7px; }
    /* Author row */
    .yct-notes-author {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 9px 3px;
    }
    .yct-author-avatar {
      width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 7px; font-weight: 800;
    }
    .yct-author-avatar.av-mine  { background: rgba(255,255,255,.07); color: rgba(255,255,255,.35); }
    .yct-author-avatar.av-other { background: rgba(34,211,238,.15); color: #22d3ee; }
    .yct-author-name { font-size: 10px; font-weight: 700; }
    .yct-author-name.an-mine  { color: rgba(255,255,255,.35); }
    .yct-author-name.an-other { color: #22d3ee; }
    .yct-me-chip {
      font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
      padding: 1px 4px; border-radius: 3px;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); color: var(--ss-accent, #58a6ff); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent);
    }
    /* Note text body */
    .yct-notes-text {
      padding: 3px 9px 8px;
      font-size: 10px; line-height: 1.55; color: rgba(255,255,255,.5);
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .yct-notes-text.nt-mine  { color: rgba(255,255,255,.3); }
    .yct-notes-text.nt-other { color: rgba(255,255,255,.52); }
    .yct-no-notes {
      padding: 8px 9px;
      font-size: 9px; color: rgba(255,255,255,.18); font-style: italic;
    }

    /* ── Card Footer / CTA ── */
    .yct-card-footer {
      display: flex; align-items: center; justify-content: flex-end;
      padding: 7px 12px 9px 14px;
      opacity: 0; transition: opacity .18s;
    }
    .yct-entry:hover .yct-card-footer { opacity: 1; }
    .yct-cta-link {
      font-size: 9px; font-weight: 800; color: var(--ss-accent, #58a6ff);
      display: inline-flex; align-items: center; gap: 4px;
      letter-spacing: .03em;
    }
    .yct-cta-link i { font-size: 8px; }

    /* ── Empty / Loading states ── */
    .yct-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; height: 200px; color: rgba(255,255,255,.2); font-size: 11px; text-align: center;
      padding: 20px;
    }
    .yct-empty i { font-size: 28px; opacity: .2; margin-bottom: 4px; }
    .yct-loading {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 8px; height: 120px; color: var(--ss-muted); font-size: 11px;
    }
    @keyframes yct-spin { to { transform: rotate(360deg); } }
    .yct-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.1); border-top-color: var(--ss-accent); border-radius: 50%; animation: yct-spin .7s linear infinite; }

    /* ── PANELS AREA ── */
    .home-panels-area {
      flex: 1; overflow: hidden; padding: 12px;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .home-panels-area::-webkit-scrollbar { width: 3px; }
    .home-panels-area::-webkit-scrollbar-track { background: transparent; }
    .home-panels-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 99px; }

    /* ── CANVAS TOOLBAR (Home) ── */
    .home-toolbar {
      display: flex; align-items: center; gap: 10px;
      padding: 0 14px; height: 38px; min-height: 38px;
      border-bottom: 1px solid var(--ss-border); background: var(--ss-surface2);
      flex-shrink: 0;
    }
    .home-tb-badge {
      display: flex; align-items: center; gap: 5px; padding: 3px 9px;
      border-radius: 5px; font: 700 9px var(--ss-font); letter-spacing: .04em;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent); color: var(--ss-accent);
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
    }
    .home-tb-refresh {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
      color: var(--ss-muted); padding: 4px 10px; border-radius: 5px;
      font: 600 10px var(--ss-font); cursor: pointer;
      display: flex; align-items: center; gap: 5px; transition: all .15s;
    }
    .home-tb-refresh:hover { background: rgba(255,255,255,.08); color: var(--ss-text); }
    .home-tb-date { font-size: 10px; color: var(--ss-muted); margin-left: auto; }

    /* panel cards */
    .hp-grid {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      /* FIXED HOME (2026-07-06): the whole page no longer scrolls. Three fixed
         rows map to grid-template-areas; each SECTION scrolls internally instead.
         Connect+ is a tall right column spanning rows 2+3 (per the mark-up). */
      grid-template-rows: minmax(160px, 0.82fr) minmax(0, 1fr) minmax(0, 1fr);
      /* 2026-07-17 Home rebuild: the INFORMATION SECTION card is retired
         (Contact Directory now lives in the top bar, left of New Case) and
         PROGRAM APPLICATION expands across both cells as the Launchpad. */
      grid-template-areas:
        "odp  odp  onc  onc"
        "prog prog conn conn"
        "ctl  ctl  conn conn";
      gap: 10px;
      min-height: 0;
      overflow: hidden;
    }
    .hp-grid::-webkit-scrollbar { width: 3px; }
    .hp-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 99px; }
    .hp-grid > .hp-card { min-width: 0; min-height: 0; overflow: hidden; }
    /* Named-area placement (order-independent; the hp-ctl-* modals are
       position:fixed so they stay out of grid flow and need no area). */
    #hp-odp-card                    { grid-area: odp; }
    #oc-card                        { grid-area: onc; }
    #hp-apps-card                   { grid-area: prog; }
    #hp-controller-testing-lab-card { grid-area: ctl; }
    #hp-connect-credential-card     { grid-area: conn; }
    /* Every home section body fills its cell and scrolls on its own — the page
       stays fixed; only the section with overflow shows an inner scrollbar. */
    .hp-grid > .hp-card > .hp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .hp-card {
      border: 1px solid var(--ss-border); border-radius: 12px;
      background: var(--ss-surface); overflow: hidden;
      display: flex; flex-direction: column;
    }
    .hp-card-head {
      padding: 9px 12px 8px; border-bottom: 1px solid var(--ss-border2);
      display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    }
    .hp-icon {
      width: 20px; height: 20px; border-radius: 5px;
      display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0;
    }
    .hp-title { font-size: 10px; font-weight: 800; color: #e6edf3; text-transform: uppercase; letter-spacing: .04em; }
    .hp-body { padding: 10px 12px; }
    .hp-vacant {
      background: repeating-linear-gradient(45deg, var(--ss-surface), var(--ss-surface) 4px, rgba(255,255,255,.01) 4px, rgba(255,255,255,.01) 8px) !important;
      border-style: dashed !important;
    }
    .hp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 64px; gap: 6px; }
    .hp-empty i { font-size: 18px; opacity: .1; }
    .hp-empty span { font-size: 10px; color: rgba(255,255,255,.18); }
    /* CTL card fills its row; inner #hp-ctl-list scrolls (ctl_booking.js owns it). */
    #hp-controller-testing-lab-card { display: flex; flex-direction: column; }
    #hp-controller-testing-lab-card .hp-body {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    /* Connect+ tall column: header fixed, body scrolls internally (rebuilt 2026-07-06). */
    #hp-connect-credential-card { display: flex; flex-direction: column; }

    .hp-apps-manage-btn {
      margin-left: auto;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
      color: var(--ss-accent2, #79c0ff);
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 700;
      font-family: var(--ss-font);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .hp-apps-manage-btn:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); color: #a5d6ff; }
    /* ═══════════════════════════════════════════════════════════════════
       PROGRAM APPLICATION — LAUNCHPAD (2026-07-17 rebuild)
       iPhone-class paged app grid: 2 rows × 8 columns = 16 apps per screen.
       #hp-apps-grid is the sliding track (one .hpl-page per screen); pages
       flip via dots / hover edge arrows / swipe / horizontal wheel / ⇦⇨.
       ARRANGE mode (#hp-apps-card.is-arrange) jiggles icons and enables the
       drag-reorder engine — home_apps.js owns every element in this card,
       keep class names in sync with its _haRender*() builders.
    ═══════════════════════════════════════════════════════════════════════ */
    .hp-grid > .hp-card > .hp-body.hpl-body {
      overflow: hidden;
      display: flex; flex-direction: column; gap: 4px;
      padding: 8px 10px 6px;
    }
    .hpl-viewport {
      position: relative; flex: 1; min-height: 0;
      overflow: hidden; border-radius: 10px; outline: none;
      touch-action: pan-y;
    }
    .hpl-viewport:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent); }
    .hpl-track {
      display: flex; height: 100%;
      transition: transform .32s cubic-bezier(.22,.8,.28,1);
      will-change: transform;
    }
    .hpl-page {
      flex: 0 0 100%; min-width: 0; height: 100%;
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 6px 8px; align-items: stretch;
      padding: 4px 6px;
    }
    .hpl-page.is-empty { display: flex; align-items: center; justify-content: center; }
    .hpl-app {
      position: relative; min-width: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 7px; padding: 6px 4px;
      border-radius: 12px; cursor: pointer;
      text-decoration: none; color: inherit; text-align: center;
      transition: transform .18s ease, background .15s;
      -webkit-user-drag: none; user-select: none;
    }
    .hpl-app:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent); }
    .hpl-app:hover .hpl-app-icon { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 24px rgba(2,6,23,.5); }
    .hpl-app:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-accent, #58a6ff) 45%, transparent); }
    .hpl-app-icon {
      width: min(46px, 74%); aspect-ratio: 1 / 1;
      border-radius: 26%;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.1);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; flex-shrink: 0;
      color: var(--ss-accent, #58a6ff); font-size: 15px;
      box-shadow: 0 4px 12px rgba(2,6,23,.35);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .hpl-app-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .hpl-app-mono {
      width: 100%; height: 100%; border-radius: inherit;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 800; letter-spacing: .02em;
      font-family: var(--ss-font);
    }
    .hpl-app-label {
      max-width: 100%; padding: 0 2px;
      font-size: 10px; font-weight: 700; color: #e6edf3; line-height: 1.25;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .hpl-empty {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      padding: 10px 0;
    }
    .hpl-empty i { font-size: 22px; color: rgba(255,255,255,.18); }
    .hpl-empty span { font-size: 10px; color: var(--ss-muted); }
    .hpl-empty-add {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
      color: var(--ss-accent2, #79c0ff); border-radius: 8px; padding: 6px 12px;
      font: 700 10px var(--ss-font); cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
      transition: background .15s, color .15s;
    }
    .hpl-empty-add:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); color: #a5d6ff; }
    /* edge page arrows — appear on hover, iOS-minimal */
    .hpl-nav {
      position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
      width: 24px; height: 44px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(2,6,23,.6); border: 1px solid rgba(255,255,255,.12);
      color: var(--ss-muted); font-size: 10px; cursor: pointer;
      opacity: 0; transition: opacity .15s, color .15s, background .15s;
    }
    .hpl-nav.prev { left: 4px; }
    .hpl-nav.next { right: 4px; }
    .hpl-viewport:hover .hpl-nav, .hpl-nav:focus-visible { opacity: 1; }
    .hpl-nav:hover { color: #e6edf3; background: color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent); }
    .hpl-nav:disabled { opacity: 0 !important; pointer-events: none; }
    /* page dots */
    .hpl-dots {
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      gap: 7px; padding: 3px 0 1px; min-height: 13px;
    }
    .hpl-dot {
      width: 7px; height: 7px; border-radius: 50%;
      border: none; padding: 0; cursor: pointer;
      background: rgba(255,255,255,.16);
      transition: background .15s, transform .15s;
    }
    .hpl-dot:hover { background: rgba(255,255,255,.35); transform: scale(1.25); }
    .hpl-dot.is-active { background: #58a6ff; transform: scale(1.15); box-shadow: 0 0 6px rgba(88,166,255,.55); }
    /* header controls */
    .hpl-count {
      margin-left: 2px; min-width: 18px; height: 16px; padding: 0 5px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 999px; background: color-mix(in srgb, var(--ss-accent, #58a6ff) 14%, transparent);
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
      font-size: 9px; font-weight: 800; color: var(--ss-accent2, #79c0ff);
    }
    .hpl-search {
      margin-left: auto; min-width: 0;
      display: flex; align-items: center; gap: 6px;
      height: 24px; padding: 0 8px; border-radius: 7px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
      width: clamp(110px, 28%, 220px);
      transition: border-color .15s, box-shadow .15s;
    }
    /* Focus = the pill's own LINE lights up blue (MACE 2026-07-17) — a border
       glow only; the background stays put and nothing else may draw a box. */
    .hpl-search:focus-within {
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 60%, transparent);
      box-shadow: 0 0 8px color-mix(in srgb, var(--ss-accent, #58a6ff) 28%, transparent);
    }
    .hpl-search i { font-size: 9px; color: var(--ss-muted); flex-shrink: 0; }
    /* The pill is the ONLY visual box. styles.css §form gives every bare
       <input> its own border/panel/10px padding and a BLUE focus box-shadow
       (enterprise_ux.css adds another) — every one of those must die here,
       explicitly, in rest AND focus states, or a second box appears inside
       the pill (the "sabog" bug). Keep in sync with the §6.20 exemption in
       tools/theme/s6_primitives.css (light catch-all uses !important). */
    .hpl-search input {
      flex: 1; min-width: 0; height: 100%;
      background: transparent; border: none; outline: none;
      box-shadow: none; padding: 0; margin: 0; border-radius: 0;
      color: #e6edf3; font: 600 10px var(--ss-font);
    }
    .hpl-search input:focus,
    .hpl-search input:focus-visible {
      background: transparent; border: none; outline: none; box-shadow: none;
    }
    .hpl-search input::placeholder { color: rgba(255,255,255,.25); }
    .hpl-search-clear {
      display: none; width: 14px; height: 14px; border-radius: 50%;
      border: none; padding: 0; cursor: pointer; flex-shrink: 0;
      background: rgba(255,255,255,.12); color: var(--ss-muted);
      font-size: 8px; align-items: center; justify-content: center;
    }
    .hpl-search.has-value .hpl-search-clear { display: inline-flex; }
    .hpl-search-clear:hover { background: rgba(248,81,73,.3); color: #f85149; }
    .hpl-arrange-btn {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
      color: var(--ss-muted); border-radius: 6px; padding: 3px 8px;
      font-size: 10px; font-weight: 700; font-family: var(--ss-font); cursor: pointer;
      display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
      transition: all .15s;
    }
    .hpl-arrange-btn:hover { background: rgba(255,255,255,.08); color: #e6edf3; }
    .hpl-arrange-btn.is-on {
      background: rgba(63,185,80,.16); border-color: rgba(63,185,80,.4); color: #3fb950;
      box-shadow: 0 0 10px rgba(63,185,80,.15);
    }
    .hpl-arrange-btn:disabled { opacity: .4; pointer-events: none; }
    #hp-apps-card .hp-apps-manage-btn { margin-left: 0; flex-shrink: 0; }
    /* ARRANGE mode — iOS jiggle + drag affordances */
    #hp-apps-card.is-arrange .hpl-viewport { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 3%, transparent); }
    #hp-apps-card.is-arrange .hpl-app { cursor: grab; touch-action: none; }
    #hp-apps-card.is-arrange .hpl-app:active { cursor: grabbing; }
    @keyframes hplJiggle {
      0%   { transform: rotate(-1.6deg); }
      50%  { transform: rotate(1.8deg); }
      100% { transform: rotate(-1.6deg); }
    }
    #hp-apps-card.is-arrange .hpl-app-icon { animation: hplJiggle .34s ease-in-out infinite; }
    #hp-apps-card.is-arrange .hpl-app:nth-child(2n) .hpl-app-icon { animation-duration: .38s; animation-delay: -.12s; }
    #hp-apps-card.is-arrange .hpl-app:nth-child(3n) .hpl-app-icon { animation-delay: -.2s; }
    #hp-apps-card.is-tile-drag .hpl-app-icon { animation-play-state: paused; }
    .hpl-app.is-dragging { opacity: 0; }
    .hpl-app.is-drag-ghost {
      position: fixed; left: 0; top: 0; margin: 0; z-index: 10000;
      pointer-events: none;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 14%, transparent);
      box-shadow: 0 18px 44px rgba(2,6,23,.65);
    }
    .hpl-app.is-drag-ghost .hpl-app-icon { animation: none; transform: scale(1.08); }
    .hpl-slot {
      min-width: 0; margin: 6px 4px;
      border: 1.5px dashed color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent);
      border-radius: 12px;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 6%, transparent);
    }
    @media (prefers-reduced-motion: reduce) {
      #hp-apps-card.is-arrange .hpl-app-icon { animation: none; }
      .hpl-track, .hpl-app, .hpl-app-icon { transition: none; }
    }
    #home-apps-modal {
      position: fixed;
      inset: 0;
      z-index: 9902;
      background: rgba(2,6,23,.78);
      backdrop-filter: blur(5px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }
    #home-apps-modal.is-open { display: flex; }
    .ha-step-chip {
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--ss-muted);
      background: rgba(255,255,255,.03);
    }
    .ha-step-chip.active { color: var(--ss-accent2, #79c0ff); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 14%, transparent); }
    .ha-step-chip.done { color: #3fb950; border-color: rgba(63,185,80,.35); background: rgba(63,185,80,.12); }
    @keyframes haBlinkPulse {
      0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245,158,11,.25); }
      50% { opacity: .72; box-shadow: 0 0 0 5px rgba(245,158,11,.08); }
    }
    .ha-upload-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(245,158,11,.45);
      background: rgba(245,158,11,.14);
      color: #fbbf24 !important;
      font-weight: 800 !important;
      text-decoration: none !important;
      animation: haBlinkPulse 1s ease-in-out infinite;
    }
    .ha-upload-link:hover { background: rgba(245,158,11,.22); color: #fcd34d !important; }
    .ha-upload-arrows { color: #fb7185; font-weight: 900; letter-spacing: .04em; }

    /* ═══════════════════════════════════════════════════════════════════
       CONNECT+ CREDENTIAL CARD + INFORMATION SECTION (Home dashboard tiles)
    ═══════════════════════════════════════════════════════════════════════ */
    .hp-cc-manage-btn {
      margin-left: auto;
      background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.3);
      color: #67e8f9; border-radius: 6px; padding: 3px 8px;
      font: 700 10px var(--ss-font); cursor: pointer;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .hp-cc-manage-btn:hover { background: rgba(34,211,238,.2); color: #a5f3fc; }
    .hp-cc-preview { display: flex; flex-direction: column; gap: 6px; }
    .hp-cc-row {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 7px 10px; border-radius: 8px;
      background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    }
    .hp-cc-row-main { min-width: 0; }
    .hp-cc-row-eu { font-size: 11px; font-weight: 700; color: #e6edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hp-cc-row-un { font-size: 9px; color: var(--ss-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hp-cc-row-date { font-size: 8px; color: var(--ss-muted); white-space: nowrap; flex-shrink: 0; }
    .hp-cc-more {
      align-self: flex-start; margin-top: 2px;
      background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.22);
      color: #67e8f9; border-radius: 6px; padding: 4px 9px;
      font: 700 9px var(--ss-font); cursor: pointer;
    }
    .hp-cc-more:hover { background: rgba(34,211,238,.16); }

    /* (2026-07-17) INFORMATION SECTION card retired — the Contact Directory
       now renders as the .ss-topbar-contacts chip in the header (see the
       TOP BAR block). Old .hp-info-* tile styles removed with the card. */

    /* ═══════════════════════════════════════════════════════════════════
       SHARED MANAGER MODALS (Connect+ Credentials · Contact Directory)
    ═══════════════════════════════════════════════════════════════════════ */
    .ss-mgr-modal {
      position: fixed; inset: 0; z-index: 9903;
      background: rgba(2,6,23,.78);
      backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
      display: none; align-items: center; justify-content: center; padding: 14px;
      animation: ciPanelIn .2s ease;
    }
    .ss-mgr-modal.is-open { display: flex; }

    .ss-mgr-form {
      border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
      padding: 12px; background: rgba(255,255,255,.02);
    }
    .ss-mgr-form-title {
      font-size: 11px; font-weight: 800; color: #e6edf3;
      display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
    }
    .cc-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .cd-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .cd-field-full { grid-column: 1 / -1; }
    .ss-mgr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .ss-mgr-field label {
      font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
      color: var(--ss-muted);
    }
    /* Manager-form inputs use the regular UI font (the base .odp-input is a
       bold-monospace tuned for ODP password chips). */
    .ss-mgr-form .odp-input,
    .ss-mgr-search input {
      font: 500 13px var(--ss-font); letter-spacing: normal;
    }
    #cc-in-password { font: 600 13px var(--ss-mono, monospace); letter-spacing: .04em; }
    select.odp-input {
      cursor: pointer; -webkit-appearance: none; appearance: none;
      padding-right: 28px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237d8590' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 10px center;
    }
    select.odp-input option { background: #161b22; color: #e6edf3; }
    .cc-pw-wrap { position: relative; display: flex; align-items: center; }
    .cc-pw-wrap .odp-input { flex: 1; padding-right: 34px; }
    .cc-pw-toggle {
      position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
      width: 26px; height: 26px; border-radius: 6px; border: none;
      background: transparent; color: var(--ss-muted); cursor: pointer; font-size: 11px;
    }
    .cc-pw-toggle:hover { color: #e6edf3; }

    .ss-mgr-listwrap {
      border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
      padding: 12px; background: rgba(255,255,255,.02);
      display: flex; flex-direction: column; gap: 10px;
    }
    .ss-mgr-listbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .ss-mgr-search {
      display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px;
      background: var(--st-surface, rgba(0,0,0,.3)); border: 1px solid var(--st-line-strong, rgba(255,255,255,.1));
      border-radius: 9px; padding: 0 12px; height: 36px; box-sizing: border-box;
      transition: border-color .15s, box-shadow .15s;
    }
    .ss-mgr-search:focus-within { border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-accent-soft); }
    .ss-mgr-search i { font-size: 12px; color: var(--st-faint); flex-shrink: 0; }
    .ss-mgr-search input {
      flex: 1; background: transparent; border: none; outline: none;
      color: #e6edf3; font: 500 12px var(--ss-font);
    }
    .ss-mgr-search input::placeholder { color: rgba(255,255,255,.28); }
    .ss-mgr-count { font-size: 10px; font-weight: 700; color: var(--ss-muted); flex-shrink: 0; }
    .ss-mgr-list {
      display: flex; flex-direction: column; gap: 8px;
      max-height: 46vh; overflow-y: auto; padding-right: 2px;
    }
    .ss-mgr-list::-webkit-scrollbar { width: 5px; }
    .ss-mgr-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }
    .ss-mgr-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 8px; padding: 36px 12px; color: var(--ss-muted);
    }
    .ss-mgr-empty i { font-size: 26px; opacity: .15; }
    .ss-mgr-empty span { font-size: 11px; opacity: .55; }

    /* ── Connect+ credential cards ── */
    .cc-card {
      border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
      background: rgba(255,255,255,.025); padding: 10px 12px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .cc-card-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
    .cc-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .cc-cell-lbl { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-muted); }
    .cc-cell-val { font-size: 12px; color: #e6edf3; word-break: break-word; }
    .cc-mono { font-family: var(--ss-mono, monospace); }
    .cc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(255,255,255,.06); padding-top: 7px; }
    .cc-date { font-size: 9px; color: var(--ss-muted); display: inline-flex; align-items: center; gap: 4px; }
    .cc-actions { display: flex; gap: 5px; }
    .cc-btn {
      width: 28px; height: 28px; border-radius: 7px;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      color: var(--ss-muted); cursor: pointer; font-size: 11px;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background .14s, color .14s, border-color .14s;
    }
    .cc-btn:hover { background: rgba(255,255,255,.1); color: #e6edf3; }
    .cc-btn.danger:hover { background: rgba(248,81,73,.16); border-color: rgba(248,81,73,.35); color: #f85149; }

    /* ── Contact Directory cards ── */
    .cd-filter-chips { display: flex; gap: 5px; flex-wrap: wrap; }
    .cd-chip {
      border: 1px solid rgba(255,255,255,.13); border-radius: 999px;
      padding: 4px 10px; font: 700 9px var(--ss-font); letter-spacing: .03em;
      color: var(--ss-muted); background: rgba(255,255,255,.03); cursor: pointer;
      transition: background .14s, color .14s, border-color .14s;
    }
    .cd-chip:hover { background: rgba(255,255,255,.07); color: #e6edf3; }
    .cd-card {
      display: flex; align-items: flex-start; gap: 12px;
      border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
      background: rgba(255,255,255,.025); padding: 12px;
    }
    .cd-ava {
      width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font: 900 13px var(--ss-font); border: 1px solid;
    }
    .cd-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .cd-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .cd-name { font-size: 13px; font-weight: 800; color: #e6edf3; }
    .cd-cat { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
    .cd-sub { font-size: 10px; color: var(--ss-muted); }
    .cd-contacts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; }
    .cd-link {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; color: #67e8f9; text-decoration: none;
    }
    .cd-link i { font-size: 9px; opacity: .8; }
    .cd-link:hover { text-decoration: underline; }
    .cd-notes {
      font-size: 11px; color: var(--ss-text); line-height: 1.45; margin-top: 3px;
      padding: 6px 9px; border-radius: 7px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    }
    .cd-meta { font-size: 8px; color: var(--ss-muted); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
    .cd-del { flex-shrink: 0; }

    @media (max-width: 640px) {
      .cc-form-grid, .cd-form-grid, .cc-card-grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════════════════════════
       CONNECT+ UPDATED CREDENTIAL — rebuilt 2026-07-06
       Tall-column Home card (fixed head + internal scroll) · dynamic fields ·
       per-field ID CODE binding · per-user pins · search. Token-driven so both
       Light + Dark render correctly with no theme regeneration (Rule R1).
    ═══════════════════════════════════════════════════════════════════════════ */
    /* Card body: fixed toolbar, only the list scrolls (overrides generic .hp-body auto) */
    #hp-connect-credential-card > .hp-body {
      display: flex; flex-direction: column; gap: 8px;
      overflow: hidden; padding: 10px;
    }
    .hp-cc-toolbar { display: flex; align-items: stretch; gap: 8px; flex-shrink: 0; flex-wrap: nowrap; }
    .hp-cc-search {
      display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
      background: var(--st-surface, #fff); border: 1px solid var(--st-line-strong, rgba(255,255,255,.16));
      border-radius: 9px; padding: 0 12px; height: 36px; box-sizing: border-box;
      transition: border-color .15s, box-shadow .15s, background .15s;
    }
    .hp-cc-search:focus-within { border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-accent-soft); background: var(--st-surface); }
    .hp-cc-search > i { font-size: 12px; color: var(--st-faint); flex-shrink: 0; }
    .hp-cc-search input {
      flex: 1 1 auto; min-width: 0; width: 100%; background: transparent; border: none; outline: none;
      color: var(--st-text); font: 500 12.5px var(--ss-font); line-height: 1; height: 100%; padding: 0;
    }
    .hp-cc-search input::placeholder { color: var(--st-faint); font-weight: 500; }
    .hp-cc-add {
      flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      background: var(--st-accent, #2a63cf); border: 1px solid var(--st-accent, #2a63cf); color: #fff;
      border-radius: 9px; height: 36px; padding: 0 14px; font: 700 11.5px var(--ss-font); cursor: pointer;
      transition: filter .15s; white-space: nowrap; box-sizing: border-box;
    }
    .hp-cc-add:hover { filter: brightness(1.08); }
    .hp-cc-add:active { filter: brightness(.96); }
    .hp-cc-list {
      flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px;
    }
    .hp-cc-list::-webkit-scrollbar { width: 6px; }
    .hp-cc-list::-webkit-scrollbar-thumb { background: var(--st-line-strong); border-radius: 99px; }

    /* Credential item card (shared by Home card + modal list) */
    .cc-item {
      border: 1px solid var(--st-line); border-radius: var(--st-radius-lg, 10px);
      background: var(--st-surface); overflow: hidden;
    }
    .cc-item.pinned { border-color: var(--st-accent); box-shadow: inset 3px 0 0 var(--st-accent); }
    /* Dynamic entries (auto-mapped from System Update ▸ CONNECT+) — read-only, teal accent */
    .cc-item.dynamic { border-color: var(--st-info-line); }
    .cc-item.dynamic.pinned { border-color: var(--st-accent); }
    .cc-item.dynamic .cc-item-head { background: var(--st-info-bg); }
    .cc-syncbadge {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
      font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
      padding: 2px 7px; border-radius: 999px;
      background: var(--st-info-bg); border: 1px solid var(--st-info-line); color: var(--st-accent);
    }
    .cc-syncbadge i { font-size: 8px; }
    .cc-item-head {
      display: flex; align-items: center; gap: 8px; padding: 8px 10px;
      background: var(--st-surface-2); border-bottom: 1px solid var(--st-line);
    }
    .cc-pin {
      flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
      background: transparent; border: 1px solid var(--st-line-strong); color: var(--st-faint);
      cursor: pointer; font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
      transition: background .14s, color .14s, border-color .14s;
    }
    .cc-pin:hover { color: var(--st-accent); border-color: var(--st-accent); }
    .cc-pin.on { background: var(--st-accent-soft); border-color: var(--st-accent); color: var(--st-accent); }
    .cc-eu {
      flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: var(--st-text);
      letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cc-item-acts { display: flex; gap: 4px; flex-shrink: 0; }
    .cc-item-fields { padding: 7px 10px; display: flex; flex-direction: column; gap: 5px; }
    .cc-frow { display: flex; align-items: flex-start; gap: 8px; min-height: 22px; }
    .cc-frow-empty { color: var(--st-faint); font-size: 11px; font-style: italic; }
    .cc-flabel {
      flex-shrink: 0; width: 38%; max-width: 132px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
      font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--st-muted);
      padding-top: 2px;
    }
    .cc-fval {
      flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; justify-content: space-between;
      font-size: 12px; color: var(--st-text); word-break: break-word;
    }
    .cc-fval-acts { display: inline-flex; gap: 3px; flex-shrink: 0; }
    .cc-secret { letter-spacing: .12em; }
    .cc-dash { color: var(--st-faint); }
    .cc-miss { color: var(--st-warn); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
    .cc-item-foot { padding: 5px 10px 8px; font-size: 9px; color: var(--st-muted); display: flex; align-items: center; gap: 5px; }
    .cc-fbtn {
      width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
      background: var(--st-surface); border: 1px solid var(--st-line-strong); color: var(--st-text-3);
      cursor: pointer; font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
      transition: background .14s, color .14s, border-color .14s;
    }
    .cc-fbtn:hover { background: var(--st-surface-2); color: var(--st-accent); border-color: var(--st-accent); }
    .cc-fbtn.danger:hover { color: var(--st-danger); border-color: var(--st-danger-line); background: var(--st-danger-bg); }
    /* ID CODE chip — the CONNECT+ System Update link marker */
    .cc-code-chip {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 8px; font-weight: 800; letter-spacing: .02em; text-transform: none;
      padding: 1px 5px; border-radius: 999px;
      background: var(--st-info-bg); border: 1px solid var(--st-info-line); color: var(--st-accent);
    }
    .cc-code-chip i { font-size: 7px; }
    .cc-code-chip.missing { background: var(--st-warn-bg); border-color: var(--st-warn-line); color: var(--st-warn); }

    /* Composer — dynamic fields + ID CODE binding (in the manager modal) */
    .cc-composer.editing { border-color: var(--st-accent) !important; box-shadow: 0 0 0 1px var(--st-accent-soft); }
    .cc-primary-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
    .cc-primary-field label {
      font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--st-text-2);
      display: flex; align-items: center; gap: 7px;
    }
    .cc-req {
      font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
      color: var(--st-danger); background: var(--st-danger-bg); border: 1px solid var(--st-danger-line);
      border-radius: 999px; padding: 1px 6px;
    }
    .cc-enduser-input { font-size: 15px !important; font-weight: 700 !important; }
    .cc-enduser-input.cc-shake { animation: ccShake .4s; border-color: var(--st-danger) !important; }
    @keyframes ccShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }
    .cc-fields-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
    .cc-fields-head > span:first-child { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--st-muted); display: inline-flex; align-items: center; gap: 6px; }
    .cc-fields-hint { font-size: 10px; color: var(--st-faint); font-weight: 500; }
    .cc-fields { display: flex; flex-direction: column; gap: 8px; }
    .cc-fe-empty { font-size: 11px; color: var(--st-faint); font-style: italic; padding: 4px 0; }
    .cc-fe-row { display: grid; grid-template-columns: minmax(110px, 0.85fr) minmax(0, 1.5fr) auto; gap: 8px; align-items: center; }
    .cc-fe-label { font-weight: 700 !important; }
    .cc-fe-value { min-width: 0; }
    .cc-fe-bound {
      display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 38px;
      padding: 0 10px; border-radius: 8px;
      background: var(--st-info-bg); border: 1px solid var(--st-info-line);
    }
    .cc-fe-bound.missing { background: var(--st-warn-bg); border-color: var(--st-warn-line); }
    .cc-fe-boundval { flex: 1; min-width: 0; font-size: 12px; color: var(--st-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--ss-mono, monospace); }
    .cc-fe-boundval em { color: var(--st-warn); font-style: normal; font-family: var(--ss-font); }
    .cc-fe-tools { display: inline-flex; gap: 4px; flex-shrink: 0; }
    .cc-fe-mini {
      width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
      background: var(--st-surface); border: 1px solid var(--st-line-strong); color: var(--st-text-3);
      cursor: pointer; font-size: 11px; display: inline-flex; align-items: center; justify-content: center;
      transition: background .14s, color .14s, border-color .14s;
    }
    .cc-fe-mini:hover { color: var(--st-accent); border-color: var(--st-accent); background: var(--st-surface-2); }
    .cc-fe-mini.on { background: var(--st-accent-soft); border-color: var(--st-accent); color: var(--st-accent); }
    .cc-fe-mini.danger:hover { color: var(--st-danger); border-color: var(--st-danger-line); background: var(--st-danger-bg); }
    .cc-addfield-btn {
      margin-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
      background: transparent; border: 1px dashed var(--st-line-strong); color: var(--st-text-2);
      border-radius: 8px; padding: 7px 12px; font: 700 11px var(--ss-font); cursor: pointer; transition: all .15s;
    }
    .cc-addfield-btn:hover { border-color: var(--st-accent); color: var(--st-accent); border-style: solid; }
    .cc-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
    .cc-save-btn { cursor: pointer; }
    .cc-cancel-btn {
      display: inline-flex; align-items: center; gap: 6px; background: transparent;
      border: 1px solid var(--st-line-strong); color: var(--st-text-2); border-radius: 8px;
      padding: 8px 14px; font: 700 12px var(--ss-font); cursor: pointer; transition: all .14s;
    }
    .cc-cancel-btn:hover { border-color: var(--st-danger); color: var(--st-danger); }
    .cc-saved-msg { font-size: 11px; font-weight: 700; color: var(--st-success); opacity: 0; transition: opacity .2s; }
    .cc-saved-msg.show { opacity: 1; }

    @media (max-width: 640px) {
      .cc-fe-row { grid-template-columns: 1fr; }
      .cc-fe-tools { justify-content: flex-end; }
      .cc-flabel { width: 100%; max-width: none; }
      .cc-frow { flex-direction: column; align-items: stretch; gap: 2px; }
    }

    /* ═══════════════════════════════════════════════════════════════════════
       FEATURE cc-sync — LIVE SYNC CONFIGURATION (2026-07-17)
       Home-card status chip · modal header entry · Sync Settings panel
       (mode cards, live menu list, per-menu End User column, live preview).
       Token-driven (--st-*) so Light + Dark both render with zero theme
       regeneration (Rule R1).
    ═══════════════════════════════════════════════════════════════════════════ */
    /* ── Home-card status chip ── */
    .hp-cc-sync-chip {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
      height: 24px; padding: 0 9px; margin-left: auto; margin-right: 8px;
      border-radius: 999px; cursor: pointer;
      font: 800 9px var(--ss-font); letter-spacing: .04em; text-transform: uppercase;
      background: var(--st-info-bg); border: 1px solid var(--st-info-line); color: var(--st-accent);
      transition: filter .15s, background .15s, color .15s, border-color .15s;
    }
    .hp-cc-sync-chip:hover { filter: brightness(1.06); }
    .hp-cc-sync-chip i { font-size: 8px; }
    .hp-cc-sync-chip.on i { animation: ccSyncSpin 6s linear infinite; }
    .hp-cc-sync-chip.off { background: var(--st-surface-2); border-color: var(--st-line-strong); color: var(--st-faint); }
    @keyframes ccSyncSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    #hp-connect-credential-card .hp-cc-manage-btn { margin-left: 0; }

    /* ── Modal-header entry button ── */
    .cc-sync-openbtn {
      margin-left: auto; flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 7px;
      height: 32px; padding: 0 13px; border-radius: 9px; cursor: pointer;
      font: 800 11px var(--ss-font); letter-spacing: .02em;
      background: var(--st-info-bg); border: 1px solid var(--st-info-line); color: var(--st-accent);
      transition: background .15s, border-color .15s, color .15s, filter .15s;
    }
    .cc-sync-openbtn:hover { filter: brightness(1.07); }
    .cc-sync-openbtn.active { background: var(--st-accent); border-color: var(--st-accent); color: #fff; }
    .cc-sync-openbtn.active .cc-sync-opendot { background: #fff; }
    .cc-sync-openbtn.saved { background: var(--st-success, #3fb950); border-color: var(--st-success, #3fb950); color: #fff; }
    .cc-sync-opendot {
      width: 6px; height: 6px; border-radius: 999px; background: var(--st-accent);
      box-shadow: 0 0 0 3px var(--st-accent-soft);
    }

    /* ── Panel shell ── */
    .cc-sync-view { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
    .cc-sync-top { display: flex; align-items: flex-start; gap: 12px; }
    .cc-sync-backbtn {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
      height: 34px; padding: 0 13px; border-radius: 9px; cursor: pointer;
      font: 700 11.5px var(--ss-font);
      background: var(--st-surface); border: 1px solid var(--st-line-strong); color: var(--st-text-2);
      transition: border-color .15s, color .15s, background .15s;
    }
    .cc-sync-backbtn:hover { border-color: var(--st-accent); color: var(--st-accent); background: var(--st-surface-2); }
    .cc-sync-toptitles { flex: 1; min-width: 0; }
    .cc-sync-title {
      display: flex; align-items: center; gap: 8px;
      font: 800 14.5px var(--ss-font); letter-spacing: -.01em; color: var(--st-text);
    }
    .cc-sync-title i { color: var(--st-accent); font-size: 12px; }
    .cc-sync-sub { margin-top: 3px; font-size: 11px; color: var(--st-muted); line-height: 1.45; }
    .cc-sync-refresh {
      flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
      background: var(--st-surface); border: 1px solid var(--st-line-strong); color: var(--st-text-3);
      transition: color .15s, border-color .15s, transform .3s;
    }
    .cc-sync-refresh:hover { color: var(--st-accent); border-color: var(--st-accent); transform: rotate(90deg); }

    /* ── Status hero strip ── */
    .cc-sync-hero {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      border: 1px solid var(--st-line); border-radius: 12px;
      background: var(--st-surface-2); padding: 12px 14px;
    }
    .cc-sync-hero-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; background: var(--st-faint); }
    .cc-sync-hero.on { border-color: var(--st-info-line); background: var(--st-info-bg); }
    .cc-sync-hero.on .cc-sync-hero-dot { background: var(--st-success, #3fb950); box-shadow: 0 0 0 4px rgba(63,185,80,.14); }
    .cc-sync-hero.idle .cc-sync-hero-dot { background: var(--st-warn); box-shadow: 0 0 0 4px rgba(210,153,34,.12); }
    .cc-sync-hero.off .cc-sync-hero-dot { background: var(--st-faint); }
    .cc-sync-hero-main { flex: 1; min-width: 180px; }
    .cc-sync-hero-state { font: 800 12.5px var(--ss-font); color: var(--st-text); letter-spacing: -.01em; }
    .cc-sync-hero-detail { margin-top: 2px; font-size: 11px; color: var(--st-muted); line-height: 1.4; }
    .cc-sync-hero-stamp {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
      font-size: 9.5px; color: var(--st-faint); font-weight: 600;
    }

    /* ── Mode selector cards ── */
    .cc-sync-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .cc-sync-mode {
      display: flex; align-items: flex-start; gap: 10px; text-align: left; cursor: pointer;
      border: 1px solid var(--st-line-strong); border-radius: 12px;
      background: var(--st-surface); padding: 12px;
      transition: border-color .15s, background .15s, box-shadow .15s;
      font-family: var(--ss-font);
    }
    .cc-sync-mode:hover { border-color: var(--st-accent); }
    .cc-sync-mode.active {
      border-color: var(--st-accent); background: var(--st-accent-soft);
      box-shadow: 0 0 0 1px var(--st-accent);
    }
    .cc-sync-mode-ic {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
      display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
      background: var(--st-surface-2); border: 1px solid var(--st-line); color: var(--st-text-3);
    }
    .cc-sync-mode.active .cc-sync-mode-ic { background: var(--st-accent); border-color: var(--st-accent); color: #fff; }
    .cc-sync-mode-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .cc-sync-mode-name {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 800; color: var(--st-text); letter-spacing: -.01em;
    }
    .cc-sync-mode-badge {
      font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: .05em;
      padding: 1px 6px; border-radius: 999px;
      background: var(--st-info-bg); border: 1px solid var(--st-info-line); color: var(--st-accent);
    }
    .cc-sync-mode-check { margin-left: auto; font-size: 12px; color: var(--st-accent); opacity: 0; transition: opacity .15s; }
    .cc-sync-mode.active .cc-sync-mode-check { opacity: 1; }
    .cc-sync-mode-desc { font-size: 10px; color: var(--st-muted); line-height: 1.45; }

    /* ── Menu list ── */
    .cc-sync-menus {
      border: 1px solid var(--st-line); border-radius: 12px;
      background: var(--st-surface); overflow: hidden;
    }
    .cc-sync-menus.disabled { opacity: .55; }
    .cc-sync-menus-head {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 10px 12px; background: var(--st-surface-2); border-bottom: 1px solid var(--st-line);
    }
    .cc-sync-menus-head > span:first-child {
      display: inline-flex; align-items: center; gap: 7px;
      font: 800 10px var(--ss-font); letter-spacing: .06em; text-transform: uppercase; color: var(--st-muted);
    }
    .cc-sync-detected {
      display: inline-flex; align-items: center; gap: 6px;
      font: 700 9.5px var(--ss-font); color: var(--st-accent);
    }
    .cc-sync-detected i { font-size: 9px; }
    .cc-sync-modenote {
      display: flex; align-items: center; gap: 8px; padding: 8px 12px;
      font-size: 10.5px; color: var(--st-muted); background: var(--st-surface-2);
      border-bottom: 1px solid var(--st-line); line-height: 1.4;
    }
    .cc-sync-modenote i { color: var(--st-accent); font-size: 10px; flex-shrink: 0; }
    .cc-sync-menulist { display: flex; flex-direction: column; }
    .cc-sync-row {
      display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px;
      border-bottom: 1px solid var(--st-line); transition: background .15s;
    }
    .cc-sync-row:last-child { border-bottom: none; }
    .cc-sync-row:hover { background: var(--st-surface-2); }
    .cc-sync-row.on { background: var(--st-info-bg); box-shadow: inset 3px 0 0 var(--st-accent); }
    .cc-sync-row.automatch { box-shadow: inset 3px 0 0 var(--st-accent); }
    .cc-sync-row.dim { opacity: .6; }
    .cc-sync-row.missing { background: var(--st-warn-bg); }
    .cc-sync-ic {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; margin-top: 1px;
      display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
      background: var(--st-surface-2); border: 1px solid var(--st-line-strong);
    }
    .cc-sync-ic.warn { color: var(--st-warn); border-color: var(--st-warn-line); background: var(--st-warn-bg); }
    .cc-sync-rowmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .cc-sync-rowlbl {
      font: 800 12px var(--ss-font); color: var(--st-text); letter-spacing: -.01em;
      display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    }
    .cc-sync-stale {
      font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
      padding: 1px 6px; border-radius: 999px;
      background: var(--st-warn-bg); border: 1px solid var(--st-warn-line); color: var(--st-warn);
    }
    .cc-sync-rowsub { font-size: 10px; color: var(--st-muted); }
    .cc-sync-autotag {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
      font: 800 8.5px var(--ss-font); letter-spacing: .05em; text-transform: uppercase;
      padding: 3px 9px; border-radius: 999px;
      background: var(--st-surface-2); border: 1px solid var(--st-line-strong); color: var(--st-faint);
    }
    .cc-sync-autotag.on { background: var(--st-info-bg); border-color: var(--st-info-line); color: var(--st-accent); }
    /* Toggle switch (role=switch) */
    .cc-sync-toggle {
      flex-shrink: 0; width: 38px; height: 22px; margin-top: 4px; border-radius: 999px; cursor: pointer;
      background: var(--st-surface-2); border: 1px solid var(--st-line-strong);
      position: relative; transition: background .18s, border-color .18s; padding: 0;
    }
    .cc-sync-toggle .cc-sync-knob {
      position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px;
      background: var(--st-faint); transition: left .18s, background .18s;
    }
    .cc-sync-toggle:hover { border-color: var(--st-accent); }
    .cc-sync-toggle.on { background: var(--st-accent); border-color: var(--st-accent); }
    .cc-sync-toggle.on .cc-sync-knob { left: 18px; background: #fff; }
    .cc-sync-remove {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; margin-top: 3px;
      height: 26px; padding: 0 10px; border-radius: 7px; cursor: pointer;
      font: 700 10px var(--ss-font);
      background: var(--st-surface); border: 1px solid var(--st-warn-line); color: var(--st-warn);
      transition: background .15s, color .15s, border-color .15s;
    }
    .cc-sync-remove:hover { background: var(--st-danger-bg); border-color: var(--st-danger-line); color: var(--st-danger); }
    /* Per-menu End User column picker */
    .cc-sync-eupick { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
    .cc-sync-eupick label {
      display: inline-flex; align-items: center; gap: 5px;
      font: 800 8.5px var(--ss-font); letter-spacing: .05em; text-transform: uppercase; color: var(--st-muted);
    }
    .cc-sync-eupick label i { font-size: 8px; color: var(--st-accent); }
    .cc-sync-euselect {
      min-width: 200px; max-width: 100%; height: 28px; padding: 0 8px; border-radius: 7px;
      background: var(--st-surface); border: 1px solid var(--st-line-strong); color: var(--st-text);
      font: 600 11px var(--ss-font); cursor: pointer; outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .cc-sync-euselect:focus { border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-accent-soft); }
    /* Empty / warning states */
    .cc-sync-empty {
      display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
      padding: 26px 16px; color: var(--st-muted);
    }
    .cc-sync-empty i { font-size: 20px; color: var(--st-faint); }
    .cc-sync-empty b { font-size: 12px; color: var(--st-text); }
    .cc-sync-empty span { font-size: 10.5px; line-height: 1.5; max-width: 380px; }
    .cc-sync-warnbar {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px;
      font-size: 10.5px; font-weight: 600; color: var(--st-warn);
      background: var(--st-warn-bg); border-bottom: 1px solid var(--st-warn-line);
    }
    .cc-sync-linkbtn {
      display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
      height: 28px; padding: 0 11px; border-radius: 8px; cursor: pointer;
      font: 700 10.5px var(--ss-font);
      background: var(--st-surface); border: 1px solid var(--st-line-strong); color: var(--st-accent);
      transition: border-color .15s, background .15s;
    }
    .cc-sync-linkbtn:hover { border-color: var(--st-accent); background: var(--st-accent-soft); }
    /* Live preview strip */
    .cc-sync-preview {
      display: flex; align-items: center; gap: 9px; padding: 10px 13px;
      border: 1px dashed var(--st-info-line); border-radius: 10px;
      background: var(--st-info-bg); font-size: 11.5px; color: var(--st-text);
    }
    .cc-sync-preview i { color: var(--st-accent); font-size: 11px; flex-shrink: 0; }
    .cc-sync-preview b { font-weight: 800; }
    .cc-sync-preview.warn { border-color: var(--st-warn-line); background: var(--st-warn-bg); color: var(--st-warn); font-weight: 600; }
    .cc-sync-preview.warn i { color: var(--st-warn); }
    /* Footer */
    .cc-sync-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .cc-sync-save {
      display: inline-flex; align-items: center; gap: 7px;
      height: 36px; padding: 0 16px; border-radius: 9px; cursor: pointer;
      font: 800 12px var(--ss-font);
      background: var(--st-accent); border: 1px solid var(--st-accent); color: #fff;
      transition: filter .15s, opacity .15s;
    }
    .cc-sync-save:hover { filter: brightness(1.08); }
    .cc-sync-save:disabled { opacity: .45; cursor: not-allowed; filter: none; }
    .cc-sync-cancel {
      display: inline-flex; align-items: center; gap: 6px;
      height: 36px; padding: 0 14px; border-radius: 9px; cursor: pointer;
      font: 700 12px var(--ss-font);
      background: transparent; border: 1px solid var(--st-line-strong); color: var(--st-text-2);
      transition: border-color .15s, color .15s;
    }
    .cc-sync-cancel:hover { border-color: var(--st-danger); color: var(--st-danger); }
    .cc-sync-scope {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 9.5px; font-weight: 700; color: var(--st-faint);
    }
    .cc-sync-err { font-size: 11px; font-weight: 700; color: var(--st-danger); margin-left: auto; }
    @media (max-width: 720px) {
      .cc-sync-modes { grid-template-columns: 1fr; }
      .cc-sync-hero-stamp { width: 100%; }
      .cc-sync-err { margin-left: 0; width: 100%; }
    }

    /* ── Controller Testing Lab Widget ───────────────────────────────────── */
    #hp-controller-testing-lab-card .hp-card-head { position: relative; }
    /* ═══════════════════════════════════════════════════════════
       CONTROLLER TESTING LAB — Premium Enterprise UI v2
       Dark glass aesthetic, horizontal config list, vertical lab display
    ═══════════════════════════════════════════════════════════ */

    /* ── Gear icon button ── */
    .hp-ctl-config-btn {
      margin-left: auto;
      width: 28px; height: 28px;
      border-radius: 8px;
      border: 1px solid rgba(162,93,220,.28);
      background: rgba(162,93,220,.08);
      color: #c084fc;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .2s ease; flex-shrink: 0;
    }
    .hp-ctl-config-btn:hover {
      color: #e9d5ff;
      border-color: rgba(162,93,220,.55);
      background: rgba(162,93,220,.18);
      transform: rotate(45deg);
      box-shadow: 0 0 10px rgba(162,93,220,.3);
    }

    /* ── Main lab display area — vertical columns ── */
    /* BUG 2 FIX: flex:1 + min-height:0 ensures the list fills the card body
       without causing the card to grow past the viewport bottom. */
    .hp-ctl-list {
      flex: 1;
      min-height: 0;
      min-width: 0;
      display: flex;
      /* NEW LAYOUT: horizontal row with wrapping for side-by-side controller cards.
         Each ctl-card auto-sizes to fill available width. Old row-column layout retired. */
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: flex-start;
      gap: 10px;
      overflow-x: hidden;
      overflow-y: auto;
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 10px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.12) transparent;
    }
    .hp-ctl-list::-webkit-scrollbar { width: 3px; }
    .hp-ctl-list::-webkit-scrollbar-thumb { background: rgba(162,93,220,.3); border-radius: 99px; }

    /* ── Empty state ── */
    .hp-ctl-empty {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 10px; color: rgba(255,255,255,.22); font-size: 11px;
      min-height: 120px;
    }
    .hp-ctl-empty i { font-size: 26px; opacity: .35; }
    .hp-ctl-empty span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

    /* ── Vertical column = one controller ── */
    .hp-ctl-col {
      display: flex; flex-direction: column;
      align-items: center; justify-content: flex-start;
      padding: 12px 10px 10px;
      min-width: 170px;
      width: 170px;
      flex: 0 0 170px;
      max-width: 170px;
      border-right: 1px solid rgba(255,255,255,.07);
      border-bottom: 1px solid rgba(255,255,255,.06);
      position: relative; gap: 8px;
      transition: background .2s;
    }
    .hp-ctl-col:last-child { border-right: none; }
    .hp-ctl-col:hover { background: rgba(255,255,255,.02); }
    /* Actions hidden by default — visible on hover/focus; always visible in-use */
    .hp-ctl-col-actions { opacity: 0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease; pointer-events: none; }
    .hp-ctl-col:hover .hp-ctl-col-actions,
    .hp-ctl-col:focus-within .hp-ctl-col-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .hp-ctl-col.in-use .hp-ctl-col-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }

    /* Controller type badge at top */
    .hp-ctl-col-badge {
      font-size: 8px; font-weight: 800; letter-spacing: .1em;
      text-transform: uppercase; padding: 2px 8px; border-radius: 99px;
      background: rgba(162,93,220,.12); border: 1px solid rgba(162,93,220,.25);
      color: #c084fc; align-self: stretch; text-align: center;
    }

    /* Widget image inside column */
    .hp-ctl-col-img {
      width: 90px; height: 90px;
      object-fit: contain;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
      padding: 6px;
      flex-shrink: 0;
    }

    /* Name and IP in column */
    .hp-ctl-col-meta {
      width: 100%; display: flex; flex-direction: column; gap: 6px; align-items: center;
    }
    .hp-ctl-col-name {
      font-size: 12px; font-weight: 800; color: #e2e8f0;
      letter-spacing: .03em; text-align: center;
    }
    /* ── FEATURE 1: Premium IP chip ── */
    .hp-ctl-ip-chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(96,165,250,.1);
      border: 1px solid rgba(96,165,250,.28);
      border-radius: 8px; padding: 5px 10px 5px 8px;
      position: relative; max-width: 100%;
    }
    .hp-ctl-ip-chip-icon {
      font-size: 9px; color: var(--ss-accent2, #79c0ff); flex-shrink: 0; opacity: .8;
    }
    .hp-ctl-ip-chip-val {
      font-size: 11.5px; font-weight: 700; color: #93c5fd;
      font-family: 'JetBrains Mono', 'Courier New', monospace;
      letter-spacing: .03em; white-space: nowrap;
    }
    .hp-ctl-ip-copy-btn {
      width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
      background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.25);
      color: var(--ss-accent2, #79c0ff); cursor: pointer; display: flex; align-items: center;
      justify-content: center; font-size: 9px;
      transition: background .15s, transform .1s;
      padding: 0;
    }
    .hp-ctl-ip-copy-btn:hover {
      background: rgba(96,165,250,.25); transform: scale(1.08);
    }
    .hp-ctl-ip-copy-btn:active { transform: scale(.94); }
    /* Copy toast */
    .hp-ctl-ip-copy-toast {
      position: absolute; bottom: calc(100% + 6px); left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: #10b981; color: #fff; font-size: 9px; font-weight: 700;
      padding: 3px 10px; border-radius: 5px; white-space: nowrap;
      pointer-events: none; opacity: 0; transition: opacity .18s, transform .18s;
      letter-spacing: .04em;
    }
    .hp-ctl-ip-copy-toast.show {
      opacity: 1; transform: translateX(-50%) translateY(0);
    }
    /* FEATURE 1: IP row in booking modal — enhanced */
    .hp-ctl-bk-ip-row {
      display: flex; align-items: center; gap: 8px; margin-top: 6px;
    }
    .hp-ctl-bk-ip-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #10b981; flex-shrink: 0;
      box-shadow: 0 0 8px rgba(16,185,129,.7);
      animation: ctl-pulse-green 2s ease-in-out infinite;
    }
    .hp-ctl-bk-ip {
      font-size: 14px; font-weight: 700; color: #93c5fd;
      font-family: var(--ss-mono, monospace); letter-spacing: .04em;
    }
    .hp-ctl-bk-ip-copy {
      width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
      background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.25);
      color: var(--ss-accent2, #79c0ff); display: inline-flex; align-items: center;
      justify-content: center; font-size: 10px;
      transition: background .15s;
    }
    .hp-ctl-bk-ip-copy:hover { background: rgba(96,165,250,.22); }
    .hp-ctl-bk-online-badge {
      font-size: 8px; font-weight: 800; letter-spacing: .12em;
      color: #10b981; background: rgba(16,185,129,.12);
      border: 1px solid rgba(16,185,129,.28);
      border-radius: 5px; padding: 2px 7px;
    }
    /* ── FEATURE 2: Action row + folder button in controller column ── */
    .hp-ctl-col-action-row {
      display: flex; flex-direction: column; gap: 6px; width: 100%;
    }
    .hp-ctl-folder-btn {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      width: 100%; padding: 7px 10px; border-radius: 8px; cursor: pointer;
      background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.22);
      color: #fbbf24; font-size: 10px; font-weight: 700;
      font-family: var(--ss-font, inherit);
      transition: background .15s, transform .1s, box-shadow .15s;
      letter-spacing: .02em;
    }
    .hp-ctl-folder-btn:hover {
      background: rgba(245,158,11,.16);
      box-shadow: 0 2px 12px rgba(245,158,11,.18);
      transform: translateY(-1px);
    }
    .hp-ctl-folder-btn:active { transform: translateY(0); }
    .hp-ctl-folder-btn i { font-size: 11px; }

    /* Status pill in column */
    .hp-ctl-col-status {
      font-size: 9px; font-weight: 800; letter-spacing: .08em;
      text-transform: uppercase; padding: 3px 10px; border-radius: 99px;
      background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.25);
      color: #10b981; white-space: nowrap;
    }
    .hp-ctl-col-status.offline  { background: rgba(248,81,73,.1); border-color: rgba(248,81,73,.25); color: #f85149; }
    .hp-ctl-col-status.maintenance { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.25); color: #fbbf24; }

    /* Settings button at bottom of column */
    .hp-ctl-col-settings {
      margin-top: auto;
      width: 100%;
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent);
      color: var(--ss-accent2, #79c0ff);
      border-radius: 8px;
      padding: 6px 0;
      font-size: 10px; font-weight: 800;
      cursor: pointer; letter-spacing: .04em;
      transition: all .18s;
      display: flex; align-items: center; justify-content: center; gap: 5px;
    }
    .hp-ctl-col-settings:hover {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 18%, transparent);
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 55%, transparent);
      color: #b3d9ff;
      box-shadow: 0 0 12px color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent);
    }

    /* ── Horizontal list in Config modal ── */
    .hp-ctl-chip-row {
      display: flex; flex-direction: column;
      gap: 0; overflow-y: auto; max-height: 220px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 10px;
      background: rgba(0,0,0,.2);
    }
    .hp-ctl-chip {
      display: grid;
      grid-template-columns: 38px 1fr auto auto;
      align-items: center; gap: 10px;
      padding: 10px 14px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      transition: background .15s; position: relative;
    }
    .hp-ctl-chip:last-child { border-bottom: none; }
    .hp-ctl-chip:hover { background: rgba(255,255,255,.03); }
    .hp-ctl-chip-img {
      width: 34px; height: 34px; object-fit: contain;
      border-radius: 7px; border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04); padding: 3px;
    }
    .hp-ctl-chip-meta { min-width: 0; }
    .hp-ctl-chip-name { font-size: 11px; font-weight: 800; color: #e2e8f0; }
    .hp-ctl-chip-ip   { font-size: 9px; color: rgba(255,255,255,.38); font-family: monospace; margin-top: 2px; }
    .hp-ctl-chip-status {
      font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 99px;
      background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.25); color: #10b981;
    }
    .hp-ctl-chip-status.offline     { background: rgba(248,81,73,.1); border-color: rgba(248,81,73,.25); color: #f85149; }
    .hp-ctl-chip-status.maintenance { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.25); color: #fbbf24; }
    .hp-ctl-chip .hp-ctl-settings-btn { padding: 5px 12px; font-size: 9px; }

    /* ── Settings btn (shared) ── */
    .hp-ctl-settings-btn {
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent);
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
      color: var(--ss-accent2, #79c0ff);
      border-radius: 7px;
      padding: 5px 14px;
      font-size: 10px; font-weight: 800;
      cursor: pointer; white-space: nowrap;
      transition: all .15s;
    }
    .hp-ctl-settings-btn:hover {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent);
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 60%, transparent);
      color: #b3d9ff;
    }

    /* ── Modal overlay ── */
    .hp-ctl-modal {
      position: fixed; inset: 0; z-index: 9950;
      display: none; align-items: center; justify-content: center;
      background: rgba(2,6,23,.75);
      backdrop-filter: blur(8px); padding: 16px;
    }
    .hp-ctl-modal.open { display: flex; }

    /* ── Config dialog (main modal) ── */
    .hp-ctl-dialog {
      width: min(640px, 95vw);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: linear-gradient(145deg, #0f172a 0%, #1a2035 100%);
      box-shadow: 0 40px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
      overflow: hidden;
      animation: ctlModalIn .22s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes ctlModalIn {
      from { opacity:0; transform: scale(.93) translateY(12px); }
      to   { opacity:1; transform: scale(1)  translateY(0); }
    }
    .hp-ctl-dialog-head {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 14px 18px;
      background: linear-gradient(90deg, rgba(162,93,220,.1), color-mix(in srgb, var(--ss-accent, #58a6ff) 6%, transparent));
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .hp-ctl-dialog-title {
      font-size: 13px; font-weight: 900; color: #f1f5f9;
      letter-spacing: .02em; display: flex; align-items: center; gap: 8px;
    }
    .hp-ctl-dialog-title::before {
      content: '⚙';
      font-size: 14px; opacity: .7;
    }

    /* Add Controller button */
    .hp-ctl-add-btn {
      border: 1px solid rgba(162,93,220,.45);
      background: linear-gradient(135deg, rgba(162,93,220,.25), color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent));
      color: #e9d5ff;
      border-radius: 8px; padding: 6px 14px;
      font-size: 11px; font-weight: 800; letter-spacing: .04em;
      cursor: pointer; transition: all .18s;
      display: inline-flex; align-items: center; gap: 5px;
    }
    .hp-ctl-add-btn:hover {
      background: linear-gradient(135deg, rgba(162,93,220,.4), color-mix(in srgb, var(--ss-accent, #58a6ff) 25%, transparent));
      border-color: rgba(162,93,220,.7);
      box-shadow: 0 0 18px rgba(162,93,220,.25);
    }

    /* Dialog body */
    .hp-ctl-dialog-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }

    /* Top row: dropdown + preview side by side */
    .hp-ctl-top-row {
      display: grid; grid-template-columns: 1fr 200px; gap: 16px; align-items: start;
    }

    /* Left: selector + label */
    .hp-ctl-select-section { display: flex; flex-direction: column; gap: 6px; }
    .hp-ctl-select-label {
      font-size: 9px; font-weight: 800; text-transform: uppercase;
      letter-spacing: .1em; color: rgba(255,255,255,.4);
    }
    .hp-ctl-select {
      width: 100%;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 10px;
      background: rgba(0,0,0,.35);
      padding: 10px 14px;
      font-weight: 700; font-size: 13px;
      color: #f1f5f9;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      cursor: pointer;
      transition: border-color .2s;
    }
    .hp-ctl-select:focus {
      outline: none;
      border-color: rgba(162,93,220,.6);
      box-shadow: 0 0 0 3px rgba(162,93,220,.12);
    }
    .hp-ctl-select option { background: #1a2035; color: #f1f5f9; }

    /* Right: preview panel */
    .hp-ctl-preview {
      width: 200px; flex-shrink: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px; padding: 18px 14px;
      display: flex; flex-direction: column;
      align-items: center; gap: 12px;
      position: relative; overflow: hidden;
    }
    .hp-ctl-preview::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(circle at 50% 30%, rgba(162,93,220,.08), transparent 70%);
      pointer-events: none;
    }
    .hp-ctl-preview img {
      width: 100px; height: 100px;
      object-fit: contain;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      padding: 8px;
      transition: transform .3s ease;
    }
    .hp-ctl-preview:hover img { transform: scale(1.04); }
    #hp-ctl-add-now-btn {
      width: 100%;
      border: 1px solid rgba(162,93,220,.5);
      background: linear-gradient(135deg, #7c3aed, #4f46e5);
      color: #fff;
      border-radius: 9px; padding: 9px 0;
      font-size: 11px; font-weight: 900; letter-spacing: .06em;
      cursor: pointer; transition: all .2s;
      box-shadow: 0 4px 15px rgba(124,58,237,.3);
    }
    #hp-ctl-add-now-btn:hover {
      background: linear-gradient(135deg, #8b5cf6, #6366f1);
      box-shadow: 0 6px 22px rgba(124,58,237,.45);
      transform: translateY(-1px);
    }

    /* Horizontal controller list header */
    .hp-ctl-list-header {
      font-size: 9px; font-weight: 800; text-transform: uppercase;
      letter-spacing: .1em; color: rgba(255,255,255,.35);
      display: flex; align-items: center; gap: 6px;
    }
    .hp-ctl-list-header::after {
      content: ''; flex: 1; height: 1px;
      background: rgba(255,255,255,.07);
    }

    /* Settings modal (dark) */
    #hp-ctl-settings-modal .hp-ctl-dialog {
      width: min(440px, 95vw);
      background: linear-gradient(145deg, #0f172a 0%, #131e35 100%);
    }
    #hp-ctl-settings-modal .hp-ctl-dialog-head {
      background: linear-gradient(90deg, color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent), rgba(34,211,238,.06));
    }
    #hp-ctl-settings-modal .hp-ctl-dialog-title { color: #f8fafc; }
    #hp-ctl-settings-modal .hp-ctl-dialog-title::before { content: '⚡'; }

    .hp-ctl-settings-field {
      display: flex; flex-direction: column; gap: 6px;
    }
    .hp-ctl-settings-field label {
      font-size: 9px; font-weight: 800; text-transform: uppercase;
      letter-spacing: .1em; color: rgba(255,255,255,.4);
    }
    .hp-ctl-settings-input {
      width: 100%;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 9px;
      background: rgba(0,0,0,.4);
      color: #e2e8f0;
      padding: 10px 13px;
      font-size: 13px; font-weight: 600;
      font-family: 'JetBrains Mono', 'Courier New', monospace;
      transition: border-color .2s;
    }
    .hp-ctl-settings-input:focus {
      outline: none;
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 55%, transparent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
    }
    .hp-ctl-settings-select {
      width: 100%;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 9px;
      background: rgba(0,0,0,.4);
      color: #e2e8f0;
      padding: 10px 13px;
      font-size: 13px; font-weight: 600;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 12px center;
      cursor: pointer; transition: border-color .2s;
    }
    .hp-ctl-settings-select:focus {
      outline: none;
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 55%, transparent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
    }
    .hp-ctl-settings-select option { background: #0f172a; color: #e2e8f0; }
    .hp-ctl-save-btn {
      width: 100%;
      border: none;
      border-radius: 10px;
      background: var(--ss-accent, #58a6ff);
      color: var(--mey-on-mint, #0b1209); padding: 11px 0;
      font-size: 13px; font-weight: 900; letter-spacing: .04em;
      cursor: pointer; transition: all .2s;
      box-shadow: 0 4px 18px color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent);
      margin-top: 4px;
    }
    .hp-ctl-save-btn:hover {
      background: var(--ss-accent2, #79c0ff);
      box-shadow: 0 6px 26px color-mix(in srgb, var(--ss-accent, #58a6ff) 50%, transparent);
      transform: translateY(-1px);
    }
    .hp-ctl-delete-btn {
      width: 100%;
      border: 1px solid rgba(248,81,73,.3);
      border-radius: 10px;
      background: rgba(248,81,73,.08);
      color: #f85149; padding: 9px 0;
      font-size: 11px; font-weight: 800; letter-spacing: .04em;
      cursor: pointer; transition: all .2s;
    }
    .hp-ctl-delete-btn:hover {
      background: rgba(248,81,73,.18);
      border-color: rgba(248,81,73,.55);
      box-shadow: 0 4px 14px rgba(248,81,73,.2);
    }
    .hp-ctl-modal-close {
      width: 28px; height: 28px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 7px; color: rgba(255,255,255,.5);
      cursor: pointer; display: flex; align-items: center;
      justify-content: center; font-size: 13px;
      transition: all .15s; flex-shrink: 0;
    }
    .hp-ctl-modal-close:hover { background: rgba(248,81,73,.12); color: #f85149; border-color: rgba(248,81,73,.3); }

    /* ── Oneday Password Card — Premium v2 ─────────────────── */
    .hp-odp-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1;
    }
    .hp-odp-cell {
      background: rgba(251,146,60,.04);
      border: 1px solid rgba(251,146,60,.1);
      border-radius: 10px;
      padding: 14px 14px 12px;
      display: flex; flex-direction: column; gap: 6px;
      transition: border-color .2s, background .2s;
      flex: 1;
    }
    .hp-odp-cell.is-today {
      background: rgba(251,146,60,.08);
      border-color: rgba(251,146,60,.3);
      box-shadow: 0 0 0 1px rgba(251,146,60,.06) inset, 0 4px 16px rgba(251,146,60,.06);
    }
    .hp-odp-cell-date {
      font-size: 9px; font-weight: 800; color: var(--ss-muted);
      text-transform: uppercase; letter-spacing: .08em;
    }
    .hp-odp-cell.is-today .hp-odp-cell-date { color: var(--ss-orange); }
    .hp-odp-cell-pw {
      font: 900 20px var(--ss-mono);
      color: #e6edf3;
      letter-spacing: .14em;
      min-height: 26px;
      display: flex; align-items: center;
      flex: 1;
    }
    .hp-odp-cell.is-today .hp-odp-cell-pw { color: var(--ss-orange); text-shadow: 0 0 20px rgba(251,146,60,.25); }
    .hp-odp-cell-pw.odp-empty { color: rgba(255,255,255,.15); font-size: 13px; font-style: italic; letter-spacing: 0; font-weight: 400; }
    .hp-odp-cell-label {
      font-size: 8px; font-weight: 700; color: rgba(255,255,255,.3); margin-top: 2px;
      text-transform: uppercase; letter-spacing: .06em;
    }
    .hp-odp-cell.is-today .hp-odp-cell-label { color: rgba(251,146,60,.6); }
    .hp-odp-edit-btn {
      background: rgba(251,146,60,.08);
      border: 1px solid rgba(251,146,60,.18);
      color: rgba(251,146,60,.7);
      cursor: pointer;
      font-size: 10px;
      padding: 3px 8px;
      border-radius: 6px;
      transition: color .15s, background .15s, border-color .15s;
      margin-left: auto;
      line-height: 1;
      display: flex; align-items: center; gap: 4px;
      font-weight: 700; font-family: var(--ss-font);
    }
    .hp-odp-edit-btn:hover { color: var(--ss-orange); background: rgba(251,146,60,.15); border-color: rgba(251,146,60,.35); }

    /* ── Oneday Password Modal ───────────────────────────────── */
    #odp-modal {
      position: fixed; inset: 0; z-index: 9900;
      background: rgba(2,6,23,.75);
      backdrop-filter: blur(6px);
      display: none; align-items: center; justify-content: center;
    }
    #odp-modal.odp-open { display: flex; }
    .odp-panel {
      background: linear-gradient(145deg, rgba(15,23,42,.97), rgba(2,6,23,.99));
      border: 1px solid rgba(251,146,60,.22);
      border-radius: 16px;
      box-shadow: 0 40px 80px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04) inset;
      width: min(780px, 96vw);
      max-height: 88vh;
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .odp-panel-head {
      display: flex; align-items: center; gap: 10px;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      background: rgba(15,23,42,.6);
      flex-shrink: 0;
    }
    .odp-panel-head-icon {
      width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
      background: rgba(251,146,60,.15); border: 1px solid rgba(251,146,60,.25);
      color: var(--ss-orange); display: flex; align-items: center; justify-content: center;
      font-size: 13px;
    }
    .odp-panel-head-title { font-size: 14px; font-weight: 800; color: #e6edf3; }
    .odp-panel-head-sub   { font-size: 10px; color: var(--ss-muted); margin-top: 1px; }
    .odp-panel-close {
      margin-left: auto; background: transparent; border: none;
      color: rgba(255,255,255,.35); cursor: pointer; font-size: 14px;
      width: 28px; height: 28px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .odp-panel-close:hover { color: #fff; background: rgba(255,255,255,.06); }
    .odp-nav-row {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 20px;
      border-bottom: 1px solid rgba(255,255,255,.05);
      background: rgba(15,23,42,.4);
      flex-shrink: 0;
    }
    .odp-nav-btn {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
      color: rgba(255,255,255,.5); cursor: pointer; border-radius: 7px;
      width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
      font-size: 11px; transition: all .15s;
    }
    .odp-nav-btn:hover { background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.2); color: var(--ss-orange); }
    .odp-nav-month-label { font-size: 12px; font-weight: 800; color: #e6edf3; min-width: 120px; text-align: center; }
    .odp-save-all-btn {
      margin-left: auto;
      background: linear-gradient(135deg, rgba(251,146,60,.25), rgba(234,88,12,.2));
      border: 1px solid rgba(251,146,60,.35);
      color: var(--ss-orange); border-radius: 8px;
      padding: 5px 14px; font-size: 10px; font-weight: 800;
      cursor: pointer; transition: all .15s; font-family: var(--ss-font);
      display: flex; align-items: center; gap: 5px;
    }
    .odp-save-all-btn:hover { background: linear-gradient(135deg, rgba(251,146,60,.35), rgba(234,88,12,.28)); }
    .odp-save-all-btn:disabled { opacity: .45; cursor: not-allowed; }
    .odp-table-wrap { overflow-y: auto; flex: 1; padding: 12px 20px 20px; }
    .odp-table {
      width: 100%; border-collapse: collapse;
    }
    .odp-table thead th {
      font-size: 9px; font-weight: 800; color: var(--ss-muted);
      text-transform: uppercase; letter-spacing: .07em;
      padding: 6px 10px; text-align: left;
      border-bottom: 1px solid rgba(255,255,255,.06);
      position: sticky; top: 0; background: rgba(2,6,23,.95);
    }
    .odp-table tbody tr {
      border-bottom: 1px solid rgba(255,255,255,.04);
      transition: background .12s;
    }
    .odp-table tbody tr:hover { background: rgba(255,255,255,.02); }
    .odp-table tbody tr.odp-row-today { background: rgba(251,146,60,.06); }
    .odp-table tbody tr.odp-row-today:hover { background: rgba(251,146,60,.09); }
    .odp-table td {
      padding: 6px 10px; vertical-align: middle;
    }
    .odp-date-badge {
      display: flex; align-items: center; gap: 7px;
    }
    .odp-date-txt {
      font-size: 11px; font-weight: 700; color: #e6edf3;
    }
    .odp-badge-today {
      font-size: 8px; font-weight: 800; padding: 1px 6px;
      border-radius: 4px; background: rgba(251,146,60,.15);
      color: var(--ss-orange); border: 1px solid rgba(251,146,60,.2);
      text-transform: uppercase; letter-spacing: .05em;
    }
    .odp-badge-yesterday {
      font-size: 8px; font-weight: 800; padding: 1px 6px;
      border-radius: 4px; background: rgba(148,163,184,.1);
      color: rgba(148,163,184,.7); border: 1px solid rgba(148,163,184,.15);
      text-transform: uppercase; letter-spacing: .05em;
    }
    .odp-input {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 7px;
      color: #e6edf3;
      font: 700 13px var(--ss-mono);
      letter-spacing: .06em;
      padding: 5px 10px;
      width: 100%;
      outline: none;
      transition: border-color .15s, background .15s;
    }
    .odp-input:focus {
      border-color: rgba(251,146,60,.45);
      background: rgba(251,146,60,.05);
    }
    .odp-input.odp-has-val {
      border-color: rgba(251,146,60,.2);
      color: var(--ss-orange);
    }
    .odp-row-save-btn {
      background: rgba(251,146,60,.1); border: 1px solid rgba(251,146,60,.15);
      color: var(--ss-orange); border-radius: 6px;
      padding: 4px 10px; font-size: 9px; font-weight: 800;
      cursor: pointer; transition: all .15s; white-space: nowrap;
      font-family: var(--ss-font);
    }
    .odp-row-save-btn:hover { background: rgba(251,146,60,.2); border-color: rgba(251,146,60,.3); }
    .odp-row-save-btn:disabled { opacity: .4; cursor: not-allowed; }
    .odp-row-save-btn.odp-saved {
      background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.2);
      color: #4ade80;
    }
    .odp-meta-txt { font-size: 9px; color: rgba(255,255,255,.25); }
    .odp-toast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      background: rgba(15,23,42,.95); border: 1px solid rgba(251,146,60,.3);
      color: var(--ss-orange); border-radius: 10px;
      padding: 9px 18px; font-size: 11px; font-weight: 700;
      box-shadow: 0 8px 32px rgba(0,0,0,.5);
      z-index: 9999; display: none; align-items: center; gap: 7px;
      animation: odp-toast-in .2s ease;
    }
    .odp-toast.odp-toast-show { display: flex; }
    @keyframes odp-toast-in { from { opacity:0; transform: translateX(-50%) translateY(8px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
    /* legacy — keep existing hp-pw-val id wired up */
    #hp-oneday-pw { display:none; }

    /* ══════════════════════════════════════════════════════════════════════
       ICare ONCALL TECH — QB-powered  ·  ocs-3 rebuild (2026-08-04, MACE)

       Design law: ONE question, ONE answer. Vertical rhythm is
         head (identity + links + live badge)
         strip (the single countdown · the single date/time · status + NEXT)
         crew (the CURRENT technicians — the reason the card exists)
       The incoming crew is deliberately NOT on the face; it lives in the
       `.oc-next-pop` popover so the primary slot can never be misread.
       Colour carries meaning only: cyan = identity, green = live,
       amber = between shifts / handover soon, red = handover imminent.
    ══════════════════════════════════════════════════════════════════════ */
    .oc-card {
      display: flex; flex-direction: column; overflow: visible;
      background: linear-gradient(165deg, rgba(34,211,238,.045) 0%, var(--ss-surface) 55%);
    }

    /* ── HEAD ───────────────────────────────────────────────────────────── */
    .oc-head {
      display: flex; align-items: center; gap: 9px; flex-shrink: 0;
      padding: 11px 14px;
      background: rgba(34,211,238,.05);
      border-bottom: 1px solid rgba(34,211,238,.14);
    }
    .oc-head-icon {
      width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(34,211,238,.16); border: 1px solid rgba(34,211,238,.3);
      color: var(--ss-cyan); font-size: 11px;
    }
    .oc-head-title {
      font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
      color: var(--ss-cyan); white-space: nowrap;
    }
    /* Admin link chips — they share the title's baseline but never crowd the
       live badge: the row scrolls rather than pushing the badge off. */
    .oc-links {
      display: flex; align-items: center; gap: 5px; min-width: 0;
      overflow-x: auto; scrollbar-width: none; padding: 1px 0;
    }
    .oc-links::-webkit-scrollbar { display: none; }
    .oc-link-chip {
      display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
      max-width: 150px; padding: 3px 8px; border-radius: 6px;
      font-size: 9px; font-weight: 700; letter-spacing: .02em;
      color: #9fb3c8; text-decoration: none; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
      background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
      transition: color .15s, border-color .15s, background .15s;
    }
    .oc-link-chip > i { font-size: 7px; opacity: .6; flex-shrink: 0; }
    .oc-link-chip:hover,
    .oc-link-chip:focus-visible {
      color: #7ee3f5; border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.1);
    }
    .oc-live-wrap { margin-left: auto; flex-shrink: 0; }
    .oc-live-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
      padding: 3px 9px; border-radius: 20px;
      background: rgba(63,185,80,.12); color: var(--ss-green); border: 1px solid rgba(63,185,80,.3);
      white-space: nowrap;
    }
    .oc-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ss-green); box-shadow: 0 0 5px rgba(63,185,80,.6); animation: oclivepulse 1.8s infinite; }
    @keyframes oclivepulse { 0%,100%{opacity:1} 50%{opacity:.35} }

    /* ── STATUS STRIP ───────────────────────────────────────────────────── */
    .oc-strip {
      display: flex; align-items: center; gap: 14px; flex-shrink: 0;
      padding: 10px 14px;
      background: rgba(34,211,238,.028);
      border-bottom: 1px solid var(--ss-border2);
    }
    .oc-clock, .oc-when { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .oc-clock-cap, .oc-when-cap {
      font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
      color: var(--ss-muted);
    }
    .oc-clock-val {
      font: 800 17px/1.15 var(--ss-mono);
      color: var(--ss-cyan); letter-spacing: .01em;
      /* tabular figures stop the countdown jittering as the digits tick */
      font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
    }
    .oc-clock-note {
      font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
      color: var(--ss-muted);
    }
    .oc-when {
      padding-left: 14px; border-left: 1px solid var(--ss-border2); flex: 1;
    }
    .oc-when-val {
      font: 700 11px/1.35 var(--ss-font, 'Plus Jakarta Sans', system-ui, sans-serif);
      color: #d7e2ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* "PHT" is meaningful text — it names the timezone the whole card is in —
       so it carries AA contrast, not decorative-hint alpha. (Measured: .26 alpha
       composited to 2.33:1 and failed; .55 lands at ~5.4:1.) */
    .oc-when-tz, .oc-next-tz {
      font-size: 8px; font-weight: 800; letter-spacing: .08em; color: rgba(255,255,255,.55);
    }
    .oc-next-wrap { position: relative; margin-left: auto; display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
    .oc-status-chip {
      font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
      padding: 4px 9px; border-radius: 5px; white-space: nowrap;
      background: rgba(63,185,80,.13); color: #56d364; border: 1px solid rgba(63,185,80,.3);
    }
    .oc-next-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 10px; border-radius: 7px; cursor: pointer;
      font: 800 9px/1 var(--ss-font, 'Plus Jakarta Sans', system-ui, sans-serif); letter-spacing: .07em; text-transform: uppercase;
      background: rgba(255,255,255,.05); color: #9fb3c8; border: 1px solid rgba(255,255,255,.1);
      transition: color .15s, border-color .15s, background .15s;
    }
    .oc-next-btn > i { font-size: 8px; opacity: .7; }
    .oc-next-btn:hover, .oc-next-btn:focus-visible,
    .oc-next-btn[aria-expanded="true"] {
      color: #7ee3f5; border-color: rgba(34,211,238,.42); background: rgba(34,211,238,.1);
    }

    /* ── NEXT ROTATION POPOVER ──────────────────────────────────────────── */
    .oc-next-pop {
      position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
      width: 252px; padding: 11px 12px; border-radius: 11px;
      background: var(--ss-surface-2, #12181f);
      border: 1px solid rgba(34,211,238,.26);
      box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.3);
      opacity: 0; visibility: hidden; transform: translateY(-5px);
      transition: opacity .14s ease, transform .14s ease, visibility .14s;
      pointer-events: none;
    }
    .oc-next-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
    /* invisible bridge so the pointer can travel button → panel without a gap */
    .oc-next-pop::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }

    /* ssx-2 (2026-08-06) — BODY-LEVEL PORTAL.
       `.hp-grid` and `.hp-grid > .hp-card` are both `overflow:hidden`, and both
       out-specify `.oc-card { overflow:visible }`, so an absolutely-positioned
       panel inside the card was CUT OFF mid-row. oncall_tech.js moves the node
       to <body> and drives `top`/`left` from the button's live rect; these rules
       are what make that node behave once it is out there. Nothing else in the
       card changes — the panel keeps its exact look. */
    .oc-next-pop.oc-pop-portal {
      position: fixed; top: 0; left: 0; right: auto; bottom: auto;
      /* above the studio top bar and every home card, below full-screen modals */
      z-index: 4200;
      max-height: calc(100vh - 16px);
      overflow-y: auto; overscroll-behavior: contain;
    }
    .oc-next-pop.oc-pop-portal::-webkit-scrollbar { width: 3px; }
    .oc-next-pop.oc-pop-portal::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }
    /* When the panel flips ABOVE the button the pointer bridge has to flip too,
       otherwise the gap it covers is on the wrong side and hover-out kills the
       panel the moment the cursor leaves the button. */
    .oc-next-pop.oc-pop-portal.is-flipped::before { top: auto; bottom: -8px; }

    /* LIGHT THEME — the panel is now a <body> child, so it no longer sits on a
       dark card and had to earn its own light skin. (It never had one: the
       original rule asks for `--ss-surface-2`, a token that does not exist —
       the real one is `--ss-surface2` — so it always fell back to the hard-coded
       dark #12181f.) Loaded before enterprise_theme.css, so these need the
       html[data-ss-theme] prefix to win; every value below is measured AA. */
    html[data-ss-theme="light"] .oc-next-pop {
      background: #ffffff;
      border-color: rgba(14,124,140,.30);
      box-shadow: 0 14px 40px rgba(16,24,40,.16), 0 2px 6px rgba(16,24,40,.08);
    }
    html[data-ss-theme="light"] .oc-next-when  { color: #3f4b5b; }
    html[data-ss-theme="light"] .oc-next-name  { color: #1f2733; }
    html[data-ss-theme="light"] .oc-next-phone { color: #3f4b5b; }
    html[data-ss-theme="light"] .oc-next-tz    { color: #5d6b7d; }
    html[data-ss-theme="light"] .oc-next-ava.wm { background: rgba(42,99,207,.10); color: #1f56b8; border-color: rgba(42,99,207,.24); }
    html[data-ss-theme="light"] .oc-next-ava.ca { background: rgba(154,103,0,.10);  color: #8a5a00; border-color: rgba(154,103,0,.24); }
    .oc-next-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 7px; }
    .oc-next-title {
      font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-cyan);
    }
    .oc-next-in {
      margin-left: auto; font: 700 9px/1 var(--ss-mono); color: var(--ss-muted);
      font-variant-numeric: tabular-nums;
    }
    .oc-next-when {
      display: flex; align-items: center; gap: 6px; margin-bottom: 9px;
      padding-bottom: 8px; border-bottom: 1px solid var(--ss-border2);
      font-size: 10px; font-weight: 700; color: #c4d2e0;
    }
    .oc-next-when > i { font-size: 8px; color: var(--ss-cyan); opacity: .7; }
    .oc-next-crew { display: flex; flex-direction: column; gap: 8px; }
    .oc-next-row { display: flex; align-items: center; gap: 9px; }
    .oc-next-ava {
      width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font: 900 10px/1 var(--ss-font, 'Plus Jakarta Sans', system-ui, sans-serif);
    }
    .oc-next-ava.wm { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 16%, transparent); color: var(--ss-accent2, #79c0ff); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 26%, transparent); }
    .oc-next-ava.ca { background: rgba(251,146,60,.16); color: #ffab70; border: 1px solid rgba(251,146,60,.26); }
    .oc-next-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .oc-next-lbl { font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-muted); }
    .oc-next-name { font-size: 11px; font-weight: 800; color: #e6edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .oc-next-phone { font: 700 9px/1.3 var(--ss-mono); color: #8b98a5; letter-spacing: .04em; }

    /* ── CURRENT CREW ───────────────────────────────────────────────────── */
    .oc-techs-grid { display: grid; grid-template-columns: 1fr 1fr; }
    .oc-tech-col { padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; }
    .oc-tech-col:first-child { border-right: 1px solid var(--ss-border2); }
    .oc-col-lbl {
      display: flex; align-items: center; gap: 5px;
      font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    }
    .oc-col-lbl > i { font-size: 9px; }
    .oc-col-lbl.wm { color: var(--ss-accent2, #79c0ff); }
    .oc-col-lbl.ca { color: #ffab70; }
    .oc-tech-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; }
    .oc-tech-row.wm {
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 6%, transparent);
      box-shadow: 0 2px 10px color-mix(in srgb, var(--ss-accent, #58a6ff) 6%, transparent);
    }
    .oc-tech-row.ca {
      border: 1px solid rgba(251,146,60,.2);  background: rgba(251,146,60,.06);
      box-shadow: 0 2px 10px rgba(251,146,60,.06);
    }
    .oc-ava {
      width: 40px; height: 40px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      font: 900 14px/1 var(--ss-font, 'Plus Jakarta Sans', system-ui, sans-serif); flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    .oc-ava.wm { background: linear-gradient(135deg,color-mix(in srgb, var(--ss-accent, #58a6ff) 25%, transparent),color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent)); color: var(--ss-accent2, #79c0ff); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent); }
    .oc-ava.ca { background: linear-gradient(135deg,rgba(251,146,60,.25),rgba(251,146,60,.12));  color: #ffab70; border: 1px solid rgba(251,146,60,.3); }
    .oc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
    .oc-name {
      font: 900 13px/1.2 var(--ss-font, 'Plus Jakarta Sans', system-ui, sans-serif); color: #e6edf3; letter-spacing: -.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    }
    .oc-phone {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 9px; border-radius: 6px; text-decoration: none;
      background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08);
      transition: border-color .15s, background .15s;
    }
    .oc-phone > i { font-size: 9px; color: var(--ss-muted); }
    .oc-phone[href]:hover { border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.08); }
    .oc-phone[aria-disabled="true"] { opacity: .55; }
    .oc-phone-num { font: 700 10px/1 var(--ss-mono); color: #c9d1d9; letter-spacing: .06em; }

    /* ── STATES ─────────────────────────────────────────────────────────── */
    .oc-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; gap: 7px; text-align: center; }
    .oc-state i { font-size: 22px; opacity: .15; }
    .oc-state .oc-st-main { font-size: 11px; color: var(--ss-muted); font-weight: 600; }
    .oc-state .oc-st-sub  { font-size: 9px; color: rgba(255,255,255,.2); }
    .oc-not-cfg { margin: 10px 13px; padding: 10px 12px; border-radius: 8px; text-align: center; background: rgba(210,153,34,.05); border: 1px dashed rgba(210,153,34,.25); }
    .oc-not-cfg i { font-size: 18px; color: var(--ss-warn); opacity: .5; display: block; margin-bottom: 6px; }
    .oc-not-cfg span { font-size: 11px; color: var(--ss-muted); display: block; }
    .oc-not-cfg small { font-size: 9px; color: rgba(255,255,255,.2); }

    /* ── URGENCY / PHASE TIERS ──────────────────────────────────────────
       Scoped to #oc-card so the countdown, chip and live badge always move as
       one. The tiers only ever escalate the CLOCK — the crew shown never
       changes colour-codes identity away from Walmart-blue / CA-amber. */
    #oc-card.oc-soon .oc-clock-val,
    #oc-card.oc-soon .oc-clock-note { color: #e3b341; }
    #oc-card.oc-imminent .oc-clock-val,
    #oc-card.oc-imminent .oc-clock-note { color: #ff7b72; }
    #oc-card.oc-imminent .oc-clock-note { animation: ocsoonpulse 1.6s infinite; }
    @keyframes ocsoonpulse { 0%,100%{opacity:1} 50%{opacity:.45} }
    /* OFF-DUTY skin — shared by `handover` (shift ended, next not begun) and
       `scheduled` (nothing has run yet). The crew stays put; only the chrome
       says "nobody is live right now". `.oc-scheduled` adds the dim on top. */
    #oc-card.oc-offduty .oc-live-badge { background: rgba(210,153,34,.12); color: #e3b341; border-color: rgba(210,153,34,.35); }
    #oc-card.oc-offduty .oc-live-dot { background: #e3b341; box-shadow: 0 0 5px rgba(210,153,34,.6); animation: none; }
    #oc-card.oc-offduty .oc-status-chip { background: rgba(210,153,34,.14); color: #e3b341; border-color: rgba(210,153,34,.32); }
    #oc-card.oc-offduty .oc-clock-val { color: #e3b341; }
    #oc-card.oc-scheduled .oc-tech-row { opacity: .82; }

    /* ── SETTINGS ▸ Oncall Tech ▸ Header Links editor (ocs-3) ───────────── */
    .ocs-links-rows { display: flex; flex-direction: column; gap: 8px; }
    .ocs-links-empty {
      padding: 14px; border-radius: 8px; text-align: center;
      font-size: 10px; color: rgba(255,255,255,.28);
      background: rgba(255,255,255,.02); border: 1px dashed rgba(255,255,255,.09);
    }
    .ocs-link-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.6fr) 32px; gap: 8px; align-items: center; }
    .ocs-link-row .ss-input { font-size: 11px; }
    .ocs-link-del {
      width: 32px; height: 32px; border-radius: 7px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      background: rgba(248,81,73,.07); color: #f85149; border: 1px solid rgba(248,81,73,.2);
      transition: background .15s, border-color .15s;
    }
    .ocs-link-del:hover { background: rgba(248,81,73,.16); border-color: rgba(248,81,73,.42); }
    .ocs-link-del > i { font-size: 11px; }
    @media (max-width: 700px) {
      /* label + delete on line 1, the long URL gets its own full-width line */
      .ocs-link-row {
        grid-template-columns: minmax(0,1fr) 32px;
        grid-template-areas: "label del" "url url";
      }
      .ocs-link-row .ocs-link-label { grid-area: label; }
      .ocs-link-row .ocs-link-url   { grid-area: url; }
      .ocs-link-row .ocs-link-del   { grid-area: del; }
    }

    /* ── NARROW CARD ────────────────────────────────────────────────────── */
    @media (max-width: 620px) {
      .oc-strip { flex-wrap: wrap; gap: 10px; }
      .oc-when { padding-left: 0; border-left: 0; flex-basis: 100%; order: 3; }
      .oc-next-wrap { margin-left: auto; }
      .oc-next-pop { width: 232px; }
      .oc-techs-grid { grid-template-columns: 1fr; }
      .oc-tech-col:first-child { border-right: 0; border-bottom: 1px solid var(--ss-border2); }
    }
    /* lab rows */
.hp-lab-row:last-child { border-bottom: none; }
.ss-home-wrap { padding: 32px 36px; max-width: 960px; margin: 0 auto; }
    .ss-home-hero {
      display: flex; align-items: center; gap: 18px; margin-bottom: 36px; padding: 28px 32px;
      background: linear-gradient(135deg, rgba(0,115,234,.08) 0%, rgba(162,93,220,.06) 50%, rgba(22,211,238,.04) 100%);
      border: 1px solid rgba(255,255,255,.07); border-radius: 16px; position: relative; overflow: hidden;
    }
    .ss-home-hero::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse at 80% 50%, color-mix(in srgb, var(--ss-accent, #58a6ff) 6%, transparent) 0%, transparent 70%); pointer-events: none;
    }
    .ss-home-hero-icon {
      width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #0073ea 0%, #a25ddc 100%);
      display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; box-shadow: 0 4px 20px rgba(0,115,234,.4); flex-shrink: 0;
    }
    .ss-home-hero-text h1 { font-size: 20px; font-weight: 900; color: #e6edf3; letter-spacing: -.01em; margin: 0 0 4px; }
    .ss-home-hero-text p { font-size: 12px; color: var(--ss-muted); margin: 0; line-height: 1.5; }
    .ss-home-section-label {
      font-size: 9px; font-weight: 800; letter-spacing: .1em;
      text-transform: uppercase; color: var(--ss-muted); margin-bottom: 12px;
    }
    .ss-home-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px; margin-bottom: 32px;
    }
    .ss-home-card {
      padding: 18px 18px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.03); cursor: pointer; display: flex; flex-direction: column; gap: 10px;
      transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
    }
    .ss-home-card:hover { background: rgba(255,255,255,.06); transform: translateY(-2px); }
    .ss-home-card-icon {
      width: 34px; height: 34px; border-radius: 9px; display: flex;
      align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
    }
    .ss-home-card-title { font-size: 12px; font-weight: 800; color: #e6edf3; letter-spacing: .01em; }
    .ss-home-card-desc { font-size: 10px; color: var(--ss-muted); line-height: 1.5; margin-top: 2px; }
    .ss-home-card-arrow { margin-top: auto; font-size: 9px; color: var(--ss-muted); transition: color .18s, transform .18s; align-self: flex-end; }
    .ss-home-card:hover .ss-home-card-arrow { transform: translateX(3px); }
    .ss-home-card[data-accent="blue"] .ss-home-card-icon { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); color: var(--ss-accent, #58a6ff); }
    .ss-home-card[data-accent="green"] .ss-home-card-icon { background: rgba(63,185,80,.12); color: #3fb950; }
    .ss-home-card[data-accent="cyan"] .ss-home-card-icon { background: rgba(34,211,238,.12); color: #22d3ee; }
    .ss-home-card[data-accent="orange"] .ss-home-card-icon { background: rgba(251,146,60,.12); color: #fb923c; }
    .ss-home-card[data-accent="purple"] .ss-home-card-icon { background: rgba(162,93,220,.12); color: #a25ddc; }
    .ss-home-card[data-accent="yellow"] .ss-home-card-icon { background: rgba(234,179,8,.12); color: #eab308; }

    /* ── Contact Directory chip — relocated from the retired INFORMATION
         SECTION home card (2026-07-17). Sits LEFT of New Case; keeps the
         section's green identity. contact_directory.js drives the same
         hp-contact-dir-* ids (open / numeric count badge / SA rename). ── */
    .ss-topbar-contacts {
      display: flex; align-items: center; gap: 7px;
      height: 30px; padding: 0 10px; border-radius: 8px;
      background: linear-gradient(180deg, rgba(63,185,80,.14), rgba(63,185,80,.05));
      border: 1px solid rgba(63,185,80,.32);
      color: #a7f3a0; cursor: pointer; user-select: none;
      font-size: 10.5px; font-weight: 700; font-family: inherit;
      flex-shrink: 0; position: relative;
      transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
    }
    .ss-topbar-contacts:hover {
      border-color: rgba(63,185,80,.55);
      background: linear-gradient(180deg, rgba(63,185,80,.22), rgba(63,185,80,.08));
      box-shadow: 0 4px 14px rgba(2,6,23,.4);
      transform: translateY(-1px);
    }
    .ss-topbar-contacts:active { transform: translateY(0) scale(.97); }
    .ss-topbar-contacts:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(63,185,80,.4); }
    .ss-topbar-contacts > i { font-size: 11px; color: var(--ss-green); }
    .ss-tbc-label {
      white-space: nowrap; max-width: 130px;
      overflow: hidden; text-overflow: ellipsis;
    }
    .ss-tbc-count {
      min-width: 17px; height: 15px; padding: 0 4px; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(63,185,80,.22); border: 1px solid rgba(63,185,80,.45);
      font-size: 8.5px; font-weight: 800; color: #a7f3a0;
    }
    .ss-tbc-edit {
      width: 16px; height: 16px; border-radius: 5px;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
      color: var(--ss-muted); font-size: 8px; cursor: pointer;
      transition: background .15s, color .15s;
    }
    .ss-tbc-edit:hover { background: rgba(63,185,80,.2); color: var(--ss-green); border-color: rgba(63,185,80,.45); }
    @media (max-width: 1500px) { .ss-tbc-label { display: none; } }

    /* New case button */
    .ss-new-case-btn {
      display: flex; align-items: center; gap: 6px; padding: 0 13px; height: 30px;
      border-radius: 8px; border: 1px solid rgba(56,189,248,.45);
      background: linear-gradient(135deg, rgba(14,165,233,.18) 0%, rgba(56,189,248,.12) 50%, rgba(99,102,241,.14) 100%);
      color: #7dd3fc; font-size: 11px; font-weight: 800; font-family: inherit; letter-spacing: .03em;
      cursor: pointer; flex-shrink: 0; position: relative; overflow: hidden; text-decoration: none;
      transition: border-color .2s, color .2s, transform .15s;
    }
    .ss-new-case-btn:hover {
      border-color: rgba(56,189,248,.75);
      color: #e0f2fe;
      transform: translateY(-1px);
      box-shadow: 0 0 22px rgba(56,189,248,.5), 0 6px 24px rgba(56,189,248,.3), inset 0 1px 0 rgba(255,255,255,.2);
    }
    .ss-new-case-btn:active { transform: translateY(0px) scale(.97); }
    .ss-new-case-btn i { font-size: 10px; opacity: .9; }

    /* Header right controls */
    .ss-header-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    /* ── Call Widget Button ───────────────────────────────────── */
    @keyframes cw-ring {
      0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(63,185,80,.6); }
      40%  { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(63,185,80,0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(63,185,80,0); }
    }
    @keyframes cw-active-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(248,81,73,.5), 0 4px 18px rgba(248,81,73,.3); }
      50%     { box-shadow: 0 0 0 6px rgba(248,81,73,0), 0 4px 18px rgba(248,81,73,.15); }
    }
    .ss-call-widget {
      width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
      border: none; cursor: pointer; padding: 0;
      background: transparent;
      position: relative; overflow: visible;
      transition: transform .18s;
    }
    .ss-call-widget:hover { transform: scale(1.08); }
    .ss-call-widget:active { transform: scale(.95); }
    .ss-call-widget img {
      width: 100%; height: 100%; border-radius: 50%;
      object-fit: cover; display: block;
      filter: drop-shadow(0 2px 8px rgba(63,185,80,.4));
      animation: cw-ring 3s ease-in-out infinite;
    }
    .ss-call-widget.call-active img {
      animation: cw-active-pulse 1.5s ease-in-out infinite;
      filter: drop-shadow(0 2px 8px rgba(248,81,73,.5));
    }
    /* Timer badge on widget */
    .ss-call-widget .cw-timer-badge {
      position: absolute; top: -6px; right: -8px;
      background: #f85149; color: #fff;
      font: 800 8px var(--ss-mono,monospace);
      letter-spacing: .03em; padding: 2px 5px; border-radius: 10px;
      border: 1px solid rgba(0,0,0,.3);
      display: none; white-space: nowrap;
      pointer-events: none;
    }
    .ss-call-widget.call-active .cw-timer-badge { display: block; }

    /* ═══════════════════════════════════════════════════════════════
       CALL INFORMATION — Floating Window (premium, draggable, dockable)
    ═══════════════════════════════════════════════════════════════════ */
    #ci-float-window {
      position: fixed;
      top: 88px; left: 0; right: 0; margin: 0 auto;   /* center via auto-margins (transform-free) */
      width: min(760px, 94vw);
      max-height: min(660px, 84vh);
      display: none;            /* toggled to flex by JS */
      flex-direction: column;
      z-index: 9700;
      background:
        radial-gradient(120% 90% at 12% -10%, rgba(63,185,80,.10), transparent 55%),
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent), transparent 50%),
        linear-gradient(160deg, rgba(22,27,34,.97), rgba(13,17,23,.98));
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 18px;
      overflow: hidden;
      box-shadow:
        0 36px 100px rgba(0,0,0,.62),
        0 4px 18px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter: blur(22px) saturate(140%);
      -webkit-backdrop-filter: blur(22px) saturate(140%);
      animation: ciFwIn .28s cubic-bezier(.16,.84,.32,1);
    }
    @keyframes ciFwIn {
      from { opacity: 0; transform: translateY(16px) scale(.975); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    #ci-float-window.dragging { transition: none; cursor: grabbing; }
    #ci-float-window.maximized {
      top: 2.5vh !important; left: 2.5vw !important; right: auto !important; margin: 0 !important;
      width: 95vw !important; height: 95vh; max-height: 95vh !important;
      border-radius: 14px;
    }

    /* ── Header / drag handle ── */
    .ci-fw-header {
      display: flex; align-items: center; gap: 14px;
      padding: 13px 14px 13px 16px;
      cursor: grab; flex-shrink: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
      border-bottom: 1px solid rgba(255,255,255,.07);
      user-select: none;
    }
    .ci-fw-header:active { cursor: grabbing; }
    .ci-fw-brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
    .ci-fw-ico {
      width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, rgba(63,185,80,.22), rgba(63,185,80,.08));
      border: 1px solid rgba(63,185,80,.35);
      color: #3fb950; font-size: 14px;
      box-shadow: 0 4px 14px rgba(63,185,80,.18);
    }
    #ci-float-window.live .ci-fw-ico {
      background: linear-gradient(135deg, rgba(248,81,73,.22), rgba(248,81,73,.08));
      border-color: rgba(248,81,73,.4); color: #f85149;
      box-shadow: 0 4px 14px rgba(248,81,73,.22);
      animation: cw-active-pulse 1.6s ease-in-out infinite;
    }
    .ci-fw-headtext { min-width: 0; }
    .ci-fw-title {
      font-size: 14px; font-weight: 800; color: #e6edf3; letter-spacing: -.01em;
      display: flex; align-items: center; gap: 7px; line-height: 1.2;
    }
    .ci-fw-edit-badge {
      font-size: 8px; font-weight: 800; padding: 2px 7px; border-radius: 10px;
      background: rgba(210,153,34,.15); border: 1px solid rgba(210,153,34,.3);
      color: #d29922; letter-spacing: .04em;
    }
    .ci-fw-sub { font-size: 10px; color: var(--ss-muted); margin-top: 2px; }
    .ci-fw-timer {
      display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
      padding: 5px 12px; border-radius: 9px;
      background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08);
      font: 900 15px var(--ss-mono,monospace); color: var(--ss-muted);
      letter-spacing: .05em;
    }
    .ci-fw-timer-dot {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
      background: rgba(125,133,144,.6);
    }
    #ci-float-window.live .ci-fw-timer { color: #f85149; border-color: rgba(248,81,73,.28); }
    #ci-float-window.live .ci-fw-timer-dot {
      background: #f85149; box-shadow: 0 0 7px rgba(248,81,73,.85);
      animation: cw-active-pulse 1.2s ease-in-out infinite;
    }
    .ci-fw-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .ci-fw-btn {
      width: 28px; height: 28px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      color: var(--ss-muted); cursor: pointer; font-size: 11px;
      transition: background .14s, color .14s, transform .12s;
    }
    .ci-fw-btn:hover { background: rgba(255,255,255,.1); color: #e6edf3; }
    .ci-fw-btn:active { transform: scale(.92); }
    .ci-fw-btn.close:hover { background: rgba(248,81,73,.16); border-color: rgba(248,81,73,.35); color: #f85149; }

    /* ── Body ── */
    .ci-fw-body {
      flex: 1; min-height: 0;
      padding: 18px 18px 6px;
      overflow-y: auto;
      display: flex; flex-direction: column; gap: 4px;
    }
    .ci-fw-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
      flex-shrink: 0;
    }
    .ci-fw-field { margin-bottom: 6px; }
    .ci-fw-concern { flex: 1; display: flex; flex-direction: column; min-height: 150px; margin-top: 4px; }
    .ci-fw-concern .ss-input {
      flex: 1; resize: none; min-height: 130px; line-height: 1.55;
    }
    #ci-float-window .ss-field-label { font-size: 10px; }
    #ci-float-window .ss-input { font-size: 13px; }
    .ci-req { color: #f85149; }

    /* ── LIVE TRANSCRIPT split (lt-2, 2026-09-18) ──────────────────────────
       A STRICT TWO-COLUMN GRID: the form on the left, the transcript on the
       right, both full height, from the instant the window opens.

       WHY THIS LIVES HERE AND NOT IN THE LAZY SHEET. `.ci-fw-split` is static
       markup in support_studio.html, so it paints with the shell. lt-1 put
       these declarations in the lazy stylesheet AND forgot to bump this file's
       ?v= — so the browser served the old bytes, `.ci-fw-split` stayed a plain
       block box, `.ci-fw-body`'s `flex:1; min-height:0` meant nothing, and the
       pane dropped out of the row and stacked underneath the Caller ID panel.
       That is the squashed-pane bug MACE reported. Eager markup needs eager
       geometry, and a changed stylesheet needs a bumped buster — both halves.

       `minmax(0, 1fr)` is load-bearing: a bare `1fr` floors at min-content, so
       one long unbroken word in the transcript would push the grid wider than
       the window instead of wrapping. */
    .ci-fw-split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 420px;
      align-items: stretch;
      flex: 1;
      min-height: 0;
    }
    .ci-fw-split > .ci-fw-body { min-width: 0; }

    /* The pane is VISIBLE BY DEFAULT — MACE: it must be there the moment the
       modal opens, not after a module reaches the idle tier. Collapsing is the
       only thing that takes it away. */
    #ci-float-window .lt-pane { display: flex; }
    #ci-float-window { width: min(1240px, 96vw); }

    /* Below ~1180px the two columns cannot both stay usable, so the transcript
       stacks under the form rather than squeezing it. This is the ONLY state in
       which stacking is correct — and it is a deliberate one, not the accident
       lt-1 shipped. */
    @media (max-width: 1180px) {
      #ci-float-window { width: min(780px, 94vw); }
      .ci-fw-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; }
    }
    .ci-fw-reqmsg {
      font-size: 10px; color: #f85149; min-height: 13px; margin: 6px 2px 0;
      opacity: 0; transition: opacity .3s;
    }

    /* ── Footer ── */
    .ci-fw-footer {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 16px;
      border-top: 1px solid rgba(255,255,255,.07);
      background: rgba(0,0,0,.18); flex-shrink: 0;
    }
    .ci-fw-savemsg {
      flex: 1; font-size: 11px; font-weight: 700; color: #3fb950;
      opacity: 0; transition: opacity .3s; text-align: center;
    }
    .ci-fw-action {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 16px; border-radius: 9px;
      font: 700 12px var(--ss-font); cursor: pointer;
      transition: background .15s, border-color .15s, transform .12s;
    }
    .ci-fw-action:active { transform: scale(.97); }
    .ci-fw-action.ghost {
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      color: var(--ss-muted);
    }
    .ci-fw-action.ghost:hover { background: rgba(255,255,255,.09); color: #e6edf3; }
    .ci-fw-action.save {
      background: linear-gradient(135deg, rgba(63,185,80,.95), rgba(46,160,67,.95));
      border: 1px solid rgba(63,185,80,.5); color: #02130a;
      box-shadow: 0 6px 18px rgba(63,185,80,.28);
    }
    .ci-fw-action.save:hover { filter: brightness(1.08); }

    /* ── Minimized pill ── */
    #ci-float-min {
      position: fixed; bottom: 22px; right: 22px; z-index: 9700;
      display: none;            /* toggled to flex by JS */
      align-items: center; gap: 12px;
      padding: 9px 14px 9px 11px;
      background: linear-gradient(160deg, rgba(22,27,34,.98), rgba(13,17,23,.98));
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 28%, transparent);
      border-radius: 14px; cursor: pointer;
      box-shadow: 0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
      backdrop-filter: blur(14px);
      animation: ciFwIn .2s ease;
      transition: transform .14s, border-color .14s;
    }
    #ci-float-min:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 50%, transparent); }
    .ci-min-ico {
      width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, rgba(63,185,80,.22), rgba(63,185,80,.08));
      border: 1px solid rgba(63,185,80,.35); color: #3fb950; font-size: 12px;
    }
    #ci-float-min.live .ci-min-ico {
      background: linear-gradient(135deg, rgba(248,81,73,.22), rgba(248,81,73,.08));
      border-color: rgba(248,81,73,.4); color: #f85149;
      animation: cw-active-pulse 1.6s ease-in-out infinite;
    }
    .ci-min-title { font-size: 12px; font-weight: 800; color: #e6edf3; line-height: 1.2; }
    .ci-min-sub {
      display: flex; align-items: center; gap: 6px; margin-top: 2px;
      font: 700 11px var(--ss-mono,monospace); color: var(--ss-muted);
    }
    .ci-min-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(125,133,144,.6); }
    #ci-float-min.live .ci-min-dot {
      background: #f85149; box-shadow: 0 0 6px rgba(248,81,73,.8);
      animation: cw-active-pulse 1.2s ease-in-out infinite;
    }
    #ci-float-min.live .ci-min-sub { color: #f85149; }
    .ci-min-restore { color: var(--ss-muted); font-size: 12px; margin-left: 2px; }

    /* Single-column fields on narrow viewports */
    @media (max-width: 560px) {
      .ci-fw-grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════════════════
       CALLER ID — Global QuickBase reverse-lookup (FEATURE ci-cid)
       Lives below the Concern inside the Call Information window.
       States via [data-state]: idle · searching · match · none · error · warn
    ═══════════════════════════════════════════════════════════════════ */
    .ci-cid {
      flex-shrink: 0;
      margin-top: 10px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
      overflow: hidden;
      transition: border-color .2s;
    }
    .ci-cid[data-state="match"]     { border-color: rgba(63,185,80,.35); }
    .ci-cid[data-state="searching"] { border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent); }
    .ci-cid[data-state="error"]     { border-color: rgba(248,81,73,.35); }
    .ci-cid[data-state="warn"]      { border-color: rgba(210,153,34,.3); }

    .ci-cid-head {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 8px 12px;
      background: rgba(0,0,0,.28);
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .ci-cid-title {
      display: inline-flex; align-items: center; gap: 8px;
      font: 800 10px var(--ss-font); letter-spacing: .08em; text-transform: uppercase;
      color: #e6edf3;
    }
    .ci-cid-ico {
      width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, color-mix(in srgb, var(--ss-accent, #58a6ff) 22%, transparent), color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent));
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent);
      color: var(--ss-accent, #58a6ff); font-size: 10px;
    }
    .ci-cid-src {
      font: 800 8px var(--ss-font); letter-spacing: .06em;
      color: var(--ss-accent, #58a6ff); padding: 2px 7px; border-radius: 9px;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
    }
    .ci-cid-statuschip {
      display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
      font: 800 9px var(--ss-mono,monospace); letter-spacing: .07em;
      color: var(--ss-muted);
    }
    .ci-cid-statuschip[data-tone="ok"]    { color: #3fb950; }
    .ci-cid-statuschip[data-tone="busy"]  { color: var(--ss-accent, #58a6ff); }
    .ci-cid-statuschip[data-tone="error"] { color: #f85149; }
    .ci-cid-statuschip[data-tone="warn"]  { color: #d29922; }
    .ci-cid-dot {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
      background: rgba(125,133,144,.6);
    }
    .ci-cid-dot.pulse { background: #58a6ff; box-shadow: 0 0 7px rgba(88,166,255,.85); animation: cw-active-pulse 1.2s ease-in-out infinite; }
    .ci-cid-dot.ok    { background: #3fb950; box-shadow: 0 0 7px rgba(63,185,80,.85); }

    .ci-cid-body { padding: 10px 12px 12px; }

    /* ── Empty / status states ── */
    .ci-cid-empty {
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      padding: 14px 12px; text-align: center;
      font: 500 11px var(--ss-font); color: var(--ss-muted); line-height: 1.5;
    }
    .ci-cid-empty i { font-size: 18px; opacity: .45; }
    .ci-cid-empty.none i { color: #f85149; opacity: .7; }
    .ci-cid-nonetitle {
      font: 900 12px var(--ss-font); letter-spacing: .12em; color: #e6edf3;
    }
    .ci-cid-retry {
      display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
      padding: 6px 14px; border-radius: 8px; cursor: pointer;
      background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.35);
      color: #f85149; font: 700 10px var(--ss-font);
      transition: background .15s, transform .12s;
    }
    .ci-cid-retry:hover { background: rgba(248,81,73,.2); }
    .ci-cid-retry:active { transform: scale(.96); }

    /* ── Identity card ── */
    .ci-cid-card {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,.08); border-radius: 11px;
      background: linear-gradient(160deg, color-mix(in srgb, var(--ss-accent, #58a6ff) 7%, transparent), rgba(0,0,0,.18));
    }
    .ci-cid-avatar {
      width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, color-mix(in srgb, var(--ss-accent, #58a6ff) 28%, transparent), color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent));
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent);
      color: var(--ss-accent, #58a6ff); font: 900 14px var(--ss-font); letter-spacing: .02em;
      box-shadow: 0 4px 14px color-mix(in srgb, var(--ss-accent, #58a6ff) 18%, transparent);
    }
    .ci-cid-idmain { flex: 1; min-width: 0; }
    .ci-cid-name {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      font: 800 13px var(--ss-font); color: #e6edf3; line-height: 1.25;
    }
    .ci-cid-name em { font-style: normal; color: var(--ss-muted); font-weight: 600; }
    .ci-cid-companychip {
      font: 700 9px var(--ss-font); letter-spacing: .04em;
      color: #a25ddc; padding: 2px 8px; border-radius: 9px;
      background: rgba(162,93,220,.12); border: 1px solid rgba(162,93,220,.3);
      white-space: nowrap;
    }
    .ci-cid-meta {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      margin-top: 5px;
    }
    .ci-cid-metaitem {
      display: inline-flex; align-items: center; gap: 5px; min-width: 0;
      font: 600 10.5px var(--ss-font); color: var(--ss-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ci-cid-metaitem i { font-size: 9px; color: var(--ss-accent, #58a6ff); opacity: .8; }
    .ci-cid-copy {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 5px; cursor: pointer;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
      color: var(--ss-muted); font-size: 8px;
      transition: background .14s, color .14s;
    }
    .ci-cid-copy:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent); color: var(--ss-accent, #58a6ff); }
    .ci-cid-kpis { display: flex; gap: 8px; flex-shrink: 0; }
    .ci-cid-kpi {
      display: flex; flex-direction: column; align-items: center; gap: 1px;
      min-width: 46px; padding: 6px 10px; border-radius: 9px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    }
    .ci-cid-kpi b { font: 900 15px var(--ss-font); color: var(--ss-accent, #58a6ff); line-height: 1.1; }
    .ci-cid-kpi.open b { color: #d29922; }
    .ci-cid-kpi span {
      font: 800 7.5px var(--ss-font); letter-spacing: .1em; color: var(--ss-muted);
    }

    /* ── Quick-apply chips (fill empty form fields from the match) ── */
    .ci-cid-applyrow { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
    .ci-cid-apply {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 11px; border-radius: 14px; cursor: pointer;
      background: rgba(63,185,80,.1); border: 1px solid rgba(63,185,80,.3);
      color: #3fb950; font: 700 9.5px var(--ss-font);
      max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      transition: background .15s, transform .12s;
    }
    .ci-cid-apply:hover { background: rgba(63,185,80,.18); }
    .ci-cid-apply:active { transform: scale(.96); }
    .ci-cid-apply.applied, .ci-cid-apply:disabled {
      background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1);
      color: var(--ss-muted); cursor: default;
    }

    /* ── Case history ── */
    .ci-cid-histhead {
      display: flex; align-items: center; gap: 7px;
      margin: 12px 2px 6px;
      font: 800 9px var(--ss-font); letter-spacing: .1em; color: var(--ss-muted);
    }
    .ci-cid-histhead i { font-size: 9px; color: var(--ss-accent, #58a6ff); opacity: .8; }
    .ci-cid-histhead span {
      margin-left: auto; font: 600 8.5px var(--ss-font); letter-spacing: .02em;
      text-transform: none; opacity: .75;
    }
    .ci-cid-list {
      display: flex; flex-direction: column; gap: 5px;
      max-height: 190px; overflow-y: auto; padding-right: 2px;
    }
    .ci-cid-case {
      display: flex; align-items: center; gap: 9px; width: 100%;
      padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left;
      background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
      transition: background .14s, border-color .14s;
    }
    /* Geometry-stable hover — recolor only, never move the row. */
    .ci-cid-case:hover {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent);
    }
    .ci-cid-case:focus-visible {
      outline: none; border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
    }
    .ci-cid-casenum {
      flex-shrink: 0; font: 800 11px var(--ss-mono,monospace); color: var(--ss-accent, #58a6ff);
      letter-spacing: .02em;
    }
    .ci-cid-pill {
      flex-shrink: 0; font: 800 8px var(--ss-font); letter-spacing: .03em;
      padding: 2px 8px; border-radius: 10px; border: 1px solid; white-space: nowrap;
    }
    .ci-cid-desc {
      flex: 1; min-width: 0;
      font: 600 11px var(--ss-font); color: var(--ss-text, #e6edf3);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4;
    }
    .ci-cid-desc em { font-style: normal; color: var(--ss-muted); opacity: .7; }
    .ci-cid-enduser {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
      font: 700 9.5px var(--ss-font); color: var(--ss-muted);
      max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ci-cid-enduser i { font-size: 8px; color: #a25ddc; opacity: .8; }
    .ci-cid-when { flex-shrink: 0; font: 600 9px var(--ss-font); color: var(--ss-muted); opacity: .8; }
    .ci-cid-go { flex-shrink: 0; color: var(--ss-muted); font-size: 9px; opacity: .6; }
    .ci-cid-case:hover .ci-cid-go { color: var(--ss-accent, #58a6ff); opacity: 1; }
    .ci-cid-more {
      margin-top: 6px; text-align: center;
      font: 600 9px var(--ss-font); color: var(--ss-muted); opacity: .8;
    }

    /* ── Loading skeleton ── */
    .ci-cid-skel { display: flex; flex-direction: column; gap: 7px; padding: 2px 0; }
    .ci-cid-skel-card { display: flex; align-items: center; gap: 12px; padding: 4px 2px 8px; }
    .ci-cid-skel-av {
      width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
      background: rgba(255,255,255,.05);
      animation: ciCidShimmer 1.3s ease-in-out infinite;
    }
    .ci-cid-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
    .ci-cid-skel-line, .ci-cid-skel-row {
      height: 11px; border-radius: 6px;
      background: rgba(255,255,255,.05);
      animation: ciCidShimmer 1.3s ease-in-out infinite;
    }
    .ci-cid-skel-row { height: 30px; border-radius: 9px; }
    .ci-cid-skel-line.w60 { width: 60%; }
    .ci-cid-skel-line.w85 { width: 85%; }
    .ci-cid-skel-row.w75 { width: 75%; }
    @keyframes ciCidShimmer {
      0%, 100% { background: rgba(255,255,255,.04); }
      50%      { background: rgba(255,255,255,.09); }
    }

    /* Narrow window: let identity metadata wrap, hide low-value columns */
    @media (max-width: 560px) {
      .ci-cid-card { flex-wrap: wrap; }
      .ci-cid-when, .ci-cid-enduser { display: none; }
    }
    /* ── END CALLER ID (ci-cid) ────────────────────────────────── */
    /* ── END Call Information Floating Window ─────────────────── */

    .ss-search-wrap {
      display: flex;
      align-items: center;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 6px;
      overflow: hidden;
      transition: border-color .18s;
    }

    .ss-search-wrap:focus-within {
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
    }

    .ss-search-input {
      background: transparent;
      border: none;
      outline: none;
      color: var(--ss-text);
      font-family: var(--ss-font);
      font-size: 11px;
      padding: 6px 12px;
      width: 220px;
    }

    .ss-search-input::placeholder { color: rgba(255,255,255,.2); }

    .ss-search-btn {
      background: rgba(255,255,255,.04);
      border: none;
      border-left: 1px solid rgba(255,255,255,.07);
      color: var(--ss-muted);
      padding: 6px 10px;
      cursor: pointer;
      transition: background .15s, color .15s;
      font-size: 10px;
    }

    .ss-search-btn:hover { background: rgba(255,255,255,.09); color: var(--ss-text); }

    .ss-btn-primary {
      background: linear-gradient(135deg, #0073ea, #0060c2);
      border: 1px solid rgba(0,115,234,.5);
      color: #fff;
      padding: 7px 14px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 12px;
      font-family: var(--ss-font);
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 2px 10px rgba(0,115,234,.3);
      transition: all .18s;
    }

    .ss-btn-primary:hover {
      background: linear-gradient(135deg, #0284c7, #0073ea);
      box-shadow: 0 4px 16px rgba(0,115,234,.4);
      transform: translateY(-1px);
    }

    /* ─────────────────────────────────────────────────────────────────
       3-PANE BODY
    ───────────────────────────────────────────────────────────────── */
    .ss-body {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    /* ─────────────────────────────────────────────────────────────────
       SIDEBARS — HD Premium
    ───────────────────────────────────────────────────────────────── */
    .ss-sidebar {
      width: 232px;
      min-width: 232px;
      min-height: 0;
      background: var(--ss-surface);
      border-right: 1px solid var(--ss-border);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      flex-shrink: 0;
    }

    .ss-sidebar.right {
      border-right: none;
      border-left: 1px solid var(--ss-border);
      width: 262px;
      min-width: 262px;
    }
    .ss-right-mini-rail {
      width: 34px;
      min-width: 34px;
      min-height: 0;
      border-left: 1px solid var(--ss-border);
      background: var(--ss-surface);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 12px 6px;
      flex-shrink: 0;
    }
    .ss-mini-btn {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color: var(--ss-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .15s ease;
      padding: 0;
    }
    .ss-mini-btn i { font-size: 11px; }
    .ss-mini-btn.ss-mini-collapse {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .02em;
      margin-top: auto;
    }
    .ss-mini-btn:hover { color: #e6edf3; border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 38%, transparent); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); }
    .ss-mini-btn.active { color: var(--ss-accent, #58a6ff); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 45%, transparent); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent); }
    #ss-right-sidebar.ss-collapsed-notes #right-call-info { display: none !important; }
    #ss-right-sidebar.ss-bookmarks-mode #right-call-info { display: none !important; }
    #ss-right-sidebar.ss-bookmarks-mode #ci-bookmarks-panel { display: flex !important; }
    #ss-right-sidebar.ss-right-hidden { display: none !important; }

    .ss-panel {
      padding: 16px 14px;
      border-bottom: 1px solid var(--ss-border2);
    }

    .ss-panel.grow { flex: 1; }

    .ss-panel-title {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--ss-muted);
      font-weight: 700;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ss-panel-title i { font-size: 9px; opacity: .85; }

    /* Toolbar buttons */
    .ss-tool-btn {
      width: 100%;
      padding: 9px 12px;
      margin-bottom: 6px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 6px;
      color: var(--ss-text);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 12px;
      font-family: var(--ss-font);
      font-weight: 500;
      transition: all .18s;
      text-align: left;
    }

    .ss-tool-btn:hover {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.14);
      color: #fff;
    }

    .ss-tool-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .ss-tool-btn i {
      width: 16px;
      text-align: center;
      flex-shrink: 0;
      color: var(--ss-muted);
      font-size: 12px;
    }

    .ss-tool-btn:hover i { color: var(--ss-accent); }

    .ss-tool-btn .badge-soon {
      margin-left: auto;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 2px 5px;
      border-radius: 4px;
      background: rgba(255,255,255,.06);
      color: var(--ss-muted);
      border: 1px solid rgba(255,255,255,.08);
    }

    /* form control */
    .ss-input {
      width: 100%;
      padding: 7px 10px;
      background: var(--ss-bg);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 5px;
      color: var(--ss-text);
      font-size: 12px;
      font-family: var(--ss-font);
      outline: none;
      transition: border-color .18s, box-shadow .18s;
    }

    .ss-input:focus {
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 45%, transparent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent);
    }

    .ss-input::placeholder { color: rgba(255,255,255,.22); }

    .ss-input-row {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
    }

    .ss-input-row .ss-input { flex: 1; }

    .ss-icon-btn {
      padding: 7px 10px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 5px;
      color: var(--ss-muted);
      cursor: pointer;
      font-size: 11px;
      transition: all .18s;
      flex-shrink: 0;
    }

    .ss-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

    /* session list empty */
    .ss-empty-note {
      font-size: 11px;
      color: rgba(255,255,255,.18);
      text-align: center;
      padding: 22px 10px;
      line-height: 1.7;
    }

    .ss-empty-note i {
      display: block;
      font-size: 22px;
      margin-bottom: 8px;
      opacity: .22;
    }

    /* ─────────────────────────────────────────────────────────────────
       CENTER CANVAS — HD
    ───────────────────────────────────────────────────────────────── */
    .ss-canvas {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--ss-bg);
      position: relative;
      overflow: hidden;
      min-width: 0;
    }

    .ss-canvas-toolbar {
      padding: 0 14px;
      height: 40px;
      min-height: 40px;
      background: var(--ss-surface2);
      border-bottom: 1px solid var(--ss-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      gap: 10px;
    }

    .ss-canvas-toolbar-left { display: flex; gap: 7px; align-items: center; }

    .ss-mode-btn {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
      color: var(--ss-text);
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      font-family: var(--ss-font);
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: all .18s;
    }

    .ss-mode-btn:hover { background: rgba(255,255,255,.10); }

    .ss-mode-badge {
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .04em;
      background: rgba(139,148,158,.10);
      color: var(--ss-muted);
      border: 1px solid rgba(139,148,158,.25);
    }

    .ss-canvas-path {
      font-size: 11px;
      color: var(--ss-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Canvas empty state */
    .ss-canvas-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
      position: relative;
      background:
        radial-gradient(ellipse 55% 35% at 50% 50%, rgba(0,115,234,.035) 0%, transparent 70%),
        repeating-linear-gradient(
          0deg,
          transparent, transparent 39px,
          rgba(255,255,255,.022) 39px, rgba(255,255,255,.022) 40px
        ),
        repeating-linear-gradient(
          90deg,
          transparent, transparent 39px,
          rgba(255,255,255,.022) 39px, rgba(255,255,255,.022) 40px
        );
    }

    .ss-empty-icon {
      width: 72px;
      height: 72px;
      border-radius: 18px;
      background: rgba(0,115,234,.07);
      border: 1px dashed color-mix(in srgb, var(--ss-accent, #58a6ff) 28%, transparent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: color-mix(in srgb, var(--ss-accent, #58a6ff) 38%, transparent);
      position: relative;
    }

    .ss-empty-icon::after {
      content: '';
      position: absolute;
      inset: -12px;
      border-radius: 24px;
      border: 1px dashed color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
    }

    .ss-empty-title {
      font-size: 15px;
      font-weight: 700;
      color: rgba(255,255,255,.22);
      text-align: center;
      letter-spacing: .01em;
    }

    .ss-empty-sub {
      font-size: 11px;
      color: rgba(255,255,255,.12);
      text-align: center;
      margin-top: 4px;
      line-height: 1.6;
    }

    /* ── Tab content panels (hidden initially) ── */
    .ss-tab-content { display: none; }
    .ss-tab-content.active { display: flex; flex: 1; min-height: 0; }

    /* ─────────────────────────────────────────────────────────────────
       RIGHT SIDEBAR — Inspector
    ───────────────────────────────────────────────────────────────── */
    .ss-inspector-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      text-align: center;
      gap: 12px;
      color: var(--ss-muted);
    }

    .ss-inspector-empty i {
      font-size: 36px;
      opacity: .18;
    }

    .ss-inspector-empty p {
      font-size: 11px;
      opacity: .38;
      line-height: 1.6;
    }

    /* skeleton fields */
    .ss-field-group { margin-bottom: 14px; }

    .ss-field-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--ss-muted);
      font-weight: 700;
      margin-bottom: 5px;
    }

    .ss-field-skel {
      height: 30px;
      border-radius: 5px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.06);
    }

    .ss-field-skel.tall { height: 56px; }

    .ss-btn-row { display: flex; gap: 6px; margin-top: 8px; }

    .ss-action-btn {
      flex: 1;
      padding: 8px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 5px;
      color: var(--ss-muted);
      font-size: 11px;
      font-family: var(--ss-font);
      font-weight: 600;
      cursor: not-allowed;
      opacity: .5;
      text-align: center;
    }

    /* ─────────────────────────────────────────────────────────────────
       STATUS BAR (bottom)
    ───────────────────────────────────────────────────────────────── */
    .ss-statusbar {
      height: 26px;
      min-height: 26px;
      background: var(--ss-surface3);
      border-top: 1px solid var(--ss-border);
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 16px;
      flex-shrink: 0;
    }

    .ss-status-chip {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 600;
      color: var(--ss-muted);
      letter-spacing: .02em;
    }

    .ss-status-chip .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ss-muted);
    }

    .ss-status-chip.ok .dot { background: var(--ss-green); box-shadow: 0 0 0 2px rgba(63,185,80,.2); }
    .ss-status-chip.ok { color: var(--ss-green); }

    .ss-statusbar-right {
      margin-left: auto;
      font-size: 10px;
      color: rgba(255,255,255,.2);
      font-family: var(--ss-mono);
    }

    /* ─────────────────────────────────────────────────────────────────
       DIVIDER
    ───────────────────────────────────────────────────────────────── */
    .ss-divider {
      border: none;
      border-top: 1px solid var(--ss-border2);
      margin: 12px 0;
    }

    /* Coming Soon watermark on canvas */
    .ss-coming-soon {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255,255,255,.08);
      white-space: nowrap;
      pointer-events: none;
    }

    /* MUMS theme overrides for light theme */
    body[data-theme="mums_light"] .ss-header,
    body[data-theme="mums_light"] .ss-sidebar,
    body[data-theme="mums_light"] .ss-sidebar.right,
    body[data-theme="mums_light"] .ss-canvas-toolbar,
    body[data-theme="mums_light"] .ss-statusbar {
      background: #0d1117 !important;
      border-color: rgba(255,255,255,.10) !important;
      color: #c9d1d9 !important;
    }

    body[data-theme="mums_light"] .ss-shell,
    body[data-theme="mums_light"] body {
      background: #010409 !important;
      color: #c9d1d9 !important;
    }

  
    /* ═══════════════════════════════════════════════════════════════
       PRODUCT CATALOG — Support Studio Module
    ═══════════════════════════════════════════════════════════════ */

    /* ── Treeview sidebar ─────────────────────────────────────── */
    .cat-sidebar-head {
      padding: 10px 12px 8px;
      border-bottom: 1px solid var(--ss-border);
      flex-shrink: 0;
    }
    .cat-sidebar-title {
      font-size: 10px; font-weight: 800; letter-spacing: .08em;
      text-transform: uppercase; color: var(--ss-muted);
      margin-bottom: 8px; display: flex; align-items: center;
      justify-content: space-between;
    }
    .cat-add-btn {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
      color: var(--ss-accent, #58a6ff); border-radius: 6px; padding: 3px 8px;
      font-size: 11px; font-weight: 700; cursor: pointer;
      display: none; align-items: center; gap: 4px;
      transition: background .15s;
    }
    .cat-add-btn:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 22%, transparent); }
    .cat-add-btn.visible { display: flex; }
    .cat-search {
      width: 100%; padding: 6px 10px; border-radius: 6px;
      background: var(--ss-surface3); border: 1px solid var(--ss-border);
      color: var(--ss-text); font-size: 12px; outline: none;
    }
    .cat-search:focus { border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent); }
    .cat-list { flex: 1; overflow-y: auto; padding: 4px 0; }

    /* ssx-4 — CONTROLLER SERIES first-run empty state. An empty rail is the
       normal starting point now that the demo seed is gone, so it has to look
       deliberate: say what a series is, and offer the one action that fills it. */
    .cat-empty-state {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      gap: 8px; margin: 14px 12px; padding: 22px 16px; border-radius: 10px;
      background: rgba(255,255,255,.02); border: 1px dashed var(--ss-border);
    }
    .cat-empty-ico {
      width: 40px; height: 40px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 22%, transparent);
      color: var(--ss-accent); font-size: 15px;
    }
    .cat-empty-title { font-size: 12px; font-weight: 800; color: var(--ss-text); }
    .cat-empty-sub   { font-size: 10.5px; line-height: 1.55; color: var(--ss-muted); max-width: 210px; }
    .cat-empty-cta {
      display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
      padding: 7px 14px; border-radius: 7px; cursor: pointer;
      font: 800 11px var(--ss-font); letter-spacing: .01em;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 16%, transparent); color: var(--ss-accent2, #79c0ff);
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 34%, transparent);
      transition: background .15s, border-color .15s;
    }
    .cat-empty-cta:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 26%, transparent); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 50%, transparent); }
    .cat-empty-cta > i { font-size: 10px; }
    .cat-empty-note { font-size: 10px; color: var(--ss-muted); }
    html[data-ss-theme="light"] .cat-empty-state { background: rgba(16,24,40,.02); }
    html[data-ss-theme="light"] .cat-empty-cta   { background: rgba(42,99,207,.10); color: #1f56b8; border-color: rgba(42,99,207,.28); }
    html[data-ss-theme="light"] .cat-empty-cta:hover { background: rgba(42,99,207,.18); }

    /* Tree node rows */
    .cat-tree-node { user-select: none; }
    .cat-item-row {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 12px; cursor: pointer;
      border-bottom: 1px solid var(--ss-border2);
      transition: background .1s; position: relative;
    }
    .cat-item-row:hover { background: rgba(255,255,255,.04); }
    .cat-item-row.active { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent); border-left: 2px solid var(--ss-accent, #58a6ff); }
    .cat-item-row.is-child { padding-left: 28px; background: rgba(0,0,0,.15); }
    .cat-item-row.is-child:hover { background: rgba(255,255,255,.03); }
    .cat-item-row.is-child.active { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent); border-left: 2px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 60%, transparent); }

    /* Chevron toggle */
    .cat-chevron {
      width: 14px; height: 14px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: var(--ss-muted); font-size: 9px;
      transition: transform .2s; cursor: pointer;
    }
    .cat-chevron.open { transform: rotate(90deg); }
    .cat-chevron.leaf { opacity: 0; pointer-events: none; }

    /* Sub-tree connector line */
    .cat-subtree { border-left: 1px dashed color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); margin-left: 20px; }

    .cat-item-code {
      font-size: 9px; font-weight: 800; letter-spacing: .06em;
      color: var(--ss-accent, #58a6ff); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
      border-radius: 4px; padding: 1px 5px; flex-shrink: 0;
    }
    .cat-item-row.is-child .cat-item-code {
      color: color-mix(in srgb, var(--ss-accent, #58a6ff) 70%, transparent); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 6%, transparent);
      font-size: 8px;
    }
    .cat-item-name {
      font-size: 11px; font-weight: 600; color: var(--ss-text);
      flex: 1; min-width: 0; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .cat-item-row.is-child .cat-item-name { font-size: 10px; color: var(--ss-muted); }
    .cat-item-avatar {
      width: 20px; height: 20px; border-radius: 6px;
      background: rgba(63,185,80,.15); color: #3fb950;
      font-size: 9px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cat-item-avatar.unassigned { background: rgba(139,148,158,.1); color: var(--ss-muted); }

    /* ── Right-click context menu ─────────────────────────────── */
    .cat-ctx-menu {
      position: fixed; z-index: 9999;
      background: var(--ss-surface2); border: 1px solid var(--ss-border);
      border-radius: 9px; padding: 5px 0;
      box-shadow: 0 12px 36px rgba(0,0,0,.55);
      min-width: 190px;
      display: none;
      animation: ctxFadeIn .12s ease;
    }
    @keyframes ctxFadeIn {
      from { opacity: 0; transform: scale(.97) translateY(-4px); }
      to   { opacity: 1; transform: scale(1)  translateY(0);     }
    }
    .cat-ctx-menu.open { display: block; }
    .cat-ctx-item {
      padding: 7px 14px; font-size: 12px; font-weight: 600;
      color: var(--ss-text); cursor: pointer; display: flex;
      align-items: center; gap: 9px; transition: background .1s;
    }
    .cat-ctx-item:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent); color: var(--ss-accent, #58a6ff); }
    .cat-ctx-item i { width: 14px; text-align: center; font-size: 11px; color: var(--ss-muted); }
    .cat-ctx-item:hover i { color: var(--ss-accent, #58a6ff); }
    .cat-ctx-item.danger { color: var(--ss-danger); }
    .cat-ctx-item.danger:hover { background: rgba(248,81,73,.1); }
    .cat-ctx-item.danger i { color: var(--ss-danger); }
    .cat-ctx-sep { height: 1px; background: var(--ss-border); margin: 4px 0; }
    .cat-ctx-label {
      padding: 5px 14px 3px; font-size: 9px; font-weight: 800;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--ss-muted); pointer-events: none;
    }

    /* ── Detail area ──────────────────────────────────────────── */
    .cat-detail {
      flex: 1; display: flex; flex-direction: column; overflow: hidden;
    }
    .cat-detail-empty {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 10px; color: var(--ss-muted);
    }
    .cat-detail-empty i { font-size: 36px; opacity: .25; }
    .cat-detail-empty p { font-size: 13px; opacity: .5; }

    /* Detail header */
    .cat-detail-header {
      padding: 12px 18px 10px;
      border-bottom: 1px solid var(--ss-border);
      flex-shrink: 0; background: var(--ss-surface);
    }
    .cat-detail-top {
      display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
    }
    .cat-detail-code {
      font-size: 10px; font-weight: 900; letter-spacing: .08em;
      color: var(--ss-accent, #58a6ff); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 25%, transparent); border-radius: 5px;
      padding: 2px 8px;
    }
    .cat-detail-name {
      font-size: 16px; font-weight: 800; color: #e6edf3; flex: 1;
    }
    .cat-parent-crumb {
      font-size: 10px; color: var(--ss-muted);
      background: rgba(255,255,255,.04); border: 1px solid var(--ss-border2);
      border-radius: 4px; padding: 2px 8px; cursor: pointer;
      display: none; align-items: center; gap: 5px;
      transition: color .15s;
    }
    .cat-parent-crumb:hover { color: var(--ss-accent, #58a6ff); }
    .cat-parent-crumb.visible { display: inline-flex; }
    .cat-status-badge {
      font-size: 9px; font-weight: 800; padding: 2px 8px;
      border-radius: 20px; letter-spacing: .04em;
    }
    .cat-status-active { background: rgba(63,185,80,.15); color: #3fb950; border: 1px solid rgba(63,185,80,.3); }
    .cat-status-disc   { background: rgba(248,81,73,.12); color: #f85149; border: 1px solid rgba(248,81,73,.3); }
    .cat-detail-meta {
      display: flex; gap: 14px; flex-wrap: wrap;
    }
    .cat-meta-item { font-size: 10px; color: var(--ss-muted); }
    .cat-meta-item span { color: var(--ss-text); font-weight: 600; }

    /* ── Edit Mode button ─────────────────────────────────────── */
    .cat-edit-mode-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 12px; border-radius: 6px; font-size: 11px;
      font-weight: 700; font-family: var(--ss-font); cursor: pointer;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04); color: var(--ss-muted);
      transition: all .18s; white-space: nowrap;
    }
    .cat-edit-mode-btn:hover {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
      color: var(--ss-accent, #58a6ff);
    }
    .cat-edit-mode-btn.editing {
      background: rgba(63,185,80,.1); border-color: rgba(63,185,80,.35);
      color: #3fb950;
    }
    .cat-edit-mode-btn.editing i { color: #3fb950; }
    .cat-delete-btn {
      display: none; align-items: center; gap: 6px;
      padding: 5px 12px; border-radius: 6px; font-size: 11px;
      font-weight: 700; font-family: var(--ss-font); cursor: pointer;
      border: 1px solid rgba(248,81,73,.25);
      background: rgba(248,81,73,.06); color: var(--ss-danger);
      transition: all .18s;
    }
    .cat-delete-btn:hover { background: rgba(248,81,73,.14); }
    .cat-delete-btn.visible { display: flex; }

    /* Detail tabs */
    .cat-detail-tabs {
      display: flex; gap: 0;
      border-bottom: 1px solid var(--ss-border);
      background: var(--ss-surface2); flex-shrink: 0;
    }
    .cat-dtab {
      padding: 8px 14px; font-size: 11px; font-weight: 700;
      color: var(--ss-muted); cursor: pointer; border: none;
      background: transparent; border-bottom: 2px solid transparent;
      transition: color .15s, border-color .15s;
      display: flex; align-items: center; gap: 5px;
    }
    .cat-dtab:hover { color: var(--ss-text); }
    .cat-dtab.active { color: var(--ss-accent, #58a6ff); border-bottom-color: var(--ss-accent, #58a6ff); }

    /* Detail content */
    .cat-detail-body { flex: 1; overflow: auto; padding: 16px 18px; }
    .cat-dpanel { display: none; }
    .cat-dpanel.active { display: block; }

    /* Specs form */
    .cat-specs-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
      margin-bottom: 14px;
    }
    .cat-field { display: flex; flex-direction: column; gap: 4px; }
    .cat-field label {
      font-size: 9px; font-weight: 800; letter-spacing: .08em;
      text-transform: uppercase; color: var(--ss-muted);
    }
    .cat-field input, .cat-field select {
      background: var(--ss-surface3); border: 1px solid var(--ss-border);
      border-radius: 6px; padding: 6px 10px; color: var(--ss-text);
      font-size: 12px; font-family: var(--ss-font); outline: none;
      width: 100%;
    }
    .cat-field input:focus, .cat-field select:focus { border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent); }
    .cat-field input[readonly], .cat-field select[disabled] { opacity: .5; cursor: default; }
    .cat-save-row {
      display: flex; align-items: center; gap: 10px;
      padding-top: 12px; border-top: 1px solid var(--ss-border);
      margin-top: 4px;
    }
    .cat-btn-save {
      background: linear-gradient(135deg, #1a7f37, #2da44e);
      border: 1px solid rgba(63,185,80,.4); color: #fff;
      border-radius: 7px; padding: 6px 16px; font-size: 12px;
      font-weight: 700; cursor: pointer; transition: filter .15s;
    }
    .cat-btn-save:hover { filter: brightness(1.1); }
    .cat-btn-save:disabled { opacity: .4; cursor: default; }
    .cat-save-msg { font-size: 11px; opacity: 0; transition: opacity .3s; }
    .cat-save-msg.ok  { color: #3fb950; opacity: 1; }
    .cat-save-msg.err { color: #f85149; opacity: 1; }

    /* Quill editor wrapper */
    .cat-editor-wrap { margin-bottom: 14px; }
    .cat-editor-wrap .ql-toolbar {
      background: var(--ss-surface3); border-color: var(--ss-border);
      border-radius: 6px 6px 0 0;
    }
    .cat-editor-wrap .ql-container {
      background: var(--ss-surface3); border-color: var(--ss-border);
      border-radius: 0 0 6px 6px; min-height: 180px;
      color: var(--ss-text); font-family: var(--ss-font); font-size: 13px;
    }
    .cat-editor-wrap .ql-toolbar .ql-stroke { stroke: var(--ss-muted); }
    .cat-editor-wrap .ql-toolbar .ql-fill   { fill: var(--ss-muted); }
    .cat-editor-wrap .ql-toolbar button:hover .ql-stroke { stroke: var(--ss-accent, #58a6ff); }
    .cat-editor-wrap .ql-toolbar .ql-active .ql-stroke  { stroke: var(--ss-accent, #58a6ff); }
    .cat-readonly .ql-toolbar { display: none; }
    .cat-readonly .ql-container { border-radius: 6px; border-top: 1px solid var(--ss-border); }

    /* Comments */
    .cat-comment-input-wrap { display: flex; gap: 8px; margin-bottom: 14px; }
    .cat-comment-input {
      flex: 1; background: var(--ss-surface3);
      border: 1px solid var(--ss-border); border-radius: 8px;
      padding: 8px 12px; color: var(--ss-text); font-size: 12px;
      font-family: var(--ss-font); resize: vertical; min-height: 60px; outline: none;
    }
    .cat-comment-input:focus { border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent); }
    .cat-btn-comment {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
      color: var(--ss-accent, #58a6ff); border-radius: 8px; padding: 0 14px;
      font-size: 12px; font-weight: 700; cursor: pointer; align-self: flex-end;
      height: 36px; white-space: nowrap; transition: background .15s;
    }
    .cat-btn-comment:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 22%, transparent); }
    .cat-comment-list { display: flex; flex-direction: column; gap: 8px; }
    .cat-comment-card {
      background: var(--ss-surface2); border: 1px solid var(--ss-border);
      border-radius: 10px; padding: 10px 12px; transition: opacity .3s;
    }
    .cat-comment-card.acknowledged { opacity: .45; border-color: var(--ss-border2); }
    .cat-comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .cat-comment-avatar {
      width: 22px; height: 22px; border-radius: 6px;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent); color: var(--ss-accent, #58a6ff);
      font-size: 9px; font-weight: 800;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .cat-comment-author { font-size: 11px; font-weight: 700; color: #e6edf3; flex: 1; }
    .cat-comment-time   { font-size: 9px; color: var(--ss-muted); }
    .cat-comment-body   { font-size: 12px; color: var(--ss-text); line-height: 1.5; }
    .cat-comment-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
    .cat-ack-badge {
      font-size: 9px; font-weight: 700; color: #3fb950;
      display: flex; align-items: center; gap: 4px;
    }
    .cat-btn-ack {
      font-size: 10px; font-weight: 700; color: #3fb950;
      background: rgba(63,185,80,.1); border: 1px solid rgba(63,185,80,.25);
      border-radius: 5px; padding: 2px 9px; cursor: pointer; transition: background .15s;
    }
    .cat-btn-ack:hover { background: rgba(63,185,80,.2); }

    /* History */
    .cat-history-row {
      display: flex; gap: 10px; align-items: flex-start;
      padding: 7px 0; border-bottom: 1px solid var(--ss-border2); font-size: 11px;
    }
    .cat-history-row:last-child { border-bottom: none; }
    .cat-history-time  { color: var(--ss-muted); white-space: nowrap; flex-shrink: 0; width: 130px; }
    .cat-history-who   { color: var(--ss-accent, #58a6ff); font-weight: 700; flex-shrink: 0; width: 100px; }
    .cat-history-field { color: var(--ss-warn); font-weight: 700; flex-shrink: 0; width: 90px; }
    .cat-history-val   { color: var(--ss-text); flex: 1; min-width: 0; }

    /* ══════════════════════════════════════════════════════════════
       PRODUCT CONTROLLERS — enterprise rebuild (2026-07-06)
       Additive/override styles. Token-based → auto light/dark.
    ══════════════════════════════════════════════════════════════ */
    /* Sidebar rows — controller NAME dominant, item code = eyebrow */
    .cat-item-row { gap: 8px; padding: 8px 12px; align-items: center; }
    .cat-row-icon {
      width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 11px;
    }
    .cat-item-row.is-series .cat-row-icon { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 14%, transparent); color: var(--ss-accent, #58a6ff); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 28%, transparent); }
    .cat-item-row.is-child  .cat-row-icon { background: rgba(162,118,247,.12); color: #a371f7; border: 1px solid rgba(162,118,247,.22); width: 22px; height: 22px; font-size: 10px; }
    .cat-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .cat-row-name {
      font-size: 12.5px; font-weight: 800; color: var(--ss-text); letter-spacing: -.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
    }
    .cat-item-row.is-child .cat-row-name { font-size: 11.5px; font-weight: 700; }
    .cat-row-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .cat-row-sub-txt { font-size: 9.5px; color: var(--ss-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cat-item-code {
      font-size: 8.5px; font-weight: 800; letter-spacing: .05em; flex-shrink: 0;
      color: var(--ss-accent, #58a6ff); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent); border-radius: 4px; padding: 1px 5px;
    }
    .cat-item-row.is-child .cat-item-code { color: rgba(163,113,247,.9); background: rgba(162,118,247,.1); }

    /* Detail header — dominant name + eyebrow code */
    .cat-idblock { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .cat-detail-code {
      font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
      color: var(--ss-accent, #58a6ff); background: none; border: none; padding: 0;
    }
    .cat-detail-name { font-size: 21px; font-weight: 900; color: var(--ss-text); letter-spacing: -.02em; line-height: 1.15; }

    /* Dynamic tab bar extras */
    .cat-detail-tabs { overflow-x: auto; scrollbar-width: thin; }
    .cat-dtab { white-space: nowrap; }
    .cat-dtab-badge {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); color: var(--ss-accent, #58a6ff); border-radius: 10px;
      padding: 0 6px; font-size: 9px; margin-left: 4px; font-weight: 800;
    }
    .cat-dtab-count { color: var(--ss-muted); font-size: 9px; margin-left: 4px; font-weight: 800; opacity: .7; }
    .cat-dtab.is-custom { font-style: normal; }
    .cat-dtab-del { margin-left: 6px; color: var(--ss-muted); font-size: 13px; line-height: 1; border-radius: 4px; padding: 0 3px; }
    .cat-dtab-del:hover { color: #f85149; background: rgba(248,81,73,.12); }
    .cat-dtab-add {
      padding: 8px 12px; font-size: 11px; font-weight: 700; border: none; cursor: pointer;
      background: transparent; color: var(--ss-accent, #58a6ff); border-bottom: 2px solid transparent;
      display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    }
    .cat-dtab-add:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent); }

    /* Sticky edit-actions bar */
    .cat-edit-actions {
      display: flex; align-items: center; gap: 10px; flex-shrink: 0;
      padding: 10px 18px; border-top: 1px solid var(--ss-border);
      background: var(--ss-surface2);
    }
    .cat-btn-cancel-edit {
      background: rgba(255,255,255,.04); border: 1px solid var(--ss-border);
      color: var(--ss-muted); border-radius: 7px; padding: 6px 14px; font-size: 12px;
      font-weight: 700; font-family: var(--ss-font); cursor: pointer; transition: all .15s;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .cat-btn-cancel-edit:hover { color: var(--ss-text); background: rgba(255,255,255,.07); }
    .cat-edit-hint { font-size: 10px; color: var(--ss-muted); display: inline-flex; align-items: center; gap: 6px; }
    .cat-edit-hint i { color: #d29922; }

    /* Content sections */
    .cat-sec { margin-bottom: 20px; }
    .cat-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
    .cat-sec-title {
      font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
      color: var(--ss-text); display: inline-flex; align-items: center; gap: 8px;
    }
    .cat-sec-title i { color: var(--ss-accent, #58a6ff); font-size: 12px; }
    .cat-auto-tag {
      font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
      color: #3fb950; background: rgba(63,185,80,.12); border-radius: 4px; padding: 1px 5px; margin-left: 4px;
    }

    /* Add-block toolbar */
    .cat-addblk { display: inline-flex; gap: 6px; flex-wrap: wrap; }
    .cat-addblk-btn {
      font-size: 10.5px; font-weight: 700; font-family: var(--ss-font); cursor: pointer;
      color: var(--ss-accent, #58a6ff); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 22%, transparent);
      border-radius: 6px; padding: 4px 9px; display: inline-flex; align-items: center; gap: 5px; transition: all .15s;
    }
    .cat-addblk-btn:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 16%, transparent); }

    /* Read-view core grid */
    .cat-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ss-border2); border: 1px solid var(--ss-border2); border-radius: 10px; overflow: hidden; }
    .cat-vrow { background: var(--ss-surface); padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; }
    .cat-vlabel { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ss-muted); }
    .cat-vval { font-size: 13px; font-weight: 600; color: var(--ss-text); word-break: break-word; }
    .cat-vempty { color: var(--ss-muted); opacity: .6; }

    /* Series summary hero */
    .cat-series-hero {
      background: linear-gradient(180deg, color-mix(in srgb, var(--ss-accent, #58a6ff) 6%, transparent), transparent);
      border: 1px solid var(--ss-border); border-radius: 12px; padding: 16px; margin-bottom: 20px;
    }
    .cat-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
    .cat-stat { display: flex; align-items: center; gap: 10px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 10px; padding: 12px; }
    .cat-stat-ico { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
    .cat-stat.tone-blue   .cat-stat-ico { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 14%, transparent); color: var(--ss-accent, #58a6ff); }
    .cat-stat.tone-green  .cat-stat-ico { background: rgba(63,185,80,.14); color: #3fb950; }
    .cat-stat.tone-red    .cat-stat-ico { background: rgba(248,81,73,.14); color: #f85149; }
    .cat-stat.tone-purple .cat-stat-ico { background: rgba(162,118,247,.14); color: #a371f7; }
    .cat-stat-main { min-width: 0; }
    .cat-stat-val { font-size: 20px; font-weight: 900; color: var(--ss-text); line-height: 1; }
    .cat-stat-label { font-size: 9.5px; font-weight: 700; color: var(--ss-muted); letter-spacing: .03em; margin-top: 3px; }

    /* Models table */
    .cat-models-wrap { border: 1px solid var(--ss-border); border-radius: 10px; overflow: hidden; }
    .cat-models { width: 100%; border-collapse: collapse; font-size: 12px; }
    .cat-models thead th {
      text-align: left; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
      color: var(--ss-muted); padding: 9px 12px; background: var(--ss-surface2); border-bottom: 1px solid var(--ss-border);
    }
    .cat-models tbody tr { cursor: pointer; transition: background .12s; border-bottom: 1px solid var(--ss-border2); }
    .cat-models tbody tr:last-child { border-bottom: none; }
    .cat-models tbody tr:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 7%, transparent); }
    .cat-models td { padding: 9px 12px; color: var(--ss-text); vertical-align: middle; }
    .cat-mt-code { font-family: var(--ss-mono, monospace); font-size: 10px; font-weight: 800; color: var(--ss-accent, #58a6ff); white-space: nowrap; }
    .cat-mt-name { font-weight: 800; }
    .cat-mt-go { text-align: right; color: var(--ss-muted); width: 26px; }
    .cat-mt-empty { text-align: center; color: var(--ss-muted); padding: 20px; cursor: default; }
    .cat-models tbody tr:has(.cat-mt-empty):hover { background: transparent; }

    /* Rich-text view + editor */
    .cat-rich-view { font-size: 13px; line-height: 1.6; color: var(--ss-text); word-break: break-word; }
    .cat-rich-view.empty { color: var(--ss-muted); opacity: .55; font-style: italic; }
    .cat-rich-view a { color: var(--ss-accent, #58a6ff); }
    .cat-rich-view ul, .cat-rich-view ol { padding-left: 20px; margin: 6px 0; }
    .cat-rt-wrap { border: 1px solid var(--ss-border); border-radius: 8px; overflow: hidden; background: var(--ss-surface3); }
    .cat-rt-toolbar { display: flex; align-items: center; gap: 2px; padding: 5px 6px; background: var(--ss-surface2); border-bottom: 1px solid var(--ss-border); }
    .cat-rt-btn {
      width: 26px; height: 26px; border-radius: 5px; border: none; background: transparent;
      color: var(--ss-muted); cursor: pointer; font-size: 11px; transition: all .12s;
    }
    .cat-rt-btn:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 14%, transparent); color: var(--ss-accent, #58a6ff); }
    .cat-rt-sep { width: 1px; height: 16px; background: var(--ss-border); margin: 0 3px; }
    .cat-rt { min-height: 120px; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--ss-text); outline: none; }
    .cat-rt:empty:before { content: attr(data-placeholder); color: var(--ss-muted); opacity: .55; }
    .cat-rt ul, .cat-rt ol { padding-left: 20px; }

    /* Dynamic blocks */
    .cat-blocks { display: flex; flex-direction: column; gap: 12px; }
    .cat-blocks-empty {
      font-size: 12px; color: var(--ss-muted); background: var(--ss-surface2);
      border: 1px dashed var(--ss-border); border-radius: 10px; padding: 16px; text-align: center;
    }
    .cat-blocks-empty i { color: var(--ss-accent, #58a6ff); margin-right: 6px; }
    .cat-blk { position: relative; border: 1px solid var(--ss-border); border-radius: 9px; padding: 12px 12px 12px 14px; background: var(--ss-surface); }
    .cat-blk-ctrl { position: absolute; top: 8px; right: 8px; display: flex; gap: 3px; }
    .cat-blk-mini {
      width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--ss-border);
      background: var(--ss-surface2); color: var(--ss-muted); cursor: pointer; font-size: 9px; transition: all .12s;
    }
    .cat-blk-mini:hover:not(:disabled) { color: var(--ss-accent, #58a6ff); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent); }
    .cat-blk-mini.danger:hover:not(:disabled) { color: #f85149; border-color: rgba(248,81,73,.3); background: rgba(248,81,73,.08); }
    .cat-blk-mini:disabled { opacity: .3; cursor: default; }

    /* Field block */
    .cat-fld { display: flex; flex-direction: column; gap: 4px; }
    .cat-fld-label { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-muted); }
    .cat-fld-val { font-size: 13.5px; font-weight: 600; color: var(--ss-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .cat-code-chip {
      font-size: 9px; font-weight: 800; letter-spacing: .04em; font-family: var(--ss-mono, monospace);
      color: var(--ss-accent, #58a6ff); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
      border-radius: 5px; padding: 1px 6px; white-space: nowrap;
    }
    .cat-code-miss { font-size: 11px; font-weight: 700; color: #d29922; display: inline-flex; align-items: center; gap: 5px; }
    .cat-fld-edit { display: flex; flex-direction: column; gap: 6px; padding-right: 80px; }
    .cat-fld-lin, .cat-fld-vin {
      background: var(--ss-surface3); border: 1px solid var(--ss-border); border-radius: 6px;
      padding: 6px 10px; color: var(--ss-text); font-size: 12px; font-family: var(--ss-font); outline: none; width: 100%;
    }
    .cat-fld-lin:focus, .cat-fld-vin:focus { border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent); }
    .cat-fld-lin { font-weight: 700; }
    .cat-fld-unbound { display: flex; gap: 6px; align-items: center; }
    .cat-fld-bound { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: color-mix(in srgb, var(--ss-accent, #58a6ff) 5%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 18%, transparent); border-radius: 6px; padding: 6px 10px; }
    .cat-fld-bound-val { font-size: 12.5px; font-weight: 600; color: var(--ss-text); flex: 1; min-width: 0; }
    .cat-fld-bound-val em { color: #d29922; font-style: normal; }
    .cat-code-btn {
      font-size: 10.5px; font-weight: 700; font-family: var(--ss-font); cursor: pointer; white-space: nowrap;
      color: var(--ss-accent, #58a6ff); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 25%, transparent);
      border-radius: 6px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px; transition: all .15s;
    }
    .cat-code-btn:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); }
    .cat-code-btn.unlink { color: var(--ss-muted); background: rgba(255,255,255,.04); border-color: var(--ss-border); }
    .cat-code-btn.unlink:hover { color: #f85149; border-color: rgba(248,81,73,.3); }

    /* Image block */
    .cat-img { margin: 0; position: relative; border-radius: 9px; overflow: hidden; border: 1px solid var(--ss-border); background: var(--ss-surface2); }
    .cat-img img { display: block; max-width: 100%; max-height: 420px; margin: 0 auto; }
    .cat-img img.broken { display: none; }
    .cat-img.broken:before { content: "\f127  Image link unavailable"; font-family: "Font Awesome 6 Free", var(--ss-font); font-weight: 900; display: block; padding: 24px; text-align: center; color: var(--ss-muted); font-size: 12px; }
    .cat-img figcaption { padding: 8px 12px; font-size: 11px; color: var(--ss-muted); border-top: 1px solid var(--ss-border); }
    .cat-img-open { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 7px; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; }
    .cat-img-edit { display: flex; gap: 12px; align-items: flex-start; }
    .cat-img-prev { width: 90px; height: 90px; border-radius: 8px; object-fit: cover; border: 1px solid var(--ss-border); background: var(--ss-surface3); flex-shrink: 0; }
    .cat-img-prev.empty { display: flex; align-items: center; justify-content: center; color: var(--ss-muted); font-size: 22px; }
    .cat-img-inputs { flex: 1; display: flex; flex-direction: column; gap: 6px; }

    /* Heading block */
    .cat-blk-heading { font-size: 14px; font-weight: 800; color: var(--ss-text); margin: 0; letter-spacing: -.01em; }
    .cat-heading-in {
      background: var(--ss-surface3); border: 1px solid var(--ss-border); border-radius: 6px;
      padding: 8px 12px; color: var(--ss-text); font-size: 14px; font-weight: 800; font-family: var(--ss-font); outline: none; width: calc(100% - 80px);
    }
    .cat-heading-in:focus { border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent); }

    /* Files */
    .cat-files { display: flex; flex-direction: column; gap: 8px; }
    .cat-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ss-border); border-radius: 9px; background: var(--ss-surface); text-decoration: none; transition: all .14s; }
    .cat-file:hover { border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 5%, transparent); }
    .cat-file-ico { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; background: var(--ss-surface2); }
    .cat-file-pdf  { color: #f85149; } .cat-file-doc { color: var(--ss-accent, #58a6ff); } .cat-file-xls { color: #3fb950; }
    .cat-file-ppt  { color: #f0883e; } .cat-file-img { color: #a371f7; } .cat-file-zip { color: #d29922; }
    .cat-file-sp   { color: #22d3ee; } .cat-file-link { color: var(--ss-muted); }
    .cat-file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .cat-file-name { font-size: 12.5px; font-weight: 700; color: var(--ss-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cat-file-url { font-size: 10px; color: var(--ss-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cat-file-open { color: var(--ss-muted); font-size: 12px; flex-shrink: 0; }
    .cat-file:hover .cat-file-open { color: var(--ss-accent, #58a6ff); }
    .cat-file-edit { display: flex; align-items: center; gap: 8px; }
    .cat-file-edit .cat-fld-vin:first-of-type { max-width: 220px; }

    /* Auto item-code preview bar (modals) */
    .cat-code-preview-bar {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 7%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 22%, transparent);
      border-radius: 9px; padding: 10px 14px; margin-bottom: 14px;
    }
    .cat-code-preview-bar.purple { background: rgba(162,118,247,.07); border-color: rgba(162,118,247,.22); }
    .cat-code-preview-label { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ss-muted); display: inline-flex; align-items: center; gap: 5px; }
    .cat-code-preview-val { font-size: 16px; font-weight: 900; font-family: var(--ss-mono, monospace); color: var(--ss-accent, #58a6ff); letter-spacing: .02em; }
    .cat-code-preview-bar.purple .cat-code-preview-val { color: #a371f7; }
    .cat-code-preview-hint { font-size: 10px; color: var(--ss-muted); }

    /* Icon picker grid (Add Tab modal) */
    .cat-icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
    .cat-icon-pick {
      height: 38px; border-radius: 8px; border: 1px solid var(--ss-border); background: var(--ss-surface3);
      color: var(--ss-muted); cursor: pointer; font-size: 14px; transition: all .14s;
    }
    .cat-icon-pick:hover { color: var(--ss-text); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent); }
    .cat-icon-pick.active { color: var(--ss-accent, #58a6ff); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 14%, transparent); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 50%, transparent); }

    /* Modals — shared base */
    .cat-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.65);
      z-index: 9000; display: none; align-items: center; justify-content: center;
    }
    .cat-modal-overlay.open { display: flex; }
    .cat-modal {
      background: var(--ss-surface); border: 1px solid var(--ss-border);
      border-radius: 14px; padding: 20px 24px; width: min(480px, 94vw);
      box-shadow: 0 24px 60px rgba(0,0,0,.5);
      animation: modalIn .18s ease;
    }
    @keyframes modalIn {
      from { opacity: 0; transform: scale(.96) translateY(8px); }
      to   { opacity: 1; transform: scale(1)  translateY(0); }
    }
    .cat-modal-title {
      font-size: 14px; font-weight: 800; color: #e6edf3;
      margin-bottom: 16px; display: flex; align-items: center;
      justify-content: space-between;
    }
    .cat-modal-close {
      background: none; border: none; color: var(--ss-muted);
      cursor: pointer; font-size: 16px; padding: 2px 6px;
    }
    .cat-modal-close:hover { color: var(--ss-text); }
    .cat-modal-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      margin-bottom: 14px;
    }
    .cat-modal-full { grid-column: 1 / -1; }
    .cat-modal-btns {
      display: flex; justify-content: flex-end; gap: 8px;
      padding-top: 12px; border-top: 1px solid var(--ss-border);
      align-items: center;
    }
    .cat-btn-cancel {
      background: var(--ss-surface3); border: 1px solid var(--ss-border);
      color: var(--ss-text); border-radius: 7px; padding: 6px 14px;
      font-size: 12px; font-weight: 700; cursor: pointer;
    }
    .cat-modal-field-style {
      background: var(--ss-surface3); border: 1px solid var(--ss-border);
      border-radius: 6px; padding: 6px 10px; color: var(--ss-text);
      font-size: 12px; width: 100%; outline: none; font-family: var(--ss-font);
    }
    .cat-modal-field-style:focus { border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent); }

    /* Empty states */
    .cat-panel-empty {
      text-align: center; color: var(--ss-muted); padding: 32px 16px;
      font-size: 12px; opacity: .6;
    }

    /* ─────────────────────────────────────────────────────────────────
       CONNECT+ & PARTS NUMBER — PREMIUM SIDEBAR STYLES v35
       Matches mockup exactly: compact header, stats pills, search,
       active-filter badge, section labels, filter list buttons
    ───────────────────────────────────────────────────────────────── */

    /* Section identity header */
    .prem-sb-header {
      padding: 12px 12px 10px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      flex-shrink: 0;
    }
    .prem-sb-identity {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 9px;
    }
    .prem-sb-icon {
      width: 26px; height: 26px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .prem-sb-icon i { color: #fff; font-size: 11px; }
    .prem-sb-icon.cyan  { background: linear-gradient(135deg,#0891b2,#22d3ee); box-shadow: 0 2px 8px rgba(34,211,238,.28); }
    .prem-sb-icon.orange{ background: linear-gradient(135deg,#c2410c,#fb923c); box-shadow: 0 2px 8px rgba(251,146,60,.28); }
    .prem-sb-title { font-size: 12px; font-weight: 800; color: #fff; line-height: 1; }
    .prem-sb-sub   { font-size: 9px; color: var(--ss-muted); margin-top: 2px; font-weight: 500; line-height: 1.3; }

    /* Stats mini grid */
    .prem-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
    .prem-stat-pill  { border-radius: 6px; padding: 6px 8px; text-align: center; }
    .prem-stat-pill.cyan  { background: rgba(34,211,238,.07);  border: 1px solid rgba(34,211,238,.14); }
    .prem-stat-pill.green { background: rgba(63,185,80,.07);   border: 1px solid rgba(63,185,80,.14); }
    .prem-stat-pill.orange{ background: rgba(251,146,60,.07);  border: 1px solid rgba(251,146,60,.14); }
    .prem-stat-pill.purple{ background: rgba(167,139,250,.07); border: 1px solid rgba(167,139,250,.14); }
    .prem-stat-num  { font-size: 14px; font-weight: 800; line-height: 1.1; }
    .prem-stat-num.cyan   { color: var(--ss-cyan); }
    .prem-stat-num.green  { color: var(--ss-green); }
    .prem-stat-num.orange { color: var(--ss-orange); }
    .prem-stat-num.purple { color: #a78bfa; }
    .prem-stat-lbl  { font-size: 8px; color: rgba(255,255,255,.3); margin-top: 2px; font-weight: 500; letter-spacing: .01em; }

    /* Sidebar search */
    .prem-sb-search { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
    .prem-search-wrap { position: relative; }
    .prem-search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--ss-muted); font-size: 10px; pointer-events: none; }
    .prem-search-inp {
      width: 100%; background: rgba(0,0,0,.4); border: 1.5px solid rgba(255,255,255,.09);
      border-radius: 6px; padding: 6px 26px; color: #fff; font-size: 11px;
      font-family: var(--ss-font); outline: none; transition: border-color .15s;
    }
    .prem-search-inp::placeholder { color: var(--ss-muted); }
    .prem-search-inp.cyan:focus   { border-color: rgba(34,211,238,.5); }
    .prem-search-inp.orange:focus { border-color: rgba(251,146,60,.5); }
    .prem-search-clear {
      display: none; position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: var(--ss-muted); cursor: pointer;
      font-size: 10px; padding: 0; line-height: 1;
    }
    .prem-search-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
    .prem-search-status, .prem-search-count { font-size: 9px; color: var(--ss-muted); }

    /* Active filter badge */
    .prem-active-filter {
      display: none; margin: 6px 10px 0; align-items: center; gap: 5px;
      border-radius: 5px; padding: 4px 8px; font-size: 10px; flex-shrink: 0;
    }
    .prem-active-filter.cyan  { background: rgba(34,211,238,.07);  border: 1px solid rgba(34,211,238,.22);  color: var(--ss-cyan); }
    .prem-active-filter.orange{ background: rgba(251,146,60,.07);  border: 1px solid rgba(251,146,60,.22);  color: var(--ss-orange); }
    .prem-active-filter i { font-size: 8px; opacity: .7; flex-shrink: 0; }
    .prem-active-filter span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 10px; }
    .prem-active-filter button { background: none; border: none; cursor: pointer; font-size: 10px; padding: 0; opacity: .7; flex-shrink: 0; line-height: 1; }
    .prem-active-filter.cyan button  { color: var(--ss-cyan); }
    .prem-active-filter.orange button{ color: var(--ss-orange); }

    /* Section heading rows */
    .prem-section-head { padding: 8px 10px 4px; flex-shrink: 0; }
    .prem-section-head.has-border { border-top: 1px solid rgba(255,255,255,.05); }
    .prem-section-row  { display: flex; align-items: center; justify-content: space-between; }
    .prem-section-lbl  { font-size: 8px; font-weight: 700; color: rgba(255,255,255,.26); letter-spacing: .1em; text-transform: uppercase; }
    .prem-section-toggle { background: none; border: none; color: rgba(255,255,255,.26); cursor: pointer; font-size: 8px; padding: 0; }

    /* Filter list */
    .prem-filter-list  { overflow-y: auto; padding: 0 6px 6px; display: flex; flex-direction: column; gap: 1px; }

    /* Filter button — base */
    .prem-filter-btn {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      background: transparent; border: 1px solid transparent; border-radius: 5px;
      padding: 4px 6px; cursor: pointer; font-family: var(--ss-font);
      gap: 5px; text-align: left; transition: all .12s;
    }
    .prem-filter-inner { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
    .prem-filter-ico   { width: 17px; height: 17px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .prem-filter-ico i { font-size: 7px; }
    .prem-filter-lbl   { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
    .prem-filter-cnt   { font-size: 8px; font-weight: 600; border-radius: 8px; padding: 1px 5px; flex-shrink: 0; }

    /* CYAN variant (Connect+) */
    .prem-filter-btn.cv:hover  { background: rgba(34,211,238,.04); border-color: rgba(34,211,238,.1); }
    .prem-filter-btn.cv.active { background: rgba(34,211,238,.09); border-color: rgba(34,211,238,.26); }
    .prem-filter-btn.cv .prem-filter-ico.active { background: rgba(34,211,238,.15); border: 1px solid rgba(34,211,238,.22); }
    .prem-filter-btn.cv .prem-filter-ico.idle   { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
    .prem-filter-btn.cv.active .prem-filter-lbl { color: var(--ss-cyan); font-weight: 700; }
    .prem-filter-btn.cv:not(.active) .prem-filter-lbl { color: var(--ss-muted); font-weight: 400; }
    .prem-filter-btn.cv.active .prem-filter-cnt { background: rgba(34,211,238,.12); color: var(--ss-cyan); }
    .prem-filter-btn.cv:not(.active) .prem-filter-cnt { background: rgba(255,255,255,.05); color: rgba(255,255,255,.27); }
    .prem-filter-btn.cv.active .prem-filter-ico i { color: var(--ss-cyan); }
    .prem-filter-btn.cv:not(.active) .prem-filter-ico.idle i { color: rgba(255,255,255,.3); }

    /* ORANGE variant (Parts Number) */
    .prem-filter-btn.ov:hover  { background: rgba(251,146,60,.04); border-color: rgba(251,146,60,.1); }
    .prem-filter-btn.ov.active { background: rgba(251,146,60,.09); border-color: rgba(251,146,60,.26); }
    .prem-filter-btn.ov .prem-filter-ico.active { background: rgba(251,146,60,.15); border: 1px solid rgba(251,146,60,.22); }
    .prem-filter-btn.ov .prem-filter-ico.idle   { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
    .prem-filter-btn.ov.active .prem-filter-lbl { color: var(--ss-orange); font-weight: 700; }
    .prem-filter-btn.ov:not(.active) .prem-filter-lbl { color: var(--ss-muted); font-weight: 400; }
    .prem-filter-btn.ov.active .prem-filter-cnt { background: rgba(251,146,60,.12); color: var(--ss-orange); }
    .prem-filter-btn.ov:not(.active) .prem-filter-cnt { background: rgba(255,255,255,.05); color: rgba(255,255,255,.27); }
    .prem-filter-btn.ov.active .prem-filter-ico i { color: var(--ss-orange); }
    .prem-filter-btn.ov:not(.active) .prem-filter-ico.idle i { color: rgba(255,255,255,.3); }

    /* Toolbar record count badge */
    .prem-count-badge {
      font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 700;
    }
    .prem-count-badge.cyan   { background: rgba(34,211,238,.1);  border: 1px solid rgba(34,211,238,.25);  color: var(--ss-cyan); }
    .prem-count-badge.orange { background: rgba(251,146,60,.1);  border: 1px solid rgba(251,146,60,.25);  color: var(--ss-orange); }
    .prem-tb-text { font-size: 10px; color: var(--ss-muted); }

    /* ── HD TABLE enhancements ──────────────────────────────────── */
    .prem-table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .prem-table thead th {
      padding: 7px 11px; text-align: left; font-size: 8px; font-weight: 800;
      letter-spacing: .08em; text-transform: uppercase; color: var(--ss-muted);
      white-space: nowrap; cursor: pointer; background: var(--ss-surface3);
      border-bottom: 1px solid var(--ss-border);
    }
    .prem-table thead th:hover { color: var(--ss-text); }
    .prem-table tbody tr { transition: background .08s; cursor: pointer; }
    .prem-table tbody td { padding: 6px 11px; border-bottom: 1px solid rgba(255,255,255,.025); }
    .prem-table.cyan  tbody tr:hover td { background: rgba(34,211,238,.035) !important; }
    .prem-table.orange tbody tr:hover td { background: rgba(251,146,60,.03) !important; }

    /* ── Right sidebar HD enhancements ─────────────────────────── */
    .ss-field-group { margin-bottom: 9px; }
    .ss-field-label {
      font-size: 8px; font-weight: 700; color: var(--ss-muted);
      letter-spacing: .07em; text-transform: uppercase; margin-bottom: 4px;
    }

    /* ── SR cat-btn hover HD ───────────────────────────────────── */
    .sr-cat-btn { transition: all .1s; }

    /* ── Left panels that are NOT cp/pn stay at flex display ────── */
    #left-panel-connectplus.active, #left-panel-parts_number.active, #left-panel-contact_information.active { display: flex; }

    /* ── Sidebar scrollbar tints per tab ────────────────────────── */
    #cp-sidebar-country-list::-webkit-scrollbar-thumb,
    #cp-sidebar-dir-list::-webkit-scrollbar-thumb { background: rgba(34,211,238,.15); }
    #pn-sidebar-cat-list::-webkit-scrollbar-thumb  { background: rgba(251,146,60,.15); }

    /* ── Mode badges HD ─────────────────────────────────────────── */
    .ss-mode-badge {
      padding: 3px 9px; border-radius: 999px; font-size: 9px; font-weight: 700;
      letter-spacing: .04em; display: inline-flex; align-items: center; gap: 4px;
    }

    /* ── Toolbar action buttons HD ──────────────────────────────── */
    .prem-tb-btn {
      background: rgba(255,255,255,.05); border: 1px solid var(--ss-border);
      color: var(--ss-muted); padding: 4px 10px; border-radius: 5px;
      font-size: 10px; font-weight: 600; font-family: var(--ss-font);
      cursor: pointer; display: flex; align-items: center; gap: 4px;
      transition: all .15s;
    }
    .prem-tb-btn:hover { background: rgba(255,255,255,.09); color: var(--ss-text); }
    .prem-tb-btn i { font-size: 9px; }

    /* ── Pagination HD ──────────────────────────────────────────── */
    .prem-pagination {
      flex-shrink: 0; padding: 7px 14px; background: var(--ss-surface);
      border-top: 1px solid var(--ss-border); display: flex; align-items: center; gap: 8px;
    }
    .prem-page-info { font-size: 10px; color: var(--ss-muted); flex: 1; }
    .prem-page-nav  {
      background: rgba(255,255,255,.05); border: 1px solid var(--ss-border);
      color: var(--ss-muted); padding: 4px 10px; border-radius: 5px;
      font-size: 10px; font-weight: 600; font-family: var(--ss-font); cursor: pointer;
    }
    .prem-page-num  {
      min-width: 26px; padding: 4px 6px; border-radius: 4px;
      font-size: 10px; font-weight: 700; font-family: var(--ss-font); cursor: pointer;
    }
    .prem-page-num.cyan  { border: 1px solid rgba(34,211,238,.4);  background: rgba(34,211,238,.12);  color: var(--ss-cyan); }
    .prem-page-num.orange{ border: 1px solid rgba(251,146,60,.4);  background: rgba(251,146,60,.12);  color: var(--ss-orange); }

    /* ── Right panel HD field labels ────────────────────────────── */
    #right-call-info .ss-panel-title {
      font-size: 9px; font-weight: 800; letter-spacing: .07em;
      color: #e6edf3; text-transform: uppercase; margin-bottom: 12px;
    }

    /* ── Support Records sidebar improvements ────────────────────── */
    #left-panel-support_records { display: none; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
    #left-panel-support_records.active { display: flex; }

    /* ── Canvas backgrounds improved ──────────────────────────────── */
    #canvas-connectplus, #canvas-parts_number, #canvas-contact_information, #canvas-support_records { background: var(--ss-bg); }

    /* ── SS input improvements ──────────────────────────────────── */
    .ss-input {
      width: 100%; padding: 6px 9px; background: var(--ss-surface3);
      border: 1px solid rgba(255,255,255,.1); border-radius: 5px;
      color: var(--ss-text); font-size: 11px; font-family: var(--ss-font);
      outline: none; transition: border-color .15s;
    }
    .ss-input:focus { border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent); }
    .ss-input::placeholder { color: rgba(255,255,255,.2); }

    /* ── Systems badge ──────────────────────────────────────────── */
    .cp-sys-badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 20px; height: 18px; background: rgba(63,185,80,.1);
      border: 1px solid rgba(63,185,80,.2); border-radius: 4px;
      color: var(--ss-green); font-size: 9px; font-weight: 800;
    }
    /* ── PN brand badge ─────────────────────────────────────────── */
    .pn-brand-badge {
      display: inline-flex; align-items: center; height: 18px;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent);
      border-radius: 4px; padding: 0 6px; color: var(--ss-accent, #58a6ff);
      font-size: 9px; font-weight: 700; font-family: var(--ss-mono);
    }
    .pn-partno { color: var(--ss-orange); font-weight: 700; font-size: 11px; font-family: var(--ss-mono); }
    .pn-desc   { color: var(--ss-text); font-size: 11px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cp-site-link { color: var(--ss-cyan); font-weight: 700; font-size: 11px; }
    .cp-open-btn  {
      display: inline-flex; align-items: center; gap: 4px; color: var(--ss-cyan);
      font-size: 9px; font-weight: 700; text-decoration: none;
      background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.2);
      border-radius: 4px; padding: 2px 7px;
    }

    /* ─────────────────────────────────────────────────────────────────
       END CP/PN PREMIUM STYLES
    ───────────────────────────────────────────────────────────────── */

    /* ── Single-body tab switching ─────────────────────────────── */
    .ss-canvas-inner { display: none !important; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; }
    .ss-canvas-inner.active { display: flex !important; }
    #left-panel-catalog  { display: none; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
    #left-panel-config   { display: none; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
    #left-panel-support_records { display: none; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
    #left-panel-catalog.active  { display: flex; }
    #left-panel-config.active   { display: flex; }

    .ci-note-card {
      background: var(--ss-surface3); border: 1px solid var(--ss-border);
      border-radius: 7px; padding: 6px 8px; font-size: 10px;
      color: var(--ss-text); cursor: pointer; transition: background .1s;
    }
    .ci-note-card:hover { background: rgba(255,255,255,.06); }
    .ci-note-time   { font-size: 9px; color: var(--ss-muted); margin-bottom: 2px; }
    .ci-note-caller { font-weight: 700; color: var(--ss-accent, #58a6ff); }
    .sqb-col-item:hover { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent) !important; }
    .sqb-col-item { transition: background .12s; }

    /* ── Cache Pulse Beacon Icon ─────────────────────────────── */
    @keyframes pulse         { 0%,100%{opacity:1} 50%{opacity:.35} }
    @keyframes beacon-expand { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(2.2);opacity:0} }
    @keyframes beacon-spin   { to{transform:rotate(360deg)} }
    @keyframes beacon-blink  { 0%,100%{opacity:1} 50%{opacity:.2} }
    @keyframes beacon-pop    { 0%{opacity:0;transform:translateY(-6px) scale(.96)} 100%{opacity:1;transform:none} }

    .ss-beacon { position:relative; width:32px; height:32px; cursor:pointer; flex-shrink:0; }
    .ss-beacon-circle {
      width:32px; height:32px; border-radius:50%;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
      display:flex; align-items:center; justify-content:center;
      position:relative; z-index:1; transition:background .2s,border-color .2s;
    }
    .ss-beacon-circle i { font-size:11px; color:var(--ss-muted,#7d8590); transition:color .2s; }
    .ss-beacon-dot {
      position:absolute; top:0; right:0; z-index:2;
      width:9px; height:9px; border-radius:50%;
      border:2px solid var(--ss-bg,#010409);
      background:var(--ss-muted,#7d8590); display:none;
    }
    .ss-beacon-ring {
      position:absolute; inset:-4px; border-radius:50%;
      border:2px solid transparent; display:none; z-index:0;
    }
    /* idle */
    .ss-beacon[data-state="idle"] .ss-beacon-circle i { color:#7d8590; }
    /* fresh */
    .ss-beacon[data-state="fresh"] .ss-beacon-circle { background:rgba(63,185,80,.07); border-color:rgba(63,185,80,.2); }
    .ss-beacon[data-state="fresh"] .ss-beacon-circle i { color:#3fb950; }
    .ss-beacon[data-state="fresh"] .ss-beacon-dot { display:block; background:#3fb950; box-shadow:0 0 5px #3fb950; }
    /* stale */
    .ss-beacon[data-state="stale"] .ss-beacon-circle { background:rgba(210,153,34,.08); border-color:rgba(210,153,34,.3); animation:beacon-blink 1.6s ease-in-out infinite; }
    .ss-beacon[data-state="stale"] .ss-beacon-circle i { color:#d29922; animation:beacon-blink 1.6s ease-in-out infinite; }
    .ss-beacon[data-state="stale"] .ss-beacon-dot { display:block; background:#d29922; animation:beacon-blink 1.6s ease-in-out infinite; }
    .ss-beacon[data-state="stale"] .ss-beacon-ring { display:block; border-color:rgba(210,153,34,.5); animation:beacon-expand 1.6s ease-out infinite; }
    /* syncing */
    .ss-beacon[data-state="syncing"] .ss-beacon-circle { background:rgba(88,166,255,.08); border-color:rgba(88,166,255,.25); }
    .ss-beacon[data-state="syncing"] .ss-beacon-circle i { color:#58a6ff; animation:beacon-spin 1.2s linear infinite; }
    .ss-beacon[data-state="syncing"] .ss-beacon-dot { display:block; background:#58a6ff; animation:beacon-blink .9s ease-in-out infinite; }
    .ss-beacon[data-state="syncing"] .ss-beacon-ring { display:block; border-color:rgba(88,166,255,.4); animation:beacon-expand 1.1s ease-out infinite; }
    /* critical */
    .ss-beacon[data-state="critical"] .ss-beacon-circle { background:rgba(248,81,73,.1); border-color:rgba(248,81,73,.4); animation:beacon-blink .65s ease-in-out infinite; }
    .ss-beacon[data-state="critical"] .ss-beacon-circle i { color:#f85149; animation:beacon-blink .65s ease-in-out infinite; }
    .ss-beacon[data-state="critical"] .ss-beacon-dot { display:block; background:#f85149; animation:beacon-blink .65s ease-in-out infinite; }
    .ss-beacon[data-state="critical"] .ss-beacon-ring { display:block; border-color:rgba(248,81,73,.6); animation:beacon-expand .75s ease-out infinite; }
    /* popup */
    #ss-beacon-popup {
      position:fixed; z-index:9998; top:52px; right:16px; width:276px;
      background:#0d1117; border:1px solid rgba(255,255,255,.1);
      border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04);
      display:none; overflow:hidden;
    }
    #ss-beacon-popup.open { display:block; animation:beacon-pop .18s ease; }
    .bp-head { padding:13px 15px 11px; background:rgba(255,255,255,.02); border-bottom:1px solid rgba(255,255,255,.07); display:flex; align-items:center; gap:10px; }
    .bp-head-ico { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .bp-title { font-size:12px; font-weight:800; color:#e6edf3; }
    .bp-sub   { font-size:10px; color:#7d8590; margin-top:1px; }
    .bp-row { padding:9px 13px; display:flex; align-items:center; gap:9px; border-bottom:1px solid rgba(255,255,255,.05); transition:background .12s; }
    .bp-row:last-child { border-bottom:none; }
    .bp-row:hover { background:rgba(255,255,255,.02); }
    .bp-ico { width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .bp-name { font-size:11px; font-weight:700; color:#e6edf3; }
    .bp-meta { font-size:9px; color:#7d8590; margin-top:1px; }
    .bp-tag  { margin-left:auto; font-size:9px; font-weight:800; padding:2px 7px; border-radius:4px; flex-shrink:0; }
    .bp-tag-fresh    { background:rgba(63,185,80,.1);  color:#3fb950; }
    .bp-tag-stale    { background:rgba(210,153,34,.1); color:#d29922; }
    .bp-tag-critical { background:rgba(248,81,73,.1);  color:#f85149; }
    .bp-tag-syncing  { background:color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent); color:var(--ss-accent, #58a6ff); }
    .bp-tag-none     { background:rgba(255,255,255,.05); color:#7d8590; }
    .bp-footer { padding:10px 13px 13px; display:flex; gap:7px; }
    .bp-btn-sync {
      flex:1; padding:9px; border-radius:7px;
      background:color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent); border:1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 25%, transparent);
      color:var(--ss-accent, #58a6ff); font-size:11px; font-weight:800; font-family:inherit; cursor:pointer;
      display:flex; align-items:center; justify-content:center; gap:6px; transition:background .15s;
    }
    .bp-btn-sync:hover { background:color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); }
    .bp-btn-sync:disabled { opacity:.5; cursor:not-allowed; }
    .bp-btn-close {
      padding:9px 11px; border-radius:7px;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
      color:#7d8590; font-size:11px; font-weight:600; font-family:inherit; cursor:pointer;
    }
    .bp-btn-close:hover { background:rgba(255,255,255,.08); color:#e6edf3; }
    /* ── END Cache Pulse Beacon ─────────────────────────────── */

    /* ═══════════════════════════════════════════════════════════════
       FLOATING CACHE NOTIFICATION TOASTS
       position:fixed — NEVER participates in flex layout.
       Root cause fix: old banner was a flex sibling inside .ss-body
       which caused it to squeeze/shift the sidebar+canvas on display.
    ═══════════════════════════════════════════════════════════════ */
    #ss-cache-toast-host {
      position: fixed;
      top: 54px;           /* sits just below the 46px header */
      left: 50%;
      transform: translateX(-50%);
      z-index: 9998;
      width: 580px;
      max-width: calc(100vw - 32px);
      display: flex;
      flex-direction: column;
      gap: 6px;
      pointer-events: none;  /* host is invisible click-through */
    }
    /* Individual toast cards */
    .ss-cache-toast {
      pointer-events: all;
      display: none;          /* hidden by default; JS uses flex */
      align-items: center;
      gap: 10px;
      padding: 11px 15px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 600;
      box-shadow: 0 10px 36px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
      animation: toastSlideIn .22s cubic-bezier(.34,1.4,.64,1) both;
    }
    .ss-cache-toast.toast-warn {
      background: rgba(18,14,2,.92);
      border: 1px solid rgba(210,153,34,.35);
      color: #f0c000;
      backdrop-filter: blur(12px);
    }
    .ss-cache-toast.toast-info {
      background: rgba(4,10,20,.92);
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 28%, transparent);
      color: var(--ss-text);
      backdrop-filter: blur(12px);
    }
    @keyframes toastSlideIn {
      from { opacity:0; transform:translateY(-14px) scale(.97); }
      to   { opacity:1; transform:translateY(0)     scale(1);   }
    }
    @keyframes toastSlideOut {
      from { opacity:1; transform:translateY(0)     scale(1);   }
      to   { opacity:0; transform:translateY(-10px) scale(.96); }
    }
    .ss-cache-toast.toast-hiding {
      animation: toastSlideOut .18s ease-in both !important;
    }
    /* Progress bar inside info toast */
    .toast-progress-track {
      flex: 1;
      height: 3px;
      background: rgba(255,255,255,.08);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 5px;
    }
    .toast-progress-fill {
      height: 100%;
      background: var(--ss-accent);
      border-radius: 2px;
      transition: width .3s ease;
    }
  

        /* ═══════════════════════════════════════════════════════════
           SE2 ENTERPRISE DESIGN v3.0 — Mockup Pixel-Perfect
           All IDs/functional elements preserved for JS compatibility
        ═══════════════════════════════════════════════════════════ */

        /* ── Root variables ── */
        #canvas-search_engine_2 {
          --se-bg0:   #0a0f1a;
          --se-bg1:   #111827;
          --se-glass: rgba(17,24,39,.85);
          --se-cyan:  #06b6d4;
          --se-blue:  #3b82f6;
          --se-purple:#8b5cf6;
          --se-green: #10b981;
          --se-amber: #f59e0b;
          --se-rose:  #f43f5e;
          --se-txt:   #f9fafb;
          --se-muted: #9ca3af;
          --se-border:rgba(255,255,255,.06);
          font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
        }

        /* ── Animated mesh background ── */
        #se2-bg-mesh {
          position:absolute;inset:0;pointer-events:none;z-index:0;
          background:
            radial-gradient(circle at 18% 50%, rgba(6,182,212,.13) 0%, transparent 50%),
            radial-gradient(circle at 82% 18%, rgba(139,92,246,.09) 0%, transparent 50%),
            radial-gradient(circle at 58% 82%, rgba(59,130,246,.09) 0%, transparent 50%),
            linear-gradient(135deg, #0a0f1a 0%, #1a1f2e 50%, #0f172a 100%);
        }

        /* ── Shell: 3-column layout ── */
        #se2-shell {
          display:flex; flex-direction:row; height:100%; overflow:hidden;
          position:relative; z-index:1;
        }

        /* ── LEFT PANEL: Advanced Filters ── */
        #se2-left-panel {
          width:264px; min-width:264px; flex-shrink:0;
          background:var(--se-glass);
          backdrop-filter:blur(20px);
          border-right:1px solid var(--se-border);
          display:flex; flex-direction:column;
          overflow-y:auto; padding:20px 16px;
          scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent;
        }
        #se2-left-panel::-webkit-scrollbar { width:3px; }
        #se2-left-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:99px; }

        .se2-lp-header {
          display:flex; align-items:center; justify-content:space-between;
          margin-bottom:20px; flex-shrink:0;
        }
        .se2-lp-title {
          font-size:11px; font-weight:700; text-transform:uppercase;
          letter-spacing:.1em; color:var(--se-muted);
          display:flex; align-items:center; gap:7px;
        }
        .se2-lp-reset {
          font-size:11px; color:var(--se-cyan); cursor:pointer;
          background:none; border:none; font-family:inherit; padding:0;
          transition:opacity .15s;
        }
        .se2-lp-reset:hover { opacity:.7; }

        .se2-filter-section { margin-bottom:22px; }
        .se2-filter-section-label {
          font-size:11px; font-weight:700; color:var(--se-cyan);
          margin-bottom:10px; display:flex; align-items:center; gap:6px;
          text-transform:uppercase; letter-spacing:.06em;
        }
        .se2-filter-chips { display:flex; flex-direction:column; gap:7px; }

        /* Source filter chips — clicking calls _se2FilterCat via data-src2 */
        .se2-src-chip {
          padding:9px 12px; border-radius:10px;
          background:rgba(255,255,255,.03); border:1px solid var(--se-border);
          font-size:12px; display:flex; align-items:center;
          justify-content:space-between; cursor:pointer; transition:all .2s;
          color:var(--se-txt);
        }
        .se2-src-chip:hover {
          background:rgba(6,182,212,.08); border-color:rgba(6,182,212,.25);
        }
        .se2-src-chip.active {
          background:rgba(6,182,212,.12); border-color:var(--se-cyan);
        }
        .se2-src-chip-left { display:flex; align-items:center; gap:8px; }
        .se2-src-chip-icon {
          width:22px; height:22px; border-radius:6px;
          display:flex; align-items:center; justify-content:center;
          font-size:10px; flex-shrink:0;
        }
        .se2-src-chip-count {
          font-size:10px; font-weight:700;
          background:rgba(255,255,255,.1);
          padding:2px 7px; border-radius:99px;
          font-family:monospace;
        }
        /* Dim chips that have zero hits for the current query so users can
           see at a glance which sources contain matches. */
        .se2-src-chip.se2-src-chip-empty { opacity:0.45; }
        .se2-src-chip.se2-src-chip-empty .se2-src-chip-count { background:rgba(255,255,255,.04); color:#64748b; }
        .se2-src-chip.se2-src-chip-empty:hover { opacity:0.7; }

        /* ══════════════════════════════════════════════════════════════════
           MUMS AI Assistant panel — v2 premium enterprise redesign (2026-05-26)
           ══════════════════════════════════════════════════════════════════ */
        .se2-ai-panel {
          position:relative;
          margin:12px 0 16px;
          border-radius:16px;
          overflow:hidden;
          background:
            radial-gradient(120% 80% at 0% 0%, rgba(56,189,248,.07) 0%, transparent 50%),
            radial-gradient(100% 80% at 100% 100%, rgba(168,85,247,.06) 0%, transparent 50%),
            linear-gradient(180deg, rgba(15,23,42,.85), rgba(8,12,22,.92));
          border:1px solid rgba(99,102,241,.22);
          box-shadow:
            0 0 0 1px rgba(99,102,241,.04),
            0 24px 60px -28px rgba(56,189,248,.25),
            0 8px 24px -12px rgba(0,0,0,.45);
          animation:se2AiSlideIn .28s cubic-bezier(.16,1,.3,1);
        }
        /* animated gradient border accent */
        .se2-ai-panel::before {
          content:'';
          position:absolute; inset:0;
          border-radius:16px;
          padding:1px;
          background:linear-gradient(135deg,
            rgba(56,189,248,.35) 0%,
            rgba(99,102,241,.18) 35%,
            rgba(168,85,247,.28) 70%,
            rgba(34,211,238,.32) 100%);
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
                  mask-composite: exclude;
          pointer-events:none;
          opacity:.55;
        }
        @keyframes se2AiSlideIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

        /* ── Header ── */
        .se2-ai-panel-header {
          display:flex; align-items:center; gap:12px;
          padding:14px 18px 12px;
          position:relative;
        }
        .se2-ai-avatar {
          width:34px; height:34px;
          border-radius:10px;
          display:flex; align-items:center; justify-content:center;
          font-size:17px;
          background:linear-gradient(135deg, rgba(56,189,248,.22), rgba(168,85,247,.18));
          border:1px solid rgba(56,189,248,.32);
          box-shadow:0 0 18px rgba(56,189,248,.18);
          flex-shrink:0;
        }
        .se2-ai-title-group {
          display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;
        }
        .se2-ai-label {
          display:flex; align-items:center; gap:8px;
          font-size:13px; font-weight:800;
          background:linear-gradient(90deg,#7dd3fc,#c4b5fd);
          -webkit-background-clip:text; background-clip:text;
          -webkit-text-fill-color:transparent;
          letter-spacing:-.01em;
        }
        .se2-ai-tag {
          display:inline-flex; align-items:center; gap:4px;
          font-size:9px; font-weight:800;
          padding:2px 7px; border-radius:99px;
          background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.28);
          color:#7dd3fc;
          letter-spacing:.05em; text-transform:uppercase;
          -webkit-text-fill-color:#7dd3fc;
        }
        .se2-ai-sublabel {
          font-size:10.5px; color:#94a3b8;
          font-weight:500; letter-spacing:.01em;
        }
        .se2-ai-status {
          width:8px; height:8px; border-radius:50%;
          background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18);
          flex-shrink:0;
        }
        .se2-ai-status.processing { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); animation:se2AiPulse 1.1s infinite; }
        .se2-ai-status.fallback   { background:#64748b; box-shadow:0 0 0 3px rgba(100,116,139,.15); }
        .se2-ai-status.error      { background:#f43f5e; box-shadow:0 0 0 3px rgba(244,63,94,.18); }
        @keyframes se2AiPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.18)} }

        /* ── Confidence ring (replaces "80% conf" plain text) ── */
        .se2-ai-conf-ring {
          --se2-ai-conf-deg: 252deg; /* set per query via inline style */
          --se2-ai-conf-color: #34d399;
          width:36px; height:36px; flex-shrink:0;
          border-radius:50%;
          background:conic-gradient(var(--se2-ai-conf-color) var(--se2-ai-conf-deg), rgba(255,255,255,.06) 0);
          display:flex; align-items:center; justify-content:center;
          position:relative;
        }
        .se2-ai-conf-ring::after {
          content:''; position:absolute; inset:3px;
          border-radius:50%; background:#0b1220;
        }
        .se2-ai-conf-ring span {
          position:relative; z-index:1;
          font-size:9.5px; font-weight:900; color:#e2e8f0;
          letter-spacing:-.02em;
        }

        /* ── Header action buttons ── */
        .se2-ai-actions { display:flex; gap:6px; align-items:center; }
        .se2-ai-copy-btn, .se2-ai-close-btn, .se2-ai-clear-btn, .se2-ai-collapse-btn {
          background:rgba(255,255,255,.04);
          border:1px solid rgba(255,255,255,.08);
          border-radius:8px;
          color:#94a3b8;
          font-size:11px;
          cursor:pointer;
          padding:5px 9px;
          transition:all .15s;
          font-family:inherit;
          display:inline-flex; align-items:center; gap:5px;
        }
        .se2-ai-copy-btn:hover     { background:rgba(56,189,248,.14); color:#7dd3fc; border-color:rgba(56,189,248,.3); }
        .se2-ai-close-btn:hover    { background:rgba(244,63,94,.12); color:#fda4af; border-color:rgba(244,63,94,.3); }
        .se2-ai-clear-btn:hover    { background:rgba(255,255,255,.08); color:#cbd5e1; }
        .se2-ai-collapse-btn:hover { background:rgba(255,255,255,.08); color:#cbd5e1; }

        /* ── Body: the AI answer itself ── */
        .se2-ai-panel-body {
          padding:4px 18px 16px;
          font-size:13.5px; line-height:1.62; color:#e2e8f0;
          max-height:320px; overflow-y:auto;
        }
        .se2-ai-panel-body::-webkit-scrollbar { width:4px; }
        .se2-ai-panel-body::-webkit-scrollbar-thumb {
          background:rgba(99,102,241,.25); border-radius:99px;
        }
        .se2-ai-panel-body p { margin:0 0 10px; color:#e2e8f0; }
        .se2-ai-panel-body p:last-child { margin-bottom:0; }
        .se2-ai-panel-body strong { color:#f1f5f9; font-weight:700; }
        .se2-ai-panel-body em     { color:#7dd3fc; font-style:normal; font-weight:600; }
        .se2-ai-panel-body code {
          background:rgba(99,102,241,.13);
          border:1px solid rgba(99,102,241,.22);
          border-radius:5px; padding:1px 6px;
          font-family:Consolas,Menlo,monospace; font-size:11.5px;
          color:#a5b4fc;
        }
        .se2-ai-cursor {
          display:inline-block; width:2px; height:13px;
          background:#7dd3fc;
          animation:se2AiBlink .8s infinite;
          vertical-align:middle; margin-left:3px;
          border-radius:1px;
        }
        @keyframes se2AiBlink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

        /* ── Sources strip ── */
        .se2-ai-sources-block {
          margin-top:14px; padding-top:12px;
          border-top:1px dashed rgba(99,102,241,.18);
          display:flex; flex-wrap:wrap; gap:6px; align-items:center;
        }
        .se2-ai-sources-label {
          font-size:9.5px; font-weight:800; color:#a5b4fc;
          letter-spacing:.08em; text-transform:uppercase; margin-right:6px;
          display:inline-flex; align-items:center; gap:5px;
        }
        .se2-ai-source-tag {
          display:inline-flex; align-items:center; gap:4px;
          background:rgba(56,189,248,.08);
          border:1px solid rgba(56,189,248,.22);
          color:#7dd3fc;
          font-size:10.5px; font-weight:600;
          padding:3px 9px;
          border-radius:99px;
          transition:all .15s;
        }
        .se2-ai-source-tag:hover {
          background:rgba(56,189,248,.18);
          color:#bae6fd;
          transform:translateY(-1px);
        }

        /* ── Suggestion chips ── */
        .se2-ai-suggestions {
          margin-top:10px;
          display:flex; flex-wrap:wrap; gap:6px; align-items:center;
        }
        .se2-ai-suggestions-label {
          font-size:9.5px; font-weight:800; color:#86efac;
          letter-spacing:.08em; text-transform:uppercase; margin-right:6px;
        }
        .se2-ai-chip {
          background:rgba(16,185,129,.09);
          border:1px solid rgba(16,185,129,.28);
          color:#86efac;
          font-size:11.5px; font-weight:600;
          padding:5px 11px;
          border-radius:99px;
          cursor:pointer;
          font-family:inherit;
          transition:all .15s;
          display:inline-flex; align-items:center; gap:5px;
        }
        .se2-ai-chip::before { content:'→'; opacity:.7; font-size:11px; }
        .se2-ai-chip:hover {
          background:rgba(16,185,129,.18);
          color:#bbf7d0;
          border-color:rgba(16,185,129,.45);
          transform:translateY(-1px);
        }

        /* ── Clarification call-out ── */
        .se2-ai-clarify {
          background:rgba(245,158,11,.08);
          border-left:3px solid #f59e0b;
          border-radius:6px;
          padding:10px 14px;
          color:#fde68a;
          margin-bottom:10px;
        }

        /* ── Footer: compact metadata strip ── */
        .se2-ai-panel-footer {
          padding:8px 18px;
          font-size:10.5px; color:#64748b;
          border-top:1px solid rgba(99,102,241,.1);
          display:flex; align-items:center; justify-content:space-between;
          background:rgba(0,0,0,.18);
        }
        .se2-ai-panel-footer #se2-ai-sources {
          display:inline-flex; align-items:center; gap:6px;
          color:#94a3b8;
        }
        .se2-ai-panel.collapsed .se2-ai-panel-body,
        .se2-ai-panel.collapsed .se2-ai-panel-footer {
          display:none;
        }

        /* ── CENTER PANEL ── */
        #se2-center {
          flex:1; min-width:0; display:flex; flex-direction:column;
          overflow:hidden;
          position:relative;
        }

        /* ── HERO SECTION (empty state) ── */
        #se2-hero {
          display:flex; flex-direction:column; align-items:center;
          justify-content:center; padding:28px 32px 20px;
          text-align:center; flex-shrink:0;
        }
        #se2-hero-icon {
          width:80px; height:80px; border-radius:24px;
          background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(59,130,246,.1));
          border:1px solid rgba(6,182,212,.35);
          box-shadow:0 8px 32px rgba(6,182,212,.22);
          display:flex; align-items:center; justify-content:center;
          font-size:32px; margin-bottom:22px;
        }
        #se2-hero-title {
          font-size:28px; font-weight:700; color:var(--se-txt);
          letter-spacing:-.02em; margin-bottom:10px;
        }
        #se2-hero-sub {
          font-size:14px; color:var(--se-muted); margin-bottom:0; line-height:1.6;
        }
        #se2-hero-sub strong { color:var(--se-txt); }

        /* ── SEARCH WRAP (hero style) ── */
        #se2-search-wrap {
          display:flex; align-items:center; gap:14px;
          background:rgba(0,0,0,.3);
          border:2px solid rgba(6,182,212,.3);
          border-radius:18px;
          padding:18px 22px;
          transition:border-color .28s, box-shadow .28s;
          margin:20px 24px 0;
          flex-shrink:0;
          z-index:2;
        }
        /* Guardrail: SE2 search must remain visible for all users/sessions. */
        #se2-center > #se2-search-wrap {
          display:flex !important;
          visibility:visible !important;
          opacity:1 !important;
        }
        #se2-search-wrap:focus-within {
          border-color:var(--se-cyan);
          box-shadow:0 0 0 4px rgba(6,182,212,.12), 0 20px 60px rgba(6,182,212,.22);
          background:rgba(0,0,0,.4);
        }
        #se2-q {
          flex:1; background:transparent; border:none; outline:none;
          color:var(--se-txt); font-size:16px;
          font-family:inherit; font-weight:500;
        }
        #se2-q::placeholder { color:rgba(255,255,255,.28); }
        #se2-ai-chip {
          display:none; align-items:center; gap:5px; padding:4px 10px;
          border-radius:99px; background:rgba(139,92,246,.15);
          border:1px solid rgba(139,92,246,.3); color:#c084fc;
          font-size:9px; font-weight:800; letter-spacing:.06em; white-space:nowrap;
        }
        #se2-ai-chip.on { display:inline-flex; }
        .se2-clear {
          background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
          border-radius:8px; color:var(--se-muted); font-size:12px;
          cursor:pointer; padding:5px 10px; display:none; transition:all .15s;
          font-family:inherit;
        }
        .se2-clear:hover { background:rgba(248,81,73,.12); border-color:rgba(248,81,73,.3); color:#f85149; }
        #se2-kbd {
          font-size:11px; font-weight:700; color:var(--se-muted);
          background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
          border-radius:6px; padding:4px 10px; font-family:monospace;
          white-space:nowrap; flex-shrink:0;
        }

        /* ── QUICK CHIPS (empty state) ── */
        .se2-chips {
          display:flex; flex-wrap:wrap; gap:10px;
          justify-content:center; margin-top:22px;
        }
        .se2-chip {
          padding:8px 17px; border-radius:99px;
          background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
          font-size:13px; color:var(--se-muted); cursor:pointer; transition:all .2s;
        }
        .se2-chip:hover {
          background:rgba(6,182,212,.15); border-color:var(--se-cyan);
          color:var(--se-txt); transform:translateY(-2px);
        }

        /* ── FILTER ROW (during search) ── */
        #se2-filter-row {
          display:none; gap:6px; overflow-x:auto;
          padding:12px 24px 0; scrollbar-width:none; flex-shrink:0;
        }
        #se2-filter-row::-webkit-scrollbar { display:none; }
        .se2-filter-btn {
          display:inline-flex; align-items:center; gap:5px;
          padding:6px 14px; border-radius:9px; font-size:11px;
          font-weight:700; white-space:nowrap; cursor:pointer;
          transition:all .18s; border:1px solid transparent; font-family:inherit;
        }
        .se2-filter-btn.inactive {
          background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); color:var(--se-muted);
        }
        .se2-filter-btn.inactive:hover { background:rgba(255,255,255,.07); color:var(--se-txt); }
        .se2-filter-btn.active { color:#fff; box-shadow:0 3px 12px rgba(6,182,212,.2); }
        .se2-filter-count {
          font-size:9px; font-weight:800; padding:1px 6px;
          border-radius:99px; background:rgba(255,255,255,.18);
        }

        /* ── STATS GRID — 4 metric cards (empty state) / 8-col small (search) ── */
        #se2-stats-grid {
          display:grid;
          grid-template-columns:repeat(4,1fr);
          gap:14px; padding:20px 24px 0; flex-shrink:0;
        }
        #se2-stats-grid.se2-compact {
          grid-template-columns:repeat(8,1fr);
          gap:6px; padding:10px 24px 0;
        }

        /* Metric card — large (empty state) */
        .se2-stat-card {
          background:var(--se-glass);
          backdrop-filter:blur(16px);
          border-radius:16px;
          border:1px solid var(--se-border);
          padding:18px 18px 14px;
          cursor:pointer; transition:all .22s;
          position:relative; overflow:hidden;
          display:flex; flex-direction:column; align-items:flex-start;
        }
        .se2-stat-card::before {
          content:''; position:absolute; top:0; left:0; right:0; height:3px;
          background:linear-gradient(90deg, var(--se-cyan), var(--se-blue));
          opacity:0; transition:opacity .22s;
        }
        .se2-stat-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.4); }
        .se2-stat-card:hover::before { opacity:1; }
        .se2-stat-card.active::before { opacity:1; }
        .se2-stat-card.active { box-shadow:0 0 0 2px currentColor; }

        /* Color-coded top bar per source */
        .se2-stat-card[data-src="qb"]::before    { background:linear-gradient(90deg,#58a6ff,#3b82f6); }
        .se2-stat-card[data-src="kb"]::before    { background:linear-gradient(90deg,#10b981,#34d399); }
        .se2-stat-card[data-src="parts"]::before { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
        .se2-stat-card[data-src="ctrl"]::before  { background:linear-gradient(90deg,#a78bfa,#c084fc); }
        .se2-stat-card[data-src="net"]::before   { background:linear-gradient(90deg,#22d3ee,#06b6d4); }
        .se2-stat-card[data-src="ci"]::before    { background:linear-gradient(90deg,#8b5cf6,#a78bfa); }
        .se2-stat-card[data-src="sr"]::before    { background:linear-gradient(90deg,#f43f5e,#fb7185); }

        .se2-metric-header {
          display:flex; align-items:center; gap:10px; margin-bottom:14px;
        }
        .se2-metric-icon {
          width:38px; height:38px; border-radius:10px;
          display:flex; align-items:center; justify-content:center;
          font-size:16px; flex-shrink:0;
          background:rgba(6,182,212,.1);
        }
        .se2-stat-lbl {
          font-size:11px; font-weight:600; color:var(--se-muted);
          text-transform:uppercase; letter-spacing:.05em;
        }
        .se2-stat-num {
          font-size:30px; font-weight:700; line-height:1;
          margin-bottom:8px; font-family:monospace; color:var(--se-txt);
        }
        .se2-metric-change {
          font-size:11px; color:var(--se-green);
          display:flex; align-items:center; gap:3px;
        }

        /* Compact card (during search) */
        #se2-stats-grid.se2-compact .se2-stat-card {
          padding:8px 8px; border-radius:10px; align-items:center;
        }
        #se2-stats-grid.se2-compact .se2-metric-header { display:none; }
        #se2-stats-grid.se2-compact .se2-stat-num {
          font-size:16px; margin-bottom:2px; font-weight:900;
        }
        #se2-stats-grid.se2-compact .se2-stat-lbl { font-size:9px; }
        #se2-stats-grid.se2-compact .se2-metric-change { display:none; }
        #se2-stats-grid.se2-compact .se2-stat-card::before { height:2px; opacity:1; }

        /* ── SUMMARY BAR ── */
        #se2-summary {
          padding:10px 24px 8px; flex-shrink:0;
          font-size:11px; color:var(--se-muted);
          display:flex; align-items:center; justify-content:space-between; gap:8px;
        }
        #se2-summary strong { color:var(--se-txt); }
        .se2-sort-btn {
          display:inline-flex; align-items:center; gap:5px;
          padding:5px 11px; border-radius:7px;
          background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
          color:var(--se-muted); font-size:10px; font-weight:600;
          cursor:pointer; transition:all .15s; font-family:inherit; white-space:nowrap;
        }
        .se2-sort-btn:hover { background:rgba(255,255,255,.07); color:var(--se-txt); }

        /* ── BODY (results) ── */
        #se2-body {
          flex:1; overflow-y:auto; min-height:0; padding:10px 24px 24px;
          scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
        }
        #se2-body::-webkit-scrollbar { width:4px; }
        #se2-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:99px; }

        /* ── EMPTY STATE ── */
        #se2-empty {
          display:flex; flex-direction:column; align-items:center;
          justify-content:center; min-height:60px; gap:14px;
          text-align:center; padding:20px 30px;
        }
        .se2-empty-icon { display:none; }
        .se2-empty-title { display:none; }
        .se2-empty-sub { display:none; }

        /* ── GROUP HEADER ── */
        .se2-group {
          margin:14px 0 8px; font-size:10px; font-weight:800;
          text-transform:uppercase; letter-spacing:.1em;
          display:flex; align-items:center; gap:8px;
        }
        .se2-group-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
        .se2-group::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.07); }
        .se2-group-count {
          font-size:9px; font-weight:700; padding:1px 7px;
          border-radius:99px; border:1px solid currentColor; opacity:.7;
        }

        /* ── RESULT CARDS ── */
        @keyframes se2CardIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
        .se2-card {
          background:rgba(17,24,39,.7); border:1px solid var(--se-border);
          border-radius:12px; padding:14px 16px; margin-bottom:8px;
          cursor:pointer; transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;
          position:relative;
        }
        .se2-card:hover {
          border-color:rgba(6,182,212,.3); background:rgba(6,182,212,.04);
          transform:translateX(2px); box-shadow:0 4px 20px rgba(0,0,0,.3);
        }
        .se2-card-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:8px; }
        .se2-badge {
          font-size:9px; font-weight:800; padding:2px 8px; border-radius:6px;
          letter-spacing:.04em; text-transform:uppercase;
        }
        .se2-case-num {
          font-size:10px; font-weight:800; color:var(--ss-accent, #58a6ff);
          font-family:monospace; background:color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
          border:1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); padding:2px 7px; border-radius:5px;
        }
        .se2-eu-chip {
          font-size:9px; color:#c084fc; background:rgba(162,93,220,.1);
          border:1px solid rgba(162,93,220,.2); padding:2px 7px; border-radius:5px; font-weight:700;
        }
        .se2-age-chip {
          font-size:9px; color:var(--se-muted); background:rgba(255,255,255,.04);
          border:1px solid rgba(255,255,255,.08); padding:2px 7px; border-radius:5px;
        }
        .se2-card-title { font-size:13px; font-weight:700; color:var(--se-txt); margin-bottom:5px; line-height:1.4; }
        .se2-card-body {
          font-size:11.5px; color:var(--se-muted); line-height:1.65;
          display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
        }
        /* Case-notes snippet: teal-tinted bg to visually distinguish from title */
        .se2-notes-match {
          background: rgba(16,185,129,.05);
          border: 1px solid rgba(16,185,129,.14);
          border-radius: 7px;
          padding: 6px 9px;
          margin-top: 5px;
          font-size: 11px;
          color: var(--se-muted);
          line-height: 1.6;
        }
        .se2-notes-match-label {
          font-size: 9px; font-weight: 800; letter-spacing: .06em;
          text-transform: uppercase; color: #34d399; margin-bottom: 4px;
          display: flex; align-items: center; gap: 4px;
        }
        .se2-view-btn {
          position:absolute; right:13px; top:50%; transform:translateY(-50%);
          background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.25);
          border-radius:6px; color:var(--se-cyan); font-size:10px; font-weight:700;
          padding:4px 10px; opacity:0; transition:opacity .15s;
          cursor:pointer; font-family:inherit; white-space:nowrap;
        }
        .se2-card:hover .se2-view-btn { opacity:1; }

        /* ── HIGHLIGHT MARKS — high-contrast, clearly visible on dark bg ── */
        /* FIX-SE2-HL-1: Previous background rgba(6,182,212,.25) was only 25% opacity
           cyan — almost invisible against dark card backgrounds (#111827).
           New: bright amber-yellow at 95% opacity with dark text ensures any
           search-term match stands out immediately regardless of theme.
           The box-shadow gives it a subtle glow so it reads as "active highlight"
           rather than a random color patch. */
        mark {
          background: rgba(250,204,21,.92);
          color: #0f172a;
          border-radius: 3px;
          padding: 1px 4px;
          font-weight: 800;
          font-size: 0.95em;
          box-shadow: 0 0 0 1px rgba(250,204,21,.35);
          text-shadow: none;
          -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
        }
        /* Case-notes context match — slightly different tint to distinguish from title matches */
        .se2-notes-match mark {
          background: rgba(52,211,153,.88);
          color: #052e16;
          box-shadow: 0 0 0 1px rgba(52,211,153,.3);
        }
        /* Snippet ellipsis styling */
        .se2-snippet-ctx { color: var(--se-muted); font-style: italic; opacity: .65; }

        /* ── LOADING SPINNER ── */
        .se2-spin {
          width:28px; height:28px; border:3px solid rgba(255,255,255,.08);
          border-top-color:var(--se-cyan); border-radius:50%;
          animation:se2spin .7s linear infinite;
        }
        @keyframes se2spin { to{transform:rotate(360deg)} }

        /* Status bar */
        #se2-statusbar {
          flex-shrink:0; height:36px;
          background:rgba(10,15,26,.95); border-top:1px solid rgba(255,255,255,.05);
          display:flex; align-items:center; padding:0 20px; gap:0;
          font-size:11px; color:var(--se-muted); position:relative; z-index:10;
        }
        .se2-sb-dot {
          width:7px; height:7px; border-radius:50%; background:var(--se-green);
          box-shadow:0 0 6px rgba(16,185,129,.6); margin-right:7px;
          animation:se2pulse 2s infinite;
        }
        @keyframes se2pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
        .se2-sb-div { color:rgba(255,255,255,.15); margin:0 14px; }
        .se2-sb-right { margin-left:auto; font-size:10px; }
        .se2-sb-badge {
          background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.2);
          color:var(--se-cyan); padding:2px 8px; border-radius:4px;
          font-size:9px; font-weight:700; margin-left:8px;
        }

        /* ── DETAIL DRAWER (unchanged logic, updated style) ── */
        @keyframes se2-drawer-in { from{transform:translateX(100%);opacity:0} to{transform:none;opacity:1} }
        #se2-detail {
          position:absolute; inset:0; z-index:200;
          display:none; align-items:stretch; justify-content:flex-end;
          background:rgba(1,4,9,.65); backdrop-filter:blur(6px);
        }
        #se2-detail.open { display:flex; }
        #se2-drawer {
          width:600px; max-width:95%; background:#0d1117;
          border-left:1px solid rgba(6,182,212,.15);
          display:flex; flex-direction:column;
          animation:se2-drawer-in .22s cubic-bezier(.22,1,.36,1); overflow:hidden;
        }
        #se2-drawer-head {
          padding:20px 22px 16px; border-bottom:1px solid rgba(255,255,255,.07);
          background:linear-gradient(135deg,rgba(6,182,212,.05),transparent); flex-shrink:0;
        }
        .se2-dh-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
        .se2-dh-title { font-size:16px; font-weight:900; color:var(--se-txt); line-height:1.35; word-break:break-word; }
        .se2-dh-close {
          width:28px; height:28px; border-radius:7px;
          background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
          color:var(--se-muted); cursor:pointer; display:flex; align-items:center;
          justify-content:center; font-size:13px; flex-shrink:0; transition:all .15s; font-family:inherit;
        }
        .se2-dh-bookmark {
          width:28px; height:28px; border-radius:7px;
          background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
          color:var(--se-muted); cursor:pointer; display:flex; align-items:center;
          justify-content:center; font-size:13px; flex-shrink:0; transition:all .15s; font-family:inherit;
        }
        .se2-dh-bookmark:hover { background:color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); border-color:color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent); color:var(--ss-accent, #58a6ff); }
        .se2-dh-bookmark.active { background:color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent); border-color:color-mix(in srgb, var(--ss-accent, #58a6ff) 45%, transparent); color:var(--ss-accent, #58a6ff); }
        .se2-dh-close:hover { background:rgba(248,81,73,.15); border-color:rgba(248,81,73,.3); color:#f85149; }
        .se2-dh-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
        .se2-dh-nav { display:flex; align-items:center; gap:8px; margin-top:10px; }
        .se2-dh-nav-pos {
          font-size:10px; color:var(--se-muted); background:rgba(255,255,255,.04);
          border:1px solid rgba(255,255,255,.08); border-radius:5px; padding:2px 8px; margin-right:auto;
        }
        .se2-nav-btn {
          width:26px; height:26px; border-radius:6px; background:rgba(255,255,255,.04);
          border:1px solid rgba(255,255,255,.1); color:var(--se-muted); cursor:pointer;
          display:flex; align-items:center; justify-content:center; font-size:11px;
          transition:all .15s; font-family:inherit;
        }
        .se2-nav-btn:not(:disabled):hover { background:rgba(6,182,212,.1); border-color:rgba(6,182,212,.3); color:var(--se-cyan); }
        .se2-nav-btn:disabled { opacity:.3; cursor:not-allowed; }
        #se2-drawer-body { flex:1; overflow-y:auto; padding:18px 22px; }
        #se2-drawer-body::-webkit-scrollbar { width:4px; }
        #se2-drawer-body::-webkit-scrollbar-thumb { background:rgba(6,182,212,.15); border-radius:2px; }
        .se2-sec-title {
          font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
          margin-bottom:10px; display:flex; align-items:center; gap:6px;
        }
        .se2-sec-title::after { content:''; flex:1; height:1px; background:currentColor; opacity:.15; }
        .se2-kv-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:18px; }
        .se2-kv { padding:10px 12px; border-radius:8px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
        .se2-kv-full { grid-column:1/-1; }
        .se2-kv-label { font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--se-muted); margin-bottom:4px; }
        .se2-kv-value { font-size:12px; font-weight:700; color:var(--se-txt); word-break:break-word; line-height:1.5; }
        .se2-notes-box {
          padding:12px 14px; border-radius:9px; background:rgba(0,0,0,.25);
          border:1px solid rgba(255,255,255,.06); font-size:11px; color:var(--se-muted);
          line-height:1.7; white-space:pre-wrap; word-break:break-word;
          max-height:280px; overflow-y:auto; margin-bottom:18px;
        }
        #se2-drawer-footer {
          padding:12px 22px; border-top:1px solid rgba(255,255,255,.07);
          display:flex; gap:8px; align-items:center; flex-shrink:0;
          background:rgba(255,255,255,.02);
        }
        .se2-footer-btn {
          display:inline-flex; align-items:center; gap:6px; padding:9px 16px;
          border-radius:8px; font-size:11px; font-weight:700;
          cursor:pointer; font-family:inherit; transition:all .18s;
        }
        .se2-footer-btn.primary {
          background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(6,182,212,.1));
          border:1px solid rgba(6,182,212,.35); color:var(--se-cyan);
          flex:1; justify-content:center;
        }
        .se2-footer-btn.primary:hover { background:linear-gradient(135deg,rgba(6,182,212,.28),rgba(6,182,212,.18)); box-shadow:0 4px 18px rgba(6,182,212,.2); }
        .se2-footer-btn.ghost { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:var(--se-muted); }
        .se2-footer-btn.ghost:hover { background:rgba(255,255,255,.08); color:var(--se-txt); }
        

        @keyframes spin { to { transform: rotate(360deg); } }
        /* SR result card hover */
        .sr-card { transition: border-color .15s, background .15s; }
        .sr-card:hover { border-color: var(--sr-card-accent) !important; }
        /* Compact vs detailed */
        .sr-res-full { display: block; }
        .sr-res-short { display: none; }
        body.sr-compact .sr-res-full  { display: none; }
        body.sr-compact .sr-res-short { display: block; }
        body.sr-compact .sr-card { padding: 8px 12px !important; }
        /* Sidebar category active */
        .sr-cat-btn.active-cat { font-weight: 700 !important; }
        /* Scrollbar for cat filter */
        #sr-cat-filter::-webkit-scrollbar { width: 3px; }
        #sr-cat-filter::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
      

      @keyframes ciPanelIn { from { opacity:0; } to { opacity:1; } }
      @keyframes ciCardIn  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
      .ci-np-card { animation: ciCardIn .2s ease both; border:1px solid rgba(255,255,255,.08) !important; transition:border-color .18s; }
      .ci-np-card:hover { border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent) !important; }
      #ci-notes-panel ::-webkit-scrollbar { width:5px; }
      #ci-notes-panel ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:99px; }
    

/* ═══════════════════════════════════════════════════════
   CONNECT+ & PARTS NUMBER — SIDEBAR FILTER LIST STYLES
   Premium matching Support Records sidebar design
═══════════════════════════════════════════════════════ */

/* Generic sidebar filter button used by both CP and PN */
.cp-filter-btn, .pn-filter-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  font-family: var(--ss-font);
  transition: all .12s;
  text-align: left;
  gap: 6px;
}
.cp-filter-btn:hover { background: rgba(34,211,238,.05) !important; border-color: rgba(34,211,238,.12) !important; }
.cp-filter-btn.active { background: rgba(34,211,238,.1) !important; border-color: rgba(34,211,238,.28) !important; }
.pn-filter-btn:hover { background: rgba(251,146,60,.05) !important; border-color: rgba(251,146,60,.12) !important; }
.pn-filter-btn.active { background: rgba(251,146,60,.1) !important; border-color: rgba(251,146,60,.28) !important; }

/* Filter item icon badge */
.cp-filter-icon {
  width: 18px; height: 18px; border-radius: 4px;
  background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pn-filter-icon {
  width: 18px; height: 18px; border-radius: 4px;
  background: rgba(251,146,60,.12); border: 1px solid rgba(251,146,60,.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Count badge */
.cp-filter-count {
  font-size: 9px; font-weight: 600; color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.05); border-radius: 8px; padding: 1px 5px; flex-shrink: 0;
}
.cp-filter-btn.active .cp-filter-count { color: #22d3ee; background: rgba(34,211,238,.12); }
.pn-filter-count {
  font-size: 9px; font-weight: 600; color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.05); border-radius: 8px; padding: 1px 5px; flex-shrink: 0;
}
.pn-filter-btn.active .pn-filter-count { color: #fb923c; background: rgba(251,146,60,.12); }

/* Scrollbar for sidebar lists */
#cp-sidebar-country-list::-webkit-scrollbar,
#cp-sidebar-dir-list::-webkit-scrollbar,
#pn-sidebar-cat-list::-webkit-scrollbar { width: 3px; }
#cp-sidebar-country-list::-webkit-scrollbar-thumb,
#cp-sidebar-dir-list::-webkit-scrollbar-thumb { background: rgba(34,211,238,.18); border-radius: 2px; }
#pn-sidebar-cat-list::-webkit-scrollbar-thumb { background: rgba(251,146,60,.18); border-radius: 2px; }

/* Connect+ stats total number updated via JS */
#cp-stats-mini .cp-stats-num { font-size: 13px; font-weight: 800; color: #22d3ee; }

  /* ── Case Detail Modal Base Styles ──────────────────────────────── */
  #qbCaseDetailModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    align-items: center;
    justify-content: center;
    background: rgba(6,12,24,.88);
    padding: 16px;
    box-sizing: border-box;
  }
  #qbCaseDetailModal.open {
    display: flex !important;
  }
  .qbcd-shell {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: 92vh;
    /* No min-height: the shell sizes to its content. With min-height set,
       a short Notes block left the flex body with extra space that no
       child wanted to grow into → visible vacant gap inside Case Notes. */
    background: #0d1117;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
    font-family: var(--ss-font, 'Inter', system-ui, sans-serif);
  }
  /* Header */
  .qbcd-header {
    flex-shrink: 0;
    padding: 18px 22px 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ss-accent, #58a6ff) 6%, transparent) 0%, rgba(34,211,238,.04) 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }
  .qbcd-row-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
    color: var(--ss-accent, #58a6ff);
    font-size: 15px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -.02em;
  }
  .qbcd-header-main { flex: 1; min-width: 0; }
  .qbcd-case-header-main {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .qbcd-case-quick-actions {
    display: flex;
    gap: 4px;
    margin-left: 4px;
  }
  .qbcd-quick-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #94a3b8;
    text-decoration: none;
    transition: all .15s;
  }
  .qbcd-quick-icon-btn:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    color: #e2e8f0;
    transform: translateY(-1px);
  }
  .qbcd-quick-icon-btn[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
    transform: none;
  }
  .qbcd-edit-icon:hover {
    background: rgba(99,102,241,.2);
    border-color: rgba(99,102,241,.4);
    color: #a5b4fc;
  }
  .qbcd-view-icon:hover {
    background: rgba(6,182,212,.2);
    border-color: rgba(6,182,212,.4);
    color: #67e8f9;
  }
  .qbcd-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ss-accent, #58a6ff);
    margin-bottom: 3px;
  }
  .qbcd-case-num {
    font-size: 22px;
    font-weight: 900;
    color: #e6edf3;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 4px;
  }
  .qbcd-case-num span { color: #22d3ee; }
  .qbcd-desc {
    font-size: 11px;
    color: #7d8590;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 560px;
  }
  .qbcd-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
  }
  .qbcd-close-x {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #7d8590;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
  }
  .qbcd-close-x:hover { background: rgba(248,81,73,.12); border-color: rgba(248,81,73,.3); color: #f85149; }
  .qbcd-meta-line { font-size: 10px; color: #7d8590; text-align: right; }
  /* Status strip */
  .qbcd-status-strip {
    flex-shrink: 0;
    padding: 8px 22px;
    background: rgba(255,255,255,.02);
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .qbcd-status-label { font-size: 9px; font-weight: 700; color: #7d8590; text-transform: uppercase; letter-spacing: .07em; }
  /* KPI cards */
  .qbcd-kpis {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .qbcd-kpi {
    padding: 12px 16px;
    border-right: 1px solid rgba(255,255,255,.06);
  }
  .qbcd-kpi:last-child { border-right: none; }
  .qbcd-kpi-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #7d8590;
    margin-bottom: 4px;
  }
  .qbcd-kpi-val {
    font-size: 16px;
    font-weight: 800;
    color: #e6edf3;
    letter-spacing: -.02em;
    line-height: 1.2;
  }
  .qbcd-kpi-sub { font-size: 9px; color: #7d8590; margin-top: 2px; }
  .qbcd-kpi-val.age-val { color: var(--ss-accent, #58a6ff); }
  .qbcd-kpi-val.last-val { color: #d29922; }
  .qbcd-kpi-val.type-val { color: #a78bfa; font-size: 12px; }
  .qbcd-kpi-val.user-val { color: #3fb950; font-size: 12px; }
  /* Scrollable body */
  .qbcd-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .qbcd-body::-webkit-scrollbar { width: 4px; }
  .qbcd-body::-webkit-scrollbar-track { background: rgba(255,255,255,.02); }
  .qbcd-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
  /* Section cards */
  .qbcd-section {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    overflow: hidden;
  }
  .qbcd-section-header {
    padding: 8px 14px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7d8590;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .qbcd-section-header i { opacity: .6; }
  .qbcd-section-body { padding: 14px; }
  /* KV pairs */
  .qbcd-kv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .qbcd-kv { display: flex; flex-direction: column; gap: 3px; }
  .qbcd-kv-lbl { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7d8590; }
  .qbcd-kv-val { font-size: 12px; font-weight: 700; color: #e6edf3; }
  .qbcd-kv-val.accent-blue { color: var(--ss-accent, #58a6ff); }
  .qbcd-kv-val.accent-green { color: #3fb950; }
  /* Notes / text blocks
     Case Notes is the most-read section of this modal — give it dominant
     vertical real-estate AND let it flex-grow to claim any spare height
     left over by the smaller surrounding sections. Same rules ship from
     /js/case_detail_modal.js so the modal looks identical on any page.
     !important guards against any older qbcd-* rules in styles.css that
     may still be cached at the CDN edge. */
  /* ── Case Notes — PERMANENT vacant-space fix ─────────────────────────
     The element sizes to its CONTENT, capped at 55vh. When content
     overflows the cap, overflow-y:auto adds an internal scrollbar.
     When content is short, the element collapses to fit — no vacant
     space below ever. No flex-grow, no height:100%, no fighting min-
     heights — those were the source of the vacant gap. */
  #qbCaseDetailModal .qbcd-notes-text {
    font-size: 12px !important;
    line-height: 1.75 !important;
    color: #d4dbe5 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
    /* Explicitly opt out of being flex-stretched by an ancestor. */
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #qbCaseDetailModal .qbcd-notes-text::-webkit-scrollbar { width: 4px; }
  #qbCaseDetailModal .qbcd-notes-text::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
  /* Notes card — accent border + tinted header for visual priority.
     Sizes to its children naturally (header + content). No flex-grow
     or rigid min-height so it never asks for more room than its
     content needs. */
  #qbCaseDetailModal #qbcdNotesBlock {
    background: rgba(63,185,80,.04) !important;
    border: 1px solid rgba(63,185,80,.18) !important;
    flex: 0 0 auto !important;
    display: block !important;
    min-height: 0 !important;
  }
  #qbCaseDetailModal #qbcdNotesBlock .qbcd-section-header {
    font-size: 10px !important;
    color: #3fb950 !important;
    background: rgba(63,185,80,.06) !important;
    border-bottom-color: rgba(63,185,80,.16) !important;
  }
  #qbCaseDetailModal #qbcdNotesBlock .qbcd-section-body {
    padding: 16px 18px !important;
    flex: 0 0 auto !important;
    display: block !important;
    min-height: 0 !important;
  }
  .qbcd-latest-text {
    font-size: 12px;
    line-height: 1.6;
    color: #c9d1d9;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .qbcd-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #3fb950;
    box-shadow: 0 0 6px #3fb950;
    display: inline-block;
    margin-right: 6px;
  }
  /* Footer */
  .qbcd-footer {
    flex-shrink: 0;
    padding: 12px 22px;
    background: rgba(255,255,255,.02);
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .qbcd-nav-btn {
    padding: 6px 14px;
    border-radius: 7px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #e6edf3;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--ss-font, inherit);
    transition: all .15s;
  }
  .qbcd-nav-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent); color: var(--ss-accent, #58a6ff); }
  .qbcd-nav-btn:disabled { opacity: .3; cursor: default; }
  .qbcd-pos { font-size: 11px; color: #7d8590; font-weight: 600; min-width: 60px; text-align: center; }
  .qbcd-footer-right { margin-left: auto; display: flex; gap: 8px; }
  .qbcd-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(30,41,59,.8);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--ss-font, inherit);
    white-space: nowrap;
    transition: all .15s;
  }
  .qbcd-footer-btn:hover {
    background: rgba(51,65,85,.9);
    border-color: rgba(255,255,255,.2);
    color: #f1f5f9;
    transform: translateY(-1px);
  }
  .qbcd-footer-btn[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
    transform: none;
  }
  .qbcd-edit-btn:hover {
    background: rgba(79,70,229,.2);
    border-color: rgba(99,102,241,.5);
    color: #c7d2fe;
  }
  .qbcd-view-btn:hover {
    background: rgba(8,145,178,.2);
    border-color: rgba(6,182,212,.5);
    color: #a5f3fc;
  }
  .qbcd-copy-btn:hover { background: rgba(34,211,238,.18); border-color: rgba(34,211,238,.35); color: #67e8f9; }
  .qbcd-close-btn:hover { background: rgba(248,81,73,.1); border-color: rgba(248,81,73,.25); color: #f85149; }
  /* Status badge (base — overridden by theme CSS in styles.css) */
  .qb-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
  }
  .qb-status-dot { width: 6px; height: 6px; border-radius: 50%; }
  .qb-status-investigating { background: rgba(88,166,255,.12); color: #58a6ff; border: 1px solid rgba(88,166,255,.3); }
  .qb-status-investigating .qb-status-dot { background: #58a6ff; box-shadow: 0 0 5px #58a6ff; }
  .qb-status-waiting { background: rgba(249,115,22,.1); color: #f97316; border: 1px solid rgba(249,115,22,.25); }
  .qb-status-waiting .qb-status-dot { background: #f97316; }
  .qb-status-initial { background: rgba(245,158,11,.1); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
  .qb-status-initial .qb-status-dot { background: #f59e0b; }
  .qb-status-soft-close { background: rgba(139,148,158,.1); color: #8b949e; border: 1px solid rgba(139,148,158,.25); }
  .qb-status-soft-close .qb-status-dot { background: #8b949e; }
  .qb-status-response { background: rgba(167,139,250,.1); color: #a78bfa; border: 1px solid rgba(167,139,250,.25); }
  .qb-status-response .qb-status-dot { background: #a78bfa; }
  .qb-status-closed { background: rgba(63,185,80,.1); color: #3fb950; border: 1px solid rgba(63,185,80,.25); }
  .qb-status-closed .qb-status-dot { background: #3fb950; box-shadow: 0 0 5px #3fb950; }
  .qb-status-default { background: rgba(125,133,144,.1); color: #7d8590; border: 1px solid rgba(125,133,144,.2); }
  .qb-status-default .qb-status-dot { background: #7d8590; }

    /* ══════════════════════════════════════════════════════════
       CONTROLLER LAB — Action Overlay + Use This Controller
       v2.0 — hover overlay with 2 buttons per card
    ══════════════════════════════════════════════════════════ */

    /* Card becomes relative for overlay positioning */
    .hp-ctl-col { position: relative; overflow: hidden; }

    /* Hide old settings button — replaced by overlay */
    .hp-ctl-col-settings { display: none !important; }

    /* Hover overlay — slides up on card hover */
    .hp-ctl-col-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(1,4,9,.97) 0%, rgba(1,4,9,.85) 60%, rgba(1,4,9,.0) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
      padding: 14px 12px;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .22s ease, transform .22s ease;
      pointer-events: none;
      border-radius: inherit;
    }
    .hp-ctl-col:hover .hp-ctl-col-overlay {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Use This Controller button */
    .hp-ctl-use-btn {
      width: 100%;
      padding: 9px 0;
      border-radius: 9px;
      border: 1px solid rgba(59,130,246,.55);
      background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(59,130,246,.12));
      color: var(--ss-accent2, #79c0ff);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: all .18s;
      font-family: var(--ss-font, inherit);
    }
    .hp-ctl-use-btn:hover {
      background: linear-gradient(135deg, rgba(59,130,246,.4), rgba(59,130,246,.22));
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 80%, transparent);
      color: #bfdbfe;
      box-shadow: 0 0 16px rgba(59,130,246,.25);
    }

    /* Settings button inside overlay */
    .hp-ctl-overlay-settings {
      width: 100%;
      min-height: 32px;
      padding: 6px 0;
      border-radius: 9px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.55);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .04em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all .18s;
      font-family: var(--ss-font, inherit);
    }
    .hp-ctl-overlay-settings:hover {
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.25);
      color: #e2e8f0;
    }

    /* ══════════════════════════════════════════════════════════
       CONTROLLER LAB BOOKING MODAL
    ══════════════════════════════════════════════════════════ */
    /* ══════════════════════════════════════════════════════════════════
       CONTROLLER LAB BOOKING MODAL — Enterprise Premium UI v3.0
       Design: Dark glass morphism · Split-panel · Animated step indicators
       ══════════════════════════════════════════════════════════════════ */

    #hp-ctl-booking-modal {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(1,4,9,.88);
      backdrop-filter: blur(16px) saturate(1.4);
      display: none; align-items: center; justify-content: center;
      padding: 16px;
    }
    #hp-ctl-booking-modal.open { display: flex; }

    #hp-ctl-booking-dialog {
      background: #0a0f1a;
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 18%, transparent);
      border-radius: 22px;
      width: 100%; max-width: 520px;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 40px 100px rgba(0,0,0,.9),
        0 0 60px rgba(59,130,246,.06);
      overflow: hidden;
      animation: ctl-modal-in .22s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes ctl-fade-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes ctl-modal-in {
      from { opacity:0; transform: scale(.94) translateY(10px); }
      to   { opacity:1; transform: scale(1) translateY(0); }
    }

    /* ── TOP BAR (sheet status + pending) ── */
    .hp-ctl-bk-topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 7px 16px;
      background: rgba(0,0,0,.3);
      border-bottom: 1px solid rgba(255,255,255,.05);
    }
    .hp-ctl-bk-status-pill {
      display: flex; align-items: center; gap: 6px;
      font-size: 10px; font-weight: 600; color: #6b7280;
      font-family: var(--ss-mono, monospace);
    }
    .hp-ctl-status-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #4b5563; flex-shrink: 0;
      transition: background .3s, box-shadow .3s;
    }
    .hp-ctl-status-dot.connected {
      background: #10b981;
      box-shadow: 0 0 0 3px rgba(16,185,129,.15), 0 0 8px rgba(16,185,129,.4);
      animation: ctl-pulse-green 2.5s ease-in-out infinite;
    }
    .hp-ctl-status-dot.error {
      background: #ef4444;
      box-shadow: 0 0 0 3px rgba(239,68,68,.15);
    }
    @keyframes ctl-pulse-green {
      0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.15), 0 0 8px rgba(16,185,129,.4); }
      50%      { box-shadow: 0 0 0 5px rgba(16,185,129,.08), 0 0 14px rgba(16,185,129,.25); }
    }
    .hp-ctl-pending-pill {
      display: flex; align-items: center; gap: 5px;
      background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
      color: #f59e0b; border-radius: 20px; padding: 3px 10px;
      font-size: 10px; font-weight: 700; cursor: pointer;
      font-family: var(--ss-font, inherit); transition: all .15s;
    }
    .hp-ctl-pending-pill:hover { background: rgba(245,158,11,.22); }

    /* ── HERO HEADER ── */
    #hp-ctl-booking-head {
      background: linear-gradient(160deg, rgba(59,130,246,.08) 0%, rgba(162,93,220,.05) 60%, transparent 100%);
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .hp-ctl-bk-identity {
      display: flex; align-items: center; gap: 14px;
      padding: 18px 20px 12px;
    }
    .hp-ctl-bk-avatar {
      position: relative; flex-shrink: 0;
      width: 56px; height: 56px;
    }
    .hp-ctl-bk-avatar img {
      width: 56px; height: 56px; object-fit: contain;
      border-radius: 14px;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent);
      border: 1px solid rgba(59,130,246,.2);
      padding: 6px;
    }
    .hp-ctl-bk-avatar-pulse {
      position: absolute; inset: -3px;
      border-radius: 17px;
      border: 1px solid rgba(59,130,246,.25);
      animation: ctl-avatar-pulse 3s ease-in-out infinite;
    }
    @keyframes ctl-avatar-pulse {
      0%,100% { opacity:.6; transform: scale(1); }
      50%      { opacity:.2; transform: scale(1.04); }
    }
    .hp-ctl-bk-identity-text { flex: 1; min-width: 0; }
    .hp-ctl-bk-eyebrow {
      font-size: 9px; font-weight: 800; letter-spacing: .1em;
      text-transform: uppercase; color: #4b5563; margin-bottom: 3px;
      font-family: var(--ss-mono, monospace);
    }
    .hp-ctl-bk-title {
      font-size: 18px; font-weight: 900; color: #e6edf3;
      letter-spacing: -.02em; line-height: 1.1;
    }
    .hp-ctl-bk-ip-row {
      display: flex; align-items: center; gap: 6px; margin-top: 4px;
    }
    .hp-ctl-bk-ip-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: #10b981; flex-shrink: 0;
      box-shadow: 0 0 6px rgba(16,185,129,.6);
      animation: ctl-pulse-green 2s ease-in-out infinite;
    }
    .hp-ctl-bk-ip {
      font-size: 11px; color: #6b7280;
      font-family: var(--ss-mono, monospace);
    }
    .hp-ctl-bk-online-badge {
      font-size: 8px; font-weight: 800; letter-spacing: .1em;
      color: #10b981; background: rgba(16,185,129,.1);
      border: 1px solid rgba(16,185,129,.25);
      border-radius: 4px; padding: 1px 5px;
    }
    .hp-ctl-bk-close {
      margin-left: auto; flex-shrink: 0;
      width: 30px; height: 30px; border-radius: 8px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
      color: #4b5563; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; transition: all .15s;
    }
    .hp-ctl-bk-close:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #ef4444; }

    /* Meta strip (user · date · lab) */
    .hp-ctl-bk-meta-strip {
      display: flex; align-items: center; gap: 0;
      padding: 8px 20px 12px;
    }
    .hp-ctl-bk-meta-item {
      display: flex; align-items: center; gap: 6px;
      font-size: 10px; color: #4b5563; font-weight: 600;
      font-family: var(--ss-mono, monospace);
    }
    .hp-ctl-bk-meta-item i { font-size: 9px; color: #374151; }
    .hp-ctl-bk-meta-divider {
      width: 1px; height: 12px; background: rgba(255,255,255,.06);
      margin: 0 12px; flex-shrink: 0;
    }

    /* ── FORM BODY ── */
    #hp-ctl-booking-body {
      padding: 22px 22px 20px;
      display: flex; flex-direction: column; gap: 18px;
      background: #0a0f1a;
    }

    /* Step indicators */
    .hp-ctl-bk-steps {
      display: flex; align-items: center;
      padding: 0 2px; margin-bottom: 2px;
    }
    .hp-ctl-bk-step {
      display: flex; align-items: center; gap: 7px;
      font-size: 10px; font-weight: 700; color: #374151;
      transition: color .2s;
    }
    .hp-ctl-bk-step.active { color: var(--ss-accent2, #79c0ff); }
    .hp-ctl-bk-step.done { color: #10b981; }
    .hp-ctl-bk-step-num {
      width: 20px; height: 20px; border-radius: 50%;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 900; color: #374151;
      transition: all .2s; flex-shrink: 0;
    }
    .hp-ctl-bk-step.active .hp-ctl-bk-step-num {
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 50%, transparent); color: var(--ss-accent2, #79c0ff);
    }
    .hp-ctl-bk-step.done .hp-ctl-bk-step-num {
      background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.4); color: #10b981;
    }
    .hp-ctl-bk-step-line {
      flex: 1; height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06));
      margin: 0 8px;
    }

    /* Field block */
    .hp-ctl-bk-field { display: flex; flex-direction: column; gap: 0; }
    .hp-ctl-bk-label {
      display: flex; align-items: center; gap: 7px;
      font-size: 10px; font-weight: 800; letter-spacing: .07em;
      text-transform: uppercase; color: #6b7280; margin-bottom: 8px;
    }
    .hp-ctl-bk-label-icon { color: #374151; font-size: 9px; }
    .hp-ctl-bk-req {
      margin-left: auto; font-size: 8px; font-weight: 700; letter-spacing: .05em;
      color: #ef4444; background: rgba(239,68,68,.08);
      border: 1px solid rgba(239,68,68,.2); border-radius: 4px; padding: 1px 5px;
      text-transform: uppercase;
    }
    .hp-ctl-bk-field-hint {
      font-size: 9px; color: #374151; margin-top: 5px; line-height: 1.5;
    }

    /* Input + Select base */
    .hp-ctl-bk-input, .hp-ctl-bk-select {
      width: 100%; box-sizing: border-box;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 10px; padding: 11px 14px;
      color: #d1d5db; font-size: 12.5px;
      font-family: var(--ss-font, inherit); outline: none;
      transition: border-color .18s, box-shadow .18s, background .18s;
    }
    .hp-ctl-bk-input::placeholder { color: #374151; }
    .hp-ctl-bk-input:hover, .hp-ctl-bk-select:hover {
      border-color: rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
    }
    .hp-ctl-bk-input:focus, .hp-ctl-bk-select:focus {
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 50%, transparent);
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 4%, transparent);
      box-shadow: 0 0 0 3px rgba(59,130,246,.08), 0 2px 8px rgba(0,0,0,.3);
    }
    .hp-ctl-bk-input.invalid, .hp-ctl-bk-select.invalid {
      border-color: rgba(239,68,68,.5);
      box-shadow: 0 0 0 3px rgba(239,68,68,.08);
      animation: ctl-shake .3s ease;
    }
    @keyframes ctl-shake {
      0%,100% { transform: translateX(0); }
      25%      { transform: translateX(-4px); }
      75%      { transform: translateX(4px); }
    }
    .hp-ctl-bk-select option { background: #161b22; color: #e2e8f0; }

    /* Duration chip grid */
    .hp-ctl-bk-duration-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
    }
    .hp-ctl-dur-chip {
      padding: 9px 6px; border-radius: 9px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      color: #6b7280; font-size: 11px; font-weight: 700;
      cursor: pointer; transition: all .15s;
      font-family: var(--ss-font, inherit);
      text-align: center;
    }
    .hp-ctl-dur-chip:hover {
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent);
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 7%, transparent);
      color: #93c5fd;
    }
    .hp-ctl-dur-chip.selected {
      border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 60%, transparent);
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent);
      color: var(--ss-accent2, #79c0ff);
      box-shadow: 0 0 0 1px rgba(59,130,246,.2) inset;
    }
    .hp-ctl-dur-chip.invalid-chip { border-color: rgba(239,68,68,.5); }

    /* Backup upload zone */
    .hp-ctl-bk-backup-block {
      display: flex; flex-direction: column; gap: 8px;
    }
    /* FEATURE 1 + 2: Backup label and instruction */
    .hp-ctl-bk-label--backup {
      margin-bottom: 6px !important;
    }
    .hp-ctl-bk-backup-instruction {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 9px 12px; border-radius: 8px;
      background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.18);
      font-size: 9.5px; color: rgba(255,255,255,.5); line-height: 1.55;
      margin-bottom: 8px;
    }
    .hp-ctl-bk-backup-instruction i { margin-top: 1px; }
    .hp-ctl-bk-backup-upload-zone {
      border: 1px dashed rgba(96,165,250,.22);
      border-radius: 10px; padding: 14px 16px;
      text-align: center; cursor: pointer;
      background: rgba(96,165,250,.03);
      transition: all .2s;
    }
    .hp-ctl-bk-backup-upload-zone:hover {
      border-color: rgba(96,165,250,.45);
      background: rgba(96,165,250,.07);
    }
    .hp-ctl-bk-backup-input-wrap {
      position: relative; display: flex; align-items: center;
    }
    .hp-ctl-bk-backup-icon {
      position: absolute; left: 13px; color: #374151; font-size: 11px; pointer-events: none;
    }
    .hp-ctl-bk-backup-input {
      padding-left: 32px !important;
    }

    /* Register / submit button */
    .hp-ctl-bk-register {
      width: 100%; padding: 14px 0; border-radius: 12px; margin-top: 2px;
      border: 1px solid rgba(59,130,246,.45);
      background: var(--ss-accent, #58a6ff);
      color: var(--mey-on-mint, #0b1209); font-size: 13px; font-weight: 900; letter-spacing: .06em;
      text-transform: uppercase; cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 9px;
      transition: all .2s; font-family: var(--ss-font, inherit);
      box-shadow: 0 4px 20px rgba(29,78,216,.3), 0 1px 0 rgba(255,255,255,.07) inset;
      position: relative; overflow: hidden;
    }
    .hp-ctl-bk-register::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.07), transparent);
      opacity: 0; transition: opacity .2s;
    }
    .hp-ctl-bk-register:hover::before { opacity: 1; }
    .hp-ctl-bk-register:hover {
      border-color: rgba(99,102,241,.7);
      box-shadow: 0 6px 28px rgba(29,78,216,.45), 0 1px 0 rgba(255,255,255,.1) inset;
      transform: translateY(-1px);
    }
    .hp-ctl-bk-register:active { transform: translateY(0); }
    .hp-ctl-bk-register:disabled { opacity: .45; cursor: not-allowed; transform: none; }

    /* Spinner */
    .hp-ctl-bk-spinner {
      display: none; width: 15px; height: 15px;
      border: 2px solid rgba(255,255,255,.2);
      border-top-color: #fff; border-radius: 50%;
      animation: ctl-spin .65s linear infinite;
    }
    @keyframes ctl-spin { to { transform: rotate(360deg); } }

    /* ── SUCCESS STATE ── */
    .hp-ctl-bk-success {
      display: none; flex-direction: column;
      align-items: center; text-align: center;
      padding: 32px 24px 24px; gap: 10px;
      animation: ctl-success-in .4s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes ctl-success-in {
      from { opacity:0; transform: scale(.8); }
      to   { opacity:1; transform: scale(1); }
    }
    .hp-ctl-bk-success.show { display: flex; }
    .hp-ctl-bk-success-ring {
      width: 64px; height: 64px; border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, rgba(16,185,129,.25), rgba(16,185,129,.08));
      border: 2px solid rgba(16,185,129,.4);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 6px rgba(16,185,129,.08), 0 0 30px rgba(16,185,129,.2);
      animation: ctl-ring-pulse 2s ease-in-out infinite;
    }
    @keyframes ctl-ring-pulse {
      0%,100% { box-shadow: 0 0 0 6px rgba(16,185,129,.08), 0 0 30px rgba(16,185,129,.2); }
      50%      { box-shadow: 0 0 0 10px rgba(16,185,129,.04), 0 0 40px rgba(16,185,129,.12); }
    }
    .hp-ctl-bk-success-check {
      color: #10b981; font-size: 22px;
    }
    .hp-ctl-bk-success-title {
      font-size: 18px; font-weight: 900; color: #e6edf3;
      letter-spacing: -.02em;
    }
    .hp-ctl-bk-success-msg {
      font-size: 11px; color: #4b5563; line-height: 1.65; max-width: 320px;
    }
    #hp-ctl-bk-sheet-status {
      display: none; margin-top: 4px; padding: 7px 14px;
      border-radius: 8px; font-size: 10px; font-weight: 700;
      font-family: var(--ss-mono, monospace);
    }

    /* ══════════════════════════════════════════════════════════════════════
       CONTROLLER LAB — Enhanced Booking System v4.0 CSS
    ══════════════════════════════════════════════════════════════════════ */

    /* ── Header badge (Available / In-Use) ─────────────────────────────── */
    .hp-ctl-col-header-badge {
      align-self: stretch;
      text-align: center;
      font-size: 8px; font-weight: 800; letter-spacing: .1em;
      text-transform: uppercase; padding: 3px 10px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center; gap: 4px;
    }
    .hp-ctl-col-header-badge.available {
      background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.25);
      color: #10b981;
    }
    .hp-ctl-col-header-badge.in-use {
      background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.3);
      color: #f87171;
      animation: badge-pulse 2.5s ease-in-out infinite;
    }
    @keyframes badge-pulse {
      0%,100% { opacity:1; } 50% { opacity:.65; }
    }

    /* ── User strip (avatar + name inside card when in use) ────────────── */
    .hp-ctl-user-strip {
      display: flex; align-items: center; gap: 8px;
      width: 100%; padding: 8px 10px;
      background: linear-gradient(135deg, rgba(239,68,68,.06), rgba(239,68,68,.03));
      border: 1px solid rgba(239,68,68,.18);
      border-radius: 10px; flex-shrink: 0;
    }
    .hp-ctl-user-avatar {
      width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
      border: 2px solid rgba(239,68,68,.35);
      overflow: hidden; display: flex; align-items: center; justify-content: center;
      background: rgba(239,68,68,.12);
    }
    .hp-ctl-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .hp-ctl-user-avatar .hp-ctl-user-initials {
      font-size: 11px; font-weight: 900; color: #fca5a5; line-height: 1;
    }
    .hp-ctl-user-info { min-width: 0; flex: 1; }
    .hp-ctl-user-name {
      font-size: 11px; font-weight: 800; color: #fca5a5;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .hp-ctl-user-task {
      font-size: 8px; color: rgba(255,255,255,.45);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin-top: 2px; font-style: italic;
    }

    /* ── Countdown timer ────────────────────────────────────────────────── */
    .hp-ctl-countdown {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 10px; border-radius: 8px;
      background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25);
      width: 100%;
    }
    .hp-ctl-countdown i { color: #fbbf24; flex-shrink: 0; }
    .hp-ctl-countdown-val {
      font-size: 14px; font-weight: 900; color: #fbbf24;
      font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
      flex: 1; text-align: center;
    }
    .hp-ctl-countdown-label { font-size: 8px; color: rgba(255,255,255,.35); white-space: nowrap; }
    .hp-ctl-countdown.urgent {
      background: rgba(248,81,73,.12); border-color: rgba(248,81,73,.35);
      animation: badge-pulse 1s ease-in-out infinite;
    }
    .hp-ctl-countdown.urgent .hp-ctl-countdown-val { color: #f87171; }
    .hp-ctl-countdown.urgent i { color: #f87171; }

    /* ── Queue pill ─────────────────────────────────────────────────────── */
    .hp-ctl-queue-pill {
      display: flex; flex-direction: column; gap: 2px;
      padding: 5px 8px; border-radius: 8px; width: 100%;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent); border: 1px solid rgba(59,130,246,.2);
      color: #93c5fd; font-size: 9px; font-weight: 700; letter-spacing: .04em;
      position: relative;
      cursor: default;
    }
    .hp-ctl-queue-pill-main { display: inline-flex; align-items: center; gap: 6px; }
    .hp-ctl-queue-tooltip {
      position: absolute;
      left: 0;
      bottom: calc(100% + 6px);
      min-width: 180px;
      max-width: 260px;
      max-height: 180px;
      overflow-y: auto;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 35%, transparent);
      background: rgba(8,12,24,.98);
      box-shadow: 0 10px 22px rgba(0,0,0,.45);
      opacity: 0;
      visibility: hidden;
      transform: translateY(4px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
      z-index: 20;
      pointer-events: none;
    }
    .hp-ctl-queue-pill:hover .hp-ctl-queue-tooltip,
    .hp-ctl-queue-pill:focus-within .hp-ctl-queue-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .hp-ctl-queue-tip-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      color: #c9d1d9;
      padding: 3px 2px;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .hp-ctl-queue-tip-item:last-child { border-bottom: none; }
    .hp-ctl-queue-tip-pos {
      min-width: 22px;
      font-size: 9px;
      font-weight: 800;
      color: #7dd3fc;
    }
    .hp-ctl-queue-tip-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }
    .hp-ctl-queue-tip-more {
      margin-top: 4px;
      font-size: 9px;
      color: rgba(201,209,217,.72);
      text-align: right;
    }
    .hp-ctl-queue-header {
      display: flex; align-items: center; gap: 4px;
      font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
      color: var(--ss-accent2, #79c0ff); margin-bottom: 2px;
    }
    .hp-ctl-queue-user-list { display: flex; flex-direction: column; gap: 2px; }
    .hp-ctl-queue-user-item {
      display: flex; align-items: center; gap: 5px;
      padding: 2px 4px; border-radius: 5px;
      background: rgba(255,255,255,.04);
    }
    .hp-ctl-queue-user-pos {
      font-size: 7px; font-weight: 900; color: var(--ss-accent2, #79c0ff);
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); border-radius: 3px;
      padding: 0 3px; min-width: 12px; text-align: center;
    }
    .hp-ctl-queue-user-name {
      font-size: 9px; font-weight: 700; color: #c9d1d9;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
    }

    /* ── Actions row (replaces old overlay) ─────────────────────────────── */
    .hp-ctl-col-actions {
      width: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: auto;
    }

    /* ── Book / Queue button ────────────────────────────────────────────── */
    .hp-ctl-book-btn {
      width: 100%; min-height: 32px; padding: 7px 9px; border-radius: 9px;
      font-size: 10px; font-weight: 800; letter-spacing: .04em;
      cursor: pointer; font-family: inherit;
      display: flex; align-items: center; justify-content: center; gap: 6px;
      transition: all .2s;
      background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(16,185,129,.12));
      border: 1px solid rgba(34,197,94,.4); color: #4ade80;
    }
    .hp-ctl-book-btn:hover {
      background: linear-gradient(135deg, rgba(34,197,94,.28), rgba(16,185,129,.2));
      box-shadow: 0 4px 16px rgba(34,197,94,.2);
    }
    .hp-ctl-book-btn.queue-mode {
      background: linear-gradient(135deg, rgba(162,93,220,.18), rgba(162,93,220,.1));
      border-color: rgba(162,93,220,.4); color: #c084fc;
    }
    .hp-ctl-book-btn.queue-mode:hover {
      background: linear-gradient(135deg, rgba(162,93,220,.28), rgba(162,93,220,.18));
      box-shadow: 0 4px 16px rgba(162,93,220,.2);
    }

    /* ── In-use col state ───────────────────────────────────────────────── */
    .hp-ctl-col.in-use {
      background: rgba(248,81,73,.03);
      border-right-color: rgba(248,81,73,.15);
    }
    .hp-ctl-col.in-use .hp-ctl-col-img {
      filter: brightness(.88) saturate(.7);
    }

    /* ── In-use notice inside booking modal ─────────────────────────────── */
    .hp-ctl-bk-inuse-notice {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 12px 14px; border-radius: 10px;
      background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.25);
      margin-bottom: 4px;
    }
    .hp-ctl-bk-inuse-icon {
      width: 32px; height: 32px; border-radius: 9px;
      background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.3);
      display: flex; align-items: center; justify-content: center;
      color: #f59e0b; font-size: 14px; flex-shrink: 0;
    }
    .hp-ctl-bk-inuse-text { flex: 1; min-width: 0; }
    .hp-ctl-bk-inuse-title { font-size: 12px; font-weight: 800; color: #f59e0b; margin-bottom: 3px; }
    .hp-ctl-bk-inuse-owner { font-size: 11px; color: #e2e8f0; }
    .hp-ctl-bk-inuse-end { font-size: 10px; color: #f87171; font-family: monospace; margin-top: 2px; }
    .hp-ctl-bk-inuse-msg { font-size: 9px; color: rgba(255,255,255,.45); margin-top: 5px; font-style: italic; line-height: 1.5; }

    /* ── Queue modal dialog ─────────────────────────────────────────────── */
    .hp-ctl-queue-dialog { max-width: 480px; }
    .hp-ctl-q-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px; border-radius: 9px;
      background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
    }
    .hp-ctl-q-item.is-me {
      background: rgba(162,93,220,.08); border-color: rgba(162,93,220,.25);
    }
    .hp-ctl-q-pos {
      width: 22px; height: 22px; border-radius: 50%;
      background: color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent); border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 25%, transparent);
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 900; color: var(--ss-accent, #58a6ff); flex-shrink: 0;
    }
    .hp-ctl-q-meta { flex: 1; min-width: 0; }
    .hp-ctl-q-name { font-size: 11px; font-weight: 700; color: #e2e8f0; }
    .hp-ctl-q-task { font-size: 9px; color: rgba(255,255,255,.4); margin-top: 1px; }
    .hp-ctl-q-urgent-badge {
      font-size: 7px; font-weight: 900; padding: 2px 7px; border-radius: 4px;
      background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.3);
      color: #f59e0b; letter-spacing: .06em; flex-shrink: 0;
    }
    .hp-ctl-q-leave-btn {
      font-size: 9px; font-weight: 700; padding: 3px 9px; border-radius: 6px;
      background: rgba(248,81,73,.08); border: 1px solid rgba(248,81,73,.2);
      color: #f85149; cursor: pointer; font-family: inherit; transition: all .15s;
    }
    .hp-ctl-q-leave-btn:hover { background: rgba(248,81,73,.18); }

    /* ── Alarm banner ───────────────────────────────────────────────────── */
    @keyframes bell-ring {
      0%  { transform: rotate(-15deg); }
      100%{ transform: rotate(15deg);  }
    }
    @keyframes slide-in-top {
      from { transform: translateY(-100%); opacity: 0; }
      to   { transform: translateY(0);      opacity: 1; }
    }
    .hp-ctl-alarm-banner {
      position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
      z-index: 99999;
      display: flex; align-items: center; gap: 14px;
      padding: 16px 20px;
      background: linear-gradient(135deg, #0f172a, #1e1b4b);
      border: 1.5px solid rgba(162,93,220,.5);
      border-radius: 14px;
      box-shadow: 0 8px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(162,93,220,.15) inset;
      color: #e2e8f0;
      animation: slide-in-top .3s ease;
      min-width: 320px; max-width: min(520px, 90vw);
    }
    .hp-ctl-alarm-dismiss {
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.6); border-radius: 7px; padding: 5px 10px;
      cursor: pointer; font-size: 11px; font-family: inherit; transition: all .15s;
      flex-shrink: 0;
    }
    .hp-ctl-alarm-dismiss:hover { background: rgba(248,81,73,.15); color: #f85149; }

    /* ── Urgent notification banner ─────────────────────────────────────── */
    .hp-ctl-urgent-banner {
      position: fixed; top: 16px; right: 16px;
      z-index: 99998;
      display: flex; align-items: flex-start; gap: 14px;
      padding: 16px 18px;
      background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(15,23,42,.98));
      border: 1.5px solid rgba(245,158,11,.45);
      border-radius: 14px;
      box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(245,158,11,.1) inset;
      color: #e2e8f0;
      animation: slide-in-top .3s ease;
      max-width: min(480px, 90vw);
    }

    /* ── Override old hp-ctl-col-overlay and hp-ctl-use-btn (deprecated) ── */
    .hp-ctl-col-overlay { display: none !important; }
    .hp-ctl-use-btn     { display: none !important; }

    /* ── Col: remove border-right on last child when in-use state set ────── */
    .hp-ctl-col.in-use:last-child { border-right: none; }

    /* ══════════════════════════════════════════════════════════════════
       CONTROLLER LAB v5.0 — Timer overlay + Queue position badge
    ══════════════════════════════════════════════════════════════════ */

    /* ── Image wrapper (relative position for timer overlay) ───────── */
    .hp-ctl-img-wrap {
      position: relative;
      width: auto;
      display: inline-flex;
      justify-content: center;
      margin: 0 auto;
      flex-shrink: 0;
    }

    /* ── Centered timer overlay on controller image ─────────────────── */
    .hp-ctl-timer-overlay {
      position: absolute;
      bottom: 6px; left: 50%; right: auto;
      transform: translateX(-50%) !important;
      display: flex; align-items: center; justify-content: center;
      pointer-events: none; z-index: 2;
    }
    .hp-ctl-timer-inner {
      display: flex; flex-direction: column; align-items: center;
      padding: 5px 12px 6px;
      background: rgba(7, 13, 24, 0.88);
      backdrop-filter: blur(6px);
      border: 1.5px solid rgba(251,191,36,.6);
      border-radius: 10px;
      box-shadow: 0 0 18px rgba(251,191,36,.3), 0 4px 16px rgba(0,0,0,.6);
      min-width: 82px;
    }
    .hp-ctl-timer-label {
      font-size: 7px; font-weight: 900; letter-spacing: .12em;
      text-transform: uppercase; color: rgba(251,191,36,.7);
      margin-bottom: 1px;
    }
    .hp-ctl-timer-val {
      font-size: 18px; font-weight: 900; color: #fbbf24;
      font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
      line-height: 1.1;
      text-shadow: 0 0 12px rgba(251,191,36,.6);
    }
    /* urgent: red + pulse */
    .hp-ctl-timer-overlay.urgent .hp-ctl-timer-inner {
      border-color: rgba(248,81,73,.7);
      box-shadow: 0 0 22px rgba(248,81,73,.4), 0 4px 16px rgba(0,0,0,.6);
      animation: ctl-timer-pulse 1s ease-in-out infinite;
    }
    .hp-ctl-timer-overlay.urgent .hp-ctl-timer-val { color: #f87171; text-shadow: 0 0 12px rgba(248,81,73,.6); }
    .hp-ctl-timer-overlay.urgent .hp-ctl-timer-label { color: rgba(248,81,73,.8); }
    @keyframes ctl-timer-pulse {
      0%,100% { transform: scale(1); }
      50%      { transform: scale(1.04); }
    }

    /* ── Queue position badge (for current user who's already in queue) ── */
    .hp-ctl-queue-position-badge {
      width: 100%; min-height: 32px; padding: 7px 9px; border-radius: 9px;
      background: rgba(162,93,220,.1); border: 1px solid rgba(162,93,220,.3);
      color: #c084fc; font-size: 10px; font-weight: 700;
      display: flex; align-items: center; justify-content: center; gap: 7px;
      text-align: center;
    }

    /* ── Suppress old countdown row (no longer rendered, just safety) ── */
    .hp-ctl-countdown { display: none !important; }

    /* ── Responsive hardening: keep Controller Lab actions visible on small screens ── */
    @media (max-width: 1366px), (max-height: 900px) {
      /* NEW LAYOUT: row-wrap stays intact; cards compress to min-width */
      .hp-ctl-list {
        overflow-y: auto;
        overflow-x: hidden;
        flex-direction: row;
        flex-wrap: wrap;
      }

      /* OLD hp-ctl-col styles kept for graceful fallback (should never render) */
      .hp-ctl-col {
        padding: 10px 8px 8px;
        gap: 6px;
        min-width: 150px;
        width: 150px;
        flex: 0 0 150px;
        max-width: 150px;
      }

      .hp-ctl-col-img {
        width: 74px;
        height: 74px;
        padding: 4px;
      }

      .hp-ctl-col-name { font-size: 10px; }
      .hp-ctl-ip-chip-val { font-size: 10px; }
      .hp-ctl-ip-chip { padding: 4px 8px; }
      .hp-ctl-col-status { font-size: 8px; padding: 2px 8px; }

      .hp-ctl-user-strip {
        padding: 7px 10px;
      }

      .hp-ctl-col-actions {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        gap: 4px;
      }

      .hp-ctl-book-btn,
      .hp-ctl-overlay-settings,
      .hp-ctl-queue-position-badge {
        min-height: 30px;
        padding: 6px 8px;
        font-size: 9px;
      }
    }

/* ══════════════════════════════════════════════════════════════════════════
   ssn-1 (2026-08-12, MACE) — ONE MENU · SIDE FLYOUTS
   Appended LAST on purpose: these rules must beat the older .ss-quickbase-*
   / .ss-menu-su-* blocks above, and the cascade here is by source order.

   ▶ MANDATORY RULE (Support Studio, permanent)
     A sub-menu list opens to the RIGHT of its parent panel. Never below.
     There is deliberately NO `top: 100%` / `top: calc(100% …)` rule in this
     section — the coordinates come from core_ui.js `SUB_PLACEMENT`, and
     tests/unit/studio_menu_nav.test.js fails the build if a downward rule
     appears in any studio stylesheet.
   ══════════════════════════════════════════════════════════════════════ */

/* The row that owns a flyout. Static, not positioned: the panel is portaled
   to <body> and placed in viewport coordinates, so a positioned ancestor here
   would buy nothing and could become a containing block by accident. */
.ss-sub { display: block; }

.ss-sub-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border-radius: 7px; cursor: pointer; text-align: left;
  background: transparent; border: 1px solid transparent;
  color: var(--ss-muted, rgba(255,255,255,.62));
  font-family: var(--ss-font, inherit); font-size: 12px; font-weight: 600;
  transition: background .12s ease, color .12s ease;
}
.ss-sub-trigger > i:first-child { width: 14px; text-align: center; }
.ss-sub-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-sub-caret {
  flex: 0 0 auto; font-size: 9px; opacity: .55; margin-left: 4px;
  transition: transform .14s ease, opacity .14s ease;
}
.ss-sub-trigger:hover,
.ss-sub-trigger:focus-visible {
  background: var(--ss-surface2, rgba(255,255,255,.06));
  color: var(--ss-text, #e6edf3);
}
.ss-sub.sub-open > .ss-sub-trigger {
  background: var(--ss-surface2, rgba(255,255,255,.08));
  color: var(--ss-text, #e6edf3);
}
.ss-sub.sub-open > .ss-sub-trigger .ss-sub-caret { opacity: 1; transform: translateX(2px); }
/* The QuickBase logo keeps its top-bar size now that it lives on a menu row. */
.ss-sub-trigger .ss-quickbase-logo { width: 13px; height: 13px; }

/* A hairline between menu sections — the flyout rows and the plain rows
   should not read as one undifferentiated list. */
.ss-menu-sep {
  height: 1px; margin: 4px 6px;
  background: var(--ss-border, rgba(255,255,255,.09));
}

/* ── THE FLYOUT ────────────────────────────────────────────────────────────
   Portaled to <body> by core_ui.js. Fixed, hidden until `.open`, coordinates
   written by wireSubmenu().position(). `left`/`top` are placeholders: the
   real values are always assigned before the panel is shown. */
.ss-sub-panel {
  position: fixed; left: 0; top: 0;
  display: none; flex-direction: column; gap: 2px;
  min-width: 188px; max-width: min(320px, 92vw);
  max-height: min(70vh, 560px); overflow-y: auto; overflow-x: hidden;
  padding: 5px; border-radius: 10px;
  border: 1px solid var(--ss-border2, rgba(34,211,238,.3));
  background: var(--ss-surface, rgba(13,17,23,.98));
  box-shadow: 0 14px 32px rgba(0,0,0,.5);
  z-index: 4100;                      /* above #ss-menu-dropdown (4000) */
}
.ss-sub-panel.open { display: flex; }
.ss-sub-panel .ss-tab,
.ss-sub-panel .ss-menu-action { width: 100%; justify-content: flex-start; }

/* The System Update list used to be an INDENTED block stacked inside the menu
   (dashed rail, left margin). As a flyout it is a panel in its own right — the
   indentation would read as a broken nest. */
.ss-sub-panel.ss-menu-su-list {
  padding: 5px; margin-left: 0; border-left: none;
}
.ss-sub-panel .ss-menu-su-item { border-radius: 7px; }
.ss-sub-panel .ss-menu-su-empty { padding: 8px 10px; }

@media (prefers-reduced-motion: reduce) {
  .ss-sub-caret { transition: none; }
}