:root {
  --green: #14352c;
  --green-2: #1f4a3c;
  --paper: #f7f4ee;
  --ink: #1c1c1c;
  --muted: #5e594f;
  --line: #e4dccb;
  --gold: #f4ead2;
  --card: #fff;
  --warn: #7a5410;
  --warn-bg: #f8efd8;
  --ok: #1d5a34;
  --ok-bg: #e5f2e8;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", "Noto Sans", sans-serif; color: var(--ink); background: var(--paper); }
a { color: var(--green); }
.layout { display: flex; min-height: 100vh; }
.side { width: 230px; background: var(--green); color: #e7e1d4; padding: 20px 14px; flex: none; }
.side .logo { font-weight: 700; color: var(--gold); }
.side .logo span, .side .who { display: block; font-weight: 500; font-size: 12px; color: #c4b48a; margin-top: 4px; }
.side nav { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.side nav a { color: #e7e1d4; text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.side nav a.on, .side nav a:hover { background: var(--green-2); color: white; }
main { flex: 1; padding: 22px 26px 40px; }
h1 { font-size: 26px; margin: 0 0 4px; }
.sub { color: var(--muted); margin: 0 0 16px; }
.cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 180px; flex: 1; }
.card .k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #7a7264; font-weight: 700; }
.card .v { font-size: 26px; font-weight: 700; margin-top: 4px; }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; }
th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #6d675c; padding: 8px; background: #f3eee4; border-bottom: 1px solid var(--line); }
td { padding: 8px; border-bottom: 1px solid #eee6d8; font-size: 14px; vertical-align: top; }
.right { text-align: right; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; border-radius: 99px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.warn { background: var(--warn-bg); color: var(--warn); }
.ok { background: var(--ok-bg); color: var(--ok); }
.note, .flash { margin: 12px 0; background: #fbf6ea; border: 1px solid #eadcbb; border-radius: 10px; padding: 10px 12px; }
form.stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 12px 0 18px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
input, select, button { font: inherit; padding: 8px; border-radius: 8px; border: 1px solid var(--line); }
button, .btn { background: var(--green); color: white; border: 0; cursor: pointer; text-decoration: none; display: inline-block; padding: 8px 12px; border-radius: 8px; }
.login { max-width: 880px; margin: 32px auto; padding: 0 16px; }
.login-box { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 18px; max-width: 420px; }
.banner { background: var(--green); color: var(--gold); padding: 10px 16px; font-size: 13px; }
.role { font-size: 12px; color: var(--muted); }