:root {
  color-scheme: dark;
  color: #eceef0;
  background: #0b0c0d;
  --surface: #101112;
  --raised: #202225;
  --text: #eceef0;
  --red: #ff2442;
  --blue: #619fff;
  --primary: #246bd8;
  --green: #72d6ad;
  --muted: #a5a9b0;
  --line: #303338;
}
body, .shell, .brand, .gallery .post, .bottom-nav, dialog, .dialog-head,
.merchant-row, .merchant-admin-row, #detail-page, #detail-page .detail-header,
#detail-dock, #detail-content #comment-form, #detail-content .report-form {
  background: var(--surface); color: var(--text); border-color: var(--line);
}
.merchant-card { background: #151719; border-color: #2d3136; }
.merchant-card-open { color: var(--text); }
.merchant-card-open > p { color: var(--muted); }
.merchant-card-actions button:disabled { background: var(--raised); color: #6f747c; }
.brand { min-height: 48px; padding-block: 2px; justify-content: space-between; }
.brand > .icon { width: 44px; height: 44px; margin: 0; color: #eceef0; }
.icon { color: var(--text); }
.pill { background: #1b2c46; color: #b5d2ff; }
.brand strong { display: none; }
/* Keep focus decoration inside fragmented feed cards on mobile WebKit. */
.gallery .post { isolation: isolate; }
.gallery .post:focus { outline: none; }
.gallery .post:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
.primary, #detail-dock .cooperate-button { background: var(--primary); color: #fff; }
.bottom-nav button.active, .tabs button.active, .profile-tabs button.active,
.categories button.active { color: var(--blue); }
.tabs button.active::after, .profile-tabs button.active::after { background: var(--blue); }
.bottom-nav .nav-publish, .bottom-nav .nav-publish.active { background: var(--red); color: #fff; }
.field input, .field textarea, .field select, .review-item textarea,
.editor-form .editor-title input, .editor-form .editor-body textarea {
  background: var(--surface); color: var(--text); border-color: var(--line);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.search, .secondary, .upload-label, .choice, .editor-form .choice, #comment-form,
#detail-dock .comment-entry, #detail-page .detail-kind, .merchant-logo,
.post-cover, .photo, .detail-image, .comment-image,
#detail-content .detail-media, #detail-content .detail-image, .review-image-grid > .review-image {
  background: var(--raised); color: var(--muted); border-color: var(--line);
}
.search input { color: var(--text); }
.choice:has(input:checked), .editor-form .choice:has(input:checked) {
  background: #1b2c46; color: #b5d2ff; border-color: var(--blue);
}
.choice input, .merchant-form .merchant-check input { accent-color: var(--primary); }
.notice, .tag { background: #19342a; color: #a0dec3; }
.danger { background: #3e2028; color: #ff9aaa; }
.error-text { color: #ff9aaa; }
#connection:not(:empty) { background: #342d20; color: #e9cf9e; }
.avatar, .profile > .avatar { background: #283b32; color: #b1dcc3; }
.text-cover, .text-cover.tone-0 { background: #24352f; color: #def1e7; }
.text-cover.tone-1 { background: #292c32; color: #e5e8ef; }
.text-cover.tone-2 { background: #38282f; color: #f0dfe7; }
.cover-kind, .cover-excerpt { opacity: .85; }
.post-meta, .post .description, .footer-note, .section-line strong,
.profile-tools > button, .profile-tools > a, .uid, .menu-row > svg,
.merchant-row > p, .merchant-admin-row > p, .merchant-badge, .merchant-record dt,
.review-item p, .comment-meta strong, .comment-meta time, .notification p,
.notification time, .notification .date, #detail-content .detail-info,
#detail-content .detail-copy details, #detail-content [data-comment-total],
#detail-content .comment-meta strong, #detail-content .comment-meta time,
#detail-content .comment-actions .text-button, #detail-content .comment-actions .icon,
#detail-dock .comment-shortcut { color: var(--muted); }
.merchant-badge.is-verified { color: var(--green); }
.merchant-badge.is-verified.personal { color: #58a5ff; }
.merchant-badge.is-verified.group { color: #e9bd55; }
.application-type.personal, .certification-option.personal, .certification-summary .personal { color: #dcecff; border-color: #187ee8; background: #101a27; }
.application-type.group, .certification-option.group, .certification-summary .group { color: #ffe7a5; border-color: #a98228; background: #1d190f; }
.certification-choice header p, .certification-option small { color: var(--muted); }
.certification-option, .certification-summary button { border: 1px solid; border-radius: 7px; }
.certification-option.personal > span, .certification-option.personal b, .certification-summary .personal span { color: #1688ff; }
.certification-option.group > span, .certification-option.group b, .certification-summary .group span { color: #e9b93f; }
.merchant-hero > span { color: #9dc2ff; background: #1b2c46; }
.merchant-hero p, .merchant-card-meta dt, .merchant-clicks { color: var(--muted); }
.merchant-fee { color: #b5d2ff; background: #1b2c46; }
.merchant-fee strong, .merchant-price strong, .merchant-open { color: var(--blue); }
.comment-verified { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border: 1px solid; border-radius: 3px; font-size: 10px; line-height: 1.6; }
.comment-verified svg { width: 12px; height: 12px; }
.comment-verified.personal { color: #58a5ff; border-color: #1766ad; background: #10263e; }
.comment-verified.group { color: #e9bd55; border-color: #82651e; background: #28200f; }
.comment-contact { color: #58a5ff !important; }
.comment-upgrade { text-align: center; }
.comment-upgrade-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 4px auto 16px; border-radius: 50%; color: #58a5ff; background: #142d4b; }
.comment-upgrade-icon svg { width: 28px; height: 28px; }
.comment-upgrade h3 { margin: 0 0 8px; font-size: 21px; }
.comment-upgrade > p { margin: 0 0 18px; color: var(--muted); line-height: 1.7; }
.comment-upgrade-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.comment-upgrade-options > div { padding: 15px; border: 1px solid; border-radius: 7px; background: #171a1f; }
.comment-upgrade-options .personal { border-color: #1766ad; }
.comment-upgrade-options .group { border-color: #82651e; }
.comment-upgrade-options strong, .comment-upgrade-options b, .comment-upgrade-options small { display: block; }
.comment-upgrade-options b { margin-top: 7px; color: #58a5ff; font-size: 23px; }
.comment-upgrade-options .group b { color: #e9bd55; }
.comment-upgrade-options small { margin-top: 3px; color: var(--muted); }
.supply-payment { text-align: center; }
.supply-payment-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 4px auto 16px; border-radius: 50%; color: #ff8b9b; background: #3b1d24; }
.supply-payment-icon svg { width: 28px; height: 28px; }
.supply-payment .merchant-price { margin-bottom: 12px; }
.supply-payment .merchant-price strong { color: #ff5d72; font-size: 25px; }
.supply-payment h3 { margin: 0 0 8px; font-size: 20px; }
.supply-payment > p:last-of-type { margin: 0; color: var(--muted); line-height: 1.75; }
.merchant-card-meta > div { background: var(--raised); }
.merchant-card-meta dd { color: var(--text); }
#detail-content .detail-copy .detail-body { color: var(--text); }
#detail-content > .comments, #detail-content .detail-info { border-color: var(--line); }
.comment-image-preview > .icon, #post-form .post-image-preview > .icon,
#detail-content .detail-gallery-controls .icon { background: #202225ed; color: var(--text); border-color: var(--line); }
.notification-icon, .message-shortcuts button > svg, .message-shortcuts .shortcut-icon { background: #39252b; color: #ff9aaa; }
.notification:nth-child(3n + 2) .notification-icon, .message-shortcuts button:nth-child(2) > :first-child { background: #203047; color: #9dc2ff; }
.notification:nth-child(3n) .notification-icon, .message-shortcuts button:nth-child(3) > :first-child { background: #203a30; color: #8bddb5; }
#unread, .unread-dot, .notification.unread .notification-icon::after { border-color: var(--surface); }
#detail-dock button:disabled { background: var(--raised); color: var(--muted); }
body[data-page="publish"] #main #post-form > .editor-submit { box-shadow: 0 0 0 12px var(--surface); }
dialog::backdrop { background: #0009; }

#overlay[data-onboarding] { background: #080808; color: #fff; width: calc(100% - 24px); max-width: 420px; max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; }
#overlay[data-onboarding] .dialog-head { background: #080808; }
#overlay[data-onboarding="intro"] .dialog-head { border-bottom: 0; }
#overlay[data-onboarding="intro"] #dialog-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#overlay[data-onboarding="intro"] .dialog-head > button { margin-left: auto; }
#overlay[data-onboarding] #dialog-body { padding: 8px 24px 24px; overflow-wrap: anywhere; }
.onboarding-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.onboarding-brand strong { font-size: 22px; letter-spacing: 0; }
.onboarding-mark { position: relative; display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; background: #000; color: #fff; font-size: 24px; font-weight: 800; }
.onboarding-mark img { position: absolute; inset: 0; width: 48px; height: 48px; object-fit: contain; background: #000; }
.onboarding-mark img[hidden] { display: none; }
.onboarding-heading { font-size: 23px; margin: 0 0 28px; letter-spacing: 0; }
.onboarding-role { display: flex; gap: 14px; align-items: center; margin: 22px 0; }
.onboarding-role > svg { flex: 0 0 24px; color: var(--blue); }
.onboarding-role strong { font-size: 17px; }
.onboarding-role p, .cooperation-role p { color: #bbb; margin: 6px 0 0; font-size: 14px; }
.onboarding-note { color: #aaa; font-size: 12px; line-height: 1.7; margin: 26px 0 18px; }
#overlay[data-onboarding] .onboarding-cta { width: 100%; white-space: normal; min-height: 46px; height: auto; padding: 12px; }
#overlay[data-onboarding] .primary { background: var(--blue); color: #fff; border-color: var(--blue); white-space: normal; }
.cooperation-role { padding: 16px 0; border-bottom: 1px solid #333; }
.cooperation-role h3 { margin: 0; font-size: 18px; }
.cooperation-role .primary, .cooperation-role .secondary { margin-top: 16px; }
#overlay[data-onboarding="intro"] { max-width: 480px; background: #000; }
#overlay[data-onboarding="intro"] .dialog-head { height: 0; padding: 0; background: transparent; overflow: visible; z-index: 3; }
#overlay[data-onboarding="intro"] .dialog-head > button { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; background: #080808cc; color: #fff; }
#overlay[data-onboarding="intro"] #dialog-body { padding: 0; }
.onboarding-poster { position: relative; padding-bottom: 20px; }
.onboarding-poster.poster-ready { aspect-ratio: 2 / 3; padding: 0; }
.onboarding-poster > img { display: block; width: 100%; height: auto; }
.onboarding-poster > img[hidden], .onboarding-fallback[hidden] { display: none; }
.onboarding-fallback { padding: 48px 24px 8px; }
#overlay[data-onboarding="intro"] .onboarding-cta { display: block; width: 81%; margin: 0 auto; font-size: 16px; font-weight: 700; background: #0068ef; border: 1px solid #36baff; border-radius: 6px; }
#overlay[data-onboarding="intro"] .poster-ready .onboarding-cta { position: absolute; top: 82.4%; left: 9.5%; height: 7.5%; min-height: 44px; padding: 4px 8px; }
@media (max-width: 360px) {
  #overlay[data-onboarding] #dialog-body { padding-inline: 16px; }
  #overlay[data-onboarding="intro"] #dialog-body { padding: 0; }
  #overlay[data-onboarding="intro"] .poster-ready .onboarding-cta { top: 80%; font-size: 14px; }
  .onboarding-brand strong { font-size: 19px; }
  .onboarding-heading { font-size: 21px; }
}
.spinner { border-color: var(--line); border-top-color: var(--blue); }
:focus-visible, .upload-label:focus-within, .merchant-row:focus-visible { outline-color: var(--blue); }
.banner-track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 6px; }
.banner-track::-webkit-scrollbar { display: none; }
.banner-slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 3 / 1; padding: 0; display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; background: var(--raised); }
.banner-image { display: block; width: 100%; aspect-ratio: 3 / 1; height: auto; object-fit: contain; background: var(--raised); }
.banner-slide { position: relative; }
.banner-slide::after { content: '广告'; position: absolute; top: 5px; right: 6px; padding: 1px 4px; background: #101112dd; color: #c3c6cd; border-radius: 3px; font-size: 10px; line-height: 15px; pointer-events: none; }
.banner-dots { display: flex; justify-content: center; height: 24px; }
.banner-dots button { width: 28px; height: 24px; padding: 0; display: grid; place-items: center; }
.banner-dots button::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #777e88; }
.banner-dots button[aria-pressed="true"]::after { background: var(--blue); }
.banner-slot { padding-block: 16px 24px; border-bottom: 1px solid var(--line); }
.banner-slot h3 { font-size: 16px; }
.banner-slot input[type="file"] { max-width: 100%; font-size: 14px; }
.banner-slot [data-banner-preview]:empty { display: none; }
.discovery-header { margin-top: 8px; }
@media (hover: hover) {
  .icon:hover { background: var(--raised); }
  .primary:hover, #detail-dock .cooperate-button:hover { background: #327bea; }
  .bottom-nav .nav-publish:hover { background: #e71d3b; }
  .text-button:hover { color: #a5c9ff; }
}
/* One bottom composer replaces the separate in-page message form. */
#detail-page.has-comment-composer #detail-dock { display: none; }
#detail-page.has-comment-composer #detail-content { padding-bottom: calc(260px + env(safe-area-inset-bottom)); }
#detail-page #detail-content #comment-form {
  position: fixed; z-index: 7; bottom: var(--comment-keyboard-inset, 0px);
  left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px;
  margin: 0; padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: #101112; border-top: 1px solid #343638; border-radius: 0;
  gap: 8px; max-height: 55dvh; overflow-y: auto;
}
#detail-page #detail-content #comment-form textarea {
  min-height: 44px; height: 44px; max-height: 96px; resize: vertical;
  width: 100%; margin: 0; padding: 10px 12px; font-size: 16px; line-height: 22px;
}
#comment-form .comment-compose-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#comment-form .comment-compose-actions > button { flex: 1; min-width: 0; min-height: 44px; padding: 8px; font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
#comment-form .comment-compose-actions > button svg { width: 18px; height: 18px; }
#comment-form .comment-upload { display: contents; }
#comment-form [data-comment-preview]:not(:empty), #comment-form [data-comment-upload-status]:not(:empty) { flex-basis: 100%; }
#comment-form [data-comment-preview]:empty, #comment-form [data-comment-upload-status]:empty, #comment-form [data-send-error]:empty { display: none; }
#comment-form .comment-image-preview, #comment-form .comment-image-preview .comment-image { width: 56px; height: 56px; }
#comment-form .upload-label { flex: 0 0 44px; }
#detail-page[data-post-kind="demand"] [data-action="interest"]:not(:disabled) {
  background: #d91e3c; border-color: #d91e3c; color: #fff;
}
@media (hover: hover) {
  #detail-page[data-post-kind="demand"] [data-action="interest"]:not(:disabled):hover { background: #bd1933; border-color: #bd1933; }
}

/* Home marketplace: match the approved black technology mockup. */
body { background: #050607; }
.shell { background: #08090a; }
.brand {
  height: 78px; min-height: 78px; padding: 10px 14px; gap: 12px;
  border-bottom: 1px solid #202329; background: #08090a;
}
.brand-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-identity img {
  width: 50px; height: 50px; flex: 0 0 50px; object-fit: cover;
  border: 1px solid #aeb3ba; border-radius: 50%; background: #050505;
  box-shadow: inset 0 0 0 2px #24272b;
}
.brand .brand-identity strong {
  display: block; min-width: 0; color: #f4f5f6; font-size: 21px;
  line-height: 1.2; font-weight: 760; white-space: nowrap;
}
.brand-tools {
  display: flex; align-items: center; gap: 2px; margin-left: auto;
  padding: 2px 6px; border: 1px solid #34383e; border-radius: 24px;
  background: #0d0f11;
}
.brand-tools .icon { width: 38px; height: 38px; }
main { padding: 10px 12px 30px; }
#home-banners { margin-bottom: 10px; }
.banner-track { border: 1px solid #252a31; border-radius: 7px; }
.banner-slide, .banner-image { aspect-ratio: 3 / 1; }
.banner-image { object-fit: cover; }
.banner-slide::after { top: 6px; right: 7px; background: #07090bbb; color: #c9ccd1; }
.promo-slide { overflow: hidden; }
.promo-slide::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,#03070de8 0%,#05080db8 46%,transparent 78%);
  pointer-events: none;
}
.banner-copy {
  position: absolute; z-index: 2; left: 7.5%; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start; width: 67%;
  color: #fff; text-align: left; pointer-events: none;
}
.banner-copy strong { font-size: clamp(16px,5vw,27px); line-height: 1.25; font-weight: 780; }
.banner-copy span { margin-top: 5px; color: #d3d6dc; font-size: clamp(9px,2.7vw,14px); white-space: nowrap; }
.banner-copy .primary {
  min-height: 30px; margin-top: 9px; padding: 5px 18px; border-radius: 5px;
  background: #ed2f32; font-size: 12px; font-weight: 700; pointer-events: auto;
}
.banner-dots { height: 20px; }
.banner-dots button { height: 20px; }
.discovery-header {
  min-height: 52px; margin: 0 2px 12px; border: 1px solid #2c3035;
  border-radius: 7px; overflow: hidden; background: #0b0d0f;
}
.discovery-header .tabs { width: 100%; gap: 0; }
.discovery-header .tabs button {
  flex: 1 1 0; min-width: 0; height: 50px; padding: 0 4px;
  font-size: 16px; background: #0b0d0f;
}
.discovery-header .tabs button + button { border-left: 1px solid #17191c; }
.discovery-header .tabs button.active { color: #1688ff; background: #111315; }
.discovery-header .tabs button.active::after { bottom: 0; width: 34px; left: calc(50% - 17px); height: 3px; }
.ranking-note {
  display: flex; align-items: center; gap: 8px; margin: 4px 6px 12px;
  color: #a5a9af; font-size: 12px; line-height: 20px;
}
.ranking-note svg { width: 17px; height: 17px; }
.gallery {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start; gap: 10px; column-count: unset;
}
.gallery .post {
  display: block; width: 100%; margin: 0; overflow: hidden;
  border: 1px solid #30343a; border-radius: 7px; background: #101214;
}
.gallery .post-cover, .gallery .photo {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 0;
  background: #111419; object-fit: cover;
}
.gallery .demo-post .post-cover { position: relative; }
.gallery .demo-post .post-cover::after {
  content: '演示数据'; position: absolute; top: 7px; left: 7px;
  padding: 3px 6px; border: 1px solid #ffffff38; border-radius: 4px;
  background: #080a0cbb; color: #d6d9de; font-size: 9px; line-height: 14px;
}
.gallery .post-cover > .photo { aspect-ratio: 1 / 1; }
.gallery .text-cover { min-height: 0; padding: 14px 12px; justify-content: flex-end; }
.gallery .cover-title { font-size: 17px; }
.gallery .cover-excerpt { -webkit-line-clamp: 2; }
.gallery .post-content {
  min-height: 126px; padding: 10px 10px 11px;
  background: linear-gradient(180deg,#151719,#0f1113);
}
.gallery .post h3 {
  min-height: 44px; color: #f0f1f2; font-size: 15px; line-height: 22px;
  font-weight: 650; -webkit-line-clamp: 2;
}
.post-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.post-author { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 24px; margin-top: 6px; color: #b9bdc3; font-size: 10px; }
.post-author > span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.post-author > span:first-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-author svg { flex: 0 0 13px; width: 13px; height: 13px; }
.rank-badge, .verified-badge, .demo-badge {
  display: inline-flex; align-items: center; gap: 3px; min-height: 24px;
  padding: 3px 7px; border-radius: 4px; font-size: 11px; line-height: 16px;
}
.rank-badge { color: #15100a; background: #e9b93f; }
.verified-badge { color: #eef6ff; background: #1978e7; }
.verified-badge.group-verified { color: #171208; background: #e9b93f; }
.verified-badge.personal-verified { color: #eef6ff; background: #1978e7; }
.demo-badge { color: #b7bbc1; background: #292d32; }
.rank-badge svg, .verified-badge svg { width: 13px; height: 13px; }
.gallery .post-foot {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 7px;
  margin-top: 10px; color: #c3c6cb; font-size: 11px; white-space: nowrap;
}
.gallery .post-foot span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.gallery .post-foot svg { width: 15px; height: 15px; }
.gallery .post-foot > i { width: 1px; height: 18px; flex: 0 0 1px; background: #34383d; }
.home-pricing {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px;
  margin: 18px 2px 2px;
}
.home-pricing button {
  display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center;
  gap: 0 8px; min-width: 0; padding: 11px 12px; border: 1px solid #2e3237;
  border-radius: 7px; background: linear-gradient(135deg,#121518,#0c0e10); text-align: left;
}
.home-pricing svg { grid-row: 1 / 3; width: 23px; height: 23px; color: #1688ff; }
.home-pricing span { color: #bfc2c7; font-size: 11px; }
.home-pricing strong { color: #f1f2f4; font-size: 13px; white-space: nowrap; }
.bottom-nav { height: calc(66px + env(safe-area-inset-bottom)); background: #0b0d0f; border-color: #2b2e33; }
.bottom-nav button { height: 54px; font-size: 11px; }
.bottom-nav .nav-publish { width: 50px; height: 50px; border-radius: 50%; }
.bottom-nav .nav-publish svg { width: 29px; height: 29px; }

@media (max-width: 370px) {
  .brand .brand-identity strong { font-size: 18px; }
  .brand-identity img { width: 44px; height: 44px; flex-basis: 44px; }
  .brand-tools .icon { width: 34px; }
  .banner-copy strong { font-size: 16px; }
  .gallery .post-content { padding-inline: 8px; }
  .gallery .post-foot { gap: 5px; font-size: 10px; }
  .home-pricing button { padding-inline: 8px; }
  .home-pricing strong { font-size: 12px; }
}