@charset "UTF-8";
:root {
  --color-primary-50: #e8ecf0;
  --color-primary-100: #c5d3e0;
  --color-primary-200: #9fb5ca;
  --color-primary-300: #7897b4;
  --color-primary-400: #5a7da3;
  --color-primary-500: #133149;
  --color-primary-600: #102a3e;
  --color-primary-700: #0d2233;
  --color-primary-800: #0a1b28;
  --color-primary-900: #071420;
  --color-secondary-50: #fdf9eb;
  --color-secondary-100: #f9f0c3;
  --color-secondary-200: #f5e69b;
  --color-secondary-300: #f1dc73;
  --color-secondary-400: #edd555;
  --color-secondary-500: #e9c94c;
  --color-secondary-600: #d4b643;
  --color-secondary-700: #b89a38;
  --color-secondary-800: #9c7f2e;
  --color-secondary-900: #806522;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  --color-success: #27ae60;
  --color-success-50: #e8f5e9;
  --color-success-100: #c8e6c9;
  --color-success-200: #a5d6a7;
  --color-success-300: #81c784;
  --color-success-400: #66bb6a;
  --color-success-500: #27ae60;
  --color-success-600: #219a52;
  --color-success-700: #1b7d42;
  --color-success-800: #155d32;
  --color-success-900: #0e3d21;
  --color-success-light: #d4edda;
  --color-success-text: #155724;
  --color-warning: #f39c12;
  --color-warning-50: #fff8e1;
  --color-warning-100: #ffecb3;
  --color-warning-200: #ffe082;
  --color-warning-300: #ffd54f;
  --color-warning-400: #ffca28;
  --color-warning-500: #f39c12;
  --color-warning-600: #e58e0a;
  --color-warning-700: #c77800;
  --color-warning-800: #a66200;
  --color-warning-900: #854d00;
  --color-warning-light: #fff3cd;
  --color-warning-text: #856404;
  --color-error: #e74c3c;
  --color-error-50: #ffebee;
  --color-error-100: #ffcdd2;
  --color-error-200: #ef9a9a;
  --color-error-300: #e57373;
  --color-error-400: #ef5350;
  --color-error-500: #e74c3c;
  --color-error-600: #d32f2f;
  --color-error-700: #c62828;
  --color-error-800: #b71c1c;
  --color-error-900: #7f0000;
  --color-error-light: #f8d7da;
  --color-error-text: #721c24;
  --color-info: #3498db;
  --color-info-50: #e3f2fd;
  --color-info-100: #bbdefb;
  --color-info-200: #90caf9;
  --color-info-300: #64b5f6;
  --color-info-400: #42a5f5;
  --color-info-500: #3498db;
  --color-info-600: #1e88e5;
  --color-info-700: #1976d2;
  --color-info-800: #1565c0;
  --color-info-900: #0d47a1;
  --color-info-light: #d1ecf1;
  --color-info-text: #0c5460;
  --color-bg: #ffffff;
  --color-bg-alt: #fafafa;
  --color-bg-elevated: #ffffff;
  --color-bg-overlay: #ffffff;
  --color-bg-page: #f5f5f5;
  --color-text: #424242;
  --color-text-strong: #212121;
  --color-text-secondary: #757575;
  --color-text-muted: #9e9e9e;
  --color-text-disabled: #bdbdbd;
  --color-text-inverse: #ffffff;
  --color-border: #e0e0e0;
  --color-border-light: #eeeeee;
  --color-border-strong: #bdbdbd;
  --color-divider: #eeeeee;
  --color-link: #133149;
  --color-link-hover: #102a3e;
  --color-link-visited: #5a7da3;
  --color-hover: rgba(0, 0, 0, 0.04);
  --color-active: rgba(0, 0, 0, 0.08);
  --color-selected: rgba(19, 49, 73, 0.08);
  --color-disabled-bg: #f5f5f5;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.3);
  --color-overlay-dark: rgba(0, 0, 0, 0.7);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-color-strong: rgba(0, 0, 0, 0.15);
  --shadow-xs: 0 1px 2px 0 var(--shadow-color);
  --shadow-sm: 0 2px 4px 0 var(--shadow-color);
  --shadow-md: 0 4px 8px -1px var(--shadow-color),
               0 2px 4px -1px var(--shadow-color);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color),
               0 4px 6px -2px var(--shadow-color);
  --shadow-xl: 0 20px 25px -5px var(--shadow-color),
               0 10px 10px -5px var(--shadow-color);
  --shadow-2xl: 0 25px 50px -12px var(--shadow-color-strong);
  --shadow-inner: inset 0 2px 4px 0 var(--shadow-color);
  --color-focus-ring: rgba(19, 49, 73, 0.4);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-focus-error: 0 0 0 3px rgba(231, 76, 60, 0.3);
  --shadow-focus-success: 0 0 0 3px rgba(39, 174, 96, 0.3);
  --theme-transition-duration: 200ms;
}

