:root { --ink:#1a1a1a; --mute:#6b6b6b; --line:#e4e2dc; --paper:#faf8f3; --card:#fff; --accent:#0f633e; --warn:#b4540a; --bad:#a3261f; --ok:#0f633e; }
* { box-sizing:border-box }
body { margin:0; font:15px/1.45 -apple-system, "Helvetica Neue", Arial, sans-serif; color:var(--ink); background:var(--paper) }
a { color:var(--accent) }
main { max-width:1200px; margin:0 auto; padding:16px }
h1 { font-size:22px; margin:8px 0 12px }
.muted { color:var(--mute) } .small { font-size:13px } .r { text-align:right }
.top { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:#111; color:#fff }
.top a { color:#fff; text-decoration:none; margin-right:14px } .top a.on { text-decoration:underline }
.brand { font-weight:700; letter-spacing:.02em } .who { color:#aaa; font-size:13px }
.flash { background:#e8f3ec; color:var(--ok); padding:8px 16px; border-bottom:1px solid #cfe3d6 }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:12px }
.card { display:block; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; color:inherit; text-decoration:none }
.card:hover { border-color:#bbb } .card-title { font-weight:700; font-size:17px; margin-bottom:6px }
.card-row { display:flex; justify-content:space-between; font-size:14px; padding:2px 0 } .warn { color:var(--warn) } .ok { color:var(--ok) }
.dropzone { display:block; border:2px dashed #bbb; border-radius:12px; padding:28px; text-align:center; background:var(--card); cursor:pointer; margin:8px 0 }
.dropzone.over { border-color:var(--accent); background:#eef6f1 }
.filters { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin:14px 0 }
select, input, textarea, button { font:inherit; padding:7px 9px; border:1px solid #c9c7c0; border-radius:7px; background:#fff }
input[readonly] { background:#f2f1ed; color:#444 }
button { cursor:pointer } button.primary { background:var(--accent); color:#fff; border-color:var(--accent) } button.danger { color:var(--bad) }
.list { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden }
.list th, .list td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle } .list th { font-size:12px; text-transform:uppercase; color:var(--mute) }
.list td input, .list td select, .list td textarea { width:100%; padding:5px 7px }
.pill { font-size:11px; text-transform:uppercase; padding:2px 7px; border-radius:99px; background:#eee }
.pill.pending { background:#fff1dc; color:var(--warn) } .pill.booked { background:#e8f3ec; color:var(--ok) } .pill.duplicate { background:#fde4e2; color:var(--bad) } .pill.rejected { background:#eee; color:#777 }
.two { display:grid; grid-template-columns:minmax(360px, 520px) 1fr; gap:16px } @media (max-width:900px) { .two { grid-template-columns:1fr } .pane.pdf iframe { height:60vh } }
.pane { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px } .pane.pdf { padding:0; overflow:hidden } .pane.pdf iframe { width:100%; height:calc(100vh - 120px); border:0 }
.invform label { display:block; margin:10px 0 4px; font-size:13px; color:var(--mute) } .invform label input, .invform label select { display:block; width:100%; margin-top:3px; color:var(--ink); font-size:15px }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px } .grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
fieldset.split { border:1px solid var(--line); border-radius:8px; padding:8px 12px 12px; margin:12px 0 } legend { font-size:12px; color:var(--mute); padding:0 6px }
.quick { margin-top:8px; font-size:13px } .quick button { padding:3px 8px; font-size:12px; margin-right:4px }
.flags { background:#fff7e8; border:1px solid #f1d9a8; border-radius:8px; padding:8px 12px; font-size:13px; margin:8px 0 }
.problems { background:#fdecea; border:1px solid #f3c2bd; border-radius:8px; padding:8px 12px; font-size:13px; margin:8px 0; color:var(--bad) }
.actions { display:flex; gap:8px; margin-top:14px } .actions button { padding:10px 16px }
details { margin:12px 0 } summary { cursor:pointer; color:var(--mute); font-size:13px }
.lines { width:100%; border-collapse:collapse; margin-top:6px } .lines th { font-size:11px; text-transform:uppercase; color:var(--mute); text-align:left; padding:2px 4px } .lines td { padding:2px 3px } .lines input, .lines select { padding:4px 6px; font-size:13px; width:100% }
body.login { display:grid; place-items:center; min-height:100vh } .loginbox { background:#fff; border:1px solid var(--line); border-radius:12px; padding:24px; width:320px } .loginbox label { display:block; margin:10px 0 } .loginbox input { width:100%; margin-top:4px } .loginbox button { width:100%; margin-top:12px; padding:10px }
.dot { display:inline-block; width:10px; height:10px; border-radius:99px; background:#ccc; vertical-align:middle; margin-right:4px } .dot.ok { background:var(--ok) } .dot.warn { background:var(--warn) } .dot.no { background:var(--bad) }
.close tr.ready td { background:#f3faf5 } .close tr.locked td { background:#f2f1ed; color:#666 } .close tr.probs td { border-top:0; padding-top:0 }
button.small, a.small { font-size:12px; padding:4px 8px }
.dropform { display:grid; gap:8px; margin-top:8px } .dropform input[type=file] { padding:6px }