:root {
  --rc-bg: #f7f9f8;
  --rc-bg-soft: #faf6ee;
  --rc-surface: rgba(255, 255, 255, 0.78);
  --rc-surface-solid: #faf6ee;
  --rc-line: rgba(22, 31, 27, 0.1);
  --rc-line-strong: rgba(22, 31, 27, 0.16);
  --rc-ink: #151a18;
  --rc-muted: #68736f;
  --rc-copper: #b15a2f;
  --rc-green: #657956;
  --rc-amber: #b7791f;
  --rc-red: #b42318;
  --rc-blue: #3e6fc5;
  --rc-radius: 22px;
  --rc-radius-small: 14px;
  --rc-shadow: 0 18px 45px rgba(34, 49, 42, 0.08), 0 3px 12px rgba(34, 49, 42, 0.035);
  --rc-shadow-hover: 0 24px 60px rgba(34, 49, 42, 0.11), 0 5px 18px rgba(34, 49, 42, 0.05);
  --rc-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html,
body {
  background:
    radial-gradient(circle at 14% 7%, rgba(201, 92, 46, 0.09), transparent 28%),
    radial-gradient(circle at 86% 4%, rgba(15, 122, 95, 0.12), transparent 30%),
    linear-gradient(180deg, #faf6ee 0%, var(--rc-bg) 58%, #f4ecdc 100%);
  color: var(--rc-ink);
}

.app-shell {
  grid-template-columns: 248px minmax(0, 1fr);
  background: transparent;
}

.sidebar,
.topbar,
.panel,
.metric-card,
.module-card,
.entity-list-panel,
.entity-editor-panel,
.detail-section,
.detail-grid > div,
.integration-card,
.inventory-card,
.structured-row,
.schedule-row,
.ranking-row,
.dispatch-card,
.modifier-group-editor,
.modifier-choice-row,
.permission-matrix > div,
.order-commerce-panel,
.order-detail-drawer,
.admin-auth-panel {
  background: var(--rc-surface);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-bottom-color: var(--rc-line);
  border-right-color: var(--rc-line);
  box-shadow: var(--rc-shadow), var(--rc-highlight);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.panel,
.metric-card,
.module-card,
.entity-list-panel,
.entity-editor-panel,
.order-commerce-panel,
.order-detail-drawer,
.admin-auth-panel {
  border-radius: var(--rc-radius);
}

.panel:hover,
.metric-card:hover,
.module-card:hover,
.order-commerce-row:hover td {
  box-shadow: var(--rc-shadow-hover), var(--rc-highlight);
}

.sidebar {
  padding: 18px 14px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.72);
}

.brand-mark,
.nav-icon,
.button.primary,
.checkout-button,
.send-button {
  border-radius: 16px;
}

.nav-list a {
  min-height: 42px;
  border-radius: 14px;
  color: var(--rc-muted);
}

.nav-list a.active {
  color: var(--rc-copper);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 3px 0 0 var(--rc-copper), 0 8px 20px rgba(34, 49, 42, 0.05);
}

.main {
  padding: 20px 26px 26px;
}

.topbar {
  min-height: 84px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(240, 249, 245, 0.72)),
    var(--rc-surface);
}

.topbar h1,
.panel-head h2,
.section-heading h3 {
  color: var(--rc-ink);
  letter-spacing: 0;
}

.top-kicker,
.eyebrow,
.panel-head .eyebrow {
  color: var(--rc-copper);
  letter-spacing: 0.08em;
}

.metric-card {
  min-height: 124px;
  padding: 18px;
  overflow: hidden;
}

.metric-card::before,
.metric-card::after {
  opacity: 0.7;
}

.metric-card strong {
  color: var(--rc-ink);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1;
}

.metric-card span,
.metric-card small,
.panel-copy,
.card-label,
.detail-list-row small {
  color: var(--rc-muted);
}

.metric-success { --metric-tone: var(--rc-green); }
.metric-warning { --metric-tone: var(--rc-amber); }
.metric-danger { --metric-tone: var(--rc-red); }
.metric-info { --metric-tone: var(--rc-blue); }
.metric-brand { --metric-tone: var(--rc-copper); }

.button {
  min-height: 40px;
  border-radius: 14px;
  border-color: var(--rc-line);
  color: var(--rc-ink);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 14px rgba(34, 49, 42, 0.04), var(--rc-highlight);
}

.button.primary {
  color: var(--rc-copper);
  background: #fdfbf6;
  border-color: color-mix(in srgb, var(--rc-copper) 28%, var(--rc-line));
}

.button.primary:hover {
  color: #faf6ee;
  background: var(--rc-copper);
}

.status-pill {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--rc-line);
}

.status-pill.success {
  color: var(--rc-green);
  background: rgba(15, 122, 95, 0.1);
  border-color: rgba(15, 122, 95, 0.2);
}

.status-pill.warning {
  color: var(--rc-amber);
  background: rgba(183, 121, 31, 0.1);
  border-color: rgba(183, 121, 31, 0.2);
}

.status-pill.danger {
  color: var(--rc-red);
  background: rgba(180, 35, 24, 0.09);
  border-color: rgba(180, 35, 24, 0.18);
}

