@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Body styles only apply to auth-cover pages (signin/signup/onboarding/
   handoff). Panel pages load shared/css/shell.css which owns the body and
   layout chrome — don't compete with it here. */
body:has(.auth-wrap) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100dvh;
  overflow: hidden;
  background: var(--c-gray-50, #f8f7ff);
  color: var(--c-gray-900, #0d0c1f);
}

/* ─── SPLIT LAYOUT ───────────────────────────────────────────────────────── */
.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100dvh;
}

/* ─── LEFT IMAGE ─────────────────────────────────────────────────────────── */
.auth-image {
  position: relative;
  overflow: hidden;
  /* Theme-aware gradient — themes.css remaps --c-p-* so this surface
     follows the active palette. Override per-page with
     style="background-image:url(...)" when shipping a real hero photo. */
  background:
    linear-gradient(150deg, var(--c-p-900) 0%, var(--c-p-800) 35%, var(--c-p-700) 65%, var(--c-p-500) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.auth-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Subtle overlay to ensure image blends nicely */
.auth-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 30, 0.15);
  pointer-events: none;
}

/* Per-source hero photo. Default = English; languages with their own artwork
   override below. Unknown langs fall through to the default. */
/* Shared treatment for sourced hero photos: cover sizing + drop dot-grid,
   overlay tint, and all overlaid text/logo so only the artwork shows. */

/* ─── RIGHT FORM PANEL ───────────────────────────────────────────────────── */
.auth-panel {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 64px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.auth-box {
  width: 100%;
  max-width: 380px;
}

/* ─── LOGO ───────────────────────────────────────────────────────────────── */
.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-gray-900);
  letter-spacing: -.4px;
  text-decoration: none;
}

.auth-logo-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--c-p-500), var(--c-p-800));
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(124,58,237,.35);
}

.auth-brand-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 42px;
  text-decoration: none;
}
.auth-brand-logo img {
  height: 70px;
  width: auto;
  display: block;
}

/* ─── PAGE HEADER ────────────────────────────────────────────────────────── */
.auth-hd { margin-bottom: 28px; }

.auth-hd h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.7px;
  color: var(--c-gray-900);
  margin-bottom: 5px;
}

.auth-hd p { font-size: 14px; color: var(--c-gray-500); line-height: 1.55; }

/* ─── FORM ELEMENTS ──────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }

.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.form-label-row label,
.form-group > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-gray-700);
  margin-bottom: 6px;
}

.form-link { font-size: 12px; color: var(--c-p-600); font-weight: 500; white-space: nowrap; }

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  color: var(--c-gray-400);
  pointer-events: none;
  flex-shrink: 0;
}

.input-wrap input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 38px;
  border: 1.5px solid var(--c-gray-200);
  border-radius: var(--r);
  background: var(--c-gray-50);
  color: var(--c-gray-900);
  font-size: 14px;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

.input-wrap input:only-child { padding: 0 14px; }

.input-wrap input::placeholder { color: var(--c-gray-400); }

.input-wrap input:focus {
  border-color: var(--c-p-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}

.input-wrap input:hover:not(:focus) { border-color: var(--c-gray-300); }

.input-action {
  position: absolute;
  right: 10px;
  padding: 4px;
  color: var(--c-gray-400);
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
  line-height: 0;
}
.input-action:hover { color: var(--c-gray-700); }

.input-wrap.has-icon input { padding-left: 38px; }

/* password strength */
.pwd-strength {
  height: 3px;
  border-radius: 99px;
  background: var(--c-gray-200);
  margin-top: 8px;
  overflow: hidden;
}
.pwd-strength-fill {
  height: 100%;
  border-radius: 99px;
  width: 0;
  transition: width var(--t), background var(--t);
}

/* ─── CHECKBOX ───────────────────────────────────────────────────────────── */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 22px;
}

.form-check input[type="checkbox"] {
  width: 16px; height: 16px;
  margin-top: 1px;
  accent-color: var(--c-p-600);
  cursor: pointer;
  flex-shrink: 0;
}

.form-check label {
  font-size: 13px;
  color: var(--c-gray-600);
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
}

/* ─── DIVIDER ────────────────────────────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--c-gray-300);
  font-size: 12px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--c-gray-200); }

/* ─── SUBMIT BUTTON ──────────────────────────────────────────────────────── */
.btn-auth {
  width: 100%;
  height: 46px;
  background: var(--c-p-600);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r);
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  letter-spacing: -.1px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: none;
}

.btn-auth:hover {
  background: var(--c-p-700);
  box-shadow: 0 4px 20px rgba(61,71,101,.38);
  transform: translateY(-1px);
}

.btn-auth:active { transform: translateY(0); box-shadow: none; }
.btn-auth:disabled, .btn-auth.loading { opacity: .7; pointer-events: none; }

/* ─── BACK LINK ──────────────────────────────────────────────────────────── */
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--c-gray-500);
  margin-bottom: 28px;
  text-decoration: none;
  transition: color var(--t-fast);
}
.auth-back:hover { color: var(--c-gray-900); text-decoration: none; }

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.auth-footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}
.auth-footer p { font-size: 13px; color: var(--c-gray-500); }
.auth-footer a { font-size: 13px; color: var(--c-p-600); font-weight: 500; }
.auth-footer a:hover { text-decoration: underline; }

/* ─── OTP INPUTS (6 digits) ──────────────────────────────────────────────── */
.otp-wrap {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 24px;
}

.otp-input {
  width: 52px;
  height: 60px;
  border: 1.5px solid var(--c-gray-200);
  border-radius: var(--r-lg);
  background: var(--c-gray-50);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--c-gray-900);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  caret-color: var(--c-p-600);
}

.otp-input:focus {
  border-color: var(--c-p-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}

.otp-input.filled {
  border-color: var(--c-p-400);
  background: var(--c-p-50);
  color: var(--c-p-700);
}

.otp-separator {
  display: flex;
  align-items: center;
  color: var(--c-gray-300);
  font-size: 18px;
  font-weight: 300;
  user-select: none;
}

/* ─── RECOVERY GRID (16 words) ───────────────────────────────────────────── */
.recovery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 0 24px;
}

