/* ============================================================
   StatusTracker — Stylesheet
   Aesthetic: refined utilitarian. Navy + cream + warm yellow.
   Fraunces (display serif) + Inter Tight (UI sans).
   ============================================================ */

:root {
  --navy:        #0b1f3a;
  --navy-2:      #14305a;
  --ink:         #0f172a;
  --ink-2:       #334155;
  --muted:       #64748b;
  --line:        #e2e8f0;
  --line-2:      #cbd5e1;
  --cream:       #faf8f3;
  --paper:       #ffffff;
  --paper-2:     #f8fafc;
  --yellow:      #f5c518;
  --yellow-2:    #ffd84d;
  --yellow-soft: #fff8dc;
  --green:       #15803d;
  --amber:       #b45309;
  --red:         #b91c1c;
  --red-soft:    #fee2e2;
  --blue-soft:   #eff6ff;
  --radius:      10px;
  --radius-lg:   14px;
  --shadow-sm:   0 1px 2px rgba(15,23,42,.04);
  --shadow:      0 4px 16px rgba(15,23,42,.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

h3 { font-size: 1.05rem; }

button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ============ TOPBAR ============ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: var(--yellow);
  color: var(--navy);
  border-radius: 8px;
  font-size: 18px; font-weight: 700;
  transform: rotate(-8deg);
}
.brand-name {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.topnav { display: flex; gap: 8px; align-items: center; }
.profile-switcher {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  min-width: 160px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 12px;
  color: var(--ink-2);
  transition: all .15s;
  font-size: 13px;
}
.btn-ghost:hover { background: var(--paper); border-color: var(--line-2); color: var(--ink); }
.btn-ghost.btn-danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }

/* ============ CONTAINER ============ */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 32px 60px;
  display: flex; flex-direction: column; gap: 22px;
}

/* ============ BANNER ============ */
.banner {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13.5px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.banner-warn { background: var(--yellow-soft); border: 1px solid var(--yellow); color: #4a3a00; }
.banner-info { background: #eef6ff; border: 1px solid #bfdbfe; color: #0c2a55; }
.banner em { font-style: italic; opacity: .85; }

/* ============ ENTRY ACCORDIONS (Hotel / Rail / Bonus) ============ */
.entry-accordion {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  overflow: hidden;
}
.entry-accordion > summary {
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink);
  user-select: none;
}
.entry-accordion > summary::after {
  content: "▾"; color: var(--muted); margin-left: auto; transition: transform .2s;
}
.entry-accordion[open] > summary::after { transform: rotate(180deg); }
.entry-accordion[open] > summary {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.acc-icon {
  font-size: 16px;
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  background: var(--paper);
  border-radius: 6px;
  border: 1px solid var(--line);
}
.acc-hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 11.5px;
  font-style: italic;
}
.entry-accordion > form {
  padding: 16px;
}

.link-btn {
  background: none; border: none;
  color: var(--navy); text-decoration: underline;
  padding: 0; font: inherit; cursor: pointer;
}

/* ============ YEAR ROW ============ */
.year-row { display: flex; align-items: center; gap: 12px; }
.label-sm {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.year-select {
  background: var(--navy);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* ============ STATUS GRID ============ */
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .status-grid { grid-template-columns: 1fr; } }

.status-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex; gap: 18px; align-items: center;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s;
}
.status-card:hover { border-color: var(--line-2); }
.status-card-goal {
  background: linear-gradient(180deg, #fffceb 0%, #fff 100%);
  border-color: var(--yellow);
  box-shadow: 0 4px 20px rgba(245,197,24,.15);
}

.status-ring {
  position: relative;
  width: 76px; height: 76px;
  flex-shrink: 0;
}
.status-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 2.5; }
.ring-fg {
  fill: none; stroke: var(--navy); stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100, 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
}
.status-card-goal .ring-fg { stroke: var(--yellow); }
.status-ring span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  color: var(--navy);
}
.status-card-goal .status-ring span { color: #8a6800; }

.status-body { flex: 1; min-width: 0; }
.status-body h3 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.chip {
  display: inline-block; padding: 1px 8px;
  border-radius: 999px;
  font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--line); color: var(--ink-2);
  font-family: "Inter Tight", sans-serif;
}
.chip-goal { background: var(--yellow); color: var(--navy); }

.bar-row {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-2);
  margin-top: 6px;
}
.bar-row b { color: var(--ink); font-weight: 700; }
.bar-row.muted { color: var(--muted); font-style: italic; }
.progress {
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  margin: 4px 0 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 999px;
  width: 0;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.status-card-goal .progress-fill { background: var(--yellow); }

/* ============ TIMELINE ============ */
.timeline-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.timeline-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.timeline-status { font-size: 13px; color: var(--amber); font-weight: 600; }
.timeline-status.on-track { color: var(--green); }
.timeline-bar {
  position: relative;
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  margin-bottom: 8px;
}
.timeline-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 999px;
  width: 0;
  transition: width .6s;
}
.timeline-today {
  position: absolute;
  top: -2px;
  width: 2px; height: 12px;
  background: var(--yellow);
  transform: translateX(-1px);
}
.timeline-today span {
  position: absolute;
  top: 16px;
  left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.timeline-months {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted);
  margin-top: 22px;
}
.timeline-stats {
  display: flex; gap: 22px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--ink-2);
}
.timeline-stats b { color: var(--ink); font-weight: 700; }

