/* ============================================================================
 * Gjuha Shqipe — SSO auth pages (login / register)
 * Visual language ported from the "Shkrimori" app design system:
 * azure brand primary (#129AF2), cool-slate neutrals, the per-app accent
 * palette, spartan/helm-style controls (radii, shadows, focus rings).
 * Self-contained: no Tailwind build, no runtime JS framework.
 * ==========================================================================*/

/* Inter, self-hosted (no third-party request on the credential pages). Variable
 * weight axis; the "latin" subset covers Albanian diacritics (ë, ç, …). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
}

:root {
  /* ---- Brand primary (azure) ---- */
  --brand-50:  #E7F5FE;
  --brand-100: #C7E7FD;
  --brand-200: #92CFFA;
  --brand-500: #34A8F4;
  --brand-600: #129AF2; /* logo, links, active */
  --brand-700: #0B7ACB; /* hover */
  --brand-800: #0A619F; /* press / AA-safe filled buttons */
  --primary-strong: #0A619F;
  --accent-ink: #0A619F;

  /* ---- Cool slate neutrals ---- */
  --slate-900: #17181C;
  --slate-800: #24262C;
  --slate-700: #3C4048;
  --slate-500: #6C727E;
  --slate-400: #9BA1AC;
  --slate-300: #CBD0D8;
  --slate-200: #E7E9ED;
  --slate-100: #F1F3F6;
  --slate-50:  #F7F8FA;
  --white:     #FFFFFF;

  /* ---- Per-app accent palette ---- */
  --app-red:    #E23124;
  --app-blue:   #3B6FF5;
  --app-green:  #1F9D57;
  --app-orange: #F0912D;
  --app-purple: #7A5AF5;
  --app-teal:   #109C8C;

  /* ---- Semantic ---- */
  --text-strong: var(--slate-900);
  --text-body:   var(--slate-700);
  --text-muted:  var(--slate-500);
  --border-subtle: var(--slate-200);
  --error: #E23124;              /* borders / icons (non-text) */
  --error-ink: #B42318;          /* error TEXT on white — ~5.9:1, clears WCAG AA */
  --error-tint: #FDE7E5;

  /* ---- Scales (from the DS) ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 11px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(23, 24, 28, 0.05), 0 1px 3px rgba(23, 24, 28, 0.04);
  --shadow-2: 0 2px 8px rgba(23, 24, 28, 0.06), 0 1px 2px rgba(23, 24, 28, 0.05);
  --shadow-3: 0 12px 32px rgba(23, 24, 28, 0.12), 0 4px 10px rgba(23, 24, 28, 0.06);
  --shadow-icon: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(23, 24, 28, 0.14);
  --shadow-card: 0 30px 80px -20px rgba(6, 24, 46, 0.55), 0 12px 32px -12px rgba(6, 24, 46, 0.4);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --bounce-out: cubic-bezier(0.39, 0.88, 0.34, 1.15);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: #e6e8ec; /* grey page behind the card */
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Page shell: one centred, compact card on a soft brand wash ----------- */
body {
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(18, 154, 242, 0.16), transparent 70%),
    radial-gradient(600px 360px at 100% 100%, rgba(35, 84, 236, 0.08), transparent 70%),
    #f4f7fb;
}
.auth-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 16px;
}

