/* Spotallkinds — 产品站专属样式 */

.rates-hero {
  position: relative;
  padding: 100px 0 80px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(22,119,255,0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.rates-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background-image:
    linear-gradient(rgba(22,119,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,119,255,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 70%);
}

.search-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(22,119,255,0.12), 0 4px 10px rgba(10,15,28,0.06);
  padding: 10px;
  display: flex;
  gap: 4px;
  align-items: stretch;
  max-width: 960px;
  margin: 0 auto;
}
.search-field {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.search-field:hover { background: var(--surface-3); }
.search-field .sf-label { font-size: 11px; color: var(--ink-4); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.search-field .sf-value { font-size: 15px; font-weight: 600; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-field + .search-field { border-left: 1px solid var(--line-2); }
.search-bar .btn-brand { padding: 0 28px; border-radius: 12px; }

.price-chip {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Quote table */
.quote-table { width: 100%; border-collapse: collapse; }
.quote-table thead th {
  position: sticky; top: 0; background: var(--surface-2);
  padding: 12px 16px; font-size: 11px; font-weight: 600;
  color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em;
  text-align: left; border-bottom: 1px solid var(--line);
}
.quote-table tbody td { padding: 16px; border-bottom: 1px solid var(--line-2); font-size: 13px; vertical-align: middle; }
.quote-table tbody tr { transition: background 0.12s; }
.quote-table tbody tr:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.quote-table .carrier-logo {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--surface-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; color: var(--ink-2); letter-spacing: -0.02em;
}

.filter-pill {
  padding: 6px 12px; border-radius: 999px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.filter-pill:hover { border-color: var(--brand); color: var(--brand); }
.filter-pill.active { background: var(--ink-1); border-color: var(--ink-1); color: var(--surface); }

.tab-underline {
  display: flex; gap: 24px; border-bottom: 1px solid var(--line);
}
.tab-underline button {
  background: none; border: none; cursor: pointer;
  padding: 14px 0; font-size: 14px; color: var(--ink-3);
  position: relative; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.tab-underline button.active { color: var(--ink-1); font-weight: 600; }
.tab-underline button.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brand); border-radius: 2px;
}

/* Route globe bg (decorative) */
.globe-decor {
  position: absolute; right: -120px; top: -80px;
  width: 560px; height: 560px; pointer-events: none; opacity: 0.35;
}

.feature-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600;
  color: var(--brand);
  letter-spacing: 0.05em;
}

/* Strategy card */
.strategy-card {
  padding: 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  transition: all 0.2s;
}
.strategy-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }

/* Bid-log terminal */
.bid-log {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; line-height: 1.8;
  background: #0A0F1C; color: #9EFFCE;
  border-radius: 12px;
  padding: 16px 18px;
  max-height: 240px; overflow: auto;
}
.bid-log .tm { color: #6B7280; }
.bid-log .warn { color: #FFB020; }
.bid-log .err { color: #FF5A4E; }
.bid-log .info { color: #4FA3FF; }

/* Subtle animated shimmer for "live" data */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, transparent, rgba(22,119,255,0.12), transparent);
  background-size: 200% 100%;
  animation: shimmer 2.2s infinite;
}

/* Pricing */
.price-tier {
  padding: 28px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column;
}
.price-tier.popular {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, var(--surface)) 0%, var(--surface) 100%);
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.price-tier.popular::before {
  content: '最受欢迎';
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff;
  padding: 4px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
}

/* ============================================================
   抢舱订舱 · 操作员控制台 (Booking Console)
   沿用 MAERSK-v5 的工作台布局,绑定到新的 design tokens
   ============================================================ */

.console-shell {
  --sider-w: 232px;
  --console-topbar-h: 64px;     /* 与 .nav 的 height 对齐 */
  --console-subtab-h: 0px;
  display: grid;
  grid-template-columns: var(--sider-w) 1fr;
  min-height: calc(100vh - var(--console-topbar-h) - var(--console-subtab-h));
  background: var(--bg);
}

.console-sider {
  position: sticky;
  top: 64px; /* nav 64(subtabs 已移除) */
  align-self: start;
  height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 16px 12px 24px;
}
.console-sider-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-5); font-weight: 700;
  padding: 14px 10px 8px;
}
.console-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; margin-bottom: 2px;
  border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--ink-3); font-weight: 500;
  transition: background 0.12s, color 0.12s;
  user-select: none;
}
.console-menu-item:hover { background: var(--surface-3); color: var(--ink-1); }
.console-menu-item.active {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand); font-weight: 600;
}
.console-menu-item svg { color: var(--ink-5); flex-shrink: 0; }
.console-menu-item.active svg { color: var(--brand); }
.console-menu-item .menu-badge {
  margin-left: auto; min-width: 22px; padding: 1px 7px;
  background: var(--brand); color: #fff;
  font-size: 10px; font-weight: 600; text-align: center;
  border-radius: 999px; font-family: 'JetBrains Mono', monospace;
}
.console-menu-item .menu-badge.muted { background: var(--surface-3); color: var(--ink-3); }

/* sub-tab strip directly under .nav */
.console-subtabs {
  position: sticky; top: 64px; z-index: 90;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.console-subtabs-inner {
  height: 44px;
  max-width: 100%;
  padding: 0 24px;
  display: flex; gap: 4px; align-items: center;
}
.console-subtab {
  padding: 6px 12px; border-radius: 7px; cursor: pointer;
  font-size: 13px; color: var(--ink-3); font-weight: 500;
  transition: background 0.12s, color 0.12s;
  display: inline-flex; align-items: center; gap: 6px;
}
.console-subtab:hover { background: var(--surface-3); color: var(--ink-1); }
.console-subtab.active {
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  color: var(--brand); font-weight: 600;
}
.console-subtab-divider { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }

/* console main */
.console-main {
  padding: 18px 24px 32px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(300px, 0.85fr);
  gap: 18px;
  align-content: start;
}
.console-page-head {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.console-crumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-4);
}
.console-crumb .sep { opacity: 0.5; }
.console-crumb .current { color: var(--ink-1); font-weight: 500; }
.console-page-title {
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  margin: 6px 0 2px;
  display: inline-flex; align-items: center; gap: 10px;
}
.console-running {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: color-mix(in srgb, #00D4AA 14%, transparent);
  color: #00A884; border-radius: 999px;
  font-size: 12px; font-weight: 500;
}
.console-running::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #00D4AA; box-shadow: 0 0 0 3px color-mix(in srgb, #00D4AA 30%, transparent);
  animation: console-pulse 1.8s ease-in-out infinite;
}
@keyframes console-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.console-page-sub { font-size: 12.5px; color: var(--ink-4); margin-top: 2px; }

/* dense KPI strip */
.console-kpi {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin-bottom: 4px;
}
.console-kpi-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.console-kpi-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.console-kpi-label { font-size: 10.5px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.console-kpi-value { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
.console-kpi-delta { font-size: 11px; margin-top: 4px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.console-kpi-delta.up { color: #00A884; }
.console-kpi-delta.down { color: #E54334; }
.console-kpi-spark { position: absolute; right: 10px; bottom: 10px; opacity: 0.7; pointer-events: none; }

/* monitor card (dense) */
.console-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.console-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  gap: 12px; flex-wrap: wrap;
}
.console-card-title { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.console-card-title .count {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background: var(--surface-3); color: var(--ink-3);
  padding: 2px 8px; border-radius: 999px; font-weight: 500;
}
.console-card-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.console-search {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; min-width: 200px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.console-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); background: var(--surface); }
.console-search input { border: none; outline: none; background: none; flex: 1; font-size: 12px; color: var(--ink-1); font-family: inherit; }
.console-search input::placeholder { color: var(--ink-5); }

/* console buttons (sm size aligned with MAERSK density) */
.btn-console-icon {
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 8px; color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
}
.btn-console-icon:hover { border-color: var(--brand); color: var(--brand); }

/* filter chip strip (dense) */
.console-chips {
  padding: 8px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.console-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-3);
  cursor: pointer; transition: all 0.12s;
}
.console-chip:hover { border-color: var(--brand); color: var(--brand); }
.console-chip.on {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  color: var(--brand);
}
.console-chip .x { opacity: 0.55; font-size: 10px; }
.console-chip.dashed { border-style: dashed; }

/* dense table */
.console-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12.5px; font-feature-settings: 'tnum';
}
.console-tbl thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  padding: 10px 14px; height: 36px;
  font-size: 11px; font-weight: 600; color: var(--ink-4);
  text-align: left; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.console-tbl tbody td {
  padding: 0 14px; height: 44px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle; white-space: nowrap;
}
.console-tbl tbody tr { transition: background 0.1s; }
.console-tbl tbody tr:hover { background: var(--surface-2); }
.console-tbl tbody tr.selected { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.console-tbl tbody tr.hot td:first-child,
.console-tbl tbody tr.fresh td:first-child { position: relative; }
.console-tbl tbody tr.hot td:first-child::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #00D4AA;
}
.console-tbl tbody tr.fresh td:first-child::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--brand);
}

