@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── СВЕТЛАЯ ТЕМА — по умолчанию ── */
:root{
  --bg:#f4f5f7; --bg2:#fff; --panel:#fff; --panel2:#fafbfc;
  --line:rgba(16,22,32,.09); --line2:rgba(16,22,32,.16);
  --tx:#111722; --tx2:#525c6b; --tx3:#8b95a3;
  --gold:#a8791c; --gold2:#8a6215; --goldsoft:rgba(196,146,32,.11);
  --grn:#17864f; --grnsoft:rgba(23,134,79,.1);
  --blu:#2563d4; --blusoft:rgba(37,99,212,.09);
  --red:#c9463a;
  --fill1:rgba(16,22,32,.032); --fill2:rgba(16,22,32,.055); --fill3:rgba(16,22,32,.085);
  --avbg:linear-gradient(150deg,#e7eaef,#d8dde5); --avtx:#4a5563; --avline:rgba(16,22,32,.1);
  --topbg:rgba(244,245,247,.88);
  --barbg:linear-gradient(180deg,#aab4c2,#8d99a9);
  --toastbg:rgba(255,255,255,.98); --toasttx:#111722;
  --glow1:rgba(196,146,32,.11); --glow2:rgba(37,99,212,.05);
  --cardshadow:0 1px 2px rgba(16,22,32,.05), 0 8px 24px -14px rgba(16,22,32,.14);
  --r:14px; --r2:10px;
}
/* ── ТЁМНАЯ ТЕМА ── */
:root[data-theme="dark"]{
  --bg:#0d1014; --bg2:#12161c; --panel:#161b23; --panel2:#1b2129;
  --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.13);
  --tx:#e9edf3; --tx2:#a3adbb; --tx3:#6c7787;
  --gold:#e0b23c; --gold2:#c1912a; --goldsoft:rgba(224,178,60,.13);
  --grn:#4ec98a; --grnsoft:rgba(78,201,138,.13);
  --blu:#5b9cf8; --blusoft:rgba(91,156,248,.13);
  --red:#ef6a5e;
  --fill1:rgba(255,255,255,.03); --fill2:rgba(255,255,255,.06); --fill3:rgba(255,255,255,.09);
  --avbg:linear-gradient(150deg,#2f3947,#212831); --avtx:#cfd7e2; --avline:rgba(255,255,255,.13);
  --topbg:rgba(13,16,20,.86);
  --barbg:linear-gradient(180deg,#4a5566,#2b333e);
  --toastbg:rgba(22,27,35,.97); --toasttx:#e9edf3;
  --glow1:rgba(224,178,60,.075); --glow2:rgba(91,156,248,.05);
  --cardshadow:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{overflow-x:clip}
body{
  background:var(--bg); color:var(--tx);
  font:15px/1.55 'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 500px at 78% -8%, var(--glow1), transparent 65%),
    radial-gradient(700px 420px at 8% 100%, var(--glow2), transparent 65%);
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:rgba(224,178,60,.3)}

/* ─── scrollbars ─── */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--fill3);border-radius:9px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--line2);background-clip:content-box}

/* ══════════ TOPBAR ══════════ */
.top{
  position:sticky; top:0; z-index:50; height:60px;
  display:flex; align-items:center; gap:18px; padding:0 20px;
  background:var(--topbg); backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand-mk{width:34px;height:34px;border-radius:10px;background:linear-gradient(150deg,#e0b23c,#a5721b);display:grid;place-items:center;box-shadow:0 6px 18px -6px rgba(224,178,60,.6)}
.brand-mk svg{width:19px;height:19px}
.brand-t b{display:block;font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.brand-t span{display:block;font-size:11px;color:var(--tx3);font-weight:600;letter-spacing:.01em}
.top-sep{width:1px;height:26px;background:var(--line2)}
.demo-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  padding:6px 11px;border-radius:99px;background:var(--goldsoft);
  border:1px solid rgba(224,178,60,.32); color:var(--gold); letter-spacing:.02em;
}
.db-s{display:none}
.demo-badge i{width:6px;height:6px;border-radius:99px;background:var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.top-spacer{flex:1}
.top-search{
  display:flex;align-items:center;gap:9px;height:36px;padding:0 13px;min-width:230px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--tx3);font-size:13.5px;
  transition:.18s;
}
.top-search:hover{border-color:var(--line2)}
.top-search kbd{margin-left:auto;font:600 10.5px/1 'Manrope';padding:4px 6px;background:var(--fill2);border-radius:5px;color:var(--tx3)}
.top-user{display:flex;align-items:center;gap:10px}
.av{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:12.5px;background:var(--avbg);border:1px solid var(--avline);color:var(--tx)}
.top-user-t b{display:block;font-size:12.5px;font-weight:700;line-height:1.2}
.top-user-t span{display:block;font-size:10.5px;color:var(--tx3);font-weight:600}

/* ══════════ LAYOUT ══════════ */
.wrap{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - 60px);position:relative;z-index:1}
.side{border-right:1px solid var(--line);padding:16px 12px;position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto}
.side-lbl{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);padding:0 10px;margin:14px 0 7px}
.side-lbl:first-child{margin-top:0}
.nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--tx2);transition:.15s;width:100%;text-align:left}
.nav svg{width:16px;height:16px;flex:0 0 16px;opacity:.75}
.nav:hover{background:var(--fill1);color:var(--tx)}
.nav.on{background:var(--goldsoft);color:var(--gold);font-weight:700}
.nav.on svg{opacity:1}
.nav-c{margin-left:auto;font-size:11px;font-weight:800;padding:2px 7px;border-radius:99px;background:var(--fill3);color:var(--tx2)}
.nav.on .nav-c{background:rgba(224,178,60,.22);color:var(--gold)}
.nav-c.hot{background:rgba(239,106,94,.18);color:#f08d83}

.side-note{margin-top:18px;padding:13px;border-radius:12px;background:linear-gradient(160deg,rgba(224,178,60,.09),rgba(224,178,60,.02));border:1px solid rgba(224,178,60,.2)}
.side-note b{display:block;font-size:12px;font-weight:800;color:var(--gold);margin-bottom:5px}
.side-note p{font-size:11.5px;line-height:1.5;color:var(--tx2)}

.main{padding:26px 30px 60px;max-width:1240px;min-width:0}

/* ══════════ HEADINGS ══════════ */
.h-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.h1{font-size:23px;font-weight:800;letter-spacing:-.022em;line-height:1.2}
.h-sub{font-size:13.5px;color:var(--tx2);margin-top:5px;max-width:640px}
.h-act{margin-left:auto;display:flex;gap:9px;flex:0 0 auto}

.btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:10px;font-size:13.5px;font-weight:700;transition:.16s;border:1px solid var(--line2);color:var(--tx2);background:var(--panel)}
.btn:hover{background:var(--panel2);color:var(--tx);border-color:var(--line2)}
.btn svg{width:15px;height:15px}
.btn-p{background:linear-gradient(160deg,#e8bb46,#c1912a);color:#1a1305;border-color:transparent;box-shadow:0 10px 24px -12px rgba(224,178,60,.75)}
.btn-p:hover{background:linear-gradient(160deg,#f0c559,#cf9d2f);color:#1a1305}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ══════════ KPI ══════════ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.kpi{padding:15px 16px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden;box-shadow:var(--cardshadow)}
.kpi::after{content:'';position:absolute;left:0;top:0;width:2px;height:100%;background:var(--gold);opacity:.55}
.kpi.g::after{background:var(--grn)}.kpi.b::after{background:var(--blu)}
.kpi-l{font-size:11.5px;font-weight:700;color:var(--tx3);letter-spacing:.01em;margin-bottom:7px}
.kpi-v{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.kpi-v small{font-size:14px;font-weight:700;color:var(--tx3);margin-left:3px}
.kpi-d{font-size:11.5px;color:var(--tx3);margin-top:7px;font-weight:600}
.kpi-d b{color:var(--grn)}

/* ══════════ TOPIC LIST ══════════ */
.filters{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.chip{height:32px;padding:0 13px;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--tx2);border:1px solid var(--line);background:var(--panel);transition:.15s}
.chip:hover{border-color:var(--line2);color:var(--tx)}
.chip.on{background:var(--fill3);border-color:var(--line2);color:var(--tx)}

.tlist{display:flex;flex-direction:column;gap:10px}
.topic{
  display:block;width:100%;text-align:left;padding:16px 18px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);transition:.18s;position:relative;overflow:hidden;box-shadow:var(--cardshadow);
}
.topic:hover{border-color:rgba(224,178,60,.4);background:var(--panel2);transform:translateY(-1px)}
.topic-top{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.tag{font-size:10.5px;font-weight:800;letter-spacing:.03em;padding:4px 9px;border-radius:6px;text-transform:uppercase}
.tag-new{background:rgba(239,106,94,.15);color:#f2867c}
.tag-ans{background:var(--grnsoft);color:var(--grn)}
.tag-auto{background:var(--blusoft);color:#7fb3fa}
.tag-cat{background:var(--fill2);color:var(--tx2);text-transform:none;letter-spacing:0;font-weight:700}
.topic-id{font-size:11px;font-weight:700;color:var(--tx3);font-variant-numeric:tabular-nums}
.topic-time{margin-left:auto;font-size:11.5px;color:var(--tx3);font-weight:600}
.topic-h{font-size:16px;font-weight:800;letter-spacing:-.015em;line-height:1.35;margin-bottom:8px}
.topic-s{font-size:13px;color:var(--tx2);line-height:1.5;margin-bottom:13px;max-width:820px}
.topic-bot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.faces{display:flex;align-items:center}
.face{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:800;background:var(--avbg);border:1.5px solid var(--panel);margin-left:-7px;color:var(--avtx)}
.face:first-child{margin-left:0}
.face.more{background:rgba(224,178,60,.16);color:var(--gold);border-color:var(--panel)}
.cnt{font-size:12.5px;font-weight:700;color:var(--tx2)}
.cnt b{color:var(--gold)}
.simbar{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--tx3)}
.simbar-t{width:56px;height:5px;border-radius:99px;background:var(--fill3);overflow:hidden}
.simbar-t i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold))}

/* ══════════ TOPIC DETAIL ══════════ */
.back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--tx3);margin-bottom:15px;transition:.15s}
.back:hover{color:var(--tx)}
.back svg{width:15px;height:15px}

.det{display:grid;grid-template-columns:1fr 400px;gap:18px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--cardshadow)}
.card-h{padding:14px 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card-h>svg{width:16px;height:16px;flex:0 0 16px;color:var(--tx3)}
.card-h b{font-size:13.5px;font-weight:800;letter-spacing:-.01em}
.card-h span{font-size:11.5px;color:var(--tx3);font-weight:600}
.card-b{padding:17px}

.ai-box{padding:15px 17px;border-radius:12px;background:linear-gradient(150deg,rgba(224,178,60,.09),rgba(224,178,60,.02));border:1px solid rgba(224,178,60,.22);margin-bottom:16px}
.ai-box-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.ai-box-h svg{width:14px;height:14px}
.ai-box p{font-size:13.5px;line-height:1.6;color:var(--tx)}

.mails{display:flex;flex-direction:column}
.mail{padding:14px 17px;border-bottom:1px solid var(--line);display:flex;gap:12px;transition:.15s}
.mail:last-child{border-bottom:0}
.mail:hover{background:var(--fill1)}
.mail-av{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;font-size:11.5px;font-weight:800;background:var(--avbg);color:var(--avtx);border:1px solid var(--avline)}
.mail-b{min-width:0;flex:1}
.mail-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.mail-n{font-size:13px;font-weight:800}
.mail-o{font-size:11.5px;color:var(--tx3);font-weight:600}
.mail-t{margin-left:auto;font-size:11px;color:var(--tx3);font-weight:600;font-variant-numeric:tabular-nums}
.mail-e{font-size:11px;color:var(--tx3);font-weight:600;margin-bottom:6px}
.mail-x{font-size:13.5px;line-height:1.55;color:var(--tx2);padding:9px 12px;background:var(--fill1);border-radius:9px;border-left:2px solid var(--line2)}

.ans-t{width:100%;min-height:190px;resize:vertical;padding:13px;border-radius:11px;background:var(--bg2);border:1px solid var(--line2);font-size:13.5px;line-height:1.6;outline:0;transition:.16s;color:var(--tx)}
.ans-t:focus{border-color:rgba(224,178,60,.5);box-shadow:0 0 0 3px rgba(224,178,60,.09)}
.ans-t::placeholder{color:var(--tx3)}
.hint{display:flex;gap:9px;padding:11px 13px;border-radius:10px;background:rgba(91,156,248,.07);border:1px solid rgba(91,156,248,.19);margin-top:12px}
.hint svg{width:15px;height:15px;flex:0 0 15px;margin-top:1px;color:var(--blu)}
.hint p{font-size:12px;line-height:1.5;color:var(--tx2)}
.hint b{color:var(--tx)}
.send-row{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.chk{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--tx2);cursor:pointer}
.chk input{accent-color:var(--gold);width:15px;height:15px}

.done{text-align:center;padding:34px 20px}
.done-i{width:56px;height:56px;margin:0 auto 15px;border-radius:18px;background:var(--grnsoft);border:1px solid rgba(78,201,138,.32);display:grid;place-items:center;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.done-i svg{width:26px;height:26px;color:var(--grn)}
.done b{display:block;font-size:16px;font-weight:800;margin-bottom:7px}
.done p{font-size:13px;color:var(--tx2);line-height:1.55;max-width:330px;margin:0 auto}

.answered-box{padding:15px 17px;border-radius:12px;background:var(--grnsoft);border:1px solid rgba(78,201,138,.24)}
.answered-box .who{font-size:11.5px;font-weight:700;color:var(--grn);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.answered-box .who svg{width:14px;height:14px}
.answered-box pre{font:400 13.5px/1.65 'Manrope';white-space:pre-wrap;color:var(--tx)}

/* ══════════ EMAIL PREVIEW ══════════ */
.envelope{border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:#fbfbfd;color:#14181f}
.env-h{padding:12px 15px;background:#eef0f4;border-bottom:1px solid #dfe2e8;font-size:11.5px;color:#5d6774;font-weight:600}
.env-h b{color:#14181f;font-weight:800}
.env-h div+div{margin-top:3px}
.env-b{padding:16px 15px;font-size:13px;line-height:1.65}
.env-b pre{font:400 13px/1.65 'Manrope';white-space:pre-wrap}
.env-sig{margin-top:14px;padding-top:12px;border-top:1px solid #e4e7ec;font-size:11.5px;color:#69737f}
.env-sig b{color:#14181f}

/* ══════════ FLOW / HOW ══════════ */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-bottom:24px}
.fstep{padding:16px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);position:relative;box-shadow:var(--cardshadow)}
.fstep-n{width:28px;height:28px;border-radius:9px;background:var(--goldsoft);border:1px solid rgba(224,178,60,.3);color:var(--gold);display:grid;place-items:center;font-size:12.5px;font-weight:800;margin-bottom:11px}
.fstep b{display:block;font-size:13.5px;font-weight:800;margin-bottom:6px;letter-spacing:-.01em}
.fstep p{font-size:12px;line-height:1.5;color:var(--tx2)}
.fstep::after{content:'';position:absolute;right:-8px;top:32px;width:11px;height:11px;border-top:1.5px solid var(--line2);border-right:1.5px solid var(--line2);transform:rotate(45deg);z-index:2}
.fstep:last-child::after{display:none}

/* ══════════ TABLES ══════════ */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);text-align:left;padding:11px 17px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 17px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:.15s}
.tbl tbody tr:hover{background:var(--fill1)}
.tbl .num{font-variant-numeric:tabular-nums;font-weight:700}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:99px;background:var(--fill2);color:var(--tx2)}

/* ══════════ CHART ══════════ */
.chart{display:flex;align-items:flex-end;gap:12px;height:186px;padding:0 4px}
.bar-w{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bars{width:100%;display:flex;gap:4px;align-items:flex-end;justify-content:center;height:100%}
.bar{width:26px;border-radius:5px 5px 2px 2px;background:var(--barbg);transition:.2s;animation:grow .7s cubic-bezier(.2,.9,.3,1) backwards}
.bar.g{background:linear-gradient(180deg,#e8bb46,#a5721b)}
@keyframes grow{from{height:0!important}}
.bar-w>span{font-size:11px;font-weight:700;color:var(--tx3)}
.bar-v{font-size:11.5px;font-weight:800;color:var(--tx2);font-variant-numeric:tabular-nums}
.bar-t{font-size:10.5px!important;font-weight:700!important;color:var(--gold)!important;background:var(--goldsoft);padding:2px 7px;border-radius:99px;border:1px solid rgba(224,178,60,.24)}
.legend{display:flex;gap:16px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.legend div{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--tx2)}
.legend i{width:10px;height:10px;border-radius:3px}

/* ══════════ MOBILE ══════════ */
.mob-nav{display:none}
@media(max-width:1080px){
  .det{grid-template-columns:1fr}
  .flow{grid-template-columns:repeat(2,1fr)}
  .fstep::after{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .wrap{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:18px 15px 80px}
  .top-search,.top-user-t,.top-sep{display:none}
  .top{gap:10px;padding:0 13px}
  .brand-t b{font-size:12.5px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand-t span{display:none}
  .brand-mk{width:30px;height:30px}
  .db-l{display:none} .db-s{display:inline}
  .demo-badge{padding:5px 9px;font-size:11px}
  .h-row{flex-direction:column;gap:12px}
  .h-act{margin-left:0;width:100%}
  .h-act .btn{flex:1;justify-content:center}
  .h1{font-size:19px}
  .mob-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;height:62px;
    background:var(--topbg);backdrop-filter:blur(18px);border-top:1px solid var(--line);
    padding:0 6px;width:100%;max-width:100%;
  }
  .mob-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:700;color:var(--tx3)}
  .mob-nav button svg{width:19px;height:19px}
  .mob-nav button.on{color:var(--gold)}
  .flow{grid-template-columns:1fr}
}
@media(max-width:520px){
  .kpis{grid-template-columns:1fr 1fr;gap:9px}
  .kpi-v{font-size:22px}
  .topic{padding:14px}
  .topic-h{font-size:14.5px}
  .simbar{margin-left:0;width:100%;margin-top:4px}
}

/* ══════════ ПОИСК В ШАПКЕ ══════════ */
.top-search svg{width:15px;height:15px;flex:0 0 15px;opacity:.7}
.top-search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:13.5px;font-weight:500;color:var(--tx)}
.top-search input::placeholder{color:var(--tx3)}
.top-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.top-search:focus-within{border-color:rgba(224,178,60,.45);background:var(--panel2)}
.sr{width:100%;text-align:left;cursor:pointer}
mark{background:rgba(224,178,60,.28);color:var(--tx);border-radius:3px;padding:0 2px}

/* ══════════ INBOX — счётчики ══════════ */
.counters{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:19px 22px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);margin-bottom:16px;box-shadow:var(--cardshadow)}
.ctr{display:flex;flex-direction:column;gap:3px;min-width:118px}
.ctr-v{font-size:31px;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;color:var(--tx3)}
.ctr:first-child .ctr-v{color:var(--tx)}
.ctr.on .ctr-v{color:var(--gold)}
.ctr-l{font-size:11.5px;font-weight:700;color:var(--tx3)}
.ctr-ar{color:var(--tx3);opacity:.5}
.ctr-ar svg{width:22px;height:22px;display:block}
.ctr-note{flex:1;min-width:220px;font-size:12.5px;line-height:1.5;color:var(--tx2);padding-left:18px;border-left:1px solid var(--line)}

/* сырое письмо + метка темы после разбора */
.mail.raw{position:relative;animation:mailIn .34s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(var(--i)*8ms)}
@keyframes mailIn{from{opacity:0;transform:translateY(7px)}}
.mail.raw .mail-x{transition:.3s}
.mail-tag{position:absolute;right:14px;top:50%;transform:translateY(-50%) scale(.8);opacity:0;transition:.3s cubic-bezier(.2,1.3,.4,1);
  display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:99px;background:var(--fill2);border:1px solid var(--line2);
  font-size:10.5px;font-weight:800;color:var(--c,var(--tx2));letter-spacing:.02em;pointer-events:none}
.mail-tag i{width:7px;height:7px;border-radius:99px;background:var(--c,currentColor)}
.mail.raw.tagged .mail-tag{opacity:1;transform:translateY(-50%) scale(1)}
.mail.raw.tagged{background:var(--fill1)}
.mail.raw.tagged .mail-b{padding-right:104px}
.mail.raw.tagged .mail-x{border-left-color:var(--c)}
[data-c="0"]{--c:#e0b23c}[data-c="1"]{--c:#5b9cf8}[data-c="2"]{--c:#4ec98a}
[data-c="3"]{--c:#c78ce0}[data-c="4"]{--c:#ef8f5e}[data-c="5"]{--c:#5ec9c1}
.mail.raw.tagged .mail-n,.mail.raw.tagged .mail-o,.mail.raw.tagged .mail-t{color:var(--tx2)}
.mail.raw .mail-n{color:var(--tx)}

/* группы после разбора */
.grp{border-radius:var(--r);background:var(--panel);border:1px solid var(--line);overflow:hidden;box-shadow:var(--cardshadow);
  animation:grpIn .42s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(var(--i)*70ms)}
@keyframes grpIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
.grp-h{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 18px;transition:.16s}
.grp-h:hover{background:var(--fill1)}
.grp-b{width:4px;align-self:stretch;border-radius:99px;background:var(--c);flex:0 0 4px;min-height:32px}
.grp-t{flex:1;min-width:0}
.grp-t b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.015em;line-height:1.35;color:var(--tx)}
.grp-t span{display:block;font-size:11.5px;font-weight:600;color:var(--tx3);margin-top:3px}
.grp-c{font-size:12px;font-weight:800;padding:5px 11px;border-radius:99px;background:var(--c);color:#12161d;flex:0 0 auto;white-space:nowrap}
.grp-s{font-size:11.5px;font-weight:700;color:var(--tx3);flex:0 0 auto;min-width:126px;text-align:right}
.grp-m{padding:0 18px 14px 35px;display:flex;flex-direction:column;gap:6px}
.grp-mi{display:flex;align-items:center;gap:9px;min-width:0}
.grp-mi-a{width:22px;height:22px;flex:0 0 22px;border-radius:7px;display:grid;place-items:center;font-size:9.5px;font-weight:800;
  background:var(--avbg);color:var(--avtx)}
.grp-mi-x{font-size:12.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* кнопка «вынести письмо» */
.mail{position:relative}
/* кнопка «вынести письмо» — в потоке под текстом письма */
.mail-split{margin-top:10px;height:29px;padding:0 11px;border-radius:9px;display:inline-flex;align-items:center;gap:7px;
  background:var(--fill2);border:1px solid var(--line2);color:var(--tx3);transition:.18s;
  font-size:11.5px;font-weight:700;white-space:nowrap;opacity:.62}
.mail-split svg{width:14px;height:14px;flex:0 0 14px}
.mail:hover .mail-split{opacity:1}
.mail-split:hover{color:var(--gold);border-color:rgba(168,121,28,.45);background:var(--goldsoft);opacity:1}
@media(max-width:860px){.mail-split{opacity:1}}

/* тост */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;max-width:min(92vw,520px);
  padding:13px 19px;border-radius:13px;background:var(--toastbg);border:1px solid var(--line2);
  box-shadow:0 24px 50px -20px rgba(16,22,32,.35);font-size:13.5px;font-weight:600;color:var(--toasttx);
  animation:toastIn .3s cubic-bezier(.2,1.3,.4,1)}
.toast b{color:var(--gold)}
.toast.out{opacity:0;transform:translateX(-50%) translateY(10px);transition:.35s}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:860px){
  .counters{gap:14px;padding:16px}
  .ctr{min-width:92px}
  .ctr-v{font-size:25px}
  .ctr-note{flex-basis:100%;padding-left:0;border-left:0;padding-top:12px;border-top:1px solid var(--line)}
  .grp-s{display:none}
  .grp-m{padding-left:24px}
  .mail.raw.tagged .mail-b{padding-right:0}
  .mail-tag{position:static;transform:none;margin-top:8px;align-self:flex-start}
  .mail.raw.tagged .mail-tag{transform:none}
  .mail.raw{flex-wrap:wrap}
  .mail-split{opacity:1}
  .toast{bottom:76px}
}

/* ══════════ ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ══════════ */
.theme-sw{display:flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:var(--fill2);
  border:1px solid var(--line);flex:0 0 auto}
.theme-sw-t{display:grid;place-items:center;width:30px;height:26px;border-radius:7px;color:var(--tx3);transition:.16s}
.theme-sw-t svg{width:15px;height:15px}
:root:not([data-theme="dark"]) .theme-sw-t[data-t="light"],
:root[data-theme="dark"] .theme-sw-t[data-t="dark"]{background:var(--panel);color:var(--gold);box-shadow:0 1px 3px rgba(16,22,32,.14)}
.theme-sw:hover .theme-sw-t{color:var(--tx2)}
:root:not([data-theme="dark"]) .theme-sw:hover .theme-sw-t[data-t="light"],
:root[data-theme="dark"] .theme-sw:hover .theme-sw-t[data-t="dark"]{color:var(--gold)}
@media(max-width:860px){.theme-sw{margin-left:auto}}

/* ══════════ ПОДСКАЗКА «С ЧЕГО НАЧАТЬ» + СБРОС ══════════ */
.hint-bar{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:var(--r);margin-bottom:14px;
  background:linear-gradient(150deg,var(--goldsoft),transparent);border:1px solid rgba(168,121,28,.28);
  animation:hintIn .5s cubic-bezier(.2,1.1,.4,1) .35s backwards}
:root[data-theme="dark"] .hint-bar{border-color:rgba(224,178,60,.3)}
@keyframes hintIn{from{opacity:0;transform:translateY(-8px)}}
.hint-bar-i{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;
  background:var(--goldsoft);border:1px solid rgba(168,121,28,.3);color:var(--gold)}
.hint-bar-i svg{width:16px;height:16px}
.hint-bar b{display:block;font-size:13.5px;font-weight:800;margin-bottom:4px}
.hint-bar span{display:block;font-size:13px;line-height:1.55;color:var(--tx2)}
.hint-bar-x{flex:0 0 auto;width:26px;height:26px;border-radius:8px;color:var(--tx3);font-size:13px;
  display:grid;place-items:center;transition:.15s}
.hint-bar-x:hover{background:var(--fill2);color:var(--tx)}

.btn-p.pulse{position:relative}
.btn-p.pulse::after{content:'';position:absolute;inset:-4px;border-radius:14px;border:2px solid var(--gold);
  opacity:0;animation:ring 2.2s ease-out infinite;pointer-events:none}
@keyframes ring{0%{opacity:.6;transform:scale(.97)}70%{opacity:0;transform:scale(1.06)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.btn-p.pulse::after{animation:none}}

.side-reset{display:flex;align-items:center;gap:8px;width:100%;margin-top:11px;padding:8px 10px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line2);font-size:12px;font-weight:700;color:var(--tx2);transition:.15s}
.side-reset svg{width:14px;height:14px;flex:0 0 14px}
.side-reset:hover{color:var(--gold);border-color:rgba(168,121,28,.45);background:var(--goldsoft)}

/* ── узкие телефоны: шапка и таб-бар не должны распирать страницу ── */
.mob-nav button{min-width:0}
.mob-nav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:430px){
  .top{gap:8px;padding:0 11px}
  .top-user{display:none}
  .brand-t b{max-width:118px}
  .theme-sw{margin-left:auto}
  .theme-sw-t{width:26px;height:24px}
  .demo-badge{padding:5px 8px;font-size:10.5px}
}
@media(max-width:360px){
  .brand-t b{max-width:92px}
  .demo-badge .db-s{display:none}
  .demo-badge{padding:5px;gap:0}
}