:root { --ink:#1c2430; --muted:#6b7686; --line:#dde3ea; --brand:#b45309; --brand2:#92400e; --bg:#f6f7f9; --ok:#15803d; --warn:#b91c1c; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--ink); background:var(--bg); }
#topbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#111827; color:#fff; padding:10px 16px; position:sticky; top:0; z-index:10; }
#topbar .brand { font-weight:700; }
#topbar .brand span { font-weight:400; color:#fbbf24; font-size:.9em; }
#mainnav { display:flex; gap:4px; flex-wrap:wrap; }
#mainnav a { color:#e5e7eb; text-decoration:none; padding:6px 10px; border-radius:8px; font-size:.92em; }
#mainnav a:hover, #mainnav a.active { background:#374151; color:#fff; }
#userbox { margin-left:auto; font-size:.9em; color:#d1d5db; }
#userbox button { margin-left:8px; }
main { max-width:1180px; margin:0 auto; padding:18px 14px 60px; }
main.narrow { max-width:560px; }
h1 { font-size:1.35rem; margin:.2em 0 .6em; }
h2 { font-size:1.1rem; margin:1.1em 0 .5em; }
.muted { color:var(--muted); }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:10px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.kpi .v { font-size:1.5rem; font-weight:700; }
.kpi .l { color:var(--muted); font-size:.85em; }
button { background:var(--brand); color:#fff; border:0; border-radius:8px; padding:8px 14px; cursor:pointer; font-size:.95em; }
button:hover { background:var(--brand2); }
button.ghost { background:#eef1f4; color:var(--ink); }
button.small { padding:4px 9px; font-size:.85em; }
button.danger { background:var(--warn); }
input, select, textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; margin:4px 0 10px; background:#fff; }
label { display:block; font-size:.92em; font-weight:600; }
label.check { font-weight:400; }
label.check input { width:auto; margin-right:6px; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:.93em; vertical-align:top; }
th { background:#f1f4f8; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.78em; font-weight:700; background:#e5e7eb; }
.pill.New { background:#e0e7ff; } .pill.Booked { background:#dbeafe; } .pill.Dispatched { background:#cffafe; }
.pill.EnRoute { background:#fef9c3; } .pill.OnSite { background:#ffedd5; } .pill.Quoted { background:#fae8ff; }
.pill.Approved { background:#dcfce7; } .pill.Done { background:#bbf7d0; } .pill.Collected { background:#15803d; color:#fff; }
.pill.Callback { background:#fee2e2; } .pill.Cancelled { background:#9ca3af; color:#fff; }
.pill.emg { background:var(--warn); color:#fff; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.jobcard { border-left:5px solid var(--brand); }
.jobcard a { color:var(--brand2); font-weight:700; text-decoration:none; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row > * { flex:0 0 auto; }
.grow { flex:1 1 auto; }
img.photo { max-width:140px; border-radius:8px; border:1px solid var(--line); }
.big { font-size:1.15em; }
.ok { color:var(--ok); font-weight:700; }
.neg { color:var(--warn); font-weight:700; }
@media (max-width:640px){ .kpi .v{font-size:1.25rem;} main{padding:12px 8px 50px;} }