/* =====================================================================================
   Doxaio design system — "web3" look: deep dark canvas, aurora glow, glass surfaces,
   gradient accents, compact controls. Loaded after base.css/app.css so it restyles every
   page. Colours follow the school brand (--red = primary, --gold = accent).
   ===================================================================================== */
@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/inter-400.woff) format("woff")}
@font-face{font-family:Inter;font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/inter-500.woff) format("woff")}
@font-face{font-family:Inter;font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/inter-600.woff) format("woff")}
@font-face{font-family:Inter;font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/inter-700.woff) format("woff")}
@font-face{font-family:"Inter Display";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/display-600.woff) format("woff")}
@font-face{font-family:"Inter Display";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/display-700.woff) format("woff")}
@font-face{font-family:"Inter Display";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/display-800.woff) format("woff")}

:root{
  --font:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --display:"Inter Display",Inter,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --brand:var(--red);--accent:var(--gold);
  --grad:linear-gradient(135deg,var(--red),var(--gold));
  --grad-text:linear-gradient(100deg,var(--red),var(--gold));
  --grad-soft:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  --r:16px;--r-sm:10px;
  /* dark (default) */
  --bg:#070a13;--bg2:#0b1020;--surface:rgba(255,255,255,.045);--surface-2:rgba(255,255,255,.07);--solid:#0e1424;
  --text:#eef1fa;--ink:#eef1fa;--muted:#99a3b9;--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16);
  --white:#0e1424;--grey:rgba(255,255,255,.04);--red-l:rgba(255,255,255,.07);
  --shadow:0 10px 40px rgba(0,0,0,.45);--glow:0 0 0 1px rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.35);
  --ok:#34d399;--warn:#fbbf24;--bad:#fb7185;--info:#60a5fa;
  color-scheme:dark;
}
html[data-theme=light]{
  --bg:#f3f5fb;--bg2:#e9edf8;--surface:rgba(255,255,255,.78);--surface-2:#fff;--solid:#fff;
  --text:#0f1424;--ink:#0f1424;--muted:#58627a;--line:rgba(15,20,36,.10);--line-2:rgba(15,20,36,.18);
  --white:#fff;--grey:rgba(15,20,36,.04);--red-l:rgba(15,20,36,.05);
  --shadow:0 10px 36px rgba(20,30,70,.12);--glow:0 0 0 1px rgba(15,20,36,.05),0 8px 24px rgba(20,30,70,.08);
  --ok:#0f9d6a;--warn:#b7791f;--bad:#d1304a;--info:#2563eb;
  color-scheme:light;
}

