/* Dry: greyscale everything except the switch itself (filter on body children, so fixed elements keep working) */
html.crione-dry body > *:not(.crione-theme) { filter: grayscale(1); }
html.crione-dry { background: #fff; }
.crione-theme { position: fixed; left: 16px; bottom: 16px; z-index: 9999; display: flex; gap: 2px; padding: 3px;
  background: rgba(255,255,255,.95); border: 1px solid #d0d0d0; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.15);
  font: 600 12px/1 Arial, Helvetica, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.crione-theme button { appearance: none; border: 0; background: transparent; color: #444; cursor: pointer; font: inherit;
  padding: 7px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.crione-theme button:hover { background: #f0f0f0; }
.crione-theme button[aria-pressed="true"] { background: #111; color: #fff; }
.crione-theme .sw { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.crione-theme [data-theme="color"] .sw { background: conic-gradient(#e63946, #f4d000, #2a9d8f, #3a86ff, #8338ec, #e63946); }
.crione-theme [data-theme="dry"] .sw { background: linear-gradient(90deg, #fff, #000); }
@media print { .crione-theme { display: none; } }