/* mvr.rip UNITY — every page shares one identical composition.
   Loads after finish.css, before mobile.css. This is the product skin. */

:root {
  --u-ff: "Inter", ui-sans-serif, system-ui, sans-serif;
  --u-nav: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --u-fm: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --u-ink: #f3f1ea;
  --u-mute: #9a968c;
  --u-dim: #6f6c65;
  --u-line: rgba(255, 255, 255, 0.08);
  --u-line-h: rgba(255, 255, 255, 0.14);
  --u-accent: var(--accent);
  --u-accent-2: var(--accent);
  --u-surface: #1a1d21;
  --u-raised: #23272c;
  --u-deep: #0d0f11;
  --u-frame: 980px;
  --u-space: 16px;
  --u-gap: 12px;
  --u-r-hero: 18px;
  --u-r-panel: 16px;
  --u-r-tile: 14px;
  --u-r-ctrl: 12px;
  --u-hero-pad: 26px;
  --u-panel-h: 48px;
  --u-ctrl-h: 42px;
  --u-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  --u-btn: linear-gradient(180deg, var(--accent) 0%, var(--accent) 52%, var(--accent-deep) 100%);
  --u-btn-h: linear-gradient(180deg, var(--accent) 0%, var(--accent) 52%, var(--accent) 100%);
}

@keyframes uRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes uGlow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ── Frame ─────────────────────────────────────────────── */
body .app .content {
  width: 100% !important;
  max-width: calc(var(--u-frame) + 40px) !important;
  margin-inline: auto !important;
  padding: 20px 20px 52px !important;
  box-sizing: border-box !important;
}
body .db-page,
body .sip-page,
body .rt-page,
body .dep-page,
body .cdr-page,
body .settings-stack,
body .p1-page,
body .sd-page {
  width: 100% !important;
  max-width: var(--u-frame) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--u-space) !important;
}

body .main {
  background:
    radial-gradient(80% 42% at 50% -8%, rgba(167, 139, 250, 0.09), transparent 58%),
    var(--bg, #0d0f11) !important;
}

/* ── Hero — identical on every page ────────────────────── */
body .db-hero,
body .sip-hero,
body .rt-hero,
body .dep-hero,
body .cdr-hero,
body .set-hero,
body .p1-hero,
body .sd-hero {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  min-height: 148px !important;
  padding: var(--u-hero-pad) !important;
  border-radius: var(--u-r-hero) !important;
  border: 1px solid var(--u-line) !important;
  background: linear-gradient(155deg, #181d2c 0%, #121416 52%, #121722 100%) !important;
  box-shadow: none !important;
  animation: uRise 0.48s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

body .db-hero-bg,
body .sip-hero-bg,
body .rt-hero-bg,
body .dep-hero-bg,
body .cdr-hero-bg,
body .set-hero-bg,
body .p1-hero-bg,
body .sd-hero-bg,
body .cdr-hero-atmosphere,
body .set-hero-atmosphere {
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(65% 70% at 0% 0%, rgba(167, 139, 250, 0.22), transparent 58%),
    radial-gradient(65% 70% at 100% 100%, rgba(167, 139, 250, 0.12), transparent 58%) !important;
  animation: uGlow 9s ease-in-out infinite !important;
}
body .cdr-orb,
body .set-orb { display: none !important; }

body .sip-hero-grid,
body .rt-hero-grid,
body .cdr-hero-grid,
body .set-hero-grid,
body .sd-hero-grid {
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0.14 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  mask-image: radial-gradient(ellipse at 50% 35%, #000 22%, transparent 75%) !important;
}

body .db-hero-main,
body .sip-hero-main,
body .rt-hero-main,
body .dep-hero-main,
body .cdr-hero-main,
body .cdr-hero-copy,
body .set-hero-main,
body .set-hero-copy,
body .p1-hero-main,
body .sd-hero-main {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 280px !important;
  min-width: 0 !important;
}

body .db-brand,
body .sip-brand,
body .rt-brand,
body .dep-brand,
body .cdr-brand,
body .set-brand,
body .p1-brand,
body .sd-brand {
  display: block !important;
  margin: 0 0 8px !important;
  font-family: var(--u-ff) !important;
  font-size: clamp(30px, 3.8vw, 38px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.055em !important;
  line-height: 1 !important;
  color: var(--u-ink) !important;
}
body .cdr-hero-copy::before,
body .set-hero-copy::before {
  content: none !important;
  display: none !important;
}

body .cdr-kicker,
body .set-kicker { display: none !important; }

body .db-hero h1,
body .sip-hero h1,
body .rt-hero h1,
body .dep-hero h1,
body .cdr-hero h1,
body .set-hero h1,
body .p1-hero h1,
body .sd-hero h1 {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--u-ff) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--u-accent) !important;
  line-height: 1.2 !important;
}
body .db-hero h1 .sd-ico,
body .sip-hero h1 .sd-ico,
body .rt-hero h1 .sd-ico,
body .dep-hero h1 .sd-ico,
body .cdr-hero h1 .sd-ico,
body .set-hero h1 .sd-ico,
body .p1-hero h1 .sd-ico {
  width: 14px !important;
  height: 14px !important;
  color: var(--u-accent) !important;
}

body .db-hero .sub,
body .sip-hero .sub,
body .rt-hero .sub,
body .dep-hero .sub,
body .cdr-sub,
body .set-sub,
body .p1-hero .sub,
body .sd-sub {
  margin: 10px 0 0 !important;
  max-width: 36rem !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--u-mute) !important;
}

/* Hero aside — ledger / meter / actions */
body .db-ledger,
body .dep-ledger,
body .sip-hero-aside,
body .rt-meter,
body .cdr-hero-aside,
body .set-hero-aside,
body .p1-hero-aside,
body .sd-aside {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
  min-width: 168px !important;
  flex: 0 1 auto !important;
}

body .db-ledger-k,
body .dep-ledger-k,
body .sd-aside-k,
body .cdr-aside-k,
body .p1-aside-k {
  font-family: var(--u-fm) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--u-mute) !important;
}
body .db-ledger-v,
body .dep-ledger-v,
body .sd-aside-v,
body .cdr-aside-v,
body .p1-aside-v {
  font-family: var(--u-fm) !important;
  font-size: clamp(28px, 3.6vw, 34px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  color: var(--u-ink) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}
body .db-ledger-sub,
body .dep-ledger-sub,
body .sd-aside-sub {
  font-family: var(--u-fm) !important;
  font-size: 11px !important;
  color: var(--u-mute) !important;
}

body .rt-meter {
  align-items: stretch !important;
  min-width: 248px !important;
  padding: 16px 18px !important;
  border-radius: var(--u-r-panel) !important;
  border: 1px solid rgba(167, 139, 250, 0.28) !important;
  background:
    linear-gradient(160deg, rgba(167, 139, 250, 0.14), rgba(167, 139, 250, 0.02) 55%),
    rgba(8, 10, 16, 0.55) !important;
  text-align: left !important;
}
body .rt-meter-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

body .sip-top-actions,
body .cdr-hero-actions,
body .p1-hero-actions,
body .sd-aside-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
body .sip-status,
body .set-jump,
body .sd-aside-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
body .sip-chip,
body .set-jump-link,
body .cdr-source-chip,
body .sd-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--u-line) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--u-mute) !important;
  font-family: var(--u-nav) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
body .set-jump-link:hover,
body .sip-chip:hover {
  border-color: rgba(167, 139, 250, 0.4) !important;
  background: rgba(167, 139, 250, 0.12) !important;
  color: #fff !important;
  transform: none !important;
}

