/* Existing page geometry is shared by both appearances. */
:root { --theme-button-text: #090909; --theme-focus: #fff; --theme-error: #ff9f9f; --theme-success: #9ee7c8; --theme-highlight: #1c2030; --theme-highlight-line: #a094ff; }
:root[data-theme="light"] {
  color-scheme: light;
  --product-bg: #fafaf8;
  --product-base: #f1f1ee;
  --product-elevated: #fff;
  --product-hover: #e8e8e4;
  --product-text: #202020;
  --product-secondary: #646461;
  --product-tertiary: #71716c;
  --product-line: #dddcd7;
  --product-line-strong: #a7a7a2;
  --product-accent: #242424;
  --theme-button-text: #fff;
  --theme-focus: #245da6;
  --theme-error: #b4232d;
  --theme-success: #216e40;
  --theme-highlight: #edf3fc;
  --theme-highlight-line: #245da6;
  /* Home and the older inline workspace styles use these names. */
  --bg: var(--product-base);
  --canvas: var(--product-bg);
  --surface: var(--product-elevated);
  --surface-raised: var(--product-base);
  --surface-hover: var(--product-hover);
  --surface-selected: var(--product-hover);
  --ink: var(--product-text);
  --text: var(--product-text);
  --muted: var(--product-secondary);
  --subtle: var(--product-tertiary);
  --line: var(--product-line);
  --panel: var(--product-base);
  --accent: var(--product-accent);
  --accent-soft: var(--theme-focus);
  --positive: var(--theme-success);
  --danger: var(--theme-error);
}
/* The symbol has the same size and click target as the language globe. */
button.theme-control[data-theme-toggle] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--product-secondary, var(--muted, #bcbcbc)); cursor: pointer; }
.theme-control:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.theme-control .theme-symbol { display: block; flex: 0 0 22px; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("/static/icons/theme-moon.png") center / contain no-repeat; mask: url("/static/icons/theme-moon.png") center / contain no-repeat; pointer-events: none; }
:root[data-theme="light"] .theme-control .theme-symbol { -webkit-mask-image: url("/static/icons/theme-sun.png"); mask-image: url("/static/icons/theme-sun.png"); }
.reading-ui .sidebar-foot button.theme-control[data-theme-toggle] { width: 44px; min-width: 44px; height: 44px; padding: 0; margin: 0 0 8px; justify-content: center; }
.reading-ui .sidebar-foot button.theme-control[data-theme-toggle] .theme-symbol { display: block; flex-basis: 20px; width: 20px; height: 20px; }
html[data-theme="light"] .account-ui button.theme-control[data-theme-toggle] { color: var(--product-secondary); background: transparent; }
:root[data-theme="light"] :is(img.brand-mark, img.sidebar-collapsed-logo, .perspective-link img, .rhythm-insight img, .thinking-mobius-static image) { filter: invert(1); }
:root[data-theme="light"] .thinking-mobius stop { stop-color: var(--product-text); }
:root[data-theme="light"] .thinking-mobius stop[offset=".46"] { stop-color: var(--product-secondary); }

.appearance-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.auth-brand-row { flex-wrap: wrap; }