.dash-shell {
  display: flex;
  min-height: 100vh;
  background: var(--pm-surface);
}

.dash-sidebar {
  display: none;
}

.dash-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-avatar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.dash-save-photo-btn {
  padding: 6px 14px;
  font-size: 12px;
  width: auto;
  border-radius: 8px;
}

.dash-avatar-msg {
  display: none;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
}

/* Dark-theme validation tints — the --pm-*-bg vars are light (brand.css)
   and looked washed-out on the dark dashboard/wizard surfaces. */
.dash-avatar-msg--success {
  background: rgba(46, 204, 113, 0.12);
  color: #6ee7a8;
  border: 1px solid rgba(46, 204, 113, 0.4);
}

.dash-avatar-msg--error {
  background: rgba(239, 106, 106, 0.12);
  color: #ef8a8a;
  border: 1px solid rgba(239, 106, 106, 0.5);
}

.dash-profile-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-plan-btn {
  width: auto;
  padding: 7px 16px;
  font-size: 13px;
  border-radius: 8px;
  cursor: default;
}

.dash-plan-btn:hover {
  transform: none;
  box-shadow: none;
}

.dash-upgrade-link {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.dash-avatar-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dash-avatar-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid var(--pm-border);
  background: var(--pm-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  cursor: pointer;
}

.dash-avatar-circle:hover {
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.dash-avatar-placeholder {
  font-size: 48px;
  line-height: 1;
  opacity: 0.4;
}

.dash-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.dash-avatar-img.visible {
  display: block;
}

.dash-avatar-img.visible + .dash-avatar-placeholder,
.dash-avatar-circle:has(.dash-avatar-img.visible) .dash-avatar-placeholder {
  display: none;
}

.dash-avatar-hint {
  font-size: 12px;
  color: var(--pm-muted);
  font-weight: 400;
}

.dash-name-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s;
  width: 100%;
  font-family: var(--pm-font);
}

.dash-name-toggle:hover {
  background: var(--pm-surface);
}

.dash-name-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--pm-primary);
  line-height: 1.3;
}

.dash-name-arrow {
  font-size: 10px;
  color: var(--pm-muted);
  transition: transform 0.2s;
}

.dash-name-toggle--open .dash-name-arrow {
  transform: rotate(180deg);
}

.dash-profile-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--pm-border);
}

.dash-panel-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dpv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pm-text);
  line-height: 1.4;
}

.dpv-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 13px;
}

.dpv-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  color: var(--pm-text);
}

.dash-panel-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dpe-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dash-panel-edit .pm-input {
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 8px;
}

/* Contact row mirrors .pm-phone-row: a compact country selector (~30%)
   next to a wide number field. The dial code now lives inside each
   option ("SS +211"), so the standalone .dpe-contact-code hint is
   redundant and hidden — the two-column grid stays clean. */
.dpe-contact-row {
  display: grid;
  grid-template-columns: minmax(84px, 30%) 1fr;
  gap: 8px;
  align-items: center;
}

.dpe-contact-country {
  padding: 8px 6px !important;
  font-size: 12px !important;
  width: 100%;
  min-width: 0;
}

.dpe-contact-code {
  display: none;
}

.dpe-contact-number {
  min-width: 0;
}

.dash-panel-msg {
  display: none;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 8px;
  text-align: center;
}

.dash-panel-msg--success {
  background: var(--pm-success-bg);
  color: var(--pm-success-text);
  border: 1px solid var(--pm-success-border);
}

.dash-panel-msg--error {
  background: var(--pm-error-bg);
  color: var(--pm-error-text);
  border: 1px solid var(--pm-error-border);
}

.dash-shop-btn {
  margin-top: 0;
  padding: 10px 16px;
  font-size: 14px;
}

.shop-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--pm-border);
  background: var(--pm-surface);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.shop-card:hover {
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.shop-card-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--pm-border);
  background: var(--pm-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.shop-card-logo-placeholder {
  font-size: 20px;
  line-height: 1;
  opacity: 0.35;
}

.shop-card-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.shop-card-logo-img.visible {
  display: block;
}

.shop-card-logo-img.visible + .shop-card-logo-placeholder,
.shop-card-logo:has(.shop-card-logo-img.visible) .shop-card-logo-placeholder {
  display: none;
}

.shop-card-info {
  flex: 1;
  min-width: 0;
}

.shop-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-card-category {
  font-size: 11px;
  color: var(--pm-muted);
  line-height: 1.3;
}

.shop-card-arrow {
  font-size: 18px;
  color: var(--pm-muted);
  flex-shrink: 0;
}

.shop-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pm-border);
  margin-bottom: 4px;
}

.shop-detail-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--pm-primary);
}

.dash-shop-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--pm-border);
}

.shop-logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.shop-logo-circle {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  border: 2px solid var(--pm-border);
  background: var(--pm-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.shop-logo-circle:hover {
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.shop-logo-placeholder {
  font-size: 32px;
  line-height: 1;
  opacity: 0.35;
}

.shop-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.shop-logo-img.visible {
  display: block;
}

.shop-logo-img.visible + .shop-logo-placeholder,
.shop-logo-circle:has(.shop-logo-img.visible) .shop-logo-placeholder {
  display: none;
}

.shop-desc-input {
  resize: vertical;
  min-height: 44px;
  font-family: var(--pm-font);
  font-size: 12px;
  line-height: 1.4;
}

.shop-char-count {
  font-weight: 400;
  color: var(--pm-muted);
  font-size: 10px;
  margin-left: 4px;
}

.dash-shop-panel .pm-input {
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 8px;
}

.shop-section-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--pm-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shop-new-listing-btn {
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.shop-gallery-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shop-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: 10px;
  border: 1px solid var(--pm-border);
  background: var(--pm-surface);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: var(--pm-font);
}

.shop-tile:hover {
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.shop-tile-icon {
  font-size: 24px;
  line-height: 1;
}

.shop-tile-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--pm-text);
}

.shop-tile-count {
  font-size: 10px;
  color: var(--pm-muted);
  min-height: 14px;
}

.shop-listing-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--pm-border);
}

.shop-listing-form .pm-input {
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 8px;
}

.shop-media-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shop-media-btn {
  flex: 1 1 auto;
  min-width: 90px;
  min-height: 34px;
  padding: 7px 10px !important;
  font-size: 11px !important;
  width: auto !important;
}

.shop-staging-counts {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--pm-muted);
  font-weight: 500;
}

.wz-media-hint {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--pm-muted);
}

.wz-audio-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.wz-audio-status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
  border: 1px solid var(--pm-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--pm-text, #e6efec);
}
.wz-audio-status--info {
  border-color: rgba(90, 170, 255, 0.4);
  background: rgba(90, 170, 255, 0.10);
}
.wz-audio-status--error {
  border-color: rgba(239, 106, 106, 0.5);
  background: rgba(239, 106, 106, 0.12);
  color: #ef8a8a;
}
.wz-audio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.wz-audio-title {
  font-size: 13px;
  font-weight: 600;
}
.wz-audio-remove {
  background: none;
  border: none;
  color: #ef6a6a;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
.wz-audio-player {
  width: 100%;
  margin-bottom: 10px;
}
.wz-audio-field {
  margin-bottom: 6px;
}
.wz-audio-range {
  width: 100%;
  margin: 4px 0 2px;
}
.wz-audio-startval {
  font-size: 12px;
  color: var(--pm-muted);
  text-align: right;
}
.wz-audio-mute {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  cursor: pointer;
}
.wz-audio-mute input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.listing-photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.listing-thumb {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--pm-border);
  background: #000;
}

.listing-thumb img,
.listing-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.listing-thumb-remove {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}

.listing-thumb-remove:hover {
  background: rgba(220, 38, 38, 0.85);
}

.listing-thumb-video-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 3px;
}

/* Ghost tile shown while a photo or video is uploading. The progress bar
   along the bottom is driven by XHR upload progress events from
   apiUpload / apiUploadFile so the user never sees a frozen UI on slow
   mobile uploads. */
.listing-thumb--pending {
  background: rgba(20, 28, 24, 0.85);
  border: 1px dashed rgba(74, 222, 128, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.listing-thumb-pending-label {
  color: #d1fae5;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 6px;
  pointer-events: none;
}
.listing-thumb-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255,255,255,0.12);
}
.listing-thumb-pct {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  transition: width 0.15s ease-out;
}

/* ---- Per-file upload state tiles (shared upload-queue.js) ---------------
   Queued / Uploading% / Processing / Failed tiles. Uploaded files leave the
   queue and render as real thumbnails (with a ✓ done badge) instead. */
.listing-thumb--state {
  background: rgba(20, 28, 24, 0.85);
  border: 1px dashed rgba(74, 222, 128, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  gap: 6px;
  padding: 6px;
}
.listing-thumb--queued {
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.55);
  background: rgba(30, 41, 38, 0.85);
}
.listing-thumb--processing {
  border-color: rgba(250, 204, 21, 0.6);
}
.listing-thumb--failed {
  border: 1px solid rgba(248, 113, 113, 0.7);
  background: rgba(40, 20, 20, 0.9);
}

/* Indeterminate (Processing): bytes are on the server but it hasn't
   confirmed yet, so we animate a sweeping bar instead of a fixed %. */
.listing-thumb-pct--indeterminate {
  width: 40% !important;
  background: linear-gradient(90deg, rgba(250,204,21,0.2), #facc15, rgba(250,204,21,0.2));
  animation: pm-upload-indeterminate 1.1s ease-in-out infinite;
}
@keyframes pm-upload-indeterminate {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.upload-state-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}
.upload-state-badge--failed {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}
.upload-state-reason {
  color: #fecaca;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  padding: 0 4px;
  max-height: 3.9em;
  overflow: hidden;
}
.upload-state-actions {
  display: flex;
  gap: 6px;
}
.upload-state-btn {
  font-size: 10px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
}
.upload-state-btn--retry {
  background: #22c55e;
  color: #06210f;
}
.upload-state-btn--remove {
  background: rgba(255,255,255,0.12);
  color: #e5e7eb;
}

/* ✓ badge on a successfully uploaded thumbnail. */
.listing-thumb-done-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  background: rgba(34, 197, 94, 0.92);
  color: #06210f;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 50%;
  pointer-events: none;
}

/* ---- Batch completion summary ----------------------------------------- */
.upload-summary {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #131a18;
  border: 1px solid rgba(74, 222, 128, 0.35);
}
.upload-summary--has-failed {
  border-color: rgba(248, 113, 113, 0.5);
}
.upload-summary-title {
  font-size: 13px;
  font-weight: 700;
  color: #ecfdf5;
  margin-bottom: 4px;
}
.upload-summary-line {
  font-size: 12px;
  line-height: 1.5;
}
.upload-summary-line--ok { color: #86efac; }
.upload-summary-line--bad { color: #fca5a5; }
.upload-summary-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.upload-summary-btn {
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
}
.upload-summary-btn--retry {
  background: #f59e0b;
  color: #1f1300;
}
.upload-summary-btn--continue {
  background: #22c55e;
  color: #06210f;
}

/* RTL: mirror the corner badges + keep action rows readable. */
[dir="rtl"] .listing-thumb-done-badge { left: auto; right: 2px; }
[dir="rtl"] .upload-state-actions,
[dir="rtl"] .upload-summary-actions { flex-direction: row-reverse; }

.shop-gallery-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 8px;
  border-top: 1px solid var(--pm-border);
}

.shop-back-btn {
  background: none;
  border: none;
  color: var(--pm-accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--pm-font);
  padding: 0;
}

.listing-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pm-border);
}

.listing-card:last-child {
  border-bottom: none;
}

.listing-card--clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 10px 6px;
  transition: background 0.15s;
}

.listing-card--clickable:hover {
  background: var(--pm-surface);
}

.listing-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-primary);
  line-height: 1.3;
}

.listing-card-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-accent);
}

.listing-card-meta {
  font-size: 11px;
  color: var(--pm-muted);
  line-height: 1.3;
}

.listing-card-thumbs {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
}

.listing-card-thumb-img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--pm-border);
}

.shop-viewer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--pm-bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.shop-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pm-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-primary);
}

.shop-viewer-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--pm-muted);
  padding: 0;
  line-height: 1;
}

.shop-viewer-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  min-height: 180px;
}

.shop-viewer-media {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  object-fit: contain;
}

video.shop-viewer-media {
  width: 100%;
}

.shop-viewer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
}

.shop-viewer-nav-btn {
  padding: 5px 12px !important;
  font-size: 12px !important;
  width: auto !important;
  min-width: 60px;
}

.shop-viewer-counter {
  font-size: 11px;
  color: var(--pm-muted);
  min-width: 40px;
  text-align: center;
}

.shop-viewer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--pm-border);
}

.shop-like-btn {
  background: none;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--pm-text);
  font-family: var(--pm-font);
  transition: border-color 0.2s;
}

.shop-like-btn:hover {
  border-color: var(--pm-accent);
  color: #e11d48;
}

.shop-download-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--pm-muted);
  cursor: pointer;
}

.shop-download-toggle input[type="checkbox"] {
  accent-color: var(--pm-accent);
}



.dpe-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dpe-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--pm-text);
}

.dpe-hint {
  font-size: 10px;
  color: var(--pm-text-dim, #8a9691);
  margin-top: 2px;
  line-height: 1.4;
}

.form-optional {
  font-size: 10px;
  font-weight: 400;
  color: var(--pm-text-dim, #8a9691);
  margin-left: 4px;
}

.form-required {
  color: #e5484d;
  margin-left: 3px;
  font-weight: 700;
}
[dir="rtl"] .form-optional { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .form-required { margin-left: 0; margin-right: 3px; }


.dash-panel-btn {
  width: 100%;
  padding: 8px 14px;
  font-size: 12px;
}

.dash-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dash-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 52px;
  border-bottom: 1px solid var(--pm-border);
  background: var(--pm-bg);
  flex-shrink: 0;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.topnav-left,
.topnav-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Always-visible Login / Logout pill in the top bar. Sized so the
   label is unmissable on every viewport — text NEVER collapses. */
.topnav-auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--pm-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.topnav-auth-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.14); }
.topnav-auth-pill:active { transform: translateY(0); }
.topnav-auth-pill-icon { font-size: 15px; line-height: 1; }
.topnav-auth-pill-text { line-height: 1; }

.topnav-auth-pill--logout {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
}
.topnav-auth-pill--logout:hover { background: #b91c1c; color: #ffffff; }

.topnav-auth-pill--login {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}
.topnav-auth-pill--login:hover { background: #15803d; color: #ffffff; }

@media (max-width: 480px) {
  .topnav-auth-pill { padding: 7px 10px; font-size: 12px; margin-left: 4px; }
}

.topnav-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--pm-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--pm-text);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.topnav-btn:hover {
  background: var(--pm-surface);
  color: var(--pm-accent);
}

.topnav-btn.active {
  background: rgba(37, 99, 235, 0.08);
  color: var(--pm-accent);
}

.topnav-icon {
  font-size: 15px;
  line-height: 1;
}

.topnav-icon-btn {
  padding: 6px 8px;
}

.topnav-icon-btn .topnav-icon {
  font-size: 17px;
}

.topnav-label {
  display: inline;
}

.topnav-caret {
  font-size: 8px;
  color: var(--pm-muted);
}

.topnav-dropdown {
  position: relative;
}

.topnav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--pm-bg);
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  min-width: 160px;
  z-index: 300;
  padding: 4px;
  overflow: hidden;
}

.topnav-dropdown-menu--right {
  left: auto;
  right: 0;
}

.topnav-dropdown.open .topnav-dropdown-menu {
  display: block;
}

.topnav-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  font-family: var(--pm-font);
  font-size: 13px;
  color: var(--pm-text);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s;
}

.topnav-dropdown-item:hover {
  background: var(--pm-surface);
  color: var(--pm-accent);
}

.topnav-logout-item {
  color: #ef4444;
}

.topnav-logout-item:hover {
  background: #fef2f2;
  color: #dc2626;
}

.dash-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  background: var(--pm-surface);
}

.dash-panel {
  display: none;
}

.dash-panel.active {
  display: block;
}

.dash-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.dash-panel-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--pm-primary);
  margin: 0;
}

.dash-panel-placeholder {
  padding: 48px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--pm-muted);
  background: var(--pm-bg);
  border-radius: 12px;
  border: 1px dashed var(--pm-border);
}

.dash-welcome {
  text-align: center;
  padding: 60px 24px;
}

.dash-welcome h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--pm-primary);
  margin: 0 0 8px;
}

.dash-welcome p {
  font-size: 14px;
  color: var(--pm-muted);
  margin: 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.topnav-avatar-wrap {
  display: flex;
  align-items: center;
  margin-right: 6px;
  flex-shrink: 0;
}

.topnav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--pm-border);
  background: var(--pm-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
  flex-shrink: 0;
}

.topnav-avatar:hover {
  border-color: var(--pm-accent);
}

.topnav-avatar-placeholder {
  font-size: 18px;
  line-height: 1;
  opacity: 0.5;
}

.topnav-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.topnav-avatar-img.visible {
  display: block;
}

.topnav-avatar-img.visible + .topnav-avatar-placeholder {
  display: none;
}

.topnav-plan-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--pm-font);
  background: #f0f4ff;
  color: var(--pm-accent);
  border: 1px solid rgba(37, 99, 235, 0.15);
  white-space: nowrap;
  margin-left: 8px;
}

.topnav-plan-pill[data-plan="plus"] {
  background: linear-gradient(135deg, #fef9c3, #fde68a);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.2);
}

.topnav-plan-pill[data-plan="premium"] {
  background: linear-gradient(135deg, #fce7f3, #f9a8d4);
  color: #831843;
  border-color: rgba(219, 39, 119, 0.2);
}

.topnav-upgrade-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--pm-font);
  background: var(--pm-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 4px;
  transition: background 0.15s, transform 0.1s;
}

.topnav-upgrade-btn:hover {
  background: #1d4ed8;
  transform: scale(1.03);
}

/* FIXED category row — STRUCTURAL FIX (cleanup10).
   ---------------------------------------------------------------
   The chip row used to be `position: sticky` inside the scrolling
   `.dash-content` container. Sticky's "in-flow → stuck" recompute ran
   every time the scroll container's content height changed (skeletons
   inserted, fetch returns, fonts load), and on every recompute the row
   visibly jumped down by 12px. Margins/top tweaks could not solve this
   — the recompute itself was the bug.

   New strategy: the chip row is now a SECOND FIXED BAR, exactly like
   the topbar. It is pinned at `top: var(--pm-topbar-h)` (immediately
   below the topbar), spans the full viewport width (`left: 0; right: 0`),
   and is OUT OF FLOW. Listings cannot scroll into it because it always
   paints on its own layer. The home panel reserves matching vertical
   space via `body.pm-modern #panel_home { padding-top: var(--pm-chip-row-h) }`
   in app-modern.css, so the first listing card lands exactly at the
   bottom of the chip row.

   z-index: 90 — above feed cards / video tiles (which sit at default
   `auto`), below the topbar (1000), below the More dropdown (1200),
   and below modals (1100+). */
.feed-header {
  position: fixed;
  top: var(--pm-topbar-h, 48px);
  left: 0;
  right: 0;
  z-index: 90;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px;
  background: var(--pm-bg, #0b0f0e);
  border-bottom: 1px solid var(--pm-border, #1f2a27);
  /* Keep backface-visibility (does NOT create a stacking context) for
     the same crisp-text reason as before. We intentionally do NOT use
     `transform` or `will-change: transform` — those would create a new
     stacking context and re-introduce the z-index ordering bug. */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

@media (max-width: 720px) {
  .feed-header {
    padding: 6px 14px 5px;
  }
}

.feed-category-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}

.feed-category-chips::-webkit-scrollbar {
  display: none;
}

/* Compact Category dropdown that replaces the old horizontal chip row.
   Sits OUTSIDE the overflow-x:auto chip container (as a direct .feed-header
   child) so the absolute menu is not clipped. Works for anonymous +
   logged-in users since feed filtering is never login-gated. */
.feed-cat-dd { position: relative; display: inline-flex; flex: 0 0 auto; }
.feed-cat-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--pm-border);
  background: var(--pm-bg); color: var(--pm-text);
  font-size: .85rem; font-weight: 700; line-height: 1;
  /* Uppercase nav treatment — matches the Providers chip
     (.feed-chip--providers) so CATEGORY and PROVIDERS read consistently. */
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; cursor: pointer;
}
.feed-cat-dd-btn:hover { border-color: var(--pm-accent); }
.feed-cat-dd-btn.is-active { color: #cfa94a; border-color: rgba(207, 169, 74, .55); }
.feed-cat-dd-caret { font-size: .7rem; line-height: 1; opacity: .8; }
.feed-cat-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0;
  z-index: 60; min-width: 200px; max-width: 260px;
  margin: 0; padding: 6px; list-style: none;
  background: #131a18; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  max-height: 60vh; overflow-y: auto;
}
.feed-cat-menu[hidden] { display: none; }
.feed-cat-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  font-size: .9rem; color: var(--pm-text); cursor: pointer; outline: none;
}
.feed-cat-item:hover,
.feed-cat-item:focus { background: #1a2421; }
.feed-cat-item.is-selected { color: #cfa94a; }
.feed-cat-item.is-selected::after { content: "\2713"; font-size: .85rem; }
@media (max-width: 480px) {
  .feed-cat-menu { min-width: 180px; max-width: calc(100vw - 32px); }
}

/* Manual Home refresh affordance — pinned to the right of the chip row,
   outside the chips' horizontal scroll so it stays reachable. Tapping it
   intentionally reloads the feed (the feed no longer auto-reloads on every
   return). The `is-refreshing` state spins the icon while a fetch is in
   flight. */
.feed-refresh-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--pm-bg);
  color: var(--pm-text);
  border: 1px solid var(--pm-border);
  cursor: pointer;
  transition: all 0.15s;
}

.feed-refresh-btn:hover {
  border-color: var(--pm-accent);
  color: var(--pm-accent);
}

.feed-refresh-btn svg {
  width: 18px;
  height: 18px;
}

.feed-refresh-btn.is-refreshing {
  opacity: 0.6;
  pointer-events: none;
}

.feed-refresh-btn.is-refreshing svg {
  animation: feed-refresh-spin 0.8s linear infinite;
}

@keyframes feed-refresh-spin {
  to { transform: rotate(360deg); }
}

/* Pull-to-refresh indicator (mobile/touch only). A fixed, centered pill that
   slides down from behind the chip row as the user drags the feed down while
   scrolled to the top. JS (dashboard-nav.js) drives its transform/opacity
   during the gesture; the `is-resetting` class animates it back home, `is-ready`
   marks the threshold, and `is-refreshing` spins it while loadFeed() runs.
   Hidden on precise-pointer (desktop) devices — the refresh button stays. */
.feed-ptr {
  position: fixed;
  top: var(--pm-chip-row-h, 52px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
  transform: translateY(-60px);
  opacity: 0;
}
.feed-ptr.is-resetting {
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.feed-ptr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pm-bg-elev, #131a18);
  color: var(--pm-text);
  border: 1px solid var(--pm-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.feed-ptr-icon svg {
  width: 20px;
  height: 20px;
  transition: transform 0.15s ease;
}
.feed-ptr.is-ready .feed-ptr-icon {
  color: var(--pm-accent);
  border-color: var(--pm-accent);
}
.feed-ptr.is-ready .feed-ptr-icon svg {
  transform: rotate(180deg);
}
.feed-ptr.is-refreshing .feed-ptr-icon svg {
  animation: feed-refresh-spin 0.8s linear infinite;
}

/* Desktop / precise-pointer devices never engage pull-to-refresh — the JS
   gesture is also touch-gated, this just guarantees the pill never shows. */
@media (hover: hover) and (pointer: fine) {
  .feed-ptr { display: none; }
}

.feed-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--pm-font);
  background: var(--pm-bg);
  color: var(--pm-text);
  border: 1px solid var(--pm-border);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.feed-chip:hover {
  background: var(--pm-surface);
  border-color: var(--pm-accent);
  color: var(--pm-accent);
}

.feed-chip.active {
  background: var(--pm-primary, #1e293b);
  color: #fff;
  border-color: var(--pm-primary, #1e293b);
}

/* "More" dropdown trigger + menu */
.feed-chip-more {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
.feed-chip--more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.feed-chip-caret {
  font-size: 10px;
  line-height: 1;
  opacity: 0.85;
  transition: transform 0.15s ease;
}
.feed-chip-more.open .feed-chip-caret { transform: rotate(180deg); }

/* position: fixed so the menu escapes the chip bar's overflow-x:auto clipping;
   actual top/left are set inline by dashboard-nav.js on open. */
.feed-chip-more-menu {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 180px;
  background: var(--pm-bg-elev-2, #1a2421);
  border: 1px solid var(--pm-border, #1f2a27);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  padding: 6px;
  display: none;
  z-index: 1200;
}
.feed-chip-more.open .feed-chip-more-menu { display: block; }

.feed-chip-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: var(--pm-text, #eaf3ee);
  text-align: start;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--pm-font);
  white-space: nowrap;
}
.feed-chip-more-item:hover,
.feed-chip-more-item.active {
  background: var(--pm-accent-soft, #0f3a2c);
  color: var(--pm-accent, #10b981);
}


/* Light-mode fallback styles for the new card pieces (used when pm-modern
   isn't on, e.g. existing white desktop view). */
.feed-card-actions {
  margin-top: 10px;
  display: flex;
  /* Allow wrap on narrow phones so the 5 pills (Follow / Like /
     Comment / Share / Chat) can never push the leftmost one off
     the visible area. Previously this row was `justify-content:
     flex-end` with no wrap, which clipped Follow on desktop and
     hid it entirely on mobile. */
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  align-items: center;
}
.feed-card-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--pm-primary, #1e293b);
  cursor: pointer;
  font-family: var(--pm-font);
  min-height: 30px;
}
.feed-card-action svg { width: 16px; height: 16px; }
.feed-card-action:hover { opacity: 0.7; }

.feed-card-seller { font-weight: 600; }

.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Media-dominant card (Play Store polish): the card IS the media. The text +
   actions live in an absolutely-positioned overlay at the bottom (see
   .feed-card-body) over a gradient scrim — there is NO solid dark body panel
   below the photo. #000 background so any letterbox reads as neutral matte. */
.feed-card {
  background: #000;
  border-radius: 12px;
  /* `position: relative` so the floating Follow + chip can be
     positioned against the card's top-right corner. The chip
     overlays the thumbnail (top-right) which is the standard
     follow-button placement (Twitter / Instagram / X). */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
  border: 1px solid var(--pm-border);
}

.feed-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.feed-card-thumb {
  position: relative;
  width: 100%;
  /* 4:5 portrait so the media dominates the card and the bottom text/action
     overlay has room without covering the subject. */
  padding-top: 125%;
  background: #000;
  overflow: hidden;
}

/* All feed-card media — placeholder, image, video — fill the 16:9 thumb
   area. Hydration replaces .feed-card-thumb-pending with a real <img>
   or <video> as a direct child of .feed-card-thumb so this single rule
   applies cleanly with no nested-wrapper specificity fight. */
.feed-card-thumb > img,
.feed-card-thumb > video,
.feed-card-thumb > .feed-card-thumb-pending,
.feed-card-thumb > .feed-card-thumb-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.feed-card-thumb > img,
.feed-card-thumb > video {
  object-fit: cover;
  background: #000;
  border: 0;
}
/* Make the inline controls usable on small thumbs */
.feed-card-thumb > video::-webkit-media-controls-panel {
  background: rgba(0,0,0,0.4);
}

/* ---- Phase 3: in-card media carousel -------------------------------
   Lives INSIDE .feed-card-thumb / .mkt-listing-thumb (absolute inset:0)
   so it fills the existing 16:9 cover box and the existing media-viewer
   / card-open delegates keep working. The track is a flex row of full-
   width slides translated by the FeedCarousel controller. direction:ltr
   is forced so the translateX math is identical under RTL layouts. */
.feed-card-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.feed-card-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  direction: ltr;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  touch-action: pan-y;
}
.feed-card-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}
.feed-card-slide > img,
.feed-card-slide > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  background: #000;
}
/* Pure visual indicator — never interactive, so a tap on a dot can never
   be mistaken for a slide tap (which opens the media viewer). */
.feed-card-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  gap: 5px;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.feed-card-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.55);
  transition: background 0.2s ease, transform 0.2s ease;
}
.feed-card-carousel-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}
/* Mirror the cover sizing onto the market/search/seller card thumb. */
.mkt-listing-thumb {
  position: relative;
}
.mkt-listing-thumb .feed-card-carousel {
  position: absolute;
  inset: 0;
}

.feed-card-thumb-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #e6f7ef;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(16, 185, 129, 0.14), transparent 60%),
    #131a18;
}

.feed-card-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  pointer-events: none;
}

.feed-card-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}

/* Media-dominant overlay body: absolutely positioned over the bottom of the
   media with a gradient scrim so text/actions stay readable while the photo
   remains the dominant, uninterrupted surface (no solid dark panel). */
.feed-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 10px 10px;
  background: linear-gradient(to top,
    rgba(0,0,0,0.90) 0%,
    rgba(0,0,0,0.62) 42%,
    rgba(0,0,0,0.20) 78%,
    rgba(0,0,0,0) 100%);
}

.feed-card-title {
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.75);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-card-price {
  font-weight: 800;
  font-size: 16px;
  color: var(--pm-accent);
  margin-bottom: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.75);
}

.feed-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #e5e7eb;
  margin-bottom: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-card-badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.feed-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.feed-badge--category {
  background: #f0f4ff;
  color: var(--pm-accent);
}

.feed-badge--featured {
  background: linear-gradient(135deg, #fef9c3, #fde68a);
  color: #92400e;
}

.feed-badge--boosted {
  background: #ecfdf5;
  color: #059669;
}

.feed-badge--status {
  background: var(--pm-surface);
  color: var(--pm-muted);
}

.feed-card-cred {
  margin-top: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--pm-surface);
  overflow: hidden;
}

.feed-card-cred-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}

.feed-skeleton {
  background: var(--pm-bg);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--pm-border);
}

.feed-skeleton-thumb {
  width: 100%;
  padding-top: 56.25%;
  background: linear-gradient(90deg, var(--pm-surface) 25%, #e2e8f0 50%, var(--pm-surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.feed-skeleton-body {
  padding: 12px;
}

.feed-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--pm-surface) 25%, #e2e8f0 50%, var(--pm-surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  margin-bottom: 8px;
}

.feed-skeleton-line--short {
  width: 60%;
}

.feed-skeleton-line--price {
  width: 40%;
  height: 16px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.feed-load-more {
  text-align: center;
  padding: 20px 0;
}

.feed-load-btn {
  min-width: 160px;
}

.feed-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--pm-muted);
}

.feed-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.feed-empty-text {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}

.feed-empty-sub {
  font-size: 13px;
}

@media (max-width: 900px) {
  .feed-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .feed-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .topnav-plan-pill {
    display: none;
  }

  .topnav-upgrade-btn {
    display: none;
  }

  .feed-category-chips {
    gap: 6px;
  }

  .feed-chip {
    padding: 5px 10px;
    font-size: 12px;
  }
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 480px;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pm-bg);
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  font-family: var(--pm-font);
  font-size: 14px;
  color: var(--pm-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.settings-item:hover {
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

.settings-item-icon {
  font-size: 18px;
  line-height: 1;
}

.settings-item-label {
  flex: 1;
  font-weight: 500;
}

.settings-item-arrow {
  font-size: 18px;
  color: var(--pm-muted);
}

.settings-hint {
  margin: 4px 2px 12px;
  font-size: 12px;
  color: var(--pm-muted);
  line-height: 1.4;
}

.notif-toggle-row {
  cursor: pointer;
  margin-bottom: 8px;
}

.notif-toggle-row--master {
  border-color: var(--pm-accent);
}

.notif-toggle {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--pm-accent);
}

.settings-section {
  margin-top: 20px;
  max-width: 480px;
}

.settings-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-primary);
  margin: 0 0 12px;
}

.settings-layouts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-layout-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--pm-bg);
  border: 2px solid var(--pm-border);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  font-family: var(--pm-font);
  font-size: 11px;
  color: var(--pm-muted);
  transition: border-color 0.15s;
}

