:root{--background: #fff8ff;--foreground: #12324b;--border: #ffe6f2;--input: #fff1f8;--primary: #4da8ff;--primary-foreground: #ffffff;--secondary: #fff0e6;--secondary-foreground: #15374f;--muted: #fafbff;--muted-foreground: #9bb0c9;--success: #cff7e6;--success-foreground: #0d4f34;--accent: #ffd37a;--accent-foreground: #3b2a00;--destructive: #ff9fb3;--destructive-foreground: #4a0012;--warning: #fff6e8;--warning-foreground: #6b4a00;--card: #ffffff;--card-foreground: #12324b;--sidebar: #fff5fb;--sidebar-foreground: #154359;--sidebar-primary: #e6f3ff;--sidebar-primary-foreground: #2b6fb3;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--font-family-body: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "DM Sans Fallback"}*{box-sizing:border-box;font-family:var(--font-family-body)}html,body{height:100%;width:100%}#root{width:100%;min-height:100%;display:flex;justify-content:center;align-items:flex-start}body{margin:0;padding:0;background:var(--background);color:var(--foreground);min-height:100vh}.app{width:100%;max-width:420px;min-height:644px;background:var(--background);color:var(--foreground);display:flex;flex-direction:column;gap:16px;padding:12px;margin:0 auto;box-sizing:border-box}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px 16px 16px;display:flex;flex-direction:column;gap:16px}@media(min-width:768px){#root{align-items:center;padding:20px}.app{max-width:800px;box-shadow:0 8px 32px #12324b1a;border-radius:var(--radius-xl)}.card{display:grid;grid-template-columns:1fr;grid-template-areas:"title" "chip" "buttons" "viewer" "legend";gap:20px;padding:32px 24px 24px;align-items:center}.title{grid-area:title}.header-chip{grid-area:chip}.row{grid-area:buttons}.viewer{grid-area:viewer;max-width:800px;width:100%;margin:0 auto}.legend{grid-area:legend;justify-self:center;padding-top:0;display:flex!important;flex-direction:row!important;justify-content:center;align-items:center;gap:24px;width:100%;max-width:800px;flex-wrap:nowrap!important;grid-template-columns:none!important;grid-template-rows:none!important}.legend-item{white-space:nowrap!important;flex-shrink:0!important;display:flex!important}}@media(min-width:1024px){.app{max-width:1200px}.card{padding:40px 48px 32px}.viewer{max-width:800px;margin:0 auto}.row{flex-direction:row;justify-content:center;gap:16px}.btn{flex:0 1 auto;min-width:160px}.legend{gap:32px;max-width:800px;flex-wrap:nowrap!important;display:flex!important;flex-direction:row!important}}.title{font-size:22px;font-weight:700;text-align:center;letter-spacing:.2px}.subtitle{font-size:14px;font-weight:500;text-align:center;color:var(--muted-foreground)}.row{display:flex;align-items:center;gap:12px;justify-content:center}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:var(--primary);color:var(--primary-foreground);border:1px solid var(--primary);border-radius:var(--radius-md);font-size:15px;font-weight:500;cursor:pointer}.btn.secondary{background:var(--accent);color:var(--accent-foreground);border-color:var(--accent)}.file-name{font-size:14px;color:var(--muted-foreground)}.legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;justify-items:center;padding:8px 4px 0;justify-content:center}.legend-item{display:flex;align-items:center;gap:8px}.swatch{width:14px;height:14px;border-radius:50%}.c-blue{background:var(--primary);border-radius:50%}.c-green{background:var(--success);border-radius:var(--radius-md)}.c-red{background:var(--destructive);border-radius:var(--radius-md)}.c-gray{background:var(--muted);border-radius:var(--radius-md)}.viewer{background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius-xl);padding:10px}.image-wrap{position:relative;width:100%;border-radius:var(--radius-xl);overflow:hidden;background:var(--input);min-height:200px}.image-wrap canvas,.image-wrap video{width:100%;height:auto;display:block;object-fit:contain;position:relative;z-index:1}.image-wrap video{background:#000;min-height:200px}.detection-loading{position:absolute;top:0;left:0;width:100%;height:100%;background:#fffffff2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;z-index:10;border-radius:var(--radius-xl)}.loading-spinner{position:relative;width:80px;height:80px}.spinner-ring{position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:var(--primary);border-radius:50%;animation:spin 1.2s cubic-bezier(.5,0,.5,1) infinite}.spinner-ring:nth-child(1){animation-delay:-.45s}.spinner-ring:nth-child(2){animation-delay:-.3s;border-top-color:var(--accent)}.spinner-ring:nth-child(3){animation-delay:-.15s;border-top-color:var(--success)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{display:flex;flex-direction:column;align-items:center;gap:8px}.loading-label{font-size:16px;font-weight:500;color:var(--foreground)}.loading-percent{font-size:32px;font-weight:700;color:var(--primary);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.caption{padding-top:10px;text-align:center;font-size:14px;font-weight:500;color:var(--foreground)}.legend-label{font-size:14px;font-weight:500}.header-chip{margin:0 auto;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--radius-lg);background:var(--secondary);border:1px solid var(--border);font-size:13px;font-weight:500;color:var(--secondary-foreground)}