body { background:#f1f5f9; }
input:focus { outline:2px solid #2563eb; outline-offset:-1px; }

/* primitives */
.label { font-size:12px; font-weight:600; color:#475569; }
.muted { color:#64748b; font-size:12px; }
.input { width:100%; padding:0.25rem 0.5rem; border:1px solid #cbd5e1; border-radius:0.375rem; background:#fff; }
.input.readonly { background:#f1f5f9; }
.card { border-radius:0.75rem; box-shadow:0 8px 24px rgba(0,0,0,.06); background:#fff; padding:1rem; }
.panel { border:1px solid #e2e8f0; border-radius:0.75rem; padding:0.75rem; }
.panel-title { font-size:0.9rem; font-weight:600; margin-bottom:0.5rem; }
.chip { font-size:12px; padding:0.125rem 0.5rem; border-radius:0.375rem; background:#f1f5f9; color:#334155; }
.metric { font-size:1.5rem; font-weight:700; }
.toast { position:fixed; right:16px; bottom:16px; padding:10px 14px; background:#16a34a; color:#fff; border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.2); }

/* vendor list */
.vendor-list { max-height: 220px; overflow:auto; border:1px solid #e2e8f0; border-radius: 8px; }
.vendor-row { padding:8px 10px; border-bottom:1px solid #f1f5f9; cursor:pointer; }
.vendor-row:hover { background:#f8fafc; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* table */
.th { text-align:left; font-weight:600; padding:0.5rem; border:1px solid #e2e8f0; }
.foot-label { text-align:right; padding:0.5rem 0.75rem; border:1px solid #e2e8f0; background:#f8fafc; }
.foot-val { text-align:right; padding:0.5rem; border:1px solid #e2e8f0; }
.foot-spacer { border:1px solid #e2e8f0; background:#f8fafc; }
.foot-total { text-align:right; padding:0.75rem; border:1px solid #e2e8f0; background:#f1f5f9; font-weight:600; }
.foot-total-val { text-align:right; padding:0.75rem; border:1px solid #e2e8f0; font-weight:700; }
.foot-total-spacer { border:1px solid #e2e8f0; background:#f1f5f9; }

/* buttons */
.btn { padding:0.5rem 0.75rem; border-radius:0.5rem; color:#fff; font-weight:600; }
.btn-primary { background:#2563eb; }
.btn-muted { background:#64748b; }
.btn-success { background:#059669; }
.btn-indigo { background:#4f46e5; }
.btn-dark { background:#0f172a; }
.btn-ghost { padding:0.25rem 0.5rem; border-radius:0.375rem; background:#0f172a; color:#fff; }

/* modal */
.modal-close { position:absolute; top:0.5rem; right:0.5rem; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; color:#475569; border-radius:9999px; }
.modal-close:hover { color:#0f172a; background:#f1f5f9; }
.break-anywhere { overflow-wrap:anywhere; word-break:break-word; }

/* simple preview table */
.preview-table { width:100%; border-collapse:separate; border-spacing:0; }
.preview-table th, .preview-table td { border:1px solid #e2e8f0; padding:6px; font-size:12px; }
.preview-table thead th { background:#0f172a; color:#fff; text-transform:uppercase; font-size:11px; }
.preview-kv { display:grid; grid-template-columns: 160px 1fr; gap:6px; margin-bottom:10px; }
.preview-kv div { font-size:12px; }