[data-theme=dark] {
  --color-primary-50: #071420;
  --color-primary-100: #0a1b28;
  --color-primary-200: #0d2233;
  --color-primary-300: #102a3e;
  --color-primary-400: #1a4163;
  --color-primary-500: #4178a8;
  --color-primary-600: #6b9ac4;
  --color-primary-700: #9ebfdb;
  --color-primary-800: #c5d3e0;
  --color-primary-900: #e8ecf0;
  --color-secondary-50: #2a2415;
  --color-secondary-100: #3d3420;
  --color-secondary-200: #5c4e30;
  --color-secondary-300: #7b6940;
  --color-secondary-400: #9a8450;
  --color-secondary-500: #eed26f;
  --color-secondary-600: #f1da8a;
  --color-secondary-700: #f4e2a5;
  --color-secondary-800: #f7eac0;
  --color-secondary-900: #faf2db;
  --color-gray-50: #121212;
  --color-gray-100: #1a1a1a;
  --color-gray-200: #242424;
  --color-gray-300: #2e2e2e;
  --color-gray-400: #404040;
  --color-gray-500: #6b6b6b;
  --color-gray-600: #9e9e9e;
  --color-gray-700: #b3b3b3;
  --color-gray-800: #e0e0e0;
  --color-gray-900: #f5f5f5;
  --color-success: #66bb6a;
  --color-success-50: #0e3d21;
  --color-success-100: #155d32;
  --color-success-200: #1b7d42;
  --color-success-300: #219a52;
  --color-success-400: #27ae60;
  --color-success-500: #66bb6a;
  --color-success-600: #81c784;
  --color-success-700: #a5d6a7;
  --color-success-800: #c8e6c9;
  --color-success-900: #e8f5e9;
  --color-success-light: #1b3d1c;
  --color-success-text: #a5d6a7;
  --color-warning: #ffa726;
  --color-warning-50: #2a1f0a;
  --color-warning-100: #3d2e10;
  --color-warning-200: #5c4518;
  --color-warning-300: #7b5c20;
  --color-warning-400: #9a7328;
  --color-warning-500: #ffa726;
  --color-warning-600: #ffb74d;
  --color-warning-700: #ffc77d;
  --color-warning-800: #ffd7a6;
  --color-warning-900: #ffe7cf;
  --color-warning-light: #3d2e1a;
  --color-warning-text: #ffb74d;
  --color-error: #ef5350;
  --color-error-50: #2a0a0a;
  --color-error-100: #3d1010;
  --color-error-200: #5c1818;
  --color-error-300: #7b2020;
  --color-error-400: #9a2828;
  --color-error-500: #ef5350;
  --color-error-600: #e57373;
  --color-error-700: #ef9a9a;
  --color-error-800: #ffcdd2;
  --color-error-900: #ffebee;
  --color-error-light: #3d1a1a;
  --color-error-text: #e57373;
  --color-info: #42a5f5;
  --color-info-50: #0a1f2a;
  --color-info-100: #102e3d;
  --color-info-200: #18455c;
  --color-info-300: #205c7b;
  --color-info-400: #28739a;
  --color-info-500: #42a5f5;
  --color-info-600: #64b5f6;
  --color-info-700: #90caf9;
  --color-info-800: #bbdefb;
  --color-info-900: #e3f2fd;
  --color-info-light: #1a2d3d;
  --color-info-text: #64b5f6;
  --color-bg: #121212;
  --color-bg-alt: #1a1a1a;
  --color-bg-elevated: #1e1e1e;
  --color-bg-overlay: #242424;
  --color-bg-page: #0a0a0a;
  --color-text: #f5f5f5;
  --color-text-strong: #ffffff;
  --color-text-secondary: #b3b3b3;
  --color-text-muted: #757575;
  --color-text-disabled: #4a4a4a;
  --color-text-inverse: #121212;
  --color-border: #404040;
  --color-border-light: #2e2e2e;
  --color-border-strong: #525252;
  --color-divider: #2e2e2e;
  --color-link: #6b9ac4;
  --color-link-hover: #9ebfdb;
  --color-link-visited: #4178a8;
  --color-hover: rgba(255, 255, 255, 0.08);
  --color-active: rgba(255, 255, 255, 0.12);
  --color-selected: rgba(107, 154, 196, 0.15);
  --color-disabled-bg: #1a1a1a;
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-overlay-light: rgba(0, 0, 0, 0.5);
  --color-overlay-dark: rgba(0, 0, 0, 0.85);
  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow-color-strong: rgba(0, 0, 0, 0.6);
  --color-focus-ring: rgba(107, 154, 196, 0.5);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-focus-error: 0 0 0 3px rgba(239, 83, 80, 0.4);
  --shadow-focus-success: 0 0 0 3px rgba(102, 187, 106, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --color-primary-50: #071420;
    --color-primary-100: #0a1b28;
    --color-primary-200: #0d2233;
    --color-primary-300: #102a3e;
    --color-primary-400: #1a4163;
    --color-primary-500: #4178a8;
    --color-primary-600: #6b9ac4;
    --color-primary-700: #9ebfdb;
    --color-primary-800: #c5d3e0;
    --color-primary-900: #e8ecf0;
    --color-secondary-50: #2a2415;
    --color-secondary-100: #3d3420;
    --color-secondary-200: #5c4e30;
    --color-secondary-300: #7b6940;
    --color-secondary-400: #9a8450;
    --color-secondary-500: #eed26f;
    --color-secondary-600: #f1da8a;
    --color-secondary-700: #f4e2a5;
    --color-secondary-800: #f7eac0;
    --color-secondary-900: #faf2db;
    --color-gray-50: #121212;
    --color-gray-100: #1a1a1a;
    --color-gray-200: #242424;
    --color-gray-300: #2e2e2e;
    --color-gray-400: #404040;
    --color-gray-500: #6b6b6b;
    --color-gray-600: #9e9e9e;
    --color-gray-700: #b3b3b3;
    --color-gray-800: #e0e0e0;
    --color-gray-900: #f5f5f5;
    --color-success: #66bb6a;
    --color-success-light: #1b3d1c;
    --color-success-text: #a5d6a7;
    --color-warning: #ffa726;
    --color-warning-light: #3d2e1a;
    --color-warning-text: #ffb74d;
    --color-error: #ef5350;
    --color-error-light: #3d1a1a;
    --color-error-text: #e57373;
    --color-info: #42a5f5;
    --color-info-light: #1a2d3d;
    --color-info-text: #64b5f6;
    --color-bg: #121212;
    --color-bg-alt: #1a1a1a;
    --color-bg-elevated: #1e1e1e;
    --color-bg-overlay: #242424;
    --color-bg-page: #0a0a0a;
    --color-text: #f5f5f5;
    --color-text-strong: #ffffff;
    --color-text-secondary: #b3b3b3;
    --color-text-muted: #757575;
    --color-text-disabled: #4a4a4a;
    --color-text-inverse: #121212;
    --color-border: #404040;
    --color-border-light: #2e2e2e;
    --color-border-strong: #525252;
    --color-divider: #2e2e2e;
    --color-link: #6b9ac4;
    --color-link-hover: #9ebfdb;
    --color-hover: rgba(255, 255, 255, 0.08);
    --color-active: rgba(255, 255, 255, 0.12);
    --color-selected: rgba(107, 154, 196, 0.15);
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-light: rgba(0, 0, 0, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-color-strong: rgba(0, 0, 0, 0.6);
    --color-focus-ring: rgba(107, 154, 196, 0.5);
    --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  }
}
body,
.site-header,
.site-footer,
.card,
.card-welcome,
.card-test,
.auth-card,
.player,
.player-card,
.btn,
.form-input,
.form-select,
.badge,
.tag,
.alert {
  transition: background-color var(--theme-transition-duration) ease, border-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease, box-shadow var(--theme-transition-duration) ease;
}

html.no-transitions,
html.no-transitions * {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition-duration: 0ms;
  }
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.theme-toggle:hover {
  background: var(--color-hover);
  color: var(--color-text);
}
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.theme-toggle__icon {
  width: 20px;
  height: 20px;
}
.theme-toggle__icon--dark {
  display: none;
}

[data-theme=dark] .theme-toggle__icon--light {
  display: none;
}
[data-theme=dark] .theme-toggle__icon--dark {
  display: block;
}

:root {
  --color-brand-blue: #193658;
  --color-brand-gold: #ebce38;
  --color-primary: #193658;
  --color-primary-hover: #102a45;
  --color-primary-active: #0d2238;
  --color-primary-light: rgba(25, 54, 88, 0.1);
  --color-primary-contrast: #ffffff;
  --color-accent: #ebce38;
  --color-accent-hover: #c9a82e;
  --color-accent-active: #b89726;
  --color-accent-light: rgba(235, 206, 56, 0.15);
  --color-accent-contrast: #07385c;
  --bg-page: #fffef8;
  --bg-content: #ffffff;
  --bg-header: #193658;
  --bg-footer: #0a1628;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --text-primary: #07385c;
  --text-secondary: #213757;
  --text-muted: #9b9e9d;
  --text-inverse: #ffffff;
  --text-on-primary: #ffffff;
  --text-on-accent: #07385c;
  --border-color: #d1d9e0;
  --border-light: #e8eef3;
  --border-strong: #213757;
  --border-accent: #e9c662;
  --hover-bg: rgba(25, 54, 88, 0.04);
  --active-bg: rgba(25, 54, 88, 0.08);
  --focus-ring: rgba(235, 206, 56, 0.4);
  --selected-bg: rgba(235, 206, 56, 0.12);
  --shadow-color: rgba(25, 54, 88, 0.08);
  --shadow-color-strong: rgba(25, 54, 88, 0.15);
  --shadow-xs: 0 1px 2px var(--shadow-color);
  --shadow-sm: 0 2px 4px var(--shadow-color);
  --shadow-md: 0 4px 12px var(--shadow-color), 0 2px 4px var(--shadow-color);
  --shadow-lg: 0 8px 24px var(--shadow-color-strong);
  --shadow-xl: 0 16px 48px var(--shadow-color-strong);
  --shadow-accent: 0 4px 20px rgba(235, 206, 56, 0.35);
  --shadow-accent-hover: 0 8px 30px rgba(235, 206, 56, 0.5);
  --color-success: #27ae60;
  --color-success-hover: #1e8449;
  --color-success-bg: rgba(39, 174, 96, 0.1);
  --color-success-text: #155724;
  --color-warning: #f39c12;
  --color-warning-hover: #d68910;
  --color-warning-bg: rgba(243, 156, 18, 0.1);
  --color-warning-text: #856404;
  --color-error: #e74c3c;
  --color-error-hover: #c9302c;
  --color-error-bg: rgba(231, 76, 60, 0.1);
  --color-error-text: #721c24;
  --color-info: #3498db;
  --color-info-hover: #2980b9;
  --color-info-bg: rgba(52, 152, 219, 0.1);
  --color-info-text: #0c5460;
  --color-focus-ring: rgba(235, 206, 56, 0.5);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-focus-error: 0 0 0 3px rgba(231, 76, 60, 0.3);
  --shadow-focus-success: 0 0 0 3px rgba(39, 174, 96, 0.3);
}

[data-theme=dark] {
  --color-brand-blue: #193658;
  --color-brand-gold: #ebce38;
  --color-primary: #6b9ac4;
  --color-primary-hover: #8eb5d6;
  --color-primary-active: #5a8ab4;
  --color-primary-light: rgba(107, 154, 196, 0.15);
  --color-primary-contrast: #161b22;
  --color-accent: #ebce38;
  --color-accent-hover: #f4d03f;
  --color-accent-active: #d8b022;
  --color-accent-light: rgba(235, 206, 56, 0.2);
  --color-accent-contrast: #07385c;
  --bg-page: #0a0d12;
  --bg-content: #161b22;
  --bg-header: #0d1117;
  --bg-footer: #0a0d12;
  --bg-card: #161b22;
  --bg-input: #1a1f26;
  --text-primary: #f0f6fc;
  --text-secondary: #c9d1d9;
  --text-muted: #8b949e;
  --text-inverse: #0a0d12;
  --text-on-primary: #161b22;
  --text-on-accent: #07385c;
  --border-color: #30363d;
  --border-light: #21262d;
  --border-strong: #484f58;
  --border-accent: #e9c662;
  --hover-bg: rgba(255, 255, 255, 0.08);
  --active-bg: rgba(255, 255, 255, 0.12);
  --focus-ring: rgba(235, 206, 56, 0.5);
  --selected-bg: rgba(235, 206, 56, 0.15);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-color-strong: rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 4px 20px rgba(235, 206, 56, 0.25);
  --shadow-accent-hover: 0 8px 30px rgba(235, 206, 56, 0.4);
  --color-success: #3dd68c;
  --color-success-hover: #56de9c;
  --color-success-bg: rgba(61, 214, 140, 0.15);
  --color-success-text: #a5d6a7;
  --color-warning: #f7c948;
  --color-warning-hover: #f9d56a;
  --color-warning-bg: rgba(247, 201, 72, 0.15);
  --color-warning-text: #ffb74d;
  --color-error: #f97583;
  --color-error-hover: #fa8f9a;
  --color-error-bg: rgba(249, 117, 131, 0.15);
  --color-error-text: #e57373;
  --color-info: #58a6ff;
  --color-info-hover: #79b8ff;
  --color-info-bg: rgba(88, 166, 255, 0.15);
  --color-info-text: #64b5f6;
  --color-focus-ring: rgba(235, 206, 56, 0.6);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-focus-error: 0 0 0 3px rgba(249, 117, 131, 0.4);
  --shadow-focus-success: 0 0 0 3px rgba(61, 214, 140, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --color-primary: #6b9ac4;
    --bg-page: #0a0d12;
    --bg-content: #161b22;
    --text-primary: #f0f6fc;
    --text-secondary: #c9d1d9;
    --border-color: #30363d;
  }
}
:root {
  --bg-page: #eaecee;
  --bg-content: #ffffff;
  --bg-header: #ffffff;
  --bg-footer: #ffffff;
  --color-primary: #133149;
  --color-accent: #e9c94c;
  --color-brand-blue: #133149;
  --color-brand-gold: #e9c94c;
  --text-primary: #133149;
  --text-secondary: #383838;
  --text-muted: #6c757d;
  --text-inverse: #ffffff;
  --border-color: #dee2e6;
  --border-light: #eaecee;
  --hover-bg: #f0f2f4;
  --active-bg: #e2e6ea;
  --focus-ring: rgba(19, 49, 73, 0.25);
  --shadow-sm: 0 2px 8px rgba(19, 49, 73, 0.06);
  --shadow-md: 0 4px 20px rgba(19, 49, 73, 0.08);
  --shadow-lg: 0 12px 40px rgba(19, 49, 73, 0.15);
  --color-success: #27ae60;
  --color-success-bg: rgba(39, 174, 96, 0.1);
  --color-warning: #f39c12;
  --color-warning-bg: rgba(243, 156, 18, 0.1);
  --color-error: #e74c3c;
  --color-error-bg: rgba(231, 76, 60, 0.1);
  --color-info: #3498db;
  --color-info-bg: rgba(52, 152, 219, 0.1);
}

[data-theme=dark] {
  --bg-page: #0d1117;
  --bg-content: #161b22;
  --bg-header: #161b22;
  --bg-footer: #161b22;
  --color-primary: #e9c94c;
  --color-accent: #e9c94c;
  --text-primary: #f0f6fc;
  --text-secondary: #c9d1d9;
  --text-muted: #8b949e;
  --text-inverse: #0d1117;
  --border-color: #30363d;
  --border-light: #21262d;
  --hover-bg: #21262d;
  --active-bg: #30363d;
  --focus-ring: rgba(233, 201, 76, 0.25);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --color-success: #3dd68c;
  --color-success-bg: rgba(61, 214, 140, 0.15);
  --color-warning: #f7c948;
  --color-warning-bg: rgba(247, 201, 72, 0.15);
  --color-error: #f97583;
  --color-error-bg: rgba(249, 117, 131, 0.15);
  --color-info: #58a6ff;
  --color-info-bg: rgba(88, 166, 255, 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Calibri", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: "Segoe UI", "Calibri", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text-strong);
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

h1, .h1 {
  font-size: 3rem;
}
@media (max-width: 767px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: 2.5rem;
}
@media (max-width: 767px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: 2rem;
}
@media (max-width: 767px) {
  h3, .h3 {
    font-size: 1.5rem;
  }
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

.lead {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.small {
  font-size: 0.875rem;
}

.text-muted {
  color: var(--color-text-muted);
}

a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

::selection {
  background-color: var(--color-selected);
  color: var(--color-text);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", "Calibri", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --header-height: 64px;
  --footer-height: 80px;
  --container-padding: 1rem;
}
@media (min-width: 768px) {
  :root {
    --header-height: 72px;
    --container-padding: 1.5rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --container-padding: 2rem;
  }
}

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fffef8;
  background-image: linear-gradient(180deg, #fffef8 0%, #fdf9e8 100%);
  transition: background-color 200ms ease, background-image 200ms ease;
}

.layout[data-theme=dark] {
  background-color: #0a0d12;
  background-image: linear-gradient(180deg, #0a0d12 0%, #0f1318 50%, #0a0d12 100%);
}

.layout__header {
  position: sticky;
  top: 0;
  z-index: 1100;
  flex-shrink: 0;
}

.layout__content {
  flex: 1 1 auto;
  width: 100%;
  position: static;
  z-index: auto;
  display: flex;
  flex-direction: column;
}

.layout__footer {
  flex-shrink: 0;
  margin-top: auto;
}

.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fffef8;
  background-image: linear-gradient(180deg, #fffef8 0%, #fdf9e8 100%);
  transition: background-color 200ms ease, background-image 200ms ease;
}

[data-theme=dark] .site-wrapper {
  background-color: #0a0d12;
  background-image: linear-gradient(180deg, #0a0d12 0%, #0f1318 50%, #0a0d12 100%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  flex-shrink: 0;
  background: var(--bg-header, #193658);
  border-bottom: 1px solid rgba(233, 198, 98, 0.15);
  height: var(--header-height);
  transition: background-color 200ms ease, border-color 200ms ease;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1024px) {
  .container {
    padding-left: 48px;
    padding-right: 48px;
  }
}

.container--fluid {
  max-width: none;
}

.container--narrow {
  max-width: 720px;
}

.container--wide {
  max-width: 1440px;
}

.page-container {
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem var(--container-padding);
}
@media (min-width: 768px) {
  .page-container {
    padding: 2rem var(--container-padding);
  }
}
.page-container--narrow {
  max-width: 480px;
}
.page-container--medium {
  max-width: 960px;
}
.page-container--wide {
  max-width: 1200px;
}
.page-container--full {
  max-width: none;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}
.page-container--immersive {
  max-width: none;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 768px) {
  .content {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .content {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.content--box {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(216, 176, 34, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(233, 198, 98, 0.12);
  padding: 1.5rem;
  transition: 200ms ease;
}
@media (min-width: 768px) {
  .content--box {
    padding: 2rem;
  }
}
@media (min-width: 1024px) {
  .content--box {
    padding: 2.5rem;
  }
}
.layout[data-theme=dark] .content--box, [data-theme=dark] .content--box {
  background-color: #161b22;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.page-header {
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .page-header {
    margin-bottom: 2rem;
  }
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #07385c;
  margin: 0 0 0.5rem;
}
@media (min-width: 768px) {
  .page-title {
    font-size: 2.5rem;
  }
}
.layout[data-theme=dark] .page-title, [data-theme=dark] .page-title {
  color: #f0f6fc;
}

.page-subtitle {
  font-size: 1rem;
  color: #213757;
  margin: 0;
}
@media (min-width: 768px) {
  .page-subtitle {
    font-size: 1.25rem;
  }
}
.layout[data-theme=dark] .page-subtitle, [data-theme=dark] .page-subtitle {
  color: #c9d1d9;
}

.section {
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .section {
    margin-bottom: 2.5rem;
  }
}
.section:last-child {
  margin-bottom: 0;
}

.section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.section__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #07385c;
  margin: 0;
}
@media (min-width: 768px) {
  .section__title {
    font-size: 1.5rem;
  }
}
.layout[data-theme=dark] .section__title, [data-theme=dark] .section__title {
  color: #f0f6fc;
}

.section__subtitle {
  font-size: 0.875rem;
  color: #9b9e9d;
  margin: 0;
}
.layout[data-theme=dark] .section__subtitle, [data-theme=dark] .section__subtitle {
  color: #c9d1d9;
}

.site-footer {
  flex-shrink: 0;
  margin-top: auto;
  background: var(--bg-footer, #0a1628);
  border-top: 1px solid rgba(233, 198, 98, 0.15);
  padding: 1.5rem 0;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.layout[data-theme=dark] .site-footer, [data-theme=dark] .site-footer {
  background: #0a0d12;
  border-top-color: rgba(255, 255, 255, 0.08);
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  padding: 1.5rem var(--container-padding);
  background: transparent;
}

.auth-card {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.layout[data-theme=dark] .auth-card, [data-theme=dark] .auth-card {
  background: #161b22;
}

.auth-header {
  padding: 2rem 1.5rem 1rem;
  text-align: center;
}

.auth-logo {
  width: 120px;
  height: auto;
  margin: 0 auto 1.5rem;
}

.auth-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #07385c;
  margin: 0 0 0.5rem;
}
.layout[data-theme=dark] .auth-title, [data-theme=dark] .auth-title {
  color: #f0f6fc;
}

.auth-subtitle {
  font-size: 0.875rem;
  color: #213757;
  margin: 0;
}
.layout[data-theme=dark] .auth-subtitle, [data-theme=dark] .auth-subtitle {
  color: #c9d1d9;
}

.auth-body {
  padding: 1rem 1.5rem 1.5rem;
}

.auth-footer {
  padding: 1rem 1.5rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(233, 198, 98, 0.12);
  background: rgba(255, 254, 248, 0.5);
}
.layout[data-theme=dark] .auth-footer, [data-theme=dark] .auth-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: rgba(22, 27, 34, 0.5);
}

.auth-footer__text {
  font-size: 0.875rem;
  color: #9b9e9d;
  margin: 0 0 0.75rem;
}
.layout[data-theme=dark] .auth-footer__text, [data-theme=dark] .auth-footer__text {
  color: #8b949e;
}

.auth-footer__link {
  color: #193658;
  text-decoration: none;
  font-weight: 500;
}
.auth-footer__link:hover {
  color: #102a45;
  text-decoration: underline;
}
.layout[data-theme=dark] .auth-footer__link, [data-theme=dark] .auth-footer__link {
  color: #ebce38;
}
.layout[data-theme=dark] .auth-footer__link:hover, [data-theme=dark] .auth-footer__link:hover {
  color: #c9a82e;
}

.messages-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem var(--container-padding);
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.grid--cols-2 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid--cols-3 {
  grid-template-columns: 1fr;
}
@media (min-width: 576px) {
  .grid--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid--cols-4 {
  grid-template-columns: 1fr;
}
@media (min-width: 576px) {
  .grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid--gap-sm {
  gap: 1rem;
}

.grid--gap-lg {
  gap: 2rem;
}

.flex {
  display: flex;
}

.flex--center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex--between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex--column {
  flex-direction: column;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--gap-sm {
  gap: 0.5rem;
}

.flex--gap-md {
  gap: 1rem;
}

.flex--gap-lg {
  gap: 1.5rem;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-0 {
  margin-top: 0;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

@media (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-desktop {
    display: none !important;
  }
}

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

.page--gold-bg {
  background-color: #fffef8 !important;
  background-image: linear-gradient(180deg, #fffef8 0%, #fdf9e8 100%) !important;
}

.page--standard-bg {
  background-color: #f8f9fa !important;
  background-image: none !important;
}

.page--gold-bg-subtle {
  background-color: #fffef8 !important;
}

.page--gold-bg-visible {
  background-color: #fefcf0 !important;
}

.page--gold-bg-strong {
  background-color: #fdf9e8 !important;
}

.grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .grid {
    gap: 1.5rem;
  }
}

.grid--2cols {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid--2cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid--3cols {
  grid-template-columns: 1fr;
}
@media (min-width: 576px) {
  .grid--3cols {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid--3cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid--4cols {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .grid--4cols {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .grid--4cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.col-span-2 {
  grid-column: span 2;
}
@media (max-width: 767px) {
  .col-span-2 {
    grid-column: span 1;
  }
}

.col-span-3 {
  grid-column: span 3;
}
@media (max-width: 1023px) {
  .col-span-3 {
    grid-column: span 2;
  }
}
@media (max-width: 767px) {
  .col-span-3 {
    grid-column: span 1;
  }
}

.col-span-full {
  grid-column: 1/-1;
}

.form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-grid__full {
  grid-column: 1/-1;
}

.grid--sidebar {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .grid--sidebar {
    grid-template-columns: 280px 1fr;
  }
}

.grid--sidebar-right {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .grid--sidebar-right {
    grid-template-columns: 1fr 280px;
  }
}

.grid--gap-sm {
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .grid--gap-sm {
    gap: 0.75rem;
  }
}

.grid--gap-lg {
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .grid--gap-lg {
    gap: 2rem;
  }
}

.grid--gap-none {
  gap: 0;
}

:root {
  --color-brand-blue: #193658;
  --color-brand-gold: #ebce38;
  --color-primary: #193658;
  --color-primary-hover: #102a45;
  --color-primary-active: #0d2238;
  --color-primary-light: rgba(25, 54, 88, 0.1);
  --color-primary-contrast: #ffffff;
  --color-accent: #ebce38;
  --color-accent-hover: #c9a82e;
  --color-accent-active: #b89726;
  --color-accent-light: rgba(235, 206, 56, 0.15);
  --color-accent-contrast: #07385c;
  --bg-page: #fffef8;
  --bg-content: #ffffff;
  --bg-header: #193658;
  --bg-footer: #0a1628;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --text-primary: #07385c;
  --text-secondary: #213757;
  --text-muted: #9b9e9d;
  --text-inverse: #ffffff;
  --text-on-primary: #ffffff;
  --text-on-accent: #07385c;
  --border-color: #d1d9e0;
  --border-light: #e8eef3;
  --border-strong: #213757;
  --border-accent: #e9c662;
  --hover-bg: rgba(25, 54, 88, 0.04);
  --active-bg: rgba(25, 54, 88, 0.08);
  --focus-ring: rgba(235, 206, 56, 0.4);
  --selected-bg: rgba(235, 206, 56, 0.12);
  --shadow-color: rgba(25, 54, 88, 0.08);
  --shadow-color-strong: rgba(25, 54, 88, 0.15);
  --shadow-xs: 0 1px 2px var(--shadow-color);
  --shadow-sm: 0 2px 4px var(--shadow-color);
  --shadow-md: 0 4px 12px var(--shadow-color), 0 2px 4px var(--shadow-color);
  --shadow-lg: 0 8px 24px var(--shadow-color-strong);
  --shadow-xl: 0 16px 48px var(--shadow-color-strong);
  --shadow-accent: 0 4px 20px rgba(235, 206, 56, 0.35);
  --shadow-accent-hover: 0 8px 30px rgba(235, 206, 56, 0.5);
  --color-success: #27ae60;
  --color-success-hover: #1e8449;
  --color-success-bg: rgba(39, 174, 96, 0.1);
  --color-success-text: #155724;
  --color-warning: #f39c12;
  --color-warning-hover: #d68910;
  --color-warning-bg: rgba(243, 156, 18, 0.1);
  --color-warning-text: #856404;
  --color-error: #e74c3c;
  --color-error-hover: #c9302c;
  --color-error-bg: rgba(231, 76, 60, 0.1);
  --color-error-text: #721c24;
  --color-info: #3498db;
  --color-info-hover: #2980b9;
  --color-info-bg: rgba(52, 152, 219, 0.1);
  --color-info-text: #0c5460;
  --color-focus-ring: rgba(235, 206, 56, 0.5);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-focus-error: 0 0 0 3px rgba(231, 76, 60, 0.3);
  --shadow-focus-success: 0 0 0 3px rgba(39, 174, 96, 0.3);
}

[data-theme=dark] {
  --color-brand-blue: #193658;
  --color-brand-gold: #ebce38;
  --color-primary: #6b9ac4;
  --color-primary-hover: #8eb5d6;
  --color-primary-active: #5a8ab4;
  --color-primary-light: rgba(107, 154, 196, 0.15);
  --color-primary-contrast: #161b22;
  --color-accent: #ebce38;
  --color-accent-hover: #f4d03f;
  --color-accent-active: #d8b022;
  --color-accent-light: rgba(235, 206, 56, 0.2);
  --color-accent-contrast: #07385c;
  --bg-page: #0a0d12;
  --bg-content: #161b22;
  --bg-header: #0d1117;
  --bg-footer: #0a0d12;
  --bg-card: #161b22;
  --bg-input: #1a1f26;
  --text-primary: #f0f6fc;
  --text-secondary: #c9d1d9;
  --text-muted: #8b949e;
  --text-inverse: #0a0d12;
  --text-on-primary: #161b22;
  --text-on-accent: #07385c;
  --border-color: #30363d;
  --border-light: #21262d;
  --border-strong: #484f58;
  --border-accent: #e9c662;
  --hover-bg: rgba(255, 255, 255, 0.08);
  --active-bg: rgba(255, 255, 255, 0.12);
  --focus-ring: rgba(235, 206, 56, 0.5);
  --selected-bg: rgba(235, 206, 56, 0.15);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-color-strong: rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 4px 20px rgba(235, 206, 56, 0.25);
  --shadow-accent-hover: 0 8px 30px rgba(235, 206, 56, 0.4);
  --color-success: #3dd68c;
  --color-success-hover: #56de9c;
  --color-success-bg: rgba(61, 214, 140, 0.15);
  --color-success-text: #a5d6a7;
  --color-warning: #f7c948;
  --color-warning-hover: #f9d56a;
  --color-warning-bg: rgba(247, 201, 72, 0.15);
  --color-warning-text: #ffb74d;
  --color-error: #f97583;
  --color-error-hover: #fa8f9a;
  --color-error-bg: rgba(249, 117, 131, 0.15);
  --color-error-text: #e57373;
  --color-info: #58a6ff;
  --color-info-hover: #79b8ff;
  --color-info-bg: rgba(88, 166, 255, 0.15);
  --color-info-text: #64b5f6;
  --color-focus-ring: rgba(235, 206, 56, 0.6);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-focus-error: 0 0 0 3px rgba(249, 117, 131, 0.4);
  --shadow-focus-success: 0 0 0 3px rgba(61, 214, 140, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --color-primary: #6b9ac4;
    --bg-page: #0a0d12;
    --bg-content: #161b22;
    --text-primary: #f0f6fc;
    --text-secondary: #c9d1d9;
    --border-color: #30363d;
  }
}
.header {
  background: linear-gradient(135deg, #193658 0%, #0d1f33 50%, #0a1628 100%);
  border-bottom: 1px solid rgba(233, 198, 98, 0.15);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0;
  z-index: 1100;
  overflow: visible;
  transition: 200ms ease;
}
@media (min-width: 768px) {
  .header {
    height: 72px;
    padding: 0 2rem;
  }
}
@media (min-width: 1024px) {
  .header {
    padding: 0 48px;
  }
}
.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 300px;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
  pointer-events: none;
}
.header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 208, 63, 0.4), transparent);
  pointer-events: none;
}

.header--transparent {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}
.header--transparent::before, .header--transparent::after {
  display: none;
}

.header--with-back {
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .header--with-back {
    gap: 1rem;
  }
}

.header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(233, 198, 98, 0.2);
  border-radius: 9999px;
  color: #e6ecf3;
  text-decoration: none;
  transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .header__back {
    width: 40px;
    height: 40px;
  }
}
.header__back:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(233, 198, 98, 0.4);
  transform: translateX(-2px);
}
.header__back:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 208, 63, 0.3);
}
.header__back svg {
  width: 20px;
  height: 20px;
}
@media (min-width: 768px) {
  .header__back svg {
    width: 22px;
    height: 22px;
  }
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  filter: drop-shadow(0 0 15px rgba(244, 208, 63, 0.3));
}
.header__logo:hover .header__logo-icon {
  transform: scale(1.05);
}

.header__logo-icon {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
  border: 2px solid #f4d03f;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(244, 208, 63, 0.2), inset 0 0 15px rgba(244, 208, 63, 0.1);
  transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) {
  .header__logo-icon {
    width: 46px;
    height: 46px;
  }
}
.header__logo-icon svg {
  width: 24px;
  height: 24px;
}
@media (min-width: 768px) {
  .header__logo-icon svg {
    width: 28px;
    height: 28px;
  }
}
.header__logo-icon svg circle, .header__logo-icon svg path {
  stroke: #f4d03f;
}
.header__logo-icon svg circle[fill] {
  fill: #f4d03f;
}

.header__logo-text {
  display: none;
}
@media (min-width: 576px) {
  .header__logo-text {
    display: block;
  }
}

.header__logo-name {
  font-size: 1.25rem;
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 3px;
  line-height: 1.2;
  font-family: "Playfair Display", Georgia, serif;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}
@media (min-width: 768px) {
  .header__logo-name {
    font-size: 26px;
  }
}

.header__logo-tagline {
  font-size: 8px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-top: -2px;
  font-family: "Segoe UI", "Calibri", Arial, sans-serif;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .header__nav {
    gap: 2rem;
  }
}

.header__nav-links {
  display: none;
}
@media (min-width: 768px) {
  .header__nav-links {
    display: flex;
    gap: 0.25rem;
  }
}

.header__nav-link {
  position: relative;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: 200ms ease;
  text-decoration: none;
}
.header__nav-link:hover {
  color: #f4d03f;
}
.header__nav-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 208, 63, 0.25);
}
.header__nav-link.is-active {
  color: #f4d03f;
  font-weight: 600;
}

.header__nav-indicator {
  position: absolute;
  bottom: 6px;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: linear-gradient(90deg, #f4d03f, #d8b022);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(244, 208, 63, 0.5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.is-active .header__nav-indicator, .header__nav-link:hover .header__nav-indicator {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header__btn--outline, .header__btn.btn--secondary {
  padding: 11px 24px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  color: #e9c662;
  border: 1.5px solid #e9c662;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}
.header__btn--outline:hover, .header__btn.btn--secondary:hover {
  background: rgba(244, 208, 63, 0.15);
  border-color: #f4d03f;
  box-shadow: 0 0 20px rgba(244, 208, 63, 0.25);
}

.header__btn--primary, .header__btn.btn--accent {
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #ebce38 0%, #d8b022 100%);
  color: #07385c;
  border: none;
  box-shadow: 0 4px 15px rgba(216, 176, 34, 0.4);
  cursor: pointer;
  transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}
.header__btn--primary:hover, .header__btn.btn--accent:hover {
  background: linear-gradient(135deg, #f4d03f 0%, #d8b022 100%);
  box-shadow: 0 6px 25px rgba(216, 176, 34, 0.5);
  transform: translateY(-2px);
}

.header__theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(233, 198, 98, 0.2);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: 200ms ease;
}
.header__theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}
.header__theme-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 208, 63, 0.25);
}
.header__theme-toggle svg {
  width: 18px;
  height: 18px;
  color: #ebce38;
  filter: drop-shadow(0 0 4px rgba(244, 208, 63, 0.5));
}

.header__theme-label {
  display: none;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 576px) {
  .header__theme-label {
    display: block;
  }
}

.header__theme-icon--dark {
  display: none;
}

[data-theme=dark] .header__theme-icon--light {
  display: none;
}
[data-theme=dark] .header__theme-icon--dark {
  display: block;
}

.header__user {
  position: relative;
  z-index: 1;
}

.header__user-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: 200ms ease;
}
.header__user-trigger:hover, .header__user-trigger.is-open {
  background-color: rgba(255, 255, 255, 0.15);
}
.header__user-trigger:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 208, 63, 0.25);
}

.header__user-avatar {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #ebce38 0%, #d8b022 100%);
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #07385c;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: 200ms ease;
}
.header__user-avatar:hover {
  box-shadow: 0 0 18px rgba(216, 176, 34, 0.35);
}

.header__user-name {
  display: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: #e6ecf3;
}
@media (min-width: 576px) {
  .header__user-name {
    display: block;
  }
}

.header__user-arrow {
  width: 14px;
  height: 14px;
  color: #e6ecf3;
  transition: transform 200ms ease;
}
.is-open .header__user-arrow {
  transform: rotate(180deg);
}

.header__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  min-width: 200px;
  background-color: #193658;
  border: 1px solid rgba(233, 198, 98, 0.2);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  padding: 0.5rem 0;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.header__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__dropdown-item {
  display: block;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  color: #e6ecf3;
  cursor: pointer;
  transition: 150ms ease;
  text-decoration: none;
}
.header__dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.header__dropdown-item:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.08);
}
.header__dropdown-item--danger {
  color: #ef5350;
}
.header__dropdown-item--danger:hover {
  background-color: rgba(239, 83, 80, 0.15);
}

.header__dropdown-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 198, 98, 0.3), transparent);
  margin: 0.5rem 0;
}

.header__divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, rgba(233, 198, 98, 0.3), transparent);
  margin: 0 1rem;
}

.header__burger {
  display: flex;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}
@media (min-width: 768px) {
  .header__burger {
    display: none;
  }
}
.header__burger svg {
  width: 24px;
  height: 24px;
  color: #ffffff;
}

.header__mobile-nav {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #193658;
  padding: 1.5rem;
  z-index: 1040;
}
.header__mobile-nav.is-open {
  display: block;
}
@media (min-width: 768px) {
  .header__mobile-nav {
    display: none !important;
  }
}

.header__mobile-nav-link {
  display: block;
  padding: 1rem;
  font-size: 1.125rem;
  color: #e6ecf3;
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 198, 98, 0.15);
  transition: 150ms ease;
}
.header__mobile-nav-link:hover {
  color: #ffffff;
}
.header__mobile-nav-link.is-active {
  color: #ebce38;
  font-weight: 600;
}

:root {
  --color-brand-blue: #193658;
  --color-brand-gold: #ebce38;
  --color-primary: #193658;
  --color-primary-hover: #102a45;
  --color-primary-active: #0d2238;
  --color-primary-light: rgba(25, 54, 88, 0.1);
  --color-primary-contrast: #ffffff;
  --color-accent: #ebce38;
  --color-accent-hover: #c9a82e;
  --color-accent-active: #b89726;
  --color-accent-light: rgba(235, 206, 56, 0.15);
  --color-accent-contrast: #07385c;
  --bg-page: #fffef8;
  --bg-content: #ffffff;
  --bg-header: #193658;
  --bg-footer: #0a1628;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --text-primary: #07385c;
  --text-secondary: #213757;
  --text-muted: #9b9e9d;
  --text-inverse: #ffffff;
  --text-on-primary: #ffffff;
  --text-on-accent: #07385c;
  --border-color: #d1d9e0;
  --border-light: #e8eef3;
  --border-strong: #213757;
  --border-accent: #e9c662;
  --hover-bg: rgba(25, 54, 88, 0.04);
  --active-bg: rgba(25, 54, 88, 0.08);
  --focus-ring: rgba(235, 206, 56, 0.4);
  --selected-bg: rgba(235, 206, 56, 0.12);
  --shadow-color: rgba(25, 54, 88, 0.08);
  --shadow-color-strong: rgba(25, 54, 88, 0.15);
  --shadow-xs: 0 1px 2px var(--shadow-color);
  --shadow-sm: 0 2px 4px var(--shadow-color);
  --shadow-md: 0 4px 12px var(--shadow-color), 0 2px 4px var(--shadow-color);
  --shadow-lg: 0 8px 24px var(--shadow-color-strong);
  --shadow-xl: 0 16px 48px var(--shadow-color-strong);
  --shadow-accent: 0 4px 20px rgba(235, 206, 56, 0.35);
  --shadow-accent-hover: 0 8px 30px rgba(235, 206, 56, 0.5);
  --color-success: #27ae60;
  --color-success-hover: #1e8449;
  --color-success-bg: rgba(39, 174, 96, 0.1);
  --color-success-text: #155724;
  --color-warning: #f39c12;
  --color-warning-hover: #d68910;
  --color-warning-bg: rgba(243, 156, 18, 0.1);
  --color-warning-text: #856404;
  --color-error: #e74c3c;
  --color-error-hover: #c9302c;
  --color-error-bg: rgba(231, 76, 60, 0.1);
  --color-error-text: #721c24;
  --color-info: #3498db;
  --color-info-hover: #2980b9;
  --color-info-bg: rgba(52, 152, 219, 0.1);
  --color-info-text: #0c5460;
  --color-focus-ring: rgba(235, 206, 56, 0.5);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-focus-error: 0 0 0 3px rgba(231, 76, 60, 0.3);
  --shadow-focus-success: 0 0 0 3px rgba(39, 174, 96, 0.3);
}

[data-theme=dark] {
  --color-brand-blue: #193658;
  --color-brand-gold: #ebce38;
  --color-primary: #6b9ac4;
  --color-primary-hover: #8eb5d6;
  --color-primary-active: #5a8ab4;
  --color-primary-light: rgba(107, 154, 196, 0.15);
  --color-primary-contrast: #161b22;
  --color-accent: #ebce38;
  --color-accent-hover: #f4d03f;
  --color-accent-active: #d8b022;
  --color-accent-light: rgba(235, 206, 56, 0.2);
  --color-accent-contrast: #07385c;
  --bg-page: #0a0d12;
  --bg-content: #161b22;
  --bg-header: #0d1117;
  --bg-footer: #0a0d12;
  --bg-card: #161b22;
  --bg-input: #1a1f26;
  --text-primary: #f0f6fc;
  --text-secondary: #c9d1d9;
  --text-muted: #8b949e;
  --text-inverse: #0a0d12;
  --text-on-primary: #161b22;
  --text-on-accent: #07385c;
  --border-color: #30363d;
  --border-light: #21262d;
  --border-strong: #484f58;
  --border-accent: #e9c662;
  --hover-bg: rgba(255, 255, 255, 0.08);
  --active-bg: rgba(255, 255, 255, 0.12);
  --focus-ring: rgba(235, 206, 56, 0.5);
  --selected-bg: rgba(235, 206, 56, 0.15);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-color-strong: rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 4px 20px rgba(235, 206, 56, 0.25);
  --shadow-accent-hover: 0 8px 30px rgba(235, 206, 56, 0.4);
  --color-success: #3dd68c;
  --color-success-hover: #56de9c;
  --color-success-bg: rgba(61, 214, 140, 0.15);
  --color-success-text: #a5d6a7;
  --color-warning: #f7c948;
  --color-warning-hover: #f9d56a;
  --color-warning-bg: rgba(247, 201, 72, 0.15);
  --color-warning-text: #ffb74d;
  --color-error: #f97583;
  --color-error-hover: #fa8f9a;
  --color-error-bg: rgba(249, 117, 131, 0.15);
  --color-error-text: #e57373;
  --color-info: #58a6ff;
  --color-info-hover: #79b8ff;
  --color-info-bg: rgba(88, 166, 255, 0.15);
  --color-info-text: #64b5f6;
  --color-focus-ring: rgba(235, 206, 56, 0.6);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-focus-error: 0 0 0 3px rgba(249, 117, 131, 0.4);
  --shadow-focus-success: 0 0 0 3px rgba(61, 214, 140, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --color-primary: #6b9ac4;
    --bg-page: #0a0d12;
    --bg-content: #161b22;
    --text-primary: #f0f6fc;
    --text-secondary: #c9d1d9;
    --border-color: #30363d;
  }
}
.footer {
  background: linear-gradient(135deg, #0a1628 0%, rgb(6.94, 15.268, 27.76) 100%);
  border-top: 1px solid rgba(233, 198, 98, 0.1);
  padding: 1.5rem 20px;
  position: relative;
  transition: 200ms ease;
}
@media (min-width: 768px) {
  .footer {
    padding: 1.5rem 2rem;
  }
}
@media (min-width: 1024px) {
  .footer {
    padding: 1.5rem 48px;
  }
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 198, 98, 0.2), transparent);
  pointer-events: none;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (min-width: 768px) {
  .footer__links {
    gap: 2rem;
  }
}

.footer__link {
  font-size: 0.75rem;
  color: rgba(230, 236, 243, 0.7);
  text-decoration: none;
  transition: 150ms ease;
}
@media (min-width: 768px) {
  .footer__link {
    font-size: 0.875rem;
  }
}
.footer__link:hover {
  color: #d4ad27;
}
.footer__link:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(244, 208, 63, 0.3);
  outline-offset: 2px;
  border-radius: 2px;
}

