/* Screen accents identify work areas; labels and status badges remain explicit. */
@media screen {
  :root {
    --zone-blue: #286698;
    --zone-blue-ink: #194e79;
    --zone-blue-soft: #edf5ff;
    --zone-blue-line: #c9dced;
    --zone-purple: #7050a1;
    --zone-purple-ink: #583b81;
    --zone-purple-soft: #f3eefb;
    --zone-purple-line: #dacfec;
    --zone-green: #13756b;
    --zone-green-ink: #0c5a53;
    --zone-green-soft: #eaf7f1;
    --zone-green-line: #bcded2;
    --zone-amber: #95611d;
    --zone-amber-ink: #744911;
    --zone-amber-soft: #fff5e6;
    --zone-amber-line: #ecd8b4;
  }

  .ng-patient-zone {
    --zone-accent: var(--zone-blue); --zone-ink: var(--zone-blue-ink);
    --zone-soft: var(--zone-blue-soft); --zone-line: var(--zone-blue-line);
  }
  .ng-services-zone {
    --zone-accent: var(--zone-purple); --zone-ink: var(--zone-purple-ink);
    --zone-soft: var(--zone-purple-soft); --zone-line: var(--zone-purple-line);
  }
  .ng-payment-panel {
    --zone-accent: var(--zone-green); --zone-ink: var(--zone-green-ink);
    --zone-soft: var(--zone-green-soft); --zone-line: var(--zone-green-line);
  }
  .ng-patient-zone, .ng-services-zone, .ng-payment-panel {
    border-color: var(--zone-line);
    background: linear-gradient(180deg, var(--zone-soft) 0, #fff 220px);
    box-shadow: inset 4px 0 var(--zone-accent), 0 3px 14px #20343d05;
  }
  :is(.ng-patient-zone, .ng-services-zone, .ng-payment-panel) .ng-step-title>span {
    background: var(--zone-accent); color: #fff;
  }
  :is(.ng-patient-zone, .ng-services-zone, .ng-payment-panel) .ng-step-title h2 { color: var(--zone-ink); }
  .ng-not-ready .ng-payment-panel { background: #f3f6f5; box-shadow: inset 4px 0 #849b96; }

  .ng-patient-tabs { background: #dfeaf7; }
  .ng-patient-tabs button { color: var(--zone-blue-ink); }
  .ng-patient-tabs .selected { border-color: #a9c7e2; color: var(--zone-blue-ink); }
  .ng-patient-result:hover { background: var(--zone-blue-soft); }
  .ng-selected-patient { background: var(--zone-blue-soft); border-color: var(--zone-blue-line); }
  .ng-person-icon { background: #dceafa; color: var(--zone-blue-ink); }
  .ng-service-result { border-color: #ded5ed; }
  .ng-service-result:hover { background: var(--zone-purple-soft); border-color: #a68bbd; }
  .ng-service-groups button[aria-pressed=true] { background: var(--zone-purple); border-color: var(--zone-purple); }
  .ng-services-zone .ng-cart-line { border-bottom-color: #ddd4e9; }
  .ng-services-zone .pf-cart-performer { border-top-color: #e3dced; }
  .ng-total { border-bottom-color: var(--zone-green-line); }
  .ng-total>strong { color: var(--zone-green-ink); }

  /* Headers and columns guide scanning without changing the compact row sizes. */
  .ng-queue { border-color: #c8dbe7; }
  .ng-queue>.card-head { background: #eaf2f8; border-radius: 12px 12px 0 0; box-shadow: inset 4px 0 #547e9a; }
  .ng-queue>.card-head h2 { color: #234c66; }
  .ng-queue-filters { background: #eaf2f8; }
  .ng-queue-table th { background: #edf2f5; color: #344e5e; }
  .ng-queue-table th:nth-child(1) { background: #e2eefb; color: var(--zone-blue-ink); }
  .ng-queue-table th:nth-child(2) { background: #eee5f8; color: var(--zone-purple-ink); }
  .ng-queue-table th:nth-child(3) { background: #e1f2e9; color: var(--zone-green-ink); }
  .ng-queue-table tbody tr:nth-child(even) { background: #f6f9fc; }
  .ng-queue-table tbody tr:hover { background: #edf4f9; }

  .owner-catalog, #performer-rules-card { border-color: var(--zone-purple-line); }
  :is(.owner-catalog, #performer-rules-card)>.card-head {
    background: var(--zone-purple-soft); border-radius: 12px 12px 0 0;
    box-shadow: inset 4px 0 var(--zone-purple);
  }
  :is(.owner-catalog, #performer-rules-card)>.card-head h2 { color: var(--zone-purple-ink); }
  .catalog-status button[aria-pressed=true] { color: var(--zone-purple-ink); border-color: var(--zone-purple); background: var(--zone-purple-soft); }

  .pf-summary, .ng-demand, .ng-daily-series { border-color: var(--zone-blue-line); }
  :is(.pf-summary, .ng-demand, .ng-daily-series)>.card-head {
    background: var(--zone-blue-soft); border-radius: 12px 12px 0 0;
    box-shadow: inset 4px 0 var(--zone-blue);
  }
  :is(.pf-summary, .ng-demand, .ng-daily-series)>.card-head h2 { color: var(--zone-blue-ink); }
  .pf-metrics>div:nth-child(1) { background: var(--zone-purple-soft); }
  .pf-metrics>div:nth-child(1) strong { color: var(--zone-purple-ink); }
  .pf-metrics>div:nth-child(2) { background: var(--zone-blue-soft); }
  .pf-metrics>div:nth-child(2) strong { color: var(--zone-blue-ink); }
  .pf-metrics>div:nth-child(3) { background: var(--zone-green-soft); }

  .ng-expenses-table, .ng-recurring-card, .ng-obligations, .ta-statement { border-color: var(--zone-amber-line); }
  :is(.ng-expenses-table, .ng-recurring-card, .ng-obligations, .ta-statement)>.card-head {
    background: var(--zone-amber-soft); border-radius: 12px 12px 0 0;
    box-shadow: inset 4px 0 var(--zone-amber);
  }
  :is(.ng-expenses-table, .ng-recurring-card, .ng-obligations, .ta-statement)>.card-head h2 { color: var(--zone-amber-ink); }
  .ta-summary-grid>.ta-summary:nth-child(1) { background: var(--zone-purple-soft); border-color: var(--zone-purple-line); }
  .ta-summary-grid>.ta-summary:nth-child(1) h4 { color: var(--zone-purple-ink); }
  .ta-summary-grid>.ta-summary:nth-child(2) { background: var(--zone-amber-soft); border-color: var(--zone-amber-line); }
  .ta-summary-grid>.ta-summary:nth-child(2) h4 { color: var(--zone-amber-ink); }
  .ta-summary-grid>.ta-total { background: var(--zone-green-soft); border-color: var(--zone-green-line); }
  .ta-summary-grid>.ta-total h4 { color: var(--zone-green-ink); }
  .ta-business-breakdown { border-color: var(--zone-green-line); }
  .ta-business-breakdown>.card-head { background: var(--zone-green-soft); border-radius: 12px 12px 0 0; box-shadow: inset 4px 0 var(--zone-green); }
  .ta-business-breakdown>.card-head h2 { color: var(--zone-green-ink); }
}