:root {
    --b4-bg: #fafafa;
    --b4-surface: #ffffff;
    --b4-surface-soft: #f6f6f6;
    --b4-ink: #101010;
    --b4-muted: #737373;
    --b4-border: #dbdbdb;
    --b4-border-strong: #cfcfcf;
    --b4-primary: #0095f6;
    --b4-primary-dark: #1877f2;
    --b4-primary-soft: rgba(0, 149, 246, 0.1);
    --b4-danger: #ff3040;
    --b4-danger-soft: rgba(255, 48, 64, 0.12);
    --b4-success: #2fb344;
    --b4-warning: #f59e0b;
    --b4-shadow: 0 18px 50px rgba(16, 16, 16, 0.07);
    --b4-radius-xs: 12px;
    --b4-radius-sm: 16px;
    --b4-radius-md: 22px;
    --b4-radius-lg: 30px;
    --b4-container: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.app-body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--b4-ink);
    background:
        radial-gradient(circle at top left, rgba(255, 48, 64, 0.06), transparent 26%),
        radial-gradient(circle at top right, rgba(0, 149, 246, 0.08), transparent 24%),
        var(--b4-bg);
}

a { color: inherit; }
a:hover { color: inherit; }

.app-shell {
    min-height: 100vh;
    display: flex;
}

.app-main {
    flex: 1;
    min-width: 0;
}

.app-main--guest {
    width: 100%;
}

.app-main > .container-fluid {
    max-width: calc(var(--b4-container) + 2rem);
    margin: 0 auto;
}

.sidebar {
    width: 265px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(18px);
    border-right: 1px solid var(--b4-border);
    color: var(--b4-ink);
}

.brand-logo {
    width: 168px;
    height: auto;
    filter: saturate(0) brightness(0.1);
}

.auth-logo--modal {
    width: 148px;
    height: auto;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .9rem 1rem;
    border-radius: 999px;
    color: var(--b4-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.sidebar-nav .nav-link:hover {
    background: var(--b4-surface-soft);
    transform: translateX(2px);
}

.sidebar-nav .nav-link.active {
    background: var(--b4-ink);
    color: #fff;
}

.sidebar-card {
    background: linear-gradient(145deg, rgba(255,48,64,.08), rgba(0,149,246,.08));
    border: 1px solid rgba(16,16,16,.06);
    border-radius: 24px;
    padding: 1.2rem;
    color: var(--b4-ink);
}

.sidebar-card__eyebrow,
.topbar__eyebrow,
.panel-card__eyebrow,
.metric-card__label,
.trip-card__eyebrow,
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    color: var(--b4-muted);
}

.sidebar-card__eyebrow {
    padding: .45rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
}

.sidebar-card h3,
.panel-card h3,
.section-title,
.topbar__title,
.trip-card__title,
.recommendation-card__title,
.trip-list-item__title,
.notification-card__title,
.user-card__name {
    letter-spacing: -0.03em;
    font-weight: 800;
}

.sidebar-card h3 {
    margin: .7rem 0 .4rem;
    font-size: 1.1rem;
}

.sidebar-card p,
.trip-card__meta,
.trip-card__summary,
.metric-card p,
.empty-state p,
.mini-feature p,
.profile-summary p,
.user-card__bio,
.user-card__location,
.private-wall p,
.notification-card p,
.trip-list-item__meta,
.recommendation-card__notes,
.recommendation-card__type,
.recommendation-card__price,
.comment-card p {
    color: var(--b4-muted);
}

.topbar {
    position: static;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem 0;
    background: transparent;
    backdrop-filter: none;
}


.btn-topbar {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid var(--b4-border);
    background: #fff;
    box-shadow: 0 10px 25px rgba(16,16,16,.06);
}

.topbar-chip,
.topbar-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .72rem 1rem;
    border-radius: 999px;
    background: var(--b4-surface);
    border: 1px solid var(--b4-border);
    color: var(--b4-ink);
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(16,16,16,.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.topbar-chip:hover,
.topbar-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(16,16,16,.08);
}

.topbar-chip.is-alert {
    border-color: rgba(255, 48, 64, .28);
}

.topbar-chip__count,
.sidebar-pill {
    min-width: 25px;
    height: 25px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-size: .76rem;
    font-weight: 800;
}

.topbar-chip__count,
.sidebar-pill {
    background: var(--b4-primary-soft);
    color: var(--b4-primary);
}

.topbar-chip__count--danger,
.sidebar-pill--danger {
    background: var(--b4-danger);
    color: #fff;
}

.hero-panel,
.panel-card,
.metric-card,
.stat-card,
.auth-card,
.system-check,
.comment-card {
    background: var(--b4-surface);
    border: 1px solid var(--b4-border);
    border-radius: var(--b4-radius-md);
    box-shadow: var(--b4-shadow);
}

.panel-card,
.metric-card,
.stat-card,
.auth-card {
    padding: 1.35rem;
}

.panel-card__header {
    margin-bottom: 1rem;
}

.panel-card__header h3 {
    margin: .45rem 0 0;
    font-size: clamp(1.1rem, .9rem + .55vw, 1.45rem);
}

.hero-panel {
    padding: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background:
        radial-gradient(circle at 10% 10%, rgba(255,255,255,.24), transparent 22%),
        linear-gradient(135deg, #ff3040 0%, #f77737 35%, #e1306c 65%, #0095f6 100%);
    color: #fff;
}

.hero-panel__title {
    font-size: clamp(1.75rem, 1.15rem + 1.4vw, 2.6rem);
    margin: 0 0 .75rem;
    font-weight: 800;
}

.hero-panel__copy {
    max-width: 740px;
    margin: 0;
    opacity: .95;
}

.hero-panel__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .48rem .78rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.22);
    color: inherit;
    font-size: .78rem;
    font-weight: 700;
}

