/* ============ TOKENS ============ */
:root{
  color-scheme: dark;
  --bg:#07080a; --surface:#111318; --surface-2:#171a21; --line:#252a33; --line-2:#323845;
  --text:#eef1f6; --muted:#8b93a3; --faint:#5d6574;
  --accent:#2f7df6; --accent-soft:rgba(47,125,246,.14);
  --ok:#2fbf71; --warn:#f2b233; --bad:#ef5350; --flash:#ffb020;
  --pub-card:#2a2a2a;
  --radius:14px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.view{display:none}
.view.on{display:block}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ LOGIN ============ */
#v-login.on{min-height:100%;display:grid;place-items:center;padding:24px 16px;
  background:radial-gradient(600px 300px at 50% 0%,rgba(47,125,246,.12),transparent 70%),var(--bg)}
.login-box{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px 24px}
.login-box .brand{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.test-note{font-size:12.5px;color:var(--warn);background:rgba(242,178,51,.08);border:1px solid rgba(242,178,51,.25);border-radius:10px;padding:8px 10px}

/* ============ PAINEL ============ */
#v-app.on{display:flex;min-height:100%}
.side{width:248px;flex:0 0 248px;background:var(--surface);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:18px 12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:11.5px;letter-spacing:.8px;text-transform:uppercase}
.brand-mark{width:34px;height:34px;border-radius:10px;flex:0 0 34px}
.nav-side{display:flex;flex-direction:column;gap:2px;margin-top:22px}
.nav-side .lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--faint);padding:14px 12px 6px}
.nav-side a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:#c5cad4;text-decoration:none;font-size:14.5px;font-weight:500}
.nav-side a:hover{background:var(--surface-2);color:#fff}
.nav-side a.on{background:var(--accent-soft);color:#fff}
.nav-side a.on svg{color:var(--accent)}
.nav-side a .soon{margin-left:auto;font-size:9.5px;white-space:nowrap;color:var(--faint);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:#1e2633;display:grid;place-items:center;font-weight:700;font-size:13px;color:#9fc3ff}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:12px 24px;background:#07080a;border-bottom:1px solid var(--line)}
.crumb{color:var(--muted);font-size:13.5px}
.crumb b{color:var(--text);font-weight:600}
.content{padding:24px;max-width:1180px;width:100%}
.page{display:none}
.page.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:.4}to{opacity:1}}
.h-page{font-size:22px;font-weight:700;margin:0;text-wrap:balance}
.sub-page{color:var(--muted);margin:4px 0 0;font-size:14px}
.side-mobile .nav-side{margin-top:6px}
@media (max-width:991.98px){.side{display:none}.topbar{padding:10px 16px}.content{padding:16px}}

/* cards / blocos */
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.box-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.box-h h3{font-size:15px;font-weight:600;margin:0}
.box-b{padding:16px}
.wip{border:1px dashed var(--line-2);border-radius:var(--radius);padding:48px 20px;text-align:center;color:var(--muted);background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,255,255,.015) 14px 28px)}
.wip .ico{width:48px;height:48px;border-radius:14px;background:var(--surface-2);display:grid;place-items:center;margin:0 auto 12px;color:var(--warn)}
.wip h4{color:var(--text);font-size:17px;margin:0 0 4px}