/* ── Panels — identical chrome ─────────────────────────── */
body .db-panel,
body .sip-panel,
body .rt-panel,
body .dep-panel,
body .cdr-panel,
body .set-panel,
body .p1-page .panel,
body .settings-stack .panel,
body .sd-panel {
  border-radius: var(--u-r-panel) !important;
  border: 1px solid var(--u-line) !important;
  background: var(--u-surface) !important;
  box-shadow: var(--u-shadow) !important;
  overflow: hidden !important;
  animation: uRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
body .db-page > *:nth-child(n),
body .sip-page > *:nth-child(n),
body .rt-page > *:nth-child(n),
body .dep-page > *:nth-child(n),
body .cdr-page > *:nth-child(n),
body .settings-stack > *:nth-child(n),
body .p1-page > *:nth-child(n) {
  animation-delay: calc(0.04s * var(--i, 1)) !important;
}
body .db-page > *:nth-child(1),
body .sip-page > *:nth-child(1),
body .rt-page > *:nth-child(1),
body .dep-page > *:nth-child(1),
body .cdr-page > *:nth-child(1),
body .settings-stack > *:nth-child(1),
body .p1-page > *:nth-child(1) { animation-delay: 0.02s !important; }
body .db-page > *:nth-child(2),
body .sip-page > *:nth-child(2),
body .rt-page > *:nth-child(2),
body .dep-page > *:nth-child(2),
body .cdr-page > *:nth-child(2),
body .settings-stack > *:nth-child(2),
body .p1-page > *:nth-child(2) { animation-delay: 0.08s !important; }
body .db-page > *:nth-child(3),
body .sip-page > *:nth-child(3),
body .rt-page > *:nth-child(3),
body .dep-page > *:nth-child(3),
body .cdr-page > *:nth-child(3),
body .settings-stack > *:nth-child(3),
body .p1-page > *:nth-child(3) { animation-delay: 0.14s !important; }
body .db-page > *:nth-child(4),
body .sip-page > *:nth-child(4),
body .rt-page > *:nth-child(4),
body .dep-page > *:nth-child(4),
body .cdr-page > *:nth-child(4),
body .settings-stack > *:nth-child(4),
body .p1-page > *:nth-child(4) { animation-delay: 0.2s !important; }
body .db-page > *:nth-child(5),
body .sip-page > *:nth-child(5),
body .rt-page > *:nth-child(5),
body .dep-page > *:nth-child(5),
body .cdr-page > *:nth-child(5),
body .settings-stack > *:nth-child(5),
body .p1-page > *:nth-child(5) { animation-delay: 0.26s !important; }

body .db-panel-h,
body .sip-panel-h,
body .rt-panel-h,
body .dep-panel-h,
body .cdr-panel-h,
body .set-panel-h,
body .panel-head,
body .p1-page .panel-head,
body .sd-panel-h {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: var(--u-panel-h) !important;
  height: var(--u-panel-h) !important;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--u-line) !important;
  background: var(--u-raised) !important;
  box-sizing: border-box !important;
}
body .db-panel-h h2,
body .sip-panel-h h2,
body .rt-panel-h h2,
body .dep-panel-h h2,
body .cdr-panel-h h2,
body .set-panel-h h2,
body .panel-head h2,
body .sd-panel-h h2 {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--u-ff) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: #c8c5bc !important;
}
body .db-panel-h h2 .sd-ico,
body .sip-panel-h h2 .sd-ico,
body .rt-panel-h h2 .sd-ico,
body .dep-panel-h h2 .sd-ico,
body .cdr-panel-h h2 .sd-ico,
body .set-panel-h h2 .sd-ico,
body .panel-head h2 .sd-ico,
body .set-h-ico {
  color: var(--u-accent) !important;
  width: 14px !important;
  height: 14px !important;
  background: transparent !important;
  border: 0 !important;
}
body .db-panel-h .meta,
body .sip-panel-h .meta,
body .rt-panel-h .meta,
body .dep-panel-h .meta,
body .cdr-panel-h .meta,
body .set-panel-h .meta {
  margin-left: auto !important;
  font-family: var(--u-fm) !important;
  font-size: 11px !important;
  color: var(--u-mute) !important;
}
body .db-panel-b,
body .sip-panel-b,
body .rt-panel-b,
body .dep-panel-b,
body .cdr-panel-b,
body .set-panel-b,
body .panel-body,
body .sd-panel-b {
  padding: 16px !important;
}

/* ── KPI strip ─────────────────────────────────────────── */
body .db-kpis,
body .cdr-kpis,
body .sd-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--u-gap) !important;
}
body .db-kpi,
body .cdr-kpi,
body .sd-kpi {
  min-height: 96px !important;
  padding: 16px !important;
  border-radius: var(--u-r-tile) !important;
  border: 1px solid var(--u-line) !important;
  background: var(--u-surface) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
  box-sizing: border-box !important;
}
body .db-kpi .lab,
body .cdr-kpi .lab,
body .sd-kpi .lab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--u-fm) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--u-mute) !important;
  margin-bottom: 8px !important;
}
body .db-kpi .val,
body .cdr-kpi .val,
body .sd-kpi .val {
  font-family: var(--u-fm) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--u-ink) !important;
  font-variant-numeric: tabular-nums !important;
}
body .cdr-kpi-hint,
body .cdr-kpi-spark { display: none !important; }

