:root {
    --blue-background: #EFF5FF;
    --blue-background-surface: #FCFDFF;
    --blue-faint-glow: 0 15px 40px rgba(59, 130, 246, 0.1);
    --blue-glow: 0 15px 40px rgba(59, 130, 246, 0.4);
    --blue-main: #397DED;
    --blue-main-0: rgba(57, 125, 237, 0);
    --blue-main-10: rgba(57, 125, 237, 0.1);
    --blue-main-12: rgba(57, 125, 237, 0.12);
    --blue-main-15: rgba(57, 125, 237, 0.15);
    --blue-main-20: rgba(57, 125, 237, 0.2);
    --blue-main-25: rgba(57, 125, 237, 0.25);
    --blue-main-30: rgba(57, 125, 237, 0.3);
    --blue-main-40: rgba(57, 125, 237, 0.4);
    --blue-main-5: rgba(57, 125, 237, 0.05);
    --blue-main-50: rgba(57, 125, 237, 0.5);
    --blue-main-hover: #326ED1;
    --blue-text-main: #1B2D4B;
    --blue-text-main-10: rgba(27, 45, 75, 0.1);
    --blue-text-main-40: rgba(27, 45, 75, 0.4);
    --blue-text-main-5: rgba(27, 45, 75, 0.05);
    --blue-text-main-50: rgba(27, 45, 75, 0.5);
    --blue-text-main-70: rgba(27, 45, 75, 0.7);
    --blue-text-main-80: rgba(27, 45, 75, 0.8);
    --blue-text-muted: #9CA3AF;
    --blue-text-secondary: #6B7380;
    --blue-text-secondary-15: rgba(107, 115, 128, 0.15);
    --blue-text-secondary-40: rgba(107, 115, 128, 0.4);
    --brand-primary-main: #7C3AED;
    --brand-primary-main-10: rgba(124, 58, 237, 0.1);
    --brand-primary-main-12: rgba(124, 58, 237, 0.12);
    --brand-primary-main-15: rgba(124, 58, 237, 0.15);
    --brand-primary-main-20: rgba(124, 58, 237, 0.2);
    --brand-primary-main-25: rgba(124, 58, 237, 0.25);
    --brand-primary-main-30: rgba(124, 58, 237, 0.3);
    --brand-primary-main-5: rgba(124, 58, 237, 0.05);
    --brand-primary-main-hover: #6D28D9;
    --green-background: #EFFFF3;
    --green-background-surface: #FCFFFD;
    --green-faint-glow: 0 15px 40px rgba(34, 197, 94, 0.1);
    --green-faith-glow: 0 3px 12px rgba(34, 197, 94, 0.1);
    --green-glow: 0 15px 40px rgba(34, 197, 94, 0.4);
    --green-main: #2DBA52;
    --green-main-0: rgba(45, 186, 82, 0);
    --green-main-10: rgba(45, 186, 82, 0.1);
    --green-main-12: rgba(45, 186, 82, 0.12);
    --green-main-15: rgba(45, 186, 82, 0.15);
    --green-main-20: rgba(45, 186, 82, 0.2);
    --green-main-25: rgba(45, 186, 82, 0.25);
    --green-main-30: rgba(45, 186, 82, 0.3);
    --green-main-40: rgba(45, 186, 82, 0.4);
    --green-main-5: rgba(45, 186, 82, 0.05);
    --green-main-50: rgba(45, 186, 82, 0.5);
    --green-main-hover: #28A448;
    --green-text-main: #1B4B28;
    --green-text-main-10: rgba(27, 75, 40, 0.1);
    --green-text-main-40: rgba(27, 75, 40, 0.4);
    --green-text-main-5: rgba(27, 75, 40, 0.05);
    --green-text-main-50: rgba(27, 75, 40, 0.5);
    --green-text-main-70: rgba(27, 75, 40, 0.7);
    --green-text-main-80: rgba(27, 75, 40, 0.8);
    --green-text-muted: #9CAFA1;
    --green-text-secondary: #6B8071;
    --green-text-secondary-10: rgba(107, 128, 113, 0.1);
    --green-text-secondary-15: rgba(107, 128, 113, 0.15);
    --green-text-secondary-20: rgba(107, 128, 113, 0.2);
    --green-text-secondary-30: rgba(107, 128, 113, 0.3);
    --orange-background: #FFF6EF;
    --orange-background-surface: #FFFEFC;
    --orange-faint-glow: 0 15px 40px rgba(249, 115, 22, 0.1);
    --orange-glow: 0 15px 40px rgba(249, 115, 22, 0.4);
    --orange-gradient: linear-gradient(180deg, #FDBA74 0%, #EA580C 100%);
    --orange-gradient-button: linear-gradient(135deg, #FB923C, #F97316);
    --orange-gradient-button-hover: linear-gradient(135deg, #F97316, #EA580C);
    --orange-main: #ED8439;
    --orange-main-0: rgba(237, 132, 57, 0);
    --orange-main-10: rgba(237, 132, 57, 0.1);
    --orange-main-12: rgba(237, 132, 57, 0.12);
    --orange-main-15: rgba(237, 132, 57, 0.15);
    --orange-main-20: rgba(237, 132, 57, 0.2);
    --orange-main-25: rgba(237, 132, 57, 0.25);
    --orange-main-30: rgba(237, 132, 57, 0.3);
    --orange-main-40: rgba(237, 132, 57, 0.4);
    --orange-main-5: rgba(237, 132, 57, 0.05);
    --orange-main-50: rgba(237, 132, 57, 0.5);
    --orange-main-hover: #D17432;
    --orange-text-main: #4B2F1B;
    --orange-text-main-10: rgba(75, 47, 27, 0.1);
    --orange-text-main-40: rgba(75, 47, 27, 0.4);
    --orange-text-main-5: rgba(75, 47, 27, 0.05);
    --orange-text-main-50: rgba(75, 47, 27, 0.5);
    --orange-text-main-70: rgba(75, 47, 27, 0.7);
    --orange-text-main-80: rgba(75, 47, 27, 0.8);
    --orange-text-muted: #AFA49C;
    --orange-text-secondary: #80746B;
    --orange-text-secondary-10: rgba(128, 116, 107, 0.1);
    --orange-text-secondary-15: rgba(128, 116, 107, 0.15);
    --orange-text-secondary-20: rgba(128, 116, 107, 0.2);
    --orange-text-secondary-30: rgba(128, 116, 107, 0.3);
    --pink-background: #FFEFF7;
    --pink-background-surface: #FFFCFE;
    --pink-faint-glow: 0 15px 40px rgba(236, 72, 153, 0.1);
    --pink-glow: 0 15px 40px rgba(236, 72, 153, 0.4);
    --pink-main: #ED3990;
    --pink-main-0: rgba(237, 57, 144, 0);
    --pink-main-10: rgba(237, 57, 144, 0.1);
    --pink-main-12: rgba(237, 57, 144, 0.12);
    --pink-main-15: rgba(237, 57, 144, 0.15);
    --pink-main-20: rgba(237, 57, 144, 0.2);
    --pink-main-25: rgba(237, 57, 144, 0.25);
    --pink-main-30: rgba(237, 57, 144, 0.3);
    --pink-main-40: rgba(237, 57, 144, 0.4);
    --pink-main-5: rgba(237, 57, 144, 0.05);
    --pink-main-50: rgba(237, 57, 144, 0.5);
    --pink-main-hover: #D1327F;
    --pink-text-main: #4B1B32;
    --pink-text-main-10: rgba(75, 27, 50, 0.1);
    --pink-text-main-40: rgba(75, 27, 50, 0.4);
    --pink-text-main-5: rgba(75, 27, 50, 0.05);
    --pink-text-main-50: rgba(75, 27, 50, 0.5);
    --pink-text-main-70: rgba(75, 27, 50, 0.7);
    --pink-text-main-80: rgba(75, 27, 50, 0.8);
    --pink-text-muted: #AF9CA5;
    --pink-text-secondary: #806B75;
    --primary-faint-glow: 0 15px 40px rgba(124, 58, 237, 0.1);
    --primary-glow: 0 15px 40px rgba(124, 58, 237, 0.4);
    --primary-gradient: linear-gradient(180deg, #A78BFA 0%, #6D28D9 100%);
    --primary-main: #7C3AED;
    --primary-main-0: rgba(124, 58, 237, 0);
    --primary-main-10: rgba(124, 58, 237, 0.1);
    --primary-main-12: rgba(124, 58, 237, 0.12);
    --primary-main-15: rgba(124, 58, 237, 0.15);
    --primary-main-20: rgba(124, 58, 237, 0.2);
    --primary-main-25: rgba(124, 58, 237, 0.25);
    --primary-main-3: rgba(124, 58, 237, 0.03);
    --primary-main-30: rgba(124, 58, 237, 0.3);
    --primary-main-40: rgba(124, 58, 237, 0.4);
    --primary-main-5: rgba(124, 58, 237, 0.05);
    --primary-main-50: rgba(124, 58, 237, 0.5);
    --primary-main-60: rgba(124, 58, 237, 0.6);
    --primary-main-70: rgba(124, 58, 237, 0.7);
    --primary-main-8: rgba(124, 58, 237, 0.08);
    --primary-main-80: rgba(124, 58, 237, 0.8);
    --primary-main-90: rgba(124, 58, 237, 0.9);
    --primary-main-alt: #8B5CF6;
    --primary-main-deep: #9333EA;
    --primary-main-deep-50: rgba(147, 51, 234, 0.5);
    --primary-main-hover: #6D28D9;
    --primary-text-main: #1E1B4B;
    --primary-text-main-10: rgba(30, 27, 75, 0.1);
    --primary-text-main-15: rgba(30, 27, 75, 0.15);
    --primary-text-main-40: rgba(30, 27, 75, 0.4);
    --primary-text-main-5: rgba(30, 27, 75, 0.05);
    --primary-text-main-50: rgba(30, 27, 75, 0.5);
    --primary-text-main-70: rgba(30, 27, 75, 0.7);
    --primary-text-main-80: rgba(30, 27, 75, 0.8);
    --primary-text-main-90: rgba(30, 27, 75, 0.9);
    --primary-text-muted: #A39CAF;
    --primary-text-secondary: #736B80;
    --primary-text-secondary-10: rgba(115, 107, 128, 0.1);
    --primary-text-secondary-15: rgba(115, 107, 128, 0.15);
    --primary-text-secondary-20: rgba(115, 107, 128, 0.2);
    --primary-text-secondary-30: rgba(115, 107, 128, 0.3);
    --primary-text-secondary-40: rgba(115, 107, 128, 0.4);
    --primary-text-secondary-5: rgba(115, 107, 128, 0.05);
    --red-background: #FFEFEF;
    --red-background-surface: #FFFCFC;
    --red-faint-glow: 0 15px 40px rgba(239, 68, 68, 0.1);
    --red-glow: 0 15px 40px rgba(239, 68, 68, 0.4);
    --red-main: #ED3939;
    --red-main-10: rgba(237, 57, 57, 0.1);
    --red-main-15: rgba(237, 57, 57, 0.15);
    --red-main-20: rgba(237, 57, 57, 0.2);
    --red-main-25: rgba(237, 57, 57, 0.25);
    --red-main-30: rgba(237, 57, 57, 0.3);
    --red-main-5: rgba(237, 57, 57, 0.05);
    --red-main-50: rgba(237, 57, 57, 0.5);
    --red-main-80: rgba(237, 57, 57, 0.8);
    --red-main-hover: #D13232;
    --red-text-main: #4B1B1B;
    --red-text-main-10: rgba(75, 27, 27, 0.1);
    --red-text-main-80: rgba(75, 27, 27, 0.8);
    --red-text-muted: #AF9C9C;
    --red-text-secondary: #806B6B;
    --red-text-secondary-15: rgba(128, 107, 107, 0.15);
    --red-text-secondary-20: rgba(128, 107, 107, 0.2);
    --red-text-secondary-80: rgba(128, 107, 107, 0.8);
    --status-error: #FF6B6B;
    --status-error-20: rgba(255, 107, 107, 0.2);
    --status-success: #4ADE80;
    --status-success-15: rgba(74, 222, 128, 0.15);
    --status-success-20: rgba(74, 222, 128, 0.2);
    --status-success-50: rgba(74, 222, 128, 0.5);
    --status-warning: #EFAF00;
    --status-warning-15: rgba(239, 175, 0, 0.15);
    --status-warning-20: rgba(239, 175, 0, 0.2);
    --status-warning-50: rgba(239, 175, 0, 0.5);
    --surface-border-soft: var(--primary-text-main-10);
    --surface-border-strong: var(--primary-text-secondary-20);
    --surface-elevated: var(--background-surface);
    --surface-elevated-strong: var(--background-page);
    --surface-outline: 0 0 0 1px var(--surface-border-soft);
    --surface-outline-inset: inset 0 0 0 1px var(--surface-border-soft);
    --surface-outline-strong: 0 0 0 1px var(--surface-border-strong);
    --surface-shadow-elevated: 0 20px 50px var(--primary-text-main-15);
    --surface-shadow-soft: 0 12px 30px var(--primary-text-main-10);

    --black-0: rgba(0, 0, 0, 0);
    --black-10: rgba(0, 0, 0, 0.1);
    --black-15: rgba(0, 0, 0, 0.15);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-30: rgba(0, 0, 0, 0.3);
    --black-40: rgba(0, 0, 0, 0.4);
    --black-5: rgba(0, 0, 0, 0.05);
    --black-50: rgba(0, 0, 0, 0.5);
    --black-60: rgba(0, 0, 0, 0.6);
    --black-solid: #000000;
    --text-inverted: rgba(255, 255, 255, 0.85);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-06: rgba(255, 255, 255, 0.06);
    --white-08: rgba(255, 255, 255, 0.08);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-12: rgba(255, 255, 255, 0.12);
    --white-15: rgba(255, 255, 255, 0.15);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-95: rgba(255, 255, 255, 0.95);
    --white-solid: #FFFFFF;
    --yellow-text-main: #4B471B;
    --yellow-text-main-10: rgba(75, 71, 27, 0.1);
    --yellow-text-main-40: rgba(75, 71, 27, 0.4);
    --yellow-text-main-5: rgba(75, 71, 27, 0.05);
    --yellow-text-main-50: rgba(75, 71, 27, 0.5);
    --yellow-text-main-70: rgba(75, 71, 27, 0.7);
    --yellow-text-main-80: rgba(75, 71, 27, 0.8);
    --yellow-text-muted: #AFAD9C;
    --yellow-text-secondary: #807E6B;

    --background-dark: #0A0911;
    --background-dark-95: rgba(10, 9, 17, 0.95);
    --background-dark-surface: #181621;
    --background-dark-surface-80: rgba(24, 22, 33, 0.8);
    --background-dark-tabs: #13111B;
    --background-input: #FAFAFC;
    --background-input-stroke: #E5E7EB;
    --background-page: #F1EFF6;
    --background-page-10: rgba(241, 239, 246, 0.1);
    --background-page-30: rgba(241, 239, 246, 0.3);
    --background-page-5: rgba(241, 239, 246, 0.05);
    --background-page-90: rgba(241, 239, 246, 0.9);
    --background-surface: #FDFCFF;
    --background-surface-25: rgba(253, 252, 255, 0.25);
    --background-surface-50: rgba(253, 252, 255, 0.5);
    --background-surface-70: rgba(253, 252, 255, 0.7);
    --background-surface-90: rgba(253, 252, 255, 0.9);
    --background-surface-95: rgba(253, 252, 255, 0.95);
    --control-color-scheme: light;
    --overlay-heavy: rgba(30, 25, 45, 0.85);
    --overlay-soft: var(--primary-text-main-50);
    --overlay-strong: var(--primary-text-main-80);
    --phone-gradient-end: #1F1D2B;
    --phone-gradient-start: #2D2640;
    --phone-notch: #171525;
    --plans-gradient-end: #1E1A2E;
    --plans-gradient-start: #2A2438;
    --plans-surface-strong: #1A1625;
    --popup-close-bg: var(--primary-main-5);
    --popup-close-bg-hover: var(--background-page);
    --popup-close-border-hover: var(--primary-text-secondary-15);
    --popup-close-color: var(--primary-text-secondary);
    --popup-close-color-hover: var(--primary-main);
    --popup-close-size: 40px;
    --popup-header-border: 1px solid var(--primary-text-main-10);
    --popup-overlay-bg: var(--overlay-strong);
    --popup-overlay-blur: var(--bg-blur);
    --popup-surface-bg: var(--background-surface);
    --popup-surface-border: 1px solid var(--primary-text-secondary-20);
    --popup-surface-radius: var(--radius-xl);
    --popup-surface-shadow: var(--surface-shadow-elevated);
    --scroll-track: #E6DFF5;

    --font-family-base: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-base-product: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-base-shell: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-display: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-display-product: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-display-shell: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-10: 10px;
    --font-size-11: 11px;
    --font-size-12: 12px;
    --font-size-128: 128px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-26: 26px;
    --font-size-28: 28px;
    --font-size-30: 30px;
    --font-size-32: 32px;
    --font-size-38: 38px;
    --font-size-40: 40px;
    --font-size-48: 48px;
    --font-size-56: 56px;
    --font-size-64: 64px;
    --font-size-80: 80px;
    --font-size-9: 9px;

    --header-background: var(--background-surface);
    --header-border: var(--primary-text-secondary-20);
    --space-0: 0px;
    --space-1: 1px;
    --space-10: 10px;
    --space-100: 100px;
    --space-100p: 100%;
    --space-102: 102px;
    --space-11: 11px;
    --space-110: 110px;
    --space-112: 112px;
    --space-115: 115px;
    --space-12: 12px;
    --space-120: 120px;
    --space-12p: 12%;
    --space-13: 13px;
    --space-14: 14px;
    --space-140: 140px;
    --space-148: 148px;
    --space-15: 15px;
    --space-150: 150px;
    --space-16: 16px;
    --space-17: 17px;
    --space-18: 18px;
    --space-2: 2px;
    --space-2-5: 2.5px;
    --space-20: 20px;
    --space-22: 22px;
    --space-24: 24px;
    --space-240: 240px;
    --space-25: 25px;
    --space-26: 26px;
    --space-28: 28px;
    --space-3: 3px;
    --space-30: 30px;
    --space-300: 300px;
    --space-32: 32px;
    --space-34: 34px;
    --space-35: 35px;
    --space-36: 36px;
    --space-38: 38px;
    --space-4: 4px;
    --space-40: 40px;
    --space-42: 42px;
    --space-44: 44px;
    --space-48: 48px;
    --space-5: 5px;
    --space-50: 50px;
    --space-50p: 50%;
    --space-52: 52px;
    --space-56: 56px;
    --space-58: 58px;
    --space-6: 6px;
    --space-60: 60px;
    --space-62: 62px;
    --space-68: 68px;
    --space-6p: 6%;
    --space-7: 7px;
    --space-70: 70px;
    --space-8: 8px;
    --space-80: 80px;
    --space-9: 9px;
    --space-90: 90px;
    --space-95: 95px;
    --space-96: 96px;
    --space-98: 98px;
    --space-auto: auto;
    --space-factor-2: 2;
    --space-factor-3: 3;
    --space-n1: -1px;
    --space-n10: -10px;
    --space-n12: -12px;
    --space-n13: -13px;
    --space-n14: -14px;
    --space-n15: -15px;
    --space-n155: -155px;
    --space-n180: -180px;
    --space-n2: -2px;
    --space-n20: -20px;
    --space-n24: -24px;
    --space-n25: -25px;
    --space-n30: -30px;
    --space-n4: -4px;
    --space-n40: -40px;
    --space-n5: -5px;
    --space-n50: -50px;
    --space-n54: -54px;
    --space-n6: -6px;
    --space-n60: -60px;
    --space-n7: -7px;
    --space-n8: -8px;
    --space-n80: -80px;

    --radius-2xl: 50px;
    --radius-full: 999px;
    --radius-l: 20px;
    --radius-m: 15px;
    --radius-s: 10px;
    --radius-xl: 30px;
    --radius-xs: 5px;
    --radius-xxs: 2px;

    --duration-fast: 0.3s;
    --duration-icon-loop: 1.5s;
    --duration-instant: 0.15s;
    --duration-normal: 0.4s;
    --duration-slow: 0.6s;
    --duration-smooth: 0.5s;
    --duration-theme-switch: 0.18s;
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-bounce: 0.5s var(--ease-bounce);
    --transition-elastic: 0.6s var(--ease-elastic);
    --transition-fast: 0.3s var(--ease-in-out);
    --transition-instant: 0.15s var(--ease-in-out);
    --transition-normal: 0.4s var(--ease-in-out);
    --transition-slow: 0.6s var(--ease-smooth);
    --transition-smooth: 0.5s var(--ease-in-out);
    --transition-theme-switch: var(--duration-theme-switch) var(--ease-out);

    --account-burger-panel-gap: var(--space-20);
    --account-burger-panel-padding: var(--space-95) var(--space-20) var(--space-20);
    --account-header-padding-desktop: var(--space-20) var(--space-50);
    --account-header-padding-mobile: var(--space-12) var(--space-16);
    --account-header-padding-tablet: var(--space-16) var(--space-24);
    --account-main-top-offset: var(--space-20);
    --account-menu-item-gap: var(--space-10);
    --account-menu-item-padding: var(--space-12) var(--space-16);
    --account-page-padding-desktop: var(--space-110) var(--space-150);
    --account-page-padding-mobile: var(--space-70) var(--space-16) var(--space-40);
    --account-page-padding-tablet: var(--space-96) var(--space-32) var(--space-60);
    --account-skeleton-action-size: var(--space-36);
    --account-skeleton-badge-height: 45px;
    --account-skeleton-history-icon-size: var(--space-48);
    --account-skeleton-package-amount-height: var(--space-32);
    --account-skeleton-progress-height: var(--space-42);
    --account-skeleton-score-height: var(--space-40);
    --account-stat-badge-gap: var(--space-10);
    --account-stat-badge-gap-mobile: var(--space-6);
    --account-stat-badge-gap-tablet: var(--space-8);
    --account-stat-badge-padding: var(--space-20);
    --account-stat-badge-padding-mobile: var(--space-6) var(--space-10);
    --account-stat-badge-padding-tablet: var(--space-8) var(--space-14);
    --account-token-badge-gap: var(--space-5);
    --account-token-badge-padding: var(--space-10) var(--space-20);
    --account-token-badge-padding-mobile: var(--space-6) var(--space-10);
    --account-token-badge-padding-tablet: var(--space-8) var(--space-16);
    --account-tooltip-offset: calc(var(--space-100p) + var(--space-8));
    --account-tooltip-padding: var(--space-8) var(--space-12);
    --account-training-section-gap: var(--space-20);
    --account-training-section-gap-compact: var(--space-10);
    --admin-bottomnav-item-padding: var(--space-20) var(--space-2);
    --admin-bottomnav-menu-item-gap: var(--space-10);
    --admin-bottomnav-menu-item-padding: var(--space-10) var(--space-14);
    --admin-bottomnav-menu-padding: var(--space-6);
    --admin-card-section-gap: var(--space-12);
    --admin-card-section-padding: var(--space-14) var(--space-18);
    --admin-dashboard-grid-gap: var(--space-16);
    --admin-panel-list-padding: var(--space-6);
    --admin-search-bar-gap: var(--space-10);
    --admin-settings-grid-gap: var(--space-12);
    --admin-shell-padding: var(--space-28) var(--space-36);
    --admin-sidebar-header-padding: var(--space-20);
    --admin-sidebar-item-gap: var(--space-11);
    --admin-sidebar-item-padding: var(--space-10) var(--space-14);
    --admin-sidebar-logout-gap: var(--space-11);
    --admin-sidebar-logout-padding: var(--space-16) var(--space-24);
    --admin-sidebar-nav-padding: var(--space-10);
    --admin-tariff-grid-gap: var(--space-20);
    --admin-tariff-grid-padding: var(--space-16) var(--space-4) var(--space-4);
    --admin-tariff-mobile-gap: var(--space-12);
    --admin-tariff-mobile-padding-bottom: var(--space-14);
    --admin-tariff-rail-gap: var(--space-16);
    --admin-tariff-rail-padding: var(--space-16) var(--space-2) var(--space-10);
    --admin-task-card-padding: var(--space-16) var(--space-18);
    --admin-task-cards-gap: var(--space-14);
    --admin-topbar-gap: var(--space-12);
    --admin-topbar-padding: var(--space-0) var(--space-16);
    --admin-training-chip-gap: var(--space-6);
    --admin-training-chip-padding: var(--space-8) var(--space-14);
    --admin-training-chips-gap: var(--space-8);
    --admin-training-chips-mobile-gap: var(--space-8);
    --admin-training-chips-mobile-padding: var(--space-10);
    --admin-training-chips-padding: var(--space-12);
    --admin-two-panel-gap: var(--space-16);
    --admin-user-preview-padding: var(--space-20) var(--space-20) var(--space-14);
    --admin-user-preview-padding-mobile: var(--space-14) var(--space-16) var(--space-10);
    --admin-users-mobile-detail-actions-padding: var(--space-12) var(--space-16);
    --admin-users-mobile-detail-body-padding: var(--space-0) var(--space-16) var(--space-16);
    --admin-users-mobile-top-padding: var(--space-12) var(--space-16);
    --bg-blur: blur(12.5px);
    --border-focus: #A78BFA;
    --border-inset: inset 0 0 0 1px;
    --button-shadow-green: 0 4px 12px rgba(34, 197, 94, 0.2);
    --button-shadow-green-hover: 0 12px 32px rgba(34, 197, 94, 0.35);
    --button-shadow-orange: 0 4px 12px rgba(249, 115, 22, 0.2);
    --button-shadow-orange-hover: 0 12px 32px rgba(249, 115, 22, 0.35);
    --button-shadow-primary: 0 4px 12px rgba(124, 58, 237, 0.2);
    --button-shadow-primary-hover: 0 12px 32px rgba(124, 58, 237, 0.35);
    --cabinet-scrollbar-radius: var(--radius-full);
    --cabinet-scrollbar-size: var(--space-8);
    --cabinet-scrollbar-thumb: linear-gradient(180deg, var(--primary-main-40) 0%, var(--pink-main-30) 52%, var(--orange-main-30) 100%);
    --cabinet-scrollbar-thumb-color: var(--primary-main-40);
    --cabinet-scrollbar-thumb-hover: linear-gradient(180deg, var(--primary-main-50) 0%, var(--pink-main-40) 52%, var(--orange-main-40) 100%);
    --cabinet-scrollbar-thumb-hover-color: var(--primary-main-50);
    --cabinet-scrollbar-thumb-shadow: inset 0 0 0 1px var(--white-20), 0 10px 20px var(--primary-main-12);
    --cabinet-scrollbar-track: linear-gradient(180deg, var(--white-70) 0%, var(--scroll-track) 100%);
    --cabinet-scrollbar-track-color: var(--primary-main-5);
    --checkbox-border-width: 1px;
    --checkbox-icon-height: 10px;
    --checkbox-icon-stroke: 2.25;
    --checkbox-icon-width: 12px;
    --checkbox-mark-delay: 0.04s;
    --checkbox-mark-duration: var(--duration-instant);
    --checkbox-path-length: 16;
    --checkbox-size: 20px;
    --float-duration: 6s;
    --logo-dynamic-color: #1E1B4B;
    --neutral-stroke: #CCC;
    --page-shell-gradient: radial-gradient(ellipse 800px 800px at 0% 0%, var(--primary-main-20) 0%, var(--primary-main-0) 70%), radial-gradient(ellipse 600px 600px at 100% 0%, var(--orange-main-20) 0%, var(--orange-main-0) 70%), radial-gradient(ellipse 800px 700px at 20% 100%, var(--blue-main-20) 0%, var(--blue-main-0) 70%), radial-gradient(ellipse 700px 500px at 50% 100%, var(--green-main-20) 0%, var(--green-main-0) 70%), radial-gradient(ellipse 500px 600px at 80% 100%, var(--pink-main-20) 0%, var(--pink-main-0) 70%);
    --parent-child-item-gap: var(--space-14);
    --parent-child-item-padding: var(--space-16);
    --parent-child-list-gap: var(--space-10);
    --parent-child-list-gap-short: var(--space-6);
    --parent-content-gap: var(--space-20);
    --parent-content-gap-compact: var(--space-14);
    --parent-content-gap-mobile: var(--space-12);
    --parent-content-gap-short: var(--space-9);
    --parent-header-padding-compact: var(--space-12) var(--space-28);
    --parent-header-padding-desktop: var(--space-20) var(--space-50);
    --parent-header-padding-mobile: var(--space-12) var(--space-16);
    --parent-header-padding-tablet: var(--space-16) var(--space-24);
    --parent-main-gap: var(--space-24);
    --parent-main-gap-compact: var(--space-14);
    --parent-main-gap-mobile: var(--space-12);
    --parent-menu-item-gap: var(--space-10);
    --parent-menu-item-padding: var(--space-12) var(--space-16);
    --parent-page-padding-compact: var(--space-98) var(--space-40) var(--space-14);
    --parent-page-padding-desktop: var(--space-112) var(--space-80) var(--space-20);
    --parent-page-padding-mobile: var(--space-96) var(--space-16) var(--space-16);
    --parent-page-padding-mobile-wide: var(--space-100) var(--space-16) var(--space-20);
    --parent-page-padding-tablet: var(--space-102) var(--space-24) var(--space-16);
    --parent-sidebar-gap: var(--space-12);
    --parent-sidebar-gap-compact: var(--space-8);
    --parent-sidebar-padding: var(--space-16);
    --parent-sidebar-padding-mobile: var(--space-8);
    --parent-sidebar-padding-short: var(--space-10);
    --parent-token-badge-gap: var(--space-6);
    --parent-token-badge-padding: var(--space-8) var(--space-14);
    --parent-token-badge-padding-mobile: var(--space-8) var(--space-12);
    --parent-token-badge-padding-tight: var(--space-8) var(--space-10);
    --parent-tooltip-offset: calc(var(--space-100p) + var(--space-8));
    --parent-tooltip-padding: var(--space-6) var(--space-10);
    --right-shift-3: translateX(3px);
    --ripple-bg: rgba(255, 255, 255, 0.2);
    --ripple-bg-primary: rgba(124, 58, 237, 0.15);
    --ripple-duration: var(--duration-normal);
    --ripple-size: 1200px;
    --rotate-5: rotate(5deg);
    --safe-area-bottom: env(safe-area-inset-bottom);
    --safe-area-bottom-zero: env(safe-area-inset-bottom, 0px);
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-top-zero: env(safe-area-inset-top, 0px);
    --scale-decrease: scale(0.98);
    --scale-increase: scale(1.01);
    --secondary-faint-glow: 0 15px 40px rgba(116, 107, 133, 0.1);
    --secondary-glow: 0 15px 40px rgba(116, 107, 133, 0.1);
    --shadow: 0 6px 12px rgba(0, 0, 0, 0.02), 0 22px 22px rgba(0, 0, 0, 0.02), 0 50px 30px rgba(0, 0, 0, 0.01), 0 89px 35px rgba(0, 0, 0, 0.00), 0 138px 39px rgba(0, 0, 0, 0.00);
    --skeleton-base: var(--primary-text-main-5);
    --skeleton-button-height: var(--space-35);
    --skeleton-chip-height: 44px;
    --skeleton-highlight: var(--primary-text-main-10);
    --skeleton-inline-chip-height: var(--space-34);
    --skeleton-input-height: 36px;
    --skeleton-line-height: 14px;
    --skeleton-line-height-lg: 18px;
    --skeleton-metric-height: 100px;
    --skeleton-panel-item-height: 40px;
    --skeleton-shimmer-size: 400px;
    --skeleton-tariff-card-min-height: 470px;
    --skeleton-task-card-height: 114px;
    --tooltip-bg: var(--background-dark-surface);
    --trainer-hint-background: #F8F6FC;
    --training-actions-dock-padding: var(--space-10) var(--space-10) calc(var(--space-10) + var(--safe-area-bottom));
    --training-actions-gap: var(--space-12);
    --training-actions-gap-mobile: var(--space-10);
    --training-actions-safe-bottom-offset: calc(var(--space-70) + var(--safe-area-bottom));
    --training-demo-body-padding-desktop: var(--space-120) var(--space-0) var(--space-0);
    --training-demo-body-padding-mobile: var(--space-80) var(--space-0) var(--space-0);
    --training-demo-body-padding-tablet: var(--space-100) var(--space-0) var(--space-0);
    --training-demo-header-offset-mobile: var(--space-n20);
    --training-demo-header-offset-tablet: var(--space-n24);
    --training-demo-page-padding-desktop: var(--space-80) var(--space-150);
    --training-demo-page-padding-mobile: var(--space-24) var(--space-16) calc(var(--space-80) + var(--safe-area-bottom));
    --training-demo-page-padding-tablet: var(--space-32) var(--space-28) calc(var(--space-80) + var(--safe-area-bottom));
    --training-demo-page-screen-offset: var(--space-30);
    --training-demo-page-screen-offset-tablet: var(--space-70);
    --training-demo-stage-offset: var(--space-n80);
    --training-duration-fast: 0.15s;
    --training-duration-instant: 0.1s;
    --training-duration-normal: 0.2s;
    --training-duration-slow: 0.3s;
    --training-duration-smooth: 0.25s;
    --training-duration-theme-switch: 0.14s;
    --training-header-actions-gap: var(--space-12);
    --training-header-actions-gap-tablet: var(--space-10);
    --training-header-height-desktop: var(--space-80);
    --training-header-height-mobile: var(--training-layout-top-offset);
    --training-header-height-tablet: 72px;
    --training-header-logo-gap: var(--space-12);
    --training-header-logo-gap-tablet: var(--space-10);
    --training-header-padding-desktop: var(--space-16) var(--space-50);
    --training-header-padding-tablet: var(--space-14) var(--space-28);
    --training-layout-top-offset: var(--space-68);
    --training-page-gap-desktop: var(--space-56);
    --training-page-gap-tablet: var(--space-28);
    --training-page-gap-touch: var(--space-24);
    --training-page-gap-wide-tablet: var(--space-32);
    --training-page-padding-desktop: var(--space-80) var(--space-150);
    --training-page-padding-mobile: var(--space-24) var(--space-16) calc(var(--space-24) + var(--safe-area-bottom));
    --training-page-padding-tablet: var(--space-32) var(--space-28) calc(var(--space-80) + var(--safe-area-bottom));
    --training-page-padding-touch: var(--space-24) var(--space-28) calc(var(--space-24) + var(--safe-area-bottom));
    --training-page-padding-wide-tablet: var(--space-48) var(--space-120) var(--space-56);
    --training-screen-gap-compact: var(--space-20);
    --training-screen-gap-desktop: var(--space-24);
    --training-stage-gap-desktop: var(--space-56);
    --training-stage-gap-touch: var(--space-24);
    --training-stage-gap-wide-tablet: var(--space-32);
    --training-theme-toggle-gap: var(--space-10);
    --training-theme-toggle-padding: var(--space-6) var(--space-6) var(--space-6) var(--space-12);
    --training-transition-fast: var(--training-duration-fast) var(--ease-out);
    --training-transition-instant: var(--training-duration-instant) var(--ease-out);
    --training-transition-normal: var(--training-duration-normal) var(--ease-out);
    --training-transition-slow: var(--training-duration-slow) var(--ease-out);
    --training-transition-smooth: var(--training-duration-smooth) var(--ease-out);
    --training-transition-theme-switch: var(--training-duration-theme-switch) var(--ease-out);
    --trans-base: var(--transition-fast);
    --trans-bounce: var(--transition-bounce);
    --trans-medium: var(--transition-normal);
    --trans-slow: var(--transition-smooth);
    --trans-smooth: var(--transition-smooth);
    --up-shift-2: translateY(-2px);
    --up-shift-3: translateY(-3px);
    --users-table-row-min-height: 38.5px;
    --yellow-background: #FFFBEF;
    --yellow-background-surface: #FFFFFC;
    --yellow-faint-glow: 0 15px 40px rgba(234, 179, 8, 0.1);
    --yellow-glow: 0 15px 40px rgba(234, 179, 8, 0.4);
    --yellow-main: #EAB308;
    --yellow-main-10: rgba(234, 179, 8, 0.1);
    --yellow-main-15: rgba(234, 179, 8, 0.15);
    --yellow-main-25: rgba(234, 179, 8, 0.25);
    --yellow-main-5: rgba(234, 179, 8, 0.05);
    --yellow-main-50: rgba(234, 179, 8, 0.5);
    --yellow-main-hover: #CE9D07;
}

:root[data-theme="dark"] {
    --blue-background: #111825;
    --blue-background-surface: #0F1520;
    --blue-text-main: var(--primary-text-main);
    --blue-text-main-10: var(--primary-text-main-10);
    --blue-text-main-40: var(--primary-text-main-40);
    --blue-text-main-5: var(--primary-text-main-5);
    --blue-text-main-50: var(--primary-text-main-50);
    --blue-text-main-70: var(--primary-text-main-70);
    --blue-text-main-80: var(--primary-text-main-80);
    --blue-text-muted: var(--primary-text-muted);
    --blue-text-secondary: var(--primary-text-secondary);
    --blue-text-secondary-15: var(--primary-text-secondary-15);
    --blue-text-secondary-40: var(--primary-text-secondary-40);
    --green-background: #101813;
    --green-background-surface: #0E1511;
    --green-text-main: var(--primary-text-main);
    --green-text-main-10: var(--primary-text-main-10);
    --green-text-main-40: var(--primary-text-main-40);
    --green-text-main-5: var(--primary-text-main-5);
    --green-text-main-50: var(--primary-text-main-50);
    --green-text-main-70: var(--primary-text-main-70);
    --green-text-main-80: var(--primary-text-main-80);
    --green-text-muted: var(--primary-text-muted);
    --green-text-secondary: var(--primary-text-secondary);
    --green-text-secondary-10: var(--primary-text-secondary-10);
    --green-text-secondary-15: var(--primary-text-secondary-15);
    --green-text-secondary-20: var(--primary-text-secondary-20);
    --green-text-secondary-30: var(--primary-text-secondary-30);
    --orange-background: #1E1510;
    --orange-background-surface: #18120E;
    --orange-gradient: var(--orange-main);
    --orange-gradient-button: var(--orange-main);
    --orange-gradient-button-hover: var(--orange-main-hover);
    --orange-text-main: var(--primary-text-main);
    --orange-text-main-10: var(--primary-text-main-10);
    --orange-text-main-40: var(--primary-text-main-40);
    --orange-text-main-5: var(--primary-text-main-5);
    --orange-text-main-50: var(--primary-text-main-50);
    --orange-text-main-70: var(--primary-text-main-70);
    --orange-text-main-80: var(--primary-text-main-80);
    --orange-text-muted: var(--primary-text-muted);
    --orange-text-secondary: var(--primary-text-secondary);
    --orange-text-secondary-10: var(--primary-text-secondary-10);
    --orange-text-secondary-15: var(--primary-text-secondary-15);
    --orange-text-secondary-20: var(--primary-text-secondary-20);
    --orange-text-secondary-30: var(--primary-text-secondary-30);
    --pink-background: #1C1118;
    --pink-background-surface: #161016;
    --pink-text-main: var(--primary-text-main);
    --pink-text-main-10: var(--primary-text-main-10);
    --pink-text-main-40: var(--primary-text-main-40);
    --pink-text-main-5: var(--primary-text-main-5);
    --pink-text-main-50: var(--primary-text-main-50);
    --pink-text-main-70: var(--primary-text-main-70);
    --pink-text-main-80: var(--primary-text-main-80);
    --pink-text-muted: var(--primary-text-muted);
    --pink-text-secondary: var(--primary-text-secondary);
    --primary-gradient: var(--primary-main);
    --primary-text-main: rgba(255, 255, 255, 0.98);
    --primary-text-main-10: rgba(255, 255, 255, 0.12);
    --primary-text-main-15: rgba(255, 255, 255, 0.18);
    --primary-text-main-40: rgba(255, 255, 255, 0.52);
    --primary-text-main-5: rgba(255, 255, 255, 0.07);
    --primary-text-main-50: rgba(255, 255, 255, 0.6);
    --primary-text-main-70: rgba(255, 255, 255, 0.74);
    --primary-text-main-80: rgba(255, 255, 255, 0.86);
    --primary-text-main-90: rgba(255, 255, 255, 0.94);
    --primary-text-muted: rgba(255, 255, 255, 0.55);
    --primary-text-secondary: rgba(255, 255, 255, 0.7);
    --primary-text-secondary-10: rgba(255, 255, 255, 0.1);
    --primary-text-secondary-15: rgba(255, 255, 255, 0.15);
    --primary-text-secondary-20: rgba(255, 255, 255, 0.2);
    --primary-text-secondary-30: rgba(255, 255, 255, 0.3);
    --primary-text-secondary-40: rgba(255, 255, 255, 0.4);
    --primary-text-secondary-5: rgba(255, 255, 255, 0.05);
    --red-background: #1D1316;
    --red-background-surface: #181114;
    --red-text-main: var(--primary-text-main);
    --red-text-main-10: var(--primary-text-main-10);
    --red-text-muted: var(--primary-text-muted);
    --red-text-secondary: var(--primary-text-secondary);
    --red-text-secondary-15: var(--primary-text-secondary-15);
    --red-text-secondary-20: var(--primary-text-secondary-20);
    --surface-border-soft: var(--white-08);
    --surface-border-strong: var(--white-12);
    --surface-elevated: var(--background-surface);
    --surface-elevated-strong: var(--background-dark-tabs);
    --surface-shadow-elevated: 0 24px 56px var(--black-50);
    --surface-shadow-soft: 0 16px 36px var(--black-30);

    --yellow-text-main: var(--primary-text-main);
    --yellow-text-main-10: var(--primary-text-main-10);
    --yellow-text-main-40: var(--primary-text-main-40);
    --yellow-text-main-5: var(--primary-text-main-5);
    --yellow-text-main-50: var(--primary-text-main-50);
    --yellow-text-main-70: var(--primary-text-main-70);
    --yellow-text-main-80: var(--primary-text-main-80);
    --yellow-text-muted: var(--primary-text-muted);
    --yellow-text-secondary: var(--primary-text-secondary);

    --background-input: rgba(255, 255, 255, 0.04);
    --background-input-stroke: rgba(255, 255, 255, 0.1);
    --background-page: var(--background-dark);
    --background-page-10: rgba(10, 9, 17, 0.1);
    --background-page-30: rgba(10, 9, 17, 0.3);
    --background-page-5: rgba(10, 9, 17, 0.05);
    --background-page-90: var(--background-dark-95);
    --background-surface: var(--background-dark-surface);
    --background-surface-25: rgba(24, 22, 33, 0.25);
    --background-surface-50: rgba(24, 22, 33, 0.5);
    --background-surface-70: rgba(24, 22, 33, 0.7);
    --background-surface-90: rgba(24, 22, 33, 0.9);
    --background-surface-95: rgba(24, 22, 33, 0.95);
    --control-color-scheme: dark;
    --overlay-soft: rgba(10, 9, 17, 0.56);
    --overlay-strong: rgba(10, 9, 17, 0.78);
    --plans-gradient-end: var(--background-dark-tabs);
    --plans-gradient-start: var(--background-dark-tabs);
    --popup-close-bg: var(--primary-main-10);
    --popup-close-bg-hover: var(--background-dark-surface);
    --popup-close-border-hover: var(--surface-border-strong);
    --popup-close-color: var(--primary-text-secondary);
    --popup-close-color-hover: var(--text-inverted);
    --popup-header-border: 1px solid var(--surface-border-soft);
    --popup-overlay-bg: var(--overlay-strong);
    --popup-surface-bg: var(--surface-elevated-strong);
    --popup-surface-border: 1px solid var(--surface-border-soft);
    --popup-surface-shadow: var(--surface-shadow-elevated);

    --header-background: var(--background-page);
    --header-border: var(--white-10);

    --cabinet-scrollbar-thumb: linear-gradient(180deg, var(--primary-main-alt) 0%, var(--pink-main-50) 52%, var(--orange-main-50) 100%);
    --cabinet-scrollbar-thumb-color: var(--primary-main-alt);
    --cabinet-scrollbar-thumb-hover: linear-gradient(180deg, var(--primary-main) 0%, var(--pink-main) 52%, var(--orange-main) 100%);
    --cabinet-scrollbar-thumb-hover-color: var(--primary-main);
    --cabinet-scrollbar-thumb-shadow: inset 0 0 0 1px var(--white-15), 0 10px 24px var(--black-40);
    --cabinet-scrollbar-track: linear-gradient(180deg, var(--white-05) 0%, var(--white-08) 100%);
    --cabinet-scrollbar-track-color: var(--white-08);
    --logo-dynamic-color: rgba(255, 255, 255, 0.95);
    --page-shell-gradient: none;
    --tooltip-bg: var(--background-surface);
    --trainer-hint-background: var(--background-dark-tabs);
    --yellow-background: #19160D;
    --yellow-background-surface: #15120A;
}

* {
    font-family: var(--font-family-base);
}

body[data-font-profile="product"] {
    --font-family-base: var(--font-family-base-product);
    --font-family-display: var(--font-family-display-product);
}

header,
footer {
    --font-family-base: var(--font-family-base-shell);
    --font-family-display: var(--font-family-display-shell);
}

.score {
    font-family: var(--font-family-display);
    font-size: var(--font-size-128);
    font-weight: 700;
    line-height: 120%;
}

.h1 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-64);
    font-weight: 700;
    line-height: 120%;
}

.h1-extrabold {
    font-family: var(--font-family-display);
    font-size: var(--font-size-64);
    font-weight: 800;
    line-height: 120%;
}

.h2 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-48);
    font-weight: 700;
    line-height: 125%;
}

