:root{
  --bg:#f2f5f9;--panel:#ffffff;--border:rgba(30,100,200,0.12);
  --accent:#1a73d4;--green:#0a9e5a;--yellow:#c07b00;--orange:#d06000;--red:#cc2929;
  --text:#111111;--muted:#444444;--card:#ffffff;--card2:#f8fafd;
  --mono:'SF Mono','Menlo','Consolas','Liberation Mono','Source Code Pro',monospace;--sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑','Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;}
/* iOS Safari 下拉白屏 / 重复 header 修复：禁用 body 层 rubberband 弹性回滚（页面顶部下拉时不再露白） */
html,body{overscroll-behavior-y:none;-webkit-overflow-scrolling:auto;}
html{background:var(--bg);}  /* 顶部 overscroll 仍露白时填底色 */
/* 已移除网页背景网格（用户要求），保持纯净底色 */
.top-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:999;
  background:linear-gradient(90deg,transparent,var(--accent),var(--green),var(--accent),transparent);}
/* HEADER */
header{display:flex;align-items:center;justify-content:space-between;padding:13px 24px;
  border-bottom:1px solid var(--border);background:#fff;box-shadow:0 1px 8px rgba(30,100,200,.07);
  position:sticky;top:0;z-index:100;gap:12px;flex-wrap:wrap;}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#ddeeff,#c5dfff);
  border:1px solid rgba(26,115,212,.25);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;}
