@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Montserrat:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap");

:root {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary-950: #172554;

  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #020617;

  --success: #10b981;
  --success-bg: #ecfdf5;
  --warning: #f59e0b;
  --warning-bg: #fffbeb;
  --error: #ef4444;
  --error-bg: #fef2f2;

  --background: var(--gray-50);
  --foreground: var(--gray-900);
  --card-bg: #ffffff;
  --border-color: var(--gray-200);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --relaxed-title-font: var(--font-sans);
  --logo-filter: none;
}

[data-theme='cyberpunk'] {
  --primary-50: #2a0a2e;
  --primary-100: #4a0e4e;
  --primary-200: #7a187a;
  --primary-300: #a822a8;
  --primary-400: #d62ed6;
  --primary-500: #ff00ff;
  --primary-600: #d900d9;
  --primary-700: #b300b3;
  --primary-800: #8c008c;
  --primary-900: #660066;
  --primary-950: #400040;

  --gray-50: #050505;
  --gray-100: #0a0a0a;
  --gray-200: #1a1a1a;
  --gray-300: #2a2a2a;
  --gray-400: #4a4a4a;
  --gray-500: #6a6a6a;
  --gray-600: #8a8a8a;
  --gray-700: #aaaaaa;
  --gray-800: #cacaca;
  --gray-900: #eaeaea;
  --gray-950: #ffffff;

  --background: #000000;
  --foreground: #00ffff;
  --card-bg: #0a0a0a;
  --border-color: #333333;

  --shadow-sm: 0 0 5px rgba(0, 255, 255, 0.2);
  --shadow-md: 0 0 10px rgba(0, 255, 255, 0.3);
  --shadow-lg: 0 0 20px rgba(255, 0, 255, 0.4);

  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 4px;

  --font-sans: "Courier New", Courier, monospace;
  --logo-filter: grayscale(1) brightness(1.15) contrast(1.1) sepia(1) hue-rotate(300deg) saturate(6);
}

[data-theme='minimalist'] {
  --primary-50: #f9f9f9;
  --primary-100: #f0f0f0;
  --primary-200: #e0e0e0;
  --primary-300: #d0d0d0;
  --primary-400: #b0b0b0;
  --primary-500: #000000;
  --primary-600: #222222;
  --primary-700: #444444;
  --primary-800: #666666;
  --primary-900: #888888;
  --primary-950: #aaaaaa;

  --gray-50: #ffffff;
  --gray-100: #fafafa;
  --gray-200: #f0f0f0;
  --gray-300: #e0e0e0;
  --gray-400: #c0c0c0;
  --gray-500: #a0a0a0;
  --gray-600: #808080;
  --gray-700: #606060;
  --gray-800: #404040;
  --gray-900: #202020;
  --gray-950: #000000;

  --background: #ffffff;
  --foreground: #000000;
  --card-bg: #ffffff;
  --border-color: #000000;

  --shadow-sm: none;
  --shadow-md: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  --shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --logo-filter: grayscale(1) contrast(1.2) brightness(0.95);
}

[data-theme='terminal'] {
  --primary-50: #0a2e0a;
  --primary-100: #144d14;
  --primary-200: #1f6b1f;
  --primary-300: #2a8a2a;
  --primary-400: #35a835;
  --primary-500: #40c740;
  --primary-600: #32a832;
  --primary-700: #248a24;
  --primary-800: #166b16;
  --primary-900: #084d08;
  --primary-950: #002e00;

  --gray-50: #000000;
  --gray-100: #0a0a0a;
  --gray-200: #141414;
  --gray-300: #1f1f1f;
  --gray-400: #2a2a2a;
  --gray-500: #353535;
  --gray-600: #404040;
  --gray-700: #40c740;
  --gray-800: #40c740;
  --gray-900: #40c740;
  --gray-950: #40c740;

  --background: #000000;
  --foreground: #40c740;
  --card-bg: #0a0a0a;
  --border-color: #40c740;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --font-sans: "Consolas", "Monaco", "Lucida Console", monospace;
  --logo-filter: grayscale(1) brightness(1.2) contrast(1.1) sepia(1) hue-rotate(90deg) saturate(6);
}

