:root {
    --brand-sand: #E8D0A9;
    --brand-taupe: #B7AFA3;
    --brand-sage: #C1DAD6;
    --brand-mist: #F5FAFA;
    --brand-sky: #ACD1E9;
    --brand-teal: #6D929B;

    --bg: var(--brand-mist);
    --surface: #ffffff;
    --surface-soft: #edf5f4;
    --surface-muted: #f3ebe0;
    --line: #d9d4cf;
    --line-strong: var(--brand-taupe);
    --ink: #2a3638;
    --ink-soft: #455456;
    --muted: #5f7f87;
    --muted-light: var(--brand-taupe);
    --accent: var(--brand-teal);
    --accent-hover: #5a7d86;
    --accent-soft: var(--brand-sage);
    --accent-sky: var(--brand-sky);
    --accent-warm: var(--brand-sand);
    --danger: #8b2e2e;
    --danger-soft: #f3ecec;
    --warn-soft: #faf3e8;
    --success-soft: #e8f3f1;
    --max: 1180px;
    --radius: 10px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hairline: color-mix(in srgb, var(--brand-taupe) 28%, transparent);
    --field-bg: color-mix(in srgb, var(--brand-sage) 36%, var(--surface));
    --field-bg-focus: color-mix(in srgb, var(--brand-sage) 54%, var(--surface));
    --field-gap: 12px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --chip-bg: color-mix(in srgb, var(--brand-sage) 34%, var(--surface));
    --chip-verified: color-mix(in srgb, var(--brand-teal) 14%, var(--surface));
    --radius-xl: 22px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.62;
    letter-spacing: -0.014em;
    position: relative;
    isolation: isolate;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 50% at 100% 0%, color-mix(in srgb, var(--brand-sky) 20%, transparent), transparent 55%),
        radial-gradient(ellipse 60% 45% at 0% 100%, color-mix(in srgb, var(--brand-sand) 22%, transparent), transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 40%, color-mix(in srgb, var(--brand-sage) 12%, transparent), transparent 60%);
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--accent);
}

img {
    max-width: 100%;
    display: block;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.06;
}

h1 {
    font-size: clamp(2.5rem, 5.8vw, 4.25rem);
    font-weight: 450;
    letter-spacing: -0.045em;
}

h2 {
    font-size: clamp(1.625rem, 2.8vw, 2.125rem);
    font-weight: 500;
}

h3 {
    font-size: 1.0625rem;
    font-weight: 600;
}

p {
    margin: 0;
}

button,
.button,
input[type="submit"] {
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    padding: 14px 26px;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

button:hover,
.button:hover,
input[type="submit"]:hover {
    background: var(--accent-hover);
}


button.ghost,
.button.ghost,
button.link-button {
    background: var(--chip-bg);
    color: var(--ink-soft);
    padding-inline: 18px;
}

button.ghost:hover,
.button.ghost:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--brand-sage) 52%, var(--surface));
}

a.button.ghost {
    background: var(--chip-bg);
}

.text-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
}

.text-link:hover {
    color: var(--accent);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 300;
    width: 100%;
    background: var(--brand-mist);
}

.topbar-wrap {
    display: flex;
    flex-direction: column;
}

@media (min-width: 961px) {
    .topbar-wrap {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .topbar-inner {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .topbar .nav {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        position: static;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        opacity: 1;
        background: transparent;
        overflow: visible;
        max-width: none;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .topbar .nav-links {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0;
        flex: 0 1 auto;
    }
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
    position: relative;
    z-index: 303;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
    text-decoration: none;
    color: var(--ink);
}

.brand-mark {
    font-size: 1.375rem;
    font-weight: 650;
    letter-spacing: -0.06em;
    text-transform: lowercase;
}

.brand-accent {
    color: var(--accent);
}

.brand-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 2px;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: super;
}

.brand-tag {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted);
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav a,
.link-button {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.nav a:hover,
.link-button:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--brand-sage) 35%, transparent);
}

.nav a.is-active {
    color: var(--accent);
}

.nav-cta {
    background: var(--accent) !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: var(--radius-pill) !important;
}

.nav-cta:hover {
    background: var(--accent-hover) !important;
    color: #fff !important;
}

.nav-toggle {
    display: none;
    position: relative;
    z-index: 302;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    background: var(--accent);
    gap: 5px;
    flex-direction: column;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.nav-toggle span {
    width: 18px;
    height: 1.5px;
    background: #fff;
}

body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

.nav-scrim {
    display: none;
}

.nav-mobile-head {
    display: none;
}

.flash-wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 14px clamp(20px, 4vw, 48px) 0;
}

.flash {
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--brand-sage) 40%, var(--surface));
    color: var(--accent-hover);
    font-size: 0.9375rem;
}


.flash.error {
    background: var(--danger-soft);
    color: var(--danger);
}

main {
    min-height: 72vh;
}

.page-shell {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}

.page-head {
    padding-top: clamp(36px, 6vw, 80px);
    padding-bottom: clamp(20px, 3vw, 32px);
}

.page-head-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.page-head-row h1 {
    max-width: none;
}

.page-head h1 {
    max-width: 22ch;
}

.page-head.legal h1,
.empty-state h1 {
    max-width: none;
}

.page-head p,
.lead {
    margin-top: 18px;
    max-width: 54ch;
    font-size: 1.0625rem;
    color: var(--muted);
    line-height: 1.62;
}

.page-head--compact {
    padding-top: clamp(20px, 3vw, 36px);
    padding-bottom: clamp(16px, 2vw, 24px);
}

.content-block {
    padding-bottom: clamp(56px, 8vw, 96px);
    padding-top: 32px;
    max-width: 640px;
}

.content-block h2 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.wide-form {
    max-width: 100%;
}

.brand.is-home .brand-accent {
    color: var(--accent);
}

.empty-actions form {
    margin: 0;
}

