/* FRA Prop HQ v6.22.0 — product-wide visual revamp
   Flat, deliberate trading-workspace UI. Loaded last so it only changes presentation. */

:root,
:root[data-theme="dark"] {
  --bg: #080a0c;
  --bg-2: #080a0c;
  --sidebar: #0b0e10;
  --topbar: rgba(8, 10, 12, .92);
  --panel: #0f1316;
  --panel-2: #12171b;
  --panel-3: #171d22;
  --input: #0d1114;
  --hover: #151b1f;
  --border: rgba(225, 232, 238, .105);
  --border-strong: rgba(225, 232, 238, .19);
  --text: #dce2e7;
  --text-strong: #f6f8f9;
  --muted: #87919b;
  --muted-2: #65707b;
  --accent: #b9ff35;
  --accent-soft: rgba(185, 255, 53, .075);
  --green: #59d98c;
  --red: #ff7180;
  --amber: #f1b653;
  --blue: #74aaff;
  --radius: 8px;
  --shadow: none;
  --workspace-max: 1520px;
}

:root[data-theme="light"] {
  --bg: #f3f5f5;
  --bg-2: #f3f5f5;
  --sidebar: #fafbfb;
  --topbar: rgba(243, 245, 245, .93);
  --panel: #ffffff;
  --panel-2: #f7f9f9;
  --panel-3: #edf1f1;
  --input: #ffffff;
  --hover: #edf1f1;
  --border: rgba(18, 29, 36, .11);
  --border-strong: rgba(18, 29, 36, .19);
  --text: #273039;
  --text-strong: #0e151a;
  --muted: #64707a;
  --muted-2: #89939b;
  --accent: #6f9700;
  --accent-soft: rgba(111, 151, 0, .08);
  --green: #168451;
  --red: #c43f52;
  --amber: #996400;
  --blue: #2b68ba;
}

html,
body {
  background: var(--bg) !important;
}

