:root {
  --sp-shop-bg: #f6f3ec;
  --sp-shop-bg-2: #efeae0;
  --sp-shop-bg-3: #e6dfd0;
  --sp-shop-paper: #fbf9f4;
  --sp-shop-ink: #1a1714;
  --sp-shop-ink-2: #3d3833;
  --sp-shop-muted: #6e655c;
  --sp-shop-line: #d6cdbb;
  --sp-shop-line-2: #c9bfac;
  --sp-shop-accent: #c8a24a;
  --sp-shop-accent-2: #9a7727;
  --sp-shop-gold: #c8a24a;
  --sp-font-sans: "Inter", "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sp-font-label: "Inter", "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sp-font-mono: "Inter", "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[lang="he"] {
  --sp-font-sans: "Noto Sans Hebrew", "Inter", "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sp-font-label: "Noto Sans Hebrew", "Inter", "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[lang="ar"] {
  --sp-font-sans: "Noto Sans Arabic", "Inter", "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sp-font-label: "Noto Sans Arabic", "Inter", "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body {
  background: var(--sp-shop-bg) !important;
  color: var(--sp-shop-ink) !important;
  font-family: var(--sp-font-sans) !important;
}

body,
button,
input,
select,
textarea {
  border-radius: 0 !important;
  font-family: var(--sp-font-sans) !important;
}

input,
select,
textarea {
  background: var(--sp-shop-paper) !important;
  color: var(--sp-shop-ink) !important;
  border-color: var(--sp-shop-line) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--sp-shop-ink) !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
}

.kbd,
kbd {
  font-family: var(--sp-font-label) !important;
  letter-spacing: 0 !important;
}

#home-view {
  background: var(--sp-shop-bg) !important;
}

#home-view header {
  background: color-mix(in oklab, var(--sp-shop-bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--sp-shop-line) !important;
  box-shadow: none !important;
}

#home-view header a,
#home-view header a *,
#home-view header button,
#home-view header select {
  font-family: var(--sp-font-sans) !important;
  font-style: normal !important;
  letter-spacing: .02em !important;
}

#home-view header a > div:first-child {
  font-weight: 800 !important;
}

#home-view main {
  max-width: 1280px !important;
  padding-top: 40px !important;
}

#home-view h1,
#home-view h2,
#home-view h3,
#home-view .font-display {
  font-family: var(--sp-font-sans) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: var(--sp-shop-ink) !important;
}

#home-view h2 {
  font-size: clamp(30px, 3.7vw, 52px) !important;
  line-height: 1.06 !important;
}

#home-view p,
#home-view .text-slate-500,
#home-view .text-slate-400 {
  color: var(--sp-shop-muted) !important;
}

#home-view .bg-gradient-to-r,
#home-view .bg-gradient-to-br,
#home-view .bg-gradient-to-b {
  background-image: none !important;
}

.how-step-circle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 0 !important;
  background: var(--sp-shop-ink) !important;
  color: var(--sp-shop-paper) !important;
  box-shadow: none !important;
  border: 1px solid var(--sp-shop-ink) !important;
}

#home-view .absolute.top-\[26px\] {
  background: var(--sp-shop-line) !important;
  height: 1px !important;
}

#template-grid > div,
.saved-album-card {
  background: var(--sp-shop-paper) !important;
  border: 1px solid var(--sp-shop-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

#template-grid > div:hover,
.saved-album-card:hover {
  border-color: var(--sp-shop-accent) !important;
  box-shadow: 0 4px 24px rgba(26, 23, 20, 0.06) !important;
  transform: translateY(-2px) !important;
}

#template-grid .rounded-2xl,
#template-grid .rounded-xl,
#template-grid .rounded-lg,
#template-grid .rounded-md,
#template-grid .rounded-sm,
.saved-album-card .rounded-xl,
.saved-album-card .rounded-lg,
.saved-album-card .rounded-md {
  border-radius: 0 !important;
}

#template-grid .bg-slate-50,
#template-grid .bg-slate-100,
#template-grid .bg-slate-200,
#template-grid .bg-white,
.saved-album-card .bg-slate-50,
.saved-album-card .bg-white {
  background-color: var(--sp-shop-bg-2) !important;
}

#template-grid h3,
.saved-album-card h3 {
  font-family: var(--sp-font-sans) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
}

#template-grid .text-accent,
.saved-album-card .text-accent {
  color: var(--sp-shop-accent) !important;
}

#template-grid [class*="tracking"],
.saved-album-card [class*="tracking"] {
  font-family: var(--sp-font-label) !important;
  letter-spacing: .04em !important;
}

#saved-albums-section .bg-indigo-100,
#saved-empty-state,
#siteAnnouncement {
  background: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-line) !important;
  border-radius: 0 !important;
}

#editor-view {
  background: var(--sp-shop-bg) !important;
}

#editor-view > header {
  background: color-mix(in oklab, var(--sp-shop-bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--sp-shop-line) !important;
  color: var(--sp-shop-ink) !important;
  box-shadow: none !important;
}

#editor-view > header button,
#editor-view > header select,
#editor-view > header input {
  background: transparent !important;
  border: 1px solid var(--sp-shop-line-2) !important;
  color: var(--sp-shop-ink-2) !important;
  font-family: var(--sp-font-label) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  box-shadow: none !important;
}

#editor-view > header button:hover,
#editor-view > header select:hover {
  border-color: var(--sp-shop-accent) !important;
  color: var(--sp-shop-accent) !important;
}

#editor-title {
  font-family: var(--sp-font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--sp-shop-ink) !important;
  border-color: transparent !important;
}

#generateBtn {
  background: var(--sp-shop-ink) !important;
  color: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-ink) !important;
}

#generateBtn:hover {
  background: var(--sp-shop-accent) !important;
  border-color: var(--sp-shop-accent) !important;
  color: var(--sp-shop-paper) !important;
}

#editorSidebar,
#rightSidebar {
  background: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-line) !important;
  color: var(--sp-shop-ink) !important;
}

#editorSidebar .border-slate-100,
#rightSidebar .border-slate-100,
#editorSidebar .border-slate-200,
#rightSidebar .border-slate-200 {
  border-color: var(--sp-shop-line) !important;
}

.sidebar-section-btn,
#editorSidebar label,
#rightSidebar label,
#editorSidebar .uppercase,
#rightSidebar .uppercase {
  font-family: var(--sp-font-label) !important;
  color: var(--sp-shop-muted) !important;
  letter-spacing: .04em !important;
}

.sidebar-section-btn:hover {
  background: var(--sp-shop-bg-2) !important;
  color: var(--sp-shop-accent) !important;
}

.sidebar-section-icon {
  background: var(--sp-shop-bg-2) !important;
  color: var(--sp-shop-accent) !important;
  border-radius: 0 !important;
}

#editorSidebar button,
#rightSidebar button,
#designModal button,
.undo-btn,
.page-ord-btn,
.zoom-pill,
.tool-btn,
.tfb,
.stk-cat,
.prop-tab {
  border-radius: 0 !important;
  box-shadow: none !important;
}

#editorSidebar .bg-indigo-50,
#rightSidebar .bg-indigo-50,
#editorSidebar .bg-violet-50,
#rightSidebar .bg-violet-50,
#editorSidebar .bg-blue-50,
#rightSidebar .bg-blue-50,
#editorSidebar .bg-pink-50,
#rightSidebar .bg-pink-50,
#editorSidebar .bg-green-50,
#rightSidebar .bg-green-50,
#editorSidebar .bg-amber-50,
#rightSidebar .bg-amber-50,
#editorSidebar .bg-slate-50,
#rightSidebar .bg-slate-50,
#editorSidebar .bg-slate-100,
#rightSidebar .bg-slate-100 {
  background: var(--sp-shop-bg-2) !important;
}

#editorSidebar .text-accent,
#rightSidebar .text-accent,
#designModal .text-accent,
#editorSidebar .text-indigo-500,
#rightSidebar .text-indigo-500,
#editorSidebar .text-violet-500,
#rightSidebar .text-violet-500,
#editorSidebar .text-pink-500,
#rightSidebar .text-pink-500,
#editorSidebar .text-blue-500,
#rightSidebar .text-blue-500 {
  color: var(--sp-shop-accent) !important;
}

