/* ============================================================
   STUDIO EMX · SMTP Sender — estilo neon (claro/escuro)
   ============================================================ */
:root{
  --lime:#c2f53f; --teal:#19e5c5; --purple:#7c5cff; --pink:#ff5ca8;
  --grad:linear-gradient(90deg,var(--lime),var(--teal),var(--purple));
  --grad-btn:linear-gradient(90deg,var(--lime),var(--teal));
  --glow-rgb:25,229,197;          /* cor base dos brilhos (por tema) */
  --btn-ink:#08080a;              /* texto sobre botão de ação */
  --aurora:
    radial-gradient(700px 400px at 8% -5%,rgba(124,92,255,.16),transparent 60%),
    radial-gradient(700px 400px at 100% 0%,rgba(var(--glow-rgb),.13),transparent 55%),
    radial-gradient(600px 500px at 60% 110%,rgba(var(--glow-rgb),.08),transparent 60%);
  --aurora-op:1;
  --radius:16px; --radius-sm:11px;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Instrument Serif',Georgia,serif;
}
/* ---- DARK (padrão) ---- */
[data-theme="dark"]{
  --bg:#08080a; --bg2:#0d0d11; --card:#121217; --card2:#16161c;
  --line:#23232c; --line2:#2c2c37;
  --ink:#eef0f4; --ink2:#c7ccd4; --mut:#8b909b; --mut2:#6b7078;
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --glow:0 0 0 1px rgba(255,255,255,.04);
}
/* ---- LIGHT ---- */
[data-theme="light"]{
  --bg:#f4f5f8; --bg2:#eceef3; --card:#ffffff; --card2:#fafbfc;
  --line:#e4e7ee; --line2:#d6dae3;
  --ink:#15171c; --ink2:#3a3f49; --mut:#6c727e; --mut2:#959ba6;
  --shadow:0 18px 45px rgba(40,50,80,.12);
  --glow:0 0 0 1px rgba(0,0,0,.03);
}
/* ---- ULTRA NEON (mais papagaiada) ---- */
[data-theme="ultra"]{
  --bg:#06030d; --bg2:#0b0518; --card:#130a24; --card2:#180d2c;
  --line:#2a1a44; --line2:#3a2560;
  --ink:#f7f0ff; --ink2:#dccbff; --mut:#9b86c8; --mut2:#7a68a8;
  --lime:#c6ff2e; --teal:#00f0ff; --purple:#9b5cff; --pink:#ff4dd2;
  --grad:linear-gradient(90deg,var(--lime),var(--teal),var(--purple),var(--pink));
  --grad-btn:linear-gradient(90deg,#c6ff2e,#00f0ff,#9b5cff);
  --glow-rgb:0,240,255; --btn-ink:#06030d;
  --shadow:0 24px 70px rgba(155,92,255,.45);
  --glow:0 0 0 1px rgba(255,255,255,.06);
  --aurora:
    radial-gradient(680px 420px at 5% -8%,rgba(155,92,255,.42),transparent 60%),
    radial-gradient(680px 420px at 100% 0%,rgba(0,240,255,.34),transparent 55%),
    radial-gradient(600px 520px at 50% 115%,rgba(255,77,210,.28),transparent 60%),
    radial-gradient(520px 400px at 82% 58%,rgba(198,255,46,.16),transparent 60%);
}
/* ---- MIDNIGHT (azul profundo) ---- */
[data-theme="midnight"]{
  --bg:#070b1a; --bg2:#0a1024; --card:#0e152e; --card2:#121b3a;
  --line:#1d2747; --line2:#2c3a64;
  --ink:#e9eeff; --ink2:#bcc8ec; --mut:#8190ba; --mut2:#5e6c95;
  --lime:#38e8ff; --teal:#4f8cff; --purple:#9b7bff; --pink:#42d6ff;
  --grad:linear-gradient(90deg,#38e8ff,#4f8cff,#9b7bff);
  --grad-btn:linear-gradient(90deg,#38e8ff,#4f8cff);
  --glow-rgb:79,140,255; --btn-ink:#060a17;
  --shadow:0 24px 64px rgba(0,8,34,.6);
  --glow:0 0 0 1px rgba(255,255,255,.05);
  --aurora:
    radial-gradient(700px 420px at 6% -8%,rgba(124,92,255,.30),transparent 60%),
    radial-gradient(720px 440px at 100% 0%,rgba(79,140,255,.26),transparent 55%),
    radial-gradient(620px 520px at 55% 115%,rgba(56,232,255,.18),transparent 60%);
}
/* ---- PRETO & BRANCO (monocromático escuro) ---- */
[data-theme="mono"]{
  --bg:#000000; --bg2:#0a0a0a; --card:#0f0f0f; --card2:#151515;
  --line:#242424; --line2:#363636;
  --ink:#ffffff; --ink2:#d2d2d2; --mut:#8c8c8c; --mut2:#666666;
  --lime:#ffffff; --teal:#ffffff; --purple:#ffffff; --pink:#ffffff;
  --grad:#ffffff; --grad-btn:#ffffff;
  --glow-rgb:255,255,255; --btn-ink:#000000;
  --shadow:0 20px 50px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(255,255,255,.06);
  --aurora:none; --aurora-op:0;
}
/* ---- PAPEL (monocromático claro) ---- */
[data-theme="mono-light"]{
  --bg:#ffffff; --bg2:#f6f6f6; --card:#ffffff; --card2:#fafafa;
  --line:#e9e9e9; --line2:#dadada;
  --ink:#0a0a0a; --ink2:#333333; --mut:#777777; --mut2:#a2a2a2;
  --lime:#0a0a0a; --teal:#0a0a0a; --purple:#0a0a0a; --pink:#0a0a0a;
  --grad:#0a0a0a; --grad-btn:#0a0a0a;
  --glow-rgb:0,0,0; --btn-ink:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --glow:0 0 0 1px rgba(0,0,0,.04);
  --aurora:none; --aurora-op:0;
}
/* overrides p/ temas monocromáticos: tira cor de ícones, brilhos e badges */
[data-theme="mono"] .stat-ico,[data-theme="mono-light"] .stat-ico,
[data-theme="mono"] .list-ico,[data-theme="mono-light"] .list-ico{
  background:var(--ink)!important}
[data-theme="mono"] .stat-ico svg,[data-theme="mono-light"] .stat-ico svg{fill:var(--bg)}
[data-theme="mono"] .stat-glow,[data-theme="mono-light"] .stat-glow{display:none}
[data-theme="mono"] .badge,[data-theme="mono-light"] .badge{
  background:var(--card2)!important;color:var(--ink2)!important;border:1px solid var(--line2)}
/* ULTRA: brilho e títulos em degradê (mais papagaiada) */
[data-theme="ultra"] .stat-glow{opacity:.65;filter:blur(46px)}
[data-theme="ultra"] .page-title,[data-theme="ultra"] .stat-v{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.5;min-height:100vh;
  -webkit-font-smoothing:antialiased;transition:background .4s,color .3s;
}
a{color:inherit}
::selection{background:rgba(var(--glow-rgb),.3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* aurora de fundo */
.aurora{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:var(--aurora);opacity:var(--aurora-op);
  animation:auroraShift 18s ease-in-out infinite alternate;
}
[data-theme="light"]{--aurora-op:.6}
@keyframes auroraShift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-2%,0) scale(1.08)}}

/* ============ LAYOUT ============ */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:248px;z-index:5;
  background:linear-gradient(180deg,var(--card),var(--bg2));
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:22px 16px;
}
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 22px}
/* logo original do site studioemx.pt — cores FIXAS (iguais em todos os temas) */
.brand-mark{flex:0 0 auto;width:20px;height:20px;border-radius:6px;
  background:conic-gradient(from 90deg,#c2f53f,#19e5c5,#7c5cff,#c2f53f);
  box-shadow:0 0 16px rgba(194,245,63,.55);animation:spin 6s linear infinite}
.brand-mark.lg{width:34px;height:34px;border-radius:9px}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand-txt strong{font-size:15px;font-weight:700;letter-spacing:-.02em}
.brand-txt strong sup{font-size:.55em;color:#c2f53f;top:-.7em}
.brand-txt span{font-size:11px;color:var(--mut);font-weight:500}

.nav{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.nav-bottom{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  color:var(--mut);text-decoration:none;font-weight:600;font-size:13.5px;
  position:relative;transition:.18s;
}
.nav-item svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto}
.nav-item:hover{color:var(--ink);background:var(--card2)}
.nav-item.active{color:var(--ink);background:linear-gradient(90deg,rgba(var(--glow-rgb),.14),rgba(124,92,255,.10))}
.nav-item.active::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;background:var(--grad-btn);
  box-shadow:0 0 12px var(--teal);
}

.main{margin-left:248px;position:relative;z-index:1;min-height:100vh}
.topbar{
  position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;
  padding:16px 30px;background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.crumb{font-weight:700;font-size:15px;letter-spacing:.2px}
.topbar-actions{display:flex;align-items:center;gap:10px}
.content{padding:28px 30px 60px;max-width:1240px}

/* ============ THEME TOGGLE ============ */
.theme-toggle{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line2);
  background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:.2s;overflow:hidden;position:relative;
}
.theme-toggle:hover{border-color:var(--teal);box-shadow:0 0 18px rgba(var(--glow-rgb),.3)}
.theme-toggle svg{width:18px;height:18px;fill:currentColor;position:absolute;transition:.35s}
[data-theme="dark"] .ic-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
[data-theme="dark"] .ic-moon{opacity:1}
[data-theme="light"] .ic-moon{opacity:0;transform:rotate(90deg) scale(.5)}
[data-theme="light"] .ic-sun{opacity:1}

/* ---- menu de temas ---- */
.theme-menu{position:relative}
.theme-trigger{width:38px;height:38px;border-radius:11px;border:1px solid var(--line2);
  background:var(--card);cursor:pointer;display:grid;place-items:center;transition:.2s;padding:0}
.theme-trigger:hover{border-color:var(--ink2);box-shadow:0 0 18px rgba(var(--glow-rgb),.3)}
.theme-trigger .sw{width:18px;height:18px;border-radius:6px}
.theme-pop{position:absolute;right:0;top:46px;z-index:20;width:212px;padding:7px;
  background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);
  display:none;flex-direction:column;gap:2px}
