:root{--color-primary: #667eea;--color-primary-dark: #764ba2;--color-primary-light: #667eea20;--color-primary-dark-light: #764ba220;--color-success: #48bb78;--color-success-dark: #38a169;--color-success-light: #d1fae5;--color-success-lighter: #a7f3d0;--color-success-text: #065f46;--color-danger: #e53e3e;--color-danger-dark: #c53030;--color-danger-light: #fed7d7;--color-danger-lighter: #fecaca;--color-danger-border: #fc8181;--color-danger-bg: #fff5f5;--color-warning: #f59e0b;--color-warning-gold: #ffd700;--color-warning-light: #fef3c7;--color-warning-lighter: #fde68a;--color-warning-text: #92400e;--color-info: #2563eb;--color-info-light: #0ea5e9;--color-info-lighter: #dbeafe;--color-info-lightest: #bfdbfe;--color-info-dark: #1d4ed8;--text-darkest: #1a1a1a;--text-dark: #2d3748;--text-dark-alt: #1f2937;--text-medium: #4a5568;--text-medium-alt: #374151;--text-light: #718096;--text-light-alt: #6b7280;--text-lighter: #9ca3af;--text-lighter-alt: #a0aec0;--text-lightest: #cbd5e0;--text-gray: #888;--text-gray-light: #cccccc;--bg-white: white;--bg-light: #f8fafc;--bg-light-alt: #f5f7fa;--bg-medium: #e2e8f0;--bg-medium-alt: #c3cfe2;--bg-card: #f7fafc;--bg-card-dark: #edf2f7;--bg-dark: #1a1a1a;--bg-dark-gray: #333;--border-light: #e2e8f0;--border-white: rgba(255, 255, 255, .8);--border-white-light: rgba(255, 255, 255, .2);--border-white-medium: rgba(255, 255, 255, .3);--border-primary-light: rgba(102, 126, 234, .25);--border-primary-medium: rgba(102, 126, 234, .6);--overlay-dark: rgba(0, 0, 0, .5);--overlay-danger-hover: rgba(197, 48, 48, .1);--opacity-disabled: .6;--opacity-hover: .8;--opacity-subtle: .7;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--avatar-sm: 32px;--avatar-md: 48px;--avatar-lg: 64px;--icon-button-sm: 1.5rem;--icon-button-md: 2rem;--icon-button-lg: 2.5rem;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 10px;--radius-xl: 12px;--radius-2xl: 16px;--radius-3xl: 20px;--radius-full: 50%;--border-thin: 1px;--border-medium: 2px;--border-thick: 3px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-sm-alt: 0 2px 10px rgba(0, 0, 0, .1);--shadow-md: 0 4px 20px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .12);--shadow-lg-alt: 0 8px 24px rgba(0, 0, 0, .12);--shadow-xl: 0 20px 40px rgba(0, 0, 0, .15);--shadow-xl-alt: 0 20px 60px rgba(0, 0, 0, .3);--shadow-primary: 0 4px 12px rgba(102, 126, 234, .3);--shadow-primary-sm: 0 2px 8px rgba(102, 126, 234, .2);--shadow-primary-lg: 0 6px 20px rgba(102, 126, 234, .4);--shadow-success: 0 2px 8px rgba(72, 187, 120, .3);--shadow-success-hover: 0 4px 12px rgba(72, 187, 120, .4);--shadow-danger: 0 2px 8px rgba(229, 62, 62, .3);--shadow-danger-hover: 0 4px 12px rgba(229, 62, 62, .4);--shadow-danger-light: 0 2px 8px rgba(245, 101, 101, .2);--shadow-focus: 0 0 0 3px rgba(102, 126, 234, .1);--font-xs: .7rem;--font-xs-alt: .75rem;--font-sm: .8rem;--font-sm-alt: .85rem;--font-base: .9rem;--font-base-alt: 1rem;--font-text: .95rem;--font-md: 1rem;--font-lg: 1.1rem;--font-xl: 1.25rem;--font-xl-alt: 1.3rem;--font-2xl: 1.5rem;--font-2xl-alt: 1.75rem;--font-3xl: 2rem;--font-3xl-alt: 2.5rem;--font-4xl: 3.5rem;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-extrabold: 800;--line-height-tight: 1.1;--line-height-normal: 1.5;--line-height-relaxed: 1.6;--transition-fast: .2s;--transition-base: .3s;--transition-slow: .5s;--ease-default: ease;--ease-in-out: ease-in-out;--ease-linear: linear;--z-dropdown: 999;--z-sticky: 1000;--z-navbar: 1003;--z-popover: 1050;--z-tooltip: 1060;--z-modal: 1100;--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);--gradient-bg-light: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-medium) 100%);--gradient-bg-alt: linear-gradient(135deg, var(--bg-light-alt) 0%, var(--bg-medium-alt) 100%);--gradient-primary-bg: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark-light));--breakpoint-xs: 360px;--breakpoint-sm: 480px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;width:100%}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.avatar-container{position:relative;display:inline-block;flex-shrink:0}.avatar-container.avatar-display-small{width:var(--avatar-sm);height:var(--avatar-sm)}.avatar-container.avatar-display-medium{width:var(--avatar-md);height:var(--avatar-md)}.avatar-container.avatar-display-large{width:var(--avatar-lg);height:var(--avatar-lg)}.avatar-display{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);flex-shrink:0;overflow:hidden;position:relative}.avatar-display-small{width:var(--avatar-sm);height:var(--avatar-sm);font-size:var(--font-sm)}.avatar-display-medium{width:var(--avatar-md);height:var(--avatar-md);font-size:var(--font-lg)}.avatar-display-large{width:var(--avatar-lg);height:var(--avatar-lg);font-size:var(--font-xl)}.avatar-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border:2px solid var(--border-white-medium);border-radius:var(--radius-full);transition:opacity .2s ease-in-out;z-index:1}.avatar-initials{color:var(--bg-white);font-weight:var(--weight-bold);-webkit-user-select:none;user-select:none;border:2px solid rgba(255,255,255,.2);z-index:0}.avatar-initials-text{line-height:1;letter-spacing:-.025em}.avatar-container:hover .avatar-display{opacity:var(--opacity-hover);transition:opacity var(--transition-fast) var(--ease-default)}.navbar{background:var(--gradient-primary);box-shadow:var(--shadow-sm-alt);position:sticky;top:0;z-index:var(--z-navbar);padding:0 var(--space-xl);--navbar-button-height: 56px}.navbar-container{width:100%;display:flex;justify-content:space-between;align-items:center;height:70px}.navbar-brand{display:flex;align-items:center}.brand-link{display:flex;align-items:center;text-decoration:none;color:var(--bg-white);font-weight:var(--weight-bold);font-size:var(--font-2xl);transition:opacity var(--transition-base) var(--ease-default)}.brand-link:hover{opacity:.8}.brand-logo{height:40px;width:auto;margin-right:var(--space-sm)}.brand-text{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.025em}.user-menu-container{position:relative}.user-menu-button{display:flex;align-items:center;gap:var(--space-xs);background:#ffffff1a;padding:0 var(--space-lg);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-white-light);cursor:pointer;transition:all var(--transition-base) var(--ease-default);color:var(--bg-white);font:inherit;font-weight:var(--weight-semibold);font-size:var(--font-lg);position:relative;overflow:hidden;height:var(--navbar-button-height);box-sizing:border-box}.user-menu-button:hover{background:#ffffff26;transform:translateY(-1px)}.user-menu-button .user-avatar-small{width:20px;height:20px;flex-shrink:0}.user-menu-button .user-avatar-small.avatar-image{border:1px solid var(--border-white-medium)}.user-menu-button .user-avatar-small.avatar-initials{border:1px solid rgba(255,255,255,.2);font-size:var(--font-xs)}.user-name{color:var(--bg-white);font-weight:var(--weight-semibold);font-size:var(--font-lg);line-height:var(--line-height-tight);margin:0}.tier-badge{font-size:var(--font-xs);font-weight:var(--weight-bold);padding:var(--space-xs) .375rem;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;line-height:1}.tier-badge.tier-free{background:var(--border-white-light);color:var(--text-lightest);border:var(--border-thin) solid var(--border-white-medium)}.tier-badge.tier-pro{background:#2563eb33;color:#93c5fd;border:var(--border-thin) solid rgba(96,165,250,.3)}.tier-badge.tier-max{background:linear-gradient(135deg,#d977064d,#f59e0b4d);color:var(--color-warning-gold);border:var(--border-thin) solid rgba(251,191,36,.4);box-shadow:0 0 8px #fbbf2433}.dropdown-arrow{transition:transform var(--transition-base) var(--ease-default);color:#fffc;flex-shrink:0;margin:0}.dropdown-arrow.open{transform:rotate(180deg)}.user-dropdown{position:absolute;top:100%;right:0;margin-top:var(--space-xs);background:var(--bg-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);min-width:200px;overflow:hidden;z-index:var(--z-tooltip);animation:dropdownFadeIn var(--transition-fast) var(--ease-default)}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);color:var(--text-medium-alt);text-decoration:none;background:none;border:none;width:100%;font:inherit;cursor:pointer;transition:background-color var(--transition-fast) var(--ease-default);position:relative;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.dropdown-item:hover:not(.disabled){background-color:#f3f4f6}.dropdown-item.disabled{color:var(--text-lighter);cursor:not-allowed;justify-content:space-between}.dropdown-item .coming-soon{font-size:var(--font-xs-alt);color:var(--text-light-alt);background:#f3f4f6;padding:.25rem var(--space-xs);border-radius:var(--radius-sm);font-weight:var(--weight-medium)}.dropdown-divider{height:1px;background:#e5e7eb;margin:.25rem 0}.dropdown-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:var(--z-sticky)}.navbar-menu{display:flex;list-style:none;margin:0;padding:0;gap:var(--space-xl)}.navbar-item{position:relative}.navbar-link{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);text-decoration:none;color:var(--bg-white);font-weight:var(--weight-semibold);font-size:var(--font-lg);border-radius:var(--radius-xl);transition:all var(--transition-base) var(--ease-default);position:relative;overflow:hidden;height:var(--navbar-button-height);box-sizing:border-box}.navbar-link:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--transition-slow) var(--ease-default)}.navbar-link:hover:before{left:100%}.navbar-link:hover{background-color:#ffffff26;transform:translateY(-1px)}.navbar-link.active{background-color:#fff3;box-shadow:0 2px 8px #00000026}.navbar-link.active:after{content:"";position:absolute;bottom:0;left:50%;width:30px;height:2px;background-color:var(--color-warning-gold);transform:translate(-50%);border-radius:1px}.mobile-menu-toggle{display:none;background:none;border:none;color:var(--bg-white);cursor:pointer;padding:var(--space-xs);margin-right:calc(-1 * var(--space-xs));border-radius:var(--radius-md);transition:background-color var(--transition-base) var(--ease-default);z-index:var(--z-popover)}.mobile-menu-toggle:hover{background-color:#ffffff1a}.mobile-menu-overlay{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--overlay-dark);z-index:var(--z-dropdown)}.desktop-only{display:block}@media(max-width:1024px){.navbar{padding:0 var(--space-lg)}.navbar-menu{gap:var(--space-lg)}}@media(max-width:768px){.navbar{padding:0 var(--space-md)}.navbar-container{height:60px;position:relative}.mobile-menu-toggle{display:block}.navbar-menu{position:fixed;top:60px;right:-100%;width:280px;height:calc(100vh - 60px);background:var(--gradient-primary);flex-direction:column;align-items:stretch;padding:var(--space-xl) 0;gap:0;box-shadow:-4px 0 20px #0000001a;transition:right var(--transition-base) var(--ease-default);z-index:var(--z-sticky)}.navbar-menu.mobile-menu-open{right:0}.mobile-menu-overlay{display:block}.navbar-item{width:100%}.navbar-link{padding:var(--space-md) var(--space-xl);font-size:var(--font-base-alt);width:100%;justify-content:flex-start;border-radius:0;border-bottom:1px solid var(--border-white-light)}.navbar-link:hover{background-color:#ffffff26;transform:none}.navbar-link.active{background-color:#fff3;border-left:4px solid var(--color-warning-gold)}.brand-text{font-size:var(--font-xl)}.brand-logo{height:32px}.user-menu-button{height:auto;padding:var(--space-sm) var(--space-md)}.user-dropdown{right:calc(-1 * var(--space-md));width:calc(100vw - var(--space-xl));max-width:280px;z-index:var(--z-navbar)}.desktop-only{display:none}.mobile-user-divider{border-top:1px solid var(--border-white-light);margin-top:var(--space-xs);padding-top:var(--space-md)}.mobile-user-header{display:flex!important;align-items:center!important;gap:var(--space-sm)!important;padding:var(--space-sm) var(--space-xl)!important;color:#ffffffe6!important;font-weight:var(--weight-semibold)!important;width:100%!important}.mobile-user-header .mobile-user-avatar{width:32px;height:32px}.mobile-user-header .mobile-user-avatar.avatar-image{border:2px solid var(--border-white-medium)}.mobile-user-header .mobile-user-avatar.avatar-initials{border:2px solid rgba(255,255,255,.2);font-size:var(--font-sm)}.mobile-user-name{font-size:var(--font-base-alt)}.mobile-user-option{justify-content:flex-start;color:#fffc!important;background:none!important;border:none!important;width:100%!important;text-align:left!important;display:flex!important;align-items:center!important;gap:var(--space-xs)!important}.mobile-user-option:hover:not(.disabled){background-color:#ffffff26;color:var(--bg-white)}.mobile-user-option.disabled{color:#ffffff80;cursor:not-allowed;justify-content:flex-start!important}.coming-soon-mobile{font-size:var(--font-xs-alt);color:#fff6;background:#ffffff1a;padding:.25rem var(--space-xs);border-radius:var(--radius-sm);font-weight:var(--weight-medium)}}@media(max-width:480px){.navbar{padding:0 var(--space-sm)}.navbar-container{height:56px}.navbar-menu{top:56px;height:calc(100vh - 56px);width:100vw;right:-100vw}.navbar-menu.mobile-menu-open{right:0}.brand-text{font-size:var(--font-lg)}.brand-logo{height:28px}.navbar-link{padding:1.25rem var(--space-lg);font-size:var(--font-lg)}.navbar-link span{margin-left:var(--space-sm)}}@media(max-width:360px){.navbar{padding:0 var(--space-xs)}.brand-text{display:none}.brand-logo{margin-right:0}}.footer{background-color:var(--bg-dark);color:var(--bg-white);padding:var(--space-xl) 0 var(--space-md);margin-top:auto}.footer-content{max-width:1200px;margin:0 auto;padding:0 var(--space-xl);display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-xl)}.footer-section h4{color:var(--color-primary);margin-bottom:var(--space-md);font-size:var(--font-lg);font-weight:var(--weight-semibold)}.footer-section p{color:var(--text-gray-light);line-height:var(--line-height-relaxed)}.footer-links{list-style:none;padding:0;margin:0}.footer-links li{margin-bottom:var(--space-xs)}.footer-links a{color:var(--text-gray-light);text-decoration:none;transition:color var(--transition-base) var(--ease-default)}.footer-links a:hover{color:var(--color-primary)}.footer-bottom{border-top:1px solid var(--bg-dark-gray);margin-top:var(--space-xl);padding-top:var(--space-md);text-align:center}.footer-bottom p{color:var(--text-gray);margin:0;font-size:var(--font-base)}@media(max-width:768px){.footer-content{grid-template-columns:1fr;text-align:center}.footer{padding:var(--space-lg) 0 var(--space-md)}}.landing-container{min-height:calc(100vh - 70px);width:100%;background:var(--gradient-bg-alt)}.landing-hero{text-align:center;padding:var(--space-2xl) var(--space-xl);max-width:900px;margin:0 auto}.landing-logo{height:140px;width:auto;margin-bottom:var(--space-xl);filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}.landing-title{font-size:var(--font-4xl);font-weight:var(--weight-extrabold);color:var(--text-dark);margin:0 0 var(--space-lg) 0;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.landing-tagline{font-size:var(--font-xl);color:var(--text-medium);margin-bottom:var(--space-2xl);line-height:var(--line-height-relaxed);max-width:700px;margin-left:auto;margin-right:auto}.landing-cta-button{background:var(--gradient-primary);color:var(--bg-white);border:none;padding:16px 32px;font-size:var(--font-lg);font-weight:var(--weight-semibold);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base) var(--ease-default);box-shadow:var(--shadow-primary)}.landing-cta-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-primary-lg)}.landing-features{padding:var(--space-2xl) var(--space-xl);max-width:1200px;margin:0 auto;text-align:center}.features-title{font-size:var(--font-3xl);font-weight:var(--weight-bold);color:var(--text-dark);margin:0 0 var(--space-lg) 0}.features-intro{font-size:var(--font-lg);color:var(--text-medium);margin-bottom:var(--space-2xl);max-width:800px;margin-left:auto;margin-right:auto;line-height:var(--line-height-relaxed)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-xl);margin-top:var(--space-2xl)}.landing-feature-card{background:var(--bg-white);padding:var(--space-xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);transition:all var(--transition-base) var(--ease-default);border:1px solid var(--border-white)}.landing-feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}.feature-icon{font-size:3rem;margin-bottom:var(--space-md)}.landing-feature-card h3{font-size:var(--font-2xl);font-weight:var(--weight-bold);color:var(--text-dark);margin:0 0 var(--space-md) 0}.landing-feature-card p{color:var(--text-light);font-size:var(--font-base-alt);line-height:var(--line-height-normal);margin:0}.landing-cta{text-align:center;padding:var(--space-2xl) var(--space-xl);max-width:800px;margin:0 auto;background:var(--bg-white);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);margin-bottom:var(--space-2xl)}.cta-heading{font-size:var(--font-3xl);font-weight:var(--weight-bold);color:var(--text-dark);margin:0 0 var(--space-lg) 0}.cta-text{font-size:var(--font-lg);color:var(--text-medium);margin-bottom:var(--space-xl);line-height:var(--line-height-relaxed)}.landing-cta-button-secondary{background:var(--gradient-primary);color:var(--bg-white);border:none;padding:14px 28px;font-size:var(--font-base-alt);font-weight:var(--weight-semibold);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base) var(--ease-default);box-shadow:var(--shadow-primary)}.landing-cta-button-secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow-primary-lg)}.user-welcome{text-align:center;margin-bottom:var(--space-xl)}.user-avatar{width:var(--avatar-lg);height:var(--avatar-lg);border-radius:var(--radius-full);margin-bottom:var(--space-md);border:var(--border-thick) solid var(--color-primary);box-shadow:var(--shadow-md)}.about-section{padding:var(--space-2xl) var(--space-xl);background:var(--bg-white);margin-top:var(--space-2xl)}.about-hero{text-align:center;max-width:900px;margin:0 auto var(--space-2xl)}.about-title{font-size:var(--font-3xl);font-weight:var(--weight-bold);color:var(--text-dark);margin:0 0 var(--space-lg) 0}.about-subtitle{font-size:var(--font-xl);color:var(--text-medium);line-height:var(--line-height-relaxed)}.about-content{max-width:900px;margin:0 auto}.about-story,.about-vision{margin-bottom:var(--space-2xl)}.about-story h3,.about-vision h3,.creator-section h3{font-size:var(--font-2xl);font-weight:var(--weight-bold);color:var(--text-dark);margin:0 0 var(--space-lg) 0}.about-story p,.about-vision>p{color:var(--text-medium);font-size:var(--font-lg);line-height:var(--line-height-relaxed);margin:0 0 var(--space-lg) 0}.creator-section{margin-bottom:var(--space-2xl)}.creator-card{background:var(--bg-card);padding:var(--space-xl);border-radius:var(--radius-xl);border-left:var(--border-thick) solid var(--color-primary)}.creator-content{color:var(--text-medium);font-size:var(--font-lg);line-height:var(--line-height-relaxed)}.creator-message{margin:0 0 var(--space-lg) 0;font-style:italic}.creator-signature{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:var(--border-thin) solid var(--border-light)}.creator-name{font-size:var(--font-xl);font-weight:var(--weight-bold);color:var(--text-dark);margin:0 0 var(--space-xs) 0}.creator-title{font-size:var(--font-base-alt);color:var(--text-light);margin:0}.vision-points{display:grid;gap:var(--space-lg);margin-top:var(--space-xl)}.vision-point{padding:var(--space-lg);background:var(--bg-card);border-radius:var(--radius-lg);border-left:var(--border-thick) solid var(--color-primary)}.vision-point h4{font-size:var(--font-xl);font-weight:var(--weight-semibold);color:var(--text-dark);margin:0 0 var(--space-sm) 0}.vision-point p{margin:0;font-size:var(--font-base-alt);color:var(--text-medium)}.loading{font-size:var(--font-xl);color:var(--text-medium);padding:var(--space-xl);text-align:center}@media(max-width:1024px){.landing-hero,.landing-features,.about-section{padding:var(--space-xl) var(--space-lg)}.features-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media(max-width:768px){.landing-hero,.landing-features,.landing-cta,.about-section{padding:var(--space-lg) var(--space-md)}.landing-logo{height:100px}.landing-title{font-size:var(--font-3xl-alt)}.landing-tagline,.features-intro,.cta-text{font-size:var(--font-base-alt)}.features-title,.cta-heading{font-size:var(--font-2xl)}.features-grid{grid-template-columns:1fr;gap:var(--space-lg)}.landing-cta-button{padding:14px 28px;font-size:var(--font-base-alt)}}@media(max-width:480px){.landing-hero,.landing-features,.landing-cta,.about-section{padding:var(--space-md) var(--space-sm)}.landing-logo{height:80px}.landing-title{font-size:var(--font-3xl)}.landing-feature-card{padding:var(--space-lg)}.feature-icon{font-size:2.5rem}.about-content{padding:0}.creator-card,.vision-point{padding:var(--space-md)}}.board-games-container{min-height:calc(100vh - 70px);width:100%;background:var(--gradient-bg-light);padding:var(--space-xl)}.add-game-button{display:flex;align-items:center;gap:var(--space-xs);background:var(--color-success);color:var(--bg-white);border:none;border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-size:var(--font-base);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-base) var(--ease-default);box-shadow:var(--shadow-success)}.add-game-button:hover{background:var(--color-success-dark);transform:translateY(-2px);box-shadow:var(--shadow-success-hover)}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--space-lg);margin-bottom:var(--space-xl)}.game-card{background:var(--bg-white);border-radius:var(--radius-2xl);padding:var(--space-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-white);transition:all var(--transition-base) var(--ease-default);position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gradient-primary)}.game-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.game-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-md)}.game-title{font-size:var(--font-xl);font-weight:var(--weight-bold);color:var(--text-dark);margin:0;line-height:var(--line-height-tight);flex:1}.game-header-actions{display:flex;align-items:center;gap:var(--space-xs);margin-left:var(--space-md);flex-shrink:0}.game-id{background:var(--bg-card);color:var(--text-light);padding:.25rem var(--space-sm);border-radius:var(--radius-xl);font-size:var(--font-sm);font-weight:var(--weight-semibold)}.delete-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--radius-sm);background:#fee2e2;color:var(--color-danger-dark);cursor:pointer;transition:all var(--transition-fast) var(--ease-default);opacity:.8}.delete-button svg{width:16px;height:16px;stroke-width:2}.delete-button:hover:not(:disabled){background:#fecaca;color:var(--color-danger-dark);transform:scale(1.05);opacity:1}.delete-button:disabled{opacity:.6;cursor:not-allowed}.delete-button .spinner{animation:spin 1s var(--ease-linear) infinite}.game-description{color:var(--text-medium);line-height:var(--line-height-relaxed);margin:0 0 var(--space-lg) 0;font-size:var(--font-text)}.game-categories{border-top:1px solid var(--border-light);padding-top:var(--space-md)}.categories-header{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-sm);color:var(--text-light);font-size:var(--font-base);font-weight:var(--weight-semibold)}.categories-list{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.category-tag{background:linear-gradient(135deg,#667eea15,#764ba215);color:var(--color-primary);padding:.25rem var(--space-sm);border-radius:var(--radius-2xl);font-size:var(--font-sm);font-weight:var(--weight-medium);border:1px solid rgba(102,126,234,.2);transition:all var(--transition-fast) var(--ease-default)}.category-tag:hover{background:linear-gradient(135deg,#667eea25,#764ba225);transform:translateY(-1px)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;color:var(--text-light)}.loading-spinner{animation:spin 1s var(--ease-linear) infinite;margin-bottom:var(--space-md);color:var(--color-primary)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;text-align:center;color:var(--text-light)}.empty-state p{margin:0}@media(max-width:1024px){.board-games-container{padding:var(--space-lg)}.games-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem}}@media(max-width:768px){.board-games-container{padding:var(--space-md);min-height:calc(100vh - 60px)}.page-header{flex-direction:column;gap:var(--space-md);text-align:center;padding:var(--space-lg);margin-bottom:var(--space-lg)}.header-actions{flex-direction:column;gap:var(--space-sm)}.games-grid{grid-template-columns:1fr;gap:var(--space-md)}.game-card{padding:1.25rem;border-radius:var(--radius-xl)}.page-header h1{font-size:var(--font-2xl-alt)}.header-icon{padding:.6rem}.count-badge{padding:.4rem var(--font-sm);font-size:var(--font-sm-alt)}}@media(max-width:480px){.board-games-container{padding:var(--space-sm);min-height:calc(100vh - 56px)}.page-header{padding:1.25rem;margin-bottom:var(--space-md)}.page-header h1{font-size:var(--font-2xl)}.page-header p{font-size:var(--font-base)}.game-card{padding:var(--space-md);border-radius:var(--radius-lg)}.game-card-header{flex-direction:column;align-items:flex-start;gap:var(--space-xs);margin-bottom:var(--space-sm)}.game-title{font-size:var(--font-lg);line-height:1.2}.game-header-actions{margin-left:0;align-self:flex-start}.game-id{margin-left:0;align-self:flex-start;font-size:var(--font-xs-alt);padding:.2rem .6rem}.game-description{font-size:var(--font-base);margin-bottom:1.25rem}.categories-header{font-size:var(--font-sm-alt);margin-bottom:var(--space-xs)}.categories-list{gap:.25rem}.category-tag{font-size:var(--font-xs);padding:.2rem .6rem;border-radius:var(--radius-xl)}.loading-state,.error-state,.empty-state{height:300px}.loading-spinner{width:40px;height:40px}.error-icon,.empty-icon{width:48px;height:48px}.retry-button{padding:.6rem 1.2rem;font-size:var(--font-base)}}@media(max-width:360px){.board-games-container{padding:var(--space-xs)}.page-header{padding:var(--space-md)}.page-header h1{font-size:var(--font-xl-alt)}.game-card{padding:var(--space-sm)}.game-title{font-size:var(--font-base-alt)}.game-description{font-size:var(--font-sm-alt)}.category-tag{font-size:.65rem;padding:.15rem var(--space-xs)}}.modal-content{background:var(--bg-white);border-radius:var(--radius-2xl);padding:var(--space-xl);max-width:400px;width:100%;box-shadow:var(--shadow-xl);transform:scale(.95);animation:modalAppear var(--transition-fast) var(--ease-default) forwards}.modal-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg)}.modal-icon{color:var(--color-danger-dark)}.delete-confirm-button{display:flex;align-items:center;gap:var(--space-xs);background:var(--color-danger-dark);color:var(--bg-white);border:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-fast) var(--ease-default)}.delete-confirm-button:hover:not(:disabled){background:var(--color-danger-dark);transform:translateY(-1px)}.delete-confirm-button:disabled{opacity:.7;cursor:not-allowed;transform:none}@media(max-width:480px){.modal-content{padding:var(--space-lg);margin:var(--space-xs)}.modal-actions{flex-direction:column}.cancel-button,.delete-confirm-button{width:100%;justify-content:center}}.sync-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--radius-sm);background:#dbeafe;color:var(--color-info);cursor:pointer;transition:all var(--transition-fast) var(--ease-default);opacity:.8;margin-right:var(--space-xs)}.sync-button:hover:not(:disabled){background:#bfdbfe;color:var(--color-info-dark);transform:scale(1.05);opacity:1}.sync-button:disabled{opacity:.6;cursor:not-allowed}.bgg-info{background:#f0f9ff;border:1px solid #e0f2fe;border-radius:var(--radius-md);padding:var(--space-sm);margin-bottom:var(--space-md)}.bgg-link{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs)}.bgg-link a{color:var(--color-info-light);text-decoration:none;font-weight:var(--weight-medium);font-size:var(--font-base)}.bgg-link a:hover{color:#0284c7;text-decoration:underline}.bgg-rating{color:var(--color-warning);font-weight:var(--weight-semibold);font-size:var(--font-sm-alt)}.game-meta{display:flex;gap:var(--space-sm);font-size:var(--font-sm);color:#64748b}.game-meta span{background:var(--bg-light);padding:.2rem var(--space-xs);border-radius:var(--radius-xs)}.bgg-sync-modal{max-width:600px}.bgg-sync-modal .modal-icon{color:var(--color-info)}.bgg-results{max-height:400px;overflow-y:auto;margin:var(--space-md) 0}.bgg-result-item{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-md);border:1px solid var(--border-light);border-radius:var(--radius-md);margin-bottom:var(--space-sm);background:#fafafa}.bgg-result-info{flex:1}.bgg-result-info h4{margin:0 0 var(--space-xs) 0;color:var(--text-dark-alt);font-size:var(--font-base-alt);font-weight:var(--weight-semibold)}.bgg-result-info p{margin:0 0 var(--space-xs) 0;color:var(--text-light-alt);font-size:var(--font-base);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bgg-result-meta{display:flex;gap:var(--space-sm);font-size:var(--font-sm);color:var(--text-lighter)}.bgg-result-meta span{background:#f3f4f6;padding:.2rem var(--space-xs);border-radius:var(--radius-xs)}.sync-select-button{background:var(--color-info);color:var(--bg-white);border:none;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);font-size:var(--font-sm-alt);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-fast) var(--ease-default);white-space:nowrap}.sync-select-button:hover:not(:disabled){background:var(--color-info-dark);transform:translateY(-1px)}.sync-select-button:disabled{opacity:.7;cursor:not-allowed}.no-results{text-align:center;padding:var(--space-xl);color:var(--text-light-alt);font-style:italic}@media(max-width:480px){.bgg-result-item{flex-direction:column;gap:var(--space-sm)}.sync-select-button{width:100%}.game-meta{flex-direction:column;gap:.25rem}.bgg-sync-modal{max-width:100%}}.board-game-search-container{max-width:1200px;margin:0 auto;padding:var(--space-xl)}.search-header{margin-bottom:var(--space-xl)}.back-button{display:flex;align-items:center;gap:var(--space-xs);background:none;border:none;color:var(--text-light-alt);cursor:pointer;font-size:var(--font-sm-alt);margin-bottom:var(--space-lg);padding:var(--space-xs) 0;transition:color var(--transition-fast) var(--ease-default)}.back-button:hover{color:var(--text-medium-alt)}.search-title{display:flex;align-items:center;gap:var(--space-md)}.ai-icon{color:#8b5cf6;background:#f3f4f6;padding:var(--space-sm);border-radius:var(--space-sm);box-shadow:0 1px 3px #0000001a}.search-title h1{margin:0;font-size:var(--space-xl);font-weight:700;color:#111827}.search-title p{margin:.25rem 0 0;color:var(--text-light-alt);font-size:var(--space-md)}.search-section{background:#fff;border-radius:var(--space-sm);padding:var(--space-xl);box-shadow:0 1px 3px #0000001a;margin-bottom:var(--space-xl)}.search-input-container{display:flex;align-items:center;gap:var(--space-md);background:#f9fafb;border:2px solid #e5e7eb;border-radius:var(--space-sm);padding:var(--space-md);transition:border-color var(--transition-fast) ease}.search-input-container:focus-within{border-color:#8b5cf6}.search-icon{color:var(--text-light-alt);flex-shrink:0}.search-input{flex:1;border:none;background:none;outline:none;font-size:var(--space-md);color:#111827}.search-input::placeholder{color:#9ca3af}.search-button{display:flex;align-items:center;gap:var(--space-xs);background:#8b5cf6;color:#fff;border:none;border-radius:var(--space-xs);padding:var(--space-sm) var(--space-lg);font-weight:600;cursor:pointer;transition:background-color var(--transition-fast) ease;flex-shrink:0}.search-button:hover:not(:disabled){background:#7c3aed}.search-button:disabled{background:#d1d5db;cursor:not-allowed}.error-message{display:flex;align-items:center;gap:var(--space-xs);background:#fef2f2;color:#dc2626;padding:var(--space-sm) var(--space-md);border-radius:var(--space-xs);margin-top:var(--space-md);font-size:var(--font-sm-alt)}.search-results{margin-top:var(--space-xl)}.results-header{margin-bottom:var(--space-lg)}.results-header h2{margin:0;font-size:var(--space-lg);font-weight:600;color:#111827}.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:var(--space-lg)}.result-card{background:#fff;border-radius:var(--space-sm);padding:var(--space-lg);box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb;transition:box-shadow var(--transition-fast) ease}.result-card:hover{box-shadow:0 4px 6px #0000001a}.result-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-md)}.result-title{margin:0;font-size:1.25rem;font-weight:600;color:#111827;flex:1;margin-right:var(--space-md)}.add-game-button{display:flex;align-items:center;gap:var(--space-xs);background:#10b981;color:#fff;border:none;border-radius:var(--space-xs);padding:var(--space-xs) var(--space-md);font-size:var(--font-sm-alt);font-weight:600;cursor:pointer;transition:background-color var(--transition-fast) ease;flex-shrink:0}.add-game-button:hover:not(:disabled){background:#059669}.add-game-button:disabled{background:#d1d5db;cursor:not-allowed}.result-description{color:var(--text-light-alt);line-height:1.6;margin-bottom:var(--space-md)}.result-categories{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.category-tag{background:#f3f4f6;color:var(--text-medium-alt);padding:.25rem var(--space-sm);border-radius:var(--space-md);font-size:var(--space-sm);font-weight:500}.no-results{text-align:center;padding:3rem var(--space-md);color:var(--text-light-alt)}.no-results-icon{color:#d1d5db;margin-bottom:var(--space-md)}.no-results h3{margin:0 0 var(--space-xs) 0;font-size:1.25rem;font-weight:600;color:var(--text-medium-alt)}.no-results p{margin:0;font-size:var(--space-md)}.search-mode-toggle{margin-bottom:var(--space-lg);text-align:center}.switch-mode-button{display:inline-flex;align-items:center;gap:var(--space-xs);background:#f3f4f6;color:var(--text-light-alt);border:1px solid #e5e7eb;border-radius:var(--space-xs);padding:var(--space-sm) var(--space-md);font-size:var(--font-sm-alt);font-weight:500;cursor:pointer;transition:all var(--transition-fast) ease}.switch-mode-button:hover{background:#e5e7eb;color:var(--text-medium-alt)}.photo-search-container{display:flex;flex-direction:column;gap:var(--space-lg)}.photo-upload-options{display:flex;gap:var(--space-md);justify-content:center}.upload-option{position:relative}.file-input{position:absolute;opacity:0;width:0;height:0}.upload-button{display:flex;align-items:center;gap:var(--space-xs);background:#8b5cf6;color:#fff;border:none;border-radius:var(--space-xs);padding:var(--space-md) var(--space-lg);font-weight:600;cursor:pointer;transition:background-color var(--transition-fast) ease;text-decoration:none}.upload-button:hover{background:#7c3aed}.camera-button{display:flex;align-items:center;gap:var(--space-xs);background:var(--text-light-alt);color:#fff;border:none;border-radius:var(--space-xs);padding:var(--space-md) var(--space-lg);font-weight:600;cursor:pointer;transition:background-color var(--transition-fast) ease}.camera-button.disabled{background:#d1d5db;cursor:not-allowed}.camera-button:hover:not(.disabled){background:#4b5563}.selected-file-info{display:flex;align-items:center;gap:var(--space-md);background:#f9fafb;border:2px solid #e5e7eb;border-radius:var(--space-sm);padding:var(--space-md);justify-content:center}.file-name{font-weight:600;color:#111827}.file-size{color:var(--text-light-alt);font-size:var(--font-sm-alt)}@media(max-width:768px){.board-game-search-container{padding:var(--space-md)}.search-title{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.search-input-container{flex-direction:column;align-items:stretch}.search-button{width:100%;justify-content:center}.results-grid{grid-template-columns:1fr}.result-header{flex-direction:column;align-items:stretch;gap:var(--space-md)}.result-title{margin-right:0}.add-game-button{align-self:flex-start}.photo-upload-options{flex-direction:column;align-items:stretch}.selected-file-info{flex-direction:column;align-items:center;gap:var(--space-sm)}}:root{--friends-button-padding-sm: var(--space-xs);--friends-button-padding-md: var(--space-sm) var(--space-lg);--friends-button-padding-lg: 12px 24px;--friends-icon-sm: 24px;--friends-icon-md: 40px;--friends-icon-lg: 48px;--friends-icon-xl: 64px;--friends-avatar-sm: 40px;--friends-avatar-md: 48px;--friends-min-touch-target: 44px;--friends-opacity-icon: .8;--friends-transform-hover: translateY(-2px);--friends-transform-hover-card: translateY(-4px);--friends-transform-scale: scale(1.05);--friends-transform-active: scale(.98);--friends-min-height-empty: 300px;--friends-min-height-empty-sm: 200px;--friends-min-height-content: 60vh}.friends-container{min-height:calc(100vh - 70px);width:100%;background:linear-gradient(135deg,var(--bg-light) 0%,var(--bg-medium) 100%);padding:var(--space-xl)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--friends-min-height-content);text-align:center}.loading-spinner{animation:spin 1s linear infinite;color:var(--color-primary);margin-bottom:var(--space-md)}.auth-required-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--friends-min-height-content);text-align:center;background:var(--bg-white);padding:var(--space-2xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);border:var(--border-thin) solid var(--border-white)}.lock-icon,.error-icon{color:var(--color-danger);margin-bottom:var(--space-lg);opacity:var(--friends-opacity-icon)}.auth-required-state h3{font-size:var(--font-2xl);font-weight:600;color:var(--text-dark);margin:0 0 var(--space-md) 0}.sign-in-button{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--bg-white);border:none;padding:var(--friends-button-padding-lg);font-size:var(--font-base-alt);font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base) ease;box-shadow:var(--shadow-primary)}.sign-in-button:hover{transform:var(--friends-transform-hover);box-shadow:var(--shadow-primary-lg)}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl);background:var(--bg-white);padding:var(--space-xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);border:var(--border-thin) solid var(--border-white)}.header-icon{color:var(--color-primary);background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary-dark-light));padding:var(--space-sm);border-radius:var(--radius-xl);box-shadow:var(--shadow-primary-sm)}.page-header h1{font-size:var(--font-3xl);font-weight:700;color:var(--text-dark);margin:0 0 var(--space-xs) 0;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-header p{color:var(--text-light);margin:0;font-size:var(--font-text)}.count-badge{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--bg-white);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-xl);font-size:var(--font-base);font-weight:600;box-shadow:var(--shadow-primary-sm)}.error-banner{background:var(--color-danger-light);border:var(--border-thin) solid var(--color-danger-border);color:var(--color-danger-dark);padding:var(--space-md);border-radius:var(--radius-xl);margin-bottom:var(--space-xl);display:flex;align-items:center;gap:var(--space-sm);box-shadow:var(--shadow-danger-light)}.close-button{background:none;border:none;color:var(--color-danger-dark);font-size:var(--font-2xl);cursor:pointer;padding:0;width:var(--friends-icon-sm);height:var(--friends-icon-sm);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);transition:background-color var(--transition-fast)}.add-friend-section{background:var(--bg-white);padding:var(--space-xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);border:var(--border-thin) solid var(--border-white);margin-bottom:var(--space-xl)}.section-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);color:var(--text-dark)}.section-header h2{font-size:var(--font-xl);font-weight:600;margin:0}.add-friend-form{display:flex;gap:var(--space-md)}.email-input{flex:1;padding:var(--space-sm) var(--space-md);background-color:var(--bg-white);color:var(--text-dark);border:var(--border-medium) solid var(--border-primary-light);border-radius:var(--radius-md);font-size:var(--font-base-alt);transition:all var(--transition-fast)}.email-input:focus{outline:none;border-color:var(--border-primary-medium);box-shadow:var(--shadow-focus)}.email-input:disabled{background-color:var(--bg-card);cursor:not-allowed}.add-button{background:linear-gradient(135deg,var(--color-success) 0%,var(--color-success-dark) 100%);color:var(--bg-white);border:none;padding:var(--space-sm) var(--space-lg);font-size:var(--font-base-alt);font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base) ease;box-shadow:var(--shadow-success);display:flex;align-items:center;gap:var(--space-xs)}.add-button:hover:not(:disabled){transform:var(--friends-transform-hover);box-shadow:var(--shadow-success-hover)}.add-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;transform:none}.add-button .spinner{animation:spin 1s linear infinite}.friends-list-section{background:var(--bg-white);padding:var(--space-xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);border:var(--border-thin) solid var(--border-white)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--friends-min-height-empty);text-align:center;padding:var(--space-2xl)}.empty-icon{color:var(--text-lightest);margin-bottom:var(--space-lg)}.empty-state h3{font-size:var(--font-xl);font-weight:600;color:var(--text-medium);margin:0 0 var(--space-xs) 0}.empty-state p{color:var(--text-lighter-alt);margin:0}.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-lg)}.friend-card{background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-card-dark) 100%);border:var(--border-thin) solid var(--border-light);border-radius:var(--radius-xl);padding:var(--space-lg);transition:all var(--transition-base) ease;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-md)}.friend-card:hover{transform:var(--friends-transform-hover-card);box-shadow:var(--shadow-lg-alt);border-color:var(--color-primary)}.friend-content{display:flex;gap:var(--space-md);flex:1;min-width:0}.friend-avatar{width:var(--friends-avatar-md);height:var(--friends-avatar-md);border-radius:var(--radius-full);object-fit:cover;border:var(--border-medium) solid var(--bg-white);box-shadow:var(--shadow-sm);flex-shrink:0}.friend-avatar-placeholder{width:var(--friends-avatar-md);height:var(--friends-avatar-md);border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);display:flex;align-items:center;justify-content:center;color:var(--bg-white);flex-shrink:0;box-shadow:var(--shadow-primary-sm)}.friend-info{flex:1;min-width:0}.friend-name{font-size:var(--font-lg);font-weight:600;color:var(--text-dark);margin:0 0 var(--space-xs) 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-email{display:flex;align-items:center;gap:var(--space-xs);color:var(--text-light);font-size:var(--font-base)}.friend-email span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.delete-button{background:var(--color-danger-bg);color:var(--color-danger);border:var(--border-thin) solid var(--color-danger-border);padding:var(--space-xs);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast) ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.delete-button:hover:not(:disabled){background:var(--color-danger);color:var(--bg-white);transform:var(--friends-transform-scale)}.delete-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.modal-content{background:var(--bg-white);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl-alt);max-width:500px;width:100%;overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xl) var(--space-xl) var(--space-md);border-bottom:var(--border-thin) solid var(--border-light)}.modal-header h3{font-size:var(--font-2xl);font-weight:600;color:var(--text-dark);margin:0}.modal-icon{font-size:var(--font-3xl)}.modal-body{padding:var(--space-xl)}.modal-body p{margin:0 0 var(--space-md) 0;color:var(--text-medium);line-height:var(--line-height-relaxed)}.warning-text{color:var(--color-danger);font-weight:500;font-size:var(--font-base)}.modal-actions{display:flex;gap:var(--space-md);padding:var(--space-md) var(--space-xl) var(--space-xl);justify-content:flex-end}.cancel-button{background:var(--bg-card-dark);color:var(--text-medium);border:none;padding:var(--space-sm) var(--space-lg);font-size:var(--font-base-alt);font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast) ease}.cancel-button:hover:not(:disabled){background:var(--bg-medium)}.delete-confirm-button{background:linear-gradient(135deg,var(--color-danger) 0%,var(--color-danger-dark) 100%);color:var(--bg-white);border:none;padding:var(--space-sm) var(--space-lg);font-size:var(--font-base-alt);font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast) ease;display:flex;align-items:center;gap:var(--space-xs);box-shadow:var(--shadow-danger)}.delete-confirm-button:hover:not(:disabled){transform:var(--friends-transform-hover);box-shadow:var(--shadow-danger-hover)}.delete-confirm-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;transform:none}@media(max-width:768px){.friends-container{padding:var(--space-md)}.page-header{flex-direction:column;align-items:flex-start;gap:var(--space-md);padding:var(--space-lg)}.header-content{width:100%}.page-header h1{font-size:var(--font-2xl)}.page-header p{font-size:var(--font-sm-alt)}.header-icon{padding:var(--space-xs)}.count-badge{align-self:flex-start;font-size:var(--font-sm-alt);padding:.4rem var(--space-sm)}.add-friend-section,.friends-list-section{padding:var(--space-lg)}.section-header h2{font-size:var(--font-lg)}.add-friend-form{flex-direction:column}.add-button{width:100%;justify-content:center}.friends-grid{grid-template-columns:1fr;gap:var(--space-md)}.friend-card{padding:var(--space-md)}.friend-name{font-size:var(--font-base-alt)}.friend-email{font-size:var(--font-sm-alt)}.modal-overlay{padding:var(--space-xs)}.modal-content{margin:0;max-width:100%}.modal-header{padding:var(--space-lg) var(--space-lg) var(--space-md)}.modal-header h3{font-size:var(--font-xl)}.modal-body{padding:var(--space-lg)}.modal-actions{padding:var(--space-md) var(--space-lg) var(--space-lg);flex-direction:column-reverse}.modal-actions button{width:100%;justify-content:center}.auth-required-state{padding:var(--space-xl) var(--space-lg)}.auth-required-state h3{font-size:var(--font-xl)}.error-banner{padding:var(--space-sm);font-size:var(--font-base)}}@media(max-width:480px){.friends-container{padding:var(--space-sm)}.page-header,.add-friend-section,.friends-list-section{padding:var(--space-md);border-radius:var(--radius-xl)}.page-header h1{font-size:var(--font-xl)}.header-icon{display:none}.friend-avatar,.friend-avatar-placeholder{width:var(--friends-avatar-sm);height:var(--friends-avatar-sm)}.friend-name{font-size:var(--font-text)}.friend-email{font-size:var(--font-sm)}.empty-state{padding:var(--space-xl);min-height:var(--friends-min-height-empty-sm)}.delete-button{min-width:var(--friends-min-touch-target);min-height:var(--friends-min-touch-target)}}.game-sessions-container{min-height:calc(100vh - 70px);width:100%;background:var(--gradient-bg-light);padding:var(--space-xl)}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl);background:var(--bg-white);padding:var(--space-xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);border:1px solid var(--border-white)}.header-content{display:flex;align-items:center;gap:var(--space-md)}.header-icon{color:var(--color-primary);background:var(--gradient-primary-bg);padding:var(--space-sm);border-radius:var(--radius-xl);box-shadow:var(--shadow-primary-sm)}.page-header h1{font-size:var(--font-3xl);font-weight:var(--weight-bold);color:var(--text-dark);margin:0 0 var(--space-xs) 0;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-header p{color:var(--text-light);margin:0;font-size:var(--font-base-alt)}.header-actions{display:flex;align-items:center;gap:var(--space-md)}.count-badge{background:var(--gradient-primary);color:var(--bg-white);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-3xl);font-weight:var(--weight-semibold);font-size:var(--font-base);box-shadow:var(--shadow-primary-sm)}.create-session-button{display:flex;align-items:center;gap:var(--space-xs);background:var(--color-success);color:var(--bg-white);border:none;border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-size:var(--font-base);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-base) var(--ease-default);box-shadow:var(--shadow-success)}.create-session-button:hover{background:var(--color-success-dark);transform:translateY(-2px);box-shadow:var(--shadow-success-hover)}.error-banner{background:var(--color-danger-light);border:1px solid var(--color-danger-border);color:var(--color-danger-dark);padding:var(--space-md);border-radius:var(--radius-xl);margin-bottom:var(--space-xl);display:flex;align-items:center;gap:var(--space-sm);box-shadow:var(--shadow-danger-light)}.error-banner p{margin:0;flex:1}.close-button{background:none;border:none;color:var(--color-danger-dark);font-size:var(--font-2xl);cursor:pointer;padding:0;width:var(--icon-button-sm);height:var(--icon-button-sm);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);transition:background-color var(--transition-fast)}.close-button:hover{background-color:var(--overlay-danger-hover)}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;text-align:center;color:var(--text-light)}.error-state h3{color:var(--text-dark);margin:0 0 var(--space-xs) 0;font-size:var(--font-2xl)}.error-state p{margin:0 0 var(--space-lg) 0;max-width:400px}.retry-button{background:var(--gradient-primary);color:var(--bg-white);border:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-base) var(--ease-default)}.retry-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-primary)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;color:var(--text-light);background:var(--bg-white);padding:var(--space-2xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);border:1px solid var(--border-white)}.empty-icon{color:var(--text-lightest);margin-bottom:var(--space-md)}.empty-state h3{color:var(--text-dark);margin:0 0 var(--space-xs) 0;font-size:var(--font-2xl)}.empty-state p{margin:0 0 var(--space-lg) 0;max-width:500px}.sessions-list{display:flex;flex-direction:column;gap:var(--space-lg)}.session-card{background:var(--bg-white);border-radius:var(--radius-2xl);padding:var(--space-xl);box-shadow:var(--shadow-md);border:1px solid var(--border-white);transition:all var(--transition-base) var(--ease-default);position:relative;overflow:hidden}.session-card.clickable{cursor:pointer}.session-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gradient-primary)}.session-card:hover:not(.disabled){transform:translateY(-4px);box-shadow:var(--shadow-lg)}.session-card.past:before{background:linear-gradient(135deg,#9ca3af,#6b7280)}.session-card.inactive:before{background:linear-gradient(135deg,var(--color-danger) 0%,var(--color-danger-dark) 100%)}.session-card.disabled{opacity:.6;cursor:not-allowed}.session-card.disabled:not(.session-card.disabled .session-actions button){pointer-events:none}.session-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-md)}.session-title-row{display:flex;align-items:center;gap:var(--space-sm);flex:1}.session-title{font-size:var(--font-xl);font-weight:var(--weight-bold);color:var(--text-dark);margin:0;line-height:var(--line-height-tight)}.status-badge{display:flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--radius-3xl);font-size:var(--font-sm);font-weight:var(--weight-semibold);white-space:nowrap}.status-badge.upcoming{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46}.status-badge.past{background:linear-gradient(135deg,#e5e7eb,#d1d5db);color:#374151}.status-badge.inactive{background:linear-gradient(135deg,#fee2e2,#fecaca);color:var(--color-danger-dark)}.session-actions{display:flex;align-items:center;gap:var(--space-xs);margin-left:var(--space-md);flex-shrink:0}.edit-button,.mark-inactive-button,.mark-active-button,.delete-button{display:flex;align-items:center;justify-content:center;width:var(--icon-button-md);height:var(--icon-button-md);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast) var(--ease-default);opacity:.9}.edit-button{background:#dbeafe;color:#1e40af}.edit-button:hover:not(:disabled){background:#bfdbfe;transform:scale(1.05);opacity:1}.mark-inactive-button{background:#fef3c7;color:#92400e}.mark-inactive-button:hover:not(:disabled){background:#fde68a;transform:scale(1.05);opacity:1}.mark-active-button{background:#d1fae5;color:#065f46}.mark-active-button:hover:not(:disabled){background:#a7f3d0;transform:scale(1.05);opacity:1}.delete-button{background:#fee2e2;color:var(--color-danger-dark)}.delete-button:hover:not(:disabled){background:#fecaca;transform:scale(1.05);opacity:1}.edit-button:disabled,.mark-inactive-button:disabled,.mark-active-button:disabled,.delete-button:disabled{opacity:.6;cursor:not-allowed}.edit-button .spinner,.mark-inactive-button .spinner,.mark-active-button .spinner,.delete-button .spinner{animation:spin 1s var(--ease-linear) infinite}.edit-button svg,.mark-inactive-button svg,.mark-active-button svg,.delete-button svg{flex-shrink:0}.session-description{color:var(--text-medium);line-height:var(--line-height-relaxed);margin:0 0 var(--space-lg) 0;font-size:var(--font-text)}.session-details{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg);padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-md)}.detail-item{display:flex;align-items:flex-start;gap:var(--space-sm);color:var(--text-medium)}.detail-item svg{flex-shrink:0;margin-top:2px;color:var(--color-primary)}.detail-content{display:flex;flex-direction:column;gap:2px;flex:1}.detail-label{font-size:var(--font-sm);font-weight:var(--weight-semibold);color:var(--text-light)}.detail-value{font-size:var(--font-base);color:var(--text-dark)}.relative-time{font-size:var(--font-sm);color:var(--text-light);font-style:italic}.session-host{padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-md);margin-bottom:var(--space-md)}.host-info{display:flex;align-items:center;gap:var(--space-sm)}.host-avatar{width:var(--avatar-md);height:var(--avatar-md);border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--bg-white);box-shadow:var(--shadow-sm)}.host-avatar-placeholder{width:var(--avatar-md);height:var(--avatar-md);border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:var(--bg-white);box-shadow:var(--shadow-primary-sm)}.host-label{display:block;font-size:var(--font-sm);color:var(--text-light);font-weight:var(--weight-semibold)}.host-name{display:block;font-size:var(--font-base);color:var(--text-dark);font-weight:var(--weight-medium)}.session-participants{padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-md);margin-bottom:var(--space-md)}.participants-header{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-sm);color:var(--text-light);font-size:var(--font-base);font-weight:var(--weight-semibold)}.participants-avatars{display:flex;gap:var(--space-xs);flex-wrap:wrap}.participant-avatar{width:var(--avatar-sm);height:var(--avatar-sm);border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--bg-white);box-shadow:var(--shadow-sm)}.participant-avatar-placeholder{width:var(--avatar-sm);height:var(--avatar-sm);border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:var(--bg-white);box-shadow:var(--shadow-primary-sm)}.participant-overflow{width:var(--avatar-sm);height:var(--avatar-sm);border-radius:var(--radius-full);background:var(--bg-medium);display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:var(--weight-semibold);color:var(--text-medium);border:2px solid var(--bg-white)}.session-games{padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-md)}.games-header{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-sm);color:var(--text-light);font-size:var(--font-base);font-weight:var(--weight-semibold)}.games-list{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.game-tag{background:linear-gradient(135deg,#667eea15,#764ba215);color:var(--color-primary);padding:.25rem var(--space-sm);border-radius:var(--radius-2xl);font-size:var(--font-sm);font-weight:var(--weight-medium);border:1px solid rgba(102,126,234,.2);transition:all var(--transition-fast) var(--ease-default)}.game-tag:hover{background:linear-gradient(135deg,#667eea25,#764ba225);transform:translateY(-1px)}.no-games{color:var(--text-light);font-size:var(--font-sm);font-style:italic;margin:0}.modal-overlay{position:fixed;inset:0;background:var(--overlay-dark);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--space-md)}.modal-content{background:var(--bg-white);border-radius:var(--radius-2xl);padding:var(--space-xl);max-width:500px;width:100%;max-height:calc(100vh - 2 * var(--space-md));overflow-y:auto;box-shadow:var(--shadow-xl);transform:scale(.95);animation:modalAppear var(--transition-fast) var(--ease-default) forwards}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.modal-header h3{font-size:var(--font-xl);font-weight:var(--weight-semibold);color:var(--text-dark);margin:0}.modal-icon{color:var(--color-primary)}.modal-body{margin-bottom:var(--space-xl)}.modal-body p{color:var(--text-medium);margin:0 0 var(--space-md) 0;line-height:var(--line-height-normal)}.warning-text{color:var(--color-warning);font-size:var(--font-base);font-style:italic}.form-group{margin-bottom:var(--space-lg)}.form-group label{display:block;font-size:var(--font-base);font-weight:var(--weight-semibold);color:var(--text-dark);margin-bottom:var(--space-xs)}.required{color:var(--color-danger)}.form-group input,.form-group textarea{width:100%;padding:var(--space-sm) var(--space-md);background-color:var(--bg-white);color:var(--text-dark);border:2px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--font-base);transition:all var(--transition-fast);font-family:inherit}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.form-group textarea{resize:vertical;min-height:80px}.validation-error{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:var(--color-danger-light);border:1px solid var(--color-danger-border);border-radius:var(--radius-md);color:var(--color-danger-dark);font-size:var(--font-sm);margin-bottom:var(--space-md)}.modal-actions{display:flex;gap:var(--space-sm);justify-content:flex-end}.cancel-button{background:var(--bg-card);color:var(--text-medium);border:1px solid var(--border-light);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-fast) var(--ease-default)}.cancel-button:hover:not(:disabled){background:var(--bg-card-dark);color:var(--text-dark)}.create-button{display:flex;align-items:center;gap:var(--space-xs);background:var(--color-success);color:var(--bg-white);border:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-fast) var(--ease-default);box-shadow:var(--shadow-success)}.create-button:hover:not(:disabled){background:var(--color-success-dark);transform:translateY(-1px);box-shadow:var(--shadow-success-hover)}.delete-confirm-button{display:flex;align-items:center;gap:var(--space-xs);background:var(--color-danger-dark);color:var(--bg-white);border:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-fast) var(--ease-default);box-shadow:var(--shadow-danger)}.delete-confirm-button:hover:not(:disabled){background:var(--color-danger-dark);transform:translateY(-1px);box-shadow:var(--shadow-danger-hover)}.cancel-button:disabled,.create-button:disabled,.delete-confirm-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.modal-actions .spinner{animation:spin 1s var(--ease-linear) infinite}.edit-modal{max-width:700px;max-height:calc(100vh - 2 * var(--space-md))}.edit-session-form{display:flex;flex-direction:column;gap:var(--space-xl)}.form-section{padding:var(--space-lg);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-light)}.form-section h4{font-size:var(--font-lg);font-weight:var(--weight-semibold);color:var(--text-dark);margin:0 0 var(--space-md) 0}.form-section h5{font-size:var(--font-base);font-weight:var(--weight-semibold);color:var(--text-medium);margin:var(--space-lg) 0 var(--space-sm) 0}.participants-manager-list,.available-friends-list{display:flex;flex-direction:column;gap:var(--space-xs)}.participant-manager-item,.available-friend-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-md);transition:all var(--transition-fast) var(--ease-default)}.participant-manager-item:hover,.available-friend-item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.participant-info{display:flex;align-items:center;gap:var(--space-sm);flex:1}.participant-manager-avatar{width:var(--avatar-sm);height:var(--avatar-sm);border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--bg-white);box-shadow:var(--shadow-sm)}.participant-manager-avatar-placeholder{width:var(--avatar-sm);height:var(--avatar-sm);border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:var(--bg-white);box-shadow:var(--shadow-primary-sm)}.participant-name{font-size:var(--font-base);color:var(--text-dark);font-weight:var(--weight-medium)}.add-participant-button,.remove-participant-button{display:flex;align-items:center;justify-content:center;width:var(--icon-button-md);height:var(--icon-button-md);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast) var(--ease-default);flex-shrink:0}.add-participant-button{background:#d1fae5;color:#065f46}.add-participant-button:hover:not(:disabled){background:#a7f3d0;transform:scale(1.05)}.remove-participant-button{background:#fee2e2;color:var(--color-danger-dark)}.remove-participant-button:hover:not(:disabled){background:#fecaca;transform:scale(1.05)}.add-participant-button:disabled,.remove-participant-button:disabled{opacity:.6;cursor:not-allowed}.add-participant-button .spinner,.remove-participant-button .spinner{animation:spin 1s var(--ease-linear) infinite}.empty-participants-text,.no-friends-text{color:var(--text-light);font-size:var(--font-sm);font-style:italic;margin:var(--space-sm) 0;text-align:center;padding:var(--space-md);background:var(--bg-white);border-radius:var(--radius-md);border:1px dashed var(--border-light)}.loading-friends{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);color:var(--text-light);font-size:var(--font-sm)}.loading-friends .spinner{animation:spin 1s var(--ease-linear) infinite}.available-friends-section{margin-top:var(--space-md)}.save-button{display:flex;align-items:center;gap:var(--space-xs);background:var(--color-success);color:var(--bg-white);border:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-fast) var(--ease-default);box-shadow:var(--shadow-success)}.save-button:hover:not(:disabled){background:var(--color-success-dark);transform:translateY(-1px);box-shadow:var(--shadow-success-hover)}.save-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.save-button .spinner{animation:spin 1s var(--ease-linear) infinite}.games-manager-list,.available-games-list{display:flex;flex-direction:column;gap:var(--space-xs)}.game-manager-item,.available-game-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-md);transition:all var(--transition-fast) var(--ease-default)}.game-manager-item:hover,.available-game-item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.game-manager-name{font-size:var(--font-base);color:var(--text-dark);font-weight:var(--weight-medium);flex:1}.add-game-button,.remove-game-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast) var(--ease-default);flex-shrink:0;font-size:var(--font-lg);font-weight:var(--weight-bold)}.add-game-button{background:#d1fae5;color:#065f46}.add-game-button:hover:not(:disabled){background:#a7f3d0;transform:scale(1.05)}.remove-game-button{background:#fee2e2;color:var(--color-danger-dark)}.remove-game-button:hover:not(:disabled){background:#fecaca;transform:scale(1.05)}.add-game-button:disabled,.remove-game-button:disabled{opacity:.6;cursor:not-allowed}.add-game-button .spinner,.remove-game-button .spinner{animation:spin 1s var(--ease-linear) infinite}.add-icon,.remove-icon{line-height:1;display:flex;align-items:center;justify-content:center}.remove-icon{font-size:1.5rem}.empty-games-text,.no-games-text,.no-games-found-text{color:var(--text-light);font-size:var(--font-sm);font-style:italic;margin:var(--space-sm) 0;text-align:center;padding:var(--space-md);background:var(--bg-white);border-radius:var(--radius-md);border:1px dashed var(--border-light)}.loading-games{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);color:var(--text-light);font-size:var(--font-sm)}.loading-games .spinner{animation:spin 1s var(--ease-linear) infinite}.available-games-section{margin-top:var(--space-md)}.search-games-group{margin-bottom:var(--space-sm)}.search-games-input{width:100%;padding:var(--space-sm) var(--space-md);background-color:var(--bg-white);color:var(--text-dark);border:2px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--font-base);transition:all var(--transition-fast);font-family:inherit}.search-games-input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.search-games-input::placeholder{color:var(--text-lightest)}@media(max-width:1024px){.game-sessions-container{padding:var(--space-lg)}}@media(max-width:768px){.game-sessions-container{padding:var(--space-md);min-height:calc(100vh - 60px)}.page-header{flex-direction:column;gap:var(--space-md);text-align:center;padding:var(--space-lg);margin-bottom:var(--space-lg)}.header-actions{flex-direction:column;gap:var(--space-sm);width:100%}.create-session-button{width:100%;justify-content:center}.page-header h1{font-size:var(--font-2xl-alt)}.header-icon{padding:.6rem}.count-badge{padding:.4rem var(--font-sm);font-size:var(--font-sm-alt)}.session-card{padding:var(--space-lg)}.session-header{flex-direction:column;gap:var(--space-sm)}.session-actions{margin-left:0;align-self:flex-start}}@media(max-width:480px){.game-sessions-container{padding:var(--space-sm);min-height:calc(100vh - 56px)}.page-header{padding:1.25rem;margin-bottom:var(--space-md)}.page-header h1{font-size:var(--font-2xl)}.page-header p{font-size:var(--font-base)}.session-card{padding:var(--space-md);border-radius:var(--radius-lg)}.session-title{font-size:var(--font-lg)}.session-description{font-size:var(--font-base)}.detail-item{flex-direction:column;gap:var(--space-xs)}.modal-content{padding:var(--space-lg);margin:var(--space-xs)}.modal-actions{flex-direction:column}.cancel-button,.create-button,.delete-confirm-button{width:100%;justify-content:center}.empty-state{min-height:300px;padding:var(--space-xl)}.empty-icon{width:var(--avatar-lg);height:var(--avatar-lg)}}@media(max-width:360px){.game-sessions-container{padding:var(--space-xs)}.page-header{padding:var(--space-md)}.page-header h1{font-size:var(--font-xl-alt)}.session-card{padding:var(--space-sm)}.session-title{font-size:var(--font-base-alt)}.session-description{font-size:var(--font-sm-alt)}}.session-conversations-section{margin-top:var(--space-lg);border-top:1px solid var(--border-light);padding-top:var(--space-md)}.conversations-toggle{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-md);background:var(--bg-light);border:1px solid var(--border-light);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base) var(--ease-default);font-size:var(--font-base-alt);font-weight:var(--weight-medium);color:var(--text-dark)}.conversations-toggle:hover:not(:disabled){background:var(--bg-white);border-color:var(--color-primary);color:var(--color-primary)}.conversations-toggle:disabled{opacity:.5;cursor:not-allowed}.conversations-toggle svg:last-child{margin-left:auto}.conversations-content{margin-top:var(--space-lg);padding:var(--space-lg);background:var(--bg-light);border-radius:var(--radius-md);border:1px solid var(--border-light)}.conversations-error{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:var(--bg-danger-light);border:1px solid var(--border-danger);border-radius:var(--radius-md);color:var(--color-danger);font-size:var(--font-sm);margin-bottom:var(--space-lg)}@media(max-width:768px){.conversations-toggle{font-size:var(--font-sm);padding:var(--space-sm) var(--space-md)}.conversations-content{padding:var(--space-md)}}.conversation-thread-modal{max-width:800px;max-height:90vh;overflow-y:auto}.conversation-thread-modal .modal-body{padding:0}.reply-form-section{padding:var(--space-lg);border-top:1px solid var(--border-light);background:var(--bg-light)}@media(max-width:768px){.conversation-thread-modal{max-width:95vw;max-height:95vh}.reply-form-section{padding:var(--space-md)}}.session-info-panel{background:var(--bg-white);border-radius:var(--radius-2xl);padding:var(--space-xl);box-shadow:var(--shadow-md);border:1px solid var(--border-white);display:flex;flex-direction:column;gap:var(--space-lg);position:relative;overflow:hidden}.session-info-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:var(--border-thick);background:var(--gradient-primary);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0}.session-info-header{display:flex;flex-direction:column;gap:var(--space-md);padding-bottom:var(--space-md);border-bottom:1px solid var(--border-light)}.session-info-title-row{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.session-info-title{font-size:var(--font-xl);font-weight:var(--weight-bold);color:var(--text-dark);margin:0;line-height:var(--line-height-tight);flex:1;min-width:0}.session-info-status-badge{display:flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--radius-3xl);font-size:var(--font-sm);font-weight:var(--weight-semibold);white-space:nowrap;flex-shrink:0}.session-info-status-badge.upcoming{background:linear-gradient(135deg,var(--color-success-light) 0%,var(--color-success-lighter) 100%);color:var(--color-success-text)}.session-info-status-badge.past{background:linear-gradient(135deg,var(--text-lightest) 0%,var(--text-lighter) 100%);color:var(--text-medium-alt)}.session-info-status-badge.inactive{background:linear-gradient(135deg,var(--color-danger-light) 0%,var(--color-danger-lighter) 100%);color:var(--color-danger-dark)}.session-info-actions{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}.session-info-edit-button,.session-info-mark-inactive-button,.session-info-mark-active-button,.session-info-delete-button{display:flex;align-items:center;justify-content:center;width:var(--icon-button-md);height:var(--icon-button-md);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast) var(--ease-default);opacity:.9;flex-shrink:0}.session-info-edit-button{background:var(--color-info-lighter);color:var(--color-info-dark)}.session-info-edit-button:hover:not(:disabled){background:var(--color-info-lightest);transform:scale(1.05);opacity:1}.session-info-mark-inactive-button{background:var(--color-warning-light);color:var(--color-warning-text)}.session-info-mark-inactive-button:hover:not(:disabled){background:var(--color-warning-lighter);transform:scale(1.05);opacity:1}.session-info-mark-active-button{background:var(--color-success-light);color:var(--color-success-text)}.session-info-mark-active-button:hover:not(:disabled){background:var(--color-success-lighter);transform:scale(1.05);opacity:1}.session-info-delete-button{background:var(--color-danger-light);color:var(--color-danger-dark)}.session-info-delete-button:hover:not(:disabled){background:var(--color-danger-lighter);transform:scale(1.05);opacity:1}.session-info-edit-button:disabled,.session-info-mark-inactive-button:disabled,.session-info-mark-active-button:disabled,.session-info-delete-button:disabled{opacity:.6;cursor:not-allowed}.session-info-description{color:var(--text-medium);line-height:var(--line-height-relaxed);margin:0;font-size:var(--font-text);padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-md)}.session-info-details{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-md)}.session-info-detail-item{display:flex;align-items:flex-start;gap:var(--space-sm);color:var(--text-medium)}.session-info-detail-item svg{flex-shrink:0;margin-top:2px;color:var(--color-primary)}.session-info-detail-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.session-info-detail-label{font-size:var(--font-sm);font-weight:var(--weight-semibold);color:var(--text-light)}.session-info-detail-value{font-size:var(--font-base);color:var(--text-dark);word-wrap:break-word}.session-info-relative-time{font-size:var(--font-sm);color:var(--text-light);font-style:italic}.session-info-host{padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-md)}.session-info-host-info{display:flex;align-items:center;gap:var(--space-sm)}.session-info-host-avatar{flex-shrink:0}.session-info-host-label{display:block;font-size:var(--font-sm);color:var(--text-light);font-weight:var(--weight-semibold)}.session-info-host-name{display:block;font-size:var(--font-base);color:var(--text-dark);font-weight:var(--weight-medium)}.session-info-participants{padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-md)}.session-info-participants-header{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-sm);color:var(--text-light);font-size:var(--font-base);font-weight:var(--weight-semibold)}.session-info-participants-header svg{flex-shrink:0;color:var(--color-primary)}.session-info-participants-avatars{display:flex;gap:var(--space-xs);flex-wrap:wrap}.session-info-participant-avatar{flex-shrink:0}.session-info-participant-overflow{width:var(--avatar-sm);height:var(--avatar-sm);border-radius:var(--radius-full);background:var(--bg-medium);display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:var(--weight-semibold);color:var(--text-medium);border:2px solid var(--bg-white);flex-shrink:0}.session-info-games{padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-md)}.session-info-games-header{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-sm);color:var(--text-light);font-size:var(--font-base);font-weight:var(--weight-semibold)}.session-info-games-header svg{flex-shrink:0;color:var(--color-primary)}.session-info-games-list{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.session-info-game-tag{background:var(--gradient-primary-bg);color:var(--color-primary);padding:.25rem var(--space-sm);border-radius:var(--radius-2xl);font-size:var(--font-sm);font-weight:var(--weight-medium);border:1px solid var(--border-primary-light);transition:all var(--transition-fast) var(--ease-default)}.session-info-game-tag:hover{background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary-dark-light));transform:translateY(-1px)}.session-info-no-games{color:var(--text-light);font-size:var(--font-sm);font-style:italic;margin:0}@media(max-width:1024px){.session-info-panel{padding:var(--space-lg)}}@media(max-width:768px){.session-info-panel{padding:var(--space-md);border-radius:var(--radius-xl)}.session-info-title{font-size:var(--font-lg)}.session-info-header{gap:var(--space-sm)}.session-info-actions{width:100%}}@media(max-width:480px){.session-info-panel{padding:var(--space-sm);gap:var(--space-md)}.session-info-title{font-size:var(--font-base-alt)}.session-info-description{font-size:var(--font-base);padding:var(--space-sm)}.session-info-details,.session-info-host,.session-info-participants,.session-info-games{padding:var(--space-sm)}.session-info-detail-item{flex-direction:column;gap:var(--space-xs)}}@media(max-width:360px){.session-info-panel{padding:var(--space-xs);gap:var(--space-sm)}.session-info-title{font-size:var(--font-base)}.session-info-status-badge{font-size:var(--font-xs);padding:var(--space-xs) var(--space-sm)}}.markdown-renderer{color:var(--text-dark);line-height:var(--line-height-relaxed);word-wrap:break-word;overflow-wrap:break-word}.markdown-renderer .ProseMirror{outline:none;white-space:pre-wrap}.markdown-renderer .ProseMirror>*{margin:0}.markdown-renderer .ProseMirror>*+*{margin-top:var(--space-sm)}.markdown-renderer h1{font-size:var(--font-2xl);font-weight:var(--weight-bold);margin-top:var(--space-lg);margin-bottom:var(--space-md);color:var(--text-darkest);line-height:var(--line-height-tight)}.markdown-renderer h1:first-child{margin-top:0}.markdown-renderer h2{font-size:var(--font-xl);font-weight:var(--weight-semibold);margin-top:var(--space-md);margin-bottom:var(--space-sm);color:var(--text-darkest);line-height:var(--line-height-tight)}.markdown-renderer h2:first-child{margin-top:0}.markdown-renderer h3{font-size:var(--font-lg);font-weight:var(--weight-semibold);margin-top:var(--space-md);margin-bottom:var(--space-sm);color:var(--text-darkest);line-height:var(--line-height-normal)}.markdown-renderer h3:first-child{margin-top:0}.markdown-renderer h4{font-size:var(--font-md);font-weight:var(--weight-semibold);margin-top:var(--space-sm);margin-bottom:var(--space-xs);color:var(--text-darkest);line-height:var(--line-height-normal)}.markdown-renderer h4:first-child{margin-top:0}.markdown-renderer h5{font-size:var(--font-base-alt);font-weight:var(--weight-semibold);margin-top:var(--space-sm);margin-bottom:var(--space-xs);color:var(--text-dark);line-height:var(--line-height-normal)}.markdown-renderer h5:first-child{margin-top:0}.markdown-renderer h6{font-size:var(--font-base);font-weight:var(--weight-medium);margin-top:var(--space-sm);margin-bottom:var(--space-xs);color:var(--text-dark);line-height:var(--line-height-normal)}.markdown-renderer h6:first-child{margin-top:0}.markdown-renderer p{margin-bottom:var(--space-sm);line-height:var(--line-height-relaxed)}.markdown-renderer p:last-child{margin-bottom:0}.markdown-renderer ul,.markdown-renderer ol{margin-left:0;margin-bottom:var(--space-md);padding-left:var(--space-xl);list-style-position:outside}.markdown-renderer ul:last-child,.markdown-renderer ol:last-child{margin-bottom:0}.markdown-renderer li{margin-bottom:var(--space-xs);line-height:var(--line-height-relaxed);display:list-item}.markdown-renderer li:last-child{margin-bottom:0}.markdown-renderer ul ul,.markdown-renderer ul ol,.markdown-renderer ol ul,.markdown-renderer ol ol{margin-top:var(--space-xs);margin-bottom:var(--space-xs)}.markdown-renderer ul{list-style-type:disc}.markdown-renderer ul ul{list-style-type:circle}.markdown-renderer ul ul ul{list-style-type:square}.markdown-renderer ol{list-style-type:decimal}.markdown-renderer ol ol{list-style-type:lower-alpha}.markdown-renderer ol ol ol{list-style-type:lower-roman}.markdown-renderer strong{font-weight:var(--weight-bold);color:var(--text-darkest)}.markdown-renderer em{font-style:italic}.markdown-renderer strong em,.markdown-renderer em strong{font-weight:var(--weight-bold);font-style:italic}.markdown-renderer blockquote{border-left:var(--border-thick) solid var(--border-light);padding-left:var(--space-md);margin-left:0;margin-bottom:var(--space-md);color:var(--text-medium);font-style:italic}.markdown-renderer blockquote:last-child{margin-bottom:0}.markdown-renderer code{background-color:var(--bg-light);padding:.125rem .25rem;border-radius:var(--radius-xs);font-family:Courier New,Courier,monospace;font-size:var(--font-sm);color:var(--text-dark)}.markdown-renderer pre{background-color:var(--bg-light);padding:var(--space-md);border-radius:var(--radius-md);overflow-x:auto;margin-bottom:var(--space-md)}.markdown-renderer pre:last-child{margin-bottom:0}.markdown-renderer pre code{background-color:transparent;padding:0;border-radius:0}.markdown-renderer hr{border:none;border-top:var(--border-thin) solid var(--border-light);margin:var(--space-lg) 0}.markdown-renderer a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-base) var(--ease-default)}.markdown-renderer a:hover{color:var(--color-primary-dark);text-decoration:underline}@media(max-width:768px){.markdown-renderer h1{font-size:var(--font-xl-alt)}.markdown-renderer h2{font-size:var(--font-xl)}.markdown-renderer h3{font-size:var(--font-md)}.markdown-renderer h4,.markdown-renderer h5,.markdown-renderer h6{font-size:var(--font-base)}.markdown-renderer ul,.markdown-renderer ol{padding-left:var(--space-lg)}}@media(max-width:480px){.markdown-renderer h1{font-size:var(--font-xl);margin-top:var(--space-md)}.markdown-renderer h2{font-size:var(--font-lg);margin-top:var(--space-sm)}.markdown-renderer h3{font-size:var(--font-base-alt);margin-top:var(--space-sm)}.markdown-renderer h4,.markdown-renderer h5,.markdown-renderer h6{font-size:var(--font-base);margin-top:var(--space-xs)}.markdown-renderer ul,.markdown-renderer ol{padding-left:var(--space-md)}.markdown-renderer p{margin-bottom:var(--space-xs)}}.conversation-list-container{width:100%}.conversation-list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-2xl);color:var(--text-medium)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-light);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin .8s linear infinite;margin-bottom:var(--space-md)}@keyframes spin{to{transform:rotate(360deg)}}.conversation-list-loading p{margin:0;font-size:var(--font-base)}.conversation-list-empty{text-align:center;padding:var(--space-2xl);color:var(--text-medium)}.conversation-list-empty p{margin:0;font-size:var(--font-base)}.empty-subtitle{margin-top:var(--space-xs)!important;font-size:var(--font-sm)!important;color:var(--text-light)!important}.conversation-list{display:flex;flex-direction:column;gap:var(--space-md)}.conversation-item{background:var(--bg-white);border:var(--border-thin) solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-md);transition:all var(--transition-base) var(--ease-default);cursor:pointer}.conversation-item:hover{box-shadow:var(--shadow-sm);border-color:var(--color-primary);transform:translateY(-1px)}.conversation-item:focus{outline:none;box-shadow:var(--shadow-focus);border-color:var(--color-primary)}.conversation-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.conversation-meta{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.conversation-author{font-weight:var(--weight-semibold);color:var(--text-dark);font-size:var(--font-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-timestamp{font-size:var(--font-xs-alt);color:var(--text-light)}.edited-indicator{font-style:italic;color:var(--text-lighter)}.conversation-message{color:var(--text-dark);font-size:var(--font-text);line-height:var(--line-height-relaxed);margin-bottom:var(--space-sm);word-wrap:break-word;overflow-wrap:break-word}.conversation-message-preview{max-height:4.5em;overflow:hidden;position:relative}.conversation-message-preview:after{content:"";position:absolute;bottom:0;right:0;width:30%;height:1.5em;background:linear-gradient(to right,transparent,var(--bg-white))}.conversation-footer{display:flex;align-items:center;justify-content:space-between;padding-top:var(--space-xs);border-top:var(--border-thin) solid var(--border-light)}.reply-count{font-size:var(--font-sm);color:var(--text-medium);font-weight:var(--weight-medium)}@media(max-width:768px){.conversation-list{gap:var(--space-sm)}.conversation-item{padding:var(--space-sm)}.conversation-message{font-size:var(--font-base)}}@media(max-width:480px){.conversation-list-loading,.conversation-list-empty{padding:var(--space-xl)}.conversation-author{font-size:var(--font-sm-alt)}.conversation-timestamp{font-size:var(--font-xs)}.conversation-message{font-size:var(--font-sm-alt)}.reply-count{font-size:var(--font-xs-alt)}}.tiptap-editor{width:100%;border:var(--border-thin) solid var(--border-light);border-radius:var(--radius-md);background:var(--bg-white);transition:all var(--transition-base) var(--ease-default);box-sizing:border-box;position:relative}.tiptap-editor:focus-within{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.tiptap-editor.error{border-color:var(--color-danger)}.tiptap-editor.error:focus-within{box-shadow:0 0 0 3px var(--color-danger-light)}.tiptap-editor.tiptap-editor--disabled{background:var(--bg-light);color:var(--text-light);cursor:not-allowed;opacity:var(--opacity-disabled)}.tiptap-editor .ProseMirror{padding:var(--space-sm);font-family:inherit;font-size:var(--font-base);line-height:var(--line-height-relaxed);color:var(--text-dark);outline:none;overflow-y:auto;word-wrap:break-word;white-space:pre-wrap}.tiptap-editor .ProseMirror{min-height:100px;max-height:400px}.tiptap-editor[style*=min-height] .ProseMirror{min-height:inherit}.tiptap-editor[style*=max-height] .ProseMirror{max-height:inherit}.tiptap-editor .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--text-lightest);pointer-events:none;float:left;height:0}.tiptap-editor .ProseMirror h1{font-size:var(--font-2xl);font-weight:var(--weight-bold);margin-top:var(--space-md);margin-bottom:var(--space-sm);color:var(--text-darkest);line-height:var(--line-height-tight)}.tiptap-editor .ProseMirror h1:first-child{margin-top:0}.tiptap-editor .ProseMirror h2{font-size:var(--font-xl);font-weight:var(--weight-semibold);margin-top:var(--space-md);margin-bottom:var(--space-sm);color:var(--text-darkest);line-height:var(--line-height-tight)}.tiptap-editor .ProseMirror h2:first-child{margin-top:0}.tiptap-editor .ProseMirror h3{font-size:var(--font-lg);font-weight:var(--weight-semibold);margin-top:var(--space-sm);margin-bottom:var(--space-xs);color:var(--text-dark);line-height:var(--line-height-tight)}.tiptap-editor .ProseMirror h3:first-child{margin-top:0}.tiptap-editor .ProseMirror h4,.tiptap-editor .ProseMirror h5,.tiptap-editor .ProseMirror h6{font-size:var(--font-base);font-weight:var(--weight-semibold);margin-top:var(--space-sm);margin-bottom:var(--space-xs);color:var(--text-dark);line-height:var(--line-height-normal)}.tiptap-editor .ProseMirror h4:first-child,.tiptap-editor .ProseMirror h5:first-child,.tiptap-editor .ProseMirror h6:first-child{margin-top:0}.tiptap-editor .ProseMirror p{margin-top:0;margin-bottom:var(--space-sm)}.tiptap-editor .ProseMirror p:last-child{margin-bottom:0}.tiptap-editor .ProseMirror ul,.tiptap-editor .ProseMirror ol{padding-left:var(--space-lg);margin-top:var(--space-xs);margin-bottom:var(--space-sm)}.tiptap-editor .ProseMirror ul:first-child,.tiptap-editor .ProseMirror ol:first-child{margin-top:0}.tiptap-editor .ProseMirror ul:last-child,.tiptap-editor .ProseMirror ol:last-child{margin-bottom:0}.tiptap-editor .ProseMirror li{margin-bottom:var(--space-xs)}.tiptap-editor .ProseMirror li:last-child{margin-bottom:0}.tiptap-editor .ProseMirror ul li{list-style-type:disc}.tiptap-editor .ProseMirror ol li{list-style-type:decimal}.tiptap-editor .ProseMirror ul ul,.tiptap-editor .ProseMirror ol ul{list-style-type:circle}.tiptap-editor .ProseMirror ul ul ul,.tiptap-editor .ProseMirror ol ul ul{list-style-type:square}.tiptap-editor .ProseMirror strong{font-weight:var(--weight-bold)}.tiptap-editor .ProseMirror em{font-style:italic}.tiptap-editor .ProseMirror code{font-family:Courier New,Courier,monospace;background:var(--bg-light);padding:.125rem .25rem;border-radius:var(--radius-xs);font-size:.9em}.tiptap-editor .ProseMirror blockquote{border-left:var(--border-thick) solid var(--border-light);padding-left:var(--space-md);margin-left:0;margin-right:0;margin-top:var(--space-sm);margin-bottom:var(--space-sm);color:var(--text-medium);font-style:italic}.tiptap-editor .ProseMirror blockquote:first-child{margin-top:0}.tiptap-editor .ProseMirror blockquote:last-child{margin-bottom:0}.tiptap-editor .ProseMirror hr{border:none;border-top:var(--border-thin) solid var(--border-light);margin:var(--space-md) 0}@media(max-width:768px){.tiptap-editor .ProseMirror{font-size:var(--font-sm-alt);padding:var(--space-xs)}.tiptap-editor .ProseMirror h1{font-size:var(--font-xl)}.tiptap-editor .ProseMirror h2{font-size:var(--font-lg)}.tiptap-editor .ProseMirror h3{font-size:var(--font-base)}}@media(max-width:480px){.tiptap-editor .ProseMirror{font-size:var(--font-sm);padding:var(--space-xs)}.tiptap-editor .ProseMirror h1{font-size:var(--font-lg)}.tiptap-editor .ProseMirror h2{font-size:var(--font-base)}.tiptap-editor .ProseMirror ul,.tiptap-editor .ProseMirror ol{padding-left:var(--space-md)}}.conversation-form-compact{width:100%;margin-bottom:var(--space-lg)}.conversation-input-trigger{width:100%;padding:var(--space-md);border:var(--border-thin) solid var(--border-light);border-radius:var(--radius-lg);font-family:inherit;font-size:var(--font-base);color:var(--text-dark);background:var(--bg-white);cursor:pointer;transition:all var(--transition-base) var(--ease-default);box-shadow:var(--shadow-sm)}.conversation-input-trigger:hover:not(:disabled){border-color:var(--color-primary);box-shadow:var(--shadow-md)}.conversation-input-trigger:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.conversation-input-trigger:disabled{background:var(--bg-light);color:var(--text-light);cursor:not-allowed;opacity:var(--opacity-disabled)}.conversation-input-trigger::placeholder{color:var(--text-dark);font-weight:var(--weight-semibold)}.conversation-modal-overlay{position:fixed;inset:0;background:var(--overlay-dark);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--space-md)}.conversation-modal-content{background:var(--bg-white);border-radius:var(--radius-2xl);max-width:600px;width:100%;max-height:calc(100vh - 2 * var(--space-md));overflow:hidden;box-shadow:var(--shadow-xl);transform:scale(.95);animation:modalAppear var(--transition-fast) var(--ease-default) forwards;display:flex;flex-direction:column}@keyframes modalAppear{to{transform:scale(1)}}.conversation-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xl);border-bottom:1px solid var(--border-light);flex-shrink:0}.conversation-modal-header h3{font-size:var(--font-xl);font-weight:var(--weight-semibold);color:var(--text-dark);margin:0}.modal-close-button{background:none;border:none;color:var(--text-medium);font-size:var(--font-3xl);cursor:pointer;padding:0;width:var(--icon-button-md);height:var(--icon-button-md);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);transition:all var(--transition-fast);line-height:1}.modal-close-button:hover{background-color:var(--bg-card);color:var(--text-dark)}.conversation-form-modal{padding:var(--space-xl);overflow-y:auto;flex:1}.form-group{margin-bottom:var(--space-md)}.form-label{display:block;font-weight:var(--weight-semibold);color:var(--text-dark);font-size:var(--font-base);margin-bottom:var(--space-xs)}.form-textarea{width:100%;padding:var(--space-sm);border:var(--border-thin) solid var(--border-light);border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-base);line-height:var(--line-height-relaxed);color:var(--text-dark);background:var(--bg-white);resize:vertical;min-height:100px;transition:all var(--transition-base) var(--ease-default);box-sizing:border-box}.form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.form-textarea:disabled{background:var(--bg-light);color:var(--text-light);cursor:not-allowed;opacity:var(--opacity-disabled)}.form-textarea.error{border-color:var(--color-danger)}.form-textarea.error:focus{box-shadow:0 0 0 3px var(--color-danger-light)}.form-textarea::placeholder{color:var(--text-lighter)}.char-count{font-size:var(--font-xs-alt);color:var(--text-light);text-align:right;margin-top:var(--space-xs)}.char-count.error{color:var(--color-danger);font-weight:var(--weight-semibold)}.form-error{color:var(--color-danger);font-size:var(--font-sm);margin-top:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs)}.modal-actions{display:flex;gap:var(--space-md);justify-content:flex-end;margin-top:var(--space-md)}.cancel-button{background:var(--bg-card);color:var(--text-dark);border:var(--border-thin) solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-lg);font-size:var(--font-base);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-base) var(--ease-default)}.cancel-button:hover:not(:disabled){background:var(--bg-light);border-color:var(--border-medium)}.cancel-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.submit-button{background:var(--gradient-primary);color:var(--bg-white);border:none;border-radius:var(--radius-md);padding:var(--space-sm) var(--space-lg);font-size:var(--font-base);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-base) var(--ease-default);box-shadow:var(--shadow-primary-sm)}.submit-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-primary)}.submit-button:active:not(:disabled){transform:translateY(0)}.submit-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;transform:none}.submit-button:focus{outline:none;box-shadow:var(--shadow-focus),var(--shadow-primary-sm)}@media(max-width:768px){.conversation-input-trigger{padding:var(--space-sm);font-size:var(--font-sm-alt)}.conversation-modal-content{max-width:100%;max-height:calc(100vh - var(--space-md));border-radius:var(--radius-xl)}.conversation-modal-header,.conversation-form-modal{padding:var(--space-lg)}.form-textarea{font-size:var(--font-sm-alt);min-height:80px}.submit-button,.cancel-button{padding:var(--space-sm) var(--space-md);font-size:var(--font-sm-alt)}}@media(max-width:480px){.conversation-input-trigger{padding:var(--space-sm);font-size:var(--font-sm)}.conversation-modal-overlay{padding:var(--space-xs)}.conversation-modal-content{max-height:calc(100vh - 2 * var(--space-xs));border-radius:var(--radius-lg)}.conversation-modal-header,.conversation-form-modal{padding:var(--space-md)}.conversation-modal-header h3{font-size:var(--font-lg)}.form-label{font-size:var(--font-sm-alt)}.form-textarea{font-size:var(--font-sm);padding:var(--space-xs)}.submit-button,.cancel-button{font-size:var(--font-sm);padding:var(--space-xs) var(--space-md)}.char-count{font-size:var(--font-xs)}.form-error{font-size:var(--font-xs-alt)}.modal-actions{gap:var(--space-sm)}}.inline-reply-form{width:100%;margin-top:0;padding-top:var(--space-lg)}.inline-reply-form form{width:100%}.inline-reply-form .form-group{margin-bottom:0}.inline-reply-form .form-textarea{width:100%;padding:var(--space-md);border:var(--border-thin) solid var(--border-light);border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-base);line-height:var(--line-height-relaxed);color:var(--text-dark);background:var(--bg-white);resize:vertical;min-height:80px;transition:all var(--transition-base) var(--ease-default);box-sizing:border-box}.inline-reply-form .form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.inline-reply-form .form-textarea:disabled{background:var(--bg-light);color:var(--text-light);cursor:not-allowed;opacity:var(--opacity-disabled)}.inline-reply-form .form-textarea.error{border-color:var(--color-danger)}.inline-reply-form .form-textarea.error:focus{box-shadow:0 0 0 3px var(--color-danger-light)}.inline-reply-form .form-textarea::placeholder{color:var(--text-lighter)}.inline-reply-form .char-count{font-size:var(--font-xs-alt);color:var(--text-light);text-align:right;margin-top:var(--space-xs)}.inline-reply-form .char-count.error{color:var(--color-danger);font-weight:var(--weight-semibold)}.inline-reply-form .form-error{color:var(--color-danger);font-size:var(--font-sm);margin-top:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs)}.inline-reply-form .form-actions{display:flex;gap:var(--space-md);justify-content:flex-end;margin-top:var(--space-md)}.inline-reply-form .cancel-button{background:var(--bg-card);color:var(--text-dark);border:var(--border-thin) solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-lg);font-size:var(--font-base);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-base) var(--ease-default)}.inline-reply-form .cancel-button:hover:not(:disabled){background:var(--bg-light);border-color:var(--border-medium)}.inline-reply-form .cancel-button:focus{outline:none;box-shadow:var(--shadow-focus)}.inline-reply-form .cancel-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.inline-reply-form .submit-button{background:var(--gradient-primary);color:var(--bg-white);border:none;border-radius:var(--radius-md);padding:var(--space-sm) var(--space-lg);font-size:var(--font-base);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-base) var(--ease-default);box-shadow:var(--shadow-primary-sm)}.inline-reply-form .submit-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-primary)}.inline-reply-form .submit-button:active:not(:disabled){transform:translateY(0)}.inline-reply-form .submit-button:focus{outline:none;box-shadow:var(--shadow-focus),var(--shadow-primary-sm)}.inline-reply-form .submit-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;transform:none}@media(max-width:768px){.inline-reply-form{padding-top:var(--space-md)}.inline-reply-form .form-textarea{padding:var(--space-sm);font-size:var(--font-sm-alt);min-height:70px}.inline-reply-form .submit-button,.inline-reply-form .cancel-button{padding:var(--space-sm) var(--space-md);font-size:var(--font-sm-alt)}.inline-reply-form .form-actions{gap:var(--space-sm)}}@media(max-width:480px){.inline-reply-form{padding-top:var(--space-sm)}.inline-reply-form .form-textarea{padding:var(--space-xs);font-size:var(--font-sm);min-height:60px}.inline-reply-form .submit-button,.inline-reply-form .cancel-button{padding:var(--space-xs) var(--space-md);font-size:var(--font-sm)}.inline-reply-form .char-count{font-size:var(--font-xs)}.inline-reply-form .form-error{font-size:var(--font-xs-alt)}}.conversation-thread-container{width:100%;display:flex;flex-direction:column;gap:0;background:var(--bg-white);border:var(--border-thin) solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm)}.conversation-main{background:transparent;border:none;border-radius:0;padding:0;padding-bottom:var(--space-lg);box-shadow:none;border-bottom:var(--border-thin) solid var(--border-light)}.conversation-main .conversation-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}.conversation-main .conversation-meta{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.conversation-main .conversation-author{font-weight:var(--weight-semibold);color:var(--text-dark);font-size:var(--font-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-main .conversation-timestamp{font-size:var(--font-sm);color:var(--text-light)}.conversation-main .edited-indicator{font-style:italic;color:var(--text-lighter)}.conversation-main .conversation-message{color:var(--text-dark);font-size:var(--font-base-alt);line-height:var(--line-height-relaxed);word-wrap:break-word;overflow-wrap:break-word}.replies-section{background:transparent;border-radius:0;padding:var(--space-lg) 0;border-bottom:var(--border-thin) solid var(--border-light)}.replies-header{margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:var(--border-medium) solid var(--border-light)}.replies-count{font-size:var(--font-base);font-weight:var(--weight-semibold);color:var(--text-dark)}.load-more-button{width:100%;background:var(--bg-white);color:var(--text-medium);border:var(--border-thin) solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-size:var(--font-sm-alt);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-base) var(--ease-default);margin-bottom:var(--space-md);display:flex;align-items:center;justify-content:center;gap:var(--space-xs)}.load-more-button:hover{background:var(--bg-card);border-color:var(--color-primary);color:var(--color-primary);box-shadow:var(--shadow-sm)}.load-more-button:active{transform:translateY(1px)}.load-more-button:focus{outline:none;box-shadow:var(--shadow-focus);border-color:var(--color-primary)}.replies-list{display:flex;flex-direction:column;gap:var(--space-md)}.reply-item{background:transparent;border:none;border-radius:0;padding:var(--space-md) 0;transition:background-color var(--transition-base) var(--ease-default);border-bottom:var(--border-thin) solid var(--border-lighter)}.reply-item:last-child{border-bottom:none}.reply-item:hover{background-color:var(--bg-light);border-radius:var(--radius-sm);padding-left:var(--space-sm);padding-right:var(--space-sm)}.reply-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.reply-meta{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.reply-author{font-weight:var(--weight-semibold);color:var(--text-dark);font-size:var(--font-sm-alt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-timestamp{font-size:var(--font-xs-alt);color:var(--text-light)}.reply-message{color:var(--text-dark);font-size:var(--font-text);line-height:var(--line-height-relaxed);word-wrap:break-word;overflow-wrap:break-word}.reply-deleted{background:transparent;border:none;border-radius:0;padding:var(--space-md) 0;border-bottom:var(--border-thin) solid var(--border-lighter)}.reply-deleted:last-child{border-bottom:none}.reply-deleted:hover{background-color:var(--bg-light-alt);border-radius:var(--radius-sm);padding-left:var(--space-sm);padding-right:var(--space-sm)}.reply-deleted-content{display:flex;flex-direction:column;gap:.25rem}.reply-deleted-message{font-style:italic;color:var(--text-light);font-size:var(--font-sm-alt)}.reply-deleted .reply-timestamp{font-size:var(--font-xs);color:var(--text-lighter)}@media(max-width:768px){.conversation-thread-container{padding:var(--space-md)}.conversation-main{padding-bottom:var(--space-md)}.replies-section{padding:var(--space-md) 0}.conversation-main .conversation-author,.conversation-main .conversation-message,.reply-message{font-size:var(--font-base)}.load-more-button{padding:var(--space-sm);font-size:var(--font-sm)}}@media(max-width:480px){.conversation-thread-container{padding:var(--space-sm)}.conversation-main{padding-bottom:var(--space-sm)}.replies-section{padding:var(--space-sm) 0}.replies-list{gap:0}.reply-item{padding:var(--space-sm) 0}.conversation-main .conversation-author{font-size:var(--font-sm-alt)}.conversation-main .conversation-timestamp{font-size:var(--font-xs-alt)}.conversation-main .conversation-message{font-size:var(--font-sm-alt)}.reply-author{font-size:var(--font-sm)}.reply-timestamp{font-size:var(--font-xs)}.reply-message,.replies-count{font-size:var(--font-sm-alt)}.load-more-button{padding:var(--space-xs) var(--space-sm);font-size:var(--font-xs-alt);margin-bottom:var(--space-sm)}}.conversation-thread-panel{display:flex;flex-direction:column;height:100%;background:var(--bg-white);position:relative;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:var(--border-thin) solid var(--border-light)}.conversation-thread-panel-header{padding:var(--space-md);border-bottom:var(--border-thin) solid var(--border-light);background:var(--bg-light);position:sticky;top:0;z-index:10;flex-shrink:0}.conversation-thread-panel-header .header-content{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-md)}.conversation-thread-panel-header .header-metadata{flex:1;min-width:0}.conversation-thread-panel-header .header-title{margin:0;font-size:var(--font-lg);font-weight:var(--weight-semibold);color:var(--text-dark);line-height:var(--line-height-tight);margin-bottom:var(--space-xs)}.conversation-thread-panel-header .header-info{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}.conversation-thread-panel-header .header-author{font-size:var(--font-sm);color:var(--text-medium);font-weight:var(--weight-medium);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-thread-panel-header .header-separator{font-size:var(--font-sm);color:var(--text-light)}.conversation-thread-panel-header .header-timestamp{font-size:var(--font-sm);color:var(--text-medium)}.conversation-thread-panel .close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:var(--bg-light);border:none;border-radius:var(--radius-md);color:var(--text-dark);cursor:pointer;transition:all var(--transition-base) var(--ease-default);flex-shrink:0;position:relative;z-index:10}.conversation-thread-panel .close-button:hover{background:var(--bg-card);color:var(--text-dark)}.conversation-thread-panel .close-button:active{transform:scale(.95)}.conversation-thread-panel .close-button:focus{outline:none;box-shadow:var(--shadow-focus);background:var(--bg-card)}.conversation-thread-panel-content{flex:1;overflow-y:auto;padding:var(--space-md)}.conversation-thread-panel.mobile-modal{position:fixed;inset:0;z-index:1000;border-radius:0;animation:slideIn .3s cubic-bezier(.4,0,.2,1);max-height:100vh;overflow-y:auto}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}body.modal-open{overflow:hidden;position:fixed;width:100%;height:100%}.conversation-thread-panel.mobile-modal .conversation-thread-panel-header{position:sticky;top:0;background:var(--bg-light);z-index:1001;border-radius:0;box-shadow:var(--shadow-sm);min-height:56px}.conversation-thread-panel.mobile-modal .close-button{width:44px;height:44px;background:var(--bg-white);border:var(--border-medium) solid var(--border-light);box-shadow:var(--shadow-md);color:var(--text-dark);z-index:1002}@media(max-width:768px){.conversation-thread-panel-header,.conversation-thread-panel-content{padding:var(--space-sm)}.conversation-thread-panel .close-button{width:44px;height:44px;background:var(--bg-white);border:var(--border-medium) solid var(--border-light);box-shadow:var(--shadow-md)}}@media(max-width:480px){.conversation-thread-panel-header{padding:var(--space-sm)}.conversation-thread-panel-content{padding:var(--space-xs)}.conversation-thread-panel-header .header-author{max-width:150px}}@media(prefers-reduced-motion:reduce){.conversation-thread-panel.mobile-modal{animation:none}}.game-session-detail-container{min-height:calc(100vh - 70px);width:100%;background:var(--gradient-bg-light);padding:var(--space-xl)}@media(min-width:769px){.game-session-detail-container{display:grid;grid-template-columns:40% 58%;gap:var(--space-xl);height:calc(100vh - 70px);padding:var(--space-xl);transition:grid-template-columns .3s cubic-bezier(.4,0,.2,1)}.game-session-detail-container.three-pane{grid-template-columns:20% 30% 48%}.session-info-panel-wrapper{overflow-y:auto;align-self:start;max-height:calc(100vh - 70px - 2 * var(--space-xl))}.conversation-panel-wrapper{overflow-y:auto;height:100%;display:flex;flex-direction:column;gap:var(--space-lg)}.conversation-thread-panel-wrapper{overflow-y:auto;height:100%;position:relative}}@media(max-width:768px){.game-session-detail-container{display:flex;flex-direction:column;gap:var(--space-lg);height:auto;padding:var(--space-md);min-height:calc(100vh - 60px)}.session-info-panel-wrapper{position:static;max-height:none;overflow-y:visible}.conversation-panel-wrapper{height:auto;overflow-y:visible;display:flex;flex-direction:column;gap:var(--space-lg)}.conversation-thread-panel-wrapper{position:fixed;inset:0;z-index:1000;padding:0}}.session-info-panel-wrapper{background:transparent;border-radius:0;padding:0;box-shadow:none;border:none}.conversation-panel-wrapper{background:transparent;border-radius:0;padding:0;box-shadow:none;border:none;position:relative}.conversation-thread-panel-wrapper{background:transparent;border-radius:0;padding:0;box-shadow:none;border:none}@media(min-width:769px){.conversation-thread-panel-wrapper{padding-right:var(--space-xl)!important}}@media(prefers-reduced-motion:reduce){.game-session-detail-container{transition:none!important}}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;color:var(--text-light)}.loading-spinner{animation:spin 1s var(--ease-linear) infinite;color:var(--color-primary);margin-bottom:var(--space-md)}.loading-state p{color:var(--text-medium);font-size:var(--font-base-alt);margin:0}.auth-required-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;background:var(--bg-white);padding:var(--space-2xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);border:1px solid var(--border-white)}.lock-icon{color:var(--color-danger);margin-bottom:var(--space-lg);opacity:.8}.auth-required-state h3{font-size:var(--font-2xl);font-weight:var(--weight-semibold);color:var(--text-dark);margin:0 0 var(--space-md) 0}.auth-required-state p{color:var(--text-light);margin-bottom:var(--space-xl);font-size:var(--font-base-alt);line-height:var(--line-height-normal)}.sign-in-button{background:var(--gradient-primary);color:var(--bg-white);border:none;padding:12px 24px;font-size:var(--font-base-alt);font-weight:var(--weight-semibold);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base) var(--ease-default);box-shadow:var(--shadow-primary)}.sign-in-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-primary-lg)}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;color:var(--text-light)}.error-icon{color:var(--color-danger);margin-bottom:var(--space-md)}.error-state h3{color:var(--text-dark);margin:0 0 var(--space-xs) 0;font-size:var(--font-2xl);font-weight:var(--weight-semibold)}.error-state p{margin:0 0 var(--space-lg) 0;max-width:400px;color:var(--text-medium);font-size:var(--font-base-alt)}.retry-button{background:var(--gradient-primary);color:var(--bg-white);border:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-base) var(--ease-default);box-shadow:var(--shadow-primary)}.retry-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-primary-lg)}.conversations-error{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:var(--color-danger-light);border:1px solid var(--color-danger-border);border-radius:var(--radius-md);color:var(--color-danger-dark);font-size:var(--font-sm);margin-bottom:var(--space-lg);box-shadow:var(--shadow-danger-light)}.conversations-error span{flex:1}.conversation-fetch-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:400px;text-align:center;padding:var(--space-2xl);background:var(--bg-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-light)}.conversation-fetch-error svg{color:var(--color-danger);margin-bottom:var(--space-lg)}.conversation-fetch-error h3{color:var(--text-dark);margin:0 0 var(--space-sm) 0;font-size:var(--font-xl);font-weight:var(--weight-semibold)}.conversation-fetch-error p{margin:0 0 var(--space-xl) 0;max-width:400px;color:var(--text-medium);font-size:var(--font-base-alt)}.conversation-fetch-error .error-actions{display:flex;gap:var(--space-md);align-items:center}.conversation-fetch-error .close-button{background:var(--bg-light);color:var(--text-dark);border:1px solid var(--border-light);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-base) var(--ease-default)}.conversation-fetch-error .close-button:hover{background:var(--bg-card);border-color:var(--border-medium)}.conversation-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:400px;text-align:center;padding:var(--space-2xl);background:var(--bg-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-light)}.conversation-loading .loading-spinner{margin-bottom:var(--space-md)}.conversation-loading p{color:var(--text-medium);font-size:var(--font-base-alt);margin:0}.conversation-thread-view{display:flex;flex-direction:column;gap:var(--space-lg);height:100%;overflow-y:auto;background:var(--bg-white);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);border:var(--border-thin) solid var(--border-light)}.back-button{display:flex;align-items:center;gap:var(--space-sm);background:var(--bg-light);border:var(--border-thin) solid var(--border-light);color:var(--color-primary);font-size:var(--font-base-alt);font-weight:var(--weight-medium);cursor:pointer;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);transition:all var(--transition-fast) var(--ease-default);align-self:flex-start;flex-shrink:0}.back-button:hover{background-color:var(--bg-card);color:var(--color-primary-dark);border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.back-button:active{transform:translate(-2px)}.back-button:focus{outline:none;box-shadow:var(--shadow-focus);border-color:var(--color-primary)}@media(max-width:1024px){.game-session-detail-container{padding:var(--space-lg)}@media(min-width:769px){.game-session-detail-container{height:calc(100vh - 70px)}.session-info-panel-wrapper{max-height:calc(100vh - 70px - 2 * var(--space-lg))}}}@media(max-width:768px){.session-info-panel-wrapper{padding:var(--space-lg)}.conversation-panel-wrapper{padding:0 var(--space-md) 0 0}.conversation-thread-view{padding:var(--space-md);gap:var(--space-md);border-radius:var(--radius-md)}.back-button{font-size:var(--font-sm-alt);padding:var(--space-xs) var(--space-sm)}}@media(max-width:480px){.game-session-detail-container{padding:var(--space-sm);min-height:calc(100vh - 56px)}.session-info-panel-wrapper{padding:var(--space-md);border-radius:var(--radius-lg)}.conversation-panel-wrapper{padding:0 var(--space-sm) 0 0}.conversation-thread-view{padding:var(--space-sm);gap:var(--space-sm);border-radius:var(--radius-md)}.back-button{font-size:var(--font-sm);padding:var(--space-xs) var(--space-sm);gap:var(--space-xs)}}@media(max-width:360px){.game-session-detail-container{padding:var(--space-xs)}.session-info-panel-wrapper{padding:var(--space-sm)}}.session-info-panel-wrapper>*:first-child{margin-top:0}.session-info-panel-wrapper>*:last-child{margin-bottom:0}.avatar-modal-overlay{position:fixed;inset:0;background:var(--overlay-dark);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--space-md);animation:fadeIn var(--transition-fast) var(--ease-default)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.avatar-modal-content{background:var(--bg-white);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);max-width:600px;width:100%;max-height:90vh;overflow-y:auto;animation:slideUp var(--transition-base) var(--ease-default)}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.avatar-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xl);border-bottom:var(--border-thin) solid var(--border-light)}.avatar-modal-header h2{margin:0;font-size:var(--font-xl);color:var(--text-dark);font-weight:var(--weight-bold)}.avatar-modal-close{background:none;border:none;color:var(--text-light);cursor:pointer;padding:var(--space-xs);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all var(--transition-fast)}.avatar-modal-close:hover:not(:disabled){background:var(--bg-card);color:var(--text-dark)}.avatar-modal-close:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.avatar-modal-body{padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg)}.avatar-current-preview{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-lg);background:var(--bg-card);border-radius:var(--radius-xl)}.avatar-preview-label{margin:0;font-size:var(--font-sm);color:var(--text-light);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.05em}.avatar-error-message{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-md);background:var(--color-danger-light);color:var(--color-danger-dark);border:var(--border-thin) solid var(--color-danger-border);border-radius:var(--radius-xl);font-size:var(--font-text)}.avatar-error-message p{margin:0;flex:1}.error-dismiss{background:none;border:none;font-size:var(--font-2xl);cursor:pointer;padding:0;width:var(--icon-button-sm);height:var(--icon-button-sm);display:flex;align-items:center;justify-content:center;color:inherit;opacity:var(--opacity-subtle);transition:opacity var(--transition-fast)}.error-dismiss:hover{opacity:1}.avatar-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-2xl) var(--space-xl);gap:var(--space-md);text-align:center}.avatar-loading-spinner{animation:spin 1s linear infinite;color:var(--color-primary)}.avatar-loading-state p{margin:0;color:var(--text-dark);font-size:var(--font-base);font-weight:var(--weight-semibold)}.avatar-loading-subtext{color:var(--text-light)!important;font-size:var(--font-sm)!important;font-weight:var(--weight-normal)!important}.avatar-options-label{text-align:center}.avatar-options-label p{margin:0;color:var(--text-light);font-size:var(--font-text)}.avatar-options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg);padding:var(--space-md) 0}.avatar-option{position:relative;aspect-ratio:1;border-radius:var(--radius-xl);overflow:hidden;cursor:pointer;border:var(--border-thick) solid transparent;transition:all var(--transition-fast);background:var(--bg-card)}.avatar-option:hover{transform:translateY(-4px);box-shadow:var(--shadow-primary);border-color:var(--color-primary-light)}.avatar-option-selected{border-color:var(--color-primary);box-shadow:var(--shadow-primary-lg);transform:translateY(-4px)}.avatar-option-image{width:100%;height:100%;object-fit:cover;display:block}.avatar-option-checkmark{position:absolute;top:var(--space-sm);right:var(--space-sm);width:var(--icon-button-md);height:var(--icon-button-md);background:var(--color-success);color:var(--bg-white);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-lg);font-weight:var(--weight-bold);box-shadow:var(--shadow-success);animation:checkmarkPop var(--transition-base) var(--ease-default)}@keyframes checkmarkPop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.avatar-modal-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding-top:var(--space-lg);border-top:var(--border-thin) solid var(--border-light)}.avatar-actions-left,.avatar-actions-right{display:flex;gap:var(--space-md)}.avatar-actions-right{margin-left:auto}.avatar-button{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border:none;border-radius:var(--radius-md);font-size:var(--font-base);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.avatar-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;transform:none!important}.button-spinner{animation:spin 1s linear infinite}.avatar-button-primary{background:var(--gradient-primary);color:var(--bg-white);box-shadow:var(--shadow-primary-sm)}.avatar-button-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-primary)}.avatar-button-secondary{background:var(--bg-card);color:var(--text-dark);border:var(--border-thin) solid var(--border-primary-light)}.avatar-button-secondary:hover:not(:disabled){background:var(--bg-card-dark);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.avatar-button-danger{background:var(--bg-white);color:var(--color-danger);border:var(--border-thin) solid var(--color-danger-border)}.avatar-button-danger:hover:not(:disabled){background:var(--color-danger-light);transform:translateY(-2px);box-shadow:var(--shadow-danger)}@media(max-width:768px){.avatar-modal-overlay{padding:var(--space-sm)}.avatar-modal-content{max-height:95vh}.avatar-modal-header,.avatar-modal-body{padding:var(--space-lg)}.avatar-options-grid{gap:var(--space-md)}.avatar-modal-actions{flex-direction:column;gap:var(--space-sm)}.avatar-actions-left,.avatar-actions-right{width:100%;flex-direction:column}.avatar-button{width:100%;justify-content:center}}@media(max-width:480px){.avatar-modal-header h2{font-size:var(--font-lg)}.avatar-modal-header,.avatar-modal-body{padding:var(--space-md)}.avatar-options-grid{gap:var(--space-sm)}.avatar-option-checkmark{width:var(--icon-button-sm);height:var(--icon-button-sm);font-size:var(--font-base)}}.profile-container{min-height:calc(100vh - 70px);width:100%;background:linear-gradient(135deg,var(--bg-light) 0%,var(--bg-medium) 100%);padding:var(--space-xl)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center}.loading-spinner{animation:spin 1s linear infinite;color:var(--color-primary)}.auth-required-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;gap:var(--space-md)}.lock-icon,.error-icon{color:var(--text-secondary);opacity:.6}.auth-required-state h3,.error-state h3{margin:0;font-size:var(--font-xl);color:var(--text-dark)}.auth-required-state p,.error-state p{margin:0;color:var(--text-light)}.sign-in-button{margin-top:var(--space-md);padding:var(--space-sm) var(--space-xl);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--bg-white);border:none;border-radius:var(--radius-md);font-size:var(--font-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-primary-sm)}.sign-in-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-primary)}.error-banner,.success-banner{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);margin-bottom:var(--space-lg);border-radius:var(--radius-xl);font-size:var(--font-text)}.error-banner{background:var(--color-danger-light);color:var(--color-danger-dark);border:var(--border-thin) solid var(--color-danger-border);box-shadow:var(--shadow-danger-light)}.success-banner{background:var(--color-success-light);color:var(--color-success-dark);border:var(--border-thin) solid var(--color-success-border);box-shadow:var(--shadow-success-light)}.error-banner p,.success-banner p{margin:0;flex:1}.close-button{background:none;border:none;font-size:var(--font-2xl);cursor:pointer;padding:0;width:var(--friends-icon-sm);height:var(--friends-icon-sm);display:flex;align-items:center;justify-content:center;color:inherit;opacity:.7;transition:opacity var(--transition-fast)}.close-button:hover{opacity:1}.profile-content{max-width:600px;margin:0 auto;padding-top:var(--space-2xl);display:flex;flex-direction:column;gap:var(--space-lg)}.profile-form-card{background:var(--bg-white);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-card)}.profile-form-card h2{margin:0 0 var(--space-lg) 0;font-size:var(--font-lg);color:var(--text-dark);padding-bottom:var(--space-md);border-bottom:var(--border-thin) solid var(--border-light)}.form-section{margin-bottom:var(--space-lg)}.form-label{display:block;font-weight:600;color:var(--text-dark);margin-bottom:var(--space-xs);font-size:var(--font-base)}.form-help{color:var(--text-light);font-size:var(--font-text);margin:var(--space-xs) 0}.form-input{width:100%;padding:var(--space-sm) var(--space-md);background-color:var(--bg-white);color:var(--text-dark);border:var(--border-medium) solid var(--border-primary-light);border-radius:var(--radius-md);font-size:var(--font-base-alt);transition:all var(--transition-fast);font-family:inherit}.form-input:focus{outline:none;border-color:var(--border-primary-medium);box-shadow:var(--shadow-focus)}.form-input:disabled{background-color:var(--bg-card);color:var(--text-light);cursor:not-allowed;opacity:.7}.avatar-section{padding-bottom:var(--space-lg);border-bottom:var(--border-thin) solid var(--border-light)}.avatar-selection-container{display:flex;align-items:center;gap:var(--space-lg);margin-top:var(--space-md)}.select-avatar-button{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--bg-white);border:none;border-radius:var(--radius-md);font-size:var(--font-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-primary-sm)}.select-avatar-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-primary)}.select-avatar-button:active{transform:translateY(0)}.form-actions{display:flex;justify-content:flex-end;gap:var(--space-md);margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:var(--border-thin) solid var(--border-light)}.cancel-button,.save-button{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border:none;border-radius:var(--radius-md);font-size:var(--font-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast);min-width:120px;justify-content:center}.cancel-button{background:var(--bg-card);color:var(--text-dark);border:var(--border-thin) solid var(--border-primary-light)}.cancel-button:hover:not(:disabled){background:var(--bg-card-dark);transform:translateY(-2px);box-shadow:var(--shadow-card)}.save-button{background:linear-gradient(135deg,var(--color-success) 0%,var(--color-success-dark) 100%);color:var(--bg-white);box-shadow:var(--shadow-success-sm)}.save-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-success)}.cancel-button:disabled,.save-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.spinner{animation:spin 1s linear infinite}@media(max-width:768px){.profile-container{padding:var(--space-md)}.profile-content{padding-top:var(--space-xl)}.avatar-selection-container{flex-direction:column;align-items:flex-start}.select-avatar-button{width:100%;justify-content:center}.form-actions{flex-direction:column-reverse}.cancel-button,.save-button{width:100%}}@media(max-width:480px){.profile-form-card{padding:var(--space-md)}.profile-content{padding-top:var(--space-lg)}}.pricing-container{min-height:calc(100vh - 70px);width:100%;background:linear-gradient(135deg,var(--bg-light) 0%,var(--bg-medium) 100%);padding:var(--space-xl)}.pricing-content{max-width:1200px;margin:0 auto;padding-top:var(--space-2xl)}.pricing-header{text-align:center;margin-bottom:var(--space-2xl)}.pricing-header h2{margin:0 0 var(--space-md) 0;font-size:var(--font-2xl);color:var(--text-dark)}.alpha-notice{color:var(--text-light);font-size:var(--font-base);padding:var(--space-md);background:var(--color-warning-light);border:var(--border-thin) solid var(--color-warning-border);border-radius:var(--radius-md);max-width:600px;margin:0 auto}.tiers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-xl);margin-top:var(--space-2xl)}.tier-card{background:var(--bg-white);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-card);transition:all var(--transition-fast);border:var(--border-medium) solid var(--border-light)}.tier-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}.tier-card.current-tier{border-color:var(--color-primary);border-width:var(--border-thick);box-shadow:var(--shadow-primary),0 0 0 4px var(--color-primary-light);background:linear-gradient(135deg,var(--bg-white) 0%,rgba(102,126,234,.03) 100%);position:relative}.tier-card.current-tier:before{content:"";position:absolute;inset:-2px;background:var(--gradient-primary);border-radius:var(--radius-xl);z-index:-1;opacity:.1}.tier-card.current-tier:hover{box-shadow:var(--shadow-primary-lg),0 0 0 4px var(--color-primary-light);transform:translateY(-6px)}.tier-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:var(--border-thin) solid var(--border-light)}.tier-header h3{margin:0;font-size:var(--font-lg);color:var(--text-dark)}.current-badge{display:flex;align-items:center;gap:var(--space-xs);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--bg-white);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);font-size:var(--font-text);font-weight:var(--weight-semibold);box-shadow:var(--shadow-primary-sm);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:var(--shadow-primary-sm)}50%{box-shadow:var(--shadow-primary)}}.features-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-md)}.features-list li{display:flex;align-items:flex-start;gap:var(--space-sm);color:var(--text-medium);font-size:var(--font-base);line-height:1.6}.feature-check{color:var(--color-success);flex-shrink:0;margin-top:2px}@media(max-width:768px){.pricing-container{padding:var(--space-md)}.pricing-content{padding-top:var(--space-xl)}.tiers-grid{grid-template-columns:1fr;gap:var(--space-lg)}.tier-header{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}}@media(max-width:480px){.tier-card{padding:var(--space-md)}.pricing-content{padding-top:var(--space-lg)}.pricing-header h2{font-size:var(--font-xl)}}.login-container{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:var(--space-xl);background:var(--gradient-primary)}.login-card{background:var(--bg-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:var(--space-2xl);width:100%;max-width:400px;text-align:center}.login-header h1{color:var(--bg-dark-gray);margin-bottom:var(--space-xs);font-size:var(--font-3xl);font-weight:var(--weight-semibold)}.login-header p{color:#666;margin-bottom:var(--space-xl);font-size:var(--font-base-alt)}.error-message{background:#fee;border:1px solid #fcc;border-radius:var(--radius-sm);color:#c33;padding:var(--space-sm);margin-bottom:var(--space-lg);font-size:var(--font-base)}.google-signin-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);width:100%;padding:.875rem var(--space-lg);border:2px solid #e0e0e0;border-radius:var(--radius-md);background:var(--bg-white);color:var(--bg-dark-gray);font-size:var(--font-base-alt);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast) var(--ease-default);position:relative}.google-signin-btn:hover:not(:disabled){border-color:#4285f4;box-shadow:0 2px 8px #4285f433;transform:translateY(-1px)}.google-signin-btn:active:not(:disabled){transform:translateY(0)}.google-signin-btn:disabled{opacity:.7;cursor:not-allowed}.google-icon{width:20px;height:20px;flex-shrink:0}.loading-spinner{width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid #4285f4;border-radius:var(--radius-full);animation:spin 1s var(--ease-linear) infinite}@media(max-width:768px){.login-container{padding:var(--space-md);min-height:70vh}.login-card{padding:var(--space-xl)}.login-header h1{font-size:var(--font-2xl)}}.auth-callback-container{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:var(--space-xl);background:var(--gradient-primary)}.auth-callback-card{background:var(--bg-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:var(--space-2xl);width:100%;max-width:400px;text-align:center}.status-icon{margin-bottom:var(--space-lg);display:flex;justify-content:center;align-items:center;height:60px}.loading-spinner.large{width:40px;height:40px;border:3px solid #f3f3f3;border-top:3px solid #4285f4;border-radius:var(--radius-full);animation:spin 1s var(--ease-linear) infinite}.success-icon{width:60px;height:60px;background:#4caf50;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--bg-white);font-size:var(--font-3xl);font-weight:var(--weight-bold);margin:0 auto}.error-icon{width:60px;height:60px;background:#f44336;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--bg-white);font-size:var(--font-3xl);font-weight:var(--weight-bold);margin:0 auto}.status-message{font-size:var(--font-xl);font-weight:var(--weight-medium);margin-bottom:var(--space-md)}.status-message.processing{color:#666}.status-message.success{color:#4caf50}.status-message.error{color:#f44336}.error-details{background:#fee;border:1px solid #fcc;border-radius:var(--radius-sm);color:#c33;padding:var(--space-sm);margin-bottom:var(--space-lg);font-size:var(--font-base)}.retry-btn{background:#4285f4;color:var(--bg-white);border:none;border-radius:var(--radius-md);padding:var(--space-sm) var(--space-xl);font-size:var(--font-base-alt);font-weight:var(--weight-medium);cursor:pointer;transition:background var(--transition-fast) var(--ease-default)}.retry-btn:hover{background:#3367d6}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.auth-callback-container{padding:var(--space-md);min-height:70vh}.auth-callback-card{padding:var(--space-xl)}.status-message{font-size:var(--font-lg)}}.App{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;width:100%}*{box-sizing:border-box}@media(pointer:coarse){button,.navbar-link,.brand-link,.retry-button{min-height:44px;min-width:44px}button:active,.navbar-link:active,.brand-link:active{transform:scale(.98)}}html,body{overflow-x:hidden;width:100%}html{scroll-behavior:smooth}@media(prefers-reduced-motion:no-preference){*:focus{transition:outline-offset .2s ease}}@media(prefers-contrast:high){.navbar-link.active:after{background-color:currentColor}.count-badge,.retry-button{border:2px solid currentColor}}