/* CelRelay Minimalist Studio Styles - Clean, Accessible & Lightweight */

:root {
  --bg: #121214;
  --surface: #1a1a1e;
  --surface-hover: #26262b;
  --border: #2e2e36;
  --text: #ededed;
  --text-muted: #888894;
  --accent: #00a677;
  --card-h: clamp(130px, 15vw, 180px);
}

@media (max-width: 640px) {
  :root {
    --card-h: clamp(68px, 19vw, 90px);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --card-h: clamp(95px, 15vw, 130px);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  outline: none !important;
}

/* ==========================================================================
   Clean Borderless Aesthetic - Zero Outlines / Seamless Solid Surfaces
   ========================================================================== */

header, footer, aside, button, input, select, textarea,
.btn-tool, .frame-thumb, .modal-dialog,
[class*="border-"], [class*="border"],
#mobile-dock, #mobile-sliders-drawer, #zoom-container,
#detail-modal .bg-\[\#16161a\], #detail-modal .bg-\[\#1f1f24\]\/40 {
  border: none !important;
  outline: none !important;
}

@import url('https://fonts.googleapis.com/css2?family=Lekton:ital,wght@0,400;0,700;1,400&family=Share+Tech+Mono&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Default Body & Paragraph Typography - Space Grotesk for optimal readability while keeping retro-tech aesthetic */
html, body, button, input, select, textarea, optgroup, a, span, p, label, div {
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
}

/* Retro-Tech Monospace Elements: Titles, Headings, Shortcuts, Badges, Values, and Labels */
h1, h2, h3, h4, h5, h6, kbd, code, pre, .font-mono, .share-tech-mono-regular, [data-cheat-shortcut], .tool-name, .btn-tool {
  font-family: "Lekton", "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

.share-tech-mono-regular {
  font-family: "Share Tech Mono", "Lekton", monospace !important;
  font-weight: 400;
  font-style: normal;
}

.font-sans, .font-body {
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif !important;
}

html, body {
  background-color: var(--bg);
  color: var(--text);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Gallery Page Layout & Scrolling */
body.gallery-page {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: auto;
}

body.gallery-page main {
  flex: 1 1 0%;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

body.gallery-page #gallery-grid {
  touch-action: pan-y;
}

.pixelated {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Lasso & Floating Selection Overlay */
.lasso-marching-ants {
  position: absolute;
  pointer-events: none;
  border: 1px dashed #00a677;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.filmstrip-hold-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #00a677;
  color: #000000;
  font-family: ui-monospace, monospace;
  font-size: 8px;
  font-weight: 800;
  padding: 0 3px;
  border-radius: 3px;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Animated Collapsible Timeline Drawer */
#timeline-drawer-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
  opacity: 1;
}

#timeline-drawer-wrapper.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

#timeline-drawer-content {
  overflow: hidden;
  min-height: 0;
}

/* ==========================================================================
   Button Hover Highlights & Dynamic Icon Scaling (Clean & High-Contrast)
   ========================================================================== */

/* Universal smooth transitions for buttons, links, and icons (No Glows) */
button,
a,
.btn-tool,
.frame-thumb,
.btn-undo,
.btn-clear-layer,
.btn-delete-all,
.btn-delete-frame,
.btn-copy-frame,
.btn-paste-frame,
.btn-hold-dec,
.btn-hold-inc,
.btn-fit-screen-mob,
#btn-fit-screen,
#btn-submit-gallery,
#btn-play,
#btn-onion,
.layer-btn-lineart,
.layer-btn-shading,
.layer-card-sketch {
  transition: background-color 140ms ease,
              border-color 140ms ease,
              color 140ms ease,
              transform 120ms ease;
}

/* Smooth icon growth transition on hover */
button svg,
button img,
a svg,
a img,
.btn-tool svg,
.btn-tool img,
.frame-thumb svg {
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover effects for pointing devices (Clean & High-Contrast - Zero Glow) */
@media (hover: hover) and (pointer: fine) {
  /* Default inactive button hover */
  button:hover:not(:disabled):not(.active):not(.is-active),
  a:hover:not(.active):not(.is-active) {
    background-color: #272730;
    color: #ffffff;
  }

  /* Icon grows slightly on hover */
  button:hover:not(:disabled) svg,
  button:hover:not(:disabled) img,
  a:hover svg,
  a:hover img,
  .btn-tool:hover:not(:disabled) svg,
  .btn-tool:hover:not(:disabled) img {
    transform: scale(1.15);
  }

  /* Active / Selected Tool Button Hover - Stays Light with Crisp Dark Text & Icons */
  .btn-tool.active {
    background-color: #ededed !important;
    color: #121214 !important;
    border-color: #ffffff !important;
  }

  .btn-tool.active:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  .btn-tool.active:hover i,
  .btn-tool.active:hover svg {
    stroke: #000000 !important;
    color: #000000 !important;
  }

  .btn-tool.active:hover svg[fill="currentColor"] {
    fill: #000000 !important;
  }

  .btn-tool.active:hover span,
  .btn-tool.active:hover .tool-name,
  .btn-tool.active:hover .tool-shortcut {
    color: #000000 !important;
  }

  /* Layer Buttons & Cards - Active vs Inactive Hover States */
  .layer-btn-lineart.is-active,
  .layer-btn-shading.is-active,
  .layer-card-sketch.is-active {
    background-color: #ededed !important;
    color: #121214 !important;
    border-color: #ffffff !important;
  }

  .layer-btn-lineart.is-active:hover,
  .layer-btn-shading.is-active:hover,
  .layer-card-sketch.is-active:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  .layer-btn-lineart.is-active *,
  .layer-btn-shading.is-active *,
  .layer-card-sketch.is-active * {
    color: #121214 !important;
  }

  .layer-btn-lineart.is-active:hover *,
  .layer-btn-shading.is-active:hover *,
  .layer-card-sketch.is-active:hover * {
    color: #000000 !important;
  }

  .layer-btn-lineart:not(.is-active):hover,
  .layer-btn-shading:not(.is-active):hover,
  .layer-card-sketch:not(.is-active):hover {
    background-color: #272730 !important;
    color: #ffffff !important;
  }

  /* Header Submit button hover */
  #btn-submit-gallery:hover {
    background-color: #00c78f !important;
    color: #ffffff !important;
  }

  #btn-submit-gallery:hover svg {
    fill: #ffffff !important;
  }

  #btn-submit-gallery:hover span {
    color: #ffffff !important;
  }

  /* Play button hover */
  #btn-play:hover,
  .btn-play-mob:hover {
    background-color: #34d399 !important;
    color: #000000 !important;
  }

  /* Swatches hover growth */
  .swatch:hover {
    transform: scale(1.15);
  }
}

/* Range Sliders - High Contrast & Clearly Visible */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: #27272a;
  border: 1px solid #3f3f46;
  border-radius: 9999px;
  height: 6px;
  outline: none;
  cursor: pointer;
  accent-color: #00a677 !important;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: #27272a;
  border: 1px solid #3f3f46;
  border-radius: 9999px;
  height: 6px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00a677 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  margin-top: -5px;
  transition: transform 0.1s ease, background 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.15);
  background: #00c28c !important;
}

