* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html { background: #f4f2fa; }

body {
    background:
        radial-gradient(circle at 82% 8%, rgba(255, 125, 104, 0.12), transparent 28rem),
        radial-gradient(circle at 12% 86%, rgba(117, 87, 255, 0.12), transparent 30rem),
        #f8f7fc;
    color: #17172b;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
    min-height: 100vh;
}

.layout {
    align-items: start;
    display: grid;
    gap: clamp(36px, 6vw, 88px);
    grid-template-columns: minmax(0, 1.18fr) minmax(380px, 0.82fr);
    margin: 0 auto;
    max-width: 1240px;
    min-height: 100vh;
    padding: clamp(20px, 3vh, 34px) 24px 48px;
}

.product {
    display: grid;
    gap: 24px;
    max-width: 670px;
}

.brand-lockup {
    align-items: center;
    display: flex;
    font-size: 21px;
    font-weight: 850;
    gap: 12px;
    letter-spacing: -0.03em;
}

.brand-mark {
    background: linear-gradient(145deg, #7557ff, #4d36cf);
    border-radius: 12px;
    color: #ffffff;
    display: grid;
    box-shadow: 0 10px 24px rgba(117, 87, 255, 0.28);
    font-size: 22px;
    font-weight: 800;
    height: 42px;
    place-items: center;
    width: 42px;
}

.brand-mark span {
    display: block;
    line-height: 1;
    transform: translateY(-1px);
}

.eyebrow {
    color: #7059d9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.11em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    font-size: clamp(46px, 5vw, 70px);
    letter-spacing: -0.055em;
    line-height: 0.98;
    margin-bottom: 18px;
}

h1 span { color: #7059d9; }

h2 {
    font-size: 28px;
    line-height: 1.1;
    margin-bottom: 0;
}

.summary {
    color: #5f6075;
    font-size: 18px;
    line-height: 1.55;
    max-width: 520px;
}

.hero-art {
    background: #111633;
    border: 1px solid rgba(117, 87, 255, 0.2);
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(35, 28, 83, 0.2);
    margin: 0;
    overflow: hidden;
    position: relative;
}

.hero-art::after {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    content: "";
    inset: 8px;
    pointer-events: none;
    position: absolute;
}

.hero-art img {
    display: block;
    height: auto;
    width: 100%;
}

.trust-points {
    color: #505168;
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 700;
    gap: 12px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.trust-points span { color: #7059d9; margin-right: 5px; }

.hosting-summary { background: rgba(255,255,255,.64); border: 1px solid rgba(96,82,160,.16); border-radius: 16px; padding: 14px 16px; }
.hosting-summary h2 { font-size: 17px; line-height: 1.35; margin: 3px 0 7px; }
.hosting-summary p { color: #505168; font-size: 13px; line-height: 1.5; margin: 5px 0; }
.hosting-summary a { color: #5537bd; font-weight: 700; }

.panel {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(96, 82, 160, 0.16);
    border-radius: 24px;
    box-shadow: 0 26px 70px rgba(32, 26, 67, 0.12);
    padding: clamp(24px, 3vw, 38px);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

body.register-mode .panel {
    border-color: rgba(226, 101, 78, 0.32);
    box-shadow: 0 26px 70px rgba(148, 68, 54, 0.13);
}

.form-heading { display: grid; gap: 8px; }
.form-heading .eyebrow { margin-bottom: 0; }
.form-heading p:last-child { color: #6b6b7c; font-size: 14px; margin: 0; }

.deep-link-notice {
    background: #f0f7ff;
    border: 1px solid #93c5fd;
    border-radius: 12px;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
}
.deep-link-notice[hidden] { display: none; }
.deep-link-notice h3 { color: #17365f; font-size: 17px; margin: 0; }
.deep-link-notice p { color: #344b68; font-size: 14px; line-height: 1.45; margin: 0; }

.login-form,
.session-panel {
    display: grid;
    gap: 18px;
}

.mfa-login-step { display: grid; gap: 18px; }
.mfa-login-step h3 { font-size: 22px; margin: 0; }
.login-form.session-recovery-active > :not(.form-heading):not(#session-recovery):not(#form-error) { display: none !important; }

.mode-tabs {
    background: #f0eef8;
    border: 1px solid #e2deef;
    border-radius: 12px;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
}

label {
    display: grid;
    gap: 8px;
}

label span {
    color: #344054;
    font-size: 14px;
    font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
    background: #fbfaff;
    border: 1px solid #d8d3e4;
    border-radius: 10px;
    color: #17202b;
    font: inherit;
    min-height: 48px;
    padding: 11px 13px;
    width: 100%;
}

select,
textarea {
    background: #fbfaff;
    border: 1px solid #d8d3e4;
    border-radius: 10px;
    color: #17202b;
    font: inherit;
    padding: 11px 13px;
    width: 100%;
}

select { min-height: 48px; }
textarea { min-height: 86px; resize: vertical; }
select:focus,
textarea:focus { border-color: #7557ff; outline: 3px solid rgba(117, 87, 255, 0.15); }
.account-settings { background: #faf9fd; border: 1px solid #ebe7f3; border-radius: 14px; padding: 16px; }

input:focus {
    border-color: #7557ff;
    outline: 3px solid rgba(117, 87, 255, 0.15);
}

body.register-mode input:focus {
    border-color: #e2654e;
    outline-color: rgba(226, 101, 78, 0.14);
}

.password-control { display: block; position: relative; }
.password-control input { padding-right: 48px; }
.password-toggle {
    align-items: center;
    background: transparent;
    border-radius: 8px;
    color: #6b6b7c;
    display: flex;
    height: 38px;
    justify-content: center;
    min-height: 0;
    padding: 0;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 38px;
}

.password-toggle:hover { background: #eeeaf9; color: #4d36cf; }
.password-toggle:focus-visible { outline: 3px solid rgba(117, 87, 255, 0.2); }
.eye-icon {
    border: 2px solid currentColor;
    border-radius: 70% 15%;
    display: block;
    height: 14px;
    position: relative;
    transform: rotate(45deg);
    width: 14px;
}
.eye-icon::after {
    background: currentColor;
    border-radius: 50%;
    content: "";
    display: block;
    height: 4px;
    margin: 3px;
    width: 4px;
}
.password-toggle[aria-pressed="true"] .eye-icon::before {
    background: currentColor;
    content: "";
    height: 2px;
    left: -4px;
    position: absolute;
    top: 6px;
    transform: rotate(-45deg);
    width: 20px;
}

.checkbox-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.checkbox-row input {
    height: 18px;
    width: 18px;
}

.form-error {
    color: #b42318;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    min-height: 20px;
}
.form-error:empty { display: none; }

.storage-note {
    color: #667085;
    font-size: 13px;
    line-height: 1.4;
    margin: -6px 0 0;
}

.field-guidance {
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
    margin: -10px 0 0;
}

.session-status {
    color: #2166d1;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    min-height: 20px;
}

.session-panel .verification-note {
    background: #dcfce7;
    border: 1px solid #22c55e;
    border-radius: 8px;
    color: #14532d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    padding: 12px 14px;
}

.verification-actions {
    display: grid;
    gap: 12px;
}

.security-actions {
    border-top: 1px solid #e4e9f1;
    display: grid;
    gap: 12px;
    padding-top: 14px;
}

.inline-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.security-list {
    display: grid;
    gap: 8px;
}

.security-row {
    align-items: center;
    border: 1px solid #e4e9f1;
    border-radius: 6px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 10px;
}

.security-row p,
.security-event {
    color: #4c5868;
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
}

.security-row button {
    min-height: 34px;
    padding: 8px 10px;
}

.code-output {
    background: #f8fafc;
    border: 1px solid #d9e0ea;
    border-radius: 6px;
    color: #344054;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
    padding: 10px 12px;
}

.mfa-qr-panel {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d9e0ea;
    border-radius: 10px;
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 14px;
}

.mfa-qr-panel canvas {
    background: #ffffff;
    border: 8px solid #ffffff;
    height: 220px;
    image-rendering: pixelated;
    max-width: 100%;
    width: 220px;
}

.mfa-qr-panel p {
    color: #344054;
    font-size: 13px;
    margin: 0;
    text-align: center;
}

button {
    background: linear-gradient(135deg, #7557ff, #5a3fd8);
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    min-height: 46px;
    padding: 12px 16px;
}

.button-link {
    align-items: center;
    background: linear-gradient(135deg, #7557ff, #5a3fd8);
    border-radius: 10px;
    color: #ffffff;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 46px;
    padding: 0 16px;
    text-decoration: none;
}

button:not(.password-toggle):hover { filter: brightness(1.04); transform: translateY(-1px); }
body.register-mode #submit-button { background: linear-gradient(135deg, #c14f39, #a93f2c); }

.mode-tab {
    background: transparent;
    color: #344054;
    min-height: 38px;
    padding: 8px 10px;
}

.mode-tab.active {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
    color: #5a3fd8;
}

body.register-mode .mode-tab.active { color: #a93f2c; }

.secondary-button {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #17202b;
}

.link-button {
    background: transparent;
    color: #2166d1;
    justify-self: start;
    min-height: 0;
    padding: 0;
}

button:focus-visible,
.button-link:focus-visible,
.site-footer a:focus-visible {
    outline: 3px solid rgba(117, 87, 255, 0.32);
    outline-offset: 3px;
}

button:disabled {
    cursor: progress;
    opacity: 0.65;
}

.session-panel p {
    color: #4c5868;
    line-height: 1.45;
}

html[data-effective-theme="dark"] { background: #0d1020; color-scheme: dark; }
html[data-effective-theme="dark"] body {
    background:
        radial-gradient(circle at 82% 8%, rgba(193, 79, 57, 0.13), transparent 28rem),
        radial-gradient(circle at 12% 86%, rgba(117, 87, 255, 0.17), transparent 30rem),
        #101326;
    color: #f4f2ff;
}
html[data-effective-theme="dark"] .panel { background: rgba(25, 27, 48, 0.94); border-color: #3a3b61; box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34); }
html[data-effective-theme="dark"] .summary,
html[data-effective-theme="dark"] .trust-points,
html[data-effective-theme="dark"] .form-heading p:last-child,
html[data-effective-theme="dark"] .storage-note,
html[data-effective-theme="dark"] .field-guidance,
html[data-effective-theme="dark"] .session-panel p,
html[data-effective-theme="dark"] .security-row p,
html[data-effective-theme="dark"] .security-event { color: #b9bad0; }
html[data-effective-theme="dark"] label span { color: #d7d7e8; }
html[data-effective-theme="dark"] .mode-tabs { background: #101326; border-color: #393a59; }
html[data-effective-theme="dark"] .mode-tab { color: #c8c8da; }
html[data-effective-theme="dark"] .mode-tab.active { background: #292b49; color: #b9acff; }
html[data-effective-theme="dark"] input[type="text"],
html[data-effective-theme="dark"] input[type="email"],
html[data-effective-theme="dark"] input[type="tel"],
html[data-effective-theme="dark"] input[type="password"],
html[data-effective-theme="dark"] select,
html[data-effective-theme="dark"] textarea { background: #111427; border-color: #434461; color: #f5f4ff; }
html[data-effective-theme="dark"] .account-settings,
html[data-effective-theme="dark"] .code-output { background: #14172b; border-color: #3d3e5b; color: #e2e1ef; }
html[data-effective-theme="dark"] .security-actions,
html[data-effective-theme="dark"] .security-row { border-color: #3d3e5b; }
html[data-effective-theme="dark"] .secondary-button { background: #242741; border-color: #555777; color: #f5f4ff; }
html[data-effective-theme="dark"] .password-toggle { color: #c5c5db; }
html[data-effective-theme="dark"] .password-toggle:hover { background: #333654; color: #d9d1ff; }
html[data-effective-theme="dark"] input:focus,
html[data-effective-theme="dark"] select:focus,
html[data-effective-theme="dark"] textarea:focus,
html[data-effective-theme="dark"] .password-toggle:focus-visible,
html[data-effective-theme="dark"] button:focus-visible,
html[data-effective-theme="dark"] .button-link:focus-visible,
html[data-effective-theme="dark"] .site-footer a:focus-visible { border-color: #c4b5fd; outline-color: #c4b5fd; }
html[data-effective-theme="dark"] body.register-mode input:focus { border-color: #ff9d8a; outline-color: #ff9d8a; }
html[data-effective-theme="dark"] .link-button,
html[data-effective-theme="dark"] .session-status { color: #8fb9ff; }
html[data-effective-theme="dark"] .form-error { color: #ff9d94; }
html[data-effective-theme="dark"] .deep-link-notice { background: #13233b; border-color: #315a8d; }
html[data-effective-theme="dark"] .deep-link-notice h3 { color: #dbeafe; }
html[data-effective-theme="dark"] .deep-link-notice p { color: #bfdbfe; }
html[data-effective-theme="dark"] .session-panel .verification-note { background: #052e16; border-color: #22c55e; color: #dcfce7; }
html[data-effective-theme="dark"] .hosting-summary { background: #202035; border-color: #41415f; }
html[data-effective-theme="dark"] .hosting-summary p { color: #c8c9dc; }
html[data-effective-theme="dark"] .hosting-summary a { color: #c4b5fd; }

@media (max-width: 760px) {
    .layout {
        align-content: start;
        align-items: stretch;
        gap: 18px;
        grid-template-columns: 1fr;
        min-height: 100dvh;
        padding: max(12px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
    }

    h1 {
        font-size: 46px;
    }

    .product { display: contents; }
    .brand-lockup { order: 1; }
    .hero-copy { display: none; }
    .panel { order: 2; padding: 22px; }
    .hero-art { order: 4; }
    .trust-points { order: 5; }
    .hosting-summary { order: 6; }
    .hero-art { border-radius: 20px; }

    .inline-actions,
    .security-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) and (max-height: 620px) {
    .hero-art, .trust-points, .hosting-summary { display: none; }
    .layout {
        gap: 10px;
        padding: max(8px, env(safe-area-inset-top, 0px)) 16px max(10px, env(safe-area-inset-bottom, 0px));
    }
    .brand-lockup { gap: 10px; }
    .brand-mark { border-radius: 10px; font-size: 20px; height: 38px; width: 38px; }
    .panel { border-radius: 18px; padding: 14px 18px; }
    .login-form, .mfa-login-step { gap: 10px; }
    .form-heading { gap: 4px; }
    .mode-tabs { padding: 3px; }
    .login-form input[type="text"],
    .login-form input[type="email"],
    .login-form input[type="tel"],
    .login-form input[type="password"] { min-height: 44px; padding-block: 9px; }
    .login-form .password-toggle { height: 34px; top: 5px; width: 34px; }
    body:not(.register-mode) #remember-device-row,
    body:not(.register-mode) #auth-storage-note { display: none !important; }
}

@media (max-width: 760px) and (max-height: 460px) {
    body:not(.register-mode):not(.reauth-mode) #auth-mode-tabs { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    button:not(.password-toggle):hover { transform: none; }
}

.site-footer { color: #667085; padding: 0 20px 24px; text-align: center; }
.site-footer a { color: inherit; }
.legal-page { margin: 0 auto; max-width: 760px; padding: max(28px, env(safe-area-inset-top, 0px)) 20px max(40px, env(safe-area-inset-bottom, 0px)); }
.legal-page h1 { font-size: clamp(36px, 7vw, 58px); margin-top: 32px; }
.legal-page h2 { margin-top: 32px; }
.legal-page p { color: #505168; font-size: 17px; line-height: 1.7; }
.legal-header { margin: 0 auto; max-width: 920px; padding: max(20px, env(safe-area-inset-top, 0px)) 20px 0; }
.legal-brand { color: inherit; text-decoration: none; width: fit-content; }
.legal-page > .eyebrow { margin-top: 40px; }
.legal-page section { scroll-margin-top: 24px; }
.legal-page a { color: #5537bd; font-weight: 700; text-underline-offset: 3px; }
.legal-page code { background: #ece9f8; border-radius: 5px; padding: 2px 5px; }
.review-notice,
.review-status { background: rgba(255,255,255,.75); border: 1px solid rgba(96,82,160,.2); border-radius: 18px; margin-top: 28px; padding: 20px; }
.review-notice h2,
.review-status h2 { font-size: 20px; margin: 0 0 8px; }
.review-notice p,
.review-status p { font-size: 15px; margin: 0; }
html[data-effective-theme="dark"] .legal-page p { color: #c8c9dc; }
html[data-effective-theme="dark"] .legal-page a { color: #c4b5fd; }
html[data-effective-theme="dark"] .legal-page code { background: #292b49; }
html[data-effective-theme="dark"] .review-notice,
html[data-effective-theme="dark"] .review-status { background: #202035; border-color: #41415f; }

@media (prefers-color-scheme: dark) {
    html:not([data-effective-theme]) { background: #101326; }
    html:not([data-effective-theme]) .legal-document { background: #101326; color: #f4f2ff; }
    html:not([data-effective-theme]) .legal-page p { color: #c8c9dc; }
    html:not([data-effective-theme]) .legal-page a { color: #c4b5fd; }
    html:not([data-effective-theme]) .legal-page code { background: #292b49; }
    html:not([data-effective-theme]) .review-notice,
    html:not([data-effective-theme]) .review-status { background: #202035; border-color: #41415f; }
}

@media (max-width: 520px) {
    .legal-page > .eyebrow { margin-top: 24px; }
    .legal-page h1 { margin-top: 18px; }
    .review-notice,
    .review-status { border-radius: 14px; padding: 16px; }
}

@media (max-width: 360px) {
    .layout { gap: 14px; padding-inline: 16px; }
    .panel { padding: 18px 22px; }
    .login-form { gap: 14px; }
    .form-heading { gap: 5px; }
    .storage-note { font-size: 12px; line-height: 1.35; }
}

@media (max-width: 360px) and (max-height: 460px) {
    .layout {
        gap: 8px;
        padding: max(8px, env(safe-area-inset-top, 0px)) 16px max(8px, env(safe-area-inset-bottom, 0px));
    }
    .panel { padding: 12px 16px; }
    .login-form, .mfa-login-step { gap: 8px; }
    .form-heading { gap: 3px; }
}