.filters select {
    background-position: right 12px center;
    padding-right: 36px;
}

.space-card:hover .space-body h3 a {
    color: var(--accent);
}

.panel h2 + p {
    margin-top: 8px;
}

.dash-grid .panel h2 + .payment-note {
    margin-top: 0;
    margin-bottom: 12px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

.eyebrow::before {
    content: "";
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    flex-shrink: 0;
}

.hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(48px, 7vw, 96px);
    align-items: end;
    padding-top: clamp(56px, 9vw, 120px);
    padding-bottom: clamp(64px, 9vw, 112px);
    background:
        radial-gradient(ellipse 80% 60% at 92% 8%, color-mix(in srgb, var(--brand-sky) 22%, transparent), transparent 55%),
        radial-gradient(ellipse 70% 55% at 4% 92%, color-mix(in srgb, var(--brand-sand) 28%, transparent), transparent 50%);
}

.hero-copy h1 {
    max-width: 11ch;
}

.hero-copy .lead {
    margin-top: 22px;
}

.hero-stats {
    display: grid;
    gap: 16px;
    padding-bottom: 6px;
}

.stat-item {
    padding: 22px 24px;
    background: var(--surface);
    border-radius: var(--radius-xl);
}

.stat-item strong {
    display: block;
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 10px;
    color: var(--accent);
}

.stat-item span {
    display: block;
    font-size: 0.9375rem;
    color: var(--muted);
    line-height: 1.48;
    max-width: 24ch;
}

.searchbar,
.search-panel,
.filters {
    display: grid;
    gap: var(--field-gap);
    margin-top: 40px;
}

.searchbar,
.search-panel {
    grid-template-columns: minmax(130px, 0.9fr) minmax(0, 1.2fr) auto;
    max-width: 720px;
}

.search-panel,
.filter-panel {
    padding: 12px;
    background: var(--surface);
    border-radius: var(--radius-xl);
}

.filters {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    padding-bottom: 0;
    margin-bottom: 0;
}

.filters-bar {
    padding-bottom: 12px;
}

.filters-bar .filter-panel {
    margin-top: 0;
}

.filters button[type="submit"] {
    min-height: 100%;
}

.catalog-results {
    padding-top: 24px;
    padding-bottom: clamp(56px, 8vw, 96px);
}

.catalog-results .grid.cards {
    margin-top: 0;
}

.filters button {
    align-self: stretch;
}

input,
select,
textarea {
    width: 100%;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    padding: 14px 0;
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted-light);
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236f6f6a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 20px;
}

input[type="file"] {
    padding: 12px 0;
    font-size: 0.875rem;
    color: var(--muted);
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.searchbar input,
.searchbar select,
.search-panel input,
.search-panel select,
.catalog-search input,
.catalog-search select,
.filters input,
.filters select,
.filter-panel input,
.filter-panel select,
.stack-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.stack-form select,
.stack-form textarea,
.stack-form--fields input,
.stack-form--fields select,
.stack-form--fields textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
.filters-form input,
.filters-form select {
    background-color: var(--field-bg);
    border: 0;
    border-radius: var(--radius);
    padding: 14px 16px;
}

.searchbar input:focus,
.searchbar select:focus,
.search-panel input:focus,
.search-panel select:focus,
.catalog-search input:focus,
.catalog-search select:focus,
.filters input:focus,
.filters select:focus,
.filter-panel input:focus,
.filter-panel select:focus,
.stack-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
.stack-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus-visible,
.stack-form select:focus,
.stack-form select:focus-visible,
.stack-form textarea:focus,
.stack-form textarea:focus-visible,
.stack-form--fields input:focus,
.stack-form--fields input:focus-visible,
.stack-form--fields select:focus,
.stack-form--fields select:focus-visible,
.stack-form--fields textarea:focus,
.stack-form--fields textarea:focus-visible,
.form-grid input:focus,
.form-grid input:focus-visible,
.form-grid select:focus,
.form-grid select:focus-visible,
.form-grid textarea:focus,
.form-grid textarea:focus-visible,
.filters-form input:focus,
.filters-form input:focus-visible,
.filters-form select:focus,
.filters-form select:focus-visible,
.searchbar input:focus-visible,
.searchbar select:focus-visible,
.search-panel input:focus-visible,
.search-panel select:focus-visible,
.catalog-search input:focus-visible,
.catalog-search select:focus-visible,
.filters input:focus-visible,
.filters select:focus-visible,
.filter-panel input:focus-visible,
.filter-panel select:focus-visible {
    background-color: var(--field-bg-focus);
    outline: none;
}

.searchbar select,
.search-panel select,
.catalog-search select,
.filters select,
.filter-panel select,
.stack-form select,
.stack-form--fields select,
.form-grid select,
.filters-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236f6f6a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

textarea {
    min-height: 132px;
    resize: vertical;
}

.form-grid select {
    background-position: right 12px center;
}

.section {
    padding: clamp(48px, 7vw, 80px) 0;
}

.section + .section {
    padding-top: 0;
    margin-top: -12px;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    padding-bottom: 0;
}

.section-head h2 {
    max-width: 18ch;
}

.split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}

.steps {
    display: grid;
    gap: 0;
}

.step-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 20px;
    padding: 28px 24px;
    background: var(--surface);
    border-radius: var(--radius-xl);
}

.step-item + .step-item {
    margin-top: 12px;
}

.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-sage) 45%, var(--surface));
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.step-item strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.step-item span {
    color: var(--muted);
    font-size: 0.9375rem;
}

.grid.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 48px);
}

.space-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 10px;
    background: var(--surface);
    border-radius: var(--radius-xl);
}

.space-card .space-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 6px 6px;
}

.space-card .space-price-row .space-price {
    display: none;
}

.space-card .space-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 8px;
}

.space-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-soft) center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    overflow: hidden;
    border-radius: calc(var(--radius-xl) - 4px);
}