.metric-card strong,
.stat-card strong {
    display: block;
    font-size: clamp(1.8rem, 1.15rem + 1.65vw, 2.7rem);
    line-height: 1;
    margin-bottom: .4rem;
}

.metric-card--accent {
    background: linear-gradient(145deg, rgba(255,48,64,.08), rgba(0,149,246,.1));
}

.empty-state,
.mini-feature,
.trip-list-item,
.recommendation-card,
.recommendation-editor,
.message-preview,
.message-card,
.message-meta-box,
.message-body {
    border: 1px solid var(--b4-border);
    border-radius: var(--b4-radius-sm);
    background: var(--b4-surface-soft);
}

.empty-state {
    display: grid;
    gap: .7rem;
    padding: 1.25rem;
    border-style: dashed;
}

.empty-state.compact,
.empty-state.small-pad {
    padding: 1rem;
}

.mini-feature,
.trip-list-item,
.recommendation-card,
.recommendation-editor,
.message-preview,
.message-meta-box,
.message-body,
.comment-card {
    padding: 1rem 1.05rem;
}

.mini-feature strong,
.trip-list-item__title,
.trip-card__title,
.recommendation-card__title {
    display: block;
    margin: 0;
}

.trip-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.trip-list-item__title a,
.trip-card__title a,
.notification-card__title a,
.recommendation-card__title a {
    text-decoration: none;
}

.trip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
    gap: 1.25rem;
}

.trip-card,
.feed-card {
    background: var(--b4-surface);
    border: 1px solid var(--b4-border);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--b4-shadow);
}

.trip-card {
    display: flex;
    flex-direction: column;
}

.trip-card__header,
.feed-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 1rem 1rem 0;
}

.trip-card__author,
.feed-card__author,
.comment-card__author,
.profile-inline-author {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.mini-avatar,
.comment-avatar,
.topbar-avatar,
.request-card__avatar,
.user-card__avatar,
.profile-hero__avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, #f77737 0%, #e1306c 50%, #833ab4 100%);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(225, 48, 108, .16);
}

