:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f0f0f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;padding:0}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--primary-color:#1a73e8;--secondary-color:#34a853;--background:#0f0f0f;--surface:#1a1a1a;--surface-hover:#252525;--text-primary:#fff;--text-secondary:#b3b3b3;--border:#333;--accent:#f44}#root{width:100%;min-height:100vh}.app{background:var(--background);flex-direction:column;min-height:100vh;display:flex}.app-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;padding:16px 24px;position:sticky;top:0}.header-content{justify-content:space-between;align-items:center;gap:24px;max-width:1400px;margin:0 auto;display:flex}.logo-section{flex-direction:column;align-items:flex-start;gap:4px;display:flex}.app-title{color:var(--text-primary);margin:0;font-size:24px;font-weight:700}.app-subtitle{color:var(--text-secondary);margin:0;font-size:13px}.app-main{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:32px 24px}.app-loading{min-height:100vh;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.spinner-large{border:4px solid #1a73e833;border-top-color:var(--primary-color);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.welcome-section{justify-content:center;align-items:center;min-height:calc(100vh - 200px);display:flex}.welcome-content{text-align:center;flex-direction:column;align-items:center;gap:24px;max-width:600px;display:flex}.welcome-icon{font-size:80px}.welcome-content h2{color:var(--text-primary);margin:0;font-size:32px;font-weight:700}.welcome-content>p{color:var(--text-secondary);margin:0;font-size:16px}.features{flex-direction:column;gap:16px;width:100%;margin-top:24px;display:flex}.feature{background:var(--surface);border:1px solid var(--border);text-align:left;color:var(--text-primary);border-radius:12px;align-items:center;gap:16px;padding:16px 24px;font-size:15px;display:flex}.feature span:first-child{flex-shrink:0;font-size:32px}.env-warning{color:var(--accent,#f44);margin-top:12px;font-weight:600}.logout-btn{border:1px solid var(--accent,#f44);color:var(--accent,#f44);cursor:pointer;background:0 0;border-radius:6px;padding:10px 20px;font-weight:600;transition:all .2s}.logout-btn:hover{background:var(--accent,#f44);color:#fff}.content-section{flex-direction:column;gap:32px;padding:20px 0;display:flex}@media (max-width:768px){.app-header{padding:12px 16px}.header-content{flex-direction:column;align-items:stretch}.logo-section{text-align:center;align-items:center}.app-title{font-size:20px}.app-subtitle{font-size:12px}.app-main{padding:20px 16px}.welcome-icon{font-size:60px}.welcome-content h2{font-size:24px}.feature{padding:12px 16px;font-size:14px}.feature span:first-child{font-size:24px}}.folder-listing-container{max-width:1000px;margin:0 auto;padding:20px}.user-info-bar{background:var(--surface);border:1px solid var(--border);border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:24px;padding:12px 16px;display:flex}.user-badge{color:var(--text-primary);font-size:14px;font-weight:600}.folder-form{margin-bottom:32px}.form-group{gap:12px;margin-bottom:12px;display:flex}.folder-input{background:var(--surface);border:2px solid var(--border);color:var(--text-primary);border-radius:8px;flex:1;padding:12px 16px;font-size:15px;transition:all .2s}.folder-input:focus{border-color:var(--primary-color);background:var(--background);outline:none}.folder-input.error{border-color:var(--accent)}.folder-input::placeholder{color:var(--text-secondary)}.btn-primary{background:var(--primary-color);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:8px;align-items:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:600;transition:all .2s;display:flex}.btn-primary:hover:not(:disabled){background:#1557b0;transform:translateY(-1px);box-shadow:0 4px 12px #1a73e84d}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.form-error{color:var(--accent);margin:8px 0 0;font-size:14px;font-weight:500}.spinner-small{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.6s linear infinite spin}.files-section{margin-top:32px}.section-header{border-bottom:2px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;display:flex}.section-header h2{color:var(--text-primary);margin:0;font-size:20px;font-weight:700}.file-count{color:var(--text-secondary);font-size:14px}.empty-state{text-align:center;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex}.empty-icon{opacity:.5;margin-bottom:12px;font-size:64px}.files-list{flex-direction:column;gap:24px;display:flex}.tree-view{gap:12px}.tree-list{flex-direction:column;gap:8px;margin:0;padding-left:0;list-style:none;display:flex}.tree-item{border-left:2px solid var(--border);padding-left:12px}.file-item-row{background:var(--background);border:1px solid #0000;border-radius:8px;align-items:center;gap:12px;padding:10px 12px;transition:all .2s;display:flex}.file-item-row.clickable{cursor:pointer}.file-item-row:hover{background:var(--surface-hover);border-color:var(--border);transform:translate(2px)}.file-item-row.clickable:hover{border-color:var(--primary-color);background:#1a73e81a;transform:translate(4px)}.file-group h3{color:var(--text-primary);border-bottom:1px solid var(--border);margin:0 0 12px;padding-bottom:8px;font-size:16px;font-weight:600}.file-group ul{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.file-item{background:var(--background);cursor:pointer;border:1px solid #0000;border-left:3px solid;border-radius:8px;align-items:center;gap:12px;padding:12px 16px;transition:all .2s;display:flex}.file-item:hover{background:var(--surface-hover);border-color:var(--border);transform:translate(4px)}.file-item.folder{border-left-color:#fbbf24}.file-item.video{border-left-color:#10b981}.file-item.other{border-left-color:#6b7280}.file-icon{flex-shrink:0;font-size:24px}.file-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.file-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:500;overflow:hidden}.file-name.completed{opacity:.7;text-decoration:line-through}.file-type{color:var(--text-secondary);font-size:13px}@media (max-width:768px){.form-group{flex-direction:column}.btn-primary{justify-content:center;width:100%}.section-header{flex-direction:column;align-items:flex-start;gap:8px}.file-item{padding:10px 12px}.file-icon{font-size:20px}.file-name{font-size:14px}.file-type{font-size:12px}}.local-player-overlay{z-index:1000;background-color:#000000f2;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.local-player-container{background-color:#1a1a1a;border-radius:8px;flex-direction:column;max-width:90vw;max-height:90vh;display:flex;overflow:hidden;box-shadow:0 10px 40px #000000e6}.local-player-header{background-color:#0d47a1;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.local-video-title{color:#fff;word-break:break-word;flex:1;margin:0;font-size:16px;font-weight:600}.local-video-source{color:#fffc;background-color:#ffffff1a;border-radius:4px;padding:4px 8px;font-size:12px}.local-header-actions{align-items:center;gap:8px;display:flex}.mark-completed-btn,.delete-cache-btn,.close-button{cursor:pointer;color:#fff;border:none;border-radius:4px;padding:6px 12px;font-size:14px;font-weight:500;transition:all .2s}.delete-cache-btn{background-color:#ff9800}.delete-cache-btn:hover{background-color:#fb8c00}.close-button{text-align:center;background-color:#f44336;min-width:32px;padding:6px 10px}.close-button:hover{background-color:#da190b}.local-video-wrapper{background-color:#000;max-width:100%;max-height:60vh;position:relative;overflow:hidden}.local-video-element{width:100%;height:100%;display:block}.local-video-controls-overlay{opacity:0;background-color:#0000;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.local-video-wrapper:hover .local-video-controls-overlay{opacity:1;background-color:#0000004d}.play-pause-btn{color:#fff;cursor:pointer;background-color:#fff3;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-size:28px;transition:all .2s;display:flex}.play-pause-btn:hover{background-color:#ffffff4d;transform:scale(1.1)}.local-video-controls{background-color:#2a2a2a;border-top:1px solid #444;padding:12px 16px}.progress-container{margin-bottom:12px}.progress-bar{appearance:none;cursor:pointer;background-color:#444;border-radius:2px;outline:none;width:100%;height:4px}.progress-bar::-webkit-slider-thumb{appearance:none;cursor:pointer;background-color:#1a73e8;border-radius:50%;width:12px;height:12px;transition:all .2s}.progress-bar::-webkit-slider-thumb:hover{background-color:#2196f3;transform:scale(1.3)}.progress-bar::-moz-range-thumb{cursor:pointer;background-color:#1a73e8;border:none;border-radius:50%;width:12px;height:12px;transition:all .2s}.progress-bar::-moz-range-thumb:hover{background-color:#2196f3;transform:scale(1.3)}.time-display{color:#aaa;text-align:right;gap:4px;margin-top:4px;font-size:12px;display:flex}.controls-bottom{justify-content:space-between;align-items:center;gap:16px;display:flex}.volume-control{color:#fff;align-items:center;gap:8px;display:flex}.volume-slider{appearance:none;cursor:pointer;background-color:#444;border-radius:2px;outline:none;width:80px;height:3px}.volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background-color:#1a73e8;border-radius:50%;width:10px;height:10px}.volume-slider::-moz-range-thumb{cursor:pointer;background-color:#1a73e8;border:none;border-radius:50%;width:10px;height:10px}.keyboard-hint{color:#aaa;text-align:right;font-size:11px}.keyboard-hint kbd{background-color:#444;border:1px solid #666;border-radius:3px;margin:0 2px;padding:2px 6px;font-family:monospace}@media (max-width:768px){.local-player-container{border-radius:0;max-width:100vw;max-height:100vh}.local-video-wrapper{max-height:50vh}.local-video-title{font-size:14px}.play-pause-btn{width:48px;height:48px;font-size:20px}.mark-completed-btn,.delete-cache-btn{padding:4px 8px;font-size:12px}.local-player-header{flex-direction:column;gap:8px}.local-header-actions{justify-content:flex-end;width:100%}}.video-player-overlay{z-index:1000;background:#000000f2;justify-content:center;align-items:center;padding:20px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.video-player-container{flex-direction:column;gap:16px;width:100%;max-width:1200px;animation:.3s slideUp;display:flex}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.video-player-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.video-title{color:#fff;text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0;font-size:18px;font-weight:600;overflow:hidden}.header-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.mark-completed-btn,.download-btn,.play-offline-btn{cursor:pointer;color:#fff;white-space:nowrap;background-color:#ff9800;border:none;border-radius:6px;padding:8px 12px;font-size:14px;font-weight:500;transition:all .2s}.mark-completed-btn{background-color:#4caf50}.mark-completed-btn:hover{background-color:#45a049;transform:scale(1.05)}.download-btn:hover,.play-offline-btn:hover{background-color:#fb8c00}.download-btn:disabled,.play-offline-btn:disabled{opacity:.6;cursor:not-allowed}.close-button{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:24px;transition:all .2s;display:flex}.close-button:hover{background:#f44336;transform:scale(1.05)}.download-progress{align-items:center;gap:8px;min-width:120px;display:flex}.progress-bar-small{background-color:#fff3;border-radius:2px;flex:1;height:3px;overflow:hidden}.progress-fill{background-color:#ff9800;border-radius:2px;height:100%;transition:width .2s}.progress-text{color:#fffc;text-align:right;min-width:30px;font-size:12px}.video-element{background:#000;border-radius:12px;outline:none;width:100%;max-height:calc(100vh - 160px)}.video-iframe{background:#000;border:none;border-radius:12px;width:100%;height:calc(100vh - 160px)}.video-error{color:#fca5a5;background:#ef44441a;border:1px solid #ef44444d;border-radius:8px;align-items:center;gap:12px;padding:16px 20px;display:flex}.error-icon{flex-shrink:0;font-size:24px}.video-error p{margin:0;font-size:14px;font-weight:500}.iframe-error-message{color:#fff;background:#ef44441a;border:2px solid #ef44444d;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:300px;padding:40px;display:flex}.iframe-error-message p{margin:0;font-size:16px;font-weight:500}.iframe-error-message .error-text{color:#ffffffb3;font-size:14px}.iframe-error-message button{color:#fff;cursor:pointer;background-color:#ff9800;border:none;border-radius:6px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s}.iframe-error-message button:hover:not(:disabled){background-color:#fb8c00}.iframe-error-message button:disabled{opacity:.6;cursor:not-allowed}.video-loading{background:#ffffff0d;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:40px;display:flex}.spinner{border:3px solid #fff3;border-top-color:#fff;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}.video-loading p{color:#ffffffb3;margin:0;font-size:14px}.video-controls-info{justify-content:center;padding-top:8px;display:flex}.video-hint{color:#ffffff80;text-align:center;margin:0;font-size:13px}.video-hint kbd{color:#fffc;background:#ffffff1a;border:1px solid #fff3;border-radius:4px;margin:0 2px;padding:2px 6px;font-family:monospace;font-size:12px;display:inline-block}@media (max-width:768px){.video-player-overlay{padding:12px}.video-title{font-size:16px}.close-button{width:36px;height:36px;font-size:20px}.video-element{max-height:calc(100vh - 140px)}.video-hint{font-size:12px}}