:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.app-header{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.5rem;text-align:center;color:#fff;position:relative}.app-header h1{font-size:3rem;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.app-header p{font-size:1.2rem;margin:.5rem 0 0;opacity:.9}.sync-status{position:absolute;top:1rem;right:1rem}.status-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;font-size:.9rem;color:#fff}.status-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.status-indicator.online .status-dot{background:#4ade80}.status-indicator.offline .status-dot{background:#f97316}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.navigation{display:flex;justify-content:center;gap:1rem;padding:1rem;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.navigation button{padding:.75rem 1.5rem;border:none;border-radius:25px;background:#fff3;color:#fff;font-weight:500;cursor:pointer;transition:all .3s ease}.navigation button:hover{background:#ffffff4d;transform:translateY(-2px)}.navigation button.active{background:#ffffffe6;color:#333}.app-main{max-width:1200px;margin:0 auto;padding:2rem}.error-message,.loading-message{background:#ffffffe6;padding:1rem;border-radius:10px;margin-bottom:2rem;text-align:center}.error-message{background:#f44336e6;color:#fff}.error-message button{background:#fff3;border:none;color:#fff;padding:.5rem 1rem;border-radius:5px;cursor:pointer;margin-left:1rem}.theme-manager{background:#ffffffe6;border-radius:15px;padding:2rem;box-shadow:0 8px 32px #1f26875e}.theme-manager-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.add-theme-button,.add-playlist-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#4caf50;color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:500;transition:background .3s ease}.add-theme-button:hover,.add-playlist-button:hover{background:#45a049}.themes-list,.playlists-list{display:grid;gap:1rem}.theme-card,.playlist-card{background:#fff;border-radius:10px;padding:1.5rem;box-shadow:0 4px 6px #0000001a;transition:all .3s ease;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start}.theme-card:hover,.playlist-card:hover{transform:translateY(-2px);box-shadow:0 8px 15px #0003}.theme-card.active,.playlist-card.active{border:2px solid #667eea}.theme-content,.playlist-content{flex:1}.theme-content h3,.playlist-content h3{margin:0 0 .5rem;color:#333}.theme-content p,.playlist-content p{margin:.5rem 0;color:#666}.theme-keywords{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.keyword-tag{background:#e3f2fd;color:#1976d2;padding:.25rem .75rem;border-radius:15px;font-size:.8rem}.theme-actions,.playlist-actions{display:flex;gap:.5rem}.edit-button,.delete-button,.search-button,.refresh-button{padding:.5rem;border:none;border-radius:5px;cursor:pointer;transition:background .3s ease}.search-button{background:#2196f3;color:#fff}.refresh-button{background:#4caf50;color:#fff}.refresh-button:hover{background:#45a049}.edit-button{background:#ff9800;color:#fff}.delete-button{background:#f44336;color:#fff}.search-button:hover,.edit-button:hover,.delete-button:hover{opacity:.8}.theme-form,.playlist-form{background:#f5f5f5;padding:1.5rem;border-radius:10px;margin-bottom:1rem}.theme-form input,.theme-form textarea,.playlist-form input,.playlist-form select{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:5px;margin-bottom:1rem;font-size:1rem}.theme-form textarea{min-height:80px;resize:vertical}.keywords-help{background:#e3f2fd;border:1px solid #bbdefb;border-radius:5px;padding:1rem;margin-bottom:1rem}.keywords-help p{margin:0 0 .5rem;color:#1976d2;font-size:.9rem}.keywords-help ul{margin:0;padding-left:1.5rem;font-size:.9rem;color:#424242}.keywords-help li{margin-bottom:.25rem}.keywords-help code{background:#f5f5f5;padding:2px 4px;border-radius:3px;font-family:Courier New,monospace;color:#d32f2f}.theme-form-actions,.playlist-form-actions{display:flex;gap:1rem}.save-button{background:#4caf50;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:5px;cursor:pointer;font-weight:500}.cancel-button{background:#757575;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:5px;cursor:pointer;font-weight:500}.video-list{background:#ffffffe6;border-radius:15px;padding:1rem;box-shadow:0 8px 32px #1f26875e}.video-list-title{margin-bottom:1rem;color:#333}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.video-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 6px #0000001a;transition:all .3s ease}.video-card:hover{transform:translateY(-5px);box-shadow:0 8px 15px #0003}.video-thumbnail-container{position:relative;width:100%;height:200px;overflow:hidden}.video-thumbnail{width:100%;height:100%;object-fit:cover}.video-duration{position:absolute;bottom:8px;right:8px;background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:1rem}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffffe6;border:none;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;opacity:0}.video-thumbnail-container:hover .play-button{opacity:1}.play-button:hover{background:#fff;transform:translate(-50%,-50%) scale(1.1)}.video-info{padding:.5rem}.video-title{font-size:1rem;font-weight:600;margin:0 0 .5rem;color:#333;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-channel{color:#666;font-size:.9rem;margin:0 0 .25rem}.video-views{color:#999;font-size:.8rem;margin:0}.watched-badge{display:inline-flex;align-items:center;gap:.3rem;background:#4caf501a;color:#4caf50;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:600;margin-top:.5rem}.video-card.watched{opacity:.7}.video-card.watched .video-thumbnail-container:after{content:"";position:absolute;inset:0;background:#4caf501a;pointer-events:none}.add-to-playlist-button{display:flex;align-items:center;gap:.5rem;background:#4caf50;color:#fff;border:none;padding:.5rem 1rem;border-radius:5px;cursor:pointer;margin-top:1rem;font-size:.9rem}.video-player{background:#fffffff2;border-radius:15px;padding:2rem;margin:2rem;box-shadow:0 8px 32px #1f26875e}.video-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.back-button,.finish-button{display:flex;align-items:center;gap:.5rem;border:none;padding:.75rem 1.5rem;border-radius:10px;cursor:pointer;font-weight:500;transition:all .3s ease}.back-button{background:#667eea;color:#fff}.finish-button{background:#4caf50;color:#fff}.back-button:hover{background:#5a6fd8}.finish-button:hover{background:#45a049}.video-container{width:100%;max-width:800px;margin:0 auto .5rem;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px #0000004d}.video-info h2{color:#333;margin-bottom:.5rem}.channel-name{color:#666;font-weight:500;margin-bottom:1rem}.video-description{color:#555;line-height:1.6}.playlist-manager{background:#ffffffe6;border-radius:15px;padding:2rem;box-shadow:0 8px 32px #1f26875e}.playlist-manager-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.playlist-header{display:flex;align-items:center;gap:.5rem}.playlist-videos{margin-top:1rem;padding-top:1rem;border-top:1px solid #eee}.playlist-video-list{display:flex;flex-direction:column;gap:.5rem}.playlist-video-item{display:flex;align-items:center;gap:1rem;padding:.5rem;background:#f9f9f9;border-radius:5px}.video-number{font-weight:600;color:#666;min-width:20px}.playlist-video-thumbnail{width:60px;height:45px;object-fit:cover;border-radius:3px}.playlist-video-info{flex:1;cursor:pointer}.playlist-video-info h5{margin:0;font-size:.9rem;color:#333}.playlist-video-info p{margin:0;font-size:.8rem;color:#666}.remove-video-button{background:#f44336;color:#fff;border:none;padding:.25rem;border-radius:3px;cursor:pointer}.no-themes,.no-playlists,.no-videos,.video-list-empty{text-align:center;padding:3rem;color:#666}.current-theme-info{background:#ffffffe6;border-radius:15px;padding:1rem;margin-bottom:1rem;box-shadow:0 8px 32px #1f26875e}.current-theme-info h2{margin:0 0 .5rem;color:#333}.current-theme-info p{margin:0;color:#666}@media(max-width:768px){.app-main{padding:1rem}.navigation{flex-wrap:wrap}.theme-manager-header,.playlist-manager-header{flex-direction:column;gap:1rem;align-items:stretch}.video-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.theme-card,.playlist-card{flex-direction:column;gap:1rem}.theme-actions,.playlist-actions{align-self:flex-end}}