/* Scoped account surfaces retain the original dot sign-in palette and typography. */
.account-screen,.account-profile-dialog{font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing: antialiased;box-sizing: border-box}
.account-screen *,.account-profile-dialog *{box-sizing: border-box}
.account-screen[hidden],.account-profile-dialog [hidden]{display: none!important}
.account-screen{position: fixed;inset: 0;z-index: 100;overflow: auto;display: grid;grid-template-rows: auto 1fr auto;grid-template-columns: minmax(0,1fr);min-width: 300px;background: var(--bg);color: var(--text);background-image: radial-gradient(circle,var(--accent-subtle) .7px,transparent .9px);background-size: 23px 23px;color-scheme: dark}
.account-screen:before{content: "";position: fixed;inset: 0;pointer-events: none;background: radial-gradient(ellipse at center,transparent 10%,var(--backdrop) 100%);z-index: -1}
.account-visible>#app-shell{visibility: hidden}
.account-header{display: flex;justify-content: space-between;align-items: center;gap: 20px;padding: 30px 46px}
.account-brand{display: inline-flex;gap: 10px;align-items: center;font-size: 27px;letter-spacing: -1.5px;font-weight: 700;line-height: 1;color: var(--text)}
.account-brand-dot{width: 10px;height: 10px;border-radius: 50%;background: var(--accent);box-shadow: 0 0 22px var(--accent-subtle)}
.account-eyebrow{font-size: 10px;font-weight: 500;letter-spacing: 2px;text-transform: uppercase;color: var(--text-secondary)}
.account-main{display: flex;align-items: center;justify-content: center;min-width: 0;padding: 22px 24px 32px}
.account-wrap{width: 440px;max-width: 100%;min-width: 0}
.account-wrap:has(.account-profile-card){width: 490px}
.account-pretitle{display: flex;align-items: center;justify-content: center;gap: 9px;margin: 0 0 20px;font-size: 10px;letter-spacing: 1.8px;font-weight: 500;color: var(--text-secondary)}
.account-pretitle i{display: block;width: 5px;height: 5px;border-radius: 50%;background: var(--accent)}
.account-card{background: var(--surface);color: var(--text);border: 1px solid var(--border-strong);border-radius: 22px;padding: 34px;box-shadow: 0 20px 100px var(--backdrop)}
.account-mark{display: flex;align-items: center;justify-content: center;width: 43px;height: 43px;border-radius: 13px;margin-bottom: 23px;background: var(--bg);color: var(--accent);font-size: 35px;font-weight: 600;line-height: 1;letter-spacing: -3px;padding-right: 3px}
.account-mark span{margin-left: 1px;margin-top: -5px}
.account-card h1{margin: 0;font-size: 32px;letter-spacing: -1.4px;line-height: 1.13;font-weight: 650;outline: none}
.account-intro{font-size: 13px;line-height: 1.65;color: var(--text-muted);margin: 11px 0 25px}
.account-form{margin: 0}
.account-field{margin-top: 17px}
.account-field label{display: block;font-size: 12px;font-weight: 600;margin-bottom: 8px;color: var(--text-secondary)}
.account-field input,.account-field select{font: inherit;font-size: 14px;width: 100%;min-width: 0;min-height: 47px;border: 1px solid var(--border-strong);background: var(--surface-inset);color: var(--text);border-radius: 9px;padding: 11px 13px;outline: none;transition: border-color .16s,box-shadow .16s,background .16s}
.account-field input::placeholder{color: var(--text-secondary);opacity: 1}
.account-field input:focus,.account-field select:focus{background: var(--accent-subtle);border-color: var(--border-strong);box-shadow: 0 0 0 3px var(--accent-subtle)}
.account-field input[aria-invalid=true],.account-field select[aria-invalid=true]{border-color: var(--border-strong);box-shadow: 0 0 0 2px var(--accent-subtle)}
.account-field input[readonly]{background: var(--accent-subtle);color: var(--text-muted)}
.account-field-hint{color: var(--text-secondary);font-size: 10px;line-height: 1.55;margin: 7px 0 0}
.account-field-error{font-size: 11px;color: var(--text-muted);line-height: 1.5;margin: 7px 0 0}
.account-password-wrap{position: relative}
.account-password-wrap input{padding-right: 60px}
.account-password-toggle{position: absolute;right: 3px;top: 3px;height: 41px;min-width: 50px;border: 0;border-radius: 6px;background: transparent;color: var(--text-muted);font: inherit;font-size: 11px;font-weight: 600;cursor: pointer}
.account-password-toggle:hover{background: var(--surface-hover);color: var(--text)}
.account-primary{min-height: 47px;width: 100%;border: 1px solid transparent;border-radius: 9px;background: var(--accent);color: var(--text-on-accent);padding: 12px 16px;font: inherit;font-size: 13px;font-weight: 650;display: flex;align-items: center;justify-content: space-between;gap: 12px;margin-top: 23px;cursor: pointer;transition: background .15s,box-shadow .15s}
.account-primary:hover{background: var(--accent-hover);box-shadow: 0 4px 18px var(--accent-subtle)}
.account-primary svg{width: 19px;height: 19px;fill: none;stroke: currentColor;stroke-width: 1.7;flex-shrink: 0}
.account-primary:disabled{cursor: wait;opacity: .62}
.account-text-button,.account-resend{font: inherit;font-size: 12px;font-weight: 600;border: 0;background: transparent;color: var(--text-secondary);padding: 8px 4px;cursor: pointer;border-radius: 4px;text-decoration: underline;text-underline-offset: 4px;text-decoration-color: var(--text-muted)}
.account-text-button:hover,.account-resend:hover{color: var(--text);text-decoration-color: var(--text)}
.account-text-button:disabled,.account-resend:disabled{color: var(--text-secondary);cursor: default;text-decoration: none}
.account-resend{display: block;margin: 12px auto 0}
.account-switch{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 3px;color: var(--text-muted);font-size: 12px;margin: 12px 0 0}
.account-switch+.account-switch{border-top: 1px solid var(--border-strong);margin-top: 9px;padding-top: 13px}
.account-status,.account-notice{padding: 11px 12px;background: var(--accent-subtle);border: 1px solid var(--border-strong);color: var(--text-muted);border-radius: 8px;font-size: 12px;line-height: 1.6;margin: 18px 0 0;overflow-wrap: anywhere}
.account-notice{margin: 0 0 20px}
.account-status.is-error{background: var(--accent-subtle);border-color: var(--border-strong);color: var(--text-muted)}
.account-loading{font-size: 13px;color: var(--text-muted);line-height: 1.7;padding: 16px 0}
.account-preview-note{text-align: center;color: var(--text-secondary);font-size: 10px;line-height: 1.7;margin: 17px 0 0}
.account-preview-accounts{border-top: 1px solid var(--border-strong);margin-top: 17px;padding-top: 18px;text-align: center}
.account-preview-accounts>p{margin: 0 0 7px;font-size: 9px;letter-spacing: 1.6px;color: var(--text-muted);font-weight: 600}
.account-preview-accounts>span{display: block;font-size: 10px;line-height: 1.6;color: var(--text-secondary)}
.account-preview-choices{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 7px;margin-top: 13px}
.account-preview-user{display: flex;flex-direction: column;align-items: center;gap: 6px;padding: 12px 5px;border: 1px solid var(--border-strong);border-radius: 8px;background: var(--accent-subtle);color: var(--text-muted);cursor: pointer;font: inherit}
.account-preview-user strong{font-size: 12px;font-weight: 600}
.account-preview-user span{font-size: 9px;color: var(--text-secondary)}
.account-preview-user:hover{background: var(--accent-subtle);border-color: var(--border-strong)}
.account-preview-user:disabled{opacity: .6;cursor: wait}
.account-demo-code{font-size: 10px;color: var(--text-muted);line-height: 1.7;text-align: center;margin: 13px 0 0;background: var(--accent-subtle);padding: 9px;border-radius: 6px}
.account-demo-code code{font: inherit;font-weight: 650;letter-spacing: .6px;color: var(--text)}
.account-footer{display: flex;align-items: center;justify-content: space-between;gap: 20px;padding: 22px 46px 28px;color: var(--text-secondary);font-size: 11px}
/* --accent-ring, not --border-strong: the latter measured 1.50:1 on the light
   page and 1.86:1 on the dark one, under the 3:1 WCAG 2.2 asks of a focus
   indicator. --accent-ring is the token kept at that floor in both themes. */
.account-screen button:focus-visible,.account-screen a:focus-visible,.account-profile-dialog button:focus-visible{outline: 3px solid var(--accent-ring);outline-offset: 3px}
/* The dialog follows the theme: dark panel in dark, white panel in light.
   It used to paint background:var(--text) with color:var(--text-on-accent),
   which inverts with the theme instead of following it — in light both
   resolved to #0E140D (1.00:1, invisible), and in dark the panel went
   near-white while the labels stayed at the dark theme's pale
   --text-secondary. Same fault d225c20 fixed on the sign-in card. */
.account-profile-dialog{position: fixed;margin: auto;width: min(500px,calc(100% - 32px));max-height: calc(100svh - 42px);overflow: auto;padding: 31px 33px;border: 1px solid var(--border-strong);border-radius: 20px;background: var(--surface);color: var(--text);box-shadow: 0 20px 100px rgb(0 0 0 / .45)}
.account-profile-dialog::backdrop{background: var(--backdrop);backdrop-filter: blur(5px)}
.account-profile-dialog h2{font-size: 29px;letter-spacing: -1px;font-weight: 600;margin: 3px 34px 0 0;line-height: 1.2}
.account-dialog-close{position: absolute;top: 20px;right: 20px;display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;border: 1px solid var(--border-strong);border-radius: 8px;background: var(--accent-subtle);color: var(--text-secondary);font: inherit;font-size: 23px;cursor: pointer}
.account-photo-editor{display: flex;align-items: center;gap: 17px;padding: 1px 0 9px}
.account-photo-avatar{position: relative;width: 69px;height: 69px;flex-shrink: 0;background: var(--accent-subtle);color: var(--text-secondary);font-size: 22px;font-weight: 600;border: 3px solid var(--border-strong);border-radius: 50%;display: flex;align-items: center;justify-content: center;overflow: hidden}
.account-photo-avatar img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;background: var(--accent-subtle)}
.account-photo-controls{min-width: 0;flex: 1}
.account-photo-controls .account-text-button{font-size: 11px;padding: 4px 7px 4px 0}
.account-photo-controls .account-field-hint{margin-top: 2px}
.account-photo-progress{display: block;width: 100%;height: 5px;margin-top: 9px;accent-color: var(--accent-text)}
.account-photo-status{font-size: 10px;line-height: 1.5;margin: 6px 0 0;color: var(--text-muted)}
.account-photo-status:empty{display: none}
.account-readonly-details{display: flex;flex-direction: column;gap: 11px;padding: 17px 0 3px;margin-top: 20px;border-top: 1px solid var(--border-strong)}
.account-readonly-details>div{display: flex;align-items: flex-start;justify-content: space-between;gap: 18px;font-size: 10px;line-height: 1.5}
.account-readonly-details span{color: var(--text-secondary);flex-shrink: 0}
.account-readonly-details strong{font-weight: 500;color: var(--text-muted);overflow-wrap: anywhere;text-align: right}
.account-setup-signout{display: block;margin: 12px auto 0}
@media(max-width:620px){.account-header{padding: 25px 24px}.account-eyebrow{font-size: 8px;letter-spacing: 1.4px}.account-main{padding: 18px 18px 25px}.account-card{border-radius: 18px;padding: 29px 25px}.account-card h1{font-size: 30px}.account-pretitle{font-size: 9px}.account-footer{padding: 18px 24px 24px;font-size: 10px}.account-field input,.account-field select{font-size: 16px}.account-profile-dialog{padding: 27px 24px;border-radius: 16px}.account-profile-dialog h2{font-size: 27px}.account-readonly-details>div{gap: 11px}}
@media(max-width:360px){.account-card{padding: 25px 20px}.account-card h1{font-size: 28px}.account-header{padding-inline: 20px}.account-footer{padding-inline: 20px}.account-preview-choices{gap: 5px}.account-profile-dialog{padding-inline: 20px}.account-photo-editor{gap: 11px}}
@media(prefers-reduced-motion:reduce){.account-screen *,.account-profile-dialog *{transition: none!important;scroll-behavior: auto!important}}

/* ---- theme control ----
   The sign-in header carries the same three-state toggle as the landing nav
   and the app header. */
.account-header-end{display: flex;align-items: center;gap: 18px}
/* ---- logo ----
   The landing nav's lockup: a 30px wordmark, an 8px gap and a 9px dot that
   carries a hairline ink ring on the white page (v2 §2.5) so it has an edge
   instead of floating. Dark keeps the plain lime dot, as the nav does. */
.account-brand{gap: 8px;font-size: 30px;letter-spacing: -1.8px}
.account-brand-dot{width: 9px;height: 9px;flex-shrink: 0;box-shadow: none}
:root[data-theme="light"] .account-brand-dot{background: var(--accent);border: 1px solid var(--ink)}
@media(max-width:760px){.account-brand{font-size: 27px}}
a.account-brand{cursor: pointer;transition: opacity .18s}
a.account-brand:hover{opacity: .7}
@media(prefers-reduced-motion:reduce){a.account-brand{transition: none}}
.account-theme-toggle{width: 40px;height: 40px;flex-shrink: 0;display: grid;place-items: center;padding: 0;border: 1px solid var(--border);border-radius: 8px;background: transparent;color: var(--text-secondary);cursor: pointer;transition: background .2s,color .2s,border-color .2s}
.account-theme-toggle:hover{background: var(--surface-hover);color: var(--text);border-color: var(--border-strong)}
.account-theme-toggle svg{width: 18px;height: 18px;fill: none;stroke: currentColor;stroke-width: 1.7;stroke-linecap: round;stroke-linejoin: round}
.account-theme-toggle svg[hidden]{display: none}

/* ---- light theme ----
   Dark is the original sign-in palette and stays exactly as it was. Light
   borrows the landing page's: flat near-white, dark hairline dots, no haze,
   and the card treated like the landing page's other dark blocks — lime
   border, solid offset, no blur. */
/* Same field as dark — same 23px grid, same dot size, same presence — in dark
   grey instead of lime. Dark's lime at .12 over #090D09 measures 1.293:1
   against its background; ink at .12 over #FAFAF8 measures 1.288:1. */
:root[data-theme="light"] .account-screen{color-scheme: light;background-image: radial-gradient(circle,rgba(15,20,12,.12) .7px,transparent .9px)}
:root[data-theme="light"] .account-screen:before{content: none}
/* v4 §1.2 The card is framed like the hero mock and the closing panel:
   a 2px lime border over the green offset, not the feature cards' ink
   hairline. --accent resolves to the dark lime inside the force-dark card. */
:root[data-theme="light"] .account-card{border: 2px solid var(--accent);box-shadow: var(--offset-lg)}
:root[data-theme="light"] .account-theme-toggle{border: 1px solid var(--ink);border-radius: var(--radius-sm);background: var(--surface);color: var(--text);box-shadow: var(--offset-sm);transition: transform 100ms ease,box-shadow 100ms ease,background 100ms ease}
:root[data-theme="light"] .account-theme-toggle:hover{background: var(--surface-hover);border-color: var(--ink);transform: translate(-1px,-1px);box-shadow: 4px 4px 0 var(--offset-color)}
:root[data-theme="light"] .account-theme-toggle:active{transform: translate(2px,2px);box-shadow: 1px 1px 0 var(--offset-color)}
@media(prefers-reduced-motion:reduce){:root[data-theme="light"] .account-theme-toggle:hover,:root[data-theme="light"] .account-theme-toggle:active{transform: none}}