#editorSidebar .bg-accent,
#rightSidebar .bg-accent,
#designModal .bg-accent,
#editorSidebar button.bg-accent,
#rightSidebar button.bg-accent {
  background: var(--sp-shop-ink) !important;
  color: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-ink) !important;
}

#editorSidebar button:hover,
#rightSidebar button:hover,
.undo-btn:hover:not(:disabled),
.page-ord-btn:hover,
.tool-btn:hover,
.stk-cat:hover,
.prop-tab:hover {
  background: var(--sp-shop-bg-2) !important;
  color: var(--sp-shop-accent) !important;
  border-color: var(--sp-shop-accent) !important;
}

.stk-cat.active,
.prop-tab.active {
  background: var(--sp-shop-ink) !important;
  color: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-ink) !important;
  outline-color: var(--sp-shop-accent) !important;
}

.bg-canvas-pattern {
  background-color: var(--sp-shop-bg) !important;
  background-image: radial-gradient(var(--sp-shop-line-2) 1px, transparent 1px) !important;
}

.page-card-wrap > div,
.page-edit-btn,
.floating-toolbar,
.page-menu,
#layoutModal .bg-white,
#designModal .bg-white,
#saveModal .bg-white,
#authModal .bg-white,
#aiModal .bg-white {
  border-radius: 0 !important;
  box-shadow: 0 4px 24px rgba(26, 23, 20, 0.06) !important;
  border-color: var(--sp-shop-line) !important;
}

.page-edit-btn {
  background: var(--sp-shop-ink) !important;
  color: var(--sp-shop-paper) !important;
  font-family: var(--sp-font-label) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.page-edit-btn:hover {
  background: var(--sp-shop-accent) !important;
}

.zoom-pill {
  background: var(--sp-shop-paper) !important;
  border: 1px solid var(--sp-shop-line) !important;
}

.zoom-pill span,
.zoom-pill button {
  color: var(--sp-shop-ink-2) !important;
}

.toast {
  border-radius: 0 !important;
  background: var(--sp-shop-ink) !important;
  color: var(--sp-shop-paper) !important;
}

.toast.success {
  background: var(--ok, #5a7340) !important;
}

.toast.error {
  background: var(--danger, #a3331b) !important;
}

html.dark #home-view,
html.dark #editor-view {
  background: #16140f !important;
}

html.dark #home-view header,
html.dark #editor-view > header,
html.dark #editorSidebar,
html.dark #rightSidebar {
  background: #1a1813 !important;
  border-color: #2f2a21 !important;
}

html.dark #home-view h1,
html.dark #home-view h2,
html.dark #home-view h3,
html.dark #editor-view > header,
html.dark #editor-title {
  color: #f4efe3 !important;
}

/* Final cascade guard for utility/inline styles left in the editor markup. */
#editor-view > header #generateBtn {
  background: var(--sp-shop-ink) !important;
  color: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-ink) !important;
}

#editor-view > header #generateBtn:hover {
  background: var(--sp-shop-accent) !important;
  color: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-accent) !important;
}

#editor-view #editorSidebar .bg-indigo-50,
#editor-view #rightSidebar .bg-indigo-50,
#editor-view #designModal .bg-indigo-50,
#editor-view #editorSidebar [class*="bg-indigo-50"],
#editor-view #rightSidebar [class*="bg-indigo-50"],
#editor-view #designModal [class*="bg-indigo-50"],
#editor-view #editorSidebar .bg-indigo-100,
#editor-view #rightSidebar .bg-indigo-100,
#editor-view #designModal .bg-indigo-100,
#editor-view #editorSidebar [class*="bg-indigo-100"],
#editor-view #rightSidebar [class*="bg-indigo-100"],
#editor-view #designModal [class*="bg-indigo-100"],
#editor-view #editorSidebar .bg-violet-50,
#editor-view #rightSidebar .bg-violet-50,
#editor-view #designModal .bg-violet-50,
#editor-view #editorSidebar [class*="bg-violet-50"],
#editor-view #rightSidebar [class*="bg-violet-50"],
#editor-view #designModal [class*="bg-violet-50"],
#editor-view #editorSidebar .bg-violet-100,
#editor-view #rightSidebar .bg-violet-100,
#editor-view #designModal .bg-violet-100,
#editor-view #editorSidebar [class*="bg-violet-100"],
#editor-view #rightSidebar [class*="bg-violet-100"],
#editor-view #designModal [class*="bg-violet-100"],
#editor-view #editorSidebar .hover\:bg-indigo-50:hover,
#editor-view #rightSidebar .hover\:bg-indigo-50:hover,
#editor-view #designModal .hover\:bg-indigo-50:hover,
#editor-view #editorSidebar .hover\:bg-indigo-100:hover,
#editor-view #rightSidebar .hover\:bg-indigo-100:hover,
#editor-view #designModal .hover\:bg-indigo-100:hover,
#editor-view #editorSidebar .hover\:bg-violet-50:hover,
#editor-view #rightSidebar .hover\:bg-violet-50:hover,
#editor-view #designModal .hover\:bg-violet-50:hover,
#editor-view #editorSidebar .hover\:bg-violet-100:hover,
#editor-view #rightSidebar .hover\:bg-violet-100:hover,
#editor-view #designModal .hover\:bg-violet-100:hover {
  background-color: var(--sp-shop-bg-2) !important;
}

#editor-view #editorSidebar .bg-indigo-500,
#editor-view #rightSidebar .bg-indigo-500,
#editor-view #designModal .bg-indigo-500,
#editor-view #editorSidebar .bg-indigo-600,
#editor-view #rightSidebar .bg-indigo-600,
#editor-view #designModal .bg-indigo-600,
#editor-view #editorSidebar .bg-violet-600,
#editor-view #rightSidebar .bg-violet-600,
#editor-view #designModal .bg-violet-600,
#editor-view #editorSidebar .bg-accent,
#editor-view #rightSidebar .bg-accent,
#editor-view #designModal .bg-accent,
#editor-view #editorSidebar button.bg-accent,
#editor-view #rightSidebar button.bg-accent,
#editor-view #designModal button.bg-accent,
#editor-view #rightSidebar .pool-filter-btn.active {
  background-color: var(--sp-shop-ink) !important;
  background-image: none !important;
  color: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-ink) !important;
}

#editor-view #editorSidebar .text-indigo-400,
#editor-view #rightSidebar .text-indigo-400,
#editor-view #designModal .text-indigo-400,
#editor-view #editorSidebar .text-indigo-500,
#editor-view #rightSidebar .text-indigo-500,
#editor-view #designModal .text-indigo-500,
#editor-view #editorSidebar .text-indigo-600,
#editor-view #rightSidebar .text-indigo-600,
#editor-view #designModal .text-indigo-600,
#editor-view #editorSidebar .text-indigo-700,
#editor-view #rightSidebar .text-indigo-700,
#editor-view #designModal .text-indigo-700,
#editor-view #editorSidebar .text-indigo-900,
#editor-view #rightSidebar .text-indigo-900,
#editor-view #designModal .text-indigo-900,
#editor-view #editorSidebar .text-violet-500,
#editor-view #rightSidebar .text-violet-500,
#editor-view #designModal .text-violet-500,
#editor-view #editorSidebar .text-violet-600,
#editor-view #rightSidebar .text-violet-600,
#editor-view #designModal .text-violet-600,
#editor-view #editorSidebar .text-violet-700,
#editor-view #rightSidebar .text-violet-700,
#editor-view #designModal .text-violet-700,
#editor-view #editorSidebar .text-purple-400,
#editor-view #rightSidebar .text-purple-400,
#editor-view #designModal .text-purple-400 {
  color: var(--sp-shop-accent) !important;
}

