/* Theme-adaptive Dynamic Variables (synced with Zashboard DaisyUI themes) */
:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #16231f;
  background: #e8eeeb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #16231f;
  --muted: #697772;
  --line: rgba(22, 35, 31, 0.14);
  --paper: #f8faf8;
  --accent: #ff6b3d;
  --green: #1e7358;

  /* Theme-adaptive Dynamic Variables (synced with Zashboard DaisyUI themes) */
  --header-bg: rgba(250, 251, 250, 0.94);
  --header-border: rgba(22, 35, 31, 0.14);
  --header-text: #16231f;
  --header-muted: #697772;
  --header-btn-bg: #ffffff;
  --header-btn-hover: #f0f4f2;
  --header-btn-border: rgba(22, 35, 31, 0.14);
  --header-btn-text: #16231f;
  --theme-accent: #1e7358;

  --modal-bg: #fcfdfc;
  --modal-header-bg: #fcfdfc;
  --modal-border: rgba(22, 35, 31, 0.14);
  --modal-text: #16231f;
  --modal-muted: #697772;
  --modal-toolbar-bg: #f2f5f3;
  --modal-footer-bg: #f7faf8;
  --editor-bg: #181c1a;
  --editor-border: rgba(22, 35, 31, 0.2);
  --editor-text: #e6ede8;
}

/* All 40 DaisyUI Themes Synchronized with Zashboard */
/* Theme: abyss */
[data-theme="abyss"] {
  color-scheme: dark;
  --header-bg: oklch(15% .08 209);
  --header-border: oklch(10% .08 209);
  --header-text: oklch(90% .076 70.697);
  --header-muted: color-mix(in srgb, oklch(90% .076 70.697) 65%, transparent);
  --header-btn-bg: oklch(20% .08 209);
  --header-btn-hover: oklch(10% .08 209);
  --header-btn-border: oklch(10% .08 209);
  --header-btn-text: oklch(90% .076 70.697);
  --theme-accent: oklch(92% .2653 125);
  --modal-bg: oklch(20% .08 209);
  --modal-header-bg: oklch(15% .08 209);
  --modal-border: oklch(10% .08 209);
  --modal-text: oklch(90% .076 70.697);
  --modal-muted: color-mix(in srgb, oklch(90% .076 70.697) 65%, transparent);
  --modal-toolbar-bg: oklch(10% .08 209);
  --modal-footer-bg: oklch(15% .08 209);
}

/* Theme: acid */
[data-theme="acid"] {
  color-scheme: light;
  --header-bg: oklch(95% 0 0);
  --header-border: oklch(91% 0 0);
  --header-text: oklch(0% 0 0);
  --header-muted: color-mix(in srgb, oklch(0% 0 0) 65%, transparent);
  --header-btn-bg: oklch(98% 0 0);
  --header-btn-hover: oklch(91% 0 0);
  --header-btn-border: oklch(91% 0 0);
  --header-btn-text: oklch(0% 0 0);
  --theme-accent: oklch(71.9% .357 330.759);
  --modal-bg: oklch(98% 0 0);
  --modal-header-bg: oklch(95% 0 0);
  --modal-border: oklch(91% 0 0);
  --modal-text: oklch(0% 0 0);
  --modal-muted: color-mix(in srgb, oklch(0% 0 0) 65%, transparent);
  --modal-toolbar-bg: oklch(91% 0 0);
  --modal-footer-bg: oklch(95% 0 0);
}

/* Theme: aqua */
[data-theme="aqua"] {
  color-scheme: dark;
  --header-bg: oklch(28% .091 267.935);
  --header-border: oklch(22% .091 267.935);
  --header-text: oklch(90% .058 230.902);
  --header-muted: color-mix(in srgb, oklch(90% .058 230.902) 65%, transparent);
  --header-btn-bg: oklch(37% .146 265.522);
  --header-btn-hover: oklch(22% .091 267.935);
  --header-btn-border: oklch(22% .091 267.935);
  --header-btn-text: oklch(90% .058 230.902);
  --theme-accent: oklch(85.661% .144 198.645);
  --modal-bg: oklch(37% .146 265.522);
  --modal-header-bg: oklch(28% .091 267.935);
  --modal-border: oklch(22% .091 267.935);
  --modal-text: oklch(90% .058 230.902);
  --modal-muted: color-mix(in srgb, oklch(90% .058 230.902) 65%, transparent);
  --modal-toolbar-bg: oklch(22% .091 267.935);
  --modal-footer-bg: oklch(28% .091 267.935);
}

/* Theme: autumn */
[data-theme="autumn"] {
  color-scheme: light;
  --header-bg: oklch(89.107% 0 0);
  --header-border: oklch(82.4% 0 0);
  --header-text: oklch(19.162% 0 0);
  --header-muted: color-mix(in srgb, oklch(19.162% 0 0) 65%, transparent);
  --header-btn-bg: oklch(95.814% 0 0);
  --header-btn-hover: oklch(82.4% 0 0);
  --header-btn-border: oklch(82.4% 0 0);
  --header-btn-text: oklch(19.162% 0 0);
  --theme-accent: oklch(40.723% .161 17.53);
  --modal-bg: oklch(95.814% 0 0);
  --modal-header-bg: oklch(89.107% 0 0);
  --modal-border: oklch(82.4% 0 0);
  --modal-text: oklch(19.162% 0 0);
  --modal-muted: color-mix(in srgb, oklch(19.162% 0 0) 65%, transparent);
  --modal-toolbar-bg: oklch(82.4% 0 0);
  --modal-footer-bg: oklch(89.107% 0 0);
}

/* Theme: black */
[data-theme="black"] {
  color-scheme: dark;
  --header-bg: oklch(19% 0 0);
  --header-border: oklch(22% 0 0);
  --header-text: oklch(87.609% 0 0);
  --header-muted: color-mix(in srgb, oklch(87.609% 0 0) 65%, transparent);
  --header-btn-bg: oklch(0% 0 0);
  --header-btn-hover: oklch(22% 0 0);
  --header-btn-border: oklch(22% 0 0);
  --header-btn-text: oklch(87.609% 0 0);
  --theme-accent: oklch(35% 0 0);
  --modal-bg: oklch(0% 0 0);
  --modal-header-bg: oklch(19% 0 0);
  --modal-border: oklch(22% 0 0);
  --modal-text: oklch(87.609% 0 0);
  --modal-muted: color-mix(in srgb, oklch(87.609% 0 0) 65%, transparent);
  --modal-toolbar-bg: oklch(22% 0 0);
  --modal-footer-bg: oklch(19% 0 0);
}