.h2-medium {
    font-family: var(--font-family-display);
    font-size: var(--font-size-48);
    font-weight: 500;
    line-height: 125%;
}

.h3 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-32);
    font-weight: 700;
    line-height: 130%;
}

.h3-regular {
    font-family: var(--font-family-display);
    font-size: var(--font-size-32);
    font-weight: 400;
    line-height: 130%;
}

.h4 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-26);
    font-weight: 700;
    line-height: 130%;
}

.h4-regular {
    font-family: var(--font-family-display);
    font-size: var(--font-size-26);
    font-weight: 400;
    line-height: 130%;
}

.body-l {
    font-family: var(--font-family-base);
    font-size: var(--font-size-20);
    font-weight: 400;
    line-height: normal;
}

.body-l-medium {
    font-family: var(--font-family-base);
    font-size: var(--font-size-20);
    font-weight: 500;
    line-height: 150%;
}

.body-l-accent {
    font-family: var(--font-family-display);
    font-size: var(--font-size-20);
    font-weight: 700;
    line-height: 150%;
}

.body-m {
    font-family: var(--font-family-base);
    font-size: var(--font-size-18);
    font-weight: 400;
    line-height: 150%;
}

.body-m-semibold {
    font-family: var(--font-family-base);
    font-size: var(--font-size-18);
    font-weight: 600;
    line-height: 150%;
}

