:root{
  --bg:#050d09; --bg2:#08150f; --bg3:#0c1d15;
  --card:rgba(14,34,24,.72); --card2:rgba(20,46,33,.6);
  --line:rgba(74,222,128,.13); --line2:rgba(74,222,128,.26);
  --text:#e8f8ee; --muted:#8db59d; --dim:#5d8370;
  --g:#22c55e; --g2:#4ade80; --g3:#86efac; --gd:#15803d; --gdd:#064e3b;
  --gold:#facc15; --gold2:#fde68a;
  --red:#f87171; --red2:#7f1d1d;
  --r:18px; --r2:12px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.8), 0 0 0 1px var(--line) inset;
  --glow:0 0 0 1px rgba(74,222,128,.35), 0 10px 40px -10px rgba(34,197,94,.55);
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Unbounded','Manrope',system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{font:15px/1.45 var(--font);font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--g2);text-decoration:none}
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(34,197,94,.16), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(6,95,70,.25), transparent 60%),
    linear-gradient(rgba(74,222,128,.035) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg, rgba(74,222,128,.035) 1px, transparent 1px) 0 0/34px 34px;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 60%,transparent 100%)}
#app{position:relative;z-index:1;min-height:100vh}

/* splash / spinner */
.splash{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:14px}
.splash img{filter:drop-shadow(0 10px 30px rgba(34,197,94,.45));animation:float 3s ease-in-out infinite}
.splash-t{font:700 18px var(--display);letter-spacing:.04em}
.spinner{width:26px;height:26px;border-radius:50%;border:3px solid rgba(74,222,128,.2);border-top-color:var(--g2);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-6px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@keyframes pulseGold{0%{box-shadow:0 0 0 0 rgba(250,204,21,.55)}70%{box-shadow:0 0 0 10px rgba(250,204,21,0)}100%{box-shadow:0 0 0 0 rgba(250,204,21,0)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* shell */
.shell{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.shell>div{min-width:0}
.side{display:none}
.main{padding:calc(14px + var(--safe-t)) 16px calc(96px + var(--safe-b));max-width:1100px;width:100%;margin:0 auto;animation:rise .35s ease both}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:38px;height:38px;filter:drop-shadow(0 4px 14px rgba(34,197,94,.4))}
.brand b{font:700 15px var(--display);letter-spacing:.03em;display:block}
.brand small{color:var(--muted);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}
.topbar .sp{flex:1}
.page-title{font:700 22px/1.2 var(--display);margin:4px 0 14px;letter-spacing:.01em}
.page-sub{color:var(--muted);margin:-8px 0 16px}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;
  padding:8px 6px calc(8px + var(--safe-b));background:rgba(5,13,9,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px;color:var(--dim);font-size:11px;font-weight:600;border:0;background:none;cursor:pointer;position:relative}
.tab svg{width:22px;height:22px}
.tab.on{color:var(--g2)}
.tab.on::before{content:"";position:absolute;top:-9px;width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--g2);box-shadow:0 0 12px var(--g2)}
.tab .badge{position:absolute;top:2px;right:calc(50% - 20px)}

@media (min-width:900px){
  .shell{grid-template-columns:250px minmax(0,1fr)}
  .side{display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;padding:22px 14px;border-right:1px solid var(--line);background:rgba(5,13,9,.55);backdrop-filter:blur(10px)}
  .side .brand{padding:0 8px 18px}
  .side .brand small{max-width:170px}
  .side .tab{flex:0;flex-direction:row;gap:12px;font-size:14px;padding:11px 14px;justify-content:flex-start;color:var(--muted)}
  .side .tab:hover{background:rgba(74,222,128,.06);color:var(--text)}
  .side .tab.on{background:linear-gradient(90deg,rgba(34,197,94,.18),rgba(34,197,94,.03));color:var(--g3)}
  .side .tab.on::before{top:10px;bottom:10px;left:0;width:3px;height:auto;border-radius:0 3px 3px 0}
  .side .tab .badge{position:static;margin-left:auto}
  .side .foot{margin-top:auto;padding:10px;color:var(--dim);font-size:12px}
  .tabbar{display:none}
  .main{padding:28px 32px 48px}
  .topbar .brand{display:none}
}

/* cards & grid */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card+.card,.card+.sec,.sec+.card{margin-top:14px}
.card h3{margin:0 0 12px;font:700 13px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.card h3 .sp{flex:1}
.sec{margin-top:22px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cols{display:grid;gap:14px}
@media (min-width:1000px){.cols{grid-template-columns:1.15fr .85fr;align-items:start}.cols>.card+.card{margin-top:0}}

.kpi{background:var(--card);border-radius:var(--r2);box-shadow:var(--shadow);padding:13px 14px;min-width:0}
.kpi .l{color:var(--muted);font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.kpi .l svg{width:15px;height:15px;color:var(--g2)}
.kpi .v{font:700 22px/1.2 var(--display);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .s{color:var(--dim);font-size:12px;margin-top:2px}
.kpi.gold .l svg{color:var(--gold)}

/* hero status */
.hero{position:relative;overflow:hidden;padding:20px 18px 18px}
.hero::after{content:"";position:absolute;inset:-40% -20% auto auto;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.22),transparent 65%);pointer-events:none}
.hero.title::after{background:radial-gradient(circle,rgba(250,204,21,.18),transparent 65%)}
.hero.offline::after{background:radial-gradient(circle,rgba(148,163,184,.08),transparent 65%)}
.hero-in{display:flex;gap:18px;align-items:center;position:relative;z-index:1}
.ring{position:relative;width:132px;height:132px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .t{font:700 21px/1 var(--display);letter-spacing:.02em}
.ring .u{font-size:11px;color:var(--muted);margin-top:5px;font-weight:600}
.hero-txt{min-width:0}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(148,163,184,.12);color:#cbd5e1}
.pill i{width:8px;height:8px;border-radius:50%;background:#64748b}
.pill.online{background:rgba(34,197,94,.14);color:var(--g3)}
.pill.online i{background:var(--g2);animation:pulse 1.8s infinite}
.pill.title{background:rgba(250,204,21,.13);color:var(--gold2)}
.pill.title i{background:var(--gold);animation:pulseGold 1.8s infinite}
.hero h2{font:700 20px/1.25 var(--display);margin:10px 0 4px}
.hero p{margin:0;color:var(--muted);font-size:13px}
.hero .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13px;color:var(--muted)}
.hero .meta b{color:var(--text)}
.actions{display:grid;gap:10px;margin-top:18px;position:relative;z-index:1}
.actions.two{grid-template-columns:1fr 1fr}
@media (max-width:380px){.hero-in{flex-direction:column;text-align:center}.hero .meta{justify-content:center}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:14px;padding:12px 16px;font-weight:700;font-size:15px;cursor:pointer;
  background:var(--card2);color:var(--text);box-shadow:0 0 0 1px var(--line2) inset;transition:transform .12s ease,box-shadow .2s,background .2s,opacity .2s;user-select:none;white-space:nowrap}
.btn:hover{box-shadow:0 0 0 1px rgba(74,222,128,.45) inset}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn svg{width:19px;height:19px;flex:none}
.btn.big{padding:17px 18px;font-size:16px;border-radius:16px}
.btn.pri{background:linear-gradient(135deg,#4ade80,#16a34a 55%,#15803d);color:#03190c;box-shadow:var(--glow)}
.btn.pri:hover{filter:brightness(1.06)}
.btn.gold{background:linear-gradient(135deg,#fde047,#eab308);color:#2a1d00;box-shadow:0 0 0 1px rgba(250,204,21,.4),0 10px 34px -10px rgba(234,179,8,.6)}
.btn.danger{background:rgba(127,29,29,.28);color:#fecaca;box-shadow:0 0 0 1px rgba(248,113,113,.35) inset}
.btn.ghost{background:transparent}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:11px}
.btn.sm svg{width:16px;height:16px}
.btn.icon{padding:9px;border-radius:12px}
.btn.block{width:100%}
.btn .spinner{width:18px;height:18px;border-width:2px}

/* forms */
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:7px;letter-spacing:.02em}
.input,select.input,textarea.input{width:100%;padding:13px 14px;border-radius:13px;border:1px solid var(--line2);background:rgba(3,10,6,.55);outline:none;transition:border .2s, box-shadow .2s;font-size:16px}
.input:focus{border-color:var(--g2);box-shadow:0 0 0 4px rgba(74,222,128,.12)}
textarea.input{min-height:84px;resize:vertical}
.input::placeholder{color:var(--dim)}
.row{display:flex;gap:10px;align-items:center}
.row>.grow{flex:1;min-width:0}
.frm-grid{display:grid;grid-template-columns:90px 1fr;gap:10px}
.frm-grid .full{grid-column:1/-1}
.hint{font-size:12px;color:var(--dim);margin-top:6px}
.warn{margin-top:8px;font-size:13px;color:var(--gold2);background:rgba(250,204,21,.08);border:1px solid rgba(250,204,21,.25);padding:9px 12px;border-radius:11px;display:flex;gap:8px;align-items:flex-start}
.preview{margin:4px 0 16px;padding:12px 14px;border-radius:13px;background:rgba(34,197,94,.07);border:1px dashed var(--line2);font:600 14px var(--display);letter-spacing:.01em;word-break:break-word}
.preview small{display:block;font:600 11px var(--font);color:var(--dim);margin-bottom:4px;letter-spacing:.05em;text-transform:uppercase}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;border:1px solid var(--line2);background:rgba(3,10,6,.4);font-weight:700;font-size:13px;cursor:pointer;color:var(--muted);transition:.15s}
.chip:hover{color:var(--text)}
.chip.on{background:rgba(34,197,94,.16);border-color:var(--g2);color:var(--g3)}
.chip.red.on{background:rgba(248,113,113,.14);border-color:var(--red);color:#fecaca}
.chip.gold.on{background:rgba(250,204,21,.12);border-color:var(--gold);color:var(--gold2)}

.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(3,10,6,.5);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1 0 auto;border:0;background:none;padding:8px 12px;border-radius:10px;color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.seg button.on{background:linear-gradient(135deg,rgba(74,222,128,.25),rgba(21,128,61,.25));color:var(--g3);box-shadow:0 0 0 1px rgba(74,222,128,.35) inset}

.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;background:rgba(148,163,184,.12);color:#cbd5e1;white-space:nowrap}
.tag.red{background:rgba(248,113,113,.14);color:#fca5a5}
.tag.newbie{background:rgba(34,197,94,.14);color:var(--g3)}
.tag.return{background:rgba(56,189,248,.12);color:#7dd3fc}
.tag.role{background:rgba(34,197,94,.12);color:var(--g3)}
.tag.r2{background:rgba(250,204,21,.12);color:var(--gold2)}
.tag.r3{background:rgba(251,146,60,.13);color:#fdba74}
.tag.r4{background:linear-gradient(135deg,rgba(74,222,128,.25),rgba(250,204,21,.2));color:#ecfccb}
.tag.r0{background:rgba(148,163,184,.12);color:#cbd5e1}
.tag.r-1{background:rgba(248,113,113,.14);color:#fca5a5}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:inline-grid;place-items:center}

/* lists */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:12px 2px;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li .ava{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;font:700 14px var(--display);background:linear-gradient(135deg,rgba(74,222,128,.22),rgba(6,78,59,.5));color:var(--g3);position:relative}
.li .ava .dot{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg2);background:#475569}
.dot.online{background:var(--g2)!important}
.dot.title{background:var(--gold)!important}
.li .b{flex:1;min-width:0}
.li .n{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .m{color:var(--muted);font-size:12.5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:2px}
.li .r{text-align:right;font-size:13px;color:var(--muted);flex:none}
.li .r b{display:block;color:var(--text);font:700 14px var(--display)}
.li.click{cursor:pointer;border-radius:12px;padding-left:8px;padding-right:8px;margin:0 -8px}
.li.click:hover{background:rgba(74,222,128,.05)}
.empty{text-align:center;padding:26px 10px;color:var(--dim)}
.empty svg{width:34px;height:34px;color:var(--line2);display:block;margin:0 auto 8px}

/* table */
.tbl-wrap{overflow-x:auto;margin:0 -16px;padding:0 16px}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.tbl th{text-align:left;font-size:11px;color:var(--dim);font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;cursor:pointer;white-space:nowrap;user-select:none}
.tbl th.on{color:var(--g2)}
.tbl td{padding:11px 10px;border-top:1px solid var(--line);white-space:nowrap}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:rgba(74,222,128,.04)}
.tbl .who{display:flex;align-items:center;gap:9px;font-weight:700}
.tbl .num{font-family:var(--display);font-weight:600;font-size:13px}
.bar{position:relative;height:7px;border-radius:5px;background:rgba(74,222,128,.1);overflow:hidden;min-width:70px}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:linear-gradient(90deg,var(--gd),var(--g2))}
.bar.gold i{background:linear-gradient(90deg,#a16207,var(--gold))}
.pctcell{display:flex;align-items:center;gap:8px}
.pctcell .num{width:44px;text-align:right}
.rankn{width:22px;color:var(--dim);font:700 12px var(--display)}
.rankn.top{color:var(--gold)}

/* chart */
.chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:6px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-width:0}
.chart .stk{flex:1;width:100%;max-width:30px;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.chart .g{background:linear-gradient(180deg,var(--g2),var(--gd));border-radius:6px 6px 3px 3px;min-height:2px;position:relative}
.chart .ti{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,var(--gold),#a16207);border-radius:3px;opacity:.95}
.chart .d{font-size:10px;color:var(--dim);font-weight:700}
.chart .col.today .d{color:var(--g2)}
.chart .col:hover .g{filter:brightness(1.2)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--g2)}
.legend i.gold{background:var(--gold)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login .card{max-width:420px;width:100%;text-align:center;padding:30px 24px}
.login img.logo{width:92px;height:92px;filter:drop-shadow(0 12px 30px rgba(34,197,94,.45));animation:float 3s ease-in-out infinite}
.login h1{font:800 24px var(--display);margin:14px 0 6px;letter-spacing:.02em}
.login p{color:var(--muted);margin:0 0 22px}
.qr{margin:18px auto 4px;width:184px;height:184px;padding:12px;border-radius:16px;background:#e8f8ee;display:grid;place-items:center}
.qr img,.qr canvas{width:160px!important;height:160px!important}
.steps{text-align:left;margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:13.5px;color:var(--muted)}
.steps li{display:flex;gap:10px}
.steps b{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;background:rgba(34,197,94,.15);color:var(--g2);font-size:12px}

/* modal */
.modal-bg{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.modal{width:100%;max-width:480px;background:linear-gradient(180deg,#0d2318,#081610);border-radius:22px 22px 0 0;box-shadow:0 0 0 1px var(--line2);padding:20px 18px calc(20px + var(--safe-b));animation:up .25s cubic-bezier(.2,.9,.3,1.1);max-height:92vh;overflow:auto}
.modal h3{margin:0 0 4px;font:700 18px var(--display)}
.modal .sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.modal .grab{width:40px;height:4px;border-radius:2px;background:var(--line2);margin:-8px auto 14px}
@media (min-width:700px){.modal-bg{align-items:center}.modal{border-radius:22px}}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:0}}

/* toasts */
#toasts{position:fixed;left:50%;transform:translateX(-50%);top:calc(14px + var(--safe-t));z-index:80;display:flex;flex-direction:column;gap:8px;width:min(92vw,420px);pointer-events:none}
.toast{background:rgba(10,30,20,.96);border:1px solid var(--line2);box-shadow:0 14px 40px -10px rgba(0,0,0,.7);padding:12px 14px;border-radius:14px;font-weight:600;font-size:14px;display:flex;gap:10px;align-items:center;animation:up .25s}
.toast svg{width:18px;height:18px;flex:none;color:var(--g2)}
.toast.err{border-color:rgba(248,113,113,.4)}
.toast.err svg{color:var(--red)}
.toast.warn svg{color:var(--gold)}

/* misc */
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.mt{margin-top:14px}
.mb{margin-bottom:14px}
.right{margin-left:auto}
.flex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mono{font-family:var(--display);font-weight:600}
.nowrap{white-space:nowrap}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gold-t{color:var(--gold)}
.green-t{color:var(--g2)}
.prof{display:flex;gap:14px;align-items:center}
.prof .ava{width:58px;height:58px;border-radius:16px;font-size:20px}
.install{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,rgba(34,197,94,.16),rgba(6,78,59,.3));border-radius:var(--r);padding:14px 16px;box-shadow:0 0 0 1px var(--line2) inset}
.install svg{width:28px;height:28px;color:var(--g2);flex:none}
.install .b{flex:1;font-size:13px;color:var(--muted)}
.install .b b{display:block;color:var(--text);font-size:14px}
.search{position:relative}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--dim)}
.search .input{padding-left:40px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .seg{flex:1 1 auto}
.daterange{display:flex;gap:8px;align-items:center;margin-top:10px}
.daterange .input{padding:9px 10px;font-size:14px}
.note{font-size:12.5px;color:var(--muted);margin-top:4px;white-space:normal}
.sess{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px}
.sess:first-child{border-top:0}
.sess .x{color:var(--dim);font-size:12px}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--g2);margin-right:6px;animation:pulse 1.8s infinite}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.ver{font-size:11px;color:var(--dim);text-align:center;margin-top:20px}
.card h3 svg{width:16px;height:16px;flex:none;color:var(--g2)}
.card h3 .btn{text-transform:none;letter-spacing:0;font-family:var(--font);font-size:12.5px}
.card h3 .btn svg{color:inherit}
a.li,a.li:visited{color:inherit}
.tag svg{width:12px;height:12px}
.toolbar .seg{min-width:0;max-width:100%}
.li .b,.li .n{min-width:0}
.toolbar>*{min-width:0;max-width:100%}

/* ---------- публичная анкета ---------- */
.ap-wrap{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:calc(28px + var(--safe-t)) 16px calc(40px + var(--safe-b));animation:rise .35s ease both}
.ap-head{text-align:center;margin-bottom:22px}
.ap-logo{width:76px;height:76px;filter:drop-shadow(0 12px 30px rgba(34,197,94,.45));animation:float 3s ease-in-out infinite}
.ap-kicker{margin-top:10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--g2)}
.ap-head h1{font:800 26px/1.2 var(--display);margin:8px 0 8px;letter-spacing:.01em}
.ap-head p{color:var(--muted);margin:0 auto;max-width:460px}
.ap-sec{padding:18px}
.ap-sec+.ap-sec{margin-top:14px}
.ap-sec-h{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ap-sec-h b{display:block;font:700 15px var(--display)}
.ap-sec-h small{color:var(--muted);font-size:12.5px}
.ap-badge{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font:800 13px var(--display);letter-spacing:.04em;
  background:linear-gradient(135deg,#4ade80,#15803d);color:#03190c;box-shadow:var(--glow)}
.ap-badge.ooc{background:linear-gradient(135deg,rgba(74,222,128,.18),rgba(6,78,59,.5));color:var(--g3);box-shadow:0 0 0 1px var(--line2) inset}
.ap-field>span{display:flex!important;align-items:center;gap:8px;font-size:13px!important;color:var(--text)!important}
.ap-n{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:rgba(34,197,94,.15);color:var(--g2);font-size:11px;flex:none}
.ap-field.bad .input{border-color:var(--red);box-shadow:0 0 0 4px rgba(248,113,113,.12)}
.ap-field.bad>span{color:#fecaca!important}
.ap-count{text-align:right;font-size:11px;color:var(--dim);margin-top:4px}
.ap-submit{margin-top:18px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ap-center{text-align:center;padding:28px 22px}
.ap-center>svg{width:40px;height:40px;color:var(--gold);margin-bottom:8px}
.ap-center h2,.ap-status h2{font:700 19px var(--display);margin:6px 0 8px}
.ap-center p,.ap-status p{color:var(--muted);margin:0 0 18px}
.ap-center-t{text-align:center}
.ap-closed>svg{color:var(--muted)}
.ap-check{width:74px;height:74px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#4ade80,#15803d);box-shadow:var(--glow);animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.ap-check svg{width:38px;height:38px;color:#03190c;stroke-width:3}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.ap-status{text-align:center;padding:24px 20px}
.ap-big{font-size:46px;margin:6px 0 2px}
.ap-steps{display:flex;justify-content:space-between;position:relative;margin:0 4px 22px}
.ap-steps::before{content:"";position:absolute;left:12%;right:12%;top:15px;height:2px;background:var(--line2)}
.ap-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;font-size:11.5px;font-weight:700;color:var(--dim)}
.ap-step i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:var(--bg3);box-shadow:0 0 0 2px var(--line2);font:700 12px var(--display)}
.ap-step i svg{width:16px;height:16px;stroke-width:3}
.ap-step.done{color:var(--g3)}
.ap-step.done i{background:var(--g);color:#03190c;box-shadow:none}
.ap-step.cur{color:var(--text)}
.ap-step.cur i{box-shadow:0 0 0 2px var(--g2);color:var(--g2);animation:pulse 1.8s infinite}
.ap-step.bad i{background:var(--red);color:#fff;box-shadow:none;animation:none}
.ap-status.call .ap-big{animation:float 2s ease-in-out infinite}

/* ---------- v1.1: графики, анкеты ---------- */
.red-t{color:var(--red)}
.subnav{margin-bottom:16px}
.h3-note{font:500 11.5px var(--font);text-transform:none;letter-spacing:0;color:var(--dim)}
.ch{width:100%;display:block;overflow:visible}
.ch-grid{stroke:rgba(74,222,128,.09);stroke-width:1}
.ch-yl,.ch-xl{fill:var(--dim);font:600 10.5px var(--font)}
.ch-col:hover rect[fill]:not([fill=transparent]),.ch-col:active rect[fill]:not([fill=transparent]){filter:brightness(1.25)}
.ch-col rect[fill=transparent]{cursor:crosshair}
.ch-hover{fill:transparent;cursor:crosshair}
.ch-hover:hover{fill:rgba(74,222,128,.06)}
.legend.wrap{flex-wrap:wrap;gap:8px 14px}
#tip{position:fixed;z-index:90;display:none;pointer-events:none;max-width:280px;padding:8px 11px;border-radius:10px;background:rgba(6,20,13,.97);
  border:1px solid var(--line2);box-shadow:0 12px 30px -8px rgba(0,0,0,.8);font:600 12.5px/1.35 var(--font);color:var(--text)}

/* heatmap */
.hm{display:grid;grid-template-columns:26px repeat(24,minmax(0,1fr));gap:3px;align-items:center}
.hm-h{font:600 10px var(--font);color:var(--dim);text-align:left;height:14px}
.hm-d{font:700 11px var(--font);color:var(--muted)}
.hm-c{aspect-ratio:1/1;border-radius:3px;min-height:9px;cursor:crosshair;transition:transform .1s}
.hm-c:hover{transform:scale(1.25);outline:1px solid rgba(255,255,255,.4)}

/* полосы покрытия титула */
.cv{display:flex;flex-direction:column;gap:3px}
.cv-row{display:flex;align-items:center;gap:8px}
.cv-d{width:42px;flex:none;font:600 11px var(--font);color:var(--dim);text-align:right;white-space:nowrap}
.cv-d b{color:var(--muted)}
.cv-cells{flex:1;display:grid;grid-template-columns:repeat(96,minmax(0,1fr));height:15px;border-radius:4px;overflow:hidden;position:relative;background:rgba(3,10,6,.5)}
.cv-head .cv-cells{display:block;background:none;height:14px;overflow:visible}
.cv-head span{position:absolute;top:0;font:600 10px var(--font);color:var(--dim);transform:translateX(-2px)}
.cv-cells i{display:block;height:100%;cursor:crosshair}
.cv-cells i:nth-child(4n){box-shadow:1px 0 0 rgba(0,0,0,.25)}
.cv-cells i.e,.lg-e{background:rgba(148,163,184,.07)}
.cv-cells i.gap,.lg-gap{background:#dc2626}
.cv-cells i.t1,.lg-t1{background:#a16207}
.cv-cells i.t2,.lg-t2{background:#facc15}
.cv-cells i.f{background:transparent}
.cv-cells i:hover{filter:brightness(1.5);outline:1px solid #fff;position:relative;z-index:1}
.legend i.lg-e,.legend i.lg-gap,.legend i.lg-t1,.legend i.lg-t2{box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}

.funnel{display:grid;gap:9px;margin-bottom:10px}
.fn-row{display:grid;grid-template-columns:110px 1fr 40px;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.fn-row b{text-align:right;color:var(--text);font:700 14px var(--display)}
.fn-row .bar{height:10px}
.insights{display:grid;gap:10px;background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(6,78,59,.18))}
.ins{display:flex;gap:10px;font-size:13.5px;color:var(--muted);line-height:1.45}
.ins svg{width:18px;height:18px;flex:none;color:var(--g2);margin-top:1px}
.ins b{color:var(--text)}
.seg.mini{flex:0 0 auto;padding:3px;border-radius:11px}
.seg.mini button{padding:5px 10px;font:700 11.5px var(--font);text-transform:none;letter-spacing:0}

/* анкеты */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;user-select:none}
.switch input{display:none}
.switch span{width:44px;height:26px;border-radius:13px;background:rgba(248,113,113,.3);position:relative;transition:.2s;box-shadow:0 0 0 1px var(--line2) inset}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+span{background:var(--g)}
.switch input:checked+span::after{left:21px}
.share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px}
.share .b{flex:1 1 200px;min-width:0;font-size:13px;color:var(--muted)}
.share .b b{display:block;color:var(--text)}
.share .b span{display:block}
.app-card{border-left:3px solid transparent}
.app-card.new{border-left-color:var(--g2)}
.app-card.call{border-left-color:var(--gold)}
.app-card.rejected{opacity:.8}
.app-top{display:flex;gap:12px;align-items:center}
.app-top .ava{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;font:700 15px var(--display);background:linear-gradient(135deg,rgba(74,222,128,.22),rgba(6,78,59,.5));color:var(--g3)}
.app-top .b{min-width:0}
.app-top .n{font:700 15px var(--display)}
.app-top .m{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:12.5px;margin-top:3px}
.app-grid{display:grid;gap:12px;margin-top:14px}
@media (min-width:700px){.app-grid{grid-template-columns:1.3fr 1fr}}
.app-grid>div{background:rgba(3,10,6,.4);border:1px solid var(--line);border-radius:13px;padding:12px 14px}
.app-k{display:inline-block;font:800 10.5px var(--display);letter-spacing:.08em;padding:3px 8px;border-radius:6px;background:var(--g);color:#03190c;margin-bottom:8px}
.app-k.ooc{background:rgba(74,222,128,.15);color:var(--g3)}
.app-grid dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13.5px}
.app-grid dt{color:var(--dim);font-weight:600;white-space:nowrap}
.app-grid dd{margin:0;word-break:break-word;white-space:pre-wrap}
.app-who{margin-top:12px;font-size:13px;color:var(--muted)}
.app-who b{color:var(--text)}
.app-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.legend i.lg-e{background:rgba(148,163,184,.18)}
.legend i.lg-gap{background:#dc2626}
.legend i.lg-t1{background:#a16207}
.legend i.lg-t2{background:#facc15}
.cols{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.cols{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.card h3{flex-wrap:wrap;row-gap:4px}
@media (max-width:700px){.card h3 .h3-note{flex-basis:100%;order:9}.card h3 .h3-note+*{order:8}}
.li .r{max-width:40%}
.hero .meta svg{width:14px;height:14px;vertical-align:-2px}