:root{
  --bg:#1b1230; --bg2:#241a3f; --card:#2a1f49; --line:#3b2f63;
  --txt:#f3ecff; --mut:#b9aed6; --acc:#d9b45a; --acc2:#9b7bff;
  --ok:#6ed29a; --warn:#ffb86b; --danger:#ff7a8a;
  --r:14px; --tab:62px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom) + 44px);
}
a{color:var(--acc);text-decoration:none}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h1{font-size:1.55rem} h2{font-size:1.2rem;color:var(--acc)} h3{font-size:1.02rem}
p{margin:.4em 0 .9em}

.topbar{
  position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top));
  background:rgba(27,18,48,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.brand{font-weight:800; font-size:1.15rem; color:var(--txt); letter-spacing:.3px}
.btn-install{background:var(--acc);color:#2a1d00;border:0;border-radius:999px;padding:6px 14px;font-weight:700}

#app{max-width:760px; margin:0 auto; padding:16px; outline:none}
.loading{color:var(--mut)}

.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex;
  height:calc(var(--tab) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:var(--bg2); border-top:1px solid var(--line);
}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:.72rem; color:var(--mut); gap:2px}
.tabbar a .ic{font-size:1.3rem; line-height:1}
.tabbar a.on{color:var(--acc)}
.aviso-fixo{
  position:fixed; left:0; right:0; bottom:calc(var(--tab) + env(safe-area-inset-bottom)); z-index:25; margin:0;
  background:#120b22; color:var(--mut); font-size:.72rem; text-align:center; padding:4px 10px; border-top:1px solid var(--line);
}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin:0 0 12px}
.card.hero{background:linear-gradient(135deg,#3a2870,#2a1f49); border-color:#5a45a0}
.muted{color:var(--mut)}
.src{color:var(--mut); font-size:.82em}
.nf{color:var(--mut); font-style:italic}
.chip{display:inline-block; background:var(--bg2); border:1px solid var(--line); color:var(--txt); border-radius:999px; padding:4px 12px; margin:0 6px 6px 0; font-size:.88rem}
.chip.on{background:var(--acc); color:#2a1d00; border-color:var(--acc); font-weight:700}
.badge{display:inline-block; font-size:.72rem; padding:2px 8px; border-radius:6px; background:var(--bg2); border:1px solid var(--line); color:var(--mut); margin-right:6px}

.grid{display:grid; gap:10px; grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
.tile{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 12px; color:var(--txt); text-align:left}
.tile b{display:block; color:var(--acc)} .tile small{color:var(--mut)}
.goal{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:64px; font-weight:600}

.list{display:flex; flex-direction:column; gap:10px}
.item{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; color:var(--txt)}
.item b{display:block; font-size:1.02rem}
.item small{color:var(--mut)}

.back{display:inline-block; margin:0 0 10px; color:var(--mut)}
ul.plain{padding-left:1.1em; margin:.3em 0 .9em}
ul.plain li{margin:.25em 0}
ol.steps{padding-left:1.3em} ol.steps li{margin:.4em 0}

.alert{border-radius:var(--r); padding:12px 14px; margin:0 0 12px; border:1px solid}
.alert.warn{background:#3a2a10; border-color:#8a5a1a; color:#ffe2bd}
.alert.danger{background:#3b1520; border-color:#a33a4d; color:#ffd2d9}
.alert.info{background:#1d2748; border-color:#35508f; color:#d6e2ff}
.alert h3{margin:0 0 .3em}

.field{margin:0 0 .8em}
.field > .lbl{display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.6px; color:var(--mut)}

table{width:100%; border-collapse:collapse; font-size:.86rem}
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px}
th,td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
th{background:var(--bg2); color:var(--acc); position:sticky; top:0}

.btn{display:inline-block; border:0; border-radius:999px; padding:10px 18px; font-weight:700; background:var(--acc); color:#2a1d00; font-size:.95rem}
.btn.sec{background:var(--bg2); color:var(--txt); border:1px solid var(--line)}
.btn.wa{background:#25d366; color:#06361b}

.timeline{border-left:2px solid var(--line); margin-left:6px; padding-left:14px}
.timeline .ev{margin:0 0 14px; position:relative}
.timeline .ev::before{content:""; position:absolute; left:-21px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--acc)}
.timeline .when{font-weight:700; color:var(--acc)}

details{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; margin:0 0 10px}
details summary{cursor:pointer; font-weight:700}
input[type=search]{width:100%; padding:11px 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg2); color:var(--txt); font-size:1rem; margin-bottom:12px}