/* © 2026 Robert Bleazard | All Rights Reserved. Unauthorized copying or reverse-engineering is strictly prohibited. */
* { box-sizing: border-box; }

:root {
    /* Layout */
    --layout-padding: 20px;

    /* Brand fonts */
    --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
    --font-mono: inherit; /* tabular-nums on Inter replaces monospace */

    /* ── Layer 1: Palette (change ONLY these for rebranding) ── */
    --palette-primary-rgb: 0, 122, 255;       /* brand/action blue */
    --palette-success-rgb: 52, 199, 89;        /* positive/keeper green */
    --palette-danger-rgb: 255, 59, 48;         /* negative/strike red */
    --palette-warning-rgb: 255, 149, 0;        /* caution/highlight orange */
    --palette-accent-rgb: 88, 86, 214;         /* secondary accent indigo */
    --palette-neutral-rgb: 0, 0, 0;            /* text/overlay base (light mode) */
    --palette-surface-rgb: 255, 255, 255;      /* card/bg base (light mode) */
    --palette-header-rgb: 10, 30, 61;          /* header gradient base */

    /* ── Layer 2: Semantic Tokens (map purpose → palette) ── */
    /* Accents (solid) */
    --accent-blue: rgb(var(--palette-primary-rgb));
    --accent-blue-light: rgba(var(--palette-primary-rgb), 0.08);
    --accent-green: rgb(var(--palette-success-rgb));
    --accent-red: rgb(var(--palette-danger-rgb));
    --accent-orange: rgb(var(--palette-warning-rgb));
    --brand-amber: #D97706;
    --brand-amber-rgb: 217, 119, 6;
    --accent-indigo: rgb(var(--palette-accent-rgb));

    /* Jury-specific semantics */
    --color-keeper-rgb: var(--palette-success-rgb);
    --color-strike-rgb: var(--palette-danger-rgb);
    --color-strike-panel-rgb: var(--palette-warning-rgb);
    --color-action-rgb: var(--palette-primary-rgb);

    /* Readable text variants (darkened accents for light backgrounds) */
    --color-keeper-text: #2e9a4a;
    --color-keeper-text-light: #c8f5d6;
    --color-strike-text: #d13b2f;
    --color-warning-text: #b45309;
    --color-warning-text-light: #ffd4a3;

    /* Surfaces & text */
    --bg-main: #f0f2f5;
    --bg-card: rgb(var(--palette-surface-rgb));
    --bg-tile: rgb(var(--palette-surface-rgb));
    --bg-pool: #f0f2f5;
    --bg-input: rgb(var(--palette-surface-rgb));
    --bg-trial: #e8eaed;
    --row-bg-even: rgba(var(--palette-neutral-rgb), 0.015);
    --row-border-even: rgba(var(--palette-neutral-rgb), 0.04);
    --row-bg-odd: transparent;
    --row-border-odd: transparent;
    --text-main: #1d1d1f;
    --text-muted: #86868b;
    --border-light: #e5e5ea;
    --border-dark: #d2d2d7;
    --fta-border: #8e8e93;
    --note-bg: #fffbeb;
    --note-text: #92400e;
    --note-border: #fde68a;

    /* Branding */
    --theme-prosecution: #1d1d1f;
    --theme-prosecution-light: rgb(var(--palette-primary-rgb));
    --theme-success: rgb(var(--palette-success-rgb));

    /* Header gradient */
    --header-gradient: linear-gradient(135deg, #0a1e3d 0%, #132d5e 50%, #0f2545 100%);
    --header-gradient-dark: linear-gradient(135deg, #06142a 0%, #0c2040 50%, #081a33 100%);

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(var(--palette-neutral-rgb),0.06);
    --shadow-md: 0 2px 8px rgba(var(--palette-neutral-rgb),0.08);
    --shadow-lg: 0 4px 16px rgba(var(--palette-neutral-rgb),0.1);
    --shadow-xl: 0 8px 32px rgba(var(--palette-neutral-rgb),0.14);

    /* Glass (solid fallbacks for enterprise clarity) */
    --glass-bg: var(--bg-card);
    --glass-border: var(--border-light);

    /* ── Tile section tokens (theme-controlled) ── */
    --tile-header-bg: #dfedfb;
    --tile-header-border: rgba(0, 122, 255, 0.12);
    --tile-header-text: #1c1c1e;
    --tile-header-scramble: #3478F6;
    --tile-demo-bg: #ffffff;
    --tile-demo-border: rgba(0, 0, 0, 0.06);
    --tile-demo-text: #636366;
    --tile-demo-color: #1c1c1e;
    --tile-notes-bg: #ffffff;
    --tile-notes-border: rgba(0, 0, 0, 0.08);
    --tile-notes-text: #636366;
    --tile-notes-color: #1c1c1e;

    /* Struck tile tokens */
    --struck-state-bg: rgba(var(--palette-primary-rgb), 0.06);
    --struck-defense-bg: rgba(var(--palette-warning-rgb), 0.06);
    --struck-cause-bg: #f0f2f5;

    /* App header (separate from section headers) */
    --app-header-bg: var(--header-gradient);

    /* Tile scale (controlled by JS) — 0.8 = displayed "100%" */
    --tile-scale: 0.8;
    --tile-v-stretch: 1.05;
    --tile-h-stretch: 0.95;
    --tile-font-scale: 1;
    --tile-font-family: inherit;
    --tile-notes-clamp: 4;
    --tile-gap: 8px;
    --tile-radius: 6px;
    --tile-struck-opacity: 0.5;
    --row-gap: 4px;
    --row-v-padding: 6px;
}

/* ==================== THEME SYSTEM ==================== */

/* ── Light theme ── */
[data-theme="light"] {
    --bg-main: #f4f5f7;
    --bg-pool: #f4f5f7;
    --bg-trial: #ecedf0;

    --tile-header-bg: #ffffff;
    --tile-header-border: rgba(0, 0, 0, 0.04);
    --tile-header-text: #1c1c1e;
    --tile-header-scramble: #3478F6;
    --tile-demo-bg: #ffffff;
    --tile-demo-border: rgba(0, 0, 0, 0.03);
    --tile-demo-text: #636366;
    --tile-demo-color: #1c1c1e;
    --tile-notes-bg: #ffffff;
    --tile-notes-border: rgba(0, 0, 0, 0.04);
    --tile-notes-text: #636366;
    --tile-notes-color: #1c1c1e;

    --struck-state-bg: rgba(var(--palette-primary-rgb), 0.05);
    --struck-defense-bg: rgba(var(--palette-warning-rgb), 0.05);
    --struck-cause-bg: #f4f5f7;
}

/* ── Navy theme ── */
[data-theme="navy"] {
    --tile-header-bg: #0a1e3d;
    --tile-header-border: rgba(255, 255, 255, 0.08);
    --tile-header-text: #ffffff;
    --tile-header-scramble: rgba(255, 255, 255, 0.7);
    --tile-demo-bg: #0f2545;
    --tile-demo-border: rgba(255, 255, 255, 0.06);
    --tile-demo-text: rgba(255, 255, 255, 0.55);
    --tile-demo-color: #ffffff;
    --tile-notes-bg: #0a1e3d;
    --tile-notes-border: rgba(255, 255, 255, 0.08);
    --tile-notes-text: rgba(255, 255, 255, 0.55);
    --tile-notes-color: #ffffff;

    --struck-state-bg: rgba(var(--palette-primary-rgb), 0.18);
    --struck-defense-bg: rgba(var(--palette-warning-rgb), 0.18);
    --struck-cause-bg: #0a1e3d;
}

/* ── Ocean theme ── */
[data-theme="ocean"] {
    --tile-header-bg: #c8ddf5;
    --tile-header-border: rgba(0, 122, 255, 0.15);
    --tile-header-text: #0a1e3d;
    --tile-header-scramble: #0a1e3d;
    --tile-demo-bg: #dfedfb;
    --tile-demo-border: rgba(0, 122, 255, 0.10);
    --tile-demo-text: rgba(10, 30, 61, 0.55);
    --tile-demo-color: #0a1e3d;
    --tile-notes-bg: #dfedfb;
    --tile-notes-border: rgba(0, 122, 255, 0.10);
    --tile-notes-text: rgba(10, 30, 61, 0.55);
    --tile-notes-color: #0a1e3d;

    --struck-state-bg: rgba(var(--palette-primary-rgb), 0.10);
    --struck-defense-bg: rgba(var(--palette-warning-rgb), 0.10);
    --struck-cause-bg: rgba(0, 122, 255, 0.04);
}

/* ── Dark theme ── */
[data-theme="dark"] {
    /* Brighter semantic colors for dark backgrounds */
    --palette-primary-rgb: 10, 132, 255;
    --palette-success-rgb: 48, 209, 88;
    --palette-danger-rgb: 255, 69, 58;
    --palette-warning-rgb: 255, 159, 10;
    --palette-accent-rgb: 94, 92, 230;
    --palette-neutral-rgb: 255, 255, 255;

    /* Chrome */
    --bg-main: #08111f;
    --bg-card: #1c1c1e;
    --bg-tile: #2c2c2e;
    --bg-pool: #2c2c2e;
    --bg-input: #1c1c1e;
    --bg-trial: #060e1a;
    --text-main: #f5f5f7;
    --text-muted: #98989d;
    --border-light: #38383a;
    --border-dark: #48484a;
    --fta-border: #636366;
    --note-bg: #3a2a00;
    --note-text: #fde68a;
    --note-border: #7c5e00;
    --theme-prosecution: #48484a;
    --header-gradient: linear-gradient(135deg, #06142a 0%, #0c2040 50%, #081a33 100%);
    --header-gradient-dark: linear-gradient(135deg, #06142a 0%, #0c2040 50%, #081a33 100%);
    --glass-bg: #1c1c1e;
    --glass-border: var(--border-light);
    --accent-blue-light: rgba(var(--palette-primary-rgb), 0.12);
    --color-keeper-text: #5ac8fa;
    --color-keeper-text-light: #1a3a5c;
    --color-strike-text: #ffb340;
    --color-warning-text: #ffb340;
    --color-warning-text-light: #ffd4a3;
    --app-header-bg: linear-gradient(135deg, #0a0a0c 0%, #111114 100%);

    /* Tile sections — dark */
    --tile-header-bg: #2c2c2e;
    --tile-header-border: rgba(255, 255, 255, 0.06);
    --tile-header-text: #ffffff;
    --tile-header-scramble: rgba(255, 255, 255, 0.7);
    --tile-demo-bg: #1c1c1e;
    --tile-demo-border: rgba(255, 255, 255, 0.04);
    --tile-demo-text: #98989d;
    --tile-demo-color: #f5f5f7;
    --tile-notes-bg: #2c2c2e;
    --tile-notes-border: rgba(255, 255, 255, 0.06);
    --tile-notes-text: #98989d;
    --tile-notes-color: #f5f5f7;

    /* Struck */
    --struck-state-bg: rgba(var(--palette-primary-rgb), 0.15);
    --struck-defense-bg: rgba(var(--palette-warning-rgb), 0.15);
    --struck-cause-bg: #2c2c2e;
}

/* ── Dark theme: component overrides (cannot be token-only) ── */
[data-theme="dark"] html, [data-theme="dark"] body { background-color: var(--bg-main) !important; color: var(--text-main) !important; }
[data-theme="dark"] .pool-container { background: rgba(var(--palette-neutral-rgb), 0.06); }
[data-theme="dark"] .fixed-map-header { background-color: rgba(22, 22, 24, 0.95) !important; border-bottom-color: var(--bg-tile) !important; }
[data-theme="dark"] .unified-bar .btn-toolbar { background-color: transparent !important; border-color: transparent !important; color: rgba(var(--palette-surface-rgb), 0.5) !important; }
[data-theme="dark"] .unified-bar .btn-toolbar:hover { background-color: transparent !important; color: #ffffff !important; border-color: transparent !important; }
[data-theme="dark"] .unified-bar .btn-toolbar.active { background-color: transparent !important; color: #ffffff !important; border-color: transparent !important; }
[data-theme="dark"] .btn-theme { background-color: var(--bg-tile) !important; border-color: var(--border-dark) !important; color: var(--text-main) !important; }
[data-theme="dark"] .material-symbols-outlined { color: var(--accent-blue) !important; }
[data-theme="dark"] .ql-editor { color: var(--text-main) !important; background: var(--bg-card) !important; }
[data-theme="dark"] .ql-toolbar { background: var(--bg-tile) !important; border-color: var(--border-dark) !important; }
[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--text-main) !important; }
[data-theme="dark"] .setup-sidebar { background-color: var(--bg-pool) !important; border-right-color: var(--border-light) !important; }
[data-theme="dark"] .collapse-bar { background-color: var(--bg-tile) !important; color: var(--text-main) !important; }
[data-theme="dark"] .controls-card { background-color: var(--bg-card) !important; }
[data-theme="dark"] .config-visual-menu { background-color: var(--bg-tile) !important; }
[data-theme="dark"] .war-panel-header { background: var(--header-gradient) !important; }
[data-theme="dark"] .chat-header { background: var(--header-gradient) !important; }
[data-theme="dark"] .section-header-bar { background: var(--header-gradient) !important; }
[data-theme="dark"] .chat-header .material-symbols-outlined { color: white !important; }
[data-theme="dark"] .war-panel-header .material-symbols-outlined { color: white !important; }
[data-theme="dark"] .drawer-header-btn .material-symbols-outlined { color: white !important; }
[data-theme="dark"] .chat-input-area input { background: var(--bg-tile); color: var(--text-main); border-color: var(--border-dark); }
[data-theme="dark"] .chat-msg.other { background: rgba(var(--palette-warning-rgb), 0.15); color: var(--text-main); }
[data-theme="dark"] .strike-zone-band { background: rgba(var(--color-strike-panel-rgb), 0.24); }
[data-theme="dark"] body.trial-mode-active .strike-zone-band { background: rgba(var(--color-strike-panel-rgb), 0.28); }

/* ── Dark-tile themes: text inversion for tile interiors ── */
[data-theme="navy"] .tile-name,
[data-theme="navy"] .tile-name span,
[data-theme="dark"] .tile-name,
[data-theme="dark"] .tile-name span { color: var(--tile-header-text) !important; }
[data-theme="navy"] .tile-scramble,
[data-theme="dark"] .tile-scramble { color: var(--tile-header-scramble) !important; }
[data-theme="navy"] .tam-caret,
[data-theme="dark"] .tam-caret { color: rgba(255,255,255,0.5) !important; }
[data-theme="navy"] .tile-scramble-action:hover,
[data-theme="navy"] .tile-menu-open .tile-scramble-action,
[data-theme="dark"] .tile-scramble-action:hover,
[data-theme="dark"] .tile-menu-open .tile-scramble-action { background: rgba(255,255,255,0.12); }

/* ==================== COLORBLIND MODE ==================== */
[data-cvd="high-contrast"] {
    --palette-success-rgb: 0, 122, 255;
    --palette-danger-rgb: 255, 149, 0;
    --accent-green: rgb(var(--palette-success-rgb));
    --accent-red: rgb(var(--palette-danger-rgb));
    --color-keeper-rgb: var(--palette-success-rgb);
    --color-strike-rgb: var(--palette-danger-rgb);
    --color-keeper-text: #0066cc;
    --color-keeper-text-light: #cce0ff;
    --color-strike-text: #b45309;
    --theme-success: rgb(var(--palette-success-rgb));
}
[data-cvd="high-contrast"] .tile-flag-crim { background: var(--accent-red); }
[data-theme="dark"][data-cvd="high-contrast"] {
    --palette-success-rgb: 10, 132, 255;
    --palette-danger-rgb: 255, 159, 10;
    --accent-green: rgb(var(--palette-success-rgb));
    --accent-red: rgb(var(--palette-danger-rgb));
    --color-keeper-rgb: var(--palette-success-rgb);
    --color-strike-rgb: var(--palette-danger-rgb);
    --color-keeper-text: #5ac8fa;
    --color-keeper-text-light: #1a3a5c;
    --color-strike-text: #ffb340;
    --theme-success: rgb(var(--palette-success-rgb));
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    user-select: none;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; }

/* Re-enable text selection for inputs and content-editable */
input, textarea, [contenteditable], .chat-messages {
    -webkit-user-select: text;
    user-select: text;
}

.material-symbols-outlined { font-size: 18px; vertical-align: middle; }
.sp-icon { display: inline-flex; align-items: center; justify-content: center; }
.sp-icon svg { display: block; width: 1em; height: 1em; }
body.icon-color-navy .sp-icon svg [fill="#F59E0B"] { fill: currentColor; }
body.icon-color-navy .sp-icon svg [stroke="#F59E0B"] { stroke: currentColor; }
body.icon-color-amber .sp-icon { color: #F59E0B !important; }
.flex-center { display: flex; align-items: center; gap: 6px; }

/* ==================== HEADER ==================== */
.app-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    height: 56px;
    min-height: 56px;
    background: var(--app-header-bg) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(var(--palette-surface-rgb), 0.1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    color: #ffffff !important;
    position: relative;
    gap: 6px;
}
.header-logo {
    height: 26px;
    width: auto;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.15s;
}
.header-logo:hover { opacity: 0.8; }
.header-divider {
    width: 1px;
    height: 16px;
    background: rgba(var(--palette-surface-rgb), 0.18);
    margin: 0 12px;
    flex-shrink: 0;
}
.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 1;
    min-width: 0;
}

/* --- Unified Case Info + Detail Popup --- */
.unified-case-info {
    position: relative;
    cursor: pointer;
    max-width: 220px;
    flex-shrink: 1;
    min-width: 0;
    padding-right: 18px;
}
.unified-case-info .header-case-title {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.unified-case-info::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
    transition: opacity 0.15s;
}
.unified-case-info:hover::after { opacity: 0.8; }
.case-detail-popup {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: var(--header-gradient);
    border: 1px solid rgba(var(--palette-surface-rgb), 0.15);
    border-radius: 6px;
    padding: 14px 16px;
    z-index: 10002;
    min-width: 300px;
    box-shadow: var(--shadow-xl);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    color: #fff;
}
.unified-case-info.active .case-detail-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.case-detail-charges {
    font-size: 12px;
    font-style: italic;
    opacity: 0.8;
    margin-bottom: 10px;
    line-height: 1.4;
}
.case-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.case-detail-meta .header-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.case-detail-meta .header-meta-item .material-symbols-outlined {
    font-size: 16px;
    opacity: 0.6;
}
.app-header .header-input {
    background-color: transparent;
    color: rgba(var(--palette-surface-rgb), 0.9);
    font-family: 'Inter', sans-serif;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    -webkit-user-select: text;
    user-select: text;
}
.app-header .header-input::placeholder {
    color: rgba(var(--color-action-rgb), 0.35);
}
.app-header .header-input.title-input {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    width: 280px;
    padding: 4px 12px;
    height: 32px;
    border-radius: 8px;
    background: rgba(var(--palette-surface-rgb), 0.06);
    border: 1px solid rgba(var(--palette-surface-rgb), 0.08);
}
.app-header .header-input.title-input:hover {
    background: rgba(var(--palette-surface-rgb), 0.1);
    border-color: rgba(var(--palette-surface-rgb), 0.15);
}
.header-case-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}
.app-header .header-input:hover {
    background-color: rgba(var(--palette-surface-rgb), 0.08);
    border-color: rgba(var(--palette-surface-rgb), 0.12);
}
.app-header .header-input:focus {
    background-color: rgba(var(--palette-surface-rgb), 0.12);
    color: #ffffff;
    outline: none;
    border-color: rgba(var(--color-action-rgb), 0.6);
    box-shadow: 0 0 0 2px rgba(var(--color-action-rgb), 0.15);
}
.app-header .header-input.chip-input:hover,
.app-header .header-input.chip-input:focus {
    background: transparent;
    border: none;
    box-shadow: none;
}
/* --- Live session button & popup --- */
.header-live-wrapper {
    position: relative;
    z-index: 5000;
}
.header-live-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    background: transparent;
    color: #F59E0B;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    line-height: 1;
}
.header-live-btn:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}
.live-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #F59E0B;
    box-shadow: 0 0 3px rgba(245, 158, 11, 0.5);
    animation: pulse-dot 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 0.5; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}
.live-label { text-transform: uppercase; }

/* Sync status indicator */
.header-sync-wrapper {
    position: relative;
    z-index: 5000;
}
.sync-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.2);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.sync-status:hover {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.35);
}
.sync-popup {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 280px;
    background: var(--header-gradient);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    box-shadow: var(--shadow-xl), 0 0 20px rgba(var(--palette-neutral-rgb), 0.4);
    z-index: 10050;
    overflow: hidden;
    animation: fadeIn 0.2s ease-out;
}
[data-theme="dark"] .sync-popup {
    background: var(--header-gradient-dark);
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.sync-popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(245, 158, 11, 0.85);
    border-bottom: 1px solid rgba(245, 158, 11, 0.15);
    background: rgba(var(--palette-neutral-rgb), 0.2);
}
.sync-popup-header .material-symbols-outlined {
    font-size: 16px;
    color: #F59E0B;
}
.sync-popup-body {
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}
.sync-status.offline {
    background: rgba(var(--color-strike-panel-rgb), 0.1);
    color: var(--accent-orange);
}
.sync-status.error {
    background: rgba(var(--color-strike-rgb), 0.1);
    color: var(--accent-red);
}
.sync-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sync-dot.sync-live { background: #F59E0B; }
.sync-dot.sync-offline { background: var(--accent-orange); animation: pulse-dot 1.5s ease-in-out infinite; }
.sync-dot.sync-error { background: var(--accent-red); }

/* --- Live/Sync chip (inside .toolbar-strike-panel) --- */
.live-sync-dot-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
}

.live-count {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin-left: 1px;
}

.live-popup {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 260px;
    background: var(--header-gradient);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    box-shadow: var(--shadow-xl), 0 0 20px rgba(var(--palette-neutral-rgb), 0.4);
    z-index: 10050;
    overflow: hidden;
    animation: fadeIn 0.2s ease-out;
}

[data-theme="dark"] .live-popup {
    background: var(--header-gradient-dark);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.live-popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(245, 158, 11, 0.85);
    border-bottom: 1px solid rgba(245, 158, 11, 0.15);
    background: rgba(var(--palette-neutral-rgb), 0.2);
}

.live-popup-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(245, 158, 11, 0.8);
    transition: background 0.15s ease;
}

.live-popup-user:hover {
    background: rgba(245, 158, 11, 0.1);
}

.live-user-role {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: rgba(245, 158, 11, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.live-popup-empty {
    padding: 20px 16px;
    font-size: 12px;
    color: rgba(245, 158, 11, 0.35);
    font-style: italic;
    text-align: center;
}
.live-popup-header .material-symbols-outlined {
    font-size: 16px;
    color: #F59E0B;
}

.live-popup-list {
    padding: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.live-user-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F59E0B;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
    flex-shrink: 0;
}
/* --- Toolbar strike panel chip --- */
.toolbar-strike-panel {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 30px;
    border-radius: 7px;
    background: rgba(var(--color-strike-panel-rgb), 0.08);
    border: 1px solid rgba(var(--color-strike-panel-rgb), 0.35);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-orange);
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.toolbar-strike-panel:hover {
    background: rgba(var(--color-strike-panel-rgb), 0.15);
    border-color: rgba(var(--color-strike-panel-rgb), 0.5);
}
.toolbar-strike-panel .material-symbols-outlined {
    font-size: 14px;
    color: var(--accent-orange);
}

.strike-popup {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 320px;
    background: linear-gradient(165deg, #2d1a05 0%, #3d2408 50%, #281805 100%);
    border: 1px solid rgba(var(--color-strike-panel-rgb), 0.3);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(var(--palette-neutral-rgb), 0.6), 0 4px 12px rgba(var(--palette-neutral-rgb), 0.3);
    z-index: 2100;
    padding: 18px;
    color: var(--color-warning-text-light);
    font-size: 12px;
    line-height: 1.6;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: normal;
}
.toolbar-strike-panel.active .strike-popup {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.strike-popup-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--accent-orange);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 11px;
    border-bottom: 1px solid rgba(var(--color-strike-panel-rgb), 0.2);
    padding-bottom: 8px;
}
.strike-popup-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.strike-popup-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.strike-popup-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--accent-orange);
    flex-shrink: 0;
    opacity: 0.9;
}
.strike-popup-item span {
    font-weight: 500;
}
.strike-popup-item b {
    color: var(--accent-orange);
    font-weight: 700;
}
.strike-popup-deduction {
    padding-left: 12px;
    opacity: 0.7;
    font-size: 12px;
}
.strike-popup-deduction .material-symbols-outlined { font-size: 15px; }
.strike-popup-result {
    font-size: 14px;
}
.strike-popup-result b {
    font-size: 15px;
}
.strike-popup-info > .strike-popup-section-divider {
    margin: 8px 0;
}
/* --- Overflow Menu --- */
.overflow-menu {
    position: fixed;
    top: 56px;
    right: 14px;
    background: var(--header-gradient);
    border: 1px solid rgba(var(--palette-surface-rgb), 0.12);
    border-radius: 6px;
    box-shadow: var(--shadow-xl);
    z-index: 10002;
    min-width: 200px;
    padding: 6px;
    animation: overflow-in 0.15s ease-out;
}
@keyframes overflow-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.overflow-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: rgba(var(--palette-surface-rgb), 0.8);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-height: 36px;
    transition: background 0.12s;
}
.overflow-item:hover {
    background: rgba(var(--palette-surface-rgb), 0.1);
    color: #ffffff;
    transform: none;
    filter: none;
}
.overflow-item:hover .material-symbols-outlined { color: #ffffff; }
.overflow-item:active { transform: none; filter: none; }
.overflow-item .material-symbols-outlined {
    font-size: 18px;
    color: rgba(var(--palette-surface-rgb), 0.5);
    flex-shrink: 0;
}
.overflow-item-success .material-symbols-outlined { color: var(--accent-green); }
.overflow-item-blue .material-symbols-outlined { color: var(--accent-blue); }
.overflow-item-danger { color: var(--accent-red); }
.overflow-item-danger .material-symbols-outlined { color: var(--accent-red); }
.overflow-item-danger:hover { background: rgba(var(--palette-danger-rgb), 0.12); }
.overflow-divider {
    height: 1px;
    background: rgba(var(--palette-surface-rgb), 0.1);
    margin: 4px 8px;
}
.overflow-item.active { background: rgba(var(--palette-surface-rgb), 0.08); }
.overflow-item.active .material-symbols-outlined { color: var(--accent-blue); }
.overflow-item .inbox-badge {
    margin-left: auto;
}
[data-theme="dark"] .overflow-menu {
    background: linear-gradient(135deg, #0a0a0c 0%, #111114 100%);
    border-color: rgba(var(--palette-surface-rgb), 0.08);
}

/* --- Toolbar buttons inside unified bar --- */
.unified-bar .btn-toolbar {
    background-color: transparent;
    border: 1px solid transparent;
    color: rgba(var(--palette-surface-rgb), 0.65);
}
.unified-bar .btn-toolbar:hover {
    background-color: transparent;
    color: #ffffff;
    border-color: transparent;
}
.unified-bar .btn-toolbar:hover .material-symbols-outlined { color: #ffffff; }
.unified-bar .btn-toolbar.active {
    background-color: transparent;
    color: #ffffff;
    border-color: transparent;
}
.unified-bar .btn-toolbar.active .material-symbols-outlined { color: #ffffff; }

/* --- Active multi-select button indicator --- */
.unified-bar .btn-toolbar#batchSelectBtn.active {
    background: var(--accent-blue) !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(var(--color-action-rgb), 0.25);
}
.unified-bar .btn-toolbar#batchSelectBtn.active .material-symbols-outlined { color: white !important; }
body.strike-mode-active .app-header .btn-toolbar#batchSelectBtn.active {
    background: rgba(255,255,255,0.15) !important;
    color: white !important;
    box-shadow: 0 0 12px rgba(255,255,255,0.1);
}

/* --- Batch inline buttons inside unified bar --- */
.unified-bar .batch-inline-count {
    color: rgba(var(--palette-surface-rgb), 0.85);
}
.unified-bar .batch-inline-btn {
    color: rgba(var(--palette-surface-rgb), 0.65);
    border-color: rgba(var(--palette-surface-rgb), 0.15);
    background: rgba(var(--palette-surface-rgb), 0.06);
}
.unified-bar .batch-inline-btn:hover {
    color: #ffffff;
    background: rgba(var(--palette-surface-rgb), 0.15);
    border-color: rgba(var(--palette-surface-rgb), 0.3);
}
.unified-bar .batch-inline-btn.batch-inline-primary {
    color: #ffffff;
    background: rgba(var(--palette-surface-rgb), 0.12);
    border-color: rgba(var(--palette-surface-rgb), 0.25);
}
.unified-bar .batch-inline-btn.batch-inline-primary:hover {
    background: var(--accent-blue);
    color: #ffffff;
    border-color: var(--accent-blue);
}
.unified-bar .batch-inline-btn.batch-inline-undo {
    color: #4ade80;
}
.unified-bar .batch-inline-btn.batch-inline-undo:hover {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}
.unified-bar .batch-inline-btn[disabled] {
    opacity: 0.25;
}

/* --- Fast CSS tooltips --- */
.unified-bar [data-tip] {
    position: relative;
}
.unified-bar [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s, transform 0.12s;
    z-index: 10001;
}
.unified-bar [data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0.15s;
}

.unified-bar .toolbar-divider {
    background: rgba(var(--palette-surface-rgb), 0.15);
    height: 24px;
    margin: 0 10px;
}
.unified-bar .btn-micro {
    background-color: rgba(var(--palette-surface-rgb), 0.08);
    color: rgba(var(--palette-surface-rgb), 0.7);
    border-color: rgba(var(--palette-surface-rgb), 0.12);
}
.unified-bar .btn-micro:hover {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}
.unified-bar .scale-display { color: rgba(var(--palette-surface-rgb), 0.7); }
.unified-bar .toolbar-strike-panel {
    background: rgba(var(--color-strike-panel-rgb), 0.15);
    border-color: rgba(var(--color-strike-panel-rgb), 0.4);
}

/* ==================== STATUS DOTS ==================== */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.active { background-color: var(--accent-green); box-shadow: 0 0 6px rgba(var(--color-keeper-rgb), 0.4); }
.status-dot.completed { background-color: var(--fta-border); }

/* ==================== BUTTONS & INPUTS ==================== */
button {
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    min-height: 44px;
    min-width: 44px;
}
button:hover:not(:disabled) { filter: brightness(1.03); }
button:active:not(:disabled) { transform: scale(0.98); filter: brightness(0.95); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-success { background-color: var(--accent-green); }
.btn-danger { background-color: var(--accent-red); }
.btn-theme { background-color: var(--text-muted); }
.btn-toolbar {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-weight: 500;
    font-size: 13px;
    border-radius: 7px;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn-toolbar .material-symbols-outlined {
    font-size: 23px;
}
.btn-toolbar:hover {
    background-color: rgba(var(--color-action-rgb), 0.1);
    color: var(--accent-blue);
    border-color: transparent;
    box-shadow: none;
}
.btn-toolbar:hover .material-symbols-outlined {
    color: var(--accent-blue);
}
.btn-toolbar.active {
    background-color: rgba(var(--color-action-rgb), 0.12);
    color: var(--accent-blue);
    border-color: rgba(var(--color-action-rgb), 0.3);
}
.btn-toolbar.active .material-symbols-outlined {
    color: var(--accent-blue);
}
.btn-micro {
    background-color: var(--bg-pool);
    color: var(--text-main);
    font-size: 14px;
    padding: 0;
    border-radius: 5px;
    height: 22px;
    width: 22px;
    min-height: 22px;
    min-width: 22px;
    border: 1px solid var(--border-dark);
}
.btn-micro:hover { background-color: var(--accent-blue); color: white; border-color: var(--accent-blue); }

.theme-input {
    background-color: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.theme-input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 4px rgba(var(--color-action-rgb), 0.12); }

/* ==================== COLLAPSE BARS ==================== */
.collapse-bar {
    background: var(--bg-card);
    padding: 14px var(--layout-padding);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-main);
    user-select: none;
    margin-top: 15px;
}
.collapse-bar:hover { background: rgba(var(--palette-neutral-rgb), 0.03); }
.collapse-bar-actions { display: flex; align-items: center; gap: 10px; }

.controls-card {
    background: var(--bg-card);
    padding: 0;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    border-bottom: 1px solid var(--border-light);
}

.config-visual-menu {
    display: flex;
    gap: 15px;
    align-items: stretch;
    background: var(--bg-pool);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    margin: 15px 0;
    overflow-x: auto;
}

.sec-name-input {
    font-weight: 600;
    font-size: 11px;
    width: 100%;
    max-width: 120px;
    border: 1px solid transparent !important;
    background: transparent;
    padding: 2px 4px;
    border-radius: 6px;
    text-align: center;
    color: var(--text-main);
    -webkit-user-select: text;
    user-select: text;
}
.sec-name-input:focus {
    border-color: var(--border-light) !important;
    background: var(--bg-card);
}
.sec-del { color: var(--text-muted); cursor: pointer; font-size: 14px !important; }
.sec-del:hover { color: var(--accent-red); }
.sec-ctrl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
    gap: 4px;
}
.add-sec-btn {
    border: 2px dashed var(--border-dark);
    background: transparent;
    color: var(--text-muted);
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 6px;
    align-self: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.section-header-bar {
    margin: 0;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: white;
    background: var(--header-gradient);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(var(--color-action-rgb), 0.15);
}
.section-header-bar .material-symbols-outlined { color: rgba(var(--palette-surface-rgb), 0.8) !important; }

.add-sec-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(var(--color-action-rgb), 0.06);
}

/* Next Up Seat Indicator */
@keyframes next-up-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--color-action-rgb), 0.35); border-color: var(--accent-blue); }
    70% { box-shadow: 0 0 0 10px rgba(var(--color-action-rgb), 0); border-color: var(--accent-blue); }
    100% { box-shadow: 0 0 0 0 rgba(var(--color-action-rgb), 0); border-color: var(--accent-blue); }
}
.seat-slot.next-up-seat {
    animation: next-up-pulse 2s infinite;
    border-style: solid;
    border-width: 2px;
    color: var(--accent-blue);
    background: rgba(var(--color-action-rgb), 0.03);
}

