/* ================================================================
   DEZENINHAS — Mesa de Apuração · console financeiro das ações
   Herói = o dinheiro (mono tabular). Assinatura = canhoto de bilhete.
   ================================================================ */
:root{
  --ink:#0c1120; --ink-2:#0f1627; --panel:#151d31; --elev:#1b2540;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05);
  --tx:#e9edf7; --tx-2:#93a0bd; --tx-3:#65718e;

  --gold:#f0b429; --gold-ink:#2a1e05;
  --cob:#4f88ff;  /* verba */
  --red:#f2564f;  /* gasto */
  --grn:#2ec98a;  /* retorno */
  --vio:#9b6dff;  --sla:#64748b;

  --r:14px; --r-lg:20px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --f-disp:"Space Grotesk", system-ui, sans-serif;
  --f-body:"Inter", system-ui, -apple-system, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{
  margin:0; color:var(--tx); font-family:var(--f-body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 500px at 78% -8%, rgba(79,136,255,.10), transparent 60%),
    radial-gradient(900px 460px at 6% 0%, rgba(240,180,41,.08), transparent 55%),
    var(--ink);
  min-height:100vh;
}
a{color:inherit}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.muted{color:var(--tx-2)}
.sm{font-size:13px}
.hidden{display:none}
.red{color:var(--red)} .grn{color:var(--grn)} .cob{color:var(--cob)}
.gold{color:var(--gold)}

/* ---------- Top bar ---------- */
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(10,15,28,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.mark{display:flex; align-items:center; gap:11px; text-decoration:none}
.mark__ico{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:linear-gradient(160deg,#20304f,#131b2e); border:1px solid var(--line);
  color:var(--gold); font-size:20px; box-shadow:inset 0 0 0 1px rgba(240,180,41,.14);
}
.mark__txt{font-family:var(--f-disp); font-weight:700; letter-spacing:.14em; font-size:15px; line-height:1}
.mark__txt small{display:block; font-family:var(--f-body); font-weight:500; letter-spacing:.02em; font-size:10.5px; color:var(--tx-2); margin-top:3px; text-transform:none}
.top__nav{display:flex; align-items:center; gap:6px}
.top__nav a{
  text-decoration:none; color:var(--tx-2); font-weight:500; font-size:14px;
  padding:8px 12px; border-radius:9px; transition:.15s;
}
.top__nav a:hover{color:var(--tx); background:var(--line-2)}
.top__nav a.is-on{color:var(--tx); background:var(--elev)}
.inline{display:inline}
.whoami{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--tx-2); padding:0 6px 0 10px; margin-left:4px; border-left:1px solid var(--line)}
.pill{font-style:normal; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:999px}
.pill--admin{background:rgba(240,180,41,.16); color:var(--gold)}
.pill--colab{background:rgba(79,136,255,.16); color:var(--cob)}
.pill--off{background:rgba(255,255,255,.08); color:var(--tx-2)}
.pill--warn{background:rgba(242,86,79,.16); color:#ffb3ae}
.lnk{background:none; border:none; color:var(--tx-2); font:inherit; font-size:14px; cursor:pointer; padding:8px 12px; border-radius:9px; transition:.15s}
.lnk:hover{color:var(--tx); background:var(--line-2)}
.lnk--danger:hover{color:#fff; background:rgba(242,86,79,.18)}
.lnk--ext{color:var(--gold)}

/* ---------- Layout ---------- */
.wrap{max-width:1120px; margin:0 auto; padding:clamp(20px,4vw,38px) clamp(16px,4vw,40px) 80px}
.wrap--narrow{max-width:620px}
.pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap}
.pagehead__actions{display:flex; gap:10px; flex-wrap:wrap}
.h1{font-family:var(--f-disp); font-weight:700; font-size:clamp(26px,4vw,34px); letter-spacing:-.02em; margin:0 0 4px}
.h2{font-family:var(--f-disp); font-weight:600; font-size:15px; letter-spacing:.01em; margin:0; display:flex; align-items:center; gap:9px}
.back{display:inline-block; color:var(--tx-2); text-decoration:none; font-size:14px; margin-bottom:14px}
.back:hover{color:var(--tx)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; text-decoration:none; font-family:var(--f-disp);
  font-weight:600; font-size:14.5px; padding:12px 20px; border-radius:11px;
  min-height:46px; transition:transform .12s, filter .15s, background .15s; white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--gold{background:linear-gradient(180deg,#ffcb4a,#eda413); color:var(--gold-ink); box-shadow:0 6px 18px rgba(240,180,41,.28)}
.btn--gold:hover{filter:brightness(1.06)}
.btn--ghost{background:var(--elev); color:var(--tx); border:1px solid var(--line)}
.btn--ghost:hover{background:#22304f}
.btn--cob{background:linear-gradient(180deg,#5b91ff,#3f6fe6); color:#fff; box-shadow:0 6px 16px rgba(79,136,255,.26)}
.btn--red{background:linear-gradient(180deg,#f5675f,#dd3f38); color:#fff; box-shadow:0 6px 16px rgba(242,86,79,.24)}
.btn--grn{background:linear-gradient(180deg,#35d497,#22a877); color:#04231a; box-shadow:0 6px 16px rgba(46,201,138,.24)}
.btn--sm{min-height:38px; padding:8px 14px; font-size:13px}

/* ---------- Flash ---------- */
.flash{padding:11px 15px; border-radius:11px; margin-bottom:16px; font-size:14px; font-weight:500}
.flash--ok{background:rgba(46,201,138,.12); border:1px solid rgba(46,201,138,.3); color:#7ff0c2}
.flash--err{background:rgba(242,86,79,.12); border:1px solid rgba(242,86,79,.32); color:#ffb3ae}

/* ---------- Bilhete (assinatura) ---------- */
.ticket{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
/* borda picotada lateral */
.ticket__perf{
  position:absolute; left:0; top:0; bottom:0; width:16px; pointer-events:none;
  background:radial-gradient(circle at 4px 10px, var(--ink) 0 4px, transparent 5px);
  background-size:16px 20px; background-position:0 6px;
}

/* auth */
.auth{min-height:100vh; display:grid; place-items:center; padding:24px}
.ticket--auth{width:min(420px,100%); overflow:hidden; display:grid; grid-template-columns:96px 1fr}
.ticket__stub{
  background:linear-gradient(180deg,#20304f,#131c30); border-right:1px dashed rgba(255,255,255,.16);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:22px 0;
}
.ticket__ico{font-size:30px; color:var(--gold)}
.ticket__no{writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--f-mono); font-size:11px; color:var(--tx-2); letter-spacing:.18em}
.ticket__body{padding:28px 26px}
.auth__title{font-family:var(--f-disp); font-weight:700; font-size:24px; margin:0 0 4px; letter-spacing:-.01em}
.auth__sub{color:var(--tx-2); margin:0 0 20px; font-size:14px}

/* ---------- Grid de ações ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.ticket--card{display:block; text-decoration:none; overflow:hidden; transition:transform .16s, border-color .16s; padding-left:16px}
.ticket--card:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.2)}
.card__media{position:relative; aspect-ratio:16/9; background:#0a0f1c; overflow:hidden}
.card__media img{width:100%; height:100%; object-fit:cover; display:block}
.card__media--ph{width:100%; height:100%; display:grid; place-items:center; font-size:38px; color:#31405f}
.badge{
  position:absolute; top:10px; right:10px; font-size:11px; font-weight:600; letter-spacing:.04em;
  padding:4px 9px; border-radius:999px; text-transform:uppercase; backdrop-filter:blur(6px);
}
.badge--live{background:rgba(46,201,138,.9); color:#04231a}
.badge--off{background:rgba(20,28,46,.85); color:var(--tx-2); border:1px solid var(--line)}
.card__body{padding:14px 16px 16px}
.card__src{font-size:11.5px; color:var(--tx-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px}
.card__name{font-family:var(--f-disp); font-weight:600; font-size:17px; line-height:1.25; margin:0 0 14px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em}
.card__stats{display:grid; grid-template-columns:1fr 1fr auto; gap:10px; padding-top:12px; border-top:1px solid var(--line-2)}
.card__stats .k{display:block; font-size:10.5px; color:var(--tx-3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px}
.card__stats b{font-size:15px; font-weight:600}
.roi{font-weight:700; display:flex; flex-direction:column; align-items:flex-end; line-height:1.15}
.roi__x{font-style:normal; font-size:11px; font-weight:600; color:var(--tx-3)}
.roi--pos{color:var(--grn)} .roi--neg{color:var(--red)} .roi--neu{color:var(--tx-2)}
.score__mult{font-style:normal; font-size:.62em; color:var(--tx-2); font-weight:600}

.empty{text-align:center; padding:70px 20px; border:1px dashed var(--line); border-radius:var(--r-lg)}
.empty__big{font-family:var(--f-disp); font-size:20px; margin:0 0 6px}
.empty .btn{margin-top:18px}

/* ---------- Painéis / forms ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.panel + .panel{margin-top:16px}
.panel__hd{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.stack{display:flex; flex-direction:column; gap:14px}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row > .field{flex:1 1 140px}
.field{display:flex; flex-direction:column; gap:6px}
.field > span{font-size:12.5px; color:var(--tx-2); font-weight:500}
.field--sm{flex:0 0 148px}
.field--money input{font-family:var(--f-mono); font-size:17px; font-weight:600}
input, select, textarea{
  font:inherit; color:var(--tx); background:var(--ink-2); border:1px solid var(--line);
  border-radius:10px; padding:11px 13px; width:100%; transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--cob); box-shadow:0 0 0 3px rgba(79,136,255,.18)}
input[type=file]{padding:9px; font-size:13px; color:var(--tx-2)}
input[type=date]{color-scheme:dark}
::placeholder{color:var(--tx-3)}

.tag{width:9px; height:9px; border-radius:3px; display:inline-block; flex:none}
.tag--cob{background:var(--cob)} .tag--red{background:var(--red)} .tag--grn{background:var(--grn)}
.tag--gold{background:var(--gold)} .tag--vio{background:var(--vio)} .tag--sla{background:var(--sla)}

/* seg toggle */
.seg{display:flex; gap:0; border:1px solid var(--line); border-radius:10px; padding:3px; margin:0}
.seg label{flex:1; position:relative; text-align:center}
.seg input{position:absolute; opacity:0; inset:0; cursor:pointer}
.seg span{display:block; padding:8px; border-radius:7px; font-size:13px; color:var(--tx-2); cursor:pointer; transition:.15s}
.seg input:checked + span{background:var(--elev); color:var(--tx)}
.seg input:focus-visible + span{box-shadow:0 0 0 2px var(--cob)}

/* gerador de premiação */
.gen{margin-top:4px; border-top:1px dashed var(--line); padding-top:12px}
.gen summary{cursor:pointer; font-size:13.5px; color:var(--gold); font-weight:500; list-style:none}
.gen summary::-webkit-details-marker{display:none}
.gen summary::before{content:"+ "; }
.gen[open] summary::before{content:"– "}
.gen__body{padding-top:12px; display:flex; flex-direction:column; gap:10px}

/* nova ação preview */
.preview{display:grid; grid-template-columns:150px 1fr; gap:16px}
.preview__img{aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--ink-2); border:1px solid var(--line)}
.preview__img img{width:100%; height:100%; object-fit:cover}
.preview__ph{display:grid; place-items:center; height:100%; font-size:34px; color:#31405f}
.preview__meta{display:flex; flex-direction:column; gap:12px}

/* ---------- Detalhe: cabeçalho da ação ---------- */
.acao-hd{display:grid; grid-template-columns:200px 1fr; gap:22px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; margin-bottom:18px; position:relative; overflow:hidden}
.acao-hd::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--gold)}
.tone-pos.acao-hd::before, .acao-hd.tone-pos::before{background:var(--grn)}
.tone-neg.acao-hd::before, .acao-hd.tone-neg::before{background:var(--red)}
.acao-hd__media{aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:var(--ink-2)}
.acao-hd__media img{width:100%; height:100%; object-fit:cover}
.acao-hd__top{display:flex; align-items:center; gap:12px; font-size:12.5px; margin-bottom:8px}
.acao-hd__name{font-family:var(--f-disp); font-weight:700; font-size:clamp(20px,3vw,27px); line-height:1.15; margin:0 0 6px; letter-spacing:-.01em}
.acao-hd__desc{color:var(--tx-2); font-size:14px; margin:0 0 14px; max-width:60ch}
.acao-hd__actions{display:flex; align-items:center; gap:6px; flex-wrap:wrap}

/* ---------- Filtro por período ---------- */
.filterbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.filterbar__form{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.filterbar__lbl{font-size:12.5px; color:var(--tx-2); font-weight:500}
.filterbar__to{font-size:12.5px; color:var(--tx-3)}
.filterbar input[type=date]{width:auto; padding:8px 11px}
.filtro-nota{margin:0 0 16px}

/* ---------- Lista de usuários ---------- */
.ulist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.uitem{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-top:1px solid var(--line-2); flex-wrap:wrap}
.uitem.is-off{opacity:.55}
.uitem__id{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.uitem__id > b{font-size:15px}
.uitem__sub{flex-basis:100%; font-size:12px; color:var(--tx-3); margin-top:2px}
.uitem__act{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.mini{position:relative}
.mini > summary{list-style:none; cursor:pointer}
.mini > summary::-webkit-details-marker{display:none}
.mini__body{display:flex; gap:8px; margin-top:8px; padding:10px; background:var(--ink-2); border:1px solid var(--line); border-radius:10px}
.mini__body input{width:auto; flex:1; min-width:150px}

/* ---------- Placar ---------- */
.scoreboard{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
.score{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; position:relative; overflow:hidden}
.score__k{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--tx-3)}
.score__v{display:block; font-size:clamp(19px,2.6vw,27px); font-weight:700; margin:8px 0 6px; line-height:1; white-space:nowrap}
.score__sub{font-size:12.5px; color:var(--tx-2)}
.score--roi{border-color:rgba(255,255,255,.14)}
.score--roi.tone-pos{background:linear-gradient(180deg,rgba(46,201,138,.14),var(--panel))}
.score--roi.tone-neg{background:linear-gradient(180deg,rgba(242,86,79,.14),var(--panel))}
.score--roi .score__v{font-size:clamp(24px,3.4vw,34px)}

/* ---------- Painéis 2 col ---------- */
.panels-2{display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:18px}
.panel--chart{min-width:0}
.chart{width:100%; height:auto; display:block; overflow:visible}
.line{fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.line--g{stroke:var(--red)}
.line--r{stroke:var(--grn)}
.area--r{fill:rgba(46,201,138,.10)}
.pt{stroke:var(--ink); stroke-width:1.5}
.pt--r{fill:var(--grn)} .pt--g{fill:var(--red)}
.axis{fill:var(--tx-3); font-size:11px; font-family:var(--f-mono)}
.axis--end{text-anchor:end}
.chart-empty{padding:32px 8px; text-align:center; color:var(--tx-2); font-size:13.5px; border:1px dashed var(--line); border-radius:12px}
.legend{display:flex; gap:18px; margin-top:12px; font-size:12.5px; color:var(--tx-2)}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle}
.dot--red{background:var(--red)} .dot--grn{background:var(--grn)}

/* barras por categoria */
.bars{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.bar__top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px}
.bar__track{height:8px; border-radius:99px; background:var(--ink-2); overflow:hidden}
.bar__fill{display:block; height:100%; border-radius:99px}
.bar__fill--cob{background:var(--cob)} .bar__fill--vio{background:var(--vio)}
.bar__fill--gold{background:var(--gold)} .bar__fill--sla{background:var(--sla)}
.bar__pct{font-size:11px; color:var(--tx-3); float:right; margin-top:3px}

/* ---------- Forms 3 col ---------- */
.forms-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px}
.forms-3 .h2{margin-bottom:2px}

/* ---------- Extratos ---------- */
.ledgers{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.ledger__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.led{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line-2)}
.led__l{display:flex; align-items:baseline; gap:10px; min-width:0}
.led__date{font-size:12px; color:var(--tx-3); flex:none}
.led__desc{font-size:13.5px; min-width:0}
.led__sub{display:block; font-style:normal; font-size:11.5px; color:var(--tx-3); margin-top:2px}
.led__sub a{color:var(--cob)}
.led__r{display:flex; align-items:center; gap:8px; flex:none}
.led__r b{font-size:14px; font-weight:600}
.x{width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:none; color:var(--tx-3); cursor:pointer; font-size:16px; line-height:1; transition:.15s}
.x:hover{background:rgba(242,86,79,.16); color:#fff; border-color:transparent}

/* ---------- Foco visível ---------- */
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ---------- Responsivo ---------- */
@media (max-width:960px){
  .panels-2, .forms-3, .ledgers{grid-template-columns:1fr}
  .scoreboard{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .acao-hd{grid-template-columns:1fr}
  .preview{grid-template-columns:1fr}
  .top__nav a{padding:8px}
  .pagehead{align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}