:root{--color-bg: #f8f9fa;--color-bg-card: #fff;--color-border: #e5e7eb;--color-text: #202124;--color-text-light: #757575;--color-primary: #ff0000;--color-sidebar: #f3f5f7;--color-sidebar-border: #eee;--color-shadow: 0 2px 12px 0 rgba(32, 37, 83, .04);--color-btn: #ff0000;--color-btn-hover:#e52d27;--color-selected-bg: #fff3f0;--color-selected-border: #ff0000;--item-hover-bg: #f5f5f5;--notice-bg: #ffecec;--color-primary-rgb: 255, 0, 0}html,body{height:100%;margin:0;overflow:hidden;background:var(--color-bg);color:var(--color-text);font-family:Roboto,Noto,Noto Sans SC,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}#root{display:flex;flex-direction:column;height:100vh;width:100%;background:inherit;color:inherit}.app-root{width:100%;flex-grow:1;display:flex;flex-direction:column;overflow:hidden}.app-header{width:100%;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-sizing:border-box;background:var(--color-bg-card);border-bottom:1px solid var(--color-border);flex-shrink:0}.app-title{font-size:1.3em;margin:0;color:var(--color-primary);font-weight:500}.main-flex{display:flex;gap:20px;flex-grow:1;min-height:0;padding:15px;box-sizing:border-box;overflow:hidden}#sidebar{width:320px;min-width:220px;max-width:400px;overflow-y:auto;background:var(--color-sidebar);border-right:1px solid var(--color-sidebar-border);box-shadow:2px 0 8px #20255308;box-sizing:border-box;display:flex;flex-direction:column;gap:15px;padding:16px;border-radius:8px}#sidebar h2{font-size:1.15em;color:var(--color-primary);border:none;padding:0;margin:0 0 5px;letter-spacing:.5px;font-weight:500}#channelArea{order:1}#status{order:2}#subscriptionArea{order:3}#addSubscriptionArea{order:4}#main{flex:1 1 0;min-width:0;background:var(--color-bg-card);padding:20px;position:relative;box-shadow:0 0 20px #1c587d0a;border-radius:18px;overflow:hidden}#videoArea{width:calc(100% - 40px);max-width:760px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-bg);border-radius:14px;box-shadow:var(--color-shadow);padding:16px;box-sizing:border-box}#videoArea>h3{margin-top:0;margin-bottom:10px;color:var(--color-text-light);font-weight:700;letter-spacing:.5px;font-size:1.1em;padding-bottom:5px;border-bottom:1px solid var(--color-border)}#videoContainer{width:100%;padding-top:56.25%;height:0;background:#111;border-radius:8px;overflow:hidden;position:relative}#videoPlayer{position:absolute;top:0;left:0;width:100%;height:100%;border:none;display:block;background:#000}#addSubscriptionArea,#subscriptionArea,#channelArea{background:var(--color-bg-card);border-radius:8px;box-shadow:var(--color-shadow);padding:16px;border:1px solid var(--color-border)}#subscriptionList,#channelList{list-style:none;padding:0;margin:0;max-height:200px;overflow-y:auto;border:1px solid var(--color-border);border-radius:6px}#subscriptionList li,#channelList li{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--color-border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .2s,color .2s,border-left-color .2s;display:flex;justify-content:space-between;align-items:center;font-size:.95em;border-left:3px solid transparent}#subscriptionList li span,#channelList li span{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:6px}#subscriptionList li:last-child,#channelList li:last-child{border-bottom:none}#subscriptionList li.selected,#channelList li.selected{background:var(--color-selected-bg);border-left-color:var(--color-selected-border);color:var(--color-primary);font-weight:500}#subscriptionList li:hover,#channelList li:hover{background-color:var(--item-hover-bg);color:var(--color-primary)}input[type=url],input[type=search],input[type=text],textarea,select{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:6px;padding:10px;font-size:1em;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .2s;width:100%}input[type=url]:focus,input[type=search]:focus,input[type=text]:focus,textarea:focus,select:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.2);outline:none}button,input[type=button],input[type=submit]{background:var(--color-btn);color:#fff;border-radius:6px;font-weight:600;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border:none;transition:background .16s,box-shadow .2s;cursor:pointer;padding:9px 15px;font-size:.95em;text-align:center}button:hover,input[type=button]:hover,input[type=submit]:hover{background:var(--color-btn-hover);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}button:disabled,input[type=button]:disabled,input[type=submit]:disabled{background:#ccc;color:#888;cursor:not-allowed;box-shadow:none}#addSubscriptionArea button{width:100%;margin-top:5px}#subscriptionList li button{margin-left:10px;background:#fca5a5;color:#b91c1c;font-size:.85em;padding:4px 8px;border-radius:5px;font-weight:500;box-shadow:none}#subscriptionList li button:hover{background:#ef4444;color:#fff}#status{padding:10px 12px;background:var(--notice-bg);border-radius:6px;color:#b91c1c;font-size:.9em;line-height:1.4;border:1px solid #fecaca;min-height:unset;max-width:100%;overflow-wrap:break-word;box-sizing:border-box;font-weight:500}#status.error{color:#7f1d1d;background:#fee2e2;border-color:#fecaca}#status.success{color:#14532d;background:#dcfce7;border-color:#bbf7d0}#status.loading{color:#1e40af;background:#dbeafe;border-color:#bfdbfe;font-style:italic}#status.warning{color:#854d0e;background:#fef3c7;border-color:#fde68a}body.dark{--color-bg: #111827;--color-bg-card: #1f2937;--color-border: #374151;--color-text: #f3f4f6;--color-text-light: #9ca3af;--color-primary: #f87171;--color-sidebar: #1f2937;--color-sidebar-border: #374151;--color-shadow: 0 4px 18px 0 rgba(0, 0, 0, .25);--color-btn: #f87171;--color-btn-hover:#ef4444;--color-selected-bg: #374151;--color-selected-border: #f87171;--item-hover-bg: #374151;--notice-bg: #3f3030;--color-primary-rgb: 248, 113, 113}body.dark,body.dark #root{background:var(--color-bg)!important;color:var(--color-text)!important}body.dark #main,body.dark #sidebar,body.dark #addSubscriptionArea,body.dark #subscriptionArea,body.dark #channelArea,body.dark #videoArea{background:var(--color-bg-card);color:var(--color-text);box-shadow:var(--color-shadow);border-color:var(--color-border)}body.dark #sidebar{border-right-color:var(--color-sidebar-border)}body.dark h2,body.dark h3,body.dark #videoArea>h3{color:var(--color-text-light);border-bottom-color:var(--color-border)}body.dark #videoContainer{background:#000}body.dark input,body.dark textarea,body.dark select{background:#374151!important;color:var(--color-text)!important;border-color:#4b5563!important}body.dark input::placeholder,body.dark textarea::placeholder{color:#6b7280!important}body.dark input:focus,body.dark textarea:focus,body.dark select:focus{background-color:#4b5563!important;border-color:var(--color-primary)!important;box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.3)!important}body.dark button,body.dark input[type=button],body.dark input[type=submit]{background:var(--color-btn)!important;color:#111827!important;box-shadow:0 1px 3px #0000004d,0 1px 2px #0003}body.dark button:hover,body.dark input[type=button]:hover,body.dark input[type=submit]:hover{background:var(--color-btn-hover)!important;color:#fff!important;box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003}body.dark button:disabled,body.dark input[type=button]:disabled,body.dark input[type=submit]:disabled{background:#374151!important;color:#6b7280!important;box-shadow:none!important}body.dark #subscriptionList li button{background:#7f1d1d;color:#fecaca}body.dark #subscriptionList li button:hover{background:#b91c1c;color:#fee2e2}body.dark #status{border-color:transparent}body.dark #status.error{color:#fda4af;background:#5f2020}body.dark #status.success{color:#a7f3d0;background:#1e4632}body.dark #status.loading{color:#bfdbfe;background:#2c3a6e}body.dark #status.warning{color:#fde68a;background:#6e5223}body.light{--color-bg: #f8f9fa;--color-bg-card: #fff;--color-border: #e5e7eb;--color-text: #202124;--color-text-light: #757575;--color-primary: #ff0000;--color-sidebar: #f3f5f7;--color-sidebar-border: #eee;--color-shadow: 0 2px 12px 0 rgba(32, 37, 83, .04);--color-btn: #ff0000;--color-btn-hover:#e52d27;--color-selected-bg: #fff3f0;--color-selected-border: #ff0000;--item-hover-bg: #f5f5f5;--notice-bg: #ffecec;--color-primary-rgb: 255, 0, 0}@media (max-width: 768px){html,body{height:auto;overflow:auto}#root,.app-root{height:auto;min-height:100vh;display:block;overflow:visible}.main-flex{flex-direction:column;height:auto;min-height:unset;flex-grow:unset;overflow:visible;padding:10px;gap:15px}#main{order:1;width:100%;height:auto;overflow:visible;background:transparent;padding:0;display:block;position:static;border-radius:0;box-shadow:none}#sidebar{order:2;width:100%;height:auto;overflow:visible;background:transparent;border-right:none;padding:0;border-radius:0;box-shadow:none}#status{order:2;width:100%;margin:5px 0 0}#channelArea{order:1;width:100%;margin:0}#subscriptionArea{order:3;width:100%;margin:0}#addSubscriptionArea{order:4;width:100%;margin:0}#videoArea{width:100%;max-width:100%;position:static;transform:none;background-color:var(--color-bg-card);border-radius:8px;box-shadow:var(--color-shadow);padding:0;margin-bottom:15px;box-sizing:border-box}#videoArea>h3{padding:10px 15px 8px;margin-bottom:0;border-bottom:1px solid var(--color-border);font-size:1.05em;background-color:#00000005;border-radius:8px 8px 0 0}body.dark #videoArea>h3{background-color:#ffffff08}#videoContainer{width:100%;padding-top:56.25%;height:0;background-color:#000;border-radius:8px;overflow:hidden;position:relative}#addSubscriptionArea,#subscriptionArea,#channelArea{background-color:var(--color-bg-card);padding:15px;border-radius:8px;box-shadow:var(--color-shadow);width:100%;box-sizing:border-box;border:1px solid var(--color-border)}#subscriptionList,#channelList{max-height:250px}}.theme-switcher{position:relative}.theme-btn{background:transparent;border:none;font-size:20px;cursor:pointer;color:var(--color-text-light);line-height:1;padding:6px;border-radius:50%;transition:background-color .2s,color .2s}.theme-btn:hover{background-color:var(--item-hover-bg);color:var(--color-text)}.theme-menu{position:absolute;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px 0;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:100;min-width:150px}body.dark .theme-menu{box-shadow:0 4px 12px #0000004d}.theme-menu li{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:14px;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s}.theme-menu li .check{width:1.2em;text-align:center;font-size:.9em;opacity:0;transition:opacity .2s;color:var(--color-primary)}.theme-menu li.active .check{opacity:1}.theme-menu li.active{font-weight:500;color:var(--color-primary)}.theme-menu li:hover{background:var(--item-hover-bg);color:var(--color-primary)}