:root {
  color-scheme: light;
  --bg-canvas: #f4f6f8;
  --bg-layer-1: #ffffff;
  --bg-layer-2: #f7f9fb;
  --bg-layer-3: #e9eef2;
  --border-subtle: #d7dfe7;
  --border-strong: #adbbc7;
  --txt-primary: #17212b;
  --txt-secondary: #3e4d5b;
  --txt-tertiary: #657687;
  --txt-placeholder: #7c8b99;
  --brand-100: #edf4f6;
  --brand-300: #c4d8df;
  --brand-700: #547c8b;
  --brand-default: #406c7b;
  --brand-ink: #ffffff;
  --danger-bg: #fbeeed;
  --danger-fg: #9a2f28;
  --danger-line: #d9605a;
  --warn-bg: #fbf1e3;
  --warn-fg: #7a4d10;
  --ok-fg: #24704a;
  --ok-bg: #e9f5ee;
  --shadow: 0 3px 12px rgba(23, 29, 45, .04);
  --logo-flip: 0;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: #0b0c0e;
  --bg-layer-1: #1f2125;
  --bg-layer-2: #2a2c30;
  --bg-layer-3: #373a3f;
  --border-subtle: #44474d;
  --border-strong: #71757c;
  --txt-primary: #f2f3f6;
  --txt-secondary: #b5b8bd;
  --txt-tertiary: #95989e;
  --txt-placeholder: #868990;
  --brand-100: #132a37;
  --brand-300: #18506a;
  --brand-700: #70c2e6;
  --brand-default: #42a5d8;
  --brand-ink: #0b0c0e;
  --danger-bg: #4a2625;
  --danger-fg: #ffadaa;
  --danger-line: #c9524b;
  --warn-bg: #422d13;
  --warn-fg: #f1bc7e;
  --ok-fg: #91dbab;
  --ok-bg: #1b3926;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --logo-flip: 1;
}
html[data-logo-ink="light"] { --logo-flip: 1; }
html[data-logo-ink="light"][data-theme="dark"] { --logo-flip: 0; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100%; display: grid; place-items: center; padding: 1.25rem;
  background: var(--bg-canvas); color: var(--txt-primary);
  font-family: Vazirmatn, "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html[dir="ltr"] body { font-family: Inter, Vazirmatn, ui-sans-serif, system-ui, sans-serif; }

.gate {
  width: min(100%, 58rem); display: grid; grid-template-columns: 19rem minmax(0, 1fr);
  border: 1px solid var(--border-subtle); border-radius: 1rem; overflow: hidden;
  background: var(--bg-layer-1); box-shadow: var(--shadow); position: relative;
}
.gate.is-single { width: min(100%, 27rem); grid-template-columns: minmax(0, 1fr); }

.brand {
  padding: 1.5rem 1.4rem 1.25rem; display: flex; flex-direction: column; gap: 1.25rem;
  background: var(--bg-layer-2); border-inline-end: 1px solid var(--border-subtle);
}
.brand-mark { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.brand-mark img {
  height: 4.5rem; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block;
  filter: invert(var(--logo-flip));
}
.brand-mark span { display: block; font-size: 11px; color: var(--txt-tertiary); }

.ledger { margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.ledger > div {
  min-height: 2.6rem; padding: .5rem 0; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; border-bottom: 1px solid var(--border-subtle);
}
.ledger dt { font-size: 11px; color: var(--txt-tertiary); white-space: nowrap; }
.ledger dd { margin: 0; font-size: 12px; color: var(--txt-secondary); text-align: end; font-variant-numeric: tabular-nums; }
.ledger dd b { font-weight: 600; color: var(--txt-primary); }
.brand-foot { margin-top: auto; font-size: 11px; color: var(--txt-tertiary); }

.pane { padding: 1.5rem 1.75rem 1.5rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pane-head h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.pane-head p { margin: .2rem 0 0; font-size: 12px; color: var(--txt-tertiary); }

.locale {
  flex: none; height: 2rem; min-width: 2.25rem; padding: 0 .55rem; border-radius: .5rem;
  border: 1px solid var(--border-subtle); background: var(--bg-layer-1); color: var(--txt-secondary);
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.locale:hover { background: var(--bg-layer-2); color: var(--txt-primary); }

.notice {
  display: flex; align-items: flex-start; gap: .55rem; padding: .6rem .8rem; border-radius: .5rem;
  font-size: 12px; line-height: 1.7; border-inline-start: 3px solid var(--border-strong);
  background: var(--bg-layer-2); color: var(--txt-secondary);
}
.notice.is-error { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-line); }
.notice.is-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-fg); }
.notice.is-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-fg); }
.notice svg { flex: none; margin-top: .2rem; }

