/* Gabut Agent — Web Client Styles
 *
 * Design tokens (v0.7.3 UI pass). The old palette / spacing / motion
 * defaulted to the "cyberpunk-lite" template every AI-generated dashboard
 * ships: cold indigo-black, 20-24px rounds, pulsing radial glow behind the
 * login card, gradient-text brand, huge dropshadows, 12+ background-blurs,
 * a floating emoji logo. Killed all of that. Now:
 *   - Warm neutral greys (not cold #0a0a1a purple)
 *   - Single opinionated accent (amber #d97706) — distinctive on purpose
 *   - Small radii (4/6px) — flat, technical
 *   - Hairline borders instead of dropshadows for elevation
 *   - No glassmorphism (opaque surfaces)
 *   - No entry animations, no glow pulses, no floating logos
 *   - Numerics in tabular-nums so quality metrics line up
 */

:root {
    --bg-primary: var(--gabut-color-bg, #0d0d0d);
    --bg-secondary: var(--gabut-color-surface, #161616);
    --bg-card: var(--gabut-color-surface, #161616);
    --bg-card-elevated: var(--gabut-color-surface-elevated, #1c1c1c);
    --bg-card-border: var(--gabut-color-border, #262626);
    --text-primary: var(--gabut-color-text, #e5e5e5);
    --text-secondary: var(--gabut-color-text-secondary, #a3a3a3);
    /* WCAG 1.4.3 AA: --text-muted clears 4.5:1 against --bg-primary (#0d0d0d).
       Used by .input-hint, .empty-state, .connection-meta, .footer-link. */
    --text-muted: #a3a3a3;
    /* v0.7.3 UI pass, iteration 2. Amber #d97706 read warning-y and
       muddy on the warm-neutral dark bg. Going monochrome-first
       instead: near-white for the primary CTA (16.7:1 on --bg-primary,
       AAA), a single soft blue #60a5fa for the brand chip + focus
       rings + links (7.3:1 on --bg-primary, AAA). Status colors
       (success green, danger red, warning amber) reserved for status
       ONLY — never used as brand accent. This is the Vercel/Linear
       playbook, opposite of the "pick a candy accent" AI-dashboard
       default. */
    --accent: #f5f5f5;
    --accent-hover: #ffffff;
    --accent-fg: #0d0d0d;              /* Text color on --accent buttons */
    --accent-tint: rgba(255, 255, 255, 0.06);
    --accent-glow: rgba(255, 255, 255, 0.10);
    --brand-mark: var(--gabut-color-brand, #60a5fa); /* Logo chip + focus ring + link color */
    --brand-mark-hover: var(--gabut-color-brand-hover, #93c5fd);
    --success: var(--gabut-color-success, #22c55e);
    --danger: var(--gabut-color-danger, #ef4444);
    --warning: var(--gabut-color-warning, #f59e0b);
    --info: var(--gabut-color-info, #3b82f6);
    --border-subtle: var(--gabut-color-border, #262626);
    --border-strong: var(--gabut-color-border-strong, #333333);
    --radius: var(--gabut-radius-md, 6px);
    --radius-sm: var(--gabut-radius-sm, 4px);
    --radius-lg: var(--gabut-radius-lg, 8px);
    /* No shadow-lg — elevation reads via border color + a small ambient
       inset shadow. The old 0 20px 60px black cast made every card look
       like it was floating on a Behance mockup. */
    --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    /* Motion cap: 150ms max on any state transition. The previous 250ms
       default felt slow enough on hover that it read as "designer trying
       to be fancy". */
    --transition: all 0.15s ease;
}

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

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ===== TOP BAR ===== */
.setup-guide {
    width: 100%;
    padding: 20px 24px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-secondary);
}

.setup-guide h2 { font-size: 18px; margin-bottom: 8px; }
.setup-guide p, .setup-guide li, .enrollment-steps li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.setup-guide ol, .enrollment-steps { padding-left: 22px; margin: 12px 0; }
.setup-guide li, .enrollment-steps li { padding-left: 4px; margin-bottom: 8px; }
.setup-guide a, .enrollment-steps a { color: var(--brand-mark); text-underline-offset: 3px; }
.enroll-body > .input-hint { display: block; margin-bottom: 16px; }
#enroll-code-result .input-hint { display: block; margin-top: 12px; line-height: 1.6; }

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: var(--bg-primary);
    /* No backdrop-filter — opaque top bar reads intentional, not floaty. */
    border-bottom: 1px solid var(--bg-card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
}

.top-bar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    /* Numerals in tabular so the version badge stays put across renders. */
    font-variant-numeric: tabular-nums;
}

/* Logo: hand-drawn 'g' from apps/shared/assets/mark.svg. The wordmark
   beside it is real text so assistive technology reads the product name. */
.top-bar .brand-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    /* Bump target size slightly beyond 20×20 icon for click hit-area. */
    padding: 4px 2px;
    border-radius: var(--radius-sm);
}
.top-bar .brand-link:hover {
    color: var(--text-primary);
}
.top-bar .brand-link:focus-visible {
    outline: 2px solid var(--brand-mark);
    outline-offset: 1px;
}

/* Inline SVG mark — no CSS mask needed since stroke="currentColor"
   resolves against the ancestor colour directly. The favicon
   equivalent lives at /shared/assets/mark.svg for browser tabs. */
.top-bar .brand-mark-svg {
    flex-shrink: 0;
}

/* Wordmark: the canonical product name in a rounded system-ui stack
   (SF Pro Rounded on Apple, Segoe UI Variable
   on Windows 11, Nunito if user has it, else the default sans). No
   external font load — nothing to hit the CSP or CDN. */
.logo-wordmark {
    font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display",
                 "Segoe UI", system-ui, -apple-system, "Nunito", sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
    color: inherit;
}
.logo-wordmark.large {
    font-size: 40px;
    letter-spacing: -0.035em;
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: var(--accent);
}

.user-info .user-icon {
    font-size: 16px;
}

.btn-auth {
    min-height: 34px;
    padding: 8px 16px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.btn-auth:hover {
    background: var(--accent-hover);
    /* No translateY lift, no glow shadow. Color change is enough. */
}

.btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* ===== LOGIN PAGE ===== */

.login-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding: 80px 24px 24px;
    position: relative;
    overflow: hidden;
}

.login-container.has-top-bar {
    padding-top: 80px;
}

/* v0.7.3 UI pass: killed the pulsing radial "atmosphere" behind the
   login card. Kept the .login-glow selector so the empty <div> in
   markup still resolves — it just no-ops now. Zero movement, zero
   backdrop-filter cost. */
.login-glow {
    display: none;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
    /* No entry animation. If you want the card to fade in, it should
       coincide with data arriving, not just render. */
}

.login-header {
    text-align: center;
    margin-bottom: 36px;
}

/* v0.7.3 UI pass: killed the floating emoji logo. A logo that bobs
   in place at 3 Hz is the single most reliable "this is AI-designed"
   tell in a login page. */
.logo-icon {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 0;   /* hides any leftover glyph in older markup */
    line-height: 1;
}
.logo-icon::before {
    content: "GA";
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-mark);
    display: inline-block;
    padding: 4px 8px;
    border: 1.5px solid var(--brand-mark);
    border-radius: var(--radius-sm);
}

.login-header h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.subtitle {
    color: var(--text-secondary);
    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-group input:focus {
    border-color: var(--brand-mark);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.input-hint {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 45px;
}

.toggle-pass {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.toggle-pass:hover {
    opacity: 1;
}

.btn-connect {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 8px;
}

.btn-connect:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--accent-glow);
}

.btn-connect:active {
    transform: translateY(0);
}

.btn-connect:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.error-msg {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size: 13px;
    text-align: center;
}

.login-footer {
    margin-top: 28px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.login-footer .separator {
    margin: 0 8px;
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-link:hover {
    color: var(--accent);
}

.auth-mode-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* ===== SESSION PAGE ===== */

.session-body {
    margin: 0;
    background: #000;
    overflow: hidden;
    height: 100vh;
}

.session-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
}

/* View Mode: scroll (1:1 with scrollbars) */
.session-body.view-scroll #session-viewport {
    overflow: auto;
}
.session-body.view-scroll .session-video {
    width: auto;
    height: auto;
    object-fit: none;
}

/* View Mode: original (1:1 centered, clipped) */
.session-body.view-original {
    overflow: hidden;
}
.session-body.view-original .session-video {
    width: auto;
    height: auto;
    object-fit: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 1:1 edge-follow mode. Cursor messages update left/top in the controller;
   the viewport stays clipped so no deceptive scrollbars appear. */
.session-body.view-edge {
    overflow: hidden;
}
.session-body.view-edge .session-video {
    width: auto;
    height: auto;
    object-fit: none;
    position: absolute;
}

/* Toolbar select (view mode dropdown) */
.toolbar-select {
    background: rgba(255,255,255,0.08);
    color: #e8e8f0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    outline: none;
}
.toolbar-select:hover {
    background: rgba(255,255,255,0.14);
}
.toolbar-select option {
    background: #1a1a2e;
    color: #e8e8f0;
}

/* Status Bar */
.status-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 10, 26, 0.85);
    /* Every backdrop-filter in this file is paired with -webkit-backdrop-filter.
       Safari only shipped the unprefixed property in 18, and BROWSER_SUPPORT.md
       declares a Safari/iOS 14 floor — without the prefix the blur silently
       no-ops on every supported Safari. The rgba() background above is the
       readable fallback either way, so this is polish, not correctness. */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 8px 16px;
    display: none;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    font-size: 13px;
    transition: opacity 0.3s, transform 0.3s;
    flex-wrap: wrap;
    gap: 8px;
}

#status-trigger {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #151522;
    color: #cbd5e1;
    font-size: 11px;
    cursor: pointer;
    z-index: 1001;
}

#status-trigger[hidden] { display: none; }
#status-bar.toolbar-collapsed { visibility: hidden; pointer-events: none; }
#session-viewport {
    position: fixed;
    inset: var(--session-toolbar-height, 0px) 0 0;
    overflow: hidden;
}
#btn-remote-shortcuts[aria-pressed="true"] { background: #2563eb; color: white; }

.cursor-overlay {
    position: fixed;
    pointer-events: none;
    z-index: 100;
    display: none;
}

.status-bar .brand {
    font-weight: 600;
    color: var(--accent);
    font-size: 14px;
}

.stats-overlay {
    display: flex;
    gap: 16px;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
}

.stats-overlay .stat-value {
    color: var(--accent);
    font-weight: 500;
}

.status-text {
    color: var(--text-secondary);
}

.toolbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
}

.toolbar button {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    transition: var(--transition);
    white-space: nowrap;
}

.toolbar button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.15);
}

.toolbar .btn-danger {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ff6b6b;
}

.toolbar .btn-danger:hover {
    background: rgba(239, 68, 68, 0.35);
}

.toolbar .btn-active {
    background: var(--accent-tint);
    border-color: var(--brand-mark);
    color: var(--brand-mark);
    box-shadow: none;
}

/* Toolbar Dropdown Menus */
.toolbar-dropdown {
    position: relative;
    display: inline-block;
}

.toolbar-dropdown-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    transition: var(--transition);
    white-space: nowrap;
}

.toolbar-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.15);
}

.toolbar-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0;
    min-width: 200px;
    max-width: min(360px, calc(100vw - 24px));
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    background: var(--bg-card-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 6px;
    z-index: 2000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.toolbar-dropdown:hover .toolbar-dropdown-menu,
.toolbar-dropdown.open .toolbar-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toolbar-dropdown-menu button {
    background: transparent;
    color: var(--text-primary);
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s;
}

.toolbar-dropdown-menu button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.toolbar-dropdown-menu button.btn-active {
    background: var(--accent-tint);
    color: var(--brand-mark);
}

.toolbar-dropdown-menu .toolbar-select {
    width: 100%;
    margin: 2px 0;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
}

.toolbar-dropdown-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
}

/* Connect Overlay */
.connect-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a1a, #12122a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.connect-overlay .icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.connect-overlay h2 {
    font-weight: 400;
    margin-bottom: 8px;
}

.connect-overlay .desc {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
}

.connect-overlay .debug-log {
    width: 400px;
    max-width: 90vw;
    height: 120px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 10px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
    color: var(--accent);
}

.connect-overlay-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    max-width: 90vw;
}

.connection-action {
    min-height: 44px;
    min-width: 144px;
    padding: 10px 20px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-card-elevated);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.connection-action:hover {
    background: var(--bg-secondary);
    border-color: var(--text-secondary);
}

.connection-action[hidden] {
    display: none;
}

.connection-action-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

.connection-action-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.connection-action:focus-visible {
    outline: 2px solid var(--brand-mark);
    outline-offset: 3px;
}

.debug-log div {
    padding: 1px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* File Panel */
.file-panel {
    position: fixed;
    top: 46px;
    left: 12px;
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--radius);
    padding: 12px;
    display: none;
    max-height: 75vh;
    min-width: 320px;
    overflow-y: auto;
    z-index: 900;
    box-shadow: var(--shadow-lg);
}

.file-panel .file-header {
    font-weight: 600;
    font-size: 13px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
    color: var(--accent);
}

.file-item {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}

.file-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Upload Overlay */
.upload-overlay {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--radius);
    padding: 16px;
    width: 320px;
    z-index: 2000;
    display: none;
    box-shadow: var(--shadow-lg);
}

