:root { --bg: #ECE6F4; --ink: #2A2238; --muted: #6B6080; --shell: #6C4FA3; --rule: rgba(42,34,56,.14); --warn: #9C2F4B; }
@media (prefers-color-scheme: dark) { :root { --bg: #1C1826; --ink: #EDE7F7; --muted: #A99EBF; --shell: #7559AE; --rule: rgba(237,231,247,.14); --warn: #E58AA3; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 40rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
h1 { font-size: 1.8rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
section { border-top: 1px solid var(--rule); padding-top: 1.25rem; margin-top: 1.5rem; }
label { display: block; font-size: .9rem; color: var(--muted); margin: .6rem 0 .2rem; }
input[type=text], input[type=password], input[type=number], input[type=datetime-local], input[type=url] { width: 100%; padding: .5rem .65rem; border-radius: 8px; border: 1.5px solid var(--rule); background: transparent; color: var(--ink); font: inherit; }
button { font: 600 .9rem/1 inherit; padding: .6rem .95rem; border-radius: 999px; border: 0; cursor: pointer; background: var(--shell); color: #fff; margin: .8rem .4rem 0 0; }
button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); }
button.small { padding: .35rem .6rem; margin: 0; font-size: .8rem; }
button:focus-visible, input:focus-visible { outline: 3px solid #F2C14E; outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
td, th { text-align: left; padding: .3rem .5rem .3rem 0; vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); font-size: .9rem; }
.msg { min-height: 1.4em; margin: .6rem 0 0; font-size: .95rem; }
.msg.bad { color: var(--warn); }
.check { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; }
.check label { margin: 0; color: var(--ink); font-size: 1rem; }
[hidden] { display: none; }
.gap { margin-top: 1.2rem; }
p, li { max-width: 36rem; }
ul { padding-left: 1.2rem; }
a { color: var(--shell); font-weight: 600; }
.note { border-left: 4px solid var(--shell); padding: .6rem .9rem; border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--shell) 9%, transparent); }