.lane { display: grid; gap: .8rem; }
.field { display: grid; gap: .35rem; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.field label { font-size: 11px; color: var(--txt-tertiary); }
.field-hint { font-size: 11px; color: var(--txt-tertiary); font-variant-numeric: tabular-nums; }
.control { position: relative; }
.input {
  width: 100%; height: 2.5rem; padding: 0 .75rem; border-radius: .5rem;
  border: 1px solid var(--border-subtle); background: var(--bg-layer-1); color: var(--txt-primary);
  font: inherit; font-size: 16px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--txt-placeholder); }
.input:hover { border-color: var(--border-strong); }
.input:focus-visible { border-color: var(--brand-default); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-default) 18%, transparent); }
.input:disabled { background: var(--bg-layer-2); color: var(--txt-tertiary); cursor: not-allowed; }
.input.has-eye { padding-inline-end: 2.5rem; }
.eye {
  position: absolute; top: 0; inset-inline-end: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--txt-tertiary); cursor: pointer; border-radius: .5rem;
}
.eye:hover { color: var(--txt-primary); }
.eye:disabled { visibility: hidden; }
.eye .off { display: none; }
.eye[aria-pressed="true"] .on { display: none; }
.eye[aria-pressed="true"] .off { display: block; }

.code {
  direction: ltr; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .6rem;
  padding-inline-start: calc(.75rem + .6rem); font-size: 20px; font-weight: 500; height: 2.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Vazirmatn, monospace;
}
.code::placeholder { letter-spacing: .6rem; color: var(--txt-placeholder); }
.totp { display: none; gap: .3rem; align-items: center; }
.totp.is-on { display: grid; }
.totp-track { height: .2rem; border-radius: 1rem; background: var(--bg-layer-3); overflow: hidden; }
.totp-track > span {
  display: block; height: 100%; width: 100%; border-radius: 1rem; transform-origin: 0 50%;
  background: var(--brand-default); transform: scaleX(var(--totp, 1)); transition: transform .9s linear;
}
.totp.is-late .totp-track > span { background: var(--warn-fg); }
.totp small { font-size: 11px; color: var(--txt-tertiary); font-variant-numeric: tabular-nums; }

.primary {
  height: 2.5rem; border: 0; border-radius: .5rem; padding: 0 1rem; display: inline-flex; align-items: center;
  justify-content: center; gap: .5rem; width: 100%; background: var(--brand-default); color: var(--brand-ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease, transform .12s ease, opacity .15s ease;
}
.primary:hover { background: var(--brand-700); }
.primary:active { transform: translateY(1px); }
.primary:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 2px; }
.primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.primary .spin { display: none; }
.primary.is-loading .spin { display: block; animation: spin .8s linear infinite; }
.primary.is-loading .txt { opacity: .75; }
@keyframes spin { to { transform: rotate(360deg); } }

.split { display: flex; align-items: center; gap: .75rem; font-size: 11px; color: var(--txt-tertiary); margin-top: .25rem; }
.split:before, .split:after { content: ""; height: 1px; background: var(--border-subtle); flex: 1; }