#editor-view #editorSidebar .border-indigo-100,
#editor-view #rightSidebar .border-indigo-100,
#editor-view #designModal .border-indigo-100,
#editor-view #editorSidebar .border-indigo-200,
#editor-view #rightSidebar .border-indigo-200,
#editor-view #designModal .border-indigo-200,
#editor-view #editorSidebar .border-indigo-300,
#editor-view #rightSidebar .border-indigo-300,
#editor-view #designModal .border-indigo-300,
#editor-view #editorSidebar .border-violet-100,
#editor-view #rightSidebar .border-violet-100,
#editor-view #designModal .border-violet-100,
#editor-view #editorSidebar .border-violet-200,
#editor-view #rightSidebar .border-violet-200,
#editor-view #designModal .border-violet-200,
#editor-view #editorSidebar .border-violet-300,
#editor-view #rightSidebar .border-violet-300,
#editor-view #designModal .border-violet-300,
#editor-view #editorSidebar .hover\:border-indigo-200:hover,
#editor-view #rightSidebar .hover\:border-indigo-200:hover,
#editor-view #designModal .hover\:border-indigo-200:hover,
#editor-view #editorSidebar .hover\:border-violet-200:hover,
#editor-view #rightSidebar .hover\:border-violet-200:hover,
#editor-view #designModal .hover\:border-violet-200:hover {
  border-color: var(--sp-shop-line) !important;
}

#editor-view #editorSidebar button:hover,
#editor-view #rightSidebar button:hover,
#editor-view #designModal button:hover {
  border-color: var(--sp-shop-accent) !important;
}

/* PressShop-aligned dark mode. This lands after the legacy dark skin and
   Tailwind runtime so navy/indigo editor styles cannot bleed through. */
html.dark {
  --sp-shop-bg: #16140f;
  --sp-shop-bg-2: #1f1c16;
  --sp-shop-bg-3: #2a261e;
  --sp-shop-paper: #1a1813;
  --sp-shop-ink: #f4efe3;
  --sp-shop-ink-2: #d6cdbb;
  --sp-shop-muted: #a89e8a;
  --sp-shop-line: #2f2a21;
  --sp-shop-line-2: #3d362a;
  --sp-shop-accent: #c8a24a;
  --sp-shop-accent-2: #c8a24a;
  --sp-shop-gold: #c8a24a;
  --dm-bg: #16140f;
  --dm-surface: #1a1813;
  --dm-card: #1f1c16;
  --dm-border: #2f2a21;
  --dm-text: #f4efe3;
  --dm-sub: #a89e8a;
}

html.dark,
html.dark body,
html.dark #home-view,
html.dark #editor-view {
  background: var(--sp-shop-bg) !important;
  color: var(--sp-shop-ink) !important;
}

html.dark #home-view header,
html.dark #editor-view > header {
  background: color-mix(in oklab, var(--sp-shop-bg) 92%, transparent) !important;
  border-color: var(--sp-shop-line) !important;
  color: var(--sp-shop-ink) !important;
}

html.dark #editorMain,
html.dark .bg-canvas-pattern {
  background-color: var(--sp-shop-bg) !important;
  background-image: radial-gradient(#3d362a 1px, transparent 1px) !important;
}

html.dark #editorSidebar,
html.dark #rightSidebar,
html.dark #pageThumbs,
html.dark #mobileTabBar,
html.dark .floating-toolbar,
html.dark .zoom-pill,
html.dark .page-menu,
html.dark #designModal .bg-white,
html.dark #layoutModal .bg-white,
html.dark #saveModal .bg-white,
html.dark #authModal .bg-white,
html.dark #aiModal .bg-white {
  background: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-line) !important;
  color: var(--sp-shop-ink) !important;
}

html.dark #home-view h1,
html.dark #home-view h2,
html.dark #home-view h3,
html.dark #home-view h4,
html.dark #home-view .font-display,
html.dark #editor-title,
html.dark .page-label,
html.dark .page-title,
html.dark #editor-view .font-bold,
html.dark #editor-view .font-black {
  color: var(--sp-shop-ink) !important;
}

html.dark #home-view p,
html.dark #home-view .text-slate-400,
html.dark #home-view .text-slate-500,
html.dark #editor-view .text-slate-400,
html.dark #editor-view .text-slate-500,
html.dark #editor-view .text-slate-600,
html.dark #editor-view .text-slate-700,
html.dark .sidebar-section-btn,
html.dark #editorSidebar label,
html.dark #rightSidebar label,
html.dark #editorSidebar .uppercase,
html.dark #rightSidebar .uppercase {
  color: var(--sp-shop-muted) !important;
}

html.dark input:not([type=range]):not([type=checkbox]),
html.dark select,
html.dark textarea,
html.dark #home-view input:not([type=range]):not([type=checkbox]),
html.dark #home-view select,
html.dark #editor-view input:not([type=range]):not([type=checkbox]),
html.dark #editor-view select,
html.dark #editor-view textarea {
  background: var(--sp-shop-bg-2) !important;
  color: var(--sp-shop-ink) !important;
  border-color: var(--sp-shop-line-2) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--sp-shop-muted) !important;
}

html.dark #home-view button,
html.dark #home-view .btn,
html.dark #editor-view > header button,
html.dark #editor-view > header select,
html.dark #editorSidebar button,
html.dark #rightSidebar button,
html.dark #designModal button,
html.dark .undo-btn,
html.dark .page-ord-btn,
html.dark .tool-btn,
html.dark .tfb,
html.dark .stk-cat,
html.dark .prop-tab,
html.dark .pool-filter-btn {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--sp-shop-line-2) !important;
  color: var(--sp-shop-ink-2) !important;
  box-shadow: none !important;
}

html.dark #editor-view > header #generateBtn,
html.dark #editor-view #editorSidebar .bg-accent,
html.dark #editor-view #rightSidebar .bg-accent,
html.dark #editor-view #designModal .bg-accent,
html.dark #editor-view #editorSidebar button.bg-accent,
html.dark #editor-view #rightSidebar button.bg-accent,
html.dark #editor-view #designModal button.bg-accent,
html.dark #editor-view #rightSidebar .pool-filter-btn.active,
html.dark .stk-cat.active,
html.dark .prop-tab.active {
  background: var(--sp-shop-accent) !important;
  background-image: none !important;
  border-color: var(--sp-shop-accent) !important;
  color: #16140f !important;
}

html.dark #editor-view > header #generateBtn {
  background: var(--sp-shop-ink) !important;
  border-color: var(--sp-shop-ink) !important;
  color: var(--sp-shop-bg) !important;
}

html.dark #home-view button:hover,
html.dark #editor-view > header button:hover,
html.dark #editor-view > header select:hover,
html.dark #editorSidebar button:hover,
html.dark #rightSidebar button:hover,
html.dark #designModal button:hover,
html.dark .undo-btn:hover:not(:disabled),
html.dark .page-ord-btn:hover,
html.dark .tool-btn:hover,
html.dark .stk-cat:hover,
html.dark .prop-tab:hover,
html.dark .pool-filter-btn:hover {
  background: var(--sp-shop-bg-3) !important;
  border-color: var(--sp-shop-accent) !important;
  color: var(--sp-shop-accent) !important;
}

html.dark #template-grid > div,
html.dark #home-view #template-grid > div,
html.dark .saved-album-card,
html.dark #home-view .saved-album-card,
html.dark #saved-empty-state,
html.dark #siteAnnouncement,
html.dark #dropzone,
html.dark .rounded-xl.border,
html.dark .album-card-preview,
html.dark .album-card-page,
html.dark .album-meta-pill {
  background: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-line) !important;
  color: var(--sp-shop-ink) !important;
  box-shadow: none !important;
}

html.dark #template-grid .bg-slate-50,
html.dark #template-grid .bg-slate-100,
html.dark #template-grid .bg-slate-200,
html.dark #template-grid .bg-white,
html.dark .saved-album-card .bg-slate-50,
html.dark .saved-album-card .bg-white,
html.dark #editor-view #editorSidebar .bg-slate-50,
html.dark #editor-view #rightSidebar .bg-slate-50,
html.dark #editor-view #editorSidebar .bg-slate-100,
html.dark #editor-view #rightSidebar .bg-slate-100,
html.dark #editor-view #editorSidebar [class*="bg-indigo-50"],
html.dark #editor-view #rightSidebar [class*="bg-indigo-50"],
html.dark #editor-view #designModal [class*="bg-indigo-50"],
html.dark #editor-view #editorSidebar [class*="bg-violet-50"],
html.dark #editor-view #rightSidebar [class*="bg-violet-50"],
html.dark #editor-view #designModal [class*="bg-violet-50"] {
  background: var(--sp-shop-bg-2) !important;
  background-image: none !important;
}

html.dark .how-step-circle,
html.dark #home-view .how-step-circle,
html.dark .page-edit-btn {
  background: var(--sp-shop-ink) !important;
  border-color: var(--sp-shop-ink) !important;
  color: var(--sp-shop-bg) !important;
}

html.dark #editor-view .text-accent,
html.dark #editor-view .text-indigo-400,
html.dark #editor-view .text-indigo-500,
html.dark #editor-view .text-indigo-600,
html.dark #editor-view .text-indigo-700,
html.dark #editor-view .text-indigo-900,
html.dark #editor-view .text-violet-500,
html.dark #editor-view .text-violet-600,
html.dark #editor-view .text-violet-700,
html.dark #editor-view .text-purple-400,
html.dark #home-view .text-accent,
html.dark .accent {
  color: var(--sp-shop-accent) !important;
}

html.dark #editor-view .border-slate-100,
html.dark #editor-view .border-slate-200,
html.dark #editor-view .border-indigo-100,
html.dark #editor-view .border-indigo-200,
html.dark #editor-view .border-indigo-300,
html.dark #editor-view .border-violet-100,
html.dark #editor-view .border-violet-200,
html.dark #editor-view .border-violet-300,
html.dark #home-view .border-slate-100,
html.dark #home-view .border-slate-200,
html.dark .border-t {
  border-color: var(--sp-shop-line) !important;
}

html.dark .page-card-wrap > div,
html.dark .page-card {
  background: #f7f7f5 !important;
  border-color: #ece7dc !important;
}

html.dark [id^="canvas-page_"] {
  color: #111827;
}

html.dark #dmToggle,
html.dark #dmToggleEditor,
html.dark #adminPortalBtn {
  border-radius: 0 !important;
  font-family: var(--sp-font-label) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

html.dark body.bg-slate-200,
html.dark body[class*="bg-slate"] {
  background: var(--sp-shop-bg) !important;
}

html.dark #home-view #template-grid > div,
html.dark #home-view .saved-album-card {
  background: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-line) !important;
}

html.dark #home-view #template-grid > div.bg-white,
html.dark #home-view #template-grid .bg-white,
html.dark #home-view #template-grid .bg-slate-50,
html.dark #home-view .saved-album-card.bg-white,
html.dark #home-view .saved-album-card .bg-white,
html.dark #home-view .saved-album-card .bg-slate-50 {
  background: var(--sp-shop-paper) !important;
  background-image: none !important;
  background-color: var(--sp-shop-paper) !important;
  border-color: var(--sp-shop-line) !important;
  color: var(--sp-shop-ink) !important;
}

html.dark #home-view #template-grid > div *,
html.dark #home-view .saved-album-card * {
  border-color: var(--sp-shop-line) !important;
}

html.dark #home-view #template-grid > div .bg-slate-900:not(.text-white),
html.dark #home-view .saved-album-card .bg-slate-900:not(.text-white),
html.dark #home-view #template-grid > div [class*="bg-slate"],
html.dark #home-view .saved-album-card [class*="bg-slate"] {
  background: var(--sp-shop-bg-2) !important;
  color: var(--sp-shop-ink-2) !important;
}

html.dark #editor-view .bg-slate-900,
html.dark #editor-view .hover\:bg-black:hover,
html.dark #editor-view button[class*="bg-slate-900"],
html.dark #editor-view button[class*="hover:bg-black"] {
  background: var(--sp-shop-ink) !important;
  background-image: none !important;
  border-color: var(--sp-shop-ink) !important;
  color: var(--sp-shop-bg) !important;
}

html.dark #editor-view .toggle-checkbox,
html.dark #editor-view input[type="checkbox"].toggle-checkbox {
  background: var(--sp-shop-bg-2) !important;
  border-color: var(--sp-shop-line-2) !important;
}

html.dark #editor-view .toggle-checkbox:checked,
html.dark #editor-view input[type="checkbox"].toggle-checkbox:checked {
  background: var(--sp-shop-accent) !important;
  border-color: var(--sp-shop-accent) !important;
}

html.dark #poolContainer,
html.dark #editor-view #rightSidebar [class*="bg-slate-50/"],
html.dark #editor-view #editorSidebar [class*="bg-slate-50/"] {
  background: var(--sp-shop-bg-2) !important;
}

html.dark #poolEmpty,
html.dark #poolEmpty *,
html.dark #editor-view .text-slate-300 {
  color: var(--sp-shop-muted) !important;
}

/* Editor polish overrides.
   Keep this block last: it repairs icon hydration, swatches, thumbnail actions,
   and design-studio contrast after the broad shop skin rules above. */
.ph.ph-svg::before,
.ph.ph-svg::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.ph.ph-svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.ph.ph-svg svg {
  width: 1em !important;
  height: 1em !important;
  display: block !important;
  color: currentColor !important;
  pointer-events: none !important;
}

#editorSidebar .swatch-btn,
#editorSidebar .dbb-swatch,
#rightSidebar .swatch-btn,
#rightSidebar .dbb-swatch,
#designModal .swatch-btn,
#designModal .dbb-swatch {
  min-width: 22px !important;
  min-height: 22px !important;
  border: 1px solid color-mix(in oklab, var(--sp-shop-line) 78%, #000 22%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25) !important;
  background-image: none !important;
  color: inherit !important;
}

#editorSidebar .swatch-btn.active,
#editorSidebar .dbb-swatch.active,
#rightSidebar .swatch-btn.active,
#rightSidebar .dbb-swatch.active,
#designModal .swatch-btn.active,
#designModal .dbb-swatch.active,
html.dark #editorSidebar .swatch-btn.active,
html.dark #editorSidebar .dbb-swatch.active,
html.dark #rightSidebar .swatch-btn.active,
html.dark #rightSidebar .dbb-swatch.active,
html.dark #designModal .swatch-btn.active,
html.dark #designModal .dbb-swatch.active {
  border-color: var(--sp-shop-accent) !important;
  outline: 2px solid var(--sp-shop-accent) !important;
  outline-offset: 2px !important;
  transform: none !important;
  color: inherit !important;
}

#editorSidebar .swatch-btn.active::after,
#editorSidebar .dbb-swatch.active::after,
#rightSidebar .swatch-btn.active::after,
#rightSidebar .dbb-swatch.active::after,
#designModal .swatch-btn.active::after,
#designModal .dbb-swatch.active::after {
  inset: auto 2px 2px auto !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.62) !important;
  color: #fff !important;
  font-size: 9px !important;
  line-height: 14px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}

#swatch-ffffff, #dbb-ffffff { background: #ffffff !important; }
#swatch-fdf8f0, #dbb-fdf8f0 { background: #fdf8f0 !important; }
#swatch-fff0f5, #dbb-fff0f5 { background: #fff0f5 !important; }
#swatch-f0f6ff { background: #f0f6ff !important; }
#swatch-f0f4f0 { background: #f0f4f0 !important; }
#swatch-f5f0ff { background: #f5f0ff !important; }
#swatch-f5f0e6 { background: #f5f0e6 !important; }
#swatch-f8f6f2 { background: #f8f6f2 !important; }
#swatch-e8f4f8 { background: #e8f4f8 !important; }
#swatch-faf7f2 { background: #faf7f2 !important; }
#swatch-f1f5f9, #dbb-f1f5f9 { background: #f1f5f9 !important; }
#swatch-fff1f2 { background: #fff1f2 !important; }
#swatch-fff7ed { background: #fff7ed !important; }
#swatch-ecfdf5 { background: #ecfdf5 !important; }
#dbb-dbeafe { background: #dbeafe !important; }
#dbb-d1fae5 { background: #d1fae5 !important; }
#swatch-334155, #dbb-334155 { background: #334155 !important; }
#swatch-1e293b { background: #1e293b !important; }
#swatch-1e3a5f, #dbb-1e3a5f { background: #1e3a5f !important; }
#swatch-1a3328 { background: #1a3328 !important; }
#swatch-4a1020, #dbb-4a1020 { background: #4a1020 !important; }
#swatch-0f0f1a, #dbb-0f0f1a { background: #0f0f1a !important; }
#swatch-1a0e0a { background: #1a0e0a !important; }
#swatch-000000, #dbb-000000 { background: #000000 !important; }
#swatch-2d1b4e { background: #2d1b4e !important; }
#swatch-2d3016 { background: #2d3016 !important; }
#swatch-0f2830 { background: #0f2830 !important; }
#swatch-2c1a0e { background: #2c1a0e !important; }
#swatch-1e1b4b { background: #1e1b4b !important; }
#swatch-374151 { background: #374151 !important; }

:is(#editorSidebar,#rightSidebar,#designModal) :is(#swatch-ffffff,#dbb-ffffff) { background: #ffffff !important; }
:is(#editorSidebar,#rightSidebar,#designModal) :is(#swatch-fdf8f0,#dbb-fdf8f0) { background: #fdf8f0 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) :is(#swatch-fff0f5,#dbb-fff0f5) { background: #fff0f5 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-f0f6ff { background: #f0f6ff !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-f0f4f0 { background: #f0f4f0 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-f5f0ff { background: #f5f0ff !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-f5f0e6 { background: #f5f0e6 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-f8f6f2 { background: #f8f6f2 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-e8f4f8 { background: #e8f4f8 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-faf7f2 { background: #faf7f2 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) :is(#swatch-f1f5f9,#dbb-f1f5f9) { background: #f1f5f9 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-fff1f2 { background: #fff1f2 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-fff7ed { background: #fff7ed !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-ecfdf5 { background: #ecfdf5 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #dbb-dbeafe { background: #dbeafe !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #dbb-d1fae5 { background: #d1fae5 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) :is(#swatch-334155,#dbb-334155) { background: #334155 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-1e293b { background: #1e293b !important; }
:is(#editorSidebar,#rightSidebar,#designModal) :is(#swatch-1e3a5f,#dbb-1e3a5f) { background: #1e3a5f !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-1a3328 { background: #1a3328 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) :is(#swatch-4a1020,#dbb-4a1020) { background: #4a1020 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) :is(#swatch-0f0f1a,#dbb-0f0f1a) { background: #0f0f1a !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-1a0e0a { background: #1a0e0a !important; }
:is(#editorSidebar,#rightSidebar,#designModal) :is(#swatch-000000,#dbb-000000) { background: #000000 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-2d1b4e { background: #2d1b4e !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-2d3016 { background: #2d3016 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-0f2830 { background: #0f2830 !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-2c1a0e { background: #2c1a0e !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-1e1b4b { background: #1e1b4b !important; }
:is(#editorSidebar,#rightSidebar,#designModal) #swatch-374151 { background: #374151 !important; }

#editorSidebar #dbb-transparent,
#rightSidebar #dbb-transparent,
#designModal #dbb-transparent {
  background: #fff !important;
  overflow: hidden !important;
}

#editorSidebar #dbb-transparent > div,
#rightSidebar #dbb-transparent > div,
#designModal #dbb-transparent > div {
  display: block !important;
  background: repeating-linear-gradient(45deg,#d8dee8 0,#d8dee8 3px,#fff 3px,#fff 6px) !important;
}

.pool-img-cell .photo-thumb-actions {
  position: absolute !important;
  z-index: 30 !important;
  left: 50% !important;
  top: auto !important;
  right: auto !important;
  bottom: 7px !important;
  width: max-content !important;
  max-width: calc(100% - 8px) !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  background: rgba(0,0,0,.72) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  box-shadow: 0 5px 15px rgba(0,0,0,.55) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#rightSidebar .pool-img-cell .photo-thumb-actions,
html.dark #rightSidebar .pool-img-cell .photo-thumb-actions {
  left: 50% !important;
  right: auto !important;
  bottom: 7px !important;
  width: max-content !important;
  max-width: calc(100% - 8px) !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  background: rgba(0,0,0,.72) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
}

.pool-img-cell .photo-thumb-action,
html.dark .pool-img-cell .photo-thumb-action,
#rightSidebar .pool-img-cell .photo-thumb-action,
html.dark #rightSidebar .pool-img-cell .photo-thumb-action {
  width: 23px !important;
  height: 23px !important;
  min-height: 23px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 5px !important;
  background: rgba(8,10,14,.94) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.35) !important;
  opacity: 1 !important;
  position: relative !important;
  inset: auto !important;
  flex: 0 0 23px !important;
}

.pool-img-cell .photo-thumb-action.danger,
html.dark .pool-img-cell .photo-thumb-action.danger,
#rightSidebar .pool-img-cell .photo-thumb-action.danger,
html.dark #rightSidebar .pool-img-cell .photo-thumb-action.danger {
  background: rgba(220,38,38,.92) !important;
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
}

.pool-img-cell .photo-thumb-action .ph,
.pool-img-cell .photo-thumb-action svg,
#rightSidebar .pool-img-cell .photo-thumb-action .ph,
#rightSidebar .pool-img-cell .photo-thumb-action svg,
html.dark #rightSidebar .pool-img-cell .photo-thumb-action .ph,
html.dark #rightSidebar .pool-img-cell .photo-thumb-action svg {
  color: #fff !important;
  font-size: 15px !important;
  opacity: 1 !important;
}

.pool-img-cell .img-used-badge {
  background: rgba(5,150,105,.96) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.35) !important;
}

#editorSidebar,
#rightSidebar {
  width: 24rem !important;
}

#poolGrid,
.folder-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#rightSidebar .pool-img-cell {
  border-radius: 7px !important;
  border-color: var(--sp-shop-line-2) !important;
}

.page-ord-btn,
html.dark .page-ord-btn {
  width: 25px !important;
  height: 25px !important;
  min-height: 25px !important;
  border-radius: 0 !important;
  background: var(--sp-shop-paper) !important;
  color: var(--sp-shop-muted) !important;
  border: 1px solid var(--sp-shop-line-2) !important;
  box-shadow: none !important;
}

.page-ord-btn:hover,
html.dark .page-ord-btn:hover {
  background: var(--sp-shop-bg-2) !important;
  color: var(--sp-shop-accent) !important;
  border-color: var(--sp-shop-accent) !important;
}

.page-ord-btn .ph,
.page-ord-btn svg {
  color: currentColor !important;
  opacity: 1 !important;
}

.page-ord-btn[style*="width:auto"],
.page-layout-btn,
html.dark .page-layout-btn {
  width: auto !important;
  min-width: 74px !important;
  height: 25px !important;
  min-height: 25px !important;
  padding-left: 9px !important;
  padding-right: 9px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

.page-action-bar,
html.dark .page-action-bar,
.page-card-wrap > .page-action-bar,
html.dark .page-card-wrap > .page-action-bar,
.page-card-wrap > .flex.items-center.justify-between,
html.dark .page-card-wrap > .flex.items-center.justify-between {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.page-action-bar > div,
html.dark .page-action-bar > div,
.page-card-wrap > .page-action-bar > div,
html.dark .page-card-wrap > .page-action-bar > div,
.page-card-wrap > .flex.items-center.justify-between > div,
html.dark .page-card-wrap > .flex.items-center.justify-between > div {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

#designModal {
  color: var(--sp-shop-ink) !important;
}

#designModal .bg-white,
#designModal .bg-slate-50,
#designModal [class*="bg-slate-50"],
#designModal [class*="bg-indigo-50"],
#designModal [class*="bg-violet-50"] {
  background-color: var(--sp-shop-paper) !important;
  color: var(--sp-shop-ink) !important;
}

#designModal .border-slate-100,
#designModal .border-slate-200,
#designModal .border-indigo-100,
#designModal .border-indigo-200,
#designModal .border-violet-100,
#designModal .border-violet-200 {
  border-color: var(--sp-shop-line) !important;
}

#designModal .text-slate-400,
#designModal .text-slate-500,
#designModal .text-slate-600,
#designModal .text-slate-700,
#designModal label,
#designModal .uppercase {
  color: var(--sp-shop-muted) !important;
}

#designModal .text-slate-800,
#designModal .text-slate-900,
#designModal .font-bold,
#designModal .font-black {
  color: var(--sp-shop-ink) !important;
}

