:root {
  --ui-font: "Manrope", sans-serif;
  --ui-bg: #0f141a;
  --ui-surface: rgba(15, 23, 42, 0.82);
  --ui-surface-strong: rgba(15, 23, 42, 0.92);
  --ui-surface-soft: rgba(255, 255, 255, 0.02);
  --ui-surface-soft-hover: rgba(255, 255, 255, 0.04);
  --ui-border: rgba(148, 163, 184, 0.18);
  --ui-border-soft: rgba(255, 255, 255, 0.05);
  --ui-text: #f8fbff;
  --ui-muted: #9aa6b8;
  --ui-accent: #3b82f6;
  --ui-accent-soft: rgba(59, 130, 246, 0.16);
  --ui-shadow: 0 20px 50px rgba(2, 8, 23, 0.28);
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
}

html,
body {
  font-family: var(--ui-font);
}

body,
button,
input,
select,
textarea {
  font-family: var(--ui-font);
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
label,
th,
td,
div {
  font-family: inherit;
}

h1,
.page-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ui-text);
}

h2,
h3,
.section-title {
  font-weight: 600;
  color: var(--ui-text);
}

h2,
.section-title {
  font-size: 20px;
  line-height: 1.25;
}

h3 {
  font-size: 16px;
  line-height: 1.35;
}

p,
li,
.body-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.small-text,
small,
.muted,
.subtitle,
.helper-text,
.info,
.summary-meta,
.panel-header span,
.summary-main p,
.routes-subcopy {
  font-size: 13px;
  color: var(--ui-muted);
}

.section {
  margin-bottom: var(--space-xl);
}

.card,
.route-card,
.summary-card,
.panel-card,
.chart-panel,
.save-panel,
.alerts-card,
.about-card,
.route-tools,
.detail-block,
.stat-box,
.empty-msg,
.tracker-card,
.question-card,
.answer-entry,
.info-card,
.weather-row,
.waypoint-chip,
.summary-actions,
.segments-table,
.preview,
.setting-block,
.control-panel,
.control-bar,
.map-shell,
.stat-card {
  border-radius: 12px;
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border-soft);
  box-shadow: var(--ui-shadow);
}

.card,
.route-card,
.panel-card,
.chart-panel,
.save-panel,
.alerts-card,
.about-card,
.route-tools,
.detail-block,
.stat-box,
.tracker-card,
.question-card,
.answer-entry,
.info-card,
.preview,
.setting-block,
.control-panel,
.stat-card {
  padding: 20px;
}

.card:hover,
.route-card:hover,
.panel-card:hover,
.stat-card:hover,
.detail-block:hover,
.stat-box:hover,
.question-card:hover,
.info-card:hover {
  background: var(--ui-surface-soft-hover);
}

.stat-card,
.stat-box {
  border-radius: 12px;
}

.stat-title {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
}

.btn,
.button-primary,
.button-secondary,
button:not(.menu-trigger):not(.rb-menu-trigger):not(.drag-handle):not(.sidebar-backdrop):not(.rb-sidebar-backdrop):not(.map-expand-btn) {
  border-radius: 8px;
  font-weight: 500;
}

.button-primary,
.btn-primary,
.btn.primary {
  padding: 10px 16px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: 1px solid rgba(147, 197, 253, 0.4);
}

.button-secondary,
.btn-secondary,
.btn.secondary,
.btn.ghost {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  color: #e7edf7;
  border: 1px solid var(--ui-border);
}

input,
select,
textarea {
  border-radius: 10px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.map-panel {
  padding: 12px;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid var(--ui-border);
}

.sidebar-link,
.nav-link,
.rb-nav-link {
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
}

.sidebar-link:hover,
.nav-link:hover,
.rb-nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 900px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}