.team { display: grid; gap: .75rem; justify-items: center; }
.team p { margin: 0; font-size: 12px; color: var(--txt-secondary); line-height: 1.7; }
.team-widget { display: grid; place-items: center; min-height: 2.5rem; }
.team-widget[hidden] { display: none; }
.tg-open { text-decoration: none; }
.tg-hint { margin: 0; font-size: 11.5px; color: var(--txt-secondary); text-align: center; line-height: 1.7; }
.team-qr { display: grid; justify-items: center; gap: .5rem; }
.team-qr .qr { display: block; width: 15rem; height: 15rem; padding: .5rem; border-radius: .75rem; background: #fff; transition: opacity .2s; }
.team-qr .qr svg { display: block; width: 100%; height: 100%; }
.team-qr .qr.is-stale { opacity: .25; }
.qr-again { font: inherit; font-size: 11.5px; color: var(--txt-secondary); background: none; border: 0; padding: .1rem .2rem; cursor: pointer; }
.qr-again:hover { color: var(--txt-primary); }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: .55rem; }
html[lang="fa"] .steps li:before { content: counter(s, persian); }
.steps li { counter-increment: s; display: flex; gap: .7rem; align-items: flex-start; font-size: 12.5px; color: var(--txt-secondary); line-height: 1.7; }
.steps li:before {
  content: counter(s); flex: none; width: 1.4rem; height: 1.4rem; margin-top: .15rem; border-radius: .4rem; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; background: var(--brand-100); color: var(--brand-default); border: 1px solid var(--brand-300);
}
.qr { display: grid; place-items: center; padding: .6rem; background: #fff; border: 1px solid var(--border-subtle); border-radius: .75rem; width: max-content; }
.qr svg { width: 12rem; height: 12rem; display: block; }
.secret { display: flex; align-items: center; gap: .5rem; }
.secret code {
  flex: 1; min-width: 0; direction: ltr; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; letter-spacing: .06em; padding: .45rem .6rem; border: 1px solid var(--border-subtle);
  border-radius: .5rem; background: var(--bg-layer-2); color: var(--txt-secondary); white-space: nowrap; overflow-x: auto;
}
.ghost {
  flex: none; height: 2rem; padding: 0 .6rem; border-radius: .45rem; border: 1px solid var(--border-subtle);
  background: var(--bg-layer-1); color: var(--txt-secondary); font: inherit; font-size: 11px; cursor: pointer;
}
.ghost:hover { background: var(--bg-layer-2); color: var(--txt-primary); }
.enroll-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1.1rem; align-items: start; }

.link { color: var(--brand-default); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }
a.primary, a.ghost { text-decoration: none; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.actions .primary { width: auto; min-width: 9rem; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

@media (max-width: 759px) {
  body { padding: 0; align-items: stretch; }
  .gate { width: 100%; min-height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; border: 0; border-radius: 0; box-shadow: none; }
  .gate.is-single { width: 100%; }
  .brand { padding: 1rem 1rem .9rem; gap: .8rem; border-inline-end: 0; border-bottom: 1px solid var(--border-subtle); }
  .brand-mark { flex-direction: row; align-items: center; gap: .75rem; }
  .brand-mark img { height: 3.75rem; max-width: 10rem; }
  .ledger > div { min-height: 2.3rem; }
  .ledger > div.is-optional, .brand-foot { display: none; }
  .pane { padding: 1.25rem 1rem 1.5rem; }
  .team-qr { display: none; }
  .input, .primary { height: 2.75rem; }
  .code { height: 3rem; }
  .enroll-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .totp-track > span, .primary, .input { transition: none; }
  .primary.is-loading .spin { animation: none; }
}

.control .at { position: absolute; inset-inline-start: .8rem; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--txt-tertiary); pointer-events: none; }
.input.has-at { padding-inline-start: 1.9rem; }
.field-note { margin: .1rem 0 0; font-size: 11.5px; line-height: 1.7; color: var(--txt-tertiary); }
.inline-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
button.link { background: none; border: 0; min-height: 2.25rem; padding: .25rem .5rem; border-radius: .375rem; font: inherit; font-size: 12px; color: var(--txt-secondary); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
button.link:hover { color: var(--txt-primary); }
.legacy-toggle { margin-top: .25rem; text-align: center; }
.control.is-ltr { direction: ltr; }
.input.is-error { border-color: var(--danger-line); }
.input.is-error:focus { box-shadow: 0 0 0 3px var(--danger-bg); }