/*
  Visual stability layer
  This file is deliberately loaded last so the application has one predictable
  layout system while the existing feature styles remain intact.
*/

:root {
  --app-font: Aptos, "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --app-canvas: #f5f7fb;
  --app-surface: #ffffff;
  --app-surface-muted: #f9fafc;
  --app-ink: #172033;
  --app-text: var(--app-ink);
  --app-ink-soft: #475467;
  --app-muted: #667085;
  --app-text-muted: var(--app-muted);
  --app-soft: var(--app-surface-muted);
  --app-line: #e3e7ef;
  --app-accent: #5146d9;
  --app-accent-strong: #4035c8;
  --app-accent-soft: #f0efff;
  --app-success: #087553;
  --app-warning: #a15c00;
  --app-danger: #b4232f;
  --app-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 8px 22px rgba(16, 24, 40, 0.035);
}

/* Carga operativa dentro de Sedes y usuarios. */
body[data-signed-in="true"] .company-workload-strip {
  display: grid;
  gap: 16px;
  margin: 18px 0;
  padding: 18px 0;
  border-top: 1px solid var(--app-line);
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"] .company-workload-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

body[data-signed-in="true"] .company-workload-head .eyebrow {
  margin: 0;
}

body[data-signed-in="true"] .company-workload-head h4 {
  margin: 4px 0 5px;
  color: var(--app-text);
  font-size: 17px;
  line-height: 1.2;
}

body[data-signed-in="true"] .company-workload-head span {
  display: block;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"] .company-workload-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"] .company-workload-metrics button {
  display: grid;
  min-width: 0;
  min-height: 82px;
  padding: 13px 16px;
  border: 0;
  border-right: 1px solid var(--app-line);
  background: transparent;
  color: var(--app-text);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

body[data-signed-in="true"] .company-workload-metrics button:last-child {
  border-right: 0;
}

body[data-signed-in="true"] .company-workload-metrics button:hover,
body[data-signed-in="true"] .company-workload-metrics button:focus-visible {
  background: var(--app-soft);
  outline: 0;
}

body[data-signed-in="true"] .company-workload-metrics span,
body[data-signed-in="true"] .company-workload-metrics strong,
body[data-signed-in="true"] .company-workload-metrics small {
  display: block;
  min-width: 0;
}

body[data-signed-in="true"] .company-workload-metrics span {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-signed-in="true"] .company-workload-metrics strong {
  margin: 4px 0 2px;
  color: var(--app-text);
  font-size: 25px;
  line-height: 1;
}

body[data-signed-in="true"] .company-workload-metrics small {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .company-workload-metrics button.has-alert strong {
  color: var(--app-danger);
}

body[data-signed-in="true"] .company-workload-metrics button.has-warning strong {
  color: #b54708;
}

body[data-signed-in="true"] .mini-management-list article.company-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

body[data-signed-in="true"] .member-workload {
  display: grid;
  grid-template-columns: repeat(2, minmax(66px, auto));
  gap: 10px;
  min-width: 166px;
  margin: 0;
  padding: 0 14px;
  border-left: 1px solid var(--app-line);
}

body[data-signed-in="true"] .member-workload > div {
  display: grid;
  gap: 2px;
}

body[data-signed-in="true"] .member-workload dt {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-signed-in="true"] .member-workload dd {
  margin: 0;
  color: var(--app-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}

body[data-signed-in="true"] .member-workload .is-alert dd {
  color: var(--app-danger);
}

body[data-signed-in="true"] .member-workload .is-warning dd {
  color: #b54708;
}

body[data-signed-in="true"] .member-workload .is-progress dd {
  color: var(--app-accent-strong);
}

body[data-signed-in="true"] .member-workload .is-clear dd {
  color: var(--app-success);
}

@media (max-width: 980px) {
  body[data-signed-in="true"] .company-workload-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"] .company-workload-metrics button:nth-child(2n) {
    border-right: 0;
  }

  body[data-signed-in="true"] .company-workload-metrics button:nth-child(n + 3) {
    border-top: 1px solid var(--app-line);
  }

  body[data-signed-in="true"] .mini-management-list article.company-member-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body[data-signed-in="true"] .company-member-row .member-workload {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding: 11px 0 0;
    border-top: 1px solid var(--app-line);
    border-left: 0;
  }

  body[data-signed-in="true"] .company-member-row .member-actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .company-workload-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-signed-in="true"] .company-workload-head .secondary-button {
    width: 100%;
  }

  body[data-signed-in="true"] .company-workload-metrics {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .company-workload-metrics button,
  body[data-signed-in="true"] .company-workload-metrics button:nth-child(2n) {
    min-height: 68px;
    border-right: 0;
    border-top: 1px solid var(--app-line);
  }

  body[data-signed-in="true"] .company-workload-metrics button:first-child {
    border-top: 0;
  }

  body[data-signed-in="true"] .mini-management-list article.company-member-row {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .company-member-row .member-actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
  }
}

/* Settings workspace: a compact configuration surface with stable, scan-friendly groups. */
body[data-signed-in="true"] .settings-panel {
  width: min(1120px, 100%);
  margin: 0 auto;
  gap: 20px;
}

body[data-signed-in="true"] .settings-hero {
  align-items: flex-start;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 4px 0 0;
}

body[data-signed-in="true"] .settings-hero h3 {
  color: var(--app-ink);
  font-size: 28px;
  line-height: 1.15;
}

body[data-signed-in="true"] .settings-hero span:not(.status-pill) {
  max-width: 680px;
  color: var(--app-muted);
  font-size: 14px;
}

body[data-signed-in="true"] .settings-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

body[data-signed-in="true"] .settings-grid {
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: 14px;
}

body[data-signed-in="true"] .settings-card {
  gap: 16px;
  min-width: 0;
  border-color: var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
  padding: 18px;
}

body[data-signed-in="true"] .settings-card-head {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
}

body[data-signed-in="true"] .settings-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

body[data-signed-in="true"] .settings-card strong {
  color: var(--app-ink);
  font-size: 14px;
  line-height: 1.25;
}

body[data-signed-in="true"] .settings-card small,
body[data-signed-in="true"] .settings-card label > span,
body[data-signed-in="true"] .settings-field-label,
body[data-signed-in="true"] .settings-field-hint,
body[data-signed-in="true"] #helpTopicText {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"] .settings-field-stack {
  display: grid;
  gap: 12px;
}

body[data-signed-in="true"] .settings-card label {
  gap: 6px;
}

body[data-signed-in="true"] .settings-card select {
  min-height: 38px;
  border-color: #dce2eb;
  border-radius: 6px;
  background: var(--app-surface);
  color: var(--app-ink);
  font-size: 13px;
  padding: 8px 10px;
}

body[data-signed-in="true"] .settings-card-appearance {
  grid-column: span 1;
}

body[data-signed-in="true"] .settings-appearance-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.9fr) minmax(180px, 0.7fr);
  gap: 22px;
  align-items: start;
}

body[data-signed-in="true"] .settings-field-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 750;
}

body[data-signed-in="true"] .interface-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-signed-in="true"] .interface-mode-card {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 82px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface-muted);
  color: var(--app-ink-soft);
  padding: 8px;
}

body[data-signed-in="true"] .interface-mode-card.active {
  border-color: var(--app-accent);
  box-shadow: inset 0 0 0 1px var(--app-accent);
  color: var(--app-accent);
}

body[data-signed-in="true"] .interface-mode-card strong {
  font-size: 12px;
}

body[data-signed-in="true"] .interface-preview {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: 8px 18px;
  width: 58px;
  height: 32px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}

body[data-signed-in="true"] .interface-preview i {
  grid-row: 1 / -1;
  background: #edf1f7;
}

body[data-signed-in="true"] .interface-preview b {
  background: #ffffff;
}

body[data-signed-in="true"] .interface-preview em {
  display: block;
  width: 22px;
  height: 5px;
  align-self: center;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--app-accent);
}

body[data-signed-in="true"] .interface-preview-dark {
  border-color: #475467;
}

body[data-signed-in="true"] .interface-preview-dark i {
  background: #1e293b;
}

body[data-signed-in="true"] .interface-preview-dark b {
  background: #334155;
}

body[data-signed-in="true"] .theme-swatch-grid {
  gap: 10px;
}

body[data-signed-in="true"] .theme-swatch-grid button {
  width: 36px;
  height: 36px;
  border-width: 2px;
  box-shadow: inset 0 0 0 3px var(--app-surface), 0 2px 7px rgba(16, 24, 40, 0.11);
}

body[data-signed-in="true"] .theme-swatch-grid button.active {
  border-color: var(--app-ink);
}

body[data-signed-in="true"] .settings-field-hint {
  margin: 10px 0 0;
}

body[data-signed-in="true"] .response-preferences-card {
  grid-column: span 1;
}

body[data-signed-in="true"] .response-mode-choice-grid {
  display: grid;
  gap: 7px;
}

body[data-signed-in="true"] .response-mode-choice-grid .toggle-row,
body[data-signed-in="true"] .settings-notification-grid .toggle-row {
  min-height: 38px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface-muted);
  color: var(--app-ink-soft);
  padding: 8px 10px;
}

body[data-signed-in="true"] .response-mode-choice-grid .toggle-row input,
body[data-signed-in="true"] .settings-notification-grid .toggle-row input {
  accent-color: var(--app-accent);
}

body[data-signed-in="true"] .settings-integrations-card {
  grid-column: span 1;
}

body[data-signed-in="true"] .integration-status-list {
  display: grid;
  gap: 8px;
}

body[data-signed-in="true"] .integration-status-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface-muted);
  padding: 7px 9px;
}

body[data-signed-in="true"] .integration-mark {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 6px;
  background: #eeedff;
  color: var(--app-accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

body[data-signed-in="true"] .integration-mark-tripadvisor {
  background: #e8f7f1;
  color: #087553;
}

body[data-signed-in="true"] .integration-mark-stripe {
  background: #eeedff;
  color: #7650a8;
}

body[data-signed-in="true"] .integration-status-row em {
  color: var(--app-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

body[data-signed-in="true"] .integration-status-row em::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 999px;
  background: #98a2b3;
  content: "";
}

body[data-signed-in="true"] .integration-status-row em[data-state="connected"] {
  color: var(--app-success);
}

body[data-signed-in="true"] .integration-status-row em[data-state="connected"]::before {
  background: var(--app-success);
}

body[data-signed-in="true"] .integration-status-row em[data-state="neutral"] {
  color: var(--app-warning);
}

body[data-signed-in="true"] .integration-status-row em[data-state="neutral"]::before {
  background: var(--app-warning);
}

body[data-signed-in="true"] .settings-help-card {
  border-color: var(--app-accent);
  background: var(--app-accent);
}

body[data-signed-in="true"] .settings-help-card .settings-icon {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

body[data-signed-in="true"] .settings-help-card strong,
body[data-signed-in="true"] .settings-help-card small,
body[data-signed-in="true"] .settings-help-card #helpTopicText {
  color: #ffffff;
}


body[data-signed-in="true"] .settings-help-card .help-link-grid button {
  border-color: rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font-size: 12px;
  padding: 8px 10px;
}

body[data-signed-in="true"] .settings-help-card .help-link-grid button:hover {
  border-color: #ffffff;
  color: #ffffff;
}

body[data-signed-in="true"] .settings-notifications-card {
  grid-column: 1 / -1;
}

body[data-signed-in="true"] .settings-notification-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1.35fr) repeat(3, minmax(145px, 1fr));
  gap: 10px;
  align-items: stretch;
}

body[data-signed-in="true"] .settings-notification-grid > label:first-child {
  grid-row: span 2;
}

body[data-signed-in="true"] .settings-notification-grid > label:first-child select {
  height: 100%;
}

body[data-signed-in="true"] .settings-notification-grid .toggle-row {
  justify-content: flex-start;
  font-size: 12px;
}

body[data-signed-in="true"][data-interface-mode="dark"] {
  --app-canvas: #171d28;
  --app-surface: #1e293b;
  --app-surface-muted: #263142;
  --app-ink: #f8fafc;
  --app-ink-soft: #cfd7e7;
  --app-muted: #aab5c7;
  --app-line: #3a4659;
  --app-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  /*
    --app-accent/--app-accent-strong/--app-accent-soft are only ever defined
    at :root (light mode) - a deep purple tuned for a white background.
    Unredefined here, every accent-colored label, active nav item, badge
    and focus ring stayed that same dark purple on dark surfaces: text you
    can barely read. Lighten them for dark backgrounds.
  */
  --app-accent: #8b7cf6;
  --app-accent-strong: #a78bfa;
  --app-accent-soft: color-mix(in srgb, #8b7cf6 22%, var(--app-surface));
  /*
    Same problem, same fix, for the semantic status colors: --app-success/
    --app-warning/--app-danger are only ever defined at :root, tuned dark
    enough to read on white. Every success/warning/danger label, badge and
    action link stayed that same low-contrast color on dark surfaces.
  */
  --app-success: #34d399;
  --app-warning: #fbbf24;
  --app-danger: #f87171;
  /*
    Biggest lever in this whole audit: styles.css - the oldest, base layer -
    has its OWN separate, older token set (--blue, --ink, --muted, --line,
    --panel, --bg, --green, --coral, --gold, --shadow...) that most of the
    file's original rules were written against, entirely independent of the
    --app-* system layered on top later. --blue alone is referenced 68
    times, --line 119. None of it was ever redefined for dark mode, so
    every rule still written against the old tokens - a large fraction of
    the whole app - kept its light-mode color. Redefine the old tokens too,
    reusing the --app-* dark values already tuned above so both systems
    stay in sync.
  */
  --bg: var(--app-canvas);
  --panel: var(--app-surface);
  --ink: var(--app-ink);
  --muted: var(--app-muted);
  --line: var(--app-line);
  --outline: var(--app-ink-soft);
  --outline-variant: var(--app-line);
  --green: var(--app-success);
  --green-dark: var(--app-success);
  --coral: var(--app-danger);
  --gold: var(--app-warning);
  /*
    --coral above intentionally follows --app-danger's dark-mode lightening
    (#f87171, tuned as danger-colored TEXT on a dark surface) - but
    .notification-badge (styles.css) uses it as a solid background with white
    text, background: var(--coral), which is the opposite case: white-on-#f87171
    is only 2.8:1, under WCAG AA. Overridden separately below with a denser red
    that keeps white text legible, rather than weakening --coral's own fix for
    every other (text-on-dark) use.
  */
  --blue: var(--app-accent-strong);
  --sky: #38bdf8;
  --soft-green: color-mix(in srgb, var(--app-success) 18%, var(--app-surface));
  --soft-coral: color-mix(in srgb, var(--app-danger) 18%, var(--app-surface));
  --soft-blue: color-mix(in srgb, var(--app-accent) 18%, var(--app-surface));
  --shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  /*
    --app-text/--app-text-muted/--app-soft are declared once at :root as
    aliases (e.g. --app-text: var(--app-ink)) and resolved at that point,
    not re-resolved live. Without redeclaring them here they stay frozen to
    the light-mode ink/muted/surface values, producing near-invisible dark
    text and flashed-white hover states in dark mode.
  */
  --app-text: var(--app-ink);
  --app-text-muted: var(--app-muted);
  --app-soft: var(--app-surface-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .sidebar,
body[data-signed-in="true"][data-interface-mode="dark"] .topbar,
body[data-signed-in="true"][data-interface-mode="dark"] .settings-card select,
body[data-signed-in="true"][data-interface-mode="dark"] .interface-mode-card,
body[data-signed-in="true"][data-interface-mode="dark"] .integration-status-row,
body[data-signed-in="true"][data-interface-mode="dark"] .response-mode-choice-grid .toggle-row,
body[data-signed-in="true"][data-interface-mode="dark"] .settings-notification-grid .toggle-row,
body[data-signed-in="true"][data-interface-mode="dark"] .company-management-panel {
  background: var(--app-surface);
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .settings-card,
body[data-signed-in="true"][data-interface-mode="dark"] .settings-card strong,
body[data-signed-in="true"][data-interface-mode="dark"] .settings-hero h3 {
  color: var(--app-ink);
}

@media (max-width: 900px) {
  body[data-signed-in="true"] .settings-grid,
  body[data-signed-in="true"] .settings-notification-grid {
    grid-template-columns: 1fr 1fr;
  }

  body[data-signed-in="true"] .settings-notification-grid > label:first-child {
    grid-row: auto;
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .settings-hero,
  body[data-signed-in="true"] .settings-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-signed-in="true"] .settings-hero-actions > * {
    width: 100%;
    justify-content: center;
  }

  body[data-signed-in="true"] .settings-grid,
  body[data-signed-in="true"] .settings-appearance-layout,
  body[data-signed-in="true"] .settings-notification-grid {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .settings-notification-grid > label:first-child {
    grid-column: auto;
  }
}

html {
  background: var(--app-canvas);
}

body {
  min-width: 320px;
  background: var(--app-canvas);
  color: var(--app-ink);
  font-family: var(--app-font);
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(81, 70, 217, 0.24);
  outline-offset: 2px;
}

/* Signed-in shell: workspace was previously offset by both grid and margin. */
body[data-signed-in="true"] .app-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: start;
  background: var(--app-canvas);
}

body[data-signed-in="true"] .sidebar {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  width: auto;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 14px 18px;
  gap: 16px;
  border-right: 1px solid var(--app-line);
  background: #ffffff;
}

body[data-signed-in="true"] .workspace {
  width: auto;
  min-width: 0;
  margin-left: 0;
  padding: 0 32px 56px;
  background: var(--app-canvas);
}

body[data-signed-in="true"] .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-width: 0;
  margin: 0 -32px;
  padding: 12px 32px;
  border-bottom: 1px solid var(--app-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
}

body[data-signed-in="true"] .brand {
  min-width: 0;
  padding: 0 8px 2px;
}

body[data-signed-in="true"] .brand-mark {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

body[data-signed-in="true"] .brand h1 {
  font-size: 18px;
  line-height: 1.1;
}

body[data-signed-in="true"] .brand p {
  font-size: 11px;
  line-height: 1.35;
}

/* Navigation is compact enough to scan but keeps clear active state. */
body[data-signed-in="true"] .view-switch,
body[data-signed-in="true"] .client-nav {
  min-width: 0;
}

body[data-signed-in="true"] .view-switch {
  width: 100%;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-muted);
  box-shadow: none;
  box-sizing: border-box;
}

body[data-signed-in="true"] .client-nav {
  gap: 2px;
}

body[data-signed-in="true"] .view-switch button,
body[data-signed-in="true"] .client-nav button {
  min-height: 40px;
  border-radius: 6px;
  border-color: transparent;
  color: var(--app-ink-soft);
  font-size: 13px;
  font-weight: 700;
}

body[data-signed-in="true"] .view-switch button:hover,
body[data-signed-in="true"] .client-nav button:hover {
  color: var(--app-accent-strong);
  background: var(--app-accent-soft);
}

body[data-signed-in="true"] .view-switch button.active,
body[data-signed-in="true"] .client-nav button.active {
  color: var(--app-accent-strong);
  background: var(--app-accent-soft);
  box-shadow: inset 3px 0 0 var(--app-accent);
}

body[data-signed-in="true"] .view-switch button.active {
  box-shadow: none;
}

/*
  Group the 9 flat client-nav destinations into scannable clusters (activity,
  channels, account) instead of one undifferentiated list. Only shown in the
  real vertical sidebar (>=981px) - hidden in the 621-980px horizontal
  scroll-strip mode, where a divider would just be a stray flex item.
*/
body[data-signed-in="true"] .client-nav-divider {
  display: none;
}

@media (min-width: 981px) {
  body[data-signed-in="true"] .client-nav-divider {
    display: block;
    margin: 10px 2px 6px;
    padding-top: 10px;
    border-top: 1px solid var(--app-line);
  }

  body[data-signed-in="true"] .client-nav-divider span {
    display: block;
    color: var(--app-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

/* Admin navigation contains destinations, while editing controls stay in the workspace. */
body[data-signed-in="true"] .admin-section-nav {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--app-line);
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"] .admin-section-nav button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--app-ink-soft);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

body[data-signed-in="true"] .admin-section-nav button:hover,
body[data-signed-in="true"] .admin-section-nav button.active {
  border-color: transparent;
  color: var(--app-accent-strong);
  background: var(--app-accent-soft);
}

body[data-signed-in="true"] .admin-section-nav button.active {
  box-shadow: inset 3px 0 0 var(--app-accent);
}

body[data-signed-in="true"] .auth-block .guest-access-note,
body[data-signed-in="true"] .auth-block .account-connect {
  display: none;
}

body[data-signed-in="true"] .auth-block {
  gap: 8px;
  padding: 12px;
}

body[data-signed-in="true"] .auth-block .auth-actions {
  margin-top: 0;
}

body[data-signed-in="true"] .admin-company-context,
body[data-signed-in="true"] .admin-import-panel {
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
  scroll-margin-top: 86px;
}

body[data-signed-in="true"] .admin-context-head,
body[data-signed-in="true"] .admin-import-panel {
  align-items: start;
}

body[data-signed-in="true"] .admin-context-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

body[data-signed-in="true"] .admin-context-head h3,
body[data-signed-in="true"] .admin-import-panel h3 {
  margin-top: 3px;
  font-size: 20px;
}

body[data-signed-in="true"] .admin-context-head p:last-child,
body[data-signed-in="true"] .admin-import-panel > div > p:last-child {
  max-width: 640px;
  margin: 5px 0 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.5;
}

body[data-signed-in="true"] .admin-context-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

body[data-signed-in="true"] .admin-context-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body[data-signed-in="true"] .admin-context-fields label,
body[data-signed-in="true"] .file-upload-control {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 750;
}

body[data-signed-in="true"] .admin-context-fields label > span,
body[data-signed-in="true"] .file-upload-control > span {
  color: var(--app-ink-soft);
}

body[data-signed-in="true"] .admin-context-fields input,
body[data-signed-in="true"] .admin-context-fields select,
body[data-signed-in="true"] .file-upload-control input {
  width: 100%;
  min-width: 0;
}

body[data-signed-in="true"] .admin-import-panel {
  grid-template-columns: minmax(0, 0.8fr) minmax(460px, 1.2fr);
}

body[data-signed-in="true"] .admin-import-actions {
  display: grid;
  grid-template-columns: minmax(170px, 1.45fr) repeat(3, minmax(120px, 1fr));
  align-items: end;
  gap: 10px;
}

body[data-signed-in="true"] .admin-import-actions button {
  min-height: 42px;
  padding: 9px 11px;
  white-space: nowrap;
}

body[data-signed-in="true"] #adminBillingSection,
body[data-signed-in="true"] #companyManagementSection {
  scroll-margin-top: 86px;
}

[data-icon="invoice"]::before {
  content: "EUR";
  font-size: 8px;
}

/* Consistent controls and surfaces. */
body[data-signed-in="true"] .auth-block,
body[data-signed-in="true"] .tenant-block,
body[data-signed-in="true"] .automation-block,
body[data-signed-in="true"] .session-profile {
  border-color: var(--app-line);
  border-radius: 8px;
  box-shadow: none;
}

body[data-signed-in="true"] input,
body[data-signed-in="true"] select,
body[data-signed-in="true"] textarea {
  min-height: 42px;
  border-color: #dce2eb;
  border-radius: 7px;
  color: var(--app-ink);
  background: var(--app-surface);
}

body[data-signed-in="true"] textarea {
  min-height: 120px;
}

body[data-signed-in="true"] input:focus,
body[data-signed-in="true"] select:focus,
body[data-signed-in="true"] textarea:focus {
  border-color: #756be6;
  box-shadow: 0 0 0 3px rgba(81, 70, 217, 0.11);
}

body[data-signed-in="true"] .primary-button,
body[data-signed-in="true"] .google-button,
body[data-signed-in="true"] .secondary-button,
body[data-signed-in="true"] .approve-button {
  min-height: 40px;
  border-radius: 7px;
  font-weight: 700;
}

body[data-signed-in="true"] .primary-button,
body[data-signed-in="true"] .google-button {
  background: var(--app-accent);
  box-shadow: 0 5px 12px rgba(81, 70, 217, 0.14);
}

body[data-signed-in="true"] .primary-button:hover,
body[data-signed-in="true"] .google-button:hover {
  background: var(--app-accent-strong);
  box-shadow: 0 7px 16px rgba(81, 70, 217, 0.18);
  transform: translateY(-1px);
}

body[data-signed-in="true"] .secondary-button,
body[data-signed-in="true"] .approve-button {
  border-color: #dce2eb;
  color: #334155;
  background: var(--app-surface);
  box-shadow: none;
}

body[data-signed-in="true"] .secondary-button:hover,
body[data-signed-in="true"] .approve-button:hover {
  border-color: #c8c4f5;
  color: var(--app-accent-strong);
  background: #faf9ff;
  transform: translateY(-1px);
}

body[data-signed-in="true"] .topbar-search {
  width: min(460px, 45vw);
  min-width: 220px;
  border-color: var(--app-line);
  background: #f8fafc;
}

body[data-signed-in="true"] .topbar-icon,
body[data-signed-in="true"] .user-chip {
  border-color: var(--app-line);
}

body[data-signed-in="true"] .page-heading,
body[data-signed-in="true"] .client-dashboard {
  max-width: 1360px;
}

body[data-signed-in="true"] .page-heading {
  gap: 20px;
  padding-top: 28px;
  margin-bottom: 22px;
}

body[data-signed-in="true"] .page-heading h2,
body[data-signed-in="true"] .superadmin-hero h3 {
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1.16;
}

body[data-signed-in="true"] .eyebrow {
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 800;
}

body[data-signed-in="true"] .summary-strip {
  gap: 10px;
}

body[data-signed-in="true"] .summary-strip button {
  min-height: 70px;
  border-color: var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: none;
}

body[data-signed-in="true"] .summary-strip button:hover {
  border-color: #c8c4f5;
  background: #faf9ff;
}

body[data-signed-in="true"] .saas-strip,
body[data-signed-in="true"] .role-notice,
body[data-signed-in="true"] .billing-notice {
  border-color: var(--app-line);
  border-radius: 8px;
  box-shadow: none;
}

/* Dashboard uses repeated card patterns with predictable vertical rhythm. */
body[data-signed-in="true"] .client-dashboard {
  margin-top: 28px;
}

/* Client workspace: prioritise the review queue and insights over setup controls. */
body[data-signed-in="true"] .client-report-shortcut {
  margin-top: auto;
  padding-top: 10px;
}

body[data-signed-in="true"] .client-report-shortcut .primary-button {
  width: 100%;
  justify-content: center;
}

body[data-signed-in="true"] .client-dashboard {
  display: grid;
  gap: 20px;
}

body[data-signed-in="true"] .client-dashboard-hero { order: 1; }
body[data-signed-in="true"] .client-dashboard .task-grid { order: 2; }
body[data-signed-in="true"] .client-dashboard .company-kpi-section { order: 3; }
body[data-signed-in="true"] .client-dashboard .dashboard-visuals { order: 4; }
body[data-signed-in="true"] .client-dashboard .pending-tasks-head { order: 5; }
body[data-signed-in="true"] .client-dashboard .pending-task-grid { order: 6; }
body[data-signed-in="true"] .client-dashboard .operational-strip { order: 7; }
body[data-signed-in="true"] .client-dashboard .compact-task-list { order: 8; }
body[data-signed-in="true"] .client-dashboard .action-plan-panel { order: 9; }
body[data-signed-in="true"] .client-dashboard .dashboard-review-queue { order: 10; }
body[data-signed-in="true"] .client-dashboard .dashboard-keywords { order: 11; }

body[data-signed-in="true"] .client-dashboard-hero {
  align-items: center;
  min-height: 54px;
}

body[data-signed-in="true"] .client-dashboard-hero h3 {
  margin-top: 5px;
  color: var(--app-ink);
  font-size: 20px;
}

body[data-signed-in="true"] .client-dashboard-hero span {
  margin-top: 5px;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 600;
}

body[data-signed-in="true"] .client-dashboard .task-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body[data-signed-in="true"] .client-dashboard .metric-card {
  min-height: 132px;
  padding: 50px 16px 15px;
}

body[data-signed-in="true"] .client-dashboard .metric-card::before {
  top: 16px;
  left: 16px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

body[data-signed-in="true"] .client-dashboard .metric-card::after {
  top: 18px;
  right: 16px;
  padding: 4px 7px;
  font-size: 10px;
}

body[data-signed-in="true"] .client-dashboard .metric-card span {
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
}

body[data-signed-in="true"] .client-dashboard .metric-card strong {
  margin-top: 6px;
  font-size: 26px;
}

body[data-signed-in="true"] .company-kpi-section {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

body[data-signed-in="true"] .company-kpi-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

body[data-signed-in="true"] .company-kpi-head .eyebrow,
body[data-signed-in="true"] .company-kpi-head h3,
body[data-signed-in="true"] .company-kpi-head p {
  margin: 0;
}

body[data-signed-in="true"] .company-kpi-head h3 {
  margin-top: 4px;
  color: var(--app-ink);
  font-size: 18px;
}

body[data-signed-in="true"] .company-kpi-head p:last-child {
  margin-top: 4px;
  color: var(--app-muted);
  font-size: 12px;
}

body[data-signed-in="true"] .company-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body[data-signed-in="true"] .company-kpi-card {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 112px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
  padding: 15px;
}

body[data-signed-in="true"] .company-kpi-card > span {
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 750;
}

body[data-signed-in="true"] .company-kpi-card strong {
  color: var(--app-ink);
  font-size: 24px;
  line-height: 1.15;
}

body[data-signed-in="true"] .company-kpi-card small {
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
}

body[data-signed-in="true"] .company-kpi-plan strong { color: var(--app-accent-strong); }
body[data-signed-in="true"] .company-kpi-locations strong { color: #087553; }
body[data-signed-in="true"] .company-kpi-members strong { color: #0f67d8; }

body[data-signed-in="true"] .company-kpi-usage-track {
  height: 6px;
  overflow: hidden;
  margin-top: 3px;
  border-radius: 999px;
  background: #e0e5f0;
}

body[data-signed-in="true"] .company-kpi-usage-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--app-accent);
  transition: width 180ms ease;
}

body[data-signed-in="true"] .client-dashboard .dashboard-visuals {
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.7fr);
  gap: 14px;
}

body[data-signed-in="true"] .client-dashboard .rating-evolution-panel,
body[data-signed-in="true"] .client-dashboard .star-distribution-panel {
  min-height: 310px;
  padding: 20px;
}

body[data-signed-in="true"] .client-dashboard .rating-evolution-panel .panel-title strong,
body[data-signed-in="true"] .client-dashboard .star-distribution-panel .panel-title strong {
  font-size: 16px;
}

body[data-signed-in="true"] .client-dashboard #evolutionChart {
  min-height: 225px;
  margin-top: 0;
}

body[data-signed-in="true"] .client-dashboard .star-distribution-panel svg {
  min-height: 175px;
}

body[data-signed-in="true"] .client-dashboard .distribution-quote {
  margin-top: 0;
  font-size: 12px;
}

body[data-signed-in="true"] .client-dashboard .pending-task-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body[data-signed-in="true"] .client-dashboard .pending-bar,
body[data-signed-in="true"] .client-dashboard .attention-card {
  min-height: 88px;
  padding: 16px 18px;
  border-radius: 8px;
}

body[data-signed-in="true"] .client-dashboard .operational-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-top: 4px;
}

body[data-signed-in="true"] .client-dashboard .operational-strip article {
  min-height: 104px;
  padding: 15px;
}

body[data-signed-in="true"] .client-dashboard .operational-strip strong {
  margin-top: 6px;
  font-size: 18px;
}

body[data-signed-in="true"] .client-dashboard .operational-strip small {
  margin-top: 5px;
  font-size: 11px;
}

body[data-signed-in="true"] .response-preferences-card {
  align-content: start;
  gap: 16px;
}

body[data-signed-in="true"] .response-mode-settings {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--app-line);
  padding-top: 14px;
}

body[data-signed-in="true"] .response-mode-settings > p {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Comment diagnostics fill the card with useful review-risk context instead of a stretched legend. */
body[data-signed-in="true"] .dashboard-keywords {
  gap: 18px;
  padding: 20px;
}

body[data-signed-in="true"] .dashboard-keywords .panel-title {
  align-items: center;
}

body[data-signed-in="true"] .keyword-coverage {
  flex: 0 0 auto;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 750;
}

body[data-signed-in="true"] .keyword-diagnostic-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr);
  gap: 30px;
  align-items: stretch;
}

body[data-signed-in="true"] .dashboard-keywords .donut-wrap {
  grid-template-columns: 180px minmax(120px, 1fr);
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 470px;
}

body[data-signed-in="true"] .dashboard-keywords #keywordChart {
  width: 180px;
  height: 180px;
}

body[data-signed-in="true"] .dashboard-keywords .keyword-legend {
  gap: 10px;
}

body[data-signed-in="true"] .dashboard-keywords .keyword-legend li {
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 8px;
  color: var(--app-ink-soft);
  font-size: 13px;
}

body[data-signed-in="true"] .dashboard-keywords .keyword-legend li span {
  width: 9px;
  height: 9px;
}

body[data-signed-in="true"] .dashboard-keywords .keyword-legend strong {
  color: var(--app-ink);
  font-weight: 750;
}

body[data-signed-in="true"] .dashboard-keywords .keyword-legend small {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 750;
}

body[data-signed-in="true"] .keyword-problem-summary {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  border-left: 1px solid var(--app-line);
  padding-left: 30px;
}

body[data-signed-in="true"] .keyword-problem-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

body[data-signed-in="true"] .keyword-problem-head > div {
  display: grid;
  gap: 4px;
}

body[data-signed-in="true"] .keyword-problem-head > div > span {
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 750;
}

body[data-signed-in="true"] .keyword-problem-head strong {
  color: var(--app-ink);
  font-size: 18px;
}

body[data-signed-in="true"] .keyword-problem-head small {
  color: var(--app-muted);
  font-size: 12px;
}

body[data-signed-in="true"] .keyword-problems-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-signed-in="true"] .keyword-problems-list button {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 50px;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #faf9ff;
  color: inherit;
  padding: 9px 10px;
  text-align: left;
}

body[data-signed-in="true"] .keyword-problems-list button:not(:disabled):hover {
  border-color: #c8c4f5;
  background: #f8fafc;
}

body[data-signed-in="true"] .keyword-problems-list button:disabled {
  cursor: default;
  opacity: 0.7;
}

body[data-signed-in="true"] .keyword-problems-list button > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

body[data-signed-in="true"] .keyword-problems-list strong {
  color: var(--app-ink);
  font-size: 13px;
}

body[data-signed-in="true"] .keyword-problems-list small {
  color: var(--app-muted);
  font-size: 11px;
}

body[data-signed-in="true"] .keyword-problems-list em {
  color: var(--app-danger);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

body[data-signed-in="true"] .keyword-problem-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-warning);
}

body[data-signed-in="true"] .keyword-problem-dot.critical { background: var(--app-danger); }

body[data-signed-in="true"] .keyword-problem-empty {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.5;
  padding: 9px 0;
}

@media (max-width: 980px) {
  body[data-signed-in="true"] .client-dashboard .task-grid,
  body[data-signed-in="true"] .client-dashboard .operational-strip,
  body[data-signed-in="true"] .company-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"] .client-dashboard .dashboard-visuals {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .keyword-diagnostic-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body[data-signed-in="true"] .keyword-problem-summary {
    border-top: 1px solid var(--app-line);
    border-left: 0;
    padding-top: 20px;
    padding-left: 0;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .client-dashboard .task-grid,
  body[data-signed-in="true"] .client-dashboard .pending-task-grid,
  body[data-signed-in="true"] .client-dashboard .operational-strip,
  body[data-signed-in="true"] .company-kpi-grid {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .company-kpi-head {
    align-items: start;
    flex-direction: column;
  }

  body[data-signed-in="true"] .dashboard-keywords .panel-title,
  body[data-signed-in="true"] .keyword-problem-head,
  body[data-signed-in="true"][data-app-view="platform"] .platform-activity-card .panel-title {
    align-items: start;
    flex-direction: column;
  }

  body[data-signed-in="true"][data-app-view="platform"] .chart-legend {
    flex-wrap: wrap;
  }

  body[data-signed-in="true"] .dashboard-keywords .donut-wrap {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
  }

  body[data-signed-in="true"] .dashboard-keywords #keywordChart {
    width: 150px;
    height: 150px;
  }

  body[data-signed-in="true"] .client-dashboard .dashboard-hero-actions {
    width: 100%;
    justify-content: stretch;
  }

  body[data-signed-in="true"] .client-dashboard .dashboard-hero-actions > * {
    flex: 1 1 0;
  }
}

/* Desktop review workbench: filters stay in their own rail and reviews remain the focus. */
@media (min-width: 721px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .app-shell {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .sidebar {
    position: sticky;
    top: 0;
    width: auto;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 8px;
    border-right: 1px solid var(--app-line);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .auth-block,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .client-report-shortcut {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .workspace {
    padding: 0 18px 34px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .topbar {
    margin: 0 -18px;
    padding: 9px 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .page-heading,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .saas-strip {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-workbench {
    display: grid;
    grid-template-columns: 206px minmax(0, 1fr);
    min-height: calc(100dvh - 62px);
    margin: 0 -18px;
    border: 1px solid var(--app-line);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #f8fafc;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail {
    position: sticky;
    top: 57px;
    align-self: start;
    min-height: calc(100dvh - 57px);
    padding: 18px 14px;
    border-right: 1px solid var(--app-line);
    background: #ffffff;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail-head {
    margin-bottom: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail-head .eyebrow {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail-head h3 {
    margin: 0;
    color: var(--app-ink);
    font-size: 15px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-health-panel {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar {
    display: grid;
    gap: 15px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar .search-wrap {
    gap: 6px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar .search-wrap label,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-selects label {
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="reviews"] .review-toolbar .search-wrap label,
  body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="reviews"] .review-filter-selects label {
    color: var(--app-muted);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar input,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar select {
    min-height: 36px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 12px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .status-filter {
    display: grid;
    gap: 5px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .status-filter button {
    display: flex;
    justify-content: space-between;
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 12px;
    text-align: left;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-selects {
    display: grid;
    gap: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-selects label {
    display: grid;
    gap: 5px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 0;
    background: transparent;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .segmented button {
    min-height: 30px;
    border: 1px solid #dce2eb;
    border-radius: 6px;
    background: #ffffff;
    font-size: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .segmented button.active {
    border-color: #c6c0ff;
    background: #eeedff;
    color: #3c31c7;
    box-shadow: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-feedback {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #e0e5f0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-summary {
    font-size: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-clear {
    width: 100%;
    min-height: 34px;
    font-size: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox {
    min-width: 0;
    padding: 18px 20px 28px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox-head .eyebrow {
    margin: 0 0 3px;
    color: #6254d8;
    font-size: 10px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox-head h2 {
    margin: 0;
    color: var(--app-ink);
    font-size: 18px;
    line-height: 1.2;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] #reviewInboxCount {
    display: inline-block;
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
  }

  body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="reviews"] #reviewInboxCount {
    color: var(--app-muted);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox-actions button {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 12px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .insights {
    display: flex;
    min-height: 0;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .insights .distribution {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-actions,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .quick-actions button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .bulk-action-status {
    margin: 0;
    font-size: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-list {
    gap: 14px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-card {
    grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
    border-radius: 8px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-main {
    padding: 18px 20px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-head h3 {
    font-size: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .comment {
    font-size: 14px;
    line-height: 1.55;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .reply-panel {
    padding: 16px 18px;
    background: #f8fafc;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-card textarea {
    height: 114px;
    min-height: 114px;
    font-size: 13px;
  }

  /* Client dashboard follows the same compact operating layout as the review inbox. */
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .app-shell {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .sidebar {
    position: sticky;
    top: 0;
    width: auto;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 8px;
    border-right: 1px solid var(--app-line);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .auth-block {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .workspace {
    padding: 0 34px 46px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .topbar {
    margin: 0 -34px;
    padding: 9px 34px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .page-heading,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .saas-strip {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard {
    max-width: 1180px;
    margin: 24px auto 0;
    gap: 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero {
    padding: 0;
    border: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero h3 {
    margin-top: 3px;
    font-size: 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero span {
    margin-top: 4px;
    font-size: 12px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-range {
    min-height: 36px;
    padding: 7px 11px;
    font-size: 12px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .operational-strip {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .task-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-card {
    min-height: 122px;
    padding: 43px 15px 14px;
    border-radius: 8px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card::before {
    top: 15px;
    left: 15px;
    width: 27px;
    height: 27px;
    background-size: 15px 15px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card span {
    font-size: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card strong {
    margin-top: 6px;
    font-size: 25px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card small {
    margin-top: 4px;
    font-size: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-visuals {
    grid-template-columns: minmax(0, 1.45fr) minmax(190px, 0.7fr);
    gap: 14px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .rating-evolution-panel,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .star-distribution-panel {
    min-height: 292px;
    padding: 18px;
    border-radius: 8px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .rating-evolution-panel svg {
    min-height: 210px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .star-distribution-panel svg {
    min-height: 175px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .pending-tasks-head {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .pending-task-grid {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .pending-bar,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .attention-card {
    min-height: 76px;
    padding: 14px 16px;
    border-radius: 8px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .compact-task-list {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .company-kpi-section {
    order: 6;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel {
    order: 5;
    gap: 8px;
    padding: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel .panel-title {
    align-items: end;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel .panel-title span:first-child {
    color: #6254d8;
    font-size: 10px;
    font-weight: 850;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel .panel-title strong {
    margin-top: 2px;
    font-size: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel .connection-status {
    color: #6f7c92;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-item {
    min-height: 112px;
    gap: 7px;
    padding: 13px;
    border-radius: 7px;
    box-shadow: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-item h4 {
    font-size: 14px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-item p,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-item-head > span:last-child {
    font-size: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-footer {
    margin-top: auto;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-footer button {
    min-height: 28px;
    padding: 5px 8px;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-review-queue {
    order: 7;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-keywords {
    order: 8;
  }
}

@media (min-width: 721px) and (max-width: 980px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .workspace {
    padding-right: 16px;
    padding-left: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .topbar {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .topbar-search {
    width: min(280px, 42vw);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard {
    margin-top: 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .task-grid {
    gap: 10px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-card {
    min-height: 106px;
    padding: 38px 12px 12px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card::before {
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    background-size: 13px 13px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card strong {
    font-size: 21px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card span,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card small {
    font-size: 10px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-visuals {
    grid-template-columns: minmax(0, 1.45fr) minmax(175px, 0.68fr);
    gap: 12px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .rating-evolution-panel,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .star-distribution-panel {
    min-height: 250px;
    padding: 14px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .rating-evolution-panel svg {
    min-height: 178px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .star-distribution-panel svg {
    min-height: 145px;
  }
}

/* Star distribution uses a consistent positive-to-critical color scale. */
body[data-signed-in="true"] .star-distribution-panel .chart-bar-5 { fill: #13a873; }
body[data-signed-in="true"] .star-distribution-panel .chart-bar-4 { fill: #2298dc; }
body[data-signed-in="true"] .star-distribution-panel .chart-bar-3 { fill: #e9aa22; }
body[data-signed-in="true"] .star-distribution-panel .chart-bar-2 { fill: #ef8c2d; }
body[data-signed-in="true"] .star-distribution-panel .chart-bar-1 { fill: #dc4d58; }

body[data-signed-in="true"] .star-distribution-panel .chart-label-5 { fill: var(--app-success); }
body[data-signed-in="true"] .star-distribution-panel .chart-label-4 { fill: #187bb4; }
body[data-signed-in="true"] .star-distribution-panel .chart-label-3 { fill: #a76d00; }
body[data-signed-in="true"] .star-distribution-panel .chart-label-2 { fill: #b55d0d; }
body[data-signed-in="true"] .star-distribution-panel .chart-label-1 { fill: #b5303b; }

body[data-signed-in="true"] .client-dashboard-hero,
body[data-signed-in="true"] .superadmin-hero,
body[data-signed-in="true"] .profile-head,
body[data-signed-in="true"] .support-center-head {
  gap: 20px;
}

body[data-signed-in="true"] .operational-strip,
body[data-signed-in="true"] .client-dashboard .task-grid,
body[data-signed-in="true"] .dashboard-visuals,
body[data-signed-in="true"] .pending-task-grid,
body[data-signed-in="true"] .platform-panel .platform-grid,
body[data-signed-in="true"] .superadmin-grid {
  gap: 14px;
}

body[data-signed-in="true"] .operational-strip article,
body[data-signed-in="true"] .metric-card,
body[data-signed-in="true"] .rating-evolution-panel,
body[data-signed-in="true"] .star-distribution-panel,
body[data-signed-in="true"] .keyword-chart-panel,
body[data-signed-in="true"] .dashboard-review-queue,
body[data-signed-in="true"] .action-plan-panel,
body[data-signed-in="true"] .task-list-panel,
body[data-signed-in="true"] .client-profile,
body[data-signed-in="true"] .google-guide-panel,
body[data-signed-in="true"] .support-center,
body[data-signed-in="true"] .toolbar,
body[data-signed-in="true"] .review-card,
body[data-signed-in="true"] .detail-review-card,
body[data-signed-in="true"] .backoffice-panel,
body[data-signed-in="true"] .platform-panel,
body[data-signed-in="true"] .connection-card,
body[data-signed-in="true"] .support-ticket,
body[data-signed-in="true"] .table-toolbar,
body[data-signed-in="true"] .platform-metric,
body[data-signed-in="true"] .platform-activity-card,
body[data-signed-in="true"] .incidents-card,
body[data-signed-in="true"] .client-table-wrap {
  border-color: var(--app-line);
  border-radius: 8px;
  box-shadow: var(--app-shadow);
}

body[data-signed-in="true"] .operational-strip article {
  min-height: 116px;
  padding: 17px 18px 16px;
}

body[data-signed-in="true"] .metric-card {
  min-height: 132px;
  padding: 49px 18px 16px;
}

body[data-signed-in="true"] .metric-card strong {
  font-size: 27px;
}

body[data-signed-in="true"] .rating-evolution-panel,
body[data-signed-in="true"] .star-distribution-panel,
body[data-signed-in="true"] .client-profile,
body[data-signed-in="true"] .google-guide-panel,
body[data-signed-in="true"] .support-center,
body[data-signed-in="true"] .backoffice-panel,
body[data-signed-in="true"] .platform-panel {
  padding: 22px;
}

body[data-signed-in="true"] .review-card {
  padding: 20px;
}

body[data-signed-in="true"] .review-card:hover,
body[data-signed-in="true"] .portfolio-status-card:hover {
  border-color: #c8c4f5;
  box-shadow: 0 8px 22px rgba(52, 47, 156, 0.08);
}

/* Review inbox: clear separation between customer context and reply workflow. */
body[data-signed-in="true"] .review-list {
  gap: 16px;
}

body[data-signed-in="true"] .review-card {
  grid-template-columns: minmax(0, 1fr) minmax(370px, 430px);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

body[data-signed-in="true"] .review-card.review-needs-attention {
  border-left: 3px solid #df4d4d;
}

body[data-signed-in="true"] .review-main {
  min-height: 0;
  padding: 20px 24px;
  gap: 15px;
}

body[data-signed-in="true"] .review-copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body[data-signed-in="true"] .review-head h3 {
  font-size: 17px;
  line-height: 1.25;
}

body[data-signed-in="true"] .review-head p {
  margin-top: 4px;
  font-size: 13px;
}

body[data-signed-in="true"] .review-rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8e6200;
  white-space: nowrap;
}

body[data-signed-in="true"] .review-rating strong {
  color: var(--app-ink);
  font-size: 15px;
}

body[data-signed-in="true"] .review-rating .stars {
  font-size: 17px;
  letter-spacing: 2px;
  line-height: 1;
}

body[data-signed-in="true"] .detail-rating {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #9a6500;
  white-space: nowrap;
}

body[data-signed-in="true"] .detail-rating strong {
  color: var(--app-ink);
  font-size: 18px;
  line-height: 1;
}

body[data-signed-in="true"] #detailStars {
  font-size: 23px;
  letter-spacing: 3px;
  line-height: 1;
}

body[data-signed-in="true"] .comment {
  max-width: 720px;
  color: #40506b;
  font-size: 15px;
  line-height: 1.6;
}

body[data-signed-in="true"] .review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

body[data-signed-in="true"] .tags {
  gap: 6px;
}

body[data-signed-in="true"] .tag {
  padding: 5px 8px;
  font-size: 12px;
}

body[data-signed-in="true"] .review-state {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

body[data-signed-in="true"] .review-state.pending {
  color: #765100;
  background: #fff4d6;
}

body[data-signed-in="true"] .review-state.attention {
  color: #ad2e2e;
  background: #fff0f2;
}

body[data-signed-in="true"] .review-state.complete {
  color: var(--app-success);
  background: #e8f7f1;
}

body[data-signed-in="true"] .reply-panel {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 13px;
  padding: 19px 20px;
  border-left: 1px solid #e0e5f0;
  background: #ffffff;
}

body[data-signed-in="true"] .reply-title {
  display: grid;
  gap: 2px;
}

body[data-signed-in="true"] .reply-title span {
  color: #685bd7;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-signed-in="true"] .reply-title strong {
  color: var(--app-ink);
  font-size: 15px;
}

body[data-signed-in="true"] .reply-actions {
  gap: 6px;
}

body[data-signed-in="true"] .reply-actions button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border-color: #e0e5f0;
  color: #5147cb;
}

body[data-signed-in="true"] .reply-actions button::before {
  width: 16px;
  height: 16px;
  margin: 0;
}

body[data-signed-in="true"] .reply-actions button.is-copied {
  border-color: #8ed8bd;
  color: var(--app-success);
  background: #edfff5;
}

body[data-signed-in="true"] .reply-editor {
  display: grid;
  min-height: 0;
  align-self: start;
  border: 1px solid #e0e5f0;
  border-radius: 7px;
  background: #ffffff;
  overflow: hidden;
}

body[data-signed-in="true"] .review-card textarea {
  height: 128px;
  min-height: 128px;
  max-height: 180px;
  padding: 12px 13px 8px;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
}

body[data-signed-in="true"] .review-card textarea:focus {
  outline: 2px solid rgba(79, 70, 229, 0.25);
  outline-offset: -2px;
}

body[data-signed-in="true"] .reply-editor-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid #edf1f7;
  color: #75819a;
  font-size: 11px;
}

body[data-signed-in="true"] .reply-command-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 8px;
}

body[data-signed-in="true"] .reply-command-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 11px;
  font-size: 13px;
}

body[data-signed-in="true"] .reply-command-row button::before {
  width: 16px;
  height: 16px;
  margin-right: 7px;
}

body[data-signed-in="true"] .publish-status {
  min-height: 15px;
  font-size: 12px;
}

body[data-signed-in="true"] .publish-status.is-success {
  color: var(--app-success);
}

body[data-signed-in="true"] .publish-status.is-error {
  color: var(--app-danger);
}

@media (max-width: 980px) {
  body[data-signed-in="true"] .review-card {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .reply-panel {
    border-top: 1px solid #e0e5f0;
    border-left: 0;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .review-main {
    min-height: 0;
    padding: 18px;
  }

  body[data-signed-in="true"] .review-footer,
  body[data-signed-in="true"] .reply-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-signed-in="true"] .reply-panel {
    padding: 16px 18px;
  }

  body[data-signed-in="true"] .reply-command-row {
    grid-template-columns: 1fr;
  }
}

body[data-signed-in="true"] .status-pill,
body[data-signed-in="true"] .company-situation {
  font-weight: 800;
}

/* Backoffice SaaS: keep the primary operational view focused on companies. */
body[data-signed-in="true"][data-app-view="platform"] .summary-strip,
body[data-signed-in="true"][data-app-view="platform"] .saas-strip,
body[data-signed-in="true"][data-app-view="platform"] .role-notice {
  display: none !important;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-panel {
  padding-top: 28px;
}

.platform-section-nav {
  position: sticky;
  top: 80px;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 20px;
  padding: 8px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 5px 14px rgba(16, 24, 40, 0.04);
}

.platform-section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  gap: 7px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.platform-section-nav a::before {
  width: 15px !important;
  height: 15px !important;
  flex-basis: 15px !important;
}

.platform-section-nav a:hover,
.platform-section-nav a:focus-visible {
  color: var(--app-accent-strong);
  background: var(--app-accent-soft);
}

.platform-section-nav a:focus-visible {
  box-shadow: 0 0 0 3px rgba(81, 70, 217, 0.2);
  outline: none;
}

#platformPortfolioSection,
#platformIncidentsSection,
#platformRuntimeSection,
#platformSettingsSection {
  scroll-margin-top: 140px;
}

/* Superadmin starts with the commercial and operational picture. Detailed
   production configuration stays available lower in the same backoffice. */
body[data-signed-in="true"][data-app-view="platform"] .superadmin-hero {
  order: 1;
  align-items: end;
  padding: 2px 0 4px;
}

body[data-signed-in="true"][data-app-view="platform"] .superadmin-hero .eyebrow {
  margin: 0 0 5px;
}

body[data-signed-in="true"][data-app-view="platform"] .superadmin-hero h3 {
  margin: 0;
  color: var(--app-ink);
  font-size: clamp(25px, 2.1vw, 32px);
}

body[data-signed-in="true"][data-app-view="platform"] .superadmin-hero p:last-child {
  max-width: 660px;
  margin: 7px 0 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.5;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-section-nav { order: 2; }
body[data-signed-in="true"][data-app-view="platform"] .platform-grid { order: 3; }
body[data-signed-in="true"][data-app-view="platform"] .company-portfolio-health { order: 4; }
body[data-signed-in="true"][data-app-view="platform"] .superadmin-grid { order: 5; }
body[data-signed-in="true"][data-app-view="platform"] .platform-company-table { order: 6; }
body[data-signed-in="true"][data-app-view="platform"] .platform-support-card { order: 7; }
body[data-signed-in="true"][data-app-view="platform"] .platform-operations-card { order: 8; }
body[data-signed-in="true"][data-app-view="platform"] .launch-readiness-card { order: 9; }
body[data-signed-in="true"][data-app-view="platform"] .platform-runtime-card { order: 10; }
body[data-signed-in="true"][data-app-view="platform"] .platform-delivery-card { order: 11; }
body[data-signed-in="true"][data-app-view="platform"] .platform-legal-card { order: 12; }

body[data-signed-in="true"][data-app-view="platform"] .platform-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-metric {
  min-height: 148px;
  padding: 78px 18px 16px !important;
  border-color: var(--app-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--app-shadow);
}

body[data-signed-in="true"][data-app-view="platform"] .platform-metric::before {
  top: 18px;
  left: 18px;
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-metric::after {
  top: 23px;
  right: 18px;
  font-size: 12px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-metric span {
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-metric strong {
  margin-top: 6px;
  font-size: 31px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-metric small {
  margin-top: 7px;
  color: var(--app-muted);
  font-size: 11px;
}

body[data-signed-in="true"][data-app-view="platform"] .usage-track {
  margin-top: 12px;
}

body[data-signed-in="true"][data-app-view="platform"] .company-portfolio-health {
  margin: 2px 0 0;
  padding: 0;
  border: 0;
}

body[data-signed-in="true"][data-app-view="platform"] .company-portfolio-head {
  align-items: end;
  margin-bottom: 12px;
}

body[data-signed-in="true"][data-app-view="platform"] .company-portfolio-head h3 {
  font-size: 20px;
}

body[data-signed-in="true"][data-app-view="platform"] .company-portfolio-grid {
  gap: 12px;
}

body[data-signed-in="true"][data-app-view="platform"] .portfolio-status-card {
  min-height: 100px;
  padding: 14px;
  border-color: var(--app-line);
  box-shadow: var(--app-shadow);
}

body[data-signed-in="true"][data-app-view="platform"] .portfolio-status-card strong {
  margin-top: 6px;
  font-size: 24px;
}

body[data-signed-in="true"][data-app-view="platform"] .portfolio-status-card small {
  margin-top: 5px;
}

body[data-signed-in="true"][data-app-view="platform"] .superadmin-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.68fr);
  align-items: stretch;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-activity-card,
body[data-signed-in="true"][data-app-view="platform"] .system-status-card {
  min-height: 340px;
  border-color: var(--app-line);
  border-radius: 8px;
  box-shadow: var(--app-shadow);
}

body[data-signed-in="true"][data-app-view="platform"] .platform-activity-card {
  padding: 20px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-activity-card .panel-title strong {
  font-size: 18px;
}

body[data-signed-in="true"][data-app-view="platform"] #platformActivityChart {
  min-height: 235px;
  margin-top: 8px;
}

body[data-signed-in="true"][data-app-view="platform"] .system-status-card {
  gap: 12px;
  padding: 20px;
}

body[data-signed-in="true"][data-app-view="platform"] .system-status-card .eyebrow {
  font-size: 11px;
}

body[data-signed-in="true"][data-app-view="platform"] .system-service {
  min-height: 54px;
  padding: 10px 12px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-company-table,
body[data-signed-in="true"][data-app-view="platform"] .platform-support-card,
body[data-signed-in="true"][data-app-view="platform"] .platform-operations-card,
body[data-signed-in="true"][data-app-view="platform"] .launch-readiness-card,
body[data-signed-in="true"][data-app-view="platform"] .platform-runtime-card,
body[data-signed-in="true"][data-app-view="platform"] .platform-delivery-card,
body[data-signed-in="true"][data-app-view="platform"] .platform-legal-card {
  scroll-margin-top: 140px;
}

@media (max-width: 980px) {
  body[data-signed-in="true"][data-app-view="platform"] .platform-grid,
  body[data-signed-in="true"][data-app-view="platform"] .company-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"][data-app-view="platform"] .superadmin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"][data-app-view="platform"] .superadmin-hero {
    align-items: start;
  }

  body[data-signed-in="true"][data-app-view="platform"] .superadmin-actions {
    width: 100%;
    justify-content: stretch;
  }

  body[data-signed-in="true"][data-app-view="platform"] .superadmin-actions > * {
    flex: 1 1 0;
  }

  body[data-signed-in="true"][data-app-view="platform"] .platform-grid,
  body[data-signed-in="true"][data-app-view="platform"] .company-portfolio-grid {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"][data-app-view="platform"] .platform-metric {
    min-height: 132px;
  }
}

/* Admin sections are self-contained views; remove the generic dashboard noise. */
body[data-signed-in="true"][data-app-view="admin"] .page-heading {
  max-width: 1360px;
  margin: 0 auto 14px;
  padding-top: 24px;
}

body[data-signed-in="true"][data-app-view="admin"] .page-heading .summary-strip,
body[data-signed-in="true"][data-app-view="admin"] .saas-strip {
  display: none;
}

body[data-signed-in="true"][data-app-view="admin"] [data-admin-section] {
  max-width: 1360px;
  margin-right: auto;
  margin-left: auto;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context,
body[data-signed-in="true"][data-app-view="admin"] .admin-import-panel,
body[data-signed-in="true"][data-app-view="admin"] .backoffice-panel {
  margin-top: 0;
}

body[data-signed-in="true"][data-app-view="admin"] .role-notice {
  max-width: 1360px;
  margin: 0 auto 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 600;
}

/* Company admins begin with operational work, not provider-side billing details. */
body[data-signed-in="true"][data-role="company_admin"][data-app-view="admin"] .company-management-panel {
  order: 4;
  border-color: var(--app-line);
  border-radius: 8px;
  box-shadow: var(--app-shadow);
}

body[data-signed-in="true"][data-role="company_admin"][data-app-view="admin"] .launch-checklist {
  order: 5;
  border-color: var(--app-line);
  border-radius: 8px;
  box-shadow: none;
}

body[data-signed-in="true"][data-role="company_admin"][data-app-view="admin"] .backoffice-panel {
  order: 6;
}

body[data-signed-in="true"] .company-limit-grid article,
body[data-signed-in="true"] .company-admin-columns > section {
  border-color: var(--app-line);
  border-radius: 8px;
}

body[data-signed-in="true"] .management-head-actions {
  justify-content: flex-end;
}

/* Tables keep their structure and remain usable when columns cannot fit. */
body[data-signed-in="true"] .client-table-wrap,
body[data-signed-in="true"] .table-toolbar {
  min-width: 0;
}

body[data-signed-in="true"] .client-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body[data-signed-in="true"] .client-table-wrap table {
  min-width: 760px;
}

/* Authentication is intentionally quiet and centered. */
body[data-signed-in="false"] {
  background: var(--app-canvas);
}

body[data-signed-in="false"] .sidebar {
  width: min(100%, 480px);
  padding: 56px 24px 32px;
}

body[data-signed-in="false"] .brand {
  margin-bottom: 26px;
}

body[data-signed-in="false"] .brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(81, 70, 217, 0.12);
}

body[data-signed-in="false"] .brand h1 {
  font-size: 28px;
}

body[data-signed-in="false"] .auth-block {
  padding: 30px;
  border-color: var(--app-line);
  border-radius: 8px;
  box-shadow: var(--app-shadow);
}

body[data-signed-in="false"] .guest-auth-header {
  margin-bottom: 22px;
}

body[data-signed-in="false"] .guest-auth-header h2 {
  font-size: 22px;
}

body[data-signed-in="false"] .guest-login-form {
  gap: 16px;
}

body[data-signed-in="false"] .guest-input-wrap input,
body[data-signed-in="false"] .guest-google-button,
body[data-signed-in="false"] #loginButton {
  min-height: 46px;
  border-radius: 7px;
}

@media (max-width: 1100px) {
  body[data-signed-in="true"] .workspace {
    padding-right: 24px;
    padding-left: 24px;
  }

  body[data-signed-in="true"] .admin-context-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"] .admin-import-panel {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .topbar {
    margin-right: -24px;
    margin-left: -24px;
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 980px) {
  body[data-signed-in="true"] .app-shell {
    display: block;
  }

  body[data-signed-in="true"] .sidebar {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 14px 24px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--app-line);
  }

  body[data-signed-in="true"] .sidebar > .control-block {
    display: none !important;
  }

  body[data-signed-in="true"] .view-switch {
    width: auto;
    grid-column: 2;
    grid-row: 1;
  }

  body[data-signed-in="true"] .client-nav {
    grid-column: 1 / -1;
    display: flex;
    width: 100%;
    overflow-x: auto;
    padding-top: 3px;
  }

  body[data-signed-in="true"] .client-nav button {
    width: auto;
    flex: 0 0 auto;
    padding-right: 12px;
    padding-left: 12px;
  }

  body[data-signed-in="true"] .topbar-search {
    width: min(440px, 54vw);
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .admin-company-context,
  body[data-signed-in="true"] .admin-import-panel {
    margin-top: 16px;
    padding: 18px;
  }

  body[data-signed-in="true"] .admin-context-head {
    display: grid;
  }

  body[data-signed-in="true"] .admin-context-actions {
    justify-content: space-between;
  }

  body[data-signed-in="true"] .admin-context-fields,
  body[data-signed-in="true"] .admin-import-actions {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .sidebar {
    display: flex;
    padding: 14px 16px 8px;
  }

  body[data-signed-in="true"] .brand h1 {
    font-size: 18px;
  }

  body[data-signed-in="true"] .brand p,
  body[data-signed-in="true"] .view-switch {
    display: none;
  }

  body[data-signed-in="true"] .client-nav {
    display: none;
  }

  body[data-signed-in="true"] .management-head-actions {
    justify-content: stretch;
  }

  .platform-section-nav {
    position: static;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 16px;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .platform-section-nav a {
    flex: 0 0 auto;
  }

  body[data-signed-in="true"] .workspace {
    padding: 16px 16px calc(var(--mobile-bottom-nav, 76px) + 24px);
  }

  body[data-signed-in="true"] .topbar {
    position: static;
    display: grid;
    margin: 0 -16px 18px;
    padding: 12px 16px;
  }

  body[data-signed-in="true"] .topbar-search {
    width: 100%;
    min-width: 0;
  }

  body[data-signed-in="true"] .page-heading {
    align-items: flex-start;
    padding-top: 4px;
    margin-bottom: 18px;
  }

  body[data-signed-in="true"] .summary-strip,
  body[data-signed-in="true"] .operational-strip,
  body[data-signed-in="true"] .client-dashboard .task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"] .summary-strip button {
    min-height: 64px;
  }

  body[data-signed-in="true"] .operational-strip article,
  body[data-signed-in="true"] .metric-card {
    min-height: 118px;
    padding: 15px;
  }

  body[data-signed-in="true"] .metric-card {
    padding-top: 46px;
  }

  body[data-signed-in="true"] .rating-evolution-panel,
  body[data-signed-in="true"] .star-distribution-panel,
  body[data-signed-in="true"] .client-profile,
  body[data-signed-in="true"] .google-guide-panel,
  body[data-signed-in="true"] .support-center,
  body[data-signed-in="true"] .backoffice-panel,
  body[data-signed-in="true"] .platform-panel {
    padding: 18px;
  }

  body[data-signed-in="false"] .sidebar {
    width: 100%;
    padding: 42px 20px 28px;
  }

  body[data-signed-in="false"] .auth-block {
    padding: 24px 20px 26px;
  }
}

/* Client dashboard: give the first screen a calmer hierarchy and readable data. */
body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard {
  max-width: 1240px;
  margin-top: 20px;
  gap: 16px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero {
  min-height: 58px;
  padding: 2px 0 0;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero .eyebrow {
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero h3 {
  margin-top: 4px;
  color: var(--app-ink);
  font-size: 23px;
  line-height: 1.15;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero span {
  max-width: 600px;
  color: var(--app-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-hero-actions {
  gap: 10px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-hero-actions .secondary-button {
  min-height: 40px;
  border-color: #d6d9e7;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 750;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .task-grid {
  gap: 12px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-card {
  min-height: 128px;
  border-color: var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
  padding: 48px 17px 16px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card::before {
  top: 15px;
  left: 16px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background-color: var(--app-accent-soft) !important;
  color: var(--app-accent) !important;
  background-size: 15px 15px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-rating::before {
  content: "\2605" !important;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-total::before {
  content: "\2261" !important;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-new::before {
  content: "+" !important;
  background-color: #e8f7f1 !important;
  color: #087553 !important;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-pending::before {
  content: "!" !important;
  background-color: #fff0f2 !important;
  color: #b4232f !important;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card::after {
  top: 16px;
  right: 16px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card > span {
  color: var(--app-ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card strong {
  margin-top: 7px;
  color: var(--app-ink);
  font-size: 28px;
  line-height: 1;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card small {
  margin-top: 6px;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 650;
}


@media (max-width: 760px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero {
    min-height: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero h3 {
    font-size: 21px;
  }
}

/* Settings are a dedicated workspace, not a second page header plus a form grid. */
body[data-signed-in="true"][data-app-view="settings"] .page-heading,
body[data-signed-in="true"][data-app-view="settings"] .saas-strip,
body[data-signed-in="true"][data-app-view="settings"] .role-notice,
body[data-signed-in="true"][data-app-view="settings"] .billing-notice,
body[data-signed-in="true"][data-app-view="client"][data-client-page="settings"] .page-heading,
body[data-signed-in="true"][data-app-view="client"][data-client-page="settings"] .saas-strip,
body[data-signed-in="true"][data-app-view="client"][data-client-page="settings"] .role-notice,
body[data-signed-in="true"][data-app-view="client"][data-client-page="settings"] .billing-notice {
  display: none !important;
}

body[data-signed-in="true"][data-app-view="settings"] .settings-panel,
body[data-signed-in="true"][data-app-view="client"][data-client-page="settings"] .settings-panel {
  margin-top: 26px;
}

body[data-signed-in="true"] .settings-grid {
  align-items: start;
}

body[data-signed-in="true"] .settings-help-card {
  grid-column: 1 / -1;
  grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr);
  column-gap: 28px;
  align-items: center;
}

body[data-signed-in="true"] .settings-help-card .help-link-grid {
  align-self: end;
}

body[data-signed-in="true"] .settings-help-card #helpTopicText {
  grid-column: 2;
  margin: -7px 0 0;
}

/* Keep subscription controls in the billing workspace without adding a nested card. */
body[data-signed-in="true"] .backoffice-panel .billing-account-fields {
  margin: 4px 0 22px;
  padding: 16px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .billing-account-fields .field-help,
body[data-signed-in="true"] .stripe-checkout-plan small {
  display: block;
  margin-top: 5px;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.4;
}

body[data-signed-in="true"] .stripe-checkout-plan {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

body[data-signed-in="true"] .stripe-checkout-plan label {
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 750;
}

body[data-signed-in="true"] .stripe-checkout-plan select {
  width: 100%;
  min-height: 38px;
}

body[data-signed-in="true"] .profile-subscription-request {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 20px;
  align-items: center;
  margin-top: 20px;
  padding: 17px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .profile-subscription-request h4 {
  margin: 3px 0 4px;
  color: var(--app-ink);
  font-size: 15px;
}

body[data-signed-in="true"] .profile-subscription-request p:not(.eyebrow) {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"] .subscription-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-signed-in="true"] .subscription-request-actions .primary-button,
body[data-signed-in="true"] .subscription-request-actions .secondary-button {
  min-height: 38px;
  font-size: 12px;
}

body[data-signed-in="true"] .backoffice-side .subscription-request-actions {
  margin-top: 14px;
}

body[data-signed-in="true"] .subscription-request-status {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  body[data-signed-in="true"] .settings-help-card {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .settings-help-card #helpTopicText {
    grid-column: auto;
    margin-top: 0;
  }

  body[data-signed-in="true"] .backoffice-panel .billing-account-fields {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .profile-subscription-request {
    grid-template-columns: 1fr;
  }
}

/* Operational forms use the same compact, reliable layout across dialogs. */
body[data-signed-in="true"] .settings-system-value {
  display: grid;
  gap: 5px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .settings-system-value span,
body[data-signed-in="true"] .settings-system-value small {
  color: var(--app-muted);
  font-size: 11px;
}

body[data-signed-in="true"] .settings-system-value strong {
  color: var(--app-ink);
  font-size: 13px;
}

body[data-signed-in="true"] #locationDialog .contact-shell {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border-radius: 10px;
  background: var(--app-surface);
}

body[data-signed-in="true"] #locationDialog .contact-form {
  max-height: calc(100dvh - 228px);
  overflow-y: auto;
  padding-right: 16px;
  scrollbar-gutter: stable;
}

body[data-signed-in="true"] #locationDialog .location-form-section {
  margin: 2px 0 -3px;
  padding-top: 14px;
  border-top: 1px solid var(--app-line);
  color: var(--app-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"] #locationDialog .location-form-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body[data-signed-in="true"] .management-head-actions,
body[data-signed-in="true"] .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

body[data-signed-in="true"] .management-head-actions > *,
body[data-signed-in="true"] .contact-actions > * {
  min-width: 0;
  white-space: nowrap;
}

body[data-signed-in="true"] .management-head-actions {
  width: 100%;
  min-width: 0;
}

body[data-signed-in="true"] .management-head-actions > button {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-signed-in="true"] .company-limit-grid article small {
  display: block;
  margin-top: 5px;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.4;
}

body[data-signed-in="true"] .member-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

body[data-signed-in="true"][data-interface-mode="dark"] .sidebar,
body[data-signed-in="true"][data-interface-mode="dark"] .topbar,
body[data-signed-in="true"][data-interface-mode="dark"] .sidebar-session,
body[data-signed-in="true"][data-interface-mode="dark"] .auth-block,
body[data-signed-in="true"][data-interface-mode="dark"] .view-switch,
body[data-signed-in="true"][data-interface-mode="dark"] .contact-shell,
body[data-signed-in="true"][data-interface-mode="dark"] .contact-form input,
body[data-signed-in="true"][data-interface-mode="dark"] .contact-form select,
body[data-signed-in="true"][data-interface-mode="dark"] .contact-form textarea,
body[data-signed-in="true"][data-interface-mode="dark"] .member-role-select {
  background: var(--app-surface) !important;
  color: var(--app-ink) !important;
  border-color: var(--app-line) !important;
}

body[data-signed-in="true"][data-interface-mode="dark"] .brand h1,
body[data-signed-in="true"][data-interface-mode="dark"] .brand p,
body[data-signed-in="true"][data-interface-mode="dark"] .auth-block label,
body[data-signed-in="true"][data-interface-mode="dark"] .sidebar-session,
body[data-signed-in="true"][data-interface-mode="dark"] .contact-form span,
body[data-signed-in="true"][data-interface-mode="dark"] .contact-form input::placeholder,
body[data-signed-in="true"][data-interface-mode="dark"] .contact-form textarea::placeholder {
  color: var(--app-ink-soft) !important;
}

/*
  .detail-header (every dialog's sticky title bar) and .secondary-button
  never had a dark-mode variant anywhere in the app: both keep a hardcoded
  white background while their text correctly inherits the dark ink color,
  producing white-on-white. Not specific to one dialog - fix at the root.
*/
body[data-signed-in="true"][data-interface-mode="dark"] .detail-header {
  background: color-mix(in srgb, var(--app-surface) 94%, transparent);
  border-bottom-color: var(--app-line);
}

body[data-signed-in="true"][data-interface-mode="dark"] .secondary-button {
  background: var(--app-surface);
  border-color: var(--app-line);
  color: var(--app-ink);
}

/* Stitch desktop reference: a single, calm operating shell for Kora. */
:root {
  --app-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --app-canvas: #f8fafc;
  --app-surface: #ffffff;
  --app-surface-muted: #eeedff;
  --app-ink: #0b1c30;
  --app-ink-soft: #464555;
  --app-muted: #667085;
  --app-line: #d6d9e7;
  --app-accent: #3525cd;
  --app-accent-strong: #2f20bd;
  --app-accent-soft: #e8e6ff;
  --app-success: #006c49;
  --app-warning: #a85d00;
  --app-danger: #ba1a1a;
  --app-shadow: 0 1px 2px rgba(11, 28, 48, 0.04), 0 8px 22px rgba(11, 28, 48, 0.04);
}

body[data-signed-in="true"] {
  font-family: var(--app-font);
  background: var(--app-canvas);
  color: var(--app-ink);
}

body[data-signed-in="true"] .primary-button,
body[data-signed-in="true"] .google-button {
  border-radius: 8px;
  background: var(--app-accent);
  box-shadow: none;
}

body[data-signed-in="true"] .primary-button:hover,
body[data-signed-in="true"] .google-button:hover {
  background: var(--app-accent-strong);
}

body[data-signed-in="true"] .secondary-button {
  border-color: var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-ink);
  box-shadow: none;
}

body[data-signed-in="true"] .secondary-button:hover {
  border-color: #aaa4f4;
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}

@media (min-width: 1101px) {
  body[data-signed-in="true"] .app-shell,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .app-shell,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  body[data-signed-in="true"] .sidebar,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .sidebar,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .sidebar {
    gap: 14px;
    padding: 20px 14px 16px;
    background: var(--app-surface);
  }

  body[data-signed-in="true"] .brand {
    gap: 10px;
    padding: 2px 6px 10px;
  }

  body[data-signed-in="true"] .brand-mark {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 7px;
  }

  body[data-signed-in="true"] .brand h1 {
    font-size: 18px;
    letter-spacing: 0;
  }

  body[data-signed-in="true"] .brand p {
    color: var(--app-muted);
    font-size: 10px;
  }

  body[data-signed-in="true"] .auth-block {
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    background: var(--app-surface-muted);
    box-shadow: none;
  }

  body[data-signed-in="true"] .auth-block .label-row,
  body[data-signed-in="true"] .auth-block .session-profile,
  body[data-signed-in="true"] .auth-block .auth-actions {
    font-size: 11px;
  }

  body[data-signed-in="true"] .view-switch {
    border-color: var(--app-line);
    background: var(--app-surface-muted);
  }

  body[data-signed-in="true"] .client-nav button,
  body[data-signed-in="true"] .view-switch button,
  body[data-signed-in="true"] .admin-section-nav button {
    min-height: 38px;
    padding-inline: 10px;
    border-radius: 7px;
    font-size: 12px;
  }

  body[data-signed-in="true"] .client-nav button.active,
  body[data-signed-in="true"] .admin-section-nav button.active {
    background: var(--app-accent-soft);
    color: var(--app-accent-strong);
    box-shadow: inset 3px 0 0 var(--app-accent);
  }

  body[data-signed-in="true"] .workspace,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .workspace,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .workspace {
    padding: 0 28px 48px;
  }

  body[data-signed-in="true"] .topbar,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .topbar,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .topbar {
    min-height: 64px;
    margin: 0 -28px;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
  }

  body[data-signed-in="true"] .topbar-search {
    max-width: 410px;
  }

  body[data-signed-in="true"] .topbar-search input {
    min-height: 38px;
    border-color: var(--app-line);
    border-radius: 8px;
    background: var(--app-surface-muted);
    font-size: 12px;
  }

  body[data-signed-in="true"] .topbar-icon,
  body[data-signed-in="true"] .user-chip {
    border-radius: 8px;
  }

  body[data-signed-in="true"] .page-heading {
    max-width: 1400px;
    margin: 26px auto 18px;
  }

  body[data-signed-in="true"] .page-heading h2 {
    color: var(--app-ink);
    font-size: 25px;
    line-height: 1.2;
  }

  body[data-signed-in="true"] .client-dashboard,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard {
    max-width: 1400px;
    margin-top: 26px;
    gap: 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero {
    min-height: 66px;
    padding: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero h3 {
    color: var(--app-ink);
    font-size: 24px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .task-grid {
    gap: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-card {
    min-height: 132px;
    border-color: var(--app-line);
    border-radius: 10px;
    box-shadow: none;
    padding: 50px 18px 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card > span {
    color: var(--app-ink-soft);
    font-size: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card strong {
    font-size: 30px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-visuals {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.78fr);
    gap: 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .rating-evolution-panel,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .star-distribution-panel {
    min-height: 316px;
    border-color: var(--app-line);
    border-radius: 10px;
    box-shadow: none;
    padding: 20px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .pending-bar,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .attention-card,
  body[data-signed-in="true"] .settings-card,
  body[data-signed-in="true"] .platform-metric,
  body[data-signed-in="true"] .platform-activity-card,
  body[data-signed-in="true"] .system-status-card,
  body[data-signed-in="true"] .platform-company-table {
    border-color: var(--app-line);
    border-radius: 10px;
    box-shadow: none;
  }

  body[data-signed-in="true"][data-app-view="platform"] .platform-panel {
    max-width: 1400px;
  }

  body[data-signed-in="true"][data-app-view="platform"] .superadmin-hero h3 {
    font-size: 26px;
  }

  body[data-signed-in="true"][data-app-view="platform"] .platform-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-signed-in="true"][data-app-view="platform"] .platform-metric {
    min-height: 146px;
    padding: 74px 20px 18px !important;
  }

  body[data-signed-in="true"][data-app-view="platform"] .users-metric::before {
    --icon: var(--icon-profile);
    background-color: #e8e6ff !important;
    color: var(--app-accent) !important;
  }

  body[data-signed-in="true"] .review-card,
  body[data-signed-in="true"] .review-workbench,
  body[data-signed-in="true"] .review-detail-dialog .contact-shell {
    border-color: var(--app-line);
    border-radius: 10px;
    box-shadow: none;
  }
}

/* Dashboard panels use the same operational hierarchy as the Stitch reference. */
@media (min-width: 1101px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel {
    overflow: hidden;
    border-radius: 10px;
    padding: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel .panel-title {
    align-items: center;
    min-height: 64px;
    margin: 0;
    padding: 14px 18px;
    border: 0;
    background: var(--app-accent);
    color: #ffffff;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel .panel-title span:first-child,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel .panel-title strong,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel .panel-title .connection-status {
    color: #ffffff;
  }

  /*
    background: var(--app-accent) above is #8b7cf6 in dark mode (lightened so
    accent TEXT reads on dark surfaces elsewhere) - as a SOLID fill behind the
    white text/badge this header forces, that's only ~3.3:1, under WCAG AA's
    4.5:1 for the 10px eyebrow. Reuses the same dark, dense purple as the
    action-plan-panel gradient itself (see the .action-plan-panel[aria-labelledby]
    rule) so the solid title bar and the gradient body stay one family of purple.
  */
  body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel .panel-title {
    background: #312a89;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 18px 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-item {
    min-height: 126px;
    border-color: var(--app-line);
    border-radius: 8px;
    box-shadow: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-review-queue {
    border-color: var(--app-line);
    border-radius: 10px;
    background: #eeedff;
    box-shadow: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-review-queue .panel-title {
    padding: 16px 18px 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-queue {
    padding: 12px 18px 18px;
  }
}

/* Desktop dashboard mirrors the analysis column plus an actionable side rail. */
@media (min-width: 1101px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.72fr);
    gap: 18px;
    align-items: start;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .task-grid,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .company-kpi-section,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .operational-strip,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .pending-tasks-head,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .pending-task-grid,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .compact-task-list,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-keywords {
    grid-column: 1 / -1;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero { grid-row: 1; }
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .task-grid { grid-row: 2; }
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .company-kpi-section { grid-row: 3; }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-visuals {
    grid-column: 1;
    grid-row: 4;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .rating-evolution-panel,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .star-distribution-panel {
    min-height: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .rating-evolution-panel {
    min-height: 354px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .star-distribution-panel {
    min-height: 286px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel {
    grid-column: 2;
    grid-row: 4;
    align-self: stretch;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-list {
    grid-template-columns: 1fr;
    align-content: start;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .pending-tasks-head { grid-row: 5; }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .pending-task-grid {
    grid-column: 1;
    grid-row: 6;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .compact-task-list {
    grid-column: 1;
    grid-row: 7;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-review-queue {
    grid-column: 2;
    grid-row: 5 / span 3;
    min-height: 270px;
    align-self: stretch;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-keywords { grid-row: 8; }
}

/* Final visual pass: precise typography, quiet surfaces and reliable scan lines. */
:root {
  --app-canvas: #f8fafc;
  --app-surface: #ffffff;
  --app-surface-muted: #f8fafc;
  --app-ink: #0b1c30;
  --app-ink-soft: #34384a;
  --app-muted: #6a6d7f;
  --app-line: #d6d9e7;
  --app-success: #007a52;
  --app-warning: #a15c00;
  --app-danger: #c51a1a;
  --app-shadow: 0 1px 2px rgba(11, 28, 48, 0.035), 0 6px 16px rgba(11, 28, 48, 0.03);
}

body[data-signed-in="true"] {
  background: var(--app-canvas);
  color: var(--app-ink);
  font-size: 14px;
  line-height: 1.45;
}

body[data-signed-in="true"] :is(h1, h2, h3, h4, strong, button) {
  letter-spacing: 0;
}

body[data-signed-in="true"] :is(.metric-card strong, .platform-metric strong, .company-kpi-card strong, .confidence-score strong) {
  font-variant-numeric: tabular-nums;
}

body[data-signed-in="true"] :is(input, select, textarea) {
  border-color: var(--app-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--app-ink);
  font-size: 13px;
}

body[data-signed-in="true"] :is(input, select, textarea)::placeholder {
  color: #9297aa;
  opacity: 1;
}

body[data-signed-in="true"] :is(input, select, textarea):focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 14%, transparent);
  outline: 0;
}

body[data-signed-in="true"] :is(.status-pill, .connection-status, .tag, .plan-badge) {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

body[data-signed-in="true"] .workspace,
body[data-signed-in="true"] .sidebar {
  background: var(--app-canvas);
}

body[data-signed-in="true"] .sidebar {
  background: var(--app-surface);
}

body[data-signed-in="true"] .topbar {
  background: color-mix(in srgb, #ffffff 94%, transparent);
  border-color: var(--app-line);
}

body[data-signed-in="true"] .topbar-search input {
  background: var(--app-surface-muted);
  border-color: var(--app-line);
}

body[data-signed-in="true"] .client-nav button,
body[data-signed-in="true"] .admin-section-nav button,
body[data-signed-in="true"] .view-switch button {
  color: #454a5b;
}

body[data-signed-in="true"] .client-nav button.active,
body[data-signed-in="true"] .admin-section-nav button.active,
body[data-signed-in="true"] .view-switch button.active {
  color: var(--app-accent-strong);
  background: var(--app-accent-soft);
}

body[data-signed-in="true"] :is(.metric-card, .company-kpi-card, .rating-evolution-panel, .star-distribution-panel, .keyword-chart-panel, .action-plan-panel, .dashboard-review-queue, .pending-bar, .attention-card, .settings-card, .client-profile, .google-guide-panel, .support-center, .backoffice-panel, .platform-panel, .platform-metric, .platform-activity-card, .system-status-card, .platform-company-table, .platform-operations-card, .platform-support-card, .launch-readiness-card, .platform-runtime-card, .platform-delivery-card, .platform-legal-card, .detail-review-card, .ai-editor-panel, .ai-context-panel section) {
  border-color: var(--app-line);
  box-shadow: var(--app-shadow);
}

body[data-signed-in="true"] :is(.metric-card, .company-kpi-card, .rating-evolution-panel, .star-distribution-panel, .keyword-chart-panel, .action-plan-panel, .dashboard-review-queue, .pending-bar, .attention-card, .settings-card, .platform-metric, .platform-activity-card, .system-status-card) {
  border-radius: 8px;
}

body[data-signed-in="true"] .panel-title > strong,
body[data-signed-in="true"] .panel-title > div > strong,
body[data-signed-in="true"] .table-toolbar h3,
body[data-signed-in="true"] .settings-card strong {
  color: var(--app-ink);
  font-size: 16px;
  line-height: 1.35;
}

body[data-signed-in="true"] .panel-title > span,
body[data-signed-in="true"] .panel-title > div > span,
body[data-signed-in="true"] .table-toolbar p,
body[data-signed-in="true"] .metric-card small,
body[data-signed-in="true"] .platform-metric small {
  color: var(--app-muted);
}

body[data-signed-in="true"] .primary-button,
body[data-signed-in="true"] .google-button,
body[data-signed-in="true"] .publish-button {
  background: var(--app-accent);
  border-color: var(--app-accent);
  box-shadow: none;
}

body[data-signed-in="true"] .primary-button:hover,
body[data-signed-in="true"] .google-button:hover,
body[data-signed-in="true"] .publish-button:hover {
  background: var(--app-accent-strong);
  border-color: var(--app-accent-strong);
  box-shadow: none;
  transform: none;
}

body[data-signed-in="true"] .secondary-button,
body[data-signed-in="true"] .approve-button {
  min-height: 38px;
  border-color: var(--app-line);
  background: #ffffff;
  color: var(--app-ink);
  box-shadow: none;
}

body[data-signed-in="true"] .secondary-button:hover,
body[data-signed-in="true"] .approve-button:hover {
  border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line));
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
  box-shadow: none;
  transform: none;
}

body[data-signed-in="true"][data-interface-mode="dark"] :is(input, select, textarea),
body[data-signed-in="true"][data-interface-mode="dark"] .topbar-search input {
  background: #1e293b;
  color: #f8fafc;
}

/* Review detail: master information at left, the actionable AI draft at right. */
@media (min-width: 981px) {
  body[data-signed-in="true"] .review-detail-dialog .detail-shell {
    width: min(1220px, calc(100vw - 48px));
    background: var(--app-canvas);
  }

  body[data-signed-in="true"] .review-detail-dialog .detail-header {
    min-height: 76px;
    padding: 16px 24px;
    border-color: var(--app-line);
    background: var(--app-surface);
  }

  body[data-signed-in="true"] .review-detail-dialog .detail-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(390px, 0.8fr);
    align-items: start;
    gap: 18px;
    padding: 22px 24px 28px;
  }

  body[data-signed-in="true"] .review-detail-dialog .detail-review-card {
    grid-column: 1;
    grid-row: 1;
    border-color: var(--app-line);
    border-radius: 10px;
    box-shadow: none;
  }

  body[data-signed-in="true"] .review-detail-dialog .ai-editor-panel {
    grid-column: 2;
    grid-row: 1 / span 2;
    overflow: hidden;
    border-color: #c6c0ff;
    border-radius: 10px;
    background: #eeedff;
    box-shadow: none;
  }

  body[data-signed-in="true"] .review-detail-dialog .ai-editor-head {
    min-height: 78px;
    padding: 16px 18px;
    background: transparent;
    color: var(--app-accent);
  }

  body[data-signed-in="true"] .review-detail-dialog .ai-editor-head strong,
  body[data-signed-in="true"] .review-detail-dialog .ai-editor-head span {
    color: var(--app-accent);
  }

  body[data-signed-in="true"] .review-detail-dialog .ai-editor-head select,
  body[data-signed-in="true"] .review-detail-dialog .ai-editor-head .secondary-button {
    border-color: var(--app-line);
    background: #ffffff;
    color: var(--app-ink);
  }

  body[data-signed-in="true"] .review-detail-dialog #detailReply {
    min-height: 320px;
    margin: 0 18px;
    width: calc(100% - 36px);
    border: 1px solid var(--app-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--app-ink);
    font-size: 15px;
    line-height: 1.6;
  }

  body[data-signed-in="true"] .review-detail-dialog .detail-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 16px 18px 8px;
  }

  body[data-signed-in="true"] .review-detail-dialog .detail-actions button {
    min-height: 42px;
    padding-inline: 10px;
    border-radius: 8px;
    white-space: nowrap;
  }

  body[data-signed-in="true"] .review-detail-dialog .ai-editor-panel .publish-status {
    padding: 0 18px 18px;
  }

  body[data-signed-in="true"] .review-detail-dialog .ai-context-panel {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-signed-in="true"] .review-detail-dialog .ai-context-panel section {
    padding: 16px;
    border-color: var(--app-line);
    border-radius: 10px;
    box-shadow: none;
  }

  body[data-signed-in="true"] .review-detail-dialog .ai-context-panel .ai-tip {
    grid-column: 1 / -1;
    background: #eeedff;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body[data-signed-in="true"][data-app-view="platform"] .platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stitch refinement: navigation, review workbench and data density. */
@media (min-width: 1101px) {
  body[data-signed-in="true"] .sidebar > .brand { order: 1; }
  body[data-signed-in="true"] .sidebar > .view-switch { order: 2; }
  body[data-signed-in="true"] .sidebar > .client-nav,
  body[data-signed-in="true"] .sidebar > .admin-section-nav { order: 3; }
  body[data-signed-in="true"] .sidebar > .client-report-shortcut { order: 4; }

  body[data-signed-in="true"] .sidebar > .auth-block {
    order: 5;
    margin-top: auto;
  }

  body[data-signed-in="true"] .client-report-shortcut {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--app-line);
  }

  body[data-signed-in="true"] .sidebar > .client-report-shortcut + .auth-block {
    margin-top: 0;
  }

  body[data-signed-in="true"] .auth-block .session-profile {
    min-height: 46px;
    padding: 7px 8px;
    border-color: var(--app-line);
    border-radius: 7px;
    background: #ffffff;
  }

  body[data-signed-in="true"] .auth-block .session-profile strong {
    max-width: 138px;
    color: var(--app-ink);
    font-size: 11px;
  }

  body[data-signed-in="true"] .auth-block .session-profile small {
    color: var(--app-muted);
    font-size: 10px;
  }

  body[data-signed-in="true"] .auth-block .auth-actions .secondary-button {
    min-height: 34px;
    font-size: 11px;
  }

  body[data-signed-in="true"] .user-chip strong {
    color: var(--app-ink);
    font-size: 12px;
  }

  body[data-signed-in="true"] .user-chip small {
    color: var(--app-muted);
    font-size: 10px;
  }

  body[data-signed-in="true"] .eyebrow,
  body[data-signed-in="true"] .metric-card > span,
  body[data-signed-in="true"] .reply-title > span {
    letter-spacing: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .workspace {
    padding-bottom: 36px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-workbench {
    grid-template-columns: 228px minmax(0, 1fr);
    max-width: 1400px;
    min-height: calc(100dvh - 64px);
    margin: 0 -28px;
    border-color: var(--app-line);
    border-radius: 0 0 10px 10px;
    background: var(--app-canvas);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail {
    top: 64px;
    min-height: calc(100dvh - 64px);
    padding: 22px 16px;
    border-color: var(--app-line);
    background: var(--app-surface);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail-head h3 {
    font-size: 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-health-panel {
    padding: 12px;
    border-color: var(--app-line);
    border-radius: 8px;
    background: var(--app-surface-muted);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar {
    gap: 14px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar input,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar select {
    min-height: 38px;
    border-color: var(--app-line);
    border-radius: 7px;
    background: #ffffff;
    color: var(--app-ink);
    font-size: 12px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .status-filter button,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .segmented button {
    border-radius: 7px;
    font-size: 11px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox {
    padding: 24px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox-head {
    margin-bottom: 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox-head h2 {
    color: var(--app-ink);
    font-size: 22px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .insights {
    min-height: 112px;
    border-color: var(--app-line);
    border-radius: 8px;
    background: var(--app-surface);
    box-shadow: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-list {
    gap: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-card {
    grid-template-columns: minmax(0, 1.04fr) minmax(365px, 0.96fr);
    min-height: 262px;
    border-color: var(--app-line);
    border-radius: 10px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-main {
    padding: 22px 24px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-head h3 {
    color: var(--app-ink);
    font-size: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-rating {
    gap: 7px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-rating strong,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .stars {
    font-size: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-card .comment {
    max-width: 630px;
    color: var(--app-ink-soft);
    font-size: 14px;
    line-height: 1.65;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .reply-panel {
    padding: 20px;
    border-left-color: var(--app-line);
    background: #f8fafc;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .reply-title strong {
    color: var(--app-ink);
    font-size: 15px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .reply-editor {
    border-color: var(--app-line);
    border-radius: 8px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-card textarea {
    min-height: 126px;
    height: 126px;
    color: var(--app-ink);
    font-size: 13px;
    line-height: 1.55;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .reply-command-row button {
    min-height: 42px;
    border-radius: 8px;
    font-size: 12px;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .management-head-actions > *,
  body[data-signed-in="true"] .contact-actions > * {
    flex: 1 1 140px;
  }

  body[data-signed-in="true"] #locationDialog .contact-shell {
    width: calc(100vw - 20px);
  }

  body[data-signed-in="true"] #locationDialog .contact-form {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 212px);
    padding: 16px;
  }

  body[data-signed-in="true"] .company-management-panel .backoffice-head {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-signed-in="true"] .management-head-actions > button {
    flex: 1 1 100%;
    width: 100%;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Superadmin: compact operational overview with readable incident and account rows. */
@media (min-width: 1101px) {
  body[data-signed-in="true"][data-app-view="platform"] .platform-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body[data-signed-in="true"][data-app-view="platform"] .superadmin-grid {
  gap: 16px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-activity-card,
body[data-signed-in="true"][data-app-view="platform"] .system-status-card {
  min-height: 296px;
  background: var(--app-surface);
}

body[data-signed-in="true"][data-app-view="platform"] .platform-activity-card {
  padding: 18px 20px 14px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-activity-card .panel-title {
  min-height: 32px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"][data-app-view="platform"] .platform-activity-card .panel-title strong {
  font-size: 17px;
}

body[data-signed-in="true"][data-app-view="platform"] .chart-legend {
  gap: 14px;
  color: var(--app-muted);
  font-size: 10px;
}

body[data-signed-in="true"][data-app-view="platform"] #platformActivityChart {
  min-height: 210px;
  height: 210px;
  margin-top: 0;
}

body[data-signed-in="true"][data-app-view="platform"] .system-status-card {
  gap: 9px;
  padding: 18px;
}

body[data-signed-in="true"][data-app-view="platform"] .system-status-card .eyebrow {
  margin: 0 0 2px;
  color: var(--app-muted);
  font-size: 10px;
}

body[data-signed-in="true"][data-app-view="platform"] .system-service {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 56px;
  gap: 10px;
  padding: 9px 10px;
  border-color: transparent;
  border-radius: 7px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-app-view="platform"] .system-service > span {
  width: 26px;
  height: 26px;
  color: var(--app-accent);
  font-size: 13px;
}

body[data-signed-in="true"][data-app-view="platform"] .system-service strong {
  overflow: visible;
  color: var(--app-ink);
  font-size: 13px;
  line-height: 1.3;
  white-space: normal;
}

body[data-signed-in="true"][data-app-view="platform"] .system-service small {
  align-self: center;
  padding: 5px 7px;
  color: var(--app-success);
  font-size: 9px;
  letter-spacing: 0;
  white-space: nowrap;
}

body[data-signed-in="true"][data-app-view="platform"] .uptime-row {
  margin-top: 7px;
  padding-top: 14px;
  color: var(--app-muted);
  font-size: 12px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-company-table {
  overflow: visible;
  background: var(--app-surface);
}

body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) minmax(0, 1.65fr);
  align-items: end;
  gap: 20px;
  padding: 20px 22px 18px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-toolbar h3 {
  margin-top: 3px;
  font-size: 19px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(128px, 0.8fr));
  gap: 10px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-search,
body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-filters select {
  width: 100%;
  min-width: 0;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-filters select,
body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-search input {
  min-height: 40px;
  border-color: var(--app-line);
  border-radius: 7px;
  color: var(--app-ink);
  font-size: 12px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .client-table th {
  padding: 13px 20px;
  background: #f8fafc;
  color: var(--app-muted);
  font-size: 10px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .client-table td {
  padding: 16px 20px;
  color: var(--app-ink-soft);
  font-size: 12px;
  vertical-align: middle;
}

body[data-signed-in="true"][data-app-view="platform"] .company-cell {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
}

body[data-signed-in="true"][data-app-view="platform"] .company-cell > span {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
  font-size: 12px;
}

body[data-signed-in="true"][data-app-view="platform"] .company-cell strong {
  color: var(--app-ink);
  font-size: 14px;
}

body[data-signed-in="true"][data-app-view="platform"] .company-cell small {
  margin-top: 2px;
  font-size: 11px;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-action {
  min-width: 104px;
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 7px;
  font-size: 12px;
}

@media (max-width: 1280px) {
  body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-toolbar,
  body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-filters {
    display: flex;
    flex-wrap: wrap;
  }

  body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-toolbar > div,
  body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-search {
    flex: 1 1 230px;
  }

  body[data-signed-in="true"][data-app-view="platform"] .platform-company-table .table-filters select {
    flex: 1 1 145px;
  }
}

/* Product pass: the customer dashboard leads with work, not technical chrome. */
@media (min-width: 761px) {
  body[data-signed-in="true"] .app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .page-heading,
body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .saas-strip {
  display: none;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard {
  margin-top: 0;
  padding-top: 28px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero {
  min-height: 62px;
  padding: 0 2px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero h3 {
  font-size: 23px;
  line-height: 1.22;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero span {
  max-width: 620px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .operational-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: none;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .operational-strip article {
  min-height: 84px;
  border: 0;
  border-right: 1px solid var(--app-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 14px 16px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .operational-strip article:last-child {
  border-right: 0;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .operational-strip span {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 750;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .operational-strip strong {
  margin-top: 5px;
  color: var(--app-ink);
  font-size: 16px;
  line-height: 1.25;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .operational-strip small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 5px;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-signed-in="true"] .metric-star {
  color: #b77900;
  font-size: 18px !important;
  line-height: 1;
  vertical-align: 1px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .task-grid {
  gap: 12px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card {
  min-height: 124px;
  padding: 47px 16px 15px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card strong {
  font-size: 28px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card small:not(.metric-star) {
  font-size: 11px;
}

@media (max-width: 760px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard {
    gap: 16px;
    padding-top: 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero {
    align-items: flex-start;
    gap: 14px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero h3 {
    font-size: 21px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-hero-actions {
    width: 100%;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-hero-actions > * {
    flex: 1 1 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .task-grid,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .operational-strip,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .company-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .operational-strip article:nth-child(2n) {
    border-right: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .operational-strip article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--app-line);
  }
}

/* Ficha compacta de empresa: concentra identidad, contacto y guardado. */
body[data-signed-in="true"][data-app-view="admin"] .admin-company-context {
  width: min(100%, 1020px);
  justify-self: start;
  gap: 24px;
  margin-right: auto;
  margin-left: 0;
  padding: 24px;
  border-color: #d8def0;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(34, 48, 83, 0.06);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 22px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-monogram {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #dcd8ff;
  border-radius: 8px;
  background: #eeedff;
  color: #4431d8;
  font-size: 13px;
  font-weight: 800;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-head h3 {
  margin-top: 2px;
  font-size: 22px;
  line-height: 1.2;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-head p:last-child {
  max-width: 620px;
  margin-top: 7px;
  line-height: 1.5;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-save-state {
  min-height: 18px;
  color: #75819a;
  font-size: 12px;
  font-weight: 700;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-save-state.is-saved {
  color: #07865f;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-save-state.is-error {
  color: var(--app-danger);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-fields {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid #e0e5f0;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-company-field {
  gap: 8px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-company-field > span {
  color: #40506b;
  font-size: 12px;
  font-weight: 800;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-company-field input {
  min-height: 46px;
  padding: 0 13px;
  border-color: #cad3e5;
  background: #ffffff;
  color: #18233c;
  font-size: 14px;
  font-weight: 650;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-company-field input:focus {
  border-color: #4c3df0;
  box-shadow: 0 0 0 3px rgba(76, 61, 240, 0.12);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-field small {
  color: #75819a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 760px) {
  body[data-signed-in="true"][data-app-view="admin"] .admin-company-context {
    width: 100%;
    padding: 18px;
  }

  body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-head,
  body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-fields {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-actions {
    justify-items: stretch;
  }

  body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-actions .primary-button {
    width: 100%;
  }
}

/* Datos de empresa: ficha operativa completa, sin el vacío de un formulario aislado. */
body[data-signed-in="true"][data-app-view="admin"] .page-heading,
body[data-signed-in="true"][data-app-view="admin"] .role-notice,
body[data-signed-in="true"][data-app-view="admin"] .admin-company-context {
  width: min(100%, 1360px);
  max-width: 1360px;
  margin-right: auto;
  margin-left: auto;
}

body[data-signed-in="true"][data-app-view="admin"] .page-heading {
  padding-top: 18px;
  margin-bottom: 8px;
}

body[data-signed-in="true"][data-app-view="admin"] .role-notice {
  min-height: 0;
  margin-top: 0;
  margin-bottom: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--app-muted);
  box-shadow: none;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context {
  display: block;
  width: min(100%, 1120px);
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  border-color: #dce2eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(34, 48, 83, 0.05);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border-bottom: 1px solid #e0e5f0;
  background:
    radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--app-accent) 10%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--app-accent) 6%, var(--app-surface)) 0%, var(--app-surface) 60%);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-company-heading {
  align-items: center;
  gap: 14px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-monogram {
  width: 48px;
  height: 48px;
  border-color: #d9d6ff;
  background: #eeedff;
  color: #3f2dd0;
  font-size: 14px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-head h3 {
  font-size: 21px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-head p:last-child {
  max-width: 640px;
  color: #667085;
  font-size: 13px;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="admin"] .admin-company-context .admin-context-head p:last-child {
  color: var(--app-muted);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-account-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, auto));
  gap: 0;
  margin: 0;
  border: 1px solid #e0e5f0;
  border-radius: 7px;
  background: #ffffff;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-account-summary > div {
  display: grid;
  gap: 4px;
  min-width: 112px;
  padding: 10px 13px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-account-summary > div + div {
  border-left: 1px solid #e0e5f0;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-account-summary dt {
  color: #77829a;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-account-summary dd {
  margin: 0;
  color: #18233c;
  font-size: 13px;
  font-weight: 800;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-account-status.is-active {
  color: #07865f;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="admin"] .admin-company-account-status.is-active {
  color: var(--app-success);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-intro {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 0;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-intro > div > span,
body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-group > header > span {
  display: block;
  color: #4431d8;
  font-size: 11px;
  font-weight: 800;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="admin"] .admin-company-form-intro > div > span,
body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="admin"] .admin-company-form-group > header > span {
  color: #8b7cf6;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-intro p,
body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-group > header p {
  margin: 4px 0 0;
  color: #75819a;
  font-size: 13px;
  line-height: 1.45;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-save-state {
  min-height: auto;
  padding-top: 1px;
  color: #77829a;
  white-space: nowrap;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-groups {
  display: grid;
  gap: 0;
  padding: 0 24px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-group {
  padding: 20px 0;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-group + .admin-company-form-group {
  border-top: 1px solid #e0e5f0;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-group > header {
  margin-bottom: 14px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-top: 0;
  border-top: 0;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-company-contact-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-company-field {
  gap: 7px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-company-field > span {
  color: #4d5871;
  font-size: 12px;
  font-weight: 750;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="admin"] .admin-company-context .admin-company-field > span {
  color: var(--app-muted);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-company-field input {
  min-height: 44px;
  padding: 0 12px;
  border-color: #cfd7e7;
  border-radius: 6px;
  background: #ffffff;
  color: #18233c;
  font-size: 14px;
  font-weight: 600;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-field small {
  color: #7b879c;
  font-size: 11px;
  line-height: 1.4;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px;
  border-top: 1px solid #e0e5f0;
  background: #ffffff;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-footer p {
  margin: 0;
  color: #75819a;
  font-size: 12px;
}

@media (max-width: 900px) {
  body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-company-contact-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"][data-app-view="admin"] .page-heading {
    padding-top: 4px;
  }

  body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-head,
  body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-intro,
  body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-footer {
    display: grid;
  }

  body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-head,
  body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-intro,
  body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-groups,
  body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-footer {
    padding-right: 18px;
    padding-left: 18px;
  }

  body[data-signed-in="true"][data-app-view="admin"] .admin-company-account-summary,
  body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-fields,
  body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-company-contact-fields {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"][data-app-view="admin"] .admin-company-account-summary > div + div {
    border-top: 1px solid #e0e5f0;
    border-left: 0;
  }

  body[data-signed-in="true"][data-app-view="admin"] .admin-company-form-footer .primary-button {
    width: 100%;
  }
}

/* El superadministrador navega desde Backoffice; la empresa se abre desde Gestionar. */
body[data-signed-in="true"][data-role="superadmin"] .view-switch {
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-signed-in="true"][data-role="superadmin"] .view-switch #platformViewButton {
  justify-content: flex-start;
  width: 100%;
  padding-inline: 10px;
  border: 1px solid var(--app-line);
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-role="superadmin"] .view-switch #platformViewButton.active {
  border-color: #dcd8ff;
  background: var(--app-accent-soft);
}

/* The superadmin backoffice is divided into focused workspaces in the sidebar. */
body[data-signed-in="true"][data-app-view="platform"] .sidebar .platform-section-nav {
  position: static;
  top: auto;
  z-index: auto;
  order: 2;
  display: grid;
  gap: 2px;
  margin: 2px 0 0;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid var(--app-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-signed-in="true"][data-app-view="platform"] .sidebar .platform-section-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--app-ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}

body[data-signed-in="true"][data-app-view="platform"] .sidebar .platform-section-nav button::before {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px;
}

body[data-signed-in="true"][data-app-view="platform"] .sidebar .platform-section-nav button:hover,
body[data-signed-in="true"][data-app-view="platform"] .sidebar .platform-section-nav button:focus-visible {
  color: var(--app-accent-strong);
  background: var(--app-accent-soft);
}

body[data-signed-in="true"][data-app-view="platform"] .sidebar .platform-section-nav button.active {
  border-color: #dcd8ff;
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
  box-shadow: inset 3px 0 0 var(--app-accent);
}

body[data-signed-in="true"][data-app-view="platform"] .sidebar .platform-section-nav button:focus-visible {
  box-shadow: 0 0 0 3px rgba(81, 70, 217, 0.2);
  outline: none;
}

[data-platform-section][hidden] {
  display: none !important;
}

/* Small, persistent cue for support work that still needs attention. */
body[data-signed-in="true"] .nav-alert-badge {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  place-items: center;
  border: 2px solid var(--app-surface);
  border-radius: 999px;
  background: #dc3d58;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

body[data-signed-in="true"] .client-nav button {
  position: relative;
}

body[data-signed-in="true"] .client-nav .nav-alert-badge {
  position: absolute;
  top: 5px;
  right: 7px;
  margin: 0;
}

body[data-signed-in="true"][data-app-view="platform"] .sidebar .platform-section-nav .nav-alert-badge {
  flex: 0 0 auto;
}

/* Complete onboarding dialog for the first administrator of a company. */
body[data-signed-in="true"] .company-admin-invite-dialog {
  width: min(680px, calc(100vw - 32px));
}

body[data-signed-in="true"] .company-admin-invite-dialog .contact-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 28px);
  border-color: var(--app-line);
  border-radius: 12px;
  background: var(--app-surface);
  box-shadow: 0 24px 64px rgba(23, 32, 61, 0.22);
}

body[data-signed-in="true"] .company-admin-invite-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"] .company-admin-invite-title,
body[data-signed-in="true"] .company-admin-invite-header-actions,
body[data-signed-in="true"] .company-admin-invite-permissions-heading {
  display: flex;
  align-items: flex-start;
}

body[data-signed-in="true"] .company-admin-invite-title {
  min-width: 0;
  gap: 12px;
}

body[data-signed-in="true"] .company-admin-invite-title-icon,
body[data-signed-in="true"] .company-admin-invite-permissions-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 9px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

body[data-signed-in="true"] .company-admin-invite-title-icon::before,
body[data-signed-in="true"] .company-admin-invite-permissions-icon::before {
  width: 18px;
  height: 18px;
}

body[data-signed-in="true"] .company-admin-invite-title .eyebrow {
  margin: 1px 0 4px;
}

body[data-signed-in="true"] .company-admin-invite-title h2 {
  margin: 0;
  color: var(--app-ink);
  font-size: 21px;
  line-height: 1.2;
}

body[data-signed-in="true"] .company-admin-invite-title p:not(.eyebrow) {
  margin: 5px 0 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.45;
}

body[data-signed-in="true"] .company-admin-invite-header-actions {
  flex: 0 0 auto;
  gap: 10px;
}

body[data-signed-in="true"] .company-admin-invite-header-actions .topbar-icon {
  width: 34px;
  height: 34px;
  border: 1px solid var(--app-line);
  background: var(--app-surface);
}

body[data-signed-in="true"] .company-admin-invite-form {
  display: grid;
  gap: 18px;
  overflow-y: auto;
  padding: 20px 24px 22px;
}

body[data-signed-in="true"] .company-admin-invite-context {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .company-admin-invite-monogram {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: var(--app-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

body[data-signed-in="true"] .company-admin-invite-company-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body[data-signed-in="true"] .company-admin-invite-company-copy > span,
body[data-signed-in="true"] .company-admin-invite-permissions-heading span {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .company-admin-invite-company-copy strong,
body[data-signed-in="true"] .company-admin-invite-permissions-heading strong {
  overflow: hidden;
  color: var(--app-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .company-admin-invite-company-copy small {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .company-admin-invite-role {
  align-self: center;
  padding: 5px 8px;
  border: 1px solid #c6c0ff;
  border-radius: 999px;
  background: #eeedff;
  color: var(--app-accent-strong);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

body[data-signed-in="true"] .company-admin-invite-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body[data-signed-in="true"] .company-admin-invite-fields label {
  display: grid;
  gap: 7px;
}

body[data-signed-in="true"] .company-admin-invite-fields label > span {
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .company-admin-invite-fields input {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-ink);
  font: inherit;
  font-size: 13px;
}

body[data-signed-in="true"] .company-admin-invite-fields input::placeholder {
  color: var(--app-muted);
}

body[data-signed-in="true"] .company-admin-invite-fields input:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(81, 70, 217, 0.12);
  outline: none;
}

body[data-signed-in="true"] .company-admin-invite-permissions {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid #dcd8ff;
  border-radius: 10px;
  background: #f8fafc;
}

body[data-signed-in="true"] .company-admin-invite-permissions-heading {
  gap: 10px;
}

body[data-signed-in="true"] .company-admin-invite-permissions-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 8px;
}

body[data-signed-in="true"] .company-admin-invite-permissions-icon::before {
  width: 16px;
  height: 16px;
}

body[data-signed-in="true"] .company-admin-invite-permissions-heading strong {
  display: block;
  margin-top: 2px;
  white-space: normal;
}

body[data-signed-in="true"] .company-admin-invite-permissions ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-signed-in="true"] .company-admin-invite-permissions li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

body[data-signed-in="true"] .company-admin-invite-permissions li::before {
  content: "+";
  display: grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
  border-radius: 50%;
  background: #dff7ec;
  color: #087d56;
  font-size: 12px;
  font-weight: 900;
}

body[data-signed-in="true"] .company-admin-invite-feedback {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-muted);
  color: var(--app-ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"] .company-admin-invite-dialog .contact-actions {
  padding: 14px 24px;
  border-color: var(--app-line);
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .company-admin-invite-permissions {
  border-color: var(--app-line);
  background: rgba(81, 70, 217, 0.13);
}

body[data-signed-in="true"][data-interface-mode="dark"] .company-admin-invite-role {
  border-color: rgba(192, 187, 255, 0.4);
  background: rgba(111, 99, 255, 0.18);
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .company-admin-invite-dialog {
    width: calc(100vw - 20px);
  }

  body[data-signed-in="true"] .company-admin-invite-header {
    padding: 18px 16px 16px;
  }

  body[data-signed-in="true"] .company-admin-invite-title h2 {
    font-size: 19px;
  }

  body[data-signed-in="true"] .company-admin-invite-title p:not(.eyebrow) {
    display: none;
  }

  body[data-signed-in="true"] .company-admin-invite-header-actions {
    gap: 6px;
  }

  body[data-signed-in="true"] .company-admin-invite-header-actions .status-pill {
    display: none;
  }

  body[data-signed-in="true"] .company-admin-invite-form {
    gap: 14px;
    padding: 16px;
  }

  body[data-signed-in="true"] .company-admin-invite-context {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  body[data-signed-in="true"] .company-admin-invite-role {
    grid-column: 2;
    justify-self: start;
  }

  body[data-signed-in="true"] .company-admin-invite-company-copy small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  body[data-signed-in="true"] .company-admin-invite-fields,
  body[data-signed-in="true"] .company-admin-invite-permissions {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .company-admin-invite-dialog .contact-actions {
    padding: 12px 16px;
  }
}

@media (max-width: 720px) {
  body[data-signed-in="true"][data-app-view="platform"] .sidebar .platform-section-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  body[data-signed-in="true"][data-app-view="platform"] .sidebar .platform-section-nav button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    font-size: 11px;
  }
}

/* Superadmin-only control for a client's primary account and subaccounts. */
body[data-signed-in="true"][data-role="superadmin"] .superadmin-access-control {
  display: grid;
  gap: 20px;
}

body[data-signed-in="true"][data-role="superadmin"] .superadmin-access-head {
  align-items: flex-start;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-surface);
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-metric {
  display: grid;
  min-height: 82px;
  padding: 15px 18px;
  align-content: center;
  gap: 5px;
  border-left: 1px solid var(--app-line);
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-metric:first-child {
  border-left: 0;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-metric span,
body[data-signed-in="true"][data-role="superadmin"] .company-access-group-head > div > span {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-metric strong {
  color: var(--app-ink);
  font-size: 25px;
  line-height: 1;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-metric.is-online strong {
  color: #07865f;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-metric.is-pending strong {
  color: #a85d00;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-metric.is-offline strong {
  color: #be3850;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-group {
  display: grid;
  gap: 10px;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-group-head > div {
  display: grid;
  gap: 3px;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-group-head strong {
  color: var(--app-ink);
  font-size: 15px;
  line-height: 1.25;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-group-head small {
  max-width: 320px;
  color: var(--app-ink-soft);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-list {
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-surface);
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  min-height: 92px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-row:last-child {
  border-bottom: 0;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-row.is-primary {
  background: rgba(81, 70, 217, 0.055);
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-identity > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 10px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
  font-size: 13px;
  font-weight: 800;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-identity strong {
  overflow: hidden;
  color: var(--app-ink);
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-identity span:not(.company-access-avatar) {
  overflow: hidden;
  color: var(--app-ink-soft);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-identity small {
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-status.is-active {
  background: #e8f7f1;
  color: #087d56;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-status.is-pending,
body[data-signed-in="true"][data-role="superadmin"] .company-access-status.is-missing {
  background: #fff4e7;
  color: #ad6100;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-status.is-disabled {
  background: #fff0f2;
  color: #be3850;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-actions .primary-button,
body[data-signed-in="true"][data-role="superadmin"] .company-access-actions .secondary-button {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 12px;
  white-space: nowrap;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-actions .company-access-suspend {
  border-color: #efc7ce;
  color: #b3344b;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-row-empty {
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-empty {
  margin: 0;
  padding: 18px;
  color: var(--app-ink-soft);
  font-size: 13px;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-feedback {
  min-height: 18px;
  margin: -6px 0 0;
  color: var(--app-ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-feedback.online {
  color: #087d56;
}

body[data-signed-in="true"][data-role="superadmin"] .company-access-feedback.offline {
  color: #b3344b;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-role="superadmin"] .company-access-row.is-primary {
  background: rgba(116, 105, 255, 0.16);
}

body[data-signed-in="true"][data-interface-mode="dark"][data-role="superadmin"] .company-access-status.is-active {
  background: rgba(8, 134, 91, 0.2);
  color: #7be0b5;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-role="superadmin"] .company-access-status.is-pending,
body[data-signed-in="true"][data-interface-mode="dark"][data-role="superadmin"] .company-access-status.is-missing {
  background: rgba(173, 97, 0, 0.2);
  color: #ffcf87;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-role="superadmin"] .company-access-status.is-disabled {
  background: rgba(190, 56, 80, 0.22);
  color: #ffacbb;
}

@media (max-width: 760px) {
  body[data-signed-in="true"][data-role="superadmin"] .company-access-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body[data-signed-in="true"][data-role="superadmin"] .company-access-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"][data-role="superadmin"] .company-access-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"][data-role="superadmin"] .company-access-metric:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--app-line);
  }

  body[data-signed-in="true"][data-role="superadmin"] .company-access-metric:nth-child(4) {
    border-top: 1px solid var(--app-line);
  }

  body[data-signed-in="true"][data-role="superadmin"] .company-access-group-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  body[data-signed-in="true"][data-role="superadmin"] .company-access-group-head small {
    max-width: none;
    text-align: left;
  }

  body[data-signed-in="true"][data-role="superadmin"] .company-access-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
  }

  body[data-signed-in="true"][data-role="superadmin"] .company-access-state,
  body[data-signed-in="true"][data-role="superadmin"] .company-access-actions {
    justify-self: start;
  }

  body[data-signed-in="true"][data-role="superadmin"] .company-access-actions {
    width: 100%;
  }

  body[data-signed-in="true"][data-role="superadmin"] .company-access-actions .primary-button,
  body[data-signed-in="true"][data-role="superadmin"] .company-access-actions .secondary-button {
    flex: 1 1 160px;
  }
}

/* Review workflow: compact ownership and SLA controls inside the existing detail view. */
body[data-signed-in="true"] .review-detail-dialog .review-workflow-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .review-detail-dialog .review-workflow-head,
body[data-signed-in="true"] .review-detail-dialog .workflow-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-signed-in="true"] .review-detail-dialog .review-workflow-head h3 {
  margin: 3px 0 0;
  color: var(--app-ink);
  font-size: 15px;
  line-height: 1.25;
}

body[data-signed-in="true"] .review-detail-dialog .workflow-alert-context {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--app-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-accent) 8%, var(--app-surface));
  color: var(--app-ink);
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

body[data-signed-in="true"] .review-detail-dialog .workflow-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-signed-in="true"] .review-detail-dialog .workflow-field-grid label,
body[data-signed-in="true"] .review-detail-dialog .workflow-note-field {
  display: grid;
  gap: 6px;
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-signed-in="true"] .review-detail-dialog .workflow-field-grid :is(select, input),
body[data-signed-in="true"] .review-detail-dialog .workflow-note-field textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-surface);
  color: var(--app-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
}

body[data-signed-in="true"] .review-detail-dialog .workflow-note-field textarea {
  min-height: 76px;
  padding: 10px 11px;
  line-height: 1.45;
  resize: vertical;
}

body[data-signed-in="true"] .review-detail-dialog .workflow-field-grid :is(select, input) {
  padding: 0 10px;
}

body[data-signed-in="true"] .review-detail-dialog .workflow-field-grid :is(select, input):focus,
body[data-signed-in="true"] .review-detail-dialog .workflow-note-field textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--app-accent) 28%, transparent);
  outline-offset: 1px;
  border-color: var(--app-accent);
}

body[data-signed-in="true"] .review-detail-dialog .workflow-feedback {
  min-height: 18px;
  color: var(--app-ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

body[data-signed-in="true"] .review-detail-dialog .workflow-save-row .secondary-button {
  flex: 0 0 auto;
}

body[data-signed-in="true"][data-interface-mode="dark"] .review-detail-dialog .review-workflow-panel {
  background: #1e293b;
}

body[data-signed-in="true"][data-interface-mode="dark"] .review-detail-dialog .workflow-field-grid :is(select, input),
body[data-signed-in="true"][data-interface-mode="dark"] .review-detail-dialog .workflow-note-field textarea {
  background: #111827;
  color: #f8fafc;
}

/* Scoped automation rules remain compact and legible inside the existing policy editor. */
body[data-signed-in="true"] .response-policy-rules {
  display: grid;
  gap: 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-muted);
  padding: 14px;
}

body[data-signed-in="true"] .response-policy-rules-heading,
body[data-signed-in="true"] .response-policy-rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-signed-in="true"] .response-policy-rules-heading > div,
body[data-signed-in="true"] .response-policy-rule-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body[data-signed-in="true"] .response-policy-rules-heading strong,
body[data-signed-in="true"] .response-policy-rule-row strong {
  color: var(--app-ink);
  font-size: 13px;
  line-height: 1.35;
}

body[data-signed-in="true"] .response-policy-rules-heading span,
body[data-signed-in="true"] .response-policy-rule-row span,
body[data-signed-in="true"] .response-policy-empty {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"] .response-policy-rule-count {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
}

body[data-signed-in="true"] .response-policy-rule-list {
  display: grid;
  gap: 7px;
}

body[data-signed-in="true"] .response-policy-rule-row {
  min-height: 54px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-surface);
  padding: 9px 10px 9px 12px;
}

body[data-signed-in="true"] .response-policy-rule-remove {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: transparent;
  color: var(--app-danger);
  font-size: 20px;
  line-height: 1;
}

body[data-signed-in="true"] .response-policy-rule-remove:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--app-danger) 36%, var(--app-line));
  background: #fff0f2;
}

body[data-signed-in="true"] .response-policy-rule-builder {
  display: grid;
  grid-template-columns: minmax(150px, 1.25fr) minmax(120px, 1fr) minmax(160px, 1.3fr) minmax(128px, 1fr) auto;
  align-items: end;
  gap: 9px;
}

body[data-signed-in="true"] .response-policy-rule-builder .secondary-button {
  min-height: 42px;
  white-space: nowrap;
}

body[data-signed-in="true"][data-interface-mode="dark"] .response-policy-rules,
body[data-signed-in="true"][data-interface-mode="dark"] .response-policy-rule-row {
  border-color: #334155;
  background: #1e293b;
}

body[data-signed-in="true"][data-interface-mode="dark"] .response-policy-rules-heading strong,
body[data-signed-in="true"][data-interface-mode="dark"] .response-policy-rule-row strong {
  color: #f8fafc;
}

body[data-signed-in="true"][data-interface-mode="dark"] .response-policy-rule-remove:hover:not(:disabled) {
  background: #3b1d27;
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .review-detail-dialog .workflow-field-grid {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .review-detail-dialog .workflow-save-row {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-signed-in="true"] .review-detail-dialog .workflow-save-row .secondary-button {
    width: 100%;
  }

  body[data-signed-in="true"] .response-policy-rules-heading,
  body[data-signed-in="true"] .response-policy-rule-row {
    align-items: flex-start;
  }

  body[data-signed-in="true"] .response-policy-rule-builder {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .response-policy-rule-builder .secondary-button {
    width: 100%;
  }
}

body[data-signed-in="true"] .report-schedule-panel {
  max-width: 1120px;
}

body[data-signed-in="true"] .report-schedule-head {
  align-items: flex-start;
}

body[data-signed-in="true"] .report-schedule-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr);
  margin-top: 20px;
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"] .report-schedule-overview {
  min-width: 0;
  padding: 24px 28px 24px 0;
  border-right: 1px solid var(--app-line);
}

body[data-signed-in="true"] .report-schedule-overview-head,
body[data-signed-in="true"] .report-schedule-form-head,
body[data-signed-in="true"] .report-schedule-immediate-actions,
body[data-signed-in="true"] .report-schedule-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-signed-in="true"] .report-schedule-overview-head {
  align-items: flex-start;
}

body[data-signed-in="true"] .report-schedule-overview-head .settings-icon {
  flex: 0 0 38px;
}

body[data-signed-in="true"] .report-schedule-overview-head strong,
body[data-signed-in="true"] .report-schedule-form-head strong {
  display: block;
  color: var(--app-text);
  font-size: 16px;
}

body[data-signed-in="true"] .report-schedule-overview-head small,
body[data-signed-in="true"] .report-schedule-form-head span {
  display: block;
  margin-top: 3px;
  color: var(--app-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"] .report-schedule-metrics {
  display: grid;
  gap: 12px;
  margin: 22px 0 14px;
}

body[data-signed-in="true"] .report-schedule-metrics > div {
  display: grid;
  grid-template-columns: minmax(112px, 0.72fr) minmax(0, 1.3fr);
  align-items: baseline;
  gap: 12px;
}

body[data-signed-in="true"] .report-schedule-metrics dt {
  color: var(--app-text-muted);
  font-size: 12px;
}

body[data-signed-in="true"] .report-schedule-metrics dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
}

body[data-signed-in="true"] .report-schedule-delivery-hint,
body[data-signed-in="true"] .report-schedule-feedback,
body[data-signed-in="true"] .report-schedule-timezone {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

body[data-signed-in="true"] .report-schedule-immediate-actions {
  margin-top: 20px;
}

body[data-signed-in="true"] .report-schedule-form {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 24px 0 24px 28px;
}

body[data-signed-in="true"] .report-schedule-form-head {
  justify-content: space-between;
  align-items: flex-start;
}

body[data-signed-in="true"] .report-schedule-toggle {
  margin: 0;
  white-space: nowrap;
}

body[data-signed-in="true"] .report-schedule-timezone {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

body[data-signed-in="true"] .report-schedule-timezone strong {
  color: var(--app-text);
  font-weight: 700;
}

body[data-signed-in="true"] .report-schedule-feedback.is-success {
  color: var(--app-success);
}

body[data-signed-in="true"] .report-schedule-feedback.is-error {
  color: var(--app-danger);
}

body[data-signed-in="true"] .report-schedule-actions {
  justify-content: flex-end;
  padding-top: 4px;
}

body[data-signed-in="true"][data-interface-mode="dark"] .report-schedule-layout,
body[data-signed-in="true"][data-interface-mode="dark"] .report-schedule-overview {
  border-color: #334155;
}

@media (max-width: 760px) {
  body[data-signed-in="true"] .report-schedule-layout {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .report-schedule-overview {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--app-line);
  }

  body[data-signed-in="true"] .report-schedule-form {
    padding-left: 0;
  }

  body[data-signed-in="true"][data-interface-mode="dark"] .report-schedule-overview {
    border-color: #334155;
  }
}

@media (max-width: 480px) {
  body[data-signed-in="true"] .report-schedule-form-head,
  body[data-signed-in="true"] .report-schedule-immediate-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-signed-in="true"] .report-schedule-toggle {
    white-space: normal;
  }

  body[data-signed-in="true"] .report-schedule-immediate-actions .secondary-button,
  body[data-signed-in="true"] .report-schedule-immediate-actions .primary-button,
  body[data-signed-in="true"] .report-schedule-actions .primary-button {
    width: 100%;
  }
}

/* Mobile company navigation is a compact section grid, not a desktop sidebar. */
@media (max-width: 620px) {
  body[data-signed-in="true"] .sidebar {
    display: block;
    min-height: 0;
    padding: 10px 16px 0;
    border: 0;
    background: var(--app-canvas);
  }

  body[data-signed-in="true"] .sidebar > .brand,
  body[data-signed-in="true"] .sidebar > .auth-block,
  body[data-signed-in="true"] .sidebar > .client-report-shortcut {
    display: none !important;
  }

  body[data-signed-in="true"] .sidebar > .admin-section-nav,
  body[data-signed-in="true"] .sidebar > .platform-section-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--app-line);
    background: transparent;
  }

  body[data-signed-in="true"] .sidebar > .admin-section-nav button,
  body[data-signed-in="true"] .sidebar > .platform-section-nav button {
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
  }

  body[data-signed-in="true"][data-app-view="client"] .sidebar > .admin-section-nav,
  body[data-signed-in="true"][data-app-view="client"] .sidebar > .platform-section-nav,
  body[data-signed-in="true"][data-app-view="admin"] .sidebar > .platform-section-nav,
  body[data-signed-in="true"][data-app-view="platform"] .sidebar > .admin-section-nav {
    display: none !important;
  }

  /*
    .client-nav never got this same compact-grid treatment for superadmin/
    company_admin accounts - styles.css instead hides it outright for those
    two roles (display:none !important) with nothing replacing it, because
    on mobile those roles use .view-switch as the fixed bottom bar instead
    of .client-nav (see the [data-role] rules further down this file).
    That left every Gestor page other than whichever one you'd landed on
    unreachable on mobile - Tareas/Reseñas/Conexión/Perfil/Soporte/Ajustes
    had no menu at all. Give it the same top grid as admin/platform-section-nav.
    Pure "client"-role accounts are untouched: .view-switch is hidden for
    them (nothing to switch), so .client-nav keeps functioning as their
    bottom bar exactly as before.
  */
  body[data-signed-in="true"]:is([data-role="superadmin"], [data-role="company_admin"]) .sidebar > .client-nav {
    display: grid !important;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0 0 10px;
    border-top: 0;
    border-bottom: 1px solid var(--app-line);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-signed-in="true"]:is([data-role="superadmin"], [data-role="company_admin"]) .sidebar > .client-nav button {
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  body[data-signed-in="true"]:is([data-role="superadmin"], [data-role="company_admin"]) .sidebar > .client-nav .client-nav-divider {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="admin"]:is([data-role="superadmin"], [data-role="company_admin"]) .sidebar > .client-nav,
  body[data-signed-in="true"][data-app-view="platform"]:is([data-role="superadmin"], [data-role="company_admin"]) .sidebar > .client-nav {
    display: none !important;
  }
}

/* Dedicated workboard: review ownership and dates stay readable at a glance. */
body[data-signed-in="true"][data-app-view="client"][data-client-page="tasks"] .page-heading,
body[data-signed-in="true"][data-app-view="client"][data-client-page="tasks"] .saas-strip,
body[data-signed-in="true"][data-app-view="client"][data-client-page="tasks"] #roleNotice {
  display: none !important;
}

body[data-signed-in="true"] .review-task-page {
  display: grid;
  gap: 18px;
  width: min(100%, 1180px);
  margin-top: 28px;
}

body[data-signed-in="true"] .task-board-hero,
body[data-signed-in="true"] .workflow-task-panel {
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}

body[data-signed-in="true"] .task-board-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
}

body[data-signed-in="true"] .task-board-hero h3,
body[data-signed-in="true"] .workflow-task-panel-head h3 {
  margin: 4px 0 0;
  color: var(--app-ink);
  font-size: 23px;
  line-height: 1.2;
}

body[data-signed-in="true"] .task-board-hero p:last-child {
  max-width: 650px;
  margin: 8px 0 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.5;
}

body[data-signed-in="true"] .workflow-task-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body[data-signed-in="true"] .workflow-task-summary-card {
  min-height: 116px;
  padding: 17px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-ink);
  text-align: left;
  box-shadow: var(--app-shadow);
}

body[data-signed-in="true"] .workflow-task-summary-card:hover {
  border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line));
  box-shadow: 0 10px 22px rgba(23, 32, 51, 0.08);
}

body[data-signed-in="true"] .workflow-task-summary-card.active {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
}

body[data-signed-in="true"] .workflow-task-summary-card span,
body[data-signed-in="true"] .workflow-task-summary-card strong,
body[data-signed-in="true"] .workflow-task-summary-card small {
  display: block;
}

body[data-signed-in="true"] .workflow-task-summary-card span {
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .workflow-task-summary-card strong {
  margin-top: 10px;
  font-size: 27px;
  line-height: 1;
}

body[data-signed-in="true"] .workflow-task-summary-card small {
  margin-top: 8px;
  color: var(--app-muted);
  font-size: 12px;
}

body[data-signed-in="true"] .workflow-task-summary-card.overdue strong { color: var(--app-danger); }
body[data-signed-in="true"] .workflow-task-summary-card.today strong { color: #b54708; }
body[data-signed-in="true"] .workflow-task-summary-card.progress strong { color: var(--app-accent-strong); }
body[data-signed-in="true"] .workflow-task-summary-card.unassigned strong { color: #51617a; }

body[data-signed-in="true"] .workflow-task-panel {
  padding: 20px;
}

body[data-signed-in="true"] .workflow-task-panel-head,
body[data-signed-in="true"] .workflow-task-toolbar,
body[data-signed-in="true"] .workflow-task-row {
  display: flex;
  align-items: center;
}

body[data-signed-in="true"] .workflow-task-panel-head {
  justify-content: space-between;
  gap: 16px;
}

body[data-signed-in="true"] .workflow-task-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"] .workflow-task-toolbar button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-surface);
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 750;
}

body[data-signed-in="true"] .workflow-task-toolbar button.active {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: #ffffff;
}

body[data-signed-in="true"] .workflow-task-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

body[data-signed-in="true"] .workflow-task-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(155px, 0.45fr) auto;
  gap: 16px;
  min-height: 108px;
  padding: 16px;
  border: 1px solid var(--app-line);
  border-left: 4px solid #cbd5e1;
  border-radius: 8px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .workflow-task-row.is-overdue { border-left-color: var(--app-danger); }
body[data-signed-in="true"] .workflow-task-row.is-today { border-left-color: #f79009; }

body[data-signed-in="true"] .workflow-task-rating {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  align-content: center;
  border-radius: 8px;
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

body[data-signed-in="true"] .workflow-task-rating span {
  margin-top: 2px;
  color: #d78a00;
  font-size: 13px;
}

body[data-signed-in="true"] .workflow-task-copy {
  min-width: 0;
}

body[data-signed-in="true"] .workflow-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-signed-in="true"] .workflow-task-meta span {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
  font-size: 10px;
  font-weight: 800;
}

body[data-signed-in="true"] .workflow-task-row.is-overdue .workflow-task-meta span:nth-child(2) {
  background: #fff0f2;
  color: var(--app-danger);
}

body[data-signed-in="true"] .workflow-task-row.is-today .workflow-task-meta span:nth-child(2) {
  background: #fff4e7;
  color: #a15c00;
}

body[data-signed-in="true"] .workflow-task-copy h4 {
  margin: 8px 0 0;
  color: var(--app-ink);
  font-size: 15px;
}

body[data-signed-in="true"] .workflow-task-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 5px 0 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-signed-in="true"] .workflow-task-owner {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid var(--app-line);
}

body[data-signed-in="true"] .workflow-task-owner span,
body[data-signed-in="true"] .workflow-task-owner strong,
body[data-signed-in="true"] .workflow-task-owner small {
  display: block;
}

body[data-signed-in="true"] .workflow-task-owner span {
  color: var(--app-ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .workflow-task-owner strong {
  overflow: hidden;
  margin-top: 6px;
  color: var(--app-ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .workflow-task-owner small {
  margin-top: 6px;
  color: var(--app-muted);
  font-size: 12px;
}

body[data-signed-in="true"] .workflow-task-row .table-action {
  min-width: 84px;
}

body[data-signed-in="true"] .workflow-task-empty {
  display: grid;
  gap: 5px;
  padding: 36px 20px;
  border: 1px dashed var(--app-line);
  border-radius: 8px;
  color: var(--app-muted);
  text-align: center;
}

body[data-signed-in="true"] .workflow-task-empty strong {
  color: var(--app-ink);
}

@media (max-width: 900px) {
  body[data-signed-in="true"] .workflow-task-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"] .workflow-task-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
  }

  body[data-signed-in="true"] .workflow-task-owner {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-left: 0;
    border-left: 0;
  }

  body[data-signed-in="true"] .workflow-task-owner span,
  body[data-signed-in="true"] .workflow-task-owner strong,
  body[data-signed-in="true"] .workflow-task-owner small {
    display: inline;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .review-task-page {
    gap: 12px;
    margin-top: 16px;
  }

  body[data-signed-in="true"] .task-board-hero,
  body[data-signed-in="true"] .workflow-task-panel {
    padding: 16px;
  }

  body[data-signed-in="true"] .task-board-hero {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-signed-in="true"] .task-board-hero .secondary-button {
    width: 100%;
  }

  body[data-signed-in="true"] .workflow-task-summary {
    gap: 8px;
  }

  body[data-signed-in="true"] .workflow-task-summary-card {
    min-height: 100px;
    padding: 13px;
  }

  body[data-signed-in="true"] .workflow-task-summary-card strong {
    font-size: 24px;
  }

  body[data-signed-in="true"] .workflow-task-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-signed-in="true"] .workflow-task-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  body[data-signed-in="true"] .workflow-task-toolbar button {
    flex: 0 0 auto;
  }

  body[data-signed-in="true"] .workflow-task-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
  }

  body[data-signed-in="true"] .workflow-task-rating {
    width: 40px;
    height: 40px;
  }

  body[data-signed-in="true"] .workflow-task-owner,
  body[data-signed-in="true"] .workflow-task-row .table-action {
    grid-column: 1 / -1;
  }

  body[data-signed-in="true"] .workflow-task-owner {
    display: block;
  }

  body[data-signed-in="true"] .workflow-task-owner span,
  body[data-signed-in="true"] .workflow-task-owner strong,
  body[data-signed-in="true"] .workflow-task-owner small {
    display: block;
  }

  body[data-signed-in="true"] .workflow-task-row .table-action {
    width: 100%;
  }
}

/* Reasignacion de seguimientos cuando una cuenta deja de poder atenderlos. */
body[data-signed-in="true"] .member-reassign-button {
  min-height: 34px;
  padding: 7px 10px;
  border-color: #f2c5bf;
  color: var(--app-danger);
  font-size: 12px;
  white-space: nowrap;
}

body[data-signed-in="true"] .member-reassign-button:hover,
body[data-signed-in="true"] .member-reassign-button:focus-visible {
  border-color: var(--app-danger);
  background: #fff0f2;
}

body[data-signed-in="true"] .workflow-reassign-dialog .contact-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border-color: var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: 0 24px 64px rgba(23, 32, 61, 0.22);
}

body[data-signed-in="true"] .workflow-reassign-dialog .workflow-reassign-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  max-height: calc(100dvh - 222px);
  overflow-y: auto;
  padding-right: 14px;
  scrollbar-gutter: stable;
}

body[data-signed-in="true"] .workflow-reassign-context {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0 15px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"] .workflow-reassign-context-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #fff0f2;
  color: var(--app-danger);
}

body[data-signed-in="true"] .workflow-reassign-context > div {
  min-width: 0;
}

body[data-signed-in="true"] .workflow-reassign-context span:not(.workflow-reassign-context-icon),
body[data-signed-in="true"] .workflow-reassign-context strong,
body[data-signed-in="true"] .workflow-reassign-context small {
  display: block;
}

body[data-signed-in="true"] .workflow-reassign-context span:not(.workflow-reassign-context-icon) {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-signed-in="true"] .workflow-reassign-context strong {
  margin-top: 3px;
  overflow: hidden;
  color: var(--app-ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .workflow-reassign-context small {
  margin-top: 3px;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.4;
}

body[data-signed-in="true"] .workflow-reassign-preview {
  padding: 14px 0 0;
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"] .workflow-reassign-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

body[data-signed-in="true"] .workflow-reassign-preview-head strong {
  color: var(--app-ink);
  font-size: 13px;
}

body[data-signed-in="true"] .workflow-reassign-preview-head span {
  color: var(--app-muted);
  font-size: 11px;
  text-align: right;
}

body[data-signed-in="true"] .workflow-reassign-review-list {
  display: grid;
  gap: 0;
  max-height: 172px;
  margin: 10px 0 0;
  padding: 0;
  overflow-y: auto;
  border-top: 1px solid var(--app-line);
  list-style: none;
}

body[data-signed-in="true"] .workflow-reassign-review-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"] .workflow-reassign-review-list strong,
body[data-signed-in="true"] .workflow-reassign-review-list span {
  min-width: 0;
}

body[data-signed-in="true"] .workflow-reassign-review-list strong {
  overflow: hidden;
  color: var(--app-ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .workflow-reassign-review-list span,
body[data-signed-in="true"] .workflow-reassign-review-list .workflow-reassign-more {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
}

body[data-signed-in="true"] .workflow-reassign-review-list .workflow-reassign-more {
  display: block;
}

body[data-signed-in="true"] .workflow-reassign-status {
  min-height: 18px;
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

body[data-signed-in="true"] .workflow-reassign-status.is-success {
  color: var(--app-success);
}

body[data-signed-in="true"] .workflow-reassign-status.is-error {
  color: var(--app-danger);
}

/* Indicadores principales del backoffice: iconos legibles y moneda europea. */
body[data-signed-in="true"][data-app-view="platform"] .platform-metric {
  padding-top: 82px !important;
}

body[data-signed-in="true"][data-app-view="platform"] .platform-metric::before {
  top: 16px;
  left: 16px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
}

body[data-signed-in="true"][data-app-view="platform"] .company-metric::before {
  color: #5140d8;
  background: currentColor !important;
}

body[data-signed-in="true"][data-app-view="platform"] .revenue-metric::before {
  content: "\20AC" !important;
  display: grid !important;
  place-items: center;
  background: #e8f7ff !important;
  color: #087ea4;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-signed-in="true"][data-app-view="platform"] .ai-metric::before {
  color: #00845f;
  background: currentColor !important;
}

body[data-signed-in="true"][data-app-view="platform"] .users-metric::before {
  --icon: var(--icon-profile);
  color: #51617a;
  background: currentColor !important;
}

/* Billing is a focused workspace: account state, invoice work and Stripe actions. */
body[data-signed-in="true"][data-app-view="admin"] .billing-workspace {
  max-width: 1240px;
  gap: 20px;
  padding: 26px 28px 30px;
  border-color: var(--app-line);
  border-radius: 12px;
  background: var(--app-surface);
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-head {
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-head .eyebrow {
  margin: 0 0 5px;
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-head h3 {
  color: var(--app-ink);
  font-size: 24px;
  line-height: 1.15;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-head > div:first-child > span {
  max-width: 650px;
  margin-top: 7px;
  color: var(--app-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace .backoffice-actions {
  gap: 8px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace .backoffice-actions .status-pill {
  min-height: 30px;
  padding-inline: 9px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-account-state {
  grid-template-columns: minmax(190px, 1.18fr) repeat(2, minmax(170px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-account-state > label {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 106px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-app-view="admin"] .billing-account-state > label:is(.billing-account-plan, .billing-account-status) {
  background: color-mix(in srgb, var(--app-accent) 5%, var(--app-surface));
}

body[data-signed-in="true"][data-app-view="admin"] .billing-account-email {
  grid-column: span 2;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-account-state > label > span {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-account-state :is(input, select) {
  min-height: 36px;
  border-color: var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink);
  font-size: 13px;
  font-weight: 650;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-account-state :is(input, select):disabled {
  cursor: default;
  opacity: 1;
  background: color-mix(in srgb, var(--app-accent) 3%, var(--app-surface));
  color: var(--app-ink-soft);
}

body[data-signed-in="true"][data-app-view="admin"] .billing-account-state .field-help {
  margin-top: 0;
  color: var(--app-muted);
  font-size: 10px;
  line-height: 1.35;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-company-overview {
  gap: 14px;
  min-height: 94px;
  padding: 15px 17px;
  border-color: color-mix(in srgb, var(--app-accent) 22%, var(--app-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-accent) 4%, var(--app-surface));
  box-shadow: inset 4px 0 0 var(--app-accent);
}

body[data-signed-in="true"][data-app-view="admin"] .billing-company-overview .company-avatar-large {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--app-accent);
  font-size: 16px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-company-overview strong {
  font-size: 18px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-company-overview small {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 600;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-layout {
  grid-template-columns: minmax(0, 1fr) minmax(286px, 324px);
  gap: 18px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-main {
  gap: 18px;
  padding: 22px;
  border-color: var(--app-line);
  border-radius: 10px;
  background: var(--app-surface);
  box-shadow: none;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-section-header {
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"][data-app-view="admin"] .billing-section-header strong {
  color: var(--app-ink);
  font-size: 19px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-section-header small {
  border: 1px solid var(--app-line);
  background: var(--app-surface-muted);
  color: var(--app-ink-soft);
}

body[data-signed-in="true"][data-app-view="admin"] .billing-summary-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-app-view="admin"] .billing-summary-grid article {
  min-height: 96px;
  padding: 15px 16px;
  border: 0;
  border-right: 1px solid var(--app-line);
  border-radius: 0;
  background: transparent;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-summary-grid article:last-child {
  border-right: 0;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-summary-grid strong {
  margin-top: 9px;
  color: var(--app-ink);
  font-size: 16px;
  line-height: 1.25;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-invoice-actions {
  gap: 8px;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"][data-app-view="admin"] .billing-invoice-actions .primary-button,
body[data-signed-in="true"][data-app-view="admin"] .billing-invoice-actions .secondary-button {
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 7px;
  font-size: 12px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-invoice-history {
  gap: 10px;
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-address-form {
  gap: 12px;
  padding-top: 2px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-address-head {
  display: flex;
  grid-column: 1 / -1;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 2px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-address-head span,
body[data-signed-in="true"][data-app-view="admin"] .billing-address-head strong,
body[data-signed-in="true"][data-app-view="admin"] .billing-address-head small {
  display: block;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-address-head span {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-address-head strong {
  margin-top: 4px;
  color: var(--app-ink);
  font-size: 15px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-address-head small {
  max-width: 250px;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.4;
  text-align: right;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-address-form label {
  gap: 6px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-address-form :is(input, textarea) {
  min-height: 40px;
  border-color: var(--app-line);
  border-radius: 7px;
  background: var(--app-surface-muted);
  color: var(--app-ink);
  font-size: 13px;
  font-weight: 600;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-side {
  gap: 12px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-side section {
  padding: 17px;
  border-color: var(--app-line);
  border-radius: 10px;
  background: var(--app-surface);
  box-shadow: none;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-side strong {
  margin-top: 7px;
  color: var(--app-ink);
  font-size: 16px;
  line-height: 1.25;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-side p {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.5;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-subscription-card {
  border-left: 3px solid var(--app-success);
}

body[data-signed-in="true"][data-app-view="admin"] .stripe-billing-card {
  border-color: color-mix(in srgb, var(--app-accent) 28%, var(--app-line)) !important;
  background: color-mix(in srgb, var(--app-accent) 5%, var(--app-surface)) !important;
}

body[data-signed-in="true"][data-app-view="admin"] .stripe-billing-card > span {
  color: var(--app-accent);
}

body[data-signed-in="true"][data-app-view="admin"] .stripe-checkout-plan {
  gap: 5px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--app-accent) 18%, var(--app-line));
}

body[data-signed-in="true"][data-app-view="admin"] .stripe-checkout-plan select {
  min-height: 40px;
  border-color: color-mix(in srgb, var(--app-accent) 22%, var(--app-line));
  border-radius: 7px;
  background: var(--app-surface);
  color: var(--app-ink);
  font-size: 12px;
  font-weight: 700;
}

body[data-signed-in="true"][data-app-view="admin"] .stripe-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 14px;
}

body[data-signed-in="true"][data-app-view="admin"] .stripe-actions .primary-button,
body[data-signed-in="true"][data-app-view="admin"] .stripe-actions .secondary-button {
  min-height: 40px;
  border-radius: 7px;
  font-size: 12px;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-info-card {
  background: var(--app-surface-muted) !important;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-next-step-card {
  border-style: dashed !important;
  background: var(--app-surface-muted) !important;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="admin"] .billing-account-state > label,
body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="admin"] .billing-summary-grid,
body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="admin"] .billing-address-form :is(input, textarea) {
  background: var(--app-surface-muted);
}

@media (max-width: 980px) {
  body[data-signed-in="true"][data-app-view="admin"] .billing-account-state {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-layout {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"][data-app-view="admin"] .stripe-billing-card {
    grid-column: span 2;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"][data-app-view="admin"] .billing-workspace {
    gap: 16px;
    padding: 18px;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-head {
    align-items: stretch;
    flex-direction: column;
    padding-bottom: 16px;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-head h3 {
    font-size: 22px;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-workspace .backoffice-actions {
    justify-content: stretch;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-workspace .backoffice-actions > button {
    flex: 1 1 148px;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-account-state,
  body[data-signed-in="true"][data-app-view="admin"] .billing-workspace-side {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-account-email {
    grid-column: auto;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-account-state > label {
    min-height: 0;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-summary-grid {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-summary-grid article {
    min-height: 78px;
    border-right: 0;
    border-bottom: 1px solid var(--app-line);
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-summary-grid article:last-child {
    border-bottom: 0;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-address-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  body[data-signed-in="true"][data-app-view="admin"] .billing-address-head small {
    max-width: none;
    text-align: left;
  }

  body[data-signed-in="true"][data-app-view="admin"] .stripe-billing-card {
    grid-column: auto;
  }

  body[data-signed-in="true"][data-app-view="admin"] .stripe-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .workflow-reassign-dialog .contact-shell {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  body[data-signed-in="true"] .workflow-reassign-dialog .workflow-reassign-form {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 204px);
    padding-right: 0;
  }

  body[data-signed-in="true"] .workflow-reassign-preview-head,
  body[data-signed-in="true"] .workflow-reassign-review-list li {
    align-items: flex-start;
    grid-template-columns: 1fr;
    gap: 3px;
  }

  body[data-signed-in="true"] .workflow-reassign-preview-head span {
    text-align: left;
  }
}

/* Focused review import workspace. */
body[data-signed-in="true"][data-app-view="admin"] .admin-import-panel {
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
  align-items: stretch;
  gap: 28px;
  padding: 24px 26px;
  border-color: var(--app-line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(27, 35, 63, 0.05);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-copy {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-content: start;
  gap: 13px;
  padding: 5px 4px 0 0;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-symbol,
body[data-signed-in="true"][data-app-view="admin"] .import-file-picker-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-symbol::before,
body[data-signed-in="true"][data-app-view="admin"] .import-file-picker-icon::before {
  font-size: 17px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-copy .eyebrow {
  margin-bottom: 4px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-copy h3 {
  margin: 0;
  color: var(--app-ink);
  font-size: 21px;
  line-height: 1.2;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-copy p {
  margin: 8px 0 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.5;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-format-note {
  display: inline-flex;
  margin-top: 12px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 18%, var(--app-line));
  border-radius: 999px;
  background: var(--app-surface-muted);
  color: var(--app-ink-soft);
  font-size: 10px;
  font-weight: 750;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-workspace {
  display: grid;
  align-content: start;
  gap: 10px;
}

body[data-signed-in="true"][data-app-view="admin"] .import-file-picker {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 86px;
  gap: 12px;
  padding: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--app-accent) 38%, var(--app-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-accent) 3%, var(--app-surface));
  color: var(--app-ink);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

body[data-signed-in="true"][data-app-view="admin"] .import-file-picker:hover,
body[data-signed-in="true"][data-app-view="admin"] .import-file-picker:focus-within {
  border-color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 7%, var(--app-surface));
  transform: translateY(-1px);
}

body[data-signed-in="true"][data-app-view="admin"] .import-file-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body[data-signed-in="true"][data-app-view="admin"] .import-file-picker > span {
  pointer-events: none;
}

body[data-signed-in="true"][data-app-view="admin"] .import-file-picker-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body[data-signed-in="true"][data-app-view="admin"] .import-file-picker-copy strong {
  color: var(--app-ink);
  font-size: 13px;
  font-weight: 800;
}

body[data-signed-in="true"][data-app-view="admin"] .import-file-picker-copy small {
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
}

body[data-signed-in="true"][data-app-view="admin"] .import-file-name {
  max-width: 180px;
  overflow: hidden;
  padding: 7px 9px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface);
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-commands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-commands button,
body[data-signed-in="true"][data-app-view="admin"] .admin-import-maintenance button {
  min-height: 40px;
  padding-inline: 13px;
  border-radius: 7px;
  font-size: 12px;
}

body[data-signed-in="true"][data-app-view="admin"] #confirmImport {
  min-width: 162px;
}

body[data-signed-in="true"][data-app-view="admin"] #confirmImport[data-loading="true"] {
  cursor: progress;
  opacity: 0.72;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-feedback {
  min-height: 18px;
  margin: 0;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.45;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-feedback[data-state="ready"] {
  color: var(--app-ink-soft);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-feedback[data-state="loading"] {
  color: var(--app-accent);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-feedback[data-state="success"] {
  color: var(--app-success);
  font-weight: 700;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-feedback[data-state="error"] {
  color: var(--app-danger);
  font-weight: 700;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-maintenance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-maintenance > span {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body[data-signed-in="true"][data-app-view="admin"] .admin-import-maintenance > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="admin"] .import-file-picker {
  background: color-mix(in srgb, var(--app-accent) 9%, var(--app-surface));
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="admin"] .import-file-name {
  background: var(--app-surface-muted);
}

@media (max-width: 980px) {
  body[data-signed-in="true"][data-app-view="admin"] .admin-import-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"][data-app-view="admin"] .admin-import-panel {
    gap: 20px;
    padding: 18px;
  }

  body[data-signed-in="true"][data-app-view="admin"] .import-file-picker {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  body[data-signed-in="true"][data-app-view="admin"] .import-file-name {
    grid-column: 1 / -1;
    max-width: none;
    text-align: left;
  }

  body[data-signed-in="true"][data-app-view="admin"] .admin-import-commands > button {
    flex: 1 1 154px;
  }

  body[data-signed-in="true"][data-app-view="admin"] .admin-import-maintenance {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-signed-in="true"][data-app-view="admin"] .admin-import-maintenance > div {
    justify-content: flex-start;
  }
}

/* Review inbox actions: clear hierarchy, feedback and compact controls. */
body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox-head {
  padding: 14px 16px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: 0 6px 18px rgba(23, 32, 51, 0.035);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox-actions {
  gap: 10px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar-button {
  min-height: 40px !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 800;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar-button::before {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-export-button {
  border-color: color-mix(in srgb, var(--app-accent) 21%, var(--app-line));
  background: var(--app-surface-muted);
  color: var(--app-ink-soft);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-export-button:hover,
body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-export-button[data-complete="true"] {
  border-color: color-mix(in srgb, var(--app-success) 45%, var(--app-line));
  background: color-mix(in srgb, var(--app-success) 8%, var(--app-surface));
  color: var(--app-success);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-generate-button {
  min-width: 174px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--app-accent) 25%, transparent);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-generate-button:hover {
  box-shadow: 0 11px 22px color-mix(in srgb, var(--app-accent) 32%, transparent);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .insights {
  display: block;
  margin-bottom: 14px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: 0 6px 18px rgba(23, 32, 51, 0.035);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-actions {
  display: block;
  width: 100%;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 14px 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--app-accent) 7%, var(--app-surface)), var(--app-surface) 58%);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-icon {
  display: inline-grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: var(--app-accent);
  color: #ffffff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--app-accent) 22%, transparent);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-icon::before {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  margin: 0;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-copy > div {
  display: grid;
  gap: 2px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-copy span:not(.review-bulk-icon) {
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-copy strong {
  color: var(--app-ink);
  font-size: 14px;
  line-height: 1.25;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-copy small {
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .quick-actions {
  flex: 0 0 auto;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-auto-button {
  min-height: 40px !important;
  padding: 9px 13px !important;
  border-color: color-mix(in srgb, var(--app-accent) 27%, var(--app-line));
  border-radius: 8px !important;
  background: var(--app-surface);
  color: var(--app-accent-strong);
  font-size: 12px !important;
  font-weight: 800;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-auto-button:hover:not(:disabled) {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .bulk-action-status:not(:empty) {
  min-height: 36px;
  margin: 0;
  padding: 9px 16px;
  border-top: 1px solid var(--app-line);
  background: var(--app-surface-muted);
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 700;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .bulk-action-status.is-success {
  color: var(--app-success);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .bulk-action-status.is-error {
  color: var(--app-danger);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .reply-actions .review-icon-action {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.03);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .reply-actions .review-icon-action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--app-accent) 44%, var(--app-line));
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
  box-shadow: 0 4px 10px rgba(81, 70, 217, 0.12);
  transform: translateY(-1px);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .reply-command-row {
  gap: 10px;
  padding-top: 2px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .reply-command-row button {
  min-height: 42px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-publish-action {
  border: 1px solid var(--app-accent);
  background: var(--app-accent);
  color: #ffffff;
  box-shadow: 0 7px 15px color-mix(in srgb, var(--app-accent) 20%, transparent);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-publish-action:hover:not(:disabled) {
  border-color: var(--app-accent-strong);
  background: var(--app-accent-strong);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--app-accent) 27%, transparent);
  transform: translateY(-1px);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-approve-action {
  border-color: color-mix(in srgb, var(--app-success) 35%, var(--app-line));
  background: color-mix(in srgb, var(--app-success) 7%, var(--app-surface));
  color: var(--app-success);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-approve-action:hover:not(:disabled) {
  border-color: var(--app-success);
  background: color-mix(in srgb, var(--app-success) 13%, var(--app-surface));
  color: var(--app-success);
  transform: translateY(-1px);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] :is(.review-generate-button, .review-auto-button, .review-icon-action, .review-publish-action, .review-approve-action)[data-loading="true"] {
  cursor: progress;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] :is(.review-generate-button, .review-auto-button, .review-icon-action, .review-publish-action, .review-approve-action)[data-loading="true"]::before {
  animation: review-action-spin 850ms linear infinite;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] :is(.review-toolbar-button, .review-auto-button, .review-icon-action, .reply-command-row button):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--app-accent) 33%, transparent);
  outline-offset: 2px;
}

@keyframes review-action-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox-actions {
    width: 100%;
    justify-content: stretch;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar-button {
    flex: 1 1 150px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-callout {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-copy {
    align-items: flex-start;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .quick-actions,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-auto-button {
    width: 100%;
  }
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="reviews"] .review-bulk-callout {
  background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface));
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="reviews"] .review-approve-action {
  background: color-mix(in srgb, var(--app-success) 15%, var(--app-surface));
}

/* Dashboard polish: stronger data hierarchy over a calm, diffused workspace background. */
body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .workspace {
  background-color: var(--app-canvas);
  background-image:
    linear-gradient(118deg, rgba(81, 70, 217, 0.055) 0%, rgba(81, 70, 217, 0) 34%),
    linear-gradient(228deg, rgba(14, 165, 233, 0.05) 0%, rgba(14, 165, 233, 0) 37%),
    linear-gradient(326deg, rgba(16, 185, 129, 0.045) 0%, rgba(16, 185, 129, 0) 35%),
    linear-gradient(44deg, rgba(249, 115, 22, 0.035) 0%, rgba(249, 115, 22, 0) 30%);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero {
  align-items: center;
  min-height: 70px;
  padding: 4px 2px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--app-line) 78%, transparent);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface));
  color: var(--app-accent-strong);
  font-size: 10px;
  letter-spacing: 0.04em;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero h3 {
  margin-top: 7px;
  font-size: 25px;
  letter-spacing: 0;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero span {
  margin-top: 5px;
  color: var(--app-ink-soft);
  font-size: 13px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-hero-actions {
  gap: 9px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-hero-actions .secondary-button {
  min-height: 40px;
  padding: 8px 13px;
  border-color: color-mix(in srgb, var(--app-accent) 19%, var(--app-line));
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: 0 4px 10px rgba(23, 32, 51, 0.035);
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 800;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-hero-actions .secondary-button::before {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] #sendReputationReport {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: #ffffff;
  box-shadow: 0 8px 16px color-mix(in srgb, var(--app-accent) 20%, transparent);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] #sendReputationReport:hover:not(:disabled) {
  border-color: var(--app-accent-strong);
  background: var(--app-accent-strong);
  transform: translateY(-1px);
}

/*
  --app-accent/-strong are lightened in dark mode for text on dark surfaces
  (#8b7cf6/#a78bfa) - as a solid button fill behind white text that's only
  ~3.3:1 resting and worse on hover, under WCAG AA. Same darker purple as the
  action-plan-panel title bar fix above, for one consistent "solid accent
  button" color in dark mode.
*/
body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="dashboard"] #sendReputationReport {
  background: #312a89;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="dashboard"] #sendReputationReport:hover:not(:disabled) {
  background: #3b3399;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-card {
  position: relative;
  min-height: 136px;
  overflow: hidden;
  padding: 56px 18px 17px;
  border-color: color-mix(in srgb, var(--app-line) 90%, var(--app-accent));
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.045);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-card:hover {
  border-color: color-mix(in srgb, var(--app-accent) 36%, var(--app-line));
  box-shadow: 0 13px 26px rgba(23, 32, 51, 0.075);
  transform: translateY(-1px);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-card::before {
  content: none !important;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card-icon {
  position: absolute;
  top: 16px;
  left: 18px;
  display: inline-grid !important;
  width: 34px;
  height: 34px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card-icon::before {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  margin: 0;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-total .metric-card-icon {
  border-color: rgba(14, 165, 233, 0.15);
  background: rgba(14, 165, 233, 0.11);
  color: #087eaf;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-new .metric-card-icon {
  border-color: rgba(8, 117, 83, 0.14);
  background: rgba(8, 117, 83, 0.1);
  color: var(--app-success);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-pending .metric-card-icon {
  border-color: rgba(180, 35, 47, 0.14);
  background: rgba(180, 35, 47, 0.09);
  color: var(--app-danger);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card > span:not(.metric-card-icon) {
  color: var(--app-ink-soft);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card strong {
  margin-top: 8px;
  color: var(--app-ink);
  font-size: 29px;
  line-height: 1;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card small {
  margin-top: 7px;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 700;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-pending small {
  color: var(--app-danger);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card::after {
  top: 17px;
  right: 17px;
  min-height: 22px;
  padding: 4px 8px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-rating::after,
body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-total::after {
  border-color: rgba(8, 117, 83, 0.13);
  background: rgba(8, 117, 83, 0.09);
  color: var(--app-success);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-new::after {
  border-color: rgba(8, 117, 83, 0.13);
  background: rgba(8, 117, 83, 0.09);
  color: var(--app-success);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-pending::after {
  border-color: rgba(180, 35, 47, 0.16);
  background: rgba(180, 35, 47, 0.09);
  color: var(--app-danger);
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="dashboard"] .workspace {
  background-image:
    linear-gradient(118deg, rgba(129, 140, 248, 0.09) 0%, rgba(129, 140, 248, 0) 35%),
    linear-gradient(228deg, rgba(56, 189, 248, 0.07) 0%, rgba(56, 189, 248, 0) 37%),
    linear-gradient(326deg, rgba(52, 211, 153, 0.06) 0%, rgba(52, 211, 153, 0) 35%);
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="dashboard"] .metric-card-icon {
  border-color: color-mix(in srgb, var(--app-accent) 32%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent) 18%, var(--app-surface-muted));
}

@media (max-width: 760px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero {
    min-height: 0;
    padding-bottom: 14px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero h3 {
    font-size: 22px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-card {
    min-height: 126px;
    padding: 54px 15px 15px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card-icon {
    top: 14px;
    left: 15px;
    width: 32px;
    height: 32px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card strong {
    font-size: 25px;
  }
}

/* Balanced desktop dashboard: analysis and action panels share the same visual weight. */
@media (min-width: 1101px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] :is(.client-dashboard-hero, .task-grid, .company-kpi-section, .dashboard-keywords) {
    grid-column: 1 / -1;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero { grid-row: 1; }
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .task-grid { grid-row: 2; }
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .company-kpi-section { grid-row: 3; }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-visuals {
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] :is(.rating-evolution-panel, .star-distribution-panel) {
    min-height: 326px;
    height: 100%;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .rating-evolution-panel svg {
    min-height: 236px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .star-distribution-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .star-distribution-panel svg {
    min-height: 198px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-panel {
    grid-column: 1;
    grid-row: 5;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 410px;
    align-self: stretch;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: stretch;
    gap: 12px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .action-plan-item {
    min-height: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-review-queue {
    grid-column: 2;
    grid-row: 5;
    min-height: 410px;
    align-self: stretch;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-keywords { grid-row: 6; }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] :is(.pending-tasks-head, .pending-task-grid, .compact-task-list, .operational-strip) {
    display: none;
  }
}

/* Supplier ordering is a compact operational workspace, not an extra dashboard. */
body[data-signed-in="true"] .procurement-page {
  width: min(1180px, 100%);
  display: grid;
  gap: 18px;
  margin: 0 auto;
  padding: 8px 0 30px;
}

body[data-signed-in="true"] :is(.procurement-plan-gate, .procurement-workspace)[hidden] {
  display: none !important;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="orders"] :is(.page-heading, .saas-strip, #roleNotice, .client-report-shortcut) {
  display: none !important;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="orders"] .procurement-page {
  margin-top: 18px;
}

body[data-signed-in="true"] .procurement-head,
body[data-signed-in="true"] .procurement-panel-head,
body[data-signed-in="true"] .procurement-order-main,
body[data-signed-in="true"] .procurement-order-actions,
body[data-signed-in="true"] .procurement-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body[data-signed-in="true"] .procurement-head {
  align-items: flex-start;
  padding: 6px 2px 2px;
}

body[data-signed-in="true"] .procurement-head h3,
body[data-signed-in="true"] .procurement-panel-head h4 {
  margin: 3px 0 0;
  color: var(--app-ink);
  letter-spacing: 0;
}

body[data-signed-in="true"] .procurement-head h3 { font-size: 25px; }
body[data-signed-in="true"] .procurement-panel-head h4 { font-size: 17px; }

body[data-signed-in="true"] .procurement-head p:not(.eyebrow),
body[data-signed-in="true"] .procurement-panel-head p:not(.eyebrow) {
  margin: 7px 0 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.55;
}

body[data-signed-in="true"] .procurement-plan-gate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 26%, var(--app-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-accent) 7%, var(--app-surface));
}

body[data-signed-in="true"] .procurement-gate-icon,
body[data-signed-in="true"] .procurement-row-avatar {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface));
  color: var(--app-accent);
  font-size: 13px;
  font-weight: 850;
}

body[data-signed-in="true"] .procurement-gate-icon::before {
  width: 20px;
  height: 20px;
}

body[data-signed-in="true"] .procurement-plan-gate strong {
  display: block;
  color: var(--app-ink);
  font-size: 15px;
}

body[data-signed-in="true"] .procurement-plan-gate p {
  margin: 4px 0 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.5;
}

body[data-signed-in="true"] .procurement-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(330px, 0.58fr);
  gap: 16px;
  align-items: start;
}

body[data-signed-in="true"] .procurement-summary,
body[data-signed-in="true"] .procurement-catalog-panel,
body[data-signed-in="true"] .procurement-orders-panel {
  grid-column: 1 / -1;
}

body[data-signed-in="true"] .procurement-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body[data-signed-in="true"] .procurement-summary article,
body[data-signed-in="true"] :is(.procurement-compose-panel, .procurement-suppliers-panel, .procurement-catalog-panel, .procurement-orders-panel) {
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.05);
}

body[data-signed-in="true"] .procurement-summary article {
  position: relative;
  min-height: 106px;
  display: flex;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  padding: 16px;
}

body[data-signed-in="true"] .procurement-summary-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  content: "";
  background: var(--procurement-metric-color, var(--app-accent));
}

body[data-signed-in="true"] .procurement-summary-card > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

body[data-signed-in="true"] .procurement-summary-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--procurement-metric-color, var(--app-accent)) 12%, var(--app-surface));
  color: var(--procurement-metric-color, var(--app-accent));
}

body[data-signed-in="true"] .procurement-summary-icon::before {
  width: 18px;
  height: 18px;
}

body[data-signed-in="true"] .procurement-summary-suppliers { --procurement-metric-color: #0c8c68; }
body[data-signed-in="true"] .procurement-summary-products { --procurement-metric-color: #2676d8; }
body[data-signed-in="true"] .procurement-summary-orders { --procurement-metric-color: #7d4bbd; }

body[data-signed-in="true"] .procurement-summary-card > div > span,
body[data-signed-in="true"] .procurement-summary-card > div > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .procurement-summary-card > div > :is(span, small) {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 700;
}

body[data-signed-in="true"] .procurement-summary-card > div > span {
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .procurement-summary-card > div > strong {
  color: var(--app-ink);
  font-size: 27px;
  line-height: 1;
}

body[data-signed-in="true"] :is(.procurement-compose-panel, .procurement-suppliers-panel, .procurement-catalog-panel, .procurement-orders-panel) {
  padding: 17px;
}

body[data-signed-in="true"] .procurement-panel-head {
  min-height: 46px;
  padding-bottom: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
}

body[data-signed-in="true"] .procurement-compose-panel {
  background: color-mix(in srgb, var(--app-accent) 3%, var(--app-surface));
}

body[data-signed-in="true"] .procurement-suppliers-panel {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

body[data-signed-in="true"] .procurement-selectors {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr);
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--app-line) 88%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-surface-muted) 48%, var(--app-surface));
}

body[data-signed-in="true"] .procurement-selectors label {
  display: grid;
  gap: 7px;
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .procurement-selectors select,
body[data-signed-in="true"] .procurement-product-row input[type="number"] {
  min-height: 42px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface);
  color: var(--app-ink);
  font: inherit;
}

body[data-signed-in="true"] .procurement-selectors select { padding: 0 11px; }

body[data-signed-in="true"] .procurement-draft-hint {
  min-height: 18px;
  margin: 11px 0 9px;
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 650;
}

body[data-signed-in="true"] .procurement-product-list,
body[data-signed-in="true"] .procurement-suppliers-list,
body[data-signed-in="true"] .procurement-categories-list,
body[data-signed-in="true"] .procurement-catalog-list,
body[data-signed-in="true"] .procurement-orders-list {
  display: grid;
  gap: 8px;
}

body[data-signed-in="true"] .procurement-product-list {
  max-height: 338px;
  overflow: auto;
  padding: 2px 4px 2px 0;
}

body[data-signed-in="true"] .procurement-product-row,
body[data-signed-in="true"] .procurement-supplier-row,
body[data-signed-in="true"] .procurement-category-row,
body[data-signed-in="true"] .procurement-catalog-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--app-line) 88%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--app-surface-muted) 62%, var(--app-surface));
}

body[data-signed-in="true"] .procurement-product-row {
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 11px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

body[data-signed-in="true"] .procurement-product-row.is-selected {
  border-color: color-mix(in srgb, var(--app-accent) 40%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent) 7%, var(--app-surface));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--app-accent) 8%, transparent);
}

body[data-signed-in="true"] .procurement-product-select {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

body[data-signed-in="true"] .procurement-product-select > input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

body[data-signed-in="true"] .procurement-product-check {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--app-line) 90%, var(--app-ink-soft));
  border-radius: 5px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .procurement-product-select > input:checked + .procurement-product-check {
  border-color: var(--app-accent);
  background: var(--app-accent);
}

body[data-signed-in="true"] .procurement-product-select > input:checked + .procurement-product-check::after {
  width: 8px;
  height: 4px;
  margin-top: -2px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: "";
  transform: rotate(-45deg);
}

body[data-signed-in="true"] .procurement-product-select > input:focus-visible + .procurement-product-check {
  outline: 3px solid color-mix(in srgb, var(--app-accent) 25%, transparent);
  outline-offset: 2px;
}

body[data-signed-in="true"] .procurement-product-info,
body[data-signed-in="true"] .procurement-supplier-content,
body[data-signed-in="true"] .procurement-catalog-row > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-signed-in="true"] :is(.procurement-product-row, .procurement-supplier-row, .procurement-catalog-row) strong,
body[data-signed-in="true"] .procurement-category-row strong {
  overflow: hidden;
  color: var(--app-ink);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] :is(.procurement-product-row, .procurement-supplier-row, .procurement-catalog-row) small,
body[data-signed-in="true"] .procurement-category-row small {
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
}

body[data-signed-in="true"] .procurement-quantity-control {
  display: grid;
  grid-template-columns: 72px auto;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

body[data-signed-in="true"] .procurement-quantity-control input {
  width: 72px;
  min-height: 36px;
  padding: 0 9px;
  text-align: right;
}

body[data-signed-in="true"] .procurement-quantity-control small {
  min-width: 48px;
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 800;
}

body[data-signed-in="true"] .procurement-compose-actions {
  min-height: 52px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"] .procurement-compose-actions .form-status {
  margin: 0;
  font-size: 12px;
}

body[data-signed-in="true"] .procurement-row-actions,
body[data-signed-in="true"] .procurement-category-row > span:last-child,
body[data-signed-in="true"] .procurement-catalog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 0 auto;
}

body[data-signed-in="true"] .procurement-supplier-row {
  min-height: 74px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
}

body[data-signed-in="true"] .procurement-supplier-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

body[data-signed-in="true"] .procurement-supplier-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .procurement-channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

body[data-signed-in="true"] .procurement-channel-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-surface);
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

body[data-signed-in="true"] .procurement-channel-chip.whatsapp.is-preferred {
  border-color: color-mix(in srgb, #16a36a 40%, var(--app-line));
  background: color-mix(in srgb, #16a36a 10%, var(--app-surface));
  color: #08714a;
}

body[data-signed-in="true"] .procurement-channel-chip.email.is-preferred {
  border-color: color-mix(in srgb, #2676d8 40%, var(--app-line));
  background: color-mix(in srgb, #2676d8 10%, var(--app-surface));
  color: #1e5fb1;
}

body[data-signed-in="true"] .procurement-empty {
  min-height: 58px;
  display: grid;
  place-items: center start;
  margin: 0;
  padding: 13px;
  border: 1px dashed color-mix(in srgb, var(--app-line) 95%, transparent);
  border-radius: 6px;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"] .procurement-catalog-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr);
  gap: 16px;
  margin-top: 14px;
}

body[data-signed-in="true"] .procurement-catalog-grid > div + div {
  padding-left: 16px;
  border-left: 1px solid var(--app-line);
}

body[data-signed-in="true"] .procurement-catalog-grid h5 {
  margin: 0 0 9px;
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .procurement-category-row span:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-signed-in="true"] .procurement-order-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--app-line);
  border-left: 3px solid color-mix(in srgb, var(--app-accent) 60%, var(--app-line));
  border-radius: 7px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .procurement-order-main { align-items: flex-start; }

body[data-signed-in="true"] .procurement-order-main h5 {
  margin: 3px 0 4px;
  color: var(--app-ink);
  font-size: 15px;
}

body[data-signed-in="true"] .procurement-order-main p {
  max-width: 780px;
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.55;
}

body[data-signed-in="true"] .procurement-order-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

body[data-signed-in="true"] .procurement-order-details span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--app-line) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-surface-muted) 72%, var(--app-surface));
  color: var(--app-ink-soft);
  font-size: 10px;
  font-weight: 800;
}

body[data-signed-in="true"] .procurement-order-meta {
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .procurement-order-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--app-line) 90%, transparent);
}

body[data-signed-in="true"] .procurement-order-action-hint {
  margin-right: auto;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 650;
}

body[data-signed-in="true"] .procurement-review-button {
  min-height: 38px;
}

/* The dialog owns viewport sizing; its shell must not exceed it. */
body[data-signed-in="true"] .procurement-order-dialog {
  width: min(900px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
}

body[data-signed-in="true"] .procurement-order-dialog .contact-shell {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 32px);
}

body[data-signed-in="true"] .procurement-order-dialog :is(.detail-header > div, .procurement-order-editor-section, .procurement-order-editor-list, .procurement-order-note) {
  min-width: 0;
}

body[data-signed-in="true"] .procurement-order-dialog .detail-header h2 {
  overflow-wrap: anywhere;
}

body[data-signed-in="true"] .procurement-order-dialog :is(button, input[type="number"]) {
  min-height: 44px;
}

body[data-signed-in="true"] .procurement-order-dialog :is(button, input[type="number"], textarea):focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

body[data-signed-in="true"] .procurement-order-dialog .procurement-order-editor-select :is(strong, small) {
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-signed-in="true"] .procurement-order-dialog .procurement-order-editor-select small,
body[data-signed-in="true"] .procurement-order-dialog .procurement-order-editor-head > span {
  font-size: 12px;
}

body[data-signed-in="true"] .procurement-order-dialog-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 15px;
  overflow-y: auto;
  padding: 18px 24px 22px;
}

body[data-signed-in="true"] .procurement-order-supplier-context {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--app-line) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-accent) 4%, var(--app-surface));
}

body[data-signed-in="true"] .procurement-order-supplier-context > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-signed-in="true"] .procurement-order-supplier-context span:not(.procurement-row-avatar):not(.procurement-channel-chip) {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .procurement-order-supplier-context strong {
  overflow: hidden;
  color: var(--app-ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .procurement-order-supplier-context small {
  overflow: hidden;
  color: var(--app-ink-soft);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .procurement-order-editor-section {
  display: grid;
  gap: 10px;
}

body[data-signed-in="true"] .procurement-order-editor-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

body[data-signed-in="true"] .procurement-order-editor-head .eyebrow {
  margin: 0 0 3px;
}

body[data-signed-in="true"] .procurement-order-editor-head h3 {
  margin: 0;
  color: var(--app-ink);
  font-size: 15px;
}

body[data-signed-in="true"] .procurement-order-editor-head > span {
  color: var(--app-muted);
  font-size: 11px;
  text-align: right;
}

body[data-signed-in="true"] .procurement-order-editor-list {
  display: grid;
  gap: 7px;
}

body[data-signed-in="true"] .procurement-order-editor-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--app-line) 88%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-surface-muted) 62%, var(--app-surface));
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

body[data-signed-in="true"] .procurement-order-editor-row.is-selected {
  border-color: color-mix(in srgb, var(--app-accent) 44%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent) 7%, var(--app-surface));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--app-accent) 8%, transparent);
}

body[data-signed-in="true"] .procurement-order-editor-select {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

body[data-signed-in="true"] .procurement-order-editor-select > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

body[data-signed-in="true"] .procurement-order-editor-select > input:checked + .procurement-product-check {
  border-color: var(--app-accent);
  background: var(--app-accent);
}

body[data-signed-in="true"] .procurement-order-editor-select > input:checked + .procurement-product-check::after {
  width: 8px;
  height: 4px;
  margin-top: -2px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: "";
  transform: rotate(-45deg);
}

body[data-signed-in="true"] .procurement-order-editor-select > input:focus-visible + .procurement-product-check {
  outline: 3px solid color-mix(in srgb, var(--app-accent) 25%, transparent);
  outline-offset: 2px;
}

body[data-signed-in="true"] .procurement-order-editor-select > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-signed-in="true"] .procurement-order-editor-select strong {
  overflow: hidden;
  color: var(--app-ink);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .procurement-order-editor-select small {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .procurement-order-editor-quantity {
  display: grid;
  grid-template-columns: 78px auto;
  align-items: center;
  gap: 7px;
}

body[data-signed-in="true"] .procurement-order-editor-quantity input {
  width: 78px;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface);
  color: var(--app-ink);
  font: inherit;
  text-align: right;
}

body[data-signed-in="true"] .procurement-order-editor-quantity small {
  min-width: 52px;
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 800;
}

body[data-signed-in="true"] .procurement-order-note {
  display: grid;
  gap: 7px;
}

body[data-signed-in="true"] .procurement-order-note > span {
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .procurement-order-note span small {
  margin-left: 5px;
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

body[data-signed-in="true"] .procurement-order-note textarea {
  min-height: 82px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-surface);
  color: var(--app-ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

body[data-signed-in="true"] .procurement-order-dialog-body > .form-status {
  min-height: 18px;
  margin: -4px 0 0;
  font-size: 12px;
}

body[data-signed-in="true"] .procurement-order-dialog-actions {
  align-items: center;
  background: var(--app-surface);
  border-color: var(--app-line);
}

body[data-signed-in="true"] .procurement-order-dialog .topbar-icon {
  color: var(--app-ink);
}

body[data-signed-in="true"] .procurement-order-send-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

body[data-signed-in="true"] .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

body[data-signed-in="true"] .procurement-entity-dialog .contact-shell {
  max-width: 720px;
}

body[data-signed-in="true"] .procurement-entity-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

body[data-signed-in="true"] .procurement-entity-fields[hidden] { display: none; }

body[data-signed-in="true"][data-interface-mode="dark"] :is(.procurement-summary article, .procurement-compose-panel, .procurement-suppliers-panel, .procurement-catalog-panel, .procurement-orders-panel, .procurement-order-row, .procurement-order-editor-row, .procurement-order-supplier-context) {
  box-shadow: none;
}

body[data-signed-in="true"][data-interface-mode="dark"] .procurement-plan-gate,
body[data-signed-in="true"][data-interface-mode="dark"] .procurement-product-row,
body[data-signed-in="true"][data-interface-mode="dark"] .procurement-supplier-row,
body[data-signed-in="true"][data-interface-mode="dark"] .procurement-category-row,
body[data-signed-in="true"][data-interface-mode="dark"] .procurement-catalog-row {
  background: color-mix(in srgb, var(--app-surface-muted) 80%, var(--app-surface));
}

body[data-signed-in="true"][data-interface-mode="dark"] :is(.procurement-order-editor-row, .procurement-order-supplier-context) {
  background: color-mix(in srgb, var(--app-surface-muted) 80%, var(--app-surface));
}

body[data-signed-in="true"][data-interface-mode="dark"] .procurement-channel-chip.whatsapp.is-preferred {
  color: #72e6ae;
}

body[data-signed-in="true"][data-interface-mode="dark"] .procurement-channel-chip.email.is-preferred {
  color: #8ec5ff;
}

@media (max-width: 900px) {
  body[data-signed-in="true"] .procurement-workspace { grid-template-columns: 1fr; }
  body[data-signed-in="true"] .procurement-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-signed-in="true"] .procurement-catalog-grid { grid-template-columns: 1fr; }
  body[data-signed-in="true"] .procurement-catalog-grid > div + div {
    padding: 16px 0 0;
    border-top: 1px solid var(--app-line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  body[data-signed-in="true"] .procurement-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"] .procurement-summary article {
    min-height: 108px;
    padding: 15px;
  }

  body[data-signed-in="true"] .procurement-summary-icon {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .procurement-page { gap: 14px; padding-bottom: 18px; }
  body[data-signed-in="true"] .procurement-head,
  body[data-signed-in="true"] .procurement-panel-head,
  body[data-signed-in="true"] .procurement-compose-actions,
  body[data-signed-in="true"] .procurement-order-main,
  body[data-signed-in="true"] .procurement-order-actions {
    align-items: stretch;
    flex-direction: column;
  }
  body[data-signed-in="true"] .procurement-head h3 { font-size: 22px; }
  body[data-signed-in="true"] .procurement-plan-gate { grid-template-columns: auto 1fr; }
  body[data-signed-in="true"] .procurement-plan-gate .primary-button { grid-column: 1 / -1; }
  body[data-signed-in="true"] .procurement-selectors,
  body[data-signed-in="true"] .procurement-entity-fields { grid-template-columns: 1fr; }
  body[data-signed-in="true"] .procurement-catalog-actions { width: 100%; }
  body[data-signed-in="true"] .procurement-catalog-actions > button { flex: 1 1 0; }
  body[data-signed-in="true"] .procurement-order-action-hint { margin-right: 0; }
  body[data-signed-in="true"] .procurement-order-actions > .primary-button { width: 100%; }
  body[data-signed-in="true"] .procurement-summary { grid-template-columns: 1fr; }
  body[data-signed-in="true"] .procurement-product-row { grid-template-columns: 1fr; }
  body[data-signed-in="true"] .procurement-quantity-control {
    justify-content: flex-end;
    margin-left: 30px;
  }
  body[data-signed-in="true"] .procurement-supplier-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  body[data-signed-in="true"] .procurement-supplier-row .procurement-row-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
  body[data-signed-in="true"] .procurement-order-dialog {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
  body[data-signed-in="true"] .procurement-order-dialog .contact-shell {
    max-height: calc(100dvh - 20px);
  }
  body[data-signed-in="true"] .procurement-order-dialog-body { padding: 16px; }
  body[data-signed-in="true"] .procurement-order-supplier-context {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  body[data-signed-in="true"] .procurement-order-supplier-context .procurement-channel-list { grid-column: 1 / -1; }
  body[data-signed-in="true"] .procurement-order-editor-head {
    align-items: flex-start;
    flex-direction: column;
  }
  body[data-signed-in="true"] .procurement-order-editor-head > span { text-align: left; }
  body[data-signed-in="true"] .procurement-order-editor-row { grid-template-columns: 1fr; }
  body[data-signed-in="true"] .procurement-order-editor-quantity {
    justify-content: flex-end;
    margin-left: 30px;
  }
  body[data-signed-in="true"] .procurement-order-dialog-actions,
  body[data-signed-in="true"] .procurement-order-send-actions {
    width: 100%;
  }
  body[data-signed-in="true"] .procurement-order-send-actions { margin-left: 0; }
  body[data-signed-in="true"] .procurement-order-dialog-actions > .secondary-button,
  body[data-signed-in="true"] .procurement-order-send-actions > button { flex: 1 1 140px; }
}

/* Review inbox: keep all controls together above the work area on desktop. */
@media (min-width: 721px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-workbench {
    display: block;
    max-width: none;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail {
    position: sticky;
    top: 76px;
    z-index: 4;
    min-height: 0;
    margin: 0 0 16px;
    padding: 16px 18px 14px;
    border: 1px solid var(--app-line);
    border-radius: 8px;
    background: var(--app-surface);
    box-shadow: 0 8px 22px rgba(29, 40, 82, 0.06);
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail-head .eyebrow,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-health-panel {
    display: none;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail-head h3 {
    font-size: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-toolbar .search-wrap {
    flex: 1 1 220px;
    min-width: 200px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .status-filter {
    display: flex;
    align-items: center;
    flex: 1 1 330px;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 280px;
    padding-top: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .status-filter button {
    justify-content: center;
    width: auto;
    min-height: 38px;
    padding: 7px 11px;
    text-align: center;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-selects {
    display: grid;
    grid-template-columns: repeat(4, minmax(126px, 1fr));
    flex: 3 1 540px;
    gap: 9px;
    min-width: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-selects label {
    min-width: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .segmented {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .segmented button {
    min-width: 36px;
    min-height: 38px;
    padding: 7px 10px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] #sortSelect {
    flex: 0 1 190px;
    min-width: 170px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 100%;
    flex-direction: row;
    gap: 12px;
    padding-top: 10px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-summary {
    margin: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-clear {
    width: auto;
    min-width: 148px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-inbox {
    padding: 4px 0 36px;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-selects {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    flex-basis: 390px;
  }
}

/* Keep the safe automation action compact instead of leaving an empty insight panel. */
@media (min-width: 721px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .insights {
    display: block;
    min-height: 0;
    margin: 0 0 16px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-actions {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 0;
    gap: 20px;
    padding: 15px 18px;
    background: color-mix(in srgb, var(--app-accent) 7%, var(--app-surface));
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-copy {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-copy > div {
    min-width: 0;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-copy strong {
    font-size: 14px;
    line-height: 1.35;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-copy small {
    max-width: 660px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .quick-actions {
    display: flex;
    flex: 0 0 auto;
    width: auto;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-auto-button {
    width: auto;
    white-space: nowrap;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-bulk-callout {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-auto-button {
    width: 100%;
  }
}

/* Shared heading system: every workspace starts with the same clear hierarchy. */
body[data-signed-in="true"] .page-heading {
  position: relative;
  align-items: center;
  gap: 24px;
  margin: 0 0 26px;
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"] .page-heading > div:first-child,
body[data-signed-in="true"] :is(
  .client-dashboard-hero,
  .superadmin-hero,
  .settings-hero,
  .company-kpi-head,
  .workflow-task-panel-head,
  .profile-head,
  .google-guide-head,
  .procurement-head,
  .procurement-panel-head,
  .backoffice-head,
  .review-inbox-head,
  .activity-head,
  .company-portfolio-head,
  .launch-readiness-head,
  .platform-runtime-head,
  .platform-delivery-head,
  .platform-legal-head,
  .platform-operations-head,
  .platform-support-head,
  .panel-title
) > div:first-child {
  position: relative;
  min-width: 0;
  padding-left: 14px;
}

body[data-signed-in="true"] .page-heading > div:first-child::before,
body[data-signed-in="true"] :is(
  .client-dashboard-hero,
  .superadmin-hero,
  .settings-hero,
  .company-kpi-head,
  .workflow-task-panel-head,
  .profile-head,
  .google-guide-head,
  .procurement-head,
  .procurement-panel-head,
  .backoffice-head,
  .review-inbox-head,
  .activity-head,
  .company-portfolio-head,
  .launch-readiness-head,
  .platform-runtime-head,
  .platform-delivery-head,
  .platform-legal-head,
  .platform-operations-head,
  .platform-support-head,
  .panel-title
) > div:first-child::before {
  position: absolute;
  top: 4px;
  bottom: 3px;
  left: 0;
  width: 4px;
  border-radius: 3px;
  background: var(--app-accent);
  content: "";
}

body[data-signed-in="true"] :is(.page-heading, .client-dashboard-hero, .superadmin-hero, .settings-hero, .company-kpi-head, .workflow-task-panel-head, .profile-head, .google-guide-head, .procurement-head, .procurement-panel-head, .backoffice-head, .review-inbox-head, .activity-head, .company-portfolio-head, .launch-readiness-head, .platform-runtime-head, .platform-delivery-head, .platform-legal-head, .platform-operations-head, .platform-support-head, .panel-title) .eyebrow {
  margin: 0 0 5px;
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-signed-in="true"] .page-heading h2 {
  margin: 0;
  color: var(--app-ink);
  font-size: clamp(26px, 2.1vw, 32px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: 0;
}

body[data-signed-in="true"] :is(.client-dashboard-hero, .superadmin-hero, .settings-hero, .company-kpi-head, .workflow-task-panel-head, .profile-head, .google-guide-head, .procurement-head, .backoffice-head, .review-inbox-head, .activity-head, .company-portfolio-head, .launch-readiness-head, .platform-runtime-head, .platform-delivery-head, .platform-legal-head, .platform-operations-head, .platform-support-head) h3 {
  margin: 0;
  color: var(--app-ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0;
}

body[data-signed-in="true"] :is(.procurement-panel-head, .panel-title) h4,
body[data-signed-in="true"] .panel-title strong {
  margin: 0;
  color: var(--app-ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}

body[data-signed-in="true"] :is(.client-dashboard-hero, .superadmin-hero, .settings-hero, .company-kpi-head, .workflow-task-panel-head, .profile-head, .google-guide-head, .procurement-head, .procurement-panel-head, .backoffice-head, .review-inbox-head, .activity-head, .company-portfolio-head, .launch-readiness-head, .platform-runtime-head, .platform-delivery-head, .platform-legal-head, .platform-operations-head, .platform-support-head, .panel-title) :is(p:not(.eyebrow), small, span:not(.status-pill)) {
  color: var(--app-ink-soft);
}

@media (max-width: 720px) {
  body[data-signed-in="true"] .page-heading {
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px 0 16px;
  }

  body[data-signed-in="true"] .page-heading h2 {
    font-size: 25px;
  }

  body[data-signed-in="true"] :is(.client-dashboard-hero, .superadmin-hero, .settings-hero, .company-kpi-head, .workflow-task-panel-head, .profile-head, .google-guide-head, .procurement-head, .backoffice-head, .review-inbox-head, .activity-head, .company-portfolio-head, .launch-readiness-head, .platform-runtime-head, .platform-delivery-head, .platform-legal-head, .platform-operations-head, .platform-support-head) h3 {
    font-size: 18px;
  }
}

/* Final dashboard metric actions override earlier compact metric presets. */
body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-card {
  min-height: 168px;
  padding-bottom: 46px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card-action {
  position: absolute;
  right: 18px;
  bottom: 10px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 28px;
  padding: 7px 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--app-line) 86%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--app-accent);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card-action::before {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  margin: 0;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card-action:hover {
  border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line));
  color: var(--app-accent-strong);
  transform: translateX(2px);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-pending .metric-card-action {
  color: var(--app-danger);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-pending .metric-card-action:hover {
  border-color: color-mix(in srgb, var(--app-danger) 46%, var(--app-line));
  color: var(--app-danger);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--app-accent) 32%, transparent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-card {
    min-height: 160px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-card-action {
    right: 15px;
    left: 15px;
  }
}

/* Reservation activation is an add-on workflow: company request first, Kora approval second. */
body[data-signed-in="true"] .reservations-page {
  width: min(1180px, 100%);
  display: grid;
  gap: 16px;
  margin: 18px 0 28px;
}

body[data-signed-in="true"] .reservations-head,
body[data-signed-in="true"] .reservation-panel-head,
body[data-signed-in="true"] .platform-reservation-requests-head,
body[data-signed-in="true"] .reservation-request-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

body[data-signed-in="true"] .reservations-head {
  padding: 4px 2px;
}

body[data-signed-in="true"] .reservations-head h3 {
  margin: 2px 0 0;
  font-size: 25px;
  line-height: 1.13;
}

body[data-signed-in="true"] .reservations-head p:not(.eyebrow),
body[data-signed-in="true"] .reservation-panel-head p:not(.eyebrow),
body[data-signed-in="true"] .platform-reservation-requests-head p:not(.eyebrow) {
  margin: 6px 0 0;
  color: var(--app-ink-soft);
  max-width: 720px;
}

body[data-signed-in="true"] .reservations-head > .status-pill,
body[data-signed-in="true"] .reservation-panel-head > .status-pill,
body[data-signed-in="true"] .platform-reservation-requests-head > .status-pill {
  flex: 0 0 auto;
}

body[data-signed-in="true"] .reservation-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body[data-signed-in="true"] .reservation-mode-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  min-height: 172px;
  padding: 18px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body[data-signed-in="true"] .reservation-mode-card:hover {
  border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line));
}

body[data-signed-in="true"] .reservation-mode-card.is-selected {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 14%, transparent);
  background: color-mix(in srgb, var(--app-accent) 4%, var(--app-surface));
}

body[data-signed-in="true"] .reservation-mode-card.is-disabled {
  cursor: default;
  opacity: 0.8;
}

body[data-signed-in="true"] .reservation-mode-card input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

body[data-signed-in="true"] .reservation-mode-card:focus-within {
  outline: 3px solid color-mix(in srgb, var(--app-accent) 30%, transparent);
  outline-offset: 2px;
}

body[data-signed-in="true"] .reservation-mode-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--app-accent) 20%, var(--app-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-accent) 8%, var(--app-surface));
  color: var(--app-accent);
}

body[data-signed-in="true"] .reservation-mode-icon::before {
  width: 18px;
  height: 18px;
}

body[data-signed-in="true"] .reservation-mode-copy {
  display: grid;
  align-content: start;
  gap: 4px;
}

body[data-signed-in="true"] .reservation-mode-copy strong {
  color: var(--app-ink);
  font-size: 17px;
}

body[data-signed-in="true"] .reservation-mode-copy span,
body[data-signed-in="true"] .reservation-mode-card li {
  color: var(--app-ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"] .reservation-mode-card ul {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding: 10px 0 0 20px;
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"] .reservation-request-panel,
body[data-signed-in="true"] .reservation-quote-panel,
body[data-signed-in="true"] .reservation-flow-panel,
body[data-signed-in="true"] .platform-reservation-requests {
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .reservation-request-panel,
body[data-signed-in="true"] .reservation-quote-panel,
body[data-signed-in="true"] .reservation-flow-panel {
  padding: 18px;
}

body[data-signed-in="true"] .reservation-panel-head h4,
body[data-signed-in="true"] .reservation-flow-panel h4,
body[data-signed-in="true"] .platform-reservation-requests-head h4 {
  margin: 2px 0 0;
  color: var(--app-ink);
  font-size: 18px;
}

body[data-signed-in="true"] .reservation-request-state {
  flex: 0 0 auto;
  align-self: center;
  padding: 5px 9px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 800;
}

body[data-signed-in="true"] .reservation-request-state.is-pending {
  border-color: color-mix(in srgb, #d98200 42%, var(--app-line));
  color: #a15c00;
  background: color-mix(in srgb, #f59e0b 10%, var(--app-surface));
}

body[data-signed-in="true"] .reservation-request-state.is-active {
  border-color: color-mix(in srgb, #0b9565 40%, var(--app-line));
  color: #087d56;
  background: color-mix(in srgb, #10b981 10%, var(--app-surface));
}

body[data-signed-in="true"] .reservation-request-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(170px, 0.75fr) minmax(160px, 0.7fr);
  gap: 14px;
  margin-top: 18px;
}

body[data-signed-in="true"] .reservation-request-fields label,
body[data-signed-in="true"] .reservation-activation-fields label {
  display: grid;
  gap: 7px;
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 750;
}

body[data-signed-in="true"] .reservation-request-fields label > span,
body[data-signed-in="true"] .reservation-activation-fields label > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

body[data-signed-in="true"] .reservation-request-fields small,
body[data-signed-in="true"] .reservation-activation-fields small {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 650;
}

body[data-signed-in="true"] .reservation-request-fields input,
body[data-signed-in="true"] .reservation-request-fields textarea,
body[data-signed-in="true"] .reservation-activation-fields input,
body[data-signed-in="true"] .reservation-activation-fields textarea,
body[data-signed-in="true"] .reservation-activation-fields select {
  min-height: 42px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface);
  color: var(--app-ink);
  font: inherit;
}

body[data-signed-in="true"] .reservation-request-fields textarea,
body[data-signed-in="true"] .reservation-activation-fields textarea {
  min-height: 88px;
  padding: 10px 12px;
  resize: vertical;
}

body[data-signed-in="true"] .reservation-notes-field {
  grid-column: 1 / -1;
}

body[data-signed-in="true"] .reservation-request-actions {
  align-items: center;
  min-height: 52px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"] .reservation-request-actions .form-status {
  margin: 0;
  max-width: 630px;
  color: var(--app-muted);
  font-size: 12px;
}

body[data-signed-in="true"] .reservation-quote-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, max-content)) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 17px;
}

body[data-signed-in="true"] .reservation-price {
  display: grid;
  gap: 3px;
  min-width: 152px;
  padding-right: 18px;
  border-right: 1px solid var(--app-line);
}

body[data-signed-in="true"] .reservation-price strong {
  color: var(--app-ink);
  font-size: 22px;
  line-height: 1;
}

body[data-signed-in="true"] .reservation-price span {
  color: var(--app-muted);
  font-size: 11px;
}

body[data-signed-in="true"] .reservation-price-pending {
  grid-column: span 2;
  min-width: 220px;
}

body[data-signed-in="true"] .reservation-price-pending strong {
  color: var(--app-accent-strong);
  font-size: 17px;
}

body[data-signed-in="true"] .reservation-quote-copy {
  min-width: 0;
}

body[data-signed-in="true"] .reservation-quote-copy p,
body[data-signed-in="true"] .reservation-decision-note {
  margin: 0;
  color: var(--app-ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"] .reservation-decision-note {
  margin-top: 6px;
  color: var(--app-ink);
}

body[data-signed-in="true"] .reservation-quote-copy small {
  display: block;
  margin-top: 7px;
  color: var(--app-muted);
  font-size: 11px;
}

body[data-signed-in="true"] .reservation-flow-panel {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(0, 2fr);
  align-items: center;
  gap: 22px;
  background: color-mix(in srgb, var(--app-accent) 3%, var(--app-surface));
}

body[data-signed-in="true"] .reservation-mode-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body[data-signed-in="true"] .reservation-mode-preview article {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

body[data-signed-in="true"] .reservation-mode-preview article > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: var(--app-accent);
}

body[data-signed-in="true"] .reservation-mode-preview article > span::before {
  width: 16px;
  height: 16px;
}

body[data-signed-in="true"] .reservation-mode-preview strong {
  display: block;
  color: var(--app-ink);
  font-size: 13px;
}

body[data-signed-in="true"] .reservation-mode-preview p {
  margin: 4px 0 0;
  color: var(--app-ink-soft);
  font-size: 11px;
  line-height: 1.45;
}

body[data-signed-in="true"] .platform-reservation-requests {
  margin: 18px 0;
  overflow: hidden;
}

body[data-signed-in="true"] .platform-reservation-requests-head {
  padding: 17px 18px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"] .platform-reservation-request-list {
  display: grid;
}

body[data-signed-in="true"] .platform-reservation-request,
body[data-signed-in="true"] .reservation-request-empty {
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"] .platform-reservation-request:last-child {
  border-bottom: 0;
}

body[data-signed-in="true"] .platform-reservation-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

body[data-signed-in="true"] .platform-reservation-request-main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
}

body[data-signed-in="true"] .platform-reservation-request-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-accent) 9%, var(--app-surface));
  color: var(--app-accent);
}

body[data-signed-in="true"] .platform-reservation-request-icon::before {
  width: 17px;
  height: 17px;
}

body[data-signed-in="true"] .platform-reservation-request-main > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body[data-signed-in="true"] .platform-reservation-request-main strong {
  color: var(--app-ink);
  font-size: 14px;
}

body[data-signed-in="true"] .platform-reservation-request-main span,
body[data-signed-in="true"] .platform-reservation-request-main small,
body[data-signed-in="true"] .reservation-request-empty {
  overflow: hidden;
  color: var(--app-ink-soft);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .platform-reservation-request-main small {
  color: var(--app-muted);
  font-size: 11px;
}

body[data-signed-in="true"] .platform-reservation-request-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
}

body[data-signed-in="true"] .reservation-activation-dialog {
  width: min(760px, calc(100vw - 32px));
}

body[data-signed-in="true"] .reservation-activation-form {
  display: grid;
  gap: 18px;
}

body[data-signed-in="true"] .reservation-activation-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-accent) 3%, var(--app-surface));
}

body[data-signed-in="true"] .reservation-activation-context > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-signed-in="true"] .reservation-context-label {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .reservation-activation-context strong,
body[data-signed-in="true"] .reservation-activation-context small {
  overflow: hidden;
  color: var(--app-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-signed-in="true"] .reservation-activation-context small {
  color: var(--app-muted);
  font-size: 11px;
}

body[data-signed-in="true"] .reservation-activation-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body[data-signed-in="true"] .reservation-activation-note {
  grid-column: 1 / -1;
}

body[data-signed-in="true"] .reservation-activation-form .form-status {
  min-height: 18px;
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
}

body[data-signed-in="true"][data-interface-mode="dark"] :is(.reservation-mode-card, .reservation-request-panel, .reservation-quote-panel, .reservation-flow-panel, .platform-reservation-requests, .reservation-activation-context) {
  box-shadow: none;
}

@media (max-width: 760px) {
  body[data-signed-in="true"] .reservation-flow-panel {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .reservation-mode-preview {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 720px) {
  body[data-signed-in="true"] .restaurant-wide-card .restaurant-card-heading {
    flex-wrap: wrap;
  }

  body[data-signed-in="true"] .restaurant-wide-card .restaurant-card-heading > div {
    min-width: 180px;
  }

  body[data-signed-in="true"] .restaurant-wide-card .restaurant-floor-zoom,
  body[data-signed-in="true"] .restaurant-wide-card .restaurant-floor-view-toggle {
    margin-left: 0;
  }

  body[data-signed-in="true"] .reservations-head,
  body[data-signed-in="true"] .reservation-panel-head,
  body[data-signed-in="true"] .platform-reservation-requests-head,
  body[data-signed-in="true"] .reservation-request-actions,
  body[data-signed-in="true"] .platform-reservation-request {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-signed-in="true"] .reservation-mode-grid,
  body[data-signed-in="true"] .reservation-request-fields,
  body[data-signed-in="true"] .reservation-activation-context,
  body[data-signed-in="true"] .reservation-activation-fields {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .reservation-quote-summary {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-signed-in="true"] .reservation-price,
  body[data-signed-in="true"] .reservation-price-pending {
    grid-column: auto;
    min-width: 0;
    padding: 0 0 11px;
    border-right: 0;
    border-bottom: 1px solid var(--app-line);
  }

  body[data-signed-in="true"] .reservation-request-actions .primary-button,
  body[data-signed-in="true"] .platform-reservation-request-actions .secondary-button {
    width: 100%;
  }

  body[data-signed-in="true"] .platform-reservation-request-actions {
    width: 100%;
    justify-content: stretch;
  }
}

/* Reservations: leave reputation metrics out and focus the page on activation. */
body[data-signed-in="true"][data-app-view="client"][data-client-page="reservations"] :is(.page-heading, .saas-strip, #roleNotice, #billingNotice, .client-report-shortcut) {
  display: none !important;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reservations"] .reservations-page {
  width: min(1320px, 100%);
  gap: 20px;
  margin: 0 auto;
  padding: 18px 0 46px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reservations"] .reservations-head {
  position: relative;
  min-height: 78px;
  padding: 6px 0 17px 18px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reservations"] .reservations-head::before {
  position: absolute;
  top: 8px;
  bottom: 18px;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--app-accent);
  content: "";
}

body[data-signed-in="true"] .reservations-head-copy {
  min-width: 0;
}

body[data-signed-in="true"] .reservations-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
  padding-left: 18px;
  border-left: 1px solid var(--app-line);
}

body[data-signed-in="true"] .reservations-head h3 {
  font-size: 28px;
  line-height: 1.08;
}

body[data-signed-in="true"] .reservations-head p:not(.eyebrow) {
  max-width: 700px;
  margin-top: 8px;
  font-size: 13px;
}

body[data-signed-in="true"] .reservation-mode-grid {
  gap: 18px;
}

body[data-signed-in="true"] .reservation-mode-card {
  min-height: 186px;
  padding: 20px;
  border-color: color-mix(in srgb, var(--app-line) 88%, var(--app-accent));
  box-shadow: 0 10px 26px rgba(31, 41, 55, 0.05);
}

body[data-signed-in="true"] .reservation-mode-card.is-selected {
  border-top: 3px solid var(--app-accent);
  padding-top: 18px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--app-accent) 10%, transparent);
}

body[data-signed-in="true"] .reservation-mode-icon {
  width: 44px;
  height: 44px;
}

body[data-signed-in="true"] .reservation-mode-icon::before {
  width: 20px;
  height: 20px;
}

body[data-signed-in="true"] .reservation-mode-copy strong {
  font-size: 18px;
}

body[data-signed-in="true"] .reservation-mode-card ul {
  gap: 5px;
  margin-top: 5px;
  padding-top: 12px;
}

body[data-signed-in="true"] .reservation-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.65fr);
  gap: 20px;
  align-items: stretch;
}

body[data-signed-in="true"] .reservation-request-panel,
body[data-signed-in="true"] .reservation-quote-panel,
body[data-signed-in="true"] .reservation-flow-panel {
  padding: 20px;
  border-color: color-mix(in srgb, var(--app-line) 90%, var(--app-accent));
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.055);
}

body[data-signed-in="true"] .reservation-request-panel {
  border-top: 3px solid var(--app-accent);
}

body[data-signed-in="true"] .reservation-quote-panel {
  display: flex;
  flex-direction: column;
  border-top: 3px solid #0c8c68;
  background: color-mix(in srgb, #0c8c68 3%, var(--app-surface));
}

body[data-signed-in="true"] .reservation-panel-head {
  min-height: 54px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"] .reservation-panel-head h4,
body[data-signed-in="true"] .reservation-flow-panel h4 {
  font-size: 18px;
  line-height: 1.22;
}

body[data-signed-in="true"] .reservation-request-fields {
  gap: 14px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--app-line) 90%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-surface-muted) 70%, var(--app-surface));
}

body[data-signed-in="true"] .reservation-request-fields label {
  gap: 8px;
  font-size: 11px;
}

body[data-signed-in="true"] .reservation-request-fields input,
body[data-signed-in="true"] .reservation-request-fields textarea {
  min-height: 44px;
  border-radius: 7px;
  background: var(--app-surface);
  font-weight: 650;
}

body[data-signed-in="true"] .reservation-request-fields textarea {
  min-height: 96px;
}

body[data-signed-in="true"] .reservation-request-actions {
  min-height: 58px;
  margin-top: 16px;
  padding-top: 16px;
}

body[data-signed-in="true"] .reservation-request-actions .primary-button {
  min-width: 222px;
  min-height: 42px;
}

body[data-signed-in="true"] .reservation-quote-summary {
  grid-template-columns: 1fr;
  gap: 14px;
  align-content: start;
  margin-top: 17px;
}

body[data-signed-in="true"] .reservation-price,
body[data-signed-in="true"] .reservation-price-pending {
  grid-column: auto;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, #0c8c68 22%, var(--app-line));
  border-radius: 8px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .reservation-price {
  border-right: 1px solid color-mix(in srgb, #0c8c68 22%, var(--app-line));
}

body[data-signed-in="true"] .reservation-price strong {
  font-size: 25px;
}

body[data-signed-in="true"] .reservation-price-pending strong {
  font-size: 18px;
}

body[data-signed-in="true"] .reservation-quote-copy {
  padding: 2px 2px 0;
}

body[data-signed-in="true"] .reservation-flow-panel {
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.9fr);
  gap: 24px;
  background: color-mix(in srgb, var(--app-accent) 3%, var(--app-surface));
}

@media (max-width: 1100px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reservations"] .reservations-page {
    width: min(1180px, 100%);
  }

  body[data-signed-in="true"] .reservation-workspace {
    grid-template-columns: minmax(0, 1.3fr) minmax(288px, 0.7fr);
    gap: 16px;
  }
}

@media (max-width: 900px) {
  body[data-signed-in="true"] .reservation-workspace {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .reservation-quote-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"] .reservation-quote-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reservations"] .reservations-page {
    gap: 16px;
    padding: 10px 0 28px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="reservations"] .reservations-head {
    min-height: 0;
    padding: 4px 0 14px 14px;
  }

  body[data-signed-in="true"] .reservations-head::before {
    top: 5px;
    bottom: 16px;
  }

  body[data-signed-in="true"] .reservations-head-actions {
    justify-content: flex-start;
    min-height: 0;
    padding: 2px 0 0;
    border-left: 0;
  }

  body[data-signed-in="true"] .reservations-head h3 {
    font-size: 23px;
  }

  body[data-signed-in="true"] .reservation-mode-grid,
  body[data-signed-in="true"] .reservation-request-fields,
  body[data-signed-in="true"] .reservation-quote-summary {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .reservation-flow-panel {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-signed-in="true"] :is(.reservation-request-panel, .reservation-quote-panel, .reservation-flow-panel) {
    padding: 16px;
  }

  body[data-signed-in="true"] .reservation-request-actions .primary-button {
    width: 100%;
  }
}

/* Procurement: clearer operational hierarchy across the ordering workspace. */
body[data-signed-in="true"][data-app-view="client"][data-client-page="orders"] .procurement-page {
  width: min(1320px, 100%);
  gap: 20px;
  padding: 18px 0 46px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="orders"] .procurement-head {
  position: relative;
  min-height: 78px;
  padding: 6px 0 17px 18px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="orders"] .procurement-head::before {
  position: absolute;
  top: 8px;
  bottom: 18px;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--app-accent);
  content: "";
}

body[data-signed-in="true"] .procurement-head-copy {
  min-width: 0;
}

body[data-signed-in="true"] .procurement-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
  padding-left: 18px;
  border-left: 1px solid var(--app-line);
}

body[data-signed-in="true"] .procurement-head h3 {
  font-size: 28px;
  line-height: 1.08;
}

body[data-signed-in="true"] .procurement-head p:not(.eyebrow) {
  max-width: 690px;
  margin-top: 8px;
  font-size: 13px;
}

body[data-signed-in="true"] .procurement-workspace {
  grid-template-columns: minmax(0, 1.7fr) minmax(328px, 0.7fr);
  gap: 20px;
}

body[data-signed-in="true"] .procurement-summary {
  gap: 16px;
}

body[data-signed-in="true"] .procurement-summary article {
  min-height: 118px;
  gap: 15px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--app-line) 88%, var(--app-accent));
  box-shadow: 0 10px 26px rgba(31, 41, 55, 0.055);
}

body[data-signed-in="true"] .procurement-summary-icon {
  width: 42px;
  height: 42px;
}

body[data-signed-in="true"] .procurement-summary-icon::before {
  width: 19px;
  height: 19px;
}

body[data-signed-in="true"] .procurement-summary-card > div {
  gap: 6px;
}

body[data-signed-in="true"] .procurement-summary-card > div > strong {
  font-size: 30px;
}

body[data-signed-in="true"] :is(.procurement-compose-panel, .procurement-suppliers-panel, .procurement-catalog-panel, .procurement-orders-panel) {
  border-color: color-mix(in srgb, var(--app-line) 90%, var(--app-accent));
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.055);
}

body[data-signed-in="true"] .procurement-compose-panel {
  position: relative;
  padding: 20px;
  border-top: 3px solid var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 4%, var(--app-surface));
}

body[data-signed-in="true"] .procurement-suppliers-panel {
  padding: 20px;
  border-top: 3px solid #0c8c68;
}

body[data-signed-in="true"] :is(.procurement-catalog-panel, .procurement-orders-panel) {
  padding: 20px;
}

body[data-signed-in="true"] .procurement-panel-head {
  min-height: 54px;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 15px;
}

body[data-signed-in="true"] .procurement-panel-head > div:first-child {
  min-width: 0;
}

body[data-signed-in="true"] .procurement-panel-head h4 {
  font-size: 18px;
  line-height: 1.22;
}

body[data-signed-in="true"] .procurement-suppliers-panel .procurement-panel-head .secondary-button {
  min-height: 40px;
  padding-inline: 12px;
  white-space: nowrap;
}

body[data-signed-in="true"] .procurement-selectors {
  gap: 14px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-surface-muted) 72%, var(--app-surface));
}

body[data-signed-in="true"] .procurement-selectors label {
  gap: 8px;
  font-size: 10px;
}

body[data-signed-in="true"] .procurement-selectors select {
  min-height: 44px;
  padding-inline: 12px 34px;
  font-size: 13px;
  font-weight: 700;
}

body[data-signed-in="true"] .procurement-draft-hint {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin: 12px 0 10px;
  padding: 7px 10px;
  border-left: 3px solid color-mix(in srgb, var(--app-accent) 55%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent) 5%, transparent);
  color: var(--app-ink-soft);
  font-size: 12px;
}

body[data-signed-in="true"] .procurement-product-list {
  max-height: 360px;
  padding-right: 3px;
}

body[data-signed-in="true"] .procurement-product-row {
  min-height: 70px;
  padding: 11px 13px;
  border-radius: 8px;
}

body[data-signed-in="true"] .procurement-product-row:hover {
  border-color: color-mix(in srgb, var(--app-accent) 32%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent) 4%, var(--app-surface));
}

body[data-signed-in="true"] .procurement-product-select {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
}

body[data-signed-in="true"] .procurement-product-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

body[data-signed-in="true"] .procurement-quantity-control {
  grid-template-columns: 78px auto;
  gap: 9px;
}

body[data-signed-in="true"] .procurement-quantity-control input {
  width: 78px;
  min-height: 38px;
  padding-inline: 10px;
  border-radius: 7px;
  background: var(--app-surface);
  font-weight: 750;
}

body[data-signed-in="true"] .procurement-compose-actions {
  min-height: 58px;
  margin-top: 16px;
  padding-top: 16px;
}

body[data-signed-in="true"] .procurement-compose-actions .primary-button {
  min-width: 206px;
  min-height: 42px;
}

body[data-signed-in="true"] .procurement-compose-actions .primary-button:disabled {
  border-color: var(--app-line);
  background: var(--app-surface-muted);
  box-shadow: none;
  color: var(--app-muted);
  cursor: not-allowed;
  opacity: 1;
}

body[data-signed-in="true"] .procurement-supplier-row {
  min-height: 86px;
  gap: 11px;
  padding: 12px;
  border-radius: 8px;
}

body[data-signed-in="true"] .procurement-supplier-title {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 2px;
}

body[data-signed-in="true"] .procurement-row-actions .icon-action {
  width: 34px;
  height: 34px;
}

body[data-signed-in="true"] .procurement-channel-chip {
  min-height: 22px;
  padding-inline: 8px;
}

body[data-signed-in="true"] .procurement-catalog-grid {
  gap: 20px;
  margin-top: 16px;
}

body[data-signed-in="true"] .procurement-catalog-grid > div + div {
  padding-left: 20px;
}

body[data-signed-in="true"] .procurement-category-row,
body[data-signed-in="true"] .procurement-catalog-row {
  min-height: 64px;
  border-radius: 8px;
}

@media (max-width: 1100px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="orders"] .procurement-page {
    width: min(1180px, 100%);
  }

  body[data-signed-in="true"] .procurement-workspace {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
    gap: 16px;
  }

  body[data-signed-in="true"] .procurement-suppliers-panel .procurement-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-signed-in="true"] .procurement-suppliers-panel .procurement-panel-head .secondary-button {
    align-self: flex-start;
  }
}

@media (max-width: 900px) {
  body[data-signed-in="true"] .procurement-workspace {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .procurement-suppliers-panel .procurement-panel-head {
    align-items: flex-start;
    flex-direction: row;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="orders"] .procurement-page {
    gap: 16px;
    padding: 10px 0 28px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="orders"] .procurement-head {
    min-height: 0;
    padding: 4px 0 14px 14px;
  }

  body[data-signed-in="true"] .procurement-head::before {
    top: 5px;
    bottom: 16px;
  }

  body[data-signed-in="true"] .procurement-head-actions {
    justify-content: flex-start;
    min-height: 0;
    padding: 2px 0 0;
    border-left: 0;
  }

  body[data-signed-in="true"] .procurement-head h3 {
    font-size: 23px;
  }

  body[data-signed-in="true"] :is(.procurement-compose-panel, .procurement-suppliers-panel, .procurement-catalog-panel, .procurement-orders-panel) {
    padding: 16px;
  }

  body[data-signed-in="true"] .procurement-panel-head {
    min-height: 0;
  }

  body[data-signed-in="true"] .procurement-suppliers-panel .procurement-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-signed-in="true"] .procurement-suppliers-panel .procurement-panel-head .secondary-button,
  body[data-signed-in="true"] .procurement-compose-actions .primary-button {
    width: 100%;
  }

  body[data-signed-in="true"] .procurement-summary article {
    min-height: 104px;
  }

  body[data-signed-in="true"] .procurement-draft-hint {
    align-items: flex-start;
    line-height: 1.45;
  }
}

/* Settings: quieter guidance and selectable preferences with visible states. */
body[data-signed-in="true"] .response-mode-choice-grid {
  gap: 9px;
}

body[data-signed-in="true"] .response-mode-choice-grid .toggle-row,
body[data-signed-in="true"] .settings-notification-grid .toggle-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 58px;
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-ink);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

body[data-signed-in="true"] .response-mode-choice-grid .toggle-row input,
body[data-signed-in="true"] .settings-notification-grid .toggle-row input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--app-accent);
}

body[data-signed-in="true"] .response-mode-choice-grid .toggle-row span,
body[data-signed-in="true"] .settings-notification-grid .toggle-row span {
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

body[data-signed-in="true"] .response-mode-choice-grid .toggle-row:has(input:checked),
body[data-signed-in="true"] .settings-notification-grid .toggle-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent) 7%, var(--app-surface));
  box-shadow: inset 3px 0 0 var(--app-accent);
}

body[data-signed-in="true"] .response-mode-choice-grid .toggle-row:has(input:checked) span,
body[data-signed-in="true"] .settings-notification-grid .toggle-row:has(input:checked) span {
  color: var(--app-ink);
}

body[data-signed-in="true"] .response-mode-settings .label-row > span:first-child {
  color: var(--app-ink);
  font-size: 13px;
  font-weight: 800;
}

body[data-signed-in="true"] .response-mode-settings > p {
  margin: 10px 0 0;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.45;
}

body[data-signed-in="true"] .settings-help-card {
  border-color: color-mix(in srgb, var(--app-accent) 24%, var(--app-line));
  border-left: 3px solid var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 5%, var(--app-surface));
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.05);
}

body[data-signed-in="true"] .settings-help-card .settings-icon {
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

body[data-signed-in="true"] .settings-help-card strong {
  color: var(--app-ink);
}

body[data-signed-in="true"] .settings-help-card small,
body[data-signed-in="true"] .settings-help-card #helpTopicText {
  color: var(--app-ink-soft);
}

body[data-signed-in="true"] .settings-help-card .help-link-grid {
  gap: 8px;
}

body[data-signed-in="true"] .settings-help-card .help-link-grid button {
  min-height: 36px;
  padding: 8px 10px;
  border-color: var(--app-line);
  border-radius: 7px;
  background: var(--app-surface);
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 750;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

body[data-signed-in="true"] .settings-help-card .help-link-grid button:hover,
body[data-signed-in="true"] .settings-help-card .help-link-grid button.is-active {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: #ffffff;
}

body[data-signed-in="true"] .settings-help-card #helpTopicText {
  min-height: 40px;
  margin: 0;
  padding-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"] .settings-notifications-card {
  border-top: 3px solid color-mix(in srgb, var(--app-accent) 45%, var(--app-line));
}

body[data-signed-in="true"] .settings-notification-grid {
  grid-template-columns: minmax(230px, 1.2fr) repeat(3, minmax(165px, 1fr));
  gap: 12px;
}

body[data-signed-in="true"] .settings-notification-grid > label:first-child {
  display: grid;
  grid-template-rows: auto minmax(44px, 1fr);
  gap: 8px;
  min-height: 128px;
  padding: 13px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .settings-notification-grid > label:first-child > span {
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 750;
}

body[data-signed-in="true"] .settings-notification-grid > label:first-child select {
  height: auto;
  min-height: 44px;
  background: var(--app-surface);
}

@media (max-width: 900px) {
  body[data-signed-in="true"] .settings-notification-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .settings-help-card .help-link-grid {
    grid-template-columns: 1fr 1fr;
  }

  body[data-signed-in="true"] .settings-notification-grid {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .settings-notification-grid > label:first-child {
    min-height: 108px;
  }
}

/* Restaurant integration: a focused operating area that appears after activation. */
body[data-signed-in="true"] .restaurant-operations {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--app-line));
  border-top: 3px solid var(--app-accent);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: 0 14px 30px rgba(31, 41, 55, 0.06);
}

body[data-signed-in="true"] .restaurant-operations[hidden] {
  display: none !important;
}

body[data-signed-in="true"] .restaurant-operations-head,
body[data-signed-in="true"] .restaurant-content-head,
body[data-signed-in="true"] .restaurant-card-heading,
body[data-signed-in="true"] .restaurant-form-actions,
body[data-signed-in="true"] .restaurant-report-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body[data-signed-in="true"] .restaurant-operations-head {
  min-height: 62px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"] .restaurant-operations-head h4 {
  margin: 3px 0 0;
  color: var(--app-ink);
  font-size: 21px;
  line-height: 1.18;
}

body[data-signed-in="true"] .restaurant-operations-head p:not(.eyebrow),
body[data-signed-in="true"] .restaurant-content-head p:not(.eyebrow),
body[data-signed-in="true"] .restaurant-card-heading small {
  margin: 5px 0 0;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.45;
}

body[data-signed-in="true"] .restaurant-operations-shell {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}

body[data-signed-in="true"] .restaurant-operations-nav {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .restaurant-operations-nav button {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--app-ink-soft);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-align: left;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

body[data-signed-in="true"] .restaurant-operations-nav button::before {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  color: var(--app-accent);
}

body[data-signed-in="true"] .restaurant-operations-nav button:hover {
  border-color: color-mix(in srgb, var(--app-accent) 24%, var(--app-line));
  background: var(--app-surface);
  color: var(--app-ink);
}

body[data-signed-in="true"] .restaurant-operations-nav button.is-active {
  border-color: color-mix(in srgb, var(--app-accent) 32%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface));
  box-shadow: inset 3px 0 0 var(--app-accent);
  color: var(--app-accent);
}

body[data-signed-in="true"] .restaurant-operations-content {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

body[data-signed-in="true"] .restaurant-content-head {
  min-height: 56px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid var(--app-line);
}

body[data-signed-in="true"] .restaurant-content-head h5 {
  margin: 3px 0 0;
  color: var(--app-ink);
  font-size: 19px;
  line-height: 1.2;
}

body[data-signed-in="true"] .restaurant-content-count {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 26%, var(--app-line));
  border-radius: 999px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
  font-size: 11px;
  font-weight: 800;
}

body[data-signed-in="true"] .restaurant-feedback {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-surface-muted);
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 650;
}

body[data-signed-in="true"] .restaurant-feedback.is-success {
  border-color: color-mix(in srgb, #0c8c68 32%, var(--app-line));
  background: color-mix(in srgb, #0c8c68 8%, var(--app-surface));
  color: var(--app-success);
}

body[data-signed-in="true"] .restaurant-feedback.is-error {
  border-color: color-mix(in srgb, #d92d20 30%, var(--app-line));
  background: color-mix(in srgb, #d92d20 6%, var(--app-surface));
  color: #b42318;
}

body[data-signed-in="true"] .restaurant-section-grid {
  display: grid;
  grid-template-columns: minmax(290px, 0.84fr) minmax(0, 1.36fr);
  gap: 16px;
  align-items: start;
}

body[data-signed-in="true"] .restaurant-editor-card,
body[data-signed-in="true"] .restaurant-list-card,
body[data-signed-in="true"] .restaurant-settings-card,
body[data-signed-in="true"] .restaurant-wide-card {
  display: grid;
  gap: 15px;
  padding: 16px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .restaurant-editor-card,
body[data-signed-in="true"] .restaurant-settings-card {
  border-top: 3px solid color-mix(in srgb, var(--app-accent) 72%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent) 2%, var(--app-surface));
}

body[data-signed-in="true"] .restaurant-card-heading {
  justify-content: flex-start;
  min-width: 0;
}

body[data-signed-in="true"] .restaurant-card-heading > div {
  min-width: 0;
}

body[data-signed-in="true"] .restaurant-card-heading strong {
  display: block;
  color: var(--app-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

body[data-signed-in="true"] .restaurant-card-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--app-accent) 18%, var(--app-line));
  border-radius: 7px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

body[data-signed-in="true"] .restaurant-card-icon::before {
  width: 17px;
  height: 17px;
}

body[data-signed-in="true"] .restaurant-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-signed-in="true"] .restaurant-form-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body[data-signed-in="true"] .restaurant-form-grid label > span {
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 800;
}

body[data-signed-in="true"] .restaurant-form-grid small {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 650;
}

body[data-signed-in="true"] .restaurant-form-grid :is(input, select, textarea) {
  width: 100%;
  min-height: 40px;
  border-radius: 6px;
  background: var(--app-surface);
  color: var(--app-ink);
  font-size: 13px;
}

body[data-signed-in="true"] .restaurant-form-grid textarea {
  min-height: 76px;
  padding-top: 10px;
  resize: vertical;
}

body[data-signed-in="true"] .restaurant-form-span {
  grid-column: 1 / -1;
}

body[data-signed-in="true"] .marketing-workspace {
  display: grid;
  gap: 16px;
}

body[data-signed-in="true"] .marketing-generate-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"] .marketing-generate-actions .form-status {
  margin: 0;
}

body[data-signed-in="true"] .marketing-preview-body {
  display: grid;
  gap: 14px;
}

body[data-signed-in="true"] .marketing-preview-body img {
  width: 100%;
  max-width: 420px;
  border-radius: 8px;
  border: 1px solid var(--app-line);
}

body[data-signed-in="true"] .marketing-export-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

body[data-signed-in="true"] .marketing-export-actions > span {
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 700;
}

body[data-signed-in="true"] .marketing-export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-signed-in="true"] .restaurant-checkbox-row,
body[data-signed-in="true"] .restaurant-availability {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .restaurant-checkbox-row input,
body[data-signed-in="true"] .restaurant-availability input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--app-accent);
}

body[data-signed-in="true"] .restaurant-checkbox-row span,
body[data-signed-in="true"] .restaurant-availability span {
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 700;
}

body[data-signed-in="true"] .restaurant-form-actions {
  align-items: center;
  min-height: 42px;
  padding-top: 13px;
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"] .restaurant-form-actions > span {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

body[data-signed-in="true"] .restaurant-form-actions .primary-button {
  min-width: 154px;
  min-height: 40px;
}

body[data-signed-in="true"] .restaurant-booking-list,
body[data-signed-in="true"] .restaurant-menu-list,
body[data-signed-in="true"] .restaurant-visitor-list,
body[data-signed-in="true"] .restaurant-comment-list {
  display: grid;
  gap: 9px;
}

body[data-signed-in="true"] .restaurant-booking-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 156px;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 11px;
  border: 1px solid var(--app-line);
  border-left: 3px solid var(--app-accent);
  border-radius: 7px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .restaurant-booking-no_show,
body[data-signed-in="true"] .restaurant-booking-cancelled {
  border-left-color: #d92d20;
  background: color-mix(in srgb, #d92d20 4%, var(--app-surface));
}

body[data-signed-in="true"] .restaurant-booking-completed {
  border-left-color: #0c8c68;
}

body[data-signed-in="true"] .restaurant-booking-time {
  display: grid;
  gap: 3px;
}

body[data-signed-in="true"] .restaurant-booking-time strong {
  color: var(--app-ink);
  font-size: 17px;
  line-height: 1;
}

body[data-signed-in="true"] .restaurant-booking-time span,
body[data-signed-in="true"] .restaurant-booking-main small,
body[data-signed-in="true"] .restaurant-booking-main p {
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
}

body[data-signed-in="true"] .restaurant-booking-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body[data-signed-in="true"] .restaurant-booking-main > div:last-child {
  min-width: 0;
}

body[data-signed-in="true"] .restaurant-booking-main strong,
body[data-signed-in="true"] .restaurant-visitor-row strong,
body[data-signed-in="true"] .restaurant-menu-row strong,
body[data-signed-in="true"] .restaurant-comment-row strong,
body[data-signed-in="true"] .restaurant-no-show-row strong {
  display: block;
  color: var(--app-ink);
  font-size: 13px;
  font-weight: 800;
}

body[data-signed-in="true"] .restaurant-booking-main p,
body[data-signed-in="true"] .restaurant-visitor-row p,
body[data-signed-in="true"] .restaurant-comment-row p {
  margin: 4px 0 0;
}

body[data-signed-in="true"] .restaurant-avatar {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, #0c8c68 11%, var(--app-surface));
  color: var(--app-success);
  font-size: 11px;
  font-weight: 850;
}

body[data-signed-in="true"] .restaurant-booking-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

body[data-signed-in="true"] .restaurant-booking-controls select {
  width: min(116px, 100%);
  min-height: 36px;
  padding: 0 28px 0 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
}

body[data-signed-in="true"] .restaurant-table-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-signed-in="true"] .restaurant-table-card {
  position: relative;
  display: grid;
  gap: 9px;
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--app-line);
  border-top: 3px solid #0c8c68;
  border-radius: 7px;
  background: var(--app-surface-muted);
  cursor: pointer;
}

body[data-signed-in="true"] .restaurant-table-card.restaurant-table-reserved { border-top-color: #e69a18; }
body[data-signed-in="true"] .restaurant-table-card.restaurant-table-occupied { border-top-color: var(--app-accent); }
body[data-signed-in="true"] .restaurant-table-card.restaurant-table-unavailable { border-top-color: #98a2b3; }

body[data-signed-in="true"] .restaurant-table-card span,
body[data-signed-in="true"] .restaurant-table-card small {
  display: block;
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 700;
}

body[data-signed-in="true"] .restaurant-table-card strong {
  display: block;
  margin: 4px 0;
  color: var(--app-ink);
  font-size: 15px;
}

body[data-signed-in="true"] .restaurant-table-card select {
  width: 100%;
  min-height: 34px;
  padding: 0 26px 0 8px;
  border-radius: 6px;
  background: var(--app-surface);
  font-size: 11px;
  font-weight: 700;
}

body[data-signed-in="true"] .restaurant-table-card .icon-action {
  position: absolute;
  top: 10px;
  right: 10px;
}

body[data-signed-in="true"] .restaurant-table-shape-swatch {
  justify-self: start;
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--app-accent) 55%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent) 12%, transparent);
}

body[data-signed-in="true"] .restaurant-table-shape-swatch[data-shape="round"] {
  border-radius: 50%;
}

body[data-signed-in="true"] .restaurant-table-shape-swatch[data-shape="square"] {
  border-radius: 4px;
}

body[data-signed-in="true"] .restaurant-table-shape-swatch[data-shape="rectangular"] {
  width: 30px;
  height: 16px;
  border-radius: 4px;
}

body[data-signed-in="true"] .restaurant-floor-forms {
  display: grid;
  gap: 16px;
}

body[data-signed-in="true"] .restaurant-floor-plant + .restaurant-floor-plant {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"] .restaurant-floor-plant-title {
  margin: 0 0 10px;
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .restaurant-fixture-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

body[data-signed-in="true"] .restaurant-fixture-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 32px 6px 12px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-surface-muted);
  font-size: 11px;
}

body[data-signed-in="true"] .restaurant-fixture-pill strong {
  color: var(--app-ink);
  font-weight: 800;
}

body[data-signed-in="true"] .restaurant-fixture-pill small {
  color: var(--app-muted);
  font-weight: 600;
}

body[data-signed-in="true"] .restaurant-fixture-pill .icon-action {
  position: absolute;
  top: 50%;
  right: 3px;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  font-size: 13px;
  transform: translateY(-50%);
}

body[data-signed-in="true"] .restaurant-fixture-pill[data-fixture-type="wall"] {
  border-color: color-mix(in srgb, #667085 40%, var(--app-line));
  background: color-mix(in srgb, #667085 10%, var(--app-surface-muted));
}

body[data-signed-in="true"] .restaurant-fixture-pill[data-fixture-type="bathroom"] {
  border-color: color-mix(in srgb, #0ea5e9 40%, var(--app-line));
  background: color-mix(in srgb, #0ea5e9 10%, var(--app-surface-muted));
}

body[data-signed-in="true"] .restaurant-fixture-pill[data-fixture-type="bar"] {
  border-color: color-mix(in srgb, #b45309 40%, var(--app-line));
  background: color-mix(in srgb, #b45309 10%, var(--app-surface-muted));
}

body[data-signed-in="true"] .restaurant-fixture-pill[data-fixture-type="kitchen"] {
  border-color: color-mix(in srgb, var(--app-danger) 40%, var(--app-line));
  background: color-mix(in srgb, var(--app-danger) 10%, var(--app-surface-muted));
}

body[data-signed-in="true"] .restaurant-no-shows-summary,
body[data-signed-in="true"] .restaurant-report-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body[data-signed-in="true"] .restaurant-no-shows-summary article,
body[data-signed-in="true"] .restaurant-report-metrics article {
  min-height: 106px;
  padding: 14px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .restaurant-no-shows-summary span,
body[data-signed-in="true"] .restaurant-no-shows-summary small,
body[data-signed-in="true"] .restaurant-report-metrics small,
body[data-signed-in="true"] .restaurant-report-metrics p {
  display: block;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

body[data-signed-in="true"] .restaurant-no-shows-summary strong,
body[data-signed-in="true"] .restaurant-report-metrics strong {
  display: block;
  margin: 7px 0 4px;
  color: var(--app-ink);
  font-size: 25px;
  line-height: 1;
}

body[data-signed-in="true"] .restaurant-no-show-row,
body[data-signed-in="true"] .restaurant-menu-row,
body[data-signed-in="true"] .restaurant-visitor-row,
body[data-signed-in="true"] .restaurant-comment-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 11px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .restaurant-no-show-row > div,
body[data-signed-in="true"] .restaurant-menu-row > div,
body[data-signed-in="true"] .restaurant-visitor-row > div:nth-child(2),
body[data-signed-in="true"] .restaurant-comment-row > div {
  min-width: 0;
  flex: 1;
}

body[data-signed-in="true"] .restaurant-no-show-row span,
body[data-signed-in="true"] .restaurant-no-show-row small,
body[data-signed-in="true"] .restaurant-menu-row small,
body[data-signed-in="true"] .restaurant-visitor-row small,
body[data-signed-in="true"] .restaurant-comment-row small {
  display: block;
  margin-top: 3px;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
}

body[data-signed-in="true"] .restaurant-no-show-row .secondary-button {
  flex: 0 0 auto;
  min-height: 36px;
  white-space: nowrap;
}

body[data-signed-in="true"] .restaurant-availability {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 8px;
}

body[data-signed-in="true"] .restaurant-menu-row .icon-action,
body[data-signed-in="true"] .restaurant-visitor-row .icon-action,
body[data-signed-in="true"] .restaurant-comment-row .icon-action {
  flex: 0 0 auto;
}

body[data-signed-in="true"] .restaurant-report-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-signed-in="true"] .restaurant-report-metrics article {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  min-height: 112px;
}

body[data-signed-in="true"] .restaurant-report-metrics article > span::before {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

body[data-signed-in="true"] .restaurant-report-metrics strong {
  margin-top: 4px;
}

body[data-signed-in="true"] .restaurant-report-metrics p {
  margin: 4px 0 0;
}

body[data-signed-in="true"] .restaurant-report-actions {
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--app-line);
}

body[data-signed-in="true"] .restaurant-report-actions strong,
body[data-signed-in="true"] .restaurant-report-actions span {
  display: block;
}

body[data-signed-in="true"] .restaurant-report-actions strong {
  color: var(--app-ink);
  font-size: 13px;
}

body[data-signed-in="true"] .restaurant-report-actions span {
  margin-top: 4px;
  color: var(--app-muted);
  font-size: 11px;
}

body[data-signed-in="true"] .restaurant-settings-card {
  width: min(740px, 100%);
}

body[data-signed-in="true"] .restaurant-empty-state {
  margin: 0;
  padding: 18px 12px;
  border: 1px dashed color-mix(in srgb, var(--app-line) 82%, var(--app-accent));
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-surface-muted) 70%, var(--app-surface));
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"][data-interface-mode="dark"] :is(.restaurant-operations, .restaurant-editor-card, .restaurant-list-card, .restaurant-settings-card, .restaurant-wide-card, .restaurant-no-shows-summary article, .restaurant-report-metrics article) {
  box-shadow: none;
}

@media (max-width: 1100px) {
  body[data-signed-in="true"] .restaurant-operations-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  body[data-signed-in="true"] .restaurant-section-grid {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .restaurant-booking-row {
    grid-template-columns: 94px minmax(0, 1fr) 142px;
  }

  body[data-signed-in="true"] .restaurant-table-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"] .restaurant-report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-signed-in="true"] .restaurant-operations {
    padding: 16px;
  }

  body[data-signed-in="true"] .restaurant-operations-shell {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .restaurant-operations-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-signed-in="true"] .restaurant-operations-nav button {
    justify-content: center;
    min-height: 52px;
    padding: 8px 7px;
    font-size: 11px;
    text-align: center;
  }

  body[data-signed-in="true"] .restaurant-operations-nav button::before {
    margin-right: 6px;
  }
}

@media (max-width: 620px) {
  body[data-signed-in="true"] .restaurant-operations-head,
  body[data-signed-in="true"] .restaurant-content-head,
  body[data-signed-in="true"] .restaurant-form-actions,
  body[data-signed-in="true"] .restaurant-report-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-signed-in="true"] .restaurant-operations-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-signed-in="true"] .restaurant-form-grid,
  body[data-signed-in="true"] .restaurant-no-shows-summary,
  body[data-signed-in="true"] .restaurant-report-metrics {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .restaurant-booking-row {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .restaurant-booking-time {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 8px;
  }

  body[data-signed-in="true"] .restaurant-booking-controls {
    justify-content: stretch;
  }

  body[data-signed-in="true"] .restaurant-booking-controls select {
    flex: 1;
    width: auto;
  }

  body[data-signed-in="true"] .restaurant-table-grid {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .restaurant-no-show-row,
  body[data-signed-in="true"] .restaurant-menu-row,
  body[data-signed-in="true"] .restaurant-visitor-row,
  body[data-signed-in="true"] .restaurant-comment-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  body[data-signed-in="true"] .restaurant-no-show-row .secondary-button,
  body[data-signed-in="true"] .restaurant-report-actions .secondary-button,
  body[data-signed-in="true"] .restaurant-form-actions .primary-button {
    width: 100%;
  }
}

/* Restaurant bookings: a practical day agenda for the service team. */
body[data-signed-in="true"] .restaurant-booking-page {
  display: grid;
  gap: 14px;
  min-width: 0;
}

body[data-signed-in="true"] .restaurant-booking-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, #0c8c68 24%, var(--app-line));
  border-left: 3px solid #0c8c68;
  border-radius: 8px;
  background: color-mix(in srgb, #0c8c68 7%, var(--app-surface));
}

body[data-signed-in="true"] .restaurant-booking-banner > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body[data-signed-in="true"] .restaurant-banner-icon,
body[data-signed-in="true"] .restaurant-limit-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, #0c8c68 14%, var(--app-surface));
  color: var(--app-success);
}

body[data-signed-in="true"] .restaurant-booking-banner p {
  max-width: 720px;
  margin: 0;
  color: var(--app-ink-soft);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

body[data-signed-in="true"] .restaurant-add-booking {
  flex: 0 0 auto;
  min-width: 156px;
  min-height: 42px;
  white-space: nowrap;
}

body[data-signed-in="true"] .restaurant-booking-composer {
  width: 100%;
  margin: 0;
  border-left: 3px solid var(--app-accent);
}

body[data-signed-in="true"] .restaurant-date-toolbar {
  display: grid;
  grid-template-columns: 42px minmax(148px, 0.85fr) minmax(205px, 1.4fr) 42px auto;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: 0 6px 16px rgba(31, 41, 55, 0.035);
}

body[data-signed-in="true"] .restaurant-date-toolbar > strong {
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 0 10px;
  color: var(--app-ink);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

body[data-signed-in="true"] .restaurant-date-arrow {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  color: var(--app-ink-soft);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

body[data-signed-in="true"] .restaurant-date-arrow:hover {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

body[data-signed-in="true"] .restaurant-date-input {
  position: relative;
  display: grid;
  min-width: 0;
}

body[data-signed-in="true"] .restaurant-date-input > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

body[data-signed-in="true"] .restaurant-date-input input {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface-muted);
  color: var(--app-ink);
  font-size: 12px;
  font-weight: 750;
}

body[data-signed-in="true"] .restaurant-date-input input::-webkit-calendar-picker-indicator {
  padding: 4px;
  border-radius: 4px;
  opacity: 0.65;
  filter: invert(19%) sepia(53%) saturate(3838%) hue-rotate(246deg) brightness(83%) contrast(101%);
}

body[data-signed-in="true"] .restaurant-date-input input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--app-accent-soft);
}

body[data-signed-in="true"] .restaurant-today-button {
  min-width: 82px;
  min-height: 42px;
  padding-inline: 14px;
  white-space: nowrap;
}

body[data-signed-in="true"] .restaurant-limit-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .restaurant-limit-bar > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body[data-signed-in="true"] .restaurant-limit-bar p {
  margin: 0;
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

body[data-signed-in="true"] .restaurant-limit-bar label {
  display: grid;
  gap: 4px;
}

body[data-signed-in="true"] .restaurant-limit-bar label > span {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body[data-signed-in="true"] .restaurant-limit-bar input {
  min-height: 36px;
  padding-inline: 9px;
  text-align: center;
}

body[data-signed-in="true"] .restaurant-limit-bar .secondary-button {
  min-height: 36px;
  white-space: nowrap;
}

body[data-signed-in="true"] .restaurant-agenda-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .restaurant-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

body[data-signed-in="true"] .restaurant-booking-filter {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 750;
}

body[data-signed-in="true"] .restaurant-booking-filter:hover {
  background: var(--app-surface-muted);
  color: var(--app-ink);
}

body[data-signed-in="true"] .restaurant-booking-filter.is-active {
  border-color: color-mix(in srgb, var(--app-accent) 32%, var(--app-line));
  background: var(--app-accent);
  color: #ffffff;
}

body[data-signed-in="true"] .restaurant-agenda-metrics {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--app-ink);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

body[data-signed-in="true"] .restaurant-agenda-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body[data-signed-in="true"] .restaurant-agenda-metrics span::before {
  color: var(--app-accent);
}

body[data-signed-in="true"] .restaurant-agenda-card {
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.045);
}

body[data-signed-in="true"] .restaurant-agenda-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .restaurant-agenda-card > header div {
  display: grid;
  gap: 3px;
}

body[data-signed-in="true"] .restaurant-agenda-card > header span,
body[data-signed-in="true"] .restaurant-agenda-card > header small {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 750;
}

body[data-signed-in="true"] .restaurant-agenda-card > header strong {
  color: var(--app-ink);
  font-size: 15px;
}

body[data-signed-in="true"] .restaurant-daily-booking-list {
  min-height: 230px;
  padding: 10px;
}

body[data-signed-in="true"] .restaurant-daily-booking-list .restaurant-booking-row {
  min-height: 92px;
  border-radius: 6px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .restaurant-agenda-empty {
  display: grid;
  min-height: 210px;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
}

body[data-signed-in="true"] .restaurant-agenda-empty > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

body[data-signed-in="true"] .restaurant-agenda-empty strong {
  color: var(--app-ink);
  font-size: 14px;
}

body[data-signed-in="true"] .restaurant-agenda-empty p {
  max-width: 410px;
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-signed-in="true"] .restaurant-agenda-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

body[data-signed-in="true"] .restaurant-agenda-footer > span {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 600;
}

body[data-signed-in="true"] .restaurant-agenda-footer .secondary-button {
  min-height: 38px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  body[data-signed-in="true"] .restaurant-booking-banner,
  body[data-signed-in="true"] .restaurant-agenda-filters,
  body[data-signed-in="true"] .restaurant-agenda-footer {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-signed-in="true"] .restaurant-add-booking,
  body[data-signed-in="true"] .restaurant-agenda-footer .secondary-button {
    width: 100%;
  }

  body[data-signed-in="true"] .restaurant-date-toolbar {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }

  body[data-signed-in="true"] .restaurant-date-toolbar > strong {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 34px;
  }

  body[data-signed-in="true"] .restaurant-date-input {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body[data-signed-in="true"] .restaurant-date-toolbar > .restaurant-date-arrow:first-child {
    grid-column: 1;
    grid-row: 3;
  }

  body[data-signed-in="true"] .restaurant-date-toolbar > .restaurant-date-arrow:nth-of-type(2) {
    grid-column: 3;
    grid-row: 3;
  }

  body[data-signed-in="true"] .restaurant-today-button {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
  }

  body[data-signed-in="true"] .restaurant-limit-bar {
    grid-template-columns: 1fr auto;
  }

  body[data-signed-in="true"] .restaurant-limit-bar > div {
    grid-column: 1 / -1;
  }

  body[data-signed-in="true"] .restaurant-agenda-metrics {
    justify-content: space-between;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--app-line);
  }
}

@media (max-width: 480px) {
  body[data-signed-in="true"] .restaurant-limit-bar {
    grid-template-columns: 1fr;
  }

  body[data-signed-in="true"] .restaurant-limit-bar .secondary-button {
    width: 100%;
  }

  body[data-signed-in="true"] .restaurant-agenda-card > header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media print {
  body[data-signed-in="true"] :is(.app-sidebar, .sidebar, .topbar, .top-bar, .site-header, .restaurant-operations-head, .restaurant-operations-nav, .restaurant-booking-banner, .restaurant-booking-composer, .restaurant-limit-bar, .restaurant-agenda-filters, .restaurant-agenda-footer, .primary-button, .secondary-button, .icon-action) {
    display: none !important;
  }

  body[data-signed-in="true"] .restaurant-operations,
  body[data-signed-in="true"] .restaurant-agenda-card {
    border: 0;
    box-shadow: none;
  }

  body[data-signed-in="true"] .restaurant-daily-booking-list {
    min-height: 0;
  }
}

/* Keep every desktop sidebar destination on one dependable text rhythm. */
@media (min-width: 621px) {
  body[data-signed-in="true"] .sidebar :is(.view-switch, .client-nav, .admin-section-nav, .platform-section-nav) {
    gap: 4px;
  }

  body[data-signed-in="true"] .sidebar :is(.view-switch, .client-nav, .admin-section-nav, .platform-section-nav) button {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 39px;
    margin: 0;
    padding: 0 10px;
    gap: 9px;
    font-family: var(--app-font);
    font-size: 13px !important;
    font-weight: 600 !important;
    font-synthesis: none;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-align: left;
    white-space: nowrap;
  }

  body[data-signed-in="true"] .sidebar :is(.view-switch, .client-nav, .admin-section-nav, .platform-section-nav) button::before {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
  }

  body[data-signed-in="true"] .sidebar .client-nav .nav-alert-badge {
    position: static;
    top: auto;
    right: auto;
    margin: 0 0 0 auto;
  }
}

/* Gestor and Empresa share one desktop navigation rail instead of resizing by view. */
@media (min-width: 721px) {
  body[data-signed-in="true"] .app-shell,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .app-shell,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .app-shell {
    grid-template-columns: 264px minmax(0, 1fr);
  }

  body[data-signed-in="true"] .sidebar,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .sidebar,
  body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .sidebar {
    gap: 16px;
    padding: 22px 14px 18px;
  }

  body[data-signed-in="true"] .sidebar :is(.client-nav, .admin-section-nav) {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
  }
}

/* No client page may compact the Gestor/Empresa switcher or navigation rows. */
@media (min-width: 621px) {
  body[data-signed-in="true"] .sidebar .view-switch {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 4px;
    padding: 3px;
    box-sizing: border-box;
  }

  body[data-signed-in="true"] .sidebar :is(.view-switch, .client-nav, .admin-section-nav) button {
    height: 39px;
    min-height: 39px;
    box-sizing: border-box;
  }
}

/*
  Type-weight consistency pass. The rest of this file uses a deliberate
  650/750/850 weight scale (see the eyebrow, heading and label rules above).
  A handful of selectors in styles.css never migrated off an off-scale 760
  and stayed there uncorrected. Realign them to the established 750 step so
  every bold/emphasis text on screen shares the same weight.
*/
body[data-signed-in="true"] :is(
  .notification-filter,
  .dashboard-head h3,
  .table-toolbar h3,
  .platform-grid strong,
  .metric-card strong,
  .platform-metric strong,
  .confidence-score strong,
  .company-profile-card strong,
  .system-service small
) {
  font-weight: 750;
}

body[data-signed-in="true"] :is(
  .company-profile-card span,
  .backoffice-section-title span,
  .invoice-summary span,
  .backoffice-side span,
  .client-table th
) {
  font-weight: 750 !important;
}

/*
  A zero count is good news, not a warning: "0 vencidas" or "0 para hoy"
  should not read as red/amber alarm text. app.js toggles .is-zero on the
  summary card once its count reaches zero; neutralize the alarm color here.
*/
body[data-signed-in="true"] .workflow-task-summary-card.overdue.is-zero strong,
body[data-signed-in="true"] .workflow-task-summary-card.today.is-zero strong {
  color: var(--app-ink);
}

/*
  Dashboard visual refresh: elevate the welcome hero from a plain text strip
  into a distinct branded panel, and give each metric card a colored top
  accent + the rating card its own icon color (previously it fell back to
  the default accent purple while the other three had dedicated colors).
*/
body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero {
  position: relative;
  overflow: hidden;
  align-items: center;
  min-height: 0;
  margin-bottom: 6px;
  padding: 24px 28px;
  border: 1px solid color-mix(in srgb, var(--app-line) 65%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--app-accent) 10%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--app-accent) 6%, var(--app-surface)) 0%, var(--app-surface) 60%);
  box-shadow: 0 12px 28px rgba(23, 32, 51, 0.055);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -50px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--app-accent) 18%, transparent) 0%, transparent 72%);
  pointer-events: none;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero .eyebrow {
  min-height: 22px;
  padding: 0 9px;
  background: color-mix(in srgb, var(--app-accent) 14%, var(--app-surface));
  color: var(--app-accent-strong);
  font-weight: 800;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero h3 {
  margin-top: 8px;
  font-size: 27px;
  font-weight: 850;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero {
  background:
    radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--app-accent) 20%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--app-accent) 14%, var(--app-surface)) 0%, var(--app-surface) 60%);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-card {
  border-top-width: 3px;
  border-top-style: solid;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-rating {
  border-top-color: #d97706;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-total {
  border-top-color: #087eaf;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-new {
  border-top-color: var(--app-success);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard .metric-pending {
  border-top-color: var(--app-danger);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-rating .metric-card-icon {
  border-color: rgba(217, 119, 6, 0.16);
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="dashboard"] .metric-rating .metric-card-icon {
  border-color: rgba(217, 119, 6, 0.28);
  background: rgba(217, 119, 6, 0.18);
  color: #fbbf24;
}

/*
  The unconditional hero declarations above (larger heading, centered items)
  are appended after the pre-existing mobile @media rules, so at equal
  specificity they would otherwise win at narrow widths too and wrap the
  bigger heading under the action buttons. Restore the compact mobile layout
  explicitly here, last in the cascade, so it wins at <=760px as intended.
*/
@media (max-width: 760px) {
  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 20px 20px 22px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero h3 {
    font-size: 21px;
  }

  body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .dashboard-hero-actions {
    width: 100%;
  }
}

/*
  Facturacion: the "Empresa / NIF-CIF / Email de factura" box and the fiscal
  address form were flat, borderless/grey and had no visual weight next to
  the rest of the refreshed UI. Give both a real card boundary: white
  surface, soft shadow, accent edge, taller inputs.
*/
body[data-signed-in="true"][data-app-view="admin"] .billing-account-fields {
  padding: 18px 20px 18px 22px;
  border-color: color-mix(in srgb, var(--app-line) 70%, transparent);
  border-left: 3px solid var(--app-accent);
  border-radius: 12px;
  background: var(--app-surface);
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.05);
}

body[data-signed-in="true"][data-app-view="admin"] .billing-account-fields input,
body[data-signed-in="true"][data-app-view="admin"] .billing-account-fields select {
  min-height: 44px;
  border-color: var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-muted);
  font-size: 14px;
  font-weight: 650;
}

body[data-signed-in="true"][data-app-view="admin"] .billing-address-form {
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--app-line) 70%, transparent);
  border-radius: 12px;
  background: var(--app-surface);
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.04);
}

body[data-signed-in="true"][data-app-view="admin"] .billing-address-form :is(input, textarea) {
  min-height: 44px;
  border-radius: 8px;
}

body[data-signed-in="true"][data-app-view="platform"] .portfolio-status-card.is-attention.is-zero strong {
  color: var(--app-ink);
}

/*
  Sedes y equipo: the capacity cards (Sedes/Usuarios/Automatizacion) and the
  team-load strip were flat grey boxes with no boundary against the page
  background. Elevate them to match the rest of the refreshed UI.
*/
body[data-signed-in="true"][data-app-view="admin"] .company-limit-grid article {
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--app-accent);
  border-radius: 10px;
  background: var(--app-surface);
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.045);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

body[data-signed-in="true"][data-app-view="admin"] .company-limit-grid article:hover {
  box-shadow: 0 13px 26px rgba(23, 32, 51, 0.075);
  transform: translateY(-1px);
}

body[data-signed-in="true"][data-app-view="admin"] .company-limit-grid article:nth-child(1) {
  border-top-color: #087553;
}

body[data-signed-in="true"][data-app-view="admin"] .company-limit-grid article:nth-child(2) {
  border-top-color: #0f67d8;
}

body[data-signed-in="true"][data-app-view="admin"] .company-workload-strip {
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--app-line) 75%, transparent);
  border-radius: 12px;
  background: var(--app-surface);
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.045);
}

body[data-signed-in="true"][data-app-view="admin"] .company-workload-metrics {
  margin: 0 -20px -18px;
}

body[data-signed-in="true"][data-app-view="admin"] .company-workload-metrics button {
  border-right-color: color-mix(in srgb, var(--app-line) 80%, transparent);
}

/*
  Between 621-980px both the desktop "one dependable text rhythm" rule
  (width: 100% on every sidebar nav button) and the tablet .client-nav
  horizontal-scroll-strip rule (width: auto) are active at once. The
  desktop rule's :is(.view-switch, .client-nav, ...) selector has higher
  specificity, so .client-nav buttons were winning the wrong one: stretched
  to full viewport width, one per horizontal-scroll "page". Clicking a
  button then triggered the browser's native scroll-into-view on that
  oversized target, which read as the whole header jumping. Restore the
  compact, content-sized chip so the strip actually scrolls horizontally.
*/
@media (min-width: 621px) and (max-width: 980px) {
  body[data-signed-in="true"] .sidebar .client-nav button {
    width: auto;
    flex: 0 0 auto;
  }
}

/*
  Data-entry polish pass: the settings cards (Idioma, Apariencia,
  Notificaciones...) lost their shadow to the shared flat-card reset, same
  as the billing/KPI cards fixed earlier. Give inputs/selects a consistent,
  slightly taller baseline and a visible hover affordance everywhere,
  matching the focus ring that already exists.
*/
body[data-signed-in="true"] article.settings-card {
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.045);
}

body[data-signed-in="true"] .settings-card select {
  min-height: 42px;
}

body[data-signed-in="true"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--app-accent) 32%, var(--app-line));
}

body[data-signed-in="true"] :is(input, select, textarea):disabled {
  background: var(--app-surface-muted);
  color: var(--app-muted);
  cursor: not-allowed;
}

body[data-signed-in="true"][data-interface-mode="dark"] .settings-card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/*
  2D floor-plan canvas: a lightweight, DOM-based drag surface (no <canvas>,
  keeps the app's plain HTML/CSS stack) that sits alongside the structured
  list view via a Lista/Plano 2D toggle. Tables and fixtures are absolutely
  positioned tokens; dragging updates their x/y (0-100, see restaurantState
  tables/fixtures) via pointer events wired in app.js.
*/
body[data-signed-in="true"] .restaurant-floor-view-toggle {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .restaurant-floor-view-toggle button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--app-ink-soft);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

body[data-signed-in="true"] .restaurant-floor-view-toggle button.active {
  background: var(--app-surface);
  box-shadow: 0 1px 3px rgba(23, 32, 51, 0.14);
  color: var(--app-accent-strong);
}

body[data-signed-in="true"] .restaurant-floor-zoom {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 6px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-muted);
  color: var(--app-ink-soft);
  font-size: 11px;
  font-weight: 750;
}

body[data-signed-in="true"] .restaurant-floor-zoom button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface);
  color: var(--app-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

body[data-signed-in="true"] .restaurant-floor-zoom button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

body[data-signed-in="true"] .restaurant-floor-zoom span {
  min-width: 32px;
  text-align: center;
}

body[data-signed-in="true"] .restaurant-floor-canvas-wrap {
  overflow: auto;
  max-height: 440px;
  border: 1px dashed var(--app-line);
  border-radius: 10px;
}

body[data-signed-in="true"] .restaurant-floor-canvas {
  position: relative;
  min-height: 300px;
  transform-origin: 0 0;
  background-color: var(--app-surface-muted);
  background-image:
    linear-gradient(var(--app-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--app-line) 1px, transparent 1px);
  background-size: 24px 24px;
  transition: transform 120ms ease;
}

body[data-signed-in="true"] .restaurant-floor-token {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--app-ink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: 0 2px 6px rgba(23, 32, 51, 0.14);
  transition: box-shadow 120ms ease;
}

body[data-signed-in="true"] .restaurant-floor-token.is-dragging {
  z-index: 5;
  cursor: grabbing;
  box-shadow: 0 10px 22px rgba(23, 32, 51, 0.28);
}

body[data-signed-in="true"] .restaurant-floor-table-token:focus-visible {
  z-index: 5;
  outline: 3px solid var(--app-accent);
  outline-offset: 2px;
}

body[data-signed-in="true"] .restaurant-floor-table-token {
  width: 64px;
  height: 64px;
  border: 2px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
}

body[data-signed-in="true"] .restaurant-floor-table-token[data-shape="round"] {
  border-radius: 50%;
}

body[data-signed-in="true"] .restaurant-floor-table-token[data-shape="rectangular"] {
  width: 88px;
  height: 52px;
}

body[data-signed-in="true"] .restaurant-floor-table-token.restaurant-table-available { border-color: #0c8c68; }
body[data-signed-in="true"] .restaurant-floor-table-token.restaurant-table-reserved { border-color: #e69a18; }
body[data-signed-in="true"] .restaurant-floor-table-token.restaurant-table-occupied { border-color: var(--app-accent); }
body[data-signed-in="true"] .restaurant-floor-table-token.restaurant-table-unavailable { border-color: #98a2b3; }

body[data-signed-in="true"] .restaurant-floor-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-surface-muted);
}

body[data-signed-in="true"] .restaurant-floor-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 700;
}

body[data-signed-in="true"] .restaurant-floor-legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--app-ink-soft);
}

body[data-signed-in="true"] .restaurant-floor-legend-item[data-legend-status="available"] i { background: #0c8c68; }
body[data-signed-in="true"] .restaurant-floor-legend-item[data-legend-status="reserved"] i { background: #e69a18; }
body[data-signed-in="true"] .restaurant-floor-legend-item[data-legend-status="occupied"] i { background: var(--app-accent); }
body[data-signed-in="true"] .restaurant-floor-legend-item[data-legend-status="unavailable"] i { background: #98a2b3; }

body[data-signed-in="true"] .restaurant-floor-fixture-token {
  min-width: 60px;
  height: 40px;
  padding: 4px 10px;
  border-radius: 8px;
  color: #ffffff;
}

body[data-signed-in="true"] .restaurant-floor-fixture-token[data-fixture-type="wall"] {
  width: 96px;
  height: 14px;
  min-width: 0;
  border-radius: 3px;
  background: #667085;
  font-size: 0;
}

body[data-signed-in="true"] .restaurant-floor-fixture-token[data-fixture-type="bathroom"] { background: #0ea5e9; }
body[data-signed-in="true"] .restaurant-floor-fixture-token[data-fixture-type="bar"] { background: #b45309; }
body[data-signed-in="true"] .restaurant-floor-fixture-token[data-fixture-type="kitchen"] { background: var(--app-danger); }

@media (max-width: 760px) {
  body[data-signed-in="true"] .restaurant-floor-canvas {
    min-height: 240px;
  }

  body[data-signed-in="true"] .restaurant-floor-canvas-wrap {
    max-height: 320px;
  }
}

/*
  Step-by-step floor plan creation (plantas -> mesas/elementos). The forms
  column was as visually heavy as the plan itself; shrink it and give the
  plan more room, since the plan is the primary surface now.
*/
body[data-signed-in="true"] .restaurant-floor-grid {
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.58fr);
}

body[data-signed-in="true"] .restaurant-floor-forms-compact {
  gap: 12px;
}

body[data-signed-in="true"] .restaurant-editor-card-compact {
  gap: 10px;
  padding: 12px;
}

body[data-signed-in="true"] .restaurant-editor-card-compact .restaurant-card-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
}

body[data-signed-in="true"] .restaurant-editor-card-compact .restaurant-card-icon::before {
  width: 14px;
  height: 14px;
}

body[data-signed-in="true"] .restaurant-editor-card-compact .restaurant-card-heading strong {
  font-size: 12.5px;
}

body[data-signed-in="true"] .restaurant-editor-card-compact .restaurant-card-heading small {
  font-size: 11px;
}

body[data-signed-in="true"] .restaurant-editor-card-compact .restaurant-form-grid {
  gap: 8px;
}

body[data-signed-in="true"] .restaurant-editor-card-compact .restaurant-form-grid label > span {
  font-size: 10px;
}

body[data-signed-in="true"] .restaurant-editor-card-compact .restaurant-form-grid :is(input, select, textarea) {
  min-height: 34px;
  font-size: 12px;
}

body[data-signed-in="true"] .restaurant-editor-card-compact .restaurant-form-actions {
  gap: 8px;
}

body[data-signed-in="true"] .restaurant-editor-card-compact .restaurant-form-actions span {
  font-size: 10px;
}

body[data-signed-in="true"] .restaurant-editor-card-compact .primary-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

body[data-signed-in="true"] .restaurant-floor-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-signed-in="true"] .restaurant-floor-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 26px 5px 10px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-surface-muted);
  color: var(--app-ink);
  font-size: 11px;
  font-weight: 750;
}

body[data-signed-in="true"] .restaurant-floor-chip .icon-action {
  position: absolute;
  top: 50%;
  right: 3px;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  font-size: 11px;
  transform: translateY(-50%);
}

@media (max-width: 1100px) {
  body[data-signed-in="true"] .restaurant-floor-grid {
    grid-template-columns: 1fr;
  }
}

/*
  More dark-mode text-color gaps found via a contrast audit: the sidebar's
  own nav labels (Dashboard, Reseñas, Pedidos...), .eyebrow labels, and the
  "Salir" button (#logoutButton has an ID, which outranks the earlier
  .secondary-button dark-mode fix) all keep light-mode-only literal colors,
  reading as near-invisible dark-on-dark text.
*/
body[data-signed-in="true"][data-interface-mode="dark"] .client-nav button,
body[data-signed-in="true"][data-interface-mode="dark"] .admin-section-nav button,
body[data-signed-in="true"][data-interface-mode="dark"] .view-switch button {
  color: var(--app-ink-soft);
}

body[data-signed-in="true"][data-interface-mode="dark"] .eyebrow {
  color: var(--app-accent-strong);
}

body[data-signed-in="true"][data-interface-mode="dark"] .auth-actions #logoutButton {
  background: var(--app-surface);
  border-color: var(--app-line);
  color: var(--app-ink);
}

/*
  Biggest find of the audit: this whole family of panel components (the
  same list the earlier "flat card" reset targets for box-shadow) keeps a
  hardcoded white background in the base layer with no dark-mode variant.
  Their text already correctly switches to the light dark-mode ink color,
  so in dark mode every one of these read as near-white text on a white
  card: dashboard charts, keyword analysis, action plan, review queue,
  attention/KPI cards, platform/backoffice panels, etc.
*/
body[data-signed-in="true"][data-interface-mode="dark"] :is(
  .metric-card,
  .company-kpi-card,
  .rating-evolution-panel,
  .star-distribution-panel,
  .keyword-chart-panel,
  .action-plan-panel,
  .dashboard-review-queue,
  .pending-bar,
  .attention-card,
  .client-profile,
  .google-guide-panel,
  .support-center,
  .backoffice-panel,
  .platform-panel,
  .platform-metric,
  .platform-activity-card,
  .system-status-card,
  .platform-company-table,
  .platform-operations-card,
  .platform-support-card,
  .launch-readiness-card,
  .platform-runtime-card,
  .platform-delivery-card,
  .platform-legal-card,
  .detail-review-card,
  .ai-editor-panel,
  .ai-context-panel section
) {
  background: var(--app-surface);
  border-color: var(--app-line);
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .keyword-problems-list button {
  background: var(--app-surface-muted);
}

/*
  This dashboard-scoped rule (min-width: 1101px) tints the review queue
  card with light lavender at higher specificity than the family fix
  above, so it kept its light background in dark mode. Give it a dark
  equivalent tint instead of losing the accent treatment entirely.
*/
body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="dashboard"] .dashboard-review-queue {
  background: color-mix(in srgb, var(--app-accent) 14%, var(--app-surface));
}

body[data-signed-in="true"][data-interface-mode="dark"] .company-kpi-locations strong {
  color: var(--app-success);
}

body[data-signed-in="true"][data-interface-mode="dark"] .company-kpi-members strong {
  color: #5b9bf2;
}

/*
  A mobile-only (<=620px) rule re-forces white on this same panel family
  with !important (border/background/shadow), which beats the family fix
  above on specificity alone regardless of order. Match it with !important
  too, only place that's needed in this whole audit.
*/
@media (max-width: 620px) {
  body[data-signed-in="true"][data-interface-mode="dark"] :is(
    .summary-strip button,
    .operational-strip article,
    .metric-card,
    .platform-metric,
    .rating-evolution-panel,
    .star-distribution-panel,
    .review-card,
    .backoffice-panel,
    .platform-activity-card,
    .incidents-card
  ) {
    border-color: var(--app-line) !important;
    background: var(--app-surface) !important;
  }
}

body[data-signed-in="true"][data-interface-mode="dark"] .pending-tasks-head {
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-plan-item {
  border-color: var(--app-line);
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-plan-item.priority-urgent {
  border-color: color-mix(in srgb, #dc2626 40%, var(--app-line));
  background: color-mix(in srgb, #dc2626 12%, var(--app-surface));
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-plan-item.priority-high {
  border-color: color-mix(in srgb, #ea580c 40%, var(--app-line));
  background: color-mix(in srgb, #ea580c 12%, var(--app-surface));
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-plan-item.priority-opportunity {
  border-color: color-mix(in srgb, #2563eb 40%, var(--app-line));
  background: color-mix(in srgb, #2563eb 12%, var(--app-surface));
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-plan-item-head > span:last-child {
  color: var(--app-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-priority {
  background: color-mix(in srgb, var(--app-accent) 22%, var(--app-surface));
  color: var(--app-accent-strong);
}

body[data-signed-in="true"][data-interface-mode="dark"] .priority-urgent .action-priority {
  background: color-mix(in srgb, #dc2626 24%, var(--app-surface));
  color: #fca5a5;
}

body[data-signed-in="true"][data-interface-mode="dark"] .priority-high .action-priority {
  background: color-mix(in srgb, #ea580c 24%, var(--app-surface));
  color: #fdba74;
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-plan-item h4 {
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-plan-item p {
  color: var(--app-ink-soft);
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-plan-footer > span {
  color: var(--app-muted);
}

/*
  The only .user-chip strong dark-mode color fix was scoped inside
  @media (min-width: 1101px), so the topbar "Mi cuenta" account button
  read as dark-on-dark below that width. Make it unconditional.
*/
body[data-signed-in="true"][data-interface-mode="dark"] .user-chip strong {
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .user-chip small {
  color: var(--app-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .saas-strip div {
  border-color: var(--app-line);
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] .client-table td {
  color: var(--app-ink-soft);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"][data-interface-mode="dark"] .review-toolbar .search-wrap label,
body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"][data-interface-mode="dark"] .review-filter-selects label {
  color: var(--app-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .queue-item button,
body[data-signed-in="true"][data-interface-mode="dark"] .dashboard-review-queue .secondary-button {
  background: var(--app-surface);
}

/*
  .review-card - the single most-viewed component in the app (every review
  in the inbox) - has its own hardcoded white background in styles.css AND
  modern.css that beats the plain ".review-card { background: var(--panel) }"
  rule, so it never inherited the --panel dark redefinition above. Its own
  text already resolves correctly (color: var(--muted)/var(--ink) etc, all
  fixed via the legacy-token redefinition), so only the background and the
  one hardcoded heading color need a direct override.
*/
body[data-signed-in="true"][data-interface-mode="dark"] .review-card {
  background: var(--app-surface);
  border-color: var(--app-line);
}

body[data-signed-in="true"][data-interface-mode="dark"] .review-card h3,
body[data-signed-in="true"][data-interface-mode="dark"] .review-card h4 {
  color: var(--app-ink);
}

/*
  Two responsive .reply-panel rules hardcode background: #f8fafc (an
  "off-white tint" literal) - which happens to be the exact same hex as
  --app-ink's dark value, so the reply panel's own light text sat on an
  equally light background: "Respuesta sugerida" read as invisible.
*/
body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"][data-interface-mode="dark"] .reply-panel {
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] .segmented {
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .segmented button.active {
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] .role-notice {
  background: var(--app-surface);
}

/*
  A reviews-page-scoped @media(min-width: 721px) rule re-forces the segmented
  star filter back to transparent-container/white-button at higher
  specificity than the earlier generic .segmented fix. Match its exact
  scope to win.
*/
body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"][data-interface-mode="dark"] .segmented {
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"][data-interface-mode="dark"] .segmented button {
  background: transparent;
  color: var(--app-ink-soft);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"][data-interface-mode="dark"] .segmented button.active {
  background: var(--app-surface);
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .status-pill.online {
  background: color-mix(in srgb, var(--app-success) 18%, var(--app-surface));
  border-color: color-mix(in srgb, var(--app-success) 40%, var(--app-line));
  color: var(--app-success);
}

body[data-signed-in="true"][data-interface-mode="dark"] .status-pill.offline {
  background: color-mix(in srgb, var(--app-warning) 18%, var(--app-surface));
  border-color: color-mix(in srgb, var(--app-warning) 40%, var(--app-line));
  color: var(--app-warning);
}

body[data-signed-in="true"][data-interface-mode="dark"] .password-panel,
body[data-signed-in="true"][data-interface-mode="dark"] .connection-guide,
body[data-signed-in="true"][data-interface-mode="dark"] .support-filter-bar {
  border-color: var(--app-line);
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .review-toolbar {
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] .profile-head h3,
body[data-signed-in="true"][data-interface-mode="dark"] .support-center-head h3,
body[data-signed-in="true"][data-interface-mode="dark"] .google-guide-head h3,
body[data-signed-in="true"][data-interface-mode="dark"] .backoffice-panel h3 {
  color: var(--app-ink);
}

/*
  .admin-company-context - the main "Datos de empresa" card, arguably the
  single most-visited admin page - keeps its own hardcoded white background.
*/
body[data-signed-in="true"][data-app-view="admin"][data-interface-mode="dark"] .admin-company-context {
  border-color: var(--app-line);
  background: var(--app-surface);
}

/*
  Login screen redesign: this was flat empty grey around a small centered
  card ("intentionally quiet" per an earlier comment), which reads as an
  unfinished/test screen rather than a real product's front door. Reuse the
  same diffused brand-gradient language already established for the
  dashboard workspace background, and give the card more presence.
*/
body[data-signed-in="false"] {
  background-color: #f5f6fb;
  background-image:
    radial-gradient(1200px 800px at 8% -15%, rgba(81, 70, 217, 0.22) 0%, rgba(81, 70, 217, 0) 58%),
    radial-gradient(1000px 750px at 108% 10%, rgba(14, 165, 233, 0.16) 0%, rgba(14, 165, 233, 0) 58%),
    radial-gradient(950px 700px at 80% 110%, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0) 58%);
  background-attachment: fixed;
}

body[data-signed-in="false"] .brand-mark {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(81, 70, 217, 0.22);
}

body[data-signed-in="false"] .auth-block {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--app-line) 70%, transparent);
  border-top: 3px solid var(--app-accent);
  box-shadow: 0 24px 60px rgba(23, 32, 51, 0.09), 0 4px 14px rgba(23, 32, 51, 0.05);
}

body[data-signed-in="false"] .guest-footer {
  color: var(--app-muted);
}

body[data-signed-in="false"] .guest-footer > div strong {
  color: var(--app-ink);
}

@media (min-width: 621px) {
  body[data-signed-in="false"] .sidebar {
    padding-top: 88px;
  }
}

/*
  Visual polish pass (no color changes): most interactive cards, nav
  buttons and action buttons change border-color/background/box-shadow on
  hover but had no transition, so the change snapped instantly instead of
  easing in like the dashboard metric-card already does. Give the same
  smooth easing to the rest of the app's interactive elements.
*/
body[data-signed-in="true"] :is(
  .view-switch button,
  .client-nav button,
  .admin-section-nav button,
  .primary-button,
  .google-button,
  .publish-button,
  .secondary-button,
  .approve-button,
  .summary-strip button,
  .review-card,
  .portfolio-status-card,
  .workflow-task-summary-card,
  .member-reassign-button,
  .import-file-picker,
  .review-export-button,
  .review-generate-button,
  .metric-card,
  .metric-card-action,
  .reservation-mode-card,
  .procurement-product-row,
  .restaurant-operations-nav button,
  .restaurant-date-arrow,
  .restaurant-booking-filter,
  .company-limit-grid article,
  .keyword-problems-list button,
  .settings-help-card .help-link-grid button
) {
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-signed-in="true"][data-app-view="platform"] :is(.sidebar .platform-section-nav button, .company-limit-grid article),
.platform-section-nav a {
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/*
  Dashboard visual direction update: "Plan de acción" becomes a dark,
  high-contrast card so it reads as the priority panel on the page,
  matching the new reference UI. Kept the existing recommendation data
  (priority label, review count, description, action button) instead of
  simplifying it away - only the surface changed.

  Gradient stops are the original dark navy-purple blended 30% toward the
  app's actual --app-accent/--app-accent-strong brand purple (#5146d9/
  #4035c8), so the card reads as "this app's purple, darkened for a
  high-contrast panel" instead of an unrelated one-off color. Kept to 30%
  (a 50% blend measured under 4.5:1 WCAG AA) rather than any lighter, since
  the 10px "Recomendaciones" eyebrow label in the header only clears AA
  contrast against these exact stops with room to spare below that.
*/
body[data-signed-in="true"] .action-plan-panel[aria-labelledby="actionPlanTitle"] {
  border-color: #352d90;
  background: linear-gradient(165deg, #3b3399 0%, #312a89 100%);
  box-shadow: 0 18px 38px rgba(38, 32, 110, 0.3);
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-plan-panel[aria-labelledby="actionPlanTitle"] {
  border-color: #352d90;
  background: linear-gradient(165deg, #3b3399 0%, #312a89 100%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4);
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-plan-footer .secondary-button {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

body[data-signed-in="true"][data-interface-mode="dark"] .action-plan-footer .secondary-button:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

body[data-signed-in="true"] .action-plan-panel .panel-title > div > span {
  color: #b8b3f0;
}

body[data-signed-in="true"] .action-plan-panel .panel-title > div > strong {
  color: #ffffff;
}

body[data-signed-in="true"] .action-plan-panel #actionPlanStatus {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

body[data-signed-in="true"] .action-plan-empty {
  border-color: rgba(255, 255, 255, 0.25);
  color: #d8d5f7;
}

body[data-signed-in="true"] .action-plan-item {
  border-color: rgba(255, 255, 255, 0.14);
  border-left-color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
}

body[data-signed-in="true"] .action-plan-item.priority-urgent {
  border-color: rgba(248, 113, 113, 0.35);
  border-left-color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

body[data-signed-in="true"] .action-plan-item.priority-high {
  border-color: rgba(251, 146, 60, 0.35);
  border-left-color: #fb923c;
  background: rgba(251, 146, 60, 0.1);
}

body[data-signed-in="true"] .action-plan-item.priority-opportunity {
  border-color: rgba(96, 165, 250, 0.35);
  border-left-color: #60a5fa;
  background: rgba(96, 165, 250, 0.1);
}

body[data-signed-in="true"] .action-plan-item-head > span:last-child {
  color: #c7c3f2;
}

body[data-signed-in="true"] .action-priority {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

body[data-signed-in="true"] .priority-urgent .action-priority {
  background: rgba(248, 113, 113, 0.22);
  color: #fecaca;
}

body[data-signed-in="true"] .priority-high .action-priority {
  background: rgba(251, 146, 60, 0.22);
  color: #fed7aa;
}

body[data-signed-in="true"] .action-plan-item h4 {
  color: #ffffff;
}

body[data-signed-in="true"] .action-plan-item p {
  color: #d8d5f7;
}

body[data-signed-in="true"] .action-plan-footer {
  border-top-color: rgba(255, 255, 255, 0.14);
}

body[data-signed-in="true"] .action-plan-footer > span {
  color: #c7c3f2;
}

body[data-signed-in="true"] .action-plan-footer .secondary-button {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

body[data-signed-in="true"] .action-plan-footer .secondary-button:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/*
  Dashboard visual direction update: the "Pendientes" metric card already
  gets a colored top accent bar (border-top-color, set earlier in this
  file); give its big number the same red treatment so the one card that
  needs action reads as urgent at a glance, not just another stat.
*/
body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .metric-pending strong {
  color: var(--app-danger);
}

/*
  Dashboard visual direction update: "Temas y problemas detectados" legend
  becomes a row of colored pill chips (reusing each topic's own
  --legend-color, already set inline per item) instead of a plain stacked
  list, matching the reference UI's topic-chip treatment.
*/
body[data-signed-in="true"] .keyword-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-signed-in="true"] .keyword-legend li {
  display: inline-flex;
  width: auto;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--legend-color) 16%, var(--app-surface));
  color: var(--app-ink);
  font-size: 12px;
}

body[data-signed-in="true"] .keyword-legend li span {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
}

body[data-signed-in="true"] .keyword-legend strong {
  font-weight: 750;
}

body[data-signed-in="true"] .keyword-legend small {
  color: var(--app-muted);
  font-weight: 700;
}

/*
  Reviews page visual direction update: give the "Estado real de tus
  clientes" cards the same icon-badge treatment as the dashboard metric
  cards, so the two pages read as one consistent system.
*/
body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-health-item {
  position: relative;
  padding-top: 44px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-health-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-health-icon::before {
  width: 14px;
  height: 14px;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-health-item.attention .review-health-icon {
  border-color: rgba(180, 35, 47, 0.14);
  background: rgba(180, 35, 47, 0.09);
  color: var(--app-danger);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-health-item.overdue .review-health-icon {
  border-color: rgba(217, 119, 6, 0.16);
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-health-item.recent .review-health-icon {
  border-color: rgba(8, 117, 83, 0.14);
  background: rgba(8, 117, 83, 0.1);
  color: var(--app-success);
}

/*
  Tareas page visual direction update: same icon-badge treatment as the
  dashboard metric cards and the reviews health cards, for a consistent
  system across the three most-visited client pages.
*/
body[data-signed-in="true"] .workflow-task-summary-card {
  position: relative;
  padding-top: 50px;
}

body[data-signed-in="true"] .workflow-task-summary-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

body[data-signed-in="true"] .workflow-task-summary-icon::before {
  width: 14px;
  height: 14px;
}

body[data-signed-in="true"] .workflow-task-summary-card.overdue .workflow-task-summary-icon {
  border-color: rgba(180, 35, 47, 0.14);
  background: rgba(180, 35, 47, 0.09);
  color: var(--app-danger);
}

body[data-signed-in="true"] .workflow-task-summary-card.today .workflow-task-summary-icon {
  border-color: rgba(217, 119, 6, 0.16);
  background: rgba(217, 119, 6, 0.12);
  color: #b54708;
}

body[data-signed-in="true"] .workflow-task-summary-card.progress .workflow-task-summary-icon {
  border-color: color-mix(in srgb, var(--app-accent) 30%, transparent);
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}

body[data-signed-in="true"] .workflow-task-summary-card.unassigned .workflow-task-summary-icon {
  border-color: rgba(81, 97, 122, 0.16);
  background: rgba(81, 97, 122, 0.1);
  color: #51617a;
}

/*
  Conexión page dark-mode gap: .connection-card and .channel-icon were
  missed by the earlier dark-mode audit - both had a hardcoded #ffffff/
  light background, so the cards stayed white (with light-purple-on-light-
  lavender icons) inside an otherwise dark page.
*/
body[data-signed-in="true"][data-interface-mode="dark"] .connection-card {
  background: var(--app-surface);
  border-color: var(--app-line);
}

body[data-signed-in="true"][data-interface-mode="dark"] .channel-icon {
  background: color-mix(in srgb, var(--app-accent) 22%, var(--app-surface-muted));
}

body[data-signed-in="true"][data-interface-mode="dark"] .tripadvisor-icon {
  background: color-mix(in srgb, var(--app-success) 22%, var(--app-surface-muted));
}

body[data-signed-in="true"][data-interface-mode="dark"] .connection-help {
  border-color: var(--app-line);
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .connection-help strong {
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .oauth-origin-box {
  border-color: var(--app-line);
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .oauth-origin-box code {
  color: var(--app-ink);
}

/*
  App-wide dark-mode gap found while auditing Integraciones (restaurant
  module uses .icon-action heavily for delete buttons on tables, fixtures,
  menu items, floors and zones): the base .icon-action state had a
  hardcoded white background, only its hover state was themed. Same
  component is used elsewhere in the app, so this fixes it everywhere.
*/
body[data-signed-in="true"][data-interface-mode="dark"] .icon-action {
  border-color: var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink-soft);
}

/*
  App-shell dark-mode gap found while auditing Perfil: the topbar itself
  (notifications, search) was already dark-mode aware, but the individual
  round icon buttons inside it (notification bell, help) and the sidebar
  account chip both kept a hardcoded white/near-white background - visible
  on every single authenticated page, not just this one.
*/
body[data-signed-in="true"][data-interface-mode="dark"] .topbar-icon {
  border-color: var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink-soft);
}

body[data-signed-in="true"][data-interface-mode="dark"] .session-profile {
  background: var(--app-surface-muted);
}

/*
  Soporte page dark-mode gap: the support ticket card and its message
  bubbles (company/support) all had hardcoded light backgrounds and dark
  text, so an open ticket stayed a bright white card with near-invisible
  hierarchy against the dark page.
*/
body[data-signed-in="true"][data-interface-mode="dark"] .support-ticket {
  border-color: var(--app-line);
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] .support-ticket h4 {
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .support-message p {
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .support-message.from-company {
  border-color: var(--app-line);
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .support-message.from-support {
  border-color: color-mix(in srgb, var(--app-accent) 40%, var(--app-line));
  background: var(--app-accent-soft);
}

/* Pin-to-sidebar shortcut for the restaurant reservations module. */
body[data-signed-in="true"] .restaurant-operations-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

body[data-signed-in="true"] #pinReservationsToggle.is-pinned {
  border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line));
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}

@media (max-width: 760px) {
  body[data-signed-in="true"] .restaurant-operations-head-actions {
    flex-wrap: wrap;
  }
}

/*
  Empresa (admin) dark-mode gaps found while auditing Backoffice SaaS:
  - .onboarding-actions button used an undefined --primary custom property,
    so its color silently fell back to the inherited (near-white in dark
    mode) text color, landing on a hardcoded white background - invisible
    text in dark mode, and only "visible" in light mode by coincidence.
  - .admin-context-head / .admin-company-account-summary /
    .admin-company-form-footer inside "Datos de empresa" kept their own
    hardcoded white backgrounds even though the outer card was already
    fixed for dark mode.
  - .company-cell strong (company name in the billing table) already had a
    dark-mode-safe token color, but only scoped to [data-app-view="platform"]
    - the same component in [data-app-view="admin"] (Facturación) was missed.
*/
body[data-signed-in="true"][data-interface-mode="dark"] .onboarding-actions button {
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] .onboarding-actions button:hover,
body[data-signed-in="true"][data-interface-mode="dark"] .onboarding-actions button:focus-visible {
  background: var(--app-accent-soft);
}

body[data-signed-in="true"][data-interface-mode="dark"] .admin-company-context .admin-context-head {
  border-bottom-color: var(--app-line);
  background:
    radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--app-accent) 20%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--app-accent) 14%, var(--app-surface)) 0%, var(--app-surface) 60%);
}

body[data-signed-in="true"][data-interface-mode="dark"] .admin-company-context .admin-context-head p:last-child {
  color: var(--app-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .admin-company-account-summary {
  border-color: var(--app-line);
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] .admin-company-account-summary > div + div {
  border-left-color: var(--app-line);
}

body[data-signed-in="true"][data-interface-mode="dark"] .admin-company-account-summary dt {
  color: var(--app-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .admin-company-account-summary dd {
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .admin-company-form-footer {
  border-top-color: var(--app-line);
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] .admin-company-form-footer p {
  color: var(--app-muted);
}

body[data-signed-in="true"][data-app-view="admin"] .company-cell strong {
  color: var(--app-ink);
}

/*
  Visual polish pass on the Reviews filter rail: the status pills (Todas /
  Sin responder / Sugeridas IA / Respondidas) are auto-width flex items in a
  narrow sidebar, so 3 fit on one row and the 4th wraps alone, off-center.
  A 2-column grid gives a balanced, intentional-looking 2x2 layout instead.
*/
body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail .status-filter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

body[data-signed-in="true"][data-app-view="client"][data-client-page="reviews"] .review-filter-rail .status-filter button {
  width: 100%;
}

/*
  Backoffice SaaS ("Sistema") dark-mode gaps: the runtime status cards
  (Aplicación / Base de datos / Última copia) and the launch-readiness
  checklist items both kept hardcoded light backgrounds/text.
*/
body[data-signed-in="true"][data-interface-mode="dark"] .runtime-status-item {
  border-color: var(--app-line);
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] .readiness-item {
  border-top-color: var(--app-line);
}

body[data-signed-in="true"][data-interface-mode="dark"] .readiness-item strong {
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .readiness-item div > span {
  color: var(--app-muted);
}

/*
  Backoffice SaaS "Resumen global" dark-mode gap: .platform-metric has a
  hardcoded #ffffff background behind an !important flag from an older
  rule, plus its own hardcoded number color - the top stat cards
  (Empresas activas, MRR, Incidencias, Usuarios) stayed white.
*/
body[data-signed-in="true"][data-interface-mode="dark"] .platform-metric {
  background: var(--app-surface) !important;
}

body[data-signed-in="true"][data-interface-mode="dark"] .platform-metric strong {
  color: var(--app-ink);
}

/* Backoffice SaaS "Empresas" dark-mode gap: portfolio status cards (Total / Operativas / En configuración / Requieren atención). */
body[data-signed-in="true"][data-interface-mode="dark"] .portfolio-status-card {
  border-color: var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink-soft);
}

body[data-signed-in="true"][data-interface-mode="dark"] .portfolio-status-card strong {
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .portfolio-status-card span,
body[data-signed-in="true"][data-interface-mode="dark"] .portfolio-status-card small {
  color: var(--app-muted);
}

/* Backoffice SaaS "Configuración" dark-mode gap: delivery status cards (dominio, remitente, proveedor de correo). */
body[data-signed-in="true"][data-interface-mode="dark"] .delivery-status-item {
  border-color: var(--app-line);
  background: var(--app-surface-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .delivery-status-item strong {
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] .delivery-status-item small {
  color: var(--app-muted);
}

body[data-signed-in="true"][data-interface-mode="dark"] .connection-links a {
  border-color: var(--app-line);
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] .connection-links a:hover {
  border-color: color-mix(in srgb, var(--app-accent) 40%, var(--app-line));
  background: var(--app-accent-soft);
}

/*
  Full-codebase sweep: rather than keep finding these one page at a time,
  grepped every hardcoded #ffffff background and #0f172a-family text color
  across the three CSS files and cross-checked which selectors still had no
  dark-mode counterpart. This is the batch of confirmed, live (not dead-CSS)
  gaps that turned up - scattered across settings, backoffice and platform
  panels that hadn't been individually visited yet this pass.
*/
body[data-signed-in="true"][data-interface-mode="dark"] :is(
  .review-health-item,
  .active-session-item,
  .notification-filters,
  .notification-item,
  .operational-strip article,
  .backoffice-main,
  .company-admin-columns > section,
  .reply-editor
) {
  border-color: var(--app-line);
  background: var(--app-surface);
}

body[data-signed-in="true"][data-interface-mode="dark"] :is(
  .connection-fields,
  .sync-schedule-panel,
  .support-filter-control input,
  .support-filter-control select,
  .table-search input,
  .table-toolbar select,
  .two-factor-recovery textarea,
  .platform-legal-form input,
  .platform-legal-form textarea,
  .admin-company-field input,
  .backoffice-form input,
  .backoffice-form textarea,
  .profile-form input,
  .profile-form textarea,
  .ai-style-editor input,
  .ai-style-editor select,
  .ai-style-editor textarea,
  .response-policy-editor select,
  .review-booster-editor input,
  .review-translation-tools select,
  .ai-editor-controls select,
  .search-wrap input,
  .notification-filter,
  .support-admin-controls select
) {
  border-color: var(--app-line);
  background: var(--app-surface-muted);
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] :is(
  .sync-schedule-heading h4,
  .sync-schedule-row strong,
  .panel-title strong,
  .operational-strip strong,
  .superadmin-hero h3,
  .launch-readiness-head h3,
  .readiness-progress-copy strong,
  .platform-runtime-head h3,
  .platform-delivery-head h3,
  .platform-legal-head h3,
  .system-service strong,
  .table-toolbar h3,
  .operation-summary strong,
  .operation-content strong,
  .uptime-row strong,
  .company-profile-card strong,
  .backoffice-section-title strong,
  .invoice-summary strong,
  .company-limit-grid strong,
  .mini-management-list strong,
  .access-preview strong,
  .invitation-summary strong,
  .backoffice-side strong,
  .account-connect strong,
  .company-portfolio-head h3,
  .page-heading h2
) {
  color: var(--app-ink);
}

body[data-signed-in="true"][data-interface-mode="dark"] :is(
  .reply-actions button,
  .approve-button,
  .dashboard-range,
  .help-link-grid button,
  .pagination-mini button,
  #detailReply,
  .sync-schedule-form select,
  .status-filter button
) {
  border-color: var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink-soft);
}

/*
  Gestor/Empresa (the .view-switch cards) sit right under the Kora logo and
  read as the app's primary mode switcher, so their icons act like small
  logos - but --icon-business (a building silhouette, mostly-filled) has a
  lot more visual mass than --icon-dashboard (four small separated squares)
  at the same 16px mask box, so "Empresa" looked visibly heavier/bigger than
  "Gestor" next to it. Sized down just here, not on --icon-business itself,
  since that icon is also used elsewhere (e.g. the Pedidos nav item) where
  it isn't sitting directly next to --icon-dashboard for comparison.
*/
body[data-signed-in="true"] .view-switch button[data-icon="business"]::before {
  -webkit-mask-size: 13px 13px;
  mask-size: 13px 13px;
}

/*
  .workflow-field-grid label sets text-transform: uppercase for its own label
  text ("Responsable", "Prioridad"...) - #detailWorkflowAssigneeNote sits
  inside that same <label> so it inherits the uppercase too, unlike the
  equivalent .support-readonly-note in the support ticket panel, which isn't
  nested inside an uppercase-label context.
*/
body[data-signed-in="true"] .review-detail-dialog .workflow-field-grid label .support-readonly-note {
  text-transform: none;
}

body[data-signed-in="true"][data-interface-mode="dark"] .notification-badge {
  background: #c2414b;
}

/*
  input[type="file"] (product photo / logo upload in Marketing, CSV/JSON
  import) had no styling anywhere in the app, so all 3 instances fell back
  to the browser/OS-native file picker button - visibly different font,
  shape and color from every other field next to it. ::file-selector-button
  is the standard pseudo-element for the button part (Chrome/Edge/Firefox/
  Safari 16+); ::-webkit-file-upload-button is the older WebKit name for
  the same thing, kept for older Safari. Both get identical rules.
*/
body[data-signed-in="true"] input[type="file"] {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface);
  color: var(--app-ink-soft);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

body[data-signed-in="true"] input[type="file"]::file-selector-button,
body[data-signed-in="true"] input[type="file"]::-webkit-file-upload-button {
  min-height: 30px;
  margin-right: 10px;
  padding: 0 12px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-surface-muted);
  color: var(--app-ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

body[data-signed-in="true"] input[type="file"]:hover::file-selector-button,
body[data-signed-in="true"] input[type="file"]:hover::-webkit-file-upload-button {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
}

body[data-signed-in="true"] input[type="file"]:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 1px;
}

/*
  App-wide field restyle, requested directly against the "boxed" look (a
  visible border) every text field had: replaces the border with a soft
  drop shadow instead, on every input/select/textarea in the app -
  including the signed-out login form, hence no body[data-signed-in]
  scoping. File/checkbox/radio/button-role inputs are excluded, since
  "boxed text field" doesn't describe any of those - file inputs already
  got their own border treatment above.
  !important on border/box-shadow: this codebase has hundreds of
  page-scoped input border rules (dashboard, admin, reviews, settings...);
  matching every one of them individually isn't tractable for an app-wide
  ask like this one, and no existing rule already uses !important here for
  it to lose to.
*/
:is(input, select, textarea):not([type="file"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"]) {
  border: 1px solid transparent !important;
  border-radius: 8px;
  background: var(--app-surface, #ffffff);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06) !important;
}

:is(input, select, textarea):not([type="file"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"]):focus,
:is(input, select, textarea):not([type="file"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--app-accent-soft, rgba(81, 70, 217, 0.18)), 0 1px 3px rgba(16, 24, 40, 0.1) !important;
}

/*
  Follow-up to the earlier "match the Dashboard hero" fix: that one gave the
  Empresa header the exact same 6-10% accent-tinted gradient the Dashboard
  hero uses, which matched in the CSS values but was too subtle to actually
  read as "the same color" next to each other on screen. Both now use a
  flat var(--app-accent-soft) instead - the same solid, clearly-visible
  tint already used for active nav states and eyebrow badges elsewhere -
  so there's exactly one color value to keep in sync, not two independently
  computed gradients.
*/
body[data-signed-in="true"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero,
body[data-signed-in="true"][data-app-view="admin"] .admin-company-context .admin-context-head {
  background: var(--app-accent-soft);
}

body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="client"][data-client-page="dashboard"] .client-dashboard-hero,
body[data-signed-in="true"][data-interface-mode="dark"][data-app-view="admin"] .admin-company-context .admin-context-head {
  background: var(--app-accent-soft);
}