/* ============ TOKENY ============ */
:root{
  color-scheme: light;
  --bg:#F2F3F8;
  --surface:#FFFFFF;
  --surface-2:#F8F8FC;
  --surface-3:#ECEDF6;
  --line:#E4E4EF;
  --line-2:#CFCFDE;
  --ink:#14141F;
  --ink-2:#55556B;
  --ink-3:#8A8AA0;
  --accent:#4C46A8;
  --accent-2:#6B64C9;
  --accent-soft:#EDECF9;
  --on-accent:#FFFFFF;

  /* Sietove farby - overene na farbosleposť aj kontrast. Priradenie podla poradia v config/networks.php. */
  --net-0:#1baf7a;
  --net-1:#eb6834;
  --net-2:#2a78d6;
  --net-3:#e87ba4;
  --net-4:#4a3aa7;

  --good:#0ca30c;   --good-ink:#067A06;   --good-soft:#E6F6E6;
  --warn:#fab219;   --warn-ink:#8A6100;   --warn-soft:#FBF2DC;
  --serious:#ec835a;--serious-ink:#9A4A22; --serious-soft:#FBEBE3;
  --crit:#d03b3b;   --crit-ink:#A82B2B;   --crit-soft:#FAE7E7;

  --grid:#E9E9F2;
  --axis:#CFCFDE;
  --shadow:0 1px 2px rgba(20,20,31,.05), 0 8px 24px -12px rgba(20,20,31,.18);
  --shadow-sm:0 1px 2px rgba(20,20,31,.06);
  --ring:rgba(76,70,168,.35);

  --r-lg:16px; --r-md:12px; --r-sm:8px;
  --sans:"Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display:"Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0A0C12;
    --surface:#151A22;
    --surface-2:#1B212B;
    --surface-3:#222A36;
    --line:#262D38;
    --line-2:#38414F;
    --ink:#F2F4F8;
    --ink-2:#A6AEBC;
    --ink-3:#737D8C;
    --accent:#A9A2F5;
    --accent-2:#BDB7FA;
    --accent-soft:#23233A;
    --on-accent:#12121F;

    --net-0:#199e70;
    --net-1:#d95926;
    --net-2:#3987e5;
    --net-3:#d55181;
    --net-4:#9085e9;

    --good:#0ca30c;   --good-ink:#3ECB3E;   --good-soft:#12291A;
    --warn:#fab219;   --warn-ink:#F0BC45;   --warn-soft:#2C2415;
    --serious:#ec835a;--serious-ink:#EF9A78; --serious-soft:#2E1E17;
    --crit:#d03b3b;   --crit-ink:#EA7676;   --crit-soft:#2E1717;

    --grid:#232A35;
    --axis:#38414F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --ring:rgba(169,162,245,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0A0C12;
  --surface:#151A22;
  --surface-2:#1B212B;
  --surface-3:#222A36;
  --line:#262D38;
  --line-2:#38414F;
  --ink:#F2F4F8;
  --ink-2:#A6AEBC;
  --ink-3:#737D8C;
  --accent:#A9A2F5;
  --accent-2:#BDB7FA;
  --accent-soft:#23233A;
  --on-accent:#12121F;

  --net-0:#199e70;
  --net-1:#d95926;
  --net-2:#3987e5;
  --net-3:#d55181;
  --net-4:#9085e9;

  --good:#0ca30c;   --good-ink:#3ECB3E;   --good-soft:#12291A;
  --warn:#fab219;   --warn-ink:#F0BC45;   --warn-soft:#2C2415;
  --serious:#ec835a;--serious-ink:#EF9A78; --serious-soft:#2E1E17;
  --crit:#d03b3b;   --crit-ink:#EA7676;   --crit-soft:#2E1717;

  --grid:#232A35;
  --axis:#38414F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --ring:rgba(169,162,245,.45);
}

/* ============ ZÁKLAD ============ */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* ============ APP SHELL ============ */
.app{min-height:100vh;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1240px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;gap:12px;
}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0}
.brand-mark{
  width:28px;height:28px;border-radius:9px;flex:none;
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;
  font-family:var(--display);font-size:15px;font-weight:700;line-height:1;letter-spacing:-.02em;
  padding-bottom:1px;
}
.brand-name{font-weight:700;letter-spacing:-.015em;font-size:16px}
.brand-tag{
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);border:1px solid var(--line-2);border-radius:999px;padding:2px 7px;
  white-space:nowrap;
}
.net-dots{display:flex;align-items:center;gap:10px}
.net-dot{
  display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--ink-2);letter-spacing:.01em;
}
.net-dot i{width:7px;height:7px;border-radius:50%;display:block}
.net-dot i{background:var(--net, var(--ink-3))}
.net-dot.is-failed i{background:var(--crit)}

