/* InstaBot panel — flat 2.0 (shadcn-style): flat surfaces, 1px hairlines, 12px radius, one raspberry accent, bento grids. */
.ib{
  --bg:#F4F4F7; --sf:#FFFFFF; --sf2:#F8F8FB; --ink:#15151C; --mu:#666675; --ln:#E4E4EC; --ln2:#D5D5E0;
  --ac:#D81E5B; --acs:#FCE7EF; --oni:#FFFFFF;
  --ok:#11804C; --oks:#DDF4E8; --wa:#A85A06; --was:#FDF0DC; --in:#2257D6; --ins:#E3EBFD; --vi:#6D3FD8; --vis:#EEE7FD;
  --r:12px; --f:"Vazirmatn",Tahoma,system-ui,sans-serif;
  font-family:var(--f); color:var(--ink); background:var(--bg); font-size:14px; line-height:1.75;
  box-sizing:border-box; -webkit-font-smoothing:antialiased; position:relative;
}
.ib.pg{min-height:100vh}
.ib.dark{
  --bg:#0D0D12; --sf:#16161D; --sf2:#1B1B23; --ink:#ECECF2; --mu:#9C9CAD; --ln:#26262F; --ln2:#33333E;
  --ac:#FF4D86; --acs:#3A1424; --oni:#1A0610;
  --ok:#45C98A; --oks:#0F2E20; --wa:#F0A848; --was:#33240C; --in:#7EA6FF; --ins:#16233F; --vi:#B49CFF; --vis:#241A3D;
}
.ib *{box-sizing:border-box}
.ib h1,.ib h2,.ib h3,.ib h4,.ib p{margin:0}
.ib h1{font-size:22px;font-weight:800;line-height:1.4}
.ib h2{font-size:16px;font-weight:800;line-height:1.5}
.ib h3{font-size:14px;font-weight:700;line-height:1.5}
.ib a{color:inherit;text-decoration:none}
.ib button,.ib input,.ib select,.ib textarea{font:inherit;color:inherit}
.mu{color:var(--mu)} .sm{font-size:12.5px} .xs{font-size:11.5px} .b{font-weight:700} .xb{font-weight:800}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}

/* shell */
.app{display:flex;flex-wrap:wrap;min-height:100vh;align-items:stretch}
.side{flex:1 1 248px;max-width:100%;background:var(--sf);border-inline-end:1px solid var(--ln);display:flex;flex-direction:column;gap:6px;padding:16px 12px}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 10px}
.logo{width:34px;height:34px;border-radius:10px;background:var(--ac);color:var(--oni);display:grid;place-items:center;flex:none}
.brand b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.brand small{display:block;font-size:11px;color:var(--mu);line-height:1.3}
.pgsw{display:flex;align-items:center;gap:10px;border:1px solid var(--ln);border-radius:var(--r);padding:8px 10px;background:var(--sf2);min-height:52px}
.pgsw .who{flex:1;min-width:0;line-height:1.35}
.pgsw .who b{display:block;font-size:13px}
.av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#F59E0B,#D81E5B 55%,#7C3AED)}
.av.lg{width:40px;height:40px;font-size:14px}
.av.gr{background:var(--ln2);color:var(--ink)}
.grp{font-size:11px;font-weight:700;color:var(--mu);padding:12px 10px 2px;letter-spacing:.02em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:0 10px;min-height:38px;border-radius:9px;color:var(--mu);font-weight:500;font-size:13.5px}
.nav a:hover{background:var(--sf2);color:var(--ink)}
.nav a.on{background:var(--acs);color:var(--ac);font-weight:700}
.nav a .nb{margin-inline-start:auto;font-size:11px;font-weight:700;background:var(--ac);color:var(--oni);border-radius:99px;padding:0 7px;line-height:18px}
.nav a .nw{margin-inline-start:auto;font-size:10.5px;font-weight:700;color:var(--vi);background:var(--vis);border-radius:6px;padding:0 6px;line-height:18px}
.plan{margin-top:auto;border:1px solid var(--ln);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--sf2)}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 24px;border-bottom:1px solid var(--ln);background:var(--sf);min-height:64px}
.top .ttl{display:flex;flex-direction:column;line-height:1.35;margin-inline-end:auto}
.top .ttl small{color:var(--mu);font-size:12px}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--ln);border-radius:10px;padding:0 12px;min-height:40px;min-width:240px;color:var(--mu);background:var(--sf2);font-size:13px}
.search kbd{margin-inline-start:auto;font-family:inherit;font-size:11px;border:1px solid var(--ln2);border-radius:5px;padding:0 5px}
.content{padding:24px;display:flex;flex-direction:column;gap:20px;width:100%;max-width:1480px}

/* buttons & chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:10px;font-weight:700;font-size:13.5px;border:1px solid var(--ln);background:var(--sf);color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ln2)}
.btn.pri{background:var(--ac);border-color:var(--ac);color:var(--oni)}
.btn.dk{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.gh{background:transparent;border-color:transparent;color:var(--mu)}
.btn.sm{min-height:32px;padding:0 12px;font-size:12.5px;border-radius:8px}
.btn.ic{width:40px;padding:0}
.btn.wide{width:100%}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:99px;padding:0 9px;line-height:22px;background:var(--sf2);color:var(--mu);border:1px solid var(--ln);white-space:nowrap}
.chip.ok{background:var(--oks);color:var(--ok);border-color:transparent}
.chip.wa{background:var(--was);color:var(--wa);border-color:transparent}
.chip.ac{background:var(--acs);color:var(--ac);border-color:transparent}
.chip.in{background:var(--ins);color:var(--in);border-color:transparent}
.chip.vi{background:var(--vis);color:var(--vi);border-color:transparent}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.env{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;border-radius:6px;padding:0 6px;line-height:18px}
.env.off{background:var(--oks);color:var(--ok)} .env.key{background:var(--was);color:var(--wa)} .env.both{background:var(--ins);color:var(--in)}
.wallet{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ln);border-radius:10px;padding:0 12px;min-height:40px;font-weight:700;font-size:13px;background:var(--sf)}
.wallet .plus{width:20px;height:20px;border-radius:6px;background:var(--ac);color:var(--oni);display:grid;place-items:center;font-size:14px;line-height:1}

/* surfaces */
.card{background:var(--sf);border:1px solid var(--ln);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card.flat{background:var(--sf2)}
.hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hd .sp{margin-inline-start:auto}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px;min-width:0}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.g4,.g3,.g2{grid-template-columns:1fr}.content{padding:16px}.top{padding:12px 16px}.search{min-width:0;flex:1 1 100%}}
.banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:var(--r);padding:14px 18px;background:var(--ink);color:var(--bg)}
.banner p{flex:1 1 320px;font-size:13.5px}
.banner .mu{color:color-mix(in srgb,var(--bg) 70%,var(--ink))}
.kpi{display:flex;flex-direction:column;gap:4px}
.kpi .v{font-size:26px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;font-weight:700}
.up{color:var(--ok)} .down{color:var(--ac)}
.kic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--sf2);color:var(--ink)}
.hl{background:var(--ac);color:var(--oni);border-color:var(--ac)}
.hl .mu{color:color-mix(in srgb,var(--oni) 78%,var(--ac))}
.dark .hl .mu{color:color-mix(in srgb,var(--oni) 70%,var(--ac))}
.sep{height:1px;background:var(--ln)}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--ln);min-height:52px}
.li:last-child{border-bottom:0}
.li .grow{flex:1;min-width:0}
.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* tables */
.tw{overflow-x:auto;border:1px solid var(--ln);border-radius:var(--r);background:var(--sf)}
.tbl{border-collapse:collapse;width:100%;min-width:760px;font-size:13px}
.tbl th{font-size:11.5px;color:var(--mu);font-weight:700;text-align:start;padding:10px 14px;background:var(--sf2);border-bottom:1px solid var(--ln);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--ln);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}