#designModal input:not([type=range]):not([type=checkbox]),
#designModal select,
#designModal textarea {
  background: var(--sp-shop-bg-2) !important;
  color: var(--sp-shop-ink) !important;
  border-color: var(--sp-shop-line-2) !important;
}

#designModal button:not(.photo-thumb-action):not(.bg-accent) {
  background: var(--sp-shop-bg-2) !important;
  color: var(--sp-shop-ink-2) !important;
  border-color: var(--sp-shop-line) !important;
}

#designModal button:not(.photo-thumb-action):not(.bg-accent):hover {
  background: var(--sp-shop-bg-3) !important;
  color: var(--sp-shop-accent) !important;
  border-color: var(--sp-shop-accent) !important;
}

html.dark #designModal {
  color: var(--sp-shop-ink) !important;
}

html.dark #designModal .bg-white,
html.dark #designModal .bg-slate-50,
html.dark #designModal [class*="bg-slate-50"],
html.dark #designModal [class*="bg-indigo-50"],
html.dark #designModal [class*="bg-violet-50"] {
  background-color: var(--sp-shop-paper) !important;
  color: var(--sp-shop-ink) !important;
}

html.dark #designModal button:not(.photo-thumb-action):not(.bg-accent) {
  background: var(--sp-shop-bg-2) !important;
  color: var(--sp-shop-ink-2) !important;
  border-color: var(--sp-shop-line-2) !important;
}

html.dark #designModal button:not(.photo-thumb-action):not(.bg-accent):hover {
  background: var(--sp-shop-bg-3) !important;
  color: var(--sp-shop-accent) !important;
  border-color: var(--sp-shop-accent) !important;
}

/* Final thumbnail action override: keep photo controls readable in dark mode.
   This intentionally beats the broad `html.dark #editor-view #rightSidebar button`
   skin rule that otherwise makes these tiny buttons transparent. */
#editor-view #rightSidebar .pool-img-cell .photo-thumb-actions,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-actions {
  position: absolute !important;
  z-index: 40 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 7px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  width: max-content !important;
  max-width: calc(100% - 8px) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#editor-view #rightSidebar .pool-img-cell .photo-thumb-action,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  flex: 0 0 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 2px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(12,12,12,.58) !important;
  color: #fff !important;
  opacity: 1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.35) !important;
}

#editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger {
  background: rgba(220,38,38,.88) !important;
  color: #fff !important;
}

#editor-view #rightSidebar .pool-img-cell .photo-thumb-action .ph,
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg,
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg *,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action .ph,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg * {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* Final dark-theme pass.
   Keep this last so it wins over the legacy navy and espresso overrides above. */
html.dark {
  color-scheme: dark;
  --sp-shop-bg: #0f1114;
  --sp-shop-bg-2: #171a1f;
  --sp-shop-bg-3: #20242b;
  --sp-shop-paper: #191c21;
  --sp-shop-elevated: #21252d;
  --sp-shop-ink: #f4f1ea;
  --sp-shop-ink-2: #d8d1c2;
  --sp-shop-muted: #a9a093;
  --sp-shop-line: #343943;
  --sp-shop-line-2: #464c58;
  --sp-shop-accent: #d6b65f;
  --sp-shop-accent-2: #f0d58b;
  --sp-shop-focus: #8bd3c7;
  --dm-bg: var(--sp-shop-bg);
  --dm-surface: var(--sp-shop-paper);
  --dm-card: var(--sp-shop-elevated);
  --dm-border: var(--sp-shop-line);
  --dm-text: var(--sp-shop-ink);
  --dm-sub: var(--sp-shop-muted);
}

html.dark,
html.dark body,
html.dark #home-view,
html.dark #editor-view {
  background: linear-gradient(180deg, #0f1114 0%, #15181d 48%, #101216 100%) !important;
  color: var(--sp-shop-ink) !important;
}

html.dark #home-view header,
html.dark #editor-view > header {
  background: rgba(20, 22, 27, .92) !important;
  border-color: rgba(214, 182, 95, .18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 14px 40px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(14px) !important;
}

html.dark #home-view main,
html.dark #editor-view main,
html.dark #editorMain {
  color: var(--sp-shop-ink) !important;
}

html.dark #home-view h1,
html.dark #home-view h2,
html.dark #home-view h3,
html.dark #home-view h4,
html.dark #home-view .font-display,
html.dark #editor-view h1,
html.dark #editor-view h2,
html.dark #editor-view h3,
html.dark #editor-view h4,
html.dark #editor-title,
html.dark #editor-view .font-bold,
html.dark #editor-view .font-black {
  color: var(--sp-shop-ink) !important;
}

html.dark #home-view p,
html.dark #home-view .text-slate-300,
html.dark #home-view .text-slate-400,
html.dark #home-view .text-slate-500,
html.dark #home-view .text-slate-600,
html.dark #editor-view .text-slate-300,
html.dark #editor-view .text-slate-400,
html.dark #editor-view .text-slate-500,
html.dark #editor-view .text-slate-600,
html.dark #editor-view .text-slate-700,
html.dark .sidebar-section-btn,
html.dark #editorSidebar label,
html.dark #rightSidebar label,
html.dark #editorSidebar .uppercase,
html.dark #rightSidebar .uppercase {
  color: var(--sp-shop-muted) !important;
}

html.dark input:not([type=range]):not([type=checkbox]),
html.dark select,
html.dark textarea {
  background: #15181d !important;
  color: var(--sp-shop-ink) !important;
  border-color: var(--sp-shop-line-2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #7d857f !important;
}

html.dark input:not([type=range]):not([type=checkbox]):focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--sp-shop-focus) !important;
  box-shadow: 0 0 0 2px rgba(139, 211, 199, .18), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html.dark #template-grid > div,
html.dark #home-view #template-grid > div,
html.dark .saved-album-card,
html.dark #home-view .saved-album-card,
html.dark #saved-empty-state,
html.dark #siteAnnouncement,
html.dark #dropzone,
html.dark #editorSidebar,
html.dark #rightSidebar,
html.dark #pageThumbs,
html.dark #mobileTabBar,
html.dark .floating-toolbar,
html.dark .zoom-pill,
html.dark .page-menu {
  background: linear-gradient(180deg, #1d2027 0%, #171a20 100%) !important;
  border-color: var(--sp-shop-line) !important;
  color: var(--sp-shop-ink) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 18px 44px rgba(0,0,0,.24) !important;
}

html.dark #template-grid > div:hover,
html.dark #home-view #template-grid > div:hover,
html.dark .saved-album-card:hover,
html.dark #home-view .saved-album-card:hover {
  border-color: rgba(214, 182, 95, .72) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 22px 56px rgba(0,0,0,.36) !important;
}

html.dark #template-grid .bg-white,
html.dark #template-grid .bg-slate-50,
html.dark #template-grid .bg-slate-100,
html.dark .saved-album-card .bg-white,
html.dark .saved-album-card .bg-slate-50,
html.dark .saved-album-card .bg-slate-100,
html.dark #editorSidebar .bg-white,
html.dark #editorSidebar .bg-slate-50,
html.dark #editorSidebar .bg-slate-100,
html.dark #rightSidebar .bg-white,
html.dark #rightSidebar .bg-slate-50,
html.dark #rightSidebar .bg-slate-100,
html.dark #editor-view #editorSidebar [class*="bg-indigo-50"],
html.dark #editor-view #rightSidebar [class*="bg-indigo-50"],
html.dark #editor-view #editorSidebar [class*="bg-violet-50"],
html.dark #editor-view #rightSidebar [class*="bg-violet-50"] {
  background: #15181d !important;
  background-image: none !important;
  border-color: var(--sp-shop-line) !important;
  color: var(--sp-shop-ink) !important;
}

html.dark #home-view .album-meta-pill,
html.dark .album-meta-pill,
html.dark .rounded-xl.border,
html.dark .rounded-lg.border,
html.dark .rounded-md.border {
  background: rgba(21, 24, 29, .9) !important;
  border-color: var(--sp-shop-line) !important;
  color: var(--sp-shop-ink-2) !important;
}