/* Theme: bumblebee */
[data-theme="bumblebee"] {
  color-scheme: light;
  --header-bg: oklch(97% 0 0);
  --header-border: oklch(92% 0 0);
  --header-text: oklch(20% 0 0);
  --header-muted: color-mix(in srgb, oklch(20% 0 0) 65%, transparent);
  --header-btn-bg: oklch(100% 0 0);
  --header-btn-hover: oklch(92% 0 0);
  --header-btn-border: oklch(92% 0 0);
  --header-btn-text: oklch(20% 0 0);
  --theme-accent: oklch(85% .199 91.936);
  --modal-bg: oklch(100% 0 0);
  --modal-header-bg: oklch(97% 0 0);
  --modal-border: oklch(92% 0 0);
  --modal-text: oklch(20% 0 0);
  --modal-muted: color-mix(in srgb, oklch(20% 0 0) 65%, transparent);
  --modal-toolbar-bg: oklch(92% 0 0);
  --modal-footer-bg: oklch(97% 0 0);
}

/* Theme: business */
[data-theme="business"] {
  color-scheme: dark;
  --header-bg: oklch(22.648% 0 0);
  --header-border: oklch(20.944% 0 0);
  --header-text: oklch(84.87% 0 0);
  --header-muted: color-mix(in srgb, oklch(84.87% 0 0) 65%, transparent);
  --header-btn-bg: oklch(24.353% 0 0);
  --header-btn-hover: oklch(20.944% 0 0);
  --header-btn-border: oklch(20.944% 0 0);
  --header-btn-text: oklch(84.87% 0 0);
  --theme-accent: oklch(41.703% .099 251.473);
  --modal-bg: oklch(24.353% 0 0);
  --modal-header-bg: oklch(22.648% 0 0);
  --modal-border: oklch(20.944% 0 0);
  --modal-text: oklch(84.87% 0 0);
  --modal-muted: color-mix(in srgb, oklch(84.87% 0 0) 65%, transparent);
  --modal-toolbar-bg: oklch(20.944% 0 0);
  --modal-footer-bg: oklch(22.648% 0 0);
}

/* Theme: caramellatte */
[data-theme="caramellatte"] {
  color-scheme: light;
  --header-bg: oklch(95% .038 75.164);
  --header-border: oklch(90% .076 70.697);
  --header-text: oklch(40% .123 38.172);
  --header-muted: color-mix(in srgb, oklch(40% .123 38.172) 65%, transparent);
  --header-btn-bg: oklch(98% .016 73.684);
  --header-btn-hover: oklch(90% .076 70.697);
  --header-btn-border: oklch(90% .076 70.697);
  --header-btn-text: oklch(40% .123 38.172);
  --theme-accent: oklch(0% 0 0);
  --modal-bg: oklch(98% .016 73.684);
  --modal-header-bg: oklch(95% .038 75.164);
  --modal-border: oklch(90% .076 70.697);
  --modal-text: oklch(40% .123 38.172);
  --modal-muted: color-mix(in srgb, oklch(40% .123 38.172) 65%, transparent);
  --modal-toolbar-bg: oklch(90% .076 70.697);
  --modal-footer-bg: oklch(95% .038 75.164);
}

/* Theme: cmyk */
[data-theme="cmyk"] {
  color-scheme: light;
  --header-bg: oklch(95% 0 0);
  --header-border: oklch(90% 0 0);
  --header-text: oklch(20% 0 0);
  --header-muted: color-mix(in srgb, oklch(20% 0 0) 65%, transparent);
  --header-btn-bg: oklch(100% 0 0);
  --header-btn-hover: oklch(90% 0 0);
  --header-btn-border: oklch(90% 0 0);
  --header-btn-text: oklch(20% 0 0);
  --theme-accent: oklch(71.772% .133 239.443);
  --modal-bg: oklch(100% 0 0);
  --modal-header-bg: oklch(95% 0 0);
  --modal-border: oklch(90% 0 0);
  --modal-text: oklch(20% 0 0);
  --modal-muted: color-mix(in srgb, oklch(20% 0 0) 65%, transparent);
  --modal-toolbar-bg: oklch(90% 0 0);
  --modal-footer-bg: oklch(95% 0 0);
}

/* Theme: coffee */
[data-theme="coffee"] {
  color-scheme: dark;
  --header-bg: oklch(21% .021 329.708);
  --header-border: oklch(16% .019 329.708);
  --header-text: oklch(72.354% .092 79.129);
  --header-muted: color-mix(in srgb, oklch(72.354% .092 79.129) 65%, transparent);
  --header-btn-bg: oklch(24% .023 329.708);
  --header-btn-hover: oklch(16% .019 329.708);
  --header-btn-border: oklch(16% .019 329.708);
  --header-btn-text: oklch(72.354% .092 79.129);
  --theme-accent: oklch(71.996% .123 62.756);
  --modal-bg: oklch(24% .023 329.708);
  --modal-header-bg: oklch(21% .021 329.708);
  --modal-border: oklch(16% .019 329.708);
  --modal-text: oklch(72.354% .092 79.129);
  --modal-muted: color-mix(in srgb, oklch(72.354% .092 79.129) 65%, transparent);
  --modal-toolbar-bg: oklch(16% .019 329.708);
  --modal-footer-bg: oklch(21% .021 329.708);
}

/* Theme: corporate */
[data-theme="corporate"] {
  color-scheme: light;
  --header-bg: oklch(93% 0 0);
  --header-border: oklch(86% 0 0);
  --header-text: oklch(22.389% .031 278.072);
  --header-muted: color-mix(in srgb, oklch(22.389% .031 278.072) 65%, transparent);
  --header-btn-bg: oklch(100% 0 0);
  --header-btn-hover: oklch(86% 0 0);
  --header-btn-border: oklch(86% 0 0);
  --header-btn-text: oklch(22.389% .031 278.072);
  --theme-accent: oklch(58% .158 241.966);
  --modal-bg: oklch(100% 0 0);
  --modal-header-bg: oklch(93% 0 0);
  --modal-border: oklch(86% 0 0);
  --modal-text: oklch(22.389% .031 278.072);
  --modal-muted: color-mix(in srgb, oklch(22.389% .031 278.072) 65%, transparent);
  --modal-toolbar-bg: oklch(86% 0 0);
  --modal-footer-bg: oklch(93% 0 0);
}

