/* Generated by infra/scripts/build-portal-styles.mjs. Do not edit directly. */
/* source: apps/ui-system/public/v17-tokens.css */
:root {
color-scheme: light;
--ui-color-bg-page: #f8f5ed;
--ui-color-bg-subtle: #f3eee2;
--ui-color-surface: #fffdf8;
--ui-color-surface-raised: #ffffff;
--ui-color-text: #242923;
--ui-color-heading: #173d31;
--ui-color-muted: #6f7972;
--ui-color-brand: #167347;
--ui-color-brand-strong: #0f5d3a;
--ui-color-brand-soft: #e4f1e8;
--ui-color-accent-wheat: #efc26f;
--ui-color-accent-terracotta: #d66f43;
--ui-color-accent-sage: #a8bea5;
--ui-color-info: #287a99;
--ui-color-success: #167347;
--ui-color-warning: #a36a12;
--ui-color-danger: #b24c3d;
--ui-color-line: rgba(34, 69, 54, 0.1);
--ui-color-line-strong: rgba(34, 69, 54, 0.18);
--ui-color-focus: #0f6f45;
--ui-color-overlay: rgba(14, 39, 30, 0.56);
--ui-font-sans:
    -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC',
    sans-serif;
--ui-font-size-xs: 0.75rem;
--ui-font-size-sm: 0.875rem;
--ui-font-size-md: 1rem;
--ui-font-size-lg: 1.125rem;
--ui-font-size-xl: 1.375rem;
--ui-font-size-2xl: clamp(1.625rem, 2.4vw, 2.25rem);
--ui-font-size-display: clamp(2rem, 4vw, 3.5rem);
--ui-line-height-tight: 1.25;
--ui-line-height-body: 1.65;
--ui-font-weight-regular: 400;
--ui-font-weight-medium: 600;
--ui-font-weight-bold: 800;
--ui-space-1: 0.25rem;
--ui-space-2: 0.5rem;
--ui-space-3: 0.75rem;
--ui-space-4: 1rem;
--ui-space-5: 1.25rem;
--ui-space-6: 1.5rem;
--ui-space-8: 2rem;
--ui-space-10: 2.5rem;
--ui-space-12: 3rem;
--ui-space-16: 4rem;
--ui-content-sm: 720px;
--ui-content-md: 1040px;
--ui-content-lg: 1360px;
--ui-sidebar-width: 260px;
--ui-header-height: 76px;
--ui-radius-sm: 10px;
--ui-radius-md: 16px;
--ui-radius-lg: 22px;
--ui-radius-xl: 28px;
--ui-radius-pill: 999px;
--ui-shadow-sm: 0 6px 18px rgba(55, 66, 48, 0.06);
--ui-shadow-md: 0 12px 34px rgba(55, 66, 48, 0.08);
--ui-shadow-lg: 0 22px 58px rgba(42, 64, 48, 0.14);
--ui-motion-fast: 120ms;
--ui-motion-base: 200ms;
--ui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ui-control-height-sm: 36px;
--ui-control-height-md: 44px;
--ui-control-height-lg: 52px;
--ui-touch-target: 44px;
--ui-z-sticky: 20;
--ui-z-drawer: 80;
--ui-z-modal: 100;
--ui-z-toast: 120;
}
[data-ui-surface='admin'],
[data-ui-shell='admin'],
[data-ui-shell='region-admin'] {
--ui-color-bg-page: #f4f7f5;
--ui-color-bg-subtle: #edf2ef;
--ui-color-surface: #ffffff;
--ui-color-heading: #153d30;
--ui-color-text: #172d26;
--ui-color-muted: #66766e;
--ui-color-brand: #176b45;
--ui-color-brand-strong: #105137;
--ui-color-brand-soft: #eaf4ee;
--ui-radius-lg: 18px;
--ui-radius-xl: 22px;
--ui-shadow-md: 0 10px 28px rgba(23, 56, 42, 0.08);
}
@media (prefers-reduced-motion: reduce) {
:root {
--ui-motion-fast: 0ms;
--ui-motion-base: 0ms;
}
}

/* source: apps/portal-web/public/v10-tokens.css */
:root {
--v10-bg-page: #f8f6f1;
--v10-bg-surface: #fffefb;
--v10-bg-muted: #f1ede4;
--v10-brand-900: #244a3a;
--v10-brand-700: #2f6048;
--v10-brand-100: #e8f0e8;
--v10-accent-terracotta: #c96b42;
--v10-accent-wheat: #d7a94b;
--v10-accent-sage: #a8b9a5;
--v10-text-primary: #252823;
--v10-text-secondary: #74766f;
--v10-border-soft: #e8e3d9;
--v10-category-merchant: #e4efe8;
--v10-category-service: #e4eef0;
--v10-category-agriculture: #f3ead9;
--v10-category-secondhand: #f4ead1;
--v10-category-jobs: #ece8f3;
--v10-category-runner: #f2e4df;
--v10-category-outdoor: #e0eee6;
--v10-category-more: #eeece6;
--v10-space-1: 4px;
--v10-space-2: 8px;
--v10-space-3: 12px;
--v10-space-4: 16px;
--v10-space-5: 20px;
--v10-space-6: 24px;
--v10-space-8: 32px;
--v10-radius-sm: 10px;
--v10-radius-md: 16px;
--v10-radius-lg: 24px;
--v10-shadow-soft: 0 16px 48px rgba(54, 61, 48, 0.07);
}

/* source: apps/portal-web/public/v14-tokens.css */
:root {
--v14-home-bg: #f7f3e9;
--v14-home-surface: #fffdf8;
--v14-home-surface-muted: #f1eadc;
--v14-home-ink: #18352b;
--v14-home-muted: #65766d;
--v14-home-brand: #245f47;
--v14-home-brand-soft: #e1ebdf;
--v14-home-terracotta: #b76543;
--v14-home-wheat: #d7b866;
--v14-home-line: rgba(36, 95, 71, 0.14);
--v14-home-radius: 18px;
--v14-home-shadow: 0 12px 32px rgba(58, 70, 52, 0.08);
--v14-home-entry-ratio: 2fr;
--v14-home-feed-ratio: 3fr;
}

/* source: apps/portal-web/public/v15-tokens.css */
:root {
--v15-page: #f8f5ed;
--v15-surface: #fffdf8;
--v15-surface-soft: #f3eee2;
--v15-ink: #173d31;
--v15-text: #242923;
--v15-muted: #6f7972;
--v15-brand: #167347;
--v15-brand-strong: #0f5d3a;
--v15-brand-soft: #e4f1e8;
--v15-sage: #a8bea5;
--v15-wheat: #efc26f;
--v15-terracotta: #d66f43;
--v15-line: rgba(34, 69, 54, 0.1);
--v15-line-strong: rgba(34, 69, 54, 0.16);
--v15-radius-sm: 12px;
--v15-radius-md: 16px;
--v15-radius-lg: 22px;
--v15-shadow-soft: 0 12px 34px rgba(55, 66, 48, 0.07);
--v15-shadow-float: 0 18px 44px rgba(42, 64, 48, 0.12);
--v15-icon-size-desktop: 64px;
--v15-icon-size-mobile: 50px;
--v15-content-max: 1360px;
}