.order-command-bar,
.table-toolbar,
.customer-command-bar {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  border-color: var(--rc-line);
  box-shadow: var(--rc-highlight);
}

.orders-workspace-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: 18px;
}

.order-commerce-wrap {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--rc-line);
  background: rgba(255, 255, 255, 0.56);
}

.order-commerce-table thead,
.order-commerce-table th {
  background: rgba(247, 249, 248, 0.86);
  color: var(--rc-muted);
}

.order-commerce-row td {
  border-bottom-color: var(--rc-line);
  vertical-align: middle;
}

.order-commerce-row.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--rc-copper);
}

.order-detail-drawer {
  position: sticky;
  top: 20px;
}

input,
textarea,
select {
  border-radius: 14px;
  border-color: var(--rc-line-strong);
  background: rgba(255, 255, 255, 0.78);
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rc-copper) 26%, transparent);
  outline-offset: 2px;
}

html[data-theme="dark"] {
  --rc-bg: #101211;
  --rc-surface: rgba(28, 31, 29, 0.78);
  --rc-surface-solid: #1d211f;
  --rc-line: rgba(255, 255, 255, 0.1);
  --rc-line-strong: rgba(255, 255, 255, 0.16);
  --rc-ink: #f4f6f5;
  --rc-muted: #a4aca8;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 16% 8%, rgba(201, 92, 46, 0.12), transparent 30%),
    radial-gradient(circle at 88% 6%, rgba(15, 122, 95, 0.14), transparent 32%),
    linear-gradient(180deg, #111412 0%, #0e100f 100%);
}

html[data-theme="dark"] :is(.sidebar, .topbar, .panel, .metric-card, .module-card, .entity-list-panel, .entity-editor-panel, .detail-section, .detail-grid > div, .integration-card, .inventory-card, .structured-row, .schedule-row, .ranking-row, .dispatch-card, .modifier-group-editor, .modifier-choice-row, .permission-matrix > div, .order-commerce-panel, .order-detail-drawer, .admin-auth-panel) {
  background: var(--rc-surface);
  border-color: var(--rc-line);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] :is(input, textarea, select, .button, .status-pill, .order-command-bar, .table-toolbar, .customer-command-bar, .order-commerce-wrap) {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--rc-line);
  color: var(--rc-ink);
}

@media (max-width: 980px) {
  .orders-workspace-grid {
    grid-template-columns: 1fr;
  }

  .order-detail-drawer {
    position: static;
  }
}

/* Final release-candidate guard rails: this file loads last and owns layout stability. */
* {
  min-width: 0;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  gap: 18px;
}

.top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.theme-mode-control,
.top-actions .button,
.button,
.entity-list-item,
.order-commerce-table button,
.editor-tab,
.workspace-tab,
.saved-view-tabs button,
.campaign-view-tabs button {
  min-height: 44px;
}

.theme-mode-control {
  padding: 4px;
  border: 1px solid var(--rc-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--rc-highlight);
}

.theme-mode-control button {
  min-width: 44px;
  border: 0;
  border-radius: 14px;
  color: var(--rc-muted);
  background: transparent;
}

.theme-mode-control button.active {
  color: var(--rc-ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(34, 49, 42, 0.07), var(--rc-highlight);
}

.entity-list-item {
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid transparent;
}

.entity-list-item.active,
.entity-list-item[aria-current="true"] {
  border-color: color-mix(in srgb, var(--rc-copper) 28%, var(--rc-line));
  background: rgba(255, 255, 255, 0.82);
}

.entity-list-copy,
.entity-list-copy strong,
.entity-list-copy small,
.metric-card,
.metric-card strong,
.module-card,
.module-card strong,
.detail-grid > div,
.detail-list-row,
.structured-row,
.schedule-row,
.ranking-row,
.dispatch-card,
.integration-card {
  overflow-wrap: anywhere;
}

.metric-card {
  isolation: isolate;
}

.metric-card strong {
  max-width: 100%;
  display: block;
}

.metrics-grid,
.module-grid,
.detail-grid,
.editor-form-grid,
.orders-flow-grid {
  align-items: stretch;
}

.chip,
.status-pill,
.count-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid transparent;
}

.chip-success,
.status-pill.success {
  color: var(--rc-green);
  background: rgba(15, 122, 95, 0.1);
  border-color: rgba(15, 122, 95, 0.2);
}

.chip-warning,
.status-pill.warning {
  color: var(--rc-amber);
  background: rgba(183, 121, 31, 0.1);
  border-color: rgba(183, 121, 31, 0.2);
}

.chip-danger,
.status-pill.danger {
  color: var(--rc-red);
  background: rgba(180, 35, 24, 0.09);
  border-color: rgba(180, 35, 24, 0.18);
}

.chip-info {
  color: var(--rc-blue);
  background: rgba(62, 111, 197, 0.1);
  border-color: rgba(62, 111, 197, 0.18);
}

.chip-neutral,
.status-pill {
  color: var(--rc-muted);
  background: rgba(255, 255, 255, 0.68);
  border-color: var(--rc-line);
}

.order-commerce-panel {
  overflow: hidden;
}

.order-commerce-wrap {
  max-width: 100%;
  overflow: auto;
}

