:root{ --bg:#f6f7f9; --panel:#fff; --line:#e3e6ea; --line2:#d0d5db; --text:#1a1d21; --muted:#6b7280; --faint:#9ca3af; --brand:#185FA5; --brand-dark:#0C447C; --brand-soft:#E6F1FB; --ok:#0F6E56; --ok-soft:#E1F5EE; --warn:#854F0B; --warn-soft:#FAEEDA; --danger:#A32D2D; --danger-soft:#FCEBEB; --radius:10px; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif; font-size:13px; line-height:1.6; color:var(--text); background:var(--bg); } button{font-family:inherit;font-size:13px;cursor:pointer;border-radius:8px;border:1px solid var(--line2);background:#fff;padding:7px 14px;transition:.12s} button:hover{background:#f3f5f7} button.primary{background:var(--brand);border-color:var(--brand);color:#fff} button.primary:hover{background:var(--brand-dark)} button.ghost{border-color:transparent;background:transparent;color:var(--muted)} button.ghost:hover{background:#eef1f4;color:var(--text)} button.danger{color:var(--danger);border-color:#f0c4c4} button.danger:hover{background:var(--danger-soft)} button:disabled{opacity:.5;cursor:not-allowed} input,select,textarea{font-family:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--line2);border-radius:7px;background:#fff;color:var(--text);width:100%} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} input[readonly],input.calc{background:#f3f6f9;color:var(--brand-dark);font-weight:500} input.calc{cursor:default} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} /* 登录 */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px} .login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px;width:340px;box-shadow:0 4px 24px rgba(16,24,40,.06)} .login-card h1{font-size:17px;font-weight:500;margin:0 0 4px} .login-card .sub{font-size:12px;color:var(--faint);margin:0 0 22px} .login-card label{display:block;font-size:12px;color:var(--muted);margin-bottom:14px} .login-card label input{margin-top:5px} .login-card button{width:100%;margin-top:6px} .hint{font-size:12px;color:var(--faint);margin-top:16px;line-height:1.8;border-top:1px dashed var(--line);padding-top:12px} .hint b{color:var(--muted);font-weight:500} /* 布局 */ .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;background:#fff;border-bottom:1px solid var(--line);padding:0 20px;height:52px} .brand{font-weight:500;font-size:14px;white-space:nowrap} #main-nav{display:flex;gap:4px;flex:1} #main-nav a{padding:6px 12px;border-radius:8px;color:var(--muted);font-size:13px} #main-nav a:hover{background:#f3f5f7;text-decoration:none;color:var(--text)} #main-nav a.active{background:var(--brand-soft);color:var(--brand-dark);font-weight:500} .userbox{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)} main{padding:20px;max-width:1560px;margin:0 auto} /* 通用 */ .page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap} .page-head h2{font-size:15px;font-weight:500;margin:0} .page-head .actions{display:flex;gap:8px;align-items:center} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px} .card > h3{font-size:13px;font-weight:500;margin:0 0 14px;color:var(--muted)} .grid{display:grid;gap:12px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g6{grid-template-columns:repeat(6,1fr)} @media(max-width:1100px){.g6{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){.g6,.g4,.g3,.g2{grid-template-columns:1fr}} label.field{display:block;font-size:11.5px;color:var(--muted);margin:0} label.field input,label.field select{margin-top:4px} /* 表格 */ table{width:100%;border-collapse:collapse;font-size:12.5px} th,td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:middle} th{background:#f7f8fa;font-weight:500;color:var(--muted);white-space:nowrap;font-size:11.5px} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} tbody tr:hover{background:#fafbfc} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff} .table-wrap table{border:none} .table-wrap th,.table-wrap td{border-left:none;border-right:none;border-top:none} .table-wrap tbody tr:last-child td{border-bottom:none} /* 编辑表格 */ .edit-table input,.edit-table select{padding:4px 6px;font-size:12.5px;border-radius:5px} .edit-table td{padding:3px 4px} .edit-table .calc{background:#f3f6f9;color:var(--brand-dark)} /* 数量列的数字框去掉上下箭头：箭头会挤占本就紧张的横向空间， 滚动数字时还容易误触，导致「编辑时看不到数量数值」。 */ .edit-table input[type=number]{-moz-appearance:textfield;appearance:textfield} .edit-table input[type=number]::-webkit-outer-spin-button, .edit-table input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0} .row-del{padding:2px 8px;font-size:14px;line-height:1;color:var(--danger);border-color:#f0c4c4;background:#fff} /* 毛利率录入框：数字框 + 右侧「%」后缀。 用 flex 而不是绝对定位，是因为表格单元格宽度会随内容伸缩，绝对定位会被截掉。 */ .pct-cell{display:flex;align-items:center;gap:2px} .pct-cell input{flex:1 1 auto;min-width:0} .pct-sign{flex:0 0 auto;color:var(--muted);font-size:12px} /* 状态徽章 —— 与 app.js 的 STATUS_OPTIONS 一一对应。 confirmed 是历史遗留状态（已从下拉里移除），保留配色以免老单据变成裸文字。 */ .badge{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;line-height:1.7;white-space:nowrap} .badge.draft{background:#f0f1f3;color:var(--muted)} .badge.sent{background:var(--brand-soft);color:var(--brand-dark)} .badge.inquired{background:#EEF2FF;color:#3538CD} .badge.unquoted{background:#f0f1f3;color:var(--muted)} .badge.quoted{background:var(--brand-soft);color:var(--brand-dark)} .badge.won{background:var(--ok-soft);color:var(--ok);font-weight:500} .badge.lost{background:var(--danger-soft);color:var(--danger)} .badge.confirmed{background:var(--ok-soft);color:var(--ok)} .badge.archived{background:var(--warn-soft);color:var(--warn)} /* 参数条 */ .param-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;background:var(--brand-soft);border:1px solid #cfe2f5;border-radius:var(--radius);padding:12px} @media(max-width:1100px){.param-bar{grid-template-columns:repeat(3,1fr)}} .param-bar label{font-size:11.5px;color:var(--brand-dark)} .param-bar input{border-color:#c3daf0} /* 合计 */ .totals-box{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px} @media(max-width:1100px){.totals-box{grid-template-columns:repeat(2,1fr)}} .tot-item{background:#f9fafb;border:1px solid var(--line);border-radius:8px;padding:10px 12px} .tot-item .k{font-size:11px;color:var(--muted);margin-bottom:3px} .tot-item .v{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums} .tot-item.hl{background:var(--brand-soft);border-color:#cfe2f5} .tot-item.hl .v{color:var(--brand-dark)} .capital{background:#fffdf5;border:1px solid #f0e3c0;border-radius:8px;padding:10px 12px;margin-top:12px;font-size:12.5px} .capital div{margin:3px 0} .capital b{font-weight:500;color:var(--warn)} /* 运费 */ /* 运费方案表：末两列分别是「方案A＝海运+派送」「方案B＝空运+派送」，表头给个底色便于左右对照 */ .freight-table{max-width:880px} .freight-table td:first-child{white-space:nowrap;color:var(--muted)} .freight-table tr:first-child td:nth-last-child(-n+2){background:var(--brand-soft);color:var(--brand-dark);font-weight:600} .freight-table tr:last-child td:not(:first-child){font-weight:600;color:var(--text)} /* toast */ .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#1f2937;color:#fff;padding:9px 18px;border-radius:9px;font-size:13px;z-index:99;box-shadow:0 6px 24px rgba(0,0,0,.18)} .toast.err{background:var(--danger)} .empty{padding:48px 20px;text-align:center;color:var(--faint);font-size:13px} .mono{font-family:Consolas,"Courier New",monospace} .toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap} .toolbar input{max-width:220px} .section-title{font-size:12px;color:var(--faint);margin:18px 0 8px;letter-spacing:.4px} .notice{background:var(--warn-soft);border:1px solid #f0dfb2;color:var(--warn);border-radius:8px;padding:9px 12px;font-size:12.5px;margin-bottom:12px} .hide-cost{display:none!important} /* ============ 客户 Excel 导入 ============ */ .imp-steps{display:flex;align-items:center;gap:6px;margin:0 0 16px} .imp-step{display:flex;align-items:center;gap:7px;color:var(--faint);font-size:13px;white-space:nowrap} .imp-step .num{width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:12px;background:#fff} .imp-step.on{color:var(--brand-dark);font-weight:500} .imp-step.on .num{background:var(--brand);border-color:var(--brand);color:#fff} .imp-step.done{color:var(--ok)} .imp-step.done .num{background:var(--ok-soft);border-color:#9FE1CB;color:var(--ok)} .imp-step-line{flex:1;height:1px;background:var(--line2);min-width:16px} .imp-drop{border:1.5px dashed var(--line2);border-radius:var(--radius);padding:34px 20px;text-align:center;cursor:pointer;transition:.15s;background:#fcfdfe} .imp-drop:hover{border-color:var(--brand);background:var(--brand-soft)} .imp-drop.over{border-color:var(--brand);background:var(--brand-soft)} .imp-drop-icon{font-size:26px;color:var(--brand);line-height:1;margin-bottom:8px} .imp-drop-main{font-size:14px;font-weight:500;color:var(--text)} .imp-drop-sub{font-size:12px;color:var(--faint);margin-top:5px} .imp-loading{margin-top:12px;color:var(--muted)} .imp-error{margin-top:12px;padding:9px 12px;border-radius:8px;background:var(--danger-soft);color:var(--danger);border:1px solid #f0c4c4} .imp-ok{margin-top:12px;padding:9px 12px;border-radius:8px;background:var(--ok-soft);color:var(--ok);border:1px solid #9FE1CB} .imp-warn{margin-top:12px;padding:9px 12px;border-radius:8px;background:#FDF3D8;color:#8A6100;border:1px solid #EFD9A0} .imp-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:4px} .imp-meta>div{display:flex;align-items:center;gap:8px} .imp-meta span{color:var(--faint);font-size:12px} .imp-meta b{font-weight:500} .imp-hintline{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.7} .imp-map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .imp-map-item select{width:100%} .imp-map-item.req-miss select{border-color:#f0c4c4;background:#fffafa} .imp-raw table{font-size:12px} .imp-raw td{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)} .imp-raw tr.imp-headrow td{background:var(--brand-soft);color:var(--brand-dark);font-weight:500} .imp-rowno{width:46px;text-align:center;color:var(--faint);font-size:11px} .imp-empty{padding:22px;text-align:center;color:var(--muted);background:#fbfcfd;border-radius:8px} .imp-miss{color:var(--danger);font-size:12px} .imp-err{color:var(--danger);font-size:12px;cursor:help} tr.imp-badrow td{background:#fffafa} tr.imp-skip td{opacity:.42;text-decoration:line-through} .imp-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} /* ============ 附件 ============ */ .att-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .att-hint{font-size:12px;color:var(--faint)} .att-empty{padding:20px;text-align:center;color:var(--faint);background:#fbfcfd;border:1px dashed var(--line);border-radius:8px;font-size:12.5px} .att-tag{display:inline-block;min-width:38px;text-align:center;padding:1px 6px;border-radius:5px;font-size:10.5px;font-weight:500;background:var(--brand-soft);color:var(--brand-dark);letter-spacing:.3px} .att-time{color:var(--faint);font-size:11.5px;white-space:nowrap} .att-wait{color:var(--warn);font-size:11.5px} .att-prog{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12px;color:var(--muted)} .att-prog-name{flex:0 0 auto;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .att-bar{flex:1;height:5px;background:#eef1f4;border-radius:3px;overflow:hidden} .att-bar i{display:block;height:100%;background:var(--brand);transition:width .15s} /* 隐藏但仍可被