:root { --ink:#1d2433; --muted:#6b7280; --line:#e3e6ec; --brand:#1f5fa8; --brand-d:#174a84; --ok:#1e7a3c; --err:#b42318; --bg:#f5f7fa; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); font-size:15px; }
a { color:var(--brand); text-decoration:none; }
.topbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; background:var(--brand); color:#fff; padding:.7rem 1.2rem; }
.brand { font-weight:700; font-size:1.05rem; }
.brand small { display:block; font-weight:400; opacity:.85; font-size:.8rem; }
.who { font-size:.9rem; }
.role { display:inline-block; padding:1px 8px; border-radius:10px; background:#fff3; margin:0 .3rem; font-size:.75rem; }
.layout { display:flex; min-height:calc(100vh - 60px); }
.sidebar { width:200px; background:#fff; border-right:1px solid var(--line); padding:.8rem 0; flex-shrink:0; }
.sidebar a { display:block; padding:.55rem 1.1rem; color:var(--ink); }
.sidebar a:hover { background:var(--bg); }
.sidebar a.active { background:#e8f0fb; color:var(--brand); font-weight:600; border-left:3px solid var(--brand); }
.content { flex:1; padding:1.2rem 1.5rem; min-width:0; overflow-x:auto; }
h1 { font-size:1.4rem; margin:.2rem 0 1rem; }
h2 { font-size:1.1rem; margin:1.4rem 0 .6rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1rem; margin-bottom:1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.8rem; margin-bottom:1rem; }
.stat { background:#fff; border:1px solid var(--line); border-radius:8px; padding:.8rem 1rem; }
.stat .v { font-size:1.35rem; font-weight:700; }
.stat .l { color:var(--muted); font-size:.8rem; }
table { width:100%; border-collapse:collapse; background:#fff; margin-bottom:1rem; }
th, td { padding:.45rem .55rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:.9rem; }
th { background:#f0f3f8; font-weight:600; }
td.num, th.num { text-align:right; white-space:nowrap; }
tr.void td { color:var(--muted); text-decoration:line-through; }
tr.low td { background:#fff4f2; }
form.inline { display:inline; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.7rem; align-items:end; }
label { display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--muted); }
label.check { flex-direction:row; align-items:center; gap:.4rem; color:var(--ink); }
input, select, textarea { font:inherit; padding:.45rem .55rem; border:1px solid #c9ced8; border-radius:6px; background:#fff; color:var(--ink); width:100%; }
textarea { min-height:70px; }
.btn { display:inline-block; background:var(--brand); color:#fff; border:0; padding:.5rem .95rem; border-radius:6px; cursor:pointer; font:inherit; }
.btn:hover { background:var(--brand-d); }
.btn.small { padding:.25rem .6rem; font-size:.8rem; }
.btn.secondary { background:#6b7280; }
.btn.danger { background:var(--err); }
.flash { padding:.6rem .8rem; border-radius:6px; margin-bottom:1rem; }
.flash.ok { background:#e7f6ec; color:var(--ok); border:1px solid #bfe5cc; }
.flash.err { background:#fdeceb; color:var(--err); border:1px solid #f5c2bd; }
.muted { color:var(--muted); font-size:.85rem; }
.toolbar { display:flex; gap:.6rem; flex-wrap:wrap; align-items:end; margin-bottom:1rem; }
.toolbar label { min-width:150px; }
.items-table input { padding:.3rem .4rem; }
.totals { display:flex; gap:1.5rem; flex-wrap:wrap; font-weight:600; margin:.6rem 0; }
.auth-body { background:linear-gradient(135deg,#1f5fa8,#0f2d50); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }
.auth-card { background:#fff; border-radius:10px; padding:1.6rem; width:100%; max-width:440px; }
.auth-card h1 { font-size:1.2rem; }
.auth-card form { display:flex; flex-direction:column; gap:.8rem; }
.auth-card .btn { align-self:flex-start; }
.wide-form { max-width:820px; }
@media (max-width:760px) {
  .layout { flex-direction:column; }
  .sidebar { width:100%; display:flex; flex-wrap:wrap; padding:.3rem; }
  .sidebar a { padding:.4rem .6rem; border:0; }
  .sidebar a.active { border-left:0; border-bottom:3px solid var(--brand); }
}
@media print {
  .topbar, .sidebar, .no-print, .btn { display:none !important; }
  .content { padding:0; }
}