.order-commerce-table {
  width: 100%;
  /* Was 920px, wider than the panel's minimum inner width (~596px), so the table overflowed and
     showed a permanent horizontal scrollbar with the Sync column cut off — even on an empty table
     (audit-23 DL5). table-layout:fixed with the per-column percentages keeps the columns readable
     as it scales down to fit. */
  min-width: 560px;
  table-layout: fixed;
}

.order-commerce-table th,
.order-commerce-table td {
  padding: 12px 14px;
}

.order-commerce-table td,
.order-commerce-table small,
.order-commerce-table strong {
  max-width: 100%;
}

.order-commerce-table button {
  width: 100%;
  min-width: 0;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
}

.order-commerce-row.selected td,
.order-commerce-row[aria-selected="true"] td {
  background: rgba(255, 255, 255, 0.74);
}

.order-detail-drawer {
  max-height: calc(100vh - 148px);
  overflow: auto;
}

.detail-section,
.detail-grid > div {
  border-radius: 18px;
}

.editor-tabs,
.workspace-tabs,
.saved-view-tabs,
.campaign-view-tabs {
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.editor-tabs::-webkit-scrollbar,
.workspace-tabs::-webkit-scrollbar,
.saved-view-tabs::-webkit-scrollbar,
.campaign-view-tabs::-webkit-scrollbar {
  display: none;
}

.control-field input,
.control-field textarea,
.control-field select,
.admin-login-form input {
  min-height: 44px;
}

.empty-state,
.loading-state,
.error-state {
  border-radius: 18px;
  border: 1px dashed var(--rc-line-strong);
  background: rgba(255, 255, 255, 0.58);
  color: var(--rc-muted);
}

html[data-theme="dark"] .theme-mode-control,
html[data-theme="dark"] .theme-mode-control button.active,
html[data-theme="dark"] .entity-list-item.active,
html[data-theme="dark"] .entity-list-item[aria-current="true"],
html[data-theme="dark"] .order-commerce-row.selected td,
html[data-theme="dark"] .order-commerce-row[aria-selected="true"] td,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .loading-state,
html[data-theme="dark"] .error-state {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--rc-line);
}

html[data-theme="dark"] .chip-neutral,
html[data-theme="dark"] .status-pill {
  background: rgba(255, 255, 255, 0.06);
}

/* Dark-mode surfaces for the per-branch availability rows, the menu-visibility toggles
   ("Visible in menu"), the editor-tab count badges, and the signed-in avatar. Each ships a
   hard-coded light background (#fcfaf7 / #fdfbf6 / #f3fcf7 / #f2e9e2 / #eff3f1) that no dark
   block covered, so in dark mode they rendered as unreadable white cards and blank white
   badges (branch name invisible, "3"/"0" and "ME" empty blobs). */
html[data-theme="dark"] .branch-availability-row {
  background: var(--rc-surface);
  border-color: var(--rc-line);
  color: var(--rc-ink);
}
html[data-theme="dark"] :is(.toggle, .editor-toggle) {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--rc-line);
  color: var(--rc-ink);
}
html[data-theme="dark"] .editor-tab span {
  background: rgba(255, 255, 255, 0.12);
  color: var(--rc-ink);
}
html[data-theme="dark"] .admin-identity-avatar {
  background: rgba(255, 255, 255, 0.12);
  color: var(--rc-ink);
}

.integration-access-grid {
  display: grid;
  gap: 16px;
}

.integration-access-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.integration-access-summary > div,
.integration-client-card,
.integration-audit-row {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--rc-line);
  border-radius: 18px;
  box-shadow: var(--rc-shadow-soft);
}

.integration-access-summary > div {
  padding: 14px;
}

.integration-access-summary span,
.integration-client-main small,
.integration-client-main p,
.integration-audit-row small {
  color: var(--rc-muted);
}

.integration-access-summary strong {
  display: block;
  color: var(--rc-ink);
  font-size: 28px;
  line-height: 1.1;
  margin-top: 4px;
}

.integration-client-list {
  display: grid;
  gap: 12px;
}

.integration-client-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.integration-client-card.is-disabled {
  opacity: 0.64;
}

.integration-client-main,
.integration-client-meta,
.integration-client-actions,
.integration-audit-row {
  align-items: center;
  display: flex;
  gap: 12px;
}

.integration-client-main {
  justify-content: space-between;
}

.integration-client-main > div {
  flex: 1;
  min-width: 0;
}

.integration-client-main strong {
  display: block;
  font-size: 18px;
}

.integration-client-main p {
  margin: 2px 0 0;
}

