.travel-board-page {
    --travel-ink: #17221e;
    --travel-muted: #66736d;
    --travel-line: #dfe5e1;
    --travel-paper: #f7f8f5;
    --travel-panel: #ffffff;
    --travel-accent: var(--accent, #a51332);
    --travel-accent-soft: var(--accent-soft, rgba(165, 19, 50, .12));
    --travel-green: var(--accent, #a51332);
    min-height: 100%;
    color: var(--travel-ink);
    background:
        radial-gradient(circle at 82% 0%, rgba(255, 199, 120, .18), transparent 28rem),
        linear-gradient(180deg, #f7f8f5 0%, #eef1ed 100%);
}

.theme-dark .travel-board-page {
    --travel-ink: #e8eee9;
    --travel-muted: #91a099;
    --travel-line: #2d3934;
    --travel-paper: #101713;
    --travel-panel: #17201b;
    --travel-accent: var(--accent, #f04452);
    --travel-accent-soft: var(--accent-soft, rgba(240, 68, 82, .16));
    --travel-green: var(--accent, #f04452);
    background:
        radial-gradient(circle at 82% 0%, rgba(255, 160, 72, .10), transparent 30rem),
        linear-gradient(180deg, #101713 0%, #0c120f 100%);
}

.travel-hero {
    min-height: 108px;
    padding: 22px 28px 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--travel-line);
    background: color-mix(in srgb, var(--travel-panel) 88%, transparent);
}

.travel-hero-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--travel-green);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.travel-hero-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--travel-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--travel-accent) 16%, transparent);
}

.travel-hero h1 {
    margin: 0;
    color: var(--travel-ink);
    font-size: clamp(23px, 2.3vw, 34px);
    font-weight: 900;
    letter-spacing: -.045em;
}

.travel-hero p {
    margin: 7px 0 0;
    color: var(--travel-muted);
    font-size: 13px;
}

.travel-sync-state {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    color: var(--travel-muted);
    font-size: 11px;
    font-weight: 700;
}

.travel-sync-state::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9aa49f;
}

.travel-sync-state.is-saved::before { background: var(--travel-green); }
.travel-sync-state.is-saving::before { background: #f0a42d; animation: travelPulse 1s infinite; }
.travel-sync-state.is-error::before { background: #df5b4d; }

@keyframes travelPulse { 50% { opacity: .35; } }

.travel-shell {
    height: calc(100vh - 109px);
    min-height: 590px;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(225px, .78fr) minmax(330px, 1.14fr) minmax(300px, 1fr);
    gap: 12px;
}

.travel-column {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--travel-line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--travel-panel) 96%, transparent);
    box-shadow: 0 14px 34px rgba(30, 43, 36, .06);
}

.travel-column-head {
    min-height: 66px;
    padding: 14px 16px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--travel-line);
}

.travel-column-label {
    display: block;
    color: var(--travel-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.travel-column-head h2 {
    margin: 3px 0 0;
    color: var(--travel-ink);
    font-size: 16px;
    font-weight: 850;
    letter-spacing: -.025em;
}

.travel-trip-settings {
    padding: 12px 14px;
    display: grid;
    gap: 8px;
    border-bottom: 1px solid var(--travel-line);
}

.travel-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.travel-field { min-width: 0; }
.travel-field label { display: block; margin: 0 0 4px; color: var(--travel-muted); font-size: 9px; font-weight: 800; }
.travel-input,
.travel-select,
.travel-note-input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--travel-line);
    border-radius: 10px;
    background: var(--travel-paper);
    color: var(--travel-ink);
    outline: none;
    font: inherit;
}

.travel-input,
.travel-select { height: 35px; padding: 0 10px; font-size: 12px; }
.travel-input:focus,
.travel-select:focus,
.travel-note-input:focus { border-color: var(--travel-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--travel-green) 12%, transparent); }

.travel-day-strip {
    padding: 10px 12px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-bottom: 1px solid var(--travel-line);
    scrollbar-width: none;
}

