:root {
  color: #18212f;
  background: #f4f7f8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --ink: #18212f;
  --muted: #637083;
  --line: #dce3e7;
  --surface: #ffffff;
  --brand: #6f46d9;
  --brand-dark: #5632b6;
  --teal: #087f8c;
  --danger: #c53b4c;
  --success: #147a54;
  --focus: rgba(111, 70, 217, 0.2);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: #f4f7f8; color: var(--ink); }
body::before { content: ""; display: block; height: 5px; background: #19a38c; }
main { width: 100%; min-height: calc(100vh - 5px); padding: 32px 20px 56px; }
a { color: var(--brand-dark); text-underline-offset: 3px; }
button, input { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.48; transform: none !important; }

.auth-shell {
  width: min(100%, 470px);
  margin: 4vh auto 0;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 55px rgba(26, 39, 50, 0.09);
}
.auth-shell.wide { width: min(100%, 650px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 850; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--brand); color: white; font-size: 21px; }
.locale-switch { float: right; display: flex; gap: 4px; }
.locale-switch a { padding: 6px 8px; border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 800; text-decoration: none; }
.locale-switch a.active { background: #eee9fb; color: var(--brand-dark); }
.eyebrow { margin: 30px 0 8px; color: var(--teal); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: 0; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: 38px; line-height: 1.12; letter-spacing: 0; }
h2 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: 0; }
h3 { margin: 0 0 14px; font-size: 15px; letter-spacing: 0; }
.lead { margin: 13px 0 24px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.lead.compact { margin: 8px 0 0; font-size: 14px; }
.auth-form { display: grid; gap: 15px; }
.auth-form.compact { margin-top: 16px; }
label { display: grid; gap: 7px; color: #273346; font-size: 14px; font-weight: 750; }
input {
  width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #bac6ce; border-radius: 7px; background: #fff; color: var(--ink); font-size: 16px;
}
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--brand); }
.field-help { margin: -7px 0 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.button {
  display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 11px 16px; border: 1px solid transparent; border-radius: 7px; font-weight: 800; text-align: center; text-decoration: none; transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--brand); color: #fff; }
.button.primary:hover { background: var(--brand-dark); }
.button.secondary { border-color: #abb8c2; background: #fff; color: #263548; }
.button.passkey { width: 100%; margin-bottom: 18px; background: #162238; color: #fff; }
.button.ghost { border-color: var(--line); background: transparent; color: #334155; }
.button.danger { border-color: #efbdc4; background: #fff; color: var(--danger); }
.button.fit { width: auto; }
.button.small { min-height: 36px; padding: 7px 11px; font-size: 13px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: #8a96a6; font-size: 12px; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.auth-links { display: flex; justify-content: flex-end; margin-top: 14px; font-size: 13px; font-weight: 700; }
.alternative { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 17px; }
.alternative summary { color: #435269; font-size: 14px; font-weight: 750; cursor: pointer; }
.first-access { margin-top: 24px; padding-top: 20px; border-top: 1px solid #dbe2ea; }
.first-access > strong { display: block; color: #16233b; font-size: 16px; }
.first-access > p { margin: 6px 0 14px; color: #667085; font-size: 13px; line-height: 1.5; }
.first-access-paths { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.first-access-paths li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.first-access-paths li > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #f0eaff; color: #6437d7; font-size: 12px; font-weight: 800; }
.first-access-paths b, .first-access-paths small { display: block; }
.first-access-paths b { margin: 1px 0 2px; color: #25324a; font-size: 13px; }
.first-access-paths small { color: #667085; font-size: 12px; line-height: 1.45; }
.first-access-guide { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #c8b8f5; border-radius: 6px; color: #6437d7; font-size: 13px; font-weight: 750; text-align: center; text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; }
.first-access-guide:hover, .first-access-guide:focus-visible { border-color: #7042df; background: #f7f3ff; color: #5125bc; }
.first-access-guide:focus-visible { outline: 3px solid rgba(112, 66, 223, .2); outline-offset: 2px; }
.access-help-shell { width: min(100%, 620px); }
.access-methods { display: grid; gap: 12px; margin-top: 22px; }
.access-methods section { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.access-methods section.recommended { margin-top: 2px; padding: 18px 16px; border: 1px solid #c8b8f5; border-radius: 8px; background: #faf8ff; }
.access-method-number { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #f0eaff; color: #6437d7; font-size: 13px; font-weight: 850; }
.access-methods h2 { margin: 3px 0 5px; font-size: 17px; }
.access-methods p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.access-methods .button { width: 100%; }
.access-methods ol { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 20px; color: #4e5d72; font-size: 13px; line-height: 1.45; }
.access-recommended { display: inline-flex; margin-bottom: 4px; color: #6437d7; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.access-support { margin: 18px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.recovery-impact { margin: 18px 0; padding: 16px; border: 1px solid #e7c86c; border-radius: 8px; background: #fff9e8; }
.recovery-impact strong { color: #493c18; }
.recovery-impact ul { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 20px; color: #66572b; font-size: 13px; line-height: 1.45; }
.security-note { margin: 18px 0 0; padding: 13px; background: #eef7f5; color: #2b5c54; border-radius: 6px; font-size: 13px; line-height: 1.45; }
.security-note.warning { background: #fff5dc; color: #695525; }
.alert { margin: 0 0 18px; padding: 12px 14px; border-radius: 6px; font-size: 14px; line-height: 1.45; }
.alert.error { border: 1px solid #f2c0c7; background: #fff0f2; color: #8f2838; }
.form-feedback { min-height: 20px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.form-feedback.success { color: var(--success); }
.form-feedback.error { color: var(--danger); }
.success-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 0 20px; border-radius: 50%; background: #e4f6ee; color: var(--success); font-size: 28px; font-weight: 900; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 20px 0; padding: 0; list-style: none; }
.recovery-grid code { display: block; padding: 12px; border: 1px dashed #9cadb7; border-radius: 6px; background: #f7fafb; text-align: center; font-size: 15px; }
.identity-summary { display: grid; min-width: min(100%, 320px); gap: 6px; justify-items: end; color: var(--muted); font-size: 12px; font-weight: 750; }
.identity-value { display: flex; min-width: 0; align-items: center; gap: 8px; }
.identity-value code { min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 800; user-select: all; }
.copy-feedback { min-width: 68px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.copy-feedback.success { color: var(--success); }
.copy-feedback.error { color: var(--danger); }

.onboarding-shell { width: min(100%, 760px); }
.onboarding-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; padding: 0; list-style: none; }
.onboarding-progress li { display: flex; min-width: 0; align-items: center; gap: 8px; color: #8a96a6; font-size: 12px; }
.onboarding-progress li::after { content: ""; height: 2px; flex: 1; background: #dce3e7; }
.onboarding-progress li:last-child::after { display: none; }
.onboarding-progress li > span { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 1px solid #bac6ce; border-radius: 50%; background: #fff; font-weight: 850; }
.onboarding-progress li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-progress li[data-state="active"] { color: var(--brand-dark); }
.onboarding-progress li[data-state="complete"] { color: var(--success); }
.onboarding-progress li[data-state="active"] > span { border-color: var(--brand); background: #eee9fb; }
.onboarding-progress li[data-state="complete"] > span { border-color: #67b99a; background: #e4f6ee; }
.onboarding-progress li[data-state="complete"]::after { background: #8bc9b2; }
.onboarding-step { padding: 23px 0; border-top: 1px solid var(--line); }
.onboarding-step[data-state="active"] { border-top-color: #b5a2ea; }
.onboarding-step-heading { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.onboarding-step-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.onboarding-step-number { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #bac6ce; border-radius: 50%; color: #667487; font-weight: 850; }
.onboarding-step[data-state="active"] .onboarding-step-number { border-color: var(--brand); background: #eee9fb; color: var(--brand-dark); }
.onboarding-step[data-state="complete"] .onboarding-step-number { border-color: #67b99a; background: #e4f6ee; color: var(--success); }
.onboarding-step-status { padding-top: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.onboarding-step[data-state="complete"] .onboarding-step-status { color: var(--success); }
.onboarding-step .identity-value { margin: 15px 0 0 46px; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.confirmation-check { display: flex; min-height: 48px; grid-template-columns: none; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid #cbd6dc; border-radius: 7px; background: #f9fbfb; cursor: pointer; }
.confirmation-check input { width: 20px; min-height: 20px; margin: 0; accent-color: var(--brand); }
.confirmation-check span { line-height: 1.4; }
.onboarding-step [data-onboarding-passkey] { margin: 16px 0 0 46px; }
.onboarding-step [data-passkey-unavailable] { margin: 12px 0 0 46px; }
.onboarding-step [data-passkey-feedback] { margin-left: 46px; }
.onboarding-finish { display: grid; grid-template-columns: minmax(220px, auto) 1fr; gap: 18px; align-items: center; padding-top: 22px; border-top: 1px solid var(--line); }
.onboarding-finish p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.onboarding-finish [aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; transform: none; }

.cabinet-shell { width: min(1180px, 100%); margin: 0 auto; }
.cabinet-nav { display: flex; align-items: center; gap: 24px; min-height: 64px; padding: 10px 0 20px; border-bottom: 1px solid var(--line); }
.cabinet-nav nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cabinet-nav nav a { padding: 9px 12px; border-radius: 6px; color: #536174; font-size: 14px; font-weight: 750; text-decoration: none; }
.cabinet-nav nav a.active { background: #ebe6f8; color: var(--brand-dark); }
.cabinet-nav form { margin: 0; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 34px 0 22px; }
.page-heading .eyebrow { margin-top: 0; }
.license-card { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 30px rgba(31, 47, 60, 0.05); overflow: hidden; }
.license-head { display: flex; justify-content: space-between; gap: 24px; padding: 22px; border-bottom: 1px solid var(--line); background: #fbfcfc; }
.status { display: inline-flex; margin-top: 8px; padding: 4px 8px; border-radius: 5px; background: #edf1f3; color: #566274; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.status-active { background: #e6f6ef; color: var(--success); }
.key-block { display: grid; gap: 5px; min-width: min(100%, 310px); color: var(--muted); font-size: 12px; }
code { overflow-wrap: anywhere; color: #38435a; font-family: "SFMono-Regular", Consolas, monospace; }
.key-block code { padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.license-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.license-section { min-width: 0; padding: 22px; }
.license-section + .license-section { border-left: 1px solid var(--line); }
.license-section p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.domain-list, .download-list, .security-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.domain-list li { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid #edf0f2; font-size: 13px; }
.domain-list small { color: var(--muted); }
.download-list a { font-size: 13px; font-weight: 750; }
.domain-form { display: grid; gap: 12px; margin-top: 16px; }
.domain-form input { min-height: 42px; font-size: 14px; }
.empty-state { padding: 48px 24px; border: 1px dashed #aebbc4; border-radius: 8px; background: #fff; text-align: center; }
.empty-state .button { margin-top: 18px; }
.settings-stack { display: grid; gap: 16px; }
.reauth-banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 24px; align-items: end; margin-bottom: 16px; padding: 20px; border: 1px solid #e7c86c; border-radius: 8px; background: #fff9e8; }
.reauth-banner p { margin: 6px 0 0; color: #66572b; font-size: 14px; line-height: 1.5; }
.reauth-banner form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 10px; align-items: end; }
.reauth-banner input { min-height: 46px; }
.settings-section { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.settings-section p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.settings-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style-position: outside; }
.settings-disclosure summary span { display: grid; gap: 5px; }
.settings-disclosure summary strong { font-size: 18px; }
.settings-disclosure summary small { color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.45; }
.settings-form { max-width: 620px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.security-list { margin-top: 18px; }
.security-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 0; border-top: 1px solid #edf0f2; }
.security-list li > div { display: grid; gap: 3px; }
.security-list span { color: var(--muted); font-size: 12px; }
.security-list form { margin: 0; }
.muted-row { color: var(--muted); font-size: 14px; }
.inline-form { display: grid; grid-template-columns: minmax(200px, 1fr) auto; gap: 10px; margin-top: 16px; }
.inline-form .form-feedback { grid-column: 1 / -1; }

@media (max-width: 800px) {
  main { padding: 18px 12px 40px; }
  .auth-shell { margin-top: 0; padding: 22px 18px; }
  h1 { font-size: 30px; }
  .cabinet-nav { flex-wrap: wrap; gap: 12px; }
  .cabinet-nav nav { order: 3; width: 100%; }
  .cabinet-nav nav a { flex: 1; text-align: center; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .identity-summary { justify-items: start; }
  .identity-value { width: 100%; flex-wrap: wrap; }
  .identity-value code { flex: 1 1 180px; }
  .license-head { display: grid; }
  .license-grid { grid-template-columns: 1fr; }
  .license-section + .license-section { border-left: 0; border-top: 1px solid var(--line); }
  .section-heading { align-items: stretch; flex-direction: column; }
  .section-heading .button, .section-heading form, .section-heading form .button { width: 100%; }
  .reauth-banner, .reauth-banner form { grid-template-columns: 1fr; }
  .inline-form { grid-template-columns: 1fr; }
  .recovery-grid { grid-template-columns: 1fr; }
  .onboarding-progress { gap: 5px; }
  .onboarding-progress li { gap: 5px; }
  .onboarding-progress li strong { font-size: 10px; }
  .onboarding-step-heading { grid-template-columns: 32px minmax(0, 1fr); }
  .onboarding-step-status { grid-column: 2; padding-top: 0; }
  .onboarding-step .identity-value, .onboarding-step [data-onboarding-passkey], .onboarding-step [data-passkey-unavailable], .onboarding-step [data-passkey-feedback] { margin-left: 44px; }
  .onboarding-step .identity-value { width: calc(100% - 44px); }
  .recovery-actions .button { width: 100%; }
  .onboarding-finish { grid-template-columns: 1fr; }
  .onboarding-finish .button { width: 100%; }
}

@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; }
}