:root { --vip: #EC3034; --dark: #201C1C; --light: #ffffff; }
* { box-sizing: border-box; }
/* The sections use display:grid, which would override the hidden attribute. */
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--light); color: var(--dark); }
header { display: flex; align-items: center; gap: 12px; padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); background: var(--dark); color: var(--light); }
header h1 { margin: 0; font-size: 1.25rem; }
main { padding: 16px; max-width: 480px; margin: 0 auto; }
form, section { display: grid; gap: 12px; }
label { display: grid; gap: 4px; font-weight: 600; }
input { font-size: 1rem; padding: 12px; border: 1px solid #ccc; border-radius: 8px; }
button { font-size: 1rem; padding: 14px; border: 0; border-radius: 8px; background: var(--vip); color: var(--light); font-weight: 600; }
button#logout { background: transparent; color: var(--dark); border: 1px solid var(--dark); margin-top: 24px; width: 100%; }
#message { min-height: 1.5em; }