.travel-day-strip::-webkit-scrollbar { display: none; }
.travel-day-button {
    min-width: 54px;
    height: 42px;
    padding: 4px 9px;
    border: 1px solid var(--travel-line);
    border-radius: 11px;
    background: var(--travel-panel);
    color: var(--travel-muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    transition: .18s ease;
}

.travel-day-button strong { display: block; color: inherit; font-size: 12px; }
.travel-day-button.active { border-color: var(--travel-green); background: color-mix(in srgb, var(--travel-green) 11%, var(--travel-panel)); color: var(--travel-green); transform: translateY(-1px); }

.travel-itinerary,
.travel-candidate-list {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.travel-itinerary { display: flex; flex-direction: column; gap: 8px; }
.travel-slot {
    position: relative;
    padding: 10px 38px 10px 40px;
    border: 1px solid var(--travel-line);
    border-radius: 12px;
    background: var(--travel-paper);
}

.travel-slot::before {
    content: attr(data-index);
    position: absolute;
    left: 11px;
    top: 12px;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--travel-green);
    color: white;
    font-size: 9px;
    font-weight: 900;
}

.travel-slot-time { display: inline-flex !important; width: fit-content; margin: 0 0 5px !important; padding: 3px 7px; border-radius: 999px; background: var(--travel-panel); color: var(--travel-muted) !important; font-size: 9px !important; font-weight: 850; }
.travel-slot-time.is-set { background: color-mix(in srgb, var(--travel-green) 11%, var(--travel-panel)); color: var(--travel-green) !important; }
.travel-slot strong { display: block; padding-right: 4px; color: var(--travel-ink); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.travel-slot span { display: block; margin-top: 3px; color: var(--travel-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.travel-slot-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--travel-muted);
    font-size: 16px;
}
.travel-slot-remove:hover { background: var(--travel-accent-soft); color: var(--travel-accent); }

.travel-search-wrap { padding: 12px; border-bottom: 1px solid var(--travel-line); }
.travel-search-form { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 7px; }
.travel-search-form .travel-input { height: 42px; padding-left: 13px; }
.travel-search-button,
.travel-primary-button,
.travel-quiet-button {
    border: 0;
    border-radius: 11px;
    font: inherit;
    font-weight: 800;
    transition: transform .16s ease, filter .16s ease, background .16s ease;
}
.travel-search-button { display: grid; place-items: center; background: var(--travel-ink); color: var(--travel-panel); }
.travel-search-button:hover,
.travel-primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.travel-search-button:active,
.travel-primary-button:active { transform: translateY(1px); }
.travel-search-meta { min-height: 17px; margin-top: 7px; color: var(--travel-muted); font-size: 10px; }
.travel-category-row { display: flex; gap: 5px; margin-top: 9px; overflow-x: auto; scrollbar-width: none; }
.travel-category-row::-webkit-scrollbar { display: none; }
.travel-category-chip {
    flex: 0 0 auto;
    height: 29px;
    padding: 0 10px;
    border: 1px solid var(--travel-line);
    border-radius: 999px;
    background: var(--travel-panel);
    color: var(--travel-muted);
    font-size: 10px;
    font-weight: 800;
}
.travel-category-chip.active { border-color: var(--travel-green); background: color-mix(in srgb, var(--travel-green) 10%, var(--travel-panel)); color: var(--travel-green); }

.travel-candidate-list { display: flex; flex-direction: column; gap: 8px; }
.travel-place-card {
    position: relative;
    padding: 12px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--travel-line);
    border-radius: 14px;
    background: var(--travel-panel);
    cursor: pointer;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.travel-place-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--travel-green) 45%, var(--travel-line)); box-shadow: 0 8px 18px rgba(24, 38, 31, .07); }
.travel-place-card.active { border-color: var(--travel-green); box-shadow: inset 3px 0 0 var(--travel-green); }
.travel-place-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--travel-accent-soft); font-size: 17px; }
.travel-place-meta { min-width: 0; }
.travel-place-meta strong { display: block; color: var(--travel-ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.travel-place-meta span { display: block; margin-top: 3px; color: var(--travel-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.travel-place-actions { display: flex; gap: 5px; }
.travel-card-button { width: 31px; height: 31px; border: 1px solid var(--travel-line); border-radius: 9px; background: var(--travel-paper); color: var(--travel-ink); font-size: 15px; font-weight: 900; }
.travel-card-button.is-add { border-color: var(--travel-green); background: var(--travel-green); color: white; }

.travel-map-wrap { position: relative; min-height: 250px; flex: 1 1 54%; overflow: hidden; background: #e8ece5; }
.theme-dark .travel-map-wrap { background: #1c2921; }
.travel-map-canvas { position: absolute; inset: 0; overflow: hidden; background-image: linear-gradient(rgba(80, 108, 91, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 108, 91, .10) 1px, transparent 1px); background-size: 38px 38px; }
.travel-map-canvas::before,
.travel-map-canvas::after { content: ''; position: absolute; width: 140%; height: 18px; left: -20%; top: 42%; border: 7px solid rgba(255,255,255,.76); border-left: 0; border-right: 0; transform: rotate(-18deg); }
.travel-map-canvas::after { top: 66%; transform: rotate(27deg); }
.theme-dark .travel-map-canvas::before,
.theme-dark .travel-map-canvas::after { border-color: rgba(255,255,255,.08); }
.travel-map-route { position: absolute; height: 2px; transform-origin: 0 50%; background: var(--travel-accent); opacity: .8; z-index: 2; }
.travel-map-marker {
    position: absolute;
    z-index: 3;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -100%);
    border: 2px solid white;
    border-radius: 50% 50% 50% 3px;
    background: var(--travel-green);
    color: white;
    font-size: 9px;
    font-weight: 900;
    box-shadow: 0 5px 12px rgba(0,0,0,.2);
    rotate: -45deg;
}
.travel-map-marker span { rotate: 45deg; }
.travel-map-marker.active { width: 32px; height: 32px; background: var(--travel-accent); z-index: 4; }
.travel-map-empty { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 28px; text-align: center; color: var(--travel-muted); font-size: 12px; }

.travel-detail {
    flex: 1 1 46%;
    min-height: 260px;
    overflow-y: auto;
    padding: 15px;
    border-top: 1px solid var(--travel-line);
}
.travel-detail-empty { height: 100%; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--travel-muted); }
.travel-detail-empty strong { display: block; margin-bottom: 5px; color: var(--travel-ink); font-size: 14px; }
.travel-detail-category { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: var(--travel-accent-soft); color: var(--travel-accent); font-size: 9px; font-weight: 900; }
.travel-detail h3 { margin: 9px 0 4px; color: var(--travel-ink); font-size: 20px; font-weight: 900; letter-spacing: -.04em; }
.travel-detail-address { color: var(--travel-muted); font-size: 11px; line-height: 1.55; }
.travel-detail-actions { margin: 13px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.travel-primary-button { min-height: 38px; padding: 0 12px; background: var(--travel-green); color: white; font-size: 11px; }
.travel-quiet-button { min-height: 38px; padding: 0 12px; border: 1px solid var(--travel-line); background: var(--travel-paper); color: var(--travel-ink); font-size: 11px; }
.travel-note-label { display: block; margin-bottom: 5px; color: var(--travel-muted); font-size: 10px; font-weight: 800; }
.travel-note-input { min-height: 70px; padding: 9px 10px; resize: vertical; font-size: 11px; line-height: 1.45; }
.travel-head-actions { display: flex; align-items: center; gap: 6px; }
.travel-head-actions .travel-primary-button, .travel-head-actions .travel-quiet-button { min-height: 35px; padding: 0 10px; white-space: nowrap; }
.travel-time-editor { margin: 0 0 13px; padding: 11px; border: 1px solid var(--travel-line); border-radius: 12px; background: var(--travel-paper); }
.travel-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.travel-detail-section-head span { display: block; color: var(--travel-muted); font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.travel-detail-section-head strong { display: block; margin-top: 2px; color: var(--travel-ink); font-size: 11px; }
.travel-detail-section-head button { border: 0; background: transparent; color: var(--travel-muted); font: inherit; font-size: 9px; font-weight: 800; }
.travel-detail-section-head button:hover { color: var(--travel-green); }
.travel-time-selects { display: grid; grid-template-columns: .82fr 1fr 1fr; gap: 6px; }
.travel-time-selects .travel-select { appearance: auto; padding: 0 7px; font-size: 11px; font-weight: 800; }
.travel-remove-candidate { width: 100%; margin-top: 7px; }
.travel-detail-actions.is-single { grid-template-columns: 1fr; }
.travel-shared-note { margin-top: 4px; padding: 10px; border: 1px solid var(--travel-line); border-radius: 11px; background: var(--travel-paper); }
.travel-shared-note span { color: var(--travel-muted); font-size: 9px; font-weight: 850; }
.travel-shared-note p { margin: 4px 0 0; color: var(--travel-ink); font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.is-shared-view .travel-search-wrap, .is-shared-view .travel-places-column .travel-column-head .travel-quiet-button { display: none; }
.is-shared-view .travel-trip-settings input { opacity: .78; cursor: default; }
.travel-source-note { margin-top: 10px; color: var(--travel-muted); font-size: 9px; line-height: 1.45; }

.travel-empty {
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: 22px;
    border: 1px dashed var(--travel-line);
    border-radius: 14px;
    color: var(--travel-muted);
    text-align: center;
    font-size: 11px;
    line-height: 1.6;
}
.travel-empty strong { display: block; color: var(--travel-ink); font-size: 13px; }
.travel-mobile-tabs { display: none; }

@media (max-width: 1180px) {
    .travel-shell { grid-template-columns: minmax(220px, .8fr) minmax(330px, 1.2fr); }
    .travel-map-column { grid-column: 1 / -1; min-height: 520px; }
    .travel-map-wrap { min-height: 300px; }
}

@media (max-width: 900px) {
    #content-travel { overflow: hidden; }
    .travel-hero { min-height: 100px; padding: 18px 16px 14px; align-items: flex-start; }
    .travel-hero p { max-width: 260px; font-size: 11px; line-height: 1.5; }
    .travel-sync-state { margin-top: 6px; font-size: 9px; }
    .travel-mobile-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 8px; border-bottom: 1px solid var(--travel-line); background: var(--travel-panel); }
    .travel-mobile-tabs button { height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--travel-muted); font-size: 10px; font-weight: 850; }
    .travel-mobile-tabs button.active { background: var(--travel-ink); color: var(--travel-panel); }
    .travel-shell { height: calc(100dvh - 242px); min-height: 520px; padding: 8px; display: block; }
    .travel-column { display: none; height: 100%; border-radius: 14px; }
    .travel-column.mobile-active { display: flex; }
    .travel-map-column { min-height: 0; }
    .travel-map-wrap { min-height: 260px; flex-basis: 49%; }
    .travel-detail { min-height: 0; flex-basis: 51%; }
}

@media (max-width: 520px) {
    .travel-hero h1 { font-size: 22px; }
    .travel-hero p { max-width: 235px; }
    .travel-sync-state { max-width: 82px; text-align: right; line-height: 1.3; }
    .travel-column-head { min-height: 58px; padding: 11px 13px; }
    .travel-trip-settings { padding: 10px 12px; }
    .travel-itinerary, .travel-candidate-list { padding: 9px; }
}


/* Real coordinate map (Leaflet) */
.travel-map-canvas {
    background: #e8ece5;
    font-family: inherit;
}
.travel-map-canvas::before,
.travel-map-canvas::after { display: none; }
.theme-dark .travel-map-canvas { background: #1c2921; }
.travel-map-canvas .leaflet-tile-pane { filter: saturate(.72) contrast(.96) brightness(1.03); }
.theme-dark .travel-map-canvas .leaflet-tile-pane { filter: saturate(.55) brightness(.72) contrast(1.08); }
.travel-map-canvas .leaflet-control-zoom { border: 1px solid var(--travel-line); box-shadow: 0 8px 18px rgba(20,35,27,.12); }
.travel-map-canvas .leaflet-control-zoom a { background: var(--travel-panel); color: var(--travel-ink); border-color: var(--travel-line); }
.travel-map-canvas .leaflet-control-attribution { padding: 2px 5px; background: color-mix(in srgb, var(--travel-panel) 88%, transparent); color: var(--travel-muted); font-size: 8px; }
.travel-map-canvas .leaflet-control-attribution a { color: var(--travel-green); }
.travel-leaflet-marker {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 4px;
    background: var(--travel-green);
    color: #fff;
    box-shadow: 0 5px 13px rgba(0,0,0,.28);
    transform: rotate(-45deg);
    font-size: 10px;
    font-weight: 900;
}
.travel-leaflet-marker span { transform: rotate(45deg); }
.travel-leaflet-marker.is-active { width: 35px; height: 35px; background: var(--travel-accent); }
.travel-map-no-coordinates {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 500;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 7px 10px;
    border: 1px solid var(--travel-line);
    border-radius: 9px;
    background: color-mix(in srgb, var(--travel-panel) 92%, transparent);
    color: var(--travel-muted);
    box-shadow: 0 5px 14px rgba(20,35,27,.12);
    font-size: 9px;
    text-align: center;
}


/* First-entry gateway */
.travel-entry-screen {
    position: relative;
    min-height: calc(100vh - 1px);
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--travel-green) 10%, transparent), transparent 22rem),
        linear-gradient(135deg, var(--travel-paper), color-mix(in srgb, var(--travel-panel) 88%, var(--travel-accent-soft)));
}
.travel-board-page:not(.travel-board-entered) > .travel-hero,
.travel-board-page:not(.travel-board-entered) > .travel-mobile-tabs,
.travel-board-page:not(.travel-board-entered) > .travel-shell { display: none; }
.travel-board-page.travel-board-entered > .travel-entry-screen { display: none; }
.travel-entry-card {
    position: relative;
    z-index: 2;
    width: min(92vw, 520px);
    padding: 46px 42px 40px;
    border: 1px solid color-mix(in srgb, var(--travel-green) 24%, var(--travel-line));
    border-radius: 22px;
    background: color-mix(in srgb, var(--travel-panel) 96%, transparent);
    box-shadow: 0 30px 80px rgba(36, 18, 23, .13);
    text-align: center;
}
.travel-entry-kicker { color: var(--travel-green); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.travel-entry-icon { width: 72px; height: 72px; margin: 24px auto 18px; display: grid; place-items: center; border-radius: 24px; background: var(--travel-accent-soft); font-size: 36px; transform: rotate(-3deg); }
.travel-entry-eyebrow { margin: 0; color: var(--travel-muted); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.travel-entry-card h1 { margin: 7px 0 8px; color: var(--travel-ink); font-size: clamp(27px, 4vw, 40px); font-weight: 950; letter-spacing: -.05em; }
.travel-entry-meta { margin: 0; color: var(--travel-ink); font-size: 12px; font-weight: 800; }
.travel-entry-count { margin: 8px 0 0; color: var(--travel-muted); font-size: 11px; }
.travel-entry-button { width: 100%; min-height: 50px; margin-top: 28px; border: 0; border-radius: 13px; background: var(--travel-green); color: #fff; font: inherit; font-size: 13px; font-weight: 900; box-shadow: 0 12px 28px color-mix(in srgb, var(--travel-green) 24%, transparent); transition: transform .16s ease, filter .16s ease; }
.travel-entry-button span { margin-left: 7px; }
.travel-entry-button:hover { filter: brightness(1.06); transform: translateY(-2px); }
.travel-entry-button:active { transform: translateY(1px); }
.travel-entry-orbit { position: absolute; border: 1px solid color-mix(in srgb, var(--travel-green) 12%, transparent); border-radius: 50%; pointer-events: none; }
.travel-entry-orbit-one { width: 560px; height: 560px; }
.travel-entry-orbit-two { width: 760px; height: 760px; border-style: dashed; opacity: .55; }
@media (max-width: 520px) {
    .travel-entry-screen { min-height: calc(100dvh - 1px); padding: 20px 14px; }
    .travel-entry-card { padding: 36px 24px 30px; border-radius: 19px; }
    .travel-entry-icon { width: 62px; height: 62px; margin-top: 20px; font-size: 31px; }
    .travel-entry-button { min-height: 48px; margin-top: 24px; }
}


/* Multi-trip library */
.travel-entry-screen { align-items: start; padding: clamp(48px, 8vh, 88px) 24px; }
.travel-entry-layout { position: relative; z-index: 2; width: min(1040px, 100%); }
.travel-entry-header { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.travel-entry-header h1 { margin: 9px 0 6px; color: var(--travel-ink); font-size: clamp(34px, 5vw, 54px); font-weight: 950; letter-spacing: -.055em; }
.travel-entry-header p { margin: 0; color: var(--travel-muted); font-size: 13px; font-weight: 700; }
.travel-entry-create { min-height: 46px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--travel-green); color: #fff; font: inherit; font-size: 12px; font-weight: 900; box-shadow: 0 10px 24px color-mix(in srgb, var(--travel-green) 20%, transparent); }
.travel-entry-create span { margin-right: 5px; font-size: 17px; vertical-align: -1px; }
.travel-trip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.travel-trip-card { position: relative; min-height: 220px; padding: 22px; overflow: hidden; border: 1px solid var(--travel-line); border-radius: 17px; background: var(--travel-panel); box-shadow: 0 12px 32px rgba(36,18,23,.07); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.travel-trip-card::after { content: ''; position: absolute; right: -42px; bottom: -64px; width: 150px; height: 150px; border: 24px solid var(--travel-accent-soft); border-radius: 50%; opacity: .65; pointer-events: none; }
.travel-trip-card:hover, .travel-trip-card:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--travel-green) 42%, var(--travel-line)); box-shadow: 0 18px 42px rgba(36,18,23,.12); transform: translateY(-3px); }
.travel-trip-card-top { display: flex; align-items: center; justify-content: space-between; padding-right: 28px; color: var(--travel-green); font-size: 20px; }
.travel-trip-number { font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.travel-trip-card h2 { margin: 24px 0 5px; color: var(--travel-ink); font-size: 21px; font-weight: 950; letter-spacing: -.035em; }
.travel-trip-destination { margin: 0; color: var(--travel-ink); font-size: 12px; font-weight: 800; }
.travel-trip-dates { margin: 7px 0 25px; color: var(--travel-muted); font-size: 10px; font-weight: 700; }
.travel-trip-card-foot { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; display: flex; align-items: center; gap: 10px; color: var(--travel-muted); font-size: 9px; }
.travel-trip-card-foot b { margin-left: auto; color: var(--travel-green); font-size: 10px; }
.travel-trip-delete { position: absolute; top: 15px; right: 14px; z-index: 3; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--travel-muted); font: inherit; font-size: 18px; line-height: 1; }
.travel-trip-delete:hover { background: var(--travel-accent-soft); color: var(--travel-ink); }
.travel-hero-actions { display: flex; align-items: center; gap: 12px; }
.travel-list-back { min-height: 34px; padding: 0 12px; border: 1px solid var(--travel-line); border-radius: 9px; background: var(--travel-panel); color: var(--travel-ink); font: inherit; font-size: 10px; font-weight: 900; }
.travel-list-back:hover { border-color: var(--travel-green); color: var(--travel-green); }
.travel-board-page.is-shared-view .travel-list-back { display: none; }
@media (max-width: 620px) {
    .travel-entry-screen { padding: 28px 14px 40px; }
    .travel-entry-header { align-items: stretch; flex-direction: column; gap: 18px; margin-bottom: 20px; }
    .travel-entry-create { width: 100%; }
    .travel-trip-list { grid-template-columns: 1fr; gap: 12px; }
    .travel-trip-card { min-height: 205px; }
    .travel-hero-actions { align-items: flex-end; flex-direction: column-reverse; gap: 6px; }
    .travel-list-back { min-height: 30px; padding: 0 9px; font-size: 9px; }
}

/* Leaflet uses z-index values up to 1000; contain them inside the travel map. */
.travel-map-wrap { z-index: 0; isolation: isolate; }


/* Collaborative travel invitations */
.travel-invite-panel { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 18px; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--travel-green) 38%, var(--travel-line)); border-radius: 16px; background: color-mix(in srgb, var(--travel-panel) 94%, var(--travel-accent-soft)); box-shadow: 0 12px 30px rgba(36,18,23,.08); }
.travel-invite-panel.hidden-content { display: none; }
.travel-invite-panel span { color: var(--travel-green); font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.travel-invite-panel h2 { margin: 5px 0 4px; color: var(--travel-ink); font-size: 19px; font-weight: 950; }
.travel-invite-panel p { margin: 0; color: var(--travel-muted); font-size: 11px; }
.travel-invite-panel button { min-height: 44px; padding: 0 17px; border: 0; border-radius: 11px; background: var(--travel-green); color: #fff; font: inherit; font-size: 11px; font-weight: 900; white-space: nowrap; }
.travel-trip-card.is-collaborative { border-color: color-mix(in srgb, var(--travel-green) 36%, var(--travel-line)); }
.travel-trip-card.is-collaborative .travel-trip-number { color: var(--travel-green); }
@media (max-width: 620px) { .travel-invite-panel { align-items: stretch; flex-direction: column; padding: 18px; } .travel-invite-panel button { width: 100%; white-space: normal; } }