:root { color-scheme: dark; font-family: Inter, "PingFang SC", system-ui, sans-serif; background: #09070d; color: #f7f4f8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 18% 16%, #55123f 0, transparent 32%), radial-gradient(circle at 88% 78%, #2d1148 0, transparent 35%), #09070d; }
.shell { width: min(92vw, 620px); padding: 28px; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: 12px; letter-spacing: .18em; color: #e8a5cf; }
.brand img { width: 40px; height: 40px; object-fit: cover; border-radius: 12px; }
.panel { padding: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(17, 12, 22, .88); box-shadow: 0 25px 80px rgba(0,0,0,.36); }
h1 { margin: 0 0 12px; font-size: clamp(28px, 5vw, 42px); }
p { color: #c7bdca; line-height: 1.7; }
button { border: 0; border-radius: 12px; padding: 12px 18px; color: white; background: linear-gradient(135deg, #d71683, #8a3ffc); font-weight: 700; cursor: pointer; }
.error { color: #ffb6d9; } .user { color: #fff; font-weight: 700; }