/* assets/styles/app.css
 * Norvi onboarding component classes.
 * Design tokens (Norvi teal brand + ported steppe/köl/semantic/fonts/space/radius/shadow/motion)
 * and the nvrise/nvpulse keyframes live in tokens.css. ONLY the authoritative registry class
 * names appear here. No new block names; sub-parts use BEM under an existing block. No inline styles.
 */

/* ----- font registration (Golos Text and JetBrains Mono are used by component classes below) ----- */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/golos-text-600-8SltrTN.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jetbrains-mono-400-zjT1pI9.woff2") format("woff2"); }

/* ----- layout / typography ----- */
.nv-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-8, 2rem);
  min-height: 100vh;
  max-width: 1180px;
  margin-inline: auto;
  padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
}

.nv-aside {
  position: sticky;
  top: var(--space-8, 2rem);
  align-self: start;
}

.nv-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nv-content {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  flex: 1 1 auto;
  animation: nvrise var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.nv-eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tawny-600);
  margin-bottom: var(--space-3, 0.75rem);
}

.nv-h1 {
  font-family: var(--font-display, "Golos Text", sans-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  font-weight: 650;
  color: var(--steppe-900, #1a1f1d);
  margin-bottom: var(--space-3, 0.75rem);
}

.nv-lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--steppe-600, #586066);
  margin-bottom: var(--space-7, 1.75rem);
}

.nv-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);
}

.nv-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4, 1rem);
}

/* ----- brand / rail ----- */
.nv-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  font-family: var(--font-display, "Golos Text", sans-serif);
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--steppe-900, #1a1f1d);
  text-decoration: none;
}

.nv-logo__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md, 0.625rem);
  background: var(--tawny-500);
  color: #fff;
  font-weight: 750;
}

.nv-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);
  padding: var(--space-6, 1.5rem);
  border: 1px solid var(--steppe-200, #e3e6e4);
  border-radius: var(--radius-lg, 0.875rem);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(16, 24, 20, 0.06));
}

.nv-rail__head {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steppe-500, #79817f);
}