.space-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--ink) 38%, transparent) 0%, transparent 52%);
    pointer-events: none;
}

.space-price-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.space-image span {
    position: relative;
    z-index: 0;
    font-size: 2.75rem;
    font-weight: 500;
    color: var(--muted-light);
    letter-spacing: -0.04em;
}

.space-body {
    display: grid;
    gap: 8px;
}

.space-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted);
}

.space-meta span + span::before {
    content: "·";
    margin-right: 12px;
    color: var(--muted-light);
}

.space-body h3 a {
    text-decoration: none;
    color: var(--ink);
}

.space-body h3 a:hover {
    color: var(--accent);
}

.space-body p {
    color: var(--muted);
    font-size: 0.9375rem;
}

.space-price {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: 4px;
}

.detail-page {
    padding-top: clamp(20px, 3vw, 32px);
    padding-bottom: clamp(56px, 8vw, 96px);
}

.detail-media {
    margin-bottom: clamp(28px, 4vw, 48px);
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.detail-image {
    width: 100%;
    min-height: clamp(280px, 42vw, 520px);
    max-height: 68vh;
    background: var(--surface-soft) center / cover no-repeat;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.detail-image--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-image--empty span {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 500;
    color: var(--muted-light);
    letter-spacing: -0.04em;
}

.photo-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: minmax(160px, 1fr);
    gap: 8px;
    overflow: hidden;
    min-height: clamp(280px, 42vw, 520px);
    max-height: 68vh;
    border-radius: var(--radius-lg);
}

.photo-gallery-cover {
    grid-row: span 2;
    min-height: 368px;
}

.photo-gallery-item {
    background: var(--surface-soft) center / cover no-repeat;
    min-height: 180px;
    border-radius: calc(var(--radius-lg) - 4px);
}

.rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
}

.star {
    color: var(--muted-light);
}

.star-filled {
    color: var(--accent);
}

.trust-mark {
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.chip--muted {
    background: var(--chip-bg);
    color: var(--muted);
}

.chip--verified {
    background: var(--chip-verified);
    color: var(--accent);
}

.chip--verified::before {
    content: "✓";
    font-size: 0.6875rem;
    font-weight: 800;
}

.chip--instant {
    background: color-mix(in srgb, var(--brand-sage) 45%, var(--surface));
    color: var(--ink);
}

.chip--superhost {
    background: color-mix(in srgb, var(--brand-clay) 35%, var(--surface));
    color: var(--accent);
    font-weight: 600;
}

.dash-item--stacked {
    display: grid;
    gap: 6px;
}

.dash-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dash-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.rating-value,
.rating-count {
    color: var(--muted);
    margin-left: 4px;
}

.reviews-list {
    display: grid;
    gap: 0;
    margin-top: 16px;
}

.review-item {
    padding: 20px 22px;
    background: var(--surface);
    border-radius: var(--radius-lg);
}

.review-item + .review-item {
    margin-top: 12px;
}

.review-item p {
    color: var(--ink-soft);
    line-height: 1.62;
}

.photo-manage {
    margin-top: 8px;
}

.photo-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.photo-thumb {
    position: relative;
    min-height: 100px;
    background: var(--surface-soft) center / cover no-repeat;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.photo-thumb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.photo-thumb-actions form {
    margin: 0;
}

.photo-thumb-actions button {
    font-size: 0.75rem;
    padding: 4px 8px;
}

.detail-main {
    padding-top: 4px;
}

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 32px;
}

.facts span {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    background: var(--chip-bg);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.facts span + span::before {
    content: none;
}

.detail-main > p {
    color: var(--ink-soft);
    line-height: 1.68;
}

.detail-main h2,
.detail-main h3 {
    margin-top: 32px;
    margin-bottom: 12px;
}

.booking-box {
    position: sticky;
    top: 96px;
    align-self: start;
    padding: 28px;
    background: var(--surface);
    border-radius: var(--radius-xl);
}

.booking-box strong {
    display: block;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
}

.booking-box > span {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.9375rem;
}

.stack-form {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.payment-note {
    margin-top: 16px;
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.55;
}

.panel,
.empty,
.auth-card,
.row {
    background: transparent;
    border-radius: 0;
}

.panel,
.empty,
.auth-card {
    padding: 0;
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 40px);
    padding-bottom: clamp(56px, 8vw, 96px);
}

.dash-grid .panel {
    padding: 28px;
    background: var(--surface);
    border-radius: var(--radius-xl);
}

.dash-grid .panel:first-child {
    padding: 28px;
}

a.button {
    text-decoration: none;
}

.dash-grid .panel .section-head {
    margin-bottom: 20px;
    padding-bottom: 12px;
}

.dash-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dash-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin: 0 -16px;
    border-radius: var(--radius);
}

.dash-item:hover {
    background: color-mix(in srgb, var(--brand-sage) 28%, var(--surface));
}

.dash-item a {
    text-decoration: none;
    font-weight: 500;
    color: var(--ink);
}

.dash-item a:hover {
    color: var(--accent);
}

.dash-item--stack {
    align-items: flex-start;
}

.dash-item--stack strong {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.dash-item--stack .payment-note {
    margin-top: 4px;
}

.ledger-amount {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.ledger-amount.is-in {
    color: var(--accent);
}

.ledger-amount.is-out {
    color: var(--ink-soft);
}

.nav form {
    margin: 0;
    display: inline;
}

button:focus-visible,
.button:focus-visible,
.nav a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .brand-tag {
        display: none;
    }
}

.panel h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
}

.panel p + p {
    margin-top: 12px;
}

.list {
    display: grid;
    gap: 0;
    padding-bottom: clamp(56px, 8vw, 96px);
}

.list > h2 {
    margin-bottom: 16px;
    padding-bottom: 0;
}

.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 32px;
    align-items: center;
    padding: 20px 24px;
    background: var(--surface);
    border-radius: var(--radius-xl);
}