.recovery-word {
  position: relative;
}

.word-num {
  position: absolute;
  top: 8px;
  left: 9px;
  font-size: 9px;
  font-weight: 700;
  color: var(--c-gray-400);
  line-height: 1;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.word-input {
  width: 100%;
  height: 50px;
  padding: 16px 8px 4px;
  border: 1.5px solid var(--c-gray-200);
  border-radius: var(--r);
  background: var(--c-gray-50);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-gray-900);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  font-family: 'Courier New', monospace;
}

.word-input:focus {
  border-color: var(--c-p-500);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(124,58,237,.1);
}

.word-input.valid { border-color: var(--c-success); }
.word-input.error { border-color: var(--c-danger); }

.recovery-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: var(--r);
  margin-bottom: 20px;
}

.recovery-warning svg { flex-shrink: 0; color: var(--c-warning); margin-top: 1px; }
.recovery-warning p { font-size: 12px; color: var(--c-gray-600); line-height: 1.5; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .auth-panel { padding: 40px 40px; }
}

@media (max-width: 768px) {
  .auth-wrap { grid-template-columns: 1fr; height: 100dvh; }
  .auth-image  { display: none; }
  .auth-panel  { padding: 32px 24px; align-items: flex-start; padding-top: 48px; }
  .auth-box    { max-width: 100%; }

  .otp-input { width: 44px; height: 52px; font-size: 20px; }
  .otp-wrap  { gap: 7px; }

  .recovery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
  .auth-panel { padding: 24px 16px; padding-top: 40px; }
  .otp-input  { width: 38px; height: 46px; font-size: 18px; }
  .otp-wrap   { gap: 5px; }
}

/* ─── LEFT IMAGE INNER (base_cover content) ──────────────────────────────── */
.auth-image-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  color: #fff;
}

.auth-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(167,139,250,.18) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.auth-logo-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-nyo-logo {
  width: 80px;
  height: 24px;
  color: #fff;
}

.auth-module-logo {
  height: 32px;
  width: auto;
}

.auth-image h2 {
  position: relative;
  z-index: 1;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1px;
  color: #fff;
  max-width: 420px;
  margin-top: auto;
}

.auth-source-subtitle {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  max-width: 420px;
  margin-top: 16px;
}

/* --- Auth product visual v2: raw background + HTML feature cards --------- */
.auth-image[data-source] {
  --auth-primary: #1d7cff;
  --auth-primary-2: #704cff;
  --auth-accent: #31d7ff;
  --auth-red: #ff2c57;
  --auth-green: #34d399;
  --auth-glow-blue: rgba(29, 124, 255, .48);
  --auth-glow-red: rgba(255, 44, 87, .42);
  --auth-glow-green: rgba(24, 211, 139, .38);
  --auth-glass: rgba(10, 19, 51, .68);
  background-image: url("/static/images/auth_vault_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.auth-image[data-source="finance"] {
  --auth-primary: #12b981;
  --auth-primary-2: #e11d48;
  --auth-accent: #58e6a8;
  --auth-glow-blue: rgba(7, 110, 96, .36);
  --auth-glow-red: rgba(255, 46, 92, .44);
  --auth-glow-green: rgba(33, 235, 153, .46);
  background-image: url("/static/images/auth_finance_bg.png");
}

.auth-image[data-source="people"] {
  --auth-primary: #2574e8;
  --auth-primary-2: #13b889;
  --auth-accent: #22d3ee;
  --auth-glow-blue: rgba(37, 116, 232, .46);
  --auth-glow-red: rgba(19, 184, 137, .22);
  --auth-glow-green: rgba(19, 184, 137, .44);
  background-image: url("/static/images/auth_people_bg.png");
}

.auth-image[data-source="suite"] {
  --auth-primary: #1d7cff;
  --auth-primary-2: #13b889;
  --auth-accent: #58e6a8;
  background-image: none;
  background:
    radial-gradient(circle at 14% 72%, rgba(29,124,255,.52), transparent 22%),
    radial-gradient(circle at 86% 68%, rgba(255,44,87,.36), transparent 24%),
    radial-gradient(circle at 50% 28%, rgba(19,184,137,.26), transparent 28%),
    linear-gradient(145deg, #04091c, #081947 48%, #16091f);
}

.auth-image[data-source="vault"],
.auth-image[data-source="pass"] {
  background-image: url("/static/images/auth_vault_bg.png");
}

.auth-image[data-source]::before,
.auth-image[data-source]::after {
  display: block;
}

.auth-image[data-source]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(78,154,255,.18) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
  pointer-events: none;
  z-index: -1;
}

.auth-image[data-source]::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 72%, var(--auth-glow-blue), transparent 24%),
    radial-gradient(circle at 86% 70%, var(--auth-glow-red), transparent 25%),
    radial-gradient(circle at 55% 30%, rgba(67,117,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(3,7,22,.02), rgba(3,7,22,.36));
  pointer-events: none;
  z-index: -1;
}

.auth-image[data-source] .auth-image-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
  justify-content: center;
  align-content: center;
  padding: clamp(24px, 4vw, 48px);
  color: #fff;
}

.auth-visual-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.auth-visual {
  display: none;
  width: 650px;
  max-width: 100%;
}

.auth-image[data-source="suite"] .auth-visual-suite,
.auth-image[data-source="vault"] .auth-visual-vault,
.auth-image[data-source="pass"] .auth-visual-vault,
.auth-image[data-source="finance"] .auth-visual-finance,
.auth-image[data-source="people"] .auth-visual-people {
  display: block;
}

