/* =====================================================================================
   TV Panel · varsayilan tema "Ay Isigi"
   Ay beyazi zemin, kartlarda renk gecisleri, isik ve hareket efektleri. Koyu/acik otomatik
   (prefers-color-scheme), elle secim: <html data-scheme="auto|light|dark">.
   Yeni tema bu klasorun kopyasidir; uygulama kodu yalnizca sinif adlarini bilir.
   ===================================================================================== */
@import url("../fonts/fonts.css");
@property --ang { syntax:"<angle>"; inherits:false; initial-value:0deg; }

/* ---- renk paleti: kart renk ciftleri (g1..g6) her iki modda ayni */
:root {
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-disp:"Bricolage Grotesque","Manrope",system-ui,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --g1:#14c8b0; --g1b:#7c6cff; --g2:#ff9b6a; --g2b:#ff4f8b; --g3:#38d39f; --g3b:#38a8ff;
  --g4:#ffc23d; --g4b:#ff6a3d; --g5:#8f7bff; --g5b:#ff6fd8; --g6:#3ec2ff; --g6b:#14d8a5;
  --r-card:22px; --r-ctl:12px; --r-sm:9px; --gap:18px; --side-w:262px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
/* acik (ay beyazi) */
:root, :root[data-scheme="light"] {
  --bg:#f7f5f0; --card:#ffffff; --card2:#faf8f4; --ctl:#ffffff; --inp:#ffffff; --line:#ebe6dc; --line2:#ddd6c9; --track:#efebe3;
  --ink:#141523; --ink2:#3b3d52; --mut:#8c8a99; --mut2:#b1aebb;
  --pri:#141523; --pri-ink:#ffffff; --acc:#5b45ff; --acc-soft:#efeaff;
  --live:#ff3d6e; --live-soft:#ffe5ec; --live-ink:#d81b4f;
  --ok:#14b48c; --ok-soft:#dff6ef; --ok-ink:#0b8466;
  --warn:#e9930c; --warn-soft:#fdf0d8; --warn-ink:#94600a;
  --bad:#ef3b55; --bad-soft:#fde6ea; --bad-ink:#c4142f;
  --side:rgba(255,253,249,.74); --side-line:#ebe6dc; --side-ink:#55566a; --side-mut:#a19fac; --side-strong:#141523; --side-hover:#f1ede6;
  --nav-on:#141523; --nav-on-ink:#ffffff;
  --wash:.10; --glow:rgba(124,108,255,.2); --spot:rgba(124,108,255,.10); --noise-blend:multiply; --noise-op:.35;
  --shadow:0 1px 1px rgba(20,21,35,.03),0 18px 40px -22px rgba(60,50,110,.22);
  --btn-pri:linear-gradient(120deg,#141523,#2b2550); --btn-pri-ink:#ffffff;
  color-scheme:light;
}
/* koyu (gece) */
:root[data-scheme="dark"] {
  --bg:#0a0c16; --card:#11142a; --card2:#0f1224; --ctl:#141832; --inp:#0f1226; --line:#232848; --line2:#2e3460; --track:#1d2140;
  --ink:#f1f0fb; --ink2:#c5c6e4; --mut:#8086ad; --mut2:#5f6590;
  --pri:#f1f0fb; --pri-ink:#0a0c16; --acc:#b8acff; --acc-soft:rgba(143,123,255,.18);
  --live:#ff4d7c; --live-soft:rgba(255,77,124,.15); --live-ink:#ff86a6;
  --ok:#2fd8a8; --ok-soft:rgba(47,216,168,.12); --ok-ink:#6ce8c4;
  --warn:#ffb93d; --warn-soft:rgba(255,185,61,.13); --warn-ink:#ffcf75;
  --bad:#ff5a73; --bad-soft:rgba(255,90,115,.14); --bad-ink:#ff8d9f;
  --side:rgba(10,12,22,.8); --side-line:#1d2140; --side-ink:#a0a4c8; --side-mut:#5f6590; --side-strong:#ffffff; --side-hover:#151a35;
  --nav-on:#f1f0fb; --nav-on-ink:#0a0c16;
  --wash:.16; --glow:rgba(143,123,255,.28); --spot:rgba(143,123,255,.14); --noise-blend:screen; --noise-op:.22;
  --shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 50px -24px rgba(0,0,0,.6);
  --btn-pri:linear-gradient(120deg,#f1f0fb,#d9d3ff); --btn-pri-ink:#0a0c16;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme="auto"] {
    --bg:#0a0c16; --card:#11142a; --card2:#0f1224; --ctl:#141832; --inp:#0f1226; --line:#232848; --line2:#2e3460; --track:#1d2140;
    --ink:#f1f0fb; --ink2:#c5c6e4; --mut:#8086ad; --mut2:#5f6590;
    --pri:#f1f0fb; --pri-ink:#0a0c16; --acc:#b8acff; --acc-soft:rgba(143,123,255,.18);
    --live:#ff4d7c; --live-soft:rgba(255,77,124,.15); --live-ink:#ff86a6;
    --ok:#2fd8a8; --ok-soft:rgba(47,216,168,.12); --ok-ink:#6ce8c4;
    --warn:#ffb93d; --warn-soft:rgba(255,185,61,.13); --warn-ink:#ffcf75;
    --bad:#ff5a73; --bad-soft:rgba(255,90,115,.14); --bad-ink:#ff8d9f;
    --side:rgba(10,12,22,.8); --side-line:#1d2140; --side-ink:#a0a4c8; --side-mut:#5f6590; --side-strong:#ffffff; --side-hover:#151a35;
    --nav-on:#f1f0fb; --nav-on-ink:#0a0c16;
    --wash:.16; --glow:rgba(143,123,255,.28); --spot:rgba(143,123,255,.14); --noise-blend:screen; --noise-op:.22;
    --shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 50px -24px rgba(0,0,0,.6);
    --btn-pri:linear-gradient(120deg,#f1f0fb,#d9d3ff); --btn-pri-ink:#0a0c16;
    color-scheme:dark;
  }
}

/* ---- temel */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { font:14px/1.55 var(--f-body); color:var(--ink); -webkit-font-smoothing:antialiased; position:relative;
  background:
    radial-gradient(900px 520px at 100% -10%, color-mix(in srgb,var(--g1b) 14%,transparent), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, color-mix(in srgb,var(--g2) 12%,transparent), transparent 60%),
    radial-gradient(600px 400px at 40% -20%, color-mix(in srgb,var(--g1) 9%,transparent), transparent 70%), var(--bg);
  background-attachment:fixed; transition:background-color .3s, color .3s; }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--noise-op); mix-blend-mode:var(--noise-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .55 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color:var(--acc); text-decoration:none; } a:hover { text-decoration:underline; }
h1, h2, h3 { margin:0; font-family:var(--f-disp); color:var(--ink); }
h1 { font-weight:700; font-size:40px; line-height:1.04; letter-spacing:-.035em; }
h2 { font-weight:700; font-size:17px; line-height:1.25; letter-spacing:-.015em; }
h3 { font-weight:700; font-size:15px; letter-spacing:-.01em; }
code, .mono { font-family:var(--f-mono); font-size:12.5px; }
.num { font-family:var(--f-disp); font-variant-numeric:tabular-nums; }
svg.i { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.grad { background:linear-gradient(100deg,var(--g1) 0%,var(--g1b) 45%,var(--g5b) 75%,var(--g2) 100%); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 8s ease-in-out infinite alternate; }
@keyframes sheen { to { background-position:100% 0; } }
.mut { color:var(--mut); } .sm { font-size:12.5px; }

/* ---- duzen: yan menu + icerik */
.shell { display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100vh; position:relative; z-index:1; }
.side { position:sticky; top:0; height:100vh; padding:20px 14px; display:flex; flex-direction:column; gap:4px; background:var(--side);
  border-right:1px solid var(--side-line); color:var(--side-ink); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); }
.brand { display:flex; align-items:center; gap:11px; padding:2px 8px 22px; text-decoration:none !important; }
.brand .mk { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none; color:#fff;
  background:conic-gradient(from 200deg,var(--g1),var(--g1b),var(--g5b),var(--g2),var(--g1)); box-shadow:0 8px 22px var(--glow); }
.brand b { display:block; font:800 19px/1 var(--f-disp); letter-spacing:-.02em; color:var(--side-strong); }
.brand small { display:block; font-size:11px; color:var(--side-mut); letter-spacing:.04em; margin-top:3px; }
.nav-h { font:700 10.5px/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--side-mut); padding:16px 10px 8px; }
.nav a { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-ctl); color:var(--side-ink); text-decoration:none; font-weight:600;
  transition:background .2s, color .2s; }
