:root{--color-bg: #ffffff;--color-bg-subtle: #f9fafb;--color-bg-muted: #f3f4f6;--color-bg-app: #f8f6f3;--color-border: #e5e7eb;--color-border-strong: #d1d5db;--color-text: #111827;--color-text-secondary:#6b7280;--color-text-muted: #9ca3af;--color-primary: #4a7fd7;--color-primary-hover: #3a6abc;--color-primary-soft: #e8f0fa;--color-primary-ring: rgba(74,127,215,.18);--color-success: #3ba589;--color-success-hover: #2e8a72;--color-success-soft: #e4f3ed;--color-error: #c44b4b;--color-error-hover: #a83a3a;--color-error-soft: #fae8e8;--color-warning: #d9952e;--color-warning-hover: #b87d24;--color-warning-soft: #fdf4e3;--color-accent: #d4572a;--color-accent-hover: #b94a22;--color-accent-soft: #fef3ee;--color-bg-warm: #fffbf7;--color-souvenir: #7b5ea7;--color-souvenir-hover:#674d91;--color-souvenir-soft: #f0eaf8;--color-souvenir-ring: rgba(123,94,167,.15);--color-medication: #c45a6a;--color-medication-soft:#faf0f1;--color-streak: #b87d24;--color-streak-soft: #fdf8ee;--color-indigo: #6574b8;--color-indigo-soft: #edf0f9;--color-game-memory: #3ba589;--color-game-puzzle: #d9952e;--color-game-quiz: #4a7fd7;--color-game-simon: #8b5cf6;--color-game-calcul: #c44b4b;--color-game-words: #06b6d4;--color-game-chrono: #7b5ea7;--color-overlay: rgba(0,0,0,.6);--color-overlay-light: rgba(0,0,0,.3);--font-body: "Inter", "DM Sans", system-ui, -apple-system, sans-serif;--font-heading: "DM Serif Display", Georgia, serif;--font-scale: 1.3;--text-xs: calc(11px * var(--font-scale));--text-sm: calc(13px * var(--font-scale));--text-base: calc(15px * var(--font-scale));--text-lg: calc(18px * var(--font-scale));--text-xl: calc(22px * var(--font-scale));--text-2xl: calc(28px * var(--font-scale));--text-3xl: calc(36px * var(--font-scale));--text-4xl: calc(48px * var(--font-scale));--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold:800;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.65;--space-0: 0;--space-0-5: 2px;--space-1: 4px;--space-1-5: 6px;--space-2: 8px;--space-2-5: 10px;--space-3: 12px;--space-3-5: 14px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-full: 999px;--shadow-xs: 0 1px 2px rgba(0,0,0,.04);--shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);--shadow-md: 0 4px 16px rgba(0,0,0,.08);--shadow-lg: 0 8px 32px rgba(0,0,0,.12);--shadow-xl: 0 16px 48px rgba(0,0,0,.16);--shadow-modal: 0 20px 60px rgba(0,0,0,.2);--shadow-toast: 0 10px 15px -3px rgba(0,0,0,.1);--z-base: 0;--z-dropdown: 10;--z-sticky: 20;--z-overlay: 30;--z-modal: 40;--z-toast: 50;--z-critical: 60;--z-skip: 100000;--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s;--duration-slower: .6s;--touch-min: 48px;--touch-comfortable: 56px;--modal-sm: 320px;--modal-md: 420px;--modal-lg: 560px;--content-max: 720px}html.dark,body.night-mode{--color-bg: #111827;--color-bg-subtle: #1f2937;--color-bg-muted: #374151;--color-bg-app: #111827;--color-border: #374151;--color-border-strong: #4b5563;--color-text: #f3f4f6;--color-text-secondary:#d1d5db;--color-text-muted: #d1d5db;--color-primary-soft: #1c3454;--color-primary-ring: rgba(74,127,215,.25);--color-success-soft: #0d3b2e;--color-error-soft: #3d1a1a;--color-warning-soft: #3d2a0e;--color-souvenir-soft: #261640;--color-souvenir-ring: rgba(123,94,167,.25);--color-medication-soft:#351c22;--color-streak-soft: #3d2a0e;--color-indigo-soft: #1d1f3d;--color-bg-warm: #1a1a2e;--color-overlay: rgba(0,0,0,.8);--shadow-xs: 0 1px 2px rgba(0,0,0,.2);--shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);--shadow-md: 0 4px 16px rgba(0,0,0,.3);--shadow-lg: 0 8px 32px rgba(0,0,0,.4);--shadow-xl: 0 16px 48px rgba(0,0,0,.5);--shadow-modal: 0 20px 60px rgba(0,0,0,.5);--shadow-toast: 0 10px 15px -3px rgba(0,0,0,.3)}@media(max-width:320px){:root{--font-scale: 1}}@media(min-width:321px)and (max-width:380px){:root{--font-scale: 1.1}}@media(min-width:381px)and (max-width:480px){:root{--font-scale: 1.2}}@media(min-width:769px){:root{--font-scale: 1.3}}