.footer__copy {
  font-size: 0.75rem;
  color: rgba(230, 236, 243, 0.5);
  text-align: center;
}
@media (min-width: 768px) {
  .footer__copy {
    font-size: 0.875rem;
    text-align: right;
  }
}

.footer--extended {
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}
.footer--extended .footer__inner {
  flex-direction: column;
  gap: 2rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 576px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer__column-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer__column-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer__column-link {
  font-size: 0.875rem;
  color: rgba(230, 236, 243, 0.7);
  text-decoration: none;
  transition: 150ms ease;
}
.footer__column-link:hover {
  color: #d4ad27;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.footer__brand-logo {
  width: 36px;
  height: 36px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
  border: 2px solid #e9c662;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(244, 208, 63, 0.15);
}
.footer__brand-logo svg {
  width: 20px;
  height: 20px;
}
.footer__brand-logo svg circle, .footer__brand-logo svg path {
  stroke: #f4d03f;
}

.footer__brand-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 1px;
}

.footer__brand-tagline {
  font-size: 0.875rem;
  color: rgba(230, 236, 243, 0.6);
  max-width: 300px;
  line-height: 1.65;
}

.footer__bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(233, 198, 98, 0.15);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer__social {
  display: flex;
  gap: 1rem;
}

.footer__social-link {
  display: inline-flex;
  padding: 0.5rem;
  color: rgba(230, 236, 243, 0.6);
  border-radius: 8px;
  transition: 200ms ease;
}
.footer__social-link:hover {
  color: #ebce38;
  background-color: rgba(244, 208, 63, 0.1);
}
.footer__social-link svg {
  width: 20px;
  height: 20px;
}

:root {
  --color-brand-blue: #193658;
  --color-brand-gold: #ebce38;
  --color-primary: #193658;
  --color-primary-hover: #102a45;
  --color-primary-active: #0d2238;
  --color-primary-light: rgba(25, 54, 88, 0.1);
  --color-primary-contrast: #ffffff;
  --color-accent: #ebce38;
  --color-accent-hover: #c9a82e;
  --color-accent-active: #b89726;
  --color-accent-light: rgba(235, 206, 56, 0.15);
  --color-accent-contrast: #07385c;
  --bg-page: #fffef8;
  --bg-content: #ffffff;
  --bg-header: #193658;
  --bg-footer: #0a1628;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --text-primary: #07385c;
  --text-secondary: #213757;
  --text-muted: #9b9e9d;
  --text-inverse: #ffffff;
  --text-on-primary: #ffffff;
  --text-on-accent: #07385c;
  --border-color: #d1d9e0;
  --border-light: #e8eef3;
  --border-strong: #213757;
  --border-accent: #e9c662;
  --hover-bg: rgba(25, 54, 88, 0.04);
  --active-bg: rgba(25, 54, 88, 0.08);
  --focus-ring: rgba(235, 206, 56, 0.4);
  --selected-bg: rgba(235, 206, 56, 0.12);
  --shadow-color: rgba(25, 54, 88, 0.08);
  --shadow-color-strong: rgba(25, 54, 88, 0.15);
  --shadow-xs: 0 1px 2px var(--shadow-color);
  --shadow-sm: 0 2px 4px var(--shadow-color);
  --shadow-md: 0 4px 12px var(--shadow-color), 0 2px 4px var(--shadow-color);
  --shadow-lg: 0 8px 24px var(--shadow-color-strong);
  --shadow-xl: 0 16px 48px var(--shadow-color-strong);
  --shadow-accent: 0 4px 20px rgba(235, 206, 56, 0.35);
  --shadow-accent-hover: 0 8px 30px rgba(235, 206, 56, 0.5);
  --color-success: #27ae60;
  --color-success-hover: #1e8449;
  --color-success-bg: rgba(39, 174, 96, 0.1);
  --color-success-text: #155724;
  --color-warning: #f39c12;
  --color-warning-hover: #d68910;
  --color-warning-bg: rgba(243, 156, 18, 0.1);
  --color-warning-text: #856404;
  --color-error: #e74c3c;
  --color-error-hover: #c9302c;
  --color-error-bg: rgba(231, 76, 60, 0.1);
  --color-error-text: #721c24;
  --color-info: #3498db;
  --color-info-hover: #2980b9;
  --color-info-bg: rgba(52, 152, 219, 0.1);
  --color-info-text: #0c5460;
  --color-focus-ring: rgba(235, 206, 56, 0.5);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-focus-error: 0 0 0 3px rgba(231, 76, 60, 0.3);
  --shadow-focus-success: 0 0 0 3px rgba(39, 174, 96, 0.3);
}

[data-theme=dark] {
  --color-brand-blue: #193658;
  --color-brand-gold: #ebce38;
  --color-primary: #6b9ac4;
  --color-primary-hover: #8eb5d6;
  --color-primary-active: #5a8ab4;
  --color-primary-light: rgba(107, 154, 196, 0.15);
  --color-primary-contrast: #161b22;
  --color-accent: #ebce38;
  --color-accent-hover: #f4d03f;
  --color-accent-active: #d8b022;
  --color-accent-light: rgba(235, 206, 56, 0.2);
  --color-accent-contrast: #07385c;
  --bg-page: #0a0d12;
  --bg-content: #161b22;
  --bg-header: #0d1117;
  --bg-footer: #0a0d12;
  --bg-card: #161b22;
  --bg-input: #1a1f26;
  --text-primary: #f0f6fc;
  --text-secondary: #c9d1d9;
  --text-muted: #8b949e;
  --text-inverse: #0a0d12;
  --text-on-primary: #161b22;
  --text-on-accent: #07385c;
  --border-color: #30363d;
  --border-light: #21262d;
  --border-strong: #484f58;
  --border-accent: #e9c662;
  --hover-bg: rgba(255, 255, 255, 0.08);
  --active-bg: rgba(255, 255, 255, 0.12);
  --focus-ring: rgba(235, 206, 56, 0.5);
  --selected-bg: rgba(235, 206, 56, 0.15);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-color-strong: rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 4px 20px rgba(235, 206, 56, 0.25);
  --shadow-accent-hover: 0 8px 30px rgba(235, 206, 56, 0.4);
  --color-success: #3dd68c;
  --color-success-hover: #56de9c;
  --color-success-bg: rgba(61, 214, 140, 0.15);
  --color-success-text: #a5d6a7;
  --color-warning: #f7c948;
  --color-warning-hover: #f9d56a;
  --color-warning-bg: rgba(247, 201, 72, 0.15);
  --color-warning-text: #ffb74d;
  --color-error: #f97583;
  --color-error-hover: #fa8f9a;
  --color-error-bg: rgba(249, 117, 131, 0.15);
  --color-error-text: #e57373;
  --color-info: #58a6ff;
  --color-info-hover: #79b8ff;
  --color-info-bg: rgba(88, 166, 255, 0.15);
  --color-info-text: #64b5f6;
  --color-focus-ring: rgba(235, 206, 56, 0.6);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-focus-error: 0 0 0 3px rgba(249, 117, 131, 0.4);
  --shadow-focus-success: 0 0 0 3px rgba(61, 214, 140, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --color-primary: #6b9ac4;
    --bg-page: #0a0d12;
    --bg-content: #161b22;
    --text-primary: #f0f6fc;
    --text-secondary: #c9d1d9;
    --border-color: #30363d;
  }
}
.profil-toggle {
  display: inline-flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 9999px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  cursor: pointer;
}

.profil-toggle__option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 9999px;
  transition: all 200ms ease;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.profil-toggle__option-icon {
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 200ms ease;
}
.profil-toggle__option-label {
  white-space: nowrap;
}
.profil-toggle__option:not(.is-active):hover {
  color: rgba(255, 255, 255, 0.85);
}
.profil-toggle__option:not(.is-active):hover .profil-toggle__option-icon {
  opacity: 0.9;
}

.profil-toggle__option.is-active {
  background: linear-gradient(135deg, #ebce38 0%, #d8b022 100%);
  color: #07385c;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(235, 206, 56, 0.4);
}
.profil-toggle__option.is-active .profil-toggle__option-icon {
  opacity: 1;
}
.profil-toggle__option.is-active:hover {
  color: #07385c;
}

.profil-toggle--light {
  background-color: rgba(25, 54, 88, 0.08);
  border-color: rgba(25, 54, 88, 0.15);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
.profil-toggle--light .profil-toggle__option {
  color: rgba(25, 54, 88, 0.5);
}
.profil-toggle--light .profil-toggle__option:not(.is-active):hover {
  color: rgba(25, 54, 88, 0.8);
}
.profil-toggle--light .profil-toggle__option.is-active {
  color: #07385c;
}

.profil-toggle--compact {
  padding: 3px;
}
.profil-toggle--compact .profil-toggle__option {
  padding: 6px 12px;
  font-size: 0.75rem;
  gap: 4px;
}
.profil-toggle--compact .profil-toggle__option-icon {
  font-size: 14px;
}

@media (max-width: 767px) {
  .profil-toggle:not(.profil-toggle--full) {
    padding: 3px;
  }
  .profil-toggle:not(.profil-toggle--full) .profil-toggle__option {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
}
@media (max-width: 767px) and (max-width: 575px) {
  .profil-toggle:not(.profil-toggle--full) .profil-toggle__option-label {
    display: none;
  }
}
.profil-toggle--animated {
  position: relative;
}
.profil-toggle--animated::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: calc(50% - 4px);
  background: linear-gradient(135deg, #ebce38 0%, #d8b022 100%);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(235, 206, 56, 0.4);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.profil-toggle--animated[data-active=etudiant]::before {
  transform: translateX(calc(100% + 4px));
}
.profil-toggle--animated[data-active=parent]::before {
  transform: translateX(0);
}
.profil-toggle--animated .profil-toggle__option.is-active {
  background: none;
  box-shadow: none;
}

.profil-toggle.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.profil-toggle.is-loading {
  pointer-events: none;
}
.profil-toggle.is-loading .profil-toggle__option.is-active::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: 6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: profil-toggle-spin 0.6s linear infinite;
}

@keyframes profil-toggle-spin {
  to {
    transform: rotate(360deg);
  }
}
.profil-toggle__option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(235, 206, 56, 0.5);
}

.profil-toggle__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

[data-theme=dark] .profil-toggle {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .profil-toggle__option {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .profil-toggle__option:not(.is-active):hover {
  color: rgba(255, 255, 255, 0.8);
}
[data-theme=dark] .profil-toggle__option.is-active {
  color: #07385c;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn:focus:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.btn:disabled, .btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background-color: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(19, 49, 73, 0.25);
}
.btn--primary:hover {
  background-color: #0e2d42;
  border-color: #0e2d42;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(19, 49, 73, 0.3);
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(19, 49, 73, 0.2);
}
[data-theme=dark] .btn--primary {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .btn--primary:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-brand-blue);
  color: var(--color-brand-blue);
}
.btn--secondary:hover {
  background-color: var(--color-brand-blue);
  color: #ffffff;
}
.btn--secondary:active {
  background-color: #0e2d42;
}
[data-theme=dark] .btn--secondary {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
[data-theme=dark] .btn--secondary:hover {
  background-color: var(--color-accent);
  color: var(--text-inverse);
}

.btn--accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-brand-blue);
  box-shadow: 0 4px 12px rgba(233, 201, 76, 0.35);
}
.btn--accent:hover {
  background-color: #d4b230;
  border-color: #d4b230;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(233, 201, 76, 0.45);
}
.btn--accent:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(233, 201, 76, 0.3);
}

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}
.btn--ghost:active {
  background-color: var(--active-bg);
}

.btn--danger {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: #ffffff;
}
.btn--danger:hover {
  background-color: #c9302c;
  border-color: #c9302c;
}

.btn--success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: #ffffff;
}
.btn--success:hover {
  background-color: #1e8449;
  border-color: #1e8449;
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  border-radius: 4px;
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: 12px;
}