.console-cbox {
  width: 14px; height: 14px;
  border: 1.5px solid var(--line);
  border-radius: 3px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.console-cbox.on { background: var(--brand); border-color: var(--brand); }

.console-route {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px;
}
.console-route-codes {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-4); margin-top: 2px;
}

.console-money {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  letter-spacing: -0.01em;
}
.console-money.lo { color: #00A884; }
.console-money.hi { color: #E54334; }

.console-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
}
.console-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.console-pill.running  { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.console-pill.booked   { background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent-2); }
.console-pill.released { background: color-mix(in srgb, var(--accent) 18%, transparent); color: #00A884; }
.console-pill.monitor  { background: var(--surface-3); color: var(--ink-3); }
.console-pill.paused   { background: color-mix(in srgb, var(--danger) 14%, transparent); color: #E54334; }

.console-op {
  width: 26px; height: 26px; border-radius: 6px; padding: 0;
  background: transparent; border: none;
  color: var(--ink-4); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.console-op:hover { background: var(--surface-3); color: var(--brand); }
.console-op.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.console-foot {
  padding: 9px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-4);
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.console-foot .live-text { display: inline-flex; align-items: center; gap: 6px; }
.console-foot .live-text::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #00D4AA; box-shadow: 0 0 0 3px color-mix(in srgb, #00D4AA 30%, transparent);
  animation: console-pulse 1.8s ease-in-out infinite;
}

/* task panel (dense, card list) */
.console-side { display: flex; flex-direction: column; gap: 12px; }
.console-summary {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.console-summary-num {
  font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; margin-top: 2px;
}
.console-summary-num .quota { font-size: 12px; color: var(--ink-4); font-weight: 400; margin-left: 4px; }

.console-task {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  border-left-width: 3px;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.console-task:hover { box-shadow: var(--shadow-sm); }
.console-task-head {
  padding: 11px 14px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.console-task-head:hover { background: var(--surface-2); }
.console-task-title { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; }
.console-task-title .route {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--ink-4); font-weight: 400; margin-top: 2px;
}
.console-task-progress { height: 3px; background: var(--surface-3); }
.console-task-progress > span {
  display: block; height: 100%;
  transition: width 0.4s;
}
.console-task-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 10px 14px 12px;
}
.console-task-stat {
  background: var(--surface-2); border-radius: 7px;
  padding: 6px 0; text-align: center;
}
.console-task-stat .v { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; }
.console-task-stat .l { font-size: 9.5px; color: var(--ink-4); margin-top: 1px; letter-spacing: 0.05em; text-transform: uppercase; }

/* account pool (dense list) */
.console-acct-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-2);
}
.console-acct-row:last-child { border-bottom: none; }
.console-acct-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.console-acct-name { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; }
.console-acct-grp { font-size: 10px; color: var(--ink-4); margin-top: 1px; }
.console-acct-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; }
.console-acct-sub { font-size: 10px; color: var(--ink-4); margin-top: 1px; }

@media (max-width: 1180px) {
  .console-main { grid-template-columns: 1fr; }
  .console-kpi { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .console-shell { grid-template-columns: 1fr; }
  .console-sider { display: none; }
  .console-kpi { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   实时运价 · 搜索门户 + 瀑布流结果
   - QuotePortal: 未搜索时只展示搜索框 + 推荐
   - QuoteWaterfall: 搜索后展示瀑布流卡片
   ============================================================ */

.portal-shell {
  position: relative;
  padding: 56px 0 80px;
  min-height: calc(100vh - 64px);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(22,119,255,0.08) 0%, transparent 60%),
    var(--bg);
  overflow: hidden;
}
.portal-shell .globe-decor {
  position: absolute; right: -160px; top: -100px;
  width: 520px; height: 520px; pointer-events: none; opacity: 0.28;
}

.portal-headline {
  text-align: center; max-width: 780px; margin: 0 auto 32px;
  position: relative;
}
.portal-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand); font-size: 12px; font-weight: 600;
  margin-bottom: 18px;
}
.portal-title {
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 14px;
}
.portal-sub {
  font-size: 16px; color: var(--ink-3); line-height: 1.55;
  max-width: 580px; margin: 0 auto;
}

/* portal recommendations */
.portal-recos {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin-left: auto; margin-right: auto;
  align-items: start;
}
.portal-side {
  display: flex; flex-direction: column; gap: 18px;
  min-width: 0;
}

/* AI 问价 入口 */
.portal-ai-card {
  position: relative; overflow: hidden;
  display: block; text-decoration: none;
  padding: 22px 22px 18px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(124,92,255,0.22) 0%, transparent 60%),
    linear-gradient(135deg, #0F1B3A 0%, #1A2D5C 50%, #1677FF 100%);
  color: #fff;
  box-shadow: 0 14px 36px rgba(22,119,255,0.20);
  transition: transform 0.18s, box-shadow 0.18s;
}
.portal-ai-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(22,119,255,0.28);
}
.portal-ai-glow {
  position: absolute; pointer-events: none;
  right: -40px; top: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(0,212,170,0.30) 0%, transparent 70%);
  filter: blur(20px);
}
.portal-ai-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
}
.portal-ai-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.portal-ai-text { flex: 1; min-width: 0; }
.portal-ai-text .t {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.portal-ai-text .t .badge {
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
  background: #00D4AA; color: #002B22;
  letter-spacing: 0.04em;
}
.portal-ai-text .s {
  font-size: 12px; color: rgba(255,255,255,0.7);
  margin-top: 2px;
}
.portal-ai-head > svg:last-child {
  color: rgba(255,255,255,0.5);
  transition: transform 0.18s, color 0.18s;
}
.portal-ai-card:hover .portal-ai-head > svg:last-child {
  transform: translateX(4px);
  color: #fff;
}
.portal-ai-prompts {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 16px;
}
.portal-ai-prompt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  font-size: 12px; color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.portal-ai-prompt svg { color: rgba(255,255,255,0.55); flex-shrink: 0; }
.portal-ai-card:hover .portal-ai-prompt { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }

/* 涨跌榜 */
.portal-movers .portal-reco-head { margin-bottom: 12px; }
.portal-movers-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.portal-movers-col {
  display: flex; flex-direction: column; gap: 4px;
}
.portal-movers-hd {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 5px;
  margin-bottom: 4px;
  display: inline-flex; align-self: flex-start;
  white-space: nowrap;
}
.portal-movers-hd.up { background: #FFE4E0; color: #E54334; }
.portal-movers-hd.down { background: #CFF5E7; color: #007A63; }
.portal-movers-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 12px; color: var(--ink-2);
  text-decoration: none;
  transition: background 0.12s;
}
.portal-movers-row:hover { background: var(--surface-2); }
.portal-movers-row .route { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.portal-movers-row .d {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.portal-movers-row .d.up { color: #E54334; }
.portal-movers-row .d.down { color: #00A884; }

.portal-reco-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
}
.portal-reco-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.portal-reco-head h3 {
  font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
}
.portal-reco-head .sub {
  font-size: 11px; color: var(--ink-4);
}
.portal-lane-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.portal-lane-card {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 12px 14px 10px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  min-width: 0;
}
.portal-lane-card:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(22,119,255,0.10);
}
.portal-lane-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.portal-lane-bot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.portal-lane-bot svg { width: 100px !important; flex-shrink: 0; }
.portal-lane-vol {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--ink-4);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.portal-lane-vol svg { color: #FFB020; width: auto !important; }
.portal-lane-route {
  display: flex; flex-direction: column;
  font-size: 13px; font-weight: 600; color: var(--ink-1);
  line-height: 1.3;
  min-width: 0;
}
.portal-lane-route .codes {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--ink-4); font-weight: 500; letter-spacing: 0.04em;
}
.portal-lane-price {
  text-align: right; font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}
.portal-lane-price .p { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.portal-lane-price .d { font-size: 10px; margin-top: 1px; }

.portal-lane-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  padding: 6px 0;
  font-size: 12px; font-weight: 600; color: var(--brand);
  text-decoration: none;
}
.portal-lane-more:hover { gap: 9px; }

@media (max-width: 980px) {
  .portal-recos { grid-template-columns: 1fr; }
  .portal-lane-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .portal-lane-grid { grid-template-columns: 1fr; }
  .portal-movers-cols { grid-template-columns: 1fr; }
}

.portal-recent-list {
  display: flex; flex-direction: column; gap: 4px;
}
.portal-recent-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  color: inherit;
}
.portal-recent-row:hover { background: var(--surface-3); }
.portal-recent-route { font-size: 13px; font-weight: 500; }
.portal-recent-meta { font-size: 11px; color: var(--ink-4); }
.portal-recent-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-5); }

.portal-quick-row {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-top: 18px;
}

/* ─── Waterfall search results ─── */

.waterfall-shell {
  background: var(--surface-2);
  min-height: calc(100vh - 64px);
}

.waterfall-searchbar {
  position: sticky; top: 64px; z-index: 80;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.waterfall-searchbar .search-bar {
  box-shadow: 0 6px 18px rgba(10,15,28,0.05);
  padding: 6px;
  border-radius: 14px;
}
.waterfall-searchbar .search-field { padding: 8px 14px; }
.waterfall-searchbar .search-field .sf-value { font-size: 14px; }
.waterfall-searchbar .search-bar .btn-brand { padding: 0 22px; }

.waterfall-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 0 12px;
}
.waterfall-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--ink-3);
}
.waterfall-meta strong { color: var(--ink-1); font-weight: 600; }
.waterfall-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.waterfall-pills { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 16px; }