[data-theme='elegant'] {
  --primary-50: #fff1f2;
  --primary-100: #ffe4e6;
  --primary-200: #fecdd3;
  --primary-300: #fda4af;
  --primary-400: #fb7185;
  --primary-500: #f43f5e;
  --primary-600: #e11d48;
  --primary-700: #be123c;
  --primary-800: #9f1239;
  --primary-900: #881337;
  --primary-950: #4c0519;

  --gray-50: #fffafb;
  --gray-100: #fff1f2;
  --gray-200: #ffe4e6;
  --gray-300: #fecdd3;
  --gray-400: #fda4af;
  --gray-500: #fb7185;
  --gray-600: #f43f5e;
  --gray-700: #e11d48;
  --gray-800: #be123c;
  --gray-900: #881337;
  --gray-950: #4c0519;

  --background: #fff5f7;
  --foreground: #881337;
  --card-bg: #ffffff;
  --border-color: #fecdd3;

  --shadow-sm: 0 2px 4px rgba(244, 63, 94, 0.1);
  --shadow-md: 0 4px 8px rgba(244, 63, 94, 0.15);
  --shadow-lg: 0 8px 16px rgba(244, 63, 94, 0.2);

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 24px;

  --font-sans: "Quicksand", "Nunito", sans-serif;
  --logo-filter: hue-rotate(320deg) saturate(1.6) brightness(1.05);
}

[data-theme='relaxed'] {
  --primary-50: #eef7f4;
  --primary-100: #d8efe6;
  --primary-200: #b7dfd2;
  --primary-300: #8fcbba;
  --primary-400: #65b59f;
  --primary-500: #3c9c84;
  --primary-600: #2d7f6b;
  --primary-700: #256857;
  --primary-800: #205449;
  --primary-900: #1a443c;
  --primary-950: #0f2a25;

  --gray-50: #faf8f5;
  --gray-100: #f4f0ea;
  --gray-200: #e6e0d8;
  --gray-300: #d3cbbf;
  --gray-400: #b6ad9f;
  --gray-500: #8f8577;
  --gray-600: #6f665b;
  --gray-700: #554e45;
  --gray-800: #3a352f;
  --gray-900: #27231f;
  --gray-950: #14110f;

  --background: #f6f3ee;
  --foreground: #2a2f33;
  --card-bg: #ffffff;
  --border-color: #e5e0d8;

  --accent-50: #fff4e8;
  --accent-100: #ffe6cc;
  --accent-200: #ffd3a3;
  --accent-300: #ffb970;
  --accent-600: #d16f2f;
  --accent-700: #b95d25;
  --accent-800: #8f451c;

  --shadow-sm: 0 2px 6px rgba(42, 47, 51, 0.08);
  --shadow-md: 0 8px 20px rgba(42, 47, 51, 0.12);
  --shadow-lg: 0 18px 32px rgba(42, 47, 51, 0.16);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;

  --font-sans: "Outfit", "Segoe UI", sans-serif;
  --relaxed-title-font: "Fraunces", "Outfit", serif;
  --logo-filter: hue-rotate(10deg) saturate(1.1) brightness(1.05);
}

[data-theme='lilac'] {
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;
  --primary-950: #2e1065;

  --gray-50: #fbfaff;
  --gray-100: #f4f1ff;
  --gray-200: #e7e1ff;
  --gray-300: #d6cdf7;
  --gray-400: #b8b1d8;
  --gray-500: #958bb8;
  --gray-600: #6f658f;
  --gray-700: #51496b;
  --gray-800: #322c46;
  --gray-900: #1f1b2f;
  --gray-950: #120f20;

  --background: #f7f5ff;
  --foreground: #231c3b;
  --card-bg: #ffffff;
  --border-color: #e5defa;

  --accent-50: #f2ecff;
  --accent-100: #e4d9ff;
  --accent-200: #cdbbff;
  --accent-300: #b39bff;
  --accent-600: #7c3aed;
  --accent-700: #6d28d9;
  --accent-800: #5b21b6;

  --shadow-sm: 0 2px 6px rgba(124, 58, 237, 0.12);
  --shadow-md: 0 8px 16px rgba(124, 58, 237, 0.18);
  --shadow-lg: 0 18px 32px rgba(124, 58, 237, 0.22);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;

  --font-sans: "Outfit", "Segoe UI", sans-serif;
  --logo-filter: hue-rotate(250deg) saturate(1.2) brightness(1.08);
}

[data-theme='leopard'] {
  --primary-50: #fff5e0;
  --primary-100: #ffe6b8;
  --primary-200: #f7d08a;
  --primary-300: #e6b25a;
  --primary-400: #d7922c;
  --primary-500: #c97b1f;
  --primary-600: #a85f17;
  --primary-700: #874a12;
  --primary-800: #63360d;
  --primary-900: #3f2208;
  --primary-950: #2b1705;

  --gray-50: #fffaf2;
  --gray-100: #f7efe2;
  --gray-200: #e9dcc9;
  --gray-300: #d6c2a6;
  --gray-400: #b89b73;
  --gray-500: #987650;
  --gray-600: #7a5b3b;
  --gray-700: #5d4329;
  --gray-800: #3f2e1b;
  --gray-900: #2b1e12;
  --gray-950: #1b1208;

  --background: #fff7ea;
  --foreground: #3b2a12;
  --card-bg: #fffaf2;
  --border-color: #ecd8b5;

  --shadow-sm: 0 2px 6px rgba(117, 74, 30, 0.12);
  --shadow-md: 0 10px 18px rgba(117, 74, 30, 0.18);
  --shadow-lg: 0 20px 34px rgba(117, 74, 30, 0.22);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;

  --font-sans: "Outfit", "Segoe UI", sans-serif;
  --logo-filter: sepia(0.6) saturate(1.4) hue-rotate(5deg) brightness(1.05);
}

[data-theme='polite-blue'] {
  --primary-50: #f3f8ff;
  --primary-100: #e6f1ff;
  --primary-200: #cfe2ff;
  --primary-300: #b6d2ff;
  --primary-400: #99c0ff;
  --primary-500: #7fb6ff;
  --primary-600: #5fa0f2;
  --primary-700: #4586d6;
  --primary-800: #3269b0;
  --primary-900: #27508a;
  --primary-950: #19345a;

  --gray-50: #fafcff;
  --gray-100: #f0f6ff;
  --gray-200: #dde7f5;
  --gray-300: #c8d5e8;
  --gray-400: #a7b7cf;
  --gray-500: #7f90a6;
  --gray-600: #5f6f86;
  --gray-700: #465068;
  --gray-800: #30384c;
  --gray-900: #1f2536;
  --gray-950: #131724;

  --background: #f7fbff;
  --foreground: #1a2a44;
  --card-bg: #ffffff;
  --border-color: #dfe9ff;

  --accent-50: #eef5ff;
  --accent-100: #d9e9ff;
  --accent-200: #bfd7ff;
  --accent-300: #a5c6ff;
  --accent-600: #5fa0f2;
  --accent-700: #4586d6;
  --accent-800: #3269b0;

  --shadow-sm: 0 2px 6px rgba(95, 160, 242, 0.14);
  --shadow-md: 0 8px 16px rgba(95, 160, 242, 0.2);
  --shadow-lg: 0 18px 32px rgba(95, 160, 242, 0.24);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;

  --font-sans: "Outfit", "Segoe UI", sans-serif;
  --logo-filter: hue-rotate(210deg) saturate(1.4) brightness(1.1);
}

[data-theme='lilac'] body {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InNoYWRvdyIgeD0iLTIwJSIgeT0iLTIwJSIgd2lkdGg9IjE0MCUiIGhlaWdodD0iMTQwJSI+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIyIiBzdGREZXZpYXRpb249IjEuNiIgZmxvb2QtY29sb3I9IiM4YjVjZjYiIGZsb29kLW9wYWNpdHk9IjAuMzUiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8ZyBmaWx0ZXI9InVybCgjc2hhZG93KSI+CiAgICA8ZyBmaWxsPSIjZmZmYWZjIiBzdHJva2U9IiNkOGI0ZmUiIHN0cm9rZS13aWR0aD0iMS4yIj4KICAgICAgPGNpcmNsZSBjeD0iMjAiIGN5PSI1IiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSIzMCIgY3k9IjEwIiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSIzNSIgY3k9IjIwIiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSIzMCIgY3k9IjMwIiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjM1IiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjMwIiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iMjAiIHI9IjUiIC8+CiAgICAgIDxjaXJjbGUgY3g9IjEwIiBjeT0iMTAiIHI9IjUiIC8+CiAgICA8L2c+CiAgICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSI2LjUiIGZpbGw9IiNmYWNjMTUiIHN0cm9rZT0iI2Y1OWUwYiIgc3Ryb2tlLXdpZHRoPSIxLjIiIC8+CiAgPC9nPgo8L3N2Zz4K") 20 20, auto;
}

[data-theme='leopard'] body {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InNoYWRvdyIgeD0iLTIwJSIgeT0iLTIwJSIgd2lkdGg9IjE0MCUiIGhlaWdodD0iMTQwJSI+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIyIiBzdGREZXZpYXRpb249IjEuNiIgZmxvb2QtY29sb3I9IiM3YTRiMWIiIGZsb29kLW9wYWNpdHk9IjAuMzUiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8ZyBmaWx0ZXI9InVybCgjc2hhZG93KSI+CiAgICA8Y2lyY2xlIGN4PSIyNCIgY3k9IjI2IiByPSIxNCIgZmlsbD0iI2YyYzE1YyIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjEuNCIvPgogICAgPGNpcmNsZSBjeD0iMTQiIGN5PSIxMiIgcj0iNSIgZmlsbD0iI2YyYzE1YyIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjEuMiIvPgogICAgPGNpcmNsZSBjeD0iMzQiIGN5PSIxMiIgcj0iNSIgZmlsbD0iI2YyYzE1YyIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjEuMiIvPgogICAgPGNpcmNsZSBjeD0iMTQiIGN5PSIxMiIgcj0iMi42IiBmaWxsPSIjZjdkODhhIi8+CiAgICA8Y2lyY2xlIGN4PSIzNCIgY3k9IjEyIiByPSIyLjYiIGZpbGw9IiNmN2Q4OGEiLz4KCiAgICA8ZWxsaXBzZSBjeD0iMTkiIGN5PSIyNCIgcng9IjIuMiIgcnk9IjMiIGZpbGw9IiMxYjFiMWIiLz4KICAgIDxlbGxpcHNlIGN4PSIyOSIgY3k9IjI0IiByeD0iMi4yIiByeT0iMyIgZmlsbD0iIzFiMWIxYiIvPgogICAgPGNpcmNsZSBjeD0iMTkuNSIgY3k9IjI0LjgiIHI9IjAuNyIgZmlsbD0iI2Y3ZTljNCIvPgogICAgPGNpcmNsZSBjeD0iMjkuNSIgY3k9IjI0LjgiIHI9IjAuNyIgZmlsbD0iI2Y3ZTljNCIvPgoKICAgIDxlbGxpcHNlIGN4PSIyNCIgY3k9IjMwIiByeD0iNi4yIiByeT0iNC42IiBmaWxsPSIjZjdlOWM0IiBzdHJva2U9IiM3YTRiMWIiIHN0cm9rZS13aWR0aD0iMC44Ii8+CiAgICA8cGF0aCBkPSJNMjIgMjguNSBMMjYgMjguNSBMMjQgMzEuMiBaIiBmaWxsPSIjM2IyNDEzIi8+CiAgICA8cGF0aCBkPSJNMTguOCAzMi40IHE1LjIgMy42IDEwLjQgMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjAuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNMTguNCAzMS42IHEzIDIgNS42IDEuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNMjkuNiAzMS42IHEtMyAyIC01LjYgMS40IiBmaWxsPSJub25lIiBzdHJva2U9IiM3YTRiMWIiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KCiAgICA8cGF0aCBkPSJNOCAyNCBoNyIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNNyAyOCBoOCIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNNDAgMjQgaC03IiBzdHJva2U9IiM3YTRiMWIiIHN0cm9rZS13aWR0aD0iMC44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICAgIDxwYXRoIGQ9Ik00MSAyOCBoLTgiIHN0cm9rZT0iIzdhNGIxYiIgc3Ryb2tlLXdpZHRoPSIwLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgoKICAgIDxjaXJjbGUgY3g9IjE1IiBjeT0iMjAiIHI9IjEuNiIgZmlsbD0iIzNiMjQxMyIvPgogICAgPGNpcmNsZSBjeD0iMTIiIGN5PSIyNSIgcj0iMS40IiBmaWxsPSIjM2IyNDEzIi8+CiAgICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjMwIiByPSIxLjUiIGZpbGw9IiMzYjI0MTMiLz4KICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMTYiIHI9IjEuMyIgZmlsbD0iIzNiMjQxMyIvPgogICAgPGNpcmNsZSBjeD0iMjQiIGN5PSIxNCIgcj0iMS40IiBmaWxsPSIjM2IyNDEzIi8+CiAgICA8Y2lyY2xlIGN4PSIyOCIgY3k9IjE2IiByPSIxLjMiIGZpbGw9IiMzYjI0MTMiLz4KICAgIDxjaXJjbGUgY3g9IjMyIiBjeT0iMjAiIHI9IjEuNiIgZmlsbD0iIzNiMjQxMyIvPgogICAgPGNpcmNsZSBjeD0iMzYiIGN5PSIyNSIgcj0iMS40IiBmaWxsPSIjM2IyNDEzIi8+CiAgICA8Y2lyY2xlIGN4PSIzMiIgY3k9IjMwIiByPSIxLjUiIGZpbGw9IiMzYjI0MTMiLz4KICA8L2c+Cjwvc3ZnPgo=") 24 24, auto;
}