.row:hover {
    background: color-mix(in srgb, var(--brand-sage) 22%, var(--surface));
}

.list .row + .row {
    margin-top: 12px;
}

.list .row:has(.bulk-check) {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.bulk-check {
    display: flex;
    align-items: center;
}

.bulk-approve-form {
    display: flex;
    gap: 12px;
    align-items: center;
}

.support-sla {
    margin-top: 8px;
}

.row-main h3 a {
    text-decoration: none;
    color: var(--ink);
}

.row-main h3 a:hover {
    color: var(--accent);
}

.row-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.inline-actions form {
    margin: 0;
}

.row h3 {
    font-size: 1rem;
}

.row p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.9375rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding-bottom: clamp(56px, 8vw, 96px);
}

.form-grid label {
    display: grid;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.wide {
    grid-column: 1 / -1;
}

.actions,
.inline-actions,
.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.form-actions {
    margin-top: 8px;
    padding-bottom: clamp(56px, 8vw, 96px);
}

.payout-fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.check input {
    width: auto;
}

.auth-card {
    max-width: 440px;
    margin: clamp(56px, 10vw, 104px) auto;
    padding: clamp(32px, 5vw, 40px);
    background: var(--surface);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}

.auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent);
}

.auth-card h1 {
    font-size: 2rem;
    margin-bottom: 28px;
}

.auth-card p {
    margin-top: 24px;
    color: var(--muted);
    font-size: 0.9375rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    background: var(--chip-bg);
}

.badge::before {
    display: none;
}

.badge-new,
.badge-pending,
.badge-unpaid {
    color: #8a7350;
    background: color-mix(in srgb, var(--brand-sand) 45%, var(--surface));
}

.badge-accepted,
.badge-active,
.badge-processing {
    color: var(--accent);
    background: var(--chip-verified);
}

.badge-paid,
.badge-confirmed {
    color: var(--accent-hover);
    background: color-mix(in srgb, var(--brand-sage) 50%, var(--surface));
}

.badge-declined,
.badge-rejected,
.badge-cancelled,
.badge-failed {
    color: var(--danger);
    background: var(--danger-soft);
}

.badge-draft,
.badge-paused,
.badge-completed,
.badge-none {
    color: var(--muted);
    background: var(--chip-bg);
}

.legal ul {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.legal li {
    margin-bottom: 0;
    padding: 18px 22px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    color: var(--muted);
}

.legal li + li {
    margin-top: 0;
}

.legal li strong {
    color: var(--ink);
}

.empty {
    padding: 40px 32px;
    background: var(--surface);
    border-radius: var(--radius-xl);
    text-align: center;
}

.empty h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.empty .lead {
    margin-top: 12px;
}

.empty .button {
    margin-top: 24px;
}

.pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding-top: 0;
    justify-content: center;
}

.pagination a,
.pagination span {
    min-width: 42px;
    min-height: 42px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
}

.pagination a:hover {
    color: var(--ink);
    background: var(--chip-bg);
}

.pagination span[aria-current="page"] {
    color: #fff;
    font-weight: 600;
    background: var(--accent);
}

.pagination-disabled,
.pagination-ellipsis {
    color: var(--muted-light);
}

.footer {
    margin-top: clamp(48px, 8vw, 80px);
    background: color-mix(in srgb, var(--brand-sage) 18%, var(--bg));
    color: var(--muted);
    font-size: 0.9375rem;
}

.footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 32px;
    padding: clamp(56px, 8vw, 80px) clamp(20px, 4vw, 48px);
}

.footer strong {
    color: var(--ink);
    font-weight: 600;
}

.footer-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-links a {
    text-decoration: none;
    color: var(--muted);
}

.footer-links a:hover {
    color: var(--ink);
}

.breadcrumbs {
    max-width: var(--max);
    margin: 0 auto;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 18px clamp(20px, 4vw, 48px) 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--muted-light);
}

.breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--ink);
}

.city-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.city-links a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.9375rem;
    padding: 11px 16px;
    background: var(--surface);
    border-radius: var(--radius-pill);
}

.city-links a:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--brand-sage) 50%, var(--surface));
}

.city-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(109, 146, 155, 0.14);
    color: var(--accent);
}

.booking-stepper {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    list-style: none;
    padding: 4px 2px 8px;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.booking-stepper::-webkit-scrollbar {
    display: none;
}

.booking-step {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 9px 14px;
    border-radius: var(--radius-pill);
    background: var(--chip-bg);
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.booking-step.is-current {
    background: var(--accent);
    color: #fff;
}

.booking-step.is-done {
    background: color-mix(in srgb, var(--brand-sage) 55%, var(--surface));
    color: var(--accent);
}

.stepper-shell {
    padding-bottom: 8px;
}

.report-form {
    margin-top: 16px;
}

.ghost-link {
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
}

.next-action-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding: 18px 22px;
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--brand-sky) 26%, var(--surface));
}

.next-action-banner p {
    margin: 0;
    font-weight: 500;
    color: var(--ink-soft);
}

.next-action-banner .button {
    flex-shrink: 0;
}

.filter-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
    padding: 4px 0;
}

.results-meta {
    margin: 0 0 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
}

.wallet-buckets {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
}

.wallet-bucket {
    padding: 16px 18px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-sage) 24%, var(--surface));
}

.wallet-bucket-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}

.wallet-bucket-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.wallet-bucket .payment-note {
    margin-top: 8px;
    margin-bottom: 0;
}

.field-label {
    display: grid;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.field-label input,
.field-label select,
.field-label textarea {
    font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

.price-calculator {
    margin: 16px 0 20px;
    padding: 18px 20px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-sage) 32%, var(--surface));
}

