:root{
  --navy:#1a2744;
  --navy2:#24365f;
  --gold:#d4a843;
  --bg:#f4f1ec;
  --card:#ffffff;
  --ink:#18202f;
  --muted:#5a6475;
  --line:rgba(26,39,68,.14);
  --shadow:0 10px 30px rgba(10,20,40,.08);
  --radius:18px;
  --radius2:26px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Georgia, "Times New Roman", serif;
  color:var(--ink);
  background:var(--bg);
  font-size:18px;
  line-height:1.45;
}

a{color:inherit}
a:hover{opacity:.9}
.small{font-size:15px;color:var(--muted)}
.muted{color:var(--muted)}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 14px}

.container{
  max-width:1120px;
  margin:0 auto;
  padding:24px 18px 60px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(244,241,236,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}

.topbar-inner{
  max-width:1120px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-badge{
  width:40px;height:40px;
  border-radius:14px;
  background:linear-gradient(180deg, var(--navy), var(--navy2));
  display:grid;place-items:center;
  color:#fff;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.25);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:800;
}
.brand-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.brand-sub{margin-top:2px}

.actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy);
  padding:12px 16px;
  border-radius:999px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  box-shadow: 0 2px 0 rgba(26,39,68,.06);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0px)}
.btn-primary{
  background:linear-gradient(180deg, var(--navy), var(--navy2));
  color:#fff;
  border-color: rgba(255,255,255,.12);
}
.btn-gold{
  background: linear-gradient(180deg, #e2c05c, var(--gold));
  color:#16213a;
  border-color: rgba(0,0,0,.05);
}
.btn-quiet{
  background:transparent;
  box-shadow:none;
}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow: var(--shadow);
  padding:18px;
}

.h1{
  font-size:44px;
  margin:10px 0 6px;
  letter-spacing:-.4px;
}
.h2{
  font-size:28px;
  margin:0 0 6px;
  letter-spacing:-.2px;
}
.h3{
  font-size:20px;
  margin:0 0 6px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing:.2px;
}
.section{
  margin-top:18px;
}

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

.list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}
@media (max-width: 720px){
  .row{flex-direction:column; align-items:stretch}
}

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background: rgba(26,39,68,.03);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:700;
  font-size:14px;
  color:var(--navy);
}

.meta{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:10px;
}

.kv{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.kv .k{
  font-size:13px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}
.kv .v{
  font-size:20px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:800;
  color:var(--navy);
}

.week-card{
  padding:16px;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background:#fff;
  box-shadow: 0 8px 20px rgba(10,20,40,.06);
}
.week-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.week-no{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:900;
  font-size:18px;
  letter-spacing:.06em;
  color:var(--navy);
  text-transform:uppercase;
}
.week-route{font-size:22px; margin-top:6px}
.week-sub{margin-top:6px}
.week-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
hr.sep{border:none;border-top:1px solid var(--line);margin:14px 0}

.preview{
  position:sticky;
  top:96px;
}
.preview iframe{
  width:100%;
  height:72vh;
  border:1px solid var(--line);
  border-radius: 18px;
  background:#fff;
}
@media (max-width: 900px){
  .preview{position:static}
  .preview iframe{height:60vh}
}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:rgba(26,39,68,.92);
  color:#fff;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:700;
  display:none;
  max-width: 90vw;
}
.toast.show{display:block}
/* Trip page navigation helpers (older-friendly) */
.nav-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}
.nav-row label{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; font-weight:800; color:var(--navy); }
.select-lg{
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:800;
  font-size:16px;
  min-width: 240px;
}
.chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.chip-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy);
  padding:10px 14px;
  border-radius:999px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  box-shadow: 0 2px 0 rgba(26,39,68,.06);
}
.chip-btn:hover{transform:translateY(-1px)}
.chip-btn:active{transform:translateY(0)}

.week-card{ scroll-margin-top: 120px; }

/* Week index mini buttons */
.week-mini{
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy);
  padding:10px 12px;
  border-radius:999px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  box-shadow: 0 2px 0 rgba(26,39,68,.06);
}
.week-mini:hover{transform:translateY(-1px)}
.week-mini:active{transform:translateY(0)}
.week-mini.on{
  border-color: rgba(49,185,111,.35);
  box-shadow: 0 2px 0 rgba(49,185,111,.10);
}
.week-mini .mini-dot{
  display:inline-block;
  width:10px;height:10px;border-radius:999px;
  background:#cfd6e3;
  margin-right:8px;
  vertical-align:middle;
}
.week-mini.on .mini-dot{ background:#31b96f; }
.details-box{
  display:none;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.week-card.open .details-box{ display:block; }

/* Cleaner trip "Week navigation" panel */
.week-nav{
  margin-top:12px;
  padding-top:12px;
}
.week-nav-row{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.week-nav-field{
  flex: 1 1 520px;
  min-width: 280px;
}
.week-nav-check{
  display:flex;
  gap:10px;
  align-items:center;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:800;
  color:var(--navy);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
}
.week-nav-check input{ transform: scale(1.15); }

.select-lg{
  width:100%;
  min-width: 0;
}

.chips{
  margin-top:12px;
}

/* Make quick chips a bit smaller/cleaner */
.chip-btn{
  padding:9px 12px;
  font-size:14px;
}

/* Week index grid (less bulky than big chips) */
.week-index-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.week-mini{
  padding:8px 10px;
  font-size:13px;
}
.week-mini .mini-dot{
  width:9px;height:9px;
}

/* Subhead style */
.h3{
  font-size:22px;
  margin:0 0 6px;
  letter-spacing:-.15px;
}

/* Week navigation as one calm visual element */
.week-nav-card{
  padding:16px;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  box-shadow: 0 8px 20px rgba(10,20,40,.06);
}
.week-nav-card .week-nav{
  margin-top:0;
  padding-top:0;
}

/* Trip dashboard single-card layout */
.trip-dashboard{
  padding:18px;
}
.trip-dashboard .section{ margin-top:14px; }