/* grade de automações */
.auto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.auto{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);text-align:left;color:var(--text);transition:border-color .15s,transform .15s;min-height:168px}
button.auto:hover{border-color:var(--accent);transform:translateY(-2px)}
.auto .ai{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.auto.off{opacity:.55;cursor:default}
.auto.off .ai{background:var(--surface-2);color:var(--faint)}
.auto h4{font-size:15.5px;font-weight:600;margin:0}
.auto p{font-size:13px;color:var(--muted);margin:0;line-height:1.45}
.auto .st{position:absolute;top:16px;right:16px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);background:rgba(47,191,113,.1);border-color:rgba(47,191,113,.25)}
.pill.warn{color:var(--warn);background:rgba(242,178,51,.1);border-color:rgba(242,178,51,.25)}
.pill.bad{color:var(--bad);background:rgba(239,83,80,.1);border-color:rgba(239,83,80,.25)}
.pill.mut{color:var(--muted);background:var(--surface-2);border-color:var(--line-2)}
.pill.flash{color:var(--flash);background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.28)}
.pill.blue{color:#7fb0ff;background:var(--accent-soft);border-color:rgba(47,125,246,.3)}
.pill.nodot::before{display:none}

/* abas */
.tabs-x{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;margin:18px 0 18px}
.tabs-x::-webkit-scrollbar{display:none}
.tabs-x a{text-decoration:none;background:none;border:0;color:var(--muted);padding:10px 14px;font-weight:600;font-size:14px;border-bottom:2px solid transparent;white-space:nowrap}
.tabs-x a.on{color:var(--text);border-color:var(--accent)}
.tab{display:none}.tab.on{display:block}

/* números */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:767.98px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.stat .k{font-size:12px;color:var(--muted);font-weight:500}
.stat .v{font-size:24px;font-weight:700;margin-top:4px}
.stat .d{font-size:12px;color:var(--ok);margin-top:2px}

/* lista de produtos */
.plist{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:22px 56px 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.prow:last-child{border-bottom:0}
.prow.is-hidden .pthumb,.prow.is-hidden .pinfo{opacity:.45}
.drag{color:var(--faint);cursor:grab;touch-action:none;display:grid;place-items:center;height:40px}
.pthumb{width:56px;height:56px;border-radius:10px;object-fit:cover;background:#222}
.pinfo{min-width:0}
.pinfo .t{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinfo .s{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinfo .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pright{display:flex;align-items:center;gap:14px}
.clicks{text-align:right;line-height:1.15}
.clicks b{font-family:var(--mono);font-size:16px;display:block}
.clicks span{font-size:11.5px;color:var(--muted)}
.rankpos{font-family:var(--mono);font-size:12px;color:#7fb0ff;background:var(--accent-soft);border-radius:6px;padding:2px 6px}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface-2);color:#cfd4dd;display:grid;place-items:center;padding:0}
.iconbtn:hover{border-color:var(--accent);color:#fff}
.sortable-ghost{opacity:.35}
.sortable-chosen{background:var(--surface-2)}
@media (max-width:575.98px){
  .prow{grid-template-columns:18px 48px 1fr;row-gap:8px}
  .pthumb{width:48px;height:48px}
  .pright{grid-column:2 / -1;justify-content:space-between}
}

/* ranking */
.rk{display:grid;grid-template-columns:44px 44px 1fr auto auto;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.rk:last-child{border-bottom:0}
.rk .pos{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--muted);text-align:center}
.rk.top1 .pos{color:#ffd24a}.rk.top2 .pos{color:#cfd6e2}.rk.top3 .pos{color:#e0955a}
.rk img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.rk .bar{height:4px;background:var(--surface-2);border-radius:4px;margin-top:6px;overflow:hidden}
.rk .bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.rk.is-off{opacity:.45}
@media (max-width:575.98px){.rk{grid-template-columns:30px 40px 1fr auto}.rk .rk-act{grid-column:3 / -1}}

/* barras horizontais (origem) */
.hbar{display:grid;grid-template-columns:90px 1fr 70px;gap:10px;align-items:center;font-size:13.5px;margin-bottom:10px}
.hbar .tr{height:8px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.hbar .tr i{display:block;height:100%;border-radius:6px;background:var(--accent)}

/* formulários */
.form-label{font-size:13px;font-weight:600;color:#cdd3dd;margin-bottom:6px}
.form-text{color:var(--faint)!important;font-size:12.5px}
.form-control,.form-select{background:var(--surface-2);border-color:var(--line-2);color:var(--text)}
.form-control:focus,.form-select:focus{background:var(--surface-2);border-color:var(--accent);color:var(--text);box-shadow:0 0 0 3px var(--accent-soft)}
.form-control::placeholder{color:var(--faint)}
.form-check-input{background-color:var(--surface-2);border-color:var(--line-2)}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-switch .form-check-input{width:2.4em;height:1.3em;cursor:pointer}
.opt{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg)}
.opt + .opt{margin-top:12px}
.opt-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.opt-h b{font-size:14.5px}
.opt-h p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.opt-b{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{border:1px solid var(--line-2);background:var(--surface-2);border-radius:10px;padding:9px 12px;font-size:13.5px;cursor:pointer;flex:1 1 150px}
.seg label small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.seg input:checked + label{border-color:var(--accent);background:var(--accent-soft)}
.seg input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.upload{border:1px dashed var(--line-2);border-radius:12px;display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg);cursor:pointer}
.upload img{width:84px;height:84px;border-radius:10px;object-fit:cover;background:#222}
.upload.round img{border-radius:50%}
.modal-content{background:var(--surface);border:1px solid var(--line);border-radius:18px}
.modal-header,.modal-footer{border-color:var(--line)}
.btn{font-weight:600;border-radius:10px}
.btn-primary{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:#1f6be0;--bs-btn-hover-border-color:#1f6be0}
.btn-ghost{background:var(--surface-2);border:1px solid var(--line-2);color:#d6dbe4}
.btn-ghost:hover{border-color:var(--accent);color:#fff;background:var(--surface-2)}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filterbar .pub-chip{background:var(--surface-2);border-color:var(--line-2);color:#c9ced8}
.filterbar .pub-chip.on{background:var(--text);color:#000}

/* telegram */
.tg-msg{background:#182533;border-radius:12px 12px 12px 4px;padding:10px 12px;font-size:13.5px;line-height:1.45;max-width:420px;white-space:pre-line}
.tg-msg time{display:block;text-align:right;font-size:11px;color:#6d8aa6;margin-top:4px}
.tg-feed{display:flex;flex-direction:column;gap:10px;background:#0e1621;border-radius:12px;padding:14px;max-height:430px;overflow:auto}
.steps{padding-left:18px;margin:0;color:#c9ced8;font-size:14px;line-height:1.7}
.steps code{color:#9fc3ff;background:var(--surface-2);padding:1px 6px;border-radius:5px}

/* toast */
.toasty{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:2000;background:#f4f6fa;color:#0b0d11;font-weight:600;font-size:14px;padding:10px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:.25s;max-width:calc(100% - 32px);text-align:center;pointer-events:none}
.toasty.on{opacity:1;transform:translate(-50%,0)}
.confirm-bar{background:rgba(239,83,80,.08);border:1px solid rgba(239,83,80,.3);border-radius:10px;padding:10px 12px;font-size:13.5px}

/* categorias */
.catrow{display:grid;grid-template-columns:22px 1fr auto auto;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.catrow input{background:transparent;border:1px solid transparent;color:var(--text);font-weight:600;border-radius:8px;padding:6px 8px;width:100%;min-width:0}
.catrow input:hover{border-color:var(--line-2)}
.catrow input:focus{outline:none;border-color:var(--accent);background:var(--surface-2)}
.catrow .cnt{font-size:12.5px;color:var(--muted);white-space:nowrap}
.catrow .cf{grid-column:1 / -1}
.mvrow{display:grid;grid-template-columns:40px 1fr 140px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.mvrow img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.mvrow .t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:575.98px){.mvrow{grid-template-columns:40px 1fr}.mvrow select{grid-column:1 / -1}}
/* prévias */
.serp{background:#fff;border-radius:10px;padding:12px 14px;font-family:Arial,sans-serif}
.serp-u{font-size:12px;color:#4d5156}
.serp-t{font-size:18px;color:#1a0dab;margin:2px 0}
.serp-d{font-size:13px;color:#4d5156;line-height:1.4}
.wa-prev{display:flex;gap:10px;background:#1f2c34;border-radius:10px;padding:8px;color:#e9edef}
.wa-prev img{width:64px;height:64px;border-radius:8px;object-fit:cover;flex:0 0 64px}
.wa-prev b{display:block;font-size:13.5px}
.wa-prev span{display:block;font-size:12.5px;color:#aebac1;line-height:1.35}
.wa-prev small{color:#8696a0;font-size:11.5px}
.copyrow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.copyrow code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;color:#cfd6e2;font-size:12.5px}
.copyrow span{width:78px;font-size:13px;color:var(--muted)}

/* gráficos */
.chart-wrap{position:relative}
.chart-wrap svg{display:block;width:100%;height:auto}
.chart-wrap .ax{fill:var(--muted);font:11px var(--font)}
.chart-wrap .gl{stroke:var(--line);stroke-width:1}
.chart-wrap .bar{fill:var(--accent)}
.chart-wrap .bar.dim{fill:#1f3f73}
.chart-wrap .hit{fill:transparent;cursor:pointer}
.chart-wrap .hit:hover + .bar,.chart-wrap .bar.hl{fill:#6aa6ff}
.tip{position:fixed;z-index:3000;pointer-events:none;background:#f4f6fa;color:#0b0d11;border-radius:8px;padding:6px 10px;font-size:12.5px;line-height:1.35;box-shadow:0 8px 24px rgba(0,0,0,.5);transform:translate(-50%,calc(-100% - 10px));white-space:nowrap}
.tip b{font-family:var(--mono)}
.heat-scroll{overflow-x:auto}
.heat{display:grid;grid-template-columns:44px repeat(24,minmax(18px,1fr));gap:2px;min-width:560px}
.heat .hl{font-size:11px;color:var(--muted);display:flex;align-items:center}
.heat .hh{font-size:10px;color:var(--faint);text-align:center}
.heat .c{aspect-ratio:1;border-radius:3px;cursor:pointer}
.heat .c:hover{outline:2px solid #fff;outline-offset:-1px}
.heat-legend{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin-top:10px}
.heat-legend i{width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,#141c2b,#2f7df6,#bcd6ff)}
/* histórico */
.log{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}
.log:last-child{border-bottom:0}
.log time{font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.5}
.log .w{font-size:14px}
.log .m{display:flex;gap:8px;align-items:center;margin-top:4px;font-size:12px;color:var(--muted);flex-wrap:wrap}
@media (max-width:575.98px){.log{grid-template-columns:1fr;gap:4px}}
.person{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.person:last-of-type{border-bottom:0}

/* ajustes do sistema real */
.pub-chip{flex:0 0 auto;border:1px solid var(--line-2);background:var(--surface-2);color:#c9ced8;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;text-decoration:none;display:inline-block}
.pub-chip.on{background:var(--text);color:#000;border-color:var(--text)}
.brand-tg{display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#2f8cff,#0b4fb3);color:#fff;font-weight:800;font-size:13px;border-radius:50%}
img.brand-mark{border-radius:50%;object-fit:cover}
.crumb a{color:inherit}
.toasty.erro{background:#ffdede;color:#5a0b0b}
.alert-erro{background:rgba(239,83,80,.1);border:1px solid rgba(239,83,80,.35);color:#ffb4b2;border-radius:10px;padding:10px 12px;font-size:14px}
.alert-ok{background:rgba(47,191,113,.1);border:1px solid rgba(47,191,113,.3);color:#a6f0c8;border-radius:10px;padding:10px 12px;font-size:14px}
a.auto{text-decoration:none}
a.auto:hover{border-color:var(--accent);transform:translateY(-2px)}
.prow form{margin:0}
.nav-side a svg{flex:0 0 auto}
.person{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.person:last-child{border-bottom:0}
.convite{font-size:12.5px;word-break:break-all}