.nav a:hover { background:var(--side-hover); color:var(--side-strong); }
.nav a.on { background:var(--nav-on); color:var(--nav-on-ink); box-shadow:0 10px 24px -12px rgba(20,21,35,.45); }
.nav a[aria-disabled="true"] { opacity:.55; pointer-events:none; }
.nav a .c, .nav a .soon { margin-left:auto; font:600 10.5px var(--f-body); color:var(--side-mut); }
.side .grow { flex:1; }
.me { display:flex; align-items:center; gap:10px; padding:12px 6px 2px; border-top:1px solid var(--side-line); }
.avatar { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; font-weight:800; flex:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 25%,var(--card)),color-mix(in srgb,var(--g1b) 25%,var(--card))); color:var(--acc); }
.me .who { flex:1; min-width:0; }
.me .who b { display:block; color:var(--side-strong); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me .who span { display:block; font-size:11.5px; color:var(--side-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.main { padding:24px 32px 64px; min-width:0; }
.top { display:flex; align-items:flex-end; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.top .grow { flex:1; min-width:200px; }
.crumb, .eyebrow { font:700 12px var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:8px; }
.crumb a { color:var(--mut); }

/* ---- kartlar: renk gecisi + renkli ust kenar + imleci izleyen isik */
.card { --ca:var(--g1); --cb:var(--g1b); position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-card); padding:20px;
  box-shadow:var(--shadow);
  background:linear-gradient(150deg,color-mix(in srgb,var(--ca) calc(var(--wash)*100%),var(--card)) 0%,var(--card) 46%,color-mix(in srgb,var(--cb) calc(var(--wash)*70%),var(--card)) 100%);
  transition:transform .35s var(--ease), box-shadow .35s; animation:rise .7s var(--ease) both; }
.card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--ca),var(--cb)); opacity:.9; }
.card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 45%); }
.card:hover::after { opacity:1; }
.card.lift:hover { transform:translateY(-3px); box-shadow:0 26px 50px -26px color-mix(in srgb,var(--cb) 55%,transparent); }
.card > * { position:relative; z-index:1; }
.card + .card { margin-top:var(--gap); }
.g1 { --ca:var(--g1); --cb:var(--g1b); } .g2 { --ca:var(--g2); --cb:var(--g2b); } .g3 { --ca:var(--g3); --cb:var(--g3b); }
.g4 { --ca:var(--g4); --cb:var(--g4b); } .g5 { --ca:var(--g5); --cb:var(--g5b); } .g6 { --ca:var(--g6); --cb:var(--g6b); }
.card.danger { --ca:var(--bad); --cb:var(--g2b); }
.grid > .card:nth-child(2) { animation-delay:.06s; } .grid > .card:nth-child(3) { animation-delay:.12s; } .grid > .card:nth-child(4) { animation-delay:.18s; }
@keyframes rise { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
.card.feature { border-color:transparent; border:1.5px solid transparent;
  background:linear-gradient(150deg,color-mix(in srgb,var(--ca) calc(var(--wash)*100%),var(--card)),var(--card) 55%) padding-box,
    conic-gradient(from var(--ang),var(--g1),var(--g1b),var(--g5b),var(--g2),var(--g4),var(--g1)) border-box;
  animation:rise .7s var(--ease) both, spin 6s linear infinite; }
@keyframes spin { to { --ang:360deg; } }
.card-h { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.card-h .grow { flex:1; }
.grid { display:grid; gap:var(--gap); }
.g-kpi { grid-template-columns:repeat(4,minmax(0,1fr)); }
.g2col { grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); }
.kpi .lab { display:flex; align-items:center; gap:8px; font:700 12.5px var(--f-body); color:var(--mut); }
.kpi .lab::before { content:""; width:8px; height:8px; border-radius:3px; background:linear-gradient(135deg,var(--ca),var(--cb)); }
.kpi .val { font:700 38px/1 var(--f-disp); letter-spacing:-.04em; margin:14px 0 6px; font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--ink) 30%,color-mix(in srgb,var(--cb) 80%,var(--ink))); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kpi .val small { font-size:.45em; margin-left:4px; letter-spacing:0; -webkit-text-fill-color:var(--mut); }
.kpi .sub { display:flex; align-items:center; gap:8px; color:var(--mut); font-size:12.5px; flex-wrap:wrap; }

