/* ============================================
   LÔ TÔ CALLER - TOP GUN STYLE
   Phong cách: Retro 80s Military Aviation
   Inspired by: Tử Chiến Trên Không (Top Gun)
   ============================================ */

/* Google Fonts - Vietnamese Support + Military Style */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&family=Oswald:wght@400;500;600;700&display=swap');

/* ============================================
   CSS Variables - Top Gun Color Palette
   ============================================ */
:root {
    /* Primary - Navy Blue (Flight Suit - Darker) */
    --color-navy: #0B1120;
    --color-navy-light: #151e32;
    --color-navy-dark: #000000;

    /* Accent - Gold/Bronze (Aviator Badge) */
    --color-gold: #F59E0B;
    --color-gold-light: #FCD34D;
    --color-gold-dark: #B45309;

    /* Secondary - Sunset Orange (Iconic sunset) */
    --color-sunset: #EA580C;
    --color-sunset-light: #F97316;

    /* Danger Red */
    --color-red: #DC2626;
    --color-red-dark: #B91C1C;

    /* Sky Blue */
    --color-sky: #0EA5E9;
    --color-sky-light: #38BDF8;

    /* Surfaces - Solid Dark */
    --color-bg: #020408;
    /* Almost Black */
    --color-surface: #0F172A;
    /* Deep Navy */
    --color-surface-light: #1E293B;

    /* Text */
    --color-text: #F8FAFC;
    --color-text-secondary: #CBD5E1;
    --color-text-muted: #94A3B8;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Border Radius - iOS Standard (Softer) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* Borders */
    --color-border: rgba(255, 255, 255, 0.08);

    /* Shadows */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --shadow-gold: 0 0 20px rgba(217, 119, 6, 0.4);
    --shadow-sunset: 0 0 30px rgba(234, 88, 12, 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
}

/* Light Theme */
[data-theme="light"] {
    /* Surfaces - Light */
    --color-bg: #F1F5F9;
    --color-surface: #FFFFFF;
    --color-surface-light: #E2E8F0;

    /* Navy becomes lighter for contrast */
    --color-navy: #E2E8F0;
    --color-navy-light: #F1F5F9;
    --color-navy-dark: #CBD5E1;

    /* Text - Dark */
    --color-text: #0F172A;
    --color-text-secondary: #475569;
    --color-text-muted: #64748B;

    /* Borders - Light */
    --color-border: rgba(0, 0, 0, 0.1);

    /* Shadows - Softer */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
    --shadow-gold: 0 0 20px rgba(217, 119, 6, 0.2);
    --shadow-sunset: 0 0 30px rgba(234, 88, 12, 0.15);

    /* Fix light mode muted text contrast (WCAG AA) */
    --color-text-muted: #475569;
}

/* ============================================
   Reset & Base
   ============================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%;
    overflow: hidden;
    /* Prevent ALL scroll on Html */
}

/* Skip Navigation Link (Accessibility) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    background: var(--color-gold);
    color: var(--color-navy);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    z-index: 10000;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 10px;
}

body {
    font-family: 'Poppins', 'Be Vietnam Pro', sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    height: 100dvh;
    /* Force Fit Screen */
    width: 100%;
    overflow: hidden;
    /* Prevent Body Scroll */
    padding: clamp(6px, 1vh, 12px);
    margin: 0;
}

/* Mobile Layout — Fit to screen, board is HERO */
@media (max-width: 950px) {
    body {
        height: 100dvh;
        overflow: hidden;
        padding: 3px;
    }

    .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        grid-template-columns: unset;
        grid-template-rows: unset;
        grid-template-areas: unset;
        gap: 3px;
    }

    .header {
        flex-shrink: 0;
        padding: 4px 8px;
    }

    .header h1 {
        font-size: clamp(0.9rem, 3vw, 1.2rem);
    }

    /* ─── Left Panel: COMPACT ─── */
    .left-panel {
        width: 100%;
        flex: 0 0 auto;
        overflow: hidden;
        margin-bottom: 0;
        padding-right: 0;
        gap: 3px;
        height: auto;
    }

    /* Shrink number display */
    .display-wrapper {
        flex-shrink: 0;
    }

    .current-number-section {
        min-height: unset !important;
        padding: 4px 8px !important;
    }

    .current-number {
        font-size: clamp(1.5rem, 5dvh, 2.4rem) !important;
        line-height: 1 !important;
    }

    .display-content {
        padding: 0 !important;
    }

    .funny-call {
        padding: 1px 4px !important;
        font-size: 0.6rem !important;
        min-height: unset !important;
        line-height: 1.2;
    }

    /* Make buttons compact single row — touch target ≥ 44px */
    .controls-section {
        grid-template-columns: repeat(4, 1fr);
        gap: 3px;
    }

    .controls-section .btn {
        padding: 4px 3px;
        min-height: 44px;
        font-size: 0.55rem;
    }

    .controls-section .btn svg {
        width: 14px;
        height: 14px;
    }

    /* Inline stats */
    .stats-section {
        padding: 2px 8px;
        font-size: 0.7rem;
    }

    /* HIDE history section on mobile — saves ~150px */
    .history-section {
        display: none !important;
    }

    /* HIDE ads on mobile to save space */
    .ad-container {
        display: none !important;
    }

    /* ─── Right Panel: FILL REMAINING SPACE ─── */
    .right-panel {
        width: 100%;
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .number-board-section {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        padding: 2px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .number-board-section h2 {
        display: none;
        /* Hide 'BẢNG SỐ' heading to save space */
    }

    .number-board {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(9, 1fr);
        aspect-ratio: unset;
        flex: 1;
        min-height: 0;
        gap: 2px;
        height: 100%;
        overflow: hidden;
    }

    .number-cell {
        font-size: clamp(0.5rem, 2.2vw, 0.75rem);
        min-height: 0;
        overflow: hidden;
    }
}


/* App Grid Layout for Desktop — Single source of truth */
.container {
    height: 100%;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: clamp(280px, 25vw, 380px) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header header"
        "left right";
    gap: clamp(6px, 1vh, 12px);
    overflow: hidden;
}

.header {
    grid-area: header;
}

.left-panel {
    grid-area: left;
    overflow-y: auto;
    height: 100%;
    min-height: 0;
    padding-right: 4px;
}

.right-panel {
    grid-area: right;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    /* Contain the board — NO scroll */
    display: flex;
    flex-direction: column;
}

/* Ensure Board fills space */
.number-board-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

.number-board {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 4px;
    min-height: 0;
}

/* Sunset Gradient Background - REMOVED for Flat Design */
body::before {
    display: none;
}

/* Grid Pattern Overlay - REMOVED for Flat Design */
body::after {
    display: none;
}

/* (Duplicate .container removed — consolidated above) */

/* Left Panel Container */
.left-panel {
    grid-area: left;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.5vh, 16px);
    /* Increased Gap */
    overflow-y: auto;
    /* Allow scrolling to prevent compression */
    min-height: 0;
}

/* Wrapper container - holds both number box and text */
.display-wrapper {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

/* Main number display box */
.current-number-section {
    background: var(--color-surface);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--color-gold-dark);
    border-bottom: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 3vh, 32px) clamp(12px, 2vw, 20px);
    min-height: clamp(80px, 12vh, 120px);
}

/* Right Panel Container */
.right-panel {
    grid-area: right;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}


/* ============================================
   Header - Military Typography
   ============================================ */
.header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: clamp(2px, 0.4vh, 6px) 0 clamp(6px, 0.8vh, 10px);
    flex-shrink: 0;
    overflow: visible;
}

/* Spacer to balance the header layout */
.header::before {
    content: '';
    flex: 1;
    min-width: 0;
}

.header h1 {
    font-family: 'Oswald', 'Be Vietnam Pro', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    /* Even Larger Header */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gold);
    text-shadow:
        0 0 10px rgba(217, 119, 6, 0.5),
        0 2px 0 var(--color-gold-dark);
    position: relative;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Decorative lines */
.header h1::before,
.header h1::after {
    content: '';
    position: absolute;
    top: 50%;
    width: clamp(16px, 6vw, 50px);
    height: 2px;
    height: 2px;
    background: var(--color-gold);
    /* Solid Line */
    opacity: 0.3;
}

.header h1::before {
    right: calc(100% + 12px);
}

.header h1::after {
    left: calc(100% + 12px);
    background: var(--color-gold);
    /* Solid Line */
}

.header-actions {
    flex: 1;
    display: flex;
    gap: clamp(4px, 0.6vw, 8px);
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    flex-wrap: wrap;
}

/* Quick-access header buttons (Câu Rao Text, Video, Fullscreen) */
.header-quick-btn {
    position: relative;
    transition: var(--transition-fast);
    opacity: 0.7;
}

.header-quick-btn:hover {
    opacity: 1;
    color: var(--color-gold);
}

/* Hide quick buttons on mobile — they're in the More menu */
@media (max-width: 575px) {
    .header-quick-btn {
        display: none !important;
    }
}

/* ============================================
   Current Number Section - Cockpit Display
   ============================================ */

/* Corner accent decorations */
.current-number-section::before,
.current-number-section::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gold);
    pointer-events: none;
    z-index: 1;
}

.current-number-section::before {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}

.current-number-section::after {
    bottom: 8px;
    right: 8px;
    border-left: none;
    border-top: none;
}

/* Inner content wrapper */
.display-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

/* The number itself */
.current-number {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.2rem, 3.5vh, 2.5rem);
    font-weight: 700;
    color: var(--color-sunset);
    line-height: 1.1;
    text-shadow:
        0 0 20px rgba(234, 88, 12, 0.6),
        0 0 40px rgba(234, 88, 12, 0.3);
    transition: var(--transition-normal);
    max-height: 100%;
}

.current-number.pulse {
    animation: numberPulse 0.5s ease-out;
}

@keyframes numberPulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Text display below number box */
.funny-call {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    /* Larger Call */
    color: var(--color-text-secondary);
    font-weight: 500;
    font-style: italic;
    text-align: center;
    padding: clamp(8px, 1.2vh, 12px) clamp(10px, 2vw, 16px);
    background: var(--color-surface);
    border: 2px solid var(--color-gold-dark);
    border-top: 1px solid var(--color-surface-light);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    line-height: 1.3;
}

.funny-call.show {
    animation: fadeUp 0.3s ease-out;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* ============================================
   Controls - Military Buttons
   ============================================ */
.controls-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 1.2vh, 12px);
    /* Increased Gap */
    flex: 0 0 auto;
}

.btn {
    font-family: 'Oswald', 'Be Vietnam Pro', sans-serif;
    padding: clamp(10px, 1.5vh, 14px) clamp(12px, 2vw, 20px);
    font-size: clamp(1rem, 2vw, 1.1rem);
    /* iOS Standard Body (~16px-17px) */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px solid;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-normal);
    min-height: clamp(44px, 6vh, 52px);
    /* Increased Height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
    white-space: normal;
    /* Allow text wrapping */
    line-height: 1.2;
    text-align: center;
}

.btn::before {
    display: none;
    /* Remove Shine Effect */
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: scale(0.96);
    opacity: 0.7;
    /* iOS Touch Feedback */
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--color-sunset);
    border-color: var(--color-sunset-light);
    color: white;
}

.btn-primary:hover {
    background: var(--color-sunset-light);
    box-shadow: var(--shadow-sunset);
}

.btn-secondary {
    background: var(--color-sky);
    border-color: var(--color-sky-light);
    color: white;
}

.btn-secondary:hover {
    background: var(--color-sky-light);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
}

.btn-danger {
    background: transparent;
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.btn-danger:hover {
    background: var(--color-gold);
    color: var(--color-navy);
}

.btn.active {
    background: var(--color-gold);
    border-color: var(--color-gold-light);
    color: var(--color-navy);
}

/* Standardized button icon sizing - iOS Standard (~20px) */
.btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ============================================
   Settings Section
   ============================================ */
.settings-section {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: clamp(6px, 1vh, 12px) clamp(8px, 1.2vw, 14px);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: clamp(6px, 1vh, 10px) clamp(6px, 1vw, 12px);
    border: 1px solid var(--color-surface-light);
    flex: 0 0 auto;
    overflow: hidden;
    max-width: 100%;
}

/* Phrase setting item with YouTube button */
.setting-item-phrase {
    grid-column: 1 / -1;
    flex-wrap: wrap;
}

.setting-item-phrase .btn-phrase-small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.setting-item {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.6vw, 8px);
    justify-content: flex-start;
    overflow: visible;
}

/* Vertical layout for slider items with long labels */
.setting-item-vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.5vh, 8px);
    grid-column: 1 / -1;
    margin-bottom: clamp(4px, 1vh, 10px);
}

.setting-item-vertical .slider-row {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.8vw, 8px);
    width: 100%;
}

.setting-item-vertical input[type="range"] {
    flex: 1;
    max-width: 150px;
}

.setting-item-vertical label {
    text-transform: none;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    /* Larger Labels */
    color: var(--color-text);
}

/* Compact row for 2 sliders side by side */
.setting-row-compact {
    display: flex;
    gap: clamp(8px, 2vw, 16px);
    grid-column: 1 / -1;
    flex-wrap: wrap;
    overflow: hidden;
    max-width: 100%;
}

.setting-slider-compact {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.5vw, 8px);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.setting-slider-compact label {
    font-size: clamp(0.55rem, 1vw, 0.7rem);
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-transform: none;
    flex-shrink: 0;
}

.setting-slider-compact input[type="range"] {
    width: clamp(40px, 8vw, 70px);
    flex-shrink: 1;
    min-width: 30px;
}

.setting-slider-compact span {
    font-size: clamp(0.55rem, 1vw, 0.7rem);
    color: var(--color-gold);
    min-width: 28px;
    flex-shrink: 0;
}

/* Small phrase button */
.btn-phrase-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 16px);
    font-size: clamp(0.65rem, 1.2vw, 0.8rem);
    background: var(--color-gold);
    color: var(--color-navy);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all 200ms ease;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Setting item with phrase button - spans full width */
.setting-item-phrase {
    grid-column: 1 / -1;
    justify-content: center;
    gap: clamp(12px, 3vw, 24px);
}

.btn-phrase-small:hover {
    background: var(--color-gold-light);
    transform: translateY(-1px);
}

/* Full width setting item (for buttons) */
.setting-item-full {
    grid-column: 1 / -1;
    justify-content: center;
}

.setting-item label {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: clamp(3px, 0.4vw, 6px);
    color: var(--color-text-secondary);
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: clamp(0.6rem, 1.1vw, 0.75rem);
    white-space: nowrap;
}

/* Range Slider */
.setting-item input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(50px, 6vw, 80px);
    height: 4px;
    background: var(--color-surface-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.setting-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--color-gold);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-gold);
    margin-top: -5px;
}

.setting-item input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.setting-item input[type="range"]:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}

/* Checkbox */
.setting-item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(14px, 1.8vw, 18px);
    height: clamp(14px, 1.8vw, 18px);
    background: var(--color-surface-light);
    border: 2px solid var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    flex-shrink: 0;
}

.setting-item input[type="checkbox"]:checked {
    background: var(--color-gold);
    border-color: var(--color-gold);
}

.setting-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 3px;
    height: 6px;
    border: solid var(--color-navy);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.setting-item input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

#speedValue {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: var(--color-gold);
    min-width: 1.8em;
    font-size: clamp(0.75rem, 1.3vw, 0.9rem);
}

/* ============================================
   Stats Section
   ============================================ */
.stats-section {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: clamp(6px, 0.8vh, 10px) clamp(8px, 1.2vw, 14px);
    box-shadow: var(--shadow-md);
    display: flex;
    justify-content: center;
    gap: clamp(16px, 4vw, 32px);
    font-size: clamp(0.7rem, 1.3vw, 0.85rem);
    border: 1px solid var(--color-surface-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex: 0 0 auto;
}

.stats-section span {
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.stats-section strong {
    font-family: 'Oswald', sans-serif;
    color: var(--color-gold);
    font-size: 1.2em;
    font-weight: 600;
}

/* ============================================
   Number Board Section
   ============================================ */
.number-board-section {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: clamp(6px, 1vh, 12px);
    box-shadow: var(--shadow-md);
    border: none;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.number-board-section h2 {
    font-family: 'Oswald', 'Be Vietnam Pro', sans-serif;
    text-align: center;
    margin-bottom: clamp(2px, 0.3vh, 4px);
    color: var(--color-gold);
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.number-board {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: clamp(2px, 0.4vw, 4px);
    flex: 1;
    min-height: 0;
    align-content: stretch;
    overflow: hidden;
}

.number-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-navy);
    border-radius: 3px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    color: var(--color-text-muted);
    transition: var(--transition-fast);
    border: 1px solid var(--color-surface-light);
    min-width: 0;
    min-height: 0;
}

.number-cell.called {
    background: var(--color-sunset);
    color: white;
    border-color: var(--color-sunset-light);
    box-shadow: 0 0 8px rgba(234, 88, 12, 0.4);
}

.number-cell.just-called {
    animation: justCalled 0.4s ease-out;
}

@keyframes justCalled {
    0% {
        transform: scale(1);
        background: var(--color-navy);
    }

    50% {
        transform: scale(1.3);
        background: var(--color-gold);
    }

    100% {
        transform: scale(1);
        background: var(--color-sunset);
    }
}

/* ============================================
   Donate Banner - Homepage
   ============================================ */
.donate-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.08);
    border-top: 1px solid rgba(245, 158, 11, 0.15);
    flex-shrink: 0;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    border-radius: 0;
}

.donate-banner-icon {
    color: var(--color-sunset);
    flex-shrink: 0;
    animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.2);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.15);
    }

    60% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .donate-banner-icon {
        animation: none;
    }
}

.donate-banner-text {
    color: var(--color-gold);
    font-weight: 600;
    font-family: 'Be Vietnam Pro', sans-serif;
    white-space: nowrap;
}

.donate-banner-method {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.donate-banner-method strong {
    color: var(--color-text);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.03em;
}

.donate-banner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.55rem;
    color: white;
    flex-shrink: 0;
}

.donate-banner-badge.momo {
    background: #a50064;
}

.donate-banner-badge.bank {
    background: #0066b3;
}

.donate-banner-sep {
    color: var(--color-text-muted);
    opacity: 0.3;
}

