*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a19;--bg-panel:#0a0a1cf7;--bg-card:#13132a;--bg-card-hover:#1c1c3a;--border:#2a2a45;--accent:#7c5cfc;--accent-dim:#7c5cfc40;--text:#c8c8e0;--text-dim:#6b6b8a;--text-head:#f0f0ff;--focus:#7c5cfc;--focus-bg:#7c5cfc33;--red:#e05c5c;--sans:system-ui, "Segoe UI", Roboto, sans-serif;font-family:var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:18px}body{background:var(--bg);margin:0}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}h1{color:var(--text-head);margin-bottom:24px;font-size:2rem;font-weight:600}h2{color:var(--text-head);margin-bottom:12px;font-size:1.2rem;font-weight:500}button{font-family:var(--sans);cursor:pointer}ul{list-style:none}.home-screen{flex-direction:column;gap:32px;max-width:720px;margin:0 auto;padding:40px 24px;display:flex}.home-screen section{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:10px;padding:24px;display:flex}.home-screen input[type=text],.home-screen input[type=url]{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;outline:none;padding:10px 14px;font-size:.95rem;transition:border-color .15s}.home-screen input[type=text]:focus,.home-screen input[type=url]:focus{border-color:var(--accent)}.home-screen input[type=file]{color:var(--text);font-size:.9rem}.home-screen button{background:var(--accent);color:#fff;border:none;border-radius:6px;align-self:flex-start;padding:10px 20px;font-size:.95rem;transition:opacity .15s}.home-screen button:hover{opacity:.85}.home-screen .error{color:var(--red);font-size:.9rem}.home-screen .list-section ul{flex-direction:column;gap:8px;display:flex}.home-screen .list-section li{background:var(--bg);border:1px solid var(--border);border-radius:8px;align-items:center;gap:12px;padding:12px 16px;transition:border-color .15s;display:flex}.home-screen .list-section li.active{border-color:var(--accent);background:var(--focus-bg)}.home-screen .list-section .list-name{color:var(--text-head);text-align:left;flex:1;font-weight:600}.home-screen .list-section .list-url{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;text-align:left;flex:2;font-size:.78rem;overflow:hidden}.home-screen .list-section button{flex-shrink:0;padding:6px 14px;font-size:.85rem}.home-screen .list-section button:last-child{border:1px solid var(--red);color:var(--red);background:0 0}.home-screen .list-section button:last-child:hover{background:#e05c5c1a}.main-screen{flex-direction:column;gap:16px;min-height:100vh;padding:24px;display:flex}.main-screen>button{border:1px solid var(--border);color:var(--text);background:0 0;border-radius:6px;align-self:flex-start;padding:8px 16px;font-size:.9rem;transition:border-color .15s,color .15s}.main-screen>button:hover{border-color:var(--accent);color:var(--text-head)}.main-screen input[type=text]{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-radius:6px;outline:none;max-width:400px;padding:10px 14px;font-size:.95rem;transition:border-color .15s}.main-screen input[type=text]:focus{border-color:var(--accent)}.group-pills{flex-wrap:wrap;gap:8px;display:flex}.group-pills button{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-radius:20px;padding:6px 16px;font-size:.85rem;transition:all .15s}.group-pills button:hover{border-color:var(--accent);color:var(--text-head)}.group-pills button.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.pills-separator{color:var(--border);-webkit-user-select:none;user-select:none;align-self:center;padding:0 4px;font-size:1.2rem}.fav-pill{background:var(--bg-card);color:#4ade80;border:1px solid #4ade80;border-radius:20px;align-items:center;gap:6px;padding:6px 16px;font-size:.85rem;transition:all .15s;display:flex}.fav-pill:hover{background:#4ade801a}.fav-pill.active{background:#4ade8026;font-weight:600}.pill-export{color:#4ade80;cursor:pointer;background:#4ade8033;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:.75rem;transition:background .15s;display:inline-flex}.pill-export:hover{background:#4ade8066}.channel-country{color:var(--text-dim);background:var(--bg);text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:2px 6px;font-size:.75rem}.channel-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;display:grid}.channel-card{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:10px;flex-direction:column;align-items:center;gap:10px;padding:16px 12px;transition:border-color .15s,background .15s;display:flex}.channel-card:hover{border-color:var(--accent);background:var(--bg-card-hover)}.channel-card img{object-fit:contain;width:64px;height:40px}.channel-card .no-logo{background:var(--bg);width:64px;height:40px;color:var(--text-dim);border-radius:4px;justify-content:center;align-items:center;font-size:.75rem;display:flex}.channel-card .channel-name{color:var(--text-head);text-align:center;word-break:break-word;font-size:.85rem;line-height:1.3}.channel-card button{border:1px solid var(--border);color:var(--text);background:0 0;border-radius:4px;padding:4px 10px;font-size:.8rem;transition:all .15s}.channel-card button:hover{border-color:var(--accent);color:var(--accent)}.side-panel-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border);margin-bottom:6px;padding:0 16px 10px;font-size:.85rem;font-weight:700}.side-panel-empty{color:var(--text-dim);padding:16px;font-size:.9rem}.side-panel-list{flex-direction:column;display:flex}.side-panel-list li{color:var(--text);cursor:pointer;border-radius:6px;margin:1px 6px;padding:10px 16px;font-size:.95rem;transition:background .1s,color .1s}.side-panel-list li.focused{background:var(--focus-bg);color:var(--text-head);outline:2px solid var(--focus);outline-offset:-2px}.side-panel-count{color:var(--text-dim);font-size:.85em}.channel-list-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border);margin-bottom:6px;padding:0 16px 10px;font-size:.85rem;font-weight:700}.channel-list-empty{color:var(--text-dim);padding:16px;font-size:.9rem}.channel-list-panel ul{flex-direction:column;display:flex}.channel-list-panel li{color:var(--text);cursor:pointer;border-radius:6px;align-items:center;gap:10px;margin:1px 6px;padding:10px 16px;font-size:.92rem;transition:background .1s,color .1s;display:flex}.channel-list-panel li.focused{background:var(--focus-bg);color:var(--text-head);outline:2px solid var(--focus);outline-offset:-2px}.channel-list-panel li.active{color:#4ade80;font-weight:600}.channel-list-panel li.active:before{content:"▶";color:#4ade80;margin-right:6px;font-size:.7em}.channel-list-panel li img{object-fit:contain;flex-shrink:0;width:32px;height:20px}.player-container{top:0;left:0;width:100vw!important;height:100vh!important;position:fixed!important}.player-back-btn{z-index:10;color:#fff;cursor:pointer;opacity:0;pointer-events:none;background:#000000a6;border:1px solid #ffffff4d;border-radius:8px;padding:8px 18px;font-size:1rem;transition:opacity .25s;position:absolute;top:20px;right:20px}.player-container:hover .player-back-btn{opacity:1;pointer-events:auto}.player-channel-name{z-index:10;color:#fff;text-shadow:0 1px 6px #000c;background:#00000073;border-radius:6px;padding:6px 14px;font-size:1.2rem;font-weight:600;transition:opacity .4s;position:absolute;top:20px;left:20px}.player-channel-name.hidden{opacity:0;pointer-events:none}.settings-screen{flex-direction:column;gap:24px;max-width:600px;margin:0 auto;padding:40px 24px;display:flex}.settings-screen section{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:12px;padding:24px;display:flex}.settings-screen button{background:var(--accent);color:#fff;border:none;border-radius:6px;align-self:flex-start;padding:10px 20px;font-size:.95rem;transition:opacity .15s}.settings-screen button:hover{opacity:.85}