/* taby */
.tabs{display:none}
@media (min-width:860px){
  .tabs{
    display:flex;gap:2px;background:var(--surface-3);
    padding:3px;border-radius:11px;
  }
  .tabs button{
    border:0;background:transparent;color:var(--ink-2);
    padding:6px 16px;border-radius:8px;font-weight:600;font-size:13.5px;
    transition:background .15s, color .15s;
  }
  .tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
}

.bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-top:1px solid var(--line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
}
.bottombar button{
  border:0;background:transparent;border-radius:12px;
  padding:7px 4px 5px;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ink-3);font-size:11px;font-weight:600;letter-spacing:.01em;
}
.bottombar button svg{width:21px;height:21px;stroke-width:1.8}
.bottombar button[aria-selected="true"]{color:var(--accent);background:var(--accent-soft)}
@media (min-width:860px){ .bottombar{display:none} }

main{
  flex:1;width:100%;max-width:1240px;margin:0 auto;
  padding:16px 16px 92px;
}
@media (min-width:860px){ main{padding:22px 24px 40px} }
.panel[hidden]{display:none}

/* ============ KARTY ============ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.stack{display:flex;flex-direction:column;gap:14px}

.sec-head{
  display:flex;align-items:baseline;gap:10px;
  padding:2px 2px 0;
}
.sec-title{
  font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.025em;
  text-wrap:balance;margin:0;
}
.sec-note{font-size:12px;color:var(--ink-3);margin-left:auto;white-space:nowrap}

.eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ---- hero ---- */
.hero{padding:18px 18px 6px;position:relative;overflow:hidden}
.hero-top{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.live{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--good-ink);background:var(--good-soft);
  border-radius:999px;padding:3px 9px 3px 7px;
}
.live i{width:6px;height:6px;border-radius:50%;background:var(--good);display:block;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.hero-figure{
  font-family:var(--display);font-weight:600;
  /* Grotesk ma vacsiu strednu vysku nez serif - o nieco mensi stupen a tesnejsi prestrk. */
  font-size:clamp(42px,12vw,54px);line-height:1.02;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  margin:4px 0 0;
}
.hero-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.delta{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 9px;
  font-variant-numeric:tabular-nums;
}
.delta.up{color:var(--good-ink);background:var(--good-soft)}
.delta.down{color:var(--crit-ink);background:var(--crit-soft)}
.hero-vs{font-size:12.5px;color:var(--ink-2)}
.hero-vs b{font-weight:600;color:var(--ink);font-family:var(--mono);font-size:12px}

.spark-wrap{position:relative;margin:10px -4px 0}
.spark-wrap svg{display:block;width:100%;height:64px;overflow:visible}
.spark-legend{
  display:flex;flex-wrap:wrap;gap:4px 12px;padding:0 4px 12px;font-size:12px;color:var(--ink-2);
}
.spark-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.spark-legend i{width:14px;height:2px;border-radius:2px;display:block}

/* ---- tiles ---- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{padding:13px 14px}
.tile .eyebrow{margin-bottom:6px}
.tile-val{
  font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.035em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.tile-sub{font-size:12px;color:var(--ink-2);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tile-sub .merchant{font-weight:600;color:var(--ink)}

/* ---- feed ---- */
.feed{overflow:hidden}
.feed-head{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--line);
}
.feed-head h3{margin:0;font-size:14px;font-weight:700;letter-spacing:-.01em}
.refresh-note{
  margin-left:auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:6px;
}
.refresh-note i{
  width:5px;height:5px;border-radius:50%;background:var(--accent);display:block;
  animation:pulse 2.4s ease-in-out infinite;
}
.rows{list-style:none;margin:0;padding:0}
.row{
  display:grid;grid-template-columns:auto 1fr auto;gap:0 11px;
  padding:11px 16px;border-bottom:1px solid var(--line);
  align-items:center;
}
.rows li:last-child .row{border-bottom:0}
.row-net{
  width:8px;height:8px;border-radius:50%;grid-row:span 2;align-self:center;
}
.row-net{background:var(--net, var(--ink-3))}
.row-main{min-width:0}
.row-adv{
  font-weight:600;font-size:14px;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row-meta{
  display:flex;align-items:center;gap:7px;margin-top:3px;
  font-size:11.5px;color:var(--ink-3);flex-wrap:wrap;
}
.row-meta .site{color:var(--ink-2);font-weight:500}
.row-amt{text-align:right;white-space:nowrap}
.row-comm{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.row-sale{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}
.row.declined .row-comm{color:var(--crit-ink);text-decoration:line-through;text-decoration-thickness:1.5px}

.row-new{animation:slidein .45s cubic-bezier(.2,.8,.3,1)}
.row-flash{animation:flash 3.4s ease-out forwards}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes flash{0%{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}100%{background:transparent;box-shadow:inset 3px 0 0 transparent}}
@media (prefers-reduced-motion: reduce){
  .row-new,.row-flash,.live i,.refresh-note i{animation:none}
}

/* ---- pills ---- */
.pill{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  border-radius:999px;padding:2px 8px 2px 6px;white-space:nowrap;
}
.pill b{font-size:11px;line-height:1;font-weight:700}
.pill.approved{color:var(--good-ink);background:var(--good-soft)}
.pill.pending{color:var(--warn-ink);background:var(--warn-soft)}
.pill.corrected{color:var(--serious-ink);background:var(--serious-soft)}
.pill.declined{color:var(--crit-ink);background:var(--crit-soft)}
.pill.net{color:var(--ink-2);background:var(--surface-3);padding:2px 8px}

/* ============ FILTRE ============ */
.filters{padding:14px 16px;display:flex;flex-direction:column;gap:13px}
.f-group{display:flex;flex-direction:column;gap:7px}
.f-label{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;
  transition:background .13s,color .13s,border-color .13s;
}
.chip:hover{background:var(--surface-2)}
/* jednovýber (obdobie) = plná výplň — „práve toto“ */
.chip[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}
/* viacvýber (sieť, stav) = tlmené — „zahrnuté“; vypnuté je zreteľne stlmené */
.chip.toggle[aria-pressed="true"]{
  background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  color:var(--accent);
}
.chip.toggle[aria-pressed="false"]{opacity:.5;text-decoration:line-through;text-decoration-thickness:1px}
.chip i{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:1px}
.chip.net-chip i{background:var(--net, var(--ink-3))}
.chip.st-approved i{background:var(--good)}
.chip.st-pending i{background:var(--warn)}
.chip.st-corrected i{background:var(--serious)}
.chip.st-declined i{background:var(--crit)}

.f-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
select,input[type="date"]{
  width:100%;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:8px 10px;font-size:13.5px;font-weight:500;
  appearance:none;
}
input[type="date"]{font-family:var(--mono);font-size:12.5px}
select{
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:30px;
}
.f-foot{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);
  padding:7px 13px;font-size:13px;font-weight:600;color:var(--ink-2);
}
.btn:hover{background:var(--surface-2);color:var(--ink)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent)}
.f-count{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---- summary strip ---- */
.summary{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
}
@media (min-width:640px){ .summary{grid-template-columns:repeat(4,1fr)} }
.sum{background:var(--surface);padding:12px 14px}
.sum .eyebrow{margin-bottom:5px}
.sum-val{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.035em;line-height:1.15;font-variant-numeric:tabular-nums}
.sum-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px;font-variant-numeric:tabular-nums}

