/* Shared header actions; touch targets remain usable at 320px. */
#app>.nav .brand-mark{width:78px}
@media(max-width:600px){#app>.nav .brand-mark{width:68px}}
#app>.nav .header-action{width:42px;height:42px;min-width:42px;min-height:42px;border-radius:14px;flex-shrink:0;cursor:pointer}
#app>.nav .header-action svg{width:21px;height:21px;stroke-width:1.8}
#app>.nav .header-action:focus-visible{outline:3px solid #a67bd0;outline-offset:3px}
.theme-sun{display:none}
html[data-theme=dark] .theme-moon{display:none}
html[data-theme=dark] .theme-sun{display:block}
@media(max-width:600px){#app>.nav .nav-right{gap:7px}#app>.nav .header-action{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:13px}}
@media(max-width:350px){#app>.nav .brand{gap:5px;font-size:19px}#app>.nav .brand-mark{width:52px}#app>.nav .mobile-location{font-size:9px}#app>.nav .nav-right{gap:5px}}

/* Dark surfaces retain SherikTop's purple identity, without altering photos. */
html[data-theme=dark]{color-scheme:dark;--ink:#f4effa;--muted:#b4a8c3;--green:#bf96f1;--deep:#d9befb;--lime:#332443;--cream:#14101c;--line:#3c304b;--white:#1f1929;--st-surface:#1f1929;--st-raised:#2b2238;--st-accent-bg:#38264e;--st-action:#7846b3}
html[data-theme=dark] body,html[data-theme=dark] body.listing-open{background:var(--cream);color:var(--ink)}
html[data-theme=dark] :is(h1,h2,h3,h4){color:var(--ink)}
html[data-theme=dark] :is(.btn.outline,.art-note,.searchbox,.chip,.card,.empty,.modal,.back-icon,.account-panel,.menu-list,.owner-item,.plan-card,.direction-card,.faq,.listing-tool,.listing-fact,.listing-contact,.related-item,.access-flow,.af-head,.af-plan,.af-method,.af-direction button,.af-sales-footer,.pf-shortcut,.pf-services,.pf-service,.ml-card,.popular-search-panel,.fl-footer,.search-active-filters button){background:var(--st-surface);color:var(--ink);border-color:var(--line)}
html[data-theme=dark] :is(.modal-body select,.settings-form select,.fl-select-wrap,.share-detail-link,.share-link,.af-secondary,.receipt-copy){background:var(--st-raised);color:var(--ink);border-color:var(--line)}
html[data-theme=dark] :is(.meta span,.icon-btn,.sample-tag,.pro-summary,.account-metrics button,.menu-icon,.flow-callout,.share-symbol,.location-symbol,.people-note,.owner-avatar,.contact-unlocked,.af-summary,.af-total,.af-detail-note,.af-demo,.receipt-drop,.receipt-preview,.receipt-file-row button,.af-sales-listing,.pf-shortcut-icon,.pf-service-icon,.pf-alert-status,.ml-filters,.ml-thumb,.ml-view,.ml-dialog-ad,.search-clear,.popular-search-grid>button,.popular-search-panel header button,.fl-symbol,.fl-header>button,.fl-districts button,.fl-budgets button,.post-guide-number){background:var(--st-raised);color:var(--muted);border-color:var(--line)}
html[data-theme=dark] :is(.card h3,.price,.listing-fact strong,.af-plan strong,.af-method strong,.af-method h3,.pf-shortcut strong,.pf-service strong,.ml-price,.popular-search-grid strong,.popular-search-panel header strong,.fl-label,.fl-select-wrap select,.receipt-bank-card strong,.receipt-bank-card input){color:var(--ink)}
html[data-theme=dark] :is(.card-footer,.card .location,.card-footer small,.listing-description,.location-detail-row small,.owner-info p,.modal-body p,.af-body>p,.af-note,.af-detail-note,.af-plan small,.af-method small,.af-method p,.af-total span,.af-disclaimer,.af-sales-note,.af-sales-benefits,.receipt-hint,.receipt-file-row small,.receipt-bank-card p,.pf-header p,.pf-identity p,.pf-account-note,.pf-shortcut small,.pf-service small,.pf-bot-note,.ml-header p,.ml-meta,.ml-description,.ml-footnote,.ml-empty,.popular-search-panel header small,.popular-search-grid small,.popular-search-empty,.fl-header p,.fl-hint,.fl-context,.fl-budgets small){color:var(--muted)}
html[data-theme=dark] :is(.card-footer,.listing-section,.location-detail-row,.listing-owner,.af-head,.af-sales-footer,.pf-service,.fl-header,.fl-footer){border-color:var(--line)}
html[data-theme=dark] :is(input,select,textarea){color:var(--ink)}
html[data-theme=dark] :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
html[data-theme=dark] .search-field #query::placeholder{color:var(--muted)}
html[data-theme=dark] .quick-row .tabs{background:var(--st-raised);border-color:var(--line)}
html[data-theme=dark] .quick-row .chip{color:var(--muted);background:transparent}
html[data-theme=dark] .quick-row :is(.chip.active,.filter-button.has-filters){color:var(--green);background:var(--st-accent-bg)}
html[data-theme=dark] .quick-row .filter-button{color:var(--green);background:var(--st-surface);border-color:var(--line)}
html[data-theme=dark] .searchbox:focus-within{border-color:var(--green);box-shadow:0 0 0 3px #bf96f122}
html[data-theme=dark] :is(.save,.gallery-nav,.gallery-all){background:#251e31eb;color:var(--ink);border-color:var(--line)}
html[data-theme=dark] :is(.save[aria-pressed=true],.listing-tool[aria-pressed=true],.badge,.badge.new,.audience-pill,.af-pill,.af-symbol,.pf-avatar,.ml-manage){background:var(--st-accent-bg);color:var(--green)}
html[data-theme=dark] .photo,html[data-theme=dark] .listing-gallery,html[data-theme=dark] .gallery-photo{background:var(--st-raised)}
html[data-theme=dark] .post-banner{background:var(--st-raised);border-color:var(--line)}
html[data-theme=dark] :is(.btn.primary,.af-primary,.post-banner .btn,.owner-actions button:first-child){background:var(--st-action);color:#fff;border-color:var(--st-action)}
html[data-theme=dark] .btn.primary:hover,html[data-theme=dark] .af-primary:hover{background:#8958c5}
html[data-theme=dark] :is(.listing-top,.listing-dock){background:#14101cf5;border-color:var(--line)}
html[data-theme=dark] #app>.bottom-nav{background:#1f1929f5;border-color:var(--line);box-shadow:0 -7px 28px #0003}
html[data-theme=dark] #app>.bottom-nav>:is(a,button){color:var(--muted)}
html[data-theme=dark] #app>.bottom-nav .active,html[data-theme=dark] #app>.bottom-nav .post-nav{color:var(--green)}
html[data-theme=dark] #app>.bottom-nav .active .bn-icon{background:var(--st-accent-bg)}
html[data-theme=dark] #app>.bottom-nav .bn-count{border-color:var(--st-surface)}
html[data-theme=dark] #app>.nav{border-color:var(--line)}
html[data-theme=dark] #app>.nav .brand,html[data-theme=dark] #app>.nav .brand>div>span{color:#fff}
#app>.nav .brand-mark img.brand-logo-dark{display:none}
html[data-theme=dark] #app>.nav .brand-mark img.brand-logo-light{display:none}
html[data-theme=dark] #app>.nav .brand-mark img.brand-logo-dark{display:block}
html[data-theme=dark] #app>.nav .brand-mark{background:transparent;border-radius:0;border-color:transparent}
html[data-theme=dark] #app>.nav .mobile-location{color:var(--muted)}
html[data-theme=dark] #app>.nav .avatar{background:var(--st-surface);border-color:var(--line);color:var(--green)}
html[data-theme=dark] :is(.af-plan[aria-pressed=true],.plan-card.active,.af-direction button[aria-pressed=true],.fl-districts button[aria-pressed=true],.fl-budgets button[aria-pressed=true]){background:var(--st-accent-bg);color:var(--green);border-color:var(--green)}
html[data-theme=dark] :is(.af-plan[aria-pressed=true] strong,.plan-card.active strong){color:var(--green)}
html[data-theme=dark] .af-head button{background:var(--st-raised);color:var(--ink)}
html[data-theme=dark] .af-steps span{background:var(--line)}
html[data-theme=dark] .af-steps .done{background:var(--green)}
html[data-theme=dark] .af-method:hover{background:var(--st-raised)}
/* Keep payment trademarks on a light plate for their original brand colors. */
html[data-theme=dark] .af-method-icon{background:#f0f6f7}
html[data-theme=dark] .receipt-bank-card{background:linear-gradient(125deg,#342546,#272034);border-color:var(--line)}
html[data-theme=dark] .receipt-drop{color:var(--green);border-color:var(--green)}
html[data-theme=dark] .receipt-drop:hover{background:var(--st-accent-bg)}
html[data-theme=dark] :is(.contact-ready,.state-pill,.af-symbol.success,.pf-alert-status.on){background:#173c32;color:#8fe0bc}
html[data-theme=dark] :is(.state-pill.pending,.ml-status.pending,.af-symbol.warning){background:#3b2d1c;color:#f0c27b}
html[data-theme=dark] :is(.af-error,.receipt-error,.af-symbol.error){background:#42232e;color:#ffb0bd}
html[data-theme=dark] .pf-pro{border-color:#744b97}
html[data-theme=dark] .pf-pro p{color:#dfd0ef}
html[data-theme=dark] .pf-pro-action{background:#f4effa;color:#47206f}
html[data-theme=dark] .pf-service:hover{background:var(--st-raised)}
html[data-theme=dark] .ml-filters button{color:var(--muted)}
html[data-theme=dark] .ml-filters button[aria-pressed=true]{background:var(--st-accent-bg);color:var(--green)}
html[data-theme=dark] .ml-filters button span{background:var(--st-raised);color:var(--muted)}
html[data-theme=dark] #filtersModal{background:var(--st-surface);color:var(--ink);border-color:var(--line)}
html[data-theme=dark] .fl-select-wrap:focus-within{border-color:var(--green)}
html[data-theme=dark] .fl-footer #resetFilters{color:var(--green)}
html[data-theme=dark] .fl-footer #resetFilters:disabled{color:var(--muted);opacity:.5}
html[data-theme=dark] :is(.fl-districts i,.fl-budgets i){background:var(--st-raised);border-color:var(--line)}
html[data-theme=dark] .popular-search-grid>button:hover{background:var(--st-accent-bg);border-color:var(--green)}
html[data-theme=dark] .discovery-group{background:var(--st-surface);border-color:var(--line)}
html[data-theme=dark] :is(.modal,.access-flow)::backdrop{background:#08050db3}
html[data-theme=dark] .card-foot{border-color:var(--line);color:var(--muted)}
html[data-theme=dark] .card-foot :is(a,button){color:var(--green)}
html[data-theme=dark] .af-plan b.af-price-inline,html[data-theme=dark] .af-plan .af-plan-name{color:var(--ink)}
html[data-theme=dark] .af-plan[aria-pressed=true] :is(b.af-price-inline,.af-plan-name){color:var(--green)}
html[data-theme=dark] .af-sales-benefits strong{color:var(--ink)}
html[data-theme=dark] .af-sales-benefits p span{color:var(--muted)}
html[data-theme=dark] .af-sales-benefits>div>svg{background:var(--st-accent-bg);color:var(--green)}
html[data-theme=dark] .af-eyebrow,html[data-theme=dark] .pf-shortcut-top b{color:var(--green)}
html[data-theme=dark] :is(.post-banner p,.listing-back,.listing-kicker .property-pill,.listing-location,.listing-fact small,.amenity-item,.af-sales-intro .af-lead){color:var(--muted)}
html[data-theme=dark] :is(.text-action,.ml-total){color:var(--green)}
html[data-theme=dark] .ml-card strong{color:var(--ink)}
html[data-theme=dark] .ml-status.active{color:#8fe0bc}
/* Between phone and desktop layouts, the bottom bar is hidden: keep Profile reachable. */
@media(min-width:601px) and (max-width:800px){#app>.nav .navlinks{display:flex}#app>.nav .navlinks>button:not([data-profile]){display:none}}
html[data-theme=dark] .toast{background:var(--st-raised);color:var(--ink);border:1px solid var(--line)}
