:root{--color-primary: #7c3aed;--color-primary-light: #a78bfa;--color-primary-dark: #5b21b6;--color-secondary: #10b981;--color-secondary-light: #34d399;--color-secondary-dark: #059669;--color-accent: #3b82f6;--color-accent-light: #60a5fa;--color-accent-dark: #1d4ed8;--color-background: #0f0f23;--color-surface: #1a1b3a;--color-surface-light: #262847;--color-border: rgba(139, 92, 246, .2);--color-text-primary: #f1f5f9;--color-text-secondary: #94a3b8;--color-text-muted: #64748b;--color-success: #22c55e;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #06b6d4;--color-overlay-dark: rgba(0, 0, 0, .6);--color-overlay-menu: rgba(26, 27, 58, .95);--color-white: #ffffff;--color-primary-hover-bg: rgba(124, 58, 237, .15);--color-primary-hover-border: rgba(124, 58, 237, .3);--color-primary-focus-shadow: rgba(124, 58, 237, .4);--color-error-hover-bg: rgba(239, 68, 68, .2);--color-error-hover-border: rgba(239, 68, 68, .5);--color-error-bg: rgba(239, 68, 68, .1);--color-error-border: rgba(239, 68, 68, .3);--color-menu-text: #f1f5f9;--color-menu-text-hover: #ffffff;--font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-family-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--spacing-4xl: 6rem;--spacing-menu-gap: .75rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--shadow-glow: 0 0 20px rgba(139, 92, 246, .4);--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out;--z-index-dropdown: 1000;--z-index-sticky: 1020;--z-index-fixed: 1030;--z-index-modal-backdrop: 1040;--z-index-modal: 1050;--z-index-popover: 1060;--z-index-tooltip: 1070;--safe-area-inset-top: 0px;--safe-area-inset-bottom: 0px;--safe-area-inset-left: 0px;--safe-area-inset-right: 0px;--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);--gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);--gradient-dark: linear-gradient(180deg, var(--color-background) 0%, var(--color-surface) 100%);--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .05) 100%);--pattern-dots: radial-gradient(circle, rgba(139, 92, 246, .1) 1px, transparent 1px);--pattern-grid: linear-gradient(rgba(139, 92, 246, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, .03) 1px, transparent 1px);--pattern-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E")}@media (prefers-color-scheme: light){:root{--color-background: #f8fafc;--color-surface: #ffffff;--color-surface-light: #f1f5f9;--color-border: rgba(139, 92, 246, .1);--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-text-muted: #94a3b8;--shadow-glow: 0 0 20px rgba(139, 92, 246, .2)}}.page-content-centered{padding:var(--spacing-xl);text-align:center}.page-content-simple{padding:var(--spacing-xl)}.page-welcome-text{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-top:var(--spacing-lg);line-height:var(--line-height-relaxed)}.page-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--spacing-lg)}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{height:100%}body{height:100%;font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{height:100%;width:100%}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-text-primary)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}p{color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-light)}a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ul,ol{padding-left:var(--spacing-lg)}li{margin:var(--spacing-xs) 0}input,textarea,select{font-family:inherit;font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #7c3aed1a}code{font-family:var(--font-family-mono);font-size:var(--font-size-sm);background:#ffffff1a;padding:.2em .4em;border-radius:var(--radius-sm)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);border-radius:var(--radius-lg);border:none;cursor:pointer;transition:all var(--transition-base);text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none}.btn--small{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm);min-height:32px}.btn--medium{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base);min-height:40px}.btn--large{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-lg);min-height:48px}.btn--primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 14px #7c3aed4d}.btn--primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #7c3aed66}.btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 10px #7c3aed4d}.btn--secondary{background:var(--gradient-secondary);color:#fff;box-shadow:0 4px 14px #10b9814d}.btn--secondary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.btn--secondary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 10px #10b9814d}.btn--ghost{background:transparent;color:var(--color-primary);border:1px solid var(--color-primary);box-shadow:none}.btn--ghost:hover:not(:disabled){background:#7c3aed1a;border-color:var(--color-primary-light);color:var(--color-primary-light)}.btn--ghost:active:not(:disabled){background:#7c3aed33}.btn--full-width{width:100%}.btn--disabled,.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn--loading{color:transparent;pointer-events:none}.btn__spinner{position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:btn-spin .6s linear infinite}.btn__text{visibility:hidden}@keyframes btn-spin{to{transform:rotate(360deg)}}.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.btn:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff80;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:after{width:300px;height:300px;opacity:0}.card{background:var(--color-surface);border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:var(--shadow-lg);overflow:hidden;transition:all var(--transition-base);position:relative}.card:not(.card--no-padding){padding:var(--spacing-lg)}.card--glass{background:var(--gradient-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #1f26875e,inset 0 0 0 1px #ffffff1a}.card--hoverable{cursor:pointer}.card--hoverable:hover{transform:translateY(-4px);box-shadow:var(--shadow-2xl),0 0 30px #7c3aed33;border-color:var(--color-primary)}.card--hoverable:active{transform:translateY(-2px)}.card__header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);background:#ffffff05}.card--no-padding .card__header{padding:var(--spacing-lg)}.card__header h1,.card__header h2,.card__header h3{margin:0;color:var(--color-text-primary)}.card__body,.card--no-padding .card__body{padding:var(--spacing-lg)}.card__footer{padding:var(--spacing-lg);border-top:1px solid var(--color-border);background:#ffffff05}.card--no-padding .card__footer{padding:var(--spacing-lg)}@keyframes card-glow{0%,to{box-shadow:var(--shadow-lg),0 0 20px #7c3aed4d}50%{box-shadow:var(--shadow-xl),0 0 30px #7c3aed66}}.card--glass:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%,rgba(255,255,255,.05) 100%);pointer-events:none}.mobile-menu-overlay{position:fixed;inset:0;background-color:var(--color-overlay-dark);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;animation:fadeIn var(--transition-fast) ease-out}.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:85vw;background-color:var(--color-overlay-menu);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:1001;transform:translate(0);animation:slideInFromRight var(--transition-normal) ease-out}.mobile-menu-content{height:100%;padding-top:var(--spacing-4xl);padding-bottom:var(--spacing-2xl);padding-left:var(--spacing-lg);padding-right:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-menu-gap);overflow-y:auto}.mobile-menu-link{display:block;color:var(--color-menu-text);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);text-decoration:none;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-lg);border:2px solid transparent;text-align:center;transition:all var(--transition-fast);min-height:48px;display:flex;align-items:center;justify-content:center}.mobile-menu-link:hover,.mobile-menu-link:focus{color:var(--color-menu-text-hover);background-color:var(--color-primary-hover-bg);border-color:var(--color-primary-hover-border);transform:scale(1.02)}.mobile-menu-link:active{transform:scale(.98)}.mobile-menu-link:focus{outline:none;box-shadow:0 0 0 3px var(--color-primary-focus-shadow)}.mobile-menu-divider{height:1px;background-color:var(--color-border);margin:var(--spacing-md) 0;opacity:.6}.mobile-menu-button{margin-top:auto;color:var(--color-menu-text)!important;border:2px solid var(--color-error-border)!important;background-color:var(--color-error-bg)!important;min-height:48px}.mobile-menu-button:hover{background-color:var(--color-error-hover-bg)!important;border-color:var(--color-error-hover-border)!important;transform:scale(1.02)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInFromRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media (max-width: 480px){.mobile-menu{width:100vw;max-width:none;border-left:none}}@media (min-width: 769px){.mobile-menu-overlay,.mobile-menu{display:none!important}}.desktop-menu{display:flex;align-items:center;gap:var(--spacing-lg)}.desktop-menu-link{color:var(--color-text-primary);text-decoration:none;font-weight:var(--font-weight-medium);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-fast);position:relative}.desktop-menu-link:hover{color:var(--color-primary);background:#7c3aed1a}.desktop-menu-link:focus{outline:2px solid var(--color-primary);outline-offset:2px}.desktop-menu-link:after{content:"";position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:var(--gradient-primary);border-radius:1px;transition:all var(--transition-fast);transform:translate(-50%)}.desktop-menu-link:hover:after{width:80%}@media (max-width: 768px){.desktop-menu{display:none}}.navbar{position:sticky;top:0;z-index:var(--z-index-sticky);background:var(--color-surface);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border);padding-top:env(safe-area-inset-top,0);padding-top:constant(safe-area-inset-top,0)}.navbar-container{max-width:1200px;margin:0 auto;padding:var(--spacing-md) var(--spacing-xl);display:flex;align-items:center;justify-content:space-between}.navbar-brand{text-decoration:none;color:inherit;transition:opacity var(--transition-fast)}.navbar-brand:hover{opacity:.8}.navbar-brand .brand-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.mobile-menu-toggle{display:none;background:none;border:none;padding:var(--spacing-sm);cursor:pointer;border-radius:var(--radius-md);transition:background-color var(--transition-fast)}.mobile-menu-toggle:hover{background:#7c3aed1a}.mobile-menu-toggle:focus{outline:2px solid var(--color-primary);outline-offset:2px}.hamburger{display:flex;flex-direction:column;width:24px;height:18px;position:relative}.hamburger span{display:block;height:2px;width:100%;background:var(--color-text-primary);border-radius:1px;transition:all var(--transition-normal);transform-origin:center}.hamburger span:nth-child(1){transform:translateY(0)}.hamburger span:nth-child(2){transform:translateY(6px)}.hamburger span:nth-child(3){transform:translateY(12px)}.hamburger--open span:nth-child(1){transform:translateY(8px) rotate(45deg)}.hamburger--open span:nth-child(2){opacity:0;transform:translateY(6px) scale(0)}.hamburger--open span:nth-child(3){transform:translateY(4px) rotate(-45deg)}@media (max-width: 768px){.mobile-menu-toggle{display:block}.navbar-container{padding:var(--spacing-md) var(--spacing-lg)}}@media (max-width: 480px){.navbar-container{padding:var(--spacing-md) var(--spacing-md)}.navbar-brand .brand-title{font-size:var(--font-size-lg)}}.page-container{padding:var(--spacing-2xl);max-width:800px;margin:0 auto}@media (max-width: 768px){.page-container{padding:var(--spacing-md)}}@media (max-width: 480px){.page-container{padding:var(--spacing-sm)}}.user-profile{max-width:800px;margin:0 auto;padding:var(--spacing-xl)}.user-profile-card{animation:fadeInUp .5s ease-out}.user-profile-empty{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary)}.profile-header{display:flex;align-items:center;gap:var(--spacing-lg)}.profile-avatar{width:80px;height:80px;border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:#fff;box-shadow:var(--shadow-glow);flex-shrink:0}.profile-header-info{flex:1}.profile-name{margin:0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.profile-email{margin:var(--spacing-xs) 0 0 0;font-size:var(--font-size-base);color:var(--color-text-secondary)}.profile-details{display:grid;gap:var(--spacing-xl)}.profile-detail-group{padding:var(--spacing-lg);background:#ffffff05;border-radius:var(--radius-lg);border:1px solid var(--color-border)}.profile-detail-group h3{margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-primary-light)}.profile-field{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 0;border-bottom:1px solid rgba(255,255,255,.05)}.profile-field:last-child{border-bottom:none}.profile-field label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.profile-field span{font-size:var(--font-size-base);color:var(--color-text-primary);text-align:right}.profile-badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);background:var(--gradient-primary);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:#fff}.profile-mono{font-family:var(--font-family-mono);font-size:var(--font-size-sm);color:var(--color-accent-light)}.profile-status{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.profile-status--active{background:#22c55e1a;color:var(--color-success);border:1px solid rgba(34,197,94,.3)}.profile-status--blocked{background:#ef44441a;color:var(--color-error);border:1px solid rgba(239,68,68,.3)}.profile-actions{display:flex;justify-content:center;gap:var(--spacing-md)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.user-profile{padding:var(--spacing-md)}.profile-header{flex-direction:column;text-align:center}.profile-field{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}.profile-field span{text-align:left}}.app{min-height:100vh;width:100%;position:relative}.hero-section{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:var(--spacing-xl);overflow:hidden}.hero-background{position:absolute;inset:0;background:var(--pattern-dots),var(--gradient-dark);background-size:20px 20px,100% 100%;opacity:.8;z-index:-1}.hero-background:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(124,58,237,.1) 0%,transparent 70%)}.hero-content{width:100%;max-width:500px;z-index:1}.auth-card{animation:slideInUp .6s ease-out;text-align:center}.loading-card{text-align:center;min-width:300px;animation:pulse 2s infinite}.brand{margin-bottom:var(--spacing-xl)}.brand-title{font-size:var(--font-size-5xl);font-weight:var(--font-weight-bold);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;line-height:1}.brand-tagline{font-size:var(--font-size-xl);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);margin-top:var(--spacing-md);line-height:var(--line-height-normal)}.hero-description{margin:var(--spacing-2xl) 0;padding:0 var(--spacing-md)}.hero-description p{font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);color:var(--color-text-secondary);max-width:600px;margin:0 auto}.error-banner{margin:var(--spacing-lg) 0;padding:var(--spacing-md);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-lg);color:var(--color-error)}.auth-actions{margin-top:var(--spacing-2xl)}.app--authenticated{background:var(--color-background)}.app-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:var(--z-index-sticky);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.header-content{max-width:1200px;margin:0 auto;padding:var(--spacing-lg) var(--spacing-xl);display:flex;align-items:center;justify-content:space-between}.header-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.header-tagline{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-left:var(--spacing-md)}.app-main{flex:1;padding:var(--spacing-2xl) 0;background:var(--color-background)}.loading-spinner{width:40px;height:40px;border:4px solid rgba(124,58,237,.2);border-top-color:var(--color-primary);border-radius:50%;margin:0 auto var(--spacing-lg);animation:spin 1s linear infinite}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.hero-section{padding:var(--spacing-lg)}.brand-title{font-size:var(--font-size-4xl)}.brand-tagline{font-size:var(--font-size-lg)}.hero-description p{font-size:var(--font-size-base)}.header-content{flex-direction:column;gap:var(--spacing-sm);text-align:center}.header-tagline{margin-left:0;margin-top:var(--spacing-xs)}}@media (max-width: 480px){.hero-content{max-width:none}.auth-card{margin:0 var(--spacing-sm)}.brand-title{font-size:var(--font-size-3xl)}.hero-description{padding:0}}