:root[data-color-theme="teal"] { --theme-primary:#0f7378; --theme-dark:#094244; --theme-deep:#062e30; --theme-bg1:#f1f7f7; --theme-bg2:#dbeaeb; --theme-bg3:#bed9db; --theme-soft:#f5f9fa; --theme-line:#c8dfe0; }
:root[data-color-theme="wine"] { --theme-primary:#9b3155; --theme-dark:#581c30; --theme-deep:#3e1422; --theme-bg1:#f9f3f5; --theme-bg2:#f0e0e6; --theme-bg3:#e4c7d1; --theme-soft:#fbf7f8; --theme-line:#e8d0d8; }
:root[data-color-theme="amber"] { --theme-primary:#9a570c; --theme-dark:#583207; --theme-deep:#3e2305; --theme-bg1:#f9f5f0; --theme-bg2:#f0e6db; --theme-bg3:#e4d2bd; --theme-soft:#fbf8f5; --theme-line:#e8d8c7; }
:root[data-color-theme="slate"] { --theme-primary:#475569; --theme-dark:#28303c; --theme-deep:#1c222a; --theme-bg1:#f4f5f6; --theme-bg2:#e3e6e8; --theme-bg3:#cdd1d6; --theme-soft:#f8f8f9; --theme-line:#d5d8dc; }
:root[data-color-theme="indigo"] { --theme-primary:#4b4fc1; --theme-dark:#2b2d6e; --theme-deep:#1e204d; --theme-bg1:#f4f4fb; --theme-bg2:#e4e5f6; --theme-bg3:#cecfee; --theme-soft:#f8f8fd; --theme-line:#d6d7f1; }
:root[data-color-theme="rose"] { --theme-primary:#a53572; --theme-dark:#5e1e41; --theme-deep:#42152e; --theme-bg1:#faf3f7; --theme-bg2:#f2e1ea; --theme-bg3:#e7c8d9; --theme-soft:#fbf7f9; --theme-line:#ead1df; }
:root[data-color-theme="red"] { --theme-primary:#ad3232; --theme-dark:#631c1c; --theme-deep:#451414; --theme-bg1:#faf3f3; --theme-bg2:#f3e0e0; --theme-bg3:#e9c8c8; --theme-soft:#fcf7f7; --theme-line:#ecd0d0; }
:root[data-color-theme="brown"] { --theme-primary:#805635; --theme-dark:#49311e; --theme-deep:#332215; --theme-bg1:#f7f5f3; --theme-bg2:#ece6e1; --theme-bg3:#ddd1c8; --theme-soft:#faf8f7; --theme-line:#e2d8d1; }
:root[data-color-theme="petrol"] { --theme-primary:#236378; --theme-dark:#143844; --theme-deep:#0e2830; --theme-bg1:#f2f6f7; --theme-bg2:#dee8eb; --theme-bg3:#c4d5db; --theme-soft:#f6f9fa; --theme-line:#ccdbe0; }
/* Tested palettes: dark text on white panels; white text on dark buttons. */
:root { --theme-primary:#14775b; --theme-dark:#103e32; --theme-deep:#102e25; --theme-bg1:#eef6f1; --theme-bg2:#d9ece2; --theme-bg3:#c2ddd0; --theme-soft:#f0f7f2; --theme-line:#c8dfd0; }
:root[data-color-theme="blue"] { --theme-primary:#1d5eac; --theme-dark:#173b69; --theme-deep:#102742; --theme-bg1:#eef5fc; --theme-bg2:#dce9f8; --theme-bg3:#c5d9ef; --theme-soft:#f1f6fc; --theme-line:#c8d9ec; }
:root[data-color-theme="purple"] { --theme-primary:#7444aa; --theme-dark:#472963; --theme-deep:#2d1b40; --theme-bg1:#f7f2fc; --theme-bg2:#eadef5; --theme-bg3:#d9c7e9; --theme-soft:#f8f3fc; --theme-line:#ddcdeb; }
:root { --ink:#17222d; --muted:#526170; --line:var(--theme-line); --surface-soft:var(--theme-soft); --success:#14775b; }
/* Both header bands follow the palette, with distinct gradient directions. */
.site-header {
  background:linear-gradient(115deg, var(--theme-deep) 0%, var(--theme-dark) 55%, var(--theme-primary) 100%);
  border-bottom-color:rgb(255 255 255 / 18%);
}
.site-header .module-strip {
  background:linear-gradient(105deg, var(--theme-dark) 0%, var(--theme-primary) 65%, var(--theme-dark) 100%);
  border-top-color:rgb(255 255 255 / 18%);
}
.color-picker { position:relative; margin-left:auto; flex-shrink:0; }
.color-picker > summary { cursor:pointer; border:1px solid #ffffff70; color:#fff; border-radius:10px; padding:8px; width:40px; height:40px; display:grid; place-items:center; font-weight:600; list-style:none; }
.color-picker > summary:focus-visible { outline:2px solid white; outline-offset:3px; }
.color-picker-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:100; width:306px; max-width:calc(100vw - 24px); padding:16px; border-radius:14px; background:#fff; color:#17222d; box-shadow:0 12px 32px #0003; border:1px solid #d8dfe6; }
.color-picker-panel p { margin:0 0 12px; }
.color-picker-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.color-picker-options button { display:flex; flex:1; flex-direction:column; align-items:center; gap:6px; padding:8px 5px; border:2px solid transparent; border-radius:10px; background:#f4f6f8; color:#17222d; cursor:pointer; font-size:13px; }
.color-picker-options button[aria-pressed="true"] { border-color:#17222d; font-weight:700; }
.color-swatch { width:28px; height:28px; border-radius:50%; background:var(--swatch); }
.color-picker-status { display:block; margin-top:10px; color:#526170; font-size:12px; }
@media print { .color-picker { display:none; } }

.color-picker > summary::-webkit-details-marker { display:none; }
@media(max-width:520px) { .color-picker-panel { position:fixed; top:72px; right:12px; } }