.price-calculator strong {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.auth-card textarea {
    min-height: 96px;
}

.empty-state {
    padding-bottom: clamp(56px, 8vw, 96px);
}

.empty-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.auth-card .eyebrow {
    margin-bottom: 16px;
}

.auth-card .lead {
    margin-bottom: 24px;
    color: var(--muted);
    font-size: 0.9375rem;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

fieldset legend {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 12px;
}

@media (max-width: 960px) {
    .nav-toggle {
        display: flex;
    }

    .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 280;
        border: 0;
        padding: 0;
        margin: 0;
        background: color-mix(in srgb, var(--ink) 42%, transparent);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        cursor: pointer;
    }

    body.nav-open .nav-scrim {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav {
        position: fixed;
        inset: 0;
        z-index: 290;
        padding: calc(var(--app-header-h) + var(--safe-top) + 8px) 0 0;
        margin: 0;
        background: var(--bg);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow-y: auto;
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
    }

    body.nav-open .nav {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
    }

    body.nav-open {
        overflow: hidden;
    }

    body.filters-open .filters-scrim {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px clamp(20px, 4vw, 24px) 8px;
    }

    .nav-mobile-label {
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 20px clamp(20px, 4vw, 24px) 32px;
        flex: 1;
    }

    .nav a,
    .nav .link-button {
        font-size: 1.25rem;
        font-weight: 500;
        padding: 16px 18px;
        border-radius: var(--radius-lg);
        color: var(--ink);
        background: transparent;
        text-align: left;
        justify-content: flex-start;
        width: 100%;
    }

    .nav a:hover,
    .nav .link-button:hover {
        background: color-mix(in srgb, var(--brand-sage) 40%, var(--surface));
        color: var(--ink);
    }

    .nav a.is-active {
        background: color-mix(in srgb, var(--brand-sage) 48%, var(--surface));
        color: var(--accent);
        font-weight: 600;
    }

    .nav-cta {
        margin-top: 12px;
        text-align: center;
        justify-content: center;
        font-size: 1.0625rem !important;
        padding: 16px 24px !important;
    }

    .nav form {
        display: block;
        width: 100%;
        margin-top: 4px;
    }

    .nav .link-button {
        min-height: 52px;
    }

    .hero,
    .split,
    .detail-layout,
    .dash-grid,
    .grid.cards {
        grid-template-columns: 1fr;
    }

    .searchbar,
    .search-panel,
    .filters,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .detail-image,
    .photo-gallery {
        min-height: 240px;
        max-height: none;
    }

    .booking-box {
        position: static;
        padding: 28px 0 0;
        margin-top: 24px;
        background: transparent;
        border-radius: 0;
    }

    .dash-grid .panel {
        padding: 24px;
    }

    .dash-grid .panel:first-child {
        padding: 24px;
    }

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

    .row-aside {
        align-items: flex-start;
        width: 100%;
    }

    .payout-fieldset {
        grid-template-columns: 1fr;
    }

    .dash-grid--2 {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
    }

    .section-head {
        align-items: start;
        flex-direction: column;
    }

    .hero-stats {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 24px;
    }
}

@media (min-width: 961px) {
    .hero-stats {
        padding-left: clamp(28px, 4vw, 56px);
    }
}

.admin-body .admin-topbar {
    background: color-mix(in srgb, var(--brand-mist) 88%, transparent);
}

.admin-topbar .topbar-wrap {
    display: block;
}

@media (min-width: 961px) {
    .admin-topbar .topbar-inner {
        width: 100%;
    }
}

.admin-nav {
    flex-wrap: wrap;
    gap: 12px 18px;
}

.nav-badge {
    display: inline-flex;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: var(--accent);
    color: #fff;
    vertical-align: middle;
}

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    max-height: min(52vh, 480px);
    overflow-y: auto;
    padding: 4px 2px;
    scroll-behavior: smooth;
}

.chat-message {
    padding: 14px 18px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    max-width: min(88%, 520px);
}

.chat-message:not(.is-own) {
    justify-self: start;
    border-bottom-left-radius: 6px;
}

.chat-message.is-own {
    justify-self: end;
    border-bottom-right-radius: 6px;
    background: color-mix(in srgb, var(--brand-sage) 40%, var(--surface));
}

.chat-message.is-own .chat-meta {
    color: var(--accent);
}

.chat-meta {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
}

.dash-item.is-unread h3 {
    color: var(--accent);
}

.filters-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.filters-bar .is-active {
    color: var(--accent);
    font-weight: 600;
}

.filters-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
}

.filters-form input,
.filters-form select {
    padding: 12px 16px;
    border-radius: var(--radius-pill);
    font: inherit;
}

.space-map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 12px 0 24px;
}

.space-map iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

.geocode-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catalog-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--brand-sage) 28%, var(--surface));
}

.catalog-view-switch button {
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 10px 16px;
    min-height: 40px;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.catalog-view-switch button[aria-selected="true"] {
    background: var(--accent);
    color: #fff;
}

.catalog-shell {
    position: relative;
}

.catalog-chrome {
    position: relative;
    z-index: 1;
}

.catalog-panel--map {
    padding-top: 8px;
    padding-bottom: clamp(32px, 5vw, 56px);
}

.catalog-map-note {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--brand-sage) 32%, var(--surface));
}

.catalog-map {
    height: clamp(320px, 52vh, 480px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: var(--surface);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--brand-teal) 8%, transparent);
}

.catalog-map .leaflet-container {
    height: 100%;
    width: 100%;
    font-family: var(--font);
    background: var(--surface-soft);
}

body.catalog-view-map .catalog-panel--list {
    display: none !important;
}

body.catalog-view-list .catalog-panel--map {
    display: none !important;
}

body.filters-open .catalog-tool-btn.filters-trigger {
    background: var(--accent);
    color: #fff;
}

body.filters-open .filters-trigger-count {
    background: #fff;
    color: var(--accent);
}

body.filters-open {
    overflow: hidden;
}

body.filters-open .topbar {
    visibility: hidden;
    pointer-events: none;
}

.filters-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 318;
    border: 0;
    padding: 0;
    margin: 0;
    background: color-mix(in srgb, var(--ink) 42%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
}

body.filters-open .filters-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.filters-sheet {
    position: fixed;
    inset: 0;
    z-index: 320;
    margin: 0;
    padding: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

body.filters-open .filters-sheet {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.filters-sheet-head {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    max-width: none;
    margin: 0;
}

.filters-sheet-close {
    display: flex;
}

.filters-sheet-close span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.filters-sheet-close span:nth-child(2) {
    opacity: 0;
}

.filters-sheet-close span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

.loqa-map-marker {
    background: transparent;
    border: 0;
}

.loqa-map-pin {
    display: block;
    width: 28px;
    height: 36px;
    background: var(--accent);
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    position: relative;
}

.loqa-map-pin::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

.loqa-map-popup-wrap.leaflet-popup .leaflet-popup-content-wrapper,
.leaflet-popup.loqa-map-popup-wrap .leaflet-popup-content-wrapper {
    background: var(--surface);
    border: 0;
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: none;
    min-width: 248px;
}

.loqa-map-popup-wrap.leaflet-popup .leaflet-popup-tip,
.leaflet-popup.loqa-map-popup-wrap .leaflet-popup-tip {
    background: var(--surface);
    border: 0;
    box-shadow: none;
}

.loqa-map-popup-wrap.leaflet-popup .leaflet-popup-content,
.leaflet-popup.loqa-map-popup-wrap .leaflet-popup-content {
    margin: 0;
    min-width: 248px;
    line-height: 1.4;
}

.catalog-map .leaflet-popup-close-button {
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--muted);
    font-size: 20px;
    line-height: 28px;
    text-align: center;
}

.catalog-map .leaflet-popup-close-button:hover {
    color: var(--ink);
    background: transparent;
}

.loqa-map-popup-link {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    text-decoration: none;
    color: inherit;
}

.loqa-map-popup-img {
    display: block;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    object-fit: cover;
    background: var(--surface-soft);
}

.loqa-map-popup-img--empty {
    background: color-mix(in srgb, var(--brand-sage) 40%, var(--surface));
}

.loqa-map-popup-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.loqa-map-popup-type {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.loqa-map-popup-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.loqa-map-popup-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
}

.flash.warning {
    background: var(--warn-soft);
    color: #6b4f00;
}

/* ——— Mobile app shell ——— */

:root {
    --tab-bar-h: 60px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --app-header-h: 64px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

body.has-tab-bar {
    padding-bottom: calc(var(--tab-bar-h) + var(--safe-bottom));
}

body.has-tab-bar .footer {
    margin-bottom: 0;
    padding-bottom: calc(24px + var(--tab-bar-h) + var(--safe-bottom));
}

body.is-standalone .topbar-inner {
    padding-top: calc(12px + var(--safe-top));
}

.app-tab-bar {
    display: none;
}

@media (max-width: 960px) {
    html {
        scroll-padding-top: calc(var(--app-header-h) + var(--safe-top) + 12px);
    }

    .topbar-inner {
        min-height: var(--app-header-h);
        padding-top: calc(10px + var(--safe-top));
        padding-bottom: 10px;
    }

    .brand-mark {
        font-size: 1.25rem;
    }

    .page-shell {
        padding-left: calc(16px + var(--safe-left));
        padding-right: calc(16px + var(--safe-right));
    }

    .page-head {
        padding-top: clamp(20px, 4vw, 36px);
    }

    .page-head h1 {
        max-width: none;
        font-size: clamp(1.875rem, 8vw, 2.5rem);
    }

    .hero {
        padding-top: clamp(28px, 6vw, 48px);
        padding-bottom: clamp(40px, 8vw, 64px);
        gap: 32px;
    }

    .hero-copy h1 {
        max-width: none;
    }

    .hero-copy .lead {
        font-size: 1rem;
    }

    .search-panel button[type="submit"],
    .filters button[type="submit"],
    .stack-form button[type="submit"],
    .form-actions button,
    .form-actions .button,
    .inline-actions > .button,
    .inline-actions > button,
    .inline-actions > form button {
        width: 100%;
    }

    .search-panel,
    .filter-panel {
        padding: 14px;
    }

    .filters .filter-check {
        padding: 4px 0;
    }

    .filter-check {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.9375rem;
        font-weight: 500;
        min-height: 44px;
    }

    .grid.cards {
        gap: 20px;
    }

    .space-image {
        border-radius: var(--radius);
    }

    .detail-page {
        padding-bottom: calc(96px + var(--tab-bar-h) + var(--safe-bottom));
    }

    body.is-detail-page .booking-box {
        padding: 24px 0 0;
        margin-top: 8px;
    }

    body.is-detail-page .booking-box strong {
        font-size: 1.75rem;
    }

    .mobile-booking-bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--tab-bar-h) + var(--safe-bottom));
        z-index: 260;
        padding: 10px 0;
        background: var(--brand-mist);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .mobile-booking-bar.is-visible {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-booking-bar[hidden] {
        display: block;
    }

    .mobile-booking-bar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .mobile-booking-bar-price strong {
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: -0.03em;
    }

    .mobile-booking-bar-price span {
        font-size: 0.875rem;
        color: var(--muted);
        margin-left: 2px;
    }

    .mobile-booking-bar .button {
        flex-shrink: 0;
        min-width: 132px;
        padding-inline: 22px;
    }

    .mobile-filter-fab {
        display: none !important;
    }

    .flash-wrap {
        position: fixed;
        top: calc(var(--app-header-h) + var(--safe-top) + 8px);
        left: calc(16px + var(--safe-left));
        right: calc(16px + var(--safe-right));
        z-index: 400;
        max-width: none;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

    .flash-wrap .flash {
        pointer-events: auto;
    }

    .flash-wrap.is-dismissed {
        display: none;
    }

    .next-action-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .next-action-banner .button {
        width: 100%;
    }

    .dash-item {
        min-height: 48px;
        padding: 12px 14px;
    }

    .chat-thread {
        max-height: min(42vh, 360px);
    }

    .chat-form {
        position: sticky;
        bottom: calc(var(--tab-bar-h) + var(--safe-bottom) + 8px);
        z-index: 20;
        padding-bottom: 4px;
        background: var(--bg);
    }

    .pagination a,
    .pagination span {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .auth-card {
        margin: clamp(32px, 8vw, 56px) auto;
        padding: clamp(24px, 5vw, 32px);
    }

    .breadcrumbs ol {
        padding-left: calc(16px + var(--safe-left));
        padding-right: calc(16px + var(--safe-right));
    }

    .wallet-buckets {
        gap: 10px;
    }

    .wallet-bucket {
        padding: 14px 16px;
    }

    .wallet-bucket-value {
        font-size: 1.25rem;
    }

    .row-aside {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .facts {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        margin-right: calc(-1 * (16px + var(--safe-right)));
        padding-right: calc(16px + var(--safe-right));
        scrollbar-width: none;
    }

    .facts::-webkit-scrollbar {
        display: none;
    }

    .facts span {
        flex-shrink: 0;
    }

    .footer-inner {
        padding: 40px calc(16px + var(--safe-left)) calc(32px + var(--safe-bottom));
        gap: 20px;
    }

    .footer-links {
        gap: 12px 16px;
    }

    input,
    select,
    textarea,
    .searchbar input,
    .search-panel input,
    .filters input,
    .filter-panel input,
    .stack-form input,
    .form-grid input,
    .stack-form textarea,
    .form-grid textarea {
        font-size: 16px;
    }

    .app-tab-bar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 320;
        min-height: var(--tab-bar-h);
        padding: 6px calc(4px + var(--safe-left)) calc(6px + var(--safe-bottom)) calc(4px + var(--safe-right));
        background: var(--surface);
    }

    .app-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        min-height: 48px;
        border-radius: var(--radius);
        text-decoration: none;
        color: var(--muted);
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.01em;
    }

    .app-tab:active {
        background: color-mix(in srgb, var(--brand-sage) 35%, transparent);
    }

    .app-tab.is-active {
        color: var(--accent);
        background: color-mix(in srgb, var(--brand-sage) 48%, var(--surface));
    }

    .app-tab-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .app-tab-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 22px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    body.nav-open .app-tab-bar,
    body.nav-open .mobile-booking-bar,
    body.filters-open .app-tab-bar,
    body.filters-open .mobile-booking-bar {
        opacity: 0;
        pointer-events: none;
    }
}

@media (min-width: 961px) {
    .mobile-booking-bar {
        display: none !important;
    }

    .app-tab-bar {
        display: none !important;
    }

    body.has-tab-bar {
        padding-bottom: 0;
    }
}

@media (max-width: 380px) {
    .app-tab span {
        font-size: 0.5625rem;
    }

    .app-tab-icon {
        width: 20px;
        height: 20px;
    }
}

/* ——— Brand polish ——— */

.catalog-search {
    display: grid;
    gap: var(--field-gap);
}

.catalog-search--hero {
    margin-top: 28px;
    max-width: 720px;
}

.catalog-search--hero,
.catalog-toolbar .catalog-search {
    padding: 12px;
    background: var(--surface);
    border-radius: var(--radius-xl);
}

.catalog-search-fields {
    display: grid;
    grid-template-columns: minmax(130px, 0.9fr) minmax(0, 1.2fr);
    gap: var(--field-gap);
}

.catalog-search-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.catalog-search-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted);
}

