:root { color-scheme: light; --ink:#17202a; --muted:#667085; --accent:#176b87; --pale:#eff8fb; --border:#d7e1e7; --danger:#b42318; --ok:#067647; --surface:#ffffff; --surface-soft:#f8fbfd; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:13px; } th,td { padding:10px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; } th { color:var(--muted); font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
select, textarea { width:100%; border:1px solid #b9c8d1; border-radius:7px; padding:10px 11px; color:var(--ink); font:inherit; background:#fff; }
select[multiple] { min-height:190px; }
textarea { resize:vertical; min-height:88px; }
.hidden { display:none !important; }
* { box-sizing:border-box } body { margin:0; background:linear-gradient(180deg, #f7fafc 0%, #eef4f7 100%); color:var(--ink); font:16px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
main { max-width:1080px; margin:0 auto; padding:56px 24px 88px; } header { margin:0 0 30px; padding-bottom:12px; border-bottom:1px solid rgba(215,225,231,.8); } h1 { font-size:44px; letter-spacing:-1.8px; margin:4px 0; } h2 { font-size:22px; margin:4px 0 16px; } header > p:last-child { max-width:680px; color:var(--muted); margin:0; }.eyebrow { color:var(--accent); font-size:12px; letter-spacing:.14em; font-weight:800; margin:0; text-transform:uppercase; }.card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px; margin:18px 0; box-shadow:0 10px 28px rgba(23,32,42,.04); }.setup-card { display:grid; gap:18px; }.setup-fields,.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px; }label { display:grid; gap:6px; font-size:14px; font-weight:650; } input, select { width:100%; border:1px solid #b9c8d1; border-radius:10px; padding:11px 12px; color:var(--ink); font:inherit; font-weight:400; background:#fff; } input:focus, select:focus { outline:3px solid #d7ecf4; border-color:var(--accent); }.wide { grid-column:1 / -1 }.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; }.row.wrap { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }.row.wrap button { width:100%; justify-content:center; }button { background:var(--accent); border:0; color:#fff; font:inherit; font-weight:700; padding:11px 16px; border-radius:10px; cursor:pointer; }button:hover { filter:brightness(.93) }button:disabled { opacity:.55; cursor:not-allowed }.secondary { background:#fff; color:var(--accent); border:1px solid var(--accent) }.dropzone { display:flex; min-height:138px; align-items:center; justify-content:center; flex-direction:column; border:2px dashed #91b9c9; background:var(--pale); border-radius:14px; cursor:pointer; color:var(--accent); font-size:18px; }.dropzone input { display:none }.dropzone small,.hint,small { color:var(--muted); font-size:12px; font-weight:400; line-height:1.4; }.status { color:var(--muted); font-size:14px; min-height:1.4em; }.status.error,#duplicateMessage.duplicate { color:var(--danger); }.status.success,#duplicateMessage.unique { color:var(--ok); }pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:300px; overflow:auto; background:#f7f9fa; padding:14px; border-radius:10px; font-size:12px; }summary { cursor:pointer; font-weight:650; }#misCard .row.wrap { grid-template-columns:repeat(2,minmax(0,1fr)); }#misCard .row.wrap button:first-child { grid-column:1 / -1; }@media(min-width:980px) { #misCard .row.wrap { grid-template-columns:repeat(4,minmax(0,1fr)); } #misCard .row.wrap button:first-child { grid-column:auto; } }
@media(max-width:720px) { main{padding:34px 16px 64px} h1{font-size:34px} .card{padding:20px} .setup-fields,.form-grid,.row.wrap,#misCard .row.wrap{grid-template-columns:1fr} .wide{grid-column:auto} }
.selection-cards { display:grid; gap:10px; margin-top:14px; }
.selection-card { display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:linear-gradient(180deg, #fff, #f8fbfc); box-shadow:0 1px 4px #17202a0a; }
.selection-card strong { font-size:14px; }
.selection-card span { color:var(--muted); font-size:12px; grid-column:1; }
.chip-remove { grid-column:2; grid-row:1 / span 2; align-self:center; background:#eef4f8; color:var(--accent); border:1px solid #c9dce5; padding:8px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.chip-remove:hover { filter:none; background:#e4eef5; }
.selection-empty { margin:0; color:var(--muted); font-size:13px; }
.invoice-picker { display:grid; gap:10px; margin-top:8px; max-height:240px; overflow:auto; padding:8px; border:1px solid #d3dee5; border-radius:10px; background:#fdfefe; }
.invoice-option { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; padding:10px 12px; border:1px solid transparent; border-radius:10px; background:#fff; box-shadow:0 1px 3px #17202a08; cursor:pointer; }
.invoice-option:hover { border-color:#c7dbe4; background:#f8fcfe; }
.invoice-option input { width:auto; margin:0; }
.invoice-option span { font-size:14px; color:var(--ink); font-weight:650; }