/* 云翼 · Web 控制台样式
   设计令牌严格取自《墨刀原型与 UI 设计文档 V1.3》第 6 章视觉规范 */

.license-ratings { display:grid; gap:12px; min-width:0; }
.license-rating-card { display:grid; gap:12px; padding:14px; border:1px solid #dbe3ee; border-radius:12px; background:#fff; min-width:0; }
.license-rating-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.license-rating-field { display:grid; gap:6px; min-width:0; }
.license-rating-field select,.license-rating-field input { width:100%; min-width:0; box-sizing:border-box; }
.license-rating-date { display:grid; min-width:0; }
.license-rating-extra { color:#64748b; font-size:13px; }
.license-rating-extra summary { cursor:pointer; padding:4px 0; }
.license-rating-extra[open] { display:grid; gap:10px; }
.license-ratings button { white-space:normal; }
/* 选项级提醒（2026-10-16 裁定 ②）：如「大型不向下覆盖中型与小型」。文案由服务端下发。 */
.license-rating-hint { color:#b45309; font-size:12px; line-height:1.5; }

:root {
  --brand: #2563EB;
  --brand-light: #DBEAFE;
  --success: #16A34A;
  --success-light: #DCFCE7;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --danger: #DC2626;
  --danger-light: #FEE2E2;
  --purple: #7C3AED;
  --purple-light: #EDE9FE;
  --text: #1F2937;
  --text-sub: #6B7280;
  --line: #E5E7EB;
  --bg: #F9FAFB;
  --card: #FFFFFF;
  --slate-light: #F1F5F9;
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-tag: 4px;
  --radius-modal: 16px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, .12);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
}

/* Shared order composer: desktop console and mobile app. */
.order-composer { --order-ink:#172b4d; --order-muted:#738198; max-width:1480px; margin:0 auto; display:flex; flex-direction:column; gap:24px; color:var(--order-ink); font-family:system-ui,'PingFang SC','Microsoft YaHei',sans-serif; }
.order-composer *, .order-composer *::before, .order-composer *::after { box-sizing:border-box; }
.order-composer-heading { display:flex; justify-content:space-between; align-items:center; }
.order-eyebrow { display:block; font-size:12px; line-height:20px; color:var(--order-muted); }
.order-composer-heading h1 { font-size:28px; line-height:40px; letter-spacing:-.6px; font-weight:650; }
.order-draft-badge { font-size:12px; color:#63748b; padding:6px 12px; background:#eef2f7; border-radius:20px; }
.order-draft-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.order-draft-card { display:flex; flex-direction:column; gap:14px; }
.order-draft-title,.order-draft-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.order-draft-title h3 { margin:0 0 4px; font-size:17px; }
.order-draft-status { padding:3px 9px; background:#edf3ff; color:#3569bb; border-radius:6px; font-size:12px; white-space:nowrap; }
.order-draft-tags { display:flex; gap:6px; flex-wrap:wrap; }
.order-draft-tags span { padding:2px 8px; background:#f2f5f9; border-radius:5px; font-size:12px; color:#50647d; }
.order-draft-facts { display:grid; grid-template-columns:64px minmax(0,1fr); gap:8px 12px; margin:0; font-size:13px; line-height:21px; }
.order-draft-facts dt { color:var(--order-muted); }
.order-draft-facts dd { margin:0; overflow-wrap:anywhere; }
.order-draft-bottom { margin-top:auto; padding-top:12px; border-top:1px solid #eef1f6; }
.order-draft-bottom strong { display:block; color:#244c8a; font-size:21px; line-height:28px; }
.order-draft-bottom small { font-size:11px; text-align:right; }
.order-draft-card .order-unit-actions { padding-top:0; margin-top:0; border:0; }
.order-draft-card .order-draft-remark { margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.order-draft-empty { text-align:center; padding:40px 20px; background:linear-gradient(135deg,#fff,#f3f7ff); }
.order-reference-price { padding:10px 12px; border-radius:8px; background:#f5f8fd; color:#516986; font-size:12px; line-height:21px; margin:12px 0 0; }
.order-optional-filter .field { margin-top:12px; }
.order-progress { padding:22px 20px; background:#fff; border:1px solid #e5eaf2; border-radius:16px; }
.order-progress ol { margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); list-style:none; }
.order-progress li { position:relative; display:flex; align-items:center; gap:9px; justify-content:center; color:#8491a5; font-size:12px; white-space:nowrap; }
.order-progress li + li::before { content:''; position:absolute; width:16px; height:1px; background:#dce3ed; left:-8px; }
.order-progress-number { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:#f1f4f8; color:#8491a5; font-size:12px; font-weight:600; }
.order-progress-number svg { width:15px; height:15px; }
.order-progress .is-current { color:var(--brand); font-weight:600; }
.order-progress .is-current .order-progress-number { background:var(--brand); color:white; box-shadow:0 0 0 4px #edf3ff; }
.order-progress .is-complete { color:#477bc8; }
.order-progress .is-complete .order-progress-number { color:var(--brand); background:#eaf1ff; }
.order-progress-mobile { display:none; }
.order-composer-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:start; gap:24px; flex:1; }
.order-composer-main { min-width:0; display:flex; flex-direction:column; gap:18px; }
.order-step-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:2px 2px 0; }
.order-step-heading h2 { font-size:22px; line-height:32px; font-weight:650; margin:0; }
.order-step-heading p { margin:6px 0 0; color:var(--order-muted); font-size:13px; line-height:22px; }
.order-step-count { font-size:40px; line-height:48px; color:#dbe3ef; font-weight:650; font-variant-numeric:tabular-nums; }
.order-card { background:white; padding:26px; border:1px solid #e5eaf2; border-radius:16px; box-shadow:0 4px 16px rgba(35,58,91,.025); min-width:0; }
.order-card > h3 { font-size:16px; line-height:26px; margin:0 0 16px; }
/* 卡片里的次级标题（如「任务费用明细」）与上文留白；首个标题上不留白。 */
.order-card > * + h3 { margin-top:22px; }
.order-card > p, .order-card .t-sub { font-size:12px; color:var(--order-muted); line-height:21px; margin:10px 0; }
/* 小标题紧跟正文时只留 4px：默认 8–16px 的段间距在密集的费用卡里像一段空白。 */
.order-card > h3 + p { margin-top:4px; }
/* dl 的浏览器默认外边距（1em）会在标题与明细之间多出一段空白，卡片内统一清零，间距交给上面的 margin 控制。 */
.order-composer .kv { margin:0; }
.order-composer .field { margin:0; min-width:0; }
.order-composer .field > label { display:block; font-size:13px; color:#455770; font-weight:500; line-height:20px; margin-bottom:9px; }
.order-composer .input { width:100%; min-width:0; max-width:100%; height:46px; padding:11px 13px; border:1px solid #dce3ed; border-radius:9px; background:#fff; color:var(--order-ink); font-family:inherit; font-size:14px; line-height:22px; transition:border-color .15s,box-shadow .15s; }
.order-composer .input::placeholder { color:#a3aebf; font-size:13px; }
.order-composer .input:focus { outline:none; border-color:#6593f0; box-shadow:0 0 0 3px #edf3ff; }
.order-composer textarea.input { height:auto; min-height:90px; resize:vertical; }
.order-composer select.input { padding-right:28px; }
.order-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 18px; }
.order-form-section { display:flex; flex-direction:column; gap:22px; }
.order-card[data-unit-id] > .order-config-sections { margin-top:16px; }
.order-form-section + .order-form-section { margin-top:28px; padding-top:28px; border-top:1px solid #eef1f6; }
.order-card[data-unit-id] > .order-form-section { margin-top:22px; padding-top:18px; border-top:1px solid #eef1f6; gap:12px; }
.order-card[data-unit-id] > .order-form-section > .order-reference-price { margin:0; }
.order-composer--mobile .order-card[data-unit-id] > .order-form-section { margin-top:12px; padding-top:10px; gap:6px; }
.order-section-heading { display:flex; align-items:flex-start; gap:12px; }
.order-section-heading h3 { font-size:16px; line-height:24px; font-weight:600; }
.order-section-heading p { font-size:12px; line-height:20px; color:var(--order-muted); margin-top:4px; }
.order-section-icon { display:grid; place-items:center; width:36px; height:36px; flex:none; color:#4b7dc8; background:#eef4ff; border-radius:10px; }
.order-field-note { align-self:center; font-size:12px; line-height:22px; color:var(--order-muted); }
.order-composer .field > .order-field-note { margin:6px 0 0; align-self:stretch; }
.order-model-details { margin-top:6px; font-size:12px; line-height:22px; color:var(--order-muted); overflow-wrap:anywhere; }
.order-model-details > summary { cursor:pointer; color:#516986; }
.order-model-details > p { margin:4px 0 0; }
.order-field-error { margin:6px 0 0; color:#b42318; font-size:12px; line-height:20px; }
.order-composer [aria-invalid="true"] { border-color:#d92d20; }
.order-composer [aria-invalid="true"]:focus { box-shadow:0 0 0 3px rgba(217,45,32,.12); }
.order-location-feedback { margin:10px 0; font-size:12px; line-height:20px; color:#16804a; }
.order-location-feedback--danger { color:#b42318; }
/* 警告（例如"地址自动带出失败，请手动填写"）：原先这个 tone 没有对应样式，
   于是"失败"提示以默认的成功绿显示，看起来像成功了——补上琥珀色。 */
.order-location-feedback--warn { color:#b45309; }
.order-location-status { align-self:center; font-size:12px; color:#b45309; }
.order-location-status.is-confirmed { color:#16804a; }
.order-location-coordinates summary, .airspace-details summary { cursor:pointer; font-size:12px; color:var(--brand); }
.order-location-coordinates[open], .airspace-details[open] { display:flex; flex-direction:column; gap:10px; }
.order-location-coordinates .order-field-note { margin:6px 0; }
.order-config-sections input[readonly] { background:#f8fafc; color:var(--text-sub); }
.location-picker__range-row { display:flex; align-items:center; gap:10px; }
.location-picker__radius { display:flex; flex:1; min-width:0; gap:8px; align-items:center; font-size:12px; }
.location-picker__radius > span { white-space:nowrap; }
.location-picker__radius .input { min-width:60px; width:90px; max-width:120px; flex:1; }
.location-picker__range-button { flex:none; min-height:40px; padding:8px 10px; border:1px solid #dbe5fb; border-radius:10px; background:#f4f7ff; color:var(--brand); font:inherit; font-size:12px; white-space:nowrap; cursor:pointer; }
.location-picker__range-button:hover { background:#eaf0ff; }
.location-picker__range-button:disabled { opacity:.45; cursor:default; }
.location-picker__range-button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
@media (max-width:380px) { .location-picker__radius { flex-direction:column; align-items:stretch; gap:5px; } .location-picker__radius .input { width:100%; max-width:none; } .location-picker__range-row { align-items:flex-end; } }
.order-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 18px; border-radius:9px; font-family:inherit; font-weight:500; font-size:13px; line-height:20px; border:1px solid transparent; cursor:pointer; gap:8px; transition:background .15s,box-shadow .15s; }
.order-button--primary { color:white; background:var(--brand); border-color:var(--brand); box-shadow:0 3px 8px rgba(37,99,235,.12); }
.order-button--primary:hover { background:#1d55d5; }
.order-button--secondary { color:#51637d; background:#fff; border-color:#dce3ed; }
.order-button--secondary:hover { background:#f4f7fc; border-color:#c8d5e8; }
.order-button:focus-visible { outline:3px solid #bfd4ff; outline-offset:3px; }
.order-button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.order-location-tools, .order-unit-actions { display:flex; gap:10px; flex-wrap:wrap; }
.order-unit-heading { display:flex; gap:12px; align-items:center; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid #eef1f6; }
.order-unit-number { display:grid; place-items:center; width:40px; height:40px; background:#eff4ff; color:#4a79c7; border-radius:11px; font-weight:600; }
.order-unit-heading h3 { font-size:16px; line-height:24px; }
.order-unit-heading p { font-size:12px; color:var(--order-muted); margin:3px 0 0; }
.order-card > .field + .field { margin-top:20px; }
.order-card > .order-form-grid { margin-top:22px; }
.order-composer .checkbox { display:flex; align-items:flex-start; gap:9px; font-size:12px; line-height:22px; color:#5c6f89; margin:18px 0; }
.order-composer .checkbox input { width:16px; height:16px; margin:3px 0 0; accent-color:var(--brand); flex:none; }
.order-composer .kv { grid-template-columns:minmax(96px,.45fr) minmax(0,1fr); gap:12px 16px; margin:18px 0; font-size:13px; line-height:22px; }
.order-composer .kv dt { color:var(--order-muted); }
.order-composer .kv dd { min-width:0; overflow-wrap:anywhere; color:#3f536f; }
.order-unit-actions { margin-top:22px; padding-top:18px; border-top:1px solid #eef1f6; }
.order-unit-actions .order-button { min-height:34px; padding:6px 10px; font-size:12px; }
.order-unit-actions .order-button:last-child { color:#b76161; margin-left:auto; }
.order-composer-aside { padding-top:77px; }
.order-composer-aside .order-card { padding:22px; }
.order-aside-heading { display:flex; align-items:center; gap:10px; color:#536e97; margin-bottom:25px; }
.order-aside-heading h3 { font-size:15px; font-weight:600; }
.order-summary-metric { display:flex; justify-content:space-between; align-items:center; margin:18px 0; gap:8px; }
.order-summary-metric > span { color:var(--order-muted); font-size:12px; }
.order-summary-metric strong { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.order-summary-metric small { font-size:12px; font-weight:400; }
.order-aside-rule { height:1px; background:#eef1f6; margin:24px 0; }
.order-preparation { padding:0; margin:14px 0 20px; list-style:none; display:grid; gap:12px; }
.order-preparation li { display:flex; align-items:center; gap:8px; font-size:12px; color:#65768d; }
.order-preparation svg { width:14px; height:14px; color:#7194c7; }
.order-aside-tip { font-size:12px; line-height:22px; color:#7e8ca1; background:#f6f8fc; border-radius:9px; padding:12px; }
.order-payment-total { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; background:#f0f5ff; border-radius:12px; margin:18px 0 24px; }
.order-payment-total > span { font-size:13px; color:#5977a6; }
.order-payment-total strong { color:var(--brand); font-size:28px; line-height:36px; font-variant-numeric:tabular-nums; }
.order-payment-total small { font-size:16px; font-weight:500; }
.order-fee-breakdown { margin-top:18px; }
.order-fee-breakdown > h3 { margin:0 0 6px; font-size:16px; line-height:26px; }
.order-fee-breakdown > p { margin:4px 0 0; font-size:12px; line-height:21px; color:var(--order-muted); overflow-wrap:anywhere; }
.order-fee-task { padding:10px 0; border-bottom:1px solid var(--order-line, #e8edf5); }
.order-fee-line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; font-size:14px; line-height:22px; }
.order-fee-line-label { display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; }
.order-fee-line-label > small { color:var(--order-muted); font-size:12px; }
.order-fee-line > strong { flex:none; font-variant-numeric:tabular-nums; }
.order-fee-task-deposit { margin:4px 0; font-size:13px; line-height:22px; }
.order-fee-deposit-total { flex-wrap:wrap; }
.airspace-map-entry[hidden] { display:none; }
.order-composer-footer { position:sticky; bottom:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; border:1px solid #e5eaf2; border-radius:14px; background:rgba(255,255,255,.97); box-shadow:0 -4px 20px rgba(35,58,91,.035); }
.order-footer-note { font-size:12px; color:#8a97aa; }
.order-footer-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.order-footer-buttons > .order-button:last-child { min-width:120px; }
.order-composer .banner { font-size:13px; line-height:22px; border-radius:10px; margin:0; }
.order-config-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.order-config-option { display:flex; align-items:flex-start; gap:10px; padding:16px; border:1px solid #dce3ed; border-radius:10px; cursor:pointer; background:#fff; }
.order-config-option.is-selected { border-color:var(--brand); background:#f3f7ff; }
.order-config-option input { margin-top:4px; accent-color:var(--brand); flex:none; }
.order-config-option strong { display:block; font-size:14px; line-height:22px; }
.order-config-option small { display:block; margin-top:6px; font-size:12px; line-height:20px; color:var(--order-muted); }
.order-composer--mobile .order-config-options { grid-template-columns:minmax(0,1fr); }
.order-acceptance-options { grid-template-columns:minmax(0,1fr); }
.order-start-conditions { display:flex; flex-direction:column; }
.order-start-condition { display:flex; align-items:flex-start; gap:14px; border-top:1px solid #edf1f7; padding:16px 0; font-size:14px; line-height:22px; color:var(--order-ink); }
.order-start-condition:last-child { padding-bottom:0; }
.order-start-condition p { margin:4px 0 0; font-size:12px; line-height:20px; color:var(--order-muted); }
.order-condition-dot { flex:none; width:6px; height:6px; margin:8px 0 0 8px; border-radius:50%; background:#7296d1; }
.airspace-unit .airspace-map, .order-composer--mobile .airspace-unit .airspace-map { padding:0; border:0; border-radius:0; }
.airspace-unit [data-airspace-map-slot]:empty { display:none; }
.order-composer details { font-size:12px; line-height:22px; color:var(--order-muted); }
.order-composer summary { cursor:pointer; color:#476999; }
/* 协议正文按语义分段：段间留 6px，段内仍按容器宽度自然折行。 */
.order-agreement-body { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.order-agreement-body > p { margin:0; }
@media (max-width:1050px) {
  .order-composer-layout { grid-template-columns:minmax(0,1fr); }
  .order-composer-aside { display:none; }
  .order-progress li { flex-direction:column; gap:9px; }
  .order-progress li + li::before { width:30%; left:-15%; top:14px; }
}
.order-composer--mobile { min-height:calc(100dvh - 52px); gap:12px; padding:12px 12px 0; background:#f5f7fb; }
.order-composer--mobile .order-composer-aside { display:none; }
.order-composer--mobile .order-composer-layout { display:block; }
.order-composer--mobile .order-progress { background:transparent; border:0; padding:0; border-radius:0; }
.order-composer--mobile .order-progress ol { gap:6px; }
.order-composer--mobile .order-progress li { height:4px; background:#e0e7f1; border-radius:3px; }
.order-composer--mobile .order-progress .is-current { background:var(--brand); }
.order-composer--mobile .order-progress .is-complete { background:#94b4ee; }
.order-composer--mobile .order-progress li::before, .order-composer--mobile .order-progress-number, .order-composer--mobile .order-progress-label { display:none; }
.order-composer--mobile .order-progress-mobile { display:flex; justify-content:space-between; gap:10px; margin-top:12px; font-size:11px; line-height:18px; color:#8190a6; }
.order-composer--mobile .order-progress-mobile span:first-child { color:#5978ab; font-weight:500; }
.order-composer--mobile .order-composer-main { gap:12px; }
.order-composer--mobile .order-step-heading { padding:0 2px; align-items:flex-start; }
.order-composer--mobile .order-step-heading h2 { font-size:20px; line-height:28px; }
.order-composer--mobile .order-step-heading p { font-size:12px; line-height:21px; max-width:270px; }
.order-composer--mobile .order-step-count { font-size:32px; line-height:38px; }
.order-composer--mobile .order-card { padding:14px; border-radius:12px; }
.order-composer--mobile .order-eyebrow { font-size:10px; line-height:18px; }
.order-composer--mobile .order-section-heading { gap:10px; }
.order-composer--mobile .order-section-heading h3 { font-size:15px; }
.order-composer--mobile .order-section-heading p { font-size:11px; line-height:19px; }
.order-composer--mobile .order-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px; }
.order-composer--mobile .order-form-section > .field { margin:0; }
.order-composer--mobile .order-form-section { gap:12px; }
.order-composer--mobile .order-form-section + .order-form-section { margin-top:18px; padding-top:18px; }
.order-composer--mobile .field > label { font-size:12px; margin-bottom:5px; }
.order-composer--mobile .input { height:44px; padding:10px 12px; font-size:14px; }
.order-composer--mobile .order-form-grid > .field:has(input[type=text]), .order-composer--mobile .order-form-grid > .field:has(input[type=datetime-local]), .order-composer--mobile .order-form-grid > .field:has(select), .order-composer--mobile .order-field-note { grid-column:1 / -1; }
.order-composer--mobile .order-form-grid > .field[data-field=amount] { grid-column:1 / -1; }
.order-composer--mobile .order-location-tools { gap:8px; }
.order-composer--mobile .order-location-tools .order-button { flex:1; padding:9px 10px; font-size:12px; }
.order-composer--mobile .order-unit-actions .order-button { font-size:11px; }
.order-composer--mobile .order-composer-footer { border-radius:0; border-left:0; border-right:0; margin:0 -12px; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); }
.order-composer--mobile .order-unit-heading { padding-bottom:12px; margin-bottom:12px; gap:8px; }
.order-composer--mobile .order-unit-number { width:32px; height:32px; border-radius:8px; }
.order-composer--mobile .order-section-icon { width:30px; height:30px; border-radius:8px; }
.order-composer--mobile .order-card > .order-form-grid { margin-top:14px; }
.order-composer--mobile .kv { gap:7px 10px; margin:12px 0; }
.order-composer--mobile .checkbox { margin:12px 0; }
.order-composer--mobile .order-unit-actions { margin-top:14px; padding-top:12px; }
.order-composer--mobile .order-config-option { padding:11px; }
.order-composer--mobile .order-draft-list { grid-template-columns:minmax(0,1fr); gap:12px; }
.order-composer--mobile .order-footer-note { display:none; }
.order-composer--mobile .order-footer-buttons { width:100%; flex-wrap:nowrap; gap:8px; }
.order-composer--mobile .order-footer-buttons > .order-button { padding:11px 13px; min-height:44px; font-size:12px; }
.order-composer--mobile .order-footer-buttons > .order-button:last-child { flex:1; min-width:0; font-size:14px; }
@media (max-width:600px) {
  .order-draft-list { grid-template-columns:minmax(0,1fr); }
  .order-composer:not(.order-composer--mobile) { gap:18px; }
  .order-composer-heading h1 { font-size:24px; }
  .order-progress { padding:18px 8px; }
  .order-progress-label { font-size:10px; }
  .order-card { padding:20px 16px; }
  .order-form-grid { grid-template-columns:minmax(0,1fr); }
  .order-composer-footer { padding:14px; }
  .order-footer-note { display:none; }
  .order-footer-buttons { width:100%; }
  .order-footer-buttons > .order-button:last-child { flex:1; }
}

/* ---------------------------------------------------------------------------
   发单第 4 步「空域校验」面板（web/js/order-airspace.js）

   设计意图（对应"把校验界面尽量美化"这条原始需求）：
   · 结论卡按"级别 + 依据分层"组织，一眼能看出结论是谁说的，而不是读一整行长句；
   · 级别语气只由服务端下发的 tone 决定（可飞绿 / 限飞黄 / 禁飞红 / 待查灰），
     所以这里**不给级别写死任何颜色**，全部走 .tag--* / .banner--* 既有的四档令牌；
   · 地图宿主沿用后台空域页验证过的写法：position:relative + overflow:hidden + zIndex:0，
     把 Leaflet 的 pane(200-700) 与控件(800-1000) 关进本卡片的层叠上下文，
     否则地图会盖住抽屉与弹窗（后台空域页踩过这个坑）。
--------------------------------------------------------------------------- */
.airspace-step { display:flex; flex-direction:column; gap:14px; }
.airspace-headline { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.airspace-headline > .banner { flex:1; min-width:220px; }

.airspace-switch { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.airspace-switch__label { font-size:12px; color:var(--text-sub); flex:none; }
.airspace-switch .chips { flex:1; min-width:0; }
.airspace-switch .chip { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.airspace-map { background:#fff; border:1px solid #e5eaf2; border-radius:16px; padding:14px; }
.airspace-map__head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; font-weight:600; }
.airspace-map__legend { display:flex; gap:6px; flex-wrap:wrap; }
.airspace-work-legend { display:inline-flex; align-items:center; gap:5px; color:#2563eb; font-size:12px; }
.airspace-work-legend i { width:17px; height:13px; border:2px dashed #2563eb; border-radius:50%; background:#eff6ff; }
.airspace-zone-info { margin-top:12px; padding:12px; background:#f8fafc; border-radius:10px; font-size:13px; }
.airspace-zone-info .kv { margin:8px 0 0; }
.order-own-device { grid-column:1 / -1; display:flex; flex-direction:column; gap:12px; min-width:0; }
.rental-next-action { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px; border:1px solid #cbd9ff; border-radius:12px; background:#f2f6ff; }
.rental-next-action p { margin:0; font-size:13px; color:var(--text-sub); }
.rental-arrangement-fields .field { min-width:0; }
.order-range-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.order-range-summary > div { min-width:0; }
html .modal.order-edit-modal { display:flex; flex-direction:column; width:min(520px,100%); height:auto; max-height:calc(100dvh - 32px); overflow:hidden; padding:18px; }
html .modal.order-edit-modal > .between { flex:none; align-items:center; }
html .modal.order-edit-modal > .stack { flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 2px 14px; }
html .modal.order-edit-modal > .modal__foot { flex:none; margin-top:0; padding-top:12px; border-top:1px solid var(--line,#e5e7eb); display:block; }
.order-edit-modal [hidden] { display:none!important; }
.order-edit-content { min-width:0; }
.order-edit-fields section + section,.order-edit-review section + section { padding-top:16px; border-top:1px solid var(--line,#e5e7eb); }
.order-edit-diff { display:flex; flex-direction:column; gap:3px; overflow-wrap:anywhere; }
.order-edit-total { display:block; margin-bottom:8px; font-size:13px; line-height:20px; color:var(--text-sub); }
.order-edit-total:empty { display:none; }
.order-edit-note { margin:0; font-size:12px; line-height:19px; color:var(--text-sub); }
.order-edit-buttons { display:flex; gap:10px; }
.order-edit-buttons > button { flex:1; min-width:0; }
/* 与订单表单保持同一套紧凑控件尺寸，避免弹层单独放大。 */
html .modal.order-edit-modal input.input,html .modal.order-edit-modal select.input { box-sizing:border-box; width:100%; min-width:0; height:32px; min-height:32px; padding:4px 9px; font-size:14px; line-height:22px; border-radius:7px; }
html .modal.order-edit-modal select.input { padding-right:28px; }
html .modal.order-edit-modal textarea.input { box-sizing:border-box; width:100%; min-height:64px; padding:6px 9px; font-size:14px; line-height:22px; border-radius:7px; }
.order-edit-fields label.stack { gap:5px; font-size:13px; line-height:20px; }
.order-edit-fields h3,.order-edit-review h3 { margin:0; font-size:15px; line-height:22px; }
html .modal.order-edit-modal .order-edit-buttons button { min-height:40px; white-space:nowrap; font-size:14px; }
.app-body .modal.order-edit-modal { width:404px; max-height:85dvh; }
@media(max-width:479px) {
  .modal-mask:has(.order-edit-modal) { padding:0; align-items:flex-end; }
  html .modal.order-edit-modal { width:100%; max-width:none; height:auto; max-height:min(85dvh,calc(100dvh - 16px - env(safe-area-inset-top,0px))); border-radius:16px 16px 0 0; padding:16px 16px calc(12px + env(safe-area-inset-bottom,0px)); }
  html .location-picker-modal .location-picker__info { max-height:44dvh; overflow-y:auto; flex:none; }
  html .location-picker-modal .location-picker__stage,html .location-picker-modal .location-map { min-height:160px; }
}

/* 取消：多任务使用选择页，最终确认使用移动底部半屏。 */
.order-cancel { position:fixed; inset:0; z-index:1500; display:flex; align-items:flex-end; justify-content:center; background:rgba(15,23,42,.44); padding:0; }
.order-cancel__panel { width:100%; max-width:480px; max-height:92dvh; background:#fff; color:#142a46; border-radius:24px 24px 0 0; display:flex; flex-direction:column; box-shadow:0 -8px 40px rgba(15,23,42,.12); }
.order-cancel__header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px 0; flex:none; }
.order-cancel__header h2 { margin:0; font-size:18px; font-weight:600; line-height:28px; }
.order-cancel__close { border:0; background:transparent; color:#64748b; min-height:44px; min-width:44px; font:inherit; font-size:13px; }
.order-cancel__content { overflow-y:auto; overscroll-behavior:contain; padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px)); }
.order-cancel__note { margin:8px 0 14px; font-size:13px; line-height:21px; color:#64748b; overflow-wrap:anywhere; }
.order-cancel__summary { font-size:14px; line-height:23px; font-weight:500; overflow-wrap:anywhere; margin:8px 0; }
.order-cancel__money { border-top:1px solid #e5eaf2; border-bottom:1px solid #e5eaf2; margin-top:16px; padding:8px 0; }
.order-cancel__money-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 0; font-size:14px; }
.order-cancel__money-row strong { flex:none; font-weight:500; font-variant-numeric:tabular-nums; }
.order-cancel__money-row.is-total { border-top:1px solid #e5eaf2; margin-top:4px; padding-top:12px; font-size:18px; }
.order-cancel__rules,.order-cancel__deposits { font-size:12px; line-height:20px; color:#64748b; margin-top:12px; overflow-wrap:anywhere; }
.order-cancel__rules p,.order-cancel__deposits p { margin:4px 0; }
.order-cancel__reason { display:flex; flex-direction:column; gap:6px; margin-top:18px; font-size:13px; color:#64748b; }
.order-cancel__reason select { min-height:44px; border:1px solid #dce3ed; border-radius:8px; padding:8px 10px; font:inherit; font-size:16px; background:#fff; color:#142a46; width:100%; }
.order-cancel__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px; }
.order-cancel__button { min-height:46px; border:1px solid #dce3ed; border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; line-height:22px; background:#fff; color:#42536c; cursor:pointer; }
.order-cancel__button:disabled { opacity:.5; cursor:default; }
.order-cancel__button--danger { background:#d62f36; border-color:#d62f36; color:#fff; }
.order-cancel__button--primary { background:var(--brand,#2563eb); border-color:var(--brand,#2563eb); color:#fff; }
.order-cancel__feedback { margin:8px 0 12px; padding:10px 12px; border-radius:8px; font-size:13px; line-height:21px; background:#fff5e5; color:#925700; }
.order-cancel--select .order-cancel__panel { height:100dvh; max-height:100dvh; border-radius:0; }
.order-cancel--select .order-cancel__content { flex:1; display:flex; flex-direction:column; background:#f5f7fb; padding-top:20px; }
.order-cancel__selection { display:flex; flex-direction:column; flex:1; }
.order-cancel__intro h3 { margin:0; font-size:18px; line-height:26px; font-weight:600; }
.order-cancel__intro .order-cancel__note { margin:4px 0 0; }
.order-cancel__shortcuts { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:16px 0 2px; min-height:32px; }
.order-cancel__shortcuts > span { flex-shrink:0; font-size:12px; color:#64748b; }
.order-cancel__shortcut-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0 10px; }
.order-cancel__shortcuts .order-cancel__button { display:flex; align-items:center; justify-content:center; min-height:32px; padding:6px 0; border:0; border-radius:0; background:transparent; color:var(--brand,#2563eb); font-size:12px; line-height:20px; }
.order-cancel__tasks { display:grid; gap:10px; }
.order-cancel__task { display:grid; grid-template-columns:22px minmax(0,1fr); align-items:start; gap:10px; padding:12px; border:1px solid #e5eaf2; border-radius:12px; background:#fff; cursor:pointer; }
.order-cancel__task > input { appearance:none; -webkit-appearance:none; box-sizing:border-box; width:18px; height:18px; margin:3px 2px; padding:0; border:1px solid #cbd5e1; border-radius:5px; background:#fff; cursor:pointer; }
.order-cancel__task > input:checked { border-color:#235ee8; background:#235ee8; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m4 9 3.2 3.2L14 5.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.order-cancel__task > input:disabled { border-color:#dde3ec; background:#edf0f5; cursor:default; }
.order-cancel__task > input:focus-visible { outline:2px solid #235ee8; outline-offset:3px; }
.order-cancel__task.is-selected { border-color:#9bb8fa; background:#f5f8ff; }
.order-cancel__task-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; font-size:14px; line-height:24px; }
.order-cancel__task-heading strong { flex:1; min-width:0; font-weight:500; overflow-wrap:anywhere; }
.order-cancel__task-heading > span { flex-shrink:0; font-size:12px; color:#64748b; }
.order-cancel__task small { display:block; margin-top:4px; font-size:12px; line-height:20px; color:#64748b; }
.order-cancel__task.is-disabled { cursor:default; background:#f8fafc; }
.order-cancel__task.is-disabled strong { color:#64748b; }
.order-cancel__footer { position:sticky; bottom:calc(-20px - env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:14px; margin:20px -16px 0; border-top:1px solid #e5eaf2; background:#fff; padding:12px 16px calc(20px + env(safe-area-inset-bottom,0px)); font-size:13px; }
.order-cancel__tasks { margin-bottom:20px; }
.order-cancel__selection > .order-cancel__footer { margin-top:auto; }
.order-cancel__footer > span { flex-shrink:0; color:#64748b; }
.order-cancel__footer > button { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; }
.order-composer input[type="datetime-local"], html .modal.order-edit-modal input.input[type="datetime-local"] { position:relative; padding-right:40px; }
.order-composer input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.order-edit-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator { position:absolute; right:12px; top:50%; transform:translateY(-50%); box-sizing:border-box; width:20px; height:20px; margin:0; padding:0; cursor:pointer; }
@media (min-width:700px) { .order-cancel { align-items:center; padding:24px; } .order-cancel__panel { border-radius:18px; } .order-cancel--select .order-cancel__panel { height:auto; max-height:88dvh; border-radius:18px; } }
.airspace-map__canvas { position:relative; overflow:hidden; z-index:0; height:320px; margin-top:10px; border-radius:12px; background:#eef2f7; }
.airspace-map__note { margin:8px 0 0; font-size:12px; line-height:18px; color:var(--text-sub); }

.airspace-units { display:flex; flex-direction:column; gap:14px; }
.airspace-unit { background:#fff; border:1px solid #e5eaf2; border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:12px; }
/* 聚焦态用左侧色条 + 边框表达"地图当前画的是这一项"，不用颜色表达级别（级别语义只属于 tag/banner） */
.airspace-unit.is-focused { box-shadow:0 0 0 2px #dbe7ff; border-color:#c7d9ff; }
.airspace-unit.is-blocked { border-left:3px solid #DC2626; }
.airspace-unit__head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.airspace-unit__head h3 { margin:2px 0 0; font-size:15px; font-weight:650; }
.airspace-unit__no { font-size:11px; letter-spacing:.14em; color:var(--text-sub); }
.airspace-unit__tags { display:flex; gap:6px; flex-wrap:wrap; }

.airspace-groups { display:flex; flex-direction:column; gap:10px; }
.airspace-group { background:#f8fafc; border-radius:12px; padding:10px 12px; }
.airspace-group__title { font-size:12px; font-weight:650; color:#334155; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.airspace-group__title small { font-weight:400; color:var(--text-sub); }
.airspace-group .hint-list { margin:6px 0 0; }

.airspace-facts { border-top:1px dashed #e5eaf2; padding-top:10px; }
.airspace-facts .kv { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px 14px; margin:0; }
.airspace-facts dt { font-size:12px; color:var(--text-sub); }
.airspace-facts dd { margin:0 0 4px; font-size:13px; }

.airspace-suggest { background:#f0f7ff; border-radius:12px; padding:10px 12px; }
.airspace-suggest p { margin:6px 0 0; font-size:13px; line-height:20px; color:#1e3a8a; }
.airspace-unit__actions { display:flex; gap:8px; }

.order-composer--mobile .airspace-map__canvas { height:240px; }
.order-composer--mobile .airspace-facts .kv { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.order-composer--mobile .airspace-unit,
.order-composer--mobile .airspace-map { padding:14px; border-radius:14px; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  line-height: 22px;
}

a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding-left: 18px; }

/* ---------- 字号层级（6.2） ---------- */
.t-h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
.t-h2 { font-size: 18px; line-height: 26px; font-weight: 600; }
.t-h3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.t-body { font-size: 14px; line-height: 22px; }
.t-sub { font-size: 12px; line-height: 18px; }
.t-num { font-size: 28px; line-height: 36px; font-weight: 700; }
.muted { color: var(--text-sub); }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- 布局 ---------- */
.layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: 200px; flex: 0 0 200px; background: var(--card);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
}
.sidebar__brand {
  display: flex; gap: 10px; align-items: center;
  padding: 0 var(--s4); border-bottom: 1px solid var(--line); height: 64px;
}
/* 品牌标识：与顶栏账号头像同色系，作为整个控制台的视觉锚点。 */
.sidebar__logo {
  display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px;
  border-radius: 9px; background: var(--brand); color: #fff;
  font-size: 14px; line-height: 1; font-weight: 600;
}
.sidebar__brand-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar__brand-name {
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar__brand-sub {
  font-size: 12px; line-height: 16px; color: var(--text-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--s2); }
.nav-item {
  display: flex; align-items: center; gap: var(--s2); padding: 8px 12px;
  border-radius: var(--radius-btn); color: #475569; margin-bottom: 2px;
}
.nav-item:hover { background: var(--slate-light); }
.nav-item.is-active { background: var(--brand-light); color: var(--brand); font-weight: 500; }
.nav-item__badge {
  margin-left: auto; background: var(--danger); color: #fff; border-radius: 8px;
  font-size: 11px; line-height: 16px; padding: 0 6px;
}
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar {
  height: 64px; flex: 0 0 64px; background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s5);
}
.topbar__meta { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

/* ---------- 顶栏账号菜单 ----------
   旧结构把「服务状态 + 后台 + 企业端 + 合伙人」四个平级按钮并排放在右上角：
   服务状态是技术指标、三个端是导航，混在一起既像"三个身份"，又因为页面门禁
   会按权限纠正回当前端而变成"点不动的假按钮"。现在只留一个账号入口：
   触发器 = 头像 + 账号名 + 当前所在端；展开后是账号信息与竖向小菜单项。
   颜色与圆角全部复用设计令牌。 */
.role-switch { position: relative; }
.role-switch__trigger {
  display: flex; align-items: center; gap: var(--s2); padding: 5px 10px 5px 6px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--text); font: inherit; cursor: pointer;
}
.role-switch__trigger:hover { border-color: #cbd5e1; background: #f8fafc; }
.role-switch__trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.role-switch__icon {
  display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 12px; line-height: 1; font-weight: 600;
}
.role-switch__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.role-switch__caption {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; line-height: 14px; color: var(--text-sub);
}
.role-switch__name {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; line-height: 18px; font-weight: 600;
}
.role-switch__caret { font-size: 10px; line-height: 14px; color: var(--text-sub); }
.role-switch__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  /* 宽度随内容收紧：这个菜单只有两三条动作，固定 288px 会留出一大片空白。 */
  min-width: 168px; max-width: 280px; padding: var(--s1);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--card); box-shadow: var(--shadow-modal);
}
/* 单工作台账号只有操作项：没有工作台列表时，去掉顶部多余的分隔留白。 */
.role-switch__menu--compact .role-switch__actions {
  border-top: 0; margin-top: 0; padding-top: 0;
}
/* 账号动作：竖向小条目，与工作台列表同一规格（仅在多工作台时才与其相邻）。
   旧版做成两个等宽带边框大按钮，视觉重量超过账号本身，看起来像弹窗页脚。 */
.role-switch__actions {
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--line); margin-top: var(--s1); padding-top: var(--s1);
}
/* 退出登录前单独一行分隔：两行紧贴时只能靠颜色区分，容易误点。 */
.role-switch__actions-divider { height: 1px; margin: 2px 0; background: var(--line); }
.role-switch__action {
  display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius-btn);
  background: transparent; color: #334155; text-align: left; white-space: nowrap;
  font: inherit; font-size: 13px; line-height: 18px; cursor: pointer;
}
.role-switch__action:hover { background: var(--slate-light); }
.role-switch__action--danger { color: var(--danger); }
.role-switch__action:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.content { flex: 1; overflow-y: auto; padding: var(--s5); }
/* 发单向导页（批量发单 / 混合模式发单）：内容宽，收窄外层留白，避免宽屏下两侧大片空白 */
.content:has(> .order-composer) { padding: 16px 20px; }
@media (max-width: 900px) {
  .sidebar { display: none; }
  .content { padding: var(--s4); }
  /* 窄屏：只压缩账号名的可用宽度，工作台副标题保留（它是判断"我在哪一端"的关键信息）。 */
  .role-switch__trigger { padding-right: 8px; gap: 6px; }
  .role-switch__name { max-width: 96px; font-size: 13px; line-height: 18px; }
  .role-switch__caption { max-width: 96px; }
  .topbar { gap: var(--s2); padding: 0 var(--s4); }
}

/* ---------- 栅格（12 列） ---------- */
.grid { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 5 列：空域页的 5 个筛选条件（名称/类型/级别/省/市）需要一行显示 */
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 后台检索条：一行尽量放下，控件限宽；窄屏自动换行 */
.filter-grid { display: grid; gap: 8px 12px; align-items: end; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.filter-grid .field { min-width: 0; }
.filter-grid .input { max-width: 260px; }
.filter-grid .span-2 .input { max-width: 320px; }
.grid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
@media (max-width: 1200px) {
  .grid-4, .grid-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
}

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: var(--s4);
}
/* 审核材料：固定画框比例，等比完整显示原图，窄屏自动换列。 */
.audit-materials { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,176px),1fr)); gap:12px; margin-top:12px; }
.audit-material { min-width:0; align-self:start; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.audit-material__label { height:36px; margin-bottom:8px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:12px; line-height:18px; font-weight:500; color:var(--text); overflow-wrap:anywhere; }
.audit-material__media { position:relative; aspect-ratio:4 / 3; overflow:hidden; border-radius:8px; background:#F1F5F9; }
.audit-material__image { display:block; width:100%; height:100%; padding:8px; border:0; background:transparent; cursor:zoom-in; }
.audit-material__image img { display:block; width:100%; height:100%; object-fit:contain; }
.audit-material__actions { position:absolute; inset:auto 0 0; display:flex; justify-content:center; gap:6px; padding:22px 8px 8px; background:linear-gradient(transparent,rgba(15,23,42,.6)); pointer-events:none; }
.audit-material__action { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:32px; padding:6px 10px; border:1px solid rgba(255,255,255,.4); border-radius:6px; background:rgba(15,23,42,.8); color:#fff; font:inherit; font-size:12px; line-height:18px; white-space:nowrap; cursor:pointer; pointer-events:auto; }
.audit-material__action:hover { background:#1D4ED8; border-color:#1D4ED8; }
.audit-material__action:focus-visible { outline:2px solid #fff; outline-offset:2px; background:#1D4ED8; }
.audit-material__image:focus-visible { outline:2px solid var(--brand); outline-offset:-3px; }
.audit-material__placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:100%; padding:8px 8px 44px; color:var(--text-sub); font-size:12px; }
.audit-material__filetype { color:#64748B; font-size:22px; line-height:28px; font-weight:600; letter-spacing:1px; }
/* 审核抽屉的「驳回原因」选择：.chips/.chip 是全局小规格（8px 间距、3px 12px 内边距），
   直接放在卡片标题下会贴着标题、选项彼此也挤。这里与「主体信息」的 dl 取同一节奏：
   标题下留 12px、选项间距 12px，并把选项撑到 28px 高方便点选。 */
.audit-reasons { margin-top:12px; }
.audit-reasons .chips { gap:var(--s3); }
.audit-reasons .chip { padding:4px 14px; }
.card--flush { padding: 0; overflow: hidden; }
.card__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid #F1F5F9;
}
.card__head h2 { font-size: 18px; line-height: 26px; font-weight: 600; }
.card__head .right { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }
.card__body { padding: var(--s4); }
.card__row { display: flex; align-items: center; gap: var(--s3); padding: 12px var(--s4); border-bottom: 1px solid #F1F5F9; }
.card__row:last-child { border-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.stack--sm { gap: var(--s2); }
.row { display: flex; align-items: center; gap: var(--s2); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }

/* ---------- 按钮 ---------- */
.btn {
  border: 1px solid transparent; border-radius: var(--radius-btn); padding: 8px 16px;
  font-size: 14px; line-height: 22px; background: var(--slate-light); color: var(--text);
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  white-space: nowrap;
}
.btn:hover { filter: brightness(.97); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: #1D4ED8; filter: none; }
.btn--ghost { background: #fff; border-color: var(--line); color: #334155; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--warn { background: var(--warning); color: #fff; }
.btn--sm { padding: 4px 10px; font-size: 12px; line-height: 18px; white-space: nowrap; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled {
  background: #E2E8F0; color: #94A3B8; cursor: not-allowed; border-color: transparent;
}
.btn-group { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- 标签（4.5：圆角 4，字号 12，左右 8 / 上下 2） ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-tag);
  padding: 2px 8px; font-size: 12px; line-height: 18px; font-weight: 500;
  background: var(--slate-light); color: #475569; white-space: nowrap;
}
.tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag--blue { background: var(--brand-light); color: #1D4ED8; }
.tag--blue-light { background: #EFF6FF; color: #3B82F6; }
.tag--blue-dark { background: #DBEAFE; color: #1E3A8A; }
.tag--slate { background: var(--slate-light); color: #64748B; }
.tag--green { background: var(--success-light); color: #15803D; }
.tag--green-light { background: #F0FDF4; color: #22C55E; }
.tag--green-dark { background: #DCFCE7; color: #14532D; }
.tag--amber { background: var(--warning-light); color: #B45309; }
.tag--amber-dark { background: #FDE68A; color: #92400E; }
.tag--red { background: var(--danger-light); color: #B91C1C; }
.tag--violet { background: var(--purple-light); color: #6D28D9; }
.tag--purple { background: #F3E8FF; color: #7E22CE; }
.tag--sky { background: #E0F2FE; color: #0369A1; }
.tag--emerald { background: #D1FAE5; color: #047857; }
.tag--indigo { background: #E0E7FF; color: #4338CA; }
.tag--teal { background: #CCFBF1; color: #0F766E; }
.tag--cyan { background: #CFFAFE; color: #0E7490; }
.tag--yellow { background: #FEF9C3; color: #A16207; }
.tag--rose { background: #FFE4E6; color: #BE123C; }

/* ---------- 表格 ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th {
  background: #F8FAFC; text-align: left; font-size: 12px; line-height: 18px;
  font-weight: 500; color: var(--text-sub); padding: 10px 16px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: 12px 16px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.table tbody tr:hover { background: #FCFDFF; }
/* 可点击表格行（dom.js 的 table(..., { onRowClick }) 会给行加 is-clickable）。
   此前这个类**只有 class 没有样式**：行虽然绑了点击事件，但光标不变、悬停反馈与普通行无异，
   使用者看不出"这一行能点" —— 抢单管理页的"任务明细抽屉"因此很难被发现。
   这里补上业界通行的那两个提示：手型光标 + 明显的悬停底色。 */
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:hover { background: #F2F7FF; }
.table tbody tr.is-clickable:active { background: #EAF2FF; }
.table tr.is-error { background: #FEF2F2; }
.table tr.is-warn { background: #FFFBEB; }
.table tr.is-selected { background: #F0F7FF; }
.table--compact td, .table--compact th { padding: 8px 12px; }
.table__actions { display: flex; gap: var(--s2); }
/* 操作列固定宽度：避免按钮被压缩换行 */
.table--actions-last td:last-child, .table--actions-last th:last-child { width: 1%; white-space: nowrap; }
.table--actions-last td:last-child { min-width: 104px; }
.table--actions-last .table__actions { flex-wrap: nowrap; }
/* 操作列内的补充说明（如排除原因）：允许换行但限制宽度，避免把表格撑破 */
.table__action-note {
  white-space: normal; word-break: break-word; max-width: 132px;
  font-size: 12px; line-height: 16px; color: #94A3B8; margin-top: 4px;
}
/* 窄屏时表格横向滚动，不压缩列宽 */
.table-scroll { overflow-x: auto; }
/* 放进 .table-scroll 的表格：单元格禁止换行，让列宽取内容宽度、超宽时整表横向滚动。
   不加这句时中文列会被压到"每列几个字"的宽度，出现「未来科技 城西侧临 时管制区」这种折断。 */
.table-scroll .table td, .table-scroll .table th { white-space: nowrap; }

/* ---------- 批量发单向导（2.3，视觉对齐混合模式发单 order-composer） ---------- */
/* 步骤条复用 .order-progress，本页 4 步覆盖其 6 列网格 */
.batch-progress ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.batch-entry { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.batch-entry__item {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left;
  padding: 18px; border: 1px solid #dce3ed; border-radius: 12px; background: #fff; cursor: pointer; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.batch-entry__item:hover { border-color: #6593f0; box-shadow: 0 0 0 3px #edf3ff; }
.batch-entry__item strong { font-size: 14px; line-height: 22px; color: #172b4d; }
.batch-entry__item span { font-size: 12px; line-height: 20px; color: #738198; }
.batch-stats { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.batch-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.batch-tools .order-button { min-height: 34px; padding: 6px 12px; font-size: 12px; }
/* 任务卡（卡片式行）：每行一张卡，字段随服务模式显隐 */
.batch-tasks { display: flex; flex-direction: column; gap: 14px; }
.batch-task { padding: 20px; }
.batch-task__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.batch-task__no { font-weight: 650; font-size: 15px; color: #172b4d; }
.batch-task__mode { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: #455770; }
.batch-task__mode select.input { width: 150px; height: 36px; padding: 5px 10px; }
.batch-task .input { height: 40px; padding: 8px 11px; border-radius: 9px; }
.batch-task .field { min-width: 0; }
.batch-task.is-error { border-color: #d92d20; }
.batch-row-del { min-height: 28px; padding: 2px 10px; font-size: 12px; flex: none; }
.batch-field-span { grid-column: 1 / -1; }
/* 作业地点字段：仅地图选点入口 + 只读结果，地址/城市/坐标均由选点带出 */
.batch-loc-field { display: flex; flex-direction: column; gap: 6px; }
.batch-loc__row { display: flex; gap: 6px; }
.batch-loc__btn { min-height: 36px; padding: 4px 12px; font-size: 12px; flex: none; }
.batch-loc__result { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #f6f8fc; border-radius: 9px; }
.batch-loc__result strong { font-size: 13px; line-height: 20px; color: #172b4d; overflow-wrap: anywhere; }
.batch-loc__result p { margin: 0; font-size: 12px; line-height: 18px; color: #738198; }
.batch-advanced { margin-top: 16px; border-top: 1px solid #eef1f6; padding-top: 12px; }
.batch-advanced summary { cursor: pointer; font-size: 12px; line-height: 20px; color: #516986; }
.batch-advanced .order-form-grid { margin-top: 12px; }
input.input--error, select.input--error { border-color: #d92d20; background: #fef3f2; }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label { font-size: 12px; line-height: 18px; color: var(--text-sub); }
.field__hint { font-size: 12px; line-height: 18px; color: #94A3B8; }
.field__error { font-size: 12px; line-height: 18px; color: var(--danger); }
/* 字段级校验错误（2026-10-20）：原先与 hint 同字号、同位置，几乎看不见。
   现在做成"圆形感叹号 + 浅红底高亮条"，并让出错控件自己变红边框 —— 一眼定位到哪一项没通过。 */
.form-field-error {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 2px 0 0; padding: 8px 12px;
  border: 1px solid #FECDCA; border-left: 3px solid var(--danger);
  border-radius: 8px; background: var(--danger-light);
  color: #991B1B; font-size: 13px; font-weight: 600; line-height: 20px;
}
.form-field-error__icon {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--danger); color: #fff; font-size: 12px; font-weight: 700;
  line-height: 18px; text-align: center;
}
.form-field-error__text { flex: 1; min-width: 0; }
.field [aria-invalid="true"] { border-color: var(--danger); background: #FEF3F2; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
input.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-btn);
  padding: 8px 12px; font-size: 14px; line-height: 22px; color: var(--text);
  background: #fff; font-family: inherit; outline: none;
}
input.input:focus, select.input:focus, textarea.input:focus { border-color: var(--brand); }
input[type=range] { width: 100%; accent-color: var(--brand); }
.checkbox, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox input, .radio input { width: 16px; height: 16px; accent-color: var(--brand); }
.rental-checkbox { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.rental-checkbox input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; }
.rental-checkbox > span { min-width: 0; font-size: 13px; line-height: 20px; text-align: left; overflow-wrap: anywhere; }
.rental-receipt-note { margin: 0; color: var(--text-sub); font-size: 12px; line-height: 20px; text-align: left; }
.switch { display: inline-flex; align-items: center; gap: 8px; }
.switch input { width: 18px; height: 18px; accent-color: var(--brand); }

/* ---------- 指标卡 ---------- */
.metric { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s4); box-shadow: var(--shadow-card); }
.metric__label { font-size: 12px; line-height: 18px; color: var(--text-sub); }
.metric__value { font-size: 28px; line-height: 36px; font-weight: 700; margin-top: 2px; }
.metric__note { font-size: 12px; line-height: 18px; color: #94A3B8; margin-top: 2px; }
.metric--brand .metric__value { color: var(--brand); }
.metric--green .metric__value { color: var(--success); }
.metric--amber .metric__value { color: var(--warning); }
.metric--red .metric__value { color: var(--danger); }

/* ---------- 进度条 / 评分条 ---------- */
.bar { height: 6px; border-radius: 3px; background: #E2E8F0; overflow: hidden; }
.bar__fill { height: 100%; background: var(--brand); border-radius: 3px; }
.bar__fill--green { background: var(--success); }
.bar__fill--amber { background: var(--warning); }
.bar__fill--red { background: var(--danger); }
.ring { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; }

/* ---------- 6 节点流程条（4.5） ---------- */
.steps { display: flex; align-items: flex-start; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.step__dot {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line);
  background: #fff; display: grid; place-items: center; font-size: 12px; color: #94A3B8;
}
.step.is-done .step__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 进行中（部分单元已完成）：浅色填充，区别于"已完成"的实心与"未开始"的空心 */
.step.is-partial .step__dot { background: #DBEAFE; border-color: var(--brand); color: var(--brand); font-weight: 600; }
.step.is-partial .step__label { color: var(--text); }
.step.is-current .step__dot { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.step__label { font-size: 12px; line-height: 18px; color: var(--text-sub); }
.step.is-done .step__label, .step.is-current .step__label { color: var(--text); }
.step.is-current .step__label { color: var(--brand); font-weight: 500; }
.step__ratio { font-size: 11px; line-height: 16px; color: #94A3B8; }
.step__line { flex: 1; height: 2px; background: var(--line); margin-top: 11px; }
.step__line.is-done { background: var(--brand); }

/* ---------- 甘特 / 时间轴（5.1.4） ----------
   既有缺陷：轴行的刻度是 flex:1 的 <span>，但轴行本身没占满宽度（会被内容宽收缩），
   13 个刻度因此挤成「0:002:004:00…」。现改为与泳道同宽的轴行 + 按小时线绝对定位的刻度，
   并给轨道铺 1h / 2h 网格线，块与刻度共用同一坐标系（100% ÷ 24h）。 */
.gantt { display: flex; flex-direction: column; gap: 4px; }
.gantt__lane { display: flex; align-items: center; gap: var(--s3); }
.gantt__name { width: 168px; flex: 0 0 168px; font-size: 12px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt__axis { position: relative; flex: 1 1 auto; min-width: 0; height: 22px; }
.gantt__tick {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
  font-size: 11px; line-height: 16px; color: #94A3B8; font-variant-numeric: tabular-nums;
}
/* 首尾刻度贴住轨道两端，避免 00:00 / 24:00 越出边框。
   用 :first-of-type / :last-of-type 而不是 :first-child / :last-child ——
   轴行里还有「当前时刻」标线（div），用它会让 :last-child 落到标线上、24:00 匹配不到。 */
.gantt__axis .gantt__tick:first-of-type { transform: none; }
.gantt__axis .gantt__tick:last-of-type { transform: translateX(-100%); }
.gantt__tick::after {
  content: ''; position: absolute; top: 16px; left: 50%; width: 1px; height: 6px; background: #CBD5E1;
}
.gantt__axis .gantt__tick:first-of-type::after { left: 0; }
.gantt__axis .gantt__tick:last-of-type::after { left: 100%; }
/* 窄屏降密：Web 侧栏 1440 宽时 13 个刻度（2h）刚好，App 端轨道仅 ~250px，
   会挤成「00:0002:00…」，所以按视口宽度降到 4h / 6h 并收窄资源名列。
   两个区间必须互斥，否则会叠加成「同时满足 --4h 与 --6h」，只剩 0/12/24 三条。 */
@media (max-width: 1000px) and (min-width: 701px) {
  .gantt__tick:not(.gantt__tick--4h) { display: none; }
}
@media (max-width: 700px) {
  .gantt__tick:not(.gantt__tick--6h) { display: none; }
  .gantt__tick { font-size: 10px; }
  .gantt__name { width: 86px; flex: 0 0 86px; font-size: 11px; }
}
.gantt__track {
  position: relative; flex: 1 1 auto; min-width: 0; height: 24px; border-radius: 6px;
  background-color: var(--slate-light);
  /* 2h 主网格 + 1h 次网格（100% ÷ 12、100% ÷ 24，与块定位同一坐标系） */
  background-image:
    repeating-linear-gradient(90deg, rgba(148, 163, 184, .32) 0 1px, transparent 1px 8.3333333333%),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, .14) 0 1px, transparent 1px 4.1666666667%);
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .55);
}
.gantt__block {
  position: absolute; top: 0; height: 24px; border-radius: 6px; color: #fff;
  font-size: 11px; line-height: 24px; padding: 0 8px; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
  transition: filter .12s ease, box-shadow .12s ease;
}
.gantt__block:hover { filter: brightness(1.07); box-shadow: 0 2px 8px rgba(15, 23, 42, .3); z-index: 2; }
/* 当前时刻标线：由 dom.js 仅在「看板日期 ≈ 今天」时渲染；
   泳道里是一条细线（只在轴行的底边留一个实心端头作为起点） */
.gantt__now {
  position: absolute; top: -2px; bottom: -2px; width: 2px; border-radius: 1px;
  background: rgba(15, 23, 42, .5); z-index: 3;
}
.gantt__now--head { top: 15px; bottom: -5px; width: 2px; background: #0F172A; }
/* 空闲块：此前 dom.js 已在用 .gantt__block--idle，但 CSS 未定义 ——
   靠行内 style 兜底导致同类元素一处走类、一处走行内，属既有遗漏，此处补齐。 */
.gantt__block--idle { background: #F1F5F9; color: #94A3B8; box-shadow: none; }
.gantt__block--order { background: var(--brand); }
.gantt__block--repair { background: var(--warning); }
.gantt__block--offline { background: repeating-linear-gradient(45deg, #CBD5E1, #CBD5E1 4px, #E2E8F0 4px, #E2E8F0 8px); color: #475569; box-shadow: none; }
.gantt__block--conflict {
  background: repeating-linear-gradient(45deg, #DC2626, #DC2626 4px, #FCA5A5 4px, #FCA5A5 8px);
  text-shadow: 0 1px 2px rgba(127, 29, 29, .55);
  animation: gantt-conflict 1.6s ease-in-out infinite;
}
@keyframes gantt-conflict {
  0%, 100% { box-shadow: 0 1px 2px rgba(220, 38, 38, .35); }
  50% { box-shadow: 0 0 0 3px rgba(220, 38, 38, .28); }
}
@media (prefers-reduced-motion: reduce) { .gantt__block--conflict { animation: none; } }

.timeline { border-left: 1px solid var(--line); padding-left: var(--s4); }
.timeline__item { position: relative; padding-bottom: var(--s4); }
.timeline__item::before {
  content: ''; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--brand);
}
.timeline__item.is-current::before { background: #fff; border: 2px solid var(--brand); }
.timeline__item.is-warn::before { background: var(--danger); }

/* ---------- 抽屉 / 弹窗 ---------- */
.drawer-mask, .modal-mask {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 60;
  display: flex; justify-content: flex-end;
}
.drawer {
  width: 560px; max-width: 92vw; background: var(--card); height: 100%;
  display: flex; flex-direction: column; box-shadow: var(--shadow-modal);
}
.drawer__head { padding: var(--s4); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s3); }
/* min-height:0 是 flex 滚动容器的必要项：默认 min-height:auto 会让它拒绝收缩到内容高度以下，
   内容一长就把定高的 .drawer 撑破（表现为"没有滚动条、底部被裁掉"）。 */
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s4); }
.drawer__foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); display: flex; gap: var(--s2); justify-content: flex-end; }

.modal-mask { align-items: center; justify-content: center; padding: var(--s5); }
.modal {
  width: 560px; max-width: 96vw; max-height: 88vh; overflow-y: auto; background: var(--card);
  border-radius: var(--radius-modal); box-shadow: var(--shadow-modal); padding: var(--s5);
}
.modal__title { font-size: 18px; line-height: 26px; font-weight: 600; }
.modal__foot { display: flex; gap: var(--s3); margin-top: var(--s5); }
.modal__foot .btn { flex: 1; }
.modal--wide { width: 820px; }
/* 简洁居中弹窗（确认框 / 提示框）：无右上角关闭，标题与文字居中 */
.modal--center .between { justify-content: center; }
.modal--center .modal__title { text-align: center; }
.modal--center .modal__desc { text-align: center; }

/* ---------- 地图选择作业点（发布订单；Web 与 App 共用同一套弹窗与地图） ----------
   骨架：搜索条（吸顶） + 地图舞台（含悬浮控件与搜索结果浮层） + 信息区（已选地点卡片）。
   桌面端 ≥760px 排成「左地图 / 右信息」两列；移动端是单列，App 侧再把它做成全屏 sheet
   （见 app/www/css/app.css —— App 会显式把两列覆盖回单列，因为它永远只有手机宽度）。 */
.location-picker { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

/* 搜索条：输入框 + 内嵌「× 清空」 + 搜索按钮 */
.location-picker__search { display: flex; gap: 8px; align-items: center; }
.location-picker__field { position: relative; flex: 1; min-width: 0; display: flex; }
/* 高度写死是因为 .order-composer 下的 .input 会被撑到 46px */
.location-picker__field .input { flex: 1; min-width: 0; height: 40px; padding-right: 36px; }
.location-picker__clear {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: #EEF2F7; color: #64748B; font-size: 16px; line-height: 1; cursor: pointer;
}
.location-picker__clear:hover { background: #E2E8F0; color: var(--text); }
.location-picker__search-btn { flex: none; height: 40px; }

/* 地图舞台：地图 + 悬浮控件 + 结果浮层都定位在这里 */
.location-picker__stage { position: relative; min-height: 0; }
/* 地图高度用视口比例而不是固定像素：Web 弹窗与手机全屏面板都要有一块够大的可拖拽区域 */
.location-map {
  position: relative; height: 52vh; min-height: 300px; max-height: 460px;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: #E2E8F0; overflow: hidden;
  /* 拖地图时不要触发页面滚动（触摸设备上这是最容易误操作的地方） */
  touch-action: none;
}
.location-map__host { position: absolute; inset: 0; }
/* 地图库缺失时的宿主：只留一块可读的占位区域 */
.location-map__host--missing { background: repeating-linear-gradient(45deg, #F1F5F9 0 10px, #E2E8F0 10px 20px); }
/* 准星：尖端（28×36 图形的底边中点）正好落在容器中心，即"选中"的那个像素 */
.location-map__crosshair {
  position: absolute; left: 50%; top: 50%; width: 28px; height: 36px;
  transform: translate(-50%, -100%); z-index: 650; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .35));
}
.location-map__pin { display: block; }
.location-map__pin-dot {
  position: absolute; left: 50%; bottom: 0; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px;
  border-radius: 50%; border: 1.5px solid rgba(220, 38, 38, .85); background: rgba(220, 38, 38, .18);
}
/* 地图上的悬浮控件：范围（左上）、图层（右上）与定位（右下、压在 Leaflet 缩放控件之上）。
   三者都是"视野操作"，因此收起在地图上，不再各自占信息区的一整行。
   左上角是唯一没被占用的角落：右上图层、右下缩放控件、左下服务商署名、正中是准星。 */
.location-map__controls { position: absolute; inset: 0; pointer-events: none; z-index: 900; }
.location-picker__fbtn {
  pointer-events: auto; position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 34px; padding: 0 12px; border-radius: 17px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .96); color: var(--text);
  font-size: 12px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
}
.location-picker__fbtn:hover { border-color: var(--brand); color: var(--brand); }
.location-picker__fbtn--layers { top: 10px; right: 10px; }
/* Leaflet 缩放控件在右下（约 60px 高 + 10px 边距），定位按钮压在它正上方 */
.location-picker__fbtn--locate { right: 10px; bottom: 78px; }
/* 需要用户注意时（未授权定位、定位失败）给一圈提示光晕，引导点击 */
.location-picker__fbtn.is-attention { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18), 0 2px 6px rgba(15, 23, 42, .18); }
/* 底图面板：由「图层」按钮展开，避免像以前那样常驻一整行 */
.location-picker__layers {
  position: absolute; z-index: 950; top: 52px; right: 10px;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-btn); background: #fff; box-shadow: var(--shadow-modal);
}
.location-picker__layers-label { font-size: 12px; color: var(--text-sub); }
/* 搜索结果：以浮层盖在地图上（不再把地图往下挤），限高滚动且不把滚动链传给弹窗 */
.location-picker__results {
  position: absolute; z-index: 940; left: 10px; right: 10px; top: 10px; max-height: 62%;
  padding: 6px; border-radius: var(--radius-card); background: rgba(255, 255, 255, .98);
  box-shadow: var(--shadow-modal); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.location-picker__results:empty { display: none; }
.location-picker__result {
  display: flex; align-items: flex-start; gap: 6px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-btn);
  padding: 7px 10px; margin-bottom: 4px; cursor: pointer;
  font-size: 13px; line-height: 18px; color: var(--text);
  /* 允许换行：详细地址另起一行占据整行宽度（否则会被挤成省略号，等于没显示） */
  flex-wrap: wrap;
}
.location-picker__result:hover { border-color: var(--brand); }
.location-picker__result-no { flex: none; color: var(--brand); font-weight: 600; }
.location-picker__result-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.location-picker__result-addr {
  flex-basis: 100%; margin-left: 18px; color: var(--text-sub); font-size: 12px; line-height: 16px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.location-picker__result-note { margin: 4px 6px; font-size: 12px; line-height: 18px; color: var(--text-sub); }

/* 信息区：已选地点卡片（替代原先单行坐标）+ 降级/提示横幅 */
.location-picker__info { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.location-picker__notice {
  margin: 0; padding: 8px 10px; border-radius: var(--radius-btn);
  background: var(--warning-light); color: #B45309; font-size: 12px; line-height: 18px;
}
.location-picker__card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card);
}
.location-picker__card-head { display: flex; align-items: center; gap: 8px; }
.location-picker__card-badge {
  flex: none; padding: 0 8px; border-radius: 9px; background: var(--brand-light); color: var(--brand);
  font-size: 11px; line-height: 18px;
}
.location-picker__card-title { font-size: 14px; line-height: 20px; color: var(--text); }
.location-picker__card-addr { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-sub); }
.location-picker__card-meta { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.location-picker__card-hint { margin: 0; font-size: 12px; line-height: 18px; color: #B45309; }
.location-picker__spinner {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--brand-light); border-top-color: var(--brand);
  animation: location-picker-spin .8s linear infinite;
}
@keyframes location-picker-spin { to { transform: rotate(360deg); } }

/* 桌面端：左地图 / 右信息两列。
   阈值取 1000px 而不是"看起来够用"的 760px：弹窗本身受 `.modal{max-width:96vw}` 约束，
   视口 760px 时可用宽度只有 729px，两列会被挤成一条缝——宁可在窄窗口退回单列。
   ⚠ 刻意**不用** align-items：那是 flex/grid 通用属性，App 侧只把 display 覆盖回 flex 时
   它会残留下来。曾经写成 `align-items:start`，结果是 App 在 ≥1000px 视口里
   子项退化成内容宽度、地图宽度塌成 2px（整片地图变白）。要"信息卡不拉伸"就用
   元素自己的 align-self，别动容器级对齐。 */
@media (min-width: 1000px) {
  .location-picker-modal { width: 920px; }
  .location-picker {
    display: grid; gap: 12px;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "search search" "stage info";
  }
  .location-picker__search { grid-area: search; }
  .location-picker__stage { grid-area: stage; }
  /* 信息卡按内容高度排布，而不是被拉伸到与地图同高 */
  .location-picker__info { grid-area: info; align-self: start; }
  .location-map { height: 420px; }
}

/* ---------- 提示 ---------- */
.toast-host {
  position: fixed; left: 50%; top: 88px; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: var(--s2); align-items: center; pointer-events: none;
}
.toast {
  background: rgba(15, 23, 42, .92); color: #fff; border-radius: var(--radius-btn);
  padding: 8px 16px; font-size: 14px; line-height: 22px; box-shadow: var(--shadow-modal);
  animation: toast-in .16s ease-out;
}
/* 警告类提示（如"改了实名信息需重新核验"）：此前 toast 只有 danger/success 两种样式，
   warning 传了也没有视觉区分，属既有遗漏，此处补齐。 */
.toast--warning { background: rgba(180, 83, 9, .95); }
.toast--danger { background: rgba(185, 28, 28, .95); }
.toast--success { background: rgba(21, 128, 61, .95); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.banner {
  border-radius: var(--radius-card); padding: 12px var(--s4); font-size: 14px; line-height: 22px;
  display: flex; gap: var(--s2); align-items: flex-start;
}
.banner--info { background: var(--brand-light); color: #1E40AF; }
.banner--warn { background: var(--warning-light); color: #92400E; }
.banner--danger { background: var(--danger-light); color: #991B1B; }
.banner--success { background: var(--success-light); color: #166534; }
.banner--slate { background: var(--slate-light); color: #475569; }

.empty { padding: 48px var(--s4); text-align: center; }
.empty__icon {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(37, 99, 235, .1);
  color: #93C5FD; display: grid; place-items: center; margin: 0 auto var(--s3);
  font-size: 28px; line-height: 1;
}
.empty p { color: var(--text-sub); }

.evidence-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); }
.evidence-grid__item {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, #E0F2FE, #E2E8F0); display: grid; place-items: center;
  font-size: 12px; color: #64748B; border: 1px solid var(--line);
}
.evidence-grid__item--video { background: #0F172A; color: #fff; }
.evidence-media-link, .evidence-media { position:absolute; inset:0; width:100%; height:100%; min-width:0; object-fit:cover; }
.evidence-media-link { display:flex; align-items:center; justify-content:center; color:inherit; text-align:center; }
.evidence-media-status { padding:12px; font-size:12px; line-height:20px; text-align:center; }
.evidence-grid__item span.label { max-width:calc(100% - 8px); box-sizing:border-box; pointer-events:none; }
.evidence-grid__item--video span.label { top:4px; bottom:auto; }
.work-acceptance .evidence-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.evidence-grid__item span.label {
  position: absolute; left: 4px; bottom: 4px; background: rgba(0, 0, 0, .5); color: #fff;
  border-radius: 4px; padding: 0 6px; font-size: 11px; line-height: 16px;
}

.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; align-items: start; }
.kv dt { color: var(--text-sub); font-size: 12px; line-height: 18px; padding-top: 3px; }
.kv dd { margin: 0; font-size: 14px; line-height: 22px; }
/* 订单详情「更多信息」：左右两列字号统一（与小程序端 m-sub 口径一致） */
.m-task-facts .kv dt { padding-top: 0; }
.m-task-facts .kv dd { font-size: 12px; line-height: 18px; color: var(--text-sub); }

.hint-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hint-list li { font-size: 12px; line-height: 18px; color: var(--text-sub); padding-left: 12px; position: relative; }
.hint-list li::before { content: '·'; position: absolute; left: 2px; }

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 12px;
  font-size: 12px; line-height: 18px; color: #475569;
}
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 图例（5.1.4）：此前只写「订单占用：品牌蓝 #2563EB」这样的文字，看不出颜色本身；
   现改为真实色块 + 名称，颜色说明保留在 title 里（Web 用 .chip、App 用 .m-chip）。 */
.legend-chip { display: inline-flex; align-items: center; }
.chip.legend-chip { padding-left: 8px; }
.legend-swatch {
  width: 12px; height: 12px; flex: 0 0 12px; border-radius: 3px; margin-right: 6px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
}
.legend-swatch--offline { background: repeating-linear-gradient(45deg, #CBD5E1, #CBD5E1 3px, #E2E8F0 3px, #E2E8F0 6px); }
.legend-swatch--idle { background: #F1F5F9; }

.tabs { display: flex; gap: var(--s1); background: var(--slate-light); border-radius: var(--radius-btn); padding: 4px; }
/* nowrap 是必需的：中文的最小内容宽度只有 1 个字（任意两字之间都可断行），
   于是 flex:1 的 tab 会被压到"一个字一行"——实测「平台自建空域区域清单（5）」被折成两行。 */
.tabs button { flex: 1; white-space: nowrap; border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; font-size: 14px; color: var(--text-sub); }
.tabs button.is-active { background: #fff; color: var(--text); font-weight: 500; box-shadow: var(--shadow-card); }

/* 工具类：禁止换行。
   用于 flex 行里的短中文标签 —— 与上面同一个成因：CJK 的 min-content 只有 1 个字，
   不加这句时 flex 项会被压到极窄，文字被竖排（分页条里的「每页」就是这样变成两行的）。 */
.nowrap { white-space: nowrap; }

.score-cell { display: flex; align-items: center; gap: var(--s2); min-width: 120px; }
.score-cell .bar { flex: 1; }
.recommend {
  background: var(--success-light); color: #15803D; border-radius: var(--radius-tag);
  padding: 1px 6px; font-size: 11px; line-height: 16px; font-weight: 600; margin-left: 6px;
}
.order-card {
  border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s4);
  background: var(--card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: var(--s2);
}
.order-card--abnormal { border-color: #FCA5A5; }
.order-card--cancelled { opacity: .6; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── 登录页（Web 控制台；App / 小程序各有自己的登录样式，不受本段影响） ──
   版式：居中单卡片，品牌区 → 表单 → 主按钮 → 演示账号（默认折叠）。
   间距统一走 --s* 令牌，避免此前各元素用行内 margin 拼凑导致的拥挤。 */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #EFF6FF 0%, #F8FAFC 55%, #F1F5F9 100%);
  padding: var(--s5) var(--s4);
}
/* 注意：以下登录页规则必须带 .login-wrap 前缀。app/build.js 会把本文件原样复制成
   App 的 shared-tokens.css，而 App 登录页也用 .login-card；不加前缀会把 Web 版式带进 App。 */
.login-wrap .login-card {
  width: 100%; max-width: 400px; padding: var(--s6) var(--s5);
  border-radius: 20px; display: flex; flex-direction: column; gap: var(--s4);
}
.login-wrap .login-brand { display: flex; flex-direction: column; gap: 6px; }
/* 表单区：字段之间统一 14px，标签与控件贴紧，避免视觉上"两坨"挤在一起。 */
.login-wrap .login-card .field { gap: 6px; }
.login-wrap .login-card .field > label { font-size: 13px; line-height: 20px; color: #475569; }
.login-wrap .login-card input.input { height: 44px; padding: 10px 12px; font-size: 14px; }
.login-wrap .login-card .pwd__input { padding-right: 52px; }
.login-wrap .login-card .login-submit { height: 44px; margin-top: var(--s1); font-size: 15px; }
/* 演示账号：默认折叠，展开后是单列列表（此前 9 个 chip 会排成 4 行）。 */
.login-wrap .login-demo { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s1); }
.login-wrap .login-demo__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 6px 2px; border: 0; background: transparent; color: #64748B;
  font: inherit; font-size: 12px; line-height: 18px; cursor: pointer; text-align: left;
}
.login-wrap .login-demo__toggle:hover { color: var(--brand); }
.login-wrap .login-demo__toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.login-wrap .login-demo__chevron { font-size: 10px; line-height: 14px; color: #94A3B8; }
.login-wrap .login-demo__list { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s2); }
.login-wrap .login-demo__hint { margin: 0 0 6px; font-size: 11px; line-height: 16px; color: #94A3B8; }
.login-wrap .login-demo__item {
  display: flex; align-items: baseline; gap: var(--s2); width: 100%;
  padding: 7px 8px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.login-wrap .login-demo__item:hover { background: var(--brand-light); }
.login-wrap .login-demo__item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.login-wrap .login-demo__account { flex: 0 0 62px; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--brand); }
.login-wrap .login-demo__role { flex: 0 0 auto; font-size: 12px; line-height: 18px; }
.login-wrap .login-demo__desc { flex: 1; min-width: 0; font-size: 11px; line-height: 16px; color: var(--text-sub); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .login-wrap .login-card { padding: var(--s5) var(--s4); }
  .login-wrap .login-demo__desc { display: none; }
}
/* ---------- 密码输入控件（web/js/password-field.js；2026-10-20） ----------
   三处共用：新增账号初始密码 / 管理员重置密码 / 转为后台账号，外加 Web 改密页。
   眼睛按钮压在输入框右侧；规则清单在输入时逐条变色（未满足红、满足绿、空值灰）。 */
.pwd { display: flex; flex-direction: column; gap: 6px; }
.pwd__control { position: relative; }
/* 右侧留出眼睛按钮的完整占位，避免密码文字压到按钮下面。 */
.pwd__input { padding-right: 52px; }
.pwd__toggle {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  /* 按钮高度比输入框内沿小：焦点环外扩后仍落在输入框内部，
     不会被输入框边框裁掉（此前 40px 高 + -2px 内偏移，看起来像被框切了一半）。 */
  width: 40px; height: 32px; padding: 0; font-size: 13px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: #94A3B8; cursor: pointer;
  transition: color .15s, background-color .15s;
}
.pwd__toggle:hover { color: var(--brand); background: #EFF4FF; }
/* 焦点态用内描边 + 浅底：按钮本身很小，外扩 outline 在大输入框里显得笨重，
   内描边还能保证无论输入框多高都不会被边框裁掉。 */
.pwd__toggle:focus-visible { outline: none; color: var(--brand); background: #EFF4FF; box-shadow: inset 0 0 0 1.5px var(--brand); }
.pwd__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pwd__copied { font-size: 12px; line-height: 18px; color: #15803D; }
.pwd__hint { margin: 0; min-height: 18px; font-size: 12px; line-height: 18px; color: #94A3B8; }
.pwd__hint.is-ok { color: #15803D; }
.pwd__hint.is-bad { color: #B91C1C; }

.rental-contact-card { padding:12px 14px; background:#eff5ff; border:1px solid #dae6fc; border-radius:12px; overflow-wrap:anywhere; }
.rental-return-card { padding:0; overflow:hidden; }
.rental-return-card .card__head { background:#F8FAFC; min-height:44px; }
.rental-return-card .card__head span { font-size:13px; line-height:20px; color:var(--text); overflow-wrap:anywhere; }
.rental-return-card .card__head .right .m-btn { padding:4px 12px; min-height:30px; font-size:13px; }
.rental-task-context { padding-bottom:12px; border-bottom:1px solid var(--line); }
.rental-task-context p { margin:0; }
.rental-device-text { overflow-wrap:anywhere; }
.rental-return-summary { margin:0; padding:12px 16px; overflow-wrap:anywhere; }
.rental-supplement-section { padding-top:12px; border-top:1px solid var(--line); }
.rental-form .rental-contact-card p { margin:4px 0; }
.rental-form .rental-section-title { font-size:15px; }

.login-welcome { margin: 0; font-size: 24px; line-height: 36px; font-weight: 600; text-wrap: balance; }
.login-description { margin: 10px 0 0; color: var(--text-sub); font-size: 14px; line-height: 21px; }

/* 已承接任务的双方身份卡；不包含私联操作。Web 与 App 共用。 */
.task-party-card { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8faff; }
.task-party-card__heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.task-party-card__heading h4 { margin: 0; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--text); }
.task-party-card__badge { padding: 2px 7px; border-radius: 4px; background: #edf9f1; color: #15803d; font-size: 11px; line-height: 18px; }
.task-party-card__facts { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.task-party-card__row { display: flex; align-items: baseline; gap: 12px; font-size: 13px; line-height: 21px; }
.task-party-card__row dt { flex: 0 0 64px; color: var(--text-sub); }
.task-party-card__row dd { flex: 1; min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* 任务详情、租赁表单与材料缩略图的统一展示约定（2026-10-27）。 */
.task-remark { margin: 12px 0 16px; padding: 10px 12px; border-radius: 8px; background: #f7f9fc; color: var(--text-sub); font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-distribution { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 12px 0; }
.task-distribution__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: 10px; background: #f5f7fc; font-size: 12px; color: var(--text-sub); }
.task-distribution__item strong,.task-distribution__item .strong-reset { font-size: 22px; line-height: 28px; color: var(--text); }
.task-distribution__item.is-complete { background: #edf9f1; }.task-distribution__item.is-issue { background: #fff6e6; }
.rental-action-grid { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
.rental-action-grid > .m-btn { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 14px; font-size: 14px; line-height: 22px; border-radius: 10px; }
.rental-record-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rental-claim-summary { display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid #bcd1fb; border-radius:12px; background:#eff5ff; overflow-wrap:anywhere; }
.rental-negotiation-step { display:flex; flex-direction:column; gap:4px; padding:8px 0; border-top:1px solid #d8e4f7; }
.rental-contact-card .m-between { gap: 12px; margin-bottom: 8px; }.rental-contact-card .m-between .m-btn { flex: none; min-height: 30px; padding: 4px 10px; font-size: 12px; }
.rental-inline-review { margin: 16px 0; padding: 14px; border: 1px solid #dbe5fa; background: #f6f9ff; border-radius: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.rental-task-context { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.m-form-actions { position: sticky; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 4px 20px rgba(15,23,42,.04); }
.m-form-actions .m-btn { flex: 1; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px; line-height: 22px; font-size: 14px; }
.media-thumb { position: relative; width: 100px; height: 100px; border-radius: 8px; overflow: hidden; background: #eef2f7; }
button.media-remove,.media-remove { position: absolute; top: 0; right: 0; left: auto; bottom: auto; z-index: 3; box-sizing: border-box; width: 24px; height: 24px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0 0 0 7px; background: rgba(15,23,42,.72); color: #fff; line-height: 24px; font-size: 17px; text-align: center; cursor: pointer; }
.media-remove:disabled { opacity: .45; }.media-remove::after { border: 0; }
.evidence-uploader .evidence-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.evidence-uploader .evidence-grid__item { aspect-ratio: 1 !important; min-width: 0; }
.evidence-uploader .evidence-grid__item > a,.media-video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: #dce3ed; cursor: pointer; }
.media-video-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.media-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; background: rgba(15,23,42,.25); }
.evidence-uploader .evidence-grid__item span.label { top: auto; bottom: 0; left: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.resource-file-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.resource-file-preview.media-thumb { display: block; width: 100px; height: 100px; padding: 0; }
.resource-file-preview.media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; border-radius: 0; }
.resource-file-preview.media-thumb .resource-file-preview__name { display: none; }
.certification-document--editable { position: relative; width: 100px; max-width: 100%; }
.certification-document--editable .certification-document__thumbnail { display: block; width: 100px; height: 100px; padding: 0; border-radius: 8px; overflow: hidden; }
.certification-document--editable .certification-document__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.certification-document--editable .certification-document__name { font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.certification-document--editable > .m-btn { display: none; }
.m-task-summary > p.task-remark { display: block; margin: 12px 0 4px; padding: 10px 12px; line-height: 1.7; }

/* ===== 移动端页面级操作栏：共享基类；卡内按钮与底部导航不使用此类 ===== */
.app-body .m-action-bar.m-action-bar--sticky,
.app-body .m-action-bar.m-action-bar--fixed,
.demand-page .m-action-bar.m-action-bar--sticky,
.demand-page .m-action-bar.m-action-bar--fixed,
.supplier-page .m-action-bar.m-action-bar--sticky,
.supplier-page .m-action-bar.m-action-bar--fixed {
  box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  padding: 12px; margin: 12px 0; border: 1px solid var(--line,#e5e7eb); border-radius: 16px;
  background: #fff; box-shadow: 0 4px 20px rgba(15,23,42,.06); z-index: 20;
}
.app-body .m-action-bar.m-action-bar--sticky,
.demand-page .m-action-bar.m-action-bar--sticky,
.supplier-page .m-action-bar.m-action-bar--sticky { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom,0px)); }
.app-body .m-action-bar.m-action-bar--page,
.demand-page .m-action-bar.m-action-bar--page,
.supplier-page .m-action-bar.m-action-bar--page { margin-left: var(--app-page-gap,16px); margin-right: var(--app-page-gap,16px); }
/* 2026-10-27：仅需求方订单详情的整单操作区改为普通文档流。
   不使用 fixed / sticky，保留页面级间距与安全区；不改变其他页面操作栏。 */
.app-body .m-order-detail .order-detail-footer--flow {
  position: static; left: auto; right: auto; bottom: auto; z-index: auto;
  margin-top: 24px; margin-bottom: calc(16px + env(safe-area-inset-bottom,0px));
}
.app-body .m-action-bar.m-action-bar--fixed,
.demand-page .m-action-bar.m-action-bar--fixed,
.supplier-page .m-action-bar.m-action-bar--fixed { position: fixed; left: var(--app-page-gap,16px); right: var(--app-page-gap,16px); bottom: calc(8px + env(safe-area-inset-bottom,0px)); margin: 0; }
.app-body .m-action-bar.m-action-bar--sticky > .m-btn,
.demand-page .m-action-bar.m-action-bar--sticky > .m-btn,
.supplier-page .m-action-bar.m-action-bar--sticky > .m-btn,
.app-body .m-action-bar.m-action-bar--fixed > .m-btn,
.demand-page .m-action-bar.m-action-bar--fixed > .m-btn,
.supplier-page .m-action-bar.m-action-bar--fixed > .m-btn {
  flex: 1 1 0; width: auto; min-width: 0; height: auto; min-height: 44px; margin: 0; padding: 10px 12px;
  border-radius: 10px; font-size: 14px; line-height: 22px; white-space: normal; overflow-wrap: anywhere;
}
.app-body .m-order-detail .m-footer.m-action-bar,
.demand-page .m-order-detail .m-footer.m-action-bar,
.supplier-page .m-order-detail .m-footer.m-action-bar { flex-direction: column; align-items: stretch; }
.app-body .m-action-bar .m-footer__row > .m-btn,
.demand-page .m-action-bar .m-footer__row > .m-btn,
.supplier-page .m-action-bar .m-footer__row > .m-btn { flex: 1 1 0; min-width: 0; height: auto; min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 22px; }
.app-body .m-action-bar.m-action-bar--summary,
.demand-page .m-action-bar.m-action-bar--summary,
.supplier-page .m-action-bar.m-action-bar--summary { flex-wrap: wrap; }
.app-body .m-action-bar.m-action-bar--summary > div,
.demand-page .m-action-bar.m-action-bar--summary > div,
.supplier-page .m-action-bar.m-action-bar--summary > div { flex: 1 1 110px; min-width: 0; overflow-wrap: anywhere; }
.app-body .m-action-bar.m-action-bar--summary > .m-btn,
.demand-page .m-action-bar.m-action-bar--summary > .m-btn,
.supplier-page .m-action-bar.m-action-bar--summary > .m-btn { flex: 0 1 auto; min-width: 114px; max-width: 100%; }
.app-body .order-composer--mobile .order-composer-footer.m-action-bar { margin: 12px 0; border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.app-body .order-composer--mobile .m-action-bar .order-footer-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 8px; }
.app-body .order-composer--mobile .m-action-bar .order-footer-buttons > .order-button { flex: 1; width: auto; min-width: 0; height: auto; min-height: 44px; padding: 10px 8px; border-radius: 10px; font-size: 14px; line-height: 22px; white-space: normal; }
.app-body .order-composer--intro .m-action-bar .order-footer-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }
.order-cancel .order-cancel__footer.m-action-bar { box-sizing: border-box; bottom: 0; margin: 16px 0 0; padding: 12px; border: 1px solid var(--line,#e5e7eb); border-radius: 16px; box-shadow: 0 4px 20px rgba(15,23,42,.06); }
.order-cancel .order-cancel__selection > .order-cancel__footer.m-action-bar { margin-top: auto; }
.order-cancel .order-cancel__footer.m-action-bar > .order-cancel__button { min-height: 44px; height: auto; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 22px; }
.app-body .m-action-bar:empty { display: none; }

/* BEGIN order-detail-finance */
.finance-title { display: block; margin: 0; font-size: 16px; line-height: 24px; font-weight: 650; color: var(--text); }
.finance-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--text-sub); }
.finance-total strong, .finance-total-amount { font-size: 28px; line-height: 36px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-note { margin: 5px 0 0; font-size: 12px; line-height: 19px; color: var(--text-sub); overflow-wrap: anywhere; }
.finance-lines { display: grid; gap: 10px; margin-top: 14px; }
.finance-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; font-size: 14px; line-height: 22px; }
.finance-row > :first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.finance-row > :last-child { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.finance-row > .finance-note { margin-top: 0; }
.finance-value { font-weight: 600; }
.finance-refunds { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.finance-refunds > .finance-row { margin-top: 12px; }
.finance-refund-item { margin-top: 12px; padding: 12px; border-radius: 10px; background: #f7f9fc; }
.finance-refund-status { margin: 4px 0 0; font-size: 12px; line-height: 19px; color: var(--text-sub); }
.finance-refund-status.is-failed { color: #b91c1c; }
.finance-disclosure { margin-top: 10px; }
.finance-disclosure > summary { cursor: pointer; font-size: 12px; line-height: 24px; color: var(--text-sub); }
.finance-disclosure .kv { margin-top: 8px; }
.finance-deposit-item, .finance-task { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.finance-deposit-item > .m-between { flex-wrap: wrap; gap: 8px; }
.finance-deposit-result { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #fff7ed; font-size: 14px; line-height: 22px; color: #9a4d0c; }
.finance-ledger { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.finance-ledger .finance-row { font-size: 12px; }
/* END order-detail-finance */

/* 主体默认标识：企业与个人均无需上传照片。 */
.m-profile-hero__avatar--company { border-radius: 14px; box-shadow: inset 0 0 0 1px #dfe8fb; }
.m-profile-hero__avatar--person { border-radius: 50%; background: #edf4ff; }
.m-profile-hero__avatar .m-icon { width: 23px; height: 23px; }
.task-exception-page .m-claim-field { display: flex; flex-direction: column; gap: 8px; }
.task-exception-page .input { width: 100%; box-sizing: border-box; }
.task-exception-page .card { min-width: 0; }