*{box-sizing:border-box}body{margin:0;background:#f3f4f6;color:#111827;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.app{max-width:760px;margin:auto;padding:18px 14px 40px}header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:#6366f1}h1{font-size:28px;margin:4px 0}p{margin:6px 0;color:#6b7280}.card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:16px;margin:12px 0;box-shadow:0 5px 20px rgba(17,24,39,.05)}.upload{min-height:150px;border:2px dashed #c7d2fe;border-radius:15px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;cursor:pointer;background:#f8faff}.upload input{display:none}.uploadIcon{font-size:36px;color:#4f46e5}.upload small{color:#6b7280;margin-top:4px}.primary,.ghost{border:0;border-radius:12px;padding:13px 16px;font-weight:800;cursor:pointer}.primary{width:100%;margin-top:12px;background:#111827;color:#fff}.primary:disabled{opacity:.45}.ghost{background:#e5e7eb}.preview{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.preview img{width:100%;height:90px;object-fit:cover;border-radius:10px;border:1px solid #ddd}.progress{height:8px;background:#e5e7eb;border-radius:99px;margin-top:12px;overflow:hidden}.progress div{height:100%;width:0;background:#4f46e5}.status{font-size:13px}.hidden{display:none}.warning{background:#fff7ed;border:1px solid #fed7aa;padding:13px;border-radius:14px;color:#9a3412;margin:12px 0}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stat{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px}.stat span{display:block;color:#6b7280;font-size:12px}.stat b{font-size:22px}.sequence{display:flex;flex-wrap:wrap;gap:7px}.pill{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900}.red{background:#ef4444}.green{background:#22c55e}.violet{background:#8b5cf6}.unknown{background:#6b7280}.row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #eee}.row:last-child{border-bottom:0}.barline{height:9px;background:#e5e7eb;border-radius:99px;overflow:hidden;margin-top:5px}.barline i{display:block;height:100%}.muted{font-size:12px;color:#6b7280}li{margin:8px 0}@media(max-width:520px){.grid{grid-template-columns:repeat(2,1fr)}.preview{grid-template-columns:repeat(3,1fr)}h1{font-size:24px}}