:root { --ink:#1b1f23; --muted:#6a737d; --line:#d8dce0; --accent:#1f4e79; --warn:#9a5b00; --bad:#a1262a; --ok:#1d6b3a; --bg:#fff; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--accent); }
header.top { border-bottom:1px solid var(--line); padding:.6rem 1rem; display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; }
header.top .brand { font-weight:700; margin-right:.5rem; color:var(--ink); text-decoration:none; }
header.top nav { display:flex; flex-wrap:wrap; gap:.2rem 1rem; flex:1; }
header.top nav a { text-decoration:none; padding:.15rem 0; border-bottom:2px solid transparent; }
header.top nav a.on { border-color:var(--accent); font-weight:600; }
header.top .who { color:var(--muted); font-size:.9rem; display:flex; gap:.7rem; align-items:center; }
.badge { background:var(--accent); color:#fff; border-radius:9px; padding:0 .45rem; font-size:.75rem; margin-left:.2rem; }
main { max-width:1000px; margin:1.2rem auto; padding:0 1rem 3rem; }
h1 { font-size:1.4rem; margin:.2rem 0 1rem; } h2 { font-size:1.1rem; margin:1.6rem 0 .5rem; }
table { border-collapse:collapse; width:100%; margin:.4rem 0 1rem; }
th,td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:600; border-bottom:2px solid var(--ink); white-space:nowrap; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
tr.muted td { color:var(--muted); } tr.warn td { color:var(--warn); }
.table-wrap { overflow-x:auto; }
.row { display:flex; gap:1.5rem; flex-wrap:wrap; } .row > * { flex:1 1 280px; }
.panel { border:1px solid var(--line); padding:.8rem 1rem; border-radius:4px; }
.panel h2 { margin-top:0; }
.big { font-size:1.8rem; font-weight:700; line-height:1.1; } .small { font-size:.85rem; color:var(--muted); }
.btn, button { font:inherit; background:var(--accent); color:#fff; border:1px solid var(--accent); padding:.4rem .9rem; border-radius:3px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn.ghost, button.ghost { background:#fff; color:var(--accent); }
.btn.danger, button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button.link { background:none; border:0; color:var(--accent); padding:0; text-decoration:underline; }
.punch button { font-size:1.1rem; padding:.7rem 1.6rem; }
.field { margin:.6rem 0; } .field label { display:block; font-weight:600; margin-bottom:.15rem; }
input[type=text],input[type=date],input[type=time],input[type=number],input[type=month],input[type=password],input[type=email],select,textarea { width:100%; max-width:420px; font:inherit; padding:.35rem .5rem; border:1px solid #aab1b8; border-radius:3px; }
.field small { display:block; color:var(--muted); } .err { color:var(--bad); font-size:.9rem; }
.messages { list-style:none; padding:0; margin:0 0 1rem; } .messages li { padding:.5rem .8rem; border-left:4px solid var(--accent); background:#f3f6f9; margin-bottom:.4rem; }
.messages .error { border-color:var(--bad); background:#fbeeee; } .messages .warning { border-color:var(--warn); background:#fbf3e6; } .messages .success { border-color:var(--ok); background:#eef7f1; }
.pill { font-size:.8rem; padding:.05rem .5rem; border:1px solid var(--line); border-radius:9px; white-space:nowrap; }
.pill.APPROVED,.pill.FINAL,.pill.DONE { border-color:var(--ok); color:var(--ok); } .pill.PENDING,.pill.DRAFT,.pill.IN_PROGRESS { border-color:var(--warn); color:var(--warn); }
.pill.REJECTED,.pill.CANCELLED,.pill.BLOCKED { border-color:var(--bad); color:var(--bad); }
.toolbar { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin:.3rem 0 .8rem; }
form.inline { display:inline; }
@media print { header.top, .noprint, .messages { display:none !important; } main { margin:0; max-width:none; } a { color:var(--ink); text-decoration:none; } }