/* White workspace surfaces. Layout and behavior remain in the workspace styles. */
body:is([data-page="admin"], [data-page="photo-admin"]) {
  --bg: var(--echo-bg, #fff);
  --surface: var(--echo-surface, #fff);
  --surface-2: var(--echo-raised, #f6f7f9);
  --surface-3: var(--echo-hover, #eceff3);
  --line: var(--echo-line, #d8dde5);
  --text: var(--echo-text, #18212f);
  --muted: var(--echo-muted, #4d596b);
  --subtle: var(--echo-subtle, #606c7e);
  --accent-color: var(--echo-link, #174b9c);
  --accent-dark: var(--echo-link, #174b9c);
  --action: var(--echo-blue, #2057b7);
  --studio-blue: var(--echo-blue, #2057b7);
  --bubble-in: var(--echo-incoming, #f0f2f5);
  --bubble-out: var(--echo-blue, #2057b7);
  color: var(--text);
  background: var(--bg);
  color-scheme: light;
  font-size: 14px;
}

/* Clear, consistent controls across both workspaces. */
body:is([data-page="admin"], [data-page="photo-admin"]) :is(input, select, textarea) {
  background: var(--surface);
  border-color: var(--echo-control-line, #8b95a4);
  color: var(--text);
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(input, textarea)::placeholder {
  color: var(--subtle);
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(input, select, textarea):focus {
  border-color: var(--action);
}
body:is([data-page="admin"], [data-page="photo-admin"]) input[type="checkbox"] {
  accent-color: var(--action);
}
body:is([data-page="admin"], [data-page="photo-admin"]) .button.primary {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}
body:is([data-page="admin"], [data-page="photo-admin"]) .button.primary:hover {
  background: var(--echo-blue-hover, #174b9c);
  border-color: var(--echo-blue-hover, #174b9c);
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.button.subtle, .icon-button) {
  background: var(--surface);
  border-color: var(--echo-control-line, #8b95a4);
  color: var(--text);
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.button.subtle, .icon-button):hover {
  background: var(--surface-2);
  border-color: var(--subtle);
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.stack-form > label, .form-grid > label, .calculator-grid > label, .checkbox-label) {
  color: var(--muted);
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.fine-print, .muted, .loading-line) {
  color: var(--muted);
}
body:is([data-page="admin"], [data-page="photo-admin"]) .card {
  background: var(--surface);
  border-color: var(--line);
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.card h2, .card h3) {
  color: var(--text);
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.pill, .photo-badge) {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.pill.good, .photo-badge.good) {
  background: #edf7f1;
  border-color: #a7cdb4;
  color: #21603d;
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.pill.warn, .photo-badge.warn, .financial-warning, .photo-warning) {
  background: #fff8e9;
  border-color: #d6ba7b;
  color: #775315;
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.pill.bad, .photo-badge.bad, .alert) {
  background: #fff0f1;
  border-color: #dba8ae;
  color: #9c2532;
}
body:is([data-page="admin"], [data-page="photo-admin"]) .pill.quiet {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--subtle);
}

/* Studio navigation, headings, and dashboard. */
body[data-page="admin"] :is(.studio-rail, .studio-topbar) {
  background: var(--surface);
  border-color: var(--line);
}
body[data-page="admin"] :is(.studio-brand-icon, .studio-top h1 .accent) {
  color: var(--echo-link);
}
body[data-page="admin"] :is(.studio-brand small, .character-switch, .studio-nav-label, .studio-top .eyebrow, .card .eyebrow, .status-label, .studio-dialog-head .eyebrow) {
  color: var(--subtle);
}
body[data-page="admin"] .character-switch select {
  background: var(--surface);
  border-color: var(--echo-control-line);
  color: var(--text);
}
body[data-page="admin"] .studio-rail .nav-item,
body[data-page="admin"] .studio-rail .nav-item > span:first-child {
  color: var(--muted);
}
body[data-page="admin"] .studio-rail .nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
body[data-page="admin"] .studio-rail .nav-item:is(.selected, [aria-current="page"]) {
  background: var(--echo-selected);
  border-color: var(--line);
  color: var(--echo-link);
}
body[data-page="admin"] .studio-rail .nav-item.selected > span:first-child {
  color: var(--echo-link);
}
body[data-page="admin"] .studio-nav-count {
  background: #dce8fa;
  color: var(--echo-link);
}
body[data-page="admin"] .studio-nav-divider { background: var(--line); }
body[data-page="admin"] .operator-profile { border-color: var(--line); }
body[data-page="admin"] .operator-avatar {
  background: var(--surface-2);
  color: var(--text);
}
body[data-page="admin"] :is(.operator-profile strong, .studio-breadcrumb strong, .studio-top h1) {
  color: var(--text);
}
body[data-page="admin"] :is(.operator-profile small, .studio-breadcrumb, .studio-breadcrumb > span, .studio-top p, .studio-range-form label, .section-caption) {
  color: var(--subtle);
}
body[data-page="admin"] .studio-workspace-pill {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}
body[data-page="admin"] .studio-workspace-pill i { background: var(--action); }
body[data-page="admin"] :is(.stat-card, .summary-metric) {
  background: var(--surface-2);
  border-color: var(--line);
}
body[data-page="admin"] .stat-card.highlight {
  background: var(--echo-selected);
  border-color: #c2d3ed;
}
body[data-page="admin"] :is(.stat-card > span, .stat-card small, .summary-metric span, .chart-legend, .chart-summary span) {
  color: var(--muted);
}
body[data-page="admin"] :is(.stat-card strong, .stat-card.highlight strong, .summary-metric strong, .chart-summary strong) {
  color: var(--text);
}
body[data-page="admin"] .chart-legend i { background: var(--action); }
body[data-page="admin"] .chart-summary { border-color: var(--line); }
body[data-page="admin"] .studio-chart svg line { stroke: var(--line); }
body[data-page="admin"] .studio-chart svg text { fill: var(--subtle); }
body[data-page="admin"] .studio-chart svg polygon { fill: #2057b714; }
body[data-page="admin"] .studio-chart svg polyline { stroke: var(--action); }
body[data-page="admin"] .studio-chart svg circle { fill: var(--action); }

/* Customer lists, tables, profiles, and conversation review. */
body[data-page="admin"] :is(.record-row, .table-card .card-heading, td, .pagination, .customer-tabs, .manual-reply-form, .greeting-panel) {
  border-color: var(--line);
}
body[data-page="admin"] :is(.record-row strong, td strong, .info-pairs dd, .inbox-choice strong) {
  color: var(--text);
}
body[data-page="admin"] :is(.record-row p, .record-row small, .studio-filterbar > label:not(.search-field), td small, .pagination, .customer-profile p, .info-pairs dt, .inbox-choice p, .inbox-choice small, .customer-financial-cell > div > span, .payment-reference) {
  color: var(--muted);
}
body[data-page="admin"] .search-field {
  background: var(--surface);
  border-color: var(--echo-control-line);
  color: var(--subtle);
}
body[data-page="admin"] .search-field input { background: transparent; }
body[data-page="admin"] table { color: var(--muted); }
body[data-page="admin"] th {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}
body[data-page="admin"] td { color: var(--muted); }
body[data-page="admin"] tbody tr:hover { background: var(--surface-2); }
body[data-page="admin"] .customer-initials,
body[data-page="admin"] .customer-profile .customer-initials {
  background: var(--echo-selected);
  border-color: #c2d3ed;
  color: var(--echo-link);
}
body[data-page="admin"] .back-link { color: var(--echo-link); }
body[data-page="admin"] .customer-tabs button { color: var(--muted); }
body[data-page="admin"] .customer-tabs button.selected {
  background: var(--echo-selected);
  border-bottom-color: var(--action);
  color: var(--echo-link);
}
body[data-page="admin"] :is(.access-gate, .access-caption, .inline-note) {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}
body[data-page="admin"] .access-gate p { color: var(--muted); }
body[data-page="admin"] .access-caption strong { color: var(--text); }
body[data-page="admin"] .inbox-choice { border-color: var(--line); }
body[data-page="admin"] .inbox-choice:hover,
body[data-page="admin"] .inbox-choice.active { background: var(--echo-selected); }
body[data-page="admin"] .transcript .message-bubble {
  background: var(--bubble-in);
  color: var(--text);
}
body[data-page="admin"] .transcript .message-row.user .message-bubble {
  background: var(--bubble-out);
  color: #fff;
}
body[data-page="admin"] .transcript .message-meta,
body[data-page="admin"] .transcript .message-row.user .message-meta { color: var(--subtle); }
body[data-page="admin"] .checkbox-label input { accent-color: var(--action); }

/* Planning, tasks, notes, briefs, and content tools. */
body[data-page="admin"] :is(.planning-row, .brief-section, .brief-source) { border-color: var(--line); }
body[data-page="admin"] :is(.planning-group-title, .planning-row p, .task-card p, .task-metadata, .note-meta, .brief-item, .brief-source, .admin-media-info p, .instagram-post-caption) {
  color: var(--muted);
}
body[data-page="admin"] :is(.planning-day, .task-card, .note-card, .admin-media, .customer-media-tile, .greeting-form, .instagram-post-form, .instagram-post-record) {
  background: var(--surface-2);
  border-color: var(--line);
}
body[data-page="admin"] :is(.planning-day strong, .planning-row h3, .task-card h3, .note-card > p, .brief-section h3, .brief-source strong, .admin-media-info strong, .instagram-post-record strong) {
  color: var(--text);
}
body[data-page="admin"] :is(.planning-day span, .customer-media-tile > span) { color: var(--muted); }
body[data-page="admin"] .task-status-button {
  background: var(--surface);
  border-color: var(--echo-control-line);
  color: var(--echo-link);
}
body[data-page="admin"] .source-link {
  background: var(--echo-selected);
  border-color: #c2d3ed;
  color: var(--echo-link);
}
body[data-page="admin"] .drop-zone {
  background: var(--surface-2);
  border-color: var(--echo-control-line);
}
body[data-page="admin"] .drop-zone.dragover {
  background: var(--echo-selected);
  border-color: var(--action);
}
body[data-page="admin"] .drop-zone > strong { color: var(--text); }
body[data-page="admin"] .drop-zone > span:not(.empty-orbit) { color: var(--muted); }
body[data-page="admin"] :is(.instagram-photo-preview img, .instagram-review-image) { border-color: var(--line); }
body[data-page="admin"] .empty-state { color: var(--muted); }
body[data-page="admin"] .empty-state h2 { color: var(--text); }
body[data-page="admin"] .empty-state p { color: var(--muted); }
body[data-page="admin"] .empty-orbit {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--subtle);
}
body[data-page="admin"] .studio-dialog {
  background: var(--surface);
  border-color: var(--echo-control-line);
  color: var(--text);
}
body[data-page="admin"] .studio-dialog-head h2 { color: var(--text); }
body[data-page="admin"] .studio-dialog::backdrop {
  background: #18212f66;
  backdrop-filter: none;
}

/* Photo Studio navigation and dashboard. */
body[data-page="photo-admin"] :is(.photo-rail, .photo-topbar) {
  background: var(--surface);
  border-color: var(--line);
}
body[data-page="photo-admin"] :is(.photo-rail .brand small, .photo-workspace, .photo-nav-label, .eyebrow) {
  color: var(--subtle);
}
body[data-page="photo-admin"] .photo-rail nav button,
body[data-page="photo-admin"] .photo-rail .nav-item,
body[data-page="photo-admin"] .photo-rail nav button > span:first-child {
  color: var(--muted);
}
body[data-page="photo-admin"] .photo-rail nav button:hover,
body[data-page="photo-admin"] .photo-rail .nav-item:hover { background: var(--surface-2); }
body[data-page="photo-admin"] .photo-rail nav button.selected {
  background: var(--echo-selected);
  border-color: var(--line);
  color: var(--echo-link);
}
body[data-page="photo-admin"] .photo-rail nav button.selected > span:first-child { color: var(--echo-link); }
body[data-page="photo-admin"] [data-photo-count] {
  background: #dce8fa;
  color: var(--echo-link);
}
body[data-page="photo-admin"] :is(.photo-nav-divider, .photo-operator) { border-color: var(--line); }
body[data-page="photo-admin"] .photo-operator > span {
  background: var(--surface-2);
  color: var(--text);
}
body[data-page="photo-admin"] :is(.photo-operator strong, .photo-topbar strong, h1) { color: var(--text); }
body[data-page="photo-admin"] :is(.photo-operator small, .photo-topbar > div:first-child, .photo-heading p) { color: var(--muted); }
body[data-page="photo-admin"] h1 > span { color: var(--echo-link); }
body[data-page="photo-admin"] .photo-stat {
  background: var(--surface-2);
  border-color: var(--line);
}
body[data-page="photo-admin"] .photo-stat.highlight {
  background: var(--echo-selected);
  border-color: #c2d3ed;
}
body[data-page="photo-admin"] :is(.photo-stat > span, .photo-stat small) { color: var(--muted); }
body[data-page="photo-admin"] .photo-stat strong { color: var(--text); }

/* Photo review, library, inventory, and detail views. */
body[data-page="photo-admin"] :is(.photo-card, .photo-job, .photo-library-filters, .photo-bulk, .photo-json) {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}
body[data-page="photo-admin"] :is(.photo-card-preview, .photo-job > img, .photo-detail-image) {
  background: var(--surface-2);
  border-color: var(--line);
}
body[data-page="photo-admin"] .photo-card-preview .photo-no-image { color: var(--subtle); }
body[data-page="photo-admin"] .photo-card-preview > .photo-select {
  background: #fffffff2;
  border-color: var(--echo-control-line);
}
body[data-page="photo-admin"] :is(.photo-card-copy h3, .photo-job h3, .photo-row strong, .photo-info dd, .photo-section-title) {
  color: var(--text);
}
body[data-page="photo-admin"] :is(.photo-card-copy p, .photo-field, .photo-bulk, .photo-library-filters > label, .photo-section-note, .photo-job p, .photo-row p, .photo-info dt, .photo-inspection figcaption, .photo-score) {
  color: var(--muted);
}
body[data-page="photo-admin"] .photo-search {
  background: var(--surface);
  border-color: var(--echo-control-line);
  color: var(--subtle);
}
body[data-page="photo-admin"] .photo-search input { background: transparent; }
body[data-page="photo-admin"] :is(.photo-pagination, .photo-row, .photo-approval-bar) {
  border-color: var(--line);
  color: var(--muted);
}
body[data-page="photo-admin"] .photo-empty {
  background: var(--surface-2);
  border-color: var(--line);
}
body[data-page="photo-admin"] .photo-empty > span {
  background: var(--surface);
  border-color: var(--line);
  color: var(--subtle);
}
body[data-page="photo-admin"] .photo-empty h2 { color: var(--text); }
body[data-page="photo-admin"] .photo-empty p { color: var(--muted); }
body[data-page="photo-admin"] .photo-note {
  background: var(--echo-selected);
  border-color: #c2d3ed;
  color: var(--echo-link);
}
body[data-page="photo-admin"] .photo-table-wrap { border-color: var(--line); }
body[data-page="photo-admin"] table {
  background: var(--surface);
  color: var(--muted);
}
body[data-page="photo-admin"] th {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}
body[data-page="photo-admin"] td {
  border-color: var(--line);
  color: var(--text);
}
body[data-page="photo-admin"] tbody tr:hover { background: var(--surface-2); }
body[data-page="photo-admin"] :is(.photo-dialog, .photo-zoom) {
  background: var(--surface);
  border-color: var(--echo-control-line);
  color: var(--text);
}
body[data-page="photo-admin"] .photo-dialog::backdrop,
body[data-page="photo-admin"] .photo-zoom::backdrop {
  background: #18212f66;
  backdrop-filter: none;
}
body[data-page="photo-admin"] .photo-fieldset { border-color: var(--line); }
body[data-page="photo-admin"] .photo-fieldset legend { color: var(--text); }
body[data-page="photo-admin"] .photo-progress { accent-color: var(--action); }

/* Keep dense operational screens readable without changing their layout. */
body:is([data-page="admin"], [data-page="photo-admin"]) :is(input, select, textarea) {
  font-size: 13px;
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.button, .record-row .button, .admin-media-info .button, .inbox-list > .pagination .button) {
  font-size: 12px;
}
body[data-page="admin"] .studio-rail .nav-item,
body[data-page="photo-admin"] .photo-rail nav button,
body[data-page="photo-admin"] .photo-rail .nav-item {
  font-size: 13px;
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.eyebrow, .card .eyebrow, .studio-top .eyebrow, .studio-dialog-head .eyebrow, .studio-nav-label, .photo-nav-label, .character-switch, .photo-workspace, .studio-brand small, .photo-rail .brand small, .status-label) {
  font-size: 11px;
  letter-spacing: .06em;
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.fine-print, .section-caption, .pill, .photo-tags .pill, .photo-badge, .studio-nav-count, [data-photo-count], .studio-workspace-pill, .operator-profile small, .photo-operator small, .stat-card small, .photo-stat small, .summary-metric span, .record-row small, td small, .info-pairs dt, .photo-info dt, .task-metadata, .note-meta, .transcript .message-meta, .transcript .message-row.user .message-meta, .source-link, .payment-reference, .customer-financial-cell .pill) {
  font-size: 11px;
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.studio-breadcrumb, .photo-topbar > div:first-child, .studio-top p, .photo-heading p, .studio-range-form label, .record-row p, .studio-filterbar > label:not(.search-field), .stack-form > label, .form-grid > label, .calculator-grid > label, .checkbox-label, .search-field input, .photo-search input, .photo-field, .photo-library-filters > label, .photo-bulk, .pagination, .photo-pagination, .chart-legend, .chart-summary span, .inbox-choice p, .inbox-choice small, .planning-group-title, .planning-row p, .task-card p, .brief-source, .admin-media-info p, .customer-media-tile > span, .instagram-post-caption, .photo-card-copy p, .photo-job p, .photo-row p, .photo-empty p, .photo-inspection figcaption, .photo-section-note, .photo-json, .photo-score, .customer-financial-cell, .customer-financial-cell strong) {
  font-size: 12px;
}
body:is([data-page="admin"], [data-page="photo-admin"]) :is(.record-row strong, td strong, .inbox-choice strong, .planning-row h3, .task-card h3, .brief-section h3, .photo-card-copy h3, .photo-job h3, .photo-row strong, .operator-profile strong, .photo-operator strong) {
  font-size: 13px;
}
body:is([data-page="admin"], [data-page="photo-admin"]) table { font-size: 12px; }
body:is([data-page="admin"], [data-page="photo-admin"]) th { font-size: 11px; }
body:is([data-page="admin"], [data-page="photo-admin"]) td { font-size: 12px; }