*{margin:0;padding:0;box-sizing:border-box}body{padding:0;font-family:Arial,sans-serif;transition:background .3s,color .3s}body.light{background:#f8f9fa;color:#333}body.dark{background:#121212;color:#e0e0e0}.title-bar{text-align:center;padding:0 10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;margin-bottom:0;border-radius:0;box-shadow:none;display:flex;justify-content:space-between;align-items:center}.title-right{display:flex;gap:12px;align-items:center}.title-stats{display:flex;gap:10px;align-items:center;font-size:12px;white-space:nowrap}.title-stats a{color:#fffffff2;text-decoration:none;font-weight:600}.title-stats a:hover{text-decoration:underline}.title-stats #busuanzi_container_site_pv,.title-stats #busuanzi_container_site_uv{color:#ffffffe6}.title-stats #busuanzi_value_site_pv,.title-stats #busuanzi_value_site_uv{font-weight:700}.title-controls{display:flex;gap:10px;align-items:center}.title-controls .control-group{margin:0}.title-controls .select-control{width:auto;padding:2px;font-size:12px}.title-separator{width:1px;height:20px;background-color:#ffffff4d;margin:0 10px}.title-bar .title-content{flex:1;text-align:center}.title-bar h1{font-size:1.5em;margin:0;font-weight:700}.title-bar p{font-size:.9em;margin:0;opacity:.9}.sidebar-toggle-btn{background:#ffffff4d;color:#fff;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .3s ease}.sidebar-toggle-btn:hover{background:#ffffff80;transform:scale(1.1)}.main-layout{position:relative;display:flex;gap:0;width:100%;max-width:100%;margin:0;padding:0}.player-area{width:80%;min-width:0;padding:0;margin-left:20%}.resize-handle{width:5px;background:transparent;cursor:ew-resize;height:100vh;position:fixed;left:20%;top:0;z-index:1001;transition:background .2s ease}.resize-handle:hover{background:#667eeacc}body.dark .resize-handle{background:transparent}body.dark .resize-handle:hover,body.resizing .resize-handle,body.dark.resizing .resize-handle{background:#667eeacc}.resize-handle i{display:none}.sidebar{width:20%;background:#fff;border-radius:0;box-shadow:none;overflow-y:auto;transition:transform .3s ease;transform:translate(0);position:fixed;left:0;top:0;height:100vh;z-index:1000;display:block;pointer-events:auto;padding:0;border-right:1px solid #eee}.sidebar.hidden{transform:translate(-100%)}.player-area{transition:none;min-width:0;flex:1}.main-layout{position:relative;display:flex;width:100%;max-width:100%;margin:0}body.player-align-left .player-wrap{margin:0!important}body.player-align-center .player-wrap{margin:0 auto!important}body.player-align-right .player-wrap{margin:0 0 0 auto!important}.sidebar-toggle{display:none}.history-header-top{display:flex;justify-content:flex-end;align-items:center;padding:8px;border-bottom:1px solid #eee;height:40px;background-color:#f5f5f5}body.dark .history-header-top{border-bottom-color:#444;background-color:#2a2a2a}.playlist-controls{display:flex;gap:5px;align-items:center}.playlist-controls button{margin-left:0;margin-right:5px}.playlist-select{padding:5px;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;font-size:12px}body.dark .playlist-select{background:#333;color:#fff;border-color:#555}.history-sidebar{margin:0;border-radius:0;height:100%;display:flex;flex-direction:column}.history-sidebar .log-body{flex:1;overflow-y:auto;max-height:none}body.dark .sidebar{background:#1e1e1e;box-shadow:0 2px 10px #0000004d}body.dark .sidebar-toggle{background:#3367d6;box-shadow:-2px 2px 5px #0000004d}body.dark .sidebar-toggle:hover{background:#2a56c6}.player-wrap{max-width:1200px;margin:0 auto;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a;transition:background .3s}body.light .player-wrap{background:#000}body.dark .player-wrap{background:#1e1e1e}.video-container{position:relative;touch-action:manipulation}video{width:100%;height:auto;display:block}.loading-mask{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;opacity:0;pointer-events:none;transition:opacity .3s}.loading-mask.show{opacity:1;pointer-events:all}.loading-mask .spinner{border:4px solid #f3f3f3;border-top:4px solid #4285f4;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-right:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.custom-controls{padding:15px;transition:background .3s}body.light .custom-controls{background:#1a1a1a;color:#fff}body.dark .custom-controls{background:#2d2d2d;color:#e0e0e0}.control-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.control-group{display:flex;gap:8px;align-items:center}.control-btn{padding:6px 10px;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:background .2s;position:relative;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}body.light .control-btn{background:#4285f4;color:#fff}body.light .control-btn:hover{background:#3367d6}body.dark .control-btn{background:#5c8ef7;color:#fff}body.dark .control-btn:hover{background:#4a7de8}.control-btn:disabled{background:#666;cursor:not-allowed;opacity:.7}.url-input-wrapper{position:relative;flex:1;min-width:200px}#url-input{width:100%;padding:8px 32px 8px 12px;border:1px solid #333;border-radius:4px;outline:none;transition:border .2s,background .3s,color .3s}body.light #url-input{background:#222;color:#fff;border-color:#333}body.dark #url-input{background:#333;color:#e0e0e0;border-color:#444}#url-input:focus{border-color:#4285f4}.url-clear-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:24px;height:24px;padding:0;border:none;border-radius:50%;background:#fff3;color:#fff;cursor:pointer;font-size:12px;opacity:0;transition:opacity .2s ease,background .2s ease;display:flex;align-items:center;justify-content:center;pointer-events:none}body.dark .url-clear-btn{background:#ffffff1a}.url-clear-btn.visible{opacity:1;pointer-events:all}.url-clear-btn:hover{background:#ff000080}.progress-wrap{flex:1;min-width:200px;height:6px;border-radius:3px;cursor:pointer;position:relative;transition:background .3s}body.light .progress-wrap{background:#333}body.dark .progress-wrap{background:#444}.progress-bar{height:100%;border-radius:3px;transition:background .3s}body.light .progress-bar{background:#4285f4}body.dark .progress-bar{background:#5c8ef7}.progress-loaded{position:absolute;top:0;left:0;height:100%;border-radius:3px;transition:background .3s}body.light .progress-loaded{background:#555}body.dark .progress-loaded{background:#666}.select-control{padding:6px 10px;border:1px solid #333;border-radius:4px;outline:none;font-size:14px;transition:background .3s,color .3s,border .2s}body.light .select-control{background:#222;color:#fff;border-color:#333}body.dark .select-control{background:#333;color:#e0e0e0;border-color:#444}.select-control:focus{border-color:#4285f4}.align-controls{display:flex;gap:4px}.align-btn{padding:6px;width:32px;height:32px;border:1px solid #333;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}body.light .align-btn{background:#222;color:#fff;border-color:#333}body.light .align-btn:hover{background:#333;border-color:#4285f4}body.light .align-btn.active{background:#4285f4;border-color:#4285f4}body.dark .align-btn{background:#333;color:#e0e0e0;border-color:#444}body.dark .align-btn:hover{background:#444;border-color:#5c8ef7}body.dark .align-btn.active{background:#5c8ef7;border-color:#5c8ef7}body.player-align-left .player-wrap{margin:0}body.player-align-center .player-wrap{margin:0 auto}body.player-align-right .player-wrap{margin:0 0 0 auto}.volume-wrap{display:flex;align-items:center;gap:8px;min-width:120px}.volume-slider{width:80px;height:4px;border-radius:2px;outline:none;-webkit-appearance:none;transition:background .3s}body.light .volume-slider{background:#333}body.dark .volume-slider{background:#444}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;cursor:pointer;transition:background .3s}body.light .volume-slider::-webkit-slider-thumb{background:#4285f4}body.dark .volume-slider::-webkit-slider-thumb{background:#5c8ef7}.status-tip{position:absolute;bottom:15px;left:50%;transform:translate(-50%);padding:10px 20px;border-radius:4px;font-size:14px;display:none;z-index:100;max-width:80%;text-align:center;box-shadow:0 2px 8px #0000004d}.status-tip.show{display:block}.status-tip.success{background:#e8f5e9;color:#2e7d32}.status-tip.loading{background:#e3f2fd;color:#1976d2}.status-tip.error{background:#ffebee;color:#c62828}.status-tip.offline{background:#fff3e0;color:#f57c00}body.dark .status-tip.success{background:#1e3a20;color:#4ade80}body.dark .status-tip.loading{background:#1a365d;color:#60a5fa}body.dark .status-tip.error{background:#451a1a;color:#f87171}body.dark .status-tip.offline{background:#43301a;color:#fbbf24}.screenshot-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:none;align-items:center;justify-content:center;z-index:9999;padding:20px}.screenshot-modal.show{display:flex}.screenshot-content{max-width:90%;max-height:90%;position:relative}.screenshot-img{max-width:100%;max-height:80vh;border:2px solid #fff;border-radius:4px}.screenshot-close{position:absolute;top:-20px;right:-20px;width:40px;height:40px;background:#f44;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:18px}.screenshot-download{margin-top:15px;padding:8px 20px;background:#4285f4;color:#fff;border:none;border-radius:4px;cursor:pointer}.shortcut-tip{position:fixed;bottom:20px;right:20px;border-radius:4px;font-size:12px;z-index:999;display:none;padding:10px 15px;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.shortcut-tip.show{display:block}body.light .shortcut-tip{background:#000c;color:#fff}body.dark .shortcut-tip{background:#1e1e1ee6;color:#e0e0e0}.shortcut-tip ul{list-style:none;margin:5px 0}.shortcut-tip li{margin:3px 0;display:flex;justify-content:space-between;gap:10px}.shortcut-tip .key{font-weight:700;transition:color .3s}body.light .shortcut-tip .key{color:#4285f4}body.dark .shortcut-tip .key{color:#5c8ef7}.log-panel{max-width:1200px;margin:15px auto 0;border-radius:8px;overflow:hidden;font-size:12px;transition:background .3s,color .3s}body.player-align-left .log-panel{margin:15px 0 0}body.player-align-center .log-panel{margin:15px auto 0}body.player-align-right .log-panel{margin:15px 0 0 auto}body.light .log-panel{background:#f0f0f0;color:#333}body.dark .log-panel{background:#2d2d2d;color:#e0e0e0}.log-header{padding:0;justify-content:space-between;align-items:center;cursor:pointer;transition:background .2s}.history-header-actions{align-items:center}.sort-controls{display:flex;align-items:center;gap:4px;font-size:12px}.sort-btn{position:relative;padding:6px 10px;border:1px solid #333;border-radius:4px;cursor:pointer;font-size:11px;transition:all .2s ease;background:transparent;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;color:#333}.sort-btn:after{content:attr(data-text);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:10px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;margin-bottom:5px;z-index:1000}.sort-btn:hover:after{opacity:1;visibility:visible}body.light .sort-btn{color:#fff;border-color:#333}body.light .sort-btn:hover{background:#333;border-color:#4285f4}body.light .sort-btn.active{background:#4285f4;border-color:#4285f4}body.dark .sort-btn{color:#e0e0e0;border-color:#444}body.dark .sort-btn:hover{background:#444;border-color:#5c8ef7}body.dark .sort-btn.active{background:#5c8ef7;border-color:#5c8ef7}body.light .log-header{background:#e0e0e0}body.dark .log-header{background:#3d3d3d}.log-body{padding:0;max-height:200px;overflow-y:auto;display:none}.log-body.show{display:block}.log-item{margin:3px 0;padding:2px 0;border-bottom:1px solid #eee}body.dark .log-item{border-bottom:1px solid #444}.log-time{color:#888;margin-right:8px}.log-type-info{color:#4285f4}.log-type-error{color:#f44}.log-type-success{color:#2e7d32}.log-clear{position:relative;font-size:11px;padding:4px 8px;border:none;border-radius:3px;cursor:pointer;background:#ddd;color:#333;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.log-clear:after{content:attr(data-text);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:10px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;margin-bottom:5px;z-index:1000}.log-clear:hover:after{opacity:1;visibility:visible}.history-item{display:flex;justify-content:space-between;align-items:flex-start;padding:16px;border-bottom:2px solid #f0f0f0;transition:all .2s ease;margin:0;position:relative;background:#fff}body.dark .history-item{border-bottom:2px solid #2a2a2a;background:#1e1e1e}.history-item:not(:last-child){margin-bottom:0}.history-item.current-playing{border-bottom:2px solid #4285f4}.history-item.current-playing{background:#4285f41a!important;border-left:3px solid #4285f4;box-shadow:inset 0 0 10px #4285f41a}body.dark .history-item.current-playing{background:#4285f433!important}.history-item:hover,body.dark .history-item:hover{background:#ffffff0d}.history-item-content{flex:1;min-width:0}.history-item-title-container{display:flex;align-items:center;gap:6px;margin-bottom:4px}.history-item-title{font-weight:700;font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-item-edit{width:20px;height:20px;padding:0;border:none;border-radius:3px;background:transparent;color:#888;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease;opacity:0}.history-item:hover .history-item-edit{opacity:1}.history-item-edit:hover{background:#0000001a;color:#4285f4}body.dark .history-item-edit{color:#aaa}body.dark .history-item-edit:hover{background:#ffffff1a;color:#5c8ef7}.history-item-meta{font-size:11px;color:#888;display:flex;gap:12px;margin-bottom:4px;flex-wrap:wrap}.history-item-playcount{color:#4285f4;font-weight:700}body.dark .history-item-playcount{color:#5c8ef7}body.dark .history-item-meta{color:#aaa}.history-item-url{font-size:10px;color:#666;word-break:break-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.dark .history-item-url{color:#888}.history-item-actions{display:flex;gap:6px;margin-left:10px}.history-item-play,.history-item-delete{padding:4px 8px;border:none;border-radius:3px;cursor:pointer;font-size:10px;transition:background .2s ease;display:flex;align-items:center;justify-content:center}.history-item-play{background:#4285f4;color:#fff}body.light .history-item-play:hover{background:#3367d6}body.dark .history-item-play:hover{background:#3c78e7}.history-item-delete{background:#f44336;color:#fff}body.light .history-item-delete:hover{background:#d32f2f}body.dark .history-item-delete:hover{background:#e53935}.history-empty{text-align:center;color:#888;font-style:italic;padding:20px 0}body.dark .history-empty{color:#aaa}.center-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:#4285f4cc;color:#fff;border:2px solid white;border-radius:50%;font-size:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:10;opacity:1;box-shadow:0 0 20px #4285f480}.center-play-btn:hover{background:#4285f4;transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 30px #4285f4cc}.center-play-btn:active{transform:translate(-50%,-50%) scale(.95)}.center-play-btn.hide{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}.center-play-btn i{margin-left:6px;text-shadow:0 0 10px rgba(255,255,255,.5)}.touch-tip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000b3;color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}.touch-tip.show{opacity:1}.control-btn.icon-btn{padding:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:16px}.control-btn.icon-btn:hover{transform:scale(1.1);transition:transform .2s,background .2s}.control-btn span{opacity:0;transition:opacity .2s ease;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:4px 8px;border-radius:3px;font-size:10px;white-space:nowrap;margin-bottom:5px;pointer-events:none;z-index:10}.control-btn:hover span{opacity:1}#load-play-btn{background:#4285f4;color:#fff;border:none;padding:6px 10px;border-radius:4px;cursor:pointer;font-size:12px;transition:background .2s;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}body.light #load-play-btn:hover{background:#3367d6}body.dark #load-play-btn{background:#5c8ef7}body.dark #load-play-btn:hover{background:#4a7de8}#load-play-btn:disabled{background:#666;cursor:not-allowed;opacity:.7}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#00000080}.modal.show{display:block}.modal-content{background-color:#fff;margin:15% auto;padding:0;border-radius:8px;width:80%;max-width:600px;box-shadow:0 4px 20px #0003;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.modal-header{padding:16px 20px;background-color:#4285f4;color:#fff;border-radius:8px 8px 0 0;display:flex;justify-content:space-between;align-items:center}.modal-header h2{margin:0;font-size:20px;font-weight:600}.modal-close{background:none;border:none;color:#fff;font-size:28px;font-weight:700;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.modal-close:hover{background-color:#fff3}.modal-body{padding:20px;line-height:1.6}.help-section{margin-bottom:24px}.help-section:last-child{margin-bottom:0}.help-section h3{margin:0 0 12px;color:#333;font-size:16px;font-weight:600}.help-section p{margin:0 0 12px;color:#666}.help-section ul{margin:0;padding-left:20px;color:#666}.help-section li{margin-bottom:8px}.help-section a{color:#4285f4;text-decoration:none;transition:color .2s}.help-section a:hover{color:#3367d6;text-decoration:underline}body.dark .modal-content{background-color:#2d2d2d;box-shadow:0 4px 20px #00000080}body.dark .help-section h3{color:#fff}body.dark .help-section p,body.dark .help-section li{color:#ccc}body.dark .help-section a{color:#5c8ef7}body.dark .help-section a:hover{color:#4a7de8}.playlist-modal-content{width:90%;max-width:900px;margin:8% auto}.playlist-import-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.playlist-action-btn{padding:8px 10px;border:none;border-radius:6px;cursor:pointer;font-size:13px;background:#4285f4;color:#fff}.playlist-action-btn:hover{background:#3367d6}body.dark .playlist-action-btn{background:#5c8ef7}body.dark .playlist-action-btn:hover{background:#4a7de8}.playlist-textarea{width:100%;min-height:120px;resize:vertical;border:1px solid #ddd;border-radius:6px;padding:10px;font-size:13px;outline:none;background:#fff;color:#333}body.dark .playlist-textarea{background:#1f1f1f;color:#e0e0e0;border-color:#444}.playlist-list{margin-top:12px;max-height:50vh;overflow:auto;border-top:1px solid #eee;padding-top:12px}body.dark .playlist-list{border-top-color:#444}.playlist-item{display:flex;justify-content:space-between;gap:10px;padding:10px;border-bottom:1px solid #eee}body.dark .playlist-item{border-bottom-color:#333}.playlist-item-title{font-weight:600;color:#222;word-break:break-word}body.dark .playlist-item-title{color:#fff}.playlist-item-url{margin-top:6px;font-size:12px;color:#666;word-break:break-all}body.dark .playlist-item-url{color:#aaa}.playlist-item-meta{margin-top:4px;font-size:12px;color:#888}body.dark .playlist-item-meta{color:#999}.playlist-item-actions{display:flex;align-items:center;flex-shrink:0}.playlist-item-play{width:34px;height:34px;border:none;border-radius:6px;cursor:pointer;background:#4285f4;color:#fff;display:inline-flex;align-items:center;justify-content:center}.playlist-item-play:hover{background:#3367d6}body.dark .playlist-item-play{background:#5c8ef7}body.dark .playlist-item-play:hover{background:#4a7de8}.site-footer{max-width:1200px;margin:15px auto 0;padding:10px 12px;border-radius:8px;overflow:hidden;font-size:12px;transition:background .3s,color .3s;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px}body.light .site-footer{background:#f0f0f0;color:#333}body.dark .site-footer{background:#2d2d2d;color:#e0e0e0}.site-footer a{text-decoration:none}body.light .site-footer a{color:#4285f4}body.dark .site-footer a{color:#5c8ef7}.site-footer a:hover{text-decoration:underline}#busuanzi_value_site_pv,#busuanzi_value_site_uv{font-weight:600}