:root {
    --surface: #fff;
    --field: #fff;
    --accent: #09674c;
    --nav-surface: #fff;
}
svg.hm-icon { flex: none; vertical-align: middle; }
.bottom-nav { display: none; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; }
.market-banner, .package-strip {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    background: #0a4e3c; color: #fff; border-radius: 16px; padding: 18px 24px; margin-bottom: 22px;
}
.market-banner strong { font-size: clamp(20px, 4vw, 30px); }
.market-banner span, .package-strip small { display: block; color: #d4f3e6; }
.market-banner svg { color: #f2b936; }
.browse-title { margin-bottom: 8px; }
.category-grid, .category-picker { display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 10px; }
.category-grid .category, .category-picker .category {
    min-width: 0; white-space: normal; background: var(--surface); color: var(--dark);
    font-weight: 650; overflow-wrap: anywhere;
}
.category-picker { grid-template-columns: repeat(auto-fill,minmax(135px,1fr)); }
.category-picker .category { min-height: 105px; display: grid; place-content: center; }
.search-options { margin-bottom: 22px; }
.search-options summary { padding-block: 10px; cursor: pointer; font-weight: 650; }
.search-options .filterbar { margin-bottom: 0; }
.account-shell { max-width: 690px; margin: auto; }
.account-heading, .account-identity { display: flex; align-items: center; gap: 12px; }
.account-heading { justify-content: space-between; margin-bottom: 18px; }
.account-heading strong { font-size: 23px; }
.account-avatar { display: grid; place-items: center; border-radius: 50%; width: 54px; height: 54px; background: var(--cream); color: var(--accent); }
.account-tiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.account-tiles a {
    display: grid; justify-items: center; align-content: center; gap: 9px; min-height: 92px;
    text-align: center; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
}
.package-strip span { flex: 1; }
.account-links a, .account-links button {
    color: var(--dark); display: flex; gap: 13px; align-items: center; padding: 15px 7px;
    border: 0; border-bottom: 1px solid var(--line); background: transparent; width: 100%; text-align: left;
}
.account-links a>span, .thread-main { flex: 1; min-width: 0; }
.status-tabs { flex-wrap: nowrap; overflow: auto; padding-bottom: 8px; }
.status-tabs .chip { flex: none; min-height: 42px; display: grid; place-items: center; }
.listing-counts { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 14px; color: var(--muted); }
.listing-counts strong { color: var(--dark); }
.thread-thumb { width: 52px; height: 52px; flex: none; object-fit: cover; border-radius: 9px; }
.thread-main>strong, .thread-main>span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.inbox-row .thread-row { flex: 1; border: 0; min-width: 0; }
.inbox-row .thread-star { padding: 0 10px; }
.inbox-row .thread-star button { min-width: 44px; min-height: 44px; }
html[data-embedded] .bottom-nav { display: none; }

@media (prefers-color-scheme: dark) {
    body {
        --surface: #20292a;
        --field: #1c2526;
        --nav-surface: #1d2728;
        --dark: #f0f6f4;
        --green: #177357;
        --accent: #8ee6c0;
        --muted: #b3c5bf;
        --cream: #263334;
        --line: #38484a;
        background: #141c1d;
        color-scheme: dark;
    }
    a, .link-button, .eyebrow, .icon-link, .navline>a.active { color: var(--accent); }
    .brand, .account-links a { color: var(--dark); }
    .topbar { background: #1d2c2e; }
    .searchbar, input, select, textarea, .searchbar select { background: var(--field); color: var(--dark); border-color: var(--line); }
    .panel, .mine-card, .work-card, .work-menu>div, dialog { background: var(--surface); color: var(--dark); }
    .soft, .chip, .work-menu summary, .work-menu a, .work-menu button, .avatar { background: var(--cream); color: var(--accent); }
    .gold { color: #172322; }
    .notice { background: #1e3b31; border-color: #456358; }
    .error-box { background: #412826; color: #ffd6c9; border-color: #93554f; }
    .message { background: #293638; }
    .message.mine { background: #204b3c; }
    .plan-card .plan-price { color: var(--accent); }
}
@media (max-width: 700px) {
    body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .navline { display: none; }
    .topline { padding-block: 10px; }
    .topline>.soft { min-height: 44px; margin-left: auto; }
    .searchbar input { font-size: 16px; padding-inline: 6px; }
    .searchbar select { width: 83px; font-size: 13px; }
    .searchbar .button { padding-inline: 12px; }
    .bottom-nav {
        display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: stretch;
        position: fixed; z-index: 10; inset: auto 0 0;
        padding: 5px 2px calc(5px + env(safe-area-inset-bottom));
        background: var(--nav-surface); border-top: 1px solid var(--line);
    }
    .bottom-nav a {
        min-height: 58px; display: grid; grid-template-rows: 33px 17px;
        justify-items: center; align-items: center; align-content: center;
        gap: 2px; color: var(--muted); font-weight: 600; font-size: 11px;
    }
    .bottom-nav a:hover { text-decoration: none; }
    .bottom-nav a[aria-current] { color: var(--accent); }
    .bottom-nav a.nav-add svg { box-sizing: content-box; padding: 8px; border-radius: 50%; background: #f2b936; color: #162823; }
    .category-grid { grid-template-columns: repeat(4,minmax(0,1fr)); padding-bottom: 14px; overflow: visible; }
    .category-grid .category { font-size: 12px; padding: 9px 4px; }
    .category-picker { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .market-banner { padding: 14px; }
    .market-banner span { font-size: 13px; }
    .section-heading { gap: 9px; }
    .section-heading .button { padding-inline: 9px; flex: none; }
    .two-actions .button { padding: 10px 6px; min-height: 44px; font-size: 14px; }
    .status-tabs { margin-bottom: 13px; }
    .mine-card .mine-photo { height: auto; aspect-ratio: 1; }
    .thread-row { gap: 9px; }
    .work-menu summary { min-height: 36px; }
    .mine-body h2 { font-size: 17px; }
    .footer { padding-block: 15px; }
    .filterbar select { min-width: 0; }
    .form-grid input, .form-grid select, .form-grid textarea { font-size: 16px; }
    html[data-embedded] body { padding-bottom: 0; }
}
@media (max-width: 370px) {
    .category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .topline { gap: 6px; }
    .topline .brand { font-size: 18px; gap: 6px; }
}
.help-list details { border-bottom: 1px solid var(--line); padding: 13px 0; }
.help-list summary { font-weight: 650; cursor: pointer; }
.help-list p { margin-block: 10px 0; }
.screen-heading { display: flex; align-items: center; gap: 8px; }
.screen-heading h1 { margin: 0; }
.photo-field .hm-icon { color: var(--accent); margin-right: 4px; }
@media (max-width: 700px) {
    .topline>.soft { gap: 4px; padding-inline: 7px; }
    .topline>.soft .hm-icon { width: 15px; }
    .mine-list .mine-card { grid-template-columns: minmax(76px,24%) minmax(0,1fr); }
    .mine-list .mine-photo .image-placeholder { min-height: 0; font-size: 38px; }
    .mine-list .two-actions { gap: 6px; }
    .card-body h3 { overflow-wrap: anywhere; }
}

.phone-contacts summary { cursor: pointer; font-weight: 650; padding-block: 7px; }
.phone-contact { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.phone-contact small { margin-left: auto; flex: none; }
.phone-contact strong { min-width: 0; overflow-wrap: anywhere; }

.notice-bell {position: relative; flex-shrink: 0;}
.notice-count {position: absolute; top: 0; right: -3px; min-width: 1.15rem; padding: .12rem .28rem; border-radius: 99rem; background: #f2bd59; color: #172313; font-size: .65rem; text-align: center;}
.notice-count[hidden] {display: none;}
@media (max-width: 700px) {
    .topline:has(.notice-bell) .header-saved {display: none;}
}
.portfolio-card img {width: 100%; max-width: 420px; max-height: 260px; object-fit: cover; border-radius: .75rem; margin-bottom: .85rem;}
.portfolio-card h3, .portfolio-card p {overflow-wrap: anywhere;}

.location-short { display: none; }
@media (max-width: 700px) {
    .topline { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; }
    .topline .brand { font-size: 19px; gap: 7px; }
    .topline .brand-icon { width: 36px; height: 40px; flex: none; }
    .topline .brand-icon svg { width: 25px; }
    .topline .brand small { font-size: 8px; }
    .topline .searchbar { grid-column: 1 / -1; min-width: 0; }
    .topline>.icon-link { justify-self: stretch; }
}
@media (max-width: 370px) {
    .topline .brand { font-size: 17px; }
    .topline .brand small { letter-spacing: .025em; }
    .location-label { display: none; }
    .location-short { display: inline; }
}

.business-banner {
    width: 100%; margin: 12px auto; border-radius: 12px; box-shadow: 0 3px 12px #10342d18;
}
.business-banner img { display: block; width: 100%; height: 138px; object-fit: cover; border-radius: inherit; }
.business-banner .ad-banner-image { display: block; border-radius: inherit; }
.business-banner .ad-banner-image:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.business-banner-compact { margin-block: 10px; }
.business-banner-compact img { height: 96px; }
@media (max-width: 700px) {
    .business-banner-home { width: calc(100% + 34px); margin-inline: -17px; border-radius: 0; }
}

.account-avatar { width: 64px; height: 64px; flex: 0 0 64px; overflow: hidden; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-identity>span:last-child { min-width: 0; overflow-wrap: anywhere; }
.account-join h1 { font-size: clamp(23px, 4vw, 30px); }
.account-join form { margin-block: 16px; }
.account-email-form { gap: 12px; }
.profile-photo { display: grid; gap: 14px; }
.profile-photo .account-identity h2, .profile-photo .account-identity p { margin-bottom: 0; }
.login-panel details summary { cursor: pointer; margin-bottom: 10px; }
.google-sign-in {
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    color: #1f1f1f;
    background: #fff;
    border: 1px solid #747775;
    font: 500 14px/1.4 Arial, sans-serif;
    border-radius: 4px;
}
.google-sign-in:hover { background: #f5f8ff; }

.work-fieldset { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.work-fieldset legend { font-weight: 700; padding: 0 5px; }
.work-photo-grid, .work-skill-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 8px; }
.photo-slot-wrap { min-width: 0; }
.photo-slot { position: relative; display: grid; min-height: 104px; align-content: center; justify-items: center; gap: 6px; padding: 10px; text-align: center; border: 1px dashed var(--line); border-radius: 13px; background: var(--cream); cursor: pointer; overflow: hidden; }
.photo-slot:focus-within { outline: 2px solid var(--accent); }
.photo-slot-caption { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--dark); }
.photo-slot-action { font-size: 12px; color: var(--muted); }
.photo-slot input[type=file] { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.photo-slot [data-photo-preview]:empty { display: none; }
.photo-slot img { display: block; width: 100%; height: 105px; object-fit: cover; border-radius: 9px; }
.photo-slot:has([data-cover-photo]) { min-height: 138px; }
.photo-slot:has([data-cover-photo]) img { height: 160px; }
.photo-remove { margin-top: 5px; }
.work-video { max-width: 100%; width: 100%; display: block; max-height: 440px; margin-block: 10px; border-radius: 10px; background: #111; }
.portfolio-photos { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; }
.portfolio-photos img { flex: 0 0 100%; scroll-snap-align: start; }

#work-form [hidden] { display: none !important; }

.upload-status { padding: 10px 12px; border-radius: 9px; background: var(--cream); color: var(--dark); }
.upload-status p { margin: 0; overflow-wrap: anywhere; }
.upload-status progress { display: block; width: 100%; margin-top: 8px; }
.upload-status.upload-error { border: 1px solid #c66455; }
.upload-status[hidden], .upload-status progress[hidden] { display: none; }

.listing-detail { min-width: 0; }
.listing-cover { display: block; width: 100%; max-height: 540px; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 12px; background: var(--cream); }
.listing-cover-empty { display: grid; place-items: center; max-height: 270px; color: var(--muted); }
.listing-actions { display: flex; gap: 6px; margin: 12px 0 16px; }
.listing-actions > * { flex: 1; min-width: 0; margin: 0; }
.listing-actions .button { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px; padding: 6px 3px; font-size: clamp(11px, 3.7vw, 15px); white-space: nowrap; }
.listing-actions .hm-icon { flex: none; }
.listing-call-numbers:not([hidden]) { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.listing-call-numbers .button { justify-content: center; min-height: 44px; }
.listing-contact-status { color: var(--muted); }
.listing-gallery, .listing-video { margin-block: 22px; }
.listing-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.listing-gallery-grid a { display: block; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: var(--cream); }
.listing-gallery-grid img { width: 100%; height: 100%; display: block; object-fit: cover; }
.listing-gallery-more { margin-top: 10px; gap: 7px; }
.listing-reviews { margin-top: 22px; scroll-margin-top: 80px; }
.review-compose, .review-status, .listing-review { margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.review-compose summary { width: fit-content; padding: 5px 0; color: var(--green); cursor: pointer; font-weight: 750; }
.review-compose form { display: grid; justify-items: start; gap: 10px; margin-top: 10px; }
.review-compose fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.review-compose form > label { width: 100%; }
.review-stars { display: flex; flex-wrap: wrap; gap: 4px; }
.review-stars label { margin: 0; cursor: pointer; }
.review-stars span { display: grid; place-items: center; width: 39px; height: 40px; border: 1px solid var(--line); border-radius: 8px; font-size: 24px; color: var(--dark); }
.review-stars input:checked + span, .review-stars label:has(~ label input:checked) span { color: #694200; background: #ffdb70; border-color: #e3aa3f; }
.review-stars input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }
.review-filled { color: #a16a05; }
.listing-review p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.listing-gallery-dialog { width: min(95vw, 800px); max-height: 90vh; max-height: 90dvh; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #fff); color: var(--dark); }
.listing-gallery-dialog::backdrop { background: #071915d9; }
.listing-gallery-dialog img { display: block; width: 100%; height: min(62vh, 560px); margin-block: 10px; object-fit: contain; }
.listing-gallery-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.listing-gallery-tools p { margin: 0; }
.listing-gallery-tools button { min-height: 44px; }
.listing-gallery-tools button:disabled { opacity: .5; cursor: default; }
.listing-worker-avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.listing-detail .card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
@media (max-width: 340px) {
    .listing-actions .hm-icon { width: 14px; height: 14px; }
}

.compact-header-page .topline { display: flex; padding-block: 12px; }
.inbox-list { border-top: 1px solid var(--line); }
.inbox-list .thread-row { padding-block: 13px; }
.conversation-page { overflow: hidden; padding-bottom: 0; }
.conversation-page #main {
    position: fixed; top: var(--chat-top, 0px); left: 0; right: 0;
    height: var(--chat-height, 100vh); height: var(--chat-height, 100dvh);
    max-width: 840px; padding: 0; display: flex; flex-direction: column; overflow: hidden;
}
.conversation-page #main > .notice, .conversation-page #main > .error-box { margin: 5px 12px; flex: none; }
.conversation { display: flex; flex: 1; flex-direction: column; min-height: 0; background: var(--surface, #fff); }
.conversation-heading {
    flex: none; display: flex; align-items: center; gap: 9px; padding: 7px 10px;
    padding-top: max(7px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line);
}
.conversation-title { min-width: 0; flex: 1; }
.conversation-title h1 { font-size: 17px; line-height: 1.3; margin: 0; }
.conversation-title h1, .conversation-title a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-title a { color: var(--muted); font-size: 12px; }
.conversation-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cream); color: var(--dark); font-weight: 700; flex: none; }
.conversation .message-list {
    flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 13px 12px; background: var(--cream);
}
.conversation .message { max-width: min(82%, 420px); width: fit-content; overflow-wrap: anywhere; }
.conversation .message p { white-space: pre-wrap; margin: 2px 0; }
.conversation .message small { display: block; text-align: right; }
.conversation-older { display: block; width: fit-content; margin: 0 auto 12px; font-size: 13px; }
.chat-media { display: block; max-width: 100%; max-height: min(38vh, 360px); object-fit: contain; border-radius: 9px; }
audio.chat-media { width: min(260px, 62vw); }
.conversation-compose, .conversation-blocked {
    flex: none; padding: 7px 8px max(7px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--surface, #fff); margin: 0;
}
.conversation-input-row { display: flex; gap: 3px; align-items: flex-end; }
.conversation-input-row textarea {
    flex: 1; min-width: 0; margin: 0; min-height: 44px; max-height: 98px; resize: none; border-radius: 20px;
    padding: 9px 11px; font-size: 16px; line-height: 24px;
}
.chat-control {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 44px; min-height: 44px; padding: 3px; margin: 0; border: 0; border-radius: 50%;
    color: var(--dark); background: transparent; font-size: 23px; cursor: pointer; text-decoration: none;
}
.chat-control svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-control:focus-visible, .chat-control:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.chat-control:disabled { opacity: .5; }
.chat-send { color: #fff; background: #075940; }
.chat-mic[aria-pressed=true] { color: #fff; background: var(--red); }
.chat-file input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.conversation-status { margin: 0 4px 4px; font-size: 12px; color: var(--muted); }
.conversation-pending:not([hidden]) { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.conversation-pending span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; flex: 1; }
.conversation-pending audio { width: min(52vw, 240px); height: 34px; }
.chat-options {
    width: min(92vw, 470px); max-height: 88vh; padding: 17px; border: 1px solid var(--line);
    border-radius: 14px; color: var(--dark); background: var(--surface, #fff);
}
.chat-options::backdrop { background: #071915b5; }
.chat-options summary { margin: 12px 0; cursor: pointer; }
.chat-options form { margin-bottom: 8px; }

.conversation-presence { display: block; font-size: 11px; line-height: 1.15; color: var(--muted); }
.conversation-presence.is-online { color: var(--accent); font-weight: 700; }
.conversation .message { position: relative; margin-bottom: 2px; }
.chat-ticks { margin-left: 5px; letter-spacing: -2px; padding-right: 2px; font-size: 13px; }
.chat-ticks.is-read { color: #2089d9; font-weight: 700; }
.chat-quote, .chat-reply-draft { display: block; border-left: 3px solid var(--accent); border-radius: 5px; background: #74887a24; padding: 5px 8px; font-size: 12px; overflow-wrap: anywhere; }
.chat-message-actions { margin-top: 3px; }
.chat-message-actions summary { cursor: pointer; width: fit-content; min-width: 34px; text-align: center; list-style: none; font-weight: 700; }
.chat-message-actions summary::-webkit-details-marker { display: none; }
.chat-message-buttons { display: flex; flex-wrap: wrap; gap: 3px; }
.chat-message-buttons button { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--dark); padding: 4px 6px; min-height: 33px; cursor: pointer; }
.chat-reaction-summary:empty { display: none; }
.chat-reaction-summary { display: flex; gap: 4px; }
.chat-reaction-summary span { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-size: 12px; padding: 1px 5px; }
.chat-reaction-summary span.mine-reaction { border-color: var(--accent); }
.chat-voice-player { display: flex; align-items: center; gap: 5px; width: min(240px, 64vw); --voice-color: var(--accent); }
.message.is-listened .chat-voice-player { --voice-color: #2089d9; }
.chat-voice-play { color: var(--voice-color); background: transparent; border: 0; width: 30px; min-height: 38px; cursor: pointer; }
.chat-voice-track { flex: 1; min-width: 0; accent-color: var(--voice-color); margin: 0; padding: 0; height: 7px; appearance: none; border: 0; border-radius: 8px; background: linear-gradient(to right,var(--voice-color) 0 var(--played,0%),var(--line) var(--played,0%) 100%); }
.chat-voice-track::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; background: var(--voice-color); border-radius: 50%; }
.chat-voice-track::-moz-range-thumb { width: 12px; height: 12px; background: var(--voice-color); border: 0; border-radius: 50%; }

.discovery-search { display: grid; gap: 7px; padding-bottom: 11px; }
.discovery-query { display: flex; gap: 6px; min-width: 0; }
.discovery-query input { flex: 1; min-width: 0; margin: 0; }
.discovery-query .button { flex: none; }
.discovery-location { display: flex; gap: 6px; min-width: 0; }
.discovery-location .button { min-height: 42px; gap: 6px; flex: none; }
.discovery-location [data-pick-city] { min-width: 0; flex: 1; justify-content: flex-start; }
.discovery-location [data-city-label] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discovery-location .hm-icon { flex: none; }
.gps-label { font-size: 12px; color: var(--accent); margin: 0; overflow-wrap: anywhere; }
.city-picker { width: min(92vw, 520px); max-height: 86dvh; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--dark); }
.city-picker::backdrop { background: #071915b5; }
.city-picker h2 { font-size: 17px; margin: 0; }
.city-picker input { font-size: 16px; }
.city-results { max-height: 49dvh; overflow: auto; display: grid; margin: 8px 0; }
.city-results button { min-height: 42px; padding: 7px 4px; background: transparent; color: var(--dark); border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.city-results button:hover, .city-results button:focus-visible { background: var(--cream); }
.home-categories { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.home-categories .category { min-height: 70px; font-size: 12px; padding: 7px 3px; overflow-wrap: anywhere; }
.compact-results { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 10px; }
.compact-results .work-card { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 8px; min-height: 63px; padding: 3px 6px; }
.compact-results .work-card .card-image { width: 56px; height: 54px; min-height: 0; border-radius: 7px; overflow: hidden; }
.compact-results .work-card .card-image img { width: 100%; height: 100%; object-fit: cover; }
.compact-results .work-card .image-placeholder { min-height: 0; height: 100%; font-size: 22px; }
.compact-results .card-body { padding: 0; min-width: 0; }
.compact-results .card-body h3, .compact-results .card-body p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; line-height: 1.2; }
.compact-results .card-body h3 { font-size: 14px; }
.compact-results .card-body .eyebrow, .compact-results .card-body .muted { font-size: 10px; line-height: 1.15; }
.compact-results .card-body .badge { display: none; }
.profile-photo-pick { margin: 0; flex: none; }
.profile-photo-pick label { position: relative; display: block; margin: 0; cursor: pointer; }
.profile-photo-pick label:focus-within { outline: 2px solid var(--accent); border-radius: 50%; }
.profile-photo-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.profile-camera { position: absolute; right: 0; bottom: 0; border-radius: 50%; width: 22px; height: 22px; background: var(--accent); color: white; display: grid; place-items: center; pointer-events: none; }
@media (max-width: 700px) {
    .compact-results { grid-template-columns: minmax(0,1fr); }
    .browse-page .topline { grid-template-columns: minmax(0,1fr) 44px; }
    .discovery-search { position: static; }
    .home-categories { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

.ad-plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.ad-plan { border: 1px solid var(--line); border-radius: 11px; padding: 8px; display: grid; align-content: start; gap: 5px; }
.ad-plan .button { justify-content: center; padding: 5px; min-height: 36px; font-size: 12px; }
.ad-total { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-weight: 700; }
.sponsored-video { position: fixed; inset: 0; margin: auto; box-sizing: border-box; width: min(calc(100% - 24px), 600px); max-width: none; height: fit-content; max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #101310; color: #fff; box-shadow: 0 18px 55px #0008; }
.sponsored-video::backdrop, .chat-video-preview::backdrop { background: #071915df; }
.sponsored-video [hidden] { display: none; }
.sponsored-stage { position: relative; isolation: isolate; }
.sponsored-stage video { width: 100%; height: min(67vh, 520px); height: min(67dvh, 520px); display: block; object-fit: contain; }
.ad-video-hit { position: absolute; inset: 0; }
.ad-video-hit:focus-visible { outline: 2px solid #ffd548; outline-offset: -4px; }
.ad-video-sound, .ad-video-skip { position: absolute; right: 10px; display: grid; place-items: center; min-height: 40px; padding: 0 11px; border: 1px solid #ffffff54; border-radius: 24px; background: #141814e8; color: #fff; font: inherit; cursor: pointer; }
.ad-video-sound { top: 10px; min-width: 40px; }
.ad-video-sound[aria-pressed="false"] .ad-sound-on, .ad-video-sound[aria-pressed="true"] .ad-sound-off { display: none; }
.ad-video-skip { bottom: 13px; display: flex; gap: 5px; font-size: 13px; font-weight: 700; }
.ad-video-progress { position: absolute; inset: auto 0 0; height: 4px; background: #ffcf31; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.ad-video-end, .ad-video-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 14px; background: #0c100ce3; }
.ad-video-end a, .ad-video-end button, .ad-video-fallback button { padding: 9px 17px; border: 1px solid #ffffff60; border-radius: 24px; color: #fff; background: #202620; font: inherit; font-weight: 700; cursor: pointer; }
.ad-video-end a, .ad-video-fallback [data-ad-play] { color: #1a1a13; background: #ffcf31; border-color: #ffcf31; }


.mine-list .mine-card { padding: 8px; gap: 9px; grid-template-columns: 75px minmax(0,1fr); }
.mine-list .mine-photo { height: 75px; width: 75px; }
.mine-list .mine-body h2 { font-size: 15px; line-height: 1.2; margin: 0; }
.mine-list .mine-body .muted { margin: 3px 0; font-size: 11px; overflow-wrap: anywhere; }
.mine-list .listing-counts { display: flex; flex-wrap: wrap; gap: 3px 10px; padding: 0; margin: 4px 0; font-size: 11px; }
.mine-list .listing-counts .hm-icon { width: 13px; height: 13px; }
.mine-list .two-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.mine-list .two-actions .button { padding: 4px 7px; min-height: 33px; font-size: 11px; gap: 3px; }
.mine-list .two-actions .hm-icon { width: 13px; height: 13px; }
.mine-list .work-menu summary { min-width: 35px; padding: 3px 6px; }
.home-feed .work-card .card-image { height: 135px; aspect-ratio: auto; min-height: 0; }
.home-feed .card-image img { height: 100%; object-fit: cover; }
.home-feed .card-image .image-placeholder { height: 100%; min-height: 0; font-size: 28px; }
.home-feed .card-body { padding: 7px 8px; }
.home-feed .card-body h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 3px 0; font-size: 14px; line-height: 1.2; }
.home-feed .card-body .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 4px 0; font-size: 11px; }
.home-feed .card-body .badge { display: none; }
@media (max-width: 700px) {
    .home-feed { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .home-feed .work-card .card-image { height: 96px; }
}

.chat-pending-thumb { display: block; width: 47px; height: 47px; border-radius: 7px; object-fit: cover; flex: none; }
.chat-video-preview { width: min(95vw,640px); max-height: 94dvh; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--dark); }
.chat-video-preview video { display: block; width: 100%; height: min(60dvh,480px); background: #111; object-fit: contain; }
.video-preview-top, .video-preview-actions { display: flex; align-items: center; gap: 7px; }
.video-preview-actions { justify-content: flex-end; padding-top: 8px; }
@media (max-width: 700px) {
    .chat-video-preview { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; }
    .chat-video-preview video { height: calc(100dvh - 110px); }
}

.ad-format { margin: 12px 0 16px; --ad-accent: #047857; --ad-wash: #e9f8ef; }
.ad-format-video { --ad-accent: #5442ad; --ad-wash: #f0edff; }
.ad-format-heading { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 13px; background: var(--ad-accent); color: white; margin-bottom: 8px; }
.ad-format-heading h3 { margin: 0; color: inherit; font-size: 18px; }
.ad-format-heading p { margin: 2px 0 0; font-size: 12px; }
.ad-format-icon { flex: none; width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: white; color: var(--ad-accent); font-size: 19px; }
.ad-format .ad-plan { border-top: 2px solid var(--ad-accent); }
.ad-format .ad-plan span { font-weight: 750; }
.ad-insights-heading { background: #0a4e3c; color: white; }
.ad-insights-heading h1 { margin: 3px 0; overflow-wrap: anywhere; }
.ad-insights-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 12px 0; }
.ad-insights-stats .panel { padding: 9px 7px; min-width: 0; }
.ad-insights-stats span { display: block; font-size: 12px; }
.ad-insights-stats strong { display: block; font-size: clamp(17px,4vw,25px); overflow-wrap: anywhere; }
.ad-chart { height: 130px; display: grid; grid-template-columns: repeat(30,minmax(0,1fr)); align-items: end; gap: 2px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top,transparent 0 31px,var(--line) 31px 32px); }
.ad-chart>div { height: 100%; display: flex; align-items: end; gap: 1px; }
.ad-chart i,.ad-chart b { flex: 1; display: block; border-radius: 2px 2px 0 0; }
.ad-chart i,.ad-key-impressions::before { background: #087f63; }
.ad-chart b,.ad-key-clicks::before { background: #6350bf; }
.ad-chart-key,.ad-chart-dates { display: flex; gap: 12px; font-size: 12px; }
.ad-chart-dates { justify-content: space-between; margin-bottom: 12px; }
.ad-chart-key span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.ad-insights-chart table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ad-insights-chart th,.ad-insights-chart td { border-bottom: 1px solid var(--line); padding: 3px; text-align: left; }
.work-availability { margin: 4px 0; }
.work-availability-switch { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--dark); min-height: 34px; font-size: 12px; font-weight: 700; cursor: pointer; }
.switch-track { display: inline-block; width: 31px; height: 17px; border-radius: 12px; background: #778783; padding: 2px; }
.switch-track::after { content: ''; display: block; border-radius: 50%; width: 13px; height: 13px; background: white; }
.work-availability-switch[aria-checked=true] .switch-track { background: #078258; }
.work-availability-switch[aria-checked=true] .switch-track::after { transform: translateX(14px); }

.chat-sound { min-width: 36px; }
.chat-sound[aria-pressed=false] { opacity: .55; }
.chat-sound[aria-pressed=false]::after { content: ''; position: absolute; width: 21px; height: 2px; background: currentColor; transform: rotate(-42deg); }

.ads-hero { flex-wrap: wrap; align-items: end; }
.ads-hero h1 { margin: 4px 0; color: inherit; font-size: clamp(23px,5vw,34px); line-height: 1.14; }
.ads-hero p { margin: 0; color: #d4f3e6; }
.ad-kicker { font-size: 11px; font-weight: 750; letter-spacing: .09em; }
.ads-hero .ad-kicker { color: #f8db91; }
.ad-format { padding: 9px; border: 1px solid var(--ad-accent); border-radius: 16px; background: var(--ad-wash); }
.ad-format .ad-plan { background: white; padding: 9px; }
.ad-format .ad-plan strong { color: #283550; font-size: 13px; }
.ad-format .ad-plan span { color: var(--ad-accent); font-size: 15px; }
.ad-format .ad-plan .button { color: var(--ad-accent); background: var(--ad-wash); min-height: 40px; }
.ad-campaign-card { margin-bottom: 12px; scroll-margin-top: 75px; }
.ad-campaign-heading,.ad-campaign-metrics,.ad-campaign-actions { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.ad-campaign-heading { justify-content: space-between; }
.ad-campaign-heading h3 { margin: 0; overflow-wrap: anywhere; }
.ad-campaign-state { display: inline-block; border-radius: 20px; padding: 4px 9px; color: #394763; background: #e9edf5; font-size: 12px; font-weight: 700; }
.ad-campaign-state.is-live { color: #075940; background: #d8f5e5; }
.ad-campaign-metrics { color: #384566; }
.ad-insights-heading h1 { color: inherit; }
.ad-insights-heading .ad-kicker { color: #b5ecd9; }
.ad-insights-heading p { margin: 8px 0 0; }
.ad-insights-period { margin-bottom: 0; }
.ad-insights-stats .panel { margin: 0; }
.ad-insights-stats small { display: block; color: var(--muted); font-size: 11px; line-height: 1.2; }
.ad-insights-stats .ad-stat-impressions { border-top: 3px solid #067859; }
.ad-insights-stats .ad-stat-clicks { border-top: 3px solid #5442ad; }
.ad-insights-stats .ad-stat-rate { border-top: 3px solid #a7610b; }
.ad-stat-impressions strong { color: #067859; }
.ad-stat-clicks strong { color: #5442ad; }
.ad-stat-rate strong { color: #875008; }
.ad-chart-empty { background: var(--cream); border-radius: 9px; padding: 14px; }
.ad-metrics-note { font-size: 12px; }
.ad-insights-chart summary { padding-block: 8px; cursor: pointer; }
.mine-card { scroll-margin-top: 75px; }
.work-availability-switch { min-height: 44px; padding: 5px 9px; color: #813511; background: #fff4e8; }
.work-availability-switch[aria-checked=true] { color: #075940; background: #e9f8ef; }
.switch-track { flex: none; background: #9b552e; }
.chat-recording:not([hidden]) { display: flex; gap: 8px; align-items: center; padding: 4px 9px; margin: 3px 0; background: #fff1f0; border-radius: 10px; color: #852726; }
.recording-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #b63734; }
.recording-clock { min-width: 32px; font-variant-numeric: tabular-nums; font-weight: 700; }
.chat-recording-wave { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.chat-recording-wave i { flex: 1; max-width: 5px; height: 25px; border-radius: 4px; background: #bc3d3b; transform: scaleY(var(--wave-level,.12)); transition: transform .07s linear; }
@media (min-width: 950px) {
    .business-packages { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 16px; }
    .business-packages > h2 { grid-column: 1 / -1; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-recording-wave i { transition: none; }
}

.ad-owner-preview summary { cursor: pointer; font-weight: 700; }
.ad-owner-preview img,.ad-owner-preview video { display: block; max-width: 100%; max-height: min(55vh,420px); margin: 12px auto 0; object-fit: contain; border-radius: 10px; }

.service-search { display: flex; align-items: stretch; gap: 8px; margin: 14px 0; }
.service-list { border-top: 1px solid var(--line); }
.service-list a { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.service-list a strong { flex: 1; overflow-wrap: anywhere; }
.trade-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; color: var(--trade-ink, #475569); background: var(--trade-wash, #eef2f7); }
.category > .trade-icon { display: grid; width: 32px; height: 32px; margin: 0 auto 4px; border-radius: 9px; }
.category > .trade-icon svg { width: 21px; height: 21px; }
.trade-icon--amber { --trade-ink: #965602; --trade-wash: #fff2cf; }
.trade-icon--blue { --trade-ink: #135baa; --trade-wash: #e7f2ff; }
.trade-icon--brick { --trade-ink: #aa422c; --trade-wash: #ffede7; }
.trade-icon--ochre { --trade-ink: #745410; --trade-wash: #fbf1d6; }
.trade-icon--purple { --trade-ink: #7441a8; --trade-wash: #f2eaff; }
.trade-icon--wood { --trade-ink: #865027; --trade-wash: #f8ebdb; }
.trade-icon--teal { --trade-ink: #07736f; --trade-wash: #dff8f5; }
.trade-icon--leaf { --trade-ink: #407622; --trade-wash: #edf6dc; }
.trade-icon--rose { --trade-ink: #a83366; --trade-wash: #fce8f2; }
.trade-icon--orange { --trade-ink: #a14b12; --trade-wash: #ffeddd; }
.trade-icon--indigo { --trade-ink: #434ba9; --trade-wash: #ebedff; }

.trade-icon--plum { --trade-ink: #9a3d7f; --trade-wash: #f8e8f4; }

/* Review overview and notification inbox */
.review-overview { display: flex; align-items: center; gap: 14px; padding: 12px 15px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); }
.review-overview > strong { font-size: 27px; line-height: 1.1; }
.review-overview > strong small, .review-overview div small { font-size: 12px; color: var(--muted); }
.review-meter { display: inline-block; width: max-content; background: linear-gradient(90deg, #ad7200 var(--review-fill), #9caba3 var(--review-fill)); background-clip: text; color: transparent; font-size: 19px; line-height: 1.25; letter-spacing: 1px; white-space: nowrap; }
.review-byline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; overflow-wrap: anywhere; }
.review-byline time, .review-rating { color: var(--muted); font-size: 12px; }
.review-rating { display: flex; align-items: center; gap: 7px; }
.notification-inbox { max-width: 720px; margin-inline: auto; }
.notification-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.notification-heading h1, .notification-heading p { margin: 0; }
.notification-clear { min-height: 38px; padding: 6px 12px; white-space: nowrap; }
.notification-list { display: grid; gap: 9px; }
.notification-card { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #fff); }
.notification-unread { border-color: #91c9af; background: color-mix(in srgb, var(--surface, #fff) 92%, #4baf81); }
.notification-open { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 12px 42px 12px 11px; text-align: start; border: 0; border-radius: inherit; background: transparent; color: var(--dark); cursor: pointer; }
.notification-open:hover { background: #4888640e; }
.notification-open:focus-visible, .notification-remove button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.notification-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #e8eee9; color: #285b48; }
.notification-icon-chat { background: #dff4ea; color: #126c4a; }
.notification-icon-chart { background: #e6ecff; color: #3450a2; }
.notification-icon-orders { background: #fff0ca; color: #7f5210; }
.notification-icon-heart { background: #f8e2e9; color: #992e56; }
.notification-copy { display: grid; gap: 2px; line-height: 1.4; overflow-wrap: anywhere; }
.notification-kind { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.notification-kind i { width: 7px; height: 7px; border-radius: 50%; background: #1a9866; }
.notification-copy time { font-size: 11px; color: var(--muted); }
.notification-remove { position: absolute; inset: 5px 4px auto auto; }
.notification-remove button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }
.notification-remove button:hover { color: #a02c30; background: #d44b4b15; }
.notification-empty { display: grid; justify-items: center; gap: 5px; padding: 24px 12px; text-align: center; border: 1px dashed var(--line); border-radius: 14px; }
.notification-empty p { margin: 0; }

.checkout-card { margin-inline: auto; }
.checkout-card h1 { margin: 2px 0 5px; }
.checkout-price { margin: 0; color: var(--green); font-size: 1.4rem; font-weight: 800; }
.checkout-price small { color: var(--muted); font-size: .86rem; font-weight: 500; }
.payment-recipient { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
.payment-recipient-heading { display: grid; gap: 3px; padding: 14px; color: #fff; background: linear-gradient(125deg,#104638,#24645c); overflow-wrap: anywhere; }
.payment-recipient-heading strong { font-size: 1.28rem; line-height: 1.22; }
.payment-recipient-badge { justify-self: start; padding: 2px 8px; border-radius: 12px; background: #ffffff26; font-size: .75rem; font-weight: 750; }
.payment-recipient-label { display: block; font-size: .75rem; }
.payment-recipient-heading .payment-recipient-label { margin-top: 4px; color: #dceee6; }
.payment-qr-box { display: grid; justify-items: center; padding: 12px 8px; text-align: center; background: var(--cream); }
.payment-qr-box img { display: block; width: min(210px,100%); height: auto; aspect-ratio: 1; padding: 8px; object-fit: contain; background: #fff; border-radius: 8px; }
.payment-qr-box p { margin: 6px 0 9px; font-size: .84rem; }
.payment-qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.payment-qr-actions .button, .payment-recipient-field .button { padding: 6px 9px; min-height: 36px; font-size: .8rem; }
.payment-recipient [hidden] { display: none; }
.payment-recipient-fields { display: grid; gap: 8px; padding: 10px 12px; }
.payment-recipient-field { display: flex; gap: 6px; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 7px; overflow-wrap: anywhere; }
.payment-recipient-field .payment-recipient-label, .payment-recipient-fields small { color: var(--muted); }
.payment-recipient-feedback { color: var(--green); font-size: .82rem; }
.payment-recipient-feedback:empty { display: none; }