*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#333;background-color:#f8f9fa}#app{min-height:100vh;display:flex;flex-direction:column}.navbar{background:#fff;border-bottom:1px solid #e1e5e9;box-shadow:0 2px 4px #0000000d;position:sticky;top:0;z-index:100}.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;height:70px;padding:0 20px}.nav-brand{display:flex;align-items:center;text-decoration:none;color:#333;font-weight:600}.logo-img{width:40px;height:40px;margin-right:10px;border-radius:8px}.logo-text{font-size:20px;font-weight:700;color:#007bff}.nav-menu{display:flex;align-items:center;gap:30px}.nav-item{text-decoration:none;color:#333;font-weight:500;padding:8px 16px;border-radius:6px;transition:all .2s;position:relative}.nav-item:hover,.nav-item.router-link-active{color:#007bff;background-color:#f0f8ff}.nav-item.router-link-active:after{content:"";position:absolute;bottom:-20px;left:50%;transform:translate(-50%);width:20px;height:3px;background:#007bff;border-radius:2px}.nav-right{display:flex;align-items:center;gap:15px}.nav-auth{display:flex;align-items:center}.auth-links{display:flex;gap:12px}.auth-btn{text-decoration:none;padding:8px 20px;border-radius:6px;font-weight:500;transition:all .2s;border:1px solid transparent}.login-btn{color:#007bff;border-color:#007bff}.login-btn:hover,.register-btn{background-color:#007bff;color:#fff}.register-btn:hover{background-color:#0056b3}.user-menu,.dropdown{position:relative}.dropdown-btn{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#f8f9fa;border:1px solid #e1e5e9;border-radius:20px;cursor:pointer;transition:all .2s;font-size:14px}.dropdown-btn:hover{background:#e9ecef;border-color:#d1d5d9}.user-avatar-img{width:28px;height:28px;border-radius:50%;object-fit:cover}.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}.user-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;font-weight:500}.dropdown-arrow{color:#666;font-size:10px;transition:transform .2s}.dropdown:hover .dropdown-arrow{transform:rotate(180deg)}.dropdown-content{visibility:hidden;opacity:0;position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #e1e5e9;border-radius:8px;box-shadow:0 4px 12px #0000001a;min-width:180px;z-index:1000;overflow:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none}.dropdown-content:before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px;background:transparent}.dropdown-content.dropdown-visible{visibility:visible;opacity:1;pointer-events:auto}.dropdown-item{display:block;width:100%;padding:12px 16px;text-align:left;text-decoration:none;color:#333;background:none;border:none;cursor:pointer;transition:background-color .2s;font-size:14px}.dropdown-item:hover{background-color:#f8f9fa}.dropdown-divider{height:1px;background-color:#e1e5e9;margin:4px 0}.logout-btn{color:#dc3545}.logout-btn:hover{background-color:#fff5f5}.hamburger-btn{display:none;flex-direction:column;justify-content:space-around;width:30px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;z-index:101}.hamburger-btn span{width:100%;height:3px;background-color:#333;border-radius:3px;transition:all .3s}.hamburger-btn.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}.hamburger-btn.active span:nth-child(2){opacity:0}.hamburger-btn.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}.mobile-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:99;display:none}.mobile-menu{position:fixed;top:0;right:0;width:80%;max-width:300px;height:100vh;background:#fff;box-shadow:-2px 0 8px #0000001a;overflow-y:auto}.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e1e5e9}.mobile-menu-title{font-size:20px;font-weight:600;color:#333}.close-btn{background:none;border:none;font-size:24px;color:#666;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.mobile-menu-content{padding:10px}.mobile-menu-item{display:block;padding:15px 20px;text-decoration:none;color:#333;font-weight:500;border-radius:8px;margin-bottom:5px;transition:all .2s}.mobile-menu-item:hover,.mobile-menu-item.router-link-active{background-color:#f0f8ff;color:#007bff}.mobile-menu-enter-active,.mobile-menu-leave-active{transition:opacity .3s}.mobile-menu-enter-from,.mobile-menu-leave-to{opacity:0}.main-content{flex:1;padding:40px 20px;max-width:1200px;margin:0 auto;width:100%}.footer{background:#2c3e50;color:#fff;padding:40px 20px 20px;margin-top:auto}.footer-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}.footer-section h4{font-size:18px;margin-bottom:15px;color:#ecf0f1}.footer-logo{width:60px;height:60px;border-radius:10px;margin-bottom:15px}.site-info{display:flex;flex-direction:column}.site-description h3{font-size:20px;margin-bottom:10px;color:#ecf0f1}.site-description p{color:#bdc3c7;line-height:1.6;margin-bottom:15px}.social-links{display:flex;gap:15px;margin-top:10px}.social-link{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border-radius:50%;transition:all .3s}.social-link:hover{background:#fff3;transform:translateY(-2px)}.social-link svg{width:18px;height:18px;fill:#fff}.footer-links{display:flex;flex-direction:column;gap:10px}.footer-links a{color:#bdc3c7;text-decoration:none;transition:color .2s}.footer-links a:hover{color:#ecf0f1}.footer-bottom{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:#bdc3c7;font-size:14px}@media (max-width: 768px){.nav-menu,.nav-auth .auth-links,.nav-auth .user-menu{display:none}.hamburger-btn{display:flex}.mobile-menu-overlay{display:block}.main-content{padding:20px 15px}.footer-container{grid-template-columns:1fr;gap:30px}}@media (max-width: 480px){.logo-text{display:none}.nav-container{padding:0 15px}}:root{--primary-blue: #007bff;--primary-blue-hover: #0056b3;--primary-blue-light: #e3f2fd;--primary-blue-dark: #004494;--gradient-primary: linear-gradient(135deg, #007bff 0%, #6610f2 100%);--gradient-secondary: linear-gradient(135deg, #17a2b8 0%, #007bff 100%);--gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-section: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);--success-green: #28a745;--success-light: #d4edda;--warning-orange: #ff9800;--warning-light: #fff3cd;--danger-red: #dc3545;--danger-light: #f8d7da;--info-cyan: #17a2b8;--info-light: #d1ecf1;--text-primary: #212529;--text-secondary: #6c757d;--text-muted: #868e96;--text-light: #adb5bd;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--bg-dark: #2c3e50;--border-light: #dee2e6;--border-medium: #ced4da;--border-dark: #6c757d;--rank-bronze: #cd7f32;--rank-silver: #c0c0c0;--rank-gold: #ffd700;--rank-diamond: #b9f2ff;--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Microsoft YaHei", sans-serif;--font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--font-family-numeric: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;--font-size-h1: 2.5rem;--font-size-h2: 2rem;--font-size-h3: 1.5rem;--font-size-h4: 1.25rem;--font-size-h5: 1.125rem;--font-size-h6: 1rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-sm: .875rem;--font-size-xs: .75rem;--font-size-display: 3rem;--font-size-caption: .6875rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--line-height-tight: 1.25;--line-height-base: 1.5;--line-height-relaxed: 1.625;--line-height-loose: 2;--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;--container-padding: 1.25rem;--container-margin: 2rem;--section-spacing: 2rem;--section-spacing-compact: 1.5rem;--card-padding-sm: 1rem;--card-padding-md: 1.25rem;--card-padding-lg: 1.5rem;--btn-padding-y-sm: .375rem;--btn-padding-x-sm: .75rem;--btn-padding-y: .5rem;--btn-padding-x: 1rem;--btn-padding-y-lg: .75rem;--btn-padding-x-lg: 1.5rem;--border-radius-sm: .25rem;--border-radius: .375rem;--border-radius-md: .5rem;--border-radius-lg: .75rem;--border-radius-xl: 1rem;--border-radius-pill: 50rem;--border-radius-circle: 50%;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 15px rgba(0, 0, 0, .15);--shadow-xl: 0 16px 32px rgba(0, 0, 0, .2);--shadow-hover: 0 4px 16px rgba(0, 123, 255, .3);--shadow-inset: inset 0 2px 4px rgba(0, 0, 0, .06);--glow-primary: 0 0 20px rgba(0, 123, 255, .5);--glow-success: 0 0 20px rgba(40, 167, 69, .5);--glow-warning: 0 0 20px rgba(255, 152, 0, .5);--ease-out-quad: cubic-bezier(.25, .46, .45, .94);--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--duration-fast: .15s;--duration-base: .25s;--duration-slow: .35s;--duration-slower: .5s;--breakpoint-xs: 0;--breakpoint-sm: 576px;--breakpoint-md: 768px;--breakpoint-lg: 992px;--breakpoint-xl: 1200px;--breakpoint-xxl: 1400px}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #404040;--text-primary: #ffffff;--text-secondary: #b3b3b3;--text-muted: #808080;--border-light: #404040;--border-medium: #565656;--border-dark: #808080}.hover-lift{transition:transform var(--duration-base) var(--ease-out-cubic)}.hover-lift:hover{transform:translateY(-2px)}.hover-scale{transition:transform var(--duration-base) var(--ease-out-cubic)}.hover-scale:hover{transform:scale(1.02)}.hover-glow{transition:box-shadow var(--duration-base) var(--ease-out-cubic)}.hover-glow:hover{box-shadow:var(--glow-primary)}.container{max-width:1200px;margin:0 auto;padding:0 var(--container-padding)}.container-fluid{width:100%;padding:0 var(--container-padding)}.section{padding:var(--section-spacing) 0}.section-compact{padding:var(--section-spacing-compact) 0}.row{display:flex;flex-wrap:wrap;margin:0 -var(--spacing-sm)}.col{flex:1;padding:0 var(--spacing-sm)}.grid{display:grid;gap:var(--spacing-md)}.grid-auto{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}@media (max-width: 768px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 576px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.container{padding:0 var(--spacing-md)}}:focus-visible{outline:2px solid var(--primary-blue);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}