:root{
  --bg:#F5F6F8;
  --card:#FFFFFF;
  --border:#E5E7EB;
  --text:#111827;
  --text-dim:#6B7280;
  --text-faint:#9CA3AF;
  --accent:#2563EB;

  --c-flight:#2E6BFF; --c-flight-tint:#E8EFFF;
  --c-hotel:#A729F0; --c-hotel-tint:#F6E9FE;
  --c-taxi:#00B8B0; --c-taxi-tint:#E1FBFA;
  --c-restaurant:#FF6A2B; --c-restaurant-tint:#FFEBE0;
  --c-excursion:#2FBF3D; --c-excursion-tint:#E7FAE7;
  --c-activity:#EC4899; --c-activity-tint:#FCE7F3;

  --amber:#B45309; --amber-tint:#FEF3E2;
  --red:#DC2626; --red-tint:#FEE9E9;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ font-size:18px; }
html,body{
  background:#DADDE2;
  font-family:'Inter', sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  margin:0; padding:0; width:100%; height:100%; overflow:hidden;
}
body{ position:fixed; inset:0; }
.device{
  width:100%; height:100dvh;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}
.splash{
  position:fixed; inset:0; z-index:999;
  background:#14181C; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity 0.4s ease;
}
.splash.hidden{ opacity:0; pointer-events:none; }
/* Same optical-centering correction as .landing-logo — measured, not
   guessed (see that rule's comment for the full explanation). */
.splash-logo{ display:flex; align-items:center; gap:0; transform:translateX(-15px); }
.splash-logo span{ font-family:'Inter',sans-serif; font-size:2rem; font-weight:800; letter-spacing:-0.03em; }
.splash-bar{ width:150px; height:3px; border-radius:2px; background:linear-gradient(90deg, #2E6BFF, #A729F0, #FF6A2B); }
.splash-spinner{
  width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.15); border-top-color:#2E6BFF;
  animation:splash-spin 0.8s linear infinite;
}
@keyframes splash-spin{ to{ transform:rotate(360deg); } }

.statusbar{ display:none; }
.screen{
  height:100%; overflow-y:auto; scrollbar-width:none;
  padding-bottom:145px;
  padding-top:env(safe-area-inset-top, 0px);
}
.screen::-webkit-scrollbar{display:none;}

/* Desktop preview only: show a phone-frame mockup with a fake status bar.
   None of this applies on an actual installed phone screen. */
@media (min-width:520px){
  body{ position:static; display:flex; align-items:flex-start; justify-content:center; padding:32px 12px; height:auto; overflow:visible; }
  html{ overflow:auto; height:auto; }
  .device{
    width:390px; height:824px; max-width:100%;
    border-radius:28px; box-shadow:0 24px 60px rgba(0,0,0,0.25);
  }
  .statusbar{
    display:flex; height:44px; background:var(--bg);
    align-items:center; justify-content:space-between;
    padding:0 22px; font-size:0.8125rem; font-weight:600; color:var(--text);
  }
  .screen{ height:780px; padding-top:0; }
}

/* ---- HEADER ---- */
.header{
  padding:18px 20px 22px;
  background-color:#2E6BFF;
  background-size:cover;
  background-position:center;
  color:#fff;
  border-radius:0 0 24px 24px;
  margin-bottom:14px;
  position:relative;
}
.header-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.label{ font-size:0.75rem; font-weight:700; color:rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:0.04em; display:flex; align-items:center; gap:6px; }
.trip-switch{
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:20px;
  padding:5px 10px;
  font-size:0.6875rem;
  font-weight:700;
  color:#fff;
  display:flex; align-items:center; gap:4px;
  cursor:pointer;
}
.search-btn{
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.28);
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; flex-shrink:0;
}
.search-btn svg{ width:14px; height:14px; }
.search-btn i{ font-size:0.875rem; }
h1{ font-size:1.75rem; font-weight:700; margin-top:6px; letter-spacing:-0.02em; color:#fff; }
.sub{ font-size:0.8125rem; color:rgba(255,255,255,0.85); margin-top:3px; }
.photo-credit{ font-size:0.625rem; color:rgba(255,255,255,0.6); margin-top:22px; text-align:right; }
.photo-credit:empty{ display:none; }
.photo-credit a{ color:inherit; text-decoration:none; }

.trip-edit-pencil{ font-size:0.75rem; opacity:0.75; cursor:pointer; margin-left:6px; vertical-align:middle; display:inline-block; padding:10px; margin:-10px -10px -10px 0; }
#tripEditForm .form-label{ color:rgba(255,255,255,0.85); }
#tripEditForm .sheet-actions{ margin-top:12px; }

/* trip dropdown */
.trip-dropdown{
  position:absolute;
  top:52px; right:20px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,0.2);
  width:200px;
  z-index:20;
  display:none;
  overflow:hidden;
}
.trip-dropdown.open{ display:block; }
.trip-option{
  padding:11px 14px;
  font-size:0.8125rem;
  font-weight:600;
  color:var(--text);
  border-bottom:1px solid var(--border);
  cursor:pointer;
}
.trip-option:last-child{ border-bottom:none; }
.trip-option .d{ font-size:0.6875rem; font-weight:500; color:var(--text-dim); margin-top:1px; }
.trip-option.active{ background:#F5F6F8; }

.summary-row{ display:flex; gap:8px; padding:0 20px 14px; overflow-x:auto; }
.summary-chip{
  flex-shrink:0; border-radius:10px; padding:8px 12px; cursor:pointer;
  display:flex; align-items:center; gap:7px; font-size:0.75rem; font-weight:700;
  transition:transform 0.1s ease;
}
.summary-chip:active{ transform:scale(0.96); }
.summary-chip .sw{ width:8px; height:8px; border-radius:50%; }
.summary-chip .n{ font-weight:800; }

.import-strip{
  margin:0 20px 18px; background:#E7F9E9; border:1px solid #C7F0CC; border-radius:10px;
  padding:10px 12px; font-size:0.75rem; font-weight:600; color:#1B8A2E;
  display:flex; align-items:center; gap:8px;
}

/* ---- NEXT UP ---- */
.nextup-wrap{ padding:0 20px 16px; }
.nextup-eyebrow{
  font-size:0.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim);
  margin-bottom:8px;
}
.nextup-card{
  position:relative; background:#4C525B; color:#fff; border-radius:16px;
  padding:15px 16px 15px 20px; cursor:pointer; overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.24); margin-bottom:16px;
}
.nextup-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
}
.nu-watermark{ position:absolute; right:4px; top:38px; font-size:6.25rem; opacity:0.18; pointer-events:none; }
.nu-top, .nu-countdown, .nu-title, .nu-meta, .nu-time-row{ position:relative; z-index:1; }
.nu-top{ display:flex; align-items:center; justify-content:space-between; }
.nu-type{ font-size:0.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; }
.nu-when{
  font-size:0.6875rem; font-weight:700; color:rgba(255,255,255,0.65);
  background:rgba(255,255,255,0.1); padding:3px 10px; border-radius:20px;
}
.nu-countdown{
  font-size:1.1875rem; font-weight:700; letter-spacing:-0.01em; margin-top:10px; font-variant-numeric:tabular-nums;
}
.nu-countdown span{ font-size:0.6875rem; font-weight:500; color:rgba(255,255,255,0.55); margin-left:2px; margin-right:6px; }
.nu-title{ font-size:1.125rem; font-weight:700; margin-top:8px; letter-spacing:-0.01em; }
.nu-meta{ font-size:0.78125rem; color:rgba(255,255,255,0.62); margin-top:3px; }
.nu-time-row{
  display:flex; align-items:center; justify-content:space-between; margin-top:14px;
  padding-top:12px; border-top:1px solid rgba(255,255,255,0.12);
}
.nu-time{ font-size:1.1875rem; font-weight:700; letter-spacing:-0.01em; }
.nu-time span{ font-size:0.75rem; font-weight:500; color:rgba(255,255,255,0.5); margin-left:4px; }
.nu-cta{ font-size:0.75rem; font-weight:700; padding:8px 14px; border-radius:9px; color:#0A0C0E; }

.nextup-card.flight::before{ background:var(--c-flight); } .nextup-card.flight .nu-type{ color:var(--c-flight); } .nextup-card.flight .nu-cta{ background:var(--c-flight); color:#fff; } .nextup-card.flight .nu-watermark{ color:var(--c-flight); }
.nextup-card.hotel::before{ background:var(--c-hotel); } .nextup-card.hotel .nu-type{ color:var(--c-hotel); } .nextup-card.hotel .nu-cta{ background:var(--c-hotel); color:#fff; } .nextup-card.hotel .nu-watermark{ color:var(--c-hotel); }
.nextup-card.taxi::before{ background:var(--c-taxi); } .nextup-card.taxi .nu-type{ color:var(--c-taxi); } .nextup-card.taxi .nu-cta{ background:var(--c-taxi); color:#fff; } .nextup-card.taxi .nu-watermark{ color:var(--c-taxi); }
.nextup-card.restaurant::before{ background:var(--c-restaurant); } .nextup-card.restaurant .nu-type{ color:var(--c-restaurant); } .nextup-card.restaurant .nu-cta{ background:var(--c-restaurant); color:#fff; } .nextup-card.restaurant .nu-watermark{ color:var(--c-restaurant); }
.nextup-card.excursion::before{ background:var(--c-excursion); } .nextup-card.excursion .nu-type{ color:var(--c-excursion); } .nextup-card.excursion .nu-cta{ background:var(--c-excursion); color:#fff; } .nextup-card.excursion .nu-watermark{ color:var(--c-excursion); }
.nextup-card.activity::before{ background:var(--c-activity); } .nextup-card.activity .nu-type{ color:var(--c-activity); } .nextup-card.activity .nu-cta{ background:var(--c-activity); color:#fff; } .nextup-card.activity .nu-watermark{ color:var(--c-activity); }

/* ---- LIST ----
   Ported from the approved design (claude.ai/design project
   "Connecting timeline between cards", Next Up Timeline.dc.html) - a 44px
   rail column + a flexible content column, exactly as specified there,
   rather than an approximated flex layout. */
.list{ padding:0 20px 8px; display:grid; grid-template-columns:44px 1fr; }
.no-results{ grid-column:1 / -1; }

/* ---- TIMELINE RAIL ----
   Every row - day headers included - is one rail/content element pair
   (see dayHeaderRows()/render() in ui.js), so each rail cell only ever
   has to draw a line spanning its OWN row's height. Solid rows stack
   into one continuous thread automatically; the design breaks that into
   a dashed segment only for an actual gap (the overnight jump to the
   next day, or - not implemented here, since it needs real distance
   data - the design's "Transfer to hotel" travel-time row). */
.tl-rail{ position:relative; display:flex; justify-content:center; }
.tl-rail::before{
  content:''; position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:var(--border); transform:translateX(-50%); z-index:0;
}
.tl-rail.dashed::before{ width:0; border-left:2px dashed var(--border); background:none; transform:none; }
.tl-rail.tl-endcap::before{ bottom:auto; height:46px; }

.tl-dot{
  position:relative; z-index:2; flex-shrink:0; margin-top:20px;
  width:30px; height:30px; border-radius:50%; border:4px solid var(--bg); box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:0.8125rem;
}
@keyframes tlPulse{
  0%{ box-shadow:0 0 0 0 var(--pulse-color, transparent); }
  70%{ box-shadow:0 0 0 12px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.tl-dot.current{ animation:tlPulse 2.2s ease-out infinite; }
.tl-dot.gap{ width:12px; height:12px; margin-top:12px; background:var(--border); border:none; box-shadow:0 0 0 4px var(--bg); }
.tl-content{ min-width:0; }

.tl-next-day{ min-height:18px; }
.shared-from-footer{ padding:0 20px 20px; text-align:center; font-size:0.75rem; color:var(--text-faint); }
.shared-from-footer:empty{ display:none; }

/* Compact weekday/day-number badge, sized to sit directly in the 44px
   rail column so the line runs through it exactly like it runs through
   the booking dots below - not a fully-indented text label. Given an
   opaque background matching the page so it cleanly breaks the line
   behind it, rather than the line showing through the letterforms. */
.tl-date{
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  line-height:1.15; background:var(--bg); padding:3px 0;
}
.tl-dow{ font-size:0.6875rem; font-weight:800; color:var(--text-faint); }
.tl-dom{ font-size:1.0625rem; font-weight:900; color:var(--text-dim); }
.tl-date.today-label .tl-dow, .tl-date.today-label .tl-dom{ color:var(--accent); }
/* .tl-month's parent grid item is .tl-content, not .tl-month itself - so
   the alignment has to happen on that cell (flex column, pushed to the
   bottom), not via align-self on .tl-month directly. */
.tl-date-content{ display:flex; flex-direction:column; justify-content:flex-end; }
.tl-month{
  font-size:0.875rem; font-weight:800; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em;
  padding:0 4px 5px; display:flex; align-items:center; gap:8px;
}
.tl-month.today-label{ color:var(--accent); }
.today-badge{
  background:var(--accent); color:#fff; font-size:0.59375rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.04em; padding:2px 8px; border-radius:20px;
}

.row{
  position:relative; overflow:hidden;
  display:flex; align-items:stretch; gap:12px;
  background:var(--card); border-radius:12px;
  padding:12px 14px; margin-bottom:16px; cursor:pointer;
  transition:transform 0.08s ease;
}
.row:active{ transform:scale(0.98); }
.row.cancelled{ opacity:0.6; }
.row::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; z-index:1; }
.row-watermark{ position:absolute; right:-14px; bottom:-18px; font-size:4.75rem; opacity:0.14; pointer-events:none; }
.row .time-col{
  position:relative; z-index:1; width:46px; flex-shrink:0;
  display:flex; flex-direction:column; justify-content:center;
  font-size:0.8125rem; font-weight:600; color:var(--text);
}
.row.cancelled .time-col{ text-decoration:line-through; }
.row .time-col .ampm{ display:block; font-size:0.625rem; font-weight:500; color:var(--text-faint); margin-top:1px; }
.row .body{ position:relative; z-index:1; flex:1; min-width:0; }
.row .top-line{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.row .type-row{ display:flex; align-items:center; gap:6px; }
.row .type{ font-size:0.65625rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; }
.row .conf{ font-size:0.6875rem; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.row .title{ font-size:0.90625rem; font-weight:600; color:var(--text); margin-top:3px; }
.row.cancelled .title{ text-decoration:line-through; color:var(--text-dim); }
.row .meta{ font-size:0.75rem; color:var(--text-dim); margin-top:2px; line-height:1.4; }
.row .badge-row{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.status-pill{
  font-size:0.625rem; font-weight:700; padding:2px 8px; border-radius:20px;
  display:inline-flex; align-items:center; gap:4px;
}
.status-pill.changed{ background:var(--amber-tint); color:var(--amber); }
.status-pill.cancelled{ background:var(--red-tint); color:var(--red); }
.status-pill.attach{ background:#F0F1F3; color:var(--text-dim); }
.status-pill svg{ width:10px; height:10px; }

.flight .type{ color:var(--c-flight); }
.hotel .type{ color:var(--c-hotel); }
.taxi .type{ color:var(--c-taxi); }
.restaurant .type{ color:var(--c-restaurant); }
.excursion .type{ color:var(--c-excursion); }
.activity .type{ color:var(--c-activity); }

.row.flight::before{ background:var(--c-flight); } .row.flight .row-watermark{ color:var(--c-flight); }
.row.hotel::before{ background:var(--c-hotel); } .row.hotel .row-watermark{ color:var(--c-hotel); }
.row.taxi::before{ background:var(--c-taxi); } .row.taxi .row-watermark{ color:var(--c-taxi); }
.row.restaurant::before{ background:var(--c-restaurant); } .row.restaurant .row-watermark{ color:var(--c-restaurant); }
.row.excursion::before{ background:var(--c-excursion); } .row.excursion .row-watermark{ color:var(--c-excursion); }
.row.activity::before{ background:var(--c-activity); } .row.activity .row-watermark{ color:var(--c-activity); }

.add-row{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:10px 0 8px; padding:12px; border:1.5px dashed var(--border); border-radius:12px;
  font-size:0.78125rem; font-weight:600; color:var(--text-dim);
}

/* needs review */
.review-section{ padding:6px 20px 20px; }
.review-head{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.review-head .t{ font-size:0.75rem; font-weight:700; color:var(--amber); text-transform:uppercase; letter-spacing:0.04em; }
.review-head svg{ width:13px; height:13px; color:var(--amber); }
.review-card{
  background:var(--amber-tint); border:1px solid #F5DFB8; border-radius:12px; padding:12px 14px; margin-bottom:8px; cursor:pointer;
}
.review-card .title{ font-size:0.84375rem; font-weight:600; color:var(--text); }
.review-card .meta{ font-size:0.71875rem; color:#92610A; margin-top:3px; }

.no-results{ text-align:center; padding:30px 20px; color:var(--text-faint); font-size:0.8125rem; }
.empty-day-card{
  position:relative; overflow:hidden;
  text-align:center; padding:22px 20px; margin-bottom:8px; color:var(--text-faint); font-size:0.8125rem;
  background:#EEF0F2; border-radius:12px; cursor:pointer;
}
.empty-day-card:active{ background:var(--border); }
.empty-day-card span{ position:relative; z-index:1; }
.empty-day-card .row-watermark{ color:#9CA3AF; opacity:0.16; }

.day-actions-card{
  border:1.5px dashed var(--border); border-radius:12px; margin-bottom:16px; overflow:hidden;
}
.day-actions-summary{
  display:flex; align-items:center; gap:8px; padding:16px; cursor:pointer;
  font-size:0.8125rem; color:var(--text-faint); line-height:1.4;
}
.day-actions-summary:active{ background:#EEF0F2; }
.day-actions-summary span{ flex:1; }
.day-actions-summary b{ color:inherit; font-weight:700; }
.day-actions-summary .ti-chevron-down{ flex-shrink:0; transition:transform 0.15s; }
.day-actions-card.expanded .day-actions-summary .ti-chevron-down{ transform:rotate(180deg); }
.day-actions-list{ display:none; border-top:1px solid var(--border); padding:6px; flex-direction:column; gap:2px; }
.day-actions-card.expanded .day-actions-list{ display:flex; }
.day-action-row{ display:flex; align-items:center; gap:12px; border-radius:10px; padding:10px 10px; cursor:pointer; }
.day-action-row:active{ background:#EEF0F2; }
.day-action-icon{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1rem; }
.day-action-title{ font-size:0.8125rem; font-weight:600; color:var(--text); flex:1; min-width:0; }
.day-action-row .ti-chevron-down{ transform:rotate(-90deg); color:var(--text-faint); font-size:0.9rem; flex-shrink:0; }

.nearby-sort-row{ display:flex; align-items:center; gap:8px; margin:2px 0 14px; font-size:0.75rem; color:var(--text-dim); }
.nearby-sort-btn{ padding:5px 11px; border-radius:20px; border:1px solid var(--border); background:var(--card); color:var(--text-dim); font-size:0.75rem; font-weight:600; cursor:pointer; }
.nearby-sort-btn.active{ background:#111827; color:#fff; border-color:#111827; }

.nearby-section-label{ font-size:0.75rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.02em; margin:18px 0 10px; }
.nearby-section-label .nearby-section-sub{ font-weight:600; text-transform:none; color:var(--text-faint); letter-spacing:normal; }
.nearby-section-label.google-label{ display:inline-block; background:var(--c-flight-tint); color:var(--c-flight); padding:5px 10px; border-radius:8px; }

.nearby-place-card{ border:1px solid var(--border); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.nearby-place-photo-wrap{ position:relative; }
.nearby-place-photo{ display:block; width:100%; height:140px; object-fit:cover; background:var(--border); }
.nearby-place-open-badge{
  position:absolute; top:10px; left:10px;
  background:rgba(20,24,35,0.72); color:#fff; font-size:0.6875rem; font-weight:700;
  padding:5px 11px; border-radius:20px;
}
.nearby-place-open-badge.closed{ background:rgba(220,38,38,0.75); }
.nearby-place-photo-credit{ font-size:0.625rem; color:#fff; text-align:right; padding:3px 8px; margin-top:-24px; position:relative; text-shadow:0 1px 3px rgba(0,0,0,0.7); }
.nearby-place-photo-credit a{ color:inherit; }
.nearby-place-body{ padding:14px; }
.nearby-place-name{ font-size:0.875rem; font-weight:700; color:var(--text); }
.nearby-place-meta{ font-size:0.75rem; color:var(--text-dim); margin-top:6px; }
.nearby-place-meta .ti-star{ color:#F2A33C; }
.nearby-place-sub{ font-size:0.75rem; color:var(--text-faint); margin-top:4px; }
.nearby-place-actions{ display:flex; gap:8px; margin-top:12px; }
.nearby-place-actions .sheet-btn{ padding:9px; font-size:0.75rem; }
.nearby-place-actions .ti-external-link{ margin-left:3px; font-size:0.85em; }

@keyframes skeletonShimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}
.nearby-place-card.skeleton{ pointer-events:none; }
.skeleton-block, .skeleton-line{
  background:linear-gradient(90deg, var(--border) 25%, #EEF0F3 37%, var(--border) 63%);
  background-size:400% 100%;
  animation:skeletonShimmer 1.4s ease-in-out infinite;
  border-radius:6px;
}
.skeleton-line{ border-radius:8px; }

.bottomnav{
  position:absolute; left:0; right:0; bottom:0; background:rgba(245,246,248,0.94); backdrop-filter:blur(6px);
  border-top:1px solid var(--border); display:flex; justify-content:space-around;
  padding:8px 0 calc(6px + env(safe-area-inset-bottom, 0px)); z-index:6;
}
.navitem{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:0.75rem; font-weight:600; color:var(--text-faint); cursor:pointer; }
.navitem.active{ color:var(--accent); }
.navitem .ic{ font-size:1.375rem; line-height:1; }

.floating-add{
  position:absolute;
  left:20px; right:20px; bottom:calc(68px + env(safe-area-inset-bottom, 0px));
  background:#111827; color:#fff;
  text-align:center;
  padding:13px;
  border-radius:12px;
  font-size:0.84375rem; font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  cursor:pointer;
  z-index:5;
  display:none;
}
.floating-add.visible{ display:block; }

/* ---- CONFIRM DIALOG ---- */
/* Replaces native confirm() dialogs, which browsers always prefix with
   the page's raw address (e.g. "xxxxx.netlify.app says...") — a security
   feature that can't be styled or hidden, so this is our own dialog
   instead. Sits above the detail sheet (z-index 20/21 vs the sheet's 11),
   since deleting a booking is triggered from inside it. */
.confirm-backdrop{ position:absolute; inset:0; background:rgba(10,14,20,0.55); opacity:0; pointer-events:none; transition:opacity 0.2s ease; z-index:20; }
.confirm-backdrop.open{ opacity:1; pointer-events:auto; }
.confirm-dialog{
  position:absolute; left:20px; right:20px; top:50%; z-index:21;
  background:var(--bg); border-radius:16px; padding:20px; box-shadow:0 20px 40px rgba(0,0,0,0.3);
  opacity:0; pointer-events:none; transform:translateY(-50%) scale(0.95);
  transition:opacity 0.18s ease, transform 0.18s ease;
}
.confirm-dialog.open{ opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1); }
.confirm-message{ font-size:0.90625rem; color:var(--text); line-height:1.45; margin-bottom:18px; }
.confirm-actions{ display:flex; gap:10px; }
.confirm-btn{
  flex:1; text-align:center; padding:12px; border-radius:10px; font-size:0.8125rem; font-weight:700;
  border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer;
}
.confirm-btn.danger{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---- DETAIL SHEET ---- */
.sheet-backdrop{ position:absolute; inset:0; background:rgba(10,14,20,0.55); opacity:0; pointer-events:none; transition:opacity 0.2s ease; z-index:10; }
.sheet-backdrop.open{ opacity:1; pointer-events:auto; }
.detail-sheet{
  position:absolute; left:0; right:0; bottom:0; background:var(--bg);
  border-radius:20px 20px 0 0; min-height:460px; max-height:90%; transform:translateY(100%);
  transition:transform 0.28s cubic-bezier(.32,.72,0,1); z-index:11; display:flex; flex-direction:column; overflow:hidden;
}
.detail-sheet.open{ transform:translateY(0); }
.detail-sheet.dragging{ transition:none; }
.sheet-grabber{ width:36px; height:4px; background:var(--border); border-radius:4px; margin:10px auto 4px; flex-shrink:0; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 18px 4px; flex-shrink:0; }
.sheet-back{ display:flex; align-items:center; gap:4px; font-size:0.875rem; font-weight:600; color:var(--text-dim); background:none; border:none; cursor:pointer; padding:6px 4px; }
.sheet-type-pill{ font-size:0.6875rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; padding:5px 11px; border-radius:20px; }
.sheet-delete{
  width:32px; height:32px; border-radius:50%; border:none; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text-faint); flex-shrink:0;
}
.sheet-delete:active{ background:var(--red-tint); color:var(--red); }
.sheet-delete svg{ width:17px; height:17px; }
.sheet-body{ padding:6px 20px 16px; overflow-y:auto; flex:1; min-height:0; }
.sheet-footer{
  flex-shrink:0; padding:12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background:var(--bg); border-top:1px solid var(--border);
}
.sheet-footer:empty{ display:none; }
.sheet-title{ font-size:1.4375rem; font-weight:700; letter-spacing:-0.01em; margin-top:8px; }
.sheet-title.cancelled{ text-decoration:line-through; color:var(--text-dim); }
.sheet-conf{ font-size:0.78125rem; color:var(--text-faint); margin-top:4px; }
.sheet-conf:empty{ display:none; }
.sheet-meta{ font-size:0.8125rem; color:var(--text-dim); margin-top:3px; }

.sheet-alert{
  margin-top:14px; border-radius:12px; padding:11px 13px; font-size:0.78125rem; font-weight:600; display:flex; align-items:center; gap:8px;
}
.sheet-alert.changed{ background:var(--amber-tint); color:var(--amber); }
.sheet-alert.cancelled{ background:var(--red-tint); color:var(--red); }
.sheet-alert svg{ width:15px; height:15px; flex-shrink:0; }

.sheet-card{ margin-top:18px; }
.sheet-field{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.8125rem; }
.sheet-field:last-child{ border-bottom:none; }
.sheet-field .k{ color:var(--text-dim); font-weight:500; }
.sheet-field .v{ color:var(--text); font-weight:600; text-align:right; }
.sheet-field input{
  border:1px solid var(--border); border-radius:6px; padding:5px 8px; font-size:0.78125rem; font-family:'Inter',sans-serif;
  text-align:right; width:140px; color:var(--text);
}
.sheet-field .v-edit{ flex:1; min-width:0; display:block; }
.sheet-field .v-edit .datetime-field{ align-items:flex-end; }
.sheet-field .v-edit .datetime-field input{ width:100%; text-align:left; }
.sheet-field:has(.v-edit){ align-items:flex-start; }

.flight-route-card{
  margin-top:18px; padding:16px; border-radius:14px; background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.frc-side{ min-width:0; }
.frc-side.right{ text-align:right; }
.frc-code{ font-size:1.375rem; font-weight:800; color:var(--text); letter-spacing:-0.01em; }
.frc-time{ font-size:0.9375rem; font-weight:700; color:var(--text); margin-top:2px; }
.frc-date{ font-size:0.75rem; color:var(--text-faint); margin-top:2px; }
.frc-middle{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 4px; flex-shrink:0; }
.frc-duration{ font-size:0.6875rem; font-weight:700; color:var(--text-faint); white-space:nowrap; }
.frc-line{
  width:56px; height:1px; background:var(--border); position:relative;
  display:flex; align-items:center; justify-content:center;
}
.frc-line i{ position:absolute; background:var(--card); color:var(--c-flight); font-size:0.9375rem; padding:0 4px; }

/* ---- MAP PREVIEW ---- */
.map-preview{
  border-radius:14px; overflow:hidden; border:1px solid var(--border); margin-top:16px;
}
.map-preview iframe{ display:block; width:100%; height:200px; border:0; }
.map-legend-line{
  padding:11px 13px; font-size:0.78125rem; color:var(--text); background:var(--card);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.map-legend-line .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.map-legend-line .arrow{ color:var(--text-dim); }
.map-directions-btn{
  display:block; text-align:center; padding:9px; margin:0 13px 12px;
  border-radius:9px; font-size:0.78125rem; font-weight:700; cursor:pointer;
  border:1.5px solid; background:transparent;
}

.tz-card{ background:var(--card); border:1px solid var(--border); border-radius:12px; margin-top:16px; padding:12px 14px; }
.tz-title{ font-size:0.6875rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px; }
.tz-row{ display:flex; justify-content:space-between; font-size:0.8125rem; padding:4px 0; }
.tz-row .k{ color:var(--text-dim); }
.tz-row .v{ font-weight:700; }

.attach-card{
  margin-top:16px; background:#111827; border-radius:12px; padding:16px; color:#fff; display:flex; align-items:center; gap:12px; cursor:pointer;
}
.attach-qr{ width:44px; height:44px; border-radius:6px; background:#fff; flex-shrink:0;
  background-image:
    linear-gradient(90deg,#111 0 20%,transparent 0 30%,#111 0 45%,transparent 0 55%,#111 0 70%,transparent 0 80%,#111 0 100%),
    linear-gradient(0deg,#111 0 20%,transparent 0 30%,#111 0 45%,transparent 0 55%,#111 0 70%,transparent 0 80%,#111 0 100%);
  background-blend-mode:multiply;
}
.attach-txt .t{ font-size:0.8125rem; font-weight:700; }
.attach-txt .s{ font-size:0.6875rem; color:rgba(255,255,255,0.6); margin-top:2px; }

.sheet-note{ margin-top:16px; font-size:0.875rem; font-style:italic; color:var(--text-dim); line-height:1.5; }
.sheet-note:empty{ display:none; }
.sheet-source{ margin-top:14px; display:flex; align-items:center; gap:8px; font-size:0.8125rem; color:var(--text-faint); }
.sheet-actions{ display:flex; gap:10px; }
.sheet-btn{ flex:1; text-align:center; padding:12px; border-radius:10px; font-size:0.8125rem; font-weight:700; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; text-decoration:none; display:block; }
.sheet-btn.primary{ background:#111827; color:#fff; border-color:#111827; }

/* ---- MANUAL ADD FORM ---- */
.form-label{ font-size:0.71875rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; margin:16px 0 7px; }
.form-label:first-child{ margin-top:14px; }
.form-label .req{ color:var(--red); margin-left:2px; }
.manual-subtitle{ font-size:0.8125rem; color:var(--text-dim); line-height:1.45; margin:2px 0 4px; }
/* Reserves 2 lines' height specifically where the subtitle length varies by
   selected type (see MANUAL_TYPE_SUBTITLES) and sits directly above the
   Type button grid - without this, switching type made the buttons jump
   vertically depending on whether that type's text wrapped to 1 or 2
   lines. Not applied to manual-subtitle generally (e.g. the Edit form's
   own static one-line note), which has nothing below it that would jump. */
.manual-subtitle.type-subtitle{ min-height:2.9em; }

.type-select{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.type-opt{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:11px 6px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--card); font-size:0.75rem; font-weight:700;
  color:var(--text-dim); cursor:pointer; overflow-wrap:break-word;
}
.type-opt i{ font-size:1.0625rem; }
.type-opt.selected{ border-color:currentColor; }
.type-opt.selected.flight{ background:var(--c-flight-tint); color:var(--c-flight); }
.type-opt.selected.hotel{ background:var(--c-hotel-tint); color:var(--c-hotel); }
.type-opt.selected.taxi{ background:var(--c-taxi-tint); color:var(--c-taxi); }
.type-opt.selected.restaurant{ background:var(--c-restaurant-tint); color:var(--c-restaurant); }
.type-opt.selected.excursion{ background:var(--c-excursion-tint); color:var(--c-excursion); }
.type-opt.selected.activity{ background:var(--c-activity-tint); color:var(--c-activity); }

.form-input, .form-select, .form-textarea{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 13px;
  font-size:0.875rem; font-family:'Inter',sans-serif; color:var(--text); background:var(--card);
}
.form-textarea{ resize:none; height:64px; }
.form-row{ display:flex; gap:10px; }
.form-row > *{ flex:1; }
.date-picker{ display:flex; gap:8px; }
.date-picker select{ flex:1; }
.time-picker{ display:flex; gap:8px; }
.time-picker select{ flex:1; }

.route-field{ display:flex; align-items:flex-start; gap:8px; }
.route-field .form-input{ width:100%; text-align:center; }
.route-field .form-input.iata{ text-transform:uppercase; }
.route-field .route-arrow{ color:var(--text-faint); font-size:1.125rem; font-weight:700; flex-shrink:0; margin-top:11px; }
.route-input-wrap{ flex:1; min-width:0; position:relative; }
.route-input-wrap .place-results{ position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:5; }

.lookup-flight-row{ display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.lookup-flight-row .form-input{ flex:1; }
.lookup-flight-row .sheet-btn{ flex-shrink:0; white-space:nowrap; }
.datetime-field{ display:flex; flex-direction:column; gap:8px; }
.datetime-field .form-input{ flex:1; }

.place-results{
  border:1px solid var(--border); border-radius:10px; margin-top:-1px; overflow:hidden;
  background:var(--card); box-shadow:0 4px 10px rgba(15,23,42,0.08);
}
.place-results:empty{ display:none; margin-top:0; border:none; }
.place-result{
  padding:10px 13px; font-size:0.8125rem; color:var(--text); cursor:pointer;
  border-top:1px solid var(--border);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.place-result:first-child{ border-top:none; }
.place-result:active{ background:var(--bg); }

/* ---- TOAST ---- */
.toast{
  position:absolute;
  left:16px; right:16px; top:calc(16px + env(safe-area-inset-top, 0px));
  background:#111827;
  border-radius:16px;
  padding:18px 18px 14px;
  z-index:30;
  transform:translateY(-20px);
  opacity:0;
  pointer-events:none;
  transition:transform 0.25s cubic-bezier(.32,.72,0,1), opacity 0.25s ease;
  box-shadow:0 12px 28px rgba(0,0,0,0.3);
  overflow:hidden;
}
.toast.show{
  transform:translateY(0);
  opacity:1;
}
.toast-row{ display:flex; align-items:flex-start; gap:12px; }
.toast .toast-icon{
  width:36px; height:36px;
  border-radius:9px;
  flex-shrink:0;
  display:block;
}
.toast .txt{ flex:1; min-width:0; }
.toast .t{ font-size:1rem; font-weight:700; color:#fff; }
.toast .s{
  font-size:0.875rem;
  color:rgba(255,255,255,0.75);
  margin-top:4px;
  white-space:normal;
  word-break:break-word;
  line-height:1.45;
}
.toast .spinner{
  width:18px; height:18px;
  border:2px solid rgba(255,255,255,0.25);
  border-top-color:#fff;
  border-radius:50%;
  flex-shrink:0;
  margin-top:3px;
  animation:spin 0.7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.toast-progress-track{
  height:3px;
  background:rgba(255,255,255,0.15);
  border-radius:2px;
  margin-top:14px;
  overflow:hidden;
}
.toast-progress-bar{
  height:100%;
  width:100%;
  background:#fff;
  border-radius:2px;
}

/* ---- VIEWS ---- */
.view{ display:none; }
.view.active{ display:block; }

/* ---- LANDING ---- */
.landing-header{
  padding:28px 20px 22px;
  background:#14181C;
  border-radius:0 0 24px 24px;
  color:#fff;
  margin-bottom:14px;
}
.landing-logo-row{ display:flex; flex-direction:column; align-items:center; }
/* Bounding-box centering isn't visual centering here: the bright white
   "Tripstack" text reads as heavier than the icon, pulling the perceived
   center right of the true box center (measured via a pixel-weight
   centroid, not eyeballed) — nudge left to compensate. */
.landing-logo{ display:flex; align-items:center; gap:0; transform:translateX(-13px); }
.landing-logo-icon{ border-radius:12px; display:block; }
.landing-logo span{ font-size:1.75rem; font-weight:800; letter-spacing:-0.03em; color:#fff; }
.landing-logo-bar{ width:130px; height:3px; border-radius:2px; margin-top:10px; background:linear-gradient(90deg, #2E6BFF, #A729F0, #FF6A2B); }
.landing-header .sub{ font-size:0.8125rem; color:rgba(255,255,255,0.85); margin-top:14px; text-align:center; }

/* ---- RATINGS ---- */
.ratings-header{
  position:relative; overflow:hidden;
  padding:28px 20px 22px;
  background:#14181C;
  border-radius:0 0 24px 24px;
  color:#fff;
  margin-bottom:14px;
}
.ratings-header .ghost-heart{
  position:absolute; right:-10px; bottom:-30px; font-size:8.125rem; color:#EC4899; opacity:0.2; line-height:1; pointer-events:none;
}
.ratings-header h1{ position:relative; margin-top:0; }
.ratings-header .sub{ position:relative; margin-top:3px; text-align:left; }

.rating-card{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:12px; padding:14px 16px; background:var(--bg); border-radius:14px;
}
.rating-stars{ font-size:1.625rem; }
.rating-stars .star{ color:#D1D5DB; cursor:pointer; margin-right:0.25rem; }
.rating-stars .star.filled{ color:#EC4899; }
.rating-stars.small{ font-size:1.0625rem; }
.rating-stars.small .star{ margin-right:0.125rem; cursor:default; }
/* Nudged down a few px: the ★ glyph's ink sits higher in its line box than
   plain text, so even flex-centered against the stars, this text looks too
   high unless shifted down to match it optically. */
.rating-remove{ font-size:0.75rem; font-weight:600; color:var(--red); cursor:pointer; position:relative; top:4px; }
.rating-prompt{ font-size:0.75rem; font-weight:600; color:var(--text-dim); position:relative; top:4px; }

.trip-section-label{
  font-size:0.75rem; font-weight:700; color:var(--text-dim); text-transform:uppercase;
  letter-spacing:0.04em; margin:20px 20px 10px;
}

.active-card{
  margin:8px 20px 4px;
  background-color:#2E6BFF;
  background-size:cover;
  background-position:center;
  border-radius:18px;
  padding:20px;
  color:#fff;
  cursor:pointer;
}
.active-card .tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.65625rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em;
  background:rgba(255,255,255,0.18); padding:4px 10px; border-radius:20px;
}
.active-card .tag .pulse{
  width:6px; height:6px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,0.7);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,0.5); }
  70%{ box-shadow:0 0 0 6px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.active-card .name{ font-size:1.5rem; font-weight:700; margin-top:12px; letter-spacing:-0.01em; }
.active-card .meta{ font-size:0.8125rem; color:rgba(255,255,255,0.82); margin-top:4px; }
.active-card .stats{
  display:flex; gap:18px; margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.2);
}
.active-card .stat .n{ font-size:1rem; font-weight:700; }
.active-card .stat .l{ font-size:0.65625rem; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.05em; margin-top:1px; }

.trip-card{
  position:relative; overflow:hidden;
  margin:0 20px 10px;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px 14px 20px; cursor:pointer;
  display:flex; align-items:center; gap:14px;
}
.trip-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--border); }
.trip-card.flight::before{ background:var(--c-flight); }
.trip-card.hotel::before{ background:var(--c-hotel); }
.trip-card.taxi::before{ background:var(--c-taxi); }
.trip-card.restaurant::before{ background:var(--c-restaurant); }
.trip-card.excursion::before{ background:var(--c-excursion); }
.trip-card.activity::before{ background:var(--c-activity); }
.trip-card .thumb{
  width:56px; height:56px;
  border-radius:12px;
  flex-shrink:0;
  background-size:cover;
  background-position:center;
}
.trip-card .info{ flex:1; min-width:0; }
.trip-card .name{ font-size:0.96875rem; font-weight:700; color:var(--text); }
.trip-card .meta{ font-size:0.75rem; color:var(--text-dim); margin-top:2px; }
.trip-card .relative{
  font-size:0.6875rem; font-weight:700; color:var(--accent); margin-top:5px;
  display:inline-flex; align-items:center; gap:4px;
}
.trip-card.past{ opacity:0.72; }
.trip-card.past .thumb{ filter:grayscale(0.5); }
.trip-card.past .relative{ color:var(--text-faint); }
.trip-card .chev{ color:var(--text-faint); font-size:1rem; flex-shrink:0; }
.trip-card .review-flag{
  font-size:0.65625rem; font-weight:700; color:var(--amber); background:var(--amber-tint);
  padding:3px 8px; border-radius:20px; margin-top:6px; display:inline-flex; align-items:center; gap:4px;
}

.review-banner{
  margin:4px 20px 20px; background:var(--amber-tint); border:1px solid #F5DFB8; border-radius:14px;
  padding:13px 15px; display:flex; align-items:center; gap:10px; cursor:pointer;
}
.review-banner .t{ font-size:0.8125rem; font-weight:700; color:#92610A; }
.review-banner .s{ font-size:0.71875rem; color:#92610A; opacity:0.85; margin-top:1px; }
.review-banner svg{ width:18px; height:18px; color:var(--amber); flex-shrink:0; }
.review-banner .chev{ margin-left:auto; color:#92610A; }

/* trip view back button (replaces old switcher) */
.back-btn{
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.28);
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; flex-shrink:0;
}
.back-btn svg{ width:16px; height:16px; }

/* ---- SETTINGS VIEW (not in the original prototype — it only had a dead
   nav icon for this; built to match the prototype's own form language) ---- */
.settings-header{ padding:18px 20px 6px; }
.settings-header h1{ font-size:1.625rem; font-weight:700; letter-spacing:-0.02em; color:var(--text); }
.settings-section{ margin:18px 20px; }
.settings-section h2{ font-size:0.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-dim); margin-bottom:10px; }
.settings-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; }
.settings-card p{ font-size:0.78125rem; color:var(--text-dim); line-height:1.5; margin-bottom:10px; }
.settings-card .form-input{ margin-bottom:10px; }

.settings-advanced{ margin:18px 20px; }
.settings-advanced summary{
  font-size:0.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--text-dim); cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; padding:4px 0;
}
.settings-advanced summary::-webkit-details-marker{ display:none; }
.settings-advanced summary .chev{ font-size:1rem; transition:transform 0.2s ease; }
.settings-advanced[open] summary .chev{ transform:rotate(180deg); }
.settings-advanced .settings-section{ margin:14px 0 0; }
.settings-advanced .settings-section:first-of-type{ margin-top:14px; }
.toggle-row{
  display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-dim);
}
.toggle-switch{
  position:relative; flex:0 0 auto; width:42px; height:24px;
}
.toggle-switch input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1;
}
.toggle-switch .toggle-track{
  position:absolute; inset:0; border-radius:12px; background:#D1D5DB; transition:background 0.2s ease;
}
.toggle-switch .toggle-thumb{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.3); transition:transform 0.2s ease;
}
.toggle-switch input:checked ~ .toggle-track{ background:var(--accent) !important; }
.toggle-switch input:checked ~ .toggle-thumb{ transform:translateX(18px) !important; }
.settings-status{ font-size:0.78125rem; color:var(--text-dim); margin-top:10px; }
.settings-results{ list-style:none; margin-top:10px; max-height:220px; overflow-y:auto; }
.settings-results li{ font-size:0.75rem; color:var(--text-dim); padding:6px 0; border-bottom:1px solid var(--border); }
.settings-results li:last-child{ border-bottom:none; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }