@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');
:root{
  --bg:#F1F3F5; --surface:#FFFFFF; --border:#DBE0E5; --ink:#1A2530; --ink-soft:#5C6B78;
  --accent:#2F5D50; --accent-soft:#E6EFEA;
  --amber:#96650F; --amber-bg:#FBF0DC;
  --green:#1F7A4D; --green-bg:#E5F4EB;
  --red:#AE3B29; --red-bg:#FBE9E5;
  --lock:#7A6A2E; --lock-bg:#F6EFDA;
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'IBM Plex Sans', system-ui, sans-serif; }
.num{font-family:'IBM Plex Mono', monospace;}
header.top{ background:var(--ink); color:#fff; padding:20px 26px 0 26px; }
header.top .brandrow{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:6px; }
header.top h1{ font-family:'IBM Plex Serif', serif; font-weight:600; font-size:20px; margin:0; }
header.top .sub{ font-size:12.5px; color:#A9B7C2; }
nav.tabs{ display:flex; gap:2px; }
nav.tabs a{ color:#B9C4CD; text-decoration:none; font-size:13px; font-weight:500; padding:10px 15px; display:inline-block; border-bottom:2px solid transparent; }
nav.tabs a.active{ color:#fff; border-bottom:2px solid var(--accent-soft); }
main{ max-width:1100px; margin:0 auto; padding:24px; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:20px 22px; margin-bottom:20px; }
.card h2{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin:0 0 14px 0; font-weight:600; }
.card h2.formlabel{ text-transform:none; letter-spacing:0; font-size:14px; color:var(--ink); }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:4px; }
.field input, .field select{ width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:5px; font-family:inherit; font-size:13.5px; background:#FCFCFD; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
table.mini{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.mini th{ text-align:left; font-size:10.5px; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--border); padding:6px 7px; }
table.mini td{ padding:6px 7px; border-bottom:1px solid #EDEFF1; }
table.mini td input, table.mini td select{ width:100%; padding:5px 6px; font-size:12.5px; border:1px solid var(--border); border-radius:4px; }
table.mini tfoot td{ font-weight:600; border-top:1px solid var(--ink); border-bottom:none; }
table.mini tr.auto td{ background:#F3F8F5; }
.amt{ text-align:right; }
.addrow{ font-size:12px; color:var(--accent); margin-top:8px; cursor:pointer; display:inline-block; }
.tag-auto{ font-size:10px; background:var(--accent-soft); color:var(--accent); padding:1px 6px; border-radius:10px; margin-left:4px; }
.badge{ display:inline-block; font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; }
.badge.pending{ background:var(--amber-bg); color:var(--amber); }
.badge.approved{ background:var(--green-bg); color:var(--green); }
.badge.locked{ background:var(--lock-bg); color:var(--lock); }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; background:#F0F2F4; border:1px solid var(--border); padding:6px 11px; border-radius:6px; }
.chip-active{ background:var(--accent-soft); border-color:#CBDFD4; color:var(--accent); font-weight:600; }
.btnrow{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.btn{ font-family:inherit; font-size:13px; font-weight:600; padding:9px 16px; border-radius:6px; border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-block; }
.btn.primary{ background:var(--accent); color:#fff; }
.btn.ghost{ background:#fff; border-color:var(--border); color:var(--ink); }
.btn.warn{ background:#fff; border-color:var(--red); color:var(--red); }
.btn.small{ padding:5px 11px; font-size:12px; }
.noteband{ background:var(--accent-soft); border:1px solid #CBDFD4; color:#2A4A40; font-size:13px; padding:10px 14px; border-radius:6px; margin-bottom:16px; }
.noteband.warn2{ background:var(--lock-bg); border-color:#E3D6A8; color:var(--lock); }
.codechart-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid #EDEFF1; font-size:12.5px; }
.codechart-row .c{ font-family:'IBM Plex Mono', monospace; font-weight:600; color:var(--accent); width:60px; }

/* login */
.login-body{ display:flex; align-items:center; justify-content:center; height:100vh; }
.login-card{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:30px 34px; width:340px; }
.login-co{ font-family:'IBM Plex Serif', serif; font-weight:700; font-size:20px; text-align:center; }
.login-sub{ text-align:center; color:var(--ink-soft); font-size:12.5px; margin-bottom:20px; }

/* voucher / print */
.voucher{ background:#fff; border:1px solid #C9CFD4; padding:18mm 16mm; font-size:12px; }
.voucher .vhead{ text-align:center; margin-bottom:12px; }
.voucher .vhead .co{ font-family:'IBM Plex Serif', serif; font-weight:700; font-size:18px; }
.voucher .vhead .addr{ font-size:10.5px; color:#555; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:4px 0; margin:6px 0; }
.voucher .vtitle{ text-align:center; font-weight:600; text-decoration:underline; margin:8px 0 12px 0; }
.voucher table{ width:100%; border-collapse:collapse; font-size:11.5px; margin-bottom:9px;}
.voucher th, .voucher td{ border:1px solid #999; padding:5px 6px; }
.voucher th{ background:#F3F4F5; text-align:left; }
.voucher .metarow{ display:flex; justify-content:space-between; font-size:11.5px; margin-bottom:8px; }
.voucher .sign{ display:flex; justify-content:space-between; margin-top:30px; font-size:11px; }
.voucher .sign div{ border-top:1px solid #999; padding-top:4px; width:150px; text-align:center; }
.voucher .footnote{ font-size:10px; color:#666; margin-top:8px; }
.printbar{ text-align:center; padding:14px; }
@media print{
  .no-print, .printbar{ display:none; }
  body{ background:#fff; }
  .voucher{ border:none; margin:0 !important; }
  .single-page{ page-break-inside:avoid; }
  @page{ size:A4; margin:0; }
}