.btn--xl {
  padding: 1.25rem 2.5rem;
  font-size: 1.125rem;
  border-radius: 12px;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--rounded {
  border-radius: 9999px;
}

.btn--icon-only {
  padding: 0.75rem;
}
.btn--icon-only.btn--sm {
  padding: 0.5rem;
}
.btn--icon-only.btn--lg {
  padding: 1rem;
}

.btn__icon {
  display: inline-flex;
  flex-shrink: 0;
}
.btn__icon svg {
  width: 16px;
  height: 16px;
}
.btn--sm .btn__icon svg {
  width: 14px;
  height: 14px;
}
.btn--lg .btn__icon svg, .btn--xl .btn__icon svg {
  width: 20px;
  height: 20px;
}

.btn--icon-right {
  flex-direction: row-reverse;
}

.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
.btn--loading.btn--primary::after, .btn--loading.btn--accent::after, .btn--loading.btn--danger::after, .btn--loading.btn--success::after {
  border-color: #ffffff;
  border-right-color: transparent;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
.btn--selected {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-brand-blue);
}

.btn-group {
  display: inline-flex;
}
.btn-group .btn {
  border-radius: 0;
}
.btn-group .btn:first-child {
  border-radius: 8px 0 0 8px;
}
.btn-group .btn:last-child {
  border-radius: 0 8px 8px 0;
}
.btn-group .btn:not(:last-child) {
  border-right-width: 0;
}

.btn-group--vertical {
  flex-direction: column;
}
.btn-group--vertical .btn:first-child {
  border-radius: 8px 8px 0 0;
}
.btn-group--vertical .btn:last-child {
  border-radius: 0 0 8px 8px;
}
.btn-group--vertical .btn:not(:last-child) {
  border-right-width: 2px;
  border-bottom-width: 0;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.25s ease;
}
.btn-link:hover {
  color: var(--text-primary);
}
.btn-link svg {
  width: 16px;
  height: 16px;
}

.btn-link--primary {
  color: var(--color-brand-blue);
}
.btn-link--primary:hover {
  color: #0a1e2d;
}
[data-theme=dark] .btn-link--primary {
  color: var(--color-accent);
}
[data-theme=dark] .btn-link--primary:hover {
  color: #c9a829;
}

.card, .card-welcome, .card-test {
  background-color: var(--bg-content);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: background-color var(--theme-transition-duration, 200ms) ease, border-color var(--theme-transition-duration, 200ms) ease, color var(--theme-transition-duration, 200ms) ease;
}

.card__header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.card__body {
  padding: 1.5rem;
}

.card__footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border-light);
  background-color: var(--hover-bg);
}

.card--interactive, .card-test {
  cursor: pointer;
  transition: all 0.25s ease;
}
.card--interactive:hover, .card-test:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.card--interactive:active, .card-test:active {
  transform: translateY(-2px);
}

.card--highlighted {
  border-color: var(--color-accent);
  box-shadow: 0 4px 24px rgba(233, 201, 76, 0.2);
}

.card--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.card--compact .card__header,
.card--compact .card__body,
.card--compact .card__footer {
  padding: 1rem;
}

.card-test {
  padding: 1.75rem;
}
.card-test.is-locked {
  opacity: 0.6;
  cursor: not-allowed;
}
.card-test.is-locked:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}
.card-test.is-completed .card-test__progress-bar {
  background-color: var(--color-success);
}

.card-test__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.card-test__icon {
  font-size: 36px;
  line-height: 1;
}

.card-test__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  line-height: 1.35;
}
@media (min-width: 768px) {
  .card-test__title {
    font-size: 1.25rem;
  }
}

.card-test__info {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 1.25rem 0;
}

.card-test__progress {
  margin-bottom: 1.25rem;
}

.card-test__progress-track {
  width: 100%;
  height: 8px;
  background-color: var(--border-light);
  border-radius: 9999px;
  overflow: hidden;
}

.card-test__progress-bar {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 9999px;
  transition: width 0.5s ease;
}

.card-test__action .btn {
  width: 100%;
}

.test-card--readonly {
  cursor: default;
}
.test-card--readonly:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}
.test-card--readonly {
  opacity: 0.95;
  border-left: 3px solid var(--color-accent);
}

.test-card__action--status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  border-radius: 12px;
  background-color: var(--hover-bg);
  color: var(--text-secondary);
  cursor: default;
}

.dashboard-parent-banner {
  background: linear-gradient(135deg, var(--color-brand-blue) 0%, #1a3a5c 100%);
  border-radius: 16px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
@media (min-width: 768px) {
  .dashboard-parent-banner {
    margin-bottom: 2rem;
  }
}

.dashboard-parent-banner__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
@media (min-width: 768px) {
  .dashboard-parent-banner__inner {
    padding: 1rem 1.5rem;
  }
}

.dashboard-parent-banner__icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .dashboard-parent-banner__icon {
    font-size: 28px;
  }
}

.dashboard-parent-banner__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
@media (min-width: 768px) {
  .dashboard-parent-banner__content {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
}

.dashboard-parent-banner__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-accent);
}
@media (min-width: 768px) {
  .dashboard-parent-banner__label {
    font-size: 0.875rem;
  }
}

.dashboard-parent-banner__text {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
}
.dashboard-parent-banner__text strong {
  color: #ffffff;
  font-weight: 600;
}
@media (min-width: 768px) {
  .dashboard-parent-banner__text {
    font-size: 1rem;
  }
}

.card-metier {
  background-color: var(--border-light);
  border-radius: 16px;
  padding: 1.5rem;
  transition: background-color var(--theme-transition-duration, 200ms) ease, border-color var(--theme-transition-duration, 200ms) ease, color var(--theme-transition-duration, 200ms) ease;
}

.card-metier__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.card-metier__rank {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.card-metier__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}
@media (min-width: 768px) {
  .card-metier__title {
    font-size: 1.5rem;
  }
}

.card-metier__description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  opacity: 0.8;
  line-height: 1.65;
  margin: 0;
}

.card-metier-mini {
  background-color: var(--border-light);
  border-radius: 12px;
  padding: 1rem;
  transition: background-color var(--theme-transition-duration, 200ms) ease, border-color var(--theme-transition-duration, 200ms) ease, color var(--theme-transition-duration, 200ms) ease;
}

.card-metier-mini__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0.75rem 0 0 0;
  line-height: 1.35;
}

.card-welcome {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .card-welcome {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2.5rem;
  }
}

.card-welcome__content {
  flex: 1;
}

.card-welcome__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}
@media (min-width: 768px) {
  .card-welcome__title {
    font-size: 2rem;
  }
}

.card-welcome__subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
}

.card-welcome__progress {
  text-align: left;
}
@media (min-width: 768px) {
  .card-welcome__progress {
    text-align: right;
  }
}

.card-welcome__progress-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.card-welcome__progress-bar-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.card-welcome__progress-track {
  width: 150px;
  height: 10px;
  background-color: var(--border-light);
  border-radius: 9999px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .card-welcome__progress-track {
    width: 200px;
  }
}

.card-welcome__progress-bar {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 9999px;
  transition: width 0.5s ease;
}

.card-welcome__progress-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}
@media (min-width: 768px) {
  .card-welcome__progress-value {
    font-size: 1.5rem;
  }
}

.card-cta {
  position: relative;
  background-color: var(--color-brand-blue);
  border-radius: 24px;
  padding: 2rem 2.5rem;
  overflow: hidden;
}
.card-cta::before, .card-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.card-cta::before {
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(233, 201, 76, 0.3) 0%, transparent 70%);
}
.card-cta::after {
  bottom: -40px;
  left: 30%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
}
@media (min-width: 768px) {
  .card-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 3rem;
  }
}

.card-cta__content {
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .card-cta__content {
    margin-bottom: 0;
    max-width: 60%;
  }
}

.card-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background-color: rgba(233, 201, 76, 0.2);
  border-radius: 9999px;
  margin-bottom: 1rem;
}
.card-cta__badge svg {
  width: 16px;
  height: 16px;
  color: #ebce38;
}
.card-cta__badge span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ebce38;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-cta__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.75rem 0;
}
@media (min-width: 768px) {
  .card-cta__title {
    font-size: 2rem;
  }
}

.card-cta__description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.65;
  margin: 0;
}

.card-cta__visual {
  position: relative;
  z-index: 1;
  text-align: center;
}

.card-cta__icon-container {
  width: 100px;
  height: 100px;
  margin: 0 auto 1rem;
  border: 4px solid #ebce38;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) {
  .card-cta__icon-container {
    width: 120px;
    height: 120px;
  }
}
.card-cta__icon-container svg {
  width: 40px;
  height: 40px;
  color: #ffffff;
}
@media (min-width: 768px) {
  .card-cta__icon-container svg {
    width: 50px;
    height: 50px;
  }
}

.card-cta__status {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 9999px;
  white-space: nowrap;
  transition: background-color var(--theme-transition-duration, 200ms) ease, border-color var(--theme-transition-duration, 200ms) ease, color var(--theme-transition-duration, 200ms) ease;
}

.badge--default, .tag, .badge--locked {
  background-color: var(--border-light);
  color: var(--text-secondary);
}

.badge--primary {
  background-color: rgba(19, 49, 73, 0.1);
  color: var(--color-brand-blue);
}
[data-theme=dark] .badge--primary {
  background-color: rgba(233, 201, 76, 0.15);
  color: var(--color-accent);
}

.badge--accent {
  background-color: var(--color-accent);
  color: var(--color-brand-blue);
}

.badge--success, .badge--completed {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.badge--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.badge--info {
  background-color: var(--color-info-bg);
  color: var(--color-info);
}

.badge--affinite-forte {
  background-color: var(--color-accent);
  color: var(--color-brand-blue);
  box-shadow: 0 2px 8px rgba(233, 201, 76, 0.3);
}

.badge--affinite-moyenne {
  background-color: rgba(19, 49, 73, 0.1);
  color: var(--color-brand-blue);
}
[data-theme=dark] .badge--affinite-moyenne {
  background-color: rgba(233, 201, 76, 0.15);
  color: var(--color-accent);
}

.badge--affinite-faible {
  background-color: var(--border-light);
  color: var(--text-secondary);
}

.badge--in-progress {
  background-color: rgba(233, 201, 76, 0.15);
  color: var(--color-accent);
}
[data-theme=dark] .badge--in-progress {
  background-color: rgba(233, 201, 76, 0.2);
}

.badge--sm {
  padding: 2px 0.5rem;
  font-size: 10px;
}

.badge--lg {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.badge--pill {
  border-radius: 9999px;
}

.badge--square {
  border-radius: 4px;
}

.badge--dot {
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}
.badge--dot.badge--success, .badge--dot.badge--completed {
  background-color: var(--color-success);
}
.badge--dot.badge--warning {
  background-color: var(--color-warning);
}
.badge--dot.badge--error {
  background-color: var(--color-error);
}

.badge__icon {
  display: inline-flex;
}
.badge__icon svg {
  width: 12px;
  height: 12px;
}
.badge--lg .badge__icon svg {
  width: 14px;
  height: 14px;
}

.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.25rem;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--color-error);
  border-radius: 9999px;
}

.badge-count--success {
  background-color: var(--color-success);
}

.badge-count--accent {
  background-color: var(--color-accent);
  color: var(--color-brand-blue);
}

.tag {
  cursor: pointer;
  transition: all 0.25s ease;
}
.tag:hover {
  background-color: var(--hover-bg);
}
.tag.is-selected {
  background-color: var(--color-brand-blue);
  color: #ffffff;
}
[data-theme=dark] .tag.is-selected {
  background-color: var(--color-accent);
  color: var(--color-brand-blue);
}

.tag--removable {
  padding-right: 0.25rem;
}
.tag--removable .tag__remove {
  display: inline-flex;
  margin-left: 0.25rem;
  padding: 2px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.tag--removable .tag__remove:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.tag--removable .tag__remove svg {
  width: 12px;
  height: 12px;
}

.progress, .progress-steps__bar {
  width: 100%;
  height: 8px;
  background-color: var(--border-light);
  border-radius: 9999px;
  overflow: hidden;
}

.progress__bar, .progress-steps__fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 9999px;
  transition: width 0.5s ease;
}

.progress--sm {
  height: 4px;
}

.progress--lg {
  height: 12px;
}

.progress--xl {
  height: 16px;
}

.progress--primary .progress__bar, .progress--primary .progress-steps__fill {
  background-color: var(--color-brand-blue);
}

.progress--success .progress__bar, .progress--success .progress-steps__fill {
  background-color: var(--color-success);
}

.progress--warning .progress__bar, .progress--warning .progress-steps__fill {
  background-color: var(--color-warning);
}

.progress--error .progress__bar, .progress--error .progress-steps__fill {
  background-color: var(--color-error);
}

.progress-labeled {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.progress-labeled__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-labeled__label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.progress-labeled__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.progress-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.progress-steps__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-steps__label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.progress-steps__count {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}
.progress-steps__count span {
  color: var(--color-accent);
}

.progress-steps__bar {
  height: 10px;
}

.progress-circle {
  position: relative;
  width: 80px;
  height: 80px;
}

.progress-circle__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-circle__track {
  fill: none;
  stroke: var(--border-light);
  stroke-width: 6;
}

.progress-circle__bar {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.progress-circle__value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.progress-circle--sm {
  width: 60px;
  height: 60px;
}
.progress-circle--sm .progress-circle__track,
.progress-circle--sm .progress-circle__bar {
  stroke-width: 4;
}
.progress-circle--sm .progress-circle__value {
  font-size: 0.875rem;
}

.progress-circle--lg {
  width: 120px;
  height: 120px;
}
.progress-circle--lg .progress-circle__track,
.progress-circle--lg .progress-circle__bar {
  stroke-width: 8;
}
.progress-circle--lg .progress-circle__value {
  font-size: 1.5rem;
}

.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.step-indicator__step {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  border: 2px solid var(--border-color);
  color: var(--text-muted);
  background-color: transparent;
  transition: all 0.25s ease;
}
.step-indicator__step.is-current {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-brand-blue);
}
.step-indicator__step.is-completed {
  border-color: var(--color-success);
  background-color: var(--color-success);
  color: #ffffff;
}

.step-indicator__connector {
  width: 40px;
  height: 2px;
  background-color: var(--border-color);
  transition: background-color 0.25s ease;
}
.step-indicator__connector.is-completed {
  background-color: var(--color-success);
}

.progress--animated .progress__bar, .progress--animated .progress-steps__fill {
  position: relative;
  overflow: hidden;
}
.progress--animated .progress__bar::after, .progress--animated .progress-steps__fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progress-shimmer 1.5s infinite;
}

@keyframes progress-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.form-group {
  margin-bottom: 1.25rem;
}
.form-group:last-child {
  margin-bottom: 0;
}

.form-item {
  margin-bottom: 1.25rem;
}
.form-item:last-child {
  margin-bottom: 0;
}

.form-label,
.form-item label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  transition: color 200ms ease;
}
.form-label .form-required, .form-label.required::after,
.form-item label .form-required,
.form-item label.required::after {
  content: "*";
  color: var(--color-error);
  margin-left: 0.25rem;
}

.form-label--required::after {
  content: " *";
  color: var(--color-error);
}

.form-label__required {
  color: var(--color-error);
  margin-left: 0.25rem;
}

.form-input,
.form-text,
.form-email,
.form-tel,
.form-number,
.form-item input[type=text],
.form-item input[type=email],
.form-item input[type=password],
.form-item input[type=tel],
.form-item input[type=number],
.form-item input[type=date],
.form-item input[type=url],
.form-item input[type=search] {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: "Segoe UI", "Calibri", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color var(--theme-transition-duration, 200ms) ease, color var(--theme-transition-duration, 200ms) ease;
}
.form-input::placeholder,
.form-text::placeholder,
.form-email::placeholder,
.form-tel::placeholder,
.form-number::placeholder,
.form-item input[type=text]::placeholder,
.form-item input[type=email]::placeholder,
.form-item input[type=password]::placeholder,
.form-item input[type=tel]::placeholder,
.form-item input[type=number]::placeholder,
.form-item input[type=date]::placeholder,
.form-item input[type=url]::placeholder,
.form-item input[type=search]::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}
.form-input:hover:not(:disabled):not(:focus),
.form-text:hover:not(:disabled):not(:focus),
.form-email:hover:not(:disabled):not(:focus),
.form-tel:hover:not(:disabled):not(:focus),
.form-number:hover:not(:disabled):not(:focus),
.form-item input[type=text]:hover:not(:disabled):not(:focus),
.form-item input[type=email]:hover:not(:disabled):not(:focus),
.form-item input[type=password]:hover:not(:disabled):not(:focus),
.form-item input[type=tel]:hover:not(:disabled):not(:focus),
.form-item input[type=number]:hover:not(:disabled):not(:focus),
.form-item input[type=date]:hover:not(:disabled):not(:focus),
.form-item input[type=url]:hover:not(:disabled):not(:focus),
.form-item input[type=search]:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-strong);
}
.form-input:focus,
.form-text:focus,
.form-email:focus,
.form-tel:focus,
.form-number:focus,
.form-item input[type=text]:focus,
.form-item input[type=email]:focus,
.form-item input[type=password]:focus,
.form-item input[type=tel]:focus,
.form-item input[type=number]:focus,
.form-item input[type=date]:focus,
.form-item input[type=url]:focus,
.form-item input[type=search]:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-focus);
}
.form-input:disabled, .form-input[readonly],
.form-text:disabled,
.form-text[readonly],
.form-email:disabled,
.form-email[readonly],
.form-tel:disabled,
.form-tel[readonly],
.form-number:disabled,
.form-number[readonly],
.form-item input[type=text]:disabled,
.form-item input[type=text][readonly],
.form-item input[type=email]:disabled,
.form-item input[type=email][readonly],
.form-item input[type=password]:disabled,
.form-item input[type=password][readonly],
.form-item input[type=tel]:disabled,
.form-item input[type=tel][readonly],
.form-item input[type=number]:disabled,
.form-item input[type=number][readonly],
.form-item input[type=date]:disabled,
.form-item input[type=date][readonly],
.form-item input[type=url]:disabled,
.form-item input[type=url][readonly],
.form-item input[type=search]:disabled,
.form-item input[type=search][readonly] {
  background-color: var(--color-disabled-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
.form-input.is-error, .has-error .form-input, .error .form-input,
.form-text.is-error,
.has-error .form-text,
.error .form-text,
.form-email.is-error,
.has-error .form-email,
.error .form-email,
.form-tel.is-error,
.has-error .form-tel,
.error .form-tel,
.form-number.is-error,
.has-error .form-number,
.error .form-number,
.form-item input[type=text].is-error,
.has-error .form-item input[type=text],
.error .form-item input[type=text],
.form-item input[type=email].is-error,
.has-error .form-item input[type=email],
.error .form-item input[type=email],
.form-item input[type=password].is-error,
.has-error .form-item input[type=password],
.error .form-item input[type=password],
.form-item input[type=tel].is-error,
.has-error .form-item input[type=tel],
.error .form-item input[type=tel],
.form-item input[type=number].is-error,
.has-error .form-item input[type=number],
.error .form-item input[type=number],
.form-item input[type=date].is-error,
.has-error .form-item input[type=date],
.error .form-item input[type=date],
.form-item input[type=url].is-error,
.has-error .form-item input[type=url],
.error .form-item input[type=url],
.form-item input[type=search].is-error,
.has-error .form-item input[type=search],
.error .form-item input[type=search] {
  border-color: var(--color-error);
}
.form-input.is-error:focus, .has-error .form-input:focus, .error .form-input:focus,
.form-text.is-error:focus,
.has-error .form-text:focus,
.error .form-text:focus,
.form-email.is-error:focus,
.has-error .form-email:focus,
.error .form-email:focus,
.form-tel.is-error:focus,
.has-error .form-tel:focus,
.error .form-tel:focus,
.form-number.is-error:focus,
.has-error .form-number:focus,
.error .form-number:focus,
.form-item input[type=text].is-error:focus,
.has-error .form-item input[type=text]:focus,
.error .form-item input[type=text]:focus,
.form-item input[type=email].is-error:focus,
.has-error .form-item input[type=email]:focus,
.error .form-item input[type=email]:focus,
.form-item input[type=password].is-error:focus,
.has-error .form-item input[type=password]:focus,
.error .form-item input[type=password]:focus,
.form-item input[type=tel].is-error:focus,
.has-error .form-item input[type=tel]:focus,
.error .form-item input[type=tel]:focus,
.form-item input[type=number].is-error:focus,
.has-error .form-item input[type=number]:focus,
.error .form-item input[type=number]:focus,
.form-item input[type=date].is-error:focus,
.has-error .form-item input[type=date]:focus,
.error .form-item input[type=date]:focus,
.form-item input[type=url].is-error:focus,
.has-error .form-item input[type=url]:focus,
.error .form-item input[type=url]:focus,
.form-item input[type=search].is-error:focus,
.has-error .form-item input[type=search]:focus,
.error .form-item input[type=search]:focus {
  box-shadow: var(--shadow-focus-error);
}
.form-input.is-success, .has-success .form-input,
.form-text.is-success,
.has-success .form-text,
.form-email.is-success,
.has-success .form-email,
.form-tel.is-success,
.has-success .form-tel,
.form-number.is-success,
.has-success .form-number,
.form-item input[type=text].is-success,
.has-success .form-item input[type=text],
.form-item input[type=email].is-success,
.has-success .form-item input[type=email],
.form-item input[type=password].is-success,
.has-success .form-item input[type=password],
.form-item input[type=tel].is-success,
.has-success .form-item input[type=tel],
.form-item input[type=number].is-success,
.has-success .form-item input[type=number],
.form-item input[type=date].is-success,
.has-success .form-item input[type=date],
.form-item input[type=url].is-success,
.has-success .form-item input[type=url],
.form-item input[type=search].is-success,
.has-success .form-item input[type=search] {
  border-color: var(--color-success);
}
.form-input.is-success:focus, .has-success .form-input:focus,
.form-text.is-success:focus,
.has-success .form-text:focus,
.form-email.is-success:focus,
.has-success .form-email:focus,
.form-tel.is-success:focus,
.has-success .form-tel:focus,
.form-number.is-success:focus,
.has-success .form-number:focus,
.form-item input[type=text].is-success:focus,
.has-success .form-item input[type=text]:focus,
.form-item input[type=email].is-success:focus,
.has-success .form-item input[type=email]:focus,
.form-item input[type=password].is-success:focus,
.has-success .form-item input[type=password]:focus,
.form-item input[type=tel].is-success:focus,
.has-success .form-item input[type=tel]:focus,
.form-item input[type=number].is-success:focus,
.has-success .form-item input[type=number]:focus,
.form-item input[type=date].is-success:focus,
.has-success .form-item input[type=date]:focus,
.form-item input[type=url].is-success:focus,
.has-success .form-item input[type=url]:focus,
.form-item input[type=search].is-success:focus,
.has-success .form-item input[type=search]:focus {
  box-shadow: var(--shadow-focus-success);
}

.form-input--sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.form-input--lg {
  padding: 1rem 1.25rem;
  font-size: 1.125rem;
}

.form-textarea,
.form-item textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 0.75rem 1rem;
  font-family: "Segoe UI", "Calibri", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  resize: vertical;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color var(--theme-transition-duration, 200ms) ease, color var(--theme-transition-duration, 200ms) ease;
}
.form-textarea::placeholder,
.form-item textarea::placeholder {
  color: var(--color-text-muted);
}
.form-textarea:hover:not(:disabled):not(:focus),
.form-item textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-strong);
}
.form-textarea:focus,
.form-item textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-focus);
}
.form-textarea:disabled,
.form-item textarea:disabled {
  background-color: var(--color-disabled-bg);
  cursor: not-allowed;
  opacity: 0.7;
}