/* Swap Interaction Visuals */
.juror-tile.swap-preview {
    transform: scale(0.95) rotate(-1deg);
    border: 2px dashed var(--accent-blue) !important;
    opacity: 0.7;
}
.swap-indicator-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(var(--color-action-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
    font-weight: 700;
    z-index: 10;
    border-radius: inherit;
    pointer-events: none;
}

/* Mini Map (Unified Seating Configurator) */
.mini-map-container {
    background: var(--bg-pool);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: 10px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 4px 0;
    overflow-x: auto;
}
.mini-map-body {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.mm-add-sec-col {
    display: flex;
    align-items: center;
    padding: 0 6px;
}
.mm-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.mm-sec-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    margin-bottom: 4px;
}
.mm-sec-controls {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border-light);
}
.mm-sec-controls .sec-ctrl {
    padding: 0 2px;
}
.mm-aisle-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 16px;
    flex-shrink: 0;
}
.mm-aisle-line {
    width: 2px;
    flex: 1;
    background: var(--border-dark);
    margin: 4px 0;
    border-radius: 1px;
    border-left: 1px dashed var(--border-light);
}
.mini-map-row {
    display: flex;
    align-items: center;
    gap: 0;
}
.mini-map-seat {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--accent-blue);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    margin: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.mini-map-seat:hover {
    transform: scale(1.2);
    border-color: var(--text-main);
}
.mini-map-seat.mm-disabled {
    background: var(--border-dark);
    opacity: 0.4;
}
.mini-map-seat.mm-disabled::after {
    content: '\00d7';
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
}
.mini-map-seat.mm-disabled:hover {
    opacity: 0.7;
    border-color: var(--accent-green);
}

/* Edit seats mode */
.mini-map-container.mm-edit-mode {
    outline: 2px dashed var(--accent-red);
    outline-offset: -2px;
}
.mini-map-container.mm-edit-mode .mini-map-seat:not(.mm-disabled) {
    cursor: crosshair;
}
.mini-map-container.mm-edit-mode .mini-map-seat:not(.mm-disabled):hover {
    border-color: var(--accent-red);
    opacity: 0.7;
}
.mini-map-container.mm-edit-mode .mini-map-seat.mm-disabled:hover {
    border-color: var(--accent-green);
}

.mini-map-front {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-top: 6px;
    border-top: 2px solid var(--border-dark);
    padding-top: 5px;
    width: 100%;
    text-align: center;
    background: rgba(var(--palette-neutral-rgb), 0.03);
    border-radius: 0 0 6px 6px;
    padding-bottom: 2px;
}

/* Mini-map legend */
.mm-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 6px 0;
    margin-top: 4px;
    border-top: 1px solid var(--border-light);
}
.mm-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.mm-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.mm-legend-swatch.swatch-start {
    background: var(--accent-green);
    box-shadow: 0 0 4px rgba(var(--color-keeper-rgb), 0.4);
}
.mm-legend-swatch.swatch-corner {
    background: var(--accent-blue);
    border: 1.5px dashed rgba(255,255,255,0.5);
}
.mm-legend-swatch.swatch-disabled {
    background: var(--border-dark);
    opacity: 0.5;
    color: var(--text-muted);
    font-weight: 700;
}
.mm-legend-swatch.swatch-seat {
    background: var(--accent-blue);
}

/* Edit seats toggle */
.mm-edit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 5px;
    border: 1px solid var(--border-dark);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    margin-left: auto;
}
.mm-edit-toggle .material-symbols-outlined { font-size: 13px; }
.mm-edit-toggle:hover { border-color: var(--accent-red); color: var(--accent-red); }
.mm-edit-toggle.active {
    background: rgba(var(--color-strike-rgb), 0.1);
    border-color: var(--accent-red);
    color: var(--accent-red);
}
/* Mini map guide */
.mm-guide {
    width: 100%;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}
.mm-guide-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.mm-guide-title-clickable {
    cursor: pointer;
    width: fit-content;
    transition: color 0.15s ease;
    border-radius: 3px;
}
.mm-guide-title-clickable:hover,
.mm-guide-title-clickable:focus-visible {
    color: var(--accent-blue);
    outline: none;
}
.mm-guide-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
}
.mm-guide-hint b { color: var(--text-main); }
.mm-guide-items {
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-light);
}
.mm-guide-items.expanded { display: flex; }
.mm-guide-items b {
    color: var(--text-main);
}
.mm-guide-sep {
    width: 1px;
    height: 14px;
    background: var(--border-dark);
    flex-shrink: 0;
}
.mm-guide-expand {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-blue);
    cursor: pointer;
    margin-left: 8px;
    white-space: nowrap;
}
.mm-guide-expand:hover { text-decoration: underline; }

/* Distribution dropdown in mini map */
.mm-dist-row {
    width: 100%;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--border-light);
}
.mm-dist-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Seat numbers on mini map */
.mm-seat-num {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    pointer-events: none;
}
.mm-corner {
    cursor: pointer;
    border-style: dashed;
    border-color: rgba(255,255,255,0.45);
}
.mm-corner::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    opacity: 0.7;
}
.mm-corner[data-corner="frontLeft"]::before { bottom: 2px; left: 2px; border-bottom-color: #fff; border-left-color: #fff; }
.mm-corner[data-corner="frontRight"]::before { bottom: 2px; right: 2px; border-bottom-color: #fff; border-right-color: #fff; }
.mm-corner[data-corner="backLeft"]::before { top: 2px; left: 2px; border-top-color: #fff; border-left-color: #fff; }
.mm-corner[data-corner="backRight"]::before { top: 2px; right: 2px; border-top-color: #fff; border-right-color: #fff; }
.mm-corner:hover {
    border-color: var(--text-main);
    border-style: solid;
    transform: scale(1.25);
}
.mm-corner:hover::before { opacity: 1; }
.mm-seat-start {
    background: var(--accent-green);
    border-style: solid !important;
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 6px rgba(var(--color-keeper-rgb), 0.5);
}
.mm-seat-start:hover {
    border-color: var(--accent-green) !important;
}

/* Draggable Section Columns */
.mm-section {
    cursor: grab;
    transition: transform 0.2s, opacity 0.2s;
}
.mm-section:active { cursor: grabbing; }
.mm-section.dragging {
    opacity: 0.4;
}

/* Pattern Icon Visuals */
.pattern-selector {
    display: flex;
    gap: 4px;
    margin-top: 5px;
    background: var(--bg-pool);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}
.pattern-opt {
    flex: 1;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    color: var(--text-muted);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.pattern-opt:hover { background: rgba(var(--palette-neutral-rgb),0.04); }
.pattern-opt.active { background: var(--accent-blue); color: white; }
.pattern-opt .material-symbols-outlined { font-size: 20px; }

/* --- MAP-FIRST LAYOUT --- */
.main-layout {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: calc(100vh - 60px);
}

.workspace-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

/* Sidebar for Setup & Pool */
.setup-sidebar {
    width: 320px;
    background: var(--bg-pool);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
body.trial-mode-active .setup-sidebar {
    margin-left: -320px;
    pointer-events: none;
}

.fixed-map-header {
    width: 100%;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: column;
    z-index: 1000;
    position: relative;
}

.map-area {
    flex-grow: 1;
    overflow: auto;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    position: relative;
}
.map-area.map-panning {
    cursor: grabbing !important;
}


/* --- TRIAL MODE IMMERSION --- */
body.trial-mode-active {
    background-color: var(--bg-main) !important;
}
body.trial-mode-active .header-left {
    display: none !important;
}
body.trial-mode-active .map-area {
    background-color: var(--bg-main) !important;
    overflow: auto !important;
}
body.trial-mode-active .courtroom-container {
    background-color: var(--bg-main) !important;
    border-color: transparent !important;
}
body.trial-mode-active .courtroom-row {
    background-color: rgba(var(--palette-neutral-rgb), 0.02) !important;
    border-color: rgba(var(--palette-neutral-rgb), 0.04) !important;
}
body.trial-mode-active .courtroom-row.row-even {
    background-color: rgba(var(--palette-neutral-rgb), 0.04) !important;
}
body.trial-mode-active .row-label {
    color: var(--text-muted) !important;
    font-weight: 600;
}
body.trial-mode-active .seat-slot {
    background-color: var(--bg-main);
    border-color: var(--border-light);
}
body.trial-mode-active .seat-slot.strike-panel-zone {
    background-color: transparent;
}
body.trial-mode-active .seat-slot.strike-panel-zone:not(:has(.juror-tile)) {
    background-color: rgba(var(--color-strike-panel-rgb), 0.08);
    border-color: rgba(var(--color-strike-panel-rgb), 0.25);
}

/* Restore and Improve Strike Panel Glow in Trial Mode */
body.trial-mode-active .strike-zone-band {
    background: rgba(var(--color-strike-panel-rgb), 0.20);
}
body.trial-mode-active .seat-slot.strike-panel-zone .juror-tile {
    border-color: rgba(var(--color-strike-panel-rgb), 0.35);
    box-shadow: 0 0 0 2px rgba(var(--color-strike-panel-rgb), 0.25),
                var(--shadow-md);
}

/* Improve Juror Tile readability in Trial Mode */
body.trial-mode-active .juror-tile {
    background: var(--tile-demo-bg);
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
}
body.trial-mode-active .tile-name,
body.trial-mode-active .tile-name span {
    color: var(--tile-header-text);
}
body.trial-mode-active .tile-stat {
    color: var(--tile-demo-text);
}
body.trial-mode-active .tile-scramble {
    color: var(--tile-header-scramble);
}
body.trial-mode-active .tile-top {
    border-color: var(--tile-header-border);
}

/* Rating indicator — banner gradient on tile header */
.juror-tile.tile-rating-good .tile-top,
body.trial-mode-active .juror-tile.tile-rating-good .tile-top {
    background: linear-gradient(180deg, rgba(var(--color-keeper-rgb), 0.28) 0%, rgba(var(--color-keeper-rgb), 0.06) 100%), var(--tile-header-bg);
    border-bottom-color: rgba(var(--color-keeper-rgb), 0.4);
}
.juror-tile.tile-rating-bad .tile-top,
body.trial-mode-active .juror-tile.tile-rating-bad .tile-top {
    background: linear-gradient(180deg, rgba(var(--color-strike-rgb), 0.28) 0%, rgba(var(--color-strike-rgb), 0.06) 100%), var(--tile-header-bg);
    border-bottom-color: rgba(var(--color-strike-rgb), 0.4);
}

/* Notes hidden mode (activated via body.hide-tile-notes) */
body.hide-tile-notes .tile-notes { display: none !important; }
body.hide-tile-notes .tile-details {
    flex: 1;
    margin-bottom: calc(-12px * var(--tile-scale));
    padding-bottom: calc(6px * var(--tile-scale));
    border-radius: 0 0 var(--tile-radius) var(--tile-radius);
}

/* Strike Bar Styling */
.tile-strike-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 100;
    pointer-events: none;
    background: transparent;
    overflow: hidden;
    border-radius: var(--tile-radius);
}

/* Diagonal Strike Lines */
.tile-strike-bar.status-state::before,
.tile-strike-bar.status-defense::before,
.tile-strike-bar.status-fta::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 6px;
    transform: rotate(-45deg);
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(var(--palette-neutral-rgb),0.2);
}

.tile-strike-bar.status-state { display: block; }
.tile-strike-bar.status-state::before { background-color: var(--accent-blue); }

.tile-strike-bar.status-defense { display: block; }
.tile-strike-bar.status-defense::before { background-color: var(--accent-orange); }

.tile-strike-bar.status-cause { display: none; }
.tile-strike-bar.status-fta { display: block; }
.tile-strike-bar.status-fta::before { background-color: var(--fta-border); }

/* Ghost tiles for struck jurors */
.juror-tile.status-fta {
    opacity: 0.55;
    filter: grayscale(0.4);
}
.juror-tile.status-fta::before { display: none !important; }

.juror-tile.status-state {
    background-color: var(--struck-state-bg) !important;
    border-color: rgba(var(--palette-primary-rgb), 0.18) !important;
    animation: none !important;
    box-shadow: none !important;
}
.juror-tile.status-state::before { display: none !important; }
.juror-tile.status-state > *:not(.tile-action-menu) { opacity: var(--tile-struck-opacity, 0.5); }

.juror-tile.status-defense {
    background-color: var(--struck-defense-bg) !important;
    border-color: rgba(var(--palette-warning-rgb), 0.18) !important;
    animation: none !important;
    box-shadow: none !important;
}
.juror-tile.status-defense::before { display: none !important; }
.juror-tile.status-defense > *:not(.tile-action-menu) { opacity: var(--tile-struck-opacity, 0.5); }

.juror-tile.status-cause {
    background-color: var(--struck-cause-bg) !important;
    border-color: var(--border-light) !important;
    border-style: dashed !important;
    animation: none !important;
    pointer-events: auto;
    box-shadow: none !important;
}
.juror-tile.status-cause::before { display: none !important; }
.juror-tile.status-cause .tile-top { opacity: 0.25; filter: grayscale(1); }
.juror-tile.status-cause .tile-details,
.juror-tile.status-cause .tile-notes,
.juror-tile.status-cause .tile-flag-corner { display: none !important; }
.juror-tile.status-cause::after {
    content: 'EXCUSED';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); opacity: 0.35;
    pointer-events: none;
}
.juror-tile.status-cause:hover .tile-top { opacity: 0.45; filter: none; }
.juror-tile.status-cause:hover::after { opacity: 0.55; }

.juror-tile.status-state .tile-notes,
.juror-tile.status-state .tile-scramble { opacity: 0.6; }
.juror-tile.status-defense .tile-notes,
.juror-tile.status-defense .tile-scramble { opacity: 0.6; }

.juror-tile.status-state:hover > *:not(.tile-action-menu),
.juror-tile.status-defense:hover > *:not(.tile-action-menu) { opacity: 0.85; }
.juror-tile.status-fta:hover {
    opacity: 1;
    filter: none;
}

/* --- STRIKE MODE VISUAL SHIFT --- */
body.strike-mode-active .courtroom-container {
    box-shadow: none !important;
    background-color: transparent !important;
}
body.strike-mode-active .app-header {
    background: rgba(69, 10, 10, 0.92) !important;
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(var(--color-strike-rgb), 0.3) !important;
}
body.strike-mode-active .app-header .toolbar-divider,
body.strike-mode-active .app-header .scale-controls,
body.strike-mode-active .app-header .scale-controls * {
    color: rgba(var(--color-strike-rgb), 0.8) !important;
}
body.strike-mode-active .app-header .header-divider {
    background: rgba(var(--color-strike-rgb), 0.3) !important;
}
body.strike-mode-active .header-left {
    color: rgba(255,255,255,0.7) !important;
}
body.strike-mode-active .header-case-title {
    color: rgba(255,255,255,0.8) !important;
}
body.strike-mode-active .toolbar-strike-panel {
    background: rgba(var(--color-strike-rgb), 0.2) !important;
    border-color: rgba(var(--color-strike-rgb), 0.4) !important;
    color: rgba(255,255,255,0.8) !important;
}
body.strike-mode-active .toolbar-strike-panel .material-symbols-outlined {
    color: rgba(255,255,255,0.7) !important;
}

body.strike-mode-active .app-header .btn-toolbar,
body.strike-mode-active .app-header .btn-theme {
    background: transparent !important;
    color: white !important;
    border: 1px solid transparent !important;
}

body.strike-mode-active .app-header .btn-toolbar .material-symbols-outlined,
body.strike-mode-active .app-header .btn-theme .material-symbols-outlined {
    color: white !important;
}

body.strike-mode-active .app-header .btn-toolbar.active,
body.strike-mode-active .app-header .btn-theme.active {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--accent-red) !important;
}

body.strike-mode-active .app-header [fill="#F59E0B"]   { fill: white; }
body.strike-mode-active .app-header [stroke="#F59E0B"] { stroke: white; }
body.strike-mode-active .overflow-menu {
    background: rgba(69, 10, 10, 0.95);
    border-color: rgba(var(--color-strike-rgb), 0.3);
}
body.strike-mode-active .overflow-item { color: rgba(255,255,255,0.9); }
body.strike-mode-active .overflow-item .material-symbols-outlined { color: rgba(255,255,255,0.6); }
body.strike-mode-active .overflow-item:hover { background: rgba(127, 29, 29, 0.6); }
body.strike-mode-active .overflow-divider { background: rgba(var(--color-strike-rgb), 0.25); }

body.strike-mode-active .app-header .batch-inline-count {
    color: rgba(255,255,255,0.85);
}
body.strike-mode-active .app-header .batch-inline-btn {
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
}
body.strike-mode-active .app-header .batch-inline-btn:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
}
body.strike-mode-active .app-header .batch-inline-btn.batch-inline-primary {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
}
body.strike-mode-active .app-header .batch-inline-btn.batch-inline-primary:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
}

body.strike-mode-active .strike-mode-btn,
body.strike-mode-active .strike-mode-btn * {
    background: var(--accent-red) !important;
    color: white !important;
    box-shadow: 0 0 20px rgba(var(--color-strike-rgb), 0.3);
    animation: pulse-red-glow 2.5s infinite;
}

@keyframes pulse-red-glow {
    0% { box-shadow: 0 0 5px rgba(var(--color-strike-rgb), 0.3); }
    50% { box-shadow: 0 0 25px rgba(var(--color-strike-rgb), 0.5); }
    100% { box-shadow: 0 0 5px rgba(var(--color-strike-rgb), 0.3); }
}


/* --- TOOLBAR GROUP (inside unified bar) --- */
.toolbar-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}
.toolbar-group-right {
    margin-left: auto;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-dark);
    margin: 0 6px;
    flex-shrink: 0;
}

/* ==================== COURTROOM MAP ==================== */
.courtroom-container {
    background: var(--bg-card);
    padding: 10px var(--layout-padding) 20px 10px;
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: fit-content;
}

.busted-warning {
    font-weight: 600;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 6px;
    display: none;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.busted-warning.warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; display: flex; }
.busted-warning.critical { background: #fff1f2; color: var(--accent-red); border: 1px solid #fda4af; display: flex; }
.busted-warning.busted { background: #7f1d1d; color: #fff; border: 1px solid #991b1b; display: flex; font-weight: 700; }
[data-theme="dark"] .busted-warning.warn { background: #3a2a00; color: #fbbf24; border-color: #7c5e00; }
[data-theme="dark"] .busted-warning.critical { background: #3b0a0a; color: #f87171; border-color: #7f1d1d; }
[data-theme="dark"] .busted-warning.busted { background: #7f1d1d; color: #fff; border-color: #b91c1c; }
.jurors-loaded-banner { display: none; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; font-size: 13px; font-weight: 600; color: var(--accent-green); background: rgba(var(--bg-card-rgb, 255,255,255), 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: absolute; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none; }
.jurors-loaded-banner.visible { display: flex; }
.jurors-loaded-banner .banner-icon { font-size: 18px; }
.jurors-loaded-banner .banner-hint { color: var(--text-muted); font-weight: 500; }
.jurors-loaded-banner .banner-link { color: var(--text-muted); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; pointer-events: auto; }
.jurors-loaded-banner .banner-link:hover { color: var(--accent-green); }
[data-theme="dark"] .jurors-loaded-banner { background: rgba(28, 28, 30, 0.85); }

.strike-mode-btn.active { background: var(--accent-red); color: white; border-color: var(--accent-red); }
.strike-mode-btn.active .material-symbols-outlined { color: white !important; }

.leg-box { width: 10px; height: 10px; display: inline-block; margin-right: 6px; vertical-align: text-bottom; border-radius: 3px; }
.bg-state { background-color: var(--accent-blue) !important; }
.bg-defense { background-color: var(--accent-orange) !important; }
.bg-cause { background-color: var(--theme-prosecution) !important; }
.bg-fta { background-color: var(--fta-border) !important; }

/* ==================== CHAT BADGE ==================== */
.chat-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--accent-red);
    border-radius: 9px;
    position: absolute;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 8px rgba(var(--color-strike-rgb), 0.7);
    display: none;
    animation: badgePulse 1.5s ease-in-out 3;
    box-sizing: border-box;
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ==================== MAIN LAYOUT & POOL ==================== */
.main-layout { padding: 0 0 30px 0; }

.pool-info-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 20px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(var(--palette-neutral-rgb), 0.03);
    border-bottom: 1px solid var(--border-light);
}
.pool-info-hint .material-symbols-outlined {
    font-size: 14px;
    opacity: 0.6;
}
.pool-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tile-gap);
    background: rgba(var(--palette-neutral-rgb), 0.08);
    padding: 20px var(--layout-padding);
    border-bottom: 1px solid var(--border-light);
    min-height: 140px;
    flex-grow: 1;
    overflow-y: auto;
}

#unifiedContentPool.active {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Pool pointer drag-over highlight */
.pool-container.drag-over {
    background-color: rgba(var(--color-action-rgb), 0.04);
    outline: 2px dashed var(--accent-blue);
}

/* ==================== WAR PANEL TABS ==================== */
.war-tabs { display: flex; background: rgba(var(--palette-neutral-rgb), 0.3); }
.war-tab {
    flex: 1;
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    color: rgba(var(--palette-surface-rgb), 0.5);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    border-bottom: 2.5px solid transparent;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.war-tab:hover { color: rgba(var(--palette-surface-rgb), 0.8); }
.war-tab.active { color: white; background: rgba(var(--palette-surface-rgb), 0.05); border-bottom-color: #D97706; }

.war-content { display: none; flex-direction: column; flex: 1; overflow-y: auto; padding: 16px 20px; }
.war-content.active { display: flex; animation: fadeIn 0.35s ease-out; }

/* Section headers inside war panel tabs */
.war-section-header { margin-bottom: 14px; flex-shrink: 0; }
.war-section-title {
    font-family: var(--font-display); font-size: 15px; font-weight: 700;
    color: var(--text-main); display: flex; align-items: center; gap: 6px;
}
.war-section-title .material-symbols-outlined { font-size: 18px; color: var(--accent-blue); }
.war-section-subtitle {
    font-size: 11px; color: var(--text-muted); margin-top: 2px;
    font-weight: 500; letter-spacing: 0.01em;
}

/* Empty states */
.war-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 48px 24px; flex: 1;
}
.war-empty-icon { font-size: 40px; color: var(--text-muted); opacity: 0.4; margin-bottom: 12px; }
.war-empty-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.war-empty-text { font-size: 12px; color: var(--text-muted); max-width: 260px; line-height: 1.5; }

/* Dynamic shell (stats, activity) — contains loading shimmer or content */
.war-dynamic-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Loading shimmer for dynamic imports */
.war-shimmer {
    border-radius: 8px; background: linear-gradient(90deg, var(--bg-pool) 25%, var(--border-dark) 50%, var(--bg-pool) 75%);
    background-size: 200% 100%; animation: shimmer 1.5s infinite; height: 100px; margin-bottom: 12px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }


/* ==================== SETTINGS MODAL CONTENT ==================== */
.settings-content { display: none; }
.settings-content.active { display: block; animation: fadeIn 0.35s ease-out; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== ADMIN COMMAND CENTER TABS ==================== */
.admin-tabs-header {
    display: flex;
    background: var(--bg-pool);
    border-bottom: 1px solid var(--border-dark);
    margin-bottom: 20px;
    gap: 0;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}
.admin-tab {
    padding: 14px 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 2.5px solid transparent;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    margin-bottom: -0.5px;
}
.admin-tab:hover {
    color: var(--text-main);
    background: rgba(var(--palette-neutral-rgb),0.02);
}
.admin-tab.active {
    color: var(--accent-orange);
    border-bottom-color: var(--accent-orange);
    background: var(--bg-card);
}
.admin-tab .material-symbols-outlined {
    font-size: 18px;
}
.admin-tab-content {
    display: none;
}
.admin-tab-content.active {
    display: block;
    animation: fadeIn 0.35s ease-out;
}

/* Admin Preset Builder */
.admin-preset-item {
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
}
.admin-preset-item:hover {
    border-color: var(--accent-orange);
    background: rgba(var(--color-strike-panel-rgb), 0.03);
    box-shadow: var(--shadow-sm);
}
.admin-preset-item.active {
    border-color: var(--accent-orange);
    background: rgba(var(--color-strike-panel-rgb), 0.05);
    box-shadow: 0 0 0 1px rgba(var(--color-strike-panel-rgb), 0.2);
}
.admin-preset-item .preset-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-main);
}
.admin-preset-item .preset-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}
.admin-preset-builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.admin-preset-builder-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.admin-preset-name-input {
    font-size: 16px;
    font-weight: 600;
    padding: 8px 12px;
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    background: var(--bg-pool);
    width: 100%;
    max-width: 350px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.admin-preset-name-input:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 4px rgba(var(--color-strike-panel-rgb), 0.1);
}

/* Manual seating visual cues (tray removed; panel replaces it) */
body.manual-seating-active .courtroom-container {
    box-shadow: inset 0 0 50px rgba(var(--color-action-rgb), 0.03);
    background-color: rgba(var(--color-action-rgb), 0.01);
}
body.manual-seating-active .seat-slot {
    border-style: solid;
    border-color: rgba(var(--color-action-rgb), 0.15);
}
body.manual-seating-active .btn-toolbar#manualSeatingBtn {
    background: var(--accent-blue) !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(var(--color-action-rgb), 0.25);
}

/* ── Manual Seating Bottom Drawer ── */
.manual-seating-drawer {
    width: 100%; max-height: 0; overflow: hidden; background: var(--bg-pool);
    border-top: 2px solid var(--accent-blue); transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0; z-index: 10; opacity: 0;
}
body.manual-seating-active .manual-seating-drawer { max-height: 280px; overflow: visible; opacity: 1; }
.manual-seating-drawer-header {
    display: flex; justify-content: space-between; align-items: center; padding: 8px 16px;
    background: var(--bg-card); border-bottom: 1px solid var(--border-dark);
}
.manual-seating-drawer-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--text-main); }
.manual-seating-drawer-title .material-symbols-outlined { font-size: 18px; color: var(--accent-blue); }
.manual-drawer-count { font-weight: 500; font-size: 11px; color: var(--text-muted); }
.manual-seating-drawer-actions { display: flex; align-items: center; gap: 8px; }
.manual-seating-search-wrap {
    display: flex; align-items: center; background: var(--bg-main); border: 1px solid var(--border-dark);
    border-radius: 8px; padding: 4px 8px; gap: 4px;
}
.manual-seating-search-wrap .material-symbols-outlined { font-size: 16px; color: var(--text-muted); }
.manual-seating-search-wrap input { border: none; background: transparent; font-size: 12px; width: 180px; outline: none; color: var(--text-main); }
.manual-seating-pool {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
    overflow-x: auto; overflow-y: hidden; max-height: 220px; align-items: flex-start;
}
.manual-seating-pool .juror-tile { cursor: grab; }
.manual-seating-pool .juror-tile:active { cursor: grabbing; }
.manual-seating-close-btn {
    display: flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px;
    background: rgba(var(--palette-neutral-rgb), 0.08); border: 1px solid var(--border-dark);
    color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.manual-seating-close-btn .material-symbols-outlined { font-size: 16px; }
.manual-seating-close-btn:hover { background: var(--accent-red); color: white; border-color: var(--accent-red); }

.courtroom-container-vertical {
    display: inline-flex;
    flex-direction: column;
    gap: var(--row-gap);
    min-width: 100%;
    padding-bottom: 20px;
}

.courtroom-row {
    display: flex;
    align-items: center;
    padding: var(--row-v-padding) 12px;
    border-radius: 8px;
    background-color: var(--row-bg-odd);
    border: 1px solid var(--row-border-odd);
    min-width: max-content;
}
.courtroom-row.row-even {
    background-color: var(--row-bg-even);
    border: 1px solid var(--row-border-even);
}
.row-label {
    width: 46px;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 8px;
}
.row-seat-grid {
    display: grid;
    gap: var(--tile-gap);
    flex-grow: 1;
    align-items: stretch;
    justify-content: center;
    position: relative;
}

/* Aisle divider between sections */
.courtroom-aisle-vert {
    width: calc(40px * var(--tile-scale));
    min-height: calc(165px * var(--tile-scale) * var(--tile-v-stretch));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(var(--palette-neutral-rgb), 0.015);
    border-radius: 6px;
}
.courtroom-aisle-vert::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    border-left: 1.5px dashed var(--border-light);
    opacity: 0.6;
    transform: translateX(-50%);
}

/* Trial Mode UX Improvements */
body.trial-mode-active .theme-btn,
body.trial-mode-active .lobby-link {
    display: none !important;
}

body.trial-mode-active .juror-tile.status-state > *:not(.tile-action-menu),
body.trial-mode-active .juror-tile.status-defense > *:not(.tile-action-menu),
body.trial-mode-active .juror-tile.status-fta > *:not(.tile-action-menu) {
    opacity: var(--tile-struck-opacity) !important;
}
body.trial-mode-active .juror-tile.status-cause .tile-top { opacity: 0.2 !important; }

.seat-slot {
    background-color: var(--bg-main);
    border: 1.5px dashed var(--border-light);
    border-radius: var(--tile-radius);
    min-height: calc(165px * var(--tile-scale) * var(--tile-v-stretch));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-dark);
    font-weight: 500;
    font-size: calc(12px * var(--tile-scale) * var(--tile-font-scale));
    position: relative;
    z-index: 1;
    padding: calc(6px * var(--tile-scale));
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.seat-slot.drag-over {
    background-color: rgba(var(--color-action-rgb), 0.06);
    border-color: var(--accent-blue);
    border-style: solid;
}
/* Strike panel zone — continuous band behind tiles */
.strike-zone-band {
    position: absolute;
    top: calc(-1 * var(--row-v-padding) - var(--row-gap) / 2);
    bottom: calc(-1 * var(--row-v-padding) - var(--row-gap) / 2);
    background: rgba(var(--color-strike-panel-rgb), 0.16);
    border-radius: 6px;
    border-right: 3px solid rgba(var(--color-strike-panel-rgb), 0.45);
    pointer-events: none;
    z-index: 0;
}
.strike-zone-band::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    right: -3px;
    width: 12px;
    background: linear-gradient(to right, rgba(var(--color-strike-panel-rgb), 0.08), transparent);
    pointer-events: none;
    border-radius: 0 6px 6px 0;
}

/* Strike zone seats: transparent to reveal amber band underneath */
.seat-slot.strike-panel-zone {
    background-color: transparent;
}
.seat-slot.strike-panel-zone:not(:has(.juror-tile)) {
    background-color: rgba(var(--color-strike-panel-rgb), 0.06);
    border-color: rgba(var(--color-strike-panel-rgb), 0.20);
}
.seat-slot.strike-panel-zone.drag-over {
    background-color: rgba(var(--color-action-rgb), 0.10);
}

/* Per-tile amber halo in strike panel zone */
.seat-slot.strike-panel-zone .juror-tile {
    box-shadow: 0 0 0 1.5px rgba(var(--color-strike-panel-rgb), 0.20),
                var(--shadow-sm);
}
.seat-slot.strike-panel-zone .juror-tile:hover {
    box-shadow: 0 0 0 1.5px rgba(var(--color-strike-panel-rgb), 0.30),
                var(--shadow-md);
}
[data-theme="dark"] .seat-slot.strike-panel-zone .juror-tile,
[data-theme="navy"] .seat-slot.strike-panel-zone .juror-tile {
    box-shadow: 0 0 0 1.5px rgba(var(--color-strike-panel-rgb), 0.30),
                var(--shadow-sm);
}


/* Disabled Seats */
.seat-slot.seat-disabled {
    opacity: 0.35;
    border: 1.5px dashed var(--border-light);
    background-color: var(--bg-pool);
    color: var(--text-muted);
    cursor: default;
    flex-direction: column;
    gap: 4px;
}
.seat-slot.seat-disabled:hover {
    opacity: 0.5;
}
.seat-disabled-icon {
    font-size: 22px;
    opacity: 0.6;
}
.seat-enable-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--color-keeper-rgb), 0.3);
    background: rgba(var(--color-keeper-rgb), 0.06);
    color: var(--accent-green);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    padding: 0;
}
.seat-enable-btn:hover {
    background: rgba(var(--color-keeper-rgb), 0.15);
    border-color: var(--accent-green);
}
.seat-enable-btn .material-symbols-outlined {
    font-size: 16px;
}

/* Seat Disable Button (on empty seats) */
.seat-disable-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--color-strike-rgb), 0.15);
    background: rgba(var(--color-strike-rgb), 0.03);
    color: rgba(var(--color-strike-rgb), 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    padding: 0;
}
.seat-disable-btn:hover {
    background: rgba(var(--color-strike-rgb), 0.1);
    border-color: rgba(var(--color-strike-rgb), 0.5);
    color: var(--accent-red);
}
.seat-disable-btn .material-symbols-outlined {
    font-size: 14px;
}

/* ==================== JUROR TILES ==================== */
.juror-tile {
    background: var(--tile-demo-bg);
    border: 1px solid var(--tile-demo-border, var(--border-light));
    border-radius: var(--tile-radius);
    padding: calc(12px * var(--tile-scale));
    font-size: calc(11px * var(--tile-scale) * var(--tile-font-scale));
    font-family: var(--tile-font-family);
    color: var(--tile-demo-color);
    cursor: pointer;
    width: calc(180px * var(--tile-scale) * var(--tile-h-stretch));
    min-width: calc(180px * var(--tile-scale) * var(--tile-h-stretch));
    max-width: calc(180px * var(--tile-scale) * var(--tile-h-stretch));
    height: calc(165px * var(--tile-scale) * var(--tile-v-stretch));
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    flex-shrink: 0;
}
body.manual-seating-active .juror-tile {
    cursor: grab;
    touch-action: none;
}
.juror-tile:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-dark);
}
body.manual-seating-active .juror-tile:active { cursor: grabbing; }

.tile-top {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    background: var(--tile-header-bg);
    border-bottom: 2px solid var(--tile-header-border);
    padding: calc(6px * var(--tile-scale)) calc(8px * var(--tile-scale));
    margin: calc(-10px * var(--tile-scale)) calc(-10px * var(--tile-scale)) calc(6px * var(--tile-scale)) calc(-10px * var(--tile-scale));
    border-radius: calc(var(--tile-radius) - 3px) calc(var(--tile-radius) - 3px) 0 0;
    align-items: center;
    overflow: hidden;
}
.tile-name {
    font-size: calc(13px * var(--tile-scale) * var(--tile-font-scale));
    color: var(--tile-header-text);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-grow: 1;
    min-width: 0;
    padding-right: 4px;
}
.tile-name span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}
.tile-scramble { font-variant-numeric: tabular-nums; font-size: calc(14px * var(--tile-scale) * var(--tile-font-scale)); color: var(--tile-header-scramble); flex-shrink: 0; font-weight: 600; }
.tile-details {
    display: flex;
    flex-direction: column;
    gap: calc(3px * var(--tile-scale));
    overflow: hidden;
    padding: 2px 0;
    flex-shrink: 0;
}
.tile-stat { color: var(--tile-demo-text); font-weight: 500; line-height: 1.2; font-size: calc(11px * var(--tile-scale) * var(--tile-font-scale)); flex-shrink: 0; }
.truncate-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}
.tile-notes {
    background: var(--tile-notes-bg);
    color: var(--tile-notes-text);
    font-size: calc(10px * var(--tile-scale) * var(--tile-font-scale));
    line-height: 1.3;
    padding: calc(4px * var(--tile-scale)) calc(10px * var(--tile-scale));
    margin: 0 calc(-12px * var(--tile-scale)) calc(-12px * var(--tile-scale));
    border-top: 1px solid var(--tile-notes-border);
    border-radius: 0 0 var(--tile-radius) var(--tile-radius);
    flex: 1 1 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--tile-notes-clamp);
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.tile-notes strong { font-weight: 700; color: var(--tile-notes-color); }
.tile-notes em { font-style: italic; }
.tile-notes ul, .tile-notes ol {
    margin: 0;
    padding-left: 1.3em;
}
.tile-notes li {
    margin: 0;
    padding: 0;
}
.tile-notes-empty {
    min-height: calc(18px * var(--tile-scale));
}
/* ---- Tile Action Menu ---- */
.tile-scramble-action {
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: background 0.15s;
}
.tile-scramble-action:hover,
.tile-menu-open .tile-scramble-action {
    background: rgba(var(--color-action-rgb), 0.15);
}
.tam-caret {
    font-size: calc(12px * var(--tile-scale) * var(--tile-font-scale)) !important;
    line-height: 1;
    color: var(--text-muted);
    margin-left: 0;
    transition: transform 0.15s;
}
.tile-menu-open .tam-caret {
    transform: rotate(180deg);
}

/* Tile action popup menu */
.tile-action-menu {
    position: absolute;
    top: calc(30px * var(--tile-scale));
    right: calc(2px * var(--tile-scale));
    z-index: 100;
    background: var(--bg-tile);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    box-shadow: var(--shadow-lg), 0 8px 24px rgba(var(--palette-neutral-rgb),0.18);
    min-width: 150px;
    padding: 3px 0;
    animation: tamFadeIn 0.12s ease-out;
}
.tile-action-menu.tam-left {
    right: auto;
    left: calc(4px * var(--tile-scale));
}
.tile-action-menu.tam-up {
    top: auto;
    bottom: calc(30px * var(--tile-scale));
}
@keyframes tamFadeIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tam-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    min-height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-main);
    text-align: left;
    transition: background 0.1s;
}
.tam-item:hover:not(:disabled) {
    background: rgba(var(--color-action-rgb), 0.08);
}
.tam-item:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.tam-item .material-symbols-outlined {
    font-size: 14px;
}
.tam-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.tam-label {
    flex-grow: 1;
}
.tam-divider {
    height: 1px;
    background: var(--border-light);
    margin: 3px 8px;
}

/* Icon colors for rating & flag items */
.tam-icon-good .material-symbols-outlined { color: var(--accent-green); }
.tam-icon-bad .material-symbols-outlined { color: var(--accent-red); }
.tam-icon-crim .material-symbols-outlined { color: var(--accent-red); }
.tam-icon-le .material-symbols-outlined { color: var(--accent-blue); }
.tam-icon-followup .material-symbols-outlined { color: var(--accent-orange); }
.tam-item.tam-danger { color: rgba(var(--palette-danger-rgb), 0.85); }
.tam-item.tam-danger:hover { background: rgba(var(--palette-danger-rgb), 0.08); color: rgba(var(--palette-danger-rgb), 1); }
.tam-item.tam-danger .material-symbols-outlined { font-size: 14px; color: inherit; }

/* Active state highlight */
.tam-item.tam-active {
    font-weight: 700;
}
.tam-item.tam-active.good-act { background: rgba(var(--palette-success-rgb), 0.12); }
.tam-item.tam-active.bad-act { background: rgba(var(--palette-danger-rgb), 0.12); }
.tam-item.tam-active.s-act { color: var(--accent-blue); }
.tam-item.tam-active.d-act { color: var(--accent-orange); }
.tam-item.tam-active.fta-act { color: var(--fta-border); }
.tam-item.tam-active.followup-act { background: rgba(var(--palette-warning-rgb), 0.12); }
.tam-item.tam-active.crim-act { background: rgba(var(--palette-danger-rgb), 0.12); }
.tam-item.tam-active.le-act { background: rgba(var(--palette-primary-rgb), 0.12); }

/* Strike line icons for state/defense menu items */
.tam-strike-line {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    transform: rotate(-45deg);
}
.tam-strike-line-state { background: var(--accent-blue); }
.tam-strike-line-defense { background: var(--accent-orange); }
.tam-item.tam-strike-state { background: rgba(var(--palette-primary-rgb), 0.04); }
.tam-item.tam-strike-defense { background: rgba(var(--palette-warning-rgb), 0.04); }
.tam-item.tam-strike-state:hover:not(:disabled) { background: rgba(var(--palette-primary-rgb), 0.1); }
.tam-item.tam-strike-defense:hover:not(:disabled) { background: rgba(var(--palette-warning-rgb), 0.1); }
.tam-item.tam-active.c-act { background: rgba(var(--palette-neutral-rgb), 0.08); color: var(--theme-prosecution); }
.tam-item.tam-active.s-act { background: rgba(var(--palette-primary-rgb), 0.15); color: var(--accent-blue); }
.tam-item.tam-active.d-act { background: rgba(var(--palette-warning-rgb), 0.15); color: var(--accent-orange); }

/* Keep tile above siblings while menu is open */
.juror-tile.tile-menu-open {
    z-index: 50;
}
.seat-slot:has(.tile-menu-open) {
    z-index: 101;
}

/* Preview panel */
.juror-tile.juror-preview {
    outline: 2.5px solid var(--accent-orange) !important;
    outline-offset: -2.5px;
}
.preview-number-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(80px * var(--tile-scale));
    font-weight: 800;
    color: rgba(var(--color-strike-panel-rgb), 0.1);
    pointer-events: none;
    z-index: 1;
    margin: 0;
}

/* Flag corner wraps */
.tile-flag-corner {
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
    width: calc(28px * var(--tile-scale));
    height: calc(28px * var(--tile-scale));
    flex: none;
    margin: 0;
    padding: 0;
}
.tile-flags-2 {
    width: calc(34px * var(--tile-scale));
    height: calc(34px * var(--tile-scale));
}
.tile-flags-3 {
    width: calc(40px * var(--tile-scale));
    height: calc(40px * var(--tile-scale));
}
.tile-flag-layer {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 0 0 var(--tile-radius) 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.tile-flags-1 .tile-flag-layer {
    width: 100%;
    height: 100%;
}
.tile-flags-2 .tile-flag-layer[data-layer="0"] {
    width: 100%;
    height: 100%;
}
.tile-flags-2 .tile-flag-layer[data-layer="1"] {
    width: calc(22px * var(--tile-scale));
    height: calc(22px * var(--tile-scale));
}
.tile-flags-3 .tile-flag-layer[data-layer="0"] {
    width: 100%;
    height: 100%;
}
.tile-flags-3 .tile-flag-layer[data-layer="1"] {
    width: calc(30px * var(--tile-scale));
    height: calc(30px * var(--tile-scale));
}
.tile-flags-3 .tile-flag-layer[data-layer="2"] {
    width: calc(20px * var(--tile-scale));
    height: calc(20px * var(--tile-scale));
}
.tile-flag-crim { background: var(--accent-red); opacity: 0.7; }
.tile-flag-le { background: var(--accent-blue); opacity: 0.7; }
.tile-flag-followup { background: var(--accent-orange); opacity: 0.7; }

/* ==================== STRATEGY DRAWER (RIGHT) ==================== */
.war-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(460px, 90vw);
    height: 100vh;
    background: var(--bg-card);
    border-radius: 8px 0 0 8px;
    box-shadow: -6px 0 24px rgba(var(--palette-neutral-rgb), 0.18), -20px 0 60px rgba(var(--palette-neutral-rgb), 0.12);
    z-index: 10001;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
}
.war-panel.open { transform: translateX(0); }
.war-panel-header { background: var(--header-gradient); color: white; display: flex; flex-direction: column; border-radius: 8px 0 0 0; flex-shrink: 0; }
.war-panel-title-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid rgba(var(--palette-surface-rgb), 0.1);
}
.war-panel-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* ---- Toggle Switch (shared component) ---- */
.prefs-toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.prefs-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.prefs-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border-dark);
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.2s;
}
.prefs-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
.prefs-toggle-switch input:checked + .prefs-toggle-slider {
    background: rgba(var(--color-action-rgb), 0.8);
}
.prefs-toggle-switch input:checked + .prefs-toggle-slider::before {
    transform: translateX(18px);
}
/* strat-header/strat-title-bar removed — war-panel-header replaces them */

/* Drawer Header Buttons */
.drawer-header-btn {
    background: rgba(var(--palette-surface-rgb), 0.08);
    color: white;
    border: 1px solid rgba(var(--palette-surface-rgb), 0.15);
    border-radius: 8px;
    padding: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.drawer-header-btn:hover { background: rgba(var(--palette-surface-rgb), 0.15); border-color: rgba(var(--palette-surface-rgb), 0.3); }
.drawer-header-btn.active { background: var(--accent-orange); color: black; border-color: var(--accent-orange); box-shadow: 0 0 10px rgba(var(--color-strike-panel-rgb), 0.3); }
.drawer-header-btn .material-symbols-outlined { font-size: 18px; }

/* strat-tabs/strat-tab removed — war-panel tabs replace them */


/* ==================== NOTEBOOK ==================== */
.ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    background: var(--bg-card);
    padding: 2px 8px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px;
    min-height: 0 !important;
}

.ql-snow.ql-toolbar .ql-formats {
    margin-right: 4px !important;
    display: flex;
    align-items: center;
    gap: 1px;
}

/* Force-kill the 44px global button size */
.ql-snow.ql-toolbar button,
.ql-snow.ql-toolbar .ql-picker {
    width: 20px !important;
    height: 20px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 2px !important;
    border-radius: 4px !important;
    border: none !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar .ql-picker-label:hover {
    background: rgba(var(--palette-neutral-rgb), 0.05) !important;
}

/* Active Blue Engagement */
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label.ql-active {
    background: var(--accent-blue) !important;
    color: #ffffff !important;
}

.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: #ffffff !important;
}
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill {
    fill: #ffffff !important;
}

/* Dropdowns (Header/Size) - Ultra Slim */
.ql-snow.ql-toolbar .ql-picker.ql-header,
.ql-snow.ql-toolbar .ql-picker.ql-size {
    width: auto !important;
    min-width: 32px;
    height: 20px !important;
    padding: 0 2px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

.ql-snow.ql-toolbar .ql-picker-label {
    padding: 0 !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Fix Color/Background visibility - do NOT force stroke globally */
.ql-snow.ql-toolbar .ql-color,
.ql-snow.ql-toolbar .ql-background {
    width: 22px !important;
}

.ql-snow.ql-toolbar .ql-picker-label svg {
    width: 12px !important;
    height: 12px !important;
}

/* Dark Mode - Clean & Minimal */
[data-theme="dark"] .ql-toolbar.ql-snow {
    background: var(--bg-card) !important;
    border-bottom-color: var(--bg-tile) !important;
}
[data-theme="dark"] .ql-snow.ql-toolbar button:hover {
    background: rgba(var(--palette-surface-rgb), 0.1) !important;
}

.ql-container.ql-snow {
    border: none !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ql-editor {
    flex-grow: 1;
    padding: 12px 18px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    background: var(--bg-card);
    color: var(--text-main);
    overflow-y: auto !important;
}

/* ==================== STRIKE TRACKER ==================== */
#warContentStrikeTracker { padding: 0; gap: 0; }
#warContentStrikeTracker > .busted-warning:empty { display: none; }
#warContentStrikeTracker > .busted-warning { padding: 10px 20px; }
.tracker-stats {
    padding: 10px 20px;
    background: var(--bg-pool);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.tracker-side-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.tracker-side-header.state { justify-content: flex-start; }
.tracker-side-header.defense { justify-content: flex-end; }
.tracker-side-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tracker-side-header.state .tracker-side-label { color: var(--accent-blue); }
.tracker-side-header.defense .tracker-side-label { color: var(--accent-orange); }
.tracker-side-count { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tracker-side-header.state .tracker-side-count { color: var(--accent-blue); }
.tracker-side-header.defense .tracker-side-count { color: var(--accent-orange); }
.tracker-side-sep { opacity: 0.4; margin: 0 1px; }
.tracker-center-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.strike-list-container {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-card);
}
.strike-list { padding: 12px 14px; min-width: 0; }
.strike-list:first-child { border-right: 1px solid var(--border-light); }
.strike-slot {
    background: var(--bg-pool);
    border: 1.5px dashed var(--border-light);
    border-radius: 6px;
    margin-bottom: 5px;
    min-height: 38px;
    display: flex;
    align-items: stretch;
    min-width: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.strike-slot:hover { border-color: var(--accent-blue); background: rgba(var(--color-action-rgb), 0.03); }
.strike-slot.drag-over { border-color: var(--accent-blue); background: rgba(var(--color-action-rgb), 0.06); border-style: solid; }

/* Drag-to-strike drop zones */
.strike-drop-zone {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    border: 2.5px dashed;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    pointer-events: auto;
    cursor: default;
}
.strike-drop-state {
    border-color: rgba(var(--palette-primary-rgb), 0.4);
    background: rgba(var(--palette-primary-rgb), 0.06);
}
.strike-drop-defense {
    border-color: rgba(var(--palette-warning-rgb), 0.4);
    background: rgba(var(--palette-warning-rgb), 0.06);
}
.strike-drop-zone.drop-hover.strike-drop-state {
    border-color: var(--accent-blue);
    background: rgba(var(--palette-primary-rgb), 0.14);
    box-shadow: inset 0 0 30px rgba(var(--palette-primary-rgb), 0.1);
}
.strike-drop-zone.drop-hover.strike-drop-defense {
    border-color: var(--accent-orange);
    background: rgba(var(--palette-warning-rgb), 0.14);
    box-shadow: inset 0 0 30px rgba(var(--palette-warning-rgb), 0.1);
}
.strike-drop-icon {
    font-size: 28px;
    opacity: 0.5;
}
.strike-drop-state .strike-drop-icon { color: var(--accent-blue); }
.strike-drop-defense .strike-drop-icon { color: var(--accent-orange); }
.strike-drop-zone.drop-hover .strike-drop-icon { opacity: 1; }
.strike-drop-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
}
.strike-drop-state .strike-drop-label { color: var(--accent-blue); }
.strike-drop-defense .strike-drop-label { color: var(--accent-orange); }
.strike-drop-zone.drop-hover .strike-drop-label { opacity: 1; }
.strike-list:has(.strike-drop-zone) { min-height: 120px; }

.strike-tile {
    width: 100%;
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    touch-action: none;
    font-size: 13px;
    min-width: 0;
}
.strike-tile .drag-handle { cursor: grab; flex-shrink: 0; }
.strike-tile:active { cursor: grabbing; }
.strike-tile.state-tile { background-color: rgba(var(--color-action-rgb), 0.08); border-color: rgba(var(--color-action-rgb), 0.2); color: var(--accent-blue); }
.strike-tile.defense-tile { background-color: rgba(var(--color-strike-panel-rgb), 0.08); border-color: rgba(var(--color-strike-panel-rgb), 0.2); color: var(--color-warning-text); }
[data-theme="dark"] .strike-tile.state-tile { background-color: rgba(var(--color-action-rgb), 0.15); border-color: rgba(var(--color-action-rgb), 0.3); color: var(--accent-blue); }
[data-theme="dark"] .strike-tile.defense-tile { background-color: rgba(var(--color-strike-panel-rgb), 0.15); border-color: rgba(var(--color-strike-panel-rgb), 0.3); color: var(--color-warning-text-light); }

.strike-tile.pass-tile.state-tile {
    background-color: var(--accent-blue-light);
    border: 1.5px dashed var(--accent-blue);
    color: var(--accent-blue);
}
.strike-tile.pass-tile.defense-tile {
    background-color: rgba(var(--color-strike-panel-rgb), 0.08);
    border: 1.5px dashed rgba(var(--color-strike-panel-rgb), 0.4);
    color: var(--color-warning-text);
}
.strike-tile.pass-tile.defense-tile .pass-btn-active {
    background: var(--accent-orange);
}

[data-theme="dark"] .strike-tile.pass-tile.state-tile {
    background-color: rgba(var(--color-action-rgb), 0.1);
    border-color: rgba(var(--color-action-rgb), 0.4);
}
[data-theme="dark"] .strike-tile.pass-tile.defense-tile {
    background-color: rgba(var(--color-strike-panel-rgb), 0.1);
    border-color: rgba(var(--color-strike-panel-rgb), 0.4);
    color: var(--color-warning-text-light);
}

.pass-btn-inline, .pass-btn-active, .pass-btn-mini {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    min-height: 24px;
    min-width: unset;
}

.pass-btn-inline {
    background: transparent;
    border: 1px solid var(--border-dark);
    color: var(--text-muted);
}
.pass-btn-inline:hover {
    background: var(--accent-blue-light);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.pass-btn-active {
    background: var(--accent-blue);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(var(--color-action-rgb), 0.2);
}
.pass-btn-active:hover {
    filter: brightness(1.1);
}

.pass-btn-mini {
    background: rgba(var(--palette-neutral-rgb), 0.05);
    border: 1px solid rgba(var(--palette-neutral-rgb), 0.1);
    color: var(--text-muted);
    padding: 1px 4px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    font-size: 9px;
}
.pass-btn-mini:hover {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.strike-empty { padding: 6px 10px; color: var(--text-muted); font-size: 12px; font-style: italic; width: 100%; display: flex; align-items: center; }
.strike-tile .drag-handle { color: inherit; opacity: 0.5; margin-right: 4px; font-size: 16px; }

/* ==================== DRAWER EDGE TABS ==================== */
.drawer-edge-tab {
    position: fixed;
    top: 0;
    width: 15px;
    height: 100vh;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    background: rgba(15, 37, 69, 0.08);
}
.drawer-edge-tab:hover {
    width: 24px;
    background: rgba(15, 37, 69, 0.14);
    box-shadow: 0 0 8px rgba(15, 37, 69, 0.1);
}
.drawer-edge-tab.visible { display: flex; }
body.trial-mode-active .drawer-edge-tab { display: none !important; }
.drawer-edge-tab .edge-tab-icon {
    font-size: 16px;
    opacity: 0;
    color: var(--text-muted);
    transition: opacity 0.2s ease;
    writing-mode: vertical-rl;
}
.drawer-edge-tab:hover .edge-tab-icon { opacity: 0.8; }
.edge-left { left: 0; border-radius: 0 4px 4px 0; }
.edge-right { right: 0; border-radius: 4px 0 0 4px; }

[data-theme="dark"] .drawer-edge-tab { background: rgba(var(--palette-surface-rgb), 0.08); }
[data-theme="dark"] .drawer-edge-tab:hover { background: rgba(var(--palette-surface-rgb), 0.18); }
[data-theme="dark"] .drawer-edge-tab .edge-tab-icon { color: rgba(255,255,255,0.6); }

/* ==================== CHAT DRAWER (LEFT) ==================== */
.chat-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(400px, 90vw);
    height: 100vh;
    background: var(--bg-card);
    border-right: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 6px 0 24px rgba(var(--palette-neutral-rgb), 0.18), 20px 0 60px rgba(var(--palette-neutral-rgb), 0.12);
    z-index: 10001;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-100%);
    display: flex;
    flex-direction: column;
}
.chat-drawer.open { transform: translateX(0); }

.chat-header {
    padding: 18px 20px;
    background: var(--header-gradient);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(var(--palette-surface-rgb), 0.1);
    border-radius: 0 12px 0 0;
}
.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-card);
}
.chat-msg {
    padding: 12px 16px;
    border-radius: 6px;
    max-width: 85%;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(var(--palette-neutral-rgb), 0.08);
}
.chat-msg.self { align-self: flex-end; background: #0f2545; color: white; border-bottom-right-radius: 4px; }
.chat-msg.other { align-self: flex-start; background: rgba(var(--palette-warning-rgb), 0.1); border: none; color: #0a1e3d; border-bottom-left-radius: 4px; }
.chat-msg-author { font-size: 11px; font-weight: 600; opacity: 0.85; margin-bottom: 4px; }

.emoji-bar {
    display: flex;
    gap: 8px;
    padding: 10px 15px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
    justify-content: center;
}
.emoji-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 10px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    min-height: 44px;
    min-width: 44px;
    box-shadow: var(--shadow-sm);
}
.emoji-btn:hover { border-color: var(--accent-blue); box-shadow: var(--shadow-md); }

.chat-input-area {
    padding: 15px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: 10px;
}
.chat-input-area input { flex-grow: 1; border-radius: 16px; padding: 10px 18px; }

/* ==================== MODALS ==================== */
.modal {
    display: none;
    position: fixed;
    z-index: 10005;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--palette-neutral-rgb), 0.5);
    align-items: flex-start;
    padding: 40px 20px;
    overflow-y: auto;
}

#jurorModal { z-index: 10060 !important; transition: background-color 280ms ease; background-color: transparent; }
#jurorModal.active { background-color: rgba(var(--palette-neutral-rgb), 0.5); }
#addJurorModal { z-index: 10060 !important; }
#importPdfModal { z-index: 10065 !important; }
#batchEditModal { z-index: 10070 !important; }
#confirmModal { z-index: 10080 !important; }

/* mgmtModal/mgmtModalBody removed — setup + settings modals replace them */

.modal-content {
    background-color: var(--bg-card);
    padding: 30px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    box-shadow: var(--shadow-xl);
    color: var(--text-main);
    position: relative;
    margin: auto;
    max-width: 800px;
    width: 100%;
}
.war-content,
.setup-modal-body,
.settings-body,
.acct-body,
.jp-body,
.help-guide-body,
.terms-modal-body,
.strike-list-container,
.panel-entry-body,
.final-panel-content,
.final-panel-overlay-body,
.pe-col-editor-body,
.live-popup-list {
    overscroll-behavior: contain;
}

.close-button {
    color: var(--text-muted);
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10;
}

.close-button.material-symbols-outlined {
    font-size: 24px !important;
    line-height: 44px !important;
}

.close-button:hover {
    background: rgba(var(--color-strike-rgb), 0.08);
    color: var(--accent-red);
}

.modal-header {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 30px;
}

.note-input {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--accent-blue);
    background: var(--note-bg);
    color: var(--note-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    resize: vertical;
    -webkit-user-select: text;
    user-select: text;
}
.modal-form-grid { display: grid; gap: 15px; background: var(--bg-pool); padding: 20px; border-radius: 8px; border: 1px solid var(--border-light); }
.form-group label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.flushed-input {
    background-color: transparent;
    color: var(--text-main);
    border: none;
    border-bottom: 1.5px solid var(--border-dark);
    border-radius: 0;
    padding: 8px 4px;
    font-size: 14px;
    width: 100%;
    -webkit-user-select: text;
    user-select: text;
    transition: border-color 0.2s ease;
}
.flushed-input:focus {
    border-bottom-color: var(--accent-blue);
    outline: none;
}

/* Flag toggle button */
.flag-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.flag-toggle-btn.active { background: var(--accent-red); color: white; }
.flag-toggle-btn.cleared { background: var(--bg-pool); color: var(--text-muted); border: 1px solid var(--border-light); }

/* ==================== SETUP WIZARD (Side Panel) ==================== */

/* --- Setup Modal body --- */
.setup-modal-body {
    flex: 1;
    min-width: 0;
}


.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
    height: 32px;
}
.toast {
    visibility: hidden;
    min-width: 250px;
    background-color: var(--text-main);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 14px 24px;
    position: fixed;
    z-index: 100100;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) translateY(20px);
    font-weight: 500;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
}
.toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==================== EMPTY STATES ==================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: var(--text-muted);
    font-size: 14px;
    gap: 8px;
}
.empty-state .material-symbols-outlined { font-size: 36px; opacity: 0.4; }
.empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--brand-amber);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 2px 8px rgba(var(--brand-amber-rgb), 0.2);
}
.empty-state-cta:hover { background: var(--color-warning-text); }
.empty-state-cta .material-symbols-outlined { font-size: 16px; }