/* controls */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--sf2);border:1px solid var(--ln);flex-wrap:wrap}
.seg button{border:0;background:transparent;border-radius:7px;padding:0 12px;min-height:30px;font-size:12.5px;font-weight:700;color:var(--mu);cursor:pointer}
.seg button.on{background:var(--sf);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tog{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.tog i{width:38px;height:22px;border-radius:99px;background:var(--ln2);position:relative;flex:none}
.tog i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff}
.tog.on i{background:var(--ac)}
.tog.on i::after{inset-inline-start:19px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:12.5px;font-weight:700}
.inp{border:1px solid var(--ln);background:var(--sf);border-radius:10px;min-height:40px;padding:8px 12px;width:100%;font-size:13.5px}
textarea.inp{min-height:110px;resize:vertical;line-height:1.8}
.kw{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:0 10px;line-height:28px;font-size:12.5px;font-weight:700;background:var(--sf2);border:1px solid var(--ln)}
.steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--mu)}
.step .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--ln2);font-size:12px;background:var(--sf)}
.step.done .n{background:var(--ok);border-color:var(--ok);color:#fff}
.step.cur{color:var(--ink)} .step.cur .n{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.step-l{flex:0 1 40px;height:1px;background:var(--ln2)}
.bar{height:8px;border-radius:99px;background:var(--sf2);border:1px solid var(--ln);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ac);border-radius:99px}

/* charts */
.cols{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:8px;border-bottom:1px solid var(--ln)}
.cols .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
.cols .c i{display:block;border-radius:4px 4px 1px 1px;background:var(--ac)}
.cols .c i.b2{background:var(--in);opacity:.55}
.leg{display:flex;gap:14px;font-size:11.5px;color:var(--mu);align-items:center;flex-wrap:wrap}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--ac);margin-inline-end:5px;vertical-align:-1px}
.ring{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;flex:none}
.ring b{width:68px;height:68px;border-radius:50%;background:var(--sf);display:grid;place-items:center;font-size:18px;font-weight:800}
.heat{display:grid;grid-template-columns:40px repeat(12,minmax(0,1fr));gap:4px;font-size:10.5px;color:var(--mu)}
.heat i{display:block;aspect-ratio:1.5;border-radius:4px;background:var(--ac)}

/* phone + chat */
.phone{width:300px;max-width:100%;border:8px solid var(--ink);border-radius:36px;background:var(--sf);overflow:hidden;display:flex;flex-direction:column;align-self:center}
.dark .phone{border-color:#2A2A35}
.phone .ph{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--ln);font-size:12.5px}
.phone .pb{padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--sf);min-height:380px}
.phone .pf{display:flex;align-items:center;gap:8px;border-top:1px solid var(--ln);padding:10px 12px;font-size:12px;color:var(--mu)}
.bub{max-width:82%;padding:8px 12px;border-radius:16px;font-size:12.5px;line-height:1.7}
.bub.in{background:var(--sf2);border:1px solid var(--ln);align-self:flex-start;border-start-start-radius:5px}
.bub.out{background:var(--ac);color:var(--oni);align-self:flex-end;border-start-end-radius:5px}
.bub.draft{background:var(--was);color:var(--ink);border:1.5px dashed var(--wa);align-self:flex-end;border-start-end-radius:5px}
.qbtn{align-self:flex-end;border:1px solid var(--ln2);border-radius:10px;font-size:12px;font-weight:700;padding:5px 12px;background:var(--sf);color:var(--in);text-align:center;min-width:150px}
.qr{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.qr span{border:1px solid var(--ac);color:var(--ac);border-radius:99px;font-size:11.5px;font-weight:700;padding:1px 10px}
.pcard{align-self:flex-end;width:190px;border:1px solid var(--ln);border-radius:14px;overflow:hidden;background:var(--sf)}
.pcard .im{height:96px;background:repeating-linear-gradient(45deg,var(--sf2),var(--sf2) 8px,var(--ln) 8px,var(--ln) 16px)}
.pcard .tx{padding:8px 10px;font-size:11.5px;display:flex;flex-direction:column;gap:2px}
.add{border:1.5px dashed var(--ln2);border-radius:12px;padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--mu);display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;cursor:pointer;min-height:40px}
.ref{display:flex;align-items:center;gap:10px;border:1px solid var(--ln);border-radius:10px;padding:8px;font-size:12px;color:var(--mu);background:var(--sf2)}
.thumb{width:44px;height:44px;border-radius:8px;flex:none;background:repeating-linear-gradient(45deg,var(--sf2),var(--sf2) 6px,var(--ln) 6px,var(--ln) 12px);border:1px solid var(--ln)}
.thumb.lg{width:100%;height:auto;aspect-ratio:1;border-radius:10px}
.thumb.sel{outline:3px solid var(--ac);outline-offset:-3px}
.voice{display:flex;align-items:center;gap:8px;background:var(--sf2);border:1px solid var(--ln);border-radius:16px;padding:8px 12px;align-self:flex-start}
.voice .w{display:flex;gap:2px;align-items:center;height:18px}
.voice .w i{width:3px;border-radius:2px;background:var(--mu)}

