* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* Header */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--outline);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
}
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); }
.toggle-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle {
  border: 1px solid #1b3c3a;
  background: #0f1a1a;
  color: var(--accent-2);
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: .15s ease background, .15s ease transform;
}
.toggle.active {
  background: #17371d;
  border-color: #2a5c33;
  color: var(--accent);
}
.toggle:active { transform: translateY(1px); }

/* Layout */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
}
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 7fr 5fr;
    gap: 20px;
    padding: 22px;
  }
}

.globe-card {
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 45vh;
  box-shadow: var(--shadow-1);
}
#globe { width: 100%; height: 100%; min-height: 45vh; }

.right-col { display: flex; flex-direction: column; gap: 16px; }

/* Cards */
.card {
  background: var(--panel);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-2);
}
.card-title { margin: 0 0 10px; font-weight: 600; }

/* Trip panel */
.trip-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.add-btn {
  border: 1px solid #1b3c3a;
  background: #0f1a1a;
  color: var(--accent-2);
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.rows { display: flex; flex-direction: column; gap: 10px; }

.row {
  display:flex; align-items: stretch; gap: 8px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--outline);
  border-radius: 16px;
}
.row:hover { background: var(--panelHover); }
.row.dragging { opacity: .85; outline: 2px solid var(--accent-2); }

.handle {
  width: 28px;
  display:grid; place-items:center;
  cursor: grab;
  color: #94a3b8;
}
.handle:active { cursor: grabbing; }

.input {
  flex: 1;
  background: transparent;
  color: white;
  border: none;
  outline: none;
  font-size: 14px;
}
.btn {
  display:inline-grid; place-items:center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 500;
  cursor: pointer;
}
.btn-ok {
  background: #17371d;
  color: var(--accent);
  border-color: #2a5c33;
}
.btn-ok.saved {
  background: rgba(16, 185, 129, .18);
  color: #86efac;
  border-color: rgba(16, 185, 129, .4);
}
.btn-del {
  background: rgba(244, 63, 94, .15);
  border-color: rgba(244, 63, 94, .35);
  color: #ffb3bf;
}
.status {
  padding: 2px 8px; border-radius: 8px; font-size: 12px; margin-left: 6px;
}
.status.searching { background: rgba(44,198,181,.12); color: var(--accent-2); }
.status.error { background: rgba(255,91,110,.12); color: var(--danger); }

/* Summary */
.summary-content { display:flex; flex-direction:column; gap: 8px; }
.summary-row { display:flex; align-items:center; justify-content:space-between; }
.badge {
  padding: 4px 8px; font-size: 12px; border-radius: 999px; border: 1px solid var(--outline);
  background: #0f1a1a; color: var(--accent-2);
}
.total { font-weight: 700; }
.muted { color: var(--subtext); }

/* Footer */
.app-footer {
  color: var(--subtext);
  font-size: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--outline);
}