/*  Mirek's Framework CSS ver.: 0-0-1 */
/*  Release: https://apq.cz/cdn/framework/v0-0-1.css  */
/*  Latest: https://apq.cz/cdn/framework/latest.css */
/*  Modified: 2026-03-23 16:33:05 */

/* ═══════════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════════ */
:root{
  --font:'Outfit',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --sbw:262px; --sbc:66px;
  --tbh:58px;
  --gap:20px;
  --r:14px; --rs:9px; --rl:22px;
  --t:.2s ease;
  --ts:.36s cubic-bezier(.4,0,.2,1);
  --tsp:.5s cubic-bezier(.34,1.56,.64,1);
}
[data-theme=dark]{
  --bg:#0d0e16; --bg2:#131420;
  --sf:rgba(255,255,255,.045); --sf2:rgba(255,255,255,.07);
  --bd:rgba(255,255,255,.09); --sh:rgba(255,255,255,.07);
  --no:6px 6px 18px rgba(0,0,0,.6),-4px -4px 12px rgba(255,255,255,.04);
  --ni:inset 4px 4px 12px rgba(0,0,0,.55),inset -3px -3px 8px rgba(255,255,255,.04);
  --ds:0 8px 32px rgba(0,0,0,.55);
  --tx:rgba(255,255,255,.9); --tx2:rgba(255,255,255,.45); --tx3:rgba(255,255,255,.2);
  --a:#ff6b35; --a2:#ffa726; --a3:#26c6da; --a4:#66bb6a;
  --da:rgba(255,107,53,.18);
  --er:#ef5350; --wa:#ffb300; --su:#43a047; --in:#29b6f6;
  --bl1:radial-gradient(circle,rgba(255,80,40,.3) 0%,transparent 70%);
  --bl2:radial-gradient(circle,rgba(255,170,40,.22) 0%,transparent 70%);
  --bl3:radial-gradient(circle,rgba(38,198,218,.16) 0%,transparent 70%);
}
[data-theme=light]{
  --bg:#e2e6ee; --bg2:#d8dce6;
  --sf:rgba(255,255,255,.62); --sf2:rgba(255,255,255,.82);
  --bd:rgba(255,255,255,.92); --sh:rgba(255,255,255,.8);
  --no:6px 6px 18px rgba(150,160,180,.65),-4px -4px 12px rgba(255,255,255,.9);
  --ni:inset 4px 4px 12px rgba(150,160,180,.5),inset -3px -3px 8px rgba(255,255,255,.9);
  --ds:6px 6px 18px rgba(150,160,180,.6),-4px -4px 12px rgba(255,255,255,.85);
  --tx:#1b1d2a; --tx2:#5a6080; --tx3:#9aa0bc;
  --a:#e55228; --a2:#e8970a; --a3:#0fa8bc; --a4:#3d9444;
  --da:rgba(229,82,40,.13);
  --er:#c62828; --wa:#e65100; --su:#2e7d32; --in:#0277bd;
  --bl1:radial-gradient(circle,rgba(255,100,60,.16) 0%,transparent 70%);
  --bl2:radial-gradient(circle,rgba(255,170,50,.12) 0%,transparent 70%);
  --bl3:radial-gradient(circle,rgba(38,198,218,.1) 0%,transparent 70%);
}

/* ═══════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--tx);min-height:100vh;overflow-x:hidden;transition:background .4s,color .4s;font-size:14px;line-height:1.5}
a{text-decoration:none;color:inherit}
button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit}
input,select,textarea{font-family:inherit;color:var(--tx)}
svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}

/* ═══════════════════════════════════════════════════
   BACKGROUND SCENE
═══════════════════════════════════════════════════ */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bl{position:absolute;border-radius:50%;filter:blur(100px);animation:bf 20s ease-in-out infinite alternate}
.bl1{width:600px;height:600px;top:-120px;left:-120px;background:var(--bl1);animation-duration:18s}
.bl2{width:420px;height:420px;bottom:-90px;right:-90px;background:var(--bl2);animation-duration:24s;animation-direction:alternate-reverse}
.bl3{width:320px;height:320px;top:42%;left:38%;background:var(--bl3);animation-duration:15s}
.noise{position:absolute;inset:0;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}
@keyframes bf{0%{transform:translate(0,0) scale(1)}50%{transform:translate(35px,-25px) scale(1.05)}100%{transform:translate(-20px,30px) scale(.97)}}

/* ═══════════════════════════════════════════════════
   GLASS CARD
═══════════════════════════════════════════════════ */
.card{
  background:var(--sf);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--bd);
  box-shadow:var(--no);
  border-radius:var(--rl);
  padding:22px;
  position:relative;overflow:hidden;
  transition:box-shadow var(--t),transform var(--t);
}
.card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--sh) 40%,var(--sh) 60%,transparent);pointer-events:none;border-radius:var(--rl) var(--rl) 0 0}
.inset{box-shadow:var(--ni);background:var(--bg2);border-radius:var(--rs)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.ct{font-size:.95rem;font-weight:700}
.cs{font-size:.72rem;color:var(--tx2);margin-top:2px}

/* ═══════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════ */
#sb{
  position:fixed;top:14px;left:14px;bottom:14px;
  width:var(--sbw);z-index:200;
  border-radius:var(--rl);
  background:var(--sf);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--bd);
  box-shadow:var(--ds),0 0 60px rgba(0,0,0,.06),inset 0 1px 0 var(--sh);
  display:flex;flex-direction:column;
  transition:width var(--ts);overflow:hidden;will-change:width;
}
#sb::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,var(--sh) 45%,var(--sh) 55%,transparent 95%);pointer-events:none;z-index:2;border-radius:var(--rl) var(--rl) 0 0}
#sb.coll{width:var(--sbc)}
.sb-scroll{display:flex;flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden;padding:14px 10px 60px;gap:2px;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}

/* brand */
.brand{display:flex;align-items:center;gap:10px;padding:4px 4px 10px;flex-shrink:0}
.brand-ico{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--a),var(--a2));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;color:#fff;flex-shrink:0;box-shadow:0 4px 12px var(--da);letter-spacing:-.5px}
.brand-txt{transition:opacity var(--ts),width var(--ts);overflow:hidden;white-space:nowrap;min-width:0}
.brand-txt strong{display:block;font-size:.9rem;font-weight:700}
.brand-txt span{display:block;font-size:.62rem;color:var(--tx2)}

/* divider */
.sdiv{height:1px;background:linear-gradient(90deg,transparent,var(--bd) 30%,var(--bd) 70%,transparent);margin:4px 0;flex-shrink:0}

/* section label */
.slbl{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);padding:8px 10px 3px;display:block;white-space:nowrap;transition:opacity var(--ts)}

/* nav item */
.ni{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:11px;
  color:var(--tx2);font-size:.82rem;font-weight:500;
  transition:background var(--t),color var(--t),transform var(--t);
  position:relative;cursor:pointer;width:100%;text-align:left;
  white-space:nowrap;border:none;font-family:var(--font);
}
.ni:hover{background:rgba(255,255,255,.07);color:var(--tx);transform:translateX(2px)}
[data-theme=light] .ni:hover{background:rgba(0,0,0,.05)}
.ni.act{background:var(--da);color:var(--tx);box-shadow:inset 0 0 0 1px rgba(255,107,53,.3)}
.ni.act .nico{color:var(--a)}
.nico{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform var(--t),color var(--t)}
.nico svg{width:16px;height:16px}
.ni:hover .nico{transform:scale(1.12)}
.nlbl{flex:1;transition:opacity var(--ts),width var(--ts)}
.nchev{width:14px;height:14px;flex-shrink:0;transition:transform var(--ts);opacity:.45;display:flex;align-items:center}
.nchev svg{width:13px;height:13px}
.nbadge{font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(255,107,53,.18);color:var(--a);border:1px solid rgba(255,107,53,.25);transition:opacity var(--ts);flex-shrink:0}
.nbadge.hot{background:rgba(239,83,80,.18);color:var(--er);border-color:rgba(239,83,80,.3);animation:bpulse 2.5s ease infinite}
@keyframes bpulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px rgba(239,83,80,.15)}}

/* group / submenu */
.ngrp{display:flex;flex-direction:column}
.ngrp.open .nchev{transform:rotate(180deg)}
.ngrp.open .ni{color:var(--tx)}
.sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ts);overflow:hidden;margin-left:28px}
.sub>div{overflow:hidden}
.ngrp.open .sub{grid-template-rows:1fr}
.si{
  display:flex;align-items:center;gap:7px;
  padding:6px 10px;font-size:.77rem;color:var(--tx2);
  border-radius:9px;cursor:pointer;transition:background var(--t),color var(--t),transform var(--t);
  white-space:nowrap;
}
.si:hover{background:rgba(255,255,255,.07);color:var(--tx);transform:translateX(3px)}
[data-theme=light] .si:hover{background:rgba(0,0,0,.05)}
.si.act{color:var(--a);font-weight:600}
.pip{width:5px;height:5px;border-radius:50%;background:var(--a);opacity:.45;flex-shrink:0;transition:opacity var(--t),box-shadow var(--t)}
.si:hover .pip,.si.act .pip{opacity:1;box-shadow:0 0 6px var(--a)}

/* user area */
.sbuser{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:11px;transition:background var(--t);cursor:default}
.sbuser:hover{background:rgba(255,255,255,.04)}
.uav{position:relative;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--a2));display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#fff;flex-shrink:0}
.uavr{position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(var(--a),var(--a2),var(--a));opacity:.65;animation:spn 4s linear infinite;filter:blur(1px)}
@keyframes spn{to{transform:rotate(360deg)}}
.uinfo{flex:1;min-width:0;overflow:hidden;transition:opacity var(--ts),width var(--ts)}
.uinfo strong{display:block;font-size:.79rem;font-weight:600;white-space:nowrap}
.uinfo span{display:block;font-size:.62rem;color:var(--tx2)}
.ulogout{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--tx3);transition:color var(--t),background var(--t);flex-shrink:0}
.ulogout:hover{color:var(--er);background:rgba(239,83,80,.12)}
.ulogout svg{width:14px;height:14px}

/* collapse btn */
.coll-btn{position:absolute;bottom:12px;right:9px;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--bd);color:var(--tx2);transition:color var(--t),background var(--t),transform var(--t)}
.coll-btn svg{width:13px;height:13px;transition:transform var(--ts)}
.coll-btn:hover{color:var(--tx);background:var(--da)}
#sb.coll .coll-btn svg{transform:rotate(180deg)}

/* collapsed hide */
#sb.coll .brand-txt,#sb.coll .nlbl,#sb.coll .nchev,
#sb.coll .nbadge,#sb.coll .slbl,#sb.coll .sub,
#sb.coll .uinfo{opacity:0;width:0;overflow:hidden;pointer-events:none}
#sb.coll .ni{justify-content:center;padding:10px}
#sb.coll .nico{margin:0}
#sb.coll .ulogout{margin:0 auto}
#sb.coll .sbuser{justify-content:center;padding:10px}

/* ═══════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════ */
#tb{
  position:fixed;top:14px;
  left:calc(var(--sbw) + 26px);right:14px;
  height:var(--tbh);z-index:100;
  background:var(--sf);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--bd);
  box-shadow:0 4px 20px rgba(0,0,0,.35),inset 0 1px 0 var(--sh);
  border-radius:var(--rl);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  transition:left var(--ts);
}
#sb.coll~#tb{left:calc(var(--sbc) + 26px)}
.tb-l{display:flex;align-items:center;gap:10px}
.tb-r{display:flex;align-items:center;gap:7px}
.mob-btn{display:none;flex-direction:column;gap:5px;padding:6px 5px;border-radius:8px;background:rgba(255,255,255,.06)}
.mob-btn span{display:block;width:17px;height:2px;background:var(--tx);border-radius:1px;transition:var(--t)}
.ph{font-size:1.1rem;font-weight:700;line-height:1}
.bc{font-size:.66rem;color:var(--tx2);display:flex;align-items:center;gap:3px}
.bcs{opacity:.4}.bca{color:var(--a)}
.tclk{display:flex;flex-direction:column;align-items:flex-end;margin-right:4px}
.tct{font-family:var(--mono);font-size:.8rem;font-weight:500;line-height:1.2}
.tcd{font-size:.6rem;color:var(--tx2)}
.tbtn{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--bd);color:var(--tx2);transition:color var(--t),background var(--t),transform var(--t)}
.tbtn svg{width:14px;height:14px}
.tbtn:hover{color:var(--tx);background:var(--da);transform:scale(1.07)}
.tbtn:active{transform:scale(.93)}
.ics{display:none}[data-theme=dark] .icm{display:none}[data-theme=dark] .ics{display:block}[data-theme=light] .icm{display:block}[data-theme=light] .ics{display:none}
.icfo{display:none}.body-fs .icfi{display:none}.body-fs .icfo{display:block}
.nbtn{position:relative}
.ndot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--er);border:2px solid var(--bg);animation:ndp 2s ease infinite}
@keyframes ndp{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px rgba(239,83,80,0)}}
.tusr{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:11px;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid var(--bd);transition:background var(--t)}
.tusr:hover{background:rgba(255,255,255,.09)}
.tav{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--a2));display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;color:#fff}
.tnm{font-size:.77rem;font-weight:500}

/* ═══════════════════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════════════════ */
#main{
  position:relative;z-index:1;
  margin-left:calc(var(--sbw) + 26px);
  margin-top:calc(var(--tbh) + 26px);
  padding:0 14px 36px;
  transition:margin-left var(--ts);
  min-height:calc(100vh - var(--tbh) - 40px);
}
#sb.coll~#main{margin-left:calc(var(--sbc) + 26px)}

/* pages */
.pg{display:none}.pg.act{display:block}
.pge>*{animation:pgi .32s ease backwards}
.pge>*:nth-child(1){animation-delay:.0s}
.pge>*:nth-child(2){animation-delay:.06s}
.pge>*:nth-child(3){animation-delay:.12s}
.pge>*:nth-child(4){animation-delay:.18s}
.pge>*:nth-child(5){animation-delay:.24s}
@keyframes pgi{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ─ layout helpers ─ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.g34{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:var(--gap)}
.gcol{gap:var(--gap);display:flex;flex-direction:column}
.mt{margin-top:var(--gap)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ═══════════════════════════════════════════════════
   DASHBOARD PAGE
═══════════════════════════════════════════════════ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.sc{display:flex;align-items:flex-start;gap:12px;padding:18px;cursor:default}
.sc:hover{transform:translateY(-3px);box-shadow:var(--no),0 14px 32px rgba(0,0,0,.2)}
.sc-ico{width:44px;height:44px;border-radius:12px;background:var(--da);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-ico svg{width:20px;height:20px;color:var(--a)}
.sc-ico.c2{background:rgba(255,167,38,.16)} .sc-ico.c2 svg{color:var(--a2)}
.sc-ico.c3{background:rgba(38,198,218,.14)} .sc-ico.c3 svg{color:var(--a3)}
.sc-ico.c4{background:rgba(102,187,106,.14)} .sc-ico.c4 svg{color:var(--a4)}
.sc-b{flex:1;min-width:0}
.sc-lbl{font-size:.68rem;color:var(--tx2);font-weight:500;display:block}
.sc-val{font-size:1.5rem;font-weight:800;line-height:1.1;font-family:var(--mono);display:block}
.sc-d{font-size:.68rem;font-weight:500;display:block}
.sc-d.p{color:var(--a4)}.sc-d.n{color:var(--er)}
.spark{position:absolute;bottom:12px;right:14px;width:72px;height:30px;opacity:.55}
.spark svg{width:100%;height:100%}

/* bar chart */
.bc-wrap{display:flex;gap:8px;height:200px;align-items:flex-end}
.bc-bars{display:flex;align-items:flex-end;gap:5px;flex:1;height:100%;padding-bottom:20px}
.bc-col{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;height:100%;justify-content:flex-end}
.bc-col>span{font-size:.62rem;color:var(--tx2);font-family:var(--mono);white-space:nowrap}
.bc-bw{display:flex;gap:3px;align-items:flex-end;flex:1;width:100%}
.bc-b{height:var(--h);flex:1;background:var(--c);border-radius:5px 5px 2px 2px;opacity:.72;transition:height .7s cubic-bezier(.4,0,.2,1),opacity var(--t),transform var(--t);cursor:pointer;position:relative;overflow:hidden}
.bc-b::after{content:'';position:absolute;top:0;left:0;right:0;height:35%;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);border-radius:inherit;pointer-events:none}
.bc-b:hover{opacity:1;transform:scaleY(1.03);transform-origin:bottom}
.bc-b.hi{opacity:1;box-shadow:0 4px 14px var(--da)}
.bc-y{display:flex;flex-direction:column;justify-content:space-between;padding:0 6px 20px 0;font-size:.6rem;color:var(--tx3);font-family:var(--mono);min-width:30px;height:100%}
.leg{display:flex;align-items:center;gap:12px;font-size:.7rem;color:var(--tx2)}
.ld{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:3px}

/* activity */
.alist{display:flex;flex-direction:column}
.ai{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
[data-theme=light] .ai{border-bottom-color:rgba(0,0,0,.06)}
.ai:last-child{border-bottom:none}
.adot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0}
.at{font-size:.78rem;font-weight:500}
.atm{font-size:.62rem;color:var(--tx3)}

/* progress */
.plist{display:flex;flex-direction:column;gap:14px}
.pi-info{display:flex;justify-content:space-between;font-size:.77rem;margin-bottom:6px}
.pi-pct{color:var(--tx2);font-family:var(--mono)}
.pt{height:7px;border-radius:4px;overflow:hidden}
.pf{height:100%;width:var(--w);background:var(--c,var(--a));border-radius:4px;transition:width 1.1s cubic-bezier(.4,0,.2,1)}

/* donut */
.dw{display:flex;align-items:center;justify-content:center;position:relative;margin:6px auto}
.dsv{width:110px;height:110px}
.dbg{fill:none;stroke:var(--bg2);stroke-width:14}
.dsg{fill:none;stroke:var(--c,var(--a));stroke-width:12;transform-origin:55px 55px;transform:rotate(-90deg);stroke-linecap:round;transition:stroke-dashoffset .9s ease}
.dc{position:absolute;display:flex;flex-direction:column;align-items:center}
.dv{font-size:1.05rem;font-weight:800;font-family:var(--mono)}
.dl{font-size:.6rem;color:var(--tx2)}
.dlg{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.dli{display:flex;align-items:center;gap:7px;font-size:.7rem}
.dld{width:7px;height:7px;border-radius:50%;background:var(--c);flex-shrink:0}
.dli span:last-child{margin-left:auto;color:var(--tx2);font-family:var(--mono)}

/* quick actions */
.qag{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.qab{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid var(--bd);color:var(--tx2);font-size:.7rem;font-weight:500;transition:all var(--t);cursor:pointer;font-family:var(--font)}
.qab svg{width:17px;height:17px}
.qab:hover{background:var(--da);color:var(--a);transform:translateY(-2px)}
.qab:active{transform:scale(.95)}

/* kpi */
.kpi{display:flex;align-items:flex-start;gap:12px;padding:18px}
.kpi-i{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--c,var(--a))}
.kpi-i svg{width:20px;height:20px}
.kpi-b{flex:1;display:flex;flex-direction:column;gap:3px}
.kpi-v{font-size:1.35rem;font-weight:800;font-family:var(--mono);line-height:1}
.kpi-l{font-size:.7rem;color:var(--tx2)}
.kpib{height:5px;background:var(--bg2);border-radius:3px;overflow:hidden;margin-top:5px;box-shadow:var(--ni)}
.kpif{height:100%;width:var(--w,0%);background:var(--bc,var(--a));border-radius:3px;transition:width 1.1s ease}

/* ═══════════════════════════════════════════════════
   TYPOGRAPHY PAGE
═══════════════════════════════════════════════════ */
.th1{font-size:2.1rem;font-weight:800;line-height:1.1;background:linear-gradient(135deg,var(--a),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.th2{font-size:1.65rem;font-weight:700}
.th3{font-size:1.3rem;font-weight:600}
.th4{font-size:1.05rem;font-weight:600}
.th5{font-size:.88rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx2)}
.th6{font-size:.74rem;font-weight:600;color:var(--tx3)}
.tlead{font-size:1rem;line-height:1.7;color:var(--tx2);margin-bottom:8px}
.tbody{font-size:.84rem;line-height:1.7;margin-bottom:7px}
.tsmall{font-size:.74rem;line-height:1.6;color:var(--tx2)}
.tmuted{font-size:.72rem;color:var(--tx3)}
.tbq{border-left:3px solid var(--a);padding:11px 14px;background:var(--da);border-radius:0 var(--rs) var(--rs) 0;font-style:italic;font-size:.84rem;margin:10px 0}
.tbq cite{display:block;margin-top:5px;font-size:.72rem;color:var(--tx2);font-style:normal}
.tc{font-family:var(--mono);font-size:.82em;background:var(--da);color:var(--a);padding:2px 6px;border-radius:4px}
.tm{font-family:var(--mono);font-size:.79rem;background:var(--bg2);padding:10px 13px;border-radius:var(--rs);color:var(--a3);border:1px solid var(--bd)}
.tul{padding-left:16px;display:flex;flex-direction:column;gap:4px;font-size:.8rem} .tul li{list-style:disc;color:var(--tx2)}
.tol{padding-left:16px;display:flex;flex-direction:column;gap:4px;font-size:.8rem} .tol li{list-style:decimal;color:var(--tx2)}
.tpre{font-family:var(--mono);font-size:.77rem;background:var(--bg2);padding:13px;border-radius:var(--rs);color:var(--a4);border:1px solid var(--bd);white-space:pre;overflow-x:auto}

/* ═══════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:var(--rs);
  font-size:.81rem;font-weight:600;font-family:var(--font);
  cursor:pointer;transition:all var(--t);
  white-space:nowrap;position:relative;overflow:hidden;border:none;
}
.btn:active{transform:scale(.96)}
.bp{background:var(--a);color:#fff;box-shadow:0 4px 14px var(--da)}
.bp:hover{box-shadow:0 6px 22px rgba(255,107,53,.45);transform:translateY(-1px)}
.bs{background:var(--sf2);color:var(--tx);border:1px solid var(--bd);box-shadow:var(--no)}
.bs:hover{background:rgba(255,255,255,.1)}
.bsu{background:var(--su);color:#fff;box-shadow:0 4px 14px rgba(67,160,71,.3)}
.be{background:var(--er);color:#fff;box-shadow:0 4px 14px rgba(239,83,80,.3)}
.bw{background:var(--wa);color:#fff;box-shadow:0 4px 14px rgba(255,179,0,.3)}
.bi{background:var(--in);color:#fff;box-shadow:0 4px 14px rgba(41,182,246,.3)}
.bg2b{background:transparent;color:var(--tx2);border:1px solid var(--bd)}
.bg2b:hover{background:rgba(255,255,255,.07);color:var(--tx)}
.bo{background:transparent;color:var(--a);border:1px solid var(--a)}
.bo:hover{background:var(--da)}
.bxs{padding:4px 10px;font-size:.66rem;border-radius:6px}
.bsm{padding:6px 13px;font-size:.74rem;border-radius:8px}
.blg{padding:12px 24px;font-size:.9rem;border-radius:11px}
.bxl{padding:14px 28px;font-size:.93rem;border-radius:13px}
.bio{padding:9px;width:36px;height:36px}
.bio svg{width:15px;height:15px}
.bfw{width:100%;justify-content:center}
.bld{opacity:.65;pointer-events:none}
.spin{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spn .7s linear infinite;display:inline-block;flex-shrink:0}
.bpulse{animation:bpls 2s ease infinite}
@keyframes bpls{0%,100%{box-shadow:0 4px 14px var(--da)}50%{box-shadow:0 4px 22px rgba(255,107,53,.6),0 0 0 5px rgba(255,107,53,.08)}}
@keyframes bshk{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
.bgrp{display:flex;border-radius:var(--rs);overflow:hidden;border:1px solid var(--bd)}
.bgrp .btn{border-radius:0;border:none;border-right:1px solid var(--bd);box-shadow:none}
.bgrp .btn:last-child{border-right:none}
.bgrp .btn.ag{background:var(--da);color:var(--a)}
.rpl{position:absolute;border-radius:50%;background:rgba(255,255,255,.28);transform:scale(0);animation:rpa .55s ease-out forwards;pointer-events:none}
@keyframes rpa{to{transform:scale(4);opacity:0}}

/* ═══════════════════════════════════════════════════
   CARDS SHOWCASE
═══════════════════════════════════════════════════ */
.dcard{padding:0;overflow:hidden;cursor:default}
.dcard-img{height:120px;display:flex;align-items:center;justify-content:center}
.dcard-img svg{width:32px;height:32px;color:#fff;stroke-width:1.5}
.dcard-body{padding:15px}
.dtag{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--a);background:var(--da);padding:3px 8px;border-radius:20px;display:inline-block;margin-bottom:7px}
.dtag.gs{color:var(--su);background:rgba(67,160,71,.12)}
.dtag.gp{color:#ab47bc;background:rgba(171,71,188,.12)}
.dctit{font-size:.88rem;font-weight:700;margin-bottom:5px}
.dctxt{font-size:.76rem;color:var(--tx2);line-height:1.5;margin-bottom:12px}
.dcftr{display:flex;gap:7px}
.card-hl:hover{transform:translateY(-5px);box-shadow:var(--no),0 18px 40px rgba(0,0,0,.22)}
.card-gw:hover{box-shadow:var(--no),0 0 28px rgba(171,71,188,.22)}
.ch{display:flex;align-items:center;gap:14px;padding:16px}
.ch-ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ch-ic svg{width:20px;height:20px;color:#fff}
.ch-b{flex:1} .ch-b h4{font-size:.86rem;font-weight:700;margin-bottom:3px}
.ch-b p{font-size:.74rem;color:var(--tx2)}
.ch-a{display:flex;gap:7px}
.msc{padding:15px;cursor:default}
.msc-l{font-size:.67rem;color:var(--tx2);font-weight:500}
.msc-v{font-size:1.25rem;font-weight:800;font-family:var(--mono);margin:2px 0}
.msc-c{font-size:.67rem;font-weight:600}
.msc-c.p{color:var(--a4)}.msc-c.n{color:var(--er)}

/* ═══════════════════════════════════════════════════
   BADGES & TAGS
═══════════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:5px;font-size:.67rem;font-weight:700;letter-spacing:.02em}
.pill{border-radius:20px}
.bad-p{background:rgba(255,107,53,.16);color:var(--a)}
.bad-s{background:rgba(67,160,71,.15);color:var(--su)}
.bad-e{background:rgba(239,83,80,.15);color:var(--er)}
.bad-w{background:rgba(255,179,0,.15);color:var(--wa)}
.bad-i{background:rgba(41,182,246,.15);color:var(--in)}
.bad-pu{background:rgba(171,71,188,.15);color:#ab47bc}
.bad-m{background:rgba(255,255,255,.08);color:var(--tx2)}
.bad-d{padding:4px 9px}
.bdot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:ndp 2s ease infinite}
.brow{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:7px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;font-size:.7rem;font-weight:500;background:rgba(255,255,255,.07);border:1px solid var(--bd);transition:background var(--t)}
.chip button{color:var(--tx3);font-size:.82rem;line-height:1;transition:color var(--t);cursor:pointer;border:none;background:none;font-family:var(--font)}
.chip button:hover{color:var(--er)}
.ch-p{background:var(--da);border-color:rgba(255,107,53,.25);color:var(--a)}
.ch-s{background:rgba(67,160,71,.12);border-color:rgba(67,160,71,.25);color:var(--su)}
.ch-w{background:rgba(255,179,0,.12);border-color:rgba(255,179,0,.25);color:var(--wa)}
.ch-e{background:rgba(239,83,80,.12);border-color:rgba(239,83,80,.25);color:var(--er)}
.ch-pu{background:rgba(171,71,188,.12);border-color:rgba(171,71,188,.25);color:#ab47bc}
.tagcld{display:flex;flex-wrap:wrap;gap:7px}
.ndr{display:flex;align-items:center;gap:16px;margin-top:14px}
.ndw{position:relative;display:inline-flex;color:var(--tx2)}
.nc{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;border-radius:8px;background:var(--a);color:#fff;font-size:.57rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--bg)}
.nc-e{background:var(--er)}.nc-s{background:var(--su)}

/* ═══════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════ */
.fg{margin-bottom:15px}
.fl{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx2);margin-bottom:6px}
.fh{display:block;font-size:.67rem;color:var(--tx3);margin-top:4px}
.fh.fe{color:var(--er)}
.fa{display:flex;gap:9px;margin-top:18px}
.iw{
  display:flex;align-items:center;gap:7px;
  padding:9px 13px;border-radius:var(--rs);
  box-shadow:var(--ni);background:var(--bg2);
  border:1px solid transparent;
  transition:border-color var(--t),box-shadow var(--t);
}
.iw:focus-within{border-color:var(--a);box-shadow:var(--ni),0 0 0 3px var(--da)}
.iw.ico svg{width:14px;height:14px;color:var(--tx3);flex-shrink:0}
.iw.ok{border-color:var(--su)} .iw.err{border-color:var(--er)}
.sic{width:14px;height:14px;flex-shrink:0}
.ok .sic{color:var(--su)} .err .sic{color:var(--er)}
.inp{flex:1;border:none;background:none;outline:none;font-family:var(--font);font-size:.83rem;color:var(--tx);min-width:0}
.inp::placeholder{color:var(--tx3)}
.inp:disabled{opacity:.45;cursor:not-allowed}
.txta{resize:vertical;min-height:85px;line-height:1.5}
.iw.ta{align-items:flex-start;padding:9px 13px}
.eyet{color:var(--tx3);transition:color var(--t);flex-shrink:0}
.eyet:hover{color:var(--tx2)} .eyet svg{width:14px;height:14px}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:5px;background:var(--bg2);box-shadow:var(--ni);border-radius:3px;outline:none;cursor:pointer}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--a);box-shadow:0 0 8px var(--da);cursor:pointer;transition:transform var(--t)}
.rng::-webkit-slider-thumb:hover{transform:scale(1.2)}
.rw{padding:9px 2px}
.dz{padding:22px 14px;border-radius:var(--rs);text-align:center;cursor:pointer;transition:border-color var(--t);display:flex;flex-direction:column;align-items:center;gap:7px;border:2px dashed var(--bd)}
.dz svg{width:22px;height:22px;color:var(--tx3);margin:0 auto}
.dz p{font-size:.76rem;color:var(--tx3)}
.dz.dzo{border-color:var(--a);background:var(--da)}
.csw{width:25px;height:25px;border-radius:7px;background:var(--c);cursor:pointer;transition:transform var(--t);border:2px solid transparent;flex-shrink:0}
.csw.ca{border-color:var(--tx);transform:scale(1.14)}
.csw:hover{transform:scale(1.08)}
.cr{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cinp{width:30px;height:30px;border-radius:7px;padding:2px;border:none;background:none;cursor:pointer}
.sw{width:100%;padding:9px 30px 9px 13px;border-radius:var(--rs);border:1px solid transparent;box-shadow:var(--ni);background:var(--bg2);color:var(--tx);font-family:var(--font);font-size:.83rem;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color var(--t)}
.sw:focus{border-color:var(--a);box-shadow:var(--ni),0 0 0 3px var(--da)}
.sw[multiple]{padding:8px;height:auto}
.sww{position:relative}
.sww .sic2{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--tx3);pointer-events:none;font-size:.68rem}
.sww.ico .sw{padding-left:34px}
.sww.ico .sw-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--tx3);pointer-events:none}
/* checkbox */
.cl{display:flex;flex-direction:column;gap:9px}
.chk{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.8rem;color:var(--tx2);transition:color var(--t)}
.chk:hover{color:var(--tx)} .chk input{display:none}
.cb{width:17px;height:17px;border-radius:5px;box-shadow:var(--ni);background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--t)}
.cr2{width:17px;height:17px;border-radius:50%;box-shadow:var(--ni);background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--t)}
.chk input:checked+.cb{background:var(--a);box-shadow:0 0 8px var(--da)}
.chk input:checked+.cb::after{content:'✓';color:#fff;font-size:.68rem;font-weight:800}
.chk.ck2 input:checked+.cb{background:var(--a2)}
.chk.cks input:checked+.cb{background:var(--su)}
.chk input:checked+.cr2{background:var(--a)}
.chk input:checked+.cr2::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
.chk input:disabled+.cb,.chk input:disabled+.cr2{opacity:.38;cursor:not-allowed}
/* toggle */
.tgl{display:inline-block;cursor:pointer;flex-shrink:0}
.tgl input{display:none}
.ttr{display:block;width:40px;height:21px;border-radius:11px;box-shadow:var(--ni);background:var(--bg2);position:relative;transition:background var(--t)}
.tth{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--tx3);box-shadow:0 2px 6px rgba(0,0,0,.3);transition:left var(--tsp),background var(--tsp)}
.tgl input:checked+.ttr{background:rgba(255,107,53,.22)}
.tgl input:checked+.ttr .tth{left:22px;background:var(--a);box-shadow:0 0 8px var(--da)}
.tgl.t2 input:checked+.ttr{background:rgba(255,167,38,.18)} .tgl.t2 input:checked+.ttr .tth{background:var(--a2)}
.tgl.ts input:checked+.ttr{background:rgba(67,160,71,.16)} .tgl.ts input:checked+.ttr .tth{background:var(--su)}
.tgl input:disabled+.ttr{opacity:.38;cursor:not-allowed}
.tr-row{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--tx2)}
.tgl-list{display:flex;flex-direction:column;gap:12px}

