/* /all/timer/css.css
   CHECK & CALL TIMER — PRO UI (Dark/Light) + TV safe + Mobile + Premium Admin Panel
*/

/* =========================
   THEME TOKENS
   ========================= */
:root{
    /* Dark */
    --bg-top:#0f0b12;
    --bg-mid:#070812;
    --bg-bottom:#040515;

    --accent:#ff2e3b;
    --accent-soft:#ff5666;

    --text:#ffffff;
    --text-muted:rgba(255,255,255,.64);

    --card:#0b0b14;
    --card-2:#0f0f1a;
    --border:rgba(255,255,255,.12);

    --radius:18px;
    --pill:999px;

    --shadow:0 18px 60px rgba(0,0,0,.65);
    --shadow-soft:0 10px 26px rgba(0,0,0,.45);

    /* Layout sizing */
    --pad-x: 22px;
    --pad-y: 16px;
    --gap: 16px;

    --side-w: min(420px, 24vw);
    --timer-size: min(56vmin, 52vh, 540px);

    --chip-bg: rgba(255,46,59,.12);
    --chip-br: rgba(255,46,59,.32);

    --ring-bg: rgba(255,255,255,.12);
    --ring-glow: 0 0 46px rgba(255,80,110,.55);

    --legal-bg: rgba(13,13,22,.62);

    --panel-glass: rgba(15,15,26,.92);
    --panel-glass-2: rgba(10,10,18,.94);
}

html[data-theme="light"]{
    --bg-top:#ffffff;
    --bg-mid:#f6f7fb;
    --bg-bottom:#eef1f7;

    --accent:#7b0f1a;
    --accent-soft:#a41528;

    --text:#0b0e14;
    --text-muted:rgba(11,14,20,.62);

    --card:#ffffff;
    --card-2:#f7f8fd;
    --border:rgba(11,14,20,.14);

    --shadow:0 18px 60px rgba(11,14,20,.14);
    --shadow-soft:0 10px 26px rgba(11,14,20,.10);

    --chip-bg: rgba(123,15,26,.08);
    --chip-br: rgba(123,15,26,.22);

    --ring-bg: rgba(11,14,20,.12);
    --ring-glow: 0 0 26px rgba(123,15,26,.22);

    --legal-bg: rgba(255,255,255,.78);

    --panel-glass: rgba(255,255,255,.92);
    --panel-glass-2: rgba(248,249,253,.96);
}

/* =========================
   GLOBAL RESET
   ========================= */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--text);
    background: radial-gradient(circle at top, var(--bg-top) 0, var(--bg-mid) 40%, var(--bg-bottom) 100%);
    overflow:hidden;
}

/* =========================
   GLOBAL SCROLLBARS (PRO)
   ========================= */
/* Firefox */
*{
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) rgba(255,255,255,.06);
}
html[data-theme="light"] *{
    scrollbar-color: rgba(11,14,20,.22) rgba(11,14,20,.06);
}
/* WebKit */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{
    background: rgba(255,255,255,.05);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.16);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,0);
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.24); }
html[data-theme="light"] *::-webkit-scrollbar-track{ background: rgba(11,14,20,.05); }
html[data-theme="light"] *::-webkit-scrollbar-thumb{ background: rgba(11,14,20,.20); }
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{ background: rgba(11,14,20,.28); }
*::-webkit-scrollbar-corner{ background: transparent; }

/* =========================
   ROOT LAYOUT
   ========================= */
.root{
    width:100vw;
    height:100vh;
    height:100dvh;

    display:grid;
    grid-template-rows: auto 1fr auto auto;
    gap: var(--gap);

    padding:
            calc(var(--pad-y) + env(safe-area-inset-top))
            calc(var(--pad-x) + env(safe-area-inset-right))
            calc(var(--pad-y) + env(safe-area-inset-bottom))
            calc(var(--pad-x) + env(safe-area-inset-left));
}

/* =========================
   TOP BAR
   ========================= */
.top-bar{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    gap:12px;
    min-height:64px;
}

.top-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    justify-self:start;
}

.logo{
    width:48px;height:48px;
    object-fit:contain;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    box-shadow:var(--shadow-soft);
}

html[data-theme="light"] .logo{
    filter: brightness(0) saturate(100%)
    invert(12%) sepia(62%) saturate(5200%)
    hue-rotate(346deg) brightness(.95) contrast(1.06);
}

.club-title{
    font-weight:900;
    font-size:clamp(18px, 2.6vw, 44px);
    letter-spacing:.18em;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}

.top-center{
    justify-self:center;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.brand-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:var(--pill);
    background: rgba(255,255,255,.06);
    border:1px solid var(--border);
    box-shadow:var(--shadow-soft);
    white-space:nowrap;
}

.brand-pill .brand-dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--accent-soft);
    box-shadow: 0 0 14px rgba(255,86,102,.55);
}
html[data-theme="light"] .brand-pill .brand-dot{
    box-shadow: 0 0 14px rgba(123,15,26,.22);
}

.brand-pill .brand-text{
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:12px;
    color:var(--text);
}

.top-right{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.status-chip{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:var(--pill);
    background:var(--chip-bg);
    border:1px solid var(--chip-br);
    color:var(--accent-soft);
    font-weight:900;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;
}
.status-chip::before{
    content:"";
    width:10px;height:10px;border-radius:50%;
    background:var(--accent-soft);
    box-shadow: 0 0 14px rgba(255,86,102,.55);
}
html[data-theme="light"] .status-chip::before{
    box-shadow: 0 0 12px rgba(123,15,26,.22);
}

.status-chip.closed{
    background:rgba(255,255,255,.06);
    border-color:var(--border);
    color:var(--text-muted);
}
.status-chip.closed::before{
    background:rgba(255,255,255,.30);
    box-shadow:none;
}

.btn-top{
    padding:10px 14px;
    border-radius:var(--pill);
    border:1px solid var(--border);
    background:rgba(255,255,255,.06);
    color:var(--text-muted);
    font-size:12px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:var(--shadow-soft);
    z-index: 10;
}
.btn-top:hover{ color:var(--text); border-color:rgba(255,255,255,.22); }

/* =========================
   MAIN GRID
   ========================= */
.main{
    min-height:0;
    display:grid;
    grid-template-columns: var(--side-w) 1fr var(--side-w);
    align-items:center;
    gap: var(--gap);
}

.col-side{
    width:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.col-left{ justify-self:start; }
.col-right{ justify-self:end; }

.card{
    background: linear-gradient(180deg, var(--card-2), var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 14px 14px;
    min-width:0;
}

.kv{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}

.k{
    font-size:11px;
    font-weight:900;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--text-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.v{
    font-size: clamp(18px, 2.1vw, 34px);
    font-weight:1000;
    letter-spacing:.08em;
    font-variant-numeric: tabular-nums;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.v.small{
    font-size: clamp(16px, 1.8vw, 28px);
    letter-spacing:.06em;
}

.row-split{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    min-width:0;
}
.row-split .v{ min-width:0; }

/* =========================
   TIMER CENTER
   ========================= */
.col-center{
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.timer-wrap{
    width: var(--timer-size);
    height: var(--timer-size);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

#timer-ring{
    position:absolute;
    inset:0;
    transform:rotate(-90deg);
    filter: drop-shadow(var(--ring-glow));
}

.ring-bg{
    fill:none;
    stroke: var(--ring-bg);
    stroke-width: 8;
}
.ring-fg{
    fill:none;
    stroke: var(--accent);
    stroke-width: 11;
    stroke-linecap:round;
    transition: stroke-dashoffset .22s linear;
}

.timer-label{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:center;
    padding: 0 18px;
}

.timer-level{
    font-size:12px;
    font-weight:900;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--text-muted);
    white-space:nowrap;
}

.timer-value{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight:1000;
    letter-spacing:.10em;
    font-variant-numeric: tabular-nums;
    font-size: clamp(60px, 14vmin, 170px);
    line-height:1;
    color:var(--text);
}

/* =========================
   BLINDS
   ========================= */
.bottom{ min-height:0; }

.blinds-row{
    width:100%;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    align-items:stretch;
}

.blind-card{
    background: linear-gradient(180deg, var(--card-2), var(--card));
    border:1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--shadow);
    padding: 16px 16px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:120px;
    text-align:center;
}

.blind-card-main{
    border-color: var(--chip-br);
    box-shadow: 0 0 0 1px rgba(255,46,59,.14), var(--shadow);
}
html[data-theme="light"] .blind-card-main{
    box-shadow: 0 0 0 1px rgba(123,15,26,.10), var(--shadow);
}

.blind-label{
    font-size:12px !important;
    font-weight:900;
    letter-spacing:.30em;
    text-transform:uppercase;
    color:var(--text-muted);
}

.blind-value{
    font-size: clamp(30px, 5.8vw, 96px) !important;
    font-weight:1000;
    letter-spacing:.08em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-soft);
    line-height:1;
}

/* =========================
   LEGAL NOTE
   ========================= */
.legal-note{
    background: var(--legal-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    padding: 10px 14px;
    text-align:center;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing:.06em;
    color: var(--text-muted);
}

/* =========================
   CONTROL PANEL (Backdrops)
   ========================= */
.panel-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.62);
    opacity:0;
    pointer-events:none;
    transition:.18s ease;
    z-index:50;
}
@supports (backdrop-filter: blur(6px)){
    .panel-backdrop{ backdrop-filter: blur(6px); }
}
.panel-backdrop.visible{opacity:1;pointer-events:auto;}
.panel-backdrop.hidden{opacity:0;pointer-events:none;}

/* =========================
   CONTROL PANEL (Base)
   ========================= */
.control-panel{
    position:fixed;
    right:14px;
    top:14px;
    bottom:14px;
    width:min(760px, 92vw);

    background: linear-gradient(180deg, var(--panel-glass), var(--panel-glass-2));
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow: var(--shadow);

    transform:translateY(16px);
    opacity:0;
    pointer-events:none;
    transition:.18s ease;
    z-index:60;

    display:flex;
    flex-direction:column;
}

.control-panel.open{transform:translateY(0);opacity:1;pointer-events:auto;z-index: 1000;}
.control-panel.hidden{opacity:0;pointer-events:none;}

.panel-inner{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:16px;
    overflow:auto;
    z-index: 1111111111111111111;
}

.panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.panel-title{
    font-size:12px;
    font-weight:1000;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.panel-close{
    background:none;
    border:none;
    color:var(--text-muted);
    font-size:30px;
    cursor:pointer;
    line-height:1;
}

.panel-section{
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    border-radius: 16px;
    padding: 14px;
}
html[data-theme="light"] .panel-section{
    border-color: rgba(11,14,20,.10);
    background: rgba(11,14,20,.03);
}

.panel-section-title{
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:12px;
}

.panel-buttons{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}

.panel-btn{
    border-radius:var(--pill);
    border:1px solid var(--border);
    background:rgba(255,255,255,.06);
    padding:12px 14px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    cursor:pointer;
    color:var(--text);
}
.panel-btn:hover{ border-color: rgba(255,255,255,.22); }

.panel-btn-main{
    background: rgba(255,46,59,.86);
    border-color: rgba(255,46,59,.55);
    color:#fff;
}
html[data-theme="light"] .panel-btn-main{
    background: rgba(123,15,26,.90);
    border-color: rgba(123,15,26,.45);
}
.panel-btn-secondary{ background: rgba(255,255,255,.08); }
.panel-btn-danger{
    border-color: rgba(192,57,43,.55);
    color: rgba(255,107,107,.92);
}

.panel-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
    margin-bottom:10px;
}

.panel-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:11px;
    color:var(--text-muted);
}

.panel-field input{
    border-radius:var(--pill);
    border:1px solid var(--border);
    background:rgba(255,255,255,.06);
    color:var(--text);
    padding:11px 14px;
    font-size:13px;
    outline:none;
    font-variant-numeric: tabular-nums;
    transition: .15s ease;
}

.panel-field input:focus{
    border-color: rgba(255,46,59,.55);
    box-shadow: 0 0 0 4px rgba(255,46,59,.12);
}
html[data-theme="light"] .panel-field input:focus{
    border-color: rgba(123,15,26,.45);
    box-shadow: 0 0 0 4px rgba(123,15,26,.10);
}

.panel-break-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}