.body-s {
    font-family: var(--font-family-base);
    font-size: var(--font-size-16);
    font-weight: 400;
    line-height: 140%;
}

.body-s-semibold {
    font-family: var(--font-family-base);
    font-size: var(--font-size-16);
    font-weight: 600;
    line-height: 140%;
}

button,
a.secondary,
a.primary {
    text-align: center;
}

.button-primary {
    font-family: var(--font-family-display);
    font-size: var(--font-size-16);
    font-weight: 700;
    line-height: 140%;
}

.button-primary-small {
    font-family: var(--font-family-display);
    font-size: var(--font-size-14);
    font-weight: 700;
    line-height: 140%;
}

.button-secondary {
    font-family: var(--font-family-base);
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: 140%;
    border: 1px solid var(--primary-text-secondary-30);
}

.button-secondary a,
a.button-secondary {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: var(--secondary-button-text-color, var(--primary-text-secondary));
}

.button-secondary-small {
    font-family: var(--font-family-base);
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 140%;
}

.caption-page {
    font-family: var(--font-family-display);
    font-size: var(--font-size-14);
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.1em;
}

.agreement-text {
    font-family: var(--font-family-base);
    font-size: var(--font-size-12);
    font-weight: 400;
    line-height: 120%;
}

.caption-bold {
    font-family: var(--font-family-display);
    font-size: var(--font-size-14);
    font-weight: 700;
    line-height: 150%;
}

.caption {
    font-family: var(--font-family-base);
    font-size: var(--font-size-14);
    font-weight: 400;
    line-height: 150%;
}

.review {
    font-family: var(--font-family-base);
    font-size: var(--font-size-14);
    font-weight: 400;
}

.small-caption {
    font-family: var(--font-family-base);
    font-size: var(--font-size-10);
    font-weight: 400;
    line-height: 130%;
}

.score.tablet-font {
    font-size: var(--font-size-80);
    line-height: 110%;
}

.h1.tablet-font {
    font-size: var(--font-size-38);
}

.h1-extrabold.tablet-font {
    font-size: var(--font-size-40);
}

.h2.tablet-font {
    font-size: var(--font-size-32);
}

.h2-medium.tablet-font {
    font-size: var(--font-size-32);
}

.h3.tablet-font {
    font-size: var(--font-size-24);
}

.h3-regular.tablet-font {
    font-size: var(--font-size-24);
}

.h4.tablet-font {
    font-size: var(--font-size-20);
    line-height: 140%;
}

.h4-regular.tablet-font {
    font-size: var(--font-size-20);
    line-height: 140%;
}

.body-l.tablet-font {
    font-size: var(--font-size-18);
    line-height: 135%;
}

.body-l-medium.tablet-font {
    font-size: var(--font-size-18);
}

.body-l-accent.tablet-font {
    font-size: var(--font-size-18);
}

.body-m.tablet-font {
    font-size: var(--font-size-16);
}

.body-m-semibold.tablet-font {
    font-size: var(--font-size-16);
}

.body-s.tablet-font {
    font-size: var(--font-size-14);
}

.body-s-semibold.tablet-font {
    font-size: var(--font-size-14);
}

.button-primary.tablet-font {
    font-size: var(--font-size-16);
}

.button-primary-small.tablet-font {
    font-size: var(--font-size-14);
}

.button-secondary.tablet-font {
    font-size: var(--font-size-16);
}

.button-secondary-small.tablet-font {
    font-size: var(--font-size-14);
}

.caption-page.tablet-font {
    font-size: var(--font-size-14);
}

.caption-bold.tablet-font {
    font-size: var(--font-size-14);
}

.caption.tablet-font {
    font-size: var(--font-size-14);
}

.review.tablet-font {
    font-size: var(--font-size-14);
    line-height: normal;
}

.small-caption.tablet-font {
    font-size: var(--font-size-12);
}

.score.mobile-font {
    font-size: var(--font-size-56);
}

.h1.mobile-font {
    font-size: var(--font-size-30);
}

.h1-extrabold.mobile-font {
    font-size: var(--font-size-30);
}