.theme-pop.open{display:flex;animation:slideDown .18s ease}
.theme-pop .ph{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mut2);padding:8px 10px 4px}
.theme-opt{display:flex;align-items:center;gap:11px;padding:9px 10px;border:0;border-radius:9px;
  background:transparent;color:var(--ink2);font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;text-align:left;width:100%;transition:.15s}
.theme-opt:hover{background:var(--card2);color:var(--ink)}
.theme-opt.active{background:var(--card2);color:var(--ink)}
.theme-opt.active::after{content:"✓";margin-left:auto;color:var(--ink);font-weight:700}
.sw{width:16px;height:16px;border-radius:5px;flex:0 0 auto;border:1px solid rgba(128,128,128,.25)}
.sw-dark{background:linear-gradient(135deg,#c2f53f,#19e5c5,#7c5cff)}
.sw-light{background:linear-gradient(135deg,#c2f53f,#19e5c5,#7c5cff);box-shadow:inset 0 0 0 2px #fff}
.sw-ultra{background:linear-gradient(135deg,#c6ff2e,#00f0ff,#9b5cff,#ff4dd2)}
.sw-midnight{background:linear-gradient(135deg,#38e8ff,#4f8cff,#9b7bff)}
.sw-neonpro{background:conic-gradient(from 45deg,#19e5c5,#c2f53f,#3aa0ff,#7c5cff,#19e5c5)}
.sw-mono{background:linear-gradient(135deg,#000 49%,#fff 51%)}
.sw-mono-light{background:#fff;border-color:#111}

/* ============ BOTÕES ============ */
.btn-primary,.btn-ghost,.btn-danger{
  font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;
  border:0;border-radius:var(--radius-sm);padding:11px 20px;transition:.2s;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
}
.btn-primary{
  background:var(--grad-btn);color:var(--btn-ink);position:relative;overflow:hidden;
  box-shadow:0 8px 24px rgba(var(--glow-rgb),.32);
}
.btn-primary::after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-120%);transition:.6s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(var(--glow-rgb),.5)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--line2)}
.btn-ghost:hover{border-color:var(--teal);color:var(--ink);box-shadow:0 0 16px rgba(var(--glow-rgb),.22);transform:translateY(-1px)}
.btn-danger{background:rgba(255,92,108,.12);color:#ff6b78;border:1px solid rgba(255,92,108,.3)}
.btn-danger:hover{background:rgba(255,92,108,.2)}
.btn-block{width:100%;justify-content:center}
.btn-sm{padding:9px 16px;font-size:12.5px}
.btn-mini{font-size:12px;font-weight:700;padding:6px 13px;border-radius:9px;
  background:var(--card2);border:1px solid var(--line2);color:var(--ink2);text-decoration:none;transition:.18s}
.btn-mini:hover{border-color:var(--teal);color:var(--ink)}

/* ============================================================
   TEMA NEON PRO — base neon escura + botões funcionais
   (contorno que acende + brilho passando + cor por função)
   ============================================================ */
[data-theme="neonpro"]{
  --bg:#08080a; --bg2:#0d0d11; --card:#121217; --card2:#16161c;
  --line:#23232c; --line2:#2c2c37;
  --ink:#eef0f4; --ink2:#c7ccd4; --mut:#8b909b; --mut2:#6b7078;
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --glow:0 0 0 1px rgba(255,255,255,.04);
  --glow-rgb:25,229,197; --btn-ink:#08080a;
}
/* base unificada dos botões no Neon Pro */
[data-theme="neonpro"] .btn-primary,
[data-theme="neonpro"] .btn-ghost,
[data-theme="neonpro"] .btn-danger{
  --ba:25,229,197; --bc:#19e5c5;                 /* default = teal */
  position:relative; overflow:hidden;
  background:var(--card); color:var(--ink);
  border:1px solid rgba(var(--ba),.34); box-shadow:none;
}
[data-theme="neonpro"] .btn-primary{
  background:linear-gradient(0deg,rgba(var(--ba),.13),rgba(var(--ba),.13)),var(--card);
}
[data-theme="neonpro"] .btn-danger{ color:#ff8893; }
[data-theme="neonpro"] .btn-ghost{ --ba:140,146,158; --bc:#9aa0ab; }
[data-theme="neonpro"] .btn-danger{ --ba:255,92,108; --bc:#ff5c6c; }
/* brilho passando (sweep) */
[data-theme="neonpro"] .btn-primary::after,
[data-theme="neonpro"] .btn-ghost::after,
[data-theme="neonpro"] .btn-danger::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 18%,rgba(var(--ba),.5),transparent 82%);
  transform:translateX(-130%); transition:transform .6s ease;
}
[data-theme="neonpro"] .btn-primary:hover,
[data-theme="neonpro"] .btn-ghost:hover,
[data-theme="neonpro"] .btn-danger:hover{
  border-color:var(--bc); transform:translateY(-2px); color:var(--ink);
  box-shadow:0 0 22px rgba(var(--ba),.4), 0 8px 22px rgba(0,0,0,.25);
}
[data-theme="neonpro"] .btn-danger:hover{ color:#ff5c6c; }
[data-theme="neonpro"] .btn-primary:hover::after,
[data-theme="neonpro"] .btn-ghost:hover::after,
[data-theme="neonpro"] .btn-danger:hover::after{ transform:translateX(130%); }
[data-theme="neonpro"] .btn-primary:disabled{ opacity:.4; transform:none; box-shadow:none; }
[data-theme="neonpro"] .btn-mini:hover{ border-color:#19e5c5; box-shadow:0 0 14px rgba(25,229,197,.3); transform:translateY(-1px); }
/* cores por função (sobrepõem o default; mesma especificidade, vêm depois) */
[data-theme="neonpro"] .b-teal{ --ba:25,229,197; --bc:#19e5c5; }
[data-theme="neonpro"] .b-lime{ --ba:194,245,63; --bc:#c2f53f; }
[data-theme="neonpro"] .b-blue{ --ba:58,160,255; --bc:#3aa0ff; }
[data-theme="neonpro"] .b-purple{ --ba:124,92,255; --bc:#7c5cff; }
[data-theme="neonpro"] .b-orange{ --ba:255,160,60; --bc:#ffa83c; }
[data-theme="neonpro"] .b-red{ --ba:255,92,108; --bc:#ff5c6c; }
[data-theme="neonpro"] .b-gray{ --ba:140,146,158; --bc:#9aa0ab; }

/* ============ PÁGINA ============ */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.page-title{font-size:27px;font-weight:800;margin:0;letter-spacing:-.5px}
.page-desc{color:var(--mut);margin:6px 0 0;font-size:14px}
.back{color:var(--mut);text-decoration:none;font-size:13px;font-weight:600}
.back:hover{color:var(--teal)}

/* ============ STAT CARDS ============ */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
@media(max-width:980px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat-card{
  position:relative;background:linear-gradient(165deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 20px;
  overflow:hidden;transition:.25s;box-shadow:var(--glow);
}
.stat-card:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--shadow)}
.stat-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px}
.stat-ico svg{width:21px;height:21px;fill:#08080a}
.stat-k{font-size:12.5px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.stat-v{font-size:34px;font-weight:800;letter-spacing:-1px;margin:2px 0 2px;font-variant-numeric:tabular-nums}
.stat-sub{font-size:12.5px;color:var(--mut2)}
.stat-glow{position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  filter:blur(40px);opacity:.4;pointer-events:none}
.g1 .stat-ico{background:linear-gradient(135deg,var(--lime),var(--teal))}.g1 .stat-glow{background:var(--teal)}
.g2 .stat-ico{background:linear-gradient(135deg,var(--teal),#3aa0ff)}.g2 .stat-glow{background:var(--teal)}
.g3 .stat-ico{background:linear-gradient(135deg,#3aa0ff,var(--purple))}.g3 .stat-glow{background:var(--purple)}
.g4 .stat-ico{background:linear-gradient(135deg,#ffb13a,#ff6b6b)}.g4 .stat-glow{background:#ff8a3a}
.g5 .stat-ico{background:linear-gradient(135deg,var(--purple),var(--pink))}.g5 .stat-glow{background:var(--purple)}
.g6 .stat-ico{background:linear-gradient(135deg,#ff5c6c,var(--pink))}.g6 .stat-glow{background:var(--pink)}

/* ============ PANELS ============ */
.panel{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px;
  box-shadow:var(--glow);
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.panel-head h3{margin:0;font-size:15.5px;font-weight:700}
.side-h{margin:0 0 16px;font-size:14px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:8px}
.side-h::before{content:"";width:3px;height:14px;border-radius:3px;background:var(--grad-btn)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
.legend{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-left:8px}
.legend .d1{background:var(--lime)}.legend .d2{background:var(--teal)}.legend .d3{background:var(--purple)}
.link-more{color:var(--teal);text-decoration:none;font-size:13px;font-weight:600}

/* ============ TABELAS ============ */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;color:var(--mut);font-weight:600;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.5px;padding:0 14px 12px;border-bottom:1px solid var(--line)}
.table td{padding:14px;border-bottom:1px solid var(--line)}
.table tbody tr{transition:.15s}
.table tbody tr:hover{background:var(--card2)}
.table tbody tr:last-child td{border-bottom:0}
.muted{color:var(--mut)}.small{font-size:11.5px}
td.empty,.empty{text-align:center;color:var(--mut);padding:40px}
.empty a{color:var(--teal);text-decoration:none}

/* badges */
.badge{display:inline-block;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;
  letter-spacing:.3px}
.b-draft{background:rgba(139,144,155,.16);color:var(--mut)}
.b-test{background:rgba(124,92,255,.16);color:#a994ff}
.b-sched{background:rgba(58,160,255,.16);color:#62b4ff}
.b-send{background:rgba(var(--glow-rgb),.16);color:var(--teal);animation:pulse 1.6s infinite}
.b-pause{background:rgba(255,177,58,.16);color:#ffbe5c}
.b-sent{background:rgba(var(--glow-rgb),.18);color:#aee23a}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* progress */
.prog{height:7px;border-radius:6px;background:var(--line);overflow:hidden}
.prog.big{height:10px;margin-bottom:10px}
.prog-bar{height:100%;border-radius:6px;background:var(--grad-btn);
  box-shadow:0 0 12px rgba(var(--glow-rgb),.6);transition:width .5s ease}

/* ============ TABS ============ */
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px}
.tab{padding:9px 16px;border-radius:10px;color:var(--mut);text-decoration:none;font-weight:600;
  font-size:13px;display:flex;align-items:center;gap:8px;transition:.18s}
.tab:hover{color:var(--ink);background:var(--card2)}
.tab.active{color:var(--btn-ink);background:var(--grad-btn);box-shadow:0 6px 18px rgba(var(--glow-rgb),.3)}
.tab-count{font-size:11px;background:rgba(0,0,0,.18);padding:1px 8px;border-radius:20px;font-weight:700}
.tab:not(.active) .tab-count{background:var(--line2);color:var(--mut)}

/* ============ FORM ============ */
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px;color:var(--ink2)}
.hint{font-size:11.5px;color:var(--mut);font-weight:400}
.hint code,.field code,code{font-family:var(--mono);font-size:11.5px;background:var(--card2);
  border:1px solid var(--line);padding:1px 6px;border-radius:6px;color:var(--teal)}
input,select,textarea{
  width:100%;font-family:inherit;font-size:14px;color:var(--ink);
  background:var(--bg2);border:1px solid var(--line2);border-radius:11px;padding:11px 14px;
  transition:.18s;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(var(--glow-rgb),.16)}
textarea.code{font-family:var(--mono);font-size:12.5px;line-height:1.6;resize:vertical}
.grid-2-in{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.label-row label{margin-bottom:0}
.tpl-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tpl-btn{font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;color:var(--ink2);
  background:var(--card2);border:1px solid var(--line2);border-radius:8px;padding:5px 11px;transition:.16s}
.tpl-btn:hover{border-color:var(--teal);color:var(--ink);box-shadow:0 0 12px rgba(var(--glow-rgb),.2)}
/* alternador código/preview */
.editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:3px;gap:2px}
.seg-btn{font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;color:var(--mut);
  background:transparent;border:0;border-radius:7px;padding:7px 13px;transition:.16s;white-space:nowrap}
.seg-btn:hover{color:var(--ink)}
.seg-btn.active{color:var(--btn-ink);background:var(--grad-btn);box-shadow:0 4px 12px rgba(var(--glow-rgb),.28)}
.width-seg .seg-btn{padding:7px 11px;font-size:14px}
.preview-wrap{display:flex;justify-content:center;background:#f2f2f2;border:1px solid var(--line2);
  border-radius:11px;overflow:auto;padding:0}
#htmlPreview{width:100%;height:540px;border:0;background:#fff;transition:max-width .25s ease;display:block}
#htmlPreview.mobile{max-width:380px;box-shadow:0 0 0 1px var(--line2)}
.inline-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inline-form input{flex:1;min-width:180px}

/* editor de campanha */
.grid-edit{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
@media(max-width:1000px){.grid-edit{grid-template-columns:1fr}}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:13px 10px;text-align:center}
.mini span{display:block;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.mini label{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.send-box{margin-top:8px}
.send-status{font-size:12.5px;color:var(--mut);margin-bottom:12px;text-align:center}
.send-actions{display:flex;gap:8px;flex-wrap:wrap}
.send-actions form{flex:1}
.send-actions .btn-sm{width:100%;justify-content:center}
.sched-form{display:flex;gap:8px;margin-top:10px}
.sched-form input{flex:1}
.danger-zone{border-color:rgba(255,92,108,.2)}
.col-side .panel{position:relative}

/* listas */
.list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.list-card{background:linear-gradient(165deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;transition:.22s;box-shadow:var(--glow)}
.list-card:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--shadow)}
.list-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.list-ico{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--teal),var(--purple));
  display:grid;place-items:center}
.list-ico svg{width:20px;height:20px;fill:#fff}
.list-card h3{margin:0 0 4px;font-size:16px}
.list-stats{font-size:13px;margin:12px 0 14px;display:flex;gap:6px;align-items:center}
.list-stats strong{font-size:18px;color:var(--teal)}.list-stats span{color:var(--mut2)}
.x-del{background:none;border:0;color:var(--mut2);font-size:20px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:8px;transition:.15s}
.x-del:hover{color:#ff6b78;background:rgba(255,92,108,.12)}
.import-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.upl{flex:1;min-width:240px}
.upl input[type=file]{margin-bottom:6px}
.empty-state{text-align:center;padding:54px 24px}
.empty-ico{font-size:46px;margin-bottom:12px}
.empty-state h3{margin:0 0 6px;font-size:19px}
.empty-state p{color:var(--mut);margin:0 0 20px}

/* modal */
.modal{border:1px solid var(--line2);background:var(--card);color:var(--ink);
  border-radius:var(--radius);padding:26px;max-width:420px;width:92%;box-shadow:var(--shadow)}
.modal::backdrop{background:rgba(4,4,8,.6);backdrop-filter:blur(4px)}
.modal h3{margin:0 0 18px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}

/* ---- engajamento da lista ---- */
.eng-row{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.eng-empty{width:240px;height:240px;display:grid;place-items:center;text-align:center;font-size:13px;line-height:1.5}
.eng-legend{display:flex;flex-direction:column;gap:10px;flex:1;min-width:200px}
.eng-item{display:flex;align-items:center;gap:10px;font-size:13.5px}
.eng-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.eng-lbl{color:var(--ink2)}
.eng-item strong{margin-left:auto;font-variant-numeric:tabular-nums;font-size:15px}

/* ---- linhas de lead clicáveis ---- */
.lead-row{cursor:pointer}
.lead-row:hover{background:var(--card2)}
.lead-row:hover td:first-child{box-shadow:inset 3px 0 0 var(--teal)}

/* ---- modal do lead ---- */
.lead-modal{max-width:520px;width:94%}
.lead-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.lead-modal-head h3{margin:0;font-size:20px}
.lead-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 22px;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px}
.lm-field{display:flex;flex-direction:column;gap:2px;min-width:0}
.lm-field label{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut2);font-weight:700}
.lm-field span{font-size:13.5px;color:var(--ink);word-break:break-word}
.lead-sub{font-size:13px;font-weight:700;margin:0 0 12px;color:var(--ink2)}
.lead-history{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow:auto}
.lead-camp{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:13px 15px}
.lead-camp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.lead-camp-top strong{font-size:14px}
.lead-camp-when{font-size:12px;color:var(--mut);margin-top:6px}
.lead-empty{text-align:center;color:var(--mut);padding:26px;background:var(--bg2);border-radius:11px}

/* ---- relatório de campanha ---- */
.camp-link{text-decoration:none}
.camp-link:hover strong{color:var(--teal)}
.rep-meta{display:flex;gap:22px;flex-wrap:wrap;margin:-8px 0 20px;font-size:13px;color:var(--ink2)}
.rep-meta strong{color:var(--mut);font-weight:600}
.rep-activity{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow:auto}
.act-item{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.act-item:last-child{border-bottom:0}
.act-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.act-who{font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-verb{font-weight:600}
.act-time{margin-left:auto;color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums}

/* flash */
.flash{background:linear-gradient(90deg,rgba(var(--glow-rgb),.16),rgba(124,92,255,.12));
  border:1px solid rgba(var(--glow-rgb),.3);color:var(--ink);padding:13px 18px;border-radius:12px;
  margin-bottom:18px;font-weight:600;font-size:13.5px;animation:slideDown .4s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ============ LOGIN ============ */
.login-body{display:grid;place-items:center;min-height:100vh;padding:24px}
.login-card{position:relative;z-index:2;background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line2);border-radius:24px;padding:42px 38px;max-width:400px;width:100%;
  box-shadow:var(--shadow);text-align:center}
.login-brand{display:inline-flex;align-items:center;gap:12px;margin-bottom:22px}
.login-word{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.login-word sup{font-size:.55em;color:#c2f53f;top:-.7em}
.login-card h1{font-size:23px;margin:0 0 4px;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-sub{color:var(--mut);font-size:13px;margin:0 0 26px}
.login-card form{text-align:left}
.login-card label{display:block;font-size:12.5px;font-weight:600;margin:14px 0 6px;color:var(--ink2)}
.login-card .btn-block{margin-top:24px}
.login-err{background:rgba(255,92,108,.14);border:1px solid rgba(255,92,108,.3);color:#ff8088;
  padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:8px}