:root {
            --primary: #1dbf73;
            --primary-dark: #16a159;
            --dark: #111827;
            --light: #f9fafb;
            --gray: #6b7280;
            --border: #e5e7eb;
            --danger-bg: #fef2f2;
            --danger-border: #fecaca;
            --danger-text: #b91c1c;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            background: radial-gradient(circle at top left, #ecfdf3 0, #f9fafb 35%, #eef2ff 100%);
            color: var(--dark);
        }

        a {
            color: inherit;
        }


/* ---------- NAVBAR ---------- */

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}

.navbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* BRAND */
.navbar-brand {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.navbar-logo {
    font-weight: 800;
    font-size: 1.15rem;
    text-decoration: none;
    color: #f9fafb;
    white-space: nowrap;
}

.navbar-logo span {
    color: var(--primary);
}

.navbar-tagline {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* RIGHT */
.navbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* MENU */
.navbar-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.navbar-links a {
    font-size: 0.9rem;
    text-decoration: none;
    color: #e5e7eb;
    white-space: nowrap;
}

.navbar-links a:hover {
    color: #ffffff;
}

/* AUTH */
.navbar-auth {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.navbar-username {
    color: #9ca3af;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-ghost {
    background: transparent;
    color: #e5e7eb;
    border-color: rgba(156, 163, 175, 0.4);
}

.btn-ghost:hover {
    border-color: #e5e7eb;
}

/* TOGGLE BUTTON */
.navbar-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.4);
    border-radius: 999px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}

.navbar-toggle span {
    display: block;
    width: 1rem;
    height: 2px;
    background: #e5e7eb;
    border-radius: 999px;
}

/* ---------- CONTAINER ---------- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.2rem 1rem;
}

/* ---------- FOOTER ---------- */
footer {
    border-top: 1px solid rgba(55, 65, 81, 0.5);
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #9ca3af;
}

footer a {
    color: #9ca3af;
}

footer a:hover {
    color: #ffffff;
}

/* ---------- MOBILE FIX ---------- */
@media (max-width: 768px) {

    .navbar-inner {
        flex-wrap: wrap;
    }

    .navbar-tagline {
        display: none;
    }

    .navbar-toggle {
        display: inline-flex;
    }

    .navbar-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
        padding-top: 0.8rem;
        border-top: 1px solid rgba(55, 65, 81, 0.7);
        margin-top: 0.6rem;
    }

    .navbar-menu.open {
        display: flex;
    }

    .navbar-links {
        flex-direction: column;
        width: 100%;
    }

    .navbar-links a {
        display: block;
        width: 100%;
        padding: 0.65rem 0.8rem;
        border-radius: 0.65rem;
        background: rgba(255, 255, 255, 0.03);
    }

    .navbar-auth {
        flex-direction: column;
        width: 100%;
    }

    .navbar-auth .btn,
    .navbar-auth form,
    .navbar-auth form button {
        width: 100%;
    }
}


        /* ---------- LAYOUT ---------- */

        .container {
            max-width: 1100px;
            margin: 1.8rem auto 3rem;
            padding: 0 1rem;
        }

        main {
            min-height: 70vh;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .page-title {
            margin: 0;
            font-size: 1.75rem;
            letter-spacing: -0.02em;
        }

        .page-subtitle {
            margin-top: 0.4rem;
            margin-bottom: 0;
            color: var(--gray);
            font-size: 0.95rem;
        }

        .page-header-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.15rem 0.6rem;
            border-radius: 999px;
            font-size: 0.75rem;
        }

        .badge-soft {
            background: rgba(15, 23, 42, 0.06);
            color: #374151;
        }

        /* ---------- CARDS / SECTIONS ---------- */

        .section-card {
            background: rgba(255, 255, 255, 0.98);
            border-radius: 0.9rem;
            padding: 1.25rem 1.4rem;
            border: 1px solid rgba(209, 213, 219, 0.8);
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
            margin-bottom: 1.25rem;
        }

        .section-header {
            margin-bottom: 0.75rem;
        }

        .section-title {
            margin: 0;
            font-size: 1.1rem;
        }

        .section-caption {
            margin: 0.3rem 0 0;
            font-size: 0.9rem;
            color: var(--gray);
        }

        .section-text {
            margin: 0.3rem 0;
            font-size: 0.95rem;
        }

        .notice {
            font-size: 0.86rem;
            background: var(--danger-bg);
            border: 1px solid var(--danger-border);
            color: var(--danger-text);
            border-radius: 0.75rem;
            padding: 0.7rem 0.9rem;
            margin-bottom: 1rem;
        }

        .impersonation-banner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.8rem 1rem;
            border: 1px solid #facc15;
            border-radius: 8px;
            background: #fffbeb;
            color: #713f12;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
        }

        .impersonation-banner strong,
        .impersonation-banner span {
            display: block;
        }

        .impersonation-banner form {
            margin: 0;
        }

        /* ---------- HERO / SEARCH ---------- */

        .hero {
            margin-bottom: 1.5rem;
        }

        .hero h2 {
            margin: 0;
            font-size: 1.3rem;
        }

        .hero-search {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 0.9rem 0;
        }

        .search-input {
            flex: 1 1 220px;
            border-radius: 999px;
            border: 1px solid var(--border);
            padding: 0.5rem 0.85rem;
            font-size: 0.9rem;
        }

        .search-select {
            flex: 0 0 150px;
            border-radius: 999px;
            border: 1px solid var(--border);
            padding: 0.5rem 0.85rem;
            font-size: 0.9rem;
            background: #ffffff;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 0;
        }

        /* ---------- GRID / LISTINGS ---------- */

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

        .card {
            background: #ffffff;
            border-radius: 0.9rem;
            padding: 0.9rem 1rem;
            border: 1px solid rgba(209, 213, 219, 0.9);
            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
        }

        .listing-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 0.5rem;
            margin-bottom: 0.35rem;
        }

        .listing-pair {
            font-weight: 600;
            font-size: 0.98rem;
        }

        .listing-location {
            font-size: 0.85rem;
            color: var(--gray);
        }

        .listing-meta {
            margin: 0.25rem 0;
            font-size: 0.82rem;
            color: var(--gray);
        }

        .listing-btn {
            font-size: 0.85rem;
            padding-inline: 0.8rem;
        }

        /* Thumbnail in cards / My listings */
        .listing-thumb {
            width: 64px;
            height: 64px;
            border-radius: 0.6rem;
            object-fit: cover;
            border: 1px solid var(--border);
        }

        .category-chips {
            list-style: none;
            padding: 0;
            margin: 0.25rem 0 0;
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;
        }

        .category-chips li {
            background: rgba(15, 23, 42, 0.04);
            border-radius: 999px;
            padding: 0.15rem 0.5rem;
            font-size: 0.75rem;
            color: #374151;
        }

        .type-pill {
            display: inline-flex;
            align-items: center;
            padding: 0.1rem 0.55rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .type-pill-service {
            background: #ecfdf3;
            color: #166534;
        }

        .type-pill-job {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .type-pill-news {
            background: #fefce8;
            color: #854d0e;
        }

        /* ---------- DETAIL LAYOUT ---------- */

        .detail-layout {
            display: grid;
            grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
            gap: 1.2rem;
        }

        .detail-img {
            max-width: 100%;
            border-radius: 0.75rem;
            border: 1px solid var(--border);
            margin-bottom: 0.75rem;
        }

        .detail-title {
            margin-top: 0;
            margin-bottom: 0.35rem;
            font-size: 1.3rem;
        }

        .detail-subtitle {
            margin-top: 1rem;
            margin-bottom: 0.35rem;
            font-size: 1rem;
        }

        .detail-sidebar {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .sidebar-card {
            background: #f9fafb;
            border-radius: 0.75rem;
            padding: 0.75rem 0.9rem;
            border: 1px solid var(--border);
        }

        .sidebar-title {
            margin: 0 0 0.35rem;
            font-size: 0.95rem;
        }

        .text-muted {
            color: var(--gray);
        }

        .small {
            font-size: 0.83rem;
        }

        .contact-list {
            list-style: none;
            padding: 0;
            margin: 0.2rem 0 0;
            font-size: 0.85rem;
        }

        .contact-list li {
            margin-bottom: 0.25rem;
        }

        .contact-label {
            display: inline-block;
            min-width: 3.5rem;
            font-weight: 600;
        }

        .sidebar-hint {
            background: #ecfdf3;
            border-color: #bbf7d0;
        }

        .hint-list {
            margin: 0.25rem 0 0;
            padding-left: 1.1rem;
            font-size: 0.82rem;
        }

        /* ---------- FORM UTILS ---------- */

        .form-card {
            background: #ffffff;
            border-radius: 0.9rem;
            padding: 1.25rem 1.4rem;
            border: 1px solid rgba(209, 213, 219, 0.9);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        }

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

        .field-group {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .field-label {
            font-size: 0.85rem;
            font-weight: 600;
        }

        .required {
            color: #dc2626;
        }

        .form-card input[type="text"],
        .form-card input[type="email"],
        .form-card input[type="number"],
        .form-card textarea,
        .form-card select {
            border-radius: 0.6rem;
            border: 1px solid var(--border);
            padding: 0.45rem 0.7rem;
            font-size: 0.9rem;
        }

        .form-actions {
            margin-top: 1rem;
        }

        .checkbox-label {
            display: flex;
            align-items: flex-start;
            gap: 0.45rem;
            font-size: 0.85rem;
        }

        .checkbox-label input[type="checkbox"] {
            margin-top: 0.2rem;
        }

        .form-errors {
            background: var(--danger-bg);
            border: 1px solid var(--danger-border);
            color: var(--danger-text);
            padding: 0.6rem 0.8rem;
            border-radius: 0.6rem;
            margin-bottom: 0.9rem;
            font-size: 0.85rem;
        }

        /* ---------- FOOTER ---------- */

        footer {
            padding: 1.6rem 1rem 2rem;
            border-top: 1px solid rgba(209, 213, 219, 0.7);
            background: rgba(249, 250, 251, 0.96);
            font-size: 0.85rem;
            color: var(--gray);
            text-align: center;
        }

        footer a {
            color: var(--primary-dark);
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        /* ---------- UTIL ---------- */

        .mt-1 { margin-top: 0.5rem; }
        .mt-2 { margin-top: 0.75rem; }
        .mt-3 { margin-top: 1.2rem; }

        /* ---------- RESPONSIVE ---------- */

        @media (max-width: 900px) {
            .detail-layout {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        @media (max-width: 768px) {
            .navbar-inner {
                flex-wrap: wrap;
                align-items: center;
            }

            .navbar-menu {
                display: none;
                width: 100%;
                flex-direction: column;
                align-items: flex-start;
                padding-top: 0.6rem;
                border-top: 1px solid rgba(55, 65, 81, 0.7);
                margin-top: 0.4rem;
            }

            .navbar-menu.open {
                display: flex;
            }

            .navbar-links {
                flex-wrap: wrap;
            }

            .navbar-right {
                width: 100%;
                justify-content: space-between;
            }

            .navbar-toggle {
                display: inline-flex;
            }

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

            .page-header {
                flex-direction: column;
            }
        }
		.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.field-col {
    display: flex;
    flex-direction: column;
}

.auth-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    padding: 1.4rem 0 2rem;
}

.auth-page::before,
.auth-page::after {
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    background: rgba(18, 183, 106, 0.1);
    content: "";
}

.auth-page::before {
    left: 6vw;
    top: 30vh;
    width: 42px;
    height: 42px;
}

.auth-page::after {
    right: 7vw;
    bottom: 22vh;
    width: 58px;
    height: 58px;
}

.auth-card {
    width: 100%;
    max-width: 720px;
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(209, 213, 219, 0.9);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.auth-card-wide {
    max-width: 900px;
}

.auth-register-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 2rem;
    max-width: 1180px;
    padding: 2.6rem;
    border-radius: 1.25rem;
}

.auth-main-panel h1,
.auth-login-form-panel h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2rem, 4vw, 3rem);
}

.heading-underline {
    display: block;
    width: 28px;
    height: 3px;
    margin: 0.75rem 0 0;
    border-radius: 999px;
    background: var(--primary);
}

.auth-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 1.4rem;
    align-items: center;
    margin-bottom: 1.4rem;
}

.auth-illustration {
    position: relative;
    height: 112px;
    overflow: hidden;
    border-radius: 1rem;
    background:
        radial-gradient(circle at 70% 38%, rgba(18, 183, 106, 0.14) 0 3rem, transparent 3.1rem),
        linear-gradient(135deg, #f0fbf6, #ffffff);
}

.auth-illustration span {
    position: absolute;
    left: 48px;
    top: 26px;
    width: 138px;
    height: 70px;
    border-radius: 0.8rem;
    background: #dff4eb;
    box-shadow: inset 0 12px 0 rgba(18, 183, 106, 0.22);
}

.auth-illustration span::before {
    position: absolute;
    left: 22px;
    top: 25px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #6cc99a;
    content: "";
}

.auth-illustration i {
    position: absolute;
    right: 35px;
    bottom: 18px;
    width: 44px;
    height: 52px;
    border-radius: 0 0 18px 18px;
    background: var(--primary);
    transform: rotate(-8deg);
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    min-height: 50px;
    border-radius: 0.65rem;
    border: 1px solid #cfd8e3;
    padding: 0.65rem 0.9rem;
    color: var(--ink);
    font-size: 0.95rem;
}

.auth-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.12);
    outline: none;
}

.registration-error-summary {
    margin-bottom: 1.15rem;
    padding: 1rem 1.1rem;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    background: #fef2f2;
    color: #7f1d1d;
    overflow-wrap: anywhere;
}

.registration-error-summary:focus {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
    outline: none;
}

.registration-error-summary h2 {
    margin: 0;
    color: #991b1b;
    font-size: 1rem;
}

.registration-error-summary p {
    margin: 0.35rem 0 0;
    line-height: 1.45;
}

.registration-error-summary ul,
.registration-field-errors {
    margin: 0.65rem 0 0;
    padding-left: 1.2rem;
}

.registration-error-summary li + li,
.registration-field-errors li + li {
    margin-top: 0.35rem;
}

.registration-error-summary a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.registration-field-errors {
    color: #b91c1c;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.auth-form .field-has-error input {
    border-color: #dc2626;
    background: #fffafa;
}

.auth-form .field-has-error input:focus {
    border-color: #b91c1c;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

.auth-benefits-panel {
    align-self: start;
    padding: 1.8rem 1.55rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.auth-benefits-panel h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.35rem;
}

.auth-benefit-list {
    display: grid;
    margin-top: 1.4rem;
}

.auth-benefit {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.auth-benefit span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #e6f8ef;
    color: var(--primary-dark);
    font-weight: 950;
}

.auth-benefit strong,
.auth-benefit p {
    display: block;
    margin: 0;
}

.auth-benefit strong {
    color: var(--ink);
}

.auth-benefit p {
    margin-top: 0.25rem;
    color: var(--muted);
    line-height: 1.35;
}

.auth-trust-box {
    margin-top: 1.6rem;
    padding: 1.1rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, #e8f8ef, #f5fbff);
}

.auth-trust-box strong {
    color: var(--primary-dark);
}

.auth-trust-box p {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.auth-login-card {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(320px, 1.15fr);
    max-width: 960px;
    padding: 0;
    overflow: hidden;
}

.auth-login-form-panel {
    padding: 2rem;
}

.auth-login-visual {
    position: relative;
    min-height: 350px;
    overflow: hidden;
    background: linear-gradient(180deg, #dff8ec, #e9f6ff);
}

.visual-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.9) 0 5rem, transparent 5.1rem),
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.8) 0 3rem, transparent 3.1rem);
}

.visual-water {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32%;
    background: linear-gradient(90deg, #3bd3df, #b8f3ff);
}

.visual-city {
    position: absolute;
    left: 12%;
    right: 10%;
    bottom: 28%;
    height: 38%;
    border-radius: 24px 24px 4px 4px;
    background:
        linear-gradient(90deg, #e6c38b 0 15%, #f1d9a6 15% 32%, #cfa36d 32% 47%, #f6e0b1 47% 72%, #d2a875 72%),
        linear-gradient(#f6e0b1, #d0a16b);
    box-shadow: -42px 54px 0 -28px #27b57a, 58px -42px 0 -22px #d0a16b;
}

.remember-line {
    margin-top: 0.85rem;
    color: var(--muted);
}

.auth-support-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.4rem;
}

.auth-support-row a,
.auth-footer-text a {
    color: var(--primary-dark);
    font-weight: 800;
    text-decoration: none;
}

.auth-support-row a:hover,
.auth-support-row a:focus-visible,
.auth-footer-text a:hover,
.auth-footer-text a:focus-visible {
    text-decoration: underline;
}

.auth-reset-card {
    max-width: 560px;
    padding: clamp(1.35rem, 4vw, 2.25rem);
}

.auth-reset-card h1 {
    margin: 0;
    color: var(--ink);
    font-size: 2rem;
    line-height: 1.15;
}

.auth-privacy-note,
.password-guidance,
.auth-footer-text {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.auth-privacy-note {
    margin: 0.9rem 0 0;
}

.password-guidance ul {
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
}

.auth-footer-text {
    margin: 1rem 0 0;
    text-align: center;
}

.auth-subtitle,
.section-caption small {
    color: var(--gray);
}

.w-100 {
    width: 100%;
}

.form-card small {
    color: var(--gray);
    font-size: 0.82rem;
}

.form-card ul.errorlist {
    margin: 0.3rem 0 0;
    padding-left: 1rem;
    color: #b91c1c;
    font-size: 0.82rem;
}

.terms-checkbox {
    align-items: flex-start;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: #f8fbfd;
    color: #344054;
    line-height: 1.5;
}

.terms-checkbox a,
.auth-form .small a {
    color: var(--primary-dark);
    font-weight: 800;
}

.signup-terms-block {
    margin-top: 1.25rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.terms-intro h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.45rem;
}

.terms-intro p {
    margin: 0.45rem 0 0.9rem;
    color: var(--muted);
}

.terms-scroll-box {
    max-height: 340px;
    overflow-y: auto;
    padding: 1.2rem 1.35rem;
    border: 1px solid #cfd8e3;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #344054;
    line-height: 1.62;
}

.terms-scroll-box:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.12);
    outline: none;
}

.terms-scroll-box h3 {
    margin: 1.1rem 0 0.45rem;
    color: var(--ink);
    font-size: 1.1rem;
}

.terms-scroll-box h3:first-of-type {
    margin-top: 0.4rem;
}

.terms-scroll-box p {
    margin: 0 0 0.75rem;
}

.terms-lead {
    color: var(--muted);
    font-weight: 700;
}

.signup-terms-block .terms-checkbox {
    margin-top: 0.9rem;
}

.terms-accept-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.9rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: #f8fbfd;
    color: #344054;
    line-height: 1.5;
}

.terms-accept-line .terms-checkbox {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.terms-popup-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: #f8fbfd;
}

.terms-popup-prompt p {
    margin: 0;
    color: var(--muted);
}

.terms-open-button,
.terms-inline-button {
    border: 0;
    background: transparent;
    color: var(--primary-dark);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.terms-open-button {
    min-height: 42px;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--primary);
    border-radius: 0.7rem;
    background: #e6f8ef;
    text-decoration: none;
    white-space: nowrap;
}

.terms-modal {
    width: min(920px, calc(100vw - 2rem));
    max-height: min(760px, calc(100vh - 2rem));
    padding: 0;
    border: 0;
    border-radius: 1rem;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 28px 80px rgba(7, 17, 35, 0.35);
}

.terms-modal::backdrop {
    background: rgba(7, 17, 35, 0.62);
    backdrop-filter: blur(3px);
}

.terms-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.65rem 1rem;
    border-bottom: 1px solid var(--line);
}

.terms-modal-header h2 {
    margin: 0;
    font-size: 1.65rem;
}

.terms-modal-header p {
    margin: 0.45rem 0 0;
    color: var(--muted);
}

.terms-close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
}

.terms-scroll-box-modal {
    max-height: min(430px, calc(100vh - 260px));
    margin: 1rem 1.65rem;
    border-radius: 0.6rem;
}

.terms-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0 1.65rem 1.4rem;
}

@media (max-width: 680px) {
    .terms-popup-prompt {
        align-items: stretch;
        flex-direction: column;
    }

    .terms-open-button {
        width: 100%;
    }

    .terms-modal-actions {
        flex-direction: column;
    }
}

@media (max-width: 980px) {
    .auth-register-card,
    .auth-login-card,
    .auth-heading-row {
        grid-template-columns: 1fr;
    }

    .auth-benefits-panel {
        order: 2;
    }

    .auth-illustration {
        min-height: 120px;
    }
}