/* source: apps/portal-web/public/styles.css */
:root {
--color-forest-900: #103f2e;
--color-forest-700: #176b45;
--color-forest-100: #eaf4ee;
--color-wheat-50: #fbfaf5;
--color-clay-600: #bd612f;
--color-rice-500: #d5aa45;
--color-ink-900: #18332a;
--color-ink-600: #5a6f66;
--color-line: #dfe7e1;
--ink: var(--color-ink-900);
--soft: var(--color-ink-600);
--forest: var(--color-forest-700);
--forest-dark: var(--color-forest-900);
--mint: var(--color-forest-100);
--paper: var(--color-wheat-50);
--line: var(--color-line);
--orange: var(--color-clay-600);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--ink);
background: var(--paper);
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
-webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
font: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
a {
color: inherit;
text-decoration: none;
}
svg {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.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;
}
.site-header {
position: sticky;
top: 0;
z-index: var(--v19-z-sticky, 20);
border-bottom: 1px solid rgba(24, 51, 42, 0.08);
background: rgba(255, 254, 250, 0.94);
backdrop-filter: blur(16px);
}
.header-inner {
max-width: 1180px;
height: 76px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
gap: 48px;
}
.brand {
min-width: 245px;
display: flex;
align-items: center;
gap: 12px;
}
.brand-mark {
width: 43px;
height: 43px;
display: grid;
place-items: center;
border-radius: 13px;
color: white;
background: var(--forest);
}
.brand-mark svg {
width: 31px;
height: 31px;
}
.brand strong,
.brand small,
.visual-caption strong,
.visual-caption small,
.service-card strong,
.service-card small,
.phase strong,
.phase small {
display: block;
}
.brand strong {
font-size: 17px;
letter-spacing: 0.04em;
}
.brand small {
margin-top: 3px;
color: #7a8b84;
font-size: 10px;
letter-spacing: 0.08em;
}
.top-nav {
margin-right: auto;
display: flex;
align-items: center;
gap: 34px;
}
.top-nav a {
position: relative;
padding: 27px 0 24px;
color: #66776f;
font-size: 14px;
font-weight: 600;
}
.top-nav a:hover,
.top-nav a.active {
color: var(--forest);
}
.top-nav a.active::after {
content: '';
position: absolute;
left: 50%;
bottom: 17px;
width: 18px;
height: 2px;
border-radius: 2px;
background: var(--forest);
transform: translateX(-50%);
}
.login-button {
min-width: 112px;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #cbd9d1;
border-radius: 11px;
color: var(--forest-dark);
background: white;
cursor: pointer;
font-size: 13px;
font-weight: 650;
}
.login-button:hover {
border-color: var(--forest);
background: var(--mint);
}
.login-button svg {
width: 18px;
height: 18px;
}
.mobile-menu-toggle,
.mobile-nav {
display: none;
}
.mobile-menu-toggle {
width: 40px;
height: 40px;
padding: 10px;
border: 1px solid #d7e1db;
border-radius: 11px;
background: white;
cursor: pointer;
}
.mobile-menu-toggle span {
width: 100%;
height: 2px;
display: block;
border-radius: 2px;
background: var(--forest-dark);
transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.mobile-menu-toggle span + span {
margin-top: 5px;
}
.mobile-menu-toggle[aria-expanded='true'] span:first-child {
transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded='true'] span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle[aria-expanded='true'] span:last-child {
transform: translateY(-7px) rotate(-45deg);
}
.hero {
max-width: 1180px;
min-height: 535px;
margin: 0 auto;
padding: 70px 24px 48px;
display: grid;
grid-template-columns: 1.14fr 0.86fr;
align-items: center;
gap: 62px;
}
.eyebrow {
display: flex;
align-items: center;
gap: 9px;
color: var(--forest);
font-size: 12px;
font-weight: 750;
letter-spacing: 0.12em;
}
.eyebrow span {
width: 22px;
height: 2px;
background: var(--orange);
}
.hero h1 {
margin: 18px 0 20px;
font-family: 'Songti SC', 'STSong', serif;
font-size: clamp(42px, 5vw, 62px);
line-height: 1.16;
letter-spacing: -0.04em;
}
.hero h1 em {
color: var(--forest);
font-style: normal;
}
.hero-copy {
max-width: 590px;
margin: 0;
color: var(--soft);
font-size: 16px;
line-height: 1.85;
}
.search-panel {
margin-top: 32px;
padding: 6px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
border: 1px solid #d6e0d9;
border-radius: 15px;
background: white;
box-shadow: 0 12px 35px rgba(31, 67, 54, 0.09);
}
.location-picker {
padding: 12px 14px;
display: flex;
align-items: center;
gap: 7px;
border: 0;
border-right: 1px solid var(--line);
color: var(--forest-dark);
background: transparent;
cursor: pointer;
font-weight: 650;
white-space: nowrap;
}
.location-picker svg,
.search-field svg {
width: 19px;
height: 19px;
flex: 0 0 auto;
}
.search-field {
min-width: 0;
padding: 0 14px;
display: flex;
align-items: center;
gap: 9px;
color: #85968e;
}
.search-field input {
width: 100%;
padding: 12px 0;
border: 0;
outline: 0;
color: var(--ink);
background: transparent;
font-size: 14px;
}
.search-field input::placeholder {
color: #9baaa3;
}
.search-button {
padding: 12px 23px;
border: 0;
border-radius: 10px;
color: white;
background: var(--forest);
cursor: pointer;
font-weight: 700;
}
.search-button:hover,
.submit-login:hover {
background: var(--forest-dark);
}
.status-line {
margin-top: 16px;
display: flex;
align-items: center;
gap: 8px;
color: #718279;
font-size: 12px;
}
.status-line a {
margin-left: 6px;
color: var(--forest);
font-weight: 700;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #c5cec9;
}
.status-dot.online {
background: #30a568;
box-shadow: 0 0 0 4px rgba(48, 165, 104, 0.12);
}
.status-dot.offline {
background: #c44d3c;
}
.unified-search-section {
max-width: 1180px;
margin: 0 auto 34px;
padding: 26px;
border: 1px solid var(--line);
border-radius: 24px;
background: #fff;
box-shadow: 0 16px 45px rgba(31, 67, 54, 0.08);
}
.unified-search-heading,
.unified-search-actions,
.unified-search-card-head,
.unified-search-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.unified-search-heading h2 {
margin: 4px 0;
color: var(--forest-dark);
}
.unified-search-heading p,
.unified-search-card p,
.unified-search-empty p {
margin: 0;
color: var(--soft);
line-height: 1.7;
}
.unified-search-actions label {
display: grid;
gap: 6px;
color: var(--soft);
font-size: 12px;
font-weight: 700;
}
.unified-search-actions select,
.unified-search-actions button {
min-height: 40px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
color: var(--forest-dark);
font-weight: 700;
}
.unified-search-types {
min-height: 24px;
margin: 18px 0 12px;
color: var(--soft);
font-size: 13px;
}
.unified-search-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.unified-search-card {
display: grid;
gap: 10px;
padding: 18px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fbfdfb;
}
.unified-search-card h3 {
margin: 0;
color: var(--ink);
font-size: 17px;
}
.unified-search-card-type {
padding: 4px 8px;
border-radius: 999px;
background: #e9f4ed;
color: var(--forest);
font-size: 12px;
font-weight: 800;
}
.unified-search-card time {
color: #829188;
font-size: 12px;
}
.unified-search-reputation {
width: fit-content;
padding: 5px 8px;
border-radius: 999px;
color: #8c642a;
background: #f8edcf;
font-size: 10px;
font-weight: 750;
}
.unified-search-card-foot strong {
color: var(--orange);
}
.unified-search-card-foot button {
border: 0;
border-radius: 9px;
padding: 9px 14px;
background: var(--forest);
color: #fff;
cursor: pointer;
font-weight: 700;
}
.unified-search-empty {
padding: 28px;
border-radius: 14px;
background: #f6f8f6;
text-align: center;
}
.trust-points {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.trust-points span {
padding: 7px 10px;
border: 1px solid #dce8e0;
border-radius: 999px;
color: #5f766b;
background: rgba(255, 255, 255, 0.72);
font-size: 11px;
font-weight: 650;
}
.trust-points span::before {
content: '✓';
margin-right: 5px;
color: var(--forest);
font-weight: 900;
}
.hero-visual {
position: relative;
min-height: 390px;
}
.landscape {
position: absolute;
inset: 10px 0 42px;
overflow: hidden;
border-radius: 38% 38% 28px 28px;
background: #f1ead9;
}
.sun {
position: absolute;
top: 47px;
right: 68px;
width: 46px;
height: 46px;
border-radius: 50%;
background: #e8a34c;
}
.hill {
position: absolute;
border-radius: 50% 50% 0 0;
}
.hill-back {
right: -75px;
bottom: 112px;
width: 430px;
height: 210px;
background: #abc8ad;
transform: rotate(-4deg);
}
.hill-front {
left: -100px;
bottom: 78px;
width: 480px;
height: 220px;
background: #6a9b74;
transform: rotate(7deg);
}
.road {
position: absolute;
z-index: 2;
left: 50%;
bottom: -60px;
width: 110px;
height: 260px;
border-radius: 50%;
background: #e9d7b7;
transform: translateX(-20%) rotate(18deg);
}
.house {
position: absolute;
z-index: 3;
width: 62px;
height: 49px;
border-radius: 3px;
background: #f8f0df;
}
.house::before {
content: '';
position: absolute;
left: -7px;
top: -27px;
border-left: 38px solid transparent;
border-right: 38px solid transparent;
border-bottom: 31px solid #b84c3e;
}
.house span {
position: absolute;
left: 24px;
bottom: 0;
width: 17px;
height: 27px;
background: #7e5e44;
}
.house-a {
left: 87px;
bottom: 101px;
}
.house-b {
right: 83px;
bottom: 91px;
transform: scale(0.78);
}
.tree {
position: absolute;
z-index: 4;
width: 21px;
height: 53px;
border-radius: 50% 50% 45% 45%;
background: #2f704b;
}
.tree::after {
content: '';
position: absolute;
left: 9px;
bottom: -20px;
width: 4px;
height: 24px;
background: #70533c;
}
.tree-a {
left: 51px;
bottom: 95px;
}
.tree-b {
right: 43px;
bottom: 117px;
transform: scale(0.82);
}
.field-lines {
position: absolute;
z-index: 1;
left: -15%;
right: -15%;
bottom: 0;
height: 103px;
background: repeating-linear-gradient(9deg, #d7bb74 0 5px, #ead597 5px 16px);
}
.visual-caption {
position: absolute;
z-index: 6;
right: -8px;
bottom: 15px;
width: 230px;
padding: 15px 17px;
display: flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(23, 107, 69, 0.12);
border-radius: 15px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 13px 32px rgba(34, 64, 52, 0.13);
}
.caption-icon {
width: 39px;
height: 39px;
display: grid;
place-items: center;
border-radius: 11px;
color: var(--forest);
background: var(--mint);
}
.caption-icon svg {
width: 23px;
height: 23px;
}
.visual-caption strong {
font-size: 13px;
}
.visual-caption small {
margin-top: 4px;
color: #809087;
font-size: 10px;
}
.service-section {
padding: 78px max(24px, calc((100% - 1132px) / 2)) 86px;
background: #f7f9f5;
}
.section-heading {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
}
.section-heading h2,
.progress-copy h2 {
margin: 9px 0 0;
font-family: 'Songti SC', 'STSong', serif;
font-size: 30px;
letter-spacing: -0.03em;
}
.section-kicker {
color: var(--forest);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.15em;
}
.section-heading > p {
max-width: 360px;
margin: 0 0 3px;
color: #7a8b83;
font-size: 13px;
line-height: 1.7;
text-align: right;
}
.section-actions {
max-width: 410px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
}
.section-actions p {
margin: 0;
color: #7a8b83;
font-size: 13px;
line-height: 1.7;
text-align: right;
}
.publish-button {
flex: 0 0 auto;
padding: 10px 15px;
border: 1px solid var(--forest);
border-radius: 10px;
color: white;
background: var(--forest);
cursor: pointer;
font-size: 12px;
font-weight: 750;
}
.publish-button:hover {
background: var(--forest-dark);
}
.service-grid {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.service-card {
position: relative;
min-height: 118px;
padding: 21px;
display: flex;
align-items: center;
gap: 15px;
border: 1px solid #e2e8e3;
border-radius: 15px;
color: var(--ink);
background: white;
cursor: pointer;
text-align: left;
transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}
.service-card:hover {
transform: translateY(-3px);
border-color: #a9c6b4;
}
.service-icon {
width: 47px;
height: 47px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 13px;
}
.service-icon svg {
width: 26px;
height: 26px;
}
.service-icon.green {
color: #28734e;
background: #e5f2e9;
}
.service-icon.blue {
color: #356f83;
background: #e5f0f2;
}
.service-icon.orange {
color: #a85b2e;
background: #f7ebdf;
}
.service-icon.gold {
color: #927026;
background: #f6efd9;
}
.service-icon.outdoor {
color: #176b50;
background: #dcefe4;
}
.service-icon.purple {
color: #675d91;
background: #eeeaf5;
}
.service-icon.red {
color: #9a4e42;
background: #f5e8e4;
}
.service-icon.circle {
color: #315f9b;
background: #e7eef9;
}
.service-icon.teal {
color: #087d70;
background: #dff7f1;
}
.errand-workspace {
display: grid;
align-items: start;
grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.8fr);
gap: 18px;
margin: 18px 0 24px;
}
.errand-workspace .publish-form {
align-content: start;
margin: 0;
border: 1px solid #dce8e4;
border-radius: 18px;
padding: 18px;
background: #fbfefd;
}
.errand-workspace h3,
.workspace-title {
margin: 0 0 14px;
color: #183d37;
}
.workspace-title {
margin-top: 22px;
}
.errand-route {
display: flex;
align-items: center;
gap: 8px;
color: #47645f;
font-size: 13px;
}
.errand-route b {
color: #087d70;
}
@media (max-width: 780px) {
.errand-workspace {
grid-template-columns: 1fr;
}
}
.service-card strong {
font-size: 15px;
}
.service-card small {
margin-top: 6px;
color: #819087;
font-size: 11px;
}
.service-card i {
position: absolute;
top: 13px;
right: 13px;
padding: 4px 7px;
border-radius: 6px;
color: #7b8982;
background: #f1f3f1;
font-size: 9px;
font-style: normal;
}
.service-card i.ready {
color: var(--forest);
background: #e5f2e9;
font-weight: 700;
}
.catalog-panel {
margin-top: 28px;
overflow: hidden;
border: 1px solid #dfe8e1;
border-radius: 18px;
background: white;
}
.catalog-heading {
min-height: 68px;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #edf1ee;
}
.catalog-heading div {
display: grid;
gap: 4px;
}
.catalog-heading span {
color: #84938b;
font-size: 10px;
font-weight: 750;
letter-spacing: 0.12em;
}
.catalog-heading strong {
font-size: 14px;
}
.catalog-heading button {
padding: 7px 11px;
border: 1px solid #d5e0d9;
border-radius: 8px;
color: var(--forest);
background: #f7faf8;
cursor: pointer;
font-size: 11px;
font-weight: 700;
}
.catalog-heading button:disabled {
cursor: wait;
opacity: 0.6;
}
.catalog-filters {
padding: 12px 20px;
display: flex;
gap: 8px;
overflow-x: auto;
border-bottom: 1px solid #edf1ee;
background: #fbfcfb;
scrollbar-width: none;
}
.catalog-filters::-webkit-scrollbar {
display: none;
}
.catalog-filters button {
min-width: max-content;
padding: 8px 12px;
border: 1px solid transparent;
border-radius: 999px;
color: #6d8177;
background: transparent;
cursor: pointer;
font-size: 11px;
font-weight: 700;
}
.catalog-filters button:hover {
color: var(--forest);
background: #edf6f0;
}
.catalog-filters button.active {
border-color: #bcd5c6;
color: white;
background: var(--forest);
}
.catalog-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.catalog-card {
min-height: 160px;
padding: 22px;
border-right: 1px solid #edf1ee;
border-bottom: 1px solid #edf1ee;
}
.catalog-card:nth-child(3n) {
border-right: 0;
}
.catalog-card .catalog-meta {
display: flex;
justify-content: space-between;
align-items: center;
color: #75877e;
font-size: 10px;
}
.catalog-card .catalog-type {
padding: 4px 7px;
border-radius: 6px;
color: var(--forest);
background: var(--mint);
font-weight: 750;
}
.catalog-card h3 {
margin: 16px 0 8px;
font-size: 17px;
}
.catalog-card p {
min-height: 36px;
margin: 0;
overflow: hidden;
color: #74867d;
font-size: 12px;
line-height: 1.55;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.catalog-card > strong,
.catalog-card-footer > strong {
margin-top: 15px;
display: block;
color: #b05d2f;
font-size: 16px;
}
.catalog-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.catalog-card-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 7px;
}
.catalog-card-footer button,
.order-actions button {
padding: 9px 13px;
border: 0;
border-radius: 9px;
color: white;
background: var(--forest);
cursor: pointer;
font-size: 11px;
font-weight: 750;
}
.catalog-card-footer button.secondary {
border: 1px solid #d8e4dc;
color: var(--forest);
background: #f5f9f6;
}
.catalog-card-footer button.secondary:hover {
border-color: #aac9b7;
background: #eaf4ee;
}
.order-actions button.secondary {
color: #786156;
background: #f3ece7;
}
.catalog-empty {
padding: 42px 24px;
text-align: center;
}
.catalog-empty > span {
width: 42px;
height: 42px;
margin: 0 auto 13px;
display: grid;
place-items: center;
border-radius: 50%;
color: #84938b;
background: #eef2ef;
font-size: 11px;
font-weight: 800;
}
.catalog-empty strong {
display: block;
font-size: 14px;
}
.catalog-empty p {
max-width: 560px;
margin: 8px auto 0;
color: #7b8c83;
font-size: 11px;
line-height: 1.7;
}
.local-circle-section {
max-width: 1180px;
margin: 0 auto;
padding: 92px 24px 20px;
}
.local-circle-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 32px;
}
.local-circle-heading h2 {
margin: 10px 0 10px;
font-family: 'Songti SC', 'STSong', serif;
font-size: clamp(34px, 4vw, 48px);
}
.local-circle-heading p {
max-width: 680px;
margin: 0;
color: #71837a;
font-size: 13px;
line-height: 1.75;
}
.local-circle-actions,
.local-circle-channels,
.local-circle-categories,
.local-circle-nearby {
display: flex;
gap: 9px;
}
.local-circle-nearby {
align-items: center;
padding-left: 10px;
border-left: 1px solid #d9e3dd;
}
.local-circle-nearby > span {
color: #6f8078;
font-size: 10px;
font-weight: 800;
}
.local-circle-actions button,
.local-circle-controls button,
.local-circle-discovery-tools button,
.local-circle-discovery-tools select,
.local-circle-card-footer button {
min-height: 41px;
padding: 0 14px;
border: 1px solid #cfdcd4;
border-radius: 10px;
color: var(--forest);
background: white;
cursor: pointer;
font-size: 11px;
font-weight: 750;
}
.local-circle-actions .primary,
.local-circle-card-footer button,
.local-circle-channels button.active,
.local-circle-categories button.active,
.local-circle-more-category.active select,
.local-circle-nearby button.active {
border-color: var(--forest);
color: white;
background: var(--forest);
}
.local-circle-controls {
margin-top: 26px;
padding: 15px;
display: flex;
align-items: end;
gap: 10px;
border: 1px solid #dfe8e2;
border-radius: 15px;
background: #f8faf8;
}
.local-circle-channels {
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.local-circle-channels::-webkit-scrollbar,
.local-circle-categories::-webkit-scrollbar {
display: none;
}
.local-circle-channels button {
min-width: 62px;
flex: 0 0 auto;
}
.local-circle-controls > span {
margin-left: auto;
color: #75867e;
font-size: 11px;
}
.local-circle-discovery-tools {
margin-top: 10px;
display: flex;
align-items: center;
gap: 12px;
}
.local-circle-categories {
min-width: 0;
flex: 1;
overflow-x: auto;
scrollbar-width: none;
}
.local-circle-categories button,
.local-circle-more-category {
flex: 0 0 auto;
}
.local-circle-more-category {
position: relative;
}
.local-circle-more-category > span {
position: absolute;
z-index: 1;
top: 50%;
left: 12px;
pointer-events: none;
transform: translateY(-50%);
font-size: 10px;
font-weight: 750;
}
.local-circle-more-category select {
width: 78px;
padding-left: 46px;
color: transparent;
}
.local-circle-more-category select:focus {
color: var(--forest);
}
.local-circle-topic-strip:empty {
display: none;
}
.local-circle-list {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.local-circle-skeleton {
min-height: 226px;
border: 1px solid #e3eae6;
border-radius: 18px;
background: linear-gradient(100deg, #f4f7f5 25%, #fff 42%, #f4f7f5 58%);
background-size: 300% 100%;
animation: local-circle-loading 1.25s ease infinite;
}
@keyframes local-circle-loading {
to {
background-position-x: -150%;
}
}
.local-circle-topic-strip {
margin: 0 0 22px;
display: flex;
gap: 9px;
overflow-x: auto;
scrollbar-width: thin;
}
.local-circle-topic-strip button,
.local-circle-detail-topics button {
flex: 0 0 auto;
padding: 9px 13px;
border: 1px solid #d5dfda;
border-radius: 999px;
color: #496359;
background: #fff;
}
.local-circle-topic-strip button.active {
color: #fff;
border-color: #176b50;
background: #176b50;
}
.local-circle-card {
min-width: 0;
padding: 22px;
border: 1px solid #dfe7e2;
border-radius: 18px;
background: white;
box-shadow: 0 10px 30px rgba(29, 65, 50, 0.05);
}
.local-circle-card-header,
.local-circle-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.local-circle-card-header > div {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
}
.local-circle-card-header > div > span {
width: 37px;
height: 37px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 12px;
color: white;
background: var(--forest);
font-size: 13px;
font-weight: 800;
}
.local-circle-card-header p {
min-width: 0;
margin: 0;
}
.local-circle-card-header strong,
.local-circle-card-header small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.local-circle-card-header strong {
font-size: 12px;
}
.local-circle-card-header small {
margin-top: 3px;
color: #84938b;
font-size: 9px;
}
.local-circle-category {
flex: 0 0 auto;
padding: 5px 8px;
border-radius: 999px;
color: #9a572f;
background: #f6e9dd;
font-size: 9px;
font-weight: 750;
}
.local-circle-card h3 {
margin: 18px 0 9px;
font-size: 17px;
line-height: 1.45;
}
.local-circle-card-body {
min-height: 48px;
margin: 0;
display: -webkit-box;
overflow: hidden;
color: #60736a;
font-size: 12px;
line-height: 1.75;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.local-circle-card-location {
margin: 14px 0 17px;
color: #87958e;
font-size: 10px;
}
.local-circle-card-footer {
padding-top: 15px;
border-top: 1px solid #edf1ee;
}
.local-circle-card-footer > span {
color: #7a8b83;
font-size: 10px;
}
.local-circle-card-footer button {
min-height: 35px;
}
.local-circle-empty {
margin-top: 18px;
padding: 45px 24px;
border: 1px dashed #cfdbd3;
border-radius: 17px;
text-align: center;
background: #fafbf9;
}
.local-circle-empty[hidden] {
display: none;
}
.local-circle-empty strong {
display: block;
font-size: 14px;
}
.local-circle-empty p {
max-width: 560px;
margin: 8px auto 0;
color: #7c8c84;
font-size: 11px;
line-height: 1.7;
}
.local-circle-empty-actions {
margin-top: 16px;
display: flex;
justify-content: center;
gap: 9px;
}
.local-circle-empty-actions button {
min-height: 39px;
padding: 0 16px;
border: 1px solid #176b50;
border-radius: 10px;
color: #fff;
background: #176b50;
font-size: 11px;
font-weight: 750;
}
.local-circle-empty-actions button + button {
color: #176b50;
background: #fff;
}
.local-circle-empty-actions button[hidden] {
display: none;
}
.outdoor-section {
max-width: 1180px;
margin: 0 auto;
padding: 90px 24px 20px;
}
.outdoor-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 34px;
}
.outdoor-heading h2 {
max-width: 720px;
margin: 10px 0 12px;
font-family: 'Songti SC', 'STSong', serif;
font-size: clamp(30px, 4vw, 43px);
line-height: 1.25;
}
.outdoor-heading p {
max-width: 700px;
margin: 0;
color: #71837a;
font-size: 13px;
line-height: 1.75;
}
.outdoor-filters {
min-width: 390px;
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: end;
gap: 9px;
}
.outdoor-filters label,
.outdoor-signup-settings label {
display: grid;
gap: 6px;
color: #6b7c73;
font-size: 10px;
font-weight: 750;
}
.outdoor-filters select,
.outdoor-filters button,
.outdoor-signup-settings input,
.outdoor-signup-settings select {
min-height: 42px;
padding: 0 12px;
border: 1px solid #d8e4dc;
border-radius: 10px;
background: white;
font: inherit;
}
.outdoor-filters button {
color: white;
background: var(--forest);
cursor: pointer;
font-weight: 800;
}
.outdoor-signup-settings {
margin-top: 24px;
padding: 15px;
display: grid;
grid-template-columns: 110px minmax(220px, 1fr) minmax(180px, 0.7fr) auto;
align-items: end;
gap: 12px;
border: 1px solid #deebe3;
border-radius: 15px;
background: #f5f9f6;
}
.outdoor-signup-settings > span {
align-self: center;
color: #547066;
font-size: 11px;
font-weight: 800;
}
.outdoor-list {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.outdoor-card {
padding: 23px;
display: flex;
flex-direction: column;
border: 1px solid #dde8e1;
border-radius: 18px;
background: white;
box-shadow: 0 14px 38px rgba(31, 78, 62, 0.07);
}
.outdoor-card-top,
.outdoor-card-facts {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.outdoor-card-badge,
.outdoor-card-difficulty {
padding: 5px 8px;
border-radius: 999px;
font-size: 9px;
font-weight: 850;
}
.outdoor-card-badge {
color: #176b50;
background: #e3f2ea;
}
.outdoor-card-difficulty {
color: #81582d;
background: #f7eadc;
}
.outdoor-card-difficulty.hard {
color: #9d443a;
background: #f8e2df;
}
.outdoor-card h3 {
margin: 18px 0 8px;
font-size: 19px;
}
.outdoor-card-time,
.outdoor-card-address,
.outdoor-card-deadline {
margin: 5px 0 0;
color: #74867d;
font-size: 11px;
}
.outdoor-card-facts {
margin-top: 12px;
color: #2b6b53;
font-size: 11px;
font-weight: 800;
}
.outdoor-card-description {
margin: 14px 0 0;
color: #53675d;
font-size: 12px;
line-height: 1.65;
}
.outdoor-card-review-summary {
margin: 10px 0 0;
color: #476b5b;
font-size: 10px;
font-weight: 750;
}
.outdoor-card-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: auto;
padding-top: 14px;
}
.outdoor-card-actions button {
margin-top: 0;
}
.outdoor-card-actions button:only-child {
grid-column: 1 / -1;
}
.outdoor-card-actions button.secondary {
border: 1px solid #bcd3c6;
color: var(--forest);
background: #f4faf6;
}
.outdoor-card-info {
margin-top: 11px;
padding: 10px;
border-radius: 10px;
color: #755127;
background: #fbf1e5;
font-size: 10px;
line-height: 1.55;
}
.outdoor-card button {
width: 100%;
min-height: 42px;
margin-top: auto;
padding: 0 14px;
border: 0;
border-radius: 10px;
color: white;
background: var(--forest);
cursor: pointer;
font-weight: 800;
}
.outdoor-card button[disabled] {
color: #738178;
background: #e6ece8;
cursor: not-allowed;
}
.outdoor-empty {
margin-top: 16px;
padding: 38px 24px;
border: 1px dashed #cadbd0;
border-radius: 16px;
color: #61756b;
background: #f8faf9;
text-align: center;
}
.outdoor-empty p {
margin: 8px 0 0;
font-size: 11px;
}
.runner-section {
max-width: 1180px;
margin: 0 auto;
padding: 92px 24px 34px;
}
.runner-shell {
position: relative;
overflow: hidden;
padding: 52px;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
align-items: center;
gap: 70px;
border-radius: 28px;
color: white;
background:
    radial-gradient(circle at 88% 2%, rgba(108, 218, 184, 0.22), transparent 35%),
    linear-gradient(135deg, #0c4c42 0%, #123a34 100%);
box-shadow: 0 30px 70px rgba(19, 61, 52, 0.18);
}
.runner-shell::after {
content: '';
position: absolute;
width: 280px;
height: 280px;
right: -120px;
bottom: -170px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 50%;
box-shadow:
    0 0 0 38px rgba(255, 255, 255, 0.035),
    0 0 0 78px rgba(255, 255, 255, 0.025);
}
.runner-overview,
.runner-steps {
position: relative;
z-index: 1;
}
.runner-badge {
width: max-content;
margin-bottom: 24px;
padding: 7px 11px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
color: #cfece3;
background: rgba(255, 255, 255, 0.07);
font-size: 11px;
font-weight: 700;
}
.runner-badge i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #6ed3ad;
box-shadow: 0 0 0 4px rgba(110, 211, 173, 0.12);
}
.runner-overview .section-kicker {
color: #82dbbd;
}
.runner-overview h2 {
margin: 12px 0 18px;
font-family: 'Songti SC', 'STSong', serif;
font-size: clamp(31px, 4vw, 44px);
line-height: 1.24;
letter-spacing: -0.035em;
}
.runner-overview > p:not(.runner-runtime-note) {
max-width: 560px;
margin: 0;
color: #c1d7d0;
font-size: 14px;
line-height: 1.85;
}
.runner-actions {
margin-top: 27px;
display: flex;
flex-wrap: wrap;
gap: 11px;
}
.runner-actions button {
min-height: 44px;
padding: 0 18px;
border-radius: 11px;
cursor: pointer;
font-size: 13px;
font-weight: 750;
}
.runner-primary {
border: 1px solid #f6b470;
color: #173b33;
background: #f6b470;
}
.runner-primary:hover {
background: #ffc58a;
}
.runner-secondary {
border: 1px solid rgba(255, 255, 255, 0.26);
color: white;
background: rgba(255, 255, 255, 0.08);
}
.runner-secondary:hover {
background: rgba(255, 255, 255, 0.14);
}
.runner-runtime-note {
margin: 15px 0 0;
color: #9dbab1;
font-size: 11px;
line-height: 1.65;
}
.runner-steps {
margin: 0;
padding: 8px 0;
list-style: none;
}
.runner-steps li {
position: relative;
min-height: 78px;
display: grid;
grid-template-columns: 44px 1fr;
align-items: start;
gap: 15px;
}
.runner-steps li:not(:last-child)::after {
content: '';
position: absolute;
top: 40px;
bottom: 0;
left: 21px;
width: 1px;
background: rgba(255, 255, 255, 0.17);
}
.runner-steps li > span {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 13px;
color: #8de0c4;
background: rgba(255, 255, 255, 0.08);
font-size: 11px;
font-weight: 800;
}
.runner-steps strong,
.runner-steps small {
display: block;
}
.runner-steps strong {
padding-top: 3px;
font-size: 14px;
}
.runner-steps small {
margin-top: 7px;
color: #a7c0b8;
font-size: 11px;
line-height: 1.55;
}
.runner-guardrails {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.runner-guardrails article {
min-height: 158px;
padding: 23px;
border: 1px solid #dfe8e2;
border-radius: 17px;
background: white;
}
.runner-guardrails span {
padding: 4px 7px;
border-radius: 6px;
color: #087d70;
background: #e1f4ee;
font-size: 9px;
font-weight: 800;
}
.runner-guardrails strong {
margin-top: 15px;
display: block;
font-size: 15px;
}
.runner-guardrails p {
margin: 9px 0 0;
color: #74867d;
font-size: 11px;
line-height: 1.7;
}
.progress-section {
max-width: 1132px;
margin: 0 auto;
padding: 92px 0;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 90px;
align-items: center;
}
.progress-copy p {
margin: 20px 0 24px;
color: var(--soft);
font-size: 14px;
line-height: 1.85;
}
.progress-copy a {
color: var(--forest);
font-size: 13px;
font-weight: 750;
border-bottom: 1px solid #7eaa92;
}
.phase-list {
border-top: 1px solid var(--line);
}
.phase {
min-height: 76px;
display: grid;
grid-template-columns: 46px 1fr auto;
align-items: center;
gap: 14px;
border-bottom: 1px solid var(--line);
}
.phase > span {
width: 35px;
height: 35px;
display: grid;
place-items: center;
border-radius: 50%;
color: #84938b;
background: #f1f3f1;
font-size: 11px;
font-weight: 800;
}
.phase p {
margin: 0;
}
.phase strong {
font-size: 14px;
}
.phase small {
margin-top: 4px;
color: #84938b;
font-size: 11px;
}
.phase > i {
color: #8a9790;
font-size: 10px;
font-style: normal;
}
.phase.done > span {
color: white;
background: var(--forest);
}
.phase.done > i {
color: var(--forest);
font-weight: 700;
}
.phase.current > span {
color: #98511f;
background: #f4e7d7;
}
.phase.current > i {
padding: 5px 8px;
border-radius: 6px;
color: #98511f;
background: #f4e7d7;
}
.legal-links-bar {
padding: 28px max(24px, calc((100% - 1132px) / 2));
display: flex;
justify-content: space-between;
align-items: center;
color: #84928b;
background: #16382d;
font-size: 11px;
}
.legal-links-bar div {
display: flex;
align-items: center;
gap: 16px;
}
.legal-links-bar strong {
color: white;
font-size: 13px;
}
.legal-links-bar a {
color: #d9e7df;
text-decoration: none;
}
.legal-links-bar a:hover {
color: white;
text-decoration: underline;
}
.modal-backdrop {
position: fixed;
inset: 0;
z-index: var(--v19-z-backdrop, 60);
padding: 20px;
display: grid;
place-items: center;
background: rgba(13, 35, 27, 0.55);
backdrop-filter: blur(6px);
}
.modal-backdrop[hidden] {
display: none;
}
.login-modal {
position: relative;
width: min(420px, 100%);
padding: 34px;
border-radius: 20px;
background: white;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}
.order-action-modal {
position: relative;
width: min(540px, 100%);
max-height: calc(100vh - 40px);
padding: 30px;
overflow: auto;
border-radius: 20px;
background: white;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}
.order-action-modal h2 {
margin: 8px 0 6px;
font-size: 24px;
}
.order-action-modal > p {
margin: 0;
color: #71837a;
font-size: 11px;
line-height: 1.65;
}
.order-action-summary {
margin: 16px 0;
padding: 11px 13px;
border: 1px solid #dbe7df;
border-radius: 10px;
color: var(--forest);
background: #f3f8f5;
font-size: 11px;
font-weight: 750;
line-height: 1.55;
}
.order-action-fields {
display: grid;
gap: 15px;
}
.order-action-fields[hidden] {
display: none;
}
.order-action-buttons {
display: flex;
justify-content: flex-end;
gap: 9px;
}
.order-action-buttons button {
width: auto;
min-width: 96px;
padding: 11px 16px;
border-radius: 9px;
cursor: pointer;
font-size: 11px;
font-weight: 750;
}
.order-action-buttons .secondary {
border: 1px solid #cfdbd3;
color: var(--forest);
background: white;
}
.location-modal {
position: relative;
width: min(620px, 100%);
padding: 34px;
border-radius: 22px;
background: white;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}
.location-modal h2 {
margin: 9px 0 7px;
font-family: 'Songti SC', 'STSong', serif;
font-size: 29px;
}
.location-modal > p {
margin: 0;
color: #73847c;
font-size: 12px;
line-height: 1.7;
}
.location-current {
margin-top: 20px;
padding: 12px 14px;
border: 1px solid #dbe8df;
border-radius: 11px;
color: var(--forest);
background: #f3f9f5;
font-size: 12px;
font-weight: 750;
}
.location-grid {
margin-top: 18px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.location-grid label {
display: grid;
gap: 7px;
color: #53675e;
font-size: 11px;
font-weight: 750;
}
.location-grid select {
width: 100%;
min-height: 44px;
padding: 0 12px;
border: 1px solid #d5ded8;
border-radius: 10px;
outline: 0;
color: var(--ink);
background: white;
}
.location-grid select:focus {
border-color: var(--forest);
box-shadow: 0 0 0 3px rgba(23, 107, 69, 0.1);
}
.location-grid select:disabled {
color: #97a39d;
background: #f5f7f5;
}
.location-modal .location-message {
min-height: 20px;
margin-top: 14px;
color: #71827a;
font-size: 11px;
}
.location-actions {
margin-top: 18px;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.location-actions button {
padding: 11px 17px;
border-radius: 10px;
cursor: pointer;
font-size: 12px;
font-weight: 750;
}
.location-actions .secondary {
border: 1px solid #cbd9d0;
color: var(--forest);
background: white;
}
.location-actions .primary {
border: 1px solid var(--forest);
color: white;
background: var(--forest);
}
.location-actions button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.modal-close {
position: absolute;
top: 14px;
right: 16px;
border: 0;
color: #77867f;
background: transparent;
cursor: pointer;
font-size: 27px;
font-weight: 300;
}
.modal-mark {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 14px;
color: white;
background: var(--forest);
}
.modal-mark svg {
width: 33px;
height: 33px;
}
.login-modal h2 {
margin: 20px 0 6px;
font-size: 24px;
}
.login-modal > p {
margin: 0 0 24px;
color: #7a8b83;
font-size: 13px;
}
.login-modal label {
display: grid;
gap: 8px;
color: #53675e;
font-size: 12px;
font-weight: 700;
}
.login-modal input {
width: 100%;
padding: 12px 13px;
border: 1px solid #d5ded8;
border-radius: 10px;
outline: 0;
color: var(--ink);
}
.login-modal input:focus {
border-color: var(--forest);
box-shadow: 0 0 0 3px rgba(23, 107, 69, 0.1);
}
.code-row {
margin-top: 15px;
display: grid;
grid-template-columns: 1fr 116px;
align-items: end;
gap: 10px;
}
.code-row button {
height: 43px;
border: 1px solid #bdd0c4;
border-radius: 10px;
color: var(--forest);
background: var(--mint);
cursor: pointer;
font-size: 12px;
font-weight: 700;
}
.code-row button:disabled {
cursor: wait;
opacity: 0.6;
}
.form-help {
min-height: 18px;
margin: 10px 0 15px;
color: #87958e;
font-size: 10px;
}
.form-help.error {
color: #b34e3f;
}
.submit-login {
width: 100%;
padding: 13px;
border: 0;
border-radius: 10px;
color: white;
background: var(--forest);
cursor: pointer;
font-weight: 750;
}
.publish-modal {
position: relative;
width: min(780px, 100%);
max-height: calc(100vh - 40px);
padding: 32px;
overflow: auto;
border-radius: 20px;
background: white;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}
.detail-modal {
position: relative;
width: min(650px, 100%);
max-height: calc(100vh - 40px);
padding: 34px;
overflow: auto;
border-radius: 22px;
background: white;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}
.reputation-modal {
position: relative;
width: min(560px, 100%);
max-height: calc(100vh - 40px);
padding: 32px;
overflow: auto;
border-radius: 22px;
background: #fffdf8;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}
.reputation-modal h2 {
margin: 18px 0 4px;
color: var(--v10-forest-ink, #173d31);
font-family: 'Songti SC', 'STSong', serif;
font-size: 28px;
}
.reputation-modal-score {
margin: 0;
color: #a65f2e;
font-size: 24px;
font-weight: 800;
}
.reputation-modal-summary {
margin: 7px 0 22px;
color: #74847b;
font-size: 11px;
}
.reputation-distribution {
display: grid;
gap: 9px;
}
.reputation-distribution-row {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 34px;
align-items: center;
gap: 10px;
color: #66776e;
font-size: 10px;
}
.reputation-distribution-row i {
height: 8px;
overflow: hidden;
border-radius: 999px;
background: #ece9df;
}
.reputation-distribution-row b {
height: 100%;
display: block;
border-radius: inherit;
background: linear-gradient(90deg, #d9a441, #b96e36);
}
.reputation-distribution-row strong {
text-align: right;
color: #43574d;
}
.reputation-source-grid {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.reputation-source-grid article {
padding: 13px;
display: grid;
gap: 4px;
border-radius: 13px;
background: #f2f6f1;
}
.reputation-source-grid span,
.reputation-source-grid small {
color: #738179;
font-size: 9px;
}
.reputation-source-grid strong {
color: var(--forest-dark);
font-size: 18px;
}
.reputation-audit-list {
margin: 18px 0 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px 18px;
font-size: 10px;
}
.reputation-audit-list dt {
color: #7a877f;
}
.reputation-audit-list dd {
margin: 0;
text-align: right;
color: #344a3f;
font-weight: 700;
}
.reputation-modal-note {
margin: 20px 0 0;
padding: 13px;
border-radius: 12px;
color: #706b5f;
background: #f7f0df;
font-size: 10px;
line-height: 1.7;
}
.local-circle-detail-modal {
position: relative;
width: min(720px, 100%);
max-height: calc(100vh - 40px);
padding: 34px;
overflow: auto;
border-radius: 22px;
background: white;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}
.local-circle-detail-heading > div {
padding-right: 36px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.local-circle-detail-heading span {
padding: 5px 9px;
border-radius: 999px;
color: var(--forest);
background: var(--mint);
font-size: 10px;
font-weight: 800;
}
.local-circle-detail-heading strong,
.local-circle-detail-heading p {
color: #788981;
font-size: 11px;
}
.local-circle-detail-heading h2 {
margin: 18px 0 8px;
font-family: 'Songti SC', 'STSong', serif;
font-size: 30px;
}
.local-circle-detail-heading p {
margin: 0;
}
.local-circle-detail-body {
margin: 24px 0;
color: #4e6258;
font-size: 13px;
line-height: 1.9;
white-space: pre-wrap;
}
.local-circle-detail-topics {
margin: 18px 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.local-circle-relations {
margin: 20px 0;
display: grid;
gap: 10px;
}
.local-circle-sources {
display: grid;
gap: 10px;
margin-top: 18px;
}
.local-circle-sources h3 {
margin: 0;
color: #193d32;
font-size: 15px;
}
.local-circle-sources article {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 13px 15px;
border: 1px solid #dce8e1;
border-radius: 13px;
background: #f7fbf9;
}
.local-circle-sources article > div {
display: grid;
gap: 4px;
}
.local-circle-sources span {
color: #6d7f75;
font-size: 11px;
}
.local-circle-sources a {
flex: 0 0 auto;
color: #176b50;
font-size: 12px;
font-weight: 800;
}
.local-circle-relations h3 {
margin: 0 0 3px;
font-size: 18px;
}
.local-circle-relations article {
padding: 14px 16px;
display: flex;
align-items: center;
gap: 16px;
border: 1px solid #dbe5df;
border-radius: 14px;
background: #f8faf8;
}
.local-circle-relations article > div {
min-width: 0;
flex: 1;
display: grid;
gap: 4px;
}
.local-circle-relations span {
overflow: hidden;
color: #708078;
text-overflow: ellipsis;
white-space: nowrap;
}
.local-circle-relations em {
color: #a45b22;
font-style: normal;
font-weight: 800;
}
.local-circle-relations .local-circle-relation-reputation {
width: fit-content;
padding: 4px 8px;
border-radius: 999px;
color: #775017;
background: #fff1cf;
font-size: 10px;
font-weight: 800;
}
.local-circle-relations button {
padding: 9px 12px;
border: 0;
border-radius: 10px;
color: #fff;
background: #176b50;
}
.local-circle-publish-topics {
margin: 0;
padding: 14px;
border: 1px solid #dce4df;
border-radius: 14px;
}
.local-circle-media-picker span,
.local-circle-media-status {
margin: 0;
color: #708078;
font-size: 10px;
font-weight: 500;
line-height: 1.55;
}
.local-circle-media-picker input[type='file'] {
padding: 9px;
cursor: pointer;
}
.local-circle-media-preview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.local-circle-media-preview:empty {
display: none;
}
.local-circle-media-item {
min-width: 0;
padding: 8px;
display: grid;
gap: 7px;
border: 1px solid #dce4df;
border-radius: 12px;
background: #f8faf8;
}
.local-circle-media-item img,
.local-circle-media-item video {
width: 100%;
height: 84px;
border-radius: 8px;
object-fit: cover;
background: #e8efeb;
}
.local-circle-media-item span {
overflow: hidden;
color: #52675d;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.local-circle-media-item button {
min-height: 32px;
border: 1px solid #e4b9ae;
border-radius: 8px;
color: #934538;
background: #fff2ef;
cursor: pointer;
}
@media (max-width: 640px) {
.local-circle-media-preview {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.local-circle-publish-topics legend {
padding: 0 6px;
font-weight: 700;
}
.local-circle-publish-topics > div {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #718078;
}
.local-circle-publish-topics label {
padding: 8px 10px;
border-radius: 999px;
background: #eef4f0;
}
.local-circle-nearby-consent {
padding: 14px;
display: grid;
gap: 8px;
border: 1px solid #dce4df;
border-radius: 14px;
background: #f8faf8;
}
.local-circle-nearby-consent button {
width: fit-content;
min-height: 38px;
padding: 0 13px;
border: 1px solid #bdd2c5;
border-radius: 9px;
color: var(--forest);
background: #fff;
cursor: pointer;
font-weight: 750;
}
.local-circle-nearby-consent p {
margin: 0;
color: #708078;
font-size: 10px;
line-height: 1.65;
}
.local-circle-interactions {
padding: 15px 0;
display: flex;
gap: 8px;
border-top: 1px solid #e7ece9;
border-bottom: 1px solid #e7ece9;
}
.local-circle-interactions button,
.local-circle-comments form button {
padding: 9px 13px;
border: 1px solid #cfdbd3;
border-radius: 9px;
color: var(--forest);
background: #f6faf7;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.local-circle-interactions button.danger {
margin-left: auto;
color: #a54c40;
border-color: #e4cbc7;
background: #fff9f8;
}
.local-circle-comments {
margin-top: 24px;
}
.local-circle-comments-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.local-circle-comments-heading h3 {
margin: 0;
font-size: 15px;
}
.local-circle-comments-heading span {
color: #7b8c83;
font-size: 10px;
}
.local-circle-comments form {
margin-top: 13px;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
.local-circle-comments form input {
min-width: 0;
padding: 10px 12px;
border: 1px solid #d5ded8;
border-radius: 9px;
outline: 0;
font-size: 11px;
}
.local-circle-comment-list {
margin-top: 12px;
}
.local-circle-comment-list article {
padding: 13px 0;
border-bottom: 1px solid #edf1ee;
}
.local-circle-comment-list article > div {
display: flex;
justify-content: space-between;
gap: 14px;
}
.local-circle-comment-list strong {
font-size: 11px;
}
.local-circle-comment-list time {
color: #8a9891;
font-size: 9px;
}
.local-circle-comment-list p {
margin: 7px 0 0;
color: #64766d;
font-size: 11px;
line-height: 1.7;
}
.detail-heading {
padding-right: 28px;
}
.detail-badge {
padding: 5px 9px;
display: inline-flex;
border-radius: 999px;
color: var(--forest);
background: var(--mint);
font-size: 10px;
font-weight: 800;
}
.detail-heading h2 {
margin: 16px 0 8px;
font-family: 'Songti SC', 'STSong', serif;
font-size: 30px;
}
.detail-heading p,
.detail-description {
color: #74867d;
font-size: 12px;
line-height: 1.75;
}
.detail-heading p {
margin: 0;
}
.detail-description {
margin: 22px 0;
padding: 18px;
border-radius: 13px;
white-space: pre-wrap;
background: #f7f9f7;
}
.detail-reputation {
width: fit-content;
margin: -8px 0 22px;
padding: 8px 12px;
border: 1px solid color-mix(in srgb, var(--v10-wheat, #d9a441) 44%, transparent);
border-radius: 999px;
color: var(--v10-forest-ink, #173d31);
background: color-mix(in srgb, var(--v10-wheat-soft, #f4e6bd) 62%, white);
cursor: pointer;
font-size: 12px;
font-weight: 750;
}
.detail-reputation:disabled {
cursor: wait;
opacity: 0.75;
}
.detail-action-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.detail-action-row strong {
color: #b05d2f;
font-size: 20px;
}
.detail-action-row button {
padding: 11px 18px;
border: 0;
border-radius: 10px;
color: white;
background: var(--forest);
cursor: pointer;
font-size: 12px;
font-weight: 750;
}
.detail-action-row button[hidden] {
display: none;
}
.job-application-form {
margin-top: 20px;
padding: 18px;
display: grid;
gap: 13px;
border: 1px solid #dce8e2;
border-radius: 16px;
background: #f7faf8;
}
.job-application-form[hidden] {
display: none;
}
.job-application-form > div {
display: grid;
gap: 4px;
}
.job-application-form > div span {
color: #718078;
font-size: 12px;
}
.job-application-form .form-disclaimer {
margin: 0;
padding: 10px 12px;
border-radius: 10px;
color: #76643c;
background: #fff8e6;
font-size: 12px;
line-height: 1.65;
}
.job-application-form label {
display: grid;
gap: 7px;
color: #385648;
font-size: 12px;
font-weight: 750;
}
.job-application-form input,
.job-application-form textarea {
width: 100%;
box-sizing: border-box;
padding: 11px 12px;
border: 1px solid #cad9d1;
border-radius: 10px;
background: #fff;
color: #173f2f;
font: inherit;
}
.job-application-form > button {
justify-self: start;
padding: 11px 18px;
border: 0;
border-radius: 10px;
background: var(--forest);
color: #fff;
cursor: pointer;
font-weight: 750;
}
.detail-reviews {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid #e5ebe7;
}
.detail-reviews[hidden] {
display: none;
}
.detail-reviews > div:first-child {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
}
.detail-reviews h3 {
margin: 0;
font-size: 15px;
}
.detail-reviews > div:first-child span {
color: #73857c;
font-size: 11px;
}
.detail-review-list {
margin-top: 13px;
display: grid;
gap: 9px;
}
.detail-review-card {
padding: 13px 14px;
border: 1px solid #e2e9e4;
border-radius: 11px;
background: #fbfcfb;
}
.detail-review-card strong {
color: #d67c3d;
font-size: 12px;
letter-spacing: 0.08em;
}
.detail-review-card p {
margin: 7px 0;
color: #435d52;
font-size: 12px;
line-height: 1.65;
}
.detail-review-card small {
color: #89978f;
font-size: 10px;
}
.publish-intro h2 {
margin: 8px 0 6px;
font-size: 24px;
}
.publish-intro p {
margin: 0;
color: #788981;
font-size: 12px;
line-height: 1.6;
}
.workspace-session {
min-height: 52px;
margin-top: 18px;
padding: 10px 12px 10px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
border: 1px solid #dce7e0;
border-radius: 13px;
background: #f7faf8;
}
.workspace-session[hidden] {
display: none;
}
.workspace-session span,
.workspace-session strong,
.workspace-session small {
display: block;
}
.workspace-session strong {
color: #23493c;
font-size: 12px;
}
.workspace-session small {
margin-top: 3px;
color: #829188;
font-size: 10px;
}
.workspace-session button {
flex: 0 0 auto;
padding: 8px 11px;
border: 1px solid #d7e2dc;
border-radius: 8px;
color: #6f5148;
background: white;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.workspace-session button:hover {
border-color: #c99f91;
background: #fcf5f2;
}
.publish-tabs {
margin: 24px 0 20px;
padding: 4px;
display: grid;
grid-template-columns: repeat(5, 1fr);
border-radius: 11px;
background: #f0f4f1;
}
.publish-tabs[hidden] {
display: none;
}
.publish-tabs button {
padding: 9px;
border: 0;
border-radius: 8px;
color: #6d7d75;
background: transparent;
cursor: pointer;
font-size: 12px;
font-weight: 700;
}
.publish-tabs button.active {
color: var(--forest-dark);
background: white;
box-shadow: 0 2px 8px rgba(24, 51, 42, 0.08);
}
.publish-back {
margin: 18px 0 0;
padding: 9px 12px;
border: 1px solid #d4dfd8;
border-radius: 9px;
color: var(--forest);
background: #fff;
cursor: pointer;
font-size: 11px;
font-weight: 750;
}
.publish-back[hidden] {
display: none;
}
.publish-choice-pane {
margin-top: 22px;
display: grid;
gap: 18px;
}
.publish-choice-group {
padding: 17px;
border: 1px solid #e0e7e2;
border-radius: 15px;
background: #fbfcf9;
}
.publish-choice-group > div:first-child {
margin-bottom: 12px;
display: flex;
align-items: baseline;
gap: 9px;
}
.publish-choice-group > div:first-child span {
color: var(--forest-dark);
font-size: 14px;
font-weight: 800;
}
.publish-choice-group > div:first-child small {
color: #7a8a82;
font-size: 10px;
}
.publish-type-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.publish-type-grid button {
min-height: 76px;
padding: 13px;
display: grid;
align-content: center;
gap: 5px;
border: 1px solid #d8e2dc;
border-radius: 12px;
text-align: left;
color: var(--forest-dark);
background: white;
cursor: pointer;
}
.publish-type-grid button:hover,
.publish-type-grid button:focus-visible {
border-color: var(--forest);
box-shadow: 0 5px 16px rgba(23, 107, 80, 0.1);
transform: translateY(-1px);
}
.publish-type-grid button b {
font-size: 12px;
}
.publish-type-grid button small {
color: #7a8a82;
font-size: 9px;
line-height: 1.45;
}
.publish-type-grid button:disabled {
border-style: dashed;
color: #88958f;
background: #f4f6f3;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.publish-pane[hidden] {
display: none;
}
.publish-form,
.publish-form label {
display: grid;
gap: 8px;
}
.publish-form {
gap: 15px;
}
.publish-form label {
color: #53675e;
font-size: 11px;
font-weight: 700;
}
.publish-form input,
.publish-form select,
.publish-form textarea {
width: 100%;
padding: 11px 12px;
border: 1px solid #d5ded8;
border-radius: 9px;
outline: 0;
color: var(--ink);
background: white;
}
.publish-form textarea {
resize: vertical;
}
.publish-form input:focus,
.publish-form select:focus,
.publish-form textarea:focus {
border-color: var(--forest);
box-shadow: 0 0 0 3px rgba(23, 107, 69, 0.1);
}
.publish-form select:disabled {
color: #9ba7a1;
background: #f4f6f4;
}
.field-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.field-grid.four {
grid-template-columns: repeat(4, 1fr);
}
.publish-message {
min-height: 17px;
margin: 0;
color: #7b8a83;
font-size: 10px;
}
.publish-message.error {
color: #b34e3f;
}
.my-status-list {
display: grid;
gap: 10px;
color: #74847c;
font-size: 12px;
}
.account-overview {
margin-bottom: 13px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 9px;
}
.account-overview article {
min-width: 0;
padding: 14px;
border: 1px solid #dfe8e2;
border-radius: 12px;
background: linear-gradient(145deg, #fbfdfb, #f0f7f3);
}
.account-overview span,
.account-overview strong,
.account-overview small {
display: block;
}
.account-overview span {
color: #71837a;
font-size: 10px;
font-weight: 700;
}
.account-overview strong {
margin: 8px 0 5px;
color: var(--forest);
font-size: 24px;
}
.account-overview small {
overflow: hidden;
color: #8a9891;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-shortcuts {
margin-bottom: 19px;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.account-shortcuts button {
padding: 8px 11px;
border: 1px solid #d5e2da;
border-radius: 9px;
color: var(--forest);
background: white;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.account-shortcuts button:hover {
background: var(--mint);
}
.status-card {
padding: 14px 15px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 12px;
border: 1px solid #e0e7e2;
border-radius: 11px;
background: #fafbf9;
}
.status-card strong {
color: var(--ink);
font-size: 13px;
}
.status-card span {
color: var(--forest);
font-size: 10px;
font-weight: 750;
}
.status-card small {
grid-column: 1 / -1;
color: #87968f;
}
.status-card .appeal-progress {
color: #80632b;
font-weight: 700;
}
.status-card .local-circle-appeal-button {
grid-column: 1 / -1;
justify-self: start;
padding: 7px 12px;
border: 1px solid #b9d5c2;
border-radius: 8px;
color: var(--forest);
background: #edf7f0;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.job-application-actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.job-application-actions button {
padding: 7px 10px;
border: 1px solid #b9d5c2;
border-radius: 8px;
color: var(--forest);
background: #edf7f0;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.transaction-notice {
margin-bottom: 14px;
padding: 12px 14px;
border: 1px solid #d8e5dc;
border-radius: 10px;
color: #62776d;
background: #f2f8f4;
font-size: 11px;
line-height: 1.6;
}
.order-filter-toolbar {
margin-bottom: 8px;
padding: 5px;
display: flex;
flex-wrap: wrap;
gap: 5px;
border: 1px solid #dce7df;
border-radius: 11px;
background: #f5f8f6;
}
.order-filter-toolbar button {
padding: 8px 11px;
border: 0;
border-radius: 8px;
color: #66786f;
background: transparent;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.order-filter-toolbar button:hover,
.order-filter-toolbar button.active {
color: white;
background: var(--forest);
}
.order-filter-summary {
margin: 0 0 11px;
color: #75867d;
font-size: 10px;
font-weight: 700;
}
.order-card {
grid-template-columns: minmax(0, 1.2fr) auto minmax(190px, auto);
}
.order-actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.order-aftercare {
grid-column: 1 / -1;
padding: 10px 12px;
display: grid;
gap: 5px;
border: 1px solid #eaded5;
border-radius: 9px;
color: #735f55;
background: #faf6f3;
}
.order-aftercare strong {
font-size: 10px;
}
.order-aftercare p {
margin: 0;
color: #806e64;
font-size: 10px;
line-height: 1.55;
}
.order-progress {
grid-column: 1 / -1;
margin: 5px 0 3px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 5px;
}
.order-progress span {
position: relative;
padding: 7px 5px;
border-radius: 7px;
color: #89968f;
background: #eef2ef;
font-size: 9px;
font-weight: 700;
text-align: center;
}
.order-progress span.done {
color: #4c7563;
background: #e6f1ea;
}
.order-progress span.current {
color: white;
background: var(--forest);
}
.order-progress span.terminal {
grid-column: 1 / -1;
color: #765e54;
background: #f2ebe7;
}
.toast {
position: fixed;
z-index: var(--v19-z-toast, 80);
left: 50%;
bottom: 28px;
padding: 11px 18px;
border-radius: 9px;
color: white;
background: #193c30;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 12px);
transition: 0.2s ease;
font-size: 12px;
}
.toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
@media (max-width: 900px) {
.header-inner {
gap: 20px;
}
.top-nav {
display: none;
}
.mobile-menu-toggle {
display: block;
order: 2;
}
.login-button {
order: 3;
}
.mobile-nav {
padding: 10px 24px 16px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
border-top: 1px solid rgba(24, 51, 42, 0.06);
background: rgba(255, 254, 250, 0.98);
}
.mobile-nav[hidden] {
display: none;
}
.mobile-nav a {
padding: 10px 8px;
border-radius: 9px;
color: #5d7167;
background: #f4f8f5;
font-size: 12px;
font-weight: 700;
text-align: center;
}
.brand {
min-width: 0;
margin-right: auto;
}
.hero {
grid-template-columns: 1fr;
padding-top: 54px;
}
.hero-visual {
min-height: 340px;
}
.service-grid {
grid-template-columns: repeat(2, 1fr);
}
.local-circle-heading {
align-items: stretch;
flex-direction: column;
}
.local-circle-controls {
flex-wrap: wrap;
}
.local-circle-controls > span {
width: 100%;
margin: 4px 0 0;
}
.outdoor-heading {
align-items: stretch;
flex-direction: column;
}
.outdoor-filters {
min-width: 0;
}
.outdoor-list {
grid-template-columns: 1fr 1fr;
}
.catalog-list {
grid-template-columns: repeat(2, 1fr);
}
.catalog-card:nth-child(3n) {
border-right: 1px solid #edf1ee;
}
.catalog-card:nth-child(2n) {
border-right: 0;
}
.field-grid.four {
grid-template-columns: repeat(2, 1fr);
}
.account-overview {
grid-template-columns: repeat(2, 1fr);
}
.progress-section {
padding: 72px 24px;
grid-template-columns: 1fr;
gap: 40px;
}
.runner-shell {
padding: 42px;
grid-template-columns: 1fr;
gap: 42px;
}
}
@media (max-width: 600px) {
.header-inner {
height: 66px;
padding: 0 16px;
}
.brand small,
  .login-button span {
display: none;
}
.brand strong {
font-size: 15px;
}
.brand-mark {
width: 39px;
height: 39px;
}
.login-button {
min-width: auto;
padding: 9px;
}
.mobile-nav {
padding: 8px 16px 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero {
padding: 42px 18px 34px;
gap: 30px;
}
.hero h1 {
font-size: 40px;
}
.hero-copy {
font-size: 14px;
}
.search-panel {
grid-template-columns: 1fr auto;
}
.location-picker {
grid-column: 1 / -1;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.hero-visual {
min-height: 300px;
}
.unified-search-section {
margin: 0 18px 22px;
padding: 20px;
}
.unified-search-heading,
  .unified-search-card-foot {
align-items: flex-start;
flex-direction: column;
}
.unified-search-actions {
width: 100%;
display: grid;
grid-template-columns: 1fr auto;
}
.unified-search-actions select {
width: 100%;
}
.unified-search-list {
grid-template-columns: 1fr;
}
.landscape {
inset: 0 0 28px;
}
.service-section {
padding: 58px 18px;
}
.section-heading {
display: block;
}
.section-heading > p,
  .section-actions p {
margin-top: 12px;
text-align: left;
}
.section-actions {
width: 100%;
max-width: none;
margin-top: 16px;
align-items: flex-start;
}
.service-grid {
grid-template-columns: 1fr;
}
.local-circle-section {
padding: 64px 18px 10px;
}
.local-circle-actions,
  .local-circle-controls {
display: flex;
}
.local-circle-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.local-circle-channels {
flex: 1;
}
.local-circle-discovery-tools {
align-items: stretch;
flex-direction: column;
}
.local-circle-nearby {
display: grid;
grid-template-columns: auto repeat(3, minmax(0, 1fr));
padding: 8px 0 0;
border-top: 1px solid #d9e3dd;
border-left: 0;
}
.local-circle-controls > span {
width: 100%;
order: 3;
}
.local-circle-list {
grid-template-columns: 1fr;
}
.outdoor-section {
padding-top: 64px;
}
.outdoor-filters,
  .outdoor-signup-settings,
  .outdoor-list {
grid-template-columns: 1fr;
}
.catalog-list {
grid-template-columns: 1fr;
}
.catalog-card,
  .catalog-card:nth-child(2n),
  .catalog-card:nth-child(3n) {
border-right: 0;
}
.catalog-card-footer {
align-items: flex-start;
flex-direction: column;
}
.catalog-card-actions {
width: 100%;
}
.catalog-card-actions button {
flex: 1;
}
.detail-modal,
  .reputation-modal,
  .local-circle-detail-modal,
  .publish-modal {
padding: 26px 18px;
}
.reputation-source-grid {
grid-template-columns: 1fr;
}
.local-circle-detail-heading > div,
  .local-circle-comments-heading {
align-items: flex-start;
flex-direction: column;
}
.local-circle-comments form {
grid-template-columns: 1fr;
}
.detail-action-row {
align-items: stretch;
flex-direction: column;
}
.progress-section {
padding: 60px 18px;
}
.runner-section {
padding: 62px 18px 16px;
}
.runner-shell {
padding: 30px 22px;
border-radius: 22px;
}
.runner-overview h2 {
font-size: 31px;
}
.runner-actions {
display: grid;
}
.runner-guardrails {
grid-template-columns: 1fr;
}
.legal-links-bar {
padding: 25px 18px;
display: block;
line-height: 1.8;
}
.legal-links-bar > span,
  .legal-links-bar div span {
display: block;
margin-top: 8px;
}
.legal-links-bar div {
display: block;
}
.login-modal,
  .location-modal {
padding: 28px 22px;
}
.location-grid {
grid-template-columns: 1fr;
gap: 11px;
}
.location-actions {
align-items: stretch;
flex-direction: column-reverse;
}
.publish-modal {
padding: 26px 18px;
}
.field-grid,
  .field-grid.four {
grid-template-columns: 1fr;
}
.publish-tabs,
  .order-card {
grid-template-columns: repeat(2, 1fr);
}
.publish-choice-group {
padding: 13px;
}
.publish-choice-group > div:first-child {
align-items: flex-start;
flex-direction: column;
}
.publish-type-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.publish-type-grid button {
min-height: 72px;
padding: 11px;
}
}
:root {
--shell-header-height: 72px;
--shell-nav-height: 52px;
--shell-gap: 16px;
--shell-surface: #f5f4ee;
--shell-card: #fffefa;
--shell-border: #dfe7e1;
--shell-radius: 20px;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.site-header {
position: relative;
height: var(--shell-header-height);
background: rgba(255, 254, 250, 0.98);
}
.header-inner {
width: 100%;
max-width: 1600px;
height: var(--shell-header-height);
padding: 0 28px;
gap: 24px;
}
.brand {
min-width: 220px;
}
.header-workspace {
min-width: 0;
max-width: 760px;
margin: 0 auto;
flex: 1;
display: grid;
grid-template-columns: minmax(132px, 190px) minmax(220px, 1fr) auto;
align-items: center;
overflow: hidden;
border: 1px solid var(--shell-border);
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 24px rgba(31, 67, 54, 0.06);
}
.header-workspace .location-picker {
min-width: 0;
height: 44px;
overflow: hidden;
}
.header-workspace .location-picker span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header-workspace .search-field input {
padding: 10px 0;
}
.header-workspace .search-button {
margin-right: 4px;
padding: 9px 17px;
}
.header-actions {
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.header-action {
min-height: 42px;
padding: 0 14px;
border: 1px solid #cfdbd4;
border-radius: 11px;
color: var(--forest-dark);
background: #fff;
cursor: pointer;
font-size: 13px;
font-weight: 750;
}
.header-action.primary {
border-color: var(--forest);
color: #fff;
background: var(--forest);
}
.header-action.icon-action {
position: relative;
width: 42px;
padding: 0;
display: grid;
place-items: center;
}
.header-action.icon-action svg {
width: 19px;
height: 19px;
}
.header-avatar {
width: 27px;
height: 27px;
display: grid;
flex: 0 0 auto;
place-items: center;
border-radius: 9px;
color: #fff;
background: var(--forest);
font-size: 11px;
font-weight: 820;
}
.account-menu-anchor {
position: relative;
}
.account-menu {
position: absolute;
z-index: var(--v19-z-popover, 30);
top: calc(100% + 10px);
right: 0;
width: 218px;
padding: 8px;
display: grid;
gap: 3px;
border: 1px solid var(--shell-border);
border-radius: 15px;
background: #fff;
box-shadow: 0 18px 48px rgba(16, 63, 46, 0.16);
}
.account-menu[hidden],
.account-menu [hidden] {
display: none;
}
.account-menu-identity {
margin-bottom: 4px;
padding: 9px 10px 11px;
border-bottom: 1px solid #e8ede9;
}
.account-menu-identity span,
.account-menu-identity strong {
display: block;
}
.account-menu-identity span {
color: #849189;
font-size: 10px;
}
.account-menu-identity strong {
margin-top: 3px;
overflow: hidden;
font-size: 12px;
text-overflow: ellipsis;
}
.account-menu button,
.account-menu a {
width: 100%;
min-height: 38px;
padding: 0 10px;
display: flex;
align-items: center;
border: 0;
border-radius: 9px;
color: #3c554a;
background: transparent;
cursor: pointer;
font-size: 12px;
font-weight: 700;
text-align: left;
}
.account-menu button:hover,
.account-menu a:hover {
background: #f0f6f2;
}
.account-menu button.danger {
color: #995040;
}
.primary-navigation {
height: var(--shell-nav-height);
padding: 0 max(28px, calc((100vw - 1544px) / 2));
display: flex;
align-items: stretch;
justify-content: center;
gap: 8px;
border-bottom: 1px solid rgba(24, 51, 42, 0.08);
background: rgba(255, 254, 250, 0.98);
}
.primary-navigation button {
position: relative;
min-width: 92px;
padding: 0 18px;
border: 0;
color: #687b72;
background: transparent;
cursor: pointer;
font-size: 13px;
font-weight: 760;
}
.primary-navigation button::after {
position: absolute;
right: 22px;
bottom: 0;
left: 22px;
height: 3px;
border-radius: 3px 3px 0 0;
background: transparent;
content: '';
}
.primary-navigation button:hover,
.primary-navigation button.active,
.primary-navigation button[aria-expanded='true'] {
color: var(--forest-dark);
background: #f3f7f4;
}
.primary-navigation button.active::after,
.primary-navigation button[aria-expanded='true']::after {
background: var(--forest);
}
.app-shell {
width: 100%;
max-width: 1600px;
height: calc(100vh - var(--shell-header-height) - var(--shell-nav-height));
margin: 0 auto;
padding: 14px 28px 20px;
display: block;
overflow: hidden;
background: var(--shell-surface);
}
.workspace-main {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
}
.workspace-main {
position: relative;
overflow: hidden;
border: 1px solid var(--shell-border);
border-radius: var(--shell-radius);
background: var(--shell-card);
box-shadow: 0 14px 40px rgba(31, 67, 54, 0.06);
}
.workspace-panel {
width: 100%;
max-width: none;
height: 100%;
min-height: 0;
margin: 0;
padding: 26px;
overflow: auto;
scrollbar-gutter: stable;
}
.workspace-panel[hidden] {
display: none !important;
}
.hero.workspace-panel {
grid-template-columns: minmax(0, 1.16fr) minmax(260px, 0.84fr);
gap: 28px;
align-items: center;
}
.hero h1 {
margin: 14px 0;
font-size: clamp(36px, 3.7vw, 56px);
}
.hero-copy {
font-size: 14px;
line-height: 1.7;
white-space: pre-wrap;
}
.home-entry-grid {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.home-entry-grid button {
min-width: 0;
min-height: 84px;
padding: 11px 7px;
display: grid;
place-items: center;
gap: 7px;
border: 1px solid #dce6df;
border-radius: 14px;
color: var(--ink);
background: #fff;
cursor: pointer;
box-shadow: 0 8px 20px rgba(31, 67, 54, 0.04);
}
.home-entry-grid button:hover {
border-color: #94b9a5;
background: #f2f8f4;
transform: translateY(-1px);
}
.home-entry-grid button span {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 11px;
color: var(--forest-dark);
background: #e5f2eb;
font-size: 14px;
font-weight: 800;
}
.home-entry-grid button strong {
overflow: hidden;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.hero.workspace-panel .hero-visual {
min-height: min(440px, calc(100vh - 150px));
}
.service-section.workspace-panel,
.local-circle-section.workspace-panel,
.outdoor-section.workspace-panel,
.runner-section.workspace-panel,
.progress-section.workspace-panel,
.unified-search-section.workspace-panel,
.messages-section.workspace-panel,
.account-section.workspace-panel,
.business-section.workspace-panel {
max-width: none;
margin: 0;
padding: 26px;
}
.message-entry {
position: relative;
}
.message-badge {
position: absolute;
top: -7px;
right: -8px;
min-width: 20px;
height: 20px;
padding: 0 5px;
display: grid;
place-items: center;
border: 2px solid #fff;
border-radius: 999px;
color: #fff;
background: #c54b38;
font-size: 10px;
font-style: normal;
font-weight: 800;
line-height: 1;
}
.message-badge[hidden] {
display: none;
}
.messages-section.workspace-panel {
display: flex;
flex-direction: column;
overflow: hidden;
}
.workspace-page-heading,
.account-block-heading,
.account-profile-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.workspace-page-heading h2 {
margin: 6px 0;
font-size: clamp(27px, 3vw, 38px);
}
.workspace-page-heading p {
margin: 0;
color: #708078;
font-size: 13px;
}
.workspace-heading-actions {
display: flex;
gap: 8px;
}
.workspace-heading-actions button,
.account-heading > button,
.account-block-heading button {
padding: 9px 13px;
border: 1px solid #ccdcd2;
border-radius: 10px;
color: var(--forest-dark);
background: #fff;
cursor: pointer;
font-size: 12px;
font-weight: 750;
}
.message-session-note {
margin-top: 14px;
padding: 9px 12px;
border-radius: 10px;
color: #6b7e74;
background: #f3f7f4;
font-size: 11px;
}
.message-tabs {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-bottom: 1px solid #dfe7e1;
}
.message-tabs button {
position: relative;
padding: 13px 10px;
border: 0;
color: #708078;
background: transparent;
cursor: pointer;
font-weight: 780;
}
.message-tabs button::after {
position: absolute;
right: 24%;
bottom: -1px;
left: 24%;
height: 3px;
border-radius: 3px 3px 0 0;
background: transparent;
content: '';
}
.message-tabs button.active {
color: var(--forest-dark);
}
.message-tabs button.active::after {
background: var(--forest);
}
.message-tabs button span {
min-width: 20px;
margin-left: 6px;
padding: 2px 5px;
display: inline-block;
border-radius: 999px;
color: #607269;
background: #edf3ef;
font-size: 10px;
}
.workspace-auth-state,
.workspace-empty-state,
.workspace-loading {
min-height: 240px;
flex: 1;
display: grid;
place-content: center;
justify-items: center;
gap: 10px;
padding: 24px;
color: #718178;
text-align: center;
}
.workspace-auth-state[hidden],
.workspace-empty-state[hidden],
.workspace-loading[hidden] {
display: none;
}
.workspace-auth-state strong,
.workspace-empty-state strong {
color: var(--ink);
font-size: 18px;
}
.workspace-auth-state p,
.workspace-empty-state p {
max-width: 420px;
margin: 0;
font-size: 13px;
line-height: 1.65;
}
.workspace-auth-state button,
.workspace-empty-state button {
margin-top: 5px;
padding: 10px 18px;
border: 0;
border-radius: 10px;
color: #fff;
background: var(--forest);
cursor: pointer;
font-weight: 750;
}
.workspace-loading.error {
color: #a14436;
}
.message-list {
min-height: 0;
margin-top: 12px;
display: grid;
align-content: start;
gap: 8px;
overflow: auto;
scrollbar-gutter: stable;
}
.message-list[hidden] {
display: none;
}
.message-card {
width: 100%;
padding: 13px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
border: 1px solid #e1e8e3;
border-radius: 13px;
color: var(--ink);
background: #fff;
cursor: pointer;
text-align: left;
}
.message-card:hover,
.message-card.unread {
border-color: #b9d1c2;
background: #f7fbf8;
}
.message-card-marker {
position: relative;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 12px;
color: var(--forest-dark);
background: #e7f2eb;
font-weight: 820;
}
.message-card.unread .message-card-marker::after {
position: absolute;
top: -3px;
right: -3px;
width: 7px;
height: 7px;
border: 2px solid #fff;
border-radius: 50%;
background: #c54b38;
content: '';
}
.message-card-content,
.message-card-content strong,
.message-card-content > span {
min-width: 0;
display: block;
}
.message-card-top {
margin-bottom: 3px;
display: flex !important;
justify-content: space-between;
gap: 12px;
color: #809087;
font-size: 10px;
}
.message-card-content strong {
overflow: hidden;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.message-card-content > span:last-child {
margin-top: 4px;
overflow: hidden;
color: #718178;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.message-card > b {
color: #8a9a92;
font-size: 22px;
}
.account-section.workspace-panel {
overflow: auto;
}
.account-workspace {
margin-top: 16px;
display: grid;
gap: 14px;
}
.account-workspace[hidden] {
display: none;
}
.account-profile-card,
.account-block {
padding: 17px;
border: 1px solid #e0e8e2;
border-radius: 15px;
background: #fff;
}
.account-profile-card {
justify-content: flex-start;
background: linear-gradient(135deg, #edf6f0, #fff 72%);
}
.account-avatar {
width: 52px;
height: 52px;
display: grid;
flex: 0 0 auto;
place-items: center;
border-radius: 17px;
color: #fff;
background: var(--forest);
font-size: 19px;
font-weight: 800;
}
.account-profile-card > div:nth-child(2) {
min-width: 0;
margin-right: auto;
}
.account-profile-card span,
.account-profile-card strong,
.account-profile-card small {
display: block;
}
.account-profile-card span,
.account-profile-card small {
color: #718178;
font-size: 10px;
}
.account-profile-card strong {
margin: 3px 0;
font-size: 17px;
}
.account-profile-card > button {
padding: 8px 12px;
border: 1px solid #cad8cf;
border-radius: 10px;
color: #6b7d73;
background: #fff;
cursor: pointer;
font-size: 11px;
}
.account-block-heading {
margin-bottom: 13px;
}
.account-block-heading strong,
.account-block-heading small {
display: block;
}
.account-block-heading strong {
font-size: 14px;
}
.account-block-heading small {
margin-top: 2px;
color: #829088;
font-size: 10px;
}
.account-order-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.account-order-grid button,
.account-metric-grid button {
min-width: 0;
padding: 10px 7px;
display: grid;
justify-items: center;
gap: 4px;
border: 1px solid #e2e9e4;
border-radius: 11px;
color: #64766d;
background: #f9fbf9;
cursor: pointer;
font-size: 10px;
}
.account-order-grid strong,
.account-metric-grid strong {
color: var(--forest-dark);
font-size: 18px;
}
.account-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.account-metric-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.account-reputation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 9px;
}
.account-reputation-grid article {
min-width: 0;
padding: 12px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 5px 12px;
border: 1px solid #eadfbd;
border-radius: 12px;
background: linear-gradient(145deg, #fffaf0, #fff);
}
.account-reputation-grid span,
.account-reputation-grid strong,
.account-reputation-grid small {
min-width: 0;
display: block;
}
.account-reputation-grid strong {
overflow: hidden;
color: var(--forest-dark);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-reputation-grid small,
.account-reputation-grid p {
color: #7d877f;
font-size: 9px;
}
.account-reputation-grid b {
color: #a65f2e;
font-size: 13px;
white-space: nowrap;
}
.account-reputation-grid p {
grid-column: 1 / -1;
margin: 2px 0 0;
}
.account-reputation-grid article > button {
grid-column: 1 / -1;
justify-self: start;
padding: 0;
border: 0;
color: var(--forest);
background: transparent;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.account-status-list {
display: grid;
gap: 7px;
}
.account-status-list article {
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-radius: 10px;
background: #f6f9f7;
}
.account-status-list strong,
.account-status-list small {
display: block;
}
.account-status-list strong {
font-size: 11px;
}
.account-status-list small {
margin-top: 2px;
color: #819088;
font-size: 9px;
}
.account-status-list b {
color: var(--forest-dark);
font-size: 10px;
white-space: nowrap;
}
.account-setting-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.account-setting-grid button,
.account-setting-grid a {
padding: 11px;
display: grid;
gap: 3px;
border: 1px solid #e0e8e2;
border-radius: 11px;
color: var(--ink);
background: #fff;
cursor: pointer;
text-align: left;
text-decoration: none;
}
.account-setting-grid button:hover,
.account-setting-grid a:hover {
border-color: #a8c5b3;
background: #f5faf7;
}
.account-setting-grid strong,
.account-setting-grid small {
display: block;
}
.business-section.workspace-panel {
overflow: auto;
background:
    radial-gradient(circle at 90% 4%, rgba(216, 235, 221, 0.72), transparent 26%), #fbfcfa;
}
.business-heading > button,
.business-board-heading button,
.business-guidance > button {
padding: 9px 13px;
border: 1px solid #c8d9ce;
border-radius: 10px;
color: var(--forest-dark);
background: #fff;
cursor: pointer;
font-size: 11px;
font-weight: 750;
}
.business-workspace {
margin-top: 16px;
display: grid;
gap: 13px;
}
.business-workspace[hidden],
.business-empty[hidden],
#business-dashboard[hidden] {
display: none;
}
.business-identity-tabs {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: thin;
}
.business-identity-tabs button {
flex: 0 0 auto;
padding: 9px 13px;
border: 1px solid #d7e1da;
border-radius: 999px;
color: #66786f;
background: #fff;
cursor: pointer;
font-size: 11px;
font-weight: 750;
}
.business-identity-tabs button.active {
border-color: var(--forest);
color: #fff;
background: var(--forest);
}
#business-dashboard {
display: grid;
gap: 13px;
}
.business-empty {
min-height: 290px;
padding: 34px;
display: grid;
place-items: center;
align-content: center;
gap: 8px;
border: 1px dashed #bfcfc5;
border-radius: 18px;
background: #fff;
text-align: center;
}
.business-empty span,
.business-empty p {
color: #718179;
font-size: 11px;
}
.business-empty strong {
font-size: 20px;
}
.business-empty p {
max-width: 480px;
margin: 0;
line-height: 1.7;
}
.business-empty button,
.business-hero-actions button {
padding: 10px 15px;
border: 1px solid var(--forest);
border-radius: 10px;
color: #fff;
background: var(--forest);
cursor: pointer;
font-size: 11px;
font-weight: 800;
}
.business-hero-card {
padding: 19px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border: 1px solid #d9e5dd;
border-radius: 17px;
color: #153c2c;
background: linear-gradient(135deg, #eaf5ed, #fff 72%);
}
.business-hero-card span,
.business-hero-card h3,
.business-hero-card p {
display: block;
}
.business-hero-card span {
color: var(--forest);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
}
.business-hero-card h3 {
margin: 4px 0;
font-size: 21px;
}
.business-hero-card p {
max-width: 650px;
margin: 0;
color: #687b72;
font-size: 11px;
line-height: 1.6;
}
.business-hero-actions {
display: flex;
gap: 8px;
}
.business-hero-actions button:last-child {
color: var(--forest-dark);
background: #fff;
}
.business-metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
gap: 10px;
}
.business-metric-grid article {
min-width: 0;
padding: 14px;
border: 1px solid #e0e8e2;
border-radius: 13px;
background: #fff;
}
.business-metric-grid span,
.business-metric-grid strong,
.business-metric-grid small {
display: block;
}
.business-metric-grid span,
.business-metric-grid small {
color: #7a8a82;
font-size: 9px;
}
.business-metric-grid strong {
margin: 6px 0 4px;
overflow: hidden;
color: var(--forest-dark);
font-size: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
.business-board-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
}
.business-board {
min-width: 0;
padding: 15px;
border: 1px solid #e0e8e2;
border-radius: 15px;
background: #fff;
}
.business-board-heading,
.business-asset-card,
.business-order-card,
.business-guidance {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.business-board-heading {
margin-bottom: 10px;
}
.business-board-heading strong,
.business-board-heading small {
display: block;
}
.business-board-heading strong {
font-size: 13px;
}
.business-board-heading small {
margin-top: 2px;
color: #809087;
font-size: 9px;
}
.business-asset-list,
.business-order-list {
display: grid;
gap: 7px;
}
.business-asset-card,
.business-order-card,
.business-record-empty {
min-width: 0;
padding: 10px 11px;
border: 1px solid #e7ece8;
border-radius: 10px;
background: #f8faf8;
}
.business-asset-card > span,
.business-order-card > span {
min-width: 0;
}
.business-asset-card strong,
.business-asset-card small,
.business-order-card strong,
.business-order-card small,
.business-record-empty strong,
.business-record-empty small {
display: block;
}
.business-asset-card strong,
.business-order-card strong,
.business-record-empty strong {
overflow: hidden;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.business-asset-card small,
.business-order-card small,
.business-record-empty small {
margin-top: 3px;
color: #7f8e86;
font-size: 9px;
}
.business-asset-card > div {
display: flex;
gap: 5px;
}
.business-asset-card button {
padding: 6px 8px;
border: 1px solid #cbd9d0;
border-radius: 8px;
color: var(--forest-dark);
background: #fff;
cursor: pointer;
font-size: 9px;
white-space: nowrap;
}
.business-order-card {
width: 100%;
color: var(--ink);
cursor: pointer;
text-align: left;
}
.business-order-card b {
color: var(--forest-dark);
font-size: 11px;
}
.business-guidance {
padding: 13px 15px;
border: 1px solid #e1e9e3;
border-radius: 13px;
background: #f5f8f4;
}
.business-guidance strong,
.business-guidance small {
display: block;
}
.business-guidance strong {
font-size: 11px;
}
.business-guidance small {
margin-top: 3px;
color: #74847b;
font-size: 9px;
}
.account-setting-grid strong {
font-size: 11px;
}
.account-setting-grid small {
color: #7b8b83;
font-size: 9px;
}
.service-section.workspace-panel .service-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.local-circle-section.workspace-panel .local-circle-list,
.outdoor-section.workspace-panel .outdoor-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.runner-section.workspace-panel .runner-shell {
min-height: auto;
}
.shell-drawer-backdrop {
position: fixed;
z-index: var(--v19-z-backdrop, 60);
inset: 0;
display: flex;
justify-content: flex-end;
background: rgba(14, 35, 27, 0.28);
backdrop-filter: blur(3px);
}
.shell-drawer-backdrop[hidden] {
display: none;
}
.shell-drawer {
width: min(420px, calc(100vw - 24px));
height: 100%;
padding: 24px;
overflow: auto;
background: #fffefa;
box-shadow: -18px 0 52px rgba(16, 63, 46, 0.16);
}
.shell-drawer-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.shell-drawer-heading span {
color: var(--forest);
font-size: 11px;
font-weight: 780;
letter-spacing: 0.1em;
}
.shell-drawer-heading h2 {
margin: 5px 0 0;
font-size: 30px;
}
.shell-drawer-heading > button {
width: 38px;
height: 38px;
border: 1px solid #d7e2dc;
border-radius: 11px;
color: #687a71;
background: #fff;
cursor: pointer;
font-size: 22px;
}
.drawer-copy {
margin: 18px 0;
color: #6d7f76;
font-size: 13px;
line-height: 1.7;
}
.drawer-message-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.drawer-message-grid button {
min-height: 96px;
display: grid;
place-content: center;
gap: 5px;
border: 1px solid #dfe8e2;
border-radius: 14px;
color: #51675d;
background: #f7faf8;
cursor: pointer;
}
.drawer-message-grid span,
.drawer-message-grid strong {
display: block;
}
.drawer-message-grid span {
color: var(--forest-dark);
font-size: 24px;
font-weight: 820;
}
.drawer-message-grid strong {
font-size: 11px;
}
.drawer-primary-action {
width: 100%;
min-height: 44px;
margin-top: 16px;
border: 0;
border-radius: 12px;
color: #fff;
background: var(--forest);
cursor: pointer;
font-weight: 760;
}
.more-service-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.more-service-grid button {
min-height: 112px;
padding: 14px;
display: grid;
align-content: center;
justify-items: start;
gap: 4px;
border: 1px solid #dfe8e2;
border-radius: 15px;
color: var(--ink);
background: #fff;
cursor: pointer;
text-align: left;
}
.more-service-grid button:hover {
border-color: #a9c7b5;
background: #f5faf7;
}
.more-service-grid button:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.more-service-grid button > span {
width: 32px;
height: 32px;
margin-bottom: 3px;
display: grid;
place-items: center;
border-radius: 10px;
color: var(--forest-dark);
background: #e8f3ec;
font-weight: 820;
}
.more-service-grid strong,
.more-service-grid small {
display: block;
}
.more-service-grid strong {
font-size: 13px;
}
.more-service-grid small {
color: #7b8b83;
font-size: 10px;
}
.mobile-tabbar {
display: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid rgba(23, 107, 69, 0.28);
outline-offset: 2px;
}
@media (max-width: 1180px) {
.brand {
min-width: 188px;
}
.brand small {
display: none;
}
.primary-navigation button {
min-width: 80px;
padding: 0 13px;
}
}
@media (min-width: 901px) and (max-height: 800px) {
.hero.workspace-panel {
padding: 16px 20px;
}
.hero.workspace-panel h1 {
font-size: clamp(30px, 2.8vw, 38px);
}
.hero.workspace-panel .home-entry-grid {
margin-top: 10px;
}
.hero.workspace-panel .home-entry-grid button {
min-height: 60px;
}
.home-feed {
margin-top: 11px;
padding-top: 9px;
}
.home-feed-card,
  .home-feed-skeleton,
  .home-feed-empty {
min-height: 100px;
}
.home-feed-list {
max-height: 108px;
}
.hero.workspace-panel .status-line {
margin-top: 6px;
}
.hero.workspace-panel .trust-points {
display: none;
}
}
@media (max-width: 900px) {
:root {
--shell-header-height: 64px;
--shell-nav-height: 0px;
--mobile-tabbar-height: 72px;
}
.header-inner {
padding: 0 12px;
gap: 10px;
}
.brand {
min-width: 42px;
margin: 0;
}
.brand > span:last-child,
  .header-actions .header-action,
  .header-actions .login-button #login-label {
display: none;
}
.header-actions .account-menu-anchor {
display: none;
}
.brand-mark {
width: 40px;
height: 40px;
}
.header-workspace {
max-width: none;
grid-template-columns: minmax(92px, 128px) minmax(0, 1fr);
}
.header-workspace .search-button {
display: none;
}
.header-workspace .location-picker {
grid-column: auto;
padding: 8px 10px;
border-right: 1px solid var(--line);
border-bottom: 0;
font-size: 11px;
}
.header-workspace .search-field {
padding: 0 9px;
}
.header-workspace .search-field input {
font-size: 12px;
}
.login-button {
min-width: 40px;
height: 40px;
padding: 0;
justify-content: center;
}
.primary-navigation {
display: none;
}
.app-shell {
height: calc(100dvh - var(--shell-header-height) - var(--mobile-tabbar-height));
padding: 8px;
display: block;
}
.workspace-main {
width: 100%;
height: 100%;
border-radius: 15px;
}
.workspace-panel,
  .service-section.workspace-panel,
  .local-circle-section.workspace-panel,
  .outdoor-section.workspace-panel,
  .runner-section.workspace-panel,
  .progress-section.workspace-panel,
  .unified-search-section.workspace-panel,
  .messages-section.workspace-panel,
  .account-section.workspace-panel,
  .business-section.workspace-panel {
padding: 18px;
padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.hero.workspace-panel {
display: block;
}
.hero.workspace-panel .hero-visual {
display: none;
}
.hero h1 {
margin: 12px 0;
font-size: clamp(32px, 9vw, 46px);
}
.home-entry-grid {
margin-top: 20px;
}
.home-entry-grid button {
min-height: 78px;
}
.service-section.workspace-panel .service-grid,
  .local-circle-section.workspace-panel .local-circle-list,
  .outdoor-section.workspace-panel .outdoor-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-tabbar {
position: fixed;
z-index: var(--v19-z-fixed, 40);
right: 0;
bottom: 0;
left: 0;
height: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom));
padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: center;
border-top: 1px solid #dce5df;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 -8px 26px rgba(31, 67, 54, 0.08);
backdrop-filter: blur(14px);
}
.mobile-tabbar button {
min-width: 0;
padding: 4px;
display: grid;
place-items: center;
gap: 2px;
border: 0;
color: #718178;
background: transparent;
font-size: 10px;
font-weight: 750;
}
.mobile-tabbar button span {
font-size: 20px;
line-height: 1;
}
.mobile-tabbar button.active {
color: var(--forest);
}
.mobile-tabbar .message-badge {
top: 0;
right: calc(50% - 24px);
}
.mobile-tabbar button.publish span {
width: 40px;
height: 40px;
margin-top: -22px;
display: grid;
place-items: center;
border-radius: 50%;
color: #fff;
background: var(--forest);
box-shadow: 0 8px 20px rgba(23, 107, 69, 0.28);
}
.toast {
bottom: calc(var(--mobile-tabbar-height) + 14px + env(safe-area-inset-bottom));
}
}
@media (max-width: 760px) {
.business-hero-card,
  .business-guidance {
align-items: flex-start;
flex-direction: column;
}
.business-hero-actions {
width: 100%;
}
.business-hero-actions button {
flex: 1;
}
.business-metric-grid,
  .business-board-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.business-metric-grid,
  .business-board-grid {
grid-template-columns: 1fr;
}
.business-hero-actions {
flex-direction: column;
}
.business-board-heading {
align-items: flex-start;
}
}
@media (max-width: 560px) {
.workspace-page-heading {
align-items: flex-start;
}
.workspace-page-heading p {
max-width: 220px;
}
.workspace-heading-actions {
flex-direction: column-reverse;
}
.workspace-heading-actions button,
  .account-heading > button {
padding: 8px 10px;
font-size: 10px;
}
.message-session-note {
margin-top: 9px;
}
.message-tabs {
margin-top: 8px;
}
.message-tabs button {
padding: 10px 5px;
font-size: 12px;
}
.message-card {
padding: 10px;
gap: 9px;
}
.message-card-marker {
width: 34px;
height: 34px;
}
.account-workspace {
margin-top: 10px;
gap: 10px;
}
.account-profile-card,
  .account-block {
padding: 13px;
}
.account-order-grid {
grid-template-columns: repeat(5, minmax(56px, 1fr));
overflow-x: auto;
}
.account-split {
grid-template-columns: 1fr;
gap: 10px;
}
.account-setting-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.account-profile-card > button {
padding: 7px 9px;
}
.account-profile-card small {
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-entry-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px;
}
.home-entry-grid button {
min-height: 72px;
padding: 9px 4px;
}
.home-entry-grid button span {
width: 31px;
height: 31px;
}
.home-entry-grid button strong {
font-size: 10px;
}
.service-section.workspace-panel .service-grid,
  .local-circle-section.workspace-panel .local-circle-list,
  .outdoor-section.workspace-panel .outdoor-list {
grid-template-columns: 1fr;
}
}
.hero.workspace-panel {
display: block;
padding: 22px;
}
.hero.workspace-panel .hero-content {
width: 100%;
max-width: none;
}
.home-welcome {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
}
.home-welcome > div {
min-width: 0;
}
.hero.workspace-panel .eyebrow {
font-size: 11px;
}
.hero.workspace-panel h1 {
margin: 7px 0;
font-size: clamp(30px, 2.7vw, 42px);
line-height: 1.12;
}
.hero.workspace-panel .hero-copy {
max-width: none;
margin: 0;
}
.home-region-context {
flex: 0 0 auto;
min-width: 172px;
min-height: 62px;
padding: 9px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 2px 12px;
border: 0;
border-radius: 14px;
color: var(--forest-dark);
background: #edf5ef;
cursor: pointer;
text-align: left;
}
.home-region-context span {
grid-column: 1 / -1;
color: #708078;
font-size: 10px;
font-weight: 700;
}
.home-region-context strong {
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-region-context small {
align-self: center;
color: var(--forest);
font-size: 10px;
font-weight: 750;
}
.hero.workspace-panel .home-entry-grid {
margin-top: 14px;
}
.hero.workspace-panel .home-entry-grid button {
min-height: 62px;
grid-template-columns: 32px minmax(0, 1fr);
place-items: center start;
gap: 8px;
padding: 9px 10px;
border: 0;
background: #f5f7f2;
box-shadow: none;
text-align: left;
}
.hero.workspace-panel .home-entry-grid button:hover {
background: #eaf3ed;
}
.hero.workspace-panel .home-entry-grid button strong {
font-size: 11px;
}
.home-feed {
min-height: 0;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--shell-border);
}
.home-trusted-events {
margin-top: 14px;
padding: 12px;
border-radius: 14px;
background: #eef3e8;
}
.home-trusted-events[hidden] {
display: none;
}
.home-trusted-events-heading,
.home-trusted-events-heading > div {
display: flex;
align-items: center;
}
.home-trusted-events-heading {
justify-content: space-between;
gap: 10px;
}
.home-trusted-events-heading > div {
gap: 8px;
}
.home-trusted-events-heading span {
color: #8a5c31;
font-size: 10px;
font-weight: 800;
}
.home-trusted-events-heading strong {
font-size: 13px;
}
.home-trusted-events-heading small {
color: #718078;
font-size: 9px;
}
.home-trusted-event-list {
margin-top: 9px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.home-trusted-event-list article {
min-width: 0;
padding: 10px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.76);
}
.home-trusted-event-list article span,
.home-trusted-event-list article strong,
.home-trusted-event-list article p,
.home-trusted-event-list article small {
display: block;
}
.home-trusted-event-list article span {
color: var(--forest);
font-size: 9px;
font-weight: 800;
}
.home-trusted-event-list article strong {
margin-top: 3px;
overflow: hidden;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-trusted-event-list article p {
min-height: 30px;
margin: 4px 0;
overflow: hidden;
color: #607069;
display: -webkit-box;
font-size: 9px;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.home-trusted-event-list article small {
overflow: hidden;
color: #839089;
font-size: 8px;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-feed-heading,
.home-feed-heading > div,
.home-feed-card,
.home-feed-empty > div {
display: flex;
align-items: center;
}
.home-feed-heading {
justify-content: space-between;
gap: 12px;
}
.home-feed-heading > div {
min-width: 0;
gap: 9px;
}
.home-feed-heading span {
color: #8a5c31;
font-size: 10px;
font-weight: 800;
}
.home-feed-heading strong {
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-feed-heading > button,
.home-feed-view-all {
min-height: 32px;
padding: 0 12px;
border: 1px solid #cbd9d0;
border-radius: 9px;
color: var(--forest-dark);
background: #fff;
cursor: pointer;
font-size: 11px;
font-weight: 750;
}
.home-feed-heading > button:disabled {
cursor: wait;
opacity: 0.6;
}
.home-feed-tabs {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
.home-feed-tabs button {
min-height: 34px;
border: 0;
border-radius: 9px;
color: #65786f;
background: #f3f5f1;
cursor: pointer;
font-size: 11px;
font-weight: 750;
}
.home-feed-tabs button:hover,
.home-feed-tabs button.active {
color: #fff;
background: var(--forest);
}
.home-feed-status {
min-height: 18px;
margin: 8px 0 6px;
color: #75867d;
font-size: 10px;
}
.home-feed-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.home-feed-card {
min-width: 0;
min-height: 112px;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
align-items: stretch;
gap: 8px;
padding: 11px;
border: 0;
border-radius: 12px;
background: #f7f8f4;
}
.home-feed-card > div {
min-width: 0;
}
.home-feed-card-tag {
color: var(--forest);
font-size: 9px;
font-weight: 800;
}
.home-feed-card strong,
.home-feed-card p,
.home-feed-card small {
display: block;
overflow: hidden;
}
.home-feed-card strong {
margin-top: 4px;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-feed-card p {
min-height: 31px;
margin: 5px 0;
color: #64746c;
display: -webkit-box;
font-size: 10px;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.home-feed-card small {
color: #8a9891;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-feed-card > button {
width: 100%;
min-height: 30px;
padding: 0 9px;
border: 0;
border-radius: 8px;
color: var(--forest-dark);
background: #e8f2ec;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.home-feed-skeleton {
min-height: 118px;
border-radius: 12px;
background: linear-gradient(90deg, #eef2ef 25%, #f8faf8 50%, #eef2ef 75%);
background-size: 200% 100%;
animation: home-feed-loading 1.2s ease-in-out infinite;
}
.home-feed-empty {
min-height: 118px;
padding: 15px;
display: grid;
place-items: center;
gap: 6px;
border: 1px dashed #cddad2;
border-radius: 12px;
background: #fbfcf9;
text-align: center;
}
.home-feed-empty[hidden] {
display: none;
}
.home-feed-empty strong {
font-size: 13px;
}
.home-feed-empty p {
margin: 0;
color: #77877f;
font-size: 10px;
}
.home-feed-empty > div {
gap: 7px;
}
.home-feed-empty button {
min-height: 30px;
padding: 0 10px;
border: 1px solid #c5d5cb;
border-radius: 8px;
color: var(--forest-dark);
background: #fff;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.home-feed-empty button:last-child {
border-color: var(--forest);
color: #fff;
background: var(--forest);
}
.home-feed-view-all {
margin-top: 8px;
}
.hero.workspace-panel .status-line {
margin-top: 12px;
}
.hero.workspace-panel .trust-points {
margin-top: 8px;
}
@keyframes home-feed-loading {
from {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
@media (max-width: 1180px) {
.home-feed-list {
max-height: 230px;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: auto;
scrollbar-gutter: stable;
}
}
@media (max-width: 900px) {
.hero.workspace-panel {
padding: 14px;
}
.hero.workspace-panel h1 {
margin: 5px 0;
font-size: clamp(24px, 7vw, 32px);
}
.home-welcome {
align-items: center;
gap: 10px;
}
.home-region-context {
min-width: 116px;
min-height: 54px;
padding: 7px 9px;
grid-template-columns: 1fr;
gap: 1px;
}
.home-region-context span {
display: none;
}
.home-region-context strong,
  .home-region-context small {
max-width: 98px;
}
.hero.workspace-panel .hero-copy {
font-size: 12px;
line-height: 1.5;
}
.hero.workspace-panel .home-entry-grid {
margin-top: 11px;
}
.hero.workspace-panel .home-entry-grid button {
min-height: 58px;
padding: 7px 5px;
display: grid;
grid-template-columns: 1fr;
place-items: center;
gap: 3px;
text-align: center;
}
.hero.workspace-panel .home-entry-grid button span {
width: 28px;
height: 28px;
}
.home-feed {
margin-top: 12px;
padding-top: 10px;
}
.home-feed-list {
max-height: 172px;
grid-template-columns: 1fr;
}
.home-feed-card,
  .home-feed-skeleton,
  .home-feed-empty {
min-height: 90px;
}
.home-feed-card p {
min-height: auto;
-webkit-line-clamp: 1;
}
.hero.workspace-panel .status-line {
margin-top: 8px;
}
.hero.workspace-panel .trust-points {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.home-feed-skeleton {
animation: none;
}
}
.detail-action-buttons {
display: flex;
gap: 10px;
}
.detail-action-buttons .secondary {
border: 1px solid #b8d0c5;
background: #fff;
color: #176b50;
}
.conversation-modal {
position: relative;
width: min(620px, calc(100vw - 28px));
max-height: min(760px, calc(100vh - 28px));
padding: 26px;
overflow: hidden;
border-radius: 26px;
background: #fff;
box-shadow: 0 28px 80px rgb(21 58 46 / 24%);
}
.conversation-message-list {
height: min(430px, 48vh);
margin: 20px 0 14px;
padding: 14px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
border: 1px solid #e1ebe6;
border-radius: 18px;
background: #f7faf8;
}
.conversation-message-list .conversation-empty {
margin: auto;
color: #718078;
text-align: center;
}
.conversation-bubble {
max-width: 78%;
padding: 10px 13px;
align-self: flex-start;
border-radius: 16px 16px 16px 4px;
background: #fff;
box-shadow: 0 4px 14px rgb(38 77 62 / 8%);
}
.conversation-bubble.mine {
align-self: flex-end;
border-radius: 16px 16px 4px;
background: #176b50;
color: #fff;
}
.conversation-bubble small {
display: block;
margin-top: 5px;
color: #809088;
}
.conversation-bubble.mine small {
color: #d7e9e1;
}
.conversation-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: stretch;
}
.conversation-form textarea {
width: 100%;
min-height: 62px;
resize: vertical;
}
@media (max-width: 640px) {
.conversation-modal {
width: 100%;
max-height: 88vh;
margin-top: auto;
padding: 22px 16px 16px;
border-radius: 24px 24px 0 0;
}
.conversation-message-list {
height: 45vh;
}
}
.local-circle-section.workspace-panel {
padding: 18px 22px;
display: grid;
grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
grid-template-areas:
    'heading'
    'channels'
    'categories'
    'topics'
    'feed'
    'pagination';
gap: 9px;
overflow: hidden;
}
.local-circle-section.workspace-panel .local-circle-heading {
grid-area: heading;
align-items: center;
gap: 18px;
}
.local-circle-section.workspace-panel .local-circle-heading h2 {
margin: 3px 0;
font-size: clamp(28px, 3vw, 38px);
}
.local-circle-section.workspace-panel .local-circle-heading p {
line-height: 1.5;
}
.local-circle-section.workspace-panel .local-circle-actions {
flex: 0 0 auto;
}
.local-circle-section.workspace-panel .local-circle-actions button,
.local-circle-section.workspace-panel .local-circle-controls button,
.local-circle-section.workspace-panel .local-circle-discovery-tools button,
.local-circle-section.workspace-panel .local-circle-discovery-tools select {
min-height: 34px;
padding: 0 11px;
border-radius: 9px;
}
.local-circle-section.workspace-panel .local-circle-controls {
grid-area: channels;
margin: 0;
padding: 7px 9px;
align-items: center;
border: 0;
border-radius: 12px;
background: #f3f6f2;
}
.local-circle-section.workspace-panel .local-circle-discovery-tools {
grid-area: categories;
margin: 0;
}
.local-circle-section.workspace-panel .local-circle-topic-strip {
grid-area: topics;
min-height: 31px;
margin: 0;
gap: 7px;
}
.local-circle-section.workspace-panel .local-circle-topic-strip button {
min-height: 30px;
padding: 5px 10px;
font-size: 10px;
}
.local-circle-feed {
grid-area: feed;
min-height: 0;
display: grid;
overflow: hidden;
}
.local-circle-feed > .local-circle-list,
.local-circle-feed > .local-circle-empty {
min-height: 0;
grid-area: 1 / 1;
}
.local-circle-section.workspace-panel .local-circle-list {
height: 100%;
margin: 0;
padding-right: 4px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
align-content: start;
overflow-y: auto;
scrollbar-gutter: stable;
}
.local-circle-section.workspace-panel .local-circle-card {
padding: 14px;
border: 0;
border-radius: 14px;
background: #f7f8f4;
box-shadow: none;
}
.local-circle-section.workspace-panel .local-circle-card h3 {
margin: 11px 0 6px;
font-size: 15px;
}
.local-circle-section.workspace-panel .local-circle-card-body {
min-height: 40px;
line-height: 1.6;
}
.local-circle-section.workspace-panel .local-circle-card-location {
margin: 9px 0 10px;
}
.local-circle-section.workspace-panel .local-circle-card-footer {
padding-top: 9px;
}
.local-circle-section.workspace-panel .local-circle-empty {
z-index: 1;
min-height: 100%;
margin: 0;
padding: 20px;
display: grid;
place-content: center;
border: 1px dashed #cfdbd3;
}
.local-circle-section.workspace-panel .local-circle-empty[hidden] {
display: none;
}
.local-circle-pagination {
grid-area: pagination;
min-height: 34px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.local-circle-pagination[hidden] {
display: none;
}
.local-circle-pagination button {
min-height: 32px;
padding: 0 12px;
border: 1px solid #cbd9d0;
border-radius: 9px;
color: var(--forest-dark);
background: #fff;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.local-circle-pagination button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.local-circle-pagination span {
color: #718178;
font-size: 10px;
}
.local-circle-detail-media:empty {
display: none;
}
.local-circle-detail-media {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.local-circle-detail-media img,
.local-circle-detail-media video,
.local-circle-detail-media a {
width: 100%;
min-height: 120px;
max-height: 320px;
border-radius: 12px;
object-fit: cover;
background: #f1f5f2;
}
.local-circle-detail-media a {
display: grid;
place-items: center;
color: var(--forest);
font-size: 12px;
font-weight: 750;
}
@media (max-width: 900px) {
.local-circle-section.workspace-panel {
padding: 12px;
grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
gap: 7px;
}
.local-circle-section.workspace-panel .local-circle-heading {
align-items: flex-start;
gap: 10px;
}
.local-circle-section.workspace-panel .local-circle-heading h2 {
font-size: 27px;
}
.local-circle-section.workspace-panel .local-circle-heading p {
font-size: 11px;
}
.local-circle-section.workspace-panel .local-circle-actions {
gap: 5px;
}
.local-circle-section.workspace-panel .local-circle-actions button {
min-height: 32px;
padding: 0 8px;
font-size: 10px;
}
.local-circle-section.workspace-panel .local-circle-controls {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.local-circle-section.workspace-panel .local-circle-channels {
grid-column: 1 / -1;
}
.local-circle-section.workspace-panel .local-circle-controls > span {
margin: 0;
}
.local-circle-section.workspace-panel .local-circle-discovery-tools {
overflow-x: auto;
scrollbar-width: none;
}
.local-circle-section.workspace-panel .local-circle-categories,
  .local-circle-section.workspace-panel .local-circle-nearby {
flex: 0 0 auto;
overflow: visible;
}
.local-circle-section.workspace-panel .local-circle-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.local-circle-section.workspace-panel .local-circle-heading {
display: grid;
grid-template-columns: 1fr;
}
.local-circle-section.workspace-panel .local-circle-heading p,
  .local-circle-section.workspace-panel .section-kicker {
display: none;
}
.local-circle-section.workspace-panel .local-circle-actions {
align-self: center;
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.local-circle-section.workspace-panel .local-circle-actions button {
padding: 0 7px;
}
.local-circle-section.workspace-panel .local-circle-card-header > div > span {
width: 32px;
height: 32px;
}
.local-circle-detail-media {
grid-template-columns: 1fr;
}
}
.publish-modal {
width: min(920px, 100%);
}
.publish-flow-steps {
max-width: 430px;
margin: 18px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
list-style: none;
}
.publish-flow-steps li {
position: relative;
display: flex;
align-items: center;
gap: 7px;
color: #8b9891;
font-size: 10px;
font-weight: 750;
}
.publish-flow-steps li:not(:last-child)::after {
height: 1px;
flex: 1;
margin-right: 8px;
background: #dfe7e2;
content: '';
}
.publish-flow-steps i {
width: 23px;
height: 23px;
display: grid;
flex: 0 0 auto;
place-items: center;
border-radius: 50%;
color: #75867d;
background: #edf2ee;
font-size: 9px;
font-style: normal;
}
.publish-flow-steps li.active,
.publish-flow-steps li.complete {
color: var(--forest-dark);
}
.publish-flow-steps li.active i,
.publish-flow-steps li.complete i {
color: #fff;
background: var(--forest);
}
.publish-category-tabs {
padding: 5px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
border: 1px solid #e0e8e2;
border-radius: 15px;
background: #f3f6f3;
}
.publish-category-tabs button {
min-width: 0;
padding: 10px 8px;
display: grid;
gap: 2px;
border: 0;
border-radius: 11px;
color: #708078;
background: transparent;
cursor: pointer;
text-align: center;
}
.publish-category-tabs button:hover,
.publish-category-tabs button:focus-visible {
color: var(--forest-dark);
background: rgba(255, 255, 255, 0.72);
}
.publish-category-tabs button.active {
color: var(--forest-dark);
background: #fff;
box-shadow: 0 5px 16px rgba(24, 51, 42, 0.09);
}
.publish-category-tabs span,
.publish-category-tabs small {
display: block;
}
.publish-category-tabs span {
font-size: 12px;
font-weight: 820;
}
.publish-category-tabs small {
color: #8a9790;
font-size: 9px;
}
.publish-choice-pane {
gap: 12px;
}
.publish-choice-group[hidden] {
display: none;
}
.publish-choice-group {
min-height: 230px;
padding: 22px;
border-color: #dce7e0;
background:
    radial-gradient(circle at 92% 10%, rgba(226, 240, 230, 0.88), transparent 32%),
    linear-gradient(145deg, #fbfdfb, #f5f8f4);
}
.publish-choice-group > div:first-child {
margin-bottom: 17px;
}
.publish-choice-group > div:first-child span {
font-size: 18px;
}
.publish-choice-group > div:first-child small {
font-size: 11px;
}
.publish-type-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.publish-type-grid button {
position: relative;
min-height: 92px;
padding: 16px 36px 16px 16px;
align-content: center;
border-radius: 14px;
}
.publish-type-grid button:not(:disabled)::after {
position: absolute;
top: 50%;
right: 15px;
color: #93a198;
font-size: 18px;
content: '›';
transform: translateY(-50%);
}
.publish-type-grid button b {
font-size: 14px;
}
.publish-type-grid button small {
font-size: 10px;
}
.message-workspace-shell {
min-height: 0;
margin-top: 14px;
flex: 1;
display: grid;
grid-template-columns: 210px minmax(0, 1fr);
overflow: hidden;
border: 1px solid #dfe8e2;
border-radius: 18px;
background: #fff;
}
.message-workspace-shell .message-tabs {
min-height: 0;
margin: 0;
padding: 10px;
display: grid;
grid-template-columns: 1fr;
align-content: start;
gap: 5px;
border: 0;
border-right: 1px solid #e3eae5;
background: #f6f8f5;
}
.message-workspace-shell .message-tabs button {
min-width: 0;
padding: 11px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
border-radius: 12px;
text-align: left;
}
.message-workspace-shell .message-tabs button::after {
display: none;
}
.message-workspace-shell .message-tabs button.active {
background: #fff;
box-shadow: 0 4px 14px rgba(24, 51, 42, 0.08);
}
.message-workspace-shell .message-tabs button > i {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 11px;
color: #527064;
background: #e8f0ea;
font-size: 11px;
font-style: normal;
font-weight: 820;
}
.message-workspace-shell .message-tabs button > span {
min-width: 0;
margin: 0;
padding: 0;
display: grid;
gap: 2px;
color: inherit;
background: transparent;
}
.message-workspace-shell .message-tabs b,
.message-workspace-shell .message-tabs small {
display: block;
}
.message-workspace-shell .message-tabs b {
font-size: 12px;
}
.message-workspace-shell .message-tabs small {
overflow: hidden;
color: #88958e;
font-size: 9px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.message-workspace-shell .message-tabs em {
min-width: 22px;
padding: 3px 6px;
border-radius: 999px;
color: #61746a;
background: #e9efeb;
font-size: 9px;
font-style: normal;
text-align: center;
}
.message-workspace-stage {
min-width: 0;
min-height: 0;
padding: 10px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.message-workspace-stage .message-list {
margin-top: 0;
}
.account-role-chips {
margin-top: 7px;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.account-role-chips i {
padding: 4px 7px;
display: block;
border: 1px solid #cfe1d5;
border-radius: 999px;
color: var(--forest-dark);
background: #eff7f1;
font-size: 9px;
font-style: normal;
font-weight: 760;
}
@media (max-width: 900px) {
#publish-modal {
padding: 12px 0 0;
place-items: end center;
}
#publish-modal .publish-modal {
width: 100%;
max-height: calc(100dvh - 12px);
padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
border-radius: 24px 24px 0 0;
}
.publish-flow-steps {
margin-top: 13px;
}
.publish-category-tabs {
overflow-x: auto;
grid-template-columns: repeat(5, minmax(94px, 1fr));
scrollbar-width: none;
}
.publish-category-tabs small {
display: none;
}
.publish-choice-group {
min-height: auto;
padding: 16px;
}
.publish-choice-group > div:first-child {
align-items: baseline;
flex-direction: row;
}
.publish-type-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.message-workspace-shell {
margin-top: 9px;
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
border-radius: 14px;
}
.message-workspace-shell .message-tabs {
padding: 5px;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-right: 0;
border-bottom: 1px solid #e3eae5;
}
.message-workspace-shell .message-tabs button {
padding: 8px 5px;
display: grid;
grid-template-columns: 1fr auto;
gap: 4px;
text-align: center;
}
.message-workspace-shell .message-tabs button > i,
  .message-workspace-shell .message-tabs small {
display: none;
}
.message-workspace-shell .message-tabs button > span {
display: block;
}
.message-workspace-stage {
padding: 8px;
}
}
@media (max-width: 560px) {
.publish-flow-steps li span {
display: none;
}
.publish-flow-steps li:not(:last-child)::after {
margin-right: 12px;
}
.publish-choice-pane {
margin-top: 14px;
}
.publish-type-grid button {
min-height: 82px;
padding: 13px 29px 13px 13px;
}
.account-role-chips {
max-width: 190px;
}
}
.service-section.workspace-panel,
.outdoor-section.workspace-panel {
display: flex;
flex-direction: column;
overflow: hidden;
}
.service-grid[hidden] {
display: none;
}
.catalog-workspace-heading {
min-height: 72px;
align-items: center;
}
.catalog-workspace-heading h2 {
margin: 5px 0 3px;
font-family: inherit;
font-size: clamp(27px, 3vw, 38px);
}
.catalog-workspace-heading p {
margin: 0;
color: #718178;
font-size: 12px;
}
.catalog-workspace-heading .section-actions {
display: flex;
align-items: center;
gap: 8px;
}
.catalog-region-context {
min-height: 42px;
padding: 7px 12px;
display: grid;
gap: 1px;
border: 1px solid var(--v14-home-line);
border-radius: 12px;
color: var(--v14-home-muted);
background: var(--v14-home-surface);
cursor: pointer;
text-align: left;
}
.catalog-region-context span {
font-size: 9px;
font-weight: 750;
letter-spacing: 0.08em;
}
.catalog-region-context strong {
color: var(--v14-home-brand);
font-size: 12px;
}
.catalog-workspace {
min-height: 0;
margin-top: 13px;
flex: 1;
display: flex;
flex-direction: column;
border-radius: 17px;
}
.catalog-workspace .catalog-heading {
min-height: 62px;
padding: 11px 14px;
gap: 16px;
}
.catalog-workspace .catalog-heading > div:first-child {
min-width: 220px;
}
.catalog-tools {
min-width: 0;
display: flex !important;
align-items: center;
justify-content: flex-end;
gap: 7px !important;
}
.catalog-search-field {
width: min(300px, 28vw);
}
.catalog-search-field input {
width: 100%;
height: 36px;
padding: 0 12px;
border: 1px solid #d8e2dc;
border-radius: 10px;
outline: 0;
color: var(--ink);
background: #fbfcfa;
font-size: 11px;
}
.catalog-search-field input:focus {
border-color: #8fb29e;
box-shadow: 0 0 0 3px rgba(23, 107, 69, 0.09);
}
.catalog-tools button[hidden] {
display: none;
}
.catalog-workspace .catalog-filters {
padding: 7px 10px;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 5px;
overflow: visible;
}
.catalog-workspace .catalog-filters button {
min-width: 0;
min-height: 36px;
padding: 7px 6px;
border-radius: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalog-workspace .catalog-filters button.active {
box-shadow: 0 5px 14px rgba(23, 107, 69, 0.18);
}
.catalog-workspace .catalog-list {
min-height: 0;
padding: 14px;
flex: 1;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: minmax(178px, max-content);
gap: 12px;
align-content: start;
overflow: auto;
scrollbar-gutter: stable;
background: color-mix(in srgb, var(--v14-home-bg) 58%, #fff);
}
.catalog-workspace .catalog-list[hidden] {
display: none;
}
.catalog-workspace .catalog-card {
min-width: 0;
min-height: 178px;
padding: 16px;
display: flex;
flex-direction: column;
border: 1px solid var(--v14-home-line);
border-radius: 14px;
background: var(--v14-home-surface);
box-shadow: 0 8px 22px rgba(64, 72, 51, 0.05);
}
.catalog-workspace .catalog-card:nth-child(2n),
.catalog-workspace .catalog-card:nth-child(3n) {
border-right: 1px solid var(--v14-home-line);
}
.catalog-workspace .catalog-card h3 {
margin: 11px 0 6px;
font-size: 15px;
}
.catalog-workspace .catalog-card p {
min-height: 32px;
margin-top: 7px;
font-size: 11px;
}
.catalog-card-identity {
margin-top: -1px;
overflow: hidden;
color: var(--v14-home-brand);
font-size: 10px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalog-workspace .catalog-card-footer {
margin-top: auto;
padding-top: 12px;
}
.catalog-workspace .catalog-card > strong,
.catalog-workspace .catalog-card-footer > strong {
margin-top: 0;
font-size: 14px;
}
.catalog-workspace .catalog-empty {
min-height: 0;
flex: 1;
place-content: center;
}
.catalog-workspace .catalog-empty:not([hidden]) {
display: grid;
}
.catalog-empty > div {
margin-top: 13px;
display: flex;
justify-content: center;
gap: 8px;
}
.catalog-empty > div button {
min-height: 36px;
padding: 0 14px;
border: 1px solid #bed2c5;
border-radius: 10px;
color: var(--forest-dark);
background: #fff;
cursor: pointer;
font-size: 11px;
font-weight: 750;
}
.catalog-empty > div button:last-child {
color: #fff;
background: var(--forest);
}
.catalog-pagination {
min-height: 48px;
padding: 8px 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
border-top: 1px solid #e5ebe7;
color: #718178;
background: #fbfcfa;
font-size: 10px;
font-weight: 750;
}
.catalog-pagination[hidden] {
display: none;
}
.catalog-pagination button {
min-height: 32px;
padding: 0 13px;
border: 1px solid #d3e0d7;
border-radius: 9px;
color: var(--forest-dark);
background: #fff;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.catalog-pagination button:disabled {
cursor: not-allowed;
opacity: 0.4;
}
.outdoor-section.workspace-panel .outdoor-list {
min-height: 0;
flex: 1;
align-content: start;
overflow: auto;
scrollbar-gutter: stable;
}
.outdoor-pagination {
flex: 0 0 auto;
border: 1px solid #e1e8e3;
border-radius: 12px;
}
.more-service-groups {
display: grid;
gap: 16px;
}
.more-service-group {
display: grid;
gap: 8px;
}
.more-service-group h3 {
margin: 0;
color: #5f746a;
font-size: 11px;
letter-spacing: 0.08em;
}
.more-service-group .more-service-grid button {
min-height: 88px;
padding: 11px;
}
.more-service-group .more-service-grid button > span {
width: 34px;
height: 34px;
}
@media (max-width: 900px) {
.catalog-workspace-heading {
min-height: 58px;
}
.catalog-workspace-heading p {
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalog-workspace .catalog-heading {
align-items: stretch;
flex-direction: column;
gap: 8px;
}
.catalog-workspace .catalog-heading > div:first-child {
min-width: 0;
}
.catalog-tools {
width: 100%;
}
.catalog-search-field {
width: auto;
flex: 1;
}
.catalog-workspace .catalog-filters {
display: flex;
overflow-x: auto;
}
.catalog-workspace .catalog-filters button {
min-width: max-content;
padding-right: 12px;
padding-left: 12px;
}
.catalog-workspace .catalog-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: minmax(174px, auto);
}
.catalog-workspace .catalog-card:nth-child(3n) {
border-right: 1px solid #edf1ee;
}
.catalog-workspace .catalog-card:nth-child(2n) {
border-right: 0;
}
}
@media (max-width: 560px) {
.service-section.workspace-panel,
  .outdoor-section.workspace-panel {
padding: 12px;
}
.catalog-workspace-heading h2 {
font-size: 26px;
}
.catalog-workspace-heading .section-kicker,
  .catalog-workspace-heading p {
display: none;
}
.catalog-workspace-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 9px;
}
.catalog-workspace-heading .section-actions {
gap: 6px;
}
.catalog-region-context {
min-height: 39px;
padding: 6px 9px;
}
.catalog-region-context span {
display: none;
}
.catalog-workspace-heading .publish-button {
min-height: 39px;
padding: 0 11px;
white-space: nowrap;
}
.catalog-workspace {
margin-top: 8px;
}
.catalog-workspace .catalog-heading {
min-height: 52px;
padding: 8px;
}
.catalog-workspace .catalog-heading > div:first-child {
display: grid;
gap: 2px;
}
.catalog-workspace .catalog-heading > div:first-child > span {
display: none;
}
.catalog-workspace .catalog-heading > div:first-child strong {
font-size: 11px;
}
.catalog-workspace .catalog-filters {
padding-right: 24px;
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.catalog-workspace .catalog-list {
padding: 9px;
grid-template-columns: 1fr;
grid-auto-rows: minmax(180px, max-content);
gap: 9px;
}
.catalog-workspace .catalog-card,
  .catalog-workspace .catalog-card:nth-child(2n),
  .catalog-workspace .catalog-card:nth-child(3n) {
border-right: 0;
}
.catalog-pagination {
min-height: 42px;
padding: 5px 8px;
}
.outdoor-pagination {
margin-top: 6px;
}
}
.orders-section.workspace-panel {
padding: 26px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.orders-heading {
min-height: 72px;
align-items: center;
}
.orders-heading h2 {
margin: 5px 0 3px;
font-family: inherit;
font-size: clamp(27px, 3vw, 38px);
}
.orders-heading p {
margin: 0;
color: #718178;
font-size: 12px;
}
.orders-heading > button {
min-height: 38px;
padding: 0 14px;
border: 1px solid #c9d9cf;
border-radius: 10px;
color: var(--forest-dark);
background: #fff;
cursor: pointer;
font-size: 11px;
font-weight: 760;
}
.orders-workspace {
min-height: 0;
margin-top: 13px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.orders-workspace[hidden] {
display: none;
}
.order-status-overview {
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 7px;
}
.order-status-overview button {
min-width: 0;
min-height: 62px;
padding: 9px 10px;
display: grid;
gap: 2px;
border: 1px solid #dde7e1;
border-radius: 12px;
color: #667a70;
background: #fff;
cursor: pointer;
text-align: left;
}
.order-status-overview button:hover,
.order-status-overview button.active {
border-color: #9ebdac;
color: var(--forest-dark);
background: #eef6f1;
}
.order-status-overview strong,
.order-status-overview span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-status-overview strong {
font-size: 18px;
}
.order-status-overview span {
font-size: 10px;
font-weight: 720;
}
.order-board {
min-height: 0;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #e1e8e3;
border-radius: 16px;
background: #fff;
}
.order-board .transaction-notice {
min-height: 38px;
margin: 0;
padding: 9px 14px;
flex: 0 0 auto;
border: 0;
border-bottom: 1px solid #e4ece6;
border-radius: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-board .order-filter-toolbar {
min-height: 48px;
margin: 0;
padding: 6px 9px;
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
border: 0;
border-bottom: 1px solid #e6ece8;
border-radius: 0;
background: #fbfcfa;
}
.order-board .order-filter-toolbar button {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-board .order-filter-summary {
min-height: 30px;
margin: 0;
padding: 8px 14px 5px;
flex: 0 0 auto;
}
.order-list {
min-height: 0;
padding: 0 10px 10px;
flex: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: minmax(150px, max-content);
align-content: start;
gap: 8px;
overflow: auto;
scrollbar-gutter: stable;
}
.order-list[hidden] {
display: none;
}
.order-list .order-card {
min-width: 0;
padding: 13px;
grid-template-columns: minmax(0, 1fr) auto;
align-content: start;
border: 1px solid #e3e9e5;
border-radius: 12px;
background: #fff;
}
.order-list .order-card > small {
grid-column: 1 / -1;
}
.order-list .order-progress {
margin-top: 7px;
}
.order-list .order-actions button {
min-height: 32px;
padding: 0 10px;
font-size: 10px;
}
.order-empty {
min-height: 0;
flex: 1;
place-content: center;
text-align: center;
}
.order-empty:not([hidden]) {
display: grid;
}
.order-pagination {
min-height: 44px;
padding: 6px 12px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
border-top: 1px solid #e5ebe7;
color: #718178;
background: #fbfcfa;
font-size: 10px;
font-weight: 750;
}
.order-pagination[hidden] {
display: none;
}
.order-pagination button {
min-height: 30px;
padding: 0 12px;
border: 1px solid #d3e0d7;
border-radius: 9px;
color: var(--forest-dark);
background: #fff;
cursor: pointer;
font-size: 10px;
font-weight: 750;
}
.order-pagination button:disabled {
cursor: not-allowed;
opacity: 0.4;
}
@media (max-width: 900px) {
.order-status-overview {
display: flex;
overflow-x: auto;
}
.order-status-overview button {
min-width: 116px;
}
.order-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.orders-section.workspace-panel {
padding: 12px;
}
.orders-heading {
min-height: 60px;
}
.orders-heading h2 {
font-size: 26px;
}
.orders-heading .section-kicker,
  .orders-heading p {
display: none;
}
.orders-workspace {
margin-top: 7px;
gap: 7px;
}
.order-status-overview button {
min-width: 96px;
min-height: 54px;
}
.order-board .transaction-notice {
display: none;
}
.order-board .order-filter-toolbar {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.order-board .order-filter-toolbar button {
min-width: max-content;
}
.order-list {
padding: 0 7px 7px;
}
}
body {
color: var(--v10-text-primary);
background: var(--v10-bg-page);
}
#home.hero.workspace-panel {
padding: 18px 24px 20px;
background: var(--v10-bg-page);
}
#home .hero-content {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
grid-template-rows: auto 1fr;
gap: 14px 20px;
}
.v10-home-stage {
min-height: 226px;
position: relative;
overflow: hidden;
display: grid;
grid-column: 1 / -1;
grid-template-columns: minmax(380px, 0.85fr) minmax(420px, 1.15fr);
border: 1px solid var(--v10-border-soft);
border-radius: var(--v10-radius-lg);
background: linear-gradient(115deg, #fffdf8 0 47%, #f0eadc 47% 100%);
box-shadow: var(--v10-shadow-soft);
}
.v10-home-stage .home-welcome {
min-width: 0;
position: relative;
z-index: 2;
padding: 27px 20px 26px 30px;
align-items: flex-start;
}
.v10-home-stage .home-welcome h1 {
margin: 7px 0 8px;
color: var(--v10-brand-900);
font-family: 'Songti SC', 'Noto Serif SC', serif;
font-size: clamp(34px, 3.1vw, 49px);
line-height: 1.12;
letter-spacing: -0.04em;
}
.v10-home-stage .home-welcome .eyebrow {
color: var(--v10-accent-terracotta);
}
.v10-home-stage .hero-copy {
color: var(--v10-text-secondary);
font-size: 14px;
}
.v10-home-stage .home-region-context {
min-width: 132px;
padding: 11px 13px;
border-color: var(--v10-border-soft);
color: var(--v10-brand-900);
background: rgba(255, 254, 251, 0.86);
box-shadow: none;
}
.v10-rural-scene {
width: 100%;
height: 100%;
min-height: 226px;
align-self: end;
}
.scene-sky {
fill: #f0eadc;
}
.scene-sun {
fill: var(--v10-accent-wheat);
opacity: 0.9;
}
.scene-hill-back {
fill: #c9d1bb;
}
.scene-hill-front {
fill: var(--v10-accent-sage);
}
.scene-field {
fill: #dfc98f;
}
.scene-path {
fill: #f5ede0;
}
.scene-house path:first-child {
fill: #faf5e8;
}
.scene-house path:nth-child(2) {
fill: var(--v10-accent-terracotta);
}
.scene-house path:last-child {
fill: var(--v10-brand-700);
}
.scene-house-two path:nth-child(2) {
fill: #b98654;
}
.scene-tree circle {
fill: var(--v10-brand-700);
}
.scene-tree path {
fill: #8d6948;
}
.scene-tree.small {
transform-box: fill-box;
transform-origin: center bottom;
}
.scene-crop {
fill: none;
stroke: #a27e42;
stroke-width: 3;
stroke-linecap: round;
opacity: 0.55;
}
#home .home-entry-grid {
grid-column: 1;
grid-row: 2;
gap: 7px;
padding: 12px;
border: 1px solid var(--v10-border-soft);
border-radius: var(--v10-radius-md);
background: var(--v10-bg-surface);
}
#home .home-entry-grid button {
min-height: 82px;
padding: 9px 7px;
border: 0;
border-radius: 13px;
background: transparent;
box-shadow: none;
}
#home .home-entry-grid button:hover {
background: var(--v10-bg-muted);
transform: translateY(-1px);
}
#home .home-entry-grid button strong {
color: var(--v10-text-primary);
font-size: 12px;
}
#home .home-entry-icon {
width: 39px;
height: 39px;
margin-bottom: 6px;
border-radius: 13px;
color: var(--v10-brand-900);
font-family: 'Songti SC', serif;
font-size: 16px;
}
#home .home-entry-icon.merchant {
background: var(--v10-category-merchant);
}
#home .home-entry-icon.service {
background: var(--v10-category-service);
}
#home .home-entry-icon.agriculture {
color: #8c532f;
background: var(--v10-category-agriculture);
}
#home .home-entry-icon.secondhand {
color: #8b6a28;
background: var(--v10-category-secondhand);
}
#home .home-entry-icon.jobs {
color: #655686;
background: var(--v10-category-jobs);
}
#home .home-entry-icon.runner {
color: #9a5040;
background: var(--v10-category-runner);
}
#home .home-entry-icon.outdoor {
color: #25624c;
background: var(--v10-category-outdoor);
}
#home .home-entry-icon.more {
color: #686a62;
background: var(--v10-category-more);
}
#home .home-feed {
min-height: 0;
grid-column: 2;
grid-row: 2;
padding: 12px 14px;
border: 1px solid var(--v10-border-soft);
border-radius: var(--v10-radius-md);
background: var(--v10-bg-surface);
box-shadow: none;
}
#home .home-feed-heading,
#home .home-feed-tabs {
margin-bottom: 6px;
}
#home .home-feed-heading strong {
color: var(--v10-brand-900);
}
#home .home-feed-tabs button.active {
color: var(--v10-brand-900);
border-color: var(--v10-brand-700);
background: var(--v10-brand-100);
}
#home .home-feed-list {
max-height: 154px;
overflow: auto;
}
#home .home-feed-card {
min-height: 48px;
padding: 9px 4px;
border: 0;
border-bottom: 1px solid var(--v10-border-soft);
border-radius: 0;
background: transparent;
box-shadow: none;
}
#local-circle.workspace-panel {
background: var(--v10-bg-page);
}
#local-circle .local-circle-heading,
#local-circle .local-circle-controls,
#local-circle .local-circle-board {
border-color: var(--v10-border-soft);
background: var(--v10-bg-surface);
box-shadow: none;
}
#local-circle .local-circle-heading {
position: relative;
overflow: hidden;
background: linear-gradient(105deg, var(--v10-bg-surface) 0 64%, #f0eadc 64% 100%);
}
#local-circle .local-circle-heading::before,
#local-circle .local-circle-heading::after {
position: absolute;
pointer-events: none;
content: '';
}
#local-circle .local-circle-heading::before {
right: 48px;
bottom: -56px;
width: 230px;
height: 110px;
border-radius: 50% 50% 0 0;
background: var(--v10-accent-sage);
opacity: 0.6;
transform: rotate(-7deg);
}
#local-circle .local-circle-heading::after {
right: 44px;
top: 14px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--v10-accent-wheat);
opacity: 0.86;
}
#local-circle .local-circle-heading > * {
position: relative;
z-index: 1;
}
#local-circle .local-circle-heading h2,
#local-circle .local-circle-heading strong {
color: var(--v10-brand-900);
}
#local-circle .local-circle-card,
#local-circle .local-circle-feed-card {
border-color: var(--v10-border-soft);
border-radius: var(--v10-radius-md);
background: var(--v10-bg-surface);
box-shadow: none;
}
@media (max-width: 1080px) {
.v10-home-stage {
grid-template-columns: 1fr 1fr;
}
#home .hero-content {
grid-template-columns: 1fr;
}
#home .home-entry-grid,
  #home .home-feed {
grid-column: 1;
}
#home .home-feed {
grid-row: 3;
}
}
@media (max-width: 720px) {
#home.hero.workspace-panel {
padding: 10px 12px 80px;
}
.v10-home-stage {
min-height: 245px;
display: block;
background: #f0eadc;
}
.v10-home-stage .home-welcome {
position: absolute;
inset: 0;
padding: 20px;
}
.v10-home-stage .home-welcome h1 {
font-size: 32px;
}
.v10-home-stage .home-region-context {
min-width: 110px;
}
.v10-rural-scene {
min-height: 245px;
opacity: 0.47;
}
#home .home-entry-grid {
grid-template-columns: repeat(4, 1fr);
}
}
body[data-ui-shell='consumer'] {
display: grid;
grid-template-rows: var(--shell-header-height) minmax(0, 1fr) auto;
}
body[data-ui-shell='consumer'] > .app-shell {
height: auto;
min-height: 0;
}
body[data-ui-shell='consumer'] > .legal-links-bar {
padding-block: 14px;
}
@media (min-width: 901px) and (max-height: 700px) {
body[data-ui-shell='consumer'] > .legal-links-bar {
padding-block: 10px;
}
}
@media (max-width: 900px) {
body[data-ui-shell='consumer'] {
height: 100dvh;
padding-bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom));
}
body[data-ui-shell='consumer'] > .app-shell {
height: auto;
}
body[data-ui-shell='consumer'] > .legal-links-bar {
min-height: 42px;
padding: 8px 14px;
display: flex;
justify-content: center;
line-height: 1.25;
}
body[data-ui-shell='consumer'] > .legal-links-bar > div:first-child {
display: none;
}
body[data-ui-shell='consumer'] > .legal-links-bar > div:last-child {
display: flex;
align-items: center;
gap: 14px;
}
body[data-ui-shell='consumer'] > .legal-links-bar div span {
display: inline;
margin-top: 0;
}
}
:root {
--shell-nav-height: 0px;
}
.header-workspace {
grid-template-columns: minmax(124px, 184px) minmax(220px, 1fr);
}
.header-search {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
align-items: center;
}
.header-search > svg {
display: none;
}
.header-workspace .header-search input {
min-width: 0;
padding: 10px 8px 10px 12px;
}
.header-workspace .header-search .search-button {
width: 34px;
height: 34px;
margin: 0 3px 0 0;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 10px;
color: var(--v14-home-brand);
background: var(--v14-home-brand-soft);
}
.header-search .search-button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.header-search .search-button:disabled {
cursor: progress;
opacity: 0.55;
}
.app-shell {
height: calc(100vh - var(--shell-header-height));
padding-top: 12px;
background: var(--v14-home-bg);
}
#home.hero.workspace-panel {
padding: 12px 18px 16px;
background: var(--v14-home-bg);
}
#home .hero-content {
grid-template-columns:
    minmax(300px, var(--v14-home-entry-ratio))
    minmax(0, var(--v14-home-feed-ratio));
gap: 12px 18px;
}
.v14-home-stage {
min-height: 174px;
grid-template-columns: minmax(350px, 0.82fr) minmax(410px, 1.18fr);
border-color: var(--v14-home-line);
border-radius: var(--v14-home-radius);
background: linear-gradient(112deg, var(--v14-home-surface) 0 48%, #eee6d5 48% 100%);
box-shadow: var(--v14-home-shadow);
}
.v14-home-stage .home-welcome {
padding: 18px 20px 17px 25px;
}
.v14-home-stage .home-welcome h1 {
margin: 5px 0 6px;
font-size: clamp(30px, 2.55vw, 40px);
line-height: 1.08;
}
.v14-home-stage .v10-rural-scene {
min-height: 174px;
}
.v14-home-stage .home-region-context {
padding: 8px 11px;
}
#home .home-entry-grid,
#home .home-feed {
border-color: var(--v14-home-line);
background: var(--v14-home-surface);
}
#home .home-entry-grid {
padding: 9px;
}
#home .home-entry-grid button {
min-height: 70px;
padding: 6px;
}
#home .home-entry-icon {
width: 36px;
height: 36px;
margin-bottom: 4px;
}
#home .home-feed {
padding: 10px 13px;
}
#home .home-feed-list {
max-height: 150px;
}
#home .home-feed-card[data-home-feed-kind='TRUSTED_EVENT'] .home-feed-card-tag {
color: #8d4a2f;
background: #f5e3d5;
}
.location-shortcuts {
margin-top: 12px;
padding: 11px 12px;
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 9px 10px;
border: 1px solid var(--v14-home-line);
border-radius: 12px;
background: var(--v14-home-surface-muted);
}
.location-shortcuts > div {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
.location-shortcuts > div:first-child {
display: grid;
align-content: center;
}
.location-shortcuts span {
color: var(--v14-home-muted);
font-size: 11px;
font-weight: 760;
}
.location-shortcuts #save-favorite-location,
.location-shortcut-list button {
width: auto;
min-height: 29px;
padding: 5px 9px;
border: 1px solid var(--v14-home-line);
border-radius: 9px;
color: var(--v14-home-brand);
background: var(--v14-home-surface);
cursor: pointer;
font-size: 11px;
font-weight: 720;
}
.location-shortcuts #save-favorite-location {
padding: 3px 7px;
font-size: 10px;
}
.location-shortcuts button:disabled {
cursor: default;
opacity: 0.55;
}
.location-shortcut-list {
overflow-x: auto;
}
.location-shortcut-list small {
color: #88958e;
font-size: 11px;
}
@media (min-width: 901px) and (max-height: 800px) {
.v14-home-stage,
  .v14-home-stage .v10-rural-scene {
min-height: 158px;
}
.v14-home-stage .home-welcome {
padding-block: 13px;
}
#home .home-entry-grid button {
min-height: 62px;
}
}
@media (max-width: 1080px) {
#home .hero-content {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.header-workspace {
grid-template-columns: minmax(88px, 122px) minmax(0, 1fr);
}
.header-workspace .header-search .search-button {
display: grid;
}
.app-shell {
height: calc(100dvh - var(--shell-header-height) - var(--mobile-tabbar-height));
}
}
@media (max-width: 720px) {
#home.hero.workspace-panel {
padding: 7px 8px 76px;
}
.v14-home-stage {
min-height: 174px;
display: block;
background: #eee6d5;
}
.v14-home-stage .home-welcome {
position: absolute;
inset: 0;
padding: 14px;
align-items: stretch;
}
.v14-home-stage .home-welcome > div {
width: min(72%, 270px);
flex-shrink: 0;
padding: 9px 10px;
align-self: flex-start;
border-radius: 13px;
background: rgba(255, 253, 248, 0.88);
backdrop-filter: blur(4px);
}
.v14-home-stage .home-welcome h1 {
margin-block: 4px;
font-size: clamp(24px, 7.2vw, 28px);
line-height: 1.08;
}
.v14-home-stage .home-welcome .eyebrow,
  .v14-home-stage .hero-copy {
font-size: 11px;
}
.v14-home-stage .home-region-context {
position: absolute;
right: 12px;
bottom: 12px;
min-width: 98px;
max-width: 116px;
}
.v14-home-stage .v10-rural-scene {
min-height: 174px;
opacity: 0.78;
}
#home .home-entry-grid {
padding: 6px;
}
#home .home-entry-grid button {
min-height: 61px;
}
#home .home-entry-icon {
width: 32px;
height: 32px;
font-size: 14px;
}
.location-shortcuts {
grid-template-columns: 78px minmax(0, 1fr);
}
}
#local-circle.local-circle-section.workspace-panel {
background: var(--v14-home-bg);
}
#local-circle .local-circle-heading,
#local-circle .local-circle-controls {
border-color: var(--v14-home-line);
background-color: var(--v14-home-surface);
}
#local-circle .local-circle-feed {
grid-template-columns: minmax(0, 2fr) minmax(270px, 0.82fr);
gap: 12px;
}
#local-circle .local-circle-list,
#local-circle .local-circle-empty {
grid-column: 1;
grid-row: 1;
}
.local-circle-hot-panel {
min-width: 0;
min-height: 0;
padding: 14px;
grid-column: 2;
grid-row: 1;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
align-content: start;
align-self: start;
border: 1px solid var(--v14-home-line);
border-radius: var(--v14-home-radius);
background: var(--v14-home-surface);
overflow: hidden;
}
#local-circle .local-circle-list[data-item-count='1'] {
grid-template-columns: 1fr;
}
.local-circle-hot-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.local-circle-hot-heading span,
.local-circle-hot-heading strong {
display: block;
}
.local-circle-hot-heading span {
color: var(--v14-home-terracotta);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
}
.local-circle-hot-heading strong {
margin-top: 3px;
color: var(--v14-home-ink);
font-size: 15px;
}
.local-circle-hot-heading button {
min-height: 32px;
padding: 0 10px;
border: 1px solid var(--v14-home-line);
border-radius: 9px;
color: var(--v14-home-brand);
background: var(--v14-home-surface);
cursor: pointer;
font-size: 10px;
font-weight: 760;
}
.local-circle-hot-panel > p {
margin: 7px 0 8px;
color: var(--v14-home-muted);
font-size: 10px;
}
.local-circle-hot-list {
min-height: 0;
display: grid;
align-content: start;
gap: 6px;
overflow-y: auto;
}
.local-circle-hot-card {
width: 100%;
min-width: 0;
padding: 10px 8px;
display: grid;
grid-template-columns: 27px minmax(0, 1fr);
align-items: center;
gap: 8px;
border: 0;
border-bottom: 1px solid var(--v14-home-line);
color: var(--v14-home-ink);
background: transparent;
cursor: pointer;
text-align: left;
}
.local-circle-hot-card:hover {
border-radius: 10px;
background: var(--v14-home-surface-muted);
}
.local-circle-hot-card b {
width: 27px;
height: 27px;
display: grid;
place-items: center;
border-radius: 9px;
color: #8c532f;
background: #f4e2cc;
font-size: 12px;
}
.local-circle-hot-card:nth-child(n + 4) b {
color: var(--v14-home-muted);
background: var(--v14-home-surface-muted);
}
.local-circle-hot-card span,
.local-circle-hot-card strong,
.local-circle-hot-card small {
min-width: 0;
display: block;
}
.local-circle-hot-card strong {
overflow: hidden;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.local-circle-hot-card small {
margin-top: 3px;
overflow: hidden;
color: var(--v14-home-muted);
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 900px) {
#local-circle .local-circle-feed {
grid-template-columns: 1fr;
}
#local-circle .local-circle-list,
  #local-circle .local-circle-empty {
grid-column: 1;
}
.local-circle-hot-panel {
display: none;
}
#local-circle .local-circle-controls > #local-circle-summary {
grid-column: 1;
grid-row: 2;
}
#local-circle .local-circle-controls > #refresh-local-circle {
width: auto;
grid-column: 2;
grid-row: 2;
justify-self: end;
}
#local-circle .local-circle-discovery-tools {
padding-bottom: 2px;
scroll-snap-type: x proximity;
}
#local-circle .local-circle-categories,
  #local-circle .local-circle-nearby {
scroll-snap-align: start;
}
}

