:root { color-scheme: light; font-family: Georgia, "Times New Roman", serif; background: #f4efe7; color: #141937; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 85% 5%, #cdeff5 0, transparent 28%), #f4efe7; }
button { border: 0; border-radius: 999px; padding: 0.8rem 1.2rem; background: #141937; color: #fff; font: inherit; cursor: pointer; }
input { display: block; width: 100%; margin-top: 0.45rem; border: 1px solid #b8b4aa; border-radius: 0.65rem; padding: 0.8rem; background: #fffdf8; font: inherit; }
.auth-card, .shell { max-width: 960px; margin: 8vh auto; padding: 2rem; }
.auth-card { max-width: 480px; border: 1px solid #d6d0c5; border-radius: 1.2rem; background: rgba(255,253,248,.88); box-shadow: 0 1.5rem 4rem rgba(20,25,55,.1); }
h1 { margin: 0 0 0.8rem; font-size: clamp(2.4rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.05em; }
h2 { margin-top: 0; font-size: 1.8rem; }
.eyebrow { color: #b02989; font: 700 .72rem/1.2 Arial, sans-serif; letter-spacing: .16em; }
.auth-card p:not(.eyebrow) { color: #5b5d6c; line-height: 1.6; margin-bottom: 2rem; }
header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.badge, .queue-item span { display: inline-block; border-radius: 999px; padding: .45rem .7rem; background: #e7d8ef; color: #702267; font: 700 .68rem Arial, sans-serif; letter-spacing: .08em; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.panel { border: 1px solid #d6d0c5; border-radius: 1.2rem; padding: 1.4rem; background: rgba(255,253,248,.78); }
label { display: block; margin: 1rem 0; font: 700 .82rem Arial, sans-serif; }
.muted, #form-message { color: #686a78; }
.queue-item { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; padding: .8rem; border: 1px solid #d6d0c5; border-radius: .8rem; }
.queue-item strong { margin-right: auto; }
.queue-item button { font-size: .82rem; padding: .55rem .8rem; }
.verified { background: #ccebe0 !important; color: #12654d !important; }
@media (max-width: 700px) { .auth-card, .shell { margin: 2rem auto; padding: 1.1rem; } .grid { grid-template-columns: 1fr; } header { align-items: start; flex-direction: column; } }
