*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #f8f9fc;--color-surface: #ffffff;--color-text: #1a1a2e;--color-text-muted: #6b7280;--color-primary: #6366f1;--color-primary-hover: #4f46e5;--color-border: #e5e7eb;--color-shadow: rgba(0, 0, 0, .08);--color-on-primary: #ffffff;--color-page-bg: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #f5576c 80%, #fda085 100%);--color-header-bg: #ffffff;--color-header-border: transparent;--color-footer-text: rgba(255, 255, 255, .8);--color-footer-border: rgba(255, 255, 255, .2);--color-hover-bg: rgba(0, 0, 0, .06);--color-on-page: #ffffff;--color-on-page-muted: rgba(255, 255, 255, .85);--color-on-page-subtle: rgba(255, 255, 255, .7);--color-text-shadow: rgba(0, 0, 0, .15);--color-text-shadow-light: rgba(0, 0, 0, .1);--color-section-border: rgba(255, 255, 255, .25);--color-card-image: linear-gradient(135deg, #e0e7ff, #c7d2fe);--color-card-image-placeholder: linear-gradient(135deg, #e8e8ee, #d8d8e0);--color-tag-bg: #f0f0ff;--color-tag-text: var(--color-primary);--color-subject-bg: rgba(255, 255, 255, .2);--color-subject-text: rgba(255, 255, 255, .85);--color-subject-hover: rgba(255, 255, 255, .35);--color-subject-active-bg: #ffffff;--color-subject-active-text: var(--color-text);--color-option-hover: #f0f0ff;--color-exercise-board: #3b4252;--color-exercise-board-text: #eceff4;--color-exercise-cell: #d8dee9;--color-exercise-cell-text: #3b4252;--color-player-0: #c0392b;--color-player-1: #2980b9;--color-overlay-bg: rgba(0, 0, 0, .6);--color-overlay-shadow: rgba(0, 0, 0, .2);--color-success: #27ae60;--color-error: #e74c3c;--color-error-dark: #c0392b;--radius: 12px;--max-width: 1200px}html{font-family:system-ui,-apple-system,sans-serif;background:var(--color-page-bg);background-attachment:fixed;height:100%;min-height:100%;color:var(--color-text);touch-action:manipulation;overflow:hidden}body{min-height:100%;height:100%;display:flex;flex-direction:column;overflow-y:auto}html.high-contrast{--color-bg: #ffffff;--color-surface: #ffffff;--color-text: #000000;--color-text-muted: #333333;--color-primary: #0000cc;--color-primary-hover: #000099;--color-border: #000000;--color-shadow: rgba(0, 0, 0, .3);--color-on-primary: #ffffff;--color-page-bg: #ffffff;--color-header-bg: #ffffff;--color-header-border: #000000;--color-footer-text: #000000;--color-footer-border: #000000;--color-hover-bg: rgba(0, 0, 0, .12);--color-on-page: #000000;--color-on-page-muted: #333333;--color-on-page-subtle: #555555;--color-text-shadow: none;--color-text-shadow-light: none;--color-section-border: #000000;--color-card-image: #e0e0e0;--color-card-image-placeholder: #cccccc;--color-tag-bg: #000000;--color-tag-text: #ffffff;--color-subject-bg: rgba(0, 0, 0, .08);--color-subject-text: #000000;--color-subject-hover: rgba(0, 0, 0, .18);--color-subject-active-bg: #000000;--color-subject-active-text: #ffffff;--color-option-hover: #e0e0e0;--color-exercise-board: #1a1a1a;--color-exercise-board-text: #ffffff;--color-exercise-cell: #e0e0e0;--color-exercise-cell-text: #000000;--color-player-0: #b30000;--color-player-1: #0055aa;--color-overlay-bg: rgba(0, 0, 0, .75);--color-overlay-shadow: rgba(0, 0, 0, .4);--color-success: #006600;--color-error: #cc0000;--color-error-dark: #990000}html.high-contrast .exercise-card,html.high-contrast .search-bar input{border:2px solid var(--color-border)}.dropdown-panel{position:absolute;top:100%;right:0;padding-top:4px;z-index:200}.dropdown-panel-inner{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 4px 16px var(--color-shadow);padding:.75rem}.dropdown-option{display:flex;align-items:center;gap:.5rem;width:100%;white-space:nowrap;text-align:left;padding:.5rem;border:none;background:transparent;color:var(--color-text);cursor:pointer;font-size:.9rem;border-radius:6px;transition:background .1s}.dropdown-option:hover{background:var(--color-hover-bg)}.dropdown-option.active{font-weight:700;color:var(--color-primary)}