/* Mentra Identity (identity.js). Same tokens as style.css; the only light on the stage is the scan's own rim + disc. */
#v-identity .id-lead { margin: 0; color: var(--silver); font-size: 17px; max-width: 34em; }
.id-tips { margin: 0; padding: 0; list-style: none; counter-reset: idt; display: flex; flex-direction: column; gap: 14px; }
.id-tips li { counter-increment: idt; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; }
.id-tips li::before { content: counter(idt); grid-row: span 2; font: 800 22px/1 var(--num); color: var(--accent); font-variant-numeric: tabular-nums; }
.id-tips b { font-weight: 600; }
.id-tips span { color: var(--silver); font-size: 15px; }
.id-ext { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; font-weight: 600; }
.id-ext:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
#v-identity label.check.id-consent { align-items: flex-start; font-size: 15px; line-height: 1.45; }
#v-identity label.check.id-consent input { margin-top: 3px; }
#v-identity button:disabled { opacity: .45; cursor: not-allowed; }
.id-progress { display: flex; flex-direction: column; gap: 8px; }
.id-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.id-bar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform .2s var(--ease); }
.id-err { margin: 0; color: var(--red); font-size: 15px; }
.id-stage { position: relative; height: min(68vh, 560px); min-height: 360px; margin: 0 -20px; border-radius: 0;
  background: radial-gradient(60% 55% at 50% 62%, rgba(120, 200, 255, .07), transparent 70%); overflow: hidden; }
.id-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; opacity: 0; transition: opacity .6s var(--ease); }
.id-stage.ready canvas { opacity: 1; }
.id-stage canvas:active { cursor: grabbing; }
.id-stage-msg { position: absolute; inset: auto 20px 45%; margin: 0; text-align: center; color: var(--silver); font-size: 15px; }
.id-modes { display: inline-flex; align-self: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); margin: -8px auto 0; }
.id-modes button { min-height: 40px; padding: 0 16px; border-radius: 999px; background: none; font-size: 15px; color: var(--silver); box-shadow: none; }
.id-modes button.on { background: rgba(var(--accent-rgb), .16); color: var(--text); }
.id-note { text-align: center; max-width: 30em; align-self: center; }
.id-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.id-facts div { display: flex; flex-direction: column-reverse; gap: 2px; }
.id-facts dt { color: var(--silver); font-size: 13px; }
.id-facts dd { margin: 0; font: 800 22px/1.1 var(--num); font-variant-numeric: tabular-nums; }
.id-danger { color: var(--red) !important; align-self: flex-start; }
#id-content { gap: var(--gap, 22px); }
@media (min-width: 900px) { .id-stage { margin: 0; border-radius: 16px; } }
@media (prefers-reduced-motion: reduce) { .id-stage canvas, .id-bar i { transition: none; } }