.waterfall-grid {
  columns: 3;
  column-gap: 16px;
  padding-bottom: 40px;
}
@media (max-width: 1100px) { .waterfall-grid { columns: 2; } }
@media (max-width: 720px)  { .waterfall-grid { columns: 1; } }

.wf-card {
  break-inside: avoid;
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: inline-block; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.wf-card:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow: 0 12px 28px rgba(10,15,28,0.08);
  transform: translateY(-2px);
}
.wf-card.flag-best {
  border-color: color-mix(in srgb, #00D4AA 50%, var(--line));
  box-shadow: 0 14px 32px rgba(0,212,170,0.14);
}
.wf-card.flag-hot {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}

.wf-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
}
.wf-carrier {
  display: flex; align-items: center; gap: 10px;
}
.wf-carrier .carrier-logo { width: 36px; height: 36px; border-radius: 9px; }
.wf-carrier .name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.wf-carrier .code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-4); }
.wf-flag {
  font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  letter-spacing: 0.04em;
}

.wf-price-block {
  padding: 18px 16px 14px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
}
.wf-price {
  display: flex; align-items: baseline; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.wf-price .currency { font-size: 12px; color: var(--ink-4); font-weight: 500; }
.wf-price .amount {
  font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1;
}
.wf-price .unit { font-size: 11px; color: var(--ink-4); margin-left: 4px; }
.wf-delta {
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 7px;
}
.wf-delta.up { color: #E54334; background: #E5433418; }
.wf-delta.down { color: #00A884; background: #00A88418; }

.wf-spark {
  padding: 0 16px 12px;
}

.wf-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
}
.wf-meta-cell {
  padding: 10px 14px;
  border-right: 1px solid var(--line-2);
}
.wf-meta-cell:last-child { border-right: none; }
.wf-meta-cell .l { font-size: 10px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.wf-meta-cell .v { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; margin-top: 2px; }
.wf-meta-cell .s { font-size: 10px; color: var(--ink-4); margin-top: 1px; }

.wf-foot {
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line-2);
}
.wf-foot .valid { font-size: 11px; color: var(--ink-4); }
.wf-foot .actions { display: flex; gap: 6px; }
.wf-foot .actions .btn-sm { padding: 6px 10px; font-size: 12px; }

.wf-badge-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 0 16px 14px;
}
.wf-badge {
  font-size: 10px; font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-3); color: var(--ink-3);
  border: 1px solid var(--line-2);
}
.wf-badge.brand { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 28%, transparent); }
.wf-badge.green { background: #00D4AA15; color: #007A63; border-color: #00D4AA38; }
.wf-badge.amber { background: #FFB02015; color: #B07414; border-color: #FFB02038; }

.wf-empty {
  text-align: center; padding: 80px 20px;
  color: var(--ink-4);
}

/* ============================================================
   运价搜索条 · 港口联想 · 历史 · 箱型(最多 3 个)
   ============================================================ */

.rq-search-wrap {
  max-width: 1180px;
  margin: 32px auto 0;
  padding: 0 12px;
}

.rq-search {
  display: flex; align-items: stretch; gap: 12px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(22,119,255,0.10), 0 4px 10px rgba(10,15,28,0.05);
}
.rq-search-compact {
  padding: 6px;
  border-radius: 12px;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(10,15,28,0.05);
}

.rq-search-route {
  flex: 1 1 560px; min-width: 0;
  display: flex; align-items: stretch; gap: 6px;
}
.rq-search-route .rq-portinput { flex: 1 1 220px; min-width: 180px; }

.rq-search-presets {
  width: 44px; flex-shrink: 0;
  background: var(--brand); color: #fff;
  border: none; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.rq-search-presets:hover { background: var(--brand-2); }
.rq-search-compact .rq-search-presets { width: 38px; border-radius: 8px; }

.rq-search-swap {
  width: 40px; flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  cursor: pointer; color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center; height: 40px;
  transition: all 0.15s;
}
.rq-search-swap:hover { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border-color: var(--brand); }
.rq-search-compact .rq-search-swap { width: 32px; height: 32px; }

/* ─── PortInput ──────────────────────────────────────── */

.rq-portinput {
  position: relative;
  display: flex; align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: visible;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}
.rq-portinput:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.rq-search-compact .rq-portinput { border-radius: 8px; }

.rq-portinput-field {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  padding: 14px 16px;
  font-size: 15px; font-weight: 500;
  color: var(--ink-1);
  font-family: inherit;
}
.rq-portinput-field::placeholder { color: var(--ink-5); font-weight: 500; }
.rq-search-compact .rq-portinput-field { padding: 10px 14px; font-size: 14px; }

.rq-portinput-clear {
  position: absolute; right: 78px;
  align-self: center; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; padding: 0;
  background: var(--surface-3); border: none; border-radius: 50%;
  color: var(--ink-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.rq-portinput-clear:hover { background: var(--ink-4); color: var(--surface); }

/* CY/SD/CFS 切换器 */
.rq-portmode { position: relative; flex-shrink: 0; display: flex; align-items: stretch; }
.rq-portmode-btn {
  background: var(--brand); color: #fff;
  border: none; padding: 0 14px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; min-width: 64px;
  border-top-right-radius: 9px; border-bottom-right-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: background 0.15s;
}
.rq-portmode-btn:hover { background: var(--brand-2); }
.rq-search-compact .rq-portmode-btn { font-size: 13px; min-width: 56px; padding: 0 12px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
.rq-portmode-caret { font-size: 9px; opacity: 0.85; }
.rq-portmode-pop {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(10,15,28,0.14);
  padding: 4px; min-width: 220px; z-index: 60;
}
.rq-portmode-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: none; background: transparent;
  border-radius: 7px; cursor: pointer; text-align: left;
  transition: background 0.12s;
}
.rq-portmode-opt:hover { background: var(--surface-3); }
.rq-portmode-opt.on { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.rq-portmode-opt .t { font-size: 13px; font-weight: 600; color: var(--ink-1); min-width: 36px; }
.rq-portmode-opt .d { font-size: 11px; color: var(--ink-4); flex: 1; }
.rq-portmode-opt.on .t { color: var(--brand); }

/* ─── Port dropdown(历史 + 联想)──────────────────────── */

.rq-portdrop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(10,15,28,0.14), 0 2px 6px rgba(10,15,28,0.05);
  z-index: 50;
  overflow: hidden;
  min-width: 540px;
}
.rq-portdrop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
  font-size: 11px; color: var(--ink-4); font-weight: 600;
  letter-spacing: 0.04em;
}
.rq-portdrop-clearall {
  background: transparent; border: none; cursor: pointer;
  font-size: 11px; color: var(--ink-4); font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px; border-radius: 5px;
  transition: all 0.12s;
}
.rq-portdrop-clearall:hover { background: var(--surface-3); color: var(--danger); }

.rq-portdrop-list {
  max-height: 380px; overflow-y: auto;
  padding: 4px;
}
.rq-portdrop-empty {
  padding: 32px 16px; text-align: center;
  font-size: 13px; color: var(--ink-4);
}
.rq-portdrop-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: none; background: transparent;
  border-radius: 8px; cursor: pointer; text-align: left;
  font-family: inherit;
  transition: background 0.12s;
}
.rq-portdrop-row:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.rq-portdrop-name {
  font-size: 13px; font-weight: 600; color: var(--ink-1);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
}
.rq-portdrop-cn { font-size: 12px; color: var(--ink-4); margin-left: auto; }

/* 国家标 — 浅蓝边框 */
.rq-country-tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px;
  font-size: 11px; font-weight: 500;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 38px;
}

/* 历史行(横向 港→港 + 删除) */
.rq-hist-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 8px; cursor: pointer;
  transition: background 0.12s;
}
.rq-hist-row:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.rq-hist-leg {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.rq-hist-name {
  font-size: 13px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: -0.01em;
}
.rq-hist-cn { font-size: 12px; color: var(--ink-4); flex-shrink: 0; }
.rq-hist-arrow { font-size: 13px; color: var(--ink-5); }
.rq-hist-del {
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-4); border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.rq-hist-del:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }

/* ─── ContainerSelect ────────────────────────────────── */

.rq-ctr {
  position: relative;
  flex: 0 1 auto;
  min-width: 220px; max-width: 380px;
}
@media (max-width: 1120px) {
  .rq-search-route { flex-basis: 100%; }
  .rq-ctr { flex: 1 1 auto; min-width: 0; max-width: none; }
}

.rq-ctr-control {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  height: 100%;
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rq-ctr-control:hover { border-color: var(--brand); }
.rq-search-compact .rq-ctr-control { min-height: 40px; border-radius: 8px; padding: 4px 10px; }

.rq-ctr-placeholder { color: var(--ink-5); font-size: 14px; }
.rq-ctr-chips {
  display: flex; gap: 6px; flex: 1; flex-wrap: wrap;
}
.rq-ctr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-1);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
}
.rq-search-compact .rq-ctr-chip { font-size: 12px; padding: 3px 5px 3px 8px; }
.rq-ctr-chip button {
  width: 16px; height: 16px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-4); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rq-ctr-chip button:hover { background: var(--surface-3); color: var(--danger); }
