/* pajID — ID Platform CSS
   Extends the canonical pajic.it design system (site.css loaded first).
   Uses the same #lg-disp SVG filter, --vice-pink/cyan tokens, .liquid-glass
   material, and .liquid-button component as the main site.
   All ID pages have the lensFilterSVG injected by build.mjs so url(#lg-disp)
   resolves correctly.
*/

/* ── Level palette (only thing truly new here) ─────────────────── */
:root {
  --id-level-0: rgba(255,255,255,0.28);
  --id-level-1: #3b82f6;
  --id-level-2: var(--vice-cyan, #18b8ff);
  --id-level-3: #22c55e;
  --id-level-4: var(--vice-purple, #7428ff);
  --id-level-5: #f59e0b;
  /* ISO/IEC 7810 ID-1 credit card ratio: 85.60 × 53.98 mm = 1.5858:1 */
  --id-card-w: 420px;
}

/* ── ID page light mode background ──────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-page {
    background:
      radial-gradient(ellipse 70% 40% at 20% 0%, rgba(26,100,255,0.06) 0%, transparent 55%),
      #f2f4f8;
  }
}
[data-theme="light"] .id-page {
  background:
    radial-gradient(ellipse 70% 40% at 20% 0%, rgba(26,100,255,0.06) 0%, transparent 55%),
    #f2f4f8;
}

/* ── Light mode ────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --id-level-1: #2563eb;
    --id-level-3: #16a34a;
  }
}

/* ── Base ──────────────────────────────────────────────────────── */
.id-page {
  min-height: 100vh;
  /* ID platform has its own premium dark background — NOT the main site aurora */
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(26,100,255,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 95%, rgba(0,180,255,0.07) 0%, transparent 55%),
    #05081a;
  color: var(--chrome-text-strong, #f0f4ff);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Topbar — canonical liquid-glass matching .topbar in site.css ─ */
.id-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 32px);
  height: 68px;
  position: sticky;
  top: 0;
  z-index: 200;
  /* Same material as .topbar */
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.04) brightness(1.01);
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.04) brightness(1.01);
  box-shadow: var(--glass-shadow);
}

.id-topbar-brand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--chrome-text-strong, #f0f4ff);
  text-decoration: none;
}

.id-topbar-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
}

.id-topbar-nav a {
  color: var(--chrome-text, rgba(226,244,255,0.68));
  text-decoration: none;
  font-size: 13px;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.15s;
}

.id-topbar-nav a:hover {
  color: var(--chrome-text-strong, #f0f4ff);
}

/* ── Layout ─────────────────────────────────────────────────────── */
.id-section {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 32px);
}

.id-section-sm {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 32px);
}

/* ── Typography ─────────────────────────────────────────────────── */
.id-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vice-cyan, #18b8ff);
  margin-bottom: 12px;
}

.id-h1 {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--chrome-text-strong, #f0f4ff);
  margin: 0 0 20px;
}

.id-h2 {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--chrome-text-strong, #f0f4ff);
  margin: 0 0 16px;
}

.id-h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--chrome-text-strong, #f0f4ff);
  margin: 0 0 8px;
}

.id-lead {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.65;
  color: var(--chrome-text, rgba(226,244,255,0.68));
  margin-bottom: 32px;
  max-width: 580px;
}

.id-p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--chrome-text, rgba(226,244,255,0.68));
  margin-bottom: 16px;
}

/* ── Glass panels — use canonical liquid-glass material ──────────── */
/* .id-glass and .id-panel extend the same material as .liquid-glass */
.id-glass,
.id-panel,
.id-form,
.id-dashboard-card,
.id-consent-card,
.id-level-card,
.id-step,
.id-docs-nav,
.id-code {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06) brightness(1.02);
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06) brightness(1.02);
  box-shadow: var(--glass-shadow);
}

/* Canonical pseudo-element edge refractions (matches liquid-glass::before in site.css) */
.id-glass::before,
.id-panel::before,
.id-form::before,
.id-dashboard-card::before,
.id-consent-card::before,
.id-level-card::before,
.id-step::before,
.id-docs-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.32) 0%,
      rgba(255,255,255,.14) 5%,
      rgba(255,255,255,.04) 10%,
      transparent 20% 80%,
      rgba(114,215,255,.04) 90%,
      rgba(114,215,255,.14) 95%,
      rgba(255,255,255,.26) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.16) 0%,
      transparent 12% 88%,
      rgba(255,255,255,.08) 100%);
  z-index: 1;
}

/* Edge-refraction border (matches liquid-glass::after in site.css) */
.id-glass::after,
.id-panel::after,
.id-form::after,
.id-dashboard-card::after,
.id-consent-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--glass-edge-pink), transparent 12% 88%, var(--glass-edge-cyan)),
    linear-gradient(180deg, rgba(255,255,255,.30), transparent 15% 84%, rgba(255,255,255,.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc(var(--glass-edge) * .22);
  z-index: 2;
}

.id-glass:hover::after,
.id-panel:hover::after,
.id-form:hover::after,
.id-dashboard-card:hover::after {
  opacity: calc(var(--glass-edge) * .55);
}

/* Ensure inner content is above pseudo-elements */
.id-glass > *,
.id-panel > *,
.id-form > *,
.id-dashboard-card > *,
.id-consent-card > *,
.id-step > * { position: relative; z-index: 3; }

/* Padding for panels */
.id-panel { border-radius: 18px; padding: 28px 28px; }
.id-form {
  border-radius: 22px;
  padding: 34px 32px;
  gap: 18px;
  box-shadow: var(--glass-shadow), 0 30px 60px -30px color-mix(in srgb, var(--vice-cyan, #18b8ff) 30%, transparent);
}
.id-dashboard-card { border-radius: 16px; padding: 22px 24px; }
.id-consent-card { border-radius: 20px; padding: 28px 32px; max-width: 480px; margin: 0 auto; }
.id-level-card { border-radius: 14px; padding: 16px; text-align: center; }
.id-step { border-radius: 16px; padding: 20px; }
.id-docs-nav { border-radius: 14px; padding: 16px; position: sticky; top: 80px; }
.id-code {
  border-radius: 12px;
  padding: 20px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--chrome-text-strong, #f0f4ff);
  overflow-x: auto;
  background: rgba(0,0,0,0.38);
}

/* ── Buttons — use canonical .liquid-button style ────────────────── */
/* .id-btn-primary matches .button-primary from site.css */
.id-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  min-height: 48px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 780;
  font-family: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Default: same glass as secondary liquid-button */
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06);
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06);
  box-shadow: var(--glass-shadow);
  color: var(--chrome-text-strong, #f0f4ff);
}

.id-btn:hover { transform: translateY(-2px) scale(1.01); }

.id-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Primary — matches .button-primary pink gradient */
.id-btn-primary {
  --glass-edge: .72;
  --glass-bg:
    linear-gradient(135deg,
      color-mix(in srgb, var(--vice-pink) 82%, white),
      color-mix(in srgb, var(--vice-pink) 48%, transparent) 55%,
      color-mix(in srgb, var(--vice-cyan) 22%, transparent)),
    rgba(180,0,80,.22);
  --glass-border: color-mix(in srgb, var(--vice-pink) 80%, white);
  --glass-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--vice-pink) 50%, rgba(255,255,255,.20)),
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -1px 0 color-mix(in srgb, var(--vice-pink) 40%, transparent),
    0 4px 18px rgba(0,0,0,.28);
  color: white;
  text-shadow: 0 0 10px rgba(0,0,0,.30);
  backdrop-filter: url(#lg-disp) blur(20px) saturate(2.2) contrast(1.1) brightness(1.1);
  -webkit-backdrop-filter: url(#lg-disp) blur(20px) saturate(2.2) contrast(1.1) brightness(1.1);
}

/* Secondary — matches .button-secondary */
.id-btn-secondary {
  --glass-bg:
    linear-gradient(135deg, rgba(255,255,255,.058), rgba(255,255,255,.005) 48%,
      color-mix(in srgb, var(--vice-cyan) 7%, transparent)),
    rgba(5,8,26, calc(var(--glass-alpha, .09) * .74));
}

/* Small button variant */
.id-btn-sm {
  min-height: 34px;
  padding: 0 14px;
  font-size: 12px;
}

/* Danger */
.id-btn-danger {
  --glass-bg: rgba(239,68,68,0.1);
  --glass-border: rgba(239,68,68,0.3);
  color: #f87171;
}

/* ── ID Card ─────────────────────────────────────────────────────── */
.id-card-wrapper {
  width: var(--id-card-w);
  /* Height derived from ISO 7810 ID-1 ratio (85.60 × 53.98 mm = 1.5858:1)
     so the card always has the correct credit-card proportions at any width. */
  aspect-ratio: 85.6 / 54;
  height: auto;
  perspective: 1200px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.id-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform;
}

.id-card-wrapper.is-flipped .id-card {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + 180deg));
}

