@clusterenvision/ui-scss 1.94.3

package/dist/ce-ui.css

@@ -0,0 +1,4894 @@
+@charset "UTF-8";
+input,
+textarea,
+select {
+  transition: all 0.3s ease-in-out;
+}
+
+:root {
+  --ce-color-background: var(--theme-bg, #ffffff);
+  --ce-color-surface: var(--theme-surface, var(--theme-bg, #ffffff));
+  --ce-color-text: var(--theme-fg, #202124);
+  --ce-color-text-muted: var(--theme-muted, #6c757d);
+  --ce-color-primary: var(--theme-primary, #1a73e8);
+  --ce-color-accent: var(--theme-accent, var(--ce-color-primary));
+  --ce-color-border: var(--theme-border, #e5e7eb);
+  --ce-color-focus-ring: var(--theme-accent, var(--ce-color-primary));
+  --ce-font-family: var(--theme-font, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
+  --ce-font-size-base: var(--font-size-base, 15px);
+  --ce-font-size-sm: var(--font-size-sm, 0.875rem);
+  --ce-font-size-md: var(--font-size-md, 1rem);
+  --ce-font-size-lg: var(--font-size-lg, 1.125rem);
+  --ce-font-weight-regular: var(--font-weight-regular, 400);
+  --ce-font-weight-medium: var(--font-weight-medium, 500);
+  --ce-font-weight-semibold: var(--font-weight-semibold, 600);
+  --ce-direction: ltr;
+  --ce-inline-start: left;
+  --ce-inline-end: right;
+  --ce-text-align-start: left;
+  --ce-text-align-end: right;
+  --theme-surface: var(--theme-bg, #ffffff);
+  --text-primary: var(--ce-color-text, var(--theme-fg, #202124));
+  --text-muted: var(--ce-color-text-muted, var(--theme-muted, #6c757d));
+  --font-size-base: var(--ce-font-size-base, 15px);
+  --font-size-sm: var(--ce-font-size-sm, 0.875rem);
+  --font-size-md: var(--ce-font-size-md, 1rem);
+  --font-size-lg: var(--ce-font-size-lg, 1.125rem);
+  --font-weight-regular: var(--ce-font-weight-regular, 400);
+  --font-weight-medium: var(--ce-font-weight-medium, 500);
+  --font-weight-semibold: var(--ce-font-weight-semibold, 600);
+  --icon-filter: brightness(0) saturate(100%);
+  --ce-motion-duration-xxs: 80ms;
+  --ce-motion-duration-xs: 120ms;
+  --ce-motion-duration-sm: 180ms;
+  --ce-motion-duration-md: 240ms;
+  --ce-motion-duration-lg: 320ms;
+  --ce-motion-duration-xl: 420ms;
+  --ce-motion-ease-linear: linear;
+  --ce-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ce-motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
+  --ce-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ce-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+}
+
+[dir=rtl],
+[data-ce-dir=rtl] {
+  --ce-direction: rtl;
+  --ce-inline-start: right;
+  --ce-inline-end: left;
+  --ce-text-align-start: right;
+  --ce-text-align-end: left;
+}
+
+body {
+  font-family: var(--ce-font-family, var(--theme-font, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif));
+  background-color: var(--ce-color-background, var(--theme-bg, #ffffff));
+  color: var(--text-primary);
+  font-size: var(--font-size-base);
+  line-height: 1.5;
+  transition: background-color var(--ce-motion-duration-md) var(--ce-motion-ease-standard), color var(--ce-motion-duration-md) var(--ce-motion-ease-standard);
+}
+
+button,
+input,
+textarea,
+select {
+  font-family: var(--ce-font-family, var(--theme-font, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif));
+  color: var(--text-primary);
+  transition: background-color var(--ce-motion-duration-md) var(--ce-motion-ease-standard), color var(--ce-motion-duration-md) var(--ce-motion-ease-standard);
+}
+
+a {
+  color: var(--ce-color-accent, var(--theme-accent, var(--theme-primary)));
+  text-decoration: none;
+  transition: color var(--ce-motion-duration-md) var(--ce-motion-ease-standard);
+}
+a:hover, a:focus {
+  color: var(--ce-color-primary, var(--theme-primary));
+  text-decoration: underline;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--ce-spacing-xl, 2rem);
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--ce-spacing-xl, 2rem);
+}
+
+button {
+  border: none;
+  padding: var(--ce-button-padding, var(--ce-spacing-sm, 0.5rem) var(--ce-spacing-md, 1rem));
+  border-radius: var(--theme-radius, 6px);
+  cursor: pointer;
+  font-weight: 400;
+  transition: background-color var(--ce-motion-duration-md) var(--ce-motion-ease-standard), color var(--ce-motion-duration-md) var(--ce-motion-ease-standard);
+  background-color: var(--ce-color-accent, var(--theme-accent));
+  color: var(--ce-color-text, var(--theme-fg));
+}
+button:hover {
+  background-color: var(--ce-color-accent, var(--theme-accent));
+}
+
+input,
+textarea,
+select {
+  border: 1px solid var(--ce-color-border, var(--theme-muted, #ccc));
+  padding: var(--ce-spacing-sm, 0.5rem);
+  border-radius: var(--theme-radius, 6px);
+  transition: all var(--ce-motion-duration-md) var(--ce-motion-ease-standard);
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--ce-color-accent, var(--theme-accent));
+  outline: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  line-height: 1.2;
+  color: var(--text-primary);
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-accent {
+  color: var(--ce-color-accent, var(--theme-accent));
+}
+
+.bg-primary {
+  background-color: var(--ce-color-primary, var(--theme-primary));
+  color: var(--ce-color-text, var(--theme-fg));
+}
+
+.border {
+  border: 1px solid var(--ce-color-border, var(--theme-muted, #ccc));
+  border-radius: var(--theme-radius, 6px);
+}
+
+body::after {
+  display: none;
+}
+
+:root.theme-default, :root[data-ce-theme=default], .theme-default {
+  --theme-bg: #f8fafc;
+  --theme-surface: #ffffff;
+  --theme-fg: #0f172a;
+  --theme-muted: #6b7280;
+  --theme-primary: #2563eb;
+  --theme-accent: #2563eb;
+  --theme-font: 'Inter', system-ui, sans-serif;
+}
+
+.theme-dark, :root[data-ce-theme=dark], :root.theme-dark {
+  --theme-bg: #202124;
+  --theme-surface: #111827;
+  --theme-fg: #ffffff;
+  --theme-accent: #1a73e8;
+  --theme-muted: #f8f9fa;
+  --theme-primary: #1a73e8;
+}
+
+.theme-light, :root[data-ce-theme=light], :root.theme-light {
+  --theme-bg: #f8f9fa;
+  --theme-fg: #202124;
+  --theme-accent: #1a73e8;
+  --theme-muted: #9e9e9e;
+  --theme-primary: #1a73e8;
+}
+
+.theme-solarized, :root[data-ce-theme=solarized], :root.theme-solarized {
+  --theme-bg: #fdf6e3;
+  --theme-fg: #657b83;
+  --theme-accent: #268bd2;
+  --theme-muted: #93a1a1;
+  --theme-primary: #268bd2;
+}
+
+.theme-ocean, :root[data-ce-theme=ocean], :root.theme-ocean {
+  --theme-bg: #e0f7fa;
+  --theme-fg: #006064;
+  --theme-accent: #00bcd4;
+  --theme-muted: #4dd0e1;
+  --theme-primary: #00bcd4;
+}
+
+.theme-forest, :root[data-ce-theme=forest], :root.theme-forest {
+  --theme-bg: #e8f5e9;
+  --theme-fg: #1b5e20;
+  --theme-accent: #4caf50;
+  --theme-muted: #81c784;
+  --theme-primary: #4caf50;
+}
+
+.theme-red, :root[data-ce-theme=red], :root.theme-red {
+  --theme-bg: #ffebee;
+  --theme-fg: #b71c1c;
+  --theme-accent: #ea4335;
+  --theme-muted: #e57373;
+  --theme-primary: #ea4335;
+}
+
+.theme-purple, :root[data-ce-theme=purple], :root.theme-purple {
+  --theme-bg: #f3e5f5;
+  --theme-fg: #4a148c;
+  --theme-accent: #9c27b0;
+  --theme-muted: #ba68c8;
+  --theme-primary: #9c27b0;
+}
+
+:root.theme-high-contrast, :root[data-ce-theme=high-contrast], .theme-high-contrast {
+  --theme-bg: #000000;
+  --theme-surface: #0f1115;
+  --theme-fg: #ffffff;
+  --theme-muted: #cbd5e1;
+  --theme-primary: #1d4ed8;
+  --theme-accent: #1d4ed8;
+  --theme-font: 'Inter', system-ui, sans-serif;
+}
+
+.theme-transparent, :root[data-ce-theme=transparent], :root.theme-transparent {
+  --theme-bg: transparent;
+  --theme-fg: #202124;
+  --theme-accent: #1a73e8;
+  --theme-muted: rgba(0, 0, 0, 0.4);
+  --theme-primary: #1a73e8;
+}
+
+.theme-mac, :root[data-ce-theme=mac], :root.theme-mac {
+  --theme-bg: #f5f5f7;
+  --theme-surface: #ffffff;
+  --theme-fg: #1d1d1f;
+  --theme-accent: #007aff;
+  --theme-muted: #8e8e93;
+  --theme-primary: #007aff;
+}
+
+.theme-orange, :root[data-ce-theme=orange], :root.theme-orange {
+  --theme-bg: #fff3e0;
+  --theme-fg: #e65100;
+  --theme-accent: #ff9800;
+  --theme-muted: #ffb74d;
+  --theme-primary: #00bcd4;
+}
+
+.theme-mintwave, :root[data-ce-theme=mintwave], :root.theme-mintwave {
+  --theme-bg: #e6f9f6;
+  --theme-fg: #003c3c;
+  --theme-accent: #00bfa5;
+  --theme-muted: #a7d8cc;
+  --theme-primary: #00bfa5;
+}
+
+.theme-skyfade, :root[data-ce-theme=skyfade], :root.theme-skyfade {
+  --theme-bg: #f4f9ff;
+  --theme-fg: #1e2a38;
+  --theme-accent: #3399ff;
+  --theme-muted: #c8ddee;
+  --theme-primary: #3399ff;
+}
+
+.theme-nordwave, :root[data-ce-theme=nordwave], :root.theme-nordwave {
+  --theme-bg: #eceff4;
+  --theme-fg: #2e3440;
+  --theme-accent: #5e81ac;
+  --theme-muted: #d8dee9;
+  --theme-primary: #5e81ac;
+}
+
+.theme-glassy-amber, :root[data-ce-theme=glassy-amber], :root.theme-glassy-amber {
+  --theme-bg: rgba(255, 255, 255, 0.1);
+  --theme-fg: #ffffff;
+  background: rgba(255, 191, 0, 0.2);
+  border: 1px solid rgba(255, 215, 0, 0.3);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+  color: #000000;
+}
+.theme-glassy-amber *, :root[data-ce-theme=glassy-amber] *, :root.theme-glassy-amber * {
+  color: inherit;
+}
+
+.theme-glassy-blue, :root[data-ce-theme=glassy-blue], :root.theme-glassy-blue {
+  --theme-bg: rgba(255, 255, 255, 0.05);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(0, 120, 255, 0.3);
+  --theme-primary: #0078ff;
+  --theme-muted: rgba(255, 255, 255, 0.2);
+  --theme-border: rgba(255, 255, 255, 0.2);
+  --theme-radius: 16px;
+  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.theme-glassy-green, :root[data-ce-theme=glassy-green], :root.theme-glassy-green {
+  --theme-bg: rgba(255, 255, 255, 0.05);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(46, 204, 113, 0.3);
+  --theme-primary: #2ecc71;
+  --theme-muted: rgba(255, 255, 255, 0.2);
+  --theme-border: rgba(255, 255, 255, 0.2);
+  --theme-radius: 16px;
+  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.theme-glassy-blue,
+.theme-glassy-orange, :root[data-ce-theme=glassy-orange], :root.theme-glassy-orange {
+  --theme-bg: rgba(255, 165, 0, 0.15);
+  --theme-fg: #000000;
+  --theme-accent: rgba(255, 165, 0, 0.4);
+  --theme-primary: #ffa500;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+  --theme-radius: 12px;
+}
+
+.theme-glassy-pink, :root[data-ce-theme=glassy-pink], :root.theme-glassy-pink {
+  --theme-bg: rgba(255, 105, 180, 0.15);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(255, 105, 180, 0.35);
+  --theme-primary: #ff69b4;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-purple, :root[data-ce-theme=glassy-purple], :root.theme-glassy-purple {
+  --theme-bg: rgba(255, 255, 255, 0.05);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(155, 89, 182, 0.3);
+  --theme-primary: #9b59b6;
+  --theme-muted: rgba(255, 255, 255, 0.2);
+  --theme-border: rgba(255, 255, 255, 0.2);
+  --theme-radius: 16px;
+  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.theme-glassy-mac-dark,
+:root[data-ce-theme=glassy-mac-dark],
+:root.theme-glassy-mac-dark,
+.glassy-mac-dark {
+  --theme-bg: rgba(29, 29, 31, 0.6);
+  --theme-fg: #f5f5f5;
+  --theme-accent: rgba(0, 122, 255, 0.3);
+  --theme-primary: #007aff;
+  --theme-muted: rgba(255, 255, 255, 0.2);
+  --theme-border: rgba(255, 255, 255, 0.2);
+  --theme-radius: 16px;
+  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.theme-glassy-silver, :root[data-ce-theme=glassy-silver], :root.theme-glassy-silver {
+  --theme-bg: rgba(192, 192, 192, 0.15);
+  --theme-fg: #111111;
+  --theme-accent: rgba(192, 192, 192, 0.3);
+  --theme-primary: #c0c0c0;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-teal, :root[data-ce-theme=glassy-teal], :root.theme-glassy-teal {
+  --theme-bg: rgba(0, 128, 128, 0.15);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(0, 128, 128, 0.4);
+  --theme-primary: #008080;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-cyan, :root[data-ce-theme=glassy-cyan], :root.theme-glassy-cyan {
+  --theme-bg: rgba(0, 255, 255, 0.15);
+  --theme-fg: #000000;
+  --theme-accent: rgba(0, 255, 255, 0.35);
+  --theme-primary: #00ffff;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-gold, :root[data-ce-theme=glassy-gold], :root.theme-glassy-gold {
+  --theme-bg: rgba(255, 215, 0, 0.15);
+  --theme-fg: #000000;
+  --theme-accent: rgba(255, 215, 0, 0.3);
+  --theme-primary: #ffd700;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-aero-windows, :root[data-ce-theme=glassy-aero-windows], :root.theme-glassy-aero-windows {
+  --theme-bg: rgba(180, 200, 255, 0.12);
+  --theme-fg: #1a1a1a;
+  --theme-accent: rgba(140, 180, 255, 0.3);
+  --theme-primary: #90caf9;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-aurora-sky, :root[data-ce-theme=glassy-aurora-sky], :root.theme-glassy-aurora-sky {
+  --theme-bg: rgba(135, 206, 250, 0.15);
+  --theme-fg: #000000;
+  --theme-accent: rgba(135, 206, 250, 0.4);
+  --theme-primary: #87cefa;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-frosted-silver, :root[data-ce-theme=glassy-frosted-silver], :root.theme-glassy-frosted-silver {
+  --theme-bg: rgba(245, 245, 245, 0.15);
+  --theme-fg: #202124;
+  --theme-accent: rgba(230, 230, 230, 0.25);
+  --theme-primary: #f0f0f0;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-glass-white, :root[data-ce-theme=glassy-glass-white], :root.theme-glassy-glass-white {
+  --theme-bg: rgba(255, 255, 255, 0.12);
+  --theme-fg: #000000;
+  --theme-accent: rgba(240, 240, 240, 0.4);
+  --theme-primary: #ffffff;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-ice-black,
+:root[data-ce-theme=glassy-ice-black],
+:root.theme-glassy-ice-black,
+.glassy-ice-black {
+  --theme-bg: rgba(0, 0, 0, 0.4);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(0, 0, 0, 0.3);
+  --theme-primary: #000000;
+  --theme-muted: rgba(255, 255, 255, 0.2);
+  --theme-border: rgba(255, 255, 255, 0.2);
+  --theme-radius: 16px;
+  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.theme-glassy-blue, :root[data-ce-theme=glassy-blue], :root.theme-glassy-blue {
+  --theme-bg: rgba(0, 120, 255, 0.15);
+  --theme-fg: #ffffff;
+  --theme-accent: rgba(0, 120, 255, 0.4);
+  --theme-primary: #0078ff;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-neon-cyber, :root[data-ce-theme=glassy-neon-cyber], :root.theme-glassy-neon-cyber {
+  --theme-bg: rgba(57, 255, 20, 0.12);
+  --theme-fg: #00ff9f;
+  --theme-accent: rgba(57, 255, 20, 0.4);
+  --theme-primary: #39ff14;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-rose-gold, :root[data-ce-theme=glassy-rose-gold], :root.theme-glassy-rose-gold {
+  --theme-bg: rgba(255, 192, 203, 0.2);
+  --theme-fg: #661e43;
+  --theme-accent: rgba(255, 192, 203, 0.3);
+  --theme-primary: #b76e79;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-glassy-sakura-glass, :root[data-ce-theme=glassy-sakura-glass], :root.theme-glassy-sakura-glass {
+  --theme-bg: rgba(255, 182, 193, 0.2);
+  --theme-fg: #6e0d25;
+  --theme-accent: rgba(255, 182, 193, 0.3);
+  --theme-primary: #ffb6c1;
+  --theme-muted: rgba(255, 255, 255, 0.3);
+  --theme-radius: 12px;
+  --theme-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.theme-standard-dark, :root[data-ce-theme=standard-dark], :root.theme-standard-dark {
+  --theme-bg: #121212;
+  --theme-fg: #f1f1f1;
+  --theme-primary: #bb86fc;
+  --theme-accent: #3700b3;
+  --theme-muted: #999;
+  --theme-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.theme-standard-default, :root[data-ce-theme=standard-default], :root.theme-standard-default {
+  --theme-bg: #ffffff;
+  --theme-fg: #1a1a1a;
+  --theme-primary: #1a73e8;
+  --theme-accent: #4285f4;
+  --theme-muted: #9aa0a6;
+  --theme-radius: 8px;
+  --theme-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+:root.theme-neutral-light, :root[data-ce-theme=neutral-light], .theme-neutral-light {
+  --theme-bg: #f8fafc;
+  --theme-surface: #ffffff;
+  --theme-fg: #0f172a;
+  --theme-muted: #6b7280;
+  --theme-primary: #2563eb;
+  --theme-accent: #2563eb;
+  --theme-font: 'Inter', system-ui, sans-serif;
+}
+
+:root.theme-true-dark, :root[data-ce-theme=true-dark], .theme-true-dark {
+  --theme-bg: #0b0b0f;
+  --theme-surface: #111827;
+  --theme-fg: #e5e7eb;
+  --theme-muted: #9ca3af;
+  --theme-primary: #22d3ee;
+  --theme-accent: #22d3ee;
+  --theme-font: 'Inter', system-ui, sans-serif;
+}
+
+:root.theme-cool-slate, :root[data-ce-theme=cool-slate], .theme-cool-slate {
+  --theme-bg: #0f172a;
+  --theme-surface: #111827;
+  --theme-fg: #e2e8f0;
+  --theme-muted: #94a3b8;
+  --theme-primary: #3b82f6;
+  --theme-accent: #3b82f6;
+  --theme-font: 'Inter', system-ui, sans-serif;
+}
+
+:root.theme-warm-neutral, :root[data-ce-theme=warm-neutral], .theme-warm-neutral {
+  --theme-bg: #f7f4f1;
+  --theme-surface: #ffffff;
+  --theme-fg: #1f2933;
+  --theme-muted: #7b8794;
+  --theme-primary: #d97706;
+  --theme-accent: #d97706;
+  --theme-font: 'Inter', system-ui, sans-serif;
+}
+
+:root.theme-minimal-mono, :root[data-ce-theme=minimal-mono], .theme-minimal-mono {
+  --theme-bg: #f5f5f5;
+  --theme-surface: #ffffff;
+  --theme-fg: #111111;
+  --theme-muted: #666666;
+  --theme-primary: #1f2937;
+  --theme-accent: #1f2937;
+  --theme-font: 'Inter', system-ui, sans-serif;
+}
+
+:root.theme-soft-pastel, :root[data-ce-theme=soft-pastel], .theme-soft-pastel {
+  --theme-bg: #eefcf6;
+  --theme-surface: #ffffff;
+  --theme-fg: #0f172a;
+  --theme-muted: #6b7280;
+  --theme-primary: #10b981;
+  --theme-accent: #10b981;
+  --theme-font: 'Inter', system-ui, sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  line-height: 1.5;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  max-width: 100%;
+}
+
+ol,
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+html {
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  -webkit-text-size-adjust: 100%;
+  size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  min-height: 100%;
+  background-color: var(--ce-color-background, var(--theme-bg, #ffffff));
+  color: var(--ce-color-text, var(--theme-fg, #202124));
+}
+
+html,
+body {
+  height: 100%;
+}
+
+button,
+input,
+select,
+textarea {
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--ce-color-border, var(--theme-border, #e5e7eb));
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  color: var(--text-primary, #202124);
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+@media (min-width: 768px) {
+  h1 {
+    font-size: calc(2.5rem + (4rem - 2.5rem) * (100vw - 768px) / 672);
+  }
+}
+@media (min-width: 1440px) {
+  h1 {
+    font-size: 4rem;
+  }
+}
+
+h2 {
+  font-size: 2rem;
+}
+@media (min-width: 768px) {
+  h2 {
+    font-size: calc(2rem + (3rem - 2rem) * (100vw - 768px) / 672);
+  }
+}
+@media (min-width: 1440px) {
+  h2 {
+    font-size: 3rem;
+  }
+}
+
+h3 {
+  font-size: 1.75rem;
+}
+@media (min-width: 768px) {
+  h3 {
+    font-size: calc(1.75rem + (2.25rem - 1.75rem) * (100vw - 768px) / 672);
+  }
+}
+@media (min-width: 1440px) {
+  h3 {
+    font-size: 2.25rem;
+  }
+}
+
+h4 {
+  font-size: 1.5rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-bottom: 1rem;
+  color: var(--text-primary, #202124);
+}
+
+small,
+.text--small {
+  font-size: 0.875rem;
+  color: var(--text-muted, #9aa0a6);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-primary {
+  color: var(--theme-primary, #1a73e8);
+}
+
+.text-secondary {
+  color: var(--theme-secondary, #fbbc04);
+}
+
+.text-danger {
+  color: var(--theme-danger, #ea4335);
+}
+
+.text-muted {
+  color: var(--text-muted, #9aa0a6);
+}
+
+input,
+textarea,
+select {
+  width: var(--ce-form-control-width, 100%);
+  padding: var(--ce-form-control-padding, 0.5rem 1rem);
+  border-width: var(--ce-form-control-border-width, 1px);
+  border-style: var(--ce-form-control-border-style, solid);
+  border-color: var(--ce-form-control-border-color, #9aa0a6);
+  border-radius: var(--ce-form-control-radius, 4px);
+  background-color: var(--ce-form-control-bg, #ffffff);
+  color: var(--ce-form-control-color, #202124);
+}
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--ce-form-control-focus-border, #1a73e8);
+  outline: var(--ce-form-control-focus-outline, none);
+  box-shadow: var(--ce-form-control-focus-shadow, 0 0 0 3px rgba(26, 115, 232, 0.2));
+}
+input:disabled,
+textarea:disabled,
+select:disabled {
+  background-color: var(--ce-form-control-disabled-bg, #f8f9fa);
+  color: var(--ce-form-control-disabled-color, #9aa0a6);
+  cursor: var(--ce-form-control-disabled-cursor, not-allowed);
+}
+
+label {
+  display: var(--ce-form-label-display, inline-block);
+  margin-bottom: var(--ce-form-label-margin, 0.25rem);
+  font-weight: var(--ce-form-label-weight, 600);
+}
+
+.form-control--error {
+  border-color: var(--ce-form-control-error-border, #ea4335);
+}
+.form-control--error:focus {
+  box-shadow: var(--ce-form-control-error-shadow, 0 0 0 3px rgba(234, 67, 53, 0.2));
+}
+
+.form-error-msg {
+  margin-top: var(--ce-form-error-margin, 0.25rem);
+  color: var(--ce-form-error-color, #ea4335);
+  font-size: var(--ce-form-error-size, 0.875rem);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slide-down {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.grid {
+  display: var(--ce-layout-grid-display, grid);
+  gap: var(--ce-layout-grid-gap, 1rem);
+  grid-template-columns: var(--ce-layout-grid-columns, repeat(12, 1fr));
+}
+
+.grid--2-cols {
+  grid-template-columns: var(--ce-layout-grid-2-columns, repeat(2, 1fr));
+}
+
+.grid--3-cols {
+  grid-template-columns: var(--ce-layout-grid-3-columns, repeat(3, 1fr));
+}
+
+.grid--4-cols {
+  grid-template-columns: var(--ce-layout-grid-4-columns, repeat(4, 1fr));
+}
+
+.grid--6-cols {
+  grid-template-columns: var(--ce-layout-grid-6-columns, repeat(6, 1fr));
+}
+
+@media (max-width: 768px) {
+  .grid--responsive {
+    grid-template-columns: var(--ce-layout-grid-responsive-columns, 1fr);
+  }
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #1a73e8;
+  color: #ffffff;
+  padding: 0.5rem 1.5rem;
+  height: 60px;
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+.header .header__logo {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+.header .header__nav {
+  display: flex;
+  gap: 1rem;
+}
+.header .header__nav a {
+  color: #ffffff;
+  text-decoration: none;
+}
+.header .header__nav a:hover {
+  text-decoration: underline;
+}
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    height: auto;
+    gap: 0.5rem;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #1a73e8;
+  color: #ffffff;
+  padding: 0.5rem 1.5rem;
+  height: 60px;
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+.header .header__logo {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+.header .header__nav {
+  display: flex;
+  gap: 1rem;
+}
+.header .header__nav a {
+  color: #ffffff;
+  text-decoration: none;
+}
+.header .header__nav a:hover {
+  text-decoration: underline;
+}
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    height: auto;
+    gap: 0.5rem;
+  }
+}
+
+.sidebar {
+  width: 260px;
+  background-color: #202124;
+  color: #ffffff;
+  height: 100vh;
+  padding: 1.5rem 1rem;
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+}
+.sidebar .sidebar__brand {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 2rem;
+}
+.sidebar .sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.sidebar .sidebar__nav a {
+  color: #ffffff;
+  text-decoration: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+.sidebar .sidebar__nav a:hover, .sidebar .sidebar__nav a.active {
+  background-color: #1a73e8;
+}
+
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.container--fluid {
+  max-width: 100%;
+}
+.container--narrow {
+  max-width: 720px;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.stack--sm {
+  gap: 0.5rem;
+}
+.stack--lg {
+  gap: 1.5rem;
+}
+.stack--xl {
+  gap: 2rem;
+}
+.stack--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.stack--centered {
+  align-items: center;
+  justify-content: center;
+}
+
+.section {
+  padding: 2rem 0;
+}
+.section--light {
+  background-color: #f8f9fa;
+}
+.section--dark {
+  background-color: #202124;
+  color: #ffffff;
+}
+.section--primary {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.section--bordered {
+  border-top: 1px solid #9aa0a6;
+  border-bottom: 1px solid #9aa0a6;
+}
+
+.m-0 {
+  margin: 0rem !important;
+}
+
+.mt-0 {
+  margin-top: 0rem !important;
+}
+
+.mb-0 {
+  margin-bottom: 0rem !important;
+}
+
+.ml-0 {
+  margin-left: 0rem !important;
+}
+
+.mr-0 {
+  margin-right: 0rem !important;
+}
+
+.ms-0 {
+  margin-inline-start: 0rem !important;
+}
+
+.me-0 {
+  margin-inline-end: 0rem !important;
+}
+
+.mx-0 {
+  margin-inline: 0rem !important;
+}
+
+.p-0 {
+  padding: 0rem !important;
+}
+
+.pt-0 {
+  padding-top: 0rem !important;
+}
+
+.pb-0 {
+  padding-bottom: 0rem !important;
+}
+
+.pl-0 {
+  padding-left: 0rem !important;
+}
+
+.pr-0 {
+  padding-right: 0rem !important;
+}
+
+.ps-0 {
+  padding-inline-start: 0rem !important;
+}
+
+.pe-0 {
+  padding-inline-end: 0rem !important;
+}
+
+.px-0 {
+  padding-inline: 0rem !important;
+}
+
+.m-xs {
+  margin: 0.25rem !important;
+}
+
+.mt-xs {
+  margin-top: 0.25rem !important;
+}
+
+.mb-xs {
+  margin-bottom: 0.25rem !important;
+}
+
+.ml-xs {
+  margin-left: 0.25rem !important;
+}
+
+.mr-xs {
+  margin-right: 0.25rem !important;
+}
+
+.ms-xs {
+  margin-inline-start: 0.25rem !important;
+}
+
+.me-xs {
+  margin-inline-end: 0.25rem !important;
+}
+
+.mx-xs {
+  margin-inline: 0.25rem !important;
+}
+
+.p-xs {
+  padding: 0.25rem !important;
+}
+
+.pt-xs {
+  padding-top: 0.25rem !important;
+}
+
+.pb-xs {
+  padding-bottom: 0.25rem !important;
+}
+
+.pl-xs {
+  padding-left: 0.25rem !important;
+}
+
+.pr-xs {
+  padding-right: 0.25rem !important;
+}
+
+.ps-xs {
+  padding-inline-start: 0.25rem !important;
+}
+
+.pe-xs {
+  padding-inline-end: 0.25rem !important;
+}
+
+.px-xs {
+  padding-inline: 0.25rem !important;
+}
+
+.m-sm {
+  margin: 0.5rem !important;
+}
+
+.mt-sm {
+  margin-top: 0.5rem !important;
+}
+
+.mb-sm {
+  margin-bottom: 0.5rem !important;
+}
+
+.ml-sm {
+  margin-left: 0.5rem !important;
+}
+
+.mr-sm {
+  margin-right: 0.5rem !important;
+}
+
+.ms-sm {
+  margin-inline-start: 0.5rem !important;
+}
+
+.me-sm {
+  margin-inline-end: 0.5rem !important;
+}
+
+.mx-sm {
+  margin-inline: 0.5rem !important;
+}
+
+.p-sm {
+  padding: 0.5rem !important;
+}
+
+.pt-sm {
+  padding-top: 0.5rem !important;
+}
+
+.pb-sm {
+  padding-bottom: 0.5rem !important;
+}
+
+.pl-sm {
+  padding-left: 0.5rem !important;
+}
+
+.pr-sm {
+  padding-right: 0.5rem !important;
+}
+
+.ps-sm {
+  padding-inline-start: 0.5rem !important;
+}
+
+.pe-sm {
+  padding-inline-end: 0.5rem !important;
+}
+
+.px-sm {
+  padding-inline: 0.5rem !important;
+}
+
+.m-md {
+  margin: 1rem !important;
+}
+
+.mt-md {
+  margin-top: 1rem !important;
+}
+
+.mb-md {
+  margin-bottom: 1rem !important;
+}
+
+.ml-md {
+  margin-left: 1rem !important;
+}
+
+.mr-md {
+  margin-right: 1rem !important;
+}
+
+.ms-md {
+  margin-inline-start: 1rem !important;
+}
+
+.me-md {
+  margin-inline-end: 1rem !important;
+}
+
+.mx-md {
+  margin-inline: 1rem !important;
+}
+
+.p-md {
+  padding: 1rem !important;
+}
+
+.pt-md {
+  padding-top: 1rem !important;
+}
+
+.pb-md {
+  padding-bottom: 1rem !important;
+}
+
+.pl-md {
+  padding-left: 1rem !important;
+}
+
+.pr-md {
+  padding-right: 1rem !important;
+}
+
+.ps-md {
+  padding-inline-start: 1rem !important;
+}
+
+.pe-md {
+  padding-inline-end: 1rem !important;
+}
+
+.px-md {
+  padding-inline: 1rem !important;
+}
+
+.m-lg {
+  margin: 1.5rem !important;
+}
+
+.mt-lg {
+  margin-top: 1.5rem !important;
+}
+
+.mb-lg {
+  margin-bottom: 1.5rem !important;
+}
+
+.ml-lg {
+  margin-left: 1.5rem !important;
+}
+
+.mr-lg {
+  margin-right: 1.5rem !important;
+}
+
+.ms-lg {
+  margin-inline-start: 1.5rem !important;
+}
+
+.me-lg {
+  margin-inline-end: 1.5rem !important;
+}
+
+.mx-lg {
+  margin-inline: 1.5rem !important;
+}
+
+.p-lg {
+  padding: 1.5rem !important;
+}
+
+.pt-lg {
+  padding-top: 1.5rem !important;
+}
+
+.pb-lg {
+  padding-bottom: 1.5rem !important;
+}
+
+.pl-lg {
+  padding-left: 1.5rem !important;
+}
+
+.pr-lg {
+  padding-right: 1.5rem !important;
+}
+
+.ps-lg {
+  padding-inline-start: 1.5rem !important;
+}
+
+.pe-lg {
+  padding-inline-end: 1.5rem !important;
+}
+
+.px-lg {
+  padding-inline: 1.5rem !important;
+}
+
+.m-xl {
+  margin: 2rem !important;
+}
+
+.mt-xl {
+  margin-top: 2rem !important;
+}
+
+.mb-xl {
+  margin-bottom: 2rem !important;
+}
+
+.ml-xl {
+  margin-left: 2rem !important;
+}
+
+.mr-xl {
+  margin-right: 2rem !important;
+}
+
+.ms-xl {
+  margin-inline-start: 2rem !important;
+}
+
+.me-xl {
+  margin-inline-end: 2rem !important;
+}
+
+.mx-xl {
+  margin-inline: 2rem !important;
+}
+
+.p-xl {
+  padding: 2rem !important;
+}
+
+.pt-xl {
+  padding-top: 2rem !important;
+}
+
+.pb-xl {
+  padding-bottom: 2rem !important;
+}
+
+.pl-xl {
+  padding-left: 2rem !important;
+}
+
+.pr-xl {
+  padding-right: 2rem !important;
+}
+
+.ps-xl {
+  padding-inline-start: 2rem !important;
+}
+
+.pe-xl {
+  padding-inline-end: 2rem !important;
+}
+
+.px-xl {
+  padding-inline: 2rem !important;
+}
+
+.m-xxl {
+  margin: 3rem !important;
+}
+
+.mt-xxl {
+  margin-top: 3rem !important;
+}
+
+.mb-xxl {
+  margin-bottom: 3rem !important;
+}
+
+.ml-xxl {
+  margin-left: 3rem !important;
+}
+
+.mr-xxl {
+  margin-right: 3rem !important;
+}
+
+.ms-xxl {
+  margin-inline-start: 3rem !important;
+}
+
+.me-xxl {
+  margin-inline-end: 3rem !important;
+}
+
+.mx-xxl {
+  margin-inline: 3rem !important;
+}
+
+.p-xxl {
+  padding: 3rem !important;
+}
+
+.pt-xxl {
+  padding-top: 3rem !important;
+}
+
+.pb-xxl {
+  padding-bottom: 3rem !important;
+}
+
+.pl-xxl {
+  padding-left: 3rem !important;
+}
+
+.pr-xxl {
+  padding-right: 3rem !important;
+}
+
+.ps-xxl {
+  padding-inline-start: 3rem !important;
+}
+
+.pe-xxl {
+  padding-inline-end: 3rem !important;
+}
+
+.px-xxl {
+  padding-inline: 3rem !important;
+}
+
+.m-xxxl {
+  margin: 4rem !important;
+}
+
+.mt-xxxl {
+  margin-top: 4rem !important;
+}
+
+.mb-xxxl {
+  margin-bottom: 4rem !important;
+}
+
+.ml-xxxl {
+  margin-left: 4rem !important;
+}
+
+.mr-xxxl {
+  margin-right: 4rem !important;
+}
+
+.ms-xxxl {
+  margin-inline-start: 4rem !important;
+}
+
+.me-xxxl {
+  margin-inline-end: 4rem !important;
+}
+
+.mx-xxxl {
+  margin-inline: 4rem !important;
+}
+
+.p-xxxl {
+  padding: 4rem !important;
+}
+
+.pt-xxxl {
+  padding-top: 4rem !important;
+}
+
+.pb-xxxl {
+  padding-bottom: 4rem !important;
+}
+
+.pl-xxxl {
+  padding-left: 4rem !important;
+}
+
+.pr-xxxl {
+  padding-right: 4rem !important;
+}
+
+.ps-xxxl {
+  padding-inline-start: 4rem !important;
+}
+
+.pe-xxxl {
+  padding-inline-end: 4rem !important;
+}
+
+.px-xxxl {
+  padding-inline: 4rem !important;
+}
+
+.flex {
+  display: flex !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-center {
+  justify-content: center;
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between !important;
+}
+
+.align-center {
+  align-items: center !important;
+}
+
+.wrap {
+  flex-wrap: wrap !important;
+}
+
+.block {
+  display: block !important;
+}
+
+.inline {
+  display: inline !important;
+}
+
+.inline-block {
+  display: inline-block !important;
+}
+
+.none {
+  display: none !important;
+}
+
+@media (min-width: 768px) {
+  .sm-block {
+    display: block !important;
+  }
+  .sm-none {
+    display: none !important;
+  }
+}
+.relative {
+  position: relative !important;
+}
+
+.absolute {
+  position: absolute !important;
+}
+
+.fixed {
+  position: fixed !important;
+}
+
+.sticky {
+  position: sticky !important;
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-primary {
+  color: var(--theme-primary, #1a73e8) !important;
+}
+
+.text-success {
+  color: var(--theme-success, #34a853) !important;
+}
+
+.text-danger {
+  color: var(--theme-danger, #ea4335) !important;
+}
+
+.text-muted {
+  color: var(--theme-muted, #9aa0a6) !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.visible {
+  visibility: visible !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+.sr-only {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+
+*:focus {
+  outline: none;
+}
+
+*:focus-visible {
+  outline: 2px solid var(--ce-color-focus-ring, var(--theme-accent, #1a73e8));
+  outline-offset: 2px;
+}
+
+.theme-switcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.theme-switcher label {
+  font-weight: 500;
+  color: var(--theme-fg);
+}
+.theme-switcher button,
+.theme-switcher select {
+  background-color: #f8f9fa;
+  border: 1px solid #9aa0a6;
+  padding: 0.25rem;
+  font-family: inherit;
+  font-size: 1rem;
+  color: var(--theme-fg);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+.theme-switcher button:hover,
+.theme-switcher select:hover {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.theme-switcher select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.25rem center;
+  background-size: 1rem;
+  padding-right: 2rem;
+}
+
+.input,
+.ce-input {
+  display: var(--ce-input-display, block);
+  width: var(--ce-input-width, 100%);
+  padding: var(--ce-input-padding, 0.5rem 1rem);
+  font-size: var(--ce-input-font-size, 1rem);
+  color: var(--ce-input-color, var(--theme-input-fg, #202124));
+  background-color: var(--ce-input-bg, var(--theme-input-bg, #ffffff));
+  border-width: var(--ce-input-border-width, 1px);
+  border-style: var(--ce-input-border-style, solid);
+  border-color: var(--ce-input-border, var(--theme-input-border, #9aa0a6));
+  border-radius: var(--ce-input-radius, 4px);
+  line-height: var(--ce-input-line-height, 1.5);
+}
+.input:focus,
+.ce-input:focus {
+  border-color: var(--ce-input-focus-border, var(--theme-input-focus, #1a73e8));
+  outline: var(--ce-input-focus-outline, none);
+  box-shadow: var(--ce-input-focus-shadow, 0 0 0 3px rgba(26, 115, 232, 0.2));
+}
+.input:focus-visible,
+.ce-input:focus-visible {
+  outline: var(--ce-input-focus-visible-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-input-focus-visible-offset, 2px);
+}
+.input:disabled,
+.ce-input:disabled {
+  background-color: var(--ce-input-disabled-bg, var(--theme-input-disabled-bg, #f8f9fa));
+  color: var(--ce-input-disabled-color, var(--theme-input-disabled-fg, #9aa0a6));
+  cursor: var(--ce-input-disabled-cursor, not-allowed);
+}
+.input--sm,
+.ce-input--sm {
+  padding: var(--ce-input-sm-padding, 0.25rem 0.5rem);
+  font-size: var(--ce-input-sm-size, 0.875rem);
+}
+.input--md,
+.ce-input--md {
+  padding: var(--ce-input-md-padding, 0.5rem 1rem);
+  font-size: var(--ce-input-md-size, 1rem);
+}
+.input--lg,
+.ce-input--lg {
+  padding: var(--ce-input-lg-padding, 1rem 1.5rem);
+  font-size: var(--ce-input-lg-size, 1.125rem);
+}
+.input--error,
+.ce-input--error {
+  border-color: var(--ce-input-error-border, var(--theme-input-error, #ea4335));
+}
+.input--error:focus,
+.ce-input--error:focus {
+  box-shadow: var(--ce-input-error-shadow, 0 0 0 3px rgba(234, 67, 53, 0.2));
+}
+.input--success,
+.ce-input--success {
+  border-color: var(--ce-input-success-border, var(--theme-input-success, #34a853));
+}
+.input--success:focus,
+.ce-input--success:focus {
+  box-shadow: var(--ce-input-success-shadow, 0 0 0 3px rgba(52, 168, 83, 0.2));
+}
+.input--rounded,
+.ce-input--rounded {
+  border-radius: var(--ce-input-rounded-radius, 10px);
+}
+.input--icon-left, .input--icon-right,
+.ce-input--icon-left,
+.ce-input--icon-right {
+  position: var(--ce-input-icon-position, relative);
+  padding-left: var(--ce-input-icon-padding-left, 2.5rem);
+}
+.input--icon-left::before, .input--icon-right::before,
+.ce-input--icon-left::before,
+.ce-input--icon-right::before {
+  content: var(--ce-input-icon-content, "");
+  position: var(--ce-input-icon-position, absolute);
+  top: var(--ce-input-icon-top, 50%);
+  transform: var(--ce-input-icon-transform, translateY(-50%));
+  left: var(--ce-input-icon-left, 0.5rem);
+  width: var(--ce-input-icon-size, 1rem);
+  height: var(--ce-input-icon-size, 1rem);
+  background-repeat: var(--ce-input-icon-repeat, no-repeat);
+  background-position: var(--ce-input-icon-align, center);
+  background-size: var(--ce-input-icon-scale, contain);
+  pointer-events: var(--ce-input-icon-events, none);
+}
+
+ce-input[size=sm] input.ce-input, ce-input[size=sm] .ce-input {
+  padding: var(--ce-input-sm-padding, 0.25rem 0.5rem);
+  font-size: var(--ce-input-sm-size, 0.875rem);
+}
+ce-input[size=lg] input.ce-input, ce-input[size=lg] .ce-input {
+  padding: var(--ce-input-lg-padding, 1rem 1.5rem);
+  font-size: var(--ce-input-lg-size, 1.125rem);
+}
+
+.textarea {
+  display: var(--ce-textarea-display, block);
+  width: var(--ce-textarea-width, 100%);
+  padding: var(--ce-textarea-padding, 0.5rem 1rem);
+  font-size: var(--ce-textarea-size, 1rem);
+  color: var(--ce-textarea-color, #202124);
+  background-color: var(--ce-textarea-bg, #ffffff);
+  border: var(--ce-textarea-border, 1px solid #9aa0a6);
+  border-radius: var(--ce-textarea-radius, 4px);
+  resize: var(--ce-textarea-resize, vertical);
+  min-height: var(--ce-textarea-min-height, 100px);
+}
+.textarea:focus {
+  border-color: var(--ce-textarea-focus-border, #1a73e8);
+  outline: var(--ce-textarea-focus-outline, none);
+  box-shadow: var(--ce-textarea-focus-shadow, 0 0 0 3px rgba(26, 115, 232, 0.2));
+}
+.textarea:disabled {
+  background-color: var(--ce-textarea-disabled-bg, #f8f9fa);
+  color: var(--ce-textarea-disabled-color, #9aa0a6);
+  cursor: var(--ce-textarea-disabled-cursor, not-allowed);
+}
+.textarea--error {
+  border-color: var(--ce-textarea-error-border, #ea4335);
+}
+.textarea--error:focus {
+  box-shadow: var(--ce-textarea-error-shadow, 0 0 0 3px rgba(234, 67, 53, 0.2));
+}
+
+.select,
+.ce-dropdown {
+  position: relative;
+  width: 100%;
+  display: inline-block;
+}
+.select__toggle, .select__trigger,
+.ce-dropdown__toggle,
+.ce-dropdown__trigger {
+  width: 100%;
+  padding: var(--ce-select-padding, 0.625rem 1rem);
+  min-height: 44px;
+  background-color: #ffffff;
+  color: #202124;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ce-select-gap, var(--ce-spacing-sm, 0.5rem));
+  transition: all 0.2s ease;
+  text-align: left;
+}
+.select__toggle:hover, .select__trigger:hover,
+.ce-dropdown__toggle:hover,
+.ce-dropdown__trigger:hover {
+  border-color: #1a73e8;
+}
+.select__toggle:focus, .select__toggle:focus-visible, .select__trigger:focus, .select__trigger:focus-visible,
+.ce-dropdown__toggle:focus,
+.ce-dropdown__toggle:focus-visible,
+.ce-dropdown__trigger:focus,
+.ce-dropdown__trigger:focus-visible {
+  border-color: #1a73e8;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
+}
+.select__label,
+.ce-dropdown__label {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-weight: 500;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+.select__icon,
+.ce-dropdown__icon {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 10px;
+  font-size: 0.85rem;
+  color: var(--ce-control-handle-fg, #fff);
+  background-color: var(--ce-control-handle-bg, #1a73e8);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+  pointer-events: none;
+  box-shadow: var(--ce-select-icon-shadow, 0 6px 12px rgba(16, 24, 40, 0.12));
+}
+.select__toggle[aria-expanded=true] .select__icon, .select__trigger[aria-expanded=true] .select__icon,
+.select__toggle[aria-expanded=true] .ce-dropdown__icon,
+.select__trigger[aria-expanded=true] .ce-dropdown__icon,
+.ce-dropdown__toggle[aria-expanded=true] .select__icon,
+.ce-dropdown__trigger[aria-expanded=true] .select__icon,
+.ce-dropdown__toggle[aria-expanded=true] .ce-dropdown__icon,
+.ce-dropdown__trigger[aria-expanded=true] .ce-dropdown__icon {
+  transform: rotate(180deg);
+}
+.select__menu,
+.ce-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  background-color: #ffffff;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  box-shadow: var(--ce-select-menu-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+  display: block;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-0.5rem);
+  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+}
+.select__menu.is-visible,
+.ce-dropdown__menu.is-visible {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+}
+.select--open .select__menu,
+.select--open .ce-dropdown__menu,
+.ce-dropdown--open .select__menu,
+.ce-dropdown--open .ce-dropdown__menu {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+}
+.select__toggle[aria-expanded=true] ~ .select__menu,
+.select__toggle[aria-expanded=true] ~ .ce-dropdown__menu,
+.ce-dropdown__toggle[aria-expanded=true] ~ .select__menu,
+.ce-dropdown__toggle[aria-expanded=true] ~ .ce-dropdown__menu {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+}
+.select:focus-within .select__menu,
+.select:focus-within .ce-dropdown__menu,
+.ce-dropdown:focus-within .select__menu,
+.ce-dropdown:focus-within .ce-dropdown__menu {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+}
+.select:hover .select__menu,
+.select:hover .ce-dropdown__menu,
+.ce-dropdown:hover .select__menu,
+.ce-dropdown:hover .ce-dropdown__menu {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+}
+.select__item,
+.ce-dropdown__item {
+  padding: var(--ce-select-item-padding, 0.75rem 1rem);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  display: flex;
+  align-items: center;
+  gap: var(--ce-select-item-gap, 0.75rem);
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  font-size: 0.9375rem;
+  color: #202124;
+}
+.select__item:hover,
+.ce-dropdown__item:hover {
+  background-color: #f8f9fa;
+}
+.select__item:focus, .select__item:focus-visible,
+.ce-dropdown__item:focus,
+.ce-dropdown__item:focus-visible {
+  background-color: rgba(26, 115, 232, 0.1);
+  outline: none;
+}
+.select__item--selected,
+.ce-dropdown__item--selected {
+  background-color: rgba(26, 115, 232, 0.1);
+  color: #1a73e8;
+  font-weight: 500;
+}
+.select__item--disabled,
+.ce-dropdown__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.select__item-icon,
+.ce-dropdown__item-icon {
+  font-size: 1.25em;
+  flex-shrink: 0;
+}
+.select__item-content,
+.ce-dropdown__item-content {
+  flex: 1;
+  min-width: 0;
+}
+.select__item-label,
+.ce-dropdown__item-label {
+  display: block;
+  font-weight: 500;
+}
+.select__item-description,
+.ce-dropdown__item-description {
+  display: block;
+  font-size: 0.8125rem;
+  color: #9aa0a6;
+  margin-top: 0.125rem;
+}
+.select--error .select__trigger,
+.select--error .select__toggle,
+.select--error .ce-dropdown__trigger,
+.select--error .ce-dropdown__toggle,
+.ce-dropdown--error .select__trigger,
+.ce-dropdown--error .select__toggle,
+.ce-dropdown--error .ce-dropdown__trigger,
+.ce-dropdown--error .ce-dropdown__toggle {
+  border-color: #ea4335;
+}
+.select:disabled .select__trigger,
+.select:disabled .select__toggle,
+.select:disabled .ce-dropdown__trigger,
+.select:disabled .ce-dropdown__toggle,
+.ce-dropdown:disabled .select__trigger,
+.ce-dropdown:disabled .select__toggle,
+.ce-dropdown:disabled .ce-dropdown__trigger,
+.ce-dropdown:disabled .ce-dropdown__toggle {
+  background-color: #f8f9fa;
+  color: #9aa0a6;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+select.select {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background-color: #ffffff;
+  color: #202124;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" width="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 1rem;
+}
+select.select:focus {
+  border-color: #1a73e8;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
+}
+select.select:disabled {
+  background-color: #f8f9fa;
+  color: #9aa0a6;
+  cursor: not-allowed;
+}
+
+.checkbox,
+.ce-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ce-checkbox-gap, 0.5rem);
+  cursor: var(--ce-checkbox-cursor, pointer);
+  font-size: var(--ce-checkbox-size, 1rem);
+  position: relative;
+  color: var(--ce-checkbox-color, inherit);
+}
+.checkbox input[type=checkbox],
+.ce-checkbox input[type=checkbox] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  border-width: var(--ce-checkbox-border-width, 2px);
+  border-style: var(--ce-checkbox-border-style, solid);
+  border-color: var(--ce-checkbox-border-color, #cbd5e0);
+  border-radius: var(--ce-checkbox-radius, 0.25rem);
+  background-color: var(--ce-checkbox-bg, white);
+  cursor: var(--ce-checkbox-cursor, pointer);
+  margin: 0;
+  padding: 0;
+  flex-shrink: 0;
+  position: relative;
+  transition: all var(--ce-checkbox-transition, 0.2s) var(--ce-checkbox-transition-ease, ease);
+  box-sizing: border-box;
+}
+.checkbox input[type=checkbox]:hover,
+.ce-checkbox input[type=checkbox]:hover {
+  border-color: var(--ce-checkbox-hover-border, #3b82f6);
+}
+.checkbox input[type=checkbox]:checked,
+.ce-checkbox input[type=checkbox]:checked {
+  background-color: var(--ce-checkbox-checked-bg, #3b82f6);
+  border-color: var(--ce-checkbox-checked-border, #3b82f6);
+}
+.checkbox input[type=checkbox]:checked::after,
+.ce-checkbox input[type=checkbox]:checked::after {
+  content: "";
+  position: absolute;
+  left: var(--ce-checkbox-check-left, 0.3rem);
+  top: var(--ce-checkbox-check-top, 0.05rem);
+  width: var(--ce-checkbox-check-width, 0.35rem);
+  height: var(--ce-checkbox-check-height, 0.65rem);
+  border: solid var(--ce-checkbox-check-color, white);
+  border-width: 0 var(--ce-checkbox-check-stroke, 2px) var(--ce-checkbox-check-stroke, 2px) 0;
+  transform: rotate(45deg);
+}
+.checkbox input[type=checkbox]:focus,
+.ce-checkbox input[type=checkbox]:focus {
+  outline-width: var(--ce-checkbox-focus-outline-width, 2px);
+  outline-style: var(--ce-checkbox-focus-outline-style, solid);
+  outline-color: var(--ce-checkbox-focus-outline-color, rgba(59, 130, 246, 0.3));
+  outline-offset: var(--ce-checkbox-focus-outline-offset, 2px);
+}
+.checkbox input[type=checkbox]:disabled,
+.ce-checkbox input[type=checkbox]:disabled {
+  cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+  opacity: var(--ce-checkbox-disabled-opacity, 0.5);
+  background-color: var(--ce-checkbox-disabled-bg, #f7fafc);
+}
+.checkbox--disabled,
+.ce-checkbox--disabled {
+  color: var(--ce-checkbox-disabled-color, #9aa0a6);
+  cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+}
+.checkbox--disabled input[type=checkbox],
+.ce-checkbox--disabled input[type=checkbox] {
+  cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+}
+
+ce-checkbox {
+  display: inline-block;
+}
+ce-checkbox > input[type=checkbox],
+ce-checkbox input[type=checkbox] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  border-width: var(--ce-checkbox-border-width, 2px);
+  border-style: var(--ce-checkbox-border-style, solid);
+  border-color: var(--ce-checkbox-border-color, #cbd5e0);
+  border-radius: var(--ce-checkbox-radius, 0.25rem);
+  background-color: var(--ce-checkbox-bg, white);
+  cursor: var(--ce-checkbox-cursor, pointer);
+  margin: 0;
+  padding: 0;
+  flex-shrink: 0;
+  position: relative;
+  transition: all var(--ce-checkbox-transition, 0.2s) var(--ce-checkbox-transition-ease, ease);
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+ce-checkbox > input[type=checkbox]:hover,
+ce-checkbox input[type=checkbox]:hover {
+  border-color: var(--ce-checkbox-hover-border, #3b82f6);
+}
+ce-checkbox > input[type=checkbox]:checked,
+ce-checkbox input[type=checkbox]:checked {
+  background-color: var(--ce-checkbox-checked-bg, #3b82f6);
+  border-color: var(--ce-checkbox-checked-border, #3b82f6);
+}
+ce-checkbox > input[type=checkbox]:checked::after,
+ce-checkbox input[type=checkbox]:checked::after {
+  content: "";
+  position: absolute;
+  left: var(--ce-checkbox-check-left, 0.3rem);
+  top: var(--ce-checkbox-check-top, 0.05rem);
+  width: var(--ce-checkbox-check-width, 0.35rem);
+  height: var(--ce-checkbox-check-height, 0.65rem);
+  border: solid var(--ce-checkbox-check-color, white);
+  border-width: 0 var(--ce-checkbox-check-stroke, 2px) var(--ce-checkbox-check-stroke, 2px) 0;
+  transform: rotate(45deg);
+}
+ce-checkbox > input[type=checkbox]:focus,
+ce-checkbox input[type=checkbox]:focus {
+  outline-width: var(--ce-checkbox-focus-outline-width, 2px);
+  outline-style: var(--ce-checkbox-focus-outline-style, solid);
+  outline-color: var(--ce-checkbox-focus-outline-color, rgba(59, 130, 246, 0.3));
+  outline-offset: var(--ce-checkbox-focus-outline-offset, 2px);
+}
+ce-checkbox > input[type=checkbox]:disabled,
+ce-checkbox input[type=checkbox]:disabled {
+  cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+  opacity: var(--ce-checkbox-disabled-opacity, 0.5);
+  background-color: var(--ce-checkbox-disabled-bg, #f7fafc);
+}
+
+ce-checkbox > div > input[type=checkbox] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  border-width: var(--ce-checkbox-border-width, 2px);
+  border-style: var(--ce-checkbox-border-style, solid);
+  border-color: var(--ce-checkbox-border-color, #cbd5e0);
+  border-radius: var(--ce-checkbox-radius, 0.25rem);
+  background-color: var(--ce-checkbox-bg, white);
+  cursor: var(--ce-checkbox-cursor, pointer);
+  margin: 0;
+  padding: 0;
+  position: relative;
+  transition: all var(--ce-checkbox-transition, 0.2s) var(--ce-checkbox-transition-ease, ease);
+  box-sizing: border-box;
+}
+ce-checkbox > div > input[type=checkbox]:hover {
+  border-color: var(--ce-checkbox-hover-border, #3b82f6);
+}
+ce-checkbox > div > input[type=checkbox]:checked {
+  background-color: var(--ce-checkbox-checked-bg, #3b82f6);
+  border-color: var(--ce-checkbox-checked-border, #3b82f6);
+}
+ce-checkbox > div > input[type=checkbox]:checked::after {
+  content: "";
+  position: absolute;
+  left: var(--ce-checkbox-check-left, 0.3rem);
+  top: var(--ce-checkbox-check-top, 0.05rem);
+  width: var(--ce-checkbox-check-width, 0.35rem);
+  height: var(--ce-checkbox-check-height, 0.65rem);
+  border: solid var(--ce-checkbox-check-color, white);
+  border-width: 0 var(--ce-checkbox-check-stroke, 2px) var(--ce-checkbox-check-stroke, 2px) 0;
+  transform: rotate(45deg);
+}
+
+.radio {
+  display: var(--ce-radio-display, flex);
+  align-items: var(--ce-radio-align, center);
+  gap: var(--ce-radio-gap, 0.5rem);
+  cursor: var(--ce-radio-cursor, pointer);
+  font-size: var(--ce-radio-size, 1rem);
+}
+.radio input[type=radio] {
+  width: var(--ce-radio-input-size, 1rem);
+  height: var(--ce-radio-input-size, 1rem);
+  accent-color: var(--ce-radio-input-accent, #1a73e8);
+  cursor: var(--ce-radio-input-cursor, pointer);
+}
+.radio--disabled {
+  color: var(--ce-radio-disabled-color, #9aa0a6);
+  cursor: var(--ce-radio-disabled-cursor, not-allowed);
+}
+.radio--disabled input[type=radio] {
+  cursor: var(--ce-radio-disabled-input-cursor, not-allowed);
+}
+
+.toggle {
+  position: relative;
+  width: 2.5rem;
+  height: 1.4rem;
+}
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggle .slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #9aa0a6;
+  border-radius: 10px;
+  transition: 0.4s;
+  cursor: pointer;
+}
+.toggle .slider::before {
+  content: "";
+  position: absolute;
+  height: 1rem;
+  width: 1rem;
+  left: 4px;
+  bottom: 4px;
+  background-color: #ffffff;
+  transition: 0.4s;
+  border-radius: var(--ce-toggle-thumb-radius, var(--ce-radius-circle, 50%));
+}
+.toggle input:checked + .slider {
+  background-color: #1a73e8;
+}
+.toggle input:checked + .slider::before {
+  transform: translateX(1.1rem);
+}
+
+.range-slider {
+  width: 100%;
+  max-width: 300px;
+  margin: 1rem 0;
+}
+.range-slider input[type=range] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background: var(--theme-range-track, #f8f9fa);
+  border-radius: 4px;
+  outline: none;
+  transition: background 0.3s;
+}
+.range-slider input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  background: var(--theme-range-thumb, #1a73e8);
+  border: 2px solid var(--theme-range-thumb-border, #ffffff);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: background 0.3s;
+}
+.range-slider input[type=range]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  background: var(--theme-range-thumb, #1a73e8);
+  border: 2px solid var(--theme-range-thumb-border, #ffffff);
+  border-radius: 50%;
+  cursor: pointer;
+}
+.range-slider input[type=range]:hover::-webkit-slider-thumb {
+  background: var(--theme-range-thumb-hover, rgb(18.8928571429, 92, 188.1071428571));
+}
+.range-slider input[type=range]:hover::-webkit-slider-thumb:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+
+.file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  max-width: 400px;
+}
+.file-upload__label {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--theme-file-upload-label, #202124);
+  margin-bottom: 0.25rem;
+}
+.file-upload__input {
+  display: none;
+}
+.file-upload__dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  border: 2px dashed var(--theme-file-upload-border, #9aa0a6);
+  border-radius: 8px;
+  background-color: var(--theme-file-upload-bg, #f8f9fa);
+  color: var(--theme-file-upload-fg, #202124);
+  cursor: pointer;
+  transition: border-color 0.2s, background-color 0.2s;
+  text-align: center;
+}
+.file-upload__dropzone:hover, .file-upload__dropzone:focus-visible {
+  border-color: var(--theme-file-upload-hover, #1a73e8);
+  background-color: var(--theme-file-upload-hover-bg, #ffffff);
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+.file-upload__list {
+  margin-top: 0.5rem;
+  list-style: none;
+  padding: 0;
+  font-size: 0.95rem;
+  color: var(--theme-file-upload-list, #202124);
+}
+.file-upload__item {
+  margin-bottom: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.date-picker {
+  width: 100%;
+}
+.date-picker input[type=date],
+.date-picker input[type=datetime-local] {
+  padding: var(--ce-date-picker-padding, 0.5rem 1rem);
+  border-width: var(--ce-date-picker-border-width, 1px);
+  border-style: var(--ce-date-picker-border-style, solid);
+  border-color: var(--ce-date-picker-border-color, var(--theme-date-picker-border, #9aa0a6));
+  border-radius: var(--ce-date-picker-radius, 4px);
+  background-color: var(--ce-date-picker-bg, var(--theme-date-picker-bg, #ffffff));
+  color: var(--ce-date-picker-color, var(--theme-date-picker-fg, #202124));
+  width: var(--ce-date-picker-width, 100%);
+}
+.date-picker input[type=date]:focus,
+.date-picker input[type=datetime-local]:focus {
+  border-color: var(--ce-date-picker-focus-border, var(--theme-date-picker-focus, #1a73e8));
+  box-shadow: var(--ce-date-picker-focus-shadow, 0 0 0 3px rgba(26, 115, 232, 0.2));
+}
+.date-picker input[type=date]:focus-visible,
+.date-picker input[type=datetime-local]:focus-visible {
+  outline-width: var(--ce-date-picker-outline-width, 2px);
+  outline-style: var(--ce-date-picker-outline-style, solid);
+  outline-color: var(--ce-date-picker-outline-color, var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-date-picker-outline-offset, 2px);
+}
+
+.form-group {
+  margin-bottom: var(--ce-form-group-margin, 1.5rem);
+}
+.form-group label {
+  display: var(--ce-form-group-label-display, block);
+  margin-bottom: var(--ce-form-group-label-margin, 0.25rem);
+  font-weight: var(--ce-form-group-label-weight, bold);
+  color: var(--ce-form-group-label-color, #202124);
+}
+.form-group .form-description {
+  margin-top: var(--ce-form-group-desc-margin, 0.25rem);
+  font-size: var(--ce-form-group-desc-size, 0.875rem);
+  color: var(--ce-form-group-desc-color, #9aa0a6);
+}
+.form-group .form-error {
+  color: var(--ce-form-group-error-color, #ea4335);
+  font-size: var(--ce-form-group-error-size, 0.875rem);
+  margin-top: var(--ce-form-group-error-margin, 0.25rem);
+}
+
+.button,
+.ce-btn {
+  --ce-button-bg: var(--ce-component-button-background, var(--ce-color-primary, var(--theme-primary, #1a73e8)));
+  --ce-button-color: var(--ce-component-button-foreground, var(--ce-color-text, var(--theme-fg, #ffffff)));
+  --ce-button-border: var(--ce-component-button-border, var(--ce-color-primary, var(--theme-primary, #1a73e8)));
+  --ce-button-radius: var(--ce-component-button-radius, var(--ce-radius-md, 8px));
+  --ce-button-padding-y: var(--ce-component-button-padding-y, var(--ce-space-8, 0.5rem));
+  --ce-button-padding-x: var(--ce-component-button-padding-x, var(--ce-space-16, 1rem));
+  --ce-button-font-size: var(--ce-component-button-font-size, 1rem);
+  --ce-button-font-weight: var(--ce-component-button-font-weight, 500);
+  --ce-button-line-height: var(--ce-component-button-line-height, 1.2);
+  --ce-button-focus-ring: var(--ce-component-button-focus-ring, var(--ce-color-focus-ring, var(--theme-accent, #1a73e8)));
+  --ce-button-hover-bg: var(--ce-component-button-hover-background, var(--ce-button-bg));
+  background-color: var(--ce-button-bg);
+  color: var(--ce-button-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  font-size: var(--ce-button-font-size);
+  font-weight: var(--ce-button-font-weight);
+  line-height: var(--ce-button-line-height);
+  padding: var(--ce-button-padding-y) var(--ce-button-padding-x);
+  border-radius: var(--ce-button-radius);
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  border: 1px solid var(--ce-button-border);
+  outline: none;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  width: fit-content;
+  max-width: 100%;
+  min-width: auto;
+  white-space: nowrap;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.button:disabled,
+.ce-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  pointer-events: none;
+}
+.button--primary,
+.ce-btn--primary {
+  --ce-button-bg: var(--ce-button-primary-bg, var(--ce-color-primary, var(--theme-primary, #1a73e8)));
+  --ce-button-color: var(--ce-button-primary-color, var(--ce-color-text, var(--theme-fg, #ffffff)));
+  --ce-button-border: var(--ce-button-primary-border, var(--ce-button-bg));
+  --ce-button-hover-bg: var(--ce-button-primary-hover, var(--theme-primary-hover, rgb(20.2892857143, 98.8, 202.0107142857)));
+}
+.button--primary:hover:not(:disabled),
+.ce-btn--primary:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--secondary,
+.ce-btn--secondary {
+  --ce-button-bg: var(--ce-button-secondary-bg, #fbbc04);
+  --ce-button-color: var(--ce-button-secondary-color, #202124);
+  --ce-button-border: var(--ce-button-secondary-border, #fbbc04);
+  --ce-button-hover-bg: var(--ce-button-secondary-hover, rgb(215.86, 161.68, 3.44));
+}
+.button--secondary:hover:not(:disabled),
+.ce-btn--secondary:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--glass,
+.ce-btn--glass {
+  --ce-button-bg: var(--ce-button-glass-bg, rgba(255, 255, 255, 0.1));
+  --ce-button-border: var(--ce-button-glass-border, rgba(255, 255, 255, 0.2));
+  --ce-button-color: var(--ce-button-glass-color, var(--theme-fg, #ffffff));
+  background-color: var(--ce-button-bg);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--ce-button-border);
+  color: var(--ce-button-color);
+}
+.button--success,
+.ce-btn--success {
+  --ce-button-bg: var(--ce-button-success-bg, #34a853);
+  --ce-button-color: var(--ce-button-success-color, #ffffff);
+  --ce-button-border: var(--ce-button-success-border, #34a853);
+  --ce-button-hover-bg: var(--ce-button-success-hover, rgb(43.5618181818, 140.7381818182, 69.5313636364));
+}
+.button--success:hover:not(:disabled),
+.ce-btn--success:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--danger,
+.ce-btn--danger {
+  --ce-button-bg: var(--ce-button-danger-bg, #ea4335);
+  --ce-button-color: var(--ce-button-danger-color, #ffffff);
+  --ce-button-border: var(--ce-button-danger-border, #ea4335);
+  --ce-button-hover-bg: var(--ce-button-danger-hover, rgb(227.6349775785, 39.4417040359, 23.6650224215));
+}
+.button--danger:hover:not(:disabled),
+.ce-btn--danger:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--warning,
+.ce-btn--warning {
+  --ce-button-bg: var(--ce-button-warning-bg, #f9ab00);
+  --ce-button-color: var(--ce-button-warning-color, #000000);
+  --ce-button-border: var(--ce-button-warning-border, #f9ab00);
+  --ce-button-hover-bg: var(--ce-button-warning-hover, rgb(213.3, 146.4831325301, 0));
+}
+.button--warning:hover:not(:disabled),
+.ce-btn--warning:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--info,
+.ce-btn--info {
+  --ce-button-bg: var(--ce-button-info-bg, #4285f4);
+  --ce-button-color: var(--ce-button-info-color, #ffffff);
+  --ce-button-border: var(--ce-button-info-border, #4285f4);
+  --ce-button-hover-bg: var(--ce-button-info-hover, rgb(32.2635, 111.223, 242.0365));
+}
+.button--info:hover:not(:disabled),
+.ce-btn--info:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--light,
+.ce-btn--light {
+  --ce-button-bg: var(--ce-button-light-bg, #f8f9fa);
+  --ce-button-color: var(--ce-button-light-color, #202124);
+  --ce-button-border: var(--ce-button-light-border, #f8f9fa);
+  --ce-button-hover-bg: var(--ce-button-light-hover, rgb(218.25, 223.5, 228.75));
+}
+.button--light:hover:not(:disabled),
+.ce-btn--light:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--dark,
+.ce-btn--dark {
+  --ce-button-bg: var(--ce-button-dark-bg, #202124);
+  --ce-button-color: var(--ce-button-dark-color, #ffffff);
+  --ce-button-border: var(--ce-button-dark-border, #202124);
+  --ce-button-hover-bg: var(--ce-button-dark-hover, rgb(44, 45.375, 49.5));
+}
+.button--dark:hover:not(:disabled),
+.ce-btn--dark:hover:not(:disabled) {
+  background-color: var(--ce-button-hover-bg);
+}
+.button--outline,
+.ce-btn--outline {
+  background-color: transparent !important;
+  border: 1px solid currentColor;
+}
+.button--outline.ce-btn--primary, .button--outline.button--primary,
+.ce-btn--outline.ce-btn--primary,
+.ce-btn--outline.button--primary {
+  color: var(--ce-button-outline-primary-color, #1a73e8);
+  border-color: var(--ce-button-outline-primary-border, #1a73e8);
+}
+.button--outline.ce-btn--primary:hover:not(:disabled), .button--outline.button--primary:hover:not(:disabled),
+.ce-btn--outline.ce-btn--primary:hover:not(:disabled),
+.ce-btn--outline.button--primary:hover:not(:disabled) {
+  background-color: var(--ce-button-outline-primary-hover, rgba(26, 115, 232, 0.1)) !important;
+}
+.button--outline.ce-btn--secondary, .button--outline.button--secondary,
+.ce-btn--outline.ce-btn--secondary,
+.ce-btn--outline.button--secondary {
+  color: var(--ce-button-outline-secondary-color, #fbbc04);
+  border-color: var(--ce-button-outline-secondary-border, #fbbc04);
+}
+.button--outline.ce-btn--secondary:hover:not(:disabled), .button--outline.button--secondary:hover:not(:disabled),
+.ce-btn--outline.ce-btn--secondary:hover:not(:disabled),
+.ce-btn--outline.button--secondary:hover:not(:disabled) {
+  background-color: var(--ce-button-outline-secondary-hover, rgba(251, 188, 4, 0.1)) !important;
+}
+.button--outline.ce-btn--success, .button--outline.button--success,
+.ce-btn--outline.ce-btn--success,
+.ce-btn--outline.button--success {
+  color: var(--ce-button-outline-success-color, #34a853);
+  border-color: var(--ce-button-outline-success-border, #34a853);
+}
+.button--outline.ce-btn--success:hover:not(:disabled), .button--outline.button--success:hover:not(:disabled),
+.ce-btn--outline.ce-btn--success:hover:not(:disabled),
+.ce-btn--outline.button--success:hover:not(:disabled) {
+  background-color: var(--ce-button-outline-success-hover, rgba(52, 168, 83, 0.1)) !important;
+}
+.button--outline.ce-btn--danger, .button--outline.button--danger,
+.ce-btn--outline.ce-btn--danger,
+.ce-btn--outline.button--danger {
+  color: var(--ce-button-outline-danger-color, #ea4335);
+  border-color: var(--ce-button-outline-danger-border, #ea4335);
+}
+.button--outline.ce-btn--danger:hover:not(:disabled), .button--outline.button--danger:hover:not(:disabled),
+.ce-btn--outline.ce-btn--danger:hover:not(:disabled),
+.ce-btn--outline.button--danger:hover:not(:disabled) {
+  background-color: var(--ce-button-outline-danger-hover, rgba(234, 67, 53, 0.1)) !important;
+}
+.button--ghost,
+.ce-btn--ghost {
+  background-color: transparent !important;
+  border: none;
+}
+.button--ghost.ce-btn--primary, .button--ghost.button--primary,
+.ce-btn--ghost.ce-btn--primary,
+.ce-btn--ghost.button--primary {
+  color: var(--ce-button-ghost-primary-color, #1a73e8);
+}
+.button--ghost.ce-btn--primary:hover:not(:disabled), .button--ghost.button--primary:hover:not(:disabled),
+.ce-btn--ghost.ce-btn--primary:hover:not(:disabled),
+.ce-btn--ghost.button--primary:hover:not(:disabled) {
+  background-color: var(--ce-button-ghost-primary-hover, rgba(26, 115, 232, 0.05)) !important;
+}
+.button--ghost.ce-btn--secondary, .button--ghost.button--secondary,
+.ce-btn--ghost.ce-btn--secondary,
+.ce-btn--ghost.button--secondary {
+  color: var(--ce-button-ghost-secondary-color, #fbbc04);
+}
+.button--ghost.ce-btn--secondary:hover:not(:disabled), .button--ghost.button--secondary:hover:not(:disabled),
+.ce-btn--ghost.ce-btn--secondary:hover:not(:disabled),
+.ce-btn--ghost.button--secondary:hover:not(:disabled) {
+  background-color: var(--ce-button-ghost-secondary-hover, rgba(251, 188, 4, 0.05)) !important;
+}
+.button--ghost.ce-btn--success, .button--ghost.button--success,
+.ce-btn--ghost.ce-btn--success,
+.ce-btn--ghost.button--success {
+  color: var(--ce-button-ghost-success-color, #34a853);
+}
+.button--ghost.ce-btn--success:hover:not(:disabled), .button--ghost.button--success:hover:not(:disabled),
+.ce-btn--ghost.ce-btn--success:hover:not(:disabled),
+.ce-btn--ghost.button--success:hover:not(:disabled) {
+  background-color: var(--ce-button-ghost-success-hover, rgba(52, 168, 83, 0.05)) !important;
+}
+.button--ghost.ce-btn--danger, .button--ghost.button--danger,
+.ce-btn--ghost.ce-btn--danger,
+.ce-btn--ghost.button--danger {
+  color: var(--ce-button-ghost-danger-color, #ea4335);
+}
+.button--ghost.ce-btn--danger:hover:not(:disabled), .button--ghost.button--danger:hover:not(:disabled),
+.ce-btn--ghost.ce-btn--danger:hover:not(:disabled),
+.ce-btn--ghost.button--danger:hover:not(:disabled) {
+  background-color: var(--ce-button-ghost-danger-hover, rgba(234, 67, 53, 0.05)) !important;
+}
+.button--xs,
+.ce-btn--xs {
+  --ce-button-font-size: 0.75rem;
+  --ce-button-padding-y: var(--ce-space-4, 0.25rem);
+  --ce-button-padding-x: var(--ce-space-4, 0.25rem);
+  --ce-button-line-height: 1;
+}
+.button--sm,
+.ce-btn--sm {
+  --ce-button-font-size: 0.875rem;
+  --ce-button-padding-y: var(--ce-space-4, 0.25rem);
+  --ce-button-padding-x: var(--ce-space-8, 0.5rem);
+  --ce-button-line-height: 1;
+  letter-spacing: var(--ce-button-letter-spacing, -0.2px);
+}
+.button--lg,
+.ce-btn--lg {
+  --ce-button-font-size: 1.125rem;
+  --ce-button-padding-y: var(--ce-space-16, 1rem);
+  --ce-button-padding-x: var(--ce-space-24, 1.5rem);
+  --ce-button-line-height: 1.4;
+}
+.button--xl,
+.ce-btn--xl {
+  --ce-button-font-size: 1.25rem;
+  --ce-button-padding-y: var(--ce-space-24, 1.5rem);
+  --ce-button-padding-x: var(--ce-space-32, 2rem);
+  --ce-button-line-height: 1.5;
+}
+.button--xxl,
+.ce-btn--xxl {
+  --ce-button-font-size: 1.375rem;
+  --ce-button-padding-y: var(--ce-space-24, 1.5rem);
+  --ce-button-padding-x: var(--ce-space-48, 3rem);
+  --ce-button-line-height: 1.5;
+}
+.button--block, .button--full,
+.ce-btn--block,
+.ce-btn--full {
+  display: flex;
+  width: 100%;
+}
+.button--rounded,
+.ce-btn--rounded {
+  --ce-button-radius: var(--ce-radius-md, 8px);
+}
+.button--pill,
+.ce-btn--pill {
+  --ce-button-radius: var(--ce-radius-pill, 10px);
+}
+.button--circle, .button--square,
+.ce-btn--circle,
+.ce-btn--square {
+  --ce-button-padding-y: var(--ce-space-8, 0.5rem);
+  --ce-button-padding-x: var(--ce-space-8, 0.5rem);
+  --ce-button-radius: 50%;
+  width: var(--ce-button-square-size, 2.5rem);
+  height: var(--ce-button-square-size, 2.5rem);
+  justify-content: center;
+}
+.button--square,
+.ce-btn--square {
+  --ce-button-radius: var(--ce-radius-md, 8px);
+}
+.button:focus-visible,
+.ce-btn:focus-visible {
+  outline: 2px solid var(--ce-button-focus-ring);
+  outline-offset: 2px;
+}
+
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 50%;
+  background-color: #f8f9fa;
+  color: #1a73e8;
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+.icon-button:hover {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.icon-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.icon-button--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: 1rem;
+}
+.icon-button--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.button-group .button {
+  border-radius: 0;
+  margin: 0;
+}
+.button-group .button:not(:last-child) {
+  border-right: 1px solid #9aa0a6;
+}
+.button-group--vertical {
+  flex-direction: column;
+}
+.button-group--vertical .button:not(:last-child) {
+  border-right: none;
+  border-bottom: 1px solid #9aa0a6;
+}
+.button-group--rounded .button:first-child {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+.button-group--rounded .button:last-child {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.navbar {
+  display: var(--ce-navbar-display, flex);
+  align-items: var(--ce-navbar-align, center);
+  justify-content: var(--ce-navbar-justify, space-between);
+  padding: var(--ce-navbar-padding, 1rem 2rem);
+  background-color: var(--ce-navbar-bg, #1a73e8);
+  color: var(--ce-navbar-color, #ffffff);
+  z-index: var(--ce-navbar-z, 1020);
+}
+.navbar .navbar__brand {
+  font-weight: var(--ce-navbar-brand-weight, bold);
+  font-size: var(--ce-navbar-brand-size, 1.25rem);
+  color: var(--ce-navbar-brand-color, #ffffff);
+  text-decoration: var(--ce-navbar-brand-decoration, none);
+}
+.navbar .navbar__links {
+  display: var(--ce-navbar-links-display, flex);
+  gap: var(--ce-navbar-links-gap, 1rem);
+}
+.navbar .navbar__links a {
+  color: var(--ce-navbar-link-color, #ffffff);
+  text-decoration: var(--ce-navbar-link-decoration, none);
+  font-weight: var(--ce-navbar-link-weight, 500);
+}
+.navbar .navbar__links a:hover {
+  text-decoration: var(--ce-navbar-link-hover-decoration, underline);
+}
+.navbar .navbar__menu-toggle {
+  display: var(--ce-navbar-toggle-display, none);
+  background: var(--ce-navbar-toggle-bg, transparent);
+  border: var(--ce-navbar-toggle-border, none);
+  color: var(--ce-navbar-toggle-color, #ffffff);
+  font-size: var(--ce-navbar-toggle-size, 1.5rem);
+}
+@media (min-width: 576px) {
+  .navbar .navbar__menu-toggle {
+    display: var(--ce-navbar-toggle-desktop-display, none);
+  }
+}
+@media (min-width: 576px) {
+  .navbar .navbar__links {
+    display: var(--ce-navbar-links-desktop-display, flex);
+  }
+}
+@media (max-width: 767px) {
+  .navbar {
+    flex-direction: var(--ce-navbar-mobile-direction, column);
+    align-items: var(--ce-navbar-mobile-align, flex-start);
+  }
+  .navbar .navbar__links {
+    display: var(--ce-navbar-mobile-links-display, none);
+    flex-direction: var(--ce-navbar-mobile-links-direction, column);
+    width: var(--ce-navbar-mobile-links-width, 100%);
+  }
+  .navbar .navbar__links.open {
+    display: var(--ce-navbar-mobile-links-open-display, flex);
+  }
+  .navbar .navbar__links a {
+    padding: var(--ce-navbar-mobile-link-padding, 0.5rem 0);
+    border-bottom-width: var(--ce-navbar-mobile-link-border-width, 1px);
+    border-bottom-style: var(--ce-navbar-mobile-link-border-style, solid);
+    border-bottom-color: var(--ce-navbar-mobile-link-border, rgba(255, 255, 255, 0.2));
+  }
+}
+
+.sidebar {
+  width: 250px;
+  background-color: #202124;
+  color: #ffffff;
+  height: 100vh;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.sidebar .sidebar__header {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 2rem;
+}
+.sidebar .sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.sidebar .sidebar__nav a {
+  color: #ffffff;
+  text-decoration: none;
+  padding: 0.5rem;
+  border-radius: 4px;
+}
+.sidebar .sidebar__nav a:hover {
+  background-color: #1a73e8;
+}
+.sidebar .sidebar__nav a.active {
+  background-color: #1a73e8;
+  font-weight: bold;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: var(--ce-breadcrumbs-gap, var(--ce-spacing-sm, 0.5rem));
+  font-size: 0.95rem;
+  color: var(--theme-breadcrumbs-fg, #9aa0a6);
+  padding: 0.25rem 0;
+  list-style: none;
+}
+.breadcrumbs__item {
+  display: flex;
+  align-items: center;
+  color: var(--theme-breadcrumbs-item, #202124);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+.breadcrumbs__item:hover, .breadcrumbs__item:focus-visible {
+  color: var(--theme-breadcrumbs-hover, #1a73e8);
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+.breadcrumbs__item.active {
+  color: var(--theme-breadcrumbs-active, #1a73e8);
+  font-weight: 600;
+  cursor: default;
+}
+.breadcrumbs__separator {
+  color: var(--theme-breadcrumbs-separator, #9aa0a6);
+  margin: var(--ce-breadcrumbs-separator-margin, 0 0.25rem);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.tabs {
+  display: var(--ce-tabs-display, flex);
+  border-bottom: var(--ce-tabs-border, 2px solid var(--theme-tabs-border, #9aa0a6));
+  overflow-x: var(--ce-tabs-overflow, auto);
+  gap: var(--ce-tabs-gap, 1rem);
+}
+.tabs .tab {
+  padding: var(--ce-tabs-tab-padding, 0.5rem 1rem);
+  cursor: var(--ce-tabs-tab-cursor, pointer);
+  font-weight: var(--ce-tabs-tab-weight, 500);
+  border-bottom: var(--ce-tabs-tab-underline, 2px solid transparent);
+  color: var(--ce-tabs-tab-color, var(--theme-tabs-fg, #202124));
+  transition: var(--ce-tabs-tab-transition, border-color 0.2s);
+}
+.tabs .tab.active {
+  border-color: var(--ce-tabs-tab-active-border, var(--theme-tabs-active-border, #1a73e8));
+  color: var(--ce-tabs-tab-active-color, var(--theme-tabs-active-fg, #1a73e8));
+}
+.tabs .tab:hover {
+  border-color: var(--ce-tabs-tab-hover-border, var(--theme-tabs-hover-border, #1a73e8));
+}
+.tabs .tab:hover:focus-visible {
+  outline: var(--ce-tabs-tab-focus-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-tabs-tab-focus-offset, 2px);
+}
+
+.menu {
+  display: var(--ce-menu-display, flex);
+  flex-direction: var(--ce-menu-direction, column);
+  min-width: var(--ce-menu-min-width, 180px);
+  background-color: var(--ce-menu-bg, var(--theme-menu-bg, #ffffff));
+  color: var(--ce-menu-color, var(--theme-menu-fg, #202124));
+  border-radius: var(--ce-menu-radius, 8px);
+  box-shadow: var(--ce-menu-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
+  border-width: var(--ce-menu-border-width, 1px);
+  border-style: var(--ce-menu-border-style, solid);
+  border-color: var(--ce-menu-border, var(--theme-menu-border, #9aa0a6));
+  padding: var(--ce-menu-padding, 0.25rem 0);
+  font-size: var(--ce-menu-size, 1rem);
+  z-index: var(--ce-menu-z, );
+}
+.menu__item {
+  display: var(--ce-menu-item-display, flex);
+  align-items: var(--ce-menu-item-align, center);
+  padding: var(--ce-menu-item-padding, 0.25rem 1rem);
+  cursor: var(--ce-menu-item-cursor, pointer);
+  color: var(--ce-menu-item-color, var(--theme-menu-item-fg, #202124));
+  background: var(--ce-menu-item-bg, none);
+  border: var(--ce-menu-item-border, none);
+  font-size: var(--ce-menu-item-size, inherit);
+  transition: var(--ce-menu-item-transition, background-color 0.2s, color 0.2s);
+  outline: var(--ce-menu-item-outline, none);
+}
+.menu__item:hover, .menu__item:focus-visible {
+  background-color: var(--ce-menu-item-hover-bg, var(--theme-menu-item-hover, #1a73e8));
+  color: var(--ce-menu-item-hover-color, var(--theme-menu-item-hover-fg, #ffffff));
+  outline: var(--ce-menu-item-focus-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-menu-item-focus-offset, 2px);
+}
+.menu__item.active {
+  background-color: var(--ce-menu-item-active-bg, var(--theme-menu-item-active, #1a73e8));
+  color: var(--ce-menu-item-active-color, var(--theme-menu-item-active-fg, #ffffff));
+}
+.menu__divider {
+  height: var(--ce-menu-divider-height, 1px);
+  background-color: var(--ce-menu-divider-bg, var(--theme-menu-divider, #9aa0a6));
+  margin: var(--ce-menu-divider-margin, 0.25rem 0);
+  border: var(--ce-menu-divider-border, none);
+}
+
+.pagination {
+  display: var(--ce-pagination-display, flex);
+  align-items: var(--ce-pagination-align, center);
+  gap: var(--ce-pagination-gap, 0.5rem);
+  list-style: var(--ce-pagination-list-style, none);
+  padding: var(--ce-pagination-padding, 0);
+  margin: var(--ce-pagination-margin, 1rem 0);
+}
+.pagination__item {
+  display: var(--ce-pagination-item-display, inline-flex);
+  align-items: var(--ce-pagination-item-align, center);
+  justify-content: var(--ce-pagination-item-justify, center);
+  min-width: var(--ce-pagination-item-min-width, 2rem);
+  height: var(--ce-pagination-item-height, 2rem);
+  border-radius: var(--ce-pagination-item-radius, 4px);
+  background-color: var(--ce-pagination-item-bg, var(--theme-pagination-bg, #f8f9fa));
+  color: var(--ce-pagination-item-fg, var(--theme-pagination-fg, #202124));
+  font-size: var(--ce-pagination-item-size, 1rem);
+  font-weight: var(--ce-pagination-item-weight, 500);
+  cursor: var(--ce-pagination-item-cursor, pointer);
+  transition: var(--ce-pagination-item-transition, background-color 0.2s, color 0.2s);
+  border: var(--ce-pagination-item-border, 1px solid var(--theme-pagination-border, #9aa0a6));
+}
+.pagination__item.active {
+  background-color: var(--ce-pagination-item-active-bg, var(--theme-pagination-active-bg, #1a73e8));
+  color: var(--ce-pagination-item-active-fg, var(--theme-pagination-active-fg, #ffffff));
+  border-color: var(--ce-pagination-item-active-border, var(--theme-pagination-active-border, #1a73e8));
+}
+.pagination__item:hover {
+  background-color: var(--ce-pagination-item-hover-bg, var(--theme-pagination-hover-bg, #1a73e8));
+  color: var(--ce-pagination-item-hover-fg, var(--theme-pagination-hover-fg, #ffffff));
+}
+.pagination__item:focus-visible {
+  outline: var(--ce-pagination-item-focus-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-pagination-item-focus-offset, 2px);
+}
+.pagination__ellipsis {
+  min-width: var(--ce-pagination-ellipsis-min-width, 2rem);
+  height: var(--ce-pagination-ellipsis-height, 2rem);
+  display: var(--ce-pagination-ellipsis-display, flex);
+  align-items: var(--ce-pagination-ellipsis-align, center);
+  justify-content: var(--ce-pagination-ellipsis-justify, center);
+  color: var(--ce-pagination-ellipsis-color, var(--theme-pagination-ellipsis, #9aa0a6));
+  font-size: var(--ce-pagination-ellipsis-size, 1rem);
+}
+
+.card,
+.ce-card {
+  background-color: var(--ce-card-bg, var(--theme-bg, #ffffff));
+  border-width: var(--ce-card-border-width, 1px);
+  border-style: var(--ce-card-border-style, solid);
+  border-color: var(--ce-card-border-color, var(--theme-border, #9aa0a6));
+  border-radius: var(--ce-card-radius, 8px);
+  gap: var(--ce-card-gap, 1rem);
+  box-shadow: var(--ce-card-shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
+  padding: var(--ce-card-padding, 1.5rem);
+  transition: box-shadow var(--ce-card-transition-shadow, 0.2s);
+  display: flex;
+  flex-direction: column;
+  color: var(--ce-card-color, inherit);
+}
+.card:hover,
+.ce-card:hover {
+  box-shadow: var(--ce-card-hover-shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
+}
+.card__header,
+.ce-card__header {
+  font-weight: var(--ce-card-header-weight, 600);
+  font-size: var(--ce-card-header-size, 1.125rem);
+  margin-bottom: var(--ce-card-header-margin-bottom, 1rem);
+  color: var(--ce-card-header-color, inherit);
+}
+.card__body,
+.ce-card__body {
+  flex: 1;
+  color: var(--ce-card-body-color, inherit);
+}
+.card__footer,
+.ce-card__footer {
+  margin-top: var(--ce-card-footer-margin-top, 1rem);
+  text-align: var(--ce-card-footer-align, right);
+  color: var(--ce-card-footer-color, inherit);
+}
+.card--hover,
+.ce-card--hover {
+  cursor: var(--ce-card-hover-cursor, pointer);
+}
+.card--hover:hover,
+.ce-card--hover:hover {
+  box-shadow: var(--ce-card-hover-shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
+}
+.card--hover:focus-visible,
+.ce-card--hover:focus-visible {
+  outline-width: var(--ce-card-focus-outline-width, 2px);
+  outline-style: var(--ce-card-focus-outline-style, solid);
+  outline-color: var(--ce-card-focus-outline-color, var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-card-focus-outline-offset, 2px);
+}
+.card--borderless,
+.ce-card--borderless {
+  --ce-card-border-width: 0;
+}
+.card--elevated,
+.ce-card--elevated {
+  --ce-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--theme-modal-overlay, rgba(0, 0, 0, 0.4));
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  padding: 1.5rem;
+}
+.modal.hidden {
+  display: none !important;
+}
+.modal__content {
+  background-color: var(--theme-modal-bg, rgba(255, 255, 255, 0.06));
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  border-radius: 8px;
+  width: 100%;
+  max-width: 600px;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  animation: fade-in 0.3s ease-in-out;
+  color: var(--theme-modal-fg, #ffffff);
+}
+.modal__header {
+  padding: 1rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  border-bottom: 1px solid var(--theme-modal-border, #9aa0a6);
+}
+.modal__body {
+  padding: 1.5rem;
+}
+.modal__footer {
+  padding: 1rem;
+  text-align: right;
+  border-top: 1px solid var(--theme-modal-border, #9aa0a6);
+}
+.modal__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #9aa0a6;
+  cursor: pointer;
+}
+.modal__close:hover {
+  color: #ea4335;
+}
+.modal__close:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+.modal .hidden {
+  display: none !important;
+}
+
+.drawer {
+  position: fixed;
+  top: var(--ce-drawer-top, 0);
+  right: var(--ce-drawer-right, 0);
+  width: var(--ce-drawer-width, 300px);
+  max-width: var(--ce-drawer-max-width, 100%);
+  height: var(--ce-drawer-height, 100vh);
+  background-color: var(--ce-drawer-bg, #ffffff);
+  box-shadow: var(--ce-drawer-shadow, 0 10px 15px rgba(0, 0, 0, 0.15));
+  z-index: var(--ce-drawer-z, 1050);
+  display: flex;
+  flex-direction: column;
+  animation: var(--ce-drawer-animation, slide-in) var(--ce-drawer-animation-duration, 0.3s) var(--ce-drawer-animation-ease, ease-in-out);
+}
+.drawer__header {
+  padding: var(--ce-drawer-header-padding, 1rem);
+  font-weight: var(--ce-drawer-header-weight, 600);
+  border-bottom-width: var(--ce-drawer-header-border-width, 1px);
+  border-bottom-style: var(--ce-drawer-header-border-style, solid);
+  border-bottom-color: var(--ce-drawer-header-border-color, #9aa0a6);
+}
+.drawer__body {
+  flex: 1;
+  overflow-y: var(--ce-drawer-body-overflow, auto);
+  padding: var(--ce-drawer-body-padding, 1.5rem);
+}
+.drawer__footer {
+  padding: var(--ce-drawer-footer-padding, 1rem);
+  border-top-width: var(--ce-drawer-footer-border-width, 1px);
+  border-top-style: var(--ce-drawer-footer-border-style, solid);
+  border-top-color: var(--ce-drawer-footer-border-color, #9aa0a6);
+  text-align: var(--ce-drawer-footer-align, right);
+}
+
+.accordion,
+.ce-accordion {
+  border: 1px solid var(--theme-accordion-border, #9aa0a6);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.accordion__item,
+.ce-accordion__item {
+  border-bottom: 1px solid var(--theme-accordion-border, #9aa0a6);
+}
+.accordion__item:last-child,
+.ce-accordion__item:last-child {
+  border-bottom: none;
+}
+.accordion__header,
+.ce-accordion__header {
+  padding: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  background-color: var(--theme-accordion-header-bg, #f8f9fa);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color 0.2s ease;
+}
+.accordion__header:hover,
+.ce-accordion__header:hover {
+  background-color: var(--theme-accordion-header-hover, rgba(0, 0, 0, 0.05));
+}
+.accordion__header:focus-visible,
+.ce-accordion__header:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+.accordion__header::after,
+.ce-accordion__header::after {
+  content: "▼";
+  font-size: 0.75rem;
+  transition: transform 0.2s ease;
+}
+.accordion__item.is-open .accordion__header::after,
+.accordion__item.is-open .ce-accordion__header::after,
+.ce-accordion__item.is-open .accordion__header::after,
+.ce-accordion__item.is-open .ce-accordion__header::after {
+  transform: rotate(180deg);
+}
+.accordion__content, .accordion__body,
+.ce-accordion__content,
+.ce-accordion__body {
+  padding: 0 1rem 1rem 1rem;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
+}
+.accordion__content.is-open, .accordion__content.open, .accordion__body.is-open, .accordion__body.open,
+.ce-accordion__content.is-open,
+.ce-accordion__content.open,
+.ce-accordion__body.is-open,
+.ce-accordion__body.open {
+  max-height: 1000px;
+  opacity: 1;
+  padding-top: 0.5rem;
+}
+
+.panel {
+  padding: 1.5rem;
+  border-left: 4px solid #1a73e8;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  margin-bottom: 1.5rem;
+}
+.panel--info {
+  border-color: #4285f4;
+}
+.panel--success {
+  border-color: #34a853;
+}
+.panel--warning {
+  border-color: #f9ab00;
+}
+.panel--danger {
+  border-color: #ea4335;
+}
+.panel__title {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+.panel__content {
+  font-size: 0.95rem;
+}
+
+.toast {
+  position: var(--ce-toast-position, fixed);
+  bottom: var(--ce-toast-bottom, 1.5rem);
+  right: var(--ce-toast-right, 1.5rem);
+  background-color: var(--ce-toast-bg, #202124);
+  color: var(--ce-toast-color, #ffffff);
+  padding: var(--ce-toast-padding, 1rem);
+  border-radius: var(--ce-toast-radius, 8px);
+  box-shadow: var(--ce-toast-shadow, 0 10px 15px rgba(0, 0, 0, 0.15));
+  z-index: var(--ce-toast-z, 1080);
+  animation: var(--ce-toast-animation, fade-in 0.3s ease-in-out);
+  min-width: var(--ce-toast-min-width, 250px);
+}
+.toast--success {
+  background-color: var(--ce-toast-success-bg, #34a853);
+}
+.toast--error {
+  background-color: var(--ce-toast-error-bg, #ea4335);
+}
+.toast--info {
+  background-color: var(--ce-toast-info-bg, #4285f4);
+}
+.toast__message {
+  font-size: var(--ce-toast-message-size, 0.95rem);
+}
+.toast__close {
+  position: var(--ce-toast-close-position, absolute);
+  top: var(--ce-toast-close-top, 0.25rem);
+  right: var(--ce-toast-close-right, 0.25rem);
+  background: var(--ce-toast-close-bg, none);
+  border: var(--ce-toast-close-border, none);
+  color: var(--ce-toast-close-color, #ffffff);
+  font-size: var(--ce-toast-close-size, 1.25rem);
+  cursor: var(--ce-toast-close-cursor, pointer);
+}
+.toast__close:hover {
+  opacity: var(--ce-toast-close-hover-opacity, 0.7);
+}
+
+.tooltip {
+  position: var(--ce-tooltip-position, relative);
+  cursor: var(--ce-tooltip-cursor, help);
+}
+.tooltip__content {
+  position: var(--ce-tooltip-content-position, absolute);
+  bottom: var(--ce-tooltip-content-bottom, 100%);
+  left: var(--ce-tooltip-content-left, 50%);
+  transform: var(--ce-tooltip-content-transform, translateX(-50%) translateY(0.25rem));
+  background-color: var(--ce-tooltip-content-bg, var(--theme-tooltip-bg, #202124));
+  color: var(--ce-tooltip-content-color, var(--theme-tooltip-fg, #ffffff));
+  padding: var(--ce-tooltip-content-padding, 0.25rem 0.5rem);
+  font-size: var(--ce-tooltip-content-size, 0.75rem);
+  white-space: var(--ce-tooltip-content-whitespace, nowrap);
+  border-radius: var(--ce-tooltip-content-radius, 4px);
+  opacity: var(--ce-tooltip-content-opacity, 0);
+  pointer-events: var(--ce-tooltip-content-pointer, none);
+  transition: var(--ce-tooltip-content-transition, opacity 0.2s);
+  z-index: var(--ce-tooltip-content-z, 1090);
+}
+.tooltip__content::after {
+  content: var(--ce-tooltip-arrow-content, "");
+  position: var(--ce-tooltip-arrow-position, absolute);
+  top: var(--ce-tooltip-arrow-top, 100%);
+  left: var(--ce-tooltip-arrow-left, 50%);
+  margin-left: var(--ce-tooltip-arrow-offset, -6px);
+  border-width: var(--ce-tooltip-arrow-size, 6px);
+  border-style: var(--ce-tooltip-arrow-style, solid);
+  border-color: var(--ce-tooltip-arrow-color, var(--theme-tooltip-bg, #202124) transparent transparent transparent);
+}
+.tooltip__content::after:focus-visible {
+  outline: var(--ce-tooltip-focus-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-tooltip-focus-offset, 2px);
+}
+.tooltip:hover .tooltip__content, .tooltip:focus-within .tooltip__content {
+  opacity: var(--ce-tooltip-content-visible-opacity, 1);
+}
+
+.popover {
+  position: absolute;
+  min-width: 200px;
+  max-width: 320px;
+  background-color: var(--theme-popover-bg, #ffffff);
+  color: var(--theme-popover-fg, #202124);
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--theme-popover-border, #9aa0a6);
+  z-index: 1060;
+  padding: 1rem;
+  font-size: 1rem;
+  transition: opacity 0.2s, transform 0.2s;
+  opacity: 0;
+  pointer-events: none;
+}
+.popover__trigger {
+  cursor: pointer;
+}
+.popover__content {
+  position: static;
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  min-width: unset;
+  z-index: auto;
+  display: contents;
+}
+.popover__content.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.popover__content__arrow {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  background: var(--theme-popover-bg, #ffffff);
+  border: 1px solid var(--theme-popover-border, #9aa0a6);
+  transform: rotate(45deg);
+  z-index: -1;
+}
+.popover__content:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+.popover--right .popover__content {
+  left: auto;
+  right: 0;
+}
+.popover--top .popover__content {
+  top: auto;
+  bottom: calc(100% + 0.25rem);
+}
+
+.dropdown,
+.ce-dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown__trigger, .dropdown__toggle,
+.ce-dropdown__trigger,
+.ce-dropdown__toggle {
+  cursor: var(--ce-dropdown-trigger-cursor, pointer);
+  padding: var(--ce-dropdown-trigger-padding, 0.5rem 1rem);
+  border-width: var(--ce-dropdown-trigger-border-width, 1px);
+  border-style: var(--ce-dropdown-trigger-border-style, solid);
+  border-color: var(--ce-dropdown-trigger-border-color, var(--theme-dropdown-trigger-border, #9aa0a6));
+  border-radius: var(--ce-dropdown-trigger-radius, 4px);
+  background-color: var(--ce-dropdown-trigger-bg, var(--theme-dropdown-trigger-bg, #ffffff));
+  color: var(--ce-dropdown-trigger-color, var(--theme-dropdown-trigger-fg, #202124));
+}
+.dropdown__menu,
+.ce-dropdown__menu {
+  position: absolute;
+  top: var(--ce-dropdown-menu-top, calc(100% + 0.25rem));
+  left: var(--ce-dropdown-menu-left, 0);
+  right: var(--ce-dropdown-menu-right, auto);
+  background-color: var(--ce-dropdown-menu-bg, var(--theme-dropdown-bg, #ffffff));
+  border-width: var(--ce-dropdown-menu-border-width, 1px);
+  border-style: var(--ce-dropdown-menu-border-style, solid);
+  border-color: var(--ce-dropdown-menu-border-color, var(--theme-dropdown-border, #9aa0a6));
+  border-radius: var(--ce-dropdown-menu-radius, 4px);
+  box-shadow: var(--ce-dropdown-menu-shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
+  min-width: var(--ce-dropdown-menu-min-width, 160px);
+  max-height: var(--ce-dropdown-menu-max-height, 300px);
+  overflow-y: var(--ce-dropdown-menu-overflow, auto);
+  z-index: var(--ce-dropdown-menu-z, 1000);
+  display: block;
+  opacity: var(--ce-dropdown-menu-opacity, 0);
+  visibility: var(--ce-dropdown-menu-visibility, hidden);
+  pointer-events: var(--ce-dropdown-menu-events, none);
+  transform: var(--ce-dropdown-menu-transform, translateY(-0.5rem));
+  transition: opacity var(--ce-dropdown-menu-transition, 0.2s) var(--ce-dropdown-menu-transition-ease, ease), visibility var(--ce-dropdown-menu-transition, 0.2s) var(--ce-dropdown-menu-transition-ease, ease), transform var(--ce-dropdown-menu-transition, 0.2s) var(--ce-dropdown-menu-transition-ease, ease);
+}
+.dropdown__menu.is-visible, .dropdown__menu.open, .dropdown--open .dropdown__menu, .ce-dropdown--open .dropdown__menu, .dropdown__toggle[aria-expanded=true] ~ .dropdown__menu, .ce-dropdown__toggle[aria-expanded=true] ~ .dropdown__menu, .dropdown__trigger[aria-expanded=true] ~ .dropdown__menu, .ce-dropdown__trigger[aria-expanded=true] ~ .dropdown__menu, .dropdown:focus-within .dropdown__menu, .ce-dropdown:focus-within .dropdown__menu, .dropdown:hover .dropdown__menu, .ce-dropdown:hover .dropdown__menu,
+.ce-dropdown__menu.is-visible,
+.ce-dropdown__menu.open,
+.dropdown--open .ce-dropdown__menu,
+.ce-dropdown--open .ce-dropdown__menu,
+.dropdown__toggle[aria-expanded=true] ~ .ce-dropdown__menu,
+.ce-dropdown__toggle[aria-expanded=true] ~ .ce-dropdown__menu,
+.dropdown__trigger[aria-expanded=true] ~ .ce-dropdown__menu,
+.ce-dropdown__trigger[aria-expanded=true] ~ .ce-dropdown__menu,
+.dropdown:focus-within .ce-dropdown__menu,
+.ce-dropdown:focus-within .ce-dropdown__menu,
+.dropdown:hover .ce-dropdown__menu,
+.ce-dropdown:hover .ce-dropdown__menu {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+  display: block !important;
+}
+.dropdown__menu a,
+.ce-dropdown__menu a {
+  display: block;
+  padding: var(--ce-dropdown-item-padding, 0.5rem 1rem);
+  color: var(--ce-dropdown-item-color, var(--theme-dropdown-item-fg, #202124));
+  text-decoration: none;
+}
+.dropdown__menu a:hover,
+.ce-dropdown__menu a:hover {
+  background-color: var(--ce-dropdown-item-hover-bg, var(--theme-dropdown-item-hover, #f8f9fa));
+}
+.dropdown__menu a:hover:focus-visible,
+.ce-dropdown__menu a:hover:focus-visible {
+  outline-width: var(--ce-dropdown-item-outline-width, 2px);
+  outline-style: var(--ce-dropdown-item-outline-style, solid);
+  outline-color: var(--ce-dropdown-item-outline-color, var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-dropdown-item-outline-offset, 2px);
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1050;
+}
+
+.loader,
+.ce-loader {
+  width: var(--ce-loader-size, 2rem);
+  height: var(--ce-loader-size, 2rem);
+  border-width: var(--ce-loader-border-width, 3px);
+  border-style: var(--ce-loader-border-style, solid);
+  border-color: var(--ce-loader-border-color, #f8f9fa);
+  border-top-color: var(--ce-loader-border-top-color, #1a73e8);
+  border-radius: var(--ce-loader-radius, 50%);
+  animation: var(--ce-loader-spin, spin 0.75s linear infinite);
+  margin: var(--ce-loader-margin, auto);
+}
+.loader--sm,
+.ce-loader--sm {
+  width: var(--ce-loader-sm-size, 1.5rem);
+  height: var(--ce-loader-sm-size, 1.5rem);
+}
+.loader--lg,
+.ce-loader--lg {
+  width: var(--ce-loader-lg-size, 3rem);
+  height: var(--ce-loader-lg-size, 3rem);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.table {
+  width: var(--ce-table-width, 100%);
+  border-collapse: var(--ce-table-collapse, collapse);
+  font-size: var(--ce-table-size, 0.95rem);
+  background-color: var(--ce-table-bg, var(--theme-table-bg, #ffffff));
+}
+.table thead {
+  background-color: var(--ce-table-thead-bg, var(--theme-table-thead-bg, #f8f9fa));
+  border-bottom: var(--ce-table-thead-border, 2px solid var(--theme-table-border, #9aa0a6));
+}
+.table th,
+.table td {
+  padding: var(--ce-table-cell-padding, 0.5rem 1rem);
+  text-align: var(--ce-table-cell-align, left);
+  border-bottom: var(--ce-table-cell-border, 1px solid var(--theme-table-border, #9aa0a6));
+}
+.table th:focus-visible,
+.table td:focus-visible {
+  outline: var(--ce-table-cell-focus-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-table-cell-focus-offset, 2px);
+}
+.table th {
+  font-weight: var(--ce-table-th-weight, 600);
+  color: var(--ce-table-th-color, var(--theme-table-th-fg, #202124));
+}
+.table tbody tr:hover {
+  background-color: var(--ce-table-row-hover, var(--theme-table-row-hover, rgba(26, 115, 232, 0.05)));
+}
+.table--striped tbody tr:nth-child(odd) {
+  background-color: var(--ce-table-row-striped, var(--theme-table-row-striped, #f8f9fa));
+}
+.table--bordered, .table--bordered th, .table--bordered td {
+  border: var(--ce-table-bordered, 1px solid var(--theme-table-border, #9aa0a6));
+}
+.table--responsive {
+  display: var(--ce-table-responsive-display, block);
+  width: var(--ce-table-responsive-width, 100%);
+  overflow-x: var(--ce-table-responsive-overflow, auto);
+  white-space: var(--ce-table-responsive-nowrap, nowrap);
+}
+
+.data-table {
+  position: relative;
+}
+.data-table .data-table__toolbar {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+.data-table .data-table__toolbar .search-input {
+  max-width: 300px;
+}
+.data-table .data-table__sort {
+  cursor: pointer;
+}
+.data-table .data-table__sort::after {
+  content: " ⇅";
+  font-size: 0.8rem;
+  color: #9aa0a6;
+}
+.data-table .data-table__sort.asc::after {
+  content: " ↑";
+}
+.data-table .data-table__sort.desc::after {
+  content: " ↓";
+}
+.data-table .data-table__status {
+  font-size: 0.875rem;
+  padding: 0.25rem;
+  border-radius: 4px;
+  background-color: #f8f9fa;
+  color: #202124;
+}
+.data-table .data-table__status--active {
+  background-color: #34a853;
+  color: #ffffff;
+}
+.data-table .data-table__status--inactive {
+  background-color: #9aa0a6;
+}
+.data-table .data-table__status--error {
+  background-color: #ea4335;
+  color: #ffffff;
+}
+.data-table .data-table__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.list {
+  margin: 0;
+  padding-left: 1.5rem;
+  color: #202124;
+  line-height: 1.6;
+}
+.list--inline {
+  display: flex;
+  gap: 1rem;
+  list-style: none;
+  padding-left: 0;
+}
+.list--unstyled {
+  list-style: none;
+  padding-left: 0;
+}
+.list--bulleted {
+  list-style-type: disc;
+}
+.list--numbered {
+  list-style-type: decimal;
+}
+
+.tree-view {
+  list-style: none;
+  padding-left: 1rem;
+}
+.tree-view .tree-node {
+  margin-bottom: 0.25rem;
+  position: relative;
+}
+.tree-view .tree-node__label {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+.tree-view .tree-node__label:hover {
+  background-color: #f8f9fa;
+}
+.tree-view .tree-node__label.expanded::before {
+  content: "▼";
+  font-size: 0.75rem;
+  color: #9aa0a6;
+}
+.tree-view .tree-node__label::before {
+  content: "▶";
+  font-size: 0.75rem;
+  color: #9aa0a6;
+}
+.tree-view .tree-node .tree-children {
+  display: none;
+  padding-left: 1rem;
+}
+.tree-view .tree-node.expanded .tree-children {
+  display: block;
+}
+
+.avatar,
+.ce-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ce-avatar-size, 2.5rem);
+  height: var(--ce-avatar-size, 2.5rem);
+  border-radius: var(--ce-avatar-radius, 50%);
+  background-color: var(--ce-avatar-bg, var(--theme-avatar-bg, #9aa0a6));
+  color: var(--ce-avatar-color, var(--theme-avatar-fg, #ffffff));
+  font-size: var(--ce-avatar-font-size, 1.25rem);
+  font-weight: var(--ce-avatar-weight, 600);
+  overflow: hidden;
+  position: relative;
+  border-width: var(--ce-avatar-border-width, 0);
+  border-style: var(--ce-avatar-border-style, solid);
+  border-color: var(--ce-avatar-border-color, transparent);
+  box-shadow: var(--ce-avatar-shadow, none);
+}
+.avatar__img,
+.ce-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: var(--ce-avatar-image-fit, cover);
+  border-radius: inherit;
+  display: block;
+}
+.avatar__status,
+.ce-avatar__status {
+  position: absolute;
+  bottom: var(--ce-avatar-status-offset, 0.15rem);
+  right: var(--ce-avatar-status-offset, 0.15rem);
+  width: var(--ce-avatar-status-size, 0.7rem);
+  height: var(--ce-avatar-status-size, 0.7rem);
+  border-radius: var(--ce-avatar-status-radius, 50%);
+  background-color: var(--ce-avatar-status-bg, var(--theme-avatar-status, #34a853));
+  border-width: var(--ce-avatar-status-border-width, 2px);
+  border-style: var(--ce-avatar-status-border-style, solid);
+  border-color: var(--ce-avatar-status-border-color, var(--theme-avatar-bg, #9aa0a6));
+}
+.avatar--sm,
+.ce-avatar--sm {
+  --ce-avatar-size: 1.5rem;
+  --ce-avatar-font-size: 0.75rem;
+}
+.avatar--lg,
+.ce-avatar--lg {
+  --ce-avatar-size: 4rem;
+  --ce-avatar-font-size: 2rem;
+}
+.avatar--square,
+.ce-avatar--square {
+  --ce-avatar-radius: 8px;
+}
+
+.badge,
+.ce-badge {
+  display: inline-block;
+  padding: var(--ce-badge-padding, 0.25em 0.6em);
+  font-size: var(--ce-badge-size, 0.75rem);
+  border-radius: var(--ce-badge-radius, 10px);
+  font-weight: var(--ce-badge-weight, 600);
+  background-color: var(--ce-badge-bg, var(--theme-badge-bg, #9aa0a6));
+  color: var(--ce-badge-color, var(--theme-badge-fg, #ffffff));
+  line-height: var(--ce-badge-line-height, 1);
+  border-width: var(--ce-badge-border-width, 0);
+  border-style: var(--ce-badge-border-style, solid);
+  border-color: var(--ce-badge-border-color, transparent);
+  box-shadow: var(--ce-badge-shadow, none);
+}
+.badge--primary,
+.ce-badge--primary {
+  --ce-badge-bg: var(--ce-badge-primary-bg, var(--theme-badge-primary, #1a73e8));
+}
+.badge--success,
+.ce-badge--success {
+  --ce-badge-bg: var(--ce-badge-success-bg, var(--theme-badge-success, #34a853));
+}
+.badge--danger,
+.ce-badge--danger {
+  --ce-badge-bg: var(--ce-badge-danger-bg, var(--theme-badge-danger, #ea4335));
+}
+.badge--warning,
+.ce-badge--warning {
+  --ce-badge-bg: var(--ce-badge-warning-bg, var(--theme-badge-warning, #f9ab00));
+}
+.badge--info,
+.ce-badge--info {
+  --ce-badge-bg: var(--ce-badge-info-bg, var(--theme-badge-info, #4285f4));
+}
+.badge--light,
+.ce-badge--light {
+  --ce-badge-bg: var(--ce-badge-light-bg, var(--theme-badge-light, #f8f9fa));
+  --ce-badge-color: var(--ce-badge-light-color, var(--theme-badge-light-fg, #202124));
+}
+.badge--dark,
+.ce-badge--dark {
+  --ce-badge-bg: var(--ce-badge-dark-bg, var(--theme-badge-dark, #202124));
+}
+
+.chip,
+.ce-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ce-chip-gap, 0.25rem);
+  padding: var(--ce-chip-padding, 0.375rem 0.875rem);
+  font-size: var(--ce-chip-font-size, 0.875rem);
+  line-height: var(--ce-chip-line-height, 1.5);
+  border-radius: var(--ce-chip-radius, 10px);
+  background-color: var(--ce-chip-bg, var(--theme-chip-bg, #f8f9fa));
+  color: var(--ce-chip-color, var(--theme-chip-fg, #202124));
+  font-weight: var(--ce-chip-weight, 500);
+  border-width: var(--ce-chip-border-width, 1px);
+  border-style: var(--ce-chip-border-style, solid);
+  border-color: var(--ce-chip-border-color, var(--theme-chip-border, #9aa0a6));
+  transition: all var(--ce-chip-transition, 0.2s) var(--ce-chip-transition-ease, ease);
+  cursor: var(--ce-chip-cursor, default);
+  white-space: var(--ce-chip-white-space, nowrap);
+  max-width: var(--ce-chip-max-width, 100%);
+}
+.chip--sm,
+.ce-chip--sm {
+  --ce-chip-padding: 0.25rem 0.625rem;
+  --ce-chip-font-size: 0.75rem;
+  --ce-chip-gap: 0.25rem;
+}
+.chip--md,
+.ce-chip--md {
+  --ce-chip-padding: 0.375rem 0.875rem;
+  --ce-chip-font-size: 0.875rem;
+}
+.chip--lg,
+.ce-chip--lg {
+  --ce-chip-padding: 0.5rem 1rem;
+  --ce-chip-font-size: 1rem;
+}
+.chip--primary,
+.ce-chip--primary {
+  --ce-chip-bg: var(--ce-chip-primary-bg, var(--theme-chip-primary, #1a73e8));
+  --ce-chip-color: var(--ce-chip-primary-color, #ffffff);
+  --ce-chip-border-color: var(
+    --ce-chip-primary-border,
+    var(--theme-chip-primary-border, #1a73e8)
+  );
+}
+.chip--secondary,
+.ce-chip--secondary {
+  --ce-chip-bg: var(--ce-chip-secondary-bg, var(--theme-chip-secondary, #fbbc04));
+  --ce-chip-color: var(--ce-chip-secondary-color, #ffffff);
+  --ce-chip-border-color: var(
+    --ce-chip-secondary-border,
+    var(--theme-chip-secondary-border, #fbbc04)
+  );
+}
+.chip--success,
+.ce-chip--success {
+  --ce-chip-bg: var(--ce-chip-success-bg, var(--theme-chip-success, #34a853));
+  --ce-chip-color: var(--ce-chip-success-color, #ffffff);
+  --ce-chip-border-color: var(
+    --ce-chip-success-border,
+    var(--theme-chip-success-border, #34a853)
+  );
+}
+.chip--danger,
+.ce-chip--danger {
+  --ce-chip-bg: var(--ce-chip-danger-bg, var(--theme-chip-danger, #ea4335));
+  --ce-chip-color: var(--ce-chip-danger-color, #ffffff);
+  --ce-chip-border-color: var(
+    --ce-chip-danger-border,
+    var(--theme-chip-danger-border, #ea4335)
+  );
+}
+.chip--warning,
+.ce-chip--warning {
+  --ce-chip-bg: var(--ce-chip-warning-bg, var(--theme-chip-warning, #f9ab00));
+  --ce-chip-color: var(--ce-chip-warning-color, #202124);
+  --ce-chip-border-color: var(
+    --ce-chip-warning-border,
+    var(--theme-chip-warning-border, #f9ab00)
+  );
+}
+.chip--info,
+.ce-chip--info {
+  --ce-chip-bg: var(--ce-chip-info-bg, var(--theme-chip-info, #4285f4));
+  --ce-chip-color: var(--ce-chip-info-color, #ffffff);
+  --ce-chip-border-color: var(
+    --ce-chip-info-border,
+    var(--theme-chip-info-border, #4285f4)
+  );
+}
+.chip--outlined,
+.ce-chip--outlined {
+  --ce-chip-bg: var(--ce-chip-outlined-bg, transparent);
+  --ce-chip-border-color: var(--ce-chip-outlined-border, currentColor);
+}
+.chip--outlined.chip--primary, .chip--outlined.ce-chip--primary,
+.ce-chip--outlined.chip--primary,
+.ce-chip--outlined.ce-chip--primary {
+  --ce-chip-color: var(--ce-chip-outlined-primary-color, #1a73e8);
+  --ce-chip-border-color: var(--ce-chip-outlined-primary-border, #1a73e8);
+}
+.chip--outlined.chip--secondary, .chip--outlined.ce-chip--secondary,
+.ce-chip--outlined.chip--secondary,
+.ce-chip--outlined.ce-chip--secondary {
+  --ce-chip-color: var(--ce-chip-outlined-secondary-color, #fbbc04);
+  --ce-chip-border-color: var(--ce-chip-outlined-secondary-border, #fbbc04);
+}
+.chip--outlined.chip--success, .chip--outlined.ce-chip--success,
+.ce-chip--outlined.chip--success,
+.ce-chip--outlined.ce-chip--success {
+  --ce-chip-color: var(--ce-chip-outlined-success-color, #34a853);
+  --ce-chip-border-color: var(--ce-chip-outlined-success-border, #34a853);
+}
+.chip--outlined.chip--danger, .chip--outlined.ce-chip--danger,
+.ce-chip--outlined.chip--danger,
+.ce-chip--outlined.ce-chip--danger {
+  --ce-chip-color: var(--ce-chip-outlined-danger-color, #ea4335);
+  --ce-chip-border-color: var(--ce-chip-outlined-danger-border, #ea4335);
+}
+.chip--outlined.chip--warning, .chip--outlined.ce-chip--warning,
+.ce-chip--outlined.chip--warning,
+.ce-chip--outlined.ce-chip--warning {
+  --ce-chip-color: var(--ce-chip-outlined-warning-color, );
+  --ce-chip-border-color: var(--ce-chip-outlined-warning-border, #f9ab00);
+}
+.chip--outlined.chip--info, .chip--outlined.ce-chip--info,
+.ce-chip--outlined.chip--info,
+.ce-chip--outlined.ce-chip--info {
+  --ce-chip-color: var(--ce-chip-outlined-info-color, #4285f4);
+  --ce-chip-border-color: var(--ce-chip-outlined-info-border, #4285f4);
+}
+.chip--ghost,
+.ce-chip--ghost {
+  --ce-chip-border-color: var(--ce-chip-ghost-border, transparent);
+}
+.chip--ghost.chip--primary, .chip--ghost.ce-chip--primary,
+.ce-chip--ghost.chip--primary,
+.ce-chip--ghost.ce-chip--primary {
+  --ce-chip-bg: var(--ce-chip-ghost-primary-bg, rgba(fn.color(primary), 0.1));
+  --ce-chip-color: var(--ce-chip-ghost-primary-color, #1a73e8);
+}
+.chip--ghost.chip--secondary, .chip--ghost.ce-chip--secondary,
+.ce-chip--ghost.chip--secondary,
+.ce-chip--ghost.ce-chip--secondary {
+  --ce-chip-bg: var(
+    --ce-chip-ghost-secondary-bg,
+    rgba(fn.color(secondary), 0.1)
+  );
+  --ce-chip-color: var(--ce-chip-ghost-secondary-color, #fbbc04);
+}
+.chip--ghost.chip--success, .chip--ghost.ce-chip--success,
+.ce-chip--ghost.chip--success,
+.ce-chip--ghost.ce-chip--success {
+  --ce-chip-bg: var(--ce-chip-ghost-success-bg, rgba(fn.color(success), 0.1));
+  --ce-chip-color: var(--ce-chip-ghost-success-color, #34a853);
+}
+.chip--ghost.chip--danger, .chip--ghost.ce-chip--danger,
+.ce-chip--ghost.chip--danger,
+.ce-chip--ghost.ce-chip--danger {
+  --ce-chip-bg: var(--ce-chip-ghost-danger-bg, rgba(fn.color(danger), 0.1));
+  --ce-chip-color: var(--ce-chip-ghost-danger-color, #ea4335);
+}
+.chip--ghost.chip--warning, .chip--ghost.ce-chip--warning,
+.ce-chip--ghost.chip--warning,
+.ce-chip--ghost.ce-chip--warning {
+  --ce-chip-bg: var(--ce-chip-ghost-warning-bg, rgba(fn.color(warning), 0.15));
+  --ce-chip-color: var(--ce-chip-ghost-warning-color, );
+}
+.chip--ghost.chip--info, .chip--ghost.ce-chip--info,
+.ce-chip--ghost.chip--info,
+.ce-chip--ghost.ce-chip--info {
+  --ce-chip-bg: var(--ce-chip-ghost-info-bg, rgba(fn.color(info), 0.1));
+  --ce-chip-color: var(--ce-chip-ghost-info-color, #4285f4);
+}
+.chip.active,
+.ce-chip.active {
+  --ce-chip-bg: var(
+    --ce-chip-active-bg,
+    var(--theme-chip-active-bg, #1a73e8)
+  );
+  --ce-chip-color: var(
+    --ce-chip-active-color,
+    var(--theme-chip-active-fg, #ffffff)
+  );
+  --ce-chip-border-color: var(
+    --ce-chip-active-border,
+    var(--theme-chip-active-border, #1a73e8)
+  );
+}
+.chip--removable,
+.ce-chip--removable {
+  --ce-chip-padding: var(--ce-chip-removable-padding, 0.375rem 0.5rem 0.375rem 0.875rem);
+}
+.chip__close,
+.ce-chip__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ce-chip-close-bg, transparent);
+  border-width: var(--ce-chip-close-border-width, 0);
+  border-style: var(--ce-chip-close-border-style, solid);
+  border-color: var(--ce-chip-close-border-color, transparent);
+  color: var(--ce-chip-close-color, currentColor);
+  font-size: var(--ce-chip-close-size, 1.25em);
+  cursor: var(--ce-chip-close-cursor, pointer);
+  padding: var(--ce-chip-close-padding, 0);
+  margin-left: var(--ce-chip-close-gap, 0.375rem);
+  opacity: var(--ce-chip-close-opacity, 0.6);
+  transition: opacity var(--ce-chip-close-transition, 0.2s) var(--ce-chip-close-transition-ease, ease);
+  width: var(--ce-chip-close-width, 1em);
+  height: var(--ce-chip-close-height, 1em);
+  line-height: var(--ce-chip-close-line-height, 1);
+}
+.chip__close:hover, .chip__close:focus-visible,
+.ce-chip__close:hover,
+.ce-chip__close:focus-visible {
+  opacity: var(--ce-chip-close-hover-opacity, 1);
+  outline-width: var(--ce-chip-close-outline-width, 2px);
+  outline-style: var(--ce-chip-close-outline-style, solid);
+  outline-color: var(--ce-chip-close-outline-color, currentColor);
+  outline-offset: var(--ce-chip-close-outline-offset, 2px);
+  border-radius: var(--ce-chip-close-radius, 4px);
+}
+.chip__icon,
+.ce-chip__icon {
+  display: inline-flex;
+  font-size: var(--ce-chip-icon-size, 1.1em);
+}
+.chip:disabled, .chip.disabled,
+.ce-chip:disabled,
+.ce-chip.disabled {
+  opacity: var(--ce-chip-disabled-opacity, 0.5);
+  cursor: var(--ce-chip-disabled-cursor, not-allowed);
+}
+
+.divider {
+  border: none;
+  border-top: var(--ce-divider-thickness, 1px) var(--ce-divider-style, solid) var(--ce-divider-color, #9aa0a6);
+  margin: var(--ce-divider-margin, 1rem) 0;
+  background: none;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+.divider--vertical {
+  border-top: none;
+  border-left: var(--ce-divider-thickness, 1px) var(--ce-divider-style, solid) var(--ce-divider-color, #9aa0a6);
+  height: 100%;
+  margin: 0 var(--ce-divider-margin, 1rem);
+  width: auto;
+  min-height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+}
+.divider--dashed {
+  border-top-style: dashed;
+  border-left-style: dashed;
+}
+.divider--thick {
+  border-top-width: 2px;
+  border-left-width: 2px;
+}
+
+.image {
+  max-width: 100%;
+  display: block;
+  height: auto;
+  border-radius: 4px;
+}
+.image--rounded {
+  border-radius: 8px;
+}
+.image--circle {
+  border-radius: 50%;
+}
+.image--shadow {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.image--cover {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.image--contain {
+  object-fit: contain;
+}
+
+.alert {
+  padding: 1rem;
+  border-radius: 4px;
+  border-left: 4px solid;
+  background-color: var(--theme-alert-bg, #f8f9fa);
+  color: var(--theme-alert-fg, #202124);
+  position: relative;
+  margin-bottom: 1rem;
+}
+.alert--success {
+  border-color: var(--theme-alert-success-border, #34a853);
+  background-color: var(--theme-alert-success-bg, rgb(208.8, 240.7, 217.325));
+  color: var(--theme-alert-success-fg, rgb(14.2380952381, 69.3333333333, 141.7619047619));
+}
+.alert--danger {
+  border-color: var(--theme-alert-danger-border, #ea4335);
+  background-color: var(--theme-alert-danger-bg, rgb(208.8, 240.7, 217.325));
+  color: var(--theme-alert-danger-fg, rgb(14.2380952381, 69.3333333333, 141.7619047619));
+}
+.alert--warning {
+  border-color: var(--theme-alert-warning-border, #f9ab00);
+  background-color: var(--theme-alert-warning-bg, rgb(189.3272727273, 234.6727272727, 201.4454545455));
+  color: var(--theme-alert-warning-fg, rgb(14.2380952381, 69.3333333333, 141.7619047619));
+}
+.alert--info {
+  border-color: var(--theme-alert-info-border, #4285f4);
+  background-color: var(--theme-alert-info-bg, rgb(208.8, 240.7, 217.325));
+  color: var(--theme-alert-info-fg, rgb(14.2380952381, 69.3333333333, 141.7619047619));
+}
+.alert__title {
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+}
+.alert__close {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+  background: none;
+  border: none;
+  color: #9aa0a6;
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+.alert__close:hover {
+  color: #ea4335;
+}
+.alert__close:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+
+.message {
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 4px;
+  color: #202124;
+}
+.message--success {
+  background-color: rgb(189.3272727273, 234.6727272727, 201.4454545455);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+.message--error {
+  background-color: rgb(253.2107623318, 238.9820627803, 237.7892376682);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+.message--info {
+  background-color: rgb(189.3272727273, 234.6727272727, 201.4454545455);
+  color: rgb(14.2380952381, 69.3333333333, 141.7619047619);
+}
+
+.progress-bar {
+  width: var(--ce-progress-bar-width, 100%);
+  background-color: var(--ce-progress-bar-bg, var(--theme-progress-bg, #f8f9fa));
+  height: var(--ce-progress-bar-height, 0.75rem);
+  border-radius: var(--ce-progress-bar-radius, 8px);
+  overflow: var(--ce-progress-bar-overflow, hidden);
+}
+.progress-bar__fill {
+  height: var(--ce-progress-bar-fill-height, 100%);
+  width: var(--ce-progress-bar-fill-width, 0%);
+  background-color: var(--ce-progress-bar-fill-bg, var(--theme-progress-fill, #1a73e8));
+  transition: var(--ce-progress-bar-fill-transition, width 0.3s ease-in-out);
+}
+.progress-bar__fill--success {
+  background-color: var(--ce-progress-bar-success-bg, var(--theme-progress-success, #34a853));
+}
+.progress-bar__fill--danger {
+  background-color: var(--ce-progress-bar-danger-bg, var(--theme-progress-danger, #ea4335));
+}
+.progress-bar__fill--warning {
+  background-color: var(--ce-progress-bar-warning-bg, var(--theme-progress-warning, #f9ab00));
+}
+
+.snackbar {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--theme-snackbar-bg, #202124);
+  color: var(--theme-snackbar-fg, #ffffff);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  font-size: 0.875rem;
+  z-index: 1080;
+  animation: fade-in 0.3s ease-in-out;
+}
+.snackbar--success {
+  background-color: var(--theme-snackbar-success, #34a853);
+}
+.snackbar--error {
+  background-color: var(--theme-snackbar-error, #ea4335);
+}
+.snackbar--info {
+  background-color: var(--theme-snackbar-info, #4285f4);
+}
+.snackbar--warning {
+  background-color: var(--theme-snackbar-warning, #f9ab00);
+}
+.snackbar--warning:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+
+.skeleton {
+  background-color: var(--theme-skeleton-bg, #f8f9fa);
+  border-radius: 4px;
+  width: 100%;
+  height: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+.skeleton::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -50%;
+  height: 100%;
+  width: 50%;
+  background: linear-gradient(to right, transparent, var(--theme-skeleton-shimmer, rgba(255, 255, 255, 0.3)), transparent);
+  animation: shimmer 1.5s infinite;
+}
+.skeleton--sm {
+  height: 0.75rem;
+}
+.skeleton--lg {
+  height: 1.5rem;
+}
+.skeleton--circle {
+  border-radius: 50%;
+  height: 2rem;
+  width: 2rem;
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+.carousel {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--ce-carousel-radius, 8px);
+  background-color: var(--ce-carousel-bg, var(--theme-carousel-bg, var(--theme-surface, #f8f9fa)));
+  box-shadow: var(--ce-carousel-shadow, none);
+  color: var(--ce-carousel-color, inherit);
+}
+.carousel__track {
+  display: flex;
+  transition: transform var(--ce-carousel-track-duration, 0.5s) var(--ce-carousel-track-ease, ease-in-out);
+  will-change: transform;
+}
+.carousel__slide {
+  min-width: 100%;
+  flex-shrink: 0;
+  padding: var(--ce-carousel-slide-padding, 1.5rem);
+  background: var(--ce-carousel-slide-bg, var(--theme-carousel-slide-bg, var(--theme-surface, #f8f9fa)));
+  color: var(--ce-carousel-slide-color, var(--theme-carousel-slide-fg, var(--theme-fg, #202124)));
+}
+.carousel__controls {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  transform: translateY(-50%);
+  padding: var(--ce-carousel-controls-padding, 0 1rem);
+  pointer-events: none;
+}
+.carousel__controls button {
+  background: var(--ce-carousel-btn-bg, var(--theme-carousel-btn-bg, rgba(0, 0, 0, 0.4)));
+  border: none;
+  border-radius: var(--ce-carousel-btn-radius, 50%);
+  color: var(--ce-carousel-btn-color, var(--theme-carousel-btn-fg, #ffffff));
+  font-size: var(--ce-carousel-btn-size, 1.25rem);
+  cursor: var(--ce-carousel-btn-cursor, pointer);
+  padding: var(--ce-carousel-btn-padding, 0.25rem);
+  pointer-events: auto;
+}
+.carousel__controls button:hover {
+  background: var(--ce-carousel-btn-hover-bg, var(--theme-carousel-btn-hover, var(--theme-accent, #1a73e8)));
+}
+.carousel__indicators {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--ce-carousel-indicators-margin, 1rem);
+}
+.carousel__indicators .dot {
+  width: var(--ce-carousel-dot-size, 0.75rem);
+  height: var(--ce-carousel-dot-size, 0.75rem);
+  margin: var(--ce-carousel-dot-margin, 0 0.25rem);
+  background-color: var(--ce-carousel-dot-bg, var(--theme-carousel-indicator, var(--theme-muted, #9aa0a6)));
+  border-radius: var(--ce-carousel-dot-radius, 50%);
+  cursor: var(--ce-carousel-dot-cursor, pointer);
+}
+.carousel__indicators .dot.active {
+  background-color: var(--ce-carousel-dot-active-bg, var(--theme-carousel-indicator-active, var(--theme-accent, #1a73e8)));
+}
+
+.steps {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+.steps .step {
+  flex: 1;
+  text-align: center;
+  position: relative;
+}
+.steps .step .circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  background-color: #9aa0a6;
+  color: #ffffff;
+  border-radius: 50%;
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+}
+.steps .step .circle.active {
+  background-color: #1a73e8;
+}
+.steps .step .circle.completed {
+  background-color: #34a853;
+}
+.steps .step .label {
+  font-size: 0.875rem;
+  color: #202124;
+}
+.steps .step::after {
+  content: "";
+  position: absolute;
+  top: 1rem;
+  right: -50%;
+  width: 100%;
+  height: 2px;
+  background-color: #9aa0a6;
+  z-index: -1;
+}
+.steps .step:last-child::after {
+  display: none;
+}
+
+.timeline {
+  position: var(--ce-timeline-advanced-position, relative);
+  padding-left: var(--ce-timeline-advanced-padding, 2rem);
+  border-left: var(--ce-timeline-advanced-border, 2px solid #9aa0a6);
+}
+.timeline .timeline__event {
+  margin-bottom: var(--ce-timeline-advanced-event-margin, 2rem);
+  position: var(--ce-timeline-advanced-event-position, relative);
+}
+.timeline .timeline__event::before {
+  content: var(--ce-timeline-advanced-dot-content, "");
+  position: var(--ce-timeline-advanced-dot-position, absolute);
+  left: var(--ce-timeline-advanced-dot-left, 1.5rem);
+  top: var(--ce-timeline-advanced-dot-top, 0.25rem);
+  width: var(--ce-timeline-advanced-dot-size, 1rem);
+  height: var(--ce-timeline-advanced-dot-size, 1rem);
+  background-color: var(--ce-timeline-advanced-dot-bg, #1a73e8);
+  border-radius: var(--ce-timeline-advanced-dot-radius, 50%);
+  border: var(--ce-timeline-advanced-dot-border, 2px solid #ffffff);
+}
+.timeline .timeline__event .title {
+  font-weight: var(--ce-timeline-advanced-title-weight, bold);
+  color: var(--ce-timeline-advanced-title-color, #202124);
+}
+.timeline .timeline__event .timestamp {
+  font-size: var(--ce-timeline-advanced-time-size, 0.75rem);
+  color: var(--ce-timeline-advanced-time-color, #9aa0a6);
+}
+.timeline .timeline__event .content {
+  margin-top: var(--ce-timeline-advanced-content-margin, 0.5rem);
+  font-size: var(--ce-timeline-advanced-content-size, 0.9rem);
+}
+
+.calendar {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.25rem;
+  font-size: 0.85rem;
+}
+.calendar .day {
+  text-align: center;
+  padding: 0.5rem;
+  border-radius: 4px;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: 0.2s;
+}
+.calendar .day:hover {
+  background-color: #f8f9fa;
+}
+.calendar .day--today {
+  border: 1px solid #1a73e8;
+}
+.calendar .day--selected {
+  background-color: #1a73e8;
+  color: #ffffff;
+}
+.calendar .day--disabled {
+  color: #9aa0a6;
+  pointer-events: none;
+}
+.calendar .weekdays {
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  grid-column: span 7;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: 0.25rem;
+}
+
+.rating {
+  display: var(--ce-rating-advanced-display, inline-flex);
+  gap: var(--ce-rating-advanced-gap, 0.25rem);
+  font-size: var(--ce-rating-advanced-size, 1.25rem);
+  color: var(--ce-rating-advanced-color, #9aa0a6);
+  cursor: var(--ce-rating-advanced-cursor, pointer);
+}
+.rating .star {
+  transition: var(--ce-rating-advanced-star-transition, color 0.2s);
+}
+.rating .star.filled {
+  color: var(--ce-rating-advanced-star-filled, #f9ab00);
+}
+.rating--sm {
+  font-size: var(--ce-rating-advanced-sm-size, 1rem);
+}
+.rating--lg {
+  font-size: var(--ce-rating-advanced-lg-size, 1.75rem);
+}
+
+.chat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-chat-gap, 1rem);
+  color: var(--ce-chat-color, inherit);
+}
+.chat .chat__message {
+  max-width: var(--ce-chat-message-max-width, 70%);
+  padding: var(--ce-chat-message-padding, 0.5rem 1rem);
+  border-radius: var(--ce-chat-message-radius, 8px);
+  background-color: var(--ce-chat-message-bg, #f8f9fa);
+  color: var(--ce-chat-message-color, inherit);
+  position: relative;
+  word-wrap: break-word;
+}
+.chat .chat__message--sent {
+  align-self: flex-end;
+  --ce-chat-message-bg: #1a73e8;
+  --ce-chat-message-color: #ffffff;
+}
+.chat .chat__message--received {
+  align-self: flex-start;
+}
+.chat .chat__message .timestamp {
+  font-size: var(--ce-chat-timestamp-size, 0.7rem);
+  margin-top: var(--ce-chat-timestamp-margin, 0.25rem);
+  opacity: var(--ce-chat-timestamp-opacity, 0.6);
+  color: var(--ce-chat-timestamp-color, inherit);
+}
+
+.code-block {
+  background-color: #202124;
+  color: #ffffff;
+  font-family: "Fira Code", monospace;
+  font-size: 0.85rem;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+.code-block--light {
+  background-color: #f8f9fa;
+  color: #202124;
+}
+.code-block code {
+  white-space: pre;
+}
+
+.chart-wrapper {
+  background-color: var(--ce-chart-bg, #ffffff);
+  padding: var(--ce-chart-padding, 1rem);
+  border-radius: var(--ce-chart-radius, 4px);
+  box-shadow: var(--ce-chart-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
+  border: 1px solid var(--ce-chart-border, #9aa0a6);
+  margin-bottom: var(--ce-chart-margin, 1.5rem);
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  outline: none;
+  transition: box-shadow 0.2s;
+}
+.chart-wrapper:focus {
+  box-shadow: 0 0 0 2px var(--ce-chart-focus, #0078d4);
+}
+.chart-wrapper--bar canvas, .chart-wrapper--line canvas, .chart-wrapper--pie canvas, .chart-wrapper--radar canvas {
+  width: 100% !important;
+  height: var(--ce-chart-canvas-height, 280px) !important;
+  max-width: 100%;
+  border-radius: var(--ce-chart-canvas-radius, 0.3em);
+  background: var(--ce-chart-canvas-bg, transparent);
+  outline: none;
+}
+.chart-wrapper__title {
+  font-weight: bold;
+  font-size: var(--ce-chart-title-size, 1.1rem);
+  margin-bottom: var(--ce-chart-title-margin, 0.5rem);
+  color: var(--ce-chart-title-color, #202124);
+  line-height: 1.3;
+  letter-spacing: 0.01em;
+  outline: none;
+}
+.chart-wrapper__title:focus {
+  text-decoration: underline;
+}
+
+.editor {
+  border-width: var(--ce-editor-border-width, 1px);
+  border-style: var(--ce-editor-border-style, solid);
+  border-color: var(--ce-editor-border-color, #9aa0a6);
+  border-radius: var(--ce-editor-radius, 4px);
+  background-color: var(--ce-editor-bg, #ffffff);
+  padding: var(--ce-editor-padding, 0.5rem);
+  font-size: var(--ce-editor-size, 1rem);
+  line-height: var(--ce-editor-line-height, 1.6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-editor-gap, 0.5rem);
+  min-height: var(--ce-editor-min-height, 250px);
+}
+.editor__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ce-editor-toolbar-gap, 0.25rem);
+  border-bottom-width: var(--ce-editor-toolbar-border-width, 1px);
+  border-bottom-style: var(--ce-editor-toolbar-border-style, solid);
+  border-bottom-color: var(--ce-editor-toolbar-border-color, #9aa0a6);
+  padding-bottom: var(--ce-editor-toolbar-padding, 0.25rem);
+}
+.editor__toolbar button {
+  background-color: var(--ce-editor-button-bg, #f8f9fa);
+  border-width: var(--ce-editor-button-border-width, 1px);
+  border-style: var(--ce-editor-button-border-style, solid);
+  border-color: var(--ce-editor-button-border-color, #dadce0);
+  padding: var(--ce-editor-button-padding, 0.25rem 0.5rem);
+  border-radius: var(--ce-editor-button-radius, 2px);
+  font-size: var(--ce-editor-button-size, 0.85rem);
+  cursor: var(--ce-editor-button-cursor, pointer);
+}
+.editor__toolbar button:hover {
+  background-color: var(--ce-editor-button-hover-bg, #1a73e8);
+  color: var(--ce-editor-button-hover-color, #ffffff);
+}
+.editor__toolbar button.active {
+  background-color: var(--ce-editor-button-active-bg, #1a73e8);
+  color: var(--ce-editor-button-active-color, #ffffff);
+}
+.editor__content {
+  flex: 1;
+  min-height: var(--ce-editor-content-min-height, 160px);
+  padding: var(--ce-editor-content-padding, 0.5rem);
+  border-radius: var(--ce-editor-content-radius, 2px);
+  border: var(--ce-editor-content-border, none);
+  outline: var(--ce-editor-content-outline, none);
+  color: var(--ce-editor-content-color, #202124);
+  background: var(--ce-editor-content-bg, #ffffff);
+  font-size: var(--ce-editor-content-size, 1rem);
+}
+.editor__content p {
+  margin-bottom: var(--ce-editor-paragraph-margin, 0.5rem);
+}
+.editor__content h1, .editor__content h2, .editor__content h3 {
+  margin: var(--ce-editor-heading-margin, 0.5rem 0);
+  font-weight: var(--ce-editor-heading-weight, bold);
+}
+.editor__content ul, .editor__content ol {
+  padding-left: var(--ce-editor-list-padding, 1rem);
+  margin: var(--ce-editor-list-margin, 0.5rem 0);
+}
+.editor__content blockquote {
+  border-left-width: var(--ce-editor-blockquote-border-width, 4px);
+  border-left-style: var(--ce-editor-blockquote-border-style, solid);
+  border-left-color: var(--ce-editor-blockquote-border-color, #1a73e8);
+  padding-left: var(--ce-editor-blockquote-padding, 0.5rem);
+  color: var(--ce-editor-blockquote-color, #9aa0a6);
+  margin: var(--ce-editor-blockquote-margin, 0.5rem 0);
+}
+.editor__content pre {
+  font-family: var(--ce-editor-pre-font, monospace);
+  background: var(--ce-editor-pre-bg, #202124);
+  color: var(--ce-editor-pre-color, #ffffff);
+  padding: var(--ce-editor-pre-padding, 0.5rem);
+  border-radius: var(--ce-editor-pre-radius, 4px);
+  overflow-x: var(--ce-editor-pre-overflow, auto);
+}
+.editor__content code {
+  background: var(--ce-editor-code-bg, #f8f9fa);
+  padding: var(--ce-editor-code-padding, 2px 6px);
+  border-radius: var(--ce-editor-code-radius, 2px);
+  font-size: var(--ce-editor-code-size, 0.9rem);
+}
+.editor__content img {
+  max-width: var(--ce-editor-image-max-width, 100%);
+  height: var(--ce-editor-image-height, auto);
+  border-radius: var(--ce-editor-image-radius, 2px);
+  margin: var(--ce-editor-image-margin, 0.5rem 0);
+}
+.editor__content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--ce-editor-table-margin, 0.5rem 0);
+}
+.editor__content table th, .editor__content table td {
+  border-width: var(--ce-editor-table-border-width, 1px);
+  border-style: var(--ce-editor-table-border-style, solid);
+  border-color: var(--ce-editor-table-border-color, #dadce0);
+  padding: var(--ce-editor-table-cell-padding, 0.25rem);
+  text-align: left;
+}
+.editor__content table th {
+  background: var(--ce-editor-table-header-bg, #f1f3f4);
+}
+.editor__content a {
+  color: var(--ce-editor-link-color, #1a73e8);
+  text-decoration: var(--ce-editor-link-decoration, underline);
+}
+.editor__content a:hover {
+  color: var(--ce-editor-link-hover-color, rgb(18.8928571429, 92, 188.1071428571));
+}
+.editor--readonly {
+  pointer-events: none;
+  background-color: var(--ce-editor-readonly-bg, #f8f9fa);
+  border-style: var(--ce-editor-readonly-border-style, dashed);
+}
+.editor--disabled {
+  opacity: var(--ce-editor-disabled-opacity, 0.6);
+  pointer-events: var(--ce-editor-disabled-events, none);
+}
+
+.ce-atmcard {
+  position: relative;
+  width: var(--ce-atmcard-width, 100%);
+  max-width: var(--ce-atmcard-max-width, 380px);
+  height: var(--ce-atmcard-height, 240px);
+  border-radius: var(--ce-atmcard-radius, 12px);
+  border-width: var(--ce-atmcard-border-width, 1px);
+  border-style: var(--ce-atmcard-border-style, solid);
+  border-color: var(--ce-atmcard-border-color, rgba(255, 255, 255, 0.2));
+  padding: var(--ce-atmcard-padding, 1.5rem);
+  background: var(--ce-atmcard-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+  box-shadow: var(--ce-atmcard-shadow, 0 10px 30px rgba(0, 0, 0, 0.2));
+  color: var(--ce-atmcard-color, white);
+  font-family: var(--ce-atmcard-font, "Courier New", monospace);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+}
+.ce-atmcard::before {
+  content: "";
+  position: absolute;
+  top: var(--ce-atmcard-chip-top, 1.5rem);
+  right: var(--ce-atmcard-chip-right, 1.5rem);
+  width: var(--ce-atmcard-chip-width, 50px);
+  height: var(--ce-atmcard-chip-height, 40px);
+  background: var(--ce-atmcard-chip-bg, linear-gradient(135deg, #ffd700 0%, #ffed4e 100%));
+  border-radius: var(--ce-atmcard-chip-radius, 4px);
+  opacity: var(--ce-atmcard-chip-opacity, 0.8);
+}
+.ce-atmcard--light {
+  --ce-atmcard-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --ce-atmcard-color: white;
+}
+.ce-atmcard--dark {
+  --ce-atmcard-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  --ce-atmcard-color: white;
+}
+.ce-atmcard--visa {
+  --ce-atmcard-bg: linear-gradient(135deg, #1434CB 0%, #0F2896 100%);
+}
+.ce-atmcard--mastercard {
+  --ce-atmcard-bg: linear-gradient(135deg, #EB001B 0%, #F79E1B 100%);
+}
+.ce-atmcard--amex {
+  --ce-atmcard-bg: linear-gradient(135deg, #006FCF 0%, #0048A0 100%);
+}
+.ce-atmcard--discover {
+  --ce-atmcard-bg: linear-gradient(135deg, #FF6000 0%, #F05A28 100%);
+}
+.ce-atmcard__brand {
+  font-size: var(--ce-atmcard-brand-size, 0.875rem);
+  font-weight: var(--ce-atmcard-brand-weight, 600);
+  text-transform: var(--ce-atmcard-brand-transform, uppercase);
+  letter-spacing: var(--ce-atmcard-brand-letter-spacing, 1px);
+  opacity: var(--ce-atmcard-brand-opacity, 0.9);
+  margin-bottom: var(--ce-atmcard-brand-margin-bottom, 0.5rem);
+}
+.ce-atmcard__chip {
+  position: absolute;
+  top: var(--ce-atmcard-chip-top, 2rem);
+  left: var(--ce-atmcard-chip-left, 1.5rem);
+  width: var(--ce-atmcard-chip-width, 50px);
+  height: var(--ce-atmcard-chip-height, 40px);
+  background: var(--ce-atmcard-chip-bg, linear-gradient(135deg, #ffd700 0%, #ffed4e 100%));
+  border-radius: var(--ce-atmcard-chip-radius, 6px);
+  opacity: var(--ce-atmcard-chip-opacity, 0.9);
+}
+.ce-atmcard__chip::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--ce-atmcard-chip-inner-width, 30px);
+  height: var(--ce-atmcard-chip-inner-height, 25px);
+  border-width: var(--ce-atmcard-chip-inner-border-width, 2px);
+  border-style: var(--ce-atmcard-chip-inner-border-style, solid);
+  border-color: var(--ce-atmcard-chip-inner-border-color, rgba(0, 0, 0, 0.1));
+  border-radius: var(--ce-atmcard-chip-inner-radius, 2px);
+}
+.ce-atmcard__number {
+  font-size: var(--ce-atmcard-number-size, 1.5rem);
+  letter-spacing: var(--ce-atmcard-number-letter-spacing, 3px);
+  margin: var(--ce-atmcard-number-margin, 1.5rem 0);
+  text-shadow: var(--ce-atmcard-number-shadow, 0 2px 4px rgba(0, 0, 0, 0.2));
+}
+.ce-atmcard__meta {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--ce-atmcard-meta-gap, 1.5rem);
+}
+.ce-atmcard__holder, .ce-atmcard__expiry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-atmcard-meta-field-gap, 0.25rem);
+}
+.ce-atmcard__holder span, .ce-atmcard__expiry span {
+  font-size: var(--ce-atmcard-meta-label-size, 0.625rem);
+  text-transform: var(--ce-atmcard-meta-label-transform, uppercase);
+  letter-spacing: var(--ce-atmcard-meta-label-letter-spacing, 1px);
+  opacity: var(--ce-atmcard-meta-label-opacity, 0.8);
+}
+.ce-atmcard__holder strong, .ce-atmcard__expiry strong {
+  font-size: var(--ce-atmcard-meta-value-size, 0.875rem);
+  font-weight: var(--ce-atmcard-meta-value-weight, 600);
+}
+.ce-atmcard__logo {
+  position: absolute;
+  top: var(--ce-atmcard-logo-top, 1rem);
+  right: var(--ce-atmcard-logo-right, 1rem);
+  width: var(--ce-atmcard-logo-width, 60px);
+  height: var(--ce-atmcard-logo-height, 40px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ce-atmcard-logo-size, 1.5rem);
+  font-weight: var(--ce-atmcard-logo-weight, bold);
+  opacity: var(--ce-atmcard-logo-opacity, 0.8);
+}
+.ce-atmcard__logo--visa::after {
+  content: "VISA";
+  color: var(--ce-atmcard-logo-visa-color, white);
+  font-family: var(--ce-atmcard-logo-font, sans-serif);
+}
+.ce-atmcard__logo--mastercard::before {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ce-atmcard-logo-radius, var(--ce-radius-circle, 50%));
+  background: var(--ce-atmcard-logo-mastercard-left-bg, #EB001B);
+  left: 0;
+}
+.ce-atmcard__logo--mastercard::after {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ce-atmcard-logo-radius, var(--ce-radius-circle, 50%));
+  background: var(--ce-atmcard-logo-mastercard-right-bg, #F79E1B);
+  left: 12px;
+}
+.ce-atmcard__logo--amex::after {
+  content: "AMEX";
+  color: var(--ce-atmcard-logo-amex-color, white);
+  font-family: var(--ce-atmcard-logo-font, sans-serif);
+  font-size: var(--ce-atmcard-logo-amex-size, 1rem);
+}
+.ce-atmcard__logo--discover::after {
+  content: "DISCOVER";
+  color: var(--ce-atmcard-logo-discover-color, white);
+  font-family: var(--ce-atmcard-logo-font, sans-serif);
+  font-size: var(--ce-atmcard-logo-discover-size, 0.75rem);
+}
+.ce-atmcard__number {
+  font-size: var(--ce-atmcard-number-size, 1.5rem);
+  letter-spacing: var(--ce-atmcard-number-letter-spacing, 3px);
+  font-weight: var(--ce-atmcard-number-weight, 500);
+  text-align: center;
+  margin: var(--ce-atmcard-number-margin, 1rem 0);
+  text-shadow: var(--ce-atmcard-number-shadow, 0 2px 4px rgba(0, 0, 0, 0.2));
+}
+.ce-atmcard__details {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  font-size: var(--ce-atmcard-details-size, 0.875rem);
+}
+.ce-atmcard__holder, .ce-atmcard__expiry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-atmcard-details-gap, 0.25rem);
+}
+.ce-atmcard__holder label, .ce-atmcard__expiry label {
+  font-size: var(--ce-atmcard-details-label-size, 0.625rem);
+  text-transform: var(--ce-atmcard-details-label-transform, uppercase);
+  letter-spacing: var(--ce-atmcard-details-label-letter-spacing, 0.5px);
+  opacity: var(--ce-atmcard-details-label-opacity, 0.8);
+}
+.ce-atmcard__holder strong, .ce-atmcard__expiry strong {
+  font-size: var(--ce-atmcard-details-value-size, 0.875rem);
+  font-weight: var(--ce-atmcard-details-value-weight, 600);
+  text-transform: var(--ce-atmcard-details-value-transform, uppercase);
+}
+.ce-atmcard:hover {
+  transform: var(--ce-atmcard-hover-transform, translateY(-5px));
+  box-shadow: var(--ce-atmcard-hover-shadow, 0 15px 40px rgba(0, 0, 0, 0.3));
+  transition: all var(--ce-atmcard-hover-transition-duration, 0.3s) var(--ce-atmcard-hover-transition-ease, ease);
+}
+@media (max-width: 480px) {
+  .ce-atmcard {
+    max-width: var(--ce-atmcard-max-width-mobile, 100%);
+    height: var(--ce-atmcard-height-mobile, 200px);
+    padding: var(--ce-atmcard-padding-mobile, 1rem);
+  }
+  .ce-atmcard__number {
+    font-size: var(--ce-atmcard-number-size-mobile, 1.25rem);
+    letter-spacing: var(--ce-atmcard-number-letter-spacing-mobile, 2px);
+  }
+  .ce-atmcard__details {
+    font-size: var(--ce-atmcard-details-size-mobile, 0.75rem);
+  }
+}
+
+/*# sourceMappingURL=ce-ui.css.map */