[data-theme='polite-blue'] body {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InNoYWRvdyIgeD0iLTIwJSIgeT0iLTIwJSIgd2lkdGg9IjE0MCUiIGhlaWdodD0iMTQwJSI+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIyIiBzdGREZXZpYXRpb249IjEuNiIgZmxvb2QtY29sb3I9IiM3ZmI2ZmYiIGZsb29kLW9wYWNpdHk9IjAuMzUiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8ZyBmaWx0ZXI9InVybCgjc2hhZG93KSI+CiAgICA8ZyBmaWxsPSIjY2ZlM2ZmIiBzdHJva2U9IiM4ZmI4ZmYiIHN0cm9rZS13aWR0aD0iMS4xIj4KICAgICAgPGVsbGlwc2UgY3g9IjIwIiBjeT0iOC41IiByeD0iNS4yIiByeT0iNy4yIiAvPgogICAgICA8ZWxsaXBzZSBjeD0iMjAiIGN5PSI4LjUiIHJ4PSI1LjIiIHJ5PSI3LjIiIHRyYW5zZm9ybT0icm90YXRlKDcyIDIwIDIwKSIgLz4KICAgICAgPGVsbGlwc2UgY3g9IjIwIiBjeT0iOC41IiByeD0iNS4yIiByeT0iNy4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxNDQgMjAgMjApIiAvPgogICAgICA8ZWxsaXBzZSBjeD0iMjAiIGN5PSI4LjUiIHJ4PSI1LjIiIHJ5PSI3LjIiIHRyYW5zZm9ybT0icm90YXRlKDIxNiAyMCAyMCkiIC8+CiAgICAgIDxlbGxpcHNlIGN4PSIyMCIgY3k9IjguNSIgcng9IjUuMiIgcnk9IjcuMiIgdHJhbnNmb3JtPSJyb3RhdGUoMjg4IDIwIDIwKSIgLz4KICAgIDwvZz4KICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjUuOCIgZmlsbD0iI2ZmZDc3OSIgc3Ryb2tlPSIjZjJiODRiIiBzdHJva2Utd2lkdGg9IjEuMSIgLz4KICA8L2c+Cjwvc3ZnPgo=") 20 20, auto;
}

