:root { color-scheme: dark; font-family: -apple-system, system-ui, sans-serif; background: #14102a; color: #ece8ff; }
body { margin: 0; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
main { max-width: 32rem; margin: 0 auto; padding-bottom: 2rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; }
section { background: #221b45; border-radius: 12px; padding: 4px 14px 14px; margin: 12px 0; }
ul { list-style: none; padding: 0; margin: 0; }
li { padding: 6px 0; border-bottom: 1px solid #332a63; font-size: 0.9rem; overflow-wrap: anywhere; }
label { display: block; margin: 8px 0; font-size: 0.9rem; }
select, button { font: inherit; border-radius: 8px; border: 0; padding: 10px 12px; background: #3a2f72; color: inherit; }
select { width: 100%; margin-top: 4px; }
button.primary { background: #f2b33d; color: #14102a; font-weight: 600; width: 100%; margin-top: 10px; }
button.small { padding: 4px 10px; font-size: 0.8rem; }
.row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hint { color: #a99fd8; font-size: 0.85rem; }
.ok { color: #7ee2a0; }
.bad { color: #ff8b8b; }