:root{color-scheme:dark;--bg:#040716;--panel:#0b1128;--line:#293259;--text:#f6f8ff;--muted:#a5b0cc;--violet:#6437f3;--cyan:#00c4e8}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{width:100%;height:100%;overflow:hidden}
body{margin:0;background:radial-gradient(circle at 80% -10%,#27205d 0,transparent 38%),radial-gradient(circle at 0 100%,#07334a 0,transparent 38%),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}
header{height:72px;padding:0 max(24px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #26304e80;background:#050818c7;backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:950;letter-spacing:.5px}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border:2px solid #7ce9ff;border-radius:12px;background:linear-gradient(135deg,var(--violet),var(--cyan));box-shadow:0 0 18px #5847ff}
.product,.eyebrow{color:#7ce9ff;font-size:11px;font-weight:850;letter-spacing:1.7px}
main{height:calc(100% - 72px);padding:22px max(28px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-bottom));overflow:hidden}
.entry-panel{height:100%;display:grid;align-content:center;grid-template-columns:minmax(270px,.9fr) minmax(420px,1.25fr);grid-template-areas:"intro form" "features features";gap:28px 60px;width:min(1120px,100%);margin:auto}
.intro{grid-area:intro}
.intro h1{max-width:560px;margin:9px 0 13px;font-size:clamp(34px,5vw,64px);line-height:.98;letter-spacing:-2px}
.intro p{max-width:540px;margin:0;color:var(--muted);font-size:18px;line-height:1.45}
.entry-form{grid-area:form;align-self:center;padding:26px;border:1px solid var(--line);border-radius:22px;background:#0a1028df;box-shadow:0 28px 90px #0007}
.entry-form label{display:block;margin-bottom:10px;color:#dbe3f7;font-size:14px;font-weight:750}
.input-row{display:grid;grid-template-columns:1fr 118px;gap:10px}
.input-row input,.catalog-toolbar input,.catalog-toolbar select{height:52px;padding:0 15px;border:1px solid var(--line);border-radius:13px;background:#121936;color:#fff;outline:none}
.input-row input:focus,.catalog-toolbar input:focus,.catalog-toolbar select:focus{border-color:#7077ff;box-shadow:0 0 0 3px #5d65ff25}
.input-row button{border:0;border-radius:13px;background:linear-gradient(100deg,var(--violet),#087eca);color:#fff;font-weight:850;cursor:pointer}
.input-row button:disabled{opacity:.55}
.status{min-height:24px;margin-top:12px;color:#92eaff;font-size:14px}
.status.error{color:#ff8296}
.features{grid-area:features;display:flex;justify-content:center;gap:34px;color:#aebad5;font-size:13px}
.catalog-panel{height:100%;overflow:hidden}
.catalog-toolbar{height:78px;display:grid;grid-template-columns:48px auto minmax(180px,1fr) minmax(180px,.7fr) auto;align-items:center;gap:14px}
.catalog-toolbar h2{margin:1px 0 0;font-size:25px}
.catalog-toolbar input,.catalog-toolbar select{height:44px}
.icon-button{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#111831;color:#fff;font-size:31px;line-height:1;cursor:pointer}
.channel-count{color:var(--muted);white-space:nowrap;font-size:13px}
.channel-grid{height:calc(100% - 78px);overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));align-content:start;gap:12px;padding:2px 4px 30px 0}
.channel-card{min-height:108px;padding:13px;display:grid;grid-template-columns:58px 1fr;align-items:center;gap:12px;border:1px solid #232d51;border-radius:15px;background:linear-gradient(135deg,#101731,#0a1026);color:#fff;text-align:left;cursor:pointer}
.channel-card:hover{border-color:#666ee8;transform:translateY(-1px)}
.channel-logo,.channel-fallback{width:58px;height:58px;border-radius:12px;object-fit:contain;background:#080d20}
.channel-fallback{display:grid;place-items:center;background:linear-gradient(135deg,#5d32d6,#087ba9);font-size:19px;font-weight:900}
.channel-name{display:block;overflow:hidden;font-size:14px;font-weight:800;line-height:1.25}
.channel-group{display:block;margin-top:6px;overflow:hidden;color:#98a6c7;font-size:11px;white-space:nowrap;text-overflow:ellipsis}
.empty-state{padding:50px;text-align:center;color:var(--muted)}
.browser-player{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#000}
.browser-player[hidden]{display:none}
.browser-player video{width:100%;height:100%;object-fit:contain}
.browser-player button{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));z-index:2;width:48px;height:48px;border:0;border-radius:50%;background:#181818d9;color:#fff;font-size:30px;cursor:pointer}
@media(max-width:800px){header{height:60px}
.product{display:none}
main{height:calc(100% - 60px);padding:16px 20px}
.entry-panel{grid-template-columns:1fr;grid-template-areas:"intro" "form" "features";gap:18px;align-content:center}
.intro{text-align:center}
.intro h1{margin-inline:auto;font-size:38px}
.intro p{margin-inline:auto;font-size:15px}
.entry-form{padding:18px}
.features{gap:12px;flex-wrap:wrap}
.catalog-toolbar{height:116px;grid-template-columns:44px 1fr auto}
.catalog-toolbar input,.catalog-toolbar select{grid-row:2}
.catalog-toolbar input{grid-column:1/3}
.catalog-toolbar select{grid-column:3}
.channel-grid{height:calc(100% - 116px)}
}
@media(max-height:430px) and (min-width:700px){header{height:54px}
main{height:calc(100% - 54px);padding-top:12px;padding-bottom:12px}
.entry-panel{gap:15px 38px}
.intro h1{font-size:40px}
.entry-form{padding:18px}
.features{font-size:11px}
.catalog-toolbar{height:64px}
.channel-grid{height:calc(100% - 64px);grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.channel-card{min-height:88px}
.channel-logo,.channel-fallback{width:48px;height:48px}
}
.saved-lists-link{display:block;margin:2px auto 0;padding:8px 4px;border:0;background:transparent;color:#8eeaff;font-size:14px;font-weight:750;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.saved-lists-panel{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:#02040dcc;backdrop-filter:blur(12px)}
.saved-lists-dialog{width:min(760px,100%);max-height:min(620px,100%);display:flex;flex-direction:column;padding:24px;border:1px solid #303a66;border-radius:22px;background:#0a1028;box-shadow:0 30px 100px #000b}
.saved-lists-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.saved-lists-heading h2{margin:4px 0 0;font-size:30px}
.saved-lists-close{width:44px;height:44px;flex:0 0 auto;border:1px solid #303a66;border-radius:12px;background:#151d3a;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.saved-lists-status{margin:18px 0;color:#a5b0cc}
.saved-lists-rows{min-height:80px;overflow:auto;display:grid;gap:10px;padding-right:3px}
.saved-list-row{width:100%;display:grid;grid-template-columns:1fr auto;gap:5px 16px;padding:15px 17px;border:1px solid #283258;border-radius:14px;background:linear-gradient(135deg,#111936,#0b1129);color:#fff;text-align:left;cursor:pointer}
.saved-list-row:hover{border-color:#6973ee}
.saved-list-name{overflow:hidden;font-size:16px;font-weight:850;white-space:nowrap;text-overflow:ellipsis}
.saved-list-date{grid-column:1;color:#9daaca;font-size:12px}
.saved-list-count{grid-column:2;grid-row:1/3;align-self:center;color:#86eaff;font-size:13px;white-space:nowrap}
@media(max-height:430px) and (min-width:700px){.saved-lists-dialog{max-height:94%;padding:17px}.saved-lists-heading h2{font-size:24px}.saved-lists-status{margin:9px 0}.saved-list-row{padding:11px 14px}}
.saved-list-item{position:relative}
.saved-list-row{padding-right:66px}
.saved-list-delete{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border:1px solid #69374c;border-radius:11px;background:#3a1624;color:#ff9cb0;font-size:25px;font-weight:800;line-height:1;cursor:pointer}
.saved-list-delete:hover{background:#5a1e32;color:#fff}
.saved-list-item.deleting{opacity:.48;pointer-events:none}
.browser-channel-name{position:absolute;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:2;max-width:70%;overflow:hidden;padding:9px 18px;border-radius:18px;background:#000b;color:#fff;font-size:17px;font-weight:800;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}