/* ═══════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════ */
.astk{display:flex;flex-direction:column;gap:10px}
.alr{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-radius:var(--rs);animation:alri .3s ease}
@keyframes alri{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.ai-ico{width:18px;height:18px;flex-shrink:0;margin-top:1px} .ai-ico svg{width:18px;height:18px}
.ab{flex:1} .ab strong{display:block;font-size:.8rem;font-weight:700;margin-bottom:2px} .ab p{font-size:.73rem;color:var(--tx2)}
.ax{font-size:1.05rem;color:var(--tx3);flex-shrink:0;line-height:1;transition:color var(--t);cursor:pointer;border:none;background:none;font-family:var(--font)}
.ax:hover{color:var(--tx)}
.alr-s{background:rgba(67,160,71,.1);border-left:3px solid var(--su)} .alr-s .ai-ico{color:var(--su)}
.alr-e{background:rgba(239,83,80,.1);border-left:3px solid var(--er)} .alr-e .ai-ico{color:var(--er)}
.alr-w{background:rgba(255,179,0,.1);border-left:3px solid var(--wa)} .alr-w .ai-ico{color:var(--wa)}
.alr-i{background:rgba(41,182,246,.1);border-left:3px solid var(--in)} .alr-i .ai-ico{color:var(--in)}
.sol{padding:11px 14px;font-size:.78rem;border-radius:var(--rs);color:#fff;margin:0}
.sol-s{background:var(--su)} .sol-e{background:var(--er)} .sol-w{background:var(--wa)} .sol-i{background:var(--in)}

/* ═══════════════════════════════════════════════════
   PROGRESS PAGE
═══════════════════════════════════════════════════ */
.rg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ri{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.ri svg{width:78px;height:78px}
.rbg{fill:none;stroke:var(--bg2);stroke-width:10}
.rfl{fill:none;stroke:var(--c,var(--a));stroke-width:9;stroke-linecap:round;transform-origin:39px 39px;transform:rotate(-90deg);transition:stroke-dashoffset 1.1s ease}
.rv{font-size:.9rem;font-weight:800;font-family:var(--mono);position:absolute;top:50%;left:50%;transform:translate(-50%,-55%)}
.rl2{font-size:.6rem;color:var(--tx2);font-weight:500}
.steps{display:flex;align-items:center;margin-top:14px}
.stp{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.stpc{width:28px;height:28px;border-radius:50%;border:2px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:var(--tx3);background:var(--bg2)}
.stpc svg{width:12px;height:12px}
.stp.done .stpc{background:var(--su);border-color:var(--su);color:#fff}
.stp.cur .stpc{background:var(--a);border-color:var(--a);color:#fff;box-shadow:0 0 12px var(--da)}
.stp span{font-size:.63rem;color:var(--tx2);white-space:nowrap}
.stpl{flex:1;height:2px;background:var(--bd);margin-top:-12px}
.stpl.done{background:var(--su)}
.pt-xs{height:3px} .pt-lg{height:12px}
.pf.str{background:repeating-linear-gradient(45deg,var(--c,var(--a)) 0,var(--c,var(--a)) 7px,rgba(255,255,255,.15) 7px,rgba(255,255,255,.15) 14px)}
.pf.anim{animation:stmv 1s linear infinite}
@keyframes stmv{0%{background-position:0 0}100%{background-position:28px 0}}

/* ═══════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════ */
.mbk{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.52);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .28s ease;padding:16px}
.mbk.op{opacity:1;pointer-events:all}
.mbox{width:100%;max-width:460px;padding:0;overflow:hidden;transform:scale(.88) translateY(18px);transition:transform var(--tsp)}
.mbk.op .mbox{transform:scale(1) translateY(0)}
.msm{max-width:360px}
.mh{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--bd)}
.mh h3{font-size:.92rem;font-weight:700}
.mh-e{background:rgba(239,83,80,.1)}
.mx{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--bd);color:var(--tx2);font-size:.95rem;transition:all var(--t);cursor:pointer;border:none}
.mx:hover{background:rgba(239,83,80,.14);color:var(--er)}
.mb{padding:16px 20px;font-size:.8rem;color:var(--tx2);line-height:1.6}
.mb p{margin-bottom:8px}
.mf{padding:12px 20px;border-top:1px solid var(--bd);display:flex;justify-content:flex-end;gap:7px}
.deli{width:48px;height:48px;border-radius:50%;background:rgba(239,83,80,.14);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--er)}
.deli svg{width:20px;height:20px}

/* ═══════════════════════════════════════════════════
   TOASTS
═══════════════════════════════════════════════════ */
#tc{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:9px;pointer-events:none;max-width:340px;width:100%;top:20px;right:20px;align-items:flex-end}
.tst{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:var(--r);background:var(--sf2);backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--bd);box-shadow:0 10px 32px rgba(0,0,0,.4),inset 0 1px 0 var(--sh);pointer-events:all;min-width:240px;max-width:320px;animation:tsti .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.tst.hide{animation:tsto .25s ease forwards}
@keyframes tsti{from{opacity:0;transform:translateX(36px) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes tsto{to{opacity:0;transform:translateX(36px) scale(.88)}}
.tsi{width:17px;height:17px;flex-shrink:0;margin-top:1px} .tsi svg{width:17px;height:17px}
.tsb{flex:1} .tsti{font-size:.78rem;font-weight:700;line-height:1.3} .tsm{font-size:.7rem;color:var(--tx2);margin-top:1px}
.tsc{color:var(--tx3);font-size:.95rem;flex-shrink:0;transition:color var(--t);cursor:pointer;border:none;background:none}
.tsc:hover{color:var(--tx)}
.tsp{position:absolute;bottom:0;left:0;height:2px;animation:tspa 4s linear forwards;border-radius:0}
@keyframes tspa{from{width:100%}to{width:0}}
.tst-s .tsi{color:var(--su)} .tst-s .tsp{background:var(--su)}
.tst-e .tsi{color:var(--er)} .tst-e .tsp{background:var(--er)}
.tst-w .tsi{color:var(--wa)} .tst-w .tsp{background:var(--wa)}
.tst-i .tsi{color:var(--in)} .tst-i .tsp{background:var(--in)}
.tst-d .tsi{color:var(--a)} .tst-d .tsp{background:var(--a)}

/* ═══════════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════════ */
.tblw{overflow-x:auto;margin:0 -22px;padding:0 22px}
.tbl{width:100%;border-collapse:collapse;font-size:.79rem}
.tbl thead tr{border-bottom:2px solid var(--bd)}
.tbl th{text-align:left;padding:9px 11px;font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);white-space:nowrap}
.tbl th.srt{cursor:pointer;transition:color var(--t)} .tbl th.srt:hover{color:var(--a)}
.tbl td{padding:11px;color:var(--tx2);border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle;transition:background var(--t)}
[data-theme=light] .tbl td{border-bottom-color:rgba(0,0,0,.05)}
.tbl tbody tr:hover td{background:rgba(255,255,255,.03)}
[data-theme=light] .tbl tbody tr:hover td{background:rgba(0,0,0,.025)}
.tbu{display:flex;align-items:center;gap:9px}
.tbav{width:28px;height:28px;border-radius:50%;background:var(--c,var(--a));display:flex;align-items:center;justify-content:center;font-size:.63rem;font-weight:700;color:#fff;flex-shrink:0}
.tbu>div span:first-child{display:block;font-size:.79rem;font-weight:600;color:var(--tx);white-space:nowrap}
.tbsb{font-size:.66rem;color:var(--tx3)}
.tbta{display:flex;gap:5px}
.tbb{width:27px;height:27px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid var(--bd);color:var(--tx3);transition:all var(--t);overflow:hidden;position:relative;cursor:pointer;border:none}
.tbb svg{width:12px;height:12px}
.tbb:hover{background:rgba(255,255,255,.1);color:var(--tx)}
.tbb.td:hover{background:rgba(239,83,80,.14);color:var(--er)}
.tbf{display:flex;align-items:center;justify-content:space-between;margin-top:14px;flex-wrap:wrap;gap:8px}
.tbi{font-size:.7rem;color:var(--tx3)}
.pag{display:flex;gap:4px}
.pb{width:29px;height:29px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.73rem;font-weight:600;background:rgba(255,255,255,.04);border:1px solid var(--bd);color:var(--tx2);transition:all var(--t);cursor:pointer;border:none;font-family:var(--font)}
.pb:hover{background:var(--da);color:var(--a)} .pb.ac{background:var(--a);color:#fff;border-color:var(--a)} .pb:disabled{opacity:.35;cursor:default}
.pd{display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--tx3);padding:0 3px}
.si2{min-width:190px}

/* ═══════════════════════════════════════════════════
   CHARTS PAGE
═══════════════════════════════════════════════════ */
.lcw{height:170px;overflow:hidden;margin-bottom:6px}
.lcv{width:100%;height:155px;display:block}
.lcl{display:flex;justify-content:space-between;font-size:.6rem;color:var(--tx3);font-family:var(--mono);padding:3px 0}

/* ═══════════════════════════════════════════════════
   PROFILE
═══════════════════════════════════════════════════ */
.pfl{display:grid;grid-template-columns:272px 1fr;gap:var(--gap)}
.pfc{padding:0;overflow:hidden}
.pfb{height:80px;background:linear-gradient(135deg,var(--a),var(--a2))}
.pfar{display:flex;justify-content:space-between;align-items:flex-start;padding:0 16px;margin-top:-22px}
.pfav{position:relative;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--a2));display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;color:#fff;border:3px solid var(--bg)}
.pfavr{position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(var(--a),var(--a2),var(--a));opacity:.65;animation:spn 4s linear infinite;filter:blur(1px)}
.pfi{padding:10px 16px 16px;text-align:center}
.pfn{font-size:1rem;font-weight:700;margin-bottom:5px}
.pfrl{font-size:.62rem;font-weight:700;background:var(--da);color:var(--a);padding:3px 9px;border-radius:20px}
.pfbio{font-size:.73rem;color:var(--tx2);line-height:1.55;margin:9px 0}
.pfst{display:flex;justify-content:space-around;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd)}
.pfst>div{display:flex;flex-direction:column;align-items:center;gap:2px}
.pfst strong{font-size:.92rem;font-weight:800} .pfst span{font-size:.6rem;color:var(--tx2)}
.pff{display:flex;flex-direction:column;gap:3px}
.pfl2{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-bottom:5px}

/* ═══════════════════════════════════════════════════
   SETTINGS
═══════════════════════════════════════════════════ */
.slist{display:flex;flex-direction:column}
.sr{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--bd);gap:14px}
.sr:last-child{border-bottom:none}
.sri strong{display:block;font-size:.8rem;font-weight:600}
.sri span{display:block;font-size:.7rem;color:var(--tx2);margin-top:1px}
.src{flex-shrink:0}

/* ═══════════════════════════════════════════════════
   NOTIFICATIONS PANEL
═══════════════════════════════════════════════════ */
#np{
  position:fixed;top:calc(var(--tbh) + 22px);right:14px;
  width:288px;z-index:300;
  background:var(--sf2);backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--bd);border-radius:var(--rl);
  box-shadow:var(--ds);
  transform:scale(.94) translateY(-8px);opacity:0;
  pointer-events:none;transition:all .22s ease;overflow:hidden;
}
#np.op{transform:scale(1) translateY(0);opacity:1;pointer-events:all}
.nph{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--bd)}
.nph h4{font-size:.82rem;font-weight:700}
.nph button{font-size:.68rem;color:var(--a);cursor:pointer;border:none;background:none;font-family:var(--font)}
.npl{max-height:260px;overflow-y:auto}
.nit{display:flex;align-items:flex-start;gap:9px;padding:11px 14px;border-bottom:1px solid var(--bd);transition:background var(--t)}
.nit:last-child{border-bottom:none}
.nit.nr{background:rgba(255,107,53,.04)}
.nit:hover{background:rgba(255,255,255,.04)}
.nidc{width:7px;height:7px;border-radius:50%;background:var(--a);flex-shrink:0;margin-top:4px}
.nidc.rd{background:var(--tx3)}
.nib p{font-size:.76rem;font-weight:500} .nib span{font-size:.63rem;color:var(--tx3)}

/* ═══════════════════════════════════════════════════
   MOBILE OVERLAY
═══════════════════════════════════════════════════ */
#mob-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:190;backdrop-filter:blur(3px)}
#mob-ov.sh{display:block}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media(max-width:1200px){
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g34{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .g2{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr}
  :root{--sbw:var(--sbc)}
  #tb{left:calc(var(--sbc) + 26px)}
  #main{margin-left:calc(var(--sbc) + 26px)}
}
@media(max-width:620px){
  :root{--sbw:262px}
  #sb{transform:translateX(calc(-100% - 18px));top:0;left:0;bottom:0;border-radius:0 var(--rl) var(--rl) 0}
  #sb.mob-op{transform:translateX(0)}
  #tb{left:14px}
  #main{margin-left:0;padding:0 10px 28px}
  .mob-btn{display:flex}
  .stats-row{grid-template-columns:1fr}
  .pfl{grid-template-columns:1fr}
  .rg{grid-template-columns:repeat(2,1fr)}
  .tct,.tcd,.tnm{display:none}
  .tclk{display:none}
}