:root{--ink:#161616;--paper:#F5F5F2;--card:#FFFFFF;--line:#E4E4E0;--line2:#EDEDEA;--muted:#5A5F66;--yellow:#F2C200;--yellow-soft:#FFF4CC;--warn:#8F3412;--warn-soft:#FBE9E2;--ok:#1F6B35;--ok-soft:#E3F0E6;--blue:#123F7C;--blue-soft:#E2ECF8;--link:#1A56A8}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.6}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
.shell{display:flex;min-height:100vh}
.side{width:216px;flex:none;background:var(--ink);color:#E8E8E4;padding:20px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side img{width:112px;margin:4px 10px 20px}
.side a{color:#CFCFCA;padding:9px 12px;border-radius:8px;text-decoration:none}
.side a.on{background:var(--yellow);color:var(--ink);font-weight:700}
.side a:hover{background:#2A2A2A}.side a.on:hover{background:var(--yellow)}
.side .me{margin-top:auto;padding:12px;font-size:13px;color:#A8A8A2}
.side .me a{padding:0;color:#CFCFCA}
main{flex:1;min-width:0;padding:28px 36px 60px;display:flex;flex-direction:column;gap:18px}
.bottom{display:none}
h1{margin:0;font-size:26px}h2{margin:0;font-size:17px}h3{margin:0;font-size:15px}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
.crumb{font-size:13px;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.col{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:18px}
.col.wide{flex:3 1 520px}.col.narrow{flex:2 1 300px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card.tight{padding:14px 18px;gap:6px}
.card.note{background:var(--yellow-soft);border-color:var(--yellow)}
.card.warn{background:var(--warn-soft);border-color:#F0C9B8;color:var(--warn)}
.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))}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:1/-1}
.label{font-size:13px;color:var(--muted)}
.big{font-size:24px;font-weight:700;line-height:1.3}
.muted{color:var(--muted)}.small{font-size:13px}.warn-t{color:var(--warn)}.ok-t{color:var(--ok)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;color:var(--ink);text-decoration:none;display:block}
a.kpi:hover{text-decoration:none;border-color:var(--ink)}
.kpi.alert{background:var(--warn-soft);border-color:#F0C9B8;color:var(--warn)}
table{width:100%;border-collapse:collapse;font-size:14px}
table.wide{min-width:980px}
td.nw,th{white-space:nowrap}
th{text-align:left;color:var(--muted);font-weight:500;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 6px;border-bottom:1px solid var(--line2);vertical-align:top}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}
.badge{display:inline-block;font-size:12px;padding:1px 9px;border-radius:10px;white-space:nowrap}
.b-review,.b-returned{background:var(--yellow-soft);color:#5C4A00}
.b-doing{background:var(--ink);color:#fff}
.b-final{background:var(--blue-soft);color:var(--blue)}
.b-closed{background:var(--ok-soft);color:var(--ok)}
.b-void{background:#EDEDEA;color:var(--muted)}
.b-late{background:var(--warn-soft);color:var(--warn)}
.chip{display:inline-block;font-size:13px;padding:1px 10px;border-radius:12px;border:1px solid #CFCFCA;margin:0 4px 4px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border:1px solid #CFCFCA;background:#fff;border-radius:8px;font:inherit;color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none;border-color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.btn.yellow{background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-weight:700}
.btn.danger{color:var(--warn);border-color:#F0C9B8}
.btn.sm{min-height:34px;padding:0 12px;font-size:14px}
.btns{display:flex;flex-wrap:wrap;gap:8px}
form.inline{display:inline}
label.f{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid #CFCFCA;border-radius:8px;padding:0 10px;min-height:42px;width:100%}
textarea{padding:8px 10px;min-height:72px}
input[type=checkbox],input[type=radio]{width:auto;min-height:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--yellow);border-color:var(--ink)}
.req::after{content:" *";color:var(--warn)}
.errors{color:var(--warn);font-size:13px}
.msgs{display:flex;flex-direction:column;gap:6px}
.msg{padding:10px 14px;border-radius:8px;background:var(--ok-soft);color:var(--ok)}
.msg.error,.msg.warning{background:var(--warn-soft);color:var(--warn)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.step .bar{height:6px;border-radius:3px;background:var(--line)}
.step.done .bar{background:var(--ink)}.step.now .bar{background:var(--yellow)}
.step .t{font-weight:700;font-size:14px;margin-top:6px}.step.todo .t{color:#8A8F96}
.step .d{font-size:12px;color:var(--muted)}
.progress{height:8px;background:var(--line2);border-radius:4px}.progress>div{height:8px;background:var(--ink);border-radius:4px}
.hbar{height:10px;background:var(--line2);border-radius:5px}.hbar>div{height:10px;border-radius:5px;background:var(--ink)}
.chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;height:200px;align-items:end;border-bottom:1px solid #CFCFCA;min-width:640px}
.chart .m{display:flex;gap:2px;align-items:flex-end;justify-content:center;height:100%}
.chart .m div{width:30%;border-radius:2px 2px 0 0;min-height:1px}
.chart-l{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;font-size:12px;color:var(--muted);text-align:center;min-width:640px}
.seg{display:inline-flex;background:#E8E8E4;border-radius:10px;padding:4px;gap:4px}
.seg a{padding:6px 16px;border-radius:8px;color:var(--ink);font-weight:700;text-decoration:none}
.seg a.on{background:var(--ink);color:#fff}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filters label.f{flex:1 1 130px}
.filters .q{flex:2 1 220px}
.check{display:flex;align-items:center;gap:6px;min-height:42px;font-size:14px;color:var(--ink)}
.lines-edit td{padding:6px 4px}.lines-edit input,.lines-edit select{min-height:38px;padding:0 6px}
.cards-m{display:none}
.login{max-width:380px;margin:12vh auto;padding:0 16px}
.login .card{gap:14px}
@media (max-width:860px){
  .side{display:none}
  main{padding:16px 12px 92px;gap:12px}
  h1{font-size:21px}
  .bottom{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);z-index:20;padding-bottom:env(safe-area-inset-bottom)}
  .bottom a{text-align:center;padding:10px 0 12px;font-size:12px;color:var(--muted);border-top:3px solid transparent}
  .bottom a.on{color:var(--ink);font-weight:700;border-top-color:var(--yellow)}
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span3,.span4{grid-column:1/-1}
  .card{padding:14px}
  .hide-m{display:none}
  .cards-m{display:flex;flex-direction:column;gap:10px}
  .table-d{display:none}
  .steps{gap:6px}.step .t{font-size:12px}
  .sticky-actions{position:sticky;bottom:64px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;z-index:10}
}
@media print{
  .side,.bottom,.noprint{display:none!important}
  body{background:#fff}
  main{padding:0}
}