.upload-overlay .upload-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
}

.upload-overlay .upload-filename {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;
}

.upload-overlay .upload-percent {
    color: var(--accent);
    font-weight: 600;
}

.progress-bar-bg {
    background: rgba(255, 255, 255, 0.08);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    height: 100%;
    width: 0%;
    transition: width 0.2s;
}

.upload-overlay .btn-cancel {
    margin-top: 10px;
    width: 100%;
    padding: 8px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ff6b6b;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    z-index: 9999;
    display: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
}

/* ===== Mobile Touch Controls ===== */
.mobile-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #000;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px var(--accent-glow);
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: var(--transition);
}

.mobile-fab:active {
    transform: scale(0.95);
}

.mobile-fab.expanded {
    background: rgba(239, 68, 68, 0.9);
}

/* Mobile Bottom Toolbar */
.mobile-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--bg-card-border);
    display: none;
    padding: 8px;
    z-index: 1100;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-toolbar-inner {
    display: flex;
    gap: 8px;
    min-width: max-content;
    padding: 0 8px;
}

.mobile-toolbar button {
    flex-shrink: 0;
    min-width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: var(--transition);
}

.mobile-toolbar button span {
    font-size: 9px;
    color: var(--text-secondary);
}

.mobile-toolbar button:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.mobile-toolbar button.active {
    background: rgba(74, 222, 128, 0.2);
    border-color: var(--accent);
}

