:root{--prussian-blue: #003049;--fire-engine-red: #d62828;--orange-wheel: #f77f00;--xanthous: #fcbf49;--vanilla: #eae2b7;--prussian-blue-light: #004d73;--prussian-blue-dark: #002333;--prussian-blue-bg: rgba(0, 48, 73, .1);--fire-engine-red-light: #e85d5d;--fire-engine-red-dark: #a61f1f;--fire-engine-red-bg: rgba(214, 40, 40, .1);--orange-wheel-light: #ff9533;--orange-wheel-dark: #c66200;--orange-wheel-bg: rgba(247, 127, 0, .1);--xanthous-light: #ffd56f;--xanthous-dark: #d9a03a;--xanthous-bg: rgba(252, 191, 73, .1);--vanilla-light: #f5f0e0;--vanilla-dark: #d4cba5;--color-primary: var(--prussian-blue);--color-primary-dark: var(--prussian-blue-dark);--color-secondary: var(--orange-wheel);--color-accent: var(--xanthous);--color-danger: var(--fire-engine-red);--color-error: #d32f2f;--color-error-dark: #c62828;--color-success: #047857;--color-success-dark: #065f46;--color-warning: var(--xanthous-dark);--color-info: var(--prussian-blue-light);--color-white: #ffffff;--color-black: #000000;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--color-text-primary: #1a1a1a;--color-text-secondary: #4a4a4a;--color-text-muted: #6b6b6b;--color-text-disabled: #9ca3af;--color-text-inverse: #ffffff;--color-background-primary: #ffffff;--color-background-secondary: var(--vanilla);--color-background-tertiary: #f5f5f5;--color-background-dark: #1a1a1a;--color-border: #d4d4d4;--color-border-light: #e5e7eb;--color-border-dark: #9ca3af;--color-border-focus: var(--prussian-blue);--border-width-thin: 1px;--border-width-base: 2px;--border-width-thick: 4px;--font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono: "Monaco", "Courier New", monospace;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-size-h1: 2.5rem;--font-size-h2: 2rem;--font-size-h3: 1.75rem;--font-size-h4: 1.5rem;--font-size-h5: 1.25rem;--font-size-h6: 1rem;--font-size-base: 1rem;--font-size-small: .875rem;--font-size-xs: .8125rem;--font-size-tiny: .75rem;--font-size-display: 1.5rem;--font-size-subheading: 1.125rem;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--spacing-4xl: 6rem;--page-padding-mobile: 16px;--page-padding-desktop: 32px;--page-max-width: 1200px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .15);--shadow-2xl: 0 25px 50px rgba(0, 0, 0, .25);--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, .06);--z-index-base: 0;--z-index-dropdown: 100;--z-index-sticky: 200;--z-index-fixed: 300;--z-index-modal-backdrop: 400;--z-index-modal: 500;--z-index-popover: 600;--z-index-tooltip: 700;--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out;--transition-slower: .5s ease-in-out;--button-padding-y: var(--spacing-sm);--button-padding-x: var(--spacing-md);--button-border-radius: var(--radius-sm);--button-font-weight: var(--font-weight-medium);--input-padding-y: var(--spacing-sm);--input-padding-x: var(--spacing-md);--input-border-radius: var(--radius-sm);--input-border-color: var(--color-border);--input-focus-border-color: var(--prussian-blue);--input-focus-shadow: 0 0 0 3px var(--prussian-blue-bg);--card-padding: var(--spacing-lg);--card-border-radius: var(--radius-md);--card-shadow: var(--shadow-sm);--card-border-color: var(--color-border);--navbar-height: 64px;--navbar-padding: var(--spacing-md);--navbar-background: var(--prussian-blue);--chart-height: 360px;--chart-min-height: 350px;--gradient-primary: linear-gradient( 135deg, var(--prussian-blue), var(--prussian-blue-light) );--gradient-secondary: linear-gradient( 135deg, var(--orange-wheel), var(--xanthous) );--gradient-danger: linear-gradient( 135deg, var(--fire-engine-red), var(--fire-engine-red-dark) )}[data-theme=standard]{--prussian-blue: #003049;--fire-engine-red: #d62828;--orange-wheel: #f77f00;--xanthous: #fcbf49;--vanilla: #eae2b7;--prussian-blue-light: #004d73;--prussian-blue-dark: #002333;--prussian-blue-bg: rgba(0, 48, 73, .1);--fire-engine-red-light: #e85d5d;--fire-engine-red-dark: #a61f1f;--fire-engine-red-bg: rgba(214, 40, 40, .1);--orange-wheel-light: #ff9533;--orange-wheel-dark: #c66200;--orange-wheel-bg: rgba(247, 127, 0, .1);--xanthous-light: #ffd56f;--xanthous-dark: #d9a03a;--xanthous-bg: rgba(252, 191, 73, .1);--vanilla-light: #f5f0e0;--vanilla-dark: #d4cba5;--color-primary: var(--prussian-blue);--color-primary-dark: var(--prussian-blue-dark);--color-secondary: var(--orange-wheel);--color-accent: var(--xanthous);--color-danger: var(--fire-engine-red);--color-background-primary: #ffffff;--color-background-secondary: var(--vanilla);--color-background-tertiary: #f5f5f5;--navbar-background: var(--prussian-blue);--input-focus-border-color: var(--prussian-blue);--input-focus-shadow: 0 0 0 3px var(--prussian-blue-bg);--gradient-primary: linear-gradient( 135deg, var(--prussian-blue), var(--prussian-blue-light) );--gradient-secondary: linear-gradient( 135deg, var(--orange-wheel), var(--xanthous) );--gradient-danger: linear-gradient( 135deg, var(--fire-engine-red), var(--fire-engine-red-dark) )}[data-theme=julebord]{--prussian-blue: #165b33;--prussian-blue-light: #1e7a45;--prussian-blue-dark: #0f3d22;--prussian-blue-bg: rgba(22, 91, 51, .1);--fire-engine-red: #c41e3a;--fire-engine-red-light: #e03a52;--fire-engine-red-dark: #8b0000;--fire-engine-red-bg: rgba(196, 30, 58, .1);--orange-wheel: #ffd700;--orange-wheel-light: #ffe44d;--orange-wheel-dark: #ccac00;--orange-wheel-bg: rgba(255, 215, 0, .1);--xanthous: #f0f0f0;--xanthous-light: #ffffff;--xanthous-dark: #c0c0c0;--xanthous-bg: rgba(240, 240, 240, .1);--vanilla: #ffffff;--vanilla-light: #ffffff;--vanilla-dark: #f5f5f5;--christmas-green: #165b33;--christmas-red: #c41e3a;--christmas-gold: #ffd700;--christmas-silver: #c0c0c0;--christmas-snow: #ffffff;--christmas-pine: #0f3d22;--christmas-holly: #1e7a45;--christmas-cranberry: #8b0000;--christmas-ice-blue: #e6f3ff;--color-primary: var(--christmas-green);--color-primary-dark: var(--christmas-pine);--color-secondary: var(--christmas-red);--color-accent: var(--christmas-gold);--color-danger: var(--christmas-cranberry);--color-background-primary: #ffffff;--color-background-secondary: #f8f8f8;--color-background-tertiary: var(--christmas-ice-blue);--navbar-background: var(--christmas-green);--input-focus-border-color: var(--christmas-green);--input-focus-shadow: 0 0 0 3px var(--prussian-blue-bg);--gradient-primary: linear-gradient( 135deg, var(--christmas-green), var(--christmas-holly) );--gradient-secondary: linear-gradient( 135deg, var(--christmas-red), var(--christmas-gold) );--gradient-danger: linear-gradient( 135deg, var(--christmas-red), var(--christmas-cranberry) );--shadow-festive: 0 4px 20px rgba(255, 215, 0, .3);--shadow-glow-green: 0 0 20px rgba(22, 91, 51, .4);--shadow-glow-red: 0 0 20px rgba(196, 30, 58, .4);--shadow-glow-gold: 0 0 20px rgba(255, 215, 0, .5)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family-primary);background:var(--vanilla);color:var(--color-text-primary);line-height:var(--line-height-normal);min-width:320px;min-height:100vh}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{color:var(--color-text-primary);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight)}h1{font-size:var(--font-size-h1);font-weight:var(--font-weight-bold)}h2{font-size:var(--font-size-h2)}h3{font-size:var(--font-size-h3)}h4{font-size:var(--font-size-h4)}h5{font-size:var(--font-size-h5)}h6{font-size:var(--font-size-h6)}p{margin-bottom:1rem}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark);text-decoration:underline}:focus{outline:2px solid var(--color-primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:1.2rem;color:var(--color-text-secondary)}.error-page{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--spacing-xl)}.error-page h2{color:var(--color-danger);margin-bottom:var(--spacing-md)}.error-message{color:var(--fire-engine-red);background:var(--fire-engine-red-bg);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);border-left:4px solid var(--fire-engine-red);font-size:var(--font-size-small);margin-bottom:var(--spacing-md)}.error-container{padding:var(--spacing-xl);text-align:center;max-width:500px;margin:var(--spacing-xl) auto}.success-message{color:var(--color-success);background:#0478571a;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);border-left:4px solid var(--color-success);font-size:var(--font-size-small);margin-bottom:var(--spacing-md)}.warning-message{color:var(--xanthous-dark);background:var(--xanthous-bg);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);border-left:4px solid var(--xanthous);font-size:var(--font-size-small);margin-bottom:var(--spacing-md)}.no-data{text-align:center;color:var(--color-text-secondary);padding:var(--spacing-2xl) var(--spacing-xl)}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.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}.btn-primary,.btn-secondary,.btn-danger{padding:var(--button-padding-y) var(--button-padding-x);border:none;border-radius:var(--button-border-radius);font-size:var(--font-size-base);font-weight:var(--button-font-weight);font-family:var(--font-family-primary);cursor:pointer;transition:all var(--transition-base);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.btn-primary{background:var(--prussian-blue);color:var(--color-white)}.btn-primary:hover:not(:disabled){background:var(--prussian-blue-dark);transform:translateY(-1px);box-shadow:0 4px 12px #0030494d}.btn-secondary{background:var(--orange-wheel);color:var(--color-white)}.btn-secondary:hover:not(:disabled){background:var(--orange-wheel-dark);transform:translateY(-1px);box-shadow:0 4px 12px #f77f004d}.btn-danger{background:var(--fire-engine-red);color:var(--color-white)}.btn-danger:hover:not(:disabled){background:var(--fire-engine-red-dark);transform:translateY(-1px);box-shadow:0 4px 12px #d628284d}.btn-primary:disabled,.btn-secondary:disabled,.btn-danger:disabled{opacity:.6;cursor:not-allowed;transform:none}.form-group{margin-bottom:var(--spacing-lg)}.form-group label{display:block;margin-bottom:var(--spacing-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);font-family:var(--font-family-primary)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:var(--input-padding-y) var(--input-padding-x);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);font-size:var(--font-size-base);font-family:var(--font-family-primary);background:var(--color-background-primary);color:var(--color-text-primary);transition:all var(--transition-base)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--input-focus-border-color);box-shadow:var(--input-focus-shadow)}.form-group input.error{border-color:var(--fire-engine-red)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.card{background:var(--color-background-primary);border:1px solid var(--color-border-light);border-radius:var(--card-border-radius);padding:var(--card-padding);box-shadow:var(--shadow-xs);transition:all var(--transition-base)}.card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}.card-vanilla{background:var(--vanilla-light);border:1px solid var(--color-border-light);border-radius:var(--card-border-radius);padding:var(--card-padding);box-shadow:none}.tabs{display:flex;border-bottom:1px solid var(--color-border)}.tab{flex:1;padding:var(--spacing-md);background:none;border:none;cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);font-family:var(--font-family-primary);color:var(--color-text-secondary);transition:all var(--transition-base);position:relative}.tab:hover{color:var(--color-primary)}.tab.active{color:var(--color-primary);font-weight:var(--font-weight-semibold)}.tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--color-primary)}.preset-btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--vanilla-light);border:1px solid var(--vanilla-dark);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-small);font-family:var(--font-family-primary);transition:all var(--transition-base)}.preset-btn:hover{background:var(--orange-wheel);color:var(--color-white);border-color:var(--orange-wheel);transform:translateY(-2px);box-shadow:0 4px 12px #f77f004d}.preset-btn.active{background:var(--prussian-blue);color:var(--color-white);border-color:var(--prussian-blue);font-weight:var(--font-weight-semibold)}.drink-presets{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.user-info{display:flex;align-items:center;gap:var(--spacing-md);font-family:var(--font-family-primary)}@media(max-width:768px){.form-row,.drink-presets{grid-template-columns:1fr}}.chart-container{background:var(--color-background-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-xs);border:1px solid var(--color-border-light);transition:all var(--transition-base);grid-column:1 / -1;display:flex;flex-direction:column;min-height:450px}.chart-container:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);gap:var(--spacing-md);flex-wrap:wrap}.chart-title{margin:0;color:var(--color-text-primary);font-size:var(--font-size-h5);font-weight:var(--font-weight-semibold)}.chart-controls{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.chart-content{width:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:var(--spacing-sm);min-height:350px}.chart-content>*{width:100%}@media(max-width:768px){.chart-header{flex-direction:column;align-items:flex-start}.chart-controls{width:100%;justify-content:flex-start}.chart-container{padding:var(--spacing-md);min-height:400px}.chart-content{min-height:300px}}@media(max-width:480px){.chart-title{font-size:var(--font-size-h6)}.chart-container{min-height:350px}.chart-content{min-height:250px}}.auth-page{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:var(--page-padding-mobile);background:transparent}.auth-container{width:100%;max-width:440px;background:var(--color-background-primary);border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light)}.auth-container h1{margin-bottom:var(--spacing-sm);color:var(--prussian-blue);font-size:var(--font-size-h2);font-weight:var(--font-weight-bold)}.auth-subtitle{color:var(--color-text-secondary);margin-bottom:var(--spacing-2xl);font-size:var(--font-size-base)}.auth-form{margin-bottom:var(--spacing-xl)}.auth-footer{text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-small)}.auth-footer a{color:var(--prussian-blue);font-weight:var(--font-weight-medium)}.auth-footer a:hover{text-decoration:underline}.home-page{min-height:100vh}.home-header{background:var(--color-background-primary);padding:var(--spacing-lg) var(--spacing-2xl);box-shadow:var(--shadow-xs);display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-2xl)}.home-header h1{color:var(--prussian-blue);font-size:var(--font-size-h2);font-weight:var(--font-weight-bold)}.home-content{max-width:600px;margin:0 auto}.session-container{background:var(--color-background-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid var(--color-border-light)}.session-form{padding:var(--spacing-xl)}.session-form h2{margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.form-description{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);font-size:var(--font-size-small)}.session-page{min-height:100vh}.session-header{background:var(--color-background-primary);padding:var(--spacing-lg) var(--spacing-2xl);box-shadow:var(--shadow-xs);display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-2xl)}.session-header h1{color:var(--prussian-blue);font-size:var(--font-size-h3);font-weight:var(--font-weight-bold)}.session-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg)}.user-bac-card,.add-drink-card,.leaderboard-card{background:var(--color-background-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-xs);border:1px solid var(--color-border-light);transition:all var(--transition-base)}.user-bac-card:hover,.add-drink-card:hover,.leaderboard-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.user-bac-card h2,.add-drink-card h2,.leaderboard-card h2{margin-bottom:var(--spacing-md);color:var(--color-text-primary);font-size:var(--font-size-h5)}.bac-display{text-align:center;padding:var(--spacing-lg);background:var(--gradient-primary);border-radius:var(--radius-md);color:var(--color-white);margin-bottom:var(--spacing-md);box-shadow:0 2px 8px #00304933}.bac-value{display:block;font-size:3rem;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-sm)}.bac-description{display:block;font-size:1.1rem;opacity:.9}.user-rank{text-align:center;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.add-drink-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.leaderboard{display:flex;flex-direction:column;gap:var(--spacing-sm)}.leaderboard-entry{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--vanilla-light);border-radius:var(--radius-md);transition:all var(--transition-base)}.leaderboard-entry.current-user{background:var(--prussian-blue-bg);border:1px solid var(--prussian-blue);box-shadow:0 1px 4px #00304926}.leaderboard-entry .rank{font-weight:var(--font-weight-bold);font-size:1.2rem;color:var(--prussian-blue)}.leaderboard-entry .name{font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.leaderboard-entry .bac{font-size:1.1rem;font-weight:var(--font-weight-bold);color:var(--prussian-blue)}.settings-page{min-height:100vh}.page-header{background:var(--color-background-primary);padding:var(--spacing-lg) var(--spacing-2xl);box-shadow:var(--shadow-xs);display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-2xl)}.page-header h1{color:var(--prussian-blue);font-size:var(--font-size-h2);font-weight:var(--font-weight-bold)}.settings-content{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-xl)}.settings-card{background:var(--color-background-primary);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-xs);border:1px solid var(--color-border-light)}.settings-card h2{margin-bottom:var(--spacing-lg);color:var(--prussian-blue);font-size:var(--font-size-h4)}.settings-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.avatar-section{margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-xl);border-bottom:1px solid var(--color-border-light)}.avatar-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.avatar-preview{width:150px;height:150px;border-radius:50%;overflow:hidden;border:2px solid var(--color-border-light);box-shadow:var(--shadow-xs);background:var(--vanilla-light);display:flex;align-items:center;justify-content:center}.avatar-image{width:100%;height:100%;object-fit:cover}.avatar-placeholder{color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center}.avatar-controls{display:flex;gap:var(--spacing-sm);align-items:center;flex-wrap:wrap;justify-content:center}.avatar-file-input{display:none}.avatar-select-btn{cursor:pointer;display:inline-flex}.avatar-error{margin-top:var(--spacing-sm);max-width:400px;text-align:center}.avatar-file-info{font-size:var(--font-size-small);color:var(--color-text-secondary);text-align:center;max-width:300px;word-break:break-word}.danger-zone{background-color:#fef2f2;border:2px solid #dc2626;border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-top:var(--spacing-2xl)}.danger-zone h2{color:#dc2626;margin-bottom:var(--spacing-sm);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold)}.danger-zone p{color:#991b1b;margin-bottom:var(--spacing-lg);font-size:var(--font-size-base);line-height:1.5}.danger-zone .button-group{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.btn-danger-outline{border:2px solid #dc2626;color:#dc2626;background:#fff;padding:12px 24px;border-radius:var(--radius-md);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base);font-size:var(--font-size-base)}.btn-danger-outline:hover{background:#fef2f2}.btn-danger-outline:active{transform:translateY(1px)}.btn-danger{background:#dc2626;color:#fff;padding:12px 24px;border:none;border-radius:var(--radius-md);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base);font-size:var(--font-size-base)}.btn-danger:hover{background:#991b1b}.btn-danger:active{transform:translateY(1px)}.join-session-page{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:var(--spacing-xl);background:linear-gradient(135deg,var(--vanilla-light) 0%,var(--color-white) 100%)}.join-session-container{width:100%;max-width:500px}.session-info-card,.error-card{background:var(--color-background-primary);border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light);text-align:center}.session-info-card h1{color:var(--prussian-blue);margin-bottom:var(--spacing-xl);font-size:var(--font-size-h2)}.session-details{background:var(--vanilla-light);padding:var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:var(--spacing-xl)}.session-details h2,.session-details h3{color:var(--prussian-blue);margin-bottom:var(--spacing-sm);font-size:var(--font-size-h4)}.session-code{color:var(--color-text-primary);font-size:var(--font-size-base);margin-bottom:var(--spacing-xs)}.session-code strong{color:var(--prussian-blue);font-size:var(--font-size-h5);letter-spacing:.1em}.session-time{color:var(--color-text-secondary);font-size:var(--font-size-small)}.session-name{color:var(--color-text-secondary);margin-top:var(--spacing-sm);font-size:var(--font-size-base)}.auth-prompt{margin-top:var(--spacing-xl)}.auth-prompt p{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);font-size:var(--font-size-base)}.error-card{text-align:center}.error-icon{font-size:4rem;margin-bottom:var(--spacing-md);filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}.error-card h2{color:var(--prussian-blue);margin-bottom:var(--spacing-md);font-size:var(--font-size-h3)}.error-message{color:var(--fire-engine-red);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-lg);font-size:var(--font-size-base)}.button-group{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.loading{text-align:center;padding:var(--spacing-2xl)}.loading-spinner{width:60px;height:60px;margin:0 auto var(--spacing-lg);border:4px solid var(--vanilla-dark);border-top-color:var(--prussian-blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading p{color:var(--color-text-secondary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium)}@media(max-width:768px){.home-header,.session-header,.page-header{flex-direction:column;gap:var(--spacing-md);text-align:center;padding:var(--spacing-md) var(--spacing-lg)}.session-content{grid-template-columns:1fr}.auth-page{padding:var(--page-padding-mobile)}.avatar-preview{width:120px;height:120px}.avatar-controls{flex-direction:column;width:100%}.avatar-controls button,.avatar-controls label{width:100%;max-width:250px}.join-session-page{padding:var(--spacing-md)}.session-info-card,.error-card{padding:var(--spacing-lg)}.button-group{width:100%}.danger-zone{padding:var(--spacing-lg)}.danger-zone .button-group{flex-direction:column}.btn-danger-outline,.btn-danger{width:100%;margin-right:0}}@media(min-width:769px){.auth-page{padding:var(--page-padding-desktop)}}.history-page{min-height:100vh;padding:var(--spacing-2xl) var(--spacing-lg)}.history-content{max-width:1000px;margin:0 auto}@media(max-width:768px){.history-page{padding:var(--spacing-xl) var(--spacing-md)}}.burger-icon{position:fixed;top:16px;left:16px;z-index:1400;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:12px;background:transparent;border:none;border-radius:8px;cursor:pointer;color:var(--color-primary);transition:background-color var(--transition-fast),color var(--transition-fast)}.burger-icon:hover{background-color:#00304914}.burger-icon:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.burger-icon:active{background-color:#0030491f}.burger-icon svg{width:24px;height:24px}@media(max-width:768px){.burger-icon{width:48px;height:48px}}.menu-overlay{position:fixed;inset:0;z-index:1350;background-color:#000000d9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:pointer}@supports not (backdrop-filter: blur(4px)){.menu-overlay{background-color:#000000e6}}@media(prefers-reduced-motion:reduce){.menu-overlay{backdrop-filter:none;-webkit-backdrop-filter:none;background-color:#000000e6}}.menu-panel{position:fixed;top:0;left:0;bottom:0;width:min(85vw,320px);z-index:1360;background-color:var(--vanilla);box-shadow:4px 0 24px #00000026;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform}.menu-panel-content{display:flex;flex-direction:column;min-height:100%;padding:80px 0 24px}.menu-panel::-webkit-scrollbar{width:8px}.menu-panel::-webkit-scrollbar-track{background:transparent}.menu-panel::-webkit-scrollbar-thumb{background-color:#00304933;border-radius:4px}.menu-panel::-webkit-scrollbar-thumb:hover{background-color:#0030494d}@media(min-width:768px){.menu-panel{width:320px}}@media(prefers-reduced-motion:reduce){.menu-panel{transition:none}}.menu-item{position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:16px 24px;background:transparent;border:none;border-left:4px solid transparent;cursor:pointer;text-align:left;font-size:16px;font-weight:500;color:var(--color-primary);transition:background-color var(--transition-fast),border-color var(--transition-fast)}.menu-item:hover{background-color:#0030490d}.menu-item:active{background-color:#00304914}.menu-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.menu-item--active{background-color:#f77f0026;border-left-color:var(--orange-wheel);color:var(--orange-wheel);font-weight:600}.menu-item--active:hover{background-color:#f77f0033}.menu-item__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:24px;flex-shrink:0}.menu-item__label{flex:1;line-height:1.5}.menu-item__indicator{position:absolute;right:16px;width:4px;height:24px;background-color:var(--orange-wheel);border-radius:2px}@media(max-width:768px){.menu-item{padding:18px 24px;min-height:56px}}@media(prefers-reduced-motion:reduce){.menu-item{transition:none}}.user-header{display:flex;align-items:center;gap:16px;padding:24px;margin-bottom:16px;border-bottom:1px solid rgba(0,48,73,.1)}.user-header__avatar{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);border-radius:50%;color:#fff;font-size:20px;font-weight:600;flex-shrink:0}.user-header__info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.user-header__name{font-size:16px;font-weight:600;color:var(--color-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-header__email{font-size:14px;color:#00304999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.burger-menu-nav{flex:1;display:flex;flex-direction:column}.burger-menu-divider{height:1px;margin:8px 24px;background-color:#0030491a}.burger-menu-signout{display:flex;align-items:center;gap:16px;width:100%;padding:16px 24px;margin-top:auto;background:transparent;border:none;border-left:4px solid transparent;cursor:pointer;text-align:left;font-size:16px;font-weight:500;color:var(--color-primary);transition:background-color var(--transition-fast),color var(--transition-fast)}.burger-menu-signout:hover{background-color:#d628281a;color:#d62828}.burger-menu-signout:hover .burger-menu-signout__icon{color:#d62828}.burger-menu-signout:active{background-color:#d6282826}.burger-menu-signout:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.burger-menu-signout__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:24px;flex-shrink:0;color:var(--color-primary);transition:color var(--transition-fast)}.burger-menu-signout__label{flex:1;line-height:1.5}@media(max-width:768px){.burger-menu-signout{padding:18px 24px;min-height:56px}}@media(prefers-reduced-motion:reduce){.burger-menu-signout{transition:none}}.animated-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-index-sticky);background-color:var(--vanilla)}.animated-header__container{max-width:1400px;margin:0 auto;padding:0 var(--spacing-lg);height:100%;display:flex;align-items:center;justify-content:space-between}.animated-header__title{flex:1;display:flex;align-items:center;padding-left:64px}.animated-header__title h1{margin:0;font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);color:var(--prussian-blue);line-height:var(--line-height-tight)}.animated-header__user{display:flex;align-items:center;gap:var(--spacing-md)}.animated-header__user-info{display:flex;flex-direction:column;align-items:flex-end}.animated-header__user-name{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--prussian-blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.animated-header__user-avatar{width:40px;height:40px;border-radius:var(--radius-full);overflow:hidden;background:linear-gradient(135deg,var(--prussian-blue),var(--prussian-blue-light));display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base)}.animated-header__user-avatar:hover{box-shadow:var(--shadow-md)}.animated-header__user-avatar img{width:100%;height:100%;object-fit:cover}.animated-header__user-initials{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);color:var(--color-text-inverse);-webkit-user-select:none;user-select:none}@media(max-width:768px){.animated-header__container{padding:0 var(--spacing-md)}.animated-header__title{padding-left:56px}.animated-header__title h1{font-size:var(--font-size-h5)}.animated-header__user-info{display:none}.animated-header__user-avatar{width:36px;height:36px}.animated-header__user-initials{font-size:var(--font-size-tiny)}}@media(max-width:480px){.animated-header__container{padding:0 var(--spacing-sm)}.animated-header__title{padding-left:56px}.animated-header__title h1{font-size:var(--font-size-h6)}}@media(prefers-reduced-motion:reduce){.animated-header{transition:none}.animated-header *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.protected-layout{min-height:100vh;background:var(--vanilla);position:relative;overflow-x:hidden}.protected-layout__content{padding-top:80px;padding-bottom:var(--spacing-2xl);min-height:100vh;width:100%;max-width:1400px;margin:0 auto}@media(max-width:768px){.protected-layout__content{padding-top:80px}}.admin-header{position:fixed;top:0;left:0;right:0;background:var(--prussian-blue);color:var(--color-text-inverse);padding:var(--spacing-lg) var(--spacing-xl);box-shadow:var(--shadow-md);z-index:900;display:flex;align-items:center;justify-content:center}.admin-header h1{margin:0;font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);color:var(--color-text-inverse)}.admin-layout__content{padding-top:100px;padding-bottom:var(--spacing-2xl);padding-left:var(--spacing-xl);padding-right:var(--spacing-xl);min-height:100vh;width:100%;max-width:1400px;margin:0 auto}@media(max-width:768px){.admin-header{padding:var(--spacing-md) var(--spacing-lg)}.admin-header h1{font-size:var(--font-size-h5)}.admin-layout__content{padding-top:90px;padding-left:var(--spacing-md);padding-right:var(--spacing-md)}}.public-layout{min-height:100vh;background:var(--vanilla);display:flex;align-items:center;justify-content:center}.layout-loading{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--vanilla);gap:var(--spacing-lg)}.layout-loading p{font-size:var(--font-size-h5);color:var(--prussian-blue);margin:0;font-weight:var(--font-weight-medium)}.loading-spinner{width:48px;height:48px;border:4px solid var(--vanilla-dark);border-top-color:var(--prussian-blue);border-radius:var(--radius-full);animation:spinner-rotate 1s linear infinite}@keyframes spinner-rotate{to{transform:rotate(360deg)}}.layout-error{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--vanilla);padding:var(--spacing-lg)}.error-card{background:var(--color-background-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-2xl);max-width:500px;width:100%;text-align:center}.error-card h2{margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-h3);color:var(--prussian-blue);font-weight:var(--font-weight-bold)}.error-message{color:var(--fire-engine-red);margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-base);font-weight:var(--font-weight-medium)}.error-hint{font-size:var(--font-size-small);color:var(--color-text-secondary);margin:0 0 var(--spacing-xl) 0;line-height:var(--line-height-relaxed)}.retry-button{padding:var(--spacing-md) var(--spacing-xl);background:var(--prussian-blue);color:var(--color-text-inverse);border:none;border-radius:var(--radius-sm);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.retry-button:hover{background:var(--prussian-blue-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}.retry-button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.retry-button:focus{outline:2px solid var(--prussian-blue);outline-offset:2px}@media(max-width:768px){.error-card{padding:var(--spacing-xl)}.error-card h2{font-size:var(--font-size-h4)}}@media(max-width:480px){.layout-loading p{font-size:var(--font-size-base)}.loading-spinner{width:40px;height:40px;border-width:3px}}@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none;border-top-color:var(--vanilla-dark)}.retry-button{transition:none}.retry-button:hover,.retry-button:active{transform:none}}