/* source: apps/portal-web/public/v15-home.css */
body {
color: var(--v15-text);
background: var(--v15-page);
}
.site-header {
border-bottom-color: var(--v15-line);
background: rgba(255, 253, 248, 0.94);
box-shadow: 0 5px 22px rgba(55, 66, 48, 0.035);
}
.header-inner {
width: min(100%, var(--v15-content-max));
margin: 0 auto;
gap: 18px;
}
.brand {
min-width: 238px;
}
.brand-mark {
border-radius: 15px;
background: var(--v15-brand);
box-shadow: 0 8px 22px rgba(22, 115, 71, 0.16);
}
.brand strong {
color: var(--v15-text);
font-size: 18px;
}
.brand small {
color: var(--v15-muted);
font-size: 10px;
}
.header-workspace {
max-width: 720px;
grid-template-columns: minmax(132px, 180px) minmax(250px, 1fr);
border-color: var(--v15-line);
border-radius: 15px;
background: var(--v15-surface);
box-shadow: 0 7px 22px rgba(55, 66, 48, 0.045);
}
.header-workspace .location-picker {
color: var(--v15-text);
border-color: var(--v15-line);
}
.header-workspace .header-search .search-button {
color: var(--v15-brand-strong);
background: var(--v15-brand-soft);
}
.header-action.primary {
border-color: var(--v15-brand);
border-radius: 13px;
background: var(--v15-brand);
box-shadow: 0 8px 20px rgba(22, 115, 71, 0.16);
}
.header-action.icon-action,
.login-button {
border-color: var(--v15-line-strong);
border-radius: 13px;
background: var(--v15-surface);
}
.header-avatar {
background: var(--v15-brand-soft);
}
.app-shell {
padding: 10px 18px 18px;
background: var(--v15-page);
}
.workspace-main {
width: min(100%, var(--v15-content-max));
margin: 0 auto;
border: 0;
border-radius: var(--v15-radius-lg);
background: transparent;
box-shadow: none;
}
#home.hero.workspace-panel {
padding: 0 2px 14px !important;
background: transparent;
}
#home .hero-content {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto auto !important;
gap: 12px;
}
#home .hero-content > .v15-home-stage,
#home .hero-content > .home-entry-grid,
#home .hero-content > .home-feed {
grid-column: 1 !important;
grid-row: auto !important;
}
.v15-home-stage {
position: relative;
min-height: clamp(205px, 25vh, 238px);
overflow: hidden;
display: block;
border: 0;
border-radius: var(--v15-radius-lg);
background: #f9e8bd;
box-shadow: var(--v15-shadow-soft);
}
.v15-rural-scene {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.v15-home-stage::after {
position: absolute;
inset: 0;
content: '';
pointer-events: none;
background: linear-gradient(
    90deg,
    rgba(255, 251, 241, 0.96) 0 27%,
    rgba(255, 251, 241, 0.64) 42%,
    transparent 68%
  );
}
.v15-home-stage .home-welcome {
position: relative;
z-index: 2;
min-height: inherit;
padding: 25px clamp(28px, 4vw, 58px);
align-items: center;
}
.v15-home-stage .home-welcome > div {
max-width: 510px;
}
#home .v15-home-stage .eyebrow {
color: var(--v15-brand-strong);
font-size: 11px;
letter-spacing: 0.12em;
}
#home .v15-home-stage h1 {
margin: 8px 0 9px;
color: var(--v15-ink);
font-family: 'Songti SC', 'STSong', serif;
font-size: clamp(34px, 3.35vw, 48px);
font-weight: 800;
line-height: 1.08;
letter-spacing: 0.01em;
}
#home .v15-home-stage .hero-copy {
color: #3f5448;
font-size: 14px;
font-weight: 650;
}
.v15-home-stage .home-region-context {
display: none;
}
.v15-home-stage .home-region-context span {
display: none;
}
.v15-home-stage .home-region-context strong {
max-width: 190px;
color: var(--v15-ink);
font-size: 11px;
}
.v15-home-stage .home-region-context small {
color: var(--v15-brand);
font-size: 10px;
}
#home .home-entry-grid {
padding: 0;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px 12px;
border: 0;
background: transparent;
}
#home .home-entry-grid button {
min-height: 88px;
padding: 11px 14px;
grid-template-columns: var(--v15-icon-size-desktop) minmax(0, 1fr);
grid-template-rows: auto auto;
place-items: center start;
column-gap: 13px;
row-gap: 3px;
border: 1px solid rgba(44, 75, 59, 0.075);
border-radius: var(--v15-radius-md);
color: var(--v15-text);
background: rgba(255, 253, 248, 0.92);
box-shadow: 0 8px 24px rgba(55, 66, 48, 0.045);
transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
text-align: left;
}
#home .home-entry-grid button:hover {
background: var(--v15-surface);
box-shadow: var(--v15-shadow-float);
transform: translateY(-2px);
}
#home .home-entry-grid button:active {
transform: translateY(0) scale(0.985);
}
#home .home-entry-grid button .home-entry-icon {
width: var(--v15-icon-size-desktop);
height: var(--v15-icon-size-desktop);
margin: 0;
grid-row: 1 / 3;
display: block;
border: 0;
border-radius: 20px;
background-color: transparent;
background-image: url('/assets/v15-service-icons.svg');
background-repeat: no-repeat;
background-size: 800% 100%;
box-shadow: none;
}
#home .home-entry-icon.merchant {
background-position: 0 0;
}
#home .home-entry-icon.service {
background-position: 14.2857% 0;
}
#home .home-entry-icon.agriculture {
background-position: 28.5714% 0;
}
#home .home-entry-icon.secondhand {
background-position: 42.8571% 0;
}
#home .home-entry-icon.jobs {
background-position: 57.1429% 0;
}
#home .home-entry-icon.runner {
background-position: 71.4286% 0;
}
#home .home-entry-icon.outdoor {
background-position: 85.7143% 0;
}
#home .home-entry-icon.more {
background-position: 100% 0;
}
#home .home-entry-grid button strong {
align-self: end;
color: var(--v15-text);
font-size: 14px;
line-height: 1.2;
}
#home .home-entry-grid button small {
align-self: start;
display: block;
overflow: hidden;
color: var(--v15-muted);
font-size: 10px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
#home .home-feed {
min-height: 0;
margin: 2px 0 0;
padding: 13px 18px 15px;
border: 0;
border-radius: var(--v15-radius-md);
background: rgba(255, 253, 248, 0.92);
box-shadow: 0 8px 24px rgba(55, 66, 48, 0.045);
}
#home .home-feed-heading > div {
gap: 10px;
}
#home .home-feed-heading span {
color: var(--v15-terracotta);
font-size: 10px;
letter-spacing: 0.08em;
}
#home .home-feed-heading strong {
color: var(--v15-text);
font-size: 16px;
}
#home .home-feed-heading > button,
#home .home-feed-view-all {
border-color: var(--v15-line-strong);
color: var(--v15-brand-strong);
background: transparent;
}
#home .home-feed-tabs {
margin-top: 5px;
display: flex;
gap: 24px;
border-bottom: 1px solid var(--v15-line);
}
#home .home-feed-tabs button {
position: relative;
min-width: 52px;
min-height: 32px;
padding: 0 6px;
border-radius: 0;
color: var(--v15-muted);
background: transparent;
}
#home .home-feed-tabs button::after {
position: absolute;
right: 8px;
bottom: -1px;
left: 8px;
height: 2px;
border-radius: 99px;
content: '';
background: transparent;
}
#home .home-feed-tabs button:hover,
#home .home-feed-tabs button.active {
color: var(--v15-brand-strong);
background: transparent;
}
#home .home-feed-tabs button.active::after {
background: var(--v15-brand);
}
#home .home-feed-status {
min-height: 14px;
margin: 6px 0 5px;
color: var(--v15-muted);
font-size: 9px;
}
#home .home-feed-list {
max-height: 190px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
overflow: hidden;
}
#home .home-feed-card {
position: relative;
min-height: 78px;
padding: 10px 6px;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: 1fr;
align-items: center;
gap: 12px;
border: 0;
border-bottom: 1px solid var(--v15-line);
border-radius: 0;
background: transparent;
}
#home .home-feed-card:hover {
background: rgba(232, 241, 232, 0.42);
}
#home .home-feed-card-tag {
width: fit-content;
padding: 3px 7px;
border-radius: 7px;
color: var(--v15-brand-strong);
background: var(--v15-brand-soft);
font-size: 9px;
}
#home .home-feed-card strong {
margin-top: 4px;
font-size: 12px;
}
#home .home-feed-card p {
min-height: auto;
margin: 3px 0;
color: var(--v15-muted);
font-size: 9px;
-webkit-line-clamp: 1;
}
#home .home-feed-card small {
color: #8d958f;
font-size: 8px;
}
#home .home-feed-card > button {
width: auto;
min-width: 50px;
color: var(--v15-brand-strong);
background: var(--v15-brand-soft);
}
#home .home-feed-card.has-media {
grid-template-columns: minmax(0, 1fr) 72px auto;
}
#home .home-feed-card-media {
width: 72px;
height: 64px;
align-self: center;
border-radius: 10px;
object-fit: cover;
background: var(--v15-brand-soft);
}
#home .home-feed-skeleton,
#home .home-feed-empty {
min-height: 78px;
}
.more-service-icon {
background-image: url('/assets/v15-service-icons.svg') !important;
background-repeat: no-repeat !important;
background-size: 800% 100% !important;
color: transparent !important;
}
.more-service-icon.agriculture {
background-position: 28.5714% 0 !important;
}
.more-service-icon.secondhand {
background-position: 42.8571% 0 !important;
}
.more-service-icon.jobs {
background-position: 57.1429% 0 !important;
}
.more-service-icon.runner {
background-position: 71.4286% 0 !important;
}
.more-service-icon.outdoor {
background-position: 85.7143% 0 !important;
}
@media (min-width: 901px) and (max-height: 800px) {
.v15-home-stage {
min-height: 178px;
}
.v15-home-stage .home-welcome {
padding-block: 17px;
}
#home .v15-home-stage h1 {
font-size: clamp(31px, 3vw, 40px);
}
#home .home-entry-grid button {
min-height: 72px;
padding-block: 6px;
}
#home .home-entry-grid button .home-entry-icon {
width: 52px;
height: 52px;
}
#home .home-feed-list {
max-height: 150px;
}
}
@media (max-width: 1080px) {
.brand {
min-width: 52px;
}
.brand > span:last-child {
display: none;
}
#home .home-entry-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
:root {
--shell-header-height: 62px;
}
.header-inner {
padding: 0 10px;
gap: 7px;
}
.brand {
display: none;
}
.header-workspace {
max-width: none;
grid-template-columns: minmax(86px, 118px) minmax(70px, 1fr);
flex: 1;
}
.header-workspace .location-picker {
min-width: 0;
}
.header-actions {
gap: 6px;
}
.header-actions .header-action.primary,
  .header-actions .header-action.icon-action {
display: grid;
}
.header-actions .header-action.primary {
min-width: 62px;
height: 38px;
padding: 0 10px;
place-items: center;
font-size: 11px;
}
.header-actions .header-action.icon-action {
width: 38px;
height: 38px;
}
#home.hero.workspace-panel {
padding: 0 0 calc(72px + env(safe-area-inset-bottom));
}
.v15-home-stage {
min-height: 168px;
border-radius: 0 0 20px 20px;
}
.v15-home-stage::after {
background: linear-gradient(
      90deg,
      rgba(255, 251, 241, 0.92) 0 42%,
      rgba(255, 251, 241, 0.34) 68%,
      transparent 88%
    );
}
.v15-home-stage .home-welcome {
min-height: 168px;
padding: 18px 16px;
align-items: flex-start;
}
.v15-home-stage .home-welcome > div {
width: 72%;
padding: 0;
border: 0;
background: transparent;
backdrop-filter: none;
}
#home .v15-home-stage h1 {
margin: 5px 0;
font-size: clamp(25px, 7.5vw, 32px);
}
#home .v15-home-stage .hero-copy {
max-width: 250px;
font-size: 10px;
}
.v15-home-stage .home-region-context {
left: 16px;
bottom: 12px;
}
#home .home-entry-grid {
padding: 7px 4px 8px;
gap: 4px;
border-radius: var(--v15-radius-md);
background: var(--v15-surface);
box-shadow: 0 7px 20px rgba(55, 66, 48, 0.045);
}
#home .home-entry-grid button {
min-height: 75px;
padding: 7px 2px 6px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
place-items: center;
gap: 4px;
border: 0;
border-radius: 12px;
background: transparent;
box-shadow: none;
text-align: center;
}
#home .home-entry-grid button:hover {
background: var(--v15-brand-soft);
box-shadow: none;
}
#home .home-entry-grid button .home-entry-icon {
width: var(--v15-icon-size-mobile);
height: var(--v15-icon-size-mobile);
grid-row: auto;
border-radius: 16px;
}
#home .home-entry-grid button strong {
align-self: center;
font-size: 11px;
}
#home .home-entry-grid button small {
display: none;
}
#home .home-feed {
margin-top: 0;
padding: 11px 11px 14px;
border-radius: var(--v15-radius-md);
}
#home .home-feed-heading strong {
font-size: 14px;
}
#home .home-feed-tabs {
gap: 4px;
justify-content: space-between;
}
#home .home-feed-tabs button {
flex: 1;
}
#home .home-feed-list {
max-height: 206px;
grid-template-columns: 1fr;
overflow-y: auto;
}
#home .home-feed-card {
min-height: 76px;
}
#home .home-feed-card.has-media {
grid-template-columns: minmax(0, 1fr) 58px auto;
gap: 7px;
}
#home .home-feed-card-media {
width: 58px;
height: 54px;
}
}
@media (max-width: 520px) {
.header-workspace {
grid-template-columns: minmax(78px, 96px) minmax(54px, 1fr);
}
.header-workspace .search-field input {
padding-inline: 7px;
font-size: 10px;
}
.header-actions .header-action.primary {
min-width: 55px;
padding-inline: 7px;
}
.v15-rural-scene {
object-position: 58% center;
}
#home .home-feed-heading > div {
display: grid;
gap: 0;
}
#home .home-feed-heading span {
font-size: 9px;
}
}
@media (prefers-reduced-motion: reduce) {
#home .home-entry-grid button {
transition: none;
}
}

