:root{
  --bg:#0b1215;
  --bg-soft:#0f161a;
  --card:#121a1f;
  --text:#e7f2f0;
  --muted:#9fb2ad;
  --primary:#11c26f;
  --primary-2:#0ee29a;
  --gold:#ffd54a;
  --ring: rgba(17,194,111,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(1200px 800px at 80% -10%,rgba(17,194,111,.08),transparent 55%),
    radial-gradient(1000px 700px at -10% 110%,rgba(14,226,154,.06),transparent 50%),
    var(--bg);
  color:var(--text); font:500 16px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.app{min-height:100%;display:grid;grid-template-rows:auto 1fr auto}

/* header */
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background:linear-gradient(180deg,rgba(8,12,14,.75),rgba(8,12,14,.35));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar{
  max-width:1100px; margin:0 auto; padding:14px 16px;
  display:flex; align-items:center; gap:12px;
}
.logo{
  width:34px; height:34px; border-radius:10px;
  background: radial-gradient(100% 100% at 30% 30%, var(--gold), #e5b300);
  box-shadow: 0 0 24px rgba(255,213,74,.45), inset 0 0 12px rgba(255,255,255,.25);
  display:grid; place-items:center; font-weight:900; color:#08120a;
}
.title{
  font-weight:900; letter-spacing:.2px; font-size:18px;
  background: linear-gradient(90deg, #fff, var(--gold));
  -webkit-background-clip: text; background-clip:text; color:transparent;
  text-shadow: 0 0 8px rgba(255,213,74,.25);
}
.badge{
  font-weight:900; color:var(--gold);
  background:rgba(255,213,74,.12); border:1px solid rgba(255,213,74,.45);
  padding:4px 10px; border-radius:999px; font-size:12px;
}
.spacer{flex:1}

/* layout principal */
main{padding:16px}
.wrap{max-width:1100px;margin:0 auto;display:grid;gap:16px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* CTA com botão centralizado */
.cta{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:18px; border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(17,194,111,.06), rgba(17,194,111,.0));
}
.hint{color:var(--muted); font-size:14px; text-align:center}

/* botão */
.btn{
  appearance:none; border:0; cursor:pointer; user-select:none;
  padding:14px 18px; border-radius:14px; font-weight:900; letter-spacing:.2px;
  color:#062d1f; background:linear-gradient(180deg, var(--primary-2), var(--primary));
  box-shadow: 0 10px 30px rgba(17,194,111,.35), 0 0 0 0 rgba(17,194,111,.0);
  transform: translateZ(0); transition: transform .15s ease, box-shadow .25s ease, opacity .2s ease;
  position:relative; overflow:hidden; min-width:260px; text-align:center;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 34px rgba(17,194,111,.45), 0 0 0 6px var(--ring) }
.btn:active{ transform: translateY(1px) }
.btn .sub{ display:block; font-size:12px; font-weight:700; opacity:.85 }
.btn:disabled{
  opacity:.55; cursor:not-allowed; box-shadow:none;
  filter:saturate(.7);
}

/* Probabilidade */
.prob-wrap{ padding:16px; display:grid; gap:10px }
.prob-head{ display:flex; align-items:center; gap:10px }
.prob-dot{
  width:12px; height:12px; border-radius:999px;
  background: radial-gradient(circle at 40% 35%, var(--primary-2), var(--primary));
  box-shadow: 0 0 16px var(--primary);
}
.prob-val{
  margin-left:auto;
  font-weight:900; font-size:20px; letter-spacing:.3px;
  color:var(--primary-2);
  text-shadow: 0 0 16px rgba(14,226,154,.35);
}

/* Barra animada */
.bar{
  position:relative; width:100%; height:16px; border-radius:999px;
  background:#0d1519; border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(17,194,111,.12), 0 6px 20px rgba(0,0,0,.25);
  overflow:hidden;
}
.bar-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, #10e7a0, #11c26f);
  box-shadow: 0 0 20px rgba(17,194,111,.45);
  transition: width .7s cubic-bezier(.22,1,.36,1);
}
.bar-scale{
  display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-top:6px;
}

/* Iframe */
.iframe-wrap{ display:grid; }
.iframe{
  width:100%; height: calc(100vh - 280px);
  border:0; display:block; background:#0a0f12;
}
@media (max-width: 900px){
  .iframe{ height: calc(100vh - 320px); }
}

/* footer */
footer{
  display:flex; align-items:center; justify-content:center;
  gap:8px; padding:18px; color:var(--muted); font-size:13px;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(8,12,14,.35),rgba(8,12,14,.75));
}
