:root{
  --bg:#EAF0F6; --surface:#FFFFFF; --surface-2:#F5F8FC;
  --ink:#0B1220; --muted:#5A6B82; --faint:#8FA0B6;
  --border:#DCE5EF; --grid:#EDF2F8;
  --navy:#000128; --cyan:#00A9C7; --cyan-soft:#00C2E0;
  --indigo:#5A63D8;
  --good:#00B85A; --warn:#E5A400; --crit:#EE4A16;
  --good-bg:#E4F7ED; --warn-bg:#FBF1D8; --crit-bg:#FBE6DE;
  --shadow:0 1px 2px rgba(11,18,32,.04), 0 8px 24px -12px rgba(11,18,32,.14);
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#05081C; --surface:#0C1130; --surface-2:#0F1638;
    --ink:#EAF0FA; --muted:#93A2BE; --faint:#5F708E;
    --border:#1E274E; --grid:#161E42;
    --cyan:#2BD4EE; --cyan-soft:#00C2E0; --indigo:#8A92FF;
    --good:#2FD778; --warn:#FFC23A; --crit:#FF6A3D;
    --good-bg:#0C2A1C; --warn-bg:#2B2410; --crit-bg:#2E170F;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{
  --bg:#EAF0F6; --surface:#FFFFFF; --surface-2:#F5F8FC; --ink:#0B1220; --muted:#5A6B82; --faint:#8FA0B6;
  --border:#DCE5EF; --grid:#EDF2F8; --cyan:#00A9C7; --indigo:#5A63D8;
  --good:#00B85A; --warn:#E5A400; --crit:#EE4A16; --good-bg:#E4F7ED; --warn-bg:#FBF1D8; --crit-bg:#FBE6DE;
  --shadow:0 1px 2px rgba(11,18,32,.04), 0 8px 24px -12px rgba(11,18,32,.14);
}
:root[data-theme="dark"]{
  --bg:#05081C; --surface:#0C1130; --surface-2:#0F1638; --ink:#EAF0FA; --muted:#93A2BE; --faint:#5F708E;
  --border:#1E274E; --grid:#161E42; --cyan:#2BD4EE; --indigo:#8A92FF;
  --good:#2FD778; --warn:#FFC23A; --crit:#FF6A3D; --good-bg:#0C2A1C; --warn-bg:#2B2410; --crit-bg:#2E170F;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
.wrap{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  min-height:100vh; padding:clamp(16px,4vw,40px);
  -webkit-font-smoothing:antialiased;
}
.inner{max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:22px}
.tnum{font-variant-numeric:tabular-nums}
.hidden{display:none !important}

/* Header */
header{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--cyan-soft),var(--cyan));
  display:grid;place-items:center;color:var(--navy);font-weight:800;font-size:18px;box-shadow:var(--shadow)}
h1{font-size:clamp(1.25rem,3vw,1.6rem); margin:0; letter-spacing:-.02em; text-wrap:balance}
.eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);font-weight:700}
.range{font-size:.82rem;color:var(--muted); text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end}
.range b{color:var(--ink)}
.hdr-actions{display:flex; gap:8px}

.period-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.period-bar label{font-size:.76rem; color:var(--muted); font-weight:600}
.period-bar select, .period-bar input[type="date"]{
  font:inherit; font-size:.8rem; padding:6px 10px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink)}

.pf-field{display:flex; flex-direction:column; gap:4px; font-size:.74rem; color:var(--muted); font-weight:600}
.pf-field input{font:inherit; font-size:.85rem; font-weight:400; color:var(--ink); padding:8px 10px;
  border-radius:8px; border:1px solid var(--border); background:var(--surface-2)}
.play-history-table{width:100%; border-collapse:collapse; font-size:.74rem}
.play-history-table th, .play-history-table td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--border);
  white-space:nowrap; font-variant-numeric:tabular-nums}
.play-history-table th{color:var(--muted); font-weight:600}
.play-history-wrap{overflow-x:auto}
.play-del{background:none; border:none; color:var(--crit); cursor:pointer; font-size:.7rem; padding:2px 4px}
.btn{font:inherit; font-size:.74rem; font-weight:700; padding:6px 12px; border-radius:99px; border:1px solid var(--border);
  background:var(--surface); color:var(--muted); cursor:pointer}
.btn:hover{color:var(--ink); border-color:var(--faint)}
.btn:disabled{opacity:.5; cursor:default}

/* KPI */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media(max-width:720px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px 16px 14px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden}
.kpi .lbl{font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.02em}
.kpi .val{font-size:2.15rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.kpi .sub{font-size:.72rem;color:var(--faint)}
.kpi .tag{position:absolute; top:14px; right:14px; font-size:.62rem; font-weight:700; padding:3px 7px; border-radius:99px}
.tag.good{background:var(--good-bg); color:var(--good)}
.tag.warn{background:var(--warn-bg); color:var(--warn)}
.accent{color:var(--cyan)}

/* Cards / sections */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px; box-shadow:var(--shadow)}
.card h2{font-size:.95rem; margin:0 0 2px; letter-spacing:-.01em}
.card .desc{font-size:.76rem; color:var(--muted); margin:0 0 14px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid2 > .card{min-width:0} /* trava o item do grid no tamanho da coluna, mesmo com filho largo (ex.: .days com muitos dias) */
@media(max-width:720px){.grid2{grid-template-columns:1fr}}

/* Alerts */
.alerts{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:720px){.alerts{grid-template-columns:1fr}}
.alert{border-radius:var(--r); padding:15px; border:1px solid; display:flex; flex-direction:column; gap:7px}
.alert.crit{background:var(--crit-bg); border-color:color-mix(in srgb,var(--crit) 30%, transparent)}
.alert.warn{background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 30%, transparent)}
.alert.ok{background:var(--good-bg); border-color:color-mix(in srgb,var(--good) 30%, transparent)}
.alert .top{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.82rem}
.dot{width:9px;height:9px;border-radius:99px;flex:none}
.alert.crit .dot{background:var(--crit)} .alert.warn .dot{background:var(--warn)} .alert.ok .dot{background:var(--good)}
.alert .big{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.alert p{margin:0; font-size:.76rem; color:var(--muted); line-height:1.45}
.alert-detail-toggle{align-self:flex-start; font:inherit; font-size:.7rem; font-weight:700; color:var(--ink);
  background:none; border:none; padding:2px 0; cursor:pointer; text-decoration:underline; opacity:.8}
.alert-detail-toggle:hover{opacity:1}
.alert-detail-list{display:flex; flex-direction:column; gap:4px; max-height:180px; overflow-y:auto;
  margin-top:2px; padding-top:8px; border-top:1px solid color-mix(in srgb, currentColor 15%, transparent)}
.alert-detail-row{display:grid; grid-template-columns:1fr auto auto; gap:8px; font-size:.7rem}
.alert-detail-row .faint{color:var(--faint); font-variant-numeric:tabular-nums}

/* Bar rows */
.rows{display:flex; flex-direction:column; gap:11px}
.row{display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:12px}
.row .name{font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.track{height:16px; background:var(--grid); border-radius:6px; overflow:hidden; position:relative}
.fill{height:100%; border-radius:6px; transition:filter .15s}
.fill:hover{filter:brightness(1.08)}
.row .num{font-size:.82rem; font-weight:700; min-width:34px; text-align:right}

/* Day bars (vertical) — largura fixa por dia + scroll horizontal, pra uma
   janela grande (ex.: 30 dias) não esticar o card e empurrar o vizinho
   (flex:1 sem limite forçava o container a crescer pelo conteúdo mínimo). */
.days{display:flex; align-items:flex-end; gap:16px; height:150px; padding-top:8px;
  padding-bottom:6px; overflow-x:auto; min-width:0}
.day{flex:0 0 44px; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end}
.day .bar{width:100%; max-width:64px; background:linear-gradient(180deg,var(--cyan),color-mix(in srgb,var(--cyan) 55%, var(--surface)));
  border-radius:7px 7px 3px 3px; transition:filter .15s; min-height:6px}
.day .bar:hover{filter:brightness(1.08)}
.day .cap{font-size:.72rem; color:var(--muted); white-space:nowrap}
.day .n{font-size:.8rem; font-weight:700; white-space:nowrap}

/* Funnel */
.funnel{display:flex; flex-direction:column; gap:9px}
.fstep{display:flex; flex-direction:column; gap:4px}
.fstep .meta{display:flex; justify-content:space-between; font-size:.76rem}
.fstep .meta .l{color:var(--muted)} .fstep .meta .r{font-weight:700}
.ftrack{height:26px; background:var(--grid); border-radius:7px; overflow:hidden}
.ffill{height:100%; background:linear-gradient(90deg,var(--cyan),var(--cyan-soft)); border-radius:7px; display:flex; align-items:center; padding-left:10px; color:var(--navy); font-weight:800; font-size:.8rem}
.conv{font-size:.68rem; color:var(--faint); text-align:right}

.split{display:flex; flex-direction:column; gap:14px}
.legend{display:flex; gap:16px; font-size:.76rem; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.sw{width:11px;height:11px;border-radius:3px}

footer{font-size:.72rem; color:var(--faint); line-height:1.5; border-top:1px solid var(--border); padding-top:14px}

#tip{position:fixed; pointer-events:none; background:var(--navy); color:#fff; font-size:.72rem; padding:6px 9px;
  border-radius:7px; opacity:0; transition:opacity .1s; z-index:50; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.3);
  font-variant-numeric:tabular-nums}

/* Login */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.login-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow);
  padding:32px; width:100%; max-width:340px; display:flex; flex-direction:column; gap:16px}
.login-card .brand{justify-content:center; margin-bottom:4px}
.login-card label{font-size:.76rem; color:var(--muted); font-weight:600; display:block; margin-bottom:5px}
.login-card input{width:100%; font:inherit; font-size:.9rem; padding:10px 12px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink)}
.login-card input:focus{outline:2px solid var(--cyan-soft); outline-offset:1px}
.login-card button{font:inherit; font-weight:700; font-size:.88rem; padding:11px; border-radius:9px; border:none;
  background:var(--cyan); color:var(--navy); cursor:pointer}
.login-card button:hover{filter:brightness(1.05)}
.login-card button:disabled{opacity:.6; cursor:default}
.login-err{font-size:.78rem; color:var(--crit); min-height:1em}
.loading, .err-box{max-width:1080px; margin:60px auto; text-align:center; color:var(--muted); font-family:system-ui,sans-serif}

/* Bugs (issues/ocorrências/linha do tempo) */
.issue-list{display:flex; flex-direction:column; gap:8px; max-height:70vh; overflow-y:auto}
.issue-item{text-align:left; width:100%; font:inherit; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; cursor:pointer; display:flex; flex-direction:column; gap:3px}
.issue-item:hover{border-color:var(--faint)}
.issue-item.active{border-color:var(--cyan); background:color-mix(in srgb, var(--cyan) 8%, var(--surface-2))}
.issue-item .title{font-size:.82rem; font-weight:700}
.issue-item .meta{font-size:.7rem; color:var(--muted); display:flex; gap:10px}
.issue-item .fatal-badge{color:var(--crit); font-weight:700}
.occ-item{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px;
  border-bottom:1px solid var(--border); font-size:.78rem; cursor:pointer}
.occ-item:hover{background:var(--surface-2)}
.occ-item .dev{color:var(--muted)}
.timeline{display:flex; flex-direction:column; gap:2px; max-height:60vh; overflow-y:auto}
.tl-item{display:grid; grid-template-columns:70px 90px 1fr; gap:10px; align-items:start; padding:7px 8px;
  border-radius:8px; font-size:.76rem}