.id-card-front,
.id-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  /* Canonical liquid-glass material — same chain as the rest of the site */
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur, 14px)) saturate(var(--glass-saturation, 1.52)) contrast(1.06) brightness(1.02);
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur, 14px)) saturate(var(--glass-saturation, 1.52)) contrast(1.06) brightness(1.02);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  color: var(--chrome-text-strong, #f0f4ff);
}

/* Card text tokens — dark mode default */
.id-card-front,
.id-card-back {
  --card-text:   #f0f4ff;
  --card-text-2: rgba(200,215,255,0.72);
  --card-text-3: rgba(160,180,220,0.44);
}

/* Light-mode card: dark text on light glass */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-card-front,
  :root:not([data-theme="dark"]) .id-card-back {
    --card-text:   #08101e !important;
    --card-text-2: rgba(8,16,30,0.72) !important;
    --card-text-3: rgba(8,16,30,0.42) !important;
  }
}
[data-theme="light"] .id-card-front,
[data-theme="light"] .id-card-back {
  --card-text:   #08101e !important;
  --card-text-2: rgba(8,16,30,0.72) !important;
  --card-text-3: rgba(8,16,30,0.42) !important;
}

/* Light-mode card UCID: use a darker cyan for contrast */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-card-ucid { color: #0070a8 !important; }
}
[data-theme="light"] .id-card-ucid { color: #0070a8 !important; }

.id-card-back { transform: rotateY(180deg); }

/* Mouse-driven reflection sweep only — no solid colour overlays */
.id-card-front::before,
.id-card-back::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    calc(var(--reflect-angle, 135deg)),
    rgba(255,255,255,0.032) 0%,
    transparent 45%
  );
  pointer-events: none;
  transition: background 0.08s linear;
  z-index: 1;
}

/* Top edge refraction — Vice cyan, very subtle */
.id-card-front::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 5%,
    color-mix(in srgb, var(--vice-cyan,#18b8ff) 38%, transparent) 30%,
    color-mix(in srgb, var(--vice-cyan,#18b8ff) 48%, transparent) 50%,
    color-mix(in srgb, var(--vice-cyan,#18b8ff) 38%, transparent) 70%,
    transparent 95%);
  z-index: 4;
}

/* Card brand logo — adapts to theme */
.id-card-brand img {
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-card-brand img { filter: none; opacity: 1; }
}
[data-theme="light"] .id-card-brand img { filter: none; opacity: 1; }

/* Ensure content is above overlays */
.id-card-front > *,
.id-card-back > * { position: relative; z-index: 3; }

/* ── Card front interior ─────────────────────────────────────────── */
.id-card-brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.id-card-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* Photo + fields side by side */
.id-card-body-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
}

.id-card-photo {
  /* EU ID photo: 7:9 ratio, width matches QR code (100px) for visual uniformity */
  width: 100px;
  height: 129px; /* 100 × 9/7 = 128.57 ≈ 129px */
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.id-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.id-card-photo svg { width: 54px; height: 70px; opacity: 0.28; }

/* Identity fields */
.id-card-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.id-card-field-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.id-card-field-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--card-text-3, rgba(255,255,255,0.32));
}

.id-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--card-text, rgba(255,255,255,.95));
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id-card-ucid {
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
  color: color-mix(in srgb, var(--vice-cyan, #18b8ff) 75%, rgba(255,255,255,0.8));
  letter-spacing: 0.16em;
}


/* DOB, citizenship, small value fields on card */
.id-card-dob,
.id-card-citizenship {
  font-size: 12px;
  font-weight: 600;
  color: var(--card-text-2, rgba(255,255,255,.72));
  letter-spacing: 0.01em;
}
/* Signature on card front — theme-aware CSS filter */
.id-card-front { --card-sig-filter: brightness(0) invert(1); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-card-front { --card-sig-filter: brightness(0); }
}
[data-theme="light"] .id-card-front { --card-sig-filter: brightness(0); }

/* Signature: sits immediately below body-row (UCID level), right-aligned */
.id-card-sig-area {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 5px;
}
.id-card-sig-img {
  max-height: 22px;
  max-width: 100px;
  width: auto;
  object-fit: contain;
  object-position: right center;
  filter: var(--card-sig-filter);
  opacity: 0.65;
  display: none;
  flex-shrink: 0;
}
.id-card-sig-img.is-loaded { display: block; }

/* Status footer */
.id-card-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.id-card-active-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--card-text-3, rgba(255,255,255,0.42));
  text-transform: uppercase;
}
.id-card-active-dot::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--card-text-3, rgba(255,255,255,0.22));
  flex-shrink: 0;
}
.id-card-active-dot.is-active { color: var(--card-text-2, rgba(255,255,255,0.55)); }
.id-card-active-dot.is-active::before { background: var(--id-level-3); }

.id-card-since {
  font-size: 10px;
  color: var(--card-text-3, rgba(255,255,255,0.24));
  letter-spacing: 0.04em;
}

/* ── Card back interior ──────────────────────────────────────────── */
.id-card-back-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex: 1;
}

.id-card-qr {
  width: 128px;
  height: 128px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.id-card-back-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.id-card-meta-row { display: flex; flex-direction: column; gap: 2px; }

.id-card-meta-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--card-text-3, rgba(255,255,255,0.32));
}

.id-card-meta-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--card-text-2, rgba(255,255,255,0.72));
  line-height: 1.3;
}

.id-card-scan-hint {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-text-3, rgba(255,255,255,0.2));
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Level badge ─────────────────────────────────────────────────── */
.id-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid;
  color: var(--chrome-text-strong, #f0f4ff);
  border-color: rgba(255,255,255,0.12);
}

.id-level-badge[data-level="0"] { color: var(--id-level-0); border-color: var(--id-level-0); }
.id-level-badge[data-level="1"] { color: var(--id-level-1); border-color: var(--id-level-1); }
.id-level-badge[data-level="2"] { color: var(--id-level-2); border-color: var(--id-level-2); }
.id-level-badge[data-level="3"] { color: var(--id-level-3); border-color: var(--id-level-3); }
.id-level-badge[data-level="4"] { color: var(--id-level-4); border-color: var(--id-level-4); }
.id-level-badge[data-level="5"] { color: var(--id-level-5); border-color: var(--id-level-5); }

.id-level-card-badge {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.id-level-card[data-level="0"] .id-level-card-badge { color: var(--id-level-0); }
.id-level-card[data-level="1"] .id-level-card-badge { color: var(--id-level-1); }
.id-level-card[data-level="2"] .id-level-card-badge { color: var(--id-level-2); }
.id-level-card[data-level="3"] .id-level-card-badge { color: var(--id-level-3); }
.id-level-card[data-level="4"] .id-level-card-badge { color: var(--id-level-4); }
.id-level-card[data-level="5"] .id-level-card-badge { color: var(--id-level-5); }

.id-level-card-desc { font-size: 12px; color: var(--chrome-text, rgba(226,244,255,0.68)); line-height: 1.4; }

/* ── Form ────────────────────────────────────────────────────────── */
.id-form { display: flex; flex-direction: column; }

.id-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 600px) { .id-form-row { grid-template-columns: 1fr; } }

.id-field { display: flex; flex-direction: column; gap: 7px; }