/* ==================== CARD ==================== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.help-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}
.help-section:last-child { border-bottom: none; }
.help-section p { margin: 10px 0; color: var(--text-main); font-size: 14px; }
.help-section ul li { margin-bottom: 10px; color: var(--text-main); font-size: 13.5px; }
.help-section b { color: var(--accent-blue); }
.export-option-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px;
    background: var(--bg-pool);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.export-option-card:hover {
    background: var(--bg-card);
    border-color: var(--accent-blue);
    box-shadow: 0 4px 12px rgba(var(--palette-neutral-rgb), 0.05);
}
.export-option-card input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.export-option-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
.export-option-content .material-symbols-outlined {
    font-size: 24px;
    color: var(--accent-blue);
    opacity: 0.8;
}
.export-option-content strong {
    display: block;
    font-size: 14px;
    color: var(--text-main);
}
.export-option-content p {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: var(--text-muted);
}

.print-only { display: none; }

/* --- PRINT REFINEMENTS --- */
@media print {
    @page { size: portrait; margin: 0.5in; }
    
    /* Hide everything by default */
    body * { visibility: hidden; }
    
    /* Only show the print appendix and its children */
    #printAppendix, #printAppendix * { visibility: visible; }
    #printAppendix {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        visibility: visible !important;
        display: block !important;
    }

    .page-break { page-break-before: always; }
    .no-break { page-break-inside: avoid; }
    
    .print-cover {
        height: 9in;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border: 4px double #1e3a8a;
        margin: 0.5in;
        padding: 1in;
        visibility: visible !important;
    }
    
    .print-header {
        border-bottom: 2px solid #1e3a8a;
        padding-bottom: 10px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        visibility: visible !important;
    }
    
    .print-section-title {
        color: #1e3a8a;
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 1px solid #cbd5e1;
        padding-bottom: 5px;
        margin: 30px 0 15px 0;
        visibility: visible !important;
    }
    
    .print-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        visibility: visible !important;
    }
    .print-table th, .print-table td {
        border: 1px solid #cbd5e1;
        padding: 8px;
        text-align: left;
        font-size: 12px;
        visibility: visible !important;
    }
    .print-table th { background: #f8fafc; font-weight: bold; }

    .seated-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
        margin-bottom: 20px;
        visibility: visible !important;
    }
    .seated-box {
        border: 2px solid #1e3a8a;
        border-radius: 6px;
        padding: 8px;
        text-align: center;
        background: #fff;
        visibility: visible !important;
    }
}

/* ==================== LOGIN VIEW ==================== */
.view-container { display: flex; min-height: 100vh; width: 100%; flex-direction: column; align-items: center; }
#appView { height: 100vh; overflow: hidden; }
#appView > div:first-child { min-height: 0; }
#dashboardView { justify-content: flex-start; }

/* ==================== LOGIN SPLIT ==================== */
.login-split {
    flex-direction: row;
    align-items: stretch;
}

/* ── Hero (left) ─────────────────────────────────────── */
.login-hero {
    flex: 0 0 44%;
    background: var(--header-gradient);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 60px 40px;
}
.login-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.login-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.login-hero-mark {
    width: 80px;
    height: auto;
    opacity: 0.15;
}
.login-hero-lockup {
    height: 48px;
    width: auto;
}
.login-hero-tagline {
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.5px;
}
.login-hero-footer {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 1;
}
/* ── Form (right) ────────────────────────────────────── */
.login-form-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
    padding: 40px;
    position: relative;
}
.login-form-container {
    width: 100%;
    max-width: 380px;
}
.login-heading {
    margin: 0 0 4px 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.03em;
}
.login-subheading {
    margin: 0 0 28px 0;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
.login-field {
    margin-bottom: 16px;
}
.login-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.login-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-input:focus {
    border-color: #0A1E3D;
    box-shadow: 0 0 0 3px rgba(10,30,61,0.08);
}
.login-input-code {
    border-color: rgba(217,119,6,0.4);
}
.login-input-code:focus {
    border-color: #D97706;
    box-shadow: 0 0 0 3px rgba(217,119,6,0.1);
}
.login-field-hint {
    margin-top: 6px;
    font-size: 11px;
    color: rgba(10,30,61,0.5);
    line-height: 1.4;
}
.login-field-cta {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(10,30,61,0.04);
    border: 1px solid rgba(10,30,61,0.08);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(10,30,61,0.6);
    line-height: 1.4;
}
.login-hint-link {
    color: #D97706;
    font-weight: 700;
    text-decoration: none;
}
.login-hint-link:hover {
    text-decoration: underline;
}
.login-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(10,30,61,0.06);
    border: 1px solid rgba(10,30,61,0.12);
    border-radius: 6px;
    padding: 8px 14px 8px 10px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #0A1E3D;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.login-back-btn:hover { background: rgba(217,119,6,0.1); border-color: rgba(217,119,6,0.3); color: #D97706; }
.login-back-btn .material-symbols-outlined { font-size: 18px; }
.login-submit-btn {
    width: 100%;
    padding: 13px;
    margin-top: 4px;
    background: #D97706;
    color: white;
    border: none;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 2px 8px rgba(217,119,6,0.25);
}
.login-submit-btn:hover {
    background: #b45309;
    box-shadow: 0 4px 14px rgba(217,119,6,0.35);
}
.login-submit-btn:active { transform: translateY(0); }
.login-forgot-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 0 0;
    margin: 0 auto;
    display: block;
    transition: color 0.15s;
}
.login-forgot-btn:hover { color: #D97706; }
.login-alt-action {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
.login-alt-btn {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: #0A1E3D;
    color: white;
    border: none;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 2px 8px rgba(10,30,61,0.2);
}
.login-alt-btn:hover {
    background: #132d5e;
    box-shadow: 0 4px 12px rgba(10,30,61,0.3);
}
.login-alt-btn:active { transform: translateY(0); }
.login-footer {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.5;
    font-weight: 500;
}
.login-footer .version-num {
    display: block;
    margin-top: 2px;
    font-weight: 700;
}
.signup-name-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Login dark mode ─────────────────────────────────── */
[data-theme="dark"] .login-form-side { background: #1a1a1c; }
[data-theme="dark"] .login-alt-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); box-shadow: none; }
[data-theme="dark"] .login-alt-btn:hover { background: rgba(255,255,255,0.15); }
[data-theme="dark"] .login-input:focus { border-color: #D97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.1); }
[data-theme="dark"] .login-footer { color: rgba(255,255,255,0.3); }

/* ── Login responsive ────────────────────────────────── */
@media (max-width: 768px) {
    .login-split { flex-direction: column; }
    .login-hero {
        flex: none;
        padding: 32px 24px;
        min-height: auto;
    }
    .login-hero-mark { width: 48px; }
    .login-hero-lockup { height: 32px; }
    .login-hero-tagline { font-size: 13px; }
    .login-hero-footer { position: static; margin-top: 20px; }
    .login-form-side { padding: 32px 24px; }
}

/* ==================== LOBBY ==================== */
.lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 64px;
    background: var(--header-gradient);
    border-radius: 6px;
    color: white;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(var(--palette-neutral-rgb), 0.2);
    border: 1px solid rgba(var(--color-action-rgb), 0.1);
    position: relative;
    z-index: 10;
}
.lobby-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.lobby-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lobby-logo { height: 42px; }
.lobby-header-divider {
    width: 1px;
    height: 24px;
    background: rgba(var(--palette-surface-rgb), 0.15);
    flex-shrink: 0;
}
.lobby-user-cluster {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.lobby-user-info {
    font-size: 11px;
    color: rgba(var(--palette-surface-rgb), 0.55);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
}
.lobby-user-info:hover { color: white; }
.lobby-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}
.lobby-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: rgba(var(--palette-surface-rgb), 0.55);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    position: relative;
}
.lobby-icon-btn .material-symbols-outlined { font-size: 18px; }
.lobby-icon-btn:hover { background: rgba(var(--palette-surface-rgb), 0.1); color: white; }
.lobby-icon-admin { color: var(--accent-orange); }
.lobby-icon-admin:hover { background: rgba(var(--color-strike-panel-rgb), 0.2); color: var(--accent-orange); }

[data-theme="dark"] .lobby-header {
    background: var(--header-gradient-dark) !important;
}
[data-theme="dark"] .lobby-header .material-symbols-outlined { color: inherit !important; }
[data-theme="dark"] .lobby-tab.active { color: var(--brand-amber); }
[data-theme="dark"] .lobby-tab.active .lobby-tab-count { background: rgba(var(--brand-amber-rgb), 0.12); color: var(--brand-amber); }
[data-theme="dark"] .lobby-search-input:focus { border-color: var(--brand-amber); }
[data-theme="dark"] .lobby-inline-cta { background: var(--header-gradient-dark); }
[data-theme="dark"] .lobby-play-btn.active { background: var(--brand-amber); }

/* ==================== RESPONSIVE / TABLET ==================== */
@media (max-width: 768px) {
    .lobby-header { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 8px; }
    .lobby-header-left { width: 100%; justify-content: center; }
    .lobby-header-right { width: 100%; justify-content: center; flex-wrap: wrap; gap: 6px; }
    .lobby-user-info { display: none; }
    .toolbar-group { justify-content: center; flex-wrap: wrap; }
    .app-header {
        height: auto;
        min-height: 44px;
        padding: 8px 10px !important;
        flex-wrap: wrap;
        gap: 6px;
    }
    .header-left { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; justify-content: center; }
    .unified-case-info { max-width: 160px; }
    .toolbar-group { flex: 1 1 100%; justify-content: center; }
    .toolbar-group-right { flex: 1 1 100%; justify-content: center; margin-left: 0; }
    .lobby-controls-bar { gap: 6px; }
    .lobby-inline-cta { flex: 1 1 100%; justify-content: center; }
    .lobby-search-wrap { min-width: 0; }
}

/* ==================== LOADER DOTS ==================== */
.loader-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.loader-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
    animation: dot-pulse 1.4s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(var(--palette-neutral-rgb), 0.15);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--palette-neutral-rgb), 0.25);
}

/* ==================== LOBBY & ADMIN LIST ITEMS ==================== */
@keyframes lobby-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.lobby-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(var(--palette-neutral-rgb), 0.04);
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    animation: lobby-card-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.lobby-card.active {
    position: relative;
    border-color: rgba(var(--brand-amber-rgb), 0.25);
    background: rgba(var(--brand-amber-rgb), 0.04);
    box-shadow: 0 2px 12px rgba(var(--brand-amber-rgb), 0.08), 0 1px 4px rgba(var(--palette-neutral-rgb), 0.04);
}
.lobby-card.completed {
    opacity: 0.85;
    background: var(--bg-card);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(var(--palette-neutral-rgb), 0.04);
}
.lobby-card.archived {
    opacity: 0.6;
    background: var(--bg-card);
    border-radius: 6px;
    border-style: dashed;
}
.lobby-card.archived .lobby-card-title { color: var(--text-muted); font-size: 13px; font-weight: 700; }
.lobby-card.completed .lobby-card-charges,
.lobby-card.archived .lobby-card-charges { display: none; }
.lobby-card.completed .lobby-card-meta .meta-date,
.lobby-card.archived .lobby-card-meta .meta-date { display: none; }
.lobby-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-dark);
}
.lobby-card.active:hover {
    border-color: rgba(var(--brand-amber-rgb), 0.5);
    box-shadow: 0 8px 30px rgba(var(--brand-amber-rgb), 0.12), 0 2px 8px rgba(var(--palette-neutral-rgb), 0.04);
}
.lobby-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.lobby-card-charges {
    font-size: 11px;
    color: var(--text-muted);
    font-style: normal;
    margin-bottom: 2px;
    opacity: 0.65;
    font-weight: 500;
}
.lobby-card-title.active { color: var(--text-main); }
.lobby-card-title.completed { color: var(--text-muted); font-size: 13px; font-weight: 700; }
.lobby-card-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 500;
    opacity: 0.7;
}
.lobby-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.lobby-card-secondary-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.lobby-card:hover .lobby-card-secondary-actions,
.lobby-card:focus-within .lobby-card-secondary-actions { opacity: 1; }
@media (hover: none) {
    .lobby-card-secondary-actions { opacity: 1; }
}
.lobby-card-creator {
    font-size: 10px;
    color: var(--text-muted);
    font-style: normal;
    margin-right: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

.lobby-card-info { flex: 1; }
.meta-icon { font-size: 13px; }

.lobby-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lobby-type-badge.felony { background: rgba(var(--brand-amber-rgb), 0.12); color: var(--color-warning-text); }
.lobby-type-badge.misdemeanor { background: rgba(var(--palette-header-rgb), 0.08); color: rgb(var(--palette-header-rgb)); }
[data-theme="dark"] .lobby-type-badge.felony { color: var(--brand-amber); }
[data-theme="dark"] .lobby-type-badge.misdemeanor { background: rgba(var(--palette-surface-rgb), 0.08); color: rgba(var(--palette-surface-rgb), 0.7); }
.lobby-progress-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
.lobby-progress-chip .meta-icon { font-size: 13px; }
.action-icon { font-size: 18px; }

/* Play Buttons */
.lobby-play-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: 0 4px 12px rgba(var(--palette-neutral-rgb), 0.1);
}
.lobby-play-btn .material-symbols-outlined {
    font-size: 26px;
    font-variation-settings: 'FILL' 1;
    margin-left: 2px; /* Visual centering of triangle */
}
.lobby-play-btn.active {
    background: var(--brand-amber);
    color: white;
}
.lobby-play-btn.active:hover {
    background: var(--color-warning-text);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(var(--brand-amber-rgb), 0.35);
}
.lobby-play-btn.completed {
    background: var(--fta-border);
    color: white;
    width: 44px;
    height: 44px;
}
.lobby-play-btn.completed .material-symbols-outlined {
    font-size: 20px;
}
.lobby-play-btn.completed:hover {
    background: var(--fta-border);
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(var(--palette-neutral-rgb), 0.2);
}

/* LIVE indicator */
.lobby-card-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px;
}
.lobby-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    min-height: 0;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 700;
    background: rgba(var(--brand-amber-rgb), 0.1);
    color: var(--brand-amber);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    border: 1px solid rgba(var(--brand-amber-rgb), 0.25);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lobby-live-indicator:hover {
    background: var(--brand-amber);
    color: white;
}
.lobby-live-dot {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    animation: pulse-amber 1.5s infinite;
}
@keyframes pulse-amber {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--brand-amber-rgb), 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(var(--brand-amber-rgb), 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--brand-amber-rgb), 0); }
}

.active-users-popup {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(var(--palette-neutral-rgb),0.15);
    z-index: 100;
    min-width: 150px;
    font-size: 12px;
}
.active-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
}
.active-user-item:not(:last-child) {
    border-bottom: 1px solid var(--border-light);
}
.active-users-popup-header {
    font-weight: 700;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 4px;
}
.active-users-popup-empty {
    font-style: italic;
    opacity: 0.6;
}
.active-user-name { font-weight: 600; }
.active-user-role {
    font-size: 9px;
    opacity: 0.6;
    text-transform: uppercase;
}
.active-user-icon {
    font-size: 14px;
    color: var(--accent-green);
}
.active-user-details {
    display: flex;
    flex-direction: column;
}

.icon-btn-muted {
    background: transparent;
    color: var(--text-muted);
    padding: 6px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-btn-danger {
    background: transparent;
    color: var(--accent-red);
    padding: 6px;
    border-radius: 4px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-list-item {
    background: var(--bg-card);
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid var(--border-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(var(--palette-neutral-rgb),0.02);
}
.admin-item-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 14px;
}
.admin-item-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}
.admin-badge {
    background: rgba(var(--color-strike-panel-rgb),0.1);
    color: var(--accent-orange);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    margin-left: 8px;
    border: 1px solid var(--accent-orange);
}
.admin-action-btn {
    background: transparent;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.admin-action-btn.edit { color: var(--accent-blue); border: 1px solid var(--accent-blue); }
.admin-action-btn.toggle-on { color: var(--accent-orange); border: 1px solid var(--accent-orange); }
.admin-action-btn.toggle-off { color: var(--text-muted); border: 1px solid var(--border-dark); }
.admin-action-btn.remove { color: var(--accent-red); border: 1px solid var(--accent-red); margin-left: 8px; }
.admin-action-btn.restore { color: var(--accent-green); border: 1px solid var(--accent-green); }
.admin-action-btn.go-live { color: var(--accent-blue); border: 1px solid var(--accent-blue); }
.admin-action-btn.delete { color: var(--accent-red); border: 1px solid var(--accent-red); }
.admin-self-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}
.chat-init-msg {
    text-align: center;
    opacity: 0.5;
    font-size: 12px;
    margin-top: 20px;
    font-style: italic;
}

/* ==================== POOL SEARCH & FILTER ==================== */
.pool-filter-bar {
    padding: 12px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 10px;
}

.pool-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pool-search-wrap {
    position: relative;
    flex: 1;
}

.pool-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

.pool-search-input {
    width: 100%;
    padding: 8px 32px 8px 36px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

.pool-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.pool-search-clear:hover {
    opacity: 1;
}

.pool-sort-select {
    padding: 8px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    min-width: 160px;
    border-radius: 8px !important;
}

.pool-dropdown-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.pool-filter-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pool-filter-label > span {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    padding-left: 2px;
}

.pool-filter-select {
    padding: 5px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    min-width: 100px;
    max-width: 140px;
}

.pool-filter-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--accent-red);
    background: transparent;
    color: var(--accent-red);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.pool-filter-reset-btn:hover {
    background: var(--accent-red);
    color: white;
}

.tile-location-badge {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-pool);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--text-muted);
    margin-left: 4px;
    white-space: nowrap;
}

/* ==================== ACTIVITY LOG ==================== */
.activity-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    text-align: center;
    gap: 8px;
}

.activity-empty p {
    margin: 0;
    font-size: 13px;
}

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0;
}

.activity-date-divider {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    padding: 12px 16px 6px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 4px;
}

.activity-entry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.activity-entry:hover {
    background: var(--bg-pool);
}

.activity-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-pool);
    border: 1px solid var(--border-light);
}

.activity-icon .material-symbols-outlined {
    font-size: 18px;
}

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

.activity-detail {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
}

.activity-meta {
    display: flex;
    gap: 10px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
}

.activity-author {
    font-weight: 700;
}

.activity-time {
    opacity: 0.7;
}

/* ==================== ACTIVITY FILTER TOOLBAR ==================== */
.activity-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-pool);
    flex-wrap: wrap;
}

.activity-filter-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0 10px;
    flex: 1;
    min-width: 140px;
    max-width: 240px;
}

.activity-filter-search .material-symbols-outlined {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.activity-filter-search input {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-main);
    font-size: 12px;
    padding: 7px 0;
    width: 100%;
    font-family: inherit;
}

.activity-filter-search input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.activity-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 7px 26px 7px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-main);
    cursor: pointer;
    min-width: 110px;
    transition: border-color 0.15s ease;
}

.activity-filter-select:hover {
    border-color: var(--accent-blue);
}

.activity-filter-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(var(--palette-primary-rgb), 0.15);
}

.activity-filter-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.activity-filter-count {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.activity-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 4px 10px 4px 6px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.activity-filter-clear:hover {
    color: var(--accent-red);
    border-color: var(--accent-red);
    background: rgba(var(--palette-danger-rgb), 0.08);
}

.activity-filter-clear .material-symbols-outlined {
    font-size: 14px;
}

/* ==================== STATS DASHBOARD ==================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    padding: 15px;
    background: var(--bg-card);
    min-height: 100%;
}
.stats-card {
    background: var(--bg-pool);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--border-light);
    box-shadow: none;
    display: flex;
    flex-direction: column;
}
.stats-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: rgba(var(--palette-neutral-rgb), 0.04);
    border-bottom: 1px solid var(--border-light);
    margin: -16px -16px 12px -16px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
}
.stats-row span { color: var(--text-muted); }
.stats-row b { color: var(--text-main); font-weight: 700; }

/* Dual Gauge Card */
.dual-gauge-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
}
.gauge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.health-gauge { width: 85px; height: 85px; }

.circular-chart { display: block; margin: 0 auto; max-width: 100%; }
.circle-bg { fill: none; stroke: var(--bg-pool); stroke-width: 2.8; }
.circle { fill: none; stroke-width: 2.8; stroke-linecap: round; animation: progress 1.2s ease-out forwards; }
@keyframes progress { 0% { stroke-dasharray: 0 100; } }

.circular-chart.green .circle { stroke: var(--accent-green); }
.circular-chart.orange .circle { stroke: var(--accent-orange); }
.circular-chart.red .circle { stroke: var(--accent-red); }

.percentage { 
    fill: var(--text-main); 
    font-family: 'Inter', sans-serif; 
    font-size: 0.55em; 
    text-anchor: middle; 
    font-weight: 800; 
}
.stats-subtext { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* Compact Bar Charts */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-item { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.bar-label { width: 80px; color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.bar-wrap { flex-grow: 1; height: 6px; background: var(--bg-pool); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent-blue); border-radius: 3px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.bar-val { width: 25px; text-align: right; font-weight: 700; color: var(--text-main); font-size: 11px; }

/* Stats Divider */
.stats-divider { height: 1px; background: var(--border-light); margin: 4px 0; }

/* Wide card spans full row */
.stats-card-wide { grid-column: 1 / -1; }

/* Seated vs Pool Comparison */
.stats-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stats-compare-section { display: flex; flex-direction: column; gap: 6px; }
.stats-compare-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 2px; }
.stats-compare-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.stats-compare-bar-label { width: 70px; color: var(--text-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; flex-shrink: 0; }
.stats-compare-bars { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.stats-compare-bar { height: 4px; border-radius: 2px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); min-width: 1px; }
.stats-compare-bar.seated { background: var(--accent-blue); }
.stats-compare-bar.pool { background: var(--accent-orange); opacity: 0.7; }
.stats-compare-vals { width: 60px; text-align: right; font-size: 10px; color: var(--text-muted); font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.stats-compare-legend { display: flex; gap: 16px; justify-content: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.stats-legend-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-muted); font-weight: 600; }
.stats-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.stats-legend-dot.seated { background: var(--accent-blue); }
.stats-legend-dot.pool { background: var(--accent-orange); opacity: 0.7; }

/* ==================== STATS TOOLTIP ==================== */
.stats-info-wrapper {
    position: relative;
    cursor: help;
    width: 100%;
}
.stats-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 280px;
    background: var(--bg-card);
    background: linear-gradient(165deg, #1c1c1e 0%, #122a1d 100%);
    border: 1px solid rgba(var(--color-keeper-rgb), 0.35);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 15px 40px rgba(var(--palette-neutral-rgb),0.6), 0 5px 15px rgba(var(--palette-neutral-rgb),0.3);
    z-index: 100060; /* Extremely high to clear all modal elements */
    opacity: 0;
    pointer-events: none;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--color-keeper-text-light);
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
}
[data-theme="light"] .stats-tooltip {
    background: linear-gradient(165deg, #ffffff 0%, #f0fff4 100%);
    color: var(--color-keeper-text);
    border-color: rgba(var(--color-keeper-rgb), 0.4);
    box-shadow: 0 10px 30px rgba(var(--palette-neutral-rgb),0.15);
}
.stats-info-wrapper:hover .stats-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.tooltip-title {
    font-weight: 800;
    color: var(--accent-green);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(var(--color-keeper-rgb), 0.2);
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tooltip-item {
    margin-bottom: 8px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.tooltip-item .material-symbols-outlined {
    font-size: 16px;
    color: var(--accent-green);
    flex-shrink: 0;
}

/* === HTML EXTRACTED STYLES === */


.dashboard-view { padding-top: 24px; padding-bottom: 24px; }
.lobby-container { max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; }

/* ── Lobby Grid ───────────────────────────────────────────────── */
.lobby-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

/* ── Cases Panel (right) ──────────────────────────────────────── */
.lobby-cases-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 14px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}


/* ── Settings Stats ───────────────────────────────────────────── */
.settings-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.settings-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 10px;
    background: rgba(var(--palette-neutral-rgb), 0.04);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    text-align: center;
}
.settings-stat-icon { font-size: 22px; font-variation-settings: 'FILL' 1; }
.settings-stat-icon.active { color: var(--accent-green); }
.settings-stat-icon.completed { color: var(--text-muted); }
.settings-stat-icon.archived { color: var(--accent-orange); }
.settings-stat-value { font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 700; color: var(--text-main); letter-spacing: -0.02em; line-height: 1; }
.settings-stat-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Controls Bar ─────────────────────────────────────────────── */
.lobby-controls-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.lobby-inline-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--header-gradient);
    color: white;
    border: 1px solid rgba(var(--brand-amber-rgb), 0.2);
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(var(--palette-header-rgb), 0.2);
}
.lobby-inline-cta .material-symbols-outlined {
    font-size: 18px;
    color: var(--accent-orange);
    font-variation-settings: 'FILL' 1;
}
.lobby-inline-cta:hover {
    background: linear-gradient(135deg, #0f2545 0%, #1a3a6e 100%);
    border-color: rgba(var(--brand-amber-rgb), 0.4);
    box-shadow: 0 4px 14px rgba(var(--palette-header-rgb), 0.3);
}
.lobby-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.lobby-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
    pointer-events: none;
}
.lobby-search-input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    outline: none;
    transition: border-color 0.15s;
}
.lobby-search-input:focus { border-color: rgb(var(--palette-header-rgb)); }
.lobby-sort-select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}
.lobby-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    padding: 3px;
    background: rgba(var(--palette-neutral-rgb), 0.06);
    border-radius: 6px;
    border: 1px solid var(--border-light);
}
.lobby-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.lobby-tab .material-symbols-outlined { font-size: 15px; }
.lobby-tab:hover { color: var(--text-main); background: rgba(var(--palette-neutral-rgb), 0.06); }
.lobby-tab.active {
    color: rgb(var(--palette-header-rgb));
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(var(--palette-neutral-rgb), 0.12), 0 0 0 1px rgba(var(--palette-neutral-rgb), 0.06);
    font-weight: 700;
}
.lobby-tab.active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.lobby-tab-count {
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    padding: 0 5px;
    background: rgba(var(--palette-neutral-rgb), 0.08);
    color: var(--text-muted);
    line-height: 1;
}
.lobby-tab.active .lobby-tab-count {
    background: rgba(var(--palette-header-rgb), 0.1);
    color: rgb(var(--palette-header-rgb));
}