.tl-item.center{background:var(--crit-bg)}
.tl-item .tl-time{color:var(--faint); font-variant-numeric:tabular-nums}
.tl-item .tl-source{font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em}
.tl-item.crashlytics .tl-source{color:var(--crit)}
.tl-item.analytics .tl-source{color:var(--cyan)}
.tl-item .tl-event{font-weight:600}
.tl-item .tl-detail{color:var(--muted); font-size:.7rem; margin-top:2px}
.empty-hint{color:var(--faint); font-size:.8rem; padding:20px; text-align:center}

/* Assinantes */
.sub-table{width:100%; border-collapse:collapse; font-size:.8rem}
.sub-table th, .sub-table td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap}
.sub-table th{color:var(--muted); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em}
.sub-table-wrap{overflow-x:auto}
.status-pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:.72rem; font-weight:700}
.status-pill.trial{background:var(--warn-bg); color:var(--warn)}
.status-pill.assinante_pago{background:var(--good-bg); color:var(--good)}
.status-pill.expirado{background:var(--crit-bg); color:var(--crit)}
.status-pill.sem_assinatura{background:var(--surface-2); color:var(--faint)}
.status-pill.robo{background:var(--surface-2); color:var(--faint); text-decoration:line-through}
.sub-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.sub-filter{font:inherit; font-size:.76rem; font-weight:700; padding:6px 12px; border-radius:99px;
  border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer}
.sub-filter.active{background:var(--cyan); color:var(--navy); border-color:transparent}

/* ─────────────────────────────────────────────────────────────────────
   Home por perguntas (05/09/2026) — cada bloco responde uma pergunta, em
   vez de contadores soltos. Usa só os tokens já definidos acima.
   ───────────────────────────────────────────────────────────────────── */
.bloco{ margin:28px 0 0 }
.bloco.discreto{ opacity:.72 }
.bloco.discreto:hover{ opacity:1 }
.bloco-h{ display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:0 0 10px }
.bloco-h h2{ font-size:1.02rem; margin:0; letter-spacing:-.01em }
.cartao{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow); margin-bottom:12px }
.cartao h3{ font-size:.86rem; margin:0 0 4px; color:var(--muted);
  font-weight:600; display:flex; align-items:baseline; gap:8px }
.grade-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:820px){ .grade-2{ grid-template-columns:1fr } }

.destaque{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px }
.destaque b{ font-size:2rem; line-height:1; letter-spacing:-.02em }
.destaque span{ color:var(--muted); font-size:.84rem }
.forte{ font-size:1.05rem; font-weight:700; color:var(--ink) }
.crit-txt{ color:var(--crit) }

.plats{ display:flex; gap:14px; flex-wrap:wrap }
.plat{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted) }
.plat i{ width:9px; height:9px; border-radius:3px; display:inline-block }
.plat b{ color:var(--ink) }

/* Barras por dia — proporcionais, sem biblioteca. */
.barras{ display:flex; align-items:flex-end; gap:6px; height:120px; padding-top:6px }
.barra{ flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; height:100%; gap:6px; cursor:default }
.haste{ width:100%; max-width:46px; border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--cyan),var(--indigo)); transition:opacity .15s }
.barra:hover .haste{ opacity:.75 }
.barra .dia{ font-size:.66rem; color:var(--faint); white-space:nowrap }

.tab{ width:100%; border-collapse:collapse; font-size:.84rem }
.tab th{ text-align:left; font-weight:600; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--faint); padding:6px 8px; border-bottom:1px solid var(--border) }
.tab td{ padding:9px 8px; border-bottom:1px solid var(--grid); vertical-align:top }
.tab tr:last-child td{ border-bottom:0 }
.tab td .sub{ display:block; font-size:.72rem; color:var(--muted); font-weight:400 }
.tab tr.warn td:first-child{ box-shadow:inset 3px 0 0 var(--warn) }
.tab tr.crit td:first-child{ box-shadow:inset 3px 0 0 var(--crit) }