.mini-avatar,
.comment-avatar,
.topbar-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    font-size: .98rem;
}

.user-card__avatar,
.request-card__avatar {
    width: 70px;
    height: 70px;
    border-radius: 999px;
    font-size: 1.45rem;
}

.profile-hero__avatar {
    width: 104px;
    height: 104px;
    border-radius: 999px;
    font-size: 2rem;
}

.trip-card__media,
.feed-card__media,
.trip-gallery__item,
.media-thumb {
    overflow: hidden;
    position: relative;
    background: linear-gradient(145deg, rgba(247,119,55,.12), rgba(0,149,246,.18));
}

.trip-card__media {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    margin: 1rem;
    border-radius: 24px;
}

.feed-card__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem 1rem;
}

.feed-card__media {
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    min-height: 260px;
}

.trip-card__media img,
.feed-card__media img,
.trip-gallery__item img,
.media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.trip-card:hover .trip-card__media img,
.feed-card:hover .feed-card__media img,
.trip-gallery__item:hover img,
.media-thumb:hover img {
    transform: scale(1.035);
}

.trip-card__media.is-placeholder span,
.feed-card__media.is-placeholder span {
    font-size: 3rem;
    font-weight: 800;
    color: #e1306c;
}

.trip-card__body {
    padding: 0 1rem 1rem;
}

.trip-card__title {
    font-size: 1.08rem;
    margin: .1rem 0 .3rem;
}

.trip-card__summary {
    font-size: .95rem;
    line-height: 1.55;
}

.trip-card__footer,
.share-strip,
.profile-hero__stats,
.user-card__stats,
.profile-summary__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
}

.trip-mini-stats,
.trip-visibility-pill,
.profile-hero__stats span,
.user-card__stats span,
.profile-summary__meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .78rem;
    border-radius: 999px;
    background: var(--b4-surface-soft);
    border: 1px solid var(--b4-border);
    color: var(--b4-ink);
    font-size: .78rem;
    font-weight: 800;
}

.trip-mini-stats--gold {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245,158,11,.18);
    color: #b45309;
}

.trip-visibility-pill.is-public {
    background: rgba(47, 179, 68, .1);
    border-color: rgba(47,179,68,.16);
    color: #15803d;
}

.trip-visibility-pill.is-private {
    background: rgba(115, 115, 115, .1);
    border-color: rgba(115,115,115,.15);
    color: #525252;
}

.trip-feed {
    width: min(100%, 760px);
    margin: 0 auto;
}

.feed-card__actions,
.trip-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    margin-top: 1rem;
}


.user-card__avatar { margin-bottom: 1rem; }
.user-card__username { color: var(--b4-muted); margin: 0; }
.profile-summary { text-align: center; }


.avatar-image {
    width: 40px;
    height: 40px;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.topbar-avatar.avatar-image,
.mini-avatar.avatar-image,
.comment-avatar.avatar-image,
.trip-card__author-avatar .avatar-image,
.request-card__avatar .avatar-image {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    border-radius: 999px;
    flex: 0 0 42px;
}

.user-card__avatar .avatar-image {
    width: 70px !important;
    height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    border-radius: 999px;
}

.profile-summary__avatar .avatar-image {
    width: 92px !important;
    height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
    border-radius: 999px;
}

.profile-hero__avatar .avatar-image {
    width: 104px !important;
    height: 104px !important;
    max-width: 104px !important;
    max-height: 104px !important;
    border-radius: 999px;
}

.profile-summary__avatar,
.user-card__avatar,
.profile-hero__avatar,
.topbar-avatar,
.mini-avatar,
.comment-avatar,
.request-card__avatar {
    overflow: hidden;
}

.profile-avatar-upload .form-control {
    min-height: 48px;
}

.profile-summary__avatar {
    width: 92px;
    height: 92px;
    border-radius: 999px;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f77737 0%, #e1306c 50%, #833ab4 100%);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(225,48,108,.16);
}

.profile-summary__avatar img,
.profile-hero__avatar img,
.user-card__avatar img,
.topbar-avatar img,
.mini-avatar img,
.comment-avatar img,
.request-card__avatar img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

.trip-card__author-avatar {
    background: linear-gradient(135deg, #f77737 0%, #e1306c 50%, #833ab4 100%);
}

.profile-summary h4 { margin-bottom: .25rem; font-weight: 800; }
.request-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
}
.request-card__body { min-width: 0; }

.profile-hero,
.trip-detail-hero {
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(225, 48, 108, .08), transparent 30%),
        var(--b4-surface);
}

