/* /demo/ — стилі демо-кабінета */
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
  --canvas:#06070b; --bg2:#08090f; --card:#0b0d14; --card2:#0e1119;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --t1:#e6e9f0; --t2:#b6becc; --t3:#8a93a6;
  --red:#e11d48; --red-soft:#ff8aa1; --cyan:#22d3ee; --cyan-glow:#67e8f9;
  --ok:#34d399; --warn:#f59e0b; --bad:#f85149;
  --mono:'JetBrains Mono',"Cascadia Mono",Consolas,ui-monospace,monospace;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:'Space Grotesk',system-ui,"Segoe UI",sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(225,29,72,.07), transparent 60%),
    radial-gradient(900px 420px at -10% 10%, rgba(34,211,238,.05), transparent 55%),
    var(--canvas);
  color:var(--t1); font-family:var(--sans); line-height:1.55;
}
a{color:var(--cyan-glow); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px; margin:0 auto; padding:0 16px 64px}

.navlink:focus-visible,.support-cta:focus-visible,
.mtop summary:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.mock-chip{font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--warn); border:1px dashed rgba(245,158,11,.45); border-radius:999px; padding:3px 10px; white-space:nowrap}
/* Мовна примітка для не-uk гостя — окремим рядком, що ПЕРЕНОСИТЬСЯ (у чіп не лізе:
   з uppercase+letter-spacing вона переливала рейку — зловив власник 2026-07-19). */
.mock-lang{margin:0 10px 10px; font-family:var(--mono); font-size:.58rem; color:var(--t3);
  letter-spacing:.04em; white-space:normal}

/* ── app-shell: рейка + контент ── */
.appshell{display:grid; grid-template-columns:clamp(224px,22vw,268px) minmax(0,1fr);
  gap:clamp(16px,3vw,28px); align-items:start}
.rail{position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  padding:16px 12px 16px 0; border-right:1px solid var(--line)}
.wordmark{display:flex; align-items:center; gap:9px; font-family:var(--display);
  font-weight:600; letter-spacing:-.01em; font-size:.98rem; padding:0 10px}
.wordmark svg{width:24px; height:24px; flex:none; filter:drop-shadow(0 4px 12px rgba(190,18,57,.45))}
.light-pill{display:flex; align-items:center; gap:8px; margin:14px 10px 6px; padding:8px 11px;
  border:1px solid rgba(52,211,153,.3); border-radius:999px;
  background:linear-gradient(180deg, rgba(52,211,153,.08), transparent)}
.light-pill .txt{font-size:.8rem; color:var(--t2); line-height:1.2}
.light-pill .ts{display:block; font-family:var(--mono); font-size:.62rem; color:var(--t3)}
.railnav{flex:1; overflow-y:auto; padding:8px 0; display:flex; flex-direction:column; gap:2px}
.grouplbl{font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--t3); padding:14px 12px 5px}
.navlink{display:flex; align-items:center; gap:10px; min-height:42px; padding:8px 12px;
  border-radius:10px; color:var(--t2); font-size:.95rem; font-weight:500; cursor:pointer;
  border:0; background:transparent; font-family:inherit; text-align:left; width:100%}
.navlink:hover{color:var(--t1); background:rgba(255,255,255,.03)}
.navlink[aria-current="page"]{color:var(--t1);
  background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(34,211,238,.03));
  box-shadow:inset 2px 0 0 var(--cyan)}
.navlink .soon-chip{margin-left:auto; font-family:var(--mono); font-size:.58rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--cyan-glow); border:1px solid rgba(34,211,238,.3); border-radius:999px; padding:1px 7px}
.railfoot{border-top:1px solid var(--line); padding:12px 10px 0}
.support-cta{display:block; width:100%; text-align:center; background:var(--red); color:#fff;
  font-family:var(--display); font-weight:500; border:0; border-radius:10px; padding:10px 14px;
  font-size:.95rem; cursor:pointer}
.support-cta:hover{background:#ec1f53}
.railfoot small{display:block; margin-top:9px; color:var(--t3); font-size:.68rem; text-align:center}

/* ── мобільна шапка ── */
.mtop{display:none}
@media (max-width:899px){
  .appshell{display:block}
  .rail{display:none}
  .mock-chip{flex:none; font-size:.56rem}
  /* УВАГА: без backdrop-filter — він робить containing block і ламає position:fixed шухляди */
  .mtop{display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:50;
    margin:0 -16px 14px; padding:10px 16px;
    background:rgba(8,9,15,.97); border-bottom:1px solid var(--line)}
  .row.click{min-height:44px}
  .backlink,.more{min-height:44px; display:inline-flex; align-items:center}
  .mtop .wordmark{padding:0; font-size:.9rem; min-width:0}
  .mtop .light-pill{flex:none}
  .mtop .light-pill{margin:0; padding:5px 10px}
  .mtop .light-pill .ts{display:none}
  .mtop .sp{flex:1}
  .drawer summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:1px solid var(--line); border-radius:10px; background:var(--card)}
  .drawer summary::-webkit-details-marker{display:none}
  .burger{width:18px; height:2px; background:var(--t1); position:relative; border-radius:2px}
  .burger::before,.burger::after{content:""; position:absolute; left:0; width:18px; height:2px;
    background:var(--t1); border-radius:2px}
  .burger::before{top:-6px} .burger::after{top:6px}
  .drawer .scrim{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:55}
  .drawer .panel{position:fixed; inset:0 0 0 auto; width:min(86vw,320px); z-index:60;
    background:var(--card2); border-left:1px solid var(--line-strong); padding:14px;
    overflow-y:auto; display:flex; flex-direction:column}
  .drawer .panel .railnav{flex:1}
  .drawer .panel .railfoot{margin-top:10px}
  .panel-head{display:flex; align-items:center; justify-content:space-between; padding:2px 10px 10px;
    border-bottom:1px solid var(--line); margin-bottom:6px}
  .panel-head b{font-family:var(--display); font-weight:600; font-size:.95rem}
  .closex{appearance:none; border:1px solid var(--line); background:transparent; color:var(--t2);
    width:38px; height:38px; border-radius:10px; font-size:1.05rem; cursor:pointer; line-height:1}
  .closex:hover{color:var(--t1); border-color:var(--line-strong)}
  .closex:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
  .statrow{gap:18px}
}
@media (max-width:479px){
  .mtop .wordmark .wm-txt{display:none}
  .drawer .panel{width:min(92vw,320px)}
}

