* { box-sizing: border-box; }
body { margin:0; font-family:Inter, system-ui, sans-serif; background:#0f0720; color:#e8e0ff; min-height:100vh; }
.wrap { max-width:960px; margin:0 auto; padding:1.5rem; }
h1 { font-size:1.2rem; color:#a78bfa; }
.sub { color:#9ca3af; font-size:0.9rem; }
.sub code { color:#c4b5fd; }
.grid { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:720px) { .grid { grid-template-columns:1fr 1fr; } }
.card { background:#1a1035; border:1px solid #3b2666; border-radius:12px; padding:1rem; }
.card h2 { font-size:1rem; color:#7c3aed; margin:0 0 0.75rem; }
.ent { font-family:ui-monospace,monospace; font-size:0.9rem; }
.bar { height:8px; background:#0a0418; border-radius:4px; overflow:hidden; margin:0.5rem 0; }
.barfill { height:100%; background:linear-gradient(90deg,#6d28d9,#a78bfa); transition:width 0.2s; }
.hint { font-size:0.75rem; color:#6b7280; margin:0.5rem 0; }
.bal { font-size:1.1rem; color:#a7f3d0; }
.in { width:100%; margin:0.5rem 0; padding:0.5rem; background:#0a0418; border:1px solid #4c1d95; color:#e8e0ff; border-radius:8px; }