/* ── Header ─────────────────────────────────────────── */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 24px;
      background: rgba(9,9,11,0.85);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid var(--glass-border);
      -webkit-app-region: drag;
      z-index: 100;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    header h1 {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--accent), #60a5fa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .status-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 13px;
      -webkit-app-region: no-drag;
    }

    .status-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--red);
      transition: all var(--transition-smooth);
      box-shadow: 0 0 6px rgba(244,63,94,0.4);
    }
    .status-dot.connected { background: var(--green); box-shadow: 0 0 8px rgba(34,197,94,0.4); }
    .status-dot.degraded { background: var(--orange); box-shadow: 0 0 8px rgba(245,158,11,0.4); }
    .status-dot.stalled { background: var(--red); box-shadow: 0 0 10px rgba(244,63,94,0.5); animation: stalledPulse 1.5s ease-in-out infinite; }

    @keyframes stalledPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }


    #stats { color: var(--text-dim); font-size: 12px; }

    #counter {
      background: var(--accent-dim);
      color: var(--accent);
      padding: 3px 12px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

/* ── Login Area ─────────────────────────────────────── */
    .login-area {
      display: flex;
      align-items: center;
      gap: 10px;
      -webkit-app-region: no-drag;
    }

    .login-status {
      font-size: 11px;
      color: var(--text-dim);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .login-status .dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      display: inline-block;
      transition: all var(--transition-smooth);
    }
    .login-status .dot.on { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.4); }
    .login-status .dot.off { background: var(--red); box-shadow: 0 0 6px rgba(244,63,94,0.3); }
    .login-status .dot.checking { background: var(--orange); animation: pulse-dot 1.5s infinite; }
    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Session Expired Banner ─────────────────────────── */
    .session-banner {
      display: none;
      background: rgba(244,63,94,0.08);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(244,63,94,0.2);
      border-radius: var(--radius-md);
      padding: 10px 16px;
      margin: 8px 24px 0;
      font-size: 12px;
      color: var(--text);
      align-items: center;
      gap: 12px;
    }
    .session-banner.show { display: flex; }
    .session-banner .sb-icon { font-size: 16px; }
    .session-banner .sb-msg { flex: 1; }
    .session-banner .sb-btn {
      padding: 6px 16px; border-radius: var(--radius-sm);
      background: var(--accent); color: #000;
      border: none; cursor: pointer; font-size: 11px; font-weight: 600;
      transition: all var(--transition-fast);
    }
    .session-banner .sb-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }

    .auth-debug-banner {
      display: none;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      margin: 8px 24px 0;
      border-radius: var(--radius-md);
      border: 1px solid var(--glass-border);
      background: rgba(17,17,19,0.88);
      backdrop-filter: blur(12px);
      font-size: 12px;
    }
    .auth-debug-banner.show { display: flex; }
    .auth-debug-banner[data-kind="info"] {
      border-color: rgba(99,102,241,0.25);
      background: rgba(99,102,241,0.08);
    }
    .auth-debug-banner[data-kind="success"] {
      border-color: rgba(34,197,94,0.25);
      background: rgba(34,197,94,0.08);
    }
    .auth-debug-banner[data-kind="warning"] {
      border-color: rgba(245,158,11,0.25);
      background: rgba(245,158,11,0.08);
    }
    .auth-debug-banner[data-kind="error"] {
      border-color: rgba(244,63,94,0.25);
      background: rgba(244,63,94,0.08);
    }
    .auth-debug-label {
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.7px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 100px;
      border: 1px solid currentColor;
      color: var(--text-secondary);
    }
    .auth-debug-banner[data-kind="info"] .auth-debug-label { color: #8b93ff; }
    .auth-debug-banner[data-kind="success"] .auth-debug-label { color: var(--green); }
    .auth-debug-banner[data-kind="warning"] .auth-debug-label { color: var(--orange); }
    .auth-debug-banner[data-kind="error"] .auth-debug-label { color: var(--red); }
    .auth-debug-message {
      flex: 1;
      color: var(--text);
      line-height: 1.45;
    }

    .btn {
      padding: 8px 16px;
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      backdrop-filter: blur(8px);
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all var(--transition-fast);
      -webkit-app-region: no-drag;
    }
    .btn:hover { background: var(--surface-hover); border-color: var(--border-hover); color: var(--text); transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }
    .btn-accent {
      background: var(--accent);
      color: #000;
      border-color: transparent;
      font-weight: 600;
    }
    .btn-accent:hover { background: var(--accent-hover); box-shadow: 0 0 20px var(--accent-glow); }
    .btn-danger { border-color: rgba(244,63,94,0.2); color: var(--red); }
    .btn-danger:hover { background: rgba(244,63,94,0.1); border-color: rgba(244,63,94,0.3); }
    .btn-small { padding: 6px 12px; font-size: 11px; }

/* ── Latency Badge ─────────────────────────────────── */
    .latency-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 100px;
      font-family: "SF Mono", "Consolas", monospace;
    }
    .latency-badge.fast {
      background: rgba(34,197,94,0.1);
      color: var(--green);
    }
    .latency-badge.medium {
      background: rgba(245,158,11,0.1);
      color: var(--orange);
    }
    .latency-badge.slow {
      background: rgba(244,63,94,0.1);
      color: var(--red);
    }

    .age-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: var(--radius-md);
      letter-spacing: 0.2px;
      min-height: 48px;
    }
    .age-badge.fresh {
      background: rgba(34,197,94,0.12);
      color: var(--green);
    }
    .age-badge.recent {
      background: rgba(245,158,11,0.12);
      color: var(--orange);
    }
    .age-badge.old {
      background: rgba(244,63,94,0.12);
      color: var(--red);
    }

