/* Neutral surfaces; color is reserved for selection, actions, and code semantics. */
:root, :root[data-ui-theme="forest"] {
  --ui-canvas: #101413;
  --ui-page: #141918;
  --ui-inset: #111615;
  --ui-surface: #1b2220;
  --ui-raised: #252d29;
  --ui-border: #34423a;
  --ui-text: #edf0ee;
  --ui-soft-text: #d8dedb;
  --ui-secondary: #adb8b1;
  --ui-muted: #8e9d94;
  --ui-accent: #b8d3c1;
  --ui-accent-hover: #cee2d4;
  --ui-on-accent: #18251e;
  --ui-strong-accent: #769a83;
  --ui-on-strong-accent: #101a14;
  --ui-selected: #253a2f;
  --ui-selected-text: #cee6d6;
  --ui-selected-border: #3f5a49;
  --ui-scheme: dark;
  --ui-danger: #e7aaa3;
  --ui-danger-bg: #3b2829;
  --ui-warning: #dcc08f;
  --ui-warning-bg: #373024;
  --ui-warning-border: #8c774c;
  --ui-positive: #a6d7b6;
  --ui-negative: #e6abb0;
  --ui-positive-bg: #22372b;
  --ui-negative-bg: #3c272d;
  --ui-hunk-bg: #253047;
  --ui-syntax-string: #a7c9ac;
  --ui-syntax-keyword: #aac4e6;
  --ui-syntax-operator: #cab5dc;
  --ui-syntax-number: #d9b891;
  --ui-syntax-function: #ddc7a5;
  --ui-link: #b8d3c1;
}
:root[data-ui-theme="lunar"] {
  --ui-canvas: #111215;
  --ui-page: #17181c;
  --ui-inset: #141519;
  --ui-surface: #1e2025;
  --ui-raised: #282b32;
  --ui-border: #353942;
  --ui-text: #edeef1;
  --ui-soft-text: #d4d7df;
  --ui-secondary: #aeb3c0;
  --ui-muted: #8a919f;
  --ui-accent: #bacbf3;
  --ui-accent-hover: #d2ddf8;
  --ui-on-accent: #202943;
  --ui-strong-accent: #8fa6d8;
  --ui-on-strong-accent: #131d32;
  --ui-selected: #282f40;
  --ui-selected-text: #c5d5fa;
  --ui-selected-border: #414d68;
  --ui-scheme: dark;
  --ui-danger: #e7aaa3;
  --ui-danger-bg: #3b2829;
  --ui-warning: #dcc08f;
  --ui-warning-bg: #373024;
  --ui-warning-border: #8c774c;
  --ui-positive: #a6d7b6;
  --ui-negative: #e6abb0;
  --ui-positive-bg: #22372b;
  --ui-negative-bg: #3c272d;
  --ui-hunk-bg: #253047;
  --ui-syntax-string: #a7c9ac;
  --ui-syntax-keyword: #aac4e6;
  --ui-syntax-operator: #cab5dc;
  --ui-syntax-number: #d9b891;
  --ui-syntax-function: #ddc7a5;
  --ui-link: #bacbf3;
}
:root[data-ui-theme="dusk"] {
  --ui-canvas: #151315;
  --ui-page: #1c191d;
  --ui-inset: #18151a;
  --ui-surface: #252127;
  --ui-raised: #302a33;
  --ui-border: #423847;
  --ui-text: #f0edf2;
  --ui-soft-text: #dbd5df;
  --ui-secondary: #b8adbf;
  --ui-muted: #9c8ea5;
  --ui-accent: #cfb7e0;
  --ui-accent-hover: #e0cee9;
  --ui-on-accent: #32223d;
  --ui-strong-accent: #b495c7;
  --ui-on-strong-accent: #24162d;
  --ui-selected: #362a3f;
  --ui-selected-text: #e0c5f1;
  --ui-selected-border: #584364;
  --ui-scheme: dark;
  --ui-danger: #e7aaa3;
  --ui-danger-bg: #3b2829;
  --ui-warning: #dcc08f;
  --ui-warning-bg: #373024;
  --ui-warning-border: #8c774c;
  --ui-positive: #a6d7b6;
  --ui-negative: #e6abb0;
  --ui-positive-bg: #22372b;
  --ui-negative-bg: #3c272d;
  --ui-hunk-bg: #253047;
  --ui-syntax-string: #a7c9ac;
  --ui-syntax-keyword: #aac4e6;
  --ui-syntax-operator: #cab5dc;
  --ui-syntax-number: #d9b891;
  --ui-syntax-function: #ddc7a5;
  --ui-link: #cfb7e0;
}
:root[data-ui-theme="paper"] {
  --ui-canvas: #efeeeb;
  --ui-page: #faf9f6;
  --ui-inset: #f3f2ef;
  --ui-surface: #ffffff;
  --ui-raised: #eeede9;
  --ui-border: #dddcd7;
  --ui-text: #292a2d;
  --ui-soft-text: #3f4145;
  --ui-secondary: #66686d;
  --ui-muted: #787a7f;
  --ui-accent: #2e343e;
  --ui-accent-hover: #454c59;
  --ui-on-accent: #ffffff;
  --ui-strong-accent: #39475e;
  --ui-on-strong-accent: #ffffff;
  --ui-selected: #e9edf6;
  --ui-selected-text: #385987;
  --ui-selected-border: #cfd8e7;
  --ui-scheme: light;
  --ui-danger: #a24642;
  --ui-danger-bg: #f9e9e6;
  --ui-warning: #8a6628;
  --ui-warning-bg: #f7efde;
  --ui-warning-border: #c9ad78;
  --ui-positive: #316b46;
  --ui-negative: #a1474b;
  --ui-positive-bg: #e8f2e9;
  --ui-negative-bg: #f8e7e7;
  --ui-hunk-bg: #eaf0f9;
  --ui-syntax-string: #46734c;
  --ui-syntax-keyword: #466c9b;
  --ui-syntax-operator: #845f99;
  --ui-syntax-number: #986c37;
  --ui-syntax-function: #926332;
  --ui-link: #456794;
}

/* Quieter boundaries and compact chrome across the actual PWA. */
a { color: var(--ui-link); }
.app-header { border-bottom-color: var(--ui-raised); }
.app-header .brand { color: var(--ui-text); }
.agent-tabs { background: var(--ui-page); border-bottom-color: var(--ui-raised); }
.agent-tabs button.is-active { border-color: transparent; }
.project-tabs button[aria-current] { border-color: transparent; }
.directory-sessions { border-left-color: var(--ui-raised); }
.task-card { border-color: var(--ui-raised); border-radius: 12px; }
.task-card strong { font-weight: 550; }
.task-card:hover { border-color: var(--ui-border); }
.directory-toggle, .catalog-more { border-color: var(--ui-raised); }
:root[data-ui-theme="paper"] .agent-tab-icon.is-image.is-invert img { filter: none; }
.appearance-trigger { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.appearance-backdrop { position:fixed; inset:0; z-index:110; background:rgb(0 0 0 / 26%); }
.appearance-panel { position:absolute; top:calc(env(safe-area-inset-top) + 62px); right:max(14px, calc((100vw - 900px) / 2 + 14px)); width:340px; max-width:calc(100vw - 24px); padding:20px; border:1px solid var(--ui-border); border-radius:18px; background:var(--ui-surface); box-shadow:0 14px 50px rgb(0 0 0 / 20%); }
.appearance-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.appearance-heading strong { font-size:15px; font-weight:600; color:var(--ui-text); }
.appearance-heading p { color:var(--ui-muted); margin:5px 0 0; font-size:11px; }
.appearance-heading button { min-height:32px; width:32px; padding:0; border:0; background:transparent; color:var(--ui-muted); font-size:23px; line-height:1; }
.appearance-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.appearance-option { position:relative; display:grid; gap:10px; padding:8px; border:1px solid var(--ui-raised); border-radius:12px; cursor:pointer; }
.appearance-option[data-selected="true"] { border-color:var(--ui-accent); }
.appearance-option:focus-within { outline:2px solid var(--ui-accent); outline-offset:3px; }
.appearance-option input { position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0; padding:0; opacity:0; cursor:pointer; z-index:1; }
.appearance-preview { position:relative; display:grid; align-content:start; gap:5px; height:78px; border-radius:6px; background:var(--preview-bg); padding:12px 10px; overflow:hidden; }
.appearance-preview i { height:4px; width:40%; background:var(--preview-accent); border-radius:3px; margin-bottom:5px; }
.appearance-preview b { display:block; height:13px; border-radius:3px; background:var(--preview-card); }
.appearance-preview em { position:absolute; bottom:10px; right:10px; width:17px; height:6px; background:var(--preview-accent); border-radius:3px; }
.appearance-option-name { display:flex; align-items:center; justify-content:space-between; gap:4px; color:var(--ui-secondary); font-size:11px; padding:1px 2px 3px; }
.appearance-check { color:var(--ui-text); min-width:10px; }
@media(max-width:560px) { .appearance-panel { top:auto; right:12px; bottom:calc(16px + env(safe-area-inset-bottom)); width:calc(100vw - 24px); max-width:380px; } }