/* NIVA visual alignment candidate · preview only · 2026-10-29.
   Loaded separately so the current production import graph stays intact. */
:root .dashboard-layout {
  --visual-content-width: var(--content-narrow, 480px);
  --visual-card-padding: 22px;
  --visual-section-gap: 16px;
}

/* One content edge for both carousel tabs and secondary routes. */
:root .dashboard-layout .carousel-page > div,
:root .dashboard-layout .secondary-route > div {
  width: 100%;
  min-width: 0;
  max-width: var(--visual-content-width) !important;
  margin-left: auto;
  margin-right: auto;
}

:root .dashboard-layout .welcome-header,
:root .dashboard-layout .sub-header,
:root .dashboard-layout .store-header,
:root .dashboard-layout .invite-header,
:root .dashboard-layout .settings-header,
:root .dashboard-layout .tickets-container > .page-header {
  align-items: flex-start;
  gap: 12px;
  min-height: 40px;
  padding-left: 0;
  padding-right: 0;
}

:root .dashboard-layout .welcome-title,
:root .dashboard-layout .carousel-page .page-title,
:root .dashboard-layout .orders-container > .page-title,
:root .dashboard-layout .tickets-container .page-title,
:root .dashboard-layout .knowledge-container .page-title,
:root .dashboard-layout .dl2-title {
  margin: 0;
  padding: 4px 0 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.01em;
}

:root .dashboard-layout .welcome-sub {
  margin-top: 4px;
  line-height: 20px;
}

:root .dashboard-layout .welcome-header,
:root .dashboard-layout .sub-header,
:root .dashboard-layout .tickets-container > .page-header,
:root .dashboard-layout .orders-container > .page-title {
  margin-bottom: var(--visual-section-gap);
}

:root .dashboard-layout .plans-page,
:root .dashboard-layout .invite-page,
:root .dashboard-layout .settings-container,
:root .dashboard-layout .wallet-col-main,
:root .dashboard-layout .settings-container .tab-panel {
  gap: var(--visual-section-gap);
}

:root .dashboard-layout .panel-card,
:root .dashboard-layout .hero-card,
:root .dashboard-layout .plans-page .product-card.pk-card {
  padding: var(--visual-card-padding);
  border-radius: 24px;
}

/* Keep compact promotional links and branded cards in their existing form. */
:root .dashboard-layout .entry-switch-card { padding: 16px 18px; }
:root .dashboard-layout .about-why-card { padding: 18px 20px; }

:root .dashboard-layout .panel-title,
:root .dashboard-layout .card-title {
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.005em;
}

:root .dashboard-layout .card-header-inline .card-title { margin-bottom: 0; }
:root .dashboard-layout .hero-value,
:root .dashboard-layout .mini-stat-value,
:root .dashboard-layout .balance-display,
:root .dashboard-layout .order-price {
  font-variant-numeric: tabular-nums;
}

/* Horizontal option bars must start inside the card and stay scrollable. */
:root .dashboard-layout .of-bar,
:root .dashboard-layout .dl2-tabs {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 1px;
  padding-right: 1px;
}

:root .dashboard-layout .dl2-top { padding-left: 0; }
:root .dashboard-layout .dl2-title { margin-bottom: 4px; }
:root .dashboard-layout .dl2-tabs {
  flex-wrap: wrap;
  overflow: visible;
}

:root .dashboard-layout .qi .qi-plats {
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 2px 0;
}

:root .dashboard-layout .selector-grid,
:root .dashboard-layout .stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
:root .dashboard-layout .method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root .dashboard-layout .wallet-grid,
:root .dashboard-layout .wallet-col-main,
:root .dashboard-layout .wallet-col-side,
:root .dashboard-layout .plan-meta-grid > div { min-width: 0; }

@media (min-width: 992px) {
  :root .dashboard-layout {
    --visual-content-width: var(--content-wide, 864px);
    --visual-card-padding: 24px;
    --visual-section-gap: 20px;
  }
  :root .dashboard-layout .subscription-grid,
  :root .dashboard-layout .package-grid,
  :root .dashboard-layout .wallet-grid { gap: 20px; }
}

/* Long tab labels wrap onto their own row on narrow phones. */
@media (max-width: 374px) {
  :root .dashboard-layout .sub-header,
  :root .dashboard-layout .store-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  :root .dashboard-layout .sub-header > .page-title,
  :root .dashboard-layout .store-header > .page-title { flex-basis: 100%; }
}