.profile-hero__grid,
.trip-detail-hero__grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.3rem;
    align-items: start;
}

.private-wall {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(245,158,11,.09), rgba(255,255,255,.8));
    border: 1px solid rgba(245,158,11,.22);
}

.travel-map {
    min-height: 460px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--b4-border);
    background: linear-gradient(180deg, rgba(0,149,246,.05), rgba(225,48,108,.05));
}

.travel-map--compact {
    min-height: 320px;
}


.trip-detail-cover {
    position: relative;
    min-height: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--b4-border);
    background: linear-gradient(180deg, rgba(0,149,246,.05), rgba(225,48,108,.08));
}

.trip-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.trip-detail-cover.is-placeholder {
    display: grid;
    place-items: center;
}

.trip-detail-cover__fallback {
    width: min(100%, 320px);
    text-align: center;
    display: grid;
    gap: .65rem;
    color: var(--b4-muted);
    padding: 1.4rem;
}

.trip-detail-cover__fallback span {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--b4-ink);
}

.trip-detail-info {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.trip-detail-info .trip-detail-hero__actions {
    margin-top: auto;
}

.trip-gallery,
.media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.trip-gallery__item,
.media-thumb {
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    border: 1px solid var(--b4-border);
}

.media-thumb__controls {
    position: absolute;
    inset: auto .75rem .75rem .75rem;
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    padding: .42rem .68rem;
    border-radius: 999px;
    background: rgba(16,16,16,.76);
    color: #fff;
}

.video-frame-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 24px;
    overflow: hidden;
    background: #0f0f0f;
    border: 1px solid var(--b4-border);
}

.video-frame-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.recommendation-card.is-recommended {
    border-color: rgba(245,158,11,.28);
    box-shadow: 0 12px 30px rgba(245,158,11,.08);
}

.recommendation-card__price,
.recommendation-card__type {
    font-size: .9rem;
}

.comment-card {
    background: #fff;
}

.comment-card p {
    color: var(--b4-ink);
    line-height: 1.6;
}

.message-preview,
.message-card,
.message-meta-box,
.message-body,
.system-check {
    background: #fff;
}

.message-preview__meta {
    font-size: .9rem;
    color: var(--b4-muted);
    margin-bottom: .35rem;
}

.message-preview.is-new,
.message-card--new,
.notification-card--unread {
    border-color: rgba(255, 48, 64, .25);
    box-shadow: 0 0 0 1px rgba(255,48,64,.08) inset;
}

.auth-wrap,
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: min(100%, 430px);
    padding: 0;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(16,16,16,.12);
}

.auth-card--wide,
.auth-shell .auth-card {
    width: min(100%, 760px);
}

.auth-card .card-body,
.auth-card .panel-card__header,
.auth-card form {
    position: relative;
    z-index: 1;
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, #f77737 0%, #e1306c 50%, #833ab4 100%);
}

.auth-logo {
    width: 180px;
    filter: saturate(0) brightness(0.08);
}

.auth-footer {
    color: var(--b4-muted);
}

.auth-footer a {
    text-decoration: none;
    font-weight: 700;
    color: var(--b4-primary-dark);
}

.form-label {
    font-weight: 700;
    color: var(--b4-ink);
    margin-bottom: .45rem;
}

