/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0d1117;
  --bg2:       #161b22;
  --bg3:       #1c2230;
  --border:    #30363d;
  --accent:    #2196f3;
  --accent2:   #0d47a1;
  --text:      #e6edf3;
  --text2:     #9ea8b3;
  --success:   #3fb950;
  --danger:    #f85149;
  --origin:    #26a69a;
  --dest:      #ef5350;
  --sidebar-w: 320px;
  --radius:    8px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.inp:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
#sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px;
  overflow-y: auto;
  z-index: 1000;
}

#map {
  position: fixed;
  top: 0; left: var(--sidebar-w); right: 0; bottom: 0;
}

/* ── Brand ───────────────────────────────────────────────────────────────── */
#brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.brand-icon {
  font-size: 32px;
  line-height: 1;
}

.brand-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--accent);
}

.brand-sub {
  font-size: 11px;
  color: var(--text2);
  letter-spacing: .3px;
}

/* ── Waypoint block ──────────────────────────────────────────────────────── */
.waypoint-block {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.waypoint-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text2);
}

.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-origin { background: var(--origin); }
.dot-dest   { background: var(--dest); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 4px;
}

.tab-btn {
  flex: 1;
  padding: 5px 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}

.tab-btn:hover { border-color: var(--accent); color: var(--text); }

.tab-btn.active {
  background: var(--accent2);
  border-color: var(--accent);
  color: #fff;
}

/* ── Panes ───────────────────────────────────────────────────────────────── */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.inp {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}

.inp:focus { border-color: var(--accent); }
.inp::placeholder { color: var(--text2); }

.coords-row {
  display: flex;
  gap: 6px;
}

.coords-inp { flex: 1; }

/* ── Autocomplete dropdown ───────────────────────────────────────────────── */
.autocomplete-wrap { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 220px;
  overflow-y: auto;
  z-index: 2000;
  display: none;
}

.dropdown.open { display: block; }

.dropdown-item {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover, .dropdown-item.focused, .dropdown-item.active { background: var(--bg3); }

.di-locode {
  font-size: 11px;
  font-family: monospace;
  color: var(--accent);
  background: rgba(33,150,243,.12);
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}

.di-info { flex: 1; min-width: 0; }
.di-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-country { font-size: 11px; color: var(--text2); }

/* ── Selected port chip ──────────────────────────────────────────────────── */
.selected-port {
  font-size: 12px;
  color: var(--success);
  min-height: 0;
  transition: all .2s;
}

.selected-port:not(:empty) {
  background: rgba(63,185,80,.08);
  border: 1px solid rgba(63,185,80,.25);
  border-radius: 5px;
  padding: 5px 8px;
}

/* ── Speed selector ──────────────────────────────────────────────────────── */
#speed-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.speed-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text2);
}

.speed-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.speed-inp {
  width: 72px;
  flex-shrink: 0;
  text-align: center;
}

.speed-unit {
  font-size: 12px;
  color: var(--text2);
  flex-shrink: 0;
}

.speed-preset {
  flex: 1;
  font-size: 12px;
  cursor: pointer;
}

/* ── Calculate button ────────────────────────────────────────────────────── */
#calc-btn {
  width: 100%;
  padding: 11px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .3px;
  transition: background .15s, transform .1s;
}

#calc-btn:hover  { background: #1976d2; }
#calc-btn:active { transform: scale(.98); }
#calc-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Error box ───────────────────────────────────────────────────────────── */
#error-box {
  background: rgba(248,81,73,.1);
  border: 1px solid rgba(248,81,73,.4);
  border-radius: var(--radius);
  color: var(--danger);
  padding: 10px 12px;
  font-size: 13px;
}

/* ── Loading ─────────────────────────────────────────────────────────────── */
#loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text2);
  font-size: 13px;
}

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Stats panel ─────────────────────────────────────────────────────────── */
#stats-panel {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-route-label {
  font-size: 12px;
  color: var(--text2);
  text-align: center;
  font-weight: 500;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}

.stat-card.wide {
  grid-column: span 2;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}

