:root{--bg-dark:#0b0b0f;--bg-secondary:#16181f;--card-dark:#1c1e26;--text-light:#f1f1f1;--text-white:#ffffff;--text-secondary:#a1a1aa;--border-dark:#2c2c3a;--accent-color:#0072ff;--accent-hover:#0056cc;--success-color:#16a34a;--warning-color:#f59e0b;--error-color:#dc2626;--hover-glow:0 0 20px rgba(0, 114, 255, 0.3);--bg-light:#f8fafc;--bg-secondary-light:#ffffff;--card-light:#ffffff;--text-dark:#1e293b;--text-secondary-light:#64748b;--border-light:#e2e8f0;background-color:var(--bg-dark);color:var(--text-light)}:root.light-mode{background-color:var(--bg-light);color:var(--text-dark)}*{box-sizing:border-box}body{background-color:inherit;color:inherit;font-family:Inter,Roboto,'Segoe UI',sans-serif;margin:0;padding:0;padding-top:70px;padding-bottom:80px;min-height:100vh;line-height:1.6}.hero-section{background:linear-gradient(135deg,var(--bg-dark) 0,var(--bg-secondary) 100%);padding:60px 0;position:relative;overflow:hidden}.hero-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(0,114,255,.1) 0,transparent 50%);pointer-events:none}:root.light-mode .hero-section{background:linear-gradient(135deg,var(--bg-light) 0,var(--bg-secondary-light) 100%)}.hero-content{text-align:center;position:relative;z-index:2}.hero-title{font-size:3.5rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(135deg,var(--text-white) 0,var(--accent-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}:root.light-mode .hero-title{background:linear-gradient(135deg,var(--text-dark) 0,var(--accent-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:2rem}:root.light-mode .hero-subtitle{color:var(--text-secondary-light)}.hero-stats{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap}.stat-item{text-align:center}.stat-number{display:block;font-size:2.5rem;font-weight:700;color:var(--accent-color);line-height:1}.stat-label{display:block;font-size:.875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-top:.5rem}:root.light-mode .stat-label{color:var(--text-secondary-light)}.content-wrapper{padding:40px 0}.tracker-container{display:flex;gap:24px;align-items:flex-start}.genre-breakdown,.watched-shows{background-color:var(--card-dark);border-radius:12px;padding:20px;border:1px solid var(--border-dark);box-shadow:0 12px 30px rgba(0,0,0,.25)}:root.light-mode .genre-breakdown,:root.light-mode .watched-shows{background-color:var(--card-light);border:1px solid var(--border-light);box-shadow:0 12px 30px rgba(0,0,0,.08)}.genre-breakdown{flex:1;min-width:300px;max-width:400px;height:fit-content}.watched-shows{flex:2}.genre-breakdown h4,.watched-shows h4{color:var(--text-white);margin-bottom:1.5rem;font-weight:600}:root.light-mode .genre-breakdown h4,:root.light-mode .watched-shows h4{color:var(--text-dark)}.genre-chart-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:350px;margin:0 auto;position:relative}.genre-color-legend{display:flex;justify-content:center;margin-bottom:20px;flex-wrap:wrap;gap:15px}.genre-legend-item{display:flex;align-items:center;font-size:14px;color:var(--text-light)}:root.light-mode .genre-legend-item{color:var(--text-dark)}.genre-legend-color{width:15px;height:15px;margin-right:8px;border-radius:3px}.genre-pie-chart{width:300px!important;height:300px!important;max-width:300px!important;max-height:300px!important;flex-shrink:0;display:block}.tracker-stats{margin-top:20px;text-align:center}.tracker-stats p{color:var(--text-secondary);margin-bottom:.5rem}:root.light-mode .tracker-stats p{color:var(--text-secondary-light)}.tracker-stats span{color:var(--accent-color);font-weight:600}.tracker-icon{color:var(--text-light);transition:color .3s ease}:root.light-mode .tracker-icon{color:var(--text-dark)}.tracker-icon:hover{color:var(--accent-color)}.tracker-controls{background-color:var(--bg-secondary);border-radius:12px;padding:20px;margin-bottom:24px;border:1px solid var(--border-dark);box-shadow:0 8px 20px rgba(0,0,0,.15)}:root.light-mode .tracker-controls{background-color:var(--bg-secondary-light);border:1px solid var(--border-light);box-shadow:0 8px 20px rgba(0,0,0,.05)}.search-container{position:relative}#showSearch{background-color:var(--card-dark);color:var(--text-light);border:1px solid var(--border-dark);padding:12px 16px;border-radius:8px;font-size:.875rem;transition:all .3s ease;width:100%}:root.light-mode #showSearch{background-color:var(--card-light);color:var(--text-dark);border:1px solid var(--border-light)}#showSearch::placeholder{color:var(--text-secondary)}:root.light-mode #showSearch::placeholder{color:var(--text-secondary-light)}#showSearch:focus{outline:0;border-color:var(--accent-color);box-shadow:0 0 0 2px rgba(0,114,255,.25)}.search-results{position:absolute;top:100%;left:0;right:0;background-color:var(--card-dark);border:1px solid var(--border-dark);border-radius:0 0 8px 8px;max-height:200px;overflow-y:auto;z-index:1000;box-shadow:0 4px 20px rgba(0,0,0,.2);margin-top:4px}:root.light-mode .search-results{background-color:var(--card-light);border:1px solid var(--border-light);box-shadow:0 4px 20px rgba(0,0,0,.08)}.search-result-item{padding:12px 16px;cursor:pointer;transition:background-color .2s ease;color:var(--text-light);font-size:.875rem}:root.light-mode .search-result-item{color:var(--text-dark)}.search-result-item:hover{background-color:var(--accent-color);color:var(--text-white)}#sortShows{background-color:var(--card-dark);color:var(--text-light);border:1px solid var(--border-dark);padding:12px 16px;border-radius:8px;cursor:pointer;font-size:.875rem;transition:all .3s ease}:root.light-mode #sortShows{background-color:var(--card-light);color:var(--text-dark);border:1px solid var(--border-light)}#sortShows:focus{outline:0;border-color:var(--accent-color);box-shadow:0 0 0 2px rgba(0,114,255,.25)}.tracker-show-card{background-color:var(--card-dark);border-radius:12px;padding:16px;margin-bottom:16px;display:flex;align-items:flex-start;border:1px solid var(--border-dark);transition:all .3s cubic-bezier(.175, .885, .32, 1.275);cursor:pointer;min-height:160px;box-shadow:0 8px 25px rgba(0,0,0,.15);position:relative;overflow:hidden}:root.light-mode .tracker-show-card{background-color:var(--card-light);border:1px solid var(--border-light);box-shadow:0 8px 25px rgba(0,0,0,.06)}.tracker-show-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 15px 35px rgba(0,0,0,.25);border-color:var(--accent-color)}:root.light-mode .tracker-show-card:hover{box-shadow:0 15px 35px rgba(0,0,0,.08)}.tracker-show-poster{width:100px;height:150px;object-fit:cover;border-radius:8px;flex-shrink:0;box-shadow:0 8px 20px rgba(0,0,0,.3);transition:all .3s ease;position:relative;z-index:2}:root.light-mode .tracker-show-poster{box-shadow:0 8px 20px rgba(0,0,0,.12)}.tracker-show-card:hover .tracker-show-poster{transform:scale(1.05);box-shadow:0 12px 30px rgba(0,0,0,.4)}:root.light-mode .tracker-show-card:hover .tracker-show-poster{box-shadow:0 12px 30px rgba(0,0,0,.15)}.show-details{flex-grow:1;margin-left:16px;display:flex;flex-direction:column;justify-content:space-between;min-height:150px;position:relative;z-index:2}.show-title{font-size:1.2rem;font-weight:600;color:var(--text-white);margin-bottom:8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s ease}:root.light-mode .show-title{color:var(--text-dark)}.tracker-show-card:hover .show-title{color:var(--accent-color)}.show-details-stats{display:flex;justify-content:space-between;margin-bottom:12px;color:var(--text-secondary);font-size:.85rem;gap:12px}:root.light-mode .show-details-stats{color:var(--text-secondary-light)}.show-details-stats>div{display:flex;flex-direction:column;align-items:flex-start}.show-details-stats label{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;opacity:.8;font-weight:500}.show-details-stats span{font-weight:600;color:var(--text-light);font-size:.9rem}:root.light-mode .show-details-stats span{color:var(--text-dark)}.show-progress{margin-top:auto}.progress{background-color:var(--border-dark);height:6px;border-radius:3px;overflow:hidden;margin-bottom:6px;position:relative}:root.light-mode .progress{background-color:var(--border-light)}.progress-bar{background:linear-gradient(90deg,var(--success-color),#22c55e);transition:width .5s ease;height:100%;border-radius:3px;position:relative}.progress-bar::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.progress-text{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text-secondary);margin-top:4px}:root.light-mode .progress-text{color:var(--text-secondary-light)}.progress-percentage{font-weight:600;color:var(--success-color)}.show-status-mobile{display:none}.tracker-show-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 80% 20%,rgba(0,114,255,.03) 0,transparent 50%);pointer-events:none;z-index:1}:root.light-mode .tracker-show-card::before{background:radial-gradient(circle at 80% 20%,rgba(0,114,255,.02) 0,transparent 50%)}.skeleton-item{background:linear-gradient(90deg,var(--card-dark) 25%,var(--bg-secondary) 50%,var(--card-dark) 75%);background-size:200% 100%;border-radius:12px;overflow:hidden;animation:shimmer 1.5s infinite;pointer-events:none;height:180px;margin-bottom:16px}:root.light-mode .skeleton-item{background:linear-gradient(90deg,#e2e8f0 25%,#f8fafc 50%,#e2e8f0 75%);background-size:200% 100%}.genre-skeleton{display:flex;flex-direction:column;align-items:center;width:100%;max-width:350px;margin:0 auto;position:relative}.genre-skeleton-legend{display:flex;justify-content:center;margin-bottom:20px;flex-wrap:wrap;gap:15px}.genre-skeleton-legend-item{display:flex;align-items:center;font-size:14px}.genre-skeleton-color{width:15px;height:15px;margin-right:8px;border-radius:3px;background:linear-gradient(90deg,var(--border-dark) 25%,var(--bg-secondary) 50%,var(--border-dark) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}:root.light-mode .genre-skeleton-color{background:linear-gradient(90deg,#e2e8f0 25%,#f8fafc 50%,#e2e8f0 75%);background-size:200% 100%}.genre-skeleton-text{height:14px;width:60px;background:linear-gradient(90deg,var(--border-dark) 25%,var(--bg-secondary) 50%,var(--border-dark) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}:root.light-mode .genre-skeleton-text{background:linear-gradient(90deg,#e2e8f0 25%,#f8fafc 50%,#e2e8f0 75%);background-size:200% 100%}.genre-skeleton-chart{width:300px;height:300px;border-radius:50%;background:linear-gradient(90deg,var(--border-dark) 25%,var(--bg-secondary) 50%,var(--border-dark) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;flex-shrink:0}:root.light-mode .genre-skeleton-chart{background:linear-gradient(90deg,#e2e8f0 25%,#f8fafc 50%,#e2e8f0 75%);background-size:200% 100%}.genre-skeleton-stats{margin-top:20px;text-align:center;display:flex;flex-direction:column;gap:8px}.genre-skeleton-stat{height:16px;background:linear-gradient(90deg,var(--border-dark) 25%,var(--bg-secondary) 50%,var(--border-dark) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}:root.light-mode .genre-skeleton-stat{background:linear-gradient(90deg,#e2e8f0 25%,#f8fafc 50%,#e2e8f0 75%);background-size:200% 100%}.genre-skeleton-stat:first-child{width:120px;margin:0 auto}.genre-skeleton-stat:nth-child(2){width:100px;margin:0 auto}@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}.empty-state{text-align:center;padding:80px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-icon{font-size:4rem;color:var(--text-secondary);margin-bottom:1.5rem}:root.light-mode .empty-icon{color:var(--text-secondary-light)}.empty-state h3{font-size:1.5rem;font-weight:600;margin-bottom:.5rem;color:var(--text-light)}:root.light-mode .empty-state h3{color:var(--text-dark)}.empty-state p{color:var(--text-secondary);margin-bottom:2rem}:root.light-mode .empty-state p{color:var(--text-secondary-light)}@media (min-width:769px){body{padding-bottom:0}}@media (max-width:768px){body{padding-top:0;padding-bottom:80px}.hero-section{padding:20px 0}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.hero-stats{gap:1.5rem}.stat-number{font-size:2rem}.tracker-container{flex-direction:column;gap:16px}.genre-breakdown,.watched-shows{max-width:100%;min-width:unset;width:100%;flex:1 1 auto}.genre-pie-chart{width:250px!important;height:250px!important;max-width:250px!important;max-height:250px!important}.genre-skeleton-chart{width:250px;height:250px}.genre-breakdown{display:flex;flex-direction:column}.genre-chart-container{flex:1;display:flex;flex-direction:column;justify-content:center}.genre-skeleton{flex:1;display:flex;flex-direction:column;justify-content:center}.tracker-show-card{flex-direction:row;align-items:flex-start;padding:12px;min-height:120px}.tracker-show-poster{width:70px;height:105px;margin-right:12px;margin-bottom:0}.show-details{margin-left:0;min-height:105px}.show-title{font-size:1rem;margin-bottom:6px}.show-details-stats{flex-direction:column;gap:6px;margin-bottom:8px}.show-details-stats>div{flex-direction:row;justify-content:space-between;align-items:center;width:100%}.show-details-stats label{margin-bottom:0}.show-status-mobile{display:none}.progress{height:4px}.progress-text{font-size:.75rem}.search-container{margin-bottom:10px}.empty-state{min-height:300px;padding:40px 20px}.empty-icon{font-size:3rem}.genre-empty-chart{width:100%;display:flex;justify-content:center;align-items:center;min-height:250px}.genre-empty-chart>div{width:250px!important;height:250px!important}.genre-skeleton-chart{width:250px;height:250px;margin:0 auto}.genre-chart-container{width:100%;display:flex;flex-direction:column;align-items:center}.genre-pie-chart{width:250px!important;height:250px!important;max-width:250px!important;max-height:250px!important;margin:0 auto}}