.form-control,
.form-select {
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid var(--b4-border);
    background: #fff;
    color: var(--b4-ink);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(0,149,246,.55);
    box-shadow: 0 0 0 4px rgba(0,149,246,.1);
}

textarea.form-control {
    min-height: auto;
    border-radius: 18px;
}

.option-toggle {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .9rem 1rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--b4-border);
    font-weight: 700;
}

.locality-results__box {
    margin-top: .45rem;
    padding: .45rem;
    border-radius: 18px;
    border: 1px solid var(--b4-border);
    background: #fff;
    box-shadow: 0 18px 40px rgba(16,16,16,.08);
}

.locality-results__item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .16rem;
    padding: .72rem .8rem;
    border-radius: 14px;
    color: var(--b4-ink);
}

.locality-results__item:hover {
    background: var(--b4-surface-soft);
}

.locality-results__name {
    font-weight: 700;
}

.locality-results__meta {
    font-size: .82rem;
    color: var(--b4-muted);
}

.btn {
    border-radius: 999px;
    font-weight: 700;
    min-height: 44px;
    padding-inline: 1rem;
}

.btn-sm {
    min-height: 38px;
    padding-inline: .85rem;
}

.btn-primary {
    background: linear-gradient(135deg, #0095f6 0%, #1877f2 100%);
    border: 0;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #0084d9 0%, #1167d8 100%);
    color: #fff;
}

.btn-outline-secondary,
.btn-outline-light,
.btn-outline-danger {
    background: #fff;
}

.btn-outline-secondary {
    color: var(--b4-ink);
    border-color: var(--b4-border);
}

.btn-outline-secondary:hover {
    background: var(--b4-surface-soft);
    color: var(--b4-ink);
    border-color: var(--b4-border-strong);
}

.btn-outline-light {
    color: var(--b4-ink);
    border-color: var(--b4-border);
}

.btn-outline-light:hover {
    background: var(--b4-surface-soft);
    color: var(--b4-ink);
}

.btn-outline-danger {
    color: var(--b4-danger);
    border-color: rgba(255,48,64,.22);
}

.btn-outline-danger:hover {
    background: var(--b4-danger-soft);
    color: var(--b4-danger);
    border-color: rgba(255,48,64,.32);
}

.system-check {
    padding: 1rem 1.1rem;
}

.system-check.is-ok {
    border-color: rgba(47,179,68,.22);
}

.system-check.is-warning {
    border-color: rgba(245,158,11,.28);
}

.admin-table th,
.admin-table td {
    font-size: .92rem;
    vertical-align: middle;
}

.admin-inline-form {
    min-width: min(100%, 460px);
}

.trip-detail-hero__actions form {
    margin: 0;
}

.trip-detail-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: flex-start;
    justify-content: flex-end;
}

.comment-card a,
.request-card a,
.notification-card a,
.feed-card a,
.trip-card a,
.trip-list-item a {
    color: inherit;
}

.js-ajax-form.is-submitting {
    pointer-events: none;
}

button.is-loading {
    opacity: .92;
}

#ajaxFlashStack,
.ajax-flash-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: min(92vw, 380px);
    z-index: 9999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

#ajaxFlashStack .ajax-toast,
.ajax-flash-stack .ajax-toast {
    pointer-events: auto;
    opacity: 0;
    transform: translate3d(0, -8px, 0);
    transition: opacity .2s ease, transform .2s ease;
}

#ajaxFlashStack .ajax-toast.is-visible,
.ajax-flash-stack .ajax-toast.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#ajaxFlashStack .ajax-toast.is-leaving,
.ajax-flash-stack .ajax-toast.is-leaving {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
}

.brand--sidebar {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;
}