.panel-note{
    font-size:11px;
    color:var(--text-muted);
    opacity:.9;
    margin-top:6px;
}

/* rating list */
.rating-rules{display:flex;flex-direction:column;gap:6px;}
.rating-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:8px 0;
    font-size:12px;
}
html[data-theme="light"] .rating-row{ border-bottom-color: rgba(11,14,20,.10); }
.rating-row:last-child{border-bottom:none;}
.rating-place{opacity:.85;}
.rating-points{color:var(--accent-soft);font-weight:900;white-space:nowrap;}

/* =========================
   LEVELS EDITOR (PRO)
   ========================= */
.levels-editor{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    box-shadow:
            0 18px 50px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.06);

    overflow: auto;
    max-height: 52vh;
    scrollbar-gutter: stable both-edges;
    padding: 6px;
}

html[data-theme="light"] .levels-editor{
    background: linear-gradient(180deg, rgba(11,14,20,.04), rgba(11,14,20,.02));
    border-color: rgba(11,14,20,.12);
    box-shadow:
            0 16px 46px rgba(11,14,20,.12),
            inset 0 1px 0 rgba(255,255,255,.7);
}

.levels-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    min-width: 520px;
    table-layout: fixed;
}

.levels-table thead th{
    position: sticky;
    top: 0;
    z-index: 5;

    padding: 12px 12px;
    text-align: left;

    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);

    background: linear-gradient(180deg, rgba(18,18,30,.92), rgba(12,12,22,.86));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.levels-table thead th:first-child{ border-top-left-radius: 12px; }