.catalog-search-locked {
    margin: 0;
    padding: 14px 16px;
    background: var(--field-bg);
    border-radius: var(--radius);
    font-weight: 500;
    color: var(--ink);
}

.catalog-search-submit {
    align-self: end;
}

.catalog-toolbar {
    display: grid;
    gap: 16px;
    padding-bottom: 24px;
}

.catalog-toolbar .catalog-search {
    margin-top: 0;
}

.catalog-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}

.catalog-toolbar-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.catalog-tool-btn,
.filters-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    min-height: 48px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.catalog-map-locate {
    background: color-mix(in srgb, var(--brand-sage) 36%, var(--surface));
}

.catalog-map-locate:hover {
    background: color-mix(in srgb, var(--brand-sage) 54%, var(--surface));
}

.catalog-tool-btn svg,
.filters-trigger svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.filters-trigger-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.catalog-toolbar-reset {
    font-size: 0.875rem;
}

.filters-sheet .nav-mobile-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.filters-sheet-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.filters-sheet-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px clamp(20px, 4vw, 24px) 16px;
    flex: 1;
}

.filters-sheet-row {
    display: block;
}

.filters-sheet-control,
.filters-sheet-value {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    color: var(--ink);
    border: 1px solid var(--hairline);
    background-color: var(--field-bg);
}

.filters-sheet-row--static .filters-sheet-value {
    background-color: color-mix(in srgb, var(--brand-sage) 48%, var(--surface));
}

.filters-sheet-row:focus-within .filters-sheet-control,
.filters-sheet-control:focus,
.filters-sheet-control:focus-visible {
    background-color: var(--field-bg-focus);
    border-color: color-mix(in srgb, var(--brand-teal) 24%, var(--hairline));
    outline: none;
}

.filters-sheet-row select.filters-sheet-control {
    background-color: var(--field-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236f6f6a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 42px;
}

.filters-sheet-row:focus-within select.filters-sheet-control,
.filters-sheet-row select.filters-sheet-control:focus,
.filters-sheet-row select.filters-sheet-control:focus-visible {
    background-color: var(--field-bg-focus);
}

.filters-sheet-check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline);
    background-color: var(--field-bg);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
}