.form-select,
.form-item select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  padding-right: 40px;
  font-family: "Segoe UI", "Calibri", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 48px;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color var(--theme-transition-duration, 200ms) ease, color var(--theme-transition-duration, 200ms) ease;
}
.form-select:hover:not(:disabled):not(:focus),
.form-item select:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-strong);
}
.form-select:focus,
.form-item select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-focus);
}
.form-select:disabled,
.form-item select:disabled {
  background-color: var(--color-disabled-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
.form-select.is-error, .has-error .form-select, .error .form-select,
.form-item select.is-error,
.has-error .form-item select,
.error .form-item select {
  border-color: var(--color-error);
}

.form-checkbox,
.form-type-checkbox,
.js-form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}
.form-checkbox input[type=checkbox],
.form-checkbox .form-checkbox__input,
.form-type-checkbox input[type=checkbox],
.form-type-checkbox .form-checkbox__input,
.js-form-type-checkbox input[type=checkbox],
.js-form-type-checkbox .form-checkbox__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 2px 0 0 0;
  border: 2px solid var(--color-border);
  border-radius: 0.25rem;
  background-color: var(--color-bg);
  cursor: pointer;
  appearance: none;
  position: relative;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.form-checkbox input[type=checkbox]::after,
.form-checkbox .form-checkbox__input::after,
.form-type-checkbox input[type=checkbox]::after,
.form-type-checkbox .form-checkbox__input::after,
.js-form-type-checkbox input[type=checkbox]::after,
.js-form-type-checkbox .form-checkbox__input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg) scale(0);
  transition: transform 150ms ease;
}
.form-checkbox input[type=checkbox]:hover:not(:disabled):not(:checked),
.form-checkbox .form-checkbox__input:hover:not(:disabled):not(:checked),
.form-type-checkbox input[type=checkbox]:hover:not(:disabled):not(:checked),
.form-type-checkbox .form-checkbox__input:hover:not(:disabled):not(:checked),
.js-form-type-checkbox input[type=checkbox]:hover:not(:disabled):not(:checked),
.js-form-type-checkbox .form-checkbox__input:hover:not(:disabled):not(:checked) {
  border-color: var(--color-border-strong);
}
.form-checkbox input[type=checkbox]:checked,
.form-checkbox .form-checkbox__input:checked,
.form-type-checkbox input[type=checkbox]:checked,
.form-type-checkbox .form-checkbox__input:checked,
.js-form-type-checkbox input[type=checkbox]:checked,
.js-form-type-checkbox .form-checkbox__input:checked {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}
.form-checkbox input[type=checkbox]:checked::after,
.form-checkbox .form-checkbox__input:checked::after,
.form-type-checkbox input[type=checkbox]:checked::after,
.form-type-checkbox .form-checkbox__input:checked::after,
.js-form-type-checkbox input[type=checkbox]:checked::after,
.js-form-type-checkbox .form-checkbox__input:checked::after {
  transform: translate(-50%, -60%) rotate(45deg) scale(1);
}
.form-checkbox input[type=checkbox]:focus-visible,
.form-checkbox .form-checkbox__input:focus-visible,
.form-type-checkbox input[type=checkbox]:focus-visible,
.form-type-checkbox .form-checkbox__input:focus-visible,
.js-form-type-checkbox input[type=checkbox]:focus-visible,
.js-form-type-checkbox .form-checkbox__input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.form-checkbox input[type=checkbox]:disabled,
.form-checkbox .form-checkbox__input:disabled,
.form-type-checkbox input[type=checkbox]:disabled,
.form-type-checkbox .form-checkbox__input:disabled,
.js-form-type-checkbox input[type=checkbox]:disabled,
.js-form-type-checkbox .form-checkbox__input:disabled {
  background-color: var(--color-disabled-bg);
  border-color: var(--color-border-light);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-checkbox label,
.form-checkbox .form-checkbox__label,
.form-type-checkbox label,
.form-type-checkbox .form-checkbox__label,
.js-form-type-checkbox label,
.js-form-type-checkbox .form-checkbox__label {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  cursor: pointer;
  margin: 0;
  transition: color 200ms ease;
}

.form-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-radio,
.form-type-radio,
.js-form-type-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}
.form-radio input[type=radio],
.form-radio .form-radio__input,
.form-type-radio input[type=radio],
.form-type-radio .form-radio__input,
.js-form-type-radio input[type=radio],
.js-form-type-radio .form-radio__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 2px 0 0 0;
  border: 2px solid var(--color-border);
  border-radius: 9999px;
  background-color: var(--color-bg);
  cursor: pointer;
  appearance: none;
  position: relative;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.form-radio input[type=radio]::after,
.form-radio .form-radio__input::after,
.form-type-radio input[type=radio]::after,
.form-type-radio .form-radio__input::after,
.js-form-type-radio input[type=radio]::after,
.js-form-type-radio .form-radio__input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--color-primary-500);
  border-radius: 9999px;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 150ms ease;
}
.form-radio input[type=radio]:hover:not(:disabled):not(:checked),
.form-radio .form-radio__input:hover:not(:disabled):not(:checked),
.form-type-radio input[type=radio]:hover:not(:disabled):not(:checked),
.form-type-radio .form-radio__input:hover:not(:disabled):not(:checked),
.js-form-type-radio input[type=radio]:hover:not(:disabled):not(:checked),
.js-form-type-radio .form-radio__input:hover:not(:disabled):not(:checked) {
  border-color: var(--color-border-strong);
}
.form-radio input[type=radio]:checked,
.form-radio .form-radio__input:checked,
.form-type-radio input[type=radio]:checked,
.form-type-radio .form-radio__input:checked,
.js-form-type-radio input[type=radio]:checked,
.js-form-type-radio .form-radio__input:checked {
  border-color: var(--color-primary-500);
}
.form-radio input[type=radio]:checked::after,
.form-radio .form-radio__input:checked::after,
.form-type-radio input[type=radio]:checked::after,
.form-type-radio .form-radio__input:checked::after,
.js-form-type-radio input[type=radio]:checked::after,
.js-form-type-radio .form-radio__input:checked::after {
  transform: translate(-50%, -50%) scale(1);
}
.form-radio input[type=radio]:focus-visible,
.form-radio .form-radio__input:focus-visible,
.form-type-radio input[type=radio]:focus-visible,
.form-type-radio .form-radio__input:focus-visible,
.js-form-type-radio input[type=radio]:focus-visible,
.js-form-type-radio .form-radio__input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.form-radio input[type=radio]:disabled,
.form-radio .form-radio__input:disabled,
.form-type-radio input[type=radio]:disabled,
.form-type-radio .form-radio__input:disabled,
.js-form-type-radio input[type=radio]:disabled,
.js-form-type-radio .form-radio__input:disabled {
  background-color: var(--color-disabled-bg);
  border-color: var(--color-border-light);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-radio label,
.form-radio .form-radio__label,
.form-type-radio label,
.form-type-radio .form-radio__label,
.js-form-type-radio label,
.js-form-type-radio .form-radio__label {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  cursor: pointer;
  margin: 0;
  transition: color 200ms ease;
}

.form-radios,
.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.form-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.form-toggle__input {
  appearance: none;
  width: 44px;
  height: 24px;
  background-color: var(--color-border);
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.form-toggle__input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 200ms ease;
}
.form-toggle__input:checked {
  background-color: var(--color-primary-500);
}
.form-toggle__input:checked::after {
  transform: translateX(20px);
}
.form-toggle__input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.form-toggle__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-toggle__label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  transition: color 200ms ease;
}

.form-hint,
.description {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  transition: color 200ms ease;
}

.form-error,
.form-item--error-message,
.error-message {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-error);
  animation: form-message-fade-in 0.2s ease;
}

.form-success {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-success);
  animation: form-message-fade-in 0.2s ease;
}

@keyframes form-message-fade-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.input-group {
  position: relative;
  display: flex;
}

.input-group__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  transition: color 200ms ease;
}
.input-group__icon svg {
  width: 18px;
  height: 18px;
}

.input-group__input {
  padding-left: 2.5rem;
}

.input-group__addon {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  background-color: var(--color-border-light);
  border: 1px solid var(--color-border);
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.input-group__addon:first-child {
  border-right: none;
  border-radius: 0.5rem 0 0 0.5rem;
}
.input-group__addon:last-child {
  border-left: none;
  border-radius: 0 0.5rem 0.5rem 0;
}

.form-search {
  position: relative;
}

.form-search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  transition: color 200ms ease;
}
.form-search__icon svg {
  width: 18px;
  height: 18px;
}

.form-search__input {
  padding-left: 3rem;
  border-radius: 9999px;
}

.form-search__clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25rem;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 9999px;
  transition: color 150ms ease, background-color 150ms ease;
}
.form-search__clear:hover {
  color: var(--color-text);
  background-color: var(--color-hover);
}

.password-confirm {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  color: var(--color-text-secondary);
  transition: color 200ms ease;
}

.password-strength {
  margin-top: 0.5rem;
}
.password-strength__meter, .password-strength__bar {
  height: 4px;
  background: var(--color-border-light);
  border-radius: 9999px;
  overflow: hidden;
  transition: background-color 200ms ease;
}
.password-strength__indicator, .password-strength__bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 200ms ease, background-color 200ms ease;
}
.password-strength__indicator.is-weak, .password-strength__indicator--weak, .password-strength__bar-fill.is-weak, .password-strength__bar-fill--weak {
  background: var(--color-error);
  width: 25%;
}
.password-strength__indicator.is-fair, .password-strength__indicator--fair, .password-strength__bar-fill.is-fair, .password-strength__bar-fill--fair {
  background: var(--color-warning);
  width: 50%;
}
.password-strength__indicator.is-good, .password-strength__indicator--good, .password-strength__bar-fill.is-good, .password-strength__bar-fill--good {
  background: var(--color-info);
  width: 75%;
}
.password-strength__indicator.is-strong, .password-strength__indicator--strong, .password-strength__bar-fill.is-strong, .password-strength__bar-fill--strong {
  background: var(--color-success);
  width: 100%;
}
.password-strength__text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  transition: color 200ms ease;
}

.form-file,
.form-item input[type=file] {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.form-file:hover,
.form-item input[type=file]:hover {
  border-color: var(--color-primary-500);
  background-color: var(--color-selected);
}
.form-file:focus,
.form-item input[type=file]:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-focus);
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 575px) {
  .form-actions {
    flex-direction: column;
  }
}

.form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-grid__full {
  grid-column: 1/-1;
}

.form-inline {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.form-inline .form-group,
.form-inline .form-item {
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

.form-fieldset,
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.form-legend,
legend {
  display: block;
  width: 100%;
  padding: 0 0 1rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-strong);
  border-bottom: 1px solid var(--color-border-light);
  transition: color 200ms ease, border-color 200ms ease;
}

.auth-body form {
  display: flex;
  flex-direction: column;
}
.auth-body .form-item,
.auth-body .form-group {
  width: 100%;
  margin-bottom: 1rem;
}
.auth-body .form-actions {
  margin-top: 1.5rem;
}
.auth-body .form-actions .button,
.auth-body .form-actions input[type=submit] {
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  background: var(--color-primary-500);
  color: #ffffff;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background-color 150ms ease, transform 100ms ease;
}
.auth-body .form-actions .button:hover,
.auth-body .form-actions input[type=submit]:hover {
  background: var(--color-primary-600);
  color: #ffffff;
}
.auth-body .form-actions .button:active,
.auth-body .form-actions input[type=submit]:active {
  transform: scale(0.98);
}
.auth-body .form-actions .button:focus-visible,
.auth-body .form-actions input[type=submit]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.js-form-item {
  margin-bottom: 1.25rem;
}
.js-form-item:last-child {
  margin-bottom: 0;
}

.form-item .description {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

.form-input-wrapper {
  position: relative;
}

abbr.form-required {
  color: var(--color-error);
  text-decoration: none;
}

.profil-switch {
  position: relative;
  margin-right: 1rem;
}
.profil-switch__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-primary);
}
.profil-switch__toggle:hover {
  background: var(--hover-bg);
  border-color: var(--border-color);
}
.profil-switch__toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.profil-switch__toggle[aria-expanded=true] {
  background: var(--hover-bg);
}
.profil-switch__toggle[aria-expanded=true] .profil-switch__arrow {
  transform: rotate(180deg);
}
.profil-switch__icon {
  font-size: 1.125rem;
  line-height: 1;
}
.profil-switch__label {
  font-weight: 500;
  white-space: nowrap;
}
.profil-switch__arrow {
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.profil-switch__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 220px;
  background: var(--bg-content);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
}
.profil-switch__dropdown[hidden] {
  display: none;
}
.profil-switch__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border-light);
}
.profil-switch__option:last-child {
  border-bottom: none;
}
.profil-switch__option:hover {
  background: var(--hover-bg);
}
.profil-switch__option.is-active {
  background: var(--color-accent);
}
.profil-switch__option.is-active .profil-switch__option-icon,
.profil-switch__option.is-active .profil-switch__option-label {
  color: var(--text-inverse);
}
.profil-switch__option.is-active::after {
  content: "✓";
  margin-left: auto;
  color: var(--text-inverse);
  font-size: 0.875rem;
}
.profil-switch__option-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.profil-switch__option-label {
  font-weight: 500;
  font-size: 0.875rem;
}
.profil-switch__option-name {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
}

@media (max-width: 768px) {
  .profil-switch__label {
    display: none;
  }
  .profil-switch__toggle {
    padding: 0.5rem;
  }
  .profil-switch__dropdown {
    right: -1rem;
    min-width: 200px;
  }
}
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
  padding: 2rem;
}
[data-theme=dark] .login-page {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
}

.login-container {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: 2.5rem;
}
[data-theme=dark] .login-container {
  background: #2d3748;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo-link {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.login-logo {
  height: 48px;
  width: auto;
}

.login-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 0.5rem 0;
}
[data-theme=dark] .login-title {
  color: #f7fafc;
}

.login-subtitle {
  color: #718096;
  font-size: 0.9375rem;
  margin: 0;
}
[data-theme=dark] .login-subtitle {
  color: #a0aec0;
}

.login-form-wrapper {
  margin-bottom: 1rem;
}
.login-form-wrapper .form-item {
  margin-bottom: 1.25rem;
}
.login-form-wrapper .form-item label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #1a202c;
}
[data-theme=dark] .login-form-wrapper .form-item label {
  color: #f7fafc;
}
.login-form-wrapper .form-input,
.login-form-wrapper input[type=text],
.login-form-wrapper input[type=email],
.login-form-wrapper input[type=password] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  background: white;
  color: #1a202c;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-form-wrapper .form-input:focus,
.login-form-wrapper input[type=text]:focus,
.login-form-wrapper input[type=email]:focus,
.login-form-wrapper input[type=password]:focus {
  outline: none;
  border-color: #2aa198;
  box-shadow: 0 0 0 3px rgba(42, 161, 152, 0.1);
}
.login-form-wrapper .form-input::placeholder,
.login-form-wrapper input[type=text]::placeholder,
.login-form-wrapper input[type=email]::placeholder,
.login-form-wrapper input[type=password]::placeholder {
  color: #a0aec0;
}
[data-theme=dark] .login-form-wrapper .form-input,
[data-theme=dark] .login-form-wrapper input[type=text],
[data-theme=dark] .login-form-wrapper input[type=email],
[data-theme=dark] .login-form-wrapper input[type=password] {
  background: #4a5568;
  border-color: #4a5568;
  color: #f7fafc;
}
[data-theme=dark] .login-form-wrapper .form-input:focus,
[data-theme=dark] .login-form-wrapper input[type=text]:focus,
[data-theme=dark] .login-form-wrapper input[type=email]:focus,
[data-theme=dark] .login-form-wrapper input[type=password]:focus {
  border-color: #2aa198;
}
[data-theme=dark] .login-form-wrapper .form-input::placeholder,
[data-theme=dark] .login-form-wrapper input[type=text]::placeholder,
[data-theme=dark] .login-form-wrapper input[type=email]::placeholder,
[data-theme=dark] .login-form-wrapper input[type=password]::placeholder {
  color: #718096;
}

.login-links {
  text-align: right;
  margin-bottom: 1.5rem;
}

.login-link {
  font-size: 0.875rem;
  color: #2aa198;
  text-decoration: none;
}
.login-link:hover {
  text-decoration: underline;
}

.login-separator {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
}
.login-separator::before, .login-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
[data-theme=dark] .login-separator::before, [data-theme=dark] .login-separator::after {
  background: #4a5568;
}
.login-separator span {
  padding: 0 1rem;
  color: #a0aec0;
  font-size: 0.875rem;
}

.login-footer {
  text-align: center;
}

.login-footer-text {
  color: #718096;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
}
[data-theme=dark] .login-footer-text {
  color: #a0aec0;
}

@media (max-width: 480px) {
  .login-page {
    padding: 1rem;
  }
  .login-container {
    padding: 1.5rem;
    border-radius: 0.75rem;
  }
  .login-title {
    font-size: 1.5rem;
  }
}
.auth-fieldset {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border-light);
}
.auth-fieldset:last-of-type {
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: none;
}

.auth-fieldset__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.auth-fieldset__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-primary-500);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 9999px;
}

.auth-fieldset__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-strong);
}

.auth-checkboxes {
  margin-bottom: 1.5rem;
}
.auth-checkboxes .form-group {
  margin-bottom: 0.75rem;
}
.auth-checkboxes .form-group:last-child {
  margin-bottom: 0;
}
.auth-checkboxes label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.auth-checkboxes label input[type=checkbox] {
  flex-shrink: 0;
  margin-top: 2px;
}
.auth-checkboxes label a {
  color: var(--color-link);
  text-decoration: underline;
}
.auth-checkboxes label a:hover {
  color: var(--color-link-hover);
}

.auth-submit {
  margin-bottom: 1.5rem;
}
.auth-submit .btn {
  width: 100%;
}

.auth-forgot {
  text-align: center;
  margin-bottom: 1rem;
}

.auth-link {
  color: var(--color-primary-500);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease;
}
.auth-link:hover {
  color: var(--color-primary-600);
  text-decoration: underline;
}
.auth-link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.auth-separator {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}
.auth-separator::before, .auth-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-light);
}
.auth-separator span {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-transform: lowercase;
}

.auth-card--register {
  max-width: 520px;
}

@keyframes auth-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
@keyframes auth-fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.auth-card .btn.is-loading,
.auth-card .button.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.auth-card .btn.is-loading::after,
.auth-card .button.is-loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  border: 2px solid transparent;
  border-top-color: #ffffff;
  border-radius: 9999px;
  animation: auth-spin 0.6s linear infinite;
}

