/* © Элвис · Telegram: @ElvisOnlyDev · ofdev.net */
/* BubbleTeam design system ported: light-first with dark toggle, Inter Tight + JetBrains Mono,
   232px sidebar shell, compact cards, dot-statuses. Brand accent = GOLD (was pink). */
:root{
  --navy:#011435; --navy2:#0a1f4a; --brand-ink:#011435;
  --gold:#e0a008; --gold-deep:#a86d06; --gold-soft:#f2c14e; --gold-tint:rgba(224,160,8,.12);
  --gray-0:#fff; --gray-50:#fafafa; --gray-100:#f4f4f5; --gray-150:#ececef; --gray-200:#e4e4e7;
  --gray-300:#d4d4d8; --gray-400:#a1a1aa; --gray-500:#71717a; --gray-700:#3f3f46; --gray-900:#18181b;
  --background:#fafafa; --foreground:#18181b; --muted:#71717a; --muted-soft:#a1a1aa;
  --border:#e4e4e7; --border-strong:#d4d4d8; --card:#fff; --surface:#fff; --surface-2:#f4f4f5;
  --primary:var(--gold); --primary-fg:#1b1402;
  --success:#16a34a; --warn:#ea580c; --danger:#dc2626; --info:#2563eb; --neutral:#6b7280;
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px;
  --pad-card:19px;
  --shadow-card:0 1px 2px rgba(15,23,42,.05);
  --shadow-pop:0 8px 24px rgba(15,23,42,.12);
  --font:"Inter Tight",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
[data-theme="dark"]{
  --background:#0a0a0c; --foreground:#fafafa; --muted:#a1a1aa; --muted-soft:#71717a;
  --border:#26262b; --border-strong:#34343a; --card:#131316; --surface:#131316; --surface-2:#1c1c20;
  --gold:#f2c14e; --gold-deep:#f2c14e; --primary-fg:#1b1402; --gold-tint:rgba(242,193,78,.16); --brand-ink:#f4f5fa;
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --background:#0a0a0c; --foreground:#fafafa; --muted:#a1a1aa; --muted-soft:#71717a;
  --border:#26262b; --border-strong:#34343a; --card:#131316; --surface:#131316; --surface-2:#1c1c20;
  --gold:#f2c14e; --gold-deep:#f2c14e; --primary-fg:#1b1402; --gold-tint:rgba(242,193,78,.16); --brand-ink:#f4f5fa;
  color-scheme:dark;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
a{text-decoration:none;color:inherit}
body{background:var(--background);color:var(--foreground);font-family:var(--font);font-size:14px;line-height:1.5;font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.02em}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:13px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ic{width:16px;height:16px;flex-shrink:0}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--foreground) 15%,transparent);border-radius:999px;border:2px solid transparent;background-clip:content-box}


/* shell */
.shell{display:grid;grid-template-columns:234px 1fr;min-height:100%}
.sb{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;min-height:0}
.sb-brand{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--border)}
.sb-mark{width:38px;height:38px;flex-shrink:0}
.sb-name{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.sb-name b{font-weight:800;font-size:16px;letter-spacing:-0.03em;color:var(--brand-ink)}

.sb-name span{font-size:9px;font-weight:600;color:var(--muted-soft);letter-spacing:.18em;text-transform:uppercase;margin-top:3px}
.sb-sec{padding:14px 12px 5px;font-size:10px;font-weight:700;color:var(--muted-soft);text-transform:uppercase;letter-spacing:.14em}
.sb-nav{display:flex;flex-direction:column;gap:1px;padding:0 8px}
.sb-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);color:var(--muted);font-size:13px;font-weight:500;position:relative}
.sb-item .ic{opacity:.8}
.sb-item:hover{background:var(--surface-2);color:var(--foreground)}
.sb-item.active{background:var(--surface-2);color:var(--foreground);font-weight:600}
.sb-item.active::before{content:"";position:absolute;left:-8px;top:6px;bottom:6px;width:3px;background:var(--gold);border-radius:2px}
.sb-item.active .ic{color:var(--gold-deep);opacity:1}
.sb-item .count{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:600;background:var(--surface-2);color:var(--muted);padding:1px 6px;border-radius:var(--r-sm);min-width:20px;text-align:center}
.sb-item.active .count{background:var(--gold-tint);color:var(--gold-deep)}
.sb-user{margin-top:auto;padding:12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sb-user .av{flex-shrink:0}
.sb-user .nm{font-size:12.5px;font-weight:600;line-height:1.2}
.sb-user .rl{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}

.main{min-width:0;display:flex;flex-direction:column}
.tb{display:flex;align-items:center;gap:16px;padding:11px 24px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:30}
.tb-crumb{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);min-width:0}
.tb-crumb b{color:var(--foreground);font-weight:600}
.tb-crumb svg{width:13px;height:13px;opacity:.5}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.iconbtn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--r-md);display:grid;place-items:center;color:var(--muted);background:var(--surface)}
.iconbtn:hover{background:var(--surface-2);color:var(--foreground);border-color:var(--border-strong)}
.iconbtn .ic{width:15px;height:15px}
.content{padding:26px 30px 46px;max-width:1240px;width:100%}
.screen{display:none}
.screen.on{display:block;animation:f .18s ease}
@keyframes f{from{opacity:0}to{opacity:1}}

