:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #101018; color: #f2f3f5; }
* { box-sizing: border-box; } body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 6% 14%, rgba(124,58,237,.38), transparent 30rem), radial-gradient(circle at 95% 90%, rgba(76,29,149,.32), transparent 34rem), #101018; }
.shell { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(360px, 1fr); width: min(100% - 40px, 980px); min-height: 610px; margin: 8vh auto 0; overflow: hidden; border: 1px solid rgba(167,139,250,.24); border-radius: 18px; background: #1e1f2b; box-shadow: 0 28px 100px rgba(0,0,0,.5); }
.welcome-panel { display: flex; flex-direction: column; padding: 42px; background: linear-gradient(150deg, #2b1853 0%, #1b1534 62%, #141522 100%); }.brand { display: flex; align-items: center; gap: 12px; }.brand img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 14px #8b5cf6); }.brand h1 { margin: 0; font-size: 1.45rem; letter-spacing: -.04em; }.brand p { margin: 3px 0; color: #c3b5e4; font-size: .9rem; }.welcome-copy { margin: auto 0 34px; }.eyebrow { margin: 0 0 10px; color: #c4b5fd; font-size: .72rem; font-weight: 800; letter-spacing: .13em; }.welcome-copy h2 { margin: 0 0 13px; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.05; letter-spacing: -.055em; }.welcome-copy p:not(.eyebrow) { margin: 0; color: #c9c5d4; line-height: 1.65; }.feature-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: #ded9ea; font-size: .92rem; }.feature-list span { display: inline-grid; width: 24px; place-items: center; color: #c4b5fd; }
.card { padding: clamp(32px, 6vw, 54px); background: #232530; }.card h2 { margin: 0 0 10px; font-size: 1.55rem; letter-spacing: -.03em; }.muted { margin: 0; color: #b5b9c7; line-height: 1.55; font-size: .94rem; } form { display: grid; gap: 17px; margin-top: 28px; } label { display: grid; gap: 8px; color: #d5d7de; font-size: .75rem; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; } input { width: 100%; padding: 13px 14px; border: 1px solid #151620; border-radius: 6px; outline: none; background: #181923; color: #f2f3f5; font: 400 .96rem inherit; text-transform: none; letter-spacing: normal; } input:focus { border-color: #a78bfa; box-shadow: 0 0 0 2px rgba(167,139,250,.25); } small { color: #9ea2b0; font-weight: 400; text-transform: none; letter-spacing: normal; } button { min-height: 45px; padding: 12px 16px; border: 0; border-radius: 5px; background: #7c3aed; color: #fff; cursor: pointer; font: 700 .95rem inherit; transition: background .15s ease, transform .15s ease; } button:hover { background: #8b5cf6; transform: translateY(-1px); } button:disabled { cursor: wait; opacity: .7; transform: none; }.notice { margin: 22px 0 0; padding: 12px; border-radius: 6px; color: #ddd6fe; background: rgba(109,40,217,.2); line-height: 1.5; font-size: .9rem; }.notice.error { color: #fecaca; background: rgba(127,29,29,.35); }.support { width: min(100% - 40px, 980px); margin: 18px auto 32px; color: #9ea2b0; text-align: right; font-size: .84rem; }.support a { color: #c4b5fd; text-decoration: none; }.support a:hover { text-decoration: underline; }
@media (max-width: 720px) { .shell { display: block; width: min(100% - 24px, 520px); min-height: 0; margin-top: 24px; }.welcome-panel { min-height: 270px; padding: 28px; }.welcome-copy { margin: auto 0 20px; }.feature-list { display: none; }.card { padding: 30px 25px; }.support { width: min(100% - 24px, 520px); text-align: center; } }