/* ============ CALCULATOR ============ */
.calc-card, .ref-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.calc-card summary, .ref-card summary {
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.calc-card summary::after, .ref-card summary::after {
  content: "▾"; color: var(--muted); transition: transform .2s;
}
details[open] > summary::after { transform: rotate(180deg); }
.calc-body { padding: 6px 20px 20px; border-top: 1px solid var(--line); }
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0;
}
@media (max-width: 780px) { .calc-grid { grid-template-columns: 1fr 1fr; } }
.calc-grid label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--ink-2); font-weight: 500;
}
.calc-grid select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.calc-result {
  background: var(--blue-soft);
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--navy);
}
.calc-result strong { color: var(--navy); }

/* ============ MAIN GRID ============ */
.main-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 1.2fr;
  gap: 20px;
}
@media (max-width: 1080px) { .main-grid { grid-template-columns: 1fr; } }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.panel-head { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.panel-head.split { gap: 8px; }
.totals-mini {
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-2);
  background: var(--paper-2);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

/* ============ TABS ============ */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--paper-2);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 18px;
}
.tab {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  transition: all .15s;
}
.tab.active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ============ FORMS ============ */
.entry-form { display: flex; flex-direction: column; gap: 12px; }

.seg-toggle {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper-2);
  border-radius: 10px;
  padding: 4px;
  position: relative;
}
.seg-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.seg-toggle label {
  text-align: center;
  padding: 8px;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 500; font-size: 13px;
  color: var(--muted);
  transition: all .15s;
}
.seg-toggle input:checked + label {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: end;
}
.form-row:has(.field.full) { grid-template-columns: 1fr; }
.form-row:not(:has(.swap-btn)) { grid-template-columns: 1fr 1fr; }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 600;
}
.field .opt {
  text-transform: none; letter-spacing: 0;
  color: var(--muted); font-weight: 400;
}
.field input, .field select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11,31,58,.08);
}
.field .meta {
  font-size: 11px;
  color: var(--muted);
  min-height: 14px;
}
.field .inline-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.swap-btn {
  align-self: end;
  margin-bottom: 4px;
  width: 32px; height: 36px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  color: var(--muted);
}
.swap-btn:hover { border-color: var(--line-2); color: var(--ink); }

.via-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.via-row .remove-via {
  align-self: end;
  margin-bottom: 4px;
  width: 32px; height: 36px;
  border: 1px solid var(--red-soft);
  background: white;
  color: var(--red);
  border-radius: 8px;
}

.estimate {
  font-size: 13px;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px dashed var(--line);
  padding: 10px 14px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.estimate b { color: var(--ink); }

.btn-primary {
  background: var(--navy);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
  transition: background .15s, transform .05s;
  font-size: 14px;
}
.btn-primary:hover { background: var(--navy-2); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--line-2); cursor: not-allowed; }

.btn-outline {
  background: var(--paper);
  border: 1.5px solid var(--navy);
  color: var(--navy);
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 600;
  transition: all .15s;
}
.btn-outline:hover { background: var(--navy); color: white; }