.auth-glass-card {
  position: relative;
  border: 1px solid rgba(77,151,255,.38);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(82,133,255,.19), rgba(255,255,255,.045) 46%, rgba(255,41,84,.06)),
    var(--auth-glass);
  box-shadow:
    0 30px 80px rgba(0,0,0,.38),
    0 0 42px color-mix(in srgb, var(--auth-primary), transparent 72%),
    0 0 1px 1px rgba(74,151,255,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  overflow: hidden;
}

.auth-glass-card::before,
.auth-glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth-glass-card::before {
  background: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--auth-primary), transparent 68%), transparent 34%);
}

.auth-glass-card::after {
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(52,132,255,.34), transparent 42%, rgba(255,39,84,.28)),
    radial-gradient(circle at 92% 86%, var(--auth-glow-red), transparent 28%);
  opacity: .55;
  mix-blend-mode: screen;
}

.auth-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(154,199,255,.24);
  border-radius: 12px;
  color: #dbeafe;
  background:
    radial-gradient(circle at 34% 20%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg, #1164df, var(--auth-primary-2));
  box-shadow:
    0 14px 32px color-mix(in srgb, var(--auth-primary), transparent 48%),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.auth-icon-lg {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.auth-icon svg,
.people-profile-card i svg,
.people-actions-card i svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(95,171,255,.42));
}

.auth-scene-stack {
  display: grid;
  gap: 14px;
}

.auth-card-row,
.auth-two-col,
.auth-score-body,
.auth-totp-row,
.auth-list-row {
  position: relative;
  z-index: 2;
}

.vault-hero-card {
  width: min(640px, 96%);
  margin: 0 auto;
  padding: 22px;
}

.auth-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-visual h2,
.auth-visual h3 {
  position: relative;
  z-index: 2;
  color: #fff;
  margin: 0;
  letter-spacing: 0;
}

.auth-visual h2 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1;
}

.auth-visual h3 {
  font-size: 19px;
  line-height: 1.1;
}

.auth-visual p,
.auth-visual span,
.auth-visual small {
  position: relative;
  z-index: 2;
}

.auth-card-row p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.74);
  font-size: 14px;
}

.auth-feature-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 22px;
}

.auth-feature-card {
  min-height: 106px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 17px;
  background: rgba(255,255,255,.06);
}

.auth-feature-card .auth-icon {
  margin-bottom: 12px;
}

.auth-feature-card strong,
.auth-feature-card span,
.auth-totp-row strong,
.auth-list-row strong {
  display: block;
}

.auth-feature-card span,
.auth-totp-row small,
.auth-list-row small,
.auth-score-body span {
  display: block;
  color: rgba(255,255,255,.66);
  font-size: 12px;
  line-height: 1.3;
  margin-top: 4px;
}

.auth-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, .88fr);
  gap: 14px;
}

.auth-score-card,
.auth-totp-card {
  min-height: 172px;
  padding: 18px;
}

.auth-score-body {
  display: grid;
  grid-template-columns: 94px 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
}

.auth-score-ring,
.auth-goal-ring {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  background:
    radial-gradient(circle, rgba(9,16,42,.96) 55%, transparent 57%),
    conic-gradient(#2f91ff 0 73%, rgba(255,255,255,.14) 73% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.auth-score-ring {
  width: 94px;
  height: 94px;
  font-size: 28px;
}

.auth-score-body strong {
  color: #2f91ff;
  font-size: 22px;
}

.auth-score-body i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f91ff, #704cff);
  margin-top: 11px;
}

.auth-score-body i + i {
  width: 62%;
  opacity: .82;
}

.auth-totp-row {
  display: grid;
  grid-template-columns: 34px minmax(74px, 1fr) auto 26px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  background: rgba(255,255,255,.07);
}

.auth-totp-row .auth-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.auth-totp-row b {
  color: #2f91ff;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 17px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.auth-totp-row em {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--auth-primary), #66d8ff 34%);
  border-radius: 50%;
  color: #bcd9ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.auth-list-card {
  width: min(596px, 88%);
  margin: 0 auto;
  padding: 16px;
}

.auth-list-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.065);
}

.auth-list-row b {
  color: rgba(255,255,255,.48);
  letter-spacing: .08em;
}

.finance-scene {
  display: grid;
  gap: 15px;
  width: min(680px, 100%);
  margin: 0 auto;
}

.finance-chart-card {
  min-height: 218px;
  padding: 24px 28px;
  transform: rotate(-3deg);
}

.finance-chart-card .finance-main-icon {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 24px;
}

.finance-chart-card > span:not(.auth-icon) {
  display: inline-block;
  max-width: calc(100% - 78px);
  color: rgba(255,255,255,.66);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.finance-chart-card strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: clamp(32px, 4vw, 50px);
  line-height: .95;
}

.finance-chart-card small {
  display: block;
  margin-top: 8px;
  color: #65f0b2;
  font-size: 14px;
  font-weight: 900;
}

.finance-chart-card svg {
  width: 100%;
  height: 82px;
  margin-top: 16px;
  filter: drop-shadow(0 0 14px rgba(88,255,192,.35));
}

.finance-summary-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: min(620px, 94%);
  margin: -12px auto 0;
  padding: 18px;
  color: #132039;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(242,247,255,.86));
  transform: rotate(-1deg);
}

.finance-summary-card h3 {
  grid-column: 1 / -1;
  color: #132039;
}

.finance-summary-card div {
  position: relative;
  z-index: 2;
  border-left: 1px solid rgba(17,24,39,.12);
  padding-left: 12px;
}

.finance-summary-card div:nth-of-type(1) {
  border-left: 0;
  padding-left: 0;
}

.finance-summary-card span {
  display: block;
  color: #75839b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.finance-summary-card strong {
  display: block;
  margin-top: 6px;
  font-size: 16px;
}

.is-green { color: #16a34a; }
.is-red { color: #e11d48; }

.finance-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .86fr);
  gap: 15px;
}

.finance-price-card,
.finance-goal-card {
  min-height: 160px;
  padding: 18px;
}