.delta{ font-size:.74rem; font-weight:600; padding:2px 7px; border-radius:999px; white-space:nowrap }
.delta.up{ color:var(--good); background:var(--good-bg) }
.delta.down{ color:var(--warn); background:var(--warn-bg) }
.delta.down-forte{ color:var(--crit); background:var(--crit-bg) }
.delta.zero,.delta.novo{ color:var(--muted); background:var(--surface-2) }

.lista{ list-style:none; margin:8px 0 0; padding:0 }
.lista li{ display:flex; align-items:baseline; gap:8px; padding:7px 0;
  border-bottom:1px solid var(--grid); font-size:.84rem }
.lista li:last-child{ border-bottom:0 }
.lista.compacta li{ padding:5px 0 }
.lista .sub{ color:var(--muted); font-size:.74rem }
.lista .tnum{ margin-left:auto; font-weight:600 }

.chip{ display:inline-block; font-size:.68rem; padding:2px 7px; border-radius:999px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--border) }
.chip.warn{ background:var(--warn-bg); color:var(--warn); border-color:transparent }

.destaque-alerta.alerta{ border-left:3px solid var(--crit) }
.destaque-alerta.tranquilo{ border-left:3px solid var(--good) }
.ok{ color:var(--good); font-size:.84rem; margin:8px 0 0 }
.vazio{ color:var(--faint); font-size:.82rem; margin:8px 0 0; font-style:italic }
.nota{ color:var(--muted); font-size:.74rem; line-height:1.45; margin:10px 0 0 }

.funil{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
@media (max-width:700px){ .funil{ grid-template-columns:repeat(2,1fr) } }
.etapa{ background:var(--surface-2); border-radius:10px; padding:12px 14px;
  display:flex; flex-direction:column; gap:2px }
.etapa b{ font-size:1.5rem; line-height:1.1; letter-spacing:-.02em }
.etapa span{ font-size:.74rem; color:var(--muted) }
.etapa i{ font-style:normal; font-size:.72rem; color:var(--cyan); font-weight:600 }

/* Aquisição por canal */
.rolagem{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.rolagem .tab{ min-width:560px }
.qual{ font-weight:700; padding:2px 8px; border-radius:999px; font-size:.78rem }
.qual.bom{ color:var(--good); background:var(--good-bg) }
.qual.medio{ color:var(--warn); background:var(--warn-bg) }
.qual.ruim{ color:var(--crit); background:var(--crit-bg) }

/* Assinantes — urgência visível na linha */
.sub-table tr.warn td:first-child{ box-shadow:inset 3px 0 0 var(--warn) }
.sub-table tr.crit td:first-child{ box-shadow:inset 3px 0 0 var(--crit) }
.sub-table .sub{ color:var(--muted); font-size:.74rem; font-weight:400 }

/* Bugs — o estado vem antes do volume */
.estado{ font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em }
.estado.vivo{ color:var(--crit); background:var(--crit-bg) }
.estado.parado{ color:var(--muted); background:var(--surface-2); font-weight:600; text-transform:none; letter-spacing:0 }
.metrica{ font-size:.76rem; color:var(--ink) }
.metrica.sub{ color:var(--muted); font-size:.72rem }

.estado.resolvido{ color:var(--good); background:var(--good-bg) }
.estado.ruido{ color:var(--muted); background:var(--surface-2); text-transform:none; letter-spacing:0 }
.estado.reaberto{ color:#fff; background:var(--crit) }
.btn-estado{ margin-left:auto; font-size:.7rem; padding:2px 9px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--muted); cursor:pointer }
.btn-estado:hover{ color:var(--ink); border-color:var(--cyan) }