@media (max-width: 1199.98px) {
    .trip-feed {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        width: min(86vw, 320px);
    }

    .topbar {
        padding-inline: 0;
    }

    .profile-hero__grid,
    .trip-detail-hero__grid {
        grid-template-columns: 1fr;
    }

    .profile-hero__actions,
    .trip-detail-hero__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .profile-hero__actions .btn,
    .trip-detail-hero__actions .btn {
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .app-main > .container-fluid {
        padding-left: .9rem !important;
        padding-right: .9rem !important;
    }

    .trip-grid {
        grid-template-columns: 1fr;
    }

    .trip-gallery,
    .media-grid {
        grid-template-columns: 1fr;
    }

    .trip-list-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .trip-card__media {
        margin: .9rem .9rem 0;
    }

    .topbar {
        align-items: flex-start;
    }

    .topbar > div:last-child {
        width: 100%;
        justify-content: flex-start !important;
    }
}


.social-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .85rem;
}

.social-action-btn,
.social-action-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .78rem;
    border-radius: 999px;
    border: 1px solid var(--b4-border);
    background: var(--b4-surface-soft);
    color: var(--b4-ink);
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.social-action-btn:hover,
.social-action-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(16,16,16,.06);
    border-color: rgba(225,48,108,.22);
}

.social-action-btn {
    cursor: pointer;
}

.social-action-btn.is-active {
    color: #e1306c;
    border-color: rgba(225,48,108,.28);
    background: rgba(225,48,108,.08);
}

.social-actions--metrics {
    gap: .5rem;
}

.social-actions--compact {
    gap: .4rem;
}

.social-action-btn--metric,
.social-action-link--metric,
.social-action-chip {
    min-width: 56px;
    justify-content: center;
    padding-inline: .85rem;
}

.social-action-link--utility {
    margin-left: auto;
}

.social-action-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .78rem;
    border-radius: 999px;
    border: 1px solid var(--b4-border);
    background: var(--b4-surface-soft);
    color: var(--b4-muted);
    font-size: .84rem;
    font-weight: 700;
}

.social-action-btn__icon,
.social-action-link__icon {
    font-size: .95rem;
    line-height: 1;
}

.social-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .8rem;
}

.social-metric {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--b4-muted);
}

.trip-card__media-link,
.feed-card__media-link {
    display: block;
    color: inherit;
}

.trip-card__media-link:hover,
.feed-card__media-link:hover {
    color: inherit;
}

.trip-grid--triple {
    grid-template-columns: 1fr;
}

.recommendations-accordion .accordion-item {
    border: 1px solid var(--b4-border);
    border-radius: 22px !important;
    overflow: hidden;
    background: var(--b4-surface-soft);
    margin-bottom: .85rem;
}

.recommendations-accordion .accordion-button {
    font-weight: 800;
    background: var(--b4-surface);
    box-shadow: none;
}

.recommendations-accordion .accordion-button:not(.collapsed) {
    color: var(--b4-ink);
    background: rgba(225,48,108,.05);
}

.recommendations-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

@media (min-width: 992px) {
    .trip-grid--triple {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}



@media (max-width: 767.98px) {
    .trip-detail-cover {
        aspect-ratio: 16 / 10;
    }
}


.trip-list-item__thumb-link {
    flex: 0 0 104px;
    width: 104px;
    text-decoration: none;
}

.trip-list-item__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(247,119,55,.12), rgba(0,149,246,.18));
    display: grid;
    place-items: center;
}

.trip-list-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.trip-list-item__thumb.is-placeholder span {
    font-size: 2rem;
    font-weight: 800;
    color: #e1306c;
}

.trip-list-item__body {
    min-width: 0;
    flex: 1 1 auto;
}

.social-metrics--listing {
    margin-top: 0;
}

@media (max-width: 767.98px) {
    .trip-list-item__thumb-link {
        width: 100%;
        flex-basis: 100%;
    }

    .trip-list-item__thumb {
        aspect-ratio: 16 / 10;
    }
}


.trip-create-fab {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .9rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #0095f6 0%, #1877f2 100%);
    box-shadow: 0 18px 45px rgba(24, 119, 242, .28);
    font-weight: 800;
}

.trip-create-fab:hover {
    color: #fff;
    transform: translateY(-1px);
}

.trip-create-fab__icon {
    font-size: 1.15rem;
    line-height: 1;
}

.panel-card--map-full {
    overflow: hidden;
}

.travel-map--fullscreen {
    min-height: 100svh;
}

.notification-preview {
    padding: 1rem 1.05rem;
    border: 1px solid var(--b4-border);
    border-radius: var(--b4-radius-sm);
    background: var(--b4-surface-soft);
}

.notification-preview.is-unread {
    border-color: rgba(255, 48, 64, .25);
    box-shadow: 0 0 0 1px rgba(255,48,64,.08) inset;
}

.social-action-btn.is-updated,
.social-action-link.is-updated,
.social-action-chip.is-updated,
[data-trip-like-count].is-updated,
[data-trip-comment-count].is-updated,
[data-trip-save-count].is-updated,
[data-followers-count].is-updated {
    animation: metricPulse .55s ease;
}

@keyframes metricPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@media (max-width: 767.98px) {
    .trip-create-fab {
        right: 1rem;
        bottom: 1rem;
        padding: .85rem 1rem;
    }

    .trip-create-fab__label {
        display: none;
    }

    .travel-map--fullscreen {
        min-height: 72svh;
    }
}

/* Landing */
.landing-page {
    max-width: calc(var(--b4-container) + 3rem);
    margin: 0 auto;
    padding-bottom: 3rem;
}

.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 0 0;
}

.landing-brand__logo {
    width: 190px;
    height: auto;
}

.landing-nav__actions {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.landing-nav__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1rem;
    border-radius: 999px;
    background: rgba(16,16,16,.06);
    color: var(--b4-muted);
    font-size: .92rem;
    font-weight: 700;
}

.landing-hero,
.landing-copy-card,
.landing-feature-card,
.landing-trip-card,
.landing-cta-box,
.landing-showcase {
    background: rgba(255,255,255,.94);
    border: 1px solid var(--b4-border);
    border-radius: 32px;
    box-shadow: var(--b4-shadow);
}

.landing-hero {
    padding: 2rem;
}

.landing-hero__title,
.landing-copy-card h2,
.landing-cta-box h2,
.section-heading h2 {
    font-size: clamp(2.2rem, 4vw, 4.4rem);
    line-height: .97;
    letter-spacing: -0.06em;
    font-weight: 800;
}

.section-heading h2,
.landing-copy-card h2,
.landing-cta-box h2 {
    font-size: clamp(1.8rem, 3vw, 3rem);
}

.landing-hero__lead,
.section-heading p,
.landing-copy-card p,
.landing-cta-box p,
.landing-feature-card p,
.landing-trip-card p {
    color: var(--b4-muted);
    font-size: 1.03rem;
    line-height: 1.7;
}

.landing-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.landing-hero__badges span,
.landing-checks li {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--b4-border);
    box-shadow: 0 10px 20px rgba(16,16,16,.04);
}

.landing-showcase {
    padding: 1rem;
}

.landing-showcase__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .4rem .4rem 1rem;
}

.landing-showcase__map-wrap {
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid var(--b4-border);
}

.landing-travel-map {
    min-height: 420px;
}

.landing-mini-stat {
    padding: 1rem 1.05rem;
    border-radius: 22px;
    background: var(--b4-surface-soft);
    border: 1px solid rgba(16,16,16,.05);
    height: 100%;
}

.landing-mini-stat strong {
    display: block;
    font-size: 1.45rem;
    letter-spacing: -0.05em;
}

.landing-mini-stat span {
    display: block;
    color: var(--b4-muted);
    margin-top: .2rem;
}

.landing-section {
    margin-bottom: 2rem;
}

.section-heading {
    max-width: 820px;
}

.landing-feature-card,
.landing-copy-card,
.landing-cta-box {
    padding: 1.6rem;
}

.landing-feature-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--b4-primary-soft);
    color: var(--b4-primary);
    font-weight: 800;
    margin-bottom: 1rem;
}