body {
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   Shell and sidebar
   -------------------------------------------------------------------------- */
.app-shell {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  grid-template-columns: 258px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  background: var(--bg) !important;
}

.sidebar {
  top: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: 26px 18px 18px !important;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: var(--sidebar) !important;
  box-shadow: none !important;
}

.sidebar::before,
.sidebar::after {
  display: none !important;
}

.sidebar .brand-wrap {
  min-height: 72px;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 0 40px 20px 4px !important;
  border-bottom: 1px solid var(--border) !important;
}

.sidebar .app-brand-mark {
  width: 38px !important;
  height: 38px !important;
}

.sidebar .app-brand-word {
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

.sidebar .app-brand-tag {
  margin-top: 8px !important;
  font-size: 8px !important;
  letter-spacing: .17em !important;
}

/* The toggle now lives fully inside the sidebar instead of hanging outside it. */
.sidebar-collapse-button {
  top: 29px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 90 !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  background: var(--panel-2) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.sidebar-collapse-button:hover,
.sidebar-collapse-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
  background: var(--hover) !important;
  color: var(--accent) !important;
}

.sidebar-collapse-button span {
  font-size: 18px !important;
}

.sidebar .nav-list {
  gap: 2px !important;
  padding: 18px 2px 6px 0 !important;
}

.sidebar .nav-list::before {
  content: "WORKSPACE";
  display: block;
  flex: 0 0 auto;
  padding: 0 10px 8px;
  color: var(--muted-2);
  font: 600 8px/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .16em;
}

.sidebar .nav-divider {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 13px 9px 8px !important;
  padding-top: 13px;
  border-top: 1px solid var(--border) !important;
  background: none !important;
}

.sidebar .nav-divider::after {
  content: "ACCOUNT";
  display: block;
  color: var(--muted-2);
  font: 600 8px/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .16em;
}

.sidebar .nav-item {
  min-height: 39px !important;
  gap: 11px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  letter-spacing: 0 !important;
}

.sidebar .nav-item:hover {
  background: var(--hover) !important;
  color: var(--text-strong) !important;
}

.sidebar .nav-item.active {
  position: relative;
  background: var(--accent-soft) !important;
  color: var(--text-strong) !important;
  box-shadow: none !important;
}

.sidebar .nav-item.active::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.sidebar .nav-item.active > .nav-icon,
.sidebar .nav-item.active > span:first-child {
  color: var(--accent) !important;
}

.connection-nav-dot {
  width: 6px !important;
  height: 6px !important;
  flex-basis: 6px !important;
}

.sidebar .user-card {
  min-height: 58px;
  gap: 10px !important;
  margin-top: 10px !important;
  padding: 14px 4px 0 !important;
}

.sidebar .avatar {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--panel-3) !important;
  color: var(--text-strong) !important;
  font-size: 13px !important;
}

.sidebar .user-name {
  font-size: 12px !important;
  font-weight: 650 !important;
}

.sidebar .user-role {
  min-height: 18px !important;
  padding-inline: 6px !important;
  border-color: var(--border) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 7px !important;
}

@media (min-width: 921px) {
  .app-shell.sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  .app-shell.sidebar-collapsed .sidebar {
    padding: 22px 10px 16px !important;
  }

  .app-shell.sidebar-collapsed .brand-wrap {
    min-height: 70px;
    padding: 0 0 19px !important;
  }

  .app-shell.sidebar-collapsed .sidebar-collapse-button {
    top: 76px !important;
    right: 21px !important;
    width: 30px !important;
    height: 30px !important;
    background: var(--sidebar) !important;
  }

  .app-shell.sidebar-collapsed .nav-list {
    padding-top: 48px !important;
  }

  .app-shell.sidebar-collapsed .nav-list::before,
  .app-shell.sidebar-collapsed .nav-divider::after {
    display: none !important;
  }

  .app-shell.sidebar-collapsed .nav-divider {
    width: 34px !important;
    height: 1px !important;
    margin: 10px auto !important;
    padding: 0 !important;
    background: var(--border) !important;
    border: 0 !important;
  }

  .app-shell.sidebar-collapsed .nav-item {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 40px !important;
    border-radius: 6px !important;
  }

  .app-shell.sidebar-collapsed .nav-item.active {
    box-shadow: none !important;
  }

  .app-shell.sidebar-collapsed .nav-item.active::before {
    top: 9px;
    bottom: 9px;
  }
}

/* --------------------------------------------------------------------------
   Main workspace and page headers
   -------------------------------------------------------------------------- */
.main-content {
  min-width: 0;
  padding: 0 40px 64px !important;
  background: var(--bg) !important;
}

.topbar {
  width: 100%;
  max-width: var(--workspace-max);
  min-height: 98px !important;
  margin: 0 auto 26px !important;
  padding: 24px 0 20px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--topbar) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

.topbar h1 {
  color: var(--text-strong) !important;
  font-size: clamp(27px, 2vw, 33px) !important;
  font-weight: 630 !important;
  letter-spacing: -.045em !important;
}

.topbar p {
  margin-top: 7px !important;
  color: var(--muted) !important;
}

.topbar-actions {
  gap: 7px !important;
}

.view,
.demo-banner,
.guardrail-global-banner {
  width: 100%;
  max-width: var(--workspace-max);
  margin-inline: auto;
}

.section-head {
  align-items: flex-end !important;
  margin: 30px 0 22px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.section-head > div > h2 {
  color: var(--text-strong) !important;
  font-size: clamp(24px, 1.75vw, 29px) !important;
  font-weight: 620 !important;
  letter-spacing: -.04em !important;
}

.section-head > div > p {
  max-width: 720px;
  margin-top: 8px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

.release-chip {
  border-color: var(--border) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 9px !important;
}

/* --------------------------------------------------------------------------
   Shared controls — compact and flat, not glossy
   -------------------------------------------------------------------------- */
.button,
.icon-button,
.control,
.text-input,
.theme-toggle,
.trade-filters > *,
select,
input,
textarea {
  border-radius: 6px !important;
  box-shadow: none !important;
}

.button {
  min-height: 38px !important;
  padding-inline: 14px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.button.primary {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #111608 !important;
  box-shadow: none !important;
}

.button.primary:hover {
  border-color: color-mix(in srgb, var(--accent) 82%, white) !important;
  background: color-mix(in srgb, var(--accent) 88%, white) !important;
}

.button.secondary,
.button.ghost,
.icon-button,
.control,
.text-input,
.theme-toggle {
  border-color: var(--border) !important;
  background: transparent !important;
  color: var(--text) !important;
}

.button.secondary:hover,
.button.ghost:hover,
.icon-button:hover,
.theme-toggle:hover {
  border-color: var(--border-strong) !important;
  background: var(--hover) !important;
}

.segmented,
.quote-mode-row,
.ai-mode-row {
  gap: 2px !important;
  padding: 2px !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  background: var(--input) !important;
}

.segmented button,
.quote-mode-row button,
.ai-mode-button {
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
}

.segmented button.active,
.quote-mode-row button.active,
.ai-mode-button.active {
  border: 0 !important;
  background: var(--panel-3) !important;
  color: var(--text-strong) !important;
}

/* --------------------------------------------------------------------------
   Panel system — fewer floating boxes, clearer structure
   -------------------------------------------------------------------------- */
.panel,
.dashboard-welcome-copy,
.zone-quote-card,
.day-mindset-strip,
.connection-hero-panel,
.provider-review-panel,
.partner-program-banner,
.ai-hero,
.ai-chat-panel,
.ai-side .panel,
.finance-choice-card,
.guardrail-score-card,
.strategy-card,
.eligibility-card {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.panel::before,
.panel::after,
.kpi-card::after,
.dashboard-welcome-copy::after,
.zone-quote-card::after {
  display: none !important;
}

.panel-head {
  min-height: 58px;
  padding: 17px 18px !important;
  border-bottom: 1px solid var(--border) !important;
}

.panel-head h2 {
  color: var(--text-strong) !important;
  font-size: 14px !important;
  font-weight: 620 !important;
  text-transform: none !important;
  letter-spacing: -.015em !important;
}

.panel-sub,
.panel-head p {
  margin-top: 4px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
}

.layout-main,
.bottom-grid,
.two-col,
.three-col,
.settings-grid,
.day-layout,
.trade-view-layout,
.finance-layout,
.guardrail-layout,
.report-breakdowns {
  gap: 18px !important;
}

.side-stack {
  gap: 18px !important;
}

/* KPI cards are one restrained data strip rather than a row of floating tiles. */
.kpi-grid,
.guardrail-score-grid {
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.kpi-card,
.guardrail-score-card {
  min-height: 122px !important;
  padding: 21px 22px !important;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.kpi-card:last-child,
.guardrail-score-card:last-child {
  border-right: 0 !important;
}

.kpi-label,
.kpi-card > span,
.guardrail-score-card > span {
  color: var(--muted) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.kpi-value,
.kpi-card > strong,
.guardrail-score-card > strong {
  margin-top: 14px !important;
  color: var(--text-strong) !important;
  font-weight: 550 !important;
}

/* Tables carry the density; they do not need a second card treatment inside. */
.table-wrap {
  border-radius: 0 !important;
}

.data-table th {
  padding-block: 12px !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 8px !important;
  font-weight: 650 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.data-table td {
  padding-block: 13px !important;
  border-bottom-color: var(--border) !important;
}

.data-table tbody tr:hover,
.selectable-table tbody tr:hover,
.selectable-table tbody tr.selected {
  background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
}

/* --------------------------------------------------------------------------
   Dashboard — editorial lead, stat strip, data-first layout
   -------------------------------------------------------------------------- */
.dashboard-welcome {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr) !important;
  gap: 36px !important;
  margin: 2px 0 26px !important;
  padding: 10px 0 30px !important;
  border-bottom: 1px solid var(--border) !important;
}

.dashboard-welcome-copy,
.zone-quote-card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.dashboard-welcome-copy h2 {
  max-width: 560px;
  margin-top: 10px !important;
  color: var(--text-strong) !important;
  font-size: clamp(29px, 3vw, 43px) !important;
  font-weight: 590 !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
}

.dashboard-welcome-copy > p {
  max-width: 500px;
  margin-top: 13px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.dashboard-focus-pills span {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
}

.dashboard-focus-pills span::before {
  content: "•";
  margin-right: 7px;
  color: var(--accent);
}

.zone-quote-card {
  align-self: stretch;
  padding-left: 32px !important;
  border-left: 1px solid var(--border) !important;
}

.zone-quote-card blockquote {
  max-width: 720px;
  margin: 24px 0 22px !important;
  color: var(--text-strong) !important;
  font-size: clamp(20px, 1.6vw, 26px) !important;
  font-weight: 460 !important;
  line-height: 1.4 !important;
  letter-spacing: -.025em !important;
}

.quote-mode-row {
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

.accounts-panel {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Day View, Trade View and Notebook — connected workspaces
   -------------------------------------------------------------------------- */
#view-dayview .day-mindset-strip {
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#view-dayview .day-layout > .panel,
#view-trades .trade-workspace-v619,
#view-notebook .notebook-shell {
  box-shadow: none !important;
}

#view-trades .trade-workspace-v619 {
  border-top-color: var(--border) !important;
}

#view-trades .trade-browser-v619 {
  padding-right: 28px !important;
  border-right-color: var(--border) !important;
}

#view-trades .trade-case-v619 {
  padding-left: 36px !important;
}

#view-trades .trade-shot-v619,
#view-trades .trade-review-editor-v619 select,
#view-trades .trade-review-editor-v619 textarea,
#view-trades .trade-review-editor-v619 input {
  border-radius: 6px !important;
  box-shadow: none !important;
}

#view-notebook .notebook-shell {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

#view-notebook .notebook-shell > .panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#view-notebook .notebook-sidebar,
#view-notebook .notebook-list-panel {
  border-right: 1px solid var(--border) !important;
}

#view-notebook .notebook-folder,
#view-notebook .notebook-note-card {
  border-radius: 0 !important;
}

#view-notebook .notebook-folder.active,
#view-notebook .notebook-note-card.active {
  position: relative;
  background: var(--accent-soft) !important;
}

#view-notebook .notebook-folder.active::before,
#view-notebook .notebook-note-card.active::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 2px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   Membership — clear status and deliberate plan layout
   -------------------------------------------------------------------------- */
#view-business .subscription-status-notice {
  margin: 0 0 24px !important;
  padding: 18px 0 18px 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-left: 3px solid var(--green) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#view-business .subscription-status-notice.warning {
  border-left-color: var(--amber) !important;
  background: transparent !important;
}

#view-business .subscription-status-notice strong {
  color: var(--text-strong) !important;
}

#view-business .two-col:first-of-type {
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr) !important;
  margin-top: 22px;
}