.donate-banner-name {
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

[data-theme="light"] .donate-banner {
    background: rgba(245, 158, 11, 0.06);
    border-top-color: rgba(245, 158, 11, 0.12);
}

@media (max-width: 950px) {
    .donate-banner {
        font-size: 0.65rem;
        padding: 4px 8px;
        gap: 5px;
        border-radius: 0;
    }

    .donate-banner-icon {
        width: 12px;
        height: 12px;
    }

    .donate-banner-badge {
        width: 14px;
        height: 14px;
        font-size: 0.5rem;
    }

    .donate-banner-name {
        display: none;
    }
}

/* ============================================
   History Section
   ============================================ */
.history-section {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: clamp(6px, 0.8vh, 10px) clamp(8px, 1.2vw, 14px);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-surface-light);
    flex: 1;
    /* Fill remaining space */
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.history-section h2 {
    font-family: 'Oswald', 'Be Vietnam Pro', sans-serif;
    text-align: center;
    margin-bottom: clamp(4px, 0.6vh, 8px);
    color: var(--color-gold);
    font-size: clamp(0.7rem, 1.4vw, 0.85rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.history {
    display: flex;
    justify-content: center;
    gap: clamp(4px, 0.8vw, 8px);
    flex-wrap: wrap;
    align-content: center;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
}

.history::-webkit-scrollbar {
    display: none;
}

.history-item {
    width: clamp(30px, 5.5vw, 40px);
    height: clamp(30px, 5.5vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-navy);
    color: var(--color-text);
    border-radius: 50%;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.75rem, 1.8vw, 0.95rem);
    font-weight: 600;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--color-surface-light);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.history-item:first-child {
    width: clamp(34px, 6vw, 44px);
    height: clamp(34px, 6vw, 44px);
    background: var(--color-sunset);
    border-color: var(--color-sunset-light);
    box-shadow: var(--shadow-sunset);
    font-size: clamp(0.85rem, 2vw, 1.05rem);
}

/* ============================================
   Modal
   ============================================ */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: var(--space-md);
}

.modal.show {
    display: flex;
}

.modal-content {
    background: var(--color-surface);
    padding: clamp(16px, 3vw, 32px);
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-lg);
    max-width: min(400px, 90vw);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border: 2px solid var(--color-gold-dark);
    animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-content h3 {
    font-family: 'Oswald', sans-serif;
    margin-bottom: var(--space-md);
    color: var(--color-gold);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.modal-content p {
    margin-bottom: var(--space-lg);
    color: var(--color-text-secondary);
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
}

/* Global Close Button - Top Gun Theme */
.btn-close {
    background: transparent;
    border: 2px solid var(--color-gold-dark);
    color: var(--color-gold);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.btn-close:hover {
    background: var(--color-gold);
    color: var(--color-navy);
    border-color: var(--color-gold);
    transform: scale(1.05);
}

.btn-close:active {
    transform: scale(0.98);
}

.btn-close:focus {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ============================================
   Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
}

/* ============================================
   Game Over State
   ============================================ */
.game-over .current-number {
    color: var(--color-gold);
    text-shadow: var(--shadow-gold);
}

.game-over .funny-call {
    color: var(--color-gold-light);
}

/* ============================================
   Ticket Check Button & Modal
   ============================================ */
.btn-ticket {
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    border-color: var(--color-gold-light);
    color: var(--color-navy);
}

.btn-ticket:hover {
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    box-shadow: var(--shadow-gold);
}

.ticket-modal {
    max-width: min(500px, 90vw);
}

.ticket-instruction {
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.ticket-input {
    width: 100%;
    padding: clamp(10px, 2vw, 16px);
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    font-family: 'Oswald', sans-serif;
    background: var(--color-navy);
    border: 2px solid var(--color-surface-light);
    border-radius: var(--radius-md);
    color: var(--color-text);
    margin-bottom: var(--space-md);
    text-align: center;
    letter-spacing: 0.1em;
}

.ticket-input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
}

.ticket-input::placeholder {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.ticket-result {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--color-navy);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-surface-light);
}

.ticket-result.hidden {
    display: none;
}

.result-summary {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-md);
}

.result-stat {
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.stat-value {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 700;
}

.stat-value.called {
    color: var(--color-sunset);
}

.stat-value.missing {
    color: var(--color-text-muted);
}

.result-numbers {
    border-top: 1px solid var(--color-surface-light);
    padding-top: var(--space-md);
}

.result-group {
    margin-bottom: var(--space-md);
}

.result-group:last-child {
    margin-bottom: 0;
}

.group-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.number-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}

.number-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
}

.number-tag.called {
    background: var(--color-sunset);
    color: white;
}

.number-tag.missing {
    background: var(--color-surface-light);
    color: var(--color-text-muted);
}

/* Modal Button Layout */
.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.modal-buttons .btn {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
}

/* Outline style for secondary modal actions */
.modal-buttons .btn-danger {
    background: transparent;
    border: 2px solid var(--color-text-muted);
    color: var(--color-text-secondary);
}

.modal-buttons .btn-danger:hover {
    background: var(--color-surface-light);
    border-color: var(--color-text-secondary);
    color: var(--color-text);
}

/* ============================================
   Header Icon Button
   ============================================ */
.btn-icon {
    background: transparent;
    border: none;
    color: var(--color-gold);
    cursor: pointer;
    padding: clamp(6px, 0.8vh, 10px);
    min-width: clamp(44px, 4vw, 48px);
    min-height: clamp(44px, 4vw, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.btn-icon svg {
    width: clamp(18px, 2.2vw, 24px);
    height: clamp(18px, 2.2vw, 24px);
}

.btn-icon:hover {
    background: var(--color-surface-light);
    color: var(--color-gold-light);
}

.font-size-controls {
    display: flex;
    gap: 3px;
}

.btn-font {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    font-weight: 600;
    padding: clamp(5px, 0.6vh, 8px) clamp(8px, 1vw, 12px);
    min-width: clamp(32px, 4vw, 42px);
}

/* Font Size Modifiers */
html.font-small {
    font-size: 14px;
}

html.font-medium {
    font-size: 16px;
}

html.font-large {
    font-size: 18px;
}

.hidden {
    display: none !important;
}

/* ============================================
   Share Dropdown
   ============================================ */
.share-dropdown {
    position: relative;
}

.share-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-xs);
    background: var(--color-surface);
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    min-width: 160px;
    z-index: 1000;
    overflow: hidden;
}

.share-option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    color: var(--color-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: left;
}

.share-option:hover {
    background: var(--color-surface-light);
}

.share-option svg {
    flex-shrink: 0;
}

#shareFacebook {
    color: #1877f2;
}

#shareFacebook:hover {
    background: rgba(24, 119, 242, 0.1);
}

#shareCopyLink svg {
    stroke: var(--color-sky);
}

.share-option.copied {
    background: var(--color-sky);
    color: white;
}

/* ============================================
   QR Modal Styles
   ============================================ */
.qr-modal {
    max-width: 320px;
    text-align: center;
}

.qr-modal h3 {
    margin-bottom: var(--space-md);
    color: var(--color-gold);
}

#qrcode {
    display: flex;
    justify-content: center;
    padding: var(--space-md);
    background: white;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

#qrcode canvas {
    border-radius: var(--radius-sm);
}

.qr-url {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    word-break: break-all;
    margin-bottom: var(--space-sm);
}

.qr-note {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

/* ============================================
   About Modal Styles
   ============================================ */
.about-modal {
    max-width: min(420px, 94vw);
    text-align: center;
    max-height: 85vh;
    overflow-y: auto;
    padding: clamp(16px, 3vw, 28px);
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) var(--color-surface-light);
}

.about-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.about-modal .modal-header h3 {
    margin-bottom: 0;
}

.about-modal::-webkit-scrollbar {
    width: 6px;
}

.about-modal::-webkit-scrollbar-track {
    background: var(--color-surface-light);
    border-radius: 3px;
}

.about-modal::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 3px;
}

.about-modal::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-light);
}

.about-modal h3 {
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    margin-bottom: var(--space-xs);
    color: var(--color-gold);
}

.about-modal .version {
    color: var(--color-text-muted);
    font-size: clamp(0.75rem, 2vw, 0.85rem);
    margin-bottom: var(--space-md);
}

.about-section {
    background: var(--color-navy);
    border-radius: var(--radius-md);
    padding: clamp(12px, 2vw, 18px);
    margin-bottom: var(--space-md);
    text-align: left;
    border: 1px solid var(--color-surface-light);
}

.about-section h4 {
    font-family: 'Oswald', sans-serif;
    color: var(--color-gold);
    font-size: clamp(0.8rem, 2vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.about-section p {
    margin-bottom: var(--space-sm);
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    color: var(--color-text-secondary);
}

.guide-list {
    margin: 0;
    padding-left: var(--space-lg);
    font-size: clamp(0.75rem, 2vw, 0.85rem);
    color: var(--color-text-secondary);
}

.guide-list li {
    margin-bottom: var(--space-xs);
    line-height: 1.5;
}

.guide-list li strong {
    color: var(--color-sky);
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-sky);
    text-decoration: none;
    font-weight: 500;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    transition: var(--transition-fast);
    padding: var(--space-xs) 0;
}

.social-link:hover {
    color: var(--color-sky-light);
}

.social-link svg {
    fill: currentColor;
    width: clamp(16px, 3vw, 20px);
    height: clamp(16px, 3vw, 20px);
    flex-shrink: 0;
}

/* Social Links Container */
.social-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.social-link.facebook {
    color: #1877f2;
}

.social-link.facebook:hover {
    color: #4293f5;
}

/* Donate Section - Eye-catching */
.donate-section {
    border: 2px solid var(--color-gold);
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.1), rgba(234, 88, 12, 0.05));
    position: relative;
    overflow: hidden;
}

.donate-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(217, 119, 6, 0.1), transparent);
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

.donate-section h4 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: clamp(0.8rem, 2vw, 0.95rem);
}

.donate-section h4::before {
    content: '💖';
    animation: heartbeat 1.5s ease-in-out infinite;
    font-size: 1em;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.donate-note {
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.donate-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}

.donate-method {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--color-surface);
    padding: clamp(10px, 1.5vw, 14px);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    border: 1px solid transparent;
}

.donate-method:hover {
    background: var(--color-surface-light);
    border-color: var(--color-gold);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}

.donate-icon {
    width: clamp(36px, 6vw, 44px);
    height: clamp(36px, 6vw, 44px);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    flex-shrink: 0;
}

.donate-icon.momo {
    background: linear-gradient(135deg, #a50064, #d82d8b);
    color: white;
}

.donate-icon.bank {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    color: white;
}

.donate-info {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.method-name {
    display: block;
    font-size: clamp(0.65rem, 1.5vw, 0.75rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.method-value {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    color: var(--color-text);
    letter-spacing: 0.03em;
}

.btn-copy {
    background: transparent;
    border: 1px solid var(--color-surface-light);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: clamp(6px, 1vw, 8px);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.btn-copy svg {
    width: clamp(14px, 2.5vw, 18px);
    height: clamp(14px, 2.5vw, 18px);
}

.btn-copy:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);
}

.btn-copy.copied {
    background: var(--color-sky);
    border-color: var(--color-sky);
    color: white;
}

.donate-name {
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--space-sm);
}

/* Affiliate Section */
.affiliate-section {
    border: 1px solid var(--color-sunset);
}

.affiliate-note {
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.affiliate-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--color-surface);
    padding: clamp(10px, 1.5vw, 14px);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: var(--transition-fast);
    border: 1px solid transparent;
}

.affiliate-link:hover {
    background: var(--color-surface-light);
    border-color: var(--color-sunset);
}

.donate-icon.shopee {
    background: linear-gradient(135deg, #ee4d2d, #ff6633);
    color: white;
}

.affiliate-text {
    flex: 1;
    font-weight: 500;
    font-size: clamp(0.8rem, 2vw, 0.95rem);
}

.external-icon {
    color: var(--color-text-muted);
    transition: var(--transition-fast);
}

.affiliate-link:hover .external-icon {
    color: var(--color-sunset);
}

/* ============================================
   Enhanced Responsive Layout
   ============================================ */

/* Large Desktop (>= 1200px) - Horizontal layout maintained */
@media (min-width: 1200px) {
    body {
        padding: clamp(16px, 2vh, 24px);
    }

    .container {
        grid-template-columns: clamp(360px, 28vw, 420px) 1fr;
        max-width: 1800px;
        margin: 0 auto;
    }

    .current-number {
        font-size: clamp(4rem, 16vh, 6.5rem);
    }

    .header h1 {
        font-size: clamp(2rem, 3vw, 2.5rem);
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    /* Ensure number board grid is readable on large screens */
    .number-cell {
        font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    }

    .number-board {
        gap: clamp(3px, 0.4vw, 6px);
    }
}

/* Desktop / Tablet Landscape (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        grid-template-columns: clamp(300px, 30vw, 360px) 1fr;
    }

    .current-number {
        font-size: clamp(3rem, 14vh, 5.5rem);
    }

    .number-cell {
        font-size: clamp(0.8rem, 1.5vw, 1rem);
    }
}

/* Tablet (768px - 991px) - Keep 2 column layout */
@media (min-width: 951px) and (max-width: 991px) {
    .container {
        grid-template-columns: clamp(260px, 35vw, 340px) 1fr;
    }

    .current-number {
        font-size: clamp(2rem, 10vh, 4rem);
    }

    .current-number-section {
        min-height: clamp(80px, 12vh, 120px);
    }

    .number-board-section {
        min-height: 0;
    }

    .number-cell {
        font-size: clamp(0.75rem, 1.4vw, 0.95rem);
    }

    .header h1::before,
    .header h1::after {
        display: none;
    }
}

/* Mobile Landscape / Large Phone (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .container {
        grid-template-columns: clamp(220px, 38vw, 300px) 1fr;
    }

    .number-board {
        grid-template-columns: repeat(9, 1fr);
    }

    .current-number {
        font-size: clamp(1.8rem, 8vh, 3.5rem);
    }

    .controls-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Portrait (<= 575px) */
@media (max-width: 575px) {
    body {
        padding: clamp(4px, 1vw, 8px);
    }

    .container {
        grid-template-columns: clamp(140px, 38vw, 220px) 1fr;
        gap: clamp(4px, 1vw, 8px);
    }

    .left-panel {
        gap: clamp(4px, 0.8vh, 6px);
    }

    .number-board {
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(9, 1fr);
        gap: 2px;
    }

    .number-cell {
        font-size: clamp(0.65rem, 2.8vw, 0.85rem);
        padding: 1px;
    }

    .number-board-section {
        padding: clamp(4px, 1vw, 8px);
    }

    .number-board-section h2 {
        font-size: clamp(0.6rem, 2.5vw, 0.75rem);
        margin-bottom: 3px;
    }

    .current-number {
        font-size: clamp(1.5rem, 8vh, 3rem);
    }

    .current-number-section {
        min-height: clamp(60px, 10vh, 90px);
        padding: clamp(8px, 1.5vh, 14px) clamp(6px, 1.5vw, 12px);
    }

    .current-number-section::before,
    .current-number-section::after {
        width: 12px;
        height: 12px;
    }

    .current-number-section::before {
        top: 4px;
        left: 4px;
    }

    .current-number-section::after {
        bottom: 4px;
        right: 4px;
    }

    .funny-call {
        font-size: clamp(0.6rem, 2.5vw, 0.75rem);
        padding: clamp(4px, 0.8vh, 8px);
    }

    .controls-section {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(3px, 0.8vw, 6px);
    }

    .btn {
        min-height: 44px;
        padding: 5px clamp(6px, 1.5vw, 10px);
        font-size: clamp(0.55rem, 2.5vw, 0.7rem);
        border-width: 1.5px;
    }

    .btn svg {
        width: clamp(11px, 2.8vw, 14px);
        height: clamp(11px, 2.8vw, 14px);
    }

    .settings-section {
        padding: clamp(4px, 0.8vh, 8px);
        gap: clamp(3px, 0.6vh, 6px);
    }

    .setting-item label {
        font-size: clamp(0.6rem, 2vw, 0.7rem);
    }

    .setting-item input[type="range"] {
        width: clamp(35px, 8vw, 50px);
        height: 3px;
    }

    .setting-item input[type="checkbox"] {
        width: clamp(12px, 3vw, 16px);
        height: clamp(12px, 3vw, 16px);
    }

    .setting-item select {
        font-size: clamp(0.5rem, 2vw, 0.65rem);
        padding: 2px 4px;
        min-width: clamp(50px, 12vw, 70px);
    }

    #speedValue {
        font-size: clamp(0.55rem, 2.2vw, 0.7rem);
    }

    .stats-section {
        padding: clamp(4px, 0.8vh, 8px);
        font-size: clamp(0.55rem, 2.2vw, 0.7rem);
        gap: clamp(8px, 3vw, 16px);
    }

    .history-section {
        padding: clamp(4px, 0.8vh, 8px);
    }

    .history-section h2 {
        font-size: clamp(0.55rem, 2.2vw, 0.7rem);
        margin-bottom: 3px;
    }

    .header {
        flex-wrap: nowrap;
    }

    .header h1 {
        font-size: clamp(0.8rem, 3.5vw, 1.2rem);
        letter-spacing: 0.04em;
    }

    .header::before {
        display: none;
    }

    .header-actions {
        gap: clamp(2px, 0.8vw, 4px);
        flex-wrap: nowrap;
    }

    .btn-icon {
        min-width: 44px;
        min-height: 44px;
        padding: clamp(3px, 0.8vw, 5px);
    }

    .btn-icon svg {
        width: clamp(16px, 4vw, 20px);
        height: clamp(16px, 4vw, 20px);
    }

    .btn-font {
        font-size: clamp(0.6rem, 2.5vw, 0.75rem);
        padding: clamp(3px, 0.8vw, 5px) clamp(4px, 1vw, 6px);
        min-width: clamp(24px, 6vw, 30px);
    }

    .font-size-controls {
        gap: 2px;
    }

    /* Settings: YouTube button goes under phrase button */
    .setting-item-phrase {
        gap: clamp(3px, 0.6vw, 5px);
    }

    .setting-item-phrase .btn-phrase-small {
        font-size: clamp(0.4rem, 1.8vw, 0.5rem);
        padding: clamp(3px, 0.5vh, 5px) clamp(4px, 0.8vw, 6px);
        gap: 3px;
    }

    .setting-item-phrase .btn-phrase-small svg {
        width: 10px;
        height: 10px;
    }

    .history-item {
        width: clamp(24px, 6vw, 32px);
        height: clamp(24px, 6vw, 32px);
        font-size: clamp(0.6rem, 2.5vw, 0.8rem);
    }
}

/* Small Mobile (<= 375px) */
@media (max-width: 375px) {
    body {
        padding: 2px;
    }

    .container {
        grid-template-columns: clamp(120px, 36vw, 160px) 1fr;
        gap: 2px;
    }

    .header h1 {
        font-size: clamp(0.7rem, 3vw, 0.9rem);
        letter-spacing: 0.02em;
    }

    .header-actions {
        gap: 1px;
    }

    .btn-icon {
        min-width: 44px;
        min-height: 44px;
        padding: 2px;
    }

    .btn-icon svg {
        width: clamp(14px, 3.5vw, 16px);
        height: clamp(14px, 3.5vw, 16px);
    }

    .btn-font {
        font-size: clamp(0.5rem, 2.2vw, 0.6rem);
        padding: 2px 4px;
        min-width: clamp(20px, 5.5vw, 26px);
    }

    .font-size-controls {
        gap: 1px;
    }

    .left-panel {
        gap: 2px;
    }

    .number-board {
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(9, 1fr);
        gap: 1px;
    }

    .number-cell {
        font-size: clamp(0.5rem, 2.2vw, 0.65rem);
        border-radius: 4px;
    }

    .number-board-section {
        padding: 2px;
    }

    .number-board-section h2 {
        font-size: clamp(0.45rem, 2vw, 0.6rem);
    }

    /* Override the 950px !important rules for even tighter spacing */
    .current-number {
        font-size: clamp(1.2rem, 4.5dvh, 2rem) !important;
    }

    .current-number-section {
        padding: 3px 6px !important;
    }

    .funny-call {
        font-size: 0.5rem !important;
        padding: 1px 3px !important;
    }

    .controls-section {
        gap: 2px;
    }

    .btn {
        padding: 3px clamp(3px, 1vw, 6px);
        font-size: clamp(0.45rem, 2vw, 0.55rem);
        min-height: 44px;
        border-width: 1px;
    }

    .btn svg {
        width: clamp(10px, 2.5vw, 12px);
        height: clamp(10px, 2.5vw, 12px);
    }

    .settings-section {
        padding: 2px;
        gap: 2px;
    }

    .setting-item label {
        font-size: clamp(0.38rem, 1.6vw, 0.45rem);
    }

    /* YouTube button: icon only on very small screens */
    .setting-item-phrase .btn-phrase-small {
        font-size: 0;
        padding: clamp(4px, 0.6vh, 6px);
        min-width: 0;
        gap: 0;
    }

    .setting-item-phrase .btn-phrase-small svg {
        width: 12px;
        height: 12px;
    }

    .stats-section {
        padding: 2px 6px;
        font-size: clamp(0.45rem, 1.8vw, 0.55rem);
        gap: 6px;
    }

    .history-section {
        padding: 2px;
    }

    .history-item {
        width: clamp(18px, 5vw, 24px);
        height: clamp(18px, 5vw, 24px);
        font-size: clamp(0.45rem, 2vw, 0.6rem);
    }

    .ticket-modal {
        padding: var(--space-sm);
    }

    /* Share dropdown hidden on very small screens */
    .share-dropdown {
        display: none;
    }
}

/* ============================================
   Landscape Mode Optimization
   ============================================ */
/* Landscape Mode - Mobile (height <= 500px) */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        padding: 3px;
    }

    .container {
        grid-template-columns: clamp(200px, 32vw, 280px) 1fr;
        gap: 3px;
    }

    .header {
        padding: 2px 0;
    }

    .header h1 {
        font-size: clamp(0.85rem, 2vw, 1.2rem);
    }

    .header::before {
        display: none;
    }

    .current-number-section {
        padding: clamp(6px, 1.5vh, 12px);
        min-height: clamp(50px, 16vh, 80px);
    }

    .current-number {
        font-size: clamp(1.5rem, 12vh, 3rem);
    }

    .funny-call {
        font-size: clamp(0.55rem, 1.2vw, 0.75rem);
        padding: clamp(3px, 0.6vh, 6px);
        min-height: clamp(20px, 4vh, 30px);
    }

    .controls-section {
        gap: 3px;
    }

    .btn {
        min-height: 44px;
        padding: 4px clamp(6px, 1vw, 10px);
        font-size: clamp(0.55rem, 1.3vw, 0.7rem);
        border-width: 1.5px;
    }

    .settings-section {
        padding: clamp(3px, 0.6vh, 6px);
        gap: 2px;
    }

    .setting-item label {
        font-size: clamp(0.4rem, 1vw, 0.55rem);
    }

    .stats-section {
        padding: clamp(3px, 0.5vh, 5px);
        font-size: clamp(0.5rem, 1.2vw, 0.7rem);
    }

    .history-section {
        padding: clamp(3px, 0.5vh, 5px);
    }

    .history-item {
        width: clamp(22px, 4vw, 30px);
        height: clamp(22px, 4vw, 30px);
        font-size: clamp(0.6rem, 1.2vw, 0.8rem);
    }

    .number-board-section {
        padding: clamp(3px, 0.5vh, 6px);
    }

    .number-board {
        grid-template-columns: repeat(10, 1fr);
    }

    .number-cell {
        font-size: clamp(0.55rem, 1.1vw, 0.75rem);
    }

    .left-panel {
        gap: 3px;
    }
}

/* Landscape Mode - Tablet (height 500-700px) */
@media (min-height: 501px) and (max-height: 700px) and (orientation: landscape) {
    body {
        padding: clamp(4px, 0.8vh, 8px);
    }

    .container {
        grid-template-columns: clamp(250px, 30vw, 340px) 1fr;
        gap: clamp(4px, 0.8vh, 8px);
    }

    .header h1 {
        font-size: clamp(1rem, 2.5vw, 1.5rem);
    }

    .current-number-section {
        padding: clamp(8px, 1.5vh, 16px);
        min-height: clamp(70px, 15vh, 110px);
    }

    .current-number {
        font-size: clamp(2rem, 12vh, 4rem);
    }

    .funny-call {
        font-size: clamp(0.65rem, 1.5vw, 0.85rem);
        padding: clamp(4px, 0.8vh, 8px);
    }

    .btn {
        min-height: 44px;
        padding: 5px clamp(8px, 1.2vw, 12px);
        font-size: clamp(0.6rem, 1.3vw, 0.75rem);
    }

    .settings-section {
        padding: clamp(4px, 0.8vh, 8px);
    }

    .stats-section {
        padding: clamp(4px, 0.6vh, 6px);
    }

    .history-section {
        padding: clamp(4px, 0.6vh, 6px);
    }

    .history-item {
        width: clamp(28px, 4.5vw, 36px);
        height: clamp(28px, 4.5vw, 36px);
        font-size: clamp(0.7rem, 1.4vw, 0.9rem);
    }

    .number-board-section {
        padding: clamp(4px, 0.6vh, 8px);
    }

    .number-cell {
        font-size: clamp(0.6rem, 1.3vw, 0.8rem);
    }
}

/* ============================================
   Select Dropdown Styles (Consistent)
   ============================================ */

/* ============================================
   Tablet Portrait Override (576px - 950px)
   Overrides the mobile flex-column layout to use
   available space with a 2-column grid.
   Requirements: 4.1, 4.2
   ============================================ */
@media (min-width: 576px) and (max-width: 950px) and (orientation: portrait) {
    .container {
        display: grid !important;
        flex-direction: unset !important;
        grid-template-columns: clamp(220px, 38vw, 320px) 1fr !important;
        grid-template-rows: auto 1fr !important;
        grid-template-areas:
            "header header"
            "left right" !important;
        gap: clamp(4px, 1vw, 10px) !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .header {
        grid-area: header;
        padding: clamp(4px, 0.6vh, 8px) clamp(6px, 1vw, 12px);
    }

    .header h1 {
        font-size: clamp(1rem, 2.5vw, 1.4rem);
    }

    .left-panel {
        grid-area: left;
        width: 100% !important;
        flex: unset !important;
        overflow-y: auto;
        height: 100% !important;
        min-height: 0;
        gap: clamp(6px, 1vh, 10px);
    }

    .right-panel {
        grid-area: right;
        width: 100% !important;
        flex: unset !important;
        height: 100% !important;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Restore number display for tablet */
    .current-number-section {
        min-height: clamp(60px, 10vh, 100px) !important;
        padding: clamp(8px, 1.5vh, 16px) clamp(8px, 1.5vw, 14px) !important;
    }

    .current-number {
        font-size: clamp(1.8rem, 8vh, 3.5rem) !important;
        line-height: 1.1 !important;
    }

    .funny-call {
        font-size: clamp(0.65rem, 1.5vw, 0.85rem) !important;
        padding: clamp(4px, 0.6vh, 8px) clamp(6px, 1vw, 10px) !important;
        min-height: unset !important;
    }

    /* 2×2 button grid for tablet */
    .controls-section {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(4px, 0.8vh, 8px);
    }

    .controls-section .btn {
        padding: clamp(6px, 1vh, 10px) clamp(6px, 1vw, 10px);
        min-height: 44px;
        font-size: clamp(0.65rem, 1.4vw, 0.8rem);
    }

    .controls-section .btn svg {
        width: 16px;
        height: 16px;
    }

    /* Show history on tablet */
    .history-section {
        display: flex !important;
    }

    /* Show ads on tablet */
    .ad-container {
        display: block !important;
    }

    /* Number board: show heading, readable size */
    .number-board-section {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .number-board-section h2 {
        display: block !important;
        font-size: clamp(0.65rem, 1.2vw, 0.8rem);
        flex-shrink: 0;
    }

    .number-board {
        grid-template-columns: repeat(10, 1fr) !important;
        grid-template-rows: repeat(9, 1fr) !important;
        gap: clamp(2px, 0.4vw, 4px);
        flex: 1;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .number-cell {
        font-size: clamp(0.65rem, 1.6vw, 0.9rem);
    }

    .stats-section {
        padding: clamp(4px, 0.6vh, 8px) clamp(6px, 1vw, 10px);
        font-size: clamp(0.65rem, 1.3vw, 0.8rem);
        flex-shrink: 0;
    }
}

/* Tablet Landscape Override (576px - 950px landscape) */
@media (min-width: 576px) and (max-width: 950px) and (orientation: landscape) {
    .container {
        display: grid !important;
        flex-direction: unset !important;
        grid-template-columns: clamp(200px, 30vw, 300px) 1fr !important;
        grid-template-rows: auto 1fr !important;
        grid-template-areas:
            "header header"
            "left right" !important;
        gap: clamp(4px, 0.8vh, 8px) !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .left-panel {
        grid-area: left;
        width: 100% !important;
        flex: unset !important;
        overflow-y: auto;
        height: 100% !important;
        min-height: 0;
    }

    .right-panel {
        grid-area: right;
        width: 100% !important;
        flex: unset !important;
        height: 100% !important;
        min-height: 0;
        overflow: hidden;
    }

    .history-section {
        display: flex !important;
    }

    .number-board-section h2 {
        display: block !important;
    }
}

/* ============================================
   Select Dropdown Styles (Consistent)
   ============================================ */
.setting-item select {
    padding: clamp(3px, 0.5vh, 6px) clamp(4px, 0.6vw, 8px);
    font-size: clamp(0.65rem, 1.1vw, 0.8rem);
    font-family: 'Be Vietnam Pro', sans-serif;
    background: var(--color-navy);
    border: 2px solid var(--color-surface-light);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    min-width: clamp(70px, 10vw, 120px);
    max-width: none;
    width: auto;
    position: relative;
    z-index: 5;
}

.setting-item select:focus {
    outline: none;
    border-color: var(--color-gold);
    z-index: 10;
}

.setting-item select option {
    background: var(--color-navy);
    color: var(--color-text);
    padding: 8px;
}


/* ============================================
   Confetti Effect
   ============================================ */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: confetti-fall 3s ease-out forwards;
}

.confetti.circle {
    border-radius: 50%;
}

.confetti.square {
    border-radius: 2px;
}

.confetti.ribbon {
    width: 4px;
    height: 16px;
    border-radius: 2px;
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(-20px) rotate(0deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) scale(0.5);
    }
}

/* Lucky number highlight effect */
.number-cell.lucky-hit {
    animation: luckyHit 0.6s ease-out;
}

@keyframes luckyHit {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--color-gold);
    }

    50% {
        transform: scale(1.3);
        box-shadow: 0 0 20px 10px var(--color-gold);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(234, 88, 12, 0.4);
    }
}

/* ============================================
   Phrase Manager Modal
   ============================================ */
.phrase-modal-content {
    max-width: min(500px, 94vw);
    text-align: left;
    max-height: 85vh;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) var(--color-surface-light);
}

.phrase-modal-content::-webkit-scrollbar {
    width: 8px;
}

.phrase-modal-content::-webkit-scrollbar-track {
    background: var(--color-surface-light);
    border-radius: 4px;
}

.phrase-modal-content::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 4px;
}

.phrase-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-light);
}

.phrase-modal-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 2vw, 20px);
    border-bottom: 1px solid var(--color-surface-light);
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 10;
}

.phrase-modal-content .modal-header h3 {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    color: var(--color-gold);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Phrase Controls - Number Selector */
.phrase-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: clamp(12px, 2vw, 16px);
    background: var(--color-navy);
    border-bottom: 1px solid var(--color-surface-light);
}

.phrase-controls label {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: var(--color-gold);
    font-size: clamp(0.9rem, 2vw, 1rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.phrase-controls select {
    padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2vw, 16px);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    background: var(--color-surface);
    border: 2px solid var(--color-gold-dark);
    border-radius: var(--radius-md);
    color: var(--color-sunset);
    cursor: pointer;
    min-width: 80px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) var(--color-surface-light);
}

.phrase-controls select::-webkit-scrollbar {
    width: 8px;
}

.phrase-controls select::-webkit-scrollbar-track {
    background: var(--color-surface-light);
    border-radius: 4px;
}

.phrase-controls select::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 4px;
}

.phrase-controls select::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-light);
}

.phrase-controls select option {
    background: var(--color-surface);
    color: var(--color-text);
    padding: 8px;
}

.phrase-controls select:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
}

/* Phrase List */
.phrase-list {
    padding: clamp(12px, 2vw, 16px);
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) var(--color-surface-light);
}

.phrase-list::-webkit-scrollbar {
    width: 8px;
}

.phrase-list::-webkit-scrollbar-track {
    background: var(--color-surface-light);
    border-radius: 4px;
}

.phrase-list::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 4px;
}

.phrase-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-light);
}

.phrase-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--space-xl);
}

/* Phrase Item */
.phrase-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: clamp(8px, 1.5vw, 12px);
    background: var(--color-navy);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    border: 1px solid var(--color-surface-light);
    transition: var(--transition-fast);
}

.phrase-item:hover {
    border-color: var(--color-gold-dark);
    background: var(--color-surface-light);
}

.phrase-item:last-child {
    margin-bottom: 0;
}

.phrase-text {
    flex: 1;
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    color: var(--color-text);
    word-break: break-word;
}

/* Phrase Type Badge */
.phrase-badge {
    font-size: clamp(0.6rem, 1.5vw, 0.7rem);
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    flex-shrink: 0;
}

.phrase-badge.default {
    background: var(--color-sky);
    color: white;
}

.phrase-badge.custom {
    background: var(--color-gold);
    color: var(--color-navy);
}

/* Phrase Action Buttons */
.phrase-actions-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn-phrase-action {
    background: transparent;
    border: 1px solid var(--color-surface-light);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-phrase-action svg {
    width: 14px;
    height: 14px;
}

.btn-phrase-action:hover {
    background: var(--color-surface-light);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.btn-phrase-action.edit:hover {
    color: var(--color-sky);
    border-color: var(--color-sky);
}

.btn-phrase-action.delete:hover {
    color: var(--color-red);
    border-color: var(--color-red);
}

/* Inline Edit Mode */
.phrase-item.editing .phrase-text {
    display: none;
}

.phrase-item.editing .phrase-badge {
    display: none;
}

.phrase-edit-input {
    flex: 1;
    padding: 6px 10px;
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    font-family: 'Be Vietnam Pro', sans-serif;
    background: var(--color-surface);
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.phrase-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
}

.phrase-edit-actions {
    display: flex;
    gap: 4px;
}

.btn-edit-save,
.btn-edit-cancel {
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-edit-save {
    background: var(--color-gold);
    border: none;
    color: var(--color-navy);
}

.btn-edit-save:hover {
    background: var(--color-gold-light);
}

.btn-edit-cancel {
    background: transparent;
    border: 1px solid var(--color-text-muted);
    color: var(--color-text-muted);
}

.btn-edit-cancel:hover {
    background: var(--color-surface-light);
    color: var(--color-text);
}

/* Add Phrase Section */
.phrase-add {
    display: flex;
    gap: var(--space-sm);
    padding: clamp(12px, 2vw, 16px);
    background: var(--color-navy);
    border-top: 1px solid var(--color-surface-light);
}

.phrase-input {
    flex: 1;
    padding: clamp(10px, 1.5vw, 12px);
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    font-family: 'Be Vietnam Pro', sans-serif;
    background: var(--color-surface);
    border: 2px solid var(--color-surface-light);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: var(--transition-fast);
}

.phrase-input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
}

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

.phrase-input.error {
    border-color: var(--color-red);
    animation: shake 0.3s ease-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.phrase-add .btn {
    flex-shrink: 0;
    min-width: 80px;
}

/* Phrase Actions (Reset Button) */
.phrase-actions {
    padding: clamp(12px, 2vw, 16px);
    border-top: 1px solid var(--color-surface-light);
    display: flex;
    justify-content: center;
}

.phrase-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.phrase-actions .btn svg {
    width: 14px;
    height: 14px;
}

/* Phrase Notice */
.phrase-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: clamp(10px, 2vw, 14px);
    background: rgba(234, 179, 8, 0.1);
    border-top: 1px solid var(--color-surface-light);
    font-size: clamp(0.65rem, 1.2vw, 0.75rem);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.phrase-notice svg {
    flex-shrink: 0;
    color: var(--color-gold);
    margin-top: 1px;
}

/* Phrase Button in Settings */
.setting-item-btn {
    grid-column: span 2;
    justify-content: center;
}

.btn-phrase {
    background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold));
    border: 2px solid var(--color-gold-light);
    color: var(--color-navy);
    font-size: clamp(0.65rem, 1.4vw, 0.75rem);
    padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 16px);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.btn-phrase:hover {
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
    box-shadow: var(--shadow-gold);
}

.btn-phrase svg {
    width: 14px;
    height: 14px;
}

/* Responsive for Phrase Modal */
@media (max-width: 575px) {
    .phrase-modal-content {
        max-height: 90vh;
    }

    .phrase-controls {
        padding: clamp(8px, 1.5vw, 12px);
    }

    .phrase-list {
        padding: clamp(8px, 1.5vw, 12px);
        max-height: 200px;
    }

    .phrase-item {
        padding: clamp(6px, 1.2vw, 10px);
        flex-wrap: wrap;
    }

    .phrase-actions-btns {
        width: 100%;
        justify-content: flex-end;
        margin-top: var(--space-xs);
    }

    .phrase-add {
        padding: clamp(8px, 1.5vw, 12px);
        flex-direction: column;
    }

    .phrase-add .btn {
        width: 100%;
    }
}


/* ============================================
   PWA Install Banner
   ============================================ */
.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--color-surface), var(--color-navy));
    border-top: 2px solid var(--color-gold);
    padding: clamp(12px, 2vw, 16px);
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.pwa-install-banner.show {
    transform: translateY(0);
}

.pwa-install-banner.hidden {
    display: none;
}

.pwa-install-content {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 16px);
    flex-wrap: wrap;
}

.pwa-install-icon {
    width: 48px;
    height: 48px;
    background: var(--color-gold);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy);
    flex-shrink: 0;
}

.pwa-install-icon svg {
    width: 28px;
    height: 28px;
}

.pwa-install-text {
    flex: 1;
    min-width: 200px;
}

.pwa-install-text strong {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    color: var(--color-gold);
    margin-bottom: 2px;
}

.pwa-install-text span {
    font-size: clamp(0.75rem, 2vw, 0.85rem);
    color: var(--color-text-secondary);
}

.pwa-install-actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.btn-pwa-install {
    background: var(--color-gold);
    color: var(--color-navy);
    border: none;
    padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px);
    border-radius: var(--radius-md);
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-pwa-install:hover {
    background: var(--color-gold-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn-pwa-dismiss {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-surface-light);
    padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2vw, 16px);
    border-radius: var(--radius-md);
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-pwa-dismiss:hover {
    background: var(--color-surface-light);
    color: var(--color-text);
}

/* Mobile responsive */
@media (max-width: 575px) {
    .pwa-install-content {
        flex-direction: column;
        text-align: center;
    }

    .pwa-install-text {
        min-width: auto;
    }

    .pwa-install-actions {
        width: 100%;
        justify-content: center;
    }

    .btn-pwa-install,
    .btn-pwa-dismiss {
        flex: 1;
    }
}


/* ============================================
   Game History Modal
   ============================================ */
.history-modal-content {
    max-width: min(500px, 94vw);
    text-align: left;
    max-height: 85vh;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) var(--color-surface-light);
}

.history-modal-content::-webkit-scrollbar {
    width: 8px;
}

.history-modal-content::-webkit-scrollbar-track {
    background: var(--color-surface-light);
    border-radius: 4px;
}

.history-modal-content::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 4px;
}

.history-modal-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 2vw, 20px);
    border-bottom: 1px solid var(--color-surface-light);
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 10;
}

.history-modal-content .modal-header h3 {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    color: var(--color-gold);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* History List */
.history-list {
    padding: clamp(12px, 2vw, 16px);
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
}

.history-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--space-xl);
}

.game-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: clamp(10px, 1.5vw, 14px);
    background: var(--color-navy);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    border: 1px solid var(--color-surface-light);
    transition: var(--transition-fast);
}

.game-history-item:hover {
    border-color: var(--color-gold-dark);
    background: var(--color-surface-light);
}

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

.game-history-date {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.9rem, 2vw, 1rem);
    color: var(--color-text);
    margin-bottom: 4px;
}

.game-history-stats {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.game-history-stats span {
    font-size: clamp(0.7rem, 1.5vw, 0.8rem);
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--color-surface-light);
    color: var(--color-text-muted);
}

.game-history-stats .stat-called {
    background: var(--color-sunset);
    color: white;
}

.game-history-stats .stat-complete {
    background: var(--color-gold);
    color: var(--color-navy);
}

.game-history-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn-history-view,
.btn-history-delete {
    background: transparent;
    border: 1px solid var(--color-surface-light);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-history-view:hover {
    background: var(--color-sky);
    border-color: var(--color-sky);
    color: white;
}

.btn-history-delete:hover {
    background: var(--color-red);
    border-color: var(--color-red);
    color: white;
}

.history-actions {
    padding: clamp(12px, 2vw, 16px);
    border-top: 1px solid var(--color-surface-light);
    display: flex;
    justify-content: center;
}

/* ============================================
   Game Detail Modal
   ============================================ */
.game-detail-content {
    max-width: min(600px, 94vw);
    text-align: left;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) var(--color-surface-light);
}

.game-detail-content::-webkit-scrollbar {
    width: 8px;
}

.game-detail-content::-webkit-scrollbar-track {
    background: var(--color-surface-light);
    border-radius: 4px;
}

.game-detail-content::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 4px;
}

.game-detail-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 2vw, 20px);
    border-bottom: 1px solid var(--color-surface-light);
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 10;
}

.game-detail-content .modal-header h3 {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    color: var(--color-gold);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
}

.game-detail-info {
    padding: clamp(12px, 2vw, 16px);
    background: var(--color-navy);
    border-bottom: 1px solid var(--color-surface-light);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-surface-light);
}

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

.detail-label {
    color: var(--color-text-muted);
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
}

.detail-value {
    font-family: 'Oswald', sans-serif;
    color: var(--color-text);
    font-size: clamp(0.85rem, 2vw, 0.95rem);
}

.detail-value.complete {
    color: var(--color-gold);
}

.game-detail-board {
    padding: clamp(12px, 2vw, 16px);
}

.game-detail-board h4,
.game-detail-sequence h4 {
    font-family: 'Oswald', sans-serif;
    color: var(--color-gold);
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.mini-number-board {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
}

.mini-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-navy);
    border-radius: 4px;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.65rem, 1.5vw, 0.8rem);
    color: var(--color-text-muted);
    padding: clamp(4px, 0.8vw, 8px);
    aspect-ratio: 1;
}

.mini-cell.called {
    background: var(--color-sunset);
    color: white;
}

.game-detail-sequence {
    padding: clamp(12px, 2vw, 16px);
    border-top: 1px solid var(--color-surface-light);
}

.call-sequence {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 150px;
    overflow-y: auto;
}

.sequence-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: var(--color-sunset);
    color: white;
    border-radius: 4px;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.7rem, 1.5vw, 0.8rem);
}

/* Responsive */
@media (max-width: 575px) {
    .history-list {
        max-height: 300px;
    }

    .game-history-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .game-history-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: var(--space-sm);
    }

    .mini-number-board {
        grid-template-columns: repeat(9, 1fr);
    }
}

/* ============================================
   Ticket Check Modal - Input Grid
   ============================================ */
.ticket-modal {
    max-width: min(420px, 94vw);
}

.ticket-instruction {
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    text-align: center;
    line-height: 1.5;
}

.ticket-instruction strong {
    color: var(--color-gold);
    font-weight: 700;
}

.ticket-input-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(8px, 2vw, 12px);
    margin-bottom: var(--space-sm);
    justify-items: center;
}

.ticket-box {
    width: 100%;
    aspect-ratio: 1;
    max-width: 56px;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 600;
    text-align: center;
    background: var(--color-navy);
    border: 2px solid var(--color-surface-light);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: var(--transition-fast);
    padding: 0;
}

.ticket-box::placeholder {
    color: var(--color-text-muted);
    opacity: 0.5;
}

.ticket-box:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.3);
    background: var(--color-surface);
}

.ticket-box.filled {
    background: var(--color-surface);
    border-color: var(--color-gold-dark);
    color: var(--color-sunset);
}

.ticket-box.invalid {
    border-color: var(--color-red);
    animation: shake 0.3s ease-out;
}

.ticket-hint {
    font-size: clamp(0.7rem, 1.6vw, 0.8rem);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--space-md);
}

.ticket-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-md);
}

.ticket-actions .btn {
    min-width: 100px;
}

.ticket-result {
    background: var(--color-navy);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: var(--space-md);
}

.result-summary {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
}

.result-stat {
    text-align: center;
}

.stat-label {
    display: block;
    font-size: clamp(0.7rem, 1.6vw, 0.8rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.stat-value {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    font-weight: 700;
}

.stat-value.called {
    color: var(--color-gold);
}

.stat-value.missing {
    color: var(--color-sunset);
}

.result-numbers {
    border-top: 1px solid var(--color-surface-light);
    padding-top: var(--space-md);
}

.result-group {
    margin-bottom: var(--space-sm);
}

.result-group:last-child {
    margin-bottom: 0;
}

.group-label {
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    color: var(--color-text-muted);
    display: block;
    margin-bottom: var(--space-xs);
}

.number-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.number-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    font-weight: 600;
}

.number-tag.called {
    background: var(--color-gold);
    color: var(--color-navy);
}

.number-tag.missing {
    background: var(--color-sunset);
    color: white;
}

/* Responsive for ticket modal */
@media (max-width: 400px) {
    .ticket-input-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    .ticket-box {
        max-width: 50px;
    }
}

/* ============================================
   YouTube Câu Rao Editor
   ============================================ */
.btn-yt {
    background: linear-gradient(135deg, #c4302b, #ff6b6b) !important;
    border-color: #ff6b6b !important;
    color: white !important;
}

.btn-yt:hover {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e) !important;
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.4) !important;
}

.yt-editor-content {
    max-width: min(1000px, 94vw);
    text-align: left;
    height: 96vh;
    height: 96dvh;
    max-height: 96vh;
    max-height: 96dvh;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* ── Smart Input (separated layout) ── */
.yt-smart-input-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.yt-smart-input {
    flex: 1;
    min-width: 0;
    padding: 9px 14px;
    border: 1.5px solid var(--color-surface-light);
    border-radius: var(--radius-md);
    background: var(--color-navy);
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 200ms ease;
}

.yt-smart-input:focus {
    border-color: var(--color-gold);
}

.yt-smart-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.yt-smart-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.yt-smart-actions .btn {
    padding: 9px 14px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    cursor: pointer;
}

/* ── Search Results (inline) ── */
.yt-search-results {
    padding: 0 clamp(10px, 2vw, 16px);
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ── Scan Section ── */
.yt-scan-section {
    padding: 8px clamp(10px, 2vw, 16px);
    text-align: center;
}

/* ── Scan Results (inline) ── */
.yt-scan-results {
    padding: 0 clamp(10px, 2vw, 16px);
}

/* ── Video Preview ── */
.yt-preview-wrapper {
    padding: 8px clamp(10px, 2vw, 16px);
}

/* Clip management */
.yt-clip-management {
    border-top: 1px solid var(--color-surface-light);
    padding: var(--space-sm) clamp(10px, 2vw, 16px);
    margin-top: 4px;
}

.yt-clip-management .yt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* ── Manual Clip Section (collapsed) ── */
.yt-manual-clip-section:not(.yt-preview-collapse) {
    padding: 0 clamp(10px, 2vw, 16px);
}

/* Mobile */
@media (max-width: 768px) {
    .yt-editor-content {
        max-width: 96vw;
    }
}

/* ── Header stats ── */
.yt-header-stats {
    margin-left: auto;
    margin-right: 8px;
}

.yt-header-stats-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(217, 119, 6, 0.15);
    color: var(--color-gold);
}

/* ── Collapsible sections (manual clip + backup) ── */
.yt-editor-content details:not(.yt-preview-collapse):not(.yt-manual-clip-section) {
    margin-top: var(--space-sm);
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.yt-editor-content details summary {
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    user-select: none;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}

.yt-editor-content details summary::-webkit-details-marker {
    display: none;
}

.yt-editor-content details summary::after {
    content: '';
    display: none;
}

.yt-editor-content details summary:hover {
    background: rgba(255, 255, 255, 0.06);
}

.yt-editor-content details[open]:not(.yt-preview-collapse):not(.yt-manual-clip-section) summary {
    border-bottom: 1px solid var(--color-surface-light);
}

.yt-editor-content details[open] summary::after {
    transform: none;
}

/* ── Backup section ── */
.yt-backup-section summary::after {
    content: '▸';
    display: inline-block;
    margin-left: auto;
    font-size: 0.85rem;
    transition: transform 200ms ease;
}

.yt-backup-section[open] summary::after {
    transform: rotate(90deg);
}

.yt-backup-section .yt-backup-count {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 4px;
}

.yt-backup-list {
    padding: 6px;
}

.yt-backup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.yt-backup-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.yt-backup-info {
    display: flex;
    gap: 8px;
    align-items: center;
}

.yt-backup-time {
    font-size: 0.72rem;
    opacity: 0.7;
}

.yt-backup-clips {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-gold);
}

.yt-backup-restore {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
}

/* ── Community section ── */
.yt-hp {
    position: absolute;
    left: -9999px;
    height: 0;
    width: 0;
    opacity: 0;
    pointer-events: none;
}

.yt-community-upload {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-surface-light);
}

.yt-community-upload h4,
.yt-community-browse h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.yt-upload-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.yt-upload-form .yt-input {
    flex: 1;
    min-width: 120px;
    font-size: 0.78rem;
    padding: 6px 10px;
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.yt-upload-form .yt-input:focus {
    border-color: var(--color-gold);
}

.yt-community-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.yt-community-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 350px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.yt-community-pack {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    gap: 8px;
}

.yt-community-pack:hover {
    border-color: var(--color-gold);
    background: rgba(217, 119, 6, 0.05);
}

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

.yt-pack-name {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-pack-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.68rem;
    opacity: 0.7;
}

.yt-pack-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}

.yt-pack-import {
    flex-shrink: 0;
    font-size: 0.7rem !important;
    padding: 4px 12px !important;
}

.yt-pack-report {
    flex-shrink: 0;
    font-size: 0.7rem !important;
    padding: 4px 6px !important;
    background: transparent !important;
    border: 1px solid var(--color-surface-light) !important;
    color: var(--color-text-muted) !important;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s;
}

.yt-pack-report:hover {
    opacity: 1;
    border-color: #e74c3c !important;
    color: #e74c3c !important;
}

.yt-editor-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 2vw, 20px);
    border-bottom: 1px solid var(--color-surface-light);
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 10;
}

.yt-editor-content .modal-header h3 {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    color: #c4302b;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.yt-editor-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── VS Code-style horizontal layout ── */
.yt-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

/* ── Sidebar RIGHT: clip grid + actions ── */
.yt-sidebar {
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.25);
    border-left: 2px solid var(--color-surface-light);
    overflow: hidden;
    transition: width 0.25s ease, min-width 0.25s ease;
}

/* Collapsed state — thin toggle strip */
.yt-sidebar.collapsed {
    width: 32px;
    min-width: 32px;
    overflow: hidden;
}

.yt-sidebar.collapsed .yt-sidebar-body {
    display: none;
}

.yt-sidebar.collapsed .yt-sidebar-title,
.yt-sidebar.collapsed .yt-sidebar-count {
    display: none;
}

.yt-sidebar.collapsed .yt-sidebar-header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
    border-bottom: none;
    height: 100%;
}

.yt-sidebar.collapsed .yt-sidebar-toggle svg {
    transform: rotate(180deg);
}

.yt-sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--color-surface-light);
    border-bottom: 1px solid var(--color-surface-light);
    flex-shrink: 0;
    background: var(--color-navy);
}

.yt-sidebar-toggle {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
}

.yt-sidebar-toggle svg {
    width: 20px;
    height: 20px;
    stroke-width: 3;
    transition: transform 0.25s ease;
}

.yt-sidebar-toggle:hover {
    color: var(--color-gold);
    background: rgba(245, 158, 11, 0.12);
}

.yt-sidebar-title {
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.yt-sidebar-count {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    color: var(--color-gold);
    font-weight: 600;
    margin-left: auto;
}

.yt-sidebar-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.yt-sidebar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 10px;
    border-top: 1px solid var(--color-surface-light);
    flex-shrink: 0;
}

.yt-sidebar-actions .btn {
    font-size: 0.7rem;
    padding: 6px 4px;
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.yt-sidebar .yt-backup-section {
    padding: 10px 0;
    border-top: 1px solid var(--color-surface-light);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    margin: 0;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
}

.yt-sidebar .yt-backup-section summary {
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 12px;
}

/* ── Main panel ── */
.yt-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-navy);
}

/* Search bar — sits at top, no overlap */
.yt-main .yt-smart-input-section {
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--color-navy);
    flex-shrink: 0;
}

/* Scrollable content below search bar */
.yt-main .yt-editor-columns {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Disclaimer at bottom */
.yt-main .yt-disclaimer {
    flex-shrink: 0;
}

/* ── Section toggle (details/summary) ── */
.yt-manual-clip-section:not(.yt-preview-collapse) {
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-sm);
    margin-top: var(--space-xs);
}

.yt-section-toggle {
    cursor: pointer;
    padding: 10px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.yt-section-toggle svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.yt-section-toggle:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.03);
}

.yt-manual-clip-body {
    padding: 0 12px 12px;
}


.yt-input-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.yt-search-row,
.yt-url-row {
    display: flex;
    gap: var(--space-sm);
}

.yt-search-input,
.yt-url-input {
    flex: 1;
    padding: clamp(8px, 1.5vw, 10px);
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    font-family: 'Be Vietnam Pro', sans-serif;
    background: var(--color-navy);
    border: 2px solid var(--color-surface-light);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: var(--transition-fast);
}

.yt-search-input:focus,
.yt-url-input:focus {
    outline: none;
    border-color: #c4302b;
    box-shadow: 0 0 0 3px rgba(196, 48, 43, 0.2);
}

.yt-search-input::placeholder,
.yt-url-input::placeholder {
    color: var(--color-text-muted);
}

/* Search Results */
.yt-search-results {
    max-height: 250px;
    overflow-y: auto;
    border-radius: var(--radius-md);
    background: var(--color-navy);
}

.yt-result-item {
    display: flex;
    gap: var(--space-sm);
    padding: clamp(8px, 1.5vw, 10px);
    cursor: pointer;
    border-bottom: 1px solid var(--color-surface-light);
    transition: var(--transition-fast);
}

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

.yt-result-item:hover {
    background: var(--color-surface-light);
}

.yt-result-item.selected {
    background: rgba(217, 119, 6, 0.15);
    border-left: 3px solid var(--color-gold);
}

.yt-result-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 68px;
}

.yt-result-thumb {
    width: 120px;
    height: 68px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.yt-cc-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.yt-cc-text {
    color: #4ade80;
    font-weight: 600;
}

.yt-result-item.has-cc {
    border-left: 2px solid #4ade80;
}

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

.yt-result-title {
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    color: var(--color-text);
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.yt-result-meta {
    font-size: clamp(0.65rem, 1.4vw, 0.75rem);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Empty State */
.yt-empty-state {
    text-align: center;
    padding: var(--space-md);
    color: var(--color-text-muted);
    font-size: clamp(0.7rem, 1.6vw, 0.85rem);
    font-style: italic;
}

.yt-loading {
    text-align: center;
    padding: var(--space-md);
    color: var(--color-text-muted);
    font-size: clamp(0.8rem, 2vw, 0.9rem);
}

/* Preview Player — 16:9 responsive */
.yt-preview-wrapper {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.yt-preview-wrapper #ytPreviewPlayer {
    position: relative;
    width: 100%;
    padding-bottom: 30%;
    /* Compact — only for audio preview, not video watching */
}

.yt-preview-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.yt-video-info {
    padding: 8px 12px;
    background: var(--color-navy);
    font-size: clamp(0.7rem, 1.6vw, 0.8rem);
    color: var(--color-text-secondary);
    line-height: 1.3;
}

/* Time & Assign Rows */
.yt-time-row {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-end;
}

.yt-time-input {
    flex: 1;
}

.yt-time-input label {
    display: block;
    font-size: clamp(0.7rem, 1.5vw, 0.8rem);
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.yt-time-input input {
    width: 100%;
    padding: clamp(6px, 1vw, 8px);
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    background: var(--color-navy);
    border: 2px solid var(--color-surface-light);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-align: center;
}

.yt-time-input input:focus {
    outline: none;
    border-color: var(--color-gold);
}

.yt-assign-row {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
}

.yt-number-select {
    width: 90px;
    padding: clamp(6px, 1vw, 8px);
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    background: var(--color-navy);
    border: 2px solid var(--color-gold-dark);
    border-radius: var(--radius-md);
    color: var(--color-gold);
    cursor: pointer;
}

.yt-label-input,
.yt-source-input {
    flex: 1;
    min-width: 100px;
    padding: clamp(6px, 1vw, 8px);
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    background: var(--color-navy);
    border: 2px solid var(--color-surface-light);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.yt-label-input:focus,
.yt-source-input:focus {
    outline: none;
    border-color: var(--color-gold);
}

.yt-label-input::placeholder,
.yt-source-input::placeholder {
    color: var(--color-text-muted);
}

/* Clip List */
.yt-clip-list-section h4 {
    font-family: 'Oswald', sans-serif;
    color: var(--color-gold);
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.yt-clip-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 6px;
}

/* ── 6-column number grid (fits sidebar) ── */
.yt-clip-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
}

.yt-clip-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.7rem, 1.8vw, 0.85rem);
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-muted);
    opacity: 0.4;
    transition: all 0.15s ease;
    user-select: none;
    cursor: default;
}

.yt-clip-cell.has-clip {
    background: #DC2626;
    color: white;
    border-color: rgba(220, 38, 38, 0.5);
    opacity: 1;
    cursor: pointer;
    font-weight: 600;
}

.yt-clip-cell.has-clip:hover {
    transform: scale(1.08);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
    z-index: 1;
}

.yt-clip-cell.selected {
    background: #DC2626;
    border: 2px solid var(--color-gold);
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.5);
    transform: scale(1.1);
    z-index: 2;
}

/* Clip count badge on grid cell */
.clip-count-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--color-gold);
    color: var(--color-navy);
    font-size: 0.55rem;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 7px;
    padding: 0 2px;
}

.yt-clip-cell {
    position: relative;
}

/* ── Detail strip (shown below grid on cell click) ── */
.yt-clip-detail {
    padding: 10px 12px;
    margin-top: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-gold-dark);
    border-radius: var(--radius-sm);
    animation: fadeSlideIn 0.2s ease;
}

.yt-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.yt-detail-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.yt-detail-row:last-of-type {
    border-bottom: none;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

.yt-detail-num {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DC2626;
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

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

.yt-detail-label {
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    color: var(--color-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-detail-time {
    font-size: clamp(0.65rem, 1.4vw, 0.75rem);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.yt-detail-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.btn-clip-delete {
    background: transparent;
    border: 1px solid var(--color-surface-light);
    color: var(--color-text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: var(--transition-fast);
}

.btn-clip-delete:hover {
    background: var(--color-red);
    border-color: var(--color-red);
    color: white;
}

.yt-empty {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
    font-size: clamp(0.78rem, 2vw, 0.88rem);
    background: var(--color-navy);
    border: 1px dashed var(--color-surface-light);
    border-radius: var(--radius-md);
    line-height: 1.5;
}

/* ── Mobile: sidebar full-width, 10 columns ── */
@media (max-width: 575px) {
    .yt-clip-grid {
        grid-template-columns: repeat(10, 1fr);
        gap: 2px;
    }

    .yt-clip-cell {
        font-size: clamp(0.55rem, 2.5vw, 0.7rem);
    }

    .yt-clip-detail {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* Actions */
.yt-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.yt-actions .btn svg {
    width: 14px;
    height: 14px;
}

/* Responsive */
@media (max-width: 575px) {
    .yt-editor-content {
        max-height: 95vh;
        max-height: 95dvh;
        max-width: 98vw;
    }

    .yt-editor-body {
        padding: 0;
    }

    .yt-layout {
        flex-direction: column;
    }

    .yt-sidebar {
        width: 100%;
        min-width: 100%;
        border-left: none;
        border-top: 1px solid var(--color-surface-light);
    }

    .yt-sidebar.collapsed {
        width: 100%;
        min-width: 100%;
        height: 32px;
        min-height: 32px;
        max-height: 32px;
        overflow: hidden;
    }

    .yt-sidebar.collapsed .yt-sidebar-header {
        flex-direction: row;
        padding: 4px 8px;
    }

    .yt-sidebar.collapsed .yt-sidebar-toggle svg {
        transform: rotate(90deg);
    }

    .yt-main .yt-smart-input-section {
        padding: 8px;
    }

    .yt-assign-row {
        flex-direction: column;
    }

    .yt-number-select,
    .yt-label-input,
    .yt-source-input {
        width: 100%;
    }

    .yt-result-thumb-wrap,
    .yt-result-thumb {
        width: 80px;
        height: 45px;
    }

    .yt-scan-header {
        flex-wrap: wrap;
    }

    .yt-scan-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .yt-clip-list-section h4 {
        font-size: clamp(0.7rem, 1.6vw, 0.8rem);
    }

    .yt-actions {
        gap: clamp(4px, 1vw, 6px);
    }

    .yt-actions .btn {
        font-size: clamp(0.6rem, 2vw, 0.7rem);
        padding: clamp(5px, 1vw, 7px) clamp(8px, 2vw, 10px);
    }

    .yt-disclaimer {
        font-size: clamp(0.6rem, 1.8vw, 0.72rem);
        padding: clamp(8px, 1.5vw, 10px);
    }

    .yt-stepper {
        padding: 8px 10px;
    }

    .yt-step-label {
        font-size: 0.6rem;
    }

    .yt-step-num {
        width: 18px;
        height: 18px;
        font-size: 0.55rem;
    }

    .yt-step {
        padding: 3px 6px;
        gap: 4px;
    }

    .yt-step-line {
        flex: 0 0 10px;
    }
}

/* ============================================
   Auto-detect Scan UI
   ============================================ */
.yt-autodetect-section {
    border-top: 1px solid var(--color-surface-light);
    padding-top: var(--space-sm);
}

/* ── Manual Transcription UI ── */
.yt-manual-transcribe {
    margin-top: var(--space-sm);
    padding: 12px;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: var(--radius-sm);
    background: rgba(124, 58, 237, 0.05);
}

.yt-manual-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.yt-manual-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    flex: 1;
    min-width: 150px;
}

.yt-manual-input {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-sm);
    background: var(--color-navy);
    color: var(--color-text);
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 8px;
}

.yt-manual-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.5;
}

.yt-manual-input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15);
}

.yt-autodetect-header {
    display: flex;
    justify-content: center;
}

.btn-scan {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--color-text-muted, #ccc) !important;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.btn-scan:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

.yt-spin-icon {
    display: inline-block;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    flex-shrink: 0;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.yt-scan-results {
    margin-top: 0;
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-md);
    background: var(--color-navy);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.yt-scan-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-surface-light);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.yt-scan-header svg:first-child {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
    flex-shrink: 0;
}

.yt-scan-header-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.yt-scan-header-top {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
}

.yt-scan-header-detail {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    opacity: 0.7;
    white-space: nowrap;
}

.yt-scan-actions {
    display: flex;
    gap: var(--space-xs);
    margin-left: auto;
    flex-shrink: 0;
}

.yt-scan-sub {
    padding: 6px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.yt-asr-badge {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(234, 179, 8, 0.2);
    color: var(--color-gold);
    font-size: 0.7rem;
    border-radius: 4px;
    vertical-align: middle;
}

/* Source badges for scan results */
.yt-source-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

.yt-source-captions {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.yt-source-auto-captions {
    background: rgba(234, 179, 8, 0.2);
    color: var(--color-gold);
}

.yt-scan-instructions {
    width: 100%;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1.3;
}

.yt-scan-instructions strong {
    color: var(--color-gold);
}

.yt-sg-time-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.yt-sg-time-row label {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.yt-sg-time-row input[type="number"] {
    width: 65px;
    padding: 3px 5px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    background: var(--color-surface);
    border: 1px solid var(--color-surface-light);
    border-radius: 4px;
    color: var(--color-text);
    text-align: center;
}

.yt-sg-time-row input[type="number"]:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15);
}

/* Hide number spinners for cleaner look */
.yt-sg-time-row input[type="number"]::-webkit-inner-spin-button,
.yt-sg-time-row input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.5;
}

.btn-sg-preview {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 50%;
    color: #a855f7;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.btn-sg-preview:hover {
    background: rgba(168, 85, 247, 0.3);
    border-color: #a855f7;
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

.btn-sg-preview:active {
    transform: scale(0.95);
}

.yt-suggestion-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) transparent;
    -webkit-overflow-scrolling: touch;
}

.yt-suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 10px 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-surface-light);
    cursor: pointer;
    transition: var(--transition-fast);
    overflow: visible;
}

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

.yt-suggestion-item:hover {
    background: var(--color-surface-light);
}

.yt-sg-check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    accent-color: #7C3AED;
    flex-shrink: 0;
    cursor: pointer;
}

.yt-sg-num-edit {
    width: 48px;
    height: 36px;
    min-height: 36px;
    text-align: center;
    background: linear-gradient(135deg, #7C3AED, #a855f7);
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    cursor: text;
    -moz-appearance: textfield;
    appearance: textfield;
    margin-top: 2px;
}

.yt-sg-num-edit::-webkit-inner-spin-button,
.yt-sg-num-edit::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.yt-sg-num-edit:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
}

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

.yt-sg-text {
    font-size: clamp(0.7rem, 1.6vw, 0.8rem);
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yt-sg-meta {
    font-size: clamp(0.6rem, 1.2vw, 0.7rem);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.yt-sg-meta b {
    color: var(--color-gold);
}

/* ── Timeline Scrubber ── */
.yt-sg-timeline {
    position: relative;
    margin-top: 6px;
    margin-bottom: 14px;
    padding: 4px 0 14px;
}

.yt-sg-timeline-bar {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    cursor: pointer;
}

.yt-sg-timeline-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #7C3AED, #a855f7);
    border-radius: 3px;
    pointer-events: none;
}

.yt-sg-handle {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: ew-resize;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: box-shadow 0.15s, transform 0.15s;
}

.yt-sg-handle-start {
    background: #7C3AED;
}

.yt-sg-handle-end {
    background: var(--color-gold);
}

.yt-sg-handle:hover {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
}

.yt-sg-handle:active {
    transform: translate(-50%, -50%) scale(1.4);
}

.yt-sg-call-marker {
    position: absolute;
    top: -6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-gold);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
}

.yt-sg-tl-label {
    position: absolute;
    bottom: 0;
    font-size: 0.6rem;
    font-family: 'Oswald', sans-serif;
    color: var(--color-text-muted);
    line-height: 1;
}

.yt-sg-tl-label.tl-start {
    left: 0;
}

.yt-sg-tl-label.tl-end {
    right: 0;
}

/* Confidence badges */
.yt-conf-badge {
    font-size: 0.7rem;
    flex-shrink: 0;
    line-height: 1;
}

/* Low confidence items are visually dimmed */
.yt-sg-low {
    opacity: 0.6;
    border-left: 2px solid rgba(239, 68, 68, 0.4);
}

.yt-sg-low:hover {
    opacity: 0.9;
}

/* Stats bar in scan header */
.yt-scan-stats {
    display: inline;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.yt-scan-empty {
    text-align: center;
    padding: var(--space-lg);
    color: var(--color-text-muted);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
}

.yt-scan-empty strong {
    display: block;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.yt-scan-empty p {
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    margin: 0;
}


.btn-share {
    background: linear-gradient(135deg, #059669, #34d399) !important;
    border-color: #34d399 !important;
    color: white !important;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.btn-share:hover {
    background: linear-gradient(135deg, #34d399, #6ee7b7) !important;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.4) !important;
}

.yt-share-output {
    margin-top: var(--space-sm);
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.yt-share-link {
    flex: 1;
    padding: clamp(6px, 1vw, 8px);
    font-family: monospace;
    font-size: clamp(0.65rem, 1.4vw, 0.75rem);
    background: var(--color-navy);
    border: 2px solid var(--color-gold-dark);
    border-radius: var(--radius-md);
    color: var(--color-gold);
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-share-link:focus {
    outline: none;
    border-color: var(--color-gold);
}

/* ============================================
   Disclaimer
   ============================================ */
.yt-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: clamp(10px, 2vw, 14px);
    margin-top: var(--space-md);
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: var(--radius-md);
    font-size: clamp(0.7rem, 1.5vw, 0.78rem);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.yt-disclaimer svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-gold);
}

.yt-disclaimer strong {
    color: var(--color-gold);
}

.about-disclaimer {
    background: rgba(234, 179, 8, 0.06);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-md) !important;
}

.about-disclaimer h4 {
    color: var(--color-gold) !important;
}

.about-disclaimer p {
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.about-disclaimer p:last-child {
    margin-bottom: 0;
}

.about-disclaimer a {
    color: var(--color-gold);
    text-decoration: underline;
}

/* ============================================
   Community Feed Panel
   ============================================ */

/* Overlay backdrop */
.comm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.comm-overlay.show {
    display: block;
    pointer-events: none;
}

/* Panel - slides from right */
.comm-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: min(400px, 92vw);
    height: 100vh;
    height: 100dvh;
    background: var(--color-surface);
    border-left: 1px solid var(--color-surface-light);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
    overflow: hidden;
    visibility: hidden;
}

.comm-panel.open {
    right: 0;
    visibility: visible;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
}

/* Header */
.comm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #1E293B;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.comm-header h2 {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-gold);
    letter-spacing: 0.04em;
}

.comm-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.comm-close:hover {
    color: var(--color-text);
}

/* Tabs */
.comm-tabs-header {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #1E293B;
}

.comm-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

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

.comm-tab.active {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold);
    background: linear-gradient(to bottom, transparent, rgba(217, 119, 6, 0.05));
    font-weight: 600;
}

/* Content Area */
.comm-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.comm-view {
    display: none;
    animation: fadeIn 0.3s ease;
}

.comm-view.active {
    display: block;
}

.comm-desc {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Form Styles */
.comm-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comm-form label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: -8px;
}

.comm-form input[type="text"] {
    width: 100%;
    padding: 12px;
    background: var(--color-surface-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.comm-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
}

.comm-btn-primary {
    margin-top: 10px;
    padding: 12px;
    background: var(--color-gold);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.comm-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.comm-btn-primary:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.comm-btn-secondary {
    margin-top: 10px;
    padding: 12px;
    background: var(--color-surface-light);
    color: var(--color-text);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.comm-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Checkbox / Agreements */
.comm-agreements {
    margin-top: 4px;
}

.comm-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1.4;
    position: relative;
}

.comm-checkbox-label input[type="checkbox"] {
    /* Hide actual checkbox but keep it accessible */
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 2px 0 0 0;
    cursor: pointer;
    accent-color: var(--color-gold);
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    float: none !important;
    flex-shrink: 0;
}

/* Result Box */
.comm-result {
    margin-top: 24px;
    padding: 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-md);
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.comm-result-success {
    color: #10b981;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm-link-group {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.comm-link-group input {
    flex: 1;
    background: var(--color-surface);
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--color-gold);
}

.comm-link-group button {
    padding: 0 12px;
    background: var(--color-surface-light);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    font-size: 1.2rem;
}

.comm-link-group button:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: white;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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



/* Report Button */
.comm-report-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0.5;
    transition: var(--transition-fast);
    margin-left: auto;
}

.comm-report-btn:hover {
    opacity: 1;
    color: var(--color-red);
    background: rgba(239, 68, 68, 0.08);
}

/* Upload Section */
.comm-upload {
    border-top: 1px solid var(--color-surface-light);
    padding: 14px 16px;
    background: var(--color-surface);
    flex-shrink: 0;
}

.comm-upload h3 {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.comm-upload-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comm-input {
    background: var(--color-bg);
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--color-text);
    font-family: 'Be Vietnam Pro', sans-serif;
    transition: var(--transition-fast);
}

.comm-input:focus {
    border-color: var(--color-gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15);
}

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

.comm-upload-form .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    padding: 8px;
}

/* Empty State */
.comm-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-muted);
}

.comm-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.comm-empty p {
    font-size: 0.85rem;
    margin: 0;
}

/* ── Contribute Tab Styles ── */
.comm-tab {
    font-size: clamp(0.72rem, 1.8vw, 0.85rem);
}

.comm-form-row {
    display: flex;
    gap: 12px;
}

.comm-form-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comm-select {
    padding: 10px 12px;
    background: var(--color-surface-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.85rem;
    font-family: 'Be Vietnam Pro', sans-serif;
    cursor: pointer;
    transition: var(--transition-fast);
    appearance: auto;
}

.comm-select:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
}

.comm-select-sm {
    padding: 6px 8px;
    font-size: 0.78rem;
    min-width: 100px;
}

.comm-textarea {
    width: 100%;
    padding: 12px;
    background: var(--color-surface-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: 'Be Vietnam Pro', sans-serif;
    resize: vertical;
    min-height: 66px;
    transition: var(--transition-fast);
}

.comm-textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
}

.comm-textarea-wrap {
    position: relative;
}

.comm-char-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.comm-agreements {
    margin-top: -4px;
}

.comm-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

.comm-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--color-gold);
    flex-shrink: 0;
}

.comm-divider {
    height: 1px;
    background: var(--color-surface-light);
    margin: 20px 0;
}

.comm-browse-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comm-browse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.comm-browse-header h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-gold);
}

.comm-rao-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.comm-empty-state {
    text-align: center;
    padding: 24px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.comm-rao-card {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    transition: var(--transition-fast);
}

.comm-rao-card:hover {
    border-color: rgba(217, 119, 6, 0.3);
    background: rgba(255, 255, 255, 0.02);
}

.comm-rao-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.comm-rao-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    background: linear-gradient(135deg, #7C3AED, #a855f7);
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

.comm-rao-category {
    font-size: 0.68rem;
    padding: 2px 6px;
    background: rgba(217, 119, 6, 0.15);
    color: var(--color-gold);
    border-radius: 3px;
    font-weight: 500;
}

.comm-rao-author {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-left: auto;
}

.comm-rao-time {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    opacity: 0.7;
}

.comm-rao-phrase {
    font-size: 0.85rem;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: 6px;
}

.comm-rao-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm-rao-apply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.comm-rao-apply:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.5);
}

.comm-rao-report {
    display: inline-flex;
    align-items: center;
    padding: 4px 6px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0.4;
    transition: var(--transition-fast);
    margin-left: auto;
}

.comm-rao-report:hover {
    opacity: 1;
    color: var(--color-red);
}

.comm-load-more {
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    margin-top: 4px;
}

/* Mobile responsive */
@media (max-width: 575px) {
    .comm-panel {
        width: 100vw;
        right: -100vw;
    }

    .comm-form-row {
        flex-direction: column;
        gap: 8px;
    }
}

/* ============================================
   Toast Notification System
   ============================================ */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: min(380px, 90vw);
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-surface-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    font-size: 0.85rem;
    color: var(--color-text);
    pointer-events: auto;
    animation: toastIn 0.3s ease-out;
    line-height: 1.4;
    backdrop-filter: blur(12px);
}

.toast.toast-out {
    animation: toastOut 0.25s ease-in forwards;
}

.toast-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-msg {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.toast-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    margin-left: 4px;
    flex-shrink: 0;
}

.toast-close:hover {
    color: var(--color-text);
}

.toast.toast-success {
    border-left: 3px solid #22c55e;
}

.toast.toast-error {
    border-left: 3px solid var(--color-red);
}

.toast.toast-warning {
    border-left: 3px solid var(--color-gold);
}

.toast.toast-info {
    border-left: 3px solid var(--color-sky);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* ============================================
   Skeleton Loading (Community Packs)
   ============================================ */
.skeleton-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--color-surface-light);
}

.skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
            var(--color-surface-light) 25%,
            rgba(255, 255, 255, 0.08) 37%,
            var(--color-surface-light) 63%);
    background-size: 400% 100%;
    animation: skeletonShimmer 1.4s ease infinite;
}

.skeleton-line.w60 {
    width: 60%;
}

.skeleton-line.w80 {
    width: 80%;
}

.skeleton-line.w40 {
    width: 40%;
}

@keyframes skeletonShimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ============================================
   Mobile Header - More Menu Dropdown
   ============================================ */
.header-more-dropdown {
    display: none;
}

@media (max-width: 575px) {

    /* Hide secondary buttons and show More menu */
    .header-more-dropdown {
        display: block;
        position: relative;
    }

    .header-secondary-btn {
        display: none !important;
    }

    .header-more-menu {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        background: var(--color-surface);
        border: 1px solid var(--color-surface-light);
        border-radius: var(--radius-md);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        padding: 6px;
        z-index: 1000;
        min-width: 160px;
        max-width: calc(100vw - 16px);
        animation: fadeUp 0.2s ease-out;
    }

    .header-more-menu.show {
        display: flex;
        flex-direction: column;
    }

    .header-more-menu .btn-icon {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        font-size: 0.75rem;
        color: var(--color-text);
        border-radius: var(--radius-sm);
        min-width: auto;
        width: 100%;
        justify-content: flex-start;
        cursor: pointer;
    }

    .header-more-menu .btn-icon:hover {
        background: var(--color-surface-light);
    }

    .header-more-menu .btn-icon span {
        font-family: 'Be Vietnam Pro', sans-serif;
        font-weight: 500;
        cursor: pointer;
    }

    .header-more-menu .font-size-controls {
        display: flex;
        gap: 4px;
        padding: 4px 12px;
    }

    .header-more-menu .font-size-controls .btn-icon {
        padding: 6px 10px;
        min-width: auto;
        cursor: pointer;
    }
}

/* ============================================
   UI PRO MAX OVERRIDES
   ============================================ */
h1,
h2,
h3,
.brand-logo {
    font-family: 'Oswald', sans-serif !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Glassmorphism Panels */
/* Solid Panels now use iOS Materials (Blur) */
.right-panel,
.modal-content,
.current-number-section,
.funny-call,
.history-section,
.settings-section,
.yt-editor-content {
    background: rgba(15, 23, 42, 0.85);
    /* Translucent Navy */
    backdrop-filter: blur(20px);
    /* iOS Blur */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Community panel — lighter background, not dark glassmorphism */
.comm-panel {
    background: #1E293B;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.left-panel {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Modern Buttons with Neon Glow — iOS min touch target */
.btn {
    min-height: 44px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    touch-action: manipulation;
    /* Touch Optimization */
}

.btn-primary {
    background: var(--color-sunset);
    /* Flat Color */
    box-shadow: 0 4px 15px rgba(217, 119, 6, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(217, 119, 6, 0.4);
    filter: brightness(1.1);
}

.btn-primary:active {
    transform: scale(0.97);
}

/* Secondary Button - Glass */
.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-secondary.active {
    background: var(--color-gold);
    border-color: var(--color-gold-light);
    color: var(--color-navy);
}

/* Neon Board Active State */
.number-cell {
    font-family: 'Righteous', cursive;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bouncy */
    border: 1px solid rgba(255, 255, 255, 0.03);
    background: rgba(255, 255, 255, 0.02);
}

.number-cell.active {
    background: var(--color-sunset) !important;
    /* Flat Color */
    box-shadow: 0 0 25px var(--color-gold);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.15) !important;
    z-index: 20;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.number-cell.recent {
    background: rgba(234, 88, 12, 0.15);
    border-color: var(--color-sunset);
    color: var(--color-sunset-light);
    box-shadow: inset 0 0 10px rgba(234, 88, 12, 0.1);
}

/* Form Elements - iOS Style */
/* iOS Switch Toggle for Checkboxes */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 50px;
    height: 30px;
    background: var(--color-surface-light);
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type="checkbox"]:checked {
    background: var(--color-gold);
    /* Top Gun Gold Accent */
}

input[type="checkbox"]:checked::after {
    transform: translateX(20px);
}

/* Reset: Community panel checkboxes — normal checkbox, not toggle */
.comm-panel input[type="checkbox"] {
    appearance: checkbox;
    -webkit-appearance: checkbox;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    accent-color: var(--color-gold);
}

.comm-panel input[type="checkbox"]::after {
    content: none;
}

input[type="text"],
input[type="number"],
select,
textarea {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    color: var(--color-text);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    /* iOS Standard Input Size (Prevents Zoom) */
    transition: all 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
    background: rgba(15, 23, 42, 0.7);
    outline: none;
}

/* Refined Legal Footer */
.legal-footer {
    opacity: 0.6;
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    text-align: center;
    width: 100%;
}

/* Toast Icons - SVG Data URIs (No Emojis) */
.toast {
    padding-left: 3rem !important;
    position: relative;
    backdrop-filter: blur(12px);
}

.toast::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.toast.toast-success::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.toast.toast-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
}

.toast.toast-warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

.toast.toast-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

/* Ensure Cursor Pointer */
button,
.btn,
.number-cell,
.setting-item input[type="range"],
.setting-item input[type="checkbox"],
select {
    cursor: pointer;
}

/* Old grid layout removed — now using single-column layout defined below */

/* Full Width Groups */
.group-quick,
.group-data,
.group-legal {
    grid-column: 1 / -1;
}

/* Data Management Grid */
.mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.mode-grid .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
}

.toggle-row.full-width {
    grid-column: 1 / -1;
    margin-bottom: 8px;
}

.setting-group {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-group h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    color: var(--color-gold);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.setting-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setting-slider-compact label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: var(--color-text-secondary);
}

.slider-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-wrapper input {
    flex: 1;
}

.slider-wrapper span {
    font-family: monospace;
    color: var(--color-gold);
    width: 40px;
    text-align: right;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.btn-link {
    background: none;
    border: none;
    text-decoration: underline;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-link:hover {
    color: var(--color-gold) !important;
}

/* Community Panel z-index handled below */

.comm-overlay {
    z-index: 9994;
}

/* Settings Modal Header Fix */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

.modal-header h3 {
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 200ms ease;
}

.modal-close:hover {
    color: var(--color-red);
}

/* Responsive Stack for Mobile only (< 576px) */
@media (max-width: 575px) {

    /* iOS Modal Bottom Sheet for Mobile */
    .modal {
        align-items: flex-end;
        padding: 0;
    }

    .modal-content,
    .comm-panel,
    .settings-section {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        max-height: 90vh;
        max-height: 90dvh;
        overflow-y: auto;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        animation: slideUp 0.3s ease-out;
    }

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

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

/* FINAL OVERRIDES FOR FULL SCREEN FIT */
body {
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}

.container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Desktop: restore padding for breathing room */
@media (min-width: 951px) {
    body {
        padding: clamp(8px, 1.5vh, 16px) !important;
    }

    .right-panel {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        height: 100%;
    }

    .number-board-section {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .number-board {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
}

/* Mobile/Tablet: minimal padding handled by container */
@media (max-width: 950px) {
    body {
        padding: 0 !important;
    }

    .container {
        padding: clamp(3px, 0.5vw, 8px) !important;
    }
}

/* Ensure no legacy constraints limit width on desktop */
@media (min-width: 1000px) {
    .container {
        max-width: 1800px !important;
        margin: 0 auto !important;
    }
}

.btn-ticket {
    background: var(--color-gold);
    /* Top Gun Gold */
    border: 1px solid var(--color-gold-dark);
    color: var(--color-navy) !important;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.2);
}

.btn-ticket:hover {
    background: var(--color-gold-light);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
    /* Gold Glow */
    transform: translateY(-2px);
    color: var(--color-navy) !important;
}

.about-modal {
    max-width: 800px !important;
    /* Wider Modal */
    width: 90% !important;
}

.modal-content.about-modal {
    padding: 24px;
    /* More padding */
}

/* Brand Logo Styling */
.header h1.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: clamp(24px, 5vw, 42px);
    height: clamp(24px, 5vw, 42px);
    fill: var(--color-gold);
    filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.5));
}

/* iOS Inset Grouped List Style */
.history-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.history-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-item:first-child {
    border-top-left-radius: 12px;
}

/* COMPACT HISTORY (Horizontal Bubbles) */
.history-section {
    margin-top: auto;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.history-section h2 {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}

.history {
    display: flex;
    flex-direction: row;
    /* Horizontal */
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.history-item {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Override List Styles */
    padding: 0 !important;
    margin: 0 !important;
}

.history-item:first-child {
    background: var(--color-gold);
    color: var(--color-navy);
    border-color: var(--color-gold);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
    transform: scale(1.1);
    /* Slightly bigger */
}

/* HUGE BOARD TITLE - REDUCED for Hierarchy */
.number-board-section h2 {
    font-size: clamp(1rem, 2vw, 1.5rem) !important;
    /* Smaller than App Name */
    font-family: 'Oswald', sans-serif;
    color: var(--color-gold);
    text-align: center;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

/* BIGGER BRAND LOGO */
.header h1.brand-logo {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800;
    letter-spacing: 1px;
}

/* FORCE STANDARD CHECKBOX (Not Toggle) */
.comm-agreements input[type="checkbox"],
#commTosCheckbox {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    accent-color: var(--color-gold);
    cursor: pointer;
    position: static !important;
    opacity: 1 !important;
}

.comm-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Remove any toggle pseudo-elements */
.comm-checkbox-label::before,
.comm-checkbox-label::after,
.comm-agreements label::before,
.comm-agreements label::after {
    display: none !important;
}

/* SETTINGS / ABOUT MODAL SCROLLBAR */
.modal-content,
.settings-modal-content .modal-body,
.about-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.3) transparent;
}

.modal-content::-webkit-scrollbar,
.settings-modal-content .modal-body::-webkit-scrollbar,
.about-modal::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-track,
.settings-modal-content .modal-body::-webkit-scrollbar-track,
.about-modal::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb,
.settings-modal-content .modal-body::-webkit-scrollbar-thumb,
.about-modal::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.3);
    border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb:hover,
.settings-modal-content .modal-body::-webkit-scrollbar-thumb:hover,
.about-modal::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.5);
}

/* SUB-MODALS: Must appear ABOVE Settings (z-index: 9990) */
#phraseModal,
#ytEditorModal,
#aboutModal,
#historyModal,
#gameDetailModal,
#qrModal,
#ticketModal,
#confirmModal,
#tosModal {
    z-index: 9995 !important;
}

/* Community Panel above Settings */
.comm-panel {
    z-index: 9995;
}

/* TOS Modal Content */
.tos-content {
    max-width: 480px;
    text-align: center;
}

.tos-content .tos-body p {
    margin-bottom: 8px;
    color: var(--color-text-muted);
}

.tos-content .tos-body p strong {
    color: var(--color-text);
}

/* ═══════════════════════════════════════════════════
   SETTINGS MODAL — Reorganized Single Hub
   ═══════════════════════════════════════════════════ */

.settings-modal-content {
    max-width: 520px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

.settings-modal-content .modal-header {
    flex-shrink: 0;
}

.settings-modal-content .modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 0;
}

.settings-container {
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.setting-group {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}

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

.setting-group h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--color-text-muted, #aaa);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.h4-icon {
    flex-shrink: 0;
    opacity: 0.7;
}

.setting-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Slider compact */
.setting-slider-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-slider-compact label {
    font-size: 0.8rem;
    color: var(--color-text-muted, #aaa);
}

.slider-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-wrapper input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-surface-light, #334155);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.slider-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-gold, #fbbf24);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-top: -6px;
}

.slider-wrapper span {
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
    color: var(--color-gold, #fbbf24);
}

/* Form select */
.form-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    cursor: pointer;
    color-scheme: dark;
}

.form-select option {
    background: var(--color-surface);
    color: var(--color-text);
}

[data-theme="light"] .form-select {
    color-scheme: light;
}

[data-theme="light"] .form-select option {
    background: #FFFFFF;
    color: #0F172A;
}

/* Toggle row */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text, #f8fafc);
}

.toggle-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-gold, #fbbf24);
}

/* Actions grid (3 buttons) */
.setting-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.setting-actions-grid .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Appearance row */
.setting-appearance-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.setting-appearance-row .btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    font-size: 0.8rem;
}

.font-size-controls {
    display: flex;
    gap: 4px;
}

.font-size-controls .btn-font {
    padding: 8px 12px;
    font-weight: 700;
    font-size: 0.8rem;
    min-width: 36px;
}

/* Collapsible sections */
.setting-collapsible {
    cursor: default;
}

.setting-collapsible summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.setting-collapsible summary::-webkit-details-marker {
    display: none;
}

.setting-collapsible summary::after {
    content: '▸';
    font-size: 0.75rem;
    transition: transform 0.2s;
    color: var(--color-text-muted, #aaa);
    margin-left: auto;
    flex-shrink: 0;
}

.setting-collapsible[open] summary::after {
    transform: rotate(90deg);
}

/* Setting input */
.setting-input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
}

.setting-label-sm {
    font-size: 0.8rem;
    color: var(--color-text-muted, #aaa);
}

.setting-status {
    font-size: 0.75rem;
    min-height: 18px;
    color: var(--color-text-muted, #aaa);
}

.setting-help {
    font-size: 0.75rem;
    color: var(--color-text-muted, #aaa);
}

.setting-help summary {
    cursor: pointer;
}

.setting-help ol {
    margin: 8px 0;
    padding-left: 20px;
    line-height: 1.6;
}

/* About compact */
.setting-about-content {
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.setting-about-content .version {
    font-size: 0.75rem;
    color: var(--color-text-muted, #aaa);
    margin-bottom: 6px;
}

.about-author {
    margin-top: 10px;
}

.about-author .social-links {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.about-author .social-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--color-text-muted, #aaa);
    text-decoration: none;
    transition: color 0.2s;
}

.about-author .social-link:hover {
    color: var(--color-gold, #fbbf24);
}

/* Donate compact */
.donate-methods-compact {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.donate-methods-compact .donate-note {
    font-size: 0.8rem;
    color: var(--color-text-muted, #aaa);
    margin-bottom: 8px;
}

.donate-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.85rem;
}

.donate-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.7rem;
    color: white;
    flex-shrink: 0;
}

.donate-badge.momo {
    background: #a50064;
}

.donate-badge.bank {
    background: #0066b3;
}

.btn-copy-sm {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
}

.btn-copy-sm:hover {
    opacity: 1;
    color: var(--color-gold);
}

.donate-methods-compact .donate-name {
    font-size: 0.75rem;
    color: var(--color-text-muted, #aaa);
    margin-top: 4px;
}

/* Footer */
.setting-footer {
    text-align: center;
    padding-top: 12px;
}

.setting-footer .btn-link {
    font-size: 0.75rem;
    color: var(--color-text-muted, #aaa);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.setting-copyright {
    font-size: 0.65rem;
    color: var(--color-text-muted, #666);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME — Modal & Settings overrides
   ═══════════════════════════════════════════════════ */

/* Modal overlay softer in light */
[data-theme="light"] .modal {
    background: rgba(100, 116, 139, 0.5);
}

/* Modal content: white bg, dark text, softer border */
[data-theme="light"] .modal-content {
    background: #FFFFFF;
    color: #0F172A;
    border-color: var(--color-gold);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Modal header */
[data-theme="light"] .modal-header {
    border-bottom-color: var(--color-border);
}

[data-theme="light"] .modal-close {
    color: #64748B;
}

[data-theme="light"] .modal-close:hover {
    color: #0F172A;
}

/* Setting groups */
[data-theme="light"] .setting-group {
    border-bottom-color: var(--color-border);
}

[data-theme="light"] .setting-group h4 {
    color: #475569;
}

/* SVG icons in headers */
[data-theme="light"] .h4-icon {
    opacity: 0.6;
    color: #475569;
}

/* Slider */
[data-theme="light"] .slider-wrapper input[type="range"] {
    background: #E2E8F0;
}

/* Form select */
[data-theme="light"] .form-select {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #0F172A;
}

/* Toggle text */
[data-theme="light"] .toggle-row {
    color: #0F172A;
}

/* Labels */
[data-theme="light"] .setting-slider-compact label {
    color: #475569;
}

[data-theme="light"] .setting-label-sm {
    color: #475569;
}

/* Buttons in settings */
[data-theme="light"] .setting-actions-grid .btn,
[data-theme="light"] .setting-appearance-row .btn,
[data-theme="light"] .font-size-controls .btn-font {
    background: #F1F5F9;
    color: #0F172A;
    border: 1px solid #CBD5E1;
}

[data-theme="light"] .setting-actions-grid .btn:hover,
[data-theme="light"] .setting-appearance-row .btn:hover,
[data-theme="light"] .font-size-controls .btn-font:hover {
    background: #E2E8F0;
}

/* Active theme button */
[data-theme="light"] .setting-appearance-row .btn:first-child {
    background: var(--color-gold);
    color: #fff;
    border-color: var(--color-gold);
}

/* Inputs */
[data-theme="light"] .setting-input {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #0F172A;
}

/* Footer */
[data-theme="light"] .setting-footer .btn-link {
    color: #475569;
}

[data-theme="light"] .setting-copyright {
    color: #94A3B8;
}

/* Collapsible arrow */
[data-theme="light"] .setting-collapsible summary::after {
    color: #64748B;
}

/* Scrollbar for light */
[data-theme="light"] .settings-modal-content .modal-body {
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}

[data-theme="light"] .settings-modal-content .modal-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
}

[data-theme="light"] .settings-modal-content .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6);
}

/* Other modals in light mode */
[data-theme="light"] .phrase-modal-content,
[data-theme="light"] .history-modal-content {
    background: #FFFFFF;
    color: #0F172A;
}

[data-theme="light"] .phrase-modal-content .modal-header,
[data-theme="light"] .history-modal-content .modal-header {
    background: #F8FAFC;
    border-bottom-color: var(--color-border);
}

/* Donate section in light mode */
[data-theme="light"] .donate-links a {
    color: #0F172A;
}

[data-theme="light"] .about-version {
    color: #475569;
}


/* ═══════════════════════════════════════════════════
   LIGHT THEME — Global Input & Form Overrides
   ═══════════════════════════════════════════════════ */

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: #F8FAFC;
    border: 1px solid #CBD5E1;
    color: #0F172A;
    backdrop-filter: none;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    background: #FFFFFF;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #94A3B8;
}

/* Light mode: component backgrounds */
[data-theme="light"] .modal-content,
[data-theme="light"] .current-number-section,
[data-theme="light"] .funny-call,
[data-theme="light"] .history-section,
[data-theme="light"] .settings-section,
[data-theme="light"] .yt-editor-content {
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: #E2E8F0;
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME — Task 2: Number Board & Main Components
   ═══════════════════════════════════════════════════ */

/* Number cells - uncalled */
[data-theme="light"] .number-cell {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #475569;
}

/* Number cells - called (keep sunset orange) */
[data-theme="light"] .number-cell.called {
    background: var(--color-sunset);
    color: white;
    border-color: var(--color-sunset-light);
}

/* Number cells - active override */
[data-theme="light"] .number-cell.active {
    background: var(--color-sunset);
    color: white;
}

/* Number cells - recent */
[data-theme="light"] .number-cell.recent {
    background: rgba(234, 88, 12, 0.1);
    border-color: var(--color-sunset);
    color: #9A3412;
}

/* Number board section */
[data-theme="light"] .number-board-section {
    background: #FFFFFF;
    border-color: #E2E8F0;
}

/* Current number section */
[data-theme="light"] .current-number-section {
    background: #FFFFFF;
    border-color: var(--color-gold-dark);
}

/* Funny call text */
[data-theme="light"] .funny-call {
    background: #FFFFFF;
    color: #0F172A;
    border-color: #E2E8F0;
}

/* Display wrapper */
[data-theme="light"] .display-wrapper {
    background: transparent;
}

/* Stats section */
[data-theme="light"] .stats-section {
    background: #FFFFFF;
    border-color: #E2E8F0;
}

[data-theme="light"] .stats-section span {
    color: #475569;
}

/* History section */
[data-theme="light"] .history-section {
    background: #FFFFFF;
    border-color: #E2E8F0;
}

/* History items */
[data-theme="light"] .history-item {
    background: #F1F5F9;
    color: #0F172A;
    border-color: #CBD5E1;
}

/* History item - most recent (keep sunset orange) */
[data-theme="light"] .history-item:first-child {
    background: var(--color-sunset);
    color: white;
    border-color: var(--color-sunset-light);
}

/* Controls section buttons */
[data-theme="light"] .btn-secondary {
    background: #E0F2FE;
    color: #0369A1;
    border-color: #7DD3FC;
}

[data-theme="light"] .btn-secondary:hover {
    background: #BAE6FD;
}

[data-theme="light"] .btn-danger {
    background: transparent;
    border-color: var(--color-gold);
    color: var(--color-gold);
}

[data-theme="light"] .btn-danger:hover {
    background: var(--color-gold);
    color: #FFFFFF;
}

/* Left panel */
[data-theme="light"] .left-panel {
    background: transparent;
}

/* Right panel */
[data-theme="light"] .right-panel {
    background: transparent;
}


/* ═══════════════════════════════════════════════════
   LIGHT THEME — Task 3: Modals & Panels
   ═══════════════════════════════════════════════════ */

/* Ticket modal */
[data-theme="light"] .ticket-modal {
    background: #FFFFFF;
    color: #0F172A;
}

[data-theme="light"] .ticket-box {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #0F172A;
}

[data-theme="light"] .ticket-box:focus {
    border-color: var(--color-gold);
}

[data-theme="light"] .ticket-box.filled {
    background: #F1F5F9;
    border-color: var(--color-gold-dark);
    color: #0F172A;
}

[data-theme="light"] .ticket-result {
    background: #F1F5F9;
    color: #0F172A;
    border: 1px solid #E2E8F0;
}

/* YouTube editor */
[data-theme="light"] .yt-editor-content {
    background: #FFFFFF;
    color: #0F172A;
}

[data-theme="light"] .yt-scan-results {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

[data-theme="light"] .yt-section-toggle {
    color: #475569;
}

[data-theme="light"] .yt-section-toggle:hover {
    color: #0F172A;
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .yt-manual-clip-section {
    border-color: #E2E8F0;
}

[data-theme="light"] .yt-clip-list-section {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

[data-theme="light"] .yt-disclaimer {
    color: #64748B;
    background: rgba(0, 0, 0, 0.02);
    border-top-color: #E2E8F0;
}

/* Community panel */
[data-theme="light"] .comm-panel {
    background: #FFFFFF;
    color: #0F172A;
    border-left: 1px solid #E2E8F0;
}

[data-theme="light"] .comm-header {
    border-bottom-color: #E2E8F0;
}

[data-theme="light"] .comm-header h2 {
    color: #0F172A;
}

[data-theme="light"] .comm-close {
    color: #64748B;
}

[data-theme="light"] .comm-close:hover {
    color: #0F172A;
}

[data-theme="light"] .comm-tabs-header {
    border-bottom-color: #E2E8F0;
}

[data-theme="light"] .comm-tab {
    color: #64748B;
}

[data-theme="light"] .comm-tab:hover {
    color: #0F172A;
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .comm-tab.active {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold);
    background: rgba(217, 119, 6, 0.05);
}

[data-theme="light"] .comm-content {
    background: #FFFFFF;
}

[data-theme="light"] .comm-form input[type="text"] {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #0F172A;
}

[data-theme="light"] .comm-form label {
    color: #475569;
}

[data-theme="light"] .comm-desc {
    color: #475569;
}

[data-theme="light"] .comm-btn-secondary {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #0F172A;
}

[data-theme="light"] .comm-btn-secondary:hover {
    background: #E2E8F0;
    border-color: #94A3B8;
}

[data-theme="light"] .comm-select {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #0F172A;
}

[data-theme="light"] .comm-link-group input {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #0F172A;
}

[data-theme="light"] .comm-link-group button {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #0F172A;
}

[data-theme="light"] .comm-link-group button:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: white;
}

[data-theme="light"] .comm-checkbox-label {
    color: #475569;
}

[data-theme="light"] .comm-result {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .comm-btn-primary {
    color: #0F172A;
}

/* About modal */
[data-theme="light"] .about-modal {
    background: #FFFFFF;
    color: #0F172A;
}

[data-theme="light"] .about-section {
    background: #F1F5F9;
    color: #0F172A;
    border: 1px solid #E2E8F0;
}

[data-theme="light"] .about-section h4 {
    color: var(--color-gold-dark);
}

[data-theme="light"] .about-section p {
    color: #475569;
}


/* ═══════════════════════════════════════════════════
   LIGHT THEME — Task 4: Toast System
   ═══════════════════════════════════════════════════ */

[data-theme="light"] .toast {
    background: #FFFFFF;
    color: #0F172A;
    border-color: #E2E8F0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    backdrop-filter: none;
}

[data-theme="light"] .toast-close {
    color: #94A3B8;
}

[data-theme="light"] .toast-close:hover {
    color: #0F172A;
}

/* Keep colored left borders for toast types */
[data-theme="light"] .toast.toast-success {
    border-left: 3px solid #22c55e;
}

[data-theme="light"] .toast.toast-error {
    border-left: 3px solid var(--color-red);
}

[data-theme="light"] .toast.toast-warning {
    border-left: 3px solid var(--color-gold);
}

[data-theme="light"] .toast.toast-info {
    border-left: 3px solid var(--color-sky);
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME — Task 6: Cursor & Hover Fixes
   ═══════════════════════════════════════════════════ */

/* Ensure all interactive elements have pointer cursor */
.social-link,
.affiliate-link {
    cursor: pointer;
}

/* Hover transitions for community panel buttons */
[data-theme="light"] .comm-tab:hover {
    transition: all 200ms ease;
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME — Task 7: Checkboxes/Toggles in Settings
   ═══════════════════════════════════════════════════ */

/* iOS toggle switch - light mode */
[data-theme="light"] input[type="checkbox"] {
    background: #CBD5E1;
    border-color: #94A3B8;
}

[data-theme="light"] input[type="checkbox"]:checked {
    background: var(--color-gold);
    border-color: var(--color-gold);
}

[data-theme="light"] input[type="checkbox"]::after {
    background: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Range slider - light mode */
[data-theme="light"] .slider-wrapper input[type="range"] {
    background: #E2E8F0;
}

[data-theme="light"] .slider-wrapper input[type="range"]::-webkit-slider-thumb {
    background: var(--color-gold);
}

[data-theme="light"] .slider-wrapper input[type="range"]::-moz-range-thumb {
    background: var(--color-gold);
}

/* Form select - light mode */
[data-theme="light"] .form-select {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #0F172A;
}

/* Donate section in light mode */
[data-theme="light"] .donate-method {
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #0F172A;
}

[data-theme="light"] .donate-method:hover {
    background: #F1F5F9;
    border-color: var(--color-gold);
}

[data-theme="light"] .affiliate-link {
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #0F172A;
}

[data-theme="light"] .affiliate-link:hover {
    background: #F1F5F9;
    border-color: var(--color-sunset);
}

/* Light mode scrollbar for about modal */
[data-theme="light"] .about-modal::-webkit-scrollbar-track {
    background: #F1F5F9;
}

[data-theme="light"] .about-modal::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
}

[data-theme="light"] .about-modal::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6);
}


/* Brand text + slogan */
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    min-width: 0;
}

.brand-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 800;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: clamp(1.1rem, 2.8vw, 1.8rem);
    text-shadow: 0 1px 0 var(--color-gold-dark);
    white-space: nowrap;
}

.brand-slogan {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: clamp(0.6rem, 1.3vw, 0.78rem);
    font-weight: 500;
    font-style: italic;
    color: var(--color-gold-light);
    letter-spacing: 0.25em;
    text-transform: none;
    text-shadow: none;
    white-space: nowrap;
    opacity: 0.85;
    margin-top: 2px;
}

/* ── Header accent line ── */
.header {
    border-bottom: 2px solid var(--color-gold);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15);
}

/* ── Google AdSense Container ── */
.ad-container {
    text-align: center;
    overflow: hidden;
    border-radius: 12px;
}

.ad-container:empty,
.ad-container ins:empty {
    display: none;
}

/* Single ad below “5 Số Gần Nhất” — non-intrusive */
.ad-below-history {
    margin-top: 12px;
    max-height: 120px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .ad-container {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .ad-below-history {
    border-color: rgba(0, 0, 0, 0.06);
}

@media (max-width: 600px) {
    .ad-below-history {
        max-height: 100px;
    }
}

/* ── Header brand layout — centered ── */
.header h1.brand-logo {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.2vw, 10px);
    font-size: inherit;
    text-shadow: none;
    white-space: normal;
    overflow: visible;
    margin: 0;
}

/* Keep spacer to center the brand group */
.header::before {
    content: '';
    flex: 1;
    min-width: 0;
}

/* Remove decorative lines that conflict with logo layout */
.header h1::before,
.header h1::after {
    display: none;
}

/* Logo image — larger, matched to brand-name */
.header .logo-img {
    height: clamp(48px, 8vh, 68px);
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* Header actions — push to right */
.header-actions {
    margin-left: auto;
}

/* ── Mobile adjustments ── */
@media (max-width: 600px) {
    .brand-name {
        font-size: clamp(0.85rem, 4vw, 1.15rem);
    }

    .brand-slogan {
        font-size: clamp(0.4rem, 1.8vw, 0.52rem);
    }

    .header .logo-img {
        height: clamp(36px, 6vh, 48px);
    }

    .header h1.brand-logo {
        gap: 5px;
    }
}

@media (max-width: 400px) {
    .brand-slogan {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════
   TASK 4 — Settings Toggle Fix + Slider Fix + YT Editor UX
   ═══════════════════════════════════════════════════ */

/* ── Fix: Toggle-row checkbox → proper iOS mini-toggle ── */
.toggle-row input[type="checkbox"] {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: var(--color-surface-light, #334155);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
    accent-color: unset;
}

.toggle-row input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-row input[type="checkbox"]:checked {
    background: var(--color-gold, #fbbf24);
}

.toggle-row input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}

.toggle-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ── Fix: Slider thumb proportion — slightly smaller ── */
.slider-wrapper input[type="range"]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
}

.slider-wrapper input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: var(--color-gold, #fbbf24);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ── YouTube Editor Modal — Better UX with sections ── */

/* Tighter body spacing */
.yt-editor-body {
    gap: var(--space-sm);
}

/* Section labels for visual hierarchy */
.yt-clip-management {
    border-top: 2px solid var(--color-surface-light);
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
}

.yt-clip-management h4 {
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: var(--color-gold);
}

/* Clip list — constrained height with scroll */
.yt-clip-list {
    max-height: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) transparent;
    border: none;
    border-radius: 0;
    padding: 4px;
}

.yt-clip-list:empty::before {
    content: 'Chưa có clip nào';
    display: block;
    text-align: center;
    padding: 16px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    opacity: 0.6;
}

/* Actions row — cleaner layout */
.yt-clip-management .yt-actions {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-surface-light);
}

/* Share output section */
.yt-share-output {
    margin-top: var(--space-sm);
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.yt-share-link {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    padding: 8px 10px;
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-share-output .btn {
    flex-shrink: 0;
    min-width: 56px;
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Import dropdown menu */
.yt-sidebar-actions {
    position: relative;
}

.yt-import-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface);
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-sm);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
    z-index: 20;
    min-width: 180px;
    padding: 4px;
    margin-bottom: 4px;
}

.yt-import-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 0.78rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 200ms;
    text-align: left;
}

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

[data-theme="light"] .yt-import-menu {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .yt-import-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Backup section — tighter */
.yt-backup-section {
    margin-top: var(--space-sm);
}

/* (Duplicate .yt-disclaimer removed — consolidated at line ~5570) */

/* ── Light mode overrides for Task 4 ── */
[data-theme="light"] .toggle-row input[type="checkbox"] {
    background: #CBD5E1;
    border-color: #94A3B8;
}

[data-theme="light"] .toggle-row input[type="checkbox"]::after {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .toggle-row input[type="checkbox"]:checked {
    background: var(--color-gold, #f59e0b);
    border-color: var(--color-gold, #f59e0b);
}

[data-theme="light"] .yt-clip-list {
    border-color: #E2E8F0;
}

/* (Duplicate light .yt-disclaimer removed — consolidated at line ~7659) */

[data-theme="light"] .yt-clip-management {
    border-top-color: #E2E8F0;
}

[data-theme="light"] .yt-clip-management .yt-actions {
    border-top-color: #E2E8F0;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {

    .toggle-row input[type="checkbox"],
    .toggle-row input[type="checkbox"]::after {
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════
   SETTINGS MODAL — Refined iOS-Inspired Design
   ═══════════════════════════════════════════════════ */

/* Modal container */
.settings-modal-content {
    max-width: 480px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-modal-content .modal-header {
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
}

.settings-modal-content .modal-header h3 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}

/* Scrollable body */
.settings-modal-content .settings-container {
    padding: 14px 20px;
}

/* ── Setting groups — iOS inset grouped cards ── */
.settings-modal-content .setting-group {
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 12px;
    padding: 10px 6px;
    margin-bottom: 10px;
}

.settings-modal-content .setting-group:last-child {
    margin-bottom: 0;
}

/* Section titles — small label above card */
.settings-modal-content .setting-group h4 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px 2px;
    padding: 0;
    border-bottom: none;
}

.settings-modal-content .setting-group h4 .h4-icon {
    width: 13px;
    height: 13px;
    opacity: 0.5;
}

/* ── Sliders — clean horizontal rows ── */
.settings-modal-content .setting-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-modal-content .setting-slider-compact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.settings-modal-content .setting-slider-compact label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.settings-modal-content .slider-wrapper {
    flex: 1;
    gap: 8px;
}

.settings-modal-content .slider-wrapper input[type="range"] {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.settings-modal-content .slider-wrapper input[type="range"]::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -7px;
    background: var(--color-gold);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.settings-modal-content .slider-wrapper span {
    font-size: 0.78rem;
    min-width: 34px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: var(--color-gold);
}

/* ── Toggle — refined pill switch ── */
.settings-modal-content .toggle-row {
    margin-top: 10px;
    gap: 10px;
    font-size: 0.8rem;
    padding: 6px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.settings-modal-content .toggle-row span {
    color: var(--color-text);
    font-weight: 500;
}

.settings-modal-content .toggle-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.settings-modal-content .toggle-row input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.settings-modal-content .toggle-row input[type="checkbox"]:checked {
    background: var(--color-gold);
}

.settings-modal-content .toggle-row input[type="checkbox"]:checked::after {
    transform: translateX(20px);
}

/* ── Form select — refined ── */
.settings-modal-content .form-select {
    padding: 9px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
    font-weight: 500;
    transition: border-color 200ms ease;
}

.settings-modal-content .form-select:focus {
    border-color: var(--color-gold);
    outline: none;
}

/* ── Action buttons — touch-friendly pills ── */
.settings-modal-content .setting-actions-grid {
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.settings-modal-content .setting-actions-grid .btn {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--color-text);
    font-size: 0.82rem;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: 'Be Vietnam Pro', sans-serif;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    transition: all 200ms ease;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.settings-modal-content .setting-actions-grid .btn svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    flex-shrink: 0;
}

.settings-modal-content .setting-actions-grid .btn:hover {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-gold);
    transform: none;
    box-shadow: none;
}

.settings-modal-content .setting-actions-grid .btn:hover svg {
    opacity: 1;
    stroke: var(--color-gold);
}

/* ── Appearance row — touch-friendly pills ── */
.settings-modal-content .setting-appearance-row {
    gap: 8px;
}

.settings-modal-content .setting-appearance-row .btn {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--color-text);
    font-size: 0.82rem;
    border-radius: 10px;
    font-family: 'Be Vietnam Pro', sans-serif;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    padding: 10px 16px;
    min-height: 44px;
    transition: all 200ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.settings-modal-content .setting-appearance-row .btn svg {
    flex-shrink: 0;
}

.settings-modal-content .setting-appearance-row .btn:hover {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-gold);
    transform: none;
    box-shadow: none;
}

.settings-modal-content .font-size-controls .btn-font {
    min-width: 44px;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 600;
}

/* ── Collapsible about section ── */
.settings-modal-content .setting-collapsible {
    cursor: default;
}

.settings-modal-content .setting-collapsible summary {
    padding: 0;
    font-size: 0.8rem;
    cursor: pointer;
    list-style: none;
}

.settings-modal-content .setting-collapsible summary::-webkit-details-marker {
    display: none;
}

.settings-modal-content .setting-collapsible summary h4 {
    display: inline;
    margin-bottom: 0;
}

.settings-modal-content .setting-collapsible[open] summary h4 {
    margin-bottom: 10px;
}

/* ── Footer ── */
.settings-modal-content .setting-footer {
    background: transparent;
    text-align: center;
    padding: 8px 0 4px;
}

/* ═══════════════════════════════════════════════════
   SETTINGS — Light Mode
   ═══════════════════════════════════════════════════ */
[data-theme="light"] .settings-modal-content {
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .settings-modal-content .setting-group {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .settings-modal-content .toggle-row input[type="checkbox"] {
    background: #CBD5E1;
}

[data-theme="light"] .settings-modal-content .toggle-row input[type="checkbox"]:checked {
    background: var(--color-gold);
}

[data-theme="light"] .settings-modal-content .toggle-row input[type="checkbox"]::after {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .settings-modal-content .slider-wrapper input[type="range"] {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .settings-modal-content .slider-wrapper input[type="range"]::-webkit-slider-thumb {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .settings-modal-content .form-select {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1E293B;
}

[data-theme="light"] .settings-modal-content .setting-actions-grid .btn,
[data-theme="light"] .settings-modal-content .setting-appearance-row .btn {
    background: rgba(0, 0, 0, 0.04);
    color: #334155;
}

[data-theme="light"] .settings-modal-content .setting-actions-grid .btn:hover,
[data-theme="light"] .settings-modal-content .setting-appearance-row .btn:hover {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-gold-dark);
}

[data-theme="light"] .settings-modal-content .toggle-row {
    border-top-color: rgba(0, 0, 0, 0.04);
}

/* ============================================
   PREMIUM MODAL OVERRIDES — Settings & Video Editor
   ============================================ */

/* ── Settings Modal — Touch-Friendly ── */
.settings-modal-content {
    max-width: 520px !important;
    width: 94vw;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Settings Title: gold uppercase Oswald */
.settings-modal-content .modal-header h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
}

/* Body container — balanced padding */
.settings-modal-content .settings-container {
    padding: 14px 20px;
}

/* Setting groups — roomy touch-friendly cards */
.settings-modal-content .setting-group {
    padding: 10px 6px;
    margin-bottom: 10px;
}

/* Section titles */
.settings-modal-content .setting-group h4 {
    font-size: 0.72rem;
    margin: 0 0 10px 2px;
}

/* Slider rows — more gap */
.settings-modal-content .setting-row {
    gap: 12px;
}

.settings-modal-content .setting-slider-compact {
    gap: 10px;
    min-height: 36px;
}

.settings-modal-content .setting-slider-compact label {
    font-size: 0.82rem;
}

/* Slider thumb — larger for touch */
.settings-modal-content .slider-wrapper input[type="range"] {
    height: 6px;
    cursor: pointer;
}

.settings-modal-content .slider-wrapper input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.settings-modal-content .slider-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--color-gold);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.settings-modal-content .slider-wrapper input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
}

.settings-modal-content .slider-wrapper input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--color-gold);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Toggle — touch-friendly spacing */
.settings-modal-content .toggle-row {
    margin-top: 10px;
    padding: 8px 0 4px;
    font-size: 0.84rem;
}

/* Select — taller for touch */
.settings-modal-content .form-select {
    padding: 12px 14px;
    font-size: 0.84rem;
    min-height: 44px;
}

/* ═══════════════════════════════════════════════════
   VIDEO EDITOR MODAL — 2-Column Layout
   ═══════════════════════════════════════════════════ */

/* Wider modal for 2-column */
.yt-editor-content {
    max-width: min(1000px, 94vw) !important;
    width: 94vw;
    height: 96vh;
    height: 96dvh;
    max-height: 96vh;
    max-height: 96dvh;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}

.yt-editor-content .modal-header {
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.yt-editor-content .modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Editor body — contains yt-layout (sidebar + main) */
/* Editor body — contains yt-layout (sidebar + main) */
.yt-editor-content .yt-editor-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

/* ── 2-Column Grid ── */
.yt-editor-columns {
    display: grid;
    grid-template-columns: 340px 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── LEFT COLUMN: Search Results ── */
.yt-col-left {
    display: flex;
    flex-direction: column;
    border-right: 2px solid rgba(255, 255, 255, 0.08);
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) transparent;
}

/* ── RIGHT COLUMN: Preview & Tools (consolidated) ── */
.yt-col-right {
    background: rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) transparent;
    position: relative;
}

.yt-col-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-surface-light);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
}

.yt-col-label svg {
    opacity: 0.5;
    width: 12px;
    height: 12px;
}

/* Override search results to fill left column */
.yt-col-left .yt-search-results {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: none !important;
    padding: 0;
    display: block !important;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) transparent;
    border-radius: 0;
    border: none;
}

/* Search result items — stack vertically, full-width in column */
.yt-col-left .yt-result-item {
    padding: 8px 10px;
    gap: 8px;
}

.yt-col-left .yt-result-thumb-wrap,
.yt-col-left .yt-result-thumb {
    width: 96px;
    height: 54px;
}

.yt-col-left .yt-result-title {
    font-size: 0.78rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.yt-col-left .yt-result-meta {
    font-size: 0.68rem;
}

/* Empty state in search results */
.yt-col-left .yt-empty-state {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.6;
}

/* (Duplicate .yt-col-right removed — consolidated above) */

/* Right column empty state */
.yt-right-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--color-text-muted);
    text-align: center;
}

.yt-right-empty p {
    font-size: 0.82rem;
    margin: 0;
    opacity: 0.5;
}

/* Preview, scan, clip sections inside right column */
.yt-col-right .yt-preview-collapse,
.yt-col-right .yt-manual-clip-section {
    flex-shrink: 0;
    border: none;
    border-bottom: 1px solid var(--color-surface-light);
    border-radius: 0;
    margin-top: 0;
    overflow: visible;
    background: transparent;
}

.yt-col-right .yt-scan-results {
    /* scan results must be able to shrink so they don't overflow */
    flex-shrink: 1;
    border: none;
    border-bottom: 1px solid var(--color-surface-light);
    border-radius: 0;
    margin-top: 0;
    overflow-y: auto;
    background: transparent;
}

.yt-preview-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    cursor: pointer;
    background: var(--color-surface-light);
    transition: color 200ms ease, background 200ms ease;
    list-style: none;
}

.yt-preview-toggle::-webkit-details-marker {
    display: none;
}

.yt-preview-toggle:hover {
    color: var(--color-gold);
}

.yt-preview-toggle svg:first-child {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.yt-preview-chevron {
    margin-left: auto;
    width: 16px;
    height: 16px;
    stroke-width: 3;
    transition: transform 200ms ease;
}

.yt-preview-collapse[open] .yt-preview-chevron,
.yt-manual-clip-section[open] .yt-preview-chevron {
    transform: rotate(180deg);
}

.yt-col-right .yt-preview-wrapper {
    padding: 12px;
    flex-shrink: 0;
    border-radius: 0;
    border: none;
}

.yt-col-right .yt-scan-section {
    padding: 4px 12px;
}

.yt-col-right .yt-scan-results {
    padding: 0;
    flex: 1 1 0;
    min-height: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.yt-col-right .yt-manual-clip-section summary {
    padding: 0;
}

.yt-col-right .yt-manual-clip-section .yt-manual-clip-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Clip Management — Full-width section below columns ── */
.yt-editor-body>.yt-clip-management {
    padding: 16px 20px;
    border-top: 1px solid var(--color-surface-light);
    background: rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

/* Disclaimer — full width bottom */
.yt-editor-content .yt-disclaimer {
    flex-shrink: 0;
    border-top: 1px solid var(--color-surface-light);
    font-size: 0.72rem;
    padding: 8px 16px;
    margin-top: auto;
    background: var(--color-surface);
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--color-surface-light);
}

/* ── Mobile: Single Column Fallback ── */
@media (max-width: 768px) {
    .yt-editor-content {
        max-width: 96vw !important;
    }

    .yt-editor-columns {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .yt-col-left {
        border-right: none;
        border-bottom: 1px solid var(--color-surface-light);
        max-height: 220px;
    }

    .yt-col-right {
        padding: 12px;
    }

    .yt-right-empty {
        padding: 24px 16px;
    }

    .yt-editor-body>.yt-clip-management {
        padding: 12px;
    }

    .yt-sg-time-row {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .yt-sg-time-row label {
        flex: 0 0 auto;
    }

    .btn-sg-preview {
        margin-top: 4px;
    }
}

/* ══ Paste Transcript UI ══ */
.btn-paste-transcript {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-paste-transcript:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.yt-paste-instructions {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.6;
}

.yt-paste-instructions ol {
    margin: 6px 0 0 0;
    padding-left: 20px;
}

.yt-paste-instructions li {
    margin-bottom: 4px;
}

.yt-paste-instructions a {
    color: #818cf8;
    text-decoration: underline;
}

#ytPasteInput {
    width: 100%;
    resize: vertical;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    min-height: 100px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#ytPasteInput:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2);
}

#ytPasteInput::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#ytParsePasteBtn {
    padding: 10px 20px;
    min-height: 44px;
}

/* ═══════════════════════════════════════════════════
   API KEY SETTINGS — Third-party subtitle APIs
   ═══════════════════════════════════════════════════ */

.setting-api-content {
    padding: 4px 0 0;
}

.api-warning-box {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text);
    text-align: left;
}

.api-warning-box>svg {
    flex-shrink: 0;
    margin-top: 2px;
    stroke: #f59e0b;
}

.api-warning-box ul {
    list-style: disc;
    padding-left: 16px;
}

.api-warning-box li {
    margin-bottom: 2px;
}

.api-provider-section {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    text-align: left;
}

.api-provider-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.88rem;
}

.api-badge-free {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}

.api-desc {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin: 0 0 10px;
    line-height: 1.4;
}

.api-key-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.api-key-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.api-key-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text);
}

.api-btn {
    padding: 7px 14px;
    border: none;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: inherit;
}

.api-btn:hover {
    opacity: 0.85;
}

.api-btn-save {
    background: var(--color-gold);
    color: #000;
}

.api-btn-clear {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

[data-theme="light"] .api-key-toggle {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--color-text-muted);
}

[data-theme="light"] .api-key-toggle:hover {
    background: rgba(0, 0, 0, 0.08);
}

.api-key-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
    transition: all 0.2s ease;
}

.api-key-input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.api-key-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-family: 'Be Vietnam Pro', sans-serif;
}

.api-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.api-status {
    font-size: 0.74rem;
    font-weight: 500;
    margin-left: auto;
}

.api-status.saved {
    color: #22c55e;
}

.api-status.cleared {
    color: var(--color-text-muted);
}

.api-status.error {
    color: #ef4444;
}

.api-register-link {
    display: inline-block;
    font-size: 0.76rem;
    color: #60a5fa;
    text-decoration: none;
    transition: color 0.2s;
}

.api-register-link:hover {
    color: #93bbfc;
    text-decoration: underline;
}

/* Light mode */
[data-theme="light"] .api-warning-box {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.25);
}

[data-theme="light"] .api-provider-section {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .api-key-input {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: #1e293b;
}

[data-theme="light"] .api-key-input::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

/* ── Light mode: btn-close (cross-modal consistency) ── */
[data-theme="light"] .btn-close {
    border-color: #CBD5E1;
    color: #64748B;
}

[data-theme="light"] .btn-close:hover {
    background: #F1F5F9;
    color: #0F172A;
    border-color: #94A3B8;
}

[data-theme="light"] .btn-close:focus {
    outline-color: var(--color-gold-dark);
}

/* ── Light mode: Top Bar buttons ── */
[data-theme="light"] .btn-icon {
    color: #475569;
}

[data-theme="light"] .btn-icon:hover {
    background: #E2E8F0;
    color: #0F172A;
}

/* ── Light mode: YT Editor panels ── */
[data-theme="light"] .yt-col-left {
    background: #F8FAFC;
    border-right-color: #E2E8F0;
}

[data-theme="light"] .yt-col-right {
    background: #F1F5F9;
}

[data-theme="light"] .yt-preview-collapse {
    border-bottom-color: #E2E8F0;
}

[data-theme="light"] .yt-preview-toggle:hover {
    color: var(--color-gold-dark);
}

[data-theme="light"] .yt-result-item {
    border-bottom-color: #E2E8F0;
}

[data-theme="light"] .yt-result-item:hover {
    background: #E2E8F0;
}

[data-theme="light"] .yt-result-item.selected {
    background: rgba(217, 119, 6, 0.1);
}

[data-theme="light"] .yt-clip-cell {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #64748B;
}

[data-theme="light"] .yt-clip-cell.has-clip {
    background: #DC2626;
    color: #FFFFFF;
    border-color: rgba(220, 38, 38, 0.5);
}

/* ── Light mode: More menu dropdown (mobile) ── */
[data-theme="light"] .header-more-menu {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #E2E8F0;
}


/* ═══════════════════════════════════════════════════
   MODAL RESPONSIVE — Mobile Fixes (Task 6)
   ═══════════════════════════════════════════════════ */

/* Body scroll lock when modal is open */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Mobile modal constraints — unified bottom-sheet with scroll */
@media (max-width: 575px) {

    .modal-content,
    .ticket-modal,
    .phrase-modal-content,
    .history-modal-content,
    .game-detail-content,
    .about-modal,
    .settings-modal-content,
    .qr-modal,
    .tos-content,
    .yt-editor-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 90vh;
        max-height: 90dvh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}