[data-theme='lilac'] a,
[data-theme='lilac'] button,
[data-theme='lilac'] input,
[data-theme='lilac'] textarea,
[data-theme='lilac'] select,
[data-theme='lilac'] label {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InNoYWRvdyIgeD0iLTIwJSIgeT0iLTIwJSIgd2lkdGg9IjE0MCUiIGhlaWdodD0iMTQwJSI+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIyIiBzdGREZXZpYXRpb249IjEuNiIgZmxvb2QtY29sb3I9IiM4YjVjZjYiIGZsb29kLW9wYWNpdHk9IjAuMzUiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8ZyBmaWx0ZXI9InVybCgjc2hhZG93KSI+CiAgICA8ZyBmaWxsPSIjZmZmYWZjIiBzdHJva2U9IiNkOGI0ZmUiIHN0cm9rZS13aWR0aD0iMS4yIj4KICAgICAgPGNpcmNsZSBjeD0iMjAiIGN5PSI1IiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSIzMCIgY3k9IjEwIiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSIzNSIgY3k9IjIwIiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSIzMCIgY3k9IjMwIiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjM1IiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjMwIiByPSI1IiAvPgogICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iMjAiIHI9IjUiIC8+CiAgICAgIDxjaXJjbGUgY3g9IjEwIiBjeT0iMTAiIHI9IjUiIC8+CiAgICA8L2c+CiAgICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSI2LjUiIGZpbGw9IiNmYWNjMTUiIHN0cm9rZT0iI2Y1OWUwYiIgc3Ryb2tlLXdpZHRoPSIxLjIiIC8+CiAgPC9nPgo8L3N2Zz4K") 20 20, pointer;
}