#view-business .two-col:first-of-type > .panel:first-child {
  border-top: 2px solid var(--accent) !important;
}

#view-business .plan-access-status {
  margin: 0 0 17px !important;
  padding: 0 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#view-business .plan-access-status.cancelled {
  border-color: var(--border) !important;
  background: transparent !important;
}

#view-business .legal-grid {
  margin-top: 18px;
}

#view-business .legal-grid .panel {
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#view-business .legal-grid .panel-head {
  padding-inline: 0 !important;
}

#view-business .legal-copy {
  padding-inline: 0 !important;
}

/* --------------------------------------------------------------------------
   Settings — sectioned settings page, not a wall of equal cards
   -------------------------------------------------------------------------- */
#view-settings .settings-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 0 28px !important;
  border-top: 1px solid var(--border);
}

#view-settings .settings-grid > .panel {
  grid-column: span 6;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#view-settings .settings-grid > .panel .panel-head {
  padding: 22px 0 13px !important;
  border: 0 !important;
}

#view-settings .settings-block {
  padding: 0 0 24px !important;
}

#view-settings .setting-row {
  padding: 13px 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

#view-settings .settings-trust-links {
  border-top-color: var(--border) !important;
}

/* --------------------------------------------------------------------------
   Connections, finance, reports, strategy and rules
   -------------------------------------------------------------------------- */