html.dark #home-view .album-card-preview {
  background: linear-gradient(135deg, #262a33 0%, #15181d 100%) !important;
}

html.dark #home-view .album-card-page,
html.dark #home-view #template-grid .theme-layout-preview-page {
  background: #ede6d6 !important;
  border-color: #d1c4ae !important;
  color: #1a1714 !important;
}

html.dark #home-view #template-grid .theme-layout-preview-slot {
  background: #bac8d6 !important;
  border-color: #ede6d6 !important;
}

html.dark #home-view #template-grid .theme-layout-preview-line {
  background: #8794a4 !important;
}

html.dark #home-view #template-grid .theme-layout-preview-more {
  background: #15181d !important;
  color: #f4f1ea !important;
  border-color: #d1c4ae !important;
}

html.dark #home-view button,
html.dark #home-view .btn,
html.dark #editor-view > header button,
html.dark #editor-view > header select,
html.dark #editorSidebar button,
html.dark #rightSidebar button,
html.dark #designModal button,
html.dark .undo-btn,
html.dark .page-ord-btn,
html.dark .tool-btn,
html.dark .tfb,
html.dark .stk-cat,
html.dark .prop-tab,
html.dark .pool-filter-btn {
  background: #181b21 !important;
  background-image: none !important;
  border-color: var(--sp-shop-line-2) !important;
  color: var(--sp-shop-ink-2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html.dark #home-view button:hover,
html.dark #editor-view > header button:hover,
html.dark #editor-view > header select:hover,
html.dark #editorSidebar button:hover,
html.dark #rightSidebar button:hover,
html.dark #designModal button:hover,
html.dark .undo-btn:hover:not(:disabled),
html.dark .page-ord-btn:hover,
html.dark .tool-btn:hover,
html.dark .stk-cat:hover,
html.dark .prop-tab:hover,
html.dark .pool-filter-btn:hover {
  background: #222832 !important;
  border-color: var(--sp-shop-accent) !important;
  color: var(--sp-shop-accent-2) !important;
}

html.dark #generateBtn,
html.dark #authSubmitBtn,
html.dark #editor-view .bg-accent,
html.dark #editor-view button.bg-accent,
html.dark #editor-view #rightSidebar .pool-filter-btn.active,
html.dark .stk-cat.active,
html.dark .prop-tab.active {
  background: var(--sp-shop-accent) !important;
  border-color: var(--sp-shop-accent) !important;
  color: #121315 !important;
  box-shadow: 0 8px 24px rgba(214, 182, 95, .18) !important;
}

html.dark #generateBtn:hover,
html.dark #authSubmitBtn:hover,
html.dark #editor-view .bg-accent:hover,
html.dark #editor-view button.bg-accent:hover {
  background: var(--sp-shop-accent-2) !important;
  border-color: var(--sp-shop-accent-2) !important;
  color: #0f1114 !important;
}

html.dark #dmToggle,
html.dark #dmToggleEditor,
html.dark #adminPortalBtn,
html.dark .sp-lang-select {
  background: #15181d !important;
  border-color: var(--sp-shop-line-2) !important;
  color: var(--sp-shop-ink-2) !important;
}

html.dark #dmToggle:hover,
html.dark #dmToggleEditor:hover,
html.dark #adminPortalBtn:hover,
html.dark .sp-lang-select:hover,
html.dark .sp-lang-select:focus {
  border-color: var(--sp-shop-accent) !important;
  color: var(--sp-shop-accent-2) !important;
}

html.dark #editorMain,
html.dark .bg-canvas-pattern {
  background-color: #111318 !important;
  background-image: radial-gradient(rgba(214,182,95,.18) 1px, transparent 1px) !important;
}

html.dark .page-card-wrap > div,
html.dark .page-card,
html.dark [id^="canvas-page_"] {
  background: #f7f4ea !important;
  border-color: #d8cdb8 !important;
  color: #111827 !important;
}

html.dark #designModal,
html.dark #layoutModal,
html.dark #saveModal,
html.dark #authModal,
html.dark #aiModal,
html.dark #templatePreviewModal,
html.dark #shareSettingsModal,
html.dark #albumQualityModal,
html.dark #preflightModal {
  background-color: rgba(5, 7, 10, .72) !important;
}

html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .bg-white,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .bg-slate-50,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) [class*="bg-slate-50"],
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) [class*="bg-indigo-50"],
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) [class*="bg-violet-50"] {
  background: #1d2027 !important;
  background-image: none !important;
  border-color: var(--sp-shop-line) !important;
  color: var(--sp-shop-ink) !important;
}

html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .text-slate-900,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .text-slate-800,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .font-bold,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .font-black {
  color: var(--sp-shop-ink) !important;
}

html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .text-slate-400,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .text-slate-500,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .text-slate-600,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .text-slate-700 {
  color: var(--sp-shop-muted) !important;
}

html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .border-slate-100,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .border-slate-200,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .border-slate-300,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .border-t,
html.dark :is(#designModal,#layoutModal,#saveModal,#authModal,#aiModal,#templatePreviewModal,#shareSettingsModal,#albumQualityModal,#preflightModal) .border-b {
  border-color: var(--sp-shop-line) !important;
}

html.dark #preflightModal .bg-emerald-50,
html.dark #albumQualityModal .bg-emerald-50 {
  background: rgba(16, 185, 129, .14) !important;
  border-color: rgba(52, 211, 153, .35) !important;
  color: #b7f7d2 !important;
}

html.dark #preflightModal .bg-amber-50,
html.dark #albumQualityModal .bg-amber-50 {
  background: rgba(214, 182, 95, .14) !important;
  border-color: rgba(214, 182, 95, .38) !important;
  color: #f5d88a !important;
}

html.dark #preflightModal .bg-red-50,
html.dark #albumQualityModal .bg-red-50 {
  background: rgba(239, 68, 68, .15) !important;
  border-color: rgba(248, 113, 113, .34) !important;
  color: #fecaca !important;
}

html.dark #preflightModal .bg-sky-50,
html.dark #albumQualityModal .bg-sky-50 {
  background: rgba(14, 165, 233, .14) !important;
  border-color: rgba(56, 189, 248, .34) !important;
  color: #bae6fd !important;
}

html.dark a:focus-visible,
html.dark button:focus-visible,
html.dark input:focus-visible,
html.dark select:focus-visible,
html.dark textarea:focus-visible {
  outline: 2px solid var(--sp-shop-focus) !important;
  outline-offset: 2px !important;
}

/* Language switcher and RTL support */
.sp-lang-control {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.sp-lang-select {
  height: 36px !important;
  min-width: 112px !important;
  padding: 0 30px 0 10px !important;
  border: 1px solid var(--sp-shop-line-2) !important;
  background: var(--sp-shop-paper) !important;
  color: var(--sp-shop-ink) !important;
  font-family: var(--sp-font-label) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.sp-lang-select-compact {
  height: 29px !important;
  min-width: 62px !important;
  padding: 0 24px 0 8px !important;
  font-size: 10px !important;
}

.sp-lang-select:hover,
.sp-lang-select:focus {
  border-color: var(--sp-shop-accent) !important;
  color: var(--sp-shop-accent) !important;
}

html.dark .sp-lang-select {
  background: #15120f !important;
  color: #e8e0d1 !important;
  border-color: #3a3228 !important;
}

html.dark .sp-lang-select:hover,
html.dark .sp-lang-select:focus {
  border-color: #d87343 !important;
  color: #f1c18b !important;
}

html[dir="rtl"] body {
  direction: rtl;
}

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] #home-view [class*="tracking"],
html[dir="rtl"] #editor-view [class*="tracking"],
html[dir="rtl"] #editor-view > header button,
html[dir="rtl"] #editor-view > header select,
html[dir="rtl"] #home-view header button,
html[dir="rtl"] #home-view header select,
html[dir="rtl"] .sidebar-section-btn,
html[dir="rtl"] #editorSidebar label,
html[dir="rtl"] #rightSidebar label,
html[dir="rtl"] .sp-lang-select {
  font-family: var(--sp-font-sans) !important;
  letter-spacing: 0 !important;
}

html[dir="rtl"] #home-view header button,
html[dir="rtl"] #editor-view > header button,
html[dir="rtl"] #editor-view > header select,
html[dir="rtl"] .sidebar-section-btn,
html[dir="rtl"] #editorSidebar label,
html[dir="rtl"] #rightSidebar label {
  text-transform: none !important;
}

