:root{
  --bg:#f6f7f9; --panel:#fff; --line:#e4e7ec; --text:#1c1f23; --dim:#7b8290;
  --in:#0a6cff; --out:#c2410c; --good:#0f8a53; --bad:#c62828; --accent:#111418;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--in); text-decoration:none}
a:hover{text-decoration:underline}
main{padding:20px 24px 60px; max-width:1720px; margin:0 auto}

.topbar{
  display:flex; align-items:center; gap:28px; padding:0 24px; height:56px;
  background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.brand{font-weight:650; font-size:15px; letter-spacing:.2px}
.brand .sub{color:var(--dim); font-weight:400; font-size:12px; margin-left:8px}
.companypick{position:relative}
.cpickbtn{
  display:flex; align-items:center; gap:7px; background:#eef4ff; border:0; border-radius:9px;
  padding:6px 11px; cursor:pointer; font-family:inherit; max-width:300px;
}
.cpickbtn:hover{background:#e4edff}
.cpicklabel{font-size:13.5px; font-weight:600; color:#22406f; max-width:230px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cpickcount{background:#0a6cff; color:#fff; font-size:11px; border-radius:99px;
  padding:0 6px; line-height:16px; font-weight:600}
.cpickbtn .caret{color:#22406f; font-size:11px}
.cpickmenu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:320px; max-width:420px;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow:0 12px 32px rgba(20,25,40,.14);
}
.cpicksearch{
  width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px;
  padding:7px 10px; font-size:13px; font-family:inherit; margin-bottom:6px;
}
.cplist{max-height:min(60vh,420px); overflow:auto}
.cpickitem{
  display:flex; flex-direction:column; gap:2px; padding:7px 10px; border-radius:8px;
  text-decoration:none; color:var(--text); position:relative;
}
.cpickitem:hover{background:#f3f6fb; text-decoration:none}
.cpickitem.on{background:#eef4ff}
.cpickitem .cpname{font-size:13.5px; font-weight:600; padding-right:52px}
.cpickitem .cpmeta{font-size:11.5px; color:var(--dim)}
.cpickitem .badge{position:absolute; right:10px; top:9px}
.cpfoot{border-top:1px solid var(--line); margin-top:5px; padding:7px 10px 2px; font-size:12.5px}
.usermenu{display:flex; align-items:center; gap:10px; padding-left:12px; border-left:1px solid var(--line)}
.usermenu .who{font-size:12.5px; color:#3b4250; line-height:1.25}
.usermenu .who .mini{display:block; color:var(--dim); font-size:11px}
.usermenu a{font-size:12.5px; color:#7b8290}
.topbar nav{display:flex; gap:4px; flex:1}
.topbar nav a{
  padding:6px 12px; border-radius:8px; color:#4a5160; font-size:13.5px;
}
.topbar nav a:hover{background:#f1f2f4; text-decoration:none}
.topbar nav a.on{background:var(--accent); color:#fff}
.modeswitch{display:flex; background:#f1f2f4; border-radius:9px; padding:3px}
.modeswitch a{padding:5px 14px; border-radius:7px; font-size:13px; color:#5b6270}
.modeswitch a.on{background:#fff; color:#111; box-shadow:0 1px 2px rgba(0,0,0,.08); font-weight:600}
.modeswitch a:hover{text-decoration:none}

.cards{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; display:flex; flex-direction:column; gap:2px;
}
.card .k{font-size:12.5px; color:var(--dim)}
.card .v{font-size:24px; font-weight:640; font-variant-numeric:tabular-nums; letter-spacing:-.4px}
.card .v small{font-size:13px; font-weight:400; color:var(--dim)}
.card .f{font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums}
.card.in .v{color:var(--in)} .card.out .v{color:var(--out)}
.card.stock .v{color:var(--good)} .card.gross .v{color:var(--accent)}

.notice{
  display:flex; flex-wrap:wrap; gap:6px 22px; background:#fff8e6; border:1px solid #f2e0b5;
  color:#7a5b12; border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13px;
}
.filters{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap}
.filters input,.filters select{
  border:1px solid var(--line); background:var(--panel); border-radius:9px;
  padding:8px 11px; font-size:13.5px; color:var(--text); font-family:inherit;
}
.filters .search{min-width:280px; flex:1; max-width:420px}
.filters button{
  border:0; background:var(--accent); color:#fff; border-radius:9px; padding:8px 18px;
  font-size:13.5px; cursor:pointer; font-family:inherit;
}
.btn.ghost{
  border:1px solid var(--line); background:var(--panel); border-radius:9px; padding:8px 14px;
  font-size:13.5px; color:#333;
}
.btn.ghost:hover{text-decoration:none; background:#f7f8fa}

.tablewrap{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:auto; max-height:calc(100vh - 330px)}
table{border-collapse:separate; border-spacing:0; width:100%; font-size:13px}
thead th{
  position:sticky; top:0; background:#fafbfc; z-index:2; text-align:right; font-weight:600;
  color:#545b68; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; font-size:12.5px;
}
thead th.l{text-align:left}
thead th.wide{min-width:280px}
tbody td{padding:9px 12px; border-bottom:1px solid #f1f2f5; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
tbody td.l{text-align:left}
tbody td.wide{white-space:normal; min-width:280px; line-height:1.35}
tbody td.num{font-variant-numeric:tabular-nums}
tbody td.mono,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px}
tbody td.dim,.dim{color:var(--dim)}
tbody td.strong{font-weight:640}
tbody tr:hover td{background:#fafbfd}
tr.row-short td{background:#fff5f5}
tr.row-short:hover td{background:#ffeced}
tr.row-noin td{background:#fbfbfc; color:#8b909c}
tr.row-zero td{background:#fdfdf6}
.en{display:block; color:#98a0ad; font-size:11.5px; margin-top:1px}

.badge{
  display:inline-block; font-size:11px; padding:1px 6px; border-radius:6px; margin-left:6px;
  vertical-align:1px; font-weight:500;
}
.badge.warn{background:#fff1d6; color:#8a6110}
.badge.est{background:#eef1f6; color:#5d6675}
.badge.ok{background:#e8f6ee; color:#0f7a49}
.badge.in{background:#e8f1ff; color:#0a5ad0}
.badge.out{background:#ffeee5; color:#b03d0c}
th.hl,td.hl{background:#fffaf0}
thead th.hl{background:#fdf3e0; color:#8a6110}
.empty{text-align:center!important; color:var(--dim); padding:36px!important}
.foot{color:var(--dim); font-size:12.5px; margin-top:12px; line-height:1.7}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:16px}
.panel h2{margin:0 0 10px; font-size:15px; font-weight:640}
.panel h2 .hint{font-weight:400; font-size:12.5px; color:var(--dim); margin-left:8px}
.drop{
  border:2px dashed #ccd2dc; border-radius:14px; padding:36px; text-align:center;
  background:#fbfcfe; cursor:pointer; transition:.15s;
}
.drop:hover,.drop.over{border-color:var(--in); background:#f4f8ff}
.drop .big{font-size:15px; font-weight:600; margin-bottom:6px}
.drop .small{color:var(--dim); font-size:13px}
#filenames{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px}
#filenames span{background:#eef1f6; border-radius:8px; padding:4px 10px; font-size:12.5px}
.results{margin-top:16px}
.res{border-radius:10px; padding:12px 14px; margin-bottom:10px; font-size:13px; border:1px solid var(--line); background:#fbfcfe}
.res.ok{border-color:#cfe9db; background:#f4fbf7}
.res.err{border-color:#f2cfcf; background:#fdf6f6}
.res h4{margin:0 0 6px; font-size:13.5px}
.res .kv{display:flex; flex-wrap:wrap; gap:4px 16px; color:#5b6270}
.res ul{margin:6px 0 0; padding-left:20px; color:#8a6110}
.res-summary{
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin-bottom:12px;
  padding:12px 16px; border-radius:10px; border:1px solid #cfe9db; background:#eefaf3;
  font-size:13.5px; color:#1d5b3f;
}
.res-summary.has-err{border-color:#f2cfcf; background:#fdf1f1; color:#8d2f2f}
.res-summary .big{font-size:15px; font-weight:640}
.res-summary .bad{color:#b3261e}
.results-head{font-size:12.5px; color:var(--dim); margin:2px 0 8px}
.res .tag{
  display:inline-block; background:#eef1f6; color:#4a5261; border-radius:7px;
  padding:1px 8px; font-size:11.5px; font-weight:400; vertical-align:1px;
}
.res .tag.dim{background:#f4f5f7; color:#828a97}
.res .kv.sub{margin-top:6px; padding-top:6px; border-top:1px dashed var(--line)}
.res .kv .bad{color:#b3261e}
.res .errmsg{color:#b3261e; font-weight:560; margin:2px 0 4px}
.res .hint{color:#8a6110; font-size:12.5px}
.res .list{margin-top:8px; font-size:12.5px}
.res .list .t{color:#8a6110; font-weight:560}
.res .list.chk .t{color:#b3261e}
.res .list ul{margin:4px 0 0; padding-left:20px; color:#8a6110; max-height:220px; overflow:auto}
.res .list.chk ul{color:#b3261e}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
form.inline{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
form.inline input,form.inline select{
  border:1px solid var(--line); border-radius:9px; padding:8px 11px; font-size:13.5px; font-family:inherit;
}
form.inline button{border:0; background:var(--accent); color:#fff; border-radius:9px; padding:8px 16px; cursor:pointer; font-family:inherit}
.mini{font-size:12.5px; color:var(--dim)}
table.simple thead th{position:static}
.cand{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.candbutton{
  border:1px solid var(--line); background:#fff; border-radius:9px; padding:6px 10px; cursor:pointer;
  font-size:12.5px; text-align:left; font-family:inherit; line-height:1.35;
}
.candbutton:hover{border-color:var(--in); background:#f4f8ff}
.candbutton b{display:block; font-family:ui-monospace,Menlo,monospace}