@media (max-width: 620px) {
    .auth-register-card,
    .auth-login-form-panel {
        padding: 1.35rem;
    }

    .auth-card {
        border-radius: 1rem;
    }

    .auth-main-panel h1,
    .auth-login-form-panel h1 {
        font-size: 2rem;
    }

    .auth-login-visual {
        min-height: 240px;
    }
}

@media (max-width: 768px) {
    .field-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.chip-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.chip-group li {
    margin: 0;
}

.chip-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    cursor: pointer;
    font-size: 0.88rem;
    transition: all 0.2s ease;
}

.chip-group label:hover {
    border-color: var(--primary);
    background: #f0fdf4;
}

.chip-group input[type="checkbox"] {
    margin: 0;
}

.chip-group input[type="checkbox"]:checked + span,
.chip-group label:has(input[type="checkbox"]:checked) {
    border-color: var(--primary);
    background: #ecfdf3;
    color: #166534;
    font-weight: 600;
}

.chip-group.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.category-choice-section {
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.category-choice-section + .category-choice-section {
    margin-top: 0.75rem;
}

.category-choice-section > strong {
    color: #0f172a;
    font-size: 0.86rem;
}

.category-choice-section ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-choice-section label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.4rem 0.7rem;
    border: 1px solid #d6e3dc;
    border-radius: 999px;
    background: #ffffff;
    color: #344054;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.category-choice-section input {
    accent-color: var(--primary);
}

.category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.25rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #ffffff;
    text-decoration: none;
    font-size: 0.88rem;
    color: var(--dark);
    transition: all 0.2s ease;
}

.chip:hover {
    border-color: var(--primary);
    background: #ecfdf3;
    color: #166534;
}

.active-chip {
    border-color: var(--primary);
    background: #ecfdf3;
    color: #166534;
    font-weight: 600;
}

.category-filter-modern {
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem 0 0.4rem;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

.category-filter-modern .chip {
    flex: 0 0 auto;
    min-height: 40px;
    border-color: #d6e3dc;
    background: #ffffff;
    color: #344054;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.category-filter-modern .active-chip {
    border-color: var(--primary);
    background: #e6f8ef;
    color: var(--primary-dark);
    box-shadow: 0 10px 22px rgba(22, 161, 89, 0.16);
}

.subcategory-filter-modern {
    margin-top: 0.55rem;
    padding-left: 0.1rem;
}

.subcategory-filter-modern .chip {
    min-height: 34px;
    font-size: 0.84rem;
    box-shadow: none;
}

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

.listing-card {
    display: block;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid rgba(209, 213, 219, 0.9);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.listing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
    border-color: rgba(29, 191, 115, 0.35);
}

.card-media {
    width: 100%;
    height: 180px;
    background: #f3f4f6;
    overflow: hidden;
}

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

.image-fallback-placeholder {
    display: none;
}

.placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ecfdf3, #eef2ff);
    color: #374151;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 1rem;
}

.card-body {
    padding: 1rem;
}

.card-body h2 {
    margin: 0.55rem 0 0.45rem;
    font-size: 1.02rem;
    line-height: 1.35;
}

.card-body p {
    margin: 0;
    color: var(--gray);
    font-size: 0.9rem;
    line-height: 1.45;
}

.meta {
    margin-top: 0.7rem;
    font-size: 0.82rem;
    color: var(--gray);
}

.chip-small {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    font-size: 0.72rem;
    margin-right: 0.35rem;
    margin-top: 0.35rem;
    color: #374151;
}

.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    background: #ffffff;
    border: 1px solid rgba(209, 213, 219, 0.8);
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.empty-state h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.empty-state p {
    margin: 0;
    color: var(--gray);
}

.detail-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.detail-page-title {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.detail-meta-line {
    margin-top: 0.55rem;
    font-size: 0.92rem;
    color: var(--gray);
}

.detail-hero-image {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
    display: block;
}

.detail-placeholder {
    width: 100%;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #ecfdf3, #eef2ff);
    color: #374151;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 1rem;
}

.detail-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.detail-gallery img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    display: block;
}

.detail-copy {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #1f2937;
}

.detail-copy p {
    margin-top: 0;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    font-size: 0.92rem;
}

.detail-info-grid div {
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.7rem 0.85rem;
}

@media (max-width: 768px) {
    .detail-page-title {
        font-size: 1.55rem;
    }

    .detail-gallery {
        grid-template-columns: 1fr;
    }

    .detail-info-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-grid {
    display: grid;
    gap: 1rem;
}

.dashboard-card {
    background: #ffffff;
    border: 1px solid rgba(209, 213, 219, 0.9);
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.dashboard-card-top {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.dashboard-card-media {
    width: 100%;
    height: 140px;
    border-radius: 0.85rem;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid var(--border);
}

.dashboard-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dashboard-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ecfdf3, #eef2ff);
    color: #374151;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem;
    letter-spacing: 0.04em;
}

.dashboard-card-body {
    min-width: 0;
}

.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}

.dashboard-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.dashboard-meta {
    margin-top: 0.25rem;
    color: var(--gray);
    font-size: 0.85rem;
}

.dashboard-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-active {
    background: #ecfdf3;
    color: #166534;
}

.status-expired {
    background: #fff7ed;
    color: #c2410c;
}

.status-inactive {
    background: #f3f4f6;
    color: #374151;
}

.dashboard-description {
    margin: 0.75rem 0 0;
    color: #4b5563;
    font-size: 0.92rem;
    line-height: 1.5;
}

.dashboard-category-row {
    margin-top: 0.65rem;
}

.dashboard-analytics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
    color: #64748b;
    font-size: 0.82rem;
}

.dashboard-analytics-row span {
    padding: 0.28rem 0.48rem;
    border-radius: 999px;
    background: #f1f5f9;
}

.dashboard-analytics-row strong {
    color: var(--ink);
}

.dashboard-extra {
    margin-top: 0.65rem;
    font-size: 0.85rem;
    color: #374151;
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem 1rem 1rem;
}

@media (max-width: 768px) {
    .dashboard-card-top {
        grid-template-columns: 1fr;
    }

    .dashboard-card-media {
        height: 180px;
    }

    .dashboard-card-header {
        flex-direction: column;
    }

    .dashboard-badges {
        justify-content: flex-start;
    }
}

.field-has-error input,
.field-has-error select,
.field-has-error textarea {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.field-error-text {
    color: #b91c1c;
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

.report-card {
    border: 1px solid rgba(220, 38, 38, 0.18);
    background: #fffafa;
}

.report-card .sidebar-title {
    color: #991b1b;
}

.report-card .btn {
    margin-top: 0.35rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-active {
    background: #ecfdf3;
    color: #166534;
}

.status-expired {
    background: #fff7ed;
    color: #c2410c;
}

.status-inactive {
    background: #f3f4f6;
    color: #374151;
}

.status-flagged {
    background: #fef2f2;
    color: #b91c1c;
}

.status-rejected {
    background: #fdf2f8;
    color: #be185d;
}

.status-removed {
    background: #111827;
    color: #ffffff;
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.detail-page-title {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.2;
}

.detail-meta-line {
    margin-top: 0.45rem;
    color: var(--gray);
    font-size: 0.92rem;
}

.detail-hero-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
    display: block;
}

.detail-placeholder {
    width: 100%;
    min-height: 260px;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ecfdf3, #eef2ff);
    color: #374151;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 1rem;
}

.detail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.detail-gallery img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    display: block;
}

.detail-copy {
    color: #374151;
    line-height: 1.7;
    font-size: 0.95rem;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 0.85rem;
    font-size: 0.92rem;
    color: #374151;
}

.dashboard-grid {
    display: grid;
    gap: 1rem;
}

.dashboard-card {
    background: #ffffff;
    border: 1px solid rgba(209, 213, 219, 0.9);
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.dashboard-card-top {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.dashboard-card-media {
    width: 100%;
    height: 140px;
    border-radius: 0.85rem;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid var(--border);
}

.dashboard-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dashboard-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ecfdf3, #eef2ff);
    color: #374151;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem;
    letter-spacing: 0.04em;
}

.dashboard-card-body {
    min-width: 0;
}

.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}

.dashboard-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.dashboard-meta {
    margin-top: 0.25rem;
    color: var(--gray);
    font-size: 0.85rem;
}

.dashboard-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.dashboard-description {
    margin: 0.75rem 0 0;
    color: #4b5563;
    font-size: 0.92rem;
    line-height: 1.5;
}

.dashboard-category-row {
    margin-top: 0.65rem;
}

.dashboard-analytics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
    color: #64748b;
    font-size: 0.82rem;
}

.dashboard-analytics-row span {
    padding: 0.28rem 0.48rem;
    border-radius: 999px;
    background: #f1f5f9;
}

.dashboard-analytics-row strong {
    color: var(--ink);
}

.dashboard-extra {
    margin-top: 0.65rem;
    font-size: 0.85rem;
    color: #374151;
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem 1rem 1rem;
}

@media (max-width: 768px) {
    .dashboard-card-top {
        grid-template-columns: 1fr;
    }

    .dashboard-card-media {
        height: 180px;
    }

    .dashboard-card-header {
        flex-direction: column;
    }

    .dashboard-badges {
        justify-content: flex-start;
    }
}

.admin-note-box {
    background: #fffbeb;
    border: 1px solid #facc15;
    color: #92400e;
    padding: 0.7rem 0.85rem;
    border-radius: 0.7rem;
    font-size: 0.85rem;
    margin-top: 0.65rem;
}

.flag-warning {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 0.7rem 0.85rem;
    border-radius: 0.7rem;
    font-size: 0.85rem;
    margin-top: 0.65rem;
}

.removed-warning {
    background: #111827;
    border: 1px solid #111827;
    color: #ffffff;
    padding: 0.7rem 0.85rem;
    border-radius: 0.7rem;
    font-size: 0.85rem;
    margin-top: 0.65rem;
}

.report-card {
    border: 1px solid rgba(220, 38, 38, 0.22);
    background: #fff5f5;
}

.report-card .sidebar-title {
    color: #b91c1c;
}

.report-card .btn-ghost {
    border-color: rgba(220, 38, 38, 0.35);
    color: #b91c1c;
}

.report-card .btn-ghost:hover {
    background: #b91c1c;
    color: #ffffff;
    border-color: #b91c1c;
}

.site-message {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.92rem;
    border: 1px solid transparent;
}

/* ERROR (suspension, etc) */
.site-message-error {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* SUCCESS */
.site-message-success {
    background: #ecfdf3;
    color: #166534;
    border-color: #bbf7d0;
}

/* WARNING */
.site-message-warning {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

/* INFO */
.site-message-info {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

/* Template utility classes */
.city-search-input {
    flex: 0 0 180px;
}

.inline-form {
    display: inline;
}

.listing-summary-row {
    display: flex;
    gap: 0.75rem;
}

.listing-summary-body {
    flex: 1;
}

.messages-container {
    margin-top: 1rem;
}

.flash-message {
    padding: 0.8rem 1rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fecaca;
}

/* Professional marketplace refresh */
:root {
    --primary: #12b76a;
    --primary-dark: #079455;
    --ink: #071123;
    --muted: #667085;
    --line: #d9e2ec;
    --panel: #ffffff;
    --soft: #f6faf8;
    --shadow-sm: 0 8px 22px rgba(15, 23, 42, 0.07);
    --shadow-md: 0 18px 48px rgba(15, 23, 42, 0.11);
}

body {
    background:
        radial-gradient(circle at 9% 12%, rgba(18, 183, 106, 0.13), transparent 22rem),
        radial-gradient(circle at 88% 17%, rgba(84, 168, 255, 0.13), transparent 24rem),
        #f8fbfd;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-shell {
    max-width: 1390px;
    margin: 0 auto;
    padding: 0 1rem;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 60;
    margin-top: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}

.navbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.05rem 1.35rem;
    border-radius: 0 0 1.6rem 1.6rem;
    background: linear-gradient(135deg, #071123 0%, #0d1a2e 100%);
    box-shadow: var(--shadow-md);
    gap: 1rem;
}

.navbar-brand {
    display: grid;
    grid-template-columns: 38px auto;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    align-items: center;
    flex: 0 1 320px;
    min-width: 230px;
}

.brand-mark {
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, transparent 33%, #12b76a 33% 66%, transparent 66%),
        linear-gradient(0deg, #36bffa 33%, transparent 33% 66%, #22c55e 66%);
    box-shadow: inset 0 0 0 7px rgba(7, 17, 35, 0.12);
}

.navbar-logo {
    font-size: 1.28rem;
    line-height: 1;
}

.navbar-tagline {
    color: #b7c3d7;
    font-size: 0.78rem;
    max-width: 100%;
}

.navbar-right {
    min-width: 0;
}

.navbar-menu {
    min-width: 0;
}

.navbar-links {
    min-width: 0;
}

.navbar-links a {
    position: relative;
    color: #f8fafc;
    font-weight: 700;
    padding: 0.45rem 0.25rem;
}

.navbar-links a:hover::after {
    transform: scaleX(1);
}

.navbar-links a::after {
    position: absolute;
    left: 0.2rem;
    right: 0.2rem;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--primary);
    content: "";
    transform: scaleX(0);
    transition: transform 0.18s ease;
}

.btn {
    min-height: 42px;
    padding: 0.58rem 1.05rem;
    border-radius: 0.8rem;
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, #16c784, #06a75d);
    box-shadow: 0 12px 24px rgba(18, 183, 106, 0.28);
    color: #ffffff;
}

.btn-light {
    background: #ffffff;
    border-color: var(--line);
    color: var(--ink);
}

.btn-light:hover {
    border-color: rgba(18, 183, 106, 0.45);
    color: var(--primary-dark);
}

.navbar-auth .btn-ghost {
    color: #ffffff;
    border-color: rgba(226, 232, 240, 0.42);
    background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 1280px) {
    .navbar-inner {
        align-items: flex-start;
    }

    .navbar-menu {
        align-items: flex-end;
        flex-direction: column;
        gap: 0.65rem;
    }

    .navbar-links {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 0.25rem;
    }
}

@media (max-width: 900px) {
    .site-shell {
        padding: 0 0.7rem;
    }

    .navbar-inner {
        align-items: center;
    }

    .navbar-brand {
        flex-basis: auto;
        min-width: 0;
    }

    .navbar-right {
        width: auto;
        margin-left: auto;
    }

    .navbar-menu {
        align-items: stretch;
    }
}
.container {
    max-width: 1220px;
    margin: 1.35rem auto 3rem;
    padding: 0 1rem;
}

.home-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
    align-items: center;
    gap: 2rem;
    min-height: 390px;
    padding: 1.25rem 0 1.6rem;
}

.home-hero::before,
.browse-header::after {
    position: absolute;
    width: 84px;
    height: 84px;
    background-image: radial-gradient(rgba(18, 183, 106, 0.34) 1.7px, transparent 1.7px);
    background-size: 14px 14px;
    content: "";
}

.home-hero::before {
    left: -2rem;
    top: 0.4rem;
}

.home-hero-copy h1 {
    margin: 0;
    max-width: 470px;
    color: var(--ink);
    font-size: clamp(3.4rem, 7vw, 5.2rem);
    line-height: 0.96;
    letter-spacing: 0;
}

.home-hero-copy h1 span {
    color: var(--primary);
}

.home-hero-copy p {
    max-width: 420px;
    margin: 1.4rem 0 0;
    color: #53627a;
    font-size: 1.25rem;
    line-height: 1.55;
}

.hero-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 1rem;
    margin-top: 1.8rem;
    max-width: 780px;
}

.hero-highlights div {
    display: grid;
    grid-template-columns: 44px auto;
    column-gap: 0.7rem;
    align-items: center;
}

.mini-icon,
.post-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #dff8ec;
    color: var(--primary-dark);
    font-weight: 900;
}

.hero-highlights strong,
.hero-highlights small {
    display: block;
}

.hero-highlights small,
.post-type-card small {
    color: var(--muted);
}

.popular-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.2rem 0 1.5rem;
}

.popular-panel {
    height: 100%;
}

.popular-list {
    display: grid;
    gap: 0.65rem;
}

.popular-row {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.78rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    text-decoration: none;
}

.popular-row:hover {
    border-color: rgba(18, 183, 106, 0.45);
    background: #f0fdf4;
}

.popular-rank {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border-radius: 999px;
    background: #dcfce7;
    color: #047857;
    font-size: 0.86rem;
    font-weight: 900;
}

.popular-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.popular-copy strong,
.popular-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popular-copy strong {
    color: #0f172a;
    font-size: 0.94rem;
}

.popular-copy small,
.popular-count {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
}

.popular-count {
    white-space: nowrap;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.9rem;
}

.growth-strip {
    display: grid;
    grid-template-columns: minmax(220px, 0.95fr) minmax(0, 1.6fr);
    align-items: center;
    gap: 1rem;
    margin: 0.4rem 0 1.35rem;
    padding: 0.95rem;
    border: 1px solid #dbe8e1;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.9), rgba(248, 250, 252, 0.94));
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.growth-intro {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.growth-intro strong {
    color: var(--ink);
    font-size: 1rem;
}

.growth-intro span {
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.45;
}

.growth-stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.growth-pill {
    min-width: 0;
    padding: 0.72rem 0.78rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.88);
}

.growth-pill span,
.growth-pill strong {
    display: block;
    overflow-wrap: anywhere;
}

.growth-pill span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.growth-pill strong {
    margin-top: 0.22rem;
    color: #0f172a;
    font-size: 0.9rem;
    line-height: 1.25;
}

.quick-category-section,
.why-connectboard {
    margin: 1.35rem 0 1.5rem;
}

.compact-heading-row {
    margin-bottom: 0.75rem;
}

.quick-category-row {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0.15rem 0 0.45rem;
    scrollbar-width: thin;
}

.quick-category-pill {
    flex: 0 0 auto;
    padding: 0.72rem 0.95rem;
    border: 1px solid #dce7ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.quick-category-pill:hover {
    border-color: rgba(18, 183, 106, 0.5);
    background: #f0fdf4;
    color: var(--primary-dark);
}

.why-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.why-card {
    padding: 1.1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.why-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #dff8ec;
    color: var(--primary-dark);
    font-weight: 900;
}

.why-card h3 {
    margin: 0.8rem 0 0.35rem;
    color: var(--ink);
    font-size: 1.05rem;
}

.why-card p {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.5;
}

.home-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.6rem 0 0;
    padding: 1.35rem;
    border-radius: 1.2rem;
    background: #0f172a;
    color: #ffffff;
}

.home-final-cta h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
}

.home-final-cta p {
    margin: 0.35rem 0 0;
    color: #cbd5e1;
}

.btn-large {
    min-height: 56px;
    padding-inline: 1.55rem;
    border-radius: 1rem;
}

.home-hero-visual {
    min-height: 360px;
}

.island-scene {
    position: relative;
    height: 390px;
    overflow: hidden;
    border-radius: 2rem;
    background:
        radial-gradient(circle at 50% 22%, rgba(151, 218, 255, 0.95) 0 23%, transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.9));
}

.sun {
    position: absolute;
    right: 28%;
    top: 82px;
    width: 70px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: -300px 10px 0 -12px #ffffff, -215px 58px 0 -8px #ffffff;
}

