:root{
  --pri:#185fa5; --pri-d:#0c447c; --pri-l:#e6f1fb;
  --ok:#0f6e56; --ok-l:#e1f5ee; --warn:#854f0b; --warn-l:#faeeda;
  --err:#a32d2d; --err-l:#fcebeb; --info:#0c447c;
  --bg:#f4f6f9; --card:#fff; --line:#e3e8ef; --line-2:#cfd7e3;
  --t1:#1c2534; --t2:#5a6478; --t3:#8a94a6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--t1); font-size:13px; line-height:1.6;
}
button{font-family:inherit}
h3{margin:1.2rem 0 .5rem;font-size:14px;font-weight:500}

/* header */
#app-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 18px;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:34px;height:34px;border-radius:8px;background:var(--pri);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:500;font-size:13px;letter-spacing:.5px;
}
.brand-t{font-size:15px;font-weight:500}
.brand-s{font-size:11px;color:var(--t3)}
.header-actions{display:flex;gap:6px;flex-wrap:wrap}

.btn{
  border:1px solid var(--line-2);background:#fff;color:var(--t1);
  padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12.5px;transition:.15s;
}
.btn:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-l)}
.btn-primary{background:var(--pri);border-color:var(--pri);color:#fff}
.btn-primary:hover{background:var(--pri-d);border-color:var(--pri-d);color:#fff}
.btn-danger:hover{border-color:var(--err);color:var(--err);background:var(--err-l)}
.btn.sm{padding:3px 9px;font-size:12px}
.btn.wide{width:100%;margin-bottom:8px;text-align:left}

/* summary */
.save-state{font-size:11.5px;color:var(--t3);align-self:center;margin-right:4px}
.save-state.on{color:var(--ok)}
.brand-card{margin-bottom:12px}
.brand-body{display:flex;gap:24px;flex-wrap:wrap;padding:12px 14px}
.brand-item{display:flex;align-items:center;gap:12px}
.brand-prev{
  width:150px;height:58px;border:1px dashed var(--line-2);border-radius:6px;background:#fafbfd;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.brand-prev img{max-width:100%;max-height:54px;object-fit:contain}
.brand-prev .ph{font-size:11px;color:var(--t3)}
.brand-ops{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.brand-ops .sub{font-size:11px;color:var(--t3)}

.summary-bar{
  display:flex;gap:0;background:#fff;border-bottom:1px solid var(--line);
  padding:0 18px;overflow-x:auto;
}
.sm{display:flex;flex-direction:column;padding:7px 18px 7px 0;margin-right:18px;border-right:1px solid var(--line);min-width:96px}
.sm:last-child{border-right:none}
.sm-k{font-size:11px;color:var(--t3)}
.sm-v{font-size:15px;font-weight:500;color:var(--t1)}
.sm-status .sm-v{font-size:13px}
.sm-status.ok .sm-v{color:var(--ok)}
.sm-status.warn .sm-v{color:var(--warn)}
.sm-status.err .sm-v{color:var(--err)}

/* tabs */
.tabs{display:flex;gap:2px;background:#fff;border-bottom:1px solid var(--line);padding:0 12px;overflow-x:auto}
.tab{
  border:none;background:none;padding:10px 14px;cursor:pointer;font-size:13px;color:var(--t2);
  border-bottom:2px solid transparent;white-space:nowrap;
}
.tab:hover{color:var(--pri)}
.tab.active{color:var(--pri);border-bottom-color:var(--pri);font-weight:500}

main{max-width:1560px;margin:0 auto;padding:14px}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* layout */
.input-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
@media(max-width:1100px){.input-layout{grid-template-columns:1fr}}
.sec-hint{
  background:var(--pri-l);border:1px solid #cfe0f5;color:var(--pri-d);
  padding:9px 12px;border-radius:8px;margin-bottom:12px;font-size:12.5px;
}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden}
.card-h{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 14px;border-bottom:1px solid var(--line);font-weight:500;font-size:13px;background:#fafbfd;
}
.card-h .sub{font-weight:400;color:var(--t3);font-size:12px}

/* form */
.fgroup{margin-bottom:10px}
.fgroup-h{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 14px;cursor:pointer;user-select:none;
}
.fgroup-h:hover{background:#fafbfd}
.fgroup-t{font-weight:500}
.fgroup-s{font-size:11px;color:var(--t3);font-weight:400}
.fgroup-arrow{color:var(--t3);font-size:11px}
.fgroup-body{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;padding:4px 14px 14px;
  border-top:1px solid var(--line);
}
@media(max-width:900px){.fgroup-body{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.fgroup-body{grid-template-columns:1fr}}
.fgroup.collapsed .fgroup-body{display:none}
.field{display:flex;flex-direction:column;gap:3px;min-width:0}
.field.w2{grid-column:span 2}
@media(max-width:600px){.field.w2{grid-column:span 1}}
.field label{font-size:11.5px;color:var(--t2);display:flex;gap:3px;align-items:center}
.req{color:var(--err)}
.field input,.field select,.field textarea{
  border:1px solid var(--line-2);border-radius:6px;padding:6px 8px;font-size:13px;
  font-family:inherit;background:#fff;color:var(--t1);width:100%;
}
.field textarea{min-height:56px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-l)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--err);background:#fffafa}
.fgroup-body .field.calc-field input{background:#f7f9fc;color:var(--t2)}
.chk-row{display:flex;align-items:center;gap:6px;height:31px}
.chk-row input{width:auto}

/* goods table */
.table-wrap{overflow-x:auto}
.goods-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:1080px}
.goods-table th{
  background:#f1f4f9;color:var(--t2);font-weight:500;text-align:left;
  padding:6px 6px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:11.5px;
}
.goods-table td{padding:2px 4px;border-bottom:1px solid #f0f3f7}
.goods-table td input,.goods-table td select{
  width:100%;border:1px solid transparent;border-radius:4px;padding:5px 6px;font-size:12.5px;
  font-family:inherit;background:transparent;color:var(--t1);
}
.goods-table td input:hover,.goods-table td select:hover{border-color:var(--line-2)}
.goods-table td input:focus,.goods-table td select:focus{outline:none;border-color:var(--pri);background:#fff}
.goods-table td.num input{text-align:right}
.goods-table td.act{text-align:center;width:34px;white-space:nowrap}
.mini-btn{
  border:none;background:none;color:var(--t3);cursor:pointer;font-size:14px;padding:2px 5px;border-radius:4px;
}
.mini-btn:hover{background:var(--err-l);color:var(--err)}
.mini-btn.copy:hover{background:var(--pri-l);color:var(--pri)}
.goods-foot{
  display:flex;flex-wrap:wrap;gap:6px 18px;padding:9px 14px;border-top:1px solid var(--line);
  background:#fafbfd;font-size:12px;color:var(--t2);
}
.goods-foot b{color:var(--t1);font-weight:500;font-size:13px}
.gf-total{margin-left:auto;color:var(--pri-d)}
.gf-total b{color:var(--pri-d);font-size:15px}

/* quick col */
.quick-col{position:sticky;top:96px}
.quick-list{padding:12px 14px 4px}
.quick-note{padding:0 14px 12px;font-size:11.5px;color:var(--t3);line-height:1.5}
.req-list{margin:0;padding:8px 14px 12px 30px;font-size:12px;color:var(--t2)}
.req-list li{margin-bottom:3px}
.req-list li.ok{color:var(--ok);list-style:"✓ "}
.req-list li.no{color:var(--err);list-style:"✕ "}

/* preview */
.preview-bar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:10px;
}
.doc-chips{display:flex;gap:6px;flex-wrap:wrap;max-width:820px}
.chip{
  border:1px solid var(--line-2);background:#fff;border-radius:20px;padding:4px 13px;
  font-size:12.5px;cursor:pointer;color:var(--t2);
}
.chip:hover{border-color:var(--pri);color:var(--pri)}
.chip.on{background:var(--pri);border-color:var(--pri);color:#fff}
.preview-actions{display:flex;gap:6px;flex-wrap:wrap}
.preview-tip{
  background:#fffbe9;border:1px solid #f2e3b0;color:#6b5310;padding:8px 12px;border-radius:8px;
  font-size:12px;margin-bottom:12px;
}
#preview{display:flex;flex-direction:column;align-items:center;gap:16px}

/* check */
.check-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.stat-cards{display:flex;gap:10px;flex-wrap:wrap}
.stat-card{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 18px;min-width:92px;
}
.stat-card .k{font-size:11px;color:var(--t3)}
.stat-card .v{font-size:20px;font-weight:500}
.stat-card.err .v{color:var(--err)} .stat-card.warn .v{color:var(--warn)}
.stat-card.ok .v{color:var(--ok)} .stat-card.info .v{color:var(--info)}
.check-list{padding:6px 0}
.check-item{display:flex;gap:10px;padding:8px 14px;border-bottom:1px solid #f2f5f9;font-size:12.5px}
.check-item:last-child{border-bottom:none}
.badge{flex:none;font-size:11px;padding:1px 7px;border-radius:4px;height:19px;line-height:17px}
.badge.error{background:var(--err-l);color:var(--err)}
.badge.warn{background:var(--warn-l);color:var(--warn)}
.badge.info{background:var(--pri-l);color:var(--info)}
.check-msg{flex:1}
.check-f{color:var(--t3);font-size:11.5px}
.empty{padding:16px 14px;color:var(--t3);font-size:12.5px}

/* lib tables */
.lib-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1000px){.lib-layout{grid-template-columns:1fr}}
.lib-table{width:100%;border-collapse:collapse;font-size:12.5px}
.lib-table th{background:#f1f4f9;color:var(--t2);font-weight:500;text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);font-size:11.5px;white-space:nowrap}
.lib-table td{padding:7px 10px;border-bottom:1px solid #f0f3f7;vertical-align:middle}
.lib-table tr:hover td{background:#fafbfd}
.lib-table td.act{text-align:right;white-space:nowrap;width:1%}
.lib-table .st{font-size:11px;padding:1px 7px;border-radius:4px}
.st.ok{background:var(--ok-l);color:var(--ok)} .st.warn{background:var(--warn-l);color:var(--warn)}
.st.no{background:var(--err-l);color:var(--err)}
.need-must{font-size:11px;color:var(--err)} .need-opt{font-size:11px;color:var(--t3)}

/* help */
.help-body{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 24px 22px;max-width:900px}
.help-body ol,.help-body ul{padding-left:22px;margin:.4rem 0}
.help-body li{margin-bottom:5px}
.help-body p{margin:.4rem 0}

/* toast */
#toast{
  position:absolute;top:auto;bottom:24px;left:50%;transform:translateX(-50%);
  background:#1c2534;color:#fff;padding:8px 18px;border-radius:20px;font-size:12.5px;
  opacity:0;pointer-events:none;transition:.25s;z-index:200;position:fixed;
}
#toast.show{opacity:1}