@font-face { font-family: "Mona Sans"; src: url("/static/MonaSans-VariableFont.ttf") format("truetype-variations"); font-weight: 200 900; font-display: swap; }
:root {
  --bg:#F7F6F1; --surface:#FFFFFF; --ink:#414545; --ink-2:#7A7E7E; --line:#E4E3DB; --line-2:#EEEDE6;
  --yellow:#FED519; --yellow-ink:#2B2D2D; --purple:#7E00EC; --purple-bg:#F3EAFF; --red:#ED3201;
  --ok:#2E8B57; --hover:#F1F0EA; --sel:#FFF6C2;
}
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.45 "Mona Sans", -apple-system, "Segoe UI", Arial, sans-serif; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
main { max-width: 1400px; margin: 0 auto; padding: 0 20px 40px; }
.top { display:flex; align-items:center; gap:18px; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; }
.logo i { display:inline-block; width:22px; height:22px; background:var(--yellow); border-radius:6px; }
.nav { display:flex; gap:4px; }
.nav a { padding:6px 10px; border-radius:7px; color:var(--ink-2); font-weight:500; }
.nav a.on { background:var(--hover); color:var(--ink); }
.badge { display:inline-block; min-width:18px; padding:0 5px; margin-left:5px; border-radius:9px; background:var(--purple); color:#fff; font-size:11px; font-weight:600; text-align:center; line-height:18px; }
.spacer { flex:1; }
.who { color:var(--ink-2); font-size:12.5px; display:flex; gap:10px; align-items:center; }
.link { background:none; border:0; color:var(--ink); text-decoration:underline; font:inherit; cursor:pointer; padding:0; }
.bar { display:flex; align-items:center; gap:10px; padding:12px 0; flex-wrap:wrap; }
.bar form { display:contents; }
input[type=text], input[type=password], input[type=number], input[type=month], select, textarea { font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px 10px; }
input:focus, select:focus, button:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.btn { border:0; border-radius:8px; padding:7px 12px; font:inherit; font-weight:600; cursor:pointer; background:var(--hover); color:var(--ink); }
.btn.primary { background:var(--yellow); color:var(--yellow-ink); }
.btn.danger { background:transparent; color:var(--red); border:1px solid var(--line); }
.btn.small { padding:4px 9px; font-size:12.5px; }
.chip { border:1px solid var(--line); border-radius:999px; padding:4px 10px; color:var(--ink-2); font-size:12.5px; background:var(--surface); }
.chip.on { background:var(--sel); border-color:var(--yellow); color:var(--ink); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.split { display:grid; grid-template-columns: 1fr 380px; gap:0; }
.list { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:9px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle; white-space:nowrap; }
td.name { white-space:normal; max-width:380px; }
th.num, td.num { text-align:right; }
tr.sec td { background:var(--bg); font-weight:600; padding:8px 12px; border-bottom:1px solid var(--line); }
tr.sec td span { color:var(--ink-2); font-weight:500; margin-left:8px; }
tr.row { cursor:pointer; }
tr.row:hover td { background:var(--hover); }
tr.row.sel td { background:var(--sel); }
.pill { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:1px 7px; font-size:11.5px; color:var(--ink-2); margin-left:6px; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--purple); margin-right:7px; vertical-align:1px; }
.pend { color:var(--purple); font-size:12px; }
.muted { color:var(--ink-2); }
.small { font-size:12.5px; }
.st.off { color:var(--red); }
.side { border-left:1px solid var(--line); padding:16px 18px; background:var(--surface); min-height:400px; }
.side h2 { margin:0 0 2px; font-size:16px; }
.side h3 { margin:16px 0 8px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); }
.kv { display:grid; grid-template-columns:110px 1fr; gap:6px 10px; font-size:13px; margin:0 0 12px; }
.kv dt { color:var(--ink-2); } .kv dd { margin:0; }
.kv input, .kv select { width:100%; padding:3px 6px; }
.sup { border:1px solid var(--line); border-radius:9px; padding:10px 12px; margin-bottom:8px; font-size:13px; }
.sup.def { border-color:var(--yellow); box-shadow:inset 3px 0 0 var(--yellow); }
.sup .n { font-weight:600; display:flex; justify-content:space-between; }
.sup .m { color:var(--ink-2); font-size:12px; }
.row2 { display:flex; gap:8px; align-items:center; margin-top:6px; }
.row2 input { width:110px; }
.hist td { padding:5px 8px; font-size:12.5px; }
.flash { background:var(--sel); border:1px solid var(--yellow); border-radius:8px; padding:8px 12px; margin:10px 0; }
.alert.error { background:#FDECE7; border:1px solid var(--red); border-radius:8px; padding:8px 12px; margin:10px 0; }
.delta.up { color:var(--red); } .delta.down { color:var(--ok); }
.grp { display:flex; align-items:center; gap:10px; margin:18px 0 6px; font-weight:600; }
.login-wrap { max-width:380px; margin:10vh auto; }
.login-wrap .card { padding:20px; }
.login-wrap label { display:block; margin:10px 0 4px; font-size:12.5px; color:var(--ink-2); }
.login-wrap input { width:100%; }
.login-wrap .btn { width:100%; margin-top:14px; }
.credential { background:var(--sel); border-radius:8px; padding:10px 12px; margin:10px 0; }
code { font-size:13px; }
h1 { font-size:18px; margin:14px 0 8px; }
.inline-form { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.field label { display:block; font-size:12px; color:var(--ink-2); margin-bottom:3px; }