.id-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chrome-text, rgba(226,244,255,0.68));
  opacity: .75;
  transition: color .15s ease, opacity .15s ease;
}
.id-field:focus-within .id-label {
  color: var(--vice-cyan, #18b8ff);
  opacity: 1;
}

/* Inputs — iOS 26 pill/rounded style */
.id-input,
.id-select {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--glass-border);
  border-radius: 999px; /* pill */
  color: var(--chrome-text-strong, #f0f4ff);
  font-size: 15px;
  font-family: inherit;
  padding: 13px 20px;
  min-height: 50px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.id-textarea {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  color: var(--chrome-text-strong, #f0f4ff);
  font-size: 15px;
  font-family: inherit;
  padding: 12px 18px;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  width: 100%;
  box-sizing: border-box;
}

/* Select: add chevron */
.id-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(200,215,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.id-input:focus,
.id-textarea:focus,
.id-select:focus {
  border-color: color-mix(in srgb, var(--vice-cyan) 65%, transparent);
  background: rgba(255,255,255,0.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 4px color-mix(in srgb, var(--vice-cyan) 14%, transparent),
    0 0 22px -6px color-mix(in srgb, var(--vice-cyan) 65%, transparent);
  transform: translateY(-1px);
}

.id-input::placeholder,
.id-textarea::placeholder { color: rgba(200,215,255,0.28); }

.id-textarea { min-height: 100px; resize: vertical; }
.id-select option { background: #0d1025; }

/* Light mode inputs */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-input,
  :root:not([data-theme="dark"]) .id-select {
    background: rgba(255,255,255,0.88);
    border-color: rgba(0,0,0,0.12);
    color: #080e1e;
  }
  :root:not([data-theme="dark"]) .id-textarea {
    background: rgba(255,255,255,0.88);
    border-color: rgba(0,0,0,0.12);
    color: #080e1e;
  }
  :root:not([data-theme="dark"]) .id-input::placeholder,
  :root:not([data-theme="dark"]) .id-textarea::placeholder { color: rgba(8,14,30,0.3); }
  :root:not([data-theme="dark"]) .id-input:focus,
  :root:not([data-theme="dark"]) .id-textarea:focus,
  :root:not([data-theme="dark"]) .id-select:focus {
    background: rgba(255,255,255,0.98);
    border-color: color-mix(in srgb, var(--vice-cyan) 55%, transparent);
  }
  :root:not([data-theme="dark"]) .id-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(8,14,30,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  :root:not([data-theme="dark"]) .id-select option { background: #ffffff; color: #080e1e; }
}
[data-theme="light"] .id-input,
[data-theme="light"] .id-select {
  background: rgba(255,255,255,0.88);
  border-color: rgba(0,0,0,0.12);
  color: #080e1e;
}
[data-theme="light"] .id-textarea {
  background: rgba(255,255,255,0.88);
  border-color: rgba(0,0,0,0.12);
  color: #080e1e;
}
[data-theme="light"] .id-input::placeholder,
[data-theme="light"] .id-textarea::placeholder { color: rgba(8,14,30,0.3); }
[data-theme="light"] .id-input:focus,
[data-theme="light"] .id-textarea:focus,
[data-theme="light"] .id-select:focus {
  background: rgba(255,255,255,0.98);
}
[data-theme="light"] .id-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(8,14,30,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-theme="light"] .id-select option { background: #ffffff; color: #080e1e; }

.id-checkbox-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.id-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--vice-cyan, #18b8ff); flex-shrink: 0; }
.id-checkbox-label { font-size: 14px; color: var(--chrome-text, rgba(226,244,255,0.68)); line-height: 1.55; }

/* ── Consent card ────────────────────────────────────────────────── */
.id-consent-app-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--chrome-text-strong, #f0f4ff);
  margin-bottom: 4px;
}

.id-consent-scope-list { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 6px; }

.id-consent-scope-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--chrome-text, rgba(226,244,255,0.68));
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid var(--glass-border);
}

.id-consent-scope-item::before { content: '✓'; color: var(--vice-cyan, #18b8ff); font-weight: 700; flex-shrink: 0; }

.id-consent-actions { display: flex; gap: 12px; margin-top: 24px; }
.id-consent-actions .id-btn { flex: 1; }

/* ── Dashboard layout ───────────────────────────────────────────── */
.id-dash-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 40px) 96px;
}

.id-dash-identity {
  margin-bottom: 48px;
}

.id-dash-greeting {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--chrome-text-strong, #f0f4ff);
  margin: 6px 0 12px;
  line-height: 1.1;
}

.id-dash-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.id-dash-ucid {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--vice-cyan, #18b8ff) 65%, rgba(255,255,255,.6));
}

/* Card section: centered */
.id-dash-card-section {
  margin-bottom: 72px;
}

.id-dash-card-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.id-dash-card-hint {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  font-weight: 600;
}

/* Section titles */
.id-dash-section {
  margin-bottom: 40px;
}

.id-dash-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chrome-text, rgba(226,244,255,0.68));
  opacity: 0.55;
  margin: 0 0 10px;
}

/* Two-column grids */
.id-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

@media (max-width: 600px) { .id-dash-grid { grid-template-columns: 1fr; } }

/* Dashboard cards */
.id-dashboard-card {
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.id-dash-card-body {
  flex: 1;
}

.id-dash-card-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Row items inside cards */
.id-app-row,
.id-passkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.id-app-row:last-child,
.id-passkey-row:last-child { border-bottom: none; }

/* Verification progress */
.id-dash-section + .id-dash-section { margin-top: 0; } /* gap handled by grid/flex parent */

.id-dash-verify-card {
  padding: 20px 24px;
}

.id-dash-verify-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.id-dash-verify-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
}
.id-dash-verify-step:last-child { border-bottom: none; padding-bottom: 0; }
.id-dash-verify-step:first-child { padding-top: 0; }

.id-dash-verify-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  flex-shrink: 0;
  margin-top: 3px;
  transition: background 0.2s, border-color 0.2s;
}

.id-dash-verify-step.is-done .id-dash-verify-dot {
  background: var(--id-level-3);
  border-color: var(--id-level-3);
}

.id-dash-verify-step.is-current .id-dash-verify-dot {
  background: var(--vice-cyan, #18b8ff);
  border-color: var(--vice-cyan, #18b8ff);
}

.id-dash-verify-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--chrome-text-strong, #f0f4ff);
  margin-bottom: 2px;
}

.id-dash-verify-step:not(.is-done):not(.is-current) .id-dash-verify-label {
  opacity: 0.38;
}

.id-dash-verify-sub {
  font-size: 12px;
  color: var(--chrome-text, rgba(226,244,255,.68));
  opacity: 0.5;
  line-height: 1.4;
}

/* Old dashboard-grid alias removed — kept for any legacy references */
.id-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .id-dashboard-grid { grid-template-columns: 1fr; } }

/* ── Status badges ───────────────────────────────────────────────── */
.id-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.id-status-active   { background: rgba(34,197,94,0.12);  color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.id-status-pending  { background: rgba(251,191,36,0.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
.id-status-rejected { background: rgba(239,68,68,0.12);   color: #f87171; border: 1px solid rgba(239,68,68,0.25); }

/* ── Alert / message states ──────────────────────────────────────── */
.id-alert {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 16px;
  border: 1px solid;
}

.id-alert-success { background: rgba(34,197,94,0.08);   border-color: rgba(34,197,94,0.22);  color: #4ade80; }
.id-alert-error   { background: rgba(239,68,68,0.08);   border-color: rgba(239,68,68,0.22);  color: #f87171; }
.id-alert-info    { background: rgba(0,229,255,0.06);   border-color: rgba(0,229,255,0.18);  color: var(--vice-cyan, #18b8ff); }

/* ── Divider ─────────────────────────────────────────────────────── */
.id-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 32px 0; }

/* ── How-it-works steps ──────────────────────────────────────────── */
.id-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 28px 0;
}

.id-step-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--vice-cyan, #18b8ff);
  opacity: 0.45;
  margin-bottom: 8px;
  line-height: 1;
}

.id-step-title { font-size: 16px; font-weight: 600; color: var(--chrome-text-strong, #f0f4ff); margin-bottom: 6px; }
.id-step-desc  { font-size: 14px; color: var(--chrome-text, rgba(226,244,255,0.68)); line-height: 1.55; }

/* ── Verification levels ─────────────────────────────────────────── */
.id-levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

/* ── Hero section ────────────────────────────────────────────────── */
.id-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  min-height: 82vh;
  padding: clamp(60px, 8vw, 96px) clamp(16px, 4vw, 32px);
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .id-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 52px 16px;
  }
  .id-card-wrapper { width: 100%; max-width: var(--id-card-w); margin: 0 auto; }
}

.id-hero-card-area { display: flex; justify-content: center; align-items: center; }

/* ── Code block ──────────────────────────────────────────────────── */
.id-code .key  { color: var(--vice-cyan, #18b8ff); }
.id-code .str  { color: #a5d6a7; }
.id-code .num  { color: #ffcc80; }
.id-code .bool { color: #ce93d8; }

/* ── API grid ────────────────────────────────────────────────────── */
.id-api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-top: 32px; }
@media (max-width: 768px) { .id-api-grid { grid-template-columns: 1fr; } }

/* ── Footer ──────────────────────────────────────────────────────── */
.id-footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 32px clamp(16px,4vw,32px);
  text-align: center;
  font-size: 13px;
  color: var(--chrome-text, rgba(226,244,255,0.68));
  opacity: 0.6;
}

/* ── Spinner ─────────────────────────────────────────────────────── */
.id-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: var(--vice-cyan, #18b8ff);
  border-radius: 50%;
  animation: id-spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes id-spin { to { transform: rotate(360deg); } }

/* ── Passkey icon ────────────────────────────────────────────────── */
.id-passkey-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(0,229,255,0.07);
  border: 1px solid rgba(0,229,255,0.15);
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.id-empty {
  text-align: center;
  padding: 32px;
  color: var(--chrome-text, rgba(226,244,255,0.68));
  opacity: 0.55;
  font-size: 14px;
}

/* ── Docs layout ─────────────────────────────────────────────────── */
.id-docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
@media (max-width: 768px) { .id-docs-layout { grid-template-columns: 1fr; } }

.id-docs-nav a {
  display: block;
  font-size: 13px;
  color: var(--chrome-text, rgba(226,244,255,0.68));
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}

.id-docs-nav a:hover { color: var(--chrome-text-strong, #f0f4ff); background: rgba(255,255,255,0.05); }

.id-docs-content section { margin-bottom: 48px; scroll-margin-top: 80px; }
.id-docs-content h2 { font-size: 22px; font-weight: 700; color: var(--chrome-text-strong, #f0f4ff); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.id-docs-content h3 { font-size: 16px; font-weight: 600; color: var(--chrome-text-strong, #f0f4ff); margin: 20px 0 8px; }
.id-docs-content p { font-size: 15px; line-height: 1.7; color: var(--chrome-text, rgba(226,244,255,0.68)); margin-bottom: 12px; }

/* ── Scope table ─────────────────────────────────────────────────── */
.id-scope-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.id-scope-table th { text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chrome-text, rgba(226,244,255,0.68)); border-bottom: 1px solid rgba(255,255,255,0.07); }
.id-scope-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--chrome-text-strong, #f0f4ff); vertical-align: top; }
.id-scope-table td:first-child { font-family: monospace; color: var(--vice-cyan, #18b8ff); }

/* ── Theme toggle ────────────────────────────────────────────────── */
.id-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  color: var(--chrome-text, rgba(226,244,255,0.68));
  font-size: 16px;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.id-theme-toggle:hover {
  color: var(--chrome-text-strong, #f0f4ff);
  border-color: color-mix(in srgb, var(--vice-cyan) 40%, transparent);
}

/* ── Logo ────────────────────────────────────────────────────────── */
.id-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--chrome-text-strong, #f0f4ff);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.id-logo img,
.id-logo svg {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 0 0 transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .id-logo img,
  .id-logo svg {
    animation: id-logo-breathe 3.6s ease-in-out infinite;
  }
}
@keyframes id-logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--vice-cyan, #18b8ff) 35%, transparent)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--vice-cyan, #18b8ff) 85%, transparent)) drop-shadow(0 0 16px color-mix(in srgb, var(--vice-purple, #7428ff) 45%, transparent)); transform: scale(1.06); }
}
.id-logo span {
  background: linear-gradient(100deg,
    var(--chrome-text-strong, #f0f4ff) 38%,
    var(--vice-cyan, #18b8ff) 50%,
    var(--chrome-text-strong, #f0f4ff) 62%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .id-logo span { animation: id-logo-shimmer 3.6s ease-in-out infinite; }
}
@keyframes id-logo-shimmer {
  0%, 20%  { background-position: 100% 0; }
  60%, 100% { background-position: -60% 0; }
}
.id-logo:hover img,
.id-logo:hover svg { animation-duration: 1.1s; }

/* ── Country dropdown ────────────────────────────────────────────── */
.id-country-wrap { position: relative; }

.id-country-search {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--chrome-text-strong, #f0f4ff);
  font-size: 15px;
  font-family: inherit;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.id-country-search:focus {
  border-color: color-mix(in srgb, var(--vice-cyan) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vice-cyan) 8%, transparent);
}

.id-country-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  /* Dark mode */
  background: rgba(8,12,28,0.98);
  color: rgba(226,244,255,0.82);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 300;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Smooth scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

/* Light mode dropdown */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-country-dropdown {
    background: rgba(255,255,255,0.97);
    color: #0a1628;
    box-shadow: 0 8px 32px rgba(0,0,0,0.16);
    border-color: rgba(0,0,0,0.1);
  }
}
[data-theme="light"] .id-country-dropdown {
  background: rgba(255,255,255,0.97);
  color: #0a1628;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  border-color: rgba(0,0,0,0.1);
}

.id-country-dropdown[hidden] { display: none; }

.id-country-option {
  padding: 9px 14px;
  font-size: 14px;
  color: inherit;
  cursor: pointer;
  transition: background 0.08s;
  outline: none;
}

.id-country-option:hover,
.id-country-option.is-active {
  background: color-mix(in srgb, var(--vice-cyan) 12%, transparent);
  color: var(--vice-cyan, #18b8ff);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-country-option:hover,
  :root:not([data-theme="dark"]) .id-country-option.is-active {
    background: rgba(24,184,255,0.1);
    color: #0070a8;
  }
}
[data-theme="light"] .id-country-option:hover,
[data-theme="light"] .id-country-option.is-active {
  background: rgba(24,184,255,0.1);
  color: #0070a8;
}

/* ── Verification progress ───────────────────────────────────────── */
.id-verify-bar { display: flex; align-items: center; gap: 4px; margin: 16px 0; }
.id-verify-step { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); transition: background 0.3s; }
.id-verify-step.is-done    { background: var(--vice-cyan, #18b8ff); }
.id-verify-step.is-current { background: var(--vice-pink, #ff0a8a); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .id-topbar { padding: 0 14px; height: 56px; }
  .id-section { padding: 40px 14px; }
  .id-section-sm { padding: 32px 14px; }
  /* Fill available width; aspect-ratio keeps the correct credit-card proportions */
  .id-card-wrapper { --id-card-w: 100%; max-width: var(--id-card-w, 420px); }
  .id-hero { gap: 28px; padding: 40px 14px; }
  .id-dashboard-grid { gap: 12px; }
}


/* ==========================================================================
   ID VISUAL OVERHAUL — additive layer
   Theme toggle, light/dark bridge, floating bottom nav, landing polish.
   Appended after the base system; all selectors are additive so existing
   pages keep working. Inherits --glass-* / --vice-* from site.css when present.
   ========================================================================== */

:root {
  /* Bridge to the canonical site.css liquid-glass tokens, with safe fallbacks */
  --glass-blur: 22px;
  --glass-saturation: 1.7;
  --glass-bg: rgba(16, 22, 44, .55);
  --glass-border: var(--id-border, rgba(255, 255, 255, .12));
  --glass-highlight: rgba(255, 255, 255, .16);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 32px rgba(0, 0, 0, .40);
  --chrome-text: var(--id-muted, rgba(226, 244, 255, .58));
  --chrome-text-strong: var(--id-text, #f0f4ff);
}

/* ---------- Light mode (system + explicit) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --id-bg: #f2f4f8;
    --id-bg-2: #e9edf4;
    --id-surface: rgba(8, 14, 30, .035);
    --id-surface-2: rgba(8, 14, 30, .06);
    --id-border: rgba(8, 14, 30, .10);
    --id-border-2: rgba(8, 14, 30, .16);
    --id-text: #080e1e;
    --id-muted: rgba(8, 14, 30, .58);
    --glass-bg: rgba(255, 255, 255, .72);
    --glass-border: rgba(0, 0, 0, .09);
    --glass-highlight: rgba(255, 255, 255, .95);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 8px rgba(0, 0, 0, .08);
    --chrome-text: rgba(8, 14, 30, .60);
    --chrome-text-strong: #080e1e;
  }
}
[data-theme="light"] {
  --id-bg: #f2f4f8;
  --id-bg-2: #e9edf4;
  --id-surface: rgba(8, 14, 30, .035);
  --id-surface-2: rgba(8, 14, 30, .06);
  --id-border: rgba(8, 14, 30, .10);
  --id-border-2: rgba(8, 14, 30, .16);
  --id-text: #080e1e;
  --id-muted: rgba(8, 14, 30, .58);
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-border: rgba(0, 0, 0, .09);
  --glass-highlight: rgba(255, 255, 255, .95);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 8px rgba(0, 0, 0, .08);
  --chrome-text: rgba(8, 14, 30, .60);
  --chrome-text-strong: #080e1e;
}
/* Explicit dark overrides system-light */
[data-theme="dark"] {
  --id-bg: #0a0e1a;
  --id-bg-2: #0f1420;
  --id-surface: rgba(255, 255, 255, .03);
  --id-surface-2: rgba(255, 255, 255, .05);
  --id-border: rgba(255, 255, 255, .08);
  --id-border-2: rgba(255, 255, 255, .12);
  --id-text: #e8edf5;
  --id-muted: rgba(232, 237, 245, .55);
  --glass-bg: rgba(16, 22, 44, .55);
  --glass-border: rgba(255, 255, 255, .12);
  --chrome-text: rgba(226, 244, 255, .58);
  --chrome-text-strong: #f0f4ff;
}

body.id-page {
  background: var(--id-bg);
  color: var(--id-text);
  transition: background .25s ease, color .25s ease;
}
/* In light mode, the dark/white logo wordmark needs darker chrome where it sits on glass */
[data-theme="light"] .id-topbar,
:root:not([data-theme="dark"]) .id-topbar {
  background: var(--glass-bg);
}

/* ---------- Theme toggle button ---------- */
.id-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--id-border-2, rgba(255, 255, 255, .12));
  background: var(--id-surface-2, rgba(255, 255, 255, .05));
  color: var(--id-text, #f0f4ff);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.id-theme-toggle:hover { border-color: var(--id-cyan, #18b8ff); }
.id-theme-toggle:active { transform: scale(.94); }

/* ---------- Floating bottom navigation (matches site .desktop-nav) ---------- */
.id-bottom-nav {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: min(640px, calc(100% - 28px));
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 7px;
  border-radius: 36px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06) brightness(1.02);
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06) brightness(1.02);
  box-shadow: var(--glass-shadow);
}

.id-bottom-nav-selection {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 7px;
  width: 0;
  border-radius: 28px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .13);
  transition: left .28s cubic-bezier(.22, 1, .36, 1), width .28s cubic-bezier(.22, 1, .36, 1), opacity .2s;
  pointer-events: none;
  opacity: 0;
}
[data-theme="light"] .id-bottom-nav-selection,
:root:not([data-theme="dark"]) .id-bottom-nav-selection {
  background: rgba(8, 14, 30, .06);
  border-color: rgba(8, 14, 30, .10);
}

.id-bottom-nav a,
.id-bottom-nav .id-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 28px;
  color: var(--chrome-text, rgba(226, 244, 255, .58));
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .15s;
  position: relative;
  z-index: 1;
}
.id-bottom-nav a:hover,
.id-bottom-nav .id-nav-item:hover { color: var(--chrome-text-strong, #f0f4ff); }
.id-bottom-nav a.is-active,
.id-bottom-nav .id-nav-item.is-active { color: var(--chrome-text-strong, #f0f4ff); }

.id-bottom-nav .id-nav-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: inherit;
}
.id-bottom-nav .id-nav-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pages with the bottom nav get extra bottom padding so content clears it */
.id-has-bottom-nav .id-dash-wrap,
.id-has-bottom-nav .id-section,
.id-has-bottom-nav .id-section-sm {
  padding-bottom: calc(80px + max(18px, env(safe-area-inset-bottom)) + 16px);
}

/* ---------- Dashboard verify steps: done / current states ---------- */
.id-dash-verify-step.is-done .id-dash-verify-dot {
  background: var(--id-green, #22c55e);
  border-color: var(--id-green, #22c55e);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .14);
}
.id-dash-verify-step.is-current .id-dash-verify-dot {
  background: transparent;
  border-color: var(--id-cyan, #18b8ff);
  box-shadow: 0 0 0 4px rgba(24, 184, 255, .14);
}
.id-dash-verify-step.is-current .id-dash-verify-label { color: var(--id-text, #f0f4ff); }

/* ---------- Landing page polish (works with existing .id-hero etc.) ---------- */
.id-card-demo-rotate { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.id-hero-card-area .id-card-wrapper { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .id-bottom-nav-selection,
  body.id-page,
  .id-theme-toggle { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   LANDING PAGE SECTIONS
   ══════════════════════════════════════════════════════════════════ */

/* Hero */
.id-lp-hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(88px,12vw,140px) clamp(16px,4vw,32px) clamp(100px,14vw,160px);
}
.id-lp-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 800px) {
  .id-lp-hero-inner { grid-template-columns: 1fr; gap: 48px; }
}
.id-lp-hero h1 {
  font-size: clamp(38px,5.5vw,68px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  color: var(--chrome-text-strong, #f0f4ff);
  margin: 12px 0 20px;
}
.id-lp-hero p {
  font-size: clamp(16px,1.5vw,18px);
  line-height: 1.7;
  color: var(--chrome-text, rgba(226,244,255,.68));
  max-width: 480px;
  margin-bottom: 36px;
}
.id-lp-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Section wrapper */
.id-lp-section {
  padding: clamp(72px,10vw,120px) clamp(16px,4vw,32px);
}
.id-lp-inner { max-width: 980px; margin: 0 auto; }
.id-lp-head { margin-bottom: clamp(36px,5vw,60px); }
.id-lp-head h2 {
  font-size: clamp(28px,4vw,52px);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--chrome-text-strong, #f0f4ff);
  margin: 8px 0 14px;
}
.id-lp-head p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--chrome-text, rgba(226,244,255,.68));
  max-width: 560px;
}

/* Feature grid */
.id-lp-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 14px;
}
.id-lp-feature {
  padding: 26px;
  border-radius: 18px;
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06);
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06);
  box-shadow: var(--glass-shadow);
  transition: border-color .18s;
}
.id-lp-feature:hover { border-color: color-mix(in srgb, var(--vice-cyan,#18b8ff) 28%, transparent); }
.id-lp-feature-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--vice-cyan,#18b8ff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--vice-cyan,#18b8ff) 20%, transparent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; font-size: 20px;
}
.id-lp-feature h3 {
  font-size: 16px; font-weight: 700;
  color: var(--chrome-text-strong, #f0f4ff);
  margin: 0 0 8px;
}
.id-lp-feature p {
  font-size: 14px; line-height: 1.6;
  color: var(--chrome-text, rgba(226,244,255,.62));
  margin: 0;
}

/* Verification levels */
.id-lp-levels {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 10px;
}
@media (max-width: 680px) { .id-lp-levels { grid-template-columns: repeat(3,1fr); gap: 8px; } }
@media (max-width: 400px) { .id-lp-levels { grid-template-columns: repeat(2,1fr); } }
.id-lp-level {
  padding: 18px 12px;
  border-radius: 14px;
  text-align: center;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--glass-shadow);
}
.id-lp-level-name {
  font-size: 20px; font-weight: 800; letter-spacing: -.015em;
  margin-bottom: 4px;
}
.id-lp-level-label { font-size: 11px; color: rgba(255,255,255,.38); }
.id-lp-level[data-level="0"] .id-lp-level-name { color: rgba(255,255,255,.28); }
.id-lp-level[data-level="1"] .id-lp-level-name { color: #3b82f6; }
.id-lp-level[data-level="2"] .id-lp-level-name { color: var(--vice-cyan,#18b8ff); }
.id-lp-level[data-level="3"] .id-lp-level-name { color: #22c55e; }
.id-lp-level[data-level="4"] .id-lp-level-name { color: #9333ea; }
.id-lp-level[data-level="5"] .id-lp-level-name { color: #f59e0b; }

/* API demo / split sections */
.id-lp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 768px) { .id-lp-split { grid-template-columns: 1fr; gap: 36px; } }

/* Code block */
.id-lp-code {
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 22px 24px;
  font-family: 'SF Mono','Fira Code','Courier New',monospace;
  font-size: 13px;
  line-height: 1.75;
  overflow-x: auto;
  color: rgba(226,244,255,.78);
}
.id-lp-code .k { color: var(--vice-cyan,#18b8ff); }
.id-lp-code .s { color: #a5d6a7; }
.id-lp-code .n { color: #ffcc80; }
.id-lp-code .b { color: #ce93d8; }

/* Flow steps (how it works) */
.id-lp-flow {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  position: relative;
}
@media (max-width: 680px) { .id-lp-flow { grid-template-columns: 1fr 1fr; } }
.id-lp-flow-step {
  padding: 24px 20px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--glass-shadow);
}
.id-lp-flow-num {
  font-size: 28px; font-weight: 800;
  color: color-mix(in srgb, var(--vice-cyan,#18b8ff) 45%, transparent);
  line-height: 1; margin-bottom: 10px;
}
.id-lp-flow-title { font-size: 15px; font-weight: 700; color: var(--chrome-text-strong,#f0f4ff); margin-bottom: 6px; }
.id-lp-flow-desc { font-size: 13px; line-height: 1.55; color: var(--chrome-text,rgba(226,244,255,.58)); }

/* CTA section */
.id-lp-cta-section {
  padding: clamp(72px,10vw,120px) clamp(16px,4vw,32px);
  text-align: center;
}
.id-lp-cta-box {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(40px,6vw,64px) clamp(24px,5vw,56px);
  border-radius: 24px;
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06);
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06);
  box-shadow: var(--glass-shadow);
}
.id-lp-cta-box h2 {
  font-size: clamp(24px,3.5vw,40px);
  font-weight: 800; letter-spacing: -.025em;
  color: var(--chrome-text-strong,#f0f4ff);
  margin: 0 0 14px;
}
.id-lp-cta-box p {
  font-size: 16px; line-height: 1.6;
  color: var(--chrome-text,rgba(226,244,255,.65));
  margin: 0 0 28px;
}
.id-lp-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Light mode adjustments for landing */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-lp-code {
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.1);
    color: rgba(8,14,30,.75);
  }
}

/* Divider between sections */
.id-lp-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 20%, rgba(255,255,255,.07) 80%, transparent);
  margin: 0 clamp(16px,4vw,48px);
}

/* ── FAQ accordion ───────────────────────────────────────────────── */
.id-lp-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.id-lp-faq-item {
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06);
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(1.06);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: border-color .18s;
}
.id-lp-faq-item[open] {
  border-color: color-mix(in srgb, var(--vice-cyan, #18b8ff) 28%, transparent);
}
.id-lp-faq-q {
  list-style: none;
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--chrome-text-strong, #f0f4ff);
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.id-lp-faq-q::-webkit-details-marker { display: none; }
.id-lp-faq-q::after {
  content: '+';
  font-size: 18px;
  font-weight: 400;
  opacity: .45;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.id-lp-faq-item[open] .id-lp-faq-q::after {
  transform: rotate(45deg);
}
.id-lp-faq-a {
  padding: 0 22px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--chrome-text, rgba(226,244,255,.68));
  margin: 0;
}
.id-lp-faq-a code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  background: rgba(0,0,0,.25);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--vice-cyan, #18b8ff);
}
/* Light mode FAQ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-lp-faq-q { color: #08101e !important; }
  :root:not([data-theme="dark"]) .id-lp-faq-a { color: rgba(8,14,30,.68) !important; }
  :root:not([data-theme="dark"]) .id-lp-faq-a code { background: rgba(0,0,0,.07); color: #0060cc; }
}
[data-theme="light"] .id-lp-faq-q { color: #08101e !important; }
[data-theme="light"] .id-lp-faq-a { color: rgba(8,14,30,.68) !important; }
[data-theme="light"] .id-lp-faq-a code { background: rgba(0,0,0,.07); color: #0060cc; }

/* ══════════════════════════════════════════════════════════════════
   ID PLATFORM REDESIGN — utilities, scroll snap, storytelling sections
   ══════════════════════════════════════════════════════════════════ */

/* Logo filter utilities */
.id-logo-white-filter { filter: brightness(0) invert(1); }
.id-logo-tint-white { filter: brightness(0) invert(1); opacity: 0.92; }

/* "Continue with ID" / "Sign in with ID" button */
.id-btn-cta-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  min-height: 52px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, #1A7EFF 85%, white),
    color-mix(in srgb, #1A7EFF 55%, transparent) 55%,
    color-mix(in srgb, #00BFFF 25%, transparent));
  border: 1px solid color-mix(in srgb, #1A7EFF 70%, white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 4px 18px rgba(26,126,255,.32);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.id-btn-cta-brand:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 28px rgba(26,126,255,.44);
}
.id-btn-cta-brand img,
.id-btn-cta-brand svg {
  width: 22px; height: 22px;
  filter: brightness(0) invert(1);
}

/* ── ID platform scroll snap ────────────────────────────────────── */
html.id-scroll-snap {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 68px;
}

.id-snap-section {
  scroll-snap-align: start;
  scroll-margin-top: 68px;
}

/* ── Docs: single column + hidden sidebar (replaced by bottom nav) ── */
.id-docs-layout { grid-template-columns: 1fr; } /* override the 2-col layout */
.id-docs-nav { display: none; } /* hide sidebar — replaced by bottom nav */

/* ── Verification journey timeline ──────────────────────────────── */
.id-journey {
  display: grid;
  gap: 12px;
}
.id-journey-step {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--glass-shadow);
  border-left: 3px solid var(--id-jcolor, rgba(255,255,255,.2));
  transition: border-color .18s, transform .18s;
}
.id-journey-step:hover { transform: translateX(4px); }
.id-journey-step[data-level="0"] { --id-jcolor: rgba(255,255,255,.28); }
.id-journey-step[data-level="1"] { --id-jcolor: #3b82f6; }
.id-journey-step[data-level="2"] { --id-jcolor: var(--vice-cyan,#18b8ff); }
.id-journey-step[data-level="3"] { --id-jcolor: #22c55e; }
.id-journey-step[data-level="4"] { --id-jcolor: #9333ea; }
.id-journey-step[data-level="5"] { --id-jcolor: #f59e0b; }
.id-journey-badge {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--id-jcolor);
  text-align: center;
}
.id-journey-title {
  font-size: 15px; font-weight: 700;
  color: var(--chrome-text-strong, #f0f4ff);
  margin: 0 0 4px;
}
.id-journey-desc {
  font-size: 13px; line-height: 1.55;
  color: var(--chrome-text, rgba(226,244,255,.6));
  margin: 0;
}
.id-journey-photo-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--id-jcolor);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--id-jcolor);
  opacity: .85;
}

/* ── Static dashboard / consent mockups ─────────────────────────── */
.id-mock {
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--glass-shadow);
  padding: 20px;
}
.id-mock + .id-mock { margin-top: 14px; }
.id-mock-title {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin: 0 0 14px;
}
.id-mock-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
  color: var(--chrome-text, rgba(226,244,255,.7));
}
.id-mock-row:first-of-type { border-top: none; }
.id-mock-row .id-mock-k { color: rgba(255,255,255,.5); }
.id-mock-row .id-mock-v { color: var(--chrome-text-strong,#f0f4ff); font-weight: 600; }
.id-mock-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--id-green,#22c55e);
  box-shadow: 0 0 0 4px rgba(34,197,94,.16);
  display: inline-block; margin-right: 8px; vertical-align: middle;
}

/* ── Consent steps (3-step privacy visual) ──────────────────────── */
.id-consent-steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
@media (max-width: 680px) { .id-consent-steps { grid-template-columns: 1fr; } }
.id-consent-step {
  padding: 24px 22px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--glass-shadow);
}
.id-consent-step-num {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
  color: var(--vice-cyan,#18b8ff);
  background: color-mix(in srgb, var(--vice-cyan,#18b8ff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--vice-cyan,#18b8ff) 24%, transparent);
  margin-bottom: 14px;
}
.id-consent-step h3 { font-size: 15px; font-weight: 700; color: var(--chrome-text-strong,#f0f4ff); margin: 0 0 8px; }
.id-consent-step p { font-size: 13px; line-height: 1.6; color: var(--chrome-text,rgba(226,244,255,.62)); margin: 0; }

/* Mock consent scope chips */
.id-mock-scope {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.id-mock-scope:first-of-type { border-top: none; }
.id-mock-scope svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--id-green,#22c55e); margin-top: 1px; }
.id-mock-scope-name { font-size: 13px; font-weight: 600; color: var(--chrome-text-strong,#f0f4ff); }
.id-mock-scope-desc { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.45; }

/* ── Connected services grid ────────────────────────────────────── */
.id-services-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 680px) { .id-services-grid { grid-template-columns: 1fr; } }
.id-service-card {
  padding: 24px 22px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: url(#lg-disp) blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--glass-shadow);
  text-align: center;
}
.id-service-icon {
  width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: color-mix(in srgb, var(--vice-cyan,#18b8ff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--vice-cyan,#18b8ff) 20%, transparent);
}
.id-service-card h3 { font-size: 15px; font-weight: 700; color: var(--chrome-text-strong,#f0f4ff); margin: 0 0 6px; }
.id-service-card p { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.5); margin: 0 0 10px; }
.id-service-scope {
  display: inline-block;
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: 11px;
  color: var(--vice-cyan,#18b8ff);
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Hero overlay heading (used in redesigned hero) */
.id-lp-hero-card { display: flex; justify-content: center; }
.id-lp-hero-card .id-card-wrapper { width: 100%; max-width: 420px; }

/* ══════════════════════════════════════════════════════════════════
   EQUAL HEIGHTS · SCROLL SNAP · ENTRANCE ANIMATIONS · UPLOAD ZONES
   ══════════════════════════════════════════════════════════════════ */

/* Sibling dashboard cards stretch to same height */
.id-dash-grid {
  align-items: stretch;
}
.id-dash-grid .id-dash-section {
  display: flex;
  flex-direction: column;
}
.id-dash-grid .id-dashboard-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.id-dash-grid .id-dashboard-card .id-dash-card-body {
  flex: 1;
}

/* Dashboard sections: scroll-snap anchor when id-scroll-snap is active */
.id-dash-section {
  scroll-margin-top: 68px; /* topbar height */
}
/* Landing-page sections snap; dashboard sections do NOT (free scroll) */
html.id-scroll-snap .id-snap-section {
  scroll-snap-align: start;
}

/* ── Upload zones ─────────────────────────────────────────────── */
.id-upload-zone {
  border: 1.5px dashed var(--glass-border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.id-upload-zone:hover,
.id-upload-zone.has-file,
.id-upload-zone.is-dragover {
  border-color: color-mix(in srgb, var(--vice-cyan, #18b8ff) 45%, transparent);
  background: color-mix(in srgb, var(--vice-cyan, #18b8ff) 5%, transparent);
}
.id-upload-label { font-size: 14px; font-weight: 600; color: var(--chrome-text-strong, #f0f4ff); }
.id-upload-hint { font-size: 11px; opacity: 0.45; }
.id-form-compact { gap: 12px; }

/* ── Edit-profile collapsible ─────────────────────────────────── */
.id-profile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--chrome-text-strong, #f0f4ff);
  padding: 0;
}
.id-profile-toggle-chevron {
  transition: transform 0.18s ease;
  opacity: 0.5;
}
.id-profile-toggle.is-open .id-profile-toggle-chevron {
  transform: rotate(180deg);
}
.id-profile-ro-heading {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin: 0 0 12px;
}
.id-profile-ro-field {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 12px;
}
.id-profile-ro-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--chrome-text, rgba(226,244,255,.6)); opacity: 0.7;
}
.id-profile-ro-value {
  font-size: 14px; color: var(--chrome-text-strong, #f0f4ff);
}
.id-profile-ro-note {
  font-size: 12px; opacity: 0.45; line-height: 1.5; margin: 6px 0 0;
}

/* ── Entrance animations (IntersectionObserver-driven) ────────── */
@media (prefers-reduced-motion: no-preference) {
  .id-panel,
  .id-dashboard-card,
  .id-dash-verify-card,
  .id-lp-feature,
  .id-lp-flow-step,
  .id-lp-level {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .id-panel.is-visible,
  .id-dashboard-card.is-visible,
  .id-dash-verify-card.is-visible,
  .id-lp-feature.is-visible,
  .id-lp-flow-step.is-visible,
  .id-lp-level.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger siblings */
  .id-dash-grid > *:nth-child(2) .id-dashboard-card { transition-delay: 0.08s; }
  .id-lp-features > *:nth-child(2) { transition-delay: 0.06s; }
  .id-lp-features > *:nth-child(3) { transition-delay: 0.12s; }
  .id-lp-features > *:nth-child(4) { transition-delay: 0.18s; }
  .id-lp-features > *:nth-child(5) { transition-delay: 0.24s; }
  .id-lp-features > *:nth-child(6) { transition-delay: 0.30s; }
  .id-lp-levels > * { transition-delay: calc(var(--i, 0) * 0.06s); }
  /* Card hover depth */
  .id-dashboard-card:hover {
    transform: translateY(-2px);
    transition: transform 0.22s ease, border-color 0.18s ease;
  }
  .id-dashboard-card.is-visible:hover {
    transform: translateY(-2px);
  }
}

/* ── ID topbar navigation — match main site .site-link style ─────── */
.id-topbar-nav a.id-nav-link {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  color: var(--chrome-text, rgba(226,244,255,.68));
  font-size: 13px;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color .18s ease;
  padding: 0 8px;
}
.id-topbar-nav a.id-nav-link:hover { color: var(--chrome-text-strong, #f0f4ff); }
.id-topbar-nav a.id-nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 10%;
  width: 80%;
  height: 2px;
  border-radius: 999px;
  background: var(--vice-cyan, #18b8ff);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.id-topbar-nav a.id-nav-link:hover::after { transform: scaleX(1); }

/* ══════════════════════════════════════════════════════════════════
   "Sign in with ID" embed buttons — three variants for third parties.
   Self-contained: only depends on the ID logo SVG at id.pajic.it.
   Usage: add class id-signin-btn plus one variant class.
   ══════════════════════════════════════════════════════════════════ */
.id-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  height: 48px;
  border-radius: 999px;
  font-family: -apple-system, 'Inter', ui-sans-serif, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
  position: relative;
}
.id-signin-btn:hover { transform: translateY(-2px) scale(1.01); }
.id-signin-btn img,
.id-signin-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Blue — brand default */
.id-signin-btn--blue {
  background: linear-gradient(135deg, #2090ff 0%, #1a7eff 55%, #0060e0 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(26,126,255,.38), inset 0 1px 0 rgba(255,255,255,.22);
}
.id-signin-btn--blue img { filter: brightness(0) invert(1); }
.id-signin-btn--blue:hover { box-shadow: 0 8px 28px rgba(26,126,255,.52), inset 0 1px 0 rgba(255,255,255,.22); }

/* Vice pink */
.id-signin-btn--pink {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--vice-pink,#ff0a8a) 88%, white) 0%,
    var(--vice-pink,#ff0a8a) 55%,
    color-mix(in srgb, var(--vice-pink,#ff0a8a) 65%, var(--vice-cyan,#18b8ff)) 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255,10,138,.32), inset 0 1px 0 rgba(255,255,255,.22);
}
.id-signin-btn--pink img { filter: brightness(0) invert(1); }
.id-signin-btn--pink:hover { box-shadow: 0 8px 28px rgba(255,10,138,.46), inset 0 1px 0 rgba(255,255,255,.22); }

/* Neutral dark */
.id-signin-btn--dark {
  background: linear-gradient(135deg, #1a1f35 0%, #0d1120 100%);
  color: #f0f4ff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 16px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
}
.id-signin-btn--dark img { filter: brightness(0) invert(1); opacity: .9; }
.id-signin-btn--dark:hover { box-shadow: 0 8px 24px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.12); }

/* ── Landing page light mode text fixes ──────────────────────────── */
/* Hardcoded rgba(226,244,255,…) colours are invisible on a light bg */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-lp-hero p,
  :root:not([data-theme="dark"]) .id-lp-head p,
  :root:not([data-theme="dark"]) .id-lp-feature p,
  :root:not([data-theme="dark"]) .id-lp-flow-desc,
  :root:not([data-theme="dark"]) .id-lp-cta-box p,
  :root:not([data-theme="dark"]) .id-lp-level-label,
  :root:not([data-theme="dark"]) .id-p {
    color: rgba(8, 14, 30, 0.68) !important;
  }
  :root:not([data-theme="dark"]) .id-lp-hero h1,
  :root:not([data-theme="dark"]) .id-lp-head h2,
  :root:not([data-theme="dark"]) .id-lp-feature h3,
  :root:not([data-theme="dark"]) .id-lp-flow-title,
  :root:not([data-theme="dark"]) .id-lp-cta-box h2,
  :root:not([data-theme="dark"]) .id-h1,
  :root:not([data-theme="dark"]) .id-h2 {
    color: #08101e !important;
  }
  :root:not([data-theme="dark"]) .id-eyebrow { color: #0060cc !important; }
  :root:not([data-theme="dark"]) .id-lp-code { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.1) !important; color: rgba(8,14,30,0.78) !important; }
  :root:not([data-theme="dark"]) .id-lp-code .k { color: #0060cc !important; }
}
[data-theme="light"] .id-lp-hero p,
[data-theme="light"] .id-lp-head p,
[data-theme="light"] .id-lp-feature p,
[data-theme="light"] .id-lp-flow-desc,
[data-theme="light"] .id-lp-cta-box p,
[data-theme="light"] .id-lp-level-label,
[data-theme="light"] .id-p { color: rgba(8,14,30,0.68) !important; }
[data-theme="light"] .id-lp-hero h1,
[data-theme="light"] .id-lp-head h2,
[data-theme="light"] .id-lp-feature h3,
[data-theme="light"] .id-lp-flow-title,
[data-theme="light"] .id-lp-cta-box h2,
[data-theme="light"] .id-h1,
[data-theme="light"] .id-h2 { color: #08101e !important; }
[data-theme="light"] .id-eyebrow { color: #0060cc !important; }

/* ── Light mode: mock/service/journey elements with hardcoded rgba(255,…) ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-mock-title          { color: rgba(8,14,30,0.42) !important; }
  :root:not([data-theme="dark"]) .id-mock-k              { color: rgba(8,14,30,0.52) !important; }
  :root:not([data-theme="dark"]) .id-mock-scope-desc     { color: rgba(8,14,30,0.52) !important; }
  :root:not([data-theme="dark"]) .id-service-card p      { color: rgba(8,14,30,0.52) !important; }
  :root:not([data-theme="dark"]) .id-journey-desc        { color: rgba(8,14,30,0.58) !important; }
  :root:not([data-theme="dark"]) .id-journey-title       { color: #08101e !important; }
  :root:not([data-theme="dark"]) .id-service-scope       { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.1) !important; }
  :root:not([data-theme="dark"]) .id-lp-divider          { background: linear-gradient(90deg,transparent,rgba(0,0,0,.08) 20%,rgba(0,0,0,.08) 80%,transparent) !important; }
}
[data-theme="light"] .id-mock-title          { color: rgba(8,14,30,0.42) !important; }
[data-theme="light"] .id-mock-k              { color: rgba(8,14,30,0.52) !important; }
[data-theme="light"] .id-mock-scope-desc     { color: rgba(8,14,30,0.52) !important; }
[data-theme="light"] .id-service-card p      { color: rgba(8,14,30,0.52) !important; }
[data-theme="light"] .id-journey-desc        { color: rgba(8,14,30,0.58) !important; }
[data-theme="light"] .id-journey-title       { color: #08101e !important; }
[data-theme="light"] .id-service-scope       { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .id-lp-divider          { background: linear-gradient(90deg,transparent,rgba(0,0,0,.08) 20%,rgba(0,0,0,.08) 80%,transparent) !important; }

/* ══════════════════════════════════════════════════════════════════
   Auth-flow motion system — login/register/setup/verify
   Reuses existing tokens only (--vice-cyan/pink/purple, --glass-*,
   --ease-spring/--ease-glass from site.css, already loaded on every ID
   page — see this file's header comment). No new colors, no new deps.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Ambient backdrop — slow-drifting aurora + faint scan texture ──
   NOTE: the scan-texture layer (::after) uses mix-blend-mode:screen,
   which lightens whatever is behind it. That reads as a subtle sparkle
   against the dark theme's near-black background, but against the light
   theme's near-white background it pushes contrast further toward white
   and washes everything out — so it's dark-theme only below. */
.id-page {
  position: relative;
  overflow-x: hidden;
}
.id-page::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 30% at var(--id-bg-x1, 18%) var(--id-bg-y1, 12%), color-mix(in srgb, var(--vice-cyan, #18b8ff) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 38% 26% at var(--id-bg-x2, 82%) var(--id-bg-y2, 88%), color-mix(in srgb, var(--vice-pink, #ff0a8a) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 22% at var(--id-bg-x3, 60%) var(--id-bg-y3, 30%), color-mix(in srgb, var(--vice-purple, #7428ff) 8%, transparent), transparent 70%);
  opacity: .8;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-page::before { opacity: .3; }
}
[data-theme="light"] .id-page::before { opacity: .3; }
.id-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px);
  mix-blend-mode: screen;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-page::after { content: none; }
}
[data-theme="light"] .id-page::after { content: none; }
.id-page > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .id-page::before {
    animation: id-bg-drift 26s ease-in-out infinite alternate;
  }
}
@keyframes id-bg-drift {
  0%   { --id-bg-x1: 14%; --id-bg-y1: 8%;  --id-bg-x2: 86%; --id-bg-y2: 92%; --id-bg-x3: 55%; --id-bg-y3: 24%; }
  50%  { --id-bg-x1: 24%; --id-bg-y1: 18%; --id-bg-x2: 76%; --id-bg-y2: 80%; --id-bg-x3: 66%; --id-bg-y3: 38%; }
  100% { --id-bg-x1: 10%; --id-bg-y1: 14%; --id-bg-x2: 90%; --id-bg-y2: 86%; --id-bg-x3: 48%; --id-bg-y3: 30%; }
}

/* ── 2. Panel materialize-in — replaces the flat fade/translateY ─────
   Same selectors + .is-visible toggle already driven by
   initIDEntranceAnimations() in id.js — only the animated properties
   change here. */
@media (prefers-reduced-motion: no-preference) {
  .id-panel,
  .id-dashboard-card,
  .id-dash-verify-card,
  .id-lp-feature,
  .id-lp-flow-step,
  .id-lp-level {
    opacity: 0;
    transform: translateY(20px) scale(.97);
    filter: blur(6px);
    transition: opacity .6s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
                transform .6s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
                filter .5s var(--ease-glass, cubic-bezier(.22,1,.36,1));
  }
  .id-panel.is-visible,
  .id-dashboard-card.is-visible,
  .id-dash-verify-card.is-visible,
  .id-lp-feature.is-visible,
  .id-lp-flow-step.is-visible,
  .id-lp-level.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ── 3. View Transitions — named regions for smooth step morphs ──── */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(id-step),
  ::view-transition-new(id-step) {
    animation-duration: .42s;
    animation-timing-function: var(--ease-glass, cubic-bezier(.22,1,.36,1));
  }
}
.id-vt-step { view-transition-name: id-step; }

/* ── 4. OTP digit boxes ────────────────────────────────────────────── */
.id-otp-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 4px 0 6px;
}
.id-otp-digit {
  width: 46px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.03);
  color: var(--chrome-text-strong, #f0f4ff);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.id-otp-digit:focus {
  outline: none;
  border-color: var(--vice-cyan, #18b8ff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vice-cyan, #18b8ff) 26%, transparent);
  transform: translateY(-2px);
}
.id-otp-digit.is-filled { border-color: color-mix(in srgb, var(--vice-cyan, #18b8ff) 55%, var(--glass-border)); }

/* ── 5. Biometric pulse — passkey/WebAuthn prompt active state ──────── */
.id-btn-biometric {
  position: relative;
}
.id-btn-biometric.is-waiting {
  pointer-events: none;
}
.id-btn-biometric.is-waiting::before,
.id-btn-biometric.is-waiting::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1.5px solid color-mix(in srgb, var(--vice-cyan, #18b8ff) 60%, transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .id-btn-biometric.is-waiting::before { animation: id-bio-pulse 1.6s ease-out infinite; }
  .id-btn-biometric.is-waiting::after  { animation: id-bio-pulse 1.6s ease-out .8s infinite; }
}
@keyframes id-bio-pulse {
  0%   { transform: scale(1);    opacity: .9; }
  100% { transform: scale(1.18); opacity: 0;  }
}

/* ── 6. Scan-line loading motif (verify.html) ─────────────────────── */
.id-scan-box {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  overflow: hidden;
  background: rgba(255,255,255,.02);
}
.id-scan-box::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vice-cyan, #18b8ff), transparent);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--vice-cyan, #18b8ff) 70%, transparent);
  top: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .id-scan-box::before { animation: id-scan-sweep 1.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .id-scan-box::before { top: 50%; }
}
@keyframes id-scan-sweep {
  0%, 100% { top: 4px; }
  50%      { top: calc(100% - 6px); }
}

/* ── 7. Result states — checkmark draw-in / error shake ─────────────── */
.id-check-draw {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: block;
}
.id-check-draw circle {
  fill: none;
  stroke: var(--id-level-3, #22c55e);
  stroke-width: 2;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
}
.id-check-draw path {
  fill: none;
  stroke: var(--id-level-3, #22c55e);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
}
@media (prefers-reduced-motion: no-preference) {
  .id-check-draw circle { animation: id-draw .5s var(--ease-glass, cubic-bezier(.22,1,.36,1)) forwards; }
  .id-check-draw path   { animation: id-draw .35s var(--ease-glass, cubic-bezier(.22,1,.36,1)) .45s forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .id-check-draw circle, .id-check-draw path { stroke-dashoffset: 0; }
}
@keyframes id-draw { to { stroke-dashoffset: 0; } }

.id-shake {
  animation: none;
}
@media (prefers-reduced-motion: no-preference) {
  .id-shake { animation: id-shake .42s ease; }
}
@keyframes id-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(3px); }
}

/* ── Verify page result states (previously entirely unstyled) ──────── */
.id-verify-card {
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 32px;
}
.id-verify-bad {
  font-size: 40px;
  line-height: 1;
  margin: 0 auto 16px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--chrome-text-strong, #f0f4ff);
}
.id-verify-ok {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--id-level-3, #22c55e);
}

/* ── Auth layout — login/register/setup ──────────────────────────────
   A single narrow, centered card floating on a dramatic spotlight
   backdrop — not a form stretched to fill the viewport. Width comes
   from the atmosphere around the card, not the card itself. */
.id-auth-layout {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 56px) 20px;
  position: relative;
  z-index: 1;
}
.id-auth-form-col { width: 100%; }
.id-auth-visual { display: none; }

/* Spotlight beam — a focused cone of light falling on the card, instead
   of the diffuse aurora blobs used elsewhere on the platform. Dark-theme
   only (see the ::after wash-out fix above); light theme keeps the soft
   aurora treatment since a hard beam reads harsh on a white surface. */
.id-page:has(.id-auth-layout)::before {
  background:
    radial-gradient(ellipse 60% 46% at 50% 0%, color-mix(in srgb, var(--vice-cyan, #18b8ff) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 38% 26% at 82% 88%, color-mix(in srgb, var(--vice-pink, #ff0a8a) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 22% at 12% 22%, color-mix(in srgb, var(--vice-purple, #7428ff) 10%, transparent), transparent 70%);
  opacity: .9;
}
.id-auth-beam {
  position: fixed;
  top: -8%;
  left: 50%;
  width: 640px;
  height: 900px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%,
    transparent 0deg,
    color-mix(in srgb, var(--vice-cyan, #18b8ff) 16%, transparent) 8deg,
    transparent 20deg,
    transparent 340deg,
    color-mix(in srgb, var(--vice-cyan, #18b8ff) 16%, transparent) 352deg,
    transparent 360deg);
  mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .id-auth-beam { display: none; }
}
[data-theme="light"] .id-auth-beam { display: none; }

/* Card itself — elevated, self-contained, with a gradient top accent */
.id-auth-layout .id-panel,
.id-auth-layout .id-form {
  max-width: 420px;
  margin: 0 auto;
  border-radius: 24px;
  box-shadow:
    var(--glass-shadow),
    0 40px 80px -28px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.03) inset;
}
.id-auth-layout .id-form { padding: 36px 32px 32px; }
.id-auth-layout .id-panel::before,
.id-auth-layout .id-form::before {
  background:
    linear-gradient(90deg, transparent, var(--vice-cyan, #18b8ff), var(--vice-pink, #ff0a8a), var(--vice-purple, #7428ff), transparent);
  height: 2px;
  inset: 0 0 auto 0;
}

/* Step-progress dots — register.html's 3-step flow */
.id-step-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 0 0 22px;
}
.id-step-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glass-border);
  transition: all .3s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.id-step-dots span.is-active {
  width: 22px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--vice-cyan, #18b8ff), var(--vice-pink, #ff0a8a));
}
.id-step-dots span.is-done {
  background: color-mix(in srgb, var(--vice-cyan, #18b8ff) 55%, transparent);
}

/* Icon-accented fields — small glyph inside the pill, like a
   password-manager-grade form rather than a bare rectangle */
.id-field-icon { position: relative; }
.id-field-icon .id-input { padding-left: 44px; }
.id-field-icon svg {
  position: absolute;
  left: 17px;
  top: 38px;
  width: 16px;
  height: 16px;
  opacity: .4;
  pointer-events: none;
  stroke: var(--chrome-text-strong, #f0f4ff);
}
.id-field-icon:focus-within svg { opacity: .8; stroke: var(--vice-cyan, #18b8ff); }