.app{background:var(--bg-primary);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;min-height:calc(100vh - 40px);transition:background-color .3s ease}.app-header{background:var(--header-gradient);color:#fff;padding:40px;text-align:center;position:relative}.app-header.tv-header{background:var(--header-gradient-tv)}.header-top{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center}.nav-buttons{display:flex;gap:10px;flex-direction:column;align-items:flex-end}.home-button,.switch-button{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3);padding:8px 16px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.home-button:hover,.switch-button:hover{background:#ffffff4d;border-color:#ffffff80;transform:translateY(-2px)}.app-header h1{font-size:3rem;margin-bottom:10px;font-weight:700}.subtitle{font-size:1.2rem;opacity:.9}.tabs{display:flex;justify-content:center;background:var(--bg-secondary);border-bottom:2px solid var(--border-color);overflow-x:auto;padding:0 20px;transition:background-color .3s ease,border-color .3s ease}.tab{padding:15px 25px;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:1rem;font-weight:500;color:var(--text-secondary);transition:all .3s ease;white-space:nowrap}.tab:hover{color:var(--accent-color);background:#667eea1a}[data-theme=dark] .tab:hover{background:#00d9ff1a}.tab.active{color:var(--accent-color);border-bottom-color:var(--accent-color);background:var(--bg-primary);transition:background-color .3s ease,color .3s ease}.tab-content{padding:30px;min-height:400px;background:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}.year-stats{display:flex;justify-content:center;gap:30px;margin-bottom:25px}.stat-item{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;padding:25px 40px;background:var(--bg-card);border-radius:12px;border:2px solid var(--accent-color);box-shadow:var(--shadow-card);min-width:200px;transition:all .3s ease}[data-theme=dark] .stat-item{background:linear-gradient(135deg,#16213e,#0f3460);box-shadow:0 4px 12px #00d9ff33}.stat-label{font-size:.85rem;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:1.5rem;font-weight:700;color:var(--accent-color)}.top-3-stat-item{min-width:200px;max-width:300px}.top-3-content{display:flex;align-items:center;gap:10px;justify-content:center}.top-3-poster{width:40px;height:60px;object-fit:cover;border-radius:4px;flex-shrink:0;box-shadow:0 2px 4px #0003}.top-3-value{font-size:1rem;font-weight:600;text-align:center;word-wrap:break-word;flex:1}.loading,.error{text-align:center;padding:60px 20px;font-size:1.2rem;color:var(--text-secondary)}.error{color:#ff6b6b}@media (max-width: 768px){.app-header h1{font-size:2rem}.subtitle{font-size:1rem}.tab-content{padding:20px}}.homepage{min-height:calc(100vh - 40px);display:flex;align-items:center;justify-content:center;background:var(--header-gradient);border-radius:20px;box-shadow:var(--shadow);transition:background .3s ease}.homepage-content{text-align:center;padding:60px 40px;max-width:1200px;width:100%}.homepage-title{font-size:4rem;font-weight:700;color:#fff;margin-bottom:15px;text-shadow:0 2px 10px rgba(0,0,0,.2)}.homepage-subtitle{font-size:1.5rem;color:#ffffffe6;margin-bottom:50px}.content-selector{display:flex;flex-direction:row;gap:30px;margin-top:40px;justify-content:center;align-items:stretch}.content-button{background:var(--bg-card);border:2px solid var(--border-color);border-radius:20px;padding:40px;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-card);text-align:left;display:flex;align-items:center;gap:25px;flex:1;min-width:0}[data-theme=dark] .content-button{background:linear-gradient(135deg,#16213e,#0f3460)}.content-button:hover{transform:translateY(-5px);box-shadow:0 15px 40px #0000004d}.content-button:active{transform:translateY(-2px)}.button-icon{font-size:4rem;line-height:1;flex-shrink:0}.button-content{flex:1}.button-content h2{font-size:2rem;margin:0 0 10px;color:var(--text-primary);font-weight:700}.button-content p{font-size:1.1rem;color:var(--text-secondary);margin:0}.movies-button:hover{background:linear-gradient(135deg,var(--accent-color) 0%,#667eea 100%);border-color:var(--accent-color);box-shadow:0 15px 40px #667eea4d}[data-theme=dark] .movies-button:hover{background:linear-gradient(135deg,#0f3460,#00d9ff);box-shadow:0 15px 40px #00d9ff4d}.movies-button:hover .button-content h2,.movies-button:hover .button-content p{color:#fff}.tv-button:hover{background:linear-gradient(135deg,#f093fb 0%,var(--accent-color) 100%);border-color:var(--accent-color);box-shadow:0 15px 40px #667eea4d}[data-theme=dark] .tv-button:hover{background:linear-gradient(135deg,#533483,#00d9ff);box-shadow:0 15px 40px #00d9ff4d}.tv-button:hover .button-content h2,.tv-button:hover .button-content p{color:#fff}.comics-button:hover{background:linear-gradient(135deg,gold,#ff8c00);border-color:gold;box-shadow:0 15px 40px #ffd7004d}[data-theme=dark] .comics-button:hover{background:linear-gradient(135deg,#8b4513,gold);box-shadow:0 15px 40px #ffd7004d}.comics-button:hover .button-content h2,.comics-button:hover .button-content p{color:#fff}@media (max-width: 768px){.homepage-title{font-size:2.5rem}.homepage-subtitle{font-size:1.2rem}.content-selector{flex-direction:column;gap:20px}.content-button{padding:30px}.button-icon{font-size:3rem}.button-content h2{font-size:1.5rem}.button-content p{font-size:1rem}}.movie-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:25px;padding:20px 0}.movie-card{background:var(--bg-card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--border-color);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;cursor:pointer}[data-theme=dark] .movie-card{background:linear-gradient(135deg,#16213e,#0f3460)}.movie-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #0003;border-color:var(--accent-color)}[data-theme=dark] .movie-card:hover{box-shadow:0 8px 16px #00d9ff4d}.movie-poster{width:100%;padding-top:150%;position:relative;overflow:hidden;background:var(--bg-tertiary)}.movie-poster img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.poster-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);color:var(--text-secondary);font-size:.9rem}.movie-info{padding:15px}.movie-title{font-size:1rem;font-weight:600;margin-bottom:8px;color:var(--text-primary);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.movie-date{font-size:.85rem;color:var(--text-secondary);margin-bottom:5px}.movie-rating{font-size:.85rem;color:var(--accent-color);font-weight:500}.movie-list-empty{text-align:center;padding:60px 20px;color:var(--text-secondary);font-size:1.1rem}.pagination{display:flex;justify-content:center;align-items:center;gap:20px;padding:30px 20px;margin-top:20px}.pagination-info{color:var(--text-primary);font-size:.95rem;min-width:200px;text-align:center}.pagination-button{padding:10px 20px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:.95rem;cursor:pointer;transition:all .2s ease}.pagination-button:hover:not(:disabled){background:var(--accent-color);border-color:var(--accent-color);color:#fff;transform:translateY(-2px)}.pagination-button:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.movie-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px}.pagination{flex-direction:column;gap:15px}.pagination-info{min-width:auto}}.ranking-tab{max-width:100%}.ranking-section{margin-bottom:40px}.ranking-section h2,.unranked-section h2{font-size:1.8rem;margin-bottom:15px;color:#e0e0e0}.ranking-instructions{color:#a0a0a0;margin-bottom:20px;font-size:.95rem}.empty-rankings{text-align:center;padding:40px 20px;color:#a0a0a0;background:linear-gradient(135deg,#16213e,#0f3460);border-radius:8px;border:1px solid #0f3460}.empty-rankings p{margin:0;position:relative}.empty-rankings p:after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:#00d9ff;margin-left:8px;animation:loading-dots 1.4s infinite;animation-delay:0s}.empty-rankings p:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:#00d9ff;margin-right:4px;animation:loading-dots 1.4s infinite;animation-delay:.2s}@keyframes loading-dots{0%,60%,to{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}.rankings-list{display:flex;flex-direction:column;gap:12px}.rankings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;padding:10px 0}.ranking-card{position:relative;background:linear-gradient(135deg,#16213e,#0f3460);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000004d;border:1px solid #0f3460;transition:transform .2s ease,box-shadow .2s ease;cursor:default}.ranking-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px #00d9ff4d;border-color:#00d9ff}.rank-badge{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#00d9ff,#0f3460);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;z-index:10;box-shadow:0 2px 6px #00d9ff66}.ranking-poster-card{width:100%;padding-top:150%;position:relative;overflow:hidden;background:#0f3460}.ranking-poster-card img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.poster-placeholder-card{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0f3460;color:#a0a0a0;font-size:.85rem}.ranking-title-card{padding:12px;min-height:50px;display:flex;align-items:center}.ranking-title-card h4{font-size:.95rem;font-weight:600;color:#e0e0e0;margin:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center;width:100%}.ranking-item{display:flex;align-items:center;gap:15px;padding:15px;background:linear-gradient(135deg,#16213e,#0f3460);border:2px solid #0f3460;border-radius:8px;transition:all .2s ease}.rankings-list.read-only .ranking-item,.ranking-item.read-only-item{cursor:default}.ranking-item.read-only-item:hover{border-color:#0f3460;box-shadow:none}.rank-number{font-size:1.5rem;font-weight:700;color:#00d9ff;min-width:40px;text-align:center}.ranking-poster{width:60px;height:90px;flex-shrink:0;border-radius:4px;overflow:hidden;background:#0f3460}.ranking-info h4{font-size:1.1rem;margin-bottom:5px;color:#e0e0e0}.ranking-date{font-size:.85rem;color:#a0a0a0}.remove-button{background:#ff4757;color:#fff;border:none;border-radius:50%;width:30px;height:30px;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;flex-shrink:0}.unranked-section{margin-top:40px}.unranked-movies{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px}.unranked-info{padding:12px;display:flex;flex-direction:column;gap:8px}.unranked-info h4{font-size:.95rem;font-weight:600;color:#e0e0e0;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.add-button{background:linear-gradient(135deg,#00d9ff,#0f3460);color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;width:100%}@media (max-width: 768px){.ranking-item{padding:12px;gap:12px}.rank-number{font-size:1.2rem;min-width:30px}.ranking-poster{width:50px;height:75px}.unranked-movies{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}}.admin-ranking-tab{max-width:100%}.admin-header{margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #0f3460}.admin-header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:15px}.admin-header h2{font-size:2rem;margin-bottom:10px;color:#e0e0e0}.admin-subtitle-container{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.admin-subtitle{color:#a0a0a0;font-size:1rem;margin:0}.save-button{background:linear-gradient(135deg,#00d9ff,#0f3460);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.save-button:hover:not(:disabled){background:linear-gradient(135deg,#00b8d4,#00d9ff);box-shadow:0 2px 8px #00d9ff4d;transform:translateY(-1px)}.save-button:disabled{opacity:.6;cursor:not-allowed}.admin-actions{display:flex;align-items:center;gap:15px;flex-shrink:0}.save-status{padding:8px 16px;border-radius:6px;font-size:.9rem;font-weight:500;white-space:nowrap}.save-status.saving{background:#00d9ff33;color:#00d9ff;border:1px solid #00d9ff}.save-status.saved{background:#2ed57333;color:#2ed573;border:1px solid #2ed573}.save-status.error{background:#ff475733;color:#ff4757;border:1px solid #ff4757}.export-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.export-button:hover{background:linear-gradient(135deg,#764ba2,#667eea);transform:translateY(-2px);box-shadow:0 4px 8px #667eea4d}.production-notice{background:#ffc1071a;border:1px solid rgba(255,193,7,.3);border-radius:8px;padding:12px 16px;margin-top:15px}.production-notice p{margin:0;color:#ffc107;font-size:.9rem;line-height:1.5}.admin-sections{display:grid;grid-template-columns:1fr 1fr;gap:30px}.ranked-section,.unranked-section{background:linear-gradient(135deg,#16213e,#0f3460);padding:20px;border-radius:12px;border:2px solid #0f3460}.section-header{margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #0f3460}.section-header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.section-header h3{font-size:1.5rem;margin-bottom:8px;color:#e0e0e0}.section-description{font-size:.9rem;color:#a0a0a0;margin:0}.rankings-list{display:flex;flex-direction:column;gap:12px;max-height:600px;overflow-y:auto;padding-right:10px}.ranking-item.draggable{cursor:move}.ranking-item.draggable:hover{border-color:#00d9ff;box-shadow:0 2px 8px #00d9ff4d}.ranking-item.draggable:active{cursor:grabbing;opacity:.7}.ranking-item.drag-over{border-top:3px solid #00d9ff}.drop-indicator{height:3px;background:linear-gradient(90deg,transparent,#00d9ff,transparent);margin:-6px 0;border-radius:2px;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.empty-rankings,.empty-unranked{text-align:center;padding:40px 20px;color:#a0a0a0;background:linear-gradient(135deg,#16213e,#0f3460);border-radius:8px;border:2px dashed #0f3460}.unranked-movies{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;max-height:600px;overflow-y:auto;padding-right:10px}.unranked-movie-card{display:flex;flex-direction:column;background:linear-gradient(135deg,#16213e,#0f3460);border:2px solid #0f3460;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s ease}.unranked-movie-card:hover{border-color:#00d9ff;transform:translateY(-2px);box-shadow:0 4px 8px #00d9ff4d}.unranked-poster{width:100%;padding-top:150%;position:relative;overflow:hidden;background:#0f3460}.unranked-poster img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.unranked-info{padding:8px;display:flex;flex-direction:column;gap:6px}.unranked-info h4{font-size:.8rem;font-weight:600;color:#e0e0e0;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2}.add-button{background:linear-gradient(135deg,#00d9ff,#0f3460);color:#fff;border:none;padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;width:100%}.add-button:hover{background:linear-gradient(135deg,#00b8d4,#00d9ff);box-shadow:0 2px 8px #00d9ff4d}.ranking-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(135deg,#16213e,#0f3460);border:2px solid #0f3460;border-radius:8px;transition:all .2s ease}.rank-number{font-size:1.1rem;font-weight:700;color:#00d9ff;min-width:30px;text-align:center}.ranking-poster{width:40px;height:60px;flex-shrink:0;border-radius:4px;overflow:hidden;background:#0f3460}.ranking-poster img{width:100%;height:100%;object-fit:cover}.poster-placeholder-small{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0f3460;color:#a0a0a0;font-size:.7rem;text-align:center;padding:5px}.ranking-info{flex:1;min-width:0}.ranking-info h4{font-size:.95rem;margin:0;color:#e0e0e0;line-height:1.3}.remove-button{background:#ff4757;color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;flex-shrink:0;line-height:1}.remove-button:hover{background:#ff3838}@media (max-width: 1024px){.admin-sections{grid-template-columns:1fr}}@media (max-width: 768px){.admin-header h2{font-size:1.5rem}.ranking-item{padding:6px 10px;gap:8px}.rank-number{font-size:1rem;min-width:25px}.ranking-poster{width:35px;height:52px}.unranked-movies{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}}.admin-login-container{display:flex;justify-content:center;align-items:center;min-height:400px;padding:40px 20px}.admin-login-box{background:linear-gradient(135deg,#16213e,#0f3460);border:2px solid #00d9ff;border-radius:16px;padding:40px;max-width:400px;width:100%;box-shadow:0 8px 24px #00d9ff33}.admin-login-box h2{color:#e0e0e0;font-size:1.8rem;margin-bottom:10px;text-align:center}.admin-login-subtitle{color:#a0a0a0;font-size:.95rem;margin-bottom:30px;text-align:center}.admin-login-input-group{margin-bottom:20px}.admin-login-input{width:100%;padding:12px 16px;background:#1a1a2e;border:2px solid #0f3460;border-radius:8px;color:#e0e0e0;font-size:1rem;transition:all .2s ease;box-sizing:border-box}.admin-login-input:focus{outline:none;border-color:#00d9ff;box-shadow:0 0 0 3px #00d9ff1a}.admin-login-input::placeholder{color:#666}.admin-login-error{color:#ff6b6b;font-size:.85rem;margin-top:8px;text-align:center}.admin-login-button{width:100%;padding:12px 24px;background:linear-gradient(135deg,#00d9ff,#0f3460);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.admin-login-button:hover{background:linear-gradient(135deg,#00b8d4,#00d9ff);box-shadow:0 4px 12px #00d9ff4d;transform:translateY(-2px)}.admin-login-button:active{transform:translateY(0)}.theme-toggle{position:fixed;bottom:20px;right:20px;z-index:1000;background:var(--bg-card);border:2px solid var(--border-color);border-radius:50%;width:50px;height:50px;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.theme-toggle:hover{transform:scale(1.1);border-color:var(--accent-color);box-shadow:0 4px 12px #0003}.theme-toggle:active{transform:scale(.95)}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #f8f9fa;--bg-card: #ffffff;--text-primary: #333333;--text-secondary: #666666;--text-tertiary: #999999;--border-color: #e0e0e0;--accent-color: #667eea;--accent-hover: #5568d3;--header-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--header-gradient-tv: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--shadow: 0 20px 60px rgba(0, 0, 0, .3);--shadow-card: 0 4px 6px rgba(0, 0, 0, .1)}[data-theme=dark]{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-tertiary: #0f3460;--bg-card: linear-gradient(135deg, #16213e 0%, #0f3460 100%);--text-primary: #e0e0e0;--text-secondary: #a0a0a0;--text-tertiary: #666666;--border-color: #0f3460;--accent-color: #00d9ff;--accent-hover: #00b8d4;--header-gradient: linear-gradient(135deg, #0f3460 0%, #16213e 100%);--header-gradient-tv: linear-gradient(135deg, #533483 0%, #16213e 100%);--shadow: 0 20px 60px rgba(0, 0, 0, .5);--shadow-card: 0 4px 6px rgba(0, 0, 0, .3)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px;transition:background .3s ease}[data-theme=dark] body{background:linear-gradient(135deg,#0a0e27,#1a1a2e)}#root{max-width:1400px;margin:0 auto}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}