:root {
color-scheme: light;
--surface-page: #f8fafc;
--surface-page-end: #f1f5f9;
--surface-elevated: #ffffff;
--surface-header: rgba(248, 250, 252, 0.92);
--surface-hover: #f8fafc;
--text: #0f172a;
--text-muted: #64748b;
--text-faint: #78879c;
--line: #e2e8f0;
--line-strong: #cbd5e1;
--accent: #2563eb;
--accent-soft: #eff6ff;
--accent-hover: #1d4ed8;
--danger: #b91c1c;
--primary: #0f172a;
--primary-hover: #1e293b;
--radius-md: 10px;
--radius-lg: 12px;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06);
--shadow-card-hover: 0 2px 6px rgba(15, 23, 42, 0.07), 0 8px 20px rgba(15, 23, 42, 0.08);
}
* { box-sizing: border-box; }
html {

overflow-x: hidden;
}
body {
margin: 0;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
background: linear-gradient(180deg, var(--surface-page) 0%, var(--surface-page-end) 100%);
color: var(--text);
letter-spacing: normal;
}
a { color: inherit; }
.site-header {
position: sticky;
top: 0;
z-index: 200;
background: transparent;
border-bottom: 1px solid transparent;
transition: background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease,
backdrop-filter 0.22s ease;
}
.site-header--scrolled {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.site-header-inner {
box-sizing: border-box;
position: relative;

max-width: 1360px;
width: 100%;
margin: 0 auto;
padding: 16px 20px;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 16px 24px;
min-width: 0;
}
@media (max-width: 640px) {
.site-header-inner {
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
}
}

body.body--shell-wide .site-header-inner,
body.body--shell-standard .site-header-inner {
max-width: 1360px;
}

body.body--shell-full .site-header-inner {
max-width: 1360px;
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 640px) {
body.body--shell-full .site-header-inner {
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
}
}
.site-nav-toggle {
display: none;
box-sizing: border-box;
flex: 0 0 auto;
margin-left: auto;
align-items: center;
justify-content: center;
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-elevated);
color: var(--text);
cursor: pointer;
}
.site-nav-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.site-nav-toggle__bars,
.site-nav-toggle__bars::before,
.site-nav-toggle__bars::after {
display: block;
width: 18px;
height: 2px;
border-radius: 1px;
background: currentColor;
}
.site-nav-toggle__bars {
position: relative;
}
.site-nav-toggle__bars::before,
.site-nav-toggle__bars::after {
content: '';
position: absolute;
left: 0;
}
.site-nav-toggle__bars::before { top: -6px; }
.site-nav-toggle__bars::after { top: 6px; }
.site-header.is-nav-open .site-nav-toggle__bars {
background: transparent;
}
.site-header.is-nav-open .site-nav-toggle__bars::before {
top: 0;
transform: rotate(45deg);
}
.site-header.is-nav-open .site-nav-toggle__bars::after {
top: 0;
transform: rotate(-45deg);
}
.site-brand {
color: var(--text);
text-decoration: none;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
}
.site-brand-logo {
display: inline-flex;
align-items: center;
line-height: 0;
flex-shrink: 0;
}
.site-brand-img {
display: block;
height: auto;
max-height: 44px;
width: auto;
max-width: min(220px, 55vw);
object-fit: contain;
}
.site-brand-cluster {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex-shrink: 0;
min-width: 0;
}
.site-brand-tagline {
margin: 0;
padding: 0 2px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-muted);
line-height: 1.3;
max-width: min(220px, 70vw);
}
body.has-cookie-consent-bar {
padding-bottom: 5.5rem;
}
@media (min-width: 720px) {
body.has-cookie-consent-bar {
padding-bottom: 4.5rem;
}
}
.cookie-consent-bar {
position: fixed;
z-index: 250;
left: 0;
right: 0;
bottom: 0;
padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px))
max(16px, env(safe-area-inset-left, 0px));
background: rgba(255, 255, 255, 0.96);
border-top: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cookie-consent-bar__inner {
max-width: 1360px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
}
.cookie-consent-bar__text {
margin: 0;
flex: 1 1 220px;
min-width: min(100%, 220px);
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
}
.cookie-consent-bar__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.cookie-consent-bar__accept {
padding: 9px 16px;
font-size: 14px;
}
.cookie-consent-bar__more {
padding: 8px 14px;
font-size: 13px;
}
.skip-link {
position: absolute;
left: 12px;
top: -100px;
z-index: 500;
padding: 10px 14px;
border-radius: 0 0 8px 8px;
background: var(--accent, #2563eb);
color: #fff;
font-weight: 700;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
@media (max-width: 719px) {
body.has-cookie-consent-bar {
padding-bottom: 14rem;
}
.cookie-consent-bar {
padding-top: 8px;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
padding-left: 12px;
padding-right: 12px;
}
.cookie-consent-bar__inner {
display: block;
max-width: none;
}
.cookie-consent-bar__text {
min-width: 0;
margin-bottom: 6px;
font-size: 13px;
line-height: 1.4;
}
.cookie-consent-bar__actions {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
width: 100%;
min-width: 0;
gap: 6px;
}
.cookie-consent-bar__actions > * {
min-width: 0;
width: 100%;
box-sizing: border-box;
text-align: center;
white-space: normal;
}
.cookie-consent-bar__accept {
grid-column: 1 / -1;
padding: 7px 12px;
}
.cookie-consent-bar__more {
padding: 6px 8px;
font-size: 13px;
}
.cookie-consent-bar__policy {
grid-column: 1 / -1;
width: auto;
justify-self: start;
padding: 2px 0;
border: 0;
background: transparent;
color: var(--accent, #2563eb);
font-size: 13px;
text-align: left;
}
}
.site-nav {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 4px 12px;
min-width: 0;
flex: 0 1 auto;
}
.site-nav-link {
box-sizing: border-box;
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
line-height: 1.5;
transition: color 0.15s ease;
}
.site-nav-link:hover { color: var(--text); text-decoration: underline; }
.site-nav-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.site-nav-auth {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
}
.site-nav-auth-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-muted);
white-space: nowrap;
}
.site-nav-logout-form {
display: inline-flex;
margin: 0;
padding: 0;
align-items: center;
}
.site-nav-logout-btn {
box-sizing: border-box;
margin: 0;
min-height: 44px;
min-width: 44px;
padding: 10px 12px;
border: none;
border-radius: var(--radius-md);
background: none;
font: inherit;
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
cursor: pointer;
text-decoration: none;
transition: color 0.15s ease, background 0.15s ease;
}
.site-nav-logout-btn:hover {
color: var(--text);
text-decoration: underline;
background: var(--surface-hover);
}
.site-nav-logout-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.site-nav-link--register {
font-weight: 600;
color: var(--accent);
}
.site-nav-link--register:hover {
color: var(--accent-hover);
}

@media (min-width: 1100px) {
.site-header-inner {
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;

gap: 16px 20px;
}
.site-nav-toggle {
display: none !important;
}
.site-nav {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 4px 10px;
min-width: 0;
flex: 0 1 auto;
position: static;
padding: 0;
background: none;
border: 0;
box-shadow: none;
}
.site-nav-auth {
flex-wrap: nowrap;
align-items: center;
gap: 4px 10px;
}
.site-nav-link,
.site-nav-auth-label {
white-space: nowrap;
}
.site-brand-cluster {
flex-shrink: 0;
}

.site-brand-tagline {
width: 0;
min-width: 100%;
max-width: 100%;
}
}

@media (max-width: 1099px) {
.site-header-inner {
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: 12px;
}
.site-nav-toggle {
display: inline-flex;
}

.site-nav-toggle ~ .site-nav {
display: none;
position: absolute;
top: calc(100% - 4px);
left: 0;
right: 0;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
gap: 2px;
margin: 0;
padding: 10px 12px 14px;
background: var(--surface-elevated);
border: 1px solid var(--line);
border-radius: 0 0 var(--radius-md) var(--radius-md);
box-shadow: var(--shadow-card);
z-index: 220;
}
.site-header.is-nav-open .site-nav-toggle ~ .site-nav {
display: flex;
}
.site-nav-toggle ~ .site-nav .site-nav-auth {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 2px;
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.site-nav-toggle ~ .site-nav .site-nav-link,
.site-nav-toggle ~ .site-nav .site-nav-logout-btn {
width: 100%;
justify-content: flex-start;
padding: 10px 12px;
border-radius: var(--radius-md);
}
.site-nav-toggle ~ .site-nav .site-nav-auth-label {
padding: 6px 12px 2px;
}
.site-nav-toggle ~ .site-nav .site-nav-logout-form {
width: 100%;
display: block;
}
}
.wrap {

max-width: 1360px;
margin: 0 auto;
padding: 36px 20px 56px;
min-width: 0;
box-sizing: border-box;
}
.wrap.wrap--admin-full {
max-width: none;
width: 100%;
box-sizing: border-box;
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.wrap.wrap--manage-workspace-full,
.wrap.wrap--account-workspace-full {
max-width: 1360px;
width: 100%;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 640px) {
.wrap.wrap--manage-workspace-full,
.wrap.wrap--account-workspace-full {
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
}
}

.wrap.wrap--submit-wide {
max-width: 1360px;
}
.wrap--submit-wide > .hero,
.wrap--submit-wide > .section,
.wrap--submit-wide > .submission-page-preamble {
max-width: 1240px;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.wrap--submit-wide .hero .subtitle {
max-width: none;
}
.wrap--submit-wide .section--submit-page.section {
margin-top: 12px;
}
.wrap--submit-wide .job-form-card.submission-form-wrap {
max-width: none;
width: 100%;
box-sizing: border-box;
padding: 20px clamp(16px, 2.8vw, 32px);
}

.shell-content-inner {
max-width: 980px;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.shell-prose-inner {
max-width: 800px;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.submission-page-preamble {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 2px;
}
.submission-form--public {
margin-top: 0;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.submission-trial-note {
margin: 0;
padding: 14px 16px;
border-radius: 10px;
background: rgba(37, 99, 235, 0.06);
border: 1px solid rgba(37, 99, 235, 0.22);
box-sizing: border-box;
}
.submission-trial-note__text {
margin: 0;
font-size: 14px;
line-height: 1.6;
}
.wrap--submit-wide .submission-quality-guidance.quality-guidance-card {
margin: 0;
padding: 16px 18px;
border-radius: 10px;
background: rgba(25, 120, 90, 0.08);
border: 1px solid rgba(25, 120, 90, 0.28);
box-sizing: border-box;
max-width: none;
}
.submission-quality-guidance__intro {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.55;
}
.submission-quality-guidance__summary {
cursor: pointer;
font-size: 15px;
font-weight: 700;
line-height: 1.45;
}
.submission-quality-guidance__summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.submission-quality-guidance__trust {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.5;
}
.submission-quality-guidance__tips-title {
margin: 0 0 6px;
font-size: 13px;
}
.submission-quality-guidance__tips-list {
margin: 0;
padding-left: 1.15rem;
font-size: 13px;
line-height: 1.5;
}
.sample-listing-group--full-width {
width: 100%;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.sample-listing-group--full-width .grid {
width: 100%;
}
.submission-quality-guidance__live {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(25, 120, 90, 0.2);
}
.submission-quality-guidance__live-title {
margin: 0 0 6px;
font-size: 13px;
}
.submission-demo-videos {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
margin: 18px 0 0;
min-width: 0;
}
@media (min-width: 900px) {
.submission-demo-videos {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 18px;
}
}
.submission-demo-video-card {
display: flex;
flex-direction: column;
min-width: 0;
box-sizing: border-box;
margin: 0;
padding: 16px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.submission-demo-video-card__title {
margin: 0 0 8px;
font-size: 1.05rem;
line-height: 1.35;
}
.submission-demo-video-card__desc {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.55;
color: var(--muted, #64748b);
}
.submission-demo-video-card__media {
position: relative;
width: 100%;
min-width: 0;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 10px;
background: #0f172a;
}
.submission-demo-video-card__media--portrait {
aspect-ratio: 9 / 16;
max-width: min(100%, 360px);
margin-inline: auto;
}
@media (min-width: 900px) {
.submission-demo-video-card__media--portrait {
aspect-ratio: 16 / 10;
max-width: none;
margin-inline: 0;
}
}
.submission-demo-video-card__video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #0f172a;
}
.submission-demo-video-card__video:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.submission-quality-guidance__live-body {
font-size: 13px;
line-height: 1.5;
}
.submission-form-field-hint {
font-size: 13px;
margin: 6px 0 0;
line-height: 1.45;
}
.submission-form-cluster--contact,
.submission-form-cluster--metrics {
grid-column: 1 / -1;
display: grid;
gap: 0 18px;
align-items: start;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.wrap--submit-wide .submission-form-cluster--metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 860px) {
.wrap--submit-wide .submission-form-cluster--contact {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

.home-wrap--wide {
max-width: 1360px;
}
.home-page-title-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.home-wrap--marketplace,
.home-wrap--hub {
padding-top: 20px;
}
@media (min-width: 1024px) {
.home-wrap--marketplace,
.home-wrap--hub {
padding-top: 12px;
}
.home-wrap--marketplace .section--home-promo-banner.home-top-promo {
margin-top: 0;
}
.home-wrap--hub .section--home-promo-banner.home-top-promo {
margin-top: 8px;
}

.home-search-zone--marketplace {
box-sizing: border-box;
max-width: none;
margin: 0;
padding: 12px 14px 10px;
border-radius: var(--radius-lg);
border: 1px solid rgba(15, 23, 42, 0.08);
background: linear-gradient(165deg, #ffffff 0%, #f8fafc 52%, #f1f5f9 100%);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.home-search-zone--marketplace .hero-search {
max-width: none;
width: 100%;
margin: 0;
}
.home-search-zone--marketplace .site-search--home .site-search__panel {
max-width: none;
width: 100%;
padding: 18px 18px 16px;
border: none;
background: transparent;
box-shadow: none;
}
.home-search-zone--marketplace .site-search--home .site-search__panel--stack {
gap: 2px;
}
.home-search-zone--marketplace .site-search--home .site-search__panel-title {
margin-bottom: 6px;
font-size: 1.15rem;
}
.home-search-zone--marketplace .site-search--home .site-search__panel-lead {
margin-bottom: 14px;
max-width: 48rem;
line-height: 1.6;
color: var(--text-muted);
}
.home-search-zone--marketplace .site-search--home .site-search__primary-bar {
border-bottom-color: rgba(15, 23, 42, 0.07);
padding-bottom: 16px;
margin-bottom: 12px;
}
.home-search-zone--marketplace .site-search--home .site-search__secondary-block + .site-search__secondary-block {
border-top-color: rgba(15, 23, 42, 0.07);
margin-top: 12px;
padding-top: 14px;
}
.home-search-zone--marketplace .hero-search-controls--home {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
justify-content: flex-start;
}
.home-search-zone--marketplace .hero-search-controls__cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
.home-search-zone--marketplace .hero-search-listing-toggle {
flex-shrink: 0;
}

.home-search-zone--marketplace .hero-search-row {
flex: 1 1 auto;
min-width: 260px;
max-width: min(600px, 100%);
box-sizing: border-box;
}

.home-search-zone--marketplace .hero-search-geo-anchor .hero-search-dropdown {
width: 100%;
min-width: 100%;
max-width: none;
box-sizing: border-box;
}
.home-search-zone--marketplace .hero-search-settlements-link {
flex: 0 0 auto;
flex-shrink: 0;
align-self: center;
white-space: nowrap;
padding: 9px 11px;
font-size: 13px;
font-weight: 500;
}
.home-search-zone--marketplace .hero-search-home-cta {
flex: 0 0 auto;
flex-shrink: 0;
margin-left: auto;
padding: 9px 13px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.home-search-zone--marketplace .home-listing-keyword__submit.cta {
padding: 10px 18px;
font-size: 15px;
}
.home-search-zone--marketplace .hero-search-property-chips {
margin-top: 12px;
gap: 10px;
align-items: center;
}
.home-search-zone--marketplace .hero-search-property-chips-main {
gap: 10px;
}
.home-search-zone--marketplace .hero-search-chip {
padding: 7px 13px;
font-size: 13px;
}
.home-search-zone--marketplace .hero-search-more-trigger {
padding: 7px 13px;
min-height: 38px;
font-size: 13px;
border-style: solid;
border-color: rgba(15, 23, 42, 0.1);
align-self: center;
}
.home-wrap--marketplace .home-main-column > .section:first-of-type,
.home-wrap--hub .home-main-column > .section:first-of-type {
margin-top: 0;
}
}
@media (max-width: 1023px) {
.home-search-zone--marketplace {
margin-bottom: 14px;
padding: 14px 14px 12px;
border-radius: var(--radius-lg);
border: 1px solid rgba(37, 99, 235, 0.22);
background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 100%);
box-shadow: var(--shadow-card);
}
.home-search-zone--marketplace .hero-search-controls--home {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.home-search-zone--marketplace .hero-search-controls__cluster {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.home-search-zone--marketplace .hero-search-row {
max-width: none;
width: 100%;
min-width: 0;
flex: 1 1 auto;
}
.home-search-zone--marketplace .hero-search-settlements-link {
text-align: center;
}
.home-search-zone--marketplace .hero-search-home-cta {
text-align: center;
width: 100%;
box-sizing: border-box;
}
.home-search-zone--marketplace .site-search--home .site-search__panel {
padding: 14px 12px 12px;
}
.home-search-zone--marketplace .hero-search-property-chips {
gap: 8px;
}
.home-search-zone--marketplace .hero-search-property-chips-main {
gap: 8px;
}
}
.home-search-zone--marketplace .hero-search {
margin-bottom: 0;
}
.home-hero-value-prop {
margin: 0 0 18px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.home-hero-value-prop__title {
margin: 0 0 8px;
font-size: clamp(1.28rem, 2.4vw, 1.72rem);
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--text);
}
.home-hero-value-prop__lead {
margin: 0;
font-size: 15px;
line-height: 1.65;
max-width: 48rem;
color: var(--text-muted);
}

main.home-wrap--marketplace.home-wrap--wide .home-rail-inner,
main.home-wrap--hub.home-wrap--wide .home-rail-inner {
gap: 12px;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--right .home-rail-block,
main.home-wrap--hub.home-wrap--wide .home-rail--right .home-rail-block {
padding: 10px 12px 10px;
border: 1px solid rgba(15, 23, 42, 0.07);
background: rgba(248, 250, 252, 0.85);
box-shadow: none;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--right .home-rail-block-title,
main.home-wrap--hub.home-wrap--wide .home-rail--right .home-rail-block-title {
margin: 0 0 6px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--right .home-rail-block-text,
main.home-wrap--hub.home-wrap--wide .home-rail--right .home-rail-block-text {
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--right .home-rail-block-actions,
main.home-wrap--hub.home-wrap--wide .home-rail--right .home-rail-block-actions {
margin-top: 8px;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--right .home-rail-slot-cta,
main.home-wrap--hub.home-wrap--wide .home-rail--right .home-rail-slot-cta {
padding: 7px 12px;
font-size: 12px;
font-weight: 600;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--left .featured-badge,
main.home-wrap--hub.home-wrap--wide .home-rail--left .featured-badge {
top: 8px;
left: 8px;
padding: 2px 6px;
border-radius: 6px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #451a03;
background: linear-gradient(135deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 224, 138, 0.88) 100%);
border: 1px solid rgba(180, 83, 9, 0.45);
box-shadow: none;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--left .card-badge,
main.home-wrap--hub.home-wrap--wide .home-rail--left .card-badge {
top: 8px;
right: 8px;
padding: 2px 6px;
font-size: 9px;
font-weight: 600;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--left .card--sample .card-badge,
main.home-wrap--hub.home-wrap--wide .home-rail--left .card--sample .card-badge {
color: #92400e;
background: rgba(254, 243, 199, 0.65);
border-color: rgba(202, 138, 4, 0.35);
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--left .card--real .card-badge,
main.home-wrap--hub.home-wrap--wide .home-rail--left .card--real .card-badge {
color: #166534;
background: rgba(22, 163, 74, 0.1);
border-color: rgba(22, 163, 74, 0.28);
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--left .promoted-listing-badge,
main.home-wrap--hub.home-wrap--wide .home-rail--left .promoted-listing-badge {
top: 6px;
right: 6px;
padding: 2px 7px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--accent);
background: rgba(37, 99, 235, 0.08);
border: 1px solid rgba(37, 99, 235, 0.2);
box-shadow: none;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--left .property-card .property-title,
main.home-wrap--hub.home-wrap--wide .home-rail--left .property-card .property-title {
font-size: 14px;
font-weight: 600;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--left .property-card .property-price,
main.home-wrap--hub.home-wrap--wide .home-rail--left .property-card .property-price {
font-size: 15px;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--left .property-card .property-meta,
main.home-wrap--hub.home-wrap--wide .home-rail--left .property-card .property-meta,
main.home-wrap--marketplace.home-wrap--wide .home-rail--left .property-card .property-facts,
main.home-wrap--hub.home-wrap--wide .home-rail--left .property-card .property-facts {
font-size: 12px;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--left .property-card .property-badges,
main.home-wrap--hub.home-wrap--wide .home-rail--left .property-card .property-badges {
margin-top: 8px;
font-size: 11px;
font-weight: 500;
color: #334155;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--left a.card.card--sample,
main.home-wrap--hub.home-wrap--wide .home-rail--left a.card.card--sample {
border-width: 1px;
border-color: #f59e0b;
}
main.home-wrap--marketplace.home-wrap--wide .home-rail--left a.card.card--real,
main.home-wrap--hub.home-wrap--wide .home-rail--left a.card.card--real {
border-width: 1px;
border-color: #22c55e;
}
main.home-wrap--marketplace.home-wrap--wide .home-main-column .featured-rail h2,
main.home-wrap--marketplace.home-wrap--wide .home-main-column .featured-section h2,
main.home-wrap--hub.home-wrap--wide .home-main-column .featured-rail h2,
main.home-wrap--hub.home-wrap--wide .home-main-column .featured-section h2 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
}
main.home-wrap--marketplace.home-wrap--wide .home-main-column .section-lead,
main.home-wrap--hub.home-wrap--wide .home-main-column .section-lead {
font-size: 15px;
line-height: 1.55;
}

main.home-wrap--hub .hero.hero-compact {
padding: 18px 0 8px;
}
main.home-wrap--hub .hero.hero-compact h1 {
margin: 10px 0 8px;
font-size: clamp(24px, 3.5vw, 34px);
font-weight: 600;
line-height: 1.18;
letter-spacing: -0.02em;
}
main.home-wrap--hub .hero.hero-compact .subtitle {
margin: 0 0 10px;
font-size: 16px;
line-height: 1.55;
max-width: 48rem;
}
main.home-wrap--hub .hero.hero-compact .eyebrow {
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.03em;
background: rgba(37, 99, 235, 0.07);
border: 1px solid rgba(37, 99, 235, 0.16);
color: #1d4ed8;
}
main.home-wrap--hub .hero.hero-compact + .section.section--home-promo-banner {
margin-top: 10px;
}
main.home-wrap--hub .home-page-layout {
margin-top: 4px;
}
main.home-wrap--hub .home-main-column .section > h2 {
font-size: clamp(1.1rem, 2.4vw, 1.28rem);
font-weight: 600;
letter-spacing: -0.02em;
}
main.home-wrap--hub .settlement-profile h2 {
font-size: clamp(1.1rem, 2.4vw, 1.28rem);
font-weight: 600;
}
main.home-wrap--hub .settlement-profile-media,
main.home-wrap--hub .settlement-profile-facts {
border-color: rgba(15, 23, 42, 0.08);
box-shadow: none;
}
@media (min-width: 1024px) {
main.home-wrap--hub .site-search--local .settlement-mvp-filters.site-search__panel--advanced,
main.home-wrap--hub .site-search--global .settlement-mvp-filters.site-search__panel--advanced {
margin: 0 0 18px;
padding: 18px 18px 16px;
border-radius: var(--radius-lg);
border: 1px solid rgba(15, 23, 42, 0.08);
background: linear-gradient(165deg, #ffffff 0%, #f8fafc 52%, #f1f5f9 100%);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
main.home-wrap--hub .settlement-mvp-filters .site-search__panel-title {
margin: 0 0 6px;
font-size: 1.08rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
}
main.home-wrap--hub .settlement-mvp-filters .site-search__panel-lead {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.6;
max-width: 48rem;
color: var(--text-muted);
}
main.home-wrap--hub .settlement-mvp-filters .site-search__context-row {
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
main.home-wrap--hub .site-search--local .settlement-mvp-filters__form,
main.home-wrap--hub .site-search--global .settlement-mvp-filters__form {
gap: 16px 18px;
}
main.home-wrap--hub .settlement-mvp-filters__actions,
main.home-wrap--hub .site-search--local .settlement-mvp-filters__actions {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid rgba(15, 23, 42, 0.07);
}
main.home-wrap--hub .site-search--local .settlement-mvp-filters__hint,
main.home-wrap--hub .site-search--global .settlement-mvp-filters__hint {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
main.home-wrap--hub .settlement-subarea-nav {
margin: 0 0 16px;
padding: 14px 0 0;
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
main.home-wrap--hub .settlement-quick-filters {
margin: 0 0 22px;
padding: 16px 18px 14px;
border: 1px solid rgba(15, 23, 42, 0.07);
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
box-shadow: none;
}
main.home-wrap--hub .settlement-profile + .settlement-quick-filters {
margin-top: 20px;
}
main.home-wrap--hub .settlement-local-seo {
margin-top: 4px;
padding: 14px 16px;
border: 1px solid rgba(15, 23, 42, 0.07);
background: rgba(255, 255, 255, 0.92);
box-shadow: none;
}
main.home-wrap--hub .settlement-local-seo-heading {
font-size: 1rem;
font-weight: 600;
}
}
@media (max-width: 1023px) {
main.home-wrap--hub .site-search--local .settlement-mvp-filters.site-search__panel--advanced,
main.home-wrap--hub .site-search--global .settlement-mvp-filters.site-search__panel--advanced {
margin: 0 0 16px;
padding: 16px 14px 14px;
border-radius: var(--radius-lg);
border: 1px solid rgba(15, 23, 42, 0.1);
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
}
.home-page-layout {
display: block;
}
.home-rail {
display: none;
}
.home-main-column {
min-width: 0;
}
.home-page-layout--detail .home-rail {
display: block;
position: static;
margin-top: 24px;
}
@media (min-width: 1024px) {
.home-page-layout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr) 260px;
gap: 24px;
align-items: start;
}
.home-page-layout--detail {
grid-template-columns: minmax(0, 1fr) 260px 220px;
}
.home-page-layout--detail .home-main-column {
grid-column: 1;
grid-row: 1;
}
.home-page-layout--detail .home-rail--right {
grid-column: 2;
grid-row: 1;
}
.home-page-layout--detail .home-rail--left {
grid-column: 3;
grid-row: 1;
}

main.home-wrap--marketplace.home-wrap--wide .section--home-promo-banner.home-top-promo,
main.home-wrap--marketplace.home-wrap--wide .home-top-promo,
main.home-wrap--marketplace.home-wrap--wide .home-search-zone--marketplace {
width: 100%;
max-width: none;
min-width: 0;
box-sizing: border-box;
}
main.home-wrap--marketplace.home-wrap--wide .home-search-zone--marketplace {
margin-bottom: 0;
}
.home-rail {
display: block;
position: sticky;
top: 20px;
align-self: start;
}
.home-page-layout--detail .home-rail {
margin-top: 0;
}
.home-wrap--marketplace .home-rail,
.home-wrap--hub .home-rail {
top: 12px;
}
.home-rail-inner {
display: flex;
flex-direction: column;
gap: 14px;
}
}
.home-rail-listing-grid.grid {
grid-template-columns: 1fr;
gap: 12px;
}
.home-rail-empty {
margin: 0;
font-size: 13px;
line-height: 1.45;
}
.home-rail-heading {
margin: 0 0 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.home-rail-card {
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
padding: 12px;
position: relative;
}
.home-rail-card-media {
aspect-ratio: 16 / 10;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--surface-page) 0%, var(--line) 100%);
margin-bottom: 10px;
border: 1px dashed var(--line-strong);
}
.home-rail-card-title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
color: var(--text);
}
.home-rail-card-meta {
margin: 0 0 6px;
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
.home-rail-card-price {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--accent);
}
.home-rail-pill {
display: inline-block;
margin-top: 8px;
padding: 3px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent-soft);
}
.home-rail-pill--muted {
color: var(--text-muted);
background: var(--surface-page);
border-color: var(--line);
}
.home-rail-block {
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
padding: 14px 14px 12px;
box-shadow: var(--shadow-sm);
}
.home-rail-block-title {
margin: 0 0 8px;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.home-rail-block-text {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
}
.home-rail-block--ad .home-rail-block-text {
margin-bottom: 4px;
}
.home-rail-slot-card {
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
padding: 12px 12px 10px;
box-shadow: var(--shadow-sm);
}
.home-rail-slot-card--left {
max-width: 100%;
}
.home-rail-slot-eyebrow {
margin: 0 0 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.home-rail-slot-title {
margin: 0 0 6px;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.02em;
color: var(--text);
}
.home-rail-slot-sub {
margin: 0 0 8px;
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
}
.home-rail-slot-actions {
margin: 0;
}
.home-rail-slot-actions .cta {
width: 100%;
text-align: center;
justify-content: center;
padding: 8px 12px;
font-size: 13px;
}
.home-rail-promoted-listing-card {
position: relative;
margin-bottom: 12px;
}
.home-rail-promoted-listing-card .property-card {
position: relative;
}
.promoted-listing-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: inline-block;
padding: 3px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent-soft);
pointer-events: none;
box-shadow: var(--shadow-sm);
}
.hero { padding: 40px 0 28px; }
.hero-compact { padding: 24px 0 12px; }
.eyebrow {
display: inline-block;
padding: 8px 12px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.03em;
}
h1 {
margin: 16px 0 12px;
font-size: clamp(28px, 4.5vw, 42px);
line-height: 1.12;
letter-spacing: -0.02em;
font-weight: 700;
}
.subtitle {
max-width: 640px;
margin: 0 0 28px;
color: var(--text-muted);
font-size: 18px;
line-height: 1.6;
}
.hero-cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}

.site-search {
width: 100%;
box-sizing: border-box;
}
.site-search__panel {
box-sizing: border-box;
padding: 20px 22px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
}
.site-search__panel--stack {
display: flex;
flex-direction: column;
gap: 0;
}
.site-search__panel-title {
margin: 0 0 8px;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--text);
}
.site-search__panel-lead {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.55;
max-width: 40rem;
}
.site-search__panel-lead strong {
color: var(--text);
font-weight: 700;
}
.site-search__lead-em {
font-weight: 600;
color: var(--text);
}
.site-search__primary-bar {
padding-bottom: 16px;
margin-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.site-search__secondary-block {
padding-top: 14px;
margin-top: 4px;
margin-bottom: 4px;
}
.site-search__secondary-block + .site-search__secondary-block {
border-top: 1px solid var(--line);
margin-top: 14px;
padding-top: 16px;
}
.site-search__field-label {
display: block;
margin: 0 0 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.site-search__section-label {
letter-spacing: 0.04em;
text-transform: uppercase;
}
.site-search__context-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 12px 16px;
margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.site-search__context-place {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 10rem;
}
.site-search__context-place-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
}
.site-search__seg-group {
display: inline-flex;
flex-shrink: 0;
border-radius: var(--radius-md);
border: 1px solid var(--line);
overflow: hidden;
background: var(--surface-page);
box-shadow: var(--shadow-sm);
}
.site-search__seg {
margin: 0;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
color: var(--text-muted);
text-decoration: none;
border-right: 1px solid var(--line);
transition: background 0.12s ease, color 0.12s ease;
}
.site-search__seg:last-child {
border-right: none;
}
.site-search__seg:hover {
background: var(--surface-hover);
color: var(--text);
}
.site-search__seg--active {
background: var(--accent);
color: #fff;
}
.site-search__seg--active:hover {
color: #fff;
background: var(--accent);
filter: brightness(0.95);
}
.site-search__field-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px 16px;
width: 100%;
margin-bottom: 12px;
}
.site-search__field-row--split .settlement-mvp-filters__field {
flex: 1 1 200px;
min-width: min(100%, 200px);
}
.site-search__field-row--triple {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 16px;
}
.site-search__field-row--triple .settlement-mvp-filters__field {
min-width: 0;
}

.search-listing-toggle {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 10px;
}
.search-listing-toggle .hero-search-toggle {
border: 1px solid rgba(0, 0, 0, 0.16);
background: #fff;
padding: 7px 12px;
border-radius: 999px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.search-listing-toggle .hero-search-toggle[aria-pressed='true'] {
background: #0f766e;
color: #fff;
border-color: #0f766e;
}

.site-search__price-row-compact.site-search__field-row--triple {
align-items: start;
}
.site-search__price-with-unit {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.site-search__price-with-unit .site-search__control {
min-width: 0;
flex: 1 1 5rem;
}
.site-search__price-unit {
font-size: 12px;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
max-width: 100%;
}
.site-search__price-help,
.site-search__price-echo {
font-size: 12px;
line-height: 1.35;
color: var(--text-muted);
margin-top: 5px;
min-height: 16px;
}
.site-search__price-error {
font-size: 12px;
line-height: 1.35;
color: #b91c1c;
margin: 6px 0 0;
display: none;
}
@media (max-width: 720px) {
.site-search__price-row-compact.site-search__field-row--triple {
grid-template-columns: 1fr;
}
.site-search__price-unit {
font-size: 11px;
}
}
@media (max-width: 640px) {
.site-search__field-row--triple {
grid-template-columns: 1fr;
}
}
.site-search__field--full {
width: 100%;
flex: 1 1 100%;
}
.site-search__control,
.site-search .site-search__control {
min-height: 44px;
box-sizing: border-box;
}
.site-search__actions {
margin-top: 8px;
padding-top: 14px;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
}
.site-search__apply--primary {
font-weight: 700;
}
button.site-search__apply--primary.cta,
.site-search__apply--primary.cta {
background: var(--accent);
color: #fff !important;
border-color: transparent;
}
button.site-search__apply--primary.cta:hover,
.site-search__apply--primary.cta:hover {
background: var(--accent-hover);
}
a.site-search__reset.btn-secondary {
text-decoration: none;
}
.site-search__keyword {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.site-search__keyword-eyebrow {
margin: 0 0 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.site-search__keyword-hint {
margin: 8px 0 0;
font-size: 12px;
line-height: 1.45;
}
.site-search__keyword-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
}
.site-search__keyword-row .site-search__control {
flex: 1 1 12rem;
min-width: 0;
}
.site-search--home .site-search__panel {
max-width: 48rem;
margin-left: auto;
margin-right: auto;
}
.site-search--home .hero-search {
max-width: none;
margin: 0 auto 20px;
}
.site-search--local,
.site-search--global {
max-width: 100%;
}
.site-search--local .settlement-mvp-filters.site-search__panel--advanced,
.site-search--global .settlement-mvp-filters.site-search__panel--advanced {
margin: 0 0 22px;
padding: 20px 22px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
}
.site-search--local .settlement-mvp-filters__form,
.site-search--global .settlement-mvp-filters__form {
gap: 14px 18px;
}
.site-search--local .settlement-mvp-filters__hint,
.site-search--global .settlement-mvp-filters__hint {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.home-listing-keyword__price-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
margin-top: 12px;
}
.home-listing-keyword__price-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.home-listing-keyword__price-input {
width: 100%;
min-height: 44px;
box-sizing: border-box;
}
@media (max-width: 520px) {
.home-listing-keyword__price-row {
grid-template-columns: 1fr;
}
}
.site-search .hero-search-listing-toggle {
border-radius: var(--radius-md);
border: 1px solid var(--line);
overflow: hidden;
background: var(--surface-page);
box-shadow: var(--shadow-sm);
}
.site-search .hero-search-toggle {
padding: 10px 16px;
min-height: 44px;
box-sizing: border-box;
}
.site-search .hero-search-input,
.site-search .site-search__input {
min-height: 44px;
box-sizing: border-box;
border-radius: var(--radius-md);
}
.site-search .hero-search-chip {
min-height: 40px;
padding: 8px 14px;
border-radius: var(--radius-md);
font-size: 14px;
}
.site-search .hero-search-more-trigger {
min-height: 40px;
border-radius: var(--radius-md);
}
.hero-search {
position: relative;
width: 100%;
max-width: 36rem;
margin: 0 auto 20px;
}
.hero-search-controls {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
}
.hero-search-listing-toggle {
display: inline-flex;
flex-shrink: 0;
align-self: center;
border-radius: var(--radius-md);
border: 1px solid var(--line);
overflow: hidden;
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.hero-search-toggle {
margin: 0;
padding: 10px 14px;
border: none;
border-right: 1px solid var(--line);
background: transparent;
cursor: pointer;
font-size: 14px;
font-weight: 600;
font-family: inherit;
color: var(--text-muted);
transition: background 0.12s ease, color 0.12s ease;
}
.hero-search-toggle:last-child {
border-right: none;
}
.hero-search-toggle[aria-pressed='true'] {
background: var(--accent);
color: #fff;
}
.hero-search-toggle[aria-pressed='false']:hover {
background: var(--surface-hover);
color: var(--text);
}
.hero-search-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
z-index: 1;
position: relative;
}
@media (max-width: 480px) {
.hero-search-controls {
flex-direction: column;
}
.hero-search-listing-toggle {
align-self: stretch;
justify-content: stretch;
}
.hero-search-toggle {
flex: 1;
text-align: center;
}
}
.hero-search-property-chips {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
margin-top: 12px;
margin-bottom: 2px;
}
.hero-search-property-chips-main {
display: flex;
flex-wrap: wrap;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.hero-search-more {
position: relative;
flex: 0 0 auto;
align-self: center;
}
.hero-search-more-trigger {
margin: 0;
padding: 6px 12px;
border-radius: 999px;
border: 1px dashed var(--line);
background: var(--surface-page);
color: var(--text-muted);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease,
box-shadow 0.12s ease;
white-space: nowrap;
}
.hero-search-more-trigger:hover {
background: var(--surface-hover);
color: var(--text);
border-color: var(--line);
}
.hero-search-more-trigger--active {
border-style: solid;
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent);
box-shadow: var(--shadow-sm);
}
.hero-search-more-panel {
position: absolute;
z-index: 75;
top: calc(100% + 6px);
right: 0;
left: auto;
min-width: min(100vw - 32px, 240px);
max-width: min(100vw - 32px, 280px);
max-height: min(50vh, 260px);
overflow-y: auto;
padding: 6px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
-webkit-overflow-scrolling: touch;
}
.hero-search-more-panel .hero-search-chip--extra {
display: block;
width: 100%;
box-sizing: border-box;
text-align: left;
border-radius: var(--radius-md);
margin: 0 0 4px;
}
.hero-search-more-panel .hero-search-chip--extra:last-child {
margin-bottom: 0;
}
@media (max-width: 480px) {
.hero-search-more-panel {
right: 0;
left: auto;
}
.hero-search-property-chips-main {
flex: 1 1 100%;
}
.hero-search-more {
width: 100%;
display: flex;
justify-content: flex-end;
}
}
.hero-search-chip {
margin: 0;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface-page);
color: var(--text-muted);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease,
box-shadow 0.12s ease;
}
.hero-search-chip[aria-pressed='true'] {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: var(--shadow-sm);
}
.hero-search-chip[aria-pressed='false']:hover {
background: var(--surface-hover);
color: var(--text);
border-color: var(--line);
}
.hero-search-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hero-search-row {
position: relative;
flex: 1;
min-width: 12rem;
}
.hero-search-geo-anchor {
overflow: visible;
}
.site-search--home .site-search__primary-bar {
position: relative;
z-index: 4;
overflow: visible;
}
.hero-search-input {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
font-size: 16px;
color: var(--text);
box-shadow: var(--shadow-sm);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hero-search-input::placeholder {
color: var(--text-faint);
}
.hero-search-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.hero-search-input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.hero-search-dropdown {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 8px);
z-index: 100;
max-height: min(50vh, 280px);
overflow-y: auto;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
-webkit-overflow-scrolling: touch;
}
.hero-search-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) max-content;
align-items: center;
gap: 10px;
padding: 10px 12px;
text-decoration: none;
color: var(--text) !important;
font-size: 15px;
font-weight: 500;
line-height: 1.35;
border-bottom: 1px solid var(--line);
transition: background 0.12s ease;
}
.hero-search-item:last-child {
border-bottom: none;
}
.hero-search-item:hover,
.hero-search-item--active {
background: var(--surface-hover);
}
.hero-search-item--active {
background: var(--accent-soft);
}
.hero-search-item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
z-index: 1;
position: relative;
}
.hero-search-icon-svg {
flex-shrink: 0;
color: var(--accent);
opacity: 0.9;
}
.hero-search-item-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: normal;
}
.hero-search-item-trail {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-shrink: 0;
white-space: nowrap;
min-width: 0;
}
.hero-search-item-count {
flex-shrink: 0;
font-size: 12px;
font-weight: 500;
color: #475569;
white-space: nowrap;
}
.hero-search-item-count[hidden] {
display: none !important;
}
.hero-search-badge {
flex-shrink: 0;
white-space: nowrap;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #334155;
padding: 3px 8px;
border-radius: 999px;
background: #f1f5f9;
border: 1px solid #cbd5e1;
}
.cta {
display: inline-block;
padding: 12px 22px;
border-radius: var(--radius-md);
background: var(--accent);
color: #fff !important;
text-decoration: none;
font-weight: 600;
font-size: 16px;
border: 1px solid transparent;
box-shadow: var(--shadow-sm);
transition: background 0.15s ease;
}
button.cta { cursor: pointer; font-family: inherit; }
.cta:hover { background: var(--accent-hover); }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-secondary {
display: inline-block;
padding: 12px 22px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--text) !important;
text-decoration: none;
font-weight: 600;
font-size: 15px;
transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-secondary:hover {
background: var(--surface-hover);
border-color: var(--line-strong);
}
.btn-secondary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.btn-danger {
display: inline-block;
padding: 12px 22px;
border: 1px solid #991b1b;
border-radius: var(--radius-md);
background: var(--danger);
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.btn-danger:hover { background: #991b1b; }
.btn-danger:focus-visible { outline: 3px solid #fca5a5; outline-offset: 3px; }
.account-danger-zone {
margin-top: 28px;
padding: 16px;
border: 1px solid #fecaca;
border-radius: var(--radius-md);
background: #fff7f7;
}
.account-danger-zone summary { cursor: pointer; font-weight: 700; color: #991b1b; }
.account-danger-zone form { display: grid; gap: 12px; max-width: 520px; }
.account-danger-zone input[type="password"], .account-danger-zone input[name="confirmation"] { width: 100%; box-sizing: border-box; }
.section { margin-top: 48px; }

.section--home-promo-banner.public-top-slot-banner {
display: block;
width: 100%;
min-width: 0;
box-sizing: border-box;
margin-top: 14px;
margin-bottom: 0;
}
@media (min-width: 641px) {
.section--home-promo-banner.public-top-slot-banner {
margin-top: 0;
}
}
.home-promo-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 16px 24px;
padding: 20px 24px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.home-promo-banner__text {
flex: 1;
min-width: min(100%, 280px);
}
.home-promo-banner__mobile-text {
display: none;
}
.home-promo-banner__eyebrow {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
.home-promo-banner__title {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.3;
color: var(--text);
}
.home-promo-banner__sub {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--text-muted);
max-width: 42rem;
}
.home-promo-banner__actions {
flex-shrink: 0;
}
.home-promo-banner--with-media.home-promo-banner--without-text .home-promo-banner__actions {
grid-column: 1 / -1;
justify-self: end;
padding: 12px 24px 18px;
}
.home-promo-banner__cta {
white-space: nowrap;
}
.home-promo-banner__media {
flex: 0 1 340px;
min-width: min(100%, 220px);
max-width: 380px;
margin-left: auto;
}
.home-promo-banner__media img {
display: block;
width: 100%;
height: auto;
max-height: 140px;
object-fit: cover;
border-radius: var(--radius-md);
border: 1px solid rgba(15, 23, 42, 0.1);
background: #fff;
}

.public-top-slot-banner .home-promo-banner {
width: 100%;
box-sizing: border-box;
justify-content: space-between;
align-items: flex-start;
gap: 18px 28px;
padding: 22px 24px;
}

.public-top-slot-banner .home-promo-banner--with-media {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0;
padding: 0;
overflow: hidden;
}
.public-top-slot-banner .home-promo-banner--with-media .home-promo-banner__media {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
max-width: none;
margin: 0;
}
.public-top-slot-banner .home-promo-banner--with-media .home-promo-banner__media img {
display: block;
width: 100%;
height: auto;
max-height: none;
object-fit: contain;
border: 0;
border-radius: 0;
}
.public-top-slot-banner .home-promo-banner--with-media .home-promo-banner__text {
min-width: 0;
padding: 20px 24px;
}
.public-top-slot-banner .home-promo-banner--with-media .home-promo-banner__actions {
padding: 20px 24px 20px 0;
}
@media (min-width: 768px) {
.public-top-slot-banner .home-promo-banner {
min-height: 118px;
padding: 24px 28px;
align-items: center;
}
.public-top-slot-banner .home-promo-banner--with-media {
min-height: 0;
padding: 0;
}
.public-top-slot-banner .home-promo-banner__title {
font-size: clamp(1.15rem, 2.1vw, 1.42rem);
margin-bottom: 10px;
}
.public-top-slot-banner .home-promo-banner__sub {
font-size: clamp(0.95rem, 1.5vw, 1.05rem);
max-width: 52rem;
line-height: 1.55;
}
}
@media (max-width: 640px) {
.public-top-slot-banner .home-promo-banner {
flex-direction: column;
align-items: stretch;
padding: 18px 16px;
}
.public-top-slot-banner .home-promo-banner__media {
margin-left: 0;
width: 100%;
max-width: none;
min-width: 0;
}
.public-top-slot-banner .home-promo-banner__media img {
max-height: 170px;
}
.public-top-slot-banner .home-promo-banner__actions {
align-self: stretch;
}
.public-top-slot-banner .home-promo-banner__actions .home-promo-banner__cta {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
white-space: normal;
}
.public-top-slot-banner .home-promo-banner--with-media {
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: 0;
}
.public-top-slot-banner .home-promo-banner--with-media .home-promo-banner__media {
grid-column: 1;
}
.public-top-slot-banner .home-promo-banner--with-media .home-promo-banner__media img {
max-height: none;
}
.public-top-slot-banner .home-promo-banner--with-media .home-promo-banner__text {
padding: 18px 16px 14px;
}
.public-top-slot-banner .home-promo-banner--with-media .home-promo-banner__actions {
padding: 0 16px 18px;
}
}

.home-wrap--marketplace .section--home-promo-banner.home-top-promo {
margin-top: 0;
margin-bottom: 12px;
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--compact {
padding: 12px 16px;
gap: 10px 16px;
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--compact .home-promo-banner__eyebrow {
margin-bottom: 3px;
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--compact .home-promo-banner__title {
margin-bottom: 3px;
font-size: 17px;
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--compact .home-promo-banner__sub {
font-size: 14px;
line-height: 1.4;
}
@media (max-width: 640px) {
.home-wrap--marketplace .home-top-promo .home-promo-banner--compact,
.home-wrap--marketplace .home-top-promo .home-promo-banner--own-listing.home-promo-banner--with-media {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
padding: 12px 14px;
gap: 10px 12px;
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--own-listing .home-promo-banner__media {
display: none;
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--own-listing .home-promo-banner__text {
min-width: 0;
padding: 0;
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--own-listing.home-promo-banner--with-media .home-promo-banner__text {
display: none;
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--own-listing.home-promo-banner--with-media .home-promo-banner__mobile-text {
display: block;
min-width: 0;
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--own-listing .home-promo-banner__actions {
align-self: stretch;
padding: 0;
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--own-listing .home-promo-banner__cta {
display: block;
width: 100%;
box-sizing: border-box;
padding: 9px 12px;
text-align: center;
}
}
@media (min-width: 641px) {
.home-wrap--marketplace .home-top-promo .home-promo-banner--own-listing.home-promo-banner--with-media .home-promo-banner__media {
aspect-ratio: 2929 / 537;
overflow: hidden;
background: var(--surface-elevated);
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--own-listing.home-promo-banner--with-media .home-promo-banner__media picture {
display: block;
width: 100%;
height: 100%;
}
.home-wrap--marketplace .home-top-promo .home-promo-banner--own-listing.home-promo-banner--with-media .home-promo-banner__media img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.section:first-of-type { margin-top: 0; }
.section h2 {
margin: 0 0 14px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.section-lead {
margin: 0 0 20px;
max-width: 720px;
color: var(--text-muted);
font-size: 16px;
line-height: 1.6;
}
.section-lead a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.section-lead a:hover { text-decoration: underline; }
.hub-footer-link {
margin: 24px 0 0;
font-size: 15px;
}
.text-link {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.text-link:hover { text-decoration: underline; }
.county-hub {
display: flex;
flex-direction: column;
gap: 36px;
}
.county-section {
margin: 0;
}
.county-heading {
margin: 0 0 16px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--primary);
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.empty-state {
margin-top: 8px;
padding: 22px 22px 20px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.empty-state--prompt {
background: var(--accent-soft);
border-color: rgba(37, 99, 235, 0.18);
}
.empty-state--no-results {
border-color: rgba(100, 116, 139, 0.35);
}
.empty-state-lead {
margin: 0 0 14px;
color: var(--text-muted);
font-size: 16px;
line-height: 1.6;
}
.empty-state--prompt .empty-state-lead:last-child {
margin-bottom: 0;
}
.empty-state-links {
margin: 0;
font-size: 15px;
line-height: 1.65;
color: var(--text-muted);
}
.empty-state-links a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.empty-state-links a:hover { text-decoration: underline; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}

.grid.listing-results-grid,
.listing-results-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
.grid.listing-results-grid,
.listing-results-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.grid.listing-results-grid,
.listing-results-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.listing-results-grid .property-card {
min-width: 0;
}
@media (min-width: 1024px) {

.listing-results-grid .property-card .property-title {
font-size: 15px;
}
}

.listing-search-results.htmx-request {
opacity: 0.62;
transition: opacity 0.15s ease;
}
.listing-search-results .htmx-indicator {
display: none;
margin: 0 0 10px;
font-size: 14px;
}
.listing-search-results.htmx-request .htmx-indicator {
display: block;
}
.listing-search-pagination {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 18px 0 0;
}
.listing-search-pagination__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 44px;
padding: 10px 14px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
color: var(--text);
text-decoration: none;
font-size: 14px;
}
.listing-search-pagination__link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.listing-search-pagination__link:hover {
border-color: var(--accent);
text-decoration: none;
}
.listing-search-pagination__current {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
padding: 6px 10px;
border-radius: 8px;
background: var(--accent);
color: #fff;
font-size: 14px;
font-weight: 600;
}
.featured-settlement-chip-grid {
display: none;
}
.featured-settlement-chip {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface-page);
color: var(--text) !important;
text-decoration: none;
font-weight: 600;
font-size: 14px;
line-height: 1.35;
transition: background 0.12s ease, border-color 0.12s ease,
box-shadow 0.12s ease;
}
.featured-settlement-chip:hover {
background: var(--surface-hover);
border-color: var(--line-strong);
}
.featured-settlement-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.featured-settlement-chip--priority {
border-color: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.section--home-popular-searches {
margin-top: 0;
}
.home-popular-searches-chips {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
.home-popular-search-chip {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface-page);
color: var(--text) !important;
text-decoration: none;
font-weight: 600;
font-size: 14px;
line-height: 1.35;
transition: background 0.15s ease, border-color 0.15s ease;
}
.home-popular-search-chip:hover {
background: var(--surface-hover);
border-color: var(--line-strong);
text-decoration: none;
}
.home-popular-search-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (min-width: 641px) {
.section--featured-settlements .featured-settlement-chip-grid {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
.section--featured-settlements .featured-settlement-cards-grid {
display: none !important;
}
}
.nearby-settlements h2 {
margin: 0 0 16px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.nearby-settlements-list {
margin: 0;
padding: 0 0 0 1.25em;
list-style: disc;
max-width: 42rem;
}
.nearby-settlements-list li {
margin: 0.35em 0;
line-height: 1.45;
}
.nearby-settlements-list a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.nearby-settlements-list a:hover {
text-decoration: underline;
}
.nearby-settlements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.nearby-settlements-link {
font-size: 16px;
font-weight: 600;
line-height: 1.4;
text-align: center;
}
.settlement-profile {
margin-bottom: 0;
}
.settlement-profile h2 {
margin: 0 0 14px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.settlement-profile-body p {
margin: 0 0 16px;
color: var(--text);
font-size: 16px;
line-height: 1.65;
max-width: 720px;
}
.settlement-profile-media {
margin: 0 0 18px;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.settlement-profile-media img {
display: block;
width: 100%;
max-height: 360px;
object-fit: cover;
}
.settlement-profile-attribution {
margin: 0;
padding: 10px 14px;
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
background: var(--surface-page);
border-top: 1px solid var(--line);
}
.settlement-profile-attribution a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.settlement-profile-attribution a:hover { text-decoration: underline; }
.settlement-profile-facts {
margin: 0 0 16px;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
display: grid;
gap: 10px 20px;
max-width: 520px;
}
.settlement-profile-facts-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 8px 16px;
align-items: baseline;
font-size: 14px;
}
.settlement-profile-facts-row dt {
margin: 0;
font-weight: 600;
color: var(--text-muted);
}
.settlement-profile-facts-row dd {
margin: 0;
color: var(--text);
}
.settlement-profile-source {
margin: 0;
font-size: 13px;
color: var(--text-muted);
}
.settlement-profile-source a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.settlement-profile-source a:hover { text-decoration: underline; }
a.card, .card-link {
display: block;
padding: 22px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
a.card:hover, .card-link:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-card-hover);
transform: translateY(-1px);
}
div.card.property-card--split {
display: flex;
padding: 22px;
border: 2px solid transparent;
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
color: inherit;
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
text-decoration: none;
}
div.card.property-card--split.card--sample { border-color: #f59e0b; }
div.card.property-card--split.card--real { border-color: #22c55e; }
div.card.property-card--split.card--sample:hover {
border-color: #b45309;
box-shadow: var(--shadow-card-hover);
transform: translateY(-1px);
}
div.card.property-card--split.card--real:hover {
border-color: #15803d;
box-shadow: var(--shadow-card-hover);
transform: translateY(-1px);
}
.property-card-hit {
display: block;
color: inherit;
text-decoration: none;
}
a.card.property-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.property-card-hit:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.property-card-hit:hover .property-title,
.property-card-hit:hover .property-price {
color: inherit;
}
a.subarea-filter-link,
.subarea-filter-link {
color: var(--accent);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
a.subarea-filter-link:hover,
.subarea-filter-link:hover {
color: var(--accent-hover, var(--accent));
}
.detail-meta .subarea-filter-link {
font-weight: 600;
}
.property-card .property-price {
font-size: 18px;
font-weight: 700;
color: var(--accent);
margin: 0 0 8px;
}
.property-card .property-title {
margin: 0 0 8px;
font-size: 17px;
font-weight: 700;
color: var(--text);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

line-height: 1.25;
min-height: 2.5em;
}
.property-card .property-meta {
font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
margin: 0;
}
.property-card .property-badges {
margin-top: 12px;
font-size: 12px;
font-weight: 600;
color: #475569;
}
.property-card-demo-chip {
display: inline;
font-weight: 800;
font-size: 11px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #92400e;
}
.property-card {
position: relative;
padding-top: 36px;
overflow: hidden;
border: 2px solid transparent;
}
.property-card.card--real {
border-color: #22c55e;
}
.property-card.card--sample {
border-color: #f59e0b;
}
.property-card--has-media {
padding-top: 36px;
}
.property-card-media {
position: relative;
margin: -22px -22px 14px -22px;
aspect-ratio: 16 / 10;
background: var(--line);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
overflow: hidden;
}
.property-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.property-card-media--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #eef2f7 0%, #e2e8f0 100%);
}
.property-card-media__placeholder-text {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.property-card--no-media {
padding-top: 36px;
}
.property-card-details-link {
display: inline-block;
align-self: flex-start;

margin-top: auto;
padding-top: 10px;
font-size: 13px;
font-weight: 600;
color: var(--accent);
}
a.card.property-card,
div.card.property-card {
display: flex;
flex-direction: column;
}

.property-card--split .property-card-hit::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.property-card--split .property-facts a {
position: relative;
z-index: 2;
}
.property-facts {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
font-size: 14px;
line-height: 1.4;
color: var(--text-muted);
}
.property-fact {
display: inline-flex;
align-items: flex-start;
gap: 5px;
min-width: 0;
}
.property-fact__icon {
flex: 0 0 auto;
width: 15px;
height: 15px;
margin-top: 2px;
color: #64748b;
}
.property-fact__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.property-detail-media--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #eef2f7 0%, #e2e8f0 100%);
min-height: 220px;
}
.property-detail-img-placeholder {
text-align: center;
padding: 24px;
}
.property-detail-img-placeholder__title {
display: block;
font-weight: 600;
margin-bottom: 6px;
}
.contact-box--protected .contact-reveal-row {
margin: 8px 0;
}
.contact-reveal-btn {
font-size: 13px;
padding: 8px 14px;
}
.contact-reveal-btn[hidden] {
display: none;
}
.property-detail {
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.property-detail-media,
.property-gallery {
margin: 0 0 20px;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.property-detail-media {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--line);
background: var(--line);
aspect-ratio: 16 / 9;
max-height: min(72vh, 560px);
}
.property-gallery .property-gallery-main {
margin-bottom: 12px;
max-width: 100%;
width: 100%;
overflow: hidden;
}
.property-detail-img,
.property-gallery-main-img {
width: 100%;
max-width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.property-detail-media--zoomable {
cursor: zoom-in;
}
.property-detail-media--zoomable:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.property-lightbox {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-sizing: border-box;
}
.property-lightbox[hidden] {
display: none !important;
}
.property-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.88);
}
.property-lightbox-stage {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: min(96vw, 1400px);
max-height: 92vh;
padding: 16px;
box-sizing: border-box;
}
.property-lightbox-img {
max-width: 100%;
max-height: min(85vh, 900px);
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
}
.property-lightbox-close {
position: fixed;
top: 12px;
right: 12px;
z-index: 2001;
width: 44px;
height: 44px;
padding: 0;
margin: 0;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.35);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
}
.property-lightbox-close:hover {
background: rgba(0, 0, 0, 0.55);
}
.property-lightbox-prev,
.property-lightbox-next {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 2001;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
}
.property-lightbox-prev {
left: max(8px, env(safe-area-inset-left, 0px));
}
.property-lightbox-next {
right: max(8px, env(safe-area-inset-right, 0px));
}
.property-lightbox-prev:hover,
.property-lightbox-next:hover {
background: rgba(0, 0, 0, 0.6);
}
@media (min-width: 768px) {
.property-lightbox-prev {
left: 20px;
}
.property-lightbox-next {
right: 20px;
}
}
.property-gallery-thumbs {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
}
.property-gallery-thumb {
flex: 0 0 auto;
}
.property-gallery-thumb-btn {
display: block;
padding: 0;
margin: 0;
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
width: 96px;
aspect-ratio: 16 / 10;
min-height: 44px;
}
.property-gallery-thumb-btn img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.property-gallery-thumb-btn:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-card);
}
.property-gallery-thumb-btn.is-active {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-soft);
}
.property-gallery-thumb-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (max-width: 520px) {
.property-gallery-thumbs {
gap: 8px;
}
.property-gallery-thumb {
flex: 1 1 calc(33.333% - 8px);
min-width: 72px;
max-width: 120px;
}
.property-gallery-thumb-btn {
width: 100%;
}
}
.property-card.card--sample:hover {
border-color: #b45309;
}
.property-card.card--real:hover {
border-color: #15803d;
}
.featured-badge {
position: absolute;
top: 10px;
left: 10px;
right: auto;
padding: 4px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
line-height: 1.25;
color: #0f172a;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.98) 0%, rgba(253, 224, 71, 0.95) 100%);
border: 1px solid rgba(180, 83, 9, 0.5);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
z-index: 2;
}
.card-badge {
position: absolute;
top: 10px;
right: 10px;
padding: 4px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
line-height: 1.25;
color: #334155;
background: #f1f5f9;
border: 1px solid #cbd5e1;
z-index: 1;
}
.card--sample .card-badge {
border-color: #ca8a04;
color: #92400e;
background: rgba(234, 179, 8, 0.18);
}
.card--real .card-badge {
border-color: #16a34a;
color: #166534;
background: rgba(22, 163, 74, 0.12);
}
.card-badge--inline {
position: static;
display: inline-block;
vertical-align: middle;
margin: 0 8px 0 0;
z-index: auto;
}
.property-detail-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.property-detail-original-title {
margin: 6px 0 16px;
font-size: 14px;
line-height: 1.45;
}
.property-detail-original-title__label {
font-weight: 700;
}
.sample-listing-banner {
margin: 0 0 16px;
padding: 12px 14px;
border-radius: var(--radius-lg);
border: 1px solid #ca8a04;
background: rgba(234, 179, 8, 0.14);
color: var(--text);
font-size: 14px;
line-height: 1.45;
}
.sample-listing-banner p {
margin: 0;
}
.settlement-sample-disclaimer {
margin: 0 0 12px;
padding: 10px 12px;
border-radius: var(--radius-lg);
border: 1px solid rgba(202, 138, 4, 0.45);
background: rgba(234, 179, 8, 0.1);
font-size: 14px;
line-height: 1.45;
}
.property-card-illus-badge {
position: absolute;
left: 8px;
bottom: 8px;
z-index: 2;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #78350f;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(202, 138, 4, 0.55);
}
.property-detail-illus-caption {
margin: 8px 0 0;
font-size: 13px;
text-align: center;
}
.property-detail--sample .card-badge--inline {
border-color: #ca8a04;
color: #92400e;
background: rgba(234, 179, 8, 0.18);
}
.property-detail--real .card-badge--inline {
border-color: #16a34a;
color: #166534;
background: rgba(22, 163, 74, 0.12);
}
.settlement-tile { text-align: center; padding: 20px 16px; }
.settlement-tile .settlement-name { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.settlement-tile .settlement-region { font-size: 13px; color: var(--text-muted); margin: 0; }
.settlement-tile--priority .settlement-name { font-weight: 800; }
.priority-badge {
display: inline-block;
margin-top: 8px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--accent);
background: var(--accent-soft);
}
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 8px;
}
.step {
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.step-num {
display: inline-flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
font-size: 13px;
font-weight: 700;
margin-bottom: 10px;
}
.step h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.step p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.b2b-panel {
padding: 28px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface-page) 100%);
box-shadow: var(--shadow-card);
}
.b2b-panel p { margin: 0 0 16px; color: var(--text-muted); line-height: 1.6; max-width: 640px; }
.b2b-panel p:last-child { margin-bottom: 0; }
.employer-info-card {
padding: 22px 24px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
}
.employer-benefits {
margin: 0;
padding-left: 1.2em;
color: var(--text-muted);
line-height: 1.65;
font-size: 16px;
}
.employer-benefits li { margin: 0 0 10px; }
.job-form-card {
padding: 24px 26px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
max-width: 640px;
}
.form-test-banner {
margin: 0 0 20px;
padding: 14px 16px;
border-radius: var(--radius-md);
border: 1px solid #fde68a;
background: #fffbeb;
color: #78350f;
font-size: 14px;
line-height: 1.55;
}
.job-form { margin: 0; }
.form-field { margin-bottom: 18px; }
.form-field label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: 10px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
font-size: 15px;
font-family: inherit;
color: var(--text);
}
.form-field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-required { color: var(--danger); margin-left: 4px; font-weight: 700; }
.form-optional { color: var(--text-faint); font-size: 13px; margin-left: 6px; font-weight: 500; }
.form-actions { margin-top: 22px; }
.form-disclaimer { margin: 18px 0 0; font-size: 14px; line-height: 1.55; }
.thankyou-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.breadcrumb {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 16px;
}
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.property-detail-breadcrumb {
margin: 0 0 16px;
}
.property-detail-breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 0;
list-style: none;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.45;
color: var(--text-muted);
}
.property-detail-breadcrumb-item {
display: inline-flex;
align-items: center;
max-width: 100%;
}
.property-detail-breadcrumb-item:not(:last-child)::after {
content: '›';
margin: 0 8px;
color: var(--text-faint);
font-size: 13px;
font-weight: 500;
flex-shrink: 0;
}
.property-detail-breadcrumb-item a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
.property-detail-breadcrumb-item a:hover {
text-decoration: underline;
}
.property-detail-breadcrumb-item--current {
color: var(--text);
font-weight: 600;
min-width: 0;
word-break: break-word;
}
.property-detail h1 { margin-bottom: 8px; }
.property-detail-title + .property-gallery,
.property-detail-title + figure.property-detail-media {
margin-top: 12px;
}
.property-detail .detail-intro {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.5;
}
.property-detail .detail-price {
font-size: 22px;
font-weight: 700;
color: var(--accent);
margin: 0 0 12px;
}
.property-detail .detail-meta {
font-size: 15px;
color: var(--text-muted);
margin-bottom: 20px;
line-height: 1.5;
}
.property-detail .detail-body {
padding: 24px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
}
.property-detail .detail-body p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text); }
.property-detail-features {
margin-top: 16px;
padding: 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-page);
}
.property-detail-features h2 { margin: 0 0 10px; font-size: 18px; }
.property-detail-features-list {
margin: 0;
padding-left: 18px;
display: grid;
gap: 6px;
}
.property-detail-features-list li { color: var(--text); line-height: 1.45; }
.property-detail-features-list .feature-label { font-weight: 700; }
.property-detail-financing {
margin-top: 12px;
padding: 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid rgba(37, 99, 235, 0.28);
background: var(--accent-soft);
}
.property-detail-financing h2 { margin: 0 0 8px; font-size: 18px; }
.property-detail-financing p { margin: 0 0 10px; line-height: 1.55; color: var(--text); }
.property-detail-project {
margin-top: 16px;
padding: 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid rgba(202, 138, 4, 0.38);
background: rgba(254, 243, 199, 0.45);
}
.property-detail-project h2 { margin: 0 0 8px; font-size: 18px; }
.property-detail-project p { margin: 0 0 10px; line-height: 1.55; color: var(--text); }
.property-detail-project-list {
margin: 0 0 10px;
padding-left: 18px;
display: grid;
gap: 6px;
}
.property-detail-project-list li { line-height: 1.45; color: var(--text); }
.contact-box {
margin-top: 24px;
padding: 20px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-page);
}
.contact-box h2 { margin: 0 0 10px; font-size: 18px; }
.contact-box p { margin: 0 0 6px; font-size: 15px; color: var(--text-muted); }
.listing-banner-slot {
margin-top: 48px;
padding: 20px 18px;
border-radius: var(--radius-lg);
border: 1px dashed var(--line);
background: var(--surface-page);
color: var(--text-muted);
font-size: 14px;
text-align: center;
}
.listing-reco-block h2 {
margin: 0 0 16px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.listing-inline-search-section .listing-inline-search-fields {
display: grid;
gap: 0 20px;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.listing-inline-search-section .listing-inline-search-fields {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.listing-inline-search-actions {
margin-top: 16px;
}
.listing-seo-grid {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px 14px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.listing-seo-grid li {
margin: 0;
}
.listing-seo-grid-link {
display: block;
padding: 12px 14px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--accent);
font-weight: 600;
text-decoration: none;
font-size: 15px;
line-height: 1.35;
}
.listing-seo-grid-link:hover {
text-decoration: underline;
}
.settlement-radius-links h2 {
margin: 0 0 14px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.radius-link-grid {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px 14px;
}
.radius-link-grid a {
display: block;
padding: 10px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--accent);
font-weight: 600;
font-size: 15px;
line-height: 1.35;
text-decoration: none;
}
.radius-link-grid a:hover {
text-decoration: underline;
}
.property-radius-crosslink {
margin-top: 4px;
}
.property-radius-crosslink-links {
font-size: 15px;
line-height: 1.5;
}
.property-radius-crosslink-links a {
display: inline-block;
margin-right: 14px;
margin-bottom: 6px;
}
.property-radius-crosslink-sep {
margin: 0 0.2em;
color: var(--text-faint);
}
.listing-nearby-item {
margin: 0.45em 0;
}
.listing-nearby-name {
display: inline-block;
margin-right: 8px;
font-weight: 600;
color: var(--text);
}
.listing-nearby-links {
font-size: 15px;
}
.listing-nearby-sep {
margin: 0 0.35em;
color: var(--text-faint);
}
.radius-selector-heading {
margin: 0 0 10px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.radius-selector-lead {
margin: 0 0 14px;
}
.radius-selector {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
margin-bottom: 14px;
}
.radius-selector-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--accent);
font-weight: 600;
font-size: 15px;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.radius-selector-button:hover {
border-color: var(--accent-soft);
background: var(--surface-page);
}
.radius-selector-button[aria-pressed='true'] {
border-color: var(--accent);
background: rgba(59, 130, 246, 0.1);
color: var(--text);
}
.radius-selector-fallback {
margin: 0 0 18px;
font-size: 14px;
line-height: 1.5;
}
.radius-selector-fallback a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.radius-selector-fallback a:hover {
text-decoration: underline;
}
.radius-selector-panels {
margin-top: 4px;
}
.radius-selector-empty {
margin: 0;
font-size: 15px;
}
.radius-landing-breadcrumb {
margin-bottom: 8px;
}
.radius-landing-hero {
margin-top: 0;
}
.radius-landing-hero h1 {
margin: 0 0 12px;
font-size: clamp(1.45rem, 2.8vw, 2rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
}
.radius-landing-lead {
margin: 0 0 18px;
max-width: 46rem;
line-height: 1.55;
color: var(--text-muted);
}
.radius-landing-inline-links {
display: flex;
flex-wrap: wrap;
gap: 6px 4px;
align-items: baseline;
font-size: 15px;
}
.radius-landing-inline-sep {
color: var(--text-faint);
}
.radius-landing-grid-heading {
margin: 0 0 16px;
font-size: 20px;
font-weight: 700;
}
.radius-landing-grid {
margin-top: 0;
}
.radius-landing-empty {
margin-top: 8px;
}
.radius-landing-nearby .nearby-settlements-grid {
margin-top: 8px;
}
.radius-landing-type-list {
margin: 0;
padding: 0 0 0 1.25em;
list-style: disc;
max-width: 42rem;
}
.radius-landing-type-list li {
margin: 0.4em 0;
}
.radius-landing-type-link {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.radius-landing-type-link:hover {
text-decoration: underline;
}
.radius-landing-type-link--current {
color: var(--text);
font-weight: 700;
}
.radius-landing-seo-text {
margin: 0;
max-width: 46rem;
line-height: 1.65;
color: var(--text-muted);
font-size: 15px;
}
.radius-landing-banner-slot {
margin-top: 32px;
padding: 18px 16px;
border-radius: var(--radius-lg);
border: 1px dashed var(--line);
background: var(--surface-page);
color: var(--text-muted);
font-size: 14px;
text-align: center;
}
.placeholder-page h1 { margin-top: 0; }
.placeholder-page p { color: var(--text-muted); line-height: 1.65; max-width: 640px; }
.blog-page {
max-width: 70rem;
margin: 0 auto;
}
.guide-page {
max-width: 70rem;
margin: 0 auto;
}
.settlement-guides {
margin-top: 24px;
}
.settlement-guides > h2 {
margin: 0 0 12px;
}
.guide-disclosure-list {
display: grid;
gap: 10px;
max-width: 62rem;
}
.guide-disclosure {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-elevated);
}
.guide-disclosure summary {
display: block;
min-height: 44px;
padding: 14px 16px;
cursor: pointer;
list-style: none;
overflow-wrap: anywhere;
}
.guide-disclosure summary::-webkit-details-marker {
display: none;
}
.guide-disclosure summary::before {
content: '+';
display: inline-block;
width: 1.2em;
margin-right: 6px;
color: var(--accent);
font-weight: 700;
}
.guide-disclosure[open] summary::before {
content: '−';
}
.guide-disclosure summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.guide-disclosure__title,
.guide-disclosure__excerpt {
display: block;
}
.guide-disclosure__title {
font-weight: 700;
}
.guide-disclosure__excerpt {
margin-top: 4px;
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
}
.guide-disclosure__body {
padding: 0 16px 14px;
border-top: 1px solid var(--line);
overflow-wrap: anywhere;
}
.guide-disclosure__body p {
margin: 12px 0 0;
line-height: 1.6;
}
.guide-disclosure__link {
display: inline-block;
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.guide-article {
max-width: 62rem;
margin: 0 auto;
padding: 26px 28px 34px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
overflow-wrap: anywhere;
}
.guide-article h1 {
margin: 0 0 10px;
font-size: clamp(1.55rem, 2.8vw, 2.1rem);
line-height: 1.24;
}
.guide-body h2,
.guide-related h2,
.guide-sources h2,
.guide-cta h2 {
margin: 28px 0 10px;
font-size: clamp(1.2rem, 2.1vw, 1.45rem);
}
.guide-body h3 {
margin: 20px 0 8px;
font-size: 1.05rem;
}
.guide-body p,
.guide-body li,
.guide-related li,
.guide-sources li {
line-height: 1.65;
}
.guide-body p {
margin: 0 0 12px;
}
.guide-body ul,
.guide-body ol,
.guide-related ul,
.guide-sources ul {
padding-left: 22px;
margin: 0 0 16px;
}
.guide-body a,
.guide-related a,
.guide-sources a,
.guide-end-link a,
.guide-breadcrumb a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.guide-breadcrumb {
margin-bottom: 18px;
font-size: 14px;
}
.guide-breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: 5px 10px;
padding: 0;
margin: 0;
list-style: none;
}
.guide-breadcrumb li:not(:last-child)::after {
content: '›';
margin-left: 10px;
color: var(--text-muted);
}
.guide-article__category,
.guide-card__category {
margin: 0 0 7px;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--accent);
}
.guide-lead {
margin: 0 0 12px;
font-size: 1.06rem;
line-height: 1.65;
}
.guide-meta {
margin: 0 0 22px;
font-size: 14px;
}
.guide-body hr {
border: 0;
border-top: 1px solid var(--line);
margin: 24px 0;
}
.guide-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 20px;
}
.guide-card {
min-width: 0;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-page);
}
.guide-card h2 {
margin: 0 0 8px;
font-size: 1.2rem;
line-height: 1.3;
}
.guide-card h2 a {
color: var(--text);
text-decoration: none;
}
.guide-card h2 a:hover {
color: var(--accent);
text-decoration: underline;
}
.guide-card p {
margin: 0 0 10px;
line-height: 1.6;
}
.guide-cta {
margin-top: 26px;
padding: 18px 18px 16px;
border-radius: var(--radius-lg);
border: 1px solid rgba(37, 99, 235, 0.32);
background: var(--accent-soft);
}
.guide-cta h2 {
margin-top: 0;
}
.guide-related,
.guide-sources {
margin-top: 20px;
}
.guide-end-link {
margin-top: 24px;
}
@media (max-width: 640px) {
.guide-article {
padding: 18px 14px 24px;
}
.guide-card-grid {
grid-template-columns: 1fr;
}
}
.blog-article {
max-width: 62rem;
margin: 0 auto;
padding: 26px 28px 34px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
}
.blog-article h1 {
margin: 0 0 10px;
font-size: clamp(1.55rem, 2.8vw, 2.1rem);
line-height: 1.24;
}
.blog-article h2 {
margin: 28px 0 10px;
font-size: clamp(1.2rem, 2.1vw, 1.45rem);
}
.blog-article h3 {
margin: 20px 0 8px;
font-size: 1.05rem;
}
.blog-article p {
margin: 0 0 12px;
color: var(--text);
line-height: 1.65;
}
.blog-lead {
margin: 0 0 12px;
font-size: 1.06rem;
color: var(--text);
}
.blog-meta {
margin: 0 0 12px;
font-size: 14px;
}
.blog-toc {
margin: 16px 0 20px;
padding: 14px 16px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
}
.blog-toc h2 {
margin: 0 0 10px;
font-size: 1.05rem;
}
.blog-toc ol {
margin: 0;
padding-left: 20px;
display: grid;
gap: 5px;
}
.blog-note {
margin: 14px 0;
padding: 12px 14px;
border-radius: var(--radius-md);
border: 1px solid rgba(217, 119, 6, 0.35);
background: #fffbeb;
}
.blog-list-card {
margin-top: 16px;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-page);
}
.blog-cta {
margin-top: 26px;
padding: 18px 18px 16px;
border-radius: var(--radius-lg);
border: 1px solid rgba(37, 99, 235, 0.32);
background: var(--accent-soft);
}
.blog-cta h2 {
margin: 0 0 8px;
}
.blog-end-links {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
}
.blog-end-links a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
.blog-end-links a:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
.blog-article {
padding: 18px 14px 24px;
}
}
.valuation-page {
max-width: 74rem;
margin: 0 auto;
}
.valuation-hero {
max-width: 64rem;
margin: 0 auto 16px;
}
.valuation-hero h1 {
margin: 0 0 8px;
font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.valuation-lead {
margin: 0 0 10px;
line-height: 1.6;
}
.valuation-disclaimer {
margin-top: 12px;
padding: 12px 14px;
border: 1px solid rgba(185, 28, 28, 0.25);
border-radius: var(--radius-md);
background: #fef2f2;
}
.valuation-disclaimer p { margin: 6px 0 0; line-height: 1.55; }
.valuation-form-card,
.valuation-result-card {
max-width: 64rem;
margin: 0 auto;
padding: 18px 20px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-card);
}
.valuation-result-card { margin-top: 14px; }
.valuation-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 14px;
}
.valuation-grid label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
color: var(--text-muted);
}
.valuation-grid label span { font-weight: 600; color: var(--text); }
.valuation-grid input,
.valuation-grid select,
.valuation-grid textarea {
font: inherit;
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 10px 12px;
background: #fff;
}
.valuation-grid input:focus,
.valuation-grid select:focus,
.valuation-grid textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.valuation-full { grid-column: 1 / -1; }
.valuation-error {
margin: 8px 0 10px;
color: var(--danger);
font-weight: 600;
}
.valuation-price-range {
margin: 0 0 8px;
font-size: 1.3rem;
}
.valuation-cta {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.valuation-cta h3 {
margin: 0 0 8px;
font-size: 1.1rem;
}
.valuation-seo,
.faq-section {
max-width: 100%;
min-width: 0;
}
.faq-section > h2 {
margin-bottom: 12px;
}
.faq-item {
margin: 0 0 10px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-elevated);
overflow-wrap: anywhere;
}
.faq-item__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 44px;
padding: 12px 16px;
font-weight: 650;
line-height: 1.4;
color: var(--text);
cursor: pointer;
list-style: none;
border-radius: var(--radius-md);
}
.faq-item__question::-webkit-details-marker {
display: none;
}
.faq-item__question::after {
content: "+" / "";
flex: 0 0 auto;
font-size: 20px;
font-weight: 500;
line-height: 1;
color: var(--accent);
}
.faq-item[open] > .faq-item__question::after {
content: "−" / "";
}
.faq-item__question:hover {
background: var(--accent-soft, #eff6ff);
}
.faq-item__question:focus-visible {
outline: 3px solid var(--accent, #2563eb);
outline-offset: 2px;
}
.faq-item__answer {
padding: 0 16px 14px;
color: var(--text);
line-height: 1.6;
}
.faq-item__answer p {
margin: 0;
}
.valuation-faq {
max-width: 64rem;
margin-left: auto;
margin-right: auto;
}
.valuation-seo h2,
.valuation-faq h2 {
margin-top: 30px;
}
.valuation-faq h3 {
margin-top: 18px;
}
@media (max-width: 760px) {
.valuation-form-card,
.valuation-result-card {
padding: 14px 12px;
}
.valuation-grid {
grid-template-columns: 1fr;
gap: 10px;
}
}
.draft-note {
display: inline-block;
margin-bottom: 14px;
padding: 6px 10px;
border-radius: 999px;
background: #fffbeb;
color: #854d0e;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
.legal-page h2 { font-size: 18px; margin: 28px 0 10px; }
.legal-page p { color: var(--text-muted); line-height: 1.65; margin: 0 0 14px; }
.legal-doc-wrap.section {
margin-top: 0;
}
.legal-doc-page {
max-width: 980px;
margin: 0 auto;
padding: 0 0 48px;
box-sizing: border-box;
}
.legal-doc {
max-width: 800px;
margin: 0 auto;
padding: 0 0 8px;
overflow-wrap: break-word;
}
.legal-doc.legal-doc--portal {
max-width: none;
margin: 0;
padding: 28px 32px 36px;
border-radius: var(--radius-lg, 12px);
border: 1px solid var(--line);
background: var(--surface-elevated, #fff);
box-shadow: var(--shadow-card, 0 1px 3px rgba(15, 23, 42, 0.06));
}
@media (max-width: 640px) {
.legal-doc.legal-doc--portal {
padding: 20px 16px 28px;
}
.legal-doc-page {
padding-left: 12px;
padding-right: 12px;
}
}
.legal-doc-mature-note {
margin: 0 0 20px;
padding: 12px 14px;
border-radius: var(--radius-md, 8px);
border: 1px solid var(--line);
background: rgba(248, 250, 252, 0.9);
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
}
.legal-doc-updated {
margin: 0 0 16px;
font-size: 14px;
color: var(--text-muted);
}
.legal-doc-toc {
margin: 0 0 28px;
padding: 16px 18px;
border-radius: var(--radius-md, 8px);
border: 1px solid var(--line);
background: rgba(248, 250, 252, 0.65);
}
.legal-doc-toc__title {
margin: 0 0 10px;
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
}
.legal-doc-toc__list {
margin: 0;
padding-left: 1.2rem;
color: var(--text-muted);
font-size: 14px;
line-height: 1.65;
}
.legal-doc-toc__list li {
margin-bottom: 6px;
}
.legal-doc-toc a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.legal-doc-toc a:hover {
text-decoration: underline;
}
.legal-doc-section h2 {
margin: 0 0 12px;
font-size: clamp(1.1rem, 2vw, 1.25rem);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1.3;
}
.legal-doc-kitolto-intro,
.legal-doc-section-note {
font-size: 14px;
line-height: 1.65;
color: var(--text-muted);
margin: 0 0 12px;
}
.legal-doc-table-wrap {
margin: 12px 0 16px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-md, 8px);
border: 1px solid var(--line);
}
.legal-doc-table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
}
.legal-doc-table th,
.legal-doc-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.legal-doc-table thead th {
background: rgba(248, 250, 252, 0.95);
font-weight: 600;
color: var(--text);
font-size: 13px;
}
.legal-doc-table tbody th[scope="row"] {
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.legal-doc-table tbody tr:last-child th,
.legal-doc-table tbody tr:last-child td {
border-bottom: none;
}
.legal-doc-footer-cta {
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.legal-doc-footer-cta h2 {
margin-bottom: 10px;
}
.legal-doc-footer-cta p {
margin: 0;
color: var(--text-muted);
line-height: 1.65;
font-size: 15px;
}
.legal-doc-title {
margin: 0 0 12px;
font-size: clamp(1.35rem, 2.5vw, 1.6rem);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1.25;
}
.legal-doc-lead {
margin: 0 0 24px;
font-size: 16px;
line-height: 1.65;
color: var(--text-muted);
}
.legal-doc-draft {
margin: 0 0 20px;
padding: 12px 14px;
border-radius: var(--radius-md);
border: 1px solid rgba(180, 83, 9, 0.2);
background: rgba(255, 251, 235, 0.65);
font-size: 14px;
line-height: 1.55;
}
.legal-doc-section {
margin-bottom: 28px;
}
.legal-doc-section h3 {
margin: 0 0 10px;
font-size: 1.05rem;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
}
.legal-doc-subh {
margin: 18px 0 8px;
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
}
.legal-doc-section p {
margin: 0 0 12px;
color: var(--text-muted);
line-height: 1.65;
font-size: 15px;
}
.legal-doc-section a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.legal-doc-section a:hover {
text-decoration: underline;
}
.legal-doc-list {
margin: 0 0 14px;
padding-left: 1.25rem;
color: var(--text-muted);
line-height: 1.65;
font-size: 15px;
}
.legal-doc-list li {
margin-bottom: 6px;
}
.legal-doc-placeholder {
display: inline;
padding: 1px 6px;
border-radius: 4px;
background: rgba(254, 243, 199, 0.45);
border: 1px dashed rgba(180, 83, 9, 0.35);
font-size: 0.92em;
font-weight: 600;
color: var(--text);
}
.legal-doc--contact .legal-doc-title {
margin-top: 4px;
}
.site-footer {
margin-top: 56px;
padding: 28px 0 12px;
border-top: 1px solid var(--line);
text-align: center;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 20px;
margin-bottom: 16px;
}
.footer-contact-line {
margin: -4px 0 14px;
font-size: 14px;
line-height: 1.45;
}
.footer-link {
color: var(--text-muted);
font-size: 14px;
text-decoration: none;
}
.footer-link:hover { color: var(--text); text-decoration: underline; }
.footer-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.footer-link-btn {
color: #334155;
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
text-decoration: none;
}
.footer-link-btn:hover {
color: var(--text);
text-decoration: underline;
}
.footer-link-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
color: var(--text);
}
.footer-seo-note {
margin: 0 auto 14px;
max-width: 52rem;
font-size: 13px;
line-height: 1.55;
color: var(--text-muted);
}
.social-follow-card {
margin: 20px auto 16px;
max-width: 52rem;
padding: 14px 16px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.social-follow-card__title {
margin: 0 0 6px;
font-size: 1rem;
color: var(--text);
}
.social-follow-card__text {
margin: 0;
color: var(--text-muted);
line-height: 1.55;
font-size: 14px;
}
.social-follow-card__actions {
margin: 12px 0 0;
}
.social-follow-card__btn {
display: inline-flex;
align-items: center;
}
.social-action-btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
.social-action-btn__icon {
display: inline-block;
width: 17px;
height: 17px;
flex-shrink: 0;
}
.social-follow-card--footer {
margin-top: 14px;
}
.detail-share-card {
margin-top: 18px;
padding: 14px 16px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
}
.detail-share-card h2 {
margin: 0 0 6px;
font-size: 1rem;
}
.detail-share-card__lead {
margin: 0;
font-size: 14px;
line-height: 1.55;
}
.detail-share-card__actions {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
[data-listing-share-block] .detail-share-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
[data-listing-share-block] .detail-share-btn[hidden] {
display: none;
}
[data-listing-share-block] .detail-share-btn--native {
flex: 1 0 100%;
}
[data-listing-share-block] .detail-share-btn--facebook {
background: var(--accent);
border-color: var(--accent);
color: #fff !important;
box-shadow: var(--shadow-sm);
}
[data-listing-share-block] .detail-share-btn--facebook:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
[data-listing-share-block] .detail-share-btn--facebook:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
@media (max-width: 640px) {
[data-listing-share-block] .detail-share-btn--native,
[data-listing-share-block] .detail-share-btn--facebook,
[data-listing-share-block] .detail-share-btn--copy {
width: 100%;
flex: 1 0 100%;
}
}
.detail-share-feedback {
margin: 8px 0 0;
min-height: 1.2em;
font-size: 13px;
}
.detail-share-card--manage {
margin: 8px 0 10px;
}
.footer-copy { margin: 0; font-size: 13px; color: var(--text-faint); }
.footer-credit {
margin: 6px 0 0;
font-size: 12px;
color: var(--text-faint);
line-height: 1.4;
}
.footer-credit-link {
color: var(--text-faint);
text-decoration: none;
}
.footer-credit-link:hover {
color: var(--text-muted);
text-decoration: underline;
}
.settlement-local-seo {
margin-top: 8px;
padding: 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.settlement-local-seo-heading {
margin: 0 0 10px;
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
}
.settlement-local-seo-text {
margin: 0;
font-size: 14px;
line-height: 1.6;
}
.muted { color: var(--text-muted); }
.link-row { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 16px 0 24px; }
.link-row a { font-weight: 600; color: var(--accent); text-decoration: none; }
.link-row a:hover { text-decoration: underline; }
.settlement-quick-filters {
margin: 0 0 28px;
padding: 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.settlement-profile + .settlement-quick-filters { margin-top: 28px; }
.settlement-quick-filters-heading {
margin: 0 0 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.settlement-quick-filters-chips {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
.settlement-quick-filter-chip {
display: inline-block;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface-page);
color: var(--text) !important;
text-decoration: none;
font-weight: 600;
font-size: 14px;
line-height: 1.35;
transition: background 0.15s ease, border-color 0.15s ease;
}
.settlement-quick-filter-chip:hover {
background: var(--surface-hover);
border-color: var(--line-strong);
}
.settlement-quick-filter-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.settlement-quick-filters-more {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.settlement-quick-filters-more-label {
margin: 0 0 8px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.settlement-quick-filters-chips--compact {
gap: 6px 8px;
}
.settlement-quick-filter-chip--compact {
padding: 6px 11px;
font-size: 13px;
font-weight: 600;
}
.settlement-mvp-filters {
margin: 0 0 20px;
padding: 14px 16px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.settlement-mvp-filters__title {
margin: 0 0 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.settlement-mvp-filters__form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px 16px;
}
.settlement-mvp-filters__field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 120px;
}
.settlement-mvp-filters__field--wide {
flex: 1 1 220px;
min-width: min(100%, 220px);
}
.settlement-mvp-filters__label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.settlement-mvp-filters__input {
font-size: 14px;
padding: 8px 10px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
color: var(--text);
max-width: 100%;
}
.settlement-mvp-filters__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
}
.settlement-mvp-filters__apply {
margin: 0;
}
.settlement-mvp-filters__reset {
font-size: 14px;
font-weight: 600;
color: var(--accent);
text-decoration: none;
}
.settlement-mvp-filters__reset:hover {
text-decoration: underline;
}
.settlement-mvp-filters__hint {
margin: 12px 0 0;
font-size: 12px;
line-height: 1.45;
}
.settlement-mvp-filters__result {
margin: 0 0 12px;
font-size: 14px;
}
.settlement-subarea-nav {
margin: 0 0 18px;
padding: 12px 0 0;
border-top: 1px solid var(--line);
}
.settlement-subarea-nav__title {
margin: 0 0 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.settlement-subarea-nav__chips {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
.settlement-subarea-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface-page);
color: var(--text) !important;
text-decoration: none !important;
font-weight: 600;
font-size: 13px;
line-height: 1.35;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.settlement-subarea-chip:hover {
background: var(--surface-hover);
border-color: var(--line-strong);
}
.settlement-subarea-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.settlement-subarea-chip--active {
border-color: var(--accent);
background: var(--surface-hover);
}
.settlement-subarea-chip__count {
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
min-width: 1.25em;
text-align: right;
}
.settlement-subarea-chip--active .settlement-subarea-chip__count {
color: var(--text);
}
.home-listing-keyword {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--line);
width: 100%;
}
.home-listing-keyword__eyebrow {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.home-listing-keyword__row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
}
.home-listing-keyword__input {
flex: 1 1 200px;
min-width: min(100%, 200px);
}
.home-listing-keyword__submit {
flex-shrink: 0;
align-self: center;
}
.listing-search-form {
margin-bottom: 16px;
max-width: 640px;
}
.listing-search-form__label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.listing-search-form__row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.listing-search-form__input {
flex: 1 1 220px;
min-width: min(100%, 220px);
font-size: 15px;
padding: 10px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
}
.listing-search-form__btn {
margin: 0;
}
.listing-search-count {
margin: 0 0 16px;
font-size: 15px;
}
.featured-rail h2,
.featured-section h2 {
margin: 0 0 12px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.featured-section {
margin-bottom: 8px;
}
.admin-approve-form {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.admin-feature-duration {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
padding: 10px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
font-size: 14px;
}
.admin-feature-duration-label {
font-weight: 600;
color: var(--text-muted);
margin-right: 4px;
}
.admin-duration-option {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-weight: 500;
color: var(--text);
}
.admin-duration-option input {
margin: 0;
}
.admin-feature-actions-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
margin-bottom: 4px;
}
.admin-feature-actions-row .admin-feature-btn {
font-size: 14px;
padding: 8px 14px;
}
.admin-feature-checkbox {
font-size: 14px;
font-weight: 500;
color: var(--text);
}
.admin-approved-actions {
flex-wrap: wrap;
align-items: flex-end;
}
.admin-approved-actions .admin-reviewed-meta {
flex-basis: 100%;
margin: 0;
}
.security-honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.submission-form-wrap { margin-top: 8px; }
.submission-form-grid {
display: grid;
gap: 0 18px;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.submission-form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.submission-form-field--wide {
grid-column: 1 / -1;
}
}
.submission-form-errors {
margin-bottom: 18px;
padding: 14px 16px;
border-radius: var(--radius-lg);
border: 1px solid rgba(185, 28, 28, 0.35);
background: rgba(254, 242, 242, 0.9);
color: var(--danger);
}
.basic-description-toolbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 6px;
}
.basic-description-tool {
min-height: 38px;
padding: 7px 10px;
}
.basic-description-tool strong {
font-weight: 750;
}
.basic-description-help {
margin: 0 0 6px;
font-size: 13px;
font-weight: 400;
line-height: 1.45;
}
.admin-submission-description {
margin: 8px 0;
font-size: 14px;
}
.admin-submission-description summary {
cursor: pointer;
font-weight: 600;
}
.admin-submission-description__rendered {
margin: 8px 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-page);
overflow-wrap: anywhere;
}
.admin-submission-description__rendered p,
.admin-submission-description__rendered ul {
margin: 0 0 0.75rem;
}
.admin-submission-description__rendered ul {
padding-left: 1.35rem;
}
.admin-submission-description__source {
margin: 6px 0 0;
max-height: 320px;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 13px;
}
.property-detail .property-detail-description p,
.property-detail .property-detail-description ul {
margin: 0 0 1rem;
}
.property-detail .property-detail-description ul {
padding-left: 1.35rem;
font-size: 16px;
line-height: 1.65;
color: var(--text);
}
.property-detail .property-detail-description li + li {
margin-top: 2px;
}
.property-detail .property-detail-description > :last-child {
margin-bottom: 0;
}
.property-detail .property-detail-description {
overflow-wrap: anywhere;
}
.property-detail-description strong {
font-weight: 750;
}
.listing-video__frame {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #0f172a;
}
.listing-video__facade {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: #fff;
text-decoration: none;
background: radial-gradient(circle at 50% 40%, #334155 0%, #0f172a 75%);
}
.listing-video__thumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.listing-video__thumb[hidden],
.property-card-img--video[hidden],
.property-gallery-video-tile img[hidden] {
display: none;
}
.listing-video__facade::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0) 35%, rgba(15, 23, 42, 0.45) 100%);
pointer-events: none;
}
.listing-video__badge,
.listing-video__play,
.listing-video__label {
position: relative;
z-index: 1;
}
.listing-video__badge {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.82);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
}
.listing-video__play svg {
display: block;
width: 68px;
height: 48px;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.listing-video__play-bg {
fill: #212121;
fill-opacity: 0.88;
transition: fill .15s ease;
}
.listing-video__facade:hover .listing-video__play-bg,
.listing-video__facade:focus-visible .listing-video__play-bg {
fill: #ff0000;
fill-opacity: 1;
}
.listing-video__facade:focus-visible {
outline: 3px solid var(--accent, #2563eb);
outline-offset: -3px;
}
.listing-video__label {
padding: 2px 10px;
border-radius: 6px;
background: rgba(15, 23, 42, 0.6);
font-size: 0.95rem;
font-weight: 700;
}
.listing-video__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.property-detail-media--video {
background: #0f172a;
}
.property-gallery .property-gallery-video {
margin-bottom: 12px;
}
.property-gallery-main[hidden],
.property-gallery-video[hidden] {
display: none !important;
}
.property-gallery-video-tile {
position: relative;
background: #0f172a;
}
.property-gallery-video-tile__badge {
position: absolute;
left: 4px;
bottom: 4px;
padding: 1px 6px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.85);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1.5;
}
.property-gallery-video-tile__icon {
font-size: 9px;
}
.property-gallery-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 0 10px;
}
.property-gallery-nav__btn {
min-width: 44px;
min-height: 44px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-elevated);
color: var(--text);
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.property-gallery-nav__btn:hover {
border-color: var(--line-strong);
}
.property-gallery-nav__btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.property-gallery-nav__count {
min-width: 4em;
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
}
.property-gallery-status {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.property-gallery--with-video {
position: relative;
}
.property-gallery--with-video .property-gallery-main,
.property-gallery--with-video .property-gallery-video {
touch-action: pan-y;
}
.property-gallery-video-cta {
margin-top: 12px;
font-size: 14px;
}
.listing-video__native {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: #000;
object-fit: contain;
}
.admin-native-video {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.admin-native-video__player {
display: block;
width: 100%;
max-width: 320px;
height: auto;
aspect-ratio: 16 / 9;
background: #0f172a;
border-radius: 6px;
margin: 0 0 6px;
}
.admin-native-video__meta {
margin: 0 0 8px;
font-size: 12px;
overflow-wrap: anywhere;
}
.listing-native-video-panel {
margin-top: 16px;
}
.listing-native-video-panel__status {
margin: 0 0 10px;
line-height: 1.5;
}
.listing-native-video-panel__preview {
display: block;
width: 100%;
max-width: 480px;
height: auto;
aspect-ratio: 16 / 9;
background: #0f172a;
border-radius: var(--radius-md);
margin: 0 0 12px;
}
.listing-native-video-panel__form {
display: grid;
gap: 8px;
max-width: 560px;
}
.listing-native-video-panel__form input[type="file"] {
max-width: 100%;
min-width: 0;
}
.listing-native-video-panel__hint {
margin: 0;
font-size: 13px;
line-height: 1.45;
}
.listing-native-video-panel__remove {
margin-top: 10px;
}
.listing-native-video-panel__form [data-native-video-submit],
.listing-native-video-panel__remove button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
box-sizing: border-box;
font-family: inherit;
cursor: pointer;
}
.property-card-media--video {
background: radial-gradient(circle at 50% 40%, #334155 0%, #0f172a 75%);
}
.property-card-video-badge {
position: absolute;
left: 10px;
bottom: 10px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.85);
color: #fff;
font-size: 12px;
font-weight: 700;
}
.property-card-video-badge__icon {
font-size: 10px;
}
.listing-video-field input,
#sub_video {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.listing-video-field__hint {
margin: 6px 0 0;
font-size: 13px;
line-height: 1.45;
}
.form-alert-title { margin: 0 0 8px; font-weight: 700; font-size: 15px; }
.form-alert-list { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.5; }
.submission-form-checkbox.form-field--checkbox .checkbox-label {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 1.5;
font-weight: 500;
color: var(--text);
cursor: pointer;
}
.submission-form-checkbox.form-field--checkbox .checkbox-input {
width: auto;
min-width: 1.125rem;
height: 1.125rem;
margin: 0.2em 0 0 0;
flex-shrink: 0;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: 4px;
background: var(--surface-elevated);
box-shadow: none;
align-self: flex-start;
accent-color: var(--accent);
}
.submission-form-checkbox.form-field--checkbox .checkbox-input:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
box-shadow: none;
}
.submission-form-checkbox.form-field--checkbox .checkbox-label-text {
display: block;
flex: 1;
min-width: 0;
font-weight: 500;
}
.form-field--checkbox .checkbox-label {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
width: 100%;
min-width: 0;
margin-bottom: 0;
font-size: 14px;
line-height: 1.45;
font-weight: 500;
color: var(--text);
cursor: pointer;
}
.form-field--checkbox input,
.form-field--checkbox .checkbox-input {
width: auto;
min-width: 1.125rem;
height: 1.125rem;
margin: 3px 0 0 0;
padding: 0;
flex-shrink: 0;
align-self: flex-start;
box-shadow: none;
}
.form-field--checkbox .checkbox-label-text {
display: block;
flex: 1;
min-width: 0;
font-weight: 500;
}
.bulk-import-panel .checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
min-width: 0;
line-height: 1.45;
}
.bulk-import-panel .checkbox-input {
flex: 0 0 auto;
width: 1.125rem;
height: 1.125rem;
margin: 0.2em 0 0;
}
.bulk-import-panel .checkbox-label-text {
flex: 1 1 auto;
min-width: 0;
}
.bulk-import-image-plan,
#bulk-import-upload-status {
overflow-wrap: anywhere;
}
.submission-form-actions { margin-top: 8px; }
.submission-business-note {
margin: 18px 0 0;
font-size: 13px;
line-height: 1.5;
}
.submission-upload-input {
display: block;
width: 100%;
max-width: 100%;
padding: 8px 10px;
font-size: 14px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--text);
}
.submission-upload-help {
margin: 8px 0 0;
font-size: 13px;
line-height: 1.45;
}

.submission-media-section {
grid-column: 1 / -1;
margin: 6px 0 18px;
padding-top: 20px;
border-top: 1px solid var(--line);
min-width: 0;
}
.submission-media-section__head h2 {
margin: 0 0 4px;
font-size: 1.2rem;
line-height: 1.3;
}
.submission-media-section__head p {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.5;
}
.submission-media-section__grid {
display: grid;
gap: 16px;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
.submission-media-section__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.media-card--youtube {
grid-column: 1 / -1;
}
}
.media-card {
min-width: 0;
box-sizing: border-box;
padding: 16px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.media-card--video {
border-color: rgba(37, 99, 235, 0.3);
background: linear-gradient(180deg, var(--accent-soft) 0, var(--surface-elevated) 120px);
}
.media-card__head {
margin-bottom: 12px;
}
.media-card__title {
margin: 0 0 4px;
font-size: 1.02rem;
line-height: 1.35;
}
.media-card__lead {
margin: 0;
font-size: 13px;
line-height: 1.5;
}
.media-card__body.form-field {
margin-bottom: 0;
}
.media-card__label-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.media-dropzone {
margin: 0 0 12px;
padding: 20px 14px;
border: 2px dashed var(--line-strong);
border-radius: var(--radius-md);
background: #f8fafc;
cursor: pointer;
text-align: center;
font-size: 0.95rem;
line-height: 1.45;
color: var(--text-muted);
transition: border-color 0.15s ease, background 0.15s ease;
}
.media-dropzone:hover,
.media-dropzone:focus-visible {
border-color: var(--accent);
background: var(--accent-soft);
}
.media-dropzone:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.submission-image-mobile-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0 0 12px;
}
.submission-image-mobile-actions[hidden] {
display: none;
}
@media (max-width: 380px) {
.submission-image-mobile-actions {
grid-template-columns: minmax(0, 1fr);
}
}
.form-field input.media-input-hidden,
.media-input-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
min-height: 0 !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0 !important;
opacity: 0;
pointer-events: none;
}
.media-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 10px 14px;
font-family: inherit;
line-height: 1.2;
cursor: pointer;
box-sizing: border-box;
}
.media-btn__icon {
flex: 0 0 auto;
}
.form-status {
margin: 6px 0 0;
font-size: 13px;
line-height: 1.5;
}
.form-status[hidden] {
display: none;
}
.form-status--error {
color: var(--danger);
}
.form-status--info {
color: var(--text-muted);
}
.form-status--success {
color: #166534;
}
.media-previews {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 12px;
margin-top: 10px;
}
.media-preview-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-elevated);
}
.media-preview-card--dragover {
outline: 2px solid var(--accent);
}
.media-preview-card__thumb {
width: 100%;
height: 110px;
object-fit: cover;
border-radius: 8px;
}
.media-preview-card__meta {
font-size: 12px;
line-height: 1.35;
word-break: break-word;
}
.media-preview-card__badge {
align-self: flex-start;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
background: #f1f5f9;
color: #475569;
}
.media-preview-card__badge--cover {
background: #dcfce7;
color: #166534;
}
.media-preview-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.media-preview-action {
min-height: 44px;
min-width: 44px;
padding: 8px 12px;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: var(--surface-page);
color: var(--text);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.media-preview-action:disabled {
cursor: default;
opacity: 0.55;
}
.media-preview-action:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.media-preview-action--danger {
border-color: #fecaca;
background: #fef2f2;
color: #991b1b;
}

.submission-native-video {
max-width: 100%;
min-width: 0;
}
.nv [hidden] {
display: none !important;
}
.nv__top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
margin-bottom: 10px;
}
.nv-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 11px;
border-radius: 999px;
border: 1px solid var(--line);
background: #f1f5f9;
color: #475569;
font-size: 12.5px;
font-weight: 700;
line-height: 1.3;
}
.nv-pill::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.7;
}
.nv[data-nv-state='requesting'] .nv-pill,
.nv[data-nv-state='uploading'] .nv-pill {
background: var(--accent-soft);
border-color: #bfdbfe;
color: var(--accent-hover);
}
.nv[data-nv-state='ready'] .nv-pill {
background: var(--accent-soft);
border-color: #93c5fd;
color: #1d4ed8;
}
.nv[data-nv-state='recording'] .nv-pill {
background: #fee2e2;
border-color: #fecaca;
color: #b91c1c;
}
.nv[data-nv-state='paused'] .nv-pill,
.nv[data-nv-state='review'] .nv-pill,
.nv[data-nv-state='denied'] .nv-pill {
background: #fffbeb;
border-color: #fde68a;
color: #92400e;
}
.nv[data-nv-state='recorded'] .nv-pill {
background: #dcfce7;
border-color: #bbf7d0;
color: #166534;
}
.nv[data-nv-state='error'] .nv-pill {
background: #fef2f2;
border-color: #fecaca;
color: #991b1b;
}
.nv-limits {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
color: var(--text-muted);
}
.nv-limits li {
padding: 2px 9px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface-elevated);
}
.nv-stage {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
box-sizing: border-box;
border-radius: var(--radius-md);
background: #0f172a;
border: 1px solid #1e293b;
}
.nv[data-nv-state='idle'] .nv-stage,
.nv[data-nv-state='requesting'] .nv-stage,
.nv[data-nv-state='denied'] .nv-stage,
.nv[data-nv-state='error'] .nv-stage {
background: #f8fafc;
border: 2px dashed var(--line-strong);
}
.nv-stage__empty {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 16px;
text-align: center;
font-size: 13px;
line-height: 1.45;
}
.nv-stage__empty strong {
font-size: 15px;
}
.nv-stage__empty-icon {
display: inline-flex;
margin-bottom: 4px;
color: var(--accent);
}
.nv-stage__empty-icon svg {
width: 34px;
height: 34px;
}
.nv[data-nv-state='ready'] .nv-stage__empty,
.nv[data-nv-state='recording'] .nv-stage__empty,
.nv[data-nv-state='paused'] .nv-stage__empty,
.nv[data-nv-state='review'] .nv-stage__empty,
.nv[data-nv-state='recorded'] .nv-stage__empty,
.nv[data-nv-state='uploading'] .nv-stage__empty {
display: none;
}
.nv .nv-hint-nocam {
display: none;
}
.nv[data-nv-nocam] .nv-hint-cam {
display: none;
}
.nv[data-nv-nocam] .nv-hint-nocam {
display: inline;
}
.nv-stage .submission-native-video__preview-wrap {
position: absolute;
inset: 0;
width: 100%;
max-width: none;
margin: 0;
border-radius: 0;
}
.nv-stage .submission-native-video__preview {
display: block;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
background: #0f172a;
}
.submission-native-video__frame {
pointer-events: none;
position: absolute;
inset: 8%;
border: 2px solid rgba(255, 255, 255, 0.35);
border-radius: 6px;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.25);
}
.nv-stage .submission-native-video__playback {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
border-radius: 0;
object-fit: contain;
background: #0f172a;
}
.nv-stage__rec {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-size: 12.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.nv-stage__rec-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #ef4444;
animation: nv-rec-pulse 1.2s ease-in-out infinite;
}
.nv-stage__rec.is-paused .nv-stage__rec-dot {
animation: none;
background: #f59e0b;
}
@keyframes nv-rec-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
.nv-stage__rec-dot { animation: none; }
}
.nv-meta {
margin: 10px 0 0;
padding-left: 10px;
border-left: 3px solid #22c55e;
font-size: 13px;
line-height: 1.4;
overflow-wrap: anywhere;
}
.nv-status {
margin: 8px 0 0;
font-size: 13px;
line-height: 1.45;
min-height: 1.45em;
}
.nv-error,
.submission-native-video__error {
margin: 10px 0 0;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #fecaca;
background: #fef2f2;
color: #991b1b;
font-size: 14px;
line-height: 1.45;
}
.nv-permission {
margin: 10px 0 0;
padding: 12px 14px;
border-radius: 8px;
border: 1px solid #fde68a;
background: #fffbeb;
color: #78350f;
font-size: 14px;
line-height: 1.5;
}
.submission-native-video__permission-msg {
margin: 0 0 6px;
font-weight: 600;
}
.submission-native-video__permission-guides {
margin: 0 0 10px;
padding-left: 1.1rem;
font-size: 13px;
color: #92400e;
}
.nv-portrait {
margin: 10px 0 0;
padding: 12px 14px;
border-radius: 8px;
border: 1px solid #bfdbfe;
background: var(--accent-soft);
}
.nv-portrait p {
margin: 0 0 10px;
line-height: 1.5;
font-size: 14px;
}
.nv-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 0;
}
.nv-portrait .nv-actions {
margin-top: 0;
}
.nv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 10px 18px;
box-sizing: border-box;
font-family: inherit;
font-size: 15px;
line-height: 1.2;
cursor: pointer;
}
.nv-btn__icon {
flex: 0 0 auto;
}
.nv-btn:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.nv-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.nv-btn--stop {
background: #b91c1c;
}
.nv-btn--stop:hover {
background: #991b1b;
}
.nv-fallback {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--line-strong);
}
.nv-fallback__or {
font-size: 13px;
}
.nv[data-nv-state='ready'] .nv-fallback,
.nv[data-nv-state='recording'] .nv-fallback,
.nv[data-nv-state='paused'] .nv-fallback {
display: none;
}
@media (max-width: 520px) {
.media-card {
padding: 14px;
}
.nv-actions .nv-btn {
flex: 1 1 calc(50% - 5px);
}
.nv-actions .nv-btn[data-nv-start],
.nv-actions .nv-btn[data-nv-record],
.nv-actions .nv-btn[data-nv-stop],
.nv-actions .nv-btn[data-nv-use] {
flex-basis: 100%;
}
.nv-fallback .nv-btn {
flex: 1 1 100%;
}
.nv-fallback__or {
display: none;
}
}
.submission-form-field-label {
display: block;
font-weight: 600;
margin-bottom: 6px;
}
.submission-success-card .submission-success-lead {
margin: 0 0 12px;
font-size: 18px;
font-weight: 700;
color: var(--text);
}
.admin-shell {
width: 100%;
max-width: none;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
body.body--admin-workspace {
background: linear-gradient(180deg, #eef2f7 0%, #e8eef5 100%);
}
body.body--admin-workspace .admin-sticky-cluster {
background: #f8fafc;
border-bottom-color: #cbd5e1;
}
.admin-sticky-cluster {
position: sticky;
top: 0;
z-index: 300;
background: var(--surface-page);
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}
.admin-sticky-cluster--raised {
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.1);
}
.admin-workspace-top-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 14px;
padding: 8px 16px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface-page) 100%);
}
.admin-workspace-top-meta {
font-size: 14px;
font-weight: 600;
color: var(--text);
min-width: 0;
}
.admin-workspace-top-sep {
margin: 0 0.35em;
color: var(--text-faint);
}
.admin-workspace-top-kicker {
color: var(--text-muted);
font-weight: 700;
}
.admin-workspace-top-page {
font-weight: 700;
}
.admin-workspace-top-actions {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
.admin-workspace-top-link {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
color: var(--accent);
text-decoration: none;
min-height: 44px;
min-width: 44px;
padding: 10px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
white-space: nowrap;
}
.admin-workspace-top-link:hover {
border-color: var(--accent);
background: var(--surface-page);
}
.admin-workspace-top-link--exit {
color: var(--text-muted);
}
@media (max-width: 560px) {
.admin-workspace-top-inner {
flex-direction: column;
align-items: flex-start;
}
}
.admin-shell-header {
margin-bottom: 0;
padding: 6px 16px 12px;
border-bottom: none;
}
.admin-shell-brand {
margin: 0 0 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-muted);
text-transform: uppercase;
}
.admin-shell-nav {
width: 100%;
}
.admin-shell-nav-groups {
display: flex;
flex-wrap: wrap;
gap: 16px 22px;
align-items: flex-end;
}
.admin-shell-nav-group {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.admin-shell-nav-group-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-faint);
line-height: 1.2;
}
.admin-shell-nav-group-links {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
.admin-shell-nav-link {
display: inline-block;
padding: 8px 12px;
font-size: 14px;
font-weight: 600;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--text);
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-shell-nav-link:hover {
border-color: var(--accent);
background: var(--surface-page);
}
.admin-shell-nav-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.admin-shell-nav-link--active {
border-color: var(--accent);
background: rgba(59, 130, 246, 0.1);
color: var(--accent);
}

.admin-mobile-menu {
display: none;
margin: 0;
border: 0;
min-width: 0;
}
.admin-mobile-menu__summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 44px;
padding: 10px 12px;
box-sizing: border-box;
font-size: 15px;
font-weight: 700;
color: var(--text);
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-elevated);
user-select: none;
}
.admin-mobile-menu__summary::-webkit-details-marker {
display: none;
}
.admin-mobile-menu__summary::after {
content: '';
width: 0.55em;
height: 0.55em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-top: -0.2em;
flex-shrink: 0;
opacity: 0.7;
}
.admin-mobile-menu[open] > .admin-mobile-menu__summary::after {
transform: rotate(-135deg);
margin-top: 0.2em;
}
.admin-mobile-menu__summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.admin-mobile-menu__panel {
margin-top: 10px;
min-width: 0;
}
@media (max-width: 767px) {

.body--admin-workspace .admin-sticky-cluster {
position: static;
top: auto;
z-index: auto;
}
.body--admin-workspace .wrap.wrap--admin-full {
padding-top: 12px;
padding-bottom: 32px;
}
.body--admin-workspace .admin-shell-main > .section {
margin-top: 12px;
}
.admin-shell-nav--desktop {
display: none;
}
.admin-mobile-menu {
display: block;
}
.admin-shell-header {
padding: 6px 12px 10px;
}
.admin-shell-brand {
margin: 0 0 8px;
}
.admin-shell-nav--mobile .admin-shell-nav-groups {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.admin-shell-nav--mobile .admin-shell-nav-group-links {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.admin-shell-nav--mobile .admin-shell-nav-link {
display: block;
width: 100%;
box-sizing: border-box;
text-align: left;
white-space: normal;
min-height: 44px;
padding: 11px 12px;
}
.admin-workspace-top-link {
white-space: normal;
}
.admin-shell-main {
padding-inline: 0;
min-width: 0;
}
.admin-shell-main img {
max-width: 100%;
height: auto;
}
.admin-shell-main textarea,
.admin-shell-main input[type="url"],
.admin-shell-main input[type="text"] {
max-width: 100%;
box-sizing: border-box;
}
}
@media (min-width: 768px) {
.admin-mobile-menu {
display: none;
}
.admin-shell-nav--desktop {
display: block;
}
.body--admin-workspace .admin-sticky-cluster {
position: sticky;
top: 0;
z-index: 300;
}
}
@media (prefers-reduced-motion: reduce) {
.admin-shell-nav-link {
transition: none;
}
}
.admin-shell-main {
min-height: 40vh;
}
.admin-dashboard {
max-width: min(1100px, 100%);
}
.admin-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.admin-dashboard-card {
display: block;
padding: 16px 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
text-decoration: none;
color: inherit;
box-shadow: var(--shadow-sm);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-dashboard-card:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.admin-dashboard-card-title {
margin: 0 0 6px;
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
}
.admin-dashboard-card-meta {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--accent);
}
.admin-dashboard-section-heading {
margin: 0 0 12px;
font-size: 1rem;
font-weight: 700;
color: var(--text);
}
.admin-dashboard-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 8px;
}
.admin-dashboard-metrics--extra {
margin-bottom: 0;
}
.admin-dashboard-metric-card {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 88px;
padding: 14px 14px 12px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
text-decoration: none;
color: inherit;
box-shadow: var(--shadow-sm);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-dashboard-metric-card:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.admin-dashboard-metric-card--static {
cursor: default;
}
.admin-dashboard-metric-card--static:hover {
border-color: var(--line);
box-shadow: var(--shadow-sm);
}
.admin-dashboard-metric-label {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
line-height: 1.35;
margin-bottom: 6px;
}
.admin-dashboard-metric-value {
font-size: 1.65rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1.1;
}
.admin-dashboard-attention {
margin: 0 0 22px;
padding: 14px 16px;
border-radius: var(--radius-lg);
border: 1px solid rgba(245, 158, 11, 0.45);
background: rgba(251, 191, 36, 0.12);
}
.admin-dashboard-attention .admin-dashboard-section-heading {
margin-bottom: 10px;
}
.admin-dashboard-attention-list {
margin: 0;
padding-left: 1.15rem;
font-size: 14px;
line-height: 1.55;
}
.admin-dashboard-attention-item a {
font-weight: 600;
color: var(--accent);
}
.admin-dashboard-empty {
margin: 0;
font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
}
.admin-dashboard-quick-actions {
margin: 0 0 24px;
}
.admin-dashboard-quick-actions-inner {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: center;
}
.admin-dashboard-quick-action {
display: inline-block;
padding: 10px 14px;
font-size: 14px;
font-weight: 600;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--accent);
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-dashboard-quick-action:hover {
border-color: var(--accent);
background: var(--surface-page);
}
.admin-dashboard-recent {
margin: 0;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.admin-dashboard-recent-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px 24px;
}
.admin-dashboard-recent-subheading {
margin: 0 0 10px;
font-size: 14px;
font-weight: 700;
color: var(--text-muted);
}
.admin-dashboard-recent-list {
margin: 0;
padding-left: 1.1rem;
font-size: 14px;
line-height: 1.5;
}
.admin-expiring-campaigns {
max-width: 900px;
}
.admin-expiring-campaigns-filters {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin: 0 0 18px;
align-items: center;
}
.admin-expiring-campaign-filter {
display: inline-block;
padding: 7px 12px;
font-size: 13px;
font-weight: 600;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--text);
text-decoration: none;
}
.admin-expiring-campaign-filter:hover {
border-color: var(--accent);
}
.admin-expiring-campaign-filter--active {
border-color: var(--accent);
background: rgba(59, 130, 246, 0.1);
color: var(--accent);
}
.admin-expiring-campaigns-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.admin-expiring-campaign-card {
padding: 16px 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.admin-expiring-campaign-title {
margin: 0 0 6px;
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
}
.admin-expiring-campaign-id {
margin: 0 0 10px;
font-size: 13px;
}
.admin-expiring-campaign-meta .admin-expiring-campaign-line,
.admin-expiring-campaign-meta .admin-expiring-campaign-targeting,
.admin-expiring-campaign-meta .admin-expiring-campaign-status {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.45;
}
.admin-expiring-campaign-status {
font-weight: 600;
}
.admin-expiring-campaign-actions {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 12px;
}
.admin-expiring-campaign-renew-row {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
.admin-expiring-campaign-renew-form {
display: inline;
margin: 0;
}
.admin-expiring-campaign-renew-btn {
font-size: 13px;
padding: 8px 12px;
}
.admin-campaign-performance {
max-width: 960px;
}
.admin-campaign-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin: 0 0 18px;
}
.admin-campaign-summary-card {
padding: 12px 14px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
display: flex;
flex-direction: column;
gap: 4px;
}
.admin-campaign-summary-label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.admin-campaign-summary-value {
font-size: 1.35rem;
font-weight: 800;
color: var(--text);
}
.admin-campaign-performance-filters {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
margin-bottom: 8px;
}
.admin-campaign-performance-filter {
display: inline-block;
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
color: var(--text);
text-decoration: none;
}
.admin-campaign-performance-filter:hover {
border-color: var(--accent);
}
.admin-campaign-performance-filter--active {
border-color: var(--accent);
background: rgba(59, 130, 246, 0.1);
color: var(--accent);
}
.admin-campaign-performance-grid {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 16px;
}
.admin-campaign-performance-card {
padding: 14px 16px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
}
.admin-campaign-performance-card-title {
margin: 0 0 8px;
font-size: 1.05rem;
font-weight: 700;
}
.admin-campaign-performance-meta p {
margin: 0 0 6px;
font-size: 14px;
line-height: 1.45;
}
.admin-campaign-performance-targeting {
font-size: 14px;
}
.admin-campaign-performance-metrics {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
font-size: 14px;
}
.admin-submissions { max-width: 900px; }
.admin-feeds { max-width: 980px; }
.admin-feeds-table-wrap {
overflow-x: auto;
margin-top: 12px;
}
.admin-feeds-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.admin-feeds-table th,
.admin-feeds-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.admin-feeds-table th {
font-weight: 600;
color: var(--text-muted);
font-size: 13px;
}
.admin-feeds-url {
max-width: 280px;
word-break: break-word;
font-size: 13px;
}
.admin-feeds-status--off {
color: var(--text-muted);
}
.admin-slots {
max-width: none;
width: 100%;
}
.admin-slots .admin-mvp-note {
max-width: min(52rem, 100%);
}
.admin-slots-help-details {
margin: 0 0 10px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
max-width: min(52rem, 100%);
}
.admin-slots-help-summary {
padding: 0.45rem 0.65rem;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--text);
list-style: none;
}
.admin-slots-help-summary::-webkit-details-marker {
display: none;
}
.admin-slots-help-details .admin-slots-moderator-hint {
margin: 0;
border: none;
border-radius: 0;
padding: 0 12px 10px;
background: transparent;
}
.admin-slots-creative-sizes {
margin: 0 0 12px;
padding: 10px 12px;
max-width: min(56rem, 100%);
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
}
.admin-slots-creative-sizes__title {
margin: 0 0 6px;
font-size: 1rem;
font-weight: 650;
line-height: 1.25;
color: var(--text);
}
.admin-slots-creative-sizes__lead {
margin: 0 0 10px;
font-size: 12px;
line-height: 1.4;
}
.admin-slots-creative-sizes__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px 10px;
margin: 0 0 8px;
}
.admin-slots-creative-card {
padding: 8px 10px;
border-radius: calc(var(--radius-md) - 2px);
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.55);
}
.admin-slots-creative-card__title {
margin: 0 0 4px;
font-size: 12.5px;
font-weight: 600;
line-height: 1.3;
color: var(--text);
}
.admin-slots-creative-card__tech {
font-weight: 500;
color: var(--text-muted);
font-size: 11px;
}
.admin-slots-creative-card__body {
margin: 0 0 4px;
font-size: 12px;
line-height: 1.4;
color: var(--text);
}
.admin-slots-creative-card__note {
margin: 0;
font-size: 11px;
line-height: 1.35;
}
.admin-slots-creative-sizes__format {
margin: 0;
font-size: 11.5px;
line-height: 1.4;
}
.admin-slot-creative-hint {
margin: 0 0 8px;
font-size: 12px;
line-height: 1.45;
max-width: min(52rem, 100%);
}
.admin-slots--compact-top .admin-mvp-note {
margin: 0 0 6px;
font-size: 12px;
line-height: 1.35;
}
.admin-slots--compact-top .admin-submissions-h1 {
margin: 0 0 6px;
font-size: 1.35rem;
line-height: 1.2;
}
.admin-slots--compact-top .section-lead {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.45;
}
.admin-slots--compact-top .admin-slot-flash {
margin: 0 0 10px;
padding: 10px 12px;
}
.admin-slots--compact-top .admin-slot-filters {
margin: 0 0 10px;
gap: 6px 8px;
}
.admin-slots--compact-top .admin-slot-filter {
padding: 6px 11px;
font-size: 13px;
}
.admin-slots--compact-top .admin-slot-create-details {
margin: 0 0 12px;
}
.admin-slots--compact-top .admin-slot-create-summary {
padding: 10px 14px;
gap: 4px 10px;
}
.admin-slots--compact-top .admin-slot-create-summary-hint {
flex: 0 1 auto;
font-size: 11px;
}
.body--admin-workspace .admin-slots--compact-top .admin-mvp-note {
margin: 0 0 4px;
font-size: 11px;
}
.body--admin-workspace .admin-slots--compact-top .admin-slots-help-details {
margin: 0 0 6px;
}
.body--admin-workspace .admin-slots--compact-top .admin-slots-help-summary {
padding: 0.35rem 0.5rem;
font-size: 12px;
}
.body--admin-workspace .admin-slots--compact-top .admin-submissions-h1 {
margin: 0 0 4px;
font-size: 1.2rem;
}
.body--admin-workspace .admin-slots--compact-top .section-lead {
margin: 0 0 6px;
font-size: 13px;
line-height: 1.4;
}
.body--admin-workspace .admin-slots--compact-top .admin-slot-flash {
margin: 0 0 8px;
padding: 8px 10px;
}
.body--admin-workspace .admin-slots--compact-top .admin-slot-filters {
margin: 0 0 6px;
}
.body--admin-workspace .admin-slots--compact-top .admin-slot-create-details {
margin: 0 0 8px;
}
.body--admin-workspace .admin-slots--compact-top .admin-slot-create-summary {
padding: 8px 12px;
}
.body--admin-workspace .admin-slots--compact-top .admin-slots-list-heading {
margin: 8px 0 4px;
}
.body--admin-workspace .admin-slots--compact-top .admin-slots-global-counts {
margin: 0 0 6px;
font-size: 12px;
}
.admin-slots-quick-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
margin: 0 0 10px;
padding: 6px 0 2px;
border-top: 1px dashed var(--line);
}
.admin-slots-quick-label {
font-size: 12px;
font-weight: 600;
}
.admin-slots-quick-buttons {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.admin-slots-qf {
margin: 0;
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--text-muted);
}
.admin-slots-qf:hover {
border-color: var(--line-strong);
color: var(--text);
}
.admin-slots-qf--active {
border-color: var(--accent);
background: rgba(59, 130, 246, 0.1);
color: var(--accent);
}
.admin-slot-card.admin-slot-card--qf-hidden {
display: none !important;
}
.admin-slots-list-heading {
margin: 24px 0 14px;
font-size: 17px;
font-weight: 700;
color: var(--text);
}
.admin-slots--compact-top .admin-slots-list-heading {
margin: 12px 0 6px;
font-size: 1.05rem;
}
.admin-slots-global-counts {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.45;
max-width: min(52rem, 100%);
}
.admin-slots-global-counts strong {
font-weight: 700;
color: var(--text);
}
.admin-slots-grouped {
display: flex;
flex-direction: column;
gap: 16px;
}
.admin-slots-surface-group {
min-width: 0;
}
.admin-slots-surface-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 12px;
margin: 0 0 8px;
}
.admin-slots-surface-title {
margin: 0;
font-size: 1.02rem;
font-weight: 700;
color: var(--text);
}
.admin-slots-surface-count {
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.admin-slots-board {
width: 100%;
min-width: 0;
}
.admin-slots-board-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 14px;
align-items: start;
}
.admin-slots-column {
min-width: 0;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.admin-slots-column-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 6px 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--line);
background: var(--surface-page);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.admin-slots-column-title {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
line-height: 1.25;
}
.admin-slots-column-count {
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.admin-slots-column-scopes {
padding: 8px 8px 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.admin-slots-scope-details {
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-page);
}
.admin-slots-scope-details[open] {
border-color: var(--line-strong);
}
.admin-slots-scope-summary {
padding: 8px 10px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--text);
list-style: none;
line-height: 1.35;
}
.admin-slots-scope-summary::-webkit-details-marker {
display: none;
}
.admin-slots-scope-cards {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 8px 8px;
border-top: 1px solid var(--line);
}
.admin-slots-scope-empty {
margin: 0;
padding: 6px 0 2px;
font-size: 13px;
}
.admin-slots-scope-cards .admin-slot-card {
padding: 10px 12px 8px;
}
.admin-slots-surface-orphan-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.admin-slots-surface-orphan-grid .admin-slot-card {
min-width: 0;
}
@media (max-width: 1024px) {
.admin-slots-board-columns {
grid-template-columns: 1fr;
}
}
.admin-slot-create-details {
margin: 0 0 22px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.admin-slot-create-details[open] {
border-color: var(--line-strong);
}
.admin-slot-create-summary {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 14px;
padding: 14px 18px;
cursor: pointer;
font-size: 15px;
font-weight: 700;
color: var(--text);
list-style: none;
}
.admin-slot-create-summary::-webkit-details-marker {
display: none;
}
.admin-slot-create-summary-title {
flex: 1 1 auto;
min-width: 0;
}
.admin-slot-create-summary-hint {
flex: 1 1 100%;
font-size: 12px;
font-weight: 500;
line-height: 1.35;
}
.admin-slot-create-details .admin-slot-create {
margin: 0;
padding: 0 18px 18px;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.admin-slot-create {
margin: 0 0 28px;
padding: 18px 18px 20px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.admin-slot-create-heading {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
}
.admin-slot-create-note {
margin: 0 0 16px;
font-size: 13px;
line-height: 1.45;
}
.admin-slot-preset-row {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
margin: 0 0 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.admin-slot-preset-link {
display: inline-block;
padding: 6px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
color: var(--accent);
font-weight: 600;
font-size: 13px;
text-decoration: none;
}
.admin-slot-preset-link:hover {
border-color: var(--line-strong);
background: var(--surface-hover);
}
.admin-slot-create-section {
margin: 0 0 16px;
padding-bottom: 4px;
}
.admin-slot-create-subheading {
margin: 0 0 10px;
font-size: 14px;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.admin-slot-create-help {
margin: 8px 0 0;
font-size: 13px;
line-height: 1.5;
}
.admin-slot-field-hint {
display: block;
margin-top: 4px;
font-size: 12px;
line-height: 1.4;
}
.admin-slot-create-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.admin-slot-create-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px 16px;
align-items: end;
}
.admin-slot-create-actions {
margin-top: 4px;
}
.admin-slot-flash {
margin: 0 0 16px;
padding: 12px 14px;
border-radius: var(--radius-md);
font-size: 14px;
line-height: 1.45;
}
.admin-slot-flash--success {
border: 1px solid var(--line);
background: var(--accent-soft);
color: var(--text);
}
.admin-slot-flash--error {
border: 1px solid rgba(185, 28, 28, 0.35);
background: #fef2f2;
color: var(--danger);
}
.admin-slot-flash-title {
margin: 0 0 6px;
font-weight: 700;
}
.admin-slot-flash-list {
margin: 0;
padding-left: 1.2em;
}
.admin-slot-card {
container-type: inline-size;
container-name: admin-slot-card;
padding: 12px 14px 10px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.admin-slot-card--compact .admin-slot-human-headline {
margin: 0 0 6px;
font-size: 16px;
}
.admin-slot-card--compact .admin-slot-sales-label {
margin: 0 0 6px;
font-size: 15px;
}
.admin-slot-card--compact .admin-slot-human-headline--secondary {
font-size: 12px;
margin: 0 0 4px;
}
.admin-slot-card-overview {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(200px, min(520px, 42vw));
gap: 10px 24px;
align-items: start;
}
.admin-slot-card-overview-text {
min-width: 0;
}
.admin-slot-card-overview-side {
min-width: 0;
text-align: right;
}
.admin-slot-overview-meta {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 6px 10px;
margin: 0 0 4px;
}
.admin-slot-overview-prio {
font-size: 12px;
white-space: nowrap;
}
.admin-slot-id-code--clip {
max-width: min(100%, 220px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: bottom;
}
.admin-slot-tech-compact {
margin: 0;
font-size: 12px;
line-height: 1.35;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-slot-targeting-line--compact {
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
font-size: 13px;
}
.admin-slot-card-details {
margin: 8px 0 0;
padding: 0;
border: none;
}
.admin-slot-card-details-summary {
display: block;
padding: 8px 0 4px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: var(--accent);
list-style: none;
}
.admin-slot-card-details-summary::-webkit-details-marker {
display: none;
}
.admin-slot-card-details-summary::before {
content: "▸ ";
display: inline-block;
transition: transform 0.15s ease;
}
.admin-slot-card-details[open] .admin-slot-card-details-summary::before {
transform: rotate(90deg);
}
.admin-slot-card-details-inner {
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
@media (max-width: 800px) {
.admin-slot-card-overview {
grid-template-columns: 1fr;
}
.admin-slot-card-overview-side {
text-align: left;
}
.admin-slot-overview-meta {
justify-content: flex-start;
}
}
@container admin-slot-card (max-width: 440px) {
.admin-slot-card-overview {
grid-template-columns: 1fr;
}
.admin-slot-card-overview-side {
text-align: left;
}
.admin-slot-overview-meta {
justify-content: flex-start;
}
}
.admin-slots-moderator-hint {
margin: 0 0 18px;
padding: 12px 14px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
max-width: min(52rem, 100%);
}
.admin-slots-moderator-hint__text {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.55;
color: var(--text-muted);
}
.admin-slots-moderator-hint__text:last-child {
margin-bottom: 0;
}
.admin-slots-moderator-hint__text strong {
color: var(--text);
font-weight: 600;
}
.admin-slot-card-header {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.admin-slot-human-headline {
margin: 0 0 10px;
font-size: 17px;
font-weight: 700;
line-height: 1.35;
color: var(--text);
}
.admin-slot-sales-label {
margin: 0 0 8px;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
color: var(--text);
}
.admin-slot-human-headline--secondary {
margin: 0 0 6px;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.admin-slot-kind-pill-row {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
margin: 0 0 8px;
}
.admin-slot-kind-pill {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
border: 1px solid var(--line);
}
.admin-slot-kind-pill--promoted {
background: rgba(37, 99, 235, 0.12);
border-color: rgba(37, 99, 235, 0.35);
color: var(--accent);
}
.admin-slot-kind-pill--promo {
background: rgba(100, 116, 139, 0.1);
color: var(--text-muted);
}
.admin-slot-kind-pill--partner {
background: rgba(15, 118, 110, 0.12);
border-color: rgba(15, 118, 110, 0.28);
color: #0f766e;
}
.admin-slot-surface-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
margin: 0 0 18px;
padding: 12px 0 4px;
border-top: 1px solid var(--line);
}
.admin-slot-surface-label {
margin: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.admin-slot-surface-links {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
}
.admin-slot-surface-link {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface-page);
color: var(--text);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.admin-slot-surface-link:hover {
background: var(--surface-hover);
border-color: var(--line-strong);
}
.admin-slot-surface-link--active {
background: var(--accent-soft);
border-color: rgba(37, 99, 235, 0.45);
color: var(--accent);
}
.admin-slot-id-status-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 0 0 8px;
font-size: 14px;
}
.admin-slot-id-code {
font-size: 13px;
font-weight: 600;
padding: 2px 8px;
border-radius: 6px;
background: rgba(148, 163, 184, 0.15);
}
.admin-slot-priority-note {
font-size: 13px;
}
.admin-slot-targeting-line {
margin: 0 0 6px;
font-size: 14px;
line-height: 1.45;
}
.admin-slot-tech-keys {
margin: 0;
font-size: 12px;
line-height: 1.45;
}
.admin-slot-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-bottom: 10px;
font-size: 14px;
}
.admin-slot-card-title-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 0.75rem;
}
.admin-slot-demo-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
padding: 0.15rem 0.45rem;
border-radius: 999px;
background: rgba(120, 120, 140, 0.18);
color: inherit;
}
.admin-slot-filters {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin-bottom: 20px;
}
.admin-slot-filter {
display: inline-block;
padding: 8px 14px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--accent);
font-weight: 600;
font-size: 14px;
text-decoration: none;
}
.admin-slot-filter:hover {
border-color: var(--line-strong);
background: var(--surface-page);
}
.admin-slot-filter--active {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--text);
}
.admin-slot-status-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
.admin-slot-status-badge--active {
background: rgba(34, 197, 94, 0.2);
color: #166534;
}
.admin-slot-status-badge--inactive {
background: rgba(148, 163, 184, 0.35);
color: var(--text-muted);
}
.admin-slot-status-badge--archived {
background: rgba(120, 120, 140, 0.22);
color: var(--text-muted);
}
.admin-slot-archive-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.admin-slot-archive-form {
display: inline;
}
.admin-slot-delete-form {
display: inline;
}
.admin-slot-danger {
display: inline-block;
padding: 8px 14px;
border-radius: var(--radius-md);
border: 1px solid rgba(185, 28, 28, 0.45);
background: #fef2f2;
color: var(--danger);
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.admin-slot-danger:hover {
border-color: var(--danger);
}
.admin-slot-meta strong {
font-size: 15px;
color: var(--text);
}
.admin-slot-meta-line {
margin: 0;
line-height: 1.45;
}
.admin-slot-campaign-meta {
margin: 4px 0 0;
padding: 8px 10px;
border-radius: var(--radius-md);
border-left: 3px solid var(--accent);
background: var(--surface-page);
}
.admin-slot-campaign-meta .admin-slot-meta-line {
font-size: 13px;
}
.admin-slot-expiry-note {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.admin-slot-duration-actions {
margin: 4px 0 8px;
}
.admin-slot-duration-hint {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.4;
}
.admin-slot-duration-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
.admin-slot-duration-form {
display: inline;
margin: 0;
}
.admin-slot-duration-button {
display: inline-block;
padding: 6px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--accent);
font-weight: 600;
font-size: 13px;
cursor: pointer;
}
.admin-slot-duration-button:hover {
border-color: var(--line-strong);
background: var(--surface-hover);
}
.admin-slot-targeting {
margin: 0;
font-size: 13px;
line-height: 1.45;
}
.admin-slot-placement-label {
font-weight: 600;
color: var(--text);
}
.admin-slot-role-label {
font-weight: 600;
color: var(--text);
}
.admin-slot-role-raw {
font-size: 12px;
font-weight: 500;
}
.admin-slot-priority {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.admin-slot-preview {
margin: 0 0 10px;
font-size: 14px;
word-break: break-word;
}
.admin-slot-targets {
margin: 0 0 12px;
font-size: 12px;
}
.admin-slot-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.admin-slot-form-grid {
display: flex;
flex-wrap: wrap;
gap: 14px 20px;
align-items: flex-end;
}
.admin-slot-field {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.admin-slot-field input,
.admin-slot-field textarea {
font-weight: 400;
color: var(--text);
padding: 8px 10px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
font-size: 14px;
}
.admin-slot-field textarea {
min-height: 72px;
resize: vertical;
}
.admin-slot-actions {
margin-top: 4px;
}
.advertiser-manage {
max-width: 720px;
margin: 0 auto;
}
.wrap--manage-workspace-full .advertiser-manage {
max-width: min(1240px, 100%);
margin: 0 auto;
}
.advertiser-manage-layout {
width: 100%;
}
.advertiser-manage-main-grid {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
@media (min-width: 900px) {
.advertiser-manage-main-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
align-items: start;
}
}
.advertiser-manage-col--meta,
.advertiser-manage-col--body {
grid-column: 1 / -1;
}
.advertiser-manage-col--meta {
min-width: 0;
max-width: 100%;
}
.advertiser-manage-col--meta .advertiser-manage-panel {
overflow-wrap: anywhere;
word-break: break-word;
}
.advertiser-manage-col--meta .advertiser-manage-meta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
margin-bottom: 0;
}
.advertiser-manage-col--meta .advertiser-manage-thumb-wrap {
align-self: center;
width: 100%;
max-width: 220px;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
}
.advertiser-manage-col--meta .advertiser-manage-thumb-wrap .admin-submission-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.advertiser-manage-col--body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.advertiser-manage-panel {
box-sizing: border-box;
padding: 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.advertiser-manage-panel-title {
margin: 0 0 12px;
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
}
.advertiser-manage-panel--status {
border-color: var(--line-strong);
}
.advertiser-manage-panel--owner {
border-color: rgba(180, 83, 9, 0.35);
background: linear-gradient(180deg, #fffbeb 0%, var(--surface-elevated) 100%);
}
.advertiser-manage-danger-zone {
margin-top: 18px;
padding-top: 18px;
border-top: 1px dashed rgba(185, 28, 28, 0.35);
}
.advertiser-manage-danger-zone-title {
margin: 0 0 8px;
font-size: 1rem;
font-weight: 700;
color: var(--danger);
}
.advertiser-manage-permanent-delete-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: var(--radius-md);
border: 1px solid rgba(185, 28, 28, 0.45);
background: rgba(254, 226, 226, 0.9);
color: #991b1b;
font-weight: 700;
font-size: 14px;
cursor: pointer;
font-family: inherit;
}
.advertiser-manage-permanent-delete-btn:hover {
background: rgba(254, 202, 202, 0.95);
}
.advertiser-manage-withdrawn-banner {
padding: 14px 16px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-page);
}
.advertiser-manage-form.advertiser-manage-panel {
margin-top: 0;
padding-top: 16px;
border-top: none;
}
.manage-quality-guidance,
.advertiser-manage-panel--packages-extras {
margin: 0;
padding: 0;
overflow: hidden;
}
.advertiser-manage-panel--packages-extras {
scroll-margin-top: 112px;
}
#csv-import {
scroll-margin-top: 112px;
}
@media (max-width: 1023px) {

#csv-import {
scroll-margin-top: 205px;
}
}
.submission-bulk-import-note {
margin-top: 28px;
margin-bottom: 20px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.submission-bulk-import-note h2 {
margin: 0 0 8px;
}
.listing-fallback-lead {
margin: 0 0 12px;
padding: 10px 12px;
max-width: 72ch;
border-left: 3px solid #d97706;
border-radius: var(--radius-md);
background: rgba(217, 119, 6, 0.07);
line-height: 1.5;
}
.listing-fallback-blocks {
margin-top: 8px;
}
.listing-fallback {
margin-top: 20px;
padding: 16px 14px 14px;
border-top: 3px solid var(--line);
border-radius: var(--radius-md);
background: rgba(15, 23, 42, 0.03);
}
.listing-fallback--nearby {
border-top-color: #2563eb;
}
.listing-fallback--wider {
border-top-color: #7c3aed;
}
.listing-fallback--national {
border-top-color: #64748b;
}
.listing-fallback--sample {
border-top-color: #d97706;
background: rgba(217, 119, 6, 0.05);
}
.listing-fallback h2 {
margin: 0 0 4px;
font-size: 1.2rem;
}
.listing-fallback .section-lead {
margin: 0 0 12px;
}
.listing-fallback__item {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.listing-fallback__where {
align-self: flex-start;
max-width: 100%;
margin: 0;
padding: 3px 10px;
border-radius: 999px;
background: var(--surface-elevated);
border: 1px solid var(--line);
font-size: 13px;
font-weight: 600;
overflow-wrap: anywhere;
}
.listing-fallback--sample .listing-fallback__where {
color: #92400e;
border-color: rgba(217, 119, 6, 0.45);
}
.listing-fallback.is-collapsed .listing-fallback__item:nth-child(n+5) {
display: none;
}
.listing-fallback__more {
margin-top: 12px;
}
.bulk-access-card {
margin: 20px 0;
padding: 14px 16px;
border: 1px solid var(--line);
border-left: 4px solid #94a3b8;
border-radius: var(--radius-md);
background: var(--surface-elevated);
overflow-wrap: anywhere;
}
.bulk-access-card--ok {
border-left-color: #16a34a;
}
.bulk-access-card--blocked {
border-left-color: #b91c1c;
}
.bulk-access-card__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 12px;
margin-bottom: 6px;
}
.bulk-access-card__title {
margin: 0;
font-size: 1.15rem;
}
.bulk-access-card__status {
margin: 0;
font-size: 14px;
}
.bulk-access-card__status--ok strong {
color: #15803d;
}
.bulk-access-card__status--blocked strong {
color: #b91c1c;
}
.bulk-access-card p {
line-height: 1.55;
max-width: 72ch;
}
.bulk-access-card__limits {
margin: 8px 0 0;
padding-left: 20px;
line-height: 1.55;
max-width: 72ch;
}
.bulk-access-card__limits li + li {
margin-top: 4px;
}
.bulk-access-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin-top: 12px;
}
.bulk-access-card__actions a:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.manage-quality-guidance > summary,
.advertiser-manage-panel--packages-extras > summary,
.account-dashboard-secondary-guidance > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
padding: 14px 16px;
font-size: 14px;
line-height: 1.45;
}
.manage-quality-guidance > summary:focus-visible,
.advertiser-manage-panel--packages-extras > summary:focus-visible,
.account-dashboard-secondary-guidance > summary:focus-visible {
outline: 3px solid rgba(11, 92, 171, 0.35);
outline-offset: -3px;
}
.manage-quality-guidance > summary::-webkit-details-marker,
.advertiser-manage-panel--packages-extras > summary::-webkit-details-marker,
.account-dashboard-secondary-guidance > summary::-webkit-details-marker {
margin-right: 8px;
}
.manage-quality-guidance__body,
.advertiser-manage-panel--packages-extras > *:not(summary) {
padding-left: 16px;
padding-right: 16px;
}
.manage-quality-guidance__body {
padding-bottom: 14px;
}
.manage-quality-warning {
padding: 12px 14px;
border-color: rgba(180, 120, 20, 0.3);
background: rgba(180, 120, 20, 0.08);
}
.manage-quality-warning .quality-guidance-hints-list {
margin-bottom: 0;
}
.manage-packages-summary {
margin-left: auto;
color: var(--text-muted);
font-size: 12px;
font-weight: 400;
}
.extra-cart-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.extra-cart-row__content {
flex: 1 1 12rem;
min-width: 0;
overflow-wrap: anywhere;
}
.extra-cart-row__actions {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
min-width: 0;
}
.extra-cart-row__actions button {
max-width: 100%;
white-space: normal;
}
@media (max-width: 480px) {
.extra-cart-row {
display: block;
}
.extra-cart-row__actions {
margin-top: 8px;
justify-content: flex-start;
}
}
.advertiser-feature-request.advertiser-manage-panel,
.advertiser-promoted-request.advertiser-manage-panel {
margin-bottom: 0;
border: 1px solid var(--line);
background: var(--surface-elevated);
}
.advertiser-manage-card {
border-radius: var(--radius-lg);
}
.submission-manage-callout {
margin: 16px 0;
padding: 14px 16px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
}
.advertiser-manage-meta {
display: flex;
flex-wrap: wrap;
gap: 16px 20px;
margin-bottom: 16px;
align-items: flex-start;
}
.advertiser-manage-thumb-wrap {
flex-shrink: 0;
}
.advertiser-manage-status {
margin: 6px 0 0;
font-size: 14px;
}
.advertiser-manage-status--pending {
color: var(--accent);
}
.advertiser-manage-status--ok {
color: #166534;
}
.advertiser-manage-status--bad {
color: var(--danger);
}
.advertiser-manage-status--muted {
color: var(--text-muted);
}
.advertiser-manage-form {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.advertiser-manage-form-heading {
margin: 0 0 12px;
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
}
.advertiser-manage-form-subheading {
margin: 0 0 10px;
font-size: 0.98rem;
font-weight: 700;
}
.advertiser-manage-images-block {
margin: 16px 0;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface-page);
}
.advertiser-manage-images-list {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.advertiser-manage-image-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: start;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-elevated);
}
.advertiser-manage-image-row__thumb {
position: relative;
width: 96px;
aspect-ratio: 4 / 3;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--line);
}
.advertiser-manage-image-row__hidden {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 4px;
font-size: 11px;
line-height: 1.3;
text-align: center;
color: #b91c1c;
}
.advertiser-manage-image-row__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.advertiser-manage-image-row__num {
position: absolute;
left: 4px;
top: 4px;
font-size: 11px;
font-weight: 700;
background: rgba(15, 23, 42, 0.72);
color: #fff;
padding: 2px 6px;
border-radius: 4px;
}
.advertiser-manage-image-row__file {
font-size: 12px;
word-break: break-all;
}
.advertiser-manage-image-row__meta {
margin: 4px 0 0;
font-size: 12px;
}
.advertiser-manage-image-row__cover,
.advertiser-manage-image-row__delete {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 8px 12px 0 0;
font-size: 13px;
cursor: pointer;
}
.advertiser-manage-image-row__move {
display: flex;
flex-direction: column;
gap: 4px;
}
.advertiser-manage-image-row__move .btn-secondary {
box-sizing: border-box;
min-width: 44px;
min-height: 44px;
padding: 8px 10px;
}
.advertiser-manage-images-block input[data-image-upload-input]:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.advertiser-manage-images-empty {
padding: 8px 0;
}
.advertiser-manage-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px 16px;
margin-bottom: 12px;
}
.advertiser-manage-actions {
margin-top: 10px;
}
.advertiser-manage-live-link {
margin: 8px 0 0;
}
.advertiser-manage-live-link .cta {
font-size: 14px;
padding: 8px 14px;
}
.advertiser-manage-note {
font-size: 13px;
margin: 0 0 12px;
line-height: 1.5;
}
.advertiser-feature-request {
margin: 0 0 20px;
padding: 16px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-page);
}
.advertiser-feature-request-form {
margin: 0;
}
.advertiser-feature-request-options {
display: flex;
flex-direction: column;
gap: 6px;
}
.advertiser-feature-request-options .admin-duration-option {
display: block;
font-weight: 500;
font-size: 14px;
}
.advertiser-feature-request-status {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.45;
color: var(--text);
}
.advertiser-feature-request-note {
margin: 0 0 12px;
}
.advertiser-promoted-request {
margin: 0 0 20px;
padding: 16px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-page);
}
.advertiser-promoted-request-form {
margin: 0;
}
.advertiser-promoted-request-options {
display: flex;
flex-direction: column;
gap: 6px;
}
.advertiser-promoted-request-options .admin-duration-option {
display: block;
font-weight: 500;
font-size: 14px;
}
.advertiser-promoted-request-status {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.45;
color: var(--text);
}
.advertiser-promoted-request-note {
margin: 0 0 12px;
}
.account-dashboard-featured-state {
color: var(--text);
}
.account-dashboard-feature-cell {
max-width: 220px;
vertical-align: top;
}
.account-dashboard-promoted-state {
color: var(--text);
}
.account-dashboard-promoted-cell {
max-width: 220px;
vertical-align: top;
}
.admin-request-badge--review {
background: rgba(251, 191, 36, 0.25);
color: #92400e;
border: 1px solid rgba(245, 158, 11, 0.45);
}
.account-auth {
max-width: 560px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
.account-auth-card {
border-radius: var(--radius-lg);
}
.account-auth-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.account-auth-form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 560px) {
.account-auth-form-grid {
grid-template-columns: 1fr 1fr;
}
}
.account-dashboard {
max-width: 100%;
margin: 0 auto;
}
.wrap--account-workspace-full .account-dashboard {
max-width: 100%;
margin: 0 auto;
}
.advertiser-delete-success-actions {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
align-items: center;
}
.account-dashboard-card {
border-radius: var(--radius-lg);
margin-bottom: 0;
}
.account-dashboard-header {
margin-bottom: 4px;
}
.account-dashboard-header__title {
margin: 0 0 4px;
}
.account-dashboard-section-title {
margin-top: 4px;
}
.account-dashboard-meta {
margin-bottom: 8px;
}
.account-dashboard-actions {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
align-items: center;
margin-bottom: 16px;
}
.account-dashboard-actions--top {
margin-bottom: 20px;
}
.account-dashboard-secondary-guidance {
margin-top: 16px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-page);
overflow: hidden;
}
.account-dashboard-secondary-guidance__body {
padding: 0 14px 14px;
}
.account-dashboard-secondary-guidance__body .account-dashboard-fb-pub-notice {
margin: 0;
}
.account-dashboard-actions--row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
font-size: 13px;
}
.account-dashboard-actions-sep {
color: var(--text-muted);
user-select: none;
}
.account-dashboard-actions-cell {
min-width: 200px;
}
[data-account-listing-share] {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
max-width: 100%;
}
[data-account-listing-share] .account-listing-share__trigger,
[data-account-listing-share] .account-listing-share__copy,
[data-account-listing-share] .account-listing-share__facebook {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
}
[data-account-listing-share] .account-listing-share__trigger,
[data-account-listing-share] .account-listing-share__copy {
border: 0;
padding: 0 4px;
background: transparent;
font: inherit;
cursor: pointer;
}
[data-account-listing-share] .account-listing-share__fallback {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
max-width: 100%;
}
[data-account-listing-share] .account-listing-share__fallback[hidden] {
display: none;
}
[data-account-listing-share] .account-listing-share__facebook {
color: #0866ff;
font-weight: 700;
}
[data-account-listing-share] .account-listing-share__trigger:focus-visible,
[data-account-listing-share] .account-listing-share__copy:focus-visible,
[data-account-listing-share] .account-listing-share__facebook:focus-visible {
outline: 3px solid rgba(11, 92, 171, 0.35);
outline-offset: 2px;
border-radius: 4px;
}
[data-account-listing-share] .account-listing-share__feedback {
flex-basis: 100%;
font-size: 12px;
line-height: 1.4;
}
.account-dashboard-empty {
padding: 20px 18px;
text-align: center;
border: 1px dashed var(--line);
border-radius: var(--radius-md);
background: var(--surface-page);
margin-bottom: 8px;
}
.account-dashboard-empty__title {
margin: 0 0 8px;
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
}
.account-dashboard-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.account-dashboard-title-col {
min-width: 160px;
max-width: 280px;
}
@media (min-width: 900px) {
.wrap--account-workspace-full .account-dashboard-title-col {
min-width: 200px;
max-width: min(440px, 38vw);
}
.wrap--account-workspace-full .account-dashboard-feature-cell,
.wrap--account-workspace-full .account-dashboard-promoted-cell {
max-width: min(300px, 24vw);
}
.wrap--account-workspace-full .account-dashboard-actions-cell {
min-width: 220px;
}
}
.account-dashboard-title-main {
font-weight: 600;
color: var(--text);
}

.account-dashboard-fb-pub--mobile {
display: none;
}
.account-dashboard-fb-pub--desktop {
display: block;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
max-width: 22rem;
}
.account-dashboard-fb-pub__heading {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text);
}
.account-dashboard-fb-pub__status-line {
margin: 0 0 6px;
font-size: 13px;
line-height: 1.4;
}
.account-dashboard-fb-pub__intro {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.45;
font-weight: 600;
}
.account-dashboard-fb-pub__hint {
margin: 0 0 8px;
font-size: 12px;
line-height: 1.45;
}
.account-dashboard-fb-pub__actions {
flex-wrap: wrap;
gap: 6px;
}
@media (max-width: 719px) {
[data-account-listing-share],
[data-account-listing-share] .account-listing-share__fallback {
width: 100%;
}
[data-account-listing-share] .account-listing-share__trigger,
[data-account-listing-share] .account-listing-share__copy,
[data-account-listing-share] .account-listing-share__facebook {
min-width: 44px;
}
.account-dashboard-fb-pub--mobile {
display: block;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
max-width: 100%;
}
.account-dashboard-fb-pub--desktop {
display: none;
}
.account-dashboard-fb-pub--mobile .account-dashboard-fb-pub__status {
white-space: normal;
max-width: 100%;
}
}
.account-dashboard-stats {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 14px;
margin: 8px 0 0;
padding: 8px 10px;
border-radius: var(--radius-sm);
background: var(--surface-elevated, rgba(0, 0, 0, 0.03));
border: 1px solid var(--line);
font-size: 12px;
line-height: 1.45;
max-width: 100%;
}
.account-dashboard-stat {
display: inline-flex;
align-items: baseline;
gap: 4px;
white-space: nowrap;
}
.account-dashboard-stat-label {
color: var(--text-muted);
font-weight: 600;
}
.account-dashboard-stat-value {
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.account-dashboard-stat-note {
margin: 6px 0 0;
width: 100%;
font-size: 11px;
line-height: 1.4;
}
.account-dashboard-status-badge {
display: inline-block;
}
.account-dashboard-flash {
margin: 0 0 16px;
padding: 12px 14px;
border-radius: var(--radius-md);
border: 1px solid rgba(34, 197, 94, 0.35);
background: rgba(22, 163, 74, 0.08);
color: var(--text);
}
.account-dashboard-flash__title {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
}
.account-dashboard-flash__sub {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: var(--text-muted);
}
.account-dashboard-submission-list {
width: 100%;
}
.account-dashboard-submission-item td {
vertical-align: middle;
}
.account-dashboard-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
.account-dashboard-badge--pending {
background: rgba(251, 191, 36, 0.25);
color: #92400e;
border: 1px solid rgba(245, 158, 11, 0.45);
}
.account-dashboard-badge--review {
background: rgba(251, 191, 36, 0.25);
color: #92400e;
border: 1px solid rgba(245, 158, 11, 0.45);
}
.account-dashboard-badge--ok {
background: rgba(34, 197, 94, 0.2);
color: #166534;
border: 1px solid rgba(34, 197, 94, 0.35);
}
.account-dashboard-badge--bad {
background: rgba(148, 163, 184, 0.35);
color: var(--text-muted);
border: 1px solid var(--line);
}
.account-dashboard-badge--muted {
background: var(--surface-page);
color: var(--text-muted);
border: 1px solid var(--line);
}
.account-dashboard-list {
margin: 8px 0 0;
padding-left: 1.2em;
line-height: 1.55;
}
.account-dashboard-table th {
font-weight: 700;
color: var(--text-muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.account-dashboard-table td {
padding: 10px 8px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.account-boosts {
max-width: 100%;
}
.account-boosts-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 640px) {
.account-boosts-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1100px) {
.wrap--account-workspace-full .account-boosts-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.account-boost-card {
margin: 0;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.account-boost-card-title {
margin: 0 0 6px;
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
color: var(--text);
}
.account-boost-card-meta {
display: block;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.45;
color: var(--text-muted);
}
.account-boost-card-body {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 10px;
}
.account-boost-card-body .account-boost-card-meta {
margin: 0;
font-size: 12px;
}
.account-boost-card-actions {
margin-bottom: 0;
}
.account-boost-status {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
font-size: 13px;
line-height: 1.45;
padding: 8px 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: var(--surface-page);
}
.account-boost-status--active {
border-color: rgba(34, 197, 94, 0.35);
background: rgba(22, 163, 74, 0.06);
color: var(--text);
font-weight: 600;
}
.account-boost-status--pending {
border-color: rgba(245, 158, 11, 0.45);
background: rgba(251, 191, 36, 0.12);
color: #92400e;
font-weight: 600;
}
.account-boost-status--promo {
border-color: rgba(37, 99, 235, 0.28);
background: var(--accent-soft);
color: var(--text);
font-weight: 600;
}
.account-boost-status--muted {
border-style: dashed;
color: var(--text-muted);
font-weight: 500;
}
.account-boost-empty {
margin: 0;
padding: 12px 14px;
border-radius: var(--radius-md);
border: 1px dashed var(--line);
background: var(--surface-page);
}
.visibility-package-label,
.visibility-package-meta {
color: var(--text-muted);
}
.account-package-recommendations {
max-width: 100%;
}
.account-package-recommendations-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 640px) {
.account-package-recommendations-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.account-package-card {
margin: 0;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.account-package-card-title {
margin: 0 0 6px;
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
color: var(--text);
}
.account-package-card-meta {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.45;
color: var(--text-muted);
}
.account-package-card-body {
margin-bottom: 12px;
}
.account-package-card-recommendation {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.5;
color: var(--text);
}
.account-package-card-recommendation:last-of-type {
margin-bottom: 0;
}
.account-package-card-bullets {
margin: 8px 0 0;
padding-left: 1.2em;
font-size: 14px;
line-height: 1.55;
color: var(--text-muted);
}
.account-package-card-bullets li {
margin-bottom: 4px;
}
.account-package-card-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin: 0;
}
.account-package-card-actions .cta.account-package-card-cta-primary {
font-size: 14px;
padding: 8px 14px;
}
.account-package-empty {
margin: 0;
padding: 12px 14px;
border-radius: var(--radius-md);
border: 1px dashed var(--line);
background: var(--surface-page);
font-size: 14px;
line-height: 1.5;
}
.home-rail-block-eyebrow {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.home-rail-block-actions {
margin-top: 8px;
}
.home-rail-slot-cta {
font-size: 14px;
padding: 8px 14px;
}
.rail-partner-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
.rail-partner-block__eyebrow {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.rail-partner-block__title {
margin: 0 0 4px;
}
.rail-partner-block__sub {
margin: 0;
}
.rail-partner-block__actions {
margin-top: 8px;
}
.rail-partner-block--fallback {
border-style: dashed;
border-color: var(--line);
background: var(--surface-page);
}
.partner-lead-summary {
margin-bottom: 18px;
padding: 14px 16px;
}
.partner-lead-summary__line {
margin: 0 0 8px;
font-size: 15px;
line-height: 1.45;
}
.partner-lead-summary__line--last {
margin-bottom: 0;
}
.partner-lead-form-wrap h1 {
margin-top: 0;
}
.partner-lead-eyebrow {
margin: 0 0 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
.partner-lead-intro {
margin-bottom: 16px;
}
.partner-lead-source-line {
margin: 0 0 10px;
font-size: 15px;
line-height: 1.45;
}
.partner-lead-context {
margin: 0;
padding-top: 2px;
}
.partner-lead-context-item {
margin: 0 0 6px;
font-size: 15px;
line-height: 1.45;
color: var(--text);
}
.partner-lead-context-item:last-child {
margin-bottom: 0;
}
.partner-lead-success h1 {
margin-top: 0;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.partner-lead-success p {
font-size: 16px;
line-height: 1.6;
color: var(--text);
max-width: 42rem;
}
.partner-lead-success-context {
font-size: 15px;
line-height: 1.5;
margin-top: 12px;
}
.admin-partner-role-label {
font-weight: 700;
color: var(--text);
}
.admin-partner-role-raw {
font-size: 12px;
font-weight: 500;
}
.partner-lead-form-grid {
display: grid;
gap: 0 18px;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.partner-lead-form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.partner-lead-form-grid .submission-form-field--wide {
grid-column: 1 / -1;
}
}
.partner-lead-form-actions {
margin-top: 8px;
}
.admin-partner-leads .admin-partner-lead-card {
padding: 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.admin-partner-leads .admin-partner-lead-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 14px;
margin-bottom: 10px;
font-size: 14px;
}
.admin-partner-lead-updated {
margin: -4px 0 10px;
font-size: 12px;
}
.admin-partner-lead-status-form {
margin: 0 0 12px;
}
.admin-partner-lead-status-actions {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 10px 14px;
}
.admin-partner-lead-status-select-wrap {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
font-weight: 600;
}
.admin-partner-lead-status-select {
min-width: 200px;
max-width: 100%;
padding: 8px 10px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
font-size: 14px;
}
.admin-partner-leads-filter-label {
margin: 0 0 8px;
font-size: 13px;
}
.admin-partner-leads-filters {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin-bottom: 20px;
}
.admin-partner-leads-filter {
display: inline-block;
padding: 8px 14px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--accent);
font-weight: 600;
font-size: 14px;
text-decoration: none;
}
.admin-partner-leads-filter:hover {
border-color: var(--line-strong);
background: var(--surface-page);
}
.admin-partner-leads-filter--active {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--text);
}
.admin-partner-leads-stats {
margin: 0 0 20px;
padding: 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.admin-partner-leads-stats-heading {
margin: 0 0 12px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
}
.admin-partner-leads-stat-note {
margin: 0 0 12px;
font-size: 13px;
}
.admin-partner-leads-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px 12px;
}
.admin-partner-leads-stat-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
min-width: 0;
}
.admin-partner-leads-stat-label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
line-height: 1.3;
}
.admin-partner-leads-stat-value {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
}
.admin-partner-leads-actions {
margin: 0 0 16px;
}
.admin-partner-leads-export {
display: inline-block;
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: var(--accent);
border: 1px solid var(--line);
padding: 8px 14px;
border-radius: var(--radius-md);
background: var(--surface-elevated);
}
.admin-partner-leads-export:hover {
border-color: var(--line-strong);
background: var(--surface-page);
}
.admin-partner-lead-source {
font-size: 14px;
}
.admin-partner-lead-source-meta {
font-weight: 400;
}
.admin-partner-leads-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.admin-mvp-note { font-size: 13px; margin: 0 0 12px; }
.admin-submissions-h1 {
margin: 0 0 16px;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
}
.admin-status-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin-bottom: 20px;
}
.admin-status-tab {
display: inline-block;
padding: 8px 14px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-elevated);
color: var(--accent);
font-weight: 600;
font-size: 14px;
text-decoration: none;
}
.admin-status-tab:hover {
border-color: var(--line-strong);
background: var(--surface-page);
}
.admin-status-tab--active {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--text);
}
.admin-submissions-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.admin-submission-card {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.admin-submission-card-body {
flex: 1;
min-width: 0;
}
.admin-submission-thumb-wrap {
flex-shrink: 0;
width: 88px;
height: 88px;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--line);
background: var(--surface-page);
}
.admin-submission-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.admin-submission-meta {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px 12px;
margin-bottom: 10px;
font-size: 14px;
}
.admin-status-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
.admin-status-badge--pending {
background: rgba(251, 191, 36, 0.25);
color: #92400e;
}
.admin-status-badge--approved {
background: rgba(34, 197, 94, 0.2);
color: #166534;
}
.admin-status-badge--rejected {
background: rgba(148, 163, 184, 0.35);
color: var(--text-muted);
}
.admin-status-badge--withdrawn {
background: rgba(251, 191, 36, 0.22);
color: #92400e;
border: 1px solid rgba(217, 119, 6, 0.35);
}
.admin-status-badge--new {
background: rgba(59, 130, 246, 0.2);
color: #1e40af;
}
.admin-status-badge--contacted {
background: rgba(251, 191, 36, 0.28);
color: #92400e;
}
.admin-status-badge--closed {
background: rgba(148, 163, 184, 0.35);
color: var(--text-muted);
}
.admin-status-badge--featured-active {
background: rgba(59, 130, 246, 0.22);
color: #1e40af;
border: 1px solid rgba(37, 99, 235, 0.38);
}
.admin-featured-block {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
max-width: 100%;
}
.admin-featured-block__meta {
display: flex;
flex-direction: column;
gap: 2px;
max-width: 100%;
}
.admin-featured-meta {
display: block;
font-size: 12px;
line-height: 1.35;
font-weight: 500;
color: var(--text-muted);
}
.admin-request-badge {
display: inline-block;
padding: 4px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3;
}
.admin-request-badge--featured {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(253, 224, 71, 0.88) 100%);
color: #78350f;
border: 1px solid rgba(217, 119, 6, 0.45);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07);
}
.admin-request-badge--promoted {
background: rgba(37, 99, 235, 0.2);
color: #1e3a8a;
border: 1px solid rgba(37, 99, 235, 0.35);
}
.admin-request-badge--promoted-active {
background: rgba(37, 99, 235, 0.12);
color: #1e40af;
border: 1px solid rgba(37, 99, 235, 0.28);
max-width: 100%;
}
.admin-request-badge--muted {
background: rgba(148, 163, 184, 0.18);
color: var(--text-muted);
border: 1px solid var(--line);
font-weight: 600;
max-width: 100%;
}
.admin-submission-contact {
margin: 0 0 6px;
font-size: 14px;
line-height: 1.45;
}
.admin-submission-keyfacts {
margin: 0 0 6px;
font-size: 15px;
line-height: 1.45;
color: var(--text);
}
.admin-submission-title {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
.admin-submission-excerpt {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
}
.admin-submissions-moderator-hint {
margin: 0 0 18px;
padding: 12px 14px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
max-width: 62rem;
}
.admin-submissions-moderator-hint__text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--text-muted);
}
.admin-submissions-moderator-hint__text strong {
color: var(--text);
font-weight: 600;
}
.admin-submission-meta-id {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.4;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 12px;
}
.admin-submission-code {
font-size: 13px;
font-weight: 600;
padding: 2px 8px;
border-radius: 6px;
background: rgba(148, 163, 184, 0.15);
color: var(--text);
}
.admin-submission-date {
font-size: 13px;
}
.admin-submission-card--pending-new {
border-left: 4px solid #2563eb;
}
.admin-submission-card--pending-update {
border-left: 4px solid #d97706;
background: linear-gradient(0deg, rgba(245, 158, 11, 0.04) 0%, var(--surface-elevated) 48px);
}
.admin-submission-workflow {
margin: 0 0 12px;
padding: 10px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-page);
}
.admin-submission-workflow--new {
border-color: rgba(37, 99, 235, 0.35);
background: rgba(59, 130, 246, 0.06);
}
.admin-submission-workflow--update {
border-color: rgba(217, 119, 6, 0.45);
background: rgba(245, 158, 11, 0.07);
}
.admin-submission-workflow--resolved {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
}
.admin-workflow-primary {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
}
.admin-submission-workflow--resolved .admin-workflow-primary {
margin-bottom: 0;
}
.admin-workflow-headline {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.01em;
}
.admin-workflow-sub {
display: block;
font-size: 13px;
line-height: 1.45;
max-width: 52ch;
}
.admin-workflow-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.admin-quality-compact {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 10px;
margin: 0 0 12px;
padding: 8px 10px;
border-radius: var(--radius-md);
border: 1px dashed rgba(180, 130, 40, 0.55);
background: rgba(200, 150, 45, 0.06);
max-width: 60ch;
}
.admin-quality-compact__label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #92400e;
}
.admin-quality-compact__pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.admin-quality-pill {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: 12px;
line-height: 1.35;
background: rgba(180, 120, 25, 0.18);
border: 1px solid rgba(140, 95, 20, 0.4);
color: var(--text);
}
.admin-quality-compact__note {
flex: 1 1 100%;
font-size: 12px;
line-height: 1.4;
}
.admin-submission-secondary-meta {
margin: 12px 0 0;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.admin-submission-actions {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
margin-top: 14px;
align-items: center;
}
.admin-submission-actions--stacked {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.admin-actions-moderation-primary {
width: 100%;
}
.admin-approve-submit-row {
margin-bottom: 10px;
}
.admin-feature-fieldset {
margin: 0;
padding: 10px 12px;
border-radius: var(--radius-md);
border: 1px dashed var(--line);
background: var(--surface-elevated);
}
.admin-feature-fieldset-legend {
padding: 0 6px;
font-size: 12px;
font-weight: 600;
}
.admin-actions-reject-wrap {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.admin-actions-needs-changes-wrap {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.admin-status-badge--needs-changes {
background: rgba(180, 120, 20, 0.15);
color: #92400e;
border: 1px solid rgba(180, 120, 20, 0.35);
}
.admin-submission-card--needs-changes {
border-left: 3px solid rgba(180, 120, 20, 0.55);
}
.admin-submission-workflow--needs-changes {
border-color: rgba(180, 120, 20, 0.35);
background: rgba(180, 120, 20, 0.06);
}
.admin-auth-note {
margin: 0 0 12px;
font-size: 13px;
}
.admin-auth-warning {
color: #92400e;
border-left: 3px solid #d97706;
padding: 8px 12px;
background: rgba(217, 119, 6, 0.08);
}
.admin-submission-images {
margin: 12px 0;
}
.admin-submission-images-summary {
margin: 0 0 8px;
font-size: 13px;
}
.admin-submission-images-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.admin-submission-image-tile {
margin: 0;
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--surface-elevated);
}
.admin-submission-image-tile--error {
border-color: rgba(180, 60, 50, 0.45);
}
.admin-submission-image-open {
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: zoom-in;
}
.admin-submission-image-thumb {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.admin-submission-image-meta {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 8px;
font-size: 11px;
line-height: 1.35;
}
.admin-submission-image-warn {
margin: 0;
padding: 6px 8px;
font-size: 11px;
color: #b91c1c;
background: rgba(180, 60, 50, 0.08);
}
.admin-submission-video {
margin: 12px 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-elevated);
}
.admin-submission-video__title {
margin: 0 0 8px;
}
.admin-video-preview {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-start;
margin: 0 0 10px;
}
.admin-video-preview__thumb img {
display: block;
width: 160px;
height: 120px;
object-fit: cover;
border-radius: 6px;
background: #0f172a;
}
.admin-video-preview__meta {
flex: 1 1 220px;
min-width: 0;
font-size: 13px;
line-height: 1.45;
}
.admin-video-preview__meta p {
margin: 0 0 6px;
overflow-wrap: anywhere;
}
.admin-video-status {
font-weight: 700;
}
.admin-video-status--approved { color: #166534; }
.admin-video-status--hidden { color: #92400e; }
.admin-video-suggestion {
padding: 6px 8px;
border-left: 3px solid var(--accent, #2563eb);
background: var(--accent-soft, #eff6ff);
}
.admin-video-approve-decision {
margin: 0 0 10px;
font-size: 13px;
font-weight: 600;
}
.admin-video-form {
display: grid;
gap: 8px;
max-width: 640px;
}
.admin-video-form__label {
font-size: 13px;
font-weight: 600;
}
.admin-video-form input[type="url"] {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.admin-video-form__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.admin-video-form__hint {
margin: 0;
font-size: 12px;
line-height: 1.45;
}
.admin-image-check-summary {
margin: 0 0 10px;
padding: 8px 10px;
border-radius: var(--radius-md);
background: var(--surface-elevated);
border: 1px solid var(--line);
font-size: 12px;
line-height: 1.5;
max-width: 90ch;
}
.admin-image-check {
margin: 0;
padding: 6px 8px;
font-size: 12px;
line-height: 1.4;
overflow-wrap: anywhere;
border-top: 1px solid var(--line);
}
.admin-image-check__headline {
margin: 0;
}
.admin-image-check__icon {
margin-right: 2px;
}
.admin-image-check__manual {
display: inline-block;
margin-left: 2px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.admin-image-check__reasons {
margin: 4px 0 0;
padding-left: 1.1em;
}
.admin-image-check--likely {
background: #fef2f2;
color: #7f1d1d;
border-left: 4px solid #b91c1c;
}
.admin-image-check--review,
.admin-image-check--unreadable {
background: #fffbeb;
color: #78350f;
border-left: 4px solid #b45309;
}
.admin-image-check--pending {
color: var(--text-muted);
font-style: italic;
}
.admin-image-picker-bar {
margin: 0 0 10px;
padding: 10px 12px;
border: 1px solid var(--line);
border-left: 3px solid var(--accent, #2563eb);
border-radius: var(--radius-md);
background: var(--surface-elevated);
}
.admin-image-picker-notice {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.45;
max-width: 72ch;
}
.admin-image-picker-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.admin-image-picker-count {
font-size: 13px;
font-weight: 600;
}
.admin-image-pick {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 6px 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border-bottom: 1px solid var(--line);
}
.admin-image-pick input {
width: 20px;
height: 20px;
margin: 0;
flex: 0 0 auto;
}
.admin-image-pick input:focus-visible {
outline: 3px solid var(--accent, #2563eb);
outline-offset: 2px;
}
.admin-image-pick-state {
margin: 0;
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid var(--line);
}
.admin-image-pick-state--hidden,
.admin-submission-image-tile--unpicked .admin-image-pick {
color: #b91c1c;
background: rgba(180, 60, 50, 0.08);
}
.admin-submission-image-tile--unpicked .admin-submission-image-thumb {
opacity: 0.45;
}
.admin-moderation-hints {
margin: 10px 0;
padding: 10px 12px;
border-radius: var(--radius-md);
border: 1px solid rgba(180, 120, 20, 0.35);
background: rgba(180, 120, 20, 0.06);
}
.admin-moderation-hints__list {
margin: 6px 0 0;
padding-left: 1.15rem;
font-size: 13px;
line-height: 1.45;
}
.admin-moderation-checklist {
margin: 12px 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.admin-moderation-checklist legend {
font-size: 13px;
font-weight: 600;
padding: 0 4px;
}
.admin-moderation-checklist-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 6px 10px;
margin: 8px 0 10px;
}
.admin-moderation-check {
font-size: 13px;
line-height: 1.35;
}
.admin-moderation-feedback__text {
margin: 6px 0 0;
padding: 10px 12px;
border-radius: var(--radius-md);
background: var(--surface-elevated);
border: 1px solid var(--line);
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
font-family: inherit;
}
.admin-needs-changes-textarea,
.admin-template-actions {
margin-top: 8px;
}
.admin-template-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.admin-submission-lightbox {
padding: 0;
border: 0;
max-width: min(96vw, 1100px);
width: 96vw;
background: rgba(0, 0, 0, 0.92);
color: #fff;
}
.admin-submission-lightbox::backdrop {
background: rgba(0, 0, 0, 0.65);
}
.admin-submission-lightbox-inner {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: 1fr auto;
align-items: center;
min-height: min(80vh, 720px);
padding: 12px;
gap: 8px;
}
.admin-submission-lightbox-img {
grid-column: 2;
max-width: 100%;
max-height: min(72vh, 680px);
width: auto;
height: auto;
margin: 0 auto;
object-fit: contain;
}
.admin-submission-lightbox-prev,
.admin-submission-lightbox-next,
.admin-submission-lightbox-close {
border: 0;
background: rgba(255, 255, 255, 0.12);
color: #fff;
border-radius: 8px;
cursor: pointer;
font-size: 28px;
line-height: 1;
padding: 8px 12px;
}
.admin-submission-lightbox-close {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
font-size: 22px;
}
.admin-submission-lightbox-footer {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-top: 8px;
font-size: 13px;
}
.admin-submission-lightbox-open {
color: #fff;
}
@media (max-width: 640px) {
.admin-submission-lightbox-inner {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto;
}
.admin-submission-lightbox-img {
grid-column: 1;
}
.admin-submission-lightbox-prev,
.admin-submission-lightbox-next {
display: none;
}
.admin-submission-lightbox-footer {
flex-direction: column;
align-items: flex-start;
}
}
.admin-pending-update-note {
margin: 0 0 10px;
max-width: 52ch;
font-size: 13px;
line-height: 1.45;
}
.admin-actions-marketing-block {
padding: 10px 0 0;
border-top: 1px dashed var(--line);
margin-top: 4px;
}
.admin-actions-marketing-label {
margin: 0 0 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
}
.admin-action-form {
display: inline-block;
margin: 0;
}
.admin-approve-btn,
.admin-reject-btn {
margin: 0;
}
.admin-reviewed-meta {
margin-top: 12px;
font-size: 14px;
}
.admin-empty {
padding: 20px;
border-radius: var(--radius-lg);
border: 1px dashed var(--line);
text-align: center;
}
.admin-visibility-requests {
max-width: 100%;
}
.admin-visibility-request-summary {
margin: 18px 0 20px;
}
.admin-visibility-requests-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
margin-bottom: 8px;
}
.admin-visibility-request-filter {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
color: var(--text-muted);
border: 1px solid var(--line);
background: var(--surface-elevated);
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.admin-visibility-request-filter:hover {
color: var(--text);
border-color: var(--line-strong);
}
.admin-visibility-request-filter--active {
color: var(--text);
border-color: var(--accent);
background: var(--accent-soft);
}
.admin-visibility-request-card {
padding: 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-elevated);
box-shadow: var(--shadow-sm);
}
.admin-visibility-request-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
font-size: 14px;
}
.admin-entitlement-lifecycle-badge {
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface-page);
color: var(--text-muted);
}
.admin-entitlement-lifecycle-badge--activated {
border-color: rgba(37, 99, 235, 0.45);
background: var(--accent-soft);
color: var(--accent);
}
.admin-entitlement-lifecycle-badge--expired {
border-style: dashed;
}
.admin-entitlement-lifecycle-badge--rejected {
border-color: rgba(185, 28, 28, 0.35);
color: var(--danger);
}
.admin-lifecycle-mini-btn {
font-size: 12px !important;
padding: 4px 10px !important;
line-height: 1.3;
margin: 0;
}
.visibility-lifecycle-line {
color: var(--text-muted);
}
.admin-visibility-request-states {
margin-top: 12px;
}
.admin-visibility-request-states--intent {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
}
.admin-visibility-request-states--live {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.admin-visibility-request-actions {
display: flex;
flex-wrap: wrap;
gap: 8px 4px;
align-items: center;
margin-top: 14px;
font-size: 14px;
}
@media (max-width: 640px) {
.wrap { padding: 28px 16px 44px; }
.hero { padding-top: 28px; }
}