:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --muted2:#64748b;
  --line:#e2e8f0;
  --accent:#7c3aed;
  --accent2:#22c55e;
  --danger:#ef4444;
  --shadow:0 18px 50px rgba(2,8,23,.12);
  --radius:22px;
  --max:720px;
  --font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.20), transparent 55%),
    radial-gradient(900px 520px at 90% 0%, rgba(34,197,94,.18), transparent 50%),
    var(--bg);
  color:var(--text);
}
.topbar{
  position:sticky; top:0; z-index:20;
  padding:14px 14px;
  backdrop-filter:saturate(160%) blur(12px);
  background:linear-gradient(135deg, rgba(124,58,237,.90), rgba(34,197,94,.85));
  border-bottom:1px solid rgba(255,255,255,.14);
}
.brand{display:flex; align-items:center; gap:12px; max-width:var(--max); margin:0 auto}
.brandMark{
  width:44px; height:44px; border-radius:16px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  display:grid; place-items:center; overflow:hidden;
}
.brandMark img{width:30px; height:30px; display:block}
.brandName{font-weight:1000; color:#fff; letter-spacing:.2px; font-size:15px; line-height:1.1}
.brandSub{color:rgba(255,255,255,.88); font-weight:700; font-size:12px}
.topRight{margin-left:auto}
.pill{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  color:#fff; font-weight:900;
  padding:8px 10px; border-radius:999px;
  font-size:12px;
}
.page{padding:14px 0 30px}
.shell{max-width:var(--max); margin:0 auto; padding:0 14px}
.progressWrap{margin:10px 0 14px}
.progressBar{
  height:10px; border-radius:999px;
  background:rgba(15,23,42,.08);
  overflow:hidden; border:1px solid rgba(15,23,42,.08);
}
.progressFill{height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:width .35s ease}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(124,58,237,.10);
  border:1px solid rgba(124,58,237,.18);
  color:#4c1d95; font-weight:1000; font-size:12px;
}
h1{margin:10px 0 8px; font-size:26px; letter-spacing:-.2px; line-height:1.08}
p{margin:0 0 12px; color:var(--muted); font-weight:650; line-height:1.45; font-size:15px}
.small{color:var(--muted2); font-weight:700; font-size:12px; line-height:1.35}
.hr{height:1px; background:var(--line); margin:14px 0}
.bullets{display:grid; gap:10px; margin-top:12px}
.bullet{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border-radius:16px;
  background:linear-gradient(180deg, rgba(124,58,237,.06), rgba(34,197,94,.06));
  border:1px solid rgba(15,23,42,.06);
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  margin-top:5px;
}
.field{margin-top:12px}
.input{
  width:100%; padding:14px 14px;
  border-radius:16px; border:1px solid var(--line);
  font-size:16px; font-weight:800;
  outline:none;
  background:#fff;
}
.input:focus{border-color:rgba(124,58,237,.45); box-shadow:0 0 0 4px rgba(124,58,237,.10)}
.row{display:flex; gap:10px; margin-top:14px}
.btn{
  width:100%;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  font-weight:1000; font-size:14px; letter-spacing:.3px;
  background:#0f172a;
  color:#fff;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#fff; color:var(--text); border-color:var(--line)}
.btn.success{background:linear-gradient(135deg, var(--accent), var(--accent2)); border-color:transparent}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}
.options{display:grid; gap:10px; margin-top:10px}
.opt{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  cursor:pointer;
  background:#fff;
  display:flex;
  gap:12px;
  align-items:center;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.opt:hover{transform:translateY(-1px)}
.opt.selected{
  border-color:rgba(124,58,237,.55);
  box-shadow:0 0 0 4px rgba(124,58,237,.10);
}
.thumb{
  width:92px; height:66px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(124,58,237,.06), rgba(34,197,94,.06));
  border:1px solid rgba(15,23,42,.06);
  flex:0 0 auto;
  display:grid; place-items:center;
}
.thumb img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.olabel{font-weight:1000; font-size:14px}
.onote{font-weight:750; font-size:12px; color:var(--muted2); margin-top:2px}
.infocard{
  margin-top:12px;
  border-radius:18px;
  padding:12px;
  border:1px solid rgba(124,58,237,.18);
  background:linear-gradient(180deg, rgba(124,58,237,.08), transparent 70%);
}
.infocard b{font-weight:1000}
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.kpi{
  border-radius:18px; border:1px solid var(--line);
  padding:12px; background:#fff;
}
.kpi.good{border-color:rgba(34,197,94,.35); background:linear-gradient(180deg, rgba(34,197,94,.10), transparent 70%)}
.kpi.danger{border-color:rgba(239,68,68,.35); background:linear-gradient(180deg, rgba(239,68,68,.08), transparent 70%)}
.k{font-weight:900; font-size:12px; color:var(--muted2)}
.v{font-weight:1000; font-size:20px; margin-top:4px}
.note{font-weight:750; font-size:12px; color:var(--muted); margin-top:2px}
.alert{
  border:1px solid rgba(239,68,68,.30);
  background:linear-gradient(180deg, rgba(239,68,68,.10), transparent 70%);
  padding:12px; border-radius:18px;
  font-weight:850; color:#7f1d1d; line-height:1.35;
}
.goodbox{
  border:1px solid rgba(34,197,94,.30);
  background:linear-gradient(180deg, rgba(34,197,94,.10), transparent 70%);
  padding:12px; border-radius:18px;
  font-weight:850; color:#064e3b; line-height:1.35;
}
.gauge{margin-top:12px}
.gline{height:14px;border-radius:999px;background:linear-gradient(90deg,#22c55e,#f59e0b,#ef4444);position:relative; overflow:hidden}
.gmarker{position:absolute;top:-18px;transform:translateX(-50%)}
.gmarker .tag{font-size:12px;font-weight:1000;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px;box-shadow:0 10px 18px rgba(2,8,23,.10)}
.gmarker .pin{width:10px;height:10px;border-radius:50%;background:#0f172a;margin:6px auto 0}
.chart{margin-top:12px;border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff}
.bars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end;height:150px}
.bar{position:relative;border-radius:16px;background:linear-gradient(180deg,rgba(34,197,94,.25),rgba(34,197,94,.95));height:18px;transition:height .6s ease}
.bar .lbl{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:1000;color:#0f172a;background:#fff;border:1px solid var(--line);padding:2px 8px;border-radius:999px;white-space:nowrap}
.barname{margin-top:8px;text-align:center;font-size:12px;color:var(--muted2);font-weight:900}
.loadingWrap{margin-top:12px}
.spinner{
  width:44px; height:44px; border-radius:999px;
  border:4px solid rgba(124,58,237,.20);
  border-top-color:rgba(124,58,237,.85);
  animation:spin 1s linear infinite;
  margin:2px 0 12px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.dots{display:flex; gap:10px; align-items:center; margin-top:12px}
.dotStep{
  width:12px; height:12px; border-radius:50%;
  background:rgba(124,58,237,.16);
  border:1px solid rgba(124,58,237,.18);
}
.dotStep.on{background:rgba(124,58,237,.85); border-color:rgba(124,58,237,.40)}
.checks{display:grid; gap:10px; margin-top:12px}
.check{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border-radius:16px;
  border:1px solid rgba(15,23,42,.06);
  background:linear-gradient(180deg, rgba(2,8,23,.03), transparent 70%);
}
.tick{
  width:18px; height:18px; border-radius:6px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  display:grid; place-items:center; color:#fff; font-weight:1000; font-size:12px; margin-top:1px;
}
.foot{display:flex; justify-content:center; gap:10px; padding:16px 4px 0}
.muted{color:var(--muted2); font-weight:800; font-size:12px}
@media (max-width:420px){
  .card{padding:16px}
  h1{font-size:24px}
  
}


/* --- PATCH: header removed visually, keep only progress bar --- */
.topbar{display:none !important;}

/* Mobile harmony: center card and push footer below fold */
@media (max-width: 520px){
  .shell{min-height:100vh; padding-top:18px; padding-bottom:28px;}
  .card{margin-top:10px;}
  .foot{margin-top:45vh;}
}


/* TDC PATCH: hide header + remove etapa pill numbers */
.topbar{display:none !important;}
main{padding-top:0 !important;}
.progressWrap{margin-top:14px;}


/* Ocultar badges (subtítulos do topo) em todas as etapas */
.badge{display:none !important;}