*,*:before,*:after{box-sizing:border-box}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;font-size:16px;line-height:1.5;font-weight:400;color:#333;background-color:#f5f5f5}body{margin:0;min-height:100vh}#root{min-height:100vh}h1,h2,h3,h4,h5,h6,p{margin:0}a{color:#1976d2;text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit;font-size:inherit;cursor:pointer}input{font-family:inherit;font-size:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f0f0f0}::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#bbb}:root{--bg-primary: #1f1f1f;--bg-secondary: #2a2a2a;--bg-tertiary: #363636;--bg-create-card: #2d2d3d;--text-primary: #e3e3e3;--text-secondary: #b0b0b0;--text-tertiary: #808080;--accent-blue: #8ab4f8;--accent-purple: #c58af9;--accent-red: #f28b82;--border-subtle: #3a3a3a;--shadow-card: 0 1px 3px rgba(0, 0, 0, .3);--shadow-card-hover: 0 4px 12px rgba(0, 0, 0, .4);--shadow-modal: 0 8px 32px rgba(0, 0, 0, .6);--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--radius-small: 6px;--radius-medium: 8px;--radius-large: 12px;--radius-pill: 20px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 20px;--space-2xl: 24px;--space-3xl: 32px;--space-4xl: 40px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.playlist-card-title{font-size:18px;font-weight:500;line-height:1.4;color:var(--text-primary)}.playlist-card-meta{font-size:13px;font-weight:400;color:var(--text-secondary)}.playlist-description{font-size:14px;font-weight:400;line-height:1.5;color:var(--text-secondary)}.btn{border:none;cursor:pointer;font-family:inherit;font-weight:500;transition:all var(--transition-normal);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm)}.btn-primary{background:var(--accent-blue);color:#1f1f1f;padding:10px 20px;border-radius:var(--radius-pill);font-size:14px}.btn-primary:hover{background:#9dc5ff;transform:translateY(-1px)}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);padding:8px 16px;border-radius:var(--radius-medium);font-size:14px;border:1px solid var(--border-subtle)}.btn-secondary:hover{background:var(--bg-tertiary)}.btn-ghost{background:none;color:var(--text-secondary);padding:8px 16px;border-radius:var(--radius-medium);font-size:14px}.btn-ghost:hover{background:var(--bg-tertiary);color:var(--text-primary)}.btn-danger{background:none;color:var(--accent-red);padding:8px 16px;border-radius:var(--radius-medium);font-size:14px}.btn-danger:hover{background:#f28b821a}.input{background:var(--bg-secondary);border:1px solid var(--border-subtle);color:var(--text-primary);padding:10px 14px;border-radius:var(--radius-medium);font-size:14px;font-family:inherit;width:100%;transition:all var(--transition-fast)}.input:focus{outline:none;border-color:var(--accent-blue);background:var(--bg-tertiary)}.input::placeholder{color:var(--text-tertiary)}.textarea{background:var(--bg-secondary);border:1px solid var(--border-subtle);color:var(--text-primary);padding:10px 14px;border-radius:var(--radius-medium);font-size:14px;font-family:inherit;width:100%;resize:vertical;min-height:80px;transition:all var(--transition-fast)}.textarea:focus{outline:none;border-color:var(--accent-blue);background:var(--bg-tertiary)}.loading{display:flex;align-items:center;justify-content:center;padding:var(--space-4xl);color:var(--text-secondary);font-size:14px}.loading:after{content:"...";animation:loading-dots 1.5s infinite}@keyframes loading-dots{0%,20%{content:"."}40%{content:".."}60%,to{content:"..."}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-4xl);color:var(--text-secondary);text-align:center}.empty-state-icon{font-size:48px;margin-bottom:var(--space-lg);opacity:.5}.empty-state-title{font-size:18px;font-weight:500;color:var(--text-primary);margin-bottom:var(--space-sm)}.empty-state-description{font-size:14px;color:var(--text-secondary);max-width:400px}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fade-in .2s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-secondary);border-radius:var(--radius-large);box-shadow:var(--shadow-modal);max-width:500px;width:90%;max-height:90vh;overflow-y:auto;animation:slide-up .3s ease}@keyframes slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal::-webkit-scrollbar,.playlists-container::-webkit-scrollbar{width:8px;height:8px}.modal::-webkit-scrollbar-track,.playlists-container::-webkit-scrollbar-track{background:var(--bg-primary)}.modal::-webkit-scrollbar-thumb,.playlists-container::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}.modal::-webkit-scrollbar-thumb:hover,.playlists-container::-webkit-scrollbar-thumb:hover{background:#4a4a4a}.search-bar{flex:1;position:relative;max-width:500px}.search-bar form{display:flex;gap:.5rem}.search-bar input{flex:1;padding:.5rem .75rem;border:1px solid #ddd;border-radius:4px;font-size:.9rem}.search-bar input:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.search-bar button{padding:.5rem 1rem;background:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;white-space:nowrap}.search-bar button:hover:not(:disabled){background:#1565c0}.search-bar button:disabled{background:#bbb;cursor:not-allowed}.search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #00000026;max-height:400px;overflow-y:auto;z-index:200}.search-error{padding:1rem;color:#c33;text-align:center}.search-empty{padding:1rem;color:#666;text-align:center}.search-result{display:flex;align-items:center;gap:.75rem;padding:.75rem;cursor:pointer;border-bottom:1px solid #eee}.search-result:last-child{border-bottom:none}.search-result:hover{background:#f5f5f5}.result-thumbnail{width:48px;height:48px;border-radius:50%;object-fit:cover}.result-info{flex:1;min-width:0}.result-title{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-stats{font-size:.8rem;color:#666;margin-top:.25rem}.channel-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.channel-section{padding:1rem;flex-shrink:0}.channel-section h2{font-size:.9rem;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.75rem}.channel-info{text-align:center}.channel-thumbnail{width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:.75rem}.channel-title{font-size:1.1rem;font-weight:600;color:#333;margin-bottom:.5rem}.channel-stats{display:flex;justify-content:center;gap:1rem;font-size:.85rem;color:#666;margin-bottom:.5rem}.channel-url{font-size:.8rem;color:#999;margin-bottom:.75rem}.favorite-btn{width:100%;padding:.6rem;border:2px solid #ffa500;background:#fff;color:orange;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s}.favorite-btn:hover{background:#fff8e6}.favorite-btn.favorited{background:orange;color:#fff}.channel-placeholder{text-align:center;padding:2rem 1rem;color:#999}.divider{height:1px;background:#eee;margin:0 1rem}.favorites-section{flex:1;display:flex;flex-direction:column;overflow:hidden}.tabs{display:flex;border-bottom:1px solid #eee;padding:0 1rem}.tab{padding:.75rem 1rem;background:none;border:none;border-bottom:2px solid transparent;color:#666;cursor:pointer;font-weight:500}.tab.active{color:#1976d2;border-bottom-color:#1976d2}.tab-content{flex:1;overflow-y:auto;overflow-x:visible;padding:1rem;padding-bottom:150px}.favorites-list{display:flex;flex-direction:column;gap:.75rem}.new-folder-btn{padding:.5rem;background:#f5f5f5;border:1px dashed #ccc;border-radius:6px;cursor:pointer;color:#666;font-size:.9rem}.new-folder-btn:hover{background:#eee;border-color:#999}.folder{background:#fafafa;border-radius:6px;overflow:hidden}.folder-header{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#f0f0f0;font-weight:500;font-size:.9rem;-webkit-user-select:none;user-select:none;transition:background .15s}.folder-header:hover{background:#e8e8e8}.folder-chevron{font-size:.7rem;color:#666;transition:transform .2s;display:inline-block;width:12px;text-align:center}.folder-icon{font-size:1rem}.folder-name{flex:1}.folder-delete{background:none;border:none;cursor:pointer;opacity:.5;padding:.25rem}.folder-delete:hover{opacity:1}.folder-content{padding:.5rem;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:500px;padding-top:.5rem;padding-bottom:.5rem}}.folder-empty{padding:.5rem;color:#999;font-size:.85rem;font-style:italic}.favorite-item{display:flex;align-items:center;gap:.5rem;padding:.4rem;border-radius:4px;cursor:pointer}.favorite-item:hover{background:#e8e8e8}.fav-thumbnail{width:32px;height:32px;border-radius:50%;object-fit:cover}.fav-title{flex:1;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fav-actions{display:flex;gap:.25rem;position:relative}.fav-menu-btn,.fav-remove-btn{background:none;border:none;cursor:pointer;padding:.25rem;opacity:.5;font-size:.9rem}.fav-menu-btn:hover,.fav-remove-btn:hover{opacity:1}.fav-remove-btn{color:#c33;font-size:1.1rem;font-weight:700}.fav-menu{position:absolute;bottom:100%;right:0;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:1000;min-width:140px;margin-bottom:4px}.fav-menu-title{padding:.5rem .75rem;font-size:.8rem;color:#999;border-bottom:1px solid #eee}.fav-menu button{display:block;width:100%;padding:.5rem .75rem;background:none;border:none;text-align:left;cursor:pointer;font-size:.85rem}.fav-menu button:hover{background:#f5f5f5}.video-list-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.video-list-header{display:flex;align-items:baseline;justify-content:space-between;padding:1rem;border-bottom:1px solid #eee}.video-list-header h2{font-size:1rem;font-weight:600;color:#333}.channel-name{font-weight:400;color:#666}.video-count{font-size:.85rem;color:#999}.video-filters{display:flex;gap:.5rem;padding:.5rem 1rem;border-bottom:1px solid #eee;flex-wrap:wrap}.filter-search{flex:1;min-width:120px;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.85rem}.filter-search:focus{outline:none;border-color:#1976d2}.filter-select{padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.85rem;background:#fff;cursor:pointer}.filter-select:focus{outline:none;border-color:#1976d2}.video-table-container{flex:1;overflow-y:auto}.video-empty{padding:3rem;text-align:center;color:#999}.video-table{width:100%;border-collapse:collapse;font-size:.85rem}.video-table thead{position:sticky;top:0;background:#fafafa;z-index:1}.video-table th{padding:.75rem .5rem;text-align:left;font-weight:600;color:#666;border-bottom:1px solid #ddd}.video-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.video-table th.sortable:hover{background:#f0f0f0;color:#1976d2}.video-table tbody tr{cursor:pointer;border-bottom:1px solid #eee}.video-table tbody tr:hover{background:#f5f5f5}.video-table tbody tr.selected{background:#e3f2fd}.video-table td{padding:.5rem;vertical-align:middle}.index-cell{width:40px;text-align:center;color:#999;font-size:.8rem}.title-cell{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-cell,.duration-cell{white-space:nowrap;color:#666;font-size:.8rem}.views-cell{white-space:nowrap;color:#666;font-size:.8rem;text-align:right}@media(max-width:900px){.date-cell,.video-table th:nth-child(3){display:none}}@media(max-width:600px){.views-cell,.video-table th:nth-child(5){display:none}}.video-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 1rem;border-top:1px solid #eee;background:#fafafa}.pagination-btn{padding:.4rem .75rem;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:.8rem;color:#333}.pagination-btn:hover:not(:disabled){background:#f0f0f0;border-color:#1976d2}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-info{font-size:.85rem;color:#666}.add-to-playlist-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-lg)}.add-to-playlist-modal{background:var(--bg-secondary);border-radius:var(--radius-large);box-shadow:var(--shadow-modal);width:100%;max-width:480px;max-height:80vh;display:flex;flex-direction:column;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xl);border-bottom:1px solid var(--border-subtle)}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-secondary);font-size:28px;cursor:pointer;border-radius:var(--radius-small);transition:all var(--transition-fast);line-height:1;padding:0}.close-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.modal-body{padding:var(--space-lg);overflow-y:auto;flex:1}.error-message{padding:var(--space-md);background:#f28b821a;color:var(--accent-red);border-radius:var(--radius-small);font-size:14px;margin-bottom:var(--space-lg)}.loading-state{padding:var(--space-3xl);text-align:center;color:var(--text-secondary)}.no-playlists{padding:var(--space-2xl);text-align:center;color:var(--text-secondary)}.no-playlists p{margin:0 0 var(--space-lg)}.playlists-list{margin-bottom:var(--space-lg);max-height:300px;overflow-y:auto}.playlist-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-medium);margin-bottom:var(--space-sm);transition:all var(--transition-fast)}.playlist-item:hover{background:var(--bg-primary)}.playlist-item.in-playlist{background:#8ab4f81a;border:1px solid rgba(138,180,248,.3)}.playlist-info{display:flex;align-items:center;gap:var(--space-md);flex:1;min-width:0}.playlist-emoji{font-size:24px;line-height:1;flex-shrink:0}.playlist-text{flex:1;min-width:0}.playlist-name{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-count{font-size:12px;color:var(--text-tertiary)}.added-badge{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:#8ab4f833;color:var(--accent-blue);font-size:13px;font-weight:500;border-radius:var(--radius-pill)}.create-playlist-form{padding:var(--space-lg);background:var(--bg-tertiary);border-radius:var(--radius-medium);margin-top:var(--space-lg)}.form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.form-header h3{font-size:16px;font-weight:500;color:var(--text-primary);margin:0}.cancel-btn{padding:var(--space-sm) var(--space-md);background:transparent;border:none;color:var(--text-secondary);font-size:14px;cursor:pointer;border-radius:var(--radius-small);transition:all var(--transition-fast)}.cancel-btn:hover{background:var(--bg-primary);color:var(--text-primary)}.emoji-selector-inline{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-xs);margin-bottom:var(--space-lg)}.emoji-selector-inline .emoji-option{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);border:2px solid transparent;border-radius:var(--radius-small);font-size:20px;cursor:pointer;transition:all var(--transition-fast)}.emoji-selector-inline .emoji-option:hover{background:var(--bg-secondary);border-color:var(--border-subtle)}.emoji-selector-inline .emoji-option.selected{background:var(--bg-secondary);border-color:var(--accent-blue)}.btn-sm{padding:var(--space-sm) var(--space-lg);font-size:13px}.btn-block{width:100%;display:block}.create-new-btn{margin-top:var(--space-md)}.playlists-list::-webkit-scrollbar,.modal-body::-webkit-scrollbar{width:8px}.playlists-list::-webkit-scrollbar-track,.modal-body::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:4px}.playlists-list::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:4px}.playlists-list::-webkit-scrollbar-thumb:hover,.modal-body::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}@media(max-width:768px){.add-to-playlist-overlay{padding:0;align-items:flex-end}.add-to-playlist-modal{max-width:100%;max-height:90vh;border-radius:var(--radius-large) var(--radius-large) 0 0}.emoji-selector-inline{grid-template-columns:repeat(6,1fr)}.emoji-selector-inline .emoji-option{width:36px;height:36px;font-size:18px}}.video-detail-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.video-detail-empty{flex:1;display:flex;align-items:center;justify-content:center;color:#999}.video-thumbnail-container{position:relative;flex-shrink:0}.video-thumbnail-link{display:block;position:relative}.video-thumbnail{width:100%;aspect-ratio:16 / 9;object-fit:cover}.play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background:#000000b3;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;opacity:0;transition:opacity .2s}.video-thumbnail-link:hover .play-overlay{opacity:1}.video-info{flex:1;padding:1rem;overflow-y:auto}.video-detail-card .video-title{font-size:1.1rem;font-weight:600;color:#000!important;line-height:1.4;margin-bottom:.75rem}.video-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;font-size:.9rem}.video-channel{color:#1976d2;font-weight:500}.video-date{color:#666}.video-meta span:not(:last-child):after{content:"•";margin-left:.5rem;color:#ccc}.video-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.75rem;padding:1rem;background:#f5f5f5;border-radius:8px;margin-bottom:1rem}.stat{text-align:center}.stat-value{display:block;font-size:1.1rem;font-weight:600;color:#333}.stat-label{display:block;font-size:.75rem;color:#666;text-transform:uppercase;letter-spacing:.5px}.video-description{margin-bottom:1rem}.video-description h3{font-size:.85rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.video-description p{font-size:.9rem;color:#333;line-height:1.6;white-space:pre-wrap;max-height:200px;overflow-y:auto}.video-tabs{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid #eee;padding-bottom:.5rem}.tab-btn{flex:1;padding:.5rem .75rem;background:none;border:none;border-radius:4px;font-size:.85rem;color:#666;cursor:pointer;transition:all .2s}.tab-btn:hover:not(:disabled){background:#f0f0f0}.tab-btn.active{background:#1976d2;color:#fff}.tab-btn:disabled{opacity:.5;cursor:not-allowed}.tab-content{flex:1;overflow-y:auto;margin-bottom:1rem;min-height:100px}.video-transcript{padding:.5rem}.transcript-text{font-family:inherit;font-size:.9rem;line-height:1.6;white-space:pre-wrap;word-wrap:break-word;color:#333;background:#f9f9f9;padding:1rem;border-radius:4px;max-height:300px;overflow-y:auto}.transcript-error,.summary-error{text-align:center;padding:1rem;color:#c33}.transcript-error button,.summary-error button{margin-top:.5rem;padding:.5rem 1rem;background:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer}.video-summary{padding:.5rem}.summary-text{font-size:.95rem;line-height:1.7;color:#333;background:#f0f7ff;padding:1rem;border-radius:4px;border-left:3px solid #1976d2}.playlist-success-message{padding:.75rem;background:#8ab4f826;color:#1976d2;border-radius:6px;text-align:center;font-size:.9rem;font-weight:500;margin-bottom:1rem;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.video-actions{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}.add-to-playlist-btn{width:100%;padding:.75rem;background:#1976d2;color:#fff;text-align:center;border:none;border-radius:6px;font-weight:500;font-size:.9rem;cursor:pointer;transition:background .2s}.add-to-playlist-btn:hover{background:#1565c0}.watch-btn{display:block;width:100%;padding:.75rem;background:red;color:#fff;text-align:center;text-decoration:none;border-radius:6px;font-weight:500;transition:background .2s}.watch-btn:hover{background:#c00}.main-view{min-height:100vh;display:flex;flex-direction:column;background:#f5f5f5}.header{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:#fff;border-bottom:1px solid #ddd;position:sticky;top:0;z-index:100}.header-left{display:flex;align-items:center;gap:1rem}.header h1{font-size:1.1rem;font-weight:600;color:#333;white-space:nowrap}.playlists-link{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#f5f5f5;color:#666;text-decoration:none;border-radius:20px;font-size:.875rem;font-weight:500;transition:all .2s}.playlists-link:hover{background:#e8e8e8;color:#333}.error-banner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#fee;color:#c33;border-bottom:1px solid #fcc}.error-banner button{background:transparent;border:1px solid #c33;color:#c33;padding:.25rem .5rem;border-radius:4px;cursor:pointer}.loading-bar{height:3px;background:linear-gradient(90deg,#1976d2,#42a5f5,#1976d2);background-size:200% 100%;animation:loading 1.5s infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.card-indicators{display:flex;justify-content:center;gap:.5rem;padding:.5rem;background:#fff;border-bottom:1px solid #eee}.indicator{width:10px;height:10px;border-radius:50%;border:none;background:#ddd;cursor:pointer;transition:background .2s}.indicator.active{background:#1976d2}.card-container{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.card-container::-webkit-scrollbar{display:none}.card{flex:0 0 100%;scroll-snap-align:start;overflow-y:auto;padding:1rem;box-sizing:border-box}@media(min-width:768px){.card-indicators{display:none}.card-container{display:grid;grid-template-columns:320px 1fr 380px;gap:1px;background:#ddd;overflow:visible}.card{flex:initial;background:#f5f5f5;scroll-snap-align:initial}}@media(min-width:1200px){.card-container{grid-template-columns:350px 1fr 420px}}.auth-page{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem}.playlist-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-large);padding:var(--space-xl);cursor:pointer;transition:all var(--transition-normal);position:relative;min-height:160px;display:flex;flex-direction:column}.playlist-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px);border-color:var(--bg-tertiary)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-md)}.playlist-emoji{font-size:36px;line-height:1}.card-menu-btn{background:none;border:none;color:var(--text-tertiary);font-size:20px;cursor:pointer;padding:var(--space-xs) var(--space-sm);opacity:0;transition:all var(--transition-fast);border-radius:var(--radius-small)}.playlist-card:hover .card-menu-btn{opacity:1}.card-menu-btn:hover{color:var(--text-primary);background:var(--bg-tertiary)}.card-menu{position:absolute;top:48px;right:12px;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-medium);box-shadow:var(--shadow-card-hover);z-index:10;min-width:140px;overflow:hidden}.card-menu button{display:block;width:100%;background:none;border:none;color:var(--text-primary);padding:10px 16px;text-align:left;cursor:pointer;font-size:14px;transition:background var(--transition-fast)}.card-menu button:hover{background:var(--bg-primary)}.card-menu button.delete-btn{color:var(--accent-red)}.card-body{flex:1;margin-bottom:var(--space-md)}.playlist-title{font-size:18px;font-weight:500;color:var(--text-primary);margin:0 0 6px;line-height:1.4}.playlist-description{font-size:13px;color:var(--text-secondary);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-footer{font-size:13px;color:var(--text-tertiary);display:flex;align-items:center}.playlist-meta{color:var(--text-tertiary)}.playlist-card.create-card{background:var(--bg-create-card);border:2px dashed var(--border-subtle);min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center}.playlist-card.create-card:hover{border-color:var(--accent-blue);background:#8ab4f80d}.create-icon{font-size:48px;color:var(--text-tertiary);margin-bottom:var(--space-sm);transition:color var(--transition-normal)}.create-label{font-size:15px;color:var(--text-secondary);font-weight:450;transition:color var(--transition-normal)}.playlist-card.create-card:hover .create-icon,.playlist-card.create-card:hover .create-label{color:var(--accent-blue)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2xl) var(--space-2xl) var(--space-lg);border-bottom:1px solid var(--border-subtle)}.modal-header h2{font-size:20px;font-weight:500;color:var(--text-primary);margin:0}.modal-close{background:none;border:none;color:var(--text-secondary);font-size:32px;line-height:1;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-small);transition:all var(--transition-fast)}.modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.modal-close:disabled{opacity:.5;cursor:not-allowed}.modal-body{padding:var(--space-2xl)}.form-group{margin-bottom:var(--space-2xl)}.form-group:last-child{margin-bottom:0}.form-group label{display:block;font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:var(--space-sm)}.form-group .required{color:var(--accent-red)}.form-group .optional{color:var(--text-tertiary);font-weight:400}.emoji-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:var(--space-sm);max-height:160px;overflow-y:auto;padding:var(--space-sm);background:var(--bg-primary);border-radius:var(--radius-medium)}.emoji-option{background:var(--bg-secondary);border:2px solid transparent;font-size:24px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-medium);cursor:pointer;transition:all var(--transition-fast)}.emoji-option:hover{background:var(--bg-tertiary);transform:scale(1.1)}.emoji-option.selected{border-color:var(--accent-blue);background:#8ab4f81a}.error-message{background:#f28b821a;border:1px solid var(--accent-red);color:var(--accent-red);padding:var(--space-md);border-radius:var(--radius-medium);font-size:14px;margin-top:var(--space-lg)}.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-md);padding:var(--space-lg) var(--space-2xl) var(--space-2xl);border-top:1px solid var(--border-subtle)}.playlists-page{background:var(--bg-primary);min-height:100vh}.playlists-page .header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg) var(--space-4xl);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle)}.playlists-page .header-left{display:flex;align-items:center;gap:var(--space-3xl)}.playlists-page .logo-link{text-decoration:none;color:inherit}.playlists-page h1{font-size:20px;font-weight:500;color:var(--text-primary);margin:0}.playlists-page .nav-links{display:flex;gap:var(--space-sm)}.playlists-page .nav-link{padding:var(--space-sm) var(--space-lg);color:var(--text-secondary);text-decoration:none;font-size:14px;border-radius:var(--radius-pill);transition:all var(--transition-fast)}.playlists-page .nav-link:hover,.playlists-page .nav-link.active{background:var(--bg-tertiary);color:var(--text-primary)}.page-header{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--space-3xl) var(--space-4xl) var(--space-2xl)}.page-title{font-size:28px;font-weight:500;color:var(--text-primary);margin:0 0 var(--space-xs)}.page-subtitle{font-size:14px;color:var(--text-secondary);margin:0}.playlists-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-xl);padding:0 var(--space-4xl) var(--space-4xl);max-width:1400px}.empty-state-description{font-size:14px;color:var(--text-secondary);margin:0 0 var(--space-2xl);max-width:400px;margin-left:auto;margin-right:auto}@media(max-width:768px){.playlists-page .header{padding:var(--space-lg) var(--space-lg)}.playlists-page .header-left{gap:var(--space-lg)}.playlists-page h1{font-size:18px}.page-header{flex-direction:column;gap:var(--space-lg);padding:var(--space-2xl) var(--space-lg)}.playlists-container{grid-template-columns:1fr;padding:0 var(--space-lg) var(--space-2xl)}}.playlist-detail-page{background:var(--bg-primary);min-height:100vh}.playlist-detail-page .header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg) var(--space-4xl);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle)}.playlist-detail-page .header-left{display:flex;align-items:center;gap:var(--space-3xl)}.playlist-detail-page .logo-link{text-decoration:none;color:inherit}.playlist-detail-page h1{font-size:20px;font-weight:500;color:var(--text-primary);margin:0}.playlist-detail-page .nav-links{display:flex;gap:var(--space-sm)}.playlist-detail-page .nav-link{padding:var(--space-sm) var(--space-lg);color:var(--text-secondary);text-decoration:none;font-size:14px;border-radius:var(--radius-pill);transition:all var(--transition-fast)}.playlist-detail-page .nav-link:hover{background:var(--bg-tertiary);color:var(--text-primary)}.playlist-header{padding:var(--space-3xl) var(--space-4xl);border-bottom:1px solid var(--border-subtle)}.back-btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:transparent;color:var(--text-secondary);border:none;font-size:14px;cursor:pointer;border-radius:var(--radius-pill);transition:all var(--transition-fast);margin-bottom:var(--space-2xl)}.back-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.playlist-info{display:flex;gap:var(--space-xl);align-items:flex-start;margin-bottom:var(--space-2xl)}.playlist-icon{font-size:64px;line-height:1}.playlist-details{flex:1}.playlist-title{font-size:28px;font-weight:500;color:var(--text-primary);margin:0 0 var(--space-sm)}.playlist-description{font-size:14px;color:var(--text-secondary);margin:0 0 var(--space-md);line-height:1.5}.playlist-meta{font-size:14px;color:var(--text-tertiary);margin:0}.copy-urls-btn{display:inline-flex;align-items:center;gap:var(--space-sm)}.videos-list{padding:var(--space-3xl) var(--space-4xl);max-width:1200px}.video-item{display:flex;gap:var(--space-xl);padding:var(--space-xl);background:var(--bg-secondary);border-radius:var(--radius-medium);margin-bottom:var(--space-lg);transition:all var(--transition-normal)}.video-item:hover{background:var(--bg-tertiary);box-shadow:var(--shadow-card)}.video-thumbnail{position:relative;flex-shrink:0;width:240px;height:135px;background:#000;border-radius:var(--radius-small);overflow:hidden}.video-thumbnail img{width:100%;height:100%;object-fit:cover}.video-duration{position:absolute;bottom:var(--space-sm);right:var(--space-sm);padding:2px var(--space-sm);background:#000c;color:#fff;font-size:12px;font-weight:500;border-radius:var(--radius-small)}.video-info{flex:1;min-width:0}.video-title{font-size:16px;font-weight:500;color:var(--text-primary);margin:0 0 var(--space-sm);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-meta{font-size:13px;color:var(--text-tertiary);margin:0 0 var(--space-md)}.video-description{font-size:13px;color:var(--text-secondary);margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-actions{display:flex;flex-direction:column;gap:var(--space-sm);flex-shrink:0}.video-actions .btn{white-space:nowrap;min-width:140px;justify-content:center}.empty-state{padding:var(--space-4xl);text-align:center}.empty-state-icon{font-size:64px;margin-bottom:var(--space-lg);opacity:.4}.empty-state-title{font-size:20px;font-weight:500;color:var(--text-primary);margin:0 0 var(--space-md)}.empty-state-description{font-size:14px;color:var(--text-secondary);margin:0 0 var(--space-2xl);max-width:400px;margin-left:auto;margin-right:auto;line-height:1.6}.error-state{padding:var(--space-4xl);text-align:center;color:var(--accent-red)}.error-state p{margin-bottom:var(--space-lg)}.loading{padding:var(--space-4xl);text-align:center;color:var(--text-secondary)}@media(max-width:768px){.playlist-detail-page .header{padding:var(--space-lg) var(--space-lg)}.playlist-detail-page .header-left{gap:var(--space-lg)}.playlist-detail-page h1{font-size:18px}.playlist-header{padding:var(--space-2xl) var(--space-lg)}.playlist-info{flex-direction:column;gap:var(--space-lg)}.playlist-icon{font-size:48px}.videos-list{padding:var(--space-2xl) var(--space-lg)}.video-item{flex-direction:column;gap:var(--space-lg)}.video-thumbnail{width:100%;height:auto;aspect-ratio:16 / 9}.video-actions{flex-direction:row}.video-actions .btn{flex:1;min-width:0}.copy-urls-btn{width:100%;justify-content:center}}