.levels-table thead th:last-child{ border-top-right-radius: 12px; }

html[data-theme="light"] .levels-table thead th{
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,249,253,.88));
    border-bottom-color: rgba(11,14,20,.10);
}

.levels-table tbody td{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    vertical-align: middle;
}
html[data-theme="light"] .levels-table tbody td{
    border-bottom-color: rgba(11,14,20,.08);
}

.levels-table tbody tr:nth-child(odd){ background: rgba(255,255,255,.02); }
.levels-table tbody tr:hover{ background: rgba(255,46,59,.06); }
html[data-theme="light"] .levels-table tbody tr:nth-child(odd){ background: rgba(11,14,20,.02); }
html[data-theme="light"] .levels-table tbody tr:hover{ background: rgba(123,15,26,.06); }

.levels-table .lvl-col{ width: 56px; font-weight:1000; letter-spacing:.06em; color: var(--text); }
.levels-table th:nth-child(2), .levels-table td:nth-child(2){ width: 130px; }
.levels-table th:nth-child(3), .levels-table td:nth-child(3){ width: 130px; }
.levels-table th:nth-child(4), .levels-table td:nth-child(4){ width: 130px; }
.levels-table th:nth-child(5), .levels-table td:nth-child(5){ width: 96px; }

.levels-table input{
    width: 100%;
    height: 38px;

    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));

    color: var(--text);
    padding: 0 12px;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;

    outline: none;
    transition: .15s ease;
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06),
            0 10px 18px rgba(0,0,0,.18);
}

.levels-table input:hover{
    border-color: rgba(255,255,255,.22);
    transform: translateY(-1px);
}

.levels-table input:focus{
    border-color: rgba(255,46,59,.55);
    box-shadow:
            0 0 0 4px rgba(255,46,59,.14),
            inset 0 1px 0 rgba(255,255,255,.08),
            0 16px 26px rgba(0,0,0,.22);
    transform: translateY(-1px);
}

