:root{
  --bg:#f4f5f7; --card:#fff; --ink:#1b1d21; --muted:#6b7280; --line:#e3e6ea;
  --accent:#1f4f8b; --accent-soft:#eef3fa; --ok:#0f7b4f; --warn:#b45309; --danger:#b42318;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-size:15px; line-height:1.6; -webkit-text-size-adjust:100%;
}
a{color:var(--accent)}
header.bar{
  background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
header.bar .inner{
  max-width:1180px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
header.bar .logo{font-weight:700; letter-spacing:.02em; font-size:16px; margin-right:auto}
header.bar nav a{margin-left:14px; text-decoration:none; font-size:14px; color:var(--muted)}
header.bar nav a.on{color:var(--accent); font-weight:600}
main{max-width:1180px; margin:0 auto; padding:22px 16px 80px}
h1.page{font-size:20px; margin:0 0 4px}
p.lead{color:var(--muted); font-size:13px; margin:0 0 20px}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:18px}
.card h2{font-size:14px; margin:0 0 14px; letter-spacing:.04em}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
label.f{display:block; font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:600}
input[type=text],input[type=date],input[type=number],input[type=password],select,textarea{
  width:100%; padding:9px 10px; border:1px solid #cfd5dd; border-radius:7px; font:inherit;
  background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
textarea{min-height:70px; resize:vertical}
.f-group{flex:1 1 180px; min-width:140px}
.btn{
  background:var(--accent); color:#fff; border:none; border-radius:8px; padding:11px 20px;
  font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; text-align:center;
}
.btn:disabled{opacity:.5; cursor:default}
.btn.ghost{background:#fff; color:var(--accent); border:1px solid #c5d5e8}
.btn.sm{padding:7px 13px; font-size:13px}
.btn.danger{background:#fff; color:var(--danger); border:1px solid #f0c8c4}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:8px 8px; border-bottom:1px solid var(--line); text-align:left}
th{font-size:11px; color:var(--muted); letter-spacing:.05em; font-weight:600; white-space:nowrap}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr.zero td{color:#a7adb6}
.badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700}
.badge.draft{background:#eef0f3; color:var(--muted)}
.badge.issued{background:#fff4e3; color:var(--warn)}
.badge.paid{background:#e6f5ee; color:var(--ok)}
.badge.void{background:#fdeaea; color:var(--danger)}
.flash{padding:11px 14px; border-radius:8px; font-size:14px; margin-bottom:16px; display:none}
.flash.err{background:#fdeaea; color:var(--danger); border:1px solid #f4cfcb; display:block}
.flash.ok{background:#e6f5ee; color:var(--ok); border:1px solid #bfe3d1; display:block}
.flash.warn{background:#fff7e8; color:var(--warn); border:1px solid #f2dcb4; display:block}
.drop{
  border:2px dashed #c3cbd6; border-radius:12px; padding:34px 20px; text-align:center;
  background:#fbfcfd; cursor:pointer; transition:border-color .15s, background .15s;
}
.drop.hover{border-color:var(--accent); background:var(--accent-soft)}
.drop .big{font-size:16px; font-weight:600; margin-bottom:6px}
.drop .small{font-size:12px; color:var(--muted)}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start}
.memo-pane{position:sticky; top:74px}
.memo-pane img,.memo-pane embed{width:100%; border:1px solid var(--line); border-radius:8px; background:#fff}
.qty-input{width:74px; text-align:right; font-variant-numeric:tabular-nums}
tr.ai-filled .qty-input{background:#fffbe9; border-color:#e6cf94}
tr.low-conf .qty-input{background:#fdeee9; border-color:#e8b3a4}
.conf{font-size:10px; padding:1px 6px; border-radius:4px; background:#eef0f3; color:var(--muted)}
.conf.low{background:#fdeaea; color:var(--danger)}
.conf.medium{background:#fff4e3; color:var(--warn)}
.total-strip{
  position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line);
  padding:12px 16px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; z-index:15;
}
.total-strip .grand{font-size:22px; font-weight:700; margin-right:auto; font-variant-numeric:tabular-nums}
.total-strip .grand small{font-size:12px; color:var(--muted); font-weight:500; margin-right:8px}
.linkbox{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px}
.linkbox input{flex:1 1 320px; font-size:13px; background:#f7f8fa}
.spinner{
  width:18px; height:18px; border:2.5px solid #d6dde6; border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite; display:inline-block; vertical-align:-3px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.muted{color:var(--muted); font-size:12px}
.center-card{max-width:380px; margin:16vh auto; padding:0 16px}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .memo-pane{position:static}
  main{padding:16px 12px 90px}
  .card{padding:16px}
}