/* DisGo UI — faithful to approved mockups v6 (states) + v7 (themes/settings).
   All colours flow from 4 variables set per accent theme on <html>. */
@import url("fonts.css");
*{box-sizing:border-box;margin:0;padding:0}
:root{--hdf:var(--accf);--hwf:var(--warnf);--hwt:#14161A;--acc:#A3FF12;--tint:#1d2414;--hdt:#14161A;--warn:#FF7A1A;--warn-tint:#2a1a0e;
  --bg:#14161A;--accf:var(--acc);--warnf:var(--warn);--off:#2A2E35;--offt:#E5E7EB;--card:#1B1E23e6;--line:#2A2E35;--mute:#6B7280;--text:#E5E7EB}
html[data-accent=red]{--acc:#FF3B3B;--tint:#2a1416;--warn:#FFC233;--warn-tint:#2a230e}
html[data-accent=purple]{--acc:#9B5CFF;--tint:#1e1630;--hdt:#FFFFFF}
html[data-accent=blue]{--acc:#5865F2;--tint:#171a36;--hdt:#FFFFFF} /* Discord blurple; white on #5865F2 = 4.6:1 */
html,body{width:420px;height:640px;overflow:hidden;background:transparent;user-select:none;-webkit-user-select:none;cursor:default}
body.mock{background:#0b0c0e}
body:not(.ready) .win{visibility:hidden}
body{font-family:Inter,Vazirmatn,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
button{all:unset;box-sizing:border-box;cursor:pointer}
.win{width:420px;height:640px;position:relative;display:flex;flex-direction:column;overflow:hidden;color:var(--text);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  background:repeating-linear-gradient(45deg,#16181c 0 4px,#121417 4px 8px),#14161A}
.win:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,#ffffff05 0 4px,transparent 4px 8px);pointer-events:none;z-index:1}

/* header */
.hd{background:var(--hdf);color:var(--hdt);clip-path:polygon(0 0,100% 0,100% 72%,0 100%);padding-bottom:40px;position:relative;z-index:3;transition:background-color .25s}
.hd.off{background:var(--off);color:var(--offt)}
.hd.warn{background:var(--hwf);color:var(--hwt)}
.tb{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 18px;position:relative;z-index:3}
.logo{display:flex;align-items:center;gap:9px;pointer-events:none}.mk{height:24px;display:flex;align-items:center}
.logo b{font:700 19px Rajdhani;letter-spacing:.08em}
.beta{font:700 9.5px/1 Rajdhani;font-style:normal;letter-spacing:.16em;padding:3px 7px 2px 8px;margin-inline-start:-2px;color:var(--acc);background:var(--hdt);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);align-self:center;transform:translateY(-1px)}
.hd.off .beta{background:var(--accf);color:#14161A}.hd.warn .beta{background:var(--hwt);color:var(--hwf)}
/* Drag: only the header surfaces drag; children pass events through. */
.hs>*,.tb>.logo *{pointer-events:none}.ctl,.ctl button{pointer-events:auto}
.ctl{display:flex;gap:2px}
.ctl button{width:30px;height:28px;display:grid;place-items:center;font-size:13px;opacity:.6;color:var(--hdt);transition:opacity .12s}
.hd.off .ctl button{color:#9CA3AF}.hd.warn .ctl button{color:var(--hwt)}
.hd:not(.off) .ctl button{opacity:.8}
.ctl button:hover{opacity:1}
.hs{padding:6px 22px 0;display:flex;flex-direction:column;pointer-events:none}
.hs span{font:700 13px Rajdhani;letter-spacing:.24em}
.hs b{font:700 56px Rajdhani;line-height:1;white-space:nowrap}
.hs b.sm{font-size:46px}

/* body */
.body{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:14px 22px 0;position:relative;z-index:2}
.mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:14px}
.lab{font:700 10px Rajdhani;letter-spacing:.18em;color:var(--mute)}
.val{font:700 15px Rajdhani;letter-spacing:.06em}
.path{display:flex;align-items:flex-start;margin-top:14px}
.nd{display:flex;flex-direction:column;align-items:center;gap:8px;width:74px;flex:none}
.ni{width:64px;height:64px;display:grid;place-items:center;background:#1B1E23;border:1.5px solid #2F343B;color:#4B5563;transition:border-color .2s,color .2s,background-color .2s,box-shadow .2s}
.nd.a .ni{border-color:var(--acc);color:var(--acc);background:var(--tint);box-shadow:0 0 18px color-mix(in srgb,var(--acc) 20%,transparent)}
.nd.a .lab{color:var(--text)}
.nd.p .ni{border-color:var(--acc);border-style:dashed;color:var(--acc)}
.nd.o .ni{border-color:var(--warn);color:var(--warn);background:var(--warn-tint);box-shadow:0 0 18px color-mix(in srgb,var(--warn) 20%,transparent)}
.nd.o .lab{color:var(--warn)}
.leg{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:24px;min-width:0}
.ln{width:100%;height:2px;background:repeating-linear-gradient(90deg,#3A3F47 0 6px,transparent 6px 11px)}
.ln.a{background:var(--acc);box-shadow:0 0 8px var(--acc)}
.ln.o{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.ln.p{background:linear-gradient(90deg,var(--acc) 0 55%,transparent 55%),repeating-linear-gradient(90deg,#3A3F47 0 6px,transparent 6px 11px)}
.anim .ln.p{background:linear-gradient(90deg,transparent 0,var(--acc) 0) no-repeat,repeating-linear-gradient(90deg,#3A3F47 0 6px,transparent 6px 11px);background-size:55% 100%,auto;animation:scan 1.1s ease-in-out infinite alternate}
@keyframes scan{from{background-size:15% 100%,auto}to{background-size:85% 100%,auto}}
.lt{font:700 12px Rajdhani;letter-spacing:.14em;color:var(--mute);white-space:nowrap}
.lt.a{color:var(--acc)}.lt.o{color:var(--warn)}
.msg{margin-top:18px;text-align:center;font:500 12.5px Inter;color:#9CA3AF;line-height:1.5;min-height:0}
.s4{margin-top:18px;display:flex;justify-content:space-between;background:var(--card);border:1px solid var(--line);padding:12px 16px}
.s4 div{display:flex;flex-direction:column;gap:3px}
.s4 .w{color:var(--warn)}
.banner{margin-top:12px;display:flex;gap:12px;align-items:center;background:color-mix(in srgb,var(--warn) 10%,transparent);border-left:3px solid var(--warn);padding:10px 12px}
.banner>b{width:24px;height:22px;flex:none;display:grid;place-items:end center;background:var(--warnf);color:#14161A;font:700 14px Rajdhani;clip-path:polygon(50% 0,100% 100%,0 100%)}
.banner .lab{color:var(--warn)}
.wt{font:600 12.5px Inter;margin-top:2px}
.hidden{display:none!important}

/* CTA */
.cta{margin:0 -22px;height:100px;background:var(--accf);color:#14161A;display:flex;align-items:center;justify-content:space-between;padding:12px 30px 0;clip-path:polygon(0 18px,100% 0,100% 100%,0 100%);cursor:pointer;transition:filter .12s,background-color .2s}
.cta:hover{filter:brightness(1.06)}.cta:active{filter:brightness(.94)}
.cta b{font:700 40px Rajdhani;letter-spacing:.16em;line-height:1;display:block;white-space:nowrap}
.cta b.sm{font-size:32px}
.cta span{font:700 11px Rajdhani;letter-spacing:.22em;opacity:.7}
.cta.on{background:var(--tint);color:var(--acc)}
.cta.cn{background:#2A2E35;color:var(--acc)}
.cta svg{flex:none}

/* settings */
.body.set{padding:0 22px 18px;margin-top:14px}
.back{font:700 11px Rajdhani;letter-spacing:.2em;color:#9CA3AF;align-self:flex-start}
.back:hover{color:var(--text)}
.sec{font:700 11px Rajdhani;letter-spacing:.22em;color:var(--mute);margin:14px 0 8px}
.sws{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sw{background:var(--card);border:1px solid var(--line);padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:7px}
.sw:hover{border-color:#3A3F47}
.sw i{width:26px;height:26px;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.sw span{font:700 10px Rajdhani;letter-spacing:.1em;color:#9CA3AF;white-space:nowrap}
.sw.sel{border-color:var(--acc);background:var(--tint)}.sw.sel span{color:var(--text)}
.grp{background:var(--card);border:1px solid var(--line)}
.opt{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
.opt+.opt{border-top:1px solid #23262B}
.opt b{font:600 13.5px Inter;display:block}.opt span{font:500 11px Inter;color:var(--mute)}
.tg{width:40px;height:22px;background:#2F343B;padding:3px;flex:none}
.tg i{display:block;width:16px;height:16px;background:#6B7280;transition:margin .15s}
.tg.on{background:var(--accf)}.tg.on i{background:#14161A;margin-left:18px}
.seg{display:flex;border:1px solid #2F343B;flex:none}
.seg button{padding:5px 9px;font:700 11px Rajdhani;letter-spacing:.14em;color:#9CA3AF}
.seg button.fa{font-family:Vazirmatn,Inter;letter-spacing:0;font-size:13px;font-weight:500;padding:3px 9px}
.seg .a{background:var(--accf);color:#14161A}
.upd{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.upd b{font:700 14px Rajdhani;letter-spacing:.1em;display:block}.upd span{font:500 11px Inter;color:var(--mute)}
.btn2{padding:9px 12px;font:700 11px Rajdhani;letter-spacing:.18em;color:var(--acc);border:1.5px solid var(--acc);white-space:nowrap}
.btn2:hover{background:var(--tint)}
.diag{margin-top:10px;font:700 10.5px Rajdhani;letter-spacing:.18em;color:var(--mute);align-self:flex-start}
.diag:hover{color:var(--text)}

/* info button + popover */
.ctl .ib svg{display:block}
.ctl button.on{opacity:1}
.pop{position:absolute;top:46px;inset-inline-end:14px;width:300px;z-index:20;background:#1B1E23;border:1px solid var(--line);border-top:2px solid var(--acc);padding:14px 16px 12px;box-shadow:0 14px 34px #000a;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);animation:popin .14s ease-out}
@keyframes popin{from{opacity:0;transform:translateY(-4px)}}
.popH{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.popH i{width:8px;height:8px;background:var(--acc);flex:none;transform:rotate(45deg)}
.popH b{font:700 12px Rajdhani;letter-spacing:.16em;color:var(--text)}
.pop ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.pop li{font:500 12.5px/1.5 Inter;color:#B4BAC4;padding-inline-start:14px;position:relative}
.pop li:before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:6px;height:2px;background:var(--acc)}
bdi{unicode-bidi:isolate}

/* ---------- Persian (fa) + full RTL mirror ---------- */
html[lang=fa] body{font-family:Vazirmatn,Inter,sans-serif}
/* Vazirmatn-FD-NL: Persian glyphs + Persian digits, no Latin -> Latin words fall back to the English fonts. */
html[lang=fa] :is(.hs span,.lab,.lt,.cta span,.sec,.back,.sw span,.diag,.btn2,.popH b,.val){font-family:Vazirmatn,Rajdhani,sans-serif;letter-spacing:0}
html[lang=fa] :is(.hs span,.lab,.lt,.cta span,.sec,.back,.sw span,.diag,.btn2){font-weight:700}
html[lang=fa] .hs span{font-size:14px}
html[lang=fa] .lab{font-size:11.5px}
html[lang=fa] .lt{font-size:13px}
html[lang=fa] .val{font-size:16px;font-weight:800}
html[lang=fa] .sec{font-size:12px;margin:12px 0 7px}
html[lang=fa] .sw span{font-size:11.5px}
html[lang=fa] .cta span{font-size:12.5px;opacity:.75}
html[lang=fa] .hs b,html[lang=fa] .cta b{font-family:Vazirmatn,Rajdhani,sans-serif;font-weight:800;letter-spacing:0}
html[lang=fa] .hs b{font-size:54px;line-height:1.1}
html[lang=fa] .hs b.fa{font-size:44px;line-height:1.2}
html[lang=fa] .hs b.fa.sm,html[lang=fa] .hs b.sm{font-size:38px}
html[lang=fa] .cta b{font-size:36px;line-height:1.25}
html[lang=fa] .cta b.sm{font-size:30px}
html[lang=fa] :is(.msg,.wt,.opt b,.opt span,.upd span,.pop li){font-family:Vazirmatn,Inter,sans-serif}
html[lang=fa] .msg{font-size:13px;line-height:1.7}
html[lang=fa] .pop li{font-size:13px;line-height:1.75}
html[lang=fa] .popH b{font-size:13.5px;font-weight:800}
html[lang=fa] .opt{padding:7px 14px}
html[lang=fa] .opt b{font-size:13.5px;font-weight:700;line-height:1.5}
html[lang=fa] .opt span{font-size:11.5px;line-height:1.5}
html[lang=fa] .upd{margin-top:10px}
html[lang=fa] .hd{padding-bottom:34px}
/* keep Latin wordmark + version in the English fonts */
html[lang=fa] :is(.logo b,.beta,.upd b,.seg button:not(.fa)){font-family:Rajdhani,sans-serif}

html[dir=rtl] .win{clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  background:repeating-linear-gradient(-45deg,#16181c 0 4px,#121417 4px 8px),#14161A}
html[dir=rtl] .win:after{background:repeating-linear-gradient(45deg,#ffffff05 0 4px,transparent 4px 8px)}
html[dir=rtl] .hd{clip-path:polygon(0 0,100% 0,100% 100%,0 72%)}
html[dir=rtl] .cta{clip-path:polygon(0 0,100% 18px,100% 100%,0 100%)}
html[dir=rtl] .beta{clip-path:polygon(0 0,calc(100% - 4px) 0,100% 100%,4px 100%);padding:3px 8px 2px 7px}
html[dir=rtl] .sw i{clip-path:polygon(0 7px,7px 0,100% 0,100% 100%,0 100%)}
html[dir=rtl] .pop{clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px))}
html[dir=rtl] .tb{padding:0 18px 0 10px}
html[dir=rtl] .tg.on i{margin-left:0;margin-right:18px}
html[dir=rtl] .banner{border-left:0;border-right:3px solid var(--warn)}
html[dir=rtl] .ln{background:repeating-linear-gradient(270deg,#3A3F47 0 6px,transparent 6px 11px)}
html[dir=rtl] .ln.a{background:var(--acc)}html[dir=rtl] .ln.o{background:var(--warn)}
html[dir=rtl] .ln.p{background:linear-gradient(270deg,var(--acc) 0 55%,transparent 55%),repeating-linear-gradient(270deg,#3A3F47 0 6px,transparent 6px 11px)}
html[dir=rtl] .anim .ln.p{background:linear-gradient(270deg,transparent 0,var(--acc) 0) no-repeat right center,repeating-linear-gradient(270deg,#3A3F47 0 6px,transparent 6px 11px);background-size:55% 100%,auto}
.hs b,.val,.lt,.cta b{unicode-bidi:plaintext}
@media (prefers-reduced-motion:reduce){.anim .ln.p{animation:none}}
/* fa fit pass: Persian needs taller line boxes, so tighten spacing (not sizes) */
html[dir=rtl] .hs b{text-align:right}
html[lang=fa] .hs b.fa.sm,html[lang=fa] .hs b.sm{font-size:34px;line-height:1.15}
html[lang=fa] #vSet{margin-top:8px}
html[lang=fa] .sw{padding:8px 4px 6px;gap:5px}
html[lang=fa] .opt{padding:5px 14px}
html[lang=fa] .opt b{line-height:1.4}
html[lang=fa] .opt span{line-height:1.35}
html[lang=fa] .sec{margin:10px 0 6px}
html[lang=fa] .diag{margin-top:8px}

.win,.hd,.cta,.ni,.s4,.grp,.sw,.pop{transition:background-color .25s,border-color .25s,color .25s}

/* Top bar never mirrors (brand left, window controls right, same order) */
html[dir=rtl] .tb{direction:ltr;padding:0 10px 0 18px}
html[dir=rtl] .beta{clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);padding:3px 7px 2px 8px}
html[dir=rtl] .pop{inset-inline-end:auto;right:14px}
html[dir=rtl] .pop{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}

/* stable numbers */
.nb{display:inline-flex;justify-content:flex-end;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.nb i{font-style:normal;display:inline-block;text-align:center;flex:none}
.hs b .nb,.cta b .nb{margin-inline-end:0}
.s4{display:grid;grid-template-columns:1fr 1fr 1fr}
.s4>div:nth-child(2){align-items:center}.s4>div:nth-child(3){align-items:flex-end}
.s4 .val{white-space:nowrap}

/* idle (not connected) stats: zero values, muted */
.s4.idle .val{color:var(--mute)}
/* Lalezar display face (fa): big numbers, status, PLAY/STOP, section titles, stat values, node labels.
   Single weight -> font-weight:400 to avoid synthetic bold. Small body text stays Vazirmatn. */
html[lang=fa] :is(.hs span,.hs b,.cta b,.sec,.val,.lt,.popH b){font-family:Lalezar,Rajdhani,sans-serif;font-weight:400;font-synthesis:none;letter-spacing:0}
html[lang=fa] .hs span{font-size:15px}
html[lang=fa] .hs b{font-size:56px;line-height:1.1}
html[lang=fa] .hs b.fa{font-size:46px;line-height:1.2}
html[lang=fa] .hs b.fa.sm,html[lang=fa] .hs b.sm{font-size:40px}
html[lang=fa] .cta b{font-size:36px;line-height:1.25}
html[lang=fa] .sec{font-size:13px}
html[lang=fa] .val{font-size:17px}
html[lang=fa] .lt{font-size:14px}
html[lang=fa] .popH b{font-size:14.5px}
/* units (MS) keep the 1.0.9 Latin styling in fa, not Lalezar */
html[lang=fa] :is(.hs b,.lt,.val) .u{font-family:Rajdhani,sans-serif;font-weight:700}
.u{font-style:normal}

/* 1.1.0: sign-in + profile */
.sgT{font:700 22px Rajdhani;letter-spacing:.12em;text-align:center;margin-bottom:10px}
html[lang=fa] .sgT{font-family:Vazirmatn,Rajdhani,sans-serif;letter-spacing:0;font-size:20px}
.sgE{color:#FF6B6B}
.opt.col{flex-direction:column;align-items:stretch;gap:6px}
.bar{height:8px;background:#23262B;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .4s}
.bar i.w{background:#FF6B6B}
.bl{display:flex;justify-content:space-between;font:500 11px Inter;color:var(--mute)}
.hist{max-height:170px;overflow:auto}
.hist .opt{padding:7px 14px}.hist .opt b{font-size:12.5px}
html[lang=fa] :is(.bl,.hist .opt b){font-family:Vazirmatn,Inter,sans-serif}

.updbar{margin:0 22px 10px;display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border:1px solid var(--acc)}
.updbar>div{flex:1;min-width:0}.updbar b{display:block;font:700 13px Inter}.updbar span{font:500 11px Inter;color:var(--mute)}
.ubX{color:var(--mute);font-size:12px;padding:4px}.ubX:hover{color:var(--text)}
html[lang=fa] .updbar :is(b,span){font-family:Vazirmatn,Inter,sans-serif}

/* ---- sign in ---- */
.win.signing .hs{display:none}.win.signing .hd{padding-bottom:0;clip-path:none;background:transparent}
.win.signing .hd .ctl button{color:#9CA3AF}
.body.sign{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:0 36px 22px;position:relative;z-index:2}
.sgWrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:44px}
.sgLogo{height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:26px;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--acc) 35%,transparent));animation:rise .5s ease-out both}
.sgT{font:700 26px/1.2 Inter;color:#F3F4F6;margin:0;letter-spacing:-.01em;animation:rise .5s .05s ease-out both}
.sgS{font:400 14px/1.6 Inter;color:#9CA3AF;margin:10px 0 34px;animation:rise .5s .1s ease-out both}
#sgIdle,#sgWait{width:100%;display:flex;flex-direction:column;align-items:center;animation:rise .4s ease-out both}
.pbtn{width:100%;height:50px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accf);color:#101114;font:700 15px Inter;letter-spacing:.01em;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:filter .15s,transform .1s}
.pbtn:hover{filter:brightness(1.08)}.pbtn:active{transform:translateY(1px);filter:brightness(.95)}
.pbtn:focus-visible,.gbtn:focus-visible,.lnk:focus-visible,.sgAlt a:focus-visible,.legal a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
html[dir=rtl] .pbtn .arr{transform:scaleX(-1)}
.gbtn{width:100%;height:46px;display:flex;align-items:center;justify-content:center;border:1.5px solid #3A3F47;color:#E5E7EB;font:600 14px Inter;transition:border-color .15s,background .15s}
.gbtn:hover{border-color:#6B7280;background:#ffffff08}
.sgAlt{margin:22px 0 0;font:400 13.5px Inter;color:#9CA3AF}
.sgAlt a,.legal a{color:var(--acc);cursor:pointer;text-decoration:none;font-weight:600}.sgAlt a:hover,.legal a:hover{text-decoration:underline}
.sgErr{width:100%;margin-top:14px;padding:10px 12px;background:#2a1a0e;border-inline-start:3px solid var(--warn);color:#FCD9BD;font:500 13px/1.5 Inter;text-align:start}
.spin{width:34px;height:34px;border:3px solid #2A2E35;border-top-color:var(--acc);border-radius:50%;animation:sp .9s linear infinite;margin:2px 0 16px}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sgS2{font:400 13px/1.6 Inter;color:#9CA3AF;margin:0 0 22px}
.sgFb{margin-top:18px;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.lnk{font:400 13px Inter;color:#9CA3AF}.lnk b{color:var(--acc);font-weight:600}.lnk:hover b,.lnk.sm:hover{text-decoration:underline}
.lnk.sm{color:var(--acc);font-weight:600}
.lbox{width:100%;display:flex;border:1px solid #2A2E35;background:#0f1013}
.lbox input{all:unset;flex:1;min-width:0;padding:10px;font:500 11.5px ui-monospace,Consolas,monospace;color:#D1D5DB;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all;-webkit-user-select:all;cursor:text}
.lcp{padding:0 14px;background:#2A2E35;color:var(--acc);font:600 12.5px Inter;white-space:nowrap}.lcp:hover{background:#343942}
.legal{margin:0 auto;max-width:300px;text-wrap:balance;text-align:center;font:400 11.5px/1.6 Inter;color:#6B7280}
html[lang=fa] :is(.sgT,.sgS,.sgS2,.pbtn,.gbtn,.sgAlt,.sgErr,.lnk,.lcp,.legal){font-family:Vazirmatn,Inter,sans-serif}
html[lang=fa] .sgT{font-weight:800;font-size:25px}
@media (prefers-reduced-motion:reduce){.sgLogo,.sgT,.sgS,#sgIdle,#sgWait{animation:none}.spin{animation-duration:2s}}
.sgT.sm{font-size:19px;margin-bottom:6px}html[lang=fa] .sgT.sm{font-size:19px}
#sgWait .spin{order:-1;margin:0 0 18px}
.win.signing #sgWait{margin-top:-6px}
.win.linking .sgLogo{display:none}.win.linking .sgWrap{padding-top:96px}
.wspin{display:none}.win.linking .wspin{display:block;width:44px;height:44px;margin:0 0 26px}

/* 1.1.7 fit: viewport-sized window, every view scrolls inside instead of clipping */
html,body{width:100vw;height:100vh}
.win{width:100%;height:100%}
.body{min-height:0}
.mid{min-height:0;overflow-y:auto;overflow-x:hidden;justify-content:safe center;margin:0 -22px;padding:0 22px 14px;scrollbar-gutter:auto}
.body.set{overflow-y:auto;overflow-x:hidden;margin-top:0;padding-top:14px;padding-inline-end:16px;scrollbar-gutter:stable;flex:1}
.body.sign{overflow-y:auto;overflow-x:hidden}
.body.set>*{flex:none}
.updbar,.cta{flex:none}
.updbar{margin:0 0 10px}
.updbar b{white-space:normal;line-height:1.35}
.updbar .btn2{flex:none}
.opt>div:first-child{min-width:0;padding-inline-end:10px}
.opt b,.opt span{overflow-wrap:anywhere}
.upd>div{min-width:0}
.sw span{white-space:normal;text-align:center;line-height:1.2}
.msg,.wt,.sgS,.sgS2,.sgErr{overflow-wrap:anywhere}
.cta>div{min-width:0}
.pop{max-width:calc(100vw - 28px);max-height:calc(100vh - 60px);overflow-y:auto}
/* compact main view while an update bar is shown */
#vMain:has(#updBar:not(.hidden)) .s4{margin-top:12px;padding:9px 14px}
#vMain:has(#updBar:not(.hidden)) .msg{margin-top:12px}
#vMain:has(#updBar:not(.hidden)) .path{margin-top:10px}
/* themed scrollbars */
*{scrollbar-width:thin;scrollbar-color:#3A3F47 transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#3A3F47}
::-webkit-scrollbar-thumb:hover{background:var(--acc)}

/* update prompt on connect */
.ask{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end;background:#0b0c0ecc;backdrop-filter:blur(2px);animation:popin .14s ease-out}
.askC{width:100%;background:#1B1E23;border-top:2px solid var(--acc);padding:18px 22px 22px;max-height:100%;overflow-y:auto}
.askC p{font:500 13px/1.6 Inter;color:#B4BAC4;margin:2px 0 16px;overflow-wrap:anywhere}
.askB{display:flex;flex-direction:column;gap:10px}
.askB .pbtn{height:46px}.askB .gbtn{height:42px}
html[lang=fa] .askC p{font-family:Vazirmatn,Inter,sans-serif;font-size:13.5px;line-height:1.8}
.updbar>div{min-width:0}.updbar span{display:block}
#vMain:has(#updBar:not(.hidden)) .s4.idle{display:none}
#vMain:has(#updBar:not(.hidden)) .banner{margin-top:10px}

/* 1.1.7 update card: replaces the START area */
.ucard{flex:none;margin:0 -22px;padding:18px 26px 20px;background:#1B1E23;border-top:2px solid var(--acc);display:flex;flex-direction:column;gap:10px;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);animation:popin .18s ease-out}
.ucH{display:flex;flex-direction:column;gap:2px}
.ucH .lab{color:var(--acc)}
.ucH b{font:700 28px/1.1 Rajdhani;letter-spacing:.06em;color:var(--text);direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .ucH b{text-align:right}
.ucN{font:500 12.5px/1.55 Inter;color:#B4BAC4;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ucP{display:flex;flex-direction:column;gap:7px;padding:4px 0 2px}
.ucP span{font:600 12px Inter;color:var(--text);font-variant-numeric:tabular-nums}
.ucA{display:flex;flex-direction:column;align-items:center;gap:8px}
.ucA .pbtn{height:46px}
.ucA .lnk{font-size:12.5px;padding:2px 8px}
html[lang=fa] :is(.ucN,.ucP span,.ucA .lnk){font-family:Vazirmatn,Inter,sans-serif}
html[lang=fa] .ucN{font-size:13px;line-height:1.75}
/* settings: version row pinned to the bottom of the scrolling body */
.body.set>.upd{position:sticky;bottom:-18px;margin:12px 0 -18px;padding:10px 0 14px;background:#15171b;border-top:1px solid var(--line);z-index:2}
.body.set>.upd b{white-space:nowrap}
.body.set>.upd span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vMain:has(#updBar:not(.hidden)) .cta{display:none}
.ucard{padding-bottom:26px}

/* 1.1.8 skeleton placeholders (same wave as the website, DisGo palette) */
.sk{display:inline-block;vertical-align:middle;height:.62em;min-height:8px;max-width:100%;background:#2A2E35;clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%)}
.sk.live{background:linear-gradient(90deg,#23272d 0%,#2f343c 35%,color-mix(in srgb,var(--acc) 22%,#2f343c) 50%,#2f343c 65%,#23272d 100%);background-size:300% 100%;animation:skw 1.5s ease-in-out infinite}
@keyframes skw{from{background-position:100% 0}to{background-position:0 0}}
.lt .sk{height:7px}.val .sk{height:9px;margin-top:4px}
.hs b .sk{height:.5em;vertical-align:.12em}
.hd:not(.off) .hs b .sk.live{background:linear-gradient(90deg,#0002 0%,#0004 50%,#0002 100%);background-size:300% 100%}
.opt b .sk{height:10px;margin:3px 0}.opt span .sk,.bl .sk{height:8px}
@media (prefers-reduced-motion:reduce){.sk.live{animation:none;background:#2f343c}}