.logo-name{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:2px;color:var(--text);}
.logo-name span{color:var(--accent);}
.logo-sub{font-size:13px;color:#555;letter-spacing:3px;font-family:var(--mono);}
.brand-name{font-size:22px;font-weight:900;letter-spacing:3px;color:#0d47a1;line-height:1;
  font-family:"Songti SC","STSong","SimSun","Noto Serif SC","Source Han Serif SC",serif;
  display:flex;align-items:flex-start;}
.brand-name .brand-reg{font-size:10px;font-weight:700;margin-left:2px;margin-top:2px;color:#1565c0;letter-spacing:0;}
.brand-sub{font-size:11px;color:#1565c0;margin-top:5px;letter-spacing:2px;font-weight:600;
  font-family:"Songti SC","STSong","SimSun","Noto Serif SC","Source Han Serif SC",serif;}
.nav-tabs{display:flex;gap:3px;background:rgba(30,100,200,.07);border:1px solid var(--border);border-radius:8px;padding:3px;margin:0 auto;}
.nav-tab{padding:6px 14px;border-radius:6px;font-family:var(--mono);font-size:15px;letter-spacing:1px;
  cursor:pointer;border:none;background:none;color:#555;transition:all .2s;white-space:nowrap;}
.nav-tab.active,.nav-tab:hover{background:var(--accent);color:#fff !important;}
.nav-tab.active{background:rgba(0,180,255,.15);color:#00e5ff;border:1px solid rgba(0,180,255,.3);}
.header-right{display:flex;align-items:center;gap:10px;}
.live-badge{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:15px;color:var(--green);}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite;}
.scan-info{font-family:var(--mono);font-size:14px;color:#555;text-align:right;}
.scan-info b{color:var(--accent);}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
.btn{padding:6px 14px;border-radius:7px;font-family:var(--mono);font-size:15px;letter-spacing:1px;
  cursor:pointer;transition:all .2s;border:1px solid var(--border);background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.06);}
.btn:hover{border-color:var(--accent);color:var(--accent);background:#f0f7ff;}
.btn-primary{background:linear-gradient(135deg,#003d6b,#001e38);border-color:rgba(0,180,255,.4);color:#00e5ff;}
.btn-primary:hover{box-shadow:0 0 14px rgba(0,180,255,.3);}
.btn-green{background:linear-gradient(135deg,#eafaf2,#d2f5e3);border-color:rgba(10,158,90,.3);color:var(--green);}
.btn-red{background:rgba(204,41,41,.07);border-color:rgba(204,41,41,.25);color:var(--red);}
.btn-orange{background:rgba(208,96,0,.07);border-color:rgba(208,96,0,.25);color:var(--orange);}
.btn-sm{padding:4px 9px;font-size:14px;}
/* PAGES */
.page{display:none;padding:12px 20px;position:relative;z-index:1;}
.page.active{display:block;}
/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-bottom:10px;}
.stat-card{padding:8px 13px;border-radius:10px;background:#fff;border:1px solid var(--border);cursor:pointer;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.05);}
#sc-safe{background:#f0faf5;border-color:rgba(10,158,90,.3);}
#sc-low{background:#fffbf0;border-color:rgba(192,123,0,.3);}
#sc-mid{background:#fff7f0;border-color:rgba(208,96,0,.3);}
#sc-high{background:#fff2f2;border-color:rgba(200,40,40,.3);}
#sc-signed{background:#eef6ff;border-color:rgba(26,115,212,.3);}
#sc-unsigned{background:#f4f0ff;border-color:rgba(100,60,200,.3);}
#sc-safe .stat-value{color:var(--green);}
#sc-low .stat-value{color:var(--yellow);}
#sc-mid .stat-value{color:var(--orange);}
#sc-high .stat-value{color:var(--red);}
#sc-signed .stat-value{color:var(--accent);}
#sc-unsigned .stat-value{color:#6840c8;}
.stat-card:hover{border-color:var(--ac,var(--accent));box-shadow:0 2px 8px rgba(0,0,0,.08);}
.stat-card.active{border-color:var(--ac,var(--accent)) !important;border-width:2px !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ac,var(--accent)) 18%, transparent), 0 3px 12px rgba(0,0,0,.12) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ac,var(--accent)) 18%, transparent), 0 3px 12px rgba(0,0,0,.12) !important;}
.stat-card.active .stat-label{color:var(--ac,var(--accent));font-weight:700;}
.stat-label{font-size:12px;color:#555;letter-spacing:1px;margin-bottom:3px;font-family:var(--mono);}
.stat-value{font-size:22px;font-weight:700;font-family:var(--mono);line-height:1;}
/* TOOLBAR */
.toolbar{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
#toolbar-sticky{position:sticky;top:56px;z-index:90;background:var(--bg);
  padding:6px 0 2px;margin:-6px 0 0;transition:top .3s ease;
  border-bottom:1px solid transparent;}
#toolbar-sticky.is-stuck{border-bottom-color:var(--border);
  box-shadow:0 3px 10px rgba(30,100,200,.07);}
.monitor-action-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.import-menu-wrap{position:relative;}
.import-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border);
  border-radius:11px;box-shadow:0 8px 28px rgba(0,0,0,.13);min-width:240px;z-index:400;
  overflow:hidden;animation:menuIn .15s ease;}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.import-menu-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;
  transition:background .15s;border:none;width:100%;text-align:left;}
.import-menu-item:hover{background:#f0f7ff;}
.import-menu-icon{font-size:20px;flex-shrink:0;}
.import-menu-label{font-size:14px;font-weight:600;color:var(--text);font-family:var(--mono);}
.import-menu-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.import-menu-divider{height:1px;background:var(--border);margin:0 14px;}
.stats-toggle-hint{font-size:12px;color:var(--accent);font-family:var(--mono);margin-right:auto;opacity:0;transition:opacity .25s;pointer-events:none;letter-spacing:1px;}
.stats-toggle-hint.visible{opacity:1;}
#stats-row-wrap{overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-bottom .3s ease;max-height:160px;opacity:1;}
#stats-row-wrap.stats-hidden{max-height:0!important;opacity:0;margin-bottom:0;}
.search-box{flex:1;min-width:160px;background:#fff;border:1px solid var(--border);
  border-radius:7px;padding:7px 12px;color:var(--text);font-family:var(--mono);font-size:15px;outline:none;}
.search-box:focus{border-color:var(--accent);}
.search-box::placeholder{color:#a0b0c0;}
.filter-btn{padding:5px 11px;border-radius:6px;font-size:14px;font-family:var(--mono);letter-spacing:1px;
  cursor:pointer;border:1px solid var(--border);background:#fff;color:#555;transition:all .2s;}
.filter-btn.active{border-color:var(--accent);color:var(--accent);background:#eef6ff;}
/* SHIP CARDS */
.ship-list{display:flex;flex-direction:column;gap:7px;}
.ship-card{padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.02);
  border:1px solid var(--border);cursor:pointer;transition:all .22s;}
.ship-card:hover{border-color:rgba(0,180,255,.22);}
.ship-card.selected{background:var(--rc-bg,rgba(0,180,255,.06));border-color:var(--rc-border,rgba(0,180,255,.3));box-shadow:var(--rc-glow);}
.ship-card-top{display:flex;align-items:center;gap:12px;}
.risk-badge{min-width:54px;height:54px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;}
.risk-num{font-family:var(--mono);font-size:21px;font-weight:800;line-height:1;}
.risk-lbl{font-size:13px;letter-spacing:1px;margin-top:2px;font-family:var(--mono);}
.ship-main{flex:1;min-width:0;}
.ship-row1{display:flex;align-items:center;gap:7px;margin-bottom:4px;flex-wrap:wrap;}
.ship-id{font-family:var(--mono);font-size:16px;color:var(--text);font-weight:600;}
.ship-bl{font-family:var(--mono);font-size:15px;color:#555;}
.tag{font-size:13px;padding:2px 6px;border-radius:3px;font-family:var(--mono);letter-spacing:1px;white-space:nowrap;}
.t-blue{background:rgba(0,180,255,.12);color:var(--accent);border:1px solid rgba(0,180,255,.2);}
.t-gray{background:rgba(255,255,255,.05);color:#555;border:1px solid var(--border);}
.t-green{background:rgba(0,230,118,.12);color:var(--green);border:1px solid rgba(0,230,118,.2);}
.t-red{background:rgba(244,67,54,.12);color:var(--red);border:1px solid rgba(244,67,54,.2);}
.t-yellow{background:rgba(255,215,64,.1);color:var(--yellow);border:1px solid rgba(255,215,64,.2);}
.t-orange{background:rgba(255,152,0,.12);color:var(--orange);border:1px solid rgba(255,152,0,.2);}
.ship-row2{display:flex;align-items:center;gap:7px;font-size:16px;flex-wrap:wrap;}
.ship-from{color:#7eb8e0;}
.ship-arr{color:#555;font-family:var(--mono);font-size:15px;}
.ship-to{color:var(--text);font-weight:600;}
.ship-dates{font-size:14px;color:#555;font-family:var(--mono);display:flex;gap:10px;margin-top:3px;}
.ship-dates b{color:var(--yellow);}
.ship-dates .green{color:var(--green);}
/* DELAY BADGE */
.delay-badge{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:5px;font-family:var(--mono);font-size:15px;font-weight:700;flex-shrink:0;}
.delay-0{background:rgba(0,230,118,.1);color:var(--green);border:1px solid rgba(0,230,118,.25);}
.delay-low{background:rgba(255,215,64,.1);color:var(--yellow);border:1px solid rgba(255,215,64,.25);}
.delay-mid{background:rgba(255,152,0,.12);color:var(--orange);border:1px solid rgba(255,152,0,.3);}
.delay-high{background:rgba(244,67,54,.12);color:var(--red);border:1px solid rgba(244,67,54,.3);}
.risk-icons{display:flex;gap:4px;flex-shrink:0;}
.ri{width:24px;height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:15px;}
.ri-h{background:rgba(244,67,54,.15);border:1px solid rgba(244,67,54,.3);}
.ri-m{background:rgba(255,152,0,.15);border:1px solid rgba(255,152,0,.3);}
.ri-l{background:rgba(255,215,64,.1);border:1px solid rgba(255,215,64,.3);}
.safe-txt{font-size:14px;color:var(--green);font-family:var(--mono);}
.ship-meta{text-align:right;min-width:60px;flex-shrink:0;}
.ship-wt{font-size:14px;color:var(--accent);font-family:var(--mono);}
.ship-val{font-size:15px;color:var(--text);font-family:var(--mono);margin-top:2px;}
/* DETAIL PANEL */
#detail-panel{position:fixed;right:0;top:0;bottom:0;width:75vw;min-width:720px;max-width:1500px;background:#fff;
  border-left:1px solid var(--border);box-shadow:-4px 0 32px rgba(0,0,0,.12);z-index:200;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;display:flex;flex-direction:column;}
#detail-panel.open{transform:translateX(0);}
.d-header{padding:20px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;
  background:#fff;z-index:10;}
.d-close{position:absolute;top:18px;right:18px;background:none;border:none;color:#555;font-size:26px;cursor:pointer;}
.d-body{padding:20px 22px;flex:1;}
.d-actions{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;
  position:sticky;bottom:0;background:#fff;font-size:15px;}
.d-actions .btn{font-size:15px;padding:10px 16px;}
.btn-export-item{display:block;width:100%;text-align:left;padding:9px 14px;background:#fff;
  border:none;font-size:14px;color:#333;cursor:pointer;font-family:inherit;}
.btn-export-item:hover{background:#f0f7ff;color:var(--accent);}
.info-blk{padding:14px;border-radius:8px;background:#f4f8ff;border:1px solid rgba(26,115,212,.1);margin-bottom:14px;}
.info-row{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin-bottom:7px;}
.info-row:last-child{margin-bottom:0;}
.ik{color:#555;}
.iv{color:var(--text);font-family:var(--mono);font-size:16px;}
.iv-a{color:var(--accent);}.iv-y{color:var(--yellow);font-weight:600;}.iv-g{color:var(--green);}.iv-r{color:var(--red);}
.sec-lbl{font-size:15px;color:#555;letter-spacing:2px;font-family:var(--mono);margin-bottom:10px;}
.meter-track{height:5px;border-radius:3px;background:rgba(0,0,0,.08);overflow:hidden;margin:5px 0;}
.meter-fill{height:100%;border-radius:3px;transition:width .5s ease;}
.risk-item{margin-bottom:8px;padding:10px 12px;border-radius:7px;border-left:3px solid;}
.risk-item.high{background:rgba(204,41,41,.05);border-color:var(--red);border-right:1px solid rgba(244,67,54,.15);border-top:1px solid rgba(244,67,54,.15);border-bottom:1px solid rgba(244,67,54,.15);}
.risk-item.medium{background:rgba(208,96,0,.05);border-color:var(--orange);border-right:1px solid rgba(255,152,0,.15);border-top:1px solid rgba(255,152,0,.15);border-bottom:1px solid rgba(255,152,0,.15);}
.risk-item.low{background:rgba(192,123,0,.04);border-color:var(--yellow);border-right:1px solid rgba(255,215,64,.15);border-top:1px solid rgba(255,215,64,.15);border-bottom:1px solid rgba(255,215,64,.15);}
.ri-top{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.ri-lbl{font-size:14px;padding:3px 7px;border-radius:3px;font-family:var(--mono);}
.risk-item.high .ri-lbl{background:rgba(244,67,54,.2);color:var(--red);}
.risk-item.medium .ri-lbl{background:rgba(255,152,0,.2);color:var(--orange);}
.risk-item.low .ri-lbl{background:rgba(255,215,64,.15);color:var(--yellow);}
.ri-txt{font-size:16px;color:var(--text);line-height:1.65;}
.safe-blk{padding:16px;border-radius:8px;background:rgba(10,158,90,.05);border:1px solid rgba(10,158,90,.18);text-align:center;margin-bottom:13px;}
.sol-blk{padding:12px;border-radius:8px;background:#f0f7ff;border:1px solid rgba(26,115,212,.15);margin-bottom:13px;}
.sol-txt{font-size:16px;color:var(--text);line-height:1.75;}
/* DELAY SUMMARY BOX */
.delay-summary{padding:12px;border-radius:8px;margin-bottom:13px;border:1px solid;}
.delay-row{display:flex;justify-content:space-between;align-items:center;font-size:16px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.delay-row:last-child{border-bottom:none;font-weight:600;}
/* DATA MGMT PAGE */
.dm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.dm-title{font-family:var(--mono);font-size:17px;color:var(--text);}
.dm-sub{font-size:15px;color:#555;margin-top:3px;}
.auto-scan-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:8px;
  background:rgba(10,158,90,.06);border:1px solid rgba(10,158,90,.2);margin-bottom:16px;}
.auto-scan-txt{font-size:15px;color:var(--green);font-family:var(--mono);flex:1;}
.progress-bar{height:3px;border-radius:2px;background:rgba(0,0,0,.09);flex:1;overflow:hidden;}
.progress-fill{height:100%;background:var(--green);border-radius:2px;transition:width .5s linear;}
.dm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.dm-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;}
.dm-panel{background:#fff;border:1px solid var(--border);border-radius:11px;overflow:hidden;}
.dm-panel-hd{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#f8fafd;}
.dm-panel-ttl{display:flex;align-items:center;gap:7px;}
.dm-icon{font-size:18px;}
.dm-name{font-family:var(--mono);font-size:16px;color:var(--text);font-weight:600;}
.dm-desc{font-size:14px;color:#555;margin-top:1px;}
.dm-body{padding:12px;max-height:480px;overflow-y:auto;}
.dm-item{padding:9px 11px;border-radius:7px;background:#f8fafd;border:1px solid var(--border);margin-bottom:7px;}
.dm-item-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;}
.dm-item-name{font-size:15px;color:var(--text);font-weight:500;}
.dm-item-sub{font-size:14px;color:#555;line-height:1.5;}
.dm-item-acts{display:flex;gap:4px;margin-top:7px;}
.congestion-bar{height:3px;border-radius:2px;background:rgba(0,0,0,.09);margin-top:5px;}
.congestion-fill{height:100%;border-radius:2px;}
.level-badge{font-size:13px;padding:2px 6px;border-radius:3px;font-family:var(--mono);}
/* SLIDER */
.slider-wrap{margin:8px 0;}
.slider-label{display:flex;justify-content:space-between;font-size:14px;color:#555;font-family:var(--mono);margin-bottom:4px;}
.slider-label b{color:var(--yellow);}
input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;}
/* FORMS */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;}
.form-group{display:flex;flex-direction:column;gap:4px;}
.form-group.full{grid-column:1/-1;}
.form-label{font-size:14px;color:#333;letter-spacing:.5px;font-family:var(--mono);font-weight:500;}
.form-label .req{color:var(--red);}
.form-input,.form-textarea{background:#fff;border:1px solid #c8d8e8;
  border-radius:6px;padding:7px 10px;color:var(--text);font-family:var(--mono);
  font-size:15px;outline:none;transition:border-color .2s;width:100%;}
.form-select{background:#eef6ff;border:1px solid #a8c4e8;border-radius:6px;padding:7px 10px;color:#111;font-family:var(--mono);font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;width:100%;cursor:pointer;}
.form-select option{background:#eef6ff;color:#111;}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);}
.form-input.required:invalid,.form-input.err{border-color:var(--red);}
.form-textarea{resize:vertical;min-height:60px;line-height:1.6;}
.form-hint{font-size:14px;color:#555;margin-top:2px;}
/* SECTION DIVIDER */
.form-section{font-size:14px;color:var(--accent);letter-spacing:2px;font-family:var(--mono);
  padding:6px 0;border-bottom:1px solid var(--border);margin-bottom:10px;}
/* MODAL */
/* .modal-box — 与 .modal 等价的容器（部分弹窗用此变体），统一为不透明白底
   修复了之前缺 CSS 定义导致弹窗背景透明的问题（leads/active/contracts/visits/followups 等） */
.modal-box{background:#fff;border:1px solid rgba(30,100,200,.15);border-radius:13px;
  box-shadow:0 18px 52px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.04);
  width:520px;max-width:96vw;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  position:relative;z-index:1;}
.modal-overlay{position:fixed;inset:0;background:rgba(10,30,70,.45);z-index:500;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:#fff;border:1px solid rgba(30,100,200,.15);border-radius:13px;
  width:600px;max-width:96vw;max-height:92vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.7);}
.modal-lg{width:720px;}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:#f7faff;border-radius:13px 13px 0 0;}
.modal-title{font-family:var(--mono);font-size:17px;color:var(--text);letter-spacing:1.5px;}
.modal-body{padding:20px;}
.modal-footer{padding:13px 20px;border-top:1px solid var(--border);display:flex;gap:7px;justify-content:flex-end;background:#f7faff;border-radius:0 0 13px 13px;}
/* BATCH IMPORT */
.import-area{border:2px dashed rgba(0,180,255,.25);border-radius:9px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;}
.import-area:hover{border-color:var(--accent);background:rgba(0,180,255,.04);}
.import-area.drag{border-color:var(--green);background:rgba(0,230,118,.04);}
.import-preview{max-height:200px;overflow-y:auto;margin-top:12px;}
.import-row{display:flex;gap:8px;font-size:15px;font-family:var(--mono);padding:4px 8px;border-radius:4px;margin-bottom:3px;}
.import-row.ok{background:rgba(0,230,118,.06);color:var(--green);}
.import-row.err{background:rgba(244,67,54,.06);color:var(--red);}
/* TOAST */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(16px);
  background:rgba(10,158,90,.1);border:1px solid rgba(10,158,90,.35);border-radius:7px;
  padding:8px 18px;font-family:var(--mono);font-size:15px;color:var(--green);box-shadow:0 4px 16px rgba(0,0,0,.1);
  opacity:0;transition:all .3s;z-index:9999;white-space:nowrap;pointer-events:none;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.warn{background:rgba(208,96,0,.1);border-color:rgba(208,96,0,.35);color:var(--orange);}
#toast.err{background:rgba(200,40,40,.1);border-color:rgba(200,40,40,.35);color:var(--red);}
/* ── 左下角主动提醒 widget ───────────────────────────────────────── */
#alert-widget{position:fixed;left:18px;bottom:18px;z-index:480;font-family:var(--mono);
  transition:all .25s cubic-bezier(.4,0,.2,1);}
/* 移动端（≤768px）整段隐藏小铃铛 — 配合 JS 不启动轮询，减少后台开销 */
@media (max-width:768px){ #alert-widget{display:none !important;} }
#alert-icon{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1565c0,#0d47a1);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(21,101,192,.35);font-size:18px;position:relative;
  transition:all .2s;}
#alert-icon:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(21,101,192,.5);}
#alert-icon-badge{position:absolute;top:-4px;right:-4px;background:#e53935;color:#fff;
  border-radius:10px;font-size:10px;font-weight:700;min-width:16px;height:16px;
  padding:0 4px;display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(229,57,53,.4);}
#alert-icon-badge.show{display:flex;}
#alert-card{display:none;width:300px;background:#fff;border:1px solid var(--border);
  border-radius:11px;box-shadow:0 8px 28px rgba(0,0,0,.13);overflow:hidden;
  animation:alertSlideIn .25s cubic-bezier(.4,0,.2,1);}
#alert-card-head{display:flex;align-items:center;gap:6px;padding:9px 12px;
  background:linear-gradient(135deg,#e3f2fd,#f0f7ff);border-bottom:1px solid #d0e2f5;
  font-size:13px;font-weight:700;color:#0d47a1;}
#alert-card-close{margin-left:auto;background:transparent;border:none;cursor:pointer;
  font-size:14px;color:#666;padding:2px 6px;border-radius:4px;}
#alert-card-close:hover{background:rgba(0,0,0,.06);color:#111;}
#alert-card-body{padding:11px 13px;font-size:13px;color:#333;line-height:1.55;
  min-height:46px;max-height:120px;overflow-y:auto;}
#alert-card-body .alert-line{padding:2px 0;}
#alert-card-body .alert-emph{color:#c62828;font-weight:700;}
#alert-card-actions{display:flex;align-items:center;gap:6px;padding:8px 12px;
  background:#fafbfd;border-top:1px solid #f0f4f9;}
.alert-collapsed #alert-card{display:none;}
.alert-collapsed #alert-icon{display:flex;}
.alert-expanded #alert-card{display:block;}
.alert-expanded #alert-icon{display:none;}
@keyframes alertSlideIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
/* CONFIRM */
.confirm-box{background:#fff;border:1px solid rgba(200,40,40,.2);box-shadow:0 10px 40px rgba(0,0,0,.12);border-radius:11px;
  padding:24px;width:340px;text-align:center;}
.confirm-title{font-size:16px;color:var(--text);margin-bottom:7px;}
.confirm-sub{font-size:15px;color:#555;margin-bottom:18px;line-height:1.6;}
.confirm-btns{display:flex;gap:8px;justify-content:center;}
.batch-bar{display:none;align-items:center;gap:10px;padding:10px 14px;background:rgba(200,40,40,.05);
  border:1px solid rgba(200,40,40,.18);border-radius:8px;margin-bottom:10px;font-size:15px;}
.batch-bar.show{display:flex;}
.ship-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);flex-shrink:0;margin-right:4px;}
.ship-card.batch-mode{cursor:default;}
.ship-card.batch-mode:hover{border-color:var(--border);}
.ship-card.batch-checked{border-color:rgba(244,67,54,.5)!important;background:rgba(244,67,54,.06)!important;}
.date-filter-row{display:none;align-items:center;gap:7px;padding:8px 12px;
  background:#eef6ff;border:1px solid rgba(26,115,212,.15);border-radius:8px;margin-bottom:8px;flex-wrap:wrap;}
.date-filter-row.show{display:flex;}
.date-filter-row label{font-size:14px;color:#555;font-family:var(--mono);white-space:nowrap;}
.date-filter-row input[type=date]{background:#fff;border:1px solid #c8d8e8;border-radius:5px;
  padding:4px 7px;color:var(--text);font-family:var(--mono);font-size:15px;outline:none;cursor:pointer;}
.date-filter-row input[type=date]:focus{border-color:var(--accent);}
.date-sep{color:#555;font-family:var(--mono);font-size:15px;}
.date-group{display:flex;align-items:center;gap:5px;padding:4px 8px;background:#fff;border-radius:6px;border:1px solid #c8d8e8;}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:rgba(0,0,0,.04);}
/* RISK FACTOR PAGE */
.rf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.rf-panel{background:#fff;border:1px solid var(--border);border-radius:11px;overflow:hidden;display:flex;flex-direction:column;}
.rf-panel-hd{padding:11px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:#f8fafd;}
.rf-panel-ttl{display:flex;align-items:center;gap:7px;}
.rf-icon{font-size:21px;width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rf-name{font-family:var(--mono);font-size:15px;color:var(--text);font-weight:600;}
.rf-count{font-size:14px;padding:2px 6px;border-radius:3px;font-family:var(--mono);}
.rf-body{padding:10px;flex:1;max-height:280px;overflow-y:auto;}
.rf-entry{padding:8px 10px;border-radius:7px;background:#f8fafd;border:1px solid var(--border);margin-bottom:6px;position:relative;}
.rf-entry-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;}
.rf-entry-bl{font-family:var(--mono);font-size:15px;color:var(--accent);font-weight:600;}
.rf-entry-days{font-family:var(--mono);font-size:17px;font-weight:800;}
.rf-entry-note{font-size:14px;color:#555;line-height:1.5;}
.rf-entry-ship{font-size:14px;margin-top:3px;}
.rf-entry-acts{display:flex;gap:4px;margin-top:6px;}
.rf-empty{text-align:center;padding:24px 12px;color:#555;font-size:15px;line-height:1.8;}
/* DATA MGMT PAGE */
.dm-page-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:10px;}
.dm-page-tab{padding:6px 14px;border-radius:6px;font-family:var(--mono);font-size:15px;cursor:pointer;border:1px solid var(--border);background:#fff;color:#555;transition:all .15s;}
.dm-page-tab.active{background:var(--accent);color:#fff;border-color:var(--accent);}
/* DM 顶层组按钮：单击即变色（避免 JS 内联样式覆盖造成卡顿） */
.dm-group-tab{padding:9px 18px;border-radius:8px;border:1px solid var(--border);background:#fff;color:#333;
  font-family:var(--mono);font-size:14px;font-weight:600;cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
.dm-group-tab.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;}
.analytics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.analytics-card{padding:12px;border-radius:9px;background:#fff;border:1px solid var(--border);}
.an-header{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.an-icon{font-size:18px;}
.an-name{font-family:var(--mono);font-size:15px;color:var(--text);font-weight:600;flex:1;line-height:1.3;}
.an-level{font-size:13px;padding:2px 5px;border-radius:3px;font-family:var(--mono);}
.an-delay{font-family:var(--mono);font-size:24px;font-weight:800;margin-bottom:4px;}
.an-delay-lbl{font-size:13px;color:#555;}
.an-bar{height:3px;border-radius:2px;background:rgba(0,0,0,.08);margin:6px 0;}
.an-fill{height:100%;border-radius:2px;}
.an-sources{font-size:13px;color:#555;line-height:1.5;font-family:var(--mono);}
.an-pulse{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:3px;animation:pulse 2s infinite;}
.dm-section{margin-bottom:18px;}
.dm-section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.dm-section-title{font-family:var(--mono);font-size:16px;color:var(--text);display:flex;align-items:center;gap:6px;}
::-webkit-scrollbar-thumb{background:rgba(26,115,212,.2);border-radius:3px;}
/* TABLE VIEW */
.ship-table-wrap{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - var(--sticky-h, 160px));border-radius:10px;border:1px solid var(--border);box-shadow:0 1px 6px rgba(0,0,0,.04);}
.ship-table{width:100%;border-collapse:collapse;font-size:15px;white-space:nowrap;}
.ship-table thead th{padding:9px 12px;background:#dde8f5;color:#222;font-family:var(--mono);font-size:14px;letter-spacing:1px;text-align:left;border-bottom:2px solid rgba(26,115,212,.3);position:sticky;top:0;z-index:12;white-space:nowrap;cursor:pointer;user-select:none;box-shadow:0 2px 6px rgba(0,0,0,.1);}
.ship-table thead th:hover{color:var(--accent);}
.ship-table thead th.sort-asc::after{content:" ▲";color:var(--accent);}
.ship-table thead th.sort-desc::after{content:" ▼";color:var(--accent);}
.ship-table tbody tr{border-bottom:1px solid rgba(0,100,180,.05);transition:background .15s;cursor:pointer;}
.ship-table tbody tr:hover{background:#eef6ff;}
.ship-table tbody tr.tr-selected{background:rgba(200,40,40,.04);border-left:3px solid var(--red);}
.ship-table td{padding:8px 12px;color:var(--text);vertical-align:middle;}
.ship-table td.td-mono{font-family:var(--mono);font-size:15px;}
.risk-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:4px;font-family:var(--mono);font-size:15px;font-weight:700;}
.delay-pill{display:inline-block;padding:2px 7px;border-radius:4px;font-family:var(--mono);font-size:15px;font-weight:700;}
.view-toggle{display:flex;gap:3px;background:#eef3fa;border:1px solid var(--border);border-radius:6px;padding:2px;}
.vt-btn{padding:4px 10px;border-radius:4px;border:none;background:none;color:#555;cursor:pointer;font-size:17px;transition:all .2s;}
.vt-btn.active{background:var(--accent);color:#fff;}
/* Inline date edit */
.inline-date{cursor:pointer;border-bottom:1px dashed rgba(0,180,255,.35);padding-bottom:1px;
  transition:border-color .15s;}
.inline-date:hover{border-color:var(--accent);color:var(--accent)!important;}
/* Client-mode: inline dates read-only */
body.client-mode .inline-date { cursor:default !important; border-bottom:none !important; pointer-events:none !important; }
.inline-date-input{background:#fff;border:1px solid var(--accent);border-radius:5px;
  color:var(--text);font-family:var(--mono);font-size:15px;padding:3px 7px;outline:none;
  box-shadow:0 0 10px rgba(0,180,255,.25);z-index:300;}
/* Column resize handle */
.col-resize-handle{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;
  background:transparent;z-index:10;}
.col-resize-handle:hover,.col-resize-handle.dragging{background:rgba(0,180,255,.4);}
.ship-table thead th{position:relative;overflow:visible;}
/* Drag-to-reorder */
.ship-table thead th.drag-over-left{border-left:2px solid var(--accent)!important;}
.ship-table thead th.drag-over-right{border-right:2px solid var(--accent)!important;}
.ship-table thead th.dragging-col{opacity:.4;}
/* Hover copy button */
.td-copyable{position:relative;}
.copy-btn{display:none;position:absolute;right:2px;top:50%;transform:translateY(-50%);
  background:rgba(26,115,212,.1);border:1px solid rgba(26,115,212,.25);border-radius:3px;
  padding:1px 5px;font-size:14px;color:var(--accent);cursor:pointer;white-space:nowrap;
  font-family:var(--mono);line-height:1.6;z-index:20;}
.td-copyable:hover .copy-btn{display:block;}
.copy-btn:hover{background:rgba(26,115,212,.2);}
/* Per-column search inputs */
.col-search{width:100%;background:#fff;border:1px solid #c8d8e8;border-radius:4px;
  padding:3px 6px;color:var(--text);font-family:var(--mono);font-size:14px;outline:none;box-sizing:border-box;
  transition:border-color .15s;}
.col-search:focus{border-color:rgba(0,180,255,.5);}
.col-search::placeholder{color:#a8bcc8;}
.ship-table thead tr.col-filter-row th{padding:4px 6px;background:#e6edf5;}
/* Freight confirmed badge */
.freight-confirmed{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:3px;
  font-family:var(--mono);font-size:13px;background:rgba(10,158,90,.1);color:var(--green);
  border:1px solid rgba(10,158,90,.2);}
.freight-pending{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:3px;
  font-family:var(--mono);font-size:13px;background:rgba(208,96,0,.08);color:var(--orange);
  border:1px solid rgba(208,96,0,.2);cursor:pointer;}

/* ── LOGIN SCREEN ── */
/* 背景：海边阳光照片 + Ken Burns 缓慢推近 + 阳光光斑漂移 + 海面闪光呼吸
   纯 CSS 动画，0 额外带宽；CDN 不可达时由渐变兜底依然是动态的
   要换成真视频背景：把 .login-bg-anim 替换为 <video autoplay loop muted playsinline> */
#login-screen{position:fixed;inset:0;z-index:99999;
  background-color:#0288d1;
  display:flex;align-items:center;justify-content:center;overflow-y:auto;overflow-x:hidden;}
/* 动态海边背景层（Ken Burns 缓慢推近 + 渐变兜底） */
.login-bg-anim{position:absolute;inset:-5%;z-index:0;will-change:transform;
  background-color:#1976d2;
  background-image:
    linear-gradient(135deg,rgba(255,235,150,.20) 0%,rgba(3,169,244,.30) 45%,rgba(13,71,161,.45) 100%),
    url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1920&q=70');
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  animation:kenBurns 28s ease-in-out infinite alternate;}
@keyframes kenBurns{
  0%   { transform:scale(1.05) translate(0,0); }
  50%  { transform:scale(1.12) translate(-1.5%, -1%); }
  100% { transform:scale(1.18) translate(1.5%, 1%); }
}
/* 阳光光斑：缓慢漂移 + 微弱呼吸亮度 */
#login-screen::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse at 80% 15%,rgba(255,235,150,.55) 0%,transparent 55%),
    radial-gradient(ellipse at 15% 85%,rgba(0,150,255,.30) 0%,transparent 60%);
  animation:sunDrift 14s ease-in-out infinite alternate;}
@keyframes sunDrift{
  0%   { transform:translate(0, 0) scale(1);    opacity:.95; }
  100% { transform:translate(2%, -2%) scale(1.08); opacity:1; }
}
/* 海面闪光：网格叠加层呼吸 */
#login-screen::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:50px 50px;mix-blend-mode:overlay;
  animation:waterShimmer 8s ease-in-out infinite alternate;}
@keyframes waterShimmer{
  0%   { opacity:.45; background-size:50px 50px; }
  100% { opacity:.85; background-size:54px 54px; }
}
/* 减少动画偏好（无障碍 + 节能模式）— 关闭所有动画 */
@media (prefers-reduced-motion: reduce){
  .login-bg-anim, #login-screen::before, #login-screen::after { animation:none !important; }
}
.login-box{background:#fff;border-radius:18px;padding:44px 44px 36px;width:400px;max-width:94vw;
  box-shadow:0 30px 80px rgba(0,30,80,.45);position:relative;z-index:2;
  max-height:95vh;overflow-y:auto;
  border:1px solid rgba(255,255,255,.6);}
.login-logo{text-align:center;margin-bottom:28px;}
.login-logo-icon{width:64px;height:64px;background:linear-gradient(135deg,#1a73d4,#0d47a1);border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:14px;
  box-shadow:0 6px 22px rgba(26,115,212,.45);color:#fff;}
.login-title{font-size:30px;font-weight:900;color:#0d47a1;letter-spacing:3px;
  font-family:"Songti SC","STSong","SimSun","Noto Serif SC","Source Han Serif SC",serif;
  display:flex;align-items:flex-start;justify-content:center;line-height:1.1;}
.login-title .reg-mark{font-size:13px;font-weight:700;margin-left:3px;margin-top:4px;color:#1565c0;letter-spacing:0;}
.login-subtitle{font-size:14px;color:#1565c0;margin-top:8px;letter-spacing:1px;font-weight:600;
  font-family:"Songti SC","STSong","SimSun","Noto Serif SC","Source Han Serif SC",serif;}
.login-field{margin-bottom:16px;}
.login-field label{display:block;font-size:12px;font-weight:600;color:#333;margin-bottom:6px;letter-spacing:.5px;}
.login-field input{width:100%;padding:12px 14px;border:1.5px solid #dde4ee;border-radius:9px;
  font-size:14px;color:#111;outline:none;transition:border-color .2s,box-shadow .2s;background:#f8faff;font-family:var(--sans);}
.login-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,115,212,.12);background:#fff;}
.login-btn{width:100%;padding:13px;background:linear-gradient(135deg,#1a73d4,#1255a8);border:none;border-radius:9px;
  color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.5px;font-family:var(--sans);
  box-shadow:0 4px 16px rgba(26,115,212,.3);margin-top:6px;}
.login-btn:hover{background:linear-gradient(135deg,#2196f3,#1a73d4);box-shadow:0 6px 20px rgba(26,115,212,.4);}
.login-btn:active{transform:translateY(1px);}
.login-err{color:#c0392b;font-size:12px;margin-top:8px;text-align:center;min-height:18px;font-weight:500;}
.login-footer{text-align:center;margin-top:20px;font-size:11px;color:#aaa;}

/* ── USER MANAGEMENT (admin panel) ── */
.user-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;
  display:flex;align-items:center;gap:12px;box-shadow:0 1px 4px rgba(0,0,0,.04);}
.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;font-weight:700;}
.user-info{flex:1;min-width:0;}
.user-name{font-size:14px;font-weight:700;color:#111;font-family:var(--mono);}
.user-role{font-size:11px;color:#888;margin-top:2px;}
.user-perms{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
/* Hide cost/profit fields for users without viewFreight permission */
.no-cost .cost-sensitive { display:none !important; }
/* freight-sensitive：销售运费/卖价相关 — 销售（viewFreight=true）能看，纯客户端（viewFreight=false）不能看 */
.no-freight .freight-sensitive { display:none !important; }
/* ════════════════════════════════════════════════════════════
   📄 P2 单据打印 CSS — A4 纸张布局，浏览器 Ctrl+P → 保存为 PDF
   .ops-doc-print 容器 + .doc-page A4 页 + 打印时只显示该容器
   ════════════════════════════════════════════════════════════ */
.ops-doc-page {
  background:#fff;
  width:210mm;
  min-height:297mm;
  padding:14mm 16mm;
  margin:8px auto;
  box-shadow:0 0 12px rgba(0,0,0,.1);
  font-family:'Helvetica Neue',Arial,'Noto Sans CJK SC','PingFang SC','Hiragino Sans GB',sans-serif;
  color:#222;
  font-size:11px;
  line-height:1.5;
  box-sizing:border-box;
}
.ops-doc-page h1 { font-size:18px;margin:0 0 4px;letter-spacing:1px;color:#0d47a1 }
.ops-doc-page h2 { font-size:13px;margin:14px 0 6px;color:#0d47a1;border-bottom:1px solid #ccc;padding-bottom:3px }
.ops-doc-page table { width:100%;border-collapse:collapse;font-size:10.5px }
.ops-doc-page table th, .ops-doc-page table td { border:1px solid #999;padding:4px 6px;text-align:left;vertical-align:top }
.ops-doc-page table thead th { background:#e8eef8;font-weight:600 }
.ops-doc-page .doc-grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #999 }
.ops-doc-page .doc-cell { padding:6px 8px;border-right:1px solid #999;border-bottom:1px solid #999 }
.ops-doc-page .doc-cell:last-child { border-right:none }
.ops-doc-page .doc-cell-label { font-size:9px;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px }
.ops-doc-page .doc-cell-value { font-size:11.5px;color:#222;font-weight:500;white-space:pre-wrap }
.ops-doc-page .doc-watermark-draft {
  position:absolute;font-size:90px;color:rgba(255,80,80,.12);font-weight:900;
  transform:rotate(-30deg);left:30%;top:40%;letter-spacing:8px;pointer-events:none
}
@media print {
  body * { visibility:hidden !important }
  .ops-doc-print, .ops-doc-print * { visibility:visible !important }
  .ops-doc-print { position:absolute;left:0;top:0;width:100%;background:#fff !important }
  .ops-doc-page { box-shadow:none !important;margin:0 auto;page-break-after:always }
  .no-print { display:none !important }
}

/* Lock finance sub-pages from clients — multi-layer protection
   客户端只能看 #fin-sub-ar（运费账单），其余财务模块全部隐藏（深度防御 — 即便 setFinTab 闸门绕过，CSS 层也兜底）*/
.client-finance-lock [data-admin-only="true"] { display:none !important; pointer-events:none !important; }
.client-finance-lock #fin-kpi-grid,
.client-finance-lock #fin-group-tabs,
.client-finance-lock #fin-sub-dashboard,
.client-finance-lock #fin-sub-ap,
.client-finance-lock #fin-sub-payments,
.client-finance-lock #fin-sub-cashbook,
.client-finance-lock #fin-sub-soa-customer,
.client-finance-lock #fin-sub-soa-supplier,
.client-finance-lock #fin-sub-bank-recon,
.client-finance-lock #fin-sub-invoice,
.client-finance-lock #fin-sub-period,
.client-finance-lock #fin-sub-voucher,
.client-finance-lock #fin-sub-gl,
.client-finance-lock #fin-sub-forex,
.client-finance-lock #fin-sub-summary,
.client-finance-lock #fin-sub-commission,
.client-finance-lock #fin-sub-credit,
.client-finance-lock #fin-sub-cashflow { display:none !important; }

/* ── 财务岗位 4 级 — 按角色隐藏不应能操作的按钮 ──
   .ar-write-btn = 应收侧写操作（新增/编辑/删除/批量/导出客户账单/从货件同步）
   .ap-write-btn = 应付侧写操作（新增/编辑/删除/批量/导出供应商账单/对账导入/同步单号）
   .fin-master-only = 只有 admin/finance（财务主管）可见（月结/凭证红冲/汇率维护/红冲按钮等）
*/
body.role-cashier .ar-write-btn,
body.role-cashier .ap-write-btn,
body.role-cashier .fin-master-only { display:none !important; }

body.role-ar-clerk .ap-write-btn,
body.role-ar-clerk .fin-master-only { display:none !important; }

body.role-ap-clerk .ar-write-btn,
body.role-ap-clerk .fin-master-only { display:none !important; }

/* 客服端：完全隐藏「数据管理 → 🛡️ 数据安全中心」整组（组按钮 + 子 tab + 动作按钮） */
body.role-service #dmg-security,
body.role-service .dm-st-security,
body.role-service .dm-act-security { display:none !important; }
/* 客服端：数据管理 → 客商一体管理 子 tab 仅保留「🛤️ 渠道管理」，隐藏「🏭 供应商管理」「👥 客户管理」 */
body.role-service #dst-suppliers,
body.role-service #dst-customers { display:none !important; }
/* 客服端：AR 应收账款页"操作"列整列隐藏（核销/撤销/编辑/删除按钮不展示给客服） */
body.role-service .ar-ops-col { display:none !important; }
/* 客服端：AR 顶部写入按钮（新增应收 / 批量核销 / 批量删除 / 从货件同步）整套隐藏，
   仅保留只读 + 批量标记已确认 + 导出客户账单（如已授权） */
body.role-service .ar-write-btn { display:none !important; }
/* Client-mode: hide risk stat cards, edit/delete row buttons, new/import */
body.client-mode #sc-safe, body.client-mode #sc-low,
body.client-mode #sc-mid, body.client-mode #sc-high { display:none !important; }
body.client-mode .row-edit-btn,
body.client-mode .row-del-btn { display:none !important; }
/* 客户端新建/导入按钮的显隐由 applyPermissions() 根据权限动态控制，不在 CSS 强制隐藏 */
/* Hide AR operation column th and buttons for client-mode */
body.client-mode .ar-ops-col { display:none !important; }
.perm-tag{font-size:10px;padding:2px 7px;border-radius:3px;font-family:var(--mono);font-weight:500;}
.perm-on{background:#e8f5e9;color:#2e7d32;border:1px solid #c8e6c9;}
.perm-off{background:#fafafa;color:#bbb;border:1px solid #eee;text-decoration:line-through;}
.user-acts{display:flex;gap:5px;flex-shrink:0;}

/* Header user chip */
.header-user{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;
  background:#f0f4f8;border:1px solid var(--border);border-radius:20px;cursor:pointer;
  transition:all .2s;font-size:12px;color:#333;}
.header-user:hover{background:#e0ecff;border-color:var(--accent);}
.header-user-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;}

/* ── FINANCE MODULE ── */
.fin-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.fin-kpi{background:#fff;border:1px solid var(--border);border-radius:11px;padding:16px 18px;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.fin-kpi-label{font-size:12px;color:#888;letter-spacing:1px;font-family:var(--mono);margin-bottom:6px;}
.fin-kpi-value{font-size:26px;font-weight:800;font-family:var(--mono);line-height:1;}
.fin-kpi-sub{font-size:11px;color:#aaa;margin-top:4px;}
.fin-table{width:100%;border-collapse:collapse;font-size:13px;}
.fin-table th{padding:9px 12px;text-align:left;font-weight:700;color:#555;font-family:var(--mono);background:#f8faff;border-bottom:2px solid var(--border);white-space:nowrap;}
.fin-table td{padding:9px 12px;border-bottom:1px solid #f0f4f8;vertical-align:middle;}
.fin-table tr:hover td{background:#f8faff;}
.fin-status{font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600;font-family:var(--mono);}
.fin-s-pending{background:#fff8e1;color:#f57f17;border:1px solid #ffe082;}
.fin-s-partial{background:#e3f2fd;color:#1565c0;border:1px solid #bbdefb;}
.fin-s-paid{background:#e8f5e9;color:#2e7d32;border:1px solid #c8e6c9;}
.fin-s-overdue{background:#ffebee;color:#c62828;border:1px solid #ffcdd2;}
.fin-s-void{background:#f5f5f5;color:#999;border:1px solid #e0e0e0;}
.fin-sub-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:2px solid var(--border);padding-bottom:0;}
.fin-sub-tab{padding:8px 16px;border-radius:7px 7px 0 0;font-size:13px;font-family:var(--mono);cursor:pointer;border:1px solid transparent;background:transparent;color:#666;transition:all .2s;margin-bottom:-2px;}
.fin-sub-tab.active{background:#fff;border-color:var(--border);border-bottom-color:#fff;color:var(--accent);font-weight:700;}
.fin-sub-tab:hover:not(.active){background:rgba(26,115,212,.05);}
.fin-section{background:#fff;border:1px solid var(--border);border-radius:11px;padding:16px;margin-bottom:14px;}
.fin-section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.fin-section-title{font-size:15px;font-weight:700;color:#111;}
.fin-badge-ar{background:#e8f5e9;color:#2e7d32;border:1px solid #c8e6c9;border-radius:5px;padding:2px 8px;font-size:11px;font-family:var(--mono);}
.fin-badge-ap{background:#fff3e0;color:#e65100;border:1px solid #ffcc80;border-radius:5px;padding:2px 8px;font-size:11px;font-family:var(--mono);}


/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVE  ≤ 768px
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Login Screen ── */
  #login-screen {
    align-items: flex-start !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .login-box {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 32px 24px 28px !important;
    max-height: none !important;
    border-radius: 14px !important;
  }
  .login-logo-icon { font-size: 36px !important; width: 56px !important; height: 56px !important; }
  .login-title { font-size: 24px !important; letter-spacing: 2px !important; }
  .login-title .reg-mark { font-size: 11px !important; }
  .login-subtitle { font-size: 13px !important; }
  .login-field input {
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }
  .login-btn, #login-btn {
    padding: 14px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    margin-top: 6px !important;
  }

  /* ── Header ── */
  header {
    padding: 8px 12px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .logo { display: none !important; }
  .logo-text { font-size: 13px !important; }
  .header-right { gap: 6px !important; flex-wrap: wrap !important; }
  .live-badge span:not(.live-dot) { display: none !important; }
  #header-clock { font-size: 12px !important; }
  #header-username { max-width: 80px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── Nav Tabs ── */
  .nav-tabs {
    padding: 2px !important;
    gap: 2px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .nav-tab {
    padding: 6px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  /* ── Stats Row ── */
  .stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }
  .stat-card { padding: 6px 8px !important; }
  .stat-label { font-size: 10px !important; }
  .stat-value { font-size: 18px !important; }
  .stat-sub { font-size: 10px !important; }

  /* ── Page ── */
  .page { padding: 8px 10px !important; }

  /* ── Toolbar ── */
  .toolbar {
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-bottom: 6px !important;
  }
  .btn {
    padding: 7px 10px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    min-height: 36px !important;
  }
  #btn-add-ship, #btn-add-ship-item { 
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  /* Search bar */
  .search-bar { min-width: 0 !important; flex: 1 !important; }
  .filter-row { flex-wrap: wrap !important; gap: 4px !important; }
  .filter-row input, .filter-row select {
    font-size: 14px !important;
    padding: 6px 8px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Table: horizontal scroll ── */
  .ship-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100vh - 200px) !important;
  }
  .ship-table { min-width: 900px !important; font-size: 12px !important; }
  .ship-table th, .ship-table td { padding: 6px 8px !important; }

  /* ── Detail Panel: full screen bottom drawer ── */
  #detail-panel {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 85vh !important;
    border-left: none !important;
    border-top: 2px solid var(--accent) !important;
    border-radius: 16px 16px 0 0 !important;
    transform: translateY(100%) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
  }
  #detail-panel.open {
    transform: translateY(0) !important;
  }

  /* ── Modals: full screen ── */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
  }
  .modal-body { padding: 12px 14px !important; }
  .modal-title { font-size: 15px !important; }
  .form-row { flex-direction: column !important; gap: 6px !important; }
  .form-row .form-group { width: 100% !important; }
  input, select, textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }

  /* ── Import Menu ── */
  .import-menu {
    right: 0 !important;
    left: auto !important;
    min-width: 200px !important;
  }

  /* ── DM page ── */
  .dm-tabs { flex-wrap: wrap !important; }
  .dm-tab { flex: 1 !important; min-width: 80px !important; text-align: center !important; }

  /* ── Finance page ── */
  .fin-tabs { flex-wrap: wrap !important; overflow-x: auto !important; }

  /* ── Buttons in detail panel ── */
  .d-actions { flex-wrap: wrap !important; gap: 4px !important; }
  .d-actions .btn { flex: 1 !important; min-width: 80px !important; }

  /* ── iOS / touch specific fixes (合并自原嵌套块；之前因 @media 未闭合大部分手机失效) ── */
  /* Prevent iOS auto-zoom on input focus (must be >= 16px) */
  #login-user, #login-pass,
  .modal input, .modal select, .modal textarea,
  .filter-row input, .filter-row select {
    font-size: 16px !important;
  }
  /* Better touch targets — Apple HIG 推荐 ≥44px，这里 40px 给紧凑布局留余地 */
  .nav-tab, .btn, .login-btn, button {
    min-height: 40px !important;
    touch-action: manipulation !important;
  }
  /* Login button & fields */
  .login-btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .login-field { margin-bottom: 16px !important; }
  .login-field label { font-size: 14px !important; margin-bottom: 6px !important; display: block !important; }
  .login-field input {
    width: 100% !important;
    padding: 13px 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid #dde3f0 !important;
    font-size: 16px !important;
    outline: none !important;
  }
  .login-field input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(26,115,212,.15) !important;
  }
  /* Scroll momentum on all common table wraps */
  .ship-table-wrap, .fin-section, .dm-table-wrap, .table-wrap {
    -webkit-overflow-scrolling: touch !important;
  }
  /* Detail panel drawer handle */
  #detail-panel::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    margin: 10px auto 0;
  }

  /* ── 财务/数据管理表格通用：横向滚动 + 去最小宽度限制 ── */
  .fin-table { font-size: 12px !important; min-width: 720px !important; }
  .fin-table th, .fin-table td { padding: 5px 7px !important; white-space: nowrap !important; }
  .fin-section { overflow-x: auto !important; }
  /* 让带 .fin-table 的容器都能横向滚 */
  .fin-section table, .dm-content table { display: table !important; }

  /* ── 模态弹窗：网格布局退化为单列（覆盖内联 grid-template-columns）── */
  .modal-body [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 📦 仓库查询页（移动端核心改进）── */
  /* 顶栏：搜索框单独占满宽，按钮/警示徽章下面一行 */
  #page-warehouse > div { padding: 8px !important; }
  #page-warehouse h1, #page-warehouse [style*="font-size:22px"] { font-size: 18px !important; }
  /* 搜索行：纵向堆叠 */
  #page-warehouse #ws-q { width: 100% !important; flex: 1 1 100% !important; }
  #page-warehouse [onclick*="wsSearch"], #page-warehouse [onclick*="ws-results"] { flex: 1 1 calc(50% - 4px) !important; }
  #page-warehouse > div > div:first-child { flex-direction: column !important; align-items: stretch !important; }
  #page-warehouse > div > div:first-child > div:first-child { width: 100% !important; }
  #ws-meta { margin-left: 0 !important; font-size: 11px !important; }
  /* 搜索框那行（input + 两按钮 + 警告徽章）允许换行 + 警告徽章满宽 */
  #page-warehouse [style*="display:flex"][style*="gap:8px"] {
    flex-wrap: wrap !important;
  }
  #page-warehouse [title*="UPS / FedEx"] {
    white-space: normal !important;
    flex: 1 1 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-top: 6px !important;
    font-size: 11px !important;
  }
  /* 管理员补录表单：6 列 grid → 单列堆叠 */
  #ws-tab-zip > div:first-child,
  #ws-tab-us-wh > div:first-child,
  #ws-tab-eu-wh > div:first-child {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #ws-tab-zip > div:first-child > div,
  #ws-tab-us-wh > div:first-child > div,
  #ws-tab-eu-wh > div:first-child > div {
    grid-column: span 1 !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* 仓库 Tab 切换按钮：横向滚动条 */
  #ws-admin-overrides > div:nth-child(2) {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .ws-tab { white-space: nowrap !important; flex-shrink: 0 !important; }
  /* 仓库结果卡：减内边距 + 字号 */
  #ws-results > div { padding: 12px 14px !important; }
  #ws-results [style*="font-size:20px"] { font-size: 16px !important; }
  /* 卡片内的 KV grid：mobile 单列 */
  #ws-results [style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 信用管理表格 ── */
  #credit-tbody tr td { padding: 7px 8px !important; font-size: 11px !important; }

  /* ── 客户档案 / CRM 表格行：在小屏不要被超长地址撑爆 ── */
  .modal [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ════════════════════════════════════════════════════════════════
     主要页面移动端适配补丁（2026-05 加） — 覆盖所有 .fin-sub-tabs 用法
     ════════════════════════════════════════════════════════════════ */

  /* ── 通用：所有 .fin-sub-tabs（CRM / 财务 / 自动化 / 运营 / WMS / 销售管理 sub-nav）
        → 横向滚动条；按钮不换行；触摸惯性 ── */
  .fin-sub-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    padding-bottom: 4px !important;
  }
  .fin-sub-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 7px 12px !important;
    min-height: 36px !important;
  }
  /* 销售管理 sub-nav（admin 切换 工作台 ↔ 销售CRM） */
  #sales-mgmt-subnav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 10px !important;
  }
  #sales-mgmt-subnav .fin-sub-tab { font-size: 12px !important; padding: 6px 12px !important; }

  /* ── 运营管理 KPI 卡（admin / ops_admin 入口）：5 列 → 2 列 ── */
  /* 注：用 #page-operations #ops-kpi-row 提高 specificity，避免被下面 #page-operations [style*="grid-template-columns"] 通用规则压成 1 列 */
  #page-operations #ops-kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .ops-kpi-card {
    padding: 8px 10px !important;
  }
  .ops-kpi-card div[style*="font-size:24px"] { font-size: 18px !important; }
  .ops-kpi-card div[style*="font-size:11px"] { font-size: 10px !important; }

  /* ── 工作台（dashboard）：admin / sales 入口 ── */
  #page-dashboard .dm-header { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  #page-dashboard .dm-title { font-size: 16px !important; }
  #page-dashboard .dm-sub { font-size: 12px !important; }
  /* 工作台 KPI 卡片网格（auto-fit minmax）→ 单列；但不要碰排行榜表格那种固定列布局 */
  #dash-body [style*="auto-fit"], #dash-body [style*="auto-fill"] {
    grid-template-columns: 1fr !important;
  }
  #dash-body [style*="display:grid"] { gap: 8px !important; }
  /* 工作台内所有按钮：保留不收缩 + 不换行（修排行榜「编辑目标」按钮被 flex 压成竖排） */
  #dash-body button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  /* 排行榜行：允许整体横滚（行内列太多时） */
  #dash-body [style*="display:flex"][style*="align-items:center"][style*="border-bottom"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── 自动化中心 ── */
  #page-automation [style*="auto-fit"], #page-automation [style*="auto-fill"] {
    grid-template-columns: 1fr !important;
  }
  #page-automation .form-section { padding: 12px !important; }

  /* ── 运营管理子页通用：只压 auto-fit/auto-fill 网格（KPI / 卡片网格），不动表格内固定列布局 ── */
  #page-operations { padding: 6px 8px !important; }
  #page-operations [style*="auto-fit"], #page-operations [style*="auto-fill"] {
    grid-template-columns: 1fr !important;
  }
  /* 例外：航次列表的搜索框组 — 让它换行不要单列堆叠破坏 */
  #ops-sub-voyages > div:first-child { flex-wrap: wrap !important; }
  #ops-sub-voyages > div:first-child > * { font-size: 12px !important; }

  /* ── 仓库管理（WMS）页面 ── */
  #page-wms { padding: 6px 8px !important; }
  /* 8 个子 tab 横向滚动；上面通用 .fin-sub-tabs 规则已 cover */
  #wms-content { padding: 4px 0 !important; }
  /* WMS 列表卡片（入仓预报 / 入库 / 库存 / 装柜 / 出库 / 盘点 / 计费）的表格 → 横向滚动 */
  #wms-content table {
    min-width: 720px !important;
    font-size: 11.5px !important;
  }
  #wms-content table th, #wms-content table td {
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }
  /* WMS 表格外层包裹：用 div 默认溢出，强制横滚 */
  #wms-content > div[style*="overflow"], #wms-content > div:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* WMS 顶部工具条（筛选 + 按钮）行换行 */
  #wms-content > div:first-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* 在库库存 / 库位等 filter inputs */
  #wms-content input, #wms-content select {
    font-size: 14px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* ── 系统账号管理 modal：6 个 tab + 编辑表单 ── */
  #modal-users .modal { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; }
  #modal-users [style*="display:flex"][style*="border-bottom:2px solid var(--border)"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 8px !important;
  }
  #modal-users button[id^="mu-tab-"] {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
  }
  /* 用户卡片：移动端竖向堆叠（头像+info 第一行，操作按钮换到下一行） */
  .user-card {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .user-info {
    flex: 1 1 calc(100% - 56px) !important;
    min-width: 0 !important;
  }
  .user-name { font-size: 13px !important; word-break: break-all !important; }
  .user-acts {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }
  .user-acts .btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
    min-height: 32px !important;
    flex: 1 1 calc(25% - 4px) !important;
  }
  .user-perms { gap: 3px !important; }
  .user-perms .perm-tag { font-size: 10px !important; padding: 1px 6px !important; }
  /* 数据管理页内嵌的系统账号管理（dm-sub-users） */
  #dm-sub-users [id^="dm-acct-tab-"] {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  #dm-sub-users > div:nth-child(2) {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* 新增账号顶部的 5 个彩色按钮：换行布局 */
  #dm-sub-users > div:first-child > div:last-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #dm-sub-users > div:first-child > div:last-child .btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  /* ── 编辑账号 modal（modal-edit-user）── */
  /* 权限网格（每组里的 items grid）→ 单列 */
  #eu-perms-grid [style*="grid-template-columns:repeat(auto-fill,minmax(220px,1fr))"] {
    grid-template-columns: 1fr !important;
    padding: 8px !important;
  }
  /* 快捷模板按钮换行 */
  #modal-edit-user .form-section + div[style*="display:flex"] { flex-wrap: wrap !important; }
  /* 销售多客户绑定 chip */
  #eu-sales-customers { min-height: 40px !important; }

  /* ── 货件详情面板内 grid 单列 ── */
  #detail-panel [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .d-actions { padding: 8px 10px !important; }
  .d-actions .btn { font-size: 12px !important; padding: 8px 10px !important; }

  /* ── 入仓预报联动 section（新建货件 modal 内）── */
  #f-sync-advance-fields { grid-template-columns: 1fr !important; }
  #f-wms-advance-wrap { padding: 8px 10px !important; }

  /* ── 财务管理：5 大组顶级菜单（财务岗位主要入口）── */
  #fin-sub-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* 财务页内嵌的 group-tabs */
  #fin-group-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* 财务表格通用横滚（很多财务子页都是 table） */
  #page-finance table { font-size: 11.5px !important; min-width: 700px !important; }
  #page-finance table th, #page-finance table td { padding: 6px 8px !important; white-space: nowrap !important; }
  #page-finance > div { overflow-x: auto !important; }

  /* ── 数据管理：6 大组 tabs（admin 高频）── */
  .dm-page-tabs, .dm-page-group {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .dm-page-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 7px 10px !important;
  }
  /* 数据管理内的 KPI/卡片 grid → 单列；表格 grid 保持 */
  #page-dm [style*="auto-fit"], #page-dm [style*="auto-fill"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 销售 CRM 看板（admin / sales 入口）── */
  #page-crm [style*="auto-fit"], #page-crm [style*="auto-fill"] {
    grid-template-columns: 1fr !important;
  }
  #page-crm .fin-table { font-size: 11.5px !important; min-width: 600px !important; }

  /* ── Header 移动端：显示精简版 logo（HSIEHSHUN）+ 隐藏副标题 ── */
  .logo { display: flex !important; flex-shrink: 1 !important; min-width: 0 !important; }
  .brand-name { font-size: 15px !important; letter-spacing: 1px !important; }
  .brand-name .brand-reg { font-size: 8px !important; }
  .brand-sub { display: none !important; }
  .nav-tabs { margin-left: 6px !important; }

  /* sticky 元素去 backdrop-filter（避免 iOS Safari 模糊滤镜性能问题，但不强制 GPU 层 — 那会增加内存压力） */
  header, #toolbar-sticky {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ── Extra small phones ≤ 375px ── */
@media (max-width: 375px) {
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .nav-tab { font-size: 11px !important; padding: 5px 8px !important; }
  /* 仓库查询：再压缩一档 */
  #page-warehouse [style*="font-size:22px"] { font-size: 16px !important; }
  #ws-results [style*="font-size:20px"] { font-size: 15px !important; }
  /* 运营管理 KPI：≤375 也保持 2 列但更紧凑 */
  #ops-kpi-row { gap: 4px !important; }
  .ops-kpi-card div[style*="font-size:24px"] { font-size: 16px !important; }
  /* 子 tab 再压一档 */
  .fin-sub-tab { font-size: 11px !important; padding: 6px 9px !important; }
  /* Logo 在超小屏直接 hide（与原先一致），让 nav 占满 */
  .logo { display: none !important; }
  .nav-tabs { margin-left: 0 !important; }
  /* 系统账号管理顶部"+ 新增"按钮 4 列 → 2 列网格 */
  #dm-sub-users > div:first-child > div:last-child .btn { flex: 1 1 100% !important; }
}


/* ── Auth guard — hide ALL content when not logged in ── */
body.not-auth > *:not(#login-screen) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#login-screen {
  display: none;
}
body.not-auth #login-screen {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
}
body.not-auth {
  user-select: none !important;
  -webkit-user-select: none !important;
  overflow: hidden !important;
}

/* ════════════════════════════════════════════════════════════════
   ✨ VISUAL UPGRADE — 全站视觉提升（统一阴影/圆角/字色/焦点环/过渡）
   仅追加覆盖；不影响既有布局与行为
   ════════════════════════════════════════════════════════════════ */
:root{
  /* 文字层级 — 比纯黑柔和、和谐 */
  --text:#0f172a;            /* 主文字 */
  --muted:#5b6b80;           /* 次级 */
  --muted-2:#8a98ad;         /* 辅助 */
  /* 表面与边框 */
  --bg:#f4f7fb;
  --panel:#ffffff;
  --card:#ffffff;
  --card2:#f6f9fd;
  --border:rgba(15,23,42,.09);
  --border-strong:rgba(15,23,42,.16);
  /* 主题色（更和谐的蓝） */
  --accent:#1a73d4;
  --accent-2:#0f5fbf;
  --accent-soft:#e8f1fc;
  --accent-ring:rgba(26,115,212,.18);
  /* 状态色 */
  --green:#10916a;
  --green-soft:#e8f7f0;
  --orange:#d27a00;
  --orange-soft:#fff5e6;
  --red:#d83a3a;
  --red-soft:#fdecec;
  --yellow:#b88300;
  --yellow-soft:#fff7e0;
  /* 阴影分级（柔和、分层） */
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04);
  --shadow-lg:0 16px 40px rgba(15,23,42,.10),0 4px 12px rgba(15,23,42,.06);
  --shadow-xl:0 24px 70px rgba(15,23,42,.18),0 8px 22px rgba(15,23,42,.08);
  --shadow-focus:0 0 0 3px var(--accent-ring);
  /* 圆角 */
  --r-sm:6px; --r-md:8px; --r-lg:11px; --r-xl:14px; --r-2xl:18px;
  /* 过渡 */
  --t-fast:.14s cubic-bezier(.4,0,.2,1);
  --t-base:.22s cubic-bezier(.4,0,.2,1);
}

/* 全局字体渲染 */
body{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-feature-settings:"tnum" 1;
}

/* 自定义滚动条（细而克制） */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.32);background-clip:padding-box;border:2px solid transparent}

/* 全局焦点环（键盘可达性） */
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* HEADER 升级 */
header{box-shadow:0 1px 0 var(--border),0 4px 14px rgba(15,23,42,.04);backdrop-filter:saturate(1.1)}
.logo-name span{color:var(--accent)}
.nav-tab{transition:all var(--t-fast);font-weight:500}
.nav-tab:not(.active):hover{background:var(--accent-soft);color:var(--accent) !important}
.nav-tab.active{background:var(--accent);color:#fff !important;border:1px solid transparent;
  box-shadow:0 2px 6px rgba(26,115,212,.25)}

/* 按钮系统 — 统一交互、阴影与状态 */
.btn{transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
  font-family:var(--sans);font-weight:500;letter-spacing:.3px;
  box-shadow:var(--shadow-xs);user-select:none}
.btn:hover{box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px);box-shadow:var(--shadow-xs)}
.btn:focus-visible{box-shadow:var(--shadow-focus)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:1px solid transparent;color:#fff;
  box-shadow:0 2px 6px rgba(26,115,212,.28),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{background:linear-gradient(135deg,#1f7fdf,#1466ca);color:#fff;
  box-shadow:0 6px 18px rgba(26,115,212,.32),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-green{background:linear-gradient(135deg,#10b87f,var(--green));border-color:transparent;color:#fff;
  box-shadow:0 2px 6px rgba(16,145,106,.28)}
.btn-green:hover{box-shadow:0 6px 18px rgba(16,145,106,.32);color:#fff}
.btn-red{background:var(--red-soft);border-color:rgba(216,58,58,.25);color:var(--red)}
.btn-red:hover{background:#fad4d4;border-color:var(--red);color:var(--red)}
.btn-orange{background:var(--orange-soft);border-color:rgba(210,122,0,.28);color:var(--orange)}
.btn-orange:hover{background:#ffe8c2;border-color:var(--orange);color:var(--orange)}

/* 表单：输入 / 选择 / 文本域 — 统一样式与焦点 */
.form-input,.form-select,.form-textarea,.search-box{
  background:#fff;border:1px solid #d4dbe4;border-radius:var(--r-md);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.form-input:hover,.form-select:hover,.form-textarea:hover,.search-box:hover{border-color:#a8b8cc}
.form-input:focus,.form-select:focus,.form-textarea:focus,.search-box:focus{
  border-color:var(--accent);box-shadow:var(--shadow-focus);background:#fff;outline:none}
.form-input::placeholder,.form-textarea::placeholder,.search-box::placeholder{color:var(--muted-2)}
.form-input.err,.form-input.required:invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(216,58,58,.15)}
.form-section{color:var(--muted);font-weight:600;letter-spacing:1.2px;border-bottom:1px solid var(--border);
  padding-bottom:8px;margin-bottom:12px}

/* 卡片 / 面板 — 柔和阴影 */
.stat-card,.dm-panel,.fin-section,.fin-kpi,.info-blk,.sol-blk,.safe-blk,.dm-item{
  box-shadow:var(--shadow-sm)}
.stat-card{border-radius:var(--r-lg);transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)}
.stat-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.dm-panel{border-radius:var(--r-lg);overflow:hidden}
.dm-panel-hd{background:linear-gradient(180deg,#fcfdff,#f4f8fd);border-bottom:1px solid var(--border)}
.dm-item{transition:background var(--t-fast),border-color var(--t-fast)}
.dm-item:hover{background:#fff;border-color:var(--border-strong)}
.fin-section{border-radius:var(--r-lg)}
.fin-kpi{border-radius:var(--r-lg);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.fin-kpi:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}

/* 表格 — 头部/悬停/分割线统一 */
.fin-table thead th,table thead th{
  background:linear-gradient(180deg,#f7faff,#eef3fa) !important;
  color:var(--muted) !important;font-weight:600;letter-spacing:.4px;
  border-bottom:1px solid var(--border) !important}
.fin-table tbody tr,table tbody tr{transition:background var(--t-fast)}
.fin-table tbody tr:hover td,table.fin-table tbody tr:hover td{background:#f7faff}
.fin-table td{border-bottom:1px solid #eef3fa;padding:10px 12px}

/* 状态/标签 — 更柔和的色块 */
.tag{font-weight:500;letter-spacing:.3px;padding:3px 9px;border-radius:6px}
.t-blue{background:var(--accent-soft);color:var(--accent);border-color:rgba(26,115,212,.22)}
.t-gray{background:#eef2f7;color:#4a5568;border-color:#d8dee7}
.t-green{background:var(--green-soft);color:var(--green);border-color:rgba(16,145,106,.22)}
.t-red{background:var(--red-soft);color:var(--red);border-color:rgba(216,58,58,.22)}
.t-yellow{background:var(--yellow-soft);color:var(--yellow);border-color:rgba(184,131,0,.22)}
.t-orange{background:var(--orange-soft);color:var(--orange);border-color:rgba(210,122,0,.22)}
.delay-0{background:var(--green-soft);color:var(--green);border-color:rgba(16,145,106,.25)}
.delay-low{background:var(--yellow-soft);color:var(--yellow);border-color:rgba(184,131,0,.25)}
.delay-mid{background:var(--orange-soft);color:var(--orange);border-color:rgba(210,122,0,.30)}
.delay-high{background:var(--red-soft);color:var(--red);border-color:rgba(216,58,58,.30)}

/* 模态框升级 — 蒙层模糊 + 容器阴影 + 入场动画 */
.modal-overlay{background:rgba(15,23,42,.45);backdrop-filter:blur(4px) saturate(1.1);
  -webkit-backdrop-filter:blur(4px) saturate(1.1)}
.modal,.modal-box{border-radius:var(--r-xl);
  box-shadow:0 24px 70px rgba(15,23,42,.22),0 8px 22px rgba(15,23,42,.10),0 0 0 1px rgba(15,23,42,.05);
  border:1px solid rgba(255,255,255,.6);
  animation:modalIn .22s cubic-bezier(.4,0,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.modal-header,.fin-section .fin-section-hd{
  background:linear-gradient(180deg,#fcfdff,#f4f8fd);border-bottom:1px solid var(--border)}
.modal-footer{background:linear-gradient(0deg,#fcfdff,#fff);border-top:1px solid var(--border)}

/* CRM / 财务 子标签栏 — 柔化 */
.fin-sub-tab{transition:all var(--t-fast);border-radius:var(--r-md) var(--r-md) 0 0;font-weight:500}
.fin-sub-tab:not(.active):hover{background:var(--accent-soft);color:var(--accent)}
.fin-sub-tab.active{box-shadow:0 -2px 0 var(--accent) inset;color:var(--accent);font-weight:600;background:#fff}

/* 财务模块 一级分组 标签（5 大组：财务概览/日常作业/对账与结算/财务核算/报表与控制） */
.fin-group-tab{transition:all var(--t-fast);font-family:var(--mono)}
.fin-group-tab:not(.active):hover{background:rgba(26,115,212,.05);color:var(--accent) !important}
.fin-group-tab.active{background:#fff !important;border:1px solid var(--border) !important;border-bottom-color:#fff !important;color:var(--accent) !important;font-weight:700}

/* 占位新功能页 — "🚧 此功能正在规划中" 通用样式 */
.fin-placeholder{padding:60px 40px;text-align:center;background:#fff;border:2px dashed #d8e3f0;border-radius:12px;margin-top:8px}
.fin-placeholder .ph-icon{font-size:48px;line-height:1;margin-bottom:14px}
.fin-placeholder .ph-title{font-size:18px;font-weight:700;color:#1565c0;margin-bottom:8px}
.fin-placeholder .ph-desc{font-size:13px;color:#777;line-height:1.7;max-width:560px;margin:0 auto}
.fin-placeholder .ph-tag{display:inline-block;margin-top:14px;padding:4px 12px;background:#fff8e1;border:1px solid #ffd54f;border-radius:4px;color:#e65100;font-size:11.5px;font-weight:600}

/* 货件卡片 ship-card — 更明确的层次 */
.ship-card{background:#fff;box-shadow:var(--shadow-sm);border-radius:var(--r-lg);transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)}
.ship-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:rgba(26,115,212,.32)}

/* Toast — 底部居中、毛玻璃 */
#toast{box-shadow:var(--shadow-lg);backdrop-filter:blur(6px) saturate(1.1)}

/* 详情抽屉 detail-panel */
#detail-panel{box-shadow:-12px 0 40px rgba(15,23,42,.16),-2px 0 8px rgba(15,23,42,.06)}
.d-header{background:linear-gradient(180deg,#fcfdff,#f4f8fd)}

/* 链接样式 */
a{color:var(--accent);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--accent-2);text-decoration:underline}

/* 空状态文本 */
.empty-state,.no-data{color:var(--muted-2);text-align:center;padding:32px 16px;font-size:13px;letter-spacing:.5px}

/* checkbox / radio 主题色 */
input[type=checkbox],input[type=radio]{accent-color:var(--accent);cursor:pointer}

/* 微动画 — 按钮波纹 / 卡片轻浮 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ════════════════════════════════════════════════════════════════
   🛠 Chrome 抖动修复
   1) 去掉 hover 时的 translateY（鼠标经过相邻格子时来回跳动）
   2) 去掉 hover 时给 .stat-card 加蓝边框引发的 1px 布局位移
   3) .stat-card.active 由 border-width 升级 → 改用 box-shadow 内描，不再撑开盒子
   4) 全局过渡限定到 box-shadow / border-color / background / color，禁止 transform 参与过渡
   ════════════════════════════════════════════════════════════════ */
.stat-card,.fin-kpi,.ship-card,.dm-item{
  transform:none !important;            /* 永远不平移，避免任何 hover 跳动 */
  transition:box-shadow var(--t-fast),border-color var(--t-fast),background var(--t-fast) !important;
}
.stat-card:hover,.fin-kpi:hover,.ship-card:hover{
  transform:none !important;
}
/* 之前 .stat-card:hover 把边框颜色改成 var(--accent)，配合默认浅蓝边在并排卡片间会有视觉跳。
   保留淡淡的"加深"反馈，不再换色 */
.stat-card:hover{border-color:var(--border-strong) !important}
.ship-card:hover{border-color:var(--border-strong) !important}
.fin-kpi:hover  {border-color:var(--border-strong) !important}

/* .stat-card.active 原规则用 border-width:2px 撑开 1px → 改用 box-shadow 双描边，零布局位移 */
.stat-card.active{
  border-width:1px !important;
  box-shadow:
    inset 0 0 0 2px var(--ac,var(--accent)),
    0 0 0 3px color-mix(in srgb, var(--ac,var(--accent)) 18%, transparent),
    0 3px 12px rgba(0,0,0,.10) !important;
}

/* 按钮 :hover 不要平移，只换阴影；:active 的 1px 下沉保留（按下反馈，单次瞬间不会形成连续抖动） */
.btn:hover{transform:none}

/* 表格行 :hover 仅换底色，不动位置 */
.fin-table tbody tr:hover td,table.fin-table tbody tr:hover td{transform:none}

/* 修掉 .btn 默认 transition 里的 transform，让按钮按下/松开时不串扰其它属性 */
.btn{transition:box-shadow var(--t-fast),background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}

/* 卡片/按钮强制独立合成层，避免 sub-pixel 抖动（Chrome 在网格 + 阴影场景常见） */
.stat-card,.fin-kpi,.ship-card,.btn,.modal,.modal-box{will-change:auto;backface-visibility:hidden}

/* ════════════════════════════════════════════════════════════════
   🛠 Chrome 抖动修复 V2 — 第二轮加固
   解决：tab 切换 1px 边框位移 / 输入框 focus 阴影涟漪 / 子像素渲染漂移
   ════════════════════════════════════════════════════════════════ */

/* nav-tab 非选中态默认无边框，选中时加 1px → 整行左右抖 1px。给非选中态预留 1px 透明边 */
.nav-tab{border:1px solid transparent !important}
.nav-tab.active{border:1px solid transparent !important}

/* fin-sub-tab 选中态加边框、非选中态不加 → 同样 1px 抖动；预留透明边 */
.fin-sub-tab{border:1px solid transparent !important;border-bottom-color:transparent !important}

/* filter-btn / be-dim-btn 同理 */
.filter-btn{border:1px solid var(--border)}
.filter-btn.active{border:1px solid var(--accent)}

/* 全站禁止 transform 参与 transition 链 — 任何残留的 hover translateY 都不会触发位移 */
*,*::before,*::after{
  /* 不要 globally 强行 transition: none — 某些动画依赖它 */
}
.btn,.btn:hover,.btn:focus,.stat-card,.stat-card:hover,
.fin-kpi,.fin-kpi:hover,.ship-card,.ship-card:hover,.dm-item,.dm-item:hover,
.nav-tab,.nav-tab:hover,.fin-sub-tab,.fin-sub-tab:hover,.fin-sub-tab.active,
.filter-btn,.filter-btn:hover,.filter-btn.active{
  transform:none !important;
}

/* 禁止 backdrop-filter 在常态用于交互元素 — Chrome 在频繁重绘时会闪屏 */
.modal-overlay{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  background:rgba(15,23,42,.50) !important}
.login-box{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
#toast{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

/* sticky header 强制独立合成层 + 像素对齐 → 解决滚动时画面整体微抖 */
header{transform:translateZ(0);will-change:transform}
#toolbar-sticky{transform:translateZ(0)}

/* 输入框 focus 时不要再 transition box-shadow（焦点环涟漪在某些 Chrome 子版本会闪） */
.form-input:focus,.form-select:focus,.form-textarea:focus,.search-box:focus{
  transition:border-color var(--t-fast) !important;
}

/* 所有 hover 态只过渡颜色 / 阴影 / 背景 — 永远不过渡任何会影响布局的属性 */
.btn,.stat-card,.fin-kpi,.ship-card,.dm-item,.nav-tab,.fin-sub-tab,.filter-btn,
.fin-table tr,table tbody tr,.search-box,.form-input,.form-select,.form-textarea{
  transition:background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast),color var(--t-fast) !important;
}

/* 整数像素对齐（Chrome sub-pixel 偏移修复）— 强制布局相关属性按整数像素 */
.stats-row,.dm-grid,.dm-grid-4,.fin-kpi-grid,.ship-list{
  contain:layout style;            /* 限定渲染范围，防止外部 hover 引起内部重排 */
}