/* ---- graf ---- */
.chart-card{padding:15px 12px 12px}
.chart-head{display:flex;align-items:center;gap:10px;padding:0 4px 4px;flex-wrap:wrap}
.chart-head h3{margin:0;font-size:14px;font-weight:700;letter-spacing:-.01em}
.seg{display:flex;background:var(--surface-3);padding:2px;border-radius:9px;margin-left:auto}
.seg button{
  border:0;background:transparent;color:var(--ink-2);
  padding:4px 11px;border-radius:7px;font-size:12px;font-weight:600;
}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.legend{display:flex;gap:14px;padding:6px 4px 8px;font-size:11.5px;color:var(--ink-2);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.legend i{width:10px;height:10px;border-radius:3px;display:block}
.chart-box{position:relative}
.chart-box svg{display:block;width:100%;overflow:visible}
.tip{
  position:absolute;pointer-events:none;z-index:5;
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  box-shadow:var(--shadow);padding:9px 11px;min-width:150px;
  opacity:0;transition:opacity .1s;
}
.tip.on{opacity:1}
.tip-date{font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:6px;letter-spacing:.01em}
.tip-line{display:flex;align-items:center;gap:7px;font-size:12px;margin-top:3px}
.tip-line i{width:8px;height:8px;border-radius:2px;flex:none}
.tip-line b{margin-left:auto;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.tip-tot{border-top:1px solid var(--line);margin-top:7px;padding-top:6px;font-weight:700}
.chart-empty{
  display:grid;place-items:center;height:180px;color:var(--ink-3);font-size:13px;text-align:center;padding:0 20px;
}

/* ---- tabuľka ---- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:660px}
thead th{
  position:sticky;top:0;background:var(--surface-2);z-index:1;
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
thead th button{
  border:0;background:transparent;padding:0;font:inherit;color:inherit;
  display:inline-flex;align-items:center;gap:4px;
}
thead th button:hover{color:var(--ink)}
thead th .arw{opacity:0;font-size:9px}
thead th[aria-sort] button{color:var(--ink)}
thead th[aria-sort] .arw{opacity:1}
td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
td .netcell{display:inline-flex;align-items:center;gap:6px;font-weight:500}
td .netcell i{width:7px;height:7px;border-radius:50%}
td .netcell i{background:var(--net, var(--ink-3))}
td.merchant{font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.pager{display:flex;align-items:center;gap:8px;padding:11px 14px;border-top:1px solid var(--line)}
.pager .info{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pager .sp{margin-left:auto;display:flex;gap:6px}
.pager button{padding:5px 11px;font-size:12.5px}
.pager button:disabled{opacity:.4;cursor:not-allowed}

.empty{padding:40px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* toast */
.toast{
  position:fixed;left:50%;transform:translate(-50%,20px);
  bottom:calc(76px + env(safe-area-inset-bottom));z-index:99;
  background:var(--ink);color:var(--bg);
  padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .18s, transform .18s;
  box-shadow:var(--shadow);
}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:860px){ .toast{bottom:28px} }

.foot{
  padding:16px 4px 4px;font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.6;
}

/* ============ PRÍDAVKY OPROTI PROTOTYPU ============ */
.logout{display:flex;margin-left:2px}
.logout button{
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;padding:0;
}
.logout button:hover{color:var(--ink);background:var(--surface-2)}
.logout svg{width:15px;height:15px}

.net-dot.is-failed{color:var(--crit-ink)}

/* Nefunkčná synchronizácia alebo výpadok siete sa nesmie tváriť ako nula. */
.banner{
  background:var(--crit-soft);color:var(--crit-ink);
  font-size:12.5px;font-weight:600;padding:7px 16px;text-align:center;
  border-top:1px solid var(--line);
}
.banner.warn{background:var(--warn-soft);color:var(--warn-ink)}

.rows.is-stale{opacity:.55;transition:opacity .2s}

.skeleton{
  display:inline-block;background:var(--surface-3);border-radius:6px;
  color:transparent;min-width:80px;
}

/* ============ PRIHLÁSENIE ============ */
.gate{
  min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:var(--bg);
}
.gate-card{
  width:100%;max-width:340px;padding:26px 22px 22px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--shadow);
}
.gate-brand{display:flex;align-items:center;gap:9px}
.gate-title{
  font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.03em;
  margin:2px 0 0;
}
.gate-card input[type="password"]{
  width:100%;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:10px 12px;font-size:15px;
}
.gate-error{
  margin:0;font-size:12.5px;font-weight:600;color:var(--crit-ink);
  background:var(--crit-soft);border-radius:var(--r-sm);padding:7px 10px;
}
.gate-submit{padding:10px 14px;font-size:14px;text-align:center}

/* [hidden] musí prebiť display z tried — inak zostane prázdna bublina vo vzduchu. */
[hidden]{display:none !important}
.net-dot.is-idle{opacity:.45}

/* Prazdny stav nema kricat rovnako ako cislo. */
.tile-val.is-empty{color:var(--ink-3);font-weight:500;letter-spacing:0}

/* Ponuka na instalaciu PWA - schovana, kym prehliadac nepovie, ze sa da. */
.install{
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:var(--accent-soft);color:var(--accent);
  border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;
  white-space:nowrap;line-height:1.5;
}
.install:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.install:disabled{opacity:.5}
@media (max-width:380px){
  .install{padding:3px 8px;font-size:11px}
}