.integration-client-icon {
  align-items: center;
  background: rgba(209, 94, 49, 0.1);
  border-radius: 14px;
  color: var(--rc-brand);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.integration-client-meta {
  flex-wrap: wrap;
}

.integration-client-meta > span:not(.chip) {
  color: var(--rc-muted);
  font-weight: 700;
}

.integration-scope-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.integration-scope-list span {
  background: var(--rc-soft);
  border: 1px solid var(--rc-line);
  border-radius: 999px;
  color: var(--rc-ink);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}

.integration-client-actions {
  justify-content: flex-end;
}

.integration-audit-list {
  display: grid;
  gap: 8px;
}

.integration-audit-row {
  padding: 10px 12px;
}

.integration-audit-row > span {
  color: var(--rc-brand);
  font-weight: 900;
  min-width: 34px;
}

.integration-audit-row strong {
  flex: 1;
  min-width: 0;
}

html[data-theme="dark"] .integration-access-summary > div,
html[data-theme="dark"] .integration-client-card,
html[data-theme="dark"] .integration-audit-row {
  background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .sidebar {
    padding-inline: 10px;
  }

  .brand > div,
  .sidebar-search input,
  .nav-section-label,
  .nav-list a span:not(.nav-icon),
  .side-note strong,
  .side-note .label {
    display: none;
  }

  .nav-list a {
    justify-content: center;
    padding-inline: 0;
  }

  .nav-icon {
    margin: 0;
  }
}

@media (max-width: 760px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    min-height: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--rc-line);
  }

  .nav-list,
  .nav-group {
    display: flex;
    flex-direction: row;
    gap: 6px;
  }

  .main {
    padding: 14px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .orders-workspace-grid {
    gap: 12px;
  }

  .integration-access-summary {
    grid-template-columns: 1fr;
  }

  .integration-client-main,
  .integration-client-actions,
  .integration-audit-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   Sidebar rail — authoritative layout.
   This file loads last, so this block settles the disagreement between
   styles.css / dashboard-system.css / dashboard-v2.css over the sidebar.

   Fixes:
   1. The column scrolls with the page, so reaching the nav from the bottom
      of a long page meant scrolling all the way back up.
   2. The narrow rail hid every item's name and every group heading, leaving
      unlabelled icons separated by gaps with nothing in them.
   ========================================================================== */

/* `overflow-x: hidden` on the document makes body a scroll container, and a
   sticky element inside a container that never scrolls simply never sticks.
   `clip` hides the same horizontal overflow without creating that container,
   so the viewport stays the scroller and the rail can stick to it. */
html,
body {
  overflow-x: clip;
  overflow-y: visible;
}

/* --- 1. The column stays put; page and column scroll independently ------- */
.app-shell {
  align-items: start;
  overflow: visible;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;   /* column hits its end without dragging the page */
  scrollbar-width: thin;
  scrollbar-color: var(--rc-line-strong) transparent;
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--rc-line-strong);
}
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* The nav keeps its natural height. Letting it shrink (flex: 1 1 auto with
   min-height: 0) clipped the last items instead of letting the column scroll.
   `margin-top: auto` on the note still drops it to the bottom when there is
   room to spare. */
.sidebar .nav-list {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
}

.sidebar .side-note { flex: 0 0 auto; margin-top: auto; }

.sidebar .nav-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* uniform hit areas, so hover and active pills line up */
  gap: 3px;
}

/* The search field is hidden by dashboard-v2.css, leaving a magnifier wired to
   an input that cannot be focused. Give it back its field. */
.sidebar .sidebar-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-small);
  background: rgba(255, 255, 255, 0.6);
}

.sidebar .sidebar-search input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--rc-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
}

.sidebar .sidebar-search:focus-within {
  border-color: var(--rc-copper);
  box-shadow: 0 0 0 3px rgba(201, 92, 46, 0.12);
}

.nav-section-label {
  margin: 0 0 4px;
  padding: 0 10px;
  color: var(--rc-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.sidebar .nav-list a {
  display: flex;
  /* dashboard-v2.css pins this to a hard 46px at every width, which squeezed
     each item's name down to zero. Stretching to the full column keeps every
     hover and active pill the same size. */
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  transition: background 0.16s ease, color 0.16s ease;
}

.sidebar .nav-list a:hover { background: rgba(255, 255, 255, 0.55); color: var(--rc-ink); }

.sidebar .nav-list a:focus-visible {
  outline: 2px solid var(--rc-copper);
  outline-offset: 2px;
}

.nav-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  font-size: 19px;
  line-height: 1;
}

/* dashboard-v2.css hides the item names and the brand wordmark at every width,
   not just on a narrow rail. Nothing in the sidebar should be nameless. */
.sidebar .nav-list a .nav-text,
.sidebar .nav-section-label {
  display: block;
}

.sidebar .brand > div:last-child { display: block; }

/* --- 2. The narrow rail keeps its names ---------------------------------- */
@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 92px minmax(0, 1fr); }

  .sidebar { padding: 16px 6px; gap: 12px; align-items: stretch; }

  /* The search box has no room to be usable here, and a magnifier wired to a
     hidden input is a control that cannot be operated. Nav search is not
     needed for sixteen named items. */
  .sidebar .sidebar-search { display: none; }

  .brand { justify-content: center; }

  .nav-section-label {
    padding: 0;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-align: center;
  }

  .nav-list { gap: 14px; }
  .nav-group { gap: 2px; }

  .sidebar .nav-list a {
    display: grid;
    /* dashboard-v2.css leaves a two-column template on this element; without
       collapsing it to one column the icon and its name sit side by side. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-auto-flow: row;
    gap: 4px;
    justify-items: center;
    min-height: 0;
    padding: 8px 3px 7px;
    border-radius: 14px;
    text-align: center;
  }

  .sidebar .nav-list a .nav-text {
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.005em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-icon { margin: 0; font-size: 20px; }

  /* A 3px bar down the left edge of a centred pill reads as a stray sliver;
     the filled pill alone carries the active state here. */
  .sidebar .nav-list a.active {
    box-shadow: 0 6px 16px rgba(34, 49, 42, 0.06);
    background: rgba(255, 255, 255, 0.9);
  }

  /* dashboard-v2.css hangs a 4px pseudo-element off the active item; on a
     centred rail it reads as a stray sliver rather than an indicator. */
  .sidebar .nav-list a.active::after { display: none; }

  /* "System status" is redundant next to the value it labels. */
  .side-note { padding: 8px 4px; text-align: center; }
  .side-note .label { display: none; }
  .side-note strong {
    display: block;
    font-size: 11px;
    line-height: 1.2;
  }
}