.rq-ctr-caret { font-size: 11px; color: var(--ink-4); }

.rq-ctr-pop {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(10,15,28,0.14);
  z-index: 50;
  overflow: hidden;
}
.rq-ctr-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  border-bottom: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-3);
}
.rq-ctr-pop-hint { font-size: 11px; color: var(--ink-4); }
.rq-ctr-pop-list { padding: 4px; }
.rq-ctr-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: none; background: transparent;
  border-radius: 7px; cursor: pointer; text-align: left;
  font-family: inherit;
  transition: background 0.12s;
}
.rq-ctr-opt:hover:not(:disabled) { background: var(--surface-2); }
.rq-ctr-opt.on { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.rq-ctr-opt.disabled { opacity: 0.45; cursor: not-allowed; }
.rq-ctr-opt-main { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.rq-ctr-opt-main .t { font-size: 14px; font-weight: 600; color: var(--ink-1); font-family: 'JetBrains Mono', monospace; letter-spacing: -0.01em; }
.rq-ctr-opt.on .t { color: var(--brand); }
.rq-ctr-opt-main .s { font-size: 11px; color: var(--ink-4); }
.rq-ctr-opt-tag {
  font-size: 10px; padding: 2px 6px;
  background: var(--surface-3); color: var(--ink-4);
  border-radius: 999px;
}

/* 搜索按钮 */
.rq-search-go-wrap {
  position: relative;
  display: inline-flex;
}
.rq-search-go {
  padding: 0 32px;
  border-radius: 10px;
  font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.rq-search-compact .rq-search-go { padding: 0 22px; font-size: 14px; border-radius: 8px; }
.rq-search-go:disabled { opacity: 0.5; cursor: not-allowed; }

/* v3 · 立即查询按钮上方的额度漂浮 chip */
.rq-quota-chip {
  position: absolute;
  top: -9px;
  right: 6px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: #FF6B35;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.4);
  pointer-events: none;
  opacity: 1;
}
.rq-quota-chip b {
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  margin: 0 1px;
}
.rq-quota-chip-low {
  background: #DC2626;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.5);
}
.rq-quota-chip-over {
  background: #F59E0B;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.45);
}
.rq-quota-chip-enterprise {
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.4);
}

/* ============================================================
   结果页 · 承运人行 × 箱型列
   ============================================================ */

.rq-results-shell {
  background: var(--surface-2);
  min-height: calc(100vh - 64px);
}
.rq-results-shell .container { max-width: 1480px; }

.rq-results-searchbar {
  position: sticky; top: 64px; z-index: 70;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 14px 0 10px;
}
.rq-results-secondary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 10px;
  padding: 0 12px;
}
.rq-results-secondary-tabs {
  display: flex; gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.rq-results-secondary-tabs button {
  background: transparent; border: none; cursor: pointer;
  padding: 5px 14px;
  font-size: 12.5px; color: var(--ink-3);
  border-radius: 999px; font-family: inherit; font-weight: 500;
  transition: all 0.15s;
}
.rq-results-secondary-tabs button:hover { color: var(--ink-1); }
.rq-results-secondary-tabs button.active {
  background: var(--surface); color: var(--brand);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(10,15,28,0.06);
}
.rq-results-secondary-tools {
  display: flex; gap: 16px; align-items: center;
}
.rq-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  user-select: none;
}
.rq-check input[type="checkbox"] { accent-color: var(--brand); width: 14px; height: 14px; cursor: pointer; }

/* 工具条 */
.rq-results-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;  padding: 18px 0 12px;
}
.rq-results-count {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
}
.rq-results-count b { color: var(--ink-1); font-family: 'JetBrains Mono', monospace; font-weight: 600; margin: 0 4px; font-size: 15px; }
.rq-results-route {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
}
.rq-results-route > span:not(.rq-country-tag):not(.rq-results-ctr-tags) {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  color: var(--ink-1); letter-spacing: -0.01em;
}
.rq-results-ctr-tags { display: inline-flex; gap: 4px; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line); }
.rq-results-ctr-tag {
  font-size: 11px; font-weight: 600;
  padding: 1px 7px;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  color: var(--brand);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
}

.rq-results-sorts { display: flex; gap: 4px; align-items: center; }
.rq-sort-btn {
  background: transparent; border: 1px solid transparent;
  padding: 5px 10px;
  font-size: 12.5px; color: var(--ink-3); font-family: inherit;
  border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all 0.12s;
}
.rq-sort-btn:hover { background: var(--surface); color: var(--ink-1); border-color: var(--line); }
.rq-sort-btn.on {
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  font-weight: 600;
}

/* 列表 */
.rq-results-list {
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: 32px;
}

.rq-row {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rq-row:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow: 0 8px 20px rgba(10,15,28,0.06);
}