/* overlay */
.scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent);display:flex;align-items:center;justify-content:center;padding:24px}
.sheet{width:420px;max-width:100%;background:var(--sf);border:1px solid var(--ln);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
.otp{display:flex;gap:8px;direction:ltr;justify-content:center}
.otp span{width:52px;height:56px;border:1px solid var(--ln2);border-radius:12px;display:grid;place-items:center;font-size:22px;font-weight:800;background:var(--sf2)}
.otp span.f{border-color:var(--ac);background:var(--sf)}

/* shared shell parts (Sidebar / Topbar children) */
.sidecol{flex:1 1 248px;max-width:100%;display:flex}
.sidecol > *{flex:1;min-width:0}
.ib.sb{min-height:100vh;width:100%}
.topwrap{position:relative;z-index:30;flex:none;min-height:72px}
.ib.tb{width:100%}
.lang{display:inline-flex;border:1px solid var(--ln);border-radius:10px;padding:3px;background:var(--sf2)}
.lang button{border:0;background:transparent;border-radius:7px;min-height:30px;padding:0 10px;font-size:12px;font-weight:800;color:var(--mu);cursor:pointer}
.lang button.on{background:var(--ink);color:var(--bg)}
.ddw{position:relative}
.dd{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:360px;max-width:92vw;background:var(--sf);border:1px solid var(--ln);border-radius:16px;box-shadow:0 24px 48px -16px rgba(0,0,0,.28);padding:12px;display:flex;flex-direction:column;gap:10px;z-index:40}
.dd.l{inset-inline-end:auto;inset-inline-start:0}
.dd.w2{width:300px}
.badge-n{position:absolute;top:4px;inset-inline-end:4px;min-width:17px;height:17px;border-radius:99px;background:var(--ac);color:var(--oni);font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px;line-height:1}
.ntf{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px}
.ntf.un{background:var(--sf2)}
.ntf .grow{flex:1;min-width:0}
.ntf .t{font-size:13px;font-weight:700;line-height:1.5}
.ntf .d{font-size:12px;color:var(--mu);line-height:1.6}
.udot{width:8px;height:8px;border-radius:50%;background:var(--ac);flex:none;margin-top:7px}
.toast{position:absolute;bottom:24px;inset-inline-start:24px;width:380px;max-width:calc(100% - 48px);background:var(--ink);color:var(--bg);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 20px 40px -12px rgba(0,0,0,.4);z-index:50}
.toast .mu{color:color-mix(in srgb,var(--bg) 68%,var(--ink))}
.modal-bg{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 42%,transparent);display:flex;align-items:flex-start;justify-content:center;padding:72px 20px 20px;z-index:60}
.modal{width:520px;max-width:100%;background:var(--sf);border:1px solid var(--ln);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
.modal.wide{width:760px}
.ck{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--ln)}
.ck:last-child{border-bottom:0}
.ck .st{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.ck .st.ok{background:var(--ok)} .ck .st.no{background:var(--ac)} .ck .st.wt{background:var(--ln2);color:var(--mu)} .ck .st.wa{background:var(--wa)}
.radio{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--ln);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--sf);text-align:start;width:100%}
.radio .o{width:18px;height:18px;border-radius:50%;border:2px solid var(--ln2);flex:none;margin-top:3px}
.radio.on{border-color:var(--ac);background:var(--acs)}
.radio.on .o{border:5px solid var(--ac)}
.lockc{opacity:.55}
.note{border-radius:12px;padding:12px 14px;font-size:13px;display:flex;gap:10px;align-items:flex-start;background:var(--ins);color:var(--ink)}
.note.wa{background:var(--was)} .note.ok{background:var(--oks)} .note.ac{background:var(--acs)}
.note .i{margin-top:3px}
.story{width:62px;height:62px;border-radius:50%;padding:3px;background:conic-gradient(#F59E0B,#D81E5B,#7C3AED,#F59E0B);flex:none;display:grid;place-items:center;cursor:pointer;border:0}
.story span{width:100%;height:100%;border-radius:50%;border:3px solid var(--sf);background:repeating-linear-gradient(45deg,var(--sf2),var(--sf2) 6px,var(--ln) 6px,var(--ln) 12px)}
.story.sel{outline:3px solid var(--ac);outline-offset:2px}

/* icons (lucide-style strokes as masks) */
.i{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.i.s{width:15px;height:15px} .i.l{width:22px;height:22px}
.i-home{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
.i-inbox{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6z'/%3E%3C/svg%3E")}
.i-users{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E")}
.i-spark{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E")}
.i-send{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4z'/%3E%3C/svg%3E")}
.i-msg{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E")}
.i-story{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-dasharray='4 3'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E")}
.i-form{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E")}
.i-bag{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14l-1 14H6z'/%3E%3Cpath d='M9 10V6a3 3 0 0 1 6 0v4'/%3E%3C/svg%3E")}
.i-chart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-4 3 3 5-6'/%3E%3C/svg%3E")}
.i-trophy{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/%3E%3C/svg%3E")}
.i-link{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E")}
.i-gear{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E")}
.i-log{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E")}
.i-wallet{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M16 15h2M7 6V4h10v2'/%3E%3C/svg%3E")}
.i-crown{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l4.5 4L12 4l4.5 7L21 7l-2 12H5z'/%3E%3C/svg%3E")}
.i-gift{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v9H5v-9M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E")}
.i-search{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")}
.i-bell{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E")}
.i-globe{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E")}
.i-moon{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E")}
.i-plus{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.i-check{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.i-lock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.i-shield{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.i-key{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3 21 2M16 7l3 3M18 5l2 2'/%3E%3C/svg%3E")}
.i-phone{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E")}
.i-down{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 21h16'/%3E%3C/svg%3E")}
.i-filter{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E")}
.i-chev{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.i-left{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")}
.i-zap{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E")}
.i-clock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.i-image{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E")}
.i-mic{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10a7 7 0 0 0 14 0M12 17v5'/%3E%3C/svg%3E")}
.i-video{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='M16 10l6-3v10l-6-3z'/%3E%3C/svg%3E")}
.i-cards{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='14' rx='2'/%3E%3Cpath d='M8 3h12a2 2 0 0 1 2 2v12'/%3E%3C/svg%3E")}
.i-text{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h16v3M9 20h6M12 4v16'/%3E%3C/svg%3E")}
.i-userplus{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E")}
.i-copy{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E")}
.i-flask{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 18.5A1.7 1.7 0 0 0 6 21h12a1.7 1.7 0 0 0 1.5-2.5L14 9V3M7 15h10'/%3E%3C/svg%3E")}
.i-play{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E")}
.i-hand{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-4 0M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-5.9-2.4L3 16.4a2 2 0 0 1 3-2.6L8 16'/%3E%3C/svg%3E")}
.i-x{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.i-ig{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E")}
.i-bot{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='12' rx='3'/%3E%3Cpath d='M12 4v4M9 13h.01M15 13h.01M9 17h6'/%3E%3C/svg%3E")}
.i-server{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='7' rx='2'/%3E%3Crect x='3' y='14' width='18' height='7' rx='2'/%3E%3Cpath d='M7 6.5h.01M7 17.5h.01'/%3E%3C/svg%3E")}
.i-alert{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.i-refresh{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4L21 8M21 3v5h-5'/%3E%3C/svg%3E")}
.i-info{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E")}
.i-logout{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E")}
.i-help{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.4 9.3a2.7 2.7 0 0 1 5.2 1c0 1.8-2.6 2.4-2.6 3.9M12 17.4h.01'/%3E%3C/svg%3E")}
.i-edit{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E")}
.i-trash{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15'/%3E%3C/svg%3E")}
.i-heart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E")}
.helpd{position:absolute;top:calc(100% + 6px);inset-inline-end:16px;width:440px;max-width:94vw;max-height:78vh;overflow:auto;background:var(--sf);border:1px solid var(--ln);border-radius:18px;box-shadow:0 24px 48px -16px rgba(0,0,0,.3);padding:16px;display:flex;flex-direction:column;gap:12px;z-index:45}
.vid{position:relative;aspect-ratio:16/9;border-radius:12px;background:linear-gradient(135deg,#1d1d26,#2c1220);display:grid;place-items:center;color:#fff;overflow:hidden}
.vid .pl{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.vid .cap{position:absolute;bottom:8px;inset-inline-start:10px;font-size:11.5px;opacity:.85}
.prev{border-radius:10px;background:var(--sf2);border:1px solid var(--ln);height:120px;padding:10px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.ribbon{position:absolute;top:12px;inset-inline-start:-34px;transform:rotate(-45deg);background:var(--ok);color:#fff;font-size:11px;font-weight:800;padding:2px 40px}
.na{opacity:.6;filter:grayscale(.6)}

/* round5: sidebar & header */
/* -- shell: the sidebar column sizes to the sidebar (248px expanded, 72px rail) -- */
.app > .sidecol,.ib .sidecol{flex:0 0 auto;width:auto;max-width:none}
.app > .sidecol > *,.ib .sidecol > *{flex:0 0 auto;min-width:0}

/* -- sidebar -- */
.ib.sb.side{width:248px;flex:none;padding:0;gap:0;display:flex;flex-direction:column;min-height:100vh;background:var(--sf);border-inline-end:1px solid var(--ln);transition:width .18s ease}
.ib.sb.side.mini{width:72px}
.sb .sbp{flex:1;display:flex;flex-direction:column;gap:4px;padding:14px 12px 12px;min-height:0}
.sb .sbscrim{display:none}
.sb .rl{display:none}
.sbhead{display:flex;align-items:center;gap:8px;padding:2px 2px 10px}
.sbbrand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border-radius:12px;padding:2px}
.sblogo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(140deg,#F59E0B -25%,var(--ac) 45%,#7C3AED 125%);box-shadow:0 8px 16px -8px color-mix(in srgb,var(--ac) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.sbbt{min-width:0;line-height:1.3}
.sbbt b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em}
.sbbt small{display:block;font-size:11px;color:var(--mu)}
.sbcol{width:32px;height:32px;border-radius:9px;border:1px solid var(--ln);background:var(--sf);color:var(--mu);display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.sbcol:hover{color:var(--ink);border-color:var(--ln2);background:var(--sf2)}
.sbarr{transform-origin:9.5px 12px;transition:transform .2s ease}
.sbsw{margin:0 0 6px}
.sbpg{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--ln);border-radius:14px;background:linear-gradient(180deg,var(--sf),var(--sf2));cursor:pointer;text-align:start;min-height:60px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sbpg:hover{border-color:var(--ln2)}
.sbring{position:relative;flex:none;width:38px;height:38px;border-radius:50%;padding:2px;display:grid;place-items:center;background:var(--ln2)}
.sbring.off{background:var(--ok)}
.sbring.key{background:var(--wa)}
.sbring.wa{background:repeating-conic-gradient(var(--wa) 0 18deg,transparent 18deg 36deg)}
.sbring .av{width:34px;height:34px;border:2px solid var(--sf);font-size:12px}
.sbst{position:absolute;bottom:-1px;inset-inline-end:-1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--sf);background:var(--mu)}
.sbst.ok{background:var(--ok)} .sbst.wa{background:var(--wa)}
.sbwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.3}
.sbwho b{display:block;font-size:13.5px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sbbot{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--mu);font-weight:500;line-height:18px}
.sbd{width:6px;height:6px;border-radius:50%;background:var(--mu);flex:none}
.sbd.ok{background:var(--ok);box-shadow:0 0 0 3px var(--oks)} .sbd.wa{background:var(--wa);box-shadow:0 0 0 3px var(--was)}
.sb .env.wa{background:var(--was);color:var(--wa)}
.sb .env.mu{background:var(--sf2);color:var(--mu);box-shadow:inset 0 0 0 1px var(--ln)}
.sbdd{width:100%;min-width:272px}
.sbopt{display:flex;align-items:center;gap:10px;width:100%;text-align:start;border:0;border-radius:10px;padding:8px;cursor:pointer;min-height:54px;background:transparent}
.sbopt:hover{background:var(--sf2)} .sbopt.on{background:var(--acs)}
.sbnote{margin:2px 0 4px;padding:10px}
.sbscroll{display:flex;flex-direction:column;gap:2px}
.sb .gbtn{display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;cursor:pointer;text-align:start;padding:12px 10px 4px;font-size:11px;font-weight:700;color:var(--mu);letter-spacing:.02em;border-radius:8px;min-height:30px}
.sb .gbtn:hover{color:var(--ink)}
.sb .gbtn .i{margin-inline-start:auto;transition:transform .15s ease;transform:rotate(90deg);opacity:.7}
.sb .gbtn.open .i{transform:none}
.sb .gbtn.fixed{cursor:default}
.sb .gbtn.fixed .i{opacity:.3}
.sb .nav.shut{display:none}
.sb .sbnav a{position:relative;gap:11px;min-height:38px;padding:0 10px;border-radius:10px;color:var(--mu);font-weight:500;transition:background .12s ease,color .12s ease}
.sb .sbnav a .i{color:color-mix(in srgb,var(--mu) 88%,var(--ac))}
.sb .sbnav a:hover{background:var(--sf2);color:var(--ink)}
.sb .sbnav a:hover .i{color:var(--ink)}
.sb .sbnav a.on{background:var(--acs);color:var(--ac);font-weight:700}
.sb .sbnav a.on .i{color:var(--ac)}
.sb .sbnav a.on::before{content:"";position:absolute;inset-inline-start:-12px;top:8px;bottom:8px;width:3px;background:var(--ac);border-start-end-radius:3px;border-end-end-radius:3px}
.sb .sbnav a:focus-visible,.sbcol:focus-visible,.sbpg:focus-visible,.sb .gbtn:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.sb .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb .sbnav a .nb{margin-inline-start:0;text-align:center;min-width:20px}
.sb .sbnav a .nb.soft{background:var(--sf2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ln2)}
.sb .sbnav a.on .nb.soft{background:var(--sf)}
.sb .sbnav a .nw{margin-inline-start:0}
.sbrole{font-size:10.5px;font-weight:700;border-radius:6px;padding:0 6px;line-height:18px;white-space:nowrap}
.sbrole.vi{background:var(--vis);color:var(--vi)} .sbrole.in{background:var(--ins);color:var(--in)}
.sbfoot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:14px}
.sbplan{border:1px solid var(--ln);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--ac) 10%,transparent),transparent 60%),var(--sf2)}
.sbplan .sp{margin-inline-start:auto}
.sbpi{width:26px;height:26px;border-radius:8px;background:var(--acs);color:var(--ac);display:grid;place-items:center;flex:none}
.sbbar{height:6px}
.sbbar i{background:linear-gradient(to left,var(--ac),color-mix(in srgb,var(--ac) 55%,#F59E0B))}
.sbme{display:flex;align-items:center;gap:10px;padding:10px 4px 0;border-top:1px solid var(--ln)}
.sbmeav{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,#F59E0B,#D81E5B 55%,#7C3AED);flex:none;box-shadow:0 0 0 2px var(--sf),0 0 0 3.5px var(--ln2)}
.sbmew{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.sbmew b{font-size:12.5px;text-align:right}
.sbme .sp{margin-inline-start:auto}
.sbrl{width:44px;height:44px;border-radius:12px;place-items:center;margin:0 auto;border:1px solid var(--ln);background:var(--sf2);color:var(--ac)}
.sbrl:hover{border-color:var(--ln2)}
/* rail (collapsed) */
.ib.sb.mini:not(.drw) .xl{display:none !important}
.ib.sb.mini:not(.drw) .rl{display:grid}
.ib.sb.mini:not(.drw) .sbp{padding:14px 10px 12px}
.ib.sb.mini:not(.drw) .sbhead{flex-direction:column;gap:8px;padding:2px 0 6px}
.ib.sb.mini:not(.drw) .sbbrand{flex:none;padding:0}
.ib.sb.mini:not(.drw) .sbarr{transform:rotate(180deg)}
.ib.sb.mini:not(.drw) .sbpg{justify-content:center;padding:6px;min-height:52px}
.ib.sb.mini:not(.drw) .gbtn{font-size:0;padding:0;height:1px;min-height:0;margin:10px 10px;background:var(--ln);pointer-events:none;border-radius:0}
.ib.sb.mini:not(.drw) .gbtn .i{display:none}
.ib.sb.mini:not(.drw) .nav.shut{display:flex}
.ib.sb.mini:not(.drw) .sbnav a{justify-content:center;padding:0;min-height:42px;gap:0}
.ib.sb.mini:not(.drw) .sbnav a .lbl, .ib.sb.mini:not(.drw) .sbnav a .nw, .ib.sb.mini:not(.drw) .sbnav a .sbrole{display:none}
.ib.sb.mini:not(.drw) .sbnav a .nb{position:absolute;top:3px;inset-inline-end:5px;margin:0;min-width:17px;padding:0 4px;line-height:16px;font-size:10px;text-align:center;box-shadow:0 0 0 2px var(--sf)}
.ib.sb.mini:not(.drw) .sbnav a.on::before{inset-inline-start:-10px}
.ib.sb.mini:not(.drw) .sbnote{justify-content:center;padding:10px 0}
.ib.sb.mini:not(.drw) .sbme{justify-content:center;padding:10px 0 0}
/* mobile: rail by default, the collapse button opens a drawer over the page */
@media (max-width:900px){
  .app:has(> .sidecol){flex-wrap:nowrap}
  .app > .sidecol{position:relative;z-index:35}
  .ib.sb.side{width:72px}
  .ib.sb.side.drw .sbp{position:fixed;top:0;bottom:0;inset-inline-start:0;width:288px;max-width:86vw;z-index:91;background:var(--sf);border-inline-end:1px solid var(--ln);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);overflow-y:auto}
  .ib.sb.side.drw .sbscrim{display:block;position:fixed;inset:0;z-index:90;border:0;padding:0;margin:0;background:rgba(0,0,0,.45);cursor:pointer}
  .ib.sb:not(.drw) .xl{display:none !important}
  .ib.sb:not(.drw) .rl{display:grid}
  .ib.sb:not(.drw) .sbp{padding:14px 10px 12px}
  .ib.sb:not(.drw) .sbhead{flex-direction:column;gap:8px;padding:2px 0 6px}
  .ib.sb:not(.drw) .sbbrand{flex:none;padding:0}
  .ib.sb:not(.drw) .sbarr{transform:rotate(180deg)}
  .ib.sb:not(.drw) .sbpg{justify-content:center;padding:6px;min-height:52px}
  .ib.sb:not(.drw) .gbtn{font-size:0;padding:0;height:1px;min-height:0;margin:10px 10px;background:var(--ln);pointer-events:none;border-radius:0}
  .ib.sb:not(.drw) .gbtn .i{display:none}
  .ib.sb:not(.drw) .nav.shut{display:flex}
  .ib.sb:not(.drw) .sbnav a{justify-content:center;padding:0;min-height:42px;gap:0}
  .ib.sb:not(.drw) .sbnav a .lbl, .ib.sb:not(.drw) .sbnav a .nw, .ib.sb:not(.drw) .sbnav a .sbrole{display:none}
  .ib.sb:not(.drw) .sbnav a .nb{position:absolute;top:3px;inset-inline-end:5px;margin:0;min-width:17px;padding:0 4px;line-height:16px;font-size:10px;text-align:center;box-shadow:0 0 0 2px var(--sf)}
  .ib.sb:not(.drw) .sbnav a.on::before{inset-inline-start:-10px}
  .ib.sb:not(.drw) .sbnote{justify-content:center;padding:10px 0}
  .ib.sb:not(.drw) .sbme{justify-content:center;padding:10px 0 0}
}

/* -- header (Topbar.dc.html) --
   One fixed 72px bar on every page (matches hint-size="100%,72px"); wraps to two rows only on phones.
   Breakpoints are viewport-based and assume the sidebar column: 248px above 900px, 72px rail below. */
.ib.tb.top{display:block;position:relative;padding:0;gap:0;min-height:72px;background:var(--sf);border-bottom:1px solid var(--ln);box-shadow:0 1px 2px rgba(16,16,24,.04),0 8px 20px -18px rgba(16,16,24,.18);font-size:14px;line-height:1.5}
.ib.dark.tb.top{background:var(--sf);box-shadow:0 8px 20px -16px rgba(0,0,0,.7)}
.tb .tbin{position:relative;z-index:41;display:flex;align-items:center;flex-wrap:nowrap;gap:14px;height:71px;padding:0 24px}
.tb .tbscrim{position:fixed;inset:0;z-index:40;display:block;margin:0;padding:0;border:0;background:transparent;cursor:default}
.tb .tbttl{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center}
.tbcrumb{display:flex;align-items:center;min-width:0;height:17px;font-size:11.5px;line-height:17px;color:var(--mu);white-space:nowrap;overflow:hidden}
.tbcrumb .tbc{display:inline-block;flex:0 1 auto;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mu);font-weight:500;border-radius:4px}
.tbcrumb .tbsl{flex:none;width:12px;height:12px;margin:0 5px;opacity:.6}
.tbcrumb .tbc:hover{color:var(--ac)}
.tb .tbttl h1{font-size:18px;line-height:26px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb .tbsub{font-size:12px;line-height:17px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:640px}
.tb .tbsrch{flex:0 1 260px;min-width:180px}
.tbsearch{display:flex;align-items:center;gap:8px;height:40px;width:100%;padding:0 12px;border:1px solid var(--ln);border-radius:11px;background:var(--sf2);color:var(--mu);font-size:13px;cursor:pointer;text-align:start;transition:border-color .15s,background .15s}
.tbsearch:hover{border-color:var(--ln2);color:var(--ink);background:var(--sf)}
.tbsq{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbsearch kbd{flex:none;font-family:inherit;font-size:10.5px;font-weight:700;border:1px solid var(--ln2);border-bottom-width:2px;border-radius:6px;padding:0 6px;line-height:18px;background:var(--sf);color:var(--mu);unicode-bidi:isolate}
.tb .tbact{display:flex;align-items:center;gap:6px;flex:none}
.tbdiv{width:1px;height:24px;background:var(--ln);margin:0 4px;flex:none}
.tbstat{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:99px;font-size:12px;font-weight:700;border:1px solid var(--ln);background:var(--sf2);white-space:nowrap;transition:border-color .15s}
.tbstat:hover{border-color:var(--ln2)}
.tbstat .tbstt{color:var(--ok)}
.tbstat.wa .tbstt{color:var(--wa)} .tbstat.mu .tbstt{color:var(--mu)}
.tbstat .tbstc{font-weight:500;color:var(--mu);padding-inline-start:8px;border-inline-start:1px solid var(--ln)}
.tbsd{width:8px;height:8px;border-radius:50%;background:var(--mu);flex:none}
.tbsd.ok{background:var(--ok);box-shadow:0 0 0 3px var(--oks)} .tbsd.wa{background:var(--wa);box-shadow:0 0 0 3px var(--was)}
.tb .btn.tbbtn{min-height:38px;height:38px;border-radius:10px;padding:0 12px;gap:6px;font-size:13px}
.tb .btn.ic.tbbtn{width:38px;padding:0}
.tb .btn.gh.tbbtn{color:var(--mu)}
.tb .btn.gh.tbbtn:hover,.tb .btn.gh.tbbtn[aria-expanded="true"]{background:var(--sf2);border-color:var(--ln);color:var(--ink)}
.tb .tbbell{position:relative}
.tb .tbbell .badge-n{top:-5px;inset-inline-end:-5px;box-shadow:0 0 0 2px var(--sf)}
.tbwal{display:inline-flex;align-items:center;gap:8px;height:38px;padding-inline:12px 5px;border:1px solid var(--ln);border-radius:10px;background:var(--sf);color:var(--ink);font-weight:700;font-size:13px;white-space:nowrap;cursor:pointer;transition:border-color .15s}
.tbwal:hover,.tbwal[aria-expanded="true"]{border-color:var(--ln2)}
.tbwal > .i{color:var(--mu)}
.tbamt{display:inline-flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.tbcur{font-size:11px;font-weight:500;color:var(--mu)}
.tbwal .plus{width:26px;height:26px;border-radius:7px;background:var(--ac);color:var(--oni);display:grid;place-items:center;font-size:15px;line-height:1}
.tbme{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ln);background:var(--sf);border-radius:99px;padding:3px;padding-inline-end:9px;height:38px;cursor:pointer;margin-inline-start:2px}
.tbme:hover,.tbme[aria-expanded="true"]{border-color:var(--ln2)}
.tbmeav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#F59E0B,#D81E5B 55%,#7C3AED)}
.tbsearch:focus-visible,.tbme:focus-visible,.tbwal:focus-visible,.tbstat:focus-visible,.tbc:focus-visible,.tbjump:focus-visible,.tb .tbbtn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* header dropdowns: above page content, inside the viewport, scroll when tall */
.tb .tbdd{top:calc(100% + 10px);max-height:calc(100vh - 96px);overflow:auto;z-index:42;line-height:1.6}
.tb .tbsdd{width:400px;max-width:calc(100vw - 32px);inset-inline-end:auto;inset-inline-start:0}
.tb .tbddh{padding:0 4px}
.tb .tbjl{gap:2px}
.tb .tbempty{padding:8px}
.tbjump{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px}
.tbjump:hover{background:var(--sf2)}
.tbjump .grow{flex:1;min-width:0}
.tbjump .kic{width:30px;height:30px;border-radius:8px}
.tb .tbnl{gap:2px;max-height:360px;overflow:auto}
.tb .tbwhd{display:flex;flex-direction:column;gap:2px;padding:4px 4px 2px}
.tb .tbbig{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.tb .tbchips{display:flex;gap:6px;flex-wrap:wrap}
.tb .tbchips .btn{flex:1 1 auto}
.tb .tbph{text-align:right;unicode-bidi:isolate}
.tb .tblrow{gap:10px;align-items:center}
.tb .helpd{top:calc(100% + 10px);inset-inline-end:16px;max-height:calc(100vh - 96px);z-index:45;line-height:1.6}
@media (max-width:1440px){.tbstat .tbstc{display:none}}
@media (max-width:1360px){
  .tb .tbsrch{flex:0 0 40px;min-width:40px}
  .tbsearch{width:40px;padding:0;justify-content:center}
  .tbsq,.tbsearch kbd{display:none}
  .tb .tbh{display:none}
  .tb .btn.tbhelp{width:38px;padding:0}
}
@media (max-width:1100px){
  .tbcur,.tbstat .tbstt{display:none}
  .tbstat{width:34px;padding:0;justify-content:center}
  .tb .tbin{gap:10px;padding:0 20px}
  .tb .tbdiv{display:none}
}
@media (max-width:719px){
  .ib.tb.top{min-height:0}
  .tb .tbin{flex-wrap:wrap;height:auto;padding:10px 16px;row-gap:8px}
  .tb .tbttl{flex:1 1 100%}
  .tb .tbact{flex:1 1 auto;justify-content:flex-end}
  .tb .ddw{position:static}
  .tb .tbdd,.tb .tbsdd,.tb .helpd{inset-inline:12px;width:auto;max-width:none;top:calc(100% + 6px)}
  .tb .btn.pri.tbbtn span{display:none}
  .topwrap{min-height:0}
  .tb .tbact{flex-wrap:wrap;gap:4px;min-width:0}
  .tb .tbstat,.tb .tbme > .i,.tbwal > .i{display:none}
  .tb .tbme{padding:3px}
}
@media (max-width:479px){
  .tb .tbin{column-gap:6px;padding:10px 12px}
  .tb .tbamt{display:none}
  .tbwal > .i{display:inline-block}
  .tb .btn.ic.tbbtn,.tb .btn.tbhelp,.tb .tbsrch,.tbsearch{width:36px;min-width:36px;flex:0 0 36px}
}
/* Inbox: the three panes fill what is left under the header, whatever its height */
.ib .main:has(> .ibx){height:100vh;min-height:752px}
.ib .main > .ibx{flex:1 1 auto;height:auto;min-height:0}

/* Admin-only additions (Admin.dc.html). Uses app.css tokens only. */.cs-admin .adm-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cs-admin .adm-split{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.cs-admin .adm-cats{display:flex;flex-direction:column;gap:4px}
.cs-admin .adm-cat{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:0 12px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:500;text-align:start;cursor:pointer}
.cs-admin .adm-cat:hover{background:var(--sf2)}
.cs-admin .adm-cat.on{background:var(--acs);color:var(--ac);font-weight:700}
.cs-admin .adm-filters{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.cs-admin .adm-filters .fld{gap:4px}
.cs-admin .adm-lbl{font-size:12px;font-weight:700;color:var(--mu)}
.cs-admin .search.adm-s{flex:1 1 260px;min-width:0}
.cs-admin .search.adm-s:focus-within{border-color:var(--ac)}
.cs-admin .adm-sinp{border:0;background:transparent;flex:1;min-width:0;min-height:38px;font:inherit;font-size:13px;color:var(--ink);outline:none}
.cs-admin .adm-ck{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border:1px solid var(--ln);border-radius:10px;background:var(--sf);color:var(--ink);font:inherit;font-size:13px;text-align:start;cursor:pointer}
.cs-admin .adm-ck .bx{width:18px;height:18px;border-radius:5px;border:2px solid var(--ln2);display:grid;place-items:center;flex:none;color:transparent}
.cs-admin .adm-ck.on{border-color:var(--ac)}
.cs-admin .adm-ck.on .bx{background:var(--ac);border-color:var(--ac);color:var(--oni)}
.cs-admin .adm-ck .bx svg{width:12px;height:12px}
.cs-admin .adm-meter{display:flex;gap:4px}
.cs-admin .adm-meter i{flex:1;height:6px;border-radius:99px;background:var(--ln)}
.cs-admin .adm-old{color:var(--mu);text-decoration:line-through}
.cs-admin .adm-new{color:var(--ok);font-weight:700}
.cs-admin .adm-dis{opacity:.5;cursor:not-allowed}
.cs-admin .tbl.adm-t{min-width:560px}
.cs-admin .tbl.adm-t .inp{min-height:34px;padding:4px 8px;font-size:13px}
.cs-admin .adm-pc{border:1px solid var(--ln);border-radius:16px;padding:20px;background:var(--sf);display:flex;flex-direction:column;gap:12px;max-width:360px;width:100%;margin-inline:auto}
.cs-admin .adm-pc .pr{font-size:26px;font-weight:800;line-height:1.2}
.cs-admin .adm-sec{display:flex;flex-direction:column;gap:10px;border:1px solid var(--ln);border-radius:12px;padding:14px;background:var(--sf2)}
.cs-admin .adm-sec h3{margin:0;font-size:13.5px}
.cs-admin .adm-kv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 14px;font-size:13px}
.cs-admin .adm-kv>span:nth-child(odd){color:var(--mu)}
.cs-admin .btn.adm-dg{background:#B42318;border-color:#B42318;color:#fff}
.cs-admin .adm-err{color:#B42318}
.cs-admin .ib.dark .adm-err{color:#FF8A80}
.cs-admin .adm-scroll{max-height:70vh;overflow:auto;display:flex;flex-direction:column;gap:14px}
@media (max-width:900px){.cs-admin .adm-split{grid-template-columns:1fr}
.cs-admin .adm-kv{grid-template-columns:1fr}
}
.cs-admin /* round 5: journeys */
.adm-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;word-break:break-all}
.cs-admin .adm-li{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ln);color:var(--ink);font:inherit;text-align:start;cursor:pointer;padding-inline:6px;border-radius:8px}
.cs-admin .adm-li:hover{background:var(--sf2)}
.cs-admin .adm-li:focus-visible,.cs-admin .adm-cat:focus-visible,.cs-admin .adm-ck:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.cs-admin .btn.adm-x{min-height:20px;width:20px;height:20px;padding:0;margin-inline-start:2px;border:0;color:inherit}
.cs-admin .modal-bg.adm-drbg{padding:0;justify-content:flex-end;align-items:stretch}
.cs-admin .adm-dr{width:480px;max-width:100%;min-height:100%;background:var(--sf);border-inline-start:1px solid var(--ln);padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);overflow:auto}
.cs-admin .adm-dr .hd{display:flex;align-items:center;gap:8px}
.cs-admin .adm-dr .hd h2{margin:0;flex:1;font-size:16px}
.cs-admin .adm-log{display:flex;align-items:center;gap:8px;color:var(--mu);border:1px dashed var(--ln2);border-radius:10px;padding:8px 10px}
.cs-admin .adm-gpv{border:1px solid var(--ln);border-radius:16px;padding:18px;background:var(--bg);display:flex;flex-direction:column;gap:10px;max-width:420px;width:100%;margin-inline:auto}
.cs-admin .adm-gpv h3{margin:4px 0 0;font-size:14px}
.cs-admin .adm-gpv p{margin:0;line-height:1.9}
.cs-admin .adm-vid{aspect-ratio:16/9;border-radius:12px;background:var(--sf2);border:1px solid var(--ln);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--mu);padding:8px;text-align:center}
.cs-admin .adm-play{width:46px;height:46px;border-radius:50%;background:var(--ac);color:var(--oni);display:grid;place-items:center}
@media (max-width:600px){.cs-admin .adm-dr{width:100%}
}


/* Payment flows (Plans + PaymentResult). Uses app.css tokens only, so light and dark both work. */.cs-pay .ib .pick{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;cursor:pointer;border:1px solid var(--ln);background:var(--sf2);border-radius:var(--r);padding:14px 16px;width:100%}
.cs-pay .ib .pick:hover{border-color:var(--ln2)}
.cs-pay .ib .pick.on{border:2px solid var(--ac);background:var(--acs);padding:13px 15px}
.cs-pay .ib .pick .amt{font-size:22px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}
.cs-pay .ib .inp.bad{border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
.cs-pay .ib .inp.good{border-color:var(--ok)}
.cs-pay .ib .ferr{font-size:11.5px;font-weight:700;color:var(--ac)}
.cs-pay .ib .fok{font-size:11.5px;font-weight:700;color:var(--ok)}
.cs-pay .ib .tot{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--sf2);border:1px solid var(--ln)}
.cs-pay .ib .tot b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.cs-pay .ib .neg{color:var(--wa)}
.cs-pay .ib .pos{color:var(--ok)}
.cs-pay .ib .spin{width:36px;height:36px;border-radius:50%;border:3px solid var(--ln2);border-top-color:var(--ac);animation:ibspin .9s linear infinite;flex:none}
@keyframes ibspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cs-pay .ib .spin{animation:none;border-top-color:var(--ac)}
}
.cs-pay .ib .stico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex:none}
.cs-pay .ib .stico .i{width:30px;height:30px}
.cs-pay .ib .stico.ok{background:var(--oks);color:var(--ok)}
.cs-pay .ib .stico.no{background:var(--acs);color:var(--ac)}
.cs-pay .ib .stico.wa{background:var(--was);color:var(--wa)}
.cs-pay .ib .stico.in{background:var(--ins);color:var(--in)}
.cs-pay .ib .qr{width:148px;height:148px;flex:none;border-radius:12px;background:#fff;border:1px solid var(--ln);padding:10px;color:#15151C}
.cs-pay .ib .qr svg{display:block;width:100%;height:100%}
.cs-pay .ib .addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;word-break:break-all;direction:ltr;unicode-bidi:isolate;text-align:left}
.cs-pay .ib .bigamt{font-size:26px;font-weight:800;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.cs-pay .ib .chain{display:flex;flex-direction:column;gap:0;border:1px solid var(--ln);border-radius:12px;padding:4px 14px;background:var(--sf2)}
.cs-pay .ib .narrow{max-width:760px;width:100%;margin-inline:auto}
.cs-pay .ib .rs{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.cs-pay .ib .rs{grid-template-columns:1fr}
}
.cs-pay .ib .lnk{color:var(--ac);font-weight:700;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;font-size:inherit}


/* افزوده‌های رابط React (خارج از بوم) */
.ib .nav .navbtn{display:flex;align-items:center;gap:10px;padding:0 10px;min-height:38px;border-radius:9px;color:var(--mu);font-weight:500;font-size:13.5px;background:none;border:0;width:100%;cursor:pointer;font:inherit;text-align:start}
.ib .nav .navbtn:hover{background:var(--sf2);color:var(--ink)}
.ib-toasts{position:fixed;inset-inline:0;bottom:18px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:9999;pointer-events:none;font-family:Vazirmatn,Tahoma,sans-serif}
.ib-toast{background:#14151a;color:#fff;border-radius:10px;padding:10px 16px;font-size:13.5px;max-width:min(92vw,520px);box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:auto}
.ib-toast.err{background:#B42318}
.ib .spa-load{display:flex;align-items:center;justify-content:center;min-height:40vh;color:var(--mu)}
.i-pause{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E")}
img.mimg,video.mimg{display:block;max-width:240px;max-height:300px;border-radius:12px}
.i-up{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M7 8l5-5 5 5M4 21h16'/%3E%3C/svg%3E")}
.phone .bub.mu{opacity:.55}
button.tog{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:start;min-height:0}
button.tog:disabled{opacity:.55;cursor:not-allowed}
.i-hash{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E")}
.i-mail{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.fm-cur{outline:2px solid var(--vi);outline-offset:2px}
.cs-direct .dr-side{min-width:0;max-width:100%}.cs-direct .dr-side .phone{max-width:100%}

/* انگلیسی (چپ‌به‌راست): پیکان‌های جهت‌دار آینه شوند */
[dir="ltr"] .ib .i-left, [dir="ltr"] .ib .i-right, [dir="ltr"] .ib .i-back, [dir="ltr"] .ib .i-next { transform: scaleX(-1); }