/* page header */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.ph-title{font-size:21px;font-weight:700;letter-spacing:-0.02em;line-height:1.1}
.ph-sub{font-size:12px;color:var(--muted);margin-top:5px}
.ph-sub .num{color:var(--foreground);font-weight:600;font-family:var(--mono)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;font-size:12.5px;font-weight:500;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--foreground);white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.btn .ic{width:14px;height:14px}
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--primary-fg);font-weight:700}
.btn-primary:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface-2);color:var(--foreground)}
.btn-danger{background:transparent;border-color:var(--border);color:var(--danger)}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent);border-color:var(--danger)}
.btn-sm{height:27px;padding:0 9px;font-size:11.5px}

/* cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.card-h{padding:13px var(--pad-card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title{font-size:13px;font-weight:600}
.card-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.card-body{padding:var(--pad-card)}
.card-body.flush{padding:0}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
@media(max-width:1023px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:479px){.kpi-grid{grid-template-columns:1fr}}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:15px var(--pad-card)}
.kpi-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:9px;display:flex;align-items:center;justify-content:space-between}
.kpi-label .ic{width:13px;height:13px;opacity:.6}
.kpi-val{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-0.03em;line-height:1}
.kpi-foot{margin-top:7px;font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center}
.kpi-delta{font-family:var(--mono);font-weight:600}.kpi-delta.up{color:var(--success)}.kpi-delta.acc{color:var(--gold-deep)}.kpi-delta.down{color:var(--danger)}

/* avatar */
.av{border-radius:var(--r-md);display:grid;place-items:center;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;font-size:11px;line-height:1;width:30px;height:30px}
.av.sm{width:24px;height:24px;font-size:9.5px;border-radius:5px}
.av.lg{width:38px;height:38px;font-size:13px;border-radius:var(--r-lg)}

/* status */
.st{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;font-size:10.5px;font-weight:600;border-radius:var(--r-sm);background:var(--surface-2);color:var(--foreground);border:1px solid var(--border);white-space:nowrap}
.st .dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0}
.st-planned .dot{background:var(--neutral)}.st-planned{color:var(--muted)}
.st-sending .dot{background:var(--warn)}.st-sending{color:var(--warn)}
.st-sent .dot{background:var(--success)}.st-sent{color:var(--success)}
.st-cancel .dot{background:var(--neutral)}.st-cancel{color:var(--muted)}
.st-err .dot{background:var(--danger)}.st-err{color:var(--danger)}
.st-pause .dot{background:var(--info)}.st-pause{color:var(--info)}