#view-connections .connection-hero-panel,
#view-connections .provider-review-panel,
#view-connections .partner-program-banner {
  border-radius: 8px !important;
  background: var(--panel) !important;
}

#view-connections .connection-hero-panel {
  border-top: 2px solid var(--accent) !important;
}

#view-propfinance .finance-import-choice {
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#view-propfinance .finance-choice-card {
  background: transparent !important;
}

#view-guardrails .guardrail-score-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.strategy-grid,
.eligibility-grid,
.beta-checklist-grid {
  gap: 12px !important;
}

.strategy-card,
.eligibility-card,
.beta-checklist-item {
  border-radius: 7px !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Banners, modals and feedback surfaces
   -------------------------------------------------------------------------- */
.demo-banner,
.guardrail-global-banner,
.launch-lock-banner,
.partner-program-banner {
  border-radius: 6px !important;
  box-shadow: none !important;
}

.modal-card {
  border-radius: 10px !important;
  background: var(--panel) !important;
  background-image: none !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42) !important;
}

.toast {
  border-radius: 7px !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .3) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .main-content {
    padding-inline: 28px !important;
  }

  .dashboard-welcome {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .zone-quote-card {
    padding: 24px 0 0 !important;
    border-top: 1px solid var(--border) !important;
    border-left: 0 !important;
  }

  #view-business .two-col:first-of-type {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 920px) {
  .app-shell {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    width: min(300px, 88vw) !important;
    max-width: 88vw !important;
    padding: 22px 16px 16px !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: 18px 0 55px rgba(0, 0, 0, .36) !important;
  }

  .main-content {
    padding-inline: 18px !important;
  }

  .topbar {
    min-height: 82px !important;
    margin-bottom: 20px !important;
    padding-block: 17px !important;
  }

  .section-head {
    align-items: flex-start !important;
    padding-bottom: 15px;
  }

  .kpi-grid,
  .guardrail-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .kpi-card,
  .guardrail-score-card {
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
  }

  #view-settings .settings-grid > .panel {
    grid-column: span 12;
  }

  #view-notebook .notebook-sidebar,
  #view-notebook .notebook-list-panel {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
}

