:root[data-theme="heritage"],
body[data-theme="heritage"],
:root[data-theme="light-warm-alabaster"],
body[data-theme="light-warm-alabaster"],
:root[data-theme="warm-sanctuary"],
body[data-theme="warm-sanctuary"] {
  --bg-cream: #FAF7F2;
  --bg-sun-Wash: #F4EFE6;
  --bg-card: rgba(255, 255, 255, 0.96);
  --bg-card-solid: #FFFFFF;

  --rind-dark: #233D2D;
  --rind-deep: #2D4C3A;
  --rind-mid: #3B614B;
  --emerald-hope: #48735A;
  --emerald-bright: #5B8A6E;
  --emerald-soft: #E6EFE9;
  --emerald-tint: #F2F7F4;
  --emerald-border: #B7D1C2;

  --melon-red: #B85943;
  --melon-crimson: #9E4633;
  --melon-coral: #C76B55;
  --melon-pink: #E9BFB5;
  --melon-soft: #F9EDE9;
  --melon-wash: #FCF6F4;

  --sun-gold: #C4934C;
  --sun-amber: #A87834;
  --sun-coral: #B85943;
  --terracotta: #9E4633;
  --sky-trust: #3D6763;
  --sky-soft: #E4EFEB;

  --ink-900: #1F2622;
  --ink-800: #2C3530;
  --ink-700: #445049;
  --ink-500: #627068;
  --ink-400: #88968F;

  --border-warm: rgba(45, 76, 58, 0.18);
  --border-strong: rgba(45, 76, 58, 0.35);
  --shadow-soft: 0 8px 24px -4px rgba(45, 76, 58, 0.08), 0 2px 8px -2px rgba(45, 76, 58, 0.04);
  --shadow-hover: 0 16px 36px -8px rgba(45, 76, 58, 0.14), 0 4px 12px -2px rgba(184, 89, 67, 0.08);
  --shadow-glow: 0 0 0 3px rgba(72, 115, 90, 0.2);

  --watermelon-gradient: linear-gradient(90deg, #233D2D 0%, #3B614B 40%, #E6EFE9 55%, #E9BFB5 70%, #B85943 100%);
  --green-hero-gradient: linear-gradient(135deg, #233D2D 0%, #2D4C3A 55%, #3B614B 100%);
  --melon-btn-gradient: linear-gradient(135deg, #3B614B 0%, #2D4C3A 55%, #B85943 100%);

  --theme-bg-base: #FAF7F2;
  --theme-header-bg: rgba(250, 247, 242, 0.94);
  --theme-banner-bg: #233D2D;
}

:root[data-theme="light-sage-mist"],
body[data-theme="light-sage-mist"],
:root[data-theme="sage-sand"],
body[data-theme="sage-sand"] {
  --bg-cream: #F2F5F3;
  --bg-sun-Wash: #E8EFEA;
  --bg-card: #FFFFFF;
  --bg-card-solid: #FFFFFF;

  --rind-dark: #283830;
  --rind-deep: #354B41;
  --rind-mid: #496457;
  --emerald-hope: #5C7B6D;
  --emerald-bright: #739686;
  --emerald-soft: #E3EBE6;
  --emerald-tint: #F0F4F1;
  --emerald-border: #C2D1C8;

  --melon-red: #C56E5D;
  --melon-crimson: #AA5747;
  --melon-coral: #D48070;
  --melon-pink: #EAC4BC;
  --melon-soft: #F8EDE9;
  --melon-wash: #FAF4F2;

  --sun-gold: #B89058;
  --sun-amber: #9E7740;
  --sun-coral: #C56E5D;
  --terracotta: #AA5747;
  --sky-trust: #4E6E77;
  --sky-soft: #E5EEF1;

  --ink-900: #202723;
  --ink-800: #303A34;
  --ink-700: #48544C;
  --ink-500: #68756D;
  --ink-400: #8E9B93;

  --border-warm: rgba(53, 75, 65, 0.14);
  --border-strong: rgba(53, 75, 65, 0.28);
  --shadow-soft: 0 4px 16px -2px rgba(40, 56, 48, 0.05);
  --shadow-hover: 0 10px 24px -4px rgba(40, 56, 48, 0.09);
  --shadow-glow: 0 0 0 3px rgba(92, 123, 109, 0.18);

  --watermelon-gradient: linear-gradient(90deg, #283830 0%, #496457 45%, #E3EBE6 60%, #EAC4BC 75%, #C56E5D 100%);
  --green-hero-gradient: linear-gradient(135deg, #283830 0%, #354B41 60%, #496457 100%);
  --melon-btn-gradient: linear-gradient(135deg, #496457 0%, #354B41 55%, #C56E5D 100%);

  --theme-bg-base: #F2F5F3;
  --theme-header-bg: rgba(242, 245, 243, 0.95);
  --theme-banner-bg: #354B41;
}

:root[data-theme="light-jerusalem-stone"],
body[data-theme="light-jerusalem-stone"] {
  --bg-cream: #FBF6EE;
  --bg-sun-Wash: #F5ECDF;
  --bg-card: #FFFFFF;
  --bg-card-solid: #FFFFFF;

  --rind-dark: #2B201A;
  --rind-deep: #44322A;
  --rind-mid: #8E3E2F;
  --emerald-hope: #3D614E;
  --emerald-bright: #528068;
  --emerald-soft: #E5EDE8;
  --emerald-tint: #F0F6F2;
  --emerald-border: #BCD1C5;

  --melon-red: #8E3E2F;
  --melon-crimson: #783124;
  --melon-coral: #D97746;
  --melon-pink: #F0BCA2;
  --melon-soft: #F9EDE6;
  --melon-wash: #FDF7F3;

  --sun-gold: #D97746;
  --sun-amber: #BA6032;
  --sun-coral: #8E3E2F;
  --terracotta: #783124;
  --sky-trust: #3D614E;
  --sky-soft: #E5EDE8;

  --ink-900: #2B201A;
  --ink-800: #3E3028;
  --ink-700: #5C4A40;
  --ink-500: #7D6B60;
  --ink-400: #A39185;

  --border-warm: rgba(142, 62, 47, 0.16);
  --border-strong: rgba(142, 62, 47, 0.32);
  --shadow-soft: 0 6px 20px -3px rgba(68, 50, 42, 0.07);
  --shadow-hover: 0 14px 32px -5px rgba(68, 50, 42, 0.13), 0 3px 10px rgba(217, 119, 70, 0.1);
  --shadow-glow: 0 0 0 3px rgba(142, 62, 47, 0.22);

  --watermelon-gradient: linear-gradient(90deg, #2B201A 0%, #8E3E2F 45%, #EADBCE 65%, #3D614E 100%);
  --green-hero-gradient: linear-gradient(135deg, #2B201A 0%, #44322A 55%, #8E3E2F 100%);
  --melon-btn-gradient: linear-gradient(135deg, #8E3E2F 0%, #783124 50%, #D97746 100%);

  --theme-bg-base: #FBF6EE;
  --theme-header-bg: rgba(251, 246, 238, 0.95);
  --theme-banner-bg: #44322A;
}

:root[data-theme="light-coastal-breeze"],
body[data-theme="light-coastal-breeze"],
:root[data-theme="mediterranean-horizon"],
body[data-theme="mediterranean-horizon"] {
  --bg-cream: #F0F6F7;
  --bg-sun-Wash: #E4EFF1;
  --bg-card: #FFFFFF;
  --bg-card-solid: #FFFFFF;

  --rind-dark: #15262E;
  --rind-deep: #1E3A44;
  --rind-mid: #1E4E59;
  --emerald-hope: #0D9488;
  --emerald-bright: #14B8A6;
  --emerald-soft: #D7F0EE;
  --emerald-tint: #EDFAF8;
  --emerald-border: #99DCD6;

  --melon-red: #D96B50;
  --melon-crimson: #BE533B;
  --melon-coral: #E5826A;
  --melon-pink: #F3BFB3;
  --melon-soft: #FAECE9;
  --melon-wash: #FDF6F4;

  --sun-gold: #C9964C;
  --sun-amber: #AC7A32;
  --sun-coral: #D96B50;
  --terracotta: #BE533B;
  --sky-trust: #0D9488;
  --sky-soft: #D7F0EE;

  --ink-900: #15262E;
  --ink-800: #223842;
  --ink-700: #3B535E;
  --ink-500: #5C7480;
  --ink-400: #859CA8;

  --border-warm: rgba(30, 78, 89, 0.16);
  --border-strong: rgba(30, 78, 89, 0.32);
  --shadow-soft: 0 8px 24px -4px rgba(21, 38, 46, 0.07);
  --shadow-hover: 0 16px 36px -6px rgba(21, 38, 46, 0.13), 0 4px 12px rgba(217, 107, 80, 0.08);
  --shadow-glow: 0 0 0 3px rgba(13, 148, 136, 0.22);

  --watermelon-gradient: linear-gradient(90deg, #15262E 0%, #1E4E59 45%, #D7F0EE 60%, #F3BFB3 75%, #D96B50 100%);
  --green-hero-gradient: linear-gradient(135deg, #15262E 0%, #1E3A44 55%, #1E4E59 100%);
  --melon-btn-gradient: linear-gradient(135deg, #1E4E59 0%, #0D9488 50%, #D96B50 100%);

  --theme-bg-base: #F0F6F7;
  --theme-header-bg: rgba(240, 246, 247, 0.94);
  --theme-banner-bg: #1E3A44;
}

:root[data-theme="light-matcha-cream"],
body[data-theme="light-matcha-cream"] {
  --bg-cream: #F4F7F1;
  --bg-sun-Wash: #EBF1E6;
  --bg-card: #FFFFFF;
  --bg-card-solid: #FFFFFF;

  --rind-dark: #1C2920;
  --rind-deep: #253A2C;
  --rind-mid: #2E5339;
  --emerald-hope: #407550;
  --emerald-bright: #528562;
  --emerald-soft: #E1EDE3;
  --emerald-tint: #F0F6F1;
  --emerald-border: #B2D2BA;

  --melon-red: #C86756;
  --melon-crimson: #AF5040;
  --melon-coral: #DA7F70;
  --melon-pink: #EFC0B8;
  --melon-soft: #FAECE9;
  --melon-wash: #FDF6F4;

  --sun-gold: #CCA058;
  --sun-amber: #B38640;
  --sun-coral: #C86756;
  --terracotta: #AF5040;
  --sky-trust: #3D6B58;
  --sky-soft: #E1EDE3;

  --ink-900: #1C2920;
  --ink-800: #2C3D32;
  --ink-700: #465A4C;
  --ink-500: #677C6D;
  --ink-400: #8E9F93;

  --border-warm: rgba(46, 83, 57, 0.16);
  --border-strong: rgba(46, 83, 57, 0.32);
  --shadow-soft: 0 6px 20px -3px rgba(28, 41, 32, 0.06);
  --shadow-hover: 0 14px 32px -5px rgba(28, 41, 32, 0.12), 0 3px 10px rgba(200, 103, 86, 0.08);
  --shadow-glow: 0 0 0 3px rgba(64, 117, 80, 0.2);

  --watermelon-gradient: linear-gradient(90deg, #1C2920 0%, #2E5339 45%, #E1EDE3 60%, #EFC0B8 75%, #C86756 100%);
  --green-hero-gradient: linear-gradient(135deg, #1C2920 0%, #253A2C 55%, #2E5339 100%);
  --melon-btn-gradient: linear-gradient(135deg, #2E5339 0%, #253A2C 50%, #C86756 100%);

  --theme-bg-base: #F4F7F1;
  --theme-header-bg: rgba(244, 247, 241, 0.95);
  --theme-banner-bg: #253A2C;
}

:root[data-theme="light-archival-oatmeal"],
body[data-theme="light-archival-oatmeal"],
:root[data-theme="heritage-cypress"],
body[data-theme="heritage-cypress"] {
  --bg-cream: #EDE8DE;
  --bg-sun-Wash: #E4DED2;
  --bg-card: #FAF8F3;
  --bg-card-solid: #FAF8F3;

  --rind-dark: #1C3527;
  --rind-deep: #254433;
  --rind-mid: #325843;
  --emerald-hope: #416D54;
  --emerald-bright: #548569;
  --emerald-soft: #D9E4DC;
  --emerald-tint: #EBF0EC;
  --emerald-border: #AEC2B5;

  --melon-red: #A8453B;
  --melon-crimson: #8E342B;
  --melon-coral: #BD584E;
  --melon-pink: #DEB4AF;
  --melon-soft: #F4E4E2;
  --melon-wash: #FAF1F0;

  --sun-gold: #B88B46;
  --sun-amber: #9B7030;
  --sun-coral: #A8453B;
  --terracotta: #8E342B;
  --sky-trust: #3B5F5A;
  --sky-soft: #DDEAE7;

  --ink-900: #221F1B;
  --ink-800: #332F2A;
  --ink-700: #4D4741;
  --ink-500: #6F675F;
  --ink-400: #948B82;

  --border-warm: rgba(37, 68, 51, 0.2);
  --border-strong: rgba(37, 68, 51, 0.4);
  --shadow-soft: 0 4px 14px -2px rgba(34, 31, 27, 0.08);
  --shadow-hover: 0 12px 28px -4px rgba(34, 31, 27, 0.14);
  --shadow-glow: 0 0 0 3px rgba(65, 109, 84, 0.25);

  --watermelon-gradient: linear-gradient(90deg, #1C3527 0%, #325843 45%, #D9E4DC 60%, #DEB4AF 75%, #A8453B 100%);
  --green-hero-gradient: linear-gradient(135deg, #1C3527 0%, #254433 55%, #325843 100%);
  --melon-btn-gradient: linear-gradient(135deg, #325843 0%, #254433 50%, #A8453B 100%);

  --theme-bg-base: #EDE8DE;
  --theme-header-bg: rgba(237, 232, 222, 0.95);
  --theme-banner-bg: #1C3527;
}

:root[data-theme="light-desert-saffron"],
body[data-theme="light-desert-saffron"],
:root[data-theme="desert-dawn"],
body[data-theme="desert-dawn"] {
  --bg-cream: #FDF7F2;
  --bg-sun-Wash: #F7ECE3;
  --bg-card: #FFFFFF;
  --bg-card-solid: #FFFFFF;

  --rind-dark: #2E211B;
  --rind-deep: #473229;
  --rind-mid: #A84835;
  --emerald-hope: #355C4A;
  --emerald-bright: #487862;
  --emerald-soft: #DCEBE3;
  --emerald-tint: #EDF6F1;
  --emerald-border: #B5D2C2;

  --melon-red: #A84835;
  --melon-crimson: #8C3726;
  --melon-coral: #E08742;
  --melon-pink: #F3C49F;
  --melon-soft: #FCEFE6;
  --melon-wash: #FEF7F2;

  --sun-gold: #E08742;
  --sun-amber: #C36E2D;
  --sun-coral: #A84835;
  --terracotta: #8C3726;
  --sky-trust: #355C4A;
  --sky-soft: #DCEBE3;

  --ink-900: #2E211B;
  --ink-800: #403028;
  --ink-700: #5C473C;
  --ink-500: #7E6659;
  --ink-400: #A48D80;

  --border-warm: rgba(168, 72, 53, 0.16);
  --border-strong: rgba(168, 72, 53, 0.32);
  --shadow-soft: 0 8px 24px -4px rgba(46, 33, 27, 0.07);
  --shadow-hover: 0 16px 36px -6px rgba(46, 33, 27, 0.12), 0 4px 14px rgba(224, 135, 66, 0.1);
  --shadow-glow: 0 0 0 3px rgba(168, 72, 53, 0.2);

  --watermelon-gradient: linear-gradient(90deg, #473229 0%, #A84835 45%, #FCEFE6 60%, #DCEBE3 75%, #355C4A 100%);
  --green-hero-gradient: linear-gradient(135deg, #2E211B 0%, #473229 55%, #A84835 100%);
  --melon-btn-gradient: linear-gradient(135deg, #A84835 0%, #8C3726 50%, #355C4A 100%);

  --theme-bg-base: #FDF7F2;
  --theme-header-bg: rgba(253, 247, 242, 0.95);
  --theme-banner-bg: #473229;
}

:root[data-theme="light-rose-alabaster"],
body[data-theme="light-rose-alabaster"] {
  --bg-cream: #FAF5F5;
  --bg-sun-Wash: #F4EAEB;
  --bg-card: #FFFFFF;
  --bg-card-solid: #FFFFFF;

  --rind-dark: #1F4A39;
  --rind-deep: #163629;
  --rind-mid: #2A634D;
  --emerald-hope: #347A5F;
  --emerald-bright: #439977;
  --emerald-soft: #D7EDE3;
  --emerald-tint: #EAF6F0;
  --emerald-border: #9DD0B8;

  --melon-red: #D95B72;
  --melon-crimson: #BE435A;
  --melon-coral: #E6778B;
  --melon-pink: #F5B5C1;
  --melon-soft: #FDE8EC;
  --melon-wash: #FFF5F7;

  --sun-gold: #CCA062;
  --sun-amber: #B38647;
  --sun-coral: #D95B72;
  --terracotta: #BE435A;
  --sky-trust: #2A634D;
  --sky-soft: #D7EDE3;

  --ink-900: #2B2124;
  --ink-800: #3E3034;
  --ink-700: #5C4A50;
  --ink-500: #7D676E;
  --ink-400: #A38C94;

  --border-warm: rgba(217, 91, 114, 0.16);
  --border-strong: rgba(217, 91, 114, 0.32);
  --shadow-soft: 0 6px 20px -3px rgba(43, 33, 36, 0.06);
  --shadow-hover: 0 14px 32px -5px rgba(43, 33, 36, 0.12), 0 3px 10px rgba(217, 91, 114, 0.08);
  --shadow-glow: 0 0 0 3px rgba(217, 91, 114, 0.2);

  --watermelon-gradient: linear-gradient(90deg, #1F4A39 0%, #2A634D 40%, #EAF6F0 55%, #F5B5C1 70%, #D95B72 100%);
  --green-hero-gradient: linear-gradient(135deg, #163629 0%, #1F4A39 55%, #2A634D 100%);
  --melon-btn-gradient: linear-gradient(135deg, #2A634D 0%, #1F4A39 50%, #D95B72 100%);

  --theme-bg-base: #FAF5F5;
  --theme-header-bg: rgba(250, 245, 245, 0.95);
  --theme-banner-bg: #163629;
}

body[data-theme] {
  background: var(--theme-bg-base) !important;
  color: var(--ink-900) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body[data-theme]::before {
  opacity: 0.25;
  background-image: radial-gradient(var(--ink-500) 1px, transparent 1px);
}

body[data-theme] .ambient-bg {
  opacity: 0.35;
  background: transparent !important;
}

body[data-theme] .sun-orb {
  opacity: 0.18 !important;
  filter: blur(95px) !important;
}

body[data-theme] .watermelon-top-strip {
  background: var(--theme-banner-bg) !important;
  border-bottom: 2px solid var(--emerald-hope) !important;
  color: #FFFFFF !important;
}

body[data-theme] .site-header {
  background: var(--theme-header-bg) !important;
  border-bottom: 1.5px solid var(--border-warm) !important;
  box-shadow: var(--shadow-soft);
}

body[data-theme] .nav-link {
  color: var(--ink-800) !important;
}

body[data-theme] .nav-link:hover {
  background: var(--emerald-soft) !important;
  color: var(--rind-dark) !important;
}

body[data-theme] .friendly-welcome-hero-box {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-warm) !important;
  box-shadow: var(--shadow-soft) !important;
}

body[data-theme] .hero-title {
  color: var(--rind-dark) !important;
}

body[data-theme] .hero-title-highlight {
  background: linear-gradient(135deg, var(--rind-mid) 0%, var(--melon-red) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body[data-theme] .welcome-pill {
  background: var(--emerald-soft) !important;
  border: 1px solid var(--emerald-border) !important;
  color: var(--rind-dark) !important;
}

body[data-theme] .mission-card {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-warm) !important;
}

body[data-theme] .directory-search-input {
  background: var(--bg-card) !important;
  color: var(--ink-900) !important;
  border: 1.5px solid var(--border-warm) !important;
}

body[data-theme] .filter-pill {
  background: var(--bg-card) !important;
  color: var(--ink-700) !important;
  border: 1px solid var(--border-warm) !important;
}

body[data-theme] .filter-pill.active {
  background: var(--rind-mid) !important;
  color: #FFFFFF !important;
  border-color: var(--rind-dark) !important;
}

body[data-theme] .hotdog-item {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-warm) !important;
  box-shadow: var(--shadow-soft) !important;
}

body[data-theme] .hotdog-item:hover {
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--emerald-hope) !important;
}

body[data-theme] .hotdog-name {
  color: var(--ink-900) !important;
}

body[data-theme] .hotdog-story {
  color: var(--ink-700) !important;
}

body[data-theme] .hotdog-progress-fill,
body[data-theme] .progress-bar-fill {
  background: linear-gradient(90deg, var(--emerald-hope) 0%, var(--sun-gold) 100%) !important;
}

body[data-theme] .btn-primary-sun,
body[data-theme] .hotdog-btn-primary {
  background: var(--melon-btn-gradient) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.18) !important;
}

body[data-theme] .btn-secondary-warm,
body[data-theme] .hotdog-btn-secondary {
  background: var(--emerald-soft) !important;
  color: var(--rind-dark) !important;
  border: 1px solid var(--emerald-border) !important;
}

:root[data-theme="midnight-olive"],
body[data-theme="midnight-olive"] {
  --bg-cream: #121815;
  --bg-sun-Wash: #17211C;
  --bg-card: rgba(24, 34, 29, 0.96);
  --bg-card-solid: #1B2620;
  --rind-dark: #E2ECE5;
  --rind-deep: #C7DDD0;
  --rind-mid: #68B08B;
  --emerald-hope: #4EAA7E;
  --emerald-bright: #5FD19B;
  --emerald-soft: #23352C;
  --emerald-tint: #1C2B23;
  --emerald-border: #355344;
  --melon-red: #E2736C;
  --melon-crimson: #D45D56;
  --melon-coral: #EB8781;
  --melon-pink: #A85A55;
  --melon-soft: #382424;
  --melon-wash: #271A1B;
  --sun-gold: #E5A95A;
  --sun-amber: #F0C078;
  --sun-coral: #E2736C;
  --terracotta: #D45D56;
  --sky-trust: #5EB2B8;
  --sky-soft: #1E3134;
  --ink-900: #EFF5F1;
  --ink-800: #DFE8E2;
  --ink-700: #B7C7BD;
  --ink-500: #8E9F95;
  --ink-400: #6D7E75;
  --border-warm: rgba(104, 176, 139, 0.22);
  --border-strong: rgba(104, 176, 139, 0.38);
  --shadow-soft: 0 8px 28px -4px rgba(0, 0, 0, 0.55);
  --shadow-hover: 0 16px 40px -6px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 3px rgba(78, 170, 126, 0.35);
  --watermelon-gradient: linear-gradient(90deg, #1C2B23 0%, #4EAA7E 45%, #E5A95A 70%, #E2736C 100%);
  --green-hero-gradient: linear-gradient(135deg, #17211C 0%, #203129 60%, #2A4237 100%);
  --melon-btn-gradient: linear-gradient(135deg, #4EAA7E 0%, #3B8461 50%, #E2736C 100%);
  --theme-bg-base: #121815;
  --theme-header-bg: rgba(18, 24, 21, 0.94);
  --theme-banner-bg: #1B2922;
  color-scheme: dark;
}

body[data-theme="midnight-olive"] .brand-logo,
body[data-theme="midnight-olive"] .nav-link,
body[data-theme="midnight-olive"] .brand-name {
  color: #EFF5F1 !important;
}

body[data-theme="midnight-olive"] .lang-tab-bar-strip {
  background: #17211C !important;
  border-bottom: 1px solid #23352C !important;
}

body[data-theme="midnight-olive"] .lang-tab-btn {
  background: #1E2B24 !important;
  color: #CFDDD4 !important;
  border: 1px solid #2F453A !important;
}

body[data-theme="midnight-olive"] .lang-tab-btn.active {
  background: #4EAA7E !important;
  color: #0E1612 !important;
  font-weight: 800;
}

body[data-theme="midnight-olive"] .modal-card,
body[data-theme="midnight-olive"] .drawer-content {
  background: #18221D !important;
  color: #EFF5F1 !important;
  border: 1px solid #355344 !important;
}

body[data-theme="midnight-olive"] .form-text-input,
body[data-theme="midnight-olive"] .form-textarea,
body[data-theme="midnight-olive"] select {
  background: #111714 !important;
  color: #EFF5F1 !important;
  border: 1px solid #355344 !important;
}

body[data-layout="magazine"] .hotdog-tabs-grid {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
  gap: 1.6rem !important;
}

body[data-layout="magazine"] .hotdog-item {
  border-radius: 18px !important;
  padding: 0.6rem !important;
}

body[data-layout="magazine"] .hotdog-thumb-wrap {
  border-radius: 14px !important;
  margin-bottom: 0.8rem !important;
}

body[data-layout="magazine"] .hotdog-name {
  font-family: var(--font-serif) !important;
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

body[data-layout="magazine"] .hotdog-story {
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body[data-layout="minimal-bento"] .hotdog-tabs-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 1.1rem !important;
}

body[data-layout="minimal-bento"] .hotdog-item {
  border-radius: 12px !important;
  border-width: 1px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

body[data-layout="minimal-bento"] .hotdog-item:hover {
  transform: translateY(-2px) !important;
}

body[data-layout="minimal-bento"] .hotdog-item::before {
  display: none !important; 
}

body[data-layout="minimal-bento"] .hotdog-badge-row {
  margin-bottom: 0.4rem !important;
}

body[data-layout="minimal-bento"] .hotdog-name {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
}

body[data-layout="minimal-bento"] .hotdog-story {
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  -webkit-line-clamp: 2 !important;
}

body[data-layout="cinema-dark"] .hotdog-tabs-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 1.5rem !important;
}

body[data-layout="cinema-dark"] .hotdog-item {
  border-radius: 20px !important;
  background: rgba(27, 38, 32, 0.95) !important;
  border: 1px solid rgba(78, 170, 126, 0.25) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

body[data-layout="cinema-dark"] .hotdog-thumb-wrap {
  height: 220px !important;
  border-radius: 16px !important;
}

body[data-layout="cinema-dark"] .hotdog-btn-primary {
  background: linear-gradient(135deg, #E5A95A 0%, #D48E33 100%) !important;
  color: #121815 !important;
  font-weight: 800 !important;
}

body[data-layout="narrative-split"] .hotdog-tabs-grid {
  grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)) !important;
  gap: 1.35rem !important;
}

@media (min-width: 768px) {
  body[data-layout="narrative-split"] .hotdog-item {
    display: grid !important;
    grid-template-columns: 210px 1fr !important;
    min-height: 240px !important;
    border-radius: 18px !important;
  }

  body[data-layout="narrative-split"] .hotdog-thumb-wrap {
    height: 100% !important;
    min-height: 240px !important;
    border-radius: 16px 0 0 16px !important;
    margin: 0 !important;
  }

  body[data-layout="narrative-split"] .hotdog-content-wrap,
  body[data-layout="narrative-split"] .hotdog-info {
    padding: 1.1rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
}

body[data-layout="narrative-split"] .hotdog-story {
  -webkit-line-clamp: 3 !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
}

body[data-layout="dossier-list"] .hotdog-tabs-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

body[data-layout="dossier-list"] .hotdog-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 1.1rem !important;
  border-radius: 12px !important;
  flex-wrap: wrap !important;
  gap: 0.85rem !important;
}

body[data-layout="dossier-list"] .hotdog-item::before {
  display: none !important;
}

body[data-layout="dossier-list"] .hotdog-thumb-wrap {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 10px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

body[data-layout="dossier-list"] .hotdog-info {
  flex: 1 1 300px !important;
  padding: 0 !important;
}

body[data-layout="dossier-list"] .hotdog-story {
  display: none !important; 
}

body[data-layout="dossier-list"] .hotdog-actions {
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}

body[data-layout="dossier-list"] .hotdog-btn-primary {
  padding: 0.45rem 1rem !important;
  font-size: 0.82rem !important;
}

body[data-layout="soft-cards"] .hotdog-tabs-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 1.35rem !important;
}

body[data-layout="soft-cards"] .hotdog-item {
  border-radius: 24px !important;
  padding: 0.85rem !important;
  border: 1.5px solid var(--border-warm) !important;
}

body[data-layout="soft-cards"] .hotdog-thumb-wrap {
  border-radius: 18px !important;
}

body[data-layout="soft-cards"] .hotdog-btn-primary,
body[data-layout="soft-cards"] .hotdog-btn-secondary {
  border-radius: 999px !important;
}

body[data-layout="soft-cards"] .filter-pill {
  border-radius: 999px !important;
  padding: 0.45rem 1.15rem !important;
}

:root[data-theme="dark-obsidian-emerald"],
body[data-theme="dark-obsidian-emerald"] {
  --bg-cream: #090D0B;
  --bg-sun-Wash: #0E1511;
  --bg-card: rgba(18, 26, 22, 0.94);
  --bg-card-solid: #121A16;

  --rind-dark: #F2F7F4;
  --rind-deep: #D0E3D7;
  --rind-mid: #34D399;
  --emerald-hope: #10B981;
  --emerald-bright: #34D399;
  --emerald-soft: #162B21;
  --emerald-tint: #102118;
  --emerald-border: rgba(52, 211, 153, 0.28);

  --melon-red: #F43F5E;
  --melon-crimson: #E11D48;
  --melon-coral: #FB7185;
  --melon-pink: #FDA4AF;
  --melon-soft: #2D181D;
  --melon-wash: #1C0F12;

  --sun-gold: #F3C77C;
  --sun-amber: #E5B360;
  --sun-coral: #F43F5E;
  --terracotta: #E11D48;
  --sky-trust: #2DD4BF;
  --sky-soft: #132A26;

  --ink-900: #F3F7F5;
  --ink-800: #E1ECE5;
  --ink-700: #B4C6BC;
  --ink-500: #8FA396;
  --ink-400: #6B7E72;

  --border-warm: rgba(52, 211, 153, 0.18);
  --border-strong: rgba(52, 211, 153, 0.35);
  --shadow-soft: 0 8px 30px -4px rgba(0, 0, 0, 0.7);
  --shadow-hover: 0 16px 44px -6px rgba(0, 0, 0, 0.85), 0 0 20px rgba(52, 211, 153, 0.15);
  --shadow-glow: 0 0 0 3px rgba(52, 211, 153, 0.3);

  --watermelon-gradient: linear-gradient(90deg, #102118 0%, #10B981 45%, #F3C77C 75%, #F43F5E 100%);
  --green-hero-gradient: linear-gradient(135deg, #0E1511 0%, #17241D 60%, #1F3327 100%);
  --melon-btn-gradient: linear-gradient(135deg, #10B981 0%, #059669 50%, #F3C77C 100%);

  --theme-bg-base: #090D0B;
  --theme-header-bg: rgba(9, 13, 11, 0.94);
  --theme-banner-bg: #102118;
}

:root[data-theme="dark-smoky-quartz"],
body[data-theme="dark-smoky-quartz"] {
  --bg-cream: #0C0A09;
  --bg-sun-Wash: #14100E;
  --bg-card: rgba(23, 20, 18, 0.94);
  --bg-card-solid: #171412;

  --rind-dark: #FAF4EF;
  --rind-deep: #EBDCD2;
  --rind-mid: #E76F51;
  --emerald-hope: #4EAA7E;
  --emerald-bright: #68C498;
  --emerald-soft: #251B18;
  --emerald-tint: #1C1412;
  --emerald-border: rgba(231, 111, 81, 0.28);

  --melon-red: #E76F51;
  --melon-crimson: #D45B3D;
  --melon-coral: #F4A261;
  --melon-pink: #F8C39E;
  --melon-soft: #301B17;
  --melon-wash: #20110E;

  --sun-gold: #F4A261;
  --sun-amber: #E58D46;
  --sun-coral: #E76F51;
  --terracotta: #D45B3D;
  --sky-trust: #52B788;
  --sky-soft: #17261F;

  --ink-900: #FAF4EF;
  --ink-800: #EDE1D8;
  --ink-700: #C7B7AC;
  --ink-500: #9C8E84;
  --ink-400: #75675F;

  --border-warm: rgba(231, 111, 81, 0.18);
  --border-strong: rgba(231, 111, 81, 0.35);
  --shadow-soft: 0 8px 30px -4px rgba(0, 0, 0, 0.7);
  --shadow-hover: 0 16px 44px -6px rgba(0, 0, 0, 0.85), 0 0 20px rgba(231, 111, 81, 0.15);
  --shadow-glow: 0 0 0 3px rgba(231, 111, 81, 0.3);

  --watermelon-gradient: linear-gradient(90deg, #1C1412 0%, #4EAA7E 40%, #F4A261 70%, #E76F51 100%);
  --green-hero-gradient: linear-gradient(135deg, #14100E 0%, #201815 60%, #2D221D 100%);
  --melon-btn-gradient: linear-gradient(135deg, #E76F51 0%, #D45B3D 50%, #F4A261 100%);

  --theme-bg-base: #0C0A09;
  --theme-header-bg: rgba(12, 10, 9, 0.94);
  --theme-banner-bg: #1C1412;
}

:root[data-theme="dark-abyss-mint"],
body[data-theme="dark-abyss-mint"] {
  --bg-cream: #06090E;
  --bg-sun-Wash: #0A1017;
  --bg-card: rgba(13, 19, 28, 0.94);
  --bg-card-solid: #0D131C;

  --rind-dark: #F8FAFC;
  --rind-deep: #DCE5EE;
  --rind-mid: #10E599;
  --emerald-hope: #05D384;
  --emerald-bright: #38EFAB;
  --emerald-soft: #0E2922;
  --emerald-tint: #091C17;
  --emerald-border: rgba(16, 229, 153, 0.28);

  --melon-red: #F43F5E;
  --melon-crimson: #E11D48;
  --melon-coral: #FB7185;
  --melon-pink: #FDA4AF;
  --melon-soft: #2B1219;
  --melon-wash: #1B0A0F;

  --sun-gold: #38BDF8;
  --sun-amber: #0EA5E9;
  --sun-coral: #F43F5E;
  --terracotta: #E11D48;
  --sky-trust: #38BDF8;
  --sky-soft: #0E2535;

  --ink-900: #F8FAFC;
  --ink-800: #E2E8F0;
  --ink-700: #CBD5E1;
  --ink-500: #94A3B8;
  --ink-400: #64748B;

  --border-warm: rgba(16, 229, 153, 0.18);
  --border-strong: rgba(16, 229, 153, 0.35);
  --shadow-soft: 0 8px 30px -4px rgba(0, 0, 0, 0.7);
  --shadow-hover: 0 16px 44px -6px rgba(0, 0, 0, 0.85), 0 0 24px rgba(16, 229, 153, 0.2);
  --shadow-glow: 0 0 0 3px rgba(16, 229, 153, 0.35);

  --watermelon-gradient: linear-gradient(90deg, #091C17 0%, #10E599 45%, #38BDF8 75%, #F43F5E 100%);
  --green-hero-gradient: linear-gradient(135deg, #0A1017 0%, #101A24 60%, #162432 100%);
  --melon-btn-gradient: linear-gradient(135deg, #10E599 0%, #059669 50%, #38BDF8 100%);

  --theme-bg-base: #06090E;
  --theme-header-bg: rgba(6, 9, 14, 0.94);
  --theme-banner-bg: #091C17;
}

:root[data-theme="dark-titanium-rose"],
body[data-theme="dark-titanium-rose"] {
  --bg-cream: #0A0B0D;
  --bg-sun-Wash: #111216;
  --bg-card: rgba(19, 21, 26, 0.94);
  --bg-card-solid: #13151A;

  --rind-dark: #F1F5F9;
  --rind-deep: #D7DEE6;
  --rind-mid: #FB7185;
  --emerald-hope: #34D399;
  --emerald-bright: #6EE7B7;
  --emerald-soft: #241A1E;
  --emerald-tint: #181115;
  --emerald-border: rgba(251, 113, 133, 0.28);

  --melon-red: #FB7185;
  --melon-crimson: #F43F5E;
  --melon-coral: #FDA4AF;
  --melon-pink: #FECDD3;
  --melon-soft: #2C161D;
  --melon-wash: #1C0D12;

  --sun-gold: #CBD5E1;
  --sun-amber: #94A3B8;
  --sun-coral: #FB7185;
  --terracotta: #F43F5E;
  --sky-trust: #64748B;
  --sky-soft: #171A21;

  --ink-900: #F1F5F9;
  --ink-800: #E2E8F0;
  --ink-700: #94A3B8;
  --ink-500: #64748B;
  --ink-400: #475569;

  --border-warm: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(251, 113, 133, 0.35);
  --shadow-soft: 0 8px 30px -4px rgba(0, 0, 0, 0.7);
  --shadow-hover: 0 16px 44px -6px rgba(0, 0, 0, 0.85), 0 0 20px rgba(251, 113, 133, 0.15);
  --shadow-glow: 0 0 0 3px rgba(251, 113, 133, 0.28);

  --watermelon-gradient: linear-gradient(90deg, #181115 0%, #34D399 45%, #CBD5E1 70%, #FB7185 100%);
  --green-hero-gradient: linear-gradient(135deg, #111216 0%, #1A1C22 60%, #242730 100%);
  --melon-btn-gradient: linear-gradient(135deg, #F43F5E 0%, #E11D48 50%, #FB7185 100%);

  --theme-bg-base: #0A0B0D;
  --theme-header-bg: rgba(10, 11, 13, 0.94);
  --theme-banner-bg: #181115;
}

:root[data-theme="dark-twilight-indigo"],
body[data-theme="dark-twilight-indigo"] {
  --bg-cream: #0A0C16;
  --bg-sun-Wash: #101424;
  --bg-card: rgba(17, 22, 36, 0.94);
  --bg-card-solid: #111624;

  --rind-dark: #EEF2FF;
  --rind-deep: #D5DDFA;
  --rind-mid: #34D399;
  --emerald-hope: #10B981;
  --emerald-bright: #6EE7B7;
  --emerald-soft: #14222E;
  --emerald-tint: #0E1822;
  --emerald-border: rgba(129, 140, 248, 0.28);

  --melon-red: #F472B6;
  --melon-crimson: #EC4899;
  --melon-coral: #FB7185;
  --melon-pink: #FBCFE8;
  --melon-soft: #2B1626;
  --melon-wash: #1B0E18;

  --sun-gold: #A5B4FC;
  --sun-amber: #818CF8;
  --sun-coral: #F472B6;
  --terracotta: #EC4899;
  --sky-trust: #818CF8;
  --sky-soft: #181E38;

  --ink-900: #EEF2FF;
  --ink-800: #E0E7FF;
  --ink-700: #B2BEE2;
  --ink-500: #8590B6;
  --ink-400: #5E698E;

  --border-warm: rgba(129, 140, 248, 0.18);
  --border-strong: rgba(129, 140, 248, 0.35);
  --shadow-soft: 0 8px 30px -4px rgba(0, 0, 0, 0.7);
  --shadow-hover: 0 16px 44px -6px rgba(0, 0, 0, 0.85), 0 0 22px rgba(129, 140, 248, 0.18);
  --shadow-glow: 0 0 0 3px rgba(129, 140, 248, 0.3);

  --watermelon-gradient: linear-gradient(90deg, #0E1822 0%, #34D399 45%, #A5B4FC 75%, #F472B6 100%);
  --green-hero-gradient: linear-gradient(135deg, #101424 0%, #171E36 60%, #1E2746 100%);
  --melon-btn-gradient: linear-gradient(135deg, #10B981 0%, #34D399 50%, #818CF8 100%);

  --theme-bg-base: #0A0C16;
  --theme-header-bg: rgba(10, 12, 22, 0.94);
  --theme-banner-bg: #12192F;
}

:root[data-theme="dark-imperial-onyx"],
body[data-theme="dark-imperial-onyx"] {
  --bg-cream: #0A0A0A;
  --bg-sun-Wash: #121212;
  --bg-card: rgba(19, 20, 19, 0.94);
  --bg-card-solid: #131413;

  --rind-dark: #FAF6EE;
  --rind-deep: #ECE4D3;
  --rind-mid: #D4AF37;
  --emerald-hope: #4ADE80;
  --emerald-bright: #86EFAC;
  --emerald-soft: #232014;
  --emerald-tint: #18150C;
  --emerald-border: rgba(212, 175, 55, 0.32);

  --melon-red: #E11D48;
  --melon-crimson: #BE123C;
  --melon-coral: #F43F5E;
  --melon-pink: #FDA4AF;
  --melon-soft: #2E1218;
  --melon-wash: #1D0A0F;

  --sun-gold: #D4AF37;
  --sun-amber: #B88E18;
  --sun-coral: #E11D48;
  --terracotta: #BE123C;
  --sky-trust: #D4AF37;
  --sky-soft: #221D0E;

  --ink-900: #FAF6EE;
  --ink-800: #EFE8DC;
  --ink-700: #C7BFA8;
  --ink-500: #9E988A;
  --ink-400: #746E62;

  --border-warm: rgba(212, 175, 55, 0.2);
  --border-strong: rgba(212, 175, 55, 0.4);
  --shadow-soft: 0 8px 30px -4px rgba(0, 0, 0, 0.7);
  --shadow-hover: 0 16px 44px -6px rgba(0, 0, 0, 0.85), 0 0 24px rgba(212, 175, 55, 0.2);
  --shadow-glow: 0 0 0 3px rgba(212, 175, 55, 0.32);

  --watermelon-gradient: linear-gradient(90deg, #18150C 0%, #4ADE80 45%, #D4AF37 75%, #E11D48 100%);
  --green-hero-gradient: linear-gradient(135deg, #121212 0%, #1A1C1A 60%, #242824 100%);
  --melon-btn-gradient: linear-gradient(135deg, #D4AF37 0%, #B88E18 50%, #4ADE80 100%);

  --theme-bg-base: #0A0A0A;
  --theme-header-bg: rgba(10, 10, 10, 0.94);
  --theme-banner-bg: #1A160B;
}

body[data-theme^="dark-"] {
  color-scheme: dark;
}

body[data-theme^="dark-"] .site-header {
  border-bottom: 1px solid var(--border-warm) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

body[data-theme^="dark-"] .brand-name,
body[data-theme^="dark-"] .nav-link {
  color: var(--ink-900) !important;
}

body[data-theme^="dark-"] .hotdog-item {
  border: 1px solid var(--border-warm) !important;
}

body[data-theme^="dark-"] .hotdog-item:hover {
  border-color: var(--rind-mid) !important;
}

body[data-theme^="dark-"] .hotdog-name {
  color: var(--ink-900) !important;
}

body[data-theme^="dark-"] .hotdog-story {
  color: var(--ink-700) !important;
}

body[data-theme^="dark-"] .lang-tab-bar-strip {
  background: var(--bg-sun-Wash) !important;
  border-bottom: 1px solid var(--border-warm) !important;
}

body[data-theme^="dark-"] .lang-tab-btn {
  background: var(--bg-card-solid) !important;
  color: var(--ink-700) !important;
  border: 1px solid var(--border-warm) !important;
}

body[data-theme^="dark-"] .lang-tab-btn.active {
  background: var(--rind-mid) !important;
  color: #000000 !important;
  font-weight: 800;
}

body[data-theme^="dark-"] .modal-card,
body[data-theme^="dark-"] .drawer-content {
  background: var(--bg-card-solid) !important;
  color: var(--ink-900) !important;
  border: 1px solid var(--border-strong) !important;
}

body[data-theme^="dark-"] .form-text-input,
body[data-theme^="dark-"] .form-textarea,
body[data-theme^="dark-"] select {
  background: var(--bg-cream) !important;
  color: var(--ink-900) !important;
  border: 1px solid var(--border-warm) !important;
}

body[data-theme^="dark-"] .btn-secondary-warm {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--ink-800) !important;
  border: 1px solid var(--border-warm) !important;
}

body.comfort-warm-light {
  filter: sepia(0.12) saturate(0.92) contrast(0.96) !important;
}

.sandbox-theme-dock {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(30, 38, 34, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 0.65rem 1rem;
  box-shadow: 0 14px 40px -8px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 95vw;
  width: auto;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sandbox-theme-dock.dock-minimized {
  transform: translateX(-50%) translateY(calc(100% - 32px));
  opacity: 0.88;
}

.sandbox-dock-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #A7F3D0;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  padding-right: 0.75rem;
}

.sandbox-theme-buttons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  max-width: 60vw;
  scrollbar-width: none;
}

.sandbox-theme-buttons::-webkit-scrollbar {
  display: none;
}

.sandbox-opt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.sandbox-opt-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.sandbox-opt-btn.active-theme {
  background: #10B981;
  color: #064E3B;
  border-color: #34D399;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}

.swatch-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.sandbox-dock-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 0.75rem;
  white-space: nowrap;
}

.sandbox-action-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.18s ease;
}

.sandbox-action-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.sandbox-action-btn.gallery-link {
  background: linear-gradient(135deg, #059669 0%, #0D9488 100%);
  color: #FFFFFF;
  border-color: #34D399;
  text-decoration: none;
}

.sandbox-dock-toggle-btn {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 0.2rem;
  display: flex;
  align-items: center;
}

.sandbox-dock-toggle-btn:hover {
  color: #FFFFFF;
}

@media (max-width: 900px) {
  .sandbox-theme-dock {
    flex-wrap: wrap;
    bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 16px;
    width: 96vw;
  }
  .sandbox-theme-buttons {
    max-width: 100%;
    order: 3;
    width: 100%;
    padding-top: 0.25rem;
  }
}