/* Semantic color layer. Existing page geometry belongs to styles/architecture.css. */
:root {
  --app-background: #f4f5f0;
  --app-surface: #ffffff;
  --app-surface-muted: #f5f8f4;
  --app-surface-hover: #edf3ef;
  --app-column: #e9efea;
  --app-text: #172a2d;
  --app-text-muted: #5b706d;
  --app-border: #d7e2dc;
  --app-border-strong: #9bafa5;
  --app-accent: #2f7d78;
  --app-accent-hover: #256c68;
  --app-accent-bright: #4da59e;
  --app-accent-soft: #f2faf7;
  --app-accent-contrast: #ffffff;
  --app-focus: #2f7d78;
  --app-page-glow: rgba(231, 111, 81, .05);
  --app-topbar: rgba(244, 245, 240, .96);
  --app-sidebar: #173b3e;
  --app-sidebar-deep: #102d30;
  --app-sidebar-text: #ffffff;
  --app-sidebar-muted: #b5ceca;
  --app-sidebar-highlight: #8dd9d0;
  --app-sidebar-active: rgba(255, 255, 255, .11);
  --app-sidebar-hover: rgba(255, 255, 255, .07);
  --app-sidebar-panel: rgba(255, 255, 255, .055);
  --app-sidebar-border: rgba(255, 255, 255, .16);
  --app-sidebar-glow: rgba(77, 165, 158, .20);
  --app-hero-start: #173d40;
  --app-hero-middle: #225c5d;
  --app-hero-end: #2d7771;
  --app-hero-text: #ffffff;
  --app-hero-muted: #e9f6f3;
  --app-hero-accent: #9ce0d9;
  --app-hero-glow: rgba(97, 206, 195, .28);
  --app-hero-ring: #24595a;
  --app-hero-ring-track: rgba(255, 255, 255, .13);
  --app-hero-panel: rgba(255, 255, 255, .08);
  --app-code-background: #193436;
  --app-code-text: #d7e6e3;
  --app-success: #246349;
  --app-success-background: #e0f0e7;
  --app-success-border: #98bea9;
  --app-success-dot: #57a780;
  --app-warning: #815810;
  --app-warning-background: #fff1d2;
  --app-warning-border: #d8b77b;
  --app-warning-dot: #d9a441;
  --app-danger: #a44039;
  --app-danger-background: #fbe8e3;
  --app-danger-border: #dda59c;
  --app-danger-dot: #dd705c;
  --app-info: #365f91;
  --app-info-background: #e9f0f8;
  --app-info-border: #b0c5dc;
  --app-planned: #5c589b;
  --app-planned-background: #ebeafa;
  --app-planned-border: #bbb7dd;
  --app-active: #2f7d78;
  --app-backdrop: rgba(16, 44, 46, .54);
  --app-toast-background: #183d3f;
  --app-toast-text: #ffffff;
  --app-shadow: 0 18px 50px rgba(27, 58, 58, .08);
  --app-shadow-small: 0 8px 24px rgba(27, 58, 58, .07);
  --app-modal-shadow: 0 30px 90px rgba(11, 38, 40, .28);
  --architecture-scene-background: #10222c;
  --architecture-scene-grid: #2b4855;
  --architecture-scene-label: #e5eff2;
  --architecture-scene-muted: #bad0d7;
  /* Legacy names point to semantic tokens, independent of the selected accent. */
  --paper: var(--app-background);
  --surface: var(--app-surface);
  --ink: var(--app-text);
  --muted: var(--app-text-muted);
  --line: var(--app-border);
  --sidebar: var(--app-sidebar);
  --sidebar-deep: var(--app-sidebar-deep);
  --teal: var(--app-accent);
  --teal-bright: var(--app-accent-bright);
  --teal-soft: var(--app-accent-soft);
  --coral: var(--app-danger);
  --coral-soft: var(--app-danger-background);
  --danger: var(--app-danger);
  --gold: var(--app-warning-dot);
  --gold-soft: var(--app-warning-background);
  --indigo: var(--app-planned);
  --indigo-soft: var(--app-planned-background);
  --shadow: var(--app-shadow);
  --shadow-small: var(--app-shadow-small);
}

