/*
 * Product-wide UI polish
 * ----------------------
 * A deliberately separate presentation layer so the platform's established
 * layouts and application behavior remain stable while shared surfaces,
 * controls, hierarchy, and responsive details receive one cohesive finish.
 */

:root {
  --ui-canvas: #f8f5ef;
  --ui-surface: rgba(255, 253, 250, 0.94);
  --ui-surface-solid: #fffdfa;
  --ui-surface-raised: #ffffff;
  --ui-surface-muted: #f5f0e7;
  --ui-text: #1e1a16;
  --ui-text-soft: #625b52;
  --ui-border: rgba(119, 91, 52, 0.18);
  --ui-border-strong: rgba(119, 91, 52, 0.3);
  --ui-gold: #a86e18;
  --ui-gold-strong: #81500e;
  --ui-gold-soft: #f7ead3;
  --ui-positive: #276346;
  --ui-danger: #aa3e34;
  --ui-focus: #1677c8;
  --ui-radius-sm: 10px;
  --ui-radius-md: 15px;
  --ui-radius-lg: 22px;
  --ui-shadow-sm: 0 1px 2px rgba(43, 31, 17, 0.05), 0 7px 20px rgba(43, 31, 17, 0.055);
  --ui-shadow-md: 0 2px 4px rgba(43, 31, 17, 0.05), 0 18px 46px rgba(43, 31, 17, 0.09);
  --ui-shadow-lg: 0 24px 70px rgba(34, 25, 14, 0.18);
  --ui-ease: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[data-theme="dark"] {
  --ui-canvas: #171b18;
  --ui-surface: rgba(31, 36, 32, 0.94);
  --ui-surface-solid: #1f2420;
  --ui-surface-raised: #252b26;
  --ui-surface-muted: #292f2a;
  --ui-text: #f4efe7;
  --ui-text-soft: #c6beb2;
  --ui-border: rgba(238, 209, 163, 0.14);
  --ui-border-strong: rgba(238, 209, 163, 0.25);
  --ui-gold: #d8a552;
  --ui-gold-strong: #efc779;
  --ui-gold-soft: #3d321f;
  --ui-positive: #78c49a;
  --ui-danger: #ef8b82;
  --ui-focus: #78bfff;
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22), 0 7px 22px rgba(0, 0, 0, 0.2);
  --ui-shadow-md: 0 2px 5px rgba(0, 0, 0, 0.25), 0 20px 52px rgba(0, 0, 0, 0.28);
  --ui-shadow-lg: 0 28px 76px rgba(0, 0, 0, 0.42);
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--ui-border-strong) transparent;
}

body {
  color: var(--ui-text);
  background:
    radial-gradient(circle at 8% -5%, rgba(184, 124, 34, 0.09), transparent 30rem),
    radial-gradient(circle at 94% 8%, rgba(53, 106, 79, 0.055), transparent 28rem),
    var(--ui-canvas);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: #18130d;
  background: #edc77f;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 72%, transparent);
  outline-offset: 3px;
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(button, .button, .quiet-button, .secondary-button, .danger-button) {
  min-height: 42px;
  transition:
    transform var(--ui-ease),
    box-shadow var(--ui-ease),
    border-color var(--ui-ease),
    background-color var(--ui-ease),
    color var(--ui-ease);
}

:where(button, .button, .quiet-button, .secondary-button, .danger-button):not(:disabled):hover {
  transform: translateY(-1px);
}

:where(button, .button, .quiet-button, .secondary-button, .danger-button):not(:disabled):active {
  transform: translateY(0);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-solid);
  color: var(--ui-text);
  box-shadow: 0 1px 2px rgba(42, 29, 12, 0.035);
  transition:
    border-color var(--ui-ease),
    box-shadow var(--ui-ease),
    background-color var(--ui-ease);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: 44px;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ui-gold) 52%, var(--ui-border-strong));
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--ui-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-focus) 13%, transparent);
}

::placeholder {
  color: color-mix(in srgb, var(--ui-text-soft) 72%, transparent);
  opacity: 1;
}

h1,
h2,
h3,
h4 {
  color: var(--ui-text);
  text-wrap: balance;
}

h1 {
  letter-spacing: -0.038em;
}

h2 {
  letter-spacing: -0.025em;
}

h3,
h4 {
  letter-spacing: -0.012em;
}

p,
li,
dd {
  text-wrap: pretty;
}

.eyebrow {
  color: var(--ui-gold-strong);
  font-weight: 800;
  letter-spacing: 0.075em;
}

/* App chrome */
.topbar {
  top: 10px;
  z-index: 80;
  margin-top: 10px;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ui-surface-solid) 88%, transparent);
  box-shadow: var(--ui-shadow-sm);
  backdrop-filter: blur(18px) saturate(1.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.22);
}

.brand {
  gap: 10px;
  color: var(--ui-text);
  font-weight: 790;
  letter-spacing: -0.02em;
}

.brand-mark {
  filter: drop-shadow(0 3px 7px rgba(102, 66, 16, 0.17));
}

.main-nav a,
.main-nav summary,
.header-controls > button,
.header-controls > a {
  border-radius: 999px;
}

.main-nav a,
.main-nav summary {
  transition: color var(--ui-ease), background-color var(--ui-ease);
}

.main-nav a:hover,
.main-nav summary:hover,
.main-nav a[aria-current="page"] {
  color: var(--ui-gold-strong);
  background: var(--ui-gold-soft);
}

.nav-menu {
  overflow: hidden;
  padding: 7px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-raised);
  box-shadow: var(--ui-shadow-md);
}

.nav-menu a {
  min-height: 42px;
}

main {
  padding-top: clamp(28px, 4vw, 54px);
}