.mobile-toolbar button.btn-danger {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

/* Touch Gesture Hint */
.gesture-hint {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: var(--text-primary);
    padding: 16px 24px;
    border-radius: var(--radius);
    font-size: 14px;
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.gesture-hint.visible {
    opacity: 1;
}

/* Connection Status Banner (Mobile) */
.connection-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    padding: 8px 16px;
    text-align: center;
    font-size: 13px;
    z-index: 1300;
    display: none;
    animation: slideDown 0.3s ease-out;
}

.connection-banner.connecting {
    background: rgba(59, 130, 246, 0.9);
}

.connection-banner.connected {
    background: rgba(74, 222, 128, 0.9);
    color: #000;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Touch Zoom Indicator */
.zoom-indicator {
    position: fixed;
    top: 60px;
    right: 16px;
    background: rgba(10, 10, 26, 0.9);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--accent);
    z-index: 1100;
    display: none;
    transition: opacity 0.3s;
}

/* ===== Responsive Breakpoints ===== */

/* Tablet and below */
@media (max-width: 768px) {
    .login-card {
        padding: 36px 28px;
        max-width: 380px;
    }

    .login-glow {
        width: 350px;
        height: 350px;
    }

    /* Session page: Hide desktop toolbar, show mobile */
    .status-bar .toolbar {
        display: none;
    }

    .status-bar {
        justify-content: center;
        padding: 10px;
    }

    .status-bar .brand {
        font-size: 12px;
    }

    .mobile-toolbar {
        display: block;
    }

    .mobile-fab {
        display: flex;
    }

    /* Adjust video for mobile toolbar */
    #session-viewport {
        bottom: 72px;
    }

    /* Shell panel takes more space on tablet */
    .shell-panel {
        height: 50vh;
    }

    /* File panel full width */
    .file-panel {
        left: 8px;
        right: 8px;
        min-width: auto;
        max-width: none;
    }

    /* QoS/Monitor dropdowns centered */
    .qos-dropdown,
    .monitor-dropdown {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    /* Trust panel full width */
    .trust-panel {
        left: 8px;
        right: 8px;
        min-width: auto;
    }

    .connect-overlay .debug-log {
        width: 90vw;
        height: 100px;
    }
}

/* Phone portrait */
@media (max-width: 480px) {
    .login-card {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .login-header h1 {
        font-size: 20px;
    }

    .logo-icon {
        font-size: 40px;
    }

    .form-group input {
        padding: 14px 16px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    .btn-connect {
        padding: 16px;
        font-size: 16px;
    }

    /* Stats hidden, just show quality indicator */
    .stats-overlay {
        display: none;
    }

    .status-bar {
        padding: 8px 12px;
    }

    /* Mobile toolbar scrolls horizontally */
    .mobile-toolbar {
        padding: 6px 4px;
    }

    .mobile-toolbar button {
        min-width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .mobile-toolbar button span {
        font-size: 8px;
    }

    /* Shell panel nearly full screen */
    .shell-panel {
        height: 60vh;
    }

    /* Connect overlay adjustments */
    .connect-overlay .icon {
        font-size: 48px;
    }

    .connect-overlay h2 {
        font-size: 18px;
    }

    .connect-overlay .desc {
        font-size: 13px;
    }

    /* Toast wider on mobile */
    .toast {
        left: 16px;
        right: 16px;
        transform: none;
        text-align: center;
    }

    /* Upload overlay full width */
    .upload-overlay {
        left: 16px;
        right: 16px;
        bottom: 80px;
        width: auto;
    }
}

/* Landscape phone */
@media (max-height: 500px) and (orientation: landscape) {
    .login-card {
        padding: 20px 24px;
    }

    .login-header {
        margin-bottom: 20px;
    }

    .logo-icon {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .login-header h1 {
        font-size: 18px;
    }

    .form-group {
        margin-bottom: 12px;
    }

    /* Shell panel shorter in landscape */
    .shell-panel {
        height: 45vh;
    }

    /* Mobile toolbar smaller */
    .mobile-toolbar button {
        min-width: 40px;
        height: 40px;
    }
}

/* Touch-specific optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .toolbar button,
    .mobile-toolbar button,
    .file-item,
    .qos-option,
    .trust-item {
        min-height: 44px;
    }

    /* Disable hover effects */
    .toolbar button:hover,
    .file-item:hover,
    .qos-option:hover {
        background: inherit;
    }

    /* Better tap feedback */
    .toolbar button:active,
    .file-item:active,
    .qos-option:active {
        background: rgba(255, 255, 255, 0.15);
    }

    /* Prevent text selection on touch */
    .status-bar,
    .mobile-toolbar,
    .toolbar {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Safe area insets for notched phones */
@supports (padding: max(0px)) {
    .mobile-toolbar {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .status-bar {
        padding-top: max(8px, env(safe-area-inset-top));
    }

    .login-container {
        padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --border-subtle: rgba(255, 255, 255, 0.2);
        --text-muted: #888;
    }

    .form-group input {
        border-width: 2px;
    }
}

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

    .login-glow {
        animation: none;
        opacity: 0.5;
    }

    .logo-icon {
        animation: none;
    }
}

/* Version badge */
.version {
    font-family: monospace;
    font-size: 11px;
}

/* ===== Shell Terminal Panel ===== */
.shell-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    background: rgba(13, 17, 23, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--bg-card-border);
    z-index: 950;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.shell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}

.shell-close {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ff6b6b;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 8px;
    font-family: inherit;
}

.shell-close:hover {
    background: rgba(239, 68, 68, 0.4);
}

#shell-terminal {
    flex: 1;
    padding: 4px;
    overflow: hidden;
}

/* ===== QoS / Monitor Dropdowns ===== */
.qos-dropdown,
.monitor-dropdown {
    position: fixed;
    top: 46px;
    right: 100px;
    background: rgba(10, 10, 26, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--radius);
    padding: 8px;
    z-index: 1100;
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    animation: fadeIn 0.15s ease-out;
}

.monitor-dropdown {
    right: 160px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qos-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    padding: 4px 8px 8px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}

.qos-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}

.qos-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ===== Trusted Devices Panel ===== */
.trust-panel {
    position: fixed;
    top: 46px;
    right: 12px;
    background: rgba(10, 10, 26, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--radius);
    z-index: 950;
    box-shadow: var(--shadow-lg);
    min-width: 340px;
    max-height: 60vh;
    overflow-y: auto;
    animation: fadeIn 0.15s ease-out;
}

.trust-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}

.trust-list {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.trust-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--border-subtle);
}

.trust-item:last-child {
    border-bottom: none;
}

.trust-info {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
}

.trust-info small {
    color: var(--text-secondary);
}

/* ===== Download Progress Bar ===== */
.download-progress {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 10, 26, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--bg-card-border);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    z-index: 1000;
    font-size: 12px;
}

