/* Janus liquid glass — світла тема за замовчуванням, темна через [data-theme=dark] */
:root{
  --bg1:#eef2ff; --bg2:#fdf4ea; --bg3:#e8f6f3;
  --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.72);
  --glass-brd:rgba(255,255,255,.75); --inner:rgba(240,242,252,.65);
  --text:#2b2a33; --text-2:#5a5866; --muted:#8f8d9c;
  --accent:#5b5bd6; --accent-soft:rgba(91,91,214,.14);
  --pos:#0f8a5f; --neg:#d24d43; --warn:#a06b00;
  --shadow:0 10px 34px rgba(80,80,140,.14);
}
[data-theme=dark]{
  --bg1:#191927; --bg2:#221b2b; --bg3:#152228;
  --glass:rgba(34,34,52,.55); --glass-2:rgba(40,40,60,.72);
  --glass-brd:rgba(120,120,180,.25); --inner:rgba(28,28,44,.6);
  --text:#ececf4; --text-2:#b8b6c8; --muted:#807e92;
  --accent:#8f8ff0; --accent-soft:rgba(143,143,240,.16);
  --pos:#3ecf95; --neg:#ef7a6d; --warn:#d9a13a;
  --shadow:0 10px 34px rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%}
body{
  min-height:100vh;color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:22px;
}
/* градієнт на фіксованому псевдо-шарі: обхід білих артефактів Chrome
   при поєднанні background-attachment:fixed з backdrop-filter */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(130deg,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%);
}
a{color:var(--accent);text-decoration:none}
h1{font-size:20px;font-weight:650;letter-spacing:.01em}
.wrap{max-width:1840px;margin:0 auto}
header.bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.sub{color:var(--muted);font-size:12px;margin-bottom:16px}
.card{
  background:var(--glass);backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-brd);border-radius:18px;
  box-shadow:var(--shadow);padding:18px;margin-bottom:18px;
  transform:translateZ(0);isolation:isolate;   /* власний композитний шар проти білих плям */
}
.card h2{font-size:12px;font-weight:650;color:var(--text-2);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:12px}
.grid{display:grid;gap:14px}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;white-space:nowrap}
th{font-size:11px;color:var(--muted);text-align:left;font-weight:550;
  padding:4px 12px 8px 0;border-bottom:1px solid var(--glass-brd)}
td{padding:8px 12px 8px 0;border-bottom:1px solid var(--inner);font-size:13px}
tr:last-child td{border-bottom:none}
.pos{color:var(--pos)} .neg{color:var(--neg)} .muted{color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--glass-brd);
  background:var(--glass-2);color:var(--text);font-size:13px;font-weight:550;
  padding:8px 16px;border-radius:12px;cursor:pointer;
  backdrop-filter:blur(10px);transition:transform .06s, box-shadow .2s;
}
.btn:hover{box-shadow:0 4px 16px rgba(80,80,140,.18);transform:translateY(-1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{background:rgba(210,77,67,.9);border-color:transparent;color:#fff}
.btn.small{padding:4px 10px;font-size:12px;border-radius:9px}
input[type=text],input[type=number],input[type=password]{
  background:var(--glass-2);border:1px solid var(--glass-brd);border-radius:12px;
  color:var(--text);font-size:14px;padding:9px 14px;outline:none;min-width:0;
}
input:focus{border-color:var(--accent)}
.badge{font-size:11px;padding:2px 10px;border-radius:999px;font-weight:600}
.b-on{background:rgba(15,138,95,.14);color:var(--pos)}
.b-off{background:var(--inner);color:var(--muted)}
.b-warn{background:rgba(160,107,0,.14);color:var(--warn)}
.b-neg{background:rgba(210,77,67,.14);color:var(--neg)}
.b-acc{background:var(--accent-soft);color:var(--accent)}
/* iOS-повзунок */
.switch{position:relative;display:inline-block;width:42px;height:24px;vertical-align:middle}
.switch input{opacity:0;width:0;height:0}
.knob{position:absolute;cursor:pointer;inset:0;border-radius:999px;
  background:var(--inner);border:1px solid var(--glass-brd);transition:.18s}
.knob:before{content:"";position:absolute;height:18px;width:18px;left:2px;top:2px;
  border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:.18s}
.switch input:checked + .knob{background:var(--pos);border-color:transparent}
.switch input:checked + .knob:before{transform:translateX(18px)}
.side-long{color:var(--pos);font-weight:600}
.side-short{color:var(--neg);font-weight:600}
.toast{position:fixed;right:20px;bottom:20px;background:var(--glass-2);
  border:1px solid var(--glass-brd);border-radius:14px;box-shadow:var(--shadow);
  backdrop-filter:blur(16px);padding:12px 18px;font-size:13px;display:none;z-index:50}
.chipbar{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--glass-2);border:1px solid var(--glass-brd);border-radius:999px;
  font-size:12px;padding:4px 12px;cursor:pointer;color:var(--text-2)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stat .v{font-size:19px;font-weight:650}
nav.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
nav.tabs a{
  padding:7px 16px;border-radius:12px;font-size:13px;font-weight:550;color:var(--text-2);
  background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(10px);
}
nav.tabs a.on{background:var(--accent);color:#fff;border-color:var(--accent)}