/* ---- canvas ---- */
html{background:var(--bg)}
body{font-family:var(--font);font-size:15px;line-height:1.6;color:var(--text);background:transparent;-webkit-font-smoothing:antialiased;position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--bg)}
@supports (background:color-mix(in srgb,red,blue)){
:root{--grad-text:linear-gradient(100deg,color-mix(in srgb,var(--red) 62%,#fff),var(--gold))}
body::before{background:
  radial-gradient(55% 45% at 12% -8%,color-mix(in srgb,var(--red) 34%,transparent),transparent 72%),
  radial-gradient(45% 40% at 95% 2%,rgba(99,102,241,.26),transparent 70%),
  radial-gradient(45% 40% at 75% 105%,color-mix(in srgb,var(--gold) 20%,transparent),transparent 70%),
  var(--bg)}
html[data-theme=light] body::before{background:
  radial-gradient(55% 45% at 12% -8%,color-mix(in srgb,var(--red) 14%,transparent),transparent 72%),
  radial-gradient(45% 40% at 95% 2%,rgba(99,102,241,.12),transparent 70%),
  var(--bg)}
}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 80%);mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 80%)}
::selection{background:color-mix(in srgb,var(--red) 55%,transparent);color:#fff}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;color:var(--text)}
h1{font-weight:800}h2,h3{font-weight:700}
.muted,.small.muted{color:var(--muted)}
.link-red,.panel h3 a{color:color-mix(in srgb,var(--red) 55%,#fff);font-weight:600}
html[data-theme=light] .link-red{color:var(--red)}
.mono{font-family:var(--mono)}

/* ---- buttons: compact, glowing, never stretched ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:12px;border:1px solid transparent;background:var(--grad);color:#fff;font:600 .86rem/1 var(--font);letter-spacing:.005em;white-space:nowrap;width:auto;max-width:100%;cursor:pointer;
  box-shadow:0 6px 18px color-mix(in srgb,var(--red) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .15s,box-shadow .15s,filter .15s,background .15s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08);background:var(--grad);box-shadow:0 10px 26px color-mix(in srgb,var(--red) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.btn:active{transform:translateY(0)}
.btn.sm{height:32px;padding:0 13px;font-size:.78rem;border-radius:10px}
.btn.block{display:flex;width:100%}
.btn.outline,.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line-2);box-shadow:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.outline:hover,.btn.ghost:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--red) 55%,var(--line-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 16%,transparent);filter:none}
.btn.gold{background:linear-gradient(135deg,var(--gold),color-mix(in srgb,var(--gold) 70%,#fff));color:#1b1405;box-shadow:0 6px 18px color-mix(in srgb,var(--gold) 35%,transparent)}
.btn.danger{background:rgba(251,113,133,.1);color:var(--bad);border:1px solid rgba(251,113,133,.4);box-shadow:none}
.btn.danger:hover{background:rgba(251,113,133,.2);box-shadow:none}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.form-actions{display:flex;gap:10px;flex-wrap:wrap}.form-actions .btn{flex:0 0 auto}
form.inline .btn,.panel .btn+.btn{margin-left:2px}

/* ---- inputs ---- */
.field{display:grid;gap:6px;align-content:start}
.field label,label{font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.01em}
.field input,.field select,.field textarea,input[type=text],input[type=search],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],input[type=url],input[type=time],input[type=datetime-local],select,textarea{
  width:100%;padding:10px 13px;min-height:42px;border:1px solid var(--line-2);border-radius:var(--r-sm);font:inherit;font-size:.92rem;color:var(--text);background:var(--surface);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .15s,box-shadow .15s,background .15s}
html[data-theme=dark] .field input,html[data-theme=dark] .field select,html[data-theme=dark] .field textarea,html[data-theme=dark] select,html[data-theme=dark] textarea,html[data-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]){background:rgba(255,255,255,.04)}
.field input:focus,.field select:focus,.field textarea:focus,input:focus,select:focus,textarea:focus{outline:0;border-color:color-mix(in srgb,var(--red) 70%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 22%,transparent);background:var(--surface-2)}
.field input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2399a3b9' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
select option{background:var(--solid);color:var(--text)}
input[type=checkbox],input[type=radio]{width:17px;height:17px;min-height:0;accent-color:var(--red);padding:0}
input[type=file]{padding:8px;font-size:.85rem;color:var(--muted)}
input[type=file]::file-selector-button{margin-right:12px;padding:6px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface-2);color:var(--text);font:600 .78rem var(--font);cursor:pointer}
input[type=color]{padding:3px;height:42px;cursor:pointer}
.help,small.help{color:var(--muted);font-size:.76rem}.ferr{color:var(--bad)}
.form{gap:16px}

/* ---- surfaces (glass) ---- */
.card,.panel,.kpi,.strip,.login-card,details.faq,.flow .step,.price-card,.stack span,.cbt-q,.checklist li{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--glow);color:var(--text);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.card{padding:22px}
.card p{color:var(--muted)}
.card.hover{transition:transform .2s,border-color .2s,box-shadow .2s}
.card.hover:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--red) 50%,var(--line-2));box-shadow:0 18px 44px rgba(0,0,0,.35),0 0 0 1px color-mix(in srgb,var(--red) 35%,transparent)}
.panel{padding:22px;margin-bottom:18px}
.panel h3{font-size:1rem;margin-bottom:14px;color:var(--text)}
.ico{background:color-mix(in srgb,var(--red) 18%,transparent);color:color-mix(in srgb,var(--red) 55%,#fff);border:1px solid color-mix(in srgb,var(--red) 30%,transparent);border-radius:12px}
html[data-theme=light] .ico{color:var(--red)}
.tag{background:color-mix(in srgb,var(--red) 16%,transparent);color:color-mix(in srgb,var(--red) 50%,#fff);border:1px solid color-mix(in srgb,var(--red) 28%,transparent)}
html[data-theme=light] .tag{color:var(--red)}
hr{border:0;border-top:1px solid var(--line)!important}

/* ---- public / marketing chrome ---- */
.gbanner{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 22%,transparent),color-mix(in srgb,var(--red) 22%,transparent));color:var(--text);border-bottom:1px solid var(--line);font-weight:600}
.topbar{background:rgba(0,0,0,.28);color:var(--muted);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-theme=light] .topbar{background:rgba(255,255,255,.55)}
.topbar a{color:var(--text);opacity:.85;font-weight:500}.topbar a:hover{opacity:1;text-decoration:none;color:var(--gold)}
.site-header{background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--line);box-shadow:none;-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px)}
.site-header .container{padding:10px 0}
.brand b{font-family:var(--display);color:var(--text);font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.brand small{color:var(--muted);font-size:.72rem}
.brand svg,.brand img{width:42px;height:42px;border-radius:10px}
.nav{gap:4px}
.nav a{padding:8px 13px;border:0;border-radius:10px;font-size:.86rem;font-weight:500;color:var(--muted);transition:.15s}
.nav a:hover{color:var(--text);background:var(--surface-2)}
.nav a.active{color:var(--text);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.hdr-actions{gap:8px}
.menu-btn{color:var(--text);width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);display:none;place-items:center;padding:0}
.menu-btn svg{width:20px;height:20px}
.drawer{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(3,5,12,.6)}
.drawer nav{background:var(--solid);border-left:1px solid var(--line)}
.drawer nav a{color:var(--text);border-bottom:1px solid var(--line);border-radius:0;padding:13px 6px;font-weight:500}
.drawer-title{color:var(--text)}

/* theme toggle (lives in the header; floating only on login/error pages) */
.theme-fab{position:static;display:inline-grid;place-items:center;width:38px;height:38px;min-width:38px;padding:0;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-size:1.05rem;line-height:1;cursor:pointer;box-shadow:none;transform:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.theme-fab:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--red) 55%,var(--line-2));transform:none}
.theme-fab .tl{display:none}
.theme-fab.floating{position:fixed;top:14px;right:14px;z-index:9999}
.pbar .theme-fab,.who .theme-fab{margin-right:2px}

/* ---- hero ---- */
.hero{background:transparent;color:var(--text);min-height:540px;padding:56px 0 64px;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;left:50%;top:-30%;width:900px;height:900px;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--red) 20%,transparent),transparent)}
.hero .container{position:relative;z-index:2;gap:40px}
.hero small.kick{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);font-size:.74rem;letter-spacing:.1em;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero small.kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(52,211,153,.18)}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.04;margin:18px 0 16px;letter-spacing:-.035em;color:var(--text)}
.hero h1 em{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero p{color:var(--muted);font-size:1.05rem;max-width:520px;opacity:1}
.hero .actions{gap:10px}
.hero .actions .btn{height:44px;padding:0 22px;font-size:.9rem}
.hero.hero-img{background-size:cover!important;background-position:center;border-bottom:1px solid var(--line)}
.hero.hero-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 45%,transparent 100%),linear-gradient(0deg,var(--bg),transparent 30%)}
.dots{display:none}
.hero-art{display:flex;justify-content:center;align-items:center}
/* orbit art (replaces the old cartoon) */
.orbit{position:relative;width:min(420px,88vw);aspect-ratio:1;display:grid;place-items:center}
.orbit .ring{position:absolute;border-radius:50%;border:1px solid var(--line-2)}
.orbit .r1{inset:0;border-style:dashed;animation:spin 60s linear infinite}
.orbit .r2{inset:11%;border-color:color-mix(in srgb,var(--red) 40%,var(--line-2))}
.orbit .r3{inset:24%;background:radial-gradient(closest-side,color-mix(in srgb,var(--red) 22%,transparent),transparent);border-color:transparent}
.orbit .core{position:relative;z-index:2;width:34%;aspect-ratio:1;border-radius:28%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line-2);box-shadow:0 0 60px color-mix(in srgb,var(--red) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.orbit .core svg,.orbit .core img{width:64%;height:64%;object-fit:contain}
.orbit .chip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:12px;font-size:.76rem;font-weight:600;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap}
.orbit .chip i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--ok));box-shadow:0 0 10px var(--c,var(--ok))}
.orbit .c1{top:9%;left:-2%}.orbit .c2{top:44%;right:-6%}.orbit .c3{bottom:8%;left:6%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.orbit .r1{animation:none}}
.mock{background:var(--surface-2);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px color-mix(in srgb,var(--red) 25%,transparent);color:var(--text);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.mock-bar{background:transparent;border-bottom:1px solid var(--line)}.mock-bar i{background:var(--line-2)}
.mock-body{background:transparent}
.mk{background:var(--surface);border:1px solid var(--line);border-radius:12px}.mk b{color:var(--text);font-family:var(--display)}.mk span{color:var(--muted)}
.mk.wide{background:var(--grad);border:0;color:#fff}

/* ---- sections ---- */
.strip{margin:-28px auto 0;position:relative;z-index:5;overflow:hidden}
.strip .item{border-right:1px solid var(--line);padding:20px 22px}
.strip b{color:var(--text)}.strip span{color:var(--muted)}
section.block{padding:72px 0}
section.alt{background:linear-gradient(180deg,transparent,var(--grey),transparent)}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.03em}
.sec-head h2::after{height:3px;width:44px;background:var(--grad);border-radius:3px}
.sec-head p{color:var(--muted)}
.thumb{border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);background:var(--surface)}
.aurora-card{position:relative;width:100%;height:100%;min-height:260px;display:grid;place-items:center;text-align:center;padding:24px;overflow:hidden;
  background:radial-gradient(60% 60% at 30% 20%,color-mix(in srgb,var(--red) 40%,transparent),transparent 70%),radial-gradient(60% 60% at 80% 90%,color-mix(in srgb,var(--gold) 28%,transparent),transparent 70%),var(--solid)}
