:root{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{margin:0}.header{background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.2);padding:20px 0}.header div{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:15px}.header div h1{color:#fff;margin:0;font-size:28px;font-weight:600;letter-spacing:-.5px}.main-window{max-width:1200px;margin:0 auto;padding:40px 20px}.main-window .video-src-grid{display:grid;grid-template-columns:2fr 1fr;gap:30px;align-items:start}@media (max-width: 768px){.main-window .video-src-grid{grid-template-columns:1fr}}.video-source{background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:40px;margin-bottom:30px;border:1px solid rgba(255,255,255,.2);text-align:center}.video-source h2{color:#fff;margin-bottom:30px;font-size:24px;font-weight:500}.video-source .dual-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:30px}.video-source .dual-grid .youtube-col{background:#ffffff1a;border-radius:16px;padding:30px;border:1px solid rgba(255,255,255,.2);transition:all .3s ease;cursor:pointer}.video-source .dual-grid .youtube-col h3{color:#fff;margin-bottom:15px;font-size:18px}.video-source .dual-grid .youtube-col input{width:90%;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:#ffffff1a;color:#fff;font-size:14px;margin-bottom:15px;outline:none}.video-source .dual-grid .youtube-col button{color:#fff;border:none;padding:12px 24px;border-radius:12px;font-size:14px;font-weight:500;transition:all .3s ease}.video-source .dual-grid .file-upload{background:#ffffff1a;border-radius:16px;padding:30px;border:1px solid rgba(255,255,255,.2);transition:all .3s ease;cursor:pointer}.video-source .dual-grid .file-upload h3{color:#fff;margin-bottom:15px;font-size:18px}.video-source .dual-grid .file-upload p{color:#fffc;margin-bottom:20px;font-size:14px}.video-source .dual-grid .file-upload .choose-file{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-size:14px;font-weight:500;display:inline-block}.left-col{background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:30px;border:1px solid rgba(255,255,255,.2)}.left-col .video-player{position:relative;border-radius:16px;overflow:hidden;margin-bottom:20px;box-shadow:0 20px 40px #0000004d}.left-col .video-player div#youtube-player{width:100%;height:400px;background:#000}.left-col .video-player video{width:100%;height:400px;object-fit:contain;background:#000}.video-control{display:flex;align-items:center;gap:15px;background:#ffffff1a;padding:15px 20px;border-radius:12px;margin-bottom:20px}.video-control button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;width:45px;height:45px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.video-control div{display:flex;align-items:center;gap:10px;flex:1;color:#fff}.annotation-button{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;padding:15px 30px;border-radius:12px;cursor:pointer;font-size:16px;font-weight:500;display:flex;align-items:center;gap:10px;transition:all .3s ease;width:100%;justify-content:center}.right-col{background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;border:1px solid rgba(255,255,255,.2);height:fit-content;max-height:600px;display:flex;flex-direction:column}.right-col .anno-panel-header{padding:25px 30px;border-bottom:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:space-between}.right-col .anno-panel-header h3{color:#fff;margin:0;font-size:20px;font-weight:500}.right-col .anno-panel-header button{border:none;border-radius:8px;padding:8px;transition:all .3s ease}.right-col .anno-panel-body{flex:1;overflow-y:auto;padding:20px 30px}.right-col .anno-panel-body .message{text-align:center;color:#fff9;padding:40px 20px;font-size:14px}.right-col .anno-panel-body .anno-list{display:flex;flex-direction:column;gap:15px}.right-col .anno-panel-body .anno-list .single-annotate{border-radius:12px;padding:15px;border:1px solid rgba(255,255,255,.2);transition:all .3s ease;cursor:pointer}.single-annotate .anno-options{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.single-annotate .anno-options .time{color:#4facfe;font-size:12px;font-weight:500;background:#4facfe33;padding:4px 8px;border-radius:6px}.single-annotate .anno-options .right-buttons{display:flex;gap:5px}.single-annotate .anno-options .right-buttons .edit-button,.single-annotate .anno-options .right-buttons .delete-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .3s ease}.single-annotate input{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:8px;color:#fff;font-size:14px;width:96%;outline:none}.single-annotate p.white-text{color:#fff;margin:0;font-size:14px;line-height:1.4}.modal-background{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-background .modal-box{background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:30px;border:1px solid rgba(255,255,255,.2);width:90%;max-width:500px}.modal-background .modal-box h3{color:#fff;margin-bottom:20px;font-size:20px;font-weight:500}.modal-background .modal-box textarea{width:93%;height:120px;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:15px;color:#fff;font-size:14px;resize:vertical;outline:none;margin-bottom:20px;font-family:inherit}.modal-background .modal-box .button-action{display:flex;gap:15px;justify-content:flex-end}.modal-background .modal-box .button-action .cancel-button{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3);padding:12px 24px;border-radius:12px;cursor:pointer;font-size:14px;transition:all .3s ease}.modal-background .modal-box .button-action .add-anno-button{color:#fff;border:none;padding:12px 24px;border-radius:12px;font-size:14px;font-weight:500;transition:all .3s ease}