.water {
    position: absolute;
    left: 8%;
    right: 12%;
    bottom: 76px;
    height: 86px;
    border-radius: 60% 40% 48% 52%;
    background: linear-gradient(90deg, #3dd6e4, #a7f3ff);
    opacity: 0.9;
}

.buildings {
    position: absolute;
    left: 25%;
    bottom: 135px;
    width: 260px;
    height: 118px;
    border-radius: 18px 18px 6px 6px;
    background:
        linear-gradient(90deg, #d8b681 0 16%, #edd7a2 16% 32%, #cba16d 32% 46%, #f3dcaa 46% 70%, #d3aa76 70%),
        linear-gradient(#f9e7bd, #c99b67);
    box-shadow: 36px -42px 0 -12px #d1a16f, -55px 30px 0 -22px #2bbf82;
}

.laptop {
    position: absolute;
    right: 8%;
    bottom: 58px;
    width: 290px;
    height: 188px;
    transform: rotate(7deg);
    border-radius: 16px;
    background: #1d2939;
    box-shadow: 0 30px 48px rgba(15, 23, 42, 0.2);
}

.laptop::after {
    position: absolute;
    left: -24px;
    right: -24px;
    bottom: -18px;
    height: 24px;
    border-radius: 4px 4px 22px 22px;
    background: #d9e2ec;
    content: "";
}

.screen {
    position: absolute;
    inset: 13px;
    border-radius: 9px;
    background: #f8fbfd;
    padding: 22px;
}

.screen span {
    display: block;
    height: 26px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #dff8ec, #ffffff);
    border: 1px solid #dbe7e1;
}

.post-picker {
    border-radius: 1.25rem;
    padding: 1.6rem 1.7rem;
}

.post-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.35rem;
}

.post-type-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    min-height: 86px;
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #ffffff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.post-type-card.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.post-type-card strong,
.post-type-card small {
    display: block;
}

.post-type-card em {
    color: var(--primary-dark);
    font-style: normal;
    font-weight: 900;
}

.section-heading-row,
.browse-header,
.results-toolbar,
.filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.browse-header {
    position: relative;
    justify-content: flex-start;
    margin: 1.5rem 0 1.2rem;
}

.browse-header::after {
    right: 0;
    top: 0;
}

.browse-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: #e5f8ef;
    color: var(--primary-dark);
    font-size: 1.65rem;
    font-weight: 900;
}

.search-panel {
    padding: 1.35rem;
    border-radius: 1rem;
}

.hero-search {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(150px, 0.9fr) minmax(160px, 1fr) minmax(130px, 0.75fr) auto;
    gap: 0.9rem;
    margin: 0;
}

.search-input,
.search-select,
.filter-control {
    min-height: 48px;
    border-radius: 0.6rem;
    border: 1px solid var(--line);
    background: #ffffff;
    color: #344054;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
}

.search-button {
    min-width: 116px;
}

.category-filter {
    margin: 1rem 0 0;
}

.chip {
    min-height: 34px;
    padding: 0.42rem 1.05rem;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.active-chip {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.browse-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.filter-panel,
.results-panel {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
}

.filter-panel {
    position: sticky;
    top: 96px;
    padding: 1.2rem;
}

.filter-head h2 {
    margin: 0;
    font-size: 1.05rem;
}

.filter-head a {
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.filter-panel label {
    display: block;
    margin: 1.1rem 0 0.45rem;
    font-size: 0.82rem;
    font-weight: 900;
}

.filter-control {
    width: 100%;
    padding: 0 0.8rem;
}

.check-stack {
    display: grid;
    gap: 0.65rem;
    color: #344054;
    font-size: 0.88rem;
}

.check-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
}

.check-option input {
    accent-color: var(--primary);
}

.check-stack > span::before {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 0.55rem;
    border: 1px solid #98a2b3;
    border-radius: 3px;
    vertical-align: -2px;
    content: "";
}

.filter-results {
    width: 100%;
    margin-top: 4.5rem;
    color: var(--primary-dark);
    border-color: var(--primary);
}

.results-panel {
    padding: 1rem;
}

.results-toolbar {
    margin-bottom: 0.9rem;
}

.results-toolbar strong {
    font-size: 1.08rem;
}

.view-toggle {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
}

.view-toggle a {
    padding: 0.42rem 0.8rem;
    color: var(--muted);
    font-weight: 800;
    font-size: 0.82rem;
    text-decoration: none;
}

.view-toggle .active {
    background: var(--primary);
    color: #ffffff;
}

.listing-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.1rem;
}

.listing-grid.listing-list-view {
    grid-template-columns: 1fr;
}

.listing-list-view .listing-card {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
}

.listing-list-view .card-media {
    height: 100%;
    min-height: 170px;
}

.listing-list-view .card-body {
    min-height: 0;
}

.listing-card {
    --parent-color: #64748b;
    --parent-soft: #f1f5f9;
    overflow: hidden;
    border: 1px solid #dbe3ea;
    border-top: 4px solid var(--parent-color);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.listing-card:hover {
    transform: translateY(-3px);
    border-color: var(--parent-color);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}

.card-media {
    position: relative;
    height: 154px;
}

.card-media::after {
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    background: linear-gradient(0deg, rgba(7, 17, 35, 0.32), transparent);
    content: "";
    pointer-events: none;
}


.card-media .image-view-overlay {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(8px);
}

.listing-card:hover .image-view-overlay,
.listing-card:focus-visible .image-view-overlay {
    opacity: 1;
    transform: translateY(0);
}

.card-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.freshness-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    padding: 0.3rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.card-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin-top: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--parent-color) 35%, #dbe3ea);
    border-radius: 0.75rem;
    background: var(--parent-soft);
    color: var(--parent-color);
    font-size: 0.86rem;
    font-weight: 900;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.listing-card:hover .card-cta {
    border-color: var(--parent-color);
    background: var(--parent-color);
    color: #ffffff;
}
.save-dot {
    position: absolute;
    right: 0.6rem;
    top: 0.6rem;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

.save-dot::before {
    position: absolute;
    inset: 8px;
    border: 2px solid #8aa0bd;
    border-radius: 999px;
    content: "";
}

.placeholder {
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.92), transparent 4.5rem),
        linear-gradient(135deg, #dff8ec, #dceeff);
}

.placeholder-job {
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.92), transparent 4.5rem),
        linear-gradient(135deg, #e9f7ff, #d7e7ff);
}

.placeholder-news {
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.92), transparent 4.5rem),
        linear-gradient(135deg, #fff7dc, #e6f5ff);
}

.placeholder-card {
    width: 70%;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.placeholder-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.6rem;
    border-radius: 12px;
    background: var(--primary);
    color: #ffffff;
    font-size: 1.25rem;
}

.placeholder-card strong {
    display: block;
    color: var(--ink);
    letter-spacing: 0;
}

.card-body {
    min-height: 190px;
    padding: 0.85rem 0.95rem 0.95rem;
}

.badge {
    border-radius: 0.45rem;
    background: #dff8ec;
    color: var(--primary-dark);
    font-weight: 900;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 999px;
    background: var(--parent-soft);
    color: var(--parent-color);
    padding: 0.34rem 0.62rem;
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
}

.badge-job {
    background: #e7f0ff;
    color: #175cd3;
}

.badge-news {
    background: #fff1c2;
    color: #a15c07;
}

.card-body h2 {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
}

.card-body p {
    min-height: 42px;
    color: #475467;
    font-size: 0.86rem;
}

.chip-small {
    background: #eef2f6;
    color: #475467;
}

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.subcategory-chip {
    --chip-bg: #f1f5f9;
    --chip-text: #475569;
    --chip-border: #e2e8f0;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid var(--chip-border);
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--chip-text);
    padding: 0.32rem 0.56rem;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
}

.listing-price {
    margin-top: 0.34rem;
    color: var(--parent-color);
    font-size: 0.95rem;
    font-weight: 900;
}

.chip-electronics {
    --chip-bg: #eef2ff;
    --chip-text: #3730a3;
    --chip-border: #c7d2fe;
}

.chip-tutoring,
.chip-part-time,
.chip-campus-news,
.chip-student-housing {
    --chip-bg: #dbeafe;
    --chip-text: #1d4ed8;
    --chip-border: #bfdbfe;
}

.chip-tech-help,
.chip-flatshare,
.chip-remote {
    --chip-bg: #cffafe;
    --chip-text: #0e7490;
    --chip-border: #a5f3fc;
}

.chip-web-development,
.chip-shoes,
.chip-full-time {
    --chip-bg: #e0e7ff;
    --chip-text: #4338ca;
    --chip-border: #c7d2fe;
}

.chip-design,
.chip-accessories {
    --chip-bg: #fce7f3;
    --chip-text: #be185d;
    --chip-border: #fbcfe8;
}

.chip-translation,
.chip-books,
.chip-internship,
.chip-events {
    --chip-bg: #ede9fe;
    --chip-text: #6d28d9;
    --chip-border: #ddd6fe;
}

.chip-cleaning,
.chip-apartments,
.chip-furniture {
    --chip-bg: #ccfbf1;
    --chip-text: #0f766e;
    --chip-border: #99f6e4;
}

.chip-photography,
.chip-kitchen-items,
.chip-short-stay,
.chip-announcements {
    --chip-bg: #fef3c7;
    --chip-text: #b45309;
    --chip-border: #fde68a;
}

.chip-repairs,
.chip-bags {
    --chip-bg: #ffedd5;
    --chip-text: #c2410c;
    --chip-border: #fed7aa;
}

.chip-everyday-items,
.chip-general {
    --chip-bg: #f1f5f9;
    --chip-text: #475569;
    --chip-border: #e2e8f0;
}

.chip-apparel {
    --chip-bg: #ffe4e6;
    --chip-text: #be123c;
    --chip-border: #fecdd3;
}

.chip-sports,
.chip-rooms,
.chip-student-jobs,
.chip-community-news {
    --chip-bg: #ecfccb;
    --chip-text: #4d7c0f;
    --chip-border: #d9f99d;
}

.chip-toys {
    --chip-bg: #fef9c3;
    --chip-text: #a16207;
    --chip-border: #fef08a;
}

.meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.85rem;
    color: #667085;
}

.meta > span:first-child {
    min-width: 0;
}

.activity-pill {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.75rem;
    padding: 0.38rem 0.55rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
}

.activity-pill .dot {
    color: #94a3b8;
}

.interest-label {
    color: #475569;
}

.interest-meter {
    display: inline-flex;
    align-items: end;
    gap: 0.16rem;
    height: 0.72rem;
}

.interest-meter span {
    display: block;
    width: 0.28rem;
    height: 0.58rem;
    border-radius: 999px;
    background: #dbe3ee;
    transform: scaleY(0.45);
    transform-origin: bottom;
    animation: interest-idle 420ms ease-out forwards;
}

.interest-meter span:nth-child(2) {
    animation-delay: 90ms;
}

.interest-meter span:nth-child(3) {
    animation-delay: 180ms;
}

.interest-meter span:nth-child(4) {
    animation-delay: 270ms;
}

.interest-meter.level-1 span:nth-child(-n + 1),
.interest-meter.level-2 span:nth-child(-n + 2),
.interest-meter.level-3 span:nth-child(-n + 3),
.interest-meter.level-4 span:nth-child(-n + 4) {
    animation-name: interest-fill;
}

.interest-meter.level-1 span:nth-child(1),
.interest-meter.level-2 span:nth-child(1),
.interest-meter.level-3 span:nth-child(1),
.interest-meter.level-4 span:nth-child(1) {
    background: #3b82f6;
}

.interest-meter.level-2 span:nth-child(2),
.interest-meter.level-3 span:nth-child(2),
.interest-meter.level-4 span:nth-child(2) {
    background: #22c55e;
}

.interest-meter.level-3 span:nth-child(3),
.interest-meter.level-4 span:nth-child(3) {
    background: #f59e0b;
}

.interest-meter.level-4 span:nth-child(4) {
    background: #f97316;
}

@keyframes interest-fill {
    from { transform: scaleY(0.25); opacity: 0.55; }
    to { transform: scaleY(1); opacity: 1; }
}

@keyframes interest-idle {
    from { transform: scaleY(0.25); opacity: 0.45; }
    to { transform: scaleY(0.62); opacity: 1; }
}

footer {
    background: rgba(255, 255, 255, 0.9);
    color: #667085;
}

@media (hover: none), (max-width: 780px) {
    .card-media .image-view-overlay {
        left: auto;
        right: 0.65rem;
        bottom: 0.65rem;
        width: auto;
        min-height: 30px;
        padding: 0 0.72rem;
        opacity: 1;
        transform: none;
        font-size: 0.76rem;
    }

    .card-media .image-view-overlay::before {
        content: "View listing";
    }

    .card-media .image-view-overlay {
        font-size: 0;
    }

    .card-media .image-view-overlay::before {
        font-size: 0.76rem;
    }
}
@media (max-width: 780px) {
    .growth-strip {
        grid-template-columns: 1fr;
    }

    .growth-stat-row {
        display: flex;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .growth-pill {
        flex: 0 0 170px;
    }

    .why-card-grid {
        grid-template-columns: 1fr;
    }

    .home-final-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-final-cta .btn {
        width: 100%;
    }
}
@media (max-width: 1020px) {
    .home-hero,
    .browse-layout {
        grid-template-columns: 1fr;
    }

    .filter-panel {
        position: static;
    }

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

@media (max-width: 760px) {
    .navbar-right {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .navbar-menu {
        width: 100%;
        align-items: stretch;
    }

    .navbar-links {
        justify-content: stretch;
    }

    .detail-media-frame {
        aspect-ratio: 4 / 3;
        min-height: 260px;
        max-height: 420px;
    }

    .detail-full-image-button {
        right: 0.75rem;
        bottom: 0.75rem;
        min-height: 36px;
        font-size: 0.8rem;
    }

    .image-lightbox {
        padding: 0.5rem;
    }

    .image-lightbox-dialog {
        max-height: calc(100vh - 1rem);
        padding: 0.6rem;
    }

    .image-lightbox-image {
        max-height: calc(100vh - 4.25rem);
    }

    .navbar-inner {
        border-radius: 0 0 1rem 1rem;
    }

    .home-hero {
        gap: 1rem;
    }

    .home-hero-copy h1 {
        font-size: 3rem;
    }

    .hero-highlights,
    .post-type-grid,
    .hero-search {
        grid-template-columns: 1fr;
    }

    .home-hero-visual {
        min-height: 260px;
    }

    .island-scene {
        height: 280px;
    }

    .laptop {
        right: 5%;
        width: 220px;
        height: 144px;
    }

    .browse-header {
        align-items: flex-start;
    }

    .browse-icon {
        width: 58px;
        height: 58px;
    }

    .listing-list-view .listing-card {
        grid-template-columns: 1fr;
    }

    .listing-list-view .card-media {
        height: 154px;
    }
}

/* My listings dashboard */
.dashboard-page-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 1.3rem;
}

.dashboard-page-header::after {
    position: absolute;
    right: 0;
    top: -0.5rem;
    width: 130px;
    height: 130px;
    background-image: radial-gradient(rgba(15, 23, 42, 0.08) 2px, transparent 2px);
    background-size: 13px 13px;
    content: "";
    pointer-events: none;
}

.dashboard-page-header .page-title {
    font-size: clamp(2.2rem, 5vw, 3.35rem);
}

.stats-panel,
.dashboard-tabs,
.dashboard-empty,
.tips-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
}

.stats-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.45rem;
}

.stat-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 0.3rem 1.5rem;
    border-right: 1px solid var(--line);
}

.stat-card:last-child {
    border-right: 0;
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 1rem;
    font-weight: 950;
    font-size: 1.35rem;
}

.stat-list,
.stat-live {
    background: #e6f8ef;
    color: var(--primary-dark);
}

.stat-draft {
    background: #fff4d8;
    color: #b76e00;
}

.stat-archived {
    background: #eef2f6;
    color: #58708f;
}

.stat-card p,
.stat-card strong,
.stat-card small {
    display: block;
    margin: 0;
}

.stat-card p {
    color: #53627a;
    font-weight: 700;
}

.stat-card strong {
    margin-top: 0.15rem;
    color: var(--ink);
    font-size: 1.8rem;
    line-height: 1;
}

.stat-card small {
    margin-top: 0.45rem;
    color: var(--muted);
}

.dashboard-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
}

.tab-group,
.tab-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
}

.dash-tab,
.filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.52rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 0.65rem;
    color: #344054;
    font-weight: 800;
    text-decoration: none;
}

.dash-tab.active {
    background: #e6f8ef;
    color: var(--primary-dark);
}

.filter-chip {
    border-color: var(--line);
    background: #ffffff;
    color: #53627a;
}

.filter-chip:first-child,
.filter-chip.active {
    background: #eaf8f1;
    color: var(--primary-dark);
}

.dot-live::before,
.dot-draft::before {
    width: 9px;
    height: 9px;
    margin-right: 0.55rem;
    border-radius: 999px;
    content: "";
}

.dot-live::before {
    background: var(--primary);
}

.dot-draft::before {
    background: #f5a623;
}

.dashboard-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.25rem;
    align-items: start;
}

.dashboard-empty {
    min-height: 330px;
    padding: 2.4rem 2rem;
    text-align: center;
}

.empty-illustration {
    position: relative;
    width: min(420px, 100%);
    height: 150px;
    margin: 0 auto 1.35rem;
    opacity: 0.85;
}

.empty-window {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 160px;
    height: 98px;
    transform: translateX(-50%);
    border-radius: 1rem;
    background: rgba(230, 248, 239, 0.9);
    box-shadow: inset 0 14px 0 rgba(18, 183, 106, 0.28);
}

.empty-window span {
    position: absolute;
    left: 50%;
    top: 48%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(18, 183, 106, 0.5);
    border-radius: 0.7rem;
    color: var(--primary);
    font-size: 2rem;
    font-weight: 900;
}

.empty-illustration i,
.empty-illustration b {
    position: absolute;
    bottom: 18px;
    width: 76px;
    height: 96px;
    border-radius: 50% 50% 10px 10px;
    background: linear-gradient(180deg, #d9f5e8, #edf9f3);
    content: "";
}

.empty-illustration i {
    left: 16%;
}

.empty-illustration b {
    right: 16%;
}

.dashboard-empty h2 {
    margin: 0;
    font-size: 1.55rem;
}

.dashboard-empty p {
    margin: 0.7rem auto 0;
    max-width: 560px;
    color: var(--muted);
    font-size: 1rem;
}

.empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 1.6rem;
}

.tips-card {
    padding: 1.55rem;
}

.tips-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.tips-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #e6f8ef;
    color: var(--primary-dark);
    font-weight: 900;
}

.tips-title h2 {
    margin: 0;
    font-size: 1.05rem;
}

.tips-card ul {
    display: grid;
    gap: 1rem;
    margin: 1.35rem 0;
    padding: 0;
    list-style: none;
}

.tips-card li {
    position: relative;
    padding-left: 2rem;
}

.tips-card li::before {
    position: absolute;
    left: 0;
    top: 0.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.72rem;
    content: "\2713";
}

.tips-card strong,
.tips-card small {
    display: block;
}

.tips-card strong {
    color: var(--ink);
}

.tips-card small {
    margin-top: 0.2rem;
    color: var(--muted);
}

.tips-note {
    border-top: 1px solid var(--line);
    padding: 1rem;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, #e8f8ef, #f5fbff);
    color: #344054;
    font-weight: 700;
}

.dashboard-card {
    border-radius: 1rem;
}

.dashboard-card-media {
    height: 150px;
}

.dashboard-placeholder {
    flex-direction: column;
    gap: 0.55rem;
    background: linear-gradient(135deg, #dff8ec, #dceeff);
}

.dashboard-placeholder span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 0.8rem;
    background: var(--primary);
    color: #ffffff;
    font-size: 1.25rem;
}

.dashboard-placeholder strong {
    color: var(--ink);
}

.danger-action {
    color: #b42318;
}

@media (max-width: 1280px) {
    .stats-panel,
    .dashboard-content-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-content-grid section {
        grid-column: 1 / -1;
    }

    .tips-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .dashboard-page-header,
    .dashboard-tabs {
        align-items: stretch;
        flex-direction: column;
    }

    .stats-panel {
        grid-template-columns: 1fr;
    }

    .stat-card {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 1rem 0;
    }

    .stat-card:last-child {
        border-bottom: 0;
    }

    .dashboard-content-grid {
        grid-template-columns: 1fr;
    }
}

/* Legal and safety pages */
.legal-hero {
    margin: 2rem 0 1.4rem;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 92% 12%, rgba(18, 183, 106, 0.16), transparent 12rem),
        linear-gradient(135deg, #ffffff, #f3faf7);
    box-shadow: var(--shadow-sm);
}

.legal-kicker {
    display: inline-flex;
    margin-bottom: 0.9rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #e6f8ef;
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 900;
}

.legal-hero h1 {
    max-width: 860px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(2rem, 5vw, 3.3rem);
    line-height: 1.05;
}

.legal-hero p {
    max-width: 780px;
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

.legal-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.legal-summary,
.legal-card,
.how-steps article {
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-sm);
}

.legal-summary {
    position: sticky;
    top: 96px;
    padding: 1.35rem;
}

.legal-summary h2,
.legal-card h2,
.how-steps h2 {
    margin: 0;
    color: var(--ink);
}

.legal-summary ul,
.legal-card ul {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: #344054;
    line-height: 1.65;
}

.legal-sections {
    display: grid;
    gap: 1rem;
}

.legal-card {
    padding: 1.4rem;
}

.legal-card p {
    margin: 0.75rem 0 0;
    color: #475467;
    line-height: 1.7;
}

.legal-card p + p {
    margin-top: 0.85rem;
}

.how-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.how-steps article {
    padding: 1.25rem;
}

.how-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border-radius: 0.8rem;
    background: var(--primary);
    color: #ffffff;
    font-weight: 900;
}

.how-steps h2 {
    font-size: 1.05rem;
}

.how-steps p {
    margin: 0.65rem 0 0;
    color: var(--muted);
    line-height: 1.6;
}

@media (max-width: 980px) {
    .legal-layout,
    .how-steps {
        grid-template-columns: 1fr;
    }

    .legal-summary {
        position: static;
    }
}

/* Listing detail refresh */
.listing-detail-page {
    display: grid;
    gap: 1rem;
}

.listing-detail-hero,
.detail-panel,
.listing-detail-sidebar .sidebar-card {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
}