/* ---- dugmeler */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:var(--r-ctl); border:1px solid var(--line);
  background:var(--ctl); color:var(--ink); font:700 13.5px var(--f-body); cursor:pointer; text-decoration:none !important; white-space:nowrap;
  transition:transform .15s, box-shadow .2s, background .2s; }
.btn:hover { box-shadow:0 8px 20px -12px rgba(20,21,35,.35); transform:translateY(-1px); }
.btn:active { transform:none; }
.btn.pri { background:var(--btn-pri); color:var(--btn-pri-ink); border:0; position:relative; overflow:hidden; box-shadow:0 10px 24px -10px rgba(91,69,255,.55); }
.btn.pri::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%); animation:shine 3.8s 1s ease-in-out infinite; }
@keyframes shine { 0%, 60% { transform:translateX(-120%); } 100% { transform:translateX(120%); } }
.btn.bad { color:var(--bad-ink); background:var(--bad-soft); border-color:transparent; }
.btn.sm { padding:6px 11px; font-size:12.5px; border-radius:var(--r-sm); }
.btn.ico { width:38px; height:38px; padding:0; }
.btn[disabled] { opacity:.55; cursor:default; transform:none; }

/* ---- etiketler ve durum */
.tag { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font:700 11.5px var(--f-body); background:var(--ctl); color:var(--ink2); border:1px solid var(--line); }
.tag.ok { background:var(--ok-soft); color:var(--ok-ink); border-color:transparent; }
.tag.bad { background:var(--bad-soft); color:var(--bad-ink); border-color:transparent; }
.tag.warn { background:var(--warn-soft); color:var(--warn-ink); border-color:transparent; }
.tag.live { background:linear-gradient(90deg,color-mix(in srgb,#ff3d6e 16%,transparent),color-mix(in srgb,#ff7a45 16%,transparent)); color:var(--live-ink); border-color:transparent; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--mut2); display:inline-block; flex:none; }
.dot.ok { background:var(--ok); box-shadow:0 0 0 0 var(--ok); animation:pulse 2s infinite; }
.dot.bad { background:var(--bad); } .dot.warn { background:var(--warn); }
@keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent); } 70% { box-shadow:0 0 0 7px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
.eng { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:12.5px; }
.eng::before { content:""; width:9px; height:9px; border-radius:3px; background:linear-gradient(135deg,var(--g6),var(--g1b)); }
.eng.wowza::before { background:linear-gradient(135deg,var(--g4),var(--g4b)); }
.meter { width:110px; height:6px; border-radius:9px; background:var(--track); overflow:hidden; }
.meter i { display:block; height:100%; border-radius:9px; background:linear-gradient(90deg,var(--g1),var(--g1b)); box-shadow:0 0 12px -2px var(--glow); }
.meter.hot i { background:linear-gradient(90deg,var(--g4),var(--g4b)); }
.empty { text-align:center; padding:34px 16px; color:var(--mut); }
.empty b { display:block; font:700 17px var(--f-disp); color:var(--ink); margin-bottom:6px; letter-spacing:-.01em; }
.empty .art { width:64px; height:64px; margin:0 auto 14px; border-radius:20px; display:grid; place-items:center; color:#fff;
  background:conic-gradient(from 200deg,var(--g1),var(--g1b),var(--g5b),var(--g2),var(--g1)); box-shadow:0 14px 30px -10px var(--glow); }
.empty .art svg.i { width:28px; height:28px; }

/* ---- tablolar */
table.t { width:100%; border-collapse:collapse; }
table.t th { text-align:left; font:700 11px var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--mut); padding:0 12px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.t td { padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.t tr:last-child td { border-bottom:0; }
table.t tbody tr { transition:background .2s; }
table.t tbody tr:hover { background:color-mix(in srgb,var(--g1b) 6%,transparent); }
.tscroll { overflow-x:auto; }
.srv b { display:block; font-weight:700; } .srv span { font-size:11.5px; color:var(--mut); }

/* ---- formlar */
.form { display:grid; gap:var(--gap); }
.f2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.f4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
label.l { display:block; font-weight:700; font-size:13px; margin-bottom:7px; color:var(--ink2); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], select, textarea {
  width:100%; padding:10px 13px; border-radius:var(--r-ctl); border:1px solid var(--line2); background:var(--inp); color:var(--ink); font:inherit; outline:none;
  transition:border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { border-color:color-mix(in srgb,var(--g1b) 70%,var(--line2)); box-shadow:0 0 0 4px color-mix(in srgb,var(--g1b) 16%,transparent); }
textarea { min-height:84px; resize:vertical; }
.hint { color:var(--mut); font-size:12px; margin-top:6px; }
.err { color:var(--bad-ink); font-size:12.5px; margin-top:6px; font-weight:700; }
.is-err input, .is-err select, .is-err textarea { border-color:var(--bad); }
.seg { display:inline-flex; background:var(--card2); border:1px solid var(--line); border-radius:14px; padding:4px; gap:4px; }
.seg label { cursor:pointer; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg span { display:flex; align-items:center; gap:9px; padding:9px 18px; border-radius:10px; font-weight:800; color:var(--mut); transition:all .2s; }
.seg span::before { content:""; width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,var(--g6),var(--g1b)); opacity:.5; }
.seg label.wz span::before { background:linear-gradient(135deg,var(--g4),var(--g4b)); }
.seg input:checked + span { background:var(--card); color:var(--ink); box-shadow:0 6px 16px -8px rgba(20,21,35,.35); }
.seg input:checked + span::before { opacity:1; }
.seg input:focus-visible + span { outline:2px solid var(--acc); outline-offset:2px; }
.check { display:flex; align-items:center; gap:9px; font-weight:600; }
.check input { width:18px; height:18px; accent-color:var(--g1b); }

/* ---- bildirimler, komut kutusu */
.note { display:flex; gap:10px; align-items:flex-start; padding:12px 15px; border-radius:14px; border:1px solid var(--line); background:var(--card); margin-bottom:16px; font-weight:600; animation:rise .5s var(--ease) both; }
.note.ok { background:var(--ok-soft); border-color:transparent; color:var(--ok-ink); }
.note.err { background:var(--bad-soft); border-color:transparent; color:var(--bad-ink); }
.note.warn { background:var(--warn-soft); border-color:transparent; color:var(--warn-ink); }
.toast { position:fixed; right:22px; bottom:22px; z-index:60; max-width:440px; box-shadow:0 18px 40px -12px rgba(20,21,35,.4); }
.cmd { display:flex; gap:8px; align-items:stretch; }
.cmd code { flex:1; display:block; padding:12px 14px; border-radius:var(--r-ctl); background:#0c0e1c; color:#b9f5df; border:1px solid #232848; overflow-x:auto; white-space:nowrap; }
.kv { display:grid; grid-template-columns:150px 1fr; gap:10px 16px; font-size:13.5px; margin:0; }
.kv dt { color:var(--mut); font-weight:700; } .kv dd { margin:0; }

/* ---- giris sayfasi */
.auth { min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; z-index:1; }
.auth .box { width:min(420px,100%); }
.auth .brand { justify-content:center; padding-bottom:26px; }
.auth .card { padding:26px; }
.auth h1 { font-size:30px; text-align:center; margin-bottom:6px; }
.auth .lead { text-align:center; color:var(--mut); margin:0 0 20px; }

/* ---- tema secici */
.scheme { display:flex; gap:2px; padding:3px; border-radius:11px; background:var(--side-hover); }
.scheme button { border:0; background:transparent; color:var(--side-mut); width:28px; height:26px; border-radius:8px; display:grid; place-items:center; cursor:pointer; }
.scheme button svg.i { width:15px; height:15px; }
.scheme button.on { background:var(--card); color:var(--side-strong); box-shadow:0 2px 6px rgba(0,0,0,.12); }

@media (max-width:1100px) { .g-kpi { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px) {
  .shell { grid-template-columns:1fr; }
  .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; }
  .side .nav-h, .side .grow, .me .who { display:none; }
  .nav { display:flex; flex-wrap:wrap; gap:4px; }
  .me { border:0; padding:0; margin-left:auto; }
  .main { padding:18px 16px 48px; }
  .g-kpi { grid-template-columns:1fr; }
  h1 { font-size:32px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }