/* Customer identity has an independent origin and a shared professional style. */
:root { --navy: oklch(0.235 0.04 258); --nav-ink: oklch(0.92 0.015 250); --nav-muted: oklch(0.75 0.025 250); --mint: oklch(0.8 0.095 178); --paper: oklch(0.976 0.005 245); --white: oklch(1 0 0); --ink: oklch(0.33 0.035 255); --muted: oklch(0.49 0.025 255); --line: oklch(0.865 0.015 245); --teal: oklch(0.43 0.08 184); --error: oklch(0.5 0.17 25); }
* { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 system-ui, sans-serif; background: var(--paper); color: var(--ink); }
a { color: var(--teal); text-underline-offset: 0.25rem; }
.identity-shell { display: grid; grid-template-columns: minmax(20rem, 0.9fr) minmax(0, 1.1fr); min-height: 100svh; }
.identity-intro { padding: 3rem 4rem; background: var(--navy); color: var(--nav-muted); display: flex; flex-direction: column; justify-content: space-between; }
.brand { color: var(--nav-ink); text-decoration: none; font-size: 2rem; font-weight: 500; letter-spacing: -0.05em; align-self: start; }
.brand span { color: var(--mint); margin-left: 0.25rem; }
.eyebrow { letter-spacing: 0.1em; margin-bottom: 1.5rem; }
.identity-intro h2 { color: var(--nav-ink); font-size: clamp(2.25rem,3.5vw,3.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.04em; margin: 0 0 2rem; }
.intro-footer { margin: 0; }
main { min-width: 0; padding: 3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.identity-card { width: 100%; max-width: 32rem; padding: 2.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); box-shadow: 0 1rem 3rem color-mix(in oklch,var(--ink) 6%,transparent); }
.card-brand { color: var(--teal); font-size: 1.75rem; font-weight: 500; margin: 0 0 1.5rem; letter-spacing: -0.05em; }
h1 { font-size: 2rem; line-height: 1.25; font-weight: 500; letter-spacing: -0.035em; margin: 0 0 0.5rem; }
p { margin: 0 0 1.5rem; }
.muted,.footer { color: var(--muted); overflow-wrap: anywhere; }
form { margin-top: 2rem; }
form p { margin: 0 0 1.5rem; }
label { display: block; margin-bottom: 0.5rem; }
input { width: 100%; font: inherit; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 0.5rem; color: var(--ink); background: var(--white); }
.password-control { position: relative; }
.password-control input { padding-right: 4.5rem; }
.password-control button { position: absolute; right: 0.25rem; top: 0.25rem; background: transparent; color: var(--teal); border: 0; padding: 0.5rem; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
button,.button { font: inherit; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; background: var(--teal); color: var(--white); border: 1px solid var(--teal); padding: 0.75rem 1.25rem; border-radius: 0.5rem; cursor: pointer; text-decoration: none; }
button.secondary { background: var(--white); color: var(--teal); }
.error,.errorlist { color: var(--error); }
.error { border-left: 0.25rem solid var(--error); padding-left: 1rem; margin-top: 1.5rem; }
.helptext { color: var(--muted); display: block; margin-top: 0.5rem; }
ul { padding-left: 1.5rem; }
.workspace-list { display: grid; gap: 1rem; margin: 2rem 0; }
.workspace { border: 1px solid var(--line); border-radius: 0.5rem; padding: 1rem; text-decoration: none; display: flex; justify-content: space-between; gap: 1rem; }
.workspace small { font-size: 1rem; display: block; color: var(--muted); overflow-wrap: anywhere; }
.workspace:hover { background: var(--paper); border-color: var(--teal); }
.footer { text-align: center; margin: 2rem 0 0; }
:focus-visible { outline: 0.25rem solid var(--teal); outline-offset: 0.25rem; }
.identity-intro :focus-visible { outline-color: var(--mint); }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 10; padding: 1rem; background: var(--white); }
.skip-link:focus { top: 1rem; }
@media(max-width:64rem) { .identity-intro { padding: 2.5rem; } main { padding: 2rem; } }
@media(max-width:48rem) { .identity-shell { grid-template-columns: minmax(0,1fr); } .identity-intro { padding: 1.5rem; } .identity-intro > div,.intro-footer { display: none; } main { padding: 2rem 1rem; justify-content: flex-start; } .identity-card { padding: 1.5rem; } }

h2 { font-size: 1.25rem; font-weight: 500; margin: 2rem 0 1rem; }
.qr { display: block; width: 16rem; max-width: 100%; margin: 1.5rem auto; }
.security-back { margin-top: 2rem; }