.listing-detail-hero {
    padding: 1.35rem 1.45rem;
}

.listing-detail-hero .detail-page-title {
    margin-top: 0.72rem;
    max-width: 900px;
    font-size: clamp(1.6rem, 2.5vw, 2.35rem);
    line-height: 1.12;
}

.listing-detail-hero .detail-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    margin-top: 0.55rem;
    color: #64748b;
}

.detail-owner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.15rem;
}

.detail-owner-actions .btn,
.detail-owner-actions .inline-form {
    min-width: 0;
}

.btn-danger-soft {
    background: #fff7f7;
    border-color: #fecaca;
    color: #dc2626;
}

.btn-danger-soft:hover {
    background: #dc2626;
    color: #ffffff;
}

.detail-admin-note {
    margin-top: 1rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.92rem;
}

.listing-detail-grid {
    align-items: start;
    grid-template-columns: minmax(0, 1.85fr) minmax(280px, 0.85fr);
    gap: 1rem;
}

.listing-detail-main {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.detail-panel {
    padding: 1rem;
}

.detail-panel-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 800;
}

.detail-panel-title::before,
.sidebar-title::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: #16c784;
    box-shadow: 0 0 0 4px #dcfce7;
}

.detail-media-frame {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #f8fafc;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    max-height: 560px;
    border: 1px solid #e2e8f0;
}

.detail-media-frame .detail-hero-image,
.detail-media-frame .detail-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    border-radius: 0;
}

.detail-media-frame .detail-hero-image {
    display: block;
    object-fit: contain;
    cursor: zoom-in;
}

.detail-media-frame .detail-placeholder {
    place-items: center;
    background: linear-gradient(135deg, #e0f2fe, #dcfce7);
    color: #0f172a;
    font-weight: 900;
}

.detail-media-arrow {
    position: absolute;
    top: 50%;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #64748b;
    font-size: 1.35rem;
    font-weight: 800;
}

.detail-media-arrow-left {
    left: 1rem;
}

.detail-media-arrow-right {
    right: 1rem;
}

.detail-media-dots {
    position: absolute;
    right: 0;
    bottom: 0.8rem;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 0.35rem;
}

.detail-media-dots button {
    width: 0.42rem;
    height: 0.42rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
}

.detail-media-dots button.is-active {
    background: #16c784;
}

.detail-full-image-button {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    min-height: 38px;
    padding: 0.46rem 0.72rem;
    border: 1px solid rgba(203, 213, 225, 0.95);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
}

.detail-full-image-button:hover {
    background: #ffffff;
}

.image-lightbox[hidden] {
    display: none;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 3vw, 2rem);
}

.image-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
}

.image-lightbox-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: min(1120px, 100%);
    max-height: calc(100vh - 2rem);
    padding: clamp(0.75rem, 2vw, 1.25rem);
    overflow: auto;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
}

.image-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 5.5rem);
    object-fit: contain;
}

.image-lightbox-close {
    position: sticky;
    top: 0;
    justify-self: end;
    z-index: 2;
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

body.lightbox-open {
    overflow: hidden;
}

.listing-detail-main .detail-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.8rem;
}

.listing-detail-main .detail-gallery img {
    height: 92px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    object-fit: cover;
    cursor: pointer;
}

.listing-detail-main .detail-gallery img.is-active {
    border-color: #16c784;
    box-shadow: 0 0 0 3px #dcfce7;
}

.listing-detail-main .detail-copy {
    color: #334155;
    font-size: 0.96rem;
    line-height: 1.7;
}

.detail-feature-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.detail-feature-row span {
    padding: 0.38rem 0.62rem;
    border-radius: 999px;
    background: #ecfdf3;
    color: #166534;
    font-size: 0.78rem;
    font-weight: 700;
}

.listing-detail-main .detail-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.listing-detail-main .detail-info-grid div {
    display: grid;
    gap: 0.25rem;
    padding: 0.82rem;
    border-radius: 8px;
    background: #f8fafc;
}

.listing-detail-main .detail-info-grid span,
.detail-stat-list span,
.detail-contact-list span,
.detail-metric-grid span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.listing-detail-main .detail-info-grid strong {
    color: #0f172a;
    font-size: 0.95rem;
}

.listing-detail-sidebar {
    gap: 0.85rem;
}

.listing-detail-sidebar .sidebar-card {
    padding: 1rem;
}

.listing-detail-sidebar .sidebar-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
}

.detail-contact-list,
.detail-stat-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.detail-contact-list li,
.detail-stat-list li {
    display: grid;
    grid-template-columns: minmax(84px, 0.8fr) minmax(0, 1.4fr);
    gap: 0.8rem;
    padding: 0.68rem 0;
    border-top: 1px solid #e2e8f0;
    align-items: center;
}

.detail-contact-list li:first-child,
.detail-stat-list li:first-child {
    border-top: 0;
}

.detail-contact-list a,
.detail-contact-list strong,
.detail-stat-list strong {
    min-width: 0;
    color: #0f172a;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.detail-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.detail-metric-grid div {
    display: grid;
    gap: 0.18rem;
    min-height: 72px;
    place-items: center;
    padding: 0.65rem;
    border: 1px solid #dcfce7;
    border-radius: 8px;
    background: #f0fdf4;
    text-align: center;
}

.detail-metric-grid strong {
    max-width: 100%;
    color: #047857;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.seller-rating-summary {
    display: grid;
    gap: 0.18rem;
    padding: 0.85rem;
    border: 1px solid #dcfce7;
    border-radius: 8px;
    background: #f0fdf4;
}

.seller-rating-summary strong {
    color: #047857;
    font-size: 1.2rem;
}

.seller-rating-summary span,
.seller-review-card span,
.seller-review-card small {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.seller-review-form {
    display: grid;
    gap: 0.75rem;
}

.rating-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
}

.rating-options label {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 800;
}

.seller-review-form textarea {
    width: 100%;
    resize: vertical;
}

.seller-reviews-panel {
    margin-top: 1rem;
}

.seller-review-list {
    display: grid;
    gap: 0.75rem;
}

.seller-review-card {
    display: grid;
    gap: 0.45rem;
    padding: 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.seller-review-card div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
}

.seller-review-card strong {
    color: #047857;
}

.seller-review-card p {
    margin: 0;
    color: #334155;
    line-height: 1.6;
}

@media (max-width: 960px) {
    .listing-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .detail-media-frame {
        aspect-ratio: 16 / 8;
    }

    .popular-dashboard {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .listing-detail-hero,
    .detail-panel,
    .listing-detail-sidebar .sidebar-card {
        padding: 0.9rem;
    }

    .detail-owner-actions .btn,
    .detail-owner-actions .inline-form,
    .detail-owner-actions .inline-form .btn {
        width: 100%;
        justify-content: center;
    }

    .detail-media-frame {
        aspect-ratio: 4 / 3;
        min-height: 210px;
    }

    .listing-detail-main .detail-gallery,
    .detail-metric-grid {
        grid-template-columns: 1fr;
    }

    .detail-contact-list li,
    .detail-stat-list li {
        grid-template-columns: 1fr;
        gap: 0.22rem;
    }

    .popular-row {
        grid-template-columns: 2.1rem minmax(0, 1fr);
    }

    .popular-count {
        grid-column: 2;
    }

    .rating-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* Definitive responsive navbar: stable logo + hamburger on tablet/mobile. */
.navbar,
.site-shell,
.navbar-inner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.navbar {
    overflow-x: clip;
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand,
.brand-mark,
.navbar-logo,
.mobile-menu-button {
    flex-shrink: 0;
}

.navbar-brand {
    min-width: 0;
}

.navbar-logo {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.mobile-menu-button {
    align-items: center;
    justify-content: center;
}

@media (min-width: 1281px) {
    .navbar-inner {
        max-width: 1320px;
        flex-wrap: nowrap;
        gap: 1rem;
    }

    .navbar-brand {
        flex: 0 0 auto;
        max-width: 360px;
    }

    .navbar-right {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
    }

    .navbar-menu {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        gap: 1rem;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .desktop-navigation,
    .desktop-auth-buttons {
        display: flex !important;
        align-items: center;
    }

    .desktop-navigation {
        flex: 0 1 auto;
        flex-wrap: nowrap;
        gap: clamp(0.5rem, 0.8vw, 0.9rem);
        min-width: 0;
    }

    .desktop-auth-buttons {
        flex: 0 0 auto;
        gap: 0.6rem;
    }

    .mobile-menu-button {
        display: none !important;
    }
}

@media (max-width: 1280px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .site-shell {
        padding: 0 12px;
    }

    .navbar {
        padding: 0;
    }

    .navbar-inner {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-width: 0;
        padding: 10px 14px;
        border-radius: 0 0 1.05rem 1.05rem;
    }

    .navbar-brand {
        display: grid;
        grid-template-columns: 34px auto;
        grid-template-rows: auto;
        flex: 0 0 auto;
        max-width: calc(100% - 58px);
        column-gap: 0.65rem;
        align-items: center;
    }

    .brand-mark {
        grid-row: 1;
        width: 34px;
        height: 34px;
    }

    .navbar-logo {
        display: block;
        max-width: calc(100vw - 110px);
        font-size: clamp(1.08rem, 5vw, 1.45rem);
        line-height: 1;
    }

    .navbar-tagline {
        display: none !important;
    }

    .navbar-right {
        display: contents !important;
        width: auto;
        margin: 0;
    }

    .mobile-menu-button {
        display: inline-flex !important;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 0;
        border-radius: 999px;
    }

    .navbar-menu {
        display: none !important;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-top: 0.2rem;
        padding-top: 0.85rem;
        border-top: 1px solid rgba(226, 232, 240, 0.16);
        box-sizing: border-box;
    }

    .navbar-menu.open {
        display: flex !important;
    }

    .desktop-navigation,
    .desktop-auth-buttons {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.45rem;
    }

    .desktop-navigation a,
    .desktop-auth-buttons .btn,
    .desktop-auth-buttons form,
    .desktop-auth-buttons form button {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        box-sizing: border-box;
    }

    .desktop-navigation a {
        padding: 0.72rem 0.85rem;
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        text-align: center;
    }

    .desktop-navigation a::after {
        display: none !important;
    }

    .desktop-navigation a:first-child,
    .desktop-navigation a:nth-child(2) {
        display: none !important;
    }

    .navbar-username {
        display: block;
        width: 100%;
        text-align: center;
    }

    .home-hero {
        margin-top: 0.75rem;
    }
}

@media (max-width: 425px) {
    .site-shell {
        padding: 0 10px;
    }

    .navbar-inner {
        padding: 10px 12px;
    }

    .navbar-brand {
        grid-template-columns: 32px auto;
        column-gap: 0.55rem;
        max-width: calc(100% - 54px);
    }

    .brand-mark {
        width: 32px;
        height: 32px;
    }

    .navbar-logo {
        max-width: calc(100vw - 102px);
        font-size: clamp(1rem, 6vw, 1.2rem);
    }

    .mobile-menu-button {
        width: 42px;
        height: 42px;
    }
}

/* Listing card colour hierarchy: brand actions, parent badge, subcategory accent. */
:root {
    --brand-green: #10B981;
    --brand-green-dark: #047857;
    --brand-green-deep: #065F46;
    --brand-green-soft: #ECFDF5;
    --brand-green-border: #A7F3D0;
}

.listing-card {
    --category-accent: #64748B;
    --category-soft: #F1F5F9;
    --category-dark: #334155;
    --subcategory-accent: #94A3B8;
    --subcategory-soft: #F8FAFC;
    --subcategory-dark: #475569;
    border: 1px solid #E2E8F0;
    border-top: 3px solid var(--subcategory-accent);
    background: #FFFFFF;
}

.listing-card:hover {
    border-color: #E2E8F0;
    border-top-color: var(--subcategory-accent);
}

.listing-card:focus-visible {
    outline: 3px solid var(--brand-green-border);
    outline-offset: 3px;
}

.category-badge {
    gap: 0.38rem;
    border-color: color-mix(in srgb, var(--category-accent) 24%, transparent);
    background: var(--category-soft);
    color: var(--category-dark);
}

.category-badge::before {
    width: 0.46rem;
    height: 0.46rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--category-accent);
    content: "";
}

.subcategory-chip {
    --chip-accent: var(--subcategory-accent);
    --chip-soft: var(--subcategory-soft);
    --chip-dark: var(--subcategory-dark);
    gap: 0.34rem;
    border-color: color-mix(in srgb, var(--chip-accent) 28%, transparent);
    background: var(--chip-soft);
    color: var(--chip-dark);
}

.subcategory-chip::before {
    width: 0.4rem;
    height: 0.4rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--chip-accent);
    content: "";
}

.listing-price,
.listing-availability {
    color: var(--brand-green-dark);
}

.listing-availability {
    font-weight: 800;
}

.freshness-badge {
    border: 1px solid var(--brand-green-border);
    background: var(--brand-green-soft);
    color: var(--brand-green-deep);
}

.card-cta {
    border-color: var(--brand-green-dark);
    background: var(--brand-green-dark);
    color: #FFFFFF;
}

.listing-card:hover .card-cta,
.listing-card:focus-visible .card-cta {
    border-color: var(--brand-green-deep);
    background: var(--brand-green-deep);
    color: #FFFFFF;
}

.card-media .image-view-overlay {
    background: rgba(4, 120, 87, 0.92);
    color: #FFFFFF;
}

.interest-meter.level-1 span:nth-child(-n + 1),
.interest-meter.level-2 span:nth-child(-n + 2),
.interest-meter.level-3 span:nth-child(-n + 3),
.interest-meter.level-4 span:nth-child(-n + 4) {
    background: var(--brand-green);
}
/* Classification accents for filters, quick links, detail, and seller dashboard. */
.category-filter-modern .chip.category-filter-chip,
.category-filter-modern .chip.subcategory-filter-chip {
    --filter-accent: #94A3B8;
    --filter-soft: #F8FAFC;
    --filter-dark: #475569;
    gap: 0.38rem;
    border-color: color-mix(in srgb, var(--filter-accent) 28%, transparent);
    background: var(--filter-soft);
    color: var(--filter-dark);
}

.category-filter-modern .chip.category-filter-chip::before,
.category-filter-modern .chip.subcategory-filter-chip::before,
.quick-category-pill::before {
    width: 0.42rem;
    height: 0.42rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--filter-accent);
    content: "";
}

.category-filter-modern .chip:hover,
.category-filter-modern .chip:focus-visible,
.category-filter-modern .chip.active-chip {
    border-color: var(--brand-green-dark);
    background: var(--brand-green-soft);
    color: var(--brand-green-deep);
    box-shadow: 0 8px 18px rgba(4, 120, 87, 0.14);
}

.category-filter-modern .chip:focus-visible,
.quick-category-pill:focus-visible {
    outline: 3px solid var(--brand-green-border);
    outline-offset: 2px;
}

.quick-category-pill {
    --filter-accent: #94A3B8;
    --filter-soft: #F8FAFC;
    --filter-dark: #475569;
    gap: 0.4rem;
    border-color: color-mix(in srgb, var(--filter-accent) 28%, transparent);
    background: var(--filter-soft);
    color: var(--filter-dark);
}

.quick-category-pill:hover,
.quick-category-pill:focus-visible {
    border-color: var(--brand-green-dark);
    background: var(--brand-green-soft);
    color: var(--brand-green-deep);
}

.dashboard-card {
    --category-accent: #64748B;
    --category-soft: #F1F5F9;
    --category-dark: #334155;
    --subcategory-accent: #94A3B8;
    --subcategory-soft: #F8FAFC;
    --subcategory-dark: #475569;
    border: 1px solid #E2E8F0;
    border-top: 3px solid var(--subcategory-accent);
    background: #FFFFFF;
}

.dashboard-category-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dashboard-category-badge {
    flex: 0 0 auto;
}

.dashboard-card .status-active {
    border: 1px solid var(--brand-green-border);
    background: var(--brand-green-soft);
    color: var(--brand-green-deep);
}

.listing-detail-page .listing-detail-hero {
    border-top: 3px solid var(--subcategory-accent);
}

.listing-detail-page .detail-badges {
    align-items: center;
}
/* Approved responsive interface: mobile homepage, listing detail, and desktop homepage. */
:root {
    --navy: #07172B;
}

html {
    max-width: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    max-width: 100%;
    overflow-x: clip;
    background: #F7FAF9;
    color: var(--navy);
}

.site-shell {
    max-width: 1440px;
    padding: 0 16px;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 80;
    overflow: visible;
    background: rgba(247, 250, 249, 0.94);
    backdrop-filter: blur(14px);
}

.navbar-inner {
    max-width: 1360px;
    min-height: 72px;
    padding: 10px 16px;
    border: 1px solid #E2E8F0;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 24px rgba(7, 23, 43, 0.08);
}

.navbar-logo {
    color: var(--navy);
}

.navbar-logo span {
    color: var(--brand-green-dark);
}

.navbar-tagline,
.navbar-username {
    color: #64748B;
}

.navbar-links a {
    color: var(--navy);
}

.navbar-links a:hover,
.navbar-links a.is-active {
    color: var(--brand-green-dark);
}

.navbar-links a::after {
    background: var(--brand-green);
}

.navbar-auth .btn-ghost {
    border-color: #CBD5E1;
    background: #FFFFFF;
    color: var(--navy);
}

.navbar-auth .btn-ghost:hover {
    border-color: var(--brand-green-dark);
    color: var(--brand-green-dark);
}

.navbar-toggle {
    border-color: #CBD5E1;
    background: #FFFFFF;
}

.navbar-toggle span {
    background: var(--navy);
}

.container {
    width: 100%;
    max-width: 1360px;
    margin-top: 1rem;
    padding-inline: 16px;
}

.btn {
    min-height: 44px;
    border-radius: 8px;
}

.btn-primary {
    border-color: var(--brand-green-dark);
    background: var(--brand-green-dark);
    box-shadow: 0 8px 18px rgba(4, 120, 87, 0.18);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    border-color: var(--brand-green-deep);
    background: var(--brand-green-deep);
}

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

/* Homepage */
.home-hero {
    grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
    gap: 2rem;
    min-height: 340px;
    margin-top: 0;
    padding: 1.4rem 0 1rem;
}

.home-hero::before {
    display: none;
}

.home-hero-copy h1 {
    max-width: 560px;
    color: var(--navy);
    font-size: 3.65rem;
    line-height: 1;
}

.home-hero-copy p {
    max-width: 520px;
    margin-top: 1rem;
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.55;
}

.hero-actions {
    margin-top: 1.35rem;
}

.home-hero-visual {
    min-height: 310px;
}

.island-scene {
    height: 320px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background-color: #F0FDFA;
}

.growth-strip {
    grid-template-columns: minmax(210px, 0.8fr) minmax(0, 2fr);
    margin: 0.35rem 0 1.5rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: #F0FDF4;
}

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

.growth-pill {
    min-height: 70px;
    border-radius: 8px;
    background: #FFFFFF;
}

.growth-pill strong {
    color: var(--brand-green-deep);
    font-size: 1rem;
}

.section-heading-row {
    margin-bottom: 0.8rem;
}

.section-title {
    color: var(--navy);
}

.section-text-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--brand-green-dark);
    font-size: 0.86rem;
    font-weight: 900;
    text-decoration: none;
}

.section-text-link:hover,
.section-text-link:focus-visible {
    color: var(--brand-green-deep);
    text-decoration: underline;
}

.quick-category-row {
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
}

.quick-category-row::-webkit-scrollbar,
.listing-grid--home-popular::-webkit-scrollbar,
.listing-grid--home-latest::-webkit-scrollbar,
.why-card-grid::-webkit-scrollbar {
    display: none;
}

.quick-category-pill {
    min-height: 48px;
    padding: 0.45rem 0.75rem 0.45rem 0.5rem;
    border-radius: 8px;
    scroll-snap-align: start;
}

.quick-category-icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 8px;
    background: var(--filter-accent);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 900;
}

.quick-category-pill::before {
    display: none;
}

.home-listing-section {
    margin: 1.45rem 0 1.8rem;
}

.listing-grid--home-popular,
.listing-grid--home-latest {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.home-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 46px;
    margin-top: 0.85rem;
    border: 1px solid var(--brand-green-dark);
    border-radius: 8px;
    background: var(--brand-green-dark);
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 900;
    text-decoration: none;
}

.home-view-all:hover,
.home-view-all:focus-visible {
    background: var(--brand-green-deep);
    color: #FFFFFF;
}

.why-card,
.home-final-cta {
    border-radius: 8px;
}

.home-final-cta {
    background: var(--navy);
}

.home-final-cta .btn-primary {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: var(--navy);
}

/* Shared listing cards */
.listing-card {
    position: relative;
    display: block;
    min-width: 0;
    border-radius: 8px;
}

.listing-card-link {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.listing-card-link:focus-visible {
    outline: 3px solid var(--brand-green-border);
    outline-offset: -3px;
}

.listing-card:focus-within {
    box-shadow: 0 0 0 3px var(--brand-green-border);
}

.listing-card .card-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.listing-card .card-cta {
    min-height: 44px;
    margin-top: auto;
}

.save-button {
    position: absolute;
    top: 0.62rem;
    right: 0.62rem;
    z-index: 5;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid #CBD5E1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #475569;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(7, 23, 43, 0.16);
}

.save-button span::before,
.detail-save-button span::before {
    content: "\2661";
    font-size: 1.45rem;
    line-height: 1;
}

.save-button.is-saved,
.detail-save-button.is-saved {
    border-color: #F9A8D4;
    background: #FDF2F8;
    color: #BE185D;
}

.save-button.is-saved span::before,
.detail-save-button.is-saved span::before {
    content: "\2665";
}

.save-button:focus-visible,
.detail-topbar-button:focus-visible {
    outline: 3px solid var(--brand-green-border);
    outline-offset: 2px;
}

.listing-list-view .listing-card {
    display: block;
}

.listing-list-view .listing-card-link {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
}

.listing-card--home-popular .card-media,
.listing-card--home-latest .card-media {
    height: 132px;
}

.listing-card--home-popular .card-body,
.listing-card--home-latest .card-body {
    min-height: 365px;
    padding: 0.72rem;
}

.listing-card--home-popular .card-body h2,
.listing-card--home-latest .card-body h2 {
    min-height: 2.55rem;
    margin-top: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

.listing-card--home-popular .card-description,
.listing-card--home-latest .card-description {
    min-height: 2.45rem;
    font-size: 0.78rem;
}

.listing-card--home-popular .meta,
.listing-card--home-latest .meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.74rem;
}

.listing-card--home-popular .activity-pill,
.listing-card--home-latest .activity-pill {
    font-size: 0.7rem;
}

.listing-card--home-popular .save-button,
.listing-card--home-latest .save-button {
    width: 40px;
    height: 40px;
}

/* Listing detail */
.mobile-detail-topbar {
    display: none;
}

.detail-primary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
    gap: 1rem;
    align-items: stretch;
}

.detail-primary-layout > .detail-panel,
.detail-primary-layout > .listing-detail-hero {
    height: 100%;
}

.detail-media-panel {
    padding: 0.85rem;
    border-top: 3px solid var(--subcategory-accent);
}

.detail-primary-layout .detail-media-frame {
    min-height: 380px;
}

.detail-primary-layout .detail-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.7rem;
}

.detail-image-count {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(7, 23, 43, 0.82);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 900;
}

.detail-primary-layout .listing-detail-hero {
    display: flex;
    flex-direction: column;
    padding: 1.2rem;
    border-top: 3px solid var(--subcategory-accent);
}

.detail-price {
    margin-top: 0.65rem;
    color: var(--brand-green-dark);
    font-size: 1.55rem;
    font-weight: 900;
}

.detail-summary {
    margin: 0.7rem 0 0;
    color: #475569;
    line-height: 1.6;
}

.detail-category-chips {
    margin-top: 0.8rem;
}

.detail-activity-pill {
    margin-top: 0.8rem;
}

.detail-seller-summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1rem;
    padding: 0.75rem;
    border: 1px solid #D7E3DD;
    border-radius: 8px;
    background: #FFFFFF;
}

.seller-avatar {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 999px;
    background: #E2E8F0;
    color: var(--navy);
    font-weight: 900;
}

.seller-summary-copy {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.seller-summary-copy strong {
    color: var(--navy);
    overflow-wrap: anywhere;
}

.seller-summary-copy small {
    color: #64748B;
    font-size: 0.78rem;
    font-weight: 700;
}

.seller-verified {
    margin-left: 0.28rem;
    color: var(--brand-green-dark) !important;
}

.seller-whatsapp-shortcut {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--brand-green-border);
    border-radius: 8px;
    background: var(--brand-green-soft);
    color: var(--brand-green-dark);
    font-weight: 900;
    text-decoration: none;
}

.detail-primary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: auto;
    padding-top: 1rem;
}

.detail-primary-actions .btn {
    justify-content: center;
    min-width: 0;
    text-align: center;
}

.detail-whatsapp-button {
    border-color: var(--brand-green-dark);
    background: var(--brand-green-dark);
    color: #FFFFFF;
}

.detail-listing-cta {
    border-color: var(--navy);
    background: var(--navy);
    color: #FFFFFF;
}

.detail-whatsapp-button:hover,
.detail-whatsapp-button:focus-visible,
.detail-listing-cta:hover,
.detail-listing-cta:focus-visible {
    border-color: var(--brand-green-deep);
    background: var(--brand-green-deep);
    color: #FFFFFF;
}

.detail-media-dots {
    pointer-events: none;
}

.detail-gallery img {
    touch-action: manipulation;
}

/* Tablet */
@media (max-width: 1280px) {
    .navbar-inner {
        background: #FFFFFF;
    }

    .navbar-menu {
        border-top-color: #E2E8F0;
    }

    .desktop-navigation a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: #F8FAFC;
        color: var(--navy);
    }

    .desktop-auth-buttons .btn,
    .desktop-auth-buttons form button {
        color: var(--navy);
    }

    .navbar-auth .btn-primary {
        color: #FFFFFF;
    }

    .home-hero {
        grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    }

    .listing-grid--home-popular,
    .listing-grid--home-latest {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .detail-primary-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    }
}

@media (max-width: 1024px) {
    .home-hero {
        grid-template-columns: minmax(0, 0.9fr) minmax(330px, 1.1fr);
    }

    .home-hero-copy h1 {
        font-size: 3rem;
    }

    .growth-strip {
        grid-template-columns: 1fr;
    }

    .listing-grid--home-popular,
    .listing-grid--home-latest {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .detail-primary-layout {
        grid-template-columns: 1fr;
    }

    .detail-primary-layout .detail-media-frame {
        min-height: 340px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 1rem;
    }

    body {
        padding-bottom: 82px;
    }

    .site-shell {
        padding: 0;
    }

    .navbar {
        background: #FFFFFF;
        backdrop-filter: none;
    }

    .navbar-inner {
        min-height: 64px;
        padding: 10px 14px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: 0 5px 16px rgba(7, 23, 43, 0.07);
    }

    .navbar-brand {
        max-width: calc(100% - 58px);
    }

    .navbar-logo {
        max-width: calc(100vw - 112px);
        color: var(--navy);
        font-size: 1.18rem;
    }

    .navbar-menu {
        max-height: calc(100vh - 78px);
        margin-top: 0.45rem;
        padding: 0.75rem 0 0.3rem;
        overflow-y: auto;
    }

    .desktop-navigation a,
    .desktop-auth-buttons .btn,
    .desktop-auth-buttons form button {
        min-height: 46px;
    }

    .container {
        margin: 0.6rem auto 1.5rem;
        padding-inline: 14px;
    }

    .mobile-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 120;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: 70px;
        padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        border-top: 1px solid #DCE5E1;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 -8px 24px rgba(7, 23, 43, 0.09);
        backdrop-filter: blur(14px);
    }

    .mobile-bottom-nav a {
        display: flex;
        min-width: 0;
        min-height: 54px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 0.22rem;
        border-radius: 8px;
        color: #64748B;
        font-size: 0.64rem;
        font-weight: 800;
        line-height: 1.05;
        text-align: center;
        text-decoration: none;
    }

    .mobile-bottom-nav a.is-active {
        color: var(--brand-green-dark);
    }

    .mobile-nav-icon {
        position: relative;
        display: block;
        width: 22px;
        height: 22px;
        color: currentColor;
    }

    .mobile-nav-icon-home::before {
        position: absolute;
        left: 4px;
        bottom: 2px;
        width: 14px;
        height: 13px;
        border: 2px solid currentColor;
        border-radius: 3px;
        content: "";
    }

    .mobile-nav-icon-home::after {
        position: absolute;
        left: 5px;
        top: 2px;
        width: 11px;
        height: 11px;
        border-top: 2px solid currentColor;
        border-left: 2px solid currentColor;
        content: "";
        transform: rotate(45deg);
    }

    .mobile-nav-icon-browse::before {
        position: absolute;
        left: 2px;
        top: 2px;
        width: 7px;
        height: 7px;
        border: 2px solid currentColor;
        border-radius: 2px;
        content: "";
        box-shadow: 11px 0 0 -2px #FFFFFF, 11px 0 0 0 currentColor, 0 11px 0 -2px #FFFFFF, 0 11px 0 0 currentColor, 11px 11px 0 -2px #FFFFFF, 11px 11px 0 0 currentColor;
    }

    .mobile-nav-icon-listings::before {
        position: absolute;
        inset: 3px 2px;
        border: 2px solid currentColor;
        border-radius: 3px;
        content: "";
    }

    .mobile-nav-icon-listings::after {
        position: absolute;
        left: 6px;
        right: 5px;
        top: 8px;
        height: 2px;
        background: currentColor;
        content: "";
        box-shadow: 0 5px 0 currentColor;
    }

    .mobile-nav-icon-profile::before {
        position: absolute;
        left: 7px;
        top: 2px;
        width: 8px;
        height: 8px;
        border: 2px solid currentColor;
        border-radius: 999px;
        content: "";
    }

    .mobile-nav-icon-profile::after {
        position: absolute;
        left: 3px;
        bottom: 1px;
        width: 16px;
        height: 9px;
        border: 2px solid currentColor;
        border-radius: 10px 10px 3px 3px;
        content: "";
    }

    .mobile-nav-icon-chat::before {
        position: absolute;
        inset: 2px;
        display: grid;
        place-items: center;
        border: 2px solid currentColor;
        border-radius: 999px;
        content: "W";
        font-size: 0.62rem;
        font-weight: 900;
    }

    .mobile-nav-post {
        color: var(--brand-green-dark) !important;
    }

    .mobile-nav-icon-post {
        width: 36px;
        height: 36px;
        margin-top: -18px;
        border-radius: 999px;
        background: var(--brand-green-dark);
        box-shadow: 0 5px 14px rgba(4, 120, 87, 0.28);
    }

    .mobile-nav-icon-post::before,
    .mobile-nav-icon-post::after {
        position: absolute;
        left: 10px;
        top: 17px;
        width: 16px;
        height: 2px;
        border-radius: 999px;
        background: #FFFFFF;
        content: "";
    }

    .mobile-nav-icon-post::after {
        transform: rotate(90deg);
    }

    footer {
        margin-bottom: 0;
        padding: 1.2rem 1rem;
        font-size: 0.78rem;
    }

    .home-hero {
        grid-template-columns: 1fr;
        gap: 0.7rem;
        min-height: 0;
        margin-top: 0;
        padding: 0.75rem 0 0.4rem;
    }

    .home-hero-copy h1 {
        max-width: 100%;
        font-size: 2.15rem;
        line-height: 1.02;
    }

    .home-hero-copy p {
        margin-top: 0.65rem;
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        margin-top: 0.85rem;
    }

    .hero-actions .btn {
        min-width: 0;
        min-height: 46px;
        padding-inline: 0.65rem;
        font-size: 0.8rem;
    }

    .home-hero-visual {
        min-height: 150px;
        height: 150px;
    }

    .island-scene {
        height: 150px;
        border-radius: 8px;
    }

    .island-scene .sun {
        top: 25px;
        right: 18%;
        transform: scale(0.6);
    }

    .island-scene .water {
        bottom: 14px;
        height: 48px;
    }

    .island-scene .buildings {
        left: 12%;
        bottom: 38px;
        transform: scale(0.55);
        transform-origin: left bottom;
    }

    .island-scene .laptop {
        right: 4%;
        bottom: 20px;
        transform: scale(0.48) rotate(7deg);
        transform-origin: right bottom;
    }

    .growth-strip {
        display: block;
        margin: 0.65rem 0 1rem;
        padding: 0.65rem;
    }

    .growth-intro {
        margin-bottom: 0.55rem;
    }

    .growth-intro span {
        font-size: 0.76rem;
    }

    .growth-stat-row {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        padding-bottom: 0.2rem;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
    }

    .growth-stat-row::-webkit-scrollbar {
        display: none;
    }

    .growth-pill {
        flex: 0 0 142px;
        min-height: 66px;
        scroll-snap-align: start;
    }

    .quick-category-section,
    .why-connectboard {
        margin: 1rem 0 1.2rem;
    }

    .section-heading-row {
        align-items: flex-start;
    }

    .section-caption {
        font-size: 0.76rem;
    }

    .quick-category-row {
        gap: 0.5rem;
        margin-right: -14px;
        padding-right: 14px;
    }

    .quick-category-pill {
        min-height: 46px;
        padding-right: 0.7rem;
        font-size: 0.76rem;
    }

    .home-listing-section {
        margin: 1.1rem 0 1.35rem;
    }

    .listing-grid--home-popular,
    .listing-grid--home-latest {
        display: flex;
        gap: 0.7rem;
        margin-right: -14px;
        padding: 0.15rem 14px 0.65rem 0;
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
    }

    .listing-grid--home-popular .listing-card,
    .listing-grid--home-latest .listing-card {
        width: 224px;
        flex: 0 0 224px;
        scroll-snap-align: start;
    }

    .listing-grid--home-popular .listing-card:nth-child(n + 5),
    .listing-grid--home-latest .listing-card:nth-child(n + 9) {
        display: none;
    }

    .listing-card--home-popular .card-media,
    .listing-card--home-latest .card-media {
        height: 126px;
    }

    .listing-card--home-popular .card-body,
    .listing-card--home-latest .card-body {
        min-height: 350px;
    }

    .section-link-desktop {
        display: none;
    }

    .why-card-grid {
        display: flex;
        gap: 0.7rem;
        margin-right: -14px;
        padding-right: 14px;
        overflow-x: auto;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
    }

    .why-card {
        flex: 0 0 230px;
        scroll-snap-align: start;
    }

    .home-final-cta {
        gap: 0.85rem;
        margin-top: 1.2rem;
        padding: 1rem;
    }

    .home-final-cta h2 {
        font-size: 1.35rem;
    }

    .home-final-cta .btn {
        min-height: 48px;
    }

    .page-listing_detail .site-shell {
        display: none;
    }

    .page-listing_detail .container {
        max-width: 640px;
        margin-top: 0;
        padding: 0;
    }

    .page-listing_detail footer {
        display: none;
    }

    .listing-detail-page {
        gap: 0;
        background: #FFFFFF;
    }

    .mobile-detail-topbar {
        position: sticky;
        top: 0;
        z-index: 70;
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr) 80px;
        min-height: 58px;
        align-items: center;
        padding: 7px 10px;
        border-bottom: 1px solid #E2E8F0;
        background: rgba(255, 255, 255, 0.98);
        text-align: center;
        backdrop-filter: blur(12px);
    }

    .mobile-detail-topbar > strong {
        color: var(--navy);
        font-size: 0.92rem;
    }

    .detail-topbar-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.25rem;
    }

    .detail-topbar-button {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--navy);
        font-size: 1.2rem;
        font-weight: 900;
        text-decoration: none;
        cursor: pointer;
    }

    .detail-share-icon::before {
        content: "\2197";
        font-size: 1.15rem;
    }

    [data-share-listing] {
        position: relative;
    }

    [data-share-listing].is-confirmed::after {
        position: absolute;
        top: 48px;
        right: 8px;
        padding: 0.35rem 0.5rem;
        border-radius: 6px;
        background: var(--navy);
        color: #FFFFFF;
        content: "Link copied";
        font-size: 0.7rem;
        white-space: nowrap;
    }

    .detail-primary-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .detail-primary-layout > .detail-panel,
    .detail-primary-layout > .listing-detail-hero {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .detail-media-panel {
        padding: 0;
        border-bottom: 1px solid #E2E8F0;
    }

    .detail-primary-layout .detail-media-frame {
        min-height: 275px;
        max-height: 440px;
        border: 0;
        border-radius: 0;
        aspect-ratio: 4 / 3;
    }

    .detail-full-image-button {
        left: 0.75rem;
        right: auto;
        bottom: 0.75rem;
        min-height: 40px;
    }

    .detail-image-count {
        top: auto;
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .detail-media-arrow {
        width: 44px;
        height: 44px;
    }

    .detail-primary-layout .detail-gallery {
        display: flex;
        gap: 0.5rem;
        margin: 0;
        padding: 0.6rem 0.75rem;
        overflow-x: auto;
    }

    .detail-primary-layout .detail-gallery img {
        width: 76px;
        height: 62px;
        flex: 0 0 76px;
    }

    .detail-primary-layout .listing-detail-hero {
        padding: 1rem 14px 1.1rem;
    }

    .listing-detail-hero .detail-page-title {
        margin-top: 0.8rem;
        font-size: 1.55rem;
    }

    .detail-price {
        font-size: 1.35rem;
    }

    .detail-summary {
        font-size: 0.9rem;
    }

    .detail-meta-line {
        gap: 0.4rem 0.7rem !important;
        font-size: 0.78rem;
    }

    .detail-seller-summary {
        margin-top: 0.9rem;
    }

    .detail-primary-actions {
        grid-template-columns: 1fr;
        margin-top: 0.9rem;
        padding-top: 0;
    }

    .detail-primary-actions .btn {
        min-height: 50px;
    }

    .listing-detail-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.75rem;
        background: #F7FAF9;
    }

    .listing-detail-main,
    .listing-detail-sidebar {
        display: grid;
        gap: 0.75rem;
    }

    .listing-detail-main .detail-panel,
    .listing-detail-sidebar .sidebar-card,
    .seller-reviews-panel {
        border-radius: 8px;
        box-shadow: none;
    }

    .seller-reviews-panel {
        margin: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .detail-owner-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .detail-owner-actions .btn,
    .detail-owner-actions .inline-form,
    .detail-owner-actions .inline-form .btn {
        width: 100%;
    }
}

@media (max-width: 425px) {
    .navbar-inner {
        padding-inline: 12px;
    }

    .container {
        padding-inline: 12px;
    }

    .home-hero-copy h1 {
        font-size: 2rem;
    }

    .hero-actions {
        grid-template-columns: 1fr 1fr;
    }

    .growth-pill {
        flex-basis: 132px;
    }

    .listing-grid--home-popular,
    .listing-grid--home-latest,
    .quick-category-row,
    .why-card-grid {
        margin-right: -12px;
        padding-right: 12px;
    }

    .listing-grid--home-popular .listing-card,
    .listing-grid--home-latest .listing-card {
        width: 216px;
        flex-basis: 216px;
    }

    .mobile-detail-topbar {
        grid-template-columns: 74px minmax(0, 1fr) 74px;
    }

    .detail-topbar-button {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 340px) {
    .navbar-logo {
        font-size: 1.05rem;
    }

    .hero-actions {
        grid-template-columns: 1fr;
    }

    .mobile-bottom-nav a {
        font-size: 0.58rem;
    }

    .mobile-nav-icon-post {
        width: 34px;
        height: 34px;
    }

    .listing-grid--home-popular .listing-card,
    .listing-grid--home-latest .listing-card {
        width: 208px;
        flex-basis: 208px;
    }
}

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

    .listing-card,
    .interest-meter span,
    .btn {
        transition: none;
        animation: none;
    }
}


/* Post listing: progressive category selector. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.listing-basic-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.35fr);
    align-items: start;
    gap: 1rem;
}

.listing-basic-grid > *,
.category-field {
    min-width: 0;
}

.listing-type-field select,
.category-select-fallback select {
    width: 100%;
    max-width: 100%;
}

.category-select-fallback {
    display: grid;
    gap: 0.45rem;
}

.subcategory-selector-shell {
    overflow: hidden;
    border: 1px solid #DCE6E1;
    border-radius: 8px;
    background: #FFFFFF;
}

.subcategory-selector-shell[hidden],
.subcategory-selector[hidden],
.category-empty-state[hidden],
.category-select-fallback[hidden] {
    display: none !important;
}

.category-selector-heading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 58px;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--category-accent) 24%, #E2E8F0);
    background: var(--category-soft);
    color: #0F172A;
}

.category-selector-heading > div {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.category-selector-heading strong {
    color: var(--category-accent);
    font-size: 0.93rem;
}

.category-selector-heading span:last-child {
    color: #64748B;
    font-size: 0.78rem;
    line-height: 1.35;
}

.category-selector-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 7px solid var(--category-soft);
    border-radius: 50%;
    background: var(--category-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--category-accent) 36%, transparent);
}

.category-empty-state {
    margin: 0;
    padding: 1rem;
    color: #64748B;
    font-size: 0.86rem;
}

.subcategory-selector {
    min-width: 0;
    margin: 0;
    padding: 0.85rem;
    border: 0;
}

.subcategory-selector legend {
    width: 100%;
    margin: 0 0 0.65rem;
    padding: 0;
    color: var(--category-accent);
    font-size: 0.82rem;
    font-weight: 800;
}

.subcategory-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.subcategory-option {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 44px;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid #CBD5E1;
    border-radius: 999px;
    background: #FFFFFF;
    color: #334155;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.25;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.subcategory-option:hover {
    border-color: var(--subcategory-accent);
    background: var(--subcategory-soft);
}

.subcategory-option:focus-within {
    outline: 3px solid var(--brand-green-border);
    outline-offset: 2px;
}

.subcategory-option input[type="radio"] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    accent-color: var(--brand-green-dark);
}

.subcategory-marker {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--subcategory-accent);
}

.subcategory-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.subcategory-selected {
    display: none;
    color: var(--brand-green-dark);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.subcategory-option.is-selected,
.subcategory-option:has(input[type="radio"]:checked) {
    border-color: var(--subcategory-accent);
    background: var(--subcategory-soft);
    color: var(--subcategory-dark);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.14);
}

.subcategory-option.is-selected .subcategory-selected,
.subcategory-option:has(input[type="radio"]:checked) .subcategory-selected {
    display: inline;
}

.category-help-text {
    display: block;
    margin-top: 0.45rem;
}

@media (max-width: 768px) {
    .listing-basic-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }

    .subcategory-selector {
        padding: 0.75rem;
    }

    .subcategory-options {
        gap: 0.5rem;
    }

    .subcategory-option {
        min-height: 46px;
        padding-inline: 0.75rem;
    }
}

@media (max-width: 425px) {
    .subcategory-option {
        width: 100%;
        border-radius: 8px;
    }

    .subcategory-selected {
        margin-left: auto;
    }
}


/* Listing browse sorting and pagination. */
.hero-search {
    grid-template-columns: minmax(220px, 1.7fr) minmax(150px, 0.9fr) minmax(160px, 1fr) auto;
}

.results-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.desktop-sort-form {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.desktop-sort-form label {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 800;
}

.desktop-sort-form select {
    width: auto;
    min-width: 180px;
    min-height: 42px;
    padding: 0 2.2rem 0 0.75rem;
    border: 1px solid #CBD5E1;
    border-radius: 7px;
    background-color: #FFFFFF;
    color: #0F172A;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 750;
}

.desktop-sort-form select:focus-visible,
.mobile-results-button:focus-visible,
.listing-sort-close:focus-visible,
.mobile-sort-options label:focus-within,
.listing-pagination a:focus-visible {
    outline: 3px solid var(--brand-green-border);
    outline-offset: 2px;
}

.mobile-results-actions {
    display: none;
}

.listing-sort-sheet[hidden] {
    display: none !important;
}

.listing-sort-sheet {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.48);
}

.listing-sort-dialog {
    width: min(100%, 440px);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid #DCE6E1;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.listing-sort-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.listing-sort-dialog-head h2 {
    margin: 0;
    font-size: 1.05rem;
}

.listing-sort-close {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    padding: 0;
    border: 1px solid #CBD5E1;
    border-radius: 50%;
    background: #FFFFFF;
    color: #334155;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.mobile-sort-options {
    display: grid;
    gap: 0.45rem;
}

.mobile-sort-options label {
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    color: #1E293B;
    font-size: 0.9rem;
    font-weight: 750;
    cursor: pointer;
}

.mobile-sort-options label:has(input:checked) {
    border-color: var(--brand-green-dark);
    background: var(--brand-green-soft);
    color: var(--brand-green-deep);
}

.mobile-sort-options input {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    margin: 0;
    accent-color: var(--brand-green-dark);
}

.mobile-sort-apply {
    width: 100%;
    min-height: 48px;
    margin-top: 0.9rem;
}

.listing-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.2rem;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 750;
}

