* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif; background: #0b1a2e; color: #f0f0f5; min-height: 100vh; -webkit-font-smoothing: antialiased; background-image: linear-gradient(175deg, #0b1a2e 0%, #112240 40%, #0d2137 70%, #091528 100%); background-attachment: fixed; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

/* ─── Top nav bar ─── */
.navbar { background: rgba(11,26,46,0.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid rgba(255,255,255,0.08); position: sticky; top: 0; z-index: 100; padding: 0 40px; padding-top: env(safe-area-inset-top); }
.navbar-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 52px; }
.navbar h1 { font-size: 21px; font-weight: 600; color: #f0f0f5; letter-spacing: -0.3px; }
.nav-actions { display: flex; align-items: center; gap: 12px; }

.segmented { display: inline-flex; background: rgba(255,255,255,0.08); border-radius: 8px; padding: 2px; }
.seg-btn { padding: 6px 16px; font-size: 13px; font-weight: 500; border: none; background: none; color: rgba(255,255,255,0.6); cursor: pointer; border-radius: 7px; transition: all 0.2s; }
.seg-btn.active { background: rgba(255,255,255,0.12); box-shadow: 0 1px 4px rgba(0,0,0,0.2); font-weight: 600; color: #fff; }

.add-btn { background: #5ac8fa; color: #0b1a2e; border: none; padding: 7px 16px; border-radius: 980px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s; }
.add-btn:hover { background: #7dd5fb; }

/* ─── Dashboard ─── */
.dashboard { padding: 32px 40px; max-width: 1100px; margin: 0 auto; }
.page-title { font-size: 32px; font-weight: 700; letter-spacing: -0.5px; color: #fff; margin-bottom: 6px; }
.page-subtitle { font-size: 17px; color: rgba(255,255,255,0.45); font-weight: 400; margin-bottom: 32px; }
.trips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

/* ─── Trip card ─── */
.trip-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 18px; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); overflow: hidden; position: relative; }
.trip-card:hover { transform: scale(1.02); box-shadow: 0 8px 30px rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.15); }
.card-image { width: 100%; height: 180px; object-fit: cover; display: block; background: rgba(255,255,255,0.04); }
.card-image-placeholder { width: 100%; height: 180px; background: linear-gradient(135deg, #1a3a5c, #2d5a8e); display: flex; align-items: center; justify-content: center; font-size: 48px; color: rgba(255,255,255,0.4); }
.card-body { padding: 16px 18px 18px; }
.card-destination { font-size: 19px; font-weight: 600; letter-spacing: -0.2px; color: #fff; }
.card-dates { font-size: 14px; color: rgba(255,255,255,0.45); margin-top: 3px; }
.card-meta { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.card-pill { font-size: 12px; padding: 4px 10px; border-radius: 980px; font-weight: 500; }
.pill-upcoming { background: rgba(52,199,89,0.2); color: #5dd77b; }
.pill-planning { background: rgba(255,214,10,0.15); color: #ffd60a; }
.pill-past { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.pill-info { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }
.card-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; }
.trip-card:hover .card-actions { opacity: 1; }
.card-action-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); border: none; color: white; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.card-action-btn:hover { background: rgba(0,0,0,0.7); }
.card-action-btn.del:hover { background: rgba(220,38,38,0.8); }
.section-label { font-size: 22px; font-weight: 600; letter-spacing: -0.2px; color: rgba(255,255,255,0.8); margin: 40px 0 18px; }
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state h3 { font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.empty-state p { font-size: 15px; color: rgba(255,255,255,0.45); }

/* ─── Detail: top bar ─── */
.detail-topbar { background: rgba(11,26,46,0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 0.5px solid rgba(255,255,255,0.08); padding: 16px 40px; padding-top: calc(16px + env(safe-area-inset-top)); }
.detail-topbar-inner { max-width: 1100px; margin: 0 auto; }
.detail-back { background: none; border: none; color: #5ac8fa; font-size: 15px; font-weight: 500; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.detail-back:hover { text-decoration: underline; }
.detail-back svg { stroke: #5ac8fa; }
.detail-title { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; color: #fff; }
.detail-subtitle { font-size: 15px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.detail-subtitle .countdown { color: #5ac8fa; font-weight: 500; }

/* ─── Detail: info strip ─── */
.info-strip { max-width: 1100px; margin: 0 auto; padding: 20px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.info-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 16px 18px; }
.info-card-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.info-card-label svg { opacity: 0.5; stroke: rgba(255,255,255,0.5); }
.info-card-item { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; }
.info-card-item.muted { color: rgba(255,255,255,0.4); font-style: italic; }

/* ─── Transfer rows ─── */
.transfer-leg { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
.transfer-leg:last-child { border-bottom: none; }
.transfer-check { flex-shrink: 0; cursor: pointer; margin-top: 1px; }
.transfer-details { flex: 1; min-width: 0; }
.transfer-leg-name { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85); }
.transfer-company { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 1px; }
.transfer-time { font-size: 12px; color: #5ac8fa; font-weight: 500; margin-top: 1px; }
.transfer-edit { background: none; border: none; color: #5ac8fa; font-size: 12px; cursor: pointer; padding: 0; font-weight: 500; }
.transfer-edit:hover { text-decoration: underline; }
.transfer-edit-form { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.transfer-edit-form input { padding: 5px 8px; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; font-size: 12px; outline: none; font-family: inherit; background: rgba(255,255,255,0.06); color: #f0f0f5; }
.transfer-edit-form input:focus { border-color: #5ac8fa; }
.transfer-no-flights { font-size: 13px; color: rgba(255,255,255,0.4); font-style: italic; padding: 4px 0; }

/* ─── Detail: tabs ─── */
.detail-tabs { display: flex; gap: 0; padding: 0 40px; background: rgba(11,26,46,0.5); border-bottom: 0.5px solid rgba(255,255,255,0.08); overflow-x: auto; }
.detail-tabs-inner { max-width: 1100px; margin: 0 auto; display: flex; width: 100%; }
.dtab { padding: 13px 20px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.4); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none; }
.dtab.active { color: #5ac8fa; border-bottom-color: #5ac8fa; font-weight: 600; }
.dtab:hover { color: rgba(255,255,255,0.7); }

.detail-content { padding: 24px 40px; max-width: 1100px; margin: 0 auto; }

/* ─── Calendar grid ─── */
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-grid { background: rgba(255,255,255,0.04); border-radius: 14px; overflow: hidden; border: 0.5px solid rgba(255,255,255,0.08); min-width: fit-content; }
.cal-header { display: grid; grid-template-columns: repeat(7, minmax(var(--cal-col-min, 0), 1fr)); border-bottom: 1px solid rgba(255,255,255,0.08); }
.cal-header-cell { padding: 10px 8px; text-align: center; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.5px; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(var(--cal-col-min, 0), 1fr)); }
.cal-cell { min-height: 130px; border-right: 0.5px solid rgba(255,255,255,0.05); border-bottom: 0.5px solid rgba(255,255,255,0.05); padding: 6px 8px; position: relative; transition: background 0.15s; overflow: hidden; }
.cal-cell:last-child { border-right: none; }
.cal-cell.outside { background: rgba(0,0,0,0.15); }
.cal-day-name { display: none; }
.cal-cell.trip-day { background: rgba(90,200,250,0.06); }
.cal-cell.today { background: rgba(90,200,250,0.12); }
.cal-date { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); text-align: right; margin-bottom: 4px; }
.cal-cell.outside .cal-date { color: rgba(255,255,255,0.2); }
.cal-cell.today .cal-date { color: #5ac8fa; }
.cal-activities { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.cal-cat { font-size: 10px; line-height: 1.3; display: flex; align-items: flex-start; gap: 4px; padding: 1px 0; }
.cal-cat-icon { flex-shrink: 0; width: 13px; text-align: center; font-size: 9px; opacity: 0.7; }
.cal-cat-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255,255,255,0.65); }
.cal-cat-text.empty { color: rgba(255,255,255,0.15); }
.cal-cat-text.highlight { color: #5ac8fa; font-weight: 500; }
.cal-more { font-size: 11px; color: #5ac8fa; font-weight: 500; cursor: pointer; margin-top: 2px; }
.cal-month-label { grid-column: 1 / -1; padding: 10px 12px; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.04); border-bottom: 0.5px solid rgba(255,255,255,0.08); }

/* ─── Calendar click-to-edit popover ─── */
.cal-cell.trip-day:hover { background: rgba(90,200,250,0.12); cursor: pointer; }
.day-popover { position: fixed; background: #1a2d45; border: 0.5px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); z-index: 300; width: 340px; max-height: 400px; overflow-y: auto; }
.day-popover h4 { font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #fff; }
.dp-cat-row { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; }
.dp-cat-row:last-child { border-bottom: none; }
.dp-cat-label { min-width: 100px; color: rgba(255,255,255,0.45); font-weight: 500; }
.dp-cat-value { color: rgba(255,255,255,0.85); flex: 1; }
.day-popover .dp-activity { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); align-items: flex-start; }
.day-popover .dp-activity:last-child { border-bottom: none; }
.day-popover .dp-time { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 600; min-width: 48px; }
.day-popover .dp-icon { font-size: 14px; }
.day-popover .dp-text { font-size: 14px; color: rgba(255,255,255,0.85); flex: 1; }
.day-popover .dp-rm { background: none; border: none; color: rgba(255,255,255,0.2); cursor: pointer; font-size: 16px; }
.day-popover .dp-rm:hover { color: #ff453a; }
.dp-add-row { display: flex; gap: 6px; margin-top: 10px; }
.dp-add-row input { flex: 1; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; font-size: 13px; outline: none; font-family: inherit; background: rgba(255,255,255,0.06); color: #f0f0f5; }
.dp-add-row input:focus { border-color: #5ac8fa; }
.dp-add-row button { background: #5ac8fa; color: #0b1a2e; border: none; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.popover-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 299; }

/* ─── Packing ─── */
.packing-category { margin-bottom: 20px; }
.packing-category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.packing-category-name { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85); }
.packing-count { font-size: 13px; color: rgba(255,255,255,0.4); }
.packing-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,0.06); border-radius: 10px; margin-bottom: 4px; border: 0.5px solid rgba(255,255,255,0.06); }
.packing-item input[type="checkbox"] { accent-color: #5ac8fa; width: 18px; height: 18px; cursor: pointer; }
.packing-item label { font-size: 15px; cursor: pointer; flex: 1; color: rgba(255,255,255,0.85); }
.packing-item.checked label { text-decoration: line-through; color: rgba(255,255,255,0.3); }
.packing-item .remove-item { background: none; border: none; color: rgba(255,255,255,0.2); cursor: pointer; font-size: 18px; padding: 0 4px; }
.packing-item .remove-item:hover { color: #ff453a; }
.add-item-row { display: flex; gap: 8px; margin-top: 12px; }
.add-item-row input, .add-item-row select { flex: 1; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; font-size: 14px; outline: none; background: rgba(255,255,255,0.06); font-family: inherit; color: #f0f0f5; }
.add-item-row input:focus, .add-item-row select:focus { border-color: #5ac8fa; box-shadow: 0 0 0 3px rgba(90,200,250,0.15); }
.add-item-row button { background: #5ac8fa; color: #0b1a2e; border: none; padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; }

/* ─── Budget ─── */
.budget-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.budget-box { background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px; text-align: center; }
.budget-box .amount { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.budget-box .label { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 3px; font-weight: 500; }
.budget-box.total .amount { color: #fff; }
.budget-box.spent .amount { color: #ff9f0a; }
.budget-box.remaining .amount { color: #30d158; }
.expense-list { background: rgba(255,255,255,0.06); border-radius: 14px; overflow: hidden; border: 0.5px solid rgba(255,255,255,0.08); }
.expense-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
.expense-item:last-child { border-bottom: none; }
.expense-info { display: flex; align-items: center; gap: 12px; }
.expense-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.expense-name { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.85); }
.expense-category { font-size: 13px; color: rgba(255,255,255,0.4); }
.expense-amount { font-size: 15px; font-weight: 600; color: #fff; }
.add-expense-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.add-expense-form input, .add-expense-form select { padding: 10px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; font-size: 14px; outline: none; background: rgba(255,255,255,0.06); font-family: inherit; color: #f0f0f5; }
.add-expense-form input:focus, .add-expense-form select:focus { border-color: #5ac8fa; box-shadow: 0 0 0 3px rgba(90,200,250,0.15); }
.add-expense-form button { grid-column: span 2; background: #5ac8fa; color: #0b1a2e; border: none; padding: 12px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 15px; }

/* ─── Notes ─── */
.notes-area { width: 100%; min-height: 260px; padding: 18px; border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; font-size: 15px; font-family: inherit; outline: none; resize: vertical; background: rgba(255,255,255,0.06); line-height: 1.65; color: rgba(255,255,255,0.85); }
.notes-area:focus { border-color: #5ac8fa; box-shadow: 0 0 0 3px rgba(90,200,250,0.15); }

/* ─── Checklist ─── */
.checklist-box { background: rgba(255,255,255,0.06); border-radius: 14px; padding: 20px; border: 0.5px solid rgba(255,255,255,0.08); }
.checklist-box h4 { font-size: 17px; font-weight: 600; margin-bottom: 14px; color: rgba(255,255,255,0.85); }
.checklist-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.checklist-item input[type="checkbox"] { accent-color: #5ac8fa; width: 18px; height: 18px; cursor: pointer; }
.checklist-item label { font-size: 15px; cursor: pointer; color: rgba(255,255,255,0.85); }

/* ─── Stays ─── */
.stays-list { display: flex; flex-direction: column; gap: 16px; }
.stay-card { background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 0; overflow: hidden; }
.stay-header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: default; }
.stay-icon { font-size: 28px; width: 48px; height: 48px; background: rgba(255,255,255,0.06); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stay-header-info { flex: 1; min-width: 0; }
.stay-name { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: -0.2px; }
.stay-location { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.stay-status { flex-shrink: 0; }
.stay-status .pill { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.stay-status .pill.booked { background: rgba(48,209,88,0.15); color: #30d158; }
.stay-status .pill.not-booked { background: rgba(255,159,10,0.15); color: #ff9f0a; }
.stay-details { padding: 0 20px 18px; }
.stay-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stay-meta-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.7); }
.stay-meta-item svg { flex-shrink: 0; color: rgba(255,255,255,0.35); stroke: rgba(255,255,255,0.35); }
.stay-meta-item .meta-label { color: rgba(255,255,255,0.4); }
.stay-meta-item .meta-value { font-weight: 500; color: rgba(255,255,255,0.85); }
.stay-notes { margin-top: 12px; padding: 12px 14px; background: rgba(255,255,255,0.04); border-radius: 10px; font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.55; }
.stay-ref { display: inline-block; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); padding: 3px 8px; border-radius: 6px; font-family: 'SF Mono', monospace; }
.stay-payment { margin-top: 14px; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; }
.stay-payment.clickable { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.stay-payment.clickable:hover { background: rgba(90,200,250,0.06); border-color: rgba(90,200,250,0.15); }
.stay-payment-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; }
.stay-payment-total { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.9); }
.stay-payment-status { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.stay-payment-status.fully-paid { background: rgba(48,209,88,0.15); color: #30d158; }
.stay-payment-status.partial { background: rgba(255,159,10,0.15); color: #ff9f0a; }
.stay-payment-status.unpaid { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); }
.stay-payment-bar { height: 3px; background: rgba(255,255,255,0.08); margin: 0 14px; border-radius: 2px; }
.stay-payment-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.stay-payment-bar-fill.full { background: #30d158; }
.stay-payment-bar-fill.partial { background: #ff9f0a; }
.stay-payment-bar-fill.none { background: rgba(255,255,255,0.15); width: 0 !important; }
.stay-payment-details { display: flex; justify-content: space-between; padding: 10px 14px 12px; font-size: 12px; }
.stay-payment-detail { display: flex; flex-direction: column; gap: 2px; }
.stay-payment-detail-label { color: rgba(255,255,255,0.35); font-weight: 500; }
.stay-payment-detail-value { color: rgba(255,255,255,0.7); font-weight: 600; }
.stay-payment-detail-value.paid { color: #30d158; }
.stay-payment-detail-value.due { color: #ff9f0a; }
.stay-payment-link { font-size: 11px; color: #5ac8fa; display: flex; align-items: center; gap: 4px; padding: 0 14px 10px; }
.stay-review-toggle { padding: 12px 20px; border-top: 1px solid rgba(255,255,255,0.06); cursor: pointer; font-size: 13px; font-weight: 500; color: #5ac8fa; display: flex; align-items: center; gap: 6px; }
.stay-review-toggle:hover { background: rgba(255,255,255,0.04); }
.stay-review-body { padding: 0 20px 18px; }

/* ─── Transport ─── */
.transport-list { display: flex; flex-direction: column; gap: 16px; }
.transport-card { background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 0; overflow: hidden; }
.transport-header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: default; }
.transport-icon { font-size: 28px; width: 48px; height: 48px; background: rgba(255,255,255,0.06); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.transport-header-info { flex: 1; min-width: 0; }
.transport-name { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: -0.2px; }
.transport-route { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.transport-status { flex-shrink: 0; }
.transport-status .pill { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.transport-status .pill.booked { background: rgba(48,209,88,0.15); color: #30d158; }
.transport-status .pill.not-booked { background: rgba(255,159,10,0.15); color: #ff9f0a; }
.transport-details { padding: 0 20px 18px; }
.transport-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.transport-meta-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.7); }
.transport-meta-item svg { flex-shrink: 0; color: rgba(255,255,255,0.35); stroke: rgba(255,255,255,0.35); }
.transport-meta-item .meta-label { color: rgba(255,255,255,0.4); }
.transport-meta-item .meta-value { font-weight: 500; color: rgba(255,255,255,0.85); }
.transport-notes { margin-top: 12px; padding: 12px 14px; background: rgba(255,255,255,0.04); border-radius: 10px; font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.55; }
.transport-ref { display: inline-block; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); padding: 3px 8px; border-radius: 6px; font-family: 'SF Mono', monospace; }

/* ─── Review ─── */
.review-box { background: rgba(255,255,255,0.06); border-radius: 14px; padding: 24px; border: 0.5px solid rgba(255,255,255,0.08); }
.review-box h4 { font-size: 17px; font-weight: 600; margin-bottom: 18px; color: rgba(255,255,255,0.85); }
.review-overall { text-align: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.review-overall .stars-display { font-size: 32px; letter-spacing: 4px; cursor: pointer; user-select: none; }
.review-overall .rating-label { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 6px; font-weight: 500; }
.review-category { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.review-category:last-of-type { border-bottom: none; }
.review-cat-name { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.85); min-width: 140px; }
.review-cat-stars { font-size: 20px; letter-spacing: 2px; cursor: pointer; user-select: none; }
.review-comment { margin-top: 20px; }
.review-comment textarea { width: 100%; min-height: 100px; padding: 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; font-size: 14px; font-family: inherit; outline: none; resize: vertical; background: rgba(255,255,255,0.06); line-height: 1.6; color: rgba(255,255,255,0.85); }
.review-comment textarea:focus { border-color: #5ac8fa; box-shadow: 0 0 0 3px rgba(90,200,250,0.15); }
.review-comment label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.4); display: block; margin-bottom: 6px; }

/* ─── Modal ─── */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal { background: #1a2d45; border: 0.5px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 30px; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.modal h3 { font-size: 22px; font-weight: 600; margin-bottom: 22px; letter-spacing: -0.3px; color: #fff; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.45); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; font-size: 15px; outline: none; font-family: inherit; color: #f0f0f5; background: rgba(255,255,255,0.06); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #5ac8fa; box-shadow: 0 0 0 3px rgba(90,200,250,0.15); }
.modal-actions { display: flex; gap: 10px; margin-top: 24px; }
.modal-actions button { flex: 1; padding: 12px; border-radius: 12px; font-size: 16px; font-weight: 500; cursor: pointer; }
.btn-cancel { background: rgba(255,255,255,0.08); border: none; color: rgba(255,255,255,0.7); }
.btn-save { background: #5ac8fa; border: none; color: #0b1a2e; font-weight: 600; }
.btn-cancel:hover { background: rgba(255,255,255,0.12); }
.btn-save:hover { background: #7dd5fb; }
.type-toggle { display: flex; background: rgba(255,255,255,0.08); border-radius: 8px; padding: 2px; margin-bottom: 18px; }
.type-opt { flex: 1; padding: 8px; text-align: center; font-size: 14px; font-weight: 500; border: none; background: none; cursor: pointer; border-radius: 7px; color: rgba(255,255,255,0.6); transition: all 0.2s; }
.type-opt.active { background: rgba(255,255,255,0.12); box-shadow: 0 1px 4px rgba(0,0,0,0.2); font-weight: 600; color: #fff; }

/* ─── Confirmation modal ─── */
.conf-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.conf-modal { background: white; border-radius: 18px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25); -webkit-overflow-scrolling: touch; }
.conf-header { padding: 24px 24px 16px; border-bottom: 1px solid #f0f0f5; position: relative; }
.conf-header-badge { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: white; background: #34C759; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; }
.conf-header h2 { font-size: 20px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.3px; margin: 0 0 4px; }
.conf-header p { font-size: 13px; color: #86868b; margin: 0; }
.conf-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: #f0f0f5; border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #86868b; }
.conf-close:hover { background: #e8e8ed; }
.conf-ref { text-align: center; padding: 20px 24px; background: #f9f9fb; border-bottom: 1px solid #f0f0f5; }
.conf-ref-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #86868b; font-weight: 600; }
.conf-ref-value { font-size: 28px; font-weight: 700; color: #1d1d1f; letter-spacing: 1px; font-family: 'SF Mono', ui-monospace, monospace; margin-top: 4px; }
.conf-body { padding: 20px 24px; }
.conf-row { display: flex; padding: 10px 0; border-bottom: 1px solid #f7f7fa; }
.conf-row:last-child { border-bottom: none; }
.conf-label { width: 110px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: #86868b; text-transform: uppercase; letter-spacing: 0.3px; padding-top: 2px; }
.conf-value { font-size: 14px; color: #1d1d1f; line-height: 1.45; flex: 1; }
.conf-footer { padding: 16px 24px; border-top: 1px solid #f0f0f5; text-align: center; }
.conf-footer-text { font-size: 11px; color: #86868b; }
.conf-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; background: rgba(90,200,250,0.1); border: 0.5px solid rgba(90,200,250,0.2); border-radius: 8px; font-size: 12px; font-weight: 500; color: #5ac8fa; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.conf-btn:hover { background: rgba(90,200,250,0.18); }
.conf-btn svg { stroke: #5ac8fa; }

@media (max-width: 700px) {
  .navbar { padding: 0 16px; padding-top: env(safe-area-inset-top); }
  .navbar-inner { height: 48px; }
  .navbar h1 { font-size: 17px; }
  .nav-actions { gap: 8px; }
  .seg-btn { padding: 5px 10px; font-size: 12px; }
  .add-btn { padding: 6px 12px; font-size: 12px; }
  .dashboard { padding: 24px 16px; }
  .page-title { font-size: 26px; }
  .page-subtitle { font-size: 15px; margin-bottom: 20px; }
  .trips-grid { grid-template-columns: 1fr; }
  .info-strip { padding: 16px; grid-template-columns: 1fr; gap: 10px; }
  .detail-topbar { padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); }
  .detail-title { font-size: 22px; }
  .detail-subtitle { font-size: 13px; }
  .detail-content { padding: 16px; }
  .detail-tabs { padding: 0 16px; }
  .dtab { padding: 10px 14px; font-size: 13px; }
  .budget-summary { grid-template-columns: 1fr 1fr; }
  .review-category { flex-wrap: wrap; gap: 4px; }
  .review-cat-name { min-width: auto; font-size: 14px; }
  .review-cat-stars { font-size: 18px; }
  .stay-meta { grid-template-columns: 1fr; }
  .stay-header { gap: 10px; padding: 14px 16px; }
  .stay-details { padding: 0 16px 14px; }
  .stay-icon { width: 40px; height: 40px; font-size: 22px; }
  .transport-meta { grid-template-columns: 1fr; }
  .transport-header { gap: 10px; padding: 14px 16px; }
  .transport-details { padding: 0 16px 14px; }
  .transport-icon { width: 40px; height: 40px; font-size: 22px; }
  .cal-scroll { overflow-x: visible; }
  .cal-grid { min-width: unset; }
  .cal-header { display: none; }
  .cal-week { grid-template-columns: repeat(2, 1fr); }
  .cal-cell { min-height: 70px; padding: 4px 6px; }
  .cal-cell.outside { background: rgba(0,0,0,0.15); }
  .cal-day-name { display: inline; font-weight: 600; color: #86868b; }
  .cal-date { font-size: 10px; }
  .cal-cat { font-size: 9px; gap: 2px; }
  .cal-cat-icon { width: 11px; font-size: 8px; }
  .cal-cat-text { font-size: 9px; }
  .cal-month-label { font-size: 13px; padding: 6px 10px; }
  .cal-activities { gap: 1px; }
  .day-popover { width: calc(100vw - 32px); left: 16px !important; }
  .conf-modal { max-width: 100%; border-radius: 14px; max-height: 85vh; }
  .conf-header h2 { font-size: 18px; }
  .conf-ref-value { font-size: 22px; }
  .conf-label { width: 90px; font-size: 11px; }
  .conf-value { font-size: 13px; }
}

/* ─── Calendar: landscape phones / narrow tablets ───
   Wider than the stacked portrait breakpoint above but not wide enough for
   a legible 7-across week. Rather than scroll through 7 narrow columns,
   show just 2 days per row, each taking half the full width — enough room
   to show every activity in full without truncating. */
@media (min-width: 481px) and (max-width: 900px) {
  .cal-scroll { overflow-x: visible; }
  .cal-grid { min-width: unset; }
  .cal-header { display: none; }
  .cal-week { grid-template-columns: repeat(2, 1fr); }
  .cal-day-name { display: inline; font-weight: 600; color: #86868b; }
  .cal-cell { min-height: 130px; padding: 10px 14px; }
  .cal-date { font-size: 15px; }
  .cal-cat { font-size: 12px; gap: 6px; }
  .cal-cat-icon { width: 16px; font-size: 11px; }
  .cal-cat-text { font-size: 12px; white-space: normal; overflow: visible; text-overflow: clip; }
  .cal-month-label { font-size: 14px; padding: 8px 14px; }
}