@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}
.auth-body .form-item.error input,
.auth-body .form-item.error select,
.auth-body .form-item.error .form-input,
.auth-body .form-item.error .form-select,
.auth-body .form-group.has-error input,
.auth-body .form-group.has-error select,
.auth-body .form-group.has-error .form-input,
.auth-body .form-group.has-error .form-select {
  animation: auth-shake 0.3s ease;
}
.auth-body .form-item.error .form-item__error-message,
.auth-body .form-item.error .form-error,
.auth-body .form-group.has-error .form-item__error-message,
.auth-body .form-group.has-error .form-error {
  animation: auth-fadeIn 0.2s ease;
}

@media (max-width: 575px) {
  .auth-card {
    border-radius: 0;
    box-shadow: none;
    max-width: none;
  }
  .auth-card--register {
    max-width: none;
  }
  .auth-container {
    padding: 0;
    min-height: auto;
  }
  .auth-fieldset__header {
    flex-wrap: wrap;
  }
}
.dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}
@media (min-width: 768px) {
  .dashboard {
    padding: 1.5rem 2rem;
  }
}
@media (min-width: 1024px) {
  .dashboard {
    padding: 2rem 2.5rem;
  }
}

.dashboard-parcours {
  background: var(--bg-elevated, var(--bg-content));
  border: 1px solid var(--border-light);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  transition: background-color var(--theme-transition-duration, 200ms) ease, border-color var(--theme-transition-duration, 200ms) ease, color var(--theme-transition-duration, 200ms) ease;
}
@media (min-width: 768px) {
  .dashboard-parcours {
    padding: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .dashboard-parcours {
    padding: 2rem;
  }
}

.dashboard-parcours__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}
@media (min-width: 768px) {
  .dashboard-parcours__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
  }
}

.dashboard-parcours__welcome {
  flex: 1;
}

.dashboard-parcours__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
  line-height: 1.15;
}
@media (min-width: 768px) {
  .dashboard-parcours__title {
    font-size: 2rem;
  }
}

.dashboard-parcours__subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
}

.dashboard-parcours__progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.dashboard-parcours__progress-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.dashboard-parcours__progress-bar {
  width: 120px;
  height: 8px;
  background: var(--border-light);
  border-radius: 9999px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .dashboard-parcours__progress-bar {
    width: 160px;
  }
}

.dashboard-parcours__progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.dashboard-parcours__progress-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 45px;
  text-align: right;
}
@media (min-width: 768px) {
  .dashboard-parcours__progress-value {
    font-size: 1.5rem;
  }
}

.dashboard-parcours__content {
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
  .dashboard-parcours__content {
    margin-bottom: 1.5rem;
  }
}

.dashboard-parcours__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 576px) {
  .dashboard-parcours__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .dashboard-parcours__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dashboard-parcours__objective {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--color-brand-blue);
  border-radius: 16px;
  padding: 1.25rem;
  margin-top: 1.25rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .dashboard-parcours__objective {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    margin-top: 1.5rem;
  }
}
.dashboard-parcours__objective::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(233, 201, 76, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.dashboard-parcours__objective-content {
  position: relative;
  z-index: 1;
  flex: 1;
}
@media (min-width: 768px) {
  .dashboard-parcours__objective-content {
    max-width: 65%;
  }
}

.dashboard-parcours__objective-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: rgba(233, 201, 76, 0.2);
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}
.dashboard-parcours__objective-badge svg {
  width: 14px;
  height: 14px;
  color: #ebce38;
}
.dashboard-parcours__objective-badge span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ebce38;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard-parcours__objective-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.25rem 0;
  line-height: 1.35;
}
@media (min-width: 768px) {
  .dashboard-parcours__objective-title {
    font-size: 1.5rem;
  }
}

.dashboard-parcours__objective-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.65;
  margin: 0;
}

.dashboard-parcours__objective-visual {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.dashboard-parcours__objective-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #ebce38;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) {
  .dashboard-parcours__objective-icon {
    width: 72px;
    height: 72px;
  }
}
.dashboard-parcours__objective-icon svg {
  width: 28px;
  height: 28px;
  color: #ffffff;
}
@media (min-width: 768px) {
  .dashboard-parcours__objective-icon svg {
    width: 32px;
    height: 32px;
  }
}

.dashboard-parcours__objective-status {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.dashboard-congrats {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
[data-theme=dark] .dashboard-congrats {
  background: linear-gradient(135deg, rgba(233, 201, 76, 0.2) 0%, rgba(233, 201, 76, 0.1) 100%);
}
.dashboard-congrats::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  animation: dashboard-shine 4s ease-in-out infinite;
  pointer-events: none;
}
.dashboard-congrats__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .dashboard-congrats__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.dashboard-congrats__icon {
  font-size: 40px;
  line-height: 1;
  animation: dashboard-bounce 1s ease-out;
  flex-shrink: 0;
}
.dashboard-congrats__content {
  flex: 1;
}
@media (min-width: 768px) {
  .dashboard-congrats__content {
    padding: 0 1.25rem;
  }
}
.dashboard-congrats__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-brand-blue);
  margin: 0 0 0.25rem 0;
  line-height: 1.15;
}
[data-theme=dark] .dashboard-congrats__title {
  color: var(--color-accent);
}
.dashboard-congrats__text {
  font-size: 0.875rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
}
.dashboard-congrats__action {
  flex-shrink: 0;
}

.cta-paiement {
  margin-bottom: 1.25rem;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(25, 54, 88, 0.05) 0%, rgba(233, 198, 98, 0.1) 100%);
  border: 1px solid rgba(233, 198, 98, 0.3);
}
[data-theme=dark] .cta-paiement {
  background: linear-gradient(135deg, rgba(25, 54, 88, 0.3) 0%, rgba(233, 198, 98, 0.15) 100%);
  border-color: rgba(233, 198, 98, 0.4);
}
.cta-paiement::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(233, 198, 98, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.cta-paiement__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  text-align: center;
}
@media (min-width: 768px) {
  .cta-paiement__inner {
    flex-direction: row;
    text-align: left;
    padding: 1.25rem 1.5rem;
  }
}

.cta-paiement__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(233, 198, 98, 0.15);
  border-radius: 12px;
}
.cta-paiement__icon svg {
  width: 24px;
  height: 24px;
  color: #d4ad27;
}
[data-theme=dark] .cta-paiement__icon svg {
  color: #ebce38;
}
[data-theme=dark] .cta-paiement__icon {
  background: rgba(233, 198, 98, 0.2);
}

.cta-paiement__content {
  flex: 1;
  min-width: 0;
}

.cta-paiement__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
  line-height: 1.35;
}
@media (min-width: 768px) {
  .cta-paiement__title {
    font-size: 1.25rem;
  }
}

.cta-paiement__description {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.65;
}

.cta-paiement__button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  white-space: nowrap;
  transition: background-color 200ms ease, transform 100ms ease, box-shadow 200ms ease;
  background: #d8b022;
  color: #193658;
}
.cta-paiement__button:hover {
  background: #c9a82e;
  color: #193658;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(216, 176, 34, 0.3);
  text-decoration: none;
}
.cta-paiement__button:focus {
  outline: 2px solid #e9c662;
  outline-offset: 2px;
  color: #193658;
  text-decoration: none;
}
.cta-paiement__button:active {
  transform: translateY(0);
  color: #193658;
  text-decoration: none;
}
[data-theme=dark] .cta-paiement__button {
  background: #d8b022;
  color: #193658;
}
[data-theme=dark] .cta-paiement__button:hover {
  background: #c9a82e;
  color: #193658;
  box-shadow: 0 4px 16px rgba(216, 176, 34, 0.4);
}

@keyframes dashboard-shine {
  0%, 100% {
    transform: rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: rotate(180deg);
    opacity: 1;
  }
}
@keyframes dashboard-bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.test-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--bg-content);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  height: 100%;
  transition: box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
.test-card:hover {
  box-shadow: var(--shadow-md);
}
@media (min-width: 1024px) {
  .test-card {
    padding: 1.5rem;
  }
}

.test-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.test-card__icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.test-card__badge {
  flex-shrink: 0;
}

.test-card__body {
  flex: 1;
  margin-bottom: 0.75rem;
}

.test-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
  line-height: 1.35;
}
@media (min-width: 1024px) {
  .test-card__title {
    font-size: 1.25rem;
  }
}

.test-card__description {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

.test-card__progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.test-card__progress-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  min-width: 36px;
  text-align: right;
}

.test-card__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
  margin-top: auto;
}

.test-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 25%;
  min-width: 60px;
}

.test-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
  transition: background-color 200ms ease, transform 100ms ease;
  background: var(--color-accent);
  color: #1a1a2e;
}
.test-card__action:hover {
  background: var(--color-accent-hover, #d4b84a);
  color: #1a1a2e;
  transform: translateY(-1px);
  text-decoration: none;
}
.test-card__action:focus {
  color: #1a1a2e;
  text-decoration: none;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.test-card__action:active {
  color: #1a1a2e;
  transform: translateY(0);
  text-decoration: none;
}
.test-card__action--completed {
  background: var(--color-success);
  color: #ffffff;
  cursor: default;
}
.test-card__action--completed:hover {
  background: var(--color-success);
  color: #ffffff;
  transform: none;
  text-decoration: none;
}

.test-card--not-started .test-card__icon {
  opacity: 0.6;
}

.test-card--in-progress {
  border-color: var(--color-accent);
}
.test-card--in-progress .test-card__icon {
  animation: pulse 2s ease-in-out infinite;
}

.test-card--completed {
  border-color: var(--color-success);
  position: relative;
}
.test-card--completed::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-success);
  border-radius: 16px 16px 0 0;
}

.test-card--locked {
  opacity: 0.6;
  cursor: not-allowed;
}
.test-card--locked .test-card__icon {
  filter: grayscale(100%);
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--border-light);
  border-radius: 9999px;
  overflow: hidden;
  flex: 1;
}

.progress-bar--sm {
  height: 6px;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.section {
  margin-bottom: 2rem;
}

.section__header {
  margin-bottom: 1.25rem;
}

.section__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.grid {
  display: grid;
}

.grid--gap-lg {
  gap: 1.25rem;
}

.grid--cols-3 {
  grid-template-columns: 1fr;
}
@media (min-width: 576px) {
  .grid--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.layout {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

.layout__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.region-content,
.region.region-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.player-page {
  flex: 1 1 auto !important;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}
@media (max-width: 575px) {
  .player-page {
    padding-bottom: 72px;
  }
}

.player-container {
  flex: 1 1 auto;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 640px) {
  .player-container {
    padding: 16px;
    padding-top: 12px;
  }
}
@media (max-width: 375px) {
  .player-container {
    padding: 12px;
    padding-top: 10px;
  }
}

body.path-ui-front .footer {
  margin-top: 0 !important;
}

.layout:has(.player-page) .footer {
  margin-top: 0 !important;
}

.layout__footer .footer {
  margin-top: 0 !important;
}

.player-header {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  z-index: 100;
  flex-shrink: 0;
}

.player-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 12px 24px;
}
@media (max-width: 640px) {
  .player-header__inner {
    padding: 10px 16px;
  }
}

.player-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-header__logo-img {
  height: 28px;
  width: auto;
}
@media (max-width: 575px) {
  .player-header__logo-img {
    height: 24px;
  }
}

.player-header__logo-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}
@media (max-width: 575px) {
  .player-header__logo-text {
    font-size: 14px;
  }
}

.player-header__logo-icon {
  font-size: 20px;
}
@media (max-width: 575px) {
  .player-header__logo-icon {
    font-size: 18px;
  }
}

.player-header__quit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.player-header__quit:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}
.player-header__quit svg {
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .player-header__quit {
    padding: 6px 10px;
    font-size: 12px;
  }
}
@media (max-width: 575px) {
  .player-header__quit {
    padding: 5px 8px;
    font-size: 11px;
  }
}

@media (max-width: 575px) {
  .player-header__quit-text-long {
    display: none;
  }
}

.player-header__quit-text-short {
  display: none;
}
@media (max-width: 575px) {
  .player-header__quit-text-short {
    display: inline;
  }
}

.player-progress {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
@media (max-width: 640px) {
  .player-progress {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 10px;
  }
}
@media (max-width: 375px) {
  .player-progress {
    padding: 10px 12px;
    margin-bottom: 8px;
  }
}

.player-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
@media (max-width: 640px) {
  .player-progress__header {
    margin-bottom: 10px;
  }
}

.player-progress__flow-label {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .player-progress__flow-label {
    font-size: 13px;
  }
}
@media (max-width: 375px) {
  .player-progress__flow-label {
    font-size: 12px;
  }
}

.player-progress__dots {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 60%;
}
@media (max-width: 640px) {
  .player-progress__dots {
    gap: 4px;
    max-width: 55%;
  }
}
@media (max-width: 575px) {
  .player-progress__dots {
    gap: 3px;
    max-width: 50%;
    flex-wrap: nowrap;
    overflow: hidden;
  }
}
@media (max-width: 375px) {
  .player-progress__dots {
    gap: 2px;
    max-width: 45%;
  }
}

.player-progress__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .player-progress__dot {
    width: 6px;
    height: 6px;
  }
}
@media (max-width: 575px) {
  .player-progress__dot {
    width: 5px;
    height: 5px;
  }
}
@media (max-width: 375px) {
  .player-progress__dot {
    width: 4px;
    height: 4px;
  }
}
.player-progress__dot--completed {
  background: #10b981;
}
.player-progress__dot--current {
  width: 24px;
  height: 8px;
  border-radius: 4px;
  background: #2563eb;
}
@media (max-width: 640px) {
  .player-progress__dot--current {
    width: 18px;
    height: 6px;
  }
}
@media (max-width: 575px) {
  .player-progress__dot--current {
    width: 14px;
    height: 5px;
  }
}
@media (max-width: 375px) {
  .player-progress__dot--current {
    width: 12px;
    height: 4px;
  }
}

.player-progress__body {
  display: flex;
  gap: 16px;
  align-items: center;
}
@media (max-width: 640px) {
  .player-progress__body {
    gap: 12px;
  }
}
@media (max-width: 375px) {
  .player-progress__body {
    gap: 10px;
  }
}

.player-progress__circle {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .player-progress__circle {
    width: 52px;
    height: 52px;
  }
}
@media (max-width: 375px) {
  .player-progress__circle {
    width: 48px;
    height: 48px;
  }
}

.player-progress__circle-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.player-progress__circle-bg {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 6;
}

.player-progress__circle-fill {
  fill: none;
  stroke: #2563eb;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.player-progress__circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}
@media (max-width: 640px) {
  .player-progress__circle-text {
    font-size: 12px;
  }
}
@media (max-width: 375px) {
  .player-progress__circle-text {
    font-size: 11px;
  }
}

.player-progress__group-info {
  flex: 1;
  min-width: 0;
}

.player-progress__group-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin-bottom: 2px;
}
@media (max-width: 375px) {
  .player-progress__group-label {
    font-size: 10px;
    margin-bottom: 1px;
  }
}

.player-progress__group-name {
  display: none;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .player-progress__group-name {
    font-size: 14px;
    margin-bottom: 6px;
  }
}
@media (max-width: 375px) {
  .player-progress__group-name {
    font-size: 13px;
    margin-bottom: 4px;
  }
}

.player-progress__bar-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 375px) {
  .player-progress__bar-container {
    gap: 8px;
  }
}

.player-progress__bar {
  flex: 1;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
}

.player-progress__bar-fill {
  height: 100%;
  background: #10b981;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.player-progress__bar-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  flex-shrink: 0;
  min-width: 36px;
  text-align: right;
}
@media (max-width: 375px) {
  .player-progress__bar-label {
    font-size: 11px;
    min-width: 30px;
  }
}

.player-progress__instruction {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  text-align: center;
}
@media (max-width: 640px) {
  .player-progress__instruction {
    margin-top: 10px;
    padding-top: 10px;
  }
}
@media (max-width: 375px) {
  .player-progress__instruction {
    margin-top: 8px;
    padding-top: 8px;
  }
}

.player-progress__instruction-text p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.5;
}
.player-progress__instruction-text p::before {
  content: "💡 ";
  font-size: 14px;
}
@media (max-width: 640px) {
  .player-progress__instruction-text p {
    font-size: 12px;
  }
}
@media (max-width: 375px) {
  .player-progress__instruction-text p {
    font-size: 11px;
    line-height: 1.4;
  }
  .player-progress__instruction-text p::before {
    font-size: 12px;
  }
}
.player-progress__instruction-text strong {
  font-weight: 700;
  color: #1e293b;
}
.player-progress__instruction-text em {
  font-style: normal;
  color: #C00000 !important;
  font-weight: 700;
}
.player-progress__instruction-text em strong {
  color: inherit !important;
}
.player-progress__instruction-text {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.5;
}
.player-progress__instruction-text:not(:has(p))::before {
  content: "💡 ";
  font-size: 14px;
}
@media (max-width: 640px) {
  .player-progress__instruction-text {
    font-size: 12px;
  }
}
@media (max-width: 375px) {
  .player-progress__instruction-text {
    font-size: 11px;
    line-height: 1.4;
  }
}

.player-question {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
@media (max-width: 640px) {
  .player-question {
    padding: 20px 16px;
    border-radius: 8px;
  }
}
@media (max-width: 375px) {
  .player-question {
    padding: 16px 14px;
  }
}

.player-question__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  background: #f1f5f9;
  color: #64748b;
}
@media (max-width: 375px) {
  .player-question__badge {
    padding: 4px 8px;
    font-size: 10px;
    margin-bottom: 10px;
  }
}
.player-question__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
@media (max-width: 375px) {
  .player-question__badge::before {
    width: 5px;
    height: 5px;
  }
}
.player-question__badge--binary {
  background: #f0fdf4;
  color: #16a34a;
}
.player-question__badge--scale {
  background: #fef3c7;
  color: #d97706;
}
.player-question__badge--single {
  background: #dbeafe;
  color: #2563eb;
}
.player-question__badge--multi {
  background: #f0fdf4;
  color: #10b981;
}
.player-question__badge--text {
  background: #fce7f3;
  color: #db2777;
}

.player-question__instruction {
  display: none !important;
}

.player-question__text {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
  margin: 0 0 24px 0;
  text-align: center;
}
.player-question__text p {
  margin: 0;
}
@media (max-width: 640px) {
  .player-question__text {
    font-size: 17px;
    margin-bottom: 20px;
  }
}
@media (max-width: 375px) {
  .player-question__text {
    font-size: 15px;
    margin-bottom: 16px;
    text-align: left;
  }
}

.player-question__help {
  padding: 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .player-question__help {
    padding: 10px;
    margin-bottom: 16px;
  }
}
@media (max-width: 375px) {
  .player-question__help {
    padding: 8px;
    margin-bottom: 12px;
  }
}

.player-question__help-icon {
  display: none !important;
}

.player-question__help-text {
  font-size: 13px;
  color: #0369a1;
  line-height: 1.4;
}
.player-question__help-text p {
  margin: 0 0 6px 0;
}
.player-question__help-text p:last-child {
  margin-bottom: 0;
}
.player-question__help-text p:first-child::before {
  content: "ℹ️ ";
  font-size: 13px;
}
.player-question__help-text strong {
  font-weight: 700;
  color: #0c4a6e;
}
.player-question__help-text ul {
  margin: 6px 0 0 0;
  padding-left: 18px;
}
.player-question__help-text ul li {
  margin-bottom: 3px;
}
.player-question__help-text ul li:last-child {
  margin-bottom: 0;
}
@media (max-width: 375px) {
  .player-question__help-text {
    font-size: 12px;
  }
  .player-question__help-text p:first-child::before {
    font-size: 12px;
  }
  .player-question__help-text ul {
    padding-left: 14px;
  }
}

