* { box-sizing: border-box; }
body { margin: 0; background: #0b1220; color: #f2f0ea; font-family: system-ui, -apple-system, sans-serif; }
#app { max-width: 560px; margin: 0 auto; padding: 0 14px 90px; }
#topbar { padding: 14px 0 8px; border-bottom: 2px solid #d4a017; }
.brand { font-weight: 800; letter-spacing: 1px; }
.build-tag { color: #d4a017; font-size: 13px; }
h1 { font-size: 26px; margin: 18px 0 6px; }
h2 { font-size: 18px; margin: 0 0 10px; }
p { line-height: 1.45; }
.muted { color: #aab2c0; }
.small { font-size: 13px; }
.card { background: #16203a; border: 1px solid #2a3a5e; border-radius: 12px; padding: 14px; margin: 12px 0; }
.card.dim { opacity: 0.75; }
.card.good { border-color: #4caf50; }
button { background: #2a3a5e; color: #fff; border: 0; border-radius: 10px; padding: 12px 16px; font-size: 16px; margin: 4px 4px 4px 0; cursor: pointer; }
button.primary { background: #d4a017; color: #111; font-weight: 700; }
button:disabled { opacity: 0.45; cursor: default; }
label { display: block; margin: 10px 0; font-size: 14px; }
input, select { width: 100%; padding: 11px; margin-top: 5px; border-radius: 8px; border: 1px solid #2a3a5e; background: #0b1220; color: #fff; font-size: 16px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.stats > div { background: #16203a; border-radius: 10px; padding: 12px; }
.stats span { display: block; color: #aab2c0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.stats b { font-size: 18px; }
ul { padding-left: 20px; }
li { margin: 6px 0; }
.recon { background: #0b1220; border-radius: 8px; padding: 10px; }
.skill { display: flex; align-items: center; gap: 8px; margin: 7px 0; font-size: 14px; }
.skill span { width: 95px; text-transform: capitalize; }
.skill .bar { flex: 1; height: 10px; background: #0b1220; border-radius: 5px; overflow: hidden; }
.skill .bar i { display: block; height: 100%; background: #d4a017; }
#tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: #111a30; border-top: 1px solid #2a3a5e; z-index: 10; }
#tabs button { flex: 1; background: none; border-radius: 0; margin: 0; padding: 10px 0 12px; font-size: 12px; color: #aab2c0; }
#tabs button.active { color: #d4a017; }
#tabs b { display: block; font-size: 20px; }
.toast { position: fixed; left: 14px; right: 14px; bottom: 76px; background: #22345c; border: 1px solid #d4a017; border-radius: 10px; padding: 12px; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 20; }
.toast.show { opacity: 1; }
.toast.bad { border-color: #e05252; }
.tag { font-size: 18px; }