/* ============ ENTRIES LIST ============ */
.toolbar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
  align-items: center;
}
.search {
  flex: 1; min-width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.toolbar select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.chip.active { background: var(--navy); color: white; border-color: var(--navy); }
.chip-sm { padding: 4px 10px; font-size: 11px; }

.entries { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.entry {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s;
}
.entry:hover { border-color: var(--line-2); }
.entry-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-size: 13px;
  flex-shrink: 0;
}
.entry-icon.flight { background: #dbeafe; color: #1e40af; }
.entry-icon.hotel  { background: #fce7f3; color: #9d174d; }
.entry-icon.rail   { background: #dcfce7; color: #166534; }
.entry-icon.bonus  { background: #fef3c7; color: #92400e; }

.entry-main { flex: 1; min-width: 0; }
.entry-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.entry-sub {
  font-size: 12px; color: var(--muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.entry-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.entry-status.received { background: #dcfce7; color: var(--green); }
.entry-status.pending  { background: var(--yellow-soft); color: var(--amber); }
.entry-status.booked   { background: var(--blue-soft); color: var(--navy); }
.entry-status.planned  { background: var(--line); color: var(--ink-2); }

.entry-actions { display: flex; gap: 4px; }
.entry-actions button {
  background: transparent;
  border: 1px solid var(--line);
  width: 30px; height: 30px;
  border-radius: 7px;
  color: var(--ink-2);
  font-size: 13px;
  display: grid; place-items: center;
}
.entry-actions button:hover { background: var(--paper); }
.entry-actions .btn-del:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }

.empty {
  text-align: center;
  padding: 30px 12px;
  color: var(--muted);
  font-size: 13px;
}

/* ============ IO ROW ============ */
.io-row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 16px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.io-row p { margin: 0 0 0 8px; }

/* ============ REFERENCE ============ */
.ref-grid { padding: 14px 22px 18px; display: grid; gap: 14px; }
.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.ref-table th, .ref-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.ref-table th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 600;
}
.ref-note { font-size: 12px; line-height: 1.5; }

/* ============ MODAL ============ */
.modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 560px;
  width: 92%;
  box-shadow: 0 24px 80px rgba(15,23,42,.25);
}
.modal::backdrop { background: rgba(15,23,42,.4); backdrop-filter: blur(2px); }
.modal-body { padding: 22px 26px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.modal-x {
  background: transparent; border: none; font-size: 22px;
  color: var(--muted); cursor: pointer;
}
.modal fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
}
.modal fieldset legend {
  padding: 0 8px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.modal label {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
}
.modal label input[type="number"] {
  width: 110px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: right;
}
.modal label.checkbox { justify-content: flex-start; }
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin: 0; padding: 0;
}

/* ============ MISC ============ */
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

.footnote {
  text-align: center;
  padding: 20px;
  font-size: 11.5px;
  color: var(--muted);
  display: flex; justify-content: center; gap: 20px;
}

/* ============================================================
   TODAY VIEW HERO — single focused tier card
   ============================================================ */
.today-hero {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 32px 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.today-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(245,197,24,.06) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(11,31,58,.04) 0%, transparent 50%);
  pointer-events: none;
}
.hero-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
  position: relative;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  font-weight: 600;
}
.goal-tier-select {
  background: var(--navy);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}
.hero-meta { display: flex; align-items: center; gap: 12px; }
.hero-verdict {
  font-family: "Fraunces", serif;
  font-size: 0.95rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-2);
}
.hero-verdict.fc-reach { color: var(--green); }
.hero-verdict.fc-tight { color: var(--amber); }
.hero-verdict.fc-miss  { color: var(--red); }
.hero-verdict.fc-done  { color: var(--navy); font-weight: 600; }

.hero-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
}
@media (max-width: 780px) {
  .hero-body { grid-template-columns: 1fr; gap: 22px; }
  .today-hero { padding: 22px; }
}

.hero-ring-large {
  width: 180px; height: 180px;
  position: relative;
}
.hero-ring-large svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.hero-ring-bg { fill: none; stroke: var(--line); stroke-width: 5; }
.hero-ring-fg {
  fill: none;
  stroke: var(--navy);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 276.46;
  stroke-dashoffset: 276.46;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}
.hero-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 2px;
}
.hero-ring-pct {
  font-family: "Fraunces", serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.hero-ring-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 500;
}

