.fpi-root { display: grid; place-items: center; }
.fpi-card { width: min(720px, 92vw); background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.1); padding: 16px; }
.fpi-card h3 { margin: 0 0 6px; }
.fpi-sub { margin: 0 0 12px; opacity: .7; font-size: 13px; }
.fpi-actions { display:flex; gap:10px; margin-bottom: 12px; }
.fpi-upload input { display:none; }
.fpi-upload span, .fpi-camera, .fpi-scan { border: none; background: #e9d5ff; padding: 10px 14px; border-radius: 10px; cursor: pointer; }
.fpi-scan[disabled]{ opacity: .5; cursor: not-allowed; }
.fpi-preview { position: relative; width: 100%; min-height: 200px; background: #fafafa; border:1px dashed #ddd; border-radius: 12px; overflow:hidden; display:grid; place-items: center; margin-bottom: 10px; }
.fpi-img, .fpi-video { max-width: 100%; height: auto; display:none; }
.fpi-canvas { display:none; }
.fpi-results { display:grid; gap:8px; }
.fpi-result { padding: 10px; border-radius: 10px; background: #f7f7fe; }
.fpi-pill { display:inline-block; padding:2px 8px; border-radius:999px; background:#eef; font-size:12px; margin-right:6px; }
.fpi-advice { margin-top: 6px; font-size: 14px; }