.filters-sheet-check:has(input:focus-visible) {
    background-color: var(--field-bg-focus);
    border-color: color-mix(in srgb, var(--brand-teal) 24%, var(--hairline));
}

.filters-sheet-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.filters-sheet-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px clamp(20px, 4vw, 24px) calc(32px + var(--safe-bottom));
}

.filters-sheet-reset {
    text-align: center;
    justify-content: center;
}

.filters-sheet-submit {
    width: 100%;
    margin-top: 4px;
    text-align: center;
    justify-content: center;
    font-size: 1.0625rem !important;
    padding: 16px 24px !important;
}

@media (min-width: 641px) {
    .catalog-search--hero,
    .catalog-toolbar .catalog-search {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }
}

@media (max-width: 640px) {
    .catalog-search-fields {
        grid-template-columns: 1fr;
    }

    .catalog-search-submit,
    .filters-sheet-reset,
    .filters-sheet-submit {
        width: 100%;
    }
}

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--brand-sage) 38%, var(--surface));
    color: var(--ink-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.trust-banner {
    margin: 0 0 20px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--brand-sage) 22%, var(--surface));
}

.trust-banner--compact {
    margin-top: 0;
}

.trust-banner-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.trust-banner-item strong {
    display: block;
    font-size: 0.9375rem;
}

.trust-banner-item span {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.trust-banner-foot {
    margin: 14px 0 0;
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.compare-calculator {
    margin: 28px 0;
    padding: 20px 22px;
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.compare-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-top: 14px;
}

.compare-card {
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--brand-sage) 24%, var(--surface));
}

.compare-card--loqa {
    background: color-mix(in srgb, var(--brand-sage) 44%, var(--surface));
}

.compare-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.compare-price {
    display: block;
    margin-top: 6px;
    font-size: 1.25rem;
}

.compare-note {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.compare-months {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    font-size: 0.875rem;
}

.host-wizard-steps {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.host-wizard-step {
    flex: 1;
    min-width: 120px;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    border: 0;
    background: var(--chip-bg);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.host-wizard-step.is-active {
    background: color-mix(in srgb, var(--brand-sage) 56%, var(--surface));
    color: var(--ink);
}

.host-wizard-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.supply-campaign {
    margin-top: 24px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--brand-sand) 30%, var(--surface));
}

.push-fieldset {
    margin-top: 8px;
}

.blog-list {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.blog-card {
    padding: 22px 24px;
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.blog-card h2 {
    font-size: 1.25rem;
}

.blog-card a {
    text-decoration: none;
}

.blog-card a:hover h2 {
    color: var(--accent);
}

.blog-article {
    max-width: 720px;
}

.blog-article p + p {
    margin-top: 16px;
}

.blog-article h2 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 1.375rem;
}

.referral-code {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: var(--chip-bg);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.host-income-calc {
    margin-top: 24px;
}

.push-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.seo-landing-content {
    display: grid;
    gap: 24px;
    margin-bottom: 8px;
}

.seo-landing-faq h2 {
    margin-bottom: 12px;
}

.faq-list {
    display: grid;
    gap: 14px;
}

.faq-item dt {
    font-weight: 600;
    margin-bottom: 4px;
}

.faq-item dd {
    margin: 0;
    color: var(--ink-soft);
}

.seo-landing-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.host-block-calendar {
    margin-top: 10px;
}

.host-block-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.host-block-calendar-weekdays,
.host-block-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.host-block-calendar-weekdays span {
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted);
}

.host-block-calendar-day {
    min-height: 38px;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.host-block-calendar-day.is-blocked {
    background: color-mix(in srgb, var(--brand-clay) 35%, var(--surface));
    border-color: color-mix(in srgb, var(--brand-clay) 45%, transparent);
    font-weight: 600;
}

.host-block-calendar-day.is-past,
.host-block-calendar-day:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.host-block-calendar-day--empty {
    border: none;
    background: transparent;
    min-height: 0;
}

.blocked-dates-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.blocked-dates-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-sage) 20%, var(--surface));
}

.favorite-form {
    margin-bottom: 12px;
}

.field-label--checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.field-label--checkbox input {
    margin-top: 4px;
}

.handover-shell h2 {
    margin-bottom: 8px;
}

.handover-status {
    margin: 12px 0 16px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-sand) 40%, var(--surface));
}

.handover-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.handover-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}

.handover-photo figcaption {
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--muted);
}

.handover-checklist {
    margin-top: 16px;
}

.occupancy-meter {
    margin: 14px 0 18px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-sage) 28%, var(--surface));
}

.occupancy-meter-bar {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-sand) 55%, var(--surface));
    overflow: hidden;
    margin-top: 8px;
}

.occupancy-meter-bar span {
    display: block;
    height: 100%;
    background: var(--brand-sage);
    border-radius: 999px;
    transition: width 0.25s ease;
}

.occupancy-meter--unavailable {
    background: color-mix(in srgb, var(--brand-clay) 22%, var(--surface));
}

.occupancy-meter--unavailable .occupancy-meter-bar span {
    background: var(--brand-clay);
}

.occupancy-meter--full .occupancy-meter-bar span {
    background: color-mix(in srgb, var(--brand-clay) 70%, var(--brand-sage));
}

#booking-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.inventory-fields .inventory-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.inventory-row {
    display: grid;
    grid-template-columns: 1fr 72px 72px auto;
    gap: 8px;
    align-items: center;
}

.inventory-table-row {
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.inventory-item-photos {
    display: flex;
    gap: 8px;
    margin: 8px 0;
    flex-wrap: wrap;
}

.inventory-item-photos img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius);
}

.contract-preview {
    padding: 20px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-sand) 35%, var(--surface));
}

@media (max-width: 640px) {
    .inventory-row {
        grid-template-columns: 1fr;
    }
}