/* PreciseEV 2026 design system for sign-in, registration, recovery and account
   settings. Loaded after auth.css / account-system.css / account-mobile.css. */
@font-face{font-family:'SL Inter';src:url('/assets/fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-02FF,U+0309-0328,U+032A-1FFF,U+2070-20AB,U+20AD-2115,U+2117-2121,U+2123-2152,U+215F-218F,U+219A-21BA,U+21BC-2211,U+2213-2214,U+2216-2247,U+2249-225F,U+2261-2263,U+2266-25B1,U+25B3,U+25B5,U+25B7,U+25B9-25BB,U+25BD,U+25BF,U+25C1,U+25C3-25CA,U+25CC-25CE,U+25D0-2604,U+2607-2712,U+2714,U+2716,U+2718-FEFE,U+FF00-FFFC,U+FFFE-10FFFF}@font-face{font-family:'SL Inter';src:url('/assets/fonts/PlusJakartaSans-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+21BB,U+2212,U+2215,U+2248,U+2260,U+2264,U+2265,U+2022,U+2026,U+2116,U+2153-215E,U+2713,U+2715,U+2717,U+2605,U+2606,U+25B2,U+25B4,U+25B6,U+25B8,U+25BC,U+25BE,U+25C0,U+25C2,U+25CF,U+25CB,U+FEFF,U+FFFD}
@font-face{font-family:'SL Display';src:url('/assets/fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-02FF,U+0309-0328,U+032A-1FFF,U+2070-20AB,U+20AD-2115,U+2117-2121,U+2123-2152,U+215F-218F,U+219A-21BA,U+21BC-2211,U+2213-2214,U+2216-2247,U+2249-225F,U+2261-2263,U+2266-25B1,U+25B3,U+25B5,U+25B7,U+25B9-25BB,U+25BD,U+25BF,U+25C1,U+25C3-25CA,U+25CC-25CE,U+25D0-2604,U+2607-2712,U+2714,U+2716,U+2718-FEFE,U+FF00-FFFC,U+FFFE-10FFFF}@font-face{font-family:'SL Display';src:url('/assets/fonts/PlusJakartaSans-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+21BB,U+2212,U+2215,U+2248,U+2260,U+2264,U+2265,U+2022,U+2026,U+2116,U+2153-215E,U+2713,U+2715,U+2717,U+2605,U+2606,U+25B2,U+25B4,U+25B6,U+25B8,U+25BC,U+25BE,U+25C0,U+25C2,U+25CF,U+25CB,U+FEFF,U+FFFD}

:root {
  --sl-bg:#0B0A10;--sl-sunken:#0c0c0f;--sl-panel:#111114;--sl-panel-2:#17171b;--sl-panel-3:#1f1f24;
  --sl-line:#212126;--sl-line-2:#2a2a30;--sl-line-3:#3a3a41;
  --sl-text:#f4f4f5;--sl-text-2:#b4b4bd;--sl-muted:#85858e;--sl-faint:#7a7a84;
  --sl-lime:#7B5CFF;--sl-lime-3:#bfb0ff;--sl-lime-ink:#ffffff;--sl-lime-wash:rgb(124 77 255/.14);--sl-lime-line:rgb(124 77 255/.45);--sl-brand:#7B5CFF;--sl-brand-hi:#8B6CFF;--sl-brand-text:#bfb0ff;--sl-brand-pale:#e2d8ff;--sl-brand-gradient:linear-gradient(180deg,#8B6CFF 0%,#7B5CFF 100%);--sl-brand-glow:0 0 0 1px rgb(124 77 255/.35),0 10px 40px -8px rgb(124 77 255/.55);--sl-up:#2BD07F;--sl-up-2:#2fc77b;--sl-up-3:#8ff0bf;--sl-up-wash:rgb(62 224 143/.12);--sl-up-line:rgb(62 224 143/.4);--sl-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --sl-cyan:#6fb6ff;--sl-red:#ff6b6b;--sl-amber:#f7b955;
  --sl-font:'SL Inter','Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --sl-display:'SL Display','SL Inter','Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --account-bg:var(--sl-bg);--account-panel:var(--sl-panel);--account-line:var(--sl-line-2);--account-text:var(--sl-text);--account-muted:var(--sl-muted);--account-blue:var(--sl-lime);
}

html body.account-page {
  background:
    radial-gradient(900px 520px at 12% 0%,rgb(124 77 255/.15),transparent 65%),
    radial-gradient(700px 520px at 100% 100%,rgb(111 182 255/.07),transparent 65%),
    var(--sl-bg)!important;
  color:var(--sl-text);font-family:var(--sl-font);font-feature-settings:normal;-webkit-font-smoothing:antialiased;
}
html body.account-page ::selection {background:rgb(124 77 255/.45);color:#fff}
html body.account-page :is(a,button,input,select,textarea,summary):focus-visible {outline:2px solid var(--sl-cyan)!important;outline-offset:3px}
html body.account-page a:hover {color:var(--sl-lime-3)}
html body.account-page :is(h1,h2), html body.account-page .account-story-title {font-family:var(--sl-display)!important;font-weight:600!important;letter-spacing:-.03em!important}
html body.account-page .account-skip {background:var(--sl-lime)!important;color:var(--sl-lime-ink)!important}

/* Header */
html body.account-page .account-header {border-bottom-color:var(--sl-line)!important}
html body.account-page .account-brand {font-family:var(--sl-display)!important;font-weight:650!important;letter-spacing:0!important;font-size:21px!important}
html body.account-page .account-brand img {filter:drop-shadow(0 6px 18px rgb(124 77 255/.45))}
html body.account-page .account-brand span span {color:var(--sl-brand-text,#bfb0ff)!important}
html body.account-page .account-header-link {padding:8px 14px;border:1px solid var(--sl-line-2);border-radius:999px;color:var(--sl-text-2)!important}
html body.account-page .account-header-link:hover {border-color:var(--sl-line-3);color:var(--sl-text)!important}

/* Sign-in story column */
html body.account-page .account-story {border-color:var(--sl-line)!important;background:transparent!important}
html body.account-page .account-story::before {content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgb(255 255 255/.04) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.04) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent)}
html body.account-page .account-story-lines {opacity:.35;color:var(--sl-brand-text,#bfb0ff)!important;stroke:var(--sl-lime)!important}
html body.account-page .account-story-label {color:var(--sl-brand-text,#bfb0ff)!important;font-weight:650!important;letter-spacing:.08em;text-transform:uppercase;font-size:12px!important}
html body.account-page .account-story-content .account-story-title {font-size:clamp(42px,4.6vw,64px)!important;line-height:1!important}
html body.account-page .account-story-copy {color:var(--sl-text-2)!important}
html body.account-page .account-story-list {border-color:var(--sl-line)!important}
html body.account-page .account-story-list>* {border-color:var(--sl-line)!important}
html body.account-page .account-story-mark {background:var(--sl-lime)!important;box-shadow:0 0 10px var(--sl-lime)!important;border-color:var(--sl-lime)!important}
html body.account-page .account-story-list :is(strong,b,h2,h3) {color:var(--sl-text)!important}
html body.account-page .account-story-list :is(small,span:not(.account-story-mark),p) {color:var(--sl-muted)!important}

/* Form column */
html body.account-page .account-access {background:linear-gradient(180deg,rgb(16 16 19/.7),rgb(9 9 11/.4))!important;border-color:var(--sl-line)!important;backdrop-filter:blur(8px)}
html body.account-page .account-tabs {border-color:var(--sl-line)!important}
html body.account-page .account-tabs a {color:var(--sl-muted)!important}
html body.account-page .account-tabs a[aria-current] {color:var(--sl-text)!important;border-color:var(--sl-lime)!important;box-shadow:inset 0 -2px 0 var(--sl-lime)}
html body.account-page .account-subtitle, html body.account-page .account-help {color:var(--sl-muted)!important}
html body.account-page .account-field label, html body.account-page .account-field>span {color:var(--sl-text-2)!important}
html body.account-page :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
  background:var(--sl-sunken)!important;border:1px solid var(--sl-line-2)!important;border-radius:12px!important;color:var(--sl-text)!important;
  transition:border-color .15s,box-shadow .15s;
}
html body.account-page :is(input:not([type=checkbox]):not([type=radio]),select,textarea):hover {border-color:var(--sl-line-3)!important}
html body.account-page :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus {border-color:var(--sl-cyan)!important;box-shadow:0 0 0 3px rgb(111 182 255/.16)!important;outline:none}
html body.account-page ::placeholder {color:var(--sl-faint)!important}
html body.account-page :is(input[type=checkbox],input[type=radio]) {accent-color:var(--sl-lime)}
html body.account-page .account-password-field button {color:var(--sl-text-2)!important}
html body.account-page .account-form-options a {color:var(--sl-text-2)!important}
html body.account-page .account-submit {
  border:1px solid var(--sl-lime)!important;border-radius:999px!important;background:var(--sl-lime)!important;color:var(--sl-lime-ink)!important;
  font-weight:700!important;box-shadow:0 0 0 1px rgb(124 77 255/.375),0 12px 34px -12px rgb(124 77 255/.7),inset 0 1px 0 rgb(255 255 255/.4)!important;
  transition:background-color .2s,transform .2s,box-shadow .2s;
}
html body.account-page .account-submit:hover:not(:disabled) {background:var(--sl-lime-3)!important;transform:translateY(-1px)}
html body.account-page .account-switch a, html body.account-page .account-explore a {color:var(--sl-brand-text,#bfb0ff)!important;font-weight:650}
html body.account-page .account-status {color:var(--sl-text-2)}
html body.account-page .account-status:is(.error,[data-tone=error]) {color:var(--sl-red)!important}

/* Account settings */
html body.account-page.settings-page .settings-sidebar {background:linear-gradient(180deg,#0b0b0e,#0B0A10)!important;border-color:var(--sl-line)!important}
html body.account-page.settings-page .settings-sidebar a {border-radius:10px!important;color:var(--sl-muted)!important}
html body.account-page.settings-page .settings-sidebar a:hover {background:var(--sl-panel-2)!important;color:var(--sl-text)!important}
html body.account-page.settings-page .settings-sidebar a:is([aria-current],.active) {background:var(--sl-lime-wash)!important;color:var(--sl-text)!important;box-shadow:inset 0 0 0 1px rgb(124 77 255/.24)}
html body.account-page.settings-page .settings-kicker {color:var(--sl-brand-text,#bfb0ff)!important;letter-spacing:.08em;text-transform:uppercase;font-weight:650}
html body.account-page.settings-page :is(.settings-section,.subscription-summary,.plan-options>*,.settings-disclosure,.account-identity) {
  background:linear-gradient(180deg,var(--sl-panel),rgb(16 16 19/.6))!important;border-color:var(--sl-line)!important;border-radius:18px!important;
}
html body.account-page.settings-page .settings-row, html body.account-page.settings-page .section-heading {border-color:var(--sl-line)!important}
html body.account-page.settings-page .section-heading h2 {font-size:20px!important}
html body.account-page .account-avatar {background:var(--sl-lime-wash)!important;color:var(--sl-brand-text,#bfb0ff)!important;border-color:var(--sl-lime-line)!important}
html body.account-page .verification-badge {border-radius:999px!important;background:var(--sl-lime-wash)!important;color:var(--sl-brand-text,#bfb0ff)!important;border-color:var(--sl-lime-line)!important}
html body.account-page .settings-button {border-radius:10px!important;font-weight:600!important;background:var(--sl-lime)!important;border-color:var(--sl-lime)!important;color:var(--sl-lime-ink)!important}
html body.account-page .settings-button.secondary {background:var(--sl-panel-2)!important;border-color:var(--sl-line-2)!important;color:var(--sl-text)!important}
html body.account-page .settings-button.secondary:hover {background:var(--sl-panel-3)!important;border-color:var(--sl-line-3)!important}
html body.account-page .settings-button.danger {background:rgb(255 107 107/.1)!important;border-color:rgb(255 107 107/.35)!important;color:var(--sl-red)!important}
html body.account-page .settings-text-button {color:var(--sl-brand-text,#bfb0ff)!important}
html body.account-page .feature-list li::marker {color:var(--sl-brand-text,#bfb0ff)}
html body.account-page .danger-disclosure {border-color:rgb(255 107 107/.25)!important}
html body.account-page .account-dialog {background:var(--sl-panel)!important;border:1px solid var(--sl-line-2)!important;border-radius:20px!important;color:var(--sl-text)!important;box-shadow:0 30px 100px rgb(0 0 0/.8)!important}
html body.account-page .account-dialog::backdrop {background:rgb(3 3 4/.72);backdrop-filter:blur(6px)}
html body.account-page .workspace-links a {border-color:var(--sl-line-2)!important;border-radius:12px!important}
html body.account-page .workspace-links a:hover {border-color:var(--sl-lime-line)!important}

/* Authenticator QR code */
.mfa-qr {width:184px;height:184px;margin:4px auto 16px;border-radius:14px;background:#fff;overflow:hidden}
.mfa-qr[hidden] {display:none}
.mfa-qr svg {display:block;width:100%;height:100%}

/* Google sign-in */
.account-social {display:grid;gap:14px;margin-top:4px}
.account-social[hidden] {display:none}
.account-divider {display:flex;align-items:center;gap:12px;color:#7e7e8a;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
.account-divider::before, .account-divider::after {content:'';flex:1;height:1px;background:rgb(255 255 255/.1)}
.account-google {display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;padding:0 18px;border:1px solid rgb(255 255 255/.16);border-radius:999px;background:#fff;color:#1f1f1f;font:600 15px/1 inherit;font-family:inherit;cursor:pointer}
.account-google:hover {background:#f2f2f3}
.account-google svg {width:18px;height:18px}
.account-google:focus-visible {outline:2px solid #7B5CFF;outline-offset:2px}

/* Referrals */
.referral-card {display:grid;gap:12px}
.referral-row {display:flex;gap:10px;align-items:center}
.referral-row input {flex:1;min-width:0}
.referral-count {margin:0;color:#bbbbc1}
.referral-count strong {color:#bfb0ff;font-size:18px}