:root{--bg:#fafafa;--fg:#111;--muted:#666;--border:#e5e5e5;--border-strong:#d1d1d1;--accent:#2563eb;--accent-hover:#1d4ed8;--card-bg:#fff;--diff-pos:#c93838;--diff-neg:#1f883d;--diff-zero:#9ca3af;--error:#991b1b;--col-bf:#fdf7ed;--col-pe:#f0f7ff;color:var(--fg);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5}*{box-sizing:border-box}body{min-height:100vh;margin:0}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{background:var(--card-bg);border-bottom:1px solid var(--border);display:flex;position:sticky;z-index:10;justify-content:space-between;align-items: center;padding:.625rem 1.5rem;top:0}.app-title{margin:0;font-size:1.1rem;font-weight:600}.app-body{display:grid;grid-template-columns:380px 1fr;flex:1;align-items: start;gap:1rem;padding:1rem 1.5rem}.app-side{display:flex;position:sticky;flex-direction:column;gap:1rem;height:calc(100vh - 5rem);top:4rem}.app-side>.form{flex-shrink:0}.app-side>.card{display:flex;flex-direction:column;flex:1 1 0;min-height:0}.app-side>.card>.card-body{overflow-y:auto;flex:1;min-height:0}.app-main{min-width:0}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:.85em}.error{color:var(--error);margin:0}.form{background:var(--card-bg);border:1px solid var(--border);display:flex;border-radius:8px;flex-direction:column;gap:.75rem;padding:1rem}.form-row{display:flex;flex-direction:column;gap:.75rem}.form-row-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.75rem}.form-field{display:flex;flex-direction:column;gap:.25rem}.form-label{color:var(--muted);font-size:.8rem;font-weight:500}.form-required{color:var(--error)}.form-input{font:inherit;border:1px solid var(--border-strong);background:var(--card-bg);color:var(--fg);outline:none;border-radius:6px;padding:.5rem .625rem;transition:border-color .15s}.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2563eb26}.form-actions{display:flex;justify-content:flex-end;gap:.5rem}.button-primary{font:inherit;background:var(--accent);color:#fff;cursor:pointer;border:1px solid #0000;border-radius:6px;padding:.5rem 1rem;transition:background .15s;font-weight:500}.button-primary:hover:not(:disabled){background:var(--accent-hover)}.button-primary:disabled{opacity:.5;cursor:not-allowed}.button-link{font:inherit;color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0;font-size:.85rem}.button-link:hover{text-decoration:underline}.card{background:var(--card-bg);border:1px solid var(--border);overflow:hidden;border-radius:8px}.card-header{display:flex;border-bottom:1px solid var(--border);justify-content:space-between;align-items: center;padding:.75rem 1rem}.card-title{margin:0;font-size:.95rem;font-weight:600}.card-body{padding:1rem}.card-body.card-body-flush{padding:0}.card-body .padded{margin:0;padding:1rem}.timing{color:var(--muted);background:#f3f4f6;border-radius:4px;padding:2px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:.8rem}.timing-group{display:flex;gap:.5rem}.timing-loading{color:#92400e;background:#fef3c7}.timing-error{color:var(--error);background:#fee2e2}.spinner{display:inline-block;animation:spin .8s linear infinite;vertical-align:middle;border:2px solid;border-right-color:#0000;border-radius:50%;width:10px;height:10px}@keyframes spin{to{transform:rotate(360deg)}}.kv{display:grid;grid-template-columns:100px 1fr;gap:.25rem 1rem;margin:0}.kv dt{color:var(--muted);font-size:.85rem}.kv dd{margin:0}.payload-body{display:flex;flex-direction:column;gap:1rem}.subhead{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:.85rem;font-weight:600}.attrs-table{border-collapse:collapse;width:100%;font-size:.85rem}.attrs-table td{vertical-align:top;padding:.25rem 0}.attrs-table .attrs-key{color:var(--muted);width:220px;padding-right:1rem}.attrs-table .attrs-val{word-break:break-word}.small{font-size:.8rem}.json-viewer{color:#d4d4d4;overflow-x:auto;background:#1e1e1e;border-radius:6px;margin:0;padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:.8rem;line-height:1.5}.supplier-block+.supplier-block{border-top:1px solid var(--border)}.supplier-name{border-bottom:1px solid var(--border);background:#f9fafb;margin:0;padding:.625rem 1rem;font-size:.9rem;font-weight:600}.supplier-notice{color:var(--muted);border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fef9c3;padding:.625rem 1rem;font-size:.8rem}.compare-table{border-collapse:collapse;table-layout:fixed;width:100%}.compare-table th{text-align:left;border-bottom:1px solid var(--border);vertical-align:top;padding:.625rem 1rem}.compare-table td{text-align:left;border-bottom:1px solid var(--border);vertical-align:top;padding:.625rem 1rem}.compare-table th{color:var(--muted);background:#fafafa;font-size:.8rem;font-weight:500}.compare-table tr:last-child td{border-bottom:none}.compare-table .col-qty{color:var(--muted);width:100px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace}.compare-table .col-bf{background:var(--col-bf)}.compare-table .col-pe{background:var(--col-pe)}.compare-table .col-diff{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:.85rem}.cell{display:flex;flex-direction:column;gap:2px}.cell-main{font-weight:500}.cell-sub{color:var(--muted);font-size:.75rem}.cell-sub-separator{border-top:1px dashed var(--border-strong);margin-top:.4rem;padding-top:.4rem}.diff-cell{display:flex;flex-direction:column;gap:2px}.diff-main{font-weight:600}.diff-sub-separator{border-top:1px dashed var(--border-strong);margin-top:.4rem;padding-top:.4rem}.diff-sub{font-size:.75rem}.diff-label{color:var(--muted)}.diff-positive{color:var(--diff-pos)}.diff-negative{color:var(--diff-neg)}.diff-zero{color:var(--diff-zero)}