.h2.mobile-font {
    font-size: var(--font-size-26);
}

.h2-medium.mobile-font {
    font-size: var(--font-size-26);
}

.h3.mobile-font {
    font-size: var(--font-size-22);
}

.h3-regular.mobile-font {
    font-size: var(--font-size-22);
}

.h4.mobile-font {
    font-size: var(--font-size-18);
    line-height: 135%;
}

.h4-regular.mobile-font {
    font-size: var(--font-size-18);
    line-height: 135%;
}

.body-l.mobile-font {
    font-size: var(--font-size-16);
    line-height: 150%;
}

.body-l-medium.mobile-font {
    font-size: var(--font-size-16);
}

.body-l-accent.mobile-font {
    font-size: var(--font-size-16);
}

.body-m.mobile-font {
    font-size: var(--font-size-14);
}

.body-m-semibold.mobile-font {
    font-size: var(--font-size-14);
}

.body-s.mobile-font {
    font-size: var(--font-size-13);
    line-height: normal;
}

.body-s-semibold.mobile-font {
    font-size: var(--font-size-13);
}

.button-primary.mobile-font {
    font-size: var(--font-size-14);
    line-height: normal;
}

.button-primary-small.mobile-font {
    font-size: var(--font-size-13);
    line-height: normal;
}

