:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #07110f; color: #ecf5f1; }
    * { box-sizing: border-box; }
    body { min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 15% 10%, #103a30 0, transparent 34%), radial-gradient(ellipse at 92% 88%, #142d29 0, transparent 38%), #07110f; }
    a { color: inherit; }
    .shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; max-width: 1440px; margin: auto; padding: 28px clamp(20px, 5vw, 76px); gap: clamp(40px, 8vw, 120px); align-items: center; }
    .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 750; font-size: 18px; letter-spacing: -.03em; }
    .brand-logo { display:block; width:min(100%, 260px); height:auto; max-height:130px; object-fit:contain; }
    .panel .brand-logo { width:100px; max-height:50px; }
    .mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #2d7964; background: #123329; color: #72e3b7; border-radius: 13px; font-size: 21px; }
    .story { max-width: 560px; }
    .eyebrow { margin: 54px 0 16px; color: #80d6b6; text-transform: uppercase; font-size: 11px; font-weight: 750; letter-spacing: .17em; }
    h1 { margin: 0; max-width: 540px; font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -.055em; }
    .story-copy { max-width: 440px; margin: 22px 0 0; color: #a6bbb2; font-size: 16px; line-height: 1.75; }
    .feature { display: flex; gap: 12px; align-items: center; margin-top: 48px; color: #b8ccc3; font-size: 13px; }
    .pulse { width: 8px; height: 8px; border-radius: 50%; background: #5cdb9e; box-shadow: 0 0 16px #5cdb9e; }
    .panel { width: 100%; max-width: 460px; justify-self: end; padding: clamp(26px, 4vw, 42px); border: 1px solid #27433b; border-radius: 24px; background: linear-gradient(145deg, rgba(18, 35, 30, .97), rgba(11, 23, 20, .98)); box-shadow: 0 30px 100px #0007; }
    .auth-form-title { margin-top: 30px; }
    .panel h2 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
    .subhead { margin: 9px 0 28px; color: #9bb0a7; font-size: 14px; line-height: 1.6; }
    .field { margin-top: 18px; }
    label { display: block; margin-bottom: 8px; color: #d6e4dd; font-size: 13px; font-weight: 600; }
    input { width: 100%; height: 48px; border: 1px solid #314b42; border-radius: 11px; padding: 0 14px; background: #091511; color: #f1f8f4; font: inherit; font-size: 14px; outline: none; }
    input::placeholder { color: #6f867b; }
    input:focus { border-color: #53c99a; box-shadow: 0 0 0 3px #42c58b22; }
    .submit { width: 100%; height: 49px; margin-top: 24px; border: 0; border-radius: 11px; background: #46c58e; color: #062016; font: inherit; font-weight: 750; cursor: pointer; transition: background .15s, transform .15s; }
    .submit:hover { background: #64d9a7; transform: translateY(-1px); }
    .submit:disabled { opacity: .65; cursor: wait; transform: none; }
    .otp-recipient { margin: 18px 0 0; color:#9bb0a7; font-size:13px; overflow-wrap:anywhere; }
    .otp-recipient strong { color:#d6e4dd; }
    #signupOtp { font-size:22px; font-weight:750; letter-spacing:.42em; text-align:center; }
    .text-button { display:block; margin:13px auto 0; border:0; background:transparent; color:#83dfb9; font:inherit; font-size:13px; font-weight:650; cursor:pointer; }
    .text-button:hover { color:#a5f0cf; text-decoration:underline; }
    .text-button:disabled { opacity:.6; cursor:wait; }
    .signup-welcome { margin-top:30px; text-align:center; }
    .signup-welcome h2 { margin-top:16px; }
    .signup-welcome p { color:#9bb0a7; font-size:14px; line-height:1.6; }
    .welcome-mark { display:grid; width:52px; height:52px; place-items:center; margin:0 auto; border:1px solid #28795a; border-radius:50%; background:#123329; color:#82ddb3; font-size:27px; font-weight:800; }
    .welcome-continue { display:grid; align-items:center; text-decoration:none; }
    .signup-welcome[hidden] { display:none; }
    .error { margin: 16px 0 0; padding: 11px 13px; border: 1px solid #813e47; border-radius: 10px; background: #411c243d; color: #ffb2b9; font-size: 13px; line-height: 1.5; }
    .error[hidden] { display: none; }
    .error.success { border-color: #247455; background: #16432e66; color: #8de7bd; }
    .recovery-link { display: block; margin-top: 12px; color: #83dfb9; font-size: 12px; text-decoration: none; }
    .recovery-link:hover { text-decoration: underline; }
    .switch { margin: 23px 0 0; text-align: center; color: #9bb0a7; font-size: 13px; }
    .switch a { color: #75dcb0; font-weight: 650; text-decoration: none; }
    .switch a:hover { text-decoration: underline; }
    .secure { display: flex; gap: 8px; justify-content: center; margin-top: 27px; color: #71887e; font-size: 11px; }
    @media (max-width: 800px) { .shell { grid-template-columns: 1fr; max-width: 560px; padding-top: 25px; align-content: start; gap: 28px; } .story { display: none; } .panel { justify-self: center; margin: auto 0; } }