.settings-layout-option:hover {
  border-color: var(--pm-accent);
}

.settings-layout-option.selected {
  border-color: var(--pm-accent);
  background: rgba(37, 99, 235, 0.04);
  color: var(--pm-accent);
  font-weight: 600;
}

.layout-preview {
  width: 64px;
  height: 44px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  gap: 2px;
  background: var(--pm-border);
}

.layout-preview--1 .lp-sidebar { width: 18px; background: var(--pm-accent); opacity: 0.3; }
.layout-preview--1 .lp-main { flex: 1; background: var(--pm-surface); }

.layout-preview--2 { flex-direction: column; }
.layout-preview--2 .lp-top { height: 10px; background: var(--pm-accent); opacity: 0.3; }
.layout-preview--2 .lp-main { flex: 1; background: var(--pm-surface); }

.layout-preview--3 .lp-sidebar { width: 14px; background: var(--pm-accent); opacity: 0.3; }
.layout-preview--3 .lp-center { flex: 1; background: var(--pm-surface); }
.layout-preview--3 .lp-right { width: 16px; background: var(--pm-surface); }

.layout-preview--4 { flex-direction: column; }
.layout-preview--4 .lp-top { height: 10px; background: var(--pm-accent); opacity: 0.3; }
.layout-preview--4 .lp-left,
.layout-preview--4 .lp-right { flex: 1; }
.layout-preview--4 .lp-left { background: var(--pm-surface); }
.layout-preview--4 .lp-right { background: var(--pm-border); }

.layout-preview--5 .lp-full { flex: 1; background: var(--pm-surface); }

.settings-slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: var(--pm-bg);
  border-left: 1px solid var(--pm-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 1100;
  box-shadow: -4px 0 24px rgba(0,0,0,0.08);
}

.settings-slide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pm-border);
}

.settings-slide-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pm-primary);
}

.settings-slide-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.profile-slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* Desktop: a ~25% side panel, clamped so it never gets too narrow
     to read or so wide it dominates a large monitor. Mobile drops to
     full-screen via the max-width:640px override below. */
  width: clamp(360px, 25vw, 480px);
  background: var(--pm-bg);
  border-left: 1px solid var(--pm-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 300;
  box-shadow: -4px 0 24px rgba(0,0,0,0.08);
}

.profile-slide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pm-border);
}

.profile-slide-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pm-primary);
}

.profile-slide-body {
  padding: 20px 16px;
  /* Phase A fix — make sure the SAVE button at the bottom of the
     Edit Profile form is never hidden behind the bottom nav, the
     viewport edge, or the iOS home-indicator safe area. The body
     scrolls; the extra bottom padding guarantees the button can
     scroll fully into view and remain tappable. */
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-plan-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-upgrade-btn {
  padding: 6px 14px;
  font-size: 12px;
  width: auto;
}

.profile-photo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.profile-photo-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid var(--pm-border);
  background: var(--pm-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  position: relative;
}

.profile-photo-circle:hover {
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.profile-photo-placeholder {
  font-size: 40px;
  line-height: 1;
  opacity: 0.4;
}

.profile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.profile-photo-img.visible {
  display: block;
}

.profile-photo-img.visible + .profile-photo-placeholder {
  display: none;
}

.profile-photo-hint {
  font-size: 12px;
  color: var(--pm-muted);
}

.profile-name-section {
  text-align: center;
}

.profile-display-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--pm-primary);
}

.profile-info-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--pm-surface);
  border-radius: 10px;
  border: 1px solid var(--pm-border);
}

.profile-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pm-text);
}

.profile-info-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.profile-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  color: var(--pm-text);
}

.profile-edit-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-edit-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.profile-edit-toggle-btn {
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
}

.profile-contact-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 4px;
  align-items: center;
}

.profile-contact-country {
  padding: 8px 4px !important;
  font-size: 11px !important;
  width: auto;
  min-width: 60px;
}

.profile-contact-code {
  font-size: 11px;
  font-weight: 600;
  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
  min-width: 40px;
}

.profile-contact-number {
  min-width: 0;
}

.profile-shop-section {
  border-top: 1px solid var(--pm-border);
  padding-top: 16px;
}

.profile-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-primary);
  margin: 0 0 10px 0;
}

/* ── PROFILE PHASE A — clean, compact structure ──────────────────────
   .profile-id-card  : header (avatar + name) at the top of the panel.
   .profile-action-list / .profile-action :
     small, mobile-friendly action rows replacing the old ad-hoc
     name-toggle + shop section. Each row is a button with icon, label,
     and chevron. Hover/active states are subtle (no full-width white
     stretches), borders separate rows so the surface stays readable on
     dark mode. */
.profile-id-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 18px;
}
.profile-id-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--pm-text, #e6eeea);
  text-align: center;
  line-height: 1.25;
  /* Was a button in the previous design; kept as a plain flex row so
     the (now hidden) arrow span doesn't disturb centering. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
}

.profile-action-list {
  list-style: none;
  /* cleanup28 — center the action list inside the profile slide body
     and cap its width on wider screens so the My Listings / Edit
     Profile buttons don't stretch to a full ~360px+ wide bar that
     looks visually loud and unprofessional. On mobile (≤640px the
     slide-panel is 100% wide) the max-width still leaves a small
     side margin which keeps the buttons aligned with the avatar/name
     above instead of bleeding to the panel edge. */
  margin: 8px auto 18px;
  padding: 0;
  max-width: 320px;
  border-top: 1px solid var(--pm-border, #1f2a26);
  border-bottom: 1px solid var(--pm-border, #1f2a26);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
}
.profile-action-list li + li > .profile-action {
  border-top: 1px solid var(--pm-border, #1f2a26);
}
.profile-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  color: var(--pm-text, #e6eeea);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.profile-action:hover,
.profile-action:focus-visible {
  background: rgba(16, 185, 129, 0.08);
  outline: none;
}
.profile-action:active {
  background: rgba(16, 185, 129, 0.14);
}
.profile-action-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex: 0 0 auto;
  color: var(--pm-accent, #10b981);
}
.profile-action-label {
  flex: 1 1 auto;
  min-width: 0;
}
.profile-action-arrow {
  flex: 0 0 auto;
  color: var(--pm-muted, #7a8a83);
  font-size: 20px;
  line-height: 1;
}
.profile-action--danger {
  color: #e57373;
}
.profile-action--danger .profile-action-icon {
  color: #e57373;
}

/* RTL — flip the chevron so it points the natural reading direction. */
[dir="rtl"] .profile-action-arrow {
  transform: scaleX(-1);
}

/* Profile sub-page header (currently used by Edit Profile inline panel).
   Mirrors the look of the Settings subpage header so all profile
   sub-pages have a consistent, visible back arrow. */
.profile-subpage-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--pm-border, #1f2a26);
  margin-bottom: 12px;
}
.profile-subpage-title {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--pm-text, #e6eeea);
}

.profile-shop-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--pm-border);
  background: var(--pm-surface);
  cursor: pointer;
  width: 100%;
  font-family: var(--pm-font);
  transition: border-color 0.2s;
}

.profile-shop-card:hover {
  border-color: var(--pm-accent);
}

.profile-shop-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.profile-shop-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.profile-shop-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-primary);
}

.profile-shop-cat {
  font-size: 11px;
  color: var(--pm-muted);
}

.profile-shop-arrow {
  font-size: 18px;
  color: var(--pm-muted);
}

.profile-create-shop-btn {
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
}

@media (max-width: 640px) {
  .profile-slide-panel {
    width: 100%;
  }
}

.shops-panel-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.shops-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
}

@media (max-width: 640px) {
  .dash-shell {
    flex-direction: column;
  }


}

@media (max-width: 640px) {
  .dash-topnav {
    padding: 0 8px;
    height: 44px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .topnav-label {
    display: none;
  }

  .topnav-btn {
    padding: 6px 6px;
  }

  .dash-content {
    padding: 16px;
  }

  .settings-slide-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 1100;
  }
}

.shop-listings-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--pm-border);
}

.shop-filter-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.shop-filter-tab {
  padding: 4px 10px;
  border: 1px solid var(--pm-border);
  border-radius: 20px;
  background: var(--pm-surface);
  font-size: 10px;
  font-weight: 500;
  color: var(--pm-muted);
  cursor: pointer;
  font-family: var(--pm-font);
  transition: all 0.15s;
}

.shop-filter-tab.active {
  background: var(--pm-accent);
  color: #fff;
  border-color: var(--pm-accent);
}

.shop-filter-tab:hover:not(.active) {
  border-color: var(--pm-accent);
  color: var(--pm-accent);
}

.listing-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.listing-status--draft {
  background: #e5e7eb;
  color: #374151;
}

.listing-status--pending_review {
  background: #fef3c7;
  color: #92400e;
}

.listing-status--published {
  background: #d1fae5;
  color: #065f46;
}

.wizard-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.05);
  z-index: 110;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 12px 8px;
}

.wizard-card {
  background: var(--pm-bg);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pm-border);
}

.wizard-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pm-primary);
}

.wizard-step-indicator {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  padding: 3px 10px;
  border-radius: 12px;
}

.wizard-progress-bar {
  height: 3px;
  background: var(--pm-border);
  width: 100%;
}

.wizard-progress-fill {
  height: 100%;
  background: var(--pm-accent);
  border-radius: 0 2px 2px 0;
  transition: width 0.3s ease;
}

.wizard-autosave {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 11px;
  color: var(--pm-muted);
}

.wizard-autosave-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.wizard-autosave--saving .wizard-autosave-dot {
  background: #f59e0b;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.wizard-body {
  padding: 12px 16px;
}

.wizard-step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-primary);
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--pm-border);
}

.wizard-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--pm-border);
  justify-content: flex-end;
}

.wz-footer-btn {
  padding: 8px 16px !important;
  font-size: 12px !important;
  width: auto !important;
}

.wz-publish-btn {
  background: #22c55e !important;
  border-color: #22c55e !important;
}

.wz-publish-btn:disabled {
  background: #9ca3af !important;
  border-color: #9ca3af !important;
  cursor: not-allowed;
}

.wz-price-row {
  display: flex;
  gap: 6px;
}

.wz-price-input {
  flex: 1;
}

.wz-currency {
  width: 70px !important;
}

.wz-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pm-text);
  cursor: pointer;
}

.wz-checkbox-label input[type="checkbox"] {
  accent-color: var(--pm-accent);
}

.wz-credibility-section {
  padding: 10px 0;
  border-top: 1px solid var(--pm-border);
  margin-top: 8px;
}

.wz-credibility-bar {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 4px;
}

.wz-credibility-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s, background 0.3s;
  background: #ef4444;
}

.wz-credibility-score {
  font-size: 11px;
  color: var(--pm-muted);
  font-weight: 500;
}

.wz-file-input {
  font-size: 11px !important;
  padding: 6px !important;
}

.wz-file-status {
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

.wz-file-status--ok {
  color: #22c55e;
}

.wz-file-status--error {
  color: #ef4444;
}

.gallery-header-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gallery-upload-btn {
  padding: 3px 8px !important;
  font-size: 10px !important;
  width: auto !important;
}

.gallery-count {
  font-size: 10px;
  color: var(--pm-muted);
  font-weight: 400;
}

.gallery-empty-state {
  padding: 16px 8px;
  font-size: 11px;
  color: var(--pm-muted);
  text-align: center;
  line-height: 1.5;
}

.gallery-upload-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--pm-bg);
  z-index: 120;
  display: flex;
  flex-direction: column;
}

.gallery-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pm-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-primary);
}

.gallery-modal-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery-modal-footer {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--pm-border);
  justify-content: flex-end;
}

.gallery-upload-status {
  font-size: 11px;
  padding: 4px 0;
  min-height: 18px;
}

.gallery-upload-status--progress {
  color: var(--pm-accent);
}

.gallery-upload-status--success {
  color: #22c55e;
  font-weight: 500;
}

.gallery-upload-status--error {
  color: #ef4444;
}

.listing-card-thumb-more {
  font-size: 10px;
  font-weight: 600;
  color: var(--pm-muted);
  padding-left: 2px;
}

.nav-back-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--pm-primary);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}

.nav-back-btn:hover {
  background: var(--pm-border);
}

/* Labeled variant: arrow + word ("Back"). Uses inline-flex so both children
   sit on one line without wrapping. Now styled as a clearly visible pill so
   users always see a "Back" affordance at the top of slide panels (Profile,
   etc.) — the previous transparent style blended into the panel header. */
.nav-back-btn--labeled {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  background: var(--pm-accent-soft, rgba(34,197,94,0.12));
  color: var(--pm-accent, #16a34a);
  border: 1px solid var(--pm-accent, #16a34a);
  border-radius: 999px;
  cursor: pointer;
  min-height: 36px;
  visibility: visible !important;
  opacity: 1 !important;
}
.nav-back-btn--labeled:hover {
  background: var(--pm-accent, #16a34a);
  color: #fff;
}
.nav-back-btn--labeled .nav-back-btn-label {
  font-size: 14px;
  line-height: 1;
}

.listing-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.listing-delete-btn {
  background: none;
  border: 1px solid #ef4444;
  color: #ef4444;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.listing-delete-btn:hover {
  background: #ef4444;
  color: #fff;
}

.delete-listing-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
}

.delete-modal-box {
  position: relative;
  background: var(--pm-bg);
  border-radius: 10px;
  padding: 24px;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.delete-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #ef4444;
  margin-bottom: 10px;
}

.delete-modal-msg {
  font-size: 13px;
  color: var(--pm-primary);
  line-height: 1.5;
  margin-bottom: 14px;
}

.delete-modal-confirm-row {
  margin-bottom: 14px;
}

.delete-modal-confirm-row .pm-input {
  margin-top: 6px;
}

.delete-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.delete-modal-confirm-btn {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
}

.delete-modal-confirm-btn:hover {
  background: #dc2626 !important;
}

.delete-modal-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.listing-status--deleted {
  background: #fee2e2;
  color: #991b1b;
}

.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 340px;
}

.toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-family: var(--pm-font);
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  animation: toastIn 0.25s ease;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast--success {
  background: #059669;
  color: #fff;
}

.toast--error {
  background: #dc2626;
  color: #fff;
}

.toast--warning {
  background: #d97706;
  color: #fff;
}

.toast--out {
  animation: toastOut 0.2s ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}

.shop-listings-toolbar {
  display: flex;
  gap: 6px;
}

.shop-search-input {
  flex: 1;
  padding: 6px 10px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}

.shop-sort-select {
  width: 110px !important;
  padding: 6px 6px !important;
  font-size: 10px !important;
  border-radius: 8px !important;
}

.mkt-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.mkt-filter {
  max-width: 160px;
}

.mkt-search {
  flex: 1;
  min-width: 120px;
}

.mkt-listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.mkt-listing-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  /* `position: relative` so the floating Follow + chip can be
     positioned against the card's top-right corner — matches the
     same anchor used on the home feed card. */
  position: relative;
}

.mkt-listing-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

.mkt-listing-thumb {
  height: 140px;
  background: var(--pm-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.mkt-listing-body {
  padding: 8px 10px;
}

.mkt-listing-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mkt-listing-price {
  font-weight: 700;
  color: var(--pm-accent);
  font-size: 15px;
}

.mkt-listing-location {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkt-listing-badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.mkt-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.mkt-badge--category {
  background: #f0f4ff;
  color: var(--pm-accent);
}

.mkt-badge--featured {
  background: #fef3c7;
  color: #92400e;
}

.mkt-badge--boosted {
  background: #dbeafe;
  color: #1e40af;
}

.mkt-cred-bar {
  height: 3px;
  background: #e5e7eb;
  border-radius: 2px;
  margin-top: 4px;
}

.mkt-cred-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}

.mkt-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  align-items: center;
}

.mkt-detail-view {
  padding: 0;
}

/* Phase 1 nav: the listing detail is a panel-region overlay. It is promoted
   to <body> at init (see promoteListingDetailOverlay in market.js) so it can
   float OVER whichever panel is active (home / search / category / seller
   profile / chat / bookings) WITHOUT a panel switch — which is what used to
   force the home -> view_listings jump and reset the feed + scroll on Back.
   It sits ABOVE the page content and the home chip row (z-index 40) but BELOW
   the fixed top bar + bottom nav (z-index 1000) so both stay visible AND
   tappable (Home works from inside a listing detail). */
body.pm-modern #mktListingDetail.mkt-detail-view {
  position: fixed;
  top: var(--pm-topbar-h, 48px);
  left: 0;
  right: 0;
  bottom: var(--pm-bottom-nav-h, 68px);
  z-index: 900;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--pm-bg, #0b0f0e);
  padding: 14px 14px 24px;
}

