/* Auto-booking · 前端原型样式 */

:root {
  --bg: #f0f4f8;
  --surface: #ffffff;
  --sidebar: #0d1b2a;
  --sidebar-text: #8899aa;
  --sidebar-active: #ffffff;
  --primary: #1a6fb5;
  --primary-dark: #145a94;
  --danger: #dc3545;
  --warn: #e67e22;
  --success: #27ae60;
  --text: #1a2332;
  --muted: #6b7c93;
  --border: #e2e8f0;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  background: var(--sidebar);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-icon { font-size: 28px; }
.brand-title { color: #fff; font-weight: 700; font-size: 15px; }
.brand-sub { font-size: 11px; color: var(--sidebar-text); }

.nav { flex: 1; padding: 12px 8px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--sidebar-text);
  font-size: 14px;
  margin-bottom: 2px;
  transition: background .15s;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.nav-item.active { background: rgba(26,111,181,.4); color: var(--sidebar-active); font-weight: 600; }
.nav-icon { font-size: 16px; width: 20px; text-align: center; }

.status-unconfigured, .status-pending { background: #eef0f3; color: #5c6370; }
.form-group .select { width: 100%; }

.main-area {
  margin-left: 220px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}
.page-title { font-size: 18px; font-weight: 600; }
.user-pill {
  background: var(--bg);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--muted);
}

.content { padding: 24px; flex: 1; min-width: 0; }

/* ── Stats ──────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.stat-card.highlight { border-color: var(--primary); background: linear-gradient(135deg, #f0f7ff, #fff); }
.stat-card.danger-card { border-color: var(--danger); }
.stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.stat-value { font-size: 28px; font-weight: 700; line-height: 1.2; }
.stat-value.warn { color: var(--warn); }
.stat-value.danger { color: var(--danger); }
.stat-unit { font-size: 16px; color: var(--muted); font-weight: 400; }
.stat-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Panels ─────────────────────────────────────── */
.panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.panel-flush { padding: 0; overflow: hidden; }
.bookings-table-panel { overflow-x: auto; }
.list-loader { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 72px; color: var(--muted); font-size: 14px; }
.list-loader[hidden], .list-loader [hidden] { display: none; }
.list-loader-spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--primary, #1d70b7); border-radius: 50%; animation: list-loader-spin .7s linear infinite; }
@keyframes list-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .list-loader-spinner { animation-duration: 1.5s; } }
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.panel h2, .panel h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.panel-header h2 { margin-bottom: 0; }
.panel-header-subtitle {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  margin-left: 6px;
}
.carrier-rate-list { display: flex; flex-direction: column; gap: 14px; }
.carrier-rate-row {
  display: grid;
  grid-template-columns: minmax(126px, 1.15fr) minmax(120px, 2.4fr) 52px;
  align-items: center;
  gap: 12px;
}
.carrier-rate-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.carrier-rate-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.carrier-rate-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf3;
}
.carrier-rate-fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #36b878 0%, #1f9d61 100%);
  transition: width .25s ease;
}
.carrier-rate-fill.is-mid { background: linear-gradient(90deg, #f2bf4c 0%, #e59b16 100%); }
.carrier-rate-fill.is-low { background: linear-gradient(90deg, #ef8b83 0%, #df514b 100%); }
.carrier-rate-value { font-size: 13px; font-weight: 700; text-align: right; color: #1f9d61; }
.carrier-rate-value { white-space: nowrap; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.dashboard-heading h2 { font-size:21px; margin-bottom:5px; }
.dashboard-heading p { font-size:13px; }
.dashboard-heading .btn { flex-shrink:0; }
.dashboard-ordinary .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dashboard-ordinary .stat-card { min-height:124px; display:flex; flex-direction:column; justify-content:center; }
.dashboard-ordinary .dashboard-records { grid-template-columns:minmax(0,1fr); }
.dashboard-ordinary .grid-2 { gap:20px; margin-bottom:20px; }
.dashboard-ordinary .grid-2 > .panel { margin-bottom:0; }
.dashboard-ordinary .dashboard-recent-quotes { display:flex; flex-direction:column; }
.dashboard-quote-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:220px; text-align:center; padding:24px 16px; }
@media(max-width:640px) {
  .dashboard-heading { align-items:flex-start; flex-direction:column; }
  .dashboard-ordinary .stats-grid { grid-template-columns:minmax(0,1fr); }
  .dashboard-ordinary .stat-card { min-height:110px; }
}

/* ── Tables ─────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.bookings-table td { white-space: nowrap; }
.bookings-table { min-width: 980px; }
.data-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
  white-space: nowrap;
}
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f8fafc; }
.data-table.compact td, .data-table.compact th { padding: 8px 12px; }
.bookings-table .table-actions {
  width: 132px;
  min-width: 132px;
  vertical-align: middle;
}
.bookings-table .table-actions-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.bookings-table .table-actions-stack .inline-form {
  display: block;
}
.bookings-table .table-actions-stack > a,
.bookings-table .table-actions-stack .inline-form,
.bookings-table .table-actions-stack .btn {
  width: 100%;
}
.bookings-table .table-actions-stack .btn {
  justify-content: center;
  min-height: 34px;
}

.row-best td { background: #f0faf4 !important; }
.row-best td:first-child { border-left: 3px solid var(--success); }

.col-rank { width: 40px; text-align: center; }
.col-price { min-width: 120px; }
.rank-badge {
  background: var(--success);
  color: #fff;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.price { font-size: 16px; font-weight: 700; }
.price-best { color: var(--success); font-size: 18px; }
.price-diff { font-size: 11px; color: var(--warn); display: block; }
.price-lg { font-size: 20px; font-weight: 700; color: var(--primary); }
.quote-table .price { font-size: 15px; }
.quote-table .price-best { font-size: 17px; }
.quote-table .quote-actions-header,
.quote-table .quote-actions-cell { width: 184px; min-width: 184px; }
.quote-table .quote-actions-cell { vertical-align: bottom; }
.quote-table .quote-actions {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max-content;
  margin: 0 auto;
}
.quote-table .quote-actions .btn {
  width: auto;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
  justify-content: center;
}
.quote-table .quote-action-refresh { grid-column: 1; grid-row: 1; }
.quote-table .quote-action-sailings { grid-column: 2; grid-row: 1; }
.quote-table .quote-action-book { grid-column: 1; grid-row: 2; }

/* ── Carrier badges ─────────────────────────────── */
.carrier-badge {
  display: inline-block;
  background: var(--c, #666);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .5px;
}
.carrier-badge.sm { font-size: 10px; padding: 2px 6px; }
.carrier-badge.lg { font-size: 14px; padding: 6px 12px; }
.carrier-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.carrier-name { font-size: 13px; color: var(--muted); white-space: nowrap; }
.carrier-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.vessel { font-size: 13px; font-weight: 500; }
.cosco-inventory { margin-left: 8px; color: #d93025; font-weight: 800; white-space: nowrap; }

/* ── Badges ─────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.badge.sm { font-size: 11px; padding: 2px 7px; }
.badge.lg { font-size: 13px; padding: 5px 14px; }

.status-active, .status-payment_confirmed { background: #d4edda; color: #155724; }
.status-expired, .status-cancelled { background: #f8d7da; color: #721c24; }
.status-cancel_requested { background: #fde2b8; color: #8a4b08; }
.status-awaiting_payment_consent { background: #fff3cd; color: #856404; }
.status-paying { background: #d9ecff; color: #145b99; }
.status-booking, .status-paying { background: #cce5ff; color: #004085; }
.status-failed_manual { background: #f8d7da; color: #721c24; font-weight: 700; }
.status-booking_failed, .status-payment_failed { background: #ffe0b2; color: #e65100; }
.status-draft { background: #e9ecef; color: #495057; }
.status-unconfigured { background: #e9ecef; color: #6c757d; }
.status-verify_failed, .status-locked { background: #f8d7da; color: #721c24; font-weight: 600; }

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #c82333; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--bg); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }

.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.actions { display: flex; gap: 6px; }
.tasks-table { min-width: 1120px; }
.tasks-actions-header { width: 188px; }
.tasks-actions-cell { width: 188px; vertical-align: middle; }
.tasks-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(78px, 1fr));
  grid-auto-rows: 32px;
  gap: 6px;
  align-items: stretch;
}
.tasks-actions .inline-form { display: flex; min-width: 0; }
.tasks-actions .btn { width: 100%; height: 32px; justify-content: center; box-sizing: border-box; }
.task-watch-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.task-watch-interval { color: var(--muted); font-size: 12px; line-height: 1.2; white-space: nowrap; }

/* ── Compare page ───────────────────────────────── */
.compare-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}
.route-display { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.route-arrow { color: var(--primary); font-size: 20px; }
.port-chip code { font-size: 11px; background: var(--bg); padding: 1px 5px; border-radius: 3px; margin-left: 4px; color: var(--muted); }
.compare-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: var(--bg); padding: 4px 10px; border-radius: 20px; font-size: 12px; color: var(--muted); }
.compare-actions { display: flex; gap: 8px; align-items: center; }
.select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--surface); }

.best-price-banner {
  background: linear-gradient(90deg, #1a6fb5, #27ae60);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.best-label { font-weight: 600; }
.best-carrier { background: rgba(255,255,255,.2); padding: 2px 10px; border-radius: 4px; font-weight: 700; }
.best-amount { font-size: 22px; font-weight: 700; }

/* ── Recent quote results chart ─────────────────── */
.recent-quote-chart-scroll { overflow-x: auto; }
.recent-quote-chart {
  display: grid;
  align-items: end;
  gap: 10px;
  width: 100%;
  min-width: 560px;
  min-height: 250px;
  padding: 10px 0 2px;
  box-sizing: border-box;
}
.recent-quote-item {
  display: grid;
  grid-template-rows: 54px 116px auto;
  align-items: end;
  min-width: 0;
  text-align: center;
}
.recent-quote-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
  line-height: 1.2;
}
.recent-quote-value strong {
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
}
.recent-quote-bar-area {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 116px;
  border-bottom: 1px solid var(--border);
}
.recent-quote-bar {
  width: min(42px, 56%);
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--primary), #a8d4f5);
  transition: height .3s;
}
.recent-quote-empty-bar {
  width: min(42px, 56%);
  height: 4px;
  border-top: 1px dashed var(--border);
}
.recent-quote-ports {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.recent-quote-ports span { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .recent-quote-chart { gap: 4px; }
  .recent-quote-value strong { font-size: 10px; }
  .recent-quote-ports { font-size: 9px; }
}

/* ── Session list ───────────────────────────────── */
.session-list { display: flex; flex-direction: column; gap: 8px; }
.session-row {
  display: grid;
  grid-template-columns: 60px 1fr auto 80px;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.session-row:last-child { border-bottom: none; }
.text-right { text-align: right; }

/* ── Detail ─────────────────────────────────────── */
.breadcrumb-trail { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.detail-list { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; }
.detail-list dt { color: var(--muted); font-size: 13px; }
.detail-list dd { font-size: 14px; }
.panel-hint { margin: -4px 0 12px; }
.order-confirm-summary { margin-top: 4px; }
.order-confirm-summary .consent-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.order-confirm-summary .consent-row:last-child { border-bottom: none; }
.order-confirm-summary .consent-row span:first-child { color: var(--muted); flex-shrink: 0; }

.detail-header-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
}
.detail-header-left { display: flex; align-items: center; gap: 16px; }
.detail-header-left h2 { font-size: 20px; }
.status-border-failed_manual { border-left-color: var(--danger) !important; }
.status-border-booked { border-left-color: var(--success) !important; }
.status-border-awaiting_payment_consent { border-left-color: var(--warn) !important; }
.status-border-booking_failed, .status-border-payment_failed { border-left-color: var(--danger) !important; }
.status-border-payment_confirmed { border-left-color: var(--success) !important; }

.locode { font-family: monospace; font-size: 11px; background: var(--bg); padding: 1px 5px; border-radius: 3px; color: var(--primary); }
.order-no { font-size: 13px; }

/* ── Filter bar ─────────────────────────────────── */
.booking-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.filter-bar { display: flex; gap: 8px; margin-bottom: 0; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
  text-decoration: none;
}
.filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.filter-chip.danger.active { background: var(--danger); border-color: var(--danger); }
.notice-box { margin-bottom: 16px; padding: 10px 14px; border: 1px solid #b8dfc5; border-radius: 8px; background: #eefaf1; color: #196b37; }

/* ── Timeline ───────────────────────────────────── */
.timeline { padding-left: 8px; }
.timeline-item { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 7px; top: 20px; bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  margin-top: 2px;
}
.timeline-item.warn .timeline-dot { background: var(--warn); }
.timeline-title { font-weight: 500; font-size: 14px; }
.timeline-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Step timeline ──────────────────────────────── */
.step-timeline { display: flex; flex-direction: column; gap: 0; }
.step-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.step-item:last-child { border-bottom: none; }
.step-indicator {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  background: var(--bg);
  color: var(--muted);
}
.step-done .step-indicator { background: #d4edda; color: var(--success); }
.step-running .step-indicator { background: #cce5ff; color: var(--primary); animation: pulse 1s infinite; }
.step-failed .step-indicator { background: #f8d7da; color: var(--danger); }
.step-label { font-weight: 500; font-size: 14px; }
.step-status { font-size: 12px; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── Consent ────────────────────────────────────── */
.consent-list { display: flex; flex-direction: column; gap: 12px; }
.consent-item { border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.consent-stage { font-weight: 600; margin-bottom: 4px; }
.consent-snapshot { font-size: 11px; background: var(--bg); padding: 8px; border-radius: 4px; margin-top: 8px; overflow: auto; }

.booking-card { padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.booking-card-header { margin: 0; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); background: #fbfcfe; }
.booking-recovery-panel > .recovery-action { margin: 0; }
.booking-card-status-expired .booking-card-header, .booking-card-status-cancelled .booking-card-header { background: #fff8f8; }
.booking-recovery-quote {display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px;max-width:100%;}
.booking-recovery-quote code {overflow-wrap:anywhere;}
.booking-confirmation-number { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: 100%; margin: 8px 0; padding: 10px 14px; border: 1px solid #b8dfc5; border-radius: 8px; background: #eef9f1; color: #176b36; font-size: 14px; line-height: 1.6; text-align: left; }
.booking-confirmation-state { font-weight: 700; }
.booking-confirmation-reference { display: inline-flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.booking-confirmation-number code { padding: 0; background: transparent; color: inherit; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.booking-card-failure-reason { flex: 1 1 240px; min-width: 0; color: var(--muted); font-size: 13px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.booking-status-note { margin: 0; padding: 15px 16px; color: var(--muted); font-size: 13px; }
.booking-status-note strong { color: var(--text); font-weight: 600; }
.booking-evidence-links { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; padding: 16px; background: #fbfcfe; }
.evidence-action { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 54px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 0 2px 8px rgba(26, 58, 92, .05); transition: border-color .15s, box-shadow .15s, transform .15s; }
.evidence-action:hover { border-color: #9fc4e4; box-shadow: 0 5px 14px rgba(26, 58, 92, .11); transform: translateY(-1px); }
.evidence-action-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; font-size: 15px; font-weight: 700; }
.evidence-action-video .evidence-action-icon { background: #e7f1fb; color: var(--primary); }
.evidence-action-recovery .evidence-action-icon { background: #eeeafb; color: #7154b3; }
.evidence-action-image .evidence-action-icon { background: #eaf8ef; color: #238447; }
.evidence-action-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.evidence-action-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.evidence-action-copy small { color: var(--muted); font-size: 11px; }
.evidence-action-arrow { color: var(--muted); font-size: 16px; }
.inline-form { display: inline; }
.consent-panel { padding: 16px; background: var(--bg); border-radius: 8px; }
.consent-panel h4 { margin-bottom: 12px; font-size: 15px; }
.payment-order-number { margin-bottom: 8px; line-height: 1.35; }
.payment-carrier-link { margin-bottom: 14px; line-height: 1; }
.payment-action-note { margin: 16px 0 8px; line-height: 1.4; }
.payment-confirm-action { margin: 0; line-height: 1; }
.payment-cancel-action { margin-top: 8px; }
.reservation-countdown {
  display: inline-block;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid #f0c36d;
  border-radius: 6px;
  background: #fff8e6;
  color: #8a5a00;
}
.reservation-countdown strong { font-variant-numeric: tabular-nums; font-size: 16px; }
.reservation-countdown.countdown-expired { border-color: #e3a6ad; background: #fff0f1; color: #9b1c2a; }
.reservation-countdown-inline {
  display: inline-block;
  margin-left: 6px;
  color: #8a5a00;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.reservation-countdown-inline.countdown-expired { color: #9b1c2a; }
.consent-summary { font-size: 15px; margin-bottom: 8px; }
.consent-detail { margin-bottom: 16px; }
.consent-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.consent-row:last-child { border-bottom: none; }
.checkbox-label { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 14px; cursor: pointer; }
.container-option-weight { color: var(--muted, #718096); font-size: 13px; font-weight: 400; white-space: nowrap; }
.container-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.container-type-heading { display: block; color: var(--muted, #718096); font-size: 13px; }
.container-type-column .checkbox-label { flex-wrap: wrap; }
.container-type-column .checkbox-label.is-unavailable { opacity: .45; cursor: not-allowed; }
.warn-box { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 10px 14px; margin: 12px 0; color: #856404; font-size: 14px; }
.success-box { background: #f0faf4; border: 1px solid #c3e6cb; border-radius: 8px; padding: 10px 14px; margin: 12px 0; color: #216e3a; font-size: 14px; }
.danger-panel { background: #fff5f5; border: 1px solid #f5c6cb; }
.success-panel { background: #f0faf4; border: 1px solid #c3e6cb; text-align: center; padding: 24px; }
.alert-inline.danger { color: var(--danger); font-weight: 600; font-size: 13px; }
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .45);
}
.modal-overlay[hidden] { display: none; }
#payment-password-modal { z-index: 10000; }
.modal-card {
  width: min(460px, 100%);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 17px; }
.modal-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.modal-body { padding: 20px; }
.payment-password-summary { padding: 12px 14px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 14px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.modal-body .payment-password-actions { flex-direction: row; gap: 12px; }
.payment-password-actions .btn { flex: 1; justify-content: center; }
.payment-password-settings { margin-top: 24px; }
.payment-password-settings > .muted { margin-bottom: 20px; }
.payment-password-settings .payment-password-fields { grid-template-columns: 1fr; max-width: 460px; }
.payment-password-settings .form-group { margin-bottom: 0; }
.payment-password-settings .form-actions { margin-top: 16px; }
.alert-test-pending { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.alert-test-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.alert-test-row:last-of-type { border-bottom: 0; }
.alert-test-error { padding: 10px 14px; border: 1px solid #f5c6cb; border-radius: 8px; background: #fff5f5; color: var(--danger); }
.alert-test-spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; flex: 0 0 auto; }
.diagnostics-connectivity-header { align-items: center; }
.diagnostics-title-group { display: flex; align-items: center; gap: 14px; }
.diagnostics-title-group h3 { margin-bottom: 0; }

/* ── Drawer ─────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  animation: fadeIn .2s;
}
.drawer {
  width: 480px;
  max-width: 100vw;
  background: var(--surface);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideIn .25s ease;
}
.drawer[aria-label="下单"] { width: 576px; }
.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.drawer-header h3 { font-size: 18px; font-weight: 600; }
.drawer-close {
  background: none; border: none;
  font-size: 18px; cursor: pointer;
  color: var(--muted); padding: 4px 8px;
  border-radius: 4px;
}
.drawer-close:hover { background: var(--bg); }
.drawer-body { flex: 1; overflow-y: auto; padding: 24px; }
.sailing-offers-drawer { width: min(1080px, 96vw); }
.sailing-offers-drawer-multibox { width: min(1000px, 94vw); }
.sailing-offers-drawer .drawer-header { padding: 20px 26px; }
.sailing-offers-drawer .drawer-header h3 { font-size: 20px; }
.sailing-offers-drawer .drawer-header p { margin: 7px 0 0; font-size: 13px; }
.sailing-offers-body { padding: 18px 26px 24px; }
.sailing-offers-drawer-multibox .sailing-offers-body { padding-left: 14px; padding-right: 14px; }
.sailing-offers-caption { margin-bottom: 12px; font-size: 13px; }
.sailing-offers-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.sailing-offers-table { min-width: 820px; }
.sailing-offers-table th,
.sailing-offers-table td { padding: 13px 14px; vertical-align: middle; }
.sailing-offers-table.multibox-sailings-table th,
.sailing-offers-table.multibox-sailings-table td { padding: 9px 8px; }
.sailing-offers-table th { padding-top: 12px; padding-bottom: 12px; }
.sailing-offers-table td:first-child { min-width: 170px; }
.sailing-offer-best td { background: #f0faf5 !important; }
.sailing-offer-best td:first-child { border-left: 3px solid var(--success); }
.sailing-offer-totals { min-width: 125px; white-space: nowrap; font-size: 13px; line-height: 1.5; }
.sailing-offer-totals > div + div { margin-top: 4px; }
.sailing-sort-note { display: inline; margin-left: 4px; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.sailing-offers-empty { padding: 56px 20px; }
.multibox-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.multibox-result-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 18px 0 12px; color: var(--muted); font-size: 13px; }
.multibox-result-heading strong { color: var(--text); font-size: 16px; }
.multibox-result-note { margin: 12px 0 0; line-height: 1.7; }
.multibox-quote-table { table-layout: fixed; }
.multibox-quote-table .multibox-sailing-heading,
.multibox-quote-table .multibox-sailing-cell { min-width: 0; }
.multibox-quote-table .multibox-sailing-cell { line-height: 1.55; }
.multibox-quote-table .quote-error { display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.multibox-sailing-dates { display: flex; flex-direction: column; gap: 0; margin-top: 2px; font-size: 13px; }
.multibox-sailing-dates span { display: block; white-space: nowrap; }
.multibox-quote-table .multibox-rate-heading,
.multibox-quote-table .multibox-rate-cell { min-width: 0; }
.quote-table.multibox-quote-table .quote-actions-cell { width: 170px; min-width: 170px; }
.multibox-rate-heading span { margin-left: 4px; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.multibox-primary-rate { background: #f0f7fc !important; }
.multibox-price { white-space: nowrap; font-size: 14px; font-weight: 700; line-height: 1.5; }
.multibox-price-usd { color: var(--text); font-size: 15px; }
.multibox-price-other { color: var(--muted); font-size: 14px; font-weight: 400; }
.multibox-price-best { color: var(--success); font-size: 16px; font-weight: 700; }
.multibox-result-time { text-align: center; line-height: 1.6; white-space: nowrap; }
.multibox-result-time span { display: block; }
.multibox-book-button { margin-top: 8px; }
.multibox-actions-cell { min-width: 142px; vertical-align: middle !important; }
.multibox-row-actions { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 7px; }
.multibox-row-actions .btn { min-width: 78px; white-space: nowrap; justify-content: center; }
.multibox-action-refresh { grid-column: 1; grid-row: 1; }
.multibox-action-sailings { grid-column: 2; grid-row: 1; }
.multibox-action-book { grid-column: 1; grid-row: 2; }
.multibox-action-fees { grid-column: 2; grid-row: 2; }
.multibox-sailings-table { min-width: 930px; table-layout: fixed; }
.multibox-sailings-table .multibox-sailing-cell { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.multibox-sailings-table th { vertical-align: bottom; }
.multibox-sailings-table .multibox-rate-cell { min-width: 0; }
.multibox-sailings-table .multibox-book-button { display: block; min-width: 78px; }
.sailing-offers-table .sailing-info-column { min-width: 210px; }
.sailing-offers-table .sailing-rate-column { min-width: 110px; }
.sailing-offers-table .sailing-result-time-column { min-width: 64px; }
.sailing-offers-table .sailing-action-column { min-width: 92px; }
.sailing-offers-table .sailing-dates { color: var(--muted); font-size: 12px; white-space: nowrap; }
.sailing-offers-table .sailing-fee-action-cell { min-width: 92px; }
.sailing-offers-table .sailing-order-button { min-width: 78px; }
.sailing-offer-best td { background: transparent !important; }
.sailing-offer-best td:first-child { border-left: 0; }
.sailing-offer-actions { grid-template-columns: 88px; gap: 7px; }
.sailing-offer-actions .multibox-action-book,
.sailing-offer-actions .multibox-action-fees { grid-row: 1; width: 100%; }
.sailing-offer-actions .multibox-action-book { grid-column: 1; grid-row: 1; }
.sailing-offer-actions .multibox-action-fees { grid-column: 1; grid-row: 2; }
.sailing-offer-result-time { font-size: 12px; }
.sailing-offers-table .multibox-price { font-size: 13px; line-height: 1.35; }
.sailing-offers-table .multibox-price-usd { font-size: 14px; }
.sailing-offers-table .sailing-offer-totals > div + div { margin-top: 2px; }
.sailing-offers-table .multibox-sailing-dates { font-size: 12px; }
.sailing-offers-table .sailing-sort-note { display: block; margin: 2px 0 0; }
.sailing-offers-table .sailing-offer-actions { grid-template-columns: 76px; gap: 5px; }
.sailing-offers-table .sailing-offer-actions .btn { min-width: 0; padding: 5px 8px; font-size: 12px; }
.sailing-offers-note { margin: 12px 0 0; }
.sailing-fee-drawer { width: min(1120px, 96vw); }
.sailing-fee-drawer .drawer-header { padding: 24px 28px 16px; }
.sailing-fee-header { align-items: flex-start; }
.sailing-fee-title { flex: 1; }
.sailing-fee-title h3 { display: inline-block; margin: 0; padding: 0 0 11px; border-bottom: 2px solid #3f73dc; color: #376fd4; font-size: 18px; font-weight: 500; }
.sailing-fee-title p { margin: 12px 0 0; line-height: 1.6; }
.sailing-detail-tabs { display: flex; gap: 28px; flex-wrap: wrap; }
.sailing-detail-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 11px; font-size: 18px; color: var(--text); cursor: pointer; }
.sailing-detail-tabs button[aria-selected="true"] { color: #376fd4; border-bottom-color: #3f73dc; }
.sailing-fee-body [data-detail-panel][hidden] { display: none; }
.carrier-route-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; padding: 12px 0; }
.carrier-route-event { border-left: 2px solid #dbe4ef; padding: 0 0 24px 22px; line-height: 1.8; }
.carrier-route-event p { margin: 4px 0; }
.carrier-detail-card { border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 14px; }
.carrier-detail-card h4 { margin: 0 0 12px; }
.carrier-detail-card dl { margin: 0; }
.carrier-detail-card dl > div { display: grid; grid-template-columns: 125px 1fr; gap: 10px; margin: 7px 0; }
.carrier-detail-card dt { color: var(--muted); }
.carrier-detail-card dd { margin: 0; }
.carrier-detail-table { width: 100%; min-width: 550px; }
.carrier-detail-remarks-table { min-width: 940px; table-layout: fixed; }
.carrier-detail-remarks-table th:nth-child(1) { width: 185px; }
.carrier-detail-remarks-table th:nth-child(2) { width: 65px; }
.carrier-detail-remarks-table th:nth-child(3) { width: 95px; }
.carrier-detail-remarks-table th:nth-child(4) { width: 90px; }
.carrier-detail-remarks-table th:nth-child(5) { width: 70px; }
.carrier-detail-remarks-table th:nth-child(6) { width: 100px; }
.carrier-detail-remark summary { cursor: pointer; }
.carrier-detail-remark p { margin: 10px 0 0; overflow-wrap: anywhere; }
.carrier-condition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 18px 0; }
.carrier-equipment-detail { margin-bottom: 28px; }
.carrier-equipment-detail > h4 { margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.carrier-detail-note { white-space: pre-line; line-height: 1.8; }
@media (max-width: 800px) { .carrier-route-layout { grid-template-columns: 1fr; } }
.sailing-fee-body { padding: 20px 28px 28px; }
.sailing-fee-group { margin-bottom: 18px; }
.sailing-fee-table-wrap { overflow-x: auto; background: var(--surface); }
.sailing-fee-table { min-width: 700px; width: 100%; table-layout: auto; }
.sailing-fee-table th { background: #e7e9ed; color: var(--text); font-size: 13px; text-transform: none; letter-spacing: 0; }
.sailing-fee-table th,
.sailing-fee-table td { padding: 11px 13px; vertical-align: middle; }
.sailing-fee-table .sailing-fee-name-heading,
.sailing-fee-table .sailing-fee-name { width: 38%; min-width: 250px; }
.sailing-fee-name strong { display: block; font-weight: 550; }
.sailing-fee-flags { display: flex; gap: 5px; margin-top: 4px; }
.sailing-fee-payment,
.sailing-fee-unit { white-space: nowrap; color: var(--muted); }
.sailing-fee-box-heading { min-width: 105px; }
.sailing-fee-amount-cell { min-width: 105px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sailing-fee-charge + .sailing-fee-charge { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--border); }
.sailing-fee-charge strong { display: block; font-size: 13px; font-weight: 500; }
.sailing-fee-charge small { display: block; margin-top: 2px; font-size: 11px; }
.sailing-fee-total { margin-top: 20px; padding: 15px 0 0; border-top: 1px solid var(--border); }
.sailing-fee-total h4 { margin: 0 0 12px; font-size: 15px; font-weight: 650; }
.sailing-fee-rate-grid { display: flex; gap: 28px; flex-wrap: wrap; }
.sailing-fee-rate-card { display: flex; flex-direction: column; gap: 4px; min-width: 120px; padding: 0; font-variant-numeric: tabular-nums; }
.sailing-fee-rate-card strong { margin-bottom: 2px; color: var(--muted); font-size: 12px; }
.sailing-fee-rate-card .sailing-fee-converted { margin-top: 4px; color: var(--text); font-size: calc(1em + 1px); font-weight: 700; white-space: nowrap; }
.sailing-fee-conversion-missing { margin-top: 4px; font-size: 12px; }
.sailing-fee-source { margin-top: 16px; }
@media (max-width: 700px) {
  .sailing-offers-drawer { width: 100vw; }
  .sailing-offers-body,
  .sailing-fee-body { padding: 14px; }
  .sailing-fee-drawer { width: 100vw; }
  .multibox-row-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.drawer-steps {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.dstep {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
  border-right: 1px solid var(--border);
}
.dstep:last-child { border-right: none; }
.dstep.active { background: var(--primary); color: #fff; font-weight: 600; }
.dstep.done { background: #d4edda; color: var(--success); }

.quote-preview {
  background: var(--bg);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 20px;
}
.quote-preview-row { display: flex; gap: 12px; font-size: 13px; margin-bottom: 4px; }
.quote-preview-price { font-size: 22px; font-weight: 700; color: var(--primary); margin-top: 8px; }

.form-section { border: none; margin-bottom: 16px; }
.form-section legend { font-weight: 600; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  transition: border-color .15s;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,111,181,.15); }
[hidden] { display: none !important; }
.port-picker { position: relative; }
.port-picker-input { display: block; }
.port-picker-listbox {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: min(360px, 55vh);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(19, 39, 62, .16);
}
.port-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.port-picker-option:hover, .port-picker-option.is-active { background: var(--bg); }
.port-picker-option[aria-selected="true"] .port-picker-option-names { color: var(--primary); }
.port-picker-option-names { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.port-picker-option-names strong { font-weight: 600; }
.port-picker-option-en { color: var(--text, #1f2937); }
.port-picker-option code { color: var(--primary); font-size: 12px; font-weight: 700; }
.port-picker-option-country { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 600; }
.port-picker-empty { padding: 12px 10px; color: var(--muted); font-size: 13px; }
.form-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.settings-form .form-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; }
.input-sm { padding: 4px 8px; font-size: 12px; min-width: 72px; }
.select-sm { padding: 4px 8px; font-size: 12px; }
.master-cell-form { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.master-cell-form .checkbox-label { margin: 0; gap: 4px; }

.processing-panel { text-align: center; padding: 40px 20px; }
.mini-steps { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.mini-steps span { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: var(--bg); color: var(--muted); }
.mini-steps .done { background: #d4edda; color: var(--success); }
.mini-steps .running { background: #cce5ff; color: var(--primary); }
.booking-processing-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 20px;
}
.booking-processing-panel .spinner { margin: 0 auto 16px; }
.booking-processing-panel > p:first-of-type { margin: 0 0 18px; line-height: 1.5; }
.booking-processing-panel > p.muted { max-width: 100%; margin: 0; line-height: 1.6; }
.booking-processing-panel .mini-steps { gap: 8px; margin: 20px 0 0; }
.booking-processing-panel .mini-steps span { padding: 5px 10px; border-radius: 6px; line-height: 1.35; }
.booking-processing-panel .processing-details-action { width: 100%; max-width: 784px; margin: 20px 0 0; }

.drawer-payment-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.drawer-payment-panel > * { margin-top: 0; margin-bottom: 0; }
.drawer-payment-panel .booking-no-badge { padding: 9px 12px; }
.drawer-payment-panel .reservation-countdown { display: block; width: 100%; line-height: 1.45; }
.drawer-payment-panel .drawer-payment-open { margin: 0; }
.drawer-payment-panel .drawer-price-compare {
  width: 100%;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .58);
}
.drawer-payment-panel .drawer-price-compare .price-col { min-width: 0; }
.drawer-payment-panel .drawer-price-compare .price-val { line-height: 1.35; overflow-wrap: anywhere; }
.drawer-payment-actions { display: flex; flex-direction: column; gap: 10px; }
.drawer-payment-actions p { line-height: 1.4; }
.drawer-payment-form { display: flex; flex-direction: column; gap: 10px; }
.drawer-payment-form .form-group { margin: 0; }
.drawer-payment-form .drawer-payment-form-actions { gap: 8px; margin: 0; }
.drawer-payment-cancel { margin: 0; }

.price-compare { display: flex; align-items: center; gap: 16px; margin: 16px 0; }
.fee-breakdown { margin: 14px 0 18px; background: var(--surface); }
.fee-breakdown-card { padding: 18px 20px 0; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.fee-breakdown-header, .fee-total-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.fee-breakdown-header { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.fee-breakdown-header h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.fee-breakdown-header p { margin: 0; }
.fee-breakdown-card.hapag-fees { padding-bottom: 18px; }
.hapag-fee-section { margin-top: 20px; }
.hapag-fee-section h4 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.hapag-fee-table-wrap { border: 1px solid #cbd5df; border-radius: 5px; overflow: hidden; }
.hapag-fee-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; color: #20262b; }
.hapag-fee-currency { width: 90px; }
.hapag-fee-amount { width: 140px; }
.hapag-fee-table th, .hapag-fee-table td { padding: 13px 18px; border-bottom: 1px solid #cbd5df; text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; }
.hapag-fee-table th:first-child { text-align: left; overflow-wrap: anywhere; }
.hapag-fee-table tbody tr:last-child > * { border-bottom: 0; }
.hapag-fee-unit-total td:last-child { font-size: 20px; font-weight: 700; }
.hapag-fee-equipment-total { background: #e3eaef; }
.hapag-fee-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.hapag-fee-footer strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.hapag-fee-footer small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
@media (max-width: 600px) {
  .hapag-fee-currency { width: 56px; }
  .hapag-fee-amount { width: 95px; }
  .hapag-fee-table th, .hapag-fee-table td { padding: 11px 8px; font-size: 12px; }
  .hapag-fee-unit-total td:last-child { font-size: 16px; }
}
.fee-source-badge, .fee-term-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; font-size: 11px; color: var(--muted); background: var(--bg); white-space: nowrap; }
.fee-ledger { margin: 16px 0 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.fee-line { display: grid; grid-template-columns: minmax(180px, 1.8fr) minmax(100px, 1fr) 90px minmax(130px, 1.2fr) minmax(130px, 1.2fr) 90px; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--border); color: var(--text); font-size: 13px; }
.fee-line:first-child { border-top: none; }
.fee-line:not(.fee-line-head):nth-child(odd) { background: #fbfcfe; }
.fee-line-head { background: #f5f7fa; color: var(--muted); font-size: 11px; font-weight: 600; }
.fee-name-cell { min-width: 0; }
.fee-name-cell strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fee-name-cell span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.fee-line > div:not(.fee-name-cell) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fee-subtotal-cell { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.fee-mobile-label { display: none; color: var(--muted); font-size: 11px; }
.fee-total-row { margin: 0 -20px; padding: 14px 20px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); background: #f8fafc; font-size: 14px; }
.fee-total-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.consent-panel .fee-breakdown { margin-top: 18px; }
.payment-summary-card { margin: 16px 0; padding: 14px; border: 1px solid #ead69a; border-radius: 10px; background: #fffdf5; }
.payment-summary-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.payment-summary-heading strong { font-size: 14px; color: #7c5d00; }
.payment-summary-heading span { color: var(--muted); font-size: 11px; }
.payment-total-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.payment-total-item { min-width: 0; padding: 11px 12px; border-radius: 8px; background: rgba(255,255,255,.86); }
.payment-total-item.highlight { background: #fff1c4; }
.payment-total-item > span:not(.booking-amount-summary) { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.payment-total-item strong { display: block; color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payment-total-item.highlight strong { color: #8a6500; }
.payment-total-item .payment-total-line { display: block; font-size: 14px; line-height: 1.55; }
.price-col { flex: 1; text-align: center; }
.price-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.price-val { font-size: 22px; font-weight: 700; }
.price-col.highlight .price-val { color: var(--primary); }
.price-note { display: inline; font-size: 12px; font-weight: 500; color: var(--muted); }
.price-arrow { font-size: 20px; color: var(--muted); }
.booking-no-badge { background: var(--bg); padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.booking-no-badge code { font-size: 15px; font-weight: 700; color: var(--primary); }

.success-icon { font-size: 48px; margin-bottom: 12px; }
.success-panel h4 { font-size: 20px; margin-bottom: 8px; }

.spinner-wrap { text-align: center; padding: 20px; }
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ── Utilities ────────────────────────────────── */
.muted { color: var(--muted); }
.sm { font-size: 12px; }
.link { color: var(--primary); }
.link-sm { font-size: 13px; color: var(--primary); }
.warn { color: var(--warn); font-weight: 600; }
.danger { color: var(--danger); }
.empty-state { text-align: center; padding: 40px; color: var(--muted); }

/* ── HTMX loading ───────────────────────────────── */
.htmx-request .btn { opacity: .7; pointer-events: none; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request { display: inline-block; }
button.htmx-request .btn-idle,
button:has(.quoting-indicator.htmx-request) .btn-idle { display: none; }
.quoting-banner {
  display: none;
  margin: 0 0 12px;
  padding: 10px 16px;
  background: #e8f3ff;
  color: #145a94;
  border: 1px solid #b6d4f0;
  border-radius: var(--radius);
  font-weight: 600;
}
.quoting-banner.htmx-request,
.htmx-request .quoting-banner { display: block; }

/* ── Settings ───────────────────────────────────── */
.settings-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: start;
}
.settings-nav {
  padding: 12px 8px;
  position: sticky;
  top: 80px;
}
.settings-nav-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  padding: 8px 12px 12px;
  font-weight: 600;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 2px;
}
.settings-nav-item:hover { background: var(--bg); text-decoration: none; }
.settings-nav-item.active {
  background: #e8f4fd;
  color: var(--primary);
  font-weight: 600;
}
.settings-nav-icon { width: 18px; text-align: center; }
.settings-main { min-width: 0; }
.settings-header { margin-bottom: 16px; }
.settings-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.settings-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.settings-card {
  display: block;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.settings-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}
.settings-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.settings-card-icon { font-size: 20px; }
.settings-card-title { font-weight: 600; font-size: 15px; }
.settings-card-summary { font-size: 13px; color: var(--muted); }
.settings-card-warn { font-size: 12px; color: var(--warn); margin-top: 8px; }
.settings-form h3 { font-size: 14px; margin-bottom: 12px; }
.settings-notice { margin-bottom: 16px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.input-with-hint { position: relative; }
.input-hint {
  font-size: 11px;
  color: var(--warn);
  margin-top: 4px;
  display: block;
}
.cred-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.cred-card { display: flex; flex-direction: column; }
.cred-card-warn { border-color: var(--warn); }
.cred-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cred-meta { flex: 1; font-size: 13px; }
.cred-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.cred-row:last-child { border-bottom: none; }
.cred-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.cred-empty { flex: 1; padding: 20px 0; }
.warn-box.sm { font-size: 12px; padding: 8px 10px; margin-top: 8px; }
.template-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.template-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.template-preview { font-size: 13px; margin-bottom: 8px; }
.template-preview div { margin-bottom: 4px; }
.settings-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.settings-tab {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
}
.settings-tab.active { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.scroll-x { overflow-x: auto; }
.master-matrix td { font-size: 12px; text-align: center; }
.master-matrix td:first-child,
.master-matrix td:nth-child(2) { text-align: left; }
.system-ports-table th,
.system-ports-table td { text-align: left; }
.cell-missing { background: #fff3cd; color: #856404; font-weight: 600; }
.cell-inferred { background: #e8f4fd; }
.mapping-status-verified { background: #d4edda; color: #155724; }
.mapping-status-unverified { background: #e9ecef; color: #495057; }
.mapping-status-unavailable { background: #fff3cd; color: #856404; }
.mapping-status-disabled { background: #f8d7da; color: #721c24; }
.locked-list { list-style: none; padding: 0; }
.locked-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.diag-list { display: flex; flex-direction: column; gap: 8px; }
.diag-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.diag-row:last-child { border-bottom: none; }
.row-highlight td { background: #fff8e6 !important; }
.row-failed td { background: #fafafa; color: var(--muted); }
.quote-error {
  display: inline-block;
  max-width: min(680px, 62vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.audit-sensitive td { background: #fff5f5; }
.session-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.session-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
}
.toggle { display: inline-flex; align-items: center; cursor: not-allowed; }
.toggle input { display: none; }
.toggle-ui {
  width: 36px; height: 20px;
  background: #ccc;
  border-radius: 10px;
  position: relative;
}
.toggle input:checked + .toggle-ui { background: var(--success); }
.toggle input:checked + .toggle-ui::after {
  content: '';
  position: absolute;
  right: 2px; top: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
}
.select.sm { padding: 4px 8px; font-size: 13px; }
.large-amount-box {
  background: #fff8e6;
  border: 1px solid #f0c674;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 16px;
}
.large-amount-box h4 { font-size: 14px; margin-bottom: 8px; color: #856404; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .detail-grid { grid-template-columns: 1fr; }
  .carrier-rate-row { grid-template-columns: minmax(126px, 1.1fr) minmax(100px, 2fr) 52px; }
  .settings-cards { grid-template-columns: repeat(2, 1fr); }
  .cred-grid { grid-template-columns: 1fr; }
}
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-card { width: 360px; padding: 28px; }
.login-card h1 { font-size: 22px; margin-bottom: 4px; }
.login-password-change { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.login-password-change summary { color: var(--primary); cursor: pointer; font-weight: 600; }
.login-password-form { margin-top: 14px; }
.audit-sensitive { background: #fff6f0; }
.row-highlight td { background: #fff8e6; }
.login-wrap .form-actions { flex-direction: row; }

@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-area { margin-left: 0; }
  .drawer { width: 100%; }
  .settings-shell { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .settings-nav-title { display: none; }
  .settings-cards, .template-list, .form-grid { grid-template-columns: 1fr; }
  .carrier-rate-row { grid-template-columns: minmax(118px, 1fr) minmax(90px, 1.6fr) 50px; gap: 8px; }
  .fee-breakdown-card { padding: 16px 14px 0; }
  .fee-breakdown-header { align-items: flex-start; flex-direction: column; }
  .fee-line-head { display: none; }
  .fee-line { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px 14px; padding: 13px 12px; }
  .fee-name-cell { grid-column: 1 / -1; }
  .fee-line > div:not(.fee-name-cell) { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: normal; }
  .fee-mobile-label { display: inline; flex-shrink: 0; }
  .fee-total-row { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .booking-evidence-links { grid-auto-flow: row; grid-template-columns: 1fr; }
}

/* Task creation: keep selection rules visible in a compact form. */
.task-create-breadcrumb, .task-create-form { max-width: 1080px; margin-left: auto; margin-right: auto; }
.task-create-form { padding: 24px 28px; }
.task-create-form > .form-group { margin-bottom: 18px; }
.task-create-form .form-group > label { color: var(--text); font-weight: 600; margin-bottom: 8px; }
.task-create-form .input, .task-create-form .select { min-height: 42px; border-radius: 8px; }
.task-create-form input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--primary); }
.task-create-form .form-grid { gap: 16px 20px; }
.task-create-form .task-create-containers { grid-column: 1 / -1; margin: 0; }
.task-create-form .container-type-options { gap: 16px; }
.task-create-form .container-type-column { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #fbfcfe; }
.task-create-form .container-type-heading { font-size: 14px; color: var(--text); margin: 0 6px 10px; }
.task-create-form .container-type-column .checkbox-label { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-height: 40px; margin: 5px 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; color: var(--text); }
.task-create-form .container-option-label { font-size: 14px; font-weight: 500; }
.task-create-form .container-option-choice { display: flex; align-items: center; gap: 10px; margin: 0; flex-shrink: 0; cursor: pointer; }
.task-create-form .container-option-weight { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 12px; }
.task-create-form .container-option-weight .input { width: 96px; min-width: 0; padding: 7px 8px; }
.task-create-form .container-type-column .checkbox-label:has(input:checked) { background: #edf6ff; border-color: #b7d8f4; color: #1767a5; }
.task-create-form .container-type-column .checkbox-label:not(.is-unavailable):hover { border-color: #b7d8f4; }
.task-create-form .task-create-hints { padding: 10px 2px 0; }
.task-create-form .task-create-hints p { margin: 3px 0; font-size: 12px; line-height: 1.6; }
.task-create-form .task-create-polling { margin: 18px 0; padding: 14px 16px; background: #f6f8fb; border: 1px solid var(--border); border-radius: 9px; }
.task-create-form .task-create-polling-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.task-create-form .task-create-polling-header h3 { margin: 0; font-size: 14px; }
.task-create-form .task-create-polling-header .checkbox-label { display: flex; margin: 0; color: var(--text); }
.task-create-form .carrier-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.task-create-form .task-create-carrier-choice { display: flex; gap: 9px; padding: 12px 10px; margin: 0; border: 1px solid var(--border); border-radius: 8px; background: #fbfcfe; }
.task-create-form .task-create-carrier-choice:has(input:checked) { border-color: #b7d8f4; background: #f1f7fd; }
.task-create-carrier-choice strong { display: block; color: var(--text); font-size: 12px; letter-spacing: .2px; }
.task-create-carrier-choice small { display: block; font-size: 11px; font-weight: 400; margin-top: 3px; color: var(--muted); }
.task-create-form #carrier-availability-note { font-size: 12px; line-height: 1.6; }
.task-create-form .form-actions { justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 18px; }
.task-create-form .form-actions .btn-primary { min-width: 132px; min-height: 40px; order: 1; }
@media (max-width: 1050px) {
  .task-create-form .carrier-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .task-create-form { padding: 18px 14px; }
  .task-create-form .container-type-options { gap: 8px; }
  .task-create-form .container-type-column { padding: 8px; }
  .task-create-form .container-type-column .checkbox-label { flex-wrap: wrap; gap: 6px; padding: 6px; }
  .task-create-form .container-option-weight { margin-left: 22px; width: calc(100% - 22px); }
}

/* Multi-container order drawer */
.booking-equipment-section { min-width: 0; padding: 0; border: 0; }
.booking-equipment-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 18px 0; border-bottom: 1px solid var(--border, #e2e8f0); align-items: center; }
.booking-equipment-option .checkbox-label { grid-column: 1; grid-row: 1; margin: 0; }
.booking-equipment-rates { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 5px 10px; min-width: 0; width: 100%; }
.booking-equipment-rates .booking-amount-converted { flex-basis: 100%; }
.booking-equipment-fields { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 70px 112px; min-width: 0; align-items: start; gap: 10px; }
.booking-equipment-quantity, .booking-equipment-weight { min-width: 0; margin: 0; font-size: 13px; color: #72839a; white-space: nowrap; }
.booking-equipment-quantity .input, .booking-equipment-weight .input { display: block; margin-top: 5px; width: 100%; }
@media (max-width: 380px) {
  .booking-equipment-option { column-gap: 10px; }
  .booking-equipment-fields { grid-template-columns: 60px 96px; gap: 8px; }
}
.booking-equipment-unavailable { opacity: .55; }
.drawer .consent-row > strong div + div { margin-top: 5px; }
.booking-estimate-detail { margin: 24px 0 18px; }
.booking-estimate-detail h5 { margin: 20px 0 10px; font-size: 14px; }
.booking-estimate-fees { width: 100%; border-collapse: collapse; font-size: 12px; }
.booking-estimate-fees th { padding: 9px 6px; background: #f1f5f9; color: #64748b; font-weight: 600; text-align: left; }
.booking-estimate-fees td { padding: 10px 6px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.booking-estimate-fees small { display: block; color: #8291a6; font-size: 11px; margin-top: 4px; }
.booking-estimate-fees th:first-child { width: 40%; }
.booking-estimate-fees td:nth-child(2), .booking-estimate-fees td:last-child { white-space: nowrap; }
.booking-fee-reference { color: #8291a6; }
.booking-fee-subtotal { padding: 10px 6px; font-size: 12px; background: #f8fafc; }
.booking-fee-subtotal span { display: inline-block; margin-right: 10px; }

.booking-confirm-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.booking-confirm-body > .drawer-steps { flex-shrink: 0; }
.booking-confirm-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.booking-confirm-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.booking-confirm-content > h4, .booking-confirm-content > .consent-detail, .booking-confirm-content > p { flex-shrink: 0; }
.booking-confirm-content > .booking-estimate-detail { flex: 0 0 50dvh; height: 50dvh; min-height: 50dvh; overflow-y: auto; overscroll-behavior: contain; margin: 8px 0; padding-right: 8px; }
.booking-confirm-actions { flex-shrink: 0; padding-top: 12px; border-top: 1px solid var(--border); background: var(--bg); }
.booking-confirm-actions .form-actions { flex-direction: row; margin-top: 0; }
.booking-confirm-actions .form-actions > .btn { flex: 1; }

.booking-confirm-drawer .drawer-header { padding: 12px 20px; }
.booking-confirm-drawer .drawer-header p { margin: 2px 0 0; }
.booking-confirm-body { padding: 12px 16px; }
.booking-confirm-body > .drawer-steps { margin-bottom: 8px; }
.booking-confirm-panel { padding: 10px 12px; }
.booking-confirm-content > .consent-detail { margin-bottom: 0; }
.booking-confirm-content .consent-row { padding: 4px 0; font-size: 12px; gap: 8px; }
.booking-confirm-content .consent-row > span:first-child { flex-shrink: 0; }
.booking-confirm-content .consent-row > strong { text-align: right; }
.booking-confirm-total { display: inline-block; margin-left: 8px; }
.booking-confirm-content > p { font-size: 11px; margin: 0 0 6px; }
.booking-confirm-content .booking-estimate-detail > h4 { margin-bottom: 6px; }
.booking-confirm-content .booking-estimate-detail > h5 { margin-top: 10px; }
.booking-confirm-actions { padding-top: 8px; }

/* Task polling and order quantities use separate, compact rows. */
.task-create-form .auto-book-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.task-create-form .auto-book-heading { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.task-create-form .auto-book-heading .checkbox-label { margin: 0; color: var(--text); }
.task-create-form .auto-book-title { display: block; margin: 12px 0 8px; }
.task-create-form #auto-book-options { container-type: inline-size; }
.task-create-form .auto-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.task-create-form .auto-book-item { display: grid; grid-template-columns: minmax(100px, 1fr) 70px 112px; min-width: 0; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: white; }
.task-create-form .auto-book-item.is-selected { border-color: #9cc9ee; background: #edf6ff; }
.task-create-form .auto-book-item .checkbox-label { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; font-size: 13px; }
.task-create-form .auto-book-field { min-width: 0; margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.task-create-form .auto-book-item .input { display: block; width: 100%; min-width: 0; margin-top: 4px; padding: 6px 8px; }
@container (max-width: 660px) {
  .task-create-form .auto-book-grid { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 340px) {
  .task-create-form .auto-book-item { grid-template-columns: 60px minmax(0, 1fr); }
  .task-create-form .auto-book-item .checkbox-label { grid-column: 1 / -1; }
  .task-create-form .auto-book-item .auto-book-weight { max-width: 112px; }
}
.task-create-form [hidden] { display: none !important; }
.task-create-form #route-fx-panel { padding: 12px 16px; background: #f6f8fb; border-radius: 8px; }
.task-create-form #route-fx-status { margin: 6px 0 0; overflow-wrap: anywhere; }

.booking-failure-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; width: 18ch; max-width: 18ch; max-height: 4.5em; margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--muted); white-space: normal; overflow-wrap: anywhere; overflow: hidden; }

.task-status-list { display: grid; gap: 7px; }
.task-status-line { display: grid; grid-template-columns: 4em auto; align-items: center; gap: 10px; white-space: nowrap; }
.task-status-line > .badge { justify-self: start; }

.bookings-table .booking-status-column { text-align: center; }
.bookings-table .booking-status-column > .badge { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 102px; margin-left: auto; margin-right: auto; }
.bookings-table .booking-status-column > .badge + .badge { margin-top: 6px; }
.bookings-table .booking-status-column .booking-failure-summary { width: 102px; max-width: 102px; margin-left: auto; margin-right: auto; text-align: center; }
.bookings-table .booking-status-column .reservation-countdown-inline { display: block; margin: 5px auto 0; }

.tasks-table .task-name-cell { width: 14.33%; max-width: 160px; }
.tasks-table .task-name-cell > strong { display: block; white-space: normal; overflow-wrap: anywhere; }

.booking-amount-summary { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; }
.booking-amount-summary-stacked { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.booking-amount-summary .booking-amount-native { color: #8995a6; font-size: 12px; font-weight: 400; white-space: nowrap; }
.booking-amount-summary .booking-amount-converted { color: var(--text); font-size: 15px; font-weight: 700; white-space: nowrap; }

.booking-processing-estimate { display: flex; align-items: baseline; justify-content: center; gap: 12px; width: 100%; white-space: nowrap; overflow-x: auto; }
.booking-processing-estimate .booking-amount-summary { flex-wrap: nowrap; flex-shrink: 0; }

.booking-processing-panel .booking-processing-estimate { gap: 16px; margin: 0 0 12px; line-height: 1.6; }
.booking-processing-estimate .booking-amount-summary { column-gap: 12px; }

.multibox-result-time-heading { text-align: center !important; }

.quote-box-sort { display: block; color: inherit; text-decoration: none; cursor: pointer; border-radius: 4px; }
.quote-box-sort:hover { color: var(--primary); }
.quote-box-sort:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

.multibox-quote-table th.multibox-rate-heading { padding: 0; }
.multibox-quote-table .quote-box-sort { padding: 10px 14px; }

.cma-fees-scroll { overflow-x: auto; }
.cma-fees-table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; color: #15286b; font-size: 13px; }
.cma-fees-table .cma-fee-label-col { width: 43%; }
.cma-fees-table th, .cma-fees-table td { padding: 15px 10px; text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cma-fees-table th:first-child { text-align: left; font-weight: 400; }
.cma-fees-table thead { border-bottom: 2px solid #7c86ad; color: #65719a; }
.cma-fees-table .cma-fee-group { border-bottom: 1px solid #d7dce9; }
.cma-fees-table .cma-fee-category > * { padding-top: 24px; padding-bottom: 16px; font-weight: 700; }
.cma-fee-toggle { display: flex; gap: 12px; align-items: baseline; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.cma-fee-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.cma-fee-chevron { display: inline-block; width: 12px; flex-shrink: 0; }
.cma-fee-toggle[aria-expanded="false"] .cma-fee-chevron { transform: rotate(180deg); }
.cma-fees-table .cma-fee-detail th { padding-left: 34px; }
.cma-fees-table .cma-fee-detail[hidden] { display: none; }
.cma-fees-table .cma-fee-detail:last-child > * { padding-bottom: 24px; }
.cma-fees-table tfoot { border-bottom: 2px solid #7c86ad; }
.cma-fees-table tfoot > tr > * { padding-top: 22px; padding-bottom: 22px; font-size: 16px; font-weight: 700; }
.cma-fees-table small { display: block; margin-top: 6px; color: #65719a; font-size: 12px; font-weight: 400; }
.cma-fee-grand-total { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 20px; padding: 26px 20px 26px; }
.cma-fee-grand-total > s { color: var(--muted); }
.cma-fee-grand-total .booking-amount-converted { font-size: 24px; color: #15286b; }

.maersk-fees-scroll { overflow-x: auto; }
.maersk-fees-table { width: 100%; min-width: 700px; border-collapse: collapse; table-layout: fixed; font-size: 13px; color: #202522; }
.maersk-fees-table th, .maersk-fees-table td { padding: 15px 16px; border: 1px solid #dde2df; border-left: 0; border-right: 0; text-align: left; vertical-align: middle; overflow-wrap: anywhere; font-weight: 400; font-variant-numeric: tabular-nums; }
.maersk-fees-table tr > :first-child { border-left: 1px solid #dde2df; }
.maersk-fees-table tr > :last-child { border-right: 1px solid #dde2df; }
.maersk-fees-table tr > :nth-last-child(-n+2) { text-align: right; }
.maersk-fees-table .maersk-fee-heading th { background: #f4f6f4; font-weight: 700; }
.maersk-fees-table .maersk-fee-heading th:first-child { background: #d2d6d2; }
.maersk-fees-table small { display: block; margin-top: 5px; color: #69716c; }
.maersk-carrier-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 18px 20px; background: #f4f6f4; }
.maersk-carrier-total > strong { font-size: 22px; white-space: nowrap; }
.maersk-carrier-total small { display: block; margin-top: 6px; color: var(--muted); }
.maersk-converted-total { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 20px; margin-top: 24px; padding: 0 20px 26px; }

.cma-fee-grand-total .booking-amount-summary,
.maersk-converted-total .booking-amount-summary { column-gap: 14px; row-gap: 8px; }
.cma-fee-grand-total .booking-amount-converted,
.maersk-converted-total .booking-amount-converted { margin-left: 6px; }
@media (max-width: 640px) {
  .cma-fee-grand-total { padding: 22px 8px 24px; gap: 12px; }
  .maersk-converted-total { padding: 0 8px 24px; gap: 12px; }
}

.oocl-fees h3 { padding-left: 12px; border-left: 3px solid #d52d31; margin: 24px 0 16px; font-size: 15px; color: #65676b; }
.oocl-fees h3:first-child { margin-top: 0; }
.oocl-fee-scroll { overflow-x: auto; border: 1px solid #e7e9ec; border-radius: 9px; }
.oocl-fees table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13px; }
.oocl-fees th, .oocl-fees td { padding: 16px; text-align: left; vertical-align: middle; border-right: 1px solid #eceef0; border-bottom: 1px solid #eceef0; line-height: 1.6; }
.oocl-fees th { background: #f8f9fa; font-weight: 700; }
.oocl-fees tr:last-child td { border-bottom: 0; }
.oocl-fees th:last-child, .oocl-fees td:last-child { border-right: 0; }
.oocl-fee-route { max-width: 220px; }
.oocl-fee-warning { color: #c98706; font-size: 12px; line-height: 1.6; margin: 10px 0 16px; }
.oocl-fee-note { padding: 12px 16px; background: #f4f4f6; color: var(--muted); font-size: 12px; border-radius: 6px; }
.oocl-payment-totals { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-top: 24px; padding: 18px 20px; background: #f8f9fa; border-radius: 8px; }
.oocl-payment-totals > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.oocl-payment-totals strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.oocl-converted-total { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 20px; padding: 18px 20px 26px; }
.oocl-converted-total .booking-amount-summary { column-gap: 14px; }

/* MSC native per-equipment charge tables. */
.msc-fees {margin:0 0 20px;padding:18px 20px 20px;}
.msc-fee-equipment {border:1px solid var(--border,#dce3ec);border-radius:10px;margin:12px 0 16px;padding:16px;background:#fff;}
.msc-fee-equipment>h4 {font-weight:700;font-size:16px;margin:0 14px 10px;padding:0;color:#19212c;}
.msc-fee-scroll {overflow-x:auto;margin:12px 0 0;}
.msc-fee-table {width:100%;min-width:1040px;border-collapse:collapse;table-layout:fixed;font-size:14px;color:#171717;}
.msc-fee-table thead th {background:#e2e2e2;text-align:left;padding:12px 14px;vertical-align:top;line-height:1.4;}
.msc-fee-table tbody th,.msc-fee-table td {padding:10px 14px;text-align:left;vertical-align:top;overflow-wrap:anywhere;border-bottom:1px solid #ddd;white-space:pre-line;line-height:1.5;}
.msc-fee-table tbody+tbody {border-top:2px solid #969696;}
.msc-fee-table tbody th {font-weight:700;}
.msc-fee-table td.msc-fee-amount {font-weight:700;text-align:right;white-space:nowrap;}
.msc-fee-total,.msc-fee-order-total {display:flex;justify-content:space-between;gap:20px;padding:14px 14px 10px;border-top:2px solid #969696;font-size:17px;}
.msc-fee-total {border-top:0;}
.msc-fee-order-total {margin-top:0;padding:14px 0 10px;border-top:1px solid var(--border);}
.msc-fee-summary-note {margin:0;line-height:1.6;}
.msc-fee-note {white-space:pre-line;line-height:1.6;margin:0 14px 8px;overflow-wrap:anywhere;}
.msc-fee-context {margin:0 14px 10px;}

.msc-fee-tabs {display:flex;gap:8px;overflow-x:auto;padding:12px 0 0;}
.msc-fee-tabs button {border:1px solid #dce3ec;background:#f5f7fa;border-radius:8px;padding:10px 16px;font-weight:600;white-space:nowrap;cursor:pointer;color:#475569;}
.msc-fee-tabs button[aria-selected="true"] {background:#e9db94;color:#252216;border-color:#d1bd62;}
.msc-fee-tabs button:focus-visible {outline:2px solid #1f73b8;outline-offset:2px;}

@media (max-width: 768px) {
  .msc-fees {padding:16px 14px;}
  .msc-fee-equipment {padding:12px;}
  .msc-fee-equipment>h4,.msc-fee-context,.msc-fee-note {margin-left:0;margin-right:0;}
}

/* Keep execution details and actions consistent through terminal states. */
.booking-execution-panel > p.booking-execution-route {margin:0 0 10px;line-height:1.6;overflow-wrap:anywhere;}
.booking-execution-panel .booking-execution-message {overflow-wrap:anywhere;}
.booking-result-icon {display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 auto 16px;border-radius:50%;background:var(--bg);color:var(--muted);font-size:28px;}
.booking-result-error {background:#fff3df;color:#b86e0c;}
.booking-execution-panel .mini-steps .failed {background:#f8d7da;color:#b42332;}
.booking-execution-actions {display:flex;flex-direction:column;gap:12px;width:100%;max-width:784px;margin-top:20px;}
.booking-execution-actions>form,.booking-execution-actions>.btn {display:block;width:100%;margin:0;}
.booking-execution-actions .btn {width:100%;}
.booking-execution-fees {width:100%;margin-top:20px;text-align:left;min-width:0;}
.booking-execution-panel .booking-processing-estimate {flex-wrap:wrap;white-space:normal;overflow:visible;row-gap:4px;}
.booking-execution-panel .booking-processing-estimate .booking-amount-summary {flex-wrap:wrap;flex-shrink:1;min-width:0;justify-content:center;}

/* Per-user task tabs on the comparison page. */
.compare-topbar {border-bottom:0;}
.compare-task-tabs {display:flex;align-items:center;gap:4px;min-width:0;height:26px;margin:-24px -24px 14px;padding:0 24px;background:var(--surface);}
.compare-task-tabs-scroll {display:flex;gap:2px;flex:0 1 auto;width:calc(var(--task-tab-count,5)*162px - 2px);max-width:calc(100% - 30px);min-width:0;overflow:hidden;}
.compare-task-tab {position:relative;display:flex;align-items:center;flex:1 1 160px;min-width:0;max-width:160px;height:26px;border:1px solid transparent;border-radius:8px 8px 0 0;background:var(--surface);transition:background .12s ease;}
.compare-task-tab a {display:block;flex:1 1 auto;padding:4px 6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px;line-height:16px;font-weight:500;}
.compare-task-tab:not(.active):hover {background:#f6f8fb;}
.compare-task-tab:not(.active):not(:last-child)::after {content:"";position:absolute;right:-2px;top:6px;height:12px;width:1px;background:var(--border);pointer-events:none;}
.compare-task-tab a:focus-visible,.compare-task-tab button:focus-visible,.compare-task-picker summary:focus-visible {outline:2px solid #8ab8df;outline-offset:-2px;}
.compare-task-tab a:hover {text-decoration:none;color:var(--primary);}
.compare-task-tab.active {background:var(--bg);border-color:var(--bg);}
.compare-task-tab.active a {color:var(--primary);}
.compare-task-tab button {flex:0 1 20px;min-width:0;width:20px;height:20px;padding:0;border:0;background:transparent;cursor:pointer;overflow:hidden;color:var(--muted);font-size:14px;line-height:20px;border-radius:4px;}
.compare-task-tab button:hover {background:#e2e8f0;color:var(--danger);}
.compare-task-picker {position:relative;flex:0 0 26px;}
.compare-task-picker summary {display:flex;align-items:center;justify-content:center;list-style:none;cursor:pointer;width:26px;height:26px;border:0;border-radius:5px;padding:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;}
.compare-task-picker summary:hover {background:#e2e8f0;color:var(--primary);}
.compare-task-picker summary::-webkit-details-marker {display:none;}
.compare-task-picker-panel {position:absolute;left:0;top:calc(100% + 8px);width:min(340px,calc(100vw - 36px));padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);z-index:80;}
.compare-task-picker-panel input {width:100%;margin-bottom:8px;}
.compare-task-picker-list {max-height:320px;overflow-y:auto;}
.compare-task-option {display:flex;flex-direction:column;gap:3px;width:100%;padding:10px;border:0;border-radius:6px;background:transparent;text-align:left;cursor:pointer;overflow-wrap:anywhere;color:var(--text);}
.compare-task-option:hover,.compare-task-option:focus-visible {background:#e8f2fc;}
.compare-task-option small {color:var(--muted);}
.compare-task-empty {padding:32px 20px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
@media (max-width:700px) {
  .compare-header {flex-direction:column;}
  .compare-actions {flex-wrap:wrap;}
}

/* Actual pickup date, between the order totals and payment instructions. */
.payment-pickup-dates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; width: fit-content; max-width: 100%; margin: 18px 0 14px; padding: 12px 16px; border: 1px solid #bad4f0; border-left: 4px solid #2176b9; border-radius: 9px; background: #edf5ff; color: #164b78; line-height: 1.5; }
.payment-pickup-label { font-size: 17px; font-weight: 700; }
.payment-pickup-values { display: grid; gap: 4px; min-width: 0; }
.payment-pickup-values strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payment-pickup-equipment { font-size: 15px; font-weight: 600; }

/* Keep carrier credentials compact without changing other drawers. */
.credential-drawer .drawer-header { padding: 16px 24px; }
.credential-drawer .drawer-header p { margin: 4px 0 0; }
.credential-drawer .drawer-body { padding: 18px 24px; }
.credential-drawer .form-group { margin-bottom: 14px; }
.credential-drawer .form-group p { margin: 5px 0 0; line-height: 1.4; }
.credential-field-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.credential-field-heading label { margin-bottom: 0; }
.credential-drawer .form-actions { flex-direction: row; gap: 10px; margin-top: 16px; }
.credential-drawer .form-actions .btn-primary { flex: 1; }
.credential-password-fields { display: grid; gap: 8px; }
.credential-drawer .form-group + .form-group { padding-top: 4px; }
.credential-drawer .form-actions { padding-top: 14px; border-top: 1px solid var(--border); }

.task-auto-pay-options { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.task-auto-pay-options .form-group { margin: 10px 0 0; max-width: 480px; }

.task-payment-actions { flex-direction: row; justify-content: flex-end; }

.task-create-polling .polling-basic-options .form-group { margin-bottom: 0; }
.task-create-form #auto-book-options > .muted { margin: 6px 0 0; line-height: 1.5; }
.task-create-form .task-auto-pay-options > .checkbox-label { display: flex; align-items: center; gap: 6px; margin: 0; }
.task-auto-pay-options .form-group > p { margin: 6px 0 0; line-height: 1.5; }

/* Keep wide content inside its card; retain desktop dimensions. */
.grid-2 > .panel { min-width: 0; }
.tasks-table-panel, .dashboard-table-scroll { overflow-x: auto; }
@media (max-width: 600px) {
  .carrier-rate-row { grid-template-columns: minmax(0, 1fr) minmax(35px, .7fr) 50px; }
  .panel-header { flex-wrap: wrap; gap: 8px; }
}

/* Account management: compact controls, readable emails, consistent row actions. */
.users-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.users-heading h2 { margin:0 0 7px; font-size:22px; }
.users-heading p { margin:0; font-size:13px; line-height:1.6; }
.user-create-form { margin-bottom:24px; }
.user-create-form h3 { margin:0 0 18px; font-size:16px; }
.user-create-grid { display:grid; grid-template-columns:minmax(180px,1.4fr) minmax(150px,1fr) 140px auto; gap:14px; align-items:end; }
.user-create-grid label { display:flex; min-width:0; flex-direction:column; gap:8px; font-size:13px; font-weight:500; }
.user-create-grid .input, .user-create-grid .select { width:100%; min-height:40px; }
.user-create-grid > .btn { min-height:40px; white-space:nowrap; }
.user-permission-note { margin:15px 0 0; line-height:1.7; }
.users-table-wrap { overflow-x:auto; }
.users-table { min-width:860px; }
.users-table td { vertical-align:middle; padding-top:20px; padding-bottom:20px; }
.users-table th:nth-child(2), .users-table td:nth-child(2) { width:210px; }
.users-table th:nth-child(3), .users-table td:nth-child(3) { width:90px; }
.users-table th:nth-child(4), .users-table td:nth-child(4) { white-space:nowrap; }
.user-account-title { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:5px; }
.user-account-title .user-email { margin-bottom:0; }
.user-role-readonly { display:inline-flex; padding:6px 12px; border-radius:7px; background:#edf4fc; color:#245b8b; font-weight:500; white-space:nowrap; }
.user-protected-note { display:block; text-align:right; color:var(--muted); font-size:12px; white-space:nowrap; }
.user-email { display:block; max-width:280px; overflow-wrap:anywhere; margin-bottom:5px; }
.user-role-form { display:flex; flex-wrap:nowrap; align-items:center; gap:10px; min-width:174px; }
.user-role-form .select { flex:0 0 114px; width:114px; min-height:36px; padding-top:5px; padding-bottom:5px; font-size:13px; margin:0; }
.user-create-grid .select, .user-role-form .select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7c93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;
}
.user-role-form .btn { flex:0 0 auto; padding:6px 10px; min-height:36px; white-space:nowrap; }
.user-row-actions { display:flex; align-items:center; justify-content:flex-end; gap:4px; white-space:nowrap; }
.users-actions-heading { text-align:right; }
.user-delete-button { color:#b42318; background:transparent; }
.user-delete-button:hover:not(:disabled) { background:#fff1f0; color:#9f1c14; }
.user-role-pill { font-size:11px; color:#52657c; background:#edf2f7; padding:4px 8px; border-radius:6px; white-space:nowrap; }
.user-delete-dialog { width:min(480px,calc(100vw - 40px)); border:1px solid var(--border); border-radius:14px; padding:26px; box-shadow:0 20px 60px #0f172a33; margin:auto; }
.user-delete-dialog::backdrop { background:#0f172a66; }
.user-delete-dialog h3 { margin:0 0 16px; font-size:19px; }
.user-delete-dialog p { line-height:1.7; overflow-wrap:anywhere; }
.user-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.user-delete-confirm { background:#b42318; color:white; border-color:#b42318; }
.user-delete-confirm:hover { background:#951d14; }
@media(max-width:1100px) { .user-create-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .user-create-grid>.btn { justify-self:end; } }
@media(max-width:640px) { .users-heading { align-items:flex-start; } .user-create-grid { grid-template-columns:minmax(0,1fr); } .user-create-grid>.btn { width:100%; } .user-delete-dialog { padding:20px; } }