.download-name {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.download-percent {
    color: var(--accent);
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

/* ===== Generic btn-danger outside toolbar ===== */
.btn-danger {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ff6b6b;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    padding: 8px;
    transition: var(--transition);
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.35);
}

/* ===== TWO COLUMN LAYOUT ===== */

.main-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 80px 24px 24px;  /* Account for fixed top-bar (56px) + spacing */
    position: relative;
    z-index: 1;
}

/* Account access is a first-class path, but remains optional: direct device-ID
   connections stay immediately available in the cards below. */
.account-gate {
    flex: 1 0 100%;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-left: 3px solid var(--brand-mark);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.account-gate-copy {
    min-width: 0;
}

.account-gate-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--brand-mark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-gate h1 {
    margin: 0 0 5px;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.account-gate p {
    margin: 0 0 7px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.account-gate-note {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.account-gate-actions {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

.account-gate-actions .btn-primary,
.account-gate-actions .btn-secondary {
    min-height: 42px;
    padding-inline: 20px;
    white-space: nowrap;
}

/* ===== CARDS ===== */

.card {
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--radius);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg);
    animation: cardIn 0.5s ease-out;
}

.connect-card {
    flex: 0 0 400px;
    padding: 32px;
}

.history-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
}

.pairings-card {
    flex: 1 0 100%;
    min-width: 0;
}

.pairing-card-header {
    align-items: flex-start;
    gap: 20px;
}

.pairing-card-header h2 {
    margin: 0 0 4px;
    font-size: 16px;
}

.pairing-card-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.pairings-card-body {
    padding: 16px 20px 20px;
}

.pairing-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pairing-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.pairing-item-body {
    flex: 1;
    min-width: 0;
}

.pairing-item-label {
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pairing-device {
    margin-top: 3px;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
}

.pairing-status {
    display: inline-flex;
    margin-top: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.pairing-status-active {
    background: rgba(34, 197, 94, 0.14);
    color: var(--success);
}

.pairing-status-revocation_pending {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
}

.pairing-status-revoked,
.pairing-status-unknown {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
}

.pairing-timestamps {
    display: grid;
    gap: 3px;
    margin-top: 9px;
}

.pairing-timestamp {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    color: var(--text-muted);
    font-size: 11px;
}

.pairing-timestamp-label::after {
    content: ':';
}

.pairing-revoke-button {
    flex-shrink: 0;
    color: var(--danger);
}

.pairing-load-more {
    display: block;
    margin: 14px auto 0;
}

.pairing-state-error {
    color: var(--danger);
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h3 {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== TABS ===== */

.tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 16px;
    background: rgba(0, 0, 0, 0.2);
}

.tab {
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.tab:hover {
    color: var(--text-primary);
}

.tab.active {
    color: var(--accent);
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
}

.tab-panel {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.tab-panel.active {
    display: block;
}

/* ===== TAG FILTER BAR ===== */

.tag-filter-bar {
    margin-bottom: 8px;
}

.tag-pill {
    display: inline-block;
    padding: 4px 12px;
    margin: 0 4px;
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.tag-pill:hover {
    border-color: var(--accent);
}

.tag-pill.active {
    background: var(--accent);
    color: #fff;
}

.tag-count {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 4px;
}

/* ===== CONNECTION LIST ===== */

.connection-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.connection-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.connection-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.connection-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 222, 128, 0.1);
    border-radius: var(--radius-sm);
    font-size: 18px;
}

.connection-info {
    flex: 1;
    min-width: 0;
}

.connection-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connection-id {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.connection-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.connection-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

.connection-item:hover .connection-actions {
    opacity: 1;
}

.connection-actions button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    transition: var(--transition);
}

.connection-actions button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.connection-actions button.btn-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ff6b6b;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-state .icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 14px;
}

/* ===== MODAL ===== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

.modal-overlay.active {
    display: flex;
}

.modal-overlay:not(.hidden) {
    display: flex;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal {
        animation: none;
    }
}

.modal-large {
    max-width: 600px;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ff6b6b;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Authentication dialog: stronger hierarchy and deliberate spacing. The
   generic modal remains unchanged for settings, enrollment, and bookmarks. */
.auth-modal {
    max-width: 460px;
}

.auth-modal .modal-header {
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
}

.auth-modal-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.auth-modal-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-mark);
    border: 1px solid var(--brand-mark);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
}

.auth-modal-heading h2 {
    margin: 0 0 5px;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.auth-modal-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.auth-modal-form {
    padding: 24px;
}

.auth-modal-form .form-group {
    margin-bottom: 18px;
}

.auth-modal-form .form-group input {
    min-height: 44px;
    padding: 11px 12px;
}

.auth-modal-form .error-msg {
    margin: 0 0 16px;
}

.auth-modal-form .modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 4px;
}

.auth-modal-form .modal-actions button {
    width: 100%;
    min-height: 44px;
}

.auth-switch {
    margin: 20px -24px -24px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

.auth-switch a {
    margin-left: 4px;
    font-weight: 600;
}

/* Theme selection already persists through the settings adapter. */
body.light-theme {
    color-scheme: light;
    --bg-primary: #f6f7f9;
    --bg-secondary: #f3f4f6;
    --bg-card: #ffffff;
    --bg-card-elevated: #f8f9fb;
    --bg-tertiary: #f8f9fb;
    --bg-card-border: #d9dde3;
    --border-subtle: #d9dde3;
    --border-strong: #b8c0cb;
    --text-primary: #20242b;
    --text-secondary: #46515f;
    --text-muted: #596372;
    --accent: #20242b;
    --accent-hover: #363e49;
    --accent-fg: #ffffff;
    --brand-mark: #205bb5;
    --brand-mark-hover: #164c9e;
    --success: #16713b;
}

/* ===== SETTINGS MODAL ===== */

#settings-modal .modal {
    max-width: 880px;
    height: min(760px, calc(100dvh - 40px));
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#settings-modal .modal-header,
#settings-modal .modal-footer { flex-shrink: 0; padding: 18px 24px; }
#settings-modal .modal-header h2 { margin: 0; font-size: 20px; }
#settings-modal .modal-close { width: 36px; height: 36px; }
#settings-modal .settings-layout { flex-direction: row; flex: 1; min-height: 0; overflow: hidden; }
#settings-modal .settings-nav { display: block; width: 172px; padding: 16px 12px; overflow-y: auto; }
#settings-modal .settings-nav-item { min-height: 42px; margin-bottom: 4px; }
#settings-modal .settings-content { min-width: 0; min-height: 0; padding: 24px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-subtle) transparent; }
#settings-modal .settings-section h3 { margin: 26px 0 10px; font-size: 14px; font-weight: 600; line-height: 1.4; }
#settings-modal .settings-section h3:first-child { margin-top: 0; }
#settings-modal .settings-section select,
#settings-modal .settings-section input[type="number"] {
    display: block; width: 100%; max-width: 360px; min-height: 42px;
    padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: 6px;
    background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 14px;
}
#settings-modal .settings-options-group { display: grid; gap: 2px; padding: 8px; margin-bottom: 0; border-radius: 6px; }
#settings-modal .checkbox-label {
    display: flex; align-items: flex-start; gap: 10px; min-height: 40px;
    margin: 0; padding: 10px 8px; font-size: 14px; line-height: 1.5; cursor: pointer;
}
#settings-modal .checkbox-label input { flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); }
#settings-modal .checkbox-label span { min-width: 0; }
#settings-modal .checkbox-label:hover { background: var(--bg-secondary); border-radius: 4px; }
#settings-modal .checkbox-label:has(input:disabled) { color: var(--text-secondary); cursor: default; }
#settings-modal .input-hint { margin: 6px 8px 12px; line-height: 1.6; font-size: 12px; }
#settings-modal .support-bundle-actions { margin-top: 12px; }
#settings-modal .support-bundle-actions button { flex: 1 1 140px; padding: 10px; min-height: 40px; }
#settings-modal #wc-custom-quality-controls:not(.hidden) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; margin-top: 12px; }
#settings-modal #wc-custom-quality-controls > p { grid-column: 1 / -1; margin: 0; }
#settings-modal #wc-custom-quality-controls > label { display: grid; gap: 8px; font-size: 13px; }
#settings-modal .shortcut-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }
#settings-modal kbd { white-space: nowrap; font-size: 12px; }
#settings-modal input[type="range"] { min-width: 0; flex: 1; accent-color: var(--accent); }

@media (max-width: 640px) {
    #settings-modal { padding: 12px; }
    #settings-modal .modal { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
    #settings-modal .modal-header, #settings-modal .modal-footer { padding: 12px 16px; }
    #settings-modal .settings-layout { flex-direction: column; }
    #settings-modal .settings-nav { display: flex; width: 100%; padding: 8px; border-right: 0; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; flex-shrink: 0; }
    #settings-modal .settings-nav-item { width: auto; margin: 0; flex: 0 0 auto; padding: 10px 12px; }
    #settings-modal .settings-content { padding: 20px 16px; }
    #settings-modal .settings-section select { max-width: none; }
    #settings-modal #wc-custom-quality-controls:not(.hidden) { grid-template-columns: minmax(0, 1fr); }
}


.settings-layout {
    display: flex;
    gap: 0;
    min-height: 400px;
}

.settings-nav {
    width: 180px;
    border-right: 1px solid var(--border-subtle);
    padding: 12px;
    flex-shrink: 0;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}

.settings-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.settings-nav-item.active {
    background: rgba(74, 222, 128, 0.1);
    color: var(--accent);
}

.settings-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.settings-section {
    display: none;
}

.settings-section.active {
    display: block;
}

.settings-options-group {
    background: var(--bg-tertiary, rgba(255,255,255,0.03));
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle, #333);
    margin-bottom: 16px;
}

.support-bundle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 8px;
}

.support-bundle-actions button {
    width: auto;
}

.support-bundle-preview {
    max-height: 240px;
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.settings-options-group .checkbox-label {
    margin-bottom: 8px;
}
.settings-options-group .checkbox-label:last-child {
    margin-bottom: 0;
}

.settings-section h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.setting-row:last-child {
    border-bottom: none;
}

.setting-label {
    font-size: 13px;
    color: var(--text-primary);
}

.setting-description {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    transition: var(--transition);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: var(--transition);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
    background: #000;
    transform: translateX(20px);
}

/* Select dropdown */
.setting-select {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    min-width: 120px;
}

.setting-select:focus {
    outline: none;
    border-color: var(--accent);
}

/* ===== BUTTONS ===== */

.btn-primary {
    padding: 9px 16px;
    background: var(--accent);
    color: #000;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-primary:active {
    background: var(--accent-hover);
}

.btn-secondary {
    padding: 9px 16px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.btn-secondary:hover {
    background: var(--bg-card-elevated);
    border-color: var(--text-muted);
}

/* ===== TOAST NOTIFICATIONS ===== */

.toast.success {
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.1);
}

.toast.error {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

.toast.show {
    display: block;
    animation: toastIn 0.3s ease-out;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ===== AUTH MODAL TABS ===== */

.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
}

.auth-tab {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.auth-tab:hover {
    color: var(--text-primary);
}

.auth-tab.active {
    color: var(--accent);
}

.auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

/* ===== RESPONSIVE: Two Column Layout ===== */

@media (max-width: 900px) {
    .main-container {
        flex-direction: column;
    }

    .connect-card {
        flex: none;
        width: 100%;
    }

    .history-card {
        max-height: 50vh;
    }
}

@media (max-width: 768px) {
    .top-bar {
        padding: 0 16px;
    }

    .top-bar .brand-text {
        display: none;
    }

    .login-container {
        padding: 72px 16px 16px;
    }

    .connect-card {
        padding: 24px;
    }

    .settings-layout {
        flex-direction: column;
        min-height: auto;
    }

    .settings-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        display: flex;
        overflow-x: auto;
        padding: 8px;
    }

    .settings-nav-item {
        flex-shrink: 0;
        padding: 8px 12px;
    }

    .modal-large {
        max-width: 100%;
    }
}

/* ===== CHAT PANEL ===== */

.chat-panel {
    position: fixed;
    top: 46px;
    right: 12px;
    width: 340px;
    max-height: 60vh;
    background: rgba(10, 10, 26, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--radius);
    z-index: 950;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: fadeIn 0.15s ease-out;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}

.chat-messages {
    flex: 1;
    min-height: 200px;
    max-height: 350px;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 40px 20px;
}

.chat-message {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-message.sent {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #000;
    border-bottom-right-radius: 4px;
}

.chat-message.received,
.chat-msg.from-host {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-msg.from-viewer {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #000;
    border-bottom-right-radius: 4px;
}

.chat-msg.from-host {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.chat-sender {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: 0.7;
}

.chat-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: right;
}

.chat-input-wrapper {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.2);
}

.chat-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
}

.chat-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.chat-input::placeholder {
    color: var(--text-muted);
}

.chat-send-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
}

.chat-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px var(--accent-glow);
}

.chat-send-btn:active {
    transform: scale(0.95);
}

/* Chat panel responsive */
@media (max-width: 480px) {
    .chat-panel {
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 50vh;
    }
}

/* ===== VIEW-ONLY & MUTE INDICATORS ===== */

.view-only-banner {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(245, 158, 11, 0.9);
    color: #000;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 1100;
    display: none;
    animation: slideDown 0.3s ease-out;
}

.view-only-banner.visible {
    display: block;
}

.muted-indicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    z-index: 1100;
    display: none;
    animation: fadeIn 0.2s ease-out;
}

