html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }
body { overflow-wrap: anywhere; }
body[data-page="merchants"] .shell > .brand { display: none; }
body[data-page="merchants"] main { padding-inline: 16px; }
body[data-page="merchants"] .page-head { flex-wrap: wrap; gap: 8px; }
.merchant-disclaimer { font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.merchant-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.merchant-list { gap: 12px; }
.merchant-hero { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 18px 0 12px; }
.merchant-hero > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; }
.merchant-hero > span svg { width: 26px; height: 26px; }
.merchant-hero h1 { margin: 0; font-size: 21px; }
.merchant-hero p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }
.merchant-hero .secondary { padding-inline: 12px; white-space: nowrap; }
.merchant-fee { margin: 0 0 12px; padding: 10px 12px; border-radius: 6px; font-size: 12px; }
.merchant-fee strong { font-size: 18px; }
.merchant-price { margin: 0 0 10px; font-size: 14px; }
.merchant-price strong { margin-left: 6px; font-size: 22px; }
.merchant-price span { font-size: 12px; }
.merchant-manage { margin: 4px 0 8px; }
.merchant-platform-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.merchant-type-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 8px; }
.merchant-platform-tabs button { min-width: 0; white-space: nowrap; }
.merchant-type-tabs button { min-width: 0; white-space: nowrap; }
.merchant-row, .merchant-admin-row { display: block; width: 100%; min-width: 0; padding: 16px 0; text-align: left; border-bottom: 1px solid var(--line); border-radius: 0; background: #fff; }
.merchant-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 6px; }
.merchant-card-open { display: block; width: 100%; min-width: 0; padding: 0; text-align: left; }
.merchant-card-open > p { margin: 9px 0; font-size: 13px; line-height: 1.6; }
.merchant-card-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.merchant-card-actions > * { min-width: 0; }
.merchant-card-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 12px 0; }
.merchant-card-meta > div { min-width: 0; padding: 8px 10px; border-radius: 5px; }
.merchant-card-meta dt { font-size: 10px; }
.merchant-card-meta dd { margin: 3px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.merchant-clicks, .merchant-open { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.merchant-clicks svg, .merchant-open svg { width: 14px; height: 14px; }
.merchant-contact-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.merchant-contact-actions > * { min-width: 0; }
.merchant-row > p, .merchant-admin-row > p { margin: 8px 0; font-size: 13px; line-height: 1.65; color: #555; white-space: pre-wrap; }
.merchant-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.merchant-logo { display: flex; align-items: center; justify-content: center; flex: 0 0 52px; width: 52px; height: 52px; object-fit: contain; border-radius: 6px; background: #f5f5f5; font-size: 11px; }
.merchant-placeholder { color: #777; }
.merchant-copy { flex: 1; min-width: 0; }
.merchant-copy h3 { margin: 0 0 5px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.merchant-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #777; }
.merchant-badge svg { flex: 0 0 15px; width: 15px; height: 15px; }
.merchant-badge.is-verified { color: #21734b; }
.merchant-detail .detail-body { white-space: pre-wrap; margin-block: 16px; font-size: 14px; line-height: 1.8; }
.merchant-detail > p { white-space: pre-wrap; }
.merchant-record { margin-block: 16px; padding-block: 12px; border-block: 1px solid var(--line); font-size: 12px; line-height: 1.7; }
.merchant-record dt { color: #777; margin-top: 6px; }
.merchant-record dd { margin: 0; white-space: pre-wrap; }
.merchant-form .field, .merchant-form input, .merchant-form textarea { min-width: 0; max-width: 100%; }
.merchant-form textarea { min-height: 100px; }
.merchant-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.7; }
.merchant-form .merchant-check input { flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--red); }
.merchant-form .actions, .merchant-admin-row .actions { flex-wrap: wrap; }
.merchant-row:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.merchant-application, .merchant-application-review, #merchant-application-queue, #managed-merchant-list { min-width: 0; overflow-wrap: anywhere; }
.merchant-application h3, #merchant-application-queue > h3 { font-size: 16px; line-height: 1.5; margin: 12px 0; }
.application-type { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 4px; font-size: 11px; }
.application-type svg { width: 14px; height: 14px; }
.certification-choice header { grid-column: 1 / -1; text-align: center; }
.certification-choice header h3 { margin: 0; font-size: 20px; }
.certification-choice header p { margin: 7px 0 4px; font-size: 12px; }
.certification-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.certification-option { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 4px 8px; min-width: 0; padding: 15px 12px; text-align: left; }
.certification-option > span { grid-row: 1 / 4; align-self: center; }
.certification-option > span svg { width: 30px; height: 30px; }
.certification-option strong { font-size: 15px; line-height: 1.3; }
.certification-option small { font-size: 10px; line-height: 1.45; }
.certification-option b { margin-top: 8px; font-size: 20px; }
.certification-option b i { font-size: 10px; font-style: normal; font-weight: 400; }
.certification-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 2px 0 12px; }
.certification-summary button { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 2px 8px; align-items: center; min-width: 0; padding: 12px; text-align: left; }
.certification-summary span { grid-row: 1 / 3; }
.certification-summary svg { width: 25px; height: 25px; }
.certification-summary b { font-size: 13px; white-space: nowrap; }
.certification-summary small { font-size: 11px; }
.merchant-application-review { padding-block: 16px; border-bottom: 1px solid var(--line); scroll-margin-top: 12px; }
#managed-merchant-list { margin-top: 24px; }
.merchant-application .merchant-record dd { overflow-wrap: anywhere; }
body[data-page="merchants"] .page-head .actions { flex-wrap: wrap; margin: 0; }
.merchant-form > button { max-width: 100%; white-space: normal; }
body[data-page="publish"] .shell > .brand,
body[data-page="messages"] .shell > .brand,
body[data-page="me"] .shell > .brand { display: none; }
body[data-page="publish"] .bottom-nav { display: none; }
body[data-page="publish"] .publish-head { display: flex; align-items: center; gap: 6px; }
body[data-page="publish"] #main #post-form > .editor-submit { position: fixed; z-index: 7; bottom: calc(12px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 772px; box-shadow: 0 0 0 12px #fff; }
.detail-mode .shell > .brand, .detail-mode #main,
.detail-mode .bottom-nav, .detail-mode #connection { display: none; }
.detail-mode .shell { max-width: 720px; padding-bottom: 0; }
#detail-page { min-height: 100dvh; background: #fff; color: #262626; letter-spacing: 0; }
#detail-page .detail-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; min-height: calc(60px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); background: #fff; border-bottom: 1px solid #ededed; }
#detail-page .detail-header > strong { font-size: 15px; }
#detail-page .detail-header > .icon { flex: 0 0 44px; width: 44px; height: 44px; }
#detail-page .detail-share[hidden] { display: none; }
#detail-page .detail-author { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
#detail-page .detail-author .avatar { flex: 0 0 34px; width: 34px; height: 34px; font-size: 13px; }
#detail-page .detail-author > span:not(.avatar), #detail-page .detail-author strong, #detail-page .detail-author > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
#detail-content { padding: 0 0 calc(96px + env(safe-area-inset-bottom)); }
/* Support both the current image and the incoming media wrapper. */
#detail-content .detail-media { display: grid; place-items: center; margin: 0; width: 100%; min-width: 0; background: #f7f7f7; }
#detail-content .detail-image { display: block; width: 100%; height: auto; max-height: min(52dvh, 480px); object-fit: contain; object-position: center; border-radius: 0; margin: 0; background: #f7f7f7; }
#detail-content .detail-media { position: relative; }
#detail-content .detail-gallery { display: flex; width: 100%; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
#detail-content .detail-gallery::-webkit-scrollbar { display: none; }
#detail-content .detail-slide { flex: 0 0 100%; min-width: 0; height: min(52dvh, 480px); display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; }
#detail-content .detail-slide .detail-image { width: 100%; height: 100%; min-height: 0; }
#detail-content .detail-gallery-controls { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 8px; pointer-events: none; }
#detail-content .detail-gallery-controls .icon { width: 40px; height: 40px; pointer-events: auto; background: #fffffff0; border: 1px solid #ddd; color: #333; box-shadow: 0 1px 4px #0002; }
#detail-content .detail-gallery-controls .icon:disabled { visibility: hidden; }
#detail-content .detail-gallery-counter { position: absolute; top: 12px; right: 12px; min-width: 42px; padding: 5px 9px; border-radius: 6px; background: #252525dc; color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
#post-form .upload { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 480px; }
#post-form #upload-preview.post-image-previews { display: contents; }
#post-form .post-image-preview { position: relative; min-width: 0; aspect-ratio: 1; }
#post-form .post-image-preview .upload-image { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
#post-form .post-image-preview > .icon { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; background: #ffffffeb; color: #222; box-shadow: 0 1px 4px #0002; }
#post-form .post-image-preview > .icon svg { width: 18px; height: 18px; }
#post-form .upload-label { width: 100%; height: auto; min-width: 0; aspect-ratio: 1; }
#post-form .upload:has(.post-image-preview:nth-child(9)) .upload-label { display: none; }
.review-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.review-image-grid:empty { display: none; }
.review-image-grid > .review-image { width: 100%; height: auto; max-height: 320px; object-fit: contain; background: #f7f7f7; }
#detail-content .detail-copy { max-width: 640px; margin-inline: auto; padding: 16px max(20px, env(safe-area-inset-right)) 18px max(20px, env(safe-area-inset-left)); }
#detail-content > .comments { max-width: 640px; padding: 20px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); margin: 0 auto; border-top: 1px solid #e8e8e8; }
#detail-page .detail-kind { margin-left: auto; padding: 3px 6px; color: #757575; background: #f4f4f4; border-radius: 4px; font-size: 11px; flex-shrink: 0; }
#detail-content .detail-title { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 650; text-wrap: pretty; }
#detail-content .detail-copy .detail-body { margin: 9px 0 12px; font-size: 15px; line-height: 1.75; color: #333; white-space: pre-wrap; }
#detail-content .detail-copy .budget { margin: 10px 0; font-size: 15px; line-height: 1.6; font-weight: 600; }
#detail-content .detail-info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #ededed; font-size: 12px; line-height: 1.6; color: #767676; }
#detail-content .detail-info .comment-count { font-size: inherit; color: inherit; }
#detail-content .detail-copy > .hint { margin: 8px 0 0; font-size: 12px; line-height: 1.6; }
#detail-content .detail-copy > a { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; }
#detail-content .detail-copy .actions { flex-wrap: wrap; }
.post-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 7px; }
.view-count { font-variant-numeric: tabular-nums; }
.comment { padding-left: 40px; position: relative; }
.comment .comment-meta > .avatar { position: absolute; left: 0; top: 16px; width: 30px; height: 30px; }
.comment.is-reply { margin-left: 32px; padding-left: 36px; border-left: 0; }
.comment.is-reply .comment-meta > .avatar { width: 26px; height: 26px; }
.comment .comment-body { margin-top: 5px; margin-bottom: 3px; }
.comment .comment-actions { gap: 8px; }
#comment-form { background: #fafafa; padding: 12px; border-radius: 6px; }
#detail-content .comments .section-line { margin-bottom: 12px; }
#detail-content .comments h3 { font-size: 15px; font-weight: 600; line-height: 1.5; }
#detail-content [data-comment-total] { margin-left: 4px; font-size: 13px; font-weight: 400; color: #767676; font-variant-numeric: tabular-nums; }
#detail-content .comment { position: relative; padding: 12px 0 14px 44px; border: 0; background: transparent; }
#detail-content .comment-meta { min-height: 22px; gap: 4px 7px; line-height: 1.5; }
#detail-content .comment .comment-meta > .avatar { position: absolute; left: 0; top: 12px; width: 32px; height: 32px; font-size: 12px; }
#detail-content .comment-meta strong { font-size: 13px; color: #737373; }
#detail-content .comment-meta time { margin-left: 0; font-size: 11px; color: #808080; }
#detail-content .comment-meta .tag { padding: 1px 5px; border-radius: 3px; font-size: 10px; line-height: 1.6; }
#detail-content .comment .comment-body { margin: 4px 0 2px; font-size: 14px; line-height: 1.7; }
.comment-image-button { display: block; width: 144px; max-width: 100%; padding: 0; margin-block: 8px; border: 0; border-radius: 6px; overflow: hidden; }
.comment-image { display: block; width: 144px; max-width: 100%; height: 120px; object-fit: contain; background: #f4f4f4; border-radius: 6px; }
.comment-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.comment-upload > .hint { flex-basis: 100%; overflow-wrap: anywhere; }
.comment-upload .upload-label { width: 44px; height: 44px; min-height: 44px; padding: 0; }
.comment-image-preview { position: relative; width: 144px; max-width: 100%; }
.comment-image-preview > .icon { position: absolute; top: 0; right: 0; background: #fff; }
.comment-image-full { display: block; width: 100%; max-height: 70dvh; object-fit: contain; }
#detail-content .comment > .hint { margin: 3px 0; font-size: 12px; line-height: 1.5; }
#detail-content .comment.is-reply { margin-left: 44px; padding: 8px 0 10px 36px; border: 0; }
#detail-content .comment.is-reply .comment-meta > .avatar { top: 8px; width: 26px; height: 26px; font-size: 11px; }
#detail-content .comment .comment-actions { gap: 8px; flex-wrap: wrap; }
#detail-content .comment-actions .text-button, #detail-content .comment-actions .icon { min-height: 36px; height: 36px; font-size: 12px; color: #767676; }
#detail-content .comment-actions .icon { width: 36px; }
#detail-content .comment-actions svg { width: 16px; height: 16px; }
#detail-content #comment-form, #detail-content .report-form { margin-top: 16px; padding: 16px 0; border-top: 1px solid #ededed; border-radius: 0; background: #fff; scroll-margin-block: calc(80px + env(safe-area-inset-top)) calc(96px + env(safe-area-inset-bottom)); }
#detail-content #comment-form textarea, #detail-content .report-form textarea { min-height: 104px; font-size: 16px; line-height: 1.6; scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
#detail-content .reply-target { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 1.5; }
#detail-content .reply-target > span { min-width: 0; }
#detail-content .load-more { display: block; margin: 12px auto; min-height: 44px; font-size: 13px; }
#detail-content .detail-copy details { padding: 12px 0; font-size: 12px; color: #777; border-top: 1px solid var(--line); }
#detail-content .detail-copy summary { cursor: pointer; }
#detail-dock { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; display: flex; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); min-height: calc(65px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e8e8e8; z-index: 6; }
#detail-dock > * { min-width: 0; }
#detail-dock .comment-shortcut { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 3px; color: #444; font-size: 13px; font-variant-numeric: tabular-nums; }
#detail-dock .comment-shortcut svg { width: 22px; height: 22px; }
#detail-content > .comments { scroll-margin-top: calc(76px + env(safe-area-inset-top)); }
#detail-dock .comment-entry { display: flex; align-items: center; gap: 8px; flex: 1; height: 44px; padding: 0 14px; border-radius: 8px; background: #f4f4f4; color: #757575; font-size: 14px; line-height: 20px; text-align: left; }
#detail-dock .comment-entry span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#detail-dock .comment-entry svg { width: 18px; height: 18px; }
#detail-dock .cooperate-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-height: 44px; max-width: 44%; padding: 10px 20px; background: var(--red); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 22px; white-space: normal; }
#detail-dock .cooperate-button svg { width: 18px; height: 18px; }
#detail-dock button:disabled { opacity: 1; background: #f4f4f4; color: #909090; }
#detail-dock button:focus-visible { outline-offset: 2px; }
body[data-page="publish"] main, body[data-page="messages"] main, body[data-page="me"] main { padding-inline: 16px; }
@media (min-width: 600px) {
  main { padding-inline: 18px; }
  .brand { padding-inline: 22px; }
  .gallery { column-gap: 14px; }
  .gallery .post { margin-bottom: 18px; }
  .text-cover { padding: 26px; gap: 18px; }
  .gallery .avatar { width: 22px; height: 22px; }
  body[data-page="publish"] main, body[data-page="messages"] main, body[data-page="me"] main { padding-inline: 24px; }
  #detail-content .detail-copy { padding: 20px 28px; }
  #detail-content > .comments { padding-inline: 28px; }
  #detail-dock { padding-inline: 40px; }
}
@media (max-width: 359px) {
  main { padding-inline: 8px; }
  .brand { padding-inline: 12px; }
  .gallery { column-gap: 8px; }
  .text-cover { padding: 12px; gap: 8px; }
  .cover-excerpt { -webkit-line-clamp: 2; }
  .post-content { padding-inline: 2px; }
  .post-meta { gap: 4px; }
  .comment-count { gap: 2px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .choice { gap: 6px; padding: 9px 7px; }
  .notification { gap: 9px; }
  .notification-icon { width: 38px; height: 38px; }
  .notification-title { flex-wrap: wrap; gap: 2px 6px; }
  .notification-title h3 { flex-basis: 100%; }
  #detail-content .detail-copy, #detail-content > .comments { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  #detail-content .comment.is-reply { margin-left: 28px; }
  #detail-dock { gap: 8px; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  #detail-dock .comment-entry { padding-inline: 9px; }
  #detail-dock .cooperate-button { padding-inline: 9px; }
  #dialog-body { padding: 14px; }
}
@media (hover: hover) {
  .icon:hover { background: #f6f6f6; }
  .primary:hover, .bottom-nav .nav-publish:hover, #detail-dock .cooperate-button:hover { background: #ec203d; }
  .text-button:hover { color: #b9213a; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}