*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f0f0f;color:#e0e0e0;min-height:100vh}.container{max-width:1400px;margin:0 auto;padding:20px}h1{margin-bottom:20px;font-size:24px}h1,h2{color:#fff}h2{margin:20px 0 15px;font-size:18px}h3{color:#ccc;margin:15px 0 10px;font-size:16px}.tabs{display:flex;gap:10px;margin-bottom:20px;border-bottom:1px solid #333;padding-bottom:10px}.tab{padding:10px 20px;background:#1a1a1a;border:1px solid #333;border-radius:8px 8px 0 0;cursor:pointer;color:#aaa;transition:all .2s}.tab:hover{background:#252525}.tab.active{background:#2a2a2a;color:#fff;border-bottom-color:#2a2a2a}.controls{display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap;align-items:center}.control-group{display:flex;flex-direction:column;gap:5px}.control-group label{font-size:12px;color:#888}input,select,textarea{padding:10px 14px;border:1px solid #333;border-radius:6px;background:#1a1a1a;color:#e0e0e0;font-size:14px}input:focus,select:focus,textarea:focus{outline:none;border-color:#4a9eff}textarea{resize:vertical;font-family:monospace}button{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.btn-primary{background:#4a9eff;color:#fff}.btn-primary:hover{background:#3a8eef}.btn-secondary{background:#333;color:#e0e0e0}.btn-secondary:hover{background:#444}.btn-success{background:#22c55e;color:#fff}.btn-success:hover{background:#16a34a}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626}.btn-sm{padding:6px 12px;font-size:12px}.table-container{overflow-x:auto;border:1px solid #333;border-radius:8px;background:#1a1a1a}table{width:100%;border-collapse:collapse}td,th{padding:12px 15px;text-align:left;border-bottom:1px solid #2a2a2a}th{background:#252525;font-weight:600;color:#fff;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}th:hover{background:#2a2a2a}tr:hover{background:#222}.status{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500}.status-pending{background:#3b82f620;color:#60a5fa}.status-processing,.status-transcribing,.status-translating{background:#f59e0b20;color:#fbbf24}.status-completed,.status-success{background:#22c55e20;color:#4ade80}.status-error,.status-failed{background:#ef444420;color:#f87171}.status-cancelled,.status-expired{background:#6b728020;color:#9ca3af}.pagination{display:flex;align-items:center;justify-content:space-between;padding:15px;border-top:1px solid #333;background:#1a1a1a;border-radius:0 0 8px 8px}.pagination-info{color:#888;font-size:13px}.pagination-controls{display:flex;align-items:center;gap:10px}.pagination-controls button:disabled{opacity:.5;cursor:not-allowed}.page-input{width:60px;text-align:center;padding:6px 10px}.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);z-index:1000;overflow-y:auto;padding:40px 20px}.modal-overlay.active{display:flex;justify-content:center}.modal{background:#1a1a1a;border-radius:12px;max-width:900px;width:100%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #333;position:-webkit-sticky;position:sticky;top:0;background:#1a1a1a;z-index:10}.modal-header h2{margin:0}.modal-close{background:none;border:none;color:#888;font-size:24px;cursor:pointer;padding:5px 10px}.modal-close:hover{color:#fff}.modal-body{padding:20px}.json-viewer{background:#0d0d0d;border-radius:8px;padding:15px;font-family:Monaco,Menlo,monospace;font-size:13px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-height:400px;overflow-y:auto}.video-container{margin:20px 0;border-radius:8px;overflow:hidden;background:#000}video{width:100%;display:block}.segments-list{max-height:400px;overflow-y:auto;border:1px solid #333;border-radius:8px}.segment-item{display:flex;align-items:center;gap:15px;padding:12px 15px;border-bottom:1px solid #2a2a2a;cursor:pointer;transition:background .2s}.segment-item:hover{background:#252525}.segment-item.playing{background:#2a3a4a}.segment-index{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#333;border-radius:6px;font-weight:600;color:#4a9eff}.segment-content{flex:1 1}.segment-text{margin-bottom:5px}.segment-timing{font-size:12px;color:#888}.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:#888}.spinner{width:24px;height:24px;border:3px solid #333;border-top-color:#4a9eff;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px}@keyframes spin{to{transform:rotate(1turn)}}.card{background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:20px;margin-bottom:20px}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:15px;gap:15px}.info-item{background:#252525;padding:12px;border-radius:6px}.info-label{font-size:12px;color:#888;margin-bottom:5px}.info-value{font-size:14px;color:#fff;word-break:break-all}.empty-state{text-align:center;padding:60px 20px;color:#666}.empty-state-icon{font-size:48px;margin-bottom:15px}.connection-panel{background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:20px;margin-bottom:20px}.connection-status{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.connected{background:#22c55e}.status-dot.disconnected{background:#ef4444}.status-dot.connecting{background:#f59e0b;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:15px;gap:15px;margin-top:15px}.stat-card{text-align:center;padding:15px;background:#1a1a1a;border-radius:8px}.stat-label{font-size:12px;color:#888;margin-bottom:5px}.stat-value{font-size:24px;font-weight:600}.stat-count{font-size:11px;color:#666;margin-top:3px}.stat-daily{color:#4caf50}.stat-monthly{color:#2196f3}.stat-total{color:#ff9800}