.landing-feature-card h3,
.landing-trip-card h3 {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: .7rem;
}

.landing-checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .8rem;
}

.landing-checks li::before {
    content: '✓';
    color: var(--b4-primary);
    font-weight: 800;
}

.landing-trip-card {
    overflow: hidden;
    height: 100%;
}

.landing-trip-card__image {
    display: block;
    aspect-ratio: 4 / 3;
    background: linear-gradient(145deg, rgba(255,48,64,.16), rgba(0,149,246,.16));
    overflow: hidden;
}

.landing-trip-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.landing-trip-card__image.is-placeholder {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
}

.landing-trip-card__body {
    padding: 1.15rem;
}

.landing-trip-card__meta {
    font-size: .9rem;
    color: var(--b4-muted);
}

.landing-trip-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: .9rem;
}

.landing-trip-card__footer a {
    color: var(--b4-primary);
    font-weight: 700;
    text-decoration: none;
}

.landing-section--cta {
    padding-bottom: 1rem;
}

.landing-cta-box {
    padding: 2rem;
}

.auth-modal-card {
    border-radius: 30px;
}

.auth-modal-note {
    color: var(--b4-muted);
    font-size: .92rem;
}

@media (max-width: 991.98px) {
    .landing-hero,
    .landing-copy-card,
    .landing-feature-card,
    .landing-cta-box,
    .landing-showcase {
        border-radius: 26px;
    }

    .landing-nav {
        padding-top: .5rem;
    }
}

@media (max-width: 767.98px) {
    .landing-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .landing-nav__actions {
        width: 100%;
        justify-content: space-between;
    }

    .landing-hero {
        padding: 1.4rem;
    }

    .landing-travel-map {
        min-height: 300px;
    }

    .landing-trip-card__footer {
        flex-direction: column;
        align-items: flex-start;
    }
}


.site-footer {
    margin-top: 2rem;
    border-top: 1px solid rgba(20, 20, 43, 0.08);
}

.site-footer__inner {
    padding: 2.5rem 1.25rem 2rem;
}

.site-footer__inner--app {
    padding: 1.75rem 1rem 2rem;
}

.site-footer--guest {
    background: #ffffff;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -12px 30px rgba(19, 25, 40, 0.04);
}

.site-footer--app {
    background: transparent;
}

.site-footer__brand,
.site-footer__logo {
    display: inline-flex;
    align-items: center;
}

.site-footer__logo {
    max-height: 34px;
    width: auto;
}

.site-footer__lead,
.site-footer__text {
    color: #6b7280;
    font-size: 0.96rem;
    line-height: 1.65;
}

.site-footer__title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.95rem;
}

.site-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.site-footer__list a,
.site-footer__nav a {
    color: #111827;
    text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__nav a:hover {
    color: var(--bs-primary);
}

.site-footer__bottom {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(20, 20, 43, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.5rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.85rem 1.15rem;
    font-weight: 600;
}

.menu-fab {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: #111827;
    color: #fff;
    box-shadow: 0 18px 40px rgba(15,23,42,.25);
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-fab__icon {
    font-size: 1.4rem;
    line-height: 1;
}

.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 9998;
}

.cookie-banner__inner {
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 20px 48px rgba(15,23,42,.16);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

.profile-hero__stats--icons,
.user-card__stats--icons {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
}

.trip-card__header--stack {
    align-items: flex-start;
}

.trip-card__eyebrow--dates {
    margin-top: .75rem;
}

.trip-card__summary {
    min-height: 1.75rem;
}

.site-footer__bottom {
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
}

.site-footer__legal a {
    color: inherit;
    text-decoration: none;
}

.site-footer__legal a:hover {
    text-decoration: underline;
}

.legal-page__content {
    line-height: 1.7;
}

.legal-page__content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .trip-create-fab {
        right: 1rem;
        bottom: 1rem;
    }
    .cookie-banner__inner {
        flex-direction: column;
        align-items: stretch;
    }
}