.page.active {
  animation: ui-page-enter 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes ui-page-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

.section-heading {
  align-items: end;
  gap: 20px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.section-heading h1,
.section-heading h2 {
  max-width: 22ch;
}

.section-heading > p {
  max-width: 66ch;
  color: var(--ui-text-soft);
}

/* Shared premium surfaces */
:where(
  .community-shell,
  .community-board,
  .community-feature-board,
  .account-profile-card,
  .account-context-panel,
  .seller-form-panel,
  .seller-ops-panel,
  .card-form,
  .inventory-panel,
  .closed-shop-panel,
  .trust-policy,
  .support-contact-panel,
  .login-panel,
  .message-thread-panel,
  .host-tool-card,
  .cart-shell,
  .policy-grid > article,
  .faq-grid > article,
  .support-route-grid > article,
  .marketplace-steps > article,
  .marketplace-quick-notes > section
) {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

:where(
  .seller-form-panel,
  .seller-ops-panel,
  .account-context-panel,
  .host-tool-card,
  .support-contact-panel,
  .login-panel,
  .card-form,
  .inventory-panel
) {
  padding: clamp(20px, 3vw, 32px);
}

:where(
  .seller-form-panel,
  .seller-ops-panel,
  .account-context-panel,
  .host-tool-card,
  .support-contact-panel,
  .community-board,
  .community-feature-board
):hover {
  border-color: color-mix(in srgb, var(--ui-gold) 28%, var(--ui-border));
}

.profile-card,
.referral-link-card,
.auth-service-card,
.account-index-card {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-muted);
}

/* Marketplace and listing discovery */
.browse-controls,
.marketplace-sort-bar,
.vendor-table-toolbar,
.community-toolbar,
.notification-toolbar,
.host-ops-toolbar {
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.vendor-grid {
  gap: clamp(16px, 2vw, 24px);
}

.vendor-card {
  overflow: clip;
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-solid);
  box-shadow: var(--ui-shadow-sm);
  transition:
    transform var(--ui-ease),
    border-color var(--ui-ease),
    box-shadow var(--ui-ease);
}

.vendor-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ui-gold) 44%, var(--ui-border));
  box-shadow: var(--ui-shadow-md);
}

.vendor-card.selected {
  border-color: var(--ui-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-gold) 14%, transparent), var(--ui-shadow-md);
}

.vendor-logo,
.listing-photo,
.binder-page-image,
.vendor-card-preview-item img {
  background: var(--ui-surface-muted);
}

.vendor-table-listings {
  gap: clamp(14px, 1.8vw, 22px);
}

.listing-card,
.card-tile,
.recently-viewed-card {
  overflow: hidden;
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-solid);
  box-shadow: var(--ui-shadow-sm);
  transition:
    transform var(--ui-ease),
    box-shadow var(--ui-ease),
    border-color var(--ui-ease);
}

.listing-card:hover,
.card-tile:hover,
.recently-viewed-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ui-gold) 40%, var(--ui-border));
  box-shadow: var(--ui-shadow-md);
}

.status-pill,
.vendor-status-pill,
.vendor-binder-pill,
.condition-pill,
.listing-chip {
  min-height: 27px;
  border-color: var(--ui-border-strong);
  font-weight: 750;
  letter-spacing: 0.025em;
}

/* Profile, vendor tools, forms, and data density */
.account-profile-shell,
.card-form-layout,
.host-operations-grid {
  gap: clamp(18px, 2.5vw, 30px);
}

.profile-card-heading h1,
.profile-card-heading h2 {
  line-height: 1.05;
}

.profile-badge-list,
.referral-stats-grid,
.analytics-summary-grid {
  gap: 14px;
}

.seller-form-panel-heading,
.card-form-heading {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-border);
}

.seller-grid,
.form-grid,
.support-modal-grid {
  column-gap: 18px;
  row-gap: 17px;
}

label {
  color: var(--ui-text-soft);
  font-weight: 720;
  letter-spacing: 0.015em;
}

.table-wrap {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-solid);
  box-shadow: var(--ui-shadow-sm);
  scrollbar-gutter: stable;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  color: var(--ui-text-soft);
  background: var(--ui-surface-muted);
  font-size: 0.75rem;
  font-weight: 820;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

td,
th {
  border-color: var(--ui-border);
}

tbody tr {
  transition: background-color var(--ui-ease);
}

tbody tr:hover {
  background: color-mix(in srgb, var(--ui-gold-soft) 46%, transparent);
}

.listing-management-tabs,
.profile-tab-list,
.community-tab-list {
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface-muted);
}

.listing-management-tab,
.profile-tab,
.community-tab {
  min-height: 38px;
  border-radius: 999px;
}

.listing-management-tab.active,
.profile-tab.active,
.community-tab.active,
[role="tab"][aria-selected="true"] {
  color: #fff;
  background: var(--ui-gold-strong);
  box-shadow: 0 5px 14px rgba(95, 59, 9, 0.18);
}

html[data-theme="dark"] :where(
  .listing-management-tab.active,
  .profile-tab.active,
  .community-tab.active,
  [role="tab"][aria-selected="true"]
) {
  color: #17130d;
  background: var(--ui-gold-strong);
}

/* Community, messages, support, and system feedback */
.community-thread-list,
.community-giveaway-grid,
.buyer-transaction-list,
.notification-list,
.admin-report-list,
.binder-manager-list {
  gap: 12px;
}

.community-thread-card,
.community-post-card,
.community-giveaway-card,
.buyer-transaction,
.notification-item,
.admin-report,
.binder-manager-item {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-solid);
  box-shadow: 0 1px 2px rgba(42, 29, 12, 0.035);
}

.empty-state,
.empty-inventory,
.message-thread-placeholder,
.community-empty-feature,
.listing-photo-order-empty,
.loading-state,
.community-loading-list,
.error-state,
.permission-state,
[data-state="empty"],
[data-state="loading"],
[data-state="error"] {
  padding: clamp(24px, 5vw, 48px);
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-muted);
  color: var(--ui-text-soft);
  text-align: center;
}

.platform-status-banner {
  border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md);
  box-shadow: var(--ui-shadow-sm);
}

.message-thread-panel {
  overflow: hidden;
}

.message-thread-toolbar {
  border-bottom-color: var(--ui-border);
  background: var(--ui-surface-muted);
}