:root[data-theme="blue-light"] {
  --app-background: #f1f5fc;
  --app-surface: #ffffff;
  --app-surface-muted: #f4f7fd;
  --app-surface-hover: #e9f0fc;
  --app-column: #e7eef9;
  --app-text: #203653;
  --app-text-muted: #526580;
  --app-border: #d2deef;
  --app-border-strong: #8ca7cc;
  --app-accent: #2858bd;
  --app-accent-hover: #20479a;
  --app-accent-bright: #4b86dc;
  --app-accent-soft: #e4edff;
  --app-focus: #2858bd;
  --app-page-glow: rgba(73, 126, 222, .08);
  --app-topbar: rgba(241, 245, 252, .97);
  --app-sidebar: #eaf0fe;
  --app-sidebar-deep: #e1e9fa;
  --app-sidebar-text: #243d65;
  --app-sidebar-muted: #496080;
  --app-sidebar-highlight: #2858bd;
  --app-sidebar-active: #ffffff;
  --app-sidebar-hover: #f4f7ff;
  --app-sidebar-panel: rgba(255, 255, 255, .58);
  --app-sidebar-border: #c4d2ec;
  --app-sidebar-glow: rgba(124, 165, 237, .16);
  --app-hero-start: #22478a;
  --app-hero-middle: #2858ab;
  --app-hero-end: #2d65ad;
  --app-hero-muted: #e1ecff;
  --app-hero-accent: #cadfff;
  --app-hero-glow: rgba(140, 195, 255, .25);
  --app-hero-ring: #2856a4;
  --app-code-background: #203653;
  --app-code-text: #e0eaff;
  --app-success: #256548;
  --app-success-background: #e4f2e9;
  --app-warning: #835919;
  --app-warning-background: #fff2d9;
  --app-danger: #a33c42;
  --app-danger-background: #fce9eb;
  --app-danger-border: #ddb0b3;
  --app-info: #2858a0;
  --app-info-background: #e7effc;
  --app-info-border: #acc5e8;
  --app-planned: #66529b;
  --app-planned-background: #efeafb;
  --app-active: #2858bd;
  --app-backdrop: rgba(29, 49, 82, .48);
  --app-toast-background: #213f72;
  --app-shadow: 0 14px 36px rgba(39, 74, 130, .09);
  --app-shadow-small: 0 3px 12px rgba(39, 74, 130, .06);
  --app-modal-shadow: 0 30px 90px rgba(24, 46, 85, .23);
  --architecture-scene-background: #eaf0fb;
  --architecture-scene-grid: #c8d5ec;
  --architecture-scene-label: #203653;
  --architecture-scene-muted: #51637f;
}

:root[data-theme="graphite-dark"] {
  --app-background: #10131c;
  --app-surface: #1c2130;
  --app-surface-muted: #242b3c;
  --app-surface-hover: #2d3549;
  --app-column: #161c29;
  --app-text: #edf0fa;
  --app-text-muted: #afb9cc;
  --app-border: #3a4357;
  --app-border-strong: #70809d;
  --app-accent: #b0a0ff;
  --app-accent-hover: #c4b7ff;
  --app-accent-bright: #91b4ff;
  --app-accent-soft: #332b50;
  --app-accent-contrast: #20143f;
  --app-focus: #c4b7ff;
  --app-page-glow: rgba(114, 91, 199, .09);
  --app-topbar: rgba(16, 19, 28, .97);
  --app-sidebar: #151927;
  --app-sidebar-deep: #0e111a;
  --app-sidebar-text: #f1efff;
  --app-sidebar-muted: #a9b3c9;
  --app-sidebar-highlight: #c1b2ff;
  --app-sidebar-active: #2b3149;
  --app-sidebar-hover: #22293b;
  --app-sidebar-panel: #1b2130;
  --app-sidebar-border: #353e54;
  --app-sidebar-glow: rgba(116, 102, 193, .13);
  --app-hero-start: #30254c;
  --app-hero-middle: #303055;
  --app-hero-end: #263862;
  --app-hero-text: #f6f3ff;
  --app-hero-muted: #d6d8ef;
  --app-hero-accent: #d0c4ff;
  --app-hero-glow: rgba(151, 133, 236, .16);
  --app-hero-ring: #303055;
  --app-hero-ring-track: #535371;
  --app-hero-panel: rgba(199, 194, 255, .07);
  --app-code-background: #111725;
  --app-code-text: #d8e2fa;
  --app-success: #8dd9b1;
  --app-success-background: #203b31;
  --app-success-border: #427b60;
  --app-success-dot: #81cfa7;
  --app-warning: #f1c97a;
  --app-warning-background: #40351f;
  --app-warning-border: #8c7038;
  --app-warning-dot: #e7bb64;
  --app-danger: #ffb1ae;
  --app-danger-background: #46272c;
  --app-danger-border: #9b6262;
  --app-danger-dot: #f19b98;
  --app-info: #a8c7ff;
  --app-info-background: #243953;
  --app-info-border: #52769f;
  --app-planned: #c4b7ff;
  --app-planned-background: #332b50;
  --app-planned-border: #796aa3;
  --app-active: #94b8ff;
  --app-backdrop: rgba(3, 6, 15, .75);
  --app-toast-background: #34314f;
  --app-toast-text: #f5f0ff;
  --app-shadow: 0 18px 50px rgba(0, 0, 0, .25);
  --app-shadow-small: 0 8px 24px rgba(0, 0, 0, .16);
  --app-modal-shadow: 0 30px 90px rgba(0, 0, 0, .55);
  --architecture-scene-background: #141924;
  --architecture-scene-grid: #303953;
  --architecture-scene-label: #edf0fa;
  --architecture-scene-muted: #afb9cc;
}

:root[data-theme="warm-paper"] {
  --app-background: #f5edde;
  --app-surface: #fffaf0;
  --app-surface-muted: #f7efdf;
  --app-surface-hover: #efe2cd;
  --app-column: #ede2ce;
  --app-text: #392e23;
  --app-text-muted: #705e48;
  --app-border: #ded0b8;
  --app-border-strong: #ac9573;
  --app-accent: #a2492c;
  --app-accent-hover: #81381e;
  --app-accent-bright: #c77a53;
  --app-accent-soft: #f3dfcf;
  --app-focus: #a2492c;
  --app-page-glow: rgba(180, 121, 53, .07);
  --app-topbar: rgba(245, 237, 222, .97);
  --app-sidebar: #ebe0cb;
  --app-sidebar-deep: #e2d5bd;
  --app-sidebar-text: #594331;
  --app-sidebar-muted: #6c563d;
  --app-sidebar-highlight: #a2492c;
  --app-sidebar-active: #fff5e4;
  --app-sidebar-hover: #f6ebd7;
  --app-sidebar-panel: rgba(255, 250, 236, .56);
  --app-sidebar-border: #cdbb9d;
  --app-sidebar-glow: rgba(202, 153, 98, .17);
  --app-hero-start: #713923;
  --app-hero-middle: #86462f;
  --app-hero-end: #97553a;
  --app-hero-muted: #ffe7d4;
  --app-hero-accent: #ffe0ae;
  --app-hero-glow: rgba(252, 185, 112, .17);
  --app-hero-ring: #88492f;
  --app-code-background: #3c342a;
  --app-code-text: #f0e4cd;
  --app-success: #486139;
  --app-success-background: #eaf0db;
  --app-success-border: #a9bb8a;
  --app-success-dot: #768d55;
  --app-warning: #805719;
  --app-warning-background: #faedcd;
  --app-warning-border: #d2b779;
  --app-warning-dot: #b88832;
  --app-danger: #a03e37;
  --app-danger-background: #f8e0d8;
  --app-danger-border: #d5a191;
  --app-danger-dot: #c36654;
  --app-info: #416574;
  --app-info-background: #e4eded;
  --app-info-border: #aac0c2;
  --app-planned: #6c5580;
  --app-planned-background: #eee3f0;
  --app-planned-border: #c3aecb;
  --app-active: #416574;
  --app-backdrop: rgba(58, 43, 28, .52);
  --app-toast-background: #67452e;
  --app-shadow: 0 18px 42px rgba(90, 62, 33, .10);
  --app-shadow-small: 0 5px 18px rgba(90, 62, 33, .075);
  --app-modal-shadow: 0 30px 90px rgba(63, 43, 22, .27);
  --architecture-scene-background: #eee3ce;
  --architecture-scene-grid: #d1c0a5;
  --architecture-scene-label: #4a3828;
  --architecture-scene-muted: #76654e;
}

