body[data-theme="dark"] {
  --accent: var(--yellow-400);
  --bg: var(--midnight);
  --panel: #45697a;
  --panel-2: #4f7484;
  --line: #547686;
  --text: var(--white);
  --muted: var(--ocean-400);
  --placeholder: #8fb3b9;
  --danger: var(--peach);
  --danger-strong: var(--watermelon);
  --danger-strong-hover: #d9543f;
  --danger-soft: rgba(255, 163, 122, .16);
  background: var(--bg);
  color: var(--text);
}

body.tree-open { overflow: hidden; }
body.tree-open .app-shell { height: 100dvh; overflow: hidden; pointer-events: none; }

button, textarea, input { font: inherit; }
button { color: inherit; user-select: none; -webkit-user-select: none; }

.app-shell {
  --bg: var(--bg-grey);
  --panel: var(--white);
  --panel-2: var(--panel-grey);
  --line: var(--light-grey-200);
  --text: var(--midnight);
  --muted: var(--midnight-300);
  --placeholder: var(--muted);
  --danger-soft: var(--watermelon-100);
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

.app-shell[data-theme="dark"] {
  --accent: var(--yellow-400);
  --bg: var(--midnight);
  --panel: #45697a;
  --panel-2: #4f7484;
  --line: #547686;
  --text: var(--white);
  --muted: var(--ocean-400);
  --placeholder: #8fb3b9;
  --danger: var(--peach);
  --danger-strong: var(--watermelon);
  --danger-strong-hover: #d9543f;
  --danger-soft: rgba(255, 163, 122, .16);
}