/* Hexitronics NodexLabs — demo dashboard styles */
:root{
  color-scheme: light;
  --bg:#eef2f8; --bg2:#e4eaf4;
  --card:#ffffff; --card2:#f6f8fc; --line:#dde3ee; --line2:#c9d2e2;
  --ink:#0d1726; --ink2:#46536a; --ink3:#7a879c;
  --brand:#1663d6; --brand2:#0e4aa8; --brandSoft:#e3edfd;
  --good:#12a150; --goodSoft:#e2f6ea; --warn:#d98a00; --warnSoft:#fdf1d8; --crit:#dc3434; --critSoft:#fde4e4; --info:#2a78d6; --infoSoft:#e3eefb;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#6250d6; --s8:#e34948;
  --grid:#e6ebf3; --axis:#8a96aa;
  --shadow:0 1px 2px rgba(15,30,60,.06),0 4px 14px rgba(15,30,60,.06);
  --r:14px;
  --hero1:#0b3d91; --hero2:#1663d6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#070d18; --bg2:#0b1424;
    --card:#0f1a2c; --card2:#13213a; --line:#1d2c46; --line2:#2a3d5e;
    --ink:#e9eef7; --ink2:#a9b5c9; --ink3:#71809a;
    --brand:#3d8bff; --brand2:#2a6fe0; --brandSoft:#13284a;
    --good:#2fc672; --goodSoft:#0f2e20; --warn:#f2a51a; --warnSoft:#33260b; --crit:#ff5a5a; --critSoft:#3a1416; --info:#4a9af0; --infoSoft:#12253f;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#2f9a2f; --s7:#9085e9; --s8:#e66767;
    --grid:#1a2840; --axis:#6c7b95;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
    --hero1:#0a1f45; --hero2:#0f3b86;
  }
}
:root[data-theme="dark"]{
    color-scheme: dark;
    --bg:#070d18; --bg2:#0b1424;
    --card:#0f1a2c; --card2:#13213a; --line:#1d2c46; --line2:#2a3d5e;
    --ink:#e9eef7; --ink2:#a9b5c9; --ink3:#71809a;
    --brand:#3d8bff; --brand2:#2a6fe0; --brandSoft:#13284a;
    --good:#2fc672; --goodSoft:#0f2e20; --warn:#f2a51a; --warnSoft:#33260b; --crit:#ff5a5a; --critSoft:#3a1416; --info:#4a9af0; --infoSoft:#12253f;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#2f9a2f; --s7:#9085e9; --s8:#e66767;
    --grid:#1a2840; --axis:#6c7b95;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
    --hero1:#0a1f45; --hero2:#0f3b86;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-feature-settings:"tnum" 1}
a{color:var(--brand);text-decoration:none}
button{font:inherit;color:inherit}
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none}
.num{font-family:"Barlow Semi Condensed","Barlow",Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.wrap{max-width:1360px;margin:0 auto;padding:0 16px}
.muted{color:var(--ink3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;height:58px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);min-width:0}
.brand svg.logo{width:34px;height:34px;flex:none}
.brand b{font-size:16px;letter-spacing:.2px;display:block;line-height:1.1}
.brand small{font-size:11px;color:var(--ink3);display:block;line-height:1.1;letter-spacing:.4px}
.top .sp{flex:1}
.tbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap}
.tbtn:hover{border-color:var(--line2);background:var(--card2)}
.tbtn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.tbtn.primary:hover{background:var(--brand2)}
.tbtn.on{background:var(--brandSoft);border-color:var(--brand);color:var(--brand)}
.tbtn .ic{font-size:16px}
.clock{font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:6px;white-space:nowrap}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 var(--good);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- hero ---------- */
.hero{background:linear-gradient(120deg,var(--hero1),var(--hero2));color:#fff;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(800px 300px at 85% -10%,rgba(255,255,255,.14),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px);pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:20px;padding-top:22px;padding-bottom:22px;align-items:center}
.series{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:4px 10px;border-radius:6px}
.hero h1{margin:10px 0 4px;font-size:clamp(24px,3.4vw,36px);line-height:1.12;letter-spacing:-.3px}
.hero .tag{font-size:16px;opacity:.92;margin:0}
.hero .desc{font-size:13.5px;opacity:.78;margin:8px 0 0;max-width:720px}
.hero .meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:12.5px;opacity:.9}
.hero .meta span{display:inline-flex;align-items:center;gap:6px}
.statusbig{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:14px 18px;min-width:230px}
.statusbig .ring{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:#fff;flex:none}
.statusbig b{display:block;font-size:20px;letter-spacing:.5px}
.statusbig small{opacity:.85;font-size:12px}
.statusbig.good .ring{color:#12a150}
.statusbig.warn .ring{color:#d98a00;animation:blink 1.2s infinite}
.statusbig.crit .ring{color:#dc3434;animation:blink .7s infinite}
.statusbig.crit{background:rgba(220,52,52,.35);border-color:rgba(255,160,160,.6)}
.statusbig.warn{background:rgba(242,165,26,.28);border-color:rgba(255,215,140,.6)}
@keyframes blink{50%{transform:scale(.9);opacity:.7}}

/* ---------- control strip ---------- */
.ctrl{background:var(--card);border-bottom:1px solid var(--line)}
.ctrl .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px;padding-bottom:10px}
.ctrl .lbl{font-size:12px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px;margin-right:2px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card2);cursor:pointer;font-size:12.5px;font-weight:600;white-space:nowrap}
.chip:hover{border-color:var(--warn)}
.chip.active{background:var(--warnSoft);border-color:var(--warn);color:var(--ink)}
.chip.reset:hover{border-color:var(--good)}
.chip .ic{font-size:14px}
.ctrl .div{width:1px;height:22px;background:var(--line);margin:0 4px}

/* ---------- grid / cards ---------- */
main{padding:18px 0 40px}
.grid{display:grid;gap:14px}
.tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tiles.fixed{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
@media (max-width:1100px){.tiles.fixed{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
@media (max-width:520px){.tiles.fixed,.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{padding:12px}.tile .v{font-size:26px}.tile .tl{font-size:11px}.tile .foot{flex-wrap:wrap}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0;position:relative}
.card>h3,.card .hd h3{margin:0;font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--ink2);text-transform:uppercase}
.card .hd{display:flex;align-items:center;gap:10px;padding:14px 16px 6px;flex-wrap:wrap}
.card .hd .sp{flex:1}
.card .bd{padding:6px 16px 16px}
.section-t{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font-size:15px;font-weight:800;letter-spacing:.2px}
.section-t .ic{color:var(--brand);font-size:18px}
.section-t small{font-weight:500;color:var(--ink3);font-size:12.5px}
.row2{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.row3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row2e{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){.row2,.row3,.row2e{grid-template-columns:minmax(0,1fr)}}
.spot{outline:3px solid var(--brand);outline-offset:3px;transition:outline-color .3s}

/* ---------- tile ---------- */
.tile{padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.tile .tl{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.4px}
.tile .tl .ic{font-size:17px;color:var(--brand)}
.tile .tl .unit{margin-left:auto;font-weight:600;color:var(--ink3);text-transform:none;letter-spacing:0}
.tile .v{font-size:34px;font-weight:700;line-height:1.05}
.tile .v small{font-size:15px;font-weight:600;color:var(--ink3);margin-left:4px}
.tile .foot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink3);min-height:20px}
.tile .foot .dl{margin-left:auto;white-space:nowrap}
.tile svg.spark{width:100%;height:34px;display:block}
.tile.warn{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn),var(--shadow)}
.tile.crit{border-color:var(--crit);box-shadow:0 0 0 1px var(--crit),var(--shadow);animation:critglow 1.2s infinite}
@keyframes critglow{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 35%,transparent),var(--shadow)}}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.badge .ic{font-size:12px}
.b-good{background:var(--goodSoft);color:var(--good)}
.b-warn{background:var(--warnSoft);color:var(--warn)}
.b-crit{background:var(--critSoft);color:var(--crit)}
.b-info{background:var(--infoSoft);color:var(--info)}
.b-off{background:var(--card2);color:var(--ink3)}
.state-v{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800;letter-spacing:.5px}
.state-v .dot{width:14px;height:14px;border-radius:50%;flex:none}
@media (max-width:520px){.state-v{font-size:21px}}
.state-v.good .dot{background:var(--good);animation:pulse 1.8s infinite}
.state-v.off .dot{background:var(--ink3)}
.state-v.warn .dot{background:var(--warn)}
.state-v.crit .dot{background:var(--crit)}
.gauge{display:block;width:100%;max-width:190px;margin:-2px auto -8px}
.tankwrap{display:flex;align-items:center;gap:14px}
.tank{width:58px;height:78px;border:2px solid var(--line2);border-radius:10px;position:relative;overflow:hidden;flex:none;background:var(--card2)}
.tank i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,color-mix(in srgb,var(--s1) 75%,#fff),var(--s1));transition:height .8s}
.tank i:before{content:"";position:absolute;left:-50%;top:-5px;width:200%;height:10px;border-radius:45%;background:inherit;opacity:.6;animation:wave 3s linear infinite}
.tank.low i{background:linear-gradient(180deg,color-mix(in srgb,var(--warn) 70%,#fff),var(--warn))}
.tank.critl i{background:linear-gradient(180deg,color-mix(in srgb,var(--crit) 70%,#fff),var(--crit))}
@keyframes wave{to{transform:translateX(25%)}}
.tank b{position:absolute;left:0;right:0;height:1px;background:var(--line2)}

/* ---------- charts ---------- */
.chart{position:relative;width:100%}
.chart svg{display:block;width:100%;overflow:visible}
.chart .gl{stroke:var(--grid);stroke-width:1}
.chart .ax{fill:var(--ink3);font-size:11px}
.chart .thr{stroke-width:1.5;stroke-dasharray:5 4}
.chart .thr.w{stroke:var(--warn)} .chart .thr.c{stroke:var(--crit)}
.chart .thrl{font-size:10.5px;font-weight:600}
.chart .cross{stroke:var(--ink3);stroke-width:1;stroke-dasharray:3 3}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:3px;border-radius:2px;display:inline-block}
.legend i.sq{height:10px;width:10px;border-radius:3px}
.tip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);border-radius:10px;padding:8px 10px;font-size:12px;min-width:120px;z-index:5;opacity:0;transition:opacity .12s;white-space:nowrap}
.tip.show{opacity:1}
.tip .tt{color:var(--ink3);font-size:11px;margin-bottom:4px}
.tip .tr{display:flex;align-items:center;gap:8px}
.tip .tr i{width:10px;height:3px;border-radius:2px}
.tip .tr b{margin-left:auto;padding-left:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;background:transparent;padding:5px 10px;font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer}
.seg button.on{background:var(--brand);color:#fff}
.stats{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12px;color:var(--ink3);padding-top:6px}
.stats b{color:var(--ink);font-weight:700}

/* ---------- insights ---------- */
.ins{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.insc{display:flex;gap:12px;padding:14px;border-radius:12px;background:var(--card2);border:1px solid var(--line)}
.insc .ii{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex:none;background:var(--brandSoft);color:var(--brand)}
.insc.warn .ii{background:var(--warnSoft);color:var(--warn)}
.insc.good .ii{background:var(--goodSoft);color:var(--good)}
.insc.crit .ii{background:var(--critSoft);color:var(--crit)}
.insc p{margin:0;font-size:13.5px;color:var(--ink)}
.insc p b{font-weight:800}
.insc small{display:block;color:var(--ink3);font-size:11.5px;margin-top:3px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}

/* ---------- alerts ---------- */
.alerts{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto}
.alerts li{display:flex;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);align-items:flex-start}
.alerts li:last-child{border-bottom:0}
.alerts li .ai{font-size:18px;margin-top:1px;flex:none}
.alerts li.crit .ai{color:var(--crit)} .alerts li.warn .ai{color:var(--warn)} .alerts li.good .ai{color:var(--good)} .alerts li.info .ai{color:var(--info)}
.alerts li b{display:block;font-size:13px}
.alerts li span{font-size:12px;color:var(--ink2)}
.alerts li em{font-style:normal;display:block;font-size:12px;color:var(--ink3);margin-top:2px}
.alerts li time{margin-left:auto;font-size:11.5px;color:var(--ink3);white-space:nowrap;padding-left:8px}
.alerts li.new{animation:flashin 1.6s}
@keyframes flashin{0%{background:var(--warnSoft)}100%{background:transparent}}
.chan{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.chan span{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:5px;background:var(--card2);color:var(--ink2);border:1px solid var(--line)}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink3);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td.n,.tbl th.n{text-align:right}
.tbl tr:last-child td{border-bottom:0}
.tbl td.w{color:var(--warn);font-weight:700} .tbl td.c{color:var(--crit);font-weight:700}
.scrollx{overflow-x:auto}

/* ---------- device / stream ---------- */
.dev{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center}
.dev img{width:132px;border-radius:10px;display:block}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px}
.kv dt{color:var(--ink3)} .kv dd{margin:0;font-weight:600;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.stream{font:11.5px/1.5 ui-monospace,"Cascadia Mono",Consolas,monospace;background:#050a14;color:#7fe0a8;border-radius:10px;padding:10px 12px;height:178px;overflow:hidden;margin-top:12px;border:1px solid var(--line)}
.stream div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stream .t{color:#5a6f92}
.stream .k{color:#8fb8ff}
.arch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:600;color:var(--ink2);margin-top:12px}
.arch span{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;background:var(--card2);border:1px solid var(--line)}
.arch .ar{color:var(--ink3);background:none;border:0;padding:0}

/* ---------- value ---------- */
.val{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.valc{padding:16px;border-radius:12px;background:linear-gradient(160deg,var(--brandSoft),var(--card));border:1px solid var(--line)}
.valc b{font-size:28px;display:block;color:var(--brand);line-height:1.1}
.valc span{font-size:13px;color:var(--ink2)}
.ben{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 18px}
.ben li{display:flex;gap:8px;font-size:13.5px;align-items:flex-start}
.ben li .ic{color:var(--good);margin-top:2px;font-size:16px}
.roi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:700px){.roi{grid-template-columns:1fr}}
.roi label{display:block;font-size:12.5px;color:var(--ink2);margin:10px 0 4px;font-weight:600}
.roi label output{float:right;color:var(--ink);font-weight:800}
.roi input[type=range]{width:100%;accent-color:var(--brand)}
.roi .res{text-align:center;padding:18px;border-radius:14px;background:var(--goodSoft);border:1px solid color-mix(in srgb,var(--good) 40%,transparent)}
.roi .res b{display:block;font-size:34px;color:var(--good)}
.roi .res span{font-size:13px;color:var(--ink2)}

/* ---------- cta / footer ---------- */
.cta{margin-top:26px;border-radius:18px;padding:22px;background:linear-gradient(120deg,var(--hero1),var(--hero2));color:#fff;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.cta h2{margin:0;font-size:20px}
.cta p{margin:4px 0 0;opacity:.85;font-size:13.5px}
.cta .sp{flex:1}
.cta a.btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0b3d91;font-weight:700;padding:10px 16px;border-radius:10px}
.cta a.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
footer{padding:22px 0 40px;color:var(--ink3);font-size:12px;text-align:center}
.demo-note{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3)}

/* ---------- voice caption ---------- */
.caption{visibility:hidden;opacity:0;position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:60;max-width:min(720px,calc(100vw - 24px));background:rgba(8,16,32,.94);color:#fff;border-radius:14px;padding:12px 16px 12px 14px;display:flex;gap:12px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .35s,opacity .35s,visibility .35s;border:1px solid rgba(255,255,255,.12)}
.caption.show{transform:translate(-50%,0);visibility:visible;opacity:1}
.caption .wv{display:flex;gap:3px;align-items:center;height:22px;flex:none}
.caption .wv i{width:3px;background:#4ea1ff;border-radius:2px;animation:wv 1s ease-in-out infinite}
.caption .wv i:nth-child(2){animation-delay:.15s}.caption .wv i:nth-child(3){animation-delay:.3s}.caption .wv i:nth-child(4){animation-delay:.45s}
@keyframes wv{0%,100%{height:5px}50%{height:20px}}
.caption p{margin:0;font-size:14px;line-height:1.4}
.caption button{background:rgba(255,255,255,.12);border:0;border-radius:8px;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:#fff;flex:none}

/* ---------- toast ---------- */
.toasts{position:fixed;top:68px;right:14px;z-index:70;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 28px))}
.toast{background:var(--card);border:1px solid var(--line2);border-left:4px solid var(--warn);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:10px 12px;display:flex;gap:10px;animation:tin .3s}
.toast.crit{border-left-color:var(--crit)} .toast.good{border-left-color:var(--good)}
.toast .ic{font-size:20px;flex:none;margin-top:1px}
.toast.crit .ic{color:var(--crit)} .toast.warn .ic{color:var(--warn)} .toast.good .ic{color:var(--good)}
.toast b{display:block;font-size:13px} .toast span{font-size:12px;color:var(--ink2)}
@keyframes tin{from{transform:translateX(30px);opacity:0}}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr}
  .statusbig{min-width:0}
  .top .hide-m{display:none}
  .tile .v{font-size:30px}
  .dev{grid-template-columns:96px 1fr}.dev img{width:96px}
  .tbtn .lbl{display:none}
}

/* ---------- index ---------- */
.ihero{background:linear-gradient(125deg,var(--hero1),var(--hero2));color:#fff;position:relative;overflow:hidden}
.ihero:after{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 90% 0,rgba(255,255,255,.16),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px);pointer-events:none}
.ihero .wrap{position:relative;z-index:1;padding-top:44px;padding-bottom:40px;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center}
@media (max-width:860px){.ihero .wrap{grid-template-columns:1fr}}
.ihero h1{font-size:clamp(28px,4.4vw,46px);line-height:1.08;margin:12px 0 10px;letter-spacing:-.5px}
.ihero p{font-size:16px;opacity:.88;margin:0 0 18px;max-width:640px}
.ihero .acts{display:flex;flex-wrap:wrap;gap:10px}
.ihero .acts a,.ihero .acts button{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0b3d91;font-weight:700;padding:11px 16px;border-radius:11px;border:0;cursor:pointer;font-size:14px}
.ihero .acts .ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35)}
.ihero .feat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ihero .feat div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:14px}
.ihero .feat b{display:block;font-size:26px}
.ihero .feat span{font-size:12.5px;opacity:.85}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:22px 0 16px}
.filters input{flex:1 1 220px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--card);padding:0 14px;font:inherit;color:var(--ink);min-width:0}
.filters .chip.active{background:var(--brandSoft);border-color:var(--brand);color:var(--brand)}
.filters .chip:hover{border-color:var(--brand)}
.ucg{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.uc{display:flex;flex-direction:column;gap:10px;padding:16px;color:var(--ink);transition:transform .15s,border-color .15s}
.uc:hover{transform:translateY(-2px);border-color:var(--brand)}
.uc .uh{display:flex;gap:12px;align-items:center}
.uc .ui{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:24px;color:#fff;flex:none}
.uc .no{font-size:11px;font-weight:800;color:var(--ink3);letter-spacing:.8px}
.uc h3{margin:0;font-size:16px;line-height:1.2}
.uc p{margin:0;font-size:13px;color:var(--ink2)}
.uc .kp{display:flex;gap:6px;flex-wrap:wrap}
.uc .kp span{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--card2);border:1px solid var(--line);color:var(--ink2)}
.uc .go{margin-top:auto;display:flex;align-items:center;gap:6px;font-weight:700;color:var(--brand);font-size:13px}
.uc svg.spark{width:100%;height:36px}