.mkt-detail-media {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.mkt-detail-media img {
  height: 200px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Wrapper that lets us layer a watermark over the media without
   blocking the native <video> controls (pointer-events:none on the
   overlay). Video gets a max-width so the controls bar (volume slider
   included) is fully visible on mobile. */
.mkt-media-wrap {
  position: relative;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}
.mkt-media-wrap--video video {
  display: block;
  height: 240px;
  max-width: 90vw;
  background: #000;
  border-radius: 8px;
  /* Make sure no parent rule clips the controls bar. */
  object-fit: contain;
}
.mkt-watermark {
  position: absolute;
  bottom: 8px;
  left: 10px;
  padding: 3px 8px;
  font-family: var(--pm-font, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  pointer-events: none; /* never block video controls */
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  user-select: none;
  z-index: 2;
}
/* Lift the watermark above the native video controls bar so it
   stays visible but never overlaps the volume slider / scrubber. */
.mkt-media-wrap--video .mkt-watermark {
  top: 8px;
  bottom: auto;
}

/* Action toolbar (Share / Forward / Chat / Delete). */
.mkt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.mkt-action-btn {
  flex: 1 1 auto;
  min-width: 120px;
}
.mkt-action-btn--danger {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
}
.mkt-action-btn--danger:hover { background: #b91c1c !important; }

.mkt-detail-section {
  margin-top: 16px;
}

.mkt-detail-label {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.mkt-detail-value {
  font-size: 14px;
  font-weight: 500;
}

/* Contact section — phone display + Call/Copy buttons. Wraps on narrow
   screens; the buttons stay big-tap (44px min height) so they're usable
   on mobile. The number itself is selectable so users can long-press to
   copy as a fallback to the explicit Copy button. */
.mkt-contact-section .mkt-phone-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.mkt-contact-section .mkt-phone-display {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  user-select: text;
  -webkit-user-select: text;
  margin-right: 4px;
}
.mkt-contact-section .mkt-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  line-height: 1;
}
.mkt-contact-section .mkt-phone-call {
  background: #16a34a;
  color: #fff;
}
.mkt-contact-section .mkt-phone-call:hover,
.mkt-contact-section .mkt-phone-call:active {
  background: #15803d;
  color: #fff;
}
.mkt-contact-section .mkt-phone-copy {
  background: #1f2937;
  color: #fff;
}
.mkt-contact-section .mkt-phone-copy:hover,
.mkt-contact-section .mkt-phone-copy:active {
  background: #111827;
}
.mkt-contact-section .mkt-phone-empty {
  color: #888;
  font-style: italic;
  font-weight: 400;
}
/* RTL: button flow already mirrors via flex; just flip the icon spacing
   on the display so the 📞 sits to the right of the digits. */
[dir="rtl"] .mkt-contact-section .mkt-phone-display {
  margin-right: 0;
  margin-left: 4px;
}

.mkt-shop-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-bottom: 8px;
  cursor: pointer;
}

.mkt-shop-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--pm-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 24px;
}

.mkt-shop-info {
  flex: 1;
  min-width: 0;
}

.mkt-shop-name {
  font-weight: 600;
  font-size: 14px;
}

.mkt-shop-meta {
  font-size: 12px;
  color: #888;
}

.mkt-seller-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-bottom: 8px;
  cursor: pointer;
}

.mkt-buyer-card {
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-bottom: 8px;
}

.mkt-buyer-title {
  font-weight: 600;
  font-size: 14px;
}

.mkt-buyer-budget {
  font-weight: 700;
  color: var(--pm-accent);
  font-size: 15px;
}

.mkt-buyer-meta {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

.mkt-buyers-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}

.mkt-buyer-form {
  padding: 16px;
  background: var(--pm-surface);
  border-radius: 10px;
  margin-bottom: 16px;
}

.mkt-upload-wizard {
  padding: 0;
}

.mkt-upload-steps {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.mkt-upload-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #e5e7eb;
  transition: background 0.3s;
}

.mkt-upload-step.active {
  background: var(--pm-accent);
}

.mkt-upload-step.done {
  background: #22c55e;
}

.mkt-type-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mkt-type-card {
  padding: 20px;
  background: #fff;
  border: 2px solid var(--pm-border);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.mkt-type-card:hover,
.mkt-type-card.selected {
  border-color: var(--pm-accent);
  background: #f0f4ff;
}

.mkt-type-card-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.mkt-type-card-label {
  font-weight: 600;
  font-size: 14px;
}

.mkt-type-card-desc {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

.plan-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}

.plan-badge--free {
  background: #e5e7eb;
  color: #1f2937;
}

/* PLUS: Peak gold pill with black text. High contrast on both light and
   dark surfaces (self-contained colours, not theme variables). */
.plan-badge--plus {
  background: linear-gradient(135deg, #f6cf4a 0%, #e2a812 100%);
  color: #0b0b0f;
  box-shadow: 0 1px 3px rgba(226, 168, 18, 0.35);
}

.plan-badge--premium {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
  color: #1a1207;
}

.settings-plan-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.mkt-my-shop {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pm-border);
}

.mkt-my-shop h4 {
  font-size: 13px;
  color: #888;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.mkt-empty {
  text-align: center;
  padding: 40px 16px;
  color: #888;
  font-size: 14px;
}

.mkt-seller-profile {
  padding: 0;
}

/* ---- Public seller profile (Phase 4A) ---- */
.mkt-seller-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.mkt-seller-aside {
  flex: 0 0 26%;
  max-width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: sticky;
  top: 12px;
}
.mkt-seller-main {
  flex: 1 1 auto;
  min-width: 0;
}
.mkt-seller-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 12px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-seller-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkt-seller-avatar--mono {
  font-size: 38px;
  font-weight: 700;
  color: var(--pm-accent);
}
.mkt-seller-ident {
  margin-bottom: 12px;
  text-align: center;
}

/* Rating + member-since sit below the stats; keep them centered under
   the avatar/name/stats stack. */
.mkt-seller-meta {
  text-align: center;
  margin-top: 10px;
}
.mkt-seller-dname {
  font-size: 18px;
  font-weight: 700;
}
.mkt-seller-type {
  font-size: 12px;
  opacity: 0.65;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mkt-seller-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.mkt-seller-stat {
  min-width: 60px;
}
.mkt-seller-stat--clickable {
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 8px;
  transition: background 0.15s ease;
}
.mkt-seller-stat--clickable:hover,
.mkt-seller-stat--clickable:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
/* Followers / Following people modal */
.mkt-follow-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mkt-follow-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 75vh;
  background: #131a18;
  color: #e8ecea;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 640px) {
  .mkt-follow-modal { align-items: center; }
  .mkt-follow-sheet { border-radius: 16px; }
}
.mkt-follow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mkt-follow-title {
  font-size: 16px;
  font-weight: 700;
}
.mkt-follow-close {
  background: none;
  border: none;
  color: #9aa0a6;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.mkt-follow-body {
  overflow-y: auto;
  padding: 8px 0;
}
.mkt-follow-loading,
.mkt-follow-empty {
  padding: 24px 16px;
  text-align: center;
  color: #9aa0a6;
  font-size: 14px;
}
.mkt-follow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
}
.mkt-follow-row:hover,
.mkt-follow-row:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}
.mkt-follow-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: #1a2421;
}
.mkt-follow-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkt-follow-avatar--mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #cdd3d0;
}
.mkt-follow-name {
  font-size: 14px;
  font-weight: 600;
}
.mkt-seller-stat-num {
  font-size: 18px;
  font-weight: 700;
}
.mkt-seller-stat-lbl {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 2px;
}
.mkt-seller-filters {
  margin-bottom: 14px;
}
.mkt-seller-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
/* Filter pills are styled theme-independently with explicit literals so they
   stay readable in BOTH the dark (pm-modern) and light shells. Never white-bg
   with light text. Inactive: dark neutral + light text + visible border;
   active: green + white text + green border. The pm-modern theme tokens are
   undefined in the light shell, so we deliberately use hex literals here. */
.mkt-seller-filter {
  border: 1px solid #2a3a35;
  background: #1a2421;
  color: #ecfdf5;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mkt-seller-filter:hover {
  background: #22302c;
  border-color: #3a4a44;
}
.mkt-seller-filter:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}
.mkt-seller-filter.is-active {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
  font-weight: 600;
}
.mkt-seller-filter.is-active:hover {
  background: #0ea271;
  border-color: #0ea271;
}
.mkt-seller-cat {
  max-width: 240px;
}
.mkt-listing-seller {
  font-size: 13px;
  color: #e5e7eb;
  opacity: 0.95;
  margin-top: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.mkt-listing-seller--link,
.feed-card-seller--link {
  cursor: pointer;
  color: var(--pm-accent);
}
.mkt-listing-seller--link:hover,
.feed-card-seller--link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .mkt-seller-layout {
    flex-direction: column;
  }
  .mkt-seller-aside {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
    position: static;
  }
}

@media (max-width: 640px) {
  .mkt-listings-grid {
    grid-template-columns: 1fr;
  }

  .mkt-toolbar {
    flex-direction: column;
  }

  .mkt-type-cards {
    grid-template-columns: 1fr;
  }

  .mkt-filter {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .wizard-overlay,
  .shop-gallery-panel,
  .shop-viewer-overlay,
  .gallery-upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
  }

  .shop-viewer-media {
    max-height: 50vh;
  }

  .listing-photo-gallery {
    gap: 4px;
  }

  .listing-thumb {
    width: 40px;
    height: 40px;
  }

  .shop-gallery-tiles {
    grid-template-columns: 1fr 1fr;
  }

  .toast-container {
    right: 8px;
    left: 8px;
    max-width: none;
  }

  .delete-modal-box {
    width: 95%;
  }
}

.chat-container {
  display: flex;
  /* iOS Safari: 100vh is the *static* viewport (URL bar visible) and
     does NOT shrink when the soft keyboard opens — the input bar
     would slide behind the keyboard and the latest messages would be
     hidden underneath it. 100dvh is the *dynamic* viewport: it
     shrinks live with the keyboard and the URL bar, so the composer
     stays glued just above the keyboard and the messages list re-flows
     to fit. We keep the 100vh line as a fallback for old browsers. */
  height: calc(100vh - 120px);
  height: calc(100dvh - 120px);
  overflow: hidden;
}

.chat-list {
  width: 100%;
  overflow-y: auto;
}

/* Chat presentation — uses dark-theme-safe variables only.
   Previously used var(--pm-surface) (white in the default theme,
   never overridden in dark mode) and a hardcoded #f0f4ff, both of
   which produced white blocks on the dark dashboard. Hover/active
   states are now subtle accent tints, never opaque white. */
.chat-conv-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--pm-border);
  cursor: pointer;
  transition: background 0.15s ease;
  align-items: center;
}

.chat-conv-item:hover {
  background: var(--pm-bg-elev-2, rgba(255,255,255,0.04));
}

.chat-conv-item:active,
.chat-conv-item.active {
  background: var(--pm-accent-soft, rgba(16,185,129,0.12));
}

.chat-conv-item.unread {
  background: var(--pm-accent-soft, rgba(16,185,129,0.10));
  font-weight: 600;
}
.chat-conv-item.unread:hover {
  background: var(--pm-accent-soft, rgba(16,185,129,0.18));
}

/* Professional fallback avatar — circular, dark surface, accent initial.
   Replaces the previous white square that appeared when no profile pic
   was available. */
.chat-conv-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pm-bg-elev-2, #1a2421);
  color: var(--pm-accent, #10b981);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: 1px solid var(--pm-border, #1f2a27);
  overflow: hidden;
}
/* If a real <img> avatar is rendered inside, fill the circle cleanly. */
.chat-conv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-conv-info {
  flex: 1;
  min-width: 0;
}

.chat-conv-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--pm-text, #ecfdf5);
  /* Make sure tap/select states never paint a white box behind the name. */
  background: transparent;
  border-radius: 4px;
  padding: 0;
}
/* Kill the default browser tap-highlight (the iOS/Android grey-white block
   that appeared on tap of the row / sender name). */
.chat-conv-item,
.chat-conv-name,
.chat-conv-info {
  -webkit-tap-highlight-color: transparent;
}
.chat-conv-item:focus,
.chat-conv-name:focus { outline: none; }

.chat-conv-snippet {
  font-size: 12.5px;
  color: var(--pm-text-muted, #6b7672);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.chat-conv-meta {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ⋮ kebab on each conversation row — opens the per-row delete confirm. */
.chat-conv-menu-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: 4px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--pm-text-muted, #6b7672);
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.chat-conv-menu-btn:hover,
.chat-conv-menu-btn:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--pm-text, #e6edea);
  outline: none;
}
[dir="rtl"] .chat-conv-menu-btn {
  margin-left: 0;
  margin-right: 4px;
}

.chat-conv-time {
  font-size: 11px;
  color: var(--pm-text-muted, #6b7672);
}

.chat-conv-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  text-align: center;
  background: var(--pm-accent, #10b981);
  color: #042f1f;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--pm-bg, #0b0f0e);
  /* Positioning context for the absolutely-positioned "+" add sheet
     that pops up just above the composer. */
  position: relative;
}

/* Slim, transparent thread header — small avatar + name only.
   The previous heavy dark block (background var(--pm-bg-elev) +
   bottom border) read as a "second top bar" on phones. The new
   header sits flat on the chat surface so the focus is on the
   avatar + name, matching modern messenger conventions. */
.chat-thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--pm-text, #ecfdf5);
  min-height: 44px;
}

.chat-thread-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--pm-bg-elev-2, #1a2421);
  border: 1px solid var(--pm-border, #1f2a27);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-thread-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* .chat-thread-title now lives ONLY in app-modern.css (single source of
   truth for the chat composer/header — it loads last and wins). */

/* Hide every per-panel `.panel-back-btn` now that there's a single
   global back arrow in the top bar. We hide via CSS (instead of
   removing them from the DOM) so existing JS handlers — which are
   still wired through dashboard-nav.js — remain a safety net if the
   global button ever fails to mount. */
.panel-back-btn {
  display: none !important;
}

/* Branded chat wallpaper:
   - Soft warm off-white base (#f7f4ef) — easy on the eyes, modern.
   - Repeated Peak Market logo as a subtle pattern, dimmed by stacking
     a near-opaque off-white gradient ON TOP of the image. This is the
     WhatsApp/Signal pattern (linear-gradient over a tiled image) and
     works in every browser without blend-mode quirks. The bubbles'
     own opaque backgrounds keep text contrast above WCAG AA against
     the dimmed pattern. */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  /* Larger gap between sender groups so a sender change is visually
     obvious; bubbles INSIDE a group are tightened via .chat-msg-group. */
  gap: 10px;
  background-color: #f7f4ef;
  background-image:
    linear-gradient(rgba(247, 244, 239, 0.93), rgba(247, 244, 239, 0.93)),
    url('/logo-black.png');
  background-repeat: no-repeat, repeat;
  background-size: auto, 92px 92px;
  background-position: center, center;
  /* The wallpaper is the scroll-container's own background, so it
     stays fixed in the viewport while messages scroll over it. */
  background-attachment: local, local;
}
/* On the new light background the previous dark-on-dark hint colors
   (e.g. var(--pm-text-muted)) become hard to read. Force a darker
   muted ink for empty-state hints inside the chat thread only. */
.chat-messages .chat-empty-hint { color: #6b6258; }

/* A sender group wraps 1+ consecutive chat-msg bubbles from the same
   sender. The wrapper handles side-alignment and inter-bubble spacing
   so individual bubbles can stay simple. */
.chat-msg-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 78%;
}
.chat-msg-group--mine  { align-self: flex-end;   align-items: flex-end;   }
.chat-msg-group--other { align-self: flex-start; align-items: flex-start; }