/* 状态标 — 浮在卡片左上 */
.rq-row-flags {
  position: absolute; left: 0; top: 0;
  display: inline-flex; gap: 6px;
  padding: 6px 10px;
  z-index: 1;
}
.rq-route-flag {
  font-size: 11px; font-weight: 600;
  color: var(--brand);
  padding: 2px 8px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.rq-vip-flag {
  font-size: 11px; font-weight: 600;
  color: #B07414;
  padding: 2px 8px;
  background: #FFF6E0;
  border: 1px solid #F5D38C;
  border-radius: 5px;
}

/* 主行 — 4 段:左 / 行程 / 价格 / 操作 */
.rq-row-main {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding: 28px 22px 16px;
}
.rq-row-left {
  display: flex; align-items: center; gap: 14px;
  flex: 0 0 auto;
}
.rq-row-trip {
  flex: 1 1 440px; min-width: 0;
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 16px; align-items: center;
}

/* 行程 v2 — 上 ETD 日期 + 直航/中转 pill + ETA 日期;下 港口名 + 时间线 + 港口名 */
.rq-tripv2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 1.6fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.rq-tripv2-leg { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rq-tripv2-leg-l { align-items: flex-start; }
.rq-tripv2-leg-r { align-items: flex-end; text-align: right; }
.rq-tripv2-leg .d {
  display: flex; align-items: baseline; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.rq-tripv2-leg .d b { font-size: 17px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.02em; }
.rq-tripv2-leg .d span { font-size: 12px; color: var(--ink-4); }
.rq-tripv2-leg .p {
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: help;
  max-width: 100%;
}

.rq-tripv2-rail {
  display: flex; flex-direction: column;
  position: relative;
  min-width: 0;
}
.rq-tripv2-rail .rail-top {
  display: flex; justify-content: center; align-items: center;
  margin-bottom: 4px;
}
.rail-pill {
  font-size: 11px; font-weight: 600;
  padding: 2px 10px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.rail-pill.is-direct  { color: #007A63; background: #CFF5E7; border: 1px solid #95E6CC; }
.rail-pill.is-transit { color: #E54334; background: #FFE4E0; border: 1px solid #F8B7AE; }

.rq-tripv2-rail .rail-mid {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.rail-mid .dot {
  width: 6px; height: 6px;
  background: #E54334;
  flex-shrink: 0;
}
.rail-mid .line {
  flex: 1 1 auto; min-width: 12px;
  height: 1px;
  background: var(--line);
  position: relative;
}
.rail-mid .city {
  font-size: 11px; color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 78px;
  cursor: help;
  flex-shrink: 0;
}
.rail-mid .days {
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  background: var(--surface);
  padding: 0 4px;
}

/* 旧 .rq-leg / .rq-trip — 保留兼容(费用明细外的旧引用)*/
.rq-prices {
  flex: 1 1 540px; min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--ctr-cols, 3), minmax(168px, 1fr));
  gap: 10px;
}
.rq-row-cta {
  flex: 0 0 auto;
}

.rq-cbox-wrap {
  position: relative; display: inline-block;
  width: 18px; height: 18px;
  cursor: pointer; flex-shrink: 0;
}
.rq-cbox-wrap input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
.rq-cbox-mark {
  position: absolute; inset: 0;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  transition: all 0.12s;
}
.rq-cbox-wrap input:checked + .rq-cbox-mark {
  background: var(--brand); border-color: var(--brand);
}
.rq-cbox-wrap input:checked + .rq-cbox-mark::after {
  content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rq-carrier { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 70px; }
.rq-carrier-logo {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px;
  letter-spacing: -0.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.rq-carrier-name { font-size: 11px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.02em; }

/* ETD / ETA legs */
.rq-leg { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rq-leg-date {
  display: flex; align-items: baseline; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.rq-leg-date b { font-size: 16px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.02em; }
.rq-leg-date span { font-size: 12px; color: var(--ink-4); }
.rq-leg-port { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-leg-port-code { font-family: 'JetBrains Mono', monospace; color: var(--ink-5); margin-left: 2px; font-size: 11px; }

/* trip mid */
.rq-trip { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rq-trip-line {
  display: flex; align-items: center; gap: 8px;
  position: relative;
}
.rq-trip-line::before {
  content: ''; position: absolute;
  left: 4px; right: 4px; top: 50%; height: 1px;
  background: var(--line);
  z-index: 0;
}
.rq-trip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); position: relative; z-index: 1; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--surface);
}
.rq-trip-tag {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--surface);
}
.rq-trip-tag.is-direct {
  color: #007A63;
  background: #CFF5E7;
  border: 1px solid #95E6CC;
}
.rq-trip-tag.is-transit {
  color: #E54334;
  background: #FFE4E0;
  border: 1px solid #F8B7AE;
}
.rq-trip-days {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  background: var(--surface);
  padding: 0 6px;
}
.rq-trip-mid {
  text-align: center;
  font-size: 11px; color: var(--ink-4);
  font-family: 'JetBrains Mono', monospace;
}

/* ENS box */
.rq-ensbox {
  display: flex; flex-direction: column; gap: 2px;
  align-items: center;
}
.rq-ensbox-t { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.rq-ensbox-v { font-size: 14px; font-weight: 600; color: #F25E2B; font-family: 'JetBrains Mono', monospace; letter-spacing: -0.01em; }

/* 价格组(按所选箱型分列)— 容器布局已在 .rq-row-main 中定义 */
.rq-pcell {
  padding: 10px 14px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rq-row:hover .rq-pcell { border-color: color-mix(in srgb, var(--brand) 18%, var(--line)); }
.rq-pcell:hover { border-color: var(--brand); box-shadow: 0 4px 12px rgba(22,119,255,0.10); }
.rq-pcell-soldout {
  background: var(--surface-2);
  border-color: var(--line-2);
}
.rq-pcell-soldout:hover { border-color: var(--line); box-shadow: none; }
.rq-pcell-none {
  background: var(--surface-2);
  border-color: var(--line-2);
  border-style: dashed;
  opacity: 0.85;
}
.rq-pcell-none:hover { border-color: var(--line-2); box-shadow: none; }

.rq-pcell-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 4px;
}
.rq-pcell-type {
  font-size: 15px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-1); letter-spacing: -0.02em;
}
.rq-status {
  font-size: 10px; font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.rq-status-avail   { background: #00D4AA; color: #fff; }
.rq-status-soldout { background: #9CA3AF; color: #fff; }

.rq-pcell-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-4);
  white-space: nowrap;
  min-width: 0;
}
.rq-pcell-row .l { color: var(--ink-4); font-weight: 500; flex-shrink: 0; }
.rq-pcell-row svg { opacity: 0.55; color: var(--ink-4); flex-shrink: 0; }
.rq-pcell-amt {
  margin-left: auto;
  font-size: 14px; font-weight: 700;
  color: #F25E2B; font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.rq-pcell-na {
  margin-left: auto;
  font-size: 15px; color: var(--ink-5);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.rq-row-detail { padding: 22px 18px; font-size: 13px; border-radius: 8px; line-height: 1; }

/* 行 meta 底栏 */
.rq-row-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 8px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--ink-4);
}
.rq-row-meta b { color: var(--ink-2); font-weight: 600; font-family: 'JetBrains Mono', monospace; letter-spacing: -0.01em; }
.rq-row-meta i { width: 1px; height: 10px; background: var(--line); }
.rq-row-quick { color: var(--brand); font-weight: 600; }
.rq-row-quick:hover { text-decoration: underline; }
.rq-row-updated { margin-left: auto; color: var(--ink-5); font-family: 'JetBrains Mono', monospace; font-size: 11px; }

/* 分页 */
.rq-results-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 40px;
  font-size: 12px; color: var(--ink-4);
}
.rq-results-pager-btns { display: flex; gap: 4px; }
.rq-results-pager-btns button {
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); font-family: inherit; font-size: 12px; font-weight: 600;
  transition: all 0.12s;
}
.rq-results-pager-btns button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.rq-results-pager-btns button:disabled { opacity: 0.4; cursor: not-allowed; }
.rq-results-pager-btns button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.rq-results-pager-btns button:first-child svg { transform: rotate(180deg); }

/* 紧凑响应 */
@media (max-width: 1280px) {
  .rq-tripv2 {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 1.4fr) minmax(0, 1fr);
    gap: 8px;
  }
  .rail-mid .city { max-width: 60px; }
}
@media (max-width: 880px) {
  .rq-row-trip {
    grid-template-columns: 1fr;
    gap: 14px 12px;
  }
  .rq-row-trip .rq-ensbox { flex-direction: row; gap: 6px; justify-content: center; }
}


/* ============================================================
   费用明细 抽屉  ·  .fdr-*
   ============================================================ */

.fdr-scrim {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(10,15,28,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s, backdrop-filter 0.24s;
}
.fdr-scrim.show {
  background: rgba(10,15,28,0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1; pointer-events: auto;
}

.fdr {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000;
  width: min(1180px, 92vw);
  background: var(--surface-2);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.32, 1);
  box-shadow: -20px 0 50px rgba(10,15,28,0.18);
}
.fdr.show { transform: translateX(0); }

/* 顶栏 */
.fdr-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.fdr-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 7px; cursor: pointer;
  font-size: 13px; color: var(--ink-2); font-family: inherit;
  transition: all 0.12s;
}
.fdr-back:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand); }
.fdr-back svg { transform: rotate(180deg); }
.fdr-topbar-t {
  font-size: 15px; font-weight: 600; color: var(--ink-1);
  margin: 0; letter-spacing: -0.01em;
}
.fdr-topbar-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
}
.fdr-icon-btn {
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); transition: all 0.12s;
}
.fdr-icon-btn:hover { background: var(--surface-2); color: var(--brand); border-color: var(--brand); }
.fdr-cta-shipper {
  padding: 0 14px; height: 32px;
  font-size: 13px; font-weight: 600;
  border-radius: 7px; gap: 4px;
  display: inline-flex; align-items: center;
}
.fdr-close { margin-left: 6px; }
.fdr-close:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border-color: var(--danger); }

/* 主体 */
.fdr-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 20px 24px 120px;
}

/* ─── 航次摘要 ──────────────────────────────────────── */
.fdr-voyage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
}
.fdr-voyage-route {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.fdr-voyage-port {
  font-size: 22px; font-weight: 700;
  color: var(--ink-1); letter-spacing: -0.02em;
  font-family: 'JetBrains Mono', monospace;
}
.fdr-voyage-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12px; color: var(--ink-4);
}
.fdr-voyage-meta b { color: var(--ink-2); font-weight: 600; font-family: 'JetBrains Mono', monospace; letter-spacing: -0.01em; }
.fdr-dot { width: 3px; height: 3px; background: var(--ink-5); border-radius: 50%; flex-shrink: 0; }
.fdr-voyage-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px;
}
.fdr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px; color: var(--ink-3);
}
.fdr-chip b {
  color: var(--ink-1); font-weight: 600;
  font-family: 'JetBrains Mono', monospace; letter-spacing: -0.01em;
}

/* 行程轴 */
.fdr-track {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 18px; align-items: center;
  margin-top: 18px; padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.fdr-track-side {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.fdr-track-logo {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.fdr-track-carrier { font-size: 10px; font-weight: 600; color: var(--ink-2); }
.fdr-track-stop { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fdr-track-stop-date {
  display: flex; align-items: baseline; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.fdr-track-stop-date b { font-size: 22px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.02em; }
.fdr-track-stop-date span { font-size: 12px; color: var(--ink-4); }
.fdr-track-stop-port {
  font-size: 11px; color: var(--ink-4);
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fdr-track-line {
  display: flex; align-items: center; gap: 8px;
  position: relative;
}
.fdr-track-line::before {
  content: ''; position: absolute;
  left: 4px; right: 4px; top: 50%; height: 1px;
  background: var(--brand);
  z-index: 0; opacity: 0.4;
}
.fdr-track-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); position: relative; z-index: 1; flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px color-mix(in srgb, var(--brand) 40%, transparent);
}
.fdr-track-line-bar {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  padding: 0 8px;
  margin: 0 auto;
}
.fdr-track-tag {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 5px;
}
.fdr-track-tag.is-direct { color: #007A63; background: #CFF5E7; border: 1px solid #95E6CC; }
.fdr-track-tag.is-transit { color: #E54334; background: #FFE4E0; border: 1px solid #F8B7AE; }
.fdr-track-days {
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
}

/* ─── 箱型 Tab(若 ≥ 2 个) ──────────────────────── */
.fdr-ctr-tabs {
  display: flex; gap: 10px;
  margin-top: 18px;
}
.fdr-ctr-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: all 0.15s;
}
.fdr-ctr-tab:not(:disabled):hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); transform: translateY(-1px); }
.fdr-ctr-tab.on {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  box-shadow: 0 6px 16px rgba(22,119,255,0.10);
}
.fdr-ctr-tab.is-soldout { opacity: 0.7; }
.fdr-ctr-tab.is-none { opacity: 0.4; cursor: not-allowed; }
.fdr-ctr-tab-l { display: flex; align-items: center; gap: 8px; }
.fdr-ctr-tab-type {
  font-size: 16px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-1); letter-spacing: -0.02em;
}
.fdr-ctr-tab.on .fdr-ctr-tab-type { color: var(--brand); }
.fdr-ctr-tab-r { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.fdr-ctr-tab-r .l { font-size: 10px; color: var(--ink-4); }
.fdr-ctr-tab-r .v {
  font-size: 15px; font-weight: 700;
  color: #F25E2B;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.02em;
}

/* ─── Total bar(当前箱型 Total 摘要)─────────── */
.fdr-total-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #0F1B3A 0%, #1A2D5C 100%);
  border-radius: 12px;
  color: #fff;
}
.fdr-total-bar-l {
  display: flex; align-items: center; gap: 12px;
}
.fdr-current-type {
  font-size: 22px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.02em;
}
.fdr-total-bar-r {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.fdr-total-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  color: #fff;
}
.fdr-total-pill svg { color: rgba(255,255,255,0.55); flex-shrink: 0; }
.fdr-total-pill .l { font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 0.02em; }
.fdr-total-pill .v {
  font-size: 18px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace; letter-spacing: -0.02em;
}
.fdr-total-pill .break { color: rgba(255,255,255,0.4); font-size: 10px; }
.fdr-total-pill .o { font-size: 11px; color: rgba(255,255,255,0.7); font-family: 'JetBrains Mono', monospace; letter-spacing: -0.01em; }
.fdr-total-pill-custom {
  background: rgba(0,212,170,0.16);
  border-color: rgba(0,212,170,0.36);
}
.fdr-total-pill-custom .v { color: #00D4AA; }
.fdr-total-pill-custom .hint { font-size: 10px; color: rgba(0,212,170,0.8); letter-spacing: 0.02em; }

/* ─── 分类 Tab ───────────────────────────────── */
.fdr-cat-tabs {
  display: flex; gap: 4px; align-items: center;
  margin: 18px 0 12px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.fdr-cat-tab {
  background: transparent; border: none; cursor: pointer;
  padding: 6px 14px;
  font-size: 13px; color: var(--ink-3); font-family: inherit; font-weight: 500;
  border-radius: 7px;
  transition: all 0.12s;
}
.fdr-cat-tab:hover { color: var(--ink-1); }
.fdr-cat-tab.on {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand); font-weight: 600;
}
.fdr-search {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  width: 200px;
}
.fdr-search svg { color: var(--ink-5); flex-shrink: 0; }
.fdr-search input {
  border: none; outline: none; background: transparent;
  font-size: 12.5px; font-family: inherit;
  width: 100%; padding: 4px 0;
  color: var(--ink-1);
}

/* ─── 费用表 ───────────────────────────────── */
.fdr-table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.fdr-section + .fdr-section { border-top: 1px solid var(--line); }
.fdr-group, .fdr-group-flat {
  display: grid;
  grid-template-columns: 32px 1fr 70px 70px 110px 70px;
  align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.fdr-group-pick { display: inline-flex; align-items: center; cursor: pointer; }
.fdr-group-t {
  font-size: 13px; font-weight: 700;
  color: var(--ink-1); letter-spacing: -0.01em;
}
.fdr-group-c {
  font-size: 11px; color: var(--ink-4);
  font-family: 'JetBrains Mono', monospace;
  margin-right: auto; padding-left: 6px;
}
.fdr-group-hd-cols {
  display: contents;
}
.fdr-group-hd-cols > span {
  font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em;
  text-align: right;
}
.fdr-group-flat .fdr-group-t { grid-column: 1 / span 2; }

/* 行 */
.fdr-row {
  display: grid;
  grid-template-columns: 32px 1fr 70px 70px 110px 70px;
  align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-2);
  transition: background 0.12s;
}
.fdr-row:last-child { border-bottom: none; }
.fdr-row:hover { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.fdr-row.on { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.fdr-row.is-free { opacity: 0.7; }

.fdr-cell { font-size: 13px; color: var(--ink-2); }
.fdr-c-pick { display: inline-flex; align-items: center; cursor: pointer; }
.fdr-c-name .n {
  font-size: 13px; font-weight: 500;
  color: var(--ink-1);
}
.fdr-c-name .cn { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.fdr-c-name .spec { color: var(--ink-5); }
.fdr-c-unit, .fdr-c-qty {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-3);
}
.fdr-c-price { text-align: right; }
.fdr-amt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  color: #F25E2B;
  letter-spacing: -0.01em;
}
.fdr-free {
  font-size: 11px; font-weight: 600;
  color: #00A884;
  padding: 2px 8px;
  background: #CFF5E7; border-radius: 4px;
}
.fdr-c-ccy { text-align: right; }
.fdr-ccy {
  font-size: 11px; font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.fdr-ccy-usd { background: color-mix(in srgb, #00A884 12%, var(--surface)); color: #00755D; border: 1px solid color-mix(in srgb, #00A884 30%, transparent); }
.fdr-ccy-cny { background: color-mix(in srgb, #E54334 10%, var(--surface)); color: #C7301F; border: 1px solid color-mix(in srgb, #E54334 28%, transparent); }
.fdr-ccy-eur { background: color-mix(in srgb, #1677FF 10%, var(--surface)); color: var(--brand-2);    border: 1px solid color-mix(in srgb, #1677FF 28%, transparent); }

/* 复选框(用于行 / 组)*/
.fdr-c-pick input,
.fdr-group-pick input { opacity: 0; position: absolute; pointer-events: none; }
.fdr-cbox {
  position: relative;
  display: inline-block;
  width: 16px; height: 16px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  transition: all 0.12s;
}
.fdr-c-pick:hover .fdr-cbox,
.fdr-group-pick:hover .fdr-cbox { border-color: var(--brand); }
.fdr-c-pick input:checked + .fdr-cbox,
.fdr-group-pick input:checked + .fdr-cbox {
  background: var(--brand); border-color: var(--brand);
}
.fdr-c-pick input:checked + .fdr-cbox::after,
.fdr-group-pick input:checked + .fdr-cbox::after {
  content: ''; position: absolute; left: 4px; top: 0.5px;
  width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fdr-empty {
  padding: 28px 16px; text-align: center;
  font-size: 13px; color: var(--ink-4);
}

/* 注释 */
.fdr-disclaimer {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 16px; padding: 12px 14px;
  font-size: 11.5px; color: var(--ink-4); line-height: 1.55;
  background: color-mix(in srgb, #FFB020 8%, var(--surface));
  border: 1px solid color-mix(in srgb, #FFB020 24%, transparent);
  border-radius: 8px;
}
.fdr-disclaimer svg { flex-shrink: 0; margin-top: 2px; color: #FFB020; }

/* ─── 底部 sticky footer ──────────────────── */
.fdr-footer {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  z-index: 5;
}
.fdr-footer-l {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-3);
}
.fdr-footer-l b { color: var(--ink-1); font-weight: 700; font-family: 'JetBrains Mono', monospace; letter-spacing: -0.01em; }
.fdr-footer-l b.hi { color: #F25E2B; font-size: 16px; }
.fdr-footer-r {
  display: flex; gap: 8px;
}
.fdr-cta-book {
  padding: 0 22px; height: 40px;
  font-size: 14px; font-weight: 600;
  border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}

@media (max-width: 880px) {
  .fdr { width: 100vw; }
  .fdr-group, .fdr-row, .fdr-group-flat {
    grid-template-columns: 28px 1fr 50px 80px 56px;
  }
  .fdr-c-unit { display: none; }
  .fdr-group-hd-cols > span:nth-child(1) { display: none; }
}


/* ============================================================
   费用明细 · 行程轴 v2(可展开)
   ============================================================ */

.fdr-trackv2 {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: padding 0.2s;
}
.fdr-trackv2.is-open { padding-bottom: 0; }

.fdr-trackv2-summary {
  display: grid;
  grid-template-columns: 88px 88px 1fr 88px 36px;
  gap: 14px; align-items: center;
}
.fdr-trackv2-logo {
  width: 56px; height: 56px;
  border-radius: 12px;
  margin: 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 10px rgba(10,15,28,0.08);
}
.fdr-trackv2-stop {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}
.fdr-trackv2-stop .d {
  font-size: 26px; font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.02em;
  line-height: 1;
}
.fdr-trackv2-stop .w {
  font-size: 12px; color: var(--ink-4);
  margin-top: 6px;
}
.fdr-trackv2-rail {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  min-width: 0;
}
.fdr-trackv2-tag {
  font-size: 11.5px; font-weight: 600;
  padding: 3px 12px;
  border-radius: 5px;
  letter-spacing: 0.04em;
}
.fdr-trackv2-tag.is-direct  { color: #007A63; background: #CFF5E7; border: 1px solid #95E6CC; }
.fdr-trackv2-tag.is-transit { color: #E54334; background: #FFE4E0; border: 1px solid #F8B7AE; }
.fdr-trackv2-line {
  width: 100%;
  display: flex; align-items: center; gap: 0;
  position: relative;
}
.fdr-trackv2-line .dot {
  width: 6px; height: 6px;
  background: var(--brand);
  border-radius: 50%;
  flex-shrink: 0;
}
.fdr-trackv2-line .bar {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 50%, transparent));
}
.fdr-trackv2-line .arrow {
  color: var(--brand);
  font-size: 10px;
  margin-left: -2px;
  flex-shrink: 0;
  line-height: 1;
}
.fdr-trackv2-days {
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
}
.fdr-trackv2-toggle {
  width: 36px; height: 36px;
  border: 1.5px solid var(--brand);
  background: var(--surface);
  border-radius: 50%;
  cursor: pointer;
  color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.fdr-trackv2-toggle:hover { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }

.fdr-trackv2-detail {
  margin-top: 14px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: none;
  margin-left: -1px; margin-right: -1px;
}
.fdr-trackv2-detail-row {
  display: grid;
  grid-template-columns: 80px 50px 1fr;
  gap: 14px; align-items: center;
}
.fdr-trackv2-detail-date {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}
.fdr-trackv2-detail-date .d {
  font-size: 15px; font-weight: 700;
  color: var(--ink-1); letter-spacing: -0.01em;
  margin-right: 6px;
}
.fdr-trackv2-detail-date .w {
  font-size: 12px; color: var(--ink-4);
}
.fdr-trackv2-detail-mark {
  display: flex; justify-content: center;
}
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 22px;
  font-size: 11px; font-weight: 700;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.mark.pol { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.mark.pod { background: #CFF5E7; color: #007A63; border: 1px solid #95E6CC; }
.mark.t-s { background: #FFF6E0; color: #B07414; border: 1px solid #F5D38C; }
.fdr-trackv2-detail-port .n {
  font-size: 15px; font-weight: 700;
  color: var(--ink-1); letter-spacing: -0.01em;
  font-family: 'JetBrains Mono', monospace;
}
.fdr-trackv2-detail-port .t {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.fdr-trackv2-detail-port .t:hover { text-decoration: underline; }
.fdr-trackv2-detail-port .t svg { opacity: 0.85; }

.fdr-trackv2-detail-link {
  display: grid;
  grid-template-columns: 80px 50px 1fr;
  gap: 14px;
  margin: 6px 0;
}
.fdr-trackv2-detail-link-bar {
  grid-column: 2;
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, var(--line) 0%, var(--line) 50%, transparent 50%, transparent 100%);
  background-size: 2px 8px;
  background-repeat: repeat-y;
  margin: 0 auto;
}
.fdr-trackv2-detail-link-days {
  grid-column: 3;
  align-self: center;
  font-size: 11.5px;
  color: var(--ink-4);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}

@media (max-width: 880px) {
  .fdr-trackv2-summary {
    grid-template-columns: 64px 64px 1fr 64px 32px;
    gap: 8px;
  }
  .fdr-trackv2-stop .d { font-size: 20px; }
  .fdr-trackv2-logo { width: 44px; height: 44px; font-size: 11px; }
}


/* ============================================================
   筛选条 + 弹层(Popover)·  排序/船东/离港/DET 等
   ============================================================ */

.rq-filterbar {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 0 12px;
}
.rq-filterbar-row1 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.rq-filterbar-row1 > .rq-pop {
  flex-shrink: 0;
  margin-left: auto;
}
.rq-filterbar-tabs {
  display: inline-flex; gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}
.rq-filterbar-tabs button {
  background: transparent; border: none; cursor: pointer;
  padding: 5px 14px;
  font-size: 12.5px; color: var(--ink-3);
  border-radius: 999px; font-family: inherit; font-weight: 500;
  transition: all 0.15s;
}
.rq-filterbar-tabs button:hover { color: var(--ink-1); }
.rq-filterbar-tabs button.active {
  background: var(--surface); color: var(--brand);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(10,15,28,0.06);
}
.rq-filterbar-pops {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
.rq-filter-spacer { flex: 1; }
.rq-filter-sep {
  width: 1px; height: 18px;
  background: var(--line);
  margin: 0 2px;
}

/* Popover */
.rq-pop { position: relative; }
.rq-pop-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit; font-size: 12.5px;
  color: var(--ink-3);
  transition: all 0.12s;
  white-space: nowrap;
}
.rq-pop-trigger:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--ink-1); }
.rq-pop-trigger.is-open { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.rq-pop-trigger.on {
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 38%, transparent);
  color: var(--brand);
}
.rq-pop-trigger.on .rq-pop-label-on { color: var(--brand); font-weight: 600; }
.rq-pop-trigger > svg { color: var(--ink-4); flex-shrink: 0; }
.rq-pop-trigger.on > svg { color: var(--brand); }
.rq-pop-label { color: var(--ink-4); }
.rq-pop-label-on { color: var(--brand); }
.rq-pop-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font-size: 10.5px; font-weight: 700;
  background: var(--brand); color: #fff;
  border-radius: 9px;
  font-family: 'JetBrains Mono', monospace;
}
.rq-pop-caret { font-size: 9px; opacity: 0.6; transition: transform 0.15s; }

/* Popover panel */
.rq-pop-panel {
  position: absolute; top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(10,15,28,0.14), 0 2px 6px rgba(10,15,28,0.05);
  z-index: 60;
  overflow: hidden;
  animation: rq-pop-in 0.16s cubic-bezier(0.32, 0.72, 0.32, 1);
}
@keyframes rq-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rq-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
  font-size: 11px; font-weight: 600; color: var(--ink-4);
  letter-spacing: 0.02em;
}
.rq-pop-clear {
  background: transparent; border: none; cursor: pointer;
  font-size: 11px; color: var(--ink-4); font-family: inherit;
  padding: 2px 6px; border-radius: 4px;
  transition: all 0.12s;
}
.rq-pop-clear:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.rq-pop-list { padding: 4px; max-height: 320px; overflow-y: auto; }
.rq-pop-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: 7px; cursor: pointer;
  transition: background 0.12s;
}
.rq-pop-row:hover { background: var(--surface-2); }
.rq-pop-row.on { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.rq-pop-row input { opacity: 0; position: absolute; pointer-events: none; }
.rq-pop-cbox {
  position: relative; display: inline-block;
  width: 16px; height: 16px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  transition: all 0.12s;
  flex-shrink: 0;
}
.rq-pop-row.on .rq-pop-cbox {
  background: var(--brand); border-color: var(--brand);
}
.rq-pop-row.on .rq-pop-cbox::after {
  content: ''; position: absolute; left: 4px; top: 0.5px;
  width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rq-pop-carrier-logo {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 9.5px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.rq-pop-carrier-name {
  flex: 1;
  font-size: 13px; font-weight: 500;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.rq-pop-row.on .rq-pop-carrier-name { color: var(--brand); font-weight: 600; }
.rq-pop-row-count {
  font-size: 11px; color: var(--ink-4);
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 7px;
  background: var(--surface-2);
  border-radius: 4px;
  font-weight: 600;
}

/* Radio-style popover (single-select) */
.rq-pop-radio { padding: 4px; display: flex; flex-direction: column; gap: 1px; }
.rq-pop-radio button {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: transparent; border: none; cursor: pointer;
  border-radius: 7px;
  font-size: 13px; color: var(--ink-2); font-family: inherit;
  text-align: left;
  transition: all 0.12s;
}
.rq-pop-radio button:hover:not(.rq-pop-radio-clear) { background: var(--surface-2); color: var(--ink-1); }
.rq-pop-radio button.on {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--brand); font-weight: 600;
}
.rq-pop-radio button .t {
  flex: 1;
  text-align: left;
}
.rq-pop-radio button svg:first-child:not(:only-child) { color: var(--ink-4); flex-shrink: 0; }
.rq-pop-radio button.on svg:first-child { color: var(--brand); }
.rq-pop-radio-flush button { padding-left: 16px; }
.rq-pop-section {
  font-size: 10.5px; font-weight: 700;
  color: var(--ink-4); letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px 4px;
}
.rq-pop-section + button { margin-top: 0; }
.rq-pop-radio-clear {
  margin-top: 4px;
  font-size: 11.5px !important;
  color: var(--danger) !important;
  border-top: 1px solid var(--line-2);
  border-radius: 0 !important;
  padding: 8px 10px !important;
}
.rq-pop-radio-clear:hover { background: color-mix(in srgb, var(--danger) 8%, transparent) !important; color: var(--danger) !important; }

/* 清除全部筛选 */
.rq-filter-clearall {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: 7px; cursor: pointer;
  font-size: 12px; color: var(--danger); font-family: inherit;
  transition: all 0.12s;
}
.rq-filter-clearall:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }

/* 隐藏旧的 .rq-results-secondary,改用 .rq-filterbar */
.rq-results-secondary { display: none !important; }


/* ─── Popover · 显示偏好 toggle ─────────────────────────── */
.rq-pop-section-block { padding: 4px 4px 8px; }
.rq-pop-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 7px;
  transition: background 0.12s;
}
.rq-pop-toggle:hover { background: var(--surface-2); }
.rq-pop-toggle .t {
  flex: 1;
  font-size: 13px; color: var(--ink-2);
  letter-spacing: -0.01em;
  display: flex; flex-direction: column; gap: 2px;
}
.rq-pop-toggle .t .d {
  font-size: 11px; color: var(--ink-4); font-weight: 400;
  letter-spacing: 0;
}
.rq-pop-toggle input { opacity: 0; position: absolute; pointer-events: none; }
.rq-pop-toggle .sw {
  position: relative;
  width: 32px; height: 18px;
  background: var(--line);
  border-radius: 999px;
  transition: background 0.18s;
  flex-shrink: 0;
}
.rq-pop-toggle .sw::after {
  content: ''; position: absolute;
  left: 2px; top: 2px;
  width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(10,15,28,0.18);
  transition: transform 0.18s, background 0.18s;
}
.rq-pop-toggle input:checked + .sw { background: var(--brand); }
.rq-pop-toggle input:checked + .sw::after { transform: translateX(14px); }

/* row 1 settings popover trigger:用图标按钮形态 */
.rq-filterbar-row1 .rq-pop-trigger {
  padding: 5px 10px 5px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.rq-filterbar-row1 .rq-pop-trigger .rq-pop-label,
.rq-filterbar-row1 .rq-pop-trigger .rq-pop-label-on { display: none; }
.rq-filterbar-row1 .rq-pop-trigger .rq-pop-caret { margin-left: -2px; }


/* ─── 内联显示偏好 toggle pill ──────────────────────────── */
.rq-toggle-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink-3);
  transition: all 0.15s;
  white-space: nowrap;
}
.rq-toggle-pill:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  color: var(--ink-1);
}
.rq-toggle-pill.on {
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  color: var(--brand);
  font-weight: 600;
}
.rq-toggle-pill-dot {
  position: relative;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1.5px solid var(--line);
  flex-shrink: 0;
  transition: all 0.15s;
}
.rq-toggle-pill.on .rq-toggle-pill-dot {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: inset 0 0 0 2.5px #fff;
}

/* ───────────────────────────────────────────────
   首页 Hero 搜索框 · 字段下拉(起运港 / 目的港 / 箱型 / ETD)
   细节参考实时运价(rates-search.jsx 的 PORT_DB / CONTAINER_TYPES)
   ─────────────────────────────────────────────── */
.search-field .sf-caret { font-size: 9px; color: var(--ink-4); margin-left: 2px; vertical-align: middle; }

.hero-drop {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 80;
  width: 340px; max-width: 86vw;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 18px 48px rgba(0,30,80,0.16), 0 0 0 1px rgba(0,0,0,0.02);
  overflow: hidden; cursor: default; opacity: 1;
}

.hero-drop-search {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--line-2);
  color: var(--ink-4);
}
.hero-drop-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 13.5px; color: var(--ink-1); font-family: inherit;
}
.hero-drop-search input::placeholder { color: var(--ink-5); }

.hero-drop-list { max-height: 280px; overflow-y: auto; padding: 6px; }
.hero-drop-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: transparent; border-radius: 9px;
  cursor: pointer; text-align: left; transition: background .12s;
}
.hero-drop-row:hover { background: var(--surface-3); }
.hero-drop-row.on { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.hero-drop-row.disabled { opacity: 0.45; cursor: not-allowed; }
.hero-drop-cn { font-size: 13.5px; font-weight: 600; color: var(--ink-1); flex-shrink: 0; }
.hero-drop-n { font-size: 11px; color: var(--ink-4); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'JetBrains Mono', monospace; }
.hero-drop-k { font-size: 11px; color: var(--brand); font-weight: 600; flex-shrink: 0; }
.hero-drop-tag { font-size: 10px; font-weight: 600; color: var(--ink-4); background: var(--surface-3); padding: 2px 7px; border-radius: 5px; flex-shrink: 0; }
.hero-drop-empty { padding: 22px; text-align: center; font-size: 12.5px; color: var(--ink-4); }

.hero-drop-qty {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-top: 1px solid var(--line-2);
  font-size: 13px; color: var(--ink-3);
}
.hero-qty { display: flex; align-items: center; gap: 12px; }
.hero-qty button {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-1); font-size: 16px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.hero-qty button:hover { border-color: var(--brand); color: var(--brand); }
.hero-qty b { font-size: 15px; color: var(--ink-1); min-width: 20px; text-align: center; }
.hero-qty-done {
  margin-left: auto; padding: 6px 16px; border: none; border-radius: 8px;
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.hero-qty-done:hover { background: var(--brand-2, #0052D9); }