*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f5}.app{min-height:100vh;padding:2rem}.container{max-width:800px;margin:0 auto;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 2px 4px #0000001a}h1{color:#333;margin-bottom:2rem;text-align:center}h2{color:#555;font-size:1.5rem;margin-bottom:1rem}.tabs{display:flex;gap:0;margin-bottom:2rem;border-bottom:2px solid #e0e0e0}.tab{flex:1;padding:1rem;background:transparent;border:none;border-bottom:3px solid transparent;font-size:1rem;font-weight:500;color:#666;cursor:pointer;transition:all .3s;margin-bottom:-2px}.tab.active{color:#46b84d;border-bottom-color:#4caf50}.tab:hover{background-color:#9b94940d}.tab-content{min-height:400px}.submit-tab,.history-tab{animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.video-form{margin-bottom:2rem}.form-group{margin-bottom:1rem}label{display:block;margin-bottom:.5rem;color:#555;font-weight:500}input[type=text]{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .3s}input[type=text]:focus{outline:none;border-color:#4caf50}button{background-color:#4caf50;color:#fff;padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .3s}button:hover:not(:disabled){background-color:#45a049}button:disabled{background-color:#ccc;cursor:not-allowed}.message{padding:1rem;border-radius:4px;margin-bottom:1rem}.message.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.message.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.videos-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.refresh-btn{background-color:#2196f3;font-size:.9rem;padding:.5rem 1rem;transition:all .2s}.refresh-btn:hover{transform:translateY(-2px);box-shadow:0 2px 8px #2196f34d}.no-videos{text-align:center;color:#999;padding:2rem}.videos-list{display:flex;flex-direction:column;gap:1rem}.video-card{display:flex;gap:1rem;padding:1rem;border:1px solid #ddd;border-radius:4px;background:#fafafa;cursor:pointer;transition:all .2s}.video-card:hover{background:#f0f0f0;border-color:#4caf50;box-shadow:0 2px 8px #0000001a}.video-thumbnail{flex-shrink:0;width:120px;height:80px;background:#000;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.video-thumbnail video{width:100%;height:100%;object-fit:cover}.video-details{flex:1;display:flex;flex-direction:column;min-width:0}.video-info{display:flex;justify-content:flex-start;margin-bottom:.5rem}.video-status{padding:.25rem .75rem;border-radius:12px;font-size:.85rem;font-weight:500}.status-pending{background-color:#fff3cd;color:#856404}.status-processing{background-color:#cfe2ff;color:#084298}.status-completed{background-color:#d1e7dd;color:#0f5132}.status-failed{background-color:#f8d7da;color:#842029}.video-title{color:#333;font-weight:600;font-size:1rem;margin-bottom:.5rem;word-break:break-word}.video-date{color:#999;font-size:.85rem}.video-actions{display:flex;flex-direction:column;gap:.5rem;align-self:center}.queries-btn{background-color:#2196f3;color:#fff;padding:.5rem 1rem;font-size:.9rem;white-space:nowrap;border:none;border-radius:4px;cursor:pointer;transition:all .2s}.queries-btn:hover{transform:translateY(-2px);box-shadow:0 2px 8px #2196f34d}.video-actions .delete-btn{background-color:#f44336;color:#fff;padding:.5rem 1rem;font-size:.9rem;white-space:nowrap}.video-actions .delete-btn:hover{transform:translateY(-2px);box-shadow:0 2px 8px #f443364d}.queries-tab{animation:fadeIn .3s}.queries-header{margin-bottom:2rem}.back-btn{background-color:#666;margin-bottom:1rem;padding:.5rem 1rem;font-size:.9rem;transition:all .2s}.back-btn:hover{transform:translateY(-2px);box-shadow:0 2px 8px #6666664d}.query-form{margin-bottom:2rem;padding:1.5rem;background:#f9f9f9;border-radius:8px;border:1px solid #ddd}.query-form textarea{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;font-family:inherit;resize:vertical;transition:border-color .3s}.query-form textarea:focus{outline:none;border-color:#4caf50}.queries-list h3{color:#555;font-size:1.2rem;margin-bottom:1rem}.no-queries{text-align:center;color:#999;padding:2rem;font-style:italic}.query-item{display:flex;justify-content:space-between;align-items:flex-start;padding:1rem;margin-bottom:1rem;background:#fafafa;border:1px solid #ddd;border-radius:4px;gap:1rem}.query-content{flex:1}.query-content p{margin:0 0 .5rem;color:#333;line-height:1.5}.query-date{color:#999;font-size:.85rem}.delete-btn{background-color:#f44336;padding:.5rem 1rem;font-size:.9rem;flex-shrink:0;transition:all .2s}.query-actions{display:flex;gap:.5rem;flex-shrink:0}.annotations-btn{background-color:#ff9800;padding:.5rem 1rem;font-size:.9rem;flex-shrink:0;transition:all .2s}.annotations-btn:hover{transform:translateY(-2px);box-shadow:0 2px 8px #ff98004d}.annotations-tab{animation:fadeIn .3s}.annotations-header{margin-bottom:2rem}.annotation-form{margin-bottom:2rem;padding:1.5rem;background:#f9f9f9;border-radius:8px;border:1px solid #ddd}.annotation-form h3{color:#555;font-size:1.2rem;margin-bottom:1rem}.annotation-form select{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;background-color:#fff;cursor:pointer;transition:border-color .3s}.annotation-form select:focus{outline:none;border-color:#4caf50}.annotations-list h3{color:#555;font-size:1.2rem;margin-bottom:1rem}.no-annotations{text-align:center;color:#999;padding:2rem;font-style:italic}.annotation-item{display:flex;justify-content:space-between;align-items:flex-start;padding:1rem;margin-bottom:1rem;background:#fafafa;border:1px solid #ddd;border-radius:4px;gap:1rem;transition:all .2s}.annotation-item:hover:not(:has(.annotation-edit-form)){background:#f0f0f0;border-color:#ff9800;box-shadow:0 2px 8px #ff980033}.annotation-content{flex:1}.annotation-content p{margin:.25rem 0;color:#333;line-height:1.5;font-size:.9rem}.annotation-type-badge{display:inline-block;padding:.25rem .75rem;border-radius:12px;font-size:.85rem;font-weight:500;margin-bottom:.5rem;background-color:#ff9800;color:#fff;text-transform:capitalize}.annotation-date{display:block;color:#999;font-size:.85rem;margin-top:.5rem}.edit-btn{background-color:#2196f3;padding:.5rem 1rem;font-size:.9rem;flex-shrink:0;transition:all .2s}.edit-btn:hover{transform:translateY(-2px);box-shadow:0 2px 8px #2196f34d}.save-btn{background-color:#4caf50;padding:.5rem 1rem;font-size:.9rem;flex-shrink:0;transition:all .2s}.save-btn:hover{transform:translateY(-2px);box-shadow:0 2px 8px #4caf504d}.cancel-btn{background-color:#757575;padding:.5rem 1rem;font-size:.9rem;flex-shrink:0;transition:all .2s}.cancel-btn:hover{transform:translateY(-2px);box-shadow:0 2px 8px #7575754d}.export-btn{background-color:#4caf50;padding:.5rem 1rem;font-size:.9rem;transition:all .2s}.export-btn:hover{transform:translateY(-2px);box-shadow:0 2px 8px #4caf504d}.delete-btn{transition:all .2s}.delete-btn:hover{transform:translateY(-2px);box-shadow:0 2px 8px #f443364d}