.button-secondary.mobile-font {
    font-size: var(--font-size-14);
    line-height: normal;
}

.button-secondary-small.mobile-font {
    font-size: var(--font-size-13);
    line-height: normal;
}

.caption-page.mobile-font {
    font-size: var(--font-size-12);
    line-height: 130%;
}

.caption-bold.mobile-font {
    font-size: var(--font-size-12);
    line-height: 130%;
}

.caption.mobile-font {
    font-size: var(--font-size-12);
    line-height: 130%;
}

.review.mobile-font {
    font-size: var(--font-size-12);
    line-height: normal;
}

.small-caption.mobile-font {
    font-size: var(--font-size-10);
    line-height: 120%;
}

button.secondary.s {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    height: 42px;
    color: var(--secondary-button-text-color, var(--primary-text-secondary));
    border: 1px solid var(--primary-text-secondary-30);
    border-radius: var(--radius-m);
}

button.secondary.m {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    height: 52px;
    color: var(--secondary-button-text-color, var(--primary-text-secondary));
    border-radius: var(--radius-m);
}

a.secondary.m {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    height: 52px;
    color: var(--secondary-button-text-color, var(--primary-text-secondary));
    border-radius: var(--radius-m);
}

.secondary.l {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    height: 68px;
    color: var(--secondary-button-text-color, var(--primary-text-secondary));
    border-radius: var(--radius-m);
}