/* ---- The card: a tinted header band, then the form ------------------------- */
.auth-card {
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(23, 24, 28, 0.06);
  border-radius: var(--radius-2xl);
  box-shadow: 0 24px 60px -28px rgba(10, 60, 120, 0.35), 0 4px 14px -8px rgba(23, 24, 28, 0.12);
  animation: card-in 420ms var(--ease-out) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.auth-body { padding: 18px 32px 24px; }

/* Header: the mark, then a left-aligned title and subtitle — no band, no tile. */
.auth-head {
  padding: 34px 32px 6px;
  text-align: left;
}
.brand-mark {
  display: inline-flex;
  width: 38px;
  height: 20px;
}
.brand-mark svg { width: 100%; height: 100%; }
.auth-head .brand-mark { margin-bottom: 26px; }
.auth-head h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-strong);
}
.auth-head .hint {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---- One account, every app: a quiet strip under the card ------------------ */
.apps-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.apps-strip .apps { display: inline-flex; gap: 6px; }
.apps-strip .app-tile {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-icon);
  animation: app-pop 520ms var(--bounce-out) both;
  animation-delay: var(--delay, 0s);
}
.apps-strip .app-tile .ic { width: 14px; height: 14px; }
.bg-red    { background: var(--app-red); }
.bg-blue   { background: var(--app-blue); }
.bg-green  { background: var(--app-green); }
.bg-orange { background: var(--app-orange); }
.bg-purple { background: var(--app-purple); }
.bg-teal   { background: var(--app-teal); }
@keyframes app-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  70%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Form ---- */
.auth-form { display: flex; flex-direction: column; gap: 11px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
}
.control { position: relative; display: flex; align-items: center; }
.control .lead {
  position: absolute;
  left: 14px;
  display: inline-flex;
  color: var(--slate-400);
  pointer-events: none;
}
.control .lead .ic { width: 18px; height: 18px; }
.control input {
  width: 100%;
  height: 43px;
  padding: 0 14px 0 42px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text-strong);
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 140ms, box-shadow 140ms, background 140ms;
}
.control.has-trailing input { padding-right: 44px; }
.control input::placeholder { color: var(--slate-400); }
.control input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(18, 154, 242, 0.16);
}
.control input:autofill { background: var(--white); }

/* Country select — styled to match the text inputs (leading icon + custom caret). */
.control.has-select select { padding-right: 40px; }
.control select {
  width: 100%;
  height: 43px;
  padding: 0 40px 0 42px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text-strong);
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 140ms, box-shadow 140ms, background 140ms;
}
.control select:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(18, 154, 242, 0.16);
}
/* Show the muted placeholder colour until a real country is chosen. */
.control select:has(option[value=""]:checked) { color: var(--slate-400); }
.select-caret {
  position: absolute;
  right: 14px;
  display: inline-flex;
  color: var(--slate-400);
  pointer-events: none;
}
.select-caret .ic { width: 18px; height: 18px; }

.pw-toggle {
  position: absolute;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--slate-400);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color 140ms, background 140ms;
}
.pw-toggle:hover { color: var(--slate-700); background: var(--slate-100); }
.pw-toggle .ic { width: 18px; height: 18px; }
.pw-toggle .icon-off { display: none; }
.pw-toggle[aria-pressed="true"] .icon-on { display: none; }
.pw-toggle[aria-pressed="true"] .icon-off { display: inline-flex; }

/* ---- Row: remember me / forgot ---- */
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text-body);
  cursor: pointer;
  user-select: none;
}
.check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--slate-400);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background 140ms, border-color 140ms;
}
.check input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  transition: transform 120ms var(--ease-out);
  background: var(--white);
  clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 20%, 82% 4%, 40% 68%);
}
.check input[type="checkbox"]:checked {
  background: var(--brand-600);
  border-color: var(--brand-600);
}
.check input[type="checkbox"]:checked::before { transform: scale(1); }
.check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(18, 154, 242, 0.22);
}
.link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
}
.link:hover { text-decoration: underline; }

/* ---- Primary submit ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  margin-top: 4px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--primary-strong);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: background 150ms, transform 150ms var(--ease-out), box-shadow 150ms;
}
.btn-primary:hover { background: #084f83; transform: translateY(-1px); box-shadow: var(--shadow-3); }
.btn-primary:active { transform: translateY(0); }
.btn-primary .ic { width: 18px; height: 18px; transition: transform 160ms var(--ease-out); }
.btn-primary:hover .ic { transform: translateX(3px); }

/* ---- Divider ---- */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 12px;
  color: var(--text-muted);
  font-size: 12.5px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* ---- External providers ---- */