.aurora-card .crest-lg{width:92px;height:92px;margin:0 auto 12px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}
.aurora-card .crest-lg svg,.aurora-card .crest-lg img{width:100%;height:100%;object-fit:contain}
.aurora-card b{display:block;font-family:var(--display);font-size:1.25rem}
.aurora-card span{color:var(--muted);font-size:.85rem}
.page-hero{background:transparent;color:var(--text);padding:60px 0 36px;border-bottom:1px solid var(--line);position:relative}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.035em}
.page-hero p,.crumbs{color:var(--muted);opacity:1}
.page-hero::after{content:"";position:absolute;left:0;bottom:-1px;width:160px;height:2px;background:var(--grad)}
.prose p{color:var(--muted)}.prose h3{color:var(--text)}
.flow .step{padding:20px}
.flow .step::before{background:var(--grad);box-shadow:0 6px 18px color-mix(in srgb,var(--red) 40%,transparent);border-radius:12px}
.flow ul{color:var(--muted)}
.stack span{padding:10px 16px;font-weight:600;font-size:.88rem}
.price-card.pop{border-color:color-mix(in srgb,var(--red) 70%,var(--line-2));box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 45%,transparent),0 20px 50px color-mix(in srgb,var(--red) 22%,transparent)}
.price-card .price{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.news-list .row{border-color:var(--line)}.news-list time{color:var(--muted)}
.chip{background:var(--surface);border:1px solid var(--line-2);color:var(--text)}.chip.on{background:var(--grad);border-color:transparent;color:#fff}
.pwa-hint{background:var(--surface);border:1px solid var(--line-2);color:var(--muted);border-radius:var(--r)}
.tagline{background:transparent;color:var(--muted);border-block:1px solid var(--line);font-weight:600;letter-spacing:.04em;font-size:.82rem}
.site-footer{background:linear-gradient(180deg,transparent,rgba(0,0,0,.35));color:var(--muted);border-top:1px solid var(--line);position:relative}
html[data-theme=light] .site-footer{background:linear-gradient(180deg,transparent,rgba(15,20,36,.06))}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--red),var(--gold),transparent)}
.site-footer h4{color:var(--text)}.site-footer .brand b{color:var(--text)!important}.site-footer .brand small{color:var(--muted)!important}
.site-footer a:hover{color:var(--gold)}.site-footer .legal{border-color:var(--line)}
.gallery .thumb{border-radius:14px}

/* ---- tables ---- */
.table-wrap{border:1px solid var(--line);border-radius:14px;overflow-x:auto;background:var(--surface)}
.panel .table-wrap{margin:0}
table.t{border-collapse:separate;border-spacing:0;font-size:.86rem;color:var(--text)}
table.t th{background:var(--grey);color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
table.t td{padding:12px 14px;border-bottom:1px solid var(--line)}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background .12s}table.t tbody tr:hover{background:var(--grey)}
table.t td a{color:color-mix(in srgb,var(--red) 55%,#fff);font-weight:600}html[data-theme=light] table.t td a{color:var(--red)}
.pill{padding:3px 10px;font-size:.7rem;border-radius:999px;font-weight:700;letter-spacing:.02em;border:1px solid transparent}
.pill.ok{background:rgba(52,211,153,.12);color:var(--ok);border-color:rgba(52,211,153,.3)}
.pill.warn{background:rgba(251,191,36,.12);color:var(--warn);border-color:rgba(251,191,36,.3)}
.pill.bad{background:rgba(251,113,133,.12);color:var(--bad);border-color:rgba(251,113,133,.3)}
.pill.gray{background:var(--grey);color:var(--muted);border-color:var(--line)}
.pager a,.pager span{background:var(--surface);border:1px solid var(--line-2);color:var(--text);border-radius:9px}.pager .cur{background:var(--grad);border-color:transparent;color:#fff}
.empty{border:1px dashed var(--line-2);border-radius:var(--r);color:var(--muted);background:var(--grey)}
.alert{background:rgba(52,211,153,.1);color:var(--ok);border:1px solid rgba(52,211,153,.3);border-radius:12px}
.alert.err{background:rgba(251,113,133,.1);color:var(--bad);border-color:rgba(251,113,133,.35)}
.alert.warn{background:rgba(251,191,36,.1);color:var(--warn);border-color:rgba(251,191,36,.3)}
.msg{background:rgba(52,211,153,.1);color:var(--ok)}.msg.err{background:rgba(251,113,133,.1);color:var(--bad)}
details.faq{padding:14px 18px}details.faq p{color:var(--muted)}

/* ---- portal / admin shell ---- */
.portal{background:transparent;grid-template-columns:264px 1fr}
.side{background:linear-gradient(180deg,color-mix(in srgb,var(--red) 22%,var(--solid)),var(--solid) 55%);color:var(--text);border-right:1px solid var(--line);padding:18px 12px}
html[data-theme=light] .side{background:linear-gradient(180deg,color-mix(in srgb,var(--red) 10%,#fff),#fff 55%)}
.side .brand{padding:6px 8px 16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.side .brand b{color:var(--text);font-size:1rem}.side .brand small{color:var(--muted)}
.side .brand img,.side .brand svg{border-radius:10px;background:var(--surface-2);padding:3px}
.side a,.side .logout button{color:var(--muted);opacity:1;border-radius:10px;padding:9px 12px;font-size:.86rem;font-weight:500;transition:.12s;position:relative}
.side a:hover,.side .logout button:hover{background:var(--surface-2);color:var(--text)}
.side a.active{background:color-mix(in srgb,var(--red) 22%,transparent);color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 40%,transparent)}
.side a.active::before{content:"";position:absolute;left:-12px;top:20%;bottom:20%;width:3px;border-radius:0 3px 3px 0;background:var(--grad)}
.side a svg{width:18px;height:18px;opacity:.9}
.side .grp{color:var(--muted);opacity:.7;font-size:.66rem;letter-spacing:.14em;margin:18px 12px 6px;font-weight:700}
.main{background:transparent}
.pbar{background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid var(--line);box-shadow:none;padding:12px 28px;-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);color:var(--text)}
.pbar-title,.pbar h1{font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.pbar .who{gap:8px}
.avatar{background:var(--grad);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--red) 40%,transparent);width:36px;height:36px}
.who select{background-color:var(--surface);color:var(--text);border-color:var(--line-2);min-height:36px;padding:6px 30px 6px 10px;font-size:.8rem}
.bell{border-radius:10px;border:1px solid var(--line-2);background:var(--surface);width:38px;height:38px}
.count{background:var(--grad);color:#fff;font-weight:700}
.pbody{padding:28px 30px 40px;max-width:1500px}
.page-head{margin-bottom:22px}
.page-head h1{font-size:1.65rem;letter-spacing:-.03em}
.page-head p,.page-head .sub{color:var(--muted)}
.tabs-nav{border-color:var(--line)}.tabs-nav a{color:var(--muted);border-bottom-width:2px;font-size:.88rem}.tabs-nav a:hover{color:var(--text)}.tabs-nav a.on{color:var(--text);border-color:var(--red)}
.filters{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.kpis{gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi{padding:18px 18px 16px;overflow:hidden;position:relative;min-width:0}
.kpi::before{content:"";position:absolute;left:0;right:0;top:0;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--c,var(--red)),transparent)}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c,var(--red)) 30%,transparent),transparent);pointer-events:none}
.kpi span{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.kpi b{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.03em;margin:6px 0 4px;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi small{color:var(--ok);font-size:.74rem;font-weight:600}
.bars{gap:10px}.bars div{background:linear-gradient(180deg,var(--red),color-mix(in srgb,var(--gold) 70%,var(--red)));border-radius:8px 8px 0 0;box-shadow:0 0 18px color-mix(in srgb,var(--red) 35%,transparent)}
.bars div em,.bars div .bv{color:var(--muted)}
.progress{background:var(--grey);border:1px solid var(--line)}.progress i{background:var(--grad)}
.plist li{border-color:var(--line)}
.checklist li{padding:12px 14px}.checklist .tick{background:var(--line-2)}.checklist .done .tick{background:var(--ok)}
.stack-form{max-width:640px}
.timeline{border-color:var(--line-2)}
.bubble{background:var(--surface-2);border:1px solid var(--line)}.bubble.me{background:color-mix(in srgb,var(--red) 20%,transparent)}
.gate input{background:var(--surface)}
.cbt-timer{background:var(--surface-2);border:1px solid var(--line-2);color:var(--text)}
.cbt-nav button{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.cbt-q .opt{border-color:var(--line-2)}
.score-grid input.sc,.score-grid select.st{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.rc{background:#fff;color:#202124;border-color:#202124}.rc *{color:inherit}.rc h2,.rc .red{color:var(--red)}
.rc table.t th{background:#eee;color:#222;position:static}.rc table.t td{border-color:#cfd3d8;color:#222}
.rc table.t tbody tr:hover{background:transparent}

/* ---- login / error ---- */
.login-bg{background:transparent;padding:24px}
.login-card{padding:34px 30px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow),0 0 80px color-mix(in srgb,var(--red) 18%,transparent);width:min(430px,100%)}
.login-card h1{color:var(--text);font-size:1.45rem;letter-spacing:-.03em}.login-card .sub{color:var(--muted)}
.login-card .crest svg,.login-card .crest img{width:64px;height:64px;filter:drop-shadow(0 8px 20px color-mix(in srgb,var(--red) 45%,transparent))}
.tabs{border-color:var(--line)}.tabs button{color:var(--muted)}.tabs button.on{color:var(--text);border-color:var(--red)}
.trust{color:var(--muted)}.errcode{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---- mobile ---- */
.install-sheet{position:fixed;left:12px;right:12px;bottom:84px;z-index:9998;display:none;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--solid);border:1px solid var(--line-2);box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--red) 25%,transparent);animation:rise .35s ease both}
.install-sheet.show{display:flex}
.install-sheet img{width:46px;height:46px;border-radius:12px;object-fit:contain;background:var(--surface-2);padding:4px;flex:none}
.install-sheet .tx{min-width:0;flex:1}.install-sheet b{display:block;font-size:.92rem;color:var(--text)}.install-sheet p{font-size:.78rem;color:var(--muted);line-height:1.35;margin-top:2px}
.install-sheet .acts{display:flex;gap:8px;flex:none;align-items:center}
.install-sheet .x{background:none;border:0;color:var(--muted);font-size:.8rem;font-weight:600;cursor:pointer;padding:6px}
@keyframes rise{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:821px){.install-sheet{left:auto;right:20px;bottom:20px;max-width:420px}}
@media (max-width:1000px){.portal{grid-template-columns:1fr}.menu-btn{display:grid}}
@media (max-width:820px){
  .menu-btn{display:grid}
  .site-header .container{padding:9px 0}
  .brand svg,.brand img{width:38px;height:38px}.brand b{font-size:1rem}.brand small{font-size:.66rem}
  .hero{min-height:0;padding:34px 0 52px}.hero h1{font-size:2.3rem}.hero p{font-size:.98rem}.hero .actions .btn{height:42px;padding:0 18px;font-size:.86rem}
  .hero-art{position:relative;right:auto;bottom:auto;opacity:1;width:100%;margin-top:18px;z-index:1}.hero .container>div:first-child{position:relative;z-index:2}.orbit{width:min(290px,78vw);margin:10px auto 0}.orbit .chip{font-size:.68rem;padding:6px 10px}.orbit .c2{right:-2%}
  .strip{margin-top:0;grid-template-columns:1fr 1fr}
  section.block{padding:48px 0}
  .app-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px 4% 6px;background:transparent}
  .app-tiles a{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:16px;padding:14px 6px;font-size:.78rem;font-weight:600;box-shadow:var(--glow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .app-tiles a .ico{width:42px;height:42px;margin:0 auto 8px}
  .bottom-nav{left:10px;right:10px;bottom:10px;border-radius:18px;background:color-mix(in srgb,var(--solid) 88%,transparent);border:1px solid var(--line-2);box-shadow:0 12px 40px rgba(0,0,0,.5);overflow:hidden;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .bottom-nav a{color:var(--muted);padding:9px 4px;font-size:.7rem}.bottom-nav a.active{background:color-mix(in srgb,var(--red) 22%,transparent);color:var(--text)}
  body.has-bottom{padding-bottom:84px}
  .pnav-mobile{left:10px;right:10px;bottom:10px;border-radius:18px;background:color-mix(in srgb,var(--solid) 88%,transparent);border:1px solid var(--line-2);box-shadow:0 12px 40px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overflow:hidden}
  .pnav-mobile a{color:var(--muted)}.pnav-mobile a.active{color:var(--text);background:color-mix(in srgb,var(--red) 22%,transparent)}
  .pbody{padding:16px 14px 96px}.pbar{padding:10px 14px}
  .install-sheet{bottom:88px}
  .side{display:none}body.side-open .side{display:block;background:var(--solid)}
  table.cards-sm tr{background:var(--surface);border-color:var(--line)}
}
@media (max-width:560px){.kpis{grid-template-columns:1fr 1fr}.kpi{padding:14px}.kpi b{font-size:1.35rem}.strip{grid-template-columns:1fr}.strip .item{border-right:0;border-bottom:1px solid var(--line)}}
@media print{body::before,body::after,.hero::after{display:none}html,body{background:#fff!important;color:#000}.card,.panel{background:#fff!important;color:#000;box-shadow:none;border:0}.install-sheet,.theme-fab{display:none!important}}

/* ---- polish pass: stat rows, charts, filter bars ---- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 20px}
.stat-row .kpi{margin:0}
.stat-row b{display:block;font-size:inherit}
.panel+.panel,.kpis+.panel,.stat-row+.panel{margin-top:16px}
.bars{justify-content:center;gap:clamp(8px,2vw,18px);height:190px}
.bars div{flex:1 1 0;max-width:64px;min-width:18px}
.bars-wrap{padding:6px 4px 30px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filters input,.filters select{width:auto;flex:1 1 180px;max-width:300px;min-height:38px;padding:8px 12px}
.filters .btn{flex:0 0 auto}
.page-head .actions .btn{min-height:36px}
@media (max-width:640px){.filters input,.filters select{flex:1 1 100%;max-width:none}.bars{height:150px}.stat-row{grid-template-columns:1fr 1fr}}

/* ---- vivid red + uniform mobile nav ---- */
:root{--hot:#ff1f2f;--hot-2:#d4001a}
@supports (background:color-mix(in srgb,red,blue)){:root{--hot:color-mix(in srgb,var(--red) 30%,#ff1f2f);--hot-2:color-mix(in srgb,var(--red) 70%,#c80018)}}
:root{--grad:linear-gradient(135deg,var(--hot),var(--hot-2));--grad-text:linear-gradient(100deg,var(--hot),color-mix(in srgb,var(--hot) 60%,#ff8a8a))}
.btn{box-shadow:0 8px 24px color-mix(in srgb,var(--hot) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
.btn:hover{box-shadow:0 12px 30px color-mix(in srgb,var(--hot) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
@media (max-width:900px){
  .bottom-nav,.pnav-mobile{display:flex!important}
  .bottom-nav a,.pnav-mobile a{flex:1 1 0;min-width:0;justify-content:center}
  .bottom-nav a.active,.pnav-mobile a.active{color:var(--hot);background:color-mix(in srgb,var(--hot) 16%,transparent)}
}
a:not(.btn):not(.brand){--lnk:var(--hot)}
.panel h3 a,.login-card a,td a,.sec-head a{color:var(--hot)}
.app-tiles a svg,.strip .item svg,.nav-ic,.side a.active svg{color:var(--hot)}

/* ---- uploaded logos: natural aspect ratio, bigger, on a light plate so dark wordmarks stay readable ---- */
.brand img[src^="/media/"],.brand img[src^="/site-media/"]{width:auto;height:50px;max-width:210px;object-fit:contain;background:#fff;padding:5px 10px;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.brand.notext span{display:none}
.brand.notext img{height:54px;max-width:240px}
.side .brand img[src^="/media/"],.side .brand img[src^="/site-media/"]{height:44px;max-width:150px;padding:4px 8px}
.side .brand.notext img{max-width:100%}
.site-footer .brand img[src^="/site-media/"]{height:56px}
@media (max-width:900px){
  .brand img[src^="/media/"],.brand img[src^="/site-media/"]{height:42px;max-width:150px;padding:4px 8px}
  .brand.notext img{height:44px;max-width:190px}
}