/* 外贸工作台：照 161-10 线稿 A 版（客户 11-04 选定）：深蓝左侧菜单，右边内容一栏栏往下。 */
:root{--pri:#1f5fa8;--pri2:#e7f0fa;--pri3:#b9d0ea;--bg:#f2f5f9;--card:#fff;--line:#dfe5ec;--th:#f3f6fa;--text:#1e293b;--mute:#64748b;--red:#c62828;--ok:#2e9d5b;--navy:#14294a;--side:212px;--r:6px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:14px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
h1{font-size:17px;margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
h3{font-size:14px;margin:0 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:#fff;min-width:0;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri2);border-color:var(--pri)}
textarea{width:100%;resize:vertical}
.shell{display:flex;min-height:100vh}
.side{width:var(--side);flex:none;background:var(--navy);color:#c6d3e6;padding:0 0 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side a{display:flex;align-items:center;gap:10px;padding:7px 18px;border-left:3px solid transparent}
.side a:hover{background:rgba(255,255,255,.06);color:#fff}
.side a.on{background:rgba(255,255,255,.1);color:#fff;font-weight:700;border-left-color:#60a5fa}
.side .brand{height:56px;gap:9px;color:#fff;font-size:15px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px}
.side .brand:hover{background:none}
.logo-dot{width:26px;height:26px;border-radius:7px;background:#3b82f6;flex:none}
.side .sep{height:1px;background:rgba(255,255,255,.08);margin:5px 14px}
.ic{flex:none;vertical-align:-3px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:0 20px;min-height:56px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
h1{font-size:18px;font-weight:800}
.gsearch{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;padding:0 10px;color:var(--mute);width:260px;background:#fff}
.gsearch input{border:0;padding:6px 0;flex:1;outline:0}
.gsearch:focus-within{border-color:var(--pri)}
.icon-btn{display:none;color:var(--text);padding:4px}
.menu-btn{display:none;border:0;background:none;padding:2px;cursor:pointer;color:var(--pri)}
.content{padding:18px 20px;max-width:1240px;width:100%}
.mask{display:none}
.sp{flex:1}
.mute{color:var(--mute)}.small{font-size:12.5px}.b{font-weight:600}.red{color:var(--red)}.r{text-align:right}.nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.f1{flex:1;min-width:0;overflow-wrap:anywhere}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.selectable{user-select:text;-webkit-user-select:text;background:#fafbfc;border:1px solid var(--line);border-radius:6px;padding:12px;line-height:1.75}
.lk{color:var(--pri)}.lk:hover,.lk.u{text-decoration:underline}
.n{font-weight:400}
.clip{display:block;max-width:24em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inline{display:inline}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;min-width:0}
.card.flush{padding:0;overflow:hidden}
/* A 版的一块：标题一条、下面内容 */
.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;min-width:0;overflow:hidden}
.sec>.sh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:14px}
.sec>.sb,.sec .sb{padding:10px 14px}
.sec>.foot{padding:9px 14px;font-size:12.5px;color:var(--mute);border-top:1px solid var(--line)}
.cols2>.sec,.cols3>.sec{margin-bottom:0}
.ck{width:16px;height:16px;border:1.5px solid #9aa5b1;border-radius:3px;background:#fff;padding:0;cursor:pointer;position:relative;flex:none;vertical-align:-3px}
.ck.on{background:var(--ok);border-color:var(--ok)}
.ck.on::after{content:"";position:absolute;left:4px;top:0;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.card .pad{padding:14px 16px 0}
.bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--pri)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red)}
.btn.small{padding:3px 9px;font-size:12.5px}
.btn.s{padding:2px 10px;font-size:12.5px;border-color:var(--pri);color:var(--pri)}
.btn.pri:hover{background:#18528f}
.btn.wide{width:100%;justify-content:center;padding:9px}
.link{border:0;background:none;padding:2px 4px;cursor:pointer;color:var(--pri)}
.link.danger,.danger{color:var(--red)}
.pill{padding:4px 12px;border-radius:99px;border:1px solid var(--line);background:#fff}
.pill.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.tag{display:inline-block;padding:0 8px;line-height:19px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--mute);font-size:12px;white-space:nowrap}
.tag.b{background:var(--pri2);border-color:var(--pri3);color:var(--pri)}.tag.g{background:#e3f5ea;border-color:#a8dcb9;color:#167a3e}
.tag.y{background:#fdf3d6;border-color:#efd58a;color:#946200}.tag.r{background:#fde8e8;border-color:#f5b5b5;color:var(--red)}
.tag.on{background:var(--pri);color:#fff}
.flash{padding:9px 12px;border-radius:6px;margin-bottom:12px;background:#eef6f0;color:var(--ok);border:1px solid #cfe6d6}
.flash.err{background:#fbeeee;color:var(--red);border-color:#f0cccc}
.search{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.search input[name=q]{width:220px}
/* 表格 */
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.tbl th{background:var(--th);font-weight:700;font-size:12.5px;color:#475569;white-space:nowrap}
.tbl th.r,.tbl td.r{text-align:right}
.tbl tr:last-child td{border-bottom:0}
.tbl .total td{border-top:2px solid var(--pri)}
.sort span{margin-left:3px;color:#9aa5b3}.sort.on{color:var(--pri)}.sort.on span{color:var(--pri)}
/* 表单 */
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field>span{font-size:12.5px;color:var(--mute)}
.field input,.field select{width:100%}
.full{grid-column:1/-1}
.actions{display:flex;justify-content:flex-end;gap:8px}
.docform .actions{margin-bottom:14px}
.lines input,.lines select{width:100%}
.lines td{padding:6px}
.row-form{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.row-form input[name=text]{flex:1;min-width:140px}
/* 详情 */
.kv{display:grid;grid-template-columns:7em 1fr;gap:6px 12px;margin:0}
.kv dt{color:var(--mute)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.kv.cols{grid-template-columns:5em 1fr 5em 1fr}
.chain{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.arrow{color:var(--mute)}
/* 工作台 */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile span{font-size:12.5px;color:var(--mute)}.tile b{font-size:20px;font-variant-numeric:tabular-nums}.tile b.cur{font-size:16px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.cols2>*{min-width:0}
.cols2.wide1{grid-template-columns:3fr 2fr}.cols2.wide2{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.cols2,.cols3{margin-bottom:14px}.sb>.cols2,.sb>.cols3,.sb.cols2,.sec .cols3{margin-bottom:0}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.cols3>*{min-width:0}
.todo-col{background:#fff;border:1px solid var(--line);border-top:3px solid var(--pri);border-radius:4px;padding:8px 12px}
.todo-col.c-week{border-top-color:#7c8ea6}.todo-col.c-late{border-top-color:#d64545}
section.todo-col{background:#fff}

.plain{list-style:none;margin:6px 0 0;padding:0}
.plain li{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line)}
.plain li:last-child{border-bottom:0}
.plain li.done .f1{text-decoration:line-through;color:var(--mute)}
.check{border:0;background:none;font-size:16px;cursor:pointer;padding:0 2px;color:var(--pri)}
.barrow{display:grid;grid-template-columns:6em 1fr 3em;align-items:center;gap:8px;margin:6px 0}
.barrow i{display:block;height:10px;background:var(--pri);border-radius:5px;min-width:2px}
.barrow b{text-align:right}
/* 附件 */
.files{list-style:none;padding:0;margin:0 0 10px}
.files li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.thumb img{width:48px;height:48px;object-fit:cover;border-radius:4px;border:1px solid var(--line);display:block}
.upload{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.viewer{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:50;padding:16px}
.viewer[hidden]{display:none}
.viewer img{max-width:100%;max-height:85vh;object-fit:contain}
/* 设置·字段 */
.frow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.frow input[name=label]{width:12em}.frow input[name=options],.frow .opt{flex:1;min-width:10em}
.logo-prev{max-height:60px;max-width:160px;object-fit:contain;align-self:flex-start}
/* 登录 */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}
.login{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px;padding:24px}
.login h1{text-align:center;margin-bottom:6px}
.login label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mute)}
.login input{width:100%;font-size:15px}
/* 平板 */
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}.cols3{grid-template-columns:1fr}}
/* 手机：菜单收进抽屉，表格变卡片，不横着拖 */
@media (max-width:760px){
  .side{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .2s}
  body.menu-open .side{transform:none}
  body.menu-open .mask{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:30}
  .menu-btn{display:block}
  .top{padding:10px 12px}.content{padding:12px}
  .hide-sm{display:none}
  .icon-btn.show-sm{display:block}
  .top{min-height:52px}
  .form,.cols2,.cols2.wide1,.cols2.wide2{grid-template-columns:1fr}
  .kv{grid-template-columns:5.5em 1fr}.kv.cols{grid-template-columns:5em 1fr}
  .search input[name=q]{width:auto;flex:1}.search{flex:1}
  .tbl.stack thead{display:none}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack td{display:block;width:100%}
  .tbl.stack tr{border-bottom:1px solid var(--line);padding:6px 0}
  .tbl.stack td{border:0;padding:3px 12px;text-align:left!important;display:flex;gap:10px}
  .tbl.stack td[data-l]::before{content:attr(data-l);flex:none;width:5.5em;color:var(--mute);font-size:12.5px}
  .tbl.stack td:empty{display:none}
  .tbl.stack .total td:not([data-l]){display:none}
  .tbl.fields td.fcell{display:block}
  .tbl.fields td.fcell::before{display:none}
  .frow input[name=label]{flex:1 1 30%;width:auto}
  .frow input[name=options]{flex:1 1 100%;order:5}.frow .opt{display:none}
  .bar .search.range{flex:1 1 100%}.search.range input[type=date]{flex:1;min-width:0}
  .clip{max-width:100%}
}
.search>.ic{color:var(--mute,#6b7a8c)}
.search select{width:auto;max-width:160px}
.foot-hint{margin:8px 2px 0}
@media (max-width:760px){.bar .search:not(.range){flex:1 1 100%}.search input[name=q]{flex:1 1 100%;width:auto;min-width:0}.search select{flex:1;max-width:none}}
/* 详情：左边标签切换名下的记录，右边基本信息、名下订单、附件 */
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
.dgrid.one{grid-template-columns:minmax(0,720px)}
.tabbar{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);padding:0 8px}
.tabbar button{border:0;background:none;padding:11px 12px 9px;font:inherit;font-size:14px;color:var(--mute);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tabbar button.on{color:var(--pri);border-bottom-color:var(--pri);font-weight:700}
.tabhint{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line)}
.tabp .pad{padding:12px 14px}
.tabp .tbl{border:0}
.olist li{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line)}
.olist li:last-child{border-bottom:0}
.olist{margin:0}
.clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.info .kv{margin:0}
@media (max-width:1100px){.dgrid,.dgrid.one{grid-template-columns:minmax(0,1fr)}}
.dmain,.dside{min-width:0}
@media (max-width:760px){.dside{order:-1}.tabbar{padding:0}.tabbar button{padding:10px 9px 8px;font-size:13.5px}}
.btn.pri.s,.btn.pri.s:hover{color:#fff}
.top h1 .small{font-weight:500}
.tabbar{flex-wrap:wrap}
@media (max-width:760px){.search>.ic{display:none}}
/* 数据分析 */
.green{color:#1f8a4c}
.range-bar{gap:8px}
.pick{position:relative}
.pick>summary{list-style:none;cursor:pointer;display:inline-block}
.pick>summary::-webkit-details-marker{display:none}
.pick[open]>form{position:absolute;z-index:20;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;box-shadow:0 6px 20px rgba(20,41,74,.12);flex-wrap:nowrap}
.tile .cur{display:flex;align-items:center;gap:8px;margin-top:3px}
.tile .cur b{font-size:18px}
.barrow{grid-template-columns:8.5em 1fr 2.5em}
@media (max-width:760px){.pick[open]{display:contents}.pick[open]>form{position:static;order:9;flex:1 1 100%;box-shadow:none;flex-wrap:nowrap}.pick[open]>form input[type=date]{min-width:0;flex:1}.range-bar>.nw{flex:1 1 100%}}
.sec>.sh>.f1{min-width:0}
.range-bar{position:relative}
/* 设置：左边设置项，中间哪一类，右边字段 */
.set-grid{display:grid;grid-template-columns:180px 170px minmax(0,1fr);gap:14px;align-items:start}
.set-grid.wide{grid-template-columns:180px minmax(0,720px)}
.set-nav a,.set-kinds a{display:block;padding:8px 14px;border-left:3px solid transparent;color:inherit}
.set-nav a.on,.set-kinds a.on{background:var(--pri2);color:var(--pri);font-weight:700;border-left-color:var(--pri)}
.set-nav a:hover,.set-kinds a:hover{background:var(--pri2)}
.set-main>.card{margin-bottom:14px}
.tbl.fields tr.just-added>td{background:#fff8e1}
.tbl.fields .ops>*{margin-right:8px}
.tbl.fields tr.edit-row>td{background:var(--pri2)}
.seg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;text-align:center;padding:8px 4px;border:1px solid var(--line);border-radius:8px;background:#fff}
.seg input:checked+span{border-color:var(--pri);background:var(--pri2);color:var(--pri);font-weight:700}
.seg input:focus-visible+span{outline:2px solid var(--pri);outline-offset:1px}
.new-field .actions{display:flex;justify-content:flex-end}
@media (max-width:1000px){.set-grid,.set-grid.wide{grid-template-columns:minmax(0,1fr)}
  .set-nav,.set-kinds{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 10px}
  .set-nav>.sh,.set-kinds>.sh{flex:1 1 100%;margin:0 -10px;border-bottom:1px solid var(--line)}
  .set-nav a,.set-kinds a{border:1px solid var(--line);border-radius:99px;padding:4px 12px;font-size:13.5px}
  .set-nav a.on,.set-kinds a.on{border-color:var(--pri)}}
@media (max-width:760px){.seg{grid-template-columns:repeat(3,minmax(0,1fr))}.tbl.fields .ops{flex-wrap:wrap}}
[hidden]{display:none!important}
/* 单据详情（A4） */
.doc-bar .btn .ic{margin-right:4px}
.chain-sec .chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chain .tag{line-height:26px;padding:0 12px;font-size:13px}
.chain .tag.cur{font-weight:700}
.chain .tag.todo{border-style:dashed;background:transparent}
.chain .arrow{color:var(--mute)}
.info4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px}
.info4>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.info4 span{font-size:12.5px;color:var(--mute)}
.info4 b{font-weight:500;border:1px solid var(--line);border-radius:6px;padding:6px 10px;overflow-wrap:anywhere;min-height:2.3em}
.pri-t{color:var(--pri);font-size:15px}
@media (max-width:1000px){.info4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.chain-sec .chain>.sp,.chain-sec .chain>.small.mute{display:none}}
/* 每一列自己的图（161-11） */
.colfiles{margin-top:4px}
.cthumbs{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.cthumbs li{display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:100%}
.cthumbs .thumb img{width:64px;height:64px}
.cthumbs .fname{max-width:180px;overflow-wrap:anywhere}
.upload.mini{gap:6px}
.upload.mini input[type=file]{max-width:100%;font-size:12px}
.field input[type=file]{max-width:100%}