/* Theme: cupcake */
[data-theme="cupcake"] {
  color-scheme: light;
  --header-bg: oklch(93.982% .007 61.449);
  --header-border: oklch(91.586% .006 53.44);
  --header-text: oklch(23.574% .066 313.189);
  --header-muted: color-mix(in srgb, oklch(23.574% .066 313.189) 65%, transparent);
  --header-btn-bg: oklch(97.788% .004 56.375);
  --header-btn-hover: oklch(91.586% .006 53.44);
  --header-btn-border: oklch(91.586% .006 53.44);
  --header-btn-text: oklch(23.574% .066 313.189);
  --theme-accent: oklch(85% .138 181.071);
  --modal-bg: oklch(97.788% .004 56.375);
  --modal-header-bg: oklch(93.982% .007 61.449);
  --modal-border: oklch(91.586% .006 53.44);
  --modal-text: oklch(23.574% .066 313.189);
  --modal-muted: color-mix(in srgb, oklch(23.574% .066 313.189) 65%, transparent);
  --modal-toolbar-bg: oklch(91.586% .006 53.44);
  --modal-footer-bg: oklch(93.982% .007 61.449);
}

/* Theme: cyberpunk */
[data-theme="cyberpunk"] {
  color-scheme: light;
  --header-bg: oklch(91.51% .179 104.32);
  --header-border: oklch(85.51% .179 104.32);
  --header-text: oklch(0% 0 0);
  --header-muted: color-mix(in srgb, oklch(0% 0 0) 65%, transparent);
  --header-btn-bg: oklch(94.51% .179 104.32);
  --header-btn-hover: oklch(85.51% .179 104.32);
  --header-btn-border: oklch(85.51% .179 104.32);
  --header-btn-text: oklch(0% 0 0);
  --theme-accent: oklch(74.22% .209 6.35);
  --modal-bg: oklch(94.51% .179 104.32);
  --modal-header-bg: oklch(91.51% .179 104.32);
  --modal-border: oklch(85.51% .179 104.32);
  --modal-text: oklch(0% 0 0);
  --modal-muted: color-mix(in srgb, oklch(0% 0 0) 65%, transparent);
  --modal-toolbar-bg: oklch(85.51% .179 104.32);
  --modal-footer-bg: oklch(91.51% .179 104.32);
}

