:root { --bg:#f6f7f9; --card:#fff; --text:#1d2330; --muted:#6b7385; --line:#e3e6ec; --accent:#1f5fa8;
  --ok:#1e7a46; --warn:#a86a00; --err:#b3261e; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
header { background:#14325a; color:#fff; padding:0 16px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
header .brand { font-weight:700; padding:12px 0; }
header nav { display:flex; gap:2px; flex-wrap:wrap; }
header nav a { color:#cfdbee; text-decoration:none; padding:12px 10px; }
header nav a.on, header nav a:hover { color:#fff; background:rgba(255,255,255,.1); }
header .right { margin-left:auto; } header .right a { color:#cfdbee; }
main { max-width:1200px; margin:0 auto; padding:20px 16px 60px; }
h1 { font-size:22px; margin:0 0 16px; } h2 { font-size:17px; margin:24px 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:16px; overflow-x:auto; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600; }
td.r, th.r { text-align:right; white-space:nowrap; } tr.sum td { font-weight:700; border-top:2px solid var(--line); }
a { color:var(--accent); } .muted { color:var(--muted); } .small { font-size:12px; }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; background:#eef1f5; color:#3a4255; white-space:nowrap; }
.b-paid,.b-sent,.b-active { background:#e3f4ea; color:var(--ok); } .b-unpaid,.b-issued { background:#fff3dc; color:var(--warn); }
.b-overdue,.b-ported_out,.b-terminated { background:#fde8e6; color:var(--err); } .b-draft { background:#eef1f5; }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:16px; background:#e3f4ea; color:#14532d; }
.flash.error { background:#fde8e6; color:#7f1d1d; }
.warn { background:#fff7e6; border:1px solid #f1d59b; border-radius:6px; padding:10px 14px; margin-bottom:16px; }
.warn li { margin:2px 0; }
form.inline { display:inline; }
label { display:block; font-size:12px; color:var(--muted); margin:8px 0 3px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width:100%; padding:7px 9px; border:1px solid #cdd3dd; border-radius:6px; font:inherit; background:#fff; }
textarea { min-height:90px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0 16px; }
button, .btn { display:inline-block; padding:7px 14px; border-radius:6px; border:1px solid var(--accent); background:var(--accent);
  color:#fff; font:inherit; cursor:pointer; text-decoration:none; }
button.secondary, .btn.secondary { background:#fff; color:var(--accent); }
button.danger { background:#fff; border-color:var(--err); color:var(--err); }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.stat b { display:block; font-size:20px; }
details summary { cursor:pointer; color:var(--accent); }
.timeline .item { border-left:3px solid var(--line); padding:4px 0 10px 12px; }
.timeline .item.out { border-color:var(--accent); } .timeline .item.note { border-color:#c7a600; }
pre { white-space:pre-wrap; font:inherit; margin:6px 0 0; }
@media (max-width:640px) { header nav a { padding:8px 6px; } main { padding:14px 16px 40px; } }