:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #09070f; color: #f7f4ff; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% -15%, #29144e 0, #0a0810 42%); }
main { width: min(1120px, 100%); margin: 0 auto; padding: 28px 18px 50px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.brand, .eyebrow { color: #b884ff; font-size: 12px; font-weight: 850; letter-spacing: .11em; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel { padding: 22px; border: 1px solid #302640; border-radius: 20px; background: rgba(21, 16, 30, .96); box-shadow: 0 22px 60px rgba(0,0,0,.26); }
.auth-panel { margin-bottom: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr); align-items: end; gap: 18px; }
.auth-panel p { margin: 0 0 3px; color: #8f859e; font-size: 12px; line-height: 1.5; }
h1 { margin: 8px 0 20px; font-size: 26px; letter-spacing: -.03em; }
label { display: grid; gap: 7px; margin-top: 13px; color: #aaa0b9; font-size: 12px; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid #3a2f4a; border-radius: 12px; background: #100c17; color: #f7f4ff; padding: 12px 13px; outline: none; font: inherit; }
input:focus, select:focus, textarea:focus { border-color: #8d58e9; box-shadow: 0 0 0 3px rgba(141,88,233,.14); }
textarea { min-height: 82px; resize: vertical; }
button { min-height: 43px; border-radius: 12px; color: white; font: inherit; font-weight: 750; cursor: pointer; }
.primary { width: 100%; margin-top: 18px; border: 0; background: linear-gradient(135deg, #975cff, #6833ce); }
.ghost { border: 1px solid #453559; background: #15101e; padding: 0 16px; }
button:disabled { opacity: .6; cursor: wait; }
.result { margin-top: 16px; white-space: pre-wrap; color: #c9bfd8; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.55; }
.result.success { border-color: rgba(77, 213, 145, .45); }
.result.error { border-color: rgba(255, 91, 124, .48); }
@media (max-width: 760px) { .grid, .auth-panel { grid-template-columns: 1fr; } header { align-items: flex-start; } }