[data-theme='leopard'] a,
[data-theme='leopard'] button,
[data-theme='leopard'] input,
[data-theme='leopard'] textarea,
[data-theme='leopard'] select,
[data-theme='leopard'] label {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InNoYWRvdyIgeD0iLTIwJSIgeT0iLTIwJSIgd2lkdGg9IjE0MCUiIGhlaWdodD0iMTQwJSI+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIyIiBzdGREZXZpYXRpb249IjEuNiIgZmxvb2QtY29sb3I9IiM3YTRiMWIiIGZsb29kLW9wYWNpdHk9IjAuMzUiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8ZyBmaWx0ZXI9InVybCgjc2hhZG93KSI+CiAgICA8Y2lyY2xlIGN4PSIyNCIgY3k9IjI2IiByPSIxNCIgZmlsbD0iI2YyYzE1YyIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjEuNCIvPgogICAgPGNpcmNsZSBjeD0iMTQiIGN5PSIxMiIgcj0iNSIgZmlsbD0iI2YyYzE1YyIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjEuMiIvPgogICAgPGNpcmNsZSBjeD0iMzQiIGN5PSIxMiIgcj0iNSIgZmlsbD0iI2YyYzE1YyIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjEuMiIvPgogICAgPGNpcmNsZSBjeD0iMTQiIGN5PSIxMiIgcj0iMi42IiBmaWxsPSIjZjdkODhhIi8+CiAgICA8Y2lyY2xlIGN4PSIzNCIgY3k9IjEyIiByPSIyLjYiIGZpbGw9IiNmN2Q4OGEiLz4KCiAgICA8ZWxsaXBzZSBjeD0iMTkiIGN5PSIyNCIgcng9IjIuMiIgcnk9IjMiIGZpbGw9IiMxYjFiMWIiLz4KICAgIDxlbGxpcHNlIGN4PSIyOSIgY3k9IjI0IiByeD0iMi4yIiByeT0iMyIgZmlsbD0iIzFiMWIxYiIvPgogICAgPGNpcmNsZSBjeD0iMTkuNSIgY3k9IjI0LjgiIHI9IjAuNyIgZmlsbD0iI2Y3ZTljNCIvPgogICAgPGNpcmNsZSBjeD0iMjkuNSIgY3k9IjI0LjgiIHI9IjAuNyIgZmlsbD0iI2Y3ZTljNCIvPgoKICAgIDxlbGxpcHNlIGN4PSIyNCIgY3k9IjMwIiByeD0iNi4yIiByeT0iNC42IiBmaWxsPSIjZjdlOWM0IiBzdHJva2U9IiM3YTRiMWIiIHN0cm9rZS13aWR0aD0iMC44Ii8+CiAgICA8cGF0aCBkPSJNMjIgMjguNSBMMjYgMjguNSBMMjQgMzEuMiBaIiBmaWxsPSIjM2IyNDEzIi8+CiAgICA8cGF0aCBkPSJNMTguOCAzMi40IHE1LjIgMy42IDEwLjQgMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjAuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNMTguNCAzMS42IHEzIDIgNS42IDEuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNMjkuNiAzMS42IHEtMyAyIC01LjYgMS40IiBmaWxsPSJub25lIiBzdHJva2U9IiM3YTRiMWIiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KCiAgICA8cGF0aCBkPSJNOCAyNCBoNyIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNNyAyOCBoOCIgc3Ryb2tlPSIjN2E0YjFiIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNNDAgMjQgaC03IiBzdHJva2U9IiM3YTRiMWIiIHN0cm9rZS13aWR0aD0iMC44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICAgIDxwYXRoIGQ9Ik00MSAyOCBoLTgiIHN0cm9rZT0iIzdhNGIxYiIgc3Ryb2tlLXdpZHRoPSIwLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgoKICAgIDxjaXJjbGUgY3g9IjE1IiBjeT0iMjAiIHI9IjEuNiIgZmlsbD0iIzNiMjQxMyIvPgogICAgPGNpcmNsZSBjeD0iMTIiIGN5PSIyNSIgcj0iMS40IiBmaWxsPSIjM2IyNDEzIi8+CiAgICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjMwIiByPSIxLjUiIGZpbGw9IiMzYjI0MTMiLz4KICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMTYiIHI9IjEuMyIgZmlsbD0iIzNiMjQxMyIvPgogICAgPGNpcmNsZSBjeD0iMjQiIGN5PSIxNCIgcj0iMS40IiBmaWxsPSIjM2IyNDEzIi8+CiAgICA8Y2lyY2xlIGN4PSIyOCIgY3k9IjE2IiByPSIxLjMiIGZpbGw9IiMzYjI0MTMiLz4KICAgIDxjaXJjbGUgY3g9IjMyIiBjeT0iMjAiIHI9IjEuNiIgZmlsbD0iIzNiMjQxMyIvPgogICAgPGNpcmNsZSBjeD0iMzYiIGN5PSIyNSIgcj0iMS40IiBmaWxsPSIjM2IyNDEzIi8+CiAgICA8Y2lyY2xlIGN4PSIzMiIgY3k9IjMwIiByPSIxLjUiIGZpbGw9IiMzYjI0MTMiLz4KICA8L2c+Cjwvc3ZnPgo=") 24 24, pointer;
}