/* Theme: dark */
[data-theme="dark"] {
  color-scheme: dark;
  --header-bg: #000;
  --header-border: #424245;
  --header-text: #f5f5f7;
  --header-muted: color-mix(in srgb, #f5f5f7 65%, transparent);
  --header-btn-bg: #1d1d1f;
  --header-btn-hover: #424245;
  --header-btn-border: #424245;
  --header-btn-text: #f5f5f7;
  --theme-accent: #8583e9;
  --modal-bg: #1d1d1f;
  --modal-header-bg: #000;
  --modal-border: #424245;
  --modal-text: #f5f5f7;
  --modal-muted: color-mix(in srgb, #f5f5f7 65%, transparent);
  --modal-toolbar-bg: #424245;
  --modal-footer-bg: #000;
}

/* Theme: dark-daisyui5 */
[data-theme="dark-daisyui5"] {
  color-scheme: dark;
  --header-bg: oklch(23.26% .014 253.1);
  --header-border: oklch(21.15% .012 254.09);
  --header-text: oklch(97.807% .029 256.847);
  --header-muted: color-mix(in srgb, oklch(97.807% .029 256.847) 65%, transparent);
  --header-btn-bg: oklch(25.33% .016 252.42);
  --header-btn-hover: oklch(21.15% .012 254.09);
  --header-btn-border: oklch(21.15% .012 254.09);
  --header-btn-text: oklch(97.807% .029 256.847);
  --theme-accent: oklch(58% .233 277.117);
  --modal-bg: oklch(25.33% .016 252.42);
  --modal-header-bg: oklch(23.26% .014 253.1);
  --modal-border: oklch(21.15% .012 254.09);
  --modal-text: oklch(97.807% .029 256.847);
  --modal-muted: color-mix(in srgb, oklch(97.807% .029 256.847) 65%, transparent);
  --modal-toolbar-bg: oklch(21.15% .012 254.09);
  --modal-footer-bg: oklch(23.26% .014 253.1);
}

/* Theme: dark-monet */
[data-theme="dark-monet"] {
  color-scheme: dark;
  --header-bg: #191e24;
  --header-border: #15191e;
  --header-text: #a6adbb;
  --header-muted: color-mix(in srgb, #a6adbb 65%, transparent);
  --header-btn-bg: #1d232a;
  --header-btn-hover: #15191e;
  --header-btn-border: #15191e;
  --header-btn-text: #a6adbb;
  --theme-accent: var(--primary,oklch(65.69% .196 275.75));
  --modal-bg: #1d232a;
  --modal-header-bg: #191e24;
  --modal-border: #15191e;
  --modal-text: #a6adbb;
  --modal-muted: color-mix(in srgb, #a6adbb 65%, transparent);
  --modal-toolbar-bg: #15191e;
  --modal-footer-bg: #191e24;
}

/* Theme: dark-neutral */
[data-theme="dark-neutral"] {
  color-scheme: dark;
  --header-bg: #1a1a1a;
  --header-border: #404040;
  --header-text: #e5e5e5;
  --header-muted: color-mix(in srgb, #e5e5e5 65%, transparent);
  --header-btn-bg: #262626;
  --header-btn-hover: #404040;
  --header-btn-border: #404040;
  --header-btn-text: #e5e5e5;
  --theme-accent: #6c6c70;
  --modal-bg: #262626;
  --modal-header-bg: #1a1a1a;
  --modal-border: #404040;
  --modal-text: #e5e5e5;
  --modal-muted: color-mix(in srgb, #e5e5e5 65%, transparent);
  --modal-toolbar-bg: #404040;
  --modal-footer-bg: #1a1a1a;
}

/* Theme: dim */
[data-theme="dim"] {
  color-scheme: dark;
  --header-bg: oklch(28.036% .019 264.182);
  --header-border: oklch(26.346% .018 262.177);
  --header-text: oklch(82.901% .031 222.959);
  --header-muted: color-mix(in srgb, oklch(82.901% .031 222.959) 65%, transparent);
  --header-btn-bg: oklch(30.857% .023 264.149);
  --header-btn-hover: oklch(26.346% .018 262.177);
  --header-btn-border: oklch(26.346% .018 262.177);
  --header-btn-text: oklch(82.901% .031 222.959);
  --theme-accent: oklch(86.133% .141 139.549);
  --modal-bg: oklch(30.857% .023 264.149);
  --modal-header-bg: oklch(28.036% .019 264.182);
  --modal-border: oklch(26.346% .018 262.177);
  --modal-text: oklch(82.901% .031 222.959);
  --modal-muted: color-mix(in srgb, oklch(82.901% .031 222.959) 65%, transparent);
  --modal-toolbar-bg: oklch(26.346% .018 262.177);
  --modal-footer-bg: oklch(28.036% .019 264.182);
}

/* Theme: dracula */
[data-theme="dracula"] {
  color-scheme: dark;
  --header-bg: oklch(26.805% .02 277.508);
  --header-border: oklch(24.787% .019 277.508);
  --header-text: oklch(97.747% .007 106.545);
  --header-muted: color-mix(in srgb, oklch(97.747% .007 106.545) 65%, transparent);
  --header-btn-bg: oklch(28.822% .022 277.508);
  --header-btn-hover: oklch(24.787% .019 277.508);
  --header-btn-border: oklch(24.787% .019 277.508);
  --header-btn-text: oklch(97.747% .007 106.545);
  --theme-accent: oklch(75.461% .183 346.812);
  --modal-bg: oklch(28.822% .022 277.508);
  --modal-header-bg: oklch(26.805% .02 277.508);
  --modal-border: oklch(24.787% .019 277.508);
  --modal-text: oklch(97.747% .007 106.545);
  --modal-muted: color-mix(in srgb, oklch(97.747% .007 106.545) 65%, transparent);
  --modal-toolbar-bg: oklch(24.787% .019 277.508);
  --modal-footer-bg: oklch(26.805% .02 277.508);
}

/* Theme: emerald */
[data-theme="emerald"] {
  color-scheme: light;
  --header-bg: oklch(93% 0 0);
  --header-border: oklch(86% 0 0);
  --header-text: oklch(35.519% .032 262.988);
  --header-muted: color-mix(in srgb, oklch(35.519% .032 262.988) 65%, transparent);
  --header-btn-bg: oklch(100% 0 0);
  --header-btn-hover: oklch(86% 0 0);
  --header-btn-border: oklch(86% 0 0);
  --header-btn-text: oklch(35.519% .032 262.988);
  --theme-accent: oklch(76.662% .135 153.45);
  --modal-bg: oklch(100% 0 0);
  --modal-header-bg: oklch(93% 0 0);
  --modal-border: oklch(86% 0 0);
  --modal-text: oklch(35.519% .032 262.988);
  --modal-muted: color-mix(in srgb, oklch(35.519% .032 262.988) 65%, transparent);
  --modal-toolbar-bg: oklch(86% 0 0);
  --modal-footer-bg: oklch(93% 0 0);
}

/* Theme: fantasy */
[data-theme="fantasy"] {
  color-scheme: light;
  --header-bg: oklch(93% 0 0);
  --header-border: oklch(86% 0 0);
  --header-text: oklch(27.807% .029 256.847);
  --header-muted: color-mix(in srgb, oklch(27.807% .029 256.847) 65%, transparent);
  --header-btn-bg: oklch(100% 0 0);
  --header-btn-hover: oklch(86% 0 0);
  --header-btn-border: oklch(86% 0 0);
  --header-btn-text: oklch(27.807% .029 256.847);
  --theme-accent: oklch(37.45% .189 325.02);
  --modal-bg: oklch(100% 0 0);
  --modal-header-bg: oklch(93% 0 0);
  --modal-border: oklch(86% 0 0);
  --modal-text: oklch(27.807% .029 256.847);
  --modal-muted: color-mix(in srgb, oklch(27.807% .029 256.847) 65%, transparent);
  --modal-toolbar-bg: oklch(86% 0 0);
  --modal-footer-bg: oklch(93% 0 0);
}

/* Theme: forest */
[data-theme="forest"] {
  color-scheme: dark;
  --header-bg: oklch(18.522% .007 17.911);
  --header-border: oklch(16.203% .007 17.911);
  --header-text: oklch(83.768% .001 17.911);
  --header-muted: color-mix(in srgb, oklch(83.768% .001 17.911) 65%, transparent);
  --header-btn-bg: oklch(20.84% .008 17.911);
  --header-btn-hover: oklch(16.203% .007 17.911);
  --header-btn-border: oklch(16.203% .007 17.911);
  --header-btn-text: oklch(83.768% .001 17.911);
  --theme-accent: oklch(68.628% .185 148.958);
  --modal-bg: oklch(20.84% .008 17.911);
  --modal-header-bg: oklch(18.522% .007 17.911);
  --modal-border: oklch(16.203% .007 17.911);
  --modal-text: oklch(83.768% .001 17.911);
  --modal-muted: color-mix(in srgb, oklch(83.768% .001 17.911) 65%, transparent);
  --modal-toolbar-bg: oklch(16.203% .007 17.911);
  --modal-footer-bg: oklch(18.522% .007 17.911);
}

/* Theme: garden */
[data-theme="garden"] {
  color-scheme: light;
  --header-bg: oklch(86.445% .002 17.197);
  --header-border: oklch(79.938% .001 17.197);
  --header-text: oklch(16.961% .001 17.32);
  --header-muted: color-mix(in srgb, oklch(16.961% .001 17.32) 65%, transparent);
  --header-btn-bg: oklch(92.951% .002 17.197);
  --header-btn-hover: oklch(79.938% .001 17.197);
  --header-btn-border: oklch(79.938% .001 17.197);
  --header-btn-text: oklch(16.961% .001 17.32);
  --theme-accent: oklch(62.45% .278 3.836);
  --modal-bg: oklch(92.951% .002 17.197);
  --modal-header-bg: oklch(86.445% .002 17.197);
  --modal-border: oklch(79.938% .001 17.197);
  --modal-text: oklch(16.961% .001 17.32);
  --modal-muted: color-mix(in srgb, oklch(16.961% .001 17.32) 65%, transparent);
  --modal-toolbar-bg: oklch(79.938% .001 17.197);
  --modal-footer-bg: oklch(86.445% .002 17.197);
}

/* Theme: halloween */
[data-theme="halloween"] {
  color-scheme: dark;
  --header-bg: oklch(14% .004 49.25);
  --header-border: oklch(0% 0 0);
  --header-text: oklch(84.955% 0 0);
  --header-muted: color-mix(in srgb, oklch(84.955% 0 0) 65%, transparent);
  --header-btn-bg: oklch(21% .006 56.043);
  --header-btn-hover: oklch(0% 0 0);
  --header-btn-border: oklch(0% 0 0);
  --header-btn-text: oklch(84.955% 0 0);
  --theme-accent: oklch(77.48% .204 60.62);
  --modal-bg: oklch(21% .006 56.043);
  --modal-header-bg: oklch(14% .004 49.25);
  --modal-border: oklch(0% 0 0);
  --modal-text: oklch(84.955% 0 0);
  --modal-muted: color-mix(in srgb, oklch(84.955% 0 0) 65%, transparent);
  --modal-toolbar-bg: oklch(0% 0 0);
  --modal-footer-bg: oklch(14% .004 49.25);
}

/* Theme: lemonade */
[data-theme="lemonade"] {
  color-scheme: light;
  --header-bg: oklch(91.8% .018 123.72);
  --header-border: oklch(84.89% .017 123.72);
  --header-text: oklch(19.742% .004 123.72);
  --header-muted: color-mix(in srgb, oklch(19.742% .004 123.72) 65%, transparent);
  --header-btn-bg: oklch(98.71% .02 123.72);
  --header-btn-hover: oklch(84.89% .017 123.72);
  --header-btn-border: oklch(84.89% .017 123.72);
  --header-btn-text: oklch(19.742% .004 123.72);
  --theme-accent: oklch(58.92% .199 134.6);
  --modal-bg: oklch(98.71% .02 123.72);
  --modal-header-bg: oklch(91.8% .018 123.72);
  --modal-border: oklch(84.89% .017 123.72);
  --modal-text: oklch(19.742% .004 123.72);
  --modal-muted: color-mix(in srgb, oklch(19.742% .004 123.72) 65%, transparent);
  --modal-toolbar-bg: oklch(84.89% .017 123.72);
  --modal-footer-bg: oklch(91.8% .018 123.72);
}

/* Theme: light */
[data-theme="light"] {
  color-scheme: light;
  --header-bg: #f5f5f7;
  --header-border: #d2d2d7;
  --header-text: #1d1d1f;
  --header-muted: color-mix(in srgb, #1d1d1f 65%, transparent);
  --header-btn-bg: #fff;
  --header-btn-hover: #d2d2d7;
  --header-btn-border: #d2d2d7;
  --header-btn-text: #1d1d1f;
  --theme-accent: #6865c6;
  --modal-bg: #fff;
  --modal-header-bg: #f5f5f7;
  --modal-border: #d2d2d7;
  --modal-text: #1d1d1f;
  --modal-muted: color-mix(in srgb, #1d1d1f 65%, transparent);
  --modal-toolbar-bg: #d2d2d7;
  --modal-footer-bg: #f5f5f7;
}

/* Theme: light-monet */
[data-theme="light-monet"] {
  color-scheme: normal;
  --header-bg: #f2f2f2;
  --header-border: #e5e6e6;
  --header-text: #1f2937;
  --header-muted: color-mix(in srgb, #1f2937 65%, transparent);
  --header-btn-bg: oklch(100% 0 0);
  --header-btn-hover: #e5e6e6;
  --header-btn-border: #e5e6e6;
  --header-btn-text: #1f2937;
  --theme-accent: var(--primary,oklch(49.12% .3096 275.75));
  --modal-bg: oklch(100% 0 0);
  --modal-header-bg: #f2f2f2;
  --modal-border: #e5e6e6;
  --modal-text: #1f2937;
  --modal-muted: color-mix(in srgb, #1f2937 65%, transparent);
  --modal-toolbar-bg: #e5e6e6;
  --modal-footer-bg: #f2f2f2;
}

/* Theme: light-neutral */
[data-theme="light-neutral"] {
  color-scheme: normal;
  --header-bg: #f4f2f1;
  --header-border: #d9d5cd;
  --header-text: #2b2926;
  --header-muted: color-mix(in srgb, #2b2926 65%, transparent);
  --header-btn-bg: #fdfcfa;
  --header-btn-hover: #d9d5cd;
  --header-btn-border: #d9d5cd;
  --header-btn-text: #2b2926;
  --theme-accent: #44403c;
  --modal-bg: #fdfcfa;
  --modal-header-bg: #f4f2f1;
  --modal-border: #d9d5cd;
  --modal-text: #2b2926;
  --modal-muted: color-mix(in srgb, #2b2926 65%, transparent);
  --modal-toolbar-bg: #d9d5cd;
  --modal-footer-bg: #f4f2f1;
}

/* Theme: lofi */
[data-theme="lofi"] {
  color-scheme: light;
  --header-bg: oklch(97% 0 0);
  --header-border: oklch(94% 0 0);
  --header-text: oklch(0% 0 0);
  --header-muted: color-mix(in srgb, oklch(0% 0 0) 65%, transparent);
  --header-btn-bg: oklch(100% 0 0);
  --header-btn-hover: oklch(94% 0 0);
  --header-btn-border: oklch(94% 0 0);
  --header-btn-text: oklch(0% 0 0);
  --theme-accent: oklch(15.906% 0 0);
  --modal-bg: oklch(100% 0 0);
  --modal-header-bg: oklch(97% 0 0);
  --modal-border: oklch(94% 0 0);
  --modal-text: oklch(0% 0 0);
  --modal-muted: color-mix(in srgb, oklch(0% 0 0) 65%, transparent);
  --modal-toolbar-bg: oklch(94% 0 0);
  --modal-footer-bg: oklch(97% 0 0);
}

/* Theme: luxury */
[data-theme="luxury"] {
  color-scheme: dark;
  --header-bg: oklch(20.219% .004 308.229);
  --header-border: oklch(23.219% .004 308.229);
  --header-text: oklch(75.687% .123 76.89);
  --header-muted: color-mix(in srgb, oklch(75.687% .123 76.89) 65%, transparent);
  --header-btn-bg: oklch(14.076% .004 285.822);
  --header-btn-hover: oklch(23.219% .004 308.229);
  --header-btn-border: oklch(23.219% .004 308.229);
  --header-btn-text: oklch(75.687% .123 76.89);
  --theme-accent: oklch(100% 0 0);
  --modal-bg: oklch(14.076% .004 285.822);
  --modal-header-bg: oklch(20.219% .004 308.229);
  --modal-border: oklch(23.219% .004 308.229);
  --modal-text: oklch(75.687% .123 76.89);
  --modal-muted: color-mix(in srgb, oklch(75.687% .123 76.89) 65%, transparent);
  --modal-toolbar-bg: oklch(23.219% .004 308.229);
  --modal-footer-bg: oklch(20.219% .004 308.229);
}

/* Theme: night */
[data-theme="night"] {
  color-scheme: dark;
  --header-bg: oklch(19.314% .037 265.754);
  --header-border: oklch(17.86% .034 265.754);
  --header-text: oklch(84.153% .007 265.754);
  --header-muted: color-mix(in srgb, oklch(84.153% .007 265.754) 65%, transparent);
  --header-btn-bg: oklch(20.768% .039 265.754);
  --header-btn-hover: oklch(17.86% .034 265.754);
  --header-btn-border: oklch(17.86% .034 265.754);
  --header-btn-text: oklch(84.153% .007 265.754);
  --theme-accent: oklch(75.351% .138 232.661);
  --modal-bg: oklch(20.768% .039 265.754);
  --modal-header-bg: oklch(19.314% .037 265.754);
  --modal-border: oklch(17.86% .034 265.754);
  --modal-text: oklch(84.153% .007 265.754);
  --modal-muted: color-mix(in srgb, oklch(84.153% .007 265.754) 65%, transparent);
  --modal-toolbar-bg: oklch(17.86% .034 265.754);
  --modal-footer-bg: oklch(19.314% .037 265.754);
}

/* Theme: nord */
[data-theme="nord"] {
  color-scheme: light;
  --header-bg: oklch(93.299% .01 261.788);
  --header-border: oklch(89.925% .016 262.749);
  --header-text: oklch(32.437% .022 264.182);
  --header-muted: color-mix(in srgb, oklch(32.437% .022 264.182) 65%, transparent);
  --header-btn-bg: oklch(95.127% .007 260.731);
  --header-btn-hover: oklch(89.925% .016 262.749);
  --header-btn-border: oklch(89.925% .016 262.749);
  --header-btn-text: oklch(32.437% .022 264.182);
  --theme-accent: oklch(59.435% .077 254.027);
  --modal-bg: oklch(95.127% .007 260.731);
  --modal-header-bg: oklch(93.299% .01 261.788);
  --modal-border: oklch(89.925% .016 262.749);
  --modal-text: oklch(32.437% .022 264.182);
  --modal-muted: color-mix(in srgb, oklch(32.437% .022 264.182) 65%, transparent);
  --modal-toolbar-bg: oklch(89.925% .016 262.749);
  --modal-footer-bg: oklch(93.299% .01 261.788);
}

/* Theme: pastel */
[data-theme="pastel"] {
  color-scheme: light;
  --header-bg: oklch(98.462% .001 247.838);
  --header-border: oklch(92.462% .001 247.838);
  --header-text: oklch(20% 0 0);
  --header-muted: color-mix(in srgb, oklch(20% 0 0) 65%, transparent);
  --header-btn-bg: oklch(100% 0 0);
  --header-btn-hover: oklch(92.462% .001 247.838);
  --header-btn-border: oklch(92.462% .001 247.838);
  --header-btn-text: oklch(20% 0 0);
  --theme-accent: oklch(90% .063 306.703);
  --modal-bg: oklch(100% 0 0);
  --modal-header-bg: oklch(98.462% .001 247.838);
  --modal-border: oklch(92.462% .001 247.838);
  --modal-text: oklch(20% 0 0);
  --modal-muted: color-mix(in srgb, oklch(20% 0 0) 65%, transparent);
  --modal-toolbar-bg: oklch(92.462% .001 247.838);
  --modal-footer-bg: oklch(98.462% .001 247.838);
}

/* Theme: retro */
[data-theme="retro"] {
  color-scheme: light;
  --header-bg: oklch(88.272% .049 91.774);
  --header-border: oklch(84.133% .065 90.856);
  --header-text: oklch(41% .112 45.904);
  --header-muted: color-mix(in srgb, oklch(41% .112 45.904) 65%, transparent);
  --header-btn-bg: oklch(91.637% .034 90.515);
  --header-btn-hover: oklch(84.133% .065 90.856);
  --header-btn-border: oklch(84.133% .065 90.856);
  --header-btn-text: oklch(41% .112 45.904);
  --theme-accent: oklch(80% .114 19.571);
  --modal-bg: oklch(91.637% .034 90.515);
  --modal-header-bg: oklch(88.272% .049 91.774);
  --modal-border: oklch(84.133% .065 90.856);
  --modal-text: oklch(41% .112 45.904);
  --modal-muted: color-mix(in srgb, oklch(41% .112 45.904) 65%, transparent);
  --modal-toolbar-bg: oklch(84.133% .065 90.856);
  --modal-footer-bg: oklch(88.272% .049 91.774);
}

/* Theme: silk */
[data-theme="silk"] {
  color-scheme: light;
  --header-bg: oklch(95% .0081 61.42);
  --header-border: oklch(90% .0081 61.42);
  --header-text: oklch(40% .0081 61.42);
  --header-muted: color-mix(in srgb, oklch(40% .0081 61.42) 65%, transparent);
  --header-btn-bg: oklch(97% .0035 67.78);
  --header-btn-hover: oklch(90% .0081 61.42);
  --header-btn-border: oklch(90% .0081 61.42);
  --header-btn-text: oklch(40% .0081 61.42);
  --theme-accent: oklch(23.27% .0249 284.3);
  --modal-bg: oklch(97% .0035 67.78);
  --modal-header-bg: oklch(95% .0081 61.42);
  --modal-border: oklch(90% .0081 61.42);
  --modal-text: oklch(40% .0081 61.42);
  --modal-muted: color-mix(in srgb, oklch(40% .0081 61.42) 65%, transparent);
  --modal-toolbar-bg: oklch(90% .0081 61.42);
  --modal-footer-bg: oklch(95% .0081 61.42);
}

/* Theme: sunset */
[data-theme="sunset"] {
  color-scheme: dark;
  --header-bg: oklch(20% .019 237.69);
  --header-border: oklch(18% .019 237.69);
  --header-text: oklch(77.383% .043 245.096);
  --header-muted: color-mix(in srgb, oklch(77.383% .043 245.096) 65%, transparent);
  --header-btn-bg: oklch(22% .019 237.69);
  --header-btn-hover: oklch(18% .019 237.69);
  --header-btn-border: oklch(18% .019 237.69);
  --header-btn-text: oklch(77.383% .043 245.096);
  --theme-accent: oklch(74.703% .158 39.947);
  --modal-bg: oklch(22% .019 237.69);
  --modal-header-bg: oklch(20% .019 237.69);
  --modal-border: oklch(18% .019 237.69);
  --modal-text: oklch(77.383% .043 245.096);
  --modal-muted: color-mix(in srgb, oklch(77.383% .043 245.096) 65%, transparent);
  --modal-toolbar-bg: oklch(18% .019 237.69);
  --modal-footer-bg: oklch(20% .019 237.69);
}

/* Theme: synthwave */
[data-theme="synthwave"] {
  color-scheme: dark;
  --header-bg: oklch(20% .09 281.288);
  --header-border: oklch(25% .09 281.288);
  --header-text: oklch(78% .115 274.713);
  --header-muted: color-mix(in srgb, oklch(78% .115 274.713) 65%, transparent);
  --header-btn-bg: oklch(15% .09 281.288);
  --header-btn-hover: oklch(25% .09 281.288);
  --header-btn-border: oklch(25% .09 281.288);
  --header-btn-text: oklch(78% .115 274.713);
  --theme-accent: oklch(71% .202 349.761);
  --modal-bg: oklch(15% .09 281.288);
  --modal-header-bg: oklch(20% .09 281.288);
  --modal-border: oklch(25% .09 281.288);
  --modal-text: oklch(78% .115 274.713);
  --modal-muted: color-mix(in srgb, oklch(78% .115 274.713) 65%, transparent);
  --modal-toolbar-bg: oklch(25% .09 281.288);
  --modal-footer-bg: oklch(20% .09 281.288);
}

/* Theme: valentine */
[data-theme="valentine"] {
  color-scheme: light;
  --header-bg: oklch(94% .028 342.258);
  --header-border: oklch(89% .061 343.231);
  --header-text: oklch(52% .223 3.958);
  --header-muted: color-mix(in srgb, oklch(52% .223 3.958) 65%, transparent);
  --header-btn-bg: oklch(97% .014 343.198);
  --header-btn-hover: oklch(89% .061 343.231);
  --header-btn-border: oklch(89% .061 343.231);
  --header-btn-text: oklch(52% .223 3.958);
  --theme-accent: oklch(65% .241 354.308);
  --modal-bg: oklch(97% .014 343.198);
  --modal-header-bg: oklch(94% .028 342.258);
  --modal-border: oklch(89% .061 343.231);
  --modal-text: oklch(52% .223 3.958);
  --modal-muted: color-mix(in srgb, oklch(52% .223 3.958) 65%, transparent);
  --modal-toolbar-bg: oklch(89% .061 343.231);
  --modal-footer-bg: oklch(94% .028 342.258);
}

/* Theme: winter */
[data-theme="winter"] {
  color-scheme: light;
  --header-bg: oklch(97.466% .011 259.822);
  --header-border: oklch(93.268% .016 262.751);
  --header-text: oklch(41.886% .053 255.824);
  --header-muted: color-mix(in srgb, oklch(41.886% .053 255.824) 65%, transparent);
  --header-btn-bg: oklch(100% 0 0);
  --header-btn-hover: oklch(93.268% .016 262.751);
  --header-btn-border: oklch(93.268% .016 262.751);
  --header-btn-text: oklch(41.886% .053 255.824);
  --theme-accent: oklch(56.86% .255 257.57);
  --modal-bg: oklch(100% 0 0);
  --modal-header-bg: oklch(97.466% .011 259.822);
  --modal-border: oklch(93.268% .016 262.751);
  --modal-text: oklch(41.886% .053 255.824);
  --modal-muted: color-mix(in srgb, oklch(41.886% .053 255.824) 65%, transparent);
  --modal-toolbar-bg: oklch(93.268% .016 262.751);
  --modal-footer-bg: oklch(97.466% .011 259.822);
}

/* Theme: wireframe */
[data-theme="wireframe"] {
  color-scheme: light;
  --header-bg: oklch(97% 0 0);
  --header-border: oklch(94% 0 0);
  --header-text: oklch(20% 0 0);
  --header-muted: color-mix(in srgb, oklch(20% 0 0) 65%, transparent);
  --header-btn-bg: oklch(100% 0 0);
  --header-btn-hover: oklch(94% 0 0);
  --header-btn-border: oklch(94% 0 0);
  --header-btn-text: oklch(20% 0 0);
  --theme-accent: oklch(87% 0 0);
  --modal-bg: oklch(100% 0 0);
  --modal-header-bg: oklch(97% 0 0);
  --modal-border: oklch(94% 0 0);
  --modal-text: oklch(20% 0 0);
  --modal-muted: color-mix(in srgb, oklch(20% 0 0) 65%, transparent);
  --modal-toolbar-bg: oklch(94% 0 0);
  --modal-footer-bg: oklch(97% 0 0);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-width: 320px;
  background:
    radial-gradient(circle at 7% 8%, rgba(255, 255, 255, 0.9), transparent 28rem),
    linear-gradient(135deg, #edf2ef 0%, #e4ebe8 100%);
  transition: background-color 220ms ease, color 220ms ease;
}
button, input, textarea { font: inherit; }
button { color: inherit; }

.is-hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login-view {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(520px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0;
}

/* Brand Mark (Original 3-bar equalizer pattern) */
.brand-mark {
  display: inline-grid;
  grid-template-columns: repeat(3, 9px);
  align-items: end;
  justify-content: center;
  gap: 5px;
  height: 30px;
  margin: 0 auto 20px;
}
.brand-mark span,
.brand-mark i {
  display: block;
  width: 9px;
  background: var(--ink);
  border-radius: 9px;
  transition: background 200ms ease;
}
.brand-mark span:nth-child(1),
.brand-mark i:nth-child(1) { height: 16px; }
.brand-mark span:nth-child(2),
.brand-mark i:nth-child(2) { height: 30px; background: var(--theme-accent, var(--accent)); }
.brand-mark span:nth-child(3),
.brand-mark i:nth-child(3) { height: 22px; }

.dashboard-header .brand-mark.small {
  display: inline-grid;
  grid-template-columns: repeat(3, 5px);
  align-items: end;
  gap: 3px;
  height: 19px;
  margin: 0;
}
.dashboard-header .brand-mark.small i,
.dashboard-header .brand-mark.small span {
  display: block;
  width: 5px;
  border-radius: 5px;
  background-color: var(--header-text) !important;
  transition: background-color 200ms ease;
}
.dashboard-header .brand-mark.small i:nth-child(1),
.dashboard-header .brand-mark.small span:nth-child(1) { height: 11px; }
.dashboard-header .brand-mark.small i:nth-child(2),
.dashboard-header .brand-mark.small span:nth-child(2) {
  height: 19px;
  background-color: var(--theme-accent) !important;
}
.dashboard-header .brand-mark.small i:nth-child(3),
.dashboard-header .brand-mark.small span:nth-child(3) { height: 14px; }

.login-card {
  width: 100%;
  max-width: 480px;
  padding: clamp(28px, 4vw, 46px);
  background: rgba(248, 250, 248, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(31, 52, 44, 0.13), inset 0 0 0 1px rgba(22, 35, 31, 0.04);
  backdrop-filter: blur(18px);
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.card-heading { margin-bottom: 26px; text-align: center; }
.card-heading h1 { margin: 0; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; letter-spacing: -0.025em; }

.login-form { display: grid; gap: 10px; }
.field-with-icon { position: relative; }
.field-with-icon > span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #83908b; font-size: 1.1rem; pointer-events: none; }
.field-with-icon input {
  width: 100%;
  height: 52px;
  padding: 0 46px 0 43px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.field-with-icon input:focus { border-color: var(--green); background: white; box-shadow: 0 0 0 4px rgba(30, 115, 88, 0.1); }
.field-with-icon input::placeholder { color: #9da7a3; }

.primary-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 53px;
  margin-top: 10px;
  padding: 0 19px 0 21px;
  color: white;
  background: var(--ink);
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}
.primary-button:hover { background: #243a33; transform: translateY(-1px); }
.primary-button:disabled { cursor: wait; opacity: 0.7; transform: none; }
.primary-button b { font-size: 1.2rem; font-weight: 400; }
.form-message { min-height: 20px; margin-top: 12px; font-size: 0.78rem; }
.form-message[data-state="error"] { color: #ae3f2b; }
.form-message[data-state="pending"] { color: var(--green); }

/* Dashboard Header - Full Reactive Theming */
.dashboard-view { height: 100vh; background: var(--header-bg); }
.dashboard-header {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: var(--header-text) !important;
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border) !important;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  box-sizing: border-box;
}
.compact-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--header-text) !important;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 200ms ease, opacity 150ms ease;
}
.compact-brand:hover {
  opacity: 0.85;
}
.compact-brand b {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--header-text) !important;
  transition: color 200ms ease;
}
.account-area {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--header-muted) !important;
  font-size: 0.78rem;
  transition: color 200ms ease;
}
.account-area #active-user {
  color: var(--header-muted) !important;
  font-weight: 500;
  transition: color 200ms ease;
}
.account-area button,
#logout-button {
  padding: 6px 12px;
  border: 1px solid var(--header-btn-border) !important;
  border-radius: 8px;
  background-color: var(--header-btn-bg) !important;
  color: var(--header-btn-text) !important;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
}
.account-area button:hover,
#logout-button:hover {
  background-color: var(--header-btn-hover) !important;
  border-color: var(--theme-accent) !important;
  transform: translateY(-1px);
}

/* Custom Rules Modal - Theme Aware */
.rules-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  z-index: 1001;
  width: min(640px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: modalPop 180ms cubic-bezier(0.16, 1, 0.3, 1);
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 24px 16px;
  background: var(--modal-header-bg);
  border-bottom: 1px solid var(--modal-border);
  transition: background-color 220ms ease, border-color 220ms ease;
}
.modal-title-wrap h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--modal-text);
  transition: color 220ms ease;
}
.modal-subtitle {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--modal-muted);
  transition: color 220ms ease;
}
.close-button {
  background: transparent !important;
  border: 0 !important;
  font-size: 1.1rem;
  color: var(--modal-muted);
  cursor: pointer;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: color 150ms ease, background 150ms ease;
}
.close-button:hover {
  color: var(--modal-text);
  background: var(--header-btn-hover) !important;
}

.modal-card-editor {
  max-width: 720px;
  width: 95%;
  height: 600px;
  display: flex;
  flex-direction: column;
}
.editor-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 16px 24px 8px;
  background: var(--modal-bg);
}
.editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.72rem;
  color: var(--modal-muted);
}
.editor-lang-badge {
  background: var(--header-btn-hover);
  color: var(--theme-accent);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  border: 1px solid var(--modal-border);
}
.editor-groups-hint {
  font-size: 0.7rem;
}
.editor-groups-hint code {
  background: var(--header-btn-hover);
  color: var(--modal-text);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.7rem;
  margin: 0 1px;
  border: 1px solid var(--modal-border);
}
.rules-code-editor {
  flex: 1;
  width: 100%;
  resize: none;
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, Monaco, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 14px 16px;
  border: 1px solid var(--editor-border);
  border-radius: 10px;
  background: var(--editor-bg);
  color: var(--editor-text);
  outline: none;
  white-space: pre;
  tab-size: 2;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.rules-code-editor:focus {
  border-color: var(--theme-accent);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2), 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: var(--modal-footer-bg);
  border-top: 1px solid var(--modal-border);
  transition: background-color 220ms ease, border-color 220ms ease;
}
.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-note {
  font-size: 0.72rem;
  color: var(--modal-muted);
}
.footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.secondary-button {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--header-btn-border);
  border-radius: 9px;
  background: var(--header-btn-bg);
  color: var(--modal-text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
}
.secondary-button:hover {
  background: var(--header-btn-hover);
  border-color: var(--theme-accent);
}
.apply-btn {
  height: 36px !important;
  margin-top: 0 !important;
  padding: 0 20px !important;
  font-size: 0.82rem !important;
  border-radius: 9px !important;
}

.form-message[data-state="error"] {
  display: block;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 24px 10px;
  font-family: monospace;
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
}
.form-message[data-state="success"] {
  display: block;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 24px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}
.form-message[data-state="pending"] {
  display: block;
  background: rgba(148, 163, 184, 0.12);
  color: var(--modal-text);
  border: 1px solid var(--modal-border);
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 24px 10px;
  font-size: 0.78rem;
}
.status-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

#zashboard-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 54px);
  border: 0;
  background: var(--header-bg);
}

/* Dark Scheme Support for Login Page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="cupcake"]):not([data-theme="bumblebee"]):not([data-theme="emerald"]):not([data-theme="corporate"]):not([data-theme="retro"]):not([data-theme="cyberpunk"]):not([data-theme="valentine"]):not([data-theme="garden"]):not([data-theme="lofi"]):not([data-theme="pastel"]):not([data-theme="fantasy"]):not([data-theme="wireframe"]):not([data-theme="autumn"]):not([data-theme="acid"]):not([data-theme="lemonade"]):not([data-theme="winter"]):not([data-theme="caramellatte"]) body {
    background:
      radial-gradient(circle at 12% 10%, rgba(30, 41, 59, 0.6), transparent 30rem),
      linear-gradient(135deg, #0b0f17 0%, #111827 100%);
    color: #f3f4f6;
  }
  :root:not([data-theme="light"]) .login-card {
    background: rgba(24, 28, 38, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  :root:not([data-theme="light"]) .brand-mark span,
  :root:not([data-theme="light"]) .brand-mark i {
    background: #f3f4f6;
  }
  :root:not([data-theme="light"]) .brand-mark span:nth-child(2),
  :root:not([data-theme="light"]) .brand-mark i:nth-child(2) {
    background: #10b981;
  }
  :root:not([data-theme="light"]) .card-heading h1 {
    color: #f3f4f6;
  }
  :root:not([data-theme="light"]) .field-with-icon input {
    background: rgba(15, 20, 30, 0.7);
    color: #f3f4f6;
    border-color: rgba(255, 255, 255, 0.12);
  }
  :root:not([data-theme="light"]) .field-with-icon input:focus {
    background: rgba(15, 20, 30, 0.95);
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
  }
  :root:not([data-theme="light"]) .field-with-icon > span {
    color: #6b7280;
  }
  :root:not([data-theme="light"]) .primary-button {
    background: #10b981;
    color: #0b0f17;
  }
  :root:not([data-theme="light"]) .primary-button:hover {
    background: #059669;
  }
}

@media (max-width: 850px) {
  .login-view { width: min(520px, calc(100% - 32px)); padding: 38px 0; }
}

@media (max-width: 520px) {
  .login-view { padding-top: 30px; }
  .login-card { padding: 25px 20px; border-radius: 22px; }
  .dashboard-header { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}