/* source: apps/portal-web/public/v15-circle.css */
#local-circle.local-circle-section.workspace-panel {
padding: 12px 18px 16px;
gap: 8px;
color: var(--v15-text);
background: var(--v15-page);
}
#local-circle .local-circle-heading {
position: relative;
min-height: 88px;
padding: 14px 18px;
overflow: hidden;
align-items: center;
border: 0;
border-radius: var(--v15-radius-md);
background: linear-gradient(108deg, #fff9ec 0 62%, #e9e5d8 62% 100%);
box-shadow: 0 8px 24px rgba(55, 66, 48, 0.04);
}
#local-circle .local-circle-heading::before,
#local-circle .local-circle-heading::after {
position: absolute;
right: -30px;
bottom: -70px;
width: 320px;
height: 140px;
border-radius: 50% 50% 0 0;
content: '';
pointer-events: none;
background: #becbb1;
}
#local-circle .local-circle-heading::after {
right: 78px;
bottom: -88px;
width: 250px;
background: #d7dfc8;
}
#local-circle .local-circle-heading > div {
position: relative;
z-index: 1;
}
#local-circle .section-kicker {
color: var(--v15-brand);
font-size: 9px;
letter-spacing: 0.11em;
}
#local-circle .local-circle-heading h2 {
margin: 2px 0 3px;
color: var(--v15-ink);
font-family: 'Songti SC', 'STSong', serif;
font-size: clamp(28px, 2.6vw, 36px);
line-height: 1.1;
}
#local-circle .local-circle-heading p {
color: var(--v15-muted);
font-size: 10px;
line-height: 1.5;
}
#local-circle .local-circle-actions {
gap: 7px;
}
#local-circle .local-circle-actions button {
min-height: 34px;
padding: 0 12px;
border: 1px solid var(--v15-line-strong);
border-radius: 10px;
color: var(--v15-brand-strong);
background: rgba(255, 253, 248, 0.88);
box-shadow: none;
font-size: 10px;
}
#local-circle .local-circle-actions .primary {
border-color: var(--v15-brand);
color: #fff;
background: var(--v15-brand);
}
#local-circle .local-circle-controls {
min-height: 43px;
padding: 0 8px;
gap: 5px;
align-items: center;
border: 0;
border-bottom: 1px solid var(--v15-line);
border-radius: 0;
background: transparent;
}
#local-circle .local-circle-channels {
align-self: stretch;
gap: 2px;
}
#local-circle .local-circle-channels button {
position: relative;
min-width: 58px;
min-height: 42px;
padding: 0 11px;
border: 0;
border-radius: 0;
color: var(--v15-muted);
background: transparent;
font-size: 10px;
}
#local-circle .local-circle-channels button::after {
position: absolute;
right: 13px;
bottom: 0;
left: 13px;
height: 2px;
border-radius: 99px;
content: '';
background: transparent;
}
#local-circle .local-circle-channels button.active {
border-color: transparent;
color: var(--v15-brand-strong);
background: transparent;
}
#local-circle .local-circle-channels button.active::after {
background: var(--v15-brand);
}
#local-circle #refresh-local-circle {
min-height: 31px;
padding: 0 9px;
border: 1px solid var(--v15-line-strong);
border-radius: 9px;
color: var(--v15-brand-strong);
background: transparent;
font-size: 9px;
}
#local-circle #local-circle-summary {
color: var(--v15-muted);
font-size: 9px;
}
#local-circle .local-circle-discovery-tools {
min-height: 39px;
gap: 10px;
}
#local-circle .local-circle-categories,
#local-circle .local-circle-nearby {
gap: 5px;
}
#local-circle .local-circle-categories button,
#local-circle .local-circle-more-category select,
#local-circle .local-circle-nearby button {
min-height: 30px;
padding: 0 10px;
border: 0;
border-radius: 999px;
color: var(--v15-muted);
background: var(--v15-surface-soft);
font-size: 9px;
}
#local-circle .local-circle-categories button.active,
#local-circle .local-circle-more-category.active select,
#local-circle .local-circle-nearby button.active {
color: #fff;
background: var(--v15-brand);
}
#local-circle .local-circle-more-category > span {
left: 11px;
color: var(--v15-text);
font-size: 9px;
}
#local-circle .local-circle-more-category select {
width: 72px;
padding-left: 43px;
}
#local-circle .local-circle-nearby {
padding-left: 9px;
border-left-color: var(--v15-line);
}
#local-circle .local-circle-nearby > span {
color: var(--v15-muted);
font-size: 9px;
}
#local-circle .local-circle-topic-strip {
min-height: 0;
gap: 6px;
}
#local-circle .local-circle-topic-strip button {
min-height: 28px;
padding: 4px 10px;
border: 0;
border-radius: 999px;
color: var(--v15-brand-strong);
background: var(--v15-brand-soft);
font-size: 9px;
}
#local-circle .local-circle-topic-strip button.active {
color: #fff;
background: var(--v15-brand);
}
#local-circle .local-circle-feed {
grid-template-columns: minmax(0, 2.2fr) minmax(260px, 0.78fr);
gap: 12px;
}
#local-circle .local-circle-list {
gap: 10px;
}
#local-circle .local-circle-card {
padding: 14px 15px;
border: 0;
border-radius: var(--v15-radius-md);
background: rgba(255, 253, 248, 0.94);
box-shadow: 0 8px 24px rgba(55, 66, 48, 0.045);
}
#local-circle .local-circle-card-header > div > span {
width: 36px;
height: 36px;
border-radius: 13px;
color: var(--v15-brand-strong);
background: var(--v15-brand-soft);
}
#local-circle .local-circle-card-header strong {
color: var(--v15-text);
font-size: 11px;
}
#local-circle .local-circle-card-header small {
color: var(--v15-muted);
font-size: 8px;
}
#local-circle .local-circle-category {
padding: 4px 7px;
color: #9b542f;
background: #f5e7d9;
font-size: 8px;
}
#local-circle .local-circle-card h3 {
margin: 10px 0 5px;
color: var(--v15-text);
font-size: 14px;
}
#local-circle .local-circle-card-body {
min-height: 34px;
color: var(--v15-muted);
font-size: 10px;
line-height: 1.55;
}
#local-circle .local-circle-card-media {
width: 100%;
height: 94px;
margin: 9px 0 2px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
overflow: hidden;
border-radius: 11px;
}
#local-circle .local-circle-card-media.single {
grid-template-columns: minmax(0, 1fr);
}
#local-circle .local-circle-card-media img {
width: 100%;
height: 94px;
object-fit: cover;
background: var(--v15-brand-soft);
}
#local-circle .local-circle-card-location {
margin: 8px 0 9px;
color: #879089;
font-size: 8px;
}
#local-circle .local-circle-card-footer {
padding-top: 8px;
border-top-color: var(--v15-line);
}
#local-circle .local-circle-card-footer > span {
color: var(--v15-muted);
font-size: 8px;
}
#local-circle .local-circle-card-footer button {
min-height: 31px;
padding: 0 10px;
border: 0;
border-radius: 9px;
color: var(--v15-brand-strong);
background: var(--v15-brand-soft);
font-size: 9px;
}
#local-circle .local-circle-hot-panel {
padding: 13px;
border: 0;
border-radius: var(--v15-radius-md);
background: rgba(255, 253, 248, 0.94);
box-shadow: 0 8px 24px rgba(55, 66, 48, 0.045);
}
#local-circle .local-circle-hot-heading span {
color: var(--v15-terracotta);
}
#local-circle .local-circle-hot-heading strong {
color: var(--v15-text);
}
#local-circle .local-circle-hot-heading button {
border-color: var(--v15-line-strong);
color: var(--v15-brand-strong);
background: transparent;
}
#local-circle .local-circle-hot-card {
border-bottom-color: var(--v15-line);
color: var(--v15-text);
}
#local-circle .local-circle-hot-card:hover {
background: var(--v15-brand-soft);
}
#local-circle .local-circle-empty {
padding: 24px;
border: 0;
border-radius: var(--v15-radius-md);
background: rgba(255, 253, 248, 0.92);
box-shadow: 0 8px 24px rgba(55, 66, 48, 0.04);
}
#local-circle .v15-circle-empty-icon {
position: relative;
width: 58px;
height: 44px;
margin: 0 auto 10px;
display: block;
border-radius: 30px 30px 12px 12px;
background: linear-gradient(155deg, #dcead8, #f5e0a8);
}
#local-circle .v15-circle-empty-icon::before,
#local-circle .v15-circle-empty-icon::after {
position: absolute;
bottom: 8px;
content: '';
}
#local-circle .v15-circle-empty-icon::before {
left: 13px;
width: 30px;
height: 18px;
border-radius: 5px 5px 2px 2px;
background: var(--v15-surface);
}
#local-circle .v15-circle-empty-icon::after {
left: 25px;
width: 8px;
height: 12px;
background: var(--v15-brand);
}
#local-circle .local-circle-empty strong {
color: var(--v15-text);
font-size: 13px;
}
#local-circle .local-circle-empty p {
color: var(--v15-muted);
font-size: 10px;
}
#local-circle .local-circle-pagination button {
border-color: var(--v15-line-strong);
color: var(--v15-brand-strong);
background: var(--v15-surface);
}
@media (max-width: 900px) {
#local-circle.local-circle-section.workspace-panel {
padding: 8px 10px 10px;
gap: 7px;
}
#local-circle .local-circle-heading {
min-height: 90px;
padding: 12px;
}
#local-circle .local-circle-heading h2 {
font-size: 27px;
}
#local-circle .local-circle-heading::before {
right: -85px;
width: 240px;
}
#local-circle .local-circle-heading::after {
right: 25px;
width: 190px;
}
#local-circle .local-circle-controls {
padding: 0;
grid-template-columns: minmax(0, 1fr) auto;
}
#local-circle .local-circle-controls > #local-circle-summary {
padding-left: 6px;
}
#local-circle .local-circle-discovery-tools {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 5px;
overflow: visible;
}
#local-circle .local-circle-categories,
  #local-circle .local-circle-nearby {