[data-theme='polite-blue'] a,
[data-theme='polite-blue'] button,
[data-theme='polite-blue'] input,
[data-theme='polite-blue'] textarea,
[data-theme='polite-blue'] select,
[data-theme='polite-blue'] label {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InNoYWRvdyIgeD0iLTIwJSIgeT0iLTIwJSIgd2lkdGg9IjE0MCUiIGhlaWdodD0iMTQwJSI+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIyIiBzdGREZXZpYXRpb249IjEuNiIgZmxvb2QtY29sb3I9IiM3ZmI2ZmYiIGZsb29kLW9wYWNpdHk9IjAuMzUiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8ZyBmaWx0ZXI9InVybCgjc2hhZG93KSI+CiAgICA8ZyBmaWxsPSIjY2ZlM2ZmIiBzdHJva2U9IiM4ZmI4ZmYiIHN0cm9rZS13aWR0aD0iMS4xIj4KICAgICAgPGVsbGlwc2UgY3g9IjIwIiBjeT0iOC41IiByeD0iNS4yIiByeT0iNy4yIiAvPgogICAgICA8ZWxsaXBzZSBjeD0iMjAiIGN5PSI4LjUiIHJ4PSI1LjIiIHJ5PSI3LjIiIHRyYW5zZm9ybT0icm90YXRlKDcyIDIwIDIwKSIgLz4KICAgICAgPGVsbGlwc2UgY3g9IjIwIiBjeT0iOC41IiByeD0iNS4yIiByeT0iNy4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxNDQgMjAgMjApIiAvPgogICAgICA8ZWxsaXBzZSBjeD0iMjAiIGN5PSI4LjUiIHJ4PSI1LjIiIHJ5PSI3LjIiIHRyYW5zZm9ybT0icm90YXRlKDIxNiAyMCAyMCkiIC8+CiAgICAgIDxlbGxpcHNlIGN4PSIyMCIgY3k9IjguNSIgcng9IjUuMiIgcnk9IjcuMiIgdHJhbnNmb3JtPSJyb3RhdGUoMjg4IDIwIDIwKSIgLz4KICAgIDwvZz4KICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjUuOCIgZmlsbD0iI2ZmZDc3OSIgc3Ryb2tlPSIjZjJiODRiIiBzdHJva2Utd2lkdGg9IjEuMSIgLz4KICA8L2c+Cjwvc3ZnPgo=") 20 20, pointer;
}

.themedLogo {
  filter: var(--logo-filter);
  transition: filter 0.2s ease;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  overflow-x: clip;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

.icon {
  display: inline-flex;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* Rich Editor */
.richEditor {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg);
}

.richEditorToolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  background: var(--gray-50);
}

.richEditorBtn {
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.richEditorBtn:hover {
  border-color: var(--primary-300);
  color: var(--primary-700);
  background: var(--primary-50);
}

.richEditorSurface {
  min-height: 140px;
  padding: 12px;
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  background: var(--card-bg);
}

.richEditorSurface a {
  color: var(--primary-600);
  text-decoration: underline;
}

/* Confetti (birthdays/anniversaries) */
.confettiLayer .confettiPiece {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.9;
  animation-name: confetti-fall;
  animation-duration: var(--confetti-duration, 2s);
  animation-delay: var(--confetti-delay, 0s);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  transform: translate3d(0, 0, 0);
}

@keyframes confetti-fall {
  0% {
    transform: translate3d(0, -12px, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--confetti-drift, 0px), 110vh, 0) rotate(720deg);
    opacity: 0;
  }
}

/* Announcement inline image preview size (global override) */
.itemBody img,
.itemBody picture img,
.itemBody figure img,
.detailItemBody img,
.detailItemBody picture img,
.detailItemBody figure img {
  width: 100% !important;
  max-height: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  background: var(--gray-50);
  display: block;
}

.itemBody .announcementInlineImageWrap,
.detailItemBody .announcementInlineImageWrap {
  max-height: 40px !important;
  overflow: hidden;
}

.itemBody .announcementInlineImageWrap img,
.detailItemBody .announcementInlineImageWrap img {
  width: 100% !important;
  height: 40px !important;
  object-fit: contain !important;
  background: var(--gray-50);
}