/* Shared by every HTML entry, including the static tool directory.
   Light values stay in the component fallbacks; dark neutral tokens preserve
   the existing surface/border/text hierarchy without filtering user images. */
:root { --modal-overlay: rgb(20 20 18 / 20%); }
:root[data-theme="dark"] { --modal-overlay: rgb(250 249 247 / 10%); }
:root[data-theme="light"] { color-scheme: light; background: #f4f3f1; }
:root[data-theme="dark"] {
  color-scheme: dark;
  background: #1b1b1a;
  --ui-171716: #ecece7;
  --ui-20201f: #eaeae5;
  --ui-242421: #e9e9e4;
  --ui-242422: #e9e9e4;
  --ui-282724: #e9e9e4;
  --ui-292925: #e8e8e3;
  --ui-292927: #e8e8e3;
  --ui-2a2a28: #e7e7e2;
  --ui-2b2b29: #e7e7e2;
  --ui-2b2b2a: #e7e7e2;
  --ui-30302d: #e4e4df;
  --ui-30302e: #e4e4df;
  --ui-34332e: #e3e3de;
  --ui-353530: #e2e2dd;
  --ui-37352e: #e2e2dd;
  --ui-373732: #e1e1dc;
  --ui-373734: #e0e0db;
  --ui-373735: #e0e0db;
  --ui-383832: #e0e0db;
  --ui-383833: #e0e0db;
  --ui-3a3a38: #deded9;
  --ui-3d3d3a: #dcdcd7;
  --ui-41413b: #dbdbd6;
  --ui-44443b: #dadad5;
  --ui-44443d: #d9d9d4;
  --ui-454542: #d8d8d3;
  --ui-484844: #d6d6d1;
  --ui-4b4b48: #d4d4cf;
  --ui-50504d: #d1d1cc;
  --ui-555249: #d1d1cc;
  --ui-555349: #d1d1cc;
  --ui-555449: #d1d1cc;
  --ui-55554e: #cfcfca;
  --ui-555550: #cecec9;
  --ui-555551: #cecec9;
  --ui-575753: #ccccc7;
  --ui-5c5c59: #c8c8c3;
  --ui-5d5d59: #c7c7c2;
  --ui-626057: #c6c6c1;
  --ui-64615b: #c4c4bf;
  --ui-64645d: #c3c3be;
  --ui-66665e: #c2c2bd;
  --ui-666662: #c0c0bb;
  --ui-676761: #c0c0bb;
  --ui-68675f: #c0c0bb;
  --ui-69665c: #c1c1bc;
  --ui-69675f: #c0c0bb;
  --ui-696962: #bfbfba;
  --ui-6c6a62: #bebeb9;
  --ui-6f6f68: #babab5;
  --ui-716f66: #babab5;
  --ui-71716b: #b8b8b3;
  --ui-72716a: #b8b8b3;
  --ui-74746e: #b6b6b1;
  --ui-76766e: #b5b5b0;
  --ui-77736a: #b6b6b1;
  --ui-77746b: #b6b6b1;
  --ui-77746c: #b5b5b0;
  --ui-77766f: #b4b4af;
  --ui-77776f: #b4b4af;
  --ui-777772: #b3b3ae;
  --ui-777773: #b2b2ad;
  --ui-7b7b76: #afafaa;
  --ui-85857d: #a6a6a1;
  --ui-88887f: #a3a39e;
  --ui-8b887f: #a1a19c;
  --ui-8c8b82: #9f9f9a;
  --ui-939085: #999994;
  --ui-99978f: #90908b;
  --ui-a4a49e: #81817c;
  --ui-a7a7a2: #7d7d78;
  --ui-a8a497: #83837e;
  --ui-a8a89f: #7e7e79;
  --ui-a8a8a2: #7c7c77;
  --ui-aaa9a2: #7b7b76;
  --ui-b7b7b2: #696964;
  --ui-b8b8b0: #6a6a65;
  --ui-bcb8ae: #696964;
  --ui-bdbdb6: #636362;
  --ui-c7c4bb: #5a5a59;
  --ui-c7c7bf: #585857;
  --ui-c9c9c4: #545453;
  --ui-c9c9c5: #535352;
  --ui-cccac3: #535352;
  --ui-d4d1c8: #4c4c4b;
  --ui-d4d2cb: #4a4a49;
  --ui-d6d2c9: #4a4a49;
  --ui-d7d6cf: #464645;
  --ui-d9d8d2: #444443;
  --ui-dcd9d1: #434342;
  --ui-dcdcd8: #3f3f3e;
  --ui-dedbd3: #414140;
  --ui-deddd6: #3f3f3e;
  --ui-deddd7: #3f3f3e;
  --ui-deddd8: #3e3e3d;
  --ui-deddda: #3d3d3c;
  --ui-deded5: #40403f;
  --ui-deded9: #3e3e3d;
  --ui-dededb: #3c3c3b;
  --ui-dfded8: #3e3e3d;
  --ui-e0ded6: #3e3e3d;
  --ui-e0dfd8: #3d3d3c;
  --ui-e2dfd7: #3c3c3b;
  --ui-e3e0d8: #3b3b3a;
  --ui-e4e2dc: #393938;
  --ui-e4e3df: #373736;
  --ui-e5e2da: #393938;
  --ui-e5e3db: #393938;
  --ui-e5e4e0: #363635;
  --ui-e5e5df: #373736;
  --ui-e6e3dc: #383837;
  --ui-e6e5e2: #353534;
  --ui-e7e6e2: #343433;
  --ui-e8e6df: #353534;
  --ui-e9e8e3: #333332;
  --ui-ecebe8: #2e2e2d;
  --ui-eeece5: #2f2f2e;
  --ui-eeece6: #2e2e2d;
  --ui-eeece7: #2e2e2d;
  --ui-eeede7: #2e2e2d;
  --ui-eeede8: #2d2d2c;
  --ui-eeede9: #2d2d2c;
  --ui-efeeeb: #2b2b2a;
  --ui-efeeec: #2b2b2a;
  --ui-efefea: #2c2c2b;
  --ui-f0efeb: #2b2b2a;
  --ui-f1f0ec: #2a2a29;
  --ui-f3e6e2: #2e2e2d;
  --ui-f3f2ee: #282827;
  --ui-f4f3f1: #262625;
  --ui-f5f4f1: #252524;
  --ui-f5f4f2: #252524;
  --ui-f6f5f2: #252524;
  --ui-f7f7f5: #232322;
  --ui-f8f8f7: #222221;
  --ui-faf9f6: #212120;
  --ui-faf9f7: #212120;
  --ui-fbfaf8: #20201f;
  --ui-fbfbfa: #1f1f1e;
  --ui-ffffff: #1b1b1a;
}
.site-header .theme-switch { display: inline-grid; place-items: center; flex: 0 0 64px; width: 64px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.theme-switch-track { position: relative; display: grid; grid-template-columns: 1fr 1fr; place-items: center; width: 64px; height: 30px; border: 1px solid var(--ui-dedbd3, #dedbd3); border-radius: 16px; background: var(--ui-eeece7, #eeece7); }
.theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: 28px; height: 24px; border-radius: 13px; background: var(--ui-ffffff, #fff); transition: transform 180ms ease; }
.theme-switch svg { position: relative; width: 15px; height: 15px; color: var(--ui-77746c, #77746c); }
.theme-switch .theme-sun { color: var(--ui-34332e, #34332e); }
:root[data-theme="dark"] .theme-switch-thumb { transform: translateX(30px); }
:root[data-theme="dark"] .theme-switch .theme-sun { color: var(--ui-77746c); }
:root[data-theme="dark"] .theme-switch .theme-moon { color: var(--ui-34332e); }
.theme-switch:hover .theme-switch-track { border-color: var(--ui-939085, #939085); }
.site-header .theme-switch:focus-visible { outline: 2px solid var(--ui-555449, #555449); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .theme-switch-thumb { transition: none; } }
:root[data-theme="dark"] .trust-seal,
:root[data-theme="dark"] .tool-art img,
:root[data-theme="dark"] .wordmark::before { filter: invert(1) brightness(.9); }
:root[data-theme="dark"] :is(.batch-error, .resize-error, .fill-color-hint[role="alert"]) { color: #efa99c; }
:root[data-theme="dark"] .resize-warning { color: #dfbd82; }
:root[data-theme="dark"] .batch-drop-hint { background: rgb(31 31 30 / 92%); }
:root[data-theme="dark"] .image-action-group .batch-row-remove:hover:not(:disabled) { background: #48332e; color: #efa99c; }
:root[data-theme="dark"] .confirm-remove-all { background: #e6d9d2; color: #28221f; }
:root[data-theme="dark"] :is(input, select) { accent-color: #d7d3c7; }
@media (max-width: 1250px) and (min-width: 1100px) {
  .site-navigation { gap: 14px; }
  .site-links, .site-tools { gap: 10px; }
}
@media (max-width: 600px) {
  .header-inner { flex-wrap: wrap; gap: 8px 16px; padding-block: 12px; }
  .header-nav { flex-wrap: wrap; }
}