/* --- 3. Stacked layout on phones keeps its own scroll behaviour ---------- */
@media (max-width: 760px) {
  .sidebar {
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .sidebar .nav-list { flex-direction: row; flex: 0 0 auto; }
  .sidebar .side-note { margin-top: 0; }
}

/* ==========================================================================
   Page rhythm and card sizing.

   Two faults, both systemic:

   1. `.page.active` was `display: block`, so every `gap` declared on a page
      was inert -- `gap` does nothing outside flex and grid. Sections sat flush
      against each other with no separation at all. dashboard-v2.css tried to
      fix this for Messages with `.communication-page { display: grid; gap }`,
      but at (0,1,0) it lost to `.page.active` at (0,2,0), so the page stayed
      block and its 16px gap never applied.

   2. Grid rows stretch their items by default, so a short card next to a tall
      one grew to match -- `cockpit-queue-card` measured 260px with 194px of
      nothing inside it, `cockpit-finance-card` 200px with 144px empty.
   ========================================================================== */

.page.active {
  display: grid;
  gap: 16px;
  align-items: start;
}

/* No `grid-template-columns` above on purpose: an unspecified grid is a single
   column, which is what a stacked page wants, and it leaves `.layout-grid`'s
   own two-column template free to apply on the pages that opt into it. */

.layout-grid,
.page.active.layout-grid {
  align-items: start;
}

/* Cards keep the height their content needs. */
.cockpit-bento,
.metrics-grid,
.content-grid,
.overview-metrics {
  align-items: start;
}

/* The "Demand building" chip sat at top: 48px, exactly where the timeline's
   current-time marker is -- it covered the 12x12 marker completely, so the one
   dot showing where "now" falls on the timeline was invisible. Lifting the
   chip fully above its own anchor leaves a 6px gap over the marker and still
   keeps the chip inside the timeline box. */
.timeline-float {
  transform: translateY(-100%);
}

/* ==========================================================================
   Money values must not break across lines.

   `35,000 EGP` rendered on three lines on PUMO: the value is set at 31.7px
   inside an 89px box, because `.metrics-grid` used a fixed four-column
   template regardless of how wide the grid actually was. `2,525 EGP` and
   `2,355 EGP` split in two on Overview for the same reason, and analytics had
   two more. A currency amount broken over two lines reads as two numbers.

   Columns now size themselves, and the value never wraps -- so if anything is
   still too tight it is visible as one long value rather than a fake second
   figure.
   ========================================================================== */

.metrics-grid,
.metrics-grid.wide {
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
}

/* dashboard-v2.css pins this to three columns at (0,2,0), so match its weight. */
.finance-card-grid,
.cockpit-finance-card .finance-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}

.metric-card > strong,
.finance-card > strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* digits line up down a column */
}