.providers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.providers.count-1 { grid-template-columns: 1fr; }
.providers.count-2 { grid-template-columns: 1fr 1fr; }
.providers.count-4 { grid-template-columns: 1fr 1fr; }
.providers form { margin: 0; display: flex; }
.btn-provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text-body);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, box-shadow 140ms, transform 140ms var(--ease-out);
}
.btn-provider:hover {
  background: var(--slate-50);
  border-color: var(--slate-300);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.btn-provider .brand-ic { width: 19px; height: 19px; flex-shrink: 0; }
.btn-provider .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* 5+ providers (never in practice) fall back to icon-only to avoid crushing. */
.providers.count-many .btn-provider { padding: 0; gap: 0; }
.providers.count-many .btn-provider .label { display: none; }

/* ---- Footer ---- */
.form-foot {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
}
.form-foot a { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.form-foot a:hover { text-decoration: underline; }

/* ---- Keyboard focus ----
 * Text inputs and the checkbox get their branded ring above; give the same
 * consistent azure ring to every other interactive control (buttons, pills,
 * links) so keyboard focus never falls back to the UA default outline. */
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(18, 154, 242, 0.5), var(--shadow-2);
}
.btn-provider:focus-visible,
.pw-toggle:focus-visible,
.brand-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(18, 154, 242, 0.5);
}
.form-foot a:focus-visible,
.link:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Validation ---- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  background: var(--error-tint);
  color: #a4231a;
  font-size: 13px;
  line-height: 1.4;
}
.alert .ic { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.alert p { margin: 0; }
/* Informational variant (e.g. registration temporarily closed) — brand tint, not the error red. */
.alert-info { background: var(--brand-50); color: #0A4F80; }
.alert ul { margin: 0; padding: 0; list-style: none; }
.alert:empty { display: none; }
.field-error { font-size: 12px; color: var(--error-ink); }
.field-error:empty { display: none; }

/* Cloudflare Turnstile (Views/Shared/_Turnstile.cshtml), shown "interaction-only": for most visitors it stays empty, and
   the negative margin gives back the form's row gap so the form looks exactly as it does without it. It takes its place
   once it shows the checkbox or the status line under it has something to say. */
.turnstile { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: -11px; }
.turnstile.is-asking,
.turnstile:has(> .turnstile-status:not([hidden])) { margin-top: 0; }
.turnstile .cf-turnstile { width: 100%; }
.turnstile-status { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); text-align: center; }
.control.invalid input,
input.input-validation-error,
.control.invalid select,
select.input-validation-error {
  border-color: var(--error);
  background: #fff;
}

/* ==========================================================================
 * Simple centered card (Error / Access denied)
 * ==========================================================================*/
.simple-card {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 36px 34px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.simple-card .brand-mark { margin-bottom: 12px; }
.simple-card h1 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--text-strong); }
.simple-card p { margin: 0 0 20px; color: var(--text-muted); font-size: 14px; }

/* ==========================================================================
 * Responsive
 * ==========================================================================*/
/* Short screens (small laptops, landscape phones): tighten everything so the
 * form fits without scrolling — the decorative strip goes first. */
@media (max-height: 760px) {
  .auth-shell { padding: 12px 16px; gap: 10px; }
  .apps-strip { display: none; }
  .auth-head { padding: 22px 28px 4px; }
  .auth-head .brand-mark { width: 32px; height: 17px; margin-bottom: 14px; }
  .auth-head h1 { font-size: 21px; }
  .auth-head .hint { margin-top: 3px; font-size: 13.5px; }
  .auth-body { padding: 12px 28px 18px; }
  .auth-form { gap: 8px; }
  .control input, .control select { height: 40px; }
  .btn-primary { height: 42px; }
  .divider { margin: 10px 0 8px; }
  .btn-provider { height: 40px; }
  .form-foot { margin-top: 10px; }
}
@media (max-height: 640px) {
  .auth-head .hint { display: none; }
  .auth-head .brand-mark { margin-bottom: 10px; }
}

/* Phones: the card dissolves into the page — no chrome, edge-to-edge form. */
@media (max-width: 520px) {
  body { background: var(--white); }
  .auth-shell { justify-content: flex-start; padding: 0 0 24px; }
  .auth-card {
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
  .auth-head { padding: 24px 20px 4px; }
  .auth-body { padding: 12px 20px 8px; }
  .apps-strip { display: none; }
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .apps-strip .app-tile, .auth-card { animation-duration: 1ms; animation-delay: 0ms !important; }
  .btn-primary, .brand-cta, .btn-provider { transition: none; }
}

/* ==========================================================================
 * Account page (profile picture) — a single centered light card, reusing the
 * form-head / alert / btn-primary language of the auth pages.
 * ==========================================================================*/
.account-shell { display: flex; justify-content: center; width: 100%; }
.account-card {
  width: 100%;
  max-width: 460px;
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: 34px 34px 28px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Success variant of .alert (the error styling stays the default). */
.alert-ok {
  background: #E7F6EC;
  color: #1B7A3D;
}

/* ---- Identity row: avatar + name/email/account number ---- */
.identity {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0 2px;
}
.avatar {
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(158deg, #0e3057, #0a2444);
  color: #eaf3fb;
}
.avatar-lg { width: 92px; height: 92px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-fallback {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
}
.identity-text { min-width: 0; }
.identity-name {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.identity-email {
  margin: 0 0 3px;
  font-size: 13.5px;
  color: var(--text-body);
  overflow-wrap: anywhere;
}
.identity-meta { margin: 0; font-size: 12px; color: var(--text-muted); }

/* ---- Picture upload ---- */
.picture-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.picture-picker { display: block; cursor: pointer; }
/* Keep the native input operable & focusable but visually replaced by the face below. */
.picture-picker input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.picture-picker-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  border: 1.5px dashed var(--slate-300);
  border-radius: var(--radius-lg);
  background: var(--slate-50);
  color: var(--text-body);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.picture-picker:hover .picture-picker-face {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--accent-ink);
}
.picture-picker input:focus-visible + .picture-picker-face {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(18, 154, 242, 0.35);
}
.picture-picker-face .ic { width: 20px; height: 20px; flex-shrink: 0; }
.picture-picker-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picture-actions { display: flex; }
.picture-hint { margin: 0; font-size: 12px; color: var(--text-muted); text-align: center; }
.picture-disabled {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--slate-50);
  color: var(--text-muted);
}
.picture-remove { margin: -4px 0 0; display: flex; justify-content: center; }

/* ---- Ghost / danger buttons (remove, sign out) ---- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text-body);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms, box-shadow 140ms;
}
.btn-ghost:hover { background: var(--slate-50); border-color: var(--slate-300); box-shadow: var(--shadow-1); }
.btn-ghost .ic { width: 17px; height: 17px; }
.btn-ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(18, 154, 242, 0.5); }
.btn-danger { color: var(--error-ink); }
.btn-danger:hover { background: var(--error-tint); border-color: #f3b9b3; color: var(--error-ink); }
.btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(226, 49, 36, 0.35); }

.account-foot {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: center;
}
.account-foot form { margin: 0; }

@media (max-width: 520px) {
  .account-card { padding: 26px 22px 22px; }
  .identity { flex-direction: column; text-align: center; }
}

/* ==========================================================================
 * Devices screen (device-limit gate) — the occupied slots, one per row, each
 * with a "sign this device out and continue" action. Lives inside .auth-form,
 * whose column gap spaces the note / list / buttons.
 * ==========================================================================*/
.devices-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-body);
}
.devices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.device-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  background: var(--white);
}
.device-row + .device-row { border-top: 1px solid var(--border-subtle); }
.device-ic {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--slate-100);
  color: var(--slate-500);
}
.device-ic .ic { width: 19px; height: 19px; }
.device-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.device-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.device-meta {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.device-row form { margin: 0; flex-shrink: 0; }
/* Compact variant of .btn-ghost.btn-danger sized for a list row. */
.btn-device { height: 34px; padding: 0 12px; font-size: 12.5px; gap: 6px; }
.btn-device .ic { width: 15px; height: 15px; }

/* A button that must look like the footer link (the "back to login" cancel is a
 * POST — it burns the gate cookie — so it can't be an anchor). */
.form-foot .link-button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--accent-ink);
  cursor: pointer;
}
.form-foot .link-button:hover { text-decoration: underline; }
.form-foot .link-button:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
 * Two-factor code field — the spartan/ui Input OTP pattern (see the Helm
 * component in admin-dashboard) rebuilt in plain CSS: six slots in two groups
 * either side of a separator, sharing borders so each group reads as one
 * control, the slot awaiting the next digit ringed and carrying a blinking
 * caret. The real <input> is laid OVER the slots — transparent, but a real
 * input — so it stays the labelled, focusable, pasteable, autofillable
 * control and the slots are pure decoration.
 *
 * auth.js builds the slots and adds .is-enhanced. Until it runs, and forever
 * where scripting is off, .otp-input is an ordinary centred code field.
 * ==========================================================================*/
.otp { position: relative; }
.otp-input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Letter-spacing trails the LAST digit too, so centring lands the ink half a
   * space left of true centre; the indent is that half. */
  letter-spacing: 0.32em;
  text-indent: 0.16em;
  text-align: center;
  color: var(--text-strong);
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 140ms, box-shadow 140ms, background 140ms;
}
.otp-input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(18, 154, 242, 0.16);
}

/* ---- Enhanced: the input goes invisible and covers the slots ---- */
.otp.is-enhanced {
  display: flex;
  justify-content: center;
  cursor: text;
  user-select: none;
}
.otp.is-enhanced .otp-input {
  position: absolute;
  inset: 0;
  height: 100%;
  padding: 0;
  color: transparent;
  background: transparent;
  caret-color: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  /* Collapse the invisible text so it can never widen the box or scroll it. */
  letter-spacing: -0.5em;
  text-indent: 0;
}
/* Decoration only: every click has to reach the input underneath. */
.otp-slots {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.otp-group { display: flex; align-items: center; }
.otp-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  background: var(--slate-50);
  /* One shared border per group: only the first slot draws a left edge. */
  border: 1px solid var(--border-subtle);
  border-left-width: 0;
  box-shadow: var(--shadow-1);
  transition: border-color 140ms, box-shadow 140ms, background 140ms;
}
.otp-group .otp-slot:first-child {
  border-left-width: 1px;
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.otp-group .otp-slot:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
/* The slot the next digit lands in, shown only while the input actually holds focus —
 * :focus-within, not a JS-tracked flag, so the highlight can never outlive the focus or
 * miss it. Same ring the other fields use. Raised so the ring is not clipped by the
 * neighbour's shared border. */
.otp.is-enhanced:focus-within .otp-slot.is-current {
  z-index: 1;
  background: var(--white);
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(18, 154, 242, 0.16);
}
.otp-caret {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}
.otp.is-enhanced:focus-within .otp-slot.has-caret .otp-caret { display: flex; }
.otp-caret::after {
  content: "";
  width: 1px;
  height: 17px;
  background: var(--text-strong);
  animation: otp-caret-blink 1s ease-out infinite;
}
@keyframes otp-caret-blink {
  0%, 70%, 100% { opacity: 1; }
  20%, 50% { opacity: 0; }
}
.otp-separator { display: flex; align-items: center; color: var(--slate-400); }
.otp-separator .ic { width: 16px; height: 16px; }

/* A rejected code marks the input, which is invisible here — so colour the slots. */
.otp.is-enhanced:has(.input-validation-error) .otp-slot { border-color: var(--error); }

/* Six 44px slots plus the separator need 296px; the form panel has less than
 * that once the card goes single-column, so step the slots down. */
@media (max-width: 520px) {
  .otp-slot { width: 38px; height: 38px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .otp-caret::after { animation: none; }
}

/* ==========================================================================
 * Recovery codes and linking a provider — the recovery-code sign-in step and
 * the /Account/Logins/Link cards. Built from the auth-form language above
 * (.field, .alert, .btn-*); only what those don't cover lives here.
 * ==========================================================================*/

/* A footer line that sits right under its form (the "use a recovery code"
 * switch), before the cancel footer that follows it. */
.form-foot-tight { margin-top: 10px; }
.form-foot-tight + .form-foot { margin-top: 6px; }

.field-hint { margin: 0; font-size: 12px; color: var(--text-muted); }

/* Recovery code: a plain field (no leading icon), letter-spaced mono so the
 * XXXXX-XXXXX groups read the way the downloaded list prints them. */
.recovery-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-strong);
  background: var(--slate-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 140ms, box-shadow 140ms, background 140ms;
}
.recovery-input::placeholder { color: var(--slate-400); letter-spacing: 0.08em; }
.recovery-input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(18, 154, 242, 0.16);
}
.recovery-input.input-validation-error { border-color: var(--error); background: #fff; }

/* ---- Link confirm card ---- */
.link-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.link-summary-ic {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--slate-100);
}
.link-summary-ic .brand-ic { width: 20px; height: 20px; }
.link-summary p {
  margin: 0;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-body);
  overflow-wrap: anywhere;
}
.link-summary strong { color: var(--text-strong); font-weight: 700; }

