:root{font-family:Segoe UI,Arial,sans-serif;color:#172436;background:#f6f8fc;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;font-weight:400;--ink: #172436;--muted: #8793a5;--line: #e8edf4;--blue: #3568ec;--blue-dark: #2657d4;--green: #17a56b}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,a{font:inherit}button{color:inherit}.app-shell{min-height:100vh}.topbar{height:72px;padding:0 max(32px,calc((100vw - 1160px)/2));display:flex;align-items:center;justify-content:space-between;background:#ffffffe0;border-bottom:1px solid #edf0f5}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 17px Segoe UI,Arial,sans-serif;letter-spacing:-.7px}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#fff;background:linear-gradient(145deg,#4a7cf3,#2858d6);box-shadow:0 5px 12px #3568ec35}.brand-accent{color:var(--blue)}.topbar-right{display:flex;align-items:center;gap:18px;color:#657286;font-size:12px;font-weight:600}.model-status{display:inline-flex;align-items:center;gap:8px}.model-status i{width:7px;height:7px;border-radius:50%;background:#20bd79;box-shadow:0 0 0 3px #20bd791c}.model-checking i{background:#e9a92a;box-shadow:0 0 0 3px #e9a92a1c}.model-unavailable{color:#b64949}.model-unavailable i{background:#d75656;box-shadow:0 0 0 3px #d756561c}.topbar-divider{height:17px;width:1px;background:var(--line)}.language-label{color:#667286;letter-spacing:.6px}.main-content{width:min(100% - 48px,1080px);margin:0 auto}.intro{padding:49px 0 27px}.eyebrow,.section-kicker{color:#8290a4;font-size:10px;font-weight:700;letter-spacing:1.4px}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow span{width:7px;height:7px;border-radius:50%;background:#4e7cf1}.intro h1{margin:15px 0 9px;color:#172436;font:800 clamp(32px,4vw,43px)/1.17 "Segoe UI",Arial,sans-serif;letter-spacing:-1.9px}.intro h1 span{color:var(--blue)}.intro p{margin:0;color:#718096;font-size:14px}.trust-note{display:flex;align-items:center;gap:7px;margin-top:18px;color:#7a8798;font-size:11px}.trust-note svg{color:#28a675}.backend-alert{margin:0 0 15px;padding:11px 13px;border:1px solid #f3d4d4;border-radius:8px;color:#a84949;background:#fff8f8;font-size:11px;line-height:1.5}.workspace{padding:27px 30px 25px;border:1px solid #e9edf4;border-radius:15px;background:#fff;box-shadow:0 10px 38px #25375a08}.mode-tabs{display:flex;width:max-content;gap:5px;margin:0 0 14px;padding:5px;border:1px solid #e8edf4;border-radius:9px;background:#edf1f7}.mode-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:37px;padding:0 15px;border:0;border-radius:6px;color:#738196;background:transparent;cursor:pointer;font-size:11px;font-weight:700;transition:background .15s,color .15s,box-shadow .15s}.mode-tab.selected{color:#315fda;background:#fff;box-shadow:0 1px 5px #20375b18}.mode-tab:hover:not(.selected){color:#344760}.workspace-heading,.panel-heading,.action-row,.detections-heading{display:flex;align-items:center;justify-content:space-between}.workspace-heading{margin-bottom:20px}.workspace-heading h2{margin:5px 0 0;font:700 18px Segoe UI,Arial,sans-serif;letter-spacing:-.4px}.format-badge{padding:7px 10px;border:1px solid #edf0f5;border-radius:7px;color:#8793a5;font-size:10px;font-weight:600;letter-spacing:.3px}.format-badge b{padding:0 3px;color:#bdc5d0}.image-grid{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);align-items:center;gap:10px}.image-panel{min-width:0}.panel-heading{height:34px;margin-bottom:9px}.panel-title{display:flex;align-items:center;gap:9px}.panel-title h3{margin:0;font:700 12px Segoe UI,Arial,sans-serif}.panel-index{color:#a3afbe;font:700 10px Segoe UI,Arial,sans-serif;letter-spacing:.5px}.icon-button{display:grid;place-items:center;width:29px;height:29px;border:1px solid var(--line);border-radius:7px;color:#7b8797;background:#fff;cursor:pointer}.icon-button:disabled{cursor:not-allowed;opacity:.55}.dropzone,.empty-result{width:100%;height:236px;border-radius:10px}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px dashed #d9e1ed;color:var(--ink);background:#fbfcfe;cursor:pointer;transition:border-color .18s,background .18s}.dropzone:disabled{cursor:wait;opacity:.65}.dropzone:hover,.dropzone.is-dragging{border-color:#6d91f2;background:#f7f9ff}.upload-icon{width:43px;height:43px;display:grid;place-items:center;margin-bottom:2px;border-radius:12px;color:var(--blue);background:#edf2ff}.dropzone strong{font-size:12px;font-weight:700}.dropzone-sub{color:#8995a5;font-size:11px}.dropzone-limit{display:flex;align-items:center;gap:5px;margin-top:7px;color:#98a3b2;font-size:10px}.flow-arrow{display:grid;place-items:center;width:29px;height:29px;margin:35px auto 0;border:1px solid #edf0f5;border-radius:50%;color:#9ba7b7;background:#fff}.image-preview{position:relative;display:flex;height:236px;align-items:center;justify-content:center;overflow:hidden;border:1px solid #edf0f5;border-radius:10px;background:#f8fafc}.image-preview img{display:block;width:100%;height:100%;object-fit:contain}.file-chip{position:absolute;right:10px;bottom:10px;left:10px;display:flex;align-items:center;gap:6px;max-width:max-content;padding:7px 10px;border:1px solid #ffffffb5;border-radius:6px;color:#58687b;background:#ffffffed;box-shadow:0 2px 8px #17243612;font-size:10px}.file-chip svg{flex:0 0 auto;color:var(--green)}.file-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-result{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid #edf0f5;color:#b2bdcb;background:#fbfcfe}.empty-result strong{margin-top:4px;color:#7b8798;font-size:11px}.empty-result span{color:#a2adbb;font-size:10px}.empty-result.processing{border-color:#dce6ff;color:var(--blue);background:#f8faff}.empty-result.processing strong{color:#4d6fc1}.empty-result.processing span{color:#8b9ec5}.spinner{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.download-link{display:inline-flex;align-items:center;gap:6px;color:var(--blue);text-decoration:none;font-size:10px;font-weight:700}.result-image-badge{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid #d8eee4;border-radius:5px;color:#168558;background:#f2fbf6ed;font-size:8px;font-weight:700;letter-spacing:.6px}.error-banner{display:flex;align-items:center;gap:9px;margin-top:16px;padding:11px 12px;border:1px solid #f3d4d4;border-radius:8px;color:#ae4141;background:#fff8f8;font-size:11px}.error-banner>svg{flex:0 0 auto}.error-banner span{flex:1}.error-banner button{display:grid;place-items:center;border:0;color:#ae4141;background:none;cursor:pointer}.action-row{gap:16px;margin-top:19px}.privacy-note{display:flex;align-items:center;gap:7px;color:#8995a4;font-size:10px}.privacy-note svg{flex:0 0 auto;color:#a0adbc}.analyze-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:156px;height:41px;padding:0 15px;border:0;border-radius:7px;color:#fff;background:var(--blue);box-shadow:0 5px 12px #3568ec2b;cursor:pointer;font-size:11px;font-weight:700;transition:background .18s,transform .18s}.analyze-button:hover:not(:disabled){transform:translateY(-1px);background:var(--blue-dark)}.analyze-button:disabled{cursor:not-allowed;background:#a9bce9;box-shadow:none}button:focus-visible,a:focus-visible{outline:3px solid #3568ec66;outline-offset:2px}.detections-section{margin-top:25px;padding-top:22px;border-top:1px solid #edf0f5}.detections-heading{margin-bottom:15px}.detections-heading h3{margin:4px 0 0;font:700 15px Segoe UI,Arial,sans-serif}.count-badge{padding:6px 9px;border:1px solid #dce7ff;border-radius:6px;color:#4269c5;background:#f5f8ff;font-size:10px;font-weight:700}.table-wrap{overflow-x:auto;border:1px solid #edf0f5;border-radius:8px}table{width:100%;border-collapse:collapse;text-align:left}th{padding:11px 13px;color:#8b97a7;background:#fbfcfe;font-size:8px;font-weight:700;letter-spacing:.8px;white-space:nowrap}td{padding:12px 13px;border-top:1px solid #f0f2f6;color:#46566b;font-size:10px;white-space:nowrap}td:first-child{color:#27384d;font-weight:600}.class-dot{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#5580ec;vertical-align:1px}.id-pill{padding:4px 7px;border-radius:5px;color:#697a91;background:#f1f4f8;font-size:9px;font-weight:700}.confidence-cell{display:flex;align-items:center;gap:8px}.confidence-cell>span{min-width:35px}.confidence-track{width:44px;height:4px;overflow:hidden;border-radius:4px;background:#eaf0fa}.confidence-track i{display:block;height:100%;border-radius:inherit;background:#5080ed}.coordinates{color:#738196;font-family:Segoe UI,Arial,sans-serif;font-variant-numeric:tabular-nums}.no-detections{padding:17px;border:1px solid #edf0f5;border-radius:8px;color:#7f8da0;background:#fbfcfe;text-align:center;font-size:11px}.video-workspace{margin-bottom:0}.video-upload-row{margin-bottom:18px}.video-dropzone{display:flex;width:100%;min-height:160px;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed #d9e1ed;border-radius:10px;color:var(--ink);background:#fbfcfe;cursor:pointer;transition:border-color .18s,background .18s}.video-dropzone:hover,.video-dropzone.is-dragging{border-color:#6d91f2;background:#f7f9ff}.video-dropzone:disabled{cursor:wait;opacity:.65}.video-file-card{display:flex;min-width:0;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e8edf4;border-radius:9px;background:#fbfcfe}.video-file-icon{display:grid;width:38px;height:38px;flex:0 0 auto;place-items:center;border-radius:9px;color:#3568ec;background:#edf2ff}.video-file-details{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px}.video-file-details strong{overflow:hidden;color:#35465c;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.video-file-details span{color:#8b97a7;font-size:10px}.video-preview-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}.video-panel{min-width:0}.video-player{display:block;width:100%;max-height:320px;aspect-ratio:16 / 9;border:1px solid #e8edf4;border-radius:9px;background:#111827;object-fit:contain}.video-empty{height:auto;min-height:180px}.video-job-status{margin-top:21px;padding:16px;border:1px solid #e8edf4;border-radius:9px;background:#fbfcfe}.video-job-status-heading{display:flex;align-items:center;gap:9px;color:#506178;font-size:10px}.video-job-status-heading strong{flex:1;color:#304159;font-size:11px}.video-job-status-heading>span:last-child{color:#77869a;font-variant-numeric:tabular-nums}.job-status-dot{width:7px;height:7px;border-radius:50%;background:#e8aa32}.status-processing,.status-queued{background:#4a7cf3;box-shadow:0 0 0 3px #4a7cf31c}.status-completed{background:#20ad76;box-shadow:0 0 0 3px #20ad761c}.status-failed,.status-cancelled{background:#d75656;box-shadow:0 0 0 3px #d756561c}.progress-track{height:7px;margin-top:13px;overflow:hidden;border-radius:8px;background:#e9eef7}.progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4f7df0,#35a1e8);transition:width .25s ease}.video-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.video-stat-grid>div{display:flex;min-width:0;flex-direction:column;gap:5px}.video-stat-grid span{color:#8b97a7;font-size:9px}.video-stat-grid strong{overflow:hidden;color:#35465c;font-size:11px;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}.video-disclaimer,.video-backend-note{margin:12px 0 0;color:#8793a5;font-size:9px;line-height:1.6}.video-summary-section{margin-top:23px;padding-top:20px;border-top:1px solid #edf0f5}.preview-warning{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:10px 12px;border:1px solid #f1e2bd;border-radius:7px;color:#8b6c32;background:#fffcf4;font-size:10px;line-height:1.5}.preview-warning svg{flex:0 0 auto}.video-timeline{max-height:300px;margin-top:12px}.video-timeline tbody tr td:first-child{font-variant-numeric:tabular-nums}.video-actions{display:flex;align-items:center;gap:9px}.video-action-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px}.cancel-video-button,.secondary-button{display:inline-flex;min-height:40px;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:1px solid #e3e9f1;border-radius:7px;color:#6d7b8d;background:#fff;cursor:pointer;font-size:10px;font-weight:700;white-space:nowrap}.cancel-video-button{border-color:#f1d7d7;color:#b24d4d;background:snow}.video-backend-note{color:#aa6a3b}.coordinate-note{margin:9px 0 0;color:#98a3b1;font-size:9px}.page-footer{display:flex;justify-content:space-between;gap:12px;padding:19px 2px 24px;color:#9aa5b4;font-size:9px;letter-spacing:.25px}.page-footer i{padding:0 4px;color:#bdc6d1;font-style:normal}.page-footer b{color:#728097;font-weight:700}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:680px){.topbar{height:62px;padding:0 20px}.topbar-right{gap:11px}.model-status{font-size:10px}.main-content{width:min(100% - 32px,520px)}.intro{padding:36px 0 22px}.intro h1{font-size:35px}.intro p{max-width:400px;font-size:12px;line-height:1.6}.workspace{padding:21px 18px 20px}.image-grid{grid-template-columns:minmax(0,1fr);gap:6px}.mode-tabs{width:100%}.mode-tab{flex:1;padding:0 8px;font-size:10px}.flow-arrow{width:27px;height:27px;margin:5px auto 8px;transform:rotate(90deg)}.dropzone,.empty-result,.image-preview{height:210px}.action-row{align-items:flex-start;flex-direction:column}.video-preview-grid{grid-template-columns:minmax(0,1fr);gap:7px}.video-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.video-action-row{align-items:stretch;flex-direction:column}.video-actions{flex-wrap:wrap}.video-actions .analyze-button{flex:1}.video-job-status-heading{flex-wrap:wrap}.video-job-status-heading>span:last-child{margin-left:16px}.video-player{max-height:260px}.analyze-button{width:100%}.page-footer{flex-direction:column;font-size:8px}}@media(max-width:380px){.topbar{padding:0 14px}.brand{font-size:15px}.topbar-right{gap:8px}.model-status{gap:5px;font-size:9px}.topbar-divider{display:none}.main-content{width:calc(100% - 24px)}.workspace{padding:18px 13px}.workspace-heading h2{font-size:16px}.format-badge{padding:6px 7px;font-size:9px}}