.muted-indicator.visible {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 480px) {
    .connection-actions {
        opacity: 1;
    }

    .connection-item {
        flex-wrap: wrap;
    }

    .connection-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border-subtle);
    }

    .tab {
        padding: 10px 14px;
        font-size: 12px;
    }
}

/* ===== CURSOR MAGNIFIER (Zoom Cursor) ===== */

.cursor-magnifier {
    position: fixed;
    width: 150px;
    height: 150px;
    border: 2px solid #4a9eff;
    border-radius: 50%;
    pointer-events: none;
    display: none;
    z-index: 1000;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 4px rgba(74, 158, 255, 0.2);
}

.cursor-magnifier canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cursor-magnifier .magnifier-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    margin-top: -4px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.toolbar .btn-zoom-cursor-active {
    background: rgba(74, 158, 255, 0.3);
    border-color: rgba(74, 158, 255, 0.5);
}

/* Connection Quality Overlay */
.quality-overlay {
    position: fixed;
    top: 60px;
    right: 20px;
    width: 280px;
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(100, 100, 255, 0.2);
    border-radius: 12px;
    z-index: 200;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    font-family: 'Inter', -apple-system, sans-serif;
    color: #e8e8f0;
    overflow: hidden;
}
.quality-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 600;
}
.quality-overlay-body { padding: 10px 14px; }
.quality-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
}
.quality-label { color: #888; }
.quality-value {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: #ccc;
}
.quality-bar-container {
    margin-top: 8px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.quality-bar {
    height: 100%;
    width: 100%;
    background: #4ade80;
    border-radius: 2px;
    transition: width 0.5s ease, background 0.5s ease;
}

/* ===== Utility classes (P11 cleanup pass) ===== */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-20 { gap: 20px; }
.m-0 { margin: 0; }
.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.text-secondary { color: #888; }
.text-tertiary { color: #aaa; }
.text-primary { color: #fff; }
.text-accent { color: #3b82f6; }
.text-success { color: #10b981; }
.overlay-fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }

/* ===== KEYBOARD FOCUS INDICATORS (WCAG 2.4.7 Level AA) =====
   v0.7.2 A11y: every interactive control gets a visible focus ring when
   reached by keyboard. Uses :focus-visible so mouse clicks don't paint
   the ring (avoids the "button looks stuck focused" look after a click).
   Kept as one global rule so new controls automatically inherit the
   focus style — do not scatter :focus rules across component blocks. */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.tab:focus-visible,
.settings-nav-item:focus-visible,
.modal-close:focus-visible,
.tag-pill:focus-visible,
.btn-icon:focus-visible,
.btn-icon-small:focus-visible,
.footer-link:focus-visible {
    outline: 2px solid var(--brand-mark);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Footer link + inline link color — brand-mark blue reads as a real
   link, not "cool text we want you to click". Brand-link excluded so
   the top-bar wordmark inherits normal text colour, not the link
   blue. */
.footer-link,
a[href]:not(.tab):not(.btn-primary):not(.btn-secondary):not(.btn-auth):not(.brand-link):not(.workspace-tile):not(.mobile-workspace-link) {
    color: var(--brand-mark);
    text-decoration: none;
}
.footer-link:hover,
a[href]:not(.tab):not(.btn-primary):not(.btn-secondary):not(.btn-auth):not(.brand-link):not(.workspace-tile):not(.mobile-workspace-link):hover {
    color: var(--brand-mark-hover);
    text-decoration: underline;
}

/* Brand-link takes text colour on the wordmark; only the SVG mark
   itself takes the brand-mark blue. Split via child rule. */
.top-bar .brand-link {
    color: var(--text-primary);
}
.top-bar .brand-link .brand-mark-svg {
    color: var(--brand-mark);
}

/* ============================================================
 * v0.7.3 UI pass — cross-cutting overrides
 *
 * The style.css above accreted over many features. Rather than hunt
 * down 16 backdrop-filter blurs, 10 diagonal gradients, and ~7 huge
 * 20-24px radii inline, this block strikes them in bulk. Everything
 * here is deliberately override-strength (either high specificity or
 * !important) to survive future PRs that reach for the old
 * template-y treatments without thinking. When you actually want a
 * gradient or a blur, use a targeted class — don't bring the ambient
 * one back.
 *
 * Design intent captured in the tokens above (:root). This block is
 * enforcement, not design.
 * ============================================================ */

/* Kill glassmorphism everywhere. If we ever want a translucent
   surface for a specific overlay, add a targeted class — no ambient. */
.top-bar,
.login-card,
.card,
.modal,
.modal-content,
.dropdown,
.dropdown-menu,
.address-book,
.connection-history,
.recent-connections,
.tab-content,
.toast,
.tooltip,
.settings-modal,
.settings-content,
.diagnostics-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Kill diagonal gradient fills on primary controls. Solid amber
   reads as a real button; gradient-fills read as "AI landing page". */
.btn-auth,
.btn-primary,
.btn-connect,
.btn-cta {
    background-image: none !important;
    background-color: var(--accent) !important;
    color: var(--accent-fg) !important;
}

/* Radii: cap at 8px anywhere. 12+px on interactive chrome is the
   fastest way to make an interface look like a crypto dashboard. */
.login-card,
.card,
.modal,
.modal-content,
.tab-content,
.address-book,
.recent-connections,
.dropdown-menu,
.settings-modal {
    border-radius: var(--radius-lg) !important;
}

.btn-primary,
.btn-secondary,
.btn-auth,
.btn-icon,
.form-group input,
.form-group select,
.form-group textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="search"],
select,
textarea {
    border-radius: var(--radius-sm) !important;
}

/* Numerics in tabular so RTT/FPS/bitrate readouts don't jitter as
   the digits change. Small quality-of-life detail that reads
   "someone actually shipped this". */
.stat-value,
.quality-indicator,
.rtt,
.fps,
.version-badge,
.connection-meta {
    font-variant-numeric: tabular-nums;
}

/* Prefers-reduced-motion: honour it for real. The old CSS declared
   9 @keyframes; a user on reduced-motion still saw pulsing glows
   and floating logos. Belt-and-braces disable. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ===========================================================================
   Remote apps — Text Editor, Resources, Log Watch (v0.7.4)
   Shared shell for the three tool panels ported from the Tauri viewer. They
   use the same fixed-overlay pattern as .shell-panel but sit centred with a
   max width, because unlike the terminal they are read-heavy and benefit from
   a bounded measure.
   =========================================================================== */

.app-panel {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, calc(100vw - 32px));
    height: min(78vh, calc(100vh - 96px));
    background: rgba(13, 17, 23, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--radius);
    z-index: 950;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.app-panel.hidden { display: none; }

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
}

.app-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.app-toolbar input[type="text"],
.app-toolbar input[type="number"],
.app-toolbar select {
    background: var(--bg-primary);
    border: 1px solid var(--bg-card-border);
    color: var(--text-primary, #e6e6e6);
    border-radius: 4px;
    padding: 6px 9px;
    font-size: 12px;
    font-family: inherit;
}

.app-toolbar input[type="text"] { flex: 1 1 200px; min-width: 140px; }
.app-toolbar input[type="number"] { width: 78px; }

.app-toolbar button {
    background: var(--bg-primary);
    border: 1px solid var(--bg-card-border);
    color: var(--text-primary, #e6e6e6);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}

.app-toolbar button:hover { border-color: var(--brand-mark); }
.app-toolbar button.primary { background: var(--brand-mark); color: #06121f; border-color: var(--brand-mark); font-weight: 600; }
.app-toolbar button.primary:hover { background: var(--brand-mark-hover); }

.app-check { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }

.app-body {
    flex: 1;
    overflow: auto;
    padding: 12px 14px;
    min-height: 0;
}

.app-log {
    margin: 0;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-muted);
}

.app-status {
    padding: 7px 14px;
    border-top: 1px solid var(--border-subtle);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* --- Text editor split (file list + textarea) --- */

.app-split { flex: 1; display: flex; min-height: 0; }

.app-sidebar {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
    font-size: 12px;
}

.app-sidebar-head {
    padding: 7px 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    word-break: break-all;
    position: sticky;
    top: 0;
    background: rgba(13, 17, 23, 0.97);
}

.editor-file-row {
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-file-row:hover { background: rgba(255, 255, 255, 0.06); }
.editor-file-up { color: var(--text-muted); }

#editor-textarea {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary, #e6e6e6);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    padding: 12px 14px;
    resize: none;
    outline: none;
}

/* --- Resources --- */

.resources-tabs { display: flex; gap: 4px; }

.resources-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}

.resources-tab:hover { color: var(--accent); }
.resources-tab.active { background: var(--bg-primary); border-color: var(--bg-card-border); color: var(--accent); }

.res-row { margin-bottom: 14px; }

.res-row-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 5px;
    color: var(--text-muted);
}

.res-bar { height: 7px; background: var(--bg-primary); border-radius: 4px; overflow: hidden; }
.res-bar-fill { height: 100%; background: var(--brand-mark); transition: width 0.4s ease; }

.res-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.res-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-weight: 600;
    position: sticky;
    top: 0;
    background: rgba(13, 17, 23, 0.97);
}
.res-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.res-table td.num, .res-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.res-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }

.res-status { padding: 2px 7px; border-radius: 3px; font-size: 11px; }
.res-status.on { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.res-status.off { background: rgba(255, 255, 255, 0.07); color: var(--text-muted); }

.res-action {
    background: var(--bg-primary);
    border: 1px solid var(--bg-card-border);
    color: var(--text-muted);
    border-radius: 3px;
    padding: 3px 9px;
    font-size: 11px;
    cursor: pointer;
    margin-right: 4px;
    font-family: inherit;
}

.res-action:hover { color: var(--accent); border-color: var(--brand-mark); }
.res-action.res-kill:hover { color: var(--danger); border-color: var(--danger); }
.res-action:disabled { opacity: 0.5; cursor: default; }

.res-empty { color: var(--text-muted); font-size: 12px; padding: 20px 0; text-align: center; }
.resources-raw { font-family: ui-monospace, Consolas, monospace; font-size: 11px; white-space: pre-wrap; color: var(--text-muted); }

/* Visually-hidden label text — the panels use placeholder-only inputs, and a
   placeholder is not an accessible name. Keeps the axe label rules green. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 720px) {
    .app-panel { top: 50px; width: calc(100vw - 12px); height: calc(100vh - 62px); }
    .app-sidebar { display: none; }
}

@media (max-width: 900px) {
    .account-gate {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .top-bar {
        height: auto;
        min-height: 52px;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 14px;
    }

    .top-bar-actions {
        width: 100%;
        min-width: 0;
    }

    .user-info {
        flex: 1;
        min-width: 0;
    }

    .user-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top-bar-actions button { flex-shrink: 0; }

    .main-container {
        padding: 120px 14px 20px;
        gap: 14px;
    }

    .account-gate {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        padding: 18px;
    }

    .account-gate-actions {
        width: 100%;
    }

    .account-gate-actions button {
        flex: 1;
    }

    .auth-modal .modal-header,
    .auth-modal-form {
        padding: 20px;
    }

    .auth-switch {
        margin: 20px -20px -20px;
        padding: 16px 20px;
    }

    .pairing-list {
        grid-template-columns: 1fr;
    }

    .pairing-card-header,
    .pairing-item {
        align-items: stretch;
        flex-direction: column;
    }

    .pairing-card-header .btn-secondary,
    .pairing-revoke-button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .account-gate-actions {
        flex-direction: column;
    }

    .modal-overlay {
        padding: 12px;
    }

    .auth-modal-heading {
        gap: 10px;
    }

    .auth-modal-mark {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }
}
/* Address book: bounded pages and persistent filters for larger fleets. */
.book-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.book-filters label { display: flex; flex: 1 1 150px; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.book-filters label:first-child { flex-grow: 2; }
.book-filters input, .book-filters select, .book-row select, .book-group-form input { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-secondary, #171923); color: var(--text-primary); }
.book-group-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; }
.book-group-form input { flex: 1 1 150px; width: auto; }
#book-group-manager summary { cursor: pointer; font-size: 13px; }
#book-summary { margin: 12px 0; color: var(--text-secondary); font-size: 13px; }
.book-row { cursor: default; flex-wrap: wrap; }
.book-row .connection-info { flex: 1 1 180px; overflow-wrap: anywhere; }
.book-row .connection-name { display: block; }
.book-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.book-row-actions select { width: 140px; }
.book-row button, .book-pagination button, .book-group-form button { padding: 7px 10px; border: 1px solid var(--border-subtle); border-radius: 6px; background: transparent; color: var(--text-primary); cursor: pointer; }
.book-row button:hover, .book-pagination button:hover, .book-group-form button:hover { background: var(--bg-secondary); }
.book-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; font-size: 13px; }
.book-pagination button:disabled, .book-group-form button:disabled { opacity: .45; cursor: default; }
.book-state { display: inline-block; margin-top: 5px; color: var(--text-secondary); font-size: 12px; }
.book-state-online { color: #16814a; }
.book-state-install { color: #ad7410; }
.history-card { max-height: none; }
#address-book-panel { overflow: visible; }
@media (max-width: 700px) { .book-row-actions { width: 100%; } .book-row-actions select { flex: 1; } }
.connect-card { align-self: flex-start; }
#address-book-list { max-height: min(60vh, 640px); overflow-y: auto; scrollbar-gutter: stable; }
.book-state-online { color: var(--text-primary); }
.book-state-online::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #26a269; }
.book-state-install { color: var(--text-primary); }
.book-sort { display: block; margin: 10px 0; }
.book-sort select { padding: 8px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 6px; }
.book-more summary { cursor: pointer; padding: 8px; }
.book-more-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; max-width: 280px; }

/* No connection controls or stored device history before server-verified account admission. */
body:not(.viewer-authenticated) .main-container > :not(#account-gate),
body:not(.viewer-authenticated) #btn-settings {
    display: none !important;
}
body:not(.viewer-authenticated) #account-gate {
    display: flex !important;
}