min-width: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
#local-circle .local-circle-categories > *,
  #local-circle .local-circle-nearby > * {
flex: 0 0 auto;
}
#local-circle .local-circle-nearby {
padding: 0 0 0 6px;
border-top: 0;
border-left: 0;
}
#local-circle .local-circle-feed {
grid-template-columns: minmax(0, 1fr);
}
#local-circle .local-circle-hot-panel {
display: none;
}
}
@media (max-width: 640px) {
#local-circle .local-circle-heading {
grid-template-columns: minmax(0, 1fr);
}
#local-circle .local-circle-heading p,
  #local-circle .section-kicker {
display: none;
}
#local-circle .local-circle-actions {
gap: 5px;
}
#local-circle .local-circle-actions button {
min-width: 0;
padding: 0 6px;
font-size: 9px;
}
#local-circle .local-circle-card {
padding: 13px;
}
#local-circle .local-circle-card-media,
  #local-circle .local-circle-card-media img {
height: 112px;
}
#local-circle .local-circle-card-footer {
gap: 8px;
}
#local-circle .local-circle-card-footer > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
#local-circle .local-circle-skeleton {
animation: none;
}
}

/* source: apps/portal-web/public/v15-catalog.css */
#services.service-section.workspace-panel {
background:
    radial-gradient(circle at 88% 8%, rgba(239, 194, 111, 0.12), transparent 24%), var(--v15-page);
}
#services .catalog-workspace-heading {
position: relative;
min-height: 118px;
padding: 20px 24px;
overflow: hidden;
border: 1px solid var(--v15-line);
border-radius: var(--v15-radius-lg);
background:
    radial-gradient(circle at 88% 18%, rgba(239, 194, 111, 0.34) 0 24px, transparent 25px),
    linear-gradient(135deg, rgba(228, 241, 232, 0.92), rgba(255, 253, 248, 0.96) 56%);
box-shadow: var(--v15-shadow-soft);
}
#services .catalog-workspace-heading::before,
#services .catalog-workspace-heading::after {
position: absolute;
right: -60px;
bottom: -74px;
width: 420px;
height: 126px;
border-radius: 50% 50% 0 0;
background: rgba(168, 190, 165, 0.22);
content: '';
pointer-events: none;
}
#services .catalog-workspace-heading::after {
right: 120px;
bottom: -94px;
width: 360px;
background: rgba(239, 194, 111, 0.15);
}
#services .catalog-workspace-heading > * {
position: relative;
z-index: 1;
}
#services .catalog-workspace-heading .section-kicker {
color: var(--v15-brand);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
}
#services .catalog-workspace-heading h2 {
margin: 7px 0 5px;
color: var(--v15-ink);
font-family: inherit;
font-size: clamp(32px, 3.1vw, 44px);
line-height: 1.05;
letter-spacing: -0.045em;
}
#services .catalog-workspace-heading p {
max-width: 620px;
color: var(--v15-muted);
font-size: 13px;
line-height: 1.6;
}
#services .catalog-region-context,
#services .catalog-workspace-heading .publish-button {
min-height: 46px;
border-radius: var(--v15-radius-sm);
}
#services .catalog-region-context {
border-color: var(--v15-line-strong);
background: rgba(255, 253, 248, 0.86);
backdrop-filter: blur(8px);
}
#services .catalog-region-context strong {
color: var(--v15-ink);
font-size: 13px;
}
#services .catalog-workspace-heading .publish-button {
padding: 0 18px;
border: 0;
color: #fff;
background: var(--v15-brand);
box-shadow: 0 10px 22px rgba(22, 115, 71, 0.17);
}
#services .catalog-workspace {
margin-top: 14px;
overflow: hidden;
border: 1px solid var(--v15-line-strong);
border-radius: var(--v15-radius-lg);
background: var(--v15-surface);
box-shadow: var(--v15-shadow-soft);
}
#services .catalog-workspace .catalog-heading {
min-height: 66px;
padding: 12px 16px;
border-bottom: 1px solid var(--v15-line);
background: rgba(255, 253, 248, 0.94);
}
#services .catalog-workspace .catalog-heading > div:first-child > span {
color: var(--v15-muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
}
#services .catalog-workspace .catalog-heading > div:first-child > strong {
color: var(--v15-ink);
font-size: 13px;
}
#services .catalog-search-field input {
height: 38px;
border-color: var(--v15-line-strong);
border-radius: var(--v15-radius-sm);
color: var(--v15-text);
background: var(--v15-page);
}
#services .catalog-search-field input:focus {
border-color: var(--v15-sage);
box-shadow: 0 0 0 3px rgba(22, 115, 71, 0.09);
}
#services .catalog-tools button {
min-height: 38px;
border-color: var(--v15-line-strong);
border-radius: var(--v15-radius-sm);
color: var(--v15-brand-strong);
background: var(--v15-surface);
}
#services .catalog-workspace .catalog-filters {
padding: 8px 14px;
gap: 4px;
border-bottom: 1px solid var(--v15-line);
background: var(--v15-surface);
}
#services .catalog-workspace .catalog-filters button {
min-height: 38px;
border: 0;
border-radius: 10px;
color: var(--v15-muted);
background: transparent;
box-shadow: none;
font-weight: 700;
}
#services .catalog-workspace .catalog-filters button:hover {
color: var(--v15-brand-strong);
background: var(--v15-brand-soft);
}
#services .catalog-workspace .catalog-filters button.active {
color: #fff;
background: var(--v15-brand);
box-shadow: 0 7px 16px rgba(22, 115, 71, 0.18);
}
#services .catalog-guidance {
margin: 10px 14px 0;
padding: 10px 12px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
border: 1px solid rgba(22, 115, 71, 0.1);
border-radius: var(--v15-radius-md);
color: var(--v15-text);
background: linear-gradient(90deg, rgba(228, 241, 232, 0.86), rgba(255, 250, 238, 0.84));
}
#services .catalog-guidance-icon {
position: relative;
width: 34px;
height: 34px;
border-radius: 12px;
background: rgba(22, 115, 71, 0.11);
}
#services .catalog-guidance-icon::before {
position: absolute;
top: 8px;
left: 9px;
width: 13px;
height: 8px;
border-bottom: 2px solid var(--v15-brand);
border-left: 2px solid var(--v15-brand);
content: '';
transform: rotate(-45deg);
}
#services .catalog-guidance div {
min-width: 0;
}
#services .catalog-guidance strong,
#services .catalog-guidance p {
display: block;
}
#services .catalog-guidance strong {
color: var(--v15-ink);
font-size: 12px;
}
#services .catalog-guidance p {
margin: 2px 0 0;
overflow: hidden;
color: var(--v15-muted);
font-size: 10px;
line-height: 1.45;
text-overflow: ellipsis;
white-space: nowrap;
}
#services .catalog-guidance-region {
padding: 5px 9px;
border-radius: 999px;
color: var(--v15-brand-strong);
background: rgba(255, 253, 248, 0.82);
font-size: 10px;
font-weight: 750;
white-space: nowrap;
}
#services .catalog-workspace .catalog-list {
padding: 14px;
gap: 12px;
background:
    radial-gradient(circle at 10% 90%, rgba(239, 194, 111, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(248, 245, 237, 0.58), rgba(255, 253, 248, 0.92));
}
#services .catalog-workspace .catalog-card {
position: relative;
min-height: 194px;
padding: 15px;
overflow: hidden;
border: 1px solid var(--v15-line);
border-radius: var(--v15-radius-md);
background: rgba(255, 253, 248, 0.98);
box-shadow: 0 9px 22px rgba(55, 66, 48, 0.055);
transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
#services .catalog-workspace .catalog-card::after {
position: absolute;
top: 0;
right: 0;
width: 66px;
height: 66px;
border-radius: 0 0 0 100%;
background: rgba(168, 190, 165, 0.11);
content: '';
pointer-events: none;
}
#services .catalog-workspace .catalog-card:hover {
border-color: rgba(22, 115, 71, 0.2);
box-shadow: 0 15px 30px rgba(55, 66, 48, 0.09);
transform: translateY(-2px);
}
#services .catalog-card-header {
display: flex;
align-items: center;
gap: 10px;
}
#services .catalog-card-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 14px;
background-image: url('/assets/v15-service-icons.svg');
background-repeat: no-repeat;
background-size: 352px 44px;
}
#services .catalog-card[data-catalog-card-kind='PRODUCT'] .catalog-card-icon {
background-position: 0 0;
}
#services .catalog-card[data-catalog-card-kind='SERVICE'] .catalog-card-icon {
background-position: -44px 0;
}
#services .catalog-card[data-catalog-card-kind='AGRICULTURAL_PRODUCT'] .catalog-card-icon {
background-position: -88px 0;
}
#services .catalog-card[data-catalog-card-kind='secondhand'] .catalog-card-icon {
background-position: -132px 0;
}
#services .catalog-card[data-catalog-card-kind='jobs'] .catalog-card-icon {
background-position: -176px 0;
}
#services .catalog-card[data-catalog-card-kind='stations'] .catalog-card-icon {
background-position: -308px 0;
}
#services .catalog-workspace .catalog-card .catalog-meta {
min-width: 0;
flex: 1;
}
#services .catalog-workspace .catalog-card .catalog-type {
border-radius: 999px;
color: var(--v15-brand-strong);
background: var(--v15-brand-soft);
}
#services .catalog-workspace .catalog-card h3 {
margin: 12px 0 6px;
color: var(--v15-text);
font-size: 16px;
line-height: 1.35;
}
#services .catalog-card-identity {
position: relative;
padding-left: 16px;
color: var(--v15-brand-strong);
font-size: 10px;
}
#services .catalog-card-identity::before {
position: absolute;
top: 0;
left: 0;
content: '✓';
font-weight: 900;
}
#services .catalog-workspace .catalog-card p {
min-height: 30px;
color: var(--v15-muted);
line-height: 1.55;
}
#services .catalog-workspace .catalog-card-footer {
padding-top: 11px;
border-top: 1px dashed var(--v15-line-strong);
}
#services .catalog-workspace .catalog-card > strong,
#services .catalog-workspace .catalog-card-footer > strong {
color: var(--v15-terracotta);
font-size: 15px;
}
#services .catalog-card-footer button {
border-radius: 10px;
}
#services .catalog-card-footer button:not(.secondary) {
background: var(--v15-brand);
}
#services .catalog-card-footer button.secondary {
border-color: var(--v15-line-strong);
color: var(--v15-brand-strong);
background: var(--v15-surface);
}
#services .catalog-workspace .catalog-empty {
background:
    radial-gradient(circle at 50% 42%, rgba(168, 190, 165, 0.12), transparent 24%),
    var(--v15-surface);
}
#services .catalog-workspace .catalog-empty > span {
color: transparent;
background:
    radial-gradient(circle at 52% 32%, var(--v15-wheat) 0 10%, transparent 11%),
    linear-gradient(155deg, transparent 0 42%, var(--v15-sage) 43% 58%, transparent 59%),
    var(--v15-brand-soft);
}
#services .catalog-pagination {
border-color: var(--v15-line);
color: var(--v15-muted);
background: var(--v15-surface);
}
#services .catalog-pagination button {
border-color: var(--v15-line-strong);
border-radius: 10px;
color: var(--v15-brand-strong);
background: var(--v15-page);
}
@media (max-width: 900px) {
#services .catalog-workspace-heading {
min-height: 104px;
padding: 17px 18px;
}
#services .catalog-workspace-heading h2 {
font-size: 34px;
}
#services .catalog-workspace .catalog-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#services .catalog-guidance-region {
display: none;
}
}
@media (max-width: 560px) {
#services.service-section.workspace-panel {
padding: 10px 12px 82px;
}
#services .catalog-workspace-heading {
min-height: 74px;
padding: 12px 13px;
grid-template-columns: minmax(0, 1fr) auto;
border-radius: var(--v15-radius-md);
}
#services .catalog-workspace-heading::before,
  #services .catalog-workspace-heading::after,
  #services .catalog-workspace-heading .section-kicker,
  #services .catalog-workspace-heading p {