/* ── Buttons / inputs ──────────────────────────────────── */
body .btn:not(.btn-sm):not(.icon-btn):not(.add-funds-btn),
body .sip-btn:not(.ghost),
body .dep-btn:not(.ghost),
body .rt-btn,
body .set-btn:not(.ghost),
body .cdr-btn {
  height: var(--u-ctrl-h) !important;
  min-height: var(--u-ctrl-h) !important;
  border-radius: var(--u-r-ctrl) !important;
  font-family: var(--u-nav) !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
}
body .btn-primary,
body .sip-btn.primary,
body .dep-btn.primary,
body .rt-btn.primary,
body .set-btn.primary,
body .cdr-btn.primary,
body .p1-page .btn-primary {
  background: var(--u-btn) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 20px rgba(167, 139, 250, 0.28) !important;
}
body .btn-primary:hover,
body .sip-btn.primary:hover,
body .dep-btn.primary:hover,
body .rt-btn.primary:hover:not(:disabled),
body .set-btn.primary:hover,
body .cdr-btn.primary:hover,
body .p1-page .btn-primary:hover {
  background: var(--u-btn-h) !important;
  transform: translateY(-1px) !important;
}

body .content .input:not(#amount),
body .content .select,
body .sip-tool .input,
body .p1-page .input,
body .p1-page .select,
body .settings-stack .input,
body .cdr-page .input,
body .cdr-page .select {
  height: var(--u-ctrl-h) !important;
  min-height: var(--u-ctrl-h) !important;
  border-radius: var(--u-r-ctrl) !important;
  background: var(--u-deep) !important;
  border: 1px solid var(--u-line) !important;
  color: var(--u-ink) !important;
}

/* ── P1 hero (same as every other page) ────────────────── */
body .p1-page > .page-head.p1-hero::before,
body .p1-page > .p1-hero::before {
  content: none !important;
  display: none !important;
}
body .p1-page > .page-head > div:first-child::before,
body .p1-page .p1-hero-main::before {
  content: none !important;
  display: none !important;
}
body .p1-page .page-title {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--u-ff) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--u-accent) !important;
}
body .p1-page .page-title .sd-ico {
  width: 14px !important;
  height: 14px !important;
}
body .p1-page .page-desc {
  margin: 10px 0 0 !important;
  max-width: 36rem !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--u-mute) !important;
}
body .p1-page .running-pill {
  height: 32px !important;
  border-radius: 10px !important;
  border: 1px solid var(--u-line) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  font-family: var(--u-fm) !important;
}

/* Settings jump sits under copy on narrow, aside on wide via flex wrap */
body .set-hero {
  align-items: flex-end !important;
}
body .set-hero .set-jump {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  max-width: 100% !important;
}

/* Dashboard quick / route equal tiles */
body .db-quick {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body .db-quick a {
  min-height: 52px !important;
  border-radius: var(--u-r-ctrl) !important;
  background: var(--u-deep) !important;
  border: 1px solid var(--u-line) !important;
}
body .db-route {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body .db-route-item {
  min-height: 72px !important;
  border-radius: var(--u-r-ctrl) !important;
  background: var(--u-deep) !important;
  border: 1px solid var(--u-line) !important;
}

/* Tables */
body .db-table th,
body .rt-table th,
body .cdr-page thead th,
body .sip-page thead th,
body .p1-page thead th {
  font-family: var(--u-fm) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--u-dim) !important;
  background: var(--u-raised) !important;
}

@media (max-width: 900px) {
  body .db-kpis,
  body .cdr-kpis,
  body .db-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body .db-route {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body .db-ledger,
  body .dep-ledger,
  body .sip-hero-aside,
  body .cdr-hero-aside,
  body .set-hero-aside,
  body .p1-hero-aside,
  body .sd-aside {
    align-items: flex-start !important;
    width: 100% !important;
  }
  body .sip-top-actions,
  body .cdr-hero-actions,
  body .sip-status,
  body .set-jump {
    justify-content: flex-start !important;
  }
  body .rt-meter {
    width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 560px) {
  body .db-hero,
  body .sip-hero,
  body .rt-hero,
  body .dep-hero,
  body .cdr-hero,
  body .set-hero,
  body .p1-hero,
  body .p1-page > .page-head {
    padding: 20px 18px !important;
    min-height: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .db-hero,
  body .sip-hero,
  body .rt-hero,
  body .dep-hero,
  body .cdr-hero,
  body .set-hero,
  body .p1-hero,
  body .p1-page > .page-head,
  body .db-panel,
  body .sip-panel,
  body .rt-panel,
  body .dep-panel,
  body .cdr-panel,
  body .set-panel,
  body .db-hero-bg,
  body .sip-hero-bg,
  body .rt-hero-bg,
  body .dep-hero-bg,
  body .cdr-hero-bg,
  body .set-hero-bg {
    animation: none !important;
  }
}