/* ── Sound toggle + Volume ─────────────────────────── */
    .sound-toggle {
      cursor: pointer;
      font-size: 14px;
      user-select: none;
      padding: 4px 6px;
      border-radius: var(--radius-sm);
      transition: all var(--transition-fast);
    }
    .sound-toggle:hover { background: var(--surface-hover); }

    .volume-group {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .volume-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 72px;
      height: 3px;
      border-radius: 2px;
      background: rgba(255,255,255,0.08);
      outline: none;
      cursor: pointer;
    }
    .volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--accent);
      cursor: pointer;
      transition: all var(--transition-fast);
      box-shadow: 0 0 8px var(--accent-glow);
    }
    .volume-slider::-webkit-slider-thumb:hover {
      transform: scale(1.3);
      box-shadow: 0 0 14px var(--accent-glow);
    }
    .volume-pct {
      font-size: 9px;
      color: var(--text-dim);
      font-family: "SF Mono", "Consolas", monospace;
      min-width: 26px;
      text-align: right;
    }

/* ── Header: ultra-compact single bar ─────────────── */
      header {
        padding: 6px 12px;
        -webkit-app-region: no-drag;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        position: sticky;
        top: 0;
        z-index: 200;
      }
      .header-left {
        display: contents;
      }
      header h1 {
        font-size: 11px;
        flex-shrink: 0;
        letter-spacing: 0.5px;
      }
      #counter {
        padding: 2px 8px;
        font-size: 10px;
      }
      #stats {
        font-size: 10px;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

/* ── Status dot acts as toggle for stats ──────────── */
      .status-dot {
        cursor: pointer;
        width: 10px; height: 10px;
      }

/* ── Login area: compact row ──────────────────────── */
      .login-area {
        display: flex;
        gap: 4px;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        order: 10;
        width: 100%;
        padding: 4px 0;
        scrollbar-width: none;
      }
      .login-area::-webkit-scrollbar { display: none; }
      .login-status {
        font-size: 10px;
        flex-shrink: 0;
        white-space: nowrap;
      }
      .login-status #loginLabel { display: none; }
      #btnVerifySession { display: none; }
      #btnCookieSync { display: none; }
      .login-area .btn {
        font-size: 11px;
        padding: 6px 10px;
        min-height: 32px;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .login-area .btn-accent {
        padding: 6px 12px;
      }