/* Work.105 Appearance only. Keep renderer, model background, motion, lighting and other settings untouched. */
/* Palette is applied through existing --bg/--panel/--accent variables. */
body[data-ui-bright="light"] .control-card,
body[data-ui-bright="light"] .info-card,
body[data-ui-bright="light"] .music-card,
body[data-ui-bright="light"] .background-grid button,
body[data-ui-bright="light"] .settings-reworked .control-card {
  background-color: var(--card-bg, #fff);
}
body[data-ui-bright="dark"] .settings-reworked .control-card {
  background-color: var(--card-bg, #131827);
}
body[data-ui-bright="light"] .strength,
body[data-ui-bright="light"] .slider-label,
body[data-ui-bright="light"] .check-row,
body[data-ui-bright="light"] .settings-reworked details > summary,
body[data-ui-bright="light"] summary {
  color: var(--text);
}
body[data-ui-bright="light"] dialog,
body[data-ui-bright="light"] .settings-dialog {
  background-color: var(--panel);
}
body[data-ui-bright="light"] input[type="text"],
body[data-ui-bright="light"] input[type="search"] {
  background: var(--card-bg); color: var(--text); border-color: var(--line);
}
body[data-ui-bright="light"] .settings-reworked .settings-heading,
body[data-ui-bright="light"] .settings-reworked .settings-v2-detail {
  background-color: var(--panel);
}
body[data-ui-bright="light"] .settings-reworked .settings-v2-navitem,
body[data-ui-bright="light"] .settings-reworked .settings-v2-toolbar {
  color: var(--text);
}
body[data-ui-bright="light"] .settings-reworked .settings-v2-navitem.active {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
}
body[data-ui-bright="light"] .settings-reworked #settingsClose,
body[data-ui-bright="light"] .settings-reworked .settings-v2-help,
body[data-ui-bright="light"] .settings-reworked .settings-v2-back {color:var(--text)}
body[data-ui-bright="light"] .settings-reworked select {color:var(--text)}
body[data-ui-bright="light"] .settings-reworked option {background:var(--panel);color:var(--text)}
/* The pattern is visible on settings surfaces, rather than being hidden behind opaque dialogs. */
body:not([data-pattern="none"]) { background-image: var(--appearance-pattern-image) !important; }
body:not([data-pattern="none"]) .workspace {
  background-image: var(--appearance-pattern-image);
  background-repeat: repeat;
}
body:not([data-pattern="none"]) .settings-reworked .settings-v2-detail,
body:not([data-pattern="none"]) .settings-reworked .settings-v2-nav {
  background-image: var(--appearance-pattern-image);
  background-repeat: repeat;
}
/* Preserve legibility with solid setting cards and text surfaces. */
.settings-reworked .settings-category[data-settings-key="appearance"] {
  border:0; padding:0; margin:0;
  background:transparent;
  color:var(--text);
}
.settings-reworked .settings-category[data-settings-key="appearance"] > summary {display:none !important}
.settings-reworked .settings-category[data-settings-key="appearance"] > .note {display:none}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-group {padding:2px 0 14px;margin:0;min-width:0}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-group + .appearance-group {
  border-top:1px solid var(--line);padding-top:16px;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-group-heading {
  color:var(--text);font-size:14px;font-weight:750;line-height:1.4;
  margin:0 0 12px;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-hint {
  font-size:11px;line-height:1.55;color:var(--muted);margin:8px 0 11px;
  background:color-mix(in srgb,var(--card-bg) 94%,transparent);padding:7px 9px;border-radius:9px;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-native-select {
  position:absolute!important;width:1px!important;height:1px!important;
  margin:-1px!important;padding:0!important;overflow:hidden!important;
  clip-path:inset(50%);white-space:nowrap;border:0!important;
}
/* Theme tiles are miniature UI cards rather than unrelated solid-color chips. */
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-tiles {
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;min-width:0;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-tile {
  display:flex;flex-direction:column;gap:6px;align-items:stretch;justify-content:flex-start;
  min-width:0;min-height:92px;padding:6px 5px 8px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--card-bg);color:var(--text);font-size:11px;font-weight:700;
  text-align:center;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-tile[aria-pressed="true"],
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-pattern-tile[aria-pressed="true"] {
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent),0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent);
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-preview {
  --mini-bg:#101321;--mini-card:#232b42;--mini-ink:#e5eaff;--mini-accent:#e57ba9;
  display:block;position:relative;overflow:hidden;flex:1;min-height:50px;
  border:1px solid color-mix(in srgb,var(--mini-ink) 24%,transparent);
  border-radius:7px;background:var(--mini-bg);
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-preview::before {
  content:"";position:absolute;left:5px;top:5px;bottom:5px;width:21%;border-radius:3px;background:var(--mini-card);
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-preview i,
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-preview b,
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-preview em {
  position:absolute;display:block;height:5px;right:7px;border-radius:3px;background:var(--mini-accent);
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-preview i {top:10px;width:50%}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-preview b {top:21px;width:57%;background:var(--mini-card);height:9px}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-preview em {top:36px;width:35%;height:3px;opacity:.75}
.settings-reworked .settings-category[data-settings-key="appearance"] [data-ui-theme="dark"] .appearance-theme-preview {--mini-bg:#090b12;--mini-card:#222539;--mini-accent:#9d8cff}
.settings-reworked .settings-category[data-settings-key="appearance"] [data-ui-theme="light"] .appearance-theme-preview {--mini-bg:#f7f4fb;--mini-card:#e5ddec;--mini-ink:#302b3c;--mini-accent:#7657bd}
.settings-reworked .settings-category[data-settings-key="appearance"] [data-ui-theme="soft"] .appearance-theme-preview {--mini-bg:#f3e7df;--mini-card:#e4cad6;--mini-ink:#3e2e3b;--mini-accent:#a66b9b}
.settings-reworked .settings-category[data-settings-key="appearance"] [data-ui-theme="blue"] .appearance-theme-preview {--mini-bg:#d8efff;--mini-card:#b3daf5;--mini-ink:#23445c;--mini-accent:#377cc9}
.settings-reworked .settings-category[data-settings-key="appearance"] [data-ui-theme="purple"] .appearance-theme-preview {--mini-bg:#e9dcff;--mini-card:#d4baf0;--mini-ink:#45315c;--mini-accent:#8652bf}
.settings-reworked .settings-category[data-settings-key="appearance"] [data-ui-theme="pink"] .appearance-theme-preview {--mini-bg:#ffe1ec;--mini-card:#f6bdd4;--mini-ink:#563145;--mini-accent:#cf477c}
.settings-reworked .settings-category[data-settings-key="appearance"] [data-ui-theme="green"] .appearance-theme-preview {--mini-bg:#d9f7e6;--mini-card:#b4e9c8;--mini-ink:#25543b;--mini-accent:#258b62}
.settings-reworked .settings-category[data-settings-key="appearance"] [data-ui-theme="orange"] .appearance-theme-preview {--mini-bg:#ffebcf;--mini-card:#ffd6a2;--mini-ink:#614023;--mini-accent:#c86d2d}
.settings-reworked .settings-category[data-settings-key="appearance"] [data-ui-theme="starry"] .appearance-theme-preview {--mini-bg:#090d1b;--mini-card:#18233f;--mini-accent:#c6b5ff}
/* Color swatches and custom color controls. */
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-accent-swatches {
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:7px;align-items:center;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-accent-swatches button {
  min-width:0;min-height:0;width:100%;aspect-ratio:1;border-radius:50%;
  padding:0;border:2px solid color-mix(in srgb,var(--text) 22%,transparent);
  background:var(--swatch);position:relative;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-accent-swatches button[aria-pressed="true"]::after {
  content:"✓";position:absolute;inset:-4px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--accent);font-size:12px;font-weight:900;
  color:var(--accent-fg);text-shadow:0 1px 2px #0008;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-color-grid,
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-text-grid {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:8px 0;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-color-card {
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-width:0;min-height:65px;padding:10px 12px;
  border:1px solid var(--line);border-radius:13px;
  background:var(--card-bg);color:var(--text);font-weight:650;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-color-card input[type="color"] {
  flex:0 0 46px;width:46px;height:42px;min-width:46px;
  border:1px solid var(--line);border-radius:9px;background:transparent;padding:3px;cursor:pointer;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-text-grid .control-card {margin:0;min-width:0}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-text-grid .control-card:first-child {grid-column:span 2}
/* Pattern gallery: the selected pattern is drawn both here and on the settings surface. */
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-pattern-tiles {
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-pattern-tile {
  display:flex;flex-direction:column;gap:6px;align-items:stretch;
  min-width:0;padding:6px 6px 8px;min-height:93px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--card-bg);color:var(--text);font-size:11px;font-weight:700;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-pattern-preview {
  display:block;min-height:55px;flex:1;
  border:1px solid var(--line);border-radius:7px;
  background-color:color-mix(in srgb,var(--bg) 82%,var(--accent));
  background-repeat:repeat;background-size:auto;
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-pattern-slider {
  margin:12px 0 0;padding:9px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--card-bg);color:var(--text);
}
.settings-reworked .settings-category[data-settings-key="appearance"] .appearance-reset {
  margin:14px 0 4px;min-height:46px;
  background:var(--card-bg);color:var(--text);
}
@media (max-width:599px) {
  .settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-tiles {grid-template-columns:repeat(3,minmax(0,1fr))}
  .settings-reworked .settings-category[data-settings-key="appearance"] .appearance-accent-swatches {grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .settings-reworked .settings-category[data-settings-key="appearance"] .appearance-pattern-tiles {grid-template-columns:repeat(3,minmax(0,1fr))}
  .settings-reworked .settings-category[data-settings-key="appearance"] .appearance-color-grid {grid-template-columns:1fr}
  .settings-reworked .settings-category[data-settings-key="appearance"] .appearance-text-grid {grid-template-columns:1fr}
  .settings-reworked .settings-category[data-settings-key="appearance"] .appearance-text-grid .control-card:first-child {grid-column:auto}
}
@media (max-width:350px) {
  .settings-reworked .settings-category[data-settings-key="appearance"] .appearance-theme-tiles {grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-reworked .settings-category[data-settings-key="appearance"] .appearance-pattern-tiles {grid-template-columns:repeat(2,minmax(0,1fr))}
}