html[data-theme="light"] .levels-table input{
    border-color: rgba(11,14,20,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,248,253,.96));
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.8),
            0 10px 16px rgba(11,14,20,.08);
    color: rgba(11,14,20,.92);
}
html[data-theme="light"] .levels-table input:hover{ border-color: rgba(11,14,20,.22); }
html[data-theme="light"] .levels-table input:focus{
    border-color: rgba(123,15,26,.45);
    box-shadow:
            0 0 0 4px rgba(123,15,26,.10),
            inset 0 1px 0 rgba(255,255,255,.9),
            0 14px 22px rgba(11,14,20,.10);
}

.levels-table td:last-child input{ border-color: rgba(255,46,59,.18); }
html[data-theme="light"] .levels-table td:last-child input{ border-color: rgba(123,15,26,.18); }

/* =========================
   TV / LOW HEIGHT SAFETY
   ========================= */
@media (min-width: 901px) and (max-height: 820px){
    :root{
        --gap: 12px;
        --timer-size: min(54vmin, 46vh, 520px);
        --side-w: min(400px, 26vw);
    }
    .top-bar{ min-height: 56px; }
    .logo{ width:42px;height:42px; }
    .btn-top, .status-chip{ padding:8px 12px; font-size:11px; }
    .k{ font-size:10px; }
    .v{ font-size: clamp(16px, 1.9vw, 30px); }
    .timer-value{ font-size: clamp(54px, 12vmin, 150px); }
    .blind-card{ min-height: 104px; padding: 14px 14px 16px; }
    .blind-label{ font-size:11px !important; }
    .blind-value{ font-size: clamp(28px, 5.0vw, 84px) !important; }
}

@media (min-width: 901px) and (max-height: 720px){
    :root{
        --gap: 10px;
        --timer-size: min(50vmin, 42vh, 470px);
        --side-w: min(380px, 28vw);
    }
    .timer-value{ font-size: clamp(48px, 11vmin, 132px); }
    .blind-value{ font-size: clamp(26px, 4.6vw, 74px) !important; }
    .legal-note{ font-size:11px; }
}