.stat-label {
  font-size: 11px;
  color: var(--text2);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ── Utilities ───────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Leaflet overrides ───────────────────────────────────────────────────── */
.leaflet-container { background: #0a1929; }

.leaflet-popup-content-wrapper {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
}

.leaflet-popup-tip { background: var(--bg2); }

/* ── Cursor position readout ─────────────────────────────────────────────── */
#cursor-pos {
  position: fixed;
  bottom: 24px;
  right: 12px;
  background: rgba(13,17,23,.82);
  color: var(--text2);
  font-size: 11px;
  font-family: monospace;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  pointer-events: none;
  z-index: 1000;
  letter-spacing: .3px;
}

/* ── Route hover tooltip ─────────────────────────────────────────────────── */
.route-tooltip {
  background: rgba(13,17,23,.92) !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  color: var(--text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  padding: 8px 11px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
  white-space: nowrap;
  pointer-events: none;
}

.route-tooltip::before { display: none !important; }

.rt-row { display: flex; align-items: center; gap: 8px; line-height: 1.7; }
.rt-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rt-label { color: var(--text2); min-width: 72px; }
.rt-val   { color: var(--accent); font-weight: 600; }
.rt-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* Scrollbar styling */
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Top Navigation Bar ──────────────────────────────────────────────────── */
#top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 2000;
  gap: 16px;
}

#nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav-brand-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .5px;
}

#mode-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}

.mode-btn {
  padding: 5px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.mode-btn:hover { color: var(--text); }

.mode-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ── Adjust layout for top nav ────────────────────────────────────────────── */
#sidebar {
  top: 48px;
}

#map {
  top: 48px;
}

/* ── Mode containers ─────────────────────────────────────────────────────── */
#voyage-mode {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#portwatch-mode {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#finder-mode {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#weather-mode,
#market-mode {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Congestion controls (retained for potential reuse) ───────────────────── */
.spinner-sm {
  width: 14px; height: 14px;
  border-width: 2px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text2);
}

.legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Severity colours ────────────────────────────────────────────────────── */
.severity-severe   { background: #ef5350; }
.severity-high     { background: #ff9800; }
.severity-moderate { background: #ffeb3b; }
.severity-low      { background: #4caf50; }

/* ── Port list ───────────────────────────────────────────────────────────── */
#port-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: calc(100vh - 320px);
}

#port-list::-webkit-scrollbar { width: 4px; }
#port-list::-webkit-scrollbar-track { background: transparent; }
#port-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.port-list-item {
  display: flex;
  align-items: stretch;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.port-list-item:hover  { border-color: var(--accent); background: #1c2840; }
.port-list-item.selected { border-color: var(--accent); background: rgba(33,150,243,.08); }

.pli-stripe {
  width: 4px;
  flex-shrink: 0;
}

.pli-body {
  flex: 1;
  padding: 9px 10px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pli-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pli-name {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pli-score {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  border: 1px solid;
  flex-shrink: 0;
}

.pli-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.pli-country {
  font-size: 11px;
  color: var(--text2);
  flex-shrink: 0;
}

.pli-stats {
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
}

.pli-bar-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.pli-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s;
}

/* ── Sort buttons ────────────────────────────────────────────── */
.sort-btn {
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.sort-btn:hover {
  background: var(--border);
  color: var(--text);
}
.sort-btn.active {
  background: var(--accent, #2196f3);
  color: #fff;
  border-color: var(--accent, #2196f3);
}

/* ── 24h delta indicators ─────────────────────────────────────── */
.delta {
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
  vertical-align: middle;
}
.delta-up   { color: #ef5350; }
.delta-down { color: #4caf50; }
.delta-flat { color: var(--text2); }

.cong-error, .cong-empty {
  padding: 16px;
  color: var(--text2);
  font-size: 13px;
  text-align: center;
}

.cong-error { color: var(--danger); }

/* ── Port Detail Panel (right slide-in) ──────────────────────────────────── */
#port-detail {
  position: fixed;
  top: 48px; right: 0; bottom: 0;
  width: 360px;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

#port-detail.open {
  transform: translateX(0);
}

#port-detail::-webkit-scrollbar { width: 4px; }
#port-detail::-webkit-scrollbar-track { background: transparent; }
#port-detail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Port detail header ──────────────────────────────────────────────────── */
.port-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-shrink: 0;
}

.port-detail-title-group {
  flex: 1;
  min-width: 0;
}

.pd-port-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-port-meta {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
  font-family: monospace;
}

.pd-close-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 14px;
  width: 28px; height: 28px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}

.pd-close-btn:hover { border-color: var(--danger); color: var(--danger); }

/* ── Score ring ──────────────────────────────────────────────────────────── */
.pd-score-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pd-score-ring-wrap {
  position: relative;
  width: 80px; height: 80px;
  flex-shrink: 0;
}

.pd-score-ring {
  width: 80px; height: 80px;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 6;
}

.ring-fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset .6s ease, stroke .3s;
}

.pd-score-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pd-score-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.pd-score-sub {
  font-size: 10px;
  color: var(--text2);
  margin-top: 1px;
}

.pd-level-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pd-level-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  border: 1px solid transparent;
}

.pd-level-badge.level-severe   { background: rgba(239,83,80,.15);  color: #ef5350; border-color: rgba(239,83,80,.35); }
.pd-level-badge.level-high     { background: rgba(255,152,0,.15);  color: #ff9800; border-color: rgba(255,152,0,.35); }
.pd-level-badge.level-moderate { background: rgba(255,235,59,.12); color: #ffeb3b; border-color: rgba(255,235,59,.3); }
.pd-level-badge.level-low      { background: rgba(76,175,80,.12);  color: #4caf50; border-color: rgba(76,175,80,.3); }

.pd-level-label {
  font-size: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ── Metrics grid ────────────────────────────────────────────────────────── */
.pd-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pd-metric-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
}

.pd-metric-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}

.pd-metric-label {
  font-size: 10px;
  color: var(--text2);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ── Section titles ──────────────────────────────────────────────────────── */
.pd-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text2);
  padding: 12px 16px 6px;
  flex-shrink: 0;
}

/* ── Timeline chart ──────────────────────────────────────────────────────── */
.timeline-chart {
  margin: 0 16px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 4px 4px;
  min-height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-loading,
.timeline-empty {
  font-size: 12px;
  color: var(--text2);
  text-align: center;
  padding: 16px;
}

/* ── State breakdown ─────────────────────────────────────────────────────── */
.pd-state-breakdown {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 16px 12px;
  flex-shrink: 0;
}

.breakdown-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.breakdown-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breakdown-count {
  font-size: 12px;
  color: var(--text2);
  margin-left: auto;
}

.breakdown-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.breakdown-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s;
}

/* ── State badge ─────────────────────────────────────────────────────────── */
.state-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* ── Vessel list ─────────────────────────────────────────────────────────── */
.vessel-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px 16px;
}

.vessel-row {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vessel-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vessel-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.vessel-row-sub {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vessel-type, .vessel-dist, .vessel-time {
  font-size: 11px;
  color: var(--text2);
}

.vessel-dist::before { content: '·'; margin-right: 6px; }
.vessel-time::before { content: '·'; margin-right: 6px; }

.vessel-empty {
  padding: 12px 16px;
  color: var(--text2);
  font-size: 12px;
  text-align: center;
}

/* ── Port tooltip (map) ──────────────────────────────────────────────────── */
.port-tooltip {
  background: rgba(13,17,23,.92) !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  color: var(--text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  padding: 7px 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
  pointer-events: none;
}

.port-tooltip::before { display: none !important; }

/* ── Live Congestion (within Port Watch) ─────────────────────────────────── */

/* ── Stream status bar ──────────────────────────────────────────────────── */
#live-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
}

.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #ff9800;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.live-dot.connected {
  background: var(--success);
  animation: none;
}

.live-dot.disconnected {
  background: var(--danger);
  animation: pulse-dot 1s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

#live-status-text {
  color: var(--text2);
  flex: 1;
}

.live-last-update {
  color: var(--text2);
  font-size: 11px;
  font-family: monospace;
}

/* ── Live port list ─────────────────────────────────────────────────────── */
#live-port-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: calc(100vh - 320px);
}

#live-port-list::-webkit-scrollbar { width: 4px; }
#live-port-list::-webkit-scrollbar-track { background: transparent; }
#live-port-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Live vessel markers ────────────────────────────────────────────────── */
.vessel-marker-icon {
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ── Port pulse animation on map ────────────────────────────────────────── */
@keyframes port-pulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  50%  { transform: scale(1.4); opacity: 0.3; }
  100% { transform: scale(1);   opacity: 0.8; }
}

.port-pulse-marker {
  border-radius: 50%;
  animation: port-pulse 2s ease-in-out infinite;
}

/* ── Cargo Flow (retained styles) ────────────────────────────────────────── */
#flow-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

.flow-port-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
  transition: border-color .15s;
}

.flow-port-card:hover { border-color: var(--accent); }

.flow-port-name {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}

.flow-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}

.flow-stat {
  text-align: center;
  padding: 4px;
  background: var(--bg);
  border-radius: 4px;
}

.flow-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.flow-stat-val.warn { color: #ff9800; }

.flow-stat-label {
  font-size: 10px;
  color: var(--text2);
  text-transform: uppercase;
}

#congestion-legend-live {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Port Intelligence ──────────────────────────────────────────────────── */
.pd-intelligence {
  padding: 0 16px 12px;
}

.intel-section {
  margin-bottom: 14px;
}

.intel-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--accent);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.intel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  margin-bottom: 8px;
}

.intel-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  text-align: center;
}

.intel-card.wide { grid-column: span 2; }
.intel-card.full { grid-column: span 3; }

.intel-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.intel-val.warn { color: #ff9800; }
.intel-val.good { color: var(--success); }
.intel-val.hot { color: var(--danger); }

.intel-label {
  font-size: 10px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-top: 1px;
}

.intel-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  margin-bottom: 3px;
}

.intel-bar-label {
  min-width: 55px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 10px;
}

.intel-bar-track {
  flex: 1;
  height: 10px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.intel-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s;
}

.intel-bar-val {
  font-size: 10px;
  color: var(--text2);
  min-width: 30px;
  text-align: right;
}

.intel-lead {
  background: var(--bg3);
  border: 1px solid rgba(255,152,0,.3);
  border-radius: 6px;
  padding: 7px 9px;
  margin-bottom: 4px;
}

.intel-lead-name {
  font-weight: 600;
  font-size: 12px;
  color: #ff9800;
}

.intel-lead-detail {
  font-size: 10px;
  color: var(--text2);
  margin-top: 2px;
}

.intel-origin-line {
  font-size: 11px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(48,54,61,.4);
  display: flex;
  gap: 6px;
  align-items: center;
}

.intel-origin-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Cargo estimation ───────────────────────────────────────────────────── */
.pd-cargo {
  padding: 0 16px 12px;
}

.cargo-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.cargo-stat {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.cargo-stat.wide {
  grid-column: span 2;
}

.cargo-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: #ff9800;
}

.cargo-stat-label {
  font-size: 9px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-top: 2px;
}

.cargo-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}

.cargo-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.cargo-bar-label {
  min-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 500;
}

.cargo-bar-track {
  flex: 1;
  height: 14px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.cargo-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: #ff9800;
  transition: width .4s;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
}

.cargo-bar-val {
  font-size: 10px;
  color: var(--text2);
  white-space: nowrap;
  min-width: 50px;
  text-align: right;
}

/* ── Turnaround stats table ─────────────────────────────────────────────── */
.pd-turnaround {
  padding: 0 16px 12px;
}

.turnaround-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.turnaround-table th {
  text-align: left;
  color: var(--text2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 6px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
}

.turnaround-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(48,54,61,.4);
  color: var(--text);
}

.turnaround-table tr:last-child td {
  border-bottom: none;
}

.turnaround-table .tt-type {
  font-weight: 500;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turnaround-table .tt-num {
  text-align: right;
  font-family: monospace;
  font-size: 11px;
}

.turnaround-table .tt-highlight {
  color: var(--accent);
  font-weight: 600;
}

.turnaround-overall {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.turnaround-stat {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.turnaround-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

.turnaround-stat-label {
  font-size: 9px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-top: 2px;
}

/* ── Secondary button (Add Stop, etc.) ──────────────────────────────────── */
.btn-secondary {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text2);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(33,150,243,.06);
}

/* ── Waypoint remove button ─────────────────────────────────────────────── */
.wp-remove-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text2);
  font-size: 14px;
  width: 22px; height: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: all .15s;
}

.wp-remove-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Fuel block ─────────────────────────────────────────────────────────── */
#fuel-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Voyage Results ─────────────────────────────────────────────────────── */
#voyage-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#voyage-summary {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Voyage Leg Card ────────────────────────────────────────────────────── */
.voyage-leg {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voyage-leg-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voyage-leg-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(33,150,243,.12);
  padding: 2px 7px;
  border-radius: 8px;
  flex-shrink: 0;
}

.voyage-leg-route {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voyage-leg-stats {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text2);
}

/* ── Voyage Fuel Card ───────────────────────────────────────────────────── */
.voyage-fuel-card {
  background: var(--bg3);
  border: 1px solid rgba(255,152,0,.3);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voyage-fuel-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #ff9800;
}

.voyage-fuel-detail {
  font-size: 11px;
  color: var(--text2);
  text-align: center;
}

/* ── Finder Results ─────────────────────────────────────────────────────── */
#finder-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: calc(100vh - 440px);
}

#finder-results::-webkit-scrollbar { width: 4px; }
#finder-results::-webkit-scrollbar-track { background: transparent; }
#finder-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

#finder-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Finder Vessel Card ─────────────────────────────────────────────────── */
.finder-vessel {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.finder-vessel:hover {
  border-color: var(--accent);
  background: #1c2840;
}

.finder-vessel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.finder-vessel-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text2);
  flex-wrap: wrap;
}

.finder-vessel-reasons {
  font-size: 10px;
  color: var(--text2);
}

/* ── Availability Badge ─────────────────────────────────────────────────── */
.avail-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}

.avail-badge.avail-high {
  background: rgba(76,175,80,.12);
  color: #4caf50;
  border-color: rgba(76,175,80,.35);
}

.avail-badge.avail-med {
  background: rgba(255,152,0,.12);
  color: #ff9800;
  border-color: rgba(255,152,0,.35);
}

.avail-badge.avail-low {
  background: rgba(139,148,158,.12);
  color: #8b949e;
  border-color: rgba(139,148,158,.35);
}

/* ── Africa Trade Badge ─────────────────────────────────────────────────── */
.africa-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255,152,0,.15);
  color: #ff9800;
  border: 1px solid rgba(255,152,0,.35);
  white-space: nowrap;
}

