:root{
  --bg:#06080e;--bg2:#0d111c;--card:rgba(255,255,255,.045);--card2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);
  --tx:#eef1f7;--mu:#8d96a8;--mu2:#5d6577;
  --gold:#f0b90b;--up:#16d19a;--dn:#ff5470;--warn:#ffb020;--vio:#7c5cff;--cy:#22c3ee;
  --grad:linear-gradient(135deg,#ffe17a 0%,#f0b90b 45%,#ff8a1f 100%);
  --r:18px;--sh:0 18px 50px -18px rgba(0,0,0,.7);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --tabh:64px;
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#f3f5fa;--bg2:#ffffff;--card:rgba(255,255,255,.82);--card2:#ffffff;
  --line:rgba(15,23,42,.08);--line2:rgba(15,23,42,.15);
  --tx:#0f172a;--mu:#5b6478;--mu2:#8b93a5;
  --gold:#d18f00;--up:#0b9f72;--dn:#e11d48;--warn:#c27c00;
  --sh:0 18px 50px -20px rgba(15,23,42,.28);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--tx);font-family:var(--font)}
body{font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:clip}
html.noscroll{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0}
::selection{background:rgba(240,185,11,.35)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mu{color:var(--mu)}.sm{font-size:13px}.xs{font-size:12px}.min0{min-width:0}
.up{color:var(--up)}.dn{color:var(--dn)}
.i{flex:none;display:block}

/* ---------- animated background ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:
  radial-gradient(1100px 600px at 8% -12%,rgba(124,92,255,.20),transparent 60%),
  radial-gradient(900px 520px at 108% 6%,rgba(240,185,11,.13),transparent 60%),var(--bg)}
.blob{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.30;animation:drift 30s ease-in-out infinite alternate}
.b1{background:#7c5cff;top:-18vmax;left:-12vmax}
.b2{background:#f0b90b;bottom:-24vmax;right:-14vmax;animation-duration:36s;opacity:.18}
.b3{background:#16d19a;top:38%;left:42%;width:28vmax;height:28vmax;animation-duration:44s;opacity:.10}
:root[data-theme=light] .blob{opacity:.14}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(7vmax,5vmax) scale(1.12)}100%{transform:translate(-5vmax,9vmax) scale(.94)}}
.gridbg{position:absolute;inset:0;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(ellipse at 50% 0%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 0%,#000 15%,transparent 72%);opacity:.55}
#fx{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* ---------- keyframes ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes shine{to{background-position:200% center}}
@keyframes spin{to{--ang:360deg}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes sweep{0%,62%{left:-60%}100%{left:135%}}
@keyframes rip{to{transform:scale(4);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes growy{from{transform:scaleY(0)}}
@keyframes float{50%{transform:translateY(-9px) rotate(7deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor}70%,100%{box-shadow:0 0 0 6px transparent}}
@keyframes skm{to{background-position:-200% 0}}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes tin{from{opacity:0;transform:translateX(30px) scale(.95)}to{opacity:1;transform:none}}
@keyframes tinm{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:scale(.92)}}
@keyframes cf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.anim>*{animation:rise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:-.01em}
.brand small{display:block;font-size:10.5px;font-weight:700;color:var(--mu);letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.logo{width:38px;height:38px;flex:none;filter:drop-shadow(0 6px 16px rgba(240,185,11,.45))}
.grad-tx{background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:13px;font-weight:700;font-size:15px;transition:transform .15s,box-shadow .25s,background .25s,opacity .2s,border-color .25s;user-select:none;white-space:nowrap;-webkit-user-select:none}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--grad);color:#1a1300;box-shadow:0 8px 24px -8px rgba(240,185,11,.65)}
.btn.primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sweep 3.8s ease-in-out infinite;pointer-events:none}
.btn.primary:hover{box-shadow:0 14px 32px -8px rgba(240,185,11,.85);transform:translateY(-1px)}
.btn.ghost{background:var(--card);border:1px solid var(--line2)}
.btn.ghost:hover{background:var(--card2);border-color:rgba(240,185,11,.35)}
.btn.danger{background:rgba(255,84,112,.10);color:var(--dn);border:1px solid rgba(255,84,112,.32)}
.btn.danger:hover{background:rgba(255,84,112,.18)}
.btn.ok{background:rgba(22,209,154,.10);color:var(--up);border:1px solid rgba(22,209,154,.32)}
.btn.ok:hover{background:rgba(22,209,154,.18)}
.btn.sm{height:36px;padding:0 13px;font-size:13.5px;border-radius:10px;gap:6px}
.btn.icon{width:42px;padding:0}
.btn.icon.sm{width:36px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.loading{color:transparent!important;pointer-events:none}
.btn.loading>*{opacity:0}
.btn.loading::before{content:"";position:absolute;left:calc(50% - 10px);top:calc(50% - 10px);width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(128,128,128,.35);border-top-color:var(--tx);animation:rot .7s linear infinite}
.btn.primary.loading::before{border-color:rgba(26,19,0,.25);border-top-color:#1a1300}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.4);animation:rip .6s ease-out;pointer-events:none}
.link{color:var(--gold);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.link:hover{text-decoration:underline}

/* ---------- auth ---------- */
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,440px);gap:64px;align-items:center;max-width:1180px;margin:0 auto;
  padding:calc(32px + var(--sat)) calc(32px + var(--sar)) calc(32px + var(--sab)) calc(32px + var(--sal))}
