:root{
  --bg:#f4f5f7; --panel:#fff; --ink:#1d2430; --ink2:#566070; --line:#dde1e7; --line2:#eceff3;
  --acc:#0f5c63; --acc2:#0b464c; --accbg:#e6f1f2; --warn:#a15c00; --warnbg:#fff4e0; --bad:#b42318; --badbg:#fdecea;
  --ok:#1d7a3e; --okbg:#e7f5ec; --side:#17222b; --side2:#22313c; --sideink:#c9d3dc;
  --r:6px; --font: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:13px/1.45 var(--font);color:var(--ink);background:var(--bg)}
a{color:var(--acc)} button,input,select,textarea{font:inherit;color:inherit}
.boot{padding:60px;text-align:center;color:var(--ink2)}
.num,td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* layout */
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh;background:linear-gradient(to right,var(--side) 220px,transparent 220px)}
.side{background:var(--side);color:var(--sideink);padding:14px 0;position:sticky;top:0;height:100vh;overflow:auto}
.brand{padding:4px 18px 16px;font-weight:700;color:#fff;font-size:15px;letter-spacing:.2px}
.brand small{display:block;font-weight:400;color:#8fa1b0;font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav h6{margin:14px 18px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:#7f92a2;font-weight:600}
.nav a{display:flex;justify-content:space-between;align-items:center;padding:6px 18px;color:var(--sideink);text-decoration:none;border-left:3px solid transparent}
.nav a:hover{background:var(--side2);color:#fff}
.nav a.on{background:var(--side2);color:#fff;border-left-color:#4fb3bb}
.badge{background:#d9822b;color:#fff;border-radius:10px;padding:0 7px;font-size:11px;font-weight:600}
.main{min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:10px 22px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .title{font-size:16px;font-weight:600;flex:1}
.top .who{color:var(--ink2);font-size:12px}
.content{padding:18px 22px 60px}

/* controls */
.btn{border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:6px 12px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:#b9c1cc;background:#fafbfc}
.btn.p{background:var(--acc);border-color:var(--acc);color:#fff}.btn.p:hover{background:var(--acc2)}
.btn.d{color:var(--bad);border-color:#efc2bd}.btn.d:hover{background:var(--badbg)}
.btn.s{padding:3px 8px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}
.btn.link{border:none;background:none;color:var(--acc);padding:2px 4px}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=email],input[type=month],select,textarea{
  border:1px solid var(--line);border-radius:5px;padding:5px 8px;background:#fff;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid #9fd0d4;border-color:var(--acc)}
input.n{text-align:right;font-variant-numeric:tabular-nums}
textarea{width:100%;min-height:60px}
label.f{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink2)}
label.f > input,label.f > select{color:var(--ink);font-size:13px}
label.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.sp{flex:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:14px}
.card h3{margin:0 0 10px;font-size:14px}
.muted{color:var(--ink2)} .small{font-size:12px}
.pill{display:inline-block;border-radius:10px;padding:1px 8px;font-size:11.5px;font-weight:600;background:#eef0f3;color:#3d4653;white-space:nowrap}
.st-draft{background:#eef0f3}.st-returned{background:var(--warnbg);color:var(--warn)}.st-in_review,.st-in_approval{background:#e7effd;color:#2a56b8}
.st-posted{background:var(--okbg);color:var(--ok)}.st-rejected,.st-cancelled{background:var(--badbg);color:var(--bad)}
.tag{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:11px;color:var(--ink2)}
.alert{padding:9px 12px;border-radius:6px;margin-bottom:12px;border:1px solid}
.alert.w{background:var(--warnbg);border-color:#f0d09b;color:#6d4300}.alert.e{background:var(--badbg);border-color:#f2c0ba;color:var(--bad)}.alert.i{background:var(--accbg);border-color:#b8dadd;color:#0b464c}

/* tables */
table.t{border-collapse:collapse;width:100%;background:#fff}
table.t th{background:#f7f8fa;color:var(--ink2);font-weight:600;font-size:12px;text-align:left;border-bottom:1px solid var(--line);padding:6px 8px;white-space:nowrap;position:sticky;top:0}
table.t td{border-bottom:1px solid var(--line2);padding:5px 8px;vertical-align:middle}
table.t tr.click{cursor:pointer} table.t tr.click:hover td{background:#f5fafa}
table.t tfoot td{font-weight:600;border-top:1px solid var(--line);background:#fafbfc}
.tw{overflow:auto;border:1px solid var(--line);border-radius:8px;max-height:calc(100vh - 230px)}
.tw.free{max-height:none}

/* entry grid */
table.lines td{padding:3px 4px;border-bottom:1px solid var(--line2)}
table.lines input,table.lines select{width:100%}
table.lines td.ln{color:var(--ink2);text-align:center;width:28px}
table.lines tr.tax td{background:#fafbfc;color:var(--ink2);font-size:12px}
.totals{display:flex;gap:22px;justify-content:flex-end;padding:8px 6px;font-variant-numeric:tabular-nums}
.totals b{font-size:14px}.diff-bad{color:var(--bad)}.diff-ok{color:var(--ok)}
.route{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.route .step{display:flex;align-items:center;gap:4px;background:#f7f8fa;border:1px solid var(--line);border-radius:6px;padding:3px 6px}
.route .arrow{color:#9aa4b1}
.timeline{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch}
.timeline .st{border:1px solid var(--line);border-radius:6px;padding:6px 10px;min-width:140px;background:#fff}
.timeline .st.pending{border-color:#7aa2ec;background:#f2f6fe}.timeline .st.approved{border-color:#9dd3ae;background:#f2faf5}
.timeline .st.returned,.timeline .st.rejected{border-color:#f0b8b1;background:#fef5f4}
.timeline .st .r{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink2)}
.bookpick{display:flex;gap:8px;flex-wrap:wrap}
.bookpick button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 14px;cursor:pointer;text-align:left;min-width:150px}
.bookpick button.on{border-color:var(--acc);background:var(--accbg);box-shadow:0 0 0 1px var(--acc) inset}
.bookpick b{display:block;font-size:14px}.bookpick span{font-size:11.5px;color:var(--ink2)}

/* report */
.rep{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 26px}
.rep .rh{margin-bottom:14px}.rep .rh h2{margin:0;font-size:17px}.rep .rh div{color:var(--ink2);font-size:12px}
table.r{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
table.r th{font-size:11.5px;color:var(--ink2);text-align:left;border-bottom:1.5px solid #3b4450;padding:5px 8px;white-space:nowrap}
table.r td{padding:3px 8px;border-bottom:1px solid #f0f2f5;white-space:nowrap}
table.r td.txt{white-space:normal}
table.r tr.h td{font-weight:700;padding-top:12px;font-size:12.5px;text-transform:none}
table.r tr.b td{font-weight:600}
table.r tr.t td{font-weight:600;border-top:1px solid #5b6572}
table.r tr.gt td{font-weight:700;border-top:1px solid #3b4450;border-bottom:2.5px double #3b4450}
table.r tr.sub td{color:var(--ink2);font-size:12px}
table.r tr.err td{color:var(--bad);font-weight:700}
table.r td.neg{color:#9a1b12}
.rep .notes{margin-top:12px;font-size:11.5px;color:var(--ink2)}

/* modal / toast */
.ov{position:fixed;inset:0;background:rgba(20,28,36,.45);display:flex;align-items:flex-start;justify-content:center;padding:60px 16px;z-index:50;overflow:auto}
.modal{background:#fff;border-radius:10px;min-width:380px;max-width:760px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.modal .mh{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:600;display:flex}
.modal .mb{padding:14px 16px}
.modal .mf{padding:10px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
#toast{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:8px}
#toast div{background:#1f2a33;color:#fff;padding:9px 14px;border-radius:7px;box-shadow:0 6px 20px rgba(0,0,0,.2);max-width:440px}
#toast div.e{background:var(--bad)}

/* login */
.login{max-width:360px;margin:12vh auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px}
.login h1{font-size:18px;margin:0 0 4px}.login .grid{margin-top:16px}

#printArea{display:none}
@media print{
  body{background:#fff}
  #app,#modalRoot,#toast{display:none!important}
  #printArea{display:block}
  .rep{border:none;padding:0}
  table.r th{position:static}
  table.r tr{page-break-inside:avoid}
  .pf{position:fixed;bottom:0;left:0;right:0;font-size:9px;color:#666;display:flex;justify-content:space-between}
}
@media (max-width:900px){.shell{grid-template-columns:1fr}.side{position:static;height:auto}.g3,.g4,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}}