/* 31.7px cannot hold a five-figure amount plus a currency in a metric card. */
.metric-card > strong {
  font-size: clamp(19px, 1.5rem, 24px);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Readable text.

   53% of the text on this dashboard rendered below 11px, and the single most
   common size in the whole product was 9px -- 572 elements. There was 8px and
   7px chrome too. This is a screen staff read all day, much of it English
   labels read by Arabic speakers, and 174 rules across five stylesheets had
   drifted below any readable floor.

   Each selector below keeps its role in the hierarchy; the scale is just
   lifted off the floor. The scaled phone preview in App Studio is left alone,
   since its text is small on purpose -- it is a shrunken device mock-up.
   ========================================================================== */

#orders .order-commerce-table th,
.campaign-preview-location small,
.campaign-status,
.cockpit-branch-list .readiness-copy small,
.cockpit-branch-list .readiness-score strong,
.cockpit-finance-card .finance-card span, .cockpit-finance-card .finance-card small,
.cockpit-go-card p,
.cockpit-go-card small,
.cockpit-identity-stats span,
.cockpit-queue-card .ops-task-main span,
.cockpit-signals .metric-card small,
.cockpit-signals .metric-card span,
.communication-campaign-copy em,
.communication-campaign-copy small,
.communication-campaign-row .status-pill,
.communication-channel-picker legend,
.communication-filters button,
.communication-forecast span, .communication-forecast small,
.communication-form .field,
.communication-form .field > small,
.communication-preview-label span, .communication-preview-label em,
.compact-bars .bar-column small,
.flow-stage span, .flow-stage small,
.message-template-card textarea,
.message-template-group-head > span,
.message-template-head small,
.message-template-toolbar span,
.notification-preview-card p,
.notification-preview-card small,
.smart-brief-copy small,
.smart-recommendation p,
.smart-recommendation span,
.template-variable-row span,
.timeline-float small, .orders-flow-float small,
.timeline-hours span {
  font-size: 11px;
}

#orders .saved-view-tabs button,
.after-sales-case small,
.automation-channel-readonly span, .automation-channel-readonly small,
.automation-condition-row > label > span,
.automation-flow small,
.automation-step > small,
.campaign-preview-copy > small,
.campaign-preview-copy > span,
.campaign-preview-meta dt, .campaign-preview-meta dd,
.campaign-row-copy small, .campaign-row-copy em,
.cockpit-index-heading small, .spatial-card-head small, .cockpit-signal-heading small, .orders-flow-copy p,
.cockpit-signal-heading a,
.communication-channel-picker strong,
.communication-health small,
.control-field label, .control-field > span,
.control-field label, .control-field > span, .field label,
.customer-context-strip small,
.customer-context-strip span,
.date-filter,
.detail-grid span, .detail-grid small,
.entity-list-copy small,
.equipment-list small, .mobile-stock-list small, .unit-queue-list small,
.eyebrow,
.message-template-head strong,
.message-template-toolbar p,
.metric-card small,
.module-card > span,
.nav-section-label,
.notification-preview-card strong,
.operations-pulse-card > a,
.opportunity-copy > div,
.opportunity-type span, .opportunity-copy small, .opportunity-impact small,
.order-commerce-row td small,
.orders-flow-copy > span,
.page-smart-brief > a,
.preview-app-icon,
.readiness-blockers span,
.smart-brief-copy p,
.status-pill, .count-pill, .chip,
.studio-color-row small,
.studio-field > span,
.studio-page-row small,
.studio-section-select small,
.suggestion-preview-card small,
.timeline-float strong, .orders-flow-float strong,
.top-kicker,
.top-kicker, .eyebrow,
.unit-map-pin small,
table th,
th, .order-commerce-table th {
  font-size: 11.5px;
}

#overview .overview-metrics .metric-card small,
.after-sales-case p,
.app-studio-view-tabs button,
.automation-safety-note p,
.automation-step-number,
.bar-column strong, .bar-column small,
.brand-sub,
.campaign-preview-copy p,
.campaign-preview-location strong,
.campaign-row-result strong,
.campaign-studio-head p:not(.eyebrow),
.category-product-row small,
.cockpit-go-card strong,
.cockpit-identity p,
.cockpit-index-link,
.cockpit-queue-card .ops-task-main strong,
.communication-campaign-copy strong,
.communication-form :is(input, textarea, select),
.condition-number,
.courier-order-head,
.customer-cart-alert p,
.customer-pin,
.editor-tab span,
.editor-tab, .workspace-tab,
.entity-group-head span,
.eyebrow,
.finance-card small,
.fulfillment-candidates em,
.fulfillment-candidates span,
.fulfillment-decision-main small, .fulfillment-candidates small,
.funnel-step > div:first-child > span,
.inline-select > span,
.inventory-card small, .integration-card small,
.mapping-health-grid small,
.metric-card span,
.module-card p,
.module-card span:not(.module-icon):not(.module-arrow),
.notification-composer .field,
.notification-log-copy p, .notification-log-copy small,
.notification-metrics span, .notification-metrics small,
.ops-task-main span, .experience-priority small, .readiness-copy small, .finance-card span,
.order-command-bar .control-field > span, .after-sales-form .control-field > span,
.order-commerce-table th,
.order-note-strip small,
.permission-matrix small,
.presence-row span, .presence-row small,
.ranking-copy small, .ranking-row b small,
.recovery-row small,
.routing-candidate small, .routing-numbers small,
.saved-view-tabs button, .campaign-view-tabs button,
.smart-recommendation strong,
.studio-color-row input[type="text"],
.studio-editor-head p, .studio-section-toolbar p,
.studio-nav-warning p,
.studio-page-toggle,
.studio-preview-pumo,
.suggestion-preview-card p,
.suggestion-rank,
.suggestion-score,
.theme-mode-control button,
.timeline-event small,
.top-live,
.topbar p:not(.top-kicker),
.unit-map-pin strong,
/* A field that differs from the shipped wording is worth spotting at a glance. */ .copy-changed,
table td {
  font-size: 12px;
}

/* The branch readiness donut is 36px with a 28px hole, and its number was set
   at 8px. At a readable 11px, "100%" measures 32px -- wider than the hole, so
   the leading 1 spilled onto the coloured ring and the badge read "00%".
   The badge and its hole grow to fit the number they exist to show. */
.cockpit-branch-list .readiness-score {
  width: 44px;
  height: 44px;
}

.cockpit-branch-list .readiness-score::after {
  width: 35px;
  height: 35px;
}

/* ==========================================================================
   Text contrast.

   1,103 pieces of text across the sixteen pages sat below the 4.5:1 WCAG AA
   asks for normal-size text. Asking the browser which rule actually won for
   each failure showed they were not scattered: they came from three "muted"
   tokens and one eyebrow rule. Those tokens exist to colour secondary text,
   so taking them down is exactly what they are for -- no fill, border, ring
   or chart mark is touched.

   Each value below is its own hue walked toward black until it clears 4.5:1
   on the dashboard's own card white (#fcfcfb), not a colour picked by eye.
   ========================================================================== */

:root {
  --ds-muted: #6c7771;         /* was #727d77 -- 4.16:1 */
  --muted: #6c7771;            /* same value, same reason */
  --dashboard-muted: #6c7771;
  --v2-muted: #6d7772;         /* was #77817c -- 3.92:1 */
  /* Six percent darker. Imperceptible where copper is a fill or a ring, and it
     is what carries the order codes, counters and WHEN/THEN labels over the
     threshold -- they were the single largest group still failing. */
  --ds-copper: #c1562f;        /* was #b15a2f -- 3.68:1 as text */
}

/* The brand copper stays #b15a2f everywhere it is a fill, a ring or a mark.
   Only where it sets small uppercase text does it take the darker shade, which
   is the one place it was being read rather than seen. */
.top-kicker,
.eyebrow,
.panel-head .eyebrow {
  color: #bd562b;              /* was var(--rc-copper) -- 4.05:1 */
}

/* State chrome sits on its own tinted ground, so each of these was measured
   against the pill it actually lands on rather than against white. The
   background keeps its tint; only the word on top moves. */
.page .status-pill,
.panel .status-pill,
.status-pill { color: #926119; }        /* amber on #f1ece2 -- was 3.09:1 */
.page .chip,
.panel .chip,
.chip { color: #946219; }               /* amber on #f2eee4 -- was 3.14:1 */
.page .entity-avatar,
.entity-avatar { color: #b6522d; }      /* copper on #f1f5f3 -- was 3.69:1 */
.page .automation-step-number,
.automation-step-number { color: #b4512c; }  /* copper on #fff1e9 -- was 3.68:1 */

/* Order identifiers: a code you read off the screen to find an order. */
.page .order-row strong,
.orders-table strong,
.order-code { color: #b6522d; }

/* The App Studio drag handle sat at 2.46:1, which is a control you are meant
   to find with your eye before your cursor. */
.studio-section-grip { color: #79736e; }

.timeline-scale small,
.cockpit-timeline small,
.cockpit-timeline .now-label,
small.now-label { color: #6b736e; }

/* A 2.65:1 grey on the timeline's "now" marker, and a 55%-alpha ink on the
   order flow's stage numbers. Both are labels the eye has to resolve, not
   decoration. */
.cockpit-timeline small,
.timeline-scale small {
  color: #6b736e;
}

.flow-stage span,
.orders-flow-stage span {
  color: rgba(23, 32, 28, 0.78);
}

/* The muted tokens clear 4.5:1 on white, but a good deal of this dashboard's
   text sits on soft tinted cards rather than white, where the same value lands
   just under. These carry enough headroom to pass on both grounds. */
:root {
  --ds-muted: #656e69;
  --muted: #656e69;
  --dashboard-muted: #656e69;
  --v2-muted: #666f6a;
  --rc-muted: #626b66;
}

/* #98a19c reached the metric cards' captions past the tokens -- 2.65:1, the
   lowest real text on the dashboard. */
.page .metric-card small,
.page .metric-card > small,
.cockpit-signals .metric-card small,
.metric-card small { color: #656e69; }

/* A 55% ink on the order flow's stage captions. */
.page .flow-stage small,
.flow-stage small { color: rgba(23, 32, 28, 0.82); }

/* --- Build 2: new-order alert affordances --- */
/* Orders-tab badge: count of live orders on the branch board; red pulse when new ones wait. */
.nav-list a { position: relative; }
/* The collapse-rail rules hide the last span in a nav link; the badge is now that span, so
   force it back on (unless empty) with a selector specific enough to win. */
.nav-list a > .nav-badge:not([hidden]) { display: inline-flex; }
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-inline-start: 8px;
  border-radius: 999px;
  background: #d64545;
  color: #faf6ee;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.nav-badge.has-new { animation: navBadgePulse 1.1s ease-in-out infinite; }
@keyframes navBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 69, 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(214, 69, 69, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-badge.has-new { animation: none; }
}
/* Collapsed rail: pin the badge to the icon corner so it stays visible without the label. */
@media (max-width: 1024px) {
  .nav-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    margin-inline-start: 0;
  }
}
#orderSoundToggle.is-muted { opacity: 0.62; }
#orderSoundToggle.is-muted .ion { color: #a23b3b; }

/* Image upload fields (replaced the old pasted-URL text inputs everywhere) */
.image-field .image-field-body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.image-field-preview {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.04);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.image-field-preview:hover {
  border-color: rgba(201, 92, 46, 0.6);
  box-shadow: 0 0 0 3px rgba(201, 92, 46, 0.14);
}
.image-field-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image-field-preview.is-empty {
  border-style: dashed;
}
.image-field-placeholder {
  color: rgba(15, 23, 42, 0.45);
  font-size: 22px;
  display: flex;
}
.image-field-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.image-field .field-hint {
  display: block;
  margin-top: 6px;
  color: rgba(15, 23, 42, 0.55);
}
.image-field .danger-text { color: #a23b3b; }
html[data-theme="dark"] .image-field-preview {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .image-field-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .image-field .field-hint {
  color: rgba(255, 255, 255, 0.55);
}

/* ==== Orders date-range filter ==== */
.order-date-presets {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.order-date-presets .button.active {
  background: var(--accent, #0f766e);
  color: #faf6ee;
  border-color: var(--accent, #0f766e);
}

/* ==== Order receipt overlay (Feature 1b) ==== */
.receipt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow: auto;
}
.receipt-overlay .receipt-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.receipt-modal {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  background: #fdfbf6;
  color: #111827;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}
.receipt-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}
.receipt-paper {
  padding: 28px 32px 32px;
  font-size: 14px;
  line-height: 1.5;
  color: #111827;
}
.receipt-head {
  text-align: center;
  border-bottom: 2px solid #111827;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.receipt-head h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.receipt-head p {
  margin: 4px 0 0;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.receipt-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin-bottom: 18px;
}
.receipt-meta > div {
  display: flex;
  flex-direction: column;
}
.receipt-meta span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
}
.receipt-meta strong {
  font-size: 14px;
}
.receipt-meta small {
  color: #6b7280;
}
.receipt-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.receipt-table th,
.receipt-table td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}
.receipt-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.receipt-table .receipt-num {
  text-align: right;
  white-space: nowrap;
}
.receipt-item-name small {
  display: block;
  color: #6b7280;
  font-size: 12px;
  margin-top: 2px;
}
.receipt-totals {
  margin-left: auto;
  width: min(280px, 100%);
}
.receipt-total-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.receipt-total-row.receipt-grand {
  border-top: 2px solid #111827;
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 700;
  font-size: 16px;
}
.receipt-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed #d1d5db;
}
.receipt-footer span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
}
.receipt-thanks {
  text-align: center;
  margin: 20px 0 0;
  color: #6b7280;
  font-size: 12px;
}

/* ==== Loyalty tier editor (Feature 2) ==== */
.loyalty-tiers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loyalty-tier-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 12px;
}
.loyalty-tier-row .loyalty-tier-benefits {
  grid-column: 1 / -1;
}
.loyalty-tier-row textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
}
@media (max-width: 720px) {
  .loyalty-tier-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==== Print: show only the receipt ==== */
@media print {
  body.receipt-open > *:not(#receiptOverlay) {
    display: none !important;
  }
  body.receipt-open #receiptOverlay {
    position: static;
    padding: 0;
    overflow: visible;
    display: block;
  }
  body.receipt-open .receipt-backdrop,
  body.receipt-open .receipt-toolbar {
    display: none !important;
  }
  body.receipt-open .receipt-modal {
    box-shadow: none;
    width: 100%;
    border-radius: 0;
  }
}

/* ============================================================================
   Captain mode — a courier account is a rider on their phone. Strip the staff
   analytics chrome so their assigned order and its command bar sit at the top
   instead of two screens of scrolling down. Applied via body.captain-mode
   (set in applyAdminAccess when the signed-in user has a courierId).
   ============================================================================ */
body.captain-mode .orders-flow-hero,
body.captain-mode .metrics-grid,
body.captain-mode .operations-pulse-card,
body.captain-mode .ops-inbox-list,
body.captain-mode .workspace-toolbar,
body.captain-mode .operations-inbox,
body.captain-mode .control-tower,
body.captain-mode .cockpit-signals {
  display: none !important;
}

/* Give the order board the full width and drop the top padding the hidden hero used to hold. */
body.captain-mode .management-shell,
body.captain-mode .operations-shell {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding-top: 4px !important;
}

/* The captain's own order card leads with its command bar — keep it prominent and comfortably tappable. */
body.captain-mode .captain-command-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
}
body.captain-mode .captain-command-bar .button {
  min-height: 52px;
  font-size: 15px;
}

/* ---- Support workspace (reviews + complaint tickets) ---- */
.support-segment {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--soft);
  border-radius: 12px;
}
.support-segment-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  padding: 7px 16px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.support-segment-btn.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--subtle-shadow);
}
.support-segment-btn .count-pill {
  background: var(--soft);
  color: var(--muted);
}
.support-segment-btn.active .count-pill {
  background: var(--copper);
  color: var(--white);
}
.support-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.support-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--subtle-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.support-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.support-category {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--copper);
}
.support-card-head h3 {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink);
}
.support-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.support-meta {
  font-size: 12.5px;
  color: var(--muted);
}
.support-meta a { color: var(--copper); text-decoration: none; }
.support-order {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--soft);
}
.support-order .ion { color: var(--copper); font-size: 18px; }
.support-order-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.support-order-body strong { font-size: 13.5px; color: var(--ink); }
.support-order-body small { font-size: 11.5px; color: var(--muted); }
.support-order-total { font-size: 13px; color: var(--ink); white-space: nowrap; }
.support-replies { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.support-reply small { font-size: 11px; color: var(--muted); }
.support-reply p { margin: 2px 0 0; font-size: 13px; color: var(--ink); }
.support-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.support-reply-input {
  flex: 1;
  min-width: 150px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--paper);
}
.support-reply-input:focus { outline: none; border-color: var(--copper); }
.support-status-select { height: 38px; }
.support-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: 16px;
  margin-top: 18px;
}
.review-stars { font-size: 16px; color: var(--gold); letter-spacing: 2px; }
.review-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.review-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--emerald);
  background: var(--mint);
  padding: 3px 9px;
  border-radius: 8px;
}

.support-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.support-photos a { display: block; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.support-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }