:root {
  color-scheme: light;
  --bg: #fff8ee;
  --surface: #ffffff;
  --surface-soft: #fff1df;
  --ink: #32251a;
  --muted: #7c6c5f;
  --line: #f2ddc5;
  --brand: #f7a04e;
  --brand-light: #ffc06d;
  --brand-dark: #e67e22;
  --danger: #d94832;
  --shadow: 0 18px 48px rgba(230, 126, 34, 0.16);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
}

* { box-sizing: border-box; }

.app-svg-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

html {
  background: var(--bg);
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 210, 122, 0.34), transparent 260px),
    linear-gradient(180deg, rgba(247, 160, 78, 0.18), transparent 260px),
    var(--bg);
  overflow-x: hidden;
}

.maintenance-screen {
  width: min(560px, calc(100% - 32px));
  margin: min(18vh, 140px) auto 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 28px;
  box-shadow: var(--shadow);
}

.maintenance-screen__kicker {
  margin-bottom: 8px;
  color: var(--brand-dark);
  font-weight: 800;
}

.maintenance-screen h1 {
  margin-bottom: 14px;
  font-size: clamp(32px, 7vw, 48px);
  line-height: 1.12;
}

.maintenance-screen p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
  font-weight: 700;
}

body.has-confirm-dialog,
body.has-photo-lightbox,
body.has-mobile-admin-dialog,
body.has-first-profile-setup {
  overflow: hidden;
}

html.has-first-profile-setup {
  overflow: hidden;
}

.first-profile-setup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1600;
  display: grid;
  width: min(100%, 430px);
  align-items: center;
  justify-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(108px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
}

.first-profile-setup[hidden] {
  display: none;
}

.first-profile-setup::before {
  position: absolute;
  inset: 0;
  background: rgba(82, 60, 47, 0.43);
  backdrop-filter: blur(3px) saturate(0.9);
  content: "";
}

.first-profile-dialog {
  position: relative;
  width: min(100%, 360px);
  max-height: calc(100dvh - 138px);
  overflow: hidden;
  border: 2px solid #efb889;
  border-radius: 28px;
  outline: none;
  background: #fffaf4;
  color: #382c26;
  box-shadow: 0 24px 58px rgba(103, 60, 34, 0.27);
  padding: 34px 23px 23px;
}

.first-profile-dialog::before {
  position: absolute;
  top: 13px;
  left: 50%;
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background: #efa474;
  content: "";
  transform: translateX(-50%);
}

.first-profile-close {
  width: 100%;
  min-height: 58px;
  border: 1px solid #efb889;
  border-radius: 16px;
  background: #fffdf9;
  color: #b65d21;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(178, 83, 43, 0.08);
}

.first-profile-close[hidden] {
  display: none;
}

.first-profile-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.first-profile-dialog.is-account-settings .first-profile-actions {
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
}

.first-profile-dialog.is-nudged {
  animation: first-profile-nudge 360ms ease;
}

@keyframes first-profile-nudge {
  0%,
  100% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(-7px);
  }

  65% {
    transform: translateX(7px);
  }
}

.first-profile-step {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  margin: 0 0 10px;
  border: 1px solid #efb6cc;
  border-radius: 999px;
  background: #fde8f0;
  color: #b34f75;
  font-size: 16px;
  font-weight: 900;
  padding: 0 17px;
}

.first-profile-title {
  margin: 0;
  color: #352720;
  font-size: 29px;
  line-height: 1.25;
}

.first-profile-copy {
  margin: 9px 0 22px;
  color: #76675e;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.first-profile-field {
  display: block;
  margin-bottom: 18px;
}

.first-profile-nickname-field {
  position: relative;
  z-index: 8;
}

.first-profile-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 900;
}

.first-profile-input,
.first-profile-community-trigger {
  width: 100%;
  min-height: 58px;
  border: 2px solid #e7c1a4;
  border-radius: 16px;
  outline: none;
  background: #fffdf9;
  color: #382c26;
  font-size: 18px;
  font-weight: 800;
  padding: 0 15px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.first-profile-input:focus {
  border-color: #ea8150;
  box-shadow: 0 0 0 4px rgba(234, 129, 80, 0.16);
}

.first-profile-input::placeholder {
  color: #b1aaa4;
}

.first-profile-assist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 2px 0;
}

.first-profile-example {
  min-width: 0;
  color: #766c64;
  font-size: 15px;
  line-height: 1.5;
}

.first-profile-emoji-trigger {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid #e3a77e;
  border-radius: 999px;
  background: #fff1e5;
  color: #c85c37;
  font-size: 15px;
  font-weight: 900;
  padding: 0 17px;
}

.first-profile-emoji-picker {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  z-index: 12;
  display: grid;
  gap: 8px;
  border: 1px solid #eac7ab;
  border-radius: 16px;
  background: #fff3e8;
  padding: 9px;
  box-shadow: 0 16px 34px rgba(105, 65, 42, 0.22);
  transform-origin: top center;
  animation: first-profile-emoji-reveal 280ms ease-out both;
}

.first-profile-emoji-picker[hidden] {
  display: none;
}

.first-profile-emoji-picker.is-closing {
  pointer-events: none;
  animation: first-profile-emoji-hide 280ms ease-in both;
}

@keyframes first-profile-emoji-reveal {
  from {
    opacity: 0;
    transform: translateY(-7px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes first-profile-emoji-hide {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-7px) scale(0.985);
  }
}

.first-profile-emoji-note {
  margin: 0;
  color: #557965;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
  white-space: nowrap;
}

.first-profile-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  max-height: 174px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.first-profile-emoji-grid button {
  display: grid;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fffaf4;
  font-size: 22px;
  line-height: 1;
  padding: 0;
}

.first-profile-emoji-grid button:hover,
.first-profile-emoji-grid button:focus-visible {
  border-color: #e79b6b;
  outline: none;
  background: #ffe5d2;
}

.first-profile-community-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.first-profile-community-trigger::after {
  color: #c85c37;
  content: "›";
  font-size: 29px;
  line-height: 1;
}

.first-profile-community-trigger.has-value {
  border-color: #df9d72;
  color: #c85c37;
}

.first-profile-optional-note {
  margin: 7px 2px 0;
  color: #8a817a;
  font-size: 14px;
}

.first-profile-dialog .first-profile-field:not(.first-profile-nickname-field),
.first-profile-dialog .first-profile-actions,
.first-profile-dialog .first-profile-message {
  transition: opacity 280ms ease;
}

.first-profile-dialog.emoji-open .first-profile-field:not(.first-profile-nickname-field),
.first-profile-dialog.emoji-open .first-profile-actions,
.first-profile-dialog.emoji-open .first-profile-message {
  opacity: 0.2;
  pointer-events: none;
}

.first-profile-submit {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffc06d, #f7a04e, #e67e22);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(178, 83, 43, 0.24);
}

.first-profile-submit:active {
  transform: translateY(1px);
}

.first-profile-submit:disabled {
  cursor: default;
  opacity: 1;
}

.first-profile-submit.is-busy {
  animation: first-profile-setting-pulse 2000ms ease-in-out infinite;
}

.first-profile-submit.is-success {
  animation: none;
  filter: brightness(1);
}

@keyframes first-profile-setting-pulse {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.08);
  }
}

.first-profile-message {
  min-height: 24px;
  margin: 10px 0 0;
  color: #bc4436;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.first-profile-message[data-state="info"] {
  color: #76675e;
}

.first-profile-community-panel {
  position: absolute;
  right: 22px;
  bottom: 30px;
  left: 22px;
  z-index: 40;
  display: block;
  transform-origin: bottom center;
  animation: first-profile-community-reveal 280ms ease-out both;
}

.first-profile-community-panel[hidden] {
  display: none;
}

.first-profile-community-panel.is-closing {
  pointer-events: none;
  animation: first-profile-community-hide 280ms ease-in both;
}

@keyframes first-profile-community-reveal {
  from {
    opacity: 0;
    transform: translateY(9px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes first-profile-community-hide {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(9px) scale(0.985);
  }
}

.first-profile-community-panel-inner {
  max-height: min(280px, calc(100dvh - 180px));
  overflow: auto;
  border: 1px solid #e7bea1;
  border-radius: 18px;
  background: #fffaf4;
  padding: 16px;
  box-shadow: 0 16px 34px rgba(105, 65, 42, 0.22);
}

.first-profile-community-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}

.first-profile-community-head h2 {
  margin: 0;
  font-size: 21px;
}

.first-profile-community-head button {
  border: 0;
  background: transparent;
  color: #76675e;
  font-weight: 900;
  padding: 8px;
}

.first-profile-community-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.first-profile-community-options button {
  min-height: 42px;
  border: 1px solid #dfb491;
  border-radius: 999px;
  background: #fff0e3;
  color: #5e4f43;
  font-weight: 900;
  padding: 0 17px;
}

.first-profile-community-options button.is-selected {
  border-color: #e67e22;
  background: #f7a04e;
  color: #fff;
}

.first-profile-dialog :is(button, input):focus-visible {
  outline: 3px solid rgba(47, 130, 109, 0.45);
  outline-offset: 2px;
}

@media (max-height: 650px) {
  .first-profile-setup {
    align-items: start;
    padding-top: 12px;
  }

  .first-profile-dialog {
    max-height: calc(100dvh - 104px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: 29px;
  }

  .first-profile-copy {
    margin-bottom: 14px;
  }

  .first-profile-field {
    margin-bottom: 13px;
  }

  .first-profile-emoji-grid {
    max-height: 145px;
  }
}

@media (max-width: 340px) {
  .first-profile-setup {
    padding-right: 10px;
    padding-left: 10px;
  }

  .first-profile-dialog {
    border-radius: 24px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .first-profile-title {
    font-size: 23px;
  }
}

@media (max-height: 650px) and (max-width: 519px) {
  .first-profile-community-panel {
    position: fixed;
    right: 18px;
    bottom: 122px;
    left: 18px;
  }
}

@media (max-height: 650px) and (min-width: 520px) {
  .first-profile-community-panel {
    position: fixed;
    right: auto;
    bottom: 122px;
    left: 50%;
    width: 316px;
    margin-left: -158px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .first-profile-dialog,
  .first-profile-emoji-picker,
  .first-profile-community-panel,
  .first-profile-dialog .first-profile-field,
  .first-profile-actions,
  .first-profile-message {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

button, input, textarea {
  font: inherit;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

h1, h2, h3, p {
  margin-top: 0;
}

.app-shell {
  position: relative;
  width: min(100vw, 430px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 20px calc(98px + var(--safe-bottom));
  background: rgba(255, 248, 238, 0.78);
  overflow-x: hidden;
}

body.route-booting .app-shell {
  visibility: hidden;
}

.app-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}

.brand-kicker {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 1.24rem;
  line-height: 1.2;
}

h1 {
  margin-bottom: 0;
  font-size: 1.28rem;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
}

.nest-button {
  position: relative;
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 24px;
  color: var(--brand-dark);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 28px rgba(201, 118, 43, 0.08);
}

.nest-button span {
  font-size: 1.42rem;
  font-weight: 950;
}

.nest-button::after {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  content: "";
}

.view { display: none; }
.view.is-active { display: block; }

.view[data-view="me"] {
  padding-bottom: calc(122px + var(--safe-bottom));
}

.search-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 82px;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-radius: 25px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(230, 126, 34, 0.09);
}

.market-result-toast {
  position: absolute;
  right: 18px;
  top: 50%;
  z-index: 2;
  max-width: min(46%, 190px);
  padding: 8px 13px;
  border: 1px solid rgba(232, 137, 39, 0.44);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 233, 198, 0.92), rgba(255, 201, 131, 0.92));
  color: #87470e;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 10px 22px rgba(141, 86, 24, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-42%) scale(0.96);
}

.market-result-toast.is-showing {
  animation: marketResultFloatNotice 3.8s ease both;
}

.search-card label {
  margin-right: 18px;
  color: #6f625a;
  font-size: 1.15rem;
  font-weight: 900;
}

.search-card input {
  min-width: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: 1rem;
  font-weight: 800;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
}

.search-card input::placeholder {
  color: #8a817c;
  opacity: 1;
}

.search-card input::-webkit-search-cancel-button,
.search-card input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}

@media (max-width: 520px) {
  .app-shell {
    padding-top: 18px;
  }

  .app-header {
    margin-bottom: 12px;
  }

  #homeSearchForm,
  #marketFilterForm {
    min-height: 64px;
    margin-bottom: 16px;
    padding-inline: 16px;
  }

  #homeSearchForm label,
  #marketFilterForm label {
    margin-right: 4px;
  }
}

.welcome-card {
  min-height: 212px;
  margin-bottom: 28px;
  border-radius: 30px;
  padding: 27px 25px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 228, 170, 0.8), transparent 160px),
    linear-gradient(145deg, #ffbd73 0%, var(--brand) 50%, var(--brand-dark) 100%);
  box-shadow: var(--shadow);
}

.welcome-card p {
  margin-bottom: 16px;
  font-size: 1.08rem;
  font-weight: 800;
}

.welcome-card h2 {
  margin-bottom: 16px;
  font-size: 2rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.welcome-card strong {
  display: block;
  margin-bottom: 24px;
  font-size: 1.25rem;
  line-height: 1.45;
}

.welcome-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.welcome-card button,
.primary-action {
  min-height: 56px;
  border: 0;
  border-radius: 18px;
  padding: 0 24px;
  color: var(--brand-dark);
  background: #fff;
  font-size: 1.18rem;
  font-weight: 950;
}

.welcome-card-actions > button {
  display: inline-grid;
  width: 100%;
  min-width: 0;
  place-items: center;
  padding: 0 12px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.welcome-coordination-action {
  gap: 2px;
  border: 1px solid rgba(230, 126, 34, 0.24);
  color: #9f5216;
  background: linear-gradient(180deg, #fffaf4, #fff0dd);
  box-shadow: 0 8px 18px rgba(178, 83, 43, 0.08);
}

.welcome-coordination-action span {
  display: block;
  line-height: 1.12;
}

.mayor-delivery-place-dialog {
  max-width: 360px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}

.metric-grid article,
.category-card,
.product-card,
.form-card,
.message-item,
.login-panel,
.member-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(230, 126, 34, 0.09);
}

.metric-grid article {
  display: grid;
  min-height: 106px;
  place-items: center;
  padding: 14px 8px;
  text-align: center;
}

.metric-grid strong {
  color: var(--brand);
  font-size: 2rem;
  line-height: 1;
}

.metric-grid span {
  color: #756a63;
  font-size: 1rem;
  font-weight: 800;
}

.content-section {
  margin-top: 30px;
}

.section-title,
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.section-title h2,
.section-title-row h2 {
  margin-bottom: 0;
  font-size: 1.75rem;
  font-weight: 950;
}

.section-title button {
  border: 0;
  color: var(--brand);
  background: transparent;
  font-size: 1.18rem;
  font-weight: 950;
}

.category-scroll-shell {
  position: relative;
}

.category-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 37%;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.category-grid::-webkit-scrollbar,
.status-tabs::-webkit-scrollbar {
  display: none;
}

.category-card {
  display: grid;
  min-height: 122px;
  place-items: center;
  padding: 16px 10px;
  text-align: center;
}

.category-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(160deg, var(--brand-light), var(--brand));
  font-weight: 950;
}

.category-card strong {
  display: block;
  margin-top: 13px;
  font-size: 1.18rem;
  font-weight: 950;
}

.category-card span {
  color: #756a63;
  font-weight: 800;
}

@media (hover: hover) and (pointer: fine) {
  .category-grid {
    grid-auto-columns: minmax(122px, 31%);
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(247, 160, 78, 0.55) transparent;
  }

  .category-grid::-webkit-scrollbar {
    display: block;
    height: 8px;
  }

  .category-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(247, 160, 78, 0.55);
  }
}

.product-list,
.message-list,
.sell-form,
.member-panel {
  display: grid;
  gap: 16px;
}

.market-load-more {
  display: flex;
  justify-content: center;
  padding: 2px 0 6px;
}

.market-load-more .primary-action {
  min-width: min(220px, 100%);
}

.market-load-more.is-complete {
  padding: 0 0 6px;
  margin-bottom: -22px;
}

.market-load-complete {
  margin: 0;
  color: #9c7a62;
  font-size: 1.32rem;
  line-height: 1.18;
  font-weight: 700;
}

.message-list {
  min-height: min(58vh, 560px);
  align-content: start;
}

.app-header.conversation-board-entering {
  animation: conversation-board-title-enter 3000ms ease-out both;
}

.conversation-thread.conversation-board-entering {
  animation: conversation-board-workspace-enter 3000ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

.conversation-thread.conversation-board-entering::before {
  position: absolute;
  inset: -10px -9px -11px;
  border: 2px solid rgba(86, 126, 158, 0.46);
  border-radius: 30px;
  background: rgba(115, 158, 190, 0.075);
  box-shadow: 0 0 0 0 rgba(86, 126, 158, 0.26);
  content: "";
  pointer-events: none;
  animation: conversation-board-halo-enter 3000ms ease-out both;
}

.conversation-compose.conversation-board-entering {
  animation: conversation-board-compose-enter 3000ms ease-out both;
}

@keyframes conversation-board-title-enter {
  0% {
    opacity: 0.74;
    transform: translateY(8px);
  }

  38% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 18px rgba(115, 158, 190, 0.28);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: none;
  }
}

@keyframes conversation-board-workspace-enter {
  0% {
    opacity: 0.78;
    transform: translateY(14px) scale(0.985);
  }

  46% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes conversation-board-halo-enter {
  0% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(86, 126, 158, 0.24);
  }

  26% {
    opacity: 1;
    box-shadow: 0 0 0 8px rgba(115, 158, 190, 0.17), 0 18px 38px rgba(86, 126, 158, 0.14);
  }

  60% {
    opacity: 0.72;
    box-shadow: 0 0 0 14px rgba(115, 158, 190, 0.09), 0 18px 38px rgba(86, 126, 158, 0.09);
  }

  100% {
    opacity: 0;
    box-shadow: 0 0 0 22px rgba(115, 158, 190, 0), 0 18px 38px rgba(86, 126, 158, 0);
  }
}

@keyframes conversation-board-compose-enter {
  0%,
  46% {
    box-shadow: 0 12px 28px rgba(230, 126, 34, 0.08);
  }

  64% {
    box-shadow: 0 0 0 4px rgba(115, 158, 190, 0.2), 0 14px 30px rgba(86, 126, 158, 0.15);
  }

  100% {
    box-shadow: 0 12px 28px rgba(230, 126, 34, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-header.conversation-board-entering,
  .conversation-thread.conversation-board-entering,
  .conversation-compose.conversation-board-entering {
    animation: conversation-board-title-enter 1ms linear both;
  }

  .conversation-thread.conversation-board-entering::before {
    animation: none;
    opacity: 0;
  }
}

.message-section {
  display: grid;
  gap: 10px;
}

.message-collapsible-section {
  gap: 0;
  border-bottom: 1px solid rgba(247, 160, 78, 0.28);
}

.message-section-toggle {
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 0;
  padding: 0 4px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  text-align: left;
  transform: none;
}

.message-collapsible-section.has-fixed-message-toggle {
  padding-top: var(--message-toggle-height, 60px);
}

.message-section-toggle.is-fixed-message-toggle {
  position: fixed;
  top: 0;
  left: var(--message-toggle-left, 0);
  z-index: 1200;
  width: var(--message-toggle-width, min(100vw, 430px));
  max-width: min(100vw, 430px);
  background: rgba(255, 248, 238, 0.98);
  box-shadow: 0 10px 22px rgba(128, 75, 36, 0.08);
}

.message-section-toggle:hover,
.message-section-toggle:active {
  box-shadow: none;
  transform: none;
}

.message-section-toggle:focus-visible {
  outline: 3px solid rgba(42, 157, 143, 0.42);
  outline-offset: 2px;
}

.message-section-title {
  margin: 0;
  color: #312821;
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.35;
}

.message-section-badges {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.message-section-count {
  display: inline-grid;
  min-width: 30px;
  min-height: 30px;
  place-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: #fff1df;
  color: var(--brand-dark);
  font-size: 0.96rem;
  font-weight: 900;
}

.message-section-new {
  display: inline-grid;
  min-height: 28px;
  place-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: #f05d8b;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}

.message-section-new[hidden] {
  display: none;
}

.message-section-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--brand-dark);
  border-bottom: 2px solid var(--brand-dark);
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}

.message-section-toggle[aria-expanded="true"] .message-section-chevron {
  transform: rotate(45deg);
}

.message-section-content {
  display: grid;
  gap: 10px;
  padding: 2px 0 12px;
}

.message-section-content[hidden] {
  display: none;
}

.product-card {
  position: relative;
  display: grid;
  gap: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  overflow: hidden;
}

.product-card[role="button"] {
  cursor: pointer;
}

.product-card:focus-visible {
  outline: 4px solid rgba(247, 160, 78, 0.36);
  outline-offset: 3px;
}

.product-card.is-done,
.product-card.is-inquiry-locked,
.product-card.is-reported,
.product-card.is-offline {
  opacity: 0.72;
}

.product-card.is-done .product-thumb::after,
.product-card.is-inquiry-locked .product-thumb::after,
.product-card.is-reported .product-thumb::after,
.product-card.is-offline .product-thumb::after {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  border-radius: 999px;
  padding: 7px 12px;
  color: #fff;
  background: rgba(43, 34, 29, 0.72);
  font-size: 0.86rem;
  font-weight: 900;
}

.product-card.is-done .product-thumb::after {
  content: "已完成";
}

.product-card.is-inquiry-locked .product-thumb::after {
  content: "有人詢問中";
  background: rgba(43, 34, 29, 0.72);
}

.product-card.is-offline .product-thumb::after {
  content: "已下架";
  background: rgba(124, 108, 95, 0.72);
}

.product-card.is-reported .product-thumb::after {
  content: "審核中";
  background: rgba(190, 80, 48, 0.76);
}

.favorite-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(242, 221, 197, 0.88);
  border-radius: 999px;
  color: #e45586;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(50, 37, 26, 0.1);
  font-size: 1.16rem;
  font-weight: 950;
}

.favorite-chip.is-active {
  color: #fff;
  background: #f46f9d;
}

.favorite-heart-icon {
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
}

.product-thumb {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1.1 / 0.82;
  place-items: center;
  border-radius: 0;
  color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.34), transparent 120px),
    linear-gradient(160deg, var(--brand-light), var(--brand));
  font-size: 2rem;
  font-weight: 950;
  overflow: hidden;
}

.image-count-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(50, 37, 26, 0.72);
  font-size: 0.82rem;
  font-weight: 950;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card strong {
  display: block;
  margin: 0 0 12px;
  font-size: 1.34rem;
  font-weight: 950;
  line-height: 1.25;
}

.product-card p,
.helper-text,
.quick-step-title p,
.form-message,
.login-message {
  color: #766960;
  line-height: 1.5;
}

.login-message[data-state="loading"] {
  color: #9a5f18;
}

.login-message[data-state="success"] {
  color: #3f7a45;
}

.login-message[data-state="error"] {
  color: #b0442e;
}

.login-message[data-state="info"] {
  color: #6f6258;
}

.form-message[data-state="loading"] {
  color: #9a5f18;
}

.form-message[data-state="success"] {
  color: #3f7a45;
}

.form-message[data-state="error"] {
  color: #b0442e;
}

.field-needs-attention {
  outline: 3px solid rgba(217, 72, 50, 0.28);
  outline-offset: 3px;
}

.product-card p {
  margin-bottom: 14px;
  color: #81736b;
  font-size: 1rem;
  font-weight: 700;
}

.product-condition {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  color: #69564a;
  background: #fff1dc;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.15;
}

.product-summary {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.product-card > div:not(.product-thumb) {
  display: grid;
  gap: 10px;
  padding: 18px 18px 20px;
}

.product-footer,
.product-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.price {
  color: var(--brand-dark);
  font-weight: 950;
}

.product-footer .price {
  order: 4;
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 1.58rem;
}

.status,
.status-tabs button,
.status-pill,
.distance-pill {
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff1dc;
  color: #7a6555;
  font-size: 0.78rem;
  font-weight: 950;
}

.status.available,
.status-tabs button.is-active {
  color: #fff;
  background: var(--brand);
}

.status-tabs button[data-status="favorite"].is-active {
  background: #f782a9;
}

.status.reserved {
  background: #edf3f7;
  color: #527d9d;
}

.status.inquiry-locked {
  background: #fff1dc;
  color: #a15f18;
}

.status.done {
  background: #eee5df;
  color: #6b5b51;
}

.status.offline {
  background: #f0ece7;
  color: #8a817c;
}

.status.reported {
  background: #fff0e8;
  color: #b3542e;
}

.meta,
.product-meta {
  color: #81736b;
  font-size: 0.92rem;
  font-weight: 800;
}

.status-tabs {
  display: flex;
  gap: 7px;
  margin: -8px 0 18px;
  overflow: visible;
  scrollbar-width: none;
}

.status-tabs button {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  min-height: 43px;
  padding: 9px 7px;
  font-size: 0.94rem;
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .status-tabs {
    gap: 5px;
  }

  .status-tabs button {
    min-height: 40px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 0.88rem;
  }
}

.status-tabs .market-layout-toggle {
  border: 1px solid rgba(232, 137, 39, 0.3);
  color: #8a4a12;
  background: rgba(255, 248, 237, 0.96);
}

.status-tabs .market-layout-toggle.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
}

.product-list.is-double,
.product-list.is-wall {
  width: min(100vw, 430px);
  margin-left: calc(50% - min(50vw, 215px));
  gap: 0;
}

.product-list.is-double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(#marketProducts, .sell-preview-market) .market-product-photo-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:is(#marketProducts, .sell-preview-market) .market-product-photo-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-card {
  --market-general-page-gutter: 20px;
  width: min(100vw, 430px);
  margin-left: calc(50% - min(50vw, 215px));
  border-radius: 28px;
  background: #fff;
  overflow: hidden;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-photo-frame {
  width: 100%;
  margin-left: 0;
  aspect-ratio: var(--product-media-aspect-ratio, 1 / 0.74);
  touch-action: pan-x;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-photo-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-photo-track::-webkit-scrollbar {
  display: none;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-photo-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-photo-placeholder {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.34), transparent 120px),
    linear-gradient(160deg, var(--brand-light), var(--brand));
}

.product-thumb.market-product-photo-frame.has-image {
  background: #fff;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-photo-dots {
  bottom: 0;
  z-index: 4;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-card-body {
  display: grid;
  gap: 10px;
  padding: 16px calc(16px + var(--market-general-page-gutter)) 18px;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-heading {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  align-items: last baseline;
  gap: 10px;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-heading strong {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #2C241B;
  font-size: 1.32rem;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-heading .product-condition {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  padding: 0;
  color: #C67C3B;
  background: transparent;
  font-size: 1.02rem;
  line-height: 1.18;
  text-align: right;
  text-overflow: ellipsis;
  transform: translateX(-4px);
  white-space: nowrap;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-seller-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px calc(16px + var(--market-general-page-gutter));
  color: #7d6f67;
  background: #fff;
  font-size: 0.92rem;
  font-weight: 900;
}

#marketProducts:not(.is-double):not(.is-wall) .market-seller-row .seller-avatar {
  width: 42px;
  height: 42px;
  border-width: 2px;
}

#marketProducts:not(.is-double):not(.is-wall) .market-seller-row .seller-avatar.avatar-shape-oval {
  height: 30px;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-seller-row.is-without-seller-avatar {
  grid-template-columns: minmax(0, 1fr);
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-seller-row .product-seller-identity-copy {
  display: grid;
  min-width: 0;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-seller-name {
  min-width: 0;
  color: #2c241b;
  font-size: 1.38rem;
  line-height: 1.12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .product-summary,
:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .product-trade {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: #766960;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-label {
  color: #C67C3B;
  font-weight: 950;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-card-body .product-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-card-body .product-footer .price {
  order: initial;
  min-width: 0;
  flex-basis: auto;
  margin-top: 0;
  color: var(--brand-dark);
  font-size: 1.58rem;
  line-height: 1.1;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-card-body .product-footer .status {
  justify-self: end;
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-card-body .product-footer .status.available {
  font-size: 1.02rem;
  transform: translateX(-4px);
}

:is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-card-body .product-footer .meta {
  display: none;
}

.product-list.is-wall .market-product-heading {
  display: contents;
}

.product-list.is-wall .market-product-label,
.product-list.is-wall .product-trade {
  display: none;
}

.product-list.is-double > .market-empty-state {
  grid-column: 1 / -1;
  width: 100%;
}

.product-list.is-double .product-card {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: #fffdf9;
  box-shadow: none;
}

.product-list.is-double .product-thumb {
  aspect-ratio: 1 / 1;
}

.product-list.is-double .favorite-chip {
  top: 7px;
  right: 7px;
  width: 34px;
  height: 34px;
}

.product-list.is-double .favorite-heart-icon {
  width: 18px;
  height: 18px;
}

.product-list.is-double .image-count-badge {
  right: 7px;
  bottom: 7px;
  min-height: 22px;
  padding: 2px 7px;
  font-size: 0.68rem;
}

.product-list.is-double .product-card > div:not(.product-thumb) {
  gap: 6px;
  padding: 9px 10px 11px;
}

.product-list.is-double .market-product-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: last baseline;
  gap: 6px;
}

.product-list.is-double .product-card strong {
  display: -webkit-box;
  min-height: 2.36em;
  margin: 0;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-list.is-double .product-footer .meta {
  display: none;
}

.product-list.is-double .product-condition {
  justify-self: end;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 7px;
  font-size: 0.68rem;
  text-align: right;
}

.product-list.is-double .product-summary,
.product-list.is-double .product-trade {
  display: -webkit-box;
  min-height: 2.56em;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: #81736b;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-list.is-double .market-product-label {
  color: #C67C3B;
  font-weight: 950;
}

.product-list.is-double .product-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}

.product-list.is-double .price {
  order: initial;
  min-width: 0;
  flex-basis: auto;
  margin-top: 0;
  overflow: hidden;
  color: var(--brand-dark);
  font-size: 0.92rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-list.is-double .status {
  justify-self: end;
  padding: 4px 7px;
  font-size: 0.68rem;
}

.product-list.is-double .product-card.is-done .product-thumb::after,
.product-list.is-double .product-card.is-offline .product-thumb::after {
  top: 7px;
  left: 7px;
  padding: 4px 7px;
  font-size: 0.66rem;
}

.product-list.is-wall {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-list.is-wall > .market-empty-state {
  grid-column: 1 / -1;
  width: 100%;
}

.product-list.is-wall .product-card {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: #fffdf9;
  box-shadow: none;
}

.product-list.is-wall .product-thumb {
  aspect-ratio: 1 / 1;
}

.product-list.is-wall .favorite-chip {
  display: none;
}

.product-list.is-wall .image-count-badge {
  right: 4px;
  bottom: 4px;
  min-height: 18px;
  padding: 2px 5px;
  font-size: 0.62rem;
}

.product-list.is-wall .product-card > div:not(.product-thumb) {
  gap: 3px;
  padding: 5px 6px 7px;
}

.product-list.is-wall .product-card strong {
  margin: 0;
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1.18;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.product-list.is-wall .product-footer .meta {
  display: none;
}

.product-list.is-wall .product-condition {
  min-height: 18px;
  padding: 2px 5px;
  font-size: 0.56rem;
  line-height: 1.1;
}

.product-list.is-wall .product-summary {
  color: #81736b;
  font-size: 0.58rem;
  font-weight: 760;
  line-height: 1.18;
  -webkit-line-clamp: 1;
}

.product-list.is-wall .product-footer {
  gap: 3px;
}

.product-list.is-wall .price {
  font-size: 0.66rem;
  line-height: 1.1;
}

.product-list.is-wall .status {
  display: none;
}

.product-list.is-wall .product-card.is-done .product-thumb::after,
.product-list.is-wall .product-card.is-offline .product-thumb::after {
  top: 4px;
  left: 4px;
  padding: 3px 5px;
  font-size: 0.58rem;
}

body.is-product-detail-view .app-shell {
  padding: 0 0 calc(98px + var(--safe-bottom));
  background: #fffaf3;
  overflow-x: visible;
  overflow-x: clip;
}

body.is-product-detail-view .app-header {
  display: none;
}

.product-detail-view {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
}

.product-detail-view.is-active {
  display: block;
  padding-top: 88px;
}

.product-detail-sticky-header {
  --product-detail-title-inset: 50px;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 18;
  width: min(100vw, 430px);
  border-bottom: 1px solid rgba(230, 126, 34, 0.2);
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 8px 22px rgba(122, 78, 41, 0.1);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.product-detail-sticky-header.has-seller-avatar {
  --product-detail-title-inset: 100px;
}

.product-detail-sticky-header[hidden] {
  display: none;
}

.product-detail-seller-line {
  display: flex;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  padding: 5px 16px 5px 0;
}

.product-detail-top-back {
  display: grid;
  width: 40px;
  height: 40px;
  min-height: 40px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(230, 126, 34, 0.3);
  border-radius: 50%;
  padding: 0;
  color: #b65d21;
  background: #fff8f1;
  box-shadow: 0 7px 16px rgba(178, 83, 43, 0.1);
}

.product-detail-top-back svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-detail-sticky-avatar-slot {
  display: grid;
  width: 40px;
  min-width: 40px;
  place-items: center;
  flex: 0 0 40px;
}

.product-detail-sticky-avatar-slot[hidden] {
  display: none;
}

.product-detail-seller-line > strong {
  min-width: 0;
  overflow: hidden;
  color: #34271e;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-detail-sticky-header > h2 {
  margin: 0;
  overflow: hidden;
  border-top: 1px solid rgba(242, 221, 197, 0.72);
  padding: 7px 18px 8px var(--product-detail-title-inset);
  color: #2c2119;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-back-button {
  display: block;
  width: calc(100% - 32px);
  min-height: 46px;
  margin: 24px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 18px;
  color: #9a551b;
  background: rgba(255, 255, 255, 0.94);
  font-weight: 950;
}

.product-detail-card {
  border: 1px solid var(--line);
  border-radius: 30px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 16px 34px rgba(230, 126, 34, 0.1);
}

.product-detail-view .product-detail-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.detail-hero {
  position: relative;
  display: grid;
  min-height: 270px;
  aspect-ratio: var(--product-media-aspect-ratio, 1 / 0.92);
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.35), transparent 130px),
    linear-gradient(155deg, var(--brand-light), var(--brand));
  font-size: 2.4rem;
  font-weight: 950;
  overflow: hidden;
}

.detail-hero.has-media-presentation {
  min-height: 0;
}

.detail-hero.has-photo {
  background: #fff;
}

.detail-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.detail-photo-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: zoom-in;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.photo-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.photo-layer.is-current {
  z-index: 1;
}

.photo-layer.is-next {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: opacity 170ms ease;
}

.photo-layer.is-next.is-visible {
  opacity: 1;
  visibility: visible;
}

.detail-photo-stage:focus-visible,
.photo-pagination-button:focus-visible {
  outline: 3px solid rgba(247, 160, 78, 0.72);
  outline-offset: 3px;
}

.photo-lightbox-return:focus-visible {
  outline: 0;
  color: #cecece;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.detail-photo-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: inherit;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
}

.detail-photo-placeholder span {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 2.2rem;
}

.detail-photo-placeholder strong {
  color: #fff;
  font-size: 1.08rem;
}

.detail-favorite-chip {
  top: 16px;
  right: 16px;
  z-index: 6;
  width: 52px;
  height: 52px;
  border-color: rgba(255, 210, 226, 0.92);
  box-shadow: 0 12px 28px rgba(68, 28, 42, 0.18);
  font-size: 1.32rem;
}

.detail-favorite-chip .favorite-heart-icon {
  width: 25px;
  height: 25px;
}

.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 16px;
  padding: 22px 20px 24px;
}

.detail-body > * {
  min-width: 0;
  max-width: 100%;
}

.detail-body h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.18;
}

.detail-price {
  color: var(--brand-dark);
  font-size: 2rem;
  font-weight: 950;
}

.detail-body p {
  margin: 0;
  color: #766960;
  font-weight: 800;
  line-height: 1.65;
}

.detail-product-copy {
  overflow-wrap: anywhere;
}

.detail-product-label {
  color: #C67C3B;
  font-weight: 950;
}

.product-description-document,
.description-format-document {
  display: grid;
  min-width: 0;
  gap: 0.72em;
  color: #766960;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.product-description-block,
.description-format-block {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.product-description-block:not(ul):not(ol),
.description-format-paragraph {
  white-space: pre-wrap;
}

.description-format-document.is-legacy {
  gap: 0;
}

.description-format-document.is-legacy .description-format-paragraph {
  min-height: 1.65em;
}

.product-description-document ul.product-description-block,
.product-description-document ol.product-description-block,
.description-format-list,
.description-format-unordered-list,
.description-format-ordered-list {
  display: block;
  margin: 0;
  padding-inline-start: 1.55em;
}

.product-description-document .product-description-block li + li,
.description-format-list-item + .description-format-list-item {
  margin-top: 0.34em;
}

.description-format-list-item {
  min-width: 0;
  padding-inline-start: 0.08em;
  overflow-wrap: anywhere;
}

.description-format-list-item::marker {
  color: #c67c3b;
  font-weight: 950;
}

.description-format-run {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.product-description-document strong,
.product-description-document b,
.description-format-bold {
  font-weight: 950;
}

.run-size-s,
.description-format-size-s {
  font-size: 0.88rem;
}

.run-size-m,
.description-format-size-m {
  font-size: 1rem;
}

.run-size-l,
.description-format-size-l {
  font-size: 1.2rem;
  line-height: 1.5;
}

.run-color-ink,
.description-format-color-ink {
  color: #32251a;
}

.run-color-gray,
.description-format-color-gray {
  color: #766960;
}

.run-color-brand,
.description-format-color-brand {
  color: #c67c3b;
}

.run-color-pink,
.description-format-color-pink {
  color: #d74747;
}

.run-color-blue,
.description-format-color-blue {
  color: #18a3e1;
}

.run-color-green,
.description-format-color-green {
  color: #2f7d5a;
}

.detail-spec-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.detail-spec-list div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: #fffaf4;
}

.detail-spec-list dt {
  color: #8a7b70;
  font-size: 0.88rem;
  font-weight: 900;
}

.detail-spec-list dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.35;
}

.seller-summary,
.safe-trade-note {
  border-radius: 20px;
  padding: 16px;
  background: var(--surface-soft);
}

.seller-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.seller-summary > .product-detail-seller-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.seller-summary > .product-detail-seller-identity.is-without-seller-avatar {
  grid-template-columns: minmax(0, 1fr);
}

.seller-summary .product-seller-identity-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.seller-summary > div:first-child:last-child {
  grid-column: 1 / -1;
}

.seller-summary strong {
  font-size: 1.08rem;
  font-weight: 950;
}

.seller-summary span {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.seller-summary small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.seller-avatar {
  width: 58px;
  height: 58px;
  border-width: 2px;
  box-shadow: 0 6px 14px rgba(198, 124, 59, 0.12);
}

.seller-avatar.avatar-size-large {
  width: 72px;
  height: 72px;
}

.seller-avatar.avatar-size-small {
  width: 46px;
  height: 46px;
}

.seller-avatar.avatar-shape-oval {
  height: 42px;
}

.seller-avatar.avatar-size-large.avatar-shape-oval {
  height: 52px;
}

.seller-avatar.avatar-size-small.avatar-shape-oval {
  height: 34px;
}

.product-detail-sticky-avatar-slot .seller-avatar {
  width: 40px;
  height: 40px;
  border-width: 2px;
}

.product-detail-sticky-avatar-slot .seller-avatar.avatar-shape-oval {
  height: 30px;
}

.seller-summary small,
.safe-trade-note,
#productDetailMessage {
  overflow-wrap: anywhere;
}

.safe-trade-note {
  color: #7d6a5d;
  background: #fff6e8;
}

.detail-action-bar {
  display: grid;
  grid-template-columns: minmax(72px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 28px rgba(230, 126, 34, 0.14);
  backdrop-filter: blur(14px);
}

.detail-secondary-actions,
.detail-primary-actions {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 10px;
}

.detail-secondary-actions > button,
.detail-primary-actions > button {
  width: 100%;
}

.detail-favorite {
  background: #fff0f6;
  color: #d9487b;
}

.detail-favorite.is-active {
  color: #fff;
  background: #f46f9d;
}

.detail-secondary-actions .detail-report {
  border: 1px solid #ead8c4;
  color: #6f6258;
  background: #fff;
  box-shadow: none;
}

.detail-main-action:disabled {
  color: #fff;
  background: #a79b92;
  box-shadow: none;
  cursor: not-allowed;
}

.detail-main-action {
  display: grid;
  min-width: 0;
  padding-inline: 12px;
  place-items: center;
  font-size: 1rem;
  white-space: normal;
}

.detail-main-action-label {
  display: grid;
  max-width: 100%;
  justify-items: start;
  line-height: 1.24;
  text-align: left;
  transform: translateX(0.5em);
}

.detail-main-action-label > span {
  white-space: nowrap;
}

.detail-main-action-subline {
  position: relative;
}

.detail-main-action-opening-paren {
  position: absolute;
  top: 0;
  right: 100%;
  width: 1em;
  text-align: center;
}

.detail-interest-hint {
  display: grid;
  box-sizing: border-box;
  margin: 0;
  padding: 0 4px;
  text-align: left;
}

.detail-interest-hint-line {
  display: block;
  font-size: 0.9rem;
  white-space: nowrap;
}

.detail-interest-hint-copy {
  display: grid;
}

.detail-interest-hint-copy-narrow {
  display: none;
}

.center-text.detail-owner-offline-hint {
  width: fit-content;
  max-width: 100%;
  justify-self: center;
  text-align: left;
}

@media (max-width: 380px) {
  .detail-hero {
    min-height: 0;
  }

  .detail-action-bar {
    grid-template-columns: minmax(68px, 0.36fr) minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .detail-main-action {
    padding-inline: 6px;
    font-size: 0.95rem;
  }

  .safe-trade-note,
  .detail-interest-hint {
    padding-right: 4px;
    padding-left: 4px;
  }

  .detail-interest-hint-copy-wide {
    display: none;
  }

  .detail-interest-hint-copy-narrow {
    display: grid;
  }
}

.detail-reserved-note {
  margin: 0;
  border: 1px solid #f2ddc5;
  border-radius: 20px;
  padding: 16px;
  color: #7a5a36;
  background: #fff6e8;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.65;
  text-align: center;
  white-space: pre-line;
}

.quick-sell-form {
  gap: 18px;
}

@media (max-width: 430px) {
  .view[data-view="sell"] .quick-sell-form > .form-card {
    margin-right: -20px;
    margin-left: -20px;
  }
}

.form-card {
  padding: 28px 26px;
}

.quick-step-card {
  display: grid;
  gap: 17px;
}

.quick-step-title {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: start;
}

.quick-step-title h2 {
  margin-bottom: 7px;
  font-size: 1.68rem;
  font-weight: 950;
  line-height: 1.2;
}

.quick-step-title p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 800;
}

.step-badge {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #ffd08a, var(--brand) 58%, var(--brand-dark));
  color: #fff;
  font-size: 1.35rem;
  font-weight: 950;
}

.photo-upload-input {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.photo-slot {
  position: relative;
  display: grid;
  aspect-ratio: 1 / 1;
  place-items: center;
  min-width: 0;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--brand-dark);
  overflow: hidden;
  font-size: 1.55rem;
  font-weight: 950;
}

.photo-slot.has-photo {
  border-style: solid;
  background: #fffaf4;
}

.photo-slot-preview {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.photo-slot-preview.is-current {
  outline: 3px solid #2a8c83;
  outline-offset: -3px;
}

.photo-slot-preview:focus-visible,
.photo-cover-action:focus-visible,
.photo-remove:focus-visible {
  outline: 3px solid rgba(42, 140, 131, 0.38);
  outline-offset: 1px;
}

.photo-slot-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.photo-slot-number {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(50, 37, 26, 0.7);
  font-size: 9px;
  font-weight: 950;
}

.photo-cover-badge,
.photo-cover-action {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  z-index: 3;
  display: grid;
  min-width: 0;
  min-height: 18px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  padding: 1px 2px;
  color: #fff;
  background: rgba(230, 126, 34, 0.93);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.photo-cover-action {
  background: rgba(50, 37, 26, 0.76);
}

.photo-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 4;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(50, 37, 26, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.photo-count-note {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  width: 100%;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--brand-dark);
  font-size: 1rem;
  font-weight: 950;
}

.photo-count-note[data-state="error"] {
  background: #fff0ed;
  color: var(--danger);
}

.photo-count-note[data-state="info"] {
  background: rgba(255, 244, 226, 0.94);
  color: #f28522;
}

.sell-cover-editor {
  display: grid;
  min-width: 0;
  gap: 13px;
  margin-top: 4px;
  border-top: 1px solid rgba(247, 160, 78, 0.24);
  padding-top: 18px;
}

.sell-cover-editor[hidden] {
  display: none;
}

.sell-cover-editor-heading {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.sell-cover-editor-heading h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 950;
  line-height: 1.2;
}

.sell-cover-editor-kicker,
.sell-cover-editor-count {
  color: var(--brand-dark);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.2;
}

.sell-cover-editor-count {
  flex: 0 0 auto;
  text-align: right;
}

.sell-cover-editor-help,
.sell-cover-editor-warning,
.sell-cover-editor-status {
  margin: 0;
  color: #766960;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.55;
}

.sell-cover-editor-warning {
  margin: -3px 0 0;
  border: 1px solid rgba(247, 160, 78, 0.32);
  border-radius: 13px;
  padding: 9px 11px;
  color: #8a4a12;
  background: #fff7ea;
}

.sell-cover-appearance-controls {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(6, 44px);
  grid-template-rows: repeat(2, 44px);
  gap: 0;
}

.sell-cover-color-base-group {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  grid-template-columns: repeat(6, 44px);
  grid-template-rows: repeat(2, 44px);
  align-items: center;
  gap: 0;
}

.sell-cover-color-pastel-group {
  display: flex;
  z-index: 1;
  grid-column: 5 / span 2;
  grid-row: 2;
  align-items: center;
  margin: 0;
  border: 0;
  padding: 0;
}

.sell-cover-color-dot {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.sell-cover-color-dot::before {
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(44, 36, 27, 0.34);
  border-radius: 50%;
  background: var(--sell-cover-swatch, #fff);
  content: "";
  transition: box-shadow 140ms ease, transform 140ms ease;
}

.sell-cover-color-dot.is-pastel::before {
  width: 72px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, #f58ead 0 50%, #ffe1eb 50% 100%);
}

.sell-cover-color-dot.is-pastel {
  width: 88px;
  flex-basis: 88px;
  border-radius: 999px;
}

.sell-cover-color-dot.is-selected::before {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px #2a8c83;
  transform: scale(1.06);
}

.sell-cover-layout-options {
  display: flex;
  min-width: 0;
  gap: 9px;
  overflow-x: auto;
  padding: 1px 1px 7px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.sell-cover-layout-option {
  display: grid;
  min-width: 94px;
  flex: 0 0 94px;
  gap: 6px;
  scroll-snap-align: start;
  border: 1px solid #ead8c5;
  border-radius: 15px;
  padding: 8px 7px 7px;
  color: #6f6259;
  background: #fffaf4;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
}

.sell-cover-layout-option.is-active {
  border-color: var(--brand);
  color: var(--brand-dark);
  background: #fff0dc;
  box-shadow: 0 0 0 2px rgba(247, 160, 78, 0.18);
}

.sell-cover-layout-option:disabled {
  opacity: 0.38;
  filter: grayscale(0.45);
}

.sell-cover-layout-option:focus-visible,
.sell-cover-editor-slot:focus-visible,
.sell-cover-photo-choice:focus-visible,
.sell-cover-focus-reset:focus-visible,
.sell-cover-color-dot:focus-visible,
.sell-cover-workspace-dot:focus-visible {
  outline: 3px solid rgba(42, 140, 131, 0.38);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sell-cover-color-dot::before {
    transition: none;
  }
}

@media (forced-colors: active) {
  .sell-cover-color-dot::before {
    border-color: CanvasText;
    forced-color-adjust: none;
  }

  .sell-cover-color-dot.is-selected::before {
    outline: 3px solid Highlight;
    outline-offset: 3px;
    box-shadow:
      0 0 0 2px Canvas,
      0 0 0 5px Highlight;
  }

  .sell-cover-color-dot:focus-visible {
    outline-color: Highlight;
  }
}

.sell-cover-layout-miniature {
  display: grid;
  width: 62px;
  height: 48px;
  min-width: 0;
  min-height: 0;
  justify-self: center;
  gap: 2px;
  overflow: hidden;
  border-radius: 8px;
  background: #f2e9df;
}

.sell-cover-layout-miniature > span {
  display: block;
  min-width: 0;
  min-height: 0;
  background: linear-gradient(145deg, #ffc779, #f29a43);
}

.sell-cover-editor-full-bleed {
  width: min(100vw, 430px);
  margin-left: calc(50% - min(50vw, 215px));
}

.sell-cover-editor-canvas-shell {
  width: 100%;
  overflow: hidden;
  background: #f5eee6;
}

.sell-cover-workspace {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--sell-cover-background-color, #fff);
}

.sell-cover-workspace-track {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.sell-cover-workspace-track::-webkit-scrollbar {
  display: none;
}

.sell-cover-workspace-page {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 0 0 100%;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: var(--sell-cover-background-color, #fff);
}

.sell-cover-workspace-page .sell-cover-editor-canvas {
  height: 100%;
}

.sell-cover-workspace-page.is-original {
  background: var(--sell-cover-background-color, #fff);
}

.sell-cover-workspace-page.is-original > .sell-cover-adjustable-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sell-cover-workspace-page-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: grid;
  min-height: 25px;
  place-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  color: #fff;
  background: rgba(44, 36, 27, 0.68);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

.sell-cover-workspace-dots {
  bottom: 8px;
  max-width: calc(100% - 16px);
}

.sell-cover-workspace-dot {
  width: 24px;
  height: 22px;
  flex: 0 0 24px;
}

.sell-cover-editor-canvas-placeholder {
  display: grid;
  min-height: 210px;
  place-items: center;
  padding: 28px;
  color: #8a7b70;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.52), transparent 130px),
    linear-gradient(150deg, #fff2df, #f7dcc0);
  font-size: 1rem;
  font-weight: 950;
  text-align: center;
}

.sell-cover-editor-canvas {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  gap: 3px;
  overflow: hidden;
  background: var(--sell-cover-background-color, #fff);
}

.sell-cover-editor-slot {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #9a8878;
  background: var(--sell-cover-background-color, #eee6de);
  font-size: 1rem;
  font-weight: 950;
}

.sell-cover-editor-slot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sell-cover-editor-slot.has-photo,
.sell-preview-market .sell-preview-photo-collage-tile.has-photo,
.sell-preview-market .market-product-photo-slide.has-adjustable-cover {
  background: var(--sell-cover-background-color, #fff);
}

.sell-cover-adjustable-image {
  position: absolute;
  display: block;
}

.sell-preview-market .market-product-photo-slide.has-adjustable-cover {
  position: relative;
  overflow: hidden;
}

.sell-cover-editor-slot.is-active {
  box-shadow: inset 0 0 0 4px #2a8c83;
}

.sell-cover-editor-slot-number {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(44, 36, 27, 0.68);
  font-size: 0.72rem;
  font-weight: 950;
}

.sell-cover-editor-slot-empty {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px dashed rgba(179, 126, 70, 0.48);
  border-radius: 12px;
  font-size: 1.35rem;
}

.sell-cover-photo-tray {
  display: flex;
  min-width: 0;
  gap: 9px;
  overflow-x: auto;
  padding: 1px 1px 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.sell-cover-photo-choice {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  min-width: 62px;
  flex: 0 0 62px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 0;
  background: #eee4da;
}

.sell-cover-photo-choice.is-selected {
  border-color: #2a8c83;
  box-shadow: 0 0 0 2px rgba(42, 140, 131, 0.17);
}

.sell-cover-photo-choice img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sell-cover-photo-choice span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(44, 36, 27, 0.72);
  font-size: 0.68rem;
  font-weight: 950;
}

.sell-cover-focus-controls {
  display: grid;
  gap: 9px;
}

.sell-cover-focus-controls:empty {
  display: none;
}

.sell-cover-focus-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sell-cover-focus-heading strong {
  color: #5f554e;
  font-size: 0.9rem;
}

.sell-cover-focus-reset {
  min-height: 34px;
  border: 1px solid #ead8c5;
  border-radius: 999px;
  padding: 4px 13px;
  color: var(--brand-dark);
  background: #fffaf4;
  font-size: 0.78rem;
  font-weight: 950;
}

.sell-cover-focus-range {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #766960;
  font-size: 0.82rem;
  font-weight: 900;
}

.sell-cover-focus-range input {
  width: 100%;
  min-height: 34px;
  margin: 0;
  accent-color: var(--brand);
}

.sell-cover-focus-range b {
  color: var(--brand-dark);
  font-size: 0.74rem;
}

.sell-cover-editor-status {
  min-height: 1.45em;
  color: #257f78;
}

.sell-cover-layout {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: 2px;
}

.sell-cover-layout[data-sell-cover-layout="single"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.sell-cover-layout[data-sell-cover-layout="two-rows"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sell-cover-layout[data-sell-cover-layout="two-columns"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.sell-cover-layout[data-sell-cover-layout="three-left"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sell-cover-layout[data-sell-cover-layout="three-left"] > :nth-child(1) {
  grid-row: 1 / 3;
}

.sell-cover-layout[data-sell-cover-layout="three-top"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sell-cover-layout[data-sell-cover-layout="three-top"] > :nth-child(1) {
  grid-column: 1 / 3;
}

.sell-cover-layout[data-sell-cover-layout="four-left"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.sell-cover-layout[data-sell-cover-layout="four-left"] > :nth-child(1) {
  grid-row: 1 / 4;
}

.sell-cover-layout[data-sell-cover-layout="four-grid"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sell-cover-layout[data-sell-cover-layout="five-top"] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sell-cover-layout[data-sell-cover-layout="five-top"] > :nth-child(1) {
  grid-column: 1 / 4;
}

.sell-cover-layout[data-sell-cover-layout="five-top"] > :nth-child(2) {
  grid-column: 4 / 7;
}

.sell-cover-layout[data-sell-cover-layout="five-top"] > :nth-child(3) {
  grid-column: 1 / 3;
}

.sell-cover-layout[data-sell-cover-layout="five-top"] > :nth-child(4) {
  grid-column: 3 / 5;
}

.sell-cover-layout[data-sell-cover-layout="five-top"] > :nth-child(5) {
  grid-column: 5 / 7;
}

.sell-cover-layout[data-sell-cover-layout="five-left"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.sell-cover-layout[data-sell-cover-layout="five-left"] > :nth-child(1) {
  grid-row: 1 / 4;
}

.sell-cover-layout[data-sell-cover-layout="five-left"] > :nth-child(2) {
  grid-row: 4 / 7;
}

.sell-cover-layout[data-sell-cover-layout="five-left"] > :nth-child(3) {
  grid-row: 1 / 3;
}

.sell-cover-layout[data-sell-cover-layout="five-left"] > :nth-child(4) {
  grid-row: 3 / 5;
}

.sell-cover-layout[data-sell-cover-layout="five-left"] > :nth-child(5) {
  grid-row: 5 / 7;
}

.sell-cover-layout[data-sell-cover-layout="six-grid"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

label,
.choice-group {
  display: grid;
  gap: 9px;
  margin-bottom: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 950;
}

.field-label {
  color: var(--ink);
  font-size: inherit;
  font-weight: inherit;
}

.category-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.category-picker-trigger {
  flex: 0 0 auto;
  min-height: 40px;
  border: 1px solid rgba(247, 160, 78, 0.28);
  border-radius: 999px;
  padding: 0 16px;
  color: #9b5418;
  background: linear-gradient(180deg, #fff9ef, #ffe7bd);
  font-size: 0.98rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(230, 126, 34, 0.1);
}

.description-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}

.description-picker-field .category-field-label {
  flex-wrap: wrap;
  gap: 8px 10px;
}

.description-header-actions .category-picker-trigger {
  min-height: 36px;
  padding: 0 10px;
  font-size: 0.88rem;
}

.description-editor-toggle[data-editor-level="basic"] {
  border-color: rgba(44, 36, 27, 0.34);
  color: #6f3f51;
  background:
    linear-gradient(135deg, #f58ead 0 50%, #ffe1eb 50% 100%);
  box-shadow: 0 8px 18px rgba(245, 142, 173, 0.2);
}

.description-editor-toggle[data-editor-level="full"] {
  border-color: #f68a2a;
  color: #fff;
  background: linear-gradient(135deg, #ffb45f, #f68a2a);
  box-shadow: 0 8px 18px rgba(230, 126, 34, 0.2);
}

.description-clear-button {
  background: linear-gradient(180deg, #ffffff, #fff6e8);
}

.category-selected-input[readonly] {
  color: var(--ink);
  background: #fffaf4;
  cursor: pointer;
}

.description-helper {
  margin: -1px 0 0;
  color: #766960;
  font-size: 0.96rem;
  font-weight: 850;
  line-height: 1.45;
}

.description-editor-toolbar {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(230, 126, 34, 0.24);
  border-radius: 20px;
  padding: 10px 11px 11px;
  background: linear-gradient(180deg, #fff8ee, #fff1df);
  box-shadow: 0 10px 24px rgba(230, 126, 34, 0.08);
}

.description-editor-toolbar[hidden],
.description-editor-emoji-picker[hidden],
.description-editor-symbol-section[hidden] {
  display: none !important;
}

.description-editor-format-line {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
}

.description-editor-format-line + .description-editor-format-line {
  margin-top: 9px;
}

.description-editor-format-label {
  flex: 0 0 43px;
  color: #8a6d56;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.2;
}

.description-editor-format-controls {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.description-editor-font-controls {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.description-editor-tool {
  display: inline-grid;
  width: 100%;
  min-width: 0;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(198, 124, 59, 0.28);
  border-radius: 13px;
  padding: 0;
  color: #754317;
  background: rgba(255, 253, 249, 0.97);
  box-shadow: 0 5px 12px rgba(77, 52, 33, 0.07);
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1;
  touch-action: manipulation;
}

.description-editor-tool:hover {
  border-color: rgba(230, 126, 34, 0.5);
  background: #fffaf3;
}

.description-editor-tool:focus-visible {
  outline: 3px solid rgba(247, 160, 78, 0.36);
  outline-offset: 2px;
}

.description-editor-tool[aria-pressed="true"] {
  border-color: #f68a2a;
  color: #fff;
  background: #f68a2a;
  box-shadow: 0 5px 12px rgba(231, 112, 17, 0.2);
}

.description-editor-tool:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.description-editor-action-tool {
  color: #bd5f10;
  font-size: 1.28rem;
}

.description-editor-emoji-toggle {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.16rem;
}

.description-editor-emoji-toggle[aria-expanded="true"] {
  border-color: #f68a2a;
  background: #fff0dd;
  box-shadow: inset 0 0 0 2px rgba(246, 138, 42, 0.18);
}

.description-editor-emoji-picker {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px 4px;
  width: 100%;
  margin-top: 9px;
  border: 1px solid rgba(230, 126, 34, 0.28);
  border-radius: 18px;
  padding: 10px 8px;
  background: #fffdf9;
}

.description-editor-emoji-option {
  display: grid;
  width: 100%;
  min-width: 0;
  height: 35px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.18rem;
  line-height: 1;
  touch-action: manipulation;
}

.description-editor-emoji-option:hover,
.description-editor-emoji-option:focus-visible {
  background: #fff0dd;
  outline: none;
}

.description-editor-color-controls {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.description-editor-color-line {
  margin-top: 9px;
}

.description-editor-color-tool {
  display: grid;
  width: 100%;
  min-width: 0;
  height: 43px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 0;
  background: rgba(255, 253, 249, 0.94);
  touch-action: manipulation;
}

.description-editor-color-tool::before {
  width: 25px;
  height: 25px;
  border: 1px solid rgba(50, 37, 26, 0.28);
  border-radius: 50%;
  content: "";
  box-shadow: 0 3px 7px rgba(50, 37, 26, 0.1);
}

.description-editor-color-tool.is-ink::before {
  background: #1f1f1f;
}

.description-editor-color-tool.is-gray::before {
  background: #625b56;
}

.description-editor-color-tool.is-brand::before {
  background: #a95516;
}

.description-editor-color-tool.is-pink::before {
  background: #d74747;
}

.description-editor-color-tool.is-green::before {
  background: #28704e;
}

.description-editor-color-tool.is-blue::before {
  background: #18a3e1;
}

.description-editor-color-tool[aria-pressed="true"] {
  border-color: #f68a2a;
  box-shadow: inset 0 0 0 1px #f68a2a;
}

.description-editor-color-tool:focus-visible {
  outline: 3px solid rgba(247, 160, 78, 0.36);
  outline-offset: 2px;
}

.description-editor-symbol-section {
  margin-top: 10px;
  border-top: 1px solid rgba(230, 126, 34, 0.2);
  padding-top: 9px;
}

.description-editor-symbol-grid {
  width: 100%;
  min-width: 0;
}

.description-editor-symbol-row {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.description-editor-symbol-row + .description-editor-symbol-row {
  margin-top: 6px;
}

.description-editor-symbol-pair-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.description-editor-symbol-single-row {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.description-editor-symbol-tool {
  display: grid;
  width: 100%;
  min-width: 0;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(198, 124, 59, 0.32);
  border-radius: 12px;
  padding: 0;
  color: #754317;
  background: rgba(255, 253, 249, 0.98);
  box-shadow: 0 4px 10px rgba(77, 52, 33, 0.06);
  font-size: 0.96rem;
  font-weight: 950;
  line-height: 1;
  touch-action: manipulation;
}

.description-editor-symbol-tool:hover,
.description-editor-symbol-tool:active {
  border-color: #f68a2a;
  color: #9b5418;
  background: #fff0dd;
}

.description-editor-symbol-tool:focus-visible {
  outline: 3px solid rgba(247, 160, 78, 0.36);
  outline-offset: 2px;
}

@media (max-width: 350px) {
  .description-editor-symbol-single-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.description-wysiwyg-surface {
  width: 100%;
  height: calc(7 * 1.55em + 36px);
  min-height: calc(7 * 1.55em + 36px);
  max-height: calc(7 * 1.55em + 36px);
  overflow-y: auto;
  border: 1px solid rgba(198, 124, 59, 0.34);
  border-radius: 18px;
  padding: 17px 16px;
  color: #32251a;
  background: #fff;
  caret-color: #bd5f10;
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
  -webkit-overflow-scrolling: touch;
}

.description-wysiwyg-surface:focus {
  border-color: rgba(230, 126, 34, 0.72);
  outline: 3px solid rgba(247, 160, 78, 0.18);
}

.description-wysiwyg-surface.is-empty::before {
  color: #a99a8e;
  content: attr(data-placeholder);
  font-weight: 750;
  pointer-events: none;
}

.description-wysiwyg-run {
  white-space: pre-wrap;
}

.description-picker-field .description-meta {
  align-items: flex-start;
}

.description-editor-message {
  min-height: 1.35em;
  margin: -2px 2px 0;
  color: #766960;
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.35;
}

.description-editor-message:empty {
  display: none;
}

.description-editor-message[data-state="error"] {
  color: #b0442e;
}

.trade-composer-field {
  display: grid;
  gap: 14px;
}

.trade-composer-pickers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 12px;
  align-items: center;
}

.trade-composer-control {
  display: grid;
  grid-template-columns: 4.75em 72px;
  min-width: 0;
  align-items: center;
  justify-content: start;
  gap: 6px;
}

.trade-composer-control span {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.15;
  white-space: nowrap;
}

.trade-composer-control .category-picker-trigger {
  width: 72px;
  min-width: 72px;
  min-height: 42px;
  padding: 0 10px;
}

.trade-composer-helper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.trade-composer-helper {
  margin: 0;
}

.trade-composer-example {
  margin: -5px 0 0;
  color: #766960;
  font-size: 0.96rem;
  font-weight: 850;
  line-height: 1.45;
}

.trade-composer-shortcut-label {
  margin: -2px 0 -6px;
}

.trade-composer-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.trade-composer-chip {
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 44px;
  border: 1px solid rgba(247, 160, 78, 0.26);
  border-radius: 999px;
  padding: 0 15px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #fff6e8);
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(230, 126, 34, 0.08);
}

.trade-composer-chip.is-selected,
.trade-composer-chip[aria-pressed="true"] {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #ffc06d, var(--brand), var(--brand-dark));
  box-shadow: 0 12px 24px rgba(230, 126, 34, 0.2);
}

.description-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #766960;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.35;
}

.description-meta span:first-child {
  min-width: 0;
}

#descriptionCounter {
  flex: 0 0 auto;
  color: #8f6d55;
  font-weight: 950;
}

#descriptionCounter[data-state="warn"] {
  color: #b76b18;
}

#descriptionCounter[data-state="error"] {
  color: #b0442e;
}

input,
textarea {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0 16px;
  color: var(--ink);
  background: #fffaf4;
  font-weight: 800;
  outline: 0;
}

.price-input-shell {
  position: relative;
  display: block;
  width: 100%;
}

.price-input-shell::after {
  position: absolute;
  top: 50%;
  left: 16px;
  right: 70px;
  z-index: 1;
  display: none;
  color: var(--ink);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  content: "免費贈送";
  transform: translateY(-50%);
}

.price-input-shell input {
  padding-right: 70px;
}

.price-input-shell.is-free input {
  color: transparent;
  caret-color: var(--ink);
}

.price-input-shell.is-free::after {
  display: block;
}

#quickPrice {
  appearance: textfield;
  -moz-appearance: textfield;
}

#quickPrice::-webkit-outer-spin-button,
#quickPrice::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.price-stepper {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  width: 46px;
  height: 48px;
  overflow: hidden;
  border: 1px solid rgba(230, 126, 34, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  transform: translateY(-50%);
}

.price-stepper button {
  display: grid;
  min-height: 0;
  place-items: center;
  border: 0;
  padding: 0;
  color: #8b4b12;
  background: transparent;
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1;
  touch-action: manipulation;
}

.price-stepper button + button {
  border-top: 1px solid rgba(230, 126, 34, 0.18);
}

.price-stepper button:active {
  background: var(--surface-soft);
}

textarea {
  min-height: 132px;
  padding: 17px 16px;
  resize: vertical;
  line-height: 1.55;
}

.category-picker-dialog {
  display: grid;
  width: min(calc(100vw - 24px), 382px);
  max-height: min(calc(100vh - 24px), 520px);
  max-height: min(calc(100svh - 24px), 520px);
  gap: 9px;
  overflow: hidden;
  padding: 17px 20px 15px;
}

.category-picker-kicker {
  width: fit-content;
  min-height: 38px;
  padding: 0 18px;
  font-size: 1.2rem;
  line-height: 1;
}

.category-picker-dialog h2 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.18;
}

.category-picker-dialog .category-picker-hint {
  margin: 1px 0 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.category-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 1px;
}

.category-picker-grid button {
  display: grid;
  min-width: 0;
  min-height: 54px;
  place-items: center;
  border: 1px solid rgba(247, 160, 78, 0.26);
  border-radius: 16px;
  padding: 6px 5px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #fff6e8);
  font-size: 1.04rem;
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-align: center;
  box-shadow: 0 8px 18px rgba(230, 126, 34, 0.08);
}

.category-picker-grid button.is-short {
  font-size: 1.14rem;
}

.category-picker-grid button.is-medium {
  font-size: 1.08rem;
}

.category-picker-grid button.is-long,
.category-picker-grid button.is-mixed {
  font-size: 1rem;
}

.category-picker-grid button.is-selected {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #ffc06d, var(--brand), var(--brand-dark));
  box-shadow: 0 12px 24px rgba(230, 126, 34, 0.2);
}

.community-picker-dialog {
  display: grid;
  width: min(calc(100vw - 18px), 400px);
  max-height: 88vh;
  max-height: calc(100svh - 18px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
  padding: 18px;
}

.community-picker-flow {
  display: flex;
  min-height: 0;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 9px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.community-picker-flow button {
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 44px;
  border: 1px solid rgba(247, 160, 78, 0.26);
  border-radius: 999px;
  padding: 0 15px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #fff6e8);
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(230, 126, 34, 0.08);
}

.community-picker-flow button.is-selected {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #ffc06d, var(--brand), var(--brand-dark));
  box-shadow: 0 12px 24px rgba(230, 126, 34, 0.2);
}

.community-picker-flow button.trade-picker-exit {
  border-color: #d8d1ca;
  color: #746a63;
  background: #f1eee9;
  box-shadow: none;
}

.description-phrase-dialog {
  width: min(calc(100vw - 16px), 400px);
  height: 94vh;
  max-height: 94vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  overflow: hidden;
  padding: 17px 18px 15px;
}

@supports (height: 100svh) {
  .description-phrase-dialog {
    height: calc(100svh - 12px);
    max-height: calc(100svh - 12px);
  }
}

.description-phrase-dialog .category-picker-kicker {
  min-height: 42px;
  padding: 0 20px;
  font-size: 1.34rem;
}

.description-phrase-dialog .category-picker-kicker span {
  margin-left: 4px;
  font-size: 1.02rem;
  font-weight: 950;
}

.description-phrase-scroll {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.description-phrase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.description-phrase-grid button {
  display: grid;
  min-width: 0;
  min-height: 56px;
  place-items: center;
  border: 1px solid rgba(247, 160, 78, 0.26);
  border-radius: 17px;
  padding: 8px 9px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #fff6e8);
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.18;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-align: center;
  box-shadow: 0 8px 18px rgba(230, 126, 34, 0.08);
}

.description-phrase-grid button.is-selected {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #ffc06d, var(--brand), var(--brand-dark));
  box-shadow: 0 12px 24px rgba(230, 126, 34, 0.2);
}

.trade-phrase-dialog {
  width: min(calc(100vw - 18px), 340px);
  max-height: min(72vh, 420px);
}

.trade-place-dialog {
  width: min(calc(100vw - 18px), 400px);
}

.trade-time-dialog {
  width: min(calc(100vw - 18px), 400px);
}

.description-phrase-message {
  min-height: 1.35em;
  margin: 0;
  color: #766960;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.35;
}

.description-phrase-message[data-state="error"] {
  color: #b0442e;
}

.description-phrase-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.description-phrase-actions button {
  min-height: 54px;
  border-radius: 16px;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 1.08rem;
}

.toggle-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #756a63;
}

.toggle-row input {
  width: 32px;
  height: 32px;
  min-height: 32px;
  accent-color: var(--brand);
}

.quick-preview-card .section-title-row h2 {
  min-width: 0;
  font-size: 1.45rem;
  line-height: 1.18;
  white-space: nowrap;
}

.draft-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--brand-dark);
  font-size: 1rem;
  font-weight: 950;
  white-space: nowrap;
}

.sell-preview-context {
  min-width: 0;
  color: #257f78;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.sell-preview-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid #d8e1df;
  border-radius: 8px;
  padding: 3px;
  background: #eef3f2;
}

.sell-preview-modes button {
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  padding: 7px 3px;
  color: #5f6966;
  background: transparent;
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1.15;
}

.sell-preview-modes button.is-active {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 2px 7px rgba(217, 107, 25, 0.24);
}

.sell-preview-modes button:focus-visible,
.sell-preview-stage [data-sell-preview-photo-index]:focus-visible {
  outline: 3px solid rgba(37, 127, 120, 0.34);
  outline-offset: 2px;
}

.sell-preview-stage {
  display: grid;
  min-width: 0;
  min-height: 300px;
  align-content: start;
  overflow: visible;
}

.sell-preview-market {
  min-width: 0;
  width: 100%;
  margin-left: 0;
}

#sellPreviewStage .sell-preview-market:not(.is-double):not(.is-wall) .market-product-card {
  width: 100%;
  margin-left: 0;
}

#sellPreviewStage .sell-preview-market:not(.is-double):not(.is-wall) .market-product-photo-frame {
  aspect-ratio: 285 / 369;
}

#sellPreviewStage .sell-preview-market.is-cover-editor-preview:not(.is-double):not(.is-wall) .market-product-card {
  width: min(100vw, 430px);
  margin-left: calc(50% - min(50vw, 215px));
}

@media (min-width: 431px) {
  .view[data-view="sell"] .sell-cover-editor-full-bleed,
  #sellPreviewStage .sell-preview-market.is-cover-editor-preview:not(.is-double):not(.is-wall) .market-product-card {
    width: calc(100% + 52px);
    margin-left: -26px;
  }
}

#sellPreviewStage .sell-preview-market.is-cover-editor-preview:not(.is-double):not(.is-wall) .market-product-photo-frame {
  aspect-ratio: var(--sell-cover-frame-ratio, 1 / 1);
}

#sellPreviewStage .sell-preview-market:not(.is-double):not(.is-wall) .market-product-photo-slide > img {
  object-position: 50% 50%;
}

.sell-preview-market .product-card {
  user-select: none;
}

.sell-preview-market .sell-preview-photo-collage-slide {
  background: var(--sell-cover-background-color, #fff);
}

.sell-preview-market .sell-preview-photo-collage {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  gap: 2px;
  overflow: hidden;
  background: var(--sell-cover-background-color, #fff);
}

.sell-preview-market .sell-preview-photo-collage.is-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sell-preview-market .sell-preview-photo-collage.is-five {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sell-preview-market .sell-preview-photo-collage-column {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: 2px;
  overflow: hidden;
}

.sell-preview-market .sell-preview-photo-collage-column.is-left {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sell-preview-market .sell-preview-photo-collage-column.is-right {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.sell-preview-market .sell-preview-photo-collage-tile {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--sell-cover-background-color, #f3eee8);
}

.sell-preview-market .sell-preview-photo-collage-tile img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 50%;
}

.sell-preview-inert-favorite {
  pointer-events: none;
}

.sell-preview-detail-card {
  width: calc(100% + 52px);
  margin-left: -26px;
  border-radius: 30px;
}

.sell-preview-detail-photo-track {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.sell-preview-detail-photo-track::-webkit-scrollbar {
  display: none;
}

.sell-preview-detail-photo-slide {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 0 0 100%;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: #fff;
}

.sell-preview-detail-card .sell-preview-photo-collage,
.sell-preview-detail-card .sell-preview-photo-collage-tile {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--sell-cover-background-color, #fff);
}

.sell-preview-detail-card .sell-preview-photo-collage-tile {
  display: block;
}

.sell-preview-detail-card .sell-preview-photo-collage-tile img,
.sell-preview-detail-photo-slide.has-adjustable-cover > img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
}

.sell-preview-detail-photo-slide.has-adjustable-cover {
  background: var(--sell-cover-background-color, #fff);
}

.sell-preview-detail-photo-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: cover;
}

.sell-preview-detail-photo-dots {
  z-index: 5;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.full-width {
  width: 100%;
}

.sell-submit-area {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.sell-confirmation-copy {
  display: inline-block;
  max-width: 100%;
  text-align: left;
}

.sell-confirmation-copy > span {
  display: block;
  white-space: nowrap;
}

.primary-action.sell-submit-button:disabled,
.sell-submit-button.is-busy,
.purchase-interest-dialog .primary-action.is-busy,
.purchase-interest-dialog .primary-action.is-submitted,
.detail-main-action.is-busy,
.detail-main-action.is-inquiry-sent:disabled {
  cursor: default;
  opacity: 1;
}

.sell-submit-button.is-busy,
.purchase-interest-dialog .primary-action.is-busy,
.detail-main-action.is-busy {
  color: #fff;
  background: linear-gradient(135deg, #ffc06d, var(--brand), var(--brand-dark));
  box-shadow: 0 16px 30px rgba(230, 126, 34, 0.18);
  animation: sellSubmitBusyPulse 2000ms ease-in-out infinite;
}

.purchase-interest-dialog .primary-action.is-submitted,
.detail-main-action.is-inquiry-sent:disabled {
  color: #fff;
  background: linear-gradient(135deg, #ffc06d, var(--brand), var(--brand-dark));
  box-shadow: 0 16px 30px rgba(230, 126, 34, 0.18);
}

@keyframes sellSubmitBusyPulse {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.08);
  }
}

.sell-member-toast {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  left: 0;
  z-index: 4;
  display: grid;
  min-height: 54px;
  place-items: center;
  padding: 12px 18px;
  border: 1px solid rgba(232, 137, 39, 0.82);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 230, 191, 0.98), rgba(255, 199, 126, 0.98));
  color: #7d3f0a;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.35;
  text-align: center;
  box-shadow:
    0 18px 34px rgba(141, 86, 24, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.96);
}

.sell-member-toast.is-showing {
  animation: sellFloatNotice 2.9s ease both;
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 14px 14px calc(16px + var(--safe-bottom));
  background: rgba(50, 37, 26, 0.34);
  backdrop-filter: blur(3px);
}

.confirm-overlay[hidden] {
  display: none;
}

.confirm-dialog {
  width: min(100%, 360px);
  max-height: min(78vh, 420px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 192, 109, 0.24), transparent 120px),
    #fffdf8;
  box-shadow: 0 22px 68px rgba(50, 37, 26, 0.22);
}

.confirm-dialog [hidden] {
  display: none !important;
}

#confirmDialogKicker {
  font-size: 1.28rem;
}

.confirm-dialog h2 {
  margin: 8px 0;
  font-size: 1.28rem;
  font-weight: 950;
  line-height: 1.2;
}

.confirm-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.55;
  white-space: pre-line;
}

.confirm-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.confirm-dialog-actions button {
  min-height: 46px;
  border-radius: 16px;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 1.18rem;
  font-weight: 950;
  white-space: nowrap;
}

.confirm-dialog-actions.is-wide-accept {
  grid-template-columns: 1.12fr 0.88fr;
}

.product-report-dialog {
  width: min(100%, 390px);
  max-height: min(86vh, 620px);
}

#productReportDialogPrompt {
  color: var(--ink);
}

.product-report-reasons {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.product-report-reason {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 9px 12px;
  color: var(--ink);
  background: #fff;
  font-weight: 850;
  line-height: 1.4;
  cursor: pointer;
}

.product-report-reason input {
  width: 19px;
  height: 19px;
  min-height: 19px;
  flex: 0 0 19px;
  margin: 0;
  border-radius: 50%;
  padding: 0;
  background: #fff;
  accent-color: var(--brand-dark);
}

.product-report-notice {
  margin-top: 14px !important;
  color: #8a5b28 !important;
}

.product-report-dialog-message {
  min-height: 1.5em;
  margin-top: 8px !important;
}

.product-report-dialog-message[data-state="loading"] {
  color: #9a5f18;
}

.product-report-dialog-message[data-state="error"] {
  color: #b0442e;
}

.product-report-notice-dialog {
  position: relative;
  width: min(100%, 360px);
  padding: 20px 18px 22px;
}

.product-report-notice-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-grid;
  width: 42px;
  min-height: 42px;
  place-items: center;
  border: 1px solid rgba(226, 150, 64, 0.32);
  border-radius: 50%;
  padding: 0;
  color: #b85d14;
  background: rgba(255, 249, 239, 0.96);
  box-shadow: 0 10px 22px rgba(145, 89, 30, 0.12);
}

.product-report-notice-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.product-report-notice-dialog .draft-pill {
  margin-right: 48px;
}

.product-report-notice-dialog h2 {
  margin-right: 46px;
}

.legal-terms-overlay {
  align-items: center;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

.legal-terms-dialog {
  width: min(100%, 390px);
  max-height: min(86vh, 680px);
  padding: 18px 18px 20px;
}

.legal-terms-header {
  position: sticky;
  top: -18px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -18px -18px 12px;
  padding: 16px 18px 10px;
  background: linear-gradient(180deg, #fffdf8 72%, rgba(255, 253, 248, 0));
}

.legal-terms-close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(230, 126, 34, 0.24);
  border-radius: 999px;
  color: #8b4b12;
  background: rgba(255, 255, 255, 0.88);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.legal-terms-dialog h2 {
  margin: 0 0 8px;
  font-size: 1.24rem;
  line-height: 1.28;
}

.legal-terms-date {
  margin-bottom: 16px;
  color: #168f7e;
  font-size: 0.92rem;
}

.legal-terms-content {
  display: grid;
  gap: 12px;
}

.legal-terms-content h3,
.legal-terms-content h4,
.legal-terms-content p,
.legal-terms-content ul {
  margin: 0;
}

.legal-terms-content h3 {
  margin-top: 8px;
  color: #2f251f;
  font-size: 1.04rem;
  font-weight: 950;
  line-height: 1.42;
}

.legal-terms-content h4 {
  color: #8b4b12;
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1.4;
}

.legal-terms-content p,
.legal-terms-content li {
  color: #5f554d;
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.72;
}

.legal-terms-content ul {
  display: grid;
  gap: 6px;
  padding-left: 1.2em;
}

.legal-terms-company {
  margin-top: 8px !important;
  color: #2f7f73 !important;
  font-weight: 950 !important;
}

.satisfaction-dialog {
  width: min(100%, 380px);
}

.satisfaction-dialog[data-state="saving"] button:disabled,
.satisfaction-dialog[data-state="success"] button:disabled {
  cursor: default;
  opacity: 1;
}

.satisfaction-dialog[data-state="saving"] .primary-action:disabled {
  animation: sellSubmitBusyPulse 2000ms ease-in-out infinite;
}

.conversation-stars.satisfaction-dialog-stars {
  justify-content: center;
  gap: 4px;
  margin: 18px 0 12px;
}

.conversation-stars.satisfaction-dialog-stars button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.conversation-stars.satisfaction-dialog-stars .conversation-star-icon {
  width: 36px;
  height: 36px;
}

.confirm-dialog .satisfaction-dialog-selection {
  min-height: 1.55em;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 950;
  text-align: center;
}

.confirm-dialog .satisfaction-dialog-selection[data-state="unchanged"] {
  color: #a96b1d;
}

.confirm-dialog .satisfaction-dialog-selection[data-state="changed"] {
  color: #168f7e;
}

.confirm-dialog .satisfaction-dialog-notice {
  margin-top: 12px;
  border-left: 3px solid rgba(42, 157, 143, 0.62);
  padding: 9px 11px;
  color: #147c6f;
  background: rgba(42, 157, 143, 0.08);
  font-weight: 900;
}

.confirm-dialog .satisfaction-dialog-message {
  min-height: 1.45em;
  margin-top: 10px;
  font-weight: 900;
  text-align: center;
}

.confirm-dialog .satisfaction-dialog-message[data-state="error"] {
  color: #b0442e;
}

.cancellation-notice-dialog {
  border-color: rgba(42, 157, 143, 0.38);
  background: #fffdf8;
}

.cancellation-notice-kicker {
  color: #087d70;
  background: #dcf7f1;
}

.cancellation-notice-dialog h2 {
  color: #175f57;
}

.cancellation-notice-status {
  min-height: 1.45em;
  margin-top: 10px !important;
  color: var(--muted) !important;
}

.cancellation-notice-status[data-state="error"] {
  color: #b94b4b !important;
}

.cancellation-notice-status:empty {
  min-height: 0;
  margin-top: 0 !important;
}

.cancellation-notice-actions {
  grid-template-columns: 1fr;
}

.cancellation-notice-actions .primary-action {
  background: linear-gradient(135deg, #4bc8b1, #168f7e);
  box-shadow: 0 10px 20px rgba(22, 143, 126, 0.2);
}

.trade-confirmation-notice-dialog {
  border: 2px solid #f2b15c;
  background: #fff9f0;
}

.trade-confirmation-notice-kicker {
  color: #93510f;
  background: #ffe5c4;
}

.trade-confirmation-notice-dialog h2 {
  color: #d96b12;
}

.trade-confirmation-notice-status {
  min-height: 1.45em;
  margin-top: 10px !important;
  color: var(--muted) !important;
}

.trade-confirmation-notice-status[data-state="error"] {
  color: #b94b4b !important;
}

.trade-confirmation-notice-status:empty {
  min-height: 0;
  margin-top: 0 !important;
}

.trade-confirmation-notice-actions {
  grid-template-columns: 1fr;
}

.trade-confirmation-notice-actions .primary-action {
  background: linear-gradient(135deg, #ffb55f, #e87716);
  box-shadow: 0 10px 20px rgba(232, 119, 22, 0.2);
}

.purchase-interest-dialog {
  max-height: min(86vh, 590px);
}

.purchase-interest-product {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 12px 0 16px;
}

.purchase-interest-product img,
.purchase-interest-product-fallback {
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.purchase-interest-product-fallback {
  display: grid;
  place-items: center;
  color: var(--brand);
  background: #fff8ef;
  font-size: 0.82rem;
  font-weight: 950;
}

.purchase-interest-product-fallback[hidden] {
  display: none;
}

.purchase-interest-product strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 1.06rem;
  line-height: 1.35;
}

.purchase-interest-dialog form,
.purchase-interest-dialog label {
  display: grid;
}

.purchase-interest-dialog label {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 900;
}

.purchase-interest-dialog textarea {
  width: 100%;
  min-height: 128px;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  color: var(--ink);
  background: #fffaf3;
  font: inherit;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.55;
}

.purchase-interest-dialog textarea:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(42, 157, 143, 0.15);
}

.purchase-interest-message-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.4;
}

.purchase-interest-dialog-message {
  min-height: 0;
  margin: 0 !important;
  color: #b0442e !important;
  font-size: 0.84rem !important;
}

.purchase-interest-dialog-message:empty {
  display: none;
}

.purchase-interest-dialog-message:not(:empty) {
  margin-top: 6px !important;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px 14px calc(18px + var(--safe-bottom));
  background: rgba(50, 37, 26, 0.72);
  backdrop-filter: blur(8px);
}

.photo-lightbox[hidden] {
  display: none;
}

.photo-lightbox-dialog {
  position: relative;
  width: min(100%, 430px);
  max-height: min(86vh, 720px);
  border: 1px solid rgba(255, 227, 195, 0.8);
  border-radius: 26px;
  overflow: hidden;
  background: #fffdf8;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.photo-lightbox-image-stage {
  position: relative;
  width: 100%;
  height: min(82vh, 720px);
  max-height: 86vh;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 192, 109, 0.16), transparent 150px),
    #221811;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow: hidden;
}

.photo-lightbox-image-stage img {
  object-fit: contain;
}

.photo-lightbox-desktop-zone {
  display: none;
}

.photo-lightbox-return {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: inline-flex;
  min-width: 94px;
  height: 44px;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 999px;
  color: #b8b8b8;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.photo-lightbox-return-icon {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.photo-pagination {
  position: absolute;
  left: 50%;
  bottom: 13px;
  z-index: 5;
  display: flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(42, 38, 35, 0.62);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  transform: translateX(-50%);
}

.photo-pagination[hidden] {
  display: none;
}

.photo-pagination-button {
  display: grid;
  width: 22px;
  height: 20px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.photo-pagination-button::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.52);
  content: "";
  transition: background-color 140ms ease, transform 140ms ease;
}

.photo-pagination-button.is-active::before {
  background: #dedede;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  transform: scale(1.22);
}

.detail-photo-pagination {
  bottom: 0;
  min-height: 26px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.detail-photo-pagination::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(42, 38, 35, 0.62);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  content: "";
  pointer-events: none;
}

.detail-photo-pagination .photo-pagination-button {
  position: relative;
  height: 26px;
  padding-top: 8px;
}

@media (max-width: 600px) {
  .photo-lightbox {
    padding-right: 0;
    padding-left: 0;
  }

  .photo-lightbox-dialog {
    width: 100%;
    max-width: none;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .photo-lightbox-return {
    right: 26px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .photo-lightbox {
    --photo-lightbox-desktop-dialog-width: min(calc(100vw - 112px), 920px);
  }

  .detail-photo-stage:hover img {
    filter: saturate(1.03) contrast(1.02);
  }

  .photo-lightbox-dialog {
    width: var(--photo-lightbox-desktop-dialog-width);
    max-height: min(90vh, 780px);
  }

  .photo-lightbox-image-stage {
    height: min(86vh, 760px);
    max-height: 90vh;
  }

  .photo-lightbox-return:hover,
  .photo-lightbox-return:focus-visible {
    color: #cecece;
    background: transparent;
    box-shadow: none;
  }

  .photo-lightbox-return {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }

  .photo-lightbox-double-tap-label {
    display: none;
  }

  .photo-lightbox-return:focus-visible {
    border-radius: 50%;
    outline: 2px solid rgba(206, 206, 206, 0.78);
    outline-offset: 3px;
    text-decoration: none;
  }

  .photo-lightbox-desktop-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    width: 50%;
    padding: 0;
    border: 0;
    color: #a8a8a8;
    background: transparent;
    cursor: pointer;
  }

  .photo-lightbox-desktop-zone[hidden] {
    display: none;
  }

  .photo-lightbox-desktop-zone.is-previous {
    left: 0;
  }

  .photo-lightbox-desktop-zone.is-next {
    right: 0;
  }

  .photo-lightbox-desktop-zone-icon {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateY(-50%);
    transition: color 140ms ease, transform 140ms ease;
  }

  .photo-lightbox-desktop-zone.is-previous .photo-lightbox-desktop-zone-icon {
    left: calc((100vw - var(--photo-lightbox-desktop-dialog-width)) / 4 - 18px);
  }

  .photo-lightbox-desktop-zone.is-next .photo-lightbox-desktop-zone-icon {
    right: calc((100vw - var(--photo-lightbox-desktop-dialog-width)) / 4 - 18px);
  }

  .photo-lightbox-desktop-zone:hover,
  .photo-lightbox-desktop-zone:focus-visible {
    color: #c6c6c6;
    outline: 0;
  }

  .photo-lightbox-desktop-zone.is-previous:hover .photo-lightbox-desktop-zone-icon,
  .photo-lightbox-desktop-zone.is-previous:focus-visible .photo-lightbox-desktop-zone-icon {
    transform: translate(-2px, -50%);
  }

  .photo-lightbox-desktop-zone.is-next:hover .photo-lightbox-desktop-zone-icon,
  .photo-lightbox-desktop-zone.is-next:focus-visible .photo-lightbox-desktop-zone-icon {
    transform: translate(2px, -50%);
  }
}

@keyframes sellFloatNotice {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }

  18%,
  76% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
}

@keyframes marketResultFloatNotice {
  0% {
    opacity: 0;
    transform: translateY(-38%) scale(0.96);
  }

  16% {
    opacity: 0.94;
    transform: translateY(-50%) scale(1);
  }

  48% {
    opacity: 0.9;
    transform: translateY(-50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-56%) scale(0.985);
  }
}

.primary-action {
  color: #fff;
  background: linear-gradient(135deg, #ffc06d, var(--brand), var(--brand-dark));
  box-shadow: 0 16px 30px rgba(230, 126, 34, 0.18);
}

.primary-action:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.center-text {
  text-align: center;
}

.message-item,
.login-panel,
.member-card {
  padding: 20px;
}

.login-panel {
  display: grid;
  gap: 16px;
  max-width: 100%;
  overflow-x: hidden;
}

.guest-auth-card {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(230, 126, 34, 0.09);
}

.guest-auth-card {
  padding: 20px;
}

.register-draft-card {
  margin-top: 0;
}

.line-webview-card {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(230, 126, 34, 0.28);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(237, 252, 245, 0.96));
  box-shadow: 0 14px 28px rgba(34, 139, 84, 0.09);
}

.line-webview-card[hidden] {
  display: none;
}

.line-webview-card p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.line-webview-card .draft-pill {
  max-width: 100%;
  height: auto;
  min-height: 40px;
  padding-top: 7px;
  padding-bottom: 7px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.compact-title-row {
  margin-bottom: 14px;
}

.compact-title-row h2 {
  font-size: 1.24rem;
}

#registerDraftTitle {
  font-size: 1.24rem;
}

.register-form {
  display: grid;
  gap: 14px;
}

.message-item strong {
  display: block;
  margin-bottom: 7px;
  font-size: 1.1rem;
}

.message-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.message-title-row strong {
  min-width: 0;
  margin-bottom: 0;
}

.message-title-row .draft-pill {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.86rem;
  white-space: nowrap;
}

.purchase-intent-message {
  border-color: rgba(247, 160, 78, 0.5);
  background:
    radial-gradient(circle at 94% 8%, rgba(255, 192, 109, 0.22), transparent 100px),
    var(--surface);
}

.purchase-intent-message.is-unread {
  border-width: 2px;
  border-color: rgba(42, 157, 143, 0.7);
  box-shadow: 0 14px 30px rgba(42, 157, 143, 0.15);
}

.purchase-intent-message.is-buyer-submitted-unread {
  border-color: rgba(42, 157, 143, 0.9);
  background:
    radial-gradient(circle at 94% 8%, rgba(42, 157, 143, 0.18), transparent 100px),
    var(--surface);
}

[data-buyer-submitted-purchase-intent-card] {
  cursor: pointer;
}

[data-buyer-submitted-purchase-intent-card]:focus-visible {
  outline: 3px solid rgba(42, 157, 143, 0.32);
  outline-offset: 3px;
}

.conversation-card-layout {
  display: grid;
  gap: 14px;
}

.conversation-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.conversation-card-layout.has-thumb .conversation-card-header {
  grid-template-columns: 92px minmax(0, 1fr) auto;
}

.conversation-card-thumb {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  height: 92px;
  aspect-ratio: 1;
  border: 1px solid rgba(116, 92, 74, 0.14);
  border-radius: 8px;
  background: #f7efe5;
  object-fit: cover;
}

.conversation-card-body {
  min-width: 0;
}

.conversation-summary-head {
  align-items: flex-start;
  margin-bottom: 0;
}

.conversation-summary-main {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: #75685d;
  font-weight: 800;
  line-height: 1.45;
}

.conversation-summary-main span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.conversation-summary-main strong {
  display: inline;
  margin: 0;
  color: #312821;
  font-size: 1rem;
}

.conversation-summary-badges {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: 0 0 auto;
}

.conversation-detail-summary,
.conversation-party-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0;
  color: #75685d;
  font-weight: 800;
  line-height: 1.45;
}

.conversation-detail-summary div,
.conversation-party-summary div {
  display: grid;
  min-width: 0;
  column-gap: 4px;
}

.conversation-detail-summary div {
  grid-template-columns: 5.25em minmax(0, 1fr);
}

.conversation-party-summary div {
  grid-template-columns: 3.25em minmax(0, 1fr);
}

.conversation-detail-summary dt,
.conversation-detail-summary dd,
.conversation-party-summary dt,
.conversation-party-summary dd {
  margin: 0;
}

.conversation-detail-summary dt,
.conversation-party-summary dt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.15em;
  color: #312821;
  font-weight: 900;
  white-space: nowrap;
}

.conversation-detail-summary dt span,
.conversation-party-summary dt span {
  display: block;
  text-align: justify;
  text-align-last: justify;
}

.conversation-detail-summary dt::after,
.conversation-party-summary dt::after {
  content: "：";
}

.conversation-detail-summary dd,
.conversation-party-summary dd {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.conversation-detail-summary div:first-child dd {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.conversation-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.conversation-card-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.conversation-card-actions time {
  color: #716154;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .conversation-card-layout.has-thumb .conversation-card-header {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .conversation-card-thumb {
    width: 82px;
    min-width: 82px;
    max-width: 82px;
    height: 82px;
  }

  .conversation-summary-badges {
    grid-column: 2;
    justify-items: start;
    grid-template-columns: repeat(2, max-content);
  }

  .conversation-card-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .conversation-card-actions {
    justify-items: start;
  }
}

.conversation-reply-state {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  margin-top: 10px;
  border-radius: 999px;
  padding: 0 11px;
  background: #f5efe6;
  color: #716154;
  font-size: 0.86rem;
  font-weight: 900;
}

.conversation-reply-state.is-unread {
  background: #e6f7f2;
  color: #167c70;
  font-size: 0.94rem;
}

.conversation-summary-badges .conversation-reply-state {
  margin-top: 0;
}

.message-action-button {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border-radius: 16px;
  font-size: 1rem;
}

.message-action-button:disabled {
  cursor: default;
}

.message-empty {
  border-style: dashed;
}

.message-item time {
  display: block;
  margin-top: 8px;
  color: #8b7c72;
  font-weight: 800;
}

.message-summary-card,
.message-intent-card {
  border-radius: 20px;
  padding: 14px;
}

.message-summary-card {
  cursor: pointer;
}

.message-summary-card:focus-visible {
  outline: 3px solid rgba(42, 157, 143, 0.42);
  outline-offset: 2px;
}

.message-summary-card.is-unread {
  border-width: 2px;
  border-color: rgba(42, 157, 143, 0.7);
  box-shadow: 0 12px 24px rgba(42, 157, 143, 0.13);
}

.message-summary-card-layout {
  display: grid;
  gap: 12px;
}

.message-summary-card-layout.has-thumb {
  grid-template-columns: 64px minmax(0, 1fr);
}

.message-summary-thumb {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(116, 92, 74, 0.14);
  border-radius: 8px;
  background: #f7efe5;
  object-fit: cover;
}

.message-summary-card-content {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.message-summary-head,
.message-intent-head,
.message-summary-footer,
.message-intent-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.message-summary-head,
.message-intent-head {
  flex-wrap: wrap;
}

.message-summary-title,
.message-intent-head strong {
  min-width: 0;
  margin: 0;
  color: #312821;
  font-size: 1rem;
  line-height: 1.35;
}

.message-summary-status,
.message-intent-head .draft-pill {
  min-height: 26px;
  padding: 0 9px;
  font-size: 0.74rem;
}

.message-summary-status.is-message-board {
  font-size: 0.88rem;
  font-weight: 800;
}

.message-summary-counterpart,
.message-summary-meta,
.message-intent-copy {
  min-width: 0;
  color: #75685d;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.message-intent-inquiry {
  margin-top: 9px;
  border-left: 3px solid rgba(42, 157, 143, 0.55);
  padding: 8px 10px;
  color: #564940;
  background: rgba(239, 250, 247, 0.76);
}

.message-intent-inquiry strong {
  display: block;
  margin-bottom: 3px;
  color: #168f7e;
  font-size: 0.82rem;
}

.message-intent-inquiry p {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.5;
  white-space: pre-wrap;
}

.message-summary-preview {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: #56483d;
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.message-summary-footer {
  align-items: flex-end;
  margin-top: 3px;
}

.message-summary-reply-state {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  color: #716154;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.35;
}

.message-summary-new-pill {
  display: inline-grid;
  flex: 0 0 auto;
  min-height: 24px;
  place-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: #f05d8b;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.message-summary-reply-state.is-unread {
  color: #167c70;
  font-size: 0.92rem;
}

.message-summary-footer time,
.message-intent-footer time {
  margin: 0;
  color: #8b7c72;
  font-size: 0.78rem;
  text-align: right;
  white-space: nowrap;
}

.message-intent-card {
  display: grid;
  gap: 8px;
}

.message-intent-card-layout {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.message-intent-thumb {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(116, 92, 74, 0.14);
  border-radius: 8px;
  background: #f7efe5;
  object-fit: cover;
}

.message-intent-thumb-fallback {
  display: grid;
  place-items: center;
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 950;
}

.message-intent-card-content {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.message-intent-footer {
  align-items: flex-end;
}

.message-intent-footer .message-action-button {
  width: auto;
  min-height: 38px;
  margin: 0;
  border-radius: 12px;
  padding: 0 13px;
  font-size: 0.88rem;
}

@media (max-width: 420px) {
  .message-summary-card-layout.has-thumb {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
  }

  .message-summary-thumb {
    width: 56px;
    height: 56px;
  }

  .message-intent-card-layout {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
  }

  .message-intent-thumb {
    width: 56px;
    height: 56px;
  }

  .message-summary-footer,
  .message-intent-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .message-summary-footer time,
  .message-intent-footer time {
    text-align: left;
  }

  .message-intent-footer .message-action-button {
    width: 100%;
  }
}

.compact-message-action {
  min-height: 42px;
  margin-top: 12px;
  border-radius: 14px;
  padding: 0 16px;
  font-size: 0.92rem;
}

.conversation-thread {
  position: relative;
  display: grid;
  gap: 14px;
}

.conversation-thread-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(230, 126, 34, 0.08);
}

.conversation-back-action {
  min-width: 56px;
  min-height: 56px;
  margin-top: 0;
  padding: 0 12px;
}

.conversation-thread-summary {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.conversation-thread-product {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.conversation-thread-thumb {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  object-fit: cover;
  background: #fff7ef;
  border: 1px solid #f7d8b7;
}

.conversation-thread-thumb.placeholder {
  display: grid;
  place-items: center;
  color: #f28a2e;
  font-size: 0.72rem;
  font-weight: 900;
}

.conversation-thread-product-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.conversation-thread-product-copy strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1f1f1f;
  font-size: 1rem;
}

.conversation-thread-product-copy span {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.conversation-thread-parties {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin: 0;
}

.conversation-thread-parties div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.conversation-thread-parties dt,
.conversation-thread-parties dd {
  margin: 0;
}

.conversation-thread-parties dt {
  color: #7d6b5b;
  font-size: 0.86rem;
  font-weight: 900;
}

.conversation-thread-parties dt::after {
  content: ":";
}

.conversation-thread-parties dd {
  overflow: hidden;
  color: #4d4d4d;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-thread-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 250px);
  margin-top: 6px;
  justify-self: start;
  justify-items: stretch;
  gap: 10px;
}

.conversation-thread-actions .compact-message-action {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin-top: 0;
  padding-right: 8px;
  padding-left: 8px;
  font-size: 0.88rem;
  line-height: 1.2;
  white-space: nowrap;
}

.conversation-thread-actions > :only-child {
  grid-column: 1 / -1;
  width: auto;
  justify-self: center;
}

.conversation-status-pill {
  display: inline-grid;
  min-height: 38px;
  align-items: center;
  border: 1px solid rgba(125, 107, 91, 0.18);
  border-radius: 999px;
  padding: 0 14px;
  color: #7d6b5b;
  background: #fff3df;
  font-size: 0.88rem;
  font-weight: 950;
  white-space: nowrap;
}

.conversation-status-pill.is-cancelled {
  color: #7a5a36;
  background: #f7ead7;
}

.conversation-help-action {
  position: relative;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.conversation-help-action::after {
  content: attr(data-action-help);
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 10px);
  width: min(250px, calc(100vw - 64px));
  box-sizing: border-box;
  border: 1px solid #f3c894;
  border-radius: 8px;
  padding: 10px 12px;
  color: #66564a;
  background: #fffaf2;
  box-shadow: 0 10px 24px rgba(109, 76, 45, 0.16);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
  pointer-events: none;
}

.conversation-help-action[data-conversation-action="cancel"]::after {
  right: 0;
}

.conversation-help-action:focus-visible::after,
.conversation-help-action.is-help-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .conversation-help-action:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.conversation-thread-actions > .conversation-help-action:only-child::after {
  right: auto;
  left: 50%;
  transform: translate(-50%, 4px);
}

.conversation-thread-actions > .conversation-help-action:only-child:focus-visible::after,
.conversation-thread-actions > .conversation-help-action.is-help-visible:only-child::after {
  transform: translate(-50%, 0);
}

@media (hover: hover) and (pointer: fine) {
  .conversation-thread-actions > .conversation-help-action:only-child:hover::after {
    transform: translate(-50%, 0);
  }
}

.conversation-completion-note,
.conversation-satisfaction {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 253, 248, 0.95);
  box-shadow: 0 10px 24px rgba(230, 126, 34, 0.08);
}

.conversation-completion-note {
  margin: 0;
  padding: 14px 16px;
  color: #7a5a36;
  font-weight: 900;
  line-height: 1.55;
}

.conversation-transaction-confirmation,
.conversation-transaction-completion {
  display: grid;
  gap: 12px;
  border: 1px solid #edc18d;
  border-radius: 8px;
  padding: 16px;
  background: #fff9f0;
  box-shadow: 0 10px 24px rgba(230, 126, 34, 0.08);
}

.conversation-transaction-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.conversation-transaction-heading strong {
  color: #3d332a;
  font-size: 1.08rem;
  font-weight: 950;
}

.conversation-transaction-heading span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  color: #93510f;
  background: #ffe5c4;
  font-size: 0.75rem;
  font-weight: 900;
}

.conversation-transaction-confirmation p {
  margin: 0;
  color: #66594e;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.5;
}

.conversation-transaction-primary {
  width: 100%;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 950;
}

.conversation-transaction-primary {
  min-height: 52px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #ffb55f, #e87716);
  box-shadow: 0 8px 18px rgba(232, 119, 22, 0.2);
}

.conversation-transaction-waiting {
  display: grid;
  gap: 5px;
  border-left: 4px solid #237f77;
  padding: 4px 0 4px 12px;
}

.conversation-transaction-waiting strong {
  color: #237f77;
}

.conversation-transaction-waiting span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.45;
}

.conversation-transaction-completion h2,
.conversation-transaction-completion p {
  margin: 0;
}

.conversation-transaction-completion h2 {
  color: #e87716;
  font-size: 1.35rem;
}

.conversation-transaction-completion-lead {
  color: #3e342c;
  font-size: 1rem;
  font-weight: 950;
}

.conversation-transaction-timeline {
  display: grid;
  gap: 7px;
  border-top: 1px solid #efd5b5;
  border-bottom: 1px solid #efd5b5;
  padding: 11px 0;
}

.conversation-transaction-timeline span {
  color: #54483e;
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.5;
}

.conversation-transaction-contact-until {
  color: #237f77;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.5;
}

.conversation-transaction-rating-invite {
  display: grid;
  gap: 2px;
  color: #5f5349;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.55;
  text-align: left;
}

.conversation-transaction-rating-invite span {
  display: block;
}

.conversation-satisfaction {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.conversation-satisfaction-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.conversation-satisfaction-row strong,
.conversation-satisfaction-row span {
  display: block;
}

.conversation-satisfaction-row strong {
  color: #3d332a;
  font-size: 0.98rem;
  font-weight: 950;
}

.conversation-satisfaction-row span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  transition: color 0.18s ease;
}

.conversation-satisfaction-row.is-saving span {
  color: #a96b1d;
}

.conversation-satisfaction-row.is-saved span {
  color: #168f7e;
}

.conversation-satisfaction-row.is-error span {
  color: #b94b4b;
}

.conversation-stars {
  --star-highlight: #fff08a;
  --star-face: #f7b126;
  --star-depth: #c66a08;
  --star-outline: #e28a21;
  --star-shadow: rgba(177, 91, 4, 0.34);
  --star-glow: rgba(247, 177, 38, 0.42);
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--star-face);
  font-size: 1.9rem;
  line-height: 1;
  white-space: nowrap;
}

.conversation-stars button,
.conversation-stars > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  flex: 0 0 40px;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
  transform: translateZ(0);
  transition: color 0.16s ease, filter 0.16s ease, transform 0.16s ease;
}

.conversation-stars button {
  border: 0;
  border-radius: 50%;
  padding: 0;
  color: inherit;
  background: transparent;
}

.conversation-stars .is-filled {
  color: var(--star-outline);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.74)) drop-shadow(0 2px 2px var(--star-shadow));
}

.conversation-stars .is-empty {
  color: var(--star-outline);
  filter: drop-shadow(0 1px 1px rgba(97, 67, 35, 0.18));
}

.conversation-star-icon {
  display: block;
  width: 33px;
  height: 33px;
  overflow: visible;
  pointer-events: none;
  transform: scale(1.06, 0.96);
  transform-origin: center;
}

.conversation-stars.is-editable button:not(:disabled) {
  cursor: pointer;
}

.conversation-stars.is-editable button:not(:disabled):hover,
.conversation-stars.is-editable button.is-selected-star {
  transform: scale(1.14);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.78)) drop-shadow(0 5px 5px var(--star-glow));
}

.conversation-stars.is-rating-pulse button.is-filled,
.conversation-stars.is-rating-pulse button.is-selected-star {
  animation: satisfaction-star-pop 240ms ease-out both;
}

.conversation-stars.is-rating-pulse button:nth-child(2) {
  animation-delay: 24ms;
}

.conversation-stars.is-rating-pulse button:nth-child(3) {
  animation-delay: 48ms;
}

.conversation-stars.is-rating-pulse button:nth-child(4) {
  animation-delay: 72ms;
}

.conversation-stars.is-rating-pulse button:nth-child(5) {
  animation-delay: 96ms;
}

.conversation-stars.is-newly-revealed > span {
  animation: satisfaction-counterpart-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.conversation-stars.is-newly-revealed > span:nth-child(2) {
  animation-delay: 68ms;
}

.conversation-stars.is-newly-revealed > span:nth-child(3) {
  animation-delay: 136ms;
}

.conversation-stars.is-newly-revealed > span:nth-child(4) {
  animation-delay: 204ms;
}

.conversation-stars.is-newly-revealed > span:nth-child(5) {
  animation-delay: 272ms;
}

@keyframes satisfaction-star-pop {
  0% {
    transform: scale(0.88);
  }
  58% {
    transform: scale(1.2);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.78)) drop-shadow(0 6px 6px var(--star-glow));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.74)) drop-shadow(0 2px 2px var(--star-shadow));
  }
}

@keyframes satisfaction-counterpart-reveal {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.82);
  }
  62% {
    opacity: 1;
    transform: translateY(-1px) scale(1.1);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.78)) drop-shadow(0 6px 6px var(--star-glow));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-section-chevron,
  .conversation-stars button,
  .conversation-stars > span {
    transition: none;
  }

  .conversation-stars.is-rating-pulse button.is-filled,
  .conversation-stars.is-rating-pulse button.is-selected-star,
  .conversation-stars.is-newly-revealed > span {
    animation: none;
  }
}

.conversation-stars.is-own-rating {
  --star-highlight: #fff08a;
  --star-face: #f7b126;
  --star-depth: #c66a08;
  --star-outline: #e28a21;
  --star-shadow: rgba(177, 91, 4, 0.34);
  --star-glow: rgba(247, 177, 38, 0.42);
}

.conversation-stars.is-counterpart-rating {
  --star-highlight: #b0ffe9;
  --star-face: #35d7bc;
  --star-depth: #078b78;
  --star-outline: #26cdb0;
  --star-shadow: rgba(7, 139, 120, 0.34);
  --star-glow: rgba(53, 215, 188, 0.42);
}

.conversation-stars button:focus-visible {
  outline: 3px solid rgba(247, 160, 78, 0.34);
  outline-offset: 2px;
}

.conversation-stars button:disabled {
  opacity: 0.62;
  cursor: wait;
}

@media (max-width: 430px) {
  .conversation-satisfaction-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.conversation-bubbles {
  display: grid;
  gap: 10px;
}

.conversation-bubble {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 20px 20px 20px 8px;
  padding: 12px 14px;
  border-color: rgba(42, 157, 143, 0.35);
  background: #effaf7;
  box-shadow: 0 8px 20px rgba(230, 126, 34, 0.07);
}

.conversation-bubble.is-own {
  justify-self: stretch;
  border-radius: 20px 20px 8px 20px;
  border-color: #e8caa5;
  background: #fffaf3;
}

.conversation-bubble.conversation-system-event {
  border-radius: 8px;
  border-color: #b9ddd8;
  background: #e9f6f3;
  color: #225f59;
  text-align: center;
}

.conversation-system-event strong {
  color: #237f77;
}

.conversation-system-event p {
  font-size: 1.125rem;
  font-weight: 800;
}

.conversation-bubble.conversation-system-event--completion-success {
  border-width: 2px;
  border-color: #f2b15c;
  background: #fff9f0;
  color: #e87716;
}

.conversation-system-event--completion-success strong {
  color: #d96b12;
}

.conversation-system-event--completion-success time {
  color: #9a704e;
}

.conversation-initial-inquiry {
  border-style: dashed;
}

.conversation-bubble strong {
  display: block;
  margin-bottom: 5px;
  font-size: 0.86rem;
}

.conversation-bubble p {
  margin: 0;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.conversation-bubble time {
  display: block;
  margin-top: 6px;
  color: #8b7c72;
  font-size: 0.78rem;
  font-weight: 800;
}

.conversation-compose {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  background: var(--surface);
}

.conversation-compose textarea {
  min-height: 88px;
  resize: vertical;
}

.conversation-compose-message {
  min-height: 1.4em;
  margin: -2px 2px 0;
  color: #8b7c72;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.4;
}

.conversation-compose-message:empty {
  display: none;
}

.conversation-compose-message[data-state="error"] {
  color: #b0442e;
}

.conversation-compose-capacity {
  margin: -2px 2px 0;
  color: #8b7c72;
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.45;
}

.conversation-compose-capacity:empty {
  display: none;
}

.conversation-compose-capacity[data-state="warning"] {
  color: #9a5f21;
}

.conversation-compose-capacity[data-state="limit"] {
  color: #b0442e;
}

.conversation-closed-note {
  margin: 0;
  color: #8b7c72;
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.5;
}

.conversation-compose-actions {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 10px;
  align-items: center;
}

.conversation-compose button {
  min-height: 46px;
}

.conversation-check-action {
  position: relative;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #45c4a8, #168f7e);
  color: #fff;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 1.04rem;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(42, 157, 143, 0.18);
}

.conversation-satisfaction-reveal-action {
  width: 212px;
  min-width: 212px;
  min-height: 46px;
  justify-self: end;
  transition: box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.conversation-satisfaction-reveal-action:not(:disabled):active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 6px 14px rgba(42, 157, 143, 0.16);
}

.conversation-satisfaction-reveal-action[aria-busy="true"] {
  cursor: pointer;
}

.conversation-check-action.has-new-message::after {
  position: absolute;
  top: -8px;
  right: -5px;
  display: inline-grid;
  min-width: 29px;
  min-height: 29px;
  place-items: center;
  border: 3px solid #fffaf3;
  border-radius: 999px;
  padding: 0 6px;
  background: #f05d8b;
  color: #fff;
  content: "新";
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 5px 13px rgba(240, 93, 139, 0.28);
  pointer-events: none;
}

@media (max-width: 430px) {
  .conversation-satisfaction-reveal-action {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}

.conversation-send-action {
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 1.04rem;
  white-space: nowrap;
}

.conversation-check-hint {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: calc((100% - 10px) / 2);
  color: #78cfc2;
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.15;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  text-align: center;
  text-shadow: 0 2px 10px rgba(255, 250, 243, 0.9);
}

.conversation-check-hint.is-visible {
  animation:
    conversationCheckHintRise 2400ms cubic-bezier(0.37, 0, 0.63, 1) both,
    conversationCheckHintFade 2400ms linear both;
}

@keyframes conversationCheckHintRise {
  0% {
    transform: translateY(16px);
  }

  100% {
    transform: translateY(-30px);
  }
}

@keyframes conversationCheckHintFade {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
  }
}

.google-button {
  display: flex;
  max-width: 100%;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0 16px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 14px 28px rgba(230, 126, 34, 0.08);
  font-weight: 950;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.google-button::before {
  content: "G";
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: conic-gradient(from -45deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
  font-weight: 950;
  line-height: 1;
}

.google-button[data-state="checking"],
.google-button[data-state="unavailable"],
.google-button[data-state="preview"],
.google-button[data-state="line-webview"] {
  opacity: 0.62;
}

.google-button[data-state="checking"] {
  cursor: wait;
}

.google-button[data-state="unavailable"],
.google-button[data-state="preview"],
.google-button[data-state="line-webview"] {
  cursor: not-allowed;
}

.line-webview-mode .login-panel,
.line-webview-mode .guest-auth-card,
.line-webview-mode .login-form,
.line-webview-mode .register-form,
.line-webview-mode .login-form label,
.line-webview-mode .register-form label,
.line-webview-mode .login-message,
.line-webview-mode .google-button {
  min-width: 0;
  max-width: 100%;
}

.line-webview-mode .login-message {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.line-webview-mode .google-button {
  gap: 10px;
  white-space: normal;
}

.secondary-action {
  display: grid;
  min-height: 54px;
  place-items: center;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: #2b221d;
  font-weight: 950;
  text-decoration: none;
}

.member-panel.is-hidden,
.login-panel.is-hidden {
  display: none;
}

.legal-footer {
  display: grid;
  place-items: center;
  margin: 18px 0 0;
  padding: 8px 4px 0;
}

.legal-link-button {
  min-height: 44px;
  border: 0;
  padding: 6px 8px;
  color: #8a7a6f;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-link-button:focus-visible {
  outline: 3px solid rgba(42, 157, 143, 0.34);
  outline-offset: 2px;
}

.member-card {
  background: linear-gradient(150deg, #fff, #fff0dc);
}

.member-hero-card {
  display: grid;
  gap: 18px;
  overflow: hidden;
  border-radius: 8px;
  padding: 18px;
}

.member-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px 14px;
  align-items: start;
}

.member-hero-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.member-hero-copy > p {
  margin: 0;
  color: var(--brand);
  font-size: 1.22rem;
  font-weight: 950;
  line-height: 1.2;
}

.member-public-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.member-public-identity .member-avatar-button {
  flex: 0 0 auto;
}

.member-public-identity .seller-avatar {
  border-width: 2px;
}

.member-hero-copy h2 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: #34271e;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-status-actions {
  display: grid;
  gap: 8px;
  align-self: start;
  justify-items: end;
}

.member-hero-card .member-status-pill {
  display: none;
}

.member-avatar-button {
  width: max-content;
  height: max-content;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c67c3b;
  overflow: visible;
  box-shadow: none;
}

.member-avatar-button img,
.member-avatar-settings-preview img,
.member-avatar-live-preview img,
.member-avatar-button-content img,
.seller-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-avatar-button-content {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.member-avatar-placeholder {
  font-size: 2.2rem;
  font-weight: 950;
}

.member-avatar-settings-overlay {
  position: fixed;
  inset: 0;
  left: 50%;
  z-index: 1450;
  display: grid;
  width: min(100%, 430px);
  align-items: end;
  padding: max(18px, env(safe-area-inset-top)) 18px max(98px, env(safe-area-inset-bottom));
  background: rgba(82, 60, 47, 0.16);
  transform: translateX(-50%);
}

.member-avatar-settings-overlay.is-hidden,
.member-avatar-settings-overlay[hidden] {
  display: none;
}

.member-avatar-settings {
  position: relative;
  display: grid;
  gap: 16px;
  width: 100%;
  max-height: min(78dvh, 610px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(230, 126, 34, 0.24);
  border-radius: 22px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 46px rgba(103, 60, 34, 0.2);
}

.member-avatar-settings.is-hidden {
  display: none;
}

.member-avatar-settings-head {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  align-items: center;
  padding-right: 38px;
}

.member-avatar-settings-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 40px;
  height: 40px;
  min-height: 40px;
  place-items: center;
  border: 1px solid rgba(230, 126, 34, 0.28);
  border-radius: 50%;
  padding: 0;
  color: #b65d21;
  background: #fff8f1;
  box-shadow: 0 7px 16px rgba(178, 83, 43, 0.1);
}

.member-avatar-settings-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.member-avatar-settings-preview,
.member-avatar-live-preview,
.seller-avatar {
  display: grid;
  place-items: center;
  border: 3px solid #f0a04b;
  border-radius: 999px;
  background: #fffdfa;
  color: #c67c3b;
  overflow: hidden;
  font-weight: 950;
}

.member-avatar-settings-preview {
  width: 82px;
  height: 82px;
  padding: 0;
  cursor: pointer;
}

.member-avatar-settings-head strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 950;
}

.member-avatar-settings-head p {
  margin: 4px 0 0;
  color: #7d6f67;
  font-size: 0.9rem;
  line-height: 1.45;
}

.member-avatar-choice-grid {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 14px;
  align-items: center;
}

.member-avatar-choice-title {
  margin: 0 0 8px;
  color: #7d6f67;
  font-weight: 950;
}

.member-avatar-choice-title:not(:first-child) {
  margin-top: 14px;
}

.member-avatar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.member-avatar-shape-chips {
  display: grid;
  grid-template-columns: repeat(2, max-content);
}

.member-avatar-chip {
  min-height: 40px;
  border: 1px solid #f2cfaa;
  border-radius: 999px;
  padding: 0 14px;
  color: #a45d1a;
  background: #fff3df;
  font-weight: 950;
}

.member-avatar-chip.is-active {
  color: #fff;
  border-color: #f1882f;
  background: #f1882f;
}

.member-avatar-live-preview-wrap {
  min-height: 120px;
  display: grid;
  place-items: center;
}

.member-avatar-live-preview {
  width: 58px;
  height: 58px;
  box-shadow: 0 7px 16px rgba(198, 124, 59, 0.14);
}

@supports ((-webkit-clip-path: url("#loop-avatar-heart-clip")) or (clip-path: url("#loop-avatar-heart-clip"))) {
  .avatar-shape-heart {
    position: relative;
    border: 0;
    -webkit-clip-path: url("#loop-avatar-heart-clip");
    clip-path: url("#loop-avatar-heart-clip");
  }

  .avatar-shape-heart::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='none'%3E%3Cpath d='M12 21.2 10.6 19.9C5.6 15.3 2.3 12.3 2.3 8.6C2.3 5.6 4.7 3.2 7.7 3.2C9.4 3.2 11 4 12 5.3C13 4 14.6 3.2 16.3 3.2C19.3 3.2 21.7 5.6 21.7 8.6C21.7 12.3 18.4 15.3 13.4 19.9L12 21.2Z' fill='none' stroke='%23e45586' stroke-width='6' vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    content: "";
  }
}

.avatar-shape-rounded {
  border-radius: 18px;
}

.avatar-shape-oval {
  border-radius: 999px;
}

.profile-settings-button {
  display: grid;
  width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  border: 1px solid rgba(230, 126, 34, 0.28);
  border-radius: 50%;
  padding: 0;
  color: #8b4b12;
  background: rgba(255, 255, 255, 0.72);
  font-weight: 950;
}

.profile-settings-button[hidden] {
  display: none;
}

.profile-settings-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.profile-settings-form {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(230, 126, 34, 0.24);
  border-radius: 22px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.profile-settings-form.is-hidden {
  display: none;
}

.profile-settings-form label {
  display: grid;
  gap: 8px;
  color: #7d6f67;
  font-weight: 950;
}

.profile-settings-form input::placeholder {
  color: #b4aaa2;
  opacity: 1;
}

.member-onboarding-intro {
  display: grid;
  gap: 6px;
}

.member-onboarding-intro .draft-pill {
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.profile-settings-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.profile-settings-actions .primary-action,
.profile-settings-actions .secondary-action {
  min-height: 44px;
  border-radius: 16px;
}

.member-status-pill {
  position: absolute;
  top: 68px;
  right: 108px;
  z-index: 12;
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  border: 1px solid rgba(230, 126, 34, 0.22);
  border-radius: 999px;
  padding: 0 12px;
  color: #8b4b12;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  font-weight: 950;
  white-space: nowrap;
}

.member-identity-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--line);
}

.member-identity-grid div {
  min-width: 0;
  padding: 14px 10px;
  background: rgba(255, 252, 248, 0.98);
}

.member-identity-grid dt,
.member-identity-grid dd {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-identity-grid dd {
  margin: 5px 0 0;
  font-size: 0.92rem;
}

.trade-verification-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(230, 126, 34, 0.08);
}

.trade-verification-card p {
  margin-bottom: 6px;
  color: var(--brand);
  font-weight: 950;
}

.trade-verification-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.2rem;
  font-weight: 950;
}

.trade-verification-card span {
  display: block;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.45;
}

.trade-verification-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.trade-verification-button {
  min-width: 82px;
  min-height: 46px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: var(--brand);
  font-weight: 950;
}

.trade-verification-later {
  min-height: 42px;
  border: 0;
  padding: 0 4px;
  color: #8a6f5d;
  background: transparent;
  font-weight: 900;
  white-space: nowrap;
}

.trade-verification-later[hidden] {
  display: none;
}

.trade-verification-button:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.trade-verification-button[data-state="verified"] {
  background: #3f7a45;
}

.trade-verification-dialog form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.trade-verification-dialog {
  position: relative;
}

.trade-verification-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 40px;
  height: 40px;
  min-height: 40px;
  place-items: center;
  border: 1px solid rgba(230, 126, 34, 0.28);
  border-radius: 50%;
  padding: 0;
  color: #b65d21;
  background: #fff8f1;
  box-shadow: 0 7px 16px rgba(178, 83, 43, 0.1);
}

.trade-verification-dialog-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.trade-verification-dialog label {
  color: var(--muted);
  font-weight: 950;
}

.trade-verification-dialog input {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 950;
  letter-spacing: 0;
}

.confirm-dialog .trade-verification-dialog-message {
  min-height: 1.5em;
  color: var(--muted);
  font-weight: 900;
}

.confirm-dialog .trade-verification-dialog-message[data-state="error"] {
  color: #b0442e;
}

.confirm-dialog .trade-verification-dialog-message[data-state="success"] {
  color: #168f7e;
}

.mobile-admin-console,
.mobile-admin-list,
.mobile-admin-shortcuts {
  width: 100%;
}

.mobile-admin-console {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(246, 185, 125, 0.62);
  border-radius: 8px;
  padding: 18px 16px;
  color: #241711;
  background: linear-gradient(180deg, #fffaf3 0%, #fff4e8 100%);
  box-shadow: 0 14px 30px rgba(178, 83, 43, 0.12);
}

.mobile-admin-console-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.mobile-admin-console-header p {
  margin: 0 0 4px;
  color: #8a7667;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.mobile-admin-console-header h2 {
  margin: 0;
  color: #1f1712;
  font-size: clamp(1.35rem, 7vw, 1.8rem);
  line-height: 1.05;
}

.mobile-admin-access-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid rgba(246, 185, 125, 0.64);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
  background: #fffaf3;
}

.mobile-admin-access-pill.is-admin-ok {
  color: #c46617;
  border-color: rgba(247, 150, 58, 0.38);
  background: #fff1dd;
}

.mobile-admin-access-pill.is-admin-denied {
  color: #8f1f1f;
  border-color: #f0b7b7;
  background: #fff1f1;
}

.mobile-admin-identity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.mobile-admin-identity div {
  min-width: 0;
  border: 1px solid rgba(246, 185, 125, 0.54);
  border-radius: 8px;
  padding: 9px 8px;
  background: #ffffff;
}

.mobile-admin-identity dt {
  margin: 0 0 4px;
  color: #8a7667;
  font-size: 0.74rem;
  font-weight: 900;
}

.mobile-admin-identity dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #241711;
  font-size: 0.9rem;
  font-weight: 900;
}

.mobile-admin-note {
  margin: 0;
  border: 1px solid rgba(246, 185, 125, 0.58);
  border-radius: 8px;
  padding: 10px 12px;
  color: #6f5f53;
  background: #ffffff;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
}

.mobile-admin-note[data-state="success"] {
  border-color: rgba(247, 150, 58, 0.38);
  color: #c46617;
  background: #fff1dd;
}

.mobile-admin-note[data-state="error"] {
  border-color: #efb7b7;
  color: #8f1f1f;
  background: #fff4f4;
}

.mobile-admin-note[data-state="loading"] {
  border-color: rgba(247, 150, 58, 0.32);
  color: #bd6218;
  background: #fff7ed;
}

.mobile-admin-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(246, 185, 125, 0.62);
  border-radius: 8px;
  background: #ffffff;
}

.mobile-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  align-items: center;
  gap: 12px;
  min-height: 78px;
  border-top: 1px solid rgba(246, 185, 125, 0.4);
  padding: 14px 14px;
  background: #ffffff;
  box-shadow: none;
}

.mobile-admin-row:first-child {
  border-top: 0;
}

.mobile-admin-row.is-primary {
  background: #ffffff;
}

.mobile-admin-row-main {
  min-width: 0;
}

.mobile-admin-row-label {
  display: block;
  margin-bottom: 3px;
  color: #8a7667;
  font-size: 0.78rem;
  font-weight: 950;
}

.mobile-admin-row strong {
  display: block;
  color: #241711;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.2;
}

.mobile-admin-current-note {
  display: inline-block;
  margin-left: 2px;
  color: #8a7667;
  font-size: 0.78em;
  font-weight: 900;
  vertical-align: 0.04em;
}

.mobile-admin-row p {
  margin: 5px 0 0;
  color: #6f5f53;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
}

.mobile-admin-member-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.mobile-admin-member-stats span {
  min-width: 0;
  border: 1px solid rgba(246, 185, 125, 0.48);
  border-radius: 8px;
  padding: 8px 7px;
  background: #fff7ed;
  box-shadow: none;
}

.mobile-admin-member-stats b,
.mobile-admin-member-stats small {
  display: block;
}

.mobile-admin-member-stats b {
  color: #f08a18;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.1;
}

.mobile-admin-member-stats small {
  margin-top: 4px;
  color: #8a7667;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
}

.mobile-admin-row-actions {
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(64px, auto));
  gap: 8px;
}

.mobile-admin-row-button {
  justify-self: end;
  min-width: 86px;
  min-height: 40px;
  border: 1px solid rgba(238, 126, 28, 0.32);
  border-radius: 8px;
  padding: 8px 10px;
  color: #fff;
  background: linear-gradient(180deg, #ffb86b 0%, #ff9838 48%, #f47b18 100%);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1.15;
  box-shadow: 0 8px 18px rgba(238, 126, 28, 0.2);
}

.mobile-admin-row-button[data-mobile-admin-action="open-member-management"],
.mobile-admin-row-button[data-mobile-admin-action="open-trade-verification"],
.mobile-admin-row-button[data-mobile-admin-action="open-trade-gate"],
.mobile-admin-row-button[data-mobile-admin-action="open-message-detection"] {
  touch-action: manipulation;
  transition: filter 0.08s ease, transform 0.08s ease;
}

.mobile-admin-row-button[data-mobile-admin-action="open-member-management"]:not(:disabled):active,
.mobile-admin-row-button[data-mobile-admin-action="open-trade-verification"]:not(:disabled):active,
.mobile-admin-row-button[data-mobile-admin-action="open-trade-gate"]:not(:disabled):active,
.mobile-admin-row-button[data-mobile-admin-action="open-message-detection"]:not(:disabled):active {
  filter: brightness(0.86);
  transform: translateY(1px) scale(0.98);
}

.mobile-admin-row-actions .mobile-admin-row-button {
  min-width: 64px;
}

.mobile-admin-reported-products-search {
  margin-top: 10px;
}

.mobile-admin-reported-products {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.mobile-admin-reported-product {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(231, 116, 42, 0.24);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 248, 238, 0.86);
}

.mobile-admin-reported-product strong {
  color: #211816;
  font-size: 0.95rem;
}

.mobile-admin-reported-product span,
.mobile-admin-reported-product small {
  color: #75665d;
  font-size: 0.82rem;
  font-weight: 800;
}

.mobile-admin-row-button.is-secondary {
  color: #d86f16;
  border-color: rgba(238, 126, 28, 0.32);
  background: #fffaf3;
}

.mobile-admin-row-button.is-danger {
  color: #fff;
  border-color: #c7561d;
  background: linear-gradient(180deg, #ef8a42 0%, #c7561d 100%);
}

.mobile-admin-row-button:disabled {
  color: #b49a74;
  border-color: #ead8ba;
  background: #f8f0e3;
  box-shadow: none;
}

.mobile-admin-feedback {
  margin-top: -2px;
}

.mobile-admin-verification {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(246, 185, 125, 0.62);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  box-shadow: none;
}

.mobile-admin-member-management-overlay,
.mobile-admin-trade-verification-overlay,
.mobile-admin-trade-gate-overlay {
  z-index: 70;
  align-items: center;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

.mobile-admin-member-management-dialog,
.mobile-admin-trade-verification-dialog,
.mobile-admin-trade-gate-dialog {
  width: min(100%, 430px);
  max-height: calc(100vh - 28px - var(--safe-bottom));
  max-height: calc(100dvh - 28px - var(--safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 22px 68px rgba(178, 83, 43, 0.18);
}

.mobile-admin-member-management-dialog:focus,
.mobile-admin-trade-verification-dialog:focus,
.mobile-admin-trade-gate-dialog:focus {
  outline: none;
}

@media (max-width: 360px) {
  .mobile-admin-member-management-dialog .mobile-admin-verification-search {
    grid-template-columns: 1fr;
  }

  .mobile-admin-member-management-dialog .mobile-admin-verification-search .mobile-admin-row-button {
    width: 100%;
    justify-self: stretch;
  }
}

.mobile-admin-verification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile-admin-verification-header h3 {
  margin: 0;
  color: #241711;
  font-size: 1.05rem;
  font-weight: 950;
}

.mobile-admin-verification-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid rgba(246, 185, 125, 0.62);
  border-radius: 8px;
  color: #d86f16;
  background: #fffaf3;
  font-size: 1.25rem;
  line-height: 1;
}

.mobile-admin-verification-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.mobile-admin-verification-search input {
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(246, 185, 125, 0.62);
  border-radius: 8px;
  padding: 9px 11px;
  color: #241711;
  background: #fffdf8;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0;
}

.mobile-admin-verification-target {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(246, 185, 125, 0.54);
  border-radius: 8px;
  padding: 10px;
  background: #fffaf3;
}

.mobile-admin-verification-target strong,
.mobile-admin-verification-target span,
.mobile-admin-verification-target p {
  overflow-wrap: anywhere;
}

.mobile-admin-verification-target strong {
  color: #241711;
  font-size: 1rem;
  font-weight: 950;
}

.mobile-admin-verification-target span,
.mobile-admin-verification-target p {
  margin: 0;
  color: #6f5f53;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.4;
}

.mobile-admin-verification-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.mobile-admin-verification-actions .mobile-admin-row-button {
  width: 100%;
  min-width: 0;
}

.mobile-admin-trade-gate-form {
  display: grid;
  gap: 14px;
}

.mobile-admin-trade-gate-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(246, 185, 125, 0.58);
  border-radius: 8px;
  padding: 12px;
  background: #fff7ed;
  box-shadow: none;
}

.mobile-admin-trade-gate-switch input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: #f08a18;
}

.mobile-admin-trade-gate-switch strong,
.mobile-admin-trade-gate-switch small {
  display: block;
}

.mobile-admin-trade-gate-switch strong {
  color: #241711;
  font-size: 0.94rem;
  font-weight: 950;
}

.mobile-admin-trade-gate-switch small {
  margin-top: 3px;
  color: #6f5f53;
  font-size: 0.78rem;
  font-weight: 800;
}

.mobile-admin-trade-gate-amount {
  display: grid;
  gap: 7px;
  color: #6f5f53;
  font-size: 0.84rem;
  font-weight: 900;
}

.mobile-admin-trade-gate-amount div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid rgba(246, 185, 125, 0.62);
  border-radius: 8px;
  padding: 0 11px;
  background: #fffdf8;
}

.mobile-admin-trade-gate-amount b {
  color: #8a7667;
  font-size: 0.86rem;
  font-weight: 950;
}

.mobile-admin-trade-gate-amount input {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  border: 0;
  padding: 8px 0;
  color: #241711;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0;
  outline: none;
}

.mobile-admin-trade-gate-hint {
  margin: 0;
  color: #6f5f53;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.45;
}

.mobile-admin-trade-gate-save {
  width: 100%;
  justify-self: stretch;
}

.mobile-admin-one-time-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(247, 150, 58, 0.38);
  border-radius: 8px;
  padding: 10px;
  background: #fff1dd;
  box-shadow: none;
}

.mobile-admin-one-time-code strong,
.mobile-admin-one-time-code small {
  display: block;
}

.mobile-admin-one-time-code strong {
  color: #c46617;
  font-size: 1.22rem;
  font-weight: 950;
  letter-spacing: 0;
}

.mobile-admin-one-time-code small {
  margin-top: 3px;
  color: #8a7667;
  font-size: 0.74rem;
  font-weight: 850;
}

.mobile-admin-shortcuts {
  display: grid;
  gap: 8px;
}

.mobile-admin-shortcut-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  border: 1px solid rgba(246, 185, 125, 0.58);
  border-radius: 8px;
  padding: 11px 12px;
  color: #241711;
  background: #ffffff;
  box-shadow: none;
  font: inherit;
  text-align: left;
}

.mobile-admin-shortcut-button strong {
  font-size: 0.95rem;
  font-weight: 950;
}

.mobile-admin-shortcut-button span {
  min-width: 0;
  color: #6f5f53;
  font-size: 0.84rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
}

dt {
  color: #7d6f67;
  font-weight: 800;
}

dd {
  margin: 4px 0 0;
  font-size: 1.15rem;
  font-weight: 950;
}

.secondary-action {
  background: var(--brand);
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(100vw, 430px);
  margin: 0 auto;
  padding: 8px 10px calc(8px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -12px 32px rgba(230, 126, 34, 0.12);
  backdrop-filter: blur(18px);
  transform: translate3d(0, 0, 0);
  transition:
    transform 2s cubic-bezier(0.22, 0.78, 0.28, 1),
    opacity 2s ease,
    padding 2s ease,
    box-shadow 2s ease;
}

.bottom-nav.is-market-middle-compact {
  padding: 4px 10px calc(4px + var(--safe-bottom));
  box-shadow: 0 -8px 18px rgba(230, 126, 34, 0.1);
}

.bottom-nav button {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 62px;
  place-items: center;
  border: 0;
  border-radius: 16px;
  color: var(--muted);
  background: transparent;
  font-weight: 950;
  transition:
    gap 2s ease,
    min-height 2s ease,
    margin 2s ease,
    border-radius 2s ease,
    box-shadow 2s ease;
}

.bottom-nav strong,
.bottom-nav span {
  display: block;
  line-height: 1.1;
  transition:
    opacity 2s ease,
    font-size 2s ease;
}

.bottom-nav strong {
  font-size: 0.9rem;
}

.bottom-nav span {
  font-size: 1rem;
}

.bottom-nav.is-market-middle-compact button {
  gap: 0;
  min-height: 38px;
  border-radius: 13px;
}

.bottom-nav.is-market-middle-compact strong {
  display: none;
}

.bottom-nav.is-market-middle-compact span:not(.nav-badge) {
  font-size: 0.95rem;
}

.bottom-nav button.is-active:not(.plus-tab) {
  color: var(--brand-dark);
  background: var(--surface-soft);
}

.nav-badge {
  position: absolute;
  top: 4px;
  right: 0;
  transform: translate(-22%, -48%);
  z-index: 1;
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff6f95, #e84887);
  box-shadow: 0 8px 18px rgba(232, 72, 135, 0.24);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  transition:
    top 2s ease,
    right 2s ease,
    min-width 2s ease,
    height 2s ease,
    padding 2s ease,
    transform 2s ease,
    font-size 2s ease;
}

.nav-badge[hidden] {
  display: none;
}

.bottom-nav.is-market-middle-compact .nav-badge {
  top: 2px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-width: 2px;
  font-size: 0.66rem;
  transform: translate(12%, -34%);
}

.bottom-nav .plus-tab {
  min-height: 76px;
  margin: -8px 6px 0;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #ffc06d, var(--brand), var(--brand-dark));
  box-shadow: 0 12px 24px rgba(247, 160, 78, 0.3);
}

.bottom-nav.is-market-middle-compact .plus-tab {
  min-height: 38px;
  margin: 0 6px;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(247, 160, 78, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav {
    transition: none;
  }
}

@media (max-width: 520px) {
  .member-status-pill {
    top: 58px;
  }
}

@media (max-width: 380px) {
  .app-shell {
    padding-right: 14px;
    padding-left: 14px;
  }

  .view[data-view="sell"] .quick-sell-form > .form-card {
    margin-right: -14px;
    margin-left: -14px;
  }

  :is(#marketProducts, .sell-preview-market):not(.is-double):not(.is-wall) .market-product-card {
    --market-general-page-gutter: 14px;
  }

  h1 {
    font-size: 2.12rem;
  }

  .form-card {
    padding: 24px 18px;
  }

  .sell-preview-modes button {
    font-size: 0.78rem;
  }

  .sell-preview-detail-card {
    width: calc(100% + 36px);
    margin-left: -18px;
  }

  .quick-step-title {
    grid-template-columns: 50px 1fr;
    gap: 12px;
  }

  .trade-verification-card {
    grid-template-columns: 1fr;
  }

  .member-hero-top {
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .member-hero-copy h2 {
    font-size: 1rem;
  }

  .profile-settings-button {
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .member-identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-identity-grid div:last-child {
    grid-column: 1 / -1;
  }

  .mobile-admin-verification-actions {
    grid-template-columns: 1fr;
  }

  .member-status-pill,
  .trade-verification-button {
    justify-self: start;
  }

  .member-status-pill {
    right: 102px;
  }

  .step-badge {
    width: 50px;
    height: 50px;
  }

  .trade-composer-helper-row {
    align-items: flex-start;
  }
}