/* Big TV (1080p fullscreen) — reduce padding & sizes */
@media (min-width: 1400px) and (min-height: 800px){
    :root{
        --pad-x: 14px;
        --pad-y: 10px;
        --gap: 12px;

        --side-w: min(360px, 20vw);
        --timer-size: min(48vmin, 44vh, 480px);
    }

    .top-bar{ min-height: 56px; }
    .logo{ width:40px; height:40px; }

    .club-title{
        font-size: clamp(16px, 1.9vw, 34px);
        letter-spacing: .14em;
    }

    .brand-pill{ padding: 8px 12px; }
    .brand-pill .brand-text{ font-size: 11px; letter-spacing: .12em; }

    .status-chip, .btn-top{
        padding: 8px 12px;
        font-size: 11px;
    }

    .card{ padding: 12px 12px; }
    .k{ font-size: 10px; }
    .v{ font-size: clamp(16px, 1.6vw, 28px); }
    .v.small{ font-size: clamp(14px, 1.4vw, 22px); }

    .timer-label{ gap: 10px; }
    .timer-level{ font-size: 11px; letter-spacing: .22em; }
    .timer-value{ font-size: clamp(52px, 11vmin, 140px); }

    .blind-card{
        min-height: 98px;
        padding: 12px 12px 14px;
        gap: 8px;
    }
    .blind-label{ font-size: 11px !important; }
    .blind-value{ font-size: clamp(26px, 4.6vw, 78px) !important; }

    .legal-note{
        font-size: 11px;
        padding: 8px 12px;
    }

    .control-panel{
        width: min(820px, 92vw);
    }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 900px){
    body{ overflow:auto; }

    .root{
        height:auto;
        min-height:100vh;
        min-height:100dvh;
        grid-template-rows: auto auto auto auto;

        padding:
                calc(12px + env(safe-area-inset-top))
                calc(14px + env(safe-area-inset-right))
                calc(14px + env(safe-area-inset-bottom))
                calc(14px + env(safe-area-inset-left));
        gap:12px;
    }

    .top-bar{
        grid-template-columns: 1fr;
        gap:10px;
        min-height:unset;
    }
    .top-left{ justify-self:start; }
    .top-center{ justify-self:start; }
    .top-right{ justify-self:start; }

    .main{
        grid-template-columns: 1fr;
        gap:12px;
        align-items:start;
    }
    .col-left, .col-right{ width:100%; }
    .col-right{ order: 3; }
    .col-center{ order: 2; }

    :root{ --timer-size: min(84vw, 420px); }

    .blinds-row{
        grid-template-columns: 1fr;
        gap:12px;
    }

    /* Mobile panel: almost fullscreen */
    .control-panel{
        left:0; right:0; top:auto; bottom:0;
        width:100vw;
        max-height: 94dvh;
        border-radius:22px 22px 0 0;
    }

    .panel-inner{
        padding:
                14px
                calc(14px + env(safe-area-inset-right))
                calc(18px + env(safe-area-inset-bottom))
                calc(14px + env(safe-area-inset-left));
        gap:14px;
    }

    /* sticky header inside panel */
    .panel-header{
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 10px 10px;
        margin: -6px -6px 8px -6px;
        border-radius: 16px;

        background: rgba(15,15,26,.88);
        border: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    html[data-theme="light"] .panel-header{
        background: rgba(255,255,255,.88);
        border-color: rgba(11,14,20,.10);
    }

    .panel-buttons{ grid-template-columns: 1fr; }
    .panel-btn{ padding: 13px 14px; font-size: 11px; }

    .levels-editor{ max-height: 56dvh; }
    .levels-table{ min-width: 560px; } /* горизонтальный скролл на мобиле — нормально */
}

@media (max-width: 420px){
    .btn-top, .status-chip{ font-size:10px; padding:8px 11px; }
    .brand-pill{ padding:8px 12px; }
    .brand-pill .brand-text{ font-size:11px; }
}
/* =========================
   ADDON BANNER (TV BIG)
   ========================= */

.addon-banner{
    position:absolute;
    left:50%;
    top: 70%;                 /* под кольцом, ближе к низу */
    transform: translateX(-50%);
    width: min(980px, 92vw);  /* оптимально под 1080p */
    padding: 22px 26px;
    border-radius: 22px;
    text-align:center;
    z-index: 80;

    background: linear-gradient(180deg, rgba(18,18,22,.82), rgba(10,10,14,.64));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 2px solid rgba(255, 80, 110, .42);
    box-shadow:
            0 22px 70px rgba(0,0,0,.65),
            0 0 0 1px rgba(255,255,255,.06) inset,
            0 0 64px rgba(255, 40, 70, .26);

    opacity: 0;
    filter: saturate(1.2);
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}

.addon-banner.is-on{
    opacity: 1;
    transform: translateX(-50%) scale(1);
    overflow:hidden;
    animation:
            addonPop .65s cubic-bezier(.2,.9,.2,1) both,
            addonGlow 1.15s ease-in-out infinite;
}

/* БОЛЬШОЙ, ЧИТАЕМЫЙ заголовок */
.addon-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 14px;

    padding: 16px 26px;
    border-radius: 999px;

    font-weight: 1000;
    letter-spacing: .20em;
    text-transform: uppercase;
    font-size: clamp(18px, 2.2vw, 30px);

    color: rgba(255,255,255,.98);
    background: radial-gradient(140% 220% at 50% 0%,
    rgba(255,110,140,.75) 0%,
    rgba(255,35,70,.92) 45%,
    rgba(140,10,30,.92) 100%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:
            0 16px 40px rgba(255, 40, 70, .22),
            0 0 0 1px rgba(0,0,0,.25) inset,
            0 0 34px rgba(255, 60, 90, .30);
    position: relative;
    overflow:hidden;
}

/* Подзаголовок — тоже крупнее */
.addon-sub{
    margin-top: 14px;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.25;
    color: rgba(255,255,255,.76);
    text-shadow: 0 10px 24px rgba(0,0,0,.65);
}

/* ОСТАВШЕЕСЯ ВРЕМЯ — СУПЕР КРУПНО */
#addon-left{
    display:inline-block;
    margin-left: 6px;

    font-weight: 1000;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;

    font-size: clamp(22px, 2.4vw, 34px);
    color: rgba(255,255,255,.98);

    background: rgba(255, 55, 85, .14);
    border: 2px solid rgba(255, 70, 110, .28);
    padding: 6px 14px;
    border-radius: 14px;
    box-shadow:
            0 18px 44px rgba(255, 40, 70, .18),
            0 0 28px rgba(255, 60, 90, .18);
}