/* ── Finder search button ───────────────────────────────────────────────── */
#finder-search-btn {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
}

#finder-search-btn:hover { background: #1976d2; }
#finder-search-btn:active { transform: scale(.98); }

#finder-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text2);
  font-size: 13px;
}

/* ── Voyage Onboarding Empty State ─────────────────────────────────────── */
.onboard-box {
  text-align: center;
  padding: 20px 14px;
  background: var(--bg3);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.onboard-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.onboard-subtitle {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 14px;
}

.onboard-examples {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.onboard-btn {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.onboard-btn:hover {
  border-color: var(--accent);
  background: rgba(33, 150, 243, .06);
}

/* ── Command Center ──────────────────────────────────────────────── */

.mode-btn-primary {
  background: rgba(33,150,243,.15) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.mode-btn-primary.active {
  background: var(--accent) !important;
  color: #fff !important;
}

#command-mode { display:flex; flex-direction:column; gap:10px; }

.cc-section { display:flex; flex-direction:column; gap:6px; }

.cc-section-header {
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text2);
  padding:8px 0 4px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}

.cc-count-badge {
  font-size:10px; font-weight:700;
  background:var(--accent); color:#fff;
  padding:1px 7px; border-radius:10px;
}

.cc-port-intel { min-height:0; }

.cc-port-quick {
  padding:6px 8px; background:var(--bg3);
  border-radius:6px; font-size:11px;
}

.cc-quick-row {
  display:flex; justify-content:space-between;
  align-items:center; gap:8px; line-height:1.6;
}

.cc-route-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px;
}

.cc-route-label {
  font-size:12px; font-weight:500; color:var(--text2);
  text-align:center; margin-bottom:8px;
}

.cc-dest-card {
  padding:8px 10px; background:var(--bg3);
  border:1px solid var(--border); border-radius:6px; font-size:12px;
}

.cc-vessel-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:8px 10px;
  cursor:pointer; transition:border-color .15s;
  display:flex; flex-direction:column; gap:4px; margin-bottom:4px;
}
.cc-vessel-card:hover { border-color:var(--accent); }

.cc-select-vessel-btn {
  padding:4px 8px !important; font-size:10px !important;
  margin-top:4px; background:transparent; border:1px solid var(--accent);
  color:var(--accent); border-radius:4px; cursor:pointer;
}
.cc-select-vessel-btn:hover { background:rgba(33,150,243,.1); }

.cc-muted { font-size:11px; color:var(--text2); padding:4px 0; }

.cc-loading-sm {
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--text2); padding:4px 0;
}

#cc-calc-btn {
  width:100%; padding:10px; background:var(--accent);
  border:none; border-radius:var(--radius); color:#fff;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:background .15s, transform .1s;
}
#cc-calc-btn:hover { background:#1976d2; }
#cc-calc-btn:active { transform:scale(.98); }
#cc-calc-btn:disabled { opacity:.5; cursor:not-allowed; }

