:root { --auth-bg:#f7f9fc; --auth-fg:#172033; --auth-muted:#66758a; --auth-surface:#fff; --auth-soft:#f1f5f9; --auth-border:#dbe3ef; --auth-blue:#2563eb; }
* { box-sizing:border-box; }
html { color-scheme:light; }
html.theme-dark,[data-theme="dark"] { color-scheme:dark; --auth-bg:#0f172a; --auth-fg:#e5edf8; --auth-muted:#a9b8cb; --auth-surface:#111c31; --auth-soft:#17233a; --auth-border:#344866; }
body.auth-page { margin:0; min-height:100vh; background:radial-gradient(circle at 8% 0%,rgba(37,99,235,.1),transparent 31rem),var(--auth-bg); color:var(--auth-fg); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.auth-shell { width:min(100%,1090px); margin:auto; padding:clamp(20px,5vh,52px) 20px 16px; }
.auth-card { min-height:590px; display:grid; grid-template-columns:minmax(290px,.88fr) minmax(0,1.12fr); overflow:hidden; border:1px solid var(--auth-border); border-radius:32px; background:var(--auth-surface); box-shadow:0 22px 70px rgba(23,32,51,.08); }
.auth-aside { display:flex; flex-direction:column; justify-content:space-between; gap:50px; padding:clamp(30px,4vw,52px); color:#fff; background:radial-gradient(circle at 80% 15%,rgba(59,130,246,.2),transparent 14rem),#0f172a; }
.auth-brand { display:inline-flex; align-items:center; gap:12px; align-self:flex-start; color:#fff; font-size:21px; font-weight:700; letter-spacing:-.03em; text-decoration:none; }
.auth-brand:hover { color:#fff; }
.auth-brand img { display:block; width:48px; height:48px; padding:4px; border-radius:15px; background:#fff; object-fit:contain; }
.auth-eyebrow { display:inline-block; margin-bottom:18px; color:#93c5fd; font-size:11px; font-weight:700; letter-spacing:.19em; }
.auth-aside h1 { max-width:380px; margin:0; font-size:clamp(30px,3.2vw,43px); line-height:1.14; letter-spacing:-.045em; font-weight:700; }
.auth-aside p { max-width:370px; margin:18px 0 0; color:#cbd5e1; font-size:15px; line-height:1.7; }
.auth-aside-foot { display:flex; align-items:center; gap:10px; color:#cbd5e1; font-size:13px; }
.auth-aside-foot i { color:#93c5fd; }
.auth-content { display:flex; align-items:center; justify-content:center; min-width:0; padding:clamp(26px,5vw,64px); }
.auth-content-inner { width:100%; max-width:440px; }
.auth-content h1,.auth-content h2 { color:var(--auth-fg); letter-spacing:-.025em; }
.auth-content h1 { font-size:29px; line-height:1.2; font-weight:700; }
.auth-content h2 { font-size:27px; line-height:1.2; font-weight:700; }
.auth-content p { color:var(--auth-muted); }
.auth-content .text-white,.auth-content .text-gray-100,.auth-content .text-gray-200 { color:var(--auth-fg)!important; }
.auth-content .text-gray-300,.auth-content .text-gray-400,.auth-content .text-gray-500 { color:var(--auth-muted)!important; }
.auth-content .text-primary-400,.auth-content .text-blue-400 { color:var(--auth-blue)!important; }
.auth-content .bg-gray-800,.auth-content .bg-gray-800\/60,.auth-content .bg-gray-700\/30 { background:var(--auth-soft)!important; }
.auth-content .border-gray-700,.auth-content .border-gray-600 { border-color:var(--auth-border)!important; }
.auth-content form input:not([type="hidden"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]),.auth-content form select,.auth-content #email { width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--auth-border)!important; border-radius:12px; background:var(--auth-surface)!important; color:var(--auth-fg)!important; font:inherit; box-shadow:none!important; }
.auth-content input::placeholder { color:#94a3b8!important; opacity:1; }
.auth-content input:focus-visible,.auth-content select:focus-visible,.auth-content button:focus-visible,.auth-content a:focus-visible { outline:3px solid rgba(37,99,235,.28)!important; outline-offset:2px; }
.auth-content form input[type="checkbox"] { accent-color:var(--auth-blue); }
.auth-content label { color:var(--auth-fg)!important; font-size:13px; font-weight:600; }
.auth-content a { color:var(--auth-blue)!important; font-weight:600; text-decoration:none; }
.auth-content a:hover { text-decoration:underline; }
.auth-content a.auth-secondary { color:var(--auth-fg)!important; text-decoration:none; }
.auth-content form > button[type="submit"]:not(.auth-link-button):not(.auth-secondary),.auth-content form > div > button[type="submit"]:not(.auth-link-button):not(.auth-secondary),.auth-content .auth-primary { display:inline-flex; width:100%; min-height:48px; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border:1px solid #1d4ed8!important; border-radius:12px!important; background:var(--auth-blue)!important; color:#fff!important; font:inherit; font-weight:650; text-align:center; box-shadow:0 7px 14px rgba(37,99,235,.15); cursor:pointer; }
.auth-content form > button[type="submit"]:not(.auth-link-button):not(.auth-secondary):hover,.auth-content form > div > button[type="submit"]:not(.auth-link-button):not(.auth-secondary):hover,.auth-content .auth-primary:hover { background:#1d4ed8!important; text-decoration:none; }
.auth-content .auth-secondary { display:inline-flex; width:100%; min-height:48px; align-items:center; justify-content:center; gap:8px; border:1px solid var(--auth-border); border-radius:12px; background:var(--auth-surface); color:var(--auth-fg); font-weight:600; cursor:pointer; }
.auth-content .auth-secondary:hover { background:var(--auth-soft); }
.auth-content .auth-link-button { width:auto!important; min-height:0!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; color:var(--auth-blue)!important; font-size:14px; font-weight:600; }
.auth-content .auth-alert { padding:13px 15px; border-radius:12px; font-size:14px; line-height:1.5; }
.auth-content .auth-alert-error { border:1px solid #fecaca; background:#fef2f2; color:#991b1b; }
.auth-content .auth-alert-success { border:1px solid #a7f3d0; background:#ecfdf5; color:#065f46; }
.auth-content .auth-alert-warning { border:1px solid #fcd34d; background:#fffbeb; color:#92400e; }
.auth-content .auth-alert p { color:inherit; }
.auth-content .auth-step { display:flex; gap:7px; margin-bottom:24px; }
.auth-content .auth-step span { height:4px; flex:1; border-radius:9px; background:var(--auth-border); }
.auth-content .auth-step span.active { background:var(--auth-blue); }
.auth-content .auth-icon { display:inline-flex; width:52px; height:52px; align-items:center; justify-content:center; border-radius:16px; background:#dbeafe; color:#1d4ed8; font-size:21px; }
.auth-content .auth-details { border:1px solid var(--auth-border); border-radius:16px; background:var(--auth-soft); padding:18px; }
.auth-content .auth-details .font-semibold,.auth-content .auth-details code { color:var(--auth-fg); }
.auth-content .auth-client-logo { display:flex; width:64px; height:64px; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--auth-border); border-radius:17px; background:var(--auth-surface); color:var(--auth-blue); font-size:27px; }
.auth-client-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.auth-content .auth-scope { display:flex; align-items:center; gap:12px; padding:10px 0; color:var(--auth-fg); font-size:14px; font-weight:550; }
.auth-content .auth-scope + .auth-scope { border-top:1px solid var(--auth-border); }
.auth-content .auth-scope i { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:10px; background:#dbeafe; color:#2563eb; }
.auth-content .auth-terms { max-height:330px; overflow:auto; border:1px solid var(--auth-border); border-radius:14px; padding:18px; background:var(--auth-soft); color:var(--auth-fg); }
.auth-content .auth-terms p,.auth-content .auth-terms li { color:var(--auth-fg); }
.auth-content .auth-terms h2,.auth-content .auth-terms h3 { margin:16px 0 8px; font-size:16px; font-weight:700; }
.auth-content .auth-terms p,.auth-content .auth-terms ul,.auth-content .auth-terms ol { margin:8px 0; }
.auth-content .auth-terms a { color:var(--auth-blue); }
.ory-flow { width:100%; }
.ory-method { padding:18px; border:1px solid var(--auth-border); border-radius:18px; background:var(--auth-surface); }
.ory-method + .ory-method { margin-top:14px; }
.ory-method-heading { margin-bottom:16px; }
.ory-method-heading h3 { margin:0; color:var(--auth-fg); font-size:17px; font-weight:700; }
.ory-method-heading p { margin:5px 0 0; font-size:13px; line-height:1.5; }
.ory-field label { display:block; margin-bottom:8px; }
.ory-field-message { margin:6px 0 0; font-size:13px; line-height:1.45; }
.ory-checkbox { display:flex; align-items:flex-start; gap:10px; line-height:1.45; }
.ory-checkbox input { width:18px; height:18px; margin-top:1px; flex:0 0 auto; }
.ory-qr { display:flex; justify-content:center; padding:12px; border-radius:16px; background:#fff; }
.ory-qr img { display:block; width:min(100%,240px); height:auto; }
.ory-settings-list { display:grid; gap:10px; }
.ory-settings-list a { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; min-height:72px; padding:13px 15px; border:1px solid var(--auth-border); border-radius:16px; color:var(--auth-fg)!important; text-decoration:none!important; }
.ory-settings-list a:hover { background:var(--auth-soft); }
.ory-settings-list a > i:first-child { display:flex; width:38px; height:38px; align-items:center; justify-content:center; border-radius:12px; background:#dbeafe; color:#2563eb; }
.ory-settings-list span { min-width:0; }
.ory-settings-list strong,.ory-settings-list small { display:block; }
.ory-settings-list small { margin-top:3px; color:var(--auth-muted); font-size:12px; font-weight:400; }
.auth-shell-compact { width:min(100%,620px); }
.auth-compact-brand { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 18px; color:var(--auth-fg); font-size:20px; font-weight:750; text-decoration:none; }
.auth-compact-brand img { width:42px; height:42px; padding:4px; border-radius:13px; background:#fff; object-fit:contain; box-shadow:0 5px 20px rgba(15,23,42,.09); }
.auth-compact-card { display:block; min-height:0; padding:clamp(24px,5vw,44px); border:1px solid var(--auth-border); border-radius:26px; background:var(--auth-surface); box-shadow:0 20px 60px rgba(23,32,51,.08); }
.ory-embed-page { margin:0; min-height:100%; background:transparent; color:var(--auth-fg); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.ory-embed-page .auth-content { display:block; padding:0; }
.ory-embed-page .auth-content-inner { max-width:none; }
.ory-recovery-codes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:14px; border:1px solid var(--auth-border); border-radius:14px; background:var(--auth-soft); }
.ory-recovery-codes code { padding:8px; border-radius:9px; background:var(--auth-surface); color:var(--auth-fg); text-align:center; font-size:13px; }
.ory-secret { padding:13px; border:1px solid var(--auth-border); border-radius:13px; background:var(--auth-soft); }
.ory-secret span,.ory-secret code { display:block; }
.ory-secret code { margin-top:5px; overflow-wrap:anywhere; color:var(--auth-fg); }
.auth-content #phone_country { width:110px!important; flex:0 0 110px; }
.auth-content #phone_number { min-width:0; flex:1; }
.auth-content .auth-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important; text-align:center; font-size:25px!important; font-weight:700; letter-spacing:.27em; }
.auth-content .auth-device-form form input[name="user_code"] { text-transform:uppercase; text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important; font-size:24px!important; font-weight:700; letter-spacing:.18em; }
.auth-footer { margin:15px 0 0; color:var(--auth-muted); text-align:center; font-size:12px; }
html.theme-dark .auth-content .auth-alert-error,[data-theme="dark"] .auth-content .auth-alert-error { background:#3b1b28; border-color:#7f3345; color:#fecdd3; }
html.theme-dark .auth-content .auth-alert-success,[data-theme="dark"] .auth-content .auth-alert-success { background:#0b372f; border-color:#166b58; color:#a7f3d0; }
html.theme-dark .auth-content .auth-alert-warning,[data-theme="dark"] .auth-content .auth-alert-warning { background:#3e2c16; border-color:#90621d; color:#fde68a; }
html.theme-dark .auth-content .auth-icon,html.theme-dark .auth-content .auth-scope i,[data-theme="dark"] .auth-content .auth-icon,[data-theme="dark"] .auth-content .auth-scope i { background:#1e3a8a; color:#bfdbfe; }
@media (max-width:760px) { .auth-shell { padding:16px; } .auth-card { display:block; min-height:0; border-radius:24px; } .auth-aside { gap:12px; padding:21px 25px; } .auth-aside-copy,.auth-aside-foot { display:none; } .auth-brand img { width:38px; height:38px; border-radius:12px; } .auth-brand { font-size:18px; } .auth-content { padding:28px 24px 34px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }