/* Appearance overrides stay isolated from feature styles; each app surface stores its own preference. */
html[data-theme-scope="workspace"][data-theme="dark"] {
  color-scheme: dark;
  color: #eee8dc;
  background: #171916;
}
html[data-theme-scope="workspace"][data-theme="dark"] body {
  background: linear-gradient(145deg, #20231f, #171916 62%, #1b201b);
  color: #eee8dc;
}
html[data-theme-scope="workspace"][data-theme="dark"] .sidebar,
html[data-theme-scope="workspace"][data-theme="dark"] .topbar { background: #20231f; border-color: #393f37; color: #c2cbbb; }
html[data-theme-scope="workspace"][data-theme="dark"] .brand,
html[data-theme-scope="workspace"][data-theme="dark"] .topbar strong,
html[data-theme-scope="workspace"][data-theme="dark"] .page-head h1,
html[data-theme-scope="workspace"][data-theme="dark"] .panel-head h2 { color: #e8eadf; }
html[data-theme-scope="workspace"][data-theme="dark"] .metric,
html[data-theme-scope="workspace"][data-theme="dark"] .panel { background: #222520; border-color: #3c433a; box-shadow: 0 5px 20px #0003; }
html[data-theme-scope="workspace"][data-theme="dark"] .metric-value { color: #b7d0b7; }
html[data-theme-scope="workspace"][data-theme="dark"] .metric-top,
html[data-theme-scope="workspace"][data-theme="dark"] .metric .muted,
html[data-theme-scope="workspace"][data-theme="dark"] .page-head p,
html[data-theme-scope="workspace"][data-theme="dark"] .muted,
html[data-theme-scope="workspace"][data-theme="dark"] .small-note,
html[data-theme-scope="workspace"][data-theme="dark"] .hint { color: #a8b1a4; }
html[data-theme-scope="workspace"][data-theme="dark"] .nav button { color: #bac4b8; }
html[data-theme-scope="workspace"][data-theme="dark"] .nav button.active { background: #334238; color: #d3e4cc; border-color: #435649; }
html[data-theme-scope="workspace"][data-theme="dark"] .workspace-note,
html[data-theme-scope="workspace"][data-theme="dark"] .banner,
html[data-theme-scope="workspace"][data-theme="dark"] .outcome { background: #2b3028; border-color: #454d40; color: #c2cbae; }
html[data-theme-scope="workspace"][data-theme="dark"] input,
html[data-theme-scope="workspace"][data-theme="dark"] select,
html[data-theme-scope="workspace"][data-theme="dark"] textarea,
html[data-theme-scope="workspace"][data-theme="dark"] dialog { background: #1b1e1a; color: #e8eadf; border-color: #485046; }
html[data-theme-scope="workspace"][data-theme="dark"] th { background: #2b3029; color: #c8d1c4; }
html[data-theme-scope="workspace"][data-theme="dark"] td,
html[data-theme-scope="workspace"][data-theme="dark"] .account-footer,
html[data-theme-scope="workspace"][data-theme="dark"] .user-card { border-color: #3c433a; }
html[data-theme-scope="workspace"][data-theme="dark"] .account,
html[data-theme-scope="workspace"][data-theme="dark"] .studio-credit-strip { background: #252923; border-color: #414a3f; color: #dce3d6; }
html[data-theme-scope="workspace"][data-theme="dark"] .account-title,
html[data-theme-scope="workspace"][data-theme="dark"] .studio-credit-strip strong { color: #d2e3ce; }
html[data-theme-scope="workspace"][data-theme="dark"] a { color: #b6d6b5; }
html[data-theme-scope="workspace"][data-theme="dark"] .btn.secondary { background: #313a32; color: #d3e1d0; border-color: #4a594b; }
html[data-theme-scope="workspace"][data-theme="dark"] .btn.plain { color: #c0cbbd; }
html[data-theme-scope="workspace"][data-theme="dark"] .form-stack .dialog-check { background: #2b3029; color: #d3ddce; }

html[data-theme-scope="desktop"][data-theme="light"] { color-scheme: light; color: #284d3d; background: #eef3eb; }
html[data-theme-scope="desktop"][data-theme="light"] body { background: #eef3eb; color: #284d3d; }
html[data-theme-scope="desktop"][data-theme="light"] .brandbar { background: #f6f8f2; color: #284d3d; border-color: #d7e3d4; }
html[data-theme-scope="desktop"][data-theme="light"] .brandbar small,
html[data-theme-scope="desktop"][data-theme="light"] .brandbar>span { color: #68816d; }
html[data-theme-scope="desktop"][data-theme="light"] .brandbar button { color: #41654c; border-color: #d2dfd0; }
html[data-theme-scope="desktop"][data-theme="light"] #sidebar { background: #e4ece1; color: #49654f; border-color: #d3dfd0; }
html[data-theme-scope="desktop"][data-theme="light"] .sidebar-top button,
html[data-theme-scope="desktop"][data-theme="light"] .sidebar-accounts>button { color: #49654f; }
html[data-theme-scope="desktop"][data-theme="light"] .sidebar-top button.selected { background: #d2e2cc; color: #294f3a; }
html[data-theme-scope="desktop"][data-theme="light"] .account-row { color: #35543e; }
html[data-theme-scope="desktop"][data-theme="light"] .account-row:hover,
html[data-theme-scope="desktop"][data-theme="light"] .account-row.active { background: #d3e2d0; }
html[data-theme-scope="desktop"][data-theme="light"] .account-row.active { box-shadow: inset 3px 0 #5e8a66; }
html[data-theme-scope="desktop"][data-theme="light"] .controls { background: #f7f9f4; border-color: #d8e3d4; color: #385842; }
html[data-theme-scope="desktop"][data-theme="light"] .control-row select,
html[data-theme-scope="desktop"][data-theme="light"] .provider { background: #fff; border-color: #d7e1d2; color: #436449; }
html[data-theme-scope="desktop"][data-theme="light"] #welcome { background: radial-gradient(ellipse at top,#f4f8e8,#edf3ec); }
html[data-theme-scope="desktop"][data-theme="light"] .center-heading h1,
html[data-theme-scope="desktop"][data-theme="light"] .section-heading h2 { color: #284d3d; }
html[data-theme-scope="desktop"][data-theme="light"] .center-heading p,
html[data-theme-scope="desktop"][data-theme="light"] .fine,
html[data-theme-scope="desktop"][data-theme="light"] .section-heading small { color: #7a8e7c; }
html[data-theme-scope="desktop"][data-theme="light"] .quota,
html[data-theme-scope="desktop"][data-theme="light"] .platform-card,
html[data-theme-scope="desktop"][data-theme="light"] .saved-account { background: #fff; border-color: #dce5d7; color: #284d3d; }
html[data-theme-scope="desktop"][data-theme="light"] .quota strong { color: #245b47; }
html[data-theme-scope="desktop"][data-theme="light"] .note { background: #f8f4df; color: #977f41; border-color: #e8e3c7; }
html[data-theme-scope="desktop"][data-theme="light"] dialog { background: #fff; color: #284d3d; border-color: #d6e2d0; box-shadow: 0 20px 70px #123c3433; }
html[data-theme-scope="desktop"][data-theme="light"] dialog::backdrop { background: #123c3466; }
html[data-theme-scope="desktop"][data-theme="light"] dialog label,
html[data-theme-scope="desktop"][data-theme="light"] dialog p { color: #536f59; }
html[data-theme-scope="desktop"][data-theme="light"] dialog input,
html[data-theme-scope="desktop"][data-theme="light"] dialog select { background: #fff; border-color: #d6e2d0; color: #284d3d; }
html[data-theme-scope="desktop"][data-theme="light"] #pet-companion { background: #ffffffe0; color: #42614a; border-color: #d8e5d2; }
html[data-theme-scope="desktop"][data-theme="light"] #pet-bubble { background: #fff; color: #536f56; border-color: #dce9d7; }

.theme-toggle { flex: none; border: 1px solid currentColor; border-radius: 8px; padding: 7px 10px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.theme-toggle:hover { filter: brightness(1.12); }
.theme-toggle:focus-visible { outline: 3px solid #82a978; outline-offset: 2px; }