/* Theme controls, shared by both appearances. */
:root { color-scheme: light; }
.theme-toggle { gap: 7px; }
.theme-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.theme-track {
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 16px;
  padding: 2px;
  border-radius: 20px;
  background: #ddd7e9;
}
.theme-track > span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #24183b33;
}

/* Surfaces and native controls. Card artwork retains its original colors. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11131c;
  --paper: #1c1e2b;
  --ink: #eeebf7;
  --muted: #b1acc2;
  --line: #333546;
  --accent: #b39bf1;
  --accent-dark: #c5affc;
  --lavender: #322a48;
  --sidebar: #161823;
  --green: #83d3b1;
}
:root[data-theme="dark"] body { color: var(--ink); }
:root[data-theme="dark"] ::selection { background: #5d477e; color: #fff; }
:root[data-theme="dark"] .theme-track { background: #b39bf1; }
:root[data-theme="dark"] .theme-track > span {
  transform: translateX(12px);
  background: #211832;
  box-shadow: none;
}
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .stat { background: var(--paper); border-color: var(--line); }
:root[data-theme="dark"] .sidebar { border-right: 1px solid #282a39; }
:root[data-theme="dark"] .sidebar-divider { background: #303040; }
:root[data-theme="dark"] .sidebar-foot { border-color: #303040; }
:root[data-theme="dark"] .set-search { background: #222433; border-color: #3b3c50; }
:root[data-theme="dark"] .set-list { scrollbar-color: #52506b transparent; }
:root[data-theme="dark"] .set-item:hover,
:root[data-theme="dark"] .nav-item:hover { background: #272738; }
:root[data-theme="dark"] .set-item.active,
:root[data-theme="dark"] .nav-item.active,
:root[data-theme="dark"] .all-sets.active { background: #332b46; }

:root[data-theme="dark"] .button-primary {
  color: #211832;
  background: var(--accent);
  box-shadow: 0 3px 12px #0003;
}
:root[data-theme="dark"] .button-primary:hover:not(:disabled) { background: var(--accent-dark); }
:root[data-theme="dark"] .button-secondary,
:root[data-theme="dark"] .quantity-button {
  background: #262837;
  color: #d8cee9;
  border-color: #414255;
}
:root[data-theme="dark"] .button-secondary:hover,
:root[data-theme="dark"] .quantity-button:hover { background: #353047; }
:root[data-theme="dark"] .button-quiet { background: #2c273d; color: #c8b3e8; }
:root[data-theme="dark"] .button-danger { background: #b95165; color: #fff; }
:root[data-theme="dark"] .button-danger:hover { background: #a94358; }
:root[data-theme="dark"] .main-search,
:root[data-theme="dark"] .language-label select,
:root[data-theme="dark"] .field-row select {
  background: #202230;
  border-color: #414255;
  color: #e3dced;
}
:root[data-theme="dark"] .main-search input { color: #ede7f7; caret-color: #c5affc; }
:root[data-theme="dark"] .main-search input::placeholder { color: #aaa2bb; }
:root[data-theme="dark"] .main-search:focus-within { border-color: #b39bf1; box-shadow: 0 0 0 3px #b39bf11f; }
:root[data-theme="dark"] .main-search svg { stroke: #b3a6ce; }
:root[data-theme="dark"] select option { color: #e3dced; background: #202230; }
:root[data-theme="dark"] kbd { border-color: #454054; background: #272435; color: #c4b9d8; }

:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .tip,
:root[data-theme="dark"] .stat-note,
:root[data-theme="dark"] .stat-label,
:root[data-theme="dark"] .page-header p,
:root[data-theme="dark"] .list-header p,
:root[data-theme="dark"] .search-footer,
:root[data-theme="dark"] .detail-copy p,
:root[data-theme="dark"] .variant-hint,
:root[data-theme="dark"] .field-row label,
:root[data-theme="dark"] .art-placeholder p,
:root[data-theme="dark"] .shortcut,
:root[data-theme="dark"] .rarity,
:root[data-theme="dark"] .light,
:root[data-theme="dark"] .detail-heading .section-label { color: #b6acc8; }
:root[data-theme="dark"] .save-status { color: #99d1b7; }
:root[data-theme="dark"] .save-status.error { color: #f0a8b7; }
:root[data-theme="dark"] .lavender { background: #332a49; color: #c7adee; }
:root[data-theme="dark"] .peach { background: #3b2d30; color: #e3b295; }
:root[data-theme="dark"] .mint { background: #243b35; color: #9dd8bd; }
:root[data-theme="dark"] .text-button,
:root[data-theme="dark"] .active-filter,
:root[data-theme="dark"] .light-icon { color: #c7acee; }
:root[data-theme="dark"] .light-icon:hover { background: #342b48; }

:root[data-theme="dark"] .table-scroll { scrollbar-color: #52506b transparent; }
:root[data-theme="dark"] th { background: #222431; color: #c2b6d4; border-color: #353446; }
:root[data-theme="dark"] td { color: #d7cde3; border-color: #2d2e3e; }
:root[data-theme="dark"] tbody tr:hover { background: #252433; }
:root[data-theme="dark"] tbody tr.selected { background: #332b48; }
:root[data-theme="dark"] tbody tr.selected td:first-child { box-shadow: inset 3px 0 #ba9ce9; }
:root[data-theme="dark"] .card-name { color: #ece4f5; }
:root[data-theme="dark"] .card-name small,
:root[data-theme="dark"] .card-number,
:root[data-theme="dark"] .row-code { color: #beb0ce; }
:root[data-theme="dark"] .row-arrow { color: #c6addf; }
:root[data-theme="dark"] .code-badge { background: #342b46; color: #d2b5f1; border-color: #504064; }
:root[data-theme="dark"] .quantity-pill { background: #392e4e; color: #dabcf8; }
:root[data-theme="dark"] .quantity-zero { color: #9b91ac; }
:root[data-theme="dark"] .delete-button { color: #c0abc9; }
:root[data-theme="dark"] .delete-button:hover { color: #ffa4b5; }
:root[data-theme="dark"] .table-footer { border-color: #333344; color: #b5a8c5; }
:root[data-theme="dark"] .table-footer > span:first-child { color: #c1aed5; }
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .table-loading { color: #bbaaca; }
:root[data-theme="dark"] .empty-state h3 { color: #ddc6ef; }
:root[data-theme="dark"] .empty-symbol { background: #2d263d; color: #c4a3e0; border-color: #4b3d60; }
:root[data-theme="dark"] .spinner { border-color: #473654; border-top-color: #c5a3eb; }

:root[data-theme="dark"] .art-stage { background: radial-gradient(ellipse at center, #3c2b51 0, #262133 68%, #211e2d 100%); }
:root[data-theme="dark"] .art-stage img { filter: drop-shadow(0 7px 12px #0008); }
:root[data-theme="dark"] .placeholder-card {
  border-color: #675079;
  color: #c5a2df;
  background: linear-gradient(130deg, #453254, #2d223e);
  box-shadow: 9px 5px 0 -1px #24202f, 9px 5px 0 0 #5b456d;
}
:root[data-theme="dark"] .detail-controls { border-color: #383143; }
:root[data-theme="dark"] .existing-count { background: #2e263e; color: #d2b8e8; }
:root[data-theme="dark"] .notice { background: #30263f; border-color: #5c446d; color: #dec5ee; }
:root[data-theme="dark"] .notice.error { background: #3f2530; border-color: #804456; color: #f2bec7; }
:root[data-theme="dark"] .toast { background: #3e3050; border-color: #806595; color: #f5edff; box-shadow: 0 8px 32px #0005; }
:root[data-theme="dark"] .toast.error { background: #723648; border-color: #aa647a; }
:root[data-theme="dark"] .page-footer { color: #b3a0c2; }
:root[data-theme="dark"] .page-footer .version { background: #30263e; color: #d4b9e9; }
:root[data-theme="dark"] .page-footer a:hover { color: #ddbbf7; }

:root[data-theme="dark"] dialog { background: #211f2e; color: #eee4f7; border-color: #594568; box-shadow: 0 25px 100px #0009; }
:root[data-theme="dark"] dialog::backdrop { background: #080710a6; }
:root[data-theme="dark"] dialog p,
:root[data-theme="dark"] .path-label { color: #c6b3d4; }
:root[data-theme="dark"] .dialog-icon { background: #3b2c4c; color: #d6b1ee; }
:root[data-theme="dark"] .path-label code { background: #30263d; color: #e0c9f0; }
:root[data-theme="dark"] .muted { color: #bdabc9 !important; }

/* Keep the theme switch reachable on small screens. */
@media (max-width: 760px) {
  .page-header { flex-direction: column; align-items: stretch; gap: 16px; }
  .header-actions { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
}