.support-modal,
.listing-detail-overlay,
.image-zoom-overlay {
  padding: clamp(12px, 3vw, 30px);
  background: rgba(17, 19, 17, 0.72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.support-modal-card,
.listing-detail-card,
.image-zoom-card {
  overflow: hidden;
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-solid);
  box-shadow: var(--ui-shadow-lg);
}

.support-modal-header,
.image-zoom-toolbar {
  min-height: 64px;
  border-bottom-color: var(--ui-border);
  background: var(--ui-surface);
  backdrop-filter: blur(12px);
}

.chat-drawer {
  filter: drop-shadow(-12px 0 32px rgba(22, 16, 9, 0.16));
}

.chat-shell {
  border-color: var(--ui-border);
  background: var(--ui-surface-solid);
}

.chat-message {
  border-radius: 16px 16px 16px 5px;
}

.chat-message.is-own,
.chat-message.own {
  border-radius: 16px 16px 5px;
}

/* Editorial and trust content */
.policy-grid,
.faq-grid,
.support-route-grid,
.marketplace-steps,
.marketplace-quick-notes {
  gap: clamp(14px, 2vw, 22px);
}

.policy-grid > article,
.faq-grid > article,
.support-route-grid > article,
.marketplace-steps > article,
.marketplace-quick-notes > section {
  padding: clamp(20px, 2.5vw, 28px);
  transition:
    transform var(--ui-ease),
    border-color var(--ui-ease),
    box-shadow var(--ui-ease);
}

.support-route-grid > article:hover,
.marketplace-steps > article:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ui-gold) 40%, var(--ui-border));
  box-shadow: var(--ui-shadow-md);
}

.marketplace-steps article > span {
  box-shadow: 0 7px 18px rgba(78, 50, 13, 0.16);
}

/* Footer */
.site-footer {
  margin-top: clamp(48px, 8vw, 96px);
  padding-top: clamp(30px, 4vw, 48px);
  border-top-color: var(--ui-border);
  color: var(--ui-text-soft);
}

.site-footer a {
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.site-footer a:hover {
  color: var(--ui-gold-strong);
}

/* Responsive containment */
@media (max-width: 1024px) {
  .topbar {
    top: 6px;
    margin-top: 6px;
  }

  .account-profile-shell,
  .card-form-layout {
    align-items: stretch;
  }

  .host-operations-grid,
  .seller-grid {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  :root {
    --ui-radius-lg: 18px;
  }

  body {
    background:
      radial-gradient(circle at 5% 0%, rgba(184, 124, 34, 0.08), transparent 20rem),
      var(--ui-canvas);
  }

  .topbar {
    border-radius: 15px;
  }

  main {
    padding-top: 24px;
  }

  .section-heading {
    align-items: start;
    margin-bottom: 20px;
  }

  :where(
    .seller-form-panel,
    .seller-ops-panel,
    .account-context-panel,
    .host-tool-card,
    .support-contact-panel,
    .login-panel,
    .card-form,
    .inventory-panel
  ) {
    padding: 18px;
  }

  .browse-controls,
  .marketplace-sort-bar,
  .vendor-table-toolbar,
  .community-toolbar,
  .notification-toolbar,
  .host-ops-toolbar {
    padding: 10px;
  }

  .listing-management-tabs,
  .profile-tab-list,
  .community-tab-list {
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: var(--ui-radius-md);
    scrollbar-width: thin;
  }

  .listing-management-tab,
  .profile-tab,
  .community-tab {
    flex: 0 0 auto;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .support-modal,
  .listing-detail-overlay,
  .image-zoom-overlay {
    padding: 8px;
  }

  .support-modal-card,
  .listing-detail-card,
  .image-zoom-card {
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }

  .chat-drawer {
    max-width: 100vw;
  }
}

/* Listing photo viewer, editorial pages, and login alignment */
.image-zoom-overlay {
  z-index: 10060 !important;
  isolation: isolate;
  padding: clamp(12px, 2.2vw, 26px);
  background: rgba(12, 15, 13, 0.84);
  backdrop-filter: blur(12px) saturate(0.8);
  -webkit-backdrop-filter: blur(12px) saturate(0.8);
}

body.image-zoom-open {
  overflow: hidden;
}

.image-zoom-card {
  width: min(760px, 100%);
  height: auto;
  max-height: calc(100dvh - 24px);
  border-radius: 9px;
  background: var(--ui-surface-solid);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.image-zoom-toolbar {
  min-height: 58px;
  padding: 10px 14px 10px 18px;
  background: var(--ui-surface-solid);
}

.image-zoom-toolbar span {
  overflow: hidden;
  color: var(--ui-text);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-zoom-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.image-zoom-actions .quiet-button {
  min-height: 36px;
  border-radius: 5px;
}

.image-zoom-stage {
  position: relative;
  width: 100%;
  height: min(680px, calc(100dvh - 106px));
  min-height: min(420px, calc(100dvh - 106px));
  overflow: auto;
  padding: clamp(16px, 2.5vw, 28px);
  background:
    linear-gradient(45deg, rgba(96, 88, 75, 0.04) 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(-45deg, rgba(96, 88, 75, 0.04) 25%, transparent 25%) 0 12px / 24px 24px,
    color-mix(in srgb, var(--ui-surface-muted) 72%, var(--ui-surface-solid));
  overscroll-behavior: contain;
}

.image-zoom-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 560px);
  max-height: min(620px, calc(100dvh - 158px));
  margin: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(23, 23, 23, 0.22));
}

.image-zoom-stage img.is-zoomed {
  filter: drop-shadow(0 12px 18px rgba(23, 23, 23, 0.18));
}

.how-it-works-page,
.faq-page,
.support-page {
  width: min(100%, 1180px);
  max-width: 1180px;
}

.how-it-works-heading {
  min-height: 218px;
  margin-bottom: 22px;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 92% 18%, rgba(184, 124, 34, 0.14), transparent 18rem),
    linear-gradient(135deg, var(--ui-surface-solid), var(--ui-surface-muted));
  box-shadow: var(--ui-shadow-sm);
}

.how-it-works-heading h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.marketplace-free-callout {
  min-height: 30px;
  border-radius: 5px;
  padding: 5px 10px;
  letter-spacing: 0.025em;
}

.marketplace-steps {
  gap: 10px;
  counter-reset: marketplace-step;
}

.marketplace-steps article {
  position: relative;
  min-height: 196px;
  overflow: hidden;
  padding: 22px 20px 20px;
  border-radius: 8px;
  box-shadow: 0 5px 18px rgba(43, 31, 17, 0.055);
}

.marketplace-steps article::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ui-gold);
}

.marketplace-steps article > span {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: var(--ui-gold-strong);
  box-shadow: none;
}

.marketplace-quick-notes {
  gap: 10px;
  margin-top: 14px;
}

.marketplace-quick-notes > section {
  border-radius: 8px;
  padding: 22px;
}

.rules-jump-nav {
  top: 76px;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  margin-bottom: 20px;
  padding: 0;
  border-radius: 7px;
  background: var(--ui-surface-solid);
  box-shadow: 0 6px 20px rgba(43, 31, 17, 0.075);
  scrollbar-width: thin;
}

.rules-jump-nav a {
  flex: 0 0 auto;
  min-height: 42px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: transparent;
}

.rules-jump-nav a:last-child {
  border-right: 0;
}

.trust-policy {
  gap: 18px;
  margin-bottom: 18px;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  background: var(--ui-surface);
  box-shadow: 0 4px 16px rgba(43, 31, 17, 0.045);
}

.trust-policy > div:first-child {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ui-border);
}

.trust-policy h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.policy-grid {
  gap: 0;
}

.policy-grid article {
  padding: 16px 2px;
  border-color: var(--ui-border);
  box-shadow: none;
}

.policy-grid article:first-child {
  border-top: 0;
}

.faq-section-heading {
  margin-top: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-border);
}

.faq-grid {
  margin-top: 0;
}

.faq-grid article {
  padding: 18px 4px;
  border-radius: 0;
  box-shadow: none;
}

.support-routing {
  gap: 20px;
  margin-bottom: 18px;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  background: var(--ui-surface);
}

.support-route-grid {
  gap: 10px;
}

.support-route-grid article {
  min-height: 188px;
  padding: 20px;
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(43, 31, 17, 0.05);
}

.support-route-grid article > span {
  width: fit-content;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--ui-gold);
}

.support-route-actions .quiet-button {
  border-radius: 5px;
}

.support-contact-panel {
  gap: 18px;
  padding: clamp(18px, 2.5vw, 28px);
  border-radius: 9px;
}

.contact-mailbox-grid {
  gap: 8px;
}

.contact-mailbox-grid a {
  min-height: 68px;
  padding: 12px 13px;
  border-radius: 6px;
  background: var(--ui-surface-solid);
}

.contact-mailbox-grid a:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(43, 31, 17, 0.06);
}

.account-layout {
  grid-template-columns: minmax(360px, 430px) minmax(360px, 480px);
  gap: clamp(48px, 7vw, 92px);
  justify-content: start;
  max-width: 1040px;
}

.login-panel {
  width: 100%;
  padding: 27px 28px;
}

.login-marketing {
  min-height: 440px;
}

.login-marketing > img {
  width: min(100%, 440px);
}

@media (max-width: 760px) {
  .image-zoom-overlay {
    padding: 7px;
  }

  .image-zoom-card {
    height: calc(100dvh - 14px);
    max-height: calc(100dvh - 14px);
    border-radius: 7px;
  }

  .image-zoom-toolbar {
    align-items: flex-start;
    min-height: 54px;
    padding: 8px 9px 8px 12px;
  }

  .image-zoom-toolbar span {
    max-width: 42vw;
  }

  .image-zoom-stage img {
    max-height: calc(100dvh - 116px);
  }

  .how-it-works-heading {
    min-height: 0;
    padding: 22px;
  }

  .rules-jump-nav {
    top: 70px;
  }

  .policy-grid article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .support-route-grid,
  .contact-mailbox-grid {
    grid-template-columns: 1fr;
  }

  .account-layout {
    grid-template-columns: 1fr;
  }

  .login-marketing {
    min-height: 300px;
  }

  .login-marketing > img {
    width: min(82vw, 360px);
  }
}

/* Profile and Inbox refinement */
.signed-in-header {
  max-width: min(24vw, 210px);
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.61rem;
  font-weight: 780;
  line-height: 1.15;
}

.account-profile-shell {
  grid-template-columns: minmax(360px, 410px) minmax(0, 1fr);
  column-gap: clamp(22px, 3.5vw, 46px);
  row-gap: 12px;
}

.account-profile-card,
.account-context-panel {
  border-radius: 9px;
  box-shadow: 0 5px 20px rgba(43, 31, 17, 0.065);
}

.account-profile-card {
  min-width: 0;
  padding: 18px;
}

.profile-card {
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 17px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface-muted);
}

.profile-avatar {
  width: 124px;
  height: 124px;
  min-width: 0;
  border-radius: 7px;
}

.profile-card-copy {
  min-height: 124px;
  overflow: visible;
}

.profile-card-heading {
  margin-bottom: 7px;
}

.profile-card-heading h3 {
  font-size: clamp(1.22rem, 2vw, 1.52rem);
  line-height: 1.08;
}

.profile-username,
.profile-paypal,
.profile-location {
  overflow-wrap: anywhere;
  word-break: normal;
}

.profile-card .profile-paypal {
  max-width: 100%;
}

.profile-card p {
  margin: 11px 0 0;
  color: var(--ui-text-soft);
  font-size: 0.9rem;
  line-height: 1.48;
}

.profile-card-actions {
  margin-top: 12px;
  padding-top: 0;
}

.profile-edit-toggle {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 5px;
  box-shadow: none;
}

.profile-tool-tabs {
  gap: 0;
  overflow-x: auto;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface-solid);
}