/* Sender avatar for incoming groups. Pinned to the bottom-left of the
   group via absolute positioning so it doesn't disturb the existing
   flex-column bubble stacking (the grouping logic in chat.js relies on
   the last bubble being groupEl.lastElementChild — an absolutely
   positioned avatar as the FIRST child keeps that invariant true). */
.chat-msg-group--other { position: relative; padding-left: 38px; }
.chat-msg-avatar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pm-bg-elev-2, #1a2421);
  border: 1px solid var(--pm-border, #1f2a27);
}
[dir="rtl"] .chat-msg-group--other { padding-left: 0; padding-right: 38px; }
[dir="rtl"] .chat-msg-avatar { left: auto; right: 0; }

.chat-msg {
  max-width: 100%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Outgoing — accent green bubble with dark ink so text is always readable.
   The tail corner (border-bottom-right) is now ONLY drawn on the LAST
   bubble in the group, so a run of 3 messages reads as one block with
   a single tail at the bottom. */
.chat-msg--mine {
  background: var(--pm-accent, #10b981);
  color: #042f1f;
}
.chat-msg--mine.chat-msg--tail { border-bottom-right-radius: 4px; }
.chat-msg--mine .chat-msg-text { color: #042f1f; }

/* Incoming — elevated surface (never the white --pm-surface) with light ink. */
.chat-msg--other {
  background: var(--pm-bg-elev-2, #1a2421);
  color: var(--pm-text, #ecfdf5);
  border: 1px solid var(--pm-border, #1f2a27);
}
.chat-msg--other.chat-msg--tail { border-bottom-left-radius: 4px; }
.chat-msg--other .chat-msg-text { color: var(--pm-text, #ecfdf5); }

.chat-msg-text {
  white-space: pre-wrap;
}

.chat-msg-time {
  font-size: 10.5px;
  opacity: 0.75;
  margin-top: 3px;
  text-align: right;
}
.chat-msg--other .chat-msg-time { color: var(--pm-text-muted, #6b7672); }
.chat-msg--mine .chat-msg-time  { color: #042f1f; opacity: 0.65; }

/* Per-message bubble — the bubble itself is the action trigger
   (tap or long-press opens the menu). No visible 3-dots, no hover
   affordance: this is mobile-first behaviour and matches the
   established chat-app convention (WhatsApp / Telegram / Signal).
   Suppress the iOS / Android long-press callout (copy/share popover)
   so our own action menu is the only thing that surfaces, and
   disable text selection on the bubble so a long-press doesn't
   start a selection drag instead of opening the menu. */
.chat-msg {
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Defensive: any legacy .chat-msg-kebab markup left in the wild
   (e.g. cached DOM, third-party renderers) must stay invisible. */
.chat-msg-kebab { display: none !important; }

/* ============================================================
   SHARED POPOVER MENU — used by BOTH the per-conversation
   ⋮ menu (one item: Delete) and the per-message ⋮ menu (three
   items: Delete / Forward / Share). Solid dark surface with an
   explicit colour (NOT var(--pm-surface) — that resolves to a
   near-white #F5F7FA in brand.css and produced the white overlay
   bug). High z-index so it overlays bottom nav + chat input.
   ============================================================ */
.chat-popover-menu,
.chat-msg-menu {
  position: fixed;
  z-index: 10050;
  min-width: 168px;
  background: #131a18;          /* solid dark — pm-modern bg-elev */
  color: #ecfdf5;
  border: 1px solid #1f2a27;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  padding: 6px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.chat-popover-menu-item,
.chat-msg-menu-item {
  background: transparent;
  border: 0;
  color: #ecfdf5;
  text-align: start;
  padding: 11px 14px;
  font-size: 14.5px;
  line-height: 1.2;
  border-radius: 8px;
  cursor: pointer;
  min-height: 40px;            /* mobile-friendly touch target */
}
.chat-popover-menu-item:hover,
.chat-popover-menu-item:focus-visible,
.chat-msg-menu-item:hover,
.chat-msg-menu-item:focus-visible {
  background: #1a2421;          /* pm-bg-elev-2, solid dark */
  outline: none;
}
.chat-popover-menu-item--danger,
.chat-msg-menu-item--danger { color: #fca5a5; }
.chat-popover-menu-item--danger:hover,
.chat-msg-menu-item--danger:hover { background: rgba(239, 68, 68, 0.14); }

/* ============================================================
   CONFIRM DIALOG (modal) — replaces window.confirm() so the look
   matches the rest of the app and stays consistent across browsers.
   ============================================================ */
.chat-confirm-wrap {
  position: fixed; inset: 0; z-index: 10100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.chat-confirm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.chat-confirm-box {
  position: relative;
  width: 100%; max-width: 360px;
  background: #131a18;
  color: #ecfdf5;
  border: 1px solid #1f2a27;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  padding: 18px 18px 14px;
}
.chat-confirm-title {
  font-size: 16px; font-weight: 600;
  color: #ecfdf5;
  margin: 0 0 6px;
}
.chat-confirm-body {
  font-size: 14px; color: #94a3a0;
  margin: 0 0 14px;
}
.chat-confirm-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 12px;
}
.chat-confirm-btn {
  border: 0;
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  min-width: 88px;
  min-height: 40px;
}
.chat-confirm-btn--cancel {
  background: transparent;
  color: #ecfdf5;
  border: 1px solid #1f2a27;
}
.chat-confirm-btn--cancel:hover { background: #1a2421; }
.chat-confirm-btn--primary {
  background: #10b981; color: #042f1f;
}
.chat-confirm-btn--primary:hover { background: #059669; }
.chat-confirm-btn--danger {
  background: #ef4444; color: #fff;
}
.chat-confirm-btn--danger:hover { background: #dc2626; }

/* ============================================================
   FORWARD recipient picker — bottom sheet on mobile, centered
   modal on tablet+. Solid dark surface (NOT var(--pm-surface)).
   ============================================================ */
.chat-forward-sheet {
  position: fixed; inset: 0; z-index: 10060;
  display: flex; align-items: flex-end; justify-content: center;
}
.chat-forward-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.58);
}
.chat-forward-panel {
  position: relative;
  width: 100%; max-width: 520px; max-height: 70vh;
  background: #131a18;
  color: #ecfdf5;
  border-top: 1px solid #1f2a27;
  border-radius: 14px 14px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}
@media (min-width: 640px) {
  .chat-forward-sheet { align-items: center; }
  .chat-forward-panel { border-radius: 14px; border: 1px solid #1f2a27; }
}
.chat-forward-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #1f2a27;
  font-weight: 600; color: #ecfdf5;
}
.chat-forward-x {
  background: transparent; border: 0;
  color: #ecfdf5;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.chat-forward-list { overflow-y: auto; padding: 6px; min-height: 60px; }
.chat-forward-item {
  display: flex; width: 100%;
  background: transparent; border: 0;
  color: #ecfdf5;
  text-align: start;
  padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer; font-size: 14px;
  min-height: 44px;
}
.chat-forward-item:hover,
.chat-forward-item:focus-visible { background: #1a2421; outline: none; }
.chat-forward-item[disabled] { opacity: 0.5; cursor: default; }
.chat-forward-empty {
  padding: 18px 12px;
  color: #94a3a0;
  text-align: center; font-size: 13px;
}

/* .chat-input-bar and .chat-send-btn now live ONLY in app-modern.css
   (single source of truth — it loads last and wins). The base .chat-input
   sizing stays here; app-modern's `.chat-input-bar .chat-input` refines it. */
.chat-input {
  flex: 1;
  min-width: 0;
  resize: none;
  font-size: 16px;
  line-height: 1.4;
  min-height: 46px;
  max-height: 140px;
  overflow-y: auto;
  font-family: inherit;
}

/* Composer icon buttons (📎 📷 😊) — square, ghost-styled, big-tap. */
.chat-input-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--pm-text-1, #ecfdf5);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.chat-input-icon:hover,
.chat-input-icon:active { background: rgba(255,255,255,0.08); }

/* Pending-attachment preview row above the input bar. */
.chat-attach-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--pm-border);
  background: rgba(34,197,94,0.08);
}
.chat-attach-preview-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 48px;
  background: #000;
}
.chat-attach-preview-thumb img,
.chat-attach-preview-thumb video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.chat-attach-preview-name {
  flex: 1;
  font-size: 13px;
  color: var(--pm-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-attach-preview-remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

/* Emoji picker — small grid that floats just above the input bar. */
.chat-emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--pm-border);
  max-height: 180px;
  overflow-y: auto;
  background: var(--pm-surface, #0b1d14);
}
.chat-emoji-item {
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.chat-emoji-item:hover { background: rgba(255,255,255,0.08); }

/* Inline media bubbles — capped width so a giant photo doesn't blow out
   the column on mobile, video keeps native controls. */
.chat-msg-media {
  display: block;
  max-width: 240px;
  max-height: 320px;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 4px;
  cursor: pointer;
}
.chat-msg video.chat-msg-media { cursor: default; }
/* Live in-app camera modal — fullscreen dark overlay with WhatsApp-style
   round capture button, top-right close, and a small flip toggle. */
.chat-cam-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-cam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.chat-cam-close,
.chat-cam-flip {
  position: absolute;
  top: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-cam-close { right: 16px; }
.chat-cam-flip  { right: 64px; font-size: 20px; }
.chat-cam-capture {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
}
.chat-cam-capture:active { background: rgba(255,255,255,0.55); }

.chat-msg-media-error {
  font-size: 12px;
  color: #fca5a5;
  background: rgba(239,68,68,0.12);
  padding: 6px 8px;
  border-radius: 6px;
  word-break: break-all;
  max-width: 240px;
}

.notif-actions {
  padding: 0 0 12px;
  display: flex;
  justify-content: flex-end;
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--pm-border);
  cursor: pointer;
  transition: background 0.15s;
}

.notif-item:hover {
  background: var(--pm-surface);
}

.notif-item.unread {
  background: #f0f4ff;
  border-left: 3px solid var(--pm-accent);
}

.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pm-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.notif-content {
  flex: 1;
  min-width: 0;
}

.notif-title {
  font-weight: 600;
  font-size: 14px;
}

.notif-body {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-time {
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
}

.topnav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background: #ef4444;
  color: white;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}

.topnav-icon-btn {
  position: relative;
}

.pa-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--pm-border);
  padding-bottom: 8px;
}

.pa-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  color: #888;
  font-family: var(--pm-font);
}

.pa-tab.active {
  color: var(--pm-accent);
  border-bottom-color: var(--pm-accent);
}

#panel_peak_agent .pa-panel {
  display: block;
}

.pa-type-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.pa-type-btn.active {
  background: var(--pm-accent);
  color: white;
}

.pa-request-card {
  padding: 12px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 8px;
  cursor: pointer;
}

.pa-request-title {
  font-weight: 600;
  font-size: 14px;
}

.pa-request-meta {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

.pa-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.pa-status--submitted {
  background: #dbeafe;
  color: #1d4ed8;
}

.pa-status--assigned {
  background: #fef3c7;
  color: #92400e;
}

.pa-status--in_review {
  background: #fef3c7;
  color: #92400e;
}

.pa-status--completed {
  background: #d1fae5;
  color: #065f46;
}

.pa-status--rejected {
  background: #fee2e2;
  color: #991b1b;
}

.pa-status--cancelled {
  background: #f3f4f6;
  color: #6b7280;
}

.pa-request-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pa-budget-fields .wz-price-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.settings-subpage {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.settings-subpage-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--pm-border, #e5e7eb);
  margin-bottom: 16px;
}
.settings-subpage-title {
  font-weight: 600;
  font-size: 15px;
}
.settings-subpage-body {
  flex: 1;
  overflow-y: auto;
}
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-msg {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 8px;
  display: none;
}
.settings-msg:not(:empty) {
  display: block;
}
.settings-msg--success {
  background: rgba(46, 204, 113, 0.12);
  color: #6ee7a8;
  border: 1px solid rgba(46, 204, 113, 0.4);
}
.settings-msg--error {
  background: rgba(239, 106, 106, 0.12);
  color: #ef8a8a;
  border: 1px solid rgba(239, 106, 106, 0.5);
}
.settings-current-val {
  font-size: 14px;
  color: #666;
  padding: 6px 0;
}

/* SUPPORT pages (Terms / Contact / About / Feedback). Plain-text-first
   layout — readable line-length, comfortable line-height for the long
   Terms doc, and a tap-friendly contact row. Inherits the surrounding
   .settings-subpage scroll container so long pages just scroll. */
.support-doc {
  padding: 4px 2px 24px;
  line-height: 1.5;
  color: var(--pm-text, #1a2421);
}
.support-doc .support-title {
  font-size: 18px;
  font-weight: 700;
  margin: 4px 0 12px;
}
.support-doc .support-h {
  font-size: 14px;
  font-weight: 700;
  margin: 14px 0 4px;
}
.support-doc .support-p {
  font-size: 14px;
  margin: 0 0 8px;
  white-space: pre-wrap;
}
.support-doc .support-legal-notice {
  font-size: 13px;
  font-style: italic;
  color: var(--pm-text-muted, #6b7280);
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--pm-border, #d1d5db);
  padding: 8px 10px;
  margin: 0 0 14px;
  border-radius: 4px;
}
.support-contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pm-border, #e5e7eb);
  font-size: 14px;
}
.support-contact-row:last-child { border-bottom: none; }
.support-contact-label {
  flex: 0 0 100%;
  font-weight: 600;
  color: #555;
  font-size: 13px;
}
.support-contact-link {
  color: var(--pm-accent, #10b981);
  text-decoration: none;
  word-break: break-all;
}
.support-contact-link:hover { text-decoration: underline; }

[dir="rtl"] .topnav {
  flex-direction: row-reverse;
}
[dir="rtl"] .topnav-left,
[dir="rtl"] .topnav-right {
  flex-direction: row-reverse;
}
[dir="rtl"] .topnav-dropdown-content {
  left: auto;
  right: 0;
}
[dir="rtl"] .nav-back-btn {
  transform: scaleX(-1);
}
/* For the labeled variant, don't flip the whole button (which would mirror
   the word "Back"). Only flip the arrow glyph itself. */
[dir="rtl"] .nav-back-btn--labeled {
  transform: none;
}
[dir="rtl"] .nav-back-btn--labeled > span[aria-hidden="true"] {
  transform: scaleX(-1);
  display: inline-block;
}
[dir="rtl"] .dash-content {
  direction: rtl;
  text-align: right;
}
/* RTL: alignment is owned by the .chat-msg-group wrapper now, so we
   mirror groups (not bubbles). The tail-corner cut is applied ONLY on
   .chat-msg--tail bubbles, mirrored to the opposite side, so interior
   bubbles in a same-sender group stay fully rounded. */
[dir="rtl"] .chat-msg-group--mine  { align-self: flex-start; align-items: flex-start; }
[dir="rtl"] .chat-msg-group--other { align-self: flex-end;   align-items: flex-end;   }
[dir="rtl"] .chat-msg--mine.chat-msg--tail {
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 4px;
}
[dir="rtl"] .chat-msg--other.chat-msg--tail {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
[dir="rtl"] .chat-input-bar {
  flex-direction: row-reverse;
}
[dir="rtl"] .notif-item.unread {
  border-left: none;
  border-right: 3px solid var(--pm-accent, #2563eb);
}
[dir="rtl"] .settings-panel {
  left: 0;
  right: auto;
}
[dir="rtl"] .dpe-label {
  text-align: right;
}
[dir="rtl"] .pm-input,
[dir="rtl"] .pm-textarea {
  text-align: right;
}
[dir="rtl"] .wz-card-progress-bar {
  direction: ltr;
}
[dir="rtl"] .topnav-badge {
  right: auto;
  left: 2px;
}
[dir="rtl"] .chat-conv-meta {
  text-align: left;
}
[dir="rtl"] .pa-tabs {
  flex-direction: row-reverse;
}
[dir="rtl"] .mkt-listing-card {
  direction: rtl;
}
[dir="rtl"] .sidebar-profile {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .listing-card-actions {
  flex-direction: row-reverse;
}
[dir="rtl"] .listing-status-badge {
  right: auto;
  left: 8px;
}
[dir="rtl"] .wizard-autosave {
  right: auto;
  left: 16px;
}
[dir="rtl"] .wz-file-status {
  text-align: right;
}
[dir="rtl"] .gallery-upload-status {
  text-align: right;
}
[dir="rtl"] .delete-modal-body {
  text-align: right;
}
[dir="rtl"] .viewer-controls {
  flex-direction: row-reverse;
}
[dir="rtl"] .listing-card-meta {
  text-align: right;
}
[dir="rtl"] .shop-filter-tab {
  direction: rtl;
}
[dir="rtl"] .topnav-avatar-wrap {
  margin-right: 0;
  margin-left: 6px;
}
[dir="rtl"] .topnav-plan-pill {
  margin-left: 0;
  margin-right: 8px;
}
[dir="rtl"] .topnav-upgrade-btn {
  margin-left: 0;
  margin-right: 4px;
}
[dir="rtl"] .feed-card-meta {
  text-align: right;
}
[dir="rtl"] .feed-card-duration {
  right: auto;
  left: 6px;
}
[dir="rtl"] .feed-category-chips {
  direction: rtl;
}
[dir="rtl"] .mkt-detail-section {
  text-align: right;
}
[dir="rtl"] .mkt-toolbar {
  flex-direction: row-reverse;
}
[dir="rtl"] .mkt-buyer-meta {
  text-align: right;
}
[dir="rtl"] .mkt-shop-info {
  text-align: right;
}
[dir="rtl"] .pa-request-meta {
  text-align: right;
}
[dir="rtl"] .settings-home-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .settings-home-row .settings-row-arrow {
  transform: scaleX(-1);
}
[dir="rtl"] .wz-step-indicator {
  direction: ltr;
}
[dir="rtl"] .mkt-cred-fill {
  float: right;
}
[dir="rtl"] .mkt-pagination {
  flex-direction: row-reverse;
}
[dir="rtl"] .settings-slide-panel {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--pm-border);
  box-shadow: 4px 0 24px rgba(0,0,0,0.08);
}
[dir="rtl"] .profile-slide-panel {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--pm-border);
  box-shadow: 4px 0 24px rgba(0,0,0,0.08);
}
[dir="rtl"] .shop-char-count {
  margin-left: 0;
  margin-right: 4px;
}
[dir="rtl"] .profile-shop-info {
  text-align: right;
}
[dir="rtl"] .profile-info-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .settings-item {
  flex-direction: row-reverse;
  text-align: right;
}
[dir="rtl"] .settings-item-arrow {
  transform: scaleX(-1);
}
[dir="rtl"] .settings-slide-header,
[dir="rtl"] .profile-slide-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .dash-panel-header {
  flex-direction: row-reverse;
  text-align: right;
}
[dir="rtl"] .wizard-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .wizard-actions {
  flex-direction: row-reverse;
}
[dir="rtl"] .wz-price-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .mkt-type-cards {
  flex-direction: row-reverse;
}
[dir="rtl"] .dash-plan-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .dpv-row {
  flex-direction: row-reverse;
  text-align: right;
}
[dir="rtl"] .dpe-contact-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .shop-card {
  flex-direction: row-reverse;
  text-align: right;
}
[dir="rtl"] .shop-card-arrow {
  transform: scaleX(-1);
}
[dir="rtl"] .shop-section-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .shop-detail-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .topnav-dropdown-menu--right {
  right: auto;
  left: 0;
}
[dir="rtl"] .shops-panel-actions {
  flex-direction: row-reverse;
}
[dir="rtl"] .mkt-buyer-card {
  text-align: right;
}
[dir="rtl"] .delete-modal-box {
  text-align: right;
}
[dir="rtl"] .delete-modal-actions {
  flex-direction: row-reverse;
}
[dir="rtl"] .gallery-modal-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .gallery-modal-footer {
  flex-direction: row-reverse;
}
[dir="rtl"] .chat-thread-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .notif-actions {
  text-align: left;
}
[dir="rtl"] .feed-load-more {
  direction: rtl;
}
[dir="rtl"] .mkt-upload-steps {
  flex-direction: row-reverse;
}

/* =============================================================
   PHASE 1 POLISH (additive only — no existing rules modified)
   Visual consistency pass: top bar, feed cards, chips, empty
   states, toasts, forms. Logic, layout structure, and component
   markup are intentionally untouched.
   ============================================================= */

/* Shared design tokens — referenced by the polish rules below.
   Defined as :root vars so any future rule can reuse them. */
:root {
  --pm-radius-sm: 8px;
  --pm-radius-md: 12px;
  --pm-radius-lg: 14px;
  --pm-radius-pill: 999px;
  --pm-elev-1: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --pm-elev-2: 0 4px 14px rgba(15,23,42,0.10);
  --pm-text-1: #0f172a;
  --pm-text-2: #475569;
  --pm-text-3: #94a3b8;
  --pm-line: #e5e7eb;
  --pm-pad-x: 16px;
}

/* ---- Top bar: more breathing room, balanced gap, sturdier hairline. */
.dash-topnav {
  height: 56px;
  padding: 0 16px;
  gap: 6px;
  border-bottom-color: var(--pm-line);
  box-shadow: 0 1px 0 rgba(15,23,42,0.02);
}
.topnav-left, .topnav-right { gap: 4px; }
.topnav-icon-btn { width: 38px; height: 38px; border-radius: 10px; }
.topnav-icon-btn .topnav-icon { font-size: 18px; }
/* Auth pill: slightly tighter so it sits in line with the icon row
   but stays unmistakably labeled. */
.topnav-auth-pill {
  margin-left: 6px;
  padding: 7px 14px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  box-shadow: var(--pm-elev-1);
}
@media (max-width: 480px) {
  .dash-topnav { padding: 0 12px; height: 54px; }
  .topnav-icon-btn { width: 36px; height: 36px; }
}

/* ---- Feed cards: warmer shadow, larger radius, refined hierarchy.
   Title gets a touch more line-height; price and location align on
   a consistent scale; thumbnail nudged taller for better framing. */
.mkt-listing-card {
  border-radius: var(--pm-radius-lg);
  box-shadow: var(--pm-elev-1);
  border: 1px solid rgba(15,23,42,0.04);
}
.mkt-listing-card:hover {
  box-shadow: var(--pm-elev-2);
}
.mkt-listing-thumb { height: 152px; }
.mkt-listing-body { padding: 14px; }
.mkt-listing-title {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--pm-text-1);
  margin-bottom: 6px;
}
.mkt-listing-price {
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.mkt-listing-location {
  color: var(--pm-text-2);
  font-size: 12.5px;
  margin-top: 6px;
}
.mkt-listing-badges { margin-top: 10px; gap: 6px; }
.mkt-badge {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--pm-radius-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mkt-cred-bar { margin-top: 10px; height: 4px; border-radius: 2px; }

/* Slightly tighter grid gap on mobile for premium density. */
.mkt-listings-grid { gap: 14px; }
@media (min-width: 641px) {
  .mkt-listings-grid { gap: 18px; }
}

/* ---- Chips / filter toolbar: standardize control heights so
   the search box and the category dropdown line up cleanly. */
.mkt-toolbar {
  gap: 10px;
  margin-bottom: 18px;
  align-items: center;
}
.mkt-toolbar input,
.mkt-toolbar select,
.mkt-toolbar .mkt-filter,
.mkt-toolbar .mkt-search {
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--pm-line);
  padding: 0 12px;
  font-size: 14px;
  background: #fff;
  color: var(--pm-text-1);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mkt-toolbar input:focus,
.mkt-toolbar select:focus {
  outline: none;
  border-color: var(--pm-accent, #16a34a);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.12);
}

/* Horizontal-scroll category chips: keep the row tidy, no scrollbar
   overflow noise on desktop. Selector is permissive so it covers
   both "chip" and "category-chip" naming variants. */
.chips-row,
.mkt-chips,
.cat-chips,
.category-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
}
.chips-row::-webkit-scrollbar,
.mkt-chips::-webkit-scrollbar,
.cat-chips::-webkit-scrollbar,
.category-chips::-webkit-scrollbar { display: none; }

.chip,
.mkt-chip,
.cat-chip,
.category-chip {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--pm-radius-pill);
  background: #f1f5f9;
  color: var(--pm-text-1);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover,
.mkt-chip:hover,
.cat-chip:hover,
.category-chip:hover { background: #e2e8f0; }
.chip.active, .chip[aria-selected="true"],
.mkt-chip.active, .mkt-chip[aria-selected="true"],
.cat-chip.active, .category-chip.active {
  background: var(--pm-accent, #16a34a);
  color: #fff;
  border-color: var(--pm-accent, #15803d);
}

/* ---- Empty state: more presence, less wall-of-grey. */
.mkt-empty {
  padding: 56px 20px;
  color: var(--pm-text-2);
  font-size: 14.5px;
  line-height: 1.5;
}
.mkt-empty::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #f1f5f9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/22px no-repeat;
}

/* ---- Toasts: refined elevation and softer corners. */
.toast {
  border-radius: var(--pm-radius-md);
  box-shadow: var(--pm-elev-2);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.toast--success { border-left: 4px solid #16a34a; }
.toast--error   { border-left: 4px solid #dc2626; }
.toast--warning { border-left: 4px solid #f59e0b; }

/* ---- Inline message blocks: align with toast vocabulary. */
.pm-msg {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  margin: 12px 0;
}

/* ---- Form fields: consistent rhythm in the listing wizard and
   visible panels. Targets generic field/label/input combinations
   without changing widget structure. */
.pm-form, .mkt-form, .panel-form { display: flex; flex-direction: column; gap: 14px; }
.pm-field, .mkt-field, .form-row { display: flex; flex-direction: column; gap: 6px; }
.pm-label, .mkt-label, .form-label, label.pm-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pm-text-2);
  letter-spacing: 0.02em;
}
.pm-input, .mkt-input, .pm-select, .mkt-select,
input.pm-input, select.pm-input, textarea.pm-input {
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--pm-line);
  font-size: 14px;
  background: #fff;
  color: var(--pm-text-1);
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea.pm-input { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.45; }
.pm-input:focus, .mkt-input:focus, .pm-select:focus {
  outline: none;
  border-color: var(--pm-accent, #16a34a);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.12);
}
.pm-input::placeholder { color: var(--pm-text-3); }

/* ---- Button hierarchy: keep .pm-btn solid as the primary action,
   .pm-btn--secondary as the muted alternative; add a subtle press
   feedback so taps feel responsive on mobile. */
.pm-btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
}
.pm-btn:active { transform: translateY(1px); }
.pm-btn--secondary {
  background: #f1f5f9 !important;
  color: var(--pm-text-1) !important;
  border: 1px solid var(--pm-line) !important;
}
.pm-btn--secondary:hover { background: #e2e8f0 !important; }

/* ---- Settings dropdown (top-right control center): section
   headers, divider lines, glyph alignment, and language checkmark. */
.topnav-settings-menu { min-width: 240px; padding: 6px 0; }
.topnav-settings-menu .topnav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--pm-text-1);
}
.topnav-settings-menu .topnav-dropdown-item .settings-item-glyph {
  width: 22px; flex: 0 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.topnav-dropdown-divider {
  height: 1px;
  background: var(--pm-line);
  margin: 6px 8px;
}
.topnav-dropdown-section-label {
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-text-3);
}
.lang-option { position: relative; }
.lang-option .lang-check {
  margin-left: auto;
  color: var(--pm-accent, #16a34a);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s;
}
.lang-option.is-active .lang-check { opacity: 1; }
.lang-option.is-active { background: rgba(22,163,74,0.06); }
/* RTL: align checkmark on the left for Arabic */
[dir="rtl"] .lang-option .lang-check { margin-left: 0; margin-right: auto; }

/* ---- Detail view: a touch more padding around the action toolbar
   so Share / Forward / Delete don't crowd the content above. */
.mkt-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pm-line); }
.mkt-detail-section { margin-top: 18px; }
.mkt-detail-label { letter-spacing: 0.06em; }
.mkt-detail-value { font-size: 14.5px; color: var(--pm-text-1); }


/* ===== SEARCH PANEL =====
   Minimal, clean, mobile-first. Reuses .pm-input, .pm-btn, and
   .mkt-listings-grid so card output matches the rest of the app. */
.search-panel-body {
  padding: 10px 12px 24px;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.search-mode-toggle {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 3px;
}
.search-mode-btn {
  flex: 1;
  background: transparent;
  border: 0;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.search-mode-btn:hover { color: #fff; }
.search-mode-btn.active {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  box-shadow: 0 2px 6px rgba(22,163,74,.25);
}
.search-input-row { display: flex; }
.search-input {
  width: 100%;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 9px;
}
.search-submit-btn {
  width: 100%;
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 9px;
}

/* Compact single-row action bar under listing detail (Like / Share /
   Download / Followers / Chat). Horizontally scrolls on tiny screens
   instead of wrapping so it stays one line as requested. */
.mkt-actions--row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--pm-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mkt-actions--row::-webkit-scrollbar { display: none; }
.mkt-actions--owner {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
/* Owner Delete button: compact danger pill, not a full-width bar. */
.mkt-actions--owner .mkt-action-btn {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 8px;
}
.mkt-actions--owner .mkt-action-btn.is-loading {
  opacity: 0.7;
  cursor: progress;
}
[dir="rtl"] .mkt-actions--owner { justify-content: flex-start; }

/* ── Seller listing insights (owner detail view) ───────────────────── */
.mkt-insights {
  margin-top: 12px;
  padding: 12px;
  background: #131a18;
  border: 1px solid #233029;
  border-radius: 10px;
}
.mkt-insights-title {
  font-size: 13px;
  font-weight: 700;
  color: #cfe8df;
  margin-bottom: 8px;
}
.mkt-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mkt-insight-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: #1a2421;
  border-radius: 8px;
}
.mkt-insight-val { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.1; }
.mkt-insight-lbl { font-size: 11px; color: #9bb4ab; margin-top: 2px; text-align: center; }
.mkt-insight-posted { font-size: 12px; color: #9bb4ab; margin-top: 8px; }

/* ── My Shop card insights button + modal ──────────────────────────── */
.listing-insights-btn {
  background: transparent;
  border: 1px solid #2f6b4f;
  color: #5fbf8a;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 8px;
}
.listing-insights-btn:hover { background: rgba(95, 191, 138, 0.1); }
[dir="rtl"] .listing-insights-btn { margin-right: 0; margin-left: 8px; }

.lw-insights-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.lw-insights-modal {
  width: 100%;
  max-width: 360px;
  background: #131a18;
  border: 1px solid #233029;
  border-radius: 14px;
  padding: 16px;
}
.lw-insights-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.lw-insights-close {
  background: none;
  border: none;
  color: #9bb4ab;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.lw-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lw-insight-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  background: #1a2421;
  border-radius: 8px;
}
.lw-insight-val { font-size: 18px; font-weight: 700; color: #fff; }
.lw-insight-lbl { font-size: 11px; color: #9bb4ab; margin-top: 2px; text-align: center; }
.lw-insight-posted { font-size: 12px; color: #9bb4ab; margin-top: 10px; text-align: center; }
.mkt-act {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mkt-act:hover { background: rgba(255,255,255,0.08); color: #fff; }
.mkt-act .mkt-act-ico { font-size: 14px; line-height: 1; }
.mkt-act.is-active {
  background: rgba(22,163,74,0.18);
  border-color: rgba(22,163,74,0.55);
  color: #86efac;
}
.mkt-act--primary {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: transparent;
  color: #fff;
}
.mkt-act--primary:hover { color: #fff; opacity: .92; }
.mkt-act--readonly { cursor: default; }
.mkt-act--readonly:hover { background: rgba(255,255,255,0.04); color: #cbd5e1; }
@media (max-width: 380px) {
  .mkt-act { padding: 6px 8px; font-size: 11px; }
}
[dir="rtl"] .mkt-actions--row { direction: rtl; }

/* In-feed compact action row (Like + Chat) shown directly under each
   listing card so users can act without opening the detail view. Kept
   intentionally tiny and aligned-left so it never stretches across the
   card or competes with the price/title for attention. */
.mkt-card-actions {
  display: flex;
  /* Allow wrap on narrow phones — five pills (Follow / Like / Comment /
     Share / Chat) won't fit on a 320 px iPhone SE without wrap. The
     pills stay compact (11 px text, 4-9 px padding) so wrap is rare on
     normal-width screens but recovers gracefully when it happens. */
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
/* Transparent action pills (Play Store polish): the buttons sit directly on
   the card with NO chip background or border so the listing media/photo stays
   fully visible. A text-shadow + icon drop-shadow keeps icons and counts
   readable on both light and dark backgrounds. */
.mkt-card-act {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  transition: color .15s ease, transform .1s ease;
}
.mkt-card-act:hover { color: #fff; }
.mkt-card-act:active { transform: scale(0.92); }
.mkt-card-act:disabled { opacity: 0.6; cursor: progress; }
.mkt-card-act .mkt-card-act-ico {
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.mkt-card-act.is-active {
  color: #fb7185;
}
.mkt-card-act--chat {
  color: #34d399;
}
.mkt-card-act--chat:hover { color: #6ee7b7; }

/* Follow pill — icon-only "+". Red before follow, green after.
   Sized as a small circular chip so it groups visually with the
   other action pills without taking horizontal space for a label. */
.mkt-card-act--follow {
  background: rgba(239,68,68,0.14);
  border-color: rgba(239,68,68,0.55);
  color: #fca5a5;
  /* compact circular target so the icon-only "+" is fully visible
     and doesn't get clipped by the row */
  padding: 4px 8px;
  min-width: 28px;
  justify-content: center;
}
.mkt-card-act--follow .mkt-card-act-ico {
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.mkt-card-act--follow:hover {
  background: rgba(239,68,68,0.24);
  color: #fff;
}
.mkt-card-act--follow.is-active {
  background: rgba(22,163,74,0.20);
  border-color: rgba(22,163,74,0.60);
  color: #86efac;
}
.mkt-card-act--follow.is-active:hover {
  background: rgba(22,163,74,0.32);
  color: #fff;
}

/* Comment + Share pills inherit the neutral style; we only need
   selectors so future tweaks (e.g. brand color for share) have a
   hook without touching the base class. */
.mkt-card-act--comment:hover { color: #fff; }
.mkt-card-act--share:hover   { color: #fff; }

/* Audio preview pill — icon-only music note. Amber accent so it reads as a
   distinct "play the seller's audio" control; turns brighter while playing
   (is-active toggled by the click handler). */
.mkt-card-act--audio { color: #fbbf24; }
.mkt-card-act--audio:hover { color: #fcd34d; }
.mkt-card-act--audio.is-active { color: #fde68a; }

[dir="rtl"] .mkt-card-actions { direction: rtl; }

/* ---- Listing detail audio player ---- */
.mkt-detail-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px 14px;
  background: #131a18;
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 12px;
}
.mkt-detail-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 16px;
  background: rgba(251,191,36,0.14);
  border: 1px solid rgba(251,191,36,0.5);
  border-radius: 999px;
  color: #fcd34d;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.mkt-detail-audio-btn:hover { background: rgba(251,191,36,0.24); color: #fff; }
.mkt-detail-audio-btn:active { transform: scale(0.96); }
.mkt-detail-audio-btn.is-active { background: rgba(251,191,36,0.28); color: #fff; }
.mkt-detail-audio-ico { font-size: 18px; line-height: 1; }
.mkt-detail-audio-note {
  font-size: 12px;
  color: #9ca3af;
  flex: 1 1 100%;
}
[dir="rtl"] .mkt-detail-audio { direction: rtl; }

/* ---- Follow + chip ----
   Floating round chip in the top-right corner of every listing
   card body. Lives outside the bottom action row on purpose so
   the +/✓ control sits in the same visual area as the title /
   price / location / seller / category. Red before follow,
   green after. Same markup on every surface (home feed, market
   grid, public seller profile) — see `window.peakBuildFollowChip`. */
.mkt-card-follow-chip {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,0.85);
  background: #ef4444;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-family: var(--pm-font);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.mkt-card-follow-chip:hover  { background: #dc2626; transform: scale(1.05); }
.mkt-card-follow-chip:active { transform: scale(0.95); }
.mkt-card-follow-chip .mkt-card-follow-chip-ico {
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.mkt-card-follow-chip.is-active {
  background: #16a34a;
  border-color: rgba(22,163,74,0.85);
}
.mkt-card-follow-chip.is-active:hover { background: #15803d; }
[dir="rtl"] .mkt-card-follow-chip { right: auto; left: 8px; }

/* Reserve a little right-padding on the title so a long title can
   never visually run into the floating Follow chip. The chip is
   ~32 px wide + 8 px gutter; 44 px gives breathing room. */
.feed-card-title,
.mkt-listing-title { padding-right: 44px; }
[dir="rtl"] .feed-card-title,
[dir="rtl"] .mkt-listing-title { padding-right: 0; padding-left: 44px; }

/* ---- Verified-seller badge ----
   Small inline ✅ badge appended after a seller / shop / listing name
   on every surface (feed, market grid, detail, shop/seller cards,
   chat header + peer modal, public pages). Kept inline-flex so it
   sits on the text baseline and never wraps to its own line. */
.mkt-verified-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.85em;
  line-height: 1;
  vertical-align: middle;
  margin-inline-start: 2px;
}

/* ---- Comment sheet ----
   Reuses .mkt-share-sheet positioning (bottom sheet on mobile,
   centered card above) so we get the same iOS-keyboard behaviour
   for free. Only the panel-internal layout is unique. */
.mkt-comment-panel {
  display: flex;
  flex-direction: column;
  max-height: min(80vh, 640px);
}
.mkt-comment-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mkt-comment-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
}
.mkt-comment-avatar {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
}
.mkt-comment-avatar--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
}
.mkt-comment-main { flex: 1 1 auto; min-width: 0; }
.mkt-comment-head {
  display: flex; gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.mkt-comment-name {
  font-weight: 600;
  font-size: 13px;
  color: #e2e8f0;
}
.mkt-comment-time {
  font-size: 11px;
  color: #94a3b8;
}
.mkt-comment-body {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.35;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.mkt-comment-del {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.mkt-comment-del:hover { color: #ef4444; }
.mkt-comment-form {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  align-items: flex-end;
}
.mkt-comment-form textarea {
  flex: 1 1 auto;
  resize: none;
  min-height: 38px;
  max-height: 120px;
  /* 16 px font keeps iOS Safari from auto-zooming the viewport on
     focus (same trick the chat composer uses). */
  font-size: 16px;
  line-height: 1.3;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #e2e8f0;
  font-family: inherit;
}
.mkt-comment-form textarea:focus {
  outline: none;
  border-color: rgba(22,163,74,0.55);
  background: rgba(255,255,255,0.07);
}
.mkt-comment-post {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(22,163,74,0.55);
  background: rgba(22,163,74,0.18);
  color: #86efac;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.mkt-comment-post:hover:not(:disabled) {
  background: rgba(22,163,74,0.30);
  color: #fff;
}
.mkt-comment-post:disabled { opacity: 0.55; cursor: progress; }

/* Share sheet (internal Peak chat + system share + copy). Bottom sheet
   on mobile, centered card on wider screens. */
.mkt-share-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mkt-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.mkt-share-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 78vh;
  overflow-y: auto;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px 16px 0 0;
  padding: 14px 14px 18px;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.45);
}
@media (min-width: 640px) {
  .mkt-share-sheet { align-items: center; }
  .mkt-share-panel { border-radius: 16px; }
}
.mkt-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: #f1f5f9;
  font-size: 15px;
  margin-bottom: 10px;
}
.mkt-share-x {
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.mkt-share-x:hover { color: #fff; }

/* ── Service category actions + booking sheet (Phase 3) ──────────── */
.mkt-service-actions { margin-top: 8px; }
.mkt-act--whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
  border-color: transparent;
  color: #fff;
}
.mkt-act--whatsapp:hover { color: #fff; opacity: .92; }
/* .mkt-act--facebook styles removed with the Facebook share button
   (Play Store release). Re-add if Facebook sharing is reinstated. */
.mkt-booking-form { display: flex; flex-direction: column; gap: 10px; }
.mkt-bk-row { display: flex; flex-direction: column; gap: 4px; }
.mkt-bk-label { font-size: 12px; font-weight: 600; color: #94a3b8; }
.mkt-bk-input {
  width: 100%;
  background: #131a18;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: #f1f5f9;
  font-size: 16px;
  padding: 9px 11px;
  outline: none;
}
.mkt-bk-input:focus { border-color: rgba(22,163,74,0.55); }
textarea.mkt-bk-input { resize: vertical; min-height: 48px; }
.mkt-booking-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 8px 6px;
  text-align: center;
}
.mkt-booking-success-ico { font-size: 40px; line-height: 1; }
.mkt-booking-success-msg { font-size: 14px; color: #e2e8f0; }
.mkt-booking-ref {
  font-size: 13px;
  color: #94a3b8;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 8px 12px;
}
.mkt-booking-ref strong { color: #86efac; letter-spacing: 0.04em; }

.mkt-share-section { margin-top: 12px; }
.mkt-share-section-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 6px;
}
.mkt-share-convo-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 230px;
  overflow-y: auto;
}
.mkt-share-convo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 12px;
  color: #e2e8f0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.mkt-share-convo:hover { background: rgba(255,255,255,0.08); }
.mkt-share-convo-name { font-weight: 600; font-size: 14px; }
.mkt-share-convo-sub { font-size: 12px; color: #94a3b8; }
.mkt-share-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  padding: 14px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 10px;
}
.mkt-share-ext-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mkt-share-ext {
  flex: 1 1 calc(50% - 4px);
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(22,163,74,0.14);
  border: 1px solid rgba(22,163,74,0.45);
  color: #86efac;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.mkt-share-ext:hover { background: rgba(22,163,74,0.22); color: #fff; }
.mkt-share-ext-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}

/* ── Contact Seller sheet (single Chat entry point) ─────────────────
   Reuses .mkt-share-sheet / .mkt-share-panel positioning. The options
   are a vertical stack of full-width rows (Peak Chat / WhatsApp / SMS). */
.mkt-contact-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
/* Compact, modern-messenger contact pills (PEAK Chat / WhatsApp / SMS).
   ~36px high rounded pills, centered icon+label, reduced padding + icon —
   slimmer than the old menu-style buttons while keeping the brand accent
   borders and good (>=36px) touch targets. */
.mkt-contact-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  color: #e2e8f0;
  font-weight: 600;
  font-size: 13.5px;
  padding: 7px 14px;
  min-height: 36px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.mkt-contact-opt:hover { background: rgba(255,255,255,0.08); color: #fff; }
.mkt-contact-opt-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-size: 15px;
  line-height: 1;
}
.mkt-contact-opt--chat { border-color: rgba(245,197,24,0.45); }
.mkt-contact-opt--wa   { border-color: rgba(37,211,102,0.45); }
.mkt-contact-opt--sms  { border-color: rgba(96,165,250,0.45); }
.search-empty {
  padding: 28px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 12px;
}
.search-empty-title { color: #e2e8f0; font-weight: 600; margin-bottom: 4px; }
.search-empty-hint { font-size: 13px; opacity: .85; }
#searchResults { margin-top: 4px; }
#searchResults:empty { display: none; }

/* ----- Smart Search Phase 5: status, recent, suggestions ----- */
.search-status { min-height: 0; }
.search-status:empty { display: none; }
.search-status-results {
  font-size: 13px;
  color: #94a3b8;
  padding: 2px 2px 6px;
}
.search-status-results strong { color: #e2e8f0; font-weight: 700; }

/* Typeahead suggestions dropdown under the input */
.search-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 2px;
}
.search-suggest[hidden] { display: none; }
.search-suggest-chip,
.search-recent-chip,
.search-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.search-suggest-chip:hover,
.search-recent-chip:hover,
.search-cat-chip:hover {
  background: rgba(22,163,74,.18);
  border-color: rgba(22,163,74,.45);
  color: #fff;
}

/* Recent searches block */
.search-recent { display: block; }
.search-recent[hidden] { display: none; }
.search-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.search-recent-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #94a3b8;
}
.search-recent-clear {
  background: transparent;
  border: 0;
  color: #16a34a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
}
.search-recent-clear:hover { color: #22c55e; text-decoration: underline; }
.search-recent-list,
.search-empty-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-empty-cats { margin-top: 12px; justify-content: center; }

/* Video thumbnails inside Search / category-grid listing cards.
   Uses the same .feed-card-video class as Home so the shared FeedVideo
   controller picks them up automatically. */
.mkt-listing-thumb video.feed-card-video,
.mkt-listing-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
}
.mkt-listing-thumb { position: relative; }
.mkt-listing-thumb .feed-card-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(255,255,255,.85);
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ---- Compact green active style for My Shop / My Profile / Edit
   Replaces the wide white-tinted hover that previously stretched
   across these tap targets. Hover and active states now use a
   small soft-green tint plus a green outline so the labels stay
   legible and the controls feel like discrete buttons rather than
   full-width slabs. */
body.pm-modern .shop-card,
body.pm-modern .profile-shop-card {
  background: transparent;
  border: 1px solid var(--pm-border);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: none;
}
body.pm-modern .shop-card:hover,
body.pm-modern .profile-shop-card:hover {
  background: var(--pm-accent-soft);
  border-color: var(--pm-accent);
  box-shadow: none;
}
body.pm-modern .shop-card:active,
body.pm-modern .profile-shop-card:active,
body.pm-modern .shop-card.is-active,
body.pm-modern .profile-shop-card.is-active {
  background: var(--pm-accent-soft);
  border-color: var(--pm-accent);
  box-shadow: inset 3px 0 0 0 var(--pm-accent);
}
[dir="rtl"] body.pm-modern .shop-card:active,
[dir="rtl"] body.pm-modern .profile-shop-card:active,
[dir="rtl"] body.pm-modern .shop-card.is-active,
[dir="rtl"] body.pm-modern .profile-shop-card.is-active {
  box-shadow: inset -3px 0 0 0 var(--pm-accent);
}

body.pm-modern .dash-name-toggle {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background .15s ease, border-color .15s ease;
}
body.pm-modern .dash-name-toggle:hover {
  background: var(--pm-accent-soft);
  border-color: transparent;
}
body.pm-modern .dash-name-toggle--open {
  background: var(--pm-accent-soft);
  border-color: var(--pm-accent);
}

/* Profile Edit/Save button: compact green pill instead of the
   previous full-width white .pm-btn--secondary slab. Scoped to
   the profile panel so the rest of pm-btn--secondary is unaffected. */
body.pm-modern #panelEditSaveBtn.dash-panel-btn {
  width: auto;
  align-self: flex-start;
  padding: 6px 16px;
  min-height: 32px;
  font-size: 12px;
  font-weight: 600;
  background: transparent !important;
  color: var(--pm-accent) !important;
  border: 1px solid var(--pm-accent) !important;
  border-radius: 999px;
  box-shadow: none;
}
body.pm-modern #panelEditSaveBtn.dash-panel-btn:hover {
  background: var(--pm-accent) !important;
  color: #042f1f !important;
  border-color: var(--pm-accent) !important;
}
body.pm-modern #panelEditSaveBtn.dash-panel-btn:active {
  transform: scale(0.97);
}
[dir="rtl"] body.pm-modern #panelEditSaveBtn.dash-panel-btn {
  align-self: flex-end;
}

/* ---- Collapsible Language submenu inside the 3-dots Settings menu.
   Single "Language" toggle item; clicking it expands an inline group
   of the five supported languages with a small left indent. The
   caret rotates to indicate state. */
body.pm-modern .topnav-lang-toggle .topnav-lang-toggle-caret {
  margin-left: auto;
  font-size: 11px;
  opacity: .7;
  transition: transform .15s ease;
  display: inline-block;
}
body.pm-modern .topnav-lang-toggle.is-open .topnav-lang-toggle-caret {
  transform: rotate(90deg);
}
body.pm-modern .topnav-lang-submenu {
  display: none;
  flex-direction: column;
  border-left: 2px solid var(--pm-accent-soft);
  margin: 2px 8px 4px 18px;
  padding-left: 4px;
}
body.pm-modern .topnav-lang-submenu.is-open {
  display: flex;
}
body.pm-modern .topnav-lang-submenu .lang-option {
  padding-left: 10px;
  font-size: 13px;
}
[dir="rtl"] body.pm-modern .topnav-lang-toggle .topnav-lang-toggle-caret {
  margin-left: 0;
  margin-right: auto;
  transform: rotate(180deg);
}
[dir="rtl"] body.pm-modern .topnav-lang-toggle.is-open .topnav-lang-toggle-caret {
  transform: rotate(90deg);
}
[dir="rtl"] body.pm-modern .topnav-lang-submenu {
  border-left: none;
  border-right: 2px solid var(--pm-accent-soft);
  margin: 2px 18px 4px 8px;
  padding-left: 0;
  padding-right: 4px;
}
[dir="rtl"] body.pm-modern .topnav-lang-submenu .lang-option {
  padding-left: 0;
  padding-right: 10px;
}

/* ============================================================
   PEER PROFILE MODAL — opened from the chat thread header.
   Solid dark surface, max 92vh tall, scrollable interior.
   ============================================================ */
.chat-peer-profile-wrap {
  position: fixed; inset: 0; z-index: 10200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.chat-peer-profile-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.chat-peer-profile-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  background: #131a18;
  color: #ecfdf5;
  border: 1px solid #1f2a27;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  padding: 24px 20px 20px;
}
.chat-peer-profile-close {
  width: 32px; height: 32px;
  border: 0; background: transparent;
  color: #ecfdf5;
  font-size: 24px; line-height: 1;
  border-radius: 50%; cursor: pointer;
  flex: 0 0 auto;
}
.chat-peer-profile-close:hover { background: rgba(255,255,255,0.08); }

/* Multi-step modal header — back arrow + centered title + close X.
   Shared by all four sub-views so the chrome stays consistent. */
.chat-peer-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -8px -4px 8px;
}
.chat-peer-back {
  width: 32px; height: 32px;
  border: 0; background: transparent;
  color: #ecfdf5;
  font-size: 22px; line-height: 1;
  border-radius: 50%; cursor: pointer;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.chat-peer-back:hover { background: rgba(255,255,255,0.08); }
.chat-peer-back-spacer { background: transparent !important; cursor: default; }
.chat-peer-modal-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #ecfdf5;
  /* Don't let long titles push close button off-screen. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[dir="rtl"] .chat-peer-back { transform: scaleX(-1); }

/* Hub view — large pill buttons under the avatar/name header. */
.chat-peer-hub-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.chat-peer-hub-action {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #1f2a27;
  background: #1a2421;
  color: #ecfdf5;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease, transform 0.12s ease;
}
.chat-peer-hub-action:hover { background: #21302c; }
.chat-peer-hub-action:active { transform: scale(0.99); }
.chat-peer-hub-action:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* Categories view — 2-col chip grid. */
.chat-peer-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.chat-peer-cat-chip {
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid #1f2a27;
  background: #1a2421;
  color: #ecfdf5;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease, transform 0.12s ease;
}
.chat-peer-cat-chip:hover { background: #21302c; }
.chat-peer-cat-chip:active { transform: scale(0.98); }
.chat-peer-cat-chip:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* Profile detail view — label/value rows.
   Stacked layout (label above value) is shared by desktop and mobile
   so the rendering is identical at every breakpoint. The previous
   side-by-side layout pushed long values (e.g. multi-word locations
   or the user's full role string) off the right edge on narrow
   phones, which made the modal look "broken" or like raw fields.
   Stacking guarantees no overflow regardless of value length. */
.chat-peer-profile-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
  border-top: 1px solid #1f2a27;
}
.chat-peer-profile-detail-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px 4px;
  border-bottom: 1px solid #1f2a27;
}
.chat-peer-profile-detail-label {
  font-size: 12px;
  color: #9aa39f;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.chat-peer-profile-detail-value {
  font-size: 15px;
  color: #ecfdf5;
  word-break: break-word;
  line-height: 1.35;
}

/* First-tap visual hint on listing cards — tells the user the tap
   registered but they need a second tap to actually open. Brief
   subtle pulse so it doesn't feel like a click that did nothing. */
.chat-peer-profile-card.chat-peer-card-tap-hint {
  outline: 2px solid #10b981;
  outline-offset: -2px;
  transition: outline-color 0.18s ease;
}

/* In-modal listing detail (the "peek" view shown after a double-tap
   on a card). Stays inside the modal's history stack so back returns
   to the listings/category grid. */
.chat-peer-listing-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.chat-peer-listing-detail-media {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #0f1715;
}
.chat-peer-listing-detail-media img,
.chat-peer-listing-detail-media video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}
.chat-peer-listing-detail-title {
  font-size: 16px;
  font-weight: 600;
  color: #ecfdf5;
}
.chat-peer-listing-detail-price {
  font-size: 15px;
  font-weight: 700;
  color: #10b981;
}
.chat-peer-listing-detail-meta {
  font-size: 13px;
  color: #9aa39f;
}
.chat-peer-listing-detail-desc {
  font-size: 14px;
  color: #d8e6e0;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-peer-listing-detail-open {
  margin-top: 4px;
  padding: 12px 16px;
  border: 1px solid #10b981;
  background: transparent;
  color: #10b981;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.chat-peer-listing-detail-open:hover { background: rgba(16, 185, 129, 0.1); }
.chat-peer-listing-detail-open:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}
.chat-peer-profile-loading,
.chat-peer-profile-empty {
  text-align: center;
  padding: 24px 8px;
  color: #9aa39f;
}
.chat-peer-profile-header {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  padding: 4px 0 16px;
}
.chat-peer-profile-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: #1a2421;
  border: 1px solid #1f2a27;
  display: flex; align-items: center; justify-content: center;
}
.chat-peer-profile-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.chat-peer-profile-name {
  font-size: 18px; font-weight: 600;
  text-align: center;
  color: #ecfdf5;
}
.chat-peer-profile-section-title {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa39f;
  margin: 8px 0 10px;
}
.chat-peer-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.chat-peer-profile-card {
  background: #1a2421;
  border: 1px solid #1f2a27;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease;
  /* Reset native <button> chrome — we render the card as a button
     for keyboard/screen-reader accessibility but keep the visual
     layout identical to a styled <div>. */
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  display: block;
  width: 100%;
}
.chat-peer-profile-card:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}
.chat-peer-profile-card:active { transform: scale(0.98); }
.chat-peer-profile-card-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0f1413;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.chat-peer-profile-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.chat-peer-profile-card-title {
  padding: 8px 10px 2px;
  font-size: 13px; line-height: 1.3;
  color: #ecfdf5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-peer-profile-card-price {
  padding: 0 10px 10px;
  font-size: 12.5px;
  color: #10b981;
  font-weight: 600;
}

/* ============================================================
   FULLSCREEN MEDIA VIEWER — opened on double-tap of a media bubble.
   Black backdrop, centered media, top-right close. Image fits
   inside viewport; video uses native controls.
   ============================================================ */
.chat-media-viewer {
  position: fixed; inset: 0; z-index: 10300;
  background: rgba(0, 0, 0, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.chat-media-viewer-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.chat-media-viewer-close:hover { background: rgba(255, 255, 255, 0.22); }
.chat-media-viewer-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
}
.chat-media-viewer-img,
.chat-media-viewer-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

/* ============================================================
 * Shared listing media viewer (lightbox) — public/media-viewer.js
 * Sits ABOVE the chat viewer (z 10300) so the two never collide.
 * ============================================================ */
.pm-media-viewer {
  position: fixed; inset: 0; z-index: 10400;
  background: rgba(0, 0, 0, 0.95);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  -webkit-user-select: none; user-select: none;
}
.pm-media-viewer-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.pm-media-viewer-close:hover { background: rgba(255, 255, 255, 0.22); }
.pm-media-viewer-counter {
  position: absolute;
  top: 20px; left: 50%; transform: translateX(-50%);
  color: #fff;
  font-size: 14px; font-weight: 600;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 12px;
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
}
.pm-media-viewer-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.pm-media-viewer-nav:hover { background: rgba(255, 255, 255, 0.22); }
.pm-media-viewer-nav--prev { left: 14px; }
.pm-media-viewer-nav--next { right: 14px; }
.pm-media-viewer-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
}
.pm-media-viewer-img,
.pm-media-viewer-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
/* Photos are zoom/pan-able: own the gesture so the browser doesn't hijack
 * pinch (page zoom) or scroll. Videos keep default touch-action so their
 * native controls (scrub/volume/fullscreen) work untouched. */
.pm-media-viewer-img {
  touch-action: none;
  will-change: transform;
}
.pm-media-viewer.pm-zoomed .pm-media-viewer-img:active {
  cursor: grabbing;
}
.pm-media-viewer-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  text-align: center;
}
.pm-media-viewer-message-text {
  font-size: 15px;
  opacity: 0.85;
}
.pm-media-viewer-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pm-media-viewer-spin 0.8s linear infinite;
}
@keyframes pm-media-viewer-spin {
  to { transform: rotate(360deg); }
}

/* Affordance: listing thumbnails + detail images are tappable to
 * open the fullscreen viewer. */
.mkt-listing-thumb,
.feed-card-thumb { cursor: pointer; }
.mkt-detail-media .mkt-media-wrap img { cursor: zoom-in; }

/* Expand-to-fullscreen button on detail media wraps. Sits above the
 * media; for videos it provides a non-conflicting way to open the
 * viewer while leaving the native control bar usable. */
.mkt-media-wrap { position: relative; }
.mkt-media-expand {
  position: absolute;
  top: 8px; right: 8px;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.mkt-media-expand:hover { background: rgba(0, 0, 0, 0.75); }

/* Owner-only per-item delete control (Phase B). Sits below the expand
 * button (top-right) so the two never overlap; same compact tap target. */
.mkt-media-del {
  position: absolute;
  top: 50px; right: 8px;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 0;
  background: rgba(180, 30, 30, 0.78);
  color: #fff;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.mkt-media-del:hover { background: rgba(200, 40, 40, 0.92); }

/* Owner-only "Add Media" control (Phase C). Sits under the gallery; the
 * file input is visually hidden and triggered by the button. */
.mkt-detail-addmedia { margin: 10px 0 4px; }
.mkt-addmedia-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.mkt-addmedia-btn:hover { background: rgba(16, 185, 129, 0.24); }
.mkt-addmedia-btn:disabled { opacity: 0.6; cursor: default; }

/* Missing-media fallback (Priority 4). Replaces a broken <img>/<video>
 * whose bytes are gone from durable storage with a clean placeholder
 * instead of a browser broken-image glyph or a watermark-only box. */
.pm-media-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 120px;
  padding: 16px;
  text-align: center;
  background:
    radial-gradient(130% 130% at 50% 0%, rgba(16, 185, 129, 0.12), transparent 60%),
    #131a18;
  color: #9fb0aa;
}
.pm-media-missing-ico { font-size: 30px; line-height: 1; opacity: 0.7; color: #10b981; }
.pm-media-missing-txt { font-size: 13px; line-height: 1.35; max-width: 260px; }
/* Feed cards use an absolutely-positioned 16:9 box. */
.feed-card-thumb > .pm-media-missing--card {
  position: absolute;
  top: 0;
  left: 0;
}
/* Market/search cards center their thumb content via flex. */
.mkt-listing-thumb > .pm-media-missing--card { min-height: 100%; }
.pm-media-missing-wrap { background: #131a18; }
.pm-media-missing--owner .pm-media-missing-txt { color: #e6b800; font-weight: 500; }

@media (max-width: 600px) {
  .pm-media-viewer { padding: 0; }
  .pm-media-viewer-nav { width: 40px; height: 40px; font-size: 20px; }
}

/* ============================================================
   Phase 1.3 (cleanup36): Settings & Profile slide-overs no longer
   paint a full-height dark surface. The slide container is transparent
   so the dashboard / listings remain visible behind any empty space.
   The header bar and individual content surfaces (settings rows, the
   profile id card, the profile action list, the inline Edit Profile
   panel, settings sub-pages) carry their own card backgrounds so
   nothing floats unstyled. Scoped to body.pm-modern (dark theme) —
   the light theme uses var(--pm-bg)=#FFFFFF and never produced the
   "dark stretch" complaint, so we leave it untouched.
   ============================================================ */
body.pm-modern .settings-slide-panel,
body.pm-modern .profile-slide-panel {
  /* Opaque solid-dark surface. Previously `transparent`, which let the
     dashboard feed show THROUGH the profile/settings panel — the
     "see-through panel" complaint. The inner header/id cards still
     carry their own (slightly lighter) bg-elev so layering reads
     correctly on top of this base. NOTE: --pm-bg is #FFFFFF even in
     pm-modern, so we must use an explicit dark literal here, not
     var(--pm-bg). */
  background: #0f1513;
  border-left: none;
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.45);
}
body.pm-modern .settings-slide-body {
  padding: 8px;
  background: transparent;
}
body.pm-modern .profile-slide-body {
  padding: 8px;
  background: transparent;
  /* Preserve the existing safe-area bottom padding so the SAVE button
     in Edit Profile stays above the bottom nav / iOS home indicator. */
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}
body.pm-modern .settings-slide-header,
body.pm-modern .profile-slide-header {
  background: var(--pm-bg-elev, #131a18);
  margin: 4px 4px 8px;
  border-radius: 12px;
  border-bottom: none;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body.pm-modern .settings-list {
  margin: 0 4px;
}
body.pm-modern .settings-subpage {
  background: var(--pm-bg-elev, #131a18);
  border-radius: 12px;
  padding: 14px;
  margin: 0 4px;
  height: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body.pm-modern .profile-id-card {
  background: var(--pm-bg-elev, #131a18);
  border-radius: 12px;
  padding: 14px 12px 18px;
  margin: 0 4px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body.pm-modern .profile-action-list {
  background: var(--pm-bg-elev, #131a18);
  margin: 8px 4px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body.pm-modern .dash-profile-panel {
  background: var(--pm-bg-elev, #131a18);
  border-radius: 12px;
  padding: 14px;
  margin: 0 4px;
  border-top: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   PHASE 5 — Profile photo crop / zoom / reposition modal
   Circular framing UI shown after a user picks a profile photo,
   before the existing upload+persist pipeline runs. Mobile-first:
   the stage uses touch-action:none so drag/pinch don't scroll or
   zoom the page. The circular "hole" is a box-shadow ring clipped
   to the square stage via overflow:hidden.
   ============================================================ */
.avatar-crop-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.72);
  align-items: center;
  justify-content: center;
  padding: 16px;
  -webkit-tap-highlight-color: transparent;
}
.avatar-crop-modal.open { display: flex; }
.avatar-crop-sheet {
  width: 100%;
  max-width: 360px;
  background: #131a18;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 16px 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.avatar-crop-title {
  color: #f2f5f4;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 14px;
}
.avatar-crop-stage {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #0c100f;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.avatar-crop-stage:active { cursor: grabbing; }
.avatar-crop-img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.avatar-crop-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.92);
  pointer-events: none;
}
.avatar-crop-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 4px 4px;
}
.avatar-crop-zoom-ico {
  color: #cfe0db;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
}
.avatar-crop-zoom-ico--big { font-size: 22px; }
.avatar-crop-zoom input[type="range"] {
  flex: 1 1 auto;
  width: 100%;
  accent-color: #1fb98a;
  height: 24px;
}
.avatar-crop-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.avatar-crop-actions .pm-btn { flex: 1 1 0; }

/* RTL: mirror the zoom row so the small/large icons read correctly. */
[dir="rtl"] .avatar-crop-zoom { flex-direction: row-reverse; }

/* ── Shared worldwide phone country-code row (phone-input.js) ────────── */
.pm-phone-row { display: flex; gap: 8px; align-items: stretch; }
/* Country selector stays compact (~25-30%) so the phone-number input
   gets the majority of the width. min/max keep "SS +211" readable
   without letting the selector grow on wide screens. */
.pm-phone-row .pm-phone-cc { flex: 0 0 30%; min-width: 84px; max-width: 132px; }
.pm-phone-row .pm-phone-num { flex: 1 1 auto; min-width: 0; }
[dir="rtl"] .pm-phone-row { flex-direction: row-reverse; }