/* Page, navigation and shared controls. No size/overflow overrides here. */
body { color: var(--app-text); background: radial-gradient(circle at 80% 0, var(--app-page-glow), transparent 32rem), var(--app-background); }
.sidebar { color: var(--app-sidebar-muted); background: radial-gradient(circle at 15% 7%, var(--app-sidebar-glow), transparent 13rem), linear-gradient(180deg, var(--app-sidebar), var(--app-sidebar-deep)); box-shadow: var(--app-shadow-small); }
.sidebar .brand strong, .agent-mini-head { color: var(--app-sidebar-text); }
.sidebar .brand > div:last-child span, .agent-mini-card p, .sidebar-footer, .sidebar-footer strong { color: var(--app-sidebar-muted); }
.brand-mark { border-color: var(--app-sidebar-border); background: var(--app-sidebar-panel); }
.brand-mark span { background: var(--app-sidebar-highlight); }
.brand-mark span:nth-child(2) { background: var(--app-warning-dot); }
.nav-item { color: var(--app-sidebar-muted); }
.nav-item:hover { color: var(--app-sidebar-text); background: var(--app-sidebar-hover); }
.nav-item.is-active { color: var(--app-sidebar-text); background: var(--app-sidebar-active); box-shadow: inset 3px 0 var(--app-sidebar-highlight); }
.nav-item em { color: var(--app-sidebar-text); background: var(--app-sidebar-panel); }
.appearance-settings-button[aria-expanded="true"] { color: var(--app-sidebar-text); background: var(--app-sidebar-active); }
.agent-mini-card { border-color: var(--app-sidebar-border); background: var(--app-sidebar-panel); }
.agent-mini-card .text-button { color: var(--app-sidebar-highlight); }
.topbar { background: var(--app-topbar); }
.search-box, .project-filter-wrap select, .button-ghost { color: var(--app-text); border-color: var(--app-border); background: var(--app-surface); }
.search-box svg, .search-box input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--app-text-muted); opacity: 1; }
.search-box kbd { color: var(--app-text-muted); border-color: var(--app-border); background: var(--app-surface-muted); }
.search-box:focus-within { border-color: var(--app-focus); background: var(--app-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-focus) 17%, transparent); }
.button-primary { color: var(--app-accent-contrast); background: var(--app-accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--app-accent) 16%, transparent); }
.button-primary:hover { background: var(--app-accent-hover); }
.button-ghost:hover { border-color: var(--app-border-strong); background: var(--app-surface-hover); }
.button-danger { color: var(--app-danger); border-color: var(--app-danger-border); background: var(--app-danger-background); }
.button-light { color: var(--app-hero-start); background: #ffffff; }
.button-link { color: var(--app-hero-muted); }
button:disabled { opacity: .58; }
.icon-button, .project-menu-button { color: var(--app-text-muted); }
.icon-button:hover, .project-menu-button:hover { color: var(--app-text); background: var(--app-surface-hover); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, .task-card:focus-visible, summary:focus-visible { outline: 3px solid var(--app-focus); outline-offset: 2px; }
.sidebar button:focus-visible { outline-color: var(--app-sidebar-highlight); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--app-accent); }
.field input, .field select, .field textarea { color: var(--app-text); border-color: var(--app-border); background: var(--app-surface-muted); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--app-focus); background: var(--app-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-focus) 17%, transparent); }
.field > span { color: var(--app-text-muted); }
.field-hint, .dispatch-pill { background: var(--app-accent-soft); }

/* Overview and control. */
.overview-hero, .agents-hero { color: var(--app-hero-text); background: radial-gradient(circle at 92% 20%, var(--app-hero-glow), transparent 17rem), linear-gradient(120deg, var(--app-hero-start), var(--app-hero-middle) 70%, var(--app-hero-end)); box-shadow: var(--app-shadow); }
.hero-copy .section-kicker, .agents-hero .section-kicker { color: var(--app-hero-accent); }
.hero-copy > p:not(.section-kicker), .agents-hero > div:first-child > p:last-child, .progress-orbit span { color: var(--app-hero-muted); }
.agents-hero code { color: var(--app-hero-text); }
.progress-orbit { background: conic-gradient(var(--app-hero-accent) var(--progress), var(--app-hero-ring-track) 0); }
.progress-orbit::before { background: var(--app-hero-ring); }
.stat-card, .hierarchy-task, .gate-row, .timeline-summary-card, .timeline-panel, .activity-panel, .modal, .form-section, .architecture-stage-panel, .lsm-card { color: var(--app-text); border-color: var(--app-border); background: var(--app-surface); }
.controller-kpi { background: linear-gradient(145deg, var(--app-surface), var(--app-surface-muted)); }
.hierarchy-project, .hierarchy-node, .critical-step, .sprint-card, .agent-event { border-color: var(--app-border); background: var(--app-surface-muted); }
.hierarchy-project > ul, .hierarchy-node > ul { border-color: var(--app-border); }
.hierarchy-task.is-blocked { border-color: var(--app-danger-border); background: var(--app-danger-background); }
.blocker-text { color: var(--app-danger) !important; }
.node-kind { color: var(--app-text-muted); background: var(--app-column); }
.hierarchy-progress i, .progress-track { background: var(--app-column); }
.hierarchy-progress b { background: linear-gradient(90deg, var(--app-accent), var(--app-accent-bright)); }
.critical-step > span { color: var(--app-accent-contrast); background: var(--app-accent); }
.project-progress-row, .project-card-foot, .stat-card em, .compact-task span, .control-item span { color: var(--app-text-muted); }
.project-card-foot, .compact-task, .control-item { border-color: var(--app-border); }
.compact-task:hover, .control-item:hover, .timeline-row:hover { background: var(--app-surface-hover); }
.task-date { color: var(--app-text-muted); background: var(--app-surface-muted); }
.task-date.is-overdue { color: var(--app-danger); background: var(--app-danger-background); }
.empty-state, .kanban-empty { color: var(--app-text-muted); border-color: var(--app-border-strong); background: var(--app-surface-muted); }

/* Status colors remain meaningful in every theme. */
.gate-pending, .gate-row-pending .gate-status, .architecture-badge.status-warning, .architecture-badge.status-stale { color: var(--app-warning); background: var(--app-warning-background); }
.gate-go, .gate-row-go .gate-status, .architecture-badge.status-healthy { color: var(--app-success); background: var(--app-success-background); }
.gate-no_go, .gate-row-no_go .gate-status, .architecture-badge.status-blocked { color: var(--app-danger); background: var(--app-danger-background); }
.architecture-badge.status-planned { color: var(--app-planned); background: var(--app-planned-background); }
.gate-indicator { background: var(--app-warning-dot); }
.gate-row-go .gate-indicator { background: var(--app-success-dot); }
.gate-row-no_go .gate-indicator { background: var(--app-danger-dot); }
.stat-card-review .stat-icon, .control-icon, .task-kind.milestone { color: var(--app-warning); background: var(--app-warning-background); }
.panel-badge-warm, .control-icon.risk { color: var(--app-danger); background: var(--app-danger-background); }
.priority-pill.high { color: var(--app-warning); }
.priority-pill.critical { color: var(--app-danger); }
.status-dot { background: var(--app-warning-dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-warning-dot) 16%, transparent); }
.status-dot.is-online, .pulse { background: var(--app-success-dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-success-dot) 16%, transparent); }
.architecture-notice.is-error, .architecture-form-error, .auth-error { color: var(--app-danger); }

/* Kanban, dates and activity. Project identity colors are preserved. */
.kanban-board { scrollbar-color: var(--app-border-strong) transparent; }
.kanban-column { border-color: var(--app-border); background: var(--app-column); }
.kanban-column.is-drag-over { border-color: var(--app-accent); background: var(--app-accent-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-accent) 18%, transparent); }
.kanban-column[data-status="backlog"] .column-dot { background: var(--app-text-muted); }
.kanban-column[data-status="ready"] .column-dot { background: var(--app-warning-dot); }
.kanban-column[data-status="in_progress"] .column-dot { background: var(--app-active); }
.kanban-column[data-status="review"] .column-dot { background: var(--app-planned); }
.kanban-column[data-status="done"] .column-dot { background: var(--app-success-dot); }
.column-count { color: var(--app-text-muted); background: var(--app-surface); }
.task-card { border-color: var(--app-border); background: var(--app-surface); box-shadow: var(--app-shadow-small); }
.task-card:hover { border-color: var(--app-border-strong); box-shadow: var(--app-shadow); }
.task-kind, .task-tags span { color: var(--app-text-muted); background: var(--app-surface-muted); }
.task-kind.risk { color: var(--app-danger); background: var(--app-danger-background); }
.priority-pill, .task-card-project, .task-card-foot { color: var(--app-text-muted); }
.task-card-foot { border-color: var(--app-border); }
.task-move-button, .copy-button { color: var(--app-accent); border-color: var(--app-border); background: var(--app-surface-muted); }
.task-move-button:hover, .copy-button:hover { border-color: var(--app-accent); background: var(--app-accent-soft); }
.assignee-avatar { border-color: var(--app-surface); }
.timeline-head { color: var(--app-text-muted); background: var(--app-surface-muted); }
.timeline-row, .timeline-track-wrap, .activity-item { border-color: var(--app-border); }
.timeline-track-wrap { background-image: linear-gradient(90deg, var(--app-border) 1px, transparent 1px); }
.timeline-task-name span, .activity-content span, .activity-time, .agent-event span, .agent-event time { color: var(--app-text-muted); }

/* Agent instructions, modals and login. */
.api-status-card { color: var(--app-hero-text); border-color: var(--app-hero-ring-track); background: var(--app-hero-panel); }
.api-status-card small, .api-status-card code { color: var(--app-hero-muted); }
.api-status-card code { border-color: var(--app-hero-ring-track); }
.command-panel pre { color: var(--app-code-text); background: var(--app-code-background); scrollbar-color: var(--app-border-strong) transparent; }
.modal { box-shadow: var(--app-modal-shadow); }
.modal::backdrop, .appearance-dialog::backdrop { background: var(--app-backdrop); backdrop-filter: blur(4px); }
.modal-actions { border-color: var(--app-border); background: var(--app-surface); }
.auth-gate { background: radial-gradient(circle at 20% 10%, var(--app-sidebar-glow), transparent 34%), linear-gradient(145deg, var(--app-sidebar-deep), var(--app-sidebar)); }
.auth-card { color: var(--app-text); border-color: var(--app-border); background: var(--app-surface); box-shadow: var(--app-modal-shadow); }
.auth-brand, .auth-card h1, .auth-brand strong { color: var(--app-text); }
.auth-brand > div:last-child span, .auth-description { color: var(--app-text-muted); }
.auth-brand .brand-mark { border-color: var(--app-border); background: var(--app-accent-soft); }
.auth-brand .brand-mark span { background: var(--app-accent); }
.auth-brand .brand-mark span:nth-child(2) { background: var(--app-warning-dot); }
.toast { color: var(--app-toast-text); background: var(--app-toast-background); box-shadow: var(--app-shadow); }
.toast.error { color: var(--app-danger); background: var(--app-danger-background); box-shadow: inset 0 0 0 1px var(--app-danger-border), var(--app-shadow); }

/* Architecture panel colors; canvas uses the matching appearance.js palette. */
.architecture-mode { border-color: var(--app-border); background: var(--app-column); }
.architecture-mode button { color: var(--app-text-muted); }
.architecture-mode button[aria-pressed="true"] { color: var(--app-accent-contrast); background: var(--app-accent); box-shadow: var(--app-shadow-small); }
.architecture-stage { background: radial-gradient(ellipse at 44% 30%, var(--architecture-scene-grid), var(--architecture-scene-background) 75%); }
.architecture-scene, .architecture-canvas-host { background-color: var(--architecture-scene-background); }
.architecture-stage-message { color: var(--architecture-scene-muted); }
.architecture-camera-controls button { color: var(--app-text); border-color: var(--app-border); background: var(--app-surface-muted); }
.architecture-camera-controls button[aria-pressed="true"] { color: var(--app-accent); border-color: var(--app-accent); background: var(--app-accent-soft); }
.architecture-legend { border-color: var(--app-border); background: var(--app-surface-muted); }
.architecture-legend span { color: var(--app-text-muted); }
.architecture-legend i { background: var(--app-text-muted); }
.architecture-legend .status-healthy { background: var(--app-success-dot); }
.architecture-legend .status-warning { background: var(--app-warning-dot); }
.architecture-legend .status-blocked { background: var(--app-danger-dot); }
.architecture-legend .status-planned { background: var(--app-planned); }
.architecture-node-button { color: var(--app-text); border-color: var(--app-border); background: var(--app-surface-muted); }
.architecture-node-button:hover, .architecture-node-button.is-selected { border-color: var(--app-accent); background: var(--app-accent-soft); }
.architecture-type-icon { color: var(--app-accent); background: var(--app-accent-soft); }
.architecture-badge { color: var(--app-text-muted); background: var(--app-column); }
.architecture-edge-button, .architecture-ref-row, .architecture-task-option { color: var(--app-text); border-color: var(--app-border); background: var(--app-surface-muted); }
.architecture-facts > div, .architecture-detail-section { border-color: var(--app-border); }
.architecture-node-copy small, .architecture-edge-button small, .architecture-facts dt, .architecture-facts small, .architecture-detail-section h3 span, .architecture-linked-task small, .architecture-secret-ref small, .architecture-task-option small { color: var(--app-text-muted); }
.architecture-observation { border-color: var(--app-info-border); background: var(--app-info-background); }
.architecture-observation small { color: var(--app-info); }
.architecture-linked-task button, .architecture-link-pair button { color: var(--app-text); border-color: var(--app-border); background: var(--app-surface-muted); }
.architecture-task-option:has(input:checked) { border-color: var(--app-accent); background: var(--app-accent-soft); }
.architecture-project-shortcut { color: var(--app-accent); border-color: var(--app-border); background: var(--app-accent-soft); }
.architecture-project-shortcut[aria-current="page"] { color: var(--app-accent-contrast); border-color: var(--app-accent); background: var(--app-accent); }

/* Access metadata UI. This layer never reads or changes secret values. */
.lsm-notice:not(:empty) { color: var(--app-text); background: var(--app-accent-soft); }
.lsm-card p, .lsm-card details, .lsm-empty { color: var(--app-text-muted); }
.lsm-pending { color: var(--app-text); border-color: var(--app-warning-border); background: var(--app-warning-background); }
.lsm-pending h3 { color: var(--app-warning); }
.lsm-editor { color: var(--app-text); border-color: var(--app-border-strong); background: var(--app-surface-muted); }

:root[data-theme="warm-paper"] :is(.title-block h1, .hero-copy h2, .section-heading h2, .panel-heading h2, .view-toolbar h2, .agents-hero h2, .modal-head h2, .appearance-heading h2, .architecture-stage-heading h2, .architecture-detail h2, .lsm-header h2) {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -.025em;
}

/* Appearance is a separate native modal. Layout below affects only this UI. */
.appearance-settings-button { min-height: 44px; }
.appearance-dialog {
  width: min(760px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--app-text);
  border: 1px solid var(--app-border);
  border-radius: 24px;
  background: var(--app-surface);
  box-shadow: var(--app-modal-shadow);
  scrollbar-color: var(--app-border-strong) transparent;
}
.appearance-dialog-inner { padding: 24px 26px 0; }
.appearance-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.appearance-heading > div { min-width: 0; }
.appearance-heading .section-kicker { margin: 0 0 6px; }
.appearance-heading h2 { margin: 0; font-size: 27px; line-height: 1.2; letter-spacing: -.035em; }
.appearance-close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--app-text-muted);
  font-size: 28px;
  line-height: 1;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface-muted);
}
.appearance-close:hover { color: var(--app-text); background: var(--app-surface-hover); }
.appearance-intro { margin: 14px 0 20px; color: var(--app-text-muted); font-size: 14px; line-height: 1.6; }
.appearance-choices { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.appearance-choices legend { margin-bottom: 12px; padding: 0; color: var(--app-text); font-size: 13px; font-weight: 750; }
.appearance-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.appearance-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 44px;
  align-content: start;
  gap: 13px;
  padding: 12px;
  color: var(--app-text);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: var(--app-surface-muted);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.appearance-option:hover { border-color: var(--app-border-strong); background: var(--app-surface-hover); }
.appearance-option.is-selected { border-color: var(--app-accent); background: var(--app-accent-soft); box-shadow: inset 0 0 0 1px var(--app-accent); }
.appearance-option:focus-within { outline: 3px solid var(--app-focus); outline-offset: 3px; }
.appearance-option input { position: absolute; z-index: 1; right: 18px; bottom: 56px; width: 19px; height: 19px; margin: 0; accent-color: var(--app-accent); cursor: pointer; }
.appearance-option input:focus-visible { outline: 0; }
.appearance-option-copy { display: block; min-width: 0; padding-right: 28px; }
.appearance-option-copy strong { display: block; font-size: 14px; line-height: 1.45; }
.appearance-option-copy > span { display: block; margin-top: 5px; color: var(--app-text-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.appearance-option-system { grid-column: 1 / -1; grid-template-columns: 126px minmax(0, 1fr); align-items: center; }
.appearance-option-system input { right: 18px; top: 18px; bottom: auto; }
.appearance-option-system .appearance-preview { height: 78px; }
.appearance-preview {
  --preview-background: #f4f5f0;
  --preview-nav: #173b3e;
  --preview-hero: #225c5d;
  --preview-card: #ffffff;
  --preview-line: #6d9190;
  position: relative;
  display: grid;
  grid-template-columns: 21% minmax(0, 1fr);
  height: 104px;
  gap: 9px;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 9px;
  background: var(--preview-background);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
}
.appearance-preview[data-preview-theme="blue-light"] { --preview-background: #f1f5fc; --preview-nav: #dbe6fa; --preview-hero: #2858ab; --preview-line: #6e8abb; }
.appearance-preview[data-preview-theme="graphite-dark"] { --preview-background: #10131c; --preview-nav: #151927; --preview-hero: #45406f; --preview-card: #2b3246; --preview-line: #b0a0ff; }
.appearance-preview[data-preview-theme="warm-paper"] { --preview-background: #f5edde; --preview-nav: #dfcfb3; --preview-hero: #86462f; --preview-card: #fffaf0; --preview-line: #ac7252; }
.appearance-preview[data-preview-theme="system"] {
  --preview-background: linear-gradient(115deg, #f1f5fc 50%, #10131c 50%);
  --preview-nav: #dbe6fa;
  --preview-hero: linear-gradient(115deg, #2858ab 45%, #45406f 45%);
  --preview-card: #97a4c7;
  --preview-line: #7f8cac;
}
.appearance-preview-nav { display: grid; align-content: start; gap: 8px; padding: 14px 8px; background: var(--preview-nav); }
.appearance-preview-nav i { height: 4px; border-radius: 2px; background: var(--preview-line); }
.appearance-preview-nav i:first-child { height: 8px; margin-bottom: 5px; }
.appearance-preview-work { display: grid; grid-template-rows: 6px 1fr 23px; gap: 9px; padding: 10px 10px 10px 0; }
.appearance-preview-top { width: 45%; border-radius: 3px; background: var(--preview-line); }
.appearance-preview-hero { display: grid; align-content: center; gap: 5px; padding: 10px; border-radius: 5px; background: var(--preview-hero); }
.appearance-preview-hero i { width: 55%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .75); }
.appearance-preview-hero i:last-child { width: 75%; opacity: .5; }
.appearance-preview-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.appearance-preview-cards i { border: 1px solid rgba(100, 120, 150, .12); border-radius: 4px; background: var(--preview-card); }
.appearance-storage-note { margin: 17px 0 0; color: var(--app-text-muted); font-size: 12px; line-height: 1.5; }
.appearance-status { min-height: 1.5em; margin: 7px 0 14px; color: var(--app-accent); font-size: 12px; line-height: 1.5; }
.appearance-footer { position: sticky; z-index: 2; bottom: 0; display: flex; justify-content: flex-end; padding: 15px 26px; border-top: 1px solid var(--app-border); background: var(--app-surface); }
.appearance-done { min-width: 112px; min-height: 44px; }

@media (max-width: 900px) {
  .nav-item.is-active { box-shadow: inset 0 -3px var(--app-sidebar-highlight); }
}
@media (max-width: 680px) {
  .nav-item.is-active { box-shadow: inset 0 -2px var(--app-sidebar-highlight); }
}
@media (max-width: 520px) {
  .appearance-dialog { border-radius: 18px; scroll-padding-block: 18px 80px; }
  .appearance-dialog-inner { padding: 20px 16px 0; }
  .appearance-heading h2 { font-size: 24px; }
  .appearance-options { grid-template-columns: minmax(0, 1fr); }
  .appearance-option { padding: 12px; }
  .appearance-option input { top: 14px; right: 14px; bottom: auto; box-shadow: 0 0 0 5px var(--app-surface); border-radius: 50%; }
  .appearance-option.is-selected input { box-shadow: 0 0 0 5px var(--app-accent-soft); }
  .appearance-option-copy { padding-right: 0; }
  .appearance-option-system { grid-template-columns: minmax(0, 1fr); }
  .appearance-option-system .appearance-preview { height: 104px; }
  .appearance-option-system .appearance-option-copy { padding-right: 0; }
  .appearance-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .appearance-done { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .appearance-option { transition: none; }
}
@media (forced-colors: active) {
  .appearance-option.is-selected { border: 2px solid Highlight; }
  .appearance-option:focus-within { outline-color: Highlight; }
}