.finance-price-card h3,
.finance-goal-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-heading-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 10px;
}

.auth-heading-icon svg {
  width: 18px;
  height: 18px;
}

.finance-price-card p {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  font-size: 13px;
  margin: 14px 0 0;
}

.finance-price-card b {
  color: #65f0b2;
}

.finance-goal-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 14px;
}

.finance-goal-card h3 {
  grid-column: 1 / -1;
}

.auth-goal-ring {
  width: 82px;
  height: 82px;
  color: #42e7a4;
  font-size: 22px;
  background:
    radial-gradient(circle, rgba(8,17,42,.95) 56%, transparent 58%),
    conic-gradient(#3be59b 0 78%, rgba(255,255,255,.13) 78% 100%);
}

.finance-goal-card strong,
.finance-goal-card span {
  position: relative;
  z-index: 2;
  display: block;
}

.finance-goal-card span {
  color: rgba(255,255,255,.66);
  font-size: 12px;
}

.people-scene {
  display: grid;
  grid-template-columns: 190px minmax(240px, 1fr) 190px;
  grid-template-rows: auto auto;
  gap: 16px;
  align-items: center;
  width: min(700px, 100%);
  margin: 0 auto;
}

.people-qr-card,
.people-actions-card {
  padding: 18px;
}

.people-qr-card {
  transform: rotate(-5deg);
}

.people-qr-card span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

.people-qr-card img {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1;
  margin-top: 12px;
  border: 6px solid rgba(255,255,255,.92);
  border-radius: 16px;
  object-fit: cover;
}

.people-profile-card {
  min-height: 450px;
  padding: 26px;
  text-align: center;
  color: #10172d;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(226,238,255,.78));
}

.people-profile-card h3 {
  color: #10172d;
  font-size: 23px;
}

.people-avatar {
  position: relative;
  z-index: 2;
  width: 104px;
  height: 104px;
  margin: 0 auto 16px;
  border: 4px solid rgba(58,145,255,.45);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #cdd8ee 0 18%, transparent 19%),
    radial-gradient(circle at 50% 83%, #cdd8ee 0 33%, transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.84), rgba(223,231,248,.74));
}

.people-profile-card > span {
  display: block;
  color: #657289;
  font-size: 13px;
  font-weight: 800;
  margin: 6px 0 18px;
}

.people-profile-card p,
.people-actions-card p {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.54);
  color: #2c3850;
  font-size: 13px;
  text-align: left;
}

.people-profile-card i,
.people-actions-card i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #dbeafe;
  background: linear-gradient(135deg, var(--auth-primary), var(--auth-primary-2));
  font-style: normal;
}

.people-profile-card button {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 50px;
  margin-top: 18px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--auth-primary), var(--auth-primary-2));
  font-weight: 900;
}

.people-actions-card {
  transform: rotate(5deg);
}

.people-actions-card p {
  color: #fff;
  background: rgba(255,255,255,.075);
}

.suite-orbit {
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(22,38,82,.48), transparent 34%),
    repeating-radial-gradient(circle, transparent 0 34%, rgba(77,151,255,.16) 34.2% 34.5%, transparent 34.8% 50%);
}

.suite-orbit::before,
.suite-orbit::after {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px dashed rgba(84,167,255,.3);
  border-radius: 50%;
}

.suite-orbit::after {
  inset: 24%;
  border-color: rgba(52,211,153,.28);
}