input[type="range"]::-moz-range-track {
  background: #27272a;
  border: 1px solid #3f3f46;
  border-radius: 9999px;
  height: 6px;
}

input[type="range"]::-moz-range-progress {
  background: #00a677 !important;
  border-radius: 9999px;
  height: 6px;
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00a677 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb:hover,
input[type="range"]::-moz-range-thumb:active {
  transform: scale(1.15);
  background: #00c28c !important;
}

/* Canvas viewport */
.viewport-area {
  background-color: #0d0d0f;
  background-image: radial-gradient(#222228 1px, transparent 1px);
  background-size: 16px 16px;
}

.canvas-box {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 0 1px #33333d;
  touch-action: none;
}

/* Active buttons in Dark Mode */
.btn-tool.active {
  background-color: #ededed !important;
  color: #121214 !important;
  border-color: #ffffff !important;
}

.btn-tool.active i,
.btn-tool.active svg {
  stroke: #121214 !important;
  color: #121214 !important;
}

.btn-tool.active svg[fill="currentColor"] {
  fill: #121214 !important;
}

.btn-tool.active span,
.btn-tool.active span.text-amber-300,
.btn-tool.active span.text-emerald-300,
.btn-tool.active span.text-purple-300,
.btn-tool.active span.text-indigo-300 {
  color: #121214 !important;
}

.btn-tool.active .tool-shortcut {
  color: #121214 !important;
  opacity: 0.75;
}

.frame-thumb.active {
  border-color: #ededed !important;
  box-shadow: 0 0 0 2px #ededed;
}

/* Modal */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
}

/* Gallery Preview Modal Entrance Animation */
@keyframes detailModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes detailModalCardPop {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(24px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#detail-modal.flex {
  animation: detailModalFadeIn 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#detail-modal.flex .detail-modal-card {
  animation: detailModalCardPop 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
  transform-origin: center center;
}

/* Custom Slim Scrollbars for Mobile & Desktop */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #2e2e36;
  border-radius: 4px;
}

/* Mobile Tools Drawer Collapsible Transition (< 1024px only) */
@media (max-width: 1023px) {
  #mobile-tools-drawer {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease;
    opacity: 1;
  }

  #mobile-tools-drawer.is-collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
    border-bottom: none !important;
  }

  #mobile-tools-content {
    overflow: hidden;
    min-height: 0;
  }

  #mobile-tools-bar {
    overflow: hidden;
  }

  #left-sidebar {
    display: none !important;
  }
}

