:root{color:#17202a;background:#f5f7fa;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.empty-state{display:grid;min-height:100vh;place-content:center;gap:24px;padding:24px;text-align:center}.empty-state h1,.header-summary h1{margin:0;color:#111827}.empty-state h1{font-size:clamp(32px,8vw,48px)}.empty-state p,.header-summary p,.preview-pane p,.reference-chains p,.detail-panel p{margin:0;color:#52616f}.drop-zone{display:grid;width:min(100%,560px);min-height:220px;align-content:center;justify-items:center;gap:12px;padding:28px;border:1px dashed #8aa0b8;border-radius:8px;background:#fff;color:#233142;box-shadow:0 16px 36px #1f2d3d14}.drop-zone:focus-within{outline:3px solid #93c5fd;outline-offset:4px;box-shadow:0 0 0 4px #2563eb24,0 16px 36px #1f2d3d14}.drop-zone-main{display:grid;justify-items:center;gap:12px}.drop-zone-main svg{width:32px;height:32px;color:#2563eb}.drop-zone-title{font-size:18px;font-weight:700}.drop-zone-subtitle{max-width:360px;color:#66788a;font-size:14px;line-height:1.45}.drop-zone input{width:1px;height:1px;overflow:hidden;opacity:0;position:absolute;pointer-events:none}.directory-picker{display:inline-flex;align-items:center;justify-content:center;min-height:36px;margin-top:6px;padding:8px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;color:#233142;font-size:14px;font-weight:700}.workbench{padding:24px}.header-summary{display:flex;align-items:stretch;justify-content:space-between;gap:24px;padding-bottom:20px;border-bottom:1px solid #d8e0e8}.header-summary h1{overflow-wrap:anywhere;font-size:clamp(26px,4vw,38px)}.header-summary p{margin-top:6px;font-size:14px}.header-summary dl{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:12px;width:min(100%,560px);margin:0}.header-summary dl div{min-width:0;padding:12px;border:1px solid #dfe6ee;border-radius:8px;background:#fff}.header-summary dt{color:#66788a;font-size:12px;font-weight:700;text-transform:uppercase}.header-summary dd{margin:6px 0 0;overflow-wrap:anywhere;color:#111827;font-weight:700}.status-banner{display:grid;gap:6px;margin-top:16px;padding:12px 14px;border-radius:8px;font-size:14px}.status-banner p{margin:0}.status-banner-warning{border:1px solid #f4c76b;background:#fff7df;color:#5f3f00}.status-banner-error{border:1px solid #f1a7a7;background:#fff0f0;color:#7f1d1d}.workspace-grid{display:grid;grid-template-columns:minmax(360px,520px) minmax(0,1fr);gap:24px;align-items:start;margin-top:24px}.data-column{display:grid;gap:18px;min-width:0}.coverage-panel,.detail-panel,.reference-chains,.preview-pane{border:1px solid #dfe6ee;border-radius:8px;background:#fff}.coverage-panel,.detail-panel,.reference-chains{padding:16px}.coverage-panel h2,.detail-panel h2,.reference-chains h2,.preview-pane h2{margin:0;color:#111827;font-size:18px}.coverage-list{display:grid;gap:8px;margin-top:14px}.coverage-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto 36px;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:1px solid #e7edf3;border-radius:8px;background:#fff;color:#233142;text-align:left}.coverage-row.selected,.coverage-row:hover{border-color:#2563eb;background:#f3f7ff}.status-icon{width:18px;height:18px}.status-icon.present{color:#16835e}.status-icon.problem{color:#b45309}.status-icon.missing{color:#7b8794}.coverage-label{min-width:0;overflow-wrap:anywhere;font-weight:700}.coverage-status{border-radius:999px;padding:3px 8px;font-size:12px;font-weight:700}.coverage-status.present{background:#e7f7ef;color:#126b4d}.coverage-status.required-problem{background:#fff4dc;color:#8a4b00}.coverage-status.missing{background:#eef2f6;color:#52616f}.coverage-count{color:#52616f;font-variant-numeric:tabular-nums;text-align:right}.detail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.detail-heading span{border-radius:999px;padding:4px 9px;background:#eef2f6;color:#52616f;font-size:12px;font-weight:700}.detail-panel{display:grid;gap:12px}.detail-note{color:#233142;font-weight:700}.value-list{display:grid;gap:6px;margin:0;padding-left:18px}.detail-panel pre{max-height:360px;margin:0;overflow:auto;padding:12px;border-radius:8px;background:#111827;color:#e5e7eb;font-size:12px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}.reference-chains{display:grid;gap:12px}.reference-chains h3{margin:4px 0 0;color:#334155;font-size:13px;font-weight:800}.reference-chains ul{display:grid;gap:8px;margin:0;padding-left:18px}.reference-chains li{overflow-wrap:anywhere;color:#334155;font-size:13px;line-height:1.5}.preview-column{min-width:0;height:calc(100vh - 160px);min-height:360px}.preview-pane{display:flex;height:100%;min-height:0;overflow:hidden;flex-direction:column}.preview-toolbar,.preview-options{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-bottom:1px solid #dfe6ee}.preview-toolbar p{margin-top:4px;font-size:13px}.preview-controls,.animation-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.preview-controls button,.animation-controls button,.preview-options select{min-height:34px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;color:#233142;font-size:13px;font-weight:700}.preview-controls button,.animation-controls button{padding:7px 10px}.preview-controls button:hover,.animation-controls button:hover{border-color:#2563eb;background:#f3f7ff}.preview-controls label,.preview-options label{display:inline-flex;align-items:center;gap:6px;color:#334155;font-size:13px;font-weight:700}.preview-controls input{width:15px;height:15px;accent-color:#2563eb}.preview-options{justify-content:flex-start;background:#fbfdff}.preview-options select{max-width:220px;padding:6px 28px 6px 9px}.preview-canvas{position:relative;display:grid;flex:1;min-height:0;place-content:center;overflow:hidden;background:#eef2f6;text-align:center}.preview-canvas canvas{display:block;width:100%;height:100%}.preview-canvas p{max-width:320px;padding:18px;color:#52616f;font-size:14px;line-height:1.45}@media(max-width:960px){.workbench{padding:18px}.header-summary{display:grid}.header-summary dl{grid-template-columns:1fr;width:100%}.workspace-grid{grid-template-columns:1fr}.preview-column,.preview-pane,.preview-canvas{height:auto;min-height:320px}.preview-toolbar,.preview-options{align-items:stretch;flex-direction:column}.preview-controls,.animation-controls{justify-content:flex-start}}@media(max-width:560px){.empty-state{padding:18px}.drop-zone{min-height:190px;padding:22px}.coverage-row{grid-template-columns:24px minmax(0,1fr) 32px}.coverage-status{grid-column:2 / 4;width:max-content}}