.listing-pagination a,
.listing-pagination .is-disabled {
    display: inline-flex;
    min-width: 88px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.75rem;
    border: 1px solid #CBD5E1;
    border-radius: 7px;
    background: #FFFFFF;
    color: var(--brand-green-dark);
    text-decoration: none;
}

.listing-pagination .is-disabled {
    color: #94A3B8;
    background: #F8FAFC;
}

@media (max-width: 780px) {
    .results-toolbar {
        align-items: center;
    }

    .results-toolbar > strong {
        min-width: 0;
        font-size: 0.95rem;
    }

    .listing-sort-enhanced .desktop-sort-form {
        display: none;
    }

    .mobile-results-actions:not([hidden]) {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
        gap: 0.65rem;
        margin-bottom: 0.9rem;
    }

    .mobile-results-button {
        display: inline-flex;
        min-width: 0;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        padding: 0.65rem 0.75rem;
        border: 1px solid #CBD5E1;
        border-radius: 7px;
        background: #FFFFFF;
        color: #1E293B;
        font: inherit;
        font-size: 0.82rem;
        font-weight: 800;
        cursor: pointer;
    }

    .mobile-sort-button {
        overflow: hidden;
        border-color: var(--brand-green-border);
        background: var(--brand-green-soft);
        color: var(--brand-green-deep);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .filter-panel.is-mobile-collapsible:not(.is-mobile-open) {
        display: none;
    }

    .filter-panel.is-mobile-open {
        margin-bottom: 0.9rem;
    }

    .listing-sort-sheet {
        align-items: end;
        padding: 0;
    }

    .listing-sort-dialog {
        width: 100%;
        max-height: 86vh;
        max-height: 86dvh;
        padding: 1rem 14px max(1rem, env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 8px 8px 0 0;
    }

    .listing-pagination {
        justify-content: space-between;
        gap: 0.45rem;
    }

    .listing-pagination a,
    .listing-pagination .is-disabled {
        min-width: 76px;
    }
}

@media (max-width: 380px) {
    .mobile-results-actions:not([hidden]) {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
        gap: 0.45rem;
    }

    .mobile-results-button {
        padding-inline: 0.5rem;
        font-size: 0.76rem;
    }

    .view-toggle a {
        padding-inline: 0.65rem;
    }
}

/* Canonical navbar layout: desktop regions and early responsive menu. */
.site-shell {
    width: 100%;
    max-width: 1720px;
    margin-inline: auto;
    padding-inline: 16px;
    box-sizing: border-box;
}

.navbar,
.navbar-inner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.navbar-inner {
    max-width: 1680px;
    min-width: 0;
    margin-inline: auto;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: clamp(14px, 1.25vw, 24px);
}

.navbar-brand {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    flex: 1 1 280px;
    min-width: 210px;
    max-width: 380px;
    overflow: hidden;
}

.navbar-brand,
.brand-mark,
.navbar-logo,
.navbar-toggle {
    flex-shrink: 0;
}

.navbar-logo,
.navbar-tagline {
    white-space: nowrap;
}

.navbar-logo {
    min-width: 0;
}

.navbar-tagline {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-links {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1vw, 22px);
}

.navbar-actions {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.navbar-links a,
.navbar-actions a,
.navbar-actions button,
.navbar-user-greeting {
    flex-shrink: 0;
    white-space: nowrap;
}

.navbar-primary-action,
.navbar-secondary-action,
.navbar-actions button {
    min-height: 44px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-sizing: border-box;
}

.navbar-actions form {
    display: flex;
    margin: 0;
}

.navbar-toggle {
    display: none;
}

@media (min-width: 1451px) and (max-width: 1600px) {
    .navbar-inner {
        gap: 14px;
    }

    .navbar-brand {
        grid-template-rows: auto;
        flex-basis: 210px;
        max-width: 260px;
    }

    .navbar-brand .brand-mark {
        grid-row: 1;
    }

    .navbar-tagline {
        display: none;
    }

    .navbar-links {
        gap: 12px;
    }

    .navbar-primary-action,
    .navbar-secondary-action,
    .navbar-actions button {
        padding-inline: 14px;
    }
}

@media (max-width: 1450px) {
    .site-shell {
        padding-inline: 12px;
    }

    .navbar-inner {
        min-height: 64px;
        padding: 10px 16px;
        flex-wrap: wrap;
        gap: 0.7rem;
    }

    .navbar-brand {
        order: 1;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto;
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 60px);
        overflow: visible;
    }

    .navbar-brand .brand-mark {
        grid-row: 1;
        width: 34px;
        height: 34px;
    }

    .navbar-tagline {
        display: none;
    }

    .navbar-logo {
        max-width: calc(100vw - 112px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar-toggle {
        order: 2;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-links,
    .navbar-actions {
        display: none;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-items: stretch;
        flex-direction: column;
        box-sizing: border-box;
    }

    .navbar-links {
        order: 3;
        gap: 6px;
        padding-top: 12px;
        border-top: 1px solid #E2E8F0;
    }

    .navbar-actions {
        order: 4;
        gap: 8px;
    }

    .navbar-inner.menu-open .navbar-links,
    .navbar-inner.menu-open .navbar-actions {
        display: flex;
    }

    .navbar-links a,
    .navbar-actions a,
    .navbar-actions button,
    .navbar-user-greeting {
        width: 100%;
        min-height: 48px;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        box-sizing: border-box;
        text-align: center;
    }

    .navbar-links a {
        background: #F8FAFC;
    }

    .navbar-links a::after {
        display: none;
    }

    .navbar-actions form {
        width: 100%;
    }

    .navbar-user-greeting {
        background: #F1F5F9;
    }
}

@media (max-width: 425px) {
    .site-shell {
        padding-inline: 0;
    }

    .navbar-inner {
        padding-inline: 14px;
    }

    .navbar-brand {
        grid-template-columns: 32px minmax(0, 1fr);
        max-width: calc(100% - 56px);
    }

    .navbar-brand .brand-mark {
        width: 32px;
        height: 32px;
    }

    .navbar-logo {
        max-width: calc(100vw - 106px);
        font-size: 1.1rem;
    }
}
/* Homepage category icon cards. */
.category-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 18px;
    width: 100%;
    max-width: 100%;
}

.category-card {
    --category-accent: var(--brand-green);
    --category-soft: var(--brand-green-soft);
    --category-dark: var(--brand-green-deep);
    min-width: 0;
    min-height: 220px;
    padding: 24px 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    border: 1px solid #E2E8F0;
    border-bottom: 3px solid var(--category-accent);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    color: var(--category-dark);
    text-align: center;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.category-card__icon {
    width: 82px;
    height: 82px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--category-soft);
    color: var(--category-accent);
}

.category-card__icon svg {
    width: 40px;
    height: 40px;
}

.category-card__title {
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--category-dark);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.category-card__action {
    min-height: 38px;
    padding: 8px 16px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 999px;
    background: var(--category-soft);
    color: var(--category-accent);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
}

.category-card__action > span {
    font-size: 1.15em;
    line-height: 1;
}

.category-card:focus-visible {
    outline: 3px solid var(--category-accent);
    outline-offset: 3px;
}

@media (hover: hover) {
    .category-card:hover {
        border-color: color-mix(in srgb, var(--category-accent) 32%, #E2E8F0);
        border-bottom-color: var(--category-accent);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.11);
        transform: translateY(-4px);
    }
}

@media (max-width: 1100px) {
    .category-grid {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
}

@media (max-width: 600px) {
    .category-grid {
        display: flex;
        gap: 12px;
        max-width: 100%;
        padding: 3px 2px 10px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
    }

    .category-grid::-webkit-scrollbar {
        display: none;
    }

    .category-card {
        flex: 0 0 155px;
        min-height: 180px;
        padding: 18px 12px 16px;
        gap: 12px;
        scroll-snap-align: start;
    }

    .category-card__icon {
        width: 64px;
        height: 64px;
    }

    .category-card__icon svg {
        width: 32px;
        height: 32px;
    }

    .category-card__title {
        min-height: 2.4em;
        font-size: 0.96rem;
    }

    .category-card__action {
        min-height: 36px;
        padding: 8px 13px;
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-card {
        transition: none;
    }
}
/* All listings responsive overflow containment. */
.listings-page,
.listing-search-panel,
.listings-content,
.browse-layout,
.results-panel,
.listings-toolbar-top,
.results-toolbar-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.listing-search-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(170px, 1fr) minmax(160px, 1fr) auto;
    gap: 14px;
    align-items: stretch;
    box-sizing: border-box;
}

.listing-search-form > *,
.listing-search-form__query,
.listing-search-form__category,
.listing-search-form__city {
    min-width: 0;
}

.listing-search-form__query,
.listing-search-form__category,
.listing-search-form__city {
    display: flex;
}

.listing-search-form input:not([type="hidden"]),
.listing-search-form select,
.listing-search-form button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.listing-search-form__submit {
    width: auto;
    min-width: 110px;
    white-space: nowrap;
}

.listing-category-tabs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    box-sizing: border-box;
}

.listing-category-tabs::-webkit-scrollbar {
    display: none;
}

.listing-category-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
}

.listings-toolbar-top,
.results-toolbar-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.results-panel > .listing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.results-panel > .listing-grid.listing-list-view {
    grid-template-columns: minmax(0, 1fr);
}

.results-panel .listing-card {
    min-width: 0;
    max-width: 100%;
}

.browse-header .page-subtitle {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .listing-search-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .listing-search-form__query,
    .listing-search-form__submit {
        grid-column: 1 / -1;
    }

    .listing-search-form__submit {
        width: 100%;
    }
}

@media (max-width: 780px) {
    .results-toolbar-actions > * {
        flex: 1 1 150px;
        min-width: 0;
    }

    .mobile-results-actions:not([hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .listings-page {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 600px) {
    .listing-search-panel {
        padding: 1rem;
    }

    .listing-search-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .listing-search-form__query,
    .listing-search-form__category,
    .listing-search-form__city,
    .listing-search-form__submit {
        grid-column: 1;
        width: 100%;
    }

    .listing-search-form input:not([type="hidden"]),
    .listing-search-form select,
    .listing-search-form button {
        min-height: 48px;
    }

    .results-panel > .listing-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 380px) {
    .mobile-results-actions:not([hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Structured listings dashboard. */
.listings-page {
    --listings-surface: #FFFFFF;
    --listings-background: #F7FAF9;
    --listings-border: #E2E8F0;
    --listings-muted: #64748B;
    min-width: 0;
}

.listings-page .browse-header {
    margin: 1.1rem 0 1rem;
}

.listings-page .browse-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 12px;
}

.listings-page .browse-icon svg {
    width: 25px;
    height: 25px;
}

.listings-search-panel,
.listings-filter-sidebar,
.listings-results-panel {
    min-width: 0;
    border: 1px solid var(--listings-border);
    border-radius: 18px;
    background: var(--listings-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.listings-search-panel {
    margin-bottom: 24px;
    padding: 20px;
}

.listings-dashboard {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.listings-filter-sidebar {
    position: static;
    padding: 20px;
}

.listings-filter-sidebar .filter-head {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--listings-border);
}

.listing-filter-field {
    margin-top: 18px;
}

.listings-filter-sidebar .listing-filter-field > label,
.mobile-filter-sheet .listing-filter-field > label {
    margin: 0 0 7px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 800;
}

.listing-filter-field .filter-control {
    min-height: 46px;
    border-color: #CBD5E1;
    border-radius: 8px;
}

.listing-mode-fieldset {
    min-width: 0;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
}

.listing-mode-fieldset legend {
    margin-bottom: 9px;
    padding: 0;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 800;
}

.listing-mode-fieldset .check-option {
    min-height: 38px;
    margin: 0;
    padding: 7px 8px;
    border-radius: 8px;
}

.listing-mode-fieldset .check-option:has(input:checked) {
    background: var(--brand-green-soft);
    color: var(--brand-green-deep);
}

.listing-mode-fieldset input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand-green-dark);
}

.listings-filter-sidebar .filter-results {
    min-height: 46px;
    margin-top: 24px;
}

.listings-results-panel {
    padding: 18px;
}

.listings-toolbar-top {
    min-height: 48px;
    margin-bottom: 16px;
}

.results-panel > .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.tablet-filter-button,
.mobile-results-button {
    gap: 7px;
}

.tablet-filter-button {
    display: none;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    background: #FFFFFF;
    color: #0F172A;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.active-filter-count {
    min-width: 21px;
    height: 21px;
    display: inline-grid;
    place-items: center;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--brand-green-dark);
    color: #FFFFFF;
    font-size: 0.7rem;
    line-height: 1;
}

.mobile-listing-count {
    display: none;
}

.filter-sheet-backdrop[hidden],
.mobile-filter-sheet[hidden] {
    display: none !important;
}

.filter-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 148;
    background: rgba(7, 23, 43, 0.5);
}

.mobile-filter-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 149;
    width: min(100%, 620px);
    max-height: 88vh;
    max-height: 88dvh;
    min-height: 0;
    margin-inline: auto;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--listings-border);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: #FFFFFF;
    box-shadow: 0 -18px 52px rgba(15, 23, 42, 0.2);
}

.mobile-filter-handle {
    width: 44px;
    height: 5px;
    margin: 9px auto 2px;
    border-radius: 999px;
    background: #CBD5E1;
}

.mobile-filter-head {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px 10px;
    border-bottom: 1px solid var(--listings-border);
}

.mobile-filter-head h2 {
    margin: 0;
    color: #07172B;
    font-size: 1.08rem;
}

.mobile-filter-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-filter-head-actions a,
.seller-rating-link {
    color: var(--brand-green-dark);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.mobile-filter-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #CBD5E1;
    border-radius: 50%;
    background: #FFFFFF;
    color: #334155;
    font-size: 1.35rem;
    cursor: pointer;
}

.mobile-filter-form {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
}

.mobile-filter-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 16px 18px;
}

.mobile-filter-apply {
    width: auto;
    min-height: 50px;
    margin: 12px 16px max(12px, env(safe-area-inset-bottom));
}

body.listing-filter-sheet-open {
    overflow: hidden;
}

.seller-rating-summary {
    gap: 6px;
}

.seller-rating-link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    margin-top: 4px;
}

@media (min-width: 1100px) {
    .listings-filter-sidebar {
        position: sticky;
        top: 96px;
        max-height: calc(100vh - 112px);
        overflow-y: auto;
    }
}

@media (max-width: 1099px) {
    .listings-dashboard {
        display: block;
    }

    .listing-dashboard-enhanced .listings-filter-sidebar {
        display: none;
    }

    .listing-dashboard-enhanced .tablet-filter-button {
        display: inline-flex;
    }

    .listings-results-panel {
        width: 100%;
    }
}

@media (min-width: 651px) and (max-width: 1099px) {
    .mobile-results-actions:not([hidden]) {
        display: none;
    }

    .listing-dashboard-enhanced .desktop-sort-form {
        display: flex;
    }
}

@media (max-width: 650px) {
    .listings-page .browse-header {
        margin-top: 0.85rem;
    }

    .listings-page .browse-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 10px;
    }

    .listings-search-panel {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 14px;
    }

    .listings-results-panel {
        padding: 12px;
        border-radius: 14px;
    }

    .listings-toolbar-top {
        display: none;
    }

    .mobile-results-actions:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 12px;
    }

    .mobile-results-button {
        min-height: 48px;
        border-radius: 8px;
    }

    .mobile-listing-count {
        grid-column: 1 / -1;
        display: block;
        color: #334155;
        font-size: 0.9rem;
    }

    .results-panel > .listing-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .listing-category-tabs {
        gap: 8px;
    }

    .listing-category-tab {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
    }

    .listing-pagination {
        margin-bottom: calc(12px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 380px) {
    .mobile-results-actions:not([hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-results-button {
        padding-inline: 8px;
        font-size: 0.76rem;
    }
}
/* Final five-bar Interest and private listing analytics. */
.interest-meter span:nth-child(5) {
    animation-delay: 360ms;
}

.interest-meter.level-1 span:nth-child(-n + 1),
.interest-meter.level-2 span:nth-child(-n + 2),
.interest-meter.level-3 span:nth-child(-n + 3),
.interest-meter.level-4 span:nth-child(-n + 4),
.interest-meter.level-5 span:nth-child(-n + 5) {
    background: var(--brand-green, #079669);
    animation-name: interest-fill;
}

.returning-interest-badge {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.45rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #f0fdf4;
    color: #047857;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.analytics-page {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.analytics-page-header,
.analytics-funnel-row,
.analytics-period-tabs {
    display: flex;
    align-items: center;
}

.analytics-page-header {
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.analytics-page-header h1 {
    margin: 0.35rem 0 0.2rem;
    font-size: clamp(1.65rem, 4vw, 2.35rem);
}

.analytics-page-header p,
.analytics-helper {
    color: #64748b;
}

.analytics-back-link {
    color: #047857;
    font-weight: 800;
}

.analytics-period-tabs {
    gap: 0.4rem;
    overflow-x: auto;
    margin-bottom: 1.2rem;
    padding-bottom: 0.2rem;
}

.analytics-period-tabs a {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0.68rem 0.9rem;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-weight: 800;
}

.analytics-period-tabs a.is-active {
    border-color: #047857;
    background: #047857;
    color: #fff;
}

.analytics-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.analytics-metric-grid > div,
.analytics-funnel,
.analytics-interest-panel {
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #fff;
}

.analytics-metric-grid > div {
    min-width: 0;
    padding: 1rem;
}

.analytics-metric-grid span,
.analytics-definition-grid dt,
.analytics-funnel span {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.analytics-metric-grid strong {
    display: block;
    margin-top: 0.35rem;
    color: #052e2b;
    font-size: 1.45rem;
}

.analytics-funnel,
.analytics-interest-panel {
    margin-top: 1rem;
    padding: 1rem;
}

.analytics-funnel h2,
.analytics-interest-panel h2 {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
}

.analytics-funnel-row {
    justify-content: space-between;
    gap: 0.75rem;
}

.analytics-funnel-row > div {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.85rem;
    border-radius: 8px;
    background: #f0fdf4;
    text-align: center;
}

.analytics-funnel-row strong {
    display: block;
    color: #047857;
    font-size: 1.35rem;
}

.analytics-definition-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.analytics-definition-grid > div {
    min-width: 0;
    padding: 0.8rem;
    border-radius: 8px;
    background: #f8fafc;
}

.analytics-definition-grid dd {
    margin: 0.3rem 0 0;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-weight: 800;
}

.analytics-helper {
    margin: 1rem 0 0;
    font-size: 0.82rem;
}

.dashboard-analytics-row a {
    color: #047857;
    font-weight: 800;
}

@media (max-width: 720px) {
    .analytics-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .analytics-funnel-row {
        align-items: stretch;
        flex-direction: column;
    }

    .analytics-funnel-row > b {
        transform: rotate(90deg);
        text-align: center;
    }
}

@media (max-width: 420px) {
    .analytics-metric-grid,
    .analytics-definition-grid {
        grid-template-columns: 1fr;
    }
}
/* Option B: balanced and spacious listing detail. */
.listing-detail-page--balanced {
    --brand-green: #10b981;
    --brand-green-dark: #047857;
    --brand-green-soft: #ecfdf5;
    --detail-navy: #07172b;
    --detail-surface: #ffffff;
    --detail-page-background: #f7faf9;
    --detail-border: #e2e8f0;
    --detail-muted: #64748b;
    --detail-yellow: #facc15;
    width: min(1320px, 100%);
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    color: #0f172a;
}

.listing-detail-page--balanced *,
.listing-detail-page--balanced *::before,
.listing-detail-page--balanced *::after {
    box-sizing: border-box;
}

.listing-hero-option-b {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    gap: 24px;
    align-items: stretch;
    min-width: 0;
}

.listing-gallery-panel,
.listing-information-panel,
.detail-information-panel,
.detail-support-panel {
    min-width: 0;
    border: 1px solid var(--detail-border);
    border-radius: 8px;
    background: var(--detail-surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.listing-gallery-panel {
    padding: 14px;
}

.listing-gallery {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
}

.listing-thumbnails--vertical {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    max-height: 540px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.listing-thumbnail-button {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #f8fafc;
    cursor: pointer;
}

.listing-thumbnail-button img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    object-fit: cover;
}

.listing-thumbnail-button img.is-active {
    padding: 1px;
    border: 2px solid var(--brand-green-dark);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.14);
}

.listing-thumbnail-button:focus-visible {
    outline: 3px solid rgba(16, 185, 129, 0.28);
    outline-offset: 2px;
}

.listing-gallery__stage.listing-main-image.detail-media-frame {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid #dbe4ea;
    border-radius: 8px;
    background: #f8fafc;
}

.listing-gallery__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.listing-gallery__image,
.listing-gallery__fallback {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
}

.listing-gallery__image {
    object-fit: contain;
    object-position: center;
    cursor: zoom-in;
}

.listing-gallery__image[hidden] {
    display: none;
}

.listing-gallery__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0f2fe, #dcfce7);
    color: #0f172a;
    font-weight: 900;
}

.listing-gallery__previous,
.listing-gallery__next,
.listing-gallery__counter,
.listing-gallery__dots,
.listing-gallery__fullscreen {
    z-index: 3;
}

.listing-gallery__dots {
    pointer-events: auto;
}

.listing-information-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
}

.detail-badges--grouped {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.detail-badges--grouped .category-badge,
.detail-badges--grouped .status-pill,
.detail-badges--grouped .freshness-badge {
    max-width: 100%;
    font-size: 0.74rem;
    line-height: 1.2;
}

.listing-information-panel .detail-page-title {
    max-width: 100%;
    margin: 0;
    color: var(--detail-navy);
    font-size: 2rem;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.listing-information-panel .detail-price {
    margin: -2px 0 0;
    color: var(--brand-green-dark);
    font-size: 1.6rem;
    font-weight: 900;
}

.listing-information-panel .detail-summary {
    margin: 0;
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.listing-information-panel .detail-category-chips {
    margin: 0;
}

.detail-location-time {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--detail-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.listing-engagement-panel {
    display: grid;
    grid-template-columns: 0.8fr 1.4fr 1fr;
    gap: 14px;
    min-width: 0;
    padding: 16px 18px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: linear-gradient(135deg, #111827 0%, #07172b 100%);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
    color: #fff;
}

.engagement-stat {
    min-width: 0;
}

.engagement-label {
    display: block;
    margin-bottom: 7px;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.engagement-reach,
.engagement-status {
    display: block;
    overflow-wrap: anywhere;
}

.engagement-reach {
    color: var(--detail-yellow);
    font-size: 1.2rem;
}

.engagement-status {
    color: #fff;
    font-size: 0.82rem;
    line-height: 1.3;
}

.listing-engagement-panel .interest-meter {
    display: grid;
    grid-template-columns: repeat(5, minmax(12px, 1fr));
    align-items: center;
    gap: 4px;
    width: 100%;
    height: auto;
    min-height: 18px;
}

.listing-engagement-panel .interest-segment {
    width: 100%;
    height: 10px;
    border-radius: 3px;
    background: #475569;
    transform: none;
    animation: none;
}

.listing-engagement-panel .interest-segment.is-active {
    background: var(--brand-green);
}

.interest-meter .interest-segment.is-active {
    background: var(--brand-green, #10b981);
}

.returning-interest-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding-top: 10px;
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #d1fae5;
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

.returning-icon {
    color: var(--brand-green);
    font-size: 1rem;
}

.detail-seller-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid var(--detail-border);
    border-radius: 8px;
    background: #fbfdfc;
    box-shadow: none;
}

.detail-seller-card .seller-summary-copy {
    min-width: 0;
}

.detail-seller-card .seller-summary-copy strong,
.detail-seller-card .seller-summary-copy small {
    overflow-wrap: anywhere;
}

.detail-primary-actions,
.mobile-listing-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.detail-primary-actions .btn,
.mobile-listing-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0.72rem 0.9rem;
    text-align: center;
    white-space: normal;
}

.detail-whatsapp-button {
    border-color: var(--brand-green-dark);
    background: var(--brand-green-dark);
    color: #fff;
}

.detail-listing-cta {
    border-color: var(--detail-navy);
    background: var(--detail-navy);
    color: #fff;
}

.mobile-listing-actions {
    display: none;
}

.listing-information-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr 1fr;
    gap: 18px;
    align-items: start;
    margin-top: 20px;
}

.detail-information-panel {
    overflow: hidden;
}

.detail-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    border: 0;
    border-bottom: 1px solid var(--detail-border);
    background: #fff;
    color: var(--detail-navy);
    font: inherit;
    font-size: 0.98rem;
    font-weight: 900;
    text-align: left;
}

.detail-section-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.detail-heading-mark {
    width: 4px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 3px;
    background: var(--brand-green);
}

.detail-toggle-icon {
    display: none;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

.detail-section-toggle[aria-expanded="true"] .detail-toggle-icon {
    transform: rotate(225deg);
}

.detail-section-content {
    min-width: 0;
    padding: 16px;
}

.detail-section-content[hidden] {
    display: none;
}

.detail-section-content .detail-copy {
    color: #334155;
    font-size: 0.93rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.detail-section-content .detail-feature-row {
    margin-top: 14px;
}

.detail-notes {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--detail-border);
    color: #475569;
}

.detail-notes > strong {
    display: block;
    margin-bottom: 6px;
    color: var(--detail-navy);
}

.detail-row-list {
    margin: 0;
    padding: 0;
}

.detail-row-list li {
    display: grid;
    grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: start;
    padding: 10px 0;
    border-top: 1px solid #edf2f7;
}

.detail-row-list li:first-child {
    padding-top: 0;
    border-top: 0;
}

.detail-row-list span {
    color: var(--detail-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.detail-row-list a,
.detail-row-list strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 800;
    text-align: right;
}

.detail-row-list a {
    color: var(--brand-green-dark);
}

.detail-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 18px;
    margin-top: 18px;
}

.detail-support-panel {
    padding: 16px;
}

.detail-support-panel h2 {
    margin: 0 0 12px;
    color: var(--detail-navy);
    font-size: 1rem;
}

.listing-detail-page--balanced .seller-reviews-panel {
    margin-top: 18px;
}

@media (min-width: 768px) and (max-width: 1099px) {
    .listing-hero-option-b {
        grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
        gap: 16px;
    }

    .listing-gallery-panel {
        padding: 10px;
    }

    .listing-gallery {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 8px;
    }

    .listing-gallery__stage.listing-main-image.detail-media-frame {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .listing-gallery__dots {
        bottom: 4rem;
    }

    .listing-information-panel {
        gap: 11px;
        padding: 16px;
    }

    .listing-information-panel .detail-page-title {
        font-size: 1.55rem;
    }

    .listing-engagement-panel {
        gap: 9px;
        padding: 13px 12px 10px;
    }

    .listing-information-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .detail-toggle-icon {
        display: block;
    }

    .detail-section-toggle {
        cursor: pointer;
    }
}

@media (max-width: 767px) {
    .listing-detail-page--balanced {
        padding-bottom: 158px;
    }

    .listing-hero-option-b {
        display: block;
    }

    .listing-gallery-panel,
    .listing-information-panel {
        border-radius: 8px;
    }

    .listing-gallery-panel {
        padding: 10px;
    }

    .listing-gallery {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .listing-gallery__stage.listing-main-image.detail-media-frame {
        order: 1;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .listing-gallery__dots {
        bottom: 4rem;
    }

    .listing-thumbnails--vertical {
        order: 2;
        flex-direction: row;
        max-width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px;
    }

    .listing-thumbnail-button {
        width: 70px;
        flex: 0 0 70px;
    }

    .listing-information-panel {
        gap: 12px;
        margin-top: 12px;
        padding: 16px 14px;
    }

    .listing-information-panel .detail-page-title {
        font-size: 1.65rem;
    }

    .listing-information-panel .detail-price {
        font-size: 1.4rem;
    }

    .detail-location-time {
        font-size: 0.8rem;
    }

    .listing-engagement-panel {
        gap: 9px;
        padding: 13px 12px 10px;
    }

    .engagement-status {
        font-size: 0.76rem;
    }

    .detail-primary-actions {
        display: none;
    }

    .mobile-listing-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(70px + env(safe-area-inset-bottom));
        z-index: 50;
        display: grid;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--detail-border);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(12px);
    }

    .listing-information-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 12px;
    }

    .detail-toggle-icon {
        display: block;
    }

    .detail-section-toggle {
        min-height: 50px;
        cursor: pointer;
    }

    .detail-section-content {
        padding: 14px;
    }

    .detail-support-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 12px;
    }
}

@media (max-width: 380px) {
    .listing-engagement-panel {
        grid-template-columns: 1fr 1fr;
    }

    .engagement-stat--interest {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .returning-interest-row {
        grid-row: 3;
    }

    .detail-row-list li {
        grid-template-columns: minmax(76px, 0.7fr) minmax(0, 1.3fr);
        gap: 8px;
    }

    .mobile-listing-actions {
        padding-right: 10px;
        padding-left: 10px;
    }

    .mobile-listing-actions .btn {
        padding-right: 0.58rem;
        padding-left: 0.58rem;
        font-size: 0.82rem;
    }
}
/* Unified public listing analytics and evidence-based badges. */
.public-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 26px;
    padding: 0.28rem 0.55rem;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.public-badge--success,
.public-badge--activity {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #047857;
}

.public-badge--fresh {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.public-badge--urgent {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.public-badge--promotion {
    border-color: #fde68a;
    background: #fffbeb;
    color: #a16207;
}

.public-badge--info {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
}

.public-activity-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.public-activity-slot:empty {
    display: none;
}

.card-activity-badge {
    margin-top: 0.75rem;
}

.listing-engagement-panel--three {
    grid-template-columns: 0.8fr 1.4fr 1fr;
}

.listing-engagement-panel--two {
    grid-template-columns: minmax(0, 1.35fr) minmax(110px, 0.65fr);
}

.listing-engagement-panel--one {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 380px) {
    .listing-engagement-panel--three {
        grid-template-columns: 1fr 1fr;
    }

    .listing-engagement-panel--two {
        grid-template-columns: minmax(0, 1.2fr) minmax(92px, 0.8fr);
    }

    .listing-engagement-panel--two .engagement-stat--interest {
        grid-column: auto;
        grid-row: auto;
    }
}/* Role-aware analytics summaries and responsive owner reporting. */
.growth-pill small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted, #64748b);
    font-size: 0.75rem;
    line-height: 1.35;
}

.dashboard-analytics-row .analytics-period-label {
    flex-basis: 100%;
    color: var(--text-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-analytics-row small {
    flex-basis: 100%;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

.analytics-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 640px) {
    .growth-pill { min-width: 0; }
    .growth-pill strong,
    .growth-pill small { overflow-wrap: anywhere; }
    .analytics-header-actions { width: 100%; }
    .analytics-header-actions .btn { flex: 1 1 160px; }
    .dashboard-analytics-row { align-items: flex-start; }
}


/* Adaptive public listing engagement and content-height mobile cards. */
.listing-card .card-description {
    min-height: 0;
}

.listing-card .meta {
    justify-content: flex-start;
    gap: 0.35rem 0.45rem;
}

.meta-time {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.meta-time::before {
    margin-right: 0.45rem;
    color: #94a3b8;
    content: "\00b7";
}

.listing-card--home-popular .meta-time::before,
.listing-card--home-latest .meta-time::before {
    display: none;
}

.listing-card-engagement {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.7rem;
    padding: 0.36rem 0.55rem;
    border: 1px solid #dbe7e2;
    border-radius: 999px;
    background: #f7faf9;
    color: #526273;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
}

.listing-card-reach {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #356452;
}

.listing-card-reach-icon {
    color: var(--brand-green-dark);
    font-size: 0.68rem;
}

.listing-card-interest-label {
    color: #475569;
}

.listing-card-interest-status {
    color: #64748b;
    font-weight: 750;
}

.engagement-dot {
    color: #94a3b8;
}

.listing-card-engagement .interest-meter {
    flex: 0 0 auto;
}

.listing-engagement-panel.is-reach-only {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 18px;
    width: auto;
    min-width: 180px;
    max-width: 100%;
    min-height: 0;
    padding: 14px 18px;
}

.listing-engagement-panel.is-reach-only .engagement-stat--reach {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.listing-engagement-panel.is-reach-only .engagement-label {
    margin-bottom: 0;
}

.listing-engagement-panel.is-interest-only {
    grid-template-columns: minmax(0, 1.35fr) minmax(110px, 0.65fr);
}

.listing-engagement-panel.is-reach-and-interest {
    grid-template-columns: 0.8fr 1.4fr 1fr;
}

@media (max-width: 768px) {
    .listing-card,
    .listing-card-link {
        height: auto;
        min-height: 0;
    }

    .listing-card .card-body,
    .listing-card--home-popular .card-body,
    .listing-card--home-latest .card-body {
        min-height: 0;
        flex: 0 1 auto;
    }

    .listing-card--home-popular .card-body h2,
    .listing-card--home-latest .card-body h2,
    .listing-card--home-popular .card-description,
    .listing-card--home-latest .card-description {
        min-height: 0;
    }

    .listing-card .card-cta {
        min-height: 44px;
        margin-top: 4px;
    }

    .listing-grid--home-popular,
    .listing-grid--home-latest {
        align-items: flex-start;
    }

    .listing-engagement-panel.is-reach-only {
        padding: 12px 14px;
    }
}

@media (max-width: 380px) {
    .listing-engagement-panel.is-interest-only {
        grid-template-columns: minmax(0, 1.2fr) minmax(92px, 0.8fr);
    }

    .listing-engagement-panel.is-interest-only .engagement-stat--interest {
        grid-column: auto;
        grid-row: auto;
    }

    .listing-engagement-panel.is-reach-and-interest {
        grid-template-columns: 1fr 1fr;
    }

    .listing-engagement-panel.is-reach-and-interest .engagement-stat--interest {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .listing-card-engagement {
        max-width: 100%;
    }
}

/* Calendar-week public activity strip. */
.growth-strip {
    display: block;
    margin: 0.45rem 0 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.growth-stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.growth-pill {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 112px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(7, 23, 43, 0.06);
}

.growth-pill .growth-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #10b981;
}

.growth-pill__icon svg {
    width: 22px;
    height: 22px;
}

.growth-pill .growth-pill__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.growth-pill .growth-pill__copy strong,
.growth-pill .growth-pill__copy > span,
.growth-pill .growth-pill__copy small {
    display: block;
    margin: 0;
    overflow-wrap: break-word;
    letter-spacing: 0;
    text-transform: none;
}

.growth-pill .growth-pill__copy strong {
    color: #07172b;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.15;
}

.growth-pill .growth-pill__copy > span {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 800;
}

.growth-pill .growth-pill__copy small {
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.35;
}

.growth-pill .growth-pill__indicator {
    position: absolute;
    top: 14px;
    right: 14px;
    display: block;
    width: 8px;
    height: 8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px #d1fae5;
}

.growth-pill--activity.is-empty-state .growth-pill__copy strong {
    font-size: 1.05rem;
    line-height: 1.25;
}

.growth-pill .growth-pill__combined {
    max-width: 100%;
    font-size: 1.08rem;
    line-height: 1.3;
    overflow-wrap: normal;
    white-space: normal;
}

.growth-pill .growth-pill__starting {
    max-width: 100%;
}

@media (max-width: 900px) {
    .growth-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .growth-strip {
        margin-block: 0.65rem 1.15rem;
    }

    .growth-stat-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        overflow: visible;
        padding: 0;
    }

    .growth-pill,
    .growth-pill:last-child {
        grid-column: auto;
        width: 100%;
        min-height: 94px;
        padding: 14px;
    }

    .growth-pill .growth-pill__copy strong {
        font-size: 1.3rem;
    }

    .growth-pill--activity.is-empty-state .growth-pill__copy strong {
        font-size: 1rem;
    }

    .growth-pill .growth-pill__combined {
        font-size: 1rem;
    }
}
/* Listing image upload and removal controls. */
.listing-image-field {
    min-width: 0;
}

.listing-image-control {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    background: #f8fafc;
}

.listing-image-current {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.listing-image-preview {
    width: 64px;
    height: 64px;
    border: 1px solid #dbe4ee;
    border-radius: 6px;
    background: #ffffff;
    object-fit: contain;
}

.listing-image-current-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.listing-image-current-copy strong,
.listing-image-upload > span {
    color: #07172b;
    font-size: 0.82rem;
    font-weight: 800;
}

.listing-image-current-copy a {
    color: #475569;
    font-size: 0.78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.listing-image-remove {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff7f7;
    color: #7f1d1d;
    cursor: pointer;
}

.listing-image-remove input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #dc2626;
}

.listing-image-remove span {
    display: grid;
    gap: 2px;
}

.listing-image-remove strong {
    font-size: 0.84rem;
}

.listing-image-remove small {
    color: #991b1b;
    font-size: 0.75rem;
    line-height: 1.35;
}

.listing-image-control.is-marked-for-removal {
    border-color: #fca5a5;
    background: #fffafa;
}

.listing-image-control.is-marked-for-removal .listing-image-current {
    opacity: 0.55;
}

.listing-image-upload {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.listing-image-upload input[type="file"] {
    width: 100%;
    min-width: 0;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font: inherit;
}

.listing-image-upload input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 800;
    cursor: pointer;
}

.listing-image-field.field-has-error .listing-image-control {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.listing-image-field.field-has-error .listing-image-remove input {
    box-shadow: none;
}

@media (max-width: 640px) {
    .listing-image-control {
        padding: 10px;
    }

    .listing-image-current {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .listing-image-preview {
        width: 54px;
        height: 54px;
    }

    .listing-image-remove {
        min-height: 56px;
    }
}

/* Scalable All Listings catalogue. */
.listings-page[data-catalogue-page]{width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow:clip}
.catalogue-header{align-items:center}
.listings-search-panel[data-catalogue-search]{display:grid;gap:16px}
.listings-search-panel[data-catalogue-search] .listing-search-form{grid-template-columns:minmax(260px,1fr) minmax(155px,.22fr) minmax(180px,.3fr) auto}
.catalogue-primary-tabs,.catalogue-subcategory-tabs,.catalogue-quick-scroll{min-width:0;display:flex;align-items:center;gap:9px}
.catalogue-primary-tabs,.catalogue-subcategory-tabs{flex-wrap:wrap}
.catalogue-primary-tab,.catalogue-subcategory-tab,.catalogue-quick-chip{flex:0 0 auto;min-height:42px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid #dbe3ea;border-radius:8px;background:#fff;color:#334155;font-size:.82rem;font-weight:800;line-height:1.2;text-decoration:none;white-space:nowrap;transition:border-color 160ms ease,background 160ms ease,color 160ms ease,box-shadow 160ms ease}
.catalogue-primary-tab{min-height:46px;padding:0 17px}
.catalogue-primary-tab:hover,.catalogue-primary-tab:focus-visible,.catalogue-primary-tab.is-active{border-color:var(--filter-accent,#10b981);background:var(--filter-soft,#ecfdf5);color:var(--filter-dark,#047857);box-shadow:inset 0 -3px 0 var(--filter-accent,#10b981)}
.catalogue-subcategory-tabs{padding-top:14px;border-top:1px solid #e2e8f0}
.catalogue-subcategory-tab{min-height:38px;padding:0 14px;border-radius:999px}
.catalogue-subcategory-tab:hover,.catalogue-subcategory-tab:focus-visible,.catalogue-subcategory-tab.is-active{border-color:var(--filter-accent,#10b981);background:var(--filter-soft,#ecfdf5);color:var(--filter-dark,#047857)}
.catalogue-quick-filters{min-width:0;display:flex;align-items:center;gap:12px;padding-top:13px;border-top:1px solid #e2e8f0}
.catalogue-quick-label{flex:0 0 auto;color:#475569;font-size:.76rem;font-weight:900;text-transform:uppercase}
.catalogue-quick-scroll{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
.catalogue-quick-chip{min-height:38px;padding:0 13px;font-size:.78rem}
.catalogue-quick-chip:hover,.catalogue-quick-chip:focus-visible,.catalogue-quick-chip.is-active{border-color:#10b981;background:#ecfdf5;color:#047857}
.catalogue-quick-chip.is-active:before{content:"";width:7px;height:7px;margin-right:7px;border-radius:50%;background:#10b981}
.catalogue-quick-chip.is-disabled{color:#94a3b8;background:#f8fafc;cursor:not-allowed}
.listings-toolbar-top[data-catalogue-toolbar]{gap:16px;flex-wrap:wrap}
.catalogue-grouping{margin-left:auto;display:flex;align-items:center;gap:8px;color:#64748b;font-size:.76rem;font-weight:800}
.catalogue-segmented-control{display:inline-flex;padding:3px;border:1px solid #dbe3ea;border-radius:8px;background:#f8fafc}
.catalogue-segmented-control a{min-height:34px;display:inline-flex;align-items:center;padding:0 10px;border-radius:6px;color:#475569;font-size:.76rem;font-weight:800;text-decoration:none;white-space:nowrap}
.catalogue-segmented-control a.is-active{background:#fff;color:#047857;box-shadow:0 1px 4px rgba(15,23,42,.12)}
.catalogue-results,.catalogue-result-group{min-width:0}
.catalogue-results>.listing-grid,.catalogue-result-group>.listing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.catalogue-result-group+.catalogue-result-group{margin-top:30px;padding-top:24px;border-top:1px solid #e2e8f0}
.catalogue-result-group__header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.catalogue-result-group__header h2{margin:0;color:#07172b;font-size:1.08rem}
.catalogue-result-group__header span{color:#64748b;font-size:.78rem;font-weight:700}
.catalogue-results .listing-list-view{grid-template-columns:minmax(0,1fr)}
.catalogue-results .listing-list-view .listing-card-link{min-width:0;display:grid;grid-template-columns:minmax(190px,28%) minmax(0,1fr)}
.catalogue-results .listing-list-view .card-media{min-height:100%;aspect-ratio:auto}
.catalogue-results .listing-list-view .card-body{min-width:0;padding:18px 22px}
.catalogue-results .listing-list-view .card-description{-webkit-line-clamp:2}
.catalogue-progress{width:min(420px,100%);margin:26px auto 14px;text-align:center}
.catalogue-progress__copy{margin-bottom:8px;color:#64748b;font-size:.8rem;font-weight:700}
.catalogue-progress__track{height:5px;overflow:hidden;border-radius:999px;background:#e2e8f0}
.catalogue-progress__track span{height:100%;display:block;border-radius:inherit;background:#10b981;transition:width 220ms ease}
.catalogue-load-more-wrap{display:flex;justify-content:center;margin-top:14px}
.catalogue-load-more{min-width:164px;min-height:46px;border:1px solid #10b981;background:#fff;color:#047857}
.catalogue-load-more:hover,.catalogue-load-more:focus-visible{background:#ecfdf5}
.catalogue-load-more.is-loading{opacity:.65;pointer-events:none}
.catalogue-enhanced .catalogue-fallback-pagination.is-js-fallback{display:none}
@media(min-width:1380px){.catalogue-results>.listing-grid:not(.listing-list-view),.catalogue-result-group>.listing-grid:not(.listing-list-view){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1099px){.listings-search-panel[data-catalogue-search] .listing-search-form{grid-template-columns:minmax(0,1fr) minmax(150px,.26fr) minmax(170px,.32fr) auto}.catalogue-grouping{margin-left:0}}
@media(max-width:767px){.listings-page[data-catalogue-page]{overflow:visible}.catalogue-header .browse-icon{display:none}.catalogue-header .page-title{font-size:1.6rem}.listings-search-panel[data-catalogue-search]{gap:12px}.listings-search-panel[data-catalogue-search] .listing-search-form{grid-template-columns:repeat(2,minmax(0,1fr))}.listings-search-panel[data-catalogue-search] .listing-search-form__query{grid-column:1/-1}.listings-search-panel[data-catalogue-search] .listing-search-form__city{grid-column:2;grid-row:auto}.listings-search-panel[data-catalogue-search] .listing-search-form__submit{grid-column:1/-1}.catalogue-primary-tabs,.catalogue-subcategory-tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:3px;scrollbar-width:none}.catalogue-primary-tabs::-webkit-scrollbar,.catalogue-subcategory-tabs::-webkit-scrollbar,.catalogue-quick-scroll::-webkit-scrollbar{display:none}.catalogue-primary-tab{min-height:44px;padding-inline:15px}.catalogue-quick-filters{display:block}.catalogue-quick-label{display:block;margin-bottom:8px}.mobile-results-actions:not([hidden]){position:sticky;top:8px;z-index:35;margin:0 -4px 14px;padding:8px 4px;background:rgba(247,250,249,.96);backdrop-filter:blur(10px)}.catalogue-results>.listing-grid,.catalogue-result-group>.listing-grid{grid-template-columns:minmax(0,1fr);gap:14px}.catalogue-results .listing-list-view .listing-card-link{grid-template-columns:112px minmax(0,1fr)}.catalogue-results .listing-list-view .card-media{min-height:100%}.catalogue-results .listing-list-view .card-body{padding:12px}.catalogue-results .listing-list-view .card-description,.catalogue-results .listing-list-view .category-chips{display:none}.catalogue-results .listing-list-view .card-body h2{font-size:.96rem}.catalogue-result-group+.catalogue-result-group{margin-top:22px;padding-top:18px}}
@media(max-width:380px){.listings-search-panel[data-catalogue-search] .listing-search-form{grid-template-columns:minmax(0,1fr)}.listings-search-panel[data-catalogue-search] .listing-search-form__city,.listings-search-panel[data-catalogue-search] .listing-search-form__submit{grid-column:1;grid-row:auto}.listings-search-panel[data-catalogue-search] .listing-search-form__submit{width:100%}.catalogue-results .listing-list-view .listing-card-link{grid-template-columns:96px minmax(0,1fr)}.catalogue-results .listing-list-view .card-body{padding:10px}}

.listing-sort-sheet {
    z-index: 160;
}

/* Compact catalogue list rows. */
.catalogue-results .listing-list-view .listing-list-card {
    position: relative;
    display: block;
    min-width: 0;
}

.catalogue-results .listing-list-view .listing-list-card__link {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
}

.catalogue-results .listing-list-view .listing-list-card__media {
    align-self: start;
    width: 260px;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f3f4f6;
}

.catalogue-results .listing-list-view .listing-list-card__media img,
.catalogue-results .listing-list-view .listing-list-card__media .placeholder {
    width: 100%;
    height: 100%;
}

.catalogue-results .listing-list-view .listing-list-card__media img {
    object-fit: cover;
    object-position: center;
    display: block;
}

.catalogue-results .listing-list-view .listing-list-card__content {
    min-width: 0;
    min-height: 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
}

.catalogue-results .listing-list-view .listing-list-card__content .card-badge-row {
    padding-right: 48px;
}

.catalogue-results .listing-list-view .listing-list-card__title,
.catalogue-results .listing-list-view .listing-list-card__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.catalogue-results .listing-list-view .listing-list-card__title {
    margin: 8px 0 4px;
    -webkit-line-clamp: 2;
}

.catalogue-results .listing-list-view .listing-list-card__description {
    min-height: 0;
    margin-top: 4px;
    -webkit-line-clamp: 2;
}

.catalogue-results .listing-list-view .category-chips {
    max-height: 28px;
    overflow: hidden;
    margin-top: 7px;
}

.catalogue-results .listing-list-view .category-chips .subcategory-chip:nth-child(n + 2) {
    display: none;
}

.catalogue-results .listing-list-view .meta,
.catalogue-results .listing-list-view .public-activity-meta {
    margin-top: 7px;
}

.catalogue-results .listing-list-view .listing-list-card__actions {
    min-height: 38px;
    margin-top: auto;
}

@media (max-width: 1024px) and (min-width: 769px) {
    .catalogue-results .listing-list-view .listing-list-card__link {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .catalogue-results .listing-list-view .listing-list-card__media {
        width: 220px;
    }
}

@media (max-width: 768px) {
    .catalogue-results .listing-list-view .listing-list-card__link {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalogue-results .listing-list-view .listing-list-card__media {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .catalogue-results .listing-list-view .listing-list-card__content {
        padding: 14px;
    }
}
/* Catalogue filter submit buttons. */
.listings-filter-sidebar .filter-results,
.mobile-filter-form .mobile-filter-apply {
    border: 1px solid #047857;
    border-radius: 10px;
    background: #047857;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(4, 120, 87, 0.22);
}

.listings-filter-sidebar .filter-results:hover,
.listings-filter-sidebar .filter-results:focus-visible,
.mobile-filter-form .mobile-filter-apply:hover,
.mobile-filter-form .mobile-filter-apply:focus-visible {
    border-color: #065f46;
    background: #065f46;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(4, 120, 87, 0.28);
}

.listings-filter-sidebar .filter-results:focus-visible,
.mobile-filter-form .mobile-filter-apply:focus-visible {
    outline: 3px solid rgba(16, 185, 129, 0.3);
    outline-offset: 3px;
}

.listings-filter-sidebar .filter-results:active,
.mobile-filter-form .mobile-filter-apply:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.22);
}
/* Central category visual system: values are supplied by category_visuals.py. */
.listing-fallback {
    --visual-accent: var(--brand-green);
    --visual-soft: var(--brand-green-soft);
    --visual-dark: var(--brand-green-deep);
    width: 100%;
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    overflow: hidden;
    padding: 1rem;
    border: 0;
    border-top: 3px solid var(--visual-accent);
    border-radius: 0;
    background: var(--visual-soft);
    color: var(--visual-dark);
    text-align: center;
}

.listing-fallback.image-fallback-placeholder {
    display: none;
}

.listing-fallback__icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--visual-accent) 28%, #FFFFFF);
    border-radius: 50%;
    background: color-mix(in srgb, var(--visual-soft) 72%, #FFFFFF);
    color: var(--visual-accent);
}

.category-visual-icon {
    width: 26px;
    height: 26px;
    display: block;
    fill: none;
    stroke: currentColor;
    overflow: visible;
}

.listing-fallback__label {
    max-width: 18rem;
    color: var(--visual-dark);
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.card-media .listing-fallback,
.dashboard-card-media .listing-fallback {
    min-height: 100%;
}

.listing-gallery__fallback.listing-fallback {
    min-height: 100%;
    border: 0;
    border-top: 3px solid var(--visual-accent);
    border-radius: 0;
    letter-spacing: 0;
}

.listing-gallery__fallback .listing-fallback__icon {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
}

.listing-gallery__fallback .category-visual-icon {
    width: 36px;
    height: 36px;
}

.category-filter-modern .chip.category-filter-chip,
.category-filter-modern .chip.subcategory-filter-chip,
.catalogue-primary-tab,
.catalogue-subcategory-tab {
    border-color: color-mix(in srgb, var(--filter-accent) 24%, #E2E8F0);
    background: var(--filter-soft, var(--brand-green-soft));
    color: var(--filter-dark, var(--brand-green-deep));
}

.category-filter-modern .chip.category-filter-chip:hover,
.category-filter-modern .chip.category-filter-chip:focus-visible,
.category-filter-modern .chip.subcategory-filter-chip:hover,
.category-filter-modern .chip.subcategory-filter-chip:focus-visible,
.catalogue-primary-tab:hover,
.catalogue-primary-tab:focus-visible,
.catalogue-subcategory-tab:hover,
.catalogue-subcategory-tab:focus-visible {
    border-color: var(--filter-accent, var(--brand-green));
    background: var(--filter-soft, var(--brand-green-soft));
    color: var(--filter-dark, var(--brand-green-deep));
    outline: 3px solid color-mix(in srgb, var(--filter-accent, var(--brand-green)) 28%, transparent);
    outline-offset: 2px;
}

.category-filter-modern .chip.category-filter-chip.active-chip,
.category-filter-modern .chip.subcategory-filter-chip.active-chip,
.catalogue-primary-tab.is-active,
.catalogue-subcategory-tab.is-active {
    border-color: var(--filter-accent, var(--brand-green));
    background: var(--filter-accent, var(--brand-green));
    color: #FFFFFF;
    box-shadow: none;
}

.subcategory-option {
    border-color: color-mix(in srgb, var(--subcategory-accent) 22%, #CBD5E1);
    background: var(--subcategory-soft);
    color: var(--subcategory-dark);
}

.subcategory-option:focus-within {
    outline-color: color-mix(in srgb, var(--subcategory-accent) 42%, transparent);
}

.subcategory-option input[type="radio"] {
    accent-color: var(--subcategory-accent);
}

.subcategory-option.is-selected,
.subcategory-option:has(input[type="radio"]:checked) {
    border-color: var(--subcategory-accent);
    background: var(--subcategory-accent);
    color: #FFFFFF;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--subcategory-accent) 24%, transparent);
}

.subcategory-option.is-selected .subcategory-marker,
.subcategory-option:has(input[type="radio"]:checked) .subcategory-marker {
    background: #FFFFFF;
}

.subcategory-option.is-selected .subcategory-selected,
.subcategory-option:has(input[type="radio"]:checked) .subcategory-selected {
    color: #FFFFFF;
}

.catalogue-result-group__header h2 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--group-dark, #07172B);
}

.catalogue-result-group__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--group-soft, var(--brand-green-soft));
    color: var(--group-accent, var(--brand-green));
}

.catalogue-result-group__icon .category-visual-icon {
    width: 19px;
    height: 19px;
}

@media (max-width: 425px) {
    .listing-fallback__icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .listing-fallback__label {
        font-size: 0.8rem;
    }
}

/* Responsive category catalogue filters. */
.catalogue-category-filter-group {
    min-width: 0;
}

.catalogue-category-filter-group + .catalogue-category-filter-group {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.main-category-list,
.expanded-subcategory-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.catalogue-primary-tab.category-chip,
.catalogue-subcategory-tab.category-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.65rem 1rem;
    border: 1px solid var(--category-primary, #64748b);
    border-color: color-mix(in srgb, var(--category-primary, #64748b) 35%, transparent);
    border-radius: 999px;
    background: var(--category-background, #f8fafc);
    color: var(--category-text, #334155);
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.catalogue-primary-tab.category-chip:hover,
.catalogue-subcategory-tab.category-chip:hover {
    border-color: var(--category-primary, #64748b);
    background: var(--category-background, #f8fafc);
    color: var(--category-text, #334155);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--category-primary, #64748b) 14%, transparent);
}

.catalogue-primary-tab.category-chip:focus-visible,
.catalogue-subcategory-tab.category-chip:focus-visible {
    border-color: var(--category-primary, #64748b);
    background: var(--category-background, #f8fafc);
    color: var(--category-text, #334155);
    outline: 3px solid color-mix(in srgb, var(--category-primary, #64748b) 35%, transparent);
    outline-offset: 2px;
}

.catalogue-primary-tab.category-chip.is-selected,
.catalogue-primary-tab.category-chip[aria-pressed="true"],
.catalogue-subcategory-tab.category-chip.is-selected,
.catalogue-subcategory-tab.category-chip[aria-pressed="true"] {
    border-color: var(--category-primary, #64748b);
    background: var(--category-primary, #64748b);
    color: #ffffff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--category-primary, #64748b) 24%, transparent);
}

.category-chip__selected {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: currentColor;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

.filter-expand-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    margin-top: 10px;
    padding: 0.58rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.filter-expand-toggle:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.filter-expand-toggle:focus-visible {
    outline: 3px solid rgba(100, 116, 139, 0.28);
    outline-offset: 2px;
}

.filter-expand-toggle__icon {
    display: inline-grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1rem;
    line-height: 1;
}

@media (min-width: 768px) {
    .catalogue-enhanced .expanded-subcategory-list:not(.is-expanded) .category-chip:not(.is-desktop-visible) {
        display: none;
    }

    .catalogue-enhanced .subcategory-expand-toggle.has-desktop-overflow {
        display: inline-flex;
    }
}

@media (max-width: 767px) {
    .catalogue-primary-tabs.main-category-list,
    .catalogue-subcategory-tabs.expanded-subcategory-list {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.55rem;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 14px 5px 2px;
        scroll-padding-inline: 2px 14px;
        scroll-snap-type: inline proximity;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .catalogue-primary-tabs.main-category-list::-webkit-scrollbar,
    .catalogue-subcategory-tabs.expanded-subcategory-list::-webkit-scrollbar {
        display: none;
    }

    .main-category-list .category-chip,
    .expanded-subcategory-list .category-chip {
        scroll-snap-align: start;
    }

    .catalogue-enhanced .main-category-expand-toggle,
    .catalogue-enhanced .subcategory-expand-toggle.has-mobile-overflow {
        display: inline-flex;
    }

    .catalogue-enhanced .expanded-subcategory-list:not(.is-expanded) .category-chip:not(.is-mobile-visible) {
        display: none;
    }

    .catalogue-primary-tabs.main-category-list.is-expanded,
    .catalogue-subcategory-tabs.expanded-subcategory-list.is-expanded {
        flex-wrap: wrap;
        overflow: visible;
        padding-right: 2px;
        scroll-snap-type: none;
    }

    .main-category-list.is-expanded .category-chip,
    .expanded-subcategory-list.is-expanded .category-chip {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalogue-primary-tab.category-chip,
    .catalogue-subcategory-tab.category-chip,
    .filter-expand-toggle {
        transition: none;
    }
}
/* Super-admin-only website layout switcher. */
.superadmin-theme-toolbar {
    margin-top: 12px;
    margin-bottom: 4px;
}

.superadmin-theme-form {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #d7e2dc;
    border-radius: 8px;
    background: #f8fbf9;
}

.superadmin-theme-form label {
    min-width: 0;
    display: grid;
    margin-right: auto;
    color: #07172b;
    line-height: 1.2;
}

.superadmin-theme-form label span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.superadmin-theme-form label strong {
    font-size: 0.92rem;
}

.superadmin-theme-form select {
    min-width: 128px;
    min-height: 42px;
    padding: 0 34px 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #07172b;
    font: inherit;
    font-weight: 800;
}

.superadmin-theme-form .btn {
    min-height: 42px;
    padding-inline: 18px;
}

@media (max-width: 520px) {
    .superadmin-theme-toolbar {
        margin-top: 8px;
    }

    .superadmin-theme-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .superadmin-theme-form label {
        grid-column: 1 / -1;
    }

    .superadmin-theme-form select {
        width: 100%;
        min-width: 0;
    }
}