.suite-center {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 210px;
  min-height: 170px;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.suite-center strong {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  line-height: 1;
}

.suite-center span:last-child {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  line-height: 1.35;
}

.suite-node {
  position: absolute;
  z-index: 3;
  width: 126px;
  min-height: 92px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(77,151,255,.3);
  border-radius: 18px;
  background: rgba(10,19,51,.72);
  box-shadow: 0 18px 46px rgba(0,0,0,.32), 0 0 30px color-mix(in srgb, var(--node-color, #1d7cff), transparent 74%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.suite-node .auth-icon {
  --auth-primary: var(--node-color, #1d7cff);
  --auth-primary-2: var(--node-color-2, #704cff);
}

.suite-node strong {
  font-size: 14px;
}

.suite-node-vault { --node-color: #1d7cff; --node-color-2: #704cff; left: 7%; top: 12%; }
.suite-node-finance { --node-color: #12b981; --node-color-2: #e11d48; right: 5%; top: 18%; }
.suite-node-people { --node-color: #2574e8; --node-color-2: #13b889; right: 8%; bottom: 13%; }
.suite-node-iam { --node-color: #704cff; --node-color-2: #1d7cff; left: 10%; bottom: 11%; }
.suite-node-admin { --node-color: #ff2c57; --node-color-2: #1d7cff; left: 50%; top: 2%; transform: translateX(-50%); }

@media (max-width: 1120px) {
  .auth-visual { width: 580px; }
  .auth-feature-grid { gap: 10px; }
  .auth-feature-card { padding: 12px; }
  .auth-two-col { grid-template-columns: 1fr; }
  .auth-list-card { width: 96%; }
  .finance-bottom-grid { grid-template-columns: 1fr; }
  .people-scene { grid-template-columns: minmax(0, 1fr); width: min(360px, 100%); }
  .people-qr-card,
  .people-actions-card { display: none; }
  .people-profile-card { min-height: auto; }
}

/* ─── CENTERED WRAP (device_verify / email_validate) ─────────────────────── */
.auth-wrap-centered {
  grid-template-columns: 1fr;
  display: flex;
  background: var(--c-gray-50);
}

/* ─── STEP ICON (inline step header, eg device verify) ──────────────────── */
.auth-step-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  background: rgba(124,58,237,.1);
  color: var(--c-p-600);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

/* ─── OTP CARD (centered card layout) ────────────────────────────────────── */
.otp-card {
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  padding: 40px 32px;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.otp-card h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--c-gray-900);
  margin-bottom: 6px;
}

.otp-card > p {
  font-size: 14px;
  color: var(--c-gray-500);
  line-height: 1.55;
  margin-bottom: 20px;
}

.otp-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: rgba(124,58,237,.1);
  color: var(--c-p-600);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}

/* ─── OTP 6-DIGIT VARIANT (device verify) ────────────────────────────────── */
.otp-4 { gap: 12px; }
.otp-6 { gap: 8px; }
.otp-6 .dv-otp-input { width: 44px; height: 52px; font-size: 22px; }

.dv-otp-input {
  width: 56px;
  height: 64px;
  border: 1.5px solid var(--c-gray-200);
  border-radius: var(--r-lg);
  background: var(--c-gray-50);
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  color: var(--c-gray-900);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  caret-color: var(--c-p-600);
}

.dv-otp-input:focus {
  border-color: var(--c-p-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}

.dv-otp-input.filled {
  border-color: var(--c-p-400);
  background: var(--c-p-50);
  color: var(--c-p-700);
}

/* ─── PASSWORD INPUT GROUP (input + eye toggle) ──────────────────────────── */
.auth-pass-inputgroup {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-pass-inputgroup .password-input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 14px;
  border: 1.5px solid var(--c-gray-200);
  border-radius: var(--r);
  background: var(--c-gray-50);
  color: var(--c-gray-900);
  font-size: 14px;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

.auth-pass-inputgroup .password-input::placeholder { color: var(--c-gray-400); }

.auth-pass-inputgroup .password-input:focus {
  border-color: var(--c-p-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}

.auth-pass-inputgroup .password-input:hover:not(:focus) { border-color: var(--c-gray-300); }

.password-addon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--c-gray-400);
  border-radius: var(--r-sm);
  cursor: pointer;
  border: none;
  transition: color var(--t-fast), background var(--t-fast);
}

.password-addon:hover { color: var(--c-gray-700); background: var(--c-gray-100); }

/* ─── PASSWORD RULES (collapsed until input focused) ─────────────────────── */
.pwd-rules {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--c-gray-50);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r);
}

.form-group:focus-within > .pwd-rules { display: flex; }

.pwd-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--c-gray-500);
  transition: color var(--t-fast);
}

.pwd-rule .rule-icon {
  color: var(--c-gray-400);
  flex-shrink: 0;
  transition: color var(--t-fast);
}

.pwd-rule.valid { color: var(--c-success); }
.pwd-rule.valid .rule-icon { color: var(--c-success); }

/* ─── SELECT ─────────────────────────────────────────────────────────────── */
.select-input {
  width: 100%;
  height: 44px;
  padding: 0 36px 0 14px;
  border: 1.5px solid var(--c-gray-200);
  border-radius: var(--r);
  background: var(--c-gray-50);
  color: var(--c-gray-900);
  font-size: 14px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239896b8' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
}

.select-input:focus {
  border-color: var(--c-p-500);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}

/* ─── GHOST / LINK BUTTONS ───────────────────────────────────────────────── */
.btn-auth-ghost {
  width: 100%;
  height: 42px;
  background: transparent;
  color: var(--c-gray-600);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r);
  border: 1px solid var(--c-gray-200);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.btn-auth-ghost:hover {
  background: var(--c-gray-50);
  border-color: var(--c-gray-300);
  color: var(--c-gray-900);
}

.btn-auth-link {
  background: transparent;
  border: none;
  color: var(--c-p-600);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.btn-auth-link:hover { text-decoration: underline; }

/* ─── ALERTS ─────────────────────────────────────────────────────────────── */
.auth-alert {
  padding: 10px 14px;
  border-radius: var(--r);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 16px;
  border: 1px solid transparent;
}

.auth-alert-danger {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
}

.auth-alert-success {
  color: #065f46;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.auth-alert-warning {
  color: #92400e;
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.3);
}

/* ─── MODAL ──────────────────────────────────────────────────────────────── */
.nyo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,12,31,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

/* Dead-but-kept card modal. Renamed from .nyo-modal so it stops colliding with
   the centered overlay .nyo-modal (further down) — the leaked max-width:440px
   was capping the roles overlay into a narrow left strip. */
.nyo-modal-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow-xl);
  animation: nyo-modal-in var(--t) ease-out;
}

@keyframes nyo-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nyo-modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.nyo-modal-header h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--c-gray-900);
  margin-bottom: 6px;
}

.nyo-modal-header p {
  font-size: 13px;
  color: var(--c-gray-500);
  line-height: 1.5;
}

.nyo-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: rgba(124,58,237,.1);
  color: var(--c-p-600);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}

/* ─── ONBOARDING / SPACE TYPE PICKER ─────────────────────────────────────── */
.space-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.space-type-card {
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
}

