/* Palette and type lifted from boothhire.co.uk so the tool feels like part of the business. */
:root {
  --brand:#29abe2; --brand-dark:#1c87b5; --brand-tint:#eaf7fd;
  --ink:#333; --muted:#8f8f8f; --bg:#fff; --panel:#f7f9fa; --line:#e2e2e2;
  --danger:#c1272d; --danger-tint:#fdeceD; --warn:#fbb03b; --warn-tint:#fff6e6; --ok:#8cc63f; --ok-tint:#f1f9e6;
  --font:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,sans-serif;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; font:16px/1.5 var(--font); background:var(--bg); color:var(--ink); }

.brandbar { background:var(--brand); color:#fff; padding:14px 16px; }
.brandbar .logo { font-weight:700; font-size:19px; letter-spacing:-.02em; }
.brandbar .logo span { font-weight:300; }
.brandbar small { display:block; opacity:.9; font-size:13px; }

button, .btn { font:inherit; padding:12px 18px; border:0; border-radius:6px; background:var(--brand); color:#fff; font-weight:600; cursor:pointer; }
button:hover { background:var(--brand-dark); }
button.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); font-weight:400; }
button.ghost:hover { background:var(--panel); }
button.danger { background:var(--danger); }

input, select, textarea { font:inherit; width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand); outline-offset:-1px; border-color:var(--brand); }
label { font-size:13px; font-weight:600; color:var(--ink); display:block; margin:16px 0 6px; }

.pill { display:inline-block; font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; background:var(--panel); color:var(--muted); }
.pill.critical { background:var(--danger-tint); color:var(--danger); }
.pill.high { background:var(--warn-tint); color:#a06a12; }
.pill.resolved { background:var(--ok-tint); color:#5a8a1f; }
.pill.on { background:var(--ok-tint); color:#5a8a1f; }
.pill.off { background:var(--panel); color:var(--muted); }

.tabs { display:flex; gap:2px; background:var(--brand-dark); padding:0 16px; }
.tabs a { padding:11px 16px; color:#fff; text-decoration:none; font-size:14px; opacity:.75; border-bottom:3px solid transparent; }
.tabs a:hover { opacity:1; }
.tabs a.sel { opacity:1; border-bottom-color:#fff; font-weight:600; }