/* Sign-in, two-step and password screens: ported from SOC-Vantage v60 (theme.css v30/v36/v57). */
:root { --border: var(--line-2); --border-strong: var(--line-2); --ink: var(--fg); --ink-2: var(--fg-2); --muted: var(--fg-3); --focus: var(--accent); --selected: var(--accent-soft); --good-text: var(--good); --bad-text: var(--crit); --hover: var(--surface-2); --font: var(--f-body); }
.vlogin {
  --vl-accent: #e8912c; --vl-card: #12151b; --vl-line: #262a31; --vl-field: #0c0f14; --vl-muted: #6f7680;
  --vl-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  position: relative; min-height: 100vh; overflow: hidden; background: #0b0e12; color: #e8e6e1;
  display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box;
}
.vl-radar { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vl-sweep { transform-origin: 640px 400px; animation: vl-spin 8s linear infinite; }
.vl-ping { transform-box: fill-box; transform-origin: center; animation: vl-ping 2.6s ease-out infinite; }
.vl-ping.vl-late { animation-delay: 1.3s; }
@keyframes vl-spin { to { transform: rotate(360deg); } }
@keyframes vl-ping { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
@keyframes vl-blink { 50% { opacity: 0; } }
.vl-card {
  position: relative; width: min(460px, 100%); box-sizing: border-box; background: var(--vl-card);
  border: 1px solid var(--vl-line); border-top: 3px solid var(--vl-accent); border-radius: 16px;
  padding: 40px 44px 32px; display: flex; flex-direction: column; gap: 20px;
}
.vl-head { display: flex; align-items: center; justify-content: space-between; }
.vl-word { font-size: 20px; font-weight: 700; letter-spacing: 4px; color: #eceae6; }
.vl-word span { color: var(--vl-accent); }
.vl-sub { font-size: 11.5px; font-weight: 500; letter-spacing: 2.4px; color: var(--vl-muted); margin-top: 4px; }
.vl-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--vl-field); border: 1px solid var(--vl-line); display: grid; place-items: center; }
.vl-cmd { font-family: var(--vl-mono); font-size: 13.5px; color: var(--vl-accent); display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.vl-prompt { color: var(--vl-muted); margin-right: 8px; }
.vl-cursor { display: inline-block; width: 9px; height: 18px; background: var(--vl-accent); margin-left: 2px; flex: none; animation: vl-blink 1.05s steps(1) infinite; }
.vl-title { margin: 10px 0 0; font-size: 21px; line-height: 1.3; font-weight: 700; color: #f2f1ee; }
.vl-title span { color: var(--vl-accent); }
.vl-field { display: flex; flex-direction: column; gap: 8px; }
.vl-field label { font-family: var(--vl-mono); font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #8a9099; }
.vl-field input {
  height: 52px; border: 1px solid var(--vl-line); border-radius: 10px; padding: 0 16px; font-size: 15px;
  background: var(--vl-field); color: #ffffff; font-family: inherit; outline: none;
}
.vl-field input::placeholder { color: #4d545d; }
.vl-field input:focus { border-color: var(--vl-accent); box-shadow: 0 0 0 3px rgba(232, 145, 44, 0.18); }
.vl-btn {
  height: 54px; border: 0; border-radius: 12px; background: var(--vl-accent); color: #15120d; cursor: pointer;
  font-family: var(--vl-mono); font-size: 15px; font-weight: 600; letter-spacing: 2px;
}
.vl-btn:hover { background: #f09d3c; }
.vl-btn:disabled { opacity: 0.7; cursor: default; }
.vl-btn:focus-visible, .vl-link:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.vl-err { border-radius: 9px; padding: 10px 12px; font-size: 13px; background: rgba(229, 100, 92, 0.12); border: 1px solid rgba(229, 100, 92, 0.4); color: #f5a08c; }
.vl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; font-family: var(--vl-mono); font-size: 12.5px; color: #626973; }
.vl-link { white-space: nowrap; border: 0; background: none; padding: 0; font: inherit; color: #f0a24a; cursor: pointer; }
.vl-link:hover { color: #ffc07a; }
.vl-help { font-size: 13px; line-height: 1.5; color: #aab0b8; background: var(--vl-field); border: 1px solid var(--vl-line); border-radius: 10px; padding: 12px 14px; }
/* forced first-login password change reuses the card with the app's form parts in dark */
.vl-forced {
  --surface: #0c0f14; --surface-2: #171a1e; --border: #262a31; --border-strong: #2f343c; --ink: #ecebe7; --ink-2: #aab0b8;
  --muted: #7d848d; --btn: #e8912c; --btn-ink: #15120d; --focus: #e8912c; --selected: rgba(232, 145, 44, 0.18); --bad-text: #f5a08c;
  color: #ecebe7;
}
.vl-forced .input { height: 44px; color: #ffffff; }
@media (max-width: 520px) { .vl-card { padding: 32px 22px 26px; } .vl-cmd { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .vl-sweep, .vl-ping, .vl-cursor { animation: none; } }
.brand-svg { flex: none; display: block; }
.vl-card.vl-wide { width: min(580px, 100%); }
.mfa-lead { font-size: 14px; line-height: 1.5; color: #aab0b8; }
.mfa-lead b { color: #ecebe7; }
.otp { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; cursor: text; }
.otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; caret-color: transparent; }
.otp-cell { height: 56px; border-radius: 10px; display: grid; place-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 24px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.otp-cell.gap { margin-right: 10px; }
.otp-cell.on { border-color: var(--focus); box-shadow: 0 0 0 3px var(--selected); }
.otp.dark .otp-cell { background: #0c0f14; border-color: #262a31; color: #ffffff; }
.otp.dark .otp-cell.on { border-color: #e8912c; box-shadow: 0 0 0 3px rgba(232, 145, 44, 0.18); }
.otp.off { opacity: .55; }
.mfa-steps { margin: 0; padding: 0; list-style: none; counter-reset: mfa; display: flex; flex-direction: column; gap: 16px; }
.mfa-steps > li { counter-increment: mfa; position: relative; padding-left: 38px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #ecebe7; }
.mfa-steps > li::before { content: counter(mfa); position: absolute; left: 0; top: -2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; color: #15120d; background: #e8912c; }
.mfa-steps > li > span { color: #8a9099; font-size: 13px; line-height: 1.45; }
.mfa-scan { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.mfa-qr { display: block; border-radius: 10px; flex: none; }
.mfa-qr.ph { width: 184px; height: 184px; background: #1b1f26; }
.mfa-scan-side { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: #8a9099; min-width: 0; flex: 1; }
.mfa-scan-side b { color: #ecebe7; font-weight: 600; overflow-wrap: anywhere; }
.mfa-scan.light .mfa-scan-side, .mfa-scan.light .mfa-scan-side b { color: var(--ink-2); }
.mfa-key { font-family: ui-monospace, Menlo, monospace; font-size: 13px; letter-spacing: .5px; color: #ffc07a; background: #0c0f14; border: 1px solid #262a31; border-radius: 8px; padding: 8px 10px; word-break: normal; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 4px; }
.mfa-key em { font-style: normal; font-family: var(--font); color: #6f7680; font-size: 11.5px; letter-spacing: 0; }
.mfa-codes { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.mfa-codes ol { margin: 0; padding: 0 0 0 22px; columns: 2; column-gap: 28px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .6px; line-height: 1.9; color: var(--ink); }
.mfa-codes ol li::marker { color: var(--muted); font-size: 11px; }
.mfa-codes.dark { background: #0c0f14; border-color: #262a31; }
.mfa-codes.dark ol { color: #ffffff; }
.mfa-code-tools { display: flex; gap: 14px; justify-content: flex-end; }
.mfa-check { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: #cfd3d8; cursor: pointer; }
.mfa-check input { width: 16px; height: 16px; accent-color: #e8912c; }
.mfa-modal { display: flex; flex-direction: column; gap: 14px; }
.mfa-status { display: flex; gap: 12px; align-items: flex-start; }
.mfa-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; padding-right: 58px !important; min-width: 0; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 4px 6px; border-radius: 6px; }
.pw-eye:hover { background: var(--hover); color: var(--ink); }
.pw-wrap.dark .pw-eye { color: #8a9099; font-family: var(--vl-mono); letter-spacing: 1px; text-transform: uppercase; font-size: 10.5px; }
.pw-wrap.dark .pw-eye:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
.pw-caps { font-size: 12px; color: #e8912c; font-weight: 600; }
.pw-rules { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; color: var(--ink-2); }
.pw-rules li.ok { color: var(--good-text); }
.pw-rules li.bad { color: var(--bad-text); }
.vl-forced .pw-rules { color: #aab0b8; }
.vl-forced .pw-rules li.ok { color: #6fcf8a; }
.vl-forced .pw-rules li.bad { color: #f5a08c; }


/* gate + forced-change form parts (dark) */
.gate[hidden] { display: none; }
.vl-forced .field { display: flex; flex-direction: column; gap: 6px; }
.vl-forced .field label { font-family: var(--vl-mono); font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #8a9099; }
.vl-forced .field input { height: 48px; border: 1px solid #262a31; border-radius: 10px; padding: 0 16px; font-size: 15px; background: #0c0f14; color: #ffffff; outline: none; width: 100%; box-sizing: border-box; }
.vl-forced .field input:focus { border-color: #e8912c; box-shadow: 0 0 0 3px rgba(232, 145, 44, 0.18); }
.vl-forced .hint { font-size: 12px; color: #7d848d; }
.vl-row { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.vl-ghost { height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #262a31; background: transparent; color: #cfd3d8; font-family: var(--vl-mono); letter-spacing: 1px; cursor: pointer; }
.vl-ghost:hover { border-color: #3a404a; color: #ffffff; }
.vl-row .vl-btn { padding: 0 22px; height: 44px; }
.callout { padding: 10px 12px; border-radius: 9px; font-size: 13px; background: rgba(232, 145, 44, 0.08); border: 1px solid rgba(232, 145, 44, 0.35); color: #e9d6bd; }
.callout.bad { background: rgba(229, 100, 92, 0.12); border-color: rgba(229, 100, 92, 0.4); color: #f5a08c; }
.vl-field .pw-wrap input { width: 100%; box-sizing: border-box; }

/* in-app account menu + modals */
.acct { position: relative; }
.acct-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--fg-2); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 12.5px; cursor: pointer; }
.acct-btn:hover { color: var(--fg); background: var(--surface-2); }
.acct-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 12px; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px; z-index: 40; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.acct-menu[hidden] { display: none; }
.acct-menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 12.5px; color: var(--fg-2); }
.acct-menu .who b { display: block; color: var(--fg); font-size: 13.5px; }
.acct-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--fg); cursor: pointer; }
.acct-menu button:hover { background: var(--surface-2); }
.scrim { position: fixed; inset: 0; background: rgba(5, 6, 8, 0.6); z-index: 60; }
.modal { position: fixed; left: 50%; top: 8vh; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); max-height: 84vh; overflow: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; z-index: 61; display: flex; flex-direction: column; }
.modal-h { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.modal-h h2 { margin: 0; font-size: 16px; font-family: var(--f-display); font-weight: 600; }
.modal-b { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.modal-f { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.secret { font-family: var(--f-mono); font-size: 22px; letter-spacing: 1.5px; padding: 14px; text-align: center; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--line-2); user-select: all; }
.grant-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; }
.tag.good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.tag.bad { background: var(--crit-bg); color: var(--crit); border-color: transparent; }
.tag.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.iconbtn { border: 1px solid var(--line-2); background: var(--surface); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; color: var(--fg-2); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--crit); }
.small { font-size: 12.5px; }
.app[hidden] { display: none; }
.vlogin [hidden], .modal [hidden], .acct [hidden] { display: none !important; }
.mfa-scan-side .vl-link { align-self: flex-start; }
label.mfa-check { flex-direction: row; }