.space-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.space-type-card__body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1.5px solid var(--c-gray-200, #e5e7eb);
  border-radius: var(--r-lg, 12px);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.space-type-card:hover .space-type-card__body {
  border-color: var(--c-p-400, #a78bfa);
}

.space-type-card input[type="radio"]:checked ~ .space-type-card__body {
  border-color: var(--c-p-600, #7c3aed);
  background: rgba(124, 58, 237, .04);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.space-type-card__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--r-md, 8px);
  background: rgba(124, 58, 237, .1);
  color: var(--c-p-600, #7c3aed);
  display: grid;
  place-items: center;
}

.space-type-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}

.space-type-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-gray-900, #111827);
}

.space-type-card__desc {
  font-size: 12px;
  color: var(--c-gray-500, #6b7280);
}

@media (max-width: 540px) {
  .space-type-grid { grid-template-columns: 1fr; }
}

/* ─── ACCOUNT PANEL (dashboard, users, roles) ────────────────────────────── */
.account-panel {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100dvh;
  background: var(--c-gray-50, #f8f7ff);
}

.account-panel__sidebar {
  background: linear-gradient(180deg, #0d0821 0%, #1a1242 60%, #1e1b4b 100%);
  color: var(--c-gray-100, #f0eefc);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-panel__sidebar > header {
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-panel__brand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: #fff;
}

.account-panel__sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-panel__sidebar .nav-item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--c-gray-300, #cbc9e0);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.account-panel__sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.account-panel__sidebar[data-active="dashboard"] .nav-item[data-page="dashboard"],
.account-panel__sidebar[data-active="modules"]   .nav-item[data-page="modules"],
.account-panel__sidebar[data-active="users"]     .nav-item[data-page="users"],
.account-panel__sidebar[data-active="roles"]     .nav-item[data-page="roles"] {
  background: rgba(124, 58, 237, 0.32);
  color: #fff;
}

.account-panel__main {
  padding: 32px 40px;
  overflow: auto;
}

/* ─── DASHBOARD ──────────────────────────────────────────────────────────── */
.account-dashboard__header {
  margin-bottom: 24px;
}

.account-dashboard__header h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.4px;
  margin-bottom: 4px;
}

.muted { color: var(--c-gray-500, #6b6994); font-size: 13px; }
.error { color: var(--c-danger, #ef4444); font-size: 13px; }

.account-dashboard__rewrap-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  margin-bottom: 20px;
}

.account-dashboard__rewrap-banner .warn-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-warning, #f59e0b);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.account-dashboard__rewrap-banner > div { flex: 1; }
.account-dashboard__rewrap-banner strong { font-size: 14px; }
.account-dashboard__rewrap-banner p { font-size: 13px; color: var(--c-gray-600, #4b4970); margin-top: 2px; }

.account-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.module-card {
  background: #fff;
  border: 1px solid var(--c-gray-200, #e4e2f0);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.module-card:hover {
  border-color: var(--c-p-400, #a78bfa);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.module-card.is-inactive {
  opacity: .78;
  background: var(--c-gray-50, #f8f7ff);
}

.module-card header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.module-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.module-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.12);
  color: var(--c-p-600, #7c3aed);
  display: grid;
  place-items: center;
  font-weight: 700;
}

.module-card p {
  font-size: 13px;
  color: var(--c-gray-500, #6b6994);
  line-height: 1.5;
  flex: 1;
}

.module-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--c-gray-100, #f0eefc);
}

.module-card .status {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-gray-600, #4b4970);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.module-card.is-active .status { color: var(--c-success, #10b981); }

/* ─── GENERIC BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn-primary {
  background: var(--c-p-600, #7c3aed);
  color: #fff;
  border-color: var(--c-p-600, #7c3aed);
}
.btn-primary:hover:not(:disabled) { background: var(--c-p-700, #6d28d9); border-color: var(--c-p-700, #6d28d9); }

.btn-ghost {
  background: transparent;
  color: var(--c-gray-700, #343258);
  border-color: var(--c-gray-200, #e4e2f0);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--c-gray-100, #f0eefc);
  border-color: var(--c-gray-300, #cbc9e0);
}

/* ─── SECTION HEADER + TABS ──────────────────────────────────────────────── */
.account-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.account-section__header h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
}

.account-section__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-gray-200, #e4e2f0);
  margin-bottom: 18px;
}

.account-section__tabs .tab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-gray-500, #6b6994);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.account-section__tabs .tab:hover { color: var(--c-gray-800, #1e1c3a); }

.account-section__tabs .tab.active {
  color: var(--c-p-600, #7c3aed);
  border-bottom-color: var(--c-p-600, #7c3aed);
}

.account-section__panel { display: block; }
.account-section__panel[hidden] { display: none; }

/* ─── SPACE SETTINGS (rename + danger zone) ──────────────────────────────── */
.account-card {
  background: #fff;
  border: 1px solid var(--c-gray-200, #e4e2f0);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 18px;
  max-width: 640px;
}
.account-card__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--c-gray-900, #14122b);
}
.account-card .muted { margin: 0 0 14px; }
.account-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.account-card--danger { border-color: var(--c-danger, #ef4444); }
.account-card--danger .account-card__title { color: var(--c-danger, #ef4444); }

.account-space-settings__status { font-size: 13px; color: var(--c-p-600, #7c3aed); font-weight: 600; }
.account-space-settings__warn { font-size: 13px; color: var(--c-gray-700, #34324f); margin: 0 0 14px; }

/* Destructive button — inherits sizing from the shared .btn base; only the
   colors differ. Used on the Space settings danger zone + delete modal. */
.btn-danger {
  background: var(--c-danger, #ef4444);
  color: #fff;
  border: 1px solid var(--c-danger, #ef4444);
}
.btn-danger:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }

/* Delete modal — its OWN overlay root (the shared .nyo-modal class is defined
   twice in this file by two different modal systems, and the card variant
   leaks a fixed width). .space-modal is self-contained; it reuses the
   .nyo-modal__* children for the panel chrome. */
.space-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 16px;
}
.space-modal[hidden] { display: none; }

/* Toast stack (shared ui.js / window.NyoUI.toast) — bottom-right, success=green.
   ui.js ships no CSS of its own, so the visual contract lives here. */
.nyo-toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.nyo-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  color: var(--c-gray-900, #14122b);
  border: 1px solid var(--c-gray-200, #e4e2f0);
  border-left: 4px solid var(--c-gray-300, #cbc9e0);
  box-shadow: var(--shadow-xl);
  transform: translateY(12px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.nyo-toast.show { transform: translateY(0); opacity: 1; }
.nyo-toast.success { border-left-color: #16a34a; }
.nyo-toast.error   { border-left-color: var(--c-danger, #ef4444); }
.nyo-toast.warn    { border-left-color: #d97706; }
.nyo-toast.info    { border-left-color: var(--c-p-600, #7c3aed); }
.nyo-toast-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.nyo-toast.success .nyo-toast-icon { background: #16a34a; }
.nyo-toast.error   .nyo-toast-icon { background: var(--c-danger, #ef4444); }
.nyo-toast.warn    .nyo-toast-icon { background: #d97706; }
.nyo-toast.info    .nyo-toast-icon { background: var(--c-p-600, #7c3aed); }
.nyo-toast-body { flex: 1; min-width: 0; }
.nyo-toast-title { font-size: 13px; font-weight: 700; }
.nyo-toast-msg { font-size: 13px; color: var(--c-gray-700, #34324f); }
.nyo-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-gray-400, #9b99b5);
  font-size: 13px;
  padding: 2px 4px;
}

/* ─── ROLE CAPABILITY EDITOR ─────────────────────────────────────────────── */
.cap-editor { display: flex; flex-direction: column; gap: 14px; }
.cap-group {
  border: 1px solid var(--c-gray-200, #e4e2f0);
  border-radius: 12px;
  overflow: hidden;
}
.cap-group-title {
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--c-gray-600, #4b496b);
  background: var(--c-gray-50, #f8f7ff);
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-gray-200, #e4e2f0);
}
.cap-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 14px;
}
.cap-row + .cap-row { border-top: 1px solid var(--c-gray-100, #f0eefc); }
.cap-label { font-size: 13px; font-weight: 600; color: var(--c-gray-800, #1e1c3a); }
.cap-select {
  min-width: 150px;
  padding: 7px 10px;
  border: 1.5px solid var(--c-gray-200, #e4e2f0);
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  background: #fff; color: var(--c-gray-900, #0d0c1f);
  cursor: pointer;
}
.cap-select:focus { outline: none; border-color: var(--c-p-500, #8b5cf6); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.cap-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.cap-switch input { opacity: 0; width: 0; height: 0; }
.cap-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--c-gray-300, #cbc9e0); border-radius: 999px;
  transition: background .15s ease;
}
.cap-slider::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s ease;
}
.cap-switch input:checked + .cap-slider { background: var(--c-p-500, #8b5cf6); }
.cap-switch input:checked + .cap-slider::before { transform: translateX(18px); }
.role-advanced { margin-top: 4px; }
.role-advanced > summary {
  cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--c-gray-500, #6b6994); padding: 6px 0; list-style: none;
}
.role-advanced > summary::-webkit-details-marker { display: none; }
.role-advanced > summary::before { content: "▸ "; }
.role-advanced[open] > summary::before { content: "▾ "; }

/* Per-module role row in the invite dialog */
.invite-mod-row { display: flex; align-items: center; gap: 8px; }
.invite-mod-name { flex: 1; }
.invite-mod-role {
  min-width: 130px; padding: 6px 8px;
  border: 1.5px solid var(--c-gray-200, #e4e2f0); border-radius: 8px;
  font-size: 13px; background: #fff; color: var(--c-gray-900, #0d0c1f);
}
.invite-mod-role:disabled { opacity: .45; }

/* Copyable invite link (shown when delivery is unconfigured / invite is pending) */
.invite-link-result { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-gray-200, #e4e2f0); }
.invite-link-row { display: flex; align-items: center; gap: 8px; }
.invite-link-row input {
  flex: 1; padding: 8px 10px; font-size: 13px;
  border: 1.5px solid var(--c-gray-200, #e4e2f0); border-radius: 8px;
  background: var(--c-gray-50, #f6f5fb); color: var(--c-gray-900, #0d0c1f);
}
.invite-link-row .btn { white-space: nowrap; }

/* ─── ROLE PER-MODULE ACCORDIONS ─────────────────────────────────────────── */
.cap-mod-head { font-size: 12px; font-weight: 700; color: var(--c-gray-600, #4b496b); margin: 10px 0 4px; }
.cap-acc { border: 1px solid var(--c-gray-200, #e4e2f0); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.cap-acc > summary {
  cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 700;
  background: var(--c-gray-50, #f8f7ff); list-style: none;
  color: var(--c-gray-800, #1e1c3a);
}
.cap-acc > summary::-webkit-details-marker { display: none; }
.cap-acc > summary::before { content: "▸ "; color: var(--c-gray-400, #9b99b5); }
.cap-acc[open] > summary::before { content: "▾ "; }
.cap-acc-body { padding: 2px 4px 6px; }
.cap-acc-body .cap-row { padding: 7px 10px; }
.cap-acc-body .cap-row + .cap-row { border-top: 1px solid var(--c-gray-100, #f0eefc); }
.adv-block { font-size: 12px; margin-bottom: 8px; }
.adv-block b { display: block; color: var(--c-gray-600, #4b496b); margin-bottom: 3px; }
.adv-block code { font-size: 11px; }

/* ─── TABLE ──────────────────────────────────────────────────────────────── */
.table {
  width: 100%;
  background: #fff;
  border: 1px solid var(--c-gray-200, #e4e2f0);
  border-radius: 12px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-gray-500, #6b6994);
  padding: 12px 16px;
  background: var(--c-gray-50, #f8f7ff);
  border-bottom: 1px solid var(--c-gray-200, #e4e2f0);
}

.table tbody td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--c-gray-100, #f0eefc);
  color: var(--c-gray-800, #1e1c3a);
}

.table tbody tr:last-child td { border-bottom: none; }

/* ─── ROLES GRID ─────────────────────────────────────────────────────────── */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.role-card {
  background: #fff;
  border: 1px solid var(--c-gray-200, #e4e2f0);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.role-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.role-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-gray-100, #f0eefc);
  color: var(--c-gray-600, #4b6994);
}

.role-card details summary {
  font-size: 12px;
  color: var(--c-gray-500, #6b6994);
  cursor: pointer;
}

.role-card details ul {
  list-style: none;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.role-card details code {
  font-size: 11px;
  background: var(--c-gray-100, #f0eefc);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--c-gray-700, #343258);
}

.role-card footer {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* ─── DIALOG ─────────────────────────────────────────────────────────────── */
.dialog {
  border: none;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-xl);
  max-width: 480px;
  width: 100%;
  /* showModal() promotes the dialog to the top layer (above everything), but
     some engines drop the UA margin:auto centering once author CSS sets width,
     leaving it pinned to the top edge. Re-assert dead-center on the viewport. */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.dialog::backdrop { background: rgba(13, 12, 31, 0.45); }

.dialog form { display: flex; flex-direction: column; gap: 14px; }
.dialog h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }

.dialog label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-gray-700, #343258);
}

.dialog input[type="text"], .dialog input[type="email"], .dialog select {
  padding: 10px 12px;
  border: 1.5px solid var(--c-gray-200, #e4e2f0);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--c-gray-900, #0d0c1f);
}

.dialog input:focus, .dialog select:focus {
  outline: none;
  border-color: var(--c-p-500, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

.dialog fieldset {
  border: 1px solid var(--c-gray-200, #e4e2f0);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dialog fieldset legend {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-gray-500, #6b6994);
  padding: 0 6px;
}

.dialog fieldset label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.dialog menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin-top: 8px;
}

/* ─── NYO MODAL (centered, vault-style) ──────────────────────────────────── */
.nyo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.nyo-modal[hidden] { display: none; }

.nyo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 12, 31, 0.45);
  backdrop-filter: blur(4px);
}

.nyo-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nyo-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-gray-200, #e4e2f0);
}

.nyo-modal__header h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.2px;
}

.nyo-modal__close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--c-gray-500, #6b6994);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.nyo-modal__close:hover { background: var(--c-gray-100, #f0eefc); color: var(--c-gray-900, #0d0c1f); }

.nyo-modal__body {
  padding: 20px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nyo-modal__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--c-gray-200, #e4e2f0);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-gray-500, #6b6994);
}

.form-row input[type="text"] {
  padding: 10px 12px;
  border: 1.5px solid var(--c-gray-200, #e4e2f0);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--c-gray-900, #0d0c1f);
}

.form-row input[type="text"]:focus {
  outline: none;
  border-color: var(--c-p-500, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

/* ─── PERMISSION TREE ────────────────────────────────────────────────────── */
.perm-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--c-gray-200, #e4e2f0);
  border-radius: 12px;
  padding: 8px;
  background: var(--c-gray-50, #f8f7ff);
}

.perm-group {
  background: #fff;
  border: 1px solid var(--c-gray-200, #e4e2f0);
  border-radius: 10px;
  overflow: hidden;
}

.perm-group__summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-gray-50, #f8f7ff);
  user-select: none;
}

.perm-group__summary::-webkit-details-marker { display: none; }
.perm-group[open] .perm-group__caret { transform: rotate(90deg); }
.perm-group__caret {
  display: inline-block;
  transition: transform .15s ease;
  color: var(--c-gray-500, #6b6994);
  font-size: 11px;
}

.perm-group__title { font-weight: 700; font-size: 14px; flex: 1; }

.perm-group__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-gray-700, #343258);
  cursor: pointer;
}

.perm-group__body { padding: 8px 12px 12px; }

.perm-sub { padding: 8px 0; }
.perm-sub + .perm-sub { border-top: 1px dashed var(--c-gray-200, #e4e2f0); }

.perm-sub__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-gray-500, #6b6994);
  margin-bottom: 6px;
}

.perm-sub__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.perm-item {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background .1s ease;
}

.perm-item:hover { background: var(--c-gray-50, #f8f7ff); }

.perm-item__code { color: var(--c-gray-900, #0d0c1f); }
.perm-item__code code {
  font-size: 12px;
  background: var(--c-gray-100, #f0eefc);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--c-gray-700, #343258);
}

.perm-item__desc { color: var(--c-gray-500, #6b6994); font-size: 12px; }

@media (max-width: 600px) {
  .perm-item { grid-template-columns: 18px 1fr; }
  .perm-item__desc { grid-column: 2; }
}

/* ─── RESPONSIVE OVERRIDES ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .auth-image-inner { padding: 32px 24px; }
  .auth-image h2 { font-size: 26px; }
  .dv-otp-input { width: 48px; height: 56px; font-size: 22px; }
  .otp-card { padding: 28px 20px; }
}

@media (max-width: 380px) {
  .dv-otp-input { width: 42px; height: 50px; font-size: 19px; }
}

/* ─── SECURITY PAGE (master-password / 2FA) ──────────────────────────────── */
.sec-app-qr {
  margin: 8px 0 12px;
  padding: 12px;
  border: 1px dashed var(--c-gray-300, #d1d5db);
  border-radius: 8px;
  background: var(--c-gray-50, #f8f7ff);
}
.sec-app-otpauth-link {
  font-weight: 600;
  color: var(--c-p-600, #6d28d9);
  word-break: break-all;
}
.sec-app-secret {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  background: var(--c-gray-100, #f0eefc);
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--c-gray-800, #1f2937);
  word-break: break-all;
}
.sec-app-on { font-weight: 600; color: var(--c-gray-800, #1f2937); margin: 0 0 12px; }
.sec-backup-codes {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.9;
  background: var(--c-gray-900, #0d0c1f);
  color: #e5e7eb;
  padding: 14px 16px;
  border-radius: 8px;
  margin: 8px 0 12px;
  white-space: pre;
  overflow-x: auto;
  letter-spacing: 1px;
}
.sec-card-highlight {
  box-shadow: 0 0 0 2px var(--c-p-500, #7c3aed) inset;
  transition: box-shadow .3s ease;
}

/* ── Accept-invite page ──────────────────────────────────────────────────── */
.accept-invite .invite-expiry { font-size: 13px; }
.accept-invite .invite-whoami { font-size: 13px; margin: 4px 0 12px; }
.accept-invite .invite-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}
.accept-invite .invite-actions .btn { flex: 0 0 auto; }
.accept-invite .invite-session { margin: 8px 0; }
.accept-invite .invite-back { margin: 14px 0 0; font-size: 13px; }
.accept-invite .invite-back a { color: var(--c-p-600, #7c3aed); text-decoration: none; }
.accept-invite .invite-back a:hover { text-decoration: underline; }