/* Side Toolbar Position (Desktop Left / Right) */
html[data-toolbar-pos="right"] #left-sidebar {
  order: 2 !important;
  border-right: none !important;
  border-left: 1px solid #26262d !important;
}

html[data-toolbar-pos="right"] #workspace {
  order: 1 !important;
}

html[data-theme="light"][data-toolbar-pos="right"] #left-sidebar {
  border-left: 1px solid #d4d4dc !important;
  border-right: none !important;
}

/* Desktop Protection: Strictly hide all mobile-only drawer elements on >= 1024px */
@media (min-width: 1024px) {
  #mobile-tools-drawer,
  #btn-reveal-mobile-tools,
  #btn-toggle-mobile-tools {
    display: none !important;
  }
}

#mobile-sliders-drawer {
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   Gallery Card Pop-In & Stagger Entrance Animation
   ========================================================================== */

@keyframes cardPopIn {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(14px);
  }
  70% {
    opacity: 1;
    transform: scale(1.02) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.gallery-card-pop {
  height: var(--card-h);
  border-radius: 18px;
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  display: block;
  animation: cardPopIn 0.32s cubic-bezier(0.18, 0.9, 0.32, 1.25) backwards;
  will-change: transform, opacity;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s ease;
}

.gallery-card-pop:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}

@media (max-width: 1023px) {
  .gallery-card-pop {
    border-radius: 10px;
  }
}

/* Hide any Netlify Drawer / Feedback / Deploy Preview Badges */
#netlify-drawer,
[data-netlify-drawer],
.netlify-badge,
iframe#netlify-drawer-iframe,
div[id*="netlify"],
div[class*="netlify-drawer"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* UI Size / Scale Modifiers for HTML, Header, and Sidebar */
header {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(0.625rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.625rem, env(safe-area-inset-right, 0px));
  box-sizing: content-box;
}

html[data-ui-size="compact"] {
  font-size: 13px;
}
html[data-ui-size="compact"] header {
  height: 3rem;
}
@media (min-width: 1024px) {
  html[data-ui-size="compact"] header {
    height: 2.5rem;
  }
  html[data-ui-size="compact"] #left-sidebar {
    width: 10.5rem;
  }
}

html[data-ui-size="default"] {
  font-size: 14px;
}
html[data-ui-size="default"] header {
  height: 3.5rem;
}
@media (min-width: 1024px) {
  html[data-ui-size="default"] header {
    height: 2.75rem;
  }
  html[data-ui-size="default"] #left-sidebar {
    width: 12rem;
  }
}

html[data-ui-size="large"] {
  font-size: 16px;
}
html[data-ui-size="large"] header {
  height: 3.75rem;
}
@media (min-width: 1024px) {
  html[data-ui-size="large"] header {
    height: 3.25rem;
  }
  html[data-ui-size="large"] #left-sidebar {
    width: 13.5rem;
  }
}

