/* ============================================================
   base.css — reset, page chrome (body/blobs/app/sidebar/topbar)
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- D-01 · tabular-money enforcement (DS-level) ----------
   Money/numeric values render with tabular (fixed-width) figures so columns
   and balances stop jittering across all money screens at once. Деньги
   священны (принцип 4). ADDITIVE: glyph-alignment only — does NOT change
   font-size, weight, family, or layout (those stay in components.css). Screens
   must not override this back to proportional figures. */
.balance-amount,
.stat-value,
.tr-amount,
.fav-value,
.list-total,
.sv-bundle,
.id-mono,
.cell-mono {
  font-variant-numeric: tabular-nums;
}

/* ---------- decorative aurora blobs ---------- */
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(var(--blur-blob));
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 620px; height: 620px;
  background: var(--blob-purple);
  top: -240px; right: -180px;
  opacity: 0.55;
}
body::after {
  width: 480px; height: 480px;
  background: var(--blob-pink);
  bottom: -200px; left: 280px;
  opacity: 0.4;
}
.blob-3 {
  position: fixed;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: var(--blob-amber);
  filter: blur(var(--blur-blob));
  bottom: -120px; right: 10%;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* ---------- app shell ---------- */
.app {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
  padding: 18px;
  gap: 18px;
}

/* ---------- sidebar (sticky glass column) ---------- */
.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--surface);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-md);
  height: calc(100vh - 36px);
  position: sticky;
  top: 18px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.logo-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--grad-logo);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-on-accent);
  font-weight: 800;
  font-size: var(--fs-base);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}
.logo-text {
  font-weight: 800;
  font-size: var(--fs-base);
  letter-spacing: 0.06em;
  color: var(--text);
}

.nav-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  margin-right: -8px;
  padding-right: 8px;
}

.nav-section {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 14px 12px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  position: relative;
  text-decoration: none;
}
.nav-item:hover {
  background: rgba(79, 70, 229, 0.05);
  color: var(--text);
}
.nav-item.active {
  background: var(--accent-grad);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-accent);
}
.nav-item.active .nav-icon { color: var(--text-on-accent); }
.nav-icon {
  width: 18px; height: 18px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.nav-badge {
  margin-left: auto;
  background: var(--text);
  color: var(--text-on-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  min-width: 20px;
  text-align: center;
}
.nav-item.active .nav-badge {
  background: rgba(255, 255, 255, 0.25);
}

/* sidebar grouping separator (e.g. above bottom-anchored Settings link) */
.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 4px;
}

.user-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 8px 4px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
.user-avatar-mini {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grad-avatar);
  color: #6D28D9;
  font-size: var(--fs-xs);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.user-info { min-width: 0; flex: 1; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text); }
.user-role { font-size: var(--fs-xs); color: var(--text-faint); }

/* ---------- main column ---------- */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-gap);
}

/* ---------- topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--surface);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.search {
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-faint);
  font-size: var(--fs-base);
}
.search svg { width: 16px; height: 16px; flex-shrink: 0; }
.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text);
}
.search-input::placeholder { color: var(--text-faint); }
.kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.topbar-spacer { flex: 1; }

/* ============================================================
   AUTH SHELL — alternative page chrome (no .app / .sidebar)
   Used by screens that live outside the admin layout: login, totp,
   totp-setup, forgot. A single centered glass card sits on the
   aurora-blob background (body::before / body::after / .blob-3).
   ============================================================ */
.auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 32px;
  gap: 28px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.auth-card.wide { max-width: 520px; }