/* filters */
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.tabs{display:inline-flex;gap:1px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:2px}
.tabs button{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-sm);font-size:12px;font-weight:600;color:var(--muted)}
.tabs button .n{font-family:var(--mono);font-size:10px;opacity:.7}
.tabs button.on{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-card)}
.tabs button.on .n{color:var(--gold-deep);opacity:1}
.search{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 11px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);width:230px;max-width:100%}
.search:focus-within{border-color:var(--gold)}
.search .ic{width:14px;height:14px;opacity:.5}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:12.5px;color:var(--foreground)}
.search input::placeholder{color:var(--muted-soft)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:2px}
.seg button{padding:5px 12px;border-radius:var(--r-sm);font-size:12px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-card)}
.grow{flex:1;min-width:4px}
/* multiselect */
.ms{position:relative}
.ms-btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);font-size:12.5px;color:var(--foreground);white-space:nowrap}
.ms-btn:hover{border-color:var(--border-strong)}
.ms-btn .k{color:var(--muted)}
.ms-btn .cnt{font-family:var(--mono);font-size:10px;font-weight:600;background:var(--gold-tint);color:var(--gold-deep);padding:1px 6px;border-radius:var(--r-sm)}
.ms-btn .ic{width:13px;height:13px;opacity:.6}
.ms.open .ms-btn{border-color:var(--gold)}
.ms-pop{position:absolute;top:calc(100% + 5px);left:0;z-index:40;min-width:210px;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:6px;display:none}
.ms.open .ms-pop{display:block}
.ms-opt{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-md);font-size:12.5px;cursor:pointer}
.ms-opt:hover{background:var(--surface-2)}
.ms-opt .cb{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border-strong);flex-shrink:0;display:grid;place-items:center}
.ms-opt.on .cb{background:var(--gold);border-color:var(--gold)}
.ms-opt.on .cb::after{content:"";width:8px;height:4px;border-left:2px solid var(--primary-fg);border-bottom:2px solid var(--primary-fg);transform:rotate(-45deg) translateY(-1px)}
.ms-opt .lbl{flex:1}
.ms-opt .num{font-family:var(--mono);font-size:10.5px;color:var(--muted-soft)}
.ms-pop .ms-foot{display:flex;gap:6px;padding:6px 4px 2px;margin-top:4px;border-top:1px solid var(--border)}