/* Если последние 60 сек — прям “сирена” */
.addon-banner.is-urgent{
    border-color: rgba(255, 80, 110, .70);
    box-shadow:
            0 26px 90px rgba(0,0,0,.72),
            0 0 0 1px rgba(255,255,255,.08) inset,
            0 0 96px rgba(255, 40, 70, .40);
    animation:
            addonPop .65s cubic-bezier(.2,.9,.2,1) both,
            addonGlow .65s ease-in-out infinite;
}
.addon-banner.is-urgent .addon-badge{
    animation: badgePulse .55s ease-in-out infinite;
}

/* Очень большие ТВ/проектор — ещё больше */
@media (min-width: 1400px){
    .addon-banner{
        top: 68%;
        width: min(1200px, 92vw);
        padding: 26px 32px;
        border-radius: 26px;
    }
    .addon-sub{ font-size: 22px; }
    #addon-left{ font-size: 36px; }
}

/* Мобила — не перекрывать всё */
@media (max-width: 520px){
    .addon-banner{
        top: 74%;
        width: 94vw;
        padding: 14px 14px;
        border-radius: 16px;
    }
}
/* =========================
   PANEL SWITCH (Addon toggle)
   ========================= */

.panel-switch{
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    cursor: pointer;
    user-select: none;
}

html[data-theme="light"] .panel-switch{
    border-color: rgba(11,14,20,.10);
    background: rgba(11,14,20,.03);
}

.panel-switch input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* “тумблер” */
.panel-switch .switch-ui{
    width: 54px;
    height: 30px;
    border-radius: 999px;
    position: relative;
    flex: 0 0 auto;

    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06),
            0 10px 18px rgba(0,0,0,.18);

    transition: .18s ease;
}

html[data-theme="light"] .panel-switch .switch-ui{
    background: rgba(11,14,20,.06);
    border-color: rgba(11,14,20,.16);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.8),
            0 10px 16px rgba(11,14,20,.08);
}

/* “кнопка” внутри */
.panel-switch .switch-ui::after{
    content:"";
    position: absolute;
    top: 50%;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    transform: translateY(-50%);

    background: rgba(255,255,255,.92);
    box-shadow:
            0 10px 18px rgba(0,0,0,.25),
            inset 0 1px 0 rgba(255,255,255,.65);

    transition: .18s ease;
}

/* подсветка как “акцент” */
.panel-switch input:checked + .switch-ui{
    background: rgba(255,46,59,.18);
    border-color: rgba(255,46,59,.42);
    box-shadow:
            0 0 0 4px rgba(255,46,59,.10),
            0 16px 26px rgba(0,0,0,.22);
}

html[data-theme="light"] .panel-switch input:checked + .switch-ui{
    background: rgba(123,15,26,.12);
    border-color: rgba(123,15,26,.32);
    box-shadow:
            0 0 0 4px rgba(123,15,26,.08),
            0 14px 22px rgba(11,14,20,.10);
}

.panel-switch input:checked + .switch-ui::after{
    left: calc(100% - 4px - 22px);
}

/* текст */
.panel-switch .switch-text{
    margin: 0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--text);
    opacity: .92;
}

/* hover/focus */
.panel-switch:hover{
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.05);
}

html[data-theme="light"] .panel-switch:hover{
    border-color: rgba(11,14,20,.16);
    background: rgba(11,14,20,.04);
}

.panel-switch:has(input:focus-visible){
    box-shadow: 0 0 0 4px rgba(255,46,59,.12);
}

html[data-theme="light"] .panel-switch:has(input:focus-visible){
    box-shadow: 0 0 0 4px rgba(123,15,26,.10);
}