.profile-tool-tabs button {
  flex: 0 0 auto;
  min-height: 41px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-tool-tabs button:last-child {
  border-right: 0;
}

.profile-tool-tabs button.active {
  border-color: var(--ui-gold-strong);
  background: var(--ui-gold-strong);
}

.profile-tool-panel {
  min-height: 580px;
}

.profile-page .primary-button,
.profile-page .quiet-button,
.theme-toggle-row,
.referral-link-card,
.profile-badge-option {
  border-radius: 6px;
}

.profile-badge-panel,
.profile-flair-panel {
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--ui-surface-muted) 64%, var(--ui-surface-solid));
}

.profile-badge-list {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.profile-badge-option {
  min-height: 118px;
  padding: 12px;
}

.profile-badge-art {
  width: 58px;
  height: 58px;
}

.profile-flair-controls,
.referral-link-card {
  align-items: end;
  gap: 12px;
}

.inbox-page {
  max-width: 1220px;
}

.inbox-page > .section-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ui-border);
}

.inbox-page > .section-heading > span {
  min-height: 29px;
  padding: 4px 9px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 5px;
  background: var(--ui-surface-muted);
  color: var(--ui-text-soft);
  font-size: 0.76rem;
  font-weight: 820;
}

.inbox-page .notification-toolbar {
  min-height: 42px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--ui-gold);
  border-radius: 5px;
  background: var(--ui-surface-muted);
  box-shadow: none;
}

.message-thread-panel {
  gap: 16px;
  margin-top: 0;
  padding: clamp(18px, 2.5vw, 26px);
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  background: var(--ui-surface);
}

.message-thread-panel > .inventory-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ui-border);
}

.message-thread-toolbar {
  grid-template-columns: minmax(0, auto) minmax(360px, 1fr);
  gap: 14px;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface-solid);
  box-shadow: none;
}

.message-thread-tabs {
  align-self: stretch;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
}

.message-thread-tabs button {
  flex: 0 0 auto;
  min-height: 44px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: transparent;
}

.message-thread-tabs button.active,
.message-thread-tabs button:hover,
.message-thread-tabs button:focus-visible {
  border-color: var(--ui-gold-strong);
  background: var(--ui-gold-strong);
}

.message-thread-tools {
  grid-template-columns: auto auto minmax(190px, 1fr);
  padding: 6px;
}

.message-unread-toggle,
#markAllNotificationsRead,
.message-thread-search input {
  min-height: 36px;
  border-radius: 5px;
}

.message-thread-list {
  gap: 8px;
}

.message-thread-item {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  min-height: 88px;
  padding: 13px 14px;
  border-radius: 6px;
  box-shadow: none;
}

.message-thread-item:hover {
  transform: none;
  box-shadow: 0 4px 14px rgba(43, 31, 17, 0.065);
}

.message-thread-item.unread::before {
  inset-block: 9px;
  border-radius: 0 3px 3px 0;
}

.message-thread-actions .icon-button,
.notification-order-controls .icon-button {
  border-radius: 5px;
}

.notification-list {
  margin-top: 18px;
  border-top: 1px solid var(--ui-border);
}

.notification-item {
  min-height: 82px;
  padding: 16px 12px;
}

@media (max-width: 1000px) {
  .account-profile-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "card"
      "tabs"
      "panel";
  }

  .account-profile-card {
    min-height: 0;
  }

  .profile-tool-panel {
    min-height: 0;
  }

  .message-thread-toolbar {
    grid-template-columns: 1fr;
  }

  .message-thread-tools {
    border-top: 1px solid var(--ui-border);
  }
}

@media (max-width: 620px) {
  .signed-in-header {
    max-width: min(58vw, 190px);
    font-size: 0.6rem;
  }

  .account-profile-card {
    padding: 12px;
  }

  .profile-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 13px;
    padding: 12px;
  }

  .profile-avatar {
    width: 96px;
    height: 96px;
  }

  .profile-card-copy {
    min-height: 96px;
  }

  .profile-card p {
    font-size: 0.86rem;
  }

  .profile-badge-list {
    grid-template-columns: 1fr;
  }

  .message-thread-panel {
    padding: 13px;
  }

  .message-thread-tools {
    grid-template-columns: 1fr;
  }

  .message-unread-toggle,
  #markAllNotificationsRead {
    justify-content: center;
  }

  .message-thread-item {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .message-thread-item img,
  .message-thread-placeholder {
    width: 44px;
    height: 58px;
  }

  .message-thread-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
  }
}

/* Navigation, page rhythm, authentication, and stable profile tabs */
main {
  padding-top: clamp(14px, 1.8vw, 24px);
}

:where(
  .browse-page,
  .community-page,
  .profile-page,
  .setup-page,
  .dashboard,
  .how-it-works-page,
  .faq-page,
  .support-page,
  .account-page,
  .vendor-application-page,
  .transactions-page,
  .inbox-page,
  .admin-page,
  .cart-page
) {
  padding-top: clamp(12px, 1.5vw, 20px);
}

.account-page .section-heading {
  padding-top: 0;
  padding-bottom: 14px;
}

.nav-group.active:not([open]) > summary {
  background: transparent;
  color: var(--ui-text-soft);
}

.nav-group[open] > summary {
  background: var(--ui-surface-muted);
  color: var(--ui-text);
}

.nav-menu a[aria-current="page"],
.nav-menu a.active {
  position: relative;
  background: color-mix(in srgb, var(--ui-gold-soft) 72%, var(--ui-surface-solid));
  color: var(--ui-gold-strong);
  box-shadow: inset 3px 0 0 var(--ui-gold);
}

.account-layout {
  grid-template-columns: minmax(320px, 405px) minmax(300px, 410px);
  gap: clamp(36px, 6vw, 72px);
  align-items: start;
  max-width: 930px;
}

.login-panel {
  align-content: start;
  gap: 13px;
  padding: 24px 26px;
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  background: var(--ui-surface-solid);
  box-shadow: 0 8px 28px rgba(43, 31, 17, 0.075);
}

.auth-fields {
  gap: 12px;
}

.login-panel input:not([type="checkbox"]) {
  min-height: 45px;
}

.login-panel .primary-button {
  min-height: 44px;
  border-radius: 6px;
}

.login-marketing {
  min-height: 370px;
}

.login-marketing > img {
  width: min(100%, 370px);
  filter: drop-shadow(0 22px 34px rgba(23, 23, 23, 0.15));
}

.account-profile-shell {
  grid-template-rows: 43px minmax(0, auto);
  align-items: start;
}

.account-profile-card {
  grid-row: 1 / span 2;
  align-self: start;
  min-height: 0;
}

.profile-tool-tabs {
  grid-row: 1;
  align-self: start;
  margin: 0;
}

.profile-tool-panel {
  grid-row: 2;
  align-self: start;
}

@media (max-width: 1000px) {
  .account-profile-shell {
    grid-template-rows: auto auto auto;
  }

  .account-profile-card,
  .profile-tool-tabs,
  .profile-tool-panel {
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  main {
    padding-top: 12px;
  }

  :where(
    .browse-page,
    .community-page,
    .profile-page,
    .setup-page,
    .dashboard,
    .how-it-works-page,
    .faq-page,
    .support-page,
    .account-page,
    .vendor-application-page,
    .transactions-page,
    .inbox-page,
    .admin-page,
    .cart-page
  ) {
    padding-top: 10px;
  }

  .account-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .login-marketing {
    min-height: 240px;
  }

  .login-marketing > img {
    width: min(72vw, 290px);
  }
}

@media (max-width: 520px) {
  :where(button, .button, .quiet-button, .secondary-button, .danger-button) {
    min-height: 44px;
  }

  .vendor-card,
  .listing-card,
  .card-tile {
    border-radius: 16px;
  }

  .policy-grid > article,
  .faq-grid > article,
  .support-route-grid > article,
  .marketplace-steps > article,
  .marketplace-quick-notes > section {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  :where(
    .vendor-card,
    .listing-card,
    .seller-form-panel,
    .seller-ops-panel,
    .account-context-panel,
    .host-tool-card,
    .support-modal-card
  ) {
    border: 1px solid CanvasText;
  }
}

/* Product polish refinement: tighter, more editorial geometry */
:root {
  --ui-radius-sm: 6px;
  --ui-radius-md: 9px;
  --ui-radius-lg: 12px;
}

.topbar {
  top: 0;
  margin-top: 0;
  border-width: 0 1px 1px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 5px 18px rgba(43, 31, 17, 0.065);
}

.main-nav a,
.main-nav summary,
.header-controls > button,
.header-controls > a {
  border-radius: 5px;
}

.nav-menu {
  min-width: 190px;
  padding: 5px;
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(43, 31, 17, 0.13);
}

.nav-menu a {
  min-height: 40px;
  border-radius: 4px;
  padding-inline: 12px;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.browse-controls,
.marketplace-sort-bar,
.vendor-table-toolbar,
.community-toolbar,
.notification-toolbar,
.host-ops-toolbar,
.table-wrap {
  border-radius: 7px;
}

:where(
  .primary-button,
  .quiet-button,
  .offer-button,
  .danger-button,
  .secondary-button,
  .compact-action
) {
  border-radius: 6px;
}

:where(
  .community-shell,
  .community-board,
  .community-feature-board,
  .account-profile-card,
  .account-context-panel,
  .seller-form-panel,
  .seller-ops-panel,
  .card-form,
  .inventory-panel,
  .closed-shop-panel,
  .trust-policy,
  .support-contact-panel,
  .login-panel,
  .message-thread-panel,
  .host-tool-card,
  .cart-shell,
  .policy-grid > article,
  .faq-grid > article,
  .support-route-grid > article,
  .marketplace-steps > article,
  .marketplace-quick-notes > section
) {
  border-radius: 10px;
}

.vendor-card {
  grid-template-rows: 144px 38px 276px 48px 42px;
  min-height: 638px;
  height: 638px;
  border-radius: 12px;
}

/* Vendor directory header containment and badge legibility */
.vendor-card-head {
  min-height: 140px;
  margin-bottom: 8px;
  overflow: visible;
}

.vendor-card-title-stack {
  padding-bottom: 4px;
}

.vendor-card-title-stack .vendor-card-pills {
  row-gap: 5px;
  padding-bottom: 2px;
}

.vendor-card-logo-stack .vendor-status-pill,
.vendor-card-logo-stack .vendor-binder-pill {
  min-height: 22px;
  padding-inline: 8px;
  font-size: 0.66rem;
}

.vendor-badge-tray {
  gap: 7px;
  min-height: 52px;
  margin-top: 24px;
}

.vendor-badge {
  width: 48px;
  height: 48px;
}

.vendor-badge strong {
  width: 46px;
  height: 46px;
  padding: 4px;
  border-radius: 50%;
  font-size: 0.68rem;
  line-height: 1.05;
  text-align: center;
}

.vendor-badge.empty {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.vendor-strip-badge,
.vendor-strip-badge-slot {
  width: 74px;
  min-width: 74px;
  height: 74px;
}

.vendor-strip-badge strong {
  font-size: 0.72rem;
  line-height: 1.05;
}

/* Messaging workspace */
.chat-launcher {
  z-index: 91;
  min-width: 128px;
  min-height: 44px;
  border-radius: 7px;
  box-shadow: 0 12px 28px rgba(23, 23, 23, 0.2);
}

.chat-drawer {
  z-index: 90;
  width: min(840px, calc(100vw - 36px));
  height: min(700px, calc(100vh - 96px));
  max-height: min(700px, calc(100vh - 96px));
  border-radius: 10px;
  box-shadow: 0 28px 76px rgba(23, 23, 23, 0.24);
  filter: none;
}

.chat-header {
  min-height: 68px;
  padding: 14px 18px;
  background: var(--ui-surface-solid);
}

.chat-header span {
  color: var(--ui-gold-strong);
  letter-spacing: 0.07em;
}

.chat-header strong {
  font-size: 1.03rem;
}

.chat-close-button {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  box-shadow: none;
}

.chat-shell {
  grid-template-columns: 276px minmax(0, 1fr);
}

.chat-thread-rail {
  background: color-mix(in srgb, var(--ui-surface-muted) 72%, var(--ui-surface-solid));
}

.chat-rail-heading {
  min-height: 49px;
  padding: 9px 11px;
}

.chat-rail-heading .quiet-button,
.chat-thread-tools .quiet-button {
  border-radius: 5px;
}

.floating-chat-thread-list {
  gap: 4px;
  padding: 7px;
}

.floating-chat-thread {
  grid-template-columns: 40px minmax(0, 1fr);
  min-height: 62px;
  gap: 10px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

.floating-chat-thread:hover,
.floating-chat-thread.active {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-raised);
  box-shadow: 0 3px 10px rgba(43, 31, 17, 0.07);
}

.floating-chat-thread.active {
  box-shadow: inset 3px 0 0 var(--ui-gold), 0 3px 10px rgba(43, 31, 17, 0.07);
}

.floating-chat-thread img,
.floating-chat-thread .message-thread-placeholder {
  width: 40px;
  height: 50px;
  border-radius: 4px;
}

.chat-context {
  min-height: 49px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--ui-gold-soft) 58%, var(--ui-surface-solid));
  font-size: 0.72rem;
  letter-spacing: 0.025em;
}

.chat-thread-tools {
  gap: 6px;
  padding: 7px 12px;
  background: var(--ui-surface-solid);
}

.chat-messages {
  gap: 12px;
  padding: 20px;
  background:
    linear-gradient(var(--ui-border), var(--ui-border)) 0 0 / 100% 1px no-repeat,
    color-mix(in srgb, var(--ui-surface-muted) 46%, var(--ui-surface-solid));
}

.chat-message {
  max-width: min(82%, 520px);
  border-radius: 9px 9px 9px 3px;
  box-shadow: 0 3px 12px rgba(33, 29, 24, 0.055);
}

.chat-message.buyer,
.chat-message.is-own,
.chat-message.own {
  border-radius: 9px 9px 3px;
}

.chat-offer-card {
  border-radius: 7px;
}

.chat-form {
  gap: 9px;
  padding: 13px 16px 15px;
  background: var(--ui-surface-solid);
}

.chat-form textarea {
  min-height: 82px;
  border-radius: 7px;
}

.chat-attachment-picker,
.chat-form .primary-button {
  border-radius: 6px;
}

.message-thread-toolbar {
  border-radius: 7px;
}

.message-thread-tabs button,
.message-unread-toggle,
.message-thread-search input {
  border-radius: 5px;
}

.message-thread-item {
  border-radius: 7px;
  box-shadow: 0 3px 12px rgba(33, 29, 24, 0.045);
}

/* Vendor Dashboard and tool navigation */
.inventory-view-toggle {
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 8px;
  background: var(--ui-surface-solid);
  box-shadow: 0 4px 14px rgba(32, 28, 22, 0.055);
}

.inventory-view-toggle label {
  min-height: 46px;
  border-width: 0 1px 0 0;
  border-color: var(--ui-border);
  border-radius: 0;
  background: transparent;
  font-size: 0.74rem;
  letter-spacing: 0.025em;
}

.inventory-view-toggle label:last-child {
  border-right: 0;
}

.inventory-view-toggle label:has(input:checked) {
  border-color: var(--ui-gold-strong);
  background: var(--ui-gold-strong);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, white 38%, transparent);
}

.seller-workspace-head {
  min-height: 64px;
  margin-bottom: 16px;
  padding: 0 2px 14px;
}

.seller-workspace-head h3 {
  font-size: 1.22rem;
}

.seller-workspace-head > span {
  border-radius: 5px;
}

.seller-ops-panel {
  gap: 18px;
  border-radius: 9px;
}

.seller-ops-stats {
  border-radius: 6px;
}

.seller-order-nav {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
}

.seller-order-nav button {
  min-height: 43px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: var(--ui-surface-solid);
}

.seller-order-nav button:last-child {
  border-right: 0;
}

.seller-order-queue-heading,
.seller-order-card,
.seller-power-tool,
.closed-shop-panel {
  border-radius: 7px;
}

.seller-tool-links {
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 6px;
}

.seller-tool-links .quiet-button {
  min-height: 42px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.listing-management-tabs {
  width: fit-content;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 6px;
  background: var(--ui-surface-solid);
}

.listing-management-tab {
  min-height: 40px;
  border-width: 0 1px 0 0;
  border-radius: 0;
}

.listing-management-tab:last-child {
  border-right: 0;
}

.shop-view-toggle {
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface-solid);
}

.shop-view-toggle .quiet-button {
  min-height: 42px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shop-view-toggle .quiet-button:last-child {
  border-right: 0;
}

/* Listing tiles and detail workspace */
.card-tile {
  border-radius: 9px;
  box-shadow: 0 5px 18px rgba(42, 29, 12, 0.065);
}

.card-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(42, 29, 12, 0.11);
}

.card-image-button {
  border-bottom: 1px solid var(--ui-border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(241, 237, 229, 0.88));
}

html[data-theme="dark"] .card-image-button {
  background: linear-gradient(135deg, #242a25, #1c211d);
}

.tile-body {
  padding: 16px 15px 12px;
}

.tile-top {
  gap: 12px;
  align-items: start;
}

.tile-top h3 {
  line-height: 1.22;
}

.tile-actions {
  gap: 7px;
  padding: 11px 14px 14px;
  border-top: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface-muted) 52%, var(--ui-surface-solid));
}

.tile-actions button {
  border-radius: 6px;
}

.listing-detail-card {
  width: min(1120px, 100%);
  padding: 0;
  border-radius: 10px;
  background: var(--ui-surface-solid);
}

.listing-detail-card > .section-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  align-items: center;
  margin: 0;
  padding: 17px 20px;
  background: color-mix(in srgb, var(--ui-surface-solid) 94%, transparent);
  backdrop-filter: blur(12px);
}

.listing-detail-card .section-heading h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
}

.listing-detail-card .section-heading .quiet-button {
  border-radius: 6px;
}

.listing-detail-card .detail-layout {
  padding: clamp(18px, 2.5vw, 28px);
}

.main-photo {
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(239, 235, 227, 0.86));
}

html[data-theme="dark"] .main-photo {
  background: linear-gradient(135deg, #292f2a, #1d221e);
}

.detail-info > h3 {
  margin-block: 4px 10px;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.08;
}

.spec-list {
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 7px;
}

.spec-list div {
  min-height: 72px;
  border-width: 0 1px 1px 0;
  border-radius: 0;
  background: var(--ui-surface-solid);
}

.purchase-row {
  gap: 8px;
  padding-block: 14px;
  border-block: 1px solid var(--ui-border);
}

.purchase-row button,
.listing-offer-actions button,
.report-form-actions button {
  border-radius: 6px;
}

.thumb {
  width: 64px;
  height: 76px;
  min-height: 76px;
  border-radius: 6px;
}

.thumb img {
  border-radius: 3px;
}

.listing-trust-panel,
.listing-offer-form,
.listing-report-form {
  border-radius: 7px;
}

.image-zoom-card {
  border-radius: 10px;
}

.image-zoom-actions .quiet-button {
  border-radius: 6px;
}

@media (max-width: 760px) {
  .image-zoom-card {
    width: 100%;
  }

  .image-zoom-stage {
    height: calc(100dvh - 90px);
    min-height: 0;
    padding: 12px;
  }

  .image-zoom-stage img {
    max-width: 100%;
    max-height: calc(100dvh - 122px);
  }

  .topbar {
    border-radius: 0 0 7px 7px;
  }

  .vendor-card-head {
    min-height: 122px;
    margin-bottom: 10px;
  }

  .vendor-badge {
    width: 44px;
    height: 44px;
  }

  .chat-drawer {
    inset: 8px;
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 8px;
  }

  .chat-shell {
    grid-template-columns: 1fr;
  }

  .chat-thread-rail {
    max-height: 170px;
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }

  .floating-chat-thread-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 72vw);
    overflow-x: auto;
  }

  .inventory-view-toggle {
    overflow-x: auto;
    border-radius: 7px;
  }

  .inventory-view-toggle label {
    min-width: 112px;
  }

  .listing-detail-card {
    max-height: calc(100dvh - 16px);
  }
}

