/**
 * CelRelay Theme Stylesheet
 * Contains Light Theme UI Shell Overrides and Theme Variations.
 * (Transforms UI chrome: headers, sidebars, modals, buttons.
 *  Drawing canvas, layers, pens, and art pixels remain untouched.)
 */

/* Toolbar position alignment in Light Theme */
html[data-theme="light"][data-toolbar-pos="right"] #left-sidebar {
  border-left: 1px solid #d4d4dc !important;
  border-right: none !important;
}

/* =========================================================
   Light Theme UI Shell Overrides
   ========================================================= */
html[data-theme="light"] {
  --bg: #f4f4f6;
  --surface: #ffffff;
  --surface-hover: #f0f0f4;
  --border: #d4d4d8;
  --text: #27272a;
  --text-muted: #71717a;
}

html[data-theme="light"] body {
  background-color: #f4f4f6 !important;
  color: #27272a !important;
}

/* Universal Focus & Selection Suppression in Light Mode: Never flash white outlines */
html[data-theme="light"] *:focus,
html[data-theme="light"] *:focus-visible,
html[data-theme="light"] *:active,
html[data-theme="light"] button:focus,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] button:active,
html[data-theme="light"] a:focus,
html[data-theme="light"] a:focus-visible,
html[data-theme="light"] a:active,
html[data-theme="light"] input:focus,
html[data-theme="light"] input:focus-visible,
html[data-theme="light"] .btn-tool:focus,
html[data-theme="light"] .btn-tool:focus-visible,
html[data-theme="light"] .btn-tool:active,
html[data-theme="light"] .frame-thumb:focus,
html[data-theme="light"] .frame-thumb:focus-visible,
html[data-theme="light"] .frame-thumb:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Light Mode Canvas Viewport & Modal Player (Flat Solid Canvas Background, No Dotted Grid) */
html[data-theme="light"] .viewport-area,
html[data-theme="light"] #detail-modal .bg-\[\#0d0d0f\] {
  background-color: #f4f4f6 !important;
  background-image: none !important;
}

html[data-theme="light"] .canvas-box {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px #d4d4d8 !important;
}

/* Light Mode Surface Backgrounds */
html[data-theme="light"] header,
html[data-theme="light"] footer,
html[data-theme="light"] #left-sidebar,
html[data-theme="light"] #mobile-tools-drawer,
html[data-theme="light"] #guidelines-modal > div,
html[data-theme="light"] #settings-modal > div,
html[data-theme="light"] #changelog-modal > div,
html[data-theme="light"] #shortcuts-modal > div,
html[data-theme="light"] #mobile-sliders-modal > div,
html[data-theme="light"] #mobile-speed-modal > div,
html[data-theme="light"] #detail-modal > div,
html[data-theme="light"] #clear-all-modal > div,
html[data-theme="light"] #ref-preview-modal > div,
html[data-theme="light"] #mobile-swatches-popover,
html[data-theme="light"] #mobile-smoothing-popover,
html[data-theme="light"] .bg-\[\#16161a\],
html[data-theme="light"] .bg-\[\#121214\],
html[data-theme="light"] .bg-\[\#16161a\]\/90,
html[data-theme="light"] .bg-\[\#16161a\]\/95,
html[data-theme="light"] .bg-\[\#16161a\]\/80,
html[data-theme="light"] .bg-\[\#16161a\]\/60 {
  background-color: #ffffff !important;
}

html[data-theme="light"] main.bg-\[\#0d0d0f\],
html[data-theme="light"] #workspace {
  background-color: #f4f4f6 !important;
}

/* Secondary Toolbar Rows, Sub-bars & Ribbons in Light Mode (No Deep Black, No Mega Dark Grey) */
html[data-theme="light"] .bg-\[\#141418\],
html[data-theme="light"] .bg-\[\#141418\]\/95,
html[data-theme="light"] .bg-\[\#18181f\],
html[data-theme="light"] .bg-\[\#18181f\]\/90,
html[data-theme="light"] .bg-\[\#151518\]\/95,
html[data-theme="light"] .bg-\[\#111115\],
html[data-theme="light"] .bg-\[\#121215\],
html[data-theme="light"] .bg-\[\#0f0f13\],
html[data-theme="light"] .bg-\[\#101013\],
html[data-theme="light"] .bg-\[\#101014\],
html[data-theme="light"] .bg-\[\#19191e\],
html[data-theme="light"] .bg-\[\#18181e\],
html[data-theme="light"] #mobile-top-subbar,
html[data-theme="light"] #reply-banner,
html[data-theme="light"] #remix-banner,
html[data-theme="light"] #btn-toggle-timeline,
html[data-theme="light"] #btn-reveal-desktop-tools,
html[data-theme="light"] #btn-reveal-mobile-tools {
  background-color: #f0f0f4 !important;
}

/* Interactive Chips, Inputs, Inactive Buttons & Containers (Light Grey, Never Dark) */
html[data-theme="light"] .bg-\[\#1f1f24\],
html[data-theme="light"] .bg-\[\#22222a\],
html[data-theme="light"] .bg-\[\#25252b\],
html[data-theme="light"] .bg-\[\#25252e\],
html[data-theme="light"] .bg-\[\#252532\],
html[data-theme="light"] .bg-\[\#282830\],
html[data-theme="light"] .bg-\[\#282832\],
html[data-theme="light"] .bg-\[\#2a2a32\],
html[data-theme="light"] .bg-\[\#2e2e36\],
html[data-theme="light"] .bg-\[\#2e2e38\],
html[data-theme="light"] .bg-\[\#30303c\],
html[data-theme="light"] .bg-\[\#32323c\],
html[data-theme="light"] .bg-\[\#32323e\],
html[data-theme="light"] .bg-\[\#363644\],
html[data-theme="light"] .bg-\[\#2d2d38\],
html[data-theme="light"] .bg-\[\#1f1f24\]\/30,
html[data-theme="light"] .bg-\[\#1f1f24\]\/40,
html[data-theme="light"] .bg-\[\#1f1f24\]\/50,
html[data-theme="light"] .bg-\[\#1f1f24\]\/60,
html[data-theme="light"] .bg-\[\#1f1f24\]\/70,
html[data-theme="light"] .bg-\[\#1f1f24\]\/80 {
  background-color: #e4e4ea !important;
}

/* Active Layer Tint (Soft Fresh Mint Tint in Light Mode, Never Dark Green/Black) */
html[data-theme="light"] .bg-\[\#151d19\] {
  background-color: #f0fdf4 !important;
}

/* Gauge & Meter Tracks in Light Mode */
html[data-theme="light"] #ink-meter-container .bg-\[\#121214\],
html[data-theme="light"] #mobile-tools-drawer .bg-\[\#121214\] {
  background-color: #d4d4dc !important;
}

/* Hover and Active States */
html[data-theme="light"] .hover\:bg-\[\#25252b\]:hover,
html[data-theme="light"] .hover\:bg-\[\#282830\]:hover,
html[data-theme="light"] .hover\:bg-\[\#282832\]:hover,
html[data-theme="light"] .hover\:bg-\[\#1f1f24\]:hover,
html[data-theme="light"] .hover\:bg-\[\#1a1a20\]:hover,
html[data-theme="light"] .hover\:bg-\[\#26262b\]:hover,
html[data-theme="light"] .hover\:bg-\[\#202028\]:hover,
html[data-theme="light"] .hover\:bg-\[\#22222a\]:hover,
html[data-theme="light"] .hover\:bg-\[\#2a2a32\]:hover,
html[data-theme="light"] .hover\:bg-\[\#2e2e38\]:hover,
html[data-theme="light"] .hover\:bg-\[\#32323c\]:hover,
html[data-theme="light"] .hover\:bg-\[\#18181e\]:hover,
html[data-theme="light"] .hover\:bg-\[\#30303c\]:hover,
html[data-theme="light"] .hover\:bg-\[\#25252e\]:hover,
html[data-theme="light"] .hover\:bg-\[\#32323e\]:hover,
html[data-theme="light"] .hover\:bg-\[\#2d2d38\]:hover,
html[data-theme="light"] .active\:bg-\[\#252532\]:active {
  background-color: #d8d8e2 !important;
}

/* Borders & Separators in Light Mode */
html[data-theme="light"] .border-\[\#26262d\],
html[data-theme="light"] .md\:border-\[\#26262d\],
html[data-theme="light"] .border-\[\#2e2e36\],
html[data-theme="light"] .border-\[\#1f1f26\],
html[data-theme="light"] .border-\[\#1e1e24\],
html[data-theme="light"] .border-\[\#33333f\],
html[data-theme="light"] .border-\[\#32323e\],
html[data-theme="light"] .border-\[\#26262f\],
html[data-theme="light"] .border-\[\#2e2e38\],
html[data-theme="light"] .border-\[\#383842\],
html[data-theme="light"] .border-\[\#383844\],
html[data-theme="light"] .border-\[\#2a2a34\],
html[data-theme="light"] .border-\[\#23232a\],
html[data-theme="light"] .border-\[\#23232a\]\/60,
html[data-theme="light"] .border-\[\#363644\],
html[data-theme="light"] .border-\[\#4c4c60\],
html[data-theme="light"] .border-\[\#26262d\]\/30,
html[data-theme="light"] .border-\[\#26262d\]\/40,
html[data-theme="light"] .border-\[\#26262d\]\/50,
html[data-theme="light"] .border-\[\#26262d\]\/60,
html[data-theme="light"] .border-\[\#26262d\]\/70 {
  border-color: #d4d4dc !important;
}

/* =========================================================
   TEXT COLOR CONTRACT:
   Light surfaces get DARK CHARCOAL text (#27272a / #52525b).
   Tertiary active elements get PURE WHITE text (#ffffff).
   ========================================================= */

/* 1. General Text on Light Backgrounds */
html[data-theme="light"] .text-white,
html[data-theme="light"] .text-zinc-100,
html[data-theme="light"] .text-zinc-200,
html[data-theme="light"] .text-zinc-300,
html[data-theme="light"] .text-\[\#ededed\],
html[data-theme="light"] .text-\[\#dedede\],
html[data-theme="light"] .text-\[\#ccc\],
html[data-theme="light"] p.text-zinc-200,
html[data-theme="light"] ul.text-zinc-200,
html[data-theme="light"] li,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4 {
  color: #27272a !important;
}

html[data-theme="light"] strong,
html[data-theme="light"] strong.text-white {
  color: #27272a !important;
  font-weight: 700 !important;
}

/* 2. Secondary & Muted Labels on Light Backgrounds */
html[data-theme="light"] .text-zinc-400,
html[data-theme="light"] .text-\[\#888894\],
html[data-theme="light"] .text-\[\#a1a1aa\],
html[data-theme="light"] .text-\[\#aaa\],
html[data-theme="light"] .text-\[\#5e5e68\] {
  color: #52525b !important;
}

html[data-theme="light"] .hover\:text-white:hover {
  color: #00a677 !important;
}

html[data-theme="light"] .text-emerald-400 {
  color: #047857 !important;
}

html[data-theme="light"] .text-amber-400 {
  color: #b45309 !important;
}

html[data-theme="light"] .text-rose-400 {
  color: #be123c !important;
}

/* Modal Backdrops & Inputs */
html[data-theme="light"] .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="password"] {
  background-color: #f4f4f6 !important;
  color: #27272a !important;
  border-color: #d4d4d8 !important;
}

/* Modal Headers & Close Buttons */
html[data-theme="light"] #btn-close-guidelines,
html[data-theme="light"] #btn-close-settings,
html[data-theme="light"] #btn-close-changelog,
html[data-theme="light"] #btn-close-detail {
  color: #27272a !important;
}

html[data-theme="light"] #btn-close-guidelines:hover,
html[data-theme="light"] #btn-close-settings:hover,
html[data-theme="light"] #btn-close-changelog:hover,
html[data-theme="light"] #btn-close-detail:hover {
  color: #00a677 !important;
}

/* Inactive Options / Ratio / Filter / Toolbar Buttons on Light Backgrounds */
html[data-theme="light"] .btn-theme-mode:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]),
html[data-theme="light"] .btn-ui-size:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]),
html[data-theme="light"] .btn-toolbar-pos:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]),
html[data-theme="light"] .btn-canvas-bg:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]),
html[data-theme="light"] .filter-btn:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]),
html[data-theme="light"] #ratio-square:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]),
html[data-theme="light"] #ratio-horizontal:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]),
html[data-theme="light"] #ratio-vertical:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]) {
  color: #27272a !important;
  background-color: transparent !important;
  outline: none !important;
}

html[data-theme="light"] .btn-theme-mode:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]):hover,
html[data-theme="light"] .btn-ui-size:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]):hover,
html[data-theme="light"] .btn-toolbar-pos:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]):hover,
html[data-theme="light"] .btn-canvas-bg:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]):hover,
html[data-theme="light"] .filter-btn:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]):hover,
html[data-theme="light"] #ratio-square:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]):hover,
html[data-theme="light"] #ratio-horizontal:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]):hover,
html[data-theme="light"] #ratio-vertical:not(.is-active):not(.bg-white):not([class*="bg-[#00a677]"]):hover {
  background-color: #e4e4ea !important;
  border-color: #00a677 !important;
  outline: 1px solid #00a677 !important;
  color: #00a677 !important;
}

/* 3. TERTIARY ACCENT ELEMENTS IN LIGHT MODE: SIGNATURE EMERALD GREEN WITH WHITE TEXT & ICONS */
html[data-theme="light"] :is(
  :is(header span, .filter-btn, #ratio-square, #ratio-horizontal, #ratio-vertical, .btn-ui-size, .btn-theme-mode, .btn-toolbar-pos, .btn-canvas-bg):is(.bg-white, .is-active, [class*="bg-[#00a677]"]),
  #btn-done-settings,
  #btn-done-changelog,
  #btn-done-guidelines,
  #btn-done-mobile-sliders,
  :is(#detail-btn-play, #detail-btn-replay, #detail-btn-dl-gif).bg-white,
  .card-art-badge,
  .filmstrip-hold-badge,
  .bg-black\/75,
  .bg-black\/60,
  .bg-black\/80,
  #toast,
  #gallery-toast
) {
  background-color: #00a677 !important;
  color: #ffffff !important;
  outline: none !important;
}

/* Force White Text inside Dark Elements */
html[data-theme="light"] :is(
  :is(header span, .filter-btn, #ratio-square, #ratio-horizontal, #ratio-vertical, .btn-ui-size, .btn-theme-mode, .btn-toolbar-pos, .btn-canvas-bg):is(.bg-white, .is-active, [class*="bg-[#00a677]"]),
  #btn-done-settings,
  #btn-done-changelog,
  #btn-done-guidelines,
  #btn-done-mobile-sliders,
  :is(#detail-btn-play, #detail-btn-replay, #detail-btn-dl-gif).bg-white,
  .card-art-badge,
  .filmstrip-hold-badge,
  #toast,
  #gallery-toast
) * {
  color: #ffffff !important;
}

html[data-theme="light"] :is(
  :is(#ratio-square, #ratio-horizontal, #ratio-vertical, .btn-toolbar-pos):is(.bg-white, .is-active, [class*="bg-[#00a677]"]),
  .btn-theme-mode:is(.is-active, [class*="bg-[#00a677]"]),
  :is(#detail-btn-play, #detail-btn-replay, #detail-btn-dl-gif).bg-white,
  .card-art-badge
) svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Animation thumbnail badge: always signature green circle with white icon in all themes */
.card-art-anim-badge,
html[data-theme="light"] .card-art-anim-badge {
  background-color: #00a677 !important;
  color: #ffffff !important;
}

.card-art-anim-badge svg,
html[data-theme="light"] .card-art-anim-badge svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}


/* Hover on Tertiary Green Done Buttons */
html[data-theme="light"] #btn-done-settings:hover,
html[data-theme="light"] #btn-done-changelog:hover,
html[data-theme="light"] #btn-done-guidelines:hover,
html[data-theme="light"] #btn-done-mobile-sliders:hover {
  background-color: #00c78f !important;
  color: #ffffff !important;
}

/* Submit Buttons: Keep Signature Vibrant Emerald Green with Crisp White Text */
html[data-theme="light"] #btn-submit-gallery,
html[data-theme="light"] #btn-submit-creation {
  background-color: #00a677 !important;
  color: #ffffff !important;
}

html[data-theme="light"] #btn-submit-gallery:hover,
html[data-theme="light"] #btn-submit-creation:hover {
  background-color: #00c78f !important;
  color: #ffffff !important;
}

html[data-theme="light"] #btn-submit-gallery svg,
html[data-theme="light"] #btn-submit-creation svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Tools & Brushes in Light Mode (Resting: Light Grey, Hover: Green Outline, Active: Green Filled) */
html[data-theme="light"] .btn-tool {
  background-color: #e4e4ea !important;
  color: #27272a !important;
  border-color: #d4d4d8 !important;
  outline: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .btn-tool:hover:not(.active) {
  background-color: #e4e4ea !important;
  border-color: #00a677 !important;
  outline: 1px solid #00a677 !important;
  color: #00a677 !important;
}

html[data-theme="light"] .btn-tool .tool-name,
html[data-theme="light"] .btn-tool span.text-white {
  color: #27272a !important;
}

html[data-theme="light"] .btn-tool .tool-shortcut {
  color: #71717a !important;
}

/* Active Tool Button in Light Mode: Signature Green Tertiary Accent with White Text/Icons */
html[data-theme="light"] .btn-tool.active {
  background-color: #00a677 !important;
  color: #ffffff !important;
  border-color: #00a677 !important;
  box-shadow: 0 2px 6px rgba(0, 166, 119, 0.25) !important;
}

html[data-theme="light"] .btn-tool.active i,
html[data-theme="light"] .btn-tool.active svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

html[data-theme="light"] .btn-tool.active svg[fill="currentColor"],
html[data-theme="light"] .btn-tool.active svg.text-emerald-400,
html[data-theme="light"] .btn-tool.active svg.text-sky-400,
html[data-theme="light"] .btn-tool.active svg.text-rose-400,
html[data-theme="light"] .btn-tool.active svg.text-amber-400,
html[data-theme="light"] .btn-tool.active svg.text-cyan-400,
html[data-theme="light"] .btn-tool.active svg.text-purple-400,
html[data-theme="light"] .btn-tool.active svg.text-indigo-400,
html[data-theme="light"] .btn-tool.active svg.text-fuchsia-400 {
  fill: #ffffff !important;
  color: #ffffff !important;
}

html[data-theme="light"] .btn-tool.active span,
html[data-theme="light"] .btn-tool.active .tool-name {
  color: #ffffff !important;
}

html[data-theme="light"] .btn-tool.active .tool-shortcut {
  color: #a7f3d0 !important;
  opacity: 1 !important;
}

/* Sidebar History & Utility Buttons in Light Mode */
html[data-theme="light"] .btn-undo,
html[data-theme="light"] .btn-redo,
html[data-theme="light"] .btn-undo-mob,
html[data-theme="light"] .btn-redo-mob,
html[data-theme="light"] .btn-clear-layer,
html[data-theme="light"] #btn-flip-h,
html[data-theme="light"] #btn-flip-v,
html[data-theme="light"] #btn-flip-h-mob,
html[data-theme="light"] #btn-flip-v-mob {
  background-color: #e4e4ea !important;
  color: #27272a !important;
  border-color: #d4d4d8 !important;
}

html[data-theme="light"] .btn-undo:hover,
html[data-theme="light"] .btn-redo:hover,
html[data-theme="light"] .btn-undo-mob:hover,
html[data-theme="light"] .btn-redo-mob:hover,
html[data-theme="light"] #btn-flip-h:hover,
html[data-theme="light"] #btn-flip-v:hover,
html[data-theme="light"] #btn-flip-h-mob:hover,
html[data-theme="light"] #btn-flip-v-mob:hover {
  background-color: #e4e4ea !important;
  border-color: #00a677 !important;
  outline: 1px solid #00a677 !important;
}

html[data-theme="light"] .btn-undo svg,
html[data-theme="light"] .btn-redo svg,
html[data-theme="light"] .btn-undo-mob svg,
html[data-theme="light"] .btn-redo-mob svg {
  fill: #27272a !important;
  color: #27272a !important;
}

/* Layers in Light Mode */
html[data-theme="light"] .layer-btn-lineart,
html[data-theme="light"] .layer-btn-shading,
html[data-theme="light"] .layer-card-sketch {
  background-color: #ffffff !important;
  color: #27272a !important;
  border-color: #d4d4d8 !important;
}

html[data-theme="light"] .layer-btn-lineart.bg-white,
html[data-theme="light"] .layer-btn-shading.bg-white,
html[data-theme="light"] .layer-card-sketch.active {
  background-color: #00a677 !important;
  color: #ffffff !important;
  border-color: #00a677 !important;
}

html[data-theme="light"] .layer-btn-lineart.bg-white *,
html[data-theme="light"] .layer-btn-shading.bg-white *,
html[data-theme="light"] .layer-card-sketch.active * {
  color: #ffffff !important;
}

html[data-theme="light"] .layer-btn-lineart.bg-white .layer-lineart-dot,
html[data-theme="light"] .layer-btn-shading.bg-white .layer-shading-dot {
  background-color: #ffffff !important;
}

/* Timeline & Filmstrip in Light Mode */
html[data-theme="light"] .frame-thumb {
  background-color: #ffffff !important;
  border-color: #d4d4d8 !important;
}

html[data-theme="light"] .frame-thumb.active {
  border-color: #00a677 !important;
  box-shadow: 0 0 0 2px #00a677 !important;
  outline: none !important;
}

html[data-theme="light"] .btn-copy-frame,
html[data-theme="light"] .btn-paste-frame,
html[data-theme="light"] .btn-merge-up,
html[data-theme="light"] .btn-merge-down,
html[data-theme="light"] .btn-delete-frame,
html[data-theme="light"] .btn-delete-all,
html[data-theme="light"] #btn-hold-dec,
html[data-theme="light"] #btn-hold-inc,
html[data-theme="light"] #btn-fit-screen,
html[data-theme="light"] #detail-frame-stepper,
html[data-theme="light"] #detail-btn-restart,
html[data-theme="light"] #detail-btn-edit,
html[data-theme="light"] #detail-btn-dl-gif:not(.bg-white):not([class*="bg-[#00a677]"]),
html[data-theme="light"] #detail-btn-dl-zip,
html[data-theme="light"] #detail-btn-dl-png,
html[data-theme="light"] #detail-btn-copy-link,
html[data-theme="light"] #detail-btn-report {
  background-color: #e4e4ea !important;
  color: #27272a !important;
  border-color: #d4d4d8 !important;
}

html[data-theme="light"] .btn-copy-frame:hover,
html[data-theme="light"] .btn-paste-frame:hover,
html[data-theme="light"] .btn-merge-up:hover,
html[data-theme="light"] .btn-merge-down:hover,
html[data-theme="light"] .btn-delete-frame:hover,
html[data-theme="light"] .btn-delete-all:hover,
html[data-theme="light"] #btn-hold-dec:hover,
html[data-theme="light"] #btn-hold-inc:hover,
html[data-theme="light"] #btn-fit-screen:hover,
html[data-theme="light"] #detail-btn-prev-frame:hover,
html[data-theme="light"] #detail-btn-next-frame:hover,
html[data-theme="light"] #detail-btn-restart:hover,
html[data-theme="light"] #detail-btn-edit:hover,
html[data-theme="light"] #detail-btn-dl-gif:not(.bg-white):not([class*="bg-[#00a677]"]):hover,
html[data-theme="light"] #detail-btn-dl-zip:hover,
html[data-theme="light"] #detail-btn-dl-png:hover,
html[data-theme="light"] #detail-btn-copy-link:hover {
  background-color: #e4e4ea !important;
  border-color: #00a677 !important;
  outline: 1px solid #00a677 !important;
  color: #00a677 !important;
}

html[data-theme="light"] #detail-btn-restart:hover svg,
html[data-theme="light"] #detail-btn-edit:hover svg,
html[data-theme="light"] #detail-btn-dl-png:hover svg,
html[data-theme="light"] #detail-btn-copy-link:hover svg {
  fill: #00a677 !important;
  color: #00a677 !important;
}

html[data-theme="light"] #btn-play,
html[data-theme="light"] #btn-play.bg-white,
html[data-theme="light"] #detail-btn-play,
html[data-theme="light"] #detail-btn-play.bg-white,
html[data-theme="light"] #detail-btn-replay,
html[data-theme="light"] #detail-btn-replay.bg-white {
  background-color: #00a677 !important;
  color: #ffffff !important;
}

html[data-theme="light"] #btn-play svg,
html[data-theme="light"] #btn-play polygon,
html[data-theme="light"] #detail-btn-play svg,
html[data-theme="light"] #detail-btn-replay svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

html[data-theme="light"] #btn-play *,
html[data-theme="light"] #detail-btn-play *,
html[data-theme="light"] #detail-btn-replay * {
  color: #ffffff !important;
}

/* Mobile Play Button: Green when Stopped (White Text), Red when Playing (White Text) */
html[data-theme="light"] .btn-play-mob.bg-emerald-500,
html[data-theme="light"] .btn-play-mob[class*="bg-[#00a677]"] {
  background-color: #00a677 !important;
  color: #ffffff !important;
}
html[data-theme="light"] .btn-play-mob.bg-emerald-500 *,
html[data-theme="light"] .btn-play-mob[class*="bg-[#00a677]"] * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

html[data-theme="light"] .btn-play-mob.bg-rose-500 {
  background-color: #f43f5e !important;
  color: #ffffff !important;
}
html[data-theme="light"] .btn-play-mob.bg-rose-500 * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

html[data-theme="light"] #btn-onion.active {
  background-color: #00a677 !important;
  color: #ffffff !important;
  border-color: #00a677 !important;
}

/* Greyscale Tone button text adapts directly to swatch lightness */
#btn-mobile-greyscale-cycle[style*="color: rgb(0, 0, 0)"],
#btn-mobile-greyscale-cycle[style*="color: #000000"] {
  color: #000000 !important;
}
#btn-mobile-greyscale-cycle[style*="color: rgb(255, 255, 255)"],
#btn-mobile-greyscale-cycle[style*="color: #ffffff"],
#btn-mobile-greyscale-cycle[style*="color:#fff"] {
  color: #ffffff !important;
}

/* Toast Notifications in Light Mode */
html[data-theme="light"] #toast,
html[data-theme="light"] #gallery-toast {
  background-color: #00a677 !important;
  color: #ffffff !important;
  border-color: #008761 !important;
}

/* =========================================================
   SETTINGS & CHANGELOG MODAL THEMING (LIGHT MODE)
   ========================================================= */

/* Settings, Changelog & Shortcuts Headers and Footers */
html[data-theme="light"] #settings-modal > div > div:first-child,
html[data-theme="light"] #changelog-modal > div > div:first-child,
html[data-theme="light"] #shortcuts-modal > div > div:first-child,
html[data-theme="light"] #settings-modal > div > div:last-child,
html[data-theme="light"] #changelog-modal > div > div:last-child,
html[data-theme="light"] #shortcuts-modal > div > div:last-child {
  background-color: #f4f4f6 !important;
  border-color: #d4d4dc !important;
}

/* Settings Export & Utility Buttons */
html[data-theme="light"] #btn-export-gif,
html[data-theme="light"] #btn-export-png,
html[data-theme="light"] #btn-export-zip,
html[data-theme="light"] #btn-open-changelog,
html[data-theme="light"] #btn-open-guidelines,
html[data-theme="light"] #btn-hard-reset-cache,
html[data-theme="light"] #btn-reset-shortcuts {
  background-color: #e4e4ea !important;
  border-color: #d4d4dc !important;
  color: #27272a !important;
  outline: none !important;
}

html[data-theme="light"] #btn-export-gif:hover,
html[data-theme="light"] #btn-export-png:hover,
html[data-theme="light"] #btn-export-zip:hover,
html[data-theme="light"] #btn-open-changelog:hover,
html[data-theme="light"] #btn-open-guidelines:hover,
html[data-theme="light"] #btn-hard-reset-cache:hover,
html[data-theme="light"] #btn-reset-shortcuts:hover {
  background-color: #d8d8e2 !important;
  border-color: #00a677 !important;
  outline: 1px solid #00a677 !important;
}

html[data-theme="light"] #btn-export-gif svg,
html[data-theme="light"] #btn-export-png svg,
html[data-theme="light"] #btn-export-zip svg {
  color: #00a677 !important;
}

/* Settings Destructive Action Button */
html[data-theme="light"] #btn-clear-cache {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

html[data-theme="light"] #btn-clear-cache:hover {
  background-color: #fee2e2 !important;
  border-color: #f87171 !important;
  outline: 1px solid #f87171 !important;
}

html[data-theme="light"] #btn-clear-cache svg {
  color: #ef4444 !important;
}

html[data-theme="light"] #btn-clear-cache span.bg-rose-500\/10 {
  background-color: rgba(244, 63, 94, 0.15) !important;
  color: #be123c !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}

/* Changelog Cards & Metadata */
html[data-theme="light"] #changelog-modal .p-4.rounded-xl {
  background-color: #f4f4f6 !important;
  border-color: #d4d4dc !important;
}

html[data-theme="light"] #changelog-modal .p-4.rounded-xl span.text-white {
  color: #27272a !important;
}

html[data-theme="light"] #changelog-modal ul li,
html[data-theme="light"] #changelog-modal p {
  color: #3f3f46 !important;
}

html[data-theme="light"] #changelog-modal strong {
  color: #18181b !important;
}

html[data-theme="light"] #changelog-modal .bg-zinc-800\/60 {
  background-color: #e4e4ea !important;
  color: #52525b !important;
  border-color: #d4d4dc !important;
}

html[data-theme="light"] #changelog-modal kbd {
  background-color: #e4e4ea !important;
  color: #27272a !important;
  border-color: #d4d4dc !important;
}

/* Gallery Cards in Light Mode */
html[data-theme="light"] .gallery-card-pop {
  border-color: #d4d4dc !important;
  outline: 3px solid transparent !important;
  outline-offset: 0 !important;
  transition: none !important;
}

html[data-theme="light"] .gallery-card-pop:hover,
html[data-theme="light"] .gallery-card-pop:focus-visible {
  transform: none !important;
  border-color: #00a677 !important;
  outline: 3px solid #00a677 !important;
  transition: none !important;
}

/* Sidebar Shortcuts Button & Shortcuts Modal */
html[data-theme="light"] #btn-sidebar-shortcuts {
  background-color: #f4f4f6 !important;
  border-color: #d4d4dc !important;
  color: #555562 !important;
}

html[data-theme="light"] #btn-sidebar-shortcuts:hover {
  background-color: #eaeaef !important;
  color: #111114 !important;
  border-color: #00a677 !important;
}

html[data-theme="light"] #btn-sidebar-shortcuts kbd {
  background-color: #ffffff !important;
  border-color: #d4d4dc !important;
  color: #111114 !important;
}

html[data-theme="light"] #shortcuts-modal kbd {
  background-color: #f4f4f6 !important;
  border-color: #d4d4dc !important;
  color: #111114 !important;
}

html[data-theme="light"] .btn-rebind-tool {
  background-color: #ffffff !important;
  border-color: #d4d4dc !important;
  color: #111114 !important;
}

html[data-theme="light"] .btn-rebind-tool:hover {
  background-color: #f4f4f6 !important;
  border-color: #00a677 !important;
}

html[data-theme="light"] #btn-modal-reset-shortcuts {
  background-color: #f4f4f6 !important;
  border-color: #d4d4dc !important;
  color: #555562 !important;
}

html[data-theme="light"] #btn-modal-reset-shortcuts:hover {
  color: #00a677 !important;
  border-color: #00a677 !important;
}