:root{--text:#4b5563;--text-h:#0f172a;--bg:#f8fafc;--card:#fff;--border:#e2e8f0;--accent:#2563eb;--high:#15803d;--high-bg:#dcfce7;--medium:#a16207;--medium-bg:#fef9c3;--low:#b91c1c;--low-bg:#fee2e2;color:var(--text);background:var(--bg);font:16px/1.5 system-ui,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--text:#cbd5e1;--text-h:#f1f5f9;--bg:#0f172a;--card:#1e293b;--border:#334155;--accent:#60a5fa;--high:#86efac;--high-bg:#14532d;--medium:#fde047;--medium-bg:#422006;--low:#fca5a5;--low-bg:#450a0a}}*{box-sizing:border-box}body{margin:0}main{gap:16px;max-width:960px;margin:0 auto;padding:24px 16px 64px;display:grid}h1,h2,h3{color:var(--text-h);margin:0 0 8px}.hero{text-align:center;padding:48px 0 24px}.hero h1{font-size:2.4rem}.hero p{max-width:560px;margin:0 auto}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px}button{font:inherit;border:1px solid var(--border);background:var(--card);color:var(--text-h);cursor:pointer;border-radius:8px;padding:8px 14px}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.samples{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:0 0 16px;padding:0;list-style:none;display:grid}.samples li{display:flex}.sample{text-align:left;flex-direction:column;gap:6px;width:100%;height:100%;padding:8px;display:flex}.sample.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.sample-label,.sample-type{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sample-label{color:var(--text-h);font-weight:600}.sample-type{text-transform:capitalize;font-size:.8rem}.preview{background:var(--code-bg,#f1f5f9);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:100%;height:180px;display:flex;overflow:hidden}.preview img{object-fit:contain;width:100%;height:100%}.preview-msg{opacity:.6;font-size:.8rem}.selected{align-items:center;gap:12px;margin-top:16px;display:flex}.selected-preview{width:120px;height:150px}.file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.upload{border:2px dashed var(--border);text-align:center;cursor:pointer;border-radius:10px;padding:24px 16px}.upload:hover,.upload:focus-visible{border-color:var(--accent);outline:none}.upload p{margin:0}.extract-bar{justify-content:space-between;align-items:center;gap:12px;margin-top:16px;display:flex}.status{background:var(--card);border:1px solid var(--border);border-radius:8px;margin:0;padding:12px 16px}.status.error{background:var(--low-bg);color:var(--low);border-color:var(--low)}.type-badge{align-items:center;gap:12px;margin-bottom:16px;display:flex}.type-name{color:var(--text-h);text-transform:capitalize;font-size:1.4rem;font-weight:600}.pill{border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:600}.pill.high{background:var(--high-bg);color:var(--high)}.pill.medium{background:var(--medium-bg);color:var(--medium)}.pill.low{background:var(--low-bg);color:var(--low)}.fields{border-collapse:collapse;width:100%}.fields th,.fields td{text-align:left;border-bottom:1px solid var(--border);vertical-align:top;padding:8px}.fields pre{white-space:pre-wrap;word-break:break-word;margin:0;font:.85rem ui-monospace,Consolas,monospace}.fields pre.null{opacity:.5;font-style:italic}.fields .row.low td:first-child{box-shadow:inset 3px 0 var(--low)}.fields .row.medium td:first-child{box-shadow:inset 3px 0 var(--medium)}.fields .row.high td:first-child{box-shadow:inset 3px 0 var(--high)}.errors{color:var(--low);padding-left:20px}.ok{color:var(--high)}.actions{gap:8px;margin-top:16px;display:flex}.json{border:1px solid var(--border);border-radius:8px;max-height:400px;padding:12px;font-size:.8rem;overflow:auto}.drawer{z-index:50;background:var(--card);border-left:1px solid var(--border);width:min(420px,100%);box-shadow:var(--shadow);flex-direction:column;gap:12px;padding:16px;display:flex;position:fixed;top:0;bottom:0;right:0;overflow:hidden}.drawer-header{justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex}.drawer-body{flex:1;min-height:0;overflow:auto}.drawer-preview{aspect-ratio:1/1.414;height:auto}.zoom-controls{align-items:center;gap:8px;display:flex}.zoom-controls button{padding:4px 10px}.zoom-level{text-align:center;min-width:56px;font-size:.9rem}