@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#010b11;--acc:#53fc18;--muted:#9fb0c3;--line:#16262f;--txt:#e9eff6}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#010a0f;overflow:hidden}
body{font-family:Inter,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--txt);font-size:13px}
button{font-family:inherit;cursor:pointer}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#stage{position:absolute;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0;overflow:hidden;
 background:radial-gradient(520px 260px at 5% 100%,rgba(40,200,20,.16),transparent 70%),radial-gradient(520px 200px at 98% 100%,rgba(40,200,20,.12),transparent 70%),linear-gradient(180deg,#010a10,#010b12)}
.abs{position:absolute}

/* topbar */
.topbar{position:absolute;left:0;top:0;width:1536px;height:78px;border-bottom:1px solid #0e1d24;background:linear-gradient(180deg,#010609,#01080c)}
.topbar::after{content:'';position:absolute;left:10px;bottom:-1px;width:150px;height:2px;background:linear-gradient(90deg,transparent,#53fc18,transparent);filter:blur(1px);opacity:.8}
.logo{display:block;color:var(--acc);filter:drop-shadow(0 0 8px rgba(83,252,24,.5))}
.brand-t{position:absolute;left:165px;top:15px;font-size:20.5px;font-weight:600;color:#fff;line-height:24px}
.brand-s{position:absolute;left:165px;top:43px;font-size:12.5px;color:var(--muted);line-height:16px}
.chip{position:absolute;left:612px;top:22px;width:143px;height:34px;border-radius:17px;background:linear-gradient(180deg,#05220f,#04170b);border:1px solid #14602a;display:flex;align-items:center;gap:10px;padding-left:15px;color:#34f04d;font-size:12px;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:#46f04a;box-shadow:0 0 7px #46f04a;flex-shrink:0}
.dot.off{background:#566872;box-shadow:none}
.stat{position:absolute;top:14px;height:49px;border-radius:10px;background:linear-gradient(180deg,#071a22,#05121a);border:1px solid #14262f}
.stat .i{position:absolute;left:17px;top:14px;font-size:22px;color:#dce6ef}
.stat small{position:absolute;top:8px;font-size:11px;color:var(--muted);line-height:14px}
.stat strong{position:absolute;top:24px;font-size:17px;font-weight:500;color:#fff;line-height:20px;white-space:nowrap}
.tb-i{position:absolute;top:27px;font-size:23px;color:#e4ecf3;background:none;border:0;padding:0;width:26px;height:26px;display:grid;place-items:center}
.rdot{position:absolute;right:-1px;top:-3px;width:9px;height:9px;border-radius:50%;background:#ff2d55;border:1.5px solid #02070a}
.uav{position:absolute;left:1391px;top:21px;width:37px;height:37px;border-radius:50%;background:#262d31;display:grid;place-items:center;font-size:16px;font-weight:500}
.uname{position:absolute;left:1438px;top:30px;font-size:14px;font-weight:600;line-height:18px}

/* sidebar */
.sidebar{position:absolute;left:0;top:78px;width:283px;height:946px;border-right:1px solid #0d1b22;background:linear-gradient(180deg,#010a0e,#01090d)}
.nav{position:absolute;left:13px;width:256px;height:45px;border-radius:12px;display:flex;align-items:center;gap:0;padding-left:15px;color:#e6edf5;font-size:13.5px;font-weight:500;cursor:pointer;border:1.5px solid transparent}
.nav .i{font-size:25px;margin-right:22px;stroke-width:1.7}
.nav:hover{background:rgba(83,252,24,.05)}
.nav.active{color:var(--acc);font-weight:700;border-color:#3dff3a;background:linear-gradient(90deg,#03371b,#022613);box-shadow:0 0 14px rgba(61,255,58,.35),inset 0 0 14px rgba(61,255,58,.12)}
.nav.dotn::after{content:'';position:absolute;left:46px;top:7px;width:5px;height:5px;border-radius:50%;background:#53fc18;opacity:.0}
.promo{position:absolute;left:20px;top:422px;width:248px;height:322px;border-radius:14px;border:1.5px solid #3fe030;overflow:hidden;background:linear-gradient(160deg,#03100a,#010806 60%);box-shadow:0 0 9px rgba(77,255,58,.28),inset 0 0 10px rgba(77,255,58,.10)}
.promo h3{position:absolute;left:17px;top:48px;margin:0;width:200px;font-size:17.5px;line-height:22.5px;font-weight:600;color:#fff}
.promo p{position:absolute;left:17px;top:121px;margin:0;font-size:11px;line-height:15px;color:#b6c6dd;width:170px}
.promo .btn{white-space:nowrap;position:absolute;left:17px;top:191px;width:124px;height:32px;border-radius:9px;border:0;background:linear-gradient(180deg,#5dff3f,#3fe82a);color:#04210a;font-weight:600;font-size:11.5px;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 0 12px rgba(80,255,60,.5)}
.act{position:absolute;left:17px;top:865px;width:252px;height:80px;border-radius:12px;border:1px solid #1a2c35;background:linear-gradient(180deg,#05141b,#030d12)}
.act .ic{position:absolute;left:13px;top:14px;width:33px;height:33px;border-radius:50%;background:#0b3a1c;display:grid;place-items:center;color:#53fc18;font-size:17px;border:1px solid #14602a}
.act small{position:absolute;left:59px;top:19px;font-size:11px;color:#dfe8f1}
.act strong{position:absolute;left:59px;top:41px;font-size:16px;color:#4dff3a;font-weight:700}
.act .pl{position:absolute;left:13px;top:55px;width:31px;height:8px;border-radius:4px;background:#101c26}
.act svg.sp{position:absolute;left:152px;top:19px;width:90px;height:48px}

/* cards */
.card{position:absolute;border-radius:14px;border:1px solid #17303a;background:linear-gradient(180deg,#010a10,#01090d);box-shadow:0 0 0 1px rgba(60,120,140,.05)}
.stream{left:298px;top:90px;width:796px;height:91px;background:linear-gradient(100deg,#010a0f 0,#010d12 55%,#021410 80%,#031a10 100%);overflow:hidden}
.sav{position:absolute;left:15px;top:11px;width:70px;height:67px;border-radius:7px;border:2px solid #3dff3a;box-shadow:0 0 12px rgba(61,255,58,.6);overflow:hidden;background:#0a2a12}
.sname{position:absolute;left:103px;top:17px;font-size:18.5px;font-weight:600;color:#fff;line-height:24px}
.ver{position:absolute;left:188px;top:23px;width:15px;height:15px;color:#4dff3a}
.live{position:absolute;left:213px;top:19px;width:46px;height:20px;border-radius:6px;background:#2d0912;border:1px solid #6e1626;color:#ff5668;font-size:10.5px;font-weight:600;display:flex;align-items:center;gap:6px;padding-left:6px}
.live i{width:6px;height:6px;border-radius:50%;background:#ff2d4a;display:block}
.ssub{position:absolute;left:103px;top:49px;font-size:12.5px;color:#a9b9cb;line-height:16px}
.timer{position:absolute;left:526px;top:9px;width:150px;height:62px;border-radius:12px;background:rgba(1,8,8,.78);text-align:center;padding-top:9px}
.timer small{display:block;font-size:12px;color:#fff;line-height:15px}
.timer strong{display:block;margin-top:5px;font-size:23.5px;line-height:26px;color:#4dff3a;font-weight:700;text-shadow:0 0 12px rgba(77,255,58,.7);font-variant-numeric:tabular-nums}

.chat{left:298px;top:193px;width:796px;height:813px;background:linear-gradient(180deg,#010d14,#010b11)}
.tab{position:absolute;top:5px;height:43px;border-radius:11px;border:1px solid #1b2c36;background:linear-gradient(180deg,#06141b,#040e14);color:#e4ecf3;font-size:12px;font-weight:500;display:flex;align-items:center;gap:10px;padding:0 0 0 17px;white-space:nowrap}
.tab .i{font-size:19px}
.tab.active{border:2px solid #3dff3a;background:linear-gradient(180deg,#05361a,#032613);box-shadow:0 0 12px rgba(61,255,58,.45),inset 0 0 12px rgba(61,255,58,.12);color:#fff;font-weight:700;padding-left:15px}
.tab .cnt{font-weight:500;margin-left:4px;font-size:12px;color:#e8f2ea}.tab.active .cnt{background:rgba(0,30,12,.55);padding:5px 11px;border-radius:9px}
.selbox{position:absolute;left:637px;top:11px;width:103px;height:41px;border-radius:11px;border:1px solid #1b2c36;background:#05121a}
.selbox select{appearance:none;-webkit-appearance:none;width:100%;height:100%;background:none;border:0;color:#e4ecf3;font-size:13px;padding:0 0 0 22px;outline:none;font-family:inherit}
.selbox .i{position:absolute;right:11px;top:13px;font-size:15px;pointer-events:none}
.fbtn{position:absolute;left:749px;top:12px;width:34px;height:34px;border-radius:9px;border:1px solid #1b2c36;background:#05121a;color:#e4ecf3;display:grid;place-items:center;font-size:18px;padding:0}
.feed{position:absolute;left:10px;top:52px;width:772px;height:654px;border-top:1px solid #12222b;overflow-y:auto;overflow-x:hidden;padding:4px 0 0 0}
.feed{border-bottom:1px solid #12222b}.feed::-webkit-scrollbar{width:8px}.feed::-webkit-scrollbar-thumb{background:#4d5c6c;border-radius:5px;border:1px solid #2b3a48}.feed::-webkit-scrollbar-track{background:transparent}
.feed::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:1px;background:#22404a}
.msg{position:relative;display:block;height:46.7px}
.msg .t{position:absolute;left:21px;top:13px;font-size:12.5px;color:#c9d4df;line-height:16px}
.msg .av{position:absolute;left:66px;top:4px}
.msg .mb{position:absolute;left:114px;top:3px;line-height:1}
.mh{display:flex;align-items:center;gap:9px;height:20px;font-size:12px;font-weight:500;white-space:nowrap}
.mh b{font-weight:500}
.mh time{color:#8ea0b2;font-size:11.5px}
.mtx{font-size:13px;line-height:19px;margin-top:1px;color:#f2f6fa;white-space:nowrap}
.mtx.key{color:#3dff4a}
.msg.sel::before{content:'';position:absolute;left:6px;top:10px;width:3px;height:26px;border-radius:2px;background:#3dff3a;box-shadow:0 0 8px #3dff3a}
.msg.new{animation:pop .35s ease}@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bdg{display:inline-flex;align-items:center;height:19px;padding:0 10px;border-radius:7px;font-size:11.5px;font-weight:500;border:1px solid transparent}
.bdg.dlg{background:#1b0f5f;color:#c492ff;border-color:#2c1a86}
.bdg.key{background:#062c1b;color:#37ff7c;border-color:#0d7a3d}
.bdg.norm{background:#17222d;color:#e0e9f2;border-color:#26364a}
.emo{position:absolute;left:19px;top:719px;width:50px;height:41px;border-radius:12px;border:1px solid #1b2c36;background:linear-gradient(180deg,#06151c,#040e14);display:grid;place-items:center;font-size:24px;color:#eaf1f7;padding:0}
.cin{position:absolute;left:74px;top:719px;width:634px;height:41px;border-radius:12px;background:#04131a;border:1px solid #102029}
.cin input{position:absolute;left:12px;top:0;width:560px;height:100%;background:none;border:0;outline:none;color:#fff;font-size:13.5px;font-family:inherit}
.cin input::placeholder{color:#8fa1b3}
.cin .i{position:absolute;right:11px;top:9px;font-size:22px;color:#cdd8e2}
.send{position:absolute;left:718px;top:719px;width:58px;height:41px;border-radius:12px;border:0;background:linear-gradient(180deg,#59ff3c,#35e826);color:#031a07;font-size:22px;display:grid;place-items:center;box-shadow:0 0 16px rgba(70,255,50,.5)}
.qc{position:absolute;top:775px;height:27px;border-radius:8px;border:1px solid #1b2c36;background:linear-gradient(180deg,#06141b,#040e14);color:#d3dde7;font-size:11.5px;display:flex;align-items:center;gap:8px;padding:0 0 0 18px;white-space:nowrap;overflow:visible}
.qc .i{font-size:15px}

/* right */
.mem{left:1109px;top:90px;width:411px;height:411px}
.ch{position:absolute;top:13px;font-size:15.5px;font-weight:500;color:#fff;line-height:20px}
.ch-i{position:absolute;font-size:24px;color:#4dff3a}
.pill{position:absolute;top:50px;height:34px;border-radius:9px;border:1px solid #1b2c36;background:linear-gradient(180deg,#06141b,#040e14);color:#e4ecf3;font-size:12px;font-weight:500;text-align:center;padding:0}
.pill span{color:#b9c6d4;margin-left:4px;font-size:10.5px}
.pill.active{border:1.5px solid #3dff3a;background:linear-gradient(180deg,#04301a,#02200f);color:#fff;font-weight:700;font-size:13px;box-shadow:0 0 10px rgba(61,255,58,.35)}
.pill.active span{color:#9dffa0;font-weight:500}
.mlist{position:absolute;left:0;top:88px;width:411px;height:262px;overflow:hidden}
.mrow{position:absolute;left:15px;width:381px;height:51px;border-top:1px solid #0f1f27}
.mrow:first-child{border-top:0}
.mrow .av{position:absolute;left:2px;top:4px}
.mrow .nm{position:absolute;left:56px;top:5px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;white-space:nowrap;color:#fff}
.mrow .tx{position:absolute;left:56px;top:25px;max-width:255px;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#d3dde7;white-space:nowrap}
.mrow .tx.key{color:#3dff4a}
.mrow time{position:absolute;right:25px;top:14px;font-size:12px;color:#aebccb}
.mrow .dot{position:absolute;right:5px;top:19px;width:7px;height:7px}
.showall{position:absolute;left:15px;top:360px;width:382px;height:35px;border-radius:9px;border:1px solid #1b2c36;background:#04121a;color:#e4ecf3;font-size:11.5px;display:flex;align-items:center;justify-content:center;gap:9px}
.quick{left:1109px;top:513px;width:411px;height:180px}
.qt{position:absolute;height:49px;border-radius:9px;border:1px solid;display:flex;align-items:center;padding-left:12px;gap:10px;font-size:11px;font-weight:400;cursor:pointer;text-align:left;line-height:16px}
.qt .ci{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;font-size:21px;flex-shrink:0}.qt .ci .i{stroke-width:2.1}
.qt.p{left:17px;top:45px;width:185px;color:#c58cff;border-color:#241f6e;background:linear-gradient(90deg,#120f4e,#0a0b30)}.qt.p .ci{background:#2a1c84;color:#c58cff}
.qt.b{left:211px;top:45px;width:185px;color:#fff;border-color:#10405c;background:linear-gradient(90deg,#08283a,#06161f)}.qt.b .ci{background:#0b4f86;color:#4fb4ff}
.qt.g{left:17px;top:106px;width:185px;height:56px;color:#fff;border-color:#0d5427;background:linear-gradient(90deg,#063a1b,#04200f)}.qt.g .ci{background:#0c5226;color:#4dff3a}
.qt.k{left:211px;top:106px;width:185px;height:56px;color:#ff74b8;border-color:#5a1043;background:linear-gradient(90deg,#3a0b2c,#200718)}.qt.k .ci{background:#521240;color:#ff74b8}
.ev{left:1109px;top:706px;width:411px;height:265px}
.erow{position:absolute;left:17px;width:381px;height:52px;border-top:1px solid #0f1f27}
.erow:first-child{border-top:0}
.erow .ei{position:absolute;left:1px;top:6px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:22px}
.erow .ei .i{stroke-width:2}.ei.g{background:#0a3a1c;color:#4dff3a}.ei.p{background:#231a63;color:#b88aff}.ei.k{background:#3a0f2e;color:#ff6fb5}
.erow .et{position:absolute;left:54px;top:9px;font-weight:400;font-size:11.5px;color:#fff;line-height:15px;white-space:nowrap}
.erow .es{position:absolute;left:54px;top:27px;font-size:11.5px;color:#9fb0c3;line-height:15px;white-space:nowrap}
.erow .es.chipk{top:24px;height:20px;padding:0 9px 0 7px;border-radius:9px;background:#0e1e29;color:#d3dde7;display:flex;align-items:center;gap:6px;left:54px}
.erow time{position:absolute;right:20px;top:17px;font-size:12px;color:#aebccb}

/* modals */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(4px);display:none;place-items:center;z-index:50;padding:20px}
.modal.open{display:grid}
.mbox{position:relative;width:min(640px,100%);max-height:92vh;overflow-y:auto;padding:22px;border-radius:14px;border:1px solid #17303a;background:linear-gradient(180deg,#041017,#020b10);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.mbox h2{margin:0 0 14px;font-size:18px;color:var(--acc);display:flex;gap:10px;align-items:center}
.x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;border:1px solid #1b2c36;background:#05121a;color:#fff;display:grid;place-items:center;padding:0}
.hint{font-size:12px;color:var(--muted);margin:-6px 0 14px;line-height:1.5}
.row{display:flex;gap:12px;margin-bottom:12px}.row>div{flex:1;min-width:0}.row.last{margin-bottom:0}
.mbox label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.mbox input,.mbox textarea,.mbox select{background:#030d12;color:#fff;border:1px solid #1b2c36;padding:11px 12px;border-radius:10px;width:100%;font-family:inherit;font-size:14px}
.mbox select[multiple]{height:110px}
.mbox input:focus,.mbox textarea:focus,.mbox select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(83,252,24,.12)}
.mbox input[readonly]{cursor:not-allowed;opacity:.8;color:var(--acc);font-weight:600}
.mbox input[type=checkbox]{width:auto;transform:scale(1.2);accent-color:var(--acc)}
.btn{border:0;padding:12px 20px;border-radius:10px;font-weight:700;font-size:14px;flex:1;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--acc);color:#031200}.btn-secondary{background:#13202a;color:#fff;border:1px solid #1b2c36}.btn-pink{background:#ff0055;color:#fff}.btn-orange{background:#ff9800;color:#000}.btn-inline{flex:0 0 auto}
.status-line{margin-top:12px;font-weight:600;font-size:14px;min-height:20px;display:flex;align-items:center;gap:8px}
.accounts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:14px}
.acc-card{background:#030d12;padding:12px;border-radius:10px;border:1px solid #1b2c36;display:flex;flex-direction:column;gap:8px}
.acc-top{display:flex;justify-content:space-between;align-items:center}.online{color:var(--acc);font-size:10px}
.acc-proxy{display:flex;align-items:center;gap:8px}.acc-proxy input[type=text]{padding:6px 8px;font-size:12px}
.warning{display:flex;gap:10px;align-items:flex-start;background:rgba(255,107,107,.1);border:1px solid #ff6b6b;color:#ffb3b3;padding:12px 14px;border-radius:8px;font-size:13px;line-height:1.5;margin-top:14px}
.empty{color:var(--muted);font-size:13px}
code{background:#030d12;border:1px solid #1b2c36;padding:1px 6px;border-radius:6px;color:var(--acc);font-size:12px}
.mbox .erow{position:relative;left:0;width:100%;margin-bottom:0}