display: none;
}
#services .catalog-workspace-heading h2 {
margin: 0;
font-size: 28px;
}
#services .catalog-region-context,
  #services .catalog-workspace-heading .publish-button {
min-height: 40px;
border-radius: 11px;
}
#services .catalog-workspace-heading .publish-button {
padding: 0 12px;
}
#services .catalog-workspace {
margin-top: 8px;
border-radius: var(--v15-radius-md);
}
#services .catalog-workspace .catalog-heading {
padding: 9px;
}
#services .catalog-workspace .catalog-filters {
padding: 6px 22px 7px 8px;
}
#services .catalog-workspace .catalog-filters button {
min-height: 36px;
}
#services .catalog-guidance {
margin: 8px 8px 0;
padding: 9px;
grid-template-columns: auto minmax(0, 1fr);
border-radius: 13px;
}
#services .catalog-guidance-icon {
width: 30px;
height: 30px;
border-radius: 10px;
}
#services .catalog-guidance-icon::before {
top: 7px;
left: 8px;
width: 11px;
height: 7px;
}
#services .catalog-guidance p {
white-space: normal;
}
#services .catalog-workspace .catalog-list {
padding: 8px;
grid-template-columns: 1fr;
gap: 8px;
}
#services .catalog-workspace .catalog-card {
min-height: 222px;
padding: 13px;
border-radius: 14px;
}
#services .catalog-card-icon {
width: 40px;
height: 40px;
flex-basis: 40px;
border-radius: 13px;
background-size: 320px 40px;
}
#services .catalog-card[data-catalog-card-kind='SERVICE'] .catalog-card-icon {
background-position: -40px 0;
}
#services .catalog-card[data-catalog-card-kind='AGRICULTURAL_PRODUCT'] .catalog-card-icon {
background-position: -80px 0;
}
#services .catalog-card[data-catalog-card-kind='secondhand'] .catalog-card-icon {
background-position: -120px 0;
}
#services .catalog-card[data-catalog-card-kind='jobs'] .catalog-card-icon {
background-position: -160px 0;
}
#services .catalog-card[data-catalog-card-kind='stations'] .catalog-card-icon {
background-position: -280px 0;
}
#services .catalog-workspace .catalog-card-footer {
align-items: stretch;
gap: 10px;
}
#services .catalog-card-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#services .catalog-card-actions button,
  #services .catalog-card-footer > button {
min-height: 42px;
}
}
@media (prefers-reduced-motion: reduce) {
#services .catalog-workspace .catalog-card {
transition: none;
}
}

/* source: apps/portal-web/public/v16-family.css */
.family-order-modal {
width: min(620px, calc(100vw - 28px));
max-height: min(820px, calc(100vh - 28px));
overflow: auto;
position: relative;
padding: 30px;
border: 1px solid var(--v15-border, #eadfce);
border-radius: 24px;
background: #fffdfa;
box-shadow: 0 24px 80px rgb(71 48 24 / 18%);
}
.family-order-modal h2 {
margin: 10px 0 6px;
color: var(--v15-ink, #2e271f);
}
.family-order-modal > p {
color: var(--v15-muted, #766b60);
line-height: 1.7;
}
.family-order-choice {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 22px 0;
}
.family-order-choice label {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
border: 1px solid #e2d5c3;
border-radius: 14px;
background: #fff;
cursor: pointer;
}
#family-recipient-panel > label,
.family-recipient-editor label {
display: grid;
gap: 7px;
margin-bottom: 14px;
color: #554b40;
font-weight: 700;
}
#family-recipient-panel select,
.family-recipient-editor input,
.family-recipient-editor textarea {
width: 100%;
min-height: 44px;
border: 1px solid #ded2c2;
border-radius: 12px;
padding: 10px 12px;
background: #fff;
color: #302920;
font: inherit;
}
.family-recipient-summary {
min-height: 48px;
margin: 8px 0 16px;
padding: 12px 14px;
border-radius: 12px;
background: #f8f1e7;
color: #67594a;
line-height: 1.6;
}
.family-recipient-toolbar,
.family-recipient-form-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: -6px 0 16px;
}
.family-recipient-toolbar button,
.family-recipient-form-actions button {
min-height: 38px;
padding: 0 13px;
border: 1px solid #dfd2c0;
border-radius: 10px;
color: #765139;
background: #fff;
cursor: pointer;
font: inherit;
font-weight: 750;
}
.family-recipient-toolbar button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.family-recipient-form-actions {
margin: 16px 0 0;
}
.family-recipient-editor {
padding: 14px;
border: 1px dashed #d8c7b1;
border-radius: 16px;
background: #fffaf4;
}
.family-recipient-editor summary {
cursor: pointer;
color: #8c552e;
font-weight: 800;
}
.family-recipient-editor form {
margin-top: 16px;
}
.family-order-actions {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
gap: 10px;
margin-top: 20px;
}
.family-order-actions button {
min-height: 44px;
padding: 0 18px;
border-radius: 12px;
white-space: nowrap;
}
.order-recipient {
display: grid;
gap: 3px;
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
background: #f8f1e7;
color: #67594a;
}
.order-recipient strong {
color: #8c552e;
}
@media (max-width: 640px) {
.family-order-modal {
padding: 24px 18px;
border-radius: 20px;
}
.family-order-choice,
  .family-recipient-editor .field-grid {
grid-template-columns: 1fr;
}
}

/* source: apps/ui-system/public/v17-compat.css */
:root {
--v10-bg-page: var(--ui-color-bg-page);
--v10-bg-surface: var(--ui-color-surface);
--v10-brand-900: var(--ui-color-heading);
--v10-brand-700: var(--ui-color-brand);
--v10-accent-terracotta: var(--ui-color-accent-terracotta);
--v10-accent-wheat: var(--ui-color-accent-wheat);
--v10-accent-sage: var(--ui-color-accent-sage);
--v14-page: var(--ui-color-bg-page);
--v14-surface: var(--ui-color-surface);
--v14-ink: var(--ui-color-heading);
--v14-muted: var(--ui-color-muted);
--v14-brand: var(--ui-color-brand);
--v14-brand-strong: var(--ui-color-brand-strong);
--v14-brand-soft: var(--ui-color-brand-soft);
--v15-page: var(--ui-color-bg-page);
--v15-surface: var(--ui-color-surface);
--v15-surface-soft: var(--ui-color-bg-subtle);
--v15-ink: var(--ui-color-heading);
--v15-text: var(--ui-color-text);
--v15-muted: var(--ui-color-muted);
--v15-brand: var(--ui-color-brand);
--v15-brand-strong: var(--ui-color-brand-strong);
--v15-brand-soft: var(--ui-color-brand-soft);
--v15-line: var(--ui-color-line);
--v15-line-strong: var(--ui-color-line-strong);
--v15-radius-sm: var(--ui-radius-sm);
--v15-radius-md: var(--ui-radius-md);
--v15-radius-lg: var(--ui-radius-lg);
--v15-shadow-soft: var(--ui-shadow-md);
--v15-shadow-float: var(--ui-shadow-lg);
--ink: var(--ui-color-heading);
--muted: var(--ui-color-muted);
--forest: var(--ui-color-brand);
--forest-dark: var(--ui-color-brand-strong);
--green: var(--ui-color-brand);
--deep: var(--ui-color-brand-strong);
--mint: var(--ui-color-brand-soft);
--paper: var(--ui-color-bg-page);
--cream: var(--ui-color-surface);
--line: var(--ui-color-line-strong);
--danger: var(--ui-color-danger);
}

/* source: apps/ui-system/public/v17-components.css */
.ui-page {
min-height: 100vh;
margin: 0;
color: var(--ui-color-text);
background: var(--ui-color-bg-page);
font-family: var(--ui-font-sans);
line-height: var(--ui-line-height-body);
}
.ui-page,
.ui-page * {
box-sizing: border-box;
}
.ui-container {
width: min(calc(100% - 2 * var(--ui-space-6)), var(--ui-content-lg));
margin-inline: auto;
}
.ui-stack {
display: grid;
gap: var(--ui-space-4);
}
.ui-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ui-space-3);
}
.ui-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--ui-space-4);
}
.ui-shell {
min-height: 100vh;
display: grid;
grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr);
background: var(--ui-color-bg-page);
}
.ui-shell__sidebar {
padding: var(--ui-space-6);
border-right: 1px solid var(--ui-color-line);
color: var(--ui-color-heading);
background: var(--ui-color-surface);
}
.ui-shell__main {
min-width: 0;
}
.ui-shell__header {
min-height: var(--ui-header-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-4);
padding: var(--ui-space-4) var(--ui-space-6);
border-bottom: 1px solid var(--ui-color-line);
background: var(--ui-color-surface);
}
.ui-button {
min-height: var(--ui-control-height-md);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-2);
padding: 0 var(--ui-space-5);
border: 1px solid transparent;
border-radius: var(--ui-radius-md);
color: #fff;
background: var(--ui-color-brand);
font: var(--ui-font-weight-bold) var(--ui-font-size-sm)/1 var(--ui-font-sans);
text-decoration: none;
cursor: pointer;
transition:
    background var(--ui-motion-base) var(--ui-ease-standard),
    transform var(--ui-motion-fast) var(--ui-ease-standard);
}
.ui-button:hover {
background: var(--ui-color-brand-strong);
}
.ui-button:active {
transform: translateY(1px);
}
.ui-button--secondary {
color: var(--ui-color-heading);
border-color: var(--ui-color-line-strong);
background: var(--ui-color-surface);
}
.ui-button--secondary:hover {
background: var(--ui-color-brand-soft);
}
.ui-button--danger {
background: var(--ui-color-danger);
}
.ui-button[disabled],
.ui-button[aria-disabled='true'] {
opacity: 0.48;
cursor: not-allowed;
}
.ui-field {
display: grid;
gap: var(--ui-space-2);
color: var(--ui-color-heading);
font-size: var(--ui-font-size-sm);
font-weight: var(--ui-font-weight-medium);
}
.ui-input,
.ui-select,
.ui-textarea {
width: 100%;
min-height: var(--ui-control-height-md);
padding: var(--ui-space-3) var(--ui-space-4);
border: 1px solid var(--ui-color-line-strong);
border-radius: var(--ui-radius-md);
color: var(--ui-color-text);
background: var(--ui-color-surface);
font: inherit;
}
.ui-search {
min-height: var(--ui-control-height-lg);
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: 0 var(--ui-space-4);
border: 1px solid var(--ui-color-line-strong);
border-radius: var(--ui-radius-pill);
color: var(--ui-color-muted);
background: var(--ui-color-surface);
}
.ui-search .ui-icon {
flex: none;
}
.ui-search input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
color: var(--ui-color-text);
background: transparent;
font: inherit;
}
.ui-textarea {
min-height: 112px;
resize: vertical;
}
.ui-input::placeholder,
.ui-textarea::placeholder {
color: var(--ui-color-muted);
}
.ui-button:focus-visible,
.ui-input:focus-visible,
.ui-select:focus-visible,
.ui-textarea:focus-visible,
.ui-tab:focus-visible {
outline: 3px solid color-mix(in srgb, var(--ui-color-focus) 28%, transparent);
outline-offset: 2px;
}
.ui-card {
padding: var(--ui-space-6);
border: 1px solid var(--ui-color-line);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.ui-card__eyebrow {
color: var(--ui-color-brand);
font-size: var(--ui-font-size-xs);
font-weight: var(--ui-font-weight-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ui-card h2,
.ui-card h3 {
margin: var(--ui-space-2) 0;
color: var(--ui-color-heading);
line-height: var(--ui-line-height-tight);
}
.ui-card p {
margin: 0;
color: var(--ui-color-muted);
}
.ui-chip,
.ui-badge,
.ui-status {
width: fit-content;
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
min-height: 28px;
padding: 0 var(--ui-space-3);
border-radius: var(--ui-radius-pill);
color: var(--ui-color-brand-strong);
background: var(--ui-color-brand-soft);
font-size: var(--ui-font-size-xs);
font-weight: var(--ui-font-weight-bold);
}
.ui-status::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
content: '';
}
.ui-status--warning {
color: var(--ui-color-warning);
background: color-mix(in srgb, var(--ui-color-warning) 12%, white);
}
.ui-status--danger {
color: var(--ui-color-danger);
background: color-mix(in srgb, var(--ui-color-danger) 10%, white);
}
.ui-tabs {
display: flex;
gap: var(--ui-space-2);
padding: var(--ui-space-1);
overflow-x: auto;
border-bottom: 1px solid var(--ui-color-line);
}
.ui-tab {
min-height: var(--ui-touch-target);
padding: 0 var(--ui-space-4);
border: 0;
border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
color: var(--ui-color-muted);
background: transparent;
font: inherit;
font-weight: var(--ui-font-weight-bold);
cursor: pointer;
}
.ui-tab[aria-selected='true'] {
color: var(--ui-color-brand);
background: var(--ui-color-brand-soft);
}
.ui-icon {
width: 1.25em;
height: 1.25em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.ui-icon-tile {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: var(--ui-radius-md);
color: var(--ui-color-brand);
background: var(--ui-color-brand-soft);
}
.ui-avatar {
width: 44px;
height: 44px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 50%;
color: #fff;
background: var(--ui-color-brand);
font-weight: var(--ui-font-weight-bold);
}
.ui-rating {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
color: var(--ui-color-warning);
font-weight: var(--ui-font-weight-bold);
}
.ui-state {
min-height: 180px;
display: grid;
place-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-8);
border: 1px dashed var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
color: var(--ui-color-muted);
background: var(--ui-color-surface);
text-align: center;
}
.ui-state strong {
color: var(--ui-color-heading);
font-size: var(--ui-font-size-lg);
}
.ui-state p {
max-width: 42ch;
margin: 0;
}
.ui-skeleton {
position: relative;
overflow: hidden;
border-radius: var(--ui-radius-sm);
background: var(--ui-color-bg-subtle);
}
.ui-skeleton::after {
position: absolute;
inset: 0;
background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 80%
  );
transform: translateX(-100%);
animation: ui-shimmer 1.4s infinite;
content: '';
}
@keyframes ui-shimmer {
to {
transform: translateX(100%);
}
}
.ui-table-wrap {
overflow: auto;
border: 1px solid var(--ui-color-line);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
}
.ui-table {
width: 100%;
border-collapse: collapse;
min-width: 640px;
}
.ui-table th,
.ui-table td {
padding: var(--ui-space-3) var(--ui-space-4);
border-bottom: 1px solid var(--ui-color-line);
text-align: left;
}
.ui-table th {
color: var(--ui-color-muted);
background: var(--ui-color-bg-subtle);
font-size: var(--ui-font-size-xs);
letter-spacing: 0.05em;
}
.ui-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-2);
}
.ui-pagination button {
min-width: var(--ui-touch-target);
min-height: var(--ui-touch-target);
border: 1px solid var(--ui-color-line-strong);
border-radius: var(--ui-radius-md);
color: var(--ui-color-heading);
background: var(--ui-color-surface);
font: inherit;
cursor: pointer;
}
.ui-pagination button[aria-current='page'] {
border-color: var(--ui-color-brand);
color: #fff;
background: var(--ui-color-brand);
}
.ui-timeline {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.ui-timeline li {
position: relative;
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: var(--ui-space-3);
padding-bottom: var(--ui-space-5);
}
.ui-timeline li::before {
width: 10px;
height: 10px;
margin-top: 7px;
border: 3px solid var(--ui-color-brand-soft);
border-radius: 50%;
background: var(--ui-color-brand);
content: '';
}
.ui-timeline li:not(:last-child)::after {
position: absolute;
top: 22px;
bottom: 0;
left: 6px;
width: 1px;
background: var(--ui-color-line-strong);
content: '';
}
.ui-timeline strong,
.ui-timeline small {
display: block;
}
.ui-timeline small {
color: var(--ui-color-muted);
}
.ui-modal-backdrop,
.ui-drawer-backdrop {
padding: var(--ui-space-6);
color: var(--ui-color-text);
background: var(--ui-color-overlay);
}
.ui-modal {
width: min(520px, 100%);
margin: auto;
padding: var(--ui-space-6);
border-radius: var(--ui-radius-xl);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-lg);
}
.ui-drawer {
width: min(420px, 100%);
min-height: 220px;
margin-left: auto;
padding: var(--ui-space-6);
border-radius: var(--ui-radius-xl) 0 0 var(--ui-radius-xl);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-lg);
}
.ui-modal-preview {
padding: var(--ui-space-6);
border-radius: var(--ui-radius-xl);
color: var(--ui-color-text);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-lg);
}
.ui-bottom-sheet-preview {
padding: var(--ui-space-5);
border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0;
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-lg);
}
@media (max-width: 720px) {
.ui-container {
width: min(calc(100% - 2 * var(--ui-space-4)), var(--ui-content-lg));
}
.ui-card {
padding: var(--ui-space-5);
}
.ui-grid {
grid-template-columns: 1fr;
}
.ui-shell {
grid-template-columns: 1fr;
}
.ui-shell__sidebar {
border-right: 0;
border-bottom: 1px solid var(--ui-color-line);
}
}
@media (prefers-reduced-motion: reduce) {
.ui-skeleton::after {
animation: none;
}
}

/* source: apps/ui-system/public/v17-accessibility.css */
.network-status {
position: sticky;
z-index: var(--v19-z-critical, 90);
top: 0;
padding: 12px 20px;
color: #5c3d12;
background: #fff1c9;
border-bottom: 1px solid #e2c16f;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
}
body[data-display-mode='senior'] {
font-size: 18px;
line-height: 1.72;
}
body[data-display-mode='senior'] :is(button, input, select, textarea) {
min-height: 52px;
font-size: 17px;
line-height: 1.5;
}
body[data-display-mode='senior'] :is(p, small, .muted, .feed-copy, .card-copy) {
font-size: max(16px, 0.92em);
line-height: 1.72;
}
body[data-display-mode='senior'] :is(.category-entry, .account-setting-grid > *, .menu-item) {
min-height: 92px;
}
body[data-display-mode='senior'] :is(.site-header, .mobile-tabbar) {
--ui-touch-target: 52px;
}
body[data-display-mode='senior'] #home .home-entry-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body[data-display-mode='senior'] [data-senior-secondary] {
display: none !important;
}
body[data-display-mode='senior'] :focus-visible {
outline-width: 4px;
outline-offset: 4px;
}
@media (max-width: 720px) {
body[data-display-mode='senior'] {
font-size: 17px;
}
body[data-display-mode='senior'] .mobile-tabbar button {
min-height: 64px;
font-size: 16px;
}
}

/* source: apps/portal-web/public/v17-directory-detail.css */
.v17-directory {
--v17-directory-card-min: 210px;
}
.v17-directory .catalog-workspace-heading,
.v17-directory .unified-search-heading {
border-color: var(--ui-color-line-strong);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.v17-directory .catalog-workspace-heading::before,
.v17-directory .catalog-workspace-heading::after {
opacity: 0.56;
}
.v17-directory .catalog-workspace,
.v17-search-directory {
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.v17-directory .catalog-empty > div {
margin-top: var(--ui-space-2);
}
.v17-directory .catalog-heading,
.v17-search-directory .unified-search-heading {
gap: var(--ui-space-4);
}
.v17-directory .catalog-search-field {
min-width: min(300px, 38vw);
}
.v17-directory .catalog-search-field input,
.v17-search-directory select {
min-height: var(--ui-control-height-md);
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-md);
color: var(--ui-color-text);
background: var(--ui-color-bg-page);
}
.v17-directory .catalog-filters,
.v17-search-directory .unified-search-types {
min-height: 52px;
align-items: center;
}
.v17-directory .catalog-filters button,
.v17-search-directory .unified-search-types button {
min-height: 38px;
padding: 0 var(--ui-space-4);
border: 0;
border-radius: var(--ui-radius-pill);
color: var(--ui-color-muted);
background: transparent;
font: inherit;
font-size: var(--ui-font-size-sm);
font-weight: var(--ui-font-weight-bold);
cursor: pointer;
}
.v17-search-directory .unified-search-types button.active,
.v17-search-directory .unified-search-types button[aria-pressed='true'] {
color: #fff;
background: var(--ui-color-brand);
}
.v17-directory .catalog-list,
.v17-search-directory .unified-search-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ui-space-4);
}
.v17-directory .catalog-card,
.v17-search-directory .unified-search-card {
min-height: var(--v17-directory-card-min);
display: flex;
flex-direction: column;
border-color: var(--ui-color-line);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.v17-directory .catalog-card:hover,
.v17-search-directory .unified-search-card:hover {
border-color: color-mix(in srgb, var(--ui-color-brand) 28%, transparent);
box-shadow: var(--ui-shadow-md);
}
.v17-directory .catalog-card-icon,
.v17-search-directory .unified-search-card-icon {
display: grid;
place-items: center;
color: var(--ui-color-brand);
background-color: var(--ui-color-brand-soft);
background-image: none !important;
}
.v17-directory .catalog-card-icon .ui-icon,
.v17-search-directory .unified-search-card-icon .ui-icon {
width: 24px;
height: 24px;
}
.v17-directory .catalog-card h3,
.v17-search-directory .unified-search-card h3 {
color: var(--ui-color-heading);
font-size: var(--ui-font-size-lg);
line-height: var(--ui-line-height-tight);
}
.v17-directory .catalog-card p,
.v17-search-directory .unified-search-card p {
display: -webkit-box;
overflow: hidden;
color: var(--ui-color-muted);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.v17-directory .catalog-card-footer,
.v17-search-directory .unified-search-card-foot {
margin-top: auto;
}
.v17-directory .catalog-card-actions button,
.v17-search-directory .unified-search-card-foot button {
min-height: var(--ui-control-height-sm);
border-radius: var(--ui-radius-sm);
}
.catalog-mobile-filter {
display: none;
}
.v17-filter-backdrop {
align-items: end;
}
.v17-filter-sheet {
width: min(560px, 100%);
margin: auto auto 0;
padding: var(--ui-space-6);
border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0;
color: var(--ui-color-text);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-lg);
}
.v17-filter-sheet header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-4);
}
.v17-filter-sheet header span,
.v17-filter-sheet > p {
color: var(--ui-color-muted);
font-size: var(--ui-font-size-xs);
}
.v17-filter-sheet h2 {
margin: var(--ui-space-1) 0 0;
color: var(--ui-color-heading);
}
.v17-filter-sheet header button {
width: var(--ui-touch-target);
height: var(--ui-touch-target);
border: 0;
border-radius: 50%;
color: var(--ui-color-muted);
background: var(--ui-color-bg-subtle);
font-size: 24px;
cursor: pointer;
}
.v17-filter-sheet-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-3);
margin-top: var(--ui-space-5);
}
.v17-filter-sheet-options button {
min-height: var(--ui-control-height-lg);
border: 1px solid var(--ui-color-line-strong);
border-radius: var(--ui-radius-md);
color: var(--ui-color-heading);
background: var(--ui-color-surface);
font: inherit;
font-weight: var(--ui-font-weight-bold);
cursor: pointer;
}
.v17-filter-sheet-options button.active {
border-color: var(--ui-color-brand);
color: #fff;
background: var(--ui-color-brand);
}
.v17-detail-backdrop {
padding: var(--ui-space-5);
}
.v17-detail {
width: min(760px, 100%);
padding: 0;
border: 1px solid var(--ui-color-line-strong);
border-radius: var(--ui-radius-xl);
color: var(--ui-color-text);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-lg);
}
.v17-detail > :not(.v17-detail-media, .modal-close) {
margin-right: var(--ui-space-8);
margin-left: var(--ui-space-8);
}
.v17-detail-media {
min-height: 128px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--ui-space-4);
padding: var(--ui-space-6) var(--ui-space-8);
border-radius: inherit;
color: var(--ui-color-brand-strong);
background:
    radial-gradient(circle at 86% 22%, rgba(239, 194, 111, 0.42) 0 32px, transparent 33px),
    linear-gradient(135deg, var(--ui-color-brand-soft), var(--ui-color-bg-page));
font-size: var(--ui-font-size-xs);
font-weight: var(--ui-font-weight-bold);
}
.v17-detail-media-icon {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: var(--ui-radius-lg);
color: #fff;
background: var(--ui-color-brand);
box-shadow: var(--ui-shadow-sm);
}
.v17-detail-media-icon .ui-icon {
width: 30px;
height: 30px;
}
.v17-detail .modal-close {
top: var(--ui-space-4);
right: var(--ui-space-4);
color: var(--ui-color-heading);
background: color-mix(in srgb, var(--ui-color-surface) 88%, transparent);
backdrop-filter: blur(8px);
}
.v17-detail .detail-heading {
margin-top: var(--ui-space-6);
padding: 0;
}
.v17-detail .detail-heading h2 {
margin: var(--ui-space-3) 0 var(--ui-space-2);
color: var(--ui-color-heading);
font-family: var(--ui-font-sans);
font-size: var(--ui-font-size-2xl);
}
.v17-detail .detail-reputation {
margin-top: var(--ui-space-4);
margin-bottom: 0;
}
.v27-public-navigation {
padding: 12px 0;
min-width: 0;
overflow-wrap: anywhere;
}
.v27-public-navigation p {
margin: 8px 0;
user-select: text;
}
.v27-public-navigation button {
min-height: 44px;
max-width: 100%;
}
.v17-detail .detail-action-row {
margin-top: var(--ui-space-5);
padding: var(--ui-space-4);
border: 1px solid var(--ui-color-line);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-bg-page);
}
.v17-detail .detail-action-buttons {
order: 2;
}
.v17-detail .detail-action-row > strong {
order: 1;
color: var(--ui-color-accent-terracotta);
}
.v17-detail-content {
margin-top: var(--ui-space-6);
}
.v17-detail-content h3,
.v17-detail-related strong {
color: var(--ui-color-heading);
}
.v17-detail .detail-description {
margin: var(--ui-space-3) 0 0;
padding: 0;
color: var(--ui-color-text);
background: transparent;
font-size: var(--ui-font-size-sm);
}
.v17-detail .detail-reviews {
margin-top: var(--ui-space-8);
}
.v17-detail-related {
margin-top: var(--ui-space-8);
margin-bottom: var(--ui-space-8);
padding: var(--ui-space-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-4);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-brand-soft);
}
.v17-detail-related div,
.v17-detail-related span,
.v17-detail-related strong {
display: grid;
gap: var(--ui-space-1);
}
.v17-detail-related span {
color: var(--ui-color-muted);
font-size: var(--ui-font-size-xs);
}
.v17-detail-related button {
flex: none;
min-height: var(--ui-control-height-md);
padding: 0 var(--ui-space-4);
border: 1px solid var(--ui-color-line-strong);
border-radius: var(--ui-radius-md);
color: var(--ui-color-brand-strong);
background: var(--ui-color-surface);
font: inherit;
font-weight: var(--ui-font-weight-bold);
cursor: pointer;
}
@media (max-width: 980px) {
.v17-directory .catalog-list,
  .v17-search-directory .unified-search-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 561px) and (max-height: 700px) {
#services .catalog-workspace-heading {
min-height: 88px;
padding: 12px 18px;
}
#services .catalog-workspace-heading .section-kicker {
display: none;
}
#services .catalog-workspace-heading h2 {
margin: 2px 0 3px;
font-size: 34px;
}
#services .catalog-workspace-heading p {
line-height: 1.35;
}
#services .catalog-region-context,
  #services .catalog-workspace-heading .publish-button {
min-height: 40px;
}
#services .catalog-guidance {
margin-top: 6px;
padding-block: 6px;
}
#services .catalog-guidance p {
display: none;
}
#services .catalog-workspace .catalog-empty > div {
margin-top: var(--ui-space-1);
}
#services .catalog-workspace .catalog-empty {
padding: 16px 20px;
}
}
@media (max-width: 560px) {
.v17-directory .catalog-workspace-heading {
min-height: auto;
}
.v17-directory .catalog-search-field {
min-width: 0;
flex: 1 1 100%;
}
.v17-directory .catalog-tools {
width: 100%;
flex-wrap: wrap;
}
.v17-directory .catalog-filters button:nth-child(n + 5) {
display: none;
}
.catalog-mobile-filter {
display: inline-flex;
align-items: center;
justify-content: center;
}
.v17-directory .catalog-list,
  .v17-search-directory .unified-search-list {
grid-template-columns: 1fr;
}
.v17-directory .catalog-card,
  .v17-search-directory .unified-search-card {
min-height: 202px;
}
.v17-filter-backdrop {
padding: 0;
}
.v17-filter-sheet {
max-height: min(76dvh, 620px);
overflow: auto;
}
.v17-detail-backdrop {
padding: 0;
}
.v17-detail {
width: 100%;
height: 100dvh;
max-height: none;
border: 0;
border-radius: 0;
}
.v17-detail > :not(.v17-detail-media, .modal-close) {
margin-right: var(--ui-space-4);
margin-left: var(--ui-space-4);
}
.v17-detail-media {
min-height: 112px;
padding: var(--ui-space-5) var(--ui-space-4);
border-radius: 0;
}
.v17-detail .detail-action-row {
align-items: stretch;
flex-direction: column;
}
.v17-detail .detail-action-buttons {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
order: 2;
}
.v17-detail .detail-action-buttons button:last-child:first-child,
  .v17-detail .detail-action-buttons button[hidden] + button {
grid-column: 1 / -1;
}
.v17-detail-related {
align-items: stretch;
flex-direction: column;
margin-bottom: calc(82px + var(--ui-space-5));
}
}
@media (prefers-reduced-motion: reduce) {
.v17-directory .catalog-card,
  .v17-search-directory .unified-search-card {
transition: none;
}
}