html[dir="rtl"] #dmToggle,
html[dir="rtl"] #dmToggleEditor,
html[dir="rtl"] #adminPortalBtn,
html[dir="rtl"] #generateBtn,
html[dir="rtl"] .sp-lang-select {
  letter-spacing: 0 !important;
}

html[dir="rtl"] .sp-lang-select {
  padding-right: 10px !important;
  padding-left: 30px !important;
}

html[dir="rtl"] .sp-lang-select-compact {
  padding-right: 8px !important;
  padding-left: 24px !important;
}

html[dir="rtl"] #home-view,
html[dir="rtl"] #authModal,
html[dir="rtl"] #saveModal,
html[dir="rtl"] #aiModal,
html[dir="rtl"] #rightSidebar,
html[dir="rtl"] #editorSidebar,
html[dir="rtl"] #dsSidePanel,
html[dir="rtl"] #dsPropsPanel,
html[dir="rtl"] #pageThumbs,
html[dir="rtl"] #layoutModal {
  text-align: right;
}

html[dir="rtl"] #editor-view > .flex-1.flex.overflow-hidden {
  direction: ltr;
}

html[dir="rtl"] #editorSidebar,
html[dir="rtl"] #rightSidebar,
html[dir="rtl"] #dsSidePanel,
html[dir="rtl"] #dsPropsPanel,
html[dir="rtl"] #pageThumbs {
  direction: rtl;
}

html[dir="rtl"] #pagesContainer,
html[dir="rtl"] #designCanvasWrapper,
html[dir="rtl"] #designPageContainer,
html[dir="rtl"] [id^="canvas-"],
html[dir="rtl"] .page-card-wrap,
html[dir="rtl"] .page-action-bar,
html[dir="rtl"] .theme-layout-previews,
html[dir="rtl"] .theme-layout-preview-page,
html[dir="rtl"] #layoutModalGrid {
  direction: ltr;
}

html[dir="rtl"] #template-grid h3,
html[dir="rtl"] #template-grid p,
html[dir="rtl"] .saved-album-card h3,
html[dir="rtl"] .saved-album-card h4,
html[dir="rtl"] .saved-album-card p {
  text-align: right;
}

html[dir="rtl"] #albumSearchInput {
  padding-left: .75rem !important;
  padding-right: 2.25rem !important;
}

html[dir="rtl"] label:has(#albumSearchInput) .ph-magnifying-glass {
  left: auto !important;
  right: .75rem !important;
}

#editor-view #rightSidebar .pool-img-cell .photo-thumb-action .ph,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action .ph {
  font-size: 14px !important;
}

/* Dark mode needs stronger thumbnail controls because the photos sit inside a
   very dark panel and low-opacity buttons disappear on busy images. */
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-actions {
  bottom: 6px !important;
  gap: 2px !important;
}

html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
  flex-basis: 27px !important;
  background: rgba(5,7,10,.86) !important;
  border-color: rgba(255,255,255,.34) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger {
  background: rgba(220,38,38,.95) !important;
  border-color: rgba(255,255,255,.42) !important;
}

html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action .ph {
  font-size: 16px !important;
  color: #fff !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.75)) !important;
}

html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg * {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action:not(:hover),
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action:not(:focus),
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action:not(:hover),
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action:not(:focus) {
  background: rgba(5,7,10,.86) !important;
  background-color: rgba(5,7,10,.86) !important;
  background-image: none !important;
  color: #fff !important;
  opacity: 1 !important;
}

html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger:not(:hover),
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger:not(:focus),
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger:not(:hover),
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger:not(:focus) {
  background: rgba(220,38,38,.95) !important;
  background-color: rgba(220,38,38,.95) !important;
  background-image: none !important;
}

@media (max-width: 639px) {
  #editorSidebar,
  #rightSidebar {
    width: 100% !important;
  }
}

/* Definitive thumbnail action layout.
   The previous max-content strip could become wider than a thumbnail and get
   clipped by `.pool-img-cell.overflow-hidden`, leaving only one control visibly
   backed. This keeps all four controls inside the image as equal square cells. */
#editor-view #rightSidebar .pool-img-cell .photo-thumb-actions,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-actions {
  position: absolute !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  z-index: 50 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#editor-view #rightSidebar .pool-img-cell .photo-thumb-action,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action,
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action:not(:hover),
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action:not(:hover),
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action:not(:focus),
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action:not(:focus) {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 2px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(10,10,10,.72) !important;
  background-color: rgba(10,10,10,.72) !important;
  background-image: none !important;
  color: #fff !important;
  opacity: 1 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.45) !important;
}

html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action:not(:hover),
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action:not(:focus) {
  background: rgba(5,7,10,.86) !important;
  background-color: rgba(5,7,10,.86) !important;
  border-color: rgba(255,255,255,.30) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.07) !important;
}

#editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger,
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger:not(:hover),
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger:not(:hover),
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger:not(:focus),
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger:not(:focus) {
  background: rgba(220,38,38,.94) !important;
  background-color: rgba(220,38,38,.94) !important;
  border-color: rgba(255,255,255,.36) !important;
  color: #fff !important;
}

#editor-view #rightSidebar .pool-img-cell .photo-thumb-action .ph,
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg,
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg *,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action .ph,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg * {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

#editor-view #rightSidebar .pool-img-cell .photo-thumb-action .ph,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action .ph {
  font-size: 15px !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)) !important;
}

/* Final fixes for dark-mode preview legibility. Theme layout miniatures should
   remain little paper diagrams, not inherit the dark card background. */
#home-view #template-grid .theme-layout-previews .theme-layout-preview-page,
html.dark #home-view #template-grid .theme-layout-previews .theme-layout-preview-page {
  background: #f7f3ea !important;
  background-color: #f7f3ea !important;
  background-image: none !important;
  border-color: #d6cdbb !important;
  box-shadow: none !important;
}

#home-view #template-grid .theme-layout-previews .theme-layout-preview-slot,
html.dark #home-view #template-grid .theme-layout-previews .theme-layout-preview-slot {
  background: #cbd6e3 !important;
  background-color: #cbd6e3 !important;
  background-image: none !important;
  border-color: #f7f3ea !important;
  opacity: 1 !important;
}

#home-view #template-grid .theme-layout-previews .theme-layout-preview-line,
html.dark #home-view #template-grid .theme-layout-previews .theme-layout-preview-line {
  background: #9ba8b8 !important;
  background-color: #9ba8b8 !important;
  opacity: 1 !important;
}

#home-view #template-grid .theme-layout-previews .theme-layout-preview-more,
html.dark #home-view #template-grid .theme-layout-previews .theme-layout-preview-more {
  background: #1a1813 !important;
  background-color: #1a1813 !important;
  color: #f4efe3 !important;
  border-color: #d6cdbb !important;
}

/* Folder and loose-pool thumbnails now share these controls. Keep the icons
   visible in dark mode and avoid old button rules making them transparent. */
#editor-view #rightSidebar .pool-img-cell .photo-thumb-actions,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-actions {
  left: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2px !important;
  z-index: 70 !important;
  pointer-events: auto !important;
}

#editor-view #rightSidebar .pool-img-cell .photo-thumb-action,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action {
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  background: rgba(8, 7, 6, .86) !important;
  background-color: rgba(8, 7, 6, .86) !important;
  background-image: none !important;
  border: 1px solid rgba(244, 239, 227, .38) !important;
  color: #fff !important;
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.6) !important;
}

#editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action.danger {
  background: rgba(163, 51, 27, .96) !important;
  background-color: rgba(163, 51, 27, .96) !important;
  border-color: rgba(244, 239, 227, .45) !important;
}

#editor-view #rightSidebar .pool-img-cell .photo-thumb-action .ph,
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg,
#editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg *,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action .ph,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg,
html.dark #editor-view #rightSidebar .pool-img-cell .photo-thumb-action svg * {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}