@media (max-width: 600px) {
  .main-content {
    padding-inline: 14px !important;
  }

  .topbar h1 {
    font-size: 24px !important;
  }

  .dashboard-welcome-copy h2 {
    font-size: 31px !important;
  }

  .kpi-grid,
  .guardrail-score-grid {
    grid-template-columns: 1fr !important;
  }

  .kpi-card,
  .guardrail-score-card {
    min-height: 105px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .kpi-card:last-child,
  .guardrail-score-card:last-child {
    border-bottom: 0 !important;
  }

  .dashboard-welcome {
    padding-top: 0 !important;
  }

  .zone-quote-card blockquote {
    font-size: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

/* Final specificity guards against older visual-theme files. */
@media (min-width: 921px) {
  .app-shell > .sidebar {
    margin: 0 !important;
    overflow: visible !important;
  }
}

.kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)) !important;
}

#view-dashboard .kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  gap: 0 !important;
  margin-bottom: 18px !important;
}

#view-dashboard .kpi-card:nth-child(n) {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 122px !important;
  padding: 21px 22px !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#view-dashboard .kpi-card:nth-child(1) .kpi-value {
  margin-top: 14px !important;
  font-size: clamp(20px, 1.55vw, 27px) !important;
}

#view-dashboard .kpi-card:nth-child(1) .kpi-spark,
#view-dashboard .kpi-spark {
  height: 30px !important;
  margin-top: 10px !important;
}

#view-business #businessKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1180px) {
  #view-dashboard .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #view-business #businessKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  #view-dashboard .kpi-grid,
  #view-business #businessKpis {
    grid-template-columns: 1fr !important;
  }
}

/* Flatten nested plan tiles inside Membership. */
#view-business .plan-stack {
  gap: 0 !important;
}

#view-business .plan-card {
  padding: 16px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#view-business .plan-card:first-child {
  padding-top: 0 !important;
}

#view-business .plan-card.featured {
  padding-left: 14px !important;
  border-left: 2px solid var(--accent) !important;
}

#view-business .plan-card .button {
  align-self: start;
}

#view-business #planPanel > .button.wide {
  margin-top: 14px;
}