:root{
  --bg:#0b0d12;--bg2:#10131a;--card:#151922;--card2:#1b202b;--line:#262c39;--line2:#323a4a;
  --txt:#f1f3f7;--mut:#9099ad;--dim:#677087;--red:#e41e2b;--red2:#ff3b47;--redbg:rgba(228,30,43,.12);
  --ok:#22c55e;--okbg:rgba(34,197,94,.12);--warn:#f59e0b;--warnbg:rgba(245,158,11,.12);--bad:#ef4444;--badbg:rgba(239,68,68,.12);
  --blue:#60a5fa;--blubg:rgba(96,165,250,.12);
  --r:16px;--r2:12px;--sh:0 10px 40px rgba(0,0,0,.45);
  --font:"Inter","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.55 var(--font);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
[dir=rtl] body{letter-spacing:0}
body{min-height:100vh;background:radial-gradient(1200px 600px at 85% -10%,rgba(228,30,43,.16),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(228,30,43,.07),transparent 60%),var(--bg)}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--red2);text-decoration:none}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- buttons / inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;font-weight:700;font-size:15px;transition:transform .08s,background .15s,opacity .15s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:default}
.btn.p{background:var(--red);color:#fff;box-shadow:0 8px 24px rgba(228,30,43,.35)}
.btn.p:hover{background:var(--red2)}
.btn.g{background:var(--card2);color:var(--txt);border:1px solid var(--line2)}
.btn.g:hover{border-color:#4a5468}
.btn.t{background:transparent;color:var(--mut);height:40px;padding:0 12px}
.btn.t:hover{color:var(--txt)}
.btn.sm{height:38px;padding:0 14px;font-size:14px}
.btn.block{width:100%}
.btn svg{width:18px;height:18px;flex:none}
.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.field{margin-bottom:14px}
.field>label{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mut);margin:0 0 7px;font-weight:600}
.inp{width:100%;height:50px;padding:0 16px;border-radius:var(--r2);border:1px solid var(--line2);background:var(--bg2);outline:0;transition:border-color .15s,box-shadow .15s;font-size:16px}
textarea.inp{height:auto;min-height:104px;padding:13px 16px;resize:vertical;line-height:1.5}
.inp:focus{border-color:var(--red);box-shadow:0 0 0 4px var(--redbg)}
.inp.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em;direction:ltr;text-align:left}
.pw{position:relative}.pw .inp{padding-inline-end:52px}
.pw button{position:absolute;inset-inline-end:6px;top:6px;width:38px;height:38px;border:0;background:transparent;color:var(--mut);cursor:pointer;border-radius:10px}
.pw button:hover{color:var(--txt);background:var(--card2)}
.hint{font-size:13px;color:var(--dim);margin-top:6px}
.err{color:#ff8a8a;font-size:14px;min-height:20px;margin:6px 0 0}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login .side{position:relative;padding:56px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border-inline-end:1px solid var(--line)}
.login .side h1{font-size:46px;line-height:1.1;margin:0 0 16px;letter-spacing:-.02em}
.login .side h1 b{color:var(--red)}
.login .side p{color:var(--mut);max-width:440px;margin:0;font-size:17px}
.login .feat{display:grid;gap:12px;margin-top:34px;max-width:440px}
.login .feat div{display:flex;gap:12px;align-items:center;color:#cfd4df;font-size:15px}
.login .feat i{width:34px;height:34px;border-radius:10px;background:var(--redbg);color:var(--red2);display:grid;place-items:center;flex:none}
.login .feat svg{width:18px;height:18px}
.login .ring{position:absolute;inset-inline-end:-180px;bottom:-180px;width:520px;height:520px;border-radius:50%;border:60px solid rgba(228,30,43,.06)}
.login .form{display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login .box{width:100%;max-width:400px}
.login .box h2{font-size:26px;margin:22px 0 6px}
.login .box .sub{color:var(--mut);margin:0 0 26px}
.logo{height:40px;width:auto;display:block;align-self:flex-start}
.login .links{display:flex;justify-content:space-between;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13px}
.login .links a{color:var(--mut)}.login .links a:hover{color:var(--txt)}
@media(max-width:900px){.login{grid-template-columns:1fr}.login .side{display:none}.login .form{align-items:flex-start;padding-top:56px}}

/* ---------- app shell ---------- */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(11,13,18,.78);border-bottom:1px solid var(--line)}
.top .in{max-width:1180px;margin:0 auto;height:68px;padding:0 20px;display:flex;align-items:center;gap:14px}
.top .logo{height:32px}
.top .sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:var(--card);border:1px solid var(--line2);font-size:14px;font-weight:600;direction:ltr}
.chip svg{width:16px;height:16px;color:var(--mut)}
.ib{width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--mut);font-weight:700;font-size:13px}
.ib:hover{color:var(--txt);border-color:#4a5468}
.ib svg{width:18px;height:18px}
@media(max-width:560px){.top .chip{display:none}}

html,body{overflow-x:hidden}
.hero>*,.grid>*,.dev>div{min-width:0}
main{max-width:1180px;margin:0 auto;padding:28px 20px 80px}

.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:30px}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--card),#12161e);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.dev{display:flex;gap:18px;align-items:flex-start}
.dev .tv{width:58px;height:58px;border-radius:16px;background:var(--card2);border:1px solid var(--line2);display:grid;place-items:center;flex:none;color:var(--mut)}
.dev .tv svg{width:28px;height:28px}
.dev h1{margin:0;font-size:26px;letter-spacing:.02em;direction:ltr;text-align:start;font-variant-numeric:tabular-nums}
.dev .type{color:var(--mut);font-size:14px;margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:700}
.badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.active{background:var(--okbg);color:var(--ok)}.badge.free{background:var(--blubg);color:var(--blue)}
.badge.trial{background:var(--warnbg);color:var(--warn)}.badge.expired{background:var(--badbg);color:var(--bad)}
.meter{margin-top:18px}
.meter .row{display:flex;justify-content:space-between;font-size:14px;color:var(--mut);margin-bottom:8px}
.meter .row b{color:var(--txt)}
.bar{height:8px;border-radius:8px;background:var(--bg2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--red),#ff6a3d)}
.bar.ok i{background:linear-gradient(90deg,#16a34a,#4ade80)}
.acts{display:grid;gap:10px;align-content:start}
.act{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);cursor:pointer;text-align:start;transition:border-color .15s,background .15s;width:100%}
.act:hover{border-color:var(--line2);background:var(--card2)}
.act i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--redbg);color:var(--red2);flex:none}
.act i svg{width:20px;height:20px}
.act b{display:block;font-size:15px}.act span{color:var(--mut);font-size:13px}
.act .ar{margin-inline-start:auto;color:var(--dim)}
.act .ar svg{width:18px;height:18px}
[dir=rtl] .act .ar svg{transform:scaleX(-1)}

.sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 16px}
.sec h2{font-size:21px;margin:0}
.sec .n{color:var(--mut);font-weight:500;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.pl{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,transform .15s}
.pl:hover{border-color:var(--line2);transform:translateY(-2px)}
.pl .hd{display:flex;align-items:center;gap:12px}
.pl .av{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;flex:none}
.pl h3{margin:0;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl .host{color:var(--mut);font-size:13px;direction:ltr;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px;background:var(--bg2);border-radius:12px;padding:12px}
.pl .kv span{color:var(--dim)}
.pl .kv b{font-weight:600;direction:ltr;text-align:start;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl .ft{display:flex;gap:8px;margin-top:auto}
.pl .ft .btn{flex:1}
.lock{position:absolute;top:16px;inset-inline-end:16px;color:var(--warn)}
.lock svg{width:16px;height:16px}
.empty{border:1.5px dashed var(--line2);border-radius:var(--r);padding:44px 20px;text-align:center;color:var(--mut)}
.empty i{width:60px;height:60px;border-radius:18px;background:var(--redbg);color:var(--red2);display:inline-grid;place-items:center;margin-bottom:14px}
.empty i svg{width:28px;height:28px}
.empty h3{color:var(--txt);margin:0 0 6px}
.empty p{margin:0 auto 18px;max-width:380px}
.addcard{border:1.5px dashed var(--line2);border-radius:var(--r);display:grid;place-items:center;min-height:200px;cursor:pointer;color:var(--mut);background:transparent;transition:border-color .15s,color .15s}
.addcard:hover{border-color:var(--red);color:var(--txt)}
.addcard div{display:grid;justify-items:center;gap:10px;font-weight:700}
.addcard svg{width:28px;height:28px}

/* ---------- sheet / modal ---------- */
.ov{position:fixed;inset:0;z-index:50;background:rgba(3,4,7,.66);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fi .15s}
@keyframes fi{from{opacity:0}}
.sheet{width:100%;max-width:560px;max-height:calc(100vh - 40px);overflow:auto;background:var(--card);border:1px solid var(--line2);border-radius:20px;box-shadow:var(--sh);animation:su .2s cubic-bezier(.2,.8,.2,1)}
@keyframes su{from{transform:translateY(16px);opacity:0}}
.sheet .hd{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 8px}
.sheet .hd h3{margin:0;font-size:20px}
.sheet .bd{padding:10px 22px 4px}
.sheet .ft{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px 22px}
@media(max-width:560px){.ov{align-items:flex-end;padding:0}.sheet{border-radius:22px 22px 0 0;max-height:92vh}.sheet .ft .btn{flex:1}}
.seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:16px}
.seg button{flex:1;height:38px;border:0;background:transparent;border-radius:9px;cursor:pointer;color:var(--mut);font-weight:700;font-size:14px}
.seg button.on{background:var(--card2);color:var(--txt);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.det{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 14px}
.det div{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.det span{display:block;font-size:12px;color:var(--dim)}
.det b{display:block;font-size:14px;direction:ltr;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.det div.ok{border-color:rgba(34,197,94,.35)}
.det div.miss b{color:var(--dim);font-family:var(--font)}
@media(max-width:560px){.det{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;font-size:14px;margin-bottom:14px}
.check svg{width:18px;height:18px;flex:none}
.check.ok{background:var(--okbg);color:#86efac}.check.bad{background:var(--badbg);color:#fca5a5}.check.wait{background:var(--card2);color:var(--mut)}
.more{display:flex;align-items:center;gap:8px;color:var(--mut);cursor:pointer;font-weight:600;font-size:14px;padding:6px 0 12px;border:0;background:none}
.more svg{width:16px;height:16px;transition:transform .15s}
.more.on svg{transform:rotate(180deg)}
.tog{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.tog b{font-size:15px}.tog span{display:block;font-size:13px;color:var(--dim)}
.sw{position:relative;width:46px;height:28px;flex:none}
.sw input{opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;border-radius:99px;background:var(--line2);cursor:pointer;transition:background .15s}
.sw i:after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}
.sw input:checked+i{background:var(--red)}
.sw input:checked+i:after{transform:translateX(18px)}
[dir=rtl] .sw input:checked+i:after{transform:translateX(-18px)}
.sec2{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:6px;margin-top:4px}
.sec2 svg{width:14px;height:14px}

/* ---------- toast ---------- */
#toasts{position:fixed;z-index:80;bottom:22px;inset-inline:0;display:grid;justify-items:center;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:#1d2330;border:1px solid var(--line2);box-shadow:var(--sh);font-weight:600;font-size:14px;animation:su .2s;max-width:calc(100vw - 32px)}
.toast svg{width:18px;height:18px;flex:none}
.toast.ok svg{color:var(--ok)}.toast.bad svg{color:var(--bad)}

.skel{background:linear-gradient(90deg,var(--card) 0,var(--card2) 50%,var(--card) 100%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r);min-height:200px}
@keyframes sk{to{background-position:-200% 0}}
footer{color:var(--dim);font-size:13px;text-align:center;padding:30px 0 0}

/* ---- v1.1: Inter type, calmer colours, more polish ---- */
h1,h2,h3,.btn,.badge{letter-spacing:-.02em}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .btn{letter-spacing:0}
.login .side h1{font-weight:800;letter-spacing:-.035em}
.login .box h2{font-weight:800;font-size:28px}
.dev h1{font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.sec h2{font-weight:800;font-size:22px}
.card{background:linear-gradient(180deg,#161a22,#12151c);border-color:rgba(255,255,255,.06)}
.act{background:#141820;border-color:rgba(255,255,255,.06)}
.act b{font-weight:700}
.act i{background:rgba(255,255,255,.05);color:#e8eaf0}
.act:hover i{background:var(--red);color:#fff}
.bar{height:6px}
.bar.ok i,.bar i{background:var(--red)}
.pl{background:#141820;border-color:rgba(255,255,255,.06);padding:20px;gap:14px}
.pl:hover{border-color:rgba(255,255,255,.14);transform:none;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.pl .av{background:rgba(228,30,43,.12)!important;color:#ff5a63;font-weight:800;border-radius:14px;width:46px;height:46px;font-size:19px}
.pl h3{font-weight:700;font-size:17px}
.pl .kv{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.05)}
.pl .kv b{font-weight:600}
.pl .lockd{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:13px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:14px 12px}
.pl .lockd svg{width:15px;height:15px;color:var(--warn);flex:none}
.pl .pst{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim);margin-top:4px;min-height:18px}
.pl .pst i{width:7px;height:7px;border-radius:50%;background:var(--dim);display:inline-block}
.pl .pst i.ok{background:var(--ok)}.pl .pst i.bad{background:var(--bad)}
.pl .pst i.wait{animation:pl 1s infinite}
@keyframes pl{50%{opacity:.25}}
.pl .ft .btn.g{background:rgba(255,255,255,.06);border-color:transparent}
.pl .ft .btn.g:hover{background:var(--red);color:#fff}
.pl .ft .btn.t:hover{color:#ff6b6b}
.lock{display:none}
.addcard{border-color:rgba(255,255,255,.1);min-height:220px}
.btn.p{box-shadow:0 8px 22px rgba(228,30,43,.28)}

/* ---- add / edit dialog (methods + PIN box) ---- */
.mths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mth{display:grid;justify-items:center;gap:6px;padding:16px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);cursor:pointer;text-align:center;color:var(--txt);transition:border-color .15s,background .15s}
.mth i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:#d9dce4}
.mth i svg{width:20px;height:20px}
.mth b{font-weight:600;font-size:14px;letter-spacing:-.01em}
.mth span{color:var(--dim);font-size:12px;line-height:1.35}
.mth:hover{border-color:rgba(255,255,255,.18)}
.mth.on{border-color:rgba(228,30,43,.7);background:rgba(228,30,43,.07)}
.mth.on i{background:var(--red);color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inp.ltr{direction:ltr;text-align:left}
textarea.inp{min-height:96px}
.cbx{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:6px 0 12px}
.cbx input{position:absolute;opacity:0;width:0;height:0}
.cbx .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line2);display:grid;place-items:center;flex:none;margin-top:2px;color:transparent;transition:background .15s,border-color .15s}
.cbx .box svg{width:13px;height:13px}
.cbx input:checked+.box{background:var(--red);border-color:var(--red);color:#fff}
.cbx input:focus-visible+.box{outline:2px solid var(--red2);outline-offset:2px}
.cbx b{display:block;font-weight:600;font-size:14.5px}
.cbx small{display:block;color:var(--dim);font-size:13px}
.pinbox{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);border-radius:14px;padding:14px}
.pinbox .pbh{display:flex;align-items:center;justify-content:space-between}
.pinbox .pbh b{font-weight:600;font-size:14px}
.pinbox .tag{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px;background:rgba(228,30,43,.12);color:#ff6b72}
.pinbox p{margin:6px 0 12px;color:var(--dim);font-size:13px}
.pinbox small{display:block;color:var(--dim);font-size:12px;margin-top:8px}
.pinbox .inp{text-align:center;letter-spacing:.3em}
.sheet .ft{align-items:center}
.sheet .hd h3{font-weight:600}
@media(max-width:560px){
  .mths{gap:8px}.mth{padding:12px 6px}.mth span{display:none}.mth i{width:34px;height:34px}
  .grid2{grid-template-columns:1fr}
  .sheet .bd{padding:10px 16px 4px}.sheet .ft{padding:12px 16px calc(16px + env(safe-area-inset-bottom));flex-wrap:wrap}
  .sheet .ft .btn{flex:1}.sheet .ft>span{display:none}
}
/* lighter, more refined type everywhere */
body{font-weight:400}
.login .side h1{font-weight:700}
.login .box h2,.sec h2{font-weight:700}
.pl h3,.act b{font-weight:600}
.dev h1{font-weight:600}
.btn{font-weight:600}
.pinbox .inp::placeholder{letter-spacing:normal}
@media(max-width:560px){.det{grid-template-columns:1fr;gap:6px}.det div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px}.det span{display:inline}.det b{text-align:end}}

/* ---- Apple-like type: system SF first, thin weights, quiet hierarchy ---- */
:root{--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","SF Arabic","IBM Plex Sans Arabic",system-ui,sans-serif;
  --disp:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","SF Arabic","IBM Plex Sans Arabic",system-ui,sans-serif}
html,body{font-family:var(--font);font-weight:400;font-size:15px;letter-spacing:-.009em}
h1,h2,h3{font-family:var(--disp)}
.login .side h1{font-weight:300;font-size:50px;letter-spacing:-.04em;line-height:1.06}
.login .side h1 b{font-weight:600}
.login .box h2{font-weight:600;font-size:30px;letter-spacing:-.03em}
.login .side p,.login .box .sub{font-weight:300;font-size:17px;color:#a3a8b5}
.sec h2{font-weight:600;font-size:24px;letter-spacing:-.03em}
.sec .n{font-weight:300}
.dev h1{font-weight:300;font-size:30px;letter-spacing:.005em}
.dev .type,.act span,.pl .kv span,.hint,.meter .row span{font-weight:300}
.act b,.pl h3{font-weight:500;letter-spacing:-.015em}
.pl .kv b{font-weight:400}
.meter .row b{font-weight:500}
.btn{font-weight:500;letter-spacing:-.01em}
.badge{font-weight:500}
.field>label,.mth b,.cbx b,.pinbox .pbh b{font-weight:500}
.sheet .hd h3{font-weight:600;letter-spacing:-.025em}
.devcard .dev{align-items:center}
.devcard .big{display:grid;justify-items:end;text-align:end;flex:none;padding-inline-start:10px}
.devcard .big b{font:200 72px/0.95 var(--disp);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.devcard .big span{color:var(--mut);font-weight:300;font-size:14px;margin-top:6px}
.top .logo{align-self:center}
.top .in{height:64px}
@media(max-width:560px){.devcard .big b{font-size:52px}.dev h1{font-size:22px}.login .side h1{font-size:40px}}

@media(max-width:560px){
  .devcard .dev{flex-wrap:wrap;gap:14px}
  .devcard .dev .tv{display:none}
  .devcard .big{order:-1;width:100%;display:flex;align-items:baseline;gap:10px;justify-items:start;padding:0}
  .devcard .big span{margin:0}
  .dev h1{font-size:21px;overflow-wrap:anywhere}
}
[dir=rtl] .dev h1{text-align:right}
/* thin progress line */
.bar,.devcard .bar{height:3px;border-radius:3px;background:rgba(255,255,255,.07)}
.bar i{border-radius:3px}
/* ---- compact dialog: fixed header + footer, body scrolls without a visible scrollbar ---- */
.sheet{display:flex;flex-direction:column;max-width:520px;max-height:calc(100vh - 32px);overflow:hidden}
.sheet .hd{flex:none;padding:16px 20px 10px}
.sheet .hd h3{font-size:18px}
.sheet .hd .ib{width:34px;height:34px;border-radius:10px}
.sheet .bd{flex:1;min-height:0;overflow-y:auto;padding:4px 20px 6px;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.sheet .bd::-webkit-scrollbar{display:none}
.sheet .ft{flex:none;padding:12px 20px 16px;border-top:1px solid rgba(255,255,255,.06);background:inherit}
.sheet .field{margin-bottom:12px}
.sheet .field>label{margin-bottom:6px;font-size:12.5px}
.sheet .inp{height:44px;font-size:15px;border-radius:11px}
.sheet textarea.inp{min-height:64px;height:64px;padding:11px 14px}
.mths{gap:8px}
.mth{grid-template-columns:auto 1fr;justify-items:start;text-align:start;align-items:center;gap:2px 10px;padding:10px 12px;border-radius:12px}
.mth i{grid-row:span 2;width:32px;height:32px;border-radius:9px}
.mth i svg{width:17px;height:17px}
.mth b{font-size:13.5px;line-height:1.2}
.mth span{font-size:11.5px;line-height:1.25}
.det{margin:8px 0 0;gap:6px}
.det div{padding:7px 10px;border-radius:10px}
.det span{font-size:11px}.det b{font-size:13px}
.cbx{margin:2px 0 10px}
.pinbox{padding:12px}
.pinbox p{margin:4px 0 10px}
.pinbox .inp{height:42px}
.check{padding:10px 12px;margin-bottom:10px;font-size:13.5px}
@media(max-width:560px){
  .sheet{max-height:94vh;border-radius:20px 20px 0 0}
  .mths{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mth{grid-template-columns:1fr;justify-items:center;text-align:center;padding:9px 6px}
  .mth i{grid-row:auto;width:30px;height:30px}
  .mth b{font-size:12px}
  .sheet .ft{padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
  .sheet .ft .btn{height:44px;font-size:14px}
  .grid2{grid-template-columns:1fr 1fr}
}
html,body{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
@media(max-width:560px){.sheet textarea.inp{min-height:84px;height:84px}.det div{padding:6px 10px}.sheet .inp{height:42px}}
/* ---- tighter still: one-line method buttons, 40px fields ---- */
.sheet{max-width:480px}
.sheet .hd{padding:14px 18px 8px}
.sheet .bd{padding:2px 18px 4px}
.sheet .ft{padding:10px 18px 14px}
.sheet .ft .btn{height:40px;padding:0 16px;font-size:14px}
.sheet .field{margin-bottom:10px}
.sheet .field>label{margin-bottom:5px;font-size:12px}
.sheet .inp{height:40px;font-size:14.5px;padding:0 12px}
.sheet textarea.inp{min-height:58px;height:58px;padding:9px 12px;font-size:14px}
.sheet .pw button{top:4px;width:32px;height:32px}
.mth{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 8px;height:42px;border-radius:11px}
.mth i{width:24px;height:24px;border-radius:7px;background:none}
.mth.on i{background:none;color:var(--red2)}
.mth i svg{width:17px;height:17px}
.mth b{font-size:13px;white-space:nowrap}
.mth span{display:none}
.morelink{border:0;background:none;color:var(--mut);font-size:13px;padding:0 0 10px;cursor:pointer}
.morelink:hover{color:var(--txt)}
.cbx{margin:0 0 8px}
.cbx small{font-size:12px}
.pinbox{padding:10px 12px}
.pinbox p{font-size:12px;margin:2px 0 8px}
.pinbox small{display:none}
.pinbox .inp{height:38px}
@media(max-width:560px){
  .mth{flex-direction:column;height:auto;padding:8px 4px;gap:3px}
  .mth b{font-size:11.5px}
  .sheet textarea.inp{min-height:70px;height:70px}
  .sheet .inp{height:40px}
}
/* ---- protect on one line, PIN fields beside it ---- */
.protrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 6px;min-height:40px}
.protrow .cbx{margin:0;align-items:center}
.protrow .cbx .box{margin:0}
.protrow .pins{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:220px}
.protrow .pins .inp{height:38px;text-align:center;font-size:14px}
.protrow .pins .inp::placeholder{font-size:12.5px}
.sheet textarea.inp{min-height:50px;height:50px}
.det div{padding:5px 10px}
.det span{font-size:10.5px}
.sheet .field{margin-bottom:9px}
@media(max-width:560px){.protrow .pins{min-width:100%}.sheet textarea.inp{min-height:62px;height:62px}}
/* ---- slim toasts (green success, red error) at the top ---- */
#toasts{top:76px;bottom:auto;gap:6px}
.toast{height:auto;min-height:38px;padding:8px 16px 8px 12px;border-radius:999px;font-size:13.5px;font-weight:500;background:rgba(20,40,28,.92);border:1px solid rgba(34,197,94,.45);color:#bbf7d0;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:tdown .28s cubic-bezier(.2,.8,.2,1)}
.toast svg{width:16px;height:16px;padding:2px;border-radius:50%;background:#22c55e;color:#06130b!important}
.toast.bad{background:rgba(48,16,18,.92);border-color:rgba(239,68,68,.5);color:#fecaca}
.toast.bad svg{background:#ef4444;color:#fff!important}
@keyframes tdown{from{transform:translateY(-10px);opacity:0}}
/* ---- confirm layer ---- */
.ask{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:20px;animation:fi .15s}
.askb{width:100%;max-width:360px;background:#1a1e27;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px 20px 16px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:su .2s cubic-bezier(.2,.8,.2,1)}
.askb h4{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.askb p{margin:0 0 18px;color:var(--mut);font-size:14px;font-weight:300}
.askf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.askf .btn{height:42px;font-size:14.5px}
.btn.p.danger{background:#e5484d}
/* ---- toast v2: dark glass card, green accent, countdown line, close ---- */
#toasts{top:78px;gap:8px;padding:0 16px}
.toast{position:relative;display:flex;align-items:center;gap:12px;min-width:280px;max-width:420px;min-height:0;padding:11px 12px 13px 12px;border-radius:14px;
  background:rgba(22,25,32,.94);border:1px solid rgba(255,255,255,.08);color:var(--txt);box-shadow:0 18px 50px rgba(0,0,0,.5);overflow:hidden;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);animation:tin .34s cubic-bezier(.2,.9,.25,1.1);font-size:14px}
.toast .ti{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(34,197,94,.14);color:#4ade80}
.toast .ti svg{width:15px;height:15px;padding:0;background:none;color:inherit!important;border-radius:0}
.toast .tt{flex:1;min-width:0;display:grid;gap:1px}
.toast .tt b{font-weight:500;letter-spacing:-.01em;line-height:1.3}
.toast .tt small{color:var(--mut);font-weight:300;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast .tx{width:24px;height:24px;border:0;border-radius:7px;background:none;color:var(--dim);cursor:pointer;display:grid;place-items:center;flex:none}
.toast .tx:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.toast .tx svg{width:13px;height:13px;padding:0;background:none;color:inherit!important}
.toast .tp{position:absolute;left:0;right:0;bottom:0;height:2px;background:#22c55e;transform-origin:left;transform:scaleX(1)}
[dir=rtl] .toast .tp{transform-origin:right}
.toast.bad{background:rgba(32,18,20,.95);border-color:rgba(239,68,68,.25);color:var(--txt)}
.toast.bad .ti{background:rgba(239,68,68,.15);color:#f87171}
.toast.bad .tp{background:#ef4444}
.toast.out{animation:tout .26s ease forwards}
@keyframes tin{from{transform:translateY(-14px) scale(.98);opacity:0}}
@keyframes tout{to{transform:translateY(-8px);opacity:0}}
@media(prefers-reduced-motion:reduce){.toast,.toast.out{animation:none}}
.soon{margin-top:14px;padding:10px 14px;border-radius:12px;background:rgba(228,30,43,.1);border:1px solid rgba(228,30,43,.25);color:#ffb4b8;font-size:13.5px;font-weight:400}

/* sign-in v3: light page, logo on top, form + card */
.auth3{--a3bg:#0b0c10;--a3ink:#f4f5f7;--a3mut:#a0a5b1;--a3line:rgba(255,255,255,.09);--a3red:#e41e2b;--a3redD:#ff3b47;--a3card:#14161c;--a3in:#101217;min-height:100vh;background:var(--a3bg);color:var(--a3ink);display:flex;flex-direction:column;align-items:center;padding:56px 20px 24px;position:relative;color-scheme:dark}
.auth3 .a3lng{position:absolute;top:18px;inset-inline-end:20px;height:34px;padding:0 14px;border-radius:99px;border:1px solid var(--a3line);background:transparent;color:var(--a3mut);cursor:pointer;font:inherit;font-size:13px}
.auth3 .a3lng:hover{color:var(--a3ink);border-color:rgba(255,255,255,.25)}
.auth3 .a3top{text-align:center;margin-bottom:64px}
.auth3 .a3top img{height:58px;display:block;margin:0 auto}
.auth3 .a3top span{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--a3mut);letter-spacing:.02em}
.auth3 .a3grid{width:100%;max-width:980px;display:grid;grid-template-columns:1fr 390px;gap:90px;align-items:center}
.auth3 .a3form{max-width:480px}
.auth3 h1{font:400 23px var(--disp);letter-spacing:-.01em;margin:0 0 28px;color:var(--a3ink)}
.auth3 .a3f{margin-bottom:16px}
.auth3 .a3f label{display:block;font-size:14px;color:var(--a3ink);margin-bottom:7px}
.auth3 .inp{height:40px;border-radius:5px;border:1px solid rgba(255,255,255,.14);background:var(--a3in);color:var(--a3ink);font-size:15px;padding:0 12px;box-shadow:none;width:100%}
.auth3 .inp:focus{border-color:var(--a3red);box-shadow:0 0 0 3px rgba(228,30,43,.16);outline:0}
.auth3 .ifield{position:relative}
.auth3 .ifield .inp{padding-inline-end:44px}
.auth3 .eye{position:absolute;top:50%;inset-inline-end:4px;transform:translateY(-50%);width:34px;height:32px;border:0;border-radius:5px;background:none;color:#8a8e99;cursor:pointer;display:grid;place-items:center}
.auth3 .eye:hover{color:var(--a3ink);background:rgba(255,255,255,.06)}
.auth3 .eye svg{width:18px;height:18px}
.auth3 .req{display:none;font-size:12.5px;color:#ff6b72;margin-top:5px}
.auth3 .a3f.miss .inp{background:#2a1418;border-color:#5a2128}
.auth3 .a3f.miss .req{display:block}
.auth3 .caps{color:#f5b54a}
.auth3 .fhint{font-size:12.5px;color:#ff6b72;margin-top:6px}.auth3 .fhint .okh{color:#3ecf8e}
.auth3 .sugg button{background:var(--a3in);border:1px solid var(--a3line);color:var(--a3ink)}
.auth3 .alert{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#fca5a5}
.auth3 .a3act{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px}
.auth3 .a3link{border:0;background:none;padding:0;color:#7d828e;text-decoration:underline;cursor:pointer;font:inherit;font-size:14.5px}
.auth3 .a3link:hover{color:var(--a3ink)}
.auth3 .a3btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border:0;border-radius:5px;background:var(--a3red);color:#fff;font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;text-decoration:none;min-width:62px}
.auth3 .a3btn:hover{background:var(--a3redD)}
.auth3 .a3btn:disabled{opacity:.7}
.auth3 .a3btn .spin{border-color:rgba(255,255,255,.4);border-top-color:#fff}
.auth3 .a3note{display:none;margin-top:14px;padding:10px 12px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid var(--a3line);color:var(--a3mut);font-size:13.5px}.auth3 .a3note.on{display:block}
.auth3 .a3terms{margin:30px 0 0;font-size:14.5px;line-height:1.5;color:var(--a3ink)}
.auth3 .a3terms a{color:var(--a3red);font-weight:600;text-decoration:none}
.auth3 .a3terms a:hover{text-decoration:underline}
.auth3 .a3alt{margin:18px 0 0;font-size:14px;color:var(--a3mut)}
.auth3 .a3alt button{border:0;background:none;padding:0;color:var(--a3red);font:inherit;font-weight:600;cursor:pointer}
.auth3 .a3card{background:var(--a3card);border:1px solid var(--a3line);border-radius:6px;padding:30px 34px 26px;text-align:center}
.auth3 .a3card h2{font:600 19px/1.3 var(--disp);color:var(--a3red);margin:0 auto 26px;max-width:250px}
.auth3 .a3art{width:116px;height:116px;border-radius:50%;overflow:hidden;margin:0 auto 14px;background:#ddd;box-shadow:0 6px 18px rgba(20,22,30,.12)}
.auth3 .a3art img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.auth3 .a3mini{height:34px;display:block;margin:0 auto 18px}
.auth3 .a3card b{display:block;font-size:16px;line-height:1.35;margin-bottom:10px}
.auth3 .a3card p{font-size:14px;line-height:1.45;color:#c9ccd4;margin:0 0 18px}
.auth3 .a3foot{margin-top:auto;padding-top:40px;font-size:12.5px;color:#5d626e}
.auth3 .sdone{color:var(--a3ink)}
@media (max-width:860px){
  .auth3{padding-top:64px}
  .auth3 .a3top{margin-bottom:34px}
  .auth3 .a3top img{height:46px}
  .auth3 .a3grid{grid-template-columns:1fr;gap:36px}
  .auth3 .a3form{max-width:none}
  .auth3 .a3card{padding:24px 20px}
}

.auth3 .a3sub{margin:-18px 0 24px;color:var(--a3mut);font-size:14px;line-height:1.5}
.auth3 h1{margin-bottom:26px}
.auth3 .pw button{top:50%;transform:translateY(-50%);width:34px;height:32px;color:#8a8e99;border-radius:5px}
.auth3 .pw button:hover{color:var(--a3ink);background:rgba(255,255,255,.06)}
.auth3 .pw button svg{width:18px;height:18px}
.auth3 .pw .inp{padding-inline-end:44px}
.auth3 .err{color:#ff6b72;min-height:0;margin:4px 0 0;font-size:13.5px}
.auth3 .inp.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.auth3 .a3feat{list-style:none;padding:0;margin:0 0 20px;text-align:start;display:grid;gap:9px}
.auth3 .a3feat li{display:flex;gap:10px;align-items:center;font-size:13.5px;color:#c9ccd4}
.auth3 .a3feat svg{width:18px;height:18px;flex:none;color:var(--a3red)}
.auth3 .field{margin-bottom:16px}
.auth3 label{display:block}

.auth3 .a3card h2{margin-bottom:18px}
.auth3 .a3promo{display:block;width:230px;max-width:100%;height:auto;margin:0 auto 10px;border-radius:3px;border:1px solid rgba(255,255,255,.06)}
.auth3 .a3card b{font-size:16px;margin-bottom:14px}

/* sign-in v4 "wow": thin Apple-like type, depth, glass */
.auth3{font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","IBM Plex Sans Arabic",system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.011em;
  background:radial-gradient(900px 520px at 50% -140px,rgba(228,30,43,.22),transparent 70%),radial-gradient(700px 500px at 85% 110%,rgba(120,40,255,.07),transparent 70%),#050608;overflow:hidden;isolation:isolate}
html[dir=rtl] .auth3,.auth3:lang(ar){font-family:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;letter-spacing:0}
.auth3:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(60% 50% at 50% 30%,#000,transparent);mask-image:radial-gradient(60% 50% at 50% 30%,#000,transparent)}
.auth3 .a3top{margin-bottom:72px;animation:a3in .8s cubic-bezier(.2,.7,.2,1) both}
.auth3 .a3top img{height:52px;filter:drop-shadow(0 8px 30px rgba(228,30,43,.35))}
.auth3 .a3top span{margin-top:8px;font-size:12px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:#7d828e}
html[dir=rtl] .auth3 .a3top span{letter-spacing:0;font-size:13.5px}
.auth3 .a3grid{max-width:1040px;grid-template-columns:1fr 420px;gap:110px}
.auth3 .a3form{animation:a3in .8s .08s cubic-bezier(.2,.7,.2,1) both}
.auth3 .a3card{animation:a3in .9s .16s cubic-bezier(.2,.7,.2,1) both}
@keyframes a3in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.auth3 h1{font-family:inherit;font-size:46px;font-weight:200;letter-spacing:-.045em;line-height:1.05;margin:0 0 34px;color:#fff}
html[dir=rtl] .auth3 h1{letter-spacing:0;font-size:40px;line-height:1.3}
.auth3 .a3sub{margin:-24px 0 28px;font-weight:300;color:#8c919c}
.auth3 .a3f{margin-bottom:20px}
.auth3 .a3f label{font-size:13px;font-weight:400;color:#b4b8c2;margin-bottom:9px;letter-spacing:0}
.auth3 .inp{height:50px;border-radius:13px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.03);font-size:15.5px;font-weight:300;padding:0 16px;color:#fff;transition:border-color .2s,box-shadow .2s,background .2s}
.auth3 .inp::placeholder{color:#4d525c}
.auth3 .inp:hover{border-color:rgba(255,255,255,.16)}
.auth3 .inp:focus{border-color:rgba(255,80,90,.65);background:rgba(255,255,255,.04);box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 4px rgba(228,30,43,.14),0 10px 40px -10px rgba(228,30,43,.35)}
.auth3 .a3f.miss .inp{background:linear-gradient(180deg,rgba(228,30,43,.12),rgba(228,30,43,.06));border-color:rgba(255,80,90,.45)}
.auth3 .req{font-weight:400;font-size:12px;margin-top:7px}
.auth3 .ifield .inp,.auth3 .pw .inp{padding-inline-end:50px}
.auth3 .eye,.auth3 .pw button{width:38px;height:38px;border-radius:10px;inset-inline-end:6px}
.auth3 .a3act{margin-top:30px}
.auth3 .a3link{font-size:14px;font-weight:300;color:#7d828e;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:1px}
.auth3 .a3link:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.auth3 .a3btn{height:46px;padding:0 30px;border-radius:999px;font-weight:500;font-size:15px;letter-spacing:-.005em;background:linear-gradient(180deg,#f0333f,#c8121e);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 30px -8px rgba(228,30,43,.7),0 0 0 1px rgba(228,30,43,.5);transition:transform .15s,box-shadow .2s,filter .2s}
.auth3 .a3btn:hover{background:linear-gradient(180deg,#ff3d49,#d8141f);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 40px -8px rgba(228,30,43,.85),0 0 0 1px rgba(255,80,90,.6)}
.auth3 .a3btn:active{transform:translateY(0)}
.auth3 .a3terms{margin-top:34px;font-size:13.5px;font-weight:300;line-height:1.65;color:#8c919c}
.auth3 .a3terms a{font-weight:400;color:#ff5a64}
.auth3 .a3alt{font-weight:300}.auth3 .a3alt button{font-weight:500;color:#ff5a64}
.auth3 .a3note{border-radius:12px;font-weight:300}
.auth3 .alert{border-radius:12px}
.auth3 .a3card{position:relative;padding:30px 30px 30px;border-radius:26px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 50px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4)}
.auth3 .a3card:before{content:"";position:absolute;inset:-1px;border-radius:26px;padding:1px;pointer-events:none;background:linear-gradient(160deg,rgba(255,90,100,.45),rgba(255,255,255,.06) 35%,rgba(255,255,255,0) 60%,rgba(255,90,100,.18));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.auth3 .a3card:after{content:"";position:absolute;left:10%;right:10%;bottom:-40px;height:80px;z-index:-1;background:radial-gradient(closest-side,rgba(228,30,43,.35),transparent);filter:blur(20px)}
.auth3 .a3card h2{font-family:inherit;font-size:21px;font-weight:300;letter-spacing:-.025em;color:#fff;max-width:300px;margin:0 auto 22px}
html[dir=rtl] .auth3 .a3card h2{letter-spacing:0}
.auth3 .a3promo{width:100%;border-radius:16px;margin:0 0 24px;border:1px solid rgba(255,255,255,.07);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.auth3 .a3card b{font-size:18px;font-weight:500;letter-spacing:-.02em;color:#fff;margin-bottom:10px}
html[dir=rtl] .auth3 .a3card b{letter-spacing:0}
.auth3 .a3card p{font-size:14px;font-weight:300;line-height:1.6;color:#9da2ad;margin:0 auto 24px;max-width:320px}
.auth3 .a3card .a3btn{height:42px;padding:0 24px;font-size:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.12);color:#fff}
.auth3 .a3card .a3btn:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.22)}
.auth3 .a3lng{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:400}
.auth3 .a3foot{font-weight:300;letter-spacing:.02em;color:#4d525c}
@media (max-width:860px){
  .auth3 .a3top{margin-bottom:40px}
  .auth3 .a3top img{height:42px}
  .auth3 .a3grid{grid-template-columns:1fr;gap:44px}
  .auth3 h1{font-size:38px}
  .auth3 .a3card{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){.auth3 .a3top,.auth3 .a3form,.auth3 .a3card{animation:none}}

/* sign-in v4.1: compact fields, soft moving light */
.auth3{padding-top:40px}
.auth3 .a3top{margin-bottom:54px}
.auth3 .a3top img{height:46px}
.auth3 .a3grid{max-width:960px;grid-template-columns:1fr 380px;gap:100px}
.auth3 .a3form{max-width:420px}
.auth3 h1{font-size:38px;margin-bottom:26px}
html[dir=rtl] .auth3 h1{font-size:34px}
.auth3 .a3sub{margin:-16px 0 24px;font-size:13.5px}
.auth3 .a3f{margin-bottom:15px}
.auth3 .a3f label{font-size:12.5px;margin-bottom:7px;transition:color .2s}
.auth3 .a3f:focus-within label{color:#fff}
.auth3 .inp{height:40px;border-radius:9px;font-size:14.5px;padding:0 13px}
.auth3 .ifield .inp,.auth3 .pw .inp{padding-inline-end:42px}
.auth3 .eye,.auth3 .pw button{width:32px;height:30px;border-radius:7px;inset-inline-end:4px}
.auth3 .eye svg,.auth3 .pw button svg{width:16px;height:16px}
.auth3 .req{font-size:11.5px;margin-top:5px}
.auth3 .a3act{margin-top:24px}
.auth3 .a3link{font-size:13px}
.auth3 .a3btn{height:38px;padding:0 22px;font-size:14px}
.auth3 .a3terms{margin-top:28px;font-size:12.5px}
.auth3 .a3alt{font-size:13px}
.auth3 .a3card{padding:24px 24px 26px;border-radius:22px}
.auth3 .a3card:before{border-radius:22px}
.auth3 .a3card h2{font-size:18px;margin-bottom:18px}
.auth3 .a3promo{border-radius:13px;margin-bottom:20px}
.auth3 .a3card b{font-size:16px}
.auth3 .a3card p{font-size:13px;margin-bottom:20px}
.auth3 .a3card .a3btn{height:36px;font-size:13px;padding:0 20px}
/* Chrome autofill keeps the dark look */
.auth3 .inp:-webkit-autofill,.auth3 .inp:-webkit-autofill:hover,.auth3 .inp:-webkit-autofill:focus{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px #121318 inset;transition:background-color 9999s}
/* soft light: two slow drifting glows + a faint light that follows the pointer */
.auth3 .a3light{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.auth3 .a3light i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.auth3 .a3light i:nth-child(1){width:520px;height:520px;left:8%;top:18%;background:radial-gradient(closest-side,rgba(228,30,43,.32),transparent);animation:a3drift1 22s ease-in-out infinite alternate}
.auth3 .a3light i:nth-child(2){width:600px;height:600px;right:2%;top:35%;background:radial-gradient(closest-side,rgba(255,110,90,.16),rgba(120,60,255,.08) 60%,transparent);animation:a3drift2 28s ease-in-out infinite alternate}
.auth3 .a3light b{position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.045),transparent 60%);transition:background .2s}
@keyframes a3drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,-60px) scale(1.15)}100%{transform:translate(40px,80px) scale(.95)}}
@keyframes a3drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-140px,40px) scale(1.1)}100%{transform:translate(-40px,-90px) scale(1)}}
.auth3 .a3card{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (max-width:860px){
  .auth3 .a3grid{grid-template-columns:1fr;gap:40px}
  .auth3 .a3form{max-width:none}
  .auth3 h1{font-size:32px}
  .auth3 .a3light i{filter:blur(50px)}
}
@media (prefers-reduced-motion:reduce){.auth3 .a3light i{animation:none}}

/* "I'm not a robot" code */
.auth3 .caprow{display:flex;gap:10px;align-items:center}
.auth3 .caprow .inp{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.32em;font-weight:400;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.auth3 .caprow .inp::placeholder{letter-spacing:0;text-transform:none;font-family:inherit}
.auth3 .capimg{position:relative;flex:none;width:126px;height:40px;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:#101116;box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.auth3 .capimg img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .2s;user-select:none;-webkit-user-drag:none}
.auth3 .capimg img.ld{opacity:.25}
.auth3 .caprf{position:absolute;top:4px;inset-inline-end:4px;width:24px;height:24px;border-radius:7px;border:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:.75;transition:opacity .2s,transform .3s}
.auth3 .caprf:hover{opacity:1;transform:rotate(-90deg)}
.auth3 .caprf svg{width:13px;height:13px}
.auth3 .capbad{display:none;font-size:11.5px;color:#ff6b72;margin-top:5px}
.auth3 .a3cap.bad .capbad{display:block}
.auth3 .a3cap.bad .inp{border-color:rgba(255,80,90,.45);background:linear-gradient(180deg,rgba(228,30,43,.12),rgba(228,30,43,.06))}
.auth3 .capimg{width:auto;height:auto;border:0;background:none;box-shadow:none;overflow:visible;display:flex;gap:6px;align-items:center}
.auth3 .capimg img{width:126px;height:40px;border-radius:9px;border:1px solid rgba(255,255,255,.09);background:#101116}
.auth3 .caprf{position:static;width:34px;height:40px;border-radius:9px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#b4b8c2;opacity:1}
.auth3 .caprf:hover{color:#fff;background:rgba(255,255,255,.08);transform:none}
.auth3 .caprf:hover svg{transform:rotate(-120deg)}
.auth3 .caprf svg{width:15px;height:15px;transition:transform .35s}