.nv-rail__step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.nv-rail__num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.875rem;
  font-weight: 600;
  border: 1.5px solid var(--steppe-300, #cfd4d2);
  color: var(--steppe-500, #79817f);
  background: var(--surface, #fff);
  transition: background var(--dur-fast, 120ms) ease,
    border-color var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease;
}

.nv-rail__label {
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--steppe-500, #79817f);
}

.nv-rail__step--done .nv-rail__num {
  background: var(--tawny-500);
  border-color: var(--tawny-500);
  color: #fff;
}

.nv-rail__step--done .nv-rail__label {
  color: var(--steppe-700, #424946);
}

.nv-rail__step--active .nv-rail__num {
  border-color: var(--tawny-500);
  color: var(--tawny-700);
  background: var(--tawny-50);
  box-shadow: var(--shadow-focus);
}

.nv-rail__step--active .nv-rail__label {
  color: var(--steppe-900, #1a1f1d);
  font-weight: 650;
}

.nv-rail__step--todo .nv-rail__num,
.nv-rail__step--todo .nv-rail__label {
  opacity: 0.7;
}

.nv-rail__foot {
  margin-top: var(--space-3, 0.75rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--steppe-200, #e3e6e4);
  font-size: 0.8125rem;
  color: var(--steppe-500, #79817f);
}

/* ----- form ----- */
.nv-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.nv-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--steppe-800, #2b302e);
}

.nv-input,
.nv-select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--steppe-900, #1a1f1d);
  background: var(--surface, #fff);
  border: 1.5px solid var(--steppe-300, #cfd4d2);
  border-radius: var(--radius-md, 0.625rem);
  padding: 0.75rem 0.875rem;
  transition: border-color var(--dur-fast, 120ms) ease, box-shadow var(--dur-fast, 120ms) ease;
}

.nv-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--steppe-500, #79817f) 50%),
    linear-gradient(135deg, var(--steppe-500, #79817f) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) center, calc(100% - 0.85rem) center;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.nv-input::placeholder {
  color: var(--steppe-400, #a6aca9);
}

.nv-input:focus,
.nv-select:focus {
  outline: none;
  border-color: var(--tawny-500);
  box-shadow: var(--shadow-focus);
}

.nv-input[aria-invalid="true"],
.nv-select[aria-invalid="true"] {
  border-color: var(--danger-500, #d64545);
}

.nv-input--mono {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.04em;
}

.nv-field__hint {
  font-size: 0.8125rem;
  color: var(--steppe-500, #79817f);
}

.nv-field__error {
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--danger-600, #b83030);
}

.nv-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3, 0.75rem);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--steppe-700, #424946);
}

.nv-check input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--tawny-500);
}

/* ----- buttons ----- */
.nv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0.8125rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md, 0.625rem);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast, 120ms) ease, border-color var(--dur-fast, 120ms) ease,
    color var(--dur-fast, 120ms) ease, box-shadow var(--dur-fast, 120ms) ease,
    transform var(--dur-fast, 120ms) ease;
}

.nv-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.nv-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nv-btn--primary {
  background: var(--tawny-500);
  color: #fff;
}

.nv-btn--primary:hover {
  background: var(--tawny-600);
}

.nv-btn--primary:active {
  background: var(--tawny-700);
  transform: translateY(1px);
}

.nv-btn--ghost {
  background: var(--surface, #fff);
  border-color: var(--steppe-300, #cfd4d2);
  color: var(--steppe-800, #2b302e);
}

.nv-btn--ghost:hover {
  border-color: var(--steppe-400, #a6aca9);
  background: var(--steppe-50, #f6f7f6);
}

.nv-btn--link {
  background: none;
  border: none;
  padding: 0;
  color: var(--tawny-600);
  font-weight: 600;
}

.nv-btn--link:hover {
  color: var(--tawny-700);
  text-decoration: underline;
}

.nv-btn-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

/* ----- cards / callouts ----- */
.nv-card {
  border: 1px solid var(--steppe-200, #e3e6e4);
  border-radius: var(--radius-lg, 0.875rem);
  background: var(--surface, #fff);
  padding: var(--space-6, 1.5rem);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(16, 24, 20, 0.06));
}

.nv-card__title {
  font-family: var(--font-display, "Golos Text", sans-serif);
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--steppe-900, #1a1f1d);
}

.nv-card__subtitle {
  font-size: 0.875rem;
  color: var(--steppe-500, #79817f);
  margin-top: var(--space-1, 0.25rem);
}

.nv-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3, 0.75rem);
  align-items: start;
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-radius: var(--radius-md, 0.625rem);
  border: 1px solid var(--steppe-200, #e3e6e4);
  background: var(--steppe-50, #f6f7f6);
}

.nv-callout--info {
  border-color: var(--kol-200, #c3d9ef);
  background: var(--kol-50, #eef5fc);
}

.nv-callout--success {
  border-color: var(--tawny-200);
  background: var(--tawny-50);
}

.nv-callout__icon {
  font-size: 1.25rem;
  line-height: 1.4;
}

.nv-callout--info .nv-callout__icon {
  color: var(--kol-600, #2f6fb0);
}

.nv-callout--success .nv-callout__icon {
  color: var(--tawny-600);
}

.nv-callout__body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--steppe-700, #424946);
}

/* ----- choice UI ----- */
.nv-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3, 0.75rem);
}

.nv-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  text-align: left;
  padding: var(--space-4, 1rem);
  border: 1.5px solid var(--steppe-300, #cfd4d2);
  border-radius: var(--radius-md, 0.625rem);
  background: var(--surface, #fff);
  cursor: pointer;
  transition: border-color var(--dur-fast, 120ms) ease, box-shadow var(--dur-fast, 120ms) ease,
    background var(--dur-fast, 120ms) ease;
}

.nv-tile:hover {
  border-color: var(--tawny-400);
}

.nv-tile--active {
  border-color: var(--tawny-500);
  background: var(--tawny-50);
  box-shadow: var(--shadow-focus);
}

.nv-tile__icon {
  font-size: 1.5rem;
  color: var(--tawny-600);
}

.nv-tile__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--steppe-800, #2b302e);
}

.nv-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

/* .nv-chip is reset as a button so a <button class="nv-chip"> deposit preset
 * (C3 amount-presets) renders identically to a non-button chip. */
.nv-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border: 1.5px solid var(--steppe-300, #cfd4d2);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface, #fff);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1;
  color: var(--steppe-700, #424946);
  text-align: center;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--dur-fast, 120ms) ease, background var(--dur-fast, 120ms) ease,
    color var(--dur-fast, 120ms) ease, box-shadow var(--dur-fast, 120ms) ease;
}

.nv-chip:hover {
  border-color: var(--tawny-400);
}

.nv-chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.nv-chip--active {
  border-color: var(--tawny-500);
  background: var(--tawny-500);
  color: #fff;
}

.nv-toggle-group {
  display: inline-flex;
  gap: var(--space-2, 0.5rem);
}

.nv-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 0.625rem 1rem;
  border: 1.5px solid var(--steppe-300, #cfd4d2);
  border-radius: var(--radius-md, 0.625rem);
  background: var(--surface, #fff);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--steppe-700, #424946);
  cursor: pointer;
  transition: border-color var(--dur-fast, 120ms) ease, background var(--dur-fast, 120ms) ease,
    color var(--dur-fast, 120ms) ease;
}

.nv-toggle:hover {
  border-color: var(--tawny-400);
}

.nv-toggle--active {
  border-color: var(--tawny-500);
  background: var(--tawny-50);
  color: var(--tawny-700);
  box-shadow: var(--shadow-focus);
}

/* ----- OTP (C3 otp-input contract: .nv-otp wrapper > .nv-otp__source + .nv-otp__boxes > 6×.nv-otp__box) ----- */
.nv-otp {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

/* The real Symfony code field: visually hidden but focusable/submittable.
 * The otp-input controller mirrors box entry into it. */
.nv-otp__source {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nv-otp__boxes {
  display: flex;
  gap: var(--space-3, 0.75rem);
}

.nv-otp__box {
  width: 3.25rem;
  height: 3.75rem;
  text-align: center;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--steppe-900, #1a1f1d);
  border: 1.5px solid var(--steppe-300, #cfd4d2);
  border-radius: var(--radius-md, 0.625rem);
  background: var(--surface, #fff);
  transition: border-color var(--dur-fast, 120ms) ease, box-shadow var(--dur-fast, 120ms) ease;
}

.nv-otp__box:focus {
  outline: none;
  border-color: var(--tawny-500);
  box-shadow: var(--shadow-focus);
}

/* ----- upload ----- */
.nv-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  text-align: center;
  padding: var(--space-7, 1.75rem) var(--space-5, 1.25rem);
  border: 2px dashed var(--steppe-300, #cfd4d2);
  border-radius: var(--radius-lg, 0.875rem);
  background: var(--steppe-50, #f6f7f6);
  cursor: pointer;
  transition: border-color var(--dur-fast, 120ms) ease, background var(--dur-fast, 120ms) ease;
}

.nv-dropzone:hover {
  border-color: var(--tawny-400);
  background: var(--tawny-50);
}

.nv-dropzone--done {
  border-style: solid;
  border-color: var(--tawny-500);
  background: var(--tawny-50);
}

/* Drag-highlight state toggled by the file-upload controller
 * (data-file-upload-drag-class="nv-dropzone--drag" on dragover, removed on dragleave/drop). */
.nv-dropzone--drag {
  border-color: var(--tawny-500);
  background: var(--tawny-100);
  box-shadow: var(--shadow-focus);
}

.nv-dropzone__icon {
  font-size: 2rem;
  color: var(--tawny-600);
}

.nv-dropzone__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--steppe-800, #2b302e);
}

.nv-dropzone__meta {
  font-size: 0.8125rem;
  color: var(--steppe-500, #79817f);
}

/* JS-populated chosen-filename/size line (file-upload "hint" target, C3);
 * distinct from .nv-dropzone__meta (static guidance text). Empty until a file is picked. */
.nv-dropzone__hint {
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--tawny-700);
}

.nv-dropzone__hint:empty {
  display: none;
}

/* ----- transfer details / done ----- */
.nv-transfer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--steppe-200, #e3e6e4);
  border-radius: var(--radius-lg, 0.875rem);
  overflow: hidden;
  background: var(--surface, #fff);
}

.nv-transfer__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-bottom: 1px solid var(--steppe-200, #e3e6e4);
}

.nv-transfer__row:last-child {
  border-bottom: none;
}

.nv-transfer__label {
  font-size: 0.875rem;
  color: var(--steppe-500, #79817f);
}

.nv-transfer__value {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--steppe-900, #1a1f1d);
  text-align: right;
  word-break: break-all;
}

.nv-transfer__note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--steppe-500, #79817f);
  margin-top: var(--space-3, 0.75rem);
}

.nv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--steppe-100, #edefee);
  color: var(--steppe-600, #586066);
}

.nv-badge--success {
  background: var(--tawny-100);
  color: var(--tawny-700);
}

.nv-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-8, 2rem) 0;
}

.nv-done__icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--tawny-100);
  color: var(--tawny-600);
  font-size: 2.25rem;
  animation: nvpulse var(--dur-slow, 420ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

/* ----- footer nav ----- */
.nv-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  margin-top: var(--space-8, 2rem);
  padding: var(--space-4, 1rem) 0;
  border-top: 1px solid var(--steppe-200, #e3e6e4);
  background: var(--surface, #fff);
}

.nv-nav__group {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

/* ----- icon helper ----- */
.ph {
  font-family: "Phosphor", sans-serif;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  speak: none;
  -webkit-font-smoothing: antialiased;
}

/* ----- responsive: rail hidden under 820px (parity with tokens.css breakpoint) ----- */
@media (max-width: 820px) {
  .nv-shell {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5, 1.25rem) var(--space-4, 1rem);
  }

  .nv-aside {
    display: none;
  }

  .nv-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .nv-otp__boxes {
    gap: var(--space-2, 0.5rem);
  }

  .nv-otp__box {
    width: 2.75rem;
    height: 3.25rem;
    font-size: 1.25rem;
  }
}

/* ============================================================
   Cabinet (slice 2) — shell, KPIs, cards, states
   ============================================================ */
.nv-cab {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
    background: var(--steppe-25);
    color: var(--steppe-800);
}
.nv-cab-rail {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #fff;
    border-right: 1px solid var(--steppe-100);
    padding: 22px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.nv-cab-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; padding: 6px 8px; }
.nv-cab-logo__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--tawny-500); color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 17px;
}
.nv-cab-logo__word { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--steppe-900); }
.nv-cab-nav { display: flex; flex-direction: column; gap: 3px; }
.nv-cab-nav__item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    color: var(--steppe-600); text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: background var(--dur-fast) var(--ease-out);
}
.nv-cab-nav__item:hover { background: var(--steppe-50); }
.nv-cab-nav__item--active { background: var(--tawny-50); color: var(--tawny-700); font-weight: 600; }
.nv-cab-nav__item .ph { font-size: 19px; }
.nv-cab-funds { margin-top: auto; background: var(--steppe-900); border-radius: 14px; padding: 18px; color: #fff; }
.nv-cab-funds__label { font-size: 12px; color: var(--steppe-400); margin-bottom: 4px; }
.nv-cab-funds__value { font-family: var(--font-mono); font-weight: 600; font-size: 22px; margin-bottom: 14px; }
.nv-cab-funds__cta { width: 100%; }

.nv-cab-main { display: flex; flex-direction: column; min-height: 100vh; }
.nv-cab-topbar {
    height: 64px; flex: none;
    display: flex; align-items: center; gap: 20px;
    padding: 0 32px;
    background: rgba(251, 250, 247, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--steppe-100);
    position: sticky; top: 0; z-index: 20;
}
.nv-cab-topbar__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--steppe-900); margin: 0; }
.nv-cab-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nv-cab-chip {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--steppe-200); border-radius: 10px; padding: 8px 14px;
}
.nv-cab-chip__label { font-size: 12px; color: var(--steppe-500); }
.nv-cab-chip__value { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--steppe-900); }
.nv-cab-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 999px;
    background: linear-gradient(135deg, var(--tawny-400), var(--tawny-600));
    color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.nv-cab-btn {
    border: none; cursor: pointer; border-radius: 10px; padding: 9px 16px;
    font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
    transition: background var(--dur-fast) var(--ease-out);
}
.nv-cab-btn--primary { background: var(--tawny-500); color: #fff; }
.nv-cab-btn--primary:hover { background: var(--tawny-600); }
.nv-cab-btn--ghost { background: #fff; border: 1px solid var(--steppe-200); color: var(--steppe-700); }
.nv-cab-btn--ghost:hover { background: var(--steppe-50); }

.nv-cab-content { flex: 1; overflow-y: auto; padding: 32px; }
.nv-scroll { overflow-y: auto; }
.nv-cab-page { max-width: 1180px; margin: 0 auto; }
.nv-cab-greeting { display: flex; flex-direction: column; margin-bottom: 24px; }
.nv-cab-greeting__hi { font-size: 14px; color: var(--steppe-500); }
.nv-cab-greeting__name { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--steppe-900); }

.nv-cab-card { background: #fff; border: 1px solid var(--steppe-100); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-sm); }
.nv-cab-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.nv-cab-kpi__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--steppe-500); margin-bottom: 10px; }
.nv-cab-kpi__value { font-family: var(--font-mono); font-weight: 600; font-size: 24px; color: var(--steppe-900); }
.nv-cab-kpi__delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12.5px; font-weight: 600; }
.nv-cab-kpi__sub { margin-top: 8px; font-size: 12.5px; color: var(--steppe-500); }
.nv-cab-kpi__link { margin-top: 8px; display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--kol-600); text-decoration: none; }
.nv-cab-accent { color: var(--tawny-600); }
.nv-cab-success { color: var(--success-700); }
.nv-cab-up { color: var(--success-700); }

.nv-cab-state { max-width: 460px; margin: 64px auto; text-align: center; }
.nv-cab-state__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 18px;
    background: var(--tawny-50); color: var(--tawny-600); margin-bottom: 22px;
}
.nv-cab-state__icon .ph { font-size: 36px; }
.nv-cab-state__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--steppe-900); margin: 0 0 8px; }
.nv-cab-state__body { font-size: 14.5px; line-height: 1.6; color: var(--steppe-600); margin: 0 auto; }

@media (max-width: 820px) {
    .nv-cab { grid-template-columns: 1fr; display: block; }
    .nv-cab-rail { display: none; }
    .nv-cab-content { padding: 18px; }
    .nv-cab-kpis { grid-template-columns: 1fr 1fr; }
}

/* ---- Overview dashboard ---- */
.nv-cab-grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 16px; }
.nv-cab-grid-auto { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; }
.nv-cab-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.nv-cab-card__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--steppe-900); margin: 0; }
.nv-cab-card__caption { font-size: 12.5px; color: var(--steppe-500); }
.nv-cab-card__link { font-size: 12.5px; font-weight: 600; color: var(--kol-600); text-decoration: none; }
.nv-cab-block { width: 100%; margin-top: 18px; justify-content: center; display: inline-flex; }
.nv-cab-mono { font-family: var(--font-mono); font-weight: 600; color: var(--steppe-800); }

.nv-cab-chart { height: 180px; display: flex; align-items: flex-end; gap: 8px; }
.nv-cab-chart__bar { flex: 1; background: var(--tawny-400); border-radius: 5px 5px 0 0; min-height: 4px; }

.nv-cab-alloc { display: flex; align-items: center; gap: 24px; }
.nv-cab-donut { flex: none; width: 130px; height: 130px; border-radius: 999px; position: relative; }
.nv-cab-donut__hole { position: absolute; inset: 20px; background: #fff; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nv-cab-donut__num { font-family: var(--font-mono); font-weight: 600; font-size: 18px; color: var(--steppe-900); }
.nv-cab-donut__cap { font-size: 10.5px; color: var(--steppe-500); }
.nv-cab-legend { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.nv-cab-legend__row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.nv-cab-legend__dot { width: 9px; height: 9px; border-radius: 3px; }
.nv-cab-legend__label { flex: 1; color: var(--steppe-600); }
.nv-cab-legend__pct { font-family: var(--font-mono); color: var(--steppe-800); }

.nv-cab-deflist { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.nv-cab-deflist > div { display: flex; justify-content: space-between; }
.nv-cab-deflist > div > span:first-child { color: var(--steppe-500); }
.nv-cab-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.nv-cab-pill--on { background: var(--success-50); color: var(--success-700); }

.nv-cab-acts { display: flex; flex-direction: column; }
.nv-cab-act { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--steppe-100); }
.nv-cab-act:last-child { border-bottom: 0; }
.nv-cab-act__icon { display: inline-flex; width: 32px; height: 32px; border-radius: 8px; align-items: center; justify-content: center; }
.nv-cab-act__icon--success { background: var(--success-50); color: var(--success-700); }
.nv-cab-act__icon--tawny { background: var(--tawny-50); color: var(--tawny-700); }
.nv-cab-act__icon--kol { background: var(--kol-50); color: var(--kol-600); }
.nv-cab-act__icon--steppe { background: var(--steppe-100); color: var(--steppe-600); }
.nv-cab-act__icon--danger { background: var(--danger-50); color: var(--danger-700); }
.nv-cab-act__body { flex: 1; }
.nv-cab-act__label { font-size: 13.5px; font-weight: 500; color: var(--steppe-800); }
.nv-cab-act__date { font-size: 12px; color: var(--steppe-500); }
.nv-cab-act__amt { font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; color: var(--steppe-800); }

.nv-cab-empty { text-align: center; padding: 48px 32px; }
.nv-cab-empty .nv-cab-state__icon { margin: 0 auto 22px; }
.nv-cab-empty__cta { display: flex; gap: 10px; justify-content: center; margin-top: 24px; }

@media (max-width: 820px) {
    .nv-cab-grid-2, .nv-cab-grid-auto { grid-template-columns: 1fr; }
}