/* ==========================================================================
   生产作业管理系统 —— 设计系统
   风格：深海蓝 + 安全橙，港航工业风；大留白 / 圆角卡片 / 柔和投影
   ========================================================================== */
:root {
  --navy-900: #081A30;
  --navy-800: #0F2A47;
  --navy-700: #173B63;
  --navy-600: #22507F;
  --accent: #FF6B2C;
  --accent-dark: #E5531A;
  --accent-soft: #FFF0E7;
  --gold: #F6A609;
  --bg: #EDF1F7;
  --card: #FFFFFF;
  --ink: #1A2738;
  --ink-2: #42556B;
  --muted: #73839A;
  --line: #E2E8F0;
  --line-2: #EEF2F7;
  --green: #0E9F52;
  --green-bg: #E6F7EE;
  --red: #DC2626;
  --red-bg: #FDECEC;
  --blue: #2563EB;
  --blue-bg: #EAF1FE;
  --amber: #B45309;
  --amber-bg: #FEF4E3;
  --shadow-sm: 0 2px 8px rgba(15, 42, 71, .06);
  --shadow-md: 0 10px 30px rgba(15, 42, 71, .10);
  --shadow-lg: 0 20px 60px rgba(8, 26, 48, .22);
  --radius: 16px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* touch-action: manipulation 关闭双击缩放，避免快速连点输入框时页面被放大 */
html, body { height: 100%; touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 { font-weight: 700; color: var(--ink); line-height: 1.3; }
a { color: var(--blue); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; font-size: 15px; }

/* 所有可点击元素显式声明 touch-action: manipulation：
   关闭双击缩放手势，避免手机端快速连点按钮/徽章/卡片时页面被放大 */
.btn, .icon-btn, .tab, .stat-click, .qc-chip-click, .link-num, .icon-unlock,
.lk-item, .badge, .tool-btn, .modal-x, .as-item, .ship-card, .nev-sw, .kb-done,
.cno-modal-item, .cno-modal-cancel, .qc-port-row, .pbx, .cbx {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------- 顶部导航 ---------------- */
.topbar {
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: #fff;
  padding: 0 22px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 18px rgba(8, 26, 48, .25);
}
.topbar .brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(255, 107, 44, .45);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-title { font-size: 16px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.brand-sub { font-size: 11px; color: #9FB6CF; letter-spacing: 1.5px; white-space: nowrap; }
.topbar .spacer { flex: 1; }
#userBar { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; white-space: nowrap; }
.user-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: 5px 6px 5px 8px;
  font-size: 13.5px; white-space: nowrap; flex: 0 0 auto;
}
.user-chip .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700;
  display: grid; place-items: center; font-size: 13px;
}
.role-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(246, 166, 9, .18); color: #FFD27A;
  border: 1px solid rgba(246, 166, 9, .35);
}
/* 用户信息与退出合并为一个胶囊：竖分隔线 + 内嵌退出按钮 */
.user-chip .u-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .22); flex: 0 0 1px; }
.u-exit {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; color: #fff;
  font: inherit; font-size: 12.5px; line-height: 1;
  padding: 6px 9px; border-radius: 999px; cursor: pointer;
  transition: background .15s; white-space: nowrap;
}
.u-exit:hover { background: rgba(255, 255, 255, .16); }
.u-exit:active { background: rgba(255, 255, 255, .24); }
.u-exit svg { width: 15px; height: 15px; flex: 0 0 15px; }
/* 管理员专属：右上角一键返回后台管理 */
.hd-admin {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: background .15s;
}
.hd-admin:hover { background: rgba(255, 255, 255, .26); }
/* 用户胶囊下拉菜单：修改密码 / 退出登录 */
.user-chip { position: relative; cursor: pointer; user-select: none; }
.user-chip .u-caret { width: 13px; height: 13px; flex: 0 0 13px; opacity: .75; margin-left: 2px; }
.user-chip.open { background: rgba(255, 255, 255, .2); }
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px;
  background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(6, 20, 40, .3);
  padding: 6px; display: none; z-index: 1500;
}
.user-chip.open .user-menu { display: block; }
.user-menu button {
  width: 100%; display: flex; align-items: center; gap: 8px;
  border: 0; background: transparent; padding: 9px 11px; border-radius: 8px;
  font: inherit; font-size: 13.5px; color: var(--ink-2); cursor: pointer; text-align: left;
}
.user-menu button:hover { background: var(--bg-2); }
.user-menu button.u-danger { color: #C2413B; }
@media (max-width: 640px) {
  .hd-admin { padding: 6px 10px; font-size: 12px; }
}
/* 右下角回到顶部 */
.to-top {
  position: fixed; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--navy, #163A5F); color: #fff; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(6, 20, 40, .28);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .18s, transform .18s, background .15s;
}
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: var(--navy-2, #1F4E7C); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.icon-btn {
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08);
  color: #fff; border-radius: 999px; padding: 7px 15px; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; transition: .15s;
  white-space: nowrap; flex: 0 0 auto;
}
.icon-btn:hover { background: rgba(255, 255, 255, .18); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---------------- 布局 ---------------- */
.page { max-width: 1120px; margin: 0 auto; padding: 24px 22px 60px; }

/* 后台审计日志表：每条一行，单元格不换行；详情过长省略号+悬停看全文 */
.audit-table th, .audit-table td { white-space: nowrap; }
.audit-table td.audit-detail {
  max-width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.audit-table { width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 4px 2px 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 23px; display: flex; align-items: center; gap: 10px; }
.page-head h1 svg { width: 25px; height: 25px; flex: 0 0 25px; color: var(--navy-700); }
.page-head .desc { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); border: 1px solid var(--line-2);
  padding: 20px 22px;
}
.card + .card { margin-top: 18px; }
.card-title { font-size: 16px; display: flex; align-items: center; gap: 9px; margin-bottom: 14px; white-space: nowrap; }
.card-title svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--navy-700); }
.card-title .bar { width: 4px; height: 17px; border-radius: 3px; background: var(--accent); flex: 0 0 4px; }
/* 标题文字永不断行（窄屏下也不会逐字竖排），换行一律交给说明文字 */
.card-title .sub { font-size: 12.5px; color: var(--muted); font-weight: 400; white-space: normal; flex: 1 1 auto; min-width: 0; }
.qr-univ { font-size: 12px; font-weight: 700; color: #0A8F49; background: #E8F8EF; border: 1px solid #B7E6CB; border-radius: 999px; padding: 3px 10px; }
.muted { color: var(--muted); }
.right { margin-left: auto; }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 9px 18px; border-radius: 11px;
  border: 1px solid transparent; font-size: 14.5px; font-weight: 600;
  transition: transform .08s, background .15s, box-shadow .15s, border-color .15s;
  white-space: nowrap; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  color: #fff; box-shadow: 0 8px 18px rgba(255, 107, 44, .32);
}
.btn-primary:hover { box-shadow: 0 10px 22px rgba(255, 107, 44, .42); }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--navy-600); color: var(--navy-800); background: #F6F9FC; }
.btn-danger { background: #fff; border-color: #F3C2C2; color: var(--red); }
.btn-danger:hover { background: var(--red-bg); }
.btn-warn { background: #fff; border-color: #F6D6A8; color: #B45309; }
.btn-warn:hover { background: #FEF4E4; }
.btn-sm { min-height: 32px; padding: 5px 12px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
/* 表格操作列：多个图标按钮保持在同一行，不换行 */
.row-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; white-space: nowrap; }
.row-actions .btn { flex: 0 0 auto; }

/* ---------------- 表单 ---------------- */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field label .req { color: var(--red); margin-left: 2px; }
.input, select.input {
  width: 100%; height: 44px; padding: 0 13px;
  border: 1.5px solid var(--line); border-radius: 11px; background: #FBFCFE;
  color: var(--ink); outline: none; transition: .15s;
}
.input:focus, select.input:focus { border-color: var(--navy-600); background: #fff; box-shadow: 0 0 0 3.5px rgba(34, 80, 127, .12); }
.input::placeholder { color: #A6B4C6; }
textarea.input { height: auto; padding: 10px 13px; }
.field-row { display: flex; gap: 13px; }
.field-row .field { flex: 1; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* ---------------- 自绘下拉框（全系统统一） ---------------- */
.sel { position: relative; display: block; }
.sel > select { visibility: hidden; pointer-events: none; }   /* 仅保留在文档中用于取值/撑开布局 */
.sel-btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; padding: 0 38px 0 13px;
  border: 1.5px solid var(--line); border-radius: 11px; background: #FBFCFE;
  color: var(--ink); font-size: 14.5px; font-family: inherit; text-align: left;
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.sel-txt {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; line-height: 1.4;
}
.sel-txt.sel-ph { color: #A6B4C6; }
.sel-cv {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; color: #7A889A; transition: transform .18s ease;
}
.sel-cv svg { width: 16px; height: 16px; }
.sel-btn:hover { border-color: #C6D4E4; background: #fff; }
.sel-btn:focus-visible, .sel.open .sel-btn {
  outline: none; border-color: var(--navy-600); background: #fff;
  box-shadow: 0 0 0 3.5px rgba(34, 80, 127, .12);
}
.sel.open .sel-cv { transform: translateY(-50%) rotate(180deg); color: var(--navy-700); }
.sel.disabled .sel-btn { background: #F1F4F8; color: #A6B4C6; cursor: not-allowed; border-color: var(--line); box-shadow: none; }
.sel-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 80;
  background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 16px 38px rgba(8, 26, 48, .18); padding: 6px;
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-5px) scale(.99); pointer-events: none;
  transition: opacity .13s ease, transform .13s ease;
}
.sel-panel.up { top: auto; bottom: calc(100% + 6px); transform: translateY(5px) scale(.99); }
.sel.open .sel-panel { opacity: 1; transform: none; pointer-events: auto; }
.sel-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 9px; font-size: 14px; color: var(--ink);
  cursor: pointer; white-space: nowrap;
}
.sel-opt-t { overflow: hidden; text-overflow: ellipsis; }
.sel-opt:hover, .sel-opt.active { background: #F2F6FB; }
.sel-opt.on { color: var(--navy-700); font-weight: 700; background: #EAF2FA; }
.sel-opt.on.active { background: #E2EEF9; }
.sel-opt-ck { display: flex; color: var(--navy-600); flex: 0 0 auto; }
.sel-opt-ck svg { width: 15px; height: 15px; }
.sel-opt.disabled { color: #B8C4D2; cursor: not-allowed; background: transparent; }
.sel-panel::-webkit-scrollbar { width: 8px; }
.sel-panel::-webkit-scrollbar-thumb { background: #D5DEE9; border-radius: 8px; }
.filter-bar .sel { flex: 0 0 auto; min-width: 132px; }
.field .sel { width: 100%; }
.form-error { font-size: 13px; color: var(--red); background: var(--red-bg); border: 1px solid #F5CACA; padding: 9px 12px; border-radius: 10px; margin-bottom: 12px; display: none; }
.form-success { font-size: 13px; color: #0A8F49; background: #E8F8EF; border: 1px solid #B7E6CB; padding: 9px 12px; border-radius: 10px; margin-bottom: 12px; display: none; }

/* ---------------- 后台左侧导航布局 ---------------- */
.admin-layout { display: none; gap: 22px; align-items: flex-start; }
.admin-layout.is-ready { display: flex; }
.admin-side {
  flex: 0 0 190px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 12px; box-shadow: var(--shadow-sm); position: sticky; top: 84px;
}
.admin-side-title { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .08em; padding: 4px 10px 10px; }
.as-item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  padding: 11px 14px; border-radius: 11px; font-size: 15px; font-weight: 600; color: var(--ink-2);
  cursor: grab; margin-bottom: 4px; transition: background .12s, color .12s;
  user-select: none; -webkit-user-select: none;
}
.as-item:hover { background: #F1F5FA; }
.as-item:active { cursor: grabbing; }
.as-item.is-active { background: var(--navy-800); color: #fff; box-shadow: 0 6px 16px rgba(8,26,48,.25); }
.as-item.is-dragging { opacity: .45; background: #E3EBF6; }
.as-ico { display: inline-flex; vertical-align: -3px; margin-right: 8px; }
.as-ico svg { width: 17px; height: 17px; }
.admin-main { flex: 1 1 auto; min-width: 0; }
.sec-head { display: flex; align-items: flex-start; gap: 10px; }
.sec-ico { flex: 0 0 auto; display: inline-flex; color: var(--navy-800); margin-top: 1px; }
.sec-ico svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
  .admin-layout.is-ready { flex-direction: column; }
  .admin-side { width: 100%; flex: none; position: static; display: flex; gap: 8px; padding: 10px; }
  .admin-side-title { display: none; }
  .as-item { width: auto; flex: 1 1 auto; text-align: center; margin-bottom: 0; }
}

/* ---------------- 徽章 / 状态 ---------------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-open { background: var(--green-bg); color: var(--green); }
.badge-closed { background: #EEF1F5; color: #7A889A; }
.badge-stopped { background: #EEF1F5; color: #7A889A; }
.badge-scanned { background: var(--blue-bg); color: var(--blue); }
.badge-assigned { background: var(--green-bg); color: var(--green); }
.badge-waiting { background: var(--amber-bg); color: var(--amber); }
/* 已解锁待扫码：与到场动态 .arr-rel 同色系（红），解锁后等待重新扫码 */
.badge-released { background: #FDECEC; color: var(--red); }
.badge-unscanned { background: #EEF1F5; color: #7A889A; }
.badge-completed { background: #E8F8EF; color: #0A8F49; border: 1px solid #B7E6CB; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dot-pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(14,159,82,.5); } 70% { box-shadow: 0 0 0 7px rgba(14,159,82,0); } 100% { box-shadow: 0 0 0 0 rgba(14,159,82,0); } }

/* ---------------- 统计卡 ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.stat-card {
  background: var(--card); border-radius: var(--radius); padding: 18px 20px;
  border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 15px; position: relative; overflow: hidden;
}
.stat-card::after { content: ""; position: absolute; right: -18px; top: -18px; width: 76px; height: 76px; border-radius: 50%; background: currentColor; opacity: .06; }
.stat-icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.stat-icon svg { width: 24px; height: 24px; }
.stat-num { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 2px; }
.c-navy { color: var(--navy-700); } .c-navy .stat-icon { background: #E8EFF7; color: var(--navy-700); }
.c-blue { color: var(--blue); } .c-blue .stat-icon { background: var(--blue-bg); color: var(--blue); }
.c-gray { color: #7A889A; } .c-gray .stat-icon { background: #EEF1F5; color: #7A889A; }
.c-green { color: var(--green); } .c-green .stat-icon { background: var(--green-bg); color: var(--green); }
.c-done { color: #0A8F49; } .c-done .stat-icon { background: #E8F8EF; color: #0A8F49; }
.c-amber { color: var(--amber); } .c-amber .stat-icon { background: var(--amber-bg); color: var(--amber); }

/* ---------------- 表格 ---------------- */
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
table.data th {
  background: #F4F7FB; color: var(--ink-2); font-weight: 600; text-align: center;
  padding: 11px 14px; white-space: nowrap; font-size: 13px;
  border-bottom: 1px solid var(--line);
}
table.data td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; text-align: center; }
/* 岸桥指令分配进度明细：4 列短内容，去掉 min-width 并收窄内边距，手机一屏看全无需右滑
   （特异性高于 table.data 及其窄屏媒体查询，任何屏宽都生效） */
.table-wrap table.qc-prog-table { min-width: 0; }
.table-wrap table.qc-prog-table th, .table-wrap table.qc-prog-table td { padding: 9px 6px; text-align: center; }
.table-wrap table.qc-prog-table th:first-child, .table-wrap table.qc-prog-table td:first-child { text-align: left; padding-left: 12px; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover { background: #F8FAFD; }
.mono { font-family: "SFMono-Regular", Consolas, "Courier New", monospace; font-weight: 600; letter-spacing: .4px; }
.qc-chip {
  display: inline-flex; align-items: center; padding: 4px 11px; margin: 2px 4px 2px 0;
  background: var(--navy-800); color: #fff; border-radius: 8px; font-size: 13px; font-weight: 700;
  font-family: "SFMono-Regular", Consolas, monospace;
}
/* 指导员看板 · 岸桥已开放港序作业明细 */
.qc-mgmt { display: flex; flex-direction: column; gap: 8px; }
.qc-mgmt-item {
  padding: 8px 12px; background: var(--bg, #F6F8FB); border-radius: 10px;
}
.qc-mgmt-row { display: flex; align-items: center; gap: 10px; }
.qc-mgmt-item .qc-chip { margin: 0; flex-shrink: 0; }
.qc-mgmt-ports { flex: 1; font-size: 13px; color: var(--ink-700, #334); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-mgmt-ports em { color: var(--muted); font-style: normal; }
/* 展开后的贝位明细表：标题与内容统一居中，末行合计 */
.qc-bay-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.qc-bay-table th { color: var(--muted); font-weight: 600; padding: 4px 6px; text-align: center; white-space: nowrap; }
.qc-bay-table td { padding: 5px 6px; text-align: center; border-top: 1px solid var(--line-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 全船计划港序明细：数据行无横线，仅合计行保留顶部分隔 */
.qc-bay-table.no-lines td { border-top: none; }
.qc-bay-table.no-lines tr.sum td { border-top: 1.5px solid var(--line); }
.qc-bay-table tr.sum td { font-weight: 800; color: var(--navy-700); border-top: 1.5px solid var(--line); }
.qc-zone { font-size: 11px; color: var(--muted); margin-left: 5px; }
.btn-xs { padding: 3px 10px; font-size: 12px; border-radius: 8px; }
/* 到场动态可点击拖车号 */
.arr-plate-link { cursor: pointer; border-bottom: 1px dashed currentColor; padding-bottom: 1px; }
.arr-plate-link:active { opacity: .65; }
.empty { text-align: center; color: var(--muted); padding: 34px 10px; font-size: 14px; }
.empty svg { width: 42px; height: 42px; opacity: .35; margin-bottom: 8px; }

/* ---------------- 船舶卡片 ---------------- */
.ship-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ship-card {
  background: var(--card); border-radius: var(--radius); padding: 19px 20px;
  border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
  cursor: pointer; transition: .16s; position: relative; display: block;
}
.ship-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #CFDCEC; }
.ship-card .ship-name { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.ship-card .voyage { color: var(--muted); font-size: 13px; margin: 3px 0 12px; }
/* 四个统计固定一行四等分：数字位数变化时也不会换行串位 */
.ship-card .mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mini-pill {
  background: #F2F6FB; border-radius: 9px; padding: 6px 6px; font-size: 12px; color: var(--ink-2);
  display: flex; align-items: baseline; justify-content: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-pill b { font-size: 14.5px; color: var(--navy-800); margin-left: 3px; }
.ship-card.is-closed { opacity: .75; }
.ship-card .go { position: absolute; right: 18px; bottom: 17px; color: var(--muted); }
/* 船舶卡片右上角 开始/暂停作业 按钮 */
.ship-work-acts { position: absolute; top: 12px; right: 14px; }
/* 有作业开关的卡片给船名行让位，避免长船名被按钮遮挡 */
.ship-card:has(.ship-work-acts) .ship-name { padding-right: 86px; }

/* ---------------- 标签页 ---------------- */
.tabs { display: flex; gap: 6px; background: #fff; padding: 6px; border-radius: 13px; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); margin-bottom: 18px; overflow-x: auto; }
.tab {
  border: none; background: transparent; padding: 9px 18px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.tab svg { width: 16px; height: 16px; }
.tab.active { background: var(--navy-800); color: #fff; box-shadow: var(--shadow-sm); }
.tab:not(.active):hover { background: #F1F5FA; color: var(--ink-2); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------- 弹窗 ---------------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(8, 20, 38, .5); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 18px;
}
.modal-mask.show { display: flex; animation: fadein .18s ease; }
.modal {
  background: #fff; border-radius: 18px; width: 100%; max-width: 460px;
  box-shadow: var(--shadow-lg); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal.wide { max-width: 760px; }
.modal-head { padding: 18px 22px 8px; display: flex; align-items: center; }
.modal-head h3 { font-size: 17px; }
.modal-body { padding: 12px 22px 18px; overflow-y: auto; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; gap: 10px; background: #FAFBFD; }
.modal-x { margin-left: auto; border: none; background: #F1F4F9; width: 32px; height: 32px; border-radius: 9px; color: var(--muted); font-size: 17px; line-height: 1; }
.modal-x:hover { background: #E4EAF2; color: var(--ink); }

/* ---------------- Toast ---------------- */
/* 结果页为整屏（z-index 960），提示浮层需盖在其上，否则司机看不到报错 */
.toast-wrap { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 1400; display: flex; flex-direction: column; gap: 9px; align-items: center; width: min(92vw, 460px); }
.toast {
  display: flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 12px;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-md); animation: toastin .22s ease;
  background: #fff; border: 1px solid var(--line); max-width: 100%;
}
.toast svg { width: 17px; height: 17px; flex: 0 0 auto; }
.toast.ok { color: var(--green); } .toast.ok svg { color: var(--green); }
.toast.err { color: var(--red); } .toast.err svg { color: var(--red); }
.toast.info { color: var(--navy-700); } .toast.info svg { color: var(--navy-700); }
@keyframes toastin { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------------- 加载遮罩 ---------------- */
.loading-mask { position: fixed; inset: 0; background: rgba(237,241,247,.72); display: none; align-items: center; justify-content: center; z-index: 150; backdrop-filter: blur(1px); }
.loading-mask.show { display: flex; }
.spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid #C7D6E8; border-top-color: var(--accent); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-inline { display: inline-block; width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }

/* ---------------- 筛选条 ---------------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filter-bar .input, .filter-bar select.input { width: auto; height: 38px; min-width: 120px; }
.filter-bar .input.search { min-width: 200px; flex: 0 1 240px; }

/* ==========================================================================
   登录页
   ========================================================================== */
.login-body {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 55%, #1B3E68 100%);
  position: relative; overflow: hidden;
}
.login-body::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 82% 12%, rgba(255, 107, 44, .16), transparent 42%),
    radial-gradient(circle at 10% 90%, rgba(37, 99, 235, .14), transparent 45%);
}
.login-body::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 10px;
  background: repeating-linear-gradient(135deg, var(--gold) 0 28px, #141414 28px 56px);
  opacity: .85;
}
.login-wrap { position: relative; z-index: 1; width: 100%; max-width: 410px; }
.login-brand { text-align: center; color: #fff; margin-bottom: 22px; }
.login-brand .logo {
  width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 19px;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  display: grid; place-items: center; box-shadow: 0 14px 34px rgba(255, 107, 44, .45);
}
.login-brand .logo svg { width: 36px; height: 36px; }
.login-brand h1 { color: #fff; font-size: 21px; letter-spacing: .5px; }
.login-brand p { color: #9FB6CF; font-size: 13px; margin-top: 6px; letter-spacing: 2px; }
.login-card {
  background: rgba(255, 255, 255, .97); border-radius: 22px; padding: 30px 28px 26px;
  box-shadow: var(--shadow-lg);
}
.login-card .field label { font-size: 13px; }
.login-card .input { height: 48px; }
.btn-login { width: 100%; height: 50px; font-size: 16px; border-radius: 12px; margin-top: 4px; }
.login-foot { text-align: center; margin-top: 16px; font-size: 12px; color: #8CA6C2; }
/* ICP 备案号页脚（common.js 全站注入） */
.icp-footer {
  padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
  text-align: center; font-size: 12px; line-height: 1.7; color: #8A94A6;
}
.icp-footer a { color: inherit; text-decoration: none; }
.icp-footer a:hover { color: #59667A; text-decoration: underline; }
.icp-footer-login { margin-top: 14px; padding: 0; color: #8CA6C2; }
.driver-body .icp-footer { color: #7E96B0; padding: 8px 16px 24px; }

/* 登录验证码 */
.captcha-row { display: flex; gap: 10px; align-items: stretch; }
.captcha-row .input { flex: 1; min-width: 0; letter-spacing: 4px; font-size: 17px; }
.captcha-img {
  flex: 0 0 132px; width: 132px; height: 48px; border-radius: 10px;
  border: 1px solid var(--line); background: #F5F7FA; cursor: pointer;
  user-select: none; object-fit: contain; transition: box-shadow .15s, border-color .15s;
}
.captcha-img:hover { border-color: var(--navy-600, #1D4E89); box-shadow: 0 2px 10px rgba(15, 42, 71, .12); }
.captcha-hint { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ==========================================================================
   司机页（移动优先）
   ========================================================================== */
.driver-body {
  min-height: 100vh;
  /* 顶部中央打光：深蓝底 + 顶端光晕，白卡片浮在深色背景上（顶部光晕方案） */
  background-color: #07182A;
  background-image: radial-gradient(130% 55% at 50% 0%, #1F5A94 0%, #0C2B4B 42%, #07182A 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
.driver-header { padding: 30px 20px 22px; text-align: center; color: #fff; }
/* 微信浮窗使用引导条（仅微信内显示，可关闭） */
.wx-tip {
  display: none; align-items: center; gap: 10px; max-width: 520px; margin: 10px auto 0;
  padding: 9px 12px; width: calc(100% - 32px); box-sizing: border-box;
  background: #FFF7E8; border: 1px solid #F5D9A8; border-radius: 12px;
  color: #8A5A1E; font-size: 12px; line-height: 1.6;
}
.wx-tip-text b { font-weight: 700; color: #B45309; }
.wx-tip-close {
  flex-shrink: 0; border: none; cursor: pointer; padding: 4px 11px;
  background: #F5A623; color: #fff; font-size: 12px; border-radius: 999px; font-weight: 600;
}
.wx-tip-close:active { opacity: .8; }
.driver-header .dh-mark {
  width: clamp(56px, 17vw, 68px); height: clamp(56px, 17vw, 68px);
  margin: 0 auto 14px; border-radius: 20px;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  display: grid; place-items: center; box-shadow: 0 14px 34px rgba(255, 107, 44, .48);
}
.driver-header .dh-mark svg { width: 50%; height: 50%; }
.driver-header h1 { color: #fff; font-size: clamp(19px, 5.8vw, 22px); font-weight: 700; letter-spacing: .5px; }
.driver-header p { color: #A9BDD5; font-size: clamp(12px, 3.5vw, 13.5px); margin-top: 6px; letter-spacing: 1.5px; }
.driver-wrap { max-width: 540px; margin: 0 auto; padding: 0 clamp(14px, 4.2vw, 20px); }
.driver-card {
  background: #fff; border-radius: 24px; box-shadow: 0 20px 44px rgba(3, 12, 24, .34);
  padding: clamp(20px, 5.4vw, 26px) clamp(16px, 4.8vw, 24px);
}
.driver-card .field { margin-bottom: clamp(15px, 4.4vw, 18px); }
.driver-card .field label {
  display: block; font-size: clamp(14px, 4vw, 15px); font-weight: 700;
  color: var(--navy-800); margin-bottom: 9px;
}
.driver-card .input { height: 52px; font-size: 16.5px; border-radius: 13px; }
.driver-card .input.mono { letter-spacing: 1px; }
.btn-driver {
  width: 100%; height: clamp(52px, 14.6vw, 58px); font-size: clamp(16.5px, 5vw, 19px);
  border-radius: 15px; margin-top: 6px; letter-spacing: 1px;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark)); color: #fff; font-weight: 700;
  box-shadow: 0 14px 30px rgba(255, 107, 44, .40); border: none;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  white-space: nowrap; overflow: hidden;
}
.btn-driver:active { transform: translateY(1px); }
.btn-driver svg { width: clamp(19px, 5.4vw, 21px); height: clamp(19px, 5.4vw, 21px); flex: 0 0 auto; }
.btn-driver #btnText { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.driver-note { text-align: center; font-size: clamp(11px, 3.2vw, 12.5px); color: #8C9AAA; margin-top: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.driver-note .ver { display: block; margin-top: 2px; font-size: 10.5px; opacity: .45; }

/* 查询结果英雄卡 */
.result-card { border-radius: 20px; padding: clamp(18px,5.4vw,24px) clamp(14px,4.6vw,20px); box-shadow: var(--shadow-md); animation: pop .25s ease; }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }
.result-card .r-icon { width: 58px; height: 58px; border-radius: 17px; margin: 0 auto 12px; display: grid; place-items: center; background: rgba(255,255,255,.7); }
.result-card .r-icon svg { width: 30px; height: 30px; }
.result-card .r-title { text-align: center; font-size: clamp(18px, 5.4vw, 21px); font-weight: 800; }
.result-card .r-sub { text-align: center; font-size: 13.5px; margin-top: 3px; opacity: .85; }
.r-assigned { background: linear-gradient(160deg, #12B45F, #0A8F49); color: #fff; }
.qc-hero span {
  background: #fff; color: var(--navy-800); font-weight: 800;
  font-size: clamp(22px, 7.2vw, 27px);
  padding: clamp(8px, 3vw, 11px) clamp(14px, 5.4vw, 24px);
  border-radius: 15px; box-shadow: 0 8px 18px rgba(0,0,0,.18);
  font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: 1px;
}
.r-waiting { background: linear-gradient(160deg, #F8B62C, #E08A06); color: #fff; }
.r-pending { background: linear-gradient(160deg, #F59E0B, #C2660A); color: #fff; }
.r-pending .qc-hero, .r-assigned .qc-hero, .r-done .qc-hero { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 17px 0 8px; }
.r-taken { background: linear-gradient(160deg, #F0553A, #C0392B); color: #fff; }
.r-notfound { background: linear-gradient(160deg, #64748B, #475569); color: #fff; }
.r-info-row {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px;
}
.r-info-pill {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 600;
}
.r-info-pill b { font-weight: 800; margin-left: 4px; }

/* 司机端等待排队名次 */
.queue-rank {
  margin-top: 14px; padding: 12px 14px; text-align: center;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32);
  border-radius: 14px;
}
.queue-rank .qk { font-size: 12.5px; letter-spacing: 1px; opacity: .9; }
.queue-rank .qv { font-size: 42px; font-weight: 800; line-height: 1.1; margin: 4px 0 2px; }
.queue-rank .qv-text { font-size: 22px; }
.queue-rank .qu { font-size: 16px; font-weight: 700; margin-left: 6px; }
.queue-rank .qv-lbl { font-size: 17px; font-weight: 700; margin-right: 8px; vertical-align: 2px; }
.queue-rank .qd { font-size: 12.5px; line-height: 1.5; opacity: .92; }
.queue-rank .q-live {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 8px; font-size: 11.5px; opacity: .82;
}
.queue-rank .q-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #B9FFD0;
  box-shadow: 0 0 0 3px rgba(185,255,208,.22);
  animation: qpulse 1.8s ease-in-out infinite;
}
@keyframes qpulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.r-actions { max-width: 520px; margin: 14px auto 0; padding: 0 16px; }
.btn-again {
  width: 100%; height: 52px; border-radius: 14px; font-size: 16.5px; font-weight: 700;
  background: #fff; color: var(--navy-800); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-again svg { width: 18px; height: 18px; flex: 0 0 18px; }
.btn-again:active { transform: translateY(1px); }
.r-actions .btn-done {
  width: 100%; height: 52px; border-radius: 14px; font-size: 16.5px; font-weight: 700; margin-bottom: 10px;
  background: linear-gradient(135deg, #12B45F, #0A8F49); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 22px rgba(10,143,73,.35);
}
.r-actions .btn-done svg { width: 19px; height: 19px; flex: 0 0 19px; }
.r-actions .btn-done:active { transform: translateY(1px); }
/* 未点选岸桥号前「已完成作业」不可点，避免确认信息缺失 */
.r-actions .btn-done:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }
.r-actions .btn-done:disabled:active { transform: none; }
.r-done { background: linear-gradient(160deg, #0E7A4A, #0A8F49); color: #fff; }

/* ---------- 查询结果：整页结果显示（不再是浮层弹窗）----------
   司机开车时单手操作，所以「已完成作业」等按钮做成常驻的底部操作条：
   内容区独立滚动，操作条始终贴在屏幕底部，无需下滑就能点到。 */
.res-mask {
  position: fixed; inset: 0; background: var(--bg); z-index: 960;
  display: none; padding: 0;
}
.res-mask.res-show { display: block; }
.res-panel {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg); border-radius: 0; box-shadow: none; overflow: hidden;
  animation: resSlide .2s ease-out;
}
@keyframes resSlide {
  from { opacity: 0; }
  to { opacity: 1; }
}
.res-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px 18px;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: #fff;
  flex: 0 0 auto;
}
.res-head-title { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-close {
  width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 14px; line-height: 1;
  display: grid; place-items: center; transition: background .15s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.res-close:active { background: rgba(255,255,255,.32); }
/* 结果页「重新播报」：小号幽灵按钮，与关闭按钮同排，不换行 */
.res-replay {
  flex: 0 0 auto; white-space: nowrap; height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,.45);
  border-radius: 10px; background: transparent; color: #fff; font-size: 12.5px; font-weight: 700;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.res-replay:active { background: rgba(255,255,255,.24); }
/* 语音被手机自动播放策略拦截时，「重新播报」按钮呼吸闪烁，引导司机点按收听 */
.res-replay.replay-blink { background: #ffd166; border-color: #ffd166; color: #7a4d00; animation: replayBlink 1.1s ease-in-out infinite; }
@keyframes replayBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, .65); }
  50% { box-shadow: 0 0 0 9px rgba(255, 209, 102, 0); }
}
.res-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 16px 16px 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.res-body .driver-wrap { max-width: none; padding: 0; flex: 0 0 auto; }
/* 底部操作条：吸底常驻，内容再长也不用下滑去找按钮（兼容刘海屏安全区） */
.res-body .r-actions {
  position: sticky; bottom: 0; z-index: 2;
  max-width: none; margin: auto -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg); box-shadow: 0 -10px 18px rgba(15, 42, 71, .10);
}
/* ---------- 查询结果：岸桥条 + 字段表格（方案10）----------
   左字段名、右值，一屏看全；底部操作条常驻，司机不用下滑就能点。 */
.res-qcband {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  box-shadow: 0 8px 20px rgba(15, 42, 71, .18);
}
.res-qcband .rl { font-size: 10px; letter-spacing: 2px; color: #9FB6CF; }
.res-qcband .rn {
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 29px;
  font-weight: 800; letter-spacing: 1.5px; line-height: 1.15;
}
/* 岸桥条右侧：前方等候大数字，开车时一眼可见；
   替代表格里的"前方等候"行（该行在小屏会被吸底按钮遮挡） */
.res-qcband .rq { margin-left: auto; display: flex; align-items: baseline; gap: 7px; flex: 0 0 auto; }
.res-qcband .rq-n {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 40px; font-weight: 800; line-height: 1;
}
.res-qcband .rq-t { font-size: 11.5px; color: #9FB6CF; white-space: nowrap; }
.res-qcband .rq.rq-zero .rq-n { color: #5BFF9E; }
.res-table {
  margin-top: 10px; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line-2);
}
.res-tr {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 14px; font-size: 13px; border-bottom: 1px solid var(--line-2);
}
.res-tr:nth-child(odd) { background: #FAFCFE; }
.res-tr:last-child { border-bottom: 0; }
.res-tr span { color: var(--muted); flex: 0 0 auto; }
.res-tr b {
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 14px; font-weight: 700;
  color: var(--ink); text-align: right; word-break: break-all;
}
.res-tip { margin-top: 10px; padding: 0 2px; font-size: 12px; color: var(--muted); line-height: 1.6; }
/* 状态条：与「作业岸桥」条同一套语言（圆角块 + 圆形图标 + 标题），只按状态换配色 */
.res-band {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  box-shadow: 0 8px 20px rgba(15, 42, 71, .18);
}
.res-band .bi {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px; font-weight: 800;
  background: rgba(255, 255, 255, .18);
}
.res-band .bi svg { width: 19px; height: 19px; }
.res-band .bt { font-size: 15.5px; font-weight: 800; line-height: 1.35; }
.res-band .bs { font-size: 11.5px; line-height: 1.55; opacity: .9; margin-top: 2px; }
.res-band .bs b { font-weight: 700; }
.res-band-done { background: linear-gradient(135deg, #12B45F, #0A8F49); box-shadow: 0 8px 20px rgba(10, 143, 73, .26); }
.res-band-warn { background: linear-gradient(135deg, #DD7A0E, #B45309); box-shadow: 0 8px 20px rgba(180, 83, 9, .24); }
.res-band-gray { background: linear-gradient(135deg, #4B5B70, #35455A); }
/* 嵌在结果卡里的表格：与卡内底色区分，但不重复投影 */
.result-card .res-table { margin-top: 12px; background: #F8FBFE; box-shadow: none; }
.result-card .res-tr:nth-child(odd) { background: #fff; }
@media (max-width: 360px) {
  .res-tr { padding: 8px 11px; font-size: 12px; gap: 8px; }
  .res-tr b { font-size: 13px; }
  .res-qcband { padding: 10px 12px; }
  .res-qcband .rn { font-size: 26px; }
  .res-qcband .rq-n { font-size: 32px; }
  .res-qcband .rq-t { font-size: 10.5px; }
}

/* ---------------- 导入区 ---------------- */
.upload-zone {
  display: block;
  border: 2px dashed #B9C9DC; border-radius: 14px; padding: 28px 18px; text-align: center;
  background: #F7FAFD; transition: .15s; cursor: pointer;
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--accent); background: var(--accent-soft); }
.upload-zone svg { width: 40px; height: 40px; color: var(--navy-600); margin-bottom: 8px; }
.upload-zone .uz-title { font-weight: 700; color: var(--navy-800); }
.upload-zone .uz-hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.error-list { max-height: 300px; overflow-y: auto; margin-top: 10px; border: 1px solid #F3C2C2; border-radius: 11px; }
.error-row { display: flex; gap: 10px; padding: 8px 13px; font-size: 13px; border-bottom: 1px solid #FBE3E3; background: #FFF7F7; }
.error-row:last-child { border-bottom: none; }
.error-row .er-row { flex: 0 0 64px; font-weight: 700; color: var(--red); }
.error-row .er-reason { color: var(--ink-2); }
.import-summary { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0; }
.sum-pill { border-radius: 11px; padding: 10px 16px; font-size: 13.5px; background: #F2F6FB; }
.sum-pill b { font-size: 18px; margin-right: 5px; color: var(--navy-800); }
.sum-pill.bad b { color: var(--red); }
.sum-pill.good b { color: var(--green); }

/* QC 配置 */
.qc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.qc-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 15px 16px; background: #fff; transition: .15s; }
.qc-card:hover { border-color: #C4D4E6; box-shadow: var(--shadow-sm); }
.qc-card .qc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.qc-card .qc-head > svg { width: 25px; height: 25px; flex: 0 0 25px; color: var(--navy-700); }
.qc-card .qc-name { font-size: 18px; font-weight: 800; font-family: Consolas, monospace; color: var(--navy-800); }
.qc-card .qc-former { font-size: 12px; color: var(--text-3); background: var(--bg-2); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.qc-card .qc-namecounts { font-size: 12px; color: var(--text-3); margin: -4px 0 10px 34px; }
.qc-card .qc-head-actions { margin-left: auto; display: flex; gap: 6px; }
.port-checks { display: flex; flex-wrap: wrap; gap: 7px; }
.port-check {
  position: relative; cursor: pointer; user-select: none;
}
.port-check input { position: absolute; opacity: 0; pointer-events: none; }
.port-check span {
  display: inline-block; padding: 6px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
  background: #F1F5FA; color: var(--muted); border: 1.5px solid transparent; transition: .13s;
}
.port-check input:checked + span { background: var(--navy-800); color: #fff; }
.port-check input:focus-visible + span { outline: 2.5px solid rgba(34,80,127,.25); }
.qc-add-card {
  border: 2px dashed #B9C9DC; border-radius: 14px; display: grid; place-items: center;
  min-height: 104px; color: var(--muted); cursor: pointer; font-weight: 600; transition: .15s;
  background: #FCFDFE; gap: 6px;
}
.qc-add-card:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.qc-add-card svg { width: 24px; height: 24px; }

/* 二维码区 */
.qr-box { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.qr-img { width: 158px; height: 158px; border: 1px solid var(--line); border-radius: 13px; padding: 8px; background: #fff; }
.qr-img img { width: 100%; height: 100%; display: block; }
.qr-meta { flex: 1; min-width: 220px; }
.qr-url { background: #F4F7FB; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font-size: 13px; word-break: break-all; margin: 7px 0 11px; color: var(--navy-700); font-weight: 600; }

/* 看板动态 */
.activity-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.activity-row:last-child { border-bottom: none; }
.activity-time { color: var(--muted); font-size: 12px; flex: 0 0 72px; }
.activity-main { flex: 1; min-width: 0; }
.activity-main .a-truck { font-weight: 700; }
.activity-main .a-cno { color: var(--muted); font-size: 12.5px; font-family: Consolas, monospace; }
.activity-qcs { flex: 0 0 auto; text-align: right; }

/* 到场动态：车牌号 | 场站 | 岸桥号 | 时间 四列（第一列两行：车号 / 播报状态+喇叭+拨号）
   在线/离线只做弹窗明细，卡片原有显示格式保持不变 */
.arr-head, .arr-row {
  display: grid; grid-template-columns: 112px 60px minmax(0, 1fr) 44px; align-items: center;
  column-gap: 12px; padding: 5px 4px;
}
.arr-head { font-size: 12px; color: var(--muted); font-weight: 600; border-bottom: 1.5px solid var(--line); padding-bottom: 8px; }
/* 信息展示统一居中：到场动态等卡片的标题列与内容列均居中。
   表头单元格与内容列共用类名（arr-c1/cst/c2/c3 自带 flex 对齐），
   必须显式重置为块级，标题文字才能真正居中（text-align 对 flex 容器无效） */
.arr-head > .arr-c1, .arr-head > .arr-cst, .arr-head > .arr-c2, .arr-head > .arr-c3 {
  display: block; padding-left: 0; text-align: center;
}
.arr-row > div { text-align: center; }
.arr-row .arr-c1 { align-items: center; }
.arr-row .arr-cst { justify-content: center; }
.arr-row .arr-c2 { justify-content: center; }
.arr-row .arr-c3 { text-align: center; }
.arr-row { border-bottom: 1px solid var(--line-2); }
.arr-row:last-child { border-bottom: none; }
.arr-c1 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
/* 场站列：徽章在列内左起留 2px，与车牌之间保留列间距的呼吸感 */
.arr-cst { display: flex; align-items: center; min-width: 0; padding-left: 2px; }
.arr-st {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; padding: 2px 9px; font-weight: 800; font-size: 12px;
  line-height: 1.3; letter-spacing: .3px; white-space: nowrap;
}
/* 三色：均为系统同色系低饱和配色，浅底深字，远看不刺眼、近看能分辨 */
.arr-st.yy { color: #2A4A7E; background: #ECF1F9; border: 1px solid #CBD9EC; }   /* 运力 · 靛蓝 */
.arr-st.fh { color: #8A6A1C; background: #FAF3E2; border: 1px solid #E6D6B0; }   /* 丰华 · 暖金 */
.arr-st.na { color: #196B63; background: #E7F3F1; border: 1px solid #C2DCD8; }   /* 南岸 · 青绿 */
.arr-st-none { color: #C8D2E0; font-size: 12px; }
.arr-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.arr-sub { display: flex; align-items: center; gap: 10px; min-width: 0; }   /* 语音/电话图标拉开间距，防误点 */
.arr-c2 { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; min-width: 0; }
.arr-qc {
  display: inline-block; background: var(--navy-800); color: #fff; font-weight: 800; font-size: 13.5px;
  padding: 5px 10px; border-radius: 8px; font-family: Consolas, monospace; letter-spacing: .5px;
  white-space: nowrap; flex: 0 0 auto;
}
.arr-wait {
  display: inline-block; background: #FDF3E3; color: #C98A1B; font-size: 12.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; border: 1px solid #F3DDB8; white-space: nowrap;
}
.arr-done {
  display: inline-block; background: #E8F8EF; color: #0A8F49; font-size: 12.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; border: 1px solid #B7E6CB; white-space: nowrap;
}
/* 已解锁待扫码：该箱被指导员解除占用后、重新扫码前在到场动态显示 */
.arr-rel {
  display: inline-block; background: #FDECEC; color: var(--red); font-size: 12.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; border: 1px solid #F3C2C2; white-space: nowrap;
}
.arr-c3 { text-align: right; color: var(--muted); font-size: 12.5px; font-family: Consolas, monospace; white-space: nowrap; }

/* 在线/离线统计：标题里的小字，本身就是弹窗入口 */
.arr-online-sum { margin-left: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; user-select: none; }
.arr-sum-btn {
  color: var(--ink-3, #6B7C93); cursor: pointer; padding: 1px 3px; border-radius: 5px;
  -webkit-tap-highlight-color: transparent;
}
.arr-sum-btn:active { background: rgba(23, 59, 99, .1); color: var(--navy-700); }
.arr-sum-sep { color: var(--muted); }

/* 疑似漏点：拖车号+箱号一行，操作按钮右侧，窄屏自动换行不挤压 */
.stale-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 4px; border-bottom: 1px solid var(--line-2);
}
.stale-row:last-child { border-bottom: none; }
.stale-main { flex: 1 1 220px; min-width: 0; }
.stale-top { font-size: 14px; font-weight: 700; color: var(--ink-1); word-break: break-all; }
.stale-sub { margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.5; word-break: break-all; }
.stale-acts { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }

/* 小屏：车牌列收窄；弹窗明细列同步收窄，列宽仍固定，号码不换行 */
@media (max-width: 480px) {
  .arr-head, .arr-row { grid-template-columns: 100px 56px minmax(0, 1fr) 40px; column-gap: 10px; }
  .arr-plate { font-size: 13px; padding: 3px 7px; letter-spacing: 0; }
  /* 登录验证码：窄屏缩小图片，保证输入框可用 */
  .captcha-img { flex-basis: 112px; width: 112px; height: 44px; }
  .captcha-row .input { height: 44px; font-size: 16px; }
  /* 卡片标题：窄屏时标题独占一行，说明文字移到第二行；尾部按钮留在标题行并与标题等高对齐 */
  .card-title { flex-wrap: wrap; row-gap: 3px; }
  .card-title .sub { flex: 1 1 100%; order: 2; padding-left: 13px; }
}

/* 可点击统计卡 & 待分配数字 */
.stat-click { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.stat-click:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(8, 26, 48, .14); }
.stat-click:active { transform: translateY(0); }
/* 统计卡可点击提示：标签后加一个轻量箭头，hover 时高亮 */
.stat-card.stat-click .stat-label::after {
  content: "›"; margin-left: 5px; font-weight: 800; font-size: 15px;
  color: currentColor; opacity: .5; transition: opacity .15s, transform .15s;
  display: inline-block;
}
.stat-card.stat-click:hover .stat-label::after { opacity: .95; transform: translateX(2px); }
.link-num {
  border: none; background: none; cursor: pointer; padding: 2px 8px;
  color: var(--blue-600, #1E5AA8); font-weight: 800; font-size: 15px;
  text-decoration: underline; text-underline-offset: 3px; font-family: inherit;
}
.link-num:hover { color: var(--navy-800); }

/* 看板：可点击的QC徽章 */
.qc-chip-click { cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.qc-chip-click:hover { background: var(--navy-600); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(8,26,48,.25); }
.qc-chip-click:active { transform: translateY(0); }
/* 岸桥指令分配进度：可点击查看明细的数字徽章 */
.qc-num { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.qc-num:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(8,26,48,.18); }
.qc-num:active { transform: translateY(0); }

/* 明细弹窗：状态徽章 + 解除占用图标（合并为一列，手机端不额外占宽度） */
.state-cell { white-space: nowrap; }
.state-wrap { display: inline-flex; align-items: center; gap: 8px; }
.icon-unlock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex: 0 0 28px;
  border: 1px solid #F6D6A8; border-radius: 8px;
  background: #FFFDF8; color: #B45309; cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.icon-unlock svg { width: 15px; height: 15px; }
.icon-unlock:hover { background: #FEF4E4; border-color: #E7A85C; }
.icon-unlock:active { transform: translateY(1px); }

/* 明细卡片：一行放箱号 + 状态徽章 + 解锁图标，手机无需横向滑动 */
.lk-list { display: flex; flex-direction: column; gap: 10px; }
.lk-item {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.lk-item:hover { border-color: #CFE0F2; box-shadow: 0 4px 14px rgba(15,42,71,.07); }
.lk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lk-cno {
  flex: 0 0 auto; min-width: 0;   /* 不再占满整行：后面的场站标签才能紧跟箱号 */
  font-size: 15px; font-weight: 700; letter-spacing: .3px;
  color: var(--navy-800); white-space: nowrap; word-break: normal; /* 箱号整体不拆行 */
}
.lk-top .state-wrap { flex: 0 0 auto; margin-left: auto; }
/* 弹窗箱卡片里的场站标记：与到场动态同色系，尺寸略小以适配卡片高度 */
.lk-st {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; padding: 1px 7px; font-weight: 800; font-size: 11.5px;
  line-height: 1.35; letter-spacing: .2px; white-space: nowrap;
}
.lk-st.yy { color: #2A4A7E; background: #ECF1F9; border: 1px solid #CBD9EC; }
.lk-st.fh { color: #8A6A1C; background: #FAF3E2; border: 1px solid #E6D6B0; }
.lk-st.na { color: #196B63; background: #E7F3F1; border: 1px solid #C2DCD8; }
/* 「黑」标签：点一下把该拖车加入黑名单（可点击，故用深色实心以区别于场站标记） */
.lk-st.blk {
  color: #fff; background: #3A4656; border: 1px solid #3A4656;
  cursor: pointer; touch-action: manipulation;
}
.lk-st.blk:hover { background: #2C3644; }
.lk-st.blk:active { background: #1F2733; }
.lk-meta {
  display: flex; flex-wrap: wrap; gap: 5px 14px;
  margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: #4E6076;
}
.lk-meta i { font-style: normal; color: #93A2B5; margin-right: 4px; }
/* QC 明细卡片序号：极简小号数字，只占 ~12px，不挤占箱号宽度 */
.lk-seq {
  flex: 0 0 auto; min-width: 12px; padding: 0;
  color: #93A2B5; background: none;
  font-size: 11px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: flex-end;
}
/* 卡片底部操作行：固定在元信息下一行、左对齐，不随元信息换行位置漂移 */
.lk-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
/* 卡片内小按钮：高度对齐场站/岸桥徽章（约 24px），比正文略高即可 */
.btn-assign {
  min-height: 24px; height: 24px; padding: 0 10px; border-radius: 7px;
  font-size: 12px; font-weight: 600; line-height: 1;
}

/* 港序明细标签：按港序切换查看 */
.port-tabs {
  display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px;
  position: sticky; top: 0; z-index: 2;
  padding: 2px 0 6px; background: #fff;
}
.port-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: #fff; color: #5B6B7E;
  transition: .12s;
}
.port-tab:hover { border-color: #9FB6D4; color: var(--navy-700); }
.port-tab em {
  font-style: normal; font-weight: 700; font-size: 11px;
  padding: 0 5px; border-radius: 999px;
  background: #EDF1F6; color: #7B8A9C;
}
.port-tab.active {
  background: var(--navy-700); border-color: var(--navy-700); color: #fff;
}
.port-tab.active em { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 640px) {
  .port-tab { font-size: 12px; padding: 4px 9px; }
}

/* 卡片视图切换标签（分段选择器样式，区别于港序 port-tab 描边胶囊） */
.view-tabs {
  display: inline-flex; gap: 3px; padding: 3px;
  background: #EDF1F6; border-radius: 11px; margin: 2px 0 12px;
}
.view-tab {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 6px 18px; border: 0; border-radius: 8px;
  background: transparent; color: #71808F; transition: .15s;
}
.view-tab:hover { color: var(--navy-700); }
.view-tab.active {
  background: #fff; color: var(--navy-700);
  box-shadow: 0 1px 4px rgba(16, 42, 86, .18);
}

/* 箱号解锁：后四位方框（复用司机端 .cbx 方框样式）+ 自绘数字键盘 */
.lookup-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.lookup-bar .input { flex: 1; min-width: 170px; }
.lk-boxes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  flex: 1 1 auto; max-width: 280px;
}
.lk-boxes .cbx { height: 42px; font-size: 21px; }
/* 数字键盘弹出时弹窗上移贴顶：保证四位输入框始终在键盘上方可见 */
.modal-mask.kb-up { align-items: flex-start; padding-top: 7vh; }
/* 多箱号候选：整行可点，右侧箭头提示可进入详情 */
.lk-pick { cursor: pointer; }
.lk-pick .lk-arrow { margin-left: auto; font-size: 20px; color: var(--muted); line-height: 1; }
/* 拖车黑/白名单列表 */
.blk-list { display: flex; flex-direction: column; gap: 8px; }
.blk-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px;
}
.blk-row b { font-size: 14.5px; letter-spacing: .3px; flex: 0 0 auto; }
.blk-meta {
  color: var(--muted); font-size: 12px; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blk-row .btn { flex: 0 0 auto; }

/* 箱号核验结论与分配明细 */
.vf-tip { margin: 8px 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.vf-ok { background: #E8F5EC; color: #1E7A42; border: 1px solid #C6E8D2; }
.vf-no { background: #FEF4E4; color: #B45309; border: 1px solid #F6D6A8; }
.vf-done { background: #EAF1FB; color: var(--navy-800); border: 1px solid #D5E2F5; }
.vf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px 14px; }
.vf-cell { font-size: 13px; color: var(--ink); min-width: 0; text-align: center; }
.vf-cell i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.vf-cell span { word-break: break-all; }
.vf-asg { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.vf-asg-title { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.vf-asg-row { display: flex; gap: 12px; font-size: 13px; padding: 3px 0; flex-wrap: wrap; }
.vf-asg-row b { color: var(--navy-800); min-width: 62px; }
.vf-asg-row span { color: var(--ink-2); }

/* 已关闭船舶卡片的管理员操作区 */
.admin-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line);
}

/* QC卡内：每行一个港序 + 计划/已分配箱数 */
.qc-port-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 10px;
  margin-bottom: 6px; cursor: pointer; background: #FBFCFE; transition: .12s;
}
.qc-port-row:hover { border-color: #9FB6D4; background: #F4F8FD; }
.qcp-name { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; color: var(--ink); }
.qcp-code {
  display: inline-block; padding: 3px 10px; border-radius: 8px;
  background: #EAF1F9; color: var(--navy-800); font-weight: 800; font-size: 14px;
  letter-spacing: .5px; white-space: nowrap; font-family: Consolas, monospace;
}
.qcp-name input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--navy-700); cursor: pointer; flex: 0 0 17px; }
.qcp-stats { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.qcp-stats b { color: var(--navy-800); font-size: 14px; font-family: Consolas, monospace; }
.quota-input {
  width: 58px; padding: 3px 6px; border: 1.5px solid var(--line-2); border-radius: 7px;
  font-size: 14px; font-weight: 700; text-align: center; color: var(--navy-800);
  font-family: Consolas, monospace; background: #fff; margin: 0 2px;
}
.quota-input:disabled { background: #F1F4F8; color: var(--muted); border-style: dashed; }
.quota-input:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(31,78,121,.12); }
.qc-full {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: #FDEDEB; color: #C0392B; font-size: 11.5px; font-weight: 700;
}

/* QC卡：贝位池 + 拖拽绑定（选贝后自动带出该贝港序与箱数） */
.qc-sub { font-size: 11.5px; color: var(--muted); margin-bottom: 7px; }

/* 贝位池：未分配贝位的停靠区，拖出即绑定、拖回即解除 */
.bay-pool-wrap {
  border: 1.5px dashed #C6D5E8; border-radius: 12px; background: #F6F9FC;
  padding: 9px 12px 11px; margin-bottom: 12px;
}
.bp-title { font-size: 13px; font-weight: 800; color: var(--navy-800); margin-bottom: 8px; }
.bp-title .bp-tip { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.bay-pool { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; border-radius: 8px; transition: .12s; }
.bay-pool-wrap.drag-over { border-color: var(--navy-600); border-style: solid; background: #E3EEF9; }
.bp-empty { font-size: 12px; color: var(--muted); padding: 4px 2px; }

/* 贝胶囊（池内与卡片内共用内部结构） */
.bay-chip, .qc-bay {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: 1.5px solid var(--line-2); border-radius: 999px;
  background: #fff; cursor: grab; transition: .12s; user-select: none;
}
.bay-chip:hover { border-color: #9FB6D4; background: #F4F8FD; }
.bay-chip:active, .qc-bay:active { cursor: grabbing; }
.bb-no { font-weight: 800; font-size: 12.5px; color: var(--navy-800); line-height: 18px; }
.bb-ports { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.bb-meta {
  font-size: 10.5px; color: var(--muted); background: #EDF1F6;
  border-radius: 999px; padding: 0 5px; line-height: 15px;
}

/* QC卡内的拖放区：已绑定贝胶囊停靠处 */
.qc-drop {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: center;
  border: 1.5px dashed #C6D5E8; border-radius: 10px; padding: 5px 7px;
  background: #FBFCFE; margin-bottom: 9px; transition: .12s;
}
.qc-drop.drag-over { border-color: var(--navy-600); border-style: solid; background: #EDF4FC; }
.qc-drop-hint { font-size: 11.5px; color: var(--muted); padding: 2px 4px; }
.qc-bay { border-color: var(--navy-600); background: #EDF4FC; }
/* 卡片内拖拽重排的插入位置指示（竖线标记插入到目标前/后） */
.qc-bay.drop-before { box-shadow: -4px 0 0 0 var(--navy-600); }
.qc-bay.drop-after { box-shadow: 4px 0 0 0 var(--navy-600); }
.qc-bay .bb-meta { background: #D6E7F8; color: var(--navy-700); }
.bay-x {
  border: none; background: #C9D9EC; color: var(--navy-700); border-radius: 50%;
  width: 16px; height: 16px; font-size: 10px; line-height: 16px; text-align: center;
  cursor: pointer; padding: 0; flex: 0 0 16px;
}
.bay-x:hover { background: #F2CFC9; color: #C0392B; }

/* 点击贝胶囊弹出的操作菜单（手机端替代拖拽） */
.bay-menu {
  position: absolute; z-index: 900; min-width: 150px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 42, 74, .18); padding: 6px;
}
.bay-menu-title {
  font-size: 11px; font-weight: 800; color: var(--muted);
  padding: 4px 8px 6px; border-bottom: 1px solid #EDF1F6; margin-bottom: 4px;
}
.bay-menu-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  font-size: 13px; color: var(--navy-800); padding: 8px; border-radius: 8px; cursor: pointer;
}
.bay-menu-item:hover { background: #EDF4FC; }
.bay-menu-back { color: #C0392B; }
.bay-menu-back:hover { background: #FDEDEB; }

/* QC卡：已选贝位的港序/计划量 —— 紧凑表格，表头与数据同列对齐 */
.bay-port-wrap {
  border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #fff;
  margin-top: 2px;
}
.bay-port-table { width: 100%; border-collapse: collapse; }
/* 贝/位置/数字列收窄到内容宽度，港序列自动占满剩余空间 */
.bay-port-table th:not(.bpt-port-col) { width: 1%; white-space: nowrap; }
.bay-port-table th {
  background: #EDF3FA; font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-align: left; padding: 4px 5px; white-space: nowrap;
}
.bay-port-table th.num, .bay-port-table td.num { text-align: right; }
.bay-port-table th.bpt-zone-col, .bay-port-table td.bpt-zone { text-align: center; }
.bay-port-table td {
  padding: 3px 5px; font-size: 12px; border-top: 1px solid #EDF1F6;
  vertical-align: middle;
}
.bay-port-table tbody tr:nth-child(even) { background: #FAFCFE; }
/* 港序行点选：默认全部分配（选中底色+左侧绿条），取消后灰显虚线 */
.bay-port-table tbody tr { cursor: pointer; user-select: none; }
.bay-port-table tbody tr.row-on { background: #F0F7F2; box-shadow: inset 2px 0 0 #3D9970; }
.bay-port-table tbody tr.row-on:nth-child(even) { background: #ECF5EF; }
.bay-port-table tbody tr.row-off { background: #FAFAFA; box-shadow: inset 2px 0 0 #D5DBE2; }
.bay-port-table tbody tr.row-off td { color: #A8B2BE; }
.bay-port-table tbody tr.row-off .bpt-port { color: #A8B2BE; text-decoration: line-through; text-decoration-color: #C9D1DA; }
.bay-port-table tbody tr.row-off .quota-input { color: #A8B2BE; border-style: dashed; }
.bpt-off {
  display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px;
  background: #EEF1F5; color: #8794A3; font-size: 10px; font-style: normal; font-weight: 800;
  vertical-align: 1px;
}
.bpt-bay { font-weight: 800; color: var(--navy-800); font-size: 12px; }
.bpt-port {
  font-weight: 800; font-family: Consolas, monospace; color: var(--navy-800);
  letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bay-port-table td.num { font-family: Consolas, monospace; color: var(--ink); white-space: nowrap; }
.bay-port-table .quota-input {
  width: 46px; box-sizing: border-box; margin: 0; padding: 1px 3px;
  font-size: 12.5px; border-radius: 6px; text-align: right;
}
.zone-tag {
  display: inline-block; min-width: 15px; padding: 0 4px; border-radius: 4px;
  font-size: 10.5px; font-weight: 800; line-height: 16px; font-family: Consolas, monospace;
}
.zone-tag.h { background: #E2F0E8; color: #1E7B45; }
.zone-tag.d { background: #FFF1DC; color: #A36A12; }
.zone-tag + .zone-tag { margin-left: 2px; }
.zone-none { color: #B9C4D0; font-size: 11px; }
.bpt-full {
  display: inline-block; margin-left: 3px; padding: 0 4px; border-radius: 4px;
  background: #FDEDEB; color: #C0392B; font-size: 10px; font-style: normal; font-weight: 800;
  vertical-align: 1px;
}
.bp-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.legacy-note { margin-top: 8px; border-left: 3px solid #E8B54A; padding-left: 8px; }

@media (max-width: 640px) {
  .bay-chip, .qc-bay { padding: 3px 8px; }
  .bp-title .bp-tip { display: block; margin-left: 0; margin-top: 2px; }
  .bay-port-table th { font-size: 10px; padding: 4px 4px; }
  .bay-port-table td { font-size: 11.5px; padding: 3px 4px; }
  .bay-port-table .quota-input { width: 42px; font-size: 12px; }
}

/* 待分配明细弹窗（#waitModal 专用，避免污染通用 .modal 系列样式） */
.modal-card {
  background: #fff; border-radius: 18px; width: 100%; max-width: 640px; max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px rgba(8, 26, 48, .35); animation: modalIn .18s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
/* 弹窗头部统一为浅色（与全站其它弹窗一致）：白底、无渐变、深色标题、方块关闭按钮。
   曾用深蓝渐变 + 圆形白色关闭键，与其它弹窗风格割裂，现统一为图1样式。 */
#waitModal .modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px 8px; border-bottom: none;
  background: #fff; color: var(--ink);
}
#waitModal .modal-head .modal-title { flex: 1 1 auto; min-width: 0; }
.modal-title { font-size: 16px; font-weight: 700; }
#waitModal .modal-x { margin-left: 0; background: #F1F4F9; color: var(--muted); border-radius: 9px; }
#waitModal .modal-x:hover { background: #E4EAF2; color: var(--ink); }
/* QC 明细弹窗右上角「全员通知」：与关闭按钮同风格，放在其左侧 */
#waitModal .modal-notify {
  border: 1px solid #D7E0EC; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
  background: #F1F4F9; color: var(--navy-700); border-radius: 9px;
  font-size: 13px; font-weight: 700; padding: 6px 12px; font-family: inherit;
}
#waitModal .modal-notify:hover { background: #E4EAF2; }
/* QC 明细序号列：状态圆点（蓝=在线/灰=离线）在序号左边，只放图示即可明白 */
.qcs-seq { white-space: nowrap; }
.qcs-seq .arr-dot { margin-right: 7px; vertical-align: 1px; }
.qcs-seq .arr-dot.on { background: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.qcs-seq b { font-size: 15px; }
/* QC 明细卡片内的联系方式图标：指尖尺寸、靠右对齐 */
.qcs-acts { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; }
.qcs-acts .arr-voice, .qcs-acts .arr-tel { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
.qcs-acts .arr-voice svg, .qcs-acts .arr-tel svg { width: 15px; height: 15px; }

/* 页头返回 */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--navy-700); font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.back-link svg { width: 16px; height: 16px; }
/* 船舶信息卡：白底卡片，标题在上、五个统计整行等分 */
.ship-hero {
  background: var(--card); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "id close" "stats stats" "meta meta";
  gap: 14px 18px; box-shadow: var(--shadow-sm);
}
.ship-hero > div:first-child { grid-area: id; }
.ship-hero h2 { color: var(--ink); font-size: 22px; display: flex; align-items: center; gap: 11px; }
.ship-hero .sh-sub { color: var(--muted); font-size: 13px; margin-top: 5px; }
.ship-hero .sh-stats { grid-area: stats; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ship-hero .sh-acts {
  grid-area: close; align-self: start;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center;
}
.sh-pill {
  background: #F2F6FB; border-radius: 9px; padding: 7px 4px; font-size: 11.5px; color: var(--ink-2);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-pill b { font-size: 14.5px; color: var(--navy-800); margin-left: 3px; }
.sh-pill-done { background: #E6F7EE; color: var(--green); }
.sh-pill-done b { color: var(--green); }
.sh-meta { grid-area: meta; display: flex; flex-direction: column; gap: 10px; }
.sh-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-chip { font-size: 12px; color: var(--ink-2); background: #F7FAFD; border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; }
.sh-chip b { color: var(--navy-800); }
.sh-file {
  display: flex; align-items: center; gap: 10px; background: #F7FAFD; border: 1px dashed #D8E1EC;
  border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--ink-2);
}
.sh-file svg { width: 19px; height: 19px; stroke: var(--navy-600); flex: 0 0 auto; }
.sh-file .name { font-weight: 700; color: var(--ink); }
.sh-file .meta { margin-left: auto; color: var(--muted); font-size: 12px; }

.select-ship-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.select-ship-bar select { max-width: 420px; }
/* 船舶选择与装船模式标签同一行：标签固定宽度、永远不折行 */
.ship-pick { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.ship-pick select { flex: 1 1 auto; min-width: 0; }
.ship-mode {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--navy-700);
  background: rgba(30, 64, 120, .10); border: 1px solid rgba(30, 64, 120, .20);
  border-radius: 999px; padding: 5px 11px;
}
.live-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--green); font-weight: 700; }
.live-tag .dot { background: var(--green); }

/* ============ 司机页：车牌/箱号小方框输入 + 自绘键盘 ============ */
/* 方框行用 grid 等分：宽度随屏幕自动缩放，320px 窄屏也绝不溢出 */
.plate-boxes, .cno-boxes { display: grid; width: 100%; gap: clamp(3px, 1.2vw, 7px); grid-auto-rows: auto; }
.plate-boxes { grid-template-columns: 1.7fr repeat(6, minmax(0, 1fr)); }
.plate-boxes.nev-on { grid-template-columns: 1.5fr repeat(7, minmax(0, 1fr)); }  /* 新能源8位：多一个自由位 */
.cno-boxes { grid-template-columns: repeat(11, minmax(0, 1fr)); }

/* 拖车号标签行：左标题 + 右侧「新能源」开关（iOS 风格拨钮，绿牌用绿色） */
.field label.plate-label { display: flex; align-items: center; justify-content: space-between; }
.nev-sw {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 2px 0; font: inherit; cursor: pointer;
}
.nev-sw-txt { font-size: 12.5px; font-weight: 600; color: var(--muted); transition: color .18s; }
.nev-sw.on .nev-sw-txt { color: #1FA84A; }
.nev-sw-track {
  position: relative; width: 42px; height: 24px; border-radius: 999px;
  background: #D5DAE2; transition: background .18s;
}
.nev-sw-track::after {
  content: ''; position: absolute; top: 2px; left: 2.5px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform .18s;
}
.nev-sw.on .nev-sw-track { background: #34C759; }
.nev-sw.on .nev-sw-track::after { transform: translateX(17px); }
.pbx, .cbx {
  width: 100%; min-width: 0; height: clamp(42px, 13.2vw, 52px);
  border: 1.5px solid var(--line-2); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(17px, 5.3vw, 22px); font-weight: 800; padding: 0; overflow: hidden;
  font-family: Consolas, monospace; background: #fff; cursor: pointer; user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: border-color .12s, box-shadow .12s; color: var(--ink);
}
.pbx:active, .cbx:active { transform: scale(.94); }
.pbx-prov {
  background: #EAF1F9; color: var(--navy-800); border-color: #BCD2E8; position: relative;
  font-family: inherit; font-size: clamp(15px, 4.6vw, 19px);
}
.pbx-tri { font-size: clamp(7px, 2.2vw, 9px); margin-left: 2px; color: var(--navy-600); }
.pbx-letter { background: #EAF1F9; color: var(--navy-800); border-color: #BCD2E8; }
.pbx-filled, .cbx-filled { border-color: var(--navy-600); border-width: 2px; background: #fff; }
.cbx-mask { color: #B8C4D2; background: #F7F9FC; border-style: dashed; }
.cbx-input { border-color: var(--accent); background: #FFF6F0; border-width: 2px; }
.cbx-resolved { border-color: var(--green); background: #F0FBF4; color: var(--green); }
.cno-boxes .cbx { height: clamp(38px, 11.8vw, 46px); font-size: clamp(15px, 4.7vw, 19px); }
.cno-hint { font-size: clamp(11.5px, 3.4vw, 12.5px); color: #7C8A99; margin-top: 9px; }
.cno-hint b { color: #D9480F; font-size: clamp(14px, 4.1vw, 15.5px); font-weight: 800; margin: 0 1px; }
.cno-feedback { font-size: clamp(11.5px, 3.4vw, 12.5px); margin-top: 6px; min-height: 17px; }
.cno-fb-warn { color: #C98A1B; font-weight: 600; }
.cno-fb-err { color: #C0392B; font-weight: 600; }

/* 自绘键盘（iOS 风格：浅灰面板 + 白色圆角按键带投影 + 蓝色确定键） */
.kb-mask {
  position: fixed; inset: 0; background: rgba(8,26,48,.45); z-index: 900;
  display: none; align-items: flex-end; justify-content: center;
}
.kb-mask.kb-show { display: flex; }
.kb-panel {
  width: 100%; max-width: 560px; background: #D2D5DC;
  padding: 6px 6px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,.28);
}
.kb-head { display: flex; justify-content: space-between; align-items: center; padding: 3px 4px 8px; }
.kb-head span { font-size: 13px; color: #59616D; font-weight: 600; letter-spacing: .5px; }
.kb-head span:only-child { margin: 0 auto; }   /* 司机端：无按钮时标题居中 */
.kb-done { border: none; background: #3D7FF2; color: #fff; font-weight: 600; font-size: 14px; padding: 6px 20px; border-radius: 8px; cursor: pointer; }
/* QWERTY 四行布局（数字行 / QWERTY 行 / ASDF 行+⌫ / ZXCV 行+确定） */
.kb-rows { display: block; }
.kb-row { display: flex; gap: clamp(4px, 1vw, 6px); }
.kb-row + .kb-row { margin-top: clamp(6px, 1.6vw, 9px); }
.kb-row .kb-key { flex: 1 1 0; min-width: 0; }
.kb-row .kb-key.kb-ok { flex: 2.8 1 0; }
.kb-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.kb-grid.kb-prov { grid-template-columns: repeat(6, 1fr); }
.kb-key {
  height: clamp(44px, 11.8vw, 55px); border: none; border-radius: clamp(6px, 1.6vw, 8px);
  background: #fff; font-size: clamp(16px, 4.8vw, 21px); font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #16181B; cursor: pointer; box-shadow: 0 1px 0 rgba(16, 24, 40, .25);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .06s, background .1s; padding: 0;
}
.kb-key:active { transform: scale(.95); background: #E5E7EB; }
/* 禁用键（I/O 及字母行的数字）：浅灰半透，不可点 */
.kb-key.kb-off { background: rgba(255,255,255,.38); color: #9AA1AB; box-shadow: none; pointer-events: none; }
/* 功能键：灰底（iOS 风格） */
.kb-key.kb-back { background: #ABB3BD; color: #fff; font-size: 20px; }
.kb-key.kb-back:active { background: #9AA3AE; }
/* 蓝色确定键 */
.kb-key.kb-ok { background: #3D7FF2; color: #fff; font-size: clamp(15px, 4.2vw, 18px); font-weight: 600; letter-spacing: 1px; }
.kb-key.kb-ok:active { background: #2F6BDD; }
.kb-prov .kb-key { font-size: 15px; }
/* 箱号后四位：纯数字 3×4 键盘，键更大、更好按 */
.kb-grid.kb-num { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(7px, 2.2vw, 10px); }
.kb-num .kb-key { height: clamp(48px, 13.4vw, 58px); font-size: clamp(19px, 5.8vw, 23px); }
.kb-num .kb-key.kb-blank { background: transparent; box-shadow: none; cursor: default; pointer-events: none; }
/* 数字 0 左边的「清空」键：灰底功能键，比数字键小一号 */
.kb-num .kb-key.kb-clear { background: #ABB3BD; color: #fff; font-size: clamp(14px, 4vw, 17px); font-weight: 600; }
.kb-num .kb-key.kb-clear:active { background: #9AA3AE; }
.kb-num .kb-key.kb-ok-wide { grid-column: 1 / -1; }
/* 键盘弹出时拉长页面，让输入区能滚到键盘上方不被遮挡。
   实际留白由 driver.html 按键盘面板实测高度动态写入 body.style.paddingBottom，
   这里的 380px 只是脚本执行前的兜底值。 */
body.kb-open { padding-bottom: 380px; }
/* 键盘弹出时隐藏顶部标题栏，进一步腾出可视空间（iPhone 小屏尤其需要） */
body.kb-open .driver-header { display: none; }

/* 箱号歧义选择弹框 */
.cno-modal {
  position: fixed; inset: 0; background: rgba(8,26,48,.5); z-index: 950;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.cno-modal.cno-modal-show { display: flex; }
.cno-modal-card { background: #fff; border-radius: 18px; width: 100%; max-width: 380px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.cno-modal-title { background: var(--navy-800); color: #fff; padding: 15px 18px; font-size: 15.5px; font-weight: 700; }
.cno-modal-list { max-height: 300px; overflow-y: auto; padding: 10px; }
.cno-modal-item {
  display: flex; justify-content: center; align-items: baseline; gap: 2px; width: 100%;
  padding: 14px; margin-bottom: 8px; border: 1.5px solid var(--line-2); border-radius: 11px;
  background: #F8FAFD; font-size: 20px; cursor: pointer; transition: .12s;
}
.cno-modal-item:hover { border-color: var(--navy-600); background: #EFF5FC; }
.cno-modal-item span { color: #8B99AC; }
.cno-modal-item b { color: var(--navy-800); }
.cno-modal-cancel {
  width: 100%; padding: 14px; border: none; border-top: 1px solid var(--line);
  background: #fff; font-size: 15px; color: var(--muted); font-weight: 600; cursor: pointer;
}

/* 未完成作业提醒：再次进入页面时弹窗提醒，点「取消」后底部常驻浮条 */
.pending-info { text-align: center; padding: 20px 18px 4px; }
.pending-info .pending-cno {
  display: block; font-size: 23px; font-weight: 800; letter-spacing: 1px;
  color: var(--navy-800); font-family: "SFMono-Regular", Consolas, monospace;
}
.pending-info .pending-sub { font-size: 12.5px; color: var(--muted); line-height: 1.65; margin-top: 7px; }
.pending-info .pending-warn { font-size: 13px; color: #B45309; font-weight: 600; margin-top: 9px; }
.pending-acts { display: flex; gap: 10px; padding: 14px 18px 18px; }
.pending-go {
  flex: 1 1 auto; height: 46px; border: none; border-radius: 12px; color: #fff;
  font-size: 15.5px; font-weight: 700; touch-action: manipulation;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  box-shadow: 0 8px 18px rgba(255, 107, 44, .32);
}
.pending-go:active { transform: translateY(1px); }
.pending-acts .cno-modal-cancel {
  flex: 0 0 38%; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  padding: 0; height: 46px; color: var(--ink-2); font-size: 15px;
}
.pending-bar {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto; z-index: 40;
  display: none; align-items: center; gap: 11px;
  padding: 11px 13px; text-align: left;
  border: 1px solid #F3C68B; border-radius: 14px;
  background: linear-gradient(180deg, #FFF8ED, #FFEEDA);
  box-shadow: 0 12px 28px rgba(8, 26, 48, .20);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pending-bar.pending-bar-show { display: flex; }
.pending-bar:active { transform: translateY(1px); }
body.has-pending { padding-bottom: 96px; }
.pb-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: var(--accent); color: #fff;
}
.pb-ico svg { width: 18px; height: 18px; }
.pb-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pb-text b { font-size: 15px; color: var(--navy-800); letter-spacing: .5px; font-family: "SFMono-Regular", Consolas, monospace; }
.pb-text i { font-style: normal; font-size: 11.5px; color: #8A5B14; margin-top: 2px; }
.pb-arrow { flex: 0 0 auto; color: #B4813A; font-size: 22px; font-weight: 700; line-height: 1; }

/* 司机页：最近车牌 / 清空输入 两个快捷按钮 */
.driver-tools { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(9px, 2.8vw, 14px); margin-top: clamp(10px, 3vw, 14px); }
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: clamp(5px, 1.8vw, 8px);
  height: clamp(44px, 12.8vw, 50px); min-width: 0; padding: 0 6px;
  border-radius: 12px; border: 1.5px solid #E7EDF4;
  background: #fff; color: var(--navy-800); font-size: clamp(13px, 3.9vw, 15px); font-weight: 600;
  cursor: pointer; transition: .15s; white-space: nowrap;
}
.tool-btn svg { width: clamp(15px, 4.4vw, 18px); height: clamp(15px, 4.4vw, 18px); flex: 0 0 auto; }
.tool-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tool-btn:active { transform: translateY(1px); }
.tool-btn:hover { border-color: var(--navy-600); background: #F4F8FD; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 820px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .topbar { padding: 0 13px; height: 54px; gap: 9px; }
  .brand-title { font-size: 14.5px; }
  .brand-sub { display: none; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .user-chip { padding: 4px 4px 4px 6px; gap: 6px; font-size: 12.5px; }
  .user-chip .avatar { width: 25px; height: 25px; font-size: 12px; }
  .user-chip .u-name { display: none; }
  .user-chip .u-sep { height: 16px; }
  .u-exit { padding: 6px 7px; }
  .u-exit span { display: none; }   /* 窄屏只留退出图标，与角色标签同处一个胶囊 */
  #userBar { gap: 7px; }
  .page { padding: 16px 13px 50px; }
  .page-head h1 { font-size: 19px; }
  .card { padding: 16px 15px; border-radius: 14px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px; gap: 11px; border-radius: 14px; }
  /* 船舶卡片四个统计仍保持一行：收窄间距与字号，避免数字变多时挤破 */
  .ship-card .mini-stats { gap: 5px; }
  .mini-pill { padding: 6px 4px; font-size: 11px; }
  .mini-pill b { font-size: 13.5px; margin-left: 2px; }
  .stat-icon { width: 40px; height: 40px; border-radius: 11px; }
  .stat-icon svg { width: 20px; height: 20px; }
  .stat-num { font-size: 24px; }
  .stat-label { font-size: 12px; }
  .field-row { flex-direction: column; gap: 0; }
  .ship-hero { padding: 15px 14px; gap: 12px; }
  .ship-hero h2 { font-size: 19px; }
  .ship-hero .sh-acts { gap: 6px; }
  .ship-hero .sh-acts > .btn { min-height: 32px; padding-left: 10px; padding-right: 10px; font-size: 12px; }
  .ship-hero .sh-stats { gap: 3px; }
  .sh-pill { padding: 6px 2px; font-size: 9.5px; }
  .sh-pill b { font-size: 12.5px; margin-left: 2px; }
  .sh-file { flex-wrap: wrap; gap: 6px 8px; }
  .sh-file .meta { margin-left: 0; width: 100%; }
  .filter-bar .input, .filter-bar select.input { min-width: 0; flex: 1 1 45%; }
  .filter-bar .input.search { flex: 1 1 100%; }
  .btn { min-height: 44px; }
  .qc-hero span { font-size: 23px; padding: 10px 19px; }
  .login-card { padding: 25px 21px; }

  /* iOS 聚焦自动放大：输入控件字号小于 16px 时，Safari 会强制放大整页
     （user-scalable=no / maximum-scale 在 iOS 上会被忽略），因此统一提到 16px */
  input, select, textarea { font-size: 16px; }
  /* 窄屏弹窗：贴边留白收窄，内容纵向滚动，避免超出屏幕产生横向滑动 */
  .modal-mask { padding: 12px; }
  .modal { max-width: 100%; }
  .modal-card { max-width: 100%; max-height: 88vh; }
  .modal-body { padding: 12px 14px 16px; }
  #waitModal .modal-head { padding: 14px 15px; }
  /* 船舶选择 + 操作按钮在手机上各占一行，避免挤压换行错位 */
  .select-ship-bar { gap: 8px; }
  /* 手机端：下拉框与模式标签同占一行（下拉框自适应收窄），按钮另起一行 */
  .select-ship-bar .ship-pick { flex: 1 1 100%; }
  .select-ship-bar .ship-pick select.input { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; }
  .ship-mode { font-size: 11.5px; padding: 5px 9px; }
  .select-ship-bar .sel { flex: 1 1 100% !important; max-width: none !important; }
  /* 按钮保持内容宽度、靠左排布（不拉满整行） */
  .select-ship-bar .btn { flex: 0 0 auto; }
  /* 自绘下拉：窄屏铺满两列、加大点按区域 */
  .filter-bar .sel { min-width: 0; flex: 1 1 45%; }
  .sel-btn { font-size: 16px; }
  .sel-opt { padding: 11px 12px; font-size: 15px; }
  .sel-panel { max-height: 260px; }
  /* 窄屏表格（港序分组）字号收一点，减少横向滚动距离 */
  table.data { font-size: 13.5px; min-width: 520px; }
  table.data th, table.data td { padding: 9px 10px; }
}

/* 触屏设备（含手机横屏，宽度可能超过 640px）：输入控件字号一律不小于 16px，
   否则 iOS 聚焦输入框时仍会强制放大整页 */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  /* 触屏设备无 hover，去掉依赖 hover 的位移/阴影，避免点击后状态残留 */
  .stat-click:hover, .qc-chip-click:hover, .lk-item:hover { transform: none; box-shadow: none; }
}

/* ================= 装船模式 / 贝位装船顺序 ================= */
.mode-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.mode-btn {
  flex: 1 1 160px; text-align: left; cursor: pointer; font: inherit;
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--line, #e2e8f0); background: #fff;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.mode-btn b { display: block; font-size: 14.5px; color: var(--ink, #0f2a47); margin-bottom: 4px; }
.mode-btn span { display: block; font-size: 12.5px; color: var(--muted, #64748b); line-height: 1.6; }
.mode-btn:hover:not(:disabled) { border-color: #b9cde3; }
.mode-btn.active { border-color: var(--navy, #0f2a47); background: #f2f6fb; box-shadow: 0 2px 10px rgba(15,42,71,.08); }
.mode-btn:disabled { opacity: .6; cursor: not-allowed; }

.mode-tag {
  display: inline-block; padding: 1px 8px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; color: #475569; background: #eef2f7;
  vertical-align: 1px;
}
.mode-tag.is-position { color: #7c3d00; background: #fff2df; }

.bay-current {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid #cfe0f2; border-radius: 12px; background: #f4f9ff;
}
.bay-current .mono { font-size: 19px; color: var(--navy, #0f2a47); }
.bay-current .bay-meta { font-size: 12.5px; color: var(--muted, #64748b); margin-left: 8px; }

.bay-pick { display: flex; flex-direction: column; gap: 8px; }
.bay-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
  background: #fbfcfe; font-size: 13.5px;
}
.bay-row.is-selected { background: #fff; border-color: #d5e2ef; cursor: grab; }
.bay-row.dragging { opacity: .5; }
.bay-row.drop-target { border-color: var(--navy, #0f2a47); box-shadow: 0 0 0 2px rgba(15,42,71,.12); }
.bay-row.is-active { border-color: #1f8a5a; background: #f0fbf5; }
.bay-row.is-done { background: #f6f8fa; color: var(--muted, #64748b); }
.bay-idx {
  min-width: 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 6px; background: #eef2f7; color: #475569; font-size: 12px; font-weight: 700;
}
.bay-row.is-selected .bay-idx { background: var(--navy, #0f2a47); color: #fff; }
.bay-row.is-active .bay-idx { background: #1f8a5a; }
.bay-no { font-weight: 700; font-size: 14px; }
.bay-meta { color: var(--muted, #64748b); font-size: 12.5px; }
.bay-state {
  margin-left: auto; padding: 2px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; background: #eef2f7; color: #475569;
}
.bay-row.is-active .bay-state { background: #d9f2e5; color: #12744a; }
.bay-drag { color: #9aa8b8; cursor: grab; font-size: 15px; letter-spacing: -2px; padding: 0 2px; user-select: none; }
.bay-row .bay-check-input { width: 16px; height: 16px; accent-color: var(--navy, #0f2a47); }

/* 贝位完成提醒弹窗 */
.modal.bay-alert { text-align: center; }
.bay-alert .bay-alert-icon { color: #1f8a5a; width: 54px; height: 54px; margin: 20px auto 6px; }
.bay-alert .bay-alert-icon svg { width: 54px; height: 54px; }
.bay-alert h3 { margin: 0 0 8px; font-size: 17px; color: var(--navy, #0f2a47); }
.bay-alert p { margin: 0 22px 4px; color: var(--ink-2, #475569); font-size: 14px; line-height: 1.75; }
.bay-alert .modal-foot { justify-content: center; gap: 10px; padding: 16px 18px 20px; }

@media (max-width: 640px) {
  .mode-pick { flex-direction: column; }
  .bay-row { gap: 8px; }
  .bay-meta { flex: 1 1 100%; order: 5; }
  .bay-state { margin-left: 0; }
  .bay-current { flex-direction: column; align-items: flex-start; }
  .bay-current .btn { width: 100%; }
}

/* ================= 船舶指导员语音播报 ================= */
/* —— 司机端：顶部悬浮播报卡片（收到播报自动弹出并播放） —— */
.voice-card {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(92vw, 440px); z-index: 1300;
  background: linear-gradient(135deg, var(--navy-900, #081A30) 0%, var(--navy-700, #173B63) 100%);
  color: #fff; border-radius: 16px; padding: 13px 15px 12px;
  box-shadow: 0 14px 38px rgba(4, 16, 32, .42);
}
.voice-card.vc-in { animation: vcIn .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes vcIn {
  from { opacity: 0; transform: translate(-50%, -18px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.vc-head { display: flex; align-items: center; gap: 8px; }
.vc-badge { display: inline-flex; color: #FFD166; }
.vc-badge svg { width: 19px; height: 19px; }
.vc-title { flex: 1; font-size: 14px; font-weight: 800; letter-spacing: .5px; }
.vc-close {
  width: 26px; height: 26px; flex: 0 0 26px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 12px; line-height: 1;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.vc-close:active { background: rgba(255, 255, 255, .32); }
.vc-text { margin-top: 9px; font-size: 16px; font-weight: 700; line-height: 1.55; }
.vc-meta { margin-top: 6px; font-size: 12px; opacity: .78; }

/* —— 指导员端：到场动态车号胶囊 + 在线状态圆点 + 播报状态 + 拨号 —— */
.arr-plate {
  display: inline-block; background: linear-gradient(135deg, #1E5AA8, #164A8C); color: #fff;
  font-weight: 800; font-size: 13.5px; letter-spacing: .3px; font-family: Consolas, monospace;
  padding: 3px 8px; border-radius: 7px; box-shadow: 0 2px 6px rgba(22, 74, 140, .28);
  white-space: nowrap;
}
.arr-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; display: inline-block; }
.arr-dot.on { background: #22A06B; box-shadow: 0 0 0 3px rgba(34, 160, 107, .16); }
.arr-dot.off { background: #C2CBD6; }
/* 点对点语音：车号下方的小喇叭 */
.arr-voice {
  width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid var(--line, #e2e8f0); border-radius: 50%;
  background: #fff; color: var(--navy-700, #173B63); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.arr-voice svg { width: 12px; height: 12px; }
.arr-voice:active { transform: scale(.9); background: #F0F6FC; }
/* 播报状态（司机端自动回传） */
.arr-vstat { font-size: 10.5px; line-height: 1; padding: 2px 5px; border-radius: 5px; font-weight: 700; white-space: nowrap; }
.arr-vstat.v-ok { background: #E7F6EF; color: #1B7A50; }
.arr-vstat.v-warn { background: #FDF1E2; color: #B26A00; }
.arr-vstat.v-bad { background: #FCEAEA; color: #B23B3B; }
/* 离线一键拨号 */
.arr-call {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #E2B4B4; background: #FDF3F3; color: #B23B3B; text-decoration: none;
}
.arr-call svg { width: 12px; height: 12px; }
.arr-call:active { transform: scale(.9); }
.arr-nophone { font-size: 10.5px; color: #9AA7B6; white-space: nowrap; }

/* 在线/离线明细弹窗：车牌号 | 箱号 | 电话 | 拨号
   列宽固定（不用 auto/1fr），保证表头与每一行落在同一条列边界上，不会各行错位串列 */
.arr-mhead, .arr-mrow {
  display: grid; grid-template-columns: 104px minmax(96px, 1fr) 92px 24px;
  align-items: center; column-gap: 8px; padding: 7px 2px;
}
/* 弹窗加宽：把箱号列的可用空间让出来，避免长箱号被省略 */
#arrModal .modal-card { max-width: 560px; }
.arr-mhead { font-size: 12px; color: var(--muted); font-weight: 600; border-bottom: 1.5px solid var(--line); }
/* 在线/离线明细弹窗：标题与内容列同步居中（与到场动态卡片同口径） */
.arr-mhead > div, .arr-mrow > div { text-align: center; }
.arr-mrow .arr-c1 { justify-content: center; }
.arr-mrow .arr-qcell { justify-content: center; }
.arr-mrow .arr-telbox { justify-content: center; }
.arr-mrow .arr-telwrap { justify-content: center; }
.arr-mrow { border-bottom: 1px solid var(--line-2); }
.arr-mrow:last-child { border-bottom: none; }
/* 弹窗行内圆点与车号同一行（卡片里的 .arr-c1 是两行布局，这里必须改成横排） */
.arr-mrow .arr-c1 { flex-direction: row; align-items: center; gap: 6px; }
.arr-mrow .arr-plate { flex: 0 0 auto; }
.arr-telwrap { display: flex; justify-content: flex-end; }
/* 箱号与电话一律完整显示：不设 overflow 裁剪，长文本也不会出现省略号 */
.arr-telbox { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; color: var(--ink-2, #334155); }
/* 弹窗里「岸桥号」列：岸桥号 + 该箱实时状态胶囊（已完成 / 作业中 / 未分配） */
.arr-qcell { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.arr-qn {
  font-size: 12.5px; font-weight: 700; color: var(--navy-800); font-family: Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.arr-qst {
  font-size: 10px; line-height: 1.5; padding: 1px 6px; border-radius: 999px;
  white-space: nowrap; flex: 0 0 auto; font-weight: 700;
}
.arr-qst.st-done { background: var(--green-bg, #E6F7EE); color: #0A8F49; }
.arr-qst.st-work { background: var(--accent-soft, #FFF0E7); color: #C24A12; }
.arr-qst.st-none { background: #F1F4F8; color: var(--muted); }
.arr-qst.st-rel { background: #FDECEC; color: var(--red); }
.arr-tel {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #E2B4B4; background: #FDF3F3; color: #B23B3B; text-decoration: none;
}
.arr-tel svg { width: 12px; height: 12px; }
.arr-tel:active { transform: scale(.9); }
.arr-tel.is-off { border-color: #E2E8F0; background: #F6F8FA; color: #B3BECD; }

/* 小屏收窄弹窗列：必须写在上面基础规则之后，否则会被基础列宽覆盖（CSS 同级后者优先）。
   目标：手机上都让「箱号」和「电话」完整显示，不出现省略号、不串列 */
@media (max-width: 480px) {
  #arrModal .modal-card { max-width: 560px; padding-left: 14px; padding-right: 14px; }
  .arr-mhead, .arr-mrow { grid-template-columns: 84px minmax(76px, 1fr) 82px 20px; column-gap: 5px; }
  .arr-mrow .arr-plate { font-size: 11.5px; padding: 2px 4px; }
  .arr-mrow .arr-dot { width: 6px; height: 6px; flex: 0 0 6px; }
  .arr-tel { width: 20px; height: 20px; flex: 0 0 20px; }
  .arr-telbox { font-size: 11.5px; }
  .arr-qn { font-size: 11.5px; }
  .arr-qst { font-size: 9.5px; padding: 1px 5px; }
}
@media (max-width: 360px) {
  .arr-mhead, .arr-mrow { grid-template-columns: 60px minmax(74px, 1fr) 78px 16px; column-gap: 3px; }
  .arr-mrow .arr-c1 { gap: 4px; }
  .arr-mrow .arr-dot { display: none; }
  .arr-mrow .arr-plate { font-size: 10.5px; padding: 2px 3px; }
  .arr-tel { width: 16px; height: 16px; flex: 0 0 16px; }
  .arr-telbox { font-size: 10px; }
  .arr-qn { font-size: 10px; }
  .arr-qst { font-size: 9px; padding: 0 4px; }
}

/* —— 指导员端：语音播报弹窗 —— */
.voice-target {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-2, #42556B); margin-bottom: 12px;
}
.vt-tag { padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.vt-one { background: #E8F1FB; color: var(--navy-700, #173B63); }
.vt-all { background: #FDF1E2; color: #B26A00; }
.voice-input {
  width: 100%; box-sizing: border-box; resize: none; font-family: inherit;
  font-size: 16px; line-height: 1.6;
  border: 1.5px solid var(--line, #e2e8f0); border-radius: 11px; background: #FBFCFE;
  color: var(--ink, #1A2738); padding: 11px 13px; outline: none; transition: .15s;
}
.voice-input:focus { border-color: var(--navy-600, #22507F); background: #fff; box-shadow: 0 0 0 3.5px rgba(34, 80, 127, .12); }
.voice-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.vq-chip {
  border: 1px solid var(--line, #e2e8f0); background: #F7F9FC; border-radius: 999px;
  padding: 7px 13px; font-size: 13px; color: var(--ink-2, #42556B); cursor: pointer; transition: .15s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.vq-chip:hover { border-color: var(--navy-600, #22507F); color: var(--navy-700, #173B63); background: #F0F6FC; }
.vq-chip:active { transform: scale(.96); }

/* —— 指导员端：真人录音区（按住说话） —— */
.rec-zone {
  background: linear-gradient(135deg, #F0F6FC 0%, #E8F1FB 100%);
  border: 1px solid #D6E4F2; border-radius: 14px; padding: 16px 14px 14px; text-align: center;
}
.rec-btn {
  width: 100%; padding: 14px 0; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--navy-700, #173B63) 0%, var(--navy-600, #22507F) 100%);
  color: #fff; font-size: 17px; font-weight: 800; letter-spacing: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; transition: transform .12s, box-shadow .2s;
  box-shadow: 0 6px 18px rgba(23, 59, 99, .28);
}
.rec-btn .rec-ico { display: inline-flex; width: 20px; height: 20px; }
.rec-btn .rec-ico svg { width: 20px; height: 20px; }
.rec-btn:active { transform: scale(.97); }
.rec-btn.rec-btn-live {
  background: linear-gradient(135deg, #C0392B 0%, #E74C3C 100%);
  box-shadow: 0 0 0 6px rgba(231, 76, 60, .18);
  animation: recPulse 1.1s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(231, 76, 60, .16); }
  50% { box-shadow: 0 0 0 12px rgba(231, 76, 60, .07); }
}
.rec-status { margin-top: 10px; font-size: 13px; color: var(--ink-2, #42556B); }
.rec-acts { display: flex; gap: 9px; justify-content: center; margin-top: 12px; }
.rec-acts .btn { flex: 1; }
.rec-https-tip {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: #FDF6E7; border: 1px solid #F2E3B7; color: #7A5B12; font-size: 13px; line-height: 1.6;
}
.voice-divider {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 12px;
  color: #93A3B5; font-size: 12px;
}
.voice-divider::before, .voice-divider::after { content: ''; flex: 1; height: 1px; background: var(--line, #e2e8f0); }

/* —— 司机端：原声语音消息样式 —— */
.vc-text.vc-raw {
  display: flex; align-items: center; gap: 9px;
  color: #FFD166; font-size: 17px; font-weight: 800;
}
.vc-text.vc-raw .vc-raw-ico { display: inline-flex; width: 22px; height: 22px; color: #FFD166; }
.vc-text.vc-raw .vc-raw-ico svg { width: 22px; height: 22px; }