/* A caution, not an error: neutral tint, readable ink. */
.link-warning {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--slate-100);
  color: var(--text-body);
  font-size: 12.5px;
  line-height: 1.45;
}
.link-warning .ic { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--slate-500); }

/* Fresh-sign-in card: one full-width "Konfirmo me …" button per linked provider, label always shown. */
.providers.reverify-providers { grid-template-columns: 1fr; }
/* The set-a-password action is a link styled as the primary button. */
.auth-form > a.btn-primary { text-decoration: none; }

/* "Use a recovery code" — a native <details>, so it works without script. */
.recovery-toggle > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
}
.recovery-toggle > summary::-webkit-details-marker { display: none; }
.recovery-toggle > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 140ms var(--ease-out);
}
.recovery-toggle[open] > summary::before { transform: rotate(45deg); }
.recovery-toggle > summary:hover { text-decoration: underline; }
.recovery-toggle > summary:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}
.recovery-toggle > .field { margin-top: 10px; }

/* Card buttons that are not the primary action span the form like it does. */
.auth-form > .btn-ghost { width: 100%; }
/* The close button ships hidden (auth.js reveals it); .btn-ghost's display would override the attribute. */
.auth-form > .btn-ghost[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .recovery-toggle > summary::before { transition: none; }
}

/* ==========================================================================
 * Delete-account page (/Account/Delete) — what deletion means, the "I understand" box and the red button.
 * Lives inside .auth-form, whose column gap spaces the blocks.
 * ==========================================================================*/
.delete-lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-body);
  overflow-wrap: anywhere;
}
.delete-lead strong { color: var(--text-strong); font-weight: 700; }
.delete-heading {
  margin: 0 0 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.delete-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.delete-list li {
  position: relative;
  padding-left: 17px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-body);
}
.delete-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--error);
}
/* The one irreversible action: a filled red button, in the same shape as the primary one. */
.btn-primary.btn-destructive { background: var(--error-ink); }
.btn-primary.btn-destructive:hover { background: #8f1c13; }
.btn-primary.btn-destructive:hover .ic { transform: none; }
.btn-primary.btn-destructive:focus-visible { box-shadow: 0 0 0 3px rgba(226, 49, 36, 0.35); outline: none; }