/* ========================================================================== BroadcastEvent Template - Mobile-First CSS ========================================================================== */ /* CSS Custom Properties (Design Tokens) */:root{/* Colors */ --color-primary:#b21f3a;--color-primary-dark:#9f1b33;--color-secondary:#0f3460;--color-background:#1a1a2e;--color-surface:#16213e;--color-surface-elevated:#1f2b4a;--color-text:#ffffff;--color-text-muted:#a0a0b0;--color-border:rgba(255,255,255,0.1);--color-success:#00d26a;--color-warning:#ffc107;--color-error:#ff4444;/* Typography */ --font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-size-xs:0.75rem;/* 12px */ --font-size-sm:0.875rem;/* 14px */ --font-size-base:1rem;/* 16px */ --font-size-lg:1.125rem;/* 18px */ --font-size-xl:1.25rem;/* 20px */ --font-size-2xl:1.5rem;/* 24px */ --font-size-3xl:1.875rem;/* 30px */ --font-size-4xl:2.25rem;/* 36px */ /* Spacing */ --space-1:0.25rem;/* 4px */ --space-2:0.5rem;/* 8px */ --space-3:0.75rem;/* 12px */ --space-4:1rem;/* 16px */ --space-5:1.25rem;/* 20px */ --space-6:1.5rem;/* 24px */ --space-8:2rem;/* 32px */ --space-10:2.5rem;/* 40px */ --space-12:3rem;/* 48px */ --space-16:4rem;/* 64px */ /* Border Radius */ --radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;/* Shadows */ --shadow-sm:0 1px 2px rgba(0,0,0,0.3);--shadow-md:0 4px 6px rgba(0,0,0,0.3);--shadow-lg:0 10px 15px rgba(0,0,0,0.3);--shadow-xl:0 20px 25px rgba(0,0,0,0.4);/* Transitions */ --transition-fast:150ms ease;--transition-base:250ms ease;--transition-slow:350ms ease;/* Z-Index Scale */ --z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-modal:400;--z-tooltip:500}/* ========================================================================== Base Styles ========================================================================== */ *,*::before,*::after{box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;padding:0;font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--color-text);background-color:var(--color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{max-width:100%;height:auto;display:block}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover,a:focus{color:var(--color-primary-dark)}button{cursor:pointer;font-family:inherit}/* Skip Link for Accessibility */ .skip-link{position:absolute;top:-100%;left:var(--space-4);z-index:var(--z-tooltip);padding:var(--space-3) var(--space-4);background:var(--color-primary);color:var(--color-text);border-radius:var(--radius-md);font-weight:600;transition:top var(--transition-fast)}.skip-link:focus{top:var(--space-4);outline:2px solid var(--color-text);outline-offset:2px}/* Container */ .container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-4)}/* ========================================================================== Header & Navigation ========================================================================== */ .header{position:sticky;top:0;z-index:var(--z-sticky);background:rgba(26,26,46,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);max-width:1200px;margin:0 auto}.logo{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text);font-weight:700;font-size:var(--font-size-lg)}.logo:hover,.logo:focus{color:var(--color-text)}.logo svg{flex-shrink:0}/* Mobile Menu Toggle */ .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;padding:4px;background:none;border:none;cursor:pointer}.menu-toggle span{display:block;width:100%;height:2px;background:var(--color-text);border-radius:2px;transition:transform var(--transition-base),opacity var(--transition-base)}.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}/* Mobile Navigation */ .nav-links{position:fixed;top:60px;left:0;right:0;bottom:0;display:none;flex-direction:column;padding:var(--space-6);margin:0;list-style:none;background:var(--color-background);z-index:var(--z-fixed)}.nav-links.active{display:flex}.nav-links li{border-bottom:1px solid var(--color-border)}.nav-links a{display:block;padding:var(--space-4) 0;color:var(--color-text);font-size:var(--font-size-lg);font-weight:500}.nav-links a:hover,.nav-links a:focus{color:var(--color-primary)}/* ========================================================================== Broadcast Hero Section ========================================================================== */ .broadcast-hero{padding:var(--space-6) 0;text-align:center;background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-background) 100%)}/* Live Badge */ .live-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-primary);color:var(--color-text);font-size:var(--font-size-xs);font-weight:700;letter-spacing:0.1em;border-radius:var(--radius-full);margin-bottom:var(--space-4)}.live-dot{width:8px;height:8px;background:var(--color-text);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.2)}}.broadcast-title{margin:0 0 var(--space-2);font-size:var(--font-size-2xl);font-weight:700;line-height:1.2}.broadcast-subtitle{margin:0 0 var(--space-4);color:var(--color-text-muted);font-size:var(--font-size-sm)}.broadcast-meta{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-sm)}.broadcast-time,.viewer-count{display:flex;align-items:center;gap:var(--space-2)}.viewer-count svg{color:var(--color-success)}/* ========================================================================== Video Player Section ========================================================================== */ .video-section{padding:0 0 var(--space-6)}.video-wrapper{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xl)}.video-player{position:relative;width:100%;aspect-ratio:16 / 9;background:#000}.video-placeholder{position:relative;width:100%;height:100%}.video-placeholder img{width:100%;height:100%;object-fit:cover}.live-video{position:absolute;inset:0;width:100%;height:100%;display:none;background:#000}.live-video.is-active{display:block}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0;background:none;border:none;transition:transform var(--transition-base)}.play-button:hover{transform:translate(-50%,-50%) scale(1.1)}.play-button:focus{outline:3px solid var(--color-primary);outline-offset:4px;border-radius:50%}.video-controls{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3);background:var(--color-surface)}.control-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:var(--space-2);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-size-sm);font-weight:600;transition:background var(--transition-fast),border-color var(--transition-fast)}.control-btn:hover,.control-btn:focus{background:var(--color-secondary);border-color:var(--color-primary)}/* ========================================================================== Broadcast Info Section with Tabs ========================================================================== */ .broadcast-info{padding:var(--space-6) 0}/* Tabs */ .tabs{display:flex;gap:var(--space-1);padding:var(--space-1);background:var(--color-surface);border-radius:var(--radius-lg);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:1;min-width:max-content;padding:var(--space-3) var(--space-4);background:transparent;border:none;border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:500;white-space:nowrap;transition:background var(--transition-fast),color var(--transition-fast)}.tab:hover{color:var(--color-text)}.tab.active{background:var(--color-primary);color:var(--color-text)}.tab:focus{outline:2px solid var(--color-primary);outline-offset:2px}/* Tab Panels */ .tab-panels{margin-top:var(--space-6)}.tab-panel{display:none}.tab-panel.active{display:block;animation:fadeIn var(--transition-base)}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tab-panel h2{margin:0 0 var(--space-4);font-size:var(--font-size-xl);font-weight:700}.tab-panel p{color:var(--color-text-muted);line-height:1.7}/* Empty State */ .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-6);text-align:center}.empty-state svg{margin-bottom:var(--space-4);color:var(--color-text-muted);opacity:0.5}.empty-state p{margin:0;color:var(--color-text-muted);font-size:var(--font-size-base)}/* Info Cards */ .info-cards{display:grid;gap:var(--space-4);margin-top:var(--space-6)}.info-card{padding:var(--space-5);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.info-card h3{margin:0 0 var(--space-4);font-size:var(--font-size-lg);font-weight:600}.info-card ul{margin:0;padding-left:var(--space-5);color:var(--color-text-muted)}.info-card li{margin-bottom:var(--space-2)}.info-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4)}.info-card dt{color:var(--color-text-muted);font-size:var(--font-size-sm)}.info-card dd{margin:0;font-weight:500}/* Schedule List */ .schedule-list{display:flex;flex-direction:column;gap:var(--space-4)}.schedule-item{display:flex;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-lg);border-left:3px solid var(--color-primary)}.schedule-item time{flex-shrink:0;min-width:70px;color:var(--color-primary);font-size:var(--font-size-sm);font-weight:600}.schedule-content h3{margin:0 0 var(--space-1);font-size:var(--font-size-base);font-weight:600}.schedule-content p{margin:0 0 var(--space-2);font-size:var(--font-size-sm)}.speaker-name{display:block;color:var(--color-text-muted);font-size:var(--font-size-xs);font-style:italic}/* Speakers Grid */ .speakers-grid{display:grid;gap:var(--space-4)}.speaker-card{padding:var(--space-5);background:var(--color-surface);border-radius:var(--radius-lg);text-align:center}.speaker-card img{width:100px;height:100px;margin:0 auto var(--space-4);border-radius:50%;object-fit:cover}.speaker-card h3{margin:0 0 var(--space-1);font-size:var(--font-size-lg);font-weight:600}.speaker-title{margin:0 0 var(--space-2);color:var(--color-primary);font-size:var(--font-size-sm);font-weight:500}.speaker-bio{margin:0;color:var(--color-text-muted);font-size:var(--font-size-sm)}/* Chat Container */ .chat-container{display:flex;flex-direction:column;height:400px;background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden}.chat-messages{flex:1;padding:var(--space-4);overflow-y:auto}.chat-message{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}.chat-user{font-weight:600;color:var(--color-primary);font-size:var(--font-size-sm)}.chat-text{flex:1;min-width:0;font-size:var(--font-size-sm);word-break:break-word}.chat-time{width:100%;color:var(--color-text-muted);font-size:var(--font-size-xs)}.chat-form{display:flex;gap:var(--space-2);padding:var(--space-3);background:var(--color-surface-elevated);border-top:1px solid var(--color-border)}.chat-form input{flex:1;padding:var(--space-3);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-size-sm)}.chat-form input:focus{outline:none;border-color:var(--color-primary)}.chat-form input::placeholder{color:var(--color-text-muted)}.chat-form button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:var(--color-primary);border:none;border-radius:var(--radius-md);color:var(--color-text);transition:background var(--transition-fast)}.chat-form button:hover{background:var(--color-primary-dark)}/* ========================================================================== Another Live Broadcast Section ========================================================================== */ .another-broadcast-section{padding:var(--space-10) 0;background:var(--color-background)}.broadcast-info,.another-broadcast-section{content-visibility:auto;contain-intrinsic-size:800px}.another-broadcast-section h2{margin:0 0 var(--space-6);font-size:var(--font-size-2xl);font-weight:700;text-align:center}.broadcast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4)}.broadcast-card{position:relative;display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;transition:transform var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base);overflow:hidden}.broadcast-card:hover{transform:translateY(-4px);border-color:var(--color-primary);box-shadow:var(--shadow-lg)}.broadcast-card-image{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;background:var(--color-background)}.broadcast-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--transition-base)}.broadcast-card:hover .broadcast-card-image img{transform:scale(1.05)}.broadcast-card-content{padding:var(--space-4);background:var(--color-surface-elevated)}.broadcast-card h3{margin:0;font-size:var(--font-size-base);font-weight:600;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.broadcast-badge{position:absolute;top:var(--space-3);right:var(--space-3);display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);background:var(--color-primary);color:var(--color-text);font-size:var(--font-size-xs);font-weight:700;letter-spacing:0.05em;border-radius:var(--radius-full);box-shadow:var(--shadow-md)}.broadcast-badge::before{content:'';width:6px;height:6px;background:var(--color-text);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}/* ========================================================================== External Thumbnails Section ========================================================================== */ .external-thumbnails-section{padding:var(--space-10) 0;background:var(--color-surface)}.external-thumbnails-section h2{margin:0 0 var(--space-6);font-size:var(--font-size-2xl);font-weight:700;text-align:center}.thumbnail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-4)}.thumbnail-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-background);border:1px solid var(--color-border);transition:transform var(--transition-base),box-shadow var(--transition-base)}.thumbnail-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.thumbnail-card img{width:100%;aspect-ratio:16 / 9;object-fit:cover;display:block}.thumbnail-caption{padding:var(--space-3);background:var(--color-surface-elevated)}.thumbnail-caption span{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* ========================================================================== External URLs Section ========================================================================== */ .external-urls-section{padding:var(--space-10) 0;background:var(--color-background)}.external-urls-section h2{margin:0 0 var(--space-6);font-size:var(--font-size-2xl);font-weight:700;text-align:center}.urls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-3)}.url-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);text-decoration:none;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.url-card:hover{background:var(--color-surface-elevated);border-color:var(--color-primary);transform:translateX(4px)}.url-card svg{flex-shrink:0;color:var(--color-primary)}.url-card span{flex:1;font-size:var(--font-size-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* ========================================================================== CTA Section ========================================================================== */ .cta-section{padding:var(--space-12) 0;text-align:center;background:linear-gradient(135deg,var(--color-secondary) 0%,var(--color-surface) 100%)}.cta-section h2{margin:0 0 var(--space-2);font-size:var(--font-size-2xl);font-weight:700}.cta-section p{margin:0 0 var(--space-6);color:var(--color-text-muted)}.subscribe-form{display:flex;flex-direction:column;gap:var(--space-3);max-width:400px;margin:0 auto}.subscribe-form input{padding:var(--space-4);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-size-base)}.subscribe-form input:focus{outline:none;border-color:var(--color-primary)}.subscribe-form input::placeholder{color:var(--color-text-muted)}.subscribe-form button{padding:var(--space-4);background:var(--color-primary);border:none;border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-size-base);font-weight:600;transition:background var(--transition-fast)}.subscribe-form button:hover{background:var(--color-primary-dark)}/* ========================================================================== Footer ========================================================================== */ .footer{padding:var(--space-10) 0 var(--space-6);background:var(--color-surface);border-top:1px solid var(--color-border)}.footer-grid{display:grid;gap:var(--space-8)}.footer-brand p{margin:var(--space-4) 0 0;color:var(--color-text-muted);font-size:var(--font-size-sm)}.footer-nav h3,.footer-social h3{margin:0 0 var(--space-4);font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted)}.footer-nav ul{margin:0;padding:0;list-style:none}.footer-nav li{margin-bottom:var(--space-2)}.footer-nav a{color:var(--color-text);font-size:var(--font-size-sm)}.footer-nav a:hover{color:var(--color-primary)}.social-links{display:flex;gap:var(--space-3)}.social-links a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--color-surface-elevated);border-radius:var(--radius-md);color:var(--color-text);transition:background var(--transition-fast),color var(--transition-fast)}.social-links a:hover{background:var(--color-primary);color:var(--color-text)}.footer-bottom{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-border);text-align:center}.footer-bottom p{margin:0;color:var(--color-text-muted);font-size:var(--font-size-sm)}/* ========================================================================== Tablet Breakpoint (min-width:640px) ========================================================================== */ @media (min-width:640px){.broadcast-title{font-size:var(--font-size-3xl)}.broadcast-subtitle{font-size:var(--font-size-base)}.broadcast-meta{flex-direction:row;gap:var(--space-6)}.info-cards{grid-template-columns:repeat(2,1fr)}.speakers-grid{grid-template-columns:repeat(2,1fr)}.broadcast-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.thumbnail-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.urls-grid{grid-template-columns:repeat(2,1fr)}.subscribe-form{flex-direction:row}.subscribe-form input{flex:1}.subscribe-form button{width:auto;padding:var(--space-4) var(--space-6)}.footer-grid{grid-template-columns:repeat(2,1fr)}.chat-time{width:auto}}/* ========================================================================== Desktop Breakpoint (min-width:768px) ========================================================================== */ @media (min-width:768px){.menu-toggle{display:none}.nav-links{position:static;display:flex;flex-direction:row;padding:0;background:transparent}.nav-links li{border:none}.nav-links a{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.broadcast-hero{padding:var(--space-10) 0}.broadcast-title{font-size:var(--font-size-4xl)}.tab{padding:var(--space-3) var(--space-6)}.schedule-item{padding:var(--space-5)}.schedule-item time{min-width:90px;font-size:var(--font-size-base)}.schedule-content h3{font-size:var(--font-size-lg)}.speakers-grid{grid-template-columns:repeat(3,1fr)}.broadcast-grid{grid-template-columns:repeat(3,1fr)}.thumbnail-grid{grid-template-columns:repeat(3,1fr)}.urls-grid{grid-template-columns:repeat(2,1fr)}.cta-section h2{font-size:var(--font-size-3xl)}.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}/* ========================================================================== Large Desktop Breakpoint (min-width:1024px) ========================================================================== */ @media (min-width:1024px){.container{padding:0 var(--space-8)}.video-wrapper{border-radius:var(--radius-xl)}.tab-panels{margin-top:var(--space-8)}.chat-container{height:500px}.broadcast-grid{grid-template-columns:repeat(5,1fr)}.thumbnail-grid{grid-template-columns:repeat(5,1fr)}.urls-grid{grid-template-columns:repeat(3,1fr)}}/* ========================================================================== Accessibility:Reduced Motion ========================================================================== */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}html{scroll-behavior:auto}}/* ========================================================================== Dark Mode (already default,but explicit support) ========================================================================== */ @media (prefers-color-scheme:light){/* Template is designed for dark mode,keeping consistent */}/* ========================================================================== Print Styles ========================================================================== */ @media print{.header,.video-section,.chat-container,.cta-section,.footer{display:none}body{background:white;color:black}.broadcast-hero{background:white}.broadcast-title,.tab-panel h2{color:black}.broadcast-subtitle,.tab-panel p,.info-card{color:#333}}/* ========================================================================== Focus Visible for Keyboard Navigation ========================================================================== */:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}/* ========================================================================== Touch Device Optimizations ========================================================================== */ @media (hover:none) and (pointer:coarse){.control-btn,.tab,.social-links a{min-height:44px;min-width:44px}.nav-links a{min-height:48px;display:flex;align-items:center}}/* ========================================================================== High Contrast Mode Support ========================================================================== */ @media (prefers-contrast:high){:root{--color-border:rgba(255,255,255,0.3)}.tab.active{border:2px solid var(--color-text)}.schedule-item{border-left-width:5px}}/* ========================================================================== Authentication Pages ========================================================================== */ .auth-page{min-height:100vh;display:flex;flex-direction:column}.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-6) var(--space-4)}.auth-container{width:100%;max-width:420px}.auth-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-6);border:1px solid var(--color-border)}.auth-header{text-align:center;margin-bottom:var(--space-6)}.auth-header h1{margin:0 0 var(--space-2);font-size:var(--font-size-2xl);font-weight:700}.auth-header p{margin:0;color:var(--color-text-muted)}/* Auth toggle */ .auth-toggle{display:flex;gap:var(--space-2);margin-bottom:var(--space-5)}.auth-toggle .btn{flex:1}.auth-panel{display:none}.auth-panel.active{display:block}.auth-cta{margin-bottom:var(--space-5);padding:var(--space-4);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(233,69,96,0.12),rgba(255,214,102,0.12));border:1px solid rgba(255,214,102,0.35);box-shadow:0 12px 30px rgba(0,0,0,0.25);text-align:center}.auth-cta__text{margin:0 0 var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-sm)}.auth-cta .btn{position:relative;overflow:hidden;background:linear-gradient(135deg,#f9d976 0%,#c49b3b 50%,#f9d976 100%);color:#1a1a2e;border:1px solid rgba(255,214,102,0.9);box-shadow:0 10px 20px rgba(196,155,59,0.35),0 0 0 1px rgba(255,214,102,0.4) inset;transition:transform var(--transition-fast),box-shadow var(--transition-fast),filter var(--transition-fast);animation:luxuryPulse 3.2s ease-in-out infinite}.auth-cta .btn::after{content:'';position:absolute;top:-120%;left:-60%;width:60%;height:300%;background:linear-gradient(120deg,rgba(255,255,255,0),rgba(255,255,255,0.55),rgba(255,255,255,0));transform:translateX(-120%);animation:luxuryShine 2.8s ease-in-out infinite}.auth-cta .btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 14px 30px rgba(196,155,59,0.45),0 0 0 1px rgba(255,214,102,0.6) inset;filter:saturate(1.05)}.auth-cta .btn:active{transform:translateY(0) scale(0.995)}@keyframes luxuryPulse{0%{box-shadow:0 10px 20px rgba(196,155,59,0.35),0 0 0 1px rgba(255,214,102,0.4) inset}50%{box-shadow:0 14px 28px rgba(196,155,59,0.5),0 0 0 1px rgba(255,214,102,0.65) inset}100%{box-shadow:0 10px 20px rgba(196,155,59,0.35),0 0 0 1px rgba(255,214,102,0.4) inset}}@keyframes luxuryShine{0%{transform:translateX(-140%)}50%{transform:translateX(140%)}100%{transform:translateX(140%)}}.form-success{background:rgba(52,168,83,0.1);border:1px solid #34a853;color:#34a853;padding:12px 16px;border-radius:8px;margin-bottom:16px;display:flex;align-items:center;gap:8px}/* Auth Form */ .auth-form{display:flex;flex-direction:column;gap:var(--space-4)}.form-row{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width:480px){.form-row{grid-template-columns:1fr 1fr}}.form-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-group label{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text)}.dummy-captcha{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md)}.dummy-captcha__box{position:relative;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;background:rgba(255,255,255,0.08);border:1px solid var(--color-border);flex-shrink:0}.dummy-captcha__box input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.dummy-captcha__check{width:12px;height:12px;border-radius:2px;background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,0.35);transition:background var(--transition-fast),box-shadow var(--transition-fast)}.dummy-captcha__box input:checked + .dummy-captcha__check{background:linear-gradient(135deg,#f9d976 0%,#c49b3b 100%);box-shadow:inset 0 0 0 2px rgba(26,26,46,0.4)}.dummy-captcha__text span{display:block;font-size:var(--font-size-sm);font-weight:600}.dummy-captcha__text small{display:block;color:var(--color-text-muted);font-size:var(--font-size-xs)}.auth-form input:not([type="checkbox"]){width:100%;padding:var(--space-3);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-size-base);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.auth-form input:not([type="checkbox"]):focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(233,69,96,0.2)}.auth-form input:not([type="checkbox"])::placeholder{color:var(--color-text-muted)}.auth-form input.input--error:not([type="checkbox"]){border-color:var(--color-error)}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:var(--space-3);color:var(--color-text-muted);pointer-events:none}.input-wrapper input{width:100%;padding:var(--space-3) var(--space-3) var(--space-3) var(--space-10);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-size-base);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input-wrapper input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(233,69,96,0.2)}.input-wrapper input::placeholder{color:var(--color-text-muted)}.input-wrapper input.input--error{border-color:var(--color-error)}.toggle-password{position:absolute;right:var(--space-3);padding:var(--space-1);background:none;border:none;color:var(--color-text-muted);cursor:pointer;transition:color var(--transition-fast)}.toggle-password:hover{color:var(--color-text)}.error-message{display:none;font-size:var(--font-size-xs);color:var(--color-error)}/* Password Strength */ .password-strength{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-1)}.strength-bar{flex:1;height:4px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden}.strength-fill{height:100%;width:0;transition:width var(--transition-base),background-color var(--transition-base)}.strength-text{font-size:var(--font-size-xs);font-weight:500}/* Form Options */ .form-options{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2)}.checkbox-wrapper{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--font-size-sm);cursor:pointer}.checkbox-wrapper input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--color-primary);cursor:pointer;flex-shrink:0}.checkbox-wrapper a{color:var(--color-primary)}.forgot-link{font-size:var(--font-size-sm);color:var(--color-primary)}/* Form Error */ .form-error{display:none;align-items:center;gap:var(--space-2);padding:var(--space-3);background:rgba(255,68,68,0.1);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);font-size:var(--font-size-sm)}.form-error.is-visible{display:flex}/* Auth Divider */ .auth-divider{display:flex;align-items:center;gap:var(--space-4);margin:var(--space-6) 0}.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--color-border)}.auth-divider span{color:var(--color-text-muted);font-size:var(--font-size-sm);white-space:nowrap}/* Social Login */ .social-login{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}/* Auth Footer */ .auth-footer{text-align:center;margin-top:var(--space-6);font-size:var(--font-size-sm);color:var(--color-text-muted)}.auth-footer a{color:var(--color-primary);font-weight:500}/* Back Link */ .back-link{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-6);color:var(--color-text-muted);font-size:var(--font-size-sm);transition:color var(--transition-fast)}.back-link:hover{color:var(--color-text)}/* Minimal Header/Footer for Auth Pages */ .header--minimal{background:transparent;border-bottom:none}.footer--minimal{padding:var(--space-6) 0;background:transparent;border-top:none}.footer--minimal .container{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}.footer--minimal p{margin:0;color:var(--color-text-muted);font-size:var(--font-size-sm)}.footer-links-inline{display:flex;gap:var(--space-4)}.footer-links-inline a{color:var(--color-text-muted);font-size:var(--font-size-sm)}.footer-links-inline a:hover{color:var(--color-text)}@media (min-width:640px){.auth-card{padding:var(--space-8)}.footer--minimal .container{flex-direction:row;justify-content:space-between}}/* ========================================================================== Button Styles ========================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:var(--font-size-sm);font-weight:600;border-radius:var(--radius-md);border:none;cursor:pointer;text-decoration:none;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.btn:disabled{opacity:0.6;cursor:not-allowed}.btn--primary{background:var(--color-primary);color:var(--color-text)}.btn--primary:hover:not(:disabled){background:var(--color-primary-dark)}.btn--outline{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}.btn--outline:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.btn--ghost{background:transparent;color:var(--color-text)}.btn--ghost:hover:not(:disabled){background:var(--color-surface-elevated)}.btn--social{background:var(--color-surface-elevated);color:var(--color-text);border:1px solid var(--color-border)}.btn--social:hover:not(:disabled){background:var(--color-background);border-color:var(--color-text-muted)}.btn--full{width:100%}.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.btn-loader{display:flex;align-items:center;justify-content:center}/* ========================================================================== User Menu (Header) ========================================================================== */ .auth-buttons{display:flex;align-items:center;gap:var(--space-2)}.user-menu{position:relative}.user-menu-toggle{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1);background:none;border:none;cursor:pointer;color:var(--color-text)}.user-avatar{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);border-radius:50%;font-size:var(--font-size-sm);font-weight:600}.user-dropdown{position:absolute;top:calc(100% + var(--space-2));right:0;min-width:220px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast);z-index:var(--z-dropdown)}.user-dropdown.active{opacity:1;visibility:visible;transform:translateY(0)}.user-info{padding:var(--space-4)}.user-name{display:block;font-weight:600;font-size:var(--font-size-sm)}.user-email{display:block;color:var(--color-text-muted);font-size:var(--font-size-xs);margin-top:var(--space-1)}.user-dropdown hr{margin:0;border:none;border-top:1px solid var(--color-border)}.dropdown-item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);background:none;border:none;color:var(--color-text);font-size:var(--font-size-sm);text-decoration:none;cursor:pointer;transition:background var(--transition-fast)}.dropdown-item:hover{background:var(--color-surface-elevated)}.dropdown-item--danger{color:var(--color-error)}.dropdown-item--danger:hover{background:rgba(255,68,68,0.1)}/* ========================================================================== Login Overlay (Video Player) ========================================================================== */ .login-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);z-index:10;padding:var(--space-3);padding-bottom:calc(var(--space-3) + 56px)}.login-overlay-content{text-align:center;padding:var(--space-6);max-width:360px;width:100%}.login-overlay-icon{display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin:0 auto var(--space-4);background:var(--color-surface);border-radius:50%;color:var(--color-primary)}.login-overlay-content h3{margin:0 0 var(--space-2);font-size:var(--font-size-xl);font-weight:700}.login-overlay-content p{margin:0 0 var(--space-5);color:var(--color-text-muted);font-size:var(--font-size-sm)}.login-overlay-buttons{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);width:100%}.login-overlay-buttons .btn{width:100%;white-space:nowrap}.login-overlay-note{margin-top:var(--space-4) !important;font-size:var(--font-size-xs) !important;color:var(--color-text-muted) !important}@media (max-width:420px){.login-overlay-buttons{gap:var(--space-2)}.login-overlay-buttons .btn{font-size:var(--font-size-xs);padding:var(--space-2) var(--space-3)}}@media (max-width:360px){.login-overlay-buttons{grid-template-columns:1fr}.login-overlay-content h2{font-size:var(--font-size-lg)}.login-overlay-content p,.login-overlay-note{font-size:var(--font-size-xs)}.login-overlay-buttons .btn{font-size:var(--font-size-xs);padding:var(--space-2) var(--space-3)}}/* ========================================================================== Toast Notifications ========================================================================== */ .toast{position:fixed;bottom:var(--space-5);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);font-size:var(--font-size-sm);z-index:var(--z-tooltip);opacity:0;transition:opacity var(--transition-base),transform var(--transition-base)}.toast--visible{opacity:1}.toast--success{border-color:var(--color-success)}.toast--success svg{color:var(--color-success)}.toast--error{border-color:var(--color-error)}.toast--error svg{color:var(--color-error)}