:root { color-scheme: dark; }
    * { box-sizing: border-box; }
    body {
        margin: 0; min-height: 100vh;
        display: grid; place-items: center;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
        background: radial-gradient(1200px 600px at 20% 10%, #1f2a44 0%, #0b0f1a 60%) fixed;
        color: #e6e9f0;
    }
    .card {
        width: min(380px, 92vw);
        background: #121826;
        border: 1px solid #1f2a44;
        border-radius: 14px;
        padding: 28px 28px 24px;
        box-shadow: 0 20px 60px rgba(0,0,0,.45);
    }
    h1 { margin: 0 0 4px; font-size: 20px; }
    .sub { margin: 0 0 22px; color: #94a3b8; font-size: 13px; }
    label { display: block; font-size: 12px; color: #94a3b8; margin: 12px 0 6px; }
    input {
        width: 100%; padding: 11px 12px;
        background: #0b0f1a; color: #e6e9f0;
        border: 1px solid #243049; border-radius: 8px;
        font-size: 14px; outline: none;
        transition: border-color .15s;
    }
    input:focus { border-color: #4f7cff; }
    button {
        margin-top: 18px; width: 100%; padding: 11px 12px;
        background: #4f7cff; color: white;
        border: 0; border-radius: 8px;
        font-size: 14px; font-weight: 600;
        cursor: pointer;
        transition: background .15s;
    }
    button:hover { background: #3f6ae6; }
    .err {
        margin-top: 14px;
        background: #2a1620; color: #ffb3c1;
        border: 1px solid #5a2533;
        padding: 9px 11px; border-radius: 8px;
        font-size: 13px;
    }