.hero-header{position:relative;width:100%;min-height:var(--hero-height);background:var(--gradient-primary);border-radius:0 0 var(--radius-2xl) var(--radius-2xl);overflow:hidden;margin-bottom:var(--space-400);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-8)}.hero-header.has-image{background-size:cover;background-position:center;background-repeat:no-repeat}.hero-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--hero-overlay);z-index:1}.hero-header:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(90deg,transparent,transparent 50px,rgba(255,255,255,.03) 50px,rgba(255,255,255,.03) 51px);z-index:2;pointer-events:none}.hero-content{position:relative;z-index:3;text-align:center;padding:var(--space-400) var(--space-300);max-width:800px;color:var(--color-white)}.hero-title{font-size:var(--text-4xl);font-weight:var(--weight-extrabold);color:var(--color-white);margin:0 0 var(--space-150) 0;text-shadow:0 2px 8px rgba(0,0,0,.3);letter-spacing:var(--letter-spacing-tight)}.hero-subtitle{font-size:var(--text-lg);color:#fffffff2;margin:0;font-weight:var(--weight-regular);text-shadow:0 1px 4px rgba(0,0,0,.2);line-height:var(--line-height-relaxed)}.hero-icon{width:64px;height:64px;margin:0 auto var(--space-200);display:flex;align-items:center;justify-content:center;background:var(--gradient-glass);border-radius:var(--radius-full);border:2px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-icon svg,.hero-icon img{width:36px;height:36px;color:var(--color-white);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.premium-card{background:var(--card-background);border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:var(--space-300);box-shadow:var(--shadow-card);transition:all var(--transition-normal);position:relative;overflow:hidden}.premium-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--transition-normal)}.premium-card:hover{transform:var(--card-hover-transform);box-shadow:var(--card-hover-shadow);border-color:var(--color-primary-light)}.premium-card:hover:before{transform:scaleX(1)}.premium-card--accent{border-left:4px solid var(--color-action)}.premium-card--success{border-left:4px solid var(--color-success)}.premium-card--warning{border-left:4px solid var(--color-warning)}.premium-card--gradient{background:var(--gradient-card-subtle);border:1px solid transparent}.glass-card{background:var(--glass-background);backdrop-filter:var(--backdrop-blur-md);-webkit-backdrop-filter:var(--backdrop-blur-md);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--glass-shadow);padding:var(--space-300);transition:all var(--transition-normal)}.glass-card:hover{background:#fffffff2;box-shadow:var(--shadow-8)}.stat-card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-300);box-shadow:var(--shadow-card);border:1px solid var(--color-gray-200);transition:all var(--transition-normal);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;right:0;width:100px;height:100px;background:var(--gradient-glass);border-radius:0 0 0 100%;opacity:.5;transition:opacity var(--transition-normal)}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-8);border-color:var(--color-primary)}.stat-card:hover:before{opacity:.8}.stat-card-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-200);position:relative;z-index:1}.stat-card-icon--primary{background:var(--gradient-primary);color:var(--color-white);box-shadow:var(--shadow-primary-sm)}.stat-card-icon--success{background:var(--gradient-success);color:var(--color-white);box-shadow:var(--shadow-success)}.stat-card-icon--warning{background:linear-gradient(135deg,var(--color-warning) 0%,var(--color-warning-dark) 100%);color:var(--color-gray-900);box-shadow:var(--shadow-warning)}.stat-card-icon--accent{background:var(--gradient-champion);color:var(--color-white);box-shadow:var(--shadow-action)}.stat-card-value{font-size:var(--text-3xl);font-weight:var(--weight-extrabold);color:var(--color-text-primary);margin:var(--space-100) 0 var(--space-050);line-height:var(--line-height-tight)}.stat-card-label{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.stat-card-trend{display:inline-flex;align-items:center;gap:var(--space-050);font-size:var(--text-xs);font-weight:var(--weight-semibold);margin-top:var(--space-100);padding:var(--space-050) var(--space-100);border-radius:var(--radius-md)}.stat-card-trend--up{background:var(--color-success-bg);color:var(--color-success-dark)}.stat-card-trend--down{background:var(--color-error-bg);color:var(--color-error-dark)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-300);padding-bottom:var(--space-200);border-bottom:2px solid var(--color-gray-200)}.section-title{font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--color-text-primary);margin:0;display:flex;align-items:center;gap:var(--space-150)}.section-title:before{content:"";width:4px;height:24px;background:var(--gradient-primary);border-radius:var(--radius-sm)}.section-subtitle{font-size:var(--text-sm);color:var(--color-text-secondary);margin:var(--space-050) 0 0;font-weight:var(--weight-regular)}.btn-premium{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-100);padding:var(--space-150) var(--space-300);font-size:var(--text-base);font-weight:var(--weight-semibold);border-radius:var(--radius-lg);border:none;cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden;min-height:var(--touch-target);text-decoration:none}.btn-premium:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-premium:hover:before{width:300px;height:300px}.btn-premium--primary{background:var(--gradient-primary);color:var(--color-white);box-shadow:var(--shadow-primary)}.btn-premium--primary:hover{box-shadow:var(--shadow-primary-lg);transform:translateY(-2px)}.btn-premium--accent{background:var(--gradient-champion);color:var(--color-white);box-shadow:var(--shadow-action)}.btn-premium--accent:hover{box-shadow:var(--shadow-action-lg);transform:translateY(-2px)}.btn-premium--ghost{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary);box-shadow:none}.btn-premium--ghost:hover{background:var(--color-primary);color:var(--color-white)}.premium-badge{display:inline-flex;align-items:center;gap:var(--space-050);padding:var(--space-050) var(--space-150);font-size:var(--text-xs);font-weight:var(--weight-semibold);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.premium-badge--primary{background:var(--color-primary-alpha-10);color:var(--color-primary);border:1px solid var(--color-primary-alpha-20)}.premium-badge--success{background:var(--color-success-bg);color:var(--color-success-dark);border:1px solid var(--color-success-alpha-10)}.premium-badge--warning{background:var(--color-warning-bg);color:var(--color-warning-dark);border:1px solid var(--color-warning-alpha-10)}.premium-badge--accent{background:var(--color-crimson-alpha-10);color:var(--color-action);border:1px solid var(--color-crimson-alpha-20)}.empty-state{text-align:center;padding:var(--space-600) var(--space-300);color:var(--color-text-secondary)}.empty-state-icon{width:120px;height:120px;margin:0 auto var(--space-300);opacity:.6;filter:grayscale(20%)}.empty-state-title{font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--color-text-primary);margin:0 0 var(--space-150)}.empty-state-message{font-size:var(--text-base);color:var(--color-text-secondary);margin:0 0 var(--space-300);line-height:var(--line-height-relaxed)}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.animate-slide-up{animation:var(--animation-slide-up)}.animate-fade-in{animation:var(--animation-fade-in)}.animate-scale-in{animation:var(--animation-scale-in)}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.stagger-children>*{animation:slideUp .4s cubic-bezier(.4,0,.2,1) backwards}.stagger-children>*:nth-child(1){animation-delay:.05s}.stagger-children>*:nth-child(2){animation-delay:.1s}.stagger-children>*:nth-child(3){animation-delay:.15s}.stagger-children>*:nth-child(4){animation-delay:.2s}.stagger-children>*:nth-child(5){animation-delay:.25s}.stagger-children>*:nth-child(6){animation-delay:.3s}@media (max-width: 768px){.hero-header{min-height:var(--hero-height-mobile);border-radius:0 0 var(--radius-xl) var(--radius-xl)}.hero-title{font-size:var(--text-3xl)}.hero-subtitle{font-size:var(--text-base)}.hero-icon{width:48px;height:48px;margin-bottom:var(--space-150)}.hero-icon svg,.hero-icon img{width:28px;height:28px}.premium-card{padding:var(--space-200)}.stat-card-value{font-size:var(--text-2xl)}.section-title{font-size:var(--text-xl)}}.skeleton{background:linear-gradient(90deg,var(--color-gray-200) 25%,var(--color-gray-100) 50%,var(--color-gray-200) 75%);background-size:200% 100%;animation:shimmer 2s infinite;border-radius:var(--radius-md)}.skeleton-text{height:16px;margin-bottom:var(--space-100)}.skeleton-title{height:24px;width:60%;margin-bottom:var(--space-150)}.skeleton-card{height:120px;border-radius:var(--radius-xl)}.tab-header{background:var(--gradient-primary);border-radius:var(--radius-xl);padding:var(--space-400);margin-bottom:var(--space-400);color:var(--color-white);text-align:center;box-shadow:var(--shadow-primary);position:relative;overflow:hidden}.tab-header:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--color-white-alpha-10) 0%,transparent 70%);animation:tab-header-pulse 4s ease-in-out infinite}@keyframes tab-header-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.tab-header-icon{font-size:var(--font-size-5xl);margin-bottom:var(--space-200);position:relative;z-index:var(--z-base);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.tab-header-title{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);margin:0 0 var(--space-100) 0;position:relative;z-index:var(--z-base);text-shadow:0 2px 4px rgba(0,0,0,.2)}.tab-header-subtitle{font-size:var(--text-base);opacity:.95;max-width:600px;margin:0 auto;position:relative;z-index:var(--z-base);line-height:var(--line-height-relaxed)}.tab-header.tab-header-competitive{background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-warning) 100%)}.tab-header.tab-header-competitive:before{content:"🏆";position:absolute;right:-30px;top:-30px;font-size:220px;opacity:.1;transform:rotate(15deg);animation:none}.tab-header.tab-header-reward{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-warning) 100%)}@media (max-width: 768px){.tab-header{padding:var(--space-300);margin-bottom:var(--space-300)}.tab-header-icon{font-size:var(--font-size-4xl);margin-bottom:var(--space-150)}.tab-header-title{font-size:var(--font-size-3xl)}.tab-header-subtitle{font-size:var(--text-sm)}}@media (max-width: 480px){.tab-header{padding:var(--space-250)}.tab-header-icon{font-size:var(--font-size-3xl)}.tab-header-title{font-size:var(--font-size-2xl)}}@media print{.tab-header{background:var(--color-white);color:var(--color-text-primary);border:2px solid var(--color-primary);box-shadow:none}.tab-header:before{display:none}}.google-logo{width:20px;height:20px;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}#profileCountry{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2300A651' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right var(--space-lg) center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:3rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}:root{--color-navy-500: #003DA5;--color-navy-600: #001F3F;--color-navy-400: #0051CC;--color-navy-300: #3374D8;--color-primary: var(--color-navy-500);--color-primary-dark: var(--color-navy-600);--color-primary-light: var(--color-navy-400);--color-primary-lighter: var(--color-navy-300);--color-primary-alpha-5: rgba(0, 61, 165, .05);--color-primary-alpha-10: rgba(0, 61, 165, .1);--color-blue-alpha-5: rgba(0, 61, 165, .05);--color-blue-alpha-10: rgba(0, 61, 165, .1);--color-blue-alpha-20: rgba(0, 61, 165, .2);--color-blue-alpha-30: rgba(0, 61, 165, .3);--color-blue-alpha-40: rgba(0, 61, 165, .4);--color-blue-alpha-50: rgba(0, 61, 165, .5);--color-red-500: #EA3A3A;--color-red-600: #D32F2F;--color-red-400: #EF5350;--color-red-300: #E57373;--color-action: var(--color-red-500);--color-action-dark: var(--color-red-600);--color-action-light: var(--color-red-400);--color-accent: var(--color-red-500);--color-accent-light: var(--color-red-400);--color-crimson-alpha-5: rgba(234, 58, 58, .05);--color-crimson-alpha-10: rgba(234, 58, 58, .1);--color-crimson-alpha-20: rgba(234, 58, 58, .2);--color-crimson-alpha-30: rgba(234, 58, 58, .3);--color-success: #4CAF50;--color-success-dark: #388E3C;--color-success-light: #66BB6A;--color-success-bg: #F0FDF4;--color-success-alpha-10: rgba(76, 175, 80, .1);--color-success-alpha-20: rgba(76, 175, 80, .2);--color-warning: #FFD700;--color-warning-dark: #FFA500;--color-warning-light: #FFE55C;--color-warning-bg: #FFFBEB;--color-warning-alpha-10: rgba(255, 215, 0, .1);--color-warning-alpha-20: rgba(255, 215, 0, .2);--color-neon-green: #46F5CA;--color-error: #EA3A3A;--color-error-dark: #D32F2F;--color-error-bg: #FEF2F2;--color-danger: var(--color-error);--color-danger-dark: var(--color-error-dark);--color-danger-alpha-10: rgba(234, 58, 58, .1);--color-danger-alpha-20: rgba(234, 58, 58, .2);--color-info: #2196F3;--color-info-bg: #EFF6FF;--color-info-alpha-10: rgba(33, 150, 243, .1);--color-secondary: #FF6B35;--color-secondary-dark: #E85D2C;--color-secondary-light: #FF8C61;--color-secondary-alpha-10: rgba(255, 107, 53, .1);--color-secondary-alpha-20: rgba(255, 107, 53, .2);--color-white: #FFFFFF;--color-gray-900: #2E2E2E;--color-gray-700: #424a5a;--color-gray-500: #6B7280;--color-gray-300: #D1D5DB;--color-gray-200: #EEEDED;--color-gray-100: #F5F5F5;--color-gray-50: #F9FAFB;--color-text-primary: var(--color-gray-900);--color-text-secondary: var(--color-gray-700);--color-text-tertiary: var(--color-gray-300);--color-text-light: var(--color-gray-500);--color-text-lighter: var(--color-gray-300);--color-text-dark: #1A1A1A;--text-primary: var(--color-text-primary);--text-secondary: var(--color-text-secondary);--text-light: var(--color-text-light);--color-border: var(--color-gray-200);--color-border-light: var(--color-gray-100);--color-background: var(--color-gray-100);--color-background-light: var(--color-gray-50);--color-background-subtle: #FAFAFA;--color-surface: var(--color-white);--color-field-gray: var(--color-gray-300);--color-whistle: var(--color-gray-500);--color-locker: var(--color-gray-200);--color-white-alpha-90: rgba(255, 255, 255, .9);--color-white-alpha-40: rgba(255, 255, 255, .4);--color-white-alpha-30: rgba(255, 255, 255, .3);--color-white-alpha-20: rgba(255, 255, 255, .2);--color-white-alpha-10: rgba(255, 255, 255, .1);--color-black-alpha-80: rgba(0, 0, 0, .8);--color-black-alpha-50: rgba(0, 0, 0, .5);--color-black-alpha-30: rgba(0, 0, 0, .3);--color-black-alpha-10: rgba(0, 0, 0, .1);--gradient-primary: linear-gradient(135deg, #003DA5 0%, #0051CC 100%);--gradient-primary-dark: linear-gradient(135deg, #001F3F 0%, #003DA5 100%);--gradient-primary-vibrant: linear-gradient(135deg, #0051CC 0%, #3374D8 100%);--gradient-champion: linear-gradient(135deg, #EA3A3A 0%, #FF6B35 100%);--gradient-accent: linear-gradient(135deg, #003DA5 0%, #0051CC 100%);--gradient-success: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);--accent-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);--gradient-hero: linear-gradient(135deg, rgba(0, 61, 165, .95) 0%, rgba(0, 81, 204, .9) 100%);--gradient-hero-dark: linear-gradient(135deg, rgba(0, 31, 63, .98) 0%, rgba(0, 61, 165, .95) 100%);--gradient-hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .7) 100%);--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .05) 100%);--gradient-glass-dark: linear-gradient(135deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .1) 100%);--gradient-card-premium: linear-gradient(145deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 1) 100%);--gradient-card-subtle: linear-gradient(180deg, rgba(249, 250, 251, 1) 0%, rgba(255, 255, 255, 1) 100%);--font-primary: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "Roboto", "Trade Gothic Bold", sans-serif;--font-secondary: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "Roboto Mono", "DIN Condensed", monospace;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 28px;--text-4xl: 34px;--font-size-xs: var(--text-xs);--font-size-sm: var(--text-sm);--font-size-base: var(--text-base);--font-size-lg: var(--text-lg);--font-size-xl: var(--text-xl);--font-size-2xl: var(--text-2xl);--font-size-3xl: var(--text-3xl);--font-size-4xl: var(--text-4xl);--font-size-5xl: 48px;--font-size-h1: var(--text-4xl);--font-size-h2: var(--text-3xl);--font-size-h3: var(--text-2xl);--font-size-h4: var(--text-xl);--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-extrabold: 800;--font-weight-normal: var(--weight-regular);--font-weight-medium: var(--weight-medium);--font-weight-semibold: var(--weight-semibold);--font-weight-bold: var(--weight-bold);--font-weight-extrabold: var(--weight-extrabold);--line-height-none: 1;--line-height-tight: 1.2;--line-height-snug: 1.3;--line-height-normal: 1.5;--line-height-relaxed: 1.6;--letter-spacing-tight: -.02em;--letter-spacing-normal: 0;--letter-spacing-wide: .05em;--space-050: 4px;--space-100: 8px;--space-150: 12px;--space-200: 16px;--space-250: 20px;--space-300: 24px;--space-400: 32px;--space-500: 40px;--space-600: 48px;--space-800: 64px;--space-xs: var(--space-050);--space-sm: var(--space-100);--space-md: var(--space-150);--space-lg: var(--space-200);--space-xl: var(--space-300);--space-2xl: var(--space-400);--space-3xl: var(--space-500);--space-4xl: var(--space-600);--space-2xs: 2px;--space-3xs: 1px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--shadow-2: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);--shadow-4: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--shadow-8: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--shadow-12: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--shadow-24: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12);--shadow-xs: var(--shadow-2);--shadow-sm: var(--shadow-2);--shadow-md: var(--shadow-4);--shadow-lg: var(--shadow-8);--shadow-xl: var(--shadow-12);--shadow-2xl: var(--shadow-24);--shadow-card: var(--shadow-2);--shadow-card-hover: var(--shadow-8);--shadow-primary: 0 4px 12px rgba(0, 61, 165, .15);--shadow-primary-sm: 0 2px 8px rgba(0, 61, 165, .12);--shadow-primary-md: 0 6px 16px rgba(0, 61, 165, .18);--shadow-primary-lg: 0 10px 24px rgba(0, 61, 165, .25);--shadow-action: 0 4px 12px rgba(234, 58, 58, .15);--shadow-action-lg: 0 8px 20px rgba(234, 58, 58, .25);--shadow-success: 0 4px 12px rgba(76, 175, 80, .15);--shadow-warning: 0 4px 12px rgba(255, 215, 0, .15);--shadow-focus: 0 0 0 3px rgba(0, 61, 165, .2);--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, .06);--shadow-hover: 0 4px 12px rgba(0, 0, 0, .15);--shadow-modal: var(--shadow-24);--touch-target: 48px;--touch-target-sm: 44px;--touch-target-lg: 56px;--touch-comfortable: 56px;--border-width: 1px;--border-width-md: 2px;--border-width-lg: 3px;--border-width-xl: 4px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-normal: .28s cubic-bezier(.4, 0, .2, 1);--transition-all: all .28s cubic-bezier(.4, 0, .2, 1);--transition-transform: transform .3s cubic-bezier(.4, 0, .2, 1);--transition-opacity: opacity .2s ease;--easing-standard: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--z-base: 1;--z-dropdown: 10;--z-sticky: 20;--z-fixed: 30;--z-modal-backdrop: 50;--z-modal: 100;--z-notification: 400;--z-toast: 500;--max-width-sm: 640px;--max-width-md: 768px;--max-width-lg: 1024px;--max-width-xl: 1280px;--max-width-2xl: 1536px;--breakpoint-sm: 480px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--backdrop-blur-sm: blur(4px);--backdrop-blur-md: blur(12px);--backdrop-blur-lg: blur(16px);--opacity-40: .4;--opacity-60: .6;--opacity-70: .7;--opacity-80: .8;--opacity-90: .9;--opacity-95: .95;--opacity-100: 1;--color-bronze: #9C6B3A;--color-silver: #C0C0C0;--color-gold: #FFD700;--color-platinum: #E5E4E2;--duration-base: .2s;--duration-slow: .4s;--duration-fast: .15s;--glass-background: rgba(255, 255, 255, .85);--glass-border: rgba(255, 255, 255, .2);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .1);--card-background: var(--color-white);--card-border: var(--color-gray-200);--card-hover-transform: translateY(-2px);--card-hover-shadow: var(--shadow-8);--hero-height: 280px;--hero-height-mobile: 200px;--hero-overlay: linear-gradient(135deg, rgba(0, 61, 165, .92) 0%, rgba(0, 81, 204, .85) 100%);--animation-slide-up: slideUp .4s cubic-bezier(.4, 0, .2, 1);--animation-fade-in: fadeIn .5s ease-in-out;--animation-scale-in: scaleIn .3s cubic-bezier(.34, 1.56, .64, 1);--animation-shimmer: shimmer 2s infinite}@media (prefers-color-scheme: dark){:root{--color-background: #1A1A1A;--color-surface: #2D2D2D;--color-text-primary: #FFFFFF;--color-text-secondary: #D1D5DB;--color-border: #374151}}@media print{:root{--shadow-sm: none;--shadow-md: none;--shadow-lg: none}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-primary);font-size:var(--text-base);font-weight:var(--weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background:var(--color-background);min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:var(--weight-bold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight);color:var(--color-text-primary);margin-bottom:var(--space-200)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{margin-bottom:var(--space-200);line-height:var(--line-height-relaxed)}p:last-child{margin-bottom:0}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark);text-decoration:underline}a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}strong,b{font-weight:var(--weight-semibold)}em,i{font-style:italic}small{font-size:var(--text-sm);color:var(--color-text-secondary)}ul,ol{margin-bottom:var(--space-200);padding-left:var(--space-300)}li{margin-bottom:var(--space-100);line-height:var(--line-height-relaxed)}ul li:last-child,ol li:last-child{margin-bottom:0}.container{max-width:var(--max-width-lg);margin:0 auto;padding:var(--space-300);width:100%}.container-sm{max-width:var(--max-width-sm)}.container-md{max-width:var(--max-width-md)}.container-xl{max-width:var(--max-width-xl)}.container-2xl{max-width:var(--max-width-2xl)}.container-fluid{max-width:100%;padding:var(--space-200) var(--space-300)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--line-height-normal);margin:0;color:inherit}button,input{overflow:visible}button,select{text-transform:none}button{background:none;border:none;padding:0;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}table{border-collapse:collapse;border-spacing:0;width:100%}th{text-align:left;font-weight:var(--weight-semibold)}hr{height:0;border:0;border-top:1px solid var(--color-border);margin:var(--space-300) 0}code,kbd,samp,pre{font-family:var(--font-mono);font-size:var(--text-sm)}code{padding:2px 6px;background:var(--color-background);border-radius:var(--radius-sm);color:var(--color-action);font-weight:var(--weight-medium)}pre{padding:var(--space-200);background:var(--color-background);border-radius:var(--radius-md);overflow-x:auto;margin-bottom:var(--space-200)}pre code{padding:0;background:none;color:inherit}blockquote{margin:var(--space-300) 0;padding-left:var(--space-300);border-left:4px solid var(--color-primary);color:var(--color-text-secondary);font-style:italic}::selection{background:var(--color-blue-alpha-20);color:var(--color-primary-dark)}::-moz-selection{background:var(--color-blue-alpha-20);color:var(--color-primary-dark)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--color-background)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full);border:3px solid var(--color-background)}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}*:focus:not(:focus-visible){outline:none}*:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.analysis-container{position:relative;margin-top:var(--space-300)}.analysis-video{display:none;width:100%}.analysis-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.analysis-start-btn{display:none;margin-top:var(--space-300)}.analysis-results{margin-top:var(--space-300)}.skip-to-main{position:absolute;top:-100px;left:0;background:var(--color-primary);color:var(--color-white);padding:var(--space-150) var(--space-200);text-decoration:none;border-radius:var(--radius-md);z-index:var(--z-toast)}.skip-to-main:focus{top:var(--space-200);left:var(--space-200)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}html{scroll-behavior:auto}}@media (prefers-contrast: high){body{border:3px solid currentColor}button,a{text-decoration:underline}}@media print{body{background:var(--color-white);color:#000}.card{box-shadow:none;border:1px solid #000;page-break-inside:avoid}a[href^=http]:after{content:" (" attr(href) ")";font-size:var(--text-sm);color:var(--color-text-secondary)}button,.btn,nav,.navigation,.modal,.tooltip{display:none}}@media (max-width: 768px){body{font-size:var(--text-base)}.container{padding:var(--space-200)}.card{padding:var(--space-200);margin:var(--space-200) 0}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(400px);opacity:0}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-8px)}60%{transform:translateY(-4px)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes rotateIn{0%{opacity:0;transform:rotate(-180deg) scale(.5)}to{opacity:1;transform:rotate(0) scale(1)}}@keyframes championshipGlow{0%,to{box-shadow:var(--shadow-secondary-md)}50%{box-shadow:var(--shadow-secondary-lg)}}@keyframes countdownPulse{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeInOut{0%,to{opacity:.6}50%{opacity:.3}}.animate-spin{animation:spin 1s linear infinite}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-bounce{animation:bounce 1s ease infinite}.animate-fadeIn{animation:fadeIn .5s ease}.animate-fadeInUp{animation:fadeInUp .6s ease}.animate-float{animation:float 3s ease-in-out infinite}.loading-container{display:flex;justify-content:center;align-items:center;padding:var(--space-3xl)}.spinner{width:50px;height:50px;border:4px solid var(--color-border);border-top-color:var(--color-secondary);border-radius:var(--radius-full);animation:spin 1s linear infinite}.spinner-sm{width:24px;height:24px;border-width:2px}.spinner-lg{width:64px;height:64px;border-width:6px}.loading-text{text-align:center;color:var(--color-text-secondary);font-style:italic;padding:var(--space-xl)}.skeleton{background:var(--color-border);border-radius:var(--radius-md);animation:shimmer 1.5s infinite}.empty-state{text-align:center;padding:var(--space-3xl) var(--space-xl);color:var(--color-text-secondary)}.empty-state-icon{font-size:var(--font-size-5xl);opacity:.5;margin-bottom:var(--space-lg)}.empty-state-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-sm)}.empty-state-message{font-size:var(--font-size-base);color:var(--color-text-secondary);margin-bottom:var(--space-xl)}.empty-state-sm{padding:var(--space-xl) var(--space-md)}.empty-state-sm .empty-state-icon{font-size:var(--font-size-3xl)}.error-container{background:var(--color-error-bg);color:var(--color-danger);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);margin:var(--space-lg) 0;border-left:4px solid var(--color-danger)}.error-container h4{margin-bottom:var(--space-sm);font-weight:var(--font-weight-semibold)}.error-container p{margin:0;line-height:var(--line-height-normal)}.error-inline{display:inline-flex;align-items:center;gap:var(--space-sm);color:var(--color-danger);font-size:var(--font-size-sm);margin-top:var(--space-xs)}.success-container{background:var(--color-success-bg);color:var(--color-success);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);margin:var(--space-lg) 0;border-left:4px solid var(--color-success)}.success-container h4{margin-bottom:var(--space-sm);font-weight:var(--font-weight-semibold)}.success-container p{margin:0;line-height:var(--line-height-normal)}.info-container{background:var(--color-info-bg);color:var(--color-info);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);margin:var(--space-lg) 0;border-left:4px solid var(--color-info)}.warning-container{background:var(--color-warning-bg);color:var(--color-warning);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);margin:var(--space-lg) 0;border-left:4px solid var(--color-warning)}.disabled,[disabled]{opacity:.6;cursor:not-allowed;pointer-events:none}.hover-lift{transition:var(--transition-all)}.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.hover-grow{transition:var(--transition-all)}.hover-grow:hover{transform:scale(1.05)}.hover-glow{transition:var(--transition-all)}.hover-glow:hover{box-shadow:0 0 20px var(--color-primary-alpha-20)}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-start{display:flex;justify-content:flex-start;align-items:center}.flex-end{display:flex;justify-content:flex-end;align-items:center}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}.grid-auto-fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-lg)}.grid-auto-fill{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-lg)}.m-0{margin:0}.m-auto{margin:auto}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.p-0{padding:0}.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.hidden{display:none!important}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-scroll{overflow:scroll}.card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-300);box-shadow:var(--shadow-2);border:1px solid var(--color-border);transition:var(--transition-all)}.card:hover{box-shadow:var(--shadow-4)}.card-elevated{box-shadow:var(--shadow-8)}.card-elevated:hover{box-shadow:var(--shadow-12);transform:translateY(-2px)}.card-flat{box-shadow:none;border:2px solid var(--color-border)}.card-bordered{border:2px solid var(--color-border);box-shadow:none}.card-primary{border-left:4px solid var(--color-primary)}.card-primary:hover{border-left-color:var(--color-primary-dark)}.card-action{border-left:4px solid var(--color-action)}.card-success{border-left:4px solid var(--color-success)}.card-warning{border-left:4px solid var(--color-warning)}.card-gradient{background:var(--gradient-primary);color:var(--color-white);border:none;box-shadow:var(--shadow-primary-lg)}.card-gradient-action{background:var(--gradient-champion);color:var(--color-white);border:none;box-shadow:var(--shadow-action-lg)}.card-sm{padding:var(--space-200);border-radius:var(--radius-lg)}.card-lg{padding:var(--space-400);border-radius:var(--radius-2xl)}.card-xl{padding:var(--space-600);border-radius:var(--radius-2xl)}.card-interactive{cursor:pointer;transition:var(--transition-all)}.card-interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-8);border-color:var(--color-primary)}.card-interactive:active{transform:translateY(-2px);box-shadow:var(--shadow-4)}.card-interactive:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--color-primary)}.metric-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-300);text-align:center;border:1px solid var(--color-border);box-shadow:var(--shadow-2);transition:var(--transition-all)}.metric-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-4)}.metric-card-icon{font-size:var(--text-4xl);margin-bottom:var(--space-150);display:block}.metric-card-value{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-bold);color:var(--color-primary);line-height:var(--line-height-tight);margin-bottom:var(--space-100)}.metric-card-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.metric-card-description{font-size:var(--text-xs);color:var(--color-text-light);margin-top:var(--space-100)}.stat-label{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:var(--font-size-2xl, 1.5rem);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary);line-height:1.2}.insight-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-300);box-shadow:var(--shadow-2);border:1px solid var(--color-border);transition:var(--transition-all)}.insight-card:hover{box-shadow:var(--shadow-4);transform:translateY(-2px)}.insight-card-header{display:flex;align-items:center;gap:var(--space-150);margin-bottom:var(--space-200);padding-bottom:var(--space-150);border-bottom:1px solid var(--color-border)}.insight-card-icon{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--color-blue-alpha-10);color:var(--color-primary);font-size:var(--text-lg)}.insight-card-title{font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text-primary);margin:0}.insight-card-content{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--line-height-relaxed)}.insight-card-success{border-left:4px solid var(--color-success)}.insight-card-success .insight-card-icon{background:var(--color-success-alpha-10);color:var(--color-success)}.insight-card-warning{border-left:4px solid var(--color-warning)}.insight-card-warning .insight-card-icon{background:var(--color-warning-alpha-10);color:var(--color-warning-dark)}.insight-card-action{border-left:4px solid var(--color-action)}.insight-card-action .insight-card-icon{background:var(--color-crimson-alpha-10);color:var(--color-action)}.achievement-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-300);text-align:center;box-shadow:var(--shadow-4);border:2px solid var(--color-border);transition:var(--transition-all);position:relative;overflow:hidden}.achievement-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary)}.achievement-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-12)}.achievement-card-icon{font-size:3rem;margin-bottom:var(--space-150);display:block;animation:float 3s ease-in-out infinite}.achievement-card-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--color-primary);margin-bottom:var(--space-050)}.achievement-card-description{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--space-150)}.achievement-card-date{font-size:var(--text-xs);color:var(--color-text-light);font-weight:var(--weight-medium)}.achievement-card-legendary{background:var(--gradient-champion);color:var(--color-white);border:none;box-shadow:var(--shadow-action-lg)}.achievement-card-legendary .achievement-card-title,.achievement-card-legendary .achievement-card-description,.achievement-card-legendary .achievement-card-date{color:var(--color-white)}.achievement-card-legendary:before{background:var(--color-white)}.profile-card{background:var(--gradient-primary);border-radius:var(--radius-2xl);padding:var(--space-400);color:var(--color-white);box-shadow:var(--shadow-primary-lg);text-align:center;border:none}.profile-card-avatar{width:80px;height:80px;border-radius:var(--radius-full);background:var(--color-white-alpha-20);display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin:0 auto var(--space-200);border:3px solid var(--color-white-alpha-30)}.profile-card-name{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);margin-bottom:var(--space-050)}.profile-card-stats{display:flex;justify-content:center;gap:var(--space-400);margin-top:var(--space-250)}.profile-card-stat{text-align:center}.profile-card-stat-value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);display:block}.profile-card-stat-label{font-size:var(--text-xs);opacity:.9;text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-300)}.card-grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.card-grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.card-list{display:flex;flex-direction:column;gap:var(--space-200)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-200);padding-bottom:var(--space-150);border-bottom:1px solid var(--color-border)}.card-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-primary);margin:0}.card-subtitle{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:var(--space-050)}.card-body{color:var(--color-text-secondary);font-size:var(--text-base);line-height:var(--line-height-relaxed)}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-200);padding-top:var(--space-150);border-top:1px solid var(--color-border);font-size:var(--text-sm);color:var(--color-text-light)}.card-divider{height:1px;background:var(--color-border);margin:var(--space-200) 0;border:none}@media (max-width: 768px){.card{padding:var(--space-200);border-radius:var(--radius-lg)}.card-lg{padding:var(--space-300);border-radius:var(--radius-xl)}.stat-card{min-height:80px;padding:var(--space-200)}.stat-card-icon{width:40px;height:40px;font-size:var(--text-2xl)}.stat-card-number{font-size:var(--text-3xl)}.card-grid{grid-template-columns:1fr;gap:var(--space-200)}}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.6}}@media (prefers-reduced-motion: reduce){.card,.card-interactive,.stat-card,.metric-card,.insight-card,.achievement-card,.game-card{transition:none}.card-interactive:hover,.stat-card:hover,.metric-card:hover,.game-card:hover{transform:none}.achievement-card-icon{animation:none}.game-card-live:before{animation:none}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-md);animation:fadeIn var(--duration-base) var(--ease-out)}.modal.hidden{display:none}.modal-overlay{background:var(--color-black-alpha-50);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{position:relative;background:var(--color-white);border-radius:var(--radius-2xl);width:100%;max-width:600px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-2xl);animation:modalSlideUp var(--duration-slow) var(--ease-out)}.modal-content-sm{max-width:400px}.modal-content-md{max-width:600px}.modal-content-lg{max-width:800px}.modal-content-xl{max-width:1000px}.modal-content-full{max-width:calc(100% - var(--space-lg));max-height:calc(100vh - var(--space-lg))}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);background:var(--gradient-primary);color:var(--color-white);flex-shrink:0;position:relative}.modal-header h3,.modal-header h2{margin:0;font-family:var(--font-display);font-size:var(--font-size-h3);font-weight:var(--font-weight-bold)}.modal-header-subtitle{font-size:var(--font-size-sm);opacity:.9;margin-top:var(--space-3xs)}.modal-close{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-white-alpha-20);border:2px solid var(--color-white-alpha-30);border-radius:var(--radius-full);color:var(--color-white);font-size:var(--font-size-2xl);cursor:pointer;transition:var(--transition-fast);margin-left:var(--space-sm);box-shadow:0 2px 8px #00000026;font-weight:var(--font-weight-bold)}.modal-close:hover{background:var(--color-white-alpha-30);transform:rotate(90deg) scale(1.1)}.modal-close:active{transform:rotate(90deg) scale(.95)}.modal-close:focus-visible{outline:2px solid var(--color-white);outline-offset:2px}.modal-body{padding:var(--space-lg);overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-track{background:var(--color-background);border-radius:var(--radius-full)}.modal-body::-webkit-scrollbar-thumb{background:var(--color-whistle);border-radius:var(--radius-full)}.modal-body::-webkit-scrollbar-thumb:hover{background:var(--color-field-gray)}.modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-xs);padding:var(--space-lg);border-top:var(--border-width) solid var(--color-border-light);background:var(--color-background);flex-shrink:0}.modal-footer-start{justify-content:flex-start}.modal-footer-center{justify-content:center}.modal-footer-between{justify-content:space-between}.modal-success .modal-header{background:var(--gradient-success)}.modal-warning .modal-header{background:linear-gradient(135deg,var(--color-warning) 0%,var(--color-warning-dark) 100%)}.modal-danger .modal-header{background:linear-gradient(135deg,var(--color-error) 0%,var(--color-error-dark) 100%)}.modal-action .modal-header{background:var(--gradient-champion)}.modal-info .modal-header{background:linear-gradient(135deg,var(--color-secondary) 0%,var(--color-secondary-dark) 100%)}.modal-light .modal-header{background:var(--color-white);color:var(--color-text-primary);border-bottom:var(--border-width) solid var(--color-border-light)}.modal-light .modal-close{background:var(--color-background);color:var(--color-text-primary)}.modal-light .modal-close:hover{background:var(--color-locker)}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes modalSlideDown{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(40px) scale(.96)}}.modal.closing{animation:fadeIn var(--duration-base) var(--ease-in) reverse}.modal.closing .modal-content{animation:modalSlideDown var(--duration-base) var(--ease-in)}.modal-confirm .modal-body{text-align:center;padding:var(--space-xl)}.modal-confirm-icon{width:80px;height:80px;margin:0 auto var(--space-md);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);font-size:2.5rem;background:var(--color-blue-alpha-10);color:var(--color-primary)}.modal-confirm-danger .modal-confirm-icon{background:var(--color-crimson-alpha-10);color:var(--color-error)}.modal-confirm-success .modal-confirm-icon{background:var(--color-success-alpha-10);color:var(--color-success)}.modal-confirm-title{font-family:var(--font-display);font-size:var(--font-size-h3);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-xs)}.modal-confirm-message{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--space-lg)}.modal-confirm .modal-footer{justify-content:center;gap:var(--space-sm)}.achievement-popup{position:fixed;top:var(--space-lg);right:var(--space-lg);z-index:var(--z-notification);background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-md);box-shadow:var(--shadow-2xl);border-left:var(--border-width-xl) solid var(--color-action);min-width:320px;max-width:400px;animation:slideInRight var(--duration-slow) var(--ease-out)}.achievement-popup.hiding{animation:slideOutRight var(--duration-base) var(--ease-in)}.achievement-popup-content{display:flex;align-items:center;gap:var(--space-sm)}.achievement-popup-icon{flex-shrink:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:var(--gradient-champion);color:var(--color-white);font-size:2rem;box-shadow:var(--shadow-action)}.achievement-popup-text{flex:1}.achievement-popup-title{font-family:var(--font-display);font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-3xs)}.achievement-popup-description{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-snug)}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.modal-loading{pointer-events:none}.modal-loading .modal-body{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xl);min-height:200px}.modal-loading-spinner{width:64px;height:64px;border:4px solid var(--color-blue-alpha-20);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin .8s linear infinite;margin-bottom:var(--space-md)}.modal-loading-text{font-size:var(--font-size-base);color:var(--color-text-secondary);text-align:center}@media (max-width: 768px){.modal{padding:var(--space-sm)}.modal-content{max-width:100%;max-height:95vh;border-radius:var(--radius-xl)}.modal-header{padding:var(--space-md)}.modal-header h3,.modal-header h2{font-size:var(--font-size-h4)}.modal-body{padding:var(--space-md)}.modal-footer{padding:var(--space-md);flex-direction:column-reverse;gap:var(--space-xs)}.modal-footer .btn{width:100%}.achievement-popup{top:var(--space-sm);right:var(--space-sm);left:var(--space-sm);max-width:none;min-width:0}.modal-confirm .modal-body{padding:var(--space-md)}.modal-confirm-icon{width:64px;height:64px;font-size:2rem}}@media (prefers-reduced-motion: reduce){.modal,.modal-content,.modal-overlay,.achievement-popup,.modal.closing,.modal.closing .modal-content,.achievement-popup.hiding{animation:none}.modal-close:hover{transform:none}.modal-loading-spinner{animation:none;border-top-color:var(--color-primary);border-right-color:var(--color-primary)}}.modal:focus{outline:none}body.modal-open{overflow:hidden}.match-details{width:100%}.match-details.with-details .modal-body{max-height:70vh}.match-header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-border)}.league-info{display:flex;flex-direction:column;gap:var(--space-2xs)}.league-name{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-primary)}.match-date{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.match-status-large{padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.match-status-large.live{background:var(--color-danger-light);color:var(--color-danger)}.match-status-large.finished{background:var(--color-success-light);color:var(--color-success)}.match-status-large.upcoming{background:var(--color-primary-light);color:var(--color-primary)}.teams-detailed{display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-xl)}.team-detailed{flex:1;text-align:center}.team-crest{font-size:3rem;margin-bottom:var(--space-sm)}.team-detailed h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-xs)}.team-score{font-size:var(--font-size-h1);font-weight:var(--font-weight-bold);color:var(--color-primary)}.vs-separator{display:flex;align-items:center;justify-content:center}.final-score{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);color:var(--color-text)}.vs-text{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}.venue-time-info{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md);background:var(--color-background-subtle);border-radius:var(--radius-md);margin-bottom:var(--space-xl)}.info-item{display:flex;align-items:center;gap:var(--space-sm)}.info-label{font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);min-width:100px}.info-value{color:var(--color-text)}.match-stats-section,.match-events-section,.match-lineups-section{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}.stats-comparison{display:flex;flex-direction:column;gap:var(--space-md)}.stat-row{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;gap:var(--space-md)}.stat-value{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);text-align:center}.stat-value.away{color:var(--color-accent)}.stat-info{display:flex;flex-direction:column;gap:var(--space-2xs)}.stat-bar{height:8px;background:var(--color-background-subtle);border-radius:var(--radius-full);overflow:hidden;display:flex}.stat-bar-fill.away{background:var(--color-accent)}.events-timeline{display:flex;flex-direction:column;gap:var(--space-md);max-height:400px;overflow-y:auto;padding:var(--space-sm)}.event-item{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-md);transition:background .2s ease}.event-item:hover{background:var(--color-background-subtle)}.event-item.home{border-left:3px solid var(--color-primary)}.event-item.away{border-left:3px solid var(--color-accent)}.event-time{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);min-width:40px}.event-icon{font-size:var(--font-size-lg)}.event-details{flex:1}.event-type{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-2xs)}.event-player{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.event-player .assist{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-left:var(--space-xs)}.event-detail{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-top:var(--space-2xs)}.lineups-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.team-lineup{background:var(--color-background-subtle);border-radius:var(--radius-md);padding:var(--space-md)}.lineup-header h5{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-xs)}.lineup-header .formation{display:block;font-size:var(--font-size-sm);color:var(--color-primary);margin-bottom:var(--space-2xs)}.lineup-header .coach{display:block;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.educational-info{margin-top:var(--space-xl);padding:var(--space-lg);background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent-light));border-radius:var(--radius-md);border-left:4px solid var(--color-primary)}.educational-info h4{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-primary);margin-bottom:var(--space-sm)}.educational-info p{font-size:var(--font-size-sm);color:var(--color-text);line-height:var(--line-height-relaxed)}.stats-insight{margin-top:var(--space-md);padding:var(--space-md);background:var(--color-white);border-radius:var(--radius-sm);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.stats-insight strong{color:var(--color-primary)}.loading-details{text-align:center;padding:var(--space-xl);color:var(--color-text-secondary)}.no-data{text-align:center;padding:var(--space-md);color:var(--color-text-secondary);font-style:italic}.match-navigation{display:flex;justify-content:center;align-items:center;gap:var(--space-lg);padding:var(--space-lg) var(--space-md);border-top:1px solid var(--color-border);margin-top:var(--space-xl);background:var(--color-background-subtle)}.match-nav-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:var(--color-white);border:2px solid var(--color-primary);border-radius:var(--radius-md);color:var(--color-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);box-shadow:0 2px 4px #0000001a}.match-nav-btn:hover:not(:disabled){background:var(--color-primary);color:var(--color-white);transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.match-nav-btn:active:not(:disabled){transform:translateY(0)}.match-nav-btn:disabled{opacity:.4;cursor:not-allowed;border-color:var(--color-border);color:var(--color-text-tertiary)}.match-nav-info{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;min-width:120px}@media (max-width: 768px){.teams-detailed{flex-direction:column;gap:var(--space-md)}.vs-separator{order:-1;margin-bottom:var(--space-md)}.stat-row{grid-template-columns:50px 1fr 50px;gap:var(--space-sm)}.lineups-container{grid-template-columns:1fr}.events-timeline{max-height:300px}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-100);padding:var(--space-150) var(--space-300);min-height:var(--touch-target);font-family:var(--font-display);font-size:var(--text-base);font-weight:var(--weight-semibold);line-height:var(--line-height-tight);text-align:center;text-decoration:none;white-space:nowrap;letter-spacing:normal;border:none;border-radius:var(--radius-lg);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--transition-all);-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none}.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.btn:active{transform:translateY(1px) scale(.98)}.btn-primary{background:var(--color-primary);color:var(--color-white);border:none;box-shadow:var(--shadow-2)}.btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-8)}.btn-primary:active{background:var(--color-primary-dark);transform:translateY(0) scale(.98);box-shadow:var(--shadow-2)}.btn-action{background:var(--color-action);color:var(--color-white);border:none;box-shadow:var(--shadow-action);font-weight:var(--weight-bold)}.btn-action:hover{background:var(--color-action-dark);transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-action-lg)}.btn-action:active{background:var(--color-action-dark);transform:translateY(0) scale(.98);box-shadow:var(--shadow-action)}.btn-secondary{background:var(--color-secondary);color:var(--color-white);border:none;box-shadow:var(--shadow-2)}.btn-secondary:hover{background:var(--color-secondary-dark);transform:translateY(-2px);box-shadow:var(--shadow-4)}.btn-secondary:active{background:var(--color-secondary-dark);transform:translateY(0) scale(.98);box-shadow:var(--shadow-2)}.btn-outline{background:var(--color-white);color:var(--color-primary);border:2px solid var(--color-primary);box-shadow:none}.btn-outline:hover{background:var(--color-blue-alpha-5);border-color:var(--color-primary-dark);color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-2)}.btn-outline:active{background:var(--color-blue-alpha-10);transform:translateY(0) scale(.98)}.btn-outline-action{background:var(--color-white);color:var(--color-action);border:2px solid var(--color-action)}.btn-outline-action:hover{background:var(--color-crimson-alpha-5);border-color:var(--color-action-dark);color:var(--color-action-dark);transform:translateY(-1px);box-shadow:var(--shadow-2)}.btn-ghost{background:transparent;color:var(--color-primary);border:none;box-shadow:none}.btn-ghost:hover{background:var(--color-blue-alpha-10);color:var(--color-primary-dark);transform:translateY(-1px)}.btn-ghost:active{background:var(--color-blue-alpha-20);transform:translateY(0) scale(.98)}.btn-success{background:var(--color-success);color:var(--color-white);border:none;box-shadow:var(--shadow-success);font-weight:var(--weight-bold)}.btn-success:hover{background:var(--color-success-dark);transform:translateY(-2px) scale(1.02);box-shadow:0 8px 24px var(--color-success-alpha-20)}.btn-success:active{background:var(--color-success-dark);transform:translateY(0) scale(.98)}.btn-warning{background:var(--color-warning);color:var(--color-gray-900);border:none;box-shadow:var(--shadow-warning)}.btn-warning:hover{background:var(--color-warning-dark);transform:translateY(-2px);box-shadow:var(--shadow-4)}.btn-danger{background:var(--color-error);color:var(--color-white);border:none;box-shadow:var(--shadow-2)}.btn-danger:hover{background:var(--color-error-dark);transform:translateY(-2px);box-shadow:var(--shadow-4)}.btn-xs{padding:var(--space-050) var(--space-150);min-height:var(--touch-target-sm);font-size:var(--text-xs);border-radius:var(--radius-md)}.btn-sm{padding:var(--space-100) var(--space-200);min-height:var(--touch-target-sm);font-size:var(--text-sm);border-radius:var(--radius-md)}.btn-lg{padding:var(--space-200) var(--space-400);min-height:var(--touch-target-lg);font-size:var(--text-lg);border-radius:var(--radius-xl)}.btn-xl{padding:var(--space-250) var(--space-600);min-height:64px;font-size:var(--text-2xl);border-radius:var(--radius-xl);font-weight:var(--weight-bold)}.btn-icon{padding:var(--space-150);min-width:var(--touch-target);min-height:var(--touch-target);border-radius:var(--radius-full);aspect-ratio:1}.btn-icon-sm{padding:var(--space-100);min-width:var(--touch-target-sm);min-height:var(--touch-target-sm)}.btn-icon-lg{padding:var(--space-200);min-width:var(--touch-target-lg);min-height:var(--touch-target-lg)}.btn-icon-start{margin-right:var(--space-050)}.btn-icon-end{margin-left:var(--space-050)}.btn-block{width:100%;display:flex}.btn-group{display:inline-flex;gap:var(--space-100);flex-wrap:wrap}.btn-group-vertical{display:inline-flex;flex-direction:column;gap:var(--space-100)}.btn-group-stretch{width:100%}.btn-group-stretch .btn{flex:1}.btn-loading{position:relative;color:transparent!important;pointer-events:none}.btn-loading:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:var(--radius-full);animation:spin .6s linear infinite}.btn-loading.btn-lg:after{width:20px;height:20px;border-width:3px}.btn-loading.btn-sm:after{width:14px;height:14px;border-width:2px}.btn-primary.btn-loading:after,.btn-action.btn-loading:after,.btn-success.btn-loading:after,.btn-warning.btn-loading:after,.btn-danger.btn-loading:after{border-color:var(--color-white);border-top-color:transparent}.btn-outline.btn-loading:after{border-color:var(--color-primary);border-top-color:transparent}.btn:disabled,.btn.disabled{background:var(--color-locker)!important;color:var(--color-whistle)!important;border-color:var(--color-locker)!important;box-shadow:none!important;cursor:not-allowed!important;pointer-events:none;transform:none!important;opacity:.6}.btn-outline:disabled,.btn-outline.disabled,.btn-outline-action:disabled,.btn-outline-action.disabled{background:var(--color-white)!important;color:var(--color-whistle)!important;border-color:var(--color-locker)!important}.btn-ghost:disabled,.btn-ghost.disabled{background:transparent!important;color:var(--color-whistle)!important}.btn-gradient{background:var(--gradient-primary);color:var(--color-white);border:none;box-shadow:var(--shadow-primary-lg);font-weight:var(--weight-bold)}.btn-gradient:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 32px var(--color-blue-alpha-30)}.btn-champion{background:var(--gradient-champion);color:var(--color-white);border:none;box-shadow:var(--shadow-action-lg);font-weight:var(--weight-extrabold);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.btn-champion:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 32px var(--color-crimson-alpha-30)}.btn-pill{border-radius:var(--radius-full)}.btn-soft-primary{background:var(--color-blue-alpha-10);color:var(--color-primary-dark);border:none}.btn-soft-primary:hover{background:var(--color-blue-alpha-20);transform:translateY(-1px);box-shadow:var(--shadow-2)}.btn-soft-action{background:var(--color-crimson-alpha-10);color:var(--color-action-dark);border:none}.btn-soft-action:hover{background:var(--color-crimson-alpha-20);transform:translateY(-1px);box-shadow:var(--shadow-2)}.btn-soft-success{background:var(--color-success-alpha-10);color:var(--color-success-dark);border:none}.btn-soft-success:hover{background:var(--color-success-alpha-20);transform:translateY(-1px);box-shadow:var(--shadow-2)}@media (max-width: 768px){.btn{font-size:var(--text-sm);padding:var(--space-100) var(--space-200)}.btn-lg{font-size:var(--text-base);padding:var(--space-150) var(--space-250)}.btn-xl{font-size:var(--text-lg);padding:var(--space-200) var(--space-400);min-height:var(--touch-target-lg)}}@media (prefers-reduced-motion: reduce){.btn{transition:none}.btn:hover,.btn:active{transform:none}.btn-loading:after{animation:none}}@media (prefers-contrast: high){.btn{border:2px solid currentColor}}.form-group{margin:var(--space-xl) 0}.form-group label{display:block;font-weight:600;margin-bottom:8px;color:var(--color-text-dark)}.form-group input,.form-group select{width:100%;padding:var(--space-md) var(--space-lg);border:2px solid var(--color-border);border-radius:var(--space-md);font-size:16px;font-family:var(--font-secondary);transition:border-color .3s}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #1e40af1a}.drill-instructions{background:#1e40af0d;border-left:4px solid var(--color-primary);padding:var(--space-lg) var(--space-xl);margin:var(--space-lg) 0;border-radius:0 10px 10px 0}.drill-instructions strong{color:var(--color-primary)}.data-table{width:100%;border-collapse:collapse;margin:20px 0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-primary-sm)}.data-table th,.data-table td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--color-border)}.data-table th{background:var(--color-primary);color:#fff;font-weight:600}.data-table tr:hover{background:var(--color-primary-alpha-5)}.data-table tr:last-child td{border-bottom:none}.table-loading{text-align:center;padding:2rem;color:var(--color-text-light);font-style:italic}.table-empty{text-align:center;padding:3rem 1rem;color:var(--color-text-light)}.table-error{text-align:center;padding:2rem;color:var(--color-danger);background:var(--color-error-bg)}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);padding:var(--space-400);position:relative;overflow-y:auto}.auth-card,#authScreen .card{background:var(--color-white, #ffffff);border-radius:16px;padding:2.5rem;max-width:900px;width:100%;box-shadow:0 20px 60px #0000004d;animation:fadeInUp .6s ease;margin:2rem auto}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.auth-header{text-align:center;margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:2px solid var(--color-gray-200, #eeeeee)}.auth-logo{font-size:4rem;margin-bottom:1rem;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.auth-title{font-size:2.5rem;font-weight:700;color:var(--color-gray-900, #212121);margin-bottom:.5rem;line-height:1.2}.auth-subtitle{font-size:1.1rem;color:var(--color-text-secondary, #757575);margin-bottom:1.5rem;line-height:1.5}.free-badge{display:inline-flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,gold,orange);color:var(--color-gray-900, #212121);padding:1rem 2rem;border-radius:50px;margin-top:1rem;box-shadow:0 4px 15px #ffa5004d;animation:pulse 2s infinite}.badge-icon{font-size:1.5rem;margin-bottom:.25rem}.badge-text{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}.badge-subtext{font-size:.875rem;opacity:.9}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:2.5rem 0}.feature-card{background:var(--color-gray-50, #fafafa);border:2px solid var(--color-gray-200, #eeeeee);border-radius:12px;padding:1.5rem;text-align:center;transition:all .3s ease;cursor:default}.feature-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #0000001a;border-color:var(--color-primary, #4CAF50)}.feature-icon{font-size:3rem;margin-bottom:1rem;display:block}.feature-card h3{font-size:1.25rem;font-weight:600;color:var(--color-gray-900, #212121);margin-bottom:.5rem}.feature-card p{font-size:.9rem;color:var(--color-text-secondary, #757575);line-height:1.5;margin:0}.how-it-works{margin:2.5rem 0;padding:2rem;background:var(--color-gray-50, #fafafa);border-radius:12px}.how-it-works h2{text-align:center;font-size:2rem;font-weight:700;color:var(--color-gray-900, #212121);margin-bottom:2rem}.steps-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.step{display:flex;align-items:flex-start;gap:1rem;padding:1rem;background:var(--color-white, #ffffff);border-radius:8px;box-shadow:0 2px 8px #0000000d}.step-number{min-width:40px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary, #4CAF50),var(--color-secondary, #2196F3));color:var(--color-white, #ffffff);border-radius:50%;font-size:1.25rem;font-weight:700;flex-shrink:0}.step-content h4{font-size:1.1rem;font-weight:600;color:var(--color-gray-900, #212121);margin:0 0 .5rem}.step-content p{font-size:.9rem;color:var(--color-text-secondary, #757575);margin:0;line-height:1.4}.faq-section{margin:2.5rem 0}.faq-section h2{text-align:center;font-size:2rem;font-weight:700;color:var(--color-gray-900, #212121);margin-bottom:2rem}.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.faq-item{background:var(--color-gray-50, #fafafa);border-left:4px solid var(--color-primary, #4CAF50);padding:1.5rem;border-radius:8px;transition:all .3s ease}.faq-item:hover{background:var(--color-white, #ffffff);box-shadow:0 4px 12px #00000014}.faq-question{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.75rem;font-weight:600;color:var(--color-gray-900, #212121);font-size:1rem}.faq-icon{font-size:1.5rem;flex-shrink:0}.faq-answer{font-size:.9rem;color:var(--color-gray-700, #616161);line-height:1.6;margin:0;padding-left:2.25rem}.auth-form-container{margin:2.5rem 0}.auth-choice-screen{padding:2rem 0}.choice-title{font-size:1.875rem;font-weight:700;color:var(--color-gray-900, #212121);text-align:center;margin-bottom:.5rem}.choice-subtitle{font-size:1.125rem;color:var(--color-text-secondary, #757575);text-align:center;margin-bottom:2rem}.choice-buttons{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:2.5rem}.choice-btn{background:var(--color-white, #ffffff);border:2px solid var(--color-gray-300, #e0e0e0);border-radius:12px;padding:1.5rem;cursor:pointer;transition:all .3s ease;text-align:left;width:100%}.choice-btn:hover{border-color:var(--color-primary, #4CAF50);transform:translateY(-3px);box-shadow:0 8px 20px #4caf5033}.choice-btn.secondary:hover{border-color:var(--color-secondary, #2196F3);box-shadow:0 8px 20px #2196f333}.choice-btn-content{display:flex;align-items:center;gap:1.25rem}.choice-btn-icon{font-size:2.5rem;flex-shrink:0}.choice-btn-text{flex:1}.choice-btn-main{font-size:1.375rem;font-weight:700;color:var(--color-gray-900, #212121);margin-bottom:.25rem}.choice-btn-subtitle{font-size:.9rem;color:var(--color-text-secondary, #757575);line-height:1.4}.google-oauth-section{padding:2rem;background:var(--color-gray-50, #fafafa);border-radius:12px;text-align:center;margin-top:2rem}.google-oauth-title{font-size:1.25rem;font-weight:600;color:var(--color-gray-900, #212121);margin-bottom:.5rem}.google-oauth-subtitle{font-size:.9rem;color:var(--color-text-secondary, #757575);margin-bottom:1.5rem;line-height:1.5}.enhanced-google-btn{display:inline-flex;align-items:center;justify-content:center;gap:1rem;background:var(--color-white, #ffffff);border:2px solid var(--color-gray-300, #e0e0e0);border-radius:8px;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;color:var(--color-gray-900, #212121);cursor:pointer;transition:all .3s ease;width:100%;max-width:400px}.enhanced-google-btn:hover{border-color:#4285f4;box-shadow:0 4px 12px #4285f433;transform:translateY(-2px)}.google-logo{width:20px;height:20px;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}.progress-dots{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:2rem}.progress-dot{width:10px;height:10px;border-radius:50%;background:var(--color-gray-300, #e0e0e0);transition:all .3s ease}.progress-dot.active{background:var(--color-primary, #4CAF50);width:12px;height:12px}.form-header{text-align:center;margin-bottom:2rem}.form-title{font-size:1.75rem;font-weight:700;color:var(--color-gray-900, #212121);margin-bottom:.5rem}.form-description{font-size:1rem;color:var(--color-text-secondary, #757575);line-height:1.5}.help-box{display:flex;align-items:flex-start;gap:.75rem;background:#e3f2fd;border-left:4px solid #2196F3;padding:1rem 1.25rem;border-radius:8px;margin-bottom:1.5rem;font-size:.9rem;line-height:1.6;color:var(--color-gray-900, #424242)}.help-box-icon{font-size:1.5rem;flex-shrink:0}.oauth-section{margin-bottom:2rem}.oauth-divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:var(--color-gray-500, #9e9e9e);font-size:.875rem}.oauth-divider:before,.oauth-divider:after{content:"";flex:1;height:1px;background:var(--color-gray-300, #e0e0e0)}.auth-form{display:flex;flex-direction:column;gap:1.25rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.enhanced-label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--color-gray-900, #212121)}.label-icon{font-size:1.125rem}.enhanced-input{display:flex;flex-direction:column;gap:.375rem}.enhanced-input input,.form-input{padding:.875rem 1rem;border:2px solid var(--color-gray-300, #e0e0e0);border-radius:8px;font-size:1rem;color:var(--color-gray-900, #212121);transition:all .3s ease;font-family:inherit;background:var(--color-white, #ffffff)}.enhanced-input input:focus,.form-input:focus{outline:none;border-color:var(--color-primary, #4CAF50);box-shadow:0 0 0 3px #4caf501a}.enhanced-input input.error,.form-input.error{border-color:var(--color-error, #f44336)}.input-helper{font-size:.8rem;color:var(--color-text-secondary, #757575);line-height:1.4}.form-label{font-size:.9rem;font-weight:600;color:var(--color-gray-900, #212121)}.form-error{font-size:.8rem;color:var(--color-error, #f44336);margin-top:.25rem}.form-checkbox-group{display:flex;align-items:center;gap:.5rem}.form-checkbox{width:18px;height:18px;cursor:pointer}.form-checkbox-label{font-size:.9rem;color:var(--color-gray-700, #616161);cursor:pointer}.form-submit,.btn{padding:.875rem 1.5rem;background:linear-gradient(135deg,var(--color-primary, #4CAF50),var(--color-secondary, #2196F3));color:var(--color-white, #ffffff);border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:.5rem;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:.5rem}.form-submit:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #4caf504d}.form-submit:disabled,.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,var(--color-primary, #4CAF50),var(--color-secondary, #2196F3))}.btn-secondary{background:var(--color-text-secondary, #757575)}.btn-danger{background:var(--color-error, #f44336)}.auth-divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0}.auth-divider-line{flex:1;height:1px;background:var(--color-gray-300, #e0e0e0)}.auth-divider-text{font-size:.875rem;color:var(--color-gray-500, #9e9e9e)}.auth-social{display:flex;flex-direction:column;gap:.75rem}.auth-social-btn{padding:.875rem;background:var(--color-white, #ffffff);border:2px solid var(--color-gray-300, #e0e0e0);border-radius:8px;font-size:1rem;font-weight:600;color:var(--color-gray-900, #212121);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.75rem}.auth-social-btn:hover{background:var(--color-gray-50, #fafafa);border-color:var(--color-primary, #4CAF50)}.forgot-password-container{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--color-gray-200, #eeeeee)}.forgot-password-link{color:var(--color-primary, #4CAF50);font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s ease;text-decoration:none}.forgot-password-link:hover{color:var(--color-secondary, #2196F3);text-decoration:underline}.back-to-signin-container,.auth-toggle{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--color-gray-200, #eeeeee)}.auth-link{color:var(--color-primary, #4CAF50);font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s ease;text-decoration:none}.auth-link:hover{color:var(--color-secondary, #2196F3);text-decoration:underline}.auth-footer{text-align:center;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--color-gray-200, #eeeeee)}.auth-footer-text{font-size:.9rem;color:var(--color-text-secondary, #757575)}.auth-footer-link{color:var(--color-primary, #4CAF50);font-weight:600;text-decoration:none;transition:all .3s ease}.auth-footer-link:hover{color:var(--color-secondary, #2196F3);text-decoration:underline}.trust-indicators{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin:2.5rem 0 1rem;padding:1.5rem;background:var(--color-gray-50, #fafafa);border-radius:12px}.trust-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.9rem;color:var(--color-gray-700, #616161);font-weight:600}.trust-icon{font-size:1.75rem}.error-message,.success-message{padding:1rem 1.25rem;border-radius:8px;margin:1.5rem 0;font-size:.9rem;line-height:1.5;animation:slideIn .3s ease}.error-message{background:#ffebee;border-left:4px solid var(--color-error, #f44336);color:#c62828}.success-message{background:#e8f5e9;border-left:4px solid var(--color-success, #4CAF50);color:#2e7d32}@media (max-width: 768px){.auth-container{padding:1rem}.auth-card,#authScreen .card{padding:1.5rem;margin:1rem auto}.auth-title{font-size:2rem}.auth-subtitle{font-size:1rem}.features-grid{grid-template-columns:1fr;gap:1rem}.steps-container,.faq-grid{grid-template-columns:1fr}.choice-title{font-size:1.5rem}.choice-subtitle{font-size:1rem}.choice-btn-main{font-size:1.125rem}.choice-btn-subtitle{font-size:.85rem}.form-title{font-size:1.5rem}.trust-indicators{gap:1rem}}@media (max-width: 480px){.auth-title{font-size:1.75rem}.choice-btn-content{gap:1rem}.choice-btn-icon{font-size:2rem}.step{flex-direction:column;text-align:center}.step-number{margin:0 auto}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{.auth-container{background:#fff}.enhanced-google-btn,.choice-btn,.trust-indicators{display:none}}.global-player-welcome-card{position:sticky;top:0;left:0;right:0;background:var(--gradient-primary);color:var(--color-white);display:flex;align-items:center;gap:var(--space-300);padding:var(--space-300) var(--space-300);z-index:var(--z-sticky);box-shadow:var(--shadow-primary-lg);border-bottom:2px solid var(--color-white-alpha-20);min-height:80px;overflow:hidden}.global-player-welcome-card:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--color-white-alpha-10) 0%,transparent 70%);animation:welcome-pulse 4s ease-in-out infinite;pointer-events:none}.global-player-welcome-card .welcome-avatar{width:60px;height:60px;border-radius:var(--radius-full);background:var(--color-white-alpha-20);display:flex;align-items:center;justify-content:center;font-size:30px;border:3px solid var(--color-white-alpha-40);-webkit-backdrop-filter:var(--backdrop-blur-md);backdrop-filter:var(--backdrop-blur-md);flex-shrink:0;box-shadow:var(--shadow-8);transition:var(--transition-transform);z-index:var(--z-base)}.global-player-welcome-card:hover .welcome-avatar{transform:scale(1.05) rotate(5deg)}.global-player-welcome-card .welcome-content{flex:1;z-index:var(--z-base);min-width:0}.global-player-welcome-card .welcome-title{font-size:var(--text-xl);font-weight:var(--weight-bold);margin:0 0 var(--space-050) 0;text-shadow:0 2px 8px var(--color-black-alpha-30);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.global-player-welcome-card .welcome-subtitle{font-size:var(--text-sm);margin:0;opacity:.95;font-weight:var(--weight-regular);line-height:var(--line-height-normal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.global-player-welcome-card .hamburger-btn{z-index:10;position:relative;background:var(--color-white-alpha-20);border:2px solid var(--color-white-alpha-30);-webkit-backdrop-filter:var(--backdrop-blur-md);backdrop-filter:var(--backdrop-blur-md);flex-shrink:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.global-player-welcome-card .hamburger-btn:hover{background:var(--color-white-alpha-30);border-color:var(--color-white-alpha-40)}.global-player-welcome-card .hamburger-line{background:var(--color-white)}.top-nav-bar{position:sticky;top:0;left:0;right:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--space-150) var(--space-300);display:flex;align-items:center;justify-content:space-between;z-index:var(--z-sticky);box-shadow:var(--shadow-2);min-height:56px}.nav-logo{display:flex;align-items:center;gap:var(--space-150);font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--color-primary);text-decoration:none}.nav-logo-icon{font-size:var(--text-3xl);color:var(--color-primary)}.nav-logo-text{display:none;font-family:var(--font-display)}.nav-actions{display:flex;align-items:center;gap:var(--space-200)}.hamburger-btn{display:flex;flex-direction:column;gap:var(--space-050);background:none;border:none;cursor:pointer;padding:var(--space-100);border-radius:var(--radius-md);transition:var(--transition-fast);min-width:var(--touch-target);min-height:var(--touch-target);align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.1);user-select:none;-webkit-user-select:none}.hamburger-btn:hover{background:var(--color-blue-alpha-10)}.hamburger-btn:active{transform:scale(.95)}.hamburger-line{width:24px;height:3px;background:var(--color-text-primary);border-radius:var(--radius-sm);transition:var(--transition-all)}.hamburger-btn.active .hamburger-line:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.hamburger-btn.active .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.active .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.mobile-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--color-black-alpha-50);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-modal-backdrop);display:none;opacity:0;transition:opacity var(--transition-normal)}.mobile-menu-overlay.active{display:block;opacity:1}.side-drawer{position:fixed;top:0;right:-100%;width:280px;max-width:85vw;height:100vh;background:var(--color-surface);box-shadow:var(--shadow-24);z-index:var(--z-modal);transition:right var(--transition-normal);display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}.side-drawer.active{right:0}.drawer-header{padding:var(--space-300);background:var(--gradient-primary);color:var(--color-white);border-bottom:2px solid var(--color-white-alpha-20)}.drawer-user-info{display:flex;align-items:center;gap:var(--space-150)}.drawer-avatar{width:50px;height:50px;border-radius:var(--radius-full);background:var(--color-white-alpha-20);display:flex;align-items:center;justify-content:center;font-size:var(--text-2xl);border:2px solid var(--color-white-alpha-30);flex-shrink:0}.drawer-user-details h4{margin:0 0 var(--space-050) 0;font-size:var(--text-base);font-weight:var(--weight-semibold)}.drawer-user-stats{font-size:var(--text-xs);opacity:.9}.drawer-menu{flex:1;padding:var(--space-200) 0}.drawer-menu-item{display:flex;align-items:center;gap:var(--space-200);padding:var(--space-200) var(--space-300);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-fast);border-left:3px solid transparent;position:relative;min-height:var(--touch-target)}.drawer-menu-item:hover{background:var(--color-blue-alpha-10);color:var(--color-primary)}.drawer-menu-item.active{background:var(--color-blue-alpha-10);color:var(--color-primary);border-left-color:var(--color-primary);font-weight:var(--weight-semibold)}.drawer-menu-icon{font-size:var(--text-2xl);width:30px;text-align:center;flex-shrink:0}.drawer-menu-label{flex:1;font-size:var(--text-base)}.drawer-menu-badge{background:var(--color-action);color:var(--color-white);font-size:var(--text-xs);font-weight:var(--weight-semibold);padding:2px var(--space-100);border-radius:var(--radius-full);min-width:20px;text-align:center}.drawer-footer{padding:var(--space-200) var(--space-300);border-top:1px solid var(--color-border);background:var(--color-background)}.drawer-footer-btn{width:100%;padding:var(--space-150);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--space-100);min-height:var(--touch-target)}.drawer-footer-btn:hover{background:var(--color-background);border-color:var(--color-primary);color:var(--color-primary)}.nav-tabs{display:none;background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-100);margin:var(--space-300) 0;gap:var(--space-100);box-shadow:var(--shadow-2);border:1px solid var(--color-border)}.nav-tab{flex:1;min-width:100px;padding:var(--space-150) var(--space-250);text-align:center;border-radius:var(--radius-md);cursor:pointer;color:var(--color-text-secondary);font-weight:var(--weight-medium);transition:var(--transition-fast);font-size:var(--text-sm);white-space:nowrap;background:transparent;border:none}.nav-tab.active{background:var(--gradient-primary);color:var(--color-white);box-shadow:var(--shadow-primary);transform:translateY(-1px)}.nav-tab:hover:not(.active){background:var(--color-blue-alpha-10);color:var(--color-primary)}.mobile-nav{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;justify-content:space-around;padding:var(--space-100) 0 calc(var(--space-100) + env(safe-area-inset-bottom));box-shadow:0 -2px 10px var(--color-black-alpha-10);z-index:var(--z-sticky)}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-050);padding:var(--space-100) var(--space-150);cursor:pointer;color:var(--color-text-light);font-size:var(--text-xs);font-weight:var(--weight-medium);transition:var(--transition-fast);border-radius:var(--radius-lg);min-width:60px;min-height:var(--touch-target);text-align:center;border:none;background:transparent}.mobile-nav-item .nav-icon{font-size:var(--text-2xl);transition:transform var(--transition-fast)}.mobile-nav-item.active{color:var(--color-primary)}.mobile-nav-item.active .nav-icon{transform:scale(1.1)}.mobile-nav-item:active{transform:scale(.95)}.notification-badge{position:absolute;top:var(--space-100);right:var(--space-100);background:var(--color-action);color:var(--color-white);font-size:10px;font-weight:var(--weight-semibold);padding:2px 6px;border-radius:var(--radius-full);min-width:18px;text-align:center}@media (min-width: 768px){.side-drawer{width:320px}.mobile-nav{display:flex}.nav-tabs{display:none}.global-player-welcome-card{padding:var(--space-300);min-height:80px}.global-player-welcome-card .welcome-avatar{width:60px;height:60px;font-size:30px}.global-player-welcome-card .welcome-title{font-size:var(--text-xl)}.global-player-welcome-card .welcome-subtitle{font-size:var(--text-sm)}}@media (min-width: 1024px) and (max-width: 1279px){.mobile-nav,.nav-tabs{display:none}.global-player-welcome-card{padding:var(--space-400) var(--space-400);min-height:90px}.global-player-welcome-card .welcome-avatar{width:70px;height:70px;font-size:35px}.global-player-welcome-card .welcome-title{font-size:var(--text-2xl)}.global-player-welcome-card .welcome-subtitle{font-size:var(--text-base)}.global-player-welcome-card .hamburger-btn{display:flex}}@media (min-width: 1280px){.mobile-nav{display:none}.nav-tabs{display:flex;margin-top:0}.side-drawer,.mobile-menu-overlay{display:none}.global-player-welcome-card{padding:var(--space-400) var(--space-400);min-height:90px}.global-player-welcome-card .welcome-avatar{width:70px;height:70px;font-size:35px}.global-player-welcome-card .welcome-title{font-size:var(--text-2xl)}.global-player-welcome-card .welcome-subtitle{font-size:var(--text-base)}.global-player-welcome-card .hamburger-btn{display:none}}#mainApp{padding-top:0}@media (max-width: 767px){#mainApp{padding-bottom:80px}.global-player-welcome-card{padding:var(--space-250) var(--space-200);min-height:70px;gap:var(--space-200)}.global-player-welcome-card .welcome-avatar{width:50px;height:50px;font-size:25px}.global-player-welcome-card .welcome-title{font-size:var(--text-base)}.global-player-welcome-card .welcome-subtitle{font-size:var(--text-xs)}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.side-drawer.active{animation:slideIn var(--transition-normal) var(--easing-standard)}.mobile-menu-overlay.active{animation:fadeIn var(--transition-normal) ease}.drawer-menu-item:focus-visible,.nav-tab:focus-visible,.mobile-nav-item:focus-visible,.hamburger-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.drawer-menu-item:focus:not(:focus-visible),.nav-tab:focus:not(:focus-visible),.mobile-nav-item:focus:not(:focus-visible),.hamburger-btn:focus:not(:focus-visible){outline:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.drawer-menu-item.highlight{animation:pulse 2s ease-in-out infinite}.side-drawer{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.side-drawer::-webkit-scrollbar{width:6px}.side-drawer::-webkit-scrollbar-track{background:transparent}.side-drawer::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}.side-drawer::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}@media print{.top-nav-bar,.mobile-nav,.side-drawer,.mobile-menu-overlay,.hamburger-btn{display:none!important}}@media (prefers-reduced-motion: reduce){.hamburger-line,.drawer-menu-item,.nav-tab,.mobile-nav-item,.side-drawer,.mobile-menu-overlay{transition:none}.mobile-nav-item.active .nav-icon{transform:none}.drawer-menu-item.highlight{animation:none}}#dashboardTab{display:block;background:var(--color-background);border-radius:0;padding:0;margin:0;min-height:400px;border:none;box-shadow:none}.dashboard-container{display:flex;flex-direction:column;gap:var(--space-400);padding:var(--space-400) var(--space-300);width:100%;box-sizing:border-box;max-width:var(--max-width-2xl);margin:0 auto}[id$=Tab].card{padding-top:var(--space-300)}.dashboard-welcome-section{margin-bottom:var(--space-300)}.player-welcome-card{background:var(--gradient-primary);border-radius:var(--radius-2xl);padding:var(--space-600);color:var(--color-white);display:flex;align-items:center;gap:var(--space-400);box-shadow:var(--shadow-primary-lg);border:none;position:relative;overflow:hidden}.player-welcome-card:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--color-white-alpha-10) 0%,transparent 70%);animation:welcome-pulse 4s ease-in-out infinite}@keyframes welcome-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.welcome-avatar{width:90px;height:90px;border-radius:var(--radius-full);background:var(--color-white-alpha-20);display:flex;align-items:center;justify-content:center;font-size:45px;border:4px solid var(--color-white-alpha-40);-webkit-backdrop-filter:var(--backdrop-blur-md);backdrop-filter:var(--backdrop-blur-md);flex-shrink:0;box-shadow:var(--shadow-8);transition:var(--transition-transform);z-index:var(--z-base)}.player-welcome-card:hover .welcome-avatar{transform:scale(1.05) rotate(5deg)}.welcome-content{flex:1;z-index:var(--z-base)}.welcome-title{font-size:var(--text-5xl);font-weight:var(--weight-bold);margin:0 0 var(--space-200) 0;text-shadow:0 2px 8px var(--color-black-alpha-30);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-tight)}.welcome-subtitle{font-size:var(--text-lg);margin:0;opacity:.95;font-weight:var(--weight-regular);line-height:var(--line-height-normal)}.dashboard-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-300);margin-bottom:var(--space-400)}.stat-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-300);display:flex;align-items:center;gap:var(--space-300);box-shadow:var(--shadow-2);border:2px solid var(--card-accent, var(--color-primary));transition:var(--transition-all);position:relative;overflow:hidden;cursor:pointer}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--card-accent, var(--color-primary));opacity:1;transition:var(--transition-opacity)}.stat-icon{width:60px;height:60px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:var(--text-4xl);flex-shrink:0;background:var(--icon-bg, var(--color-blue-alpha-10));box-shadow:var(--shadow-2);transition:var(--transition-transform)}.stat-content{flex:1;min-width:0}.stat-number{font-size:var(--text-4xl);font-weight:var(--weight-bold);color:var(--color-text-primary);margin:0 0 var(--space-100) 0;line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-tight)}.stat-trend{font-size:var(--text-xs);color:var(--color-text-light);font-weight:var(--weight-medium)}.stat-card.primary{--card-accent: var(--color-primary);--icon-bg: var(--color-blue-alpha-10)}.stat-card.primary .stat-icon{color:var(--color-primary)}.stat-card.secondary{--card-accent: var(--color-secondary);--icon-bg: var(--color-secondary-alpha-10)}.stat-card.secondary .stat-icon{color:var(--color-secondary)}.stat-card.success{--card-accent: var(--color-success);--icon-bg: var(--color-success-alpha-10)}.stat-card.success .stat-icon{color:var(--color-success)}.stat-card.action{--card-accent: var(--color-action);--icon-bg: var(--color-crimson-alpha-10)}.stat-card.action .stat-icon{color:var(--color-action)}.stat-card.warning{--card-accent: var(--color-warning);--icon-bg: var(--color-warning-alpha-10)}.stat-card.warning .stat-icon{color:var(--color-warning-dark)}.dashboard-section{background:var(--color-surface);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-2);border:1px solid var(--color-border);transition:var(--transition-all);margin-bottom:var(--space-300)}.dashboard-section:hover{box-shadow:var(--shadow-4);transform:translateY(-2px)}.section-header{padding:var(--space-300);display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--color-border);background:linear-gradient(to bottom,var(--color-background) 0%,var(--color-surface) 100%)}.section-header h3{margin:0;font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-150);letter-spacing:var(--letter-spacing-tight)}.section-header h3 span{font-size:var(--text-3xl)}.section-controls{display:flex;align-items:center;gap:var(--space-150)}.section-content{padding:var(--space-300)}.games-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--space-300);align-items:start}.game-card{background:var(--color-surface);padding:var(--space-300);border-radius:var(--radius-lg);border:1px solid var(--color-border);position:relative;overflow:hidden;transition:var(--transition-all);cursor:pointer;min-width:0;width:100%;box-sizing:border-box}.game-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--color-whistle);transition:var(--transition-all)}.game-card:hover{background:var(--color-background);border-color:var(--color-primary);transform:translate(4px);box-shadow:var(--shadow-hover)}.game-card:hover:before{width:6px;background:var(--color-primary)}.game-card.live{background:var(--color-crimson-alpha-5);border-color:var(--color-crimson-alpha-20)}.game-card.live:before{background:var(--color-action);animation:live-pulse 2s infinite}@keyframes live-pulse{0%,to{opacity:1;box-shadow:0 0 0 0 var(--color-crimson-alpha-30)}50%{opacity:.7;box-shadow:0 0 0 8px var(--color-crimson-alpha-10)}}.game-card.finished:before{background:var(--color-success)}.game-card.upcoming:before{background:var(--color-primary)}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-250)}.league-badge{font-size:var(--text-xs);font-weight:var(--weight-bold);background:var(--gradient-primary);color:var(--color-white);padding:var(--space-100) var(--space-200);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);box-shadow:var(--shadow-primary-sm)}.game-status{font-size:var(--text-sm);font-weight:var(--weight-semibold);padding:var(--space-100) var(--space-200);border-radius:var(--radius-full);background:var(--color-background);color:var(--color-text-secondary)}.game-status.live{background:var(--color-action);color:var(--color-white);animation:live-pulse 2s infinite;box-shadow:var(--shadow-action)}.game-status.finished{background:var(--color-success);color:var(--color-white);box-shadow:var(--shadow-success)}.game-status.upcoming{background:var(--color-blue-alpha-10);color:var(--color-primary)}.game-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-300);margin-bottom:var(--space-250)}.team{display:flex;align-items:center;gap:var(--space-150)}.team.home{justify-content:flex-start}.team.away{justify-content:flex-end;text-align:right}.team-name{font-weight:var(--weight-semibold);color:var(--color-text-primary);font-size:var(--text-lg)}.score-display{text-align:center;min-width:80px}.score{font-size:var(--text-4xl);font-weight:var(--weight-bold);color:var(--color-primary);background:var(--color-background);padding:var(--space-150) var(--space-250);border-radius:var(--radius-lg);display:inline-block;min-width:70px;text-align:center;box-shadow:var(--shadow-inner)}.score.vs{background:var(--color-background);color:var(--color-text-secondary);font-size:var(--text-xl);font-weight:var(--weight-semibold)}.game-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-250);padding-top:var(--space-250);border-top:1px solid var(--color-border)}.venue-info{font-size:var(--text-sm);color:var(--color-text-light);display:flex;align-items:center;gap:var(--space-100)}.view-details-btn{background:var(--color-primary);color:var(--color-white);border:none;padding:var(--space-150) var(--space-250);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;transition:var(--transition-all);display:flex;align-items:center;gap:var(--space-150);box-shadow:var(--shadow-primary-sm)}.view-details-btn:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-primary-md)}.view-details-btn:active{transform:translateY(0)}.refresh-btn{background:var(--color-background);border:1px solid var(--color-border);font-size:var(--text-xl);cursor:pointer;padding:var(--space-150) var(--space-200);border-radius:var(--radius-md);transition:var(--transition-all);color:var(--color-text-secondary);min-width:var(--touch-target);min-height:var(--touch-target);display:flex;align-items:center;justify-content:center}.refresh-btn:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white);transform:rotate(180deg);box-shadow:var(--shadow-primary-sm)}.refresh-btn:active{transform:rotate(180deg) scale(.95)}.scores-sections{display:flex;flex-direction:column;gap:var(--space-400)}.scores-section{background:transparent;border-radius:0;padding:0;box-shadow:none;border:none}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-250);padding-bottom:var(--space-200);border-bottom:2px solid var(--color-border)}.section-title h4{margin:0;font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-150)}.games-count{font-size:var(--text-sm);color:var(--color-text-secondary);background:var(--color-background);padding:var(--space-100) var(--space-200);border-radius:var(--radius-full);font-weight:var(--weight-semibold)}.no-games{text-align:center;padding:var(--space-800) var(--space-400);color:var(--color-text-light);display:flex;flex-direction:column;align-items:center;gap:var(--space-250)}.no-games-icon,.empty-icon{font-size:72px;opacity:.4}.no-games p{font-size:var(--text-lg);font-weight:var(--weight-medium)}.loading,.loading-state{text-align:center;padding:var(--space-400);color:var(--color-text-light);font-size:var(--text-base)}.error-state{text-align:center;padding:var(--space-400);color:var(--color-error);display:flex;flex-direction:column;align-items:center;gap:var(--space-250)}.error-icon{font-size:48px}.navigation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-250)}.nav-quick-btn{background:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--radius-lg);padding:var(--space-300);display:flex;align-items:center;gap:var(--space-250);text-align:left;cursor:pointer;transition:var(--transition-all);text-decoration:none;color:inherit}.nav-btn-icon{width:50px;height:50px;border-radius:var(--radius-lg);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:var(--text-3xl);color:var(--color-white);flex-shrink:0;box-shadow:var(--shadow-primary-sm)}.nav-btn-content{flex:1}.nav-btn-title{font-weight:var(--weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-100);font-size:var(--text-base)}.nav-btn-desc{font-size:var(--text-sm);color:var(--color-text-light)}@media (max-width: 768px){.dashboard-container{padding:var(--space-250) var(--space-200);gap:var(--space-300)}.player-welcome-card{padding:var(--space-300);gap:var(--space-250);flex-direction:column;text-align:center}.welcome-avatar{width:70px;height:70px;font-size:35px}.welcome-title{font-size:var(--text-3xl)}.welcome-subtitle{font-size:var(--text-base)}.dashboard-stats-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-250)}.stat-card{padding:var(--space-300)}.stat-icon{width:50px;height:50px;font-size:var(--text-3xl)}.stat-number{font-size:var(--text-3xl)}.section-header,.section-content{padding:var(--space-250)}.games-container{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--space-250)}#highlightsContent{grid-template-columns:repeat(2,1fr);gap:var(--space-250)}}@media (max-width: 480px){.dashboard-stats-grid{grid-template-columns:1fr}.game-teams{grid-template-columns:1fr;gap:var(--space-200);text-align:center}.team{justify-content:center!important;text-align:center}.team.away{text-align:center}.score-display{order:-1}.team.home{order:1}.team.away{order:2}.score{font-size:var(--text-3xl);padding:var(--space-100) var(--space-200)}.navigation-grid{grid-template-columns:1fr}.games-container,#highlightsContent{grid-template-columns:1fr;gap:var(--space-250)}.highlight-thumbnail{height:220px}}.loading-details{text-align:center;padding:var(--space-600) var(--space-400);background:var(--color-background);border-radius:var(--radius-lg);margin:var(--space-400) 0}.loading-spinner{display:flex;justify-content:center;align-items:center;margin-bottom:var(--space-300)}.loading-text{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:var(--space-200) 0 var(--space-100) 0}.loading-subtext{font-size:var(--font-size-sm);color:var(--text-light);margin:0}.detailed-data-error{background:var(--color-warning-bg);border:1px solid var(--color-warning);border-radius:var(--radius-md);padding:var(--space-400);margin:var(--space-400) 0;text-align:center}.error-message{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-warning-dark);margin:0 0 var(--space-100) 0}.error-hint{font-size:var(--font-size-sm);color:var(--text-light);margin:0}.match-detail-modal .modal-body{max-height:70vh;overflow-y:auto;padding:var(--space-400)}.match-detail-modal .modal-content{max-width:900px;width:90vw}.match-details.with-details{animation:fadeIn .3s ease-in}.halftime-score{font-size:var(--font-size-sm);color:var(--text-light);margin-top:var(--space-100);font-weight:var(--font-weight-medium)}.event-comments{font-size:var(--font-size-xs);color:var(--text-light);font-style:italic;margin-top:var(--space-50)}.event-team-name{font-size:var(--font-size-xs);color:var(--color-primary);font-weight:var(--font-weight-semibold);margin-top:var(--space-50)}.assist{color:var(--color-success);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-left:var(--space-100)}.event-detail{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-50)}.stats-comparison{display:flex;flex-direction:column;gap:var(--space-300)}.stat-row{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;gap:var(--space-200);padding:var(--space-200) 0;border-bottom:1px solid var(--color-border-light)}.stat-row:last-child{border-bottom:none}.stat-value{font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);text-align:center}.stat-value.home{color:var(--color-primary)}.stat-value.away{color:var(--color-secondary)}.stat-info{display:flex;flex-direction:column;gap:var(--space-100)}.stat-bar{display:flex;height:8px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden}.stat-bar-fill{height:100%;transition:width .3s ease}.stat-bar-fill.home{background:var(--color-primary)}.stat-bar-fill.away{background:var(--color-secondary)}.retry-details-btn{background:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--radius-md);padding:var(--space-200) var(--space-400);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;margin-top:var(--space-300);transition:all .2s ease;display:inline-flex;align-items:center;gap:var(--space-100)}.retry-details-btn:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.retry-details-btn:active{transform:translateY(0)}.retry-details-btn:disabled{background:var(--color-border);color:var(--text-light);cursor:not-allowed;transform:none}#highlightsContent{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-300)}.highlight-item{background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);transition:var(--transition-all);cursor:pointer;display:flex;flex-direction:column}.highlight-item:hover{border-color:var(--color-primary);transform:translateY(-4px);box-shadow:var(--shadow-hover)}.highlight-thumbnail{width:100%;height:240px;background:var(--color-background);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.highlight-thumbnail img.thumbnail-image{width:100%;height:100%;object-fit:cover}.placeholder-thumbnail{font-size:48px;color:var(--color-text-light);display:flex;align-items:center;justify-content:center;width:100%;height:100%}.video-duration{position:absolute;bottom:var(--space-150);right:var(--space-150);background:var(--color-black-alpha-80);color:var(--color-white);padding:var(--space-100) var(--space-150);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--weight-semibold)}.highlight-info{padding:var(--space-250);display:flex;flex-direction:column;gap:var(--space-100)}.highlight-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text-primary);line-height:var(--line-height-snug);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}.practice-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}.category-card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-lg);border:var(--border-width) solid var(--color-border);transition:var(--transition-base);cursor:pointer;position:relative;overflow:hidden}.category-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transform:scaleX(0);transform-origin:left;transition:transform var(--transition-base)}.category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--color-primary)}.category-card:hover:before{transform:scaleX(1)}.category-icon{width:60px;height:60px;background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-h2);margin-bottom:var(--space-md);box-shadow:var(--shadow-md)}.category-card h3{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-xs)}.category-card p{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--space-md)}.category-stats{display:flex;gap:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--color-border-light)}.category-stat{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.category-stat-icon{font-size:var(--font-size-sm);color:var(--color-accent)}.drill-selection{margin-bottom:var(--space-xl)}.drill-selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.drill-selection-header h2{font-size:var(--font-size-h2);font-weight:var(--font-weight-semibold);color:var(--color-text)}.drill-filters{display:flex;gap:var(--space-xs);flex-wrap:wrap}.filter-btn{padding:var(--space-2xs) var(--space-sm);background:var(--color-background-subtle);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-base)}.filter-btn:hover{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.filter-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.drill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-md)}.drill-card{background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;border:var(--border-width) solid var(--color-border);transition:var(--transition-base);cursor:pointer}.drill-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}.drill-thumbnail{width:100%;height:180px;background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent-light));display:flex;align-items:center;justify-content:center;font-size:48px;position:relative;overflow:hidden}.drill-thumbnail:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.3) 100%)}.drill-difficulty{position:absolute;top:var(--space-sm);right:var(--space-sm);padding:var(--space-3xs) var(--space-xs);background:var(--color-white);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);z-index:1}.drill-difficulty.beginner{color:var(--color-success)}.drill-difficulty.intermediate{color:var(--color-warning)}.drill-difficulty.advanced{color:var(--color-danger)}.drill-content{padding:var(--space-md)}.drill-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-xs)}.drill-description{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--space-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.drill-meta{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-sm);border-top:1px solid var(--color-border-light)}.drill-duration,.drill-points{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.drill-duration svg,.drill-points svg{width:16px;height:16px;color:var(--color-accent)}.active-practice{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-xl);margin-bottom:var(--space-xl);box-shadow:var(--shadow-xl);border:2px solid var(--color-primary)}.practice-timer{text-align:center;margin-bottom:var(--space-xl)}.timer-display{font-size:72px;font-weight:var(--font-weight-bold);color:var(--color-primary);font-family:var(--font-mono);line-height:1;margin-bottom:var(--space-sm);text-shadow:0 2px 8px rgba(30,64,175,.2)}.timer-label{font-size:var(--font-size-base);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:1px}.practice-controls{display:flex;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-xl)}.control-btn{padding:var(--space-sm) var(--space-xl);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);border:none;cursor:pointer;transition:var(--transition-base);display:flex;align-items:center;gap:var(--space-xs)}.control-btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:var(--color-white);box-shadow:var(--shadow-md)}.control-btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.control-btn-secondary{background:var(--color-background-subtle);color:var(--color-text);border:var(--border-width) solid var(--color-border)}.control-btn-secondary:hover{background:var(--color-background);border-color:var(--color-primary)}.control-btn-danger{background:var(--color-danger);color:var(--color-white)}.control-btn-danger:hover{background:var(--color-danger-dark);transform:translateY(-2px)}.practice-progress{margin-bottom:var(--space-xl)}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.progress-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.progress-percentage{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}.progress-bar-container{height:12px;background:var(--color-background-subtle);border-radius:var(--radius-full);overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));border-radius:var(--radius-full);transition:width .5s ease;position:relative;overflow:hidden}.progress-bar-fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}.practice-select{width:100%;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-base);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);transition:var(--transition-base);cursor:pointer}.practice-select:hover{border-color:var(--color-primary)}.practice-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #1e40af1a}.time-selector-wrapper{display:flex;flex-direction:column;gap:var(--space-sm)}.side-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);cursor:pointer;transition:var(--transition-base);font-weight:var(--font-weight-medium)}.side-btn:hover{border-color:var(--color-primary);background:var(--color-primary-light);transform:translateY(-2px);box-shadow:var(--shadow-md)}.side-btn.active{border-color:var(--color-primary);background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:var(--color-white);box-shadow:var(--shadow-md)}.side-btn-icon{font-size:var(--font-size-lg)}.side-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-sm);margin-top:var(--space-xs)}.result-input{width:100%;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-lg);text-align:center;border:2px solid var(--color-border);border-radius:var(--radius-md);transition:var(--transition-base)}.result-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #1e40af1a}.drill-instructions{background:var(--color-background-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg);margin-top:var(--space-md)}.drill-instructions h3{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-xs)}.instruction-list{list-style:none;padding:0;margin:0}.instruction-item{display:flex;gap:var(--space-sm);margin-bottom:var(--space-md);padding:var(--space-sm);background:var(--color-white);border-radius:var(--radius-md);transition:var(--transition-base)}.instruction-item:hover{box-shadow:var(--shadow-sm);transform:translate(4px)}.instruction-number{min-width:28px;height:28px;background:var(--color-primary);color:var(--color-white);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);flex-shrink:0}.instruction-text{font-size:var(--font-size-base);color:var(--color-text);line-height:var(--line-height-relaxed)}.practice-stats-live{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-sm);margin-top:var(--space-lg)}.live-stat{background:linear-gradient(135deg,var(--color-primary-light),var(--color-background-subtle));border-radius:var(--radius-lg);padding:var(--space-md);text-align:center;border:var(--border-width) solid var(--color-border-light)}.live-stat-value{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);color:var(--color-primary);font-family:var(--font-mono);margin-bottom:var(--space-3xs)}.live-stat-label{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;font-weight:var(--font-weight-medium)}.practice-completion{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-2xl);text-align:center;box-shadow:var(--shadow-xl);animation:fadeInUp .5s ease}.completion-icon{width:80px;height:80px;margin:0 auto var(--space-lg);background:linear-gradient(135deg,var(--color-success),var(--color-success-dark));border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--color-white);box-shadow:var(--shadow-lg);animation:scaleIn .5s ease .2s both}.completion-title{font-size:var(--font-size-h1);font-weight:var(--font-weight-bold);color:var(--color-text);margin-bottom:var(--space-xs)}.completion-message{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--space-xl)}.completion-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl);padding:var(--space-lg);background:var(--color-background-subtle);border-radius:var(--radius-lg)}.completion-stat{text-align:center}.completion-stat-value{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);color:var(--color-primary);margin-bottom:var(--space-3xs)}.completion-stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.completion-actions{display:flex;justify-content:center;gap:var(--space-md)}.saved-plans{margin-top:var(--space-xl)}.saved-plans-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.saved-plans-header h2{font-size:var(--font-size-h2);font-weight:var(--font-weight-semibold);color:var(--color-text)}.plan-list{display:grid;gap:var(--space-sm)}.plan-item{background:var(--color-white);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md);display:flex;justify-content:space-between;align-items:center;transition:var(--transition-base);cursor:pointer}.plan-item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translate(4px)}.plan-info h4{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-3xs)}.plan-meta{font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.plan-actions{display:flex;gap:var(--space-xs)}.plan-action-btn{padding:var(--space-2xs) var(--space-sm);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background-subtle);cursor:pointer;transition:var(--transition-base);font-size:var(--font-size-sm)}.plan-action-btn:hover{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.practice-empty-state{text-align:center;padding:var(--space-2xl) var(--space-lg);background:var(--color-background-subtle);border-radius:var(--radius-xl);margin:var(--space-xl) 0}.empty-state-icon{width:80px;height:80px;margin:0 auto var(--space-md);background:var(--color-background);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:40px;opacity:.5}.empty-state-title{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-xs)}.empty-state-message{font-size:var(--font-size-base);color:var(--color-text-secondary);max-width:400px;margin:0 auto var(--space-lg)}@media (max-width: 768px){.practice-header{padding:var(--space-lg) var(--space-md)}.practice-categories,.drill-grid{grid-template-columns:1fr}.timer-display{font-size:56px}.practice-controls{flex-direction:column}.control-btn{width:100%;justify-content:center}.completion-stats{grid-template-columns:1fr}.completion-actions{flex-direction:column;width:100%}.completion-actions .control-btn{width:100%}.plan-item{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.plan-actions{width:100%;justify-content:flex-end}}@media (max-width: 480px){.practice-header h1{font-size:var(--font-size-h2)}.timer-display{font-size:48px}.drill-filters{width:100%}.filter-btn{flex:1;text-align:center}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-summary{background:var(--gradient-card-subtle);border-radius:var(--radius-xl);padding:var(--space-300);margin-bottom:var(--space-400);box-shadow:var(--shadow-card);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-400)}@media (max-width: 768px){.progress-summary{grid-template-columns:1fr;gap:1.5rem}}.progress-section h4{color:var(--color-primary);margin-bottom:1rem;font-size:1.25rem;display:flex;align-items:center;gap:.5rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:1rem}.stat-card{background:var(--color-white);border:2px solid var(--color-primary-alpha-10);border-radius:var(--radius-lg);padding:var(--space-200);text-align:center;transition:var(--transition-all)}.stat-card:hover{transform:translateY(-2px);border-color:var(--color-secondary);box-shadow:var(--shadow-8)}.stat-card .stat-number{font-size:2rem;font-weight:700;color:var(--color-primary);margin-bottom:.25rem}.stat-card .stat-label{font-size:.875rem;color:var(--color-text-light);font-weight:500}.stat-card.streak-current{border-color:var(--color-secondary);background:linear-gradient(135deg,#fff9e6,#fff)}.stat-card.streak-current:hover{border-color:var(--color-secondary);box-shadow:0 8px 25px #f59e0b40}.stat-card.streak-current .stat-number{color:var(--color-secondary)}.stat-card.streak-best{border-color:#10b981;background:linear-gradient(135deg,#f0fdf4,#fff)}.stat-card.streak-best:hover{border-color:#10b981;box-shadow:0 8px 25px #10b98140}.stat-card.streak-best .stat-number{color:#10b981}.recent-sessions{margin-bottom:2rem}.recent-sessions h4{color:var(--color-primary);margin-bottom:1rem;font-size:1.25rem}.sessions-table-container{background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);border:2px solid var(--color-primary-alpha-10)}.sessions-empty-message{text-align:center;color:var(--color-text-light);padding:2rem}.progress-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;gap:1rem}.progress-loading .spinner{width:40px;height:40px;border:4px solid var(--color-primary-alpha-10);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}.progress-loading-text{color:var(--color-text-light);font-size:.95rem}.chart-loading{position:relative;min-height:200px}.chart-loading:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffffe6;display:flex;align-items:center;justify-content:center;border-radius:16px;z-index:10}.chart-loading:after{content:"⚽";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;animation:bounce 1s ease-in-out infinite;z-index:11}@keyframes bounce{0%,to{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-10px)}}.empty-state-container{text-align:center;padding:3rem 2rem;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:16px;border:2px dashed var(--color-primary)}.empty-state-icon{font-size:3rem;margin-bottom:1rem;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.empty-state-title{color:var(--color-primary);font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.empty-state-message{color:var(--color-text-light);margin-bottom:1.5rem}.empty-state-cta{display:inline-block;padding:.75rem 1.5rem;background:var(--accent-gradient);color:#fff;border-radius:12px;text-decoration:none;font-weight:600;transition:all .3s ease;cursor:pointer;border:none}.empty-state-cta:hover{transform:translateY(-2px);box-shadow:0 4px 12px #1e40af4d}.sign-out-container{text-align:center;margin-top:30px}.sessions-table{width:100%;border-collapse:collapse}.sessions-table th{background:var(--accent-gradient);color:#fff;padding:1rem .75rem;text-align:left;font-weight:600;font-size:.875rem}.sessions-table td{padding:.75rem;border-bottom:1px solid #f0f0f0}.sessions-table .session-row:hover{background:var(--color-primary-alpha-5)}.sessions-table .session-row:last-child td{border-bottom:none}.date-cell{font-weight:600;color:var(--color-primary)}.drill-cell{font-weight:500}.minutes-cell{color:var(--color-secondary);font-weight:600}.result-cell{color:var(--color-success);font-weight:600}.progress-charts{margin-top:2rem}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.chart-container{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-300);box-shadow:var(--shadow-card);border:2px solid var(--color-primary-alpha-10);transition:var(--transition-all)}.chart-container:hover{transform:translateY(-2px);box-shadow:var(--shadow-8)}.chart-header h4{color:var(--color-primary);margin-bottom:1rem;font-size:1.1rem;text-align:center}.bar-chart{display:flex;flex-direction:column;gap:.75rem}.bar-item{display:flex;flex-direction:column;gap:.25rem}.bar-label{font-size:.875rem;font-weight:500;color:var(--color-text-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-container{position:relative;background:#f0f0f0;border-radius:var(--radius-md);height:24px;display:flex;align-items:center}.bar-fill{background:var(--accent-gradient);height:100%;border-radius:var(--radius-md);transition:width .6s ease;min-width:2px}.bar-value{position:absolute;right:8px;font-size:.75rem;font-weight:600;color:var(--color-text-dark)}.line-chart{height:150px;position:relative}.chart-grid{position:relative;height:120px;border-bottom:2px solid var(--color-border);border-left:2px solid var(--color-border)}.chart-point{position:absolute;width:8px;height:8px}.point-marker{width:8px;height:8px;background:var(--color-secondary);border-radius:var(--radius-full);border:2px solid white;box-shadow:0 2px 4px #0003;cursor:pointer;transition:var(--transition-all)}.point-marker:hover{transform:scale(1.5);background:var(--color-primary)}.chart-labels{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.75rem;color:var(--color-text-light)}.line-chart-enhanced{height:200px;position:relative}.trend-chart-svg{width:100%;height:140px;margin-bottom:.5rem}.chart-points-overlay{position:absolute;top:0;left:0;width:100%;height:140px}.chart-point-enhanced{position:absolute;width:12px;height:12px;transform:translate(-50%,50%)}.point-marker-enhanced{width:12px;height:12px;background:var(--color-primary);border-radius:var(--radius-full);border:3px solid var(--color-white);box-shadow:var(--shadow-primary-sm);cursor:pointer;transition:var(--transition-all)}.point-marker-enhanced:hover{transform:scale(1.3);background:var(--color-secondary);box-shadow:var(--shadow-primary)}.point-tooltip{position:absolute;bottom:120%;left:50%;transform:translate(-50%);background:var(--color-primary);color:var(--color-white);padding:var(--space-100) var(--space-150);border-radius:var(--radius-md);font-size:var(--text-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:var(--transition-opacity);z-index:var(--z-dropdown)}.point-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--color-primary)}.chart-point-enhanced:hover .point-tooltip{opacity:1}.tooltip-value{color:var(--color-secondary);font-weight:700;font-size:.875rem}.chart-legend{display:flex;justify-content:center;gap:1.5rem;margin-top:.75rem;font-size:.75rem}.legend-item{display:flex;align-items:center;gap:.5rem}.legend-line{width:24px;height:3px}.legend-line.data-line{background:var(--color-primary)}.legend-line.trend-line{background:var(--color-secondary);opacity:.7;border-top:2px dotted var(--color-secondary);height:0}.gauge-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.streak-gauge{position:relative;width:120px;height:120px}.gauge-track,.gauge-fill{position:absolute;top:0;left:0;width:120px;height:120px;border-radius:var(--radius-full);border:8px solid;border-color:var(--color-border);border-top-color:transparent;border-right-color:transparent;transform:rotate(-90deg)}.gauge-fill{border-color:transparent;border-top-color:var(--color-secondary);border-right-color:var(--color-secondary);stroke-dasharray:0,251;transition:stroke-dasharray 1s ease}.gauge-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.gauge-value{display:block;font-size:1.5rem;font-weight:700;color:var(--color-primary)}.gauge-label{display:block;font-size:.75rem;color:var(--color-text-light)}.streak-stats{display:flex;gap:2rem}.streak-stat{text-align:center}.stat-value{display:block;font-size:1.25rem;font-weight:700}.stat-value.current{color:var(--color-secondary)}.stat-value.best{color:var(--color-primary)}.weekly-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem}.calendar-day{aspect-ratio:1;border:2px solid var(--color-border);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;transition:var(--transition-all);background:#fff}.calendar-day.today{border-color:var(--color-primary);background:var(--color-primary-alpha-5)}.calendar-day.practiced{background:var(--accent-gradient);color:#fff;border-color:var(--color-secondary)}.calendar-day.future{opacity:.4}.day-name{font-size:.75rem;font-weight:600}.day-number{font-size:1rem;font-weight:700}.day-indicator{font-size:.875rem;height:1.125rem;display:flex;align-items:center}.progress-filters{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-200) var(--space-300);margin-bottom:var(--space-300);box-shadow:var(--shadow-2);border:2px solid var(--color-primary-alpha-10)}.filter-section{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.filter-label{font-weight:600;color:var(--color-primary);font-size:.9rem}.filter-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.filter-btn{padding:.5rem 1rem;border:2px solid var(--color-border);background:#fff;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;color:var(--color-text-dark);cursor:pointer;transition:var(--transition-all)}.filter-btn:hover{border-color:var(--color-primary);background:var(--color-primary-alpha-5)}.filter-btn.active{background:var(--accent-gradient);color:#fff;border-color:var(--color-secondary)}.drill-filter-select{padding:.5rem 1rem;border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:.875rem;background:#fff;cursor:pointer;transition:var(--transition-all)}.drill-filter-select:focus{outline:none;border-color:var(--color-primary)}.leaderboard-filters{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-lg);display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:center;border:var(--border-width) solid var(--color-border)}.filter-group{display:flex;gap:var(--space-xs);align-items:center}.filter-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}.filter-button{padding:var(--space-2xs) var(--space-md);background:var(--color-background-subtle);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-base)}.filter-button:hover{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.filter-button.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white);box-shadow:var(--shadow-sm)}.podium-container{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-xl);margin-bottom:var(--space-xl);border:var(--border-width) solid var(--color-border)}.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);align-items:flex-end;margin-bottom:var(--space-xl)}.podium-place{text-align:center;position:relative}.podium-place.first{order:2}.podium-place.second{order:1}.podium-place.third{order:3}.podium-avatar{width:100px;height:100px;margin:0 auto var(--space-md);border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));display:flex;align-items:center;justify-content:center;font-size:var(--font-size-h1);font-weight:var(--font-weight-bold);color:var(--color-white);position:relative;box-shadow:var(--shadow-lg)}.podium-place.first .podium-avatar{width:120px;height:120px;background:linear-gradient(135deg,gold,orange);box-shadow:0 0 0 5px #ffd70033,var(--shadow-xl)}.podium-place.second .podium-avatar{width:100px;height:100px;background:linear-gradient(135deg,silver,#999)}.podium-place.third .podium-avatar{width:100px;height:100px;background:linear-gradient(135deg,#cd7f32,#8b4513)}.podium-rank{position:absolute;top:-8px;right:-8px;width:36px;height:36px;background:var(--color-white);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);box-shadow:var(--shadow-md)}.podium-name{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text);margin-bottom:var(--space-2xs)}.podium-place.first .podium-name{font-size:var(--font-size-h3)}.podium-score{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);color:var(--color-accent);font-family:var(--font-mono);margin-bottom:var(--space-xs)}.podium-stats{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.podium-platform{background:linear-gradient(180deg,var(--color-background-subtle),var(--color-background));border-radius:var(--radius-md) var(--radius-md) 0 0;padding:var(--space-md);min-height:80px;display:flex;flex-direction:column;justify-content:flex-end;border:var(--border-width) solid var(--color-border)}.podium-place.first .podium-platform{min-height:120px;background:linear-gradient(180deg,#ffd70020,#ffa50020);border-color:gold}.podium-place.second .podium-platform{min-height:100px;background:linear-gradient(180deg,#c0c0c020,#99999920);border-color:silver}.podium-place.third .podium-platform{min-height:80px;background:linear-gradient(180deg,#cd7f3220,#8b451320);border-color:#cd7f32}.user-rank-highlight{background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent-light));border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg);border:2px solid var(--color-primary)}.user-rank-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.user-rank-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text)}.user-rank-badge{background:var(--color-primary);color:var(--color-white);padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold)}.user-rank-content{display:flex;align-items:center;gap:var(--space-md)}.user-rank-avatar{width:60px;height:60px;border-radius:var(--radius-full);background:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);color:var(--color-white);flex-shrink:0}.user-rank-info{flex:1}.user-rank-name{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text);margin-bottom:var(--space-3xs)}.user-rank-stats{display:flex;gap:var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.rankings-container{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-xl);border:var(--border-width) solid var(--color-border)}.rankings-list{display:grid;gap:var(--space-xs)}.rank-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-background-subtle);border-radius:var(--radius-lg);border:var(--border-width) solid var(--color-border);transition:var(--transition-base)}.rank-item:hover{background:var(--color-white);border-color:var(--color-primary);transform:translate(4px);box-shadow:var(--shadow-md)}.rank-item.current-user{background:var(--color-primary-light);border-color:var(--color-primary);border-width:2px}.rank-number{width:40px;height:40px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:var(--color-white);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-base);font-weight:var(--font-weight-bold);flex-shrink:0}.rank-avatar{width:48px;height:48px;border-radius:var(--radius-full);background:var(--color-primary-light);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);color:var(--color-primary);flex-shrink:0}.rank-info{flex:1;min-width:0}.rank-name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-meta{display:flex;gap:var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.rank-score{font-size:var(--font-size-h3);font-weight:var(--font-weight-bold);color:var(--color-accent);font-family:var(--font-mono);flex-shrink:0}.rank-change{display:flex;align-items:center;gap:var(--space-3xs);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--space-3xs) var(--space-xs);border-radius:var(--radius-sm);flex-shrink:0}.rank-change.up{background:var(--color-success-light);color:var(--color-success)}.rank-change.down{background:var(--color-danger-light);color:var(--color-danger)}.rank-change.same{background:var(--color-background);color:var(--color-text-tertiary)}.load-more-container{text-align:center;padding:var(--space-lg) 0}.load-more-btn{padding:var(--space-sm) var(--space-xl);background:var(--color-background-subtle);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text);cursor:pointer;transition:var(--transition-base)}.load-more-btn:hover{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.leaderboard-empty{text-align:center;padding:var(--space-2xl) var(--space-lg);background:var(--color-background-subtle);border-radius:var(--radius-xl)}.empty-icon{width:80px;height:80px;margin:0 auto var(--space-md);background:var(--color-background);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:40px;opacity:.5}.empty-title{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-xs)}.empty-message{font-size:var(--font-size-base);color:var(--color-text-secondary);max-width:400px;margin:0 auto}#leaderboardContent{min-height:400px;transition:opacity .3s ease}.leaderboard-empty{animation:fadeIn .3s ease}.podium-container,.user-rank-highlight,.rankings-container{animation:slideUp .4s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.rank-item{animation:slideIn .3s ease forwards;opacity:0}.rank-item:nth-child(1){animation-delay:.05s}.rank-item:nth-child(2){animation-delay:.1s}.rank-item:nth-child(3){animation-delay:.15s}.rank-item:nth-child(4){animation-delay:.2s}.rank-item:nth-child(5){animation-delay:.25s}.rank-item:nth-child(n+6){animation-delay:.3s}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.podium-place{animation:popIn .5s cubic-bezier(.68,-.55,.265,1.55);animation-fill-mode:both}.podium-place.first{animation-delay:.2s}.podium-place.second{animation-delay:.1s}.podium-place.third{animation-delay:.3s}@keyframes popIn{0%{opacity:0;transform:scale(.5) translateY(50px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width: 768px){.podium{grid-template-columns:1fr}.podium-place{order:initial!important}.podium-place.first .podium-avatar{width:100px;height:100px}.podium-platform{min-height:auto!important}.leaderboard-filters{flex-direction:column;align-items:stretch}.filter-group{width:100%;justify-content:space-between}.rank-meta{flex-direction:column;gap:var(--space-3xs)}.rank-item{flex-wrap:wrap}.rank-score{font-size:var(--font-size-lg)}}@media (max-width: 480px){.leaderboard-header:before{font-size:140px}.user-rank-content{flex-direction:column;text-align:center}.user-rank-stats{justify-content:center}.rank-number{width:32px;height:32px;font-size:var(--font-size-sm)}.rank-avatar{width:40px;height:40px}}.live-scores-widget{background:var(--color-primary);border-radius:12px;padding:20px;margin:20px 0;box-shadow:0 4px 20px #0000001a;color:#fff;max-width:500px}.widget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:10px}.widget-header h3{margin:0;font-size:1.2rem;font-weight:600}.live-indicator{background:#f44;color:#fff;padding:4px 8px;border-radius:4px;font-size:.8rem;font-weight:700}.widget-content{margin:15px 0}.widget-match{background:#ffffff1a;border-radius:8px;padding:12px;margin-bottom:8px;transition:all .3s ease}.widget-match:hover{background:#ffffff26;transform:translateY(-1px)}.widget-match.live{border-left:4px solid #ff4444;animation:liveBorder 3s infinite}@keyframes liveBorder{0%{border-left-color:#f44}50%{border-left-color:#f66}to{border-left-color:#f44}}.match-teams{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600}.match-teams .score{background:#fff3;padding:4px 12px;border-radius:20px;font-size:.9rem;min-width:50px;text-align:center}.match-info{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;opacity:.9}.match-info .league{background:#ffffff26;padding:2px 8px;border-radius:12px}.match-info .status{font-weight:500}.widget-cta{margin-top:15px;text-align:center}.widget-cta button{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:500;transition:all .3s ease}.widget-cta button:hover{background:#ffffff4d;transform:translateY(-1px)}.widget-footer{text-align:center;opacity:.7;font-size:.8rem;border-top:1px solid rgba(255,255,255,.1);padding-top:10px;margin-top:15px}.no-matches,.error{text-align:center;padding:20px;opacity:.8}.no-matches p{margin:0 0 5px;font-size:1rem}.error{color:#ff6b6b}@media (max-width: 768px){.live-scores-widget{margin:15px 0;padding:15px}.widget-header h3{font-size:1.1rem}.match-teams{flex-direction:column;align-items:center;gap:8px;font-size:.95rem}.match-teams .home,.match-teams .away{text-align:center;width:100%}.match-teams .score{font-size:1.1rem;padding:6px 16px;min-width:60px}}.ai-coach-section{background:var(--gradient-primary);color:var(--color-white);border-radius:var(--radius-2xl);padding:var(--space-400);margin:var(--space-400) 0;box-shadow:var(--shadow-primary);border:2px solid var(--color-secondary-alpha-20)}.coach-header{text-align:center;margin-bottom:var(--space-400)}.coach-avatar{width:100px;height:100px;border-radius:var(--radius-full);background:var(--color-secondary-alpha-20);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-5xl);margin:0 auto var(--space-300);border:3px solid var(--color-secondary);transition:var(--transition-transform)}.coach-avatar:hover{transform:scale(1.05)}.coach-name{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin-bottom:var(--space-150)}.coach-subtitle{opacity:var(--opacity-90);font-size:var(--text-base)}.chat-container{background:var(--color-white-alpha-10);border-radius:var(--radius-xl);padding:var(--space-300);margin:var(--space-300) 0;max-height:400px;overflow-y:auto;border:1px solid var(--color-white-alpha-20);scrollbar-width:thin;scrollbar-color:var(--color-secondary-alpha-20) transparent}.chat-container::-webkit-scrollbar{width:6px}.chat-container::-webkit-scrollbar-track{background:transparent}.chat-container::-webkit-scrollbar-thumb{background:var(--color-secondary-alpha-20);border-radius:var(--radius-sm)}.chat-container::-webkit-scrollbar-thumb:hover{background:var(--color-secondary-alpha-20);opacity:var(--opacity-80)}.chat-message{margin:var(--space-200) 0;padding:var(--space-200);border-radius:var(--radius-lg);animation:fadeIn .5s ease-in;line-height:var(--line-height-relaxed)}.chat-message.user{background:var(--color-secondary-alpha-20);margin-left:var(--space-300);text-align:right;border-left:4px solid var(--color-secondary)}.chat-message.coach{background:var(--color-white-alpha-10);margin-right:var(--space-400);border-left:4px solid var(--color-secondary);position:relative}.chat-message-timestamp{font-size:var(--text-xs);opacity:var(--opacity-60);margin-top:var(--space-050);font-style:italic}.chat-message-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-100);gap:var(--space-100)}.copy-message-btn{padding:var(--space-050) var(--space-100);background:var(--color-white-alpha-10);color:var(--color-white);border:1px solid var(--color-white-alpha-20);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-xs);transition:var(--transition-all);opacity:.7}.copy-message-btn:hover{background:var(--color-white-alpha-20);opacity:1}.ai-indicator{font-size:var(--text-xs);opacity:var(--opacity-50);padding:var(--space-050) var(--space-100);border-radius:var(--radius-sm);background:var(--color-white-alpha-10);display:inline-flex;align-items:center;gap:var(--space-050)}.ai-indicator.openai{color:var(--color-success, #4caf50)}.ai-indicator.fallback{color:var(--color-warning, #ff9800)}.chat-input-container{display:flex;gap:var(--space-150);margin-top:var(--space-300)}.chat-input{width:100%;padding:var(--space-200) var(--space-300);padding-right:60px;border:none;border-radius:var(--radius-2xl);font-size:var(--text-base);font-family:var(--font-secondary);transition:var(--transition-base)}.chat-input:focus{outline:none;box-shadow:var(--shadow-focus)}.char-counter{position:absolute;right:var(--space-200);top:50%;transform:translateY(-50%);font-size:var(--text-xs);color:var(--color-white-alpha-60);pointer-events:none;font-family:var(--font-secondary)}.char-counter.near-limit{color:var(--color-warning, #ff9800)}.char-counter.at-limit{color:var(--color-danger, #f44336);font-weight:var(--weight-bold)}.chat-send-btn{padding:var(--space-200) var(--space-300);background:var(--color-secondary);color:var(--color-white);border:none;border-radius:var(--radius-2xl);cursor:pointer;font-weight:var(--weight-semibold);transition:var(--transition-all);box-shadow:var(--shadow-action)}.chat-send-btn:hover{background:var(--color-secondary-light);transform:translateY(-1px);box-shadow:var(--shadow-action-lg)}.chat-send-btn:active{transform:translateY(0)}.clear-chat-btn{padding:var(--space-200) var(--space-300);background:var(--color-white-alpha-10);color:var(--color-white);border:1px solid var(--color-white-alpha-20);border-radius:var(--radius-2xl);cursor:pointer;font-weight:var(--weight-semibold);transition:var(--transition-all);min-width:50px}.clear-chat-btn:hover{background:var(--color-white-alpha-20);transform:translateY(-1px)}.clear-chat-btn:active{transform:translateY(0)}.quick-questions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-150);margin:var(--space-300) 0}.quick-question-btn{padding:var(--space-150) var(--space-300);background:var(--color-secondary-alpha-20);color:var(--color-white);border:1px solid var(--color-secondary-alpha-20);border-radius:var(--radius-2xl);cursor:pointer;font-size:var(--text-sm);transition:var(--transition-all);font-weight:var(--weight-medium)}.quick-question-btn:hover{background:var(--color-secondary-alpha-20);transform:translateY(-1px);border-color:var(--color-secondary)}.coaching-insights-panel{margin-top:var(--space-200);padding:var(--space-200);background:var(--color-secondary-alpha-10);border-radius:var(--radius-lg);border-left:4px solid var(--color-secondary);line-height:var(--line-height-normal);animation:slideIn .5s ease-out}.coaching-insights-header{font-size:var(--text-xs);opacity:var(--opacity-80);margin-bottom:var(--space-150)}.coaching-focus-area{margin-bottom:var(--space-150)}.coaching-focus-title{color:var(--color-secondary);font-weight:700}.coaching-focus-list{margin-top:var(--space-050);padding-left:var(--space-150)}.coaching-bullet{color:var(--color-secondary)}.coaching-next-session{margin-top:var(--space-050);padding-left:var(--space-150);font-style:italic}.coaching-status-indicators{display:flex;gap:var(--space-200);font-size:var(--text-xs);opacity:var(--opacity-70);margin-top:var(--space-150);padding-top:var(--space-150);border-top:1px solid var(--color-white-alpha-20)}.coach-message-emoji{margin:0 var(--space-2xs)}.coach-level-highlight,.coach-days-highlight,.coach-bullet-point{color:var(--color-secondary);font-weight:var(--weight-bold)}.coach-bold-text{color:var(--color-secondary)}.typing-indicator{opacity:var(--opacity-80)}.typing-dots{margin-left:var(--space-050)}@keyframes typing{0%,60%,to{opacity:.3}30%{opacity:1}}#profileTab{background:var(--color-background);border-radius:0}.profile-container{max-width:var(--max-width-xl);margin:0 auto;padding:var(--space-2xl)}.profile-header{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-radius:var(--radius-2xl);padding:var(--space-4xl) var(--space-3xl);margin-bottom:var(--space-2xl);color:var(--color-white);box-shadow:var(--shadow-primary-lg);position:relative;overflow:hidden}.profile-header:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--color-white-alpha-10) 0%,transparent 70%);animation:profile-pulse 6s ease-in-out infinite}@keyframes profile-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.05)}}.profile-header-content{position:relative;z-index:var(--z-base);display:flex;align-items:center;gap:var(--space-3xl)}.profile-avatar-section{text-align:center;position:relative}.avatar-display-container{position:relative;display:inline-block}#avatarDisplay{width:140px;height:140px;border-radius:var(--radius-full);background:var(--color-white-alpha-20);display:flex;align-items:center;justify-content:center;font-size:70px;color:var(--color-white);cursor:pointer;transition:var(--transition-all);border:5px solid var(--color-white-alpha-40);-webkit-backdrop-filter:var(--backdrop-blur-md);backdrop-filter:var(--backdrop-blur-md);box-shadow:var(--shadow-xl);position:relative}#avatarDisplay:after{content:"✏️";position:absolute;bottom:5px;right:5px;width:35px;height:35px;background:var(--color-secondary);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-base);border:3px solid var(--color-white);box-shadow:var(--shadow-md);opacity:0;transition:var(--transition-all)}#avatarDisplay:hover{transform:scale(1.08) rotate(5deg);border-color:var(--color-white)}#avatarDisplay:hover:after{opacity:1}.profile-info{flex:1;text-align:left}#profileDisplayName{font-size:var(--font-size-5xl);font-weight:var(--font-weight-bold);margin:0 0 var(--space-md) 0;color:var(--color-white);text-shadow:0 2px 8px var(--color-black-alpha-30);letter-spacing:var(--letter-spacing-tight)}.profile-level-tokens{display:flex;gap:var(--space-2xl);margin-top:var(--space-xl)}.profile-stat-badge{display:flex;align-items:center;gap:var(--space-md);background:var(--color-white-alpha-20);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-full);-webkit-backdrop-filter:var(--backdrop-blur-md);backdrop-filter:var(--backdrop-blur-md);border:1px solid var(--color-white-alpha-30)}.profile-stat-badge .stat-icon{font-size:var(--font-size-3xl)}.profile-stat-badge .stat-content{display:flex;flex-direction:column}.profile-stat-badge .stat-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);opacity:var(--opacity-80);font-weight:var(--font-weight-semibold)}.profile-stat-badge .stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold)}#avatarOptions{position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--z-modal);background:var(--color-black-alpha-50);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--space-lg)}#avatarOptions .avatar-modal-content{background:var(--color-white);padding:var(--space-3xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-modal);max-width:600px;width:100%;max-height:80vh;overflow-y:auto;position:relative}#avatarOptions.hidden{display:none}.avatar-options-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2xl);padding-bottom:var(--space-lg);border-bottom:2px solid var(--color-border-light)}.avatar-options-header h3{margin:0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.avatar-close-btn{background:var(--color-background);border:none;width:40px;height:40px;border-radius:var(--radius-full);font-size:var(--font-size-2xl);cursor:pointer;transition:var(--transition-all);display:flex;align-items:center;justify-content:center}.avatar-close-btn:hover{background:var(--color-danger);color:var(--color-white);transform:rotate(90deg)}.avatar-options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:var(--space-lg)}.avatar-option{width:70px;height:70px;border-radius:var(--radius-xl);background:var(--color-background);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-4xl);cursor:pointer;transition:var(--transition-all);border:3px solid transparent;box-shadow:var(--shadow-sm)}.avatar-option:hover{transform:scale(1.1) rotate(5deg);border-color:var(--color-secondary);box-shadow:var(--shadow-secondary-md)}.avatar-option.selected{border-color:var(--color-primary);background:var(--color-primary-alpha-10);box-shadow:var(--shadow-primary-md);transform:scale(1.05)}.profile-sections{display:grid;gap:var(--space-2xl)}.profile-section{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-2xl);box-shadow:var(--shadow-card);border:1px solid var(--color-border-light);transition:var(--transition-all)}.profile-section:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.profile-section-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-2xl);padding-bottom:var(--space-lg);border-bottom:2px solid var(--color-border-light)}.profile-section-icon{width:50px;height:50px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-3xl);color:var(--color-white);box-shadow:var(--shadow-primary-sm)}.profile-section-header h3{margin:0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight)}.profile-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-2xl)}.form-group{display:flex;flex-direction:column}.form-group label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);margin-bottom:var(--space-sm);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.form-group input,.form-group select{padding:var(--space-lg);border:2px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:var(--font-primary);transition:var(--transition-all);background:var(--color-white);color:var(--color-text-primary)}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus);transform:translateY(-2px)}.form-group input:hover,.form-group select:hover{border-color:var(--color-primary-light)}#profileCountry{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2300A651' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right var(--space-lg) center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:3rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.foot-selector{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-top:var(--space-md)}.foot-option{position:relative}.foot-option input[type=radio]{position:absolute;opacity:0;width:0;height:0}.foot-option label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xl);border:3px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-all);background:var(--color-white);text-transform:none;letter-spacing:normal;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.foot-option label:hover{border-color:var(--color-primary);background:var(--color-primary-alpha-5);transform:translateY(-4px);box-shadow:var(--shadow-hover)}.foot-option input[type=radio]:checked+label{border-color:var(--color-primary);background:linear-gradient(135deg,var(--color-primary-alpha-10) 0%,var(--color-primary-alpha-5) 100%);box-shadow:var(--shadow-primary-md);transform:translateY(-2px)}.foot-icon{font-size:var(--font-size-5xl);margin-bottom:var(--space-sm)}.foot-icon.left{transform:scaleX(-1)}.stats-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-xl);margin-top:var(--space-xl)}.stat-card-mini{background:var(--color-background);padding:var(--space-xl);border-radius:var(--radius-lg);text-align:center;transition:var(--transition-all);border:2px solid transparent}.stat-card-mini:hover{background:var(--color-white);border-color:var(--color-primary);transform:translateY(-4px);box-shadow:var(--shadow-primary-sm)}.stat-card-mini .stat-icon{font-size:var(--font-size-4xl);margin-bottom:var(--space-sm)}.stat-card-mini .stat-value{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-primary);margin:var(--space-sm) 0}.stat-card-mini .stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.enhanced-videos-container{margin-top:var(--space-xl)}.enhanced-video-card{background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-xl);margin-bottom:var(--space-lg);transition:var(--transition-all)}.enhanced-video-card:hover{border-color:var(--color-primary);background:var(--color-white);box-shadow:var(--shadow-hover);transform:translate(4px)}.video-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.video-card-info h5{margin:0 0 var(--space-sm) 0;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.video-card-meta{font-size:var(--font-size-sm);color:var(--color-text-light);display:flex;align-items:center;gap:var(--space-sm)}.video-score{display:inline-flex;align-items:center;gap:var(--space-xs);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-white);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm)}.video-summary{margin-top:var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.video-card-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}.video-card-actions .btn{padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-sm)}.profile-actions{display:flex;gap:var(--space-lg);justify-content:center;margin-top:var(--space-3xl);padding-top:var(--space-2xl);border-top:2px solid var(--color-border-light)}.profile-actions .btn{min-width:200px;padding:var(--space-lg) var(--space-2xl);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);border-radius:var(--radius-lg);transition:var(--transition-all);display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.profile-actions .btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-white);border:none;box-shadow:var(--shadow-primary-md)}.profile-actions .btn-primary:hover{transform:translateY(-4px);box-shadow:var(--shadow-primary-lg)}.profile-actions .btn-primary:active{transform:translateY(-2px)}.profile-actions .btn-danger{background:var(--color-white);color:var(--color-danger);border:2px solid var(--color-danger)}.profile-actions .btn-danger:hover{background:var(--color-danger);color:var(--color-white);transform:translateY(-4px);box-shadow:var(--shadow-danger)}.empty-state{text-align:center;padding:var(--space-4xl) var(--space-2xl);color:var(--color-text-light)}.empty-state-icon{font-size:var(--font-size-7xl);margin-bottom:var(--space-lg);opacity:var(--opacity-40)}.empty-state h4{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);margin:0 0 var(--space-md) 0}.empty-state p{font-size:var(--font-size-base);color:var(--color-text-light);margin:0}.achievements-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-lg);margin-top:var(--space-xl)}.achievement-badge{aspect-ratio:1;background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-lg);text-align:center;transition:var(--transition-all);cursor:pointer}.achievement-badge:hover{border-color:var(--color-warning);background:var(--color-warning-alpha-10);transform:translateY(-4px) rotate(5deg);box-shadow:var(--shadow-warning)}.achievement-badge.locked{opacity:var(--opacity-40);cursor:not-allowed}.achievement-badge.locked:hover{transform:none;border-color:var(--color-border);background:var(--color-background);box-shadow:none}.achievement-icon{font-size:var(--font-size-4xl);margin-bottom:var(--space-sm)}.achievement-name{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}@media (max-width: 1024px){.profile-container{padding:var(--space-xl)}.profile-header-content{flex-direction:column;text-align:center;gap:var(--space-2xl)}.profile-info{text-align:center}#profileDisplayName{font-size:var(--font-size-4xl)}.profile-level-tokens{justify-content:center}}@media (max-width: 768px){.profile-container{padding:var(--space-lg)}.profile-header{padding:var(--space-2xl)}#avatarDisplay{width:110px;height:110px;font-size:55px}#profileDisplayName{font-size:var(--font-size-3xl)}.profile-level-tokens{flex-direction:column;gap:var(--space-lg);width:100%}.profile-stat-badge{width:100%;justify-content:center}.profile-form-grid,.foot-selector{grid-template-columns:1fr}.stats-overview{grid-template-columns:repeat(2,1fr)}.profile-actions{flex-direction:column}.profile-actions .btn{width:100%}#avatarOptions .avatar-modal-content{width:95%;padding:var(--space-2xl)}.avatar-options-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.avatar-option{width:60px;height:60px;font-size:var(--font-size-3xl)}}@media (max-width: 480px){.profile-header{padding:var(--space-xl)}#avatarDisplay{width:90px;height:90px;font-size:45px}#profileDisplayName{font-size:var(--font-size-2xl)}.profile-section{padding:var(--space-xl)}.stats-overview{grid-template-columns:1fr}.video-card-actions{flex-direction:column}.video-card-actions .btn{width:100%}}.profile-loading{text-align:center;padding:var(--space-4xl);color:var(--color-text-light)}.profile-loading-spinner{width:50px;height:50px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin:0 auto var(--space-lg)}@keyframes spin{to{transform:rotate(360deg)}}@media print{.profile-header{background:var(--color-white);color:var(--color-text-primary);border:2px solid var(--color-primary)}.profile-actions,.video-card-actions,#avatarDisplay:after,.avatar-close-btn{display:none}.profile-section{box-shadow:none;border:1px solid var(--color-border);page-break-inside:avoid}}#rewardsTab{max-width:1000px;margin:0 auto}#rewardsTab h3{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-sm);text-align:center}#rewardsTab>p{text-align:center;color:var(--color-text-secondary);margin-bottom:var(--space-xl);font-size:var(--font-size-base)}.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}.rewards-tokens-display{max-width:250px;margin:var(--space-300) auto}.stat-item{background:var(--accent-gradient);border-radius:var(--radius-xl);padding:var(--space-lg);text-align:center;box-shadow:var(--shadow-lg);color:var(--color-white)}.stat-item .stat-number{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-xs);color:var(--color-white)}.stat-item .stat-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-white);opacity:.95}.pack-animation{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-warning) 100%);border-radius:var(--radius-xl);padding:var(--space-3xl);text-align:center;margin-bottom:var(--space-xl);box-shadow:var(--shadow-xl);border:3px solid var(--color-white);position:relative;overflow:hidden}.pack-animation:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:shimmer 3s linear infinite}@keyframes shimmer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pack-image{font-size:120px;margin-bottom:var(--space-md);animation:float 3s ease-in-out infinite;position:relative;z-index:1;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.pack-animation h4{font-size:var(--font-size-h3);font-weight:var(--font-weight-bold);color:var(--color-white);margin-bottom:var(--space-sm);position:relative;z-index:1;text-shadow:0 2px 4px rgba(0,0,0,.2)}.pack-animation p{font-size:var(--font-size-lg);color:var(--color-white);margin-bottom:var(--space-lg);position:relative;z-index:1;opacity:.9}.pack-animation .btn{position:relative;z-index:1;font-size:var(--font-size-lg);padding:var(--space-md) var(--space-3xl);background:var(--color-white);color:var(--color-primary);border:none;box-shadow:var(--shadow-lg);transition:all var(--transition-base);display:inline-block;margin:0 auto}.pack-animation .btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:var(--shadow-2xl)}.pack-animation .btn:active{transform:translateY(0) scale(1)}.pack-animation .btn:disabled{background:var(--color-gray-300);color:var(--color-gray-500);cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}.pack-animation .btn:disabled:hover{transform:none;box-shadow:none}#packResults.hidden{display:none}#packResults{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.reward-reveal{background:var(--color-white);border-radius:var(--radius-2xl);padding:var(--space-3xl);box-shadow:var(--shadow-2xl);max-width:500px;width:90%;animation:modalSlideIn .3s ease-out;text-align:center}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.reward-reveal h3{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);color:var(--color-primary);margin-bottom:var(--space-lg);animation:pulse .5s ease-in-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}#rewardContent{margin-bottom:var(--space-xl);animation:contentFadeIn .5s ease-in}@keyframes contentFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#packResults .btn{width:100%;font-size:var(--font-size-lg);padding:var(--space-md)}#rewardsTab h4{font-size:var(--font-size-h3);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-md);margin-top:var(--space-2xl);text-align:center}#collectionGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-md);margin-top:var(--space-lg)}.rewards-collection-section{margin-top:var(--space-400)}#collectionGrid p{grid-column:1 / -1;color:var(--color-text-light);text-align:center;padding:var(--space-3xl);font-size:var(--font-size-base)}.rarity-common{color:#4caf50;border-color:#4caf50}.rarity-rare{color:#2196f3;border-color:#2196f3}.rarity-epic{color:#9c27b0;border-color:#9c27b0}.rarity-legendary{color:gold;border-color:gold}#collectionProgress{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.rewards-header{background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-warning) 100%);border-radius:var(--radius-xl);padding:var(--space-xl);margin-bottom:var(--space-xl);color:var(--color-white);box-shadow:var(--shadow-xl)}.rewards-header h1{font-size:var(--font-size-h1);font-weight:var(--font-weight-bold);margin-bottom:var(--space-xs)}.rewards-points-display{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-h2);font-weight:var(--font-weight-bold)}.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}.achievement-card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-lg);text-align:center;border:var(--border-width) solid var(--color-border);transition:var(--transition-base);cursor:pointer;position:relative}.achievement-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--color-accent)}.achievement-card.locked{opacity:.6;filter:grayscale(80%)}.achievement-badge{width:80px;height:80px;margin:0 auto var(--space-md);background:linear-gradient(135deg,var(--color-accent-light),var(--color-accent));border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:40px;box-shadow:var(--shadow-lg)}.achievement-name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-2xs)}.achievement-description{font-size:var(--font-size-xs);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--space-sm)}.achievement-progress{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-border-light)}.progress-bar-small{height:6px;background:var(--color-background-subtle);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-2xs)}.progress-fill-small{height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-warning));border-radius:var(--radius-full);transition:width .5s ease}.progress-text-small{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.rewards-shop{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-xl);margin-bottom:var(--space-xl);border:var(--border-width) solid var(--color-border)}.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-md)}.shop-item{background:var(--color-background-subtle);border-radius:var(--radius-lg);overflow:hidden;border:var(--border-width) solid var(--color-border);transition:var(--transition-base)}.shop-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--color-accent)}.shop-item-image{width:100%;height:140px;background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent-light));display:flex;align-items:center;justify-content:center;font-size:60px}.shop-item-content{padding:var(--space-md)}.shop-item-name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--space-2xs)}.shop-item-description{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-md);line-height:var(--line-height-relaxed)}.shop-item-footer{display:flex;justify-content:space-between;align-items:center}.shop-item-price{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-accent)}.shop-item-btn{padding:var(--space-xs) var(--space-md);background:var(--color-accent);color:var(--color-white);border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:var(--transition-base)}.shop-item-btn:hover{background:var(--color-accent-dark);transform:scale(1.05)}.shop-item-btn:disabled{background:var(--color-background);color:var(--color-text-tertiary);cursor:not-allowed}@media (max-width: 768px){#rewardsTab{padding:var(--space-200)}.rewards-tokens-display{max-width:100%;margin:var(--space-200) 0}.stat-item .stat-number{font-size:var(--font-size-3xl)}.pack-animation{padding:var(--space-300);margin-bottom:var(--space-300)}.pack-image{font-size:100px}.pack-animation h4{font-size:var(--font-size-xl)}.pack-animation p{font-size:var(--font-size-base)}.pack-animation .btn{font-size:var(--font-size-base);padding:var(--space-200) var(--space-300)}.reward-reveal{padding:var(--space-300);width:95%}#collectionGrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-200)}.rewards-collection-section{margin-top:var(--space-300)}}@media (max-width: 480px){.pack-animation{padding:var(--space-250)}.pack-image{font-size:80px}.pack-animation h4{font-size:var(--font-size-lg)}.pack-animation .btn{padding:var(--space-150) var(--space-250)}#collectionGrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-150)}.stat-item .stat-number{font-size:var(--font-size-2xl)}.stat-item .stat-label{font-size:var(--font-size-sm)}}.analysis-input-section{background:var(--color-background);padding:1.5rem;border-radius:var(--radius-lg);margin-bottom:2rem}.analysis-input-section label{font-weight:600;color:var(--color-text-primary);margin-bottom:.5rem;display:block}.analysis-input-section select{width:100%;padding:.75rem;border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;background:#fff;transition:border-color .3s ease}.analysis-input-section select:focus{outline:none;border-color:var(--color-primary)}.video-input-section{margin-bottom:2rem}.recording-section,.upload-section{background:#fff;border:2px solid #e8f4fd;border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1rem}.recording-section h4,.upload-section h4{color:var(--color-primary);margin-bottom:.5rem}.help-text{color:var(--color-text-light);font-size:.9rem;margin-bottom:1rem;line-height:1.4}.overlay-recording-options{background:var(--color-background);border:1px solid #e9ecef;border-radius:var(--radius-md);padding:1rem;margin-bottom:1rem}.overlay-recording-options label{font-weight:500;color:var(--color-text-primary);margin-bottom:.5rem}.overlay-recording-options input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}.help-icon{font-size:14px;color:var(--color-text-light);cursor:help;opacity:.7;transition:opacity .2s ease}.help-icon:hover{opacity:1}.overlay-recording-options .help-text{color:var(--color-text-light);font-size:.85rem;line-height:1.4;margin-top:.5rem}.recording-controls,.upload-controls{display:flex;justify-content:center;margin:1.5rem 0}.upload-label{display:inline-block;padding:.75rem 1.5rem;background:var(--color-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-all);font-weight:600;text-align:center}.upload-label:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.recording-tips,.upload-tips{background:var(--color-background);border-radius:var(--radius-md);padding:1rem;margin-top:1rem}.recording-tips h5,.upload-tips h5{margin-bottom:.75rem;color:var(--color-text-primary);font-size:.9rem}.recording-tips ul,.upload-tips ul{margin:0;padding-left:1.2rem}.recording-tips li,.upload-tips li{font-size:.85rem;color:var(--color-text-light);margin-bottom:.25rem;line-height:1.3}.divider{text-align:center;margin:2rem 0;position:relative}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:var(--color-border)}.divider span{background:#fff;padding:0 1.5rem;color:var(--color-text-light);font-weight:600;font-size:.9rem}.video-preview-section{margin:2rem 0}.video-container{background:#fff;border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 4px 12px #0000001a;margin-bottom:1.5rem}.video-container h4{margin-bottom:1rem;color:var(--color-primary);text-align:center}.video-wrapper{position:relative;display:flex;justify-content:center;background:#000;border-radius:var(--radius-md);overflow:hidden}#recordPreview,#analysisVideo{max-width:100%;height:auto;display:block}#analysisCanvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}#countdownOverlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;text-align:center;z-index:1000;text-shadow:2px 2px 4px rgba(0,0,0,.8)}#recordingTimer{position:absolute;top:10px;right:10px;background:#f44336e6;color:#fff;padding:.5rem 1rem;border-radius:20px;font-weight:700;z-index:1000;display:flex;align-items:center;gap:.5rem}.analysis-controls{text-align:center;margin:2rem 0;padding:1.5rem;background:var(--color-background);border-radius:var(--radius-lg)}.analysis-help-text{margin-top:1rem;color:var(--color-text-light);font-size:.9rem;line-height:1.6}#realTimeFeedback{background:#000000d9;color:#fff;padding:1rem;border-radius:var(--radius-md);margin:1rem 0;font-size:.9rem;line-height:1.4;border-left:4px solid var(--color-primary)}.analysis-results-section{margin:2rem 0}.analysis-loading{text-align:center;padding:3rem 2rem;background:var(--color-background);border-radius:var(--radius-lg);margin:1rem 0}.loading-spinner{width:50px;height:50px;border:5px solid var(--color-border);border-top:5px solid var(--color-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin:0 auto 1.5rem}.analysis-history-section{background:#fff;border-radius:var(--radius-lg);padding:1.5rem;margin:2rem 0;box-shadow:0 2px 8px #0000001a}.history-container{max-height:300px;overflow-y:auto}#analysisHistory{list-style:none;padding:0;margin:0}#analysisHistory li{padding:1rem;border-bottom:1px solid #f0f0f0;transition:background-color .3s ease}#analysisHistory li:hover{background-color:var(--color-background)}#analysisHistory li:last-child{border-bottom:none}.no-history{text-align:center;color:var(--color-text-light);font-style:italic;padding:2rem}.loading-history{text-align:center;padding:2rem;color:var(--color-primary);font-weight:500}.history-item{cursor:pointer;transition:var(--transition-all);border-radius:var(--radius-md);margin:.5rem 0}.history-item:hover{background:var(--color-blue-alpha-5);transform:translate(5px);box-shadow:0 2px 8px #667eea26}.history-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;flex-wrap:wrap;gap:.5rem}.history-date{font-weight:600;color:var(--color-text-primary);font-size:.9rem}.history-type{background:var(--gradient-accent);color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500}.history-score{font-weight:700;color:#4caf50;font-size:.85rem}.history-details{margin-bottom:.5rem}.history-details small{color:var(--color-text-secondary);font-size:.75rem;line-height:1.4}.history-action{opacity:.7;transition:opacity .3s ease}.history-item:hover .history-action{opacity:1}.history-action small{color:var(--color-primary);font-size:.7rem;font-weight:500}.error{color:var(--color-danger);text-align:center;padding:1rem;background:#fef2f2;border-radius:var(--radius-md);font-weight:500}.pro-tips-section{background:var(--gradient-accent);color:#fff;padding:2rem;border-radius:var(--radius-lg);margin:2rem 0}.pro-tips-section h3{text-align:center;margin-bottom:1.5rem}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.tip-card{background:#ffffff1a;border-radius:var(--radius-md);padding:1.5rem;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .3s ease}.tip-card:hover{transform:translateY(-4px)}.tip-icon{font-size:2rem;margin-bottom:1rem}.tip-card h4{margin-bottom:.75rem;font-size:1.1rem}.tip-card p{font-size:.9rem;line-height:1.4;opacity:.9}#recordingContainer,#analysisContainer{display:none}#recordingContainer.show,#analysisContainer.show{display:block}#analysisCanvas{position:absolute;top:0;left:0;pointer-events:none;z-index:10}#analysisVideo{position:relative;display:block;max-width:100%;height:auto}.analysis-container{position:relative;display:inline-block}.countdown-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;color:#fff}.countdown-number{font-size:72px;font-weight:700;margin-bottom:var(--space-xl);animation:pulse 1s ease-in-out}.countdown-number.recording{color:#f44;animation:blink 1s infinite}.countdown-text{font-size:20px;text-align:center}.recording-timer{position:absolute;top:10px;right:10px;background:#000c;color:#fff;padding:8px 16px;border-radius:20px;display:flex;align-items:center;gap:8px;z-index:999}.recording-indicator{width:12px;height:12px;background:#f44;border-radius:var(--radius-full);animation:blink 1s infinite}.video-wrapper{position:relative;max-width:100%;margin:0 auto;border-radius:var(--radius-md);overflow:hidden}.video-wrapper video{width:100%;height:auto;display:block}#analysisCanvas{position:absolute;top:0;left:0;pointer-events:none}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.3}}.real-time-feedback{background:#000c;color:#fff;padding:12px;border-radius:var(--radius-md);margin-top:var(--space-md)}.feedback-header{display:flex;justify-content:space-between;margin-bottom:8px}.feedback-tip{font-size:14px;margin-bottom:8px}.quick-stats{display:flex;gap:var(--space-lg);font-size:12px;opacity:.8}.gemini-analysis{background:var(--gradient-accent);color:#fff;padding:2rem;border-radius:var(--radius-lg);margin:2rem 0;box-shadow:0 4px 15px #667eea4d}.gemini-analysis h4{margin-bottom:1.5rem;font-size:1.5rem;display:flex;align-items:center;gap:.5rem}.gemini-feedback{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.5rem;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.2)}.gemini-feedback h3,.gemini-feedback h4,.gemini-feedback h5{color:gold;margin:1rem 0 .5rem}.gemini-feedback p{line-height:1.8;margin-bottom:1rem}.gemini-feedback ul,.gemini-feedback ol{margin:1rem 0;padding-left:2rem}.gemini-feedback li{margin-bottom:.5rem;line-height:1.6}.gemini-feedback strong{color:gold;font-weight:600}.gemini-feedback em{color:var(--color-border);font-style:italic}.vision-insights{margin-top:1.5rem;padding:1rem;background:#ffffff0d;border-radius:var(--radius-md);border-left:4px solid #FFD700}.vision-insights h5{color:gold;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.vision-insights p{margin:0;opacity:.9}.gemini-loading{display:flex;align-items:center;justify-content:center;padding:3rem;background:var(--gradient-accent);border-radius:var(--radius-lg);color:#fff}.gemini-loading .spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:var(--radius-full);animation:spin 1s linear infinite;margin-right:1rem}.gemini-error{background:#ff6b6b;color:#fff;padding:1.5rem;border-radius:var(--radius-md);margin:1rem 0}.analysis-results-container{max-width:1200px;margin:0 auto;padding:var(--space-xl)}.analysis-header{text-align:center;margin-bottom:30px;padding:var(--space-xl);background:var(--gradient-accent);border-radius:15px;color:#fff}.analysis-score-ring{width:120px;height:120px;margin:var(--space-xl) auto;position:relative}.score-ring-circle{width:100%;height:100%;border-radius:var(--radius-full);border:12px solid rgba(255,255,255,.2);position:relative}.score-ring-progress{position:absolute;top:-12px;left:-12px;width:100%;height:100%;border-radius:var(--radius-full);border:12px solid white;border-bottom-color:transparent;border-right-color:transparent;transform:rotate(45deg)}.score-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:32px;font-weight:700}.unified-analysis{background:#fff;border-radius:15px;padding:30px;box-shadow:0 4px 6px #0000001a;margin-bottom:var(--space-xl)}.analysis-tabs{display:flex;gap:var(--space-md);margin-bottom:var(--space-xl);border-bottom:2px solid #f0f0f0}.analysis-tab{padding:var(--space-md) var(--space-xl);background:none;border:none;cursor:pointer;font-weight:500;color:var(--color-text-secondary);position:relative;transition:var(--transition-all)}.analysis-tab.active{color:var(--color-primary)}.analysis-tab.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--color-primary)}.analysis-content{min-height:300px}.analysis-panel{display:none;animation:fadeIn .3s}.analysis-panel.active{display:block}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-xl);margin-bottom:30px}.metric-card{background:var(--color-background);padding:var(--space-xl);border-radius:var(--radius-lg);text-align:center;transition:transform .3s}.metric-card:hover{transform:translateY(-5px)}.metric-icon{font-size:2em;margin-bottom:var(--space-md)}.metric-value{font-size:2em;font-weight:700;color:var(--color-text-primary)}.metric-label{color:var(--color-text-secondary);font-size:.9em;margin-top:5px}.ai-insights{background:var(--color-background);padding:25px;border-radius:var(--radius-lg);margin:var(--space-xl) 0}.ai-insights h4{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.insight-item{background:#fff;padding:var(--space-lg);border-radius:var(--radius-md);margin-bottom:var(--space-md);border-left:4px solid var(--color-primary)}.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.pose-skeleton{stroke:#0f0;stroke-width:3;fill:none;filter:drop-shadow(0 0 3px rgba(0,255,0,.5))}.pose-point{fill:#f06;stroke:#fff;stroke-width:2}.angle-display{position:absolute;background:#000c;color:#fff;padding:5px var(--space-md);border-radius:5px;font-size:12px;font-weight:700}.motion-trail{stroke:#ff09;stroke-width:2;fill:none;stroke-dasharray:5,5;animation:dash 1s linear infinite}@keyframes dash{to{stroke-dashoffset:-10}}.feedback-pills{display:flex;flex-wrap:wrap;gap:var(--space-md);margin:var(--space-lg) 0}.feedback-pill{background:#f0f0f0;padding:8px 16px;border-radius:20px;font-size:.9em;display:flex;align-items:center;gap:5px}.feedback-pill.positive{background:#d4f5d4;color:#2e7d2e}.feedback-pill.improvement{background:#fff3cd;color:#856404}.feedback-pill.tip{background:#d1ecf1;color:#0c5460}.progress-container{width:100%;height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:var(--space-lg)}.progress-bar{height:100%;background:var(--color-background);width:0%;transition:width .5s ease-out;border-radius:4px}.drag-over{background:#e3f2fd!important;border-color:#2196f3!important}.pulse{animation:pulse 2s infinite}.analyzing{position:relative;overflow:hidden}.real-time-feedback{position:fixed;bottom:20px;right:20px;background:#000c;color:#fff;padding:var(--space-lg);border-radius:var(--radius-md);max-width:300px;z-index:1000}.upload-progress{margin:var(--space-xl) 0;padding:var(--space-lg);background:var(--color-background);border-radius:var(--radius-md)}.progress-bar{height:var(--space-xl);background:#e9ecef;border-radius:var(--space-md);overflow:hidden;margin-bottom:var(--space-md)}.progress-fill{height:100%;background:var(--color-background);transition:width .3s ease}.info-message,.error-message{padding:var(--space-lg);border-radius:var(--radius-md);margin:var(--space-md) 0}.info-message{background:#d4edda;border:1px solid #c3e6cb}.error-message{background:#f8d7da;border:1px solid #f5c6cb}.analysis-results-container{margin-top:var(--space-xl);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:#fff}.unified-analysis-container{max-width:1400px;margin:0 auto;padding:2rem;background:var(--color-background);border-radius:var(--radius-lg);animation:fadeIn .5s ease}.unified-header{background:var(--gradient-accent);color:#fff;padding:2rem;border-radius:var(--radius-lg);margin-bottom:2rem;box-shadow:0 4px 20px #667eea4d}.header-content{text-align:center}.analysis-title{font-size:2rem;margin-bottom:1.5rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.1)}.score-display{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap}.score-circle{width:150px;height:150px;position:relative;background:var(--color-primary);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px #0000001a;animation:rotateIn .8s ease}.score-inner{width:120px;height:120px;background:#fff;border-radius:var(--radius-full);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-text-primary);box-shadow:inset 0 2px 8px #0000001a}.score-number{font-size:3rem;font-weight:700;line-height:1;color:var(--color-primary)}.score-label{font-size:.875rem;opacity:.7;margin-top:.25rem}.score-details{display:flex;flex-direction:column;align-items:center;gap:1rem}.grade-badge{display:inline-block;padding:.5rem 1.5rem;border-radius:20px;font-size:1.5rem;font-weight:700;color:#fff;box-shadow:0 4px 12px #0003;animation:bounceIn .5s ease}.analysis-meta{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}.meta-item{display:flex;align-items:center;gap:.5rem;background:#ffffff1a;padding:.5rem 1rem;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.meta-icon{font-size:1.25rem}.meta-text{font-size:.875rem}.scorecards-section,.ai-analysis-section,.insights-section{margin-bottom:3rem}.section-title{font-size:1.5rem;margin-bottom:1.5rem;color:var(--color-text-primary);font-weight:600;display:flex;align-items:center;gap:.5rem}.scorecards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.scorecard{background:#fff;border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 2px 8px #0000001a;opacity:0;transform:translateY(20px);border:1px solid var(--color-border)}.scorecard.revealed{opacity:1;transform:translateY(0);animation:fadeInUp .5s ease forwards}.scorecard:hover{transform:translateY(-5px);box-shadow:0 8px 24px #00000026;border-color:var(--color-primary)}.biometrics-card,.video-intelligence-card,.technical-card,.movement-card{background:var(--color-background)}.scorecard-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid #f0f0f0}.scorecard-icon{font-size:1.5rem;animation:pulse 2s infinite}.scorecard-title{font-size:1.125rem;margin:0;font-weight:600;color:var(--color-text-primary)}.scorecard-metrics{margin-bottom:1rem}.metric-row{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}.metric-name{flex:0 0 140px;font-size:.875rem;color:var(--color-text-secondary);font-weight:500}.metric-bar{flex:1;height:8px;background:var(--color-border);border-radius:4px;overflow:hidden;position:relative}.metric-fill{height:100%;border-radius:4px;transition:width 1s ease;position:relative;overflow:hidden}.metric-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--color-border);animation:shimmer 2s infinite}.metric-value{flex:0 0 45px;text-align:right;font-weight:700;font-size:.875rem;color:var(--color-text-primary)}.scorecard-footer{display:flex;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--color-border);font-size:.75rem;color:var(--color-text-secondary)}.footer-stat{display:flex;align-items:center;gap:.25rem}.ai-analysis-section{background:#fff;border-radius:var(--radius-lg);padding:2rem;box-shadow:0 2px 8px #0000001a;border:1px solid var(--color-border)}.ai-content-wrapper{min-height:200px}.gemini-response{background:var(--color-blue-alpha-5);border-left:4px solid var(--color-primary);padding:1.5rem;border-radius:var(--radius-md);animation:slideInLeft .5s ease}.gemini-content{line-height:1.8;color:var(--color-text-primary)}.gemini-content p{margin-bottom:1rem}.gemini-content p:last-child{margin-bottom:0}.gemini-content strong{color:var(--color-primary);font-weight:600}.list-number{color:var(--color-primary);font-weight:700;margin-right:.25rem}.ai-summary{font-size:1.1rem;font-weight:500;margin-bottom:1rem;padding:1rem;background:#667eea0d;border-radius:var(--radius-md)}.ai-analysis{margin-bottom:1rem}.ai-recommendations{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--color-border)}.ai-recommendations h5{color:var(--color-primary);margin-bottom:.75rem}.ai-recommendations ul{list-style:none;padding:0}.ai-recommendations li{padding:.5rem 0 .5rem 1.5rem;position:relative}.ai-recommendations li:before{content:"→";position:absolute;left:0;color:var(--color-primary)}.ai-processing{text-align:center;padding:3rem}.pulse-loader{width:50px;height:50px;margin:0 auto 1rem;border:3px solid var(--color-primary);border-radius:var(--radius-full);animation:pulse 1.5s ease-in-out infinite}.no-content{text-align:center;color:var(--color-text-light);font-style:italic;padding:2rem}.insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.strengths-card{background:var(--color-background);border-left:3px solid #4caf50}.improvements-card{background:var(--color-background);border-left:3px solid #ff9800}.recommendations-card{background:var(--color-background);border-left:3px solid #2196f3}.insight-list{list-style:none;padding:0;margin:0}.insight-list li{padding:.5rem 0 .5rem 1.5rem;position:relative;color:#555;line-height:1.5}.insight-list li:before{content:"→";position:absolute;left:0;color:var(--color-primary);font-weight:700}.technical-details-section{background:#fff;border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 2px 8px #0000001a;border:1px solid var(--color-border)}.technical-details-section summary{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;color:var(--color-text-primary);list-style:none;position:relative;padding-left:2rem}.technical-details-section summary:before{content:"▶";position:absolute;left:0;transition:transform .3s ease}.technical-details-section[open] summary:before{transform:rotate(90deg)}.technical-details-section[open] summary{margin-bottom:1.5rem}.technical-content{animation:fadeIn .3s ease}.technical-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.technical-section{padding:1rem;background:var(--color-background);border-radius:var(--radius-md)}.technical-section h5{margin-bottom:1rem;color:var(--color-text-primary);font-weight:600;display:flex;align-items:center;gap:.5rem}.angles-table{width:100%;border-collapse:collapse;margin-top:1rem}.angles-table th,.angles-table td{padding:.75rem;text-align:left;border-bottom:1px solid var(--color-border)}.angles-table th{background:#f5f5f5;font-weight:600;color:var(--color-text-primary)}.angles-table tr:hover{background:#fafafa}.frame-stats{display:flex;flex-direction:column;gap:.75rem}.stat-item{display:flex;justify-content:space-between;padding:.75rem;background:#fff;border-radius:6px;border:1px solid var(--color-border);transition:all .2s ease}.stat-item:hover{background:var(--color-primary)05;border-color:var(--color-primary)}.stat-value{font-weight:700;color:var(--color-text-primary)}.info-message,.error-message{padding:1.5rem;border-radius:var(--radius-md);margin-bottom:1.5rem}.info-message{background:#e3f2fd;border-left:4px solid #2196f3;color:#1565c0}.error-message{background:#ffebee;border-left:4px solid #f44336;color:#c62828}.info-message h4,.error-message h4{margin-top:0;margin-bottom:.75rem}.progress-section{margin-bottom:3rem}.progress-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.progress-card,.next-steps-card{background:#fff;border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 2px 8px #0000001a;border:1px solid var(--color-border);transition:var(--transition-all)}.progress-card:hover,.next-steps-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #00000026}.progress-header,.next-steps-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:2px solid #f0f0f0}.progress-icon,.next-steps-icon{font-size:1.5rem}.progress-header h4,.next-steps-header h4{margin:0;font-size:1.125rem;font-weight:600;color:var(--color-text-primary)}.progress-stats{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem}.score-display-mini{text-align:center}.score-number-mini{font-size:2.5rem;font-weight:700;color:var(--color-primary);line-height:1}.score-label-mini{font-size:.875rem;color:var(--color-text-secondary);margin-top:.25rem}.improvement-indicator{text-align:center}.improvement-arrow{font-size:2rem;margin-bottom:.5rem}.improvement-text{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}.improvement-subtitle{font-size:.75rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.progress-message{background:var(--gradient-accent);color:#fff;padding:1rem;border-radius:var(--radius-md);text-align:center;font-weight:500}.next-steps-list{margin-bottom:1.5rem}.next-step-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem;padding:1rem;background:var(--color-background);border-radius:var(--radius-md);transition:all .2s ease}.next-step-item:hover{background:#e3f2fd;transform:translate(5px)}.step-number{flex:0 0 32px;width:32px;height:32px;background:var(--color-primary);color:#fff;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem}.step-content{flex:1}.step-title{font-weight:600;color:var(--color-text-primary);margin-bottom:.25rem}.step-description{color:var(--color-text-secondary);font-size:.875rem;line-height:1.4}.motivation-footer{background:var(--color-background);color:#fff;padding:1rem;border-radius:var(--radius-md);text-align:center;font-weight:500}.coach-feedback{background:var(--color-blue-alpha-5);border-radius:var(--radius-lg);padding:1.5rem}.coach-message{display:flex;align-items:flex-start;gap:1rem}.coach-avatar{flex:0 0 48px;width:48px;height:48px;background:var(--gradient-accent);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:1.5rem}.message-bubble{flex:1;background:#fff;padding:1.5rem;border-radius:var(--radius-lg);border:1px solid var(--color-border);position:relative}.message-bubble:before{content:"";position:absolute;left:-10px;top:20px;border:10px solid transparent;border-right-color:#fff;border-left:none}.player-focused .ai-summary,.player-focused .ai-analysis{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #f0f0f0}.player-focused .ai-recommendations ul{margin:.5rem 0 0;padding-left:0;list-style:none}.player-focused .ai-recommendations li{margin-bottom:.5rem;padding-left:1.5rem;position:relative}@media (min-width: 480px){.welcome-title{font-size:var(--font-size-2xl)}}@media (min-width: 768px){.container{padding:var(--space-2xl)}.welcome-title{font-size:var(--font-size-3xl)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.dashboard-stats-grid{grid-template-columns:repeat(2,1fr)}.nav-tab{padding:var(--space-md) var(--space-lg);font-size:var(--font-size-base)}}@media (min-width: 1024px){.dashboard-stats-grid{grid-template-columns:repeat(3,1fr)}.progress-summary{grid-template-columns:1fr 1fr}.charts-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 1200px){.unified-analysis-container{max-width:100%;padding:1.5rem}}@media (max-width: 1024px){.dashboard-stats-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}.navigation-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.container{padding:var(--space-lg)}.card{padding:var(--space-xl);margin:var(--space-lg) 0}.history-main{flex-direction:column;align-items:flex-start;gap:.25rem}.history-item:hover{transform:none}.loading-analysis{padding:2rem 1rem}.recording-controls,.upload-controls{flex-direction:column;align-items:center;gap:1rem}.tips-grid{grid-template-columns:1fr}.video-container{padding:1rem}#countdownOverlay{font-size:2.5rem}#recordingTimer{top:5px;right:5px;padding:.25rem .5rem;font-size:.8rem}.analysis-input-section,.recording-section,.upload-section{padding:1rem}.gemini-analysis{padding:1.5rem}.gemini-feedback,.unified-analysis-container{padding:1rem}.analysis-title{font-size:1.5rem}.score-display{flex-direction:column;gap:1.5rem}.score-circle{width:120px;height:120px}.score-inner{width:100px;height:100px}.score-number{font-size:2rem}.analysis-meta{flex-direction:column;gap:.5rem}.meta-item{width:100%;justify-content:center}.scorecards-grid,.insights-grid,.technical-grid{grid-template-columns:1fr}.scorecard{margin-bottom:1rem}.metric-name{flex:0 0 100px;font-size:.75rem}.metric-value{flex:0 0 35px;font-size:.75rem}.section-title{font-size:1.25rem}.ai-analysis-section,.gemini-response{padding:1rem}.progress-content{grid-template-columns:1fr}.progress-stats{flex-direction:column;text-align:center;gap:1.5rem}.coach-message{flex-direction:column;text-align:center}.message-bubble:before{display:none}.auth-container{padding:var(--space-md)}.auth-title{font-size:2rem}.choice-title{font-size:1.5rem}.choice-btn-main{font-size:1.1rem}.choice-btn-subtitle{font-size:.85rem}.features-grid{grid-template-columns:1fr;padding:30px var(--space-xl)}.steps-container,.faq-grid{grid-template-columns:1fr}.auth-actions{flex-direction:column;align-items:center}.btn{width:100%;max-width:300px}.choice-btn{padding:var(--space-lg)}.choice-btn-content{gap:12px}.choice-btn-icon{font-size:1.5rem}.enhanced-google-btn{padding:12px 16px;font-size:.95rem}.trust-indicators{flex-direction:column;align-items:center;gap:var(--space-lg)}.auth-form-header{flex-direction:column;gap:var(--space-lg);text-align:center}.dashboard-container{gap:1.5rem}.player-welcome-card{flex-direction:column;text-align:center;padding:1.5rem}.welcome-title{font-size:1.5rem}.dashboard-stats-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.section-header{padding:1rem 1rem .5rem;flex-direction:column;align-items:flex-start;gap:.5rem}.section-content{padding:1rem}.scores-sections{gap:1.5rem}.scores-section{padding:1rem}.section-title h4{font-size:1.1rem}.games-container{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1rem}.game-teams{grid-template-columns:1fr;gap:.75rem;text-align:center}.team{justify-content:center}.game-footer{flex-direction:column;gap:.75rem;align-items:center}.teams-detailed{grid-template-columns:1fr;gap:1.5rem;padding:1.5rem}.vs-separator{order:-1}.lineups-grid{grid-template-columns:1fr}.venue-time-info{padding:1rem}.highlight-thumbnail{height:180px}.recommendation-item{flex-direction:column;align-items:flex-start;text-align:center}.navigation-grid{grid-template-columns:1fr}.nav-quick-btn{padding:.75rem}.nav-btn-icon{width:40px;height:40px;font-size:1.25rem}.leaderboard-container{margin:0 .5rem}.leaderboard-view-selector{gap:.5rem}.view-btn{min-width:100px;padding:.6rem 1.25rem}.leaderboard-table{font-size:.875rem}.leaderboard-table th,.leaderboard-table td{padding:.75rem .5rem}.period-text{display:none}.period-btn{min-width:60px}.team-info-message{margin:1rem .5rem}.welcome-header{padding:var(--space-xl)}.player-name{font-size:24px}.streak-container{flex-direction:column;gap:var(--space-md)}.nav-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:var(--space-xs);gap:var(--space-xs)}.nav-tab{font-size:12px;padding:var(--space-md) var(--space-md);min-width:80px}.timer-display{font-size:48px}.drill-name-display{font-size:1.25rem;margin-bottom:1.5rem}.timer-btn{width:60px;height:60px;font-size:1.5rem}.timer-controls-minimal{gap:1.5rem}.countdown-title{font-size:1.5rem}.countdown-number{font-size:4.5rem}.countdown-subtitle{font-size:1rem}.progress-summary{grid-template-columns:1fr;gap:1.5rem}.charts-grid{grid-template-columns:1fr;gap:1rem}.chart-container{padding:1rem}.stats-grid{grid-template-columns:repeat(3,1fr)}.streak-stats{gap:1rem}.filter-section{flex-direction:column;align-items:flex-start}.filter-buttons{width:100%}.filter-btn{flex:1;min-width:80px}.modal-content{margin:var(--space-md);max-height:95vh}.modal-header,.modal-body,.modal-footer{padding:var(--space-lg)}.stats-row{grid-template-columns:repeat(2,1fr);gap:var(--space-md)}}@media (max-width: 480px){.container{padding:var(--space-md)}.card{padding:var(--space-lg);margin:var(--space-md) 0;border-radius:var(--radius-xl)}.dashboard-stats-grid,.stats-row,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.unified-header{padding:1rem}.grade-badge{font-size:1.25rem;padding:.375rem 1rem}.scorecard{padding:1rem}.scorecard-footer{flex-direction:column;gap:.5rem}.insight-card{padding:1rem}.quick-questions{grid-template-columns:1fr 1fr;gap:8px}.quick-question-btn{padding:var(--space-md) var(--space-lg);font-size:13px}.dashboard-stats-grid,.games-container{grid-template-columns:1fr;gap:.75rem}.game-card{padding:.75rem}.score{font-size:1.25rem;padding:.375rem .5rem}.team-detailed h3{font-size:1rem}.team-score,.final-score{font-size:2rem}.stats-grid{gap:.5rem}.stat-item{padding:.5rem;font-size:.875rem}.highlight-item{flex-direction:column;align-items:flex-start;padding:.75rem}.highlight-thumbnail{width:100%;height:200px}.recommendation-item{padding:1rem 0}.activity-item,.achievement-item{padding:.75rem 0}.view-btn{min-width:90px;padding:.5rem 1rem;font-size:.9rem}.view-icon{font-size:1.1rem}.leaderboard-controls{gap:.25rem}.period-btn{min-width:70px;padding:.5rem .75rem}.period-icon{font-size:1.25rem}.period-text{font-size:.75rem}.leaderboard-table{font-size:.8rem}.leaderboard-table th,.leaderboard-table td{padding:.5rem .25rem}.you-badge{display:block;margin:.25rem 0 0;font-size:.7rem}.current-user-row:before{display:none}.info-card{padding:.75rem 1rem;font-size:.85rem}.player-name{font-size:20px}.stat-number{font-size:24px}.welcome-title{font-size:var(--font-size-xl)}.nav-tab{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs);min-width:70px}.timer-display{font-size:40px}.full-screen-timer-container{padding:1rem}.timer-btn{width:50px;height:50px;font-size:1.25rem}.timer-controls-minimal{gap:1rem}.drill-name-display{font-size:1rem;margin-bottom:1rem}.timer-instructions{font-size:.875rem}.countdown-number{font-size:3.5rem;margin:1.5rem 0}.countdown-container{transform:scale(.8)}.sessions-table th,.sessions-table td{padding:.5rem .25rem;font-size:.875rem}.stat-card .stat-number{font-size:1.5rem}.weekly-calendar{gap:.25rem}.day-name{font-size:.625rem}.day-number{font-size:.875rem}.pack-animation{padding:var(--space-lg)}.pack-image{font-size:80px}.pack-animation h4{font-size:var(--font-size-xl)}.pack-animation p{font-size:var(--font-size-base)}.pack-animation .btn{padding:var(--space-md) var(--space-lg);font-size:var(--font-size-base)}#collectionGrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-sm)}.reward-reveal{width:95%;padding:var(--space-lg)}.stat-item .stat-number{font-size:var(--font-size-3xl)}.btn{padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-sm)}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:var(--font-size-base)}.form-group{margin:var(--space-lg) 0}.form-group input,.form-group select{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)}.side-selector{flex-direction:column;gap:var(--space-sm)}.stat-card{padding:var(--space-md)}.stat-card-icon,.stat-card-number{font-size:var(--font-size-2xl)}.modal-content{margin:0;border-radius:var(--radius-xl)}.avatar-options{grid-template-columns:repeat(4,1fr)}.collection-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-md)}}@media (orientation: landscape) and (max-height: 500px){.full-screen-timer-container{padding:var(--space-lg)}.drill-name-display{font-size:var(--font-size-base);margin-bottom:var(--space-sm)}.timer-main-display,.timer-progress-bar,.timer-controls-minimal{margin:var(--space-lg) 0}.timer-instructions{margin-top:var(--space-lg);font-size:var(--font-size-sm)}.countdown-container{transform:scale(.8)}}@media (prefers-color-scheme: dark){.unified-analysis-container{background:#1a1a1a;color:var(--color-border)}.scorecard,.ai-analysis-section,.insight-card,.technical-details-section{background:#2a2a2a;border-color:#3a3a3a}.section-title,.scorecard-title,.insight-header h4{color:var(--color-border)}.metric-name,.stat-label{color:var(--color-text-light)}.metric-value,.stat-value,.gemini-content{color:var(--color-border)}.metric-bar{background:#3a3a3a}.scorecard-header,.scorecard-footer{border-color:#3a3a3a}.dashboard-section,.stat-card{background:#1a1a1a}.dashboard-section{border-color:#f59e0b33}.nav-quick-btn{background:#1a1a1a;border-color:var(--color-text-primary)}.game-card,.highlight-item,.scores-section{background:#1a1a1a}}@media print{.nav-tabs,.btn,.timer-controls,.chat-input-container,.modal-close{display:none!important}.card{box-shadow:none!important;border:1px solid #ccc!important}}