:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --ink: #172033;
  --muted: #667085;
  --line: #d9e0ea;
  --brand: #0f766e;
  --brand-dark: #115e59;
  --accent: #b45309;
  --blue: #1d4ed8;
  --red: #b42318;
  --shadow: 0 16px 40px rgba(23, 32, 51, .1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(20, 184, 166, .45);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  transform: translateY(-140%);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-dark);
  padding: 8px 12px;
  font-weight: 900;
  box-shadow: var(--shadow);
}
.skip-link:focus { transform: translateY(0); }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  padding: 22px 18px;
  background: #101828;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #14b8a6;
  color: #062923;
  font-weight: 900;
}
.brand strong, .brand small, .source-card b, .source-card span { display: block; }
.brand small { color: #98a2b3; }
.nav { display: grid; gap: 6px; }
.nav a {
  padding: 10px 12px;
  border-radius: 8px;
  color: #d0d5dd;
  font-weight: 700;
}
.nav a.active, .nav a:hover { background: #1d2939; color: #fff; }
.source-card {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}
.source-card span { margin-top: 6px; color: #d0d5dd; font-size: 13px; }

main { margin-left: 248px; padding: 24px; }
.workspace, .panel { max-width: 1240px; margin: 0 auto 22px; }
.topbar, .section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
}
.eyebrow {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
h1, h2, h3 { margin: 0; line-height: 1.18; }
h1 { max-width: 760px; font-size: clamp(30px, 4vw, 54px); }
h2 { font-size: 24px; }
h3 { font-size: 18px; }

.search-box {
  display: flex;
  width: min(460px, 100%);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.search-box input { min-width: 0; flex: 1; border: 0; padding: 12px 14px; outline: 0; }
.search-box button { width: 42px; border: 0; background: #eef2f6; color: var(--muted); font-size: 22px; }

.search-insights {
  display: none;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.search-insights.active { display: grid; }
.search-insights a {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #344054;
}
.search-insights b, .search-insights span { display: block; }
.search-insights b { color: var(--brand-dark); font-size: 20px; line-height: 1; }
.search-insights span { margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 900; }

.hero-panel {
  min-height: 360px;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(16,24,40,.92), rgba(16,24,40,.66) 42%, rgba(16,24,40,.18)),
    url("https://images.unsplash.com/photo-1722913598500-82c0eb58ee8a?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=80&w=1800") center 52% / cover no-repeat;
  display: grid;
  grid-template-columns: 1fr;
  color: #fff;
  box-shadow: var(--shadow);
}
.hero-copy { padding: 44px; align-self: end; }
.hero-copy p:not(.eyebrow) { max-width: 690px; color: #e4e7ec; font-size: 17px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.quick-actions a {
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,.08);
  font-weight: 900;
}

.ship-visual {
  display: none;
}
.ship-visual::after {
  content: none;
}
.sun {
  position: absolute;
  top: 36px;
  right: 64px;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 32%, #fff7cc 0 18%, #fbbf24 46%, #f59e0b 100%);
  box-shadow: 0 0 0 18px rgba(251, 191, 36, .14), 0 0 70px rgba(251, 191, 36, .42);
}
.route {
  position: absolute;
  border: 1px dashed rgba(255,255,255,.30);
  border-radius: 999px;
  transform: rotate(-18deg);
}
.route-a { width: 330px; height: 150px; right: 34px; top: 108px; }
.route-b { width: 240px; height: 108px; right: 102px; top: 154px; opacity: .65; }
.ship {
  position: absolute;
  right: 44px;
  bottom: 76px;
  width: min(410px, 86%);
  height: 146px;
  border-radius: 10px 46px 58px 74px;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(15,23,42,.16) 7% 7.7%, transparent 7.7% 16%, rgba(15,23,42,.13) 16% 16.7%, transparent 16.7% 25%, rgba(15,23,42,.13) 25% 25.7%, transparent 25.7% 34%, rgba(15,23,42,.13) 34% 34.7%, transparent 34.7% 43%, rgba(15,23,42,.13) 43% 43.7%, transparent 43.7% 52%, rgba(15,23,42,.13) 52% 52.7%, transparent 52.7% 61%, rgba(15,23,42,.13) 61% 61.7%, transparent 61.7%),
    linear-gradient(180deg, #ffffff 0 54%, #f2f4f7 54% 69%, #1d4ed8 69% 86%, #0f172a 86% 100%);
  box-shadow: 0 34px 58px rgba(0,0,0,.34);
  transform: perspective(620px) rotateY(-8deg) rotateZ(-1.5deg);
}
.ship:before {
  content: "";
  position: absolute;
  left: 62px;
  top: -76px;
  width: 254px;
  height: 92px;
  border-radius: 12px 18px 0 0;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(15,23,42,.20) 8% 8.8%, transparent 8.8% 17%, rgba(15,23,42,.20) 17% 17.8%, transparent 17.8% 26%, rgba(15,23,42,.20) 26% 26.8%, transparent 26.8% 35%, rgba(15,23,42,.20) 35% 35.8%, transparent 35.8% 44%, rgba(15,23,42,.20) 44% 44.8%, transparent 44.8% 53%, rgba(15,23,42,.20) 53% 53.8%, transparent 53.8%),
    linear-gradient(180deg, #ffffff 0 28%, #e4e7ec 28% 33%, #ffffff 33% 60%, #d0d5dd 60% 65%, #f8fafc 65% 100%);
  box-shadow: 0 -16px 0 -7px #f8fafc, 0 11px 24px rgba(15,23,42,.16);
}
.ship:after {
  content: "";
  position: absolute;
  left: 16px;
  right: 28px;
  top: 24px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #0f172a 0 36%, transparent 39%) 0 0 / 34px 18px repeat-x;
  opacity: .88;
}
.ship span {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 26px;
  height: 12px;
  margin: 62px 0 0 30px;
  border-radius: 3px;
  background: linear-gradient(180deg, #bfdbfe, #1d4ed8);
  box-shadow: 44px 0 0 #bfdbfe, 88px 0 0 #bfdbfe, 132px 0 0 #bfdbfe, 176px 0 0 #bfdbfe, 220px 0 0 #bfdbfe;
}
.wave {
  position: absolute;
  left: -40px;
  right: -120px;
  height: 92px;
  bottom: 0;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255,255,255,.64) 0 7%, transparent 8%),
    radial-gradient(ellipse at 48% 30%, rgba(255,255,255,.44) 0 6%, transparent 7%),
    radial-gradient(ellipse at 78% 18%, rgba(255,255,255,.54) 0 7%, transparent 8%),
    linear-gradient(180deg, rgba(14,165,233,.18), rgba(15,118,110,.62));
}
.wave-two { bottom: -38px; opacity: .62; filter: blur(.3px); }
.ship-visual .sun,
.ship-visual .route,
.ship-visual .ship,
.ship-visual .wave {
  display: none;
}

.dashboard, .line-grid, .ship-grid, .glossary-grid, .guide-grid, .homeport-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.dashboard { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric, .panel, .planner-panel, .line-card, .ship-card, .route-card, .port-detail, .glossary-card, .guide-card, .homeport-card, .planner-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.panel { padding: 22px; }
.planner-panel {
  margin-top: 16px;
  padding: 18px;
}
.metric { padding: 16px; }
.metric b { display: block; color: var(--brand-dark); font-size: 30px; line-height: 1; }
.metric span { display: block; margin-top: 8px; color: #344054; font-weight: 900; }
.metric small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }

.filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.planner-controls select { min-width: 132px; }
select, button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #344054;
  padding: 8px 12px;
}
button { font-weight: 900; }
.section-summary { margin: 10px 0 0; color: var(--muted); }

.line-card, .ship-card, .glossary-card, .guide-card, .route-card, .homeport-card { padding: 16px; }
.line-card,
.homeport-card {
  position: relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
.line-card:hover,
.line-card:focus-visible,
.homeport-card:hover,
.homeport-card:focus-visible {
  border-color: rgba(15, 118, 110, .44);
  box-shadow: 0 18px 42px rgba(15, 118, 110, .14);
  transform: translateY(-2px);
}
.drawer-trigger {
  display: block;
  margin-top: 14px;
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(15, 118, 110, .25);
  border-radius: 8px;
  padding: 8px 12px;
  background: #ecfdf3;
  color: var(--brand-dark);
  font-weight: 900;
  text-align: center;
}
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 2px 9px;
  background: #ecfdf3;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.badge.warn { background: #fffaeb; color: var(--accent); }
.badge.blue { background: #eff8ff; color: var(--blue); }
.muted { color: var(--muted); }
.line-card p, .ship-card p, .route-card p, .glossary-card p, .guide-card p, .homeport-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.stats div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #f8fafc;
}
.stats b, .stats span { display: block; }
.stats b { color: var(--brand-dark); }
.stats span { color: var(--muted); font-size: 12px; font-weight: 900; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  background: #fff;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.planner-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.planner-card {
  padding: 14px;
  border-top: 5px solid var(--brand);
}
.planner-score {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #ecfdf3;
  color: var(--brand-dark);
  font-weight: 900;
}
.planner-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.planner-reasons {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: #344054;
  font-size: 13px;
}

.ship-card { border-top: 5px solid var(--brand); min-height: 238px; }
.ship-card.is-hidden { display: none; }
.ship-card[data-class="奢华"] { border-top-color: #7c2d12; }
.ship-card[data-class="高端"] { border-top-color: #0f766e; }
.ship-card[data-class="大众"] { border-top-color: #1d4ed8; }
.ship-card[data-class="探险"] { border-top-color: #b45309; }

.drawer-open { overflow: hidden; }
.fleet-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
  background: rgba(16, 24, 40, .46);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.fleet-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.fleet-drawer {
  position: relative;
  width: min(720px, 100vw);
  height: 100%;
  padding: 28px;
  overflow-y: auto;
  background: #f8fafc;
  box-shadow: -24px 0 60px rgba(16, 24, 40, .24);
  transform: translateX(100%);
  transition: transform .24s ease;
}
.fleet-drawer-overlay.is-open .fleet-drawer { transform: translateX(0); }
.fleet-drawer-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  box-shadow: var(--shadow);
}
.fleet-drawer-head {
  padding: 6px 54px 18px 0;
  border-bottom: 1px solid var(--line);
}
.fleet-drawer-head h2 { margin-bottom: 8px; }
.fleet-drawer-head p:last-child { margin: 0; color: var(--muted); }
.fleet-drawer-body {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.fleet-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.fleet-overview-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.fleet-overview-item b,
.fleet-overview-item span {
  display: block;
}
.fleet-overview-item b {
  color: var(--brand-dark);
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.fleet-overview-item span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.fleet-matrix-head {
  margin-top: 4px;
}
.fleet-matrix-head h3 {
  margin-bottom: 0;
}
.drawer-ship-card {
  min-height: 0;
  box-shadow: none;
}

.comparison-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.comparison-table { width: 100%; min-width: 860px; border-collapse: collapse; background: #fff; }
.comparison-table th, .comparison-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.comparison-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  color: #344054;
  font-size: 12px;
  text-transform: uppercase;
}
.comparison-table tr:last-child td { border-bottom: 0; }
.yes { color: var(--brand-dark); font-weight: 900; }
.partial { color: var(--accent); font-weight: 900; }
.no { color: var(--muted); }

.route-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 16px;
  margin-top: 16px;
}
.route-list {
  display: grid;
  gap: 12px;
  max-height: 1200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-gutter: stable;
}
.route-card { cursor: pointer; }
.route-card.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(15, 118, 110, .14), var(--shadow); }
.port-detail { padding: 16px; align-self: start; position: sticky; top: 24px; }
.route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.route-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  background: #f8fafc;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}
.route-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.route-detail-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}
.route-detail-grid b,
.route-detail-grid span {
  display: block;
}
.route-detail-grid b {
  color: var(--brand-dark);
  line-height: 1.2;
}
.route-detail-grid span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.route-dl,
.homeport-dl {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}
.route-dl dt,
.homeport-dl dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.route-dl dd,
.homeport-dl dd {
  margin: 2px 0 0;
  color: #344054;
  font-size: 13px;
}
.route-info-block {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.route-info-block h4 {
  margin: 0;
  font-size: 14px;
}
.route-info-block ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: #344054;
  font-size: 13px;
}
.homeport-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.compact-head { align-items: center; }
.homeport-card h3 { padding-right: 72px; }
.homeport-card { position: relative; }
.homeport-card .badge {
  position: absolute;
  top: 16px;
  right: 16px;
}
.homeport-detail-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}
.port-map {
  position: relative;
  height: 260px;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #dbeafe;
}
.port-map .leaflet-control-attribution { font-size: 10px; }
.map-note { margin: -4px 0 14px; color: var(--muted); font-size: 12px; }
.map-fallback { display: grid; place-items: center; height: 100%; color: var(--muted); font-weight: 900; }

.glossary-card dl { display: grid; gap: 8px; margin: 12px 0 0; }
.glossary-card dt { color: var(--muted); font-size: 12px; font-weight: 900; }
.glossary-card dd { margin: 2px 0 0; color: #344054; font-size: 13px; }
.guide-card ul { display: grid; gap: 7px; margin: 12px 0 0; padding-left: 20px; color: #344054; }

.feedback-open {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: var(--shadow);
}
.feedback-modal {
  width: min(620px, calc(100vw - 32px));
  border: 0;
  padding: 0;
  border-radius: 8px;
  background: transparent;
}
.feedback-modal::backdrop { background: rgba(16, 24, 40, .46); }
.modal-card { padding: 18px; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head button { width: 40px; padding: 0; font-size: 22px; }
textarea {
  width: 100%;
  min-height: 130px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  resize: vertical;
}
.modal-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.toast { min-height: 22px; margin: 8px 0 0; color: var(--brand-dark); font-weight: 900; }

@media (max-width: 1024px) {
  .sidebar {
    position: static;
    width: auto;
    padding: 14px;
    gap: 14px;
  }
  .nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .nav a { flex: 0 0 auto; }
  .source-card { display: none; }
  main { margin-left: 0; padding: 16px; }
  .topbar, .section-head { align-items: stretch; flex-direction: column; }
  .filters { justify-content: stretch; }
  .filters select, .filters button, .section-head > select { width: 100%; }
}

@media (max-width: 620px) {
  h1 { font-size: 34px; }
  h2 { font-size: 21px; }
  .hero-copy { padding: 26px; }
  .ship { right: 24px; transform: scale(.82); transform-origin: right bottom; }
  .dashboard, .line-grid, .ship-grid, .glossary-grid, .guide-grid, .homeport-grid, .planner-results, .search-insights { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}

/* G9WIKI aviation-style visual unification */
:root {
  --bg: #f8fafc;
  --bg-2: #eef3f8;
  --panel: rgba(255,255,255,.92);
  --surface: rgba(255,255,255,.78);
  --surface-strong: rgba(255,255,255,.92);
  --surface-solid: #fff;
  --ink: #172033;
  --text: #172033;
  --muted: #64748b;
  --line: rgba(15,23,42,.10);
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-2: #0f766e;
  --accent: #b45309;
  --brand-dim: rgba(37,99,235,.11);
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 8px 32px rgba(15,23,42,.10);
  --shadow-lg: 0 18px 52px rgba(15,23,42,.16);
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

body {
  font-family: "Plus Jakarta Sans", "Noto Sans SC", "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  background:
    radial-gradient(circle at 10% -8%, rgba(37,99,235,.13), transparent 30%),
    radial-gradient(circle at 96% 10%, rgba(14,165,233,.10), transparent 26%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}

.sidebar {
  width: 200px;
  padding: 24px 18px;
  background: var(--surface-strong);
  color: var(--ink);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.brand {
  padding: 10px 8px;
  margin-bottom: 0;
  border-radius: var(--radius);
  background: rgba(255,255,255,.54);
  transition: background var(--transition);
}
.brand:hover { background: rgba(255,255,255,.74); }
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg,var(--brand),#1d4ed8);
  color: #fff;
  box-shadow: var(--shadow);
}
.brand strong {
  font-family: "Noto Serif SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--ink);
}
.brand small { color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.nav { gap: 2px; }
.nav a {
  color: var(--muted);
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  transition: all var(--transition);
}
.nav a.active,
.nav a:hover {
  background: rgba(37,99,235,.08);
  color: var(--ink);
  transform: translateX(2px);
}
.source-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.48);
}
.source-card b { color: var(--brand); }
.source-card span { color: var(--muted); }

main { margin-left: 200px; padding: 28px min(4vw,52px) 64px; }
.workspace,
.panel,
.planner-panel { max-width: 1440px; }

.hero-panel {
  min-height: 330px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(16,24,40,.92), rgba(16,24,40,.66) 42%, rgba(16,24,40,.18)),
    url("https://images.unsplash.com/photo-1722913598500-82c0eb58ee8a?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=80&w=1800") center 52% / cover no-repeat;
  box-shadow: var(--shadow-lg);
}
.hero-copy { padding: 34px; }
.hero-copy .eyebrow,
.hero-panel .eyebrow { color: #fde68a; letter-spacing: 0; }
.hero-copy p:not(.eyebrow) { color: rgba(255,255,255,.86); }
h1 { font-size: clamp(30px,4.6vw,58px); line-height: 1.04; }
h2 { color: var(--text); font-size: 22px; }

.search-box,
.metric,
.panel,
.planner-panel,
.line-card,
.ship-card,
.route-card,
.port-detail,
.glossary-card,
.guide-card,
.homeport-card,
.planner-card,
.search-insights a {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}
.panel,
.planner-panel {
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.metric b,
.search-insights b,
.route-detail-grid b,
.note b { color: var(--brand); }
.metric span { color: var(--muted); }
.card-head,
.line-card header,
.ship-card header {
  background: linear-gradient(135deg,var(--brand),var(--brand-2));
}
select,
button,
input,
textarea {
  border-radius: var(--radius);
  border-color: var(--line);
}
select:focus,
input:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}
.tag,
.badge {
  background: rgba(37,99,235,.10);
  color: var(--brand);
}
.table-wrap,
.modal-card {
  border-radius: var(--radius);
  background: var(--surface-strong);
}

@media (max-width: 1024px) {
  .sidebar {
    position: static;
    width: auto;
    min-width: 0;
    height: auto;
  }
  main {
    margin-left: 0;
    padding: 18px;
  }
}

body.dark-mode {
  --bg: #07111f;
  --bg-2: #0f172a;
  --panel: rgba(15, 23, 42, .92);
  --surface: rgba(15, 23, 42, .78);
  --surface-strong: rgba(15, 23, 42, .94);
  --surface-solid: #111827;
  --ink: #e5e7eb;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --line: rgba(255, 255, 255, .14);
  --brand-dim: rgba(96, 165, 250, .16);
  --shadow: 0 16px 42px rgba(0, 0, 0, .32);
  --shadow-lg: 0 22px 64px rgba(0, 0, 0, .46);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% -8%, rgba(37,99,235,.22), transparent 30%),
    radial-gradient(circle at 96% 10%, rgba(20,184,166,.15), transparent 26%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}

body.dark-mode .sidebar,
body.dark-mode .hero-panel,
body.dark-mode .panel,
body.dark-mode .metric,
body.dark-mode .line-card,
body.dark-mode .ship-card,
body.dark-mode .route-card,
body.dark-mode .homeport-card,
body.dark-mode .glossary-card,
body.dark-mode .guide-card,
body.dark-mode .fleet-drawer,
body.dark-mode .modal-card {
  background: var(--surface-strong);
  border-color: var(--line);
  color: var(--ink);
}

body.dark-mode .brand,
body.dark-mode .nav a.active,
body.dark-mode .nav a:hover,
body.dark-mode .quick-actions a,
body.dark-mode .tag,
body.dark-mode .tag-list span,
body.dark-mode .loyalty-table,
body.dark-mode .table-wrap,
body.dark-mode .stats div,
body.dark-mode .fleet-overview-item,
body.dark-mode .homeport-detail-card,
body.dark-mode .route-meta span,
body.dark-mode .route-detail-grid div,
body.dark-mode .planner-score,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode button {
  background-color: rgba(15, 23, 42, .9);
  border-color: var(--line);
  color: var(--ink);
}

body.dark-mode .brand:hover,
body.dark-mode .quick-actions a:hover {
  background-color: rgba(30, 41, 59, .94);
}

body.dark-mode .drawer-trigger {
  background: rgba(37, 99, 235, .18);
  border-color: rgba(96, 165, 250, .38);
  color: #bfdbfe;
}

body.dark-mode .drawer-trigger:hover {
  background: rgba(37, 99, 235, .26);
  border-color: rgba(96, 165, 250, .56);
}

body.dark-mode .brand small,
body.dark-mode .nav a,
body.dark-mode .section-summary,
body.dark-mode .metric span,
body.dark-mode .muted,
body.dark-mode td,
body.dark-mode .fleet-drawer-summary,
body.dark-mode .stats span,
body.dark-mode .fleet-overview-item span,
body.dark-mode .route-detail-grid span {
  color: var(--muted);
}

body.dark-mode th,
body.dark-mode .eyebrow,
body.dark-mode .metric strong,
body.dark-mode .stats b,
body.dark-mode .fleet-overview-item b,
body.dark-mode .route-detail-grid b,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
  color: var(--ink);
}

body.dark-mode .fleet-drawer-overlay,
body.dark-mode .feedback-modal::backdrop {
  background: rgba(2, 6, 23, .72);
}

body.dark-mode .leaflet-tile {
  filter: brightness(.72) contrast(1.08) saturate(.82);
}