/* ── контент ── */
.content{min-width:0; padding-top:16px}
.sec-h{font-family:var(--display); font-weight:600; letter-spacing:-.02em; font-size:1.5rem; margin:2px 0 4px}
.sec-sub{color:var(--t3); font-size:.88rem; margin:0 0 18px}
.grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px}
.grid>.card{margin-bottom:0}
@media (max-width:1023px){ .grid{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; margin-bottom:18px}
.card h2{margin:0 0 4px; font-size:1.02rem; font-family:var(--display); font-weight:600; letter-spacing:-.02em}
.sub{color:var(--t3); font-size:.85rem}
.card h2 + .sub{margin:0 0 12px}
.eyebrow{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; color:var(--t3); margin:0 0 6px}
.rows{display:flex; flex-direction:column}
.row{display:flex; align-items:baseline; gap:10px; padding:9px 2px; border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .name{flex:1; min-width:0}
.row.click{cursor:pointer; border-radius:8px; margin:0 -8px; padding-left:10px; padding-right:10px}
.row.click:hover{background:rgba(34,211,238,.05)}
.row.click:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px}
.row .dot{align-self:flex-start; margin-top:.42em}
.row .chev{color:var(--t3); align-self:center; flex:none}
.backlink{display:inline-block; margin:0 0 10px; font-size:.85rem; color:var(--cyan-glow); cursor:pointer;
  background:none; border:0; font-family:inherit; padding:0}
.backlink:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.row .val{font-family:var(--mono); font-size:.84rem; color:var(--t2); font-variant-numeric:tabular-nums; text-align:right}
.row small{display:block; color:var(--t3); font-size:.78rem}
.more{display:inline-block; margin-top:10px; font-size:.85rem}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:2px; flex:none; align-self:center}
.dot.ok{background:var(--ok); box-shadow:0 0 8px rgba(52,211,153,.55)}
.dot.warn{background:var(--warn); box-shadow:0 0 8px rgba(245,158,11,.55)}
.dot.bad{background:var(--bad); box-shadow:0 0 8px rgba(248,81,73,.6)}
.dot.live{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){ .dot.live{animation:none} }
.pill{font-size:.72rem; border-radius:999px; padding:2px 10px; border:1px solid var(--line-strong); color:var(--t2); white-space:nowrap}
.pill.ok{color:var(--ok); border-color:rgba(52,211,153,.4)}
.pill.warn{color:var(--warn); border-color:rgba(245,158,11,.4)}
.pill.soon{color:var(--cyan-glow); border-color:rgba(34,211,238,.35)}
.pill.priv{color:var(--red-soft); border-color:rgba(225,29,72,.45)}
.note{border-left:2px solid rgba(34,211,238,.5); padding:2px 0 2px 12px; color:var(--t3); font-size:.85rem}
.stat{display:flex; flex-direction:column; gap:2px}
.stat b{font-family:var(--display); font-size:1.5rem; font-weight:600; color:var(--t1); font-variant-numeric:tabular-nums}
.stat span{color:var(--t3); font-size:.8rem}
.statrow{display:flex; gap:28px; flex-wrap:wrap; padding:6px 0 2px}
.agg{display:flex; align-items:center; gap:14px; padding:16px; border-radius:12px;
  border:1px solid rgba(52,211,153,.35); background:linear-gradient(180deg, rgba(52,211,153,.08), transparent)}
.agg .big{width:16px; height:16px; border-radius:50%; background:var(--ok); box-shadow:0 0 18px rgba(52,211,153,.8); flex:none}
.agg b{font-size:1.02rem}
.agg .when{margin-left:auto; font-family:var(--mono); font-size:.76rem; color:var(--t3); text-align:right}
.agg.warn{border-color:rgba(245,158,11,.4); background:linear-gradient(180deg, rgba(245,158,11,.09), transparent)}
.agg.warn .big{background:var(--warn); box-shadow:0 0 18px rgba(245,158,11,.8)}
.bars{display:flex; gap:4px; align-items:flex-end; height:64px; margin:10px 0 4px}
.bar{flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg, rgba(34,211,238,.55), rgba(34,211,238,.12)); min-height:6px}
.bar.warn{background:linear-gradient(180deg, rgba(245,158,11,.65), rgba(245,158,11,.15))}
.daystrip{display:grid; grid-template-columns:repeat(30,1fr); gap:3px; margin:8px 0 4px}
.day{height:9px; border-radius:2px; background:rgba(52,211,153,.45)}
.day.warn{background:rgba(245,158,11,.7)}
.hist-cap{font-family:var(--mono); font-size:.72rem; color:var(--t3); letter-spacing:.04em}
.hidden{display:none!important}
@media (max-width:560px){
  .agg{flex-wrap:wrap}
  .agg .when{margin-left:0; width:100%; text-align:left}
}
.foot{margin-top:26px; color:var(--t3); font-size:.8rem; border-top:1px solid var(--line); padding-top:14px}