.player-binary {
  margin: 24px 0;
}
@media (max-width: 375px) {
  .player-binary {
    margin: 16px 0;
  }
}
.player-binary > div {
  display: flex;
  gap: 16px;
  justify-content: center;
}
@media (max-width: 575px) {
  .player-binary > div {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}
@media (max-width: 375px) {
  .player-binary > div {
    gap: 10px;
  }
}
.player-binary .form-item {
  flex: 1;
  max-width: 260px;
  margin: 0 !important;
}
@media (max-width: 575px) {
  .player-binary .form-item {
    max-width: 100%;
    width: 100%;
  }
}
.player-binary input[type=radio] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
.player-binary label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 20px !important;
  background: #ffffff !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 14px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-height: 130px !important;
  margin: 0 !important;
}
.player-binary label:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px);
}
@media (max-width: 575px) {
  .player-binary label {
    padding: 20px 16px !important;
    min-height: 110px !important;
  }
}
@media (max-width: 375px) {
  .player-binary label {
    padding: 16px 14px !important;
    min-height: 100px !important;
    border-radius: 10px !important;
  }
}
.player-binary .form-item:focus-within label {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.player-binary input[type=radio]:checked ~ label,
.player-binary .form-item:has(input:checked) label {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}
.player-binary label.player-binary--submitting {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}
.player-binary.player-binary--auto-submitting {
  pointer-events: none;
  animation: autosubmit-fade-out 0.4s ease-out forwards;
}

.player-binary__icon {
  display: block;
  font-size: 48px;
  line-height: 1;
  margin-bottom: 12px;
  transition: transform 0.2s ease;
}
.player-binary--submitting .player-binary__icon {
  transform: scale(1.1);
}
@media (max-width: 575px) {
  .player-binary__icon {
    font-size: 40px;
    margin-bottom: 10px;
  }
}
@media (max-width: 375px) {
  .player-binary__icon {
    font-size: 36px;
    margin-bottom: 8px;
  }
}

.player-binary__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.3;
}
@media (max-width: 375px) {
  .player-binary__label {
    font-size: 13px;
  }
}

.player-scale {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 24px 0;
}
@media (max-width: 575px) {
  .player-scale {
    flex-direction: column;
    gap: 10px;
  }
}
@media (max-width: 375px) {
  .player-scale {
    margin: 16px 0;
    gap: 8px;
  }
}
.player-scale > div {
  display: flex;
  gap: 14px;
  justify-content: center;
  width: 100%;
}
@media (max-width: 575px) {
  .player-scale > div {
    flex-direction: column;
    gap: 10px;
  }
}
.player-scale .form-item {
  flex: 1;
  max-width: 180px;
  margin: 0 !important;
}
@media (max-width: 575px) {
  .player-scale .form-item {
    max-width: 100%;
  }
}
.player-scale input[type=radio] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.player-scale label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 18px 14px !important;
  background: #ffffff !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.player-scale label:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
@media (max-width: 375px) {
  .player-scale label {
    padding: 14px 12px !important;
    border-radius: 8px !important;
  }
}
.player-scale .form-item:focus-within label {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.player-scale input[type=radio]:checked ~ label,
.player-scale .form-item:has(input:checked) label {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}
.player-scale label.player-scale--submitting {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}
.player-scale.player-scale--auto-submitting {
  pointer-events: none;
  animation: autosubmit-fade-out 0.4s ease-out forwards;
}

.player-scale__number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 6px;
  transition: transform 0.2s ease;
}
.player-scale--submitting .player-scale__number {
  transform: scale(1.1);
}
@media (max-width: 375px) {
  .player-scale__number {
    font-size: 26px;
    margin-bottom: 4px;
  }
}
.form-item:nth-child(1) .player-scale__number {
  color: #f59e0b;
}
.form-item:nth-child(2) .player-scale__number {
  color: #10b981;
}
.form-item:nth-child(3) .player-scale__number {
  color: #2563eb;
}

.player-scale__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 3px;
}
@media (max-width: 375px) {
  .player-scale__label {
    font-size: 12px;
  }
}

.player-scale__sublabel {
  display: block;
  font-size: 11px;
  color: #94a3b8;
}
@media (max-width: 375px) {
  .player-scale__sublabel {
    font-size: 10px;
  }
}

.player-choice {
  margin: 20px 0;
}
@media (max-width: 375px) {
  .player-choice {
    margin: 14px 0;
  }
}
.player-choice > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 375px) {
  .player-choice > div {
    gap: 8px;
  }
}
.player-choice .form-item {
  margin: 0 !important;
  flex: 1 1 auto;
}
.player-choice .form-item label {
  width: 100%;
}
.player-choice input[type=radio] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.player-choice label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  background: #f8fafc !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.player-choice label::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.player-choice label:hover {
  background: #f1f5f9 !important;
}
@media (max-width: 375px) {
  .player-choice label {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  .player-choice label::before {
    width: 16px;
    height: 16px;
  }
}
.player-choice .form-item:focus-within label {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.player-choice input[type=radio]:checked ~ label,
.player-choice .form-item:has(input:checked) label {
  background: #eff6ff !important;
  border-color: #2563eb !important;
}
.player-choice input[type=radio]:checked ~ label::before,
.player-choice .form-item:has(input:checked) label::before {
  border-color: #2563eb;
  background: #2563eb;
  box-shadow: inset 0 0 0 4px #ffffff;
}
.player-choice label.player-choice--submitting {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}
.player-choice.player-choice--auto-submitting {
  pointer-events: none;
  animation: autosubmit-fade-out 0.4s ease-out forwards;
}

.player-multi {
  margin: 20px 0;
}
@media (max-width: 375px) {
  .player-multi {
    margin: 14px 0;
  }
}

.player-multi__counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 12px;
}
@media (max-width: 375px) {
  .player-multi__counter {
    padding: 8px 10px;
    margin-bottom: 10px;
  }
}

.player-multi__counter-text {
  font-size: 13px;
  color: #64748b;
}
.player-multi__counter-text strong {
  color: #2563eb;
}
@media (max-width: 375px) {
  .player-multi__counter-text {
    font-size: 12px;
  }
}

.player-multi__counter-value {
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
}
@media (max-width: 375px) {
  .player-multi__counter-value {
    font-size: 12px;
  }
}

.player-multi__grid > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 375px) {
  .player-multi__grid > div {
    gap: 5px;
  }
}
.player-multi__grid .form-item {
  margin: 0 !important;
  flex: 1 1 auto;
}
.player-multi__grid .form-item label {
  width: 100%;
}
.player-multi__grid input[type=checkbox] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.player-multi__grid label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  background: #ffffff !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  min-height: 36px;
}
.player-multi__grid label::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.player-multi__grid label:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}
@media (max-width: 640px) {
  .player-multi__grid label {
    padding: 7px 9px !important;
    font-size: 12px !important;
    min-height: 34px;
  }
  .player-multi__grid label::before {
    width: 13px;
    height: 13px;
  }
}
@media (max-width: 375px) {
  .player-multi__grid label {
    padding: 9px 10px !important;
    font-size: 13px !important;
    min-height: 40px;
    border-radius: 6px !important;
  }
  .player-multi__grid label::before {
    width: 14px;
    height: 14px;
  }
}
.player-multi__grid .form-item:focus-within label {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.player-multi__grid input[type=checkbox]:checked ~ label,
.player-multi__grid .form-item:has(input:checked) label {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}
.player-multi__grid input[type=checkbox]:checked ~ label::before,
.player-multi__grid .form-item:has(input:checked) label::before {
  border-color: #2563eb;
  background: #2563eb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

.player-multi__label {
  flex: 1;
}

.player-multi__emoji {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  margin-left: 10px;
}
@media (max-width: 375px) {
  .player-multi__emoji {
    font-size: 14px;
    margin-left: 8px;
  }
}

.player-open {
  margin: 20px 0;
}
@media (max-width: 375px) {
  .player-open {
    margin: 14px 0;
  }
}

.player-open__textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s ease;
}
.player-open__textarea:focus {
  outline: none;
  border-color: #2563eb;
}
.player-open__textarea::placeholder {
  color: #94a3b8;
}
@media (max-width: 375px) {
  .player-open__textarea {
    min-height: 100px;
    padding: 12px;
    font-size: 13px;
    border-radius: 8px;
  }
}

.player-open__counter {
  display: block;
  text-align: right;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
}
@media (max-width: 375px) {
  .player-open__counter {
    font-size: 10px;
    margin-top: 4px;
  }
}

.player-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}
@media (max-width: 375px) {
  .player-nav {
    margin-top: 16px;
    padding-top: 14px;
  }
}
@media (max-width: 575px) {
  .player-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    margin-top: 0;
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  }
}

.player-nav__prev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}
.player-nav__prev:hover:not(:disabled) {
  border-color: #cbd5e1;
  color: #1e293b;
}
.player-nav__prev:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.player-nav__prev::before {
  content: "←";
}
@media (max-width: 375px) {
  .player-nav__prev {
    padding: 10px 12px;
    min-width: 40px;
    justify-content: center;
    font-size: 0;
  }
  .player-nav__prev::before {
    font-size: 14px;
  }
}

.player-nav__next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  background: #2563eb;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.player-nav__next:hover {
  background: #1d4ed8;
}
.player-nav__next::after {
  content: "→";
}
.player-nav__next--finish {
  background: #10b981;
}
.player-nav__next--finish:hover {
  background: #059669;
}
.player-nav__next--finish::after {
  content: "✓";
}
@media (max-width: 375px) {
  .player-nav__next {
    padding: 10px 20px;
    font-size: 13px;
  }
}
@media (max-width: 575px) {
  .player-nav__next {
    flex: 1;
    justify-content: center;
    margin-left: 10px;
  }
}

.player-complete {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  min-height: calc(100vh - 200px);
  background: #f8fafc;
}
@media (max-width: 575px) {
  .player-complete {
    padding: 24px 16px;
  }
}
.player-complete__card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 48px 40px;
  max-width: 560px;
  width: 100%;
  text-align: center;
}
@media (max-width: 575px) {
  .player-complete__card {
    padding: 32px 24px;
    border-radius: 12px;
  }
}
@media (max-width: 375px) {
  .player-complete__card {
    padding: 24px 20px;
  }
}
.player-complete__success {
  margin-bottom: 24px;
}
.player-complete__icon {
  margin-bottom: 16px;
}
.player-complete__icon-emoji {
  font-size: 64px;
  display: inline-block;
  animation: player-complete-bounce 0.6s ease-out;
}
@media (max-width: 575px) {
  .player-complete__icon-emoji {
    font-size: 48px;
  }
}
.player-complete__title {
  font-size: 36px;
  font-weight: 700;
  color: #2563eb;
  margin: 0;
  line-height: 1.2;
}
@media (max-width: 575px) {
  .player-complete__title {
    font-size: 28px;
  }
}
.player-complete__info {
  margin-bottom: 32px;
}
@media (max-width: 575px) {
  .player-complete__info {
    margin-bottom: 24px;
  }
}
.player-complete__subtitle {
  font-size: 18px;
  color: #1e293b;
  margin: 0 0 16px 0;
  line-height: 1.5;
}
.player-complete__subtitle strong {
  color: #2563eb;
  font-weight: 600;
}
@media (max-width: 575px) {
  .player-complete__subtitle {
    font-size: 16px;
    margin-bottom: 12px;
  }
}
.player-complete__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  padding: 10px 20px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 14px;
}
@media (max-width: 575px) {
  .player-complete__badge {
    padding: 8px 16px;
    font-size: 13px;
  }
}
.player-complete__badge-icon {
  font-size: 16px;
  font-weight: 700;
}
.player-complete__next {
  background: #f8fafc;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  text-align: left;
}
@media (max-width: 575px) {
  .player-complete__next {
    padding: 20px;
    margin-bottom: 24px;
  }
}
.player-complete__next-label {
  font-size: 14px;
  color: #94a3b8;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.player-complete__next-test {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 575px) {
  .player-complete__next-test {
    font-size: 18px;
  }
}
.player-complete__next-arrow {
  color: #2563eb;
  font-size: 24px;
}
.player-complete__final {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(37, 99, 235, 0.08) 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
}
@media (max-width: 575px) {
  .player-complete__final {
    padding: 20px;
    margin-bottom: 24px;
  }
}
.player-complete__final-congrats {
  font-size: 18px;
  font-weight: 600;
  color: #10b981;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 575px) {
  .player-complete__final-congrats {
    font-size: 16px;
  }
}
.player-complete__final-icon {
  font-size: 24px;
}
.player-complete__final-bilan {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}
.player-complete__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 575px) {
  .player-complete__actions {
    margin-bottom: 20px;
  }
}
.player-complete__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.player-complete__btn--primary {
  padding: 16px 32px;
  font-size: 16px;
  background: #2563eb;
  color: #ffffff;
  border: none;
}
.player-complete__btn--primary:hover {
  background: #1d4ed8;
  color: #ffffff;
}
@media (max-width: 575px) {
  .player-complete__btn--primary {
    padding: 14px 24px;
    font-size: 15px;
  }
}
.player-complete__btn--secondary {
  padding: 12px 24px;
  font-size: 14px;
  background: transparent;
  color: #64748b;
  border: 2px solid #e2e8f0;
}
.player-complete__btn--secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}
@media (max-width: 575px) {
  .player-complete__btn--secondary {
    padding: 10px 20px;
    font-size: 13px;
  }
}
.player-complete__btn-icon {
  font-size: 14px;
}
.player-complete__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
  text-align: left;
  padding: 16px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 8px;
  line-height: 1.5;
}
@media (max-width: 575px) {
  .player-complete__notice {
    font-size: 12px;
    padding: 12px;
  }
}
.player-complete__notice-icon {
  flex-shrink: 0;
  font-size: 16px;
}

@keyframes autosubmit-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0.7;
    transform: translateY(-4px);
  }
}
@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
.player-progress__dot--current {
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes player-complete-bounce {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.player-page {
  --player-bg-gradient: linear-gradient(135deg, #0D1B2A 0%, #1B3A4B 50%, #2C5364 100%);
  --player-accent: #4FC3F7;
  --player-accent-hover: #29B6F6;
  --player-accent-rgb: 79, 195, 247;
  --player-text-light: #FFFFFF;
  --player-text-light-secondary: rgba(255, 255, 255, 0.7);
  --player-card-bg: rgba(255, 255, 255, 0.97);
  --player-card-text: #1E3A5F;
  --player-card-text-secondary: #4A5568;
  --player-progress-bg: rgba(255, 255, 255, 0.2);
  --player-progress-fill: #4FC3F7;
  --player-option-border: #e2e8f0;
  --player-option-bg: rgba(255, 255, 255, 0.05);
  --player-option-bg-hover: rgba(255, 255, 255, 0.1);
  --player-option-bg-selected: rgba(79, 195, 247, 0.15);
  --player-header-bg: #ffffff;
  --player-header-border: #e2e8f0;
}

.player-page--theme-ocean {
  --player-bg-gradient: linear-gradient(135deg, #0D1B2A 0%, #1B3A4B 50%, #2C5364 100%);
  --player-accent: #4FC3F7;
  --player-accent-hover: #29B6F6;
  --player-accent-rgb: 79, 195, 247;
  --player-text-light: #FFFFFF;
  --player-text-light-secondary: rgba(255, 255, 255, 0.7);
  --player-card-bg: rgba(255, 255, 255, 0.97);
  --player-card-text: #1E3A5F;
  --player-card-text-secondary: #4A6FA5;
  --player-progress-bg: rgba(255, 255, 255, 0.2);
  --player-progress-fill: #4FC3F7;
  --player-option-border: #2C5364;
  --player-option-bg: rgba(79, 195, 247, 0.08);
  --player-option-bg-hover: rgba(79, 195, 247, 0.15);
  --player-option-bg-selected: rgba(79, 195, 247, 0.25);
  --player-header-bg: #0D1B2A;
  --player-header-border: #1B3A4B;
}

.player-page--theme-forest {
  --player-bg-gradient: linear-gradient(135deg, #1B4332 0%, #2D6A4F 50%, #40916C 100%);
  --player-accent: #95D5B2;
  --player-accent-hover: #74C69D;
  --player-accent-rgb: 149, 213, 178;
  --player-text-light: #FFFFFF;
  --player-text-light-secondary: rgba(255, 255, 255, 0.7);
  --player-card-bg: rgba(255, 255, 255, 0.97);
  --player-card-text: #1B4332;
  --player-card-text-secondary: #2D6A4F;
  --player-progress-bg: rgba(255, 255, 255, 0.2);
  --player-progress-fill: #95D5B2;
  --player-option-border: #40916C;
  --player-option-bg: rgba(149, 213, 178, 0.08);
  --player-option-bg-hover: rgba(149, 213, 178, 0.15);
  --player-option-bg-selected: rgba(149, 213, 178, 0.25);
  --player-header-bg: #1B4332;
  --player-header-border: #2D6A4F;
}

.player-page--theme-sunset {
  --player-bg-gradient: linear-gradient(135deg, #7F2B0A 0%, #B94517 50%, #E85D04 100%);
  --player-accent: #FFBA08;
  --player-accent-hover: #FAA307;
  --player-accent-rgb: 255, 186, 8;
  --player-text-light: #FFFFFF;
  --player-text-light-secondary: rgba(255, 255, 255, 0.8);
  --player-card-bg: rgba(255, 255, 255, 0.97);
  --player-card-text: #7F2B0A;
  --player-card-text-secondary: #B94517;
  --player-progress-bg: rgba(255, 255, 255, 0.2);
  --player-progress-fill: #FFBA08;
  --player-option-border: #E85D04;
  --player-option-bg: rgba(255, 186, 8, 0.08);
  --player-option-bg-hover: rgba(255, 186, 8, 0.15);
  --player-option-bg-selected: rgba(255, 186, 8, 0.25);
  --player-header-bg: #7F2B0A;
  --player-header-border: #B94517;
}

.player-page--theme-mountain {
  --player-bg-gradient: linear-gradient(135deg, #2D2D44 0%, #4A4063 50%, #6B5B7A 100%);
  --player-accent: #B8A9C9;
  --player-accent-hover: #A89ABC;
  --player-accent-rgb: 184, 169, 201;
  --player-text-light: #FFFFFF;
  --player-text-light-secondary: rgba(255, 255, 255, 0.7);
  --player-card-bg: rgba(255, 255, 255, 0.97);
  --player-card-text: #2D2D44;
  --player-card-text-secondary: #4A4063;
  --player-progress-bg: rgba(255, 255, 255, 0.2);
  --player-progress-fill: #B8A9C9;
  --player-option-border: #6B5B7A;
  --player-option-bg: rgba(184, 169, 201, 0.08);
  --player-option-bg-hover: rgba(184, 169, 201, 0.15);
  --player-option-bg-selected: rgba(184, 169, 201, 0.25);
  --player-header-bg: #2D2D44;
  --player-header-border: #4A4063;
}

.player-page--theme-city {
  --player-bg-gradient: linear-gradient(135deg, #212529 0%, #343A40 50%, #495057 100%);
  --player-accent: #20C997;
  --player-accent-hover: #12B886;
  --player-accent-rgb: 32, 201, 151;
  --player-text-light: #FFFFFF;
  --player-text-light-secondary: rgba(255, 255, 255, 0.7);
  --player-card-bg: rgba(255, 255, 255, 0.97);
  --player-card-text: #212529;
  --player-card-text-secondary: #495057;
  --player-progress-bg: rgba(255, 255, 255, 0.2);
  --player-progress-fill: #20C997;
  --player-option-border: #495057;
  --player-option-bg: rgba(32, 201, 151, 0.08);
  --player-option-bg-hover: rgba(32, 201, 151, 0.15);
  --player-option-bg-selected: rgba(32, 201, 151, 0.25);
  --player-header-bg: #212529;
  --player-header-border: #343A40;
}

.player-page--theme-cosmos {
  --player-bg-gradient: linear-gradient(135deg, #0F0C29 0%, #302B63 50%, #24243E 100%);
  --player-accent: #A78BFA;
  --player-accent-hover: #8B5CF6;
  --player-accent-rgb: 167, 139, 250;
  --player-text-light: #FFFFFF;
  --player-text-light-secondary: rgba(255, 255, 255, 0.7);
  --player-card-bg: rgba(255, 255, 255, 0.97);
  --player-card-text: #0F0C29;
  --player-card-text-secondary: #302B63;
  --player-progress-bg: rgba(255, 255, 255, 0.2);
  --player-progress-fill: #A78BFA;
  --player-option-border: #302B63;
  --player-option-bg: rgba(167, 139, 250, 0.08);
  --player-option-bg-hover: rgba(167, 139, 250, 0.15);
  --player-option-bg-selected: rgba(167, 139, 250, 0.25);
  --player-header-bg: #0F0C29;
  --player-header-border: #302B63;
}

.player-page {
  transition: background 0.5s ease;
}

.player-header {
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

.player-progress,
.player-question {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.player-progress__bar-fill,
.player-progress__circle-fill {
  transition: width 0.3s ease, stroke 0.5s ease, background-color 0.5s ease;
}

.player-progress__dot {
  transition: background-color 0.3s ease;
}

.player-page[class*="--theme-"] {
  background: var(--player-bg-gradient);
}

.player-page[class*="--theme-"] .player-progress__bar-fill {
  background: var(--player-progress-fill);
}

.player-page[class*="--theme-"] .player-progress__circle-fill {
  stroke: var(--player-progress-fill);
}

.player-page[class*="--theme-"] .player-progress__dot--current {
  background: var(--player-accent);
}

.player-page[class*="--theme-"] .player-binary input[type=radio]:checked ~ label,
.player-page[class*="--theme-"] .player-binary .form-item:has(input:checked) label {
  border-color: var(--player-accent) !important;
  background: var(--player-option-bg-selected) !important;
  box-shadow: 0 0 0 4px rgba(var(--player-accent-rgb), 0.1) !important;
}

.player-page[class*="--theme-"] .player-scale input[type=radio]:checked ~ label,
.player-page[class*="--theme-"] .player-scale .form-item:has(input:checked) label {
  border-color: var(--player-accent) !important;
  background: var(--player-option-bg-selected) !important;
}

.player-page[class*="--theme-"] .player-choice input[type=radio]:checked ~ label,
.player-page[class*="--theme-"] .player-choice .form-item:has(input:checked) label {
  border-color: var(--player-accent) !important;
  background: var(--player-option-bg-selected) !important;
}
.player-page[class*="--theme-"] .player-choice input[type=radio]:checked ~ label::before,
.player-page[class*="--theme-"] .player-choice .form-item:has(input:checked) label::before {
  border-color: var(--player-accent);
  background: var(--player-accent);
}

.player-page[class*="--theme-"] .player-multi__grid input[type=checkbox]:checked ~ label,
.player-page[class*="--theme-"] .player-multi__grid .form-item:has(input:checked) label {
  border-color: var(--player-accent) !important;
  background: var(--player-option-bg-selected) !important;
}
.player-page[class*="--theme-"] .player-multi__grid input[type=checkbox]:checked ~ label::before,
.player-page[class*="--theme-"] .player-multi__grid .form-item:has(input:checked) label::before {
  border-color: var(--player-accent);
  background: var(--player-accent);
}

.player-page[class*="--theme-"] .player-nav__next {
  background: var(--player-accent);
}
.player-page[class*="--theme-"] .player-nav__next:hover {
  background: var(--player-accent-hover);
}

.player-page[class*="--theme-"] .form-item:focus-within label {
  outline-color: var(--player-accent);
}

.player-page[class*="--theme-"] .player-open__textarea:focus {
  border-color: var(--player-accent);
}

.player-message-zone {
  margin-bottom: 16px;
}
@media (max-width: 375px) {
  .player-message-zone {
    margin-bottom: 12px;
  }
}
.player-message-zone:empty {
  display: none;
}

.da--drupal-messages .messages--error,
.da--drupal-messages .alert-danger,
.da--drupal-messages .messages.error,
.da--drupal-messages .form-item__error-message,
.da--drupal-messages .error-message,
.da--drupal-messages [role=alert],
.player-message-zone .messages--error,
.player-message-zone .alert-danger,
.player-message-zone .messages.error,
.player-message-zone .form-item__error-message,
.player-message-zone .error-message,
.player-message-zone [role=alert],
.player-question .messages--error,
.player-question .alert-danger,
.player-question .messages.error,
.player-question .form-item__error-message,
.player-question .error-message,
.player-question [role=alert] {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.03) 100%) !important;
  border: none !important;
  border-left: 4px solid #dc2626 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  color: rgb(187.0333333333, 30.1666666667, 30.1666666667) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.da--drupal-messages .messages--error::before,
.da--drupal-messages .alert-danger::before,
.da--drupal-messages .messages.error::before,
.da--drupal-messages .form-item__error-message::before,
.da--drupal-messages .error-message::before,
.da--drupal-messages [role=alert]::before,
.player-message-zone .messages--error::before,
.player-message-zone .alert-danger::before,
.player-message-zone .messages.error::before,
.player-message-zone .form-item__error-message::before,
.player-message-zone .error-message::before,
.player-message-zone [role=alert]::before,
.player-question .messages--error::before,
.player-question .alert-danger::before,
.player-question .messages.error::before,
.player-question .form-item__error-message::before,
.player-question .error-message::before,
.player-question [role=alert]::before {
  content: "⚠️";
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.da--drupal-messages .messages--error .icon,
.da--drupal-messages .messages--error .close,
.da--drupal-messages .messages--error button[data-dismiss],
.da--drupal-messages .alert-danger .icon,
.da--drupal-messages .alert-danger .close,
.da--drupal-messages .alert-danger button[data-dismiss],
.da--drupal-messages .messages.error .icon,
.da--drupal-messages .messages.error .close,
.da--drupal-messages .messages.error button[data-dismiss],
.da--drupal-messages .form-item__error-message .icon,
.da--drupal-messages .form-item__error-message .close,
.da--drupal-messages .form-item__error-message button[data-dismiss],
.da--drupal-messages .error-message .icon,
.da--drupal-messages .error-message .close,
.da--drupal-messages .error-message button[data-dismiss],
.da--drupal-messages [role=alert] .icon,
.da--drupal-messages [role=alert] .close,
.da--drupal-messages [role=alert] button[data-dismiss],
.player-message-zone .messages--error .icon,
.player-message-zone .messages--error .close,
.player-message-zone .messages--error button[data-dismiss],
.player-message-zone .alert-danger .icon,
.player-message-zone .alert-danger .close,
.player-message-zone .alert-danger button[data-dismiss],
.player-message-zone .messages.error .icon,
.player-message-zone .messages.error .close,
.player-message-zone .messages.error button[data-dismiss],
.player-message-zone .form-item__error-message .icon,
.player-message-zone .form-item__error-message .close,
.player-message-zone .form-item__error-message button[data-dismiss],
.player-message-zone .error-message .icon,
.player-message-zone .error-message .close,
.player-message-zone .error-message button[data-dismiss],
.player-message-zone [role=alert] .icon,
.player-message-zone [role=alert] .close,
.player-message-zone [role=alert] button[data-dismiss],
.player-question .messages--error .icon,
.player-question .messages--error .close,
.player-question .messages--error button[data-dismiss],
.player-question .alert-danger .icon,
.player-question .alert-danger .close,
.player-question .alert-danger button[data-dismiss],
.player-question .messages.error .icon,
.player-question .messages.error .close,
.player-question .messages.error button[data-dismiss],
.player-question .form-item__error-message .icon,
.player-question .form-item__error-message .close,
.player-question .form-item__error-message button[data-dismiss],
.player-question .error-message .icon,
.player-question .error-message .close,
.player-question .error-message button[data-dismiss],
.player-question [role=alert] .icon,
.player-question [role=alert] .close,
.player-question [role=alert] button[data-dismiss] {
  display: none !important;
}
@media (max-width: 375px) {
  .da--drupal-messages .messages--error,
  .da--drupal-messages .alert-danger,
  .da--drupal-messages .messages.error,
  .da--drupal-messages .form-item__error-message,
  .da--drupal-messages .error-message,
  .da--drupal-messages [role=alert],
  .player-message-zone .messages--error,
  .player-message-zone .alert-danger,
  .player-message-zone .messages.error,
  .player-message-zone .form-item__error-message,
  .player-message-zone .error-message,
  .player-message-zone [role=alert],
  .player-question .messages--error,
  .player-question .alert-danger,
  .player-question .messages.error,
  .player-question .form-item__error-message,
  .player-question .error-message,
  .player-question [role=alert] {
    padding: 10px 12px !important;
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
  .da--drupal-messages .messages--error::before,
  .da--drupal-messages .alert-danger::before,
  .da--drupal-messages .messages.error::before,
  .da--drupal-messages .form-item__error-message::before,
  .da--drupal-messages .error-message::before,
  .da--drupal-messages [role=alert]::before,
  .player-message-zone .messages--error::before,
  .player-message-zone .alert-danger::before,
  .player-message-zone .messages.error::before,
  .player-message-zone .form-item__error-message::before,
  .player-message-zone .error-message::before,
  .player-message-zone [role=alert]::before,
  .player-question .messages--error::before,
  .player-question .alert-danger::before,
  .player-question .messages.error::before,
  .player-question .form-item__error-message::before,
  .player-question .error-message::before,
  .player-question [role=alert]::before {
    font-size: 14px;
  }
}
.da--drupal-messages .messages--warning,
.da--drupal-messages .alert-warning,
.player-message-zone .messages--warning,
.player-message-zone .alert-warning,
.player-question .messages--warning,
.player-question .alert-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.03) 100%) !important;
  border-left: 4px solid #f59e0b !important;
  color: rgb(172.4330708661, 110.9507874016, 7.0669291339) !important;
}
.da--drupal-messages .messages--warning::before,
.da--drupal-messages .alert-warning::before,
.player-message-zone .messages--warning::before,
.player-message-zone .alert-warning::before,
.player-question .messages--warning::before,
.player-question .alert-warning::before {
  content: "💡";
}
.da--drupal-messages .messages--status,
.da--drupal-messages .alert-success,
.player-message-zone .messages--status,
.player-message-zone .alert-success,
.player-question .messages--status,
.player-question .alert-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%) !important;
  border-left: 4px solid #10b981 !important;
  color: rgb(11.9402985075, 138.0597014925, 96.2686567164) !important;
}
.da--drupal-messages .messages--status::before,
.da--drupal-messages .alert-success::before,
.player-message-zone .messages--status::before,
.player-message-zone .alert-success::before,
.player-question .messages--status::before,
.player-question .alert-success::before {
  content: "✓";
  color: #10b981;
  font-weight: 700;
}

.player-question > .form-item__error-message,
.player-question > .error,
.player-question > [role=alert],
.player-question .form-item > .error,
.player-question .form-item > .form-item__error-message {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.03) 100%) !important;
  border: none !important;
  border-left: 4px solid #dc2626 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  color: rgb(187.0333333333, 30.1666666667, 30.1666666667) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.player-question > .form-item__error-message::before,
.player-question > .error::before,
.player-question > [role=alert]::before,
.player-question .form-item > .error::before,
.player-question .form-item > .form-item__error-message::before {
  content: "⚠️";
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.player-question .form-item.error,
.player-question .form-item--error,
.player-question .form-item.has-error {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}
.player-question .form-radios.error,
.player-question .form-checkboxes.error,
.player-question .js-form-type-radios.error,
.player-question .js-form-type-checkboxes.error {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.player-binary.error, .player-binary.has-error {
  background: transparent !important;
}
.player-binary > div {
  background: transparent !important;
}
.player-binary > div.error {
  background: transparent !important;
}
.player-binary .form-item {
  background: transparent !important;
}
.player-binary .form-item.error, .player-binary .form-item.has-error {
  background: transparent !important;
}
.player-binary .form-item.error label, .player-binary .form-item.has-error label {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}
.player-binary .form-item.error label:hover, .player-binary .form-item.has-error label:hover {
  border-color: rgb(178.25, 28.75, 28.75) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}
.player-binary label {
  background: #ffffff !important;
}
.player-binary.has-error label, .player-binary[data-error=true] label {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}
.player-binary.has-error label:hover, .player-binary[data-error=true] label:hover {
  border-color: rgb(178.25, 28.75, 28.75) !important;
}

.player-scale .form-item {
  background: transparent !important;
}
.player-scale .form-item.error {
  background: transparent !important;
}
.player-scale .form-item.error label {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}
.player-scale.has-error label, .player-scale[data-error=true] label {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

.player-choice .form-item {
  background: transparent !important;
}
.player-choice .form-item.error {
  background: transparent !important;
}
.player-choice .form-item.error label {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}
.player-choice.has-error label, .player-choice[data-error=true] label {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

.player-multi__grid .form-item {
  background: transparent !important;
}
.player-multi__grid .form-item.error {
  background: transparent !important;
}
.player-multi__grid .form-item.error label {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}
.player-multi__grid.has-error label, .player-multi__grid[data-error=true] label {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

.player-open .form-item {
  background: transparent !important;
}
.player-open .form-item.error {
  background: transparent !important;
}
.player-open.has-error .player-open__textarea, .player-open[data-error=true] .player-open__textarea,
.player-open .form-item.error .player-open__textarea {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

.player-question .form-item.error,
.player-question .form-item--error {
  background: transparent !important;
}

.panier-form {
  --panier-overlay-light: rgba(255, 255, 255, 0.7);
  --panier-overlay-dark: rgba(0, 0, 0, 0.5);
}

.panier-form {
  max-width: 640px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: var(--bg-content);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  transition: background-color var(--theme-transition-duration, 200ms) ease, border-color var(--theme-transition-duration, 200ms) ease, color var(--theme-transition-duration, 200ms) ease;
}
@media (min-width: 768px) {
  .panier-form {
    margin: 3rem auto;
    padding: 2.5rem;
  }
}
.panier-form__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 2rem 0;
}
@media (min-width: 768px) {
  .panier-form__title {
    font-size: 2rem;
  }
}

.panier-offre {
  background-color: var(--hover-bg);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: background-color var(--theme-transition-duration, 200ms) ease, border-color var(--theme-transition-duration, 200ms) ease, color var(--theme-transition-duration, 200ms) ease;
}

.panier-offre__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 1rem 0;
}
[data-theme=dark] .panier-offre__title {
  color: var(--color-accent);
}

.panier-offre__details {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
}
.panier-offre__details li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.panier-offre__details li:last-child {
  margin-bottom: 0;
}
.panier-offre__details li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 700;
}

.panier-offre__price {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.panier-offre__price-label {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.panier-offre__price-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.panier-coupon {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (min-width: 576px) {
  .panier-coupon {
    flex-direction: row;
    align-items: stretch;
  }
}

.panier-coupon__input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.25s ease;
}
.panier-coupon__input::placeholder {
  color: var(--text-muted);
}
.panier-coupon__input:hover {
  border-color: var(--text-muted);
}
.panier-coupon__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.panier-coupon__input.error {
  border-color: var(--color-error);
  box-shadow: var(--shadow-focus-error);
}

.panier-coupon__btn {
  white-space: nowrap;
}
@media (min-width: 576px) {
  .panier-coupon__btn {
    flex-shrink: 0;
  }
}

.panier-coupon-feedback {
  margin-bottom: 1.5rem;
}

.panier-coupon-feedback__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.panier-coupon-feedback__item:last-child {
  margin-bottom: 0;
}

.panier-coupon-feedback__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-success);
}

.panier-coupon-feedback__reduction {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-success);
}

.panier-coupon-feedback--error .panier-coupon-feedback__item {
  background-color: var(--color-error-bg);
  border-color: var(--color-error);
}
.panier-coupon-feedback--error .panier-coupon-feedback__name,
.panier-coupon-feedback--error .panier-coupon-feedback__reduction {
  color: var(--color-error);
}

.panier-prix {
  background-color: var(--bg-content);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 2rem;
}

.panier-prix__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}
.panier-prix__row:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}
.panier-prix__row--total {
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 2px solid var(--color-primary);
  border-bottom: none !important;
}
.panier-prix__row--total .panier-prix__label,
.panier-prix__row--total .panier-prix__value {
  font-size: 1.25rem;
  font-weight: 700;
}
.panier-prix__row--total .panier-prix__value {
  color: var(--color-primary);
}
[data-theme=dark] .panier-prix__row--total .panier-prix__value {
  color: var(--color-accent);
}

.panier-prix__label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.panier-prix__value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.panier-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.panier-actions__submit {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.125rem;
}
@media (min-width: 576px) {
  .panier-actions__submit {
    width: auto;
    margin: 0 auto;
    min-width: 280px;
  }
}

.panier-actions__back {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}
.panier-actions__back:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.panier-form .messages {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
}
.panier-form .messages--error {
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error);
  color: var(--color-error-text);
}
.panier-form .messages--status {
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success);
  color: var(--color-success-text);
}
.panier-form .messages--warning {
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  color: var(--color-warning-text);
}
.panier-form .form-item--error-message {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-error);
}

.panier-form--empty {
  text-align: center;
  padding: 3rem;
}
.panier-form--empty .panier-form__empty-icon {
  font-size: 48px;
  margin-bottom: 1rem;
  opacity: 0.3;
}
.panier-form--empty .panier-form__empty-message {
  font-size: 1.25rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.panier-form--loading {
  position: relative;
  pointer-events: none;
}
.panier-form--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--panier-overlay-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}
[data-theme=dark] .panier-form--loading::after {
  background-color: var(--panier-overlay-dark);
}

@media (max-width: 575px) {
  .panier-form {
    margin: 1rem;
    padding: 1.25rem;
    border-radius: 16px;
  }
  .panier-form__title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }
  .panier-offre {
    padding: 1rem;
  }
  .panier-offre__title {
    font-size: 1rem;
  }
  .panier-offre__price-value {
    font-size: 1.25rem;
  }
  .panier-prix {
    padding: 1rem;
  }
  .panier-prix__row--total .panier-prix__label,
  .panier-prix__row--total .panier-prix__value {
    font-size: 1rem;
  }
}
@keyframes panier-coupon-appear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.panier-coupon-feedback__item {
  animation: panier-coupon-appear 0.25s ease-out;
}

@keyframes panier-prix-flash {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: var(--color-accent-light);
  }
}
.panier-prix--updated .panier-prix__row--total {
  animation: panier-prix-flash 0.6s ease;
}

.cawl-return {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
@media (min-width: 768px) {
  .cawl-return {
    padding: 3rem;
  }
}

.cawl-card {
  max-width: 480px;
  width: 100%;
  background-color: var(--bg-content);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: background-color var(--theme-transition-duration, 200ms) ease, border-color var(--theme-transition-duration, 200ms) ease, color var(--theme-transition-duration, 200ms) ease;
}
@media (min-width: 768px) {
  .cawl-card {
    padding: 3rem 2.5rem;
  }
}

.cawl-card__icon {
  margin-bottom: 1.5rem;
}
.cawl-card__icon svg {
  width: 80px;
  height: 80px;
}

.cawl-card__icon--success svg {
  color: var(--color-success);
  animation: cawl-icon-pop 0.5s ease-out;
}

.cawl-card__icon--warning svg {
  color: var(--color-warning);
}

.cawl-card__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
}
@media (min-width: 768px) {
  .cawl-card__title {
    font-size: 2.5rem;
  }
}

.cawl-card__text {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0 0 0.75rem 0;
  line-height: 1.65;
}

.cawl-card__subtext {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem 0;
}

.cawl-card__timer {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
}
.cawl-card__timer span {
  font-weight: 600;
  color: var(--text-secondary);
}

.cawl-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-on-accent);
  background: var(--color-accent);
  border: none;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-accent);
}
.cawl-card__btn:hover {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-accent-hover);
  transform: translateY(-2px);
}
.cawl-card__btn:active {
  transform: translateY(0);
}

.cawl-card__link {
  display: block;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}
.cawl-card__link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.cawl-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cawl-card--success .cawl-card__icon svg {
  color: var(--color-success);
}

.cawl-card--failure .cawl-card__icon svg {
  color: var(--color-error);
}
.cawl-card--failure .cawl-card__btn {
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.cawl-card--failure .cawl-card__btn:hover {
  background: var(--color-primary-hover);
}

.cawl-state--success .cawl-card__icon svg {
  animation: cawl-icon-pop 0.5s ease-out;
}

.cawl-state--timeout .cawl-card__icon svg {
  color: var(--color-warning);
}

.cawl-card__spinner {
  margin-bottom: 1.5rem;
}

.cawl-spinner {
  width: 80px;
  height: 80px;
  animation: cawl-spin 1.5s linear infinite;
}

.cawl-spinner__track {
  fill: none;
  stroke: var(--border-light);
  stroke-width: 4;
}

.cawl-spinner__progress {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 126;
  stroke-dashoffset: 94;
  transform-origin: center;
}

@keyframes cawl-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes cawl-icon-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes cawl-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cawl-card {
  animation: cawl-fade-in 0.4s ease-out;
}

[data-theme=dark] .cawl-card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
[data-theme=dark] .cawl-spinner__track {
  stroke: var(--border-color);
}

@media (max-width: 575px) {
  .cawl-return {
    padding: 1rem;
    min-height: 50vh;
  }
  .cawl-card {
    padding: 2rem 1.25rem;
  }
  .cawl-card__title {
    font-size: 1.5rem;
  }
  .cawl-card__icon svg,
  .cawl-spinner {
    width: 64px;
    height: 64px;
  }
  .cawl-card__btn {
    width: 100%;
  }
}
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

.d-grid {
  display: grid !important;
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-flex {
    display: flex !important;
  }
}
.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.mb-6 {
  margin-bottom: 1.5rem !important;
}

.mb-8 {
  margin-bottom: 2rem !important;
}

.p-0 {
  padding: 0 !important;
}

.p-4 {
  padding: 1rem !important;
}

.p-6 {
  padding: 1.5rem !important;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-primary {
  color: var(--color-primary-500);
}

.text-secondary {
  color: var(--color-secondary-500);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-error {
  color: var(--color-error);
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.bg-primary {
  background-color: var(--color-primary-500);
}

.bg-secondary {
  background-color: var(--color-secondary-500);
}

.bg-surface {
  background-color: var(--color-bg);
}

.bg-elevated {
  background-color: var(--color-bg-elevated);
}

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.max-w-none {
  max-width: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}