.hero-metrics {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
.hero-metric { display: flex; flex-direction: column; gap: 4px; }
.hero-metric-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  font-weight: 600;
}
.hero-metric-bar {
  height: 8px;
  margin: 0;
}
.hero-metric-figures {
  font-family: "Inter Tight", sans-serif;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.hero-metric-figures b {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.hero-metric-forecast {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.hero-forecast-line {
  font-family: "Fraunces", serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 2px;
}
.hero-forecast-sub {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hero-delta {
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--yellow-soft);
  border: 1px solid var(--yellow);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #78350f;
  display: inline-block;
}
body.theme-dark .hero-delta { background: #3a2f10; color: var(--yellow); }
.hero-delta .delta-up   { color: var(--green); }
.hero-delta .delta-down { color: var(--red); }
@keyframes whatif-pulse {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.04); }
}
body.whatif-active .hero-ring-large {
  animation: whatif-pulse 0.5s ease;
}

.hero-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
  position: relative;
}

/* ============================================================
   SECONDARY TIER STRIP
   ============================================================ */
.tier-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 780px) { .tier-strip { grid-template-columns: 1fr; } }
.tier-mini {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.tier-mini:hover { border-color: var(--line-2); }
.tier-mini.is-active {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(11,31,58,.08);
}
body.theme-dark .tier-mini.is-active {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(245,197,24,.18);
}
.mini-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.mini-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.mini-pct {
  font-family: "Fraunces", serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.mini-bar {
  height: 4px; margin: 2px 0 6px;
}
.mini-figures {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   WHAT-IF BAR
   ============================================================ */
.whatif-bar {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-left: 4px solid var(--yellow);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: #78350f;
}
body.theme-dark .whatif-bar {
  background: linear-gradient(90deg, #3a2f10 0%, #2a2410 100%);
  border-color: var(--yellow);
  color: var(--yellow);
}
.whatif-content { flex: 1; }
.entry.is-whatif {
  outline: 2px dashed var(--yellow);
  outline-offset: -2px;
}

/* Make entry status badge clickable in what-if mode */
body.whatif-active .entry-status {
  cursor: pointer;
  padding: 3px 10px;
  outline: 1.5px dashed var(--yellow);
  outline-offset: 1px;
  transition: transform .1s;
}
body.whatif-active .entry-status:hover {
  filter: brightness(0.9);
  transform: scale(1.05);
}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.leaderboard-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.leaderboard-card summary { padding: 14px 20px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.leaderboard-card summary::after { content: "▾"; color: var(--muted); transition: transform .2s; }
.leaderboard-card details[open] > summary::after { transform: rotate(180deg); }
.leaderboard-body { padding: 8px 22px 22px; border-top: 1px solid var(--line); }
.leaderboard-controls {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 16px;
}
.leaderboard-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 600;
}
.leaderboard-controls select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.leaderboard-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  counter-reset: lbrank;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  counter-increment: lbrank;
  position: relative;
  overflow: hidden;
}
.leaderboard-row.is-self {
  border-color: var(--navy);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
body.theme-dark .leaderboard-row.is-self { border-color: var(--yellow); }
.leaderboard-row .lb-rank {
  font-family: "Fraunces", serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
.leaderboard-row.lb-1 .lb-rank { color: var(--yellow); }
.leaderboard-row.lb-2 .lb-rank { color: #94a3b8; }
.leaderboard-row.lb-3 .lb-rank { color: #a16207; }
.lb-name {
  font-weight: 600;
  font-size: 14px;
}
.lb-sub {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.lb-value {
  font-family: "Fraunces", serif;
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lb-self-badge {
  background: var(--navy);
  color: white;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-left: 6px;
  vertical-align: 2px;
}
body.theme-dark .lb-self-badge { background: var(--yellow); color: #0a0f1c; }
.leaderboard-row .lb-progress {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  margin-top: 4px;
  overflow: hidden;
}
.leaderboard-row .lb-progress-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 999px;
  transition: width .6s ease;
}
body.theme-dark .leaderboard-row .lb-progress-fill { background: var(--yellow); }

.progress.stacked {
  display: flex;
  height: 5px;
  background: var(--line);
  border-radius: 999px;
  margin: 4px 0 2px;
  overflow: hidden;
  position: relative;
}
.progress.stacked .seg {
  height: 100%;
  width: 0;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
/* default (Frequent Traveller / non-goal) — navy palette */
.seg-received { background: var(--navy); }
.seg-pending  { background: var(--navy); opacity: 0.55; }
.seg-booked   {
  background: repeating-linear-gradient(45deg,
    var(--navy) 0, var(--navy) 3px,
    rgba(11,31,58,.2) 3px, rgba(11,31,58,.2) 6px);
}
.seg-planned  {
  background: repeating-linear-gradient(45deg,
    var(--line-2) 0, var(--line-2) 3px,
    transparent 3px, transparent 6px);
  border: 1px dashed var(--line-2);
  box-sizing: border-box;
}
/* goal tier (Senator) — kept for backward compat but no longer used as primary highlight */
.status-card-goal .seg-received { background: var(--navy); }
.status-card-goal .seg-pending  { background: var(--navy); opacity: 0.55; }
.status-card-goal .seg-booked   {
  background: repeating-linear-gradient(45deg,
    var(--navy) 0, var(--navy) 3px,
    rgba(11,31,58,.2) 3px, rgba(11,31,58,.2) 6px);
}

/* ============ LEGEND ============ */
.legend-row {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: -10px;
  padding: 0 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch {
  width: 18px; height: 8px;
  border-radius: 4px;
  display: inline-block;
}

/* ============ FORECAST CARD ============ */
.forecast-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.forecast-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.forecast-head h3 { font-size: 1rem; }
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 780px) { .forecast-grid { grid-template-columns: 1fr; } }
.forecast-tile {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
}
.forecast-tile h4 {
  font-family: "Inter Tight", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.forecast-verdict {
  font-family: "Fraunces", serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.forecast-verdict.fc-reach     { color: var(--green); }
.forecast-verdict.fc-tight     { color: var(--amber); }
.forecast-verdict.fc-miss      { color: var(--red); }
.forecast-verdict.fc-done      { color: var(--navy); }
.forecast-detail {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
}

/* ============ STATISTICS CARD ============ */
.stats-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.stats-card summary { padding: 14px 20px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.stats-card summary::after { content: "▾"; color: var(--muted); transition: transform .2s; }
.stats-card details[open] > summary::after { transform: rotate(180deg); }
.stats-body { padding: 6px 22px 22px; border-top: 1px solid var(--line); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0 20px;
}
@media (max-width: 780px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
.stats-kpi {
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.stats-kpi .kpi-label {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.stats-kpi .kpi-value {
  font-family: "Fraunces", serif;
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: -.01em;
}
.stats-kpi .kpi-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.stats-section { margin: 18px 0 6px; }
.stats-section h4 {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.stats-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.stats-list li {
  display: flex; justify-content: space-between;
  padding: 6px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.stats-list .count {
  background: var(--navy);
  color: white;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

/* ============ MAP CARD ============ */
.map-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.map-card summary { padding: 14px 20px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.map-card summary::after { content: "▾"; color: var(--muted); transition: transform .2s; }
.map-card details[open] > summary::after { transform: rotate(180deg); }
.map-body { padding: 16px 22px 22px; border-top: 1px solid var(--line); }
#worldMap {
  width: 100%;
  aspect-ratio: 2 / 1;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
#worldMap svg { width: 100%; height: 100%; display: block; }
#worldMap .landmass { fill: #e5e7eb; stroke: #cbd5e1; stroke-width: 0.3; }
#worldMap .grid-line { stroke: rgba(0,0,0,.04); stroke-width: 0.3; fill: none; }
#worldMap .pin {
  fill: var(--navy);
  stroke: white;
  stroke-width: 1.2;
  transition: r .2s;
  cursor: pointer;
}
#worldMap .pin:hover { fill: var(--yellow); r: 4; }
#worldMap .pin-label {
  font-size: 9px;
  font-family: "Inter Tight", sans-serif;
  fill: var(--ink);
  pointer-events: none;
}

/* ============ HEAD ACTIONS ============ */
.head-actions { display: flex; gap: 6px; }
.btn-sm { font-size: 12px; padding: 5px 10px; }

/* ============ CSV PREVIEW ============ */
.csv-preview {
  margin-top: 12px;
  padding: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 200px;
  overflow: auto;
  font-family: monospace;
  font-size: 11.5px;
}
.csv-preview table { width: 100%; border-collapse: collapse; }
.csv-preview td, .csv-preview th {
  padding: 3px 6px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.csv-preview th { color: var(--muted); font-weight: 600; }
#csvMappingGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
@media (max-width: 600px) { #csvMappingGrid { grid-template-columns: 1fr; } }
#csvMappingGrid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--ink-2); font-weight: 500;
}
#csvMappingGrid select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* ============================================================
   DARK MODE
   ============================================================ */
body.theme-dark {
  --navy:        #f5c518;
  --navy-2:      #e5b800;
  --ink:         #e5e7eb;
  --ink-2:       #cbd5e1;
  --muted:       #94a3b8;
  --line:        #2d3748;
  --line-2:      #475569;
  --cream:       #0a0f1c;
  --paper:       #14202e;
  --paper-2:     #1a2738;
  --yellow:      #f5c518;
  --yellow-2:    #ffd84d;
  --yellow-soft: #2a2410;
  --blue-soft:   #1a2738;
  --red-soft:    #3a1818;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.3);
  --shadow:      0 4px 16px rgba(0,0,0,.4);
}
body.theme-dark .brand-mark { background: var(--yellow); color: #0a0f1c; }
body.theme-dark .ring-fg { stroke: var(--yellow); }
body.theme-dark .status-card-goal .ring-fg { stroke: #fff; }
body.theme-dark .seg-received { background: var(--yellow); }
body.theme-dark .seg-pending  { background: var(--yellow); opacity: 0.55; }
body.theme-dark .seg-booked   {
  background: repeating-linear-gradient(45deg,
    var(--yellow) 0, var(--yellow) 3px,
    rgba(245,197,24,.25) 3px, rgba(245,197,24,.25) 6px);
}
body.theme-dark .progress-fill { background: var(--yellow); }
body.theme-dark .btn-primary { background: var(--yellow); color: #0a0f1c; }
body.theme-dark .btn-primary:hover { background: var(--yellow-2); }
body.theme-dark .btn-outline { border-color: var(--yellow); color: var(--yellow); }
body.theme-dark .btn-outline:hover { background: var(--yellow); color: #0a0f1c; }
body.theme-dark .status-card-goal {
  background: linear-gradient(180deg, #1f1a08 0%, var(--paper) 100%);
  border-color: var(--yellow);
}
body.theme-dark .year-select { background: var(--yellow); color: #0a0f1c; }
body.theme-dark .banner-info { background: #11253f; border-color: #1e3a5f; color: #93c5fd; }
body.theme-dark #worldMap .landmass { fill: #1e293b; stroke: #334155; }
body.theme-dark #worldMap .pin { fill: var(--yellow); stroke: #0a0f1c; }
body.theme-dark .stats-list .count { background: var(--yellow); color: #0a0f1c; }
body.theme-dark .entry-icon.flight { background: #1e3a5f; color: #93c5fd; }
body.theme-dark .entry-icon.hotel  { background: #4a1e3a; color: #f9a8d4; }
body.theme-dark .entry-icon.rail   { background: #1a4030; color: #86efac; }
body.theme-dark .entry-icon.bonus  { background: #4a3010; color: #fde68a; }
body.theme-dark .entry-status.received { background: #1a4030; color: #86efac; }
body.theme-dark .entry-status.pending  { background: #4a3010; color: #fde68a; }
body.theme-dark .entry-status.booked   { background: #11253f; color: #93c5fd; }
body.theme-dark .entry-status.planned  { background: #2a3441; color: #cbd5e1; }
body.theme-dark .chip-goal { background: var(--yellow); color: #0a0f1c; }
body.theme-dark .timeline-fill { background: var(--yellow); }
body.theme-dark .timeline-today { background: #fff; }
body.theme-dark .timeline-status.on-track { color: #86efac; }
body.theme-dark .timeline-status { color: #fcd34d; }
body.theme-dark .calc-result { background: #11253f; border-color: #1e3a5f; color: #cbd5e1; }
body.theme-dark .calc-result strong { color: var(--yellow); }
body.theme-dark input, body.theme-dark select, body.theme-dark textarea {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
}
body.theme-dark .modal { background: var(--paper); color: var(--ink); }
body.theme-dark .modal::backdrop { background: rgba(0,0,0,.7); }