#cc-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

#cc-error {
  background:rgba(248,81,73,.1); border:1px solid rgba(248,81,73,.4);
  border-radius:var(--radius); color:var(--danger); padding:8px 10px; font-size:12px;
}

#cc-vessels-list {
  max-height:280px; overflow-y:auto;
}
#cc-vessels-list::-webkit-scrollbar { width:4px; }
#cc-vessels-list::-webkit-scrollbar-track { background:transparent; }
#cc-vessels-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* ── Fleet Dashboard ─────────────────────────────────────────────── */
.fleet-filters { display:flex; flex-direction:column; gap:6px; }
.fleet-filter-row { display:flex; gap:6px; align-items:center; }
.fleet-filter-row select { flex:1; font-size:12px; padding:5px 6px; }
.fleet-filter-row input[type="text"] { flex:1; font-size:12px; padding:5px 6px; }

.fleet-arrival-port { margin-bottom:6px; }
.fleet-arrival-header {
  font-size:12px; font-weight:600; color:var(--text);
  display:flex; align-items:center; gap:6px;
}
.fleet-arrival-vessel {
  font-size:11px; color:var(--text2); padding-left:8px;
  border-left:2px solid var(--border); margin:2px 0;
}

/* ── Mobile Responsive ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --sidebar-w: 100vw;
  }

  html, body {
    overflow: auto;
  }

  #top-nav {
    min-height: 48px;
    height: auto;
  }

  #sidebar {
    position: relative;
    margin-top: 0;
    width: 100%;
    height: auto;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  #map {
    position: relative;
    left: 0;
    width: 100%;
    height: 50vh;
  }

  #mode-toggle {
    flex-wrap: wrap;
    gap: 2px;
  }

  .mode-btn {
    font-size: 11px;
    padding: 4px 8px;
  }

  #port-detail {
    width: 100%;
    right: 0;
  }

  .port-sort-bar {
    padding: 0 8px 6px;
  }

  .sort-btn {
    min-height: 36px;
    padding: 6px 12px;
  }

  .pd-close-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .mode-btn {
    min-height: 36px;
  }
}

@media (max-width: 480px) {
  .mode-btn {
    font-size: 10px;
    padding: 3px 6px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .onboard-examples {
    flex-direction: column;
  }
}

/* ── Port Monitoring Groups ──────────────────────────────────────────────── */
#pg-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 56px 0 0 16px;
}
#pg-modal.hidden { display: none; }

#pg-modal-inner {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 288px;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

.pg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
}
.pg-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pg-chip-del {
  background: none;
  border: none;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  margin-left: 2px;
  line-height: 1;
}
.pg-chip-del:hover { opacity: 1; }

.pg-port-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  padding: 2px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
}
.pg-port-row:last-child { border-bottom: none; }
.pg-remove-btn {
  background: none;
  border: none;
  color: var(--danger, #ef5350);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
}
.pg-search-row {
  font-size: 10px;
  padding: 3px 6px;
  cursor: pointer;
  border-radius: 3px;
  color: var(--text2);
}
.pg-search-row:hover { background: var(--bg3); color: var(--text); }

/* ── Trade Leads ──────────────────────────────────────────── */
.leads-card {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.leads-card:hover { background: var(--bg3); }
.leads-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.leads-dir {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.leads-dir-i2a { background: rgba(255,152,0,0.2); color: #ff9800; }
.leads-dir-a2i { background: rgba(66,165,245,0.2); color: #42a5f5; }
.leads-dir-india { background: rgba(76,175,80,0.2); color: #4caf50; }
.leads-dir-africa { background: rgba(171,71,188,0.2); color: #ab47bc; }
.leads-meta {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
}
.leads-owner {
  font-size: 11px;
  color: var(--accent);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leads-age {
  font-size: 10px;
  color: var(--text3);
  margin-top: 1px;
}
.leads-ownership-row {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.leads-own-label {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.leads-own-val {
  font-size: 12px;
  color: var(--text1);
  font-weight: 500;
}
.leads-own-country {
  font-size: 10px;
  color: var(--text2);
  font-weight: 400;
}
.leads-contact-btn {
  font-size: 10px;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.leads-contact-btn:hover { text-decoration: underline; }
.leads-confirmed-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(76,175,80,0.2);
  color: #4caf50;
  margin-right: 4px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.leads-card-confirmed {
  border-left: 3px solid #4caf50;
}