/* WISAL reference-led admin skin. Tokens matched to lib/core/wisal_theme.dart.
 * Presentation only: authentication, routing, RPCs and scripts are untouched.
 */
:root {
  color-scheme: dark;
  --background: #0C0D10;
  --surface: #13151A;
  --surface-alt: #1A1D23;
  --field: #17191F;
  --border: #343944;
  --border-soft: #252A32;
  --primary: #7B6DF0;
  --primary-deep: #6557D8;
  --text: #F4F5F7;
  --muted: #9CA3AF;
  --success: #34C77B;
  --danger: #F0646A;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Tahoma", sans-serif;
  background: var(--background);
  color: var(--text);
  font-size: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--background); }
body { margin: 0; min-height: 100dvh; line-height: 1.5; }
.shell {
  width: min(100%, 540px);
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
}
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; margin-bottom: 30px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  display: grid; place-items: center; width: 43px; height: 43px; flex: none;
  border: 1px solid var(--primary-deep); border-radius: 14px;
  background: var(--surface-alt); color: var(--primary);
  font-size: 28px; font-weight: 900; line-height: 1;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.brand-text strong { font-size: 18px; font-weight: 900; letter-spacing: -.3px; }
.brand-text span { color: var(--muted); font-size: 11px; font-weight: 650; }
.secure-tag { display: flex; gap: 6px; align-items: center; border: 1px solid var(--border-soft); background: var(--surface); color: var(--muted); border-radius: 24px; padding: 7px 10px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.secure-dot { height: 7px; width: 7px; background: var(--success); border-radius: 50%; }
.page-intro { padding: 0 3px 7px; }
.eyebrow { color: var(--primary); font-size: 12px; font-weight: 800; margin-bottom: 7px; }
h1 { font-size: clamp(25px, 6vw, 29px); line-height: 1.3; font-weight: 900; letter-spacing: -.5px; margin: 0 0 10px; }
.page-intro > p { color: var(--muted); font-size: 13px; line-height: 1.85; margin: 0; max-width: 440px; }
.panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden; margin-top: 22px; }
.section-head { display: flex; align-items: center; gap: 11px; padding: 18px 17px; border-bottom: 1px solid var(--border-soft); }
.step-index { width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-alt); display: grid; place-items: center; color: var(--primary); font-size: 13px; font-weight: 900; flex: none; font-variant-numeric: tabular-nums; }
h2 { margin: 0; font-size: 15px; font-weight: 850; line-height: 1.5; }
.section-caption { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.section-body { padding: 15px 16px 17px; }
label { display: block; color: var(--text); font-size: 12px; font-weight: 700; margin: 13px 1px 7px; }
input { display: block; width: 100%; height: 51px; font: inherit; font-size: 16px; padding: 0 13px; color: var(--text); background: var(--field); border: 1px solid var(--border); border-radius: 14px; direction: rtl; outline: none; transition: border-color .15s ease; }
input::placeholder { color: #858C99; opacity: 1; }
input:focus-visible { border-color: var(--primary); outline: 2px solid rgb(123 109 240 / .18); outline-offset: 1px; }
#code { letter-spacing: .22em; text-align: center; font-variant-numeric: tabular-nums; direction: ltr; }
button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; margin-top: 11px; }
button.primary, #login, #verify { background: var(--primary); color: #fff; }
button.primary:active { background: var(--primary-deep); }
button.secondary { background: var(--surface-alt); color: var(--text); border-color: var(--border); }
button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.field-note { color: var(--muted); font-size: 11px; line-height: 1.75; margin: 12px 2px 0; }
.secret-box { margin-top: 12px; }
code { display: block; color: var(--text); background: var(--field); border: 1px solid var(--border); padding: 12px; border-radius: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .035em; text-align: left; direction: ltr; overflow-wrap: anywhere; user-select: all; }
.status-panel { margin-top: 14px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface); padding: 15px 16px; }
.status-head { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; font-weight: 750; }
.status-indicator { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
#status { color: var(--muted); font-size: 12px; line-height: 1.75; margin: 7px 15px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.success-panel { padding: 20px; text-align: center; }
.success-mark { width: 48px; height: 48px; margin: 0 auto 12px; display: grid; place-items: center; border: 1px solid rgb(52 199 123 / .45); border-radius: 16px; color: var(--success); font-size: 25px; font-weight: 900; }
.success-panel p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 10px 0 0; }
.site-footer { text-align: center; font-size: 11px; color: var(--muted); padding-top: 23px; }
.hidden { display: none !important; }
@media (min-width: 600px) {
  .shell { padding-top: 38px; }
  .section-body { padding: 18px 22px 22px; }
  .section-head { padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}