/* ── Case List ────────────────────────────────────────────────── */
.lobby-case-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; }
.lobby-section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 2px;
    margin-top: 4px;
}
.lobby-section-divider:first-child { margin-top: 0; }
.lobby-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    opacity: 0.6;
    white-space: nowrap;
}
.lobby-section-line {
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.admin-container { max-width: 1400px; width: 100%; margin: auto; padding: 0 20px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; border-bottom: 2px solid var(--border-dark); padding-bottom: 15px; }
.admin-title { margin: 0; color: var(--accent-orange); display: flex; align-items: center; gap: 10px; }
.admin-title-icon { font-size: 32px; }
.admin-subtitle { margin: 5px 0 0 0; color: var(--text-muted); }
.admin-users-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 25px; }
/* System Tab Layout — Sidebar sub-nav + content area */
.admin-system-layout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.admin-system-subnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 20px; }
.admin-subnav-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; text-align: left; white-space: nowrap; position: relative; }
.admin-subnav-item:hover { background: var(--bg-pool); color: var(--text-main); }
.admin-subnav-item.active { background: rgba(var(--color-strike-panel-rgb),0.08); color: var(--accent-orange); font-weight: 700; }
.admin-subnav-item .material-symbols-outlined { font-size: 18px; }
.admin-dirty-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-orange); margin-left: auto; }
.admin-dirty-dot.visible { display: block; }
.admin-system-content { min-width: 0; }
.admin-system-section { display: none; flex-direction: column; gap: 20px; }
.admin-system-section.active { display: flex; }
.admin-section-footer { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 4px 0; }
.admin-section-revert { display: none; }
.admin-section-revert.visible { display: inline-flex; }
.admin-section-save.dirty { background: var(--accent-orange); color: white; animation: subtlePulse 2s ease-in-out infinite; }
@keyframes subtlePulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 4px rgba(var(--color-strike-panel-rgb),0.15); } }
.card.flush { margin: 0; }
.admin-card-title { margin-top: 0; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-dark); padding-bottom: 10px; }
.admin-card-title.orange { color: var(--accent-orange); }
.card.system-version { margin: 0; border: 1px solid var(--accent-orange); background: rgba(var(--color-strike-panel-rgb), 0.05); }
.admin-card-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 15px; }
.admin-card-actions { display: flex; align-items: center; gap: 15px; }
.btn-orange { background: var(--accent-orange); color: white; }
.version-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-list.scrollable { gap: 6px; max-height: 500px; overflow-y: auto; }
.admin-presets-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
.admin-sidebar-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-dark); padding-bottom: 10px; margin-bottom: 10px; }
.admin-sidebar-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.btn-compact { padding: 4px 10px; font-size: 11px; min-height: auto; }

.preset-empty-state { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.preset-empty-icon { font-size: 48px; color: var(--text-muted); }
.preset-empty-text { color: var(--text-muted); margin-top: 10px; }

/* ==================== ADMIN POWER GRID ==================== */

/* Summary Bar */
.admin-summary-bar { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.admin-summary-bar .count-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.admin-summary-bar .count-badge.total { background: rgba(var(--palette-neutral-rgb),0.05); color: var(--text-main); }
.admin-summary-bar .count-badge.admin { background: rgba(var(--color-strike-panel-rgb),0.1); color: var(--accent-orange); }
.admin-summary-bar .count-badge.standard { background: rgba(var(--color-action-rgb),0.08); color: var(--accent-blue); }
.admin-summary-bar .count-badge.active { background: rgba(var(--color-keeper-rgb),0.1); color: var(--accent-green); }
.admin-summary-bar .count-badge.completed { background: rgba(var(--palette-neutral-rgb),0.05); color: var(--text-muted); }
.admin-summary-bar .count-badge.archived { background: rgba(var(--color-strike-panel-rgb),0.08); color: var(--accent-orange); }

/* Filter Bar */
.admin-filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 400px; }
.admin-search-input { width: 100%; padding: 7px 32px 7px 34px; font-size: 13px; border: 1px solid var(--border-dark); border-radius: 8px; background: var(--bg-pool); transition: border-color 0.2s, box-shadow 0.2s; }
.admin-search-input:focus { outline: none; border-color: var(--accent-orange); box-shadow: 0 0 0 3px rgba(var(--color-strike-panel-rgb),0.1); }
.admin-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-muted); pointer-events: none; }
.admin-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-muted); cursor: pointer; opacity: 0.6; transition: opacity 0.15s; }
.admin-search-clear:hover { opacity: 1; }

/* Filter Chips */
.admin-filter-chips { display: flex; gap: 4px; }
.admin-chip { padding: 4px 12px; font-size: 11px; font-weight: 700; border-radius: 12px; border: 1px solid var(--border-dark); background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }
.admin-chip.active { background: var(--accent-orange); color: white; border-color: var(--accent-orange); }
.admin-chip:hover:not(.active) { border-color: var(--accent-orange); color: var(--accent-orange); }

/* Batch Actions */
.admin-batch-actions { display: flex; gap: 6px; margin-left: auto; }
.btn-danger { background: var(--accent-red) !important; color: white !important; }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border-dark); }
.btn-ghost:hover { border-color: var(--text-main); color: var(--text-main); }

/* Data Table */
.admin-data-table-wrap { overflow-x: auto; }
.admin-data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-data-table thead th { padding: 9px 12px; text-align: left; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); border-bottom: 1.5px solid var(--border-dark); white-space: nowrap; user-select: none; background: var(--bg-card); }
.admin-data-table thead th.sortable { cursor: pointer; }
.admin-data-table thead th.sortable:hover { color: var(--accent-orange); }
.admin-data-table thead th .sort-icon { font-size: 14px; vertical-align: middle; opacity: 0.4; }
.admin-data-table thead th.sort-active .sort-icon { opacity: 1; color: var(--accent-orange); }
.admin-data-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.1s ease; }
.admin-data-table tbody tr:hover { background: rgba(var(--color-strike-panel-rgb),0.03); }
.admin-data-table tbody tr.selected { background: rgba(var(--color-strike-panel-rgb),0.06); }
.admin-data-table tbody td { padding: 7px 12px; color: var(--text-main); vertical-align: middle; }
.admin-data-table .col-check { width: 36px; text-align: center; }
.admin-data-table .col-check input[type="checkbox"] { cursor: pointer; }
.admin-data-table .col-actions { white-space: nowrap; text-align: right; }
.admin-data-table .col-status { width: 70px; }
.admin-data-table .col-date { width: 100px; }

/* Table name cell */
.admin-tbl-name { font-weight: 700; font-size: 13px; }
.admin-tbl-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.admin-tbl-self { font-size: 10px; font-weight: 700; color: var(--accent-orange); margin-left: 6px; }
.admin-micro-badge { display: inline-block; background: rgba(var(--color-strike-panel-rgb),0.1); color: var(--accent-orange); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 800; margin-left: 6px; border: 1px solid var(--accent-orange); vertical-align: middle; }

/* Status indicators */
.admin-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.admin-status-dot.active { background: var(--accent-green); }
.admin-status-dot.suspended { background: var(--accent-orange); }
.admin-status-dot.never { background: var(--border-dark); }
.admin-status-dot.disabled { background: var(--text-muted); }
.admin-status-label { font-size: 10px; color: var(--text-muted); margin-left: 4px; }
.admin-status-label.suspended { color: var(--accent-orange); }
.admin-stale-row td { opacity: 0.6; }

/* Pagination */
.admin-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 0 2px; font-size: 11px; color: var(--text-muted); }
.admin-pagination button { padding: 3px 10px; font-size: 11px; font-weight: 600; border: 1px solid var(--border-dark); border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s; }
.admin-pagination button:hover:not(:disabled) { border-color: var(--accent-orange); color: var(--accent-orange); }
.admin-pagination button:disabled { opacity: 0.3; cursor: default; }
.admin-page-info { font-weight: 600; }
.admin-status-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.admin-status-badge.active { background: rgba(var(--color-keeper-rgb),0.1); color: var(--accent-green); }
.admin-status-badge.completed { background: rgba(var(--palette-neutral-rgb),0.05); color: var(--text-muted); }
.admin-status-badge.archived { background: rgba(var(--color-strike-panel-rgb),0.08); color: var(--accent-orange); }

/* Case table column widths */
.admin-data-table .col-jurors { width: 60px; text-align: center; }
.admin-data-table .col-collaborators { width: 100px; }
.admin-data-table .col-modified { width: 100px; }

/* Collaborator chips */
.admin-collab-wrap { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; }
.admin-collab-chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 9px; font-weight: 800; background: rgba(var(--color-strike-panel-rgb),0.08); color: var(--accent-orange); border: 1px solid rgba(var(--color-strike-panel-rgb),0.15); cursor: default; }
.admin-collab-overflow { font-size: 9px; font-weight: 700; color: var(--text-muted); margin-left: 1px; white-space: nowrap; }

/* Expandable detail row */
.admin-detail-row td { padding: 0 !important; border-bottom: 1.5px solid var(--border-dark); }
.admin-detail-row:hover { background: transparent !important; }
.admin-detail-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; padding: 14px 16px 16px 48px; background: rgba(var(--color-strike-panel-rgb),0.02); border-top: 1px solid var(--border-light); }
.admin-detail-item { display: flex; flex-direction: column; gap: 2px; }
.admin-detail-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.admin-detail-value { font-size: 12px; color: var(--text-main); }
.admin-detail-collab-list { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-detail-collab-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; background: rgba(var(--color-strike-panel-rgb),0.06); color: var(--text-main); }
.admin-case-row { cursor: pointer; }
.admin-case-row .col-check { cursor: default; }
.admin-case-row .col-actions { cursor: default; }
.admin-juror-count { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.admin-juror-count.zero { color: var(--text-muted); font-weight: 400; }

/* Admin slider grid (appearance tab) */
.admin-slider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 4px; }
.admin-slider-col { display: flex; flex-direction: column; }

/* Admin appearance left column */
.admin-appearance-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.admin-appearance-left .admin-appearance-settings { overflow: visible; }
.admin-appearance-settings { display: flex; flex-direction: column; gap: 0; }
.admin-appearance-settings .admin-section-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

/* Tile Preset Builder card */
.admin-tile-preset-builder {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.admin-tile-preset-builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.admin-tile-preset-builder-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-tile-preset-builder-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-accent);
}
.admin-tile-preset-builder-title h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.admin-preset-save-btn {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Preset selector row */
.admin-preset-selector-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 10px 0 8px;
}
.admin-preset-selector-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
    position: relative;
}
.admin-preset-selector-card:hover {
    background: rgba(var(--palette-amber-rgb), 0.04);
    border-color: rgba(var(--palette-amber-rgb), 0.3);
}
.admin-preset-selector-card.active {
    background: rgba(var(--palette-amber-rgb), 0.08);
    border-color: var(--color-accent);
    color: var(--text-primary);
}
.admin-preset-selector-card .material-symbols-outlined { font-size: 20px; }
.admin-preset-selector-name { font-weight: 500; }
.admin-preset-default-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-accent);
    color: var(--color-accent-text, #000);
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.admin-preset-modified-dot {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
}
.admin-preset-default-row {
    margin-bottom: 4px;
}
.admin-preset-default-row label {
    font-size: 11px;
    color: var(--text-muted);
}

/* Preset editing context banner */
.admin-preset-editing-context {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-bottom: 10px;
    background: rgba(var(--palette-amber-rgb), 0.06);
    border: 1px solid rgba(var(--palette-amber-rgb), 0.15);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.admin-preset-editing-context .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-accent);
}
.admin-preset-editing-context strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Admin tile preview card */
.admin-preview-card { overflow: hidden; border-radius: 8px; }
.admin-preview-card .display-prefs-preview { margin-bottom: 0; border: none; border-radius: 0; }
.admin-appearance-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; max-height: 70vh; overflow-y: auto; overflow-x: hidden; border-radius: 8px; }
.admin-appearance-split .admin-preview-card { position: sticky; top: 0; }

/* Admin preview: legend strip */
.admin-preview-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 10px 14px;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-light);
}
.admin-preview-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}
.admin-preview-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    flex-shrink: 0;
}
.admin-preview-legend-swatch.tile-rating-good {
    background: rgba(var(--color-keeper-rgb), 0.15);
    border-color: rgba(var(--color-keeper-rgb), 0.4);
}
.admin-preview-legend-swatch.tile-rating-bad {
    background: rgba(var(--color-strike-rgb), 0.15);
    border-color: rgba(var(--color-strike-rgb), 0.4);
}
.admin-preview-legend-swatch.status-state {
    background: rgba(var(--palette-primary-rgb), 0.1);
    border-color: rgba(var(--palette-primary-rgb), 0.3);
}
.admin-preview-legend-swatch.status-defense {
    background: rgba(var(--palette-warning-rgb), 0.1);
    border-color: rgba(var(--palette-warning-rgb), 0.3);
}
.admin-preview-legend-sp {
    background: rgba(var(--color-strike-panel-rgb), 0.12);
    border: 1.5px solid rgba(var(--color-strike-panel-rgb), 0.5);
    box-shadow: inset 0 0 4px rgba(var(--color-strike-panel-rgb), 0.15);
}
.admin-preview-legend-flag {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.admin-preview-legend-flag.flag-crim { background: var(--accent-red); }
.admin-preview-legend-flag.flag-le { background: var(--accent-blue); }

/* Admin preview: chart simulation */
.admin-preview-chart {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap, 4px);
    padding: 10px 12px;
    background: var(--bg-pool);
    overflow-x: auto;
}
.admin-preview-chart .courtroom-row { min-width: 0; }
.admin-preview-chart .row-seat-grid { flex: 1; justify-content: center; }
.admin-preview-chart .front-label { margin-top: 4px; padding: 8px 0; font-size: 10px; letter-spacing: 3px; border-top-width: 1px; }
.admin-preview-chart .front-label-icon { font-size: 12px; }

/* Kebab (three-dot) action menu */
.admin-kebab-wrap { position: relative; display: inline-block; }
.admin-kebab-btn { background: transparent; border: none; padding: 4px; border-radius: 6px; cursor: pointer; color: var(--text-muted); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; line-height: 1; }
.admin-kebab-btn:hover { background: var(--bg-pool); color: var(--text-main); }
.admin-kebab-btn .material-symbols-outlined { font-size: 20px; }
.admin-kebab-menu { display: none; position: absolute; right: 0; top: 100%; min-width: 170px; background: var(--bg-card); border: 1px solid var(--border-dark); border-radius: 6px; box-shadow: 0 8px 24px rgba(var(--palette-neutral-rgb),0.12); z-index: 100; padding: 4px 0; }
.admin-kebab-menu.open { display: block; animation: fadeIn 0.15s ease-out; }
.admin-kebab-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 14px; background: transparent; border: none; font-size: 12px; font-weight: 600; color: var(--text-main); cursor: pointer; transition: background 0.1s; text-align: left; white-space: nowrap; }
.admin-kebab-item:hover { background: var(--bg-pool); }
.admin-kebab-item .material-symbols-outlined { font-size: 16px; color: var(--text-muted); }
.admin-kebab-item.edit:hover .material-symbols-outlined { color: var(--accent-blue); }
.admin-kebab-item.admin-toggle:hover .material-symbols-outlined { color: var(--accent-orange); }
.admin-kebab-item.reset:hover .material-symbols-outlined { color: var(--accent-green); }
.admin-kebab-item.restore:hover .material-symbols-outlined { color: var(--accent-green); }
.admin-kebab-item.go-live:hover .material-symbols-outlined { color: var(--accent-blue); }
.admin-kebab-item.play:hover .material-symbols-outlined { color: var(--accent-blue); }
.admin-kebab-item.complete:hover .material-symbols-outlined { color: var(--accent-green); }
.admin-kebab-item.remove { color: var(--accent-red); }
.admin-kebab-item.remove .material-symbols-outlined { color: var(--accent-red); }
.admin-kebab-item.remove:hover { background: rgba(var(--color-strike-rgb),0.06); }
.admin-kebab-divider { height: 1px; background: var(--border-light); margin: 4px 0; }

/* User Edit Modal */
.admin-edit-modal { max-width: 460px; padding: 0; }
.admin-edit-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border-dark); }
.admin-edit-header h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.modal-close-x { background: transparent; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: 6px; }
.modal-close-x:hover { background: var(--bg-pool); color: var(--text-main); }
.admin-edit-form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.admin-edit-row { display: flex; flex-direction: column; gap: 4px; }
.admin-edit-row label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.admin-input { padding: 8px 12px; font-size: 13px; border: 1px solid var(--border-dark); border-radius: 8px; background: var(--bg-pool); transition: border-color 0.2s, box-shadow 0.2s; }
.admin-input:focus { outline: none; border-color: var(--accent-orange); box-shadow: 0 0 0 3px rgba(var(--color-strike-panel-rgb),0.1); }
.admin-input:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-edit-hint { font-size: 10px; color: var(--text-muted); font-style: italic; }
.admin-edit-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-light); }

/* System Tab */
.admin-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.admin-stat-card { padding: 14px; border-radius: 6px; border: 1px solid var(--border-light); background: var(--bg-pool); text-align: center; }
.admin-stat-value { font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 700; color: var(--text-main); }
.admin-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-top: 2px; }
.admin-stat-card.orange .admin-stat-value { color: var(--accent-orange); }
.admin-stat-card.green .admin-stat-value { color: var(--accent-green); }
.admin-stat-card.blue .admin-stat-value { color: var(--accent-blue); }

/* Reg code row */
.admin-reg-code-row { display: flex; gap: 8px; align-items: center; }
.admin-reg-code-row .admin-input { flex: 1; }

/* Configurable settings */
.admin-settings-divider { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 0 4px; grid-column: 1 / -1; }
.admin-settings-divider .material-symbols-outlined { font-size: 18px; }
.admin-settings-sub-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 4px 0 6px; }
.admin-cvd-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.admin-settings-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.admin-settings-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); font-weight: 500; min-width: 140px; flex: 1; }
.admin-input-sm { width: 100%; max-width: 200px; padding: 6px 10px; font-size: 13px; border-radius: 6px; border: 1px solid var(--border-dark); background: var(--bg-input); color: var(--text-main); }
.admin-trial-rules { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.admin-trial-type-group { padding: 10px 14px; background: var(--bg-pool); border-radius: 8px; border: 1px solid var(--border-dark); }
.admin-trial-type-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; }

/* Subnav divider */
.admin-subnav-divider { height: 1px; background: var(--border-dark); margin: 6px 10px; }

/* Organization profile */
.admin-org-fields { display: flex; flex-direction: column; gap: 10px; }
.admin-org-row { display: flex; flex-direction: column; gap: 3px; }
.admin-org-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.admin-org-hint { font-weight: 400; opacity: 0.7; }

/* Audit log */
.admin-audit-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-audit-search-wrap { flex: 1; min-width: 180px; }
.admin-audit-log { display: flex; flex-direction: column; gap: 1px; }
.admin-audit-entry { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; font-size: 12px; background: var(--bg-pool); }
.admin-audit-entry:nth-child(even) { background: transparent; }
.admin-audit-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.admin-audit-detail { display: flex; flex-direction: column; gap: 2px; }
.admin-audit-action { font-weight: 600; color: var(--text-main); }
.admin-audit-target { font-size: 11px; color: var(--text-muted); }
.admin-audit-actor { font-size: 11px; color: var(--text-muted); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.admin-audit-actor .material-symbols-outlined { font-size: 14px; }
.admin-audit-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.admin-audit-badge.badge-user { background: rgba(var(--color-action-rgb),0.1); color: var(--accent-blue); }
.admin-audit-badge.badge-case { background: rgba(var(--color-strike-panel-rgb),0.1); color: var(--accent-orange); }
.admin-audit-badge.badge-settings { background: rgba(88,86,214,0.1); color: #5856d6; }
.admin-audit-badge.badge-broadcast { background: rgba(var(--color-green-rgb),0.1); color: var(--accent-green); }
.admin-audit-badge.badge-system { background: rgba(var(--palette-neutral-rgb),0.08); color: var(--text-muted); }
.admin-audit-empty { text-align: center; padding: 30px; color: var(--text-muted); font-size: 13px; }
.admin-audit-empty .material-symbols-outlined { font-size: 36px; display: block; margin-bottom: 8px; opacity: 0.3; }

/* Broadcast history */
.admin-broadcast-history { margin-top: 14px; border-top: 1px solid var(--border-dark); padding-top: 12px; }
.admin-broadcast-history-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.admin-broadcast-history-title button { background: transparent; border: none; font-size: 11px; color: var(--accent-blue); cursor: pointer; font-weight: 600; padding: 0; }
.admin-broadcast-history-title button:hover { text-decoration: underline; }
.admin-broadcast-entry { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.admin-broadcast-entry:last-child { border-bottom: none; }
.admin-broadcast-icon { font-size: 16px; color: var(--text-muted); flex-shrink: 0; margin-top: 1px; }
.admin-broadcast-info { flex: 1; min-width: 0; }
.admin-broadcast-subj { font-size: 12px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-broadcast-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Settings search */
.admin-subnav-search-wrap { position: relative; margin-bottom: 8px; }
.admin-subnav-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-muted); pointer-events: none; }
.admin-subnav-search { width: 100%; padding: 7px 10px 7px 32px; font-size: 12px; border: 1px solid var(--border-dark); border-radius: 8px; background: var(--bg-input); color: var(--text-main); outline: none; box-sizing: border-box; }
.admin-subnav-search:focus { border-color: var(--accent-blue); }
.admin-subnav-item.search-hidden { display: none; }
.admin-system-section .admin-search-highlight { background: rgba(var(--color-strike-panel-rgb),0.15); border-radius: 2px; padding: 0 2px; }

/* Panel editor field toggles */
.admin-field-toggle-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.admin-field-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-main); cursor: pointer; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border-dark); background: var(--bg-pool); }
.admin-field-toggle:hover { border-color: var(--accent-blue); }
.admin-field-toggle input[type="checkbox"] { accent-color: var(--accent-orange); }
.admin-field-toggle.required { opacity: 0.5; pointer-events: none; }

/* Custom field templates */
.admin-template-toolbar { margin-bottom: 12px; }
.admin-template-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.admin-template-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-dark); background: var(--bg-pool); cursor: pointer; }
.admin-template-item:hover { border-color: var(--accent-blue); }
.admin-template-item.active { border-color: var(--accent-orange); background: rgba(var(--color-strike-panel-rgb),0.05); }
.admin-template-item-name { font-size: 13px; font-weight: 600; flex: 1; }
.admin-template-item-count { font-size: 11px; color: var(--text-muted); }
.admin-template-editor { padding: 14px; border-radius: 8px; border: 1px solid var(--accent-orange); background: rgba(var(--color-strike-panel-rgb),0.03); }
.admin-template-editor-header { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.admin-template-editor-header .admin-input { flex: 1; }
.admin-template-fields { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.admin-template-field-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: var(--bg-pool); font-size: 12px; }
.admin-template-field-row .field-label { flex: 1; font-weight: 500; }
.admin-template-field-row .field-type { font-size: 11px; color: var(--text-muted); }
.admin-template-field-row .field-remove { background: transparent; border: none; cursor: pointer; color: var(--accent-red); padding: 0; font-size: 16px; line-height: 1; }
.admin-template-add-row { display: flex; gap: 6px; align-items: center; }
.admin-template-add-row .admin-input { flex: 1; }

/* Export defaults */
.admin-export-defaults { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.admin-export-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-main); cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.admin-export-toggle input[type="checkbox"] { accent-color: var(--accent-orange); }

/* Notification toggles */
.admin-notification-toggles { display: flex; flex-direction: column; gap: 2px; }
.admin-notification-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 12px; }
.admin-notification-toggle:nth-child(odd) { background: var(--bg-pool); }
.admin-notification-toggle input[type="checkbox"] { accent-color: var(--accent-orange); }
.admin-notification-toggle-label { flex: 1; font-weight: 500; color: var(--text-main); }
.admin-notification-toggle-desc { font-size: 11px; color: var(--text-muted); }
.admin-notification-toggle .material-symbols-outlined { font-size: 18px; color: var(--text-muted); }

/* Welcome template row */
.welcome-template-row { padding: 12px 0 0; }
.welcome-template-row select { width: 100%; margin-top: 4px; }

/* Preset sidebar actions */
.admin-sidebar-actions { display: flex; gap: 4px; }

/* Table empty state */
.admin-table-empty { text-align: center; padding: 30px 20px; color: var(--text-muted); }
.admin-table-empty .material-symbols-outlined { font-size: 36px; display: block; margin-bottom: 8px; opacity: 0.4; }

.header-help-btn { background: transparent; border: none; padding: 0; color: var(--text-muted); opacity: 0.7; cursor: pointer; }
.busted-warning-bar { border-radius: 0; margin-bottom: 0; border-left: none; border-right: none; border-top: none; min-height: 48px; }
.strike-popup-close { margin-left: auto; cursor: pointer; font-size: 16px; opacity: 0.5; }
.toolbar-chip-divider { width: 1px; height: 14px; background: rgba(var(--color-strike-panel-rgb), 0.35); margin: 0 4px; flex-shrink: 0; }
.strike-popup-section-divider { height: 1px; background: rgba(var(--color-strike-panel-rgb), 0.2); margin: 14px 0; }
.btn-toolbar-drawer { position: relative; }
.toolbar-chat-badge { position: absolute; top: 2px; right: 2px; font-size: 9px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px; }
.btn-toolbar.danger { color: var(--accent-red); }
.zoom-icon { color: var(--text-muted); }
.scale-display { font-size: 12px; font-weight: 700; width: 35px; text-align: center; }