html[data-ui-size="xlarge"] {
  font-size: 18px;
}
html[data-ui-size="xlarge"] header {
  height: 4.25rem;
}
@media (min-width: 1024px) {
  html[data-ui-size="xlarge"] header {
    height: 3.75rem;
  }
  html[data-ui-size="xlarge"] #left-sidebar {
    width: 15.5rem;
  }
}


/* --- Cool Emerald Entrance Animation for New Gallery Creations --- */
@keyframes newCreationPop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(-14px);
    box-shadow: 0 0 0 0 rgba(0, 166, 119, 0);
    border-color: #00a677;
  }
  40% {
    opacity: 1;
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 0 26px 4px rgba(0, 166, 119, 0.65);
    border-color: #00a677;
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: 0 0 0 0 rgba(0, 166, 119, 0);
    border-color: #26262d;
  }
}

.card-new-arrival {
  animation: newCreationPop 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Floating Top Gallery Notice Pill (+1) */
.top-notice-pill {
  position: fixed;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%) translateY(-20px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.top-notice-pill.show {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
}

.top-notice-pill.hide {
  transform: translateX(-50%) translateY(-14px) scale(0.95);
  opacity: 0;
}

/* Ko-fi Header Widget Styling */
#kofi-header-widget .btn-container {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#kofi-header-widget .kofi-button {
  padding: 0 7px !important;
  height: 28px !important;
  line-height: 28px !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  white-space: nowrap !important;
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}

#kofi-header-widget .kofi-button:active {
  transform: scale(0.96) !important;
}

#kofi-header-widget .kofitext {
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: normal !important;
}

#kofi-header-widget .kofiimg {
  height: 12px !important;
  width: auto !important;
  margin-right: 4px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

@media (max-width: 639px) {
  #kofi-header-widget .kofi-button {
    padding: 0 5px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }
  #kofi-header-widget .kofitext {
    font-size: 10px !important;
  }
  #kofi-header-widget .kofiimg {
    height: 10px !important;
    margin-right: 3px !important;
  }
}

/* =========================================================
   Light Theme UI Shell Overrides
   (Transforms UI chrome: headers, sidebars, modals, buttons.
    Drawing canvas, layers, pens, and art pixels remain untouched.)
   ========================================================= */
html[data-theme="light"] {
  --bg: #f4f4f6;
  --surface: #ffffff;
  --surface-hover: #f0f0f4;
  --border: #d4d4d8;
  --text: #18181b;
  --text-muted: #71717a;
}

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