/* table */
.tbl-wrap{width:100%;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px}
.tbl th{text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:10px var(--pad-card);border-bottom:1px solid var(--border);background:var(--surface);white-space:nowrap}
.tbl td{padding:10px var(--pad-card);border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.cand-row{display:flex;align-items:center;gap:10px}
.cand-name{font-weight:600;line-height:1.2}
.cand-id{font-size:11px;color:var(--muted);font-family:var(--mono)}
.rowbtn{width:26px;height:26px;border-radius:5px;display:grid;place-items:center;color:var(--muted-soft)}
.rowbtn:hover{background:var(--surface-2);color:var(--foreground)}

/* connect */
.connect{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-bottom:18px}
@media(max-width:820px){.connect{grid-template-columns:1fr}}
.step{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:0;padding-bottom:0}
.step .n{width:24px;height:24px;border-radius:var(--r-md);background:var(--gold-tint);color:var(--gold-deep);font-family:var(--mono);font-weight:700;font-size:12px;display:grid;place-items:center;flex-shrink:0}
.step h4{font-size:13px;margin-bottom:2px}
.step p{font-size:12px;color:var(--muted);margin:0}
.codebox{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:9px 12px;margin-top:9px}
.codebox code{font-family:var(--mono);font-size:15px;letter-spacing:.12em;color:var(--gold-deep);font-weight:600}
.ext-mini{display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center}
.ext-ic{width:46px;height:46px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;color:var(--gold-deep)}
.ext-ic .ic{width:24px;height:24px}

/* media */
.bulk{display:none;align-items:center;gap:12px;background:var(--gold-tint);border:1px solid var(--gold);border-radius:var(--r-md);padding:8px 13px;margin-bottom:13px;font-size:12.5px;color:var(--gold-deep);font-weight:600}
.bulk.show{display:flex}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:12px}
.tile{position:relative;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);cursor:pointer}
.tile .ph2{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.3)}
.tile .ph2 .ic{width:30px;height:30px}
.tile .tag{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:rgba(10,15,30,.72);color:#fff;backdrop-filter:blur(3px)}
.tile .dur{position:absolute;bottom:6px;right:6px;font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:4px;background:rgba(10,15,30,.78);color:#fff}
.tile .used{position:absolute;bottom:6px;left:6px;font-family:var(--mono);font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:4px;background:rgba(10,15,30,.72);color:#fff}
.tile .sel{position:absolute;top:6px;right:6px;width:19px;height:19px;border-radius:5px;border:2px solid rgba(255,255,255,.7);background:rgba(10,15,30,.35)}
.tile.pick{outline:2.5px solid var(--gold);outline-offset:-2px}
.tile.pick .sel{background:var(--gold);border-color:var(--gold);display:grid;place-items:center}
.tile.pick .sel::after{content:"";width:8px;height:4px;border-left:2px solid var(--primary-fg);border-bottom:2px solid var(--primary-fg);transform:rotate(-45deg) translateY(-1px)}

/* compose */
.field{margin-bottom:15px}
.field>label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}
.field>label .ct{margin-left:auto;font-weight:500;color:var(--muted-soft);font-family:var(--mono);font-size:10.5px;letter-spacing:0;text-transform:none}
textarea,.inp{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 11px;color:var(--foreground);outline:none;resize:vertical}
textarea:focus,.inp:focus{border-color:var(--gold)}
.senders{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}
.acc-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:12.5px;font-weight:600;color:var(--muted)}
.acc-chip.on{border-color:var(--gold);color:var(--foreground);background:var(--gold-tint)}
.board{display:grid;grid-template-columns:360px 1fr;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);overflow:hidden;min-height:580px}
@media(max-width:820px){.board{grid-template-columns:1fr}}
.rsel{border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
@media(max-width:820px){.rsel{border-right:none;border-bottom:1px solid var(--border)}}
.rsel-top{padding:16px}
.rsearch{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-md);padding:8px 10px;color:var(--muted)}
.rsearch input{border:none;background:none;outline:none;width:100%;color:var(--foreground);font-size:13px}
.rsearch:focus-within{border-color:var(--gold);background:var(--surface)}
.rtabs{display:flex;border-bottom:1px solid var(--border);padding:0 12px;gap:2px}
.rtab{padding:12px 4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-soft);position:relative;flex:1}
.rtab.on{color:var(--foreground)}
.rtab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);border-radius:2px}
.order{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 7px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-soft)}
.order .srt{color:var(--muted);display:grid;place-items:center}
.rows{overflow-y:auto;flex:1}
@media(max-width:820px){.rows{max-height:290px}}
.row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer}
.row:last-child{border-bottom:none}
.cbx{width:18px;height:18px;border-radius:5px;border:2px solid var(--border-strong);flex:none;display:grid;place-items:center}
.row.on .cbx{background:var(--gold);border-color:var(--gold)}
.row.on .cbx::after{content:"";width:9px;height:5px;border-left:2px solid var(--primary-fg);border-bottom:2px solid var(--primary-fg);transform:rotate(-45deg) translateY(-1px)}
.row.disabled{opacity:.42;pointer-events:none}
.row.disabled .d::after{content:" - уже в отправке";color:var(--muted-soft)}
.row .meta{min-width:0;flex:1}
.row .t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .d{font-size:11.5px;color:var(--muted);margin-top:1px;display:flex;align-items:center;gap:5px}
.row .d .cal{width:13px;height:13px;color:var(--gold-deep)}
.stack{display:flex;flex:none}
.stack .av{box-shadow:0 0 0 2px var(--card);margin-left:-8px}
.stack .av:first-child{margin-left:0}
.rcnt{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:2px 8px;flex:none}
.row.on .rcnt{background:var(--gold-tint);color:var(--gold-deep)}
.rows-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:12.5px}
.composer{display:flex;flex-direction:column;min-width:0}
.cmp-head{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cmp-head .ttl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-soft)}
.recip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.recip .big{font-family:var(--mono);color:var(--gold-deep);font-size:15px;font-weight:600}
.cmp-body{flex:1;padding:22px;display:flex;flex-direction:column;gap:18px;min-width:0}
.att{display:flex;gap:8px;flex-wrap:wrap}
.att .m{width:58px;height:58px;border-radius:var(--r-md);position:relative;overflow:hidden;cursor:pointer}
.att .m .lk{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(10,8,2,.42)}
.att .m.pick{outline:2.5px solid var(--gold);outline-offset:-2px}
.att .add{width:58px;height:58px;border:1.5px dashed var(--border-strong);border-radius:var(--r-md);display:grid;place-items:center;color:var(--muted)}
.att .add:hover{border-color:var(--gold);color:var(--gold-deep)}
.msg{flex:1;min-height:150px;border:1px solid var(--border);border-radius:var(--r-md);padding:14px;font-family:var(--font);font-size:14px;resize:vertical;outline:none;background:var(--surface);color:var(--foreground)}
.msg:focus{border-color:var(--gold)}
.pricebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cseg{display:inline-flex;background:var(--surface-2);border-radius:var(--r-md);padding:3px}
.cseg button{padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--muted);border-radius:7px}
.cseg button.on{background:var(--card);color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pin{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:var(--r-md);padding:6px 10px;color:var(--foreground)}
.pin>span{color:var(--muted)}
.pin input{border:none;outline:none;width:60px;background:none;color:var(--foreground);font-family:var(--mono);font-weight:600;font-size:13px}
.whenbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.whenbar input[type=datetime-local]{border:1px solid var(--border);border-radius:var(--r-md);padding:7px 10px;background:var(--surface);color:var(--foreground);font-family:var(--font);font-size:13px}
.whenbar .tz{font-size:11.5px;color:var(--muted)}
.cmp-foot{border-top:1px solid var(--border);padding:14px 20px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tool{width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--muted);position:relative}
.tool:hover{background:var(--surface-2);color:var(--foreground)}
.tool.on{color:var(--gold-deep);background:var(--gold-tint)}
.tip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#111;color:#fff;font-size:10.5px;font-weight:600;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.tool:hover .tip{opacity:1}
.cmp-foot .spacer{flex:1}
.chars{font-family:var(--mono);font-size:11px;color:var(--muted-soft);margin-right:4px}

.av img{width:100%;height:100%;object-fit:cover;display:block}
.attach-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:9px 14px;border:1.5px dashed var(--border-strong);border-radius:var(--r-md);color:var(--muted);background:var(--surface);font-size:13px;font-weight:600}
.attach-btn:hover{border-color:var(--gold);color:var(--gold-deep)}
.attach-row{display:flex;gap:8px;flex-wrap:wrap}
.attach-row .m{width:62px;height:62px;border-radius:var(--r-md);position:relative;overflow:hidden;background:var(--surface-2)}
.attach-row .m img{width:100%;height:100%;object-fit:cover}
.attach-row .m .rm{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(10,8,2,.6);color:#fff;display:grid;place-items:center;cursor:pointer}
.send-wrap{position:relative}
.send-menu{position:absolute;bottom:calc(100% + 8px);right:0;z-index:40;width:250px;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:7px}
.send-opt{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:var(--r-md);font-size:13px;font-weight:600;color:var(--foreground)}
.send-opt:hover{background:var(--surface-2)}
.send-sep{height:1px;background:var(--border);margin:6px 0}
.send-later{padding:4px 10px 8px}
.send-later-h{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;margin-bottom:9px}
.send-later input[type=datetime-local]{width:100%;border:1px solid var(--border);border-radius:var(--r-md);padding:8px 10px;background:var(--surface);color:var(--foreground);font-family:var(--font);font-size:13px;margin-bottom:6px}
.send-later .tz{font-size:11px;color:var(--muted);margin-bottom:9px}
.modal{position:fixed;inset:0;z-index:100;background:rgba(10,10,14,.55);display:grid;place-items:center;padding:20px}
.modal-card{background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-xl);width:min(760px,100%);max-height:84vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-pop)}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-t{font-size:15px;font-weight:700}
.modal-sub{font-size:12px;color:var(--muted);margin-top:2px}
.modal-body{padding:18px 20px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;min-height:140px}
.modal-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--border)}
.modal-count{font-size:12.5px;color:var(--muted)}
.vtile{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);cursor:pointer;border:2px solid transparent}
.vtile.on{border-color:var(--gold)}
.vtile img{width:100%;height:100%;object-fit:cover}
.vtile .vph{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted-soft)}
.vtile .tag{position:absolute;left:5px;bottom:5px;right:5px;font-size:9.5px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtile .pk{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--primary-fg);display:none;place-items:center}
.vtile.on .pk{display:grid}
.vtile .typ{position:absolute;top:5px;left:5px;font-size:9px;font-weight:700;text-transform:uppercase;background:rgba(10,8,2,.6);color:#fff;padding:1px 6px;border-radius:4px}
.modal-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 10px;font-size:13px}

/* pools */
.pool-list{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.pcard{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 14px;cursor:pointer}
.pcard:hover{border-color:var(--border-strong)}
.pcard.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.pcard .pm{min-width:0;flex:1}
.pcard .pm .t{font-weight:600;font-size:14px}
.pcard .pm .d{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cyc{flex-shrink:0;text-align:right;min-width:128px}
.cyc .lbl{font-size:10px;color:var(--muted-soft);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.cyc .track{height:5px;width:128px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.cyc .track i{display:block;height:100%;background:var(--gold);border-radius:3px}
.cyc .n{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:5px}
.pool-cfg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:13px;background:var(--card)}
@media(max-width:700px){.pool-cfg{grid-template-columns:repeat(2,1fr)}}
.cfg{padding:11px 14px;border-right:1px solid var(--border)}
.cfg:last-child{border-right:0}
.cfg .l{font-size:10px;color:var(--muted-soft);margin-bottom:4px;text-transform:uppercase;letter-spacing:.07em}
.cfg .v{font-weight:700;font-size:14px}.cfg .v small{font-size:11px;color:var(--muted);font-weight:500}
.flow-note{display:flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--info) 8%,transparent);border:1px solid color-mix(in srgb,var(--info) 25%,transparent);border-radius:var(--r-md);padding:9px 12px;font-size:12px;color:var(--foreground);margin-bottom:13px}
.flow-note .ic{width:16px;height:16px;color:var(--info);flex-shrink:0}
.steps-list{display:flex;flex-direction:column;gap:8px}
.pstep{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:11px 13px}
.pstep.active{border-color:var(--warn);box-shadow:inset 3px 0 0 var(--warn)}
.grip{color:var(--muted-soft);cursor:grab;flex-shrink:0;display:grid;gap:3px}
.grip i{display:block;width:12px;height:2px;background:currentColor;border-radius:2px}
.pord{width:25px;height:25px;border-radius:var(--r-md);background:var(--surface-2);display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:12px;color:var(--muted);flex-shrink:0}
.pstep.active .pord{background:var(--warn);color:#fff}
.pthumb{width:40px;height:52px;border-radius:var(--r-md);flex-shrink:0;border:1px solid var(--border)}
.pstep .meta{min-width:0;flex:1}
.pstep .meta .t{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstep .meta .d{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pstep .meta .d b{color:var(--foreground);font-weight:600}
.intv{text-align:center;flex-shrink:0;padding:0 4px}
.intv .iv{font-family:var(--mono);font-weight:600;font-size:12px;color:var(--gold-deep)}
.intv .il{font-size:9.5px;color:var(--muted-soft)}
.pprice{font-family:var(--mono);font-weight:600;font-size:13.5px;flex-shrink:0;min-width:58px;text-align:right}
.pprice.free{color:var(--success)}

/* calendar */
.cal-title{font-weight:700;font-size:14px;min-width:132px;text-align:center}
.calsum{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:13px;background:var(--card)}
@media(max-width:639px){.calsum{grid-template-columns:repeat(2,1fr)}}
.calsum>div{padding:11px 14px;border-right:1px solid var(--border);display:flex;align-items:center;gap:9px}
.calsum>div:last-child{border-right:0}
.calsum i{width:8px;height:8px;border-radius:3px;flex-shrink:0}
.calsum .n{font-family:var(--mono);font-weight:600;font-size:17px}
.calsum .k{font-size:10.5px;color:var(--muted)}
.cal{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface)}
.cal-dow div{padding:8px 11px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-soft);font-weight:700;border-right:1px solid var(--border)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cday{min-height:102px;border-right:1px solid var(--border);border-top:1px solid var(--border);padding:6px 7px;display:flex;flex-direction:column;gap:4px}
.cday .dn{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:600}
.cday.dim{background:var(--surface)}
.cday.dim .dn{color:var(--muted-soft)}
.cday.today .dn{color:var(--primary-fg);background:var(--gold);width:20px;height:20px;border-radius:var(--r-sm);display:grid;place-items:center}
.ev{font-size:10.5px;padding:3px 6px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid;cursor:pointer;display:flex;gap:5px;align-items:center}
.ev:hover{filter:brightness(.97)}
.ev .tm{font-family:var(--mono);opacity:.6;font-size:9.5px}
.ev .pr{margin-left:auto;font-family:var(--mono);font-weight:600}
.ev .eav{width:15px;height:15px;border-radius:4px;display:grid;place-items:center;font-size:7.5px;font-weight:700;color:#fff;flex-shrink:0}
.ev.planned{background:var(--surface-2);border-color:var(--neutral);color:var(--foreground)}
.ev.sending{background:color-mix(in srgb,var(--warn) 12%,transparent);border-color:var(--warn);color:var(--warn)}
.ev.sent{background:color-mix(in srgb,var(--success) 12%,transparent);border-color:var(--success);color:var(--success)}
.ev.cancel{background:var(--surface-2);border-color:var(--neutral);color:var(--muted)}
.ev.err{background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:var(--danger);color:var(--danger)}
.ev.pause{background:color-mix(in srgb,var(--info) 12%,transparent);border-color:var(--info);color:var(--info)}

@media(max-width:767px){
  .shell{grid-template-columns:1fr}
  .sb{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .sb-brand{width:100%}
  .sb-nav{flex-direction:row;flex-wrap:wrap;flex:1;padding:6px}
  .sb-sec,.sb-user{display:none}
  .cday{min-height:64px}.content{padding:14px}
}


/* add account form */
.proxy-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.alert{border-radius:var(--r-md);padding:10px 13px;font-size:12.5px;margin-bottom:14px}
.alert-err{background:color-mix(in srgb,var(--danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);color:var(--danger)}
select.inp{appearance:none;-webkit-appearance:none;cursor:pointer}