.auth-hero{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.auth-hero h1{font-size:clamp(30px,4.3vw,54px);line-height:1.08;letter-spacing:-.025em;margin:26px 0 16px;font-weight:800}
.auth-hero p{color:var(--mu);font-size:17px;max-width:520px;margin:0}
.feat{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.feat span{display:inline-flex;gap:8px;align-items:center;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13.5px;font-weight:600;animation:rise .7s both;animation-delay:calc(var(--i)*90ms + 350ms)}
.feat svg{color:var(--gold)}
.flow{margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:560px}
.flow div{padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--card);animation:rise .7s both;animation-delay:calc(var(--i)*110ms + 600ms)}
.flow b{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(240,185,11,.14);color:var(--gold);font-size:13px;margin-bottom:10px}
.flow span{font-size:13.5px;font-weight:600;display:block}
.flow small{color:var(--mu);font-size:12px}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));border:1px solid var(--line);-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);box-shadow:var(--sh)}
:root[data-theme=light] .glass{background:rgba(255,255,255,.86)}
.auth-card{position:relative;padding:28px;border-radius:26px;animation:pop .8s .1s cubic-bezier(.2,.8,.2,1) both}
.auth-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.2px;background:conic-gradient(from var(--ang),transparent 0 68%,var(--gold) 80%,var(--vio) 90%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}
.aform{animation:fade .35s both}
.aform h3{font-size:22px;margin-top:22px;letter-spacing:-.01em}
.aform>p{margin:4px 0 6px}
.frow{display:flex;align-items:center;justify-content:space-between;margin:16px 0 18px}
.alt{text-align:center;font-size:14px;color:var(--mu);margin:16px 0 0}
.auth-foot{text-align:center;color:var(--mu2);font-size:12px;margin-top:18px}
@media (max-width:899px){
  .auth{grid-template-columns:minmax(0,1fr);gap:22px;align-content:start;
    padding:calc(22px + var(--sat)) calc(16px + var(--sar)) calc(28px + var(--sab)) calc(16px + var(--sal))}
  .auth-hero h1{font-size:29px;margin:18px 0 8px}
  .auth-hero p{font-size:14.5px}
  .feat{margin-top:16px;gap:8px}.feat span{font-size:12.5px;padding:7px 12px}
  .flow{display:none}
  .auth-card{padding:22px 18px;border-radius:22px}
}

/* ---------- segmented control ---------- */
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid var(--line)}
:root[data-theme=light] .seg{background:rgba(15,23,42,.05)}
.seg button{position:relative;z-index:1;padding:10px 12px;border-radius:10px;font-weight:700;font-size:14px;color:var(--mu);transition:color .25s;white-space:nowrap}
.seg button.on{color:var(--tx)}
.seg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:10px;background:var(--card2);border:1px solid var(--line2);box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .4s cubic-bezier(.3,1.3,.5,1),width .3s}
.seg.sm button{padding:7px 12px;font-size:13px}

/* ---------- form fields ---------- */
.field{position:relative;display:block;margin-top:14px}
.field input,.field textarea,.field select{width:100%;height:54px;padding:22px 46px 7px 46px;border-radius:14px;border:1px solid var(--line2);background:rgba(0,0,0,.22);outline:none;font-size:16px;transition:border-color .2s,box-shadow .2s,background .2s}
:root[data-theme=light] .field input,:root[data-theme=light] .field textarea{background:#fff}
.field textarea{height:auto;min-height:84px;padding-top:26px;resize:vertical;line-height:1.45}
.field.noic input,.field.noic textarea{padding-left:16px}
.field-lb{position:absolute;left:46px;top:16px;color:var(--mu);font-size:15px;pointer-events:none;transition:all .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 92px)}
.field.noic .field-lb{left:16px;max-width:calc(100% - 70px)}
.field input:focus+.field-lb,.field input:not(:placeholder-shown)+.field-lb,.field textarea:focus+.field-lb,.field textarea:not(:placeholder-shown)+.field-lb{top:7px;font-size:11.5px;color:var(--gold);letter-spacing:.02em;font-weight:600}
.field-ic{position:absolute;left:15px;top:17px;color:var(--mu);transition:color .2s}
.field:focus-within .field-ic{color:var(--gold)}
.field input:focus,.field textarea:focus{border-color:rgba(240,185,11,.6);box-shadow:0 0 0 4px rgba(240,185,11,.12)}
.field-act{position:absolute;right:8px;top:9px;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:var(--mu)}
.field-act:hover{background:var(--card2);color:var(--tx)}
.field-suf{position:absolute;right:16px;top:17px;color:var(--mu);font-weight:700;font-size:14px;pointer-events:none}
.field.err input,.field.err textarea{border-color:var(--dn)!important;box-shadow:0 0 0 4px rgba(255,84,112,.12)!important}
.field.err{animation:shake .4s}
.hint{font-size:12.5px;color:var(--mu);margin-top:6px}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}
.pw-meter i{height:4px;border-radius:4px;background:var(--line2);transition:background .3s}
.ck{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--mu);cursor:pointer;user-select:none}
.ck input{position:absolute;opacity:0;pointer-events:none}
.ck i{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line2);display:grid;place-items:center;transition:all .2s;flex:none}
.ck input:checked+i{background:var(--grad);border-color:transparent}
.ck input:checked+i::after{content:"";width:5px;height:10px;border:solid #1a1300;border-width:0 2.5px 2.5px 0;transform:translate(0,-1px) rotate(45deg)}
.ck input:focus-visible+i{box-shadow:0 0 0 3px rgba(240,185,11,.3)}
.sw{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;font-weight:600}
.sw input{position:absolute;opacity:0;pointer-events:none}
.sw i{width:44px;height:26px;border-radius:26px;background:var(--line2);position:relative;transition:background .25s;flex:none}
.sw i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .35s cubic-bezier(.3,1.5,.5,1);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.sw input:checked+i{background:var(--up)}
.sw input:checked+i::after{transform:translateX(18px)}
.sel{height:40px;padding:0 34px 0 12px;border-radius:12px;border:1px solid var(--line2);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d96a8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;-webkit-appearance:none;appearance:none;font-size:14px;font-weight:600;outline:none;cursor:pointer}
.sel option{background:var(--bg2);color:var(--tx)}
.search{position:relative;flex:1 1 220px;min-width:0}
.search input{width:100%;height:40px;border-radius:12px;border:1px solid var(--line2);background:var(--card);padding:0 12px 0 38px;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
.search input:focus{border-color:rgba(240,185,11,.6);box-shadow:0 0 0 4px rgba(240,185,11,.1)}
.search .i{position:absolute;left:12px;top:11px;color:var(--mu)}
@media (pointer:fine){.search input{font-size:14px}}

/* ---------- app shell ---------- */
#app{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:22px 16px calc(18px + var(--sab)) calc(16px + var(--sal));border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}
:root[data-theme=light] .side{background:rgba(255,255,255,.6)}
.nav{margin-top:30px;display:flex;flex-direction:column;gap:4px}
.nav-lb{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mu2);padding:0 14px;margin-bottom:6px}
.nav a{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;color:var(--mu);font-weight:600;transition:color .2s,background .2s}
.nav a:hover{color:var(--tx);background:var(--card)}
.nav a.on{color:var(--tx);background:linear-gradient(90deg,rgba(240,185,11,.16),rgba(240,185,11,.02))}
.nav a.on::before{content:"";position:absolute;left:-16px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--grad);box-shadow:0 0 12px var(--gold)}
.nav a.on .i{color:var(--gold)}
.cnt{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--dn);color:#fff;font-size:12px;display:grid;place-items:center;font-weight:700;font-style:normal}
.side-foot{margin-top:auto}
.uchip{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.uchip b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uchip small{display:block;color:var(--mu);font-size:12px}
.uchip .btn{margin-left:auto}
.ava{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#1a1300;background:var(--grad);flex:none;text-transform:uppercase}
.ava.vio{background:linear-gradient(135deg,#a78bfa,#7c5cff);color:#fff}
.ava.sm{width:34px;height:34px;border-radius:10px;font-size:14px}
.ava.xl{width:84px;height:84px;border-radius:26px;font-size:34px;box-shadow:0 14px 36px -10px rgba(240,185,11,.6)}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;min-height:68px;padding:calc(12px + var(--sat)) calc(28px + var(--sar)) 12px 28px;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid var(--line)}
.top h2{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .sub{color:var(--mu);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-act{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.top .mb{display:none}
.mb-only{display:none!important}
.bdg{position:absolute;top:5px;right:5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--dn);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;font-style:normal;box-shadow:0 0 0 2px var(--bg)}
.balpill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:13px;border:1px solid rgba(240,185,11,.3);background:rgba(240,185,11,.08);font-weight:700;font-size:14px}
.balpill .i{color:var(--gold)}
#view{width:100%;max-width:1280px;margin:0 auto;padding:26px calc(28px + var(--sar)) 48px 28px}
.tabbar{display:none}
@media (max-width:899px){
  #app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .top{min-height:60px;padding:calc(10px + var(--sat)) calc(16px + var(--sar)) 10px calc(16px + var(--sal))}
  .top h2{font-size:17px}
  .top .mb{display:flex}.top .mb .logo{width:34px;height:34px}
  .mb-only{display:inline-flex!important}
  .balpill{height:38px;padding:0 11px;font-size:13px}
  .top .btn.icon{width:38px;height:38px}
  #view{padding:16px calc(16px + var(--sar)) calc(var(--tabh) + var(--sab) + 34px) calc(16px + var(--sal))}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;z-index:30;
    left:calc(10px + var(--sal));right:calc(10px + var(--sar));bottom:calc(10px + var(--sab));height:var(--tabh);padding:6px;border-radius:22px;
    border:1px solid var(--line2);background:color-mix(in srgb,var(--bg2) 84%,transparent);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:0 14px 40px -8px rgba(0,0,0,.55)}
}
@media (max-width:420px){.top .sub{display:none}.balpill span{font-size:12.5px}}
.tabbar a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--mu);border-radius:16px;transition:color .25s;min-width:0}
.tabbar a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tabbar a .i{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.tabbar a.on{color:var(--tx)}
.tabbar a.on .i{transform:translateY(-2px) scale(1.12);color:var(--gold)}
.tab-ind{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/var(--n,4));border-radius:16px;background:linear-gradient(180deg,rgba(240,185,11,.2),rgba(240,185,11,.05));border:1px solid rgba(240,185,11,.28);transform:translateX(calc(var(--k,0)*100%));transition:transform .5s cubic-bezier(.3,1.25,.5,1)}
.tabbar .dot{position:absolute;top:7px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--dn);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;font-style:normal;box-shadow:0 0 0 2px var(--bg2)}

/* ---------- generic components ---------- */
.card{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--card);padding:20px;min-width:0}
:root[data-theme=light] .card{background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -16px rgba(15,23,42,.18)}
.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(240,185,11,.10),transparent 45%)}
.glow:hover::after{opacity:1}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-h h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.card-h h3 .i{color:var(--gold)}
.g{display:grid;gap:16px}
.g+.g,.g+.card,.card+.g,.card+.card,.toolbar+.g,.g+.toolbar{margin-top:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:1180px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.g4{gap:10px}}
.kpi{padding:18px}
.kl{display:flex;align-items:center;gap:10px;color:var(--mu);font-size:13px;font-weight:600}
.ki{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(240,185,11,.12);color:var(--gold);flex:none}
.ki.up{background:rgba(22,209,154,.12);color:var(--up)}
.ki.vio{background:rgba(124,92,255,.15);color:#a78bfa}
.ki.warn{background:rgba(255,176,32,.13);color:var(--warn)}
.ki.cy{background:rgba(34,195,238,.13);color:var(--cy)}
.kv{font-size:26px;font-weight:800;margin-top:12px;letter-spacing:-.02em;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks{font-size:12.5px;color:var(--mu);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){.kpi{padding:14px}.kv{font-size:19px;margin-top:10px}.kl{font-size:12px;gap:8px}.ki{width:30px;height:30px;border-radius:9px}}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--line2);background:var(--card);white-space:nowrap;color:var(--mu)}
.chip.xs{height:20px;padding:0 7px;font-size:10.5px}
.st-pending{color:var(--warn);background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.32)}
.st-pending::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.6s infinite}
.st-approved{color:var(--up);background:rgba(22,209,154,.1);border-color:rgba(22,209,154,.32)}
.st-rejected{color:var(--dn);background:rgba(255,84,112,.1);border-color:rgba(255,84,112,.32)}
.st-cancelled{color:var(--mu)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;-webkit-overflow-scrolling:touch;min-width:0}
.chips::-webkit-scrollbar{display:none}
.fchip{position:relative;overflow:hidden;flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--card);font-weight:700;font-size:13.5px;color:var(--mu);display:inline-flex;align-items:center;gap:7px;transition:color .2s,background .2s,border-color .2s}
.fchip:hover{color:var(--tx);border-color:rgba(240,185,11,.35)}
.fchip.on{color:#1a1300;background:var(--grad);border-color:transparent}
.fchip .n{font-size:11.5px;opacity:.7;font-family:var(--mono)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mb16{margin-bottom:16px}
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid rgba(34,195,238,.3);background:rgba(34,195,238,.08);margin-bottom:16px;white-space:pre-line}
.notice .i{color:var(--cy);margin-top:2px}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:13.5px;color:var(--mu);margin-top:12px}
.note.warn{border-color:rgba(255,176,32,.3);background:rgba(255,176,32,.06)}
.note.warn .i{color:var(--warn)}
.note .i{margin-top:2px}
.note code,.mono-box{font-family:var(--mono);font-size:12.5px;background:rgba(0,0,0,.25);padding:2px 6px;border-radius:6px;color:var(--tx);word-break:break-all}
:root[data-theme=light] .note code{background:rgba(15,23,42,.06)}
.empty{text-align:center;padding:34px 16px;color:var(--mu)}
.empty .ei{width:64px;height:64px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);color:var(--gold)}
.empty h4{color:var(--tx);font-size:16px;margin-bottom:4px}
.empty p{margin:0 0 16px;font-size:14px}
.sk{border-radius:12px;background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);background-size:200% 100%;animation:skm 1.2s infinite}
.kv-list{display:flex;flex-direction:column}
.kv-list>div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv-list>div:last-child{border-bottom:0}
.kv-list span{color:var(--mu);flex:none}
.kv-list b{text-align:right;word-break:break-all;font-weight:600;min-width:0}
.sec-t{font-size:14px;font-weight:800;margin:22px 0 10px;letter-spacing:.01em}

/* ---------- responsive rows (table on wide, cards on narrow) ---------- */
.rows{container-type:inline-size;display:flex;flex-direction:column}
.row{display:grid;align-items:center;gap:12px;padding:13px 12px;border-radius:12px;transition:background .2s}
.row+.row{border-top:1px solid var(--line)}
.row:hover{background:var(--card)}
.row.head{color:var(--mu);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding-top:2px;padding-bottom:8px}
.row.head:hover{background:none}
.dcols{grid-template-columns:minmax(150px,1.3fr) .8fr .9fr minmax(120px,1.3fr) 1fr .9fr minmax(178px,auto)}
.ucols{grid-template-columns:minmax(160px,1.4fr) 1fr .9fr .9fr .8fr minmax(228px,auto)}
.cell{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.cell>.l{display:none}
.cell small{font-size:12px}
.cell.acts{flex-direction:row;justify-content:flex-end;flex-wrap:wrap;gap:6px;align-items:center}
.who{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.who b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{display:block;color:var(--mu);font-size:12px}
.cp{font-size:13px;padding:2px 6px;margin-left:-6px;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.cp:hover{background:var(--card2);color:var(--gold)}
@container (max-width:780px){
  .row.head{display:none}
  .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px 14px;padding:14px;border:1px solid var(--line);background:var(--card)}
  .row+.row{border-top:1px solid var(--line);margin-top:10px}
  .cell>.l{display:block;font-size:10.5px;color:var(--mu);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
  .cell.full{grid-column:1/-1}
  .cell.acts{justify-content:stretch;padding-top:4px}
  .cell.acts .btn:not(.icon){flex:1}
}

/* ---------- transactions list ---------- */
.txl{display:flex;flex-direction:column}
.tx{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 10px;border-radius:12px;text-align:left;width:100%;transition:background .2s}
.tx+.tx{border-top:1px solid var(--line)}
.tx:hover{background:var(--card)}
.tx-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(22,209,154,.12);color:var(--up)}
.tx-ic.adj{background:rgba(124,92,255,.14);color:#a78bfa}
.tx-m b{display:block;font-size:14.5px;font-weight:700}
.tx-m small{display:block;color:var(--mu);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.tx-r b{font-size:15px}
.tx-r .mu{font-weight:600}

/* ---------- user dashboard ---------- */
.home-top{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
@media (max-width:899px){.home-top{grid-template-columns:minmax(0,1fr)}}
.bal{overflow:hidden;padding:26px;color:#eef1f7;border:1px solid rgba(240,185,11,.28);
  background:radial-gradient(120% 140% at 0% 0%,rgba(240,185,11,.30),transparent 50%),radial-gradient(100% 120% at 100% 100%,rgba(124,92,255,.42),transparent 55%),linear-gradient(135deg,#151b2c,#0b0f1d)!important}
.bal .mu{color:#a3abbd}
.bal-l{display:flex;align-items:center;gap:8px;color:#c9cfdc;font-weight:600;font-size:14px}
.bal-l .i{color:var(--gold)}
.bal-amt{margin-top:10px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.bal-amt .mono{font-size:clamp(34px,5.2vw,50px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.bal-amt .unit{font-size:16px;color:#f0b90b;font-weight:800}
.bal-sub{margin-top:8px;font-size:13.5px;color:#a3abbd}
.bal-sub b{color:#eef1f7}
.bal-act{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.bal-act .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#eef1f7}
.bal-deco{position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 68px rgba(255,255,255,.015);pointer-events:none}
.bal-coin{position:absolute;right:28px;top:24px;width:58px;height:58px;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 10px 22px rgba(240,185,11,.55))}
.kcol{grid-template-columns:minmax(0,1fr);align-content:stretch}
@media (max-width:899px){.kcol{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.guide ol{list-style:none;margin:0 0 16px;padding:0;counter-reset:g}
.guide li{counter-increment:g;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:9px 0;font-size:14px}
.guide li::before{content:counter(g);width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(240,185,11,.12);color:var(--gold);font-weight:800;font-size:13px}
.guide li b{display:block}.guide li small{color:var(--mu)}

/* ---------- deposit ---------- */
.dep-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media (max-width:1000px){.dep-wrap{grid-template-columns:minmax(0,1fr)}}
.dep{padding:24px}
@media (max-width:520px){.dep{padding:18px 16px}}
.dep-t{font-size:19px;letter-spacing:-.01em}
.steps{display:flex;align-items:center;margin-bottom:24px}
.stp{display:flex;align-items:center;gap:10px;color:var(--mu);font-weight:700;font-size:14px;flex:none}
.stp b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);font-size:14px;transition:all .3s}
.stp.on{color:var(--tx)}
.stp.on b{background:var(--grad);color:#1a1300;border-color:transparent;box-shadow:0 0 0 5px rgba(240,185,11,.15)}
.stp.done b{background:rgba(22,209,154,.15);color:var(--up);border-color:rgba(22,209,154,.4)}
.sline{flex:1;height:2px;margin:0 12px;background:var(--line2);border-radius:2px;position:relative;overflow:hidden;min-width:16px}
.sline i{position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .6s}
.sline.done i{transform:none}
@media (max-width:560px){.stp span{display:none}.stp.on span{display:inline}}
.amts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.amt{position:relative;overflow:hidden;height:58px;border-radius:14px;border:1px solid var(--line2);background:var(--card);font-weight:700;font-family:var(--mono);font-size:18px;transition:all .2s}
.amt small{font-size:11px;color:var(--mu);font-family:var(--font);font-weight:700;margin-left:4px}
.amt:hover{border-color:rgba(240,185,11,.4)}
.amt.on{border-color:var(--gold);background:rgba(240,185,11,.12);box-shadow:0 0 0 4px rgba(240,185,11,.1);transform:translateY(-1px)}
.dep-btns{display:flex;gap:10px;margin-top:20px}
.dep-btns .btn{flex:1}
.dep-btns.c{justify-content:center}.dep-btns.c .btn{flex:0 1 200px}
@media (max-width:520px){.dep-btns{flex-direction:column-reverse}.dep-btns.c{flex-direction:column}.dep-btns .btn,.dep-btns.c .btn{flex:none;width:100%}}
.pay{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.copyrow{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid var(--line2);background:var(--card)}
.copyrow.hl{border:1px dashed rgba(240,185,11,.55);background:rgba(240,185,11,.07)}
.copyrow>div{flex:1}
.copyrow .k{font-size:12px;color:var(--mu);font-weight:600}
.copyrow .v{font-family:var(--mono);font-size:21px;font-weight:700;letter-spacing:.03em;word-break:break-all;line-height:1.35}
.copyrow.hl .v{color:var(--gold)}
.copyrow .k2{font-size:12.5px;color:var(--mu)}
.cdbox{display:flex;align-items:center;gap:14px;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.cdbox svg{width:46px;height:46px;transform:rotate(-90deg);flex:none}
.cdbox circle{fill:none;stroke-width:4}
.cd-bg{stroke:var(--line2)}
.cd-fg{stroke:var(--gold);stroke-dasharray:1;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.cdbox b{font-size:20px;display:block;line-height:1.2}
.cdbox small{color:var(--mu);font-size:12.5px}
.howto{margin:18px 0 0;padding:0;list-style:none;counter-reset:h}
.howto li{counter-increment:h;position:relative;padding:7px 0 7px 36px;font-size:14px}
.howto li::before{content:counter(h);position:absolute;left:0;top:6px;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(240,185,11,.12);color:var(--gold);font-size:12px;font-weight:800}
.sumbox{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(240,185,11,.07);border:1px solid rgba(240,185,11,.25);font-size:14px}
.dep-done{text-align:center;padding:16px 4px 6px}
.dep-done h3{font-size:22px}
.dep-done p{max-width:440px;margin:8px auto 14px}
.okmark{width:92px;height:92px;margin:4px auto 16px;display:block}
.okmark circle{stroke:var(--up);stroke-width:3;fill:rgba(22,209,154,.1);stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s forwards}
.okmark path{stroke:var(--up);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .45s .55s forwards}
.side-list{margin:0;padding:0;list-style:none}
.side-list li{display:flex;gap:10px;padding:8px 0;font-size:13.5px;color:var(--mu)}
.side-list li .i{color:var(--gold);margin-top:2px}
.side-list b{color:var(--tx)}

/* ---------- account ---------- */
.acc{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
@media (max-width:899px){.acc{grid-template-columns:minmax(0,1fr)}}
.prof{text-align:center;overflow:hidden;padding-top:34px}
.prof-bg{position:absolute;left:0;right:0;top:0;height:92px;background:radial-gradient(80% 140% at 20% 0%,rgba(240,185,11,.3),transparent 60%),radial-gradient(80% 140% at 90% 0%,rgba(124,92,255,.35),transparent 60%);pointer-events:none}
.prof .ava{margin:0 auto 12px;position:relative}
.prof h3{font-size:20px;margin-bottom:8px}
.prof .kv-list{text-align:left;margin:16px 0}
.prof .sw{margin:4px 0 16px}

/* ---------- admin overview ---------- */
.ov2{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
@media (max-width:1100px){.ov2{grid-template-columns:minmax(0,1fr)}}
.bars{display:flex;align-items:flex-end;gap:6px;height:190px;padding-top:24px}
.bars .bc{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end;min-width:0}
.bars .b{position:relative;width:100%;max-width:34px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--gold),rgba(240,185,11,.18));transform-origin:bottom;animation:growy .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*45ms);min-height:3px;transition:filter .2s}
.bars .b.z{background:var(--line2)}
.bars .b:hover{filter:brightness(1.25)}
.bars .b:hover::after{content:attr(data-v);position:absolute;bottom:100%;left:50%;transform:translate(-50%,-6px);padding:4px 8px;border-radius:8px;background:var(--bg2);border:1px solid var(--line2);font-size:11.5px;font-weight:700;white-space:nowrap;font-family:var(--mono);z-index:2;color:var(--tx)}
.bars .bl{font-size:10.5px;color:var(--mu);white-space:nowrap}
@media (max-width:560px){.bars{gap:4px}.bars .bc:nth-child(even) .bl{visibility:hidden}}
.pm{display:flex;align-items:center;gap:10px;padding:10px 4px}
.pm+.pm{border-top:1px solid var(--line)}
.pm .who{flex:1}
.pm .amtv{font-family:var(--mono);font-weight:700;font-size:14.5px;white-space:nowrap}
.logs{position:relative}
.lg{position:relative;display:flex;gap:12px;padding:8px 0 8px 2px}
.lg::before{content:"";position:absolute;left:6px;top:24px;bottom:-8px;width:1px;background:var(--line2)}
.lg:last-child::before{display:none}
.lg>i{width:11px;height:11px;border-radius:50%;background:var(--grad);flex:none;margin-top:6px;box-shadow:0 0 0 4px rgba(240,185,11,.12)}
.lg span{display:block;font-size:13.5px}
.lg small{color:var(--mu);font-size:12px}
.mini-s{display:flex;flex-direction:column;gap:8px}
.ms{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-align:left;width:100%;transition:border-color .2s,transform .2s}
.ms:hover{border-color:rgba(240,185,11,.4);transform:translateX(3px)}
.ms .min0{flex:1}
.ms b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms small{color:var(--mu);font-size:12px}
.ms>b.mono{font-size:16px;flex:none}

/* ---------- strategies ---------- */
.lockbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid rgba(124,92,255,.35);background:rgba(124,92,255,.08);font-size:13px;margin-bottom:16px;color:var(--mu)}
.lockbar .i{color:#a78bfa}
.lockbar b{color:var(--tx)}
.feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;padding:28px;overflow:hidden;cursor:pointer;border-color:rgba(240,185,11,.32);
  background:radial-gradient(90% 120% at 0% 0%,rgba(240,185,11,.16),transparent 55%),radial-gradient(80% 120% at 100% 100%,rgba(124,92,255,.22),transparent 60%),var(--card)!important}
.feature h3{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;margin:12px 0 8px;line-height:1.2}
.feature p{margin:0;font-size:14px}
.ft-k{display:flex;flex-wrap:wrap;gap:22px 34px;margin:22px 0}
.ft-r{display:flex;flex-direction:column;justify-content:center}
@media (max-width:899px){.feature{grid-template-columns:minmax(0,1fr);padding:20px;gap:8px}.ft-k{gap:16px 24px;margin:16px 0}}
.big{font-size:30px;font-weight:700;font-family:var(--mono);letter-spacing:-.03em;line-height:1}
.cap{font-size:11.5px;color:var(--mu);margin-top:7px;font-weight:600}
.bigsh{display:flex;align-items:flex-end;gap:14px;height:170px;margin-top:12px}
.bigsh>div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.bigsh i{display:block;width:100%;max-width:70px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#ffe17a,rgba(240,185,11,.25));transform-origin:bottom;animation:growy 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*120ms + 200ms);position:relative}
.bigsh b{font-family:var(--mono);font-size:18px}
.bigsh span{font-size:12px;color:var(--mu);font-weight:600}
.sbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0 14px}
.sbar .chips{flex:1 1 100%}
.sbar .sw{font-size:13px;color:var(--mu)}
.scount{font-size:13px;color:var(--mu);margin:0 0 12px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
@media (max-width:520px){.sgrid{grid-template-columns:minmax(0,1fr);gap:12px}}
.sc{cursor:pointer;display:flex;flex-direction:column;gap:13px;transition:transform .25s,border-color .25s,box-shadow .25s;animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*40ms)}
.sc:hover,.sc:focus-visible{transform:translateY(-4px);border-color:rgba(240,185,11,.38);box-shadow:0 22px 44px -22px rgba(240,185,11,.4);outline:none}
.sc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sc-fam{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.sc h4{margin-top:4px;font-size:15.5px;line-height:1.35}
.sc-desc{margin:-4px 0 0;font-size:13px;color:var(--mu)}
.sc-mid{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.spark{width:130px;height:46px;flex:none;overflow:visible}
.spark .l{fill:none;stroke-width:2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s .2s cubic-bezier(.6,0,.2,1) forwards}
.spark .l.u{stroke:var(--up)}.spark .l.d{stroke:var(--dn)}
.shm{display:flex;align-items:flex-end;gap:8px;height:50px;flex:none}
.shm>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;width:34px}
.shm i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--gold),rgba(240,185,11,.2));transform-origin:bottom;animation:growy .9s both;animation-delay:calc(var(--i)*100ms + 200ms)}
.shm span{font-size:9.5px;color:var(--mu);font-family:var(--mono)}
.sc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc-stats b{display:block;font-family:var(--mono);font-size:14.5px;white-space:nowrap}
.sc-stats span{display:block;font-size:10.5px;color:var(--mu);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.yr{font-size:11px;color:var(--mu);font-weight:600}
.yr .bar{height:6px;border-radius:6px;background:var(--line);margin:5px 0 4px;position:relative;overflow:hidden}
.yr .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;transform-origin:left;animation:grow 1s .3s cubic-bezier(.2,.8,.2,1) both}
.yr .bar i.bu{background:var(--up)}.yr .bar i.bd{background:var(--dn)}
.yr b{font-family:var(--mono);font-size:12.5px}
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--mu);font-weight:600;margin-top:auto}
.sc-foot>span:last-child{display:inline-flex;align-items:center;gap:4px}
.vb{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:8px;font-size:11.5px;font-weight:800;white-space:nowrap;flex:none}
.vb.pass{color:var(--up);background:rgba(22,209,154,.12)}
.vb.weak{color:var(--warn);background:rgba(255,176,32,.12)}
.vb.star{color:#1a1300;background:var(--grad)}
.rb{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--mu);white-space:nowrap}
.rb.ok{color:var(--up)}.rb.bad{color:var(--dn)}
.fam-panel{margin-bottom:16px;animation:rise .5s both}
.fp-h{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}
.fp-h h3{font-size:18px}
.rules{margin:6px 0 0;padding:0;list-style:none;counter-reset:r}
.rules li{counter-increment:r;position:relative;padding:7px 0 7px 36px;font-size:14px;line-height:1.5}
.rules li::before{content:counter(r);position:absolute;left:0;top:7px;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(240,185,11,.12);color:var(--gold);font-size:12px;font-weight:800}
.disc{margin-top:20px}
.sd-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.chart{position:relative;width:100%;height:270px;margin-top:6px;touch-action:pan-y}
@media (max-width:520px){.chart{height:220px}}
.chart svg{display:block;overflow:visible}
.chart .axis text{fill:var(--mu);font-size:11px;font-family:var(--mono)}
.chart .gl{stroke:var(--line);stroke-dasharray:3 5}
.chart .zl{stroke:var(--mu2);stroke-dasharray:5 5;stroke-width:1}
.chart .ln{fill:none;stroke-width:2.3;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s cubic-bezier(.6,0,.2,1) forwards}
.chart .ln.u{stroke:var(--up)}.chart .ln.d{stroke:var(--dn)}
.chart .ar.u{fill:url(#gUp)}.chart .ar.d{fill:url(#gDn)}
.chart .ar{animation:fade 1.2s .3s both}
.chart .cx{stroke:var(--mu);stroke-dasharray:3 3;opacity:0}
.chart .cd{stroke:var(--bg2);stroke-width:2.5;opacity:0}
.chart .cd.u{fill:var(--up)}.chart .cd.d{fill:var(--dn)}
.chart.hov .cx,.chart.hov .cd{opacity:1}
.chart .tip{position:absolute;pointer-events:none;padding:7px 10px;border-radius:10px;background:var(--bg2);border:1px solid var(--line2);font-size:12px;box-shadow:var(--sh);transform:translate(-50%,calc(-100% - 12px));white-space:nowrap;opacity:0;transition:opacity .15s;display:flex;gap:8px;align-items:baseline}
.chart .tip b{font-family:var(--mono);font-size:13px}
.chart .tip span{color:var(--mu)}
.mgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}
.mgrid .m{padding:12px;border-radius:12px;background:var(--card);border:1px solid var(--line);min-width:0}
.mgrid .m span{font-size:11px;color:var(--mu);font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mgrid .m b{font-family:var(--mono);font-size:16px;white-space:nowrap}
@media (max-width:760px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ytab>div{display:grid;grid-template-columns:minmax(0,1fr) auto 90px;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px;align-items:center}
.ytab>div:last-child{border-bottom:0}
.ytab b{text-align:right}

/* ---------- modal ---------- */
.mwrap{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:rgba(3,5,10,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .25s both}
.mwrap.out{animation:fade .2s reverse both}
.modal{width:min(540px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;border-radius:22px;padding:22px;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 30px 80px -20px rgba(0,0,0,.75);animation:pop .4s cubic-bezier(.2,.9,.3,1.15) both}
.modal.wide{width:min(940px,100%)}
.m-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.m-h h3{font-size:18px;line-height:1.3}
.m-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(240,185,11,.12);color:var(--gold);flex:none}
.m-x{margin-left:auto;flex:none}
.m-f{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.m-b>p{margin:0}
.mform .field:first-child{margin-top:0}
.mform .seg{margin-bottom:4px}
@media (max-width:899px){
  .mwrap{place-items:end center;padding:0}
  .modal,.modal.wide{width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - var(--sat) - 16px);border-radius:24px 24px 0 0;
    padding:16px calc(16px + var(--sar)) calc(18px + var(--sab)) calc(16px + var(--sal));animation:sheet .42s cubic-bezier(.2,.9,.3,1) both}
  .mwrap.out .modal{animation:sheet .25s reverse both}
  .modal::before{content:"";display:block;width:42px;height:5px;border-radius:5px;background:var(--line2);margin:-4px auto 14px}
  .m-f{flex-direction:column-reverse}.m-f .btn{width:100%}
}

/* ---------- toast & confetti ---------- */
#toasts{position:fixed;z-index:90;right:calc(20px + var(--sar));top:calc(20px + var(--sat));display:flex;flex-direction:column;gap:10px;pointer-events:none;align-items:flex-end}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:380px;padding:12px 16px 12px 12px;border-radius:14px;background:var(--bg2);border:1px solid var(--line2);box-shadow:var(--sh);animation:tin .45s cubic-bezier(.2,.9,.3,1.2) both;font-weight:600;font-size:14px}
.toast.out{animation:tout .28s both}
.toast .ti{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:rgba(22,209,154,.14);color:var(--up)}
.toast.err .ti{background:rgba(255,84,112,.14);color:var(--dn)}
.toast.info .ti{background:rgba(34,195,238,.14);color:var(--cy)}
@media (max-width:899px){
  #toasts{left:calc(12px + var(--sal));right:calc(12px + var(--sar));top:auto;bottom:calc(var(--tabh) + var(--sab) + 22px);align-items:stretch}
  body.authed-out #toasts{bottom:calc(16px + var(--sab))}
  .toast{max-width:none;animation-name:tinm}
}
.cf{position:fixed;z-index:95;width:8px;height:12px;border-radius:2px;pointer-events:none;animation:cf 1.5s cubic-bezier(.15,.6,.35,1) forwards}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ===================== v2 additions (server-backed portal) ===================== */
.checklist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:899px){.checklist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ck-item{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-align:left;width:100%;transition:border-color .2s,transform .2s}
.ck-item:hover{border-color:rgba(240,185,11,.4);transform:translateY(-2px)}
.ck-item .ci{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(255,176,32,.13);color:var(--warn)}
.ck-item.ok .ci{background:rgba(22,209,154,.14);color:var(--up)}
.ck-item b{display:block;font-size:14px}
.ck-item small{display:block;color:var(--mu);font-size:12px;margin-top:2px}
.ck-item .num{position:absolute;right:12px;top:10px;font-size:11px;font-weight:800;color:var(--mu2)}
.cap-row{display:flex;flex-wrap:wrap;gap:18px 30px;margin-top:18px}
.cap-row>div span{display:block;font-size:12px;color:#a3abbd;font-weight:600}
.cap-row>div b{font-family:var(--mono);font-size:17px}
.eqchart{height:200px}
@media (max-width:520px){.eqchart{height:170px}}
.pos{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 10px;border-radius:12px}
.pos+.pos{border-top:1px solid var(--line)}
.pos .sd{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.04em}
.pos .sd.l{background:rgba(22,209,154,.13);color:var(--up)}.pos .sd.s{background:rgba(255,84,112,.12);color:var(--dn)}
.pos .m b{display:block;font-size:14.5px}
.pos .m small{display:block;color:var(--mu);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos .r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pos .r b{font-family:var(--mono);font-size:14.5px}
.sumbar{position:sticky;top:76px;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:14px 16px;border-radius:16px;border:1px solid var(--line2);
  background:color-mix(in srgb,var(--bg2) 88%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--sh);margin-bottom:16px}
@media (max-width:899px){.sumbar{top:64px}}
.sumbar .meter{flex:1 1 200px;min-width:160px}
.sumbar .meter .bar{height:8px;border-radius:8px;background:var(--line2);overflow:hidden;margin-top:6px}
.sumbar .meter .bar i{display:block;height:100%;background:var(--grad);border-radius:8px;transition:width .4s}
.sumbar .meter.over .bar i{background:var(--dn)}
.sumbar .lbl{font-size:12px;color:var(--mu);font-weight:600}
.sumbar .val{font-family:var(--mono);font-weight:700}

.sc.def{opacity:.62;cursor:default}
.sc.def:hover{transform:none;box-shadow:none;border-color:var(--line)}
.selrow{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.selrow .w{display:flex;align-items:center;gap:6px;margin-left:auto}
.selrow .w input{width:66px;height:36px;border-radius:10px;border:1px solid var(--line2);background:rgba(0,0,0,.2);text-align:right;padding:0 10px;font-family:var(--mono);font-weight:700;font-size:15px;outline:none}
:root[data-theme=light] .selrow .w input{background:#fff}
.selrow .w input:focus{border-color:rgba(240,185,11,.6)}
.selrow .w span{color:var(--mu);font-weight:700}
.vb.def{color:var(--mu);background:var(--card2)}
.ytd{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:7px;background:var(--card2)}
.sec-h{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.sec-h h3{font-size:16px}
.sec-h .line{flex:1;height:1px;background:var(--line)}
.tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:800;background:var(--card2);color:var(--mu)}
.tag.up{background:rgba(22,209,154,.12);color:var(--up)}.tag.dn{background:rgba(255,84,112,.12);color:var(--dn)}.tag.warn{background:rgba(255,176,32,.12);color:var(--warn)}
.tag.gold{background:rgba(240,185,11,.14);color:var(--gold)}
.pcols{grid-template-columns:minmax(140px,1.2fr) .7fr .8fr minmax(120px,1.2fr) .9fr .8fr minmax(170px,auto)}
.ucols2{grid-template-columns:minmax(150px,1.3fr) 1fr .8fr .9fr .9fr .7fr minmax(200px,auto)}
.tcols{grid-template-columns:minmax(120px,1.1fr) .9fr .9fr .9fr 1fr .9fr minmax(80px,.7fr)}
.lcols{grid-template-columns:minmax(150px,1.2fr) .6fr .8fr .8fr .8fr .7fr}
.plan{margin-top:16px;padding:16px;border-radius:14px;border:1px solid var(--gold);background:rgba(240,185,11,.08);box-shadow:0 0 0 4px rgba(240,185,11,.08)}
.plan-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.plan-h b{font-size:16px}
.plan-p{font-size:24px;font-weight:800;color:var(--gold)}
.plan-p small{font-family:var(--font);font-size:12px;font-weight:600;color:var(--mu);margin-left:6px}
.plan ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.plan li{display:flex;align-items:center;gap:9px;font-size:14px}
.plan li .i{color:var(--up)}
.pkgcard{overflow:hidden;padding:24px;color:#eef1f7;border:1px solid rgba(240,185,11,.28);background:radial-gradient(120% 140% at 0% 0%,rgba(240,185,11,.26),transparent 50%),radial-gradient(100% 120% at 100% 100%,rgba(124,92,255,.38),transparent 55%),linear-gradient(135deg,#151b2c,#0b0f1d)!important}
.pkgcard .big{font-size:34px}
.pkgcard .mu{color:#a3abbd}
.radio-net{display:flex;gap:8px;margin-top:12px}
.warnbox{display:flex;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,84,112,.35);background:rgba(255,84,112,.08);font-size:13.5px;margin-top:12px}
.warnbox .i{color:var(--dn);margin-top:2px}
.okbox{display:flex;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid rgba(22,209,154,.35);background:rgba(22,209,154,.08);font-size:13.5px;margin-top:12px}
.okbox .i{color:var(--up);margin-top:2px}
.perm{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mock-ribbon{position:fixed;z-index:70;left:50%;top:calc(6px + var(--sat));transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:var(--vio);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;pointer-events:none;box-shadow:0 6px 20px -6px rgba(124,92,255,.8)}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(22,209,154,.6);animation:pulse 1.6s infinite;color:var(--up)}
.skel-card{height:120px}
.kv-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;font-size:13px}
.kv-mini span{color:var(--mu)}
.kv-mini b{font-family:var(--mono);font-weight:700;text-align:right}

/* ---- v3: picked strategy cards, equal heights, priority list ---- */
.sc.picked{border-color:rgba(240,185,11,.55);box-shadow:0 0 0 1px rgba(240,185,11,.35),0 20px 44px -24px rgba(240,185,11,.45)}
.sgrid{align-items:stretch}
.sgrid>.sc{height:100%}
.sc .selrow{margin-top:auto}
.sc .yrs{margin-bottom:2px}
.prio{margin-bottom:16px}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 4px}
.prow+.prow{border-top:1px solid var(--line)}
.prow .pn{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(240,185,11,.14);color:var(--gold);font-size:13px}
.prow b{display:block;font-size:14px}
.prow small{color:var(--mu);font-size:12px}
.sgrid>.card,.g>.card,.g>.stack,.stack>.card{margin-top:0}

/* ---- v4: two-step login, payment auto-check, backups ---- */
.tfa-badge{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin:0 0 14px;color:var(--gold);background:rgba(240,185,11,.12);border:1px solid rgba(240,185,11,.3)}
.tfa-gate{max-width:560px;margin:4vh auto 0;text-align:center;padding:32px 26px}
.tfa-gate .tfa-badge{margin:0 auto 16px}
.tfa-gate h3{font-size:20px;margin-bottom:8px}
.tfa-qr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin:0 0 6px}
.tfa-qr .qr{width:172px;height:172px;padding:6px;border-radius:12px;background:#fff;flex:none}
.tfa-qr .qr svg{width:100%;height:100%;display:block}
@media (max-width:520px){.tfa-qr{grid-template-columns:minmax(0,1fr)}.tfa-qr .qr{margin:0 auto}}
.secret{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.04em;word-break:break-word;margin-top:2px}
.rcodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.rcodes span{font-family:var(--mono);font-size:15px;font-weight:700;text-align:center;padding:9px 6px;border-radius:10px;background:var(--card2);border:1px solid var(--line)}
.autost{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-top:4px}
.autost.run{color:var(--cy)}.autost.bad{color:var(--warn)}.autost.ok{color:var(--up)}
.autost .pulse{width:7px;height:7px;border-radius:50%;background:currentColor;animation:ecpulse 1.4s ease-in-out infinite}
@keyframes ecpulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.bk-row{display:flex;align-items:center;gap:10px;padding:9px 2px}
.bk-row+.bk-row{border-top:1px solid var(--line)}
.bk-row .min0{flex:1}
.bk-row b{display:block;font-family:var(--mono);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-row small{color:var(--mu);font-size:12px}

/* ---- v5: order size (Vol) per selected strategy ---- */
.vchip{margin-left:auto;padding:5px 10px;border-radius:9px;background:rgba(240,185,11,.12);color:var(--gold);font-size:12.5px;font-weight:700;font-family:var(--mono);white-space:nowrap}
.sumbar .meter.dim{opacity:.5}
.vrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto 150px auto;gap:10px 12px;align-items:center;padding:11px 4px}
.vrow+.vrow{border-top:1px solid var(--line)}
.vrow .pn{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(240,185,11,.14);color:var(--gold);font-size:13px}
.vname b{display:block;font-size:14px}
.vname small{display:block;color:var(--mu);font-size:12px;line-height:1.4}
.vseg{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--card2);border:1px solid var(--line)}
.vseg button{padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--mu);white-space:nowrap;transition:background .2s,color .2s}
.vseg button.on{background:rgba(240,185,11,.16);color:var(--gold)}
.vin{display:flex;align-items:center;gap:6px;min-width:0}
.vin input{flex:1;min-width:0;height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);background:rgba(0,0,0,.2);text-align:right;font-family:var(--mono);font-weight:700;font-size:15px;outline:none}
:root[data-theme=light] .vin input{background:#fff}
.vin input:focus{border-color:rgba(240,185,11,.6)}
.vin span{color:var(--mu);font-weight:700;font-size:12.5px}
.vord{display:flex;gap:4px}
@media (max-width:760px){
  .vrow{grid-template-columns:auto minmax(0,1fr) auto}
  .vrow .vseg{grid-column:2/4;justify-self:start}
  .vrow .vin{grid-column:2/4}
  .vrow .vord{grid-column:3;grid-row:1}
}