.chat-header-info { display: flex; flex-direction: column; gap: 4px; }
.drawer-title { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.drawer-help-icon { font-size: 16px; cursor: pointer; color: var(--accent-blue); opacity: 0.7; }
.chat-status { font-size: 10px; font-weight: 700; display: flex; align-items: center; gap: 5px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px; }
.status-dot.connecting { background: var(--text-muted); width: 8px; height: 8px; }
.drawer-header-actions { display: flex; gap: 8px; }
.chat-send-btn { border-radius: 12px; padding: 10px; }
.strat-help-btn { margin-left: auto; border: none; background: transparent; padding-right: 15px; cursor: pointer; }
.strat-help-btn .material-symbols-outlined { color: var(--accent-blue); opacity: 0.8; }
.btn-toolbar.compact { height: 28px; width: 28px; padding: 0; display: flex; align-items: center; justify-content: center; }
.clear-all-btn { background: transparent; color: var(--accent-red); border: 1px solid var(--accent-red); font-size: 10px; font-weight: 800; padding: 0 10px; height: 26px; width: auto; min-width: fit-content; text-transform: uppercase; letter-spacing: 0.5px; line-height: 24px; cursor: pointer; }

.modal-content.welcome { max-width: 850px; padding: 0; overflow: hidden; border: none; box-shadow: 0 25px 50px -12px rgba(var(--palette-neutral-rgb), 0.5); }
.welcome-title-bar { background: var(--header-gradient); padding: 16px 24px; color: white; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(var(--color-action-rgb), 0.15); }
.welcome-logo { height: 32px; width: auto; }
.welcome-divider { width: 1px; height: 28px; background: rgba(var(--palette-surface-rgb), 0.15); }
.welcome-subtitle { margin: 0; font-size: 10px; color: rgba(var(--palette-surface-rgb), 0.5); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
.welcome-title { margin: 2px 0 0 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.welcome-close-btn { margin-left: auto; cursor: pointer; color: rgba(var(--palette-surface-rgb),0.5); font-size: 20px; transition: color 0.15s; }
.welcome-close-btn:hover { color: white; }
.welcome-body { padding: 30px; }
.welcome-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.drop-zone-content { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.drop-zone-icon { font-size: 40px; color: #0A1E3D; opacity: 0.8; }
.drop-zone-title { font-weight: 800; font-size: 14px; margin: 0; }
.drop-zone-desc { font-size: 12px; color: var(--text-muted); margin: 0; }
.drop-zone-hint { font-size: 10px; font-weight: 700; color: #D97706; opacity: 0.8; margin-top: 5px; }
.drop-zone-filename { font-size: 11px; font-weight: 800; color: #0A1E3D; margin-top: 10px; word-break: break-all; }
.welcome-loading { text-align: center; margin-bottom: 20px; }
.welcome-btn-row { display: flex; gap: 12px; margin-top: 10px; }
.welcome-init-btn { flex: 2; padding: 16px; font-size: 16px; font-weight: 800; background: #D97706; color: white; border: none; box-shadow: 0 4px 15px rgba(217,119,6,0.25); }
.welcome-init-btn:hover { background: #b45309; }
[data-theme="dark"] .drop-zone-icon { color: #D97706; }
[data-theme="dark"] .drop-zone-filename { color: #D97706; }
.welcome-init-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.welcome-init-btn:not(:disabled) { opacity: 1; cursor: pointer; }
.welcome-cancel-btn { flex: 1; background: transparent; color: var(--text-muted); border: 1px solid var(--border-dark); box-shadow: none; font-weight: 700; }

/* ── Setup Modal ── */
.modal.setup { padding: 15px 20px; overflow: hidden; flex-direction: column; }
.modal-content.setup { max-width: 900px; height: calc(100vh - 30px); padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-dark); background: var(--bg-card); margin: 0 auto; }
.setup-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--header-gradient); padding: 14px 20px;
    border-bottom: 1px solid rgba(var(--palette-surface-rgb), 0.1);
}
.setup-modal-title { color: white; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
.setup-modal-title .material-symbols-outlined { font-size: 20px; }
.setup-modal-header-actions { display: flex; gap: 6px; align-items: center; }
.setup-modal-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-card); }

/* ── Unified Modal Tabs (Setup + Pool + Stats) ── */
.unified-modal-tabs-header {
    display: flex; align-items: stretch; background: var(--header-gradient); padding: 0;
    border-bottom: 1px solid var(--border-light); flex-shrink: 0;
}
.unified-modal-tab {
    flex: 1; padding: 14px 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    gap: 6px; font-weight: 600; font-size: 12px; color: rgba(var(--palette-surface-rgb), 0.5);
    border-bottom: 2.5px solid transparent; border-right: 1px solid rgba(var(--palette-surface-rgb), 0.1); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease; white-space: nowrap; min-height: 48px;
}
.unified-modal-tab:last-of-type { border-right: none; }
.unified-modal-tab:hover { color: rgba(var(--palette-surface-rgb), 0.8); background: rgba(var(--palette-surface-rgb), 0.03); }
.unified-modal-tab.active { color: white; border-bottom-color: #D97706; background: rgba(var(--palette-surface-rgb), 0.05); }
.unified-modal-tab .material-symbols-outlined { opacity: 0.7; font-size: 18px; }
.unified-modal-tab.active .material-symbols-outlined { opacity: 1; color: white; }
.unified-modal-header-actions { display: flex; gap: 6px; align-items: center; padding-right: 8px; flex-shrink: 0; }
.unified-modal-content { display: none; flex-direction: column; flex: 1; overflow-y: auto; padding: 16px 20px; min-height: 0; background: var(--bg-card); }
.unified-modal-content.active { display: flex; animation: fadeIn 0.35s ease-out; }
#unifiedContentSetup.active { flex-direction: row; overflow: hidden; padding: 0; }
#unifiedContentSetup .setup-only { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px; background: var(--bg-card); border-left: 1px solid var(--border-light); }

/* ── Settings Modal ── */
.modal.settings { padding: 15px 20px; align-items: center; }
.modal-content.settings { width: 700px; max-width: 100%; height: 88vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-dark); }
.settings-tabs-header { display: flex; align-items: stretch; background: var(--header-gradient); padding: 0; border-bottom: 1px solid rgba(var(--palette-surface-rgb), 0.1); }
.settings-body { flex: 1; overflow-y: auto; padding: 16px 20px; background: var(--bg-card); }

/* Shared close button for setup/settings headers */
.mgmt-close-btn { color: rgba(var(--palette-surface-rgb), 0.5); cursor: pointer; font-size: 20px; transition: color 0.15s; display: flex; align-items: center; justify-content: center; padding: 0 14px; flex-shrink: 0; }
.mgmt-close-btn:hover { color: white; }

.setup-card { margin-bottom: 6px; padding: 0; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border-dark); overflow: hidden; }
.section-help-icon { font-size: 14px; margin-left: 6px; cursor: pointer; color: var(--accent-blue); }
.section-hint { font-weight: 400; font-size: 10px; text-transform: none; letter-spacing: 0; opacity: 0.55; margin-left: auto; }

/* ── Setup Tab (matches Display Prefs pattern) ── */
.setup-tab { margin: 0 auto; }
.setup-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-dark);
}
.setup-tab-header-text { min-width: 0; }
.setup-tab-title {
    margin: 0 0 2px 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}
.setup-tab-title .material-symbols-outlined { font-size: 18px; }
.setup-tab-sub {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}
.setup-section { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-dark); }
.setup-section:last-child { border-bottom: none; padding-bottom: 0; }
.setup-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 6px;
}
.setup-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 6px;
}
.setup-section-title-row .setup-section-title { margin: 0; }
.setup-section-actions { display: flex; gap: 6px; }

/* Trial Details — collapsible bar */
.trial-details-collapse-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.trial-details-collapse-bar:hover { background: rgba(var(--palette-neutral-rgb), 0.05); }
.trial-details-collapse-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.trial-details-chevron {
    font-size: 18px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.trial-details-collapse-bar[aria-expanded="false"] .trial-details-chevron {
    transform: rotate(-90deg);
}
.trial-details-inline-summary {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 6px;
}
.trial-details-collapse-bar[aria-expanded="true"] .trial-details-inline-summary { display: none; }
.trial-details-body {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    max-height: 200px;
    opacity: 1;
    padding-top: 4px;
}
.trial-details-body.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
}

/* Lock-In flow — awaiting state */
.trial-details-awaiting {
    background: rgba(var(--palette-amber-rgb, 245, 158, 11), 0.06);
    border: 1px solid rgba(var(--palette-amber-rgb, 245, 158, 11), 0.2);
    border-radius: 8px;
}
.trial-details-pending {
    opacity: 0.4;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}
.trial-details-prompt {
    font-size: 11px;
    font-weight: 600;
    color: rgba(var(--palette-amber-rgb, 245, 158, 11), 0.85);
    margin: 0 0 6px 2px;
    transition: opacity 0.2s ease;
}
.trial-details-prompt.hidden { display: none; }
.trial-details-actions {
    display: flex;
    justify-content: flex-end;
    padding: 6px 0 2px;
}
.trial-details-lockin-btn {
    background: rgba(var(--palette-amber-rgb, 245, 158, 11), 1);
    color: var(--palette-navy, #0a1e3d);
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.trial-details-lockin-btn:hover { background: rgba(var(--palette-amber-rgb, 245, 158, 11), 0.85); transform: scale(1.02); }
.trial-details-lockin-btn:active { transform: scale(0.97); }
.trial-details-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border-dark);
    border-radius: 5px;
    padding: 3px 10px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.trial-details-edit-btn .material-symbols-outlined { font-size: 14px; }
.trial-details-edit-btn:hover { color: rgba(var(--palette-amber-rgb, 245, 158, 11), 1); border-color: rgba(var(--palette-amber-rgb, 245, 158, 11), 0.5); }

/* Hide chevron when locked — edit button takes over */
.trial-details-collapse-bar.locked .trial-details-chevron { display: none; }
.trial-details-collapse-bar.locked { cursor: default; }
.trial-details-collapse-bar.locked:hover { background: none; }

.trial-details-grid { padding: 8px 12px; background: var(--bg-pool); border: 1px solid var(--border-dark); border-radius: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 10px; }
.form-label-sm { font-size: 9px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-bottom: 1px; display: block; }
.form-input-sm { width: 100%; padding: 4px 8px; font-size: 12px; font-weight: 700; }

.config-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--bg-pool); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-dark); margin-bottom: 4px; }
.config-label { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.config-select { padding: 4px 8px; font-size: 12px; }
.config-input-narrow { width: 40px; padding: 4px 6px; font-size: 12px; }

/* Mini-map footer — status + actions */
.mini-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-pool);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    margin-top: 4px;
}
.mini-map-status {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.mini-map-status .mm-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mini-map-status .mm-status-dot.green { background: var(--accent-green); }
.mini-map-footer-actions { display: flex; gap: 6px; }
.layout-menu-wrapper { position: relative; }
.layout-menu-dropdown {
    position: absolute; bottom: calc(100% + 6px); right: 0; min-width: 220px;
    background: var(--bg-card); border: 1px solid var(--border-dark); border-radius: 6px;
    box-shadow: var(--shadow-lg); padding: 4px 0; z-index: 50;
}
.layout-menu-item {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px;
    font-size: 12px; font-weight: 600; color: var(--text-main); background: transparent;
    border: none; cursor: pointer; transition: background 0.12s; white-space: nowrap;
}
.layout-menu-item:hover { background: rgba(var(--color-action-rgb), 0.06); color: var(--accent-blue); }
.layout-menu-item .material-symbols-outlined { font-size: 16px; opacity: 0.6; }
.layout-menu-item:hover .material-symbols-outlined { opacity: 1; color: var(--accent-blue); }
.btn-icon-compact { padding: 0 6px; height: 28px; min-width:auto; min-height:auto; }
.toolbar-vdivider { width: 1px; height: 20px; background: var(--border-dark); }
.toolbar-vdivider-lg { width: 1px; height: 24px; background: var(--border-dark); margin: 0 5px; }
.pool-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; justify-content: flex-start; }
.btn-toolbar.blue { color: var(--accent-blue); }
.btn-toolbar.primary { background: var(--accent-blue); color: white; border: none; }
.pool-result-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.pool-zoom-controls { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.pool-scale-display { font-size: 11px; font-weight: 700; width: 35px; text-align: center; color: var(--text-muted); }

.modal-content.export { max-width: 500px; }
.export-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
.export-desc { margin: 0 0 20px 0; font-size: 13px; color: var(--text-muted); }
.export-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; }
.export-footer { display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--border-dark); padding-top: 20px; }

.modal-content.lg { max-width: 850px; height: 90vh; display: flex; flex-direction: column; }
.modal-content.md { max-width: 600px; }
.modal-content.sm { max-width: 500px; }
/* ── Help Guide Modal ── */
#helpGuideModal { z-index: 10010; }
.modal-content.help-guide { max-width: 850px; height: 90vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-dark); background: var(--bg-pool); }
.help-guide-tabs-header { display: flex; align-items: stretch; background: linear-gradient(135deg, #78350f 0%, #92400e 50%, #713f12 100%); padding: 0; border-bottom: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; position: relative; }
.help-guide-tabs-header .mgmt-close-btn { color: rgba(255,255,255,0.6); }
.help-guide-tabs-header .mgmt-close-btn:hover { color: white; }
.help-guide-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 14px 6px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(255,255,255,0.5); border-bottom: 2.5px solid transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; white-space: nowrap; }
.help-guide-tab:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); }
.help-guide-tab.active { color: white; border-bottom-color: #1e3a5f; background: rgba(255,255,255,0.08); }
.help-guide-tab .material-symbols-outlined { font-size: 16px; opacity: 0.7; }
.help-guide-tab.active .material-symbols-outlined { opacity: 1; }
.help-guide-body { flex: 1; overflow-y: auto; background: var(--bg-main); min-height: 0; }
.help-guide-content { display: none; padding: 25px 30px; line-height: 1.6; }
.help-guide-content.active { display: block; animation: fadeIn 0.35s ease-out; }
@media (max-width: 768px) {
    .help-guide-tab { font-size: 10px; gap: 3px; padding: 12px 4px; letter-spacing: 0.2px; }
    .help-guide-tab .material-symbols-outlined { font-size: 14px; }
    .help-guide-content { padding: 20px 16px; }
}

.help-section h3.blue { color: var(--accent-blue); font-size: 16px; margin-top: 0; }
.help-section h3.green { color: var(--accent-green); font-size: 16px; }
.help-section h3.orange { color: var(--accent-orange); font-size: 16px; }
.help-section h3.red { color: var(--accent-red); font-size: 16px; }
.help-section h3.muted { color: var(--text-muted); font-size: 16px; }
.help-toolbar-section { background: var(--bg-card); padding: 30px; border-bottom: 1px solid var(--border-light); }
.help-toolbar-title { margin-top:0; color: var(--accent-blue); font-size: 16px; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.help-command-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.help-command-list { display: flex; flex-direction: column; gap: 12px; }
.help-command-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; background: var(--bg-pool); }
.help-command-icon { color: var(--text-muted); }
.help-command-icon.blue { color: var(--accent-blue); }
.help-command-icon.red { color: var(--accent-red); }
.help-command-icon.orange { color: var(--accent-orange); }
.help-command-name { font-size: 13px; display: block; }
.help-command-desc { font-size: 11px; color: var(--text-muted); }
.help-workflow { padding: 30px; display: flex; flex-direction: column; gap: 30px; }
.help-phase-title { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-top: 0; }
.help-phase-title.blue { color: var(--accent-blue); }
.help-phase-title.green { color: var(--accent-green); }
.help-phase-title.orange { color: var(--accent-orange); }
.help-phase-icon { font-size: 24px; }
.rating-keep { color: var(--color-keeper-text); font-weight:800; }
.rating-strike { color: var(--color-strike-text); font-weight:800; }


/* === COURTROOM EXTRACTED STYLES === */

.seat-ref-strip { display: flex; align-items: flex-start; padding: 0 12px; min-width: max-content; }
.seat-ref-label { font-size: 9px; font-weight: 500; opacity: 0.4; letter-spacing: 0.3px; padding-top: 4px; }
.seat-ref-strip-top { align-items: flex-end; }
.seat-ref-grid { gap: var(--tile-gap); }
.seat-ref-num { text-align: center; font-size: 10px; font-weight: 500; color: var(--text-muted); opacity: 0.45; padding-top: 4px; padding-bottom: 2px; user-select: none; position: relative; }
.seat-ref-strip-top .seat-ref-num { padding-top: 0; padding-bottom: 4px; font-size: 9px; opacity: 0.35; }
.seat-ref-tick::after, .seat-ref-mid::after { content: ''; position: absolute; right: calc(var(--tile-gap, 6px) / -2); top: 1px; bottom: 0; width: 1px; background: var(--text-muted); opacity: 0.25; }
.seat-ref-mid::after { width: 1.5px; opacity: 0.65; }
.seat-ref-mid-center::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 1px; bottom: 0; width: 1.5px; background: var(--text-muted); opacity: 0.65; }
.seat-ref-strip-top .seat-ref-tick::after, .seat-ref-strip-top .seat-ref-mid::after, .seat-ref-strip-top .seat-ref-mid-center::after { top: 0; bottom: 1px; }

.front-label { text-align: center; width: 100%; color: var(--theme-prosecution); font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: 4px; padding: 15px 0; border-top: 2px solid var(--border-light); margin-top: 4px; }
.warning-icon { font-size: 18px; vertical-align: middle; }


.pool-empty-state { grid-column: 1 / -1; width: 100%; height: 100%; min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; background: rgba(var(--palette-neutral-rgb),0.01); }
.pool-empty-card { max-width: 500px; padding: 40px; background: var(--bg-card); border: 2px dashed var(--accent-blue); border-radius: 8px; box-shadow: var(--shadow-sm); }
.pool-empty-icon { font-size: 56px; color: var(--accent-blue); margin-bottom: 20px; opacity: 0.6; }
.pool-empty-title { margin: 0 0 12px 0; font-weight: 800; color: var(--text-main); font-size: 18px; text-transform: uppercase; letter-spacing: 1px; }
.pool-empty-text { font-size: 14px; color: var(--text-muted); margin: 0 auto 30px auto; line-height: 1.7; font-weight: 500; }
.pool-empty-action-btn { background: var(--accent-blue); color: white; border: none; padding: 12px 25px; border-radius: 6px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 10px rgba(var(--color-action-rgb), 0.2); }

.pool-clear-state { grid-column: 1 / -1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; background: transparent; margin-top: 30px; border-top: 1px solid var(--border-dark); }
.pool-clear-state.is-empty { padding: 60px 40px; background: rgba(var(--palette-neutral-rgb),0.01); margin-top: 0; border-top: none; }
.pool-clear-card { max-width: 500px; padding: 30px; background: var(--bg-card); border: 2px dashed var(--border-dark); border-radius: 8px; box-shadow: var(--shadow-sm); }
.pool-clear-btn { background: var(--accent-red); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; }

.pool-no-results { grid-column: 1 / -1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 40px; }
.pool-no-results-icon { font-size: 42px; color: var(--text-muted); opacity: 0.4; }

.pool-notice-wrapper { width: 100%; grid-column: 1 / -1; }


/* === JUROR PROFILE MODAL (tile-style) === */

.modal-content.juror-profile {
    max-width: 680px;
    max-height: calc(100vh - 80px);
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--border-dark);
    display: flex;
    flex-direction: column;
}
.modal-content.juror-profile.modal-enter {
    animation: modalFlyIn 280ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.modal-content.juror-profile.modal-exit {
    animation: modalFlyOut 200ms cubic-bezier(0.4, 0, 0.7, 0.2) both;
}
@keyframes modalFlyIn {
    0%  { opacity: 0; transform: translate(var(--origin-dx, 0), var(--origin-dy, 0)) scale(0.55); }
    40% { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes modalFlyOut {
    from { opacity: 1; transform: translate(0, 0) scale(1); }
    to   { opacity: 0; transform: translate(var(--origin-dx, 0), var(--origin-dy, 0)) scale(0.55); }
}

/* --- Header (matches tile-top) --- */
.jp-tile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: rgba(var(--color-action-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--color-action-rgb), 0.15);
    padding: 18px 20px 14px;
}
.jp-header-left { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.jp-name-row { display: flex; gap: 10px; }
.jp-name-input {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid transparent;
    padding: 2px 0;
    outline: none;
    transition: border-color 0.2s ease;
    flex: 1;
    min-width: 0;
    font-family: inherit;
}
.jp-name-input:hover { border-bottom-color: var(--border-dark); }
.jp-name-input:focus { border-bottom-color: var(--accent-blue); }
.jp-name-input::placeholder { color: var(--text-muted); font-weight: 500; }
.jp-numbers { display: flex; gap: 12px; align-items: center; }
.jp-scramble { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--accent-blue); }
.jp-pool { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.jp-close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}
.jp-close-btn:hover { background: rgba(var(--color-strike-rgb), 0.08); color: var(--accent-red); }
.jp-close-btn .material-symbols-outlined { font-size: 22px; }

/* --- Toolbar (icon strip under header) --- */
.jp-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
    flex-wrap: wrap;
}
.jp-toolbar-section { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.jp-toolbar-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); line-height: 1; }
.jp-toolbar-group { display: flex; align-items: center; gap: 4px; }
.jp-toolbar-divider { width: 1px; height: 36px; background: var(--border-dark); margin: 0 4px; }
.jp-tb-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--bg-pool);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    font-family: inherit;
}
.jp-tb-btn .material-symbols-outlined { font-size: 18px; }
.jp-tb-btn:hover { background: var(--bg-card); border-color: var(--border-dark); color: var(--text-main); }
.jp-tb-btn.active-crim { background: var(--accent-red); color: white; border-color: var(--accent-red); }
.jp-tb-btn.active-le { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }
.jp-tb-btn.active-fta { background: var(--fta-border); color: white; border-color: var(--fta-border); }
.jp-tb-btn.active-good { background: var(--accent-green); color: white; border-color: var(--accent-green); }
.jp-tb-btn.active-bad { background: var(--accent-red); color: white; border-color: var(--accent-red); }
.jp-tb-btn.active-followup { background: var(--accent-orange); color: white; border-color: var(--accent-orange); }
.jp-tb-btn.active-cause { background: var(--theme-prosecution); color: white; border-color: var(--theme-prosecution); }
.jp-tb-btn.active-state { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }
.jp-tb-btn.active-defense { background: var(--accent-orange); color: white; border-color: var(--accent-orange); }

/* Batch clear state — strikethrough to indicate "remove" */
.jp-tb-btn.batch-clear {
    background: var(--bg-card);
    color: var(--text-muted);
    border-color: var(--text-muted);
    position: relative;
}
.jp-tb-btn.batch-clear::after {
    content: '';
    position: absolute;
    top: 50%; left: 15%; right: 15%;
    height: 2px;
    background: var(--accent-red);
    border-radius: 1px;
    transform: rotate(-45deg);
}

/* --- Add Juror Modal --- */
.aj-scramble-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-blue);
}
.aj-scramble-input {
    width: 60px;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-blue);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--border-dark);
    padding: 2px 4px;
    outline: none;
    font-family: inherit;
    -moz-appearance: textfield;
}
.aj-scramble-input::-webkit-outer-spin-button,
.aj-scramble-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aj-scramble-input:focus { border-bottom-color: var(--accent-blue); }
.aj-scramble-input::placeholder { color: var(--text-muted); font-weight: 500; }
.aj-error {
    color: var(--accent-red);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    background: rgba(var(--color-strike-rgb), 0.08);
    border-radius: 8px;
    text-align: center;
}
.aj-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}
.aj-submit-btn {
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 6px;
    background: var(--accent-blue);
    color: white;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.aj-submit-btn:hover { filter: brightness(1.1); }

/* --- Body (scrollable sections) --- */
.jp-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Details section */
.jp-section { width: 100%; }
.jp-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.jp-details-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    background: var(--bg-pool);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}
.jp-field { display: flex; flex-direction: column; gap: 3px; }
.jp-field label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
}
.jp-field .flushed-input,
.jp-field .note-input { font-size: 13px; }

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }

/* Legal section */
.jp-legal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    background: var(--bg-pool);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}
.jp-legal-grid .jp-field { gap: 4px; }
.jp-legal-prior { grid-column: 1 / -1; }

/* Unified field style inside juror profile sections */
.jp-section .flushed-input,
.jp-section .note-input {
    background: transparent;
    color: var(--text-main);
    border: none;
    border-bottom: 1.5px solid var(--border-dark);
    border-radius: 0;
    padding: 8px 4px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    width: 100%;
    resize: vertical;
    transition: border-color 0.2s ease;
    -webkit-user-select: text;
    user-select: text;
}
.jp-section .flushed-input:focus,
.jp-section .note-input:focus {
    border-bottom-color: var(--accent-blue);
    outline: none;
    box-shadow: none;
}
.jp-section .note-input-sm { height: 36px; }
.jp-section .note-input-md { height: 64px; }
.jp-section .note-input-lg { height: 100px; }

/* Notes section */
.jp-notes-area {
    background: var(--bg-pool);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}
.notes-toolbar {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
}
.notes-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.notes-toolbar-btn .material-symbols-outlined { font-size: 18px; }
.notes-toolbar-btn:hover {
    background: rgba(var(--palette-neutral-rgb), 0.12);
    color: var(--text-main);
}
.notes-toolbar-sep {
    width: 1px;
    height: 18px;
    background: rgba(var(--palette-neutral-rgb), 0.15);
    margin: auto 3px;
}

.jp-delete-section { display: flex; justify-content: center; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--border-light); }
.jp-delete-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer; border: 1px solid rgba(var(--palette-danger-rgb), 0.3); background: rgba(var(--palette-danger-rgb), 0.06); color: rgba(var(--palette-danger-rgb), 0.85); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }
.jp-delete-btn:hover { background: rgba(var(--palette-danger-rgb), 0.12); color: rgba(var(--palette-danger-rgb), 1); border-color: rgba(var(--palette-danger-rgb), 0.5); }
.jp-delete-btn .material-symbols-outlined { font-size: 16px; }

.note-input-sm { height: 60px; }
.note-input-md { height: 80px; }
.note-input-lg { height: 120px; }


/* === ADMIN EXTRACTED STYLES === */

.archive-icon { font-size: 12px; color: var(--text-muted); }
.admin-item-name.archived { color: var(--text-muted); }
.admin-action-icon { font-size: 14px; }
.admin-loading { text-align: center; padding: 15px; color: var(--text-muted); font-size: 12px; }

.preset-badge-builtin { font-size: 9px; font-weight: 800; color: var(--accent-orange); text-transform: uppercase; letter-spacing: 0.5px; }
.preset-badge-custom { font-size: 9px; font-weight: 800; color: var(--accent-blue); text-transform: uppercase; letter-spacing: 0.5px; }

.preset-editor-info { display: flex; align-items: center; gap: 12px; flex: 1; }
.preset-editor-actions { display: flex; gap: 8px; }
.preset-save-btn { background: var(--accent-green); padding: 6px 16px; font-size: 12px; }
.preset-delete-btn { background: var(--accent-red); padding: 6px 12px; font-size: 12px; }
.preset-editor-icon { font-size: 22px; color: var(--accent-orange); }


/* === MAIN/UPLOAD EXTRACTED STYLES === */

.upload-drop-zone { background: var(--bg-card); padding: 25px; border-radius: 6px; border: 2px dashed var(--border-dark); text-align: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; display: flex; flex-direction: column; justify-content: center; min-height: 200px; }
.upload-drop-zone.dragover { border-color: var(--accent-blue); background: var(--accent-blue-light); }
.upload-drop-zone.file-loaded { border: 2px solid var(--accent-green); background: rgba(var(--color-keeper-rgb), 0.04); }
.upload-drop-zone.file-loaded .drop-zone-icon { color: var(--accent-green); }
.upload-drop-zone.file-loaded .drop-zone-desc,
.upload-drop-zone.file-loaded .drop-zone-hint { display: none; }
.upload-drop-zone.file-loaded .drop-zone-filename { display: block; }
[data-theme="dark"] .upload-drop-zone.file-loaded { background: rgba(var(--color-keeper-rgb), 0.08); }

.login-action-icon { font-size: 16px; margin-right: 8px; vertical-align: middle; }
/* stats-view overflow handled in war-panel .war-content */
.modal.active { display: flex; }

.modal-load-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.modal-load-btn { opacity: 1; cursor: pointer; transition: opacity 0.2s; }
.status-badge { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 800; color: var(--accent-green); background: rgba(var(--color-keeper-rgb),0.1); padding: 4px 10px; border-radius: 10px; border: 1px solid var(--accent-green); }


.app-footer-copyright {
    padding: 4px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    width: 100%;
    margin-top: auto;
    opacity: 0.5;
}
.app-footer-copyright .version-num {
    display: inline;
    font-weight: 700;
    margin-left: 8px;
    color: var(--text-muted);
}
[data-theme="dark"] .app-footer-copyright {
    color: rgba(var(--palette-surface-rgb), 0.4);
}
[data-theme="dark"] .app-footer-copyright .version-num {
    color: rgba(var(--palette-surface-rgb), 0.3);
}


/* === ACCESSIBILITY === */
*:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Remove default outline when using mouse */
*:focus:not(:focus-visible) {
    outline: none;
}

/* High contrast focus for dark backgrounds */
.app-header *:focus-visible,
.lobby-header *:focus-visible,
.settings-tabs-header *:focus-visible,
.setup-modal-header *:focus-visible,
.war-panel-header *:focus-visible,
.welcome-title-bar *:focus-visible,
.help-guide-tabs-header *:focus-visible {
    outline-color: white;
}

@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;
    }
}


/* === MISSED INLINE STYLE EXTRACTIONS === */

/* Admin view padding */
.admin-view-padding { padding-top: 40px; padding-bottom: 40px; }

/* Strategy drawer buttons */
.btn-toolbar-compact { height: 28px; width: 28px; padding: 0; display: flex; align-items: center; justify-content: center; }
.btn-clear-strikes { background: transparent; color: var(--accent-red); border: 1px solid var(--accent-red); font-size: 10px; font-weight: 800; padding: 0 10px; height: 26px; width: auto; min-width: fit-content; text-transform: uppercase; letter-spacing: 0.5px; line-height: 24px; }

/* Additional extracted styles */
.drop-zone-expected-name { color: var(--text-main); }

/* Juror modal name header */

/* Export modal buttons */
.btn-ghost { background: transparent; border: 1px solid var(--border-dark); color: var(--text-muted); }
.btn-primary { background: var(--accent-blue); color: white; border: none; padding: 10px 20px; }

/* Controls card body */
.controls-card-body { padding: 10px 15px; }
.config-select-group { display: flex; gap: 4px; }

/* Close tray button */
.close-tray-btn { cursor: pointer; }

/* Inline icons in help text */
.icon-inline { font-size: 14px; vertical-align: middle; }
.icon-inline-md { font-size: 16px; vertical-align: middle; }

/* Help section heading - text-main variant */
.help-section h3.main { color: var(--text-main); font-size: 16px; }

/* Chat help green heading first */
.help-section h3.green-first { color: var(--accent-green); font-size: 16px; margin-top: 0; }

/* Courtroom.js extracted styles */
.front-label-icon { vertical-align: middle; font-size: 20px; }
.pool-empty-actions { display: flex; justify-content: center; }
.pool-empty-btn-icon { font-size: 20px; }
.pool-empty-hint { margin-top: 15px; font-size: 11px; color: var(--text-muted); font-style: italic; }
.pool-clear-icon { font-size: 42px; color: var(--text-muted); margin-bottom: 15px; opacity: 0.5; }
.pool-clear-title { margin: 0 0 10px 0; font-weight: 800; color: var(--text-main); font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
.pool-clear-text { font-size: 13px; color: var(--text-muted); margin: 0 auto 25px auto; line-height: 1.6; font-weight: 500; }
.pool-clear-actions { display: flex; justify-content: center; }
.pool-clear-btn-icon { font-size: 18px; }
.pool-no-results-text { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }


.welcome-card { background: var(--bg-pool); padding: 25px; border-radius: 8px; border: 1px solid var(--border-dark); text-align: left; }
.welcome-chooser { text-align: center; }
.welcome-chooser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.welcome-chooser-card { background: var(--bg-pool); border: 2px solid var(--border-dark); border-radius: 8px; padding: 32px 20px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.welcome-chooser-card:hover { border-color: rgba(var(--palette-primary-rgb), 0.5); background: rgba(var(--palette-primary-rgb), 0.04); box-shadow: var(--shadow-md); }
.welcome-chooser-icon { font-size: 40px; color: rgba(var(--palette-primary-rgb), 0.7); }
.welcome-chooser-card:hover .welcome-chooser-icon { color: rgba(var(--palette-primary-rgb), 1); }
.welcome-chooser-title { font-size: 16px; font-weight: 700; color: var(--text-main); }
.welcome-chooser-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* ── SmartPanel AI Modal ────────────────────────────────── */
.modal-content.si-modal { max-width: 720px; }
.si-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; background: var(--bg-card); }
.si-step { padding: 0; }
.si-drop-zone { border: 2px dashed var(--border-dark); border-radius: 8px; padding: 40px 20px; text-align: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; position: relative; }
.si-drop-zone:hover, .si-drop-zone.drag-over { border-color: rgba(var(--palette-primary-rgb), 0.5); background: rgba(var(--palette-primary-rgb), 0.04); }
.si-drop-zone.has-files { border-color: rgba(var(--palette-success-rgb), 0.5); background: rgba(var(--palette-success-rgb), 0.04); border-style: solid; }
.si-drop-icon { font-size: 48px; color: rgba(var(--palette-primary-rgb), 0.5); }
.si-drop-title { font-size: 16px; font-weight: 700; color: var(--text-main); margin-top: 8px; }
.si-drop-desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.si-drop-hint { font-size: 11px; color: var(--text-faint); margin-top: 8px; }
.si-file-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; text-align: left; }
.si-file-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-main); padding: 4px 8px; background: var(--bg-pool); border-radius: 4px; }
.si-file-item .material-symbols-outlined { font-size: 16px; color: rgba(var(--palette-success-rgb), 1); }
.si-file-size { color: var(--text-faint); }
.si-btn-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.si-btn-primary { display: flex; align-items: center; gap: 6px; padding: 10px 20px; font-size: 13px; font-weight: 600; border-radius: 6px; }
.si-btn-secondary { padding: 10px 16px; font-size: 13px; }
.si-extracting { text-align: center; padding: 48px 20px; }
.si-extract-status { margin-top: 16px; font-size: 14px; color: var(--text-muted); }
.si-progress { display: flex; align-items: center; gap: 10px; margin-top: 20px; max-width: 320px; margin-left: auto; margin-right: auto; }
.si-progress-track { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-pool); overflow: hidden; }
.si-progress-fill { height: 100%; border-radius: 3px; background: rgba(var(--palette-primary-rgb), 0.8); transition: width 0.6s ease; }
.si-progress-pct { font-size: 11px; font-weight: 600; color: var(--text-faint); min-width: 32px; text-align: right; }
.si-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.si-stat { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; background: rgba(var(--palette-primary-rgb), 0.1); color: rgba(var(--palette-primary-rgb), 1); }
.si-stat-custom { background: rgba(var(--palette-warning-rgb), 0.1); color: rgba(var(--palette-warning-rgb), 1); }
.si-case-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.si-meta-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); margin: 0 6px; vertical-align: middle; }
.si-field-toggles { margin-bottom: 12px; }
.si-field-group { margin-bottom: 8px; }
.si-field-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); margin-bottom: 6px; }
.si-field-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.si-field-chip { display: flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border-dark); background: var(--bg-pool); color: var(--text-muted); transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s; user-select: none; }
.si-field-chip input[type="checkbox"] { display: none; }
.si-field-chip.selected { border-color: rgba(var(--palette-primary-rgb), 0.4); background: rgba(var(--palette-primary-rgb), 0.08); color: var(--text-main); }
.si-field-chip-custom.selected { border-color: rgba(var(--palette-warning-rgb), 0.4); background: rgba(var(--palette-warning-rgb), 0.08); }
.si-field-count { color: var(--text-faint); font-size: 10px; }
.si-preview-table { max-height: 300px; overflow: auto; border: 1px solid var(--border-dark); border-radius: 6px; }
.si-table-wrap { overflow-x: auto; }
.si-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.si-table th { position: sticky; top: 0; background: var(--bg-pool); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.3px; color: var(--text-faint); padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border-dark); white-space: nowrap; }
.si-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-light); color: var(--text-main); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.si-table tr:hover td { background: rgba(var(--palette-primary-rgb), 0.03); }
.si-null { color: var(--text-faint); }
.si-remaining { text-align: center; font-size: 11px; color: var(--text-faint); padding: 8px; }
.si-chooser-card .welcome-chooser-icon { color: rgba(var(--palette-warning-rgb), 0.8); }
.si-chooser-card:hover .welcome-chooser-icon { color: rgba(var(--palette-warning-rgb), 1); }
.export-body { padding: 20px; }


.flex-stretch { display: flex; align-items: stretch; flex: 1; min-width: 0; }


.icon-sm { font-size: 14px; vertical-align: middle; }
.icon-md { font-size: 16px; vertical-align: middle; }
.icon-lg { font-size: 18px; vertical-align: middle; }
.list-padded { padding-left: 20px; }

/* ── Terms of Use Modal ─────────────────────────────────── */
#termsModal {
    position: fixed;
    z-index: 10020;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(var(--palette-neutral-rgb), 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#termsModal.active {
    display: flex;
}
/* ── Profile Edit Modal ─────────────────────────────────── */
/* ── Account Settings Modal (wide, mgmt-style) ─────────────────── */
.modal.acct { padding: 15px 20px; align-items: center; }
.modal-content.acct { max-width: 820px; padding: 0; display: flex; flex-direction: column; height: 85vh; overflow: hidden; border: 1px solid var(--border-dark); border-radius: 6px; background: var(--bg-card); }
.acct-tabs-header {
    display: flex;
    align-items: stretch;
    background: var(--header-gradient);
    padding: 0;
    border-bottom: 1px solid rgba(var(--palette-surface-rgb), 0.1);
    flex-shrink: 0;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}
.settings-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(var(--palette-surface-rgb), 0.5);
    border: none;
    border-bottom: 2.5px solid transparent;
    border-right: 1px solid rgba(var(--palette-surface-rgb), 0.1);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
    background: transparent;
}
.settings-tab:last-of-type { border-right: none; }
.settings-tab .material-symbols-outlined { font-size: 16px; opacity: 0.7; }
.settings-tab:hover { color: rgba(var(--palette-surface-rgb), 0.8); background: rgba(var(--palette-surface-rgb), 0.05); }
.settings-tab.active { color: white; border-bottom-color: #D97706; background: rgba(var(--palette-surface-rgb), 0.1); }
.settings-tab.active .material-symbols-outlined { opacity: 1; color: white; }
.acct-close-btn { color: rgba(var(--palette-surface-rgb), 0.5); cursor: pointer; font-size: 20px; line-height: 1; transition: color 0.15s; display: flex; align-items: center; justify-content: center; align-self: stretch; padding: 0 16px; flex-shrink: 0; border-left: 1px solid rgba(var(--palette-surface-rgb), 0.1); }
.acct-close-btn:hover { color: white; }
.acct-body { flex: 1; overflow-y: auto; padding: 20px 24px; background: var(--bg-card); }
.settings-tab-content { display: none; }
.settings-tab-content.active { display: block; }
.acct-tab-inner { max-width: 720px; margin: 0 auto; }
.acct-tab-narrow { max-width: 480px; }
.acct-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 4px;
}
.acct-section-title .material-symbols-outlined { font-size: 18px; }
.acct-section-desc { font-size: 12px; color: var(--text-muted); margin: 0 0 16px; }
.acct-prefs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-dark);
}
.acct-prefs-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.acct-prefs-col {
    display: flex;
    flex-direction: column;
}
.profile-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.profile-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.profile-field-group .theme-input { width: 100%; }
.settings-security-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.settings-security-fields .theme-input {
    width: 100%;
    box-sizing: border-box;
}
.settings-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}
.settings-pref-row:last-child { border-bottom: none; }
.settings-pref-divider {
    padding: 16px 0 8px;
    border-bottom: 1px solid var(--border-light);
}
.settings-pref-divider-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.settings-pref-row-actions {
    justify-content: flex-end;
    border-bottom: none;
    padding-top: 8px;
}
.settings-pref-info { display: flex; flex-direction: column; gap: 2px; }
.settings-pref-label { font-size: 13px; font-weight: 700; color: var(--text-main); }
.settings-pref-desc { font-size: 11px; color: var(--text-muted); }
.settings-pref-select {
    width: 130px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
}
.settings-pref-slider {
    flex: 1;
    max-width: 160px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-light);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin: 0 10px;
}
.settings-pref-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(var(--color-action-rgb), 1);
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
}
.settings-pref-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(var(--color-action-rgb), 1);
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
}
.settings-pref-slider-val {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--color-action-rgb), 1);
    min-width: 40px;
    text-align: right;
}
.profile-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-edit-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 6px;
}
.profile-edit-fields .theme-input,
.settings-security-fields .theme-input {
    width: 100%;
    box-sizing: border-box;
}
.profile-email-label { margin-top: 10px; }
.profile-edit-fields input:disabled,
.settings-security-fields input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.profile-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    justify-content: flex-end;
}

.terms-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    box-shadow: var(--shadow-xl);
    color: var(--text-main);
    max-width: 620px;
    width: 100%;
    padding: 32px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.terms-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: var(--text-main);
}
.terms-modal-title .material-symbols-outlined { font-size: 26px; color: var(--accent-blue); }
.terms-modal-body {
    flex: 1;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
    padding-right: 8px;
}
.terms-modal-body p { margin: 0 0 12px 0; }
.terms-modal-body ol { margin: 0 0 16px 0; padding-left: 22px; }
.terms-modal-body li { margin-bottom: 10px; }
.terms-modal-body strong { color: var(--text-main); }
.terms-modal-fine-print { font-size: 11px; opacity: 0.7; font-style: italic; margin-top: 8px; }
.terms-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}
.terms-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.btn-outline-danger {
    background: transparent;
    border: 1.5px solid var(--accent-red);
    color: var(--accent-red);
}
.btn-outline-danger:hover { background: var(--accent-red); color: #fff; }

/* ==================== SAVED LAYOUTS ==================== */
.config-layout-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 10px;
    border-left: 1px solid var(--border-dark);
}
.btn-layout-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-dark);
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
    height: 26px;
}
.btn-layout-action:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(var(--color-action-rgb), 0.06);
}
.btn-layout-action .material-symbols-outlined { font-size: 14px; }

.btn-link-compact {
    background: transparent;
    border: none;
    color: var(--accent-blue);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.btn-link-compact:hover { background: rgba(var(--color-action-rgb), 0.1); }
.btn-link-compact .icon-sm { font-size: 14px; }

.btn-secondary {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-dark) !important;
}
.btn-secondary:hover { background: var(--bg-pool) !important; }
.btn-danger-subtle {
    background: transparent !important;
    color: var(--accent-red) !important;
    border: 1px solid var(--accent-red) !important;
}
.btn-danger-subtle:hover { background: var(--accent-red) !important; color: #fff !important; }

/* ── Manage Layouts tab ── */
.layouts-tab { margin: 0 auto; }
.layouts-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-dark);
}
.layouts-tab-title {
    margin: 0 0 2px 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}
.layouts-tab-title .material-symbols-outlined { font-size: 18px; }
.layouts-tab-sub {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}
.layouts-tab-count {
    background: var(--bg-pool);
    border: 1px solid var(--border-dark);
    color: var(--text-main);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.layouts-section { margin-bottom: 12px; }
.layouts-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.layouts-section-title .icon-inline { font-size: 15px; }

.layouts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.layout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.layout-row:hover { border-color: var(--accent-blue); box-shadow: 0 2px 6px rgba(var(--palette-neutral-rgb),0.05); }
.layout-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.layout-row-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0a1e3d 0%, #132d5e 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.layout-row-body { min-width: 0; }
.layout-row-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.layout-row-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 4px;
}
.layout-meta-shared {
    color: var(--accent-blue);
    font-weight: 500;
}
.layout-meta-owner {
    color: var(--accent-orange);
    font-weight: 500;
}
.icon-inline-xs {
    font-size: 13px !important;
    vertical-align: middle;
    margin-top: -1px;
    margin-right: 1px;
}
.layout-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.layout-row-actions .btn-sm {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.layout-row-actions .icon-sm { font-size: 14px; }

.layouts-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-muted);
    background: var(--bg-pool);
    border: 1px dashed var(--border-dark);
    border-radius: 6px;
}
.layouts-empty p { margin: 8px 0 0 0; font-size: 13px; }
.layouts-empty-sub { font-size: 12px !important; opacity: 0.85; }
.layouts-empty-small { padding: 18px 20px; }
.layouts-empty .icon-inline { font-size: 14px; vertical-align: middle; }

/* ── Save Layout modal ── */
.save-layout-error {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(var(--color-strike-rgb), 0.1);
    color: var(--accent-red);
    border-radius: 6px;
    font-size: 12px;
}
.save-layout-overwrite {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(var(--color-strike-panel-rgb), 0.12);
    color: var(--accent-orange, #d77d00);
    border-radius: 6px;
    font-size: 12px;
}

/* ── Display Preferences Tab ── */
.display-prefs-tab {
    max-width: 900px;
    margin: 0 auto;
}
.display-prefs-sticky {
    position: sticky;
    top: -25px;
    z-index: 5;
    background: var(--bg-pool);
    margin: -25px -25px 0;
    padding: 25px 25px 0;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 12px;
}
.display-prefs-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-dark);
}
.display-prefs-tab-header-text {
    min-width: 0;
}

/* Preview area */
.display-prefs-preview {
    display: flex;
    gap: var(--tile-gap);
    align-items: flex-start;
    padding: 16px 20px;
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 16px;
    justify-content: center;
    min-height: 80px;
}
.display-prefs-preview {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
}
.display-prefs-preview .juror-tile {
    pointer-events: none;
    cursor: default;
    flex-shrink: 0;
}
.display-prefs-preview .juror-tile:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--border-light);
}
.display-prefs-preview-row-bar {
    transition: height 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.display-prefs-preview-row-bar span {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    opacity: 0.5;
}
.display-prefs-preview-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: var(--row-bg-even);
    border-top: 1px solid var(--row-border-even);
    border-bottom: 1px solid var(--row-border-even);
}
.display-prefs-preview-tiles {
    display: flex;
    gap: var(--tile-gap);
    justify-content: center;
    flex: 1;
}
.display-prefs-preview-tile-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.display-prefs-preview-footer {
    height: 10px;
    background: var(--bg-main);
}
.display-prefs-preview-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-align: center;
    margin-top: 5px;
}

/* Admin preview: scoped class overrides */
.display-prefs-preview.hide-tile-notes .tile-notes { display: none !important; }

/* Icon showcase panel */
.admin-icon-showcase {
    padding: 12px 16px 14px;
    background: var(--bg-main);
    border-top: 1px solid var(--border-light);
}
.admin-icon-showcase-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.admin-icon-showcase-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px 4px;
}
.admin-icon-showcase-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.admin-icon-showcase-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--text-primary);
}
.admin-icon-showcase-item .sp-icon { font-size: 20px; }
.admin-icon-showcase-item .sp-icon svg { width: 20px; height: 20px; }
.admin-icon-showcase-item.icon-color-navy .sp-icon svg [fill="#F59E0B"] { fill: currentColor; }
.admin-icon-showcase-item.icon-color-navy .sp-icon svg [stroke="#F59E0B"] { stroke: currentColor; }
.admin-icon-showcase-item.icon-color-amber .sp-icon { color: #F59E0B; }
.admin-icon-showcase-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: center;
}

/* Sub-tab bar */
/* Segmented control tab bar */
.dp-subtab-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 3px;
    background: rgba(var(--palette-neutral-rgb), 0.07);
    border-radius: 8px;
    margin-top: 12px;
    margin-bottom: 0;
    position: relative;
}
.dp-subtab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
.dp-subtab .material-symbols-outlined {
    font-size: 15px;
}
.dp-subtab:hover:not(.active) {
    color: var(--text-main);
}
.dp-subtab.active {
    background: var(--bg-card);
    color: rgba(var(--color-action-rgb), 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04);
}

/* Panes */
.dp-panes {
    padding-top: 14px;
}
.dp-pane {
    display: none;
    animation: fadeIn 0.15s ease-out;
}
.dp-pane.active {
    display: block;
}
.dp-pane-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 14px;
    line-height: 1.4;
}
.dp-pane-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    position: relative;
}
.dp-pane-columns::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-light);
}
.dp-pane-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}
.dp-pane-full {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}
/* Preset cards */
.dp-preset-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.dp-preset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px 12px;
    border: 1.5px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-main);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    text-align: center;
    position: relative;
    font-family: inherit;
    color: var(--text-main);
}
.dp-preset-card:hover {
    border-color: var(--border-dark);
    background: var(--bg-surface, var(--bg-main));
    box-shadow: var(--shadow-sm);
}
.dp-preset-card.active {
    border-color: var(--accent-amber);
    background: rgba(var(--palette-amber-rgb), 0.06);
    box-shadow: 0 0 0 1px var(--accent-amber);
}
.dp-preset-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(var(--palette-navy-rgb, 30, 41, 59), 0.07);
    transition: background 0.2s, color 0.2s;
}
.dp-preset-icon-badge .material-symbols-outlined {
    font-size: 22px;
    color: var(--text-secondary);
}
.dp-preset-card.active .dp-preset-icon-badge {
    background: rgba(var(--palette-amber-rgb), 0.14);
}
.dp-preset-card.active .dp-preset-icon-badge .material-symbols-outlined {
    color: var(--accent-amber);
}
.dp-preset-name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}
.dp-preset-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
}
.dp-preset-check {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 15px;
    color: var(--accent-amber);
}

/* Advanced toggle & section */
.dp-advanced-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 14px 0 0;
    padding: 6px 10px;
    background: rgba(var(--palette-neutral-rgb), 0.04);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: inherit;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.dp-advanced-toggle:hover {
    color: var(--text-main);
    background: rgba(var(--palette-neutral-rgb), 0.08);
    border-color: var(--border-dark);
}
.dp-advanced-toggle .material-symbols-outlined:first-child {
    font-size: 16px;
}
.dp-adv-toggle-chevron {
    font-size: 16px;
    margin-left: auto;
    transition: transform 0.2s ease;
}
.dp-advanced-toggle.expanded .dp-adv-toggle-chevron {
    transform: rotate(180deg);
}
.dp-advanced-section {
    overflow: hidden;
    max-height: 600px;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
    opacity: 1;
    margin-top: 12px;
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
}
.dp-advanced-section.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    border-top-color: transparent;
    padding-top: 0;
}

.dp-section-tight { margin-bottom: 10px; }
.dp-section-tight .display-prefs-section-title { margin-bottom: 4px; }
.display-prefs-tab-title {
    margin: 0 0 2px 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}
.display-prefs-tab-title .material-symbols-outlined { font-size: 18px; }
.display-prefs-tab-sub {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}
.display-prefs-section {
    margin-bottom: 16px;
}
.display-prefs-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 6px;
}
.display-prefs-slider-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    opacity: 0.7;
    padding: 10px 0 2px;
    margin-top: 2px;
    border-top: 1px solid var(--border-light);
}
.display-prefs-slider-group-label:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.display-prefs-section-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin: -4px 0 8px;
}
.display-prefs-density-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

/* Demographics toggle + collapsible fields */
.display-prefs-fields-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.display-prefs-fields-toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}
.display-prefs-field-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: opacity 0.2s, max-height 0.25s;
    overflow: hidden;
}
.display-prefs-field-grid.collapsed {
    max-height: 0;
    opacity: 0.3;
    pointer-events: none;
    margin: 0;
}
.display-prefs-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.display-prefs-field-row label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    width: 50px;
    flex-shrink: 0;
}
.display-prefs-select {
    flex: 1;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
}
.display-prefs-select-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px 0;
}
.display-prefs-select-row + .display-prefs-select-row {
    border-top: 1px solid var(--border-light);
}
.display-prefs-select-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.display-prefs-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    gap: 12px;
}
.display-prefs-toggle-row + .display-prefs-toggle-row {
    border-top: 1px solid var(--border-light);
}
.display-prefs-toggle-info { display: flex; flex-direction: column; gap: 1px; }
.display-prefs-toggle-label { font-size: 13px; font-weight: 600; color: var(--text-main); }
.display-prefs-toggle-desc { font-size: 10px; color: var(--text-muted); }
/* Theme selector buttons */
.theme-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-main);
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.theme-selector-btn .material-symbols-outlined { font-size: 14px; }
.theme-selector-btn:hover:not(.active) { border-color: var(--border-dark); color: var(--text-main); }
.theme-selector-btn.active {
    border-color: rgba(var(--color-action-rgb), 0.5);
    background: rgba(var(--color-action-rgb), 0.06);
    color: rgba(var(--color-action-rgb), 1);
}

.display-prefs-header-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.display-prefs-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
    white-space: nowrap;
}
.display-prefs-header-btn .material-symbols-outlined { font-size: 14px; }
.display-prefs-header-btn.primary {
    background: rgba(var(--color-action-rgb), 0.1);
    color: rgba(var(--color-action-rgb), 1);
    border: 1px solid rgba(var(--color-action-rgb), 0.2);
}
.display-prefs-header-btn.primary:hover {
    background: rgba(var(--color-action-rgb), 0.18);
}
.display-prefs-header-btn.secondary {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
}
.display-prefs-header-btn.secondary:hover {
    background: rgba(var(--palette-neutral-rgb), 0.06);
    color: var(--text-main);
}
/* Hide demographics on tile */
body.hide-tile-fields .tile-details { display: none !important; }
.display-prefs-default-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    background: rgba(var(--color-action-rgb), 0.08);
    color: rgba(var(--color-action-rgb), 1);
    border: 1px solid rgba(var(--color-action-rgb), 0.2);
}
.display-prefs-default-btn:hover { background: rgba(var(--color-action-rgb), 0.15); }
.display-prefs-default-btn .material-symbols-outlined { font-size: 16px; }
.display-prefs-default-secondary {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border-light);
}
.display-prefs-default-secondary:hover { background: rgba(var(--palette-neutral-rgb), 0.06); }
/* Slider rows */
.display-prefs-slider-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px 0;
}
.display-prefs-slider-row + .display-prefs-slider-row {
    border-top: 1px solid var(--border-light);
}
.display-prefs-slider-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.display-prefs-slider-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.display-prefs-slider-value {
    font-size: 12px;
    font-weight: 600;
    color: rgba(var(--color-action-rgb), 1);
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    text-align: right;
}
.display-prefs-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-light);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.display-prefs-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(var(--color-action-rgb), 1);
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.15s;
}
.display-prefs-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.display-prefs-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(var(--color-action-rgb), 1);
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}
.display-prefs-font-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid var(--border-light);
}
.display-prefs-font-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.display-prefs-font-select {
    width: 180px;
}

/* ── Share Layout modal ── */
.share-user-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    background: var(--bg-card);
}
.share-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.1s ease;
}
.share-user-row:last-child { border-bottom: none; }
.share-user-row:hover { background: var(--bg-pool); }
.share-user-info { flex: 1; min-width: 0; }
.share-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-user-email {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-loading {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.share-current-wrap {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-light);
}
.share-current-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.share-current-list { display: flex; flex-wrap: wrap; gap: 6px; }
.share-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 10px;
    background: var(--bg-pool);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-main);
}
.share-chip-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-chip-remove:hover { background: var(--accent-red); color: #fff; }
.share-chip-remove .icon-sm { font-size: 14px; }

/* ==================== INBOX ==================== */
.inbox-btn-wrap { position: relative; }
.inbox-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--bg-card);
}
.inbox-modal-content {
    width: min(900px, 95vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.inbox-body {
    display: flex;
    gap: 0;
    padding: 0;
    flex: 1;
    min-height: 420px;
    max-height: 70vh;
    border-top: 1px solid var(--border-light);
}
.inbox-list {
    width: 320px;
    border-right: 1px solid var(--border-light);
    overflow-y: auto;
    background: var(--bg-pool);
}
.inbox-detail {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.inbox-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.inbox-item:hover { background: var(--accent-blue-light); }
.inbox-item.selected { background: var(--accent-blue-light); }
.inbox-item.unread .inbox-item-subject { font-weight: 700; }
.inbox-item-icon {
    font-size: 22px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.inbox-item.unread .inbox-item-icon { color: var(--accent-blue); }
.inbox-item-body { flex: 1; min-width: 0; }
.inbox-item-subject {
    font-size: 13px;
    color: var(--text-main, inherit);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.inbox-item-meta {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inbox-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-blue);
    flex-shrink: 0;
    margin-top: 6px;
}
.inbox-empty, .inbox-detail-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.inbox-empty .material-symbols-outlined,
.inbox-detail-empty .material-symbols-outlined {
    font-size: 40px;
    opacity: 0.4;
    display: block;
    margin-bottom: 8px;
}
.inbox-detail-header {
    padding: 18px 22px 14px 22px;
    border-bottom: 1px solid var(--border-light);
    position: relative;
}
.inbox-detail-subject {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    padding-right: 90px;
}
.inbox-detail-meta {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.inbox-detail-delete {
    position: absolute;
    top: 16px;
    right: 18px;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.inbox-detail-delete:hover {
    background: var(--accent-red);
    color: #fff;
    border-color: var(--accent-red);
}
.inbox-detail-delete .material-symbols-outlined { font-size: 15px; }
.inbox-detail-body {
    padding: 18px 22px;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.broadcast-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.broadcast-mode-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.broadcast-mode-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-main, inherit);
}
.broadcast-mode-opt input[type="radio"] { margin: 0; accent-color: var(--accent-blue); }
@media (max-width: 640px) {
    .inbox-body { flex-direction: column; }
    .inbox-list { width: 100%; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border-light); }
}

/* ── Inbox: invite banner + action buttons (Phase 2) ─────────────── */
.inbox-invite-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 22px 0 22px;
    padding: 12px 14px;
    background: rgba(var(--palette-primary-rgb), 0.06);
    border: 1px solid rgba(var(--palette-primary-rgb), 0.2);
    border-radius: 8px;
}
.inbox-invite-icon {
    font-size: 28px;
    color: var(--accent-blue);
}
.inbox-invite-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.inbox-invite-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent-blue);
}
.inbox-invite-case {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inbox-invite-num {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.inbox-detail-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 22px 0 22px;
    flex-wrap: wrap;
}
.inbox-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.inbox-action-btn .material-symbols-outlined { font-size: 16px; }
.inbox-action-btn.accept {
    background: var(--accent-green);
    color: #fff;
    border-color: var(--accent-green);
}
.inbox-action-btn.accept:hover { filter: brightness(1.08); }
.inbox-action-btn.decline {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border-light);
}
.inbox-action-btn.decline:hover {
    background: var(--accent-red);
    color: #fff;
    border-color: var(--accent-red);
}
.invite-case-label {
    display: block;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(var(--palette-primary-rgb), 0.05);
    border: 1px solid rgba(var(--palette-primary-rgb), 0.18);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

/* ============================================================
   POOL TABLE VIEW — compact data table alternative to tile grid
   ============================================================ */
.pool-table-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    margin-top: 8px;
}
.pool-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--text-main);
    table-layout: fixed;
}
.pool-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-pool);
    border-bottom: 1px solid var(--border-dark);
    padding: 4px 8px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, var(--text-main));
    white-space: nowrap;
    user-select: none;
}
.pool-table thead th { position: sticky; top: 0; z-index: 2; }
.pool-table th.sortable { cursor: pointer; }
.pool-table th.sortable:hover { background: var(--border-light, var(--border-dark)); color: var(--text-main); }
.pool-table th.active { color: var(--accent-blue); }
.pool-th-content {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pool-th-arrow {
    font-size: 14px !important;
    vertical-align: middle;
    margin-left: 4px;
}

/* Column resize handle */
.pool-col-resize {
    position: absolute;
    top: 0;
    right: -2px;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
}
.pool-col-resize:hover, .pool-col-resize:active {
    background: var(--accent-blue);
    opacity: 0.5;
}
.pool-table tbody tr {
    transition: background-color 0.1s ease;
}
.pool-table tbody tr:hover { background: var(--bg-pool); }
.pool-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-pool) 40%, transparent); }
.pool-table tbody tr:nth-child(even):hover { background: var(--bg-pool); }
.pool-td {
    padding: 2px 8px;
    border-bottom: 1px solid var(--border-dark);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.3;
}
.pool-td-num { font-variant-numeric: tabular-nums; text-align: right; width: 1%; }
.pool-td-occ { max-width: 260px; }
.pool-td-notes {
    font-size: 12px;
    color: var(--text-muted, var(--text-main));
    font-style: italic;
}
.pool-td-name { font-weight: 600; position: relative; overflow: hidden; }
.pool-td-status { font-size: 12px; color: var(--text-muted, var(--text-main)); }

/* Name click target */
.pool-name-btn {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--accent-blue);
    cursor: pointer;
    text-align: left;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pool-name-btn:hover { text-decoration: underline; }
.pool-name-btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; border-radius: 2px; }

/* Rating badge */
.pool-rating-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.pool-rating-badge.keeper { background: rgba(var(--color-keeper-rgb), 0.18); color: var(--color-keeper-text); }
.pool-rating-badge.strike { background: rgba(var(--color-strike-rgb), 0.18); color: var(--color-strike-text); }
.pool-rating-badge.neutral { background: var(--bg-pool); color: var(--text-muted, var(--text-main)); }
[data-theme="dark"] .pool-rating-badge.keeper { color: var(--accent-green); }
[data-theme="dark"] .pool-rating-badge.strike { color: var(--accent-red); }

/* Flag icons in table */
.pool-flag-icon {
    font-size: 16px !important;
    margin-right: 4px;
    vertical-align: middle;
}
.pool-flag-icon.le { color: var(--accent-blue); }
.pool-flag-icon.crim { color: var(--accent-orange, #ff9f0a); }

/* Row tints — mirror tile rating halos */
.pool-table tbody tr.row-keeper { background: rgba(var(--color-keeper-rgb), 0.08); }
.pool-table tbody tr.row-keeper:hover { background: rgba(var(--color-keeper-rgb), 0.14); }
.pool-table tbody tr.row-strike { background: rgba(var(--color-strike-rgb), 0.08); }
.pool-table tbody tr.row-strike:hover { background: rgba(var(--color-strike-rgb), 0.14); }
.pool-table tbody tr.row-inactive {
    color: var(--text-muted, var(--text-main));
    opacity: 0.55;
    font-style: italic;
}
.pool-table tbody tr.row-inactive .pool-name-btn { color: var(--text-muted, var(--text-main)); }

/* Struck rows — mirroring tile ghost styles per strike type */
.pool-table tbody tr.row-struck-cause {
    opacity: 0.35;
    filter: grayscale(1);
    background: var(--bg-pool) !important;
}
.pool-table tbody tr.row-struck-cause .pool-td-name {
    text-decoration: line-through;
    color: var(--text-muted, var(--text-main));
}
.pool-table tbody tr.row-struck-state {
    opacity: 0.4;
    background: rgba(var(--palette-primary-rgb), 0.08) !important;
}
.pool-table tbody tr.row-struck-state .pool-td-name {
    text-decoration: line-through;
    color: rgba(var(--palette-primary-rgb), 0.7);
}
.pool-table tbody tr.row-struck-defense {
    opacity: 0.4;
    background: rgba(var(--palette-warning-rgb), 0.08) !important;
}
.pool-table tbody tr.row-struck-defense .pool-td-name {
    text-decoration: line-through;
    color: rgba(var(--palette-warning-rgb), 0.7);
}
.pool-table tbody tr.row-struck-cause td { color: var(--text-muted); }
.pool-table tbody tr.row-struck-state td { color: rgba(var(--palette-primary-rgb), 0.5); }
.pool-table tbody tr.row-struck-defense td { color: rgba(var(--palette-warning-rgb), 0.5); }
.pool-table tbody tr.row-struck-cause:hover { opacity: 0.7; filter: none; }
.pool-table tbody tr.row-struck-state:hover,
.pool-table tbody tr.row-struck-defense:hover { opacity: 0.85; }

/* Strike panel emphasis rows */
.pool-table tbody tr.row-in-panel {
    background: rgba(var(--color-strike-panel-rgb), 0.06);
    outline: 1.5px solid rgba(var(--color-strike-panel-rgb), 0.25);
    outline-offset: -1.5px;
}
.pool-table tbody tr.row-in-panel:hover {
    background: rgba(var(--color-strike-panel-rgb), 0.1);
}
[data-theme="dark"] .pool-table tbody tr.row-in-panel {
    background: rgba(var(--color-strike-panel-rgb), 0.1);
}
[data-theme="dark"] .pool-table tbody tr.row-in-panel:hover {
    background: rgba(var(--color-strike-panel-rgb), 0.15);
}

/* Panel preview number watermark in name column */
.table-panel-watermark {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 800;
    color: rgba(var(--color-strike-panel-rgb), 0.12);
    pointer-events: none;
    line-height: 1;
    user-select: none;
}
[data-theme="dark"] .table-panel-watermark {
    color: rgba(var(--color-strike-panel-rgb), 0.15);
}

/* Neutralize panel emphasis on struck rows */
.pool-table tbody tr.row-in-panel.row-struck-state,
.pool-table tbody tr.row-in-panel.row-struck-defense,
.pool-table tbody tr.row-in-panel.row-struck-cause {
    border-left-color: transparent;
}
[data-theme="dark"] .pool-table tbody tr.row-keeper { background: rgba(var(--color-keeper-rgb), 0.12); }
[data-theme="dark"] .pool-table tbody tr.row-strike { background: rgba(var(--color-strike-rgb), 0.12); }

/* Sort priority badge (multi-column sort) */
.pool-sort-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}

/* Column drag-reorder indicators */
.pool-table th.dragging { opacity: 0.4; }
.pool-table th.drag-over-left {
    box-shadow: inset 3px 0 0 0 var(--accent-blue);
}
.pool-table th.drag-over-right {
    box-shadow: inset -3px 0 0 0 var(--accent-blue);
}

/* Column show/hide dropdown */
.pool-col-menu-wrap {
    position: relative;
    display: inline-block;
}
.pool-col-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(var(--palette-neutral-rgb),0.15));
    padding: 8px 0;
    margin-top: 6px;
}
.pool-col-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
}
.pool-col-option:hover { background: var(--bg-pool); }
.pool-col-option.locked { opacity: 0.5; cursor: default; }
.pool-col-option input[type="checkbox"] {
    accent-color: var(--accent-blue);
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.pool-col-option.locked input[type="checkbox"] { cursor: default; }

/* Clickable rows */
.pool-table tbody tr.pool-tr { cursor: pointer; }

/* Location cell */
.pool-td-status { white-space: nowrap; }

/* Actions column (meatball menu + row flag bars) */
.pool-th-actions { width: 72px !important; min-width: 72px; max-width: 72px; }
.pool-td-actions {
    position: relative;
    text-align: left;
    white-space: nowrap;
    padding-left: 4px !important;
    padding-right: 0 !important;
}

.pool-meatball-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted, var(--text-main));
    padding: 0;
    vertical-align: middle;
    transition: background 0.12s, color 0.12s;
}
.pool-meatball-btn:hover {
    background: var(--bg-pool);
    color: var(--text-main);
}
.pool-meatball-btn .material-symbols-outlined {
    font-size: 16px;
}

/* Row flag bars — vertical colored strips at the right edge of each row */
.pool-row-flags {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    pointer-events: none;
}
.pool-row-flag {
    width: 4px;
    height: 100%;
}
.pool-row-flag-le { background: var(--accent-blue); opacity: 0.65; }
.pool-row-flag-crim { background: var(--accent-red); opacity: 0.65; }
.pool-row-flag-followup { background: var(--accent-orange); opacity: 0.65; }

/* Pool row action menu — appended to body, fixed positioning */
.pool-row-action-menu {
    position: fixed;
    z-index: 200000;
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(var(--palette-neutral-rgb),0.25), 0 2px 8px rgba(var(--palette-neutral-rgb),0.12);
    min-width: 190px;
    padding: 4px 0;
}

/* ====================================================================
   JURY TABLE OVERLAY (full-screen table view)
   ==================================================================== */
/* ── Final Panel ──────────────────────────────────────────────────── */

.final-panel-content { padding: 16px; overflow-y: auto; flex: 1; }
.final-panel-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    gap: 8px;
}
.final-panel-pending .material-symbols-outlined { font-size: 48px; opacity: 0.3; }
.final-panel-pending p { margin: 0; font-size: 14px; line-height: 1.6; }
.final-panel-pending-sub { font-size: 12px !important; opacity: 0.6; }
.fp-overlay-pending { min-height: 300px; }

.final-panel-header-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(var(--palette-primary-rgb), 0.06);
    border: 1px solid rgba(var(--palette-primary-rgb), 0.15);
    border-radius: 6px;
    color: var(--accent-blue);
    font-size: 13px;
}
.final-panel-header-bar .material-symbols-outlined { font-size: 18px; }

.fp-tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.fp-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.fp-tile:hover { background: var(--bg-pool); border-color: var(--border-dark); }
.fp-tile-keeper { background: rgba(var(--color-keeper-rgb), 0.06); border-color: rgba(var(--color-keeper-rgb), 0.25); }
.fp-tile-strike { background: rgba(var(--color-strike-rgb), 0.06); border-color: rgba(var(--color-strike-rgb), 0.25); }

.fp-tile-number {
    font-size: 22px;
    font-weight: 900;
    color: rgba(var(--palette-primary-rgb), 0.15);
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}
.fp-tile-header { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.fp-tile-scramble { font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.fp-tile-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-tile-flags { display: flex; gap: 4px; flex-shrink: 0; }
.fp-flag {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.3;
}
.fp-flag-le { background: rgba(var(--palette-primary-rgb), 0.1); color: var(--accent-blue); }
.fp-flag-crim { background: rgba(var(--palette-warning-rgb), 0.1); color: var(--accent-orange); }
.fp-flag-fu { background: rgba(var(--palette-success-rgb, 22, 163, 74), 0.1); color: #16a34a; }
.fp-tile-details {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.fp-tile-notes {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    flex-shrink: 1;
}

/* Final Panel Overlay — compact popup */
.final-panel-overlay.jury-table-overlay {
    top: 56px;
    left: 48px;
    right: 48px;
    bottom: 48px;
    transform: none;
    width: auto;
    max-width: none;
    max-height: none;
    border-radius: 6px;
}
.final-panel-overlay-header {
    background: rgba(var(--palette-primary-rgb), 0.04) !important;
    border-bottom-color: rgba(var(--palette-primary-rgb), 0.15) !important;
}
.final-panel-overlay-header .jury-table-overlay-title .material-symbols-outlined {
    color: var(--accent-blue);
}
.final-panel-overlay-body { padding: 28px 32px; overflow-y: auto; flex: 1; }

.fp-overlay-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.fp-section {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;
    flex: 1;
    min-width: 280px;
}
.fp-section-title {
    text-align: center;
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-blue);
}
.fp-section-seats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.fp-seat {
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fp-seat-disabled { display: none; }
.fp-seat-empty {
    border: 1.5px dashed var(--border-light);
    background: var(--bg-pool);
}
.fp-seat-label { font-size: 10px; color: var(--text-muted); opacity: 0.5; }
.fp-seat-filled {
    border: 2px solid var(--accent-blue);
    background: var(--bg-card);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.fp-seat-filled:hover {
    box-shadow: 0 4px 16px rgba(var(--palette-primary-rgb), 0.15);
}
.fp-seat-keeper { border-color: rgb(var(--color-keeper-rgb)); }
.fp-seat-strike { border-color: rgb(var(--color-strike-rgb)); }

.fp-seat-num {
    font-size: 20px;
    font-weight: 900;
    color: rgba(var(--palette-primary-rgb), 0.15);
    line-height: 1;
    margin-bottom: 2px;
}
.fp-seat-name { font-size: 13px; font-weight: 800; line-height: 1.2; }
.fp-seat-first { font-size: 11px; color: var(--text-muted); }
.fp-seat-info { font-size: 10px; color: var(--text-muted); margin-top: 4px; opacity: 0.7; }

/* Jury Box layout in Final Panel overlay */
.jb-wrapper {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}
.jb-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 0;
}
.jb-box-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 8px;
}
.jb-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
}
.jb-row .fp-seat {
    flex: 1;
    min-width: 100px;
    max-width: 140px;
    min-height: 100px;
    padding: 14px 10px;
}
.jb-row .fp-seat-num {
    font-size: 24px;
    margin-bottom: 4px;
}
.jb-row .fp-seat-name {
    font-size: 14px;
}
.jb-row .fp-seat-first {
    font-size: 12px;
}
.jb-row .fp-seat-info {
    font-size: 11px;
    margin-top: 6px;
}
.jb-front-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    opacity: 0.35;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 2px solid var(--border-light);
    width: 100%;
    text-align: center;
}
.jb-config {
    flex-shrink: 0;
    width: 240px;
    background: var(--bg-pool);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.jb-config-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}
.jb-config-row {
    display: flex;
    align-items: center;
    height: 32px;
    gap: 0;
    font-size: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
}
.jb-config-label {
    font-weight: 700;
    color: var(--text-main);
    padding: 0 10px;
    white-space: nowrap;
}
.jb-config-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    flex: 1;
    text-align: center;
    white-space: nowrap;
}
.jb-config-btns {
    display: flex;
    margin-left: auto;
}
.jb-config-btns .btn-micro {
    width: 32px;
    height: 32px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-main);
}
.jb-config-btns .btn-micro:hover {
    background: rgba(var(--palette-primary-rgb), 0.08);
    color: var(--accent-blue);
}
.jb-row-del {
    color: var(--text-muted) !important;
    opacity: 0.6;
}
.jb-row-del:hover { opacity: 1; color: var(--accent-red) !important; }
.jb-add-row-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-blue);
    background: transparent;
    border: 1px dashed rgba(var(--palette-primary-rgb), 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.jb-add-row-btn:hover {
    background: rgba(var(--palette-primary-rgb), 0.06);
}
.jb-config-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.jb-config-field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.jb-mm-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px 4px;
}
.jb-mm-row {
    display: flex;
    gap: 3px;
    justify-content: center;
}
.jb-mm-seat {
    width: 20px;
    height: 16px;
    border-radius: 3px;
    border: 1.5px solid var(--border-light);
    background: var(--bg-card);
}
.jb-mm-corner {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.jb-mm-corner:hover {
    border-color: var(--accent-blue);
    background: rgba(var(--palette-primary-rgb), 0.08);
    transform: scale(1.15);
}
.jb-mm-active {
    border-color: var(--accent-blue);
    background: var(--accent-blue);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(var(--palette-primary-rgb), 0.2);
}
.jb-mm-front {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    opacity: 0.4;
    margin-top: 2px;
}
.jb-config-divider {
    height: 1px;
    background: var(--border-light);
    margin: 2px 0;
}
.jb-config-hint {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.55;
    line-height: 1.5;
    margin-top: 4px;
}
@media (max-width: 640px) {
    .final-panel-overlay.jury-table-overlay { top: 16px; left: 16px; right: 16px; bottom: 16px; }
    .final-panel-overlay-body { padding: 16px; }
    .jb-wrapper { flex-direction: column; align-items: center; }
    .jb-config { width: 100%; }
    .jb-row .fp-seat { min-width: 70px; min-height: 80px; }
}

.jury-table-overlay {
    position: fixed;
    top: 56px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 10050;
    background: var(--bg-card);
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--border-dark);
    box-shadow: 0 24px 80px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.15);
}
.jury-table-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10049;
    background: rgba(0,0,0,0.4);
}
.jury-table-overlay-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-dark);
    background: var(--bg-pool);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.jury-table-overlay-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.jury-table-overlay-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--accent-blue);
}
.jury-table-overlay-title h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}
.jury-table-result-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 4px;
}
.jury-table-overlay-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.jury-table-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 140px;
    max-width: 240px;
}
.jury-table-search-icon {
    position: absolute;
    left: 8px;
    font-size: 16px;
    color: var(--text-muted);
    pointer-events: none;
}
.jury-table-search-input {
    width: 100%;
    padding: 5px 10px 5px 28px;
    font-size: 12px;
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-main);
}
.jury-table-search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(var(--palette-primary-rgb), 0.15);
}
.jury-table-filter-select {
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
}
.jury-table-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-dark);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
    flex-shrink: 0;
}
.jury-table-reset-btn:hover {
    background: var(--bg-pool);
    color: var(--accent-red);
    border-color: var(--accent-red);
}
.jury-table-reset-btn .material-symbols-outlined { font-size: 16px; }
.jury-table-toolbar-group {
    display: flex;
    gap: 4px;
    align-items: center;
    border-left: 1px solid var(--border-dark);
    padding-left: 8px;
    margin-left: auto;
}
.jury-table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-dark);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
    flex-shrink: 0;
}
.jury-table-action-btn:hover {
    background: var(--bg-pool);
    color: var(--text-main);
}
.jury-table-action-btn .material-symbols-outlined { font-size: 18px; }
.jury-table-action-btn.active {
    background: rgba(var(--palette-primary-rgb), 0.12);
    border-color: rgba(var(--palette-primary-rgb), 0.4);
    color: var(--accent-blue);
}
.jury-table-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
    flex-shrink: 0;
    margin-left: auto;
}
.jury-table-close-btn:hover {
    background: rgba(var(--palette-danger-rgb), 0.1);
    color: var(--accent-red);
}
.jury-table-close-btn .material-symbols-outlined { font-size: 20px; }
.jury-table-overlay-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Compact rows for jury table overlay */
.jury-table-compact .pool-td {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.3;
}
.jury-table-compact thead th {
    padding: 4px 8px;
    font-size: 10px;
}
.jury-table-compact thead th {
    padding: 5px 10px;
}

/* ====================================================================
   BATCH SELECT / MULTI-SELECT
   ==================================================================== */

/* Blue halo on selected tiles — must override rating indicators */
.juror-tile.tile-batch-selected,
body.trial-mode-active .juror-tile.tile-batch-selected {
    box-shadow: 0 0 0 3px rgba(var(--palette-primary-rgb), 0.6), 0 0 18px rgba(var(--palette-primary-rgb), 0.35) !important;
    border-color: rgba(var(--palette-primary-rgb), 0.5) !important;
}

/* Keep blue halo visible on struck/ghosted tiles */
.juror-tile.tile-batch-selected.status-cause,
.juror-tile.tile-batch-selected.status-state > *:not(.tile-action-menu),
.juror-tile.tile-batch-selected.status-defense > *:not(.tile-action-menu),
.juror-tile.tile-batch-selected.status-fta > *:not(.tile-action-menu),
body.trial-mode-active .juror-tile.tile-batch-selected.status-cause > *:not(.tile-action-menu),
body.trial-mode-active .juror-tile.tile-batch-selected.status-state > *:not(.tile-action-menu),
body.trial-mode-active .juror-tile.tile-batch-selected.status-defense > *:not(.tile-action-menu),
body.trial-mode-active .juror-tile.tile-batch-selected.status-fta > *:not(.tile-action-menu) {
    filter: none !important;
    opacity: 0.55 !important;
}

/* Cursor change when batch select mode is active (scoped per view) */
.batch-scope-active .juror-tile { cursor: pointer; }
.batch-scope-active .juror-tile .tile-scramble-action { pointer-events: none; opacity: 0.5; }

/* Pool/table row selection */
.pool-tr.row-batch-selected {
    background: rgba(var(--palette-primary-rgb), 0.1) !important;
    outline: 1.5px solid rgba(var(--palette-primary-rgb), 0.3);
    outline-offset: -1.5px;
}
.batch-scope-active .pool-tr { cursor: pointer; }
.batch-scope-active .pool-meatball-btn { pointer-events: none; opacity: 0.5; }

/* --- Batch Inline Toolbar Actions --- */
.batch-inline-count,
.batch-inline-btn {
    display: none;
}
.batch-scope-active .batch-inline-count,
.batch-scope-active .batch-inline-btn {
    display: inline-flex;
    animation: batchInlineIn 0.15s ease;
}
@keyframes batchInlineIn { from { opacity: 0; transform: scale(0.9); } }
.batch-inline-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-blue);
    padding: 0 2px;
    white-space: nowrap;
    align-items: center;
}
.batch-inline-btn {
    align-items: center;
    gap: 3px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    white-space: nowrap;
}
.batch-inline-btn .material-symbols-outlined { font-size: 16px; }
.batch-inline-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.batch-inline-btn:hover {
    background: rgba(var(--palette-primary-rgb), 0.1);
    color: var(--accent-blue);
    border-color: rgba(var(--palette-primary-rgb), 0.2);
}
.batch-inline-btn.batch-inline-primary {
    background: rgba(var(--palette-primary-rgb), 0.12);
    color: var(--accent-blue);
    border-color: rgba(var(--palette-primary-rgb), 0.25);
}
.batch-inline-btn.batch-inline-primary:hover {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}
.batch-inline-btn[disabled] {
    opacity: 0.3;
    pointer-events: none;
}
.batch-inline-btn.batch-inline-undo {
    color: #16a34a;
}
.batch-inline-btn.batch-inline-undo:hover {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.3);
}
body.trial-mode-active .batch-inline-btn.batch-inline-primary { color: var(--accent-blue) !important; }
body.trial-mode-active .batch-inline-btn.batch-inline-primary:hover { color: #fff !important; }
body.trial-mode-active .batch-inline-btn.batch-inline-undo { color: #16a34a !important; }
body.trial-mode-active .batch-inline-count { color: var(--accent-blue) !important; }
.batch-inline-btn.batch-inline-danger {
    color: rgba(var(--palette-danger-rgb), 0.85);
}
.batch-inline-btn.batch-inline-danger:hover {
    background: rgba(var(--palette-danger-rgb), 0.12);
    border-color: rgba(var(--palette-danger-rgb), 0.3);
    color: rgba(var(--palette-danger-rgb), 1);
}

/* --- Batch Edit Modal --- */
.modal-content.batch-edit-content {
    max-width: 640px;
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--border-dark);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}
.batch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(var(--palette-primary-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--palette-primary-rgb), 0.15);
}
.batch-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}
.batch-title .material-symbols-outlined { font-size: 22px; color: var(--accent-blue); }

/* Juror chips */
.batch-juror-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 20px;
    max-height: 120px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border-light);
}
.batch-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 10px;
    background: rgba(var(--palette-primary-rgb), 0.08);
    border: 1px solid rgba(var(--palette-primary-rgb), 0.2);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-main);
    white-space: nowrap;
}
.batch-chip-num {
    font-weight: 700;
    color: var(--accent-blue);
    font-size: 11px;
}
.batch-chip-name { font-weight: 500; }
.batch-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.batch-chip-remove:hover { background: rgba(var(--palette-primary-rgb), 0.15); color: var(--accent-blue); }
.batch-chip-remove .material-symbols-outlined { font-size: 14px; }

/* Batch toolbar */
.batch-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}

/* Batch body */
.batch-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    flex: 1;
}
.batch-field-group { display: flex; flex-direction: column; gap: 8px; }
.batch-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* Note tags */
.batch-note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.batch-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-card);
    font-size: 12px;
    color: var(--text-main);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
    white-space: nowrap;
}
.batch-tag:hover {
    border-color: var(--accent-blue);
    background: rgba(var(--palette-primary-rgb), 0.06);
}

/* Note position radio */
.batch-note-position {
    display: flex;
    gap: 16px;
    margin-top: 6px;
}
.batch-radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}
.batch-radio-label input[type="radio"] { accent-color: var(--accent-blue); }

/* Batch footer */
.batch-footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-card);
}
.batch-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    background: var(--accent-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.batch-apply-btn:hover { background: color-mix(in srgb, var(--accent-blue) 85%, #000); }
.batch-apply-btn .material-symbols-outlined { font-size: 18px; }

/* ── Panel Entry Overlay ──────────────────────────────────── */
.panel-entry-backdrop { position: fixed; inset: 0; z-index: 10059; background: rgba(0,0,0,0.4); }
.panel-entry-overlay { position: fixed; top: 56px; left: 24px; right: 24px; bottom: 24px; z-index: 10060; background: var(--bg-card); display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; border: 1px solid var(--border-dark); box-shadow: 0 24px 80px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.15); }
.panel-entry-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-dark); background: var(--bg-pool); flex-shrink: 0; }
.panel-entry-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.panel-entry-title h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-main); }
.panel-entry-title .material-symbols-outlined { font-size: 22px; color: rgba(var(--palette-primary-rgb), 0.7); }
.panel-entry-count { font-size: 12px; color: var(--text-muted); background: var(--bg-card); padding: 2px 10px; border-radius: 12px; border: 1px solid var(--border-light); font-weight: 600; }
.panel-entry-actions { display: flex; align-items: center; gap: 8px; }
.panel-entry-action-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--border-dark); border-radius: 8px; background: var(--bg-card); color: var(--text-main); font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s; }
.panel-entry-action-btn:hover { background: var(--bg-pool); border-color: rgba(var(--palette-primary-rgb), 0.3); }
.panel-entry-action-btn .material-symbols-outlined { font-size: 18px; }
.panel-entry-commit-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; font-size: 13px; font-weight: 700; border-radius: 8px; cursor: pointer; }
.panel-entry-commit-btn .material-symbols-outlined { font-size: 18px; }
.panel-entry-close-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 6px; transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s; }
.panel-entry-close-btn:hover { background: rgba(var(--palette-danger-rgb), 0.1); color: rgba(var(--palette-danger-rgb), 0.8); }
.panel-entry-body { flex: 1; overflow: auto; padding: 0; }

.pe-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pe-th { position: sticky; top: 0; z-index: 2; padding: 8px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); background: var(--bg-pool); border-bottom: 2px solid var(--border-dark); text-align: left; white-space: nowrap; }
.pe-th-actions { width: 40px; }
.pe-td { padding: 0; border-bottom: 1px solid var(--border-light); }
.pe-input { width: 100%; padding: 8px 6px; border: none; background: transparent; font-size: 13px; font-family: inherit; color: var(--text-main); outline: none; box-sizing: border-box; }
.pe-input:focus { background: rgba(var(--palette-primary-rgb), 0.06); }
.pe-input[type="number"] { text-align: right; -moz-appearance: textfield; }
.pe-input[type="number"]::-webkit-inner-spin-button, .pe-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pe-row:hover { background: rgba(var(--palette-primary-rgb), 0.02); }
.pe-row:hover .pe-delete-btn { opacity: 1; }
.pe-td-actions { text-align: center; vertical-align: middle; }
.pe-delete-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 4px; opacity: 0; transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s; }
.pe-delete-btn:hover { background: rgba(var(--palette-danger-rgb), 0.1); color: rgba(var(--palette-danger-rgb), 0.8); }
.pe-row.pe-row-batch-selected { background: rgba(var(--palette-primary-rgb), 0.08) !important; }
.pe-row.pe-row-batch-selected .pe-batch-cb { accent-color: var(--accent-blue); }
.batch-scope-active .pe-row { cursor: pointer; }
.pe-batch-cb-cell { width: 32px; text-align: center; vertical-align: middle; }
.pe-batch-cb { width: 15px; height: 15px; cursor: pointer; }
.pe-delete-btn .material-symbols-outlined { font-size: 16px; }
.pe-add-row-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; border: none; border-top: 1px dashed var(--border-dark); background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s; }
.pe-add-row-btn:hover { background: rgba(var(--palette-primary-rgb), 0.04); color: rgba(var(--palette-primary-rgb), 0.8); }
.pe-add-row-btn .material-symbols-outlined { font-size: 18px; }

.pe-col-editor-backdrop { position: fixed; inset: 0; z-index: 10070; background: rgba(0,0,0,0.3); }
.pe-col-editor-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10071; background: var(--bg-card); border: 1px solid var(--border-dark); border-radius: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.15); width: 380px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.pe-col-editor-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-dark); background: var(--bg-pool); flex-shrink: 0; }
.pe-col-editor-title { display: flex; align-items: center; gap: 8px; }
.pe-col-editor-title h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-main); }
.pe-col-editor-title .material-symbols-outlined { font-size: 20px; color: rgba(var(--palette-primary-rgb), 0.7); }
.pe-col-editor-body { overflow-y: auto; padding: 8px 4px; }
.pe-col-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; color: var(--text-main); cursor: pointer; border-radius: 6px; transition: background 0.1s; }
.pe-col-option:hover { background: var(--bg-pool); }
.pe-col-option input[type="checkbox"] { accent-color: rgba(var(--palette-primary-rgb), 1); }
.pe-col-required { opacity: 0.5; }
.pe-col-required input { cursor: not-allowed; }
.pe-col-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 6px 12px 2px; }
.pe-col-divider { height: 1px; background: var(--border-light); margin: 4px 8px; }
.pe-col-custom-row { display: flex; align-items: center; }
.pe-col-custom-row .pe-col-option { flex: 1; }
.pe-col-type-badge { font-size: 9px; text-transform: uppercase; background: var(--bg-pool); color: var(--text-muted); padding: 1px 6px; border-radius: 4px; margin-left: auto; letter-spacing: 0.3px; }
.pe-col-delete-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 4px; flex-shrink: 0; margin-right: 4px; }
.pe-col-delete-btn:hover { background: rgba(var(--palette-danger-rgb), 0.1); color: rgba(var(--palette-danger-rgb), 0.8); }
.pe-col-delete-btn .material-symbols-outlined { font-size: 14px; }
.pe-col-add-section { padding: 6px 8px; }
.pe-col-add-row { display: flex; align-items: center; gap: 4px; }
.pe-col-add-input { flex: 1; padding: 6px 8px; border: 1px solid var(--border-dark); border-radius: 6px; background: var(--bg-card); color: var(--text-main); font-size: 12px; font-family: inherit; outline: none; min-width: 0; }
.pe-col-add-input:focus { border-color: rgba(var(--palette-primary-rgb), 0.5); }
.pe-col-add-input::placeholder { color: var(--text-muted); }
.pe-col-add-select { padding: 5px 4px; border: 1px solid var(--border-dark); border-radius: 6px; background: var(--bg-card); color: var(--text-main); font-size: 11px; font-family: inherit; cursor: pointer; }
.pe-col-add-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(var(--palette-primary-rgb), 0.3); background: rgba(var(--palette-primary-rgb), 0.06); color: rgba(var(--palette-primary-rgb), 0.8); border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.pe-col-add-btn:hover { background: rgba(var(--palette-primary-rgb), 0.12); }
.pe-col-add-btn .material-symbols-outlined { font-size: 18px; }