/* Final authentication composition: align directly to the page heading. */
.account-layout {
  width: 100%;
  max-width: 1040px;
  grid-template-columns: minmax(380px, 430px) minmax(400px, 480px);
  gap: clamp(54px, 7vw, 90px);
  justify-content: start;
  margin-inline: auto;
}

.login-panel {
  width: 100%;
  padding: 28px 30px;
}

.login-marketing {
  min-height: 440px;
}

.login-marketing > img {
  width: min(100%, 440px);
}

@media (max-width: 960px) {
  .account-layout {
    grid-template-columns: minmax(330px, 410px) minmax(320px, 1fr);
    gap: 36px;
  }

  .login-marketing > img {
    width: min(100%, 390px);
  }
}

@media (max-width: 760px) {
  .account-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .login-marketing {
    min-height: 280px;
  }

  .login-marketing > img {
    width: min(84vw, 350px);
  }
}

/* Growth Foundation: dedicated Host-only measurement workspace */
.growth-page { max-width: 1380px; }
.growth-hero {
  display: flex; align-items: end; justify-content: space-between; gap: 28px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.growth-hero h2 { margin: 3px 0 8px; }
.growth-hero p:last-child { max-width: 760px; margin: 0; color: var(--muted); }
.growth-gate, .growth-toolbar, .growth-panel {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  box-shadow: 0 14px 34px rgba(59, 40, 16, 0.06);
}
.growth-gate { margin-top: 24px; padding: 28px; }
.growth-gate p { color: var(--muted); }
.growth-workspace { display: grid; gap: 18px; margin-top: 24px; }
.growth-toolbar { display: flex; align-items: end; gap: 14px; padding: 18px 20px; }
.growth-toolbar > div { margin-right: auto; }
.growth-toolbar label { display: grid; gap: 5px; min-width: 150px; }
.growth-toolbar label span, .growth-summary-grid span, .growth-detail-grid span {
  color: var(--muted); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.growth-summary-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.growth-summary-grid article, .growth-detail-grid article {
  display: grid; align-content: start; gap: 5px; min-width: 0;
  border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: 8px; background: linear-gradient(135deg, var(--surface), var(--surface-soft));
}
.growth-summary-grid article { min-height: 118px; padding: 18px; }
.growth-summary-grid strong { font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1; }
.growth-summary-grid small, .growth-detail-grid small { color: var(--muted); }
.growth-dashboard-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.growth-panel { min-width: 0; padding: 20px; }
.growth-funnel-panel { grid-column: 1 / -1; }
.growth-funnel { display: grid; gap: 10px; margin-top: 16px; }
.growth-funnel-step {
  display: grid; grid-template-columns: minmax(150px, 220px) minmax(120px, 1fr) 70px;
  align-items: center; gap: 12px;
}
.growth-funnel-step span { font-weight: 750; }
.growth-funnel-step strong { text-align: right; }
.growth-funnel-step i, .growth-ranked-row i {
  display: block; overflow: hidden; height: 9px; border-radius: 2px; background: var(--surface-soft);
}
.growth-funnel-step i b, .growth-ranked-row i b {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
}
.growth-detail-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px;
}
.growth-detail-grid article { min-height: 92px; padding: 14px; }
.growth-detail-grid strong { font-size: 1.55rem; }
.growth-ranked-list { display: grid; gap: 13px; margin-top: 16px; }
.growth-ranked-row { display: grid; gap: 7px; }
.growth-ranked-row > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.growth-ranked-row strong {
  overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap;
}
.growth-ranked-row span { color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 880px) {
  .growth-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .growth-dashboard-grid { grid-template-columns: 1fr; }
  .growth-funnel-panel { grid-column: auto; }
}
@media (max-width: 620px) {
  .growth-hero, .growth-toolbar { align-items: stretch; flex-direction: column; }
  .growth-toolbar > div { margin-right: 0; }
  .growth-summary-grid, .growth-detail-grid { grid-template-columns: 1fr; }
  .growth-funnel-step { grid-template-columns: 1fr 56px; }
  .growth-funnel-step i { grid-column: 1 / -1; grid-row: 2; }
}