/* source: apps/portal-web/public/v17-feed-form-workspace.css */
#local-circle.v17-feed,
.v17-workspace,
.v17-form {
color: var(--ui-color-text);
font-family: var(--ui-font-sans);
}
#local-circle.v17-feed .local-circle-heading,
.v17-workspace .workspace-page-heading {
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
#local-circle.v17-feed .local-circle-controls,
#local-circle.v17-feed .local-circle-discovery-tools,
#local-circle.v17-feed .local-circle-topic-strip {
border-color: var(--ui-color-line);
color: var(--ui-color-muted);
background: var(--ui-color-surface);
}
#local-circle.v17-feed .local-circle-channels button,
#local-circle.v17-feed .local-circle-categories button,
#local-circle.v17-feed .local-circle-nearby button,
#local-circle.v17-feed .local-circle-topic-strip button {
min-height: var(--ui-control-height-sm);
border-radius: var(--ui-radius-pill);
font-size: var(--ui-font-size-xs);
}
#local-circle.v17-feed .local-circle-channels button.active,
#local-circle.v17-feed .local-circle-categories button.active,
#local-circle.v17-feed .local-circle-nearby button.active,
#local-circle.v17-feed .local-circle-topic-strip button.active {
border-color: var(--ui-color-brand);
color: #fff;
background: var(--ui-color-brand);
}
#local-circle.v17-feed .local-circle-feed {
grid-template-columns: minmax(0, 1fr) minmax(248px, 300px);
align-items: start;
gap: var(--ui-space-4);
}
#local-circle.v17-feed .local-circle-list {
gap: var(--ui-space-4);
}
#local-circle.v17-feed .v17-feed-card {
padding: var(--ui-space-5);
border: 1px solid var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
#local-circle.v17-feed .v17-feed-card:hover {
border-color: color-mix(in srgb, var(--ui-color-brand) 28%, transparent);
box-shadow: var(--ui-shadow-md);
}
#local-circle.v17-feed .local-circle-card-author > span {
width: 42px;
height: 42px;
border-radius: var(--ui-radius-md);
color: var(--ui-color-brand-strong);
background: var(--ui-color-brand-soft);
}
#local-circle.v17-feed .v17-feed-card[data-author-type='platform'] .local-circle-card-author > span,
#local-circle.v17-feed .v17-feed-card[data-author-type='region'] .local-circle-card-author > span {
color: #fff;
background: var(--ui-color-brand);
}
#local-circle.v17-feed .v17-feed-card[data-author-type='station'] .local-circle-card-author > span {
color: #fff;
background: var(--ui-color-info);
}
#local-circle.v17-feed
  .v17-feed-card[data-author-type='merchant']
  .local-circle-card-author
  > span {
color: #fff;
background: var(--ui-color-accent-terracotta);
}
#local-circle.v17-feed .local-circle-author-copy strong {
color: var(--ui-color-heading);
font-size: var(--ui-font-size-sm);
}
#local-circle.v17-feed .local-circle-author-source {
color: var(--ui-color-muted);
font-size: var(--ui-font-size-xs);
}
#local-circle.v17-feed .v17-feed-card[data-author-type='platform'] .local-circle-author-source,
#local-circle.v17-feed .v17-feed-card[data-author-type='region'] .local-circle-author-source {
color: var(--ui-color-brand-strong);
font-weight: var(--ui-font-weight-bold);
}
#local-circle.v17-feed .v17-feed-card h3 {
margin: var(--ui-space-4) 0 var(--ui-space-2);
color: var(--ui-color-heading);
font-size: var(--ui-font-size-lg);
line-height: var(--ui-line-height-tight);
}
#local-circle.v17-feed .v17-feed-card .local-circle-card-body {
min-height: auto;
color: var(--ui-color-text);
font-size: var(--ui-font-size-sm);
line-height: var(--ui-line-height-body);
-webkit-line-clamp: 3;
}
#local-circle.v17-feed .local-circle-card-media {
height: 164px;
margin: var(--ui-space-4) 0 0;
border-radius: var(--ui-radius-md);
}
#local-circle.v17-feed .local-circle-card-media img {
height: 164px;
}
#local-circle.v17-feed .local-circle-card-location {
margin: var(--ui-space-3) 0;
color: var(--ui-color-muted);
font-size: var(--ui-font-size-xs);
}
#local-circle.v17-feed .local-circle-card-footer {
min-height: var(--ui-touch-target);
padding-top: var(--ui-space-3);
border-color: var(--ui-color-line);
}
#local-circle.v17-feed .local-circle-card-footer > span {
color: var(--ui-color-muted);
font-size: var(--ui-font-size-xs);
}
#local-circle.v17-feed .local-circle-card-footer button {
min-height: var(--ui-control-height-sm);
border-radius: var(--ui-radius-sm);
color: var(--ui-color-brand-strong);
background: var(--ui-color-brand-soft);
}
#local-circle.v17-feed .local-circle-hot-panel {
position: sticky;
top: calc(var(--ui-header-height) + var(--ui-space-4));
padding: var(--ui-space-4);
border: 1px solid var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
#local-circle.v17-feed .local-circle-hot-card {
min-height: 64px;
border-color: var(--ui-color-line);
}
#local-circle.v17-feed .local-circle-hot-card b {
color: var(--ui-color-accent-terracotta);
}
#publish-modal:has(.v17-form) {
background: var(--ui-color-overlay);
}
.v17-form {
width: min(920px, 100%);
padding: var(--ui-space-8);
border: 1px solid var(--ui-color-line-strong);
border-radius: var(--ui-radius-xl);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-lg);
}
.v17-form .publish-intro {
padding-right: var(--ui-space-10);
}
.v17-form .publish-intro h2 {
color: var(--ui-color-heading);
font-size: var(--ui-font-size-2xl);
}
.v17-form .publish-intro p,
.v17-form .publish-choice-group small,
.v17-form .publish-form label {
color: var(--ui-color-muted);
}
.v17-form .publish-flow-steps {
max-width: 520px;
margin-top: var(--ui-space-5);
}
.v17-form .publish-flow-steps li {
color: var(--ui-color-muted);
font-size: var(--ui-font-size-xs);
}
.v17-form .publish-flow-steps i {
width: 28px;
height: 28px;
color: var(--ui-color-muted);
background: var(--ui-color-bg-subtle);
}
.v17-form .publish-flow-steps li.active i,
.v17-form .publish-flow-steps li.complete i {
color: #fff;
background: var(--ui-color-brand);
}
.v17-form .publish-category-tabs,
.v17-form .publish-tabs {
border: 1px solid var(--ui-color-line);
border-radius: var(--ui-radius-md);
background: var(--ui-color-bg-subtle);
}
.v17-form .publish-category-tabs button,
.v17-form .publish-tabs button {
min-height: var(--ui-control-height-md);
border-radius: var(--ui-radius-sm);
color: var(--ui-color-muted);
}
.v17-form .publish-category-tabs button.active,
.v17-form .publish-tabs button.active {
color: var(--ui-color-brand-strong);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.v17-form .publish-choice-group {
min-height: 250px;
padding: var(--ui-space-6);
border: 1px solid var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
background:
    radial-gradient(circle at 92% 10%, var(--ui-color-brand-soft), transparent 34%),
    var(--ui-color-surface);
}
.v17-form .publish-choice-group > div:first-child span {
color: var(--ui-color-heading);
font-size: var(--ui-font-size-xl);
}
.v17-form .publish-type-grid button {
min-height: 100px;
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-md);
color: var(--ui-color-heading);
background: var(--ui-color-surface-raised);
}
.v17-form .publish-type-grid button:hover,
.v17-form .publish-type-grid button:focus-visible {
border-color: var(--ui-color-brand);
box-shadow: var(--ui-shadow-sm);
}
.v17-form .publish-pane:not(.publish-choice-pane) {
max-width: var(--ui-content-sm);
margin-right: auto;
margin-left: auto;
}
.v17-form .publish-form {
gap: var(--ui-space-4);
padding: var(--ui-space-6);
border: 1px solid var(--ui-color-line);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface-raised);
}
.v17-form .publish-form input,
.v17-form .publish-form select,
.v17-form .publish-form textarea {
min-height: var(--ui-control-height-md);
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-sm);
color: var(--ui-color-text);
background: var(--ui-color-surface);
font: inherit;
}
.v17-form .publish-form input:focus,
.v17-form .publish-form select:focus,
.v17-form .publish-form textarea:focus {
border-color: var(--ui-color-focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-color-focus) 16%, transparent);
}
.v17-form .publish-form .submit-login {
min-height: var(--ui-control-height-lg);
border-radius: var(--ui-radius-md);
background: var(--ui-color-brand);
font-size: var(--ui-font-size-sm);
}
.v17-form .publish-back {
min-height: var(--ui-control-height-md);
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-sm);
color: var(--ui-color-brand-strong);
}
.v17-workspace .workspace-page-heading h2 {
color: var(--ui-color-heading);
font-family: var(--ui-font-sans);
font-size: var(--ui-font-size-2xl);
}
.v17-workspace .workspace-page-heading p,
.v17-workspace .workspace-auth-state p,
.v17-workspace .workspace-empty-state p {
color: var(--ui-color-muted);
}
.v17-workspace .workspace-auth-state,
.v17-workspace .workspace-loading,
.v17-workspace .workspace-empty-state {
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
}
.v17-message-workspace .message-workspace-shell {
grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr);
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.v17-message-workspace .message-tabs {
border-color: var(--ui-color-line);
background: var(--ui-color-bg-subtle);
}
.v17-message-workspace .message-tabs button {
min-height: 60px;
border-radius: var(--ui-radius-md);
color: var(--ui-color-muted);
}
.v17-message-workspace .message-tabs button.active {
color: var(--ui-color-heading);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.v17-message-workspace .message-card {
min-height: 76px;
border-color: var(--ui-color-line);
border-radius: var(--ui-radius-md);
background: var(--ui-color-surface);
}
.v17-message-workspace .message-card:hover,
.v17-message-workspace .message-card.unread {
border-color: color-mix(in srgb, var(--ui-color-brand) 30%, transparent);
background: color-mix(in srgb, var(--ui-color-brand-soft) 48%, var(--ui-color-surface));
}
.v17-message-workspace .message-card-marker {
width: 42px;
height: 42px;
border-radius: var(--ui-radius-md);
color: var(--ui-color-brand-strong);
background: var(--ui-color-brand-soft);
}
.v17-message-workspace .message-card-marker .ui-icon {
width: 22px;
height: 22px;
}
.v17-account-workspace .account-workspace {
gap: var(--ui-space-4);
}
.v17-account-workspace .account-profile-card,
.v17-account-workspace .account-block {
padding: var(--ui-space-5);
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.v17-account-workspace .account-profile-card {
background: linear-gradient(135deg, var(--ui-color-brand-soft), var(--ui-color-surface) 72%);
}
.v17-account-workspace .account-avatar {
border-radius: var(--ui-radius-md);
background: var(--ui-color-brand);
}
.v17-account-workspace .account-order-grid button,
.v17-account-workspace .account-metric-grid button,
.v17-account-workspace .account-setting-grid button,
.v17-account-workspace .account-setting-grid a {
min-height: var(--ui-control-height-lg);
border-color: var(--ui-color-line);
border-radius: var(--ui-radius-md);
color: var(--ui-color-muted);
background: var(--ui-color-bg-page);
}
.v17-account-workspace .account-order-grid button:hover,
.v17-account-workspace .account-metric-grid button:hover,
.v17-account-workspace .account-setting-grid button:hover,
.v17-account-workspace .account-setting-grid a:hover {
border-color: var(--ui-color-brand);
background: var(--ui-color-brand-soft);
}
.v17-orders-workspace .orders-workspace {
gap: var(--ui-space-3);
}
.v17-orders-workspace .order-status-overview button,
.v17-orders-workspace .order-board {
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-md);
background: var(--ui-color-surface);
}
.v17-orders-workspace .order-status-overview button.active {
border-color: var(--ui-color-brand);
color: var(--ui-color-brand-strong);
background: var(--ui-color-brand-soft);
}
.v17-orders-workspace .order-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: auto;
gap: var(--ui-space-3);
}
.v17-orders-workspace .v17-order-card {
padding: var(--ui-space-4);
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-md);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.v17-orders-workspace .v17-order-card > span:first-of-type {
padding: var(--ui-space-1) var(--ui-space-2);
border-radius: var(--ui-radius-pill);
color: var(--ui-color-brand-strong);
background: var(--ui-color-brand-soft);
font-size: var(--ui-font-size-xs);
font-weight: var(--ui-font-weight-bold);
}
.v17-order-state-summary {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-2);
}
.v17-order-state-summary > span {
min-width: 0;
padding: var(--ui-space-3);
display: grid;
gap: var(--ui-space-1);
border-radius: var(--ui-radius-sm);
color: var(--ui-color-muted);
background: var(--ui-color-bg-subtle);
}
.v17-order-state-summary small,
.v17-order-state-summary strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v17-order-state-summary small {
font-size: var(--ui-font-size-xs);
}
.v17-order-state-summary strong {
color: var(--ui-color-heading);
font-size: var(--ui-font-size-sm);
}
.v17-orders-workspace .order-progress span.current {
background: var(--ui-color-brand);
}
.v17-orders-workspace .order-actions button {
min-height: var(--ui-control-height-sm);
border-radius: var(--ui-radius-sm);
}
@media (max-width: 900px) {
#local-circle.v17-feed .local-circle-feed,
  .v17-message-workspace .message-workspace-shell {
grid-template-columns: minmax(0, 1fr);
}
#local-circle.v17-feed .local-circle-hot-panel {
display: none;
}
#publish-modal:has(.v17-form) {
padding: var(--ui-space-3) 0 0;
place-items: end center;
}
#publish-modal .v17-form {
width: 100%;
max-height: calc(100dvh - var(--ui-space-3));
padding: var(--ui-space-6) var(--ui-space-4)
      calc(var(--ui-space-6) + env(safe-area-inset-bottom));
border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0;
}
.v17-form .publish-category-tabs {
overflow-x: auto;
grid-template-columns: repeat(5, minmax(108px, 1fr));
scrollbar-width: none;
}
.v17-form .publish-choice-group {
min-height: auto;
padding: var(--ui-space-4);
}
.v17-form .publish-form {
padding: var(--ui-space-4);
}
.v17-form .publish-form .submit-login {
position: sticky;
z-index: var(--ui-z-sticky);
bottom: 0;
box-shadow: 0 -10px 24px color-mix(in srgb, var(--ui-color-surface) 88%, transparent);
}
.v17-message-workspace .message-tabs {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.v17-orders-workspace .order-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
#local-circle.v17-feed .v17-feed-card {
padding: var(--ui-space-4);
}
#local-circle.v17-feed .local-circle-card-media,
  #local-circle.v17-feed .local-circle-card-media img {
height: 136px;
}
#local-circle.v17-feed .local-circle-card-footer {
align-items: flex-start;
flex-direction: column;
}
#local-circle.v17-feed .local-circle-card-footer button {
width: 100%;
}
.v17-form .publish-flow-steps li span {
display: block;
font-size: 10px;
}
.v17-form .publish-type-grid {
grid-template-columns: 1fr;
}
.v17-form .publish-type-grid button {
min-height: 76px;
}
.v17-form .field-grid,
  .v17-form .field-grid.four {
grid-template-columns: 1fr;
}
.v17-account-workspace .account-split {
grid-template-columns: 1fr;
}
.v17-account-workspace .account-order-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v17-order-state-summary {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
#local-circle.v17-feed .v17-feed-card,
  .v17-form .publish-type-grid button,
  .v17-workspace button {
transition: none;
}
}

/* source: apps/portal-web/public/v17-business-workspaces.css */
.v17-business-workspace {
color: var(--ui-color-text);
background: var(--ui-color-bg-page);
}
.v17-business-workspace .business-heading > button,
.v17-business-workspace .business-board-heading button,
.v17-business-workspace .business-guidance > button {
min-height: var(--ui-control-height-md);
padding: 0 var(--ui-space-4);
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-sm);
color: var(--ui-color-brand-strong);
background: var(--ui-color-surface);
font-size: var(--ui-font-size-xs);
}
.v17-business-workspace .business-workspace {
grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr);
align-items: start;
gap: var(--ui-space-5);
}
.business-identity-rail {
position: sticky;
top: 0;
min-width: 0;
padding: var(--ui-space-4);
display: grid;
gap: var(--ui-space-4);
border: 1px solid var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.business-rail-heading {
display: grid;
gap: var(--ui-space-1);
}
.business-rail-heading span {
color: var(--ui-color-brand-strong);
font-size: var(--ui-font-size-xs);
font-weight: var(--ui-font-weight-bold);
letter-spacing: 0.06em;
}
.business-rail-heading strong {
color: var(--ui-color-heading);
font-size: var(--ui-font-size-sm);
line-height: var(--ui-line-height-body);
}
.v17-business-workspace .business-identity-tabs {
display: grid;
gap: var(--ui-space-2);
overflow: visible;
}
.v17-business-workspace .business-identity-tabs button {
width: 100%;
min-height: var(--ui-touch-target);
padding: var(--ui-space-2) var(--ui-space-3);
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: var(--ui-space-2);
border-color: var(--ui-color-line);
border-radius: var(--ui-radius-md);
color: var(--ui-color-muted);
background: var(--ui-color-bg-page);
text-align: left;
transition:
    border-color var(--ui-motion-fast) var(--ui-ease-standard),
    background var(--ui-motion-fast) var(--ui-ease-standard);
}
.v17-business-workspace .business-identity-tabs button:hover {
border-color: var(--ui-color-brand);
background: var(--ui-color-brand-soft);
}
.v17-business-workspace .business-identity-tabs button.active {
border-color: var(--ui-color-brand);
color: var(--ui-color-heading);
background: var(--ui-color-brand-soft);
box-shadow: inset 3px 0 0 var(--ui-color-brand);
}
.business-identity-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: var(--ui-radius-sm);
color: var(--ui-color-brand-strong);
background: var(--ui-color-surface);
}
.business-identity-icon .ui-icon {
width: 20px;
height: 20px;
}
.business-identity-copy {
min-width: 0;
display: grid;
gap: 2px;
}
.business-identity-copy strong,
.business-identity-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.business-identity-copy strong {
color: var(--ui-color-heading);
font-size: var(--ui-font-size-xs);
}
.business-identity-copy small {
color: var(--ui-color-muted);
font-size: 10px;
}
.business-section-nav {
padding-top: var(--ui-space-3);
display: grid;
gap: var(--ui-space-1);
border-top: 1px solid var(--ui-color-line);
}
.business-section-nav button {
min-height: var(--ui-touch-target);
padding: 0 var(--ui-space-3);
display: flex;
align-items: center;
gap: var(--ui-space-2);
border: 0;
border-radius: var(--ui-radius-sm);
color: var(--ui-color-muted);
background: transparent;
cursor: pointer;
text-align: left;
}
.business-section-nav button:hover,
.business-section-nav button.active {
color: var(--ui-color-brand-strong);
background: var(--ui-color-brand-soft);
}
.business-section-nav button span {
width: 22px;
height: 22px;
display: grid;
place-items: center;
}
.business-section-nav .ui-icon {
width: 18px;
height: 18px;
}
.business-section-nav b {
font-size: var(--ui-font-size-xs);
}
.business-rail-note {
margin: 0;
color: var(--ui-color-muted);
font-size: 10px;
line-height: var(--ui-line-height-body);
}
.business-workspace-stage,
.v17-business-workspace #business-dashboard {
min-width: 0;
}
.v17-business-workspace #business-dashboard {
gap: var(--ui-space-4);
}
.v17-business-workspace .business-hero-card {
padding: var(--ui-space-5);
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
color: var(--ui-color-heading);
background: linear-gradient(135deg, var(--ui-color-brand-soft), var(--ui-color-surface) 72%);
box-shadow: var(--ui-shadow-sm);
}
.business-role-context {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--ui-space-2);
}
.v17-business-workspace .business-hero-card .business-role-context > span {
color: var(--ui-color-brand-strong);
}
.business-role-context b,
.business-role-context small {
padding: var(--ui-space-1) var(--ui-space-2);
border-radius: var(--ui-radius-pill);
font-size: 10px;
}
.business-role-context b {
color: var(--ui-color-success);
background: color-mix(in srgb, var(--ui-color-success) 12%, transparent);
}
.business-role-context small {
color: var(--ui-color-muted);
background: var(--ui-color-bg-subtle);
}
.v17-business-workspace .business-hero-card h3 {
font-size: var(--ui-font-size-xl);
}
.v17-business-workspace .business-hero-card p {
color: var(--ui-color-muted);
font-size: var(--ui-font-size-xs);
}
.v17-business-workspace .business-hero-actions button {
min-height: var(--ui-control-height-md);
border-radius: var(--ui-radius-sm);
font-size: var(--ui-font-size-xs);
}
.business-overview {
scroll-margin-top: var(--ui-space-4);
}
.v17-business-workspace .business-metric-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--ui-space-3);
}
.v17-business-workspace .business-metric-grid article {
padding: var(--ui-space-4);
border-color: var(--ui-color-line);
border-radius: var(--ui-radius-md);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.v17-business-workspace .business-metric-grid span,
.v17-business-workspace .business-metric-grid small {
color: var(--ui-color-muted);
font-size: 10px;
}
.v17-business-workspace .business-metric-grid strong {
color: var(--ui-color-heading);
font-size: var(--ui-font-size-lg);
}
.v17-business-workspace .business-board-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-4);
}
.v17-business-workspace .business-board {
padding: var(--ui-space-4);
scroll-margin-top: var(--ui-space-4);
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-md);
background: var(--ui-color-surface);
box-shadow: var(--ui-shadow-sm);
}
.v17-business-workspace .business-asset-card,
.v17-business-workspace .business-order-card,
.v17-business-workspace .business-record-empty {
min-height: var(--ui-touch-target);
border-color: var(--ui-color-line);
border-radius: var(--ui-radius-sm);
background: var(--ui-color-bg-page);
}
.v17-business-workspace .business-asset-card button {
min-height: var(--ui-control-height-sm);
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-sm);
color: var(--ui-color-brand-strong);
background: var(--ui-color-surface);
}
.business-reputation-board {
grid-column: 1 / -1;
}
.business-reputation-content {
min-height: 92px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--ui-space-4);
border-radius: var(--ui-radius-sm);
color: var(--ui-color-muted);
background: var(--ui-color-bg-page);
}
.business-reputation-copy {
padding: var(--ui-space-4);
display: grid;
gap: var(--ui-space-1);
}
.business-reputation-copy strong {
color: var(--ui-color-heading);
font-size: var(--ui-font-size-lg);
}
.business-reputation-copy small {
font-size: var(--ui-font-size-xs);
line-height: var(--ui-line-height-body);
}
.business-reputation-stars {
padding: var(--ui-space-4);
color: var(--ui-color-warning);
font-size: var(--ui-font-size-xl);
font-weight: var(--ui-font-weight-bold);
}
.v17-business-workspace .business-guidance {
padding: var(--ui-space-4);
scroll-margin-top: var(--ui-space-4);
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-md);
background: var(--ui-color-bg-subtle);
}
.v17-business-workspace .business-empty {
border-color: var(--ui-color-line-strong);
border-radius: var(--ui-radius-lg);
background: var(--ui-color-surface);
}
.business-section-nav button:focus-visible,
.v17-business-workspace button:focus-visible {
outline: 3px solid color-mix(in srgb, var(--ui-color-focus) 34%, transparent);
outline-offset: 2px;
}
@media (max-width: 1180px) {
.v17-business-workspace .business-workspace {
grid-template-columns: 220px minmax(0, 1fr);
}
.v17-business-workspace .business-metric-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.v17-business-workspace .business-workspace {
grid-template-columns: minmax(0, 1fr);
}
.business-identity-rail {
position: static;
padding: var(--ui-space-3);
}
.v17-business-workspace .business-identity-tabs,
  .business-section-nav {
display: flex;
overflow-x: auto;
scrollbar-width: none;
}
.v17-business-workspace .business-identity-tabs button {
width: auto;
min-width: 180px;
flex: 0 0 auto;
}
.business-section-nav {
padding-top: var(--ui-space-2);
}
.business-section-nav button {
flex: 0 0 auto;
}
.business-rail-note {
display: none;
}
}
@media (max-width: 640px) {
.v17-business-workspace .business-metric-grid,
  .v17-business-workspace .business-board-grid {
grid-template-columns: minmax(0, 1fr);
}
.business-reputation-board {
grid-column: auto;
}
.v17-business-workspace .business-hero-card,
  .v17-business-workspace .business-guidance {
align-items: stretch;
}
.business-role-context {
align-items: flex-start;
}
.business-reputation-content {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.business-reputation-stars {
padding-top: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.v17-business-workspace .business-identity-tabs button {
transition: none;
}
}

/* source: apps/portal-web/public/v17-consumer-icons.css */
.v17-icon-target {
display: inline-grid;
place-items: center;
flex: none;
}
.brand-mark .ui-icon {
width: 31px;
height: 31px;
}
.location-picker > .v17-icon-target .ui-icon {
width: 19px;
height: 19px;
}
.header-search .search-button .ui-icon {
width: 18px;
height: 18px;
}
.header-action.icon-action .ui-icon {
width: 19px;
height: 19px;
}
.service-icon .ui-icon {
width: 26px;
height: 26px;
}
.modal-mark .ui-icon {
width: 33px;
height: 33px;
}

/* source: apps/ui-system/public/v19-auth.css */
.auth-page {
min-height: 100dvh;
padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
display: grid;
place-items: center;
overflow-x: hidden;
background:
    radial-gradient(circle at 12% 12%, rgba(221, 238, 226, 0.92), transparent 34%),
    radial-gradient(circle at 88% 84%, rgba(249, 228, 190, 0.65), transparent 29%), #f7f5ee;
}
.auth-shell {
position: relative;
width: min(960px, 100%);
min-height: min(680px, calc(100dvh - 48px));
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(390px, 1.1fr);
overflow: hidden;
border: 1px solid rgba(29, 83, 58, 0.14);
border-radius: 30px;
background: #fff;
box-shadow: 0 30px 90px rgba(27, 62, 47, 0.16);
}
.auth-page .auth-shell.login-card {
width: min(960px, 100%);
padding: 0;
border-radius: 30px;
}
.auth-story {
position: relative;
min-width: 0;
padding: clamp(38px, 5vw, 66px);
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
background:
    radial-gradient(circle at 82% 18%, rgba(247, 207, 132, 0.34), transparent 24%),
    linear-gradient(155deg, #1b6748 0%, #12432f 58%, #0d3324 100%);
}
.auth-story::after {
content: '';
position: absolute;
right: -58px;
bottom: -72px;
width: 240px;
height: 240px;
border: 42px solid rgba(255, 255, 255, 0.055);
border-radius: 50%;
}
.auth-brand {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 12px;
color: inherit;
text-decoration: none;
}
.auth-brand__mark {
width: 48px;
height: 48px;
display: grid;
place-items: center;
flex: 0 0 auto;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
color: #174d37;
background: #f4d7a2;
font-size: 22px;
font-weight: 900;
}
.auth-brand__mark :is(svg, .ui-icon) {
width: 27px;
height: 27px;
}
.auth-brand strong {
display: block;
color: inherit;
font-size: 18px;
}
.auth-brand small {
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, 0.68);
font-size: 11px;
}
.auth-story__content {
position: relative;
z-index: 1;
margin: clamp(46px, 10vh, 94px) 0;
}
.auth-kicker {
margin: 0 0 13px;
color: #f4d7a2;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.auth-story h1 {
max-width: 9em;
margin: 0;
color: #fff;
font-family: 'Songti SC', 'STSong', serif;
font-size: clamp(34px, 4.2vw, 52px);
line-height: 1.16;
letter-spacing: -0.045em;
}
.auth-story__copy {
max-width: 31em;
margin: 18px 0 0;
color: rgba(255, 255, 255, 0.72);
font-size: 13px;
line-height: 1.8;
}
.auth-benefits {
position: relative;
z-index: 1;
margin: 0;
padding: 0;
display: grid;
gap: 11px;
list-style: none;
}
.auth-benefits li {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.82);
font-size: 12px;
font-weight: 650;
}
.auth-benefits li::before {
content: '✓';
width: 22px;
height: 22px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 50%;
color: #174d37;
background: #f4d7a2;
font-size: 12px;
font-weight: 900;
}
.auth-form-panel {
position: relative;
min-width: 0;
padding: clamp(38px, 5vw, 70px);
display: flex;
flex-direction: column;
justify-content: center;
background: #fff;
}
.auth-form-panel .modal-close {
top: 20px;
right: 22px;
width: 44px;
height: 44px;
padding: 0;
display: grid;
place-items: center;
border-radius: 50%;
font-size: 26px;
}
.auth-form-panel .modal-close:hover {
color: #153e2d;
background: #eef5f0;
}
.auth-mode {
width: fit-content;
margin: 0 0 20px;
padding: 7px 12px;
border: 1px solid #d8e6dc;
border-radius: 999px;
color: #1b6748;
background: #f0f7f2;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.04em;
}
.auth-form-panel h2,
.auth-form-panel h1 {
margin: 0;
color: #173d31;
font-family: 'Songti SC', 'STSong', serif;
font-size: clamp(29px, 3vw, 38px);
line-height: 1.22;
letter-spacing: -0.035em;
}
.auth-form-panel > p,
.auth-form-intro {
margin: 12px 0 0;
color: #708077;
font-size: 13px;
line-height: 1.75;
}
.auth-form-panel form {
width: 100%;
margin-top: 28px;
display: grid;
gap: 17px;
}
.auth-form-panel form label {
display: grid;
gap: 8px;
color: #334d40;
font-size: 12px;
font-weight: 800;
}
.auth-form-panel form input {
width: 100%;
min-width: 0;
min-height: 50px;
padding: 0 15px;
border: 1px solid #ccd9d1;
border-radius: 12px;
outline: 0;
color: #17231d;
background: #fff;
font-size: 16px;
}
.auth-form-panel form input:focus-visible {
border-color: #1b6748;
box-shadow: 0 0 0 4px rgba(27, 103, 72, 0.11);
}
.auth-form-panel :is(.code-row, .code-grid) {
margin-top: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 126px;
align-items: end;
gap: 10px;
}
.auth-form-panel :is(.code-row, .code-grid) > button {
width: 100%;
min-height: 50px;
height: 50px;
padding: 0 12px;
border: 1px solid #c5d8cc;
border-radius: 12px;
color: #17563d;
background: #edf6f0;
cursor: pointer;
font-size: 12px;
font-weight: 800;
}
.auth-form-panel :is(.code-row, .code-grid) > button:hover:not(:disabled) {
border-color: #1b6748;
background: #e3f1e8;
}
.auth-form-panel :is(.submit-login, .primary, .primary-button) {
width: 100%;
min-height: 50px;
padding: 12px 18px;
border: 0;
border-radius: 12px;
color: #fff;
background: #176b45;
box-shadow: 0 10px 24px rgba(23, 107, 69, 0.18);
cursor: pointer;
font-size: 14px;
font-weight: 850;
}
.auth-form-panel :is(.submit-login, .primary, .primary-button):hover:not(:disabled) {
background: #0f5737;
}
.auth-form-panel button:disabled,
.auth-form-panel input:disabled {
cursor: not-allowed;
opacity: 0.56;
}
.auth-form-panel :is(.form-help, .form-message) {
min-height: 20px;
margin: -2px 0 0;
color: #718078;
font-size: 11px;
line-height: 1.6;
}
.auth-form-panel :is(.form-help, .form-message).error {
color: #aa4136;
}
.auth-terms {
margin: 18px 0 0;
color: #829087;
font-size: 11px;
line-height: 1.65;
text-align: center;
}
.auth-terms a,
.auth-links a {
color: #176b45;
font-weight: 750;
text-decoration: none;
}
.auth-terms a:hover,
.auth-links a:hover {
text-decoration: underline;
}
.auth-links,
.login-links.auth-links {
margin-top: 22px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px 22px;
color: #176b45;
font-size: 12px;
font-weight: 750;
}
.modal-backdrop:has(.auth-shell) {
padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
overflow: auto;
}
.modal-backdrop[hidden]:has(.auth-shell) {
display: none !important;
}
.modal-backdrop .auth-shell {
min-height: min(650px, calc(100dvh - 32px));
}
@media (max-width: 767px) {
.auth-page {
padding: 0;
place-items: stretch;
background: #fff;
}
.auth-shell,
  .modal-backdrop .auth-shell {
width: 100%;
min-height: 100dvh;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
border: 0;
border-radius: 0;
box-shadow: none;
}
.auth-page .auth-shell.login-card {
width: 100%;
padding: 0;
border: 0;
border-radius: 0;
}
.auth-story {
min-height: 188px;
padding: max(24px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 26px
      max(22px, env(safe-area-inset-left));
}
.auth-brand__mark {
width: 42px;
height: 42px;
border-radius: 13px;
}
.auth-story__content {
margin: 34px 0 0;
}
.auth-story h1 {
max-width: none;
font-size: clamp(28px, 8.4vw, 38px);
}
.auth-story__copy {
margin-top: 10px;
font-size: 12px;
line-height: 1.65;
}
.auth-benefits {
display: none;
}
.auth-form-panel {
padding: 30px max(22px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom))
      max(22px, env(safe-area-inset-left));
justify-content: flex-start;
}
.auth-form-panel .modal-close {
position: fixed;
top: max(15px, env(safe-area-inset-top));
right: max(15px, env(safe-area-inset-right));
z-index: 2;
color: #fff;
background: rgba(8, 39, 27, 0.36);
}
.auth-mode {
margin-bottom: 15px;
}
.auth-form-panel form {
margin-top: 24px;
}
.modal-backdrop:has(.auth-shell) {
padding: 0;
display: block;
background: #fff;
}
}
@media (max-width: 374px) {
.auth-story {
min-height: 214px;
padding-inline: 18px;
}
.auth-brand small,
  .auth-story__copy {
display: none;
}
.auth-story__content {
margin-top: 24px;
}
.auth-form-panel {
padding: 24px 18px max(24px, env(safe-area-inset-bottom));
}
.auth-form-panel :is(.code-row, .code-grid) {
grid-template-columns: 1fr;
}
}
@media (max-height: 500px) and (orientation: landscape) {
.auth-page,
  .modal-backdrop:has(.auth-shell) {
display: block;
overflow: auto;
}
.auth-shell,
  .modal-backdrop .auth-shell {
min-height: 100dvh;
grid-template-columns: minmax(230px, 0.7fr) minmax(390px, 1.3fr);
grid-template-rows: auto;
}
.auth-story {
min-height: 100dvh;
}
.auth-story__content {
margin: 34px 0;
}
.auth-benefits {
display: none;
}
.auth-form-panel {
min-height: 100dvh;
padding-block: 28px;
}
}
@media (prefers-reduced-motion: reduce) {
.auth-shell *,
  .auth-shell *::before,
  .auth-shell *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
.auth-shell,
.auth-page .auth-shell.login-card,
.modal-backdrop .auth-shell {
width: min(clamp(820px, 72vw, 980px), calc(100vw - 32px));
height: min(620px, calc(100dvh - 32px));
min-height: 0;
max-height: calc(100dvh - 32px);
padding: 0;
grid-template-columns: minmax(280px, 0.4fr) minmax(430px, 0.6fr);
}
.auth-story {
min-height: 0;
padding: clamp(28px, 3.2vw, 42px);
}
.auth-story__content {
margin: clamp(24px, 5vh, 46px) 0;
}
.auth-story h1 {
max-width: 12em;
font-size: clamp(30px, 3vw, 40px);
line-height: 1.18;
}
.auth-story__copy {
margin-top: 12px;
line-height: 1.6;
}
.auth-story__trust {
position: relative;
z-index: 1;
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: 11px;
line-height: 1.6;
}
.auth-benefits {
gap: 8px;
}
.auth-form-panel {
min-height: 0;
padding: 28px clamp(34px, 4vw, 52px);
overflow: hidden;
}
.auth-form-panel .modal-close {
top: 12px;
right: 14px;
}
.auth-mode {
margin-bottom: 10px;
padding: 5px 10px;
}
.auth-form-panel h2,
.auth-form-panel h1 {
font-size: clamp(26px, 2.5vw, 32px);
}
.auth-form-panel > p,
.auth-form-intro {
margin-top: 6px;
line-height: 1.55;
}
.auth-form-panel form {
margin-top: 14px;
gap: 10px;
}
.auth-form-panel form label {
gap: 5px;
}
.auth-form-panel form input,
.auth-form-panel :is(.code-row, .code-grid) > button,
.auth-form-panel :is(.submit-login, .primary, .primary-button) {
min-height: 48px;
height: 48px;
}
.auth-form-panel :is(.form-help, .form-message) {
min-height: 16px;
line-height: 1.4;
}
.auth-links,
.login-links.auth-links {
margin-top: 12px;
}
.auth-caps-lock {
min-height: 16px;
margin: -2px 0 0;
color: #9a5a14;
font-size: 11px;
font-weight: 750;
}
.modal-backdrop:has(.auth-shell) {
height: var(--auth-viewport-height, var(--v18-viewport-height, 100dvh));
max-height: var(--auth-viewport-height, var(--v18-viewport-height, 100dvh));
overflow: hidden;
}
@media (max-width: 767px) {
.auth-page,
  .modal-backdrop:has(.auth-shell) {
height: var(--auth-viewport-height, var(--v18-viewport-height, 100dvh));
min-height: 0;
max-height: var(--auth-viewport-height, var(--v18-viewport-height, 100dvh));
overflow: hidden;
}
.login-screen.auth-page,
  .auth-page {
padding: 0;
}
.auth-shell,
  .auth-page .auth-shell.login-card,
  .modal-backdrop .auth-shell {
width: 100%;
height: var(--auth-viewport-height, var(--v18-viewport-height, 100dvh));
min-height: 0;
max-height: var(--auth-viewport-height, var(--v18-viewport-height, 100dvh));
grid-template-columns: 1fr;
grid-template-rows: 68px minmax(0, 1fr);
}
.auth-story {
min-height: 0;
padding: max(10px, env(safe-area-inset-top)) max(58px, env(safe-area-inset-right)) 10px
      max(16px, env(safe-area-inset-left));
justify-content: center;
}
.auth-brand {
gap: 9px;
}
.auth-brand__mark {
width: 38px;
height: 38px;
}
.auth-brand strong {
font-size: 16px;
}
.auth-story__content,
  .auth-story__trust,
  .auth-benefits {
display: none;
}
.auth-form-panel {
min-height: 0;
padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
justify-content: flex-start;
overflow: hidden;
}
.auth-form-panel .modal-close {
position: fixed;
top: max(10px, env(safe-area-inset-top));
right: max(10px, env(safe-area-inset-right));
}
.auth-mode {
margin-bottom: 5px;
padding: 4px 9px;
}
.auth-form-panel h2,
  .auth-form-panel h1 {
font-size: 24px;
line-height: 1.18;
}
.auth-form-panel > p,
  .auth-form-intro {
margin-top: 3px;
font-size: 11px;
line-height: 1.35;
}
.auth-form-panel form {
margin-top: 8px;
gap: 7px;
}
.auth-form-panel form label {
gap: 3px;
}
.auth-form-panel form input,
  .auth-form-panel :is(.code-row, .code-grid) > button,
  .auth-form-panel :is(.submit-login, .primary, .primary-button) {
min-height: 44px;
height: 44px;
}
.auth-form-panel :is(.code-row, .code-grid) {
grid-template-columns: minmax(0, 1fr) minmax(102px, 0.44fr);
gap: 7px;
}
.auth-links,
  .login-links.auth-links {
margin-top: 7px;
gap: 6px 16px;
}
}
@media (max-width: 767px) and (max-height: 650px) {
.auth-shell,
  .auth-page .auth-shell.login-card,
  .modal-backdrop .auth-shell {
grid-template-rows: 56px minmax(0, 1fr);
}
.auth-brand small,
  #login-description,
  #oauth-login-help {
display: none;
}
.auth-form-panel {
padding-top: 7px;
}
}
.modal-backdrop.auth-keyboard-open .auth-shell,
body[data-v18-keyboard='open'] .modal-backdrop:has(.auth-shell) .auth-shell {
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr);
}
.modal-backdrop.auth-keyboard-open
  :is(
    .auth-story,
    .auth-mode,
    .auth-form-panel > h2,
    #login-description,
    .auth-provider-section,
    .auth-terms
  ),
body[data-v18-keyboard='open']
  .modal-backdrop:has(.auth-shell)
  :is(
    .auth-story,
    .auth-mode,
    .auth-form-panel > h2,
    #login-description,
    .auth-provider-section,
    .auth-terms
  ) {
display: none;
}
.modal-backdrop.auth-keyboard-open .auth-form-panel,
body[data-v18-keyboard='open'] .modal-backdrop:has(.auth-shell) .auth-form-panel {
min-height: 0;
padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
justify-content: center;
}
.modal-backdrop.auth-keyboard-open .auth-method-tabs,
.modal-backdrop.auth-keyboard-open .auth-form-panel form,
body[data-v18-keyboard='open'] .modal-backdrop:has(.auth-shell) .auth-method-tabs,
body[data-v18-keyboard='open'] .modal-backdrop:has(.auth-shell) .auth-form-panel form {
margin-top: 6px;
}
@media (max-height: 500px) and (orientation: landscape) {
.auth-page,
  .modal-backdrop:has(.auth-shell) {
display: grid;
place-items: center;
overflow: hidden;
}
.auth-shell,
  .auth-page .auth-shell.login-card,
  .modal-backdrop .auth-shell {
width: min(860px, 100%);
height: 100dvh;
min-height: 0;
grid-template-columns: minmax(210px, 0.34fr) minmax(390px, 0.66fr);
}
.auth-story,
  .auth-form-panel {
min-height: 0;
}
.auth-story__content,
  .auth-benefits {
display: none;
}
}

/* source: apps/ui-system/public/v20-account.css */
.auth-method-tabs {
flex: 0 0 auto;
margin-top: 12px;
padding: 4px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
border-radius: 14px;
background: #f1f3ef;
}
.auth-method-tabs button {
min-height: 44px;
border: 0;
border-radius: 11px;
color: #68766f;
background: transparent;
font-weight: 800;
}
.auth-method-tabs button.active {
color: #174d37;
background: #fff;
box-shadow: 0 3px 12px rgba(22, 70, 49, 0.1);
}
.auth-form-panel form[hidden],
.auth-form-panel label[hidden] {
display: none;
}
.password-input-wrap {
position: relative;
display: grid;
}
.password-input-wrap input {
padding-right: 70px;
}
.password-input-wrap button {
position: absolute;
top: 5px;
right: 5px;
min-width: 58px;
min-height: 40px;
padding: 0 10px;
border: 0;
border-radius: 9px;
color: #1b6748;
background: #eef5f0;
font-size: 12px;
font-weight: 800;
}
.auth-text-action {
min-height: 44px;
border: 0;
color: #1b6748;
background: transparent;
font-weight: 800;
}
.auth-provider-section {
margin-top: 12px;
display: grid;
gap: 10px;
text-align: center;
}
.auth-provider-section > span {
display: flex;
align-items: center;
gap: 12px;
color: #87918c;
font-size: 11px;
}
.auth-provider-section > span::before,
.auth-provider-section > span::after {
content: '';
height: 1px;
flex: 1;
background: #e4e8e4;
}
.auth-provider-section > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.auth-provider-section button {
min-height: 46px;
border: 1px solid #d9e2dc;
border-radius: 12px;
color: #365246;
background: #fff;
font-weight: 800;
}
.auth-provider-section button:disabled {
cursor: not-allowed;
opacity: 0.58;
}
.auth-provider-section small {
color: #87918c;
font-size: 11px;
line-height: 1.55;
}
@media (min-width: 768px) {
.modal-backdrop .auth-shell:has(.auth-method-tabs) {
height: min(700px, calc(100dvh - 32px));
}
.auth-form-panel:has(.auth-method-tabs) form {
gap: 8px;
}
}
.password-settings-modal {
position: relative;
width: min(520px, calc(100vw - 32px));
max-height: min(720px, calc(100dvh - 32px));
padding: clamp(28px, 5vw, 46px);
overflow: auto;
border: 1px solid rgba(29, 83, 58, 0.14);
border-radius: 24px;
background: #fffefb;
box-shadow: 0 28px 80px rgba(27, 62, 47, 0.18);
}
.password-settings-modal h2 {
margin: 8px 0 0;
color: #173d31;
font-family: 'Songti SC', 'STSong', serif;
font-size: clamp(25px, 4vw, 32px);
}
.password-settings-modal > p {
margin: 12px 0 0;
color: #708077;
line-height: 1.7;
}
.password-settings-modal form {
margin-top: 24px;
display: grid;
gap: 16px;
}
.password-settings-modal label {
display: grid;
gap: 8px;
color: #334d40;
font-size: 13px;
font-weight: 800;
}
.password-settings-modal input {
min-height: 50px;
padding: 0 15px;
border: 1px solid #ccd9d1;
border-radius: 12px;
outline: 0;
font-size: 16px;
}
.password-settings-modal input:focus-visible {
border-color: #1b6748;
box-shadow: 0 0 0 4px rgba(27, 103, 72, 0.11);
}
.publish-draft-status {
margin: 0;
color: #61736a;
font-size: 12px;
line-height: 1.5;
}
@media (max-width: 767px) {
.auth-provider-section > div {
grid-template-columns: 1fr;
}
.password-settings-modal {
align-self: end;
width: 100%;
max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
padding: 28px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
border-radius: 24px 24px 0 0;
}
}
@media (max-width: 374px) {
.auth-form-panel {
padding-top: 58px;
}
.auth-method-tabs button,
  .auth-provider-section button {
font-size: 12px;
}
}
@media (max-width: 767px) {
.modal-backdrop .auth-shell:has(.auth-method-tabs) {
max-height: var(--auth-viewport-height, var(--v18-viewport-height, 100dvh));
padding-bottom: 0;
}
.auth-method-tabs {
margin-top: 8px;
}
.auth-provider-section {
margin-top: 8px;
gap: 6px;
}
.auth-provider-section > div {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.auth-provider-section button {
min-height: 44px;
padding-inline: 6px;
font-size: 12px;
}
.auth-provider-section small {
font-size: 10px;
line-height: 1.3;
}
.auth-terms {
margin-top: 6px;
font-size: 10px;
line-height: 1.35;
}
}
@media (max-width: 374px) {
.auth-form-panel {
padding-top: 7px;
}
}
.modal-backdrop.auth-keyboard-open .auth-method-tabs,
body[data-v18-keyboard='open'] .modal-backdrop:has(.auth-shell) .auth-method-tabs {
margin-inline-end: 56px;
}

/* source: apps/ui-system/public/v18-responsive.css */
:root {
--v18-viewport-height: 100vh;
--v18-keyboard-height: 0px;
--v18-safe-top: env(safe-area-inset-top, 0px);
--v18-safe-right: env(safe-area-inset-right, 0px);
--v18-safe-bottom: env(safe-area-inset-bottom, 0px);
--v18-safe-left: env(safe-area-inset-left, 0px);
--v18-page-gutter: clamp(12px, 2.4vw, 36px);
--v18-content-max: 1600px;
--v18-readable-max: 72ch;
--v18-fluid-title: clamp(1.75rem, 1.12rem + 2.35vw, 3.75rem);
--v18-fluid-heading: clamp(1.25rem, 1.02rem + 1vw, 2rem);
--v18-fluid-body: clamp(0.9375rem, 0.9rem + 0.16vw, 1.0625rem);
--v18-fluid-space: clamp(12px, 1.2vw, 24px);
--v18-touch-target: 44px;
}
@supports (height: 100dvh) {
:root {
--v18-viewport-height: 100dvh;
}
}
html {
min-width: 320px;
overflow-x: hidden;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
@supports (overflow: clip) {
html {
overflow-x: clip;
}
}
body {
min-width: 320px;
min-height: var(--v18-viewport-height);
padding-left: var(--v18-safe-left);
padding-right: var(--v18-safe-right);
font-size: var(--v18-fluid-body);
overflow-wrap: anywhere;
}
body[data-v18-keyboard='open'] {
--v18-safe-bottom: 0px;
}
*,
*::before,
*::after {
min-width: 0;
}
:is(img, picture, video, canvas) {
max-width: 100%;
height: auto;
}
img {
object-fit: cover;
}
:is(button, [role='button'], input, select, textarea, a) {
max-width: 100%;
}
:is(button, [role='button'], input, select, textarea) {
min-height: var(--v18-touch-target);
touch-action: manipulation;
}
:is(input, select, textarea) {
font-size: max(16px, 1em);
}
:is([data-ui-template-root], .workspace-panel, .panel, .ui-card, .catalog-workspace) {
container-type: inline-size;
}
:is(.header-inner, .app-shell, [data-ui-template='admin'] .workspace, .ui-shell__main) {
width: min(100%, var(--v18-content-max));
margin-inline: auto;
}
:is(.hero h1, [data-ui-template='dashboard'] h1) {
font-size: var(--v18-fluid-title);
}
:is(h2, .section-title, .panel-heading h2) {
font-size: var(--v18-fluid-heading);
}
:is(.modal, .dialog, [role='dialog'], .shell-drawer, .family-order-sheet) {
max-width: min(100% - (2 * var(--v18-page-gutter)), 760px);
max-height: calc(
    var(--v18-viewport-height) - var(--v18-safe-top) - var(--v18-safe-bottom) - 24px
  );
overscroll-behavior: contain;
}
:is(.modal, .dialog, [role='dialog'], .shell-drawer, .family-order-sheet)
  :is(.body, .content, .modal-body, .drawer-body) {
min-height: 0;
overflow-y: auto;
}
[data-v18-scroll-region] {
max-width: 100%;
overflow: auto;
overscroll-behavior-inline: contain;
}
table[data-v18-card-table='true'] td[data-label]::before {
content: attr(data-label);
}
body[data-v18-network='slow'] :is(.v17-skeleton, .skeleton) {
animation-duration: 2.4s;
}
body[data-v18-network='slow'] img:not([fetchpriority='high']) {
content-visibility: auto;
}
@media (max-width: 374px) {
:root {
--v18-page-gutter: 12px;
--v18-fluid-space: 12px;
}
.header-inner {
padding-inline: var(--v18-page-gutter) !important;
}
.home-entry-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
:is(.service-grid, .category-grid) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
:is(.header-action, .login-button, .location-picker) {
padding-inline: 10px !important;
}
#header-open-publish {
min-width: 52px;
padding-inline: 8px !important;
font-size: 0;
white-space: nowrap;
}
#header-open-publish::after {
content: '发布';
font-size: 14px;
}
[data-ui-template='admin'] :is(.workspace, .admin-workspace),
  .ui-shell__main {
padding-inline: 12px !important;
}
}
@media (min-width: 375px) and (max-width: 479px) {
:root {
--v18-page-gutter: 14px;
}
.home-entry-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
:is(.service-grid, .category-grid) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (min-width: 480px) and (max-width: 767px) {
:root {
--v18-page-gutter: clamp(16px, 4vw, 24px);
}
.home-entry-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
:is(.service-grid, .category-grid) {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 767px) {
body {
padding-bottom: var(--v18-safe-bottom);
}
.site-header {
padding-top: var(--v18-safe-top);
}
.header-inner {
gap: 10px !important;
}
.header-workspace {
order: 3;
flex-basis: 100%;
width: 100%;
}
.header-actions {
margin-left: auto;
}
.app-shell {
padding-inline: var(--v18-page-gutter) !important;
}
:is(.toolbar, .panel-heading, .header-tools, .form-actions, .empty-actions) {
align-items: stretch;
flex-wrap: wrap;
}
:is(.toolbar, .panel-heading, .form-actions, .empty-actions) > * {
max-width: 100%;
}
[data-ui-template='admin'] :is(.shell > aside, .admin-shell > .sidebar),
  .station-sidebar {
padding-top: max(12px, var(--v18-safe-top)) !important;
}
[data-ui-template='admin'] :is(.workspace > header, .workspace-header),
  .station-header {
position: relative !important;
flex-direction: column;
align-items: stretch !important;
padding-top: max(12px, var(--v18-safe-top)) !important;
}
[data-ui-template='admin'] :is(.header-tools, .header-actions),
  .station-header .header-actions {
width: 100%;
max-width: none !important;
justify-content: flex-start !important;
}
table[data-v18-card-table='true'] {
display: block;
}
table[data-v18-card-table='true'] thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
table[data-v18-card-table='true'] :is(tbody, tr, td) {
display: block;
width: 100%;
}
table[data-v18-card-table='true'] tbody {
display: grid;
gap: 12px;
}
table[data-v18-card-table='true'] tr {
overflow: hidden;
border: 1px solid var(--ui-color-line, rgba(34, 69, 54, 0.12));
border-radius: var(--ui-radius-lg, 18px);
background: var(--ui-color-surface, #fffdf8);
box-shadow: var(--ui-shadow-sm, 0 8px 24px rgba(27, 55, 45, 0.06));
}
table[data-v18-card-table='true'] td {
min-height: 44px;
display: grid;
grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
align-items: center;
gap: 12px;
padding: 10px 12px !important;
text-align: right !important;
}
table[data-v18-card-table='true'] td[data-label]::before {
color: var(--ui-color-muted, #6f7972);
font-size: 0.8125rem;
font-weight: 700;
text-align: left;
}
table[data-v18-card-table='true'] td[colspan] {
display: block;
text-align: center !important;
}
table[data-v18-card-table='true'] td[colspan]::before {
content: none;
}
:is(.shell-drawer, .family-order-sheet, [role='dialog']) {
width: 100%;
max-width: none;
max-height: calc(var(--v18-viewport-height) - var(--v18-safe-top));
margin: 0;
border-radius: 24px 24px 0 0;
padding-bottom: calc(16px + var(--v18-safe-bottom));
}
}
@media (min-width: 768px) and (max-width: 1023px) {
:root {
--v18-page-gutter: clamp(20px, 3vw, 32px);
}
:is(.home-entry-grid, .service-grid, .category-grid) {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
[data-ui-template='admin'] :is(.metric-grid, .business-metric-grid),
  .summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
[data-v18-priority='tertiary'] {
display: none !important;
}
}
@media (min-width: 1024px) and (max-width: 1439px) {
:root {
--v18-page-gutter: clamp(24px, 2.5vw, 36px);
--ui-sidebar-width: clamp(220px, 19vw, 260px);
}
:is(.home-entry-grid, .service-grid, .category-grid) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1440px) {
:root {
--v18-page-gutter: clamp(28px, 2vw, 48px);
--v18-content-max: min(88vw, 1760px);
}
:is(.home-entry-grid, .service-grid, .category-grid) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
:is(.hero-copy, .section-copy, .panel-copy, .empty-copy p) {
max-width: var(--v18-readable-max);
}
}
@media (orientation: landscape) and (max-height: 560px) {
:is(.site-header, [data-ui-template='admin'] .workspace > header, .station-header) {
position: relative !important;
}
:is(.modal, .dialog, [role='dialog'], .shell-drawer, .family-order-sheet) {
max-height: calc(var(--v18-viewport-height) - 8px);
overflow-y: auto;
}
}
@media (horizontal-viewport-segments: 2) {
[data-ui-template-root] {
padding-left: max(var(--v18-page-gutter), env(viewport-segment-right 0 0));
padding-right: max(var(--v18-page-gutter), env(viewport-segment-left 1 0));
}
}
body[data-display-mode='senior'],
body.senior-mode {
--v18-touch-target: 52px;
--v18-fluid-body: clamp(1.0625rem, 1rem + 0.36vw, 1.3125rem);
line-height: 1.75;
}
body[data-display-mode='senior'] :is(p, li, label, input, select, textarea, button),
body.senior-mode :is(p, li, label, input, select, textarea, button) {
line-height: 1.65;
}
@media (prefers-reduced-motion: reduce) {
*,
  *::before,
  *::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-contrast: more) {
:is(button, input, select, textarea, .ui-card, .panel) {
border-width: 2px !important;
}
}
@container (max-width: 520px) {
:is(.two-column, .detail-layout, .form-grid, .business-workspace-grid) {
grid-template-columns: minmax(0, 1fr) !important;
}
:is(.panel-heading, .card-heading) {
align-items: stretch;
flex-direction: column;
}
}

/* source: apps/ui-system/public/v19-stability.css */
:root {
--v19-viewport-width: 100vw;
--v19-viewport-height: 100vh;
--v19-keyboard-height: 0px;
--v19-safe-top: env(safe-area-inset-top, 0px);
--v19-safe-right: env(safe-area-inset-right, 0px);
--v19-safe-bottom: env(safe-area-inset-bottom, 0px);
--v19-safe-left: env(safe-area-inset-left, 0px);
--v19-density-control: 44px;
--v19-density-gap: 12px;
--v19-density-panel: clamp(16px, 2vw, 28px);
--v19-overlay-gutter: clamp(8px, 2vw, 24px);
--v19-z-base: 0;
--v19-z-raised: 10;
--v19-z-sticky: 20;
--v19-z-popover: 30;
--v19-z-fixed: 40;
--v19-z-backdrop: 60;
--v19-z-overlay: 70;
--v19-z-toast: 80;
--v19-z-critical: 90;
--ui-z-sticky: var(--v19-z-sticky);
--ui-z-drawer: var(--v19-z-overlay);
--ui-z-modal: var(--v19-z-overlay);
--ui-z-toast: var(--v19-z-toast);
}
@supports (height: 100dvh) {
:root {
--v19-viewport-height: 100dvh;
}
}
html {
width: 100%;
min-width: 320px;
max-width: 100%;
overflow-x: hidden;
scrollbar-gutter: stable;
}
@supports (overflow: clip) {
html {
overflow-x: clip;
}
}
body {
width: 100%;
min-width: 320px;
max-width: 100%;
min-height: var(--v19-viewport-height);
}
html[data-v19-scroll-lock='true'],
body[data-v19-scroll-lock='true'] {
overflow: hidden !important;
overscroll-behavior: none;
}
body[data-v19-scroll-lock='true'] {
position: fixed;
top: var(--v19-locked-page-y, 0px);
left: var(--v19-locked-page-x, 0px);
right: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
:is(main, section, article, aside, nav, header, footer, form, fieldset, div),
:is(.ui-shell, .app-shell, .workspace-main, .workspace-panel, .panel, .ui-card) {
min-width: 0;
}
:is(img, video, canvas, svg):not(.ui-icon) {
max-width: 100%;
}
:is(pre, code, address, [data-long-text]) {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
:is(.table-wrap, .table-scroll, [data-v18-scroll-region], [data-v19-scroll-region]) {
max-width: 100%;
overflow-x: auto;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
}
.modal-backdrop:has(.auth-shell),
.modal-backdrop .auth-shell {
overflow: hidden !important;
overscroll-behavior: none;
touch-action: pinch-zoom;
}
@supports (overflow: clip) {
.modal-backdrop:has(.auth-shell),
  .modal-backdrop .auth-shell {
overflow: clip !important;
}
}
:is(.site-header, [data-ui-template='admin'] .workspace > header, .station-header) {
z-index: var(--v19-z-sticky);
}
:is(.account-menu, [role='menu'], [data-v19-overlay-kind='popover']) {
z-index: var(--v19-z-popover);
}
:is(.mobile-tabbar, [data-v19-fixed-navigation]) {
z-index: var(--v19-z-fixed);
}
:is(
  .modal-backdrop,
  .shell-drawer-backdrop,
  .admin-modal,
  .ui-modal-backdrop,
  .ui-drawer-backdrop
) {
z-index: var(--v19-z-backdrop);
max-width: var(--v19-viewport-width);
max-height: var(--v19-viewport-height);
padding: max(var(--v19-overlay-gutter), var(--v19-safe-top))
    max(var(--v19-overlay-gutter), var(--v19-safe-right))
    max(var(--v19-overlay-gutter), var(--v19-safe-bottom))
    max(var(--v19-overlay-gutter), var(--v19-safe-left));
overflow: hidden;
overscroll-behavior: contain;
}
:is(.modal-backdrop, .shell-drawer-backdrop, .admin-modal, .ui-modal-backdrop, .ui-drawer-backdrop)
  > :is([role='dialog'], .shell-drawer, .admin-modal-card, .ui-modal, .ui-drawer) {
position: relative;
z-index: var(--v19-z-overlay);
width: min(100%, 820px);
max-width: 100%;
max-height: calc(
    var(--v19-viewport-height) - var(--v19-safe-top) - var(--v19-safe-bottom) -
      (2 * var(--v19-overlay-gutter))
  );
overflow: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
:is(.shell-drawer-backdrop, .ui-drawer-backdrop) {
padding-top: var(--v19-safe-top);
padding-right: var(--v19-safe-right);
padding-bottom: var(--v19-safe-bottom);
padding-left: var(--v19-safe-left);
}
:is(.shell-drawer, .ui-drawer) {
max-height: var(--v19-viewport-height) !important;
}
:is(.toast, [role='status'][data-toast], [data-v19-toast]) {
z-index: var(--v19-z-toast) !important;
max-width: min(calc(100vw - 24px), 560px);
pointer-events: none;
}
body[data-v19-keyboard='open'] :is(.mobile-tabbar, [data-v19-fixed-navigation]) {
visibility: hidden;
pointer-events: none;
}
body[data-v19-keyboard='open']
  :is(
    .modal-backdrop,
    .shell-drawer-backdrop,
    .admin-modal,
    .ui-modal-backdrop,
    .ui-drawer-backdrop
  ) {
align-items: start;
padding-bottom: 8px;
}
body[data-v19-keyboard='open']
  :is(
    .modal-backdrop,
    .shell-drawer-backdrop,
    .admin-modal,
    .ui-modal-backdrop,
    .ui-drawer-backdrop
  )
  > :is([role='dialog'], .shell-drawer, .admin-modal-card, .ui-modal, .ui-drawer) {
max-height: calc(var(--v19-viewport-height) - 8px);
}
body[data-ui-density='compact'] {
--v19-density-control: 36px;
--v19-density-gap: 8px;
--v19-density-panel: 16px;
}
body[data-ui-density='comfortable'] {
--v19-density-control: 48px;
--v19-density-gap: 14px;
--v19-density-panel: clamp(18px, 4vw, 28px);
}
:is(button, [role='button'], input, select, textarea) {
min-height: max(var(--v19-density-control), var(--ui-touch-target, 44px));
}
:is(button, [role='button'], a[href], input, select, textarea):focus-visible {
outline: 3px solid color-mix(in srgb, var(--ui-color-focus, #0f6f45) 34%, transparent);
outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
:is(button, [role='button'], a[href]):not(:disabled) {
transition:
      transform var(--ui-motion-fast, 120ms) var(--ui-ease-standard, ease),
      box-shadow var(--ui-motion-fast, 120ms) var(--ui-ease-standard, ease),
      background-color var(--ui-motion-fast, 120ms) var(--ui-ease-standard, ease);
}
:is(button, [role='button'], a[href]):not(:disabled):hover {
transform: translateY(-1px);
}
}
@media (max-width: 767px) {
:root {
--v19-overlay-gutter: 0px;
}
:is(
    .modal-backdrop,
    .shell-drawer-backdrop,
    .admin-modal,
    .ui-modal-backdrop,
    .ui-drawer-backdrop
  ) {
align-items: end;
place-items: end stretch;
padding-top: max(8px, var(--v19-safe-top));
}
:is(
      .modal-backdrop,
      .shell-drawer-backdrop,
      .admin-modal,
      .ui-modal-backdrop,
      .ui-drawer-backdrop
    )
    > :is([role='dialog'], .shell-drawer, .admin-modal-card, .ui-modal, .ui-drawer) {
width: 100% !important;
max-width: none !important;
max-height: calc(var(--v19-viewport-height) - var(--v19-safe-top) - 8px);
margin: 0;
padding-bottom: max(18px, calc(12px + var(--v19-safe-bottom)));
border-radius: 24px 24px 0 0 !important;
}
:is(.admin-modal-actions, .order-action-buttons, .family-order-actions, .location-actions) {
position: sticky;
z-index: var(--v19-z-raised);
bottom: calc(-1 * max(18px, calc(12px + var(--v19-safe-bottom))));
margin-inline: calc(-1 * var(--v19-density-panel));
padding: 12px var(--v19-density-panel) max(12px, var(--v19-safe-bottom));
flex-wrap: wrap;
background: color-mix(in srgb, var(--ui-color-surface, #fffdf8) 94%, transparent);
backdrop-filter: blur(12px);
}
:is(.admin-modal-actions, .order-action-buttons, .family-order-actions, .location-actions) > * {
min-width: min(136px, 100%);
flex: 1 1 auto;
}
.account-menu {
position: fixed;
right: 8px;
bottom: calc(8px + var(--v19-safe-bottom));
left: 8px;
top: auto;
width: auto;
max-height: calc(var(--v19-viewport-height) - 16px - var(--v19-safe-bottom));
overflow-y: auto;
}
}
@media (orientation: landscape) and (max-height: 560px) {
:is(
    .modal-backdrop,
    .shell-drawer-backdrop,
    .admin-modal,
    .ui-modal-backdrop,
    .ui-drawer-backdrop
  ) {
align-items: stretch;
padding: 4px max(8px, var(--v19-safe-right)) 4px max(8px, var(--v19-safe-left));
}
:is(
      .modal-backdrop,
      .shell-drawer-backdrop,
      .admin-modal,
      .ui-modal-backdrop,
      .ui-drawer-backdrop
    )
    > :is([role='dialog'], .shell-drawer, .admin-modal-card, .ui-modal, .ui-drawer) {
max-height: calc(var(--v19-viewport-height) - 8px);
border-radius: 16px !important;
}
}
@media (prefers-reduced-motion: reduce) {
*,
  *::before,
  *::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

/* source: apps/portal-web/public/v21-stability.css */
.search-context-tools {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 14px 0;
}
.search-context-tools > div,
.message-preferences,
.reputation-explanation {
border: 1px solid var(--line, #dfe7df);
border-radius: 14px;
background: color-mix(in srgb, var(--surface, #fff) 92%, #edf7ef);
padding: 12px 14px;
}
.search-context-tools span,
.message-preferences summary,
.reputation-explanation strong {
color: var(--ink, #173d31);
font-weight: 700;
}
.search-suggestion-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 9px;
}
.search-suggestion-list button {
min-height: 36px;
border-radius: 999px;
padding: 6px 12px;
}
.message-preferences {
margin-bottom: 14px;
}
.message-preferences summary {
cursor: pointer;
}
.message-preferences > div {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin-top: 10px;
}
.message-preferences small {
flex-basis: 100%;
}
.message-card .message-aggregate-count {
display: inline-flex;
margin-left: 6px;
border-radius: 999px;
background: #e3f1e7;
color: #17603e;
padding: 2px 7px;
font-size: 12px;
}
.order-actions .primary-order-action {
background: var(--primary, #147a4d);
color: #fff;
border-color: var(--primary, #147a4d);
}
.reputation-explanation {
margin: 14px 0;
}
.reputation-explanation p {
margin: 6px 0 0;
color: var(--muted, #62736b);
}
.account-recovery-modal {
width: min(720px, calc(100vw - 28px));
max-height: min(820px, calc(100dvh - 28px));
overflow: auto;
position: relative;
border-radius: 24px;
background: #fff;
padding: clamp(22px, 4vw, 34px);
}
.account-recovery-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 20px 0;
}
.account-recovery-grid article {
display: grid;
gap: 5px;
border: 1px solid #dfe7df;
border-radius: 16px;
padding: 14px;
}
.account-recovery-grid span,
.account-recovery-grid small {
color: #6d7c74;
}
.account-recovery-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.account-recovery-actions button {
min-height: 44px;
}
@media (max-width: 767px) {
.search-context-tools,
  .account-recovery-grid {
grid-template-columns: 1fr;
}
.message-preferences > div {
display: grid;
}
.account-recovery-actions {
display: grid;
}
}
@media (max-width: 900px), (max-height: 620px) {
.orders-section.workspace-panel {
overflow-y: auto;
}
.v17-orders-workspace .orders-workspace,
  .v17-orders-workspace .order-board,
  .v17-orders-workspace .order-list {
flex: none;
min-height: auto;
}
.v17-orders-workspace .order-list {
overflow: visible;
scrollbar-gutter: auto;
}
}

/* source: apps/portal-web/public/v23-local-discovery.css */
.catalog-tools .catalog-view-toggle {
display: inline-flex;
align-items: center;
padding: 3px;
border: 1px solid var(--ui-color-line-strong, #cbd9d1);
border-radius: 12px;
background: var(--ui-color-bg-subtle, #f3eee2);
}
.catalog-tools .catalog-view-toggle[hidden] {
display: none;
}
.catalog-view-toggle button {
min-height: 38px;
padding: 7px 13px;
border: 0;
border-radius: 9px;
color: var(--ui-color-muted, #6f7972);
background: transparent;
cursor: pointer;
font-weight: 700;
}
.catalog-view-toggle button.active {
color: #fff;
background: var(--ui-color-brand, #167347);
box-shadow: var(--ui-shadow-sm, 0 6px 18px rgba(55, 66, 48, 0.08));
}
.v17-directory .catalog-list.local-discovery-map {
display: block;
}
.v17-directory .catalog-list.local-discovery-map[hidden] {
display: none;
}
.local-discovery-map-canvas {
position: relative;
min-height: clamp(360px, 48vw, 560px);
overflow: hidden;
border: 1px solid var(--ui-color-line-strong, #cbd9d1);
border-radius: var(--ui-radius-lg, 22px);
background:
    radial-gradient(circle at 78% 24%, rgba(239, 194, 111, 0.24) 0 9%, transparent 10%),
    linear-gradient(32deg, transparent 46%, rgba(214, 111, 67, 0.16) 47% 49%, transparent 50%),
    linear-gradient(148deg, transparent 40%, rgba(22, 115, 71, 0.13) 41% 44%, transparent 45%),
    repeating-linear-gradient(0deg, rgba(22, 115, 71, 0.05) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(90deg, rgba(22, 115, 71, 0.05) 0 1px, transparent 1px 58px), #eef5ea;
}
.local-discovery-map-privacy {
position: absolute;
z-index: 2;
top: 12px;
left: 12px;
max-width: calc(100% - 24px);
margin: 0;
padding: 8px 12px;
border: 1px solid rgba(22, 115, 71, 0.14);
border-radius: 14px;
color: var(--ui-color-brand-strong, #0f5d3a);
background: rgba(255, 253, 248, 0.94);
font-size: 12px;
font-weight: 700;
backdrop-filter: blur(8px);
}
.local-discovery-map-points {
position: absolute;
inset: 116px 34px 34px;
}
.local-discovery-marker {
position: absolute;
z-index: 1;
width: 44px;
height: 44px;
min-height: 44px;
padding: 0;
display: grid;
place-items: center;
border: 1px solid rgba(15, 93, 58, 0.22);
border-radius: 15px;
color: var(--ui-color-heading, #173d31);
background: rgba(255, 253, 248, 0.96);
box-shadow: var(--ui-shadow-md, 0 12px 34px rgba(55, 66, 48, 0.12));
text-align: center;
transform: translate(-50%, -50%);
cursor: pointer;
}
.local-discovery-marker > span {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 11px;
color: #fff;
background: var(--ui-color-brand, #167347);
font-weight: 800;
}
.local-discovery-map-stations {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
gap: 12px;
list-style: none;
margin: 16px 0 0;
padding: 0;
}
.local-discovery-map-stations li {
min-width: 0;
padding: 12px;
border: 1px solid var(--ui-color-line-strong, #cbd9d1);
border-radius: 14px;
background: var(--ui-color-bg-subtle, #f3eee2);
}
.local-discovery-map-stations p {
margin: 0 0 8px;
color: var(--ui-color-muted, #6f7972);
font-size: 13px;
}
.local-discovery-map-stations button {
width: 100%;
min-height: 54px;
margin-top: 6px;
padding: 10px;
display: grid;
gap: 4px;
border: 1px solid var(--ui-color-line-strong, #cbd9d1);
border-radius: 10px;
color: var(--ui-color-heading, #173d31);
background: #fffdf8;
text-align: left;
overflow-wrap: anywhere;
cursor: pointer;
}
.local-discovery-map-stations button span {
color: var(--ui-color-muted, #6f7972);
font-size: 13px;
}
@media (max-width: 560px) {
#services.service-section.workspace-panel {
overflow-y: auto;
}
#services .catalog-workspace {
flex: 0 0 auto;
}
#services .catalog-workspace > * {
flex-shrink: 0;
}
#services .catalog-workspace .catalog-list {
flex: none;
overflow: visible;
}
.catalog-view-toggle {
order: 2;
}
.local-discovery-map-canvas {
min-height: 430px;
}
}
@media (prefers-reduced-motion: reduce) {
.local-discovery-marker {
transition: none;
}
}

/* source: apps/portal-web/public/v27-customer-reminders.css */
.v27-relationship-panel {
min-width: 0;
margin: 16px 0;
padding: 16px;
border: 1px solid #dce5dd;
border-radius: 16px;
background: #fffdf8;
color: #203b30;
overflow-wrap: anywhere;
}
.v27-relationship-panel summary {
cursor: pointer;
font-weight: 700;
padding: 12px 0;
min-height: 44px;
}
.v27-relationship-panel button,
.v27-inventory-dialog button {
min-height: 44px;
max-width: 100%;
padding: 10px 14px;
border: 1px solid #c3d5c8;
border-radius: 12px;
background: #f0f7f1;
color: #174e35;
font: inherit;
cursor: pointer;
white-space: normal;
}
.v27-relationship-panel button:disabled,
.v27-inventory-dialog button:disabled {
opacity: 0.65;
cursor: default;
}
.v27-relationship-panel small {
display: block;
color: #52665a;
line-height: 1.6;
}
.v27-records {
display: grid;
gap: 12px;
min-width: 0;
}
.v27-private-record {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid #dfe7df;
border-radius: 12px;
min-width: 0;
}
.v27-private-record fieldset {
display: grid;
gap: 8px;
min-width: 0;
border: 1px solid #dfe7df;
border-radius: 10px;
padding: 12px;
}
.v27-private-record label {
display: flex;
gap: 10px;
align-items: center;
min-height: 44px;
}
.v27-private-record input[type='checkbox'] {
width: 20px;
height: 20px;
flex: none;
}
.v27-private-record form {
display: grid;
gap: 12px;
}
.v27-inventory-dialog {
box-sizing: border-box;
width: min(520px, calc(100% - 24px));
max-height: calc(100dvh - 24px);
overflow: auto;
overscroll-behavior: contain;
border: 1px solid #c3d5c8;
border-radius: 20px;
padding: 20px;
background: #fffdf8;
color: #203b30;
}
.v27-inventory-dialog::backdrop {
background: #123c2d88;
}
.v27-dialog-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.v27-dialog-heading h2 {
font-size: 22px;
margin: 0;
}
.v27-inventory-dialog form {
display: grid;
gap: 14px;
}
.v27-inventory-dialog label {
display: grid;
gap: 8px;
font-weight: 600;
}
.v27-inventory-dialog input,
.v27-inventory-dialog select {
min-width: 0;
width: 100%;
min-height: 44px;
box-sizing: border-box;
border: 1px solid #c3d5c8;
border-radius: 10px;
padding: 10px;
font: inherit;
background: white;
}
@media (min-width: 900px) {
.v27-records {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v27-records > small,
  .v27-records > p {
grid-column: 1/-1;
}
}

/* source: apps/portal-web/public/v27-communication.css */
.v27-safety-sheet {
width: min(520px, calc(100% - 24px));
max-height: calc(100dvh - 24px);
padding: 24px;
border: 1px solid #d9e3db;
border-radius: 20px;
background: #fffcf7;
color: #173d30;
overflow-y: auto;
box-sizing: border-box;
}
.v27-safety-sheet::backdrop {
background: rgb(14 44 32 / 45%);
}
.conversation-modal button:not(.modal-close),
.v27-safety-sheet button {
padding: 10px 14px;
border: 1px solid #c9dacf;
border-radius: 10px;
color: #1a6348;
background: #f8fbf6;
cursor: pointer;
}
.conversation-modal button:disabled,
.v27-safety-sheet button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
#conversation-send,
.v27-safety-sheet button[type='submit'] {
background: #187447;
color: #fff;
}
.v27-safety-sheet textarea,
.v27-safety-sheet select {
border: 1px solid #c9dacf;
border-radius: 10px;
padding: 10px;
background: #fff;
}
.v27-safety-sheet h2 {
font-size: 22px;
margin: 0 0 16px;
}
.v27-safety-sheet label {
display: grid;
gap: 6px;
margin: 14px 0;
}
.v27-safety-sheet p {
line-height: 1.5;
overflow-wrap: anywhere;
}
.v27-safety-sheet button,
.v27-safety-sheet select,
.v27-safety-sheet textarea {
font: inherit;
min-height: 44px;
max-width: 100%;
}
.v27-safety-sheet textarea {
width: 100%;
box-sizing: border-box;
}
.v27-safety-row {
padding: 12px 0;
border-bottom: 1px solid #e2e8df;
overflow-wrap: anywhere;
}
.v27-conversation-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 0;
}
.v27-conversation-actions button,
.conversation-bubble button {
min-height: 44px;
font-size: 14px;
}
.conversation-bubble .v27-order-card {
display: block;
padding: 12px;
background: #eaf4eb;
color: #173d30;
border-radius: 10px;
text-decoration: none;
}
.v27-conversation-sidebar {
display: none;
}
.conversation-modal {
max-height: calc(100dvh - 32px);
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
}
.conversation-message-list {
flex: 1 1 auto;
min-height: 80px;
overscroll-behavior: contain;
overflow-y: auto;
}
.conversation-form {
flex: 0 0 auto;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.conversation-form textarea {
min-height: 44px;
font-size: 16px;
}
@media (min-width: 900px) {
.conversation-modal {
position: relative;
width: min(1080px, calc(100vw - 48px));
height: min(760px, calc(100dvh - 48px));
padding-left: 270px;
}
.v27-conversation-sidebar {
display: flex;
flex-direction: column;
gap: 8px;
position: absolute;
left: 16px;
top: 24px;
bottom: 24px;
width: 228px;
overflow-y: auto;
border-right: 1px solid #dce5dc;
padding-right: 12px;
}
.v27-conversation-sidebar button {
min-height: 52px;
text-align: left;
padding: 10px;
overflow-wrap: anywhere;
}
}
@media (max-width: 600px) {
.v27-safety-sheet {
margin: auto 0 0;
width: 100%;
max-height: 85dvh;
border-radius: 20px 20px 0 0;
padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
#conversation-modal {
padding: 0;
}
.conversation-modal {
width: 100%;
height: var(--v27-chat-viewport, 100dvh);
max-height: var(--v27-chat-viewport, 100dvh);
border-radius: 0;
padding: 12px;
}
.conversation-modal .detail-heading {
flex: 0 0 auto;
padding: 8px 32px 0 0;
}
.conversation-modal .detail-heading h2 {
font-size: 20px;
margin: 4px 0;
}
.conversation-modal .detail-heading p {
margin: 4px 0;
}
.conversation-modal .detail-badge {
display: none;
}
.conversation-modal .publish-message {
margin: 4px 0;
font-size: 13px;
}
}