.secondary.w {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    height: 32px;
    color: var(--secondary-button-text-color, var(--primary-text-secondary));
    border-radius: var(--radius-m);
}

.primary.s {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 42px;
    color: var(--text-inverted);
    background: var(--primary-main);
    border-radius: var(--radius-m);
}

.primary.m {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    height: 52px;
    color: var(--text-inverted);
    background: var(--primary-main);
    border-radius: var(--radius-m);
}

.primary.m.blue {
    background: var(--blue-main);
}

.primary.l {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 0px 30px;
    height: 68px;
    color: var(--text-inverted);
    background: var(--primary-main);
    border-radius: var(--radius-m);
}

@media (max-width: 480px) {
    :root {
        --duration-fast: 0.15s;
        --duration-instant: 0.1s;
        --duration-normal: 0.2s;
        --duration-slow: 0.3s;
        --duration-smooth: 0.25s;
        --duration-theme-switch: 0.18s;
        --ease-bounce: var(--ease-out);
        --ease-elastic: var(--ease-out);
        --transition-bounce: 0.25s var(--ease-out);
        --transition-elastic: 0.3s var(--ease-out);
        --transition-fast: 0.15s var(--ease-out);
        --transition-instant: 0.1s var(--ease-out);
        --transition-normal: 0.2s var(--ease-out);
        --transition-slow: 0.3s var(--ease-out);
        --transition-smooth: 0.25s var(--ease-out);
        --transition-theme-switch: var(--duration-theme-switch) var(--ease-out);

        --float-duration: 4s;
        --trans-base: var(--transition-fast);
        --trans-bounce: var(--transition-bounce);
        --trans-medium: var(--transition-normal);
        --trans-slow: var(--transition-smooth);
        --trans-smooth: var(--transition-smooth);
    }
}

.light-more {
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 30px;
    height: 30px;
    color: var(--primary-main);
    border-radius: var(--radius-full);
}

.light-more.active {
    background: var(--primary-main-10);
}

.dark-more {
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 30px;
    height: 30px;
}

button.dark-more.active {
    background: var(--background-page-10);
}