/* Light Mode Canvas Viewport & Modal Player Dotted Grid */
html[data-theme="light"] .viewport-area,
html[data-theme="light"] #detail-modal .bg-\[\#0d0d0f\] {
  background-color: #e5e5ea !important;
  background-image: radial-gradient(#b8b8c2 1.2px, transparent 1.2px) !important;
  background-size: 16px 16px !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"] #btn-reveal-mobile-tools,
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"] #mobile-sliders-modal > div,
html[data-theme="light"] #detail-modal > div,
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) */
html[data-theme="light"] .bg-\[\#141418\],
html[data-theme="light"] .bg-\[\#111115\],
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"] #mobile-top-subbar {
  background-color: #f0f0f4 !important;
}

/* Interactive Chips, Inputs, Inactive Buttons & Containers */
html[data-theme="light"] .bg-\[\#1f1f24\],
html[data-theme="light"] .bg-\[\#282830\],
html[data-theme="light"] .bg-\[\#282832\],
html[data-theme="light"] .bg-\[\#25252b\],
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;
}

/* Hover 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 {
  background-color: #d8d8e2 !important;
}

/* Borders & Separators */
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-\[\#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 backgrounds get BLACK / DARK CHARCOAL text (#18181b / #52525b).
   Dark backgrounds 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: #18181b !important;
}

html[data-theme="light"] strong,
html[data-theme="light"] strong.text-white {
  color: #000000 !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: #000000 !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: #18181b !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: #18181b !important;
}

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

html[data-theme="light"] .btn-theme-mode:not(.bg-white):hover,
html[data-theme="light"] .btn-ui-size:not(.bg-white):hover,
html[data-theme="light"] .btn-toolbar-pos:not(.bg-white):hover,
html[data-theme="light"] .filter-btn:not(.bg-white):hover {
  background-color: #d8d8e2 !important;
  color: #000000 !important;
}

/* 3. DARK BACKGROUND ELEMENTS: PURE WHITE TEXT & ICONS */
html[data-theme="light"] header span.bg-white,
html[data-theme="light"] .filter-btn.bg-white,
html[data-theme="light"] #ratio-square.bg-white,
html[data-theme="light"] #ratio-horizontal.bg-white,
html[data-theme="light"] #ratio-vertical.bg-white,
html[data-theme="light"] .btn-ui-size.bg-white,
html[data-theme="light"] .btn-theme-mode.bg-white,
html[data-theme="light"] .btn-toolbar-pos.bg-white,
html[data-theme="light"] #btn-done-settings,
html[data-theme="light"] #btn-done-changelog,
html[data-theme="light"] #btn-done-guidelines,
html[data-theme="light"] #btn-done-mobile-sliders,
html[data-theme="light"] #detail-btn-play.bg-white,
html[data-theme="light"] #detail-btn-replay.bg-white,
html[data-theme="light"] #detail-btn-dl-gif.bg-white,
html[data-theme="light"] .card-art-badge,
html[data-theme="light"] .filmstrip-hold-badge,
html[data-theme="light"] .bg-black\/75,
html[data-theme="light"] .bg-black\/60,
html[data-theme="light"] .bg-black\/80,
html[data-theme="light"] #toast,
html[data-theme="light"] #gallery-toast {
  background-color: #18181b !important;
  color: #ffffff !important;
}

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

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

/* Hover on Dark Primary 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: #27272a !important;
  color: #ffffff !important;
}

/* Submit Buttons: Keep Signature Vibrant Emerald Green with Bold Black Text */
html[data-theme="light"] #btn-submit-gallery,
html[data-theme="light"] #btn-submit-creation {
  background-color: #10b981 !important;
  color: #000000 !important;
}

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

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

/* Tools & Brushes in Light Mode */
html[data-theme="light"] .btn-tool {
  background-color: #ffffff !important;
  color: #18181b !important;
  border-color: #d4d4d8 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

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

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

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

/* Active Tool Button in Light Mode: Dark Background with Pure White Text/Icons */
html[data-theme="light"] .btn-tool.active {
  background-color: #18181b !important;
  color: #ffffff !important;
  border-color: #18181b !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !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: #ffffff !important;
  color: #18181b !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: #f4f4f6 !important;
  border-color: #a1a1aa !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: #18181b !important;
  color: #18181b !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: #18181b !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: #18181b !important;
  color: #ffffff !important;
  border-color: #18181b !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: #18181b !important;
  box-shadow: 0 0 0 2px #18181b !important;
}

html[data-theme="light"] .btn-copy-frame,
html[data-theme="light"] .btn-paste-frame,
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 {
  background-color: #ffffff !important;
  color: #18181b !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-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 {
  background-color: #f4f4f6 !important;
  border-color: #a1a1aa !important;
}

html[data-theme="light"] #btn-play.bg-white {
  background-color: #18181b !important;
  color: #ffffff !important;
}

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

/* Mobile Play Button: Green when Stopped (Black Text), Red when Playing (White Text) */
html[data-theme="light"] .btn-play-mob.bg-emerald-500 {
  background-color: #10b981 !important;
  color: #000000 !important;
}
html[data-theme="light"] .btn-play-mob.bg-emerald-500 * {
  color: #000000 !important;
  fill: #000000 !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: #18181b !important;
  color: #ffffff !important;
  border-color: #18181b !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: #18181b !important;
  color: #ffffff !important;
  border-color: #3f3f46 !important;
}

/* ==========================================================================
   Seamless Page & View Transitions (Canvas <-> Gallery)
   ========================================================================== */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.12s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

body.page-leaving {
  opacity: 0 !important;
  transform: scale(0.995) !important;
  pointer-events: none;
}