:root {
  color-scheme: light;
  --bg: #eef4ff;
  --bg-alt: #f8fbff;
  --card: rgba(255, 255, 255, 0.9);
  --card-solid: #ffffff;
  --text: #0f172a;
  --muted: #5b6b84;
  --border: rgba(148, 163, 184, 0.22);
  --border-strong: rgba(59, 130, 246, 0.18);
  /* Brand palette — single source of truth. These defaults reproduce the
     original blue theme exactly (rgb() notation is used so the tokens are not
     themselves rewritten by the hex→var tokenization). At runtime the admin
     "Theme Color" (store.primary_color) re-derives this whole family via
     applyStoreTheme() in shell.tsx, so one color recolours the entire site. */
  --primary: rgb(37 99 235);
  --primary-dark: rgb(29 78 216);
  --primary-bright: rgb(59 130 246);
  --primary-soft: rgba(37, 99, 235, 0.12);
  --indigo: rgb(79 70 229);
  --indigo-light: rgb(99 102 241);
  --accent: rgb(124 58 237);
  --success-bg: #ecfdf5;
  --success-text: #166534;
  --error-bg: #fff1f2;
  --error-text: #be123c;
  --input-bg: rgba(255, 255, 255, 0.96);
  --shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 14px 32px rgba(15, 23, 42, 0.08);
  --radius-xl: var(--store-radius, 28px);
  --radius-lg: var(--store-radius, 20px);
  --radius-md: var(--store-radius, 16px);
}

* {
  box-sizing: border-box;
}

/* ─── Global broken-image fallback ─── */
img {
  min-height: 1px; /* prevent zero-height collapse */
}
img[src=""], img:not([src]) {
  visibility: hidden;
}
/* Generic placeholder background for image containers when img fails */
.market-avatar,
.search-card__image,
.sd-gig-card__img-wrap,
.saved-card__image,
.card-carousel,
.market-media-grid__item,
.market-media-slider__slide,
.od-item__thumb-wrap,
.jobs-card__thumb-wrap,
.pc-checkout-item__image-wrap,
.pc-quote-card__thumb-wrap,
.flw-item__avatar,
.buyer-account__avatar-wrap,
.comm__post-avatar,
.comm__board-icon,
.seller-page__portfolio-thumb-wrap {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  background-size: cover;
}

html {
  scrollbar-gutter: stable;          /* prevent CLS from scrollbar appearing/disappearing */
}

body {
  margin: 0;
  font-family: var(--store-font, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--store-font-size, 1rem);
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.22), transparent 30%),
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.14), transparent 28%),
    linear-gradient(180deg, #f5f9ff 0%, var(--store-bg, var(--bg)) 42%, var(--bg-alt) 100%);
  color: var(--store-text, var(--text));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--store-heading-font, inherit);
}

.site-header__brandLogo {
  height: 64px;
  max-height: 72px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

#seekiyo-app-root,
.site-app {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 84px);   /* header ~82px + 2px border — prevents footer CLS */
}

/* Full-screen dedicated experience (e.g. seller onboarding — no header/footer) */
.site-main--fullscreen {
  min-height: 100vh;
}

a {
  color: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 84px;                 /* reserve header space — prevents CLS on nav load */
  backdrop-filter: blur(18px);
  background: rgba(245, 249, 255, 0.78);
  border-bottom: 1px solid rgba(191, 219, 254, 0.7);
}

.site-header__inner {
  width: var(--shell-width);
  margin: 0 auto;
}

.site-header__inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}

.site-header__brandMark {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.28);
}

.site-header__brandText {
  display: grid;
  gap: 4px;
}

.site-header__brandText strong {
  font-size: 1.08rem;
  line-height: 1;
}

.site-header__brandText small {
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 600;
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.site-header__pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.72);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-header__greeting {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  margin-right: 4px;
}

.site-header__link,
.site-header__button {
  padding: 11px 15px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  border: 1px solid transparent;
}

.site-header__button {
  background: var(--primary-soft);
  color: var(--primary);
  cursor: pointer;
}

.site-header__link:hover,
.site-header__link.is-active,
.site-header__button:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--border-strong);
  color: var(--primary);
  transform: translateY(-1px);
}

/* Hamburger: hidden on desktop. responsive.css (loaded only <=768px, later in
   the cascade) re-shows it as display:flex on mobile/tablet. This base rule
   lives here — a stylesheet loaded at ALL widths — because responsive.css is
   media-gated to <=768px and therefore cannot hide the button on desktop. */
.mobile-hamburger {
  display: none;
}

/* More dropdown */
.site-header__more {
  position: relative;
  display: inline-flex;
}

.site-header__more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.site-header__more-toggle.is-open {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--border-strong);
  color: var(--primary);
}

.site-header__more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  max-height: 400px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: 6px 0;
}

.site-header__more-item {
  display: block;
  width: 100%;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__more-item.is-active {
  color: var(--primary);
  background: var(--primary-soft, #eff6ff);
}

.site-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.site-header__bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s, color 0.15s;
  padding: 0;
  margin-left: 4px;
}

.site-header__bell:hover {
  background: rgba(255, 255, 255, 0.88);
  color: var(--primary);
}

.site-header__badge--bell {
  position: absolute;
  top: -4px;
  right: -4px;
  margin-left: 0;
}

.site-header__bell-wrap {
  position: relative;
  display: inline-flex;
}

.site-notif-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 360px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  z-index: 200;
  animation: dropdown-fade 0.15s ease;
  overflow: hidden;
}

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

.site-notif-dropdown__header strong {
  font-size: 0.92rem;
  color: var(--text);
}

.site-notif-dropdown__mark-all {
  background: none;
  border: none;
  color: var(--primary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.12s;
}

.site-notif-dropdown__mark-all:hover {
  background: var(--primary-soft);
}

.site-notif-dropdown__list {
  max-height: 400px;
  overflow-y: auto;
}

.site-notif-dropdown__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.site-notif-dropdown__footer {
  border-top: 1px solid var(--border);
  padding: 8px;
}

.site-notif-dropdown__view-all {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--primary);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 12px;
  border-radius: 8px;
  text-align: center;
  transition: background 0.12s;
}

.site-notif-dropdown__view-all:hover {
  background: var(--primary-soft);
}

.site-notif-dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.12s;
}

.site-notif-dropdown__item:last-child {
  border-bottom: none;
}

.site-notif-dropdown__item:hover {
  background: #f8fafc;
}

.site-notif-dropdown__item--unread {
  background: rgba(37, 99, 235, 0.04);
}

.site-notif-dropdown__item--unread:hover {
  background: rgba(37, 99, 235, 0.08);
}

.site-notif-dropdown__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f1f5f9;
}

.site-notif-dropdown__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-notif-dropdown__item-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-notif-dropdown__item--unread .site-notif-dropdown__item-title {
  font-weight: 700;
}

.site-notif-dropdown__item-body {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-notif-dropdown__item-time {
  font-size: 0.72rem;
  color: var(--muted);
}

.site-notif-dropdown__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 6px;
}

.site-header__dropdown {
  position: relative;
}

.site-header__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.site-header__dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border-strong);
}

.site-header__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.site-header__avatar--img {
  object-fit: cover;
  background: none;
}

.site-header__avatar-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-header__avatar-ring {
  display: none;
  position: absolute;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  pointer-events: none;
}

.site-header__dropdown-menu {
  position: fixed;
  right: max(16px, calc((100vw - 1100px) / 2));
  top: 88px;
  min-width: 260px;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 10001;
  padding: 6px 0;
  animation: dropdown-fade 0.15s ease;
}

@keyframes dropdown-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header__dropdown-label {
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header__dropdown-section {
  padding: 8px 16px 10px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.site-header__dropdown-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

.site-header__dropdown-section-body {
  display: block;
}

.site-header__dropdown-muted {
  font-size: 0.8rem;
  color: var(--muted);
}

.site-header__dropdown-select {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #f8fafc;
  color: var(--text);
  cursor: pointer;
}

.site-header__dropdown-select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.site-header__dropdown-hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.site-header__dropdown-hint--error {
  color: #b91c1c;
}

.site-header__dropdown-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease;
}

.site-header__dropdown-item:hover,
.site-header__dropdown-item.is-active {
  background: var(--primary-soft, #eff6ff);
  color: var(--primary);
}

.site-header__dropdown-item--danger {
  color: #dc2626;
}

.site-header__dropdown-item--danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Switch role button */
.site-header__dropdown-item--switch {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0d9488;
  font-weight: 600;
  border-top: 1px solid #f1f5f9;
  margin-top: 2px;
}
.site-header__dropdown-item--switch:hover {
  background: #f0fdfa;
  color: #0f766e;
}
.site-header__dropdown-item--switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.site-header__dropdown-item--switch svg {
  flex-shrink: 0;
}

/* Mobile drawer switch button */
.mobile-drawer__link--switch {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0d9488;
  font-weight: 600;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 10px 16px;
  font-size: 0.9375rem;
}
.mobile-drawer__link--switch:hover {
  background: #f0fdfa;
}
.mobile-drawer__link--switch svg {
  flex-shrink: 0;
}

/* Account detail inline form */
.acct-detail-form {
  padding: 12px 16px 16px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}
.acct-detail-form__field {
  margin-bottom: 10px;
}
.acct-detail-form__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.acct-detail-form__input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #1e293b;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.acct-detail-form__input:focus {
  border-color: var(--primary-bright);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.acct-detail-form__msg {
  font-size: 0.8125rem;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.acct-detail-form__msg--ok {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.acct-detail-form__msg--err {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.acct-detail-form__save {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #1e40af;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.acct-detail-form__save:hover {
  background: #1e3a8a;
}
.acct-detail-form__save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Account Details Page Form */
.acct-page-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.acct-page-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acct-page-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}
.acct-page-form__input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9375rem;
  color: #0f172a;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.acct-page-form__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.acct-page-form__input:disabled {
  background: #f8fafc;
  cursor: not-allowed;
}
.acct-page-form__msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
}
.acct-page-form__msg--ok {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.acct-page-form__msg--err {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.acct-page-form__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.acct-page-form__save {
  padding: 12px 28px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.acct-page-form__save:hover {
  background: var(--primary-dark);
}
.acct-page-form__save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.acct-page-form__back {
  padding: 12px 28px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s;
}
.acct-page-form__back:hover {
  background: #e2e8f0;
}

/* Account Details — location (auto-detected area) */
.acct-loc {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #f8fafc;
}
.acct-loc__current {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475569;
}
.acct-loc__current > svg { color: var(--primary); flex: none; }
.acct-loc__text {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-loc__change {
  flex: none;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.acct-loc__change:hover { background: #e0edff; }
.acct-loc__country {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 2px;
  padding-left: 24px;
}
.acct-loc__edit {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}
.acct-loc__detect {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.acct-loc__detect:disabled { opacity: 0.6; cursor: not-allowed; }
.acct-loc__or {
  text-align: center;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin: 10px 0;
}
.acct-loc__row { display: flex; gap: 8px; }
.acct-loc__save {
  flex: none;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.acct-loc__save:disabled { opacity: 0.6; cursor: not-allowed; }
.acct-loc__msg {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #475569;
}

/* Account Details — avatar uploader */
.acct-page-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.acct-page-avatar__wrap {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
}
.acct-page-avatar__wrap:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45);
}
.acct-page-avatar__wrap[aria-busy="true"] {
  cursor: progress;
}
.acct-page-avatar__img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e2e8f0;
  background: #f1f5f9;
  display: block;
  transition: opacity .2s;
}
.acct-page-avatar__overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acct-page-avatar__spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: acct-page-avatar-spin .7s linear infinite;
}
@keyframes acct-page-avatar-spin {
  to { transform: rotate(360deg); }
}
.acct-page-avatar__hint {
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 500;
}
.acct-page-avatar__wrap[aria-busy="true"] + .acct-page-avatar__hint {
  color: var(--primary);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .acct-page-avatar__spinner { animation-duration: 1.4s; }
}

@media (max-width: 600px) {
  .acct-page-form__actions {
    flex-direction: column;
  }
  .acct-page-form__save,
  .acct-page-form__back {
    width: 100%;
    text-align: center;
  }
}

.site-footer {
  border-top: 1px solid #e2e8f0;
  background: #0f172a;
  color: #94a3b8;
}

.site-footer__cols {
  width: var(--shell-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 48px 0 32px;
}

.site-footer__brand-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #f1f5f9;
}

.site-footer__brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--indigo-light) 0%, #8b5cf6 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
}

.site-footer__brand-logo {
  max-height: 36px;
  max-width: 120px;
  object-fit: contain;
}

.site-footer__brand-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #f1f5f9;
}

.site-footer__tagline {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
  max-width: 280px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__col-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #e2e8f0;
  margin: 0 0 4px;
}

.site-footer__col-link {
  font-size: 0.88rem;
  color: #94a3b8;
  text-decoration: none;
  line-height: 1.8;
}

.site-footer__bottom {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px solid #1e293b;
}

.site-footer__bottom .site-footer__copy {
  margin: 0;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.6;
}

.site-footer__bottom .site-footer__copy a {
  color: #94a3b8;
  text-decoration: none;
}

.site-shell-noscript {
  width: min(100%, 740px);
  margin: 24px auto;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #9f1239;
  font-weight: 600;
}

.app-status {
  display: none;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  line-height: 1.6;
  border: 1px solid transparent;
}

.app-status.is-visible {
  display: block;
}

.app-status.is-error {
  background: var(--error-bg);
  color: var(--error-text);
  border-color: rgba(244, 63, 94, 0.2);
}

.app-status.is-success {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: rgba(34, 197, 94, 0.22);
}

.app-status.is-warning {
  background: #fef3c7;
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.25);
}

.app-status.app-status--prewrap {
  white-space: pre-line;
}

.loading-panel {
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 28px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
  box-shadow: var(--shadow-soft);
  min-height: 320px;
}

.loading-panel__bar {
  height: 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.9), rgba(191, 219, 254, 0.8), rgba(226, 232, 240, 0.9));
  background-size: 200% 100%;
  animation: seekiyo-shimmer 1.5s linear infinite;
}

.loading-panel__bar--lg {
  width: 42%;
  height: 18px;
}

.loading-panel__bar--short {
  width: 28%;
  margin-bottom: 18px;
}

.loading-panel__label {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.button-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  animation: seekiyo-spin 0.8s linear infinite;
}

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

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

.market-category-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.market-category-tree__root {
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.market-category-tree__root:last-child {
  border-bottom: none;
}

.market-category-tree__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
}

.market-category-tree__row--root {
  font-weight: 600;
  font-size: 1rem;
}

.market-category-tree__row--sub {
  padding-left: 24px;
  font-size: 0.92rem;
}

.market-category-tree__row--leaf {
  padding-left: 48px;
  font-size: 0.86rem;
}

.market-category-tree__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text, #333);
  transition: background 0.15s;
  padding: 0;
}

.market-category-tree__toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

.market-category-tree__toggle-spacer {
  display: inline-block;
  width: 24px;
  flex-shrink: 0;
}

.market-category-tree__link {
  text-decoration: none;
  color: var(--text, #333);
  transition: color 0.15s;
}

.market-category-tree__link:hover {
  color: var(--primary, var(--primary));
  text-decoration: underline;
}

.market-category-tree__link--root {
  font-weight: 600;
}

.market-category-tree__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted, #f3f4f6);
}

.market-category-tree__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.market-category-tree__icon--fallback {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary, var(--primary));
  background: color-mix(in srgb, var(--primary, var(--primary)) 12%, #fff);
}

.market-category-tree__link--sub {
  font-weight: 500;
}

.market-category-tree__link--leaf {
  font-weight: 400;
  color: var(--text-muted, #666);
}

.market-category-tree__count {
  margin-left: auto;
  font-size: 0.75rem;
  background: var(--bg-muted, #f3f4f6);
  color: var(--text-muted, #666);
  border-radius: 10px;
  padding: 1px 8px;
  font-weight: 500;
}

.market-category-tree__children {
  animation: cat-tree-slide 0.15s ease-out;
}

@keyframes cat-tree-slide {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .site-header__inner {
    width: min(100% - 24px, 1120px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 14px 0;
  }

  .site-header__nav {
    width: 100%;
  }

  .site-header__brand {
    width: 100%;
  }

  .site-header__pill {
    order: -1;
  }

  .loading-panel {
    width: min(100% - 24px, 1100px);
    padding: 22px;
  }
}

.site-header__dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: transparent;
}

.site-header__dropdown-avatar {
  display: flex;
  justify-content: center;
  padding: 0.6rem 0 0.35rem;
}

.site-header__dropdown-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8ecf1;
  border: 2px solid #e2e8f0;
}

@media (max-width: 760px) {
  .site-header__dropdown-avatar-img {
    width: 56px;
    height: 56px;
  }
}

.site-header__dropdown-trigger svg {
  margin-left: 2px;
}

.site-header__dropdown-item--file {
  cursor: pointer;
}

.site-header__link,
.site-header__button {
  transition: color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}

.site-header__link:active,
.site-header__button:active {
  transform: scale(0.97);
}

.loading-panel {
  animation: fadeInPanel 0.3s ease;
}

.market-page-skeleton {
  position: relative;
  z-index: 1;
  animation: fadeInPanel 0.3s ease;
}

@keyframes fadeInPanel {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.market-status-banner {
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-weight: 600;
  line-height: 1.5;
  animation: fadeIn 0.25s ease;
}

/* ============================================================
   SELLER DASHBOARD — sdash__*  (premium, matches search-page)
   ============================================================ */

.sdash {
  min-height: 100vh;
  background: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Hero (breaks out of market-shell constraint) ── */
.sdash__hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%);
  padding: 56px 24px 88px;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.sdash__hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.sdash__hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  margin: 0 0 8px;
}
.sdash__hero-title {
  color: #fff;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  line-height: 1.2;
}
.sdash__hero-subtitle {
  color: rgba(255,255,255,0.65);
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 28px;
  line-height: 1.5;
}
.sdash__hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.sdash__hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.sdash__hero-btn--glass {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
}
.sdash__hero-btn--solid {
  background: #fff;
  color: #0f172a;
}

/* ── Floating Stats Bar ── */
.sdash__stats-bar {
  max-width: 1100px;
  margin: -48px auto 0;
  padding: 0 16px;
  position: relative;
  z-index: 10;
}
.sdash__stats-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 20px 24px;
}
.sdash__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.sdash__stat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 10px;
}
.sdash__stat:hover { background: #f8fafc; }
.sdash__stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sdash__stat-body { flex: 1; min-width: 0; }
.sdash__stat-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
}
.sdash__stat-label {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 2px;
}

/* ── Content area ── */
.sdash__content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Quick Stats Row ── */
.sdash__quick-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.sdash__quick {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.sdash__quick:hover { border-color: var(--primary-bright); box-shadow: 0 0 0 3px rgba(59,130,246,0.08); }
.sdash__quick-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 10px;
  color: var(--primary-bright);
}
.sdash__quick-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}
.sdash__quick-label {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}

/* ── Panels ── */
.sdash__two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.sdash__panel {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
}
.sdash__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}
.sdash__panel-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sdash__panel-link {
  background: none;
  border: none;
  color: var(--primary-bright);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.sdash__panel-link:hover { color: var(--primary-dark); }
.sdash__panel-body {
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sdash__panel-empty {
  color: #94a3b8;
  text-align: center;
  padding: 24px 0;
  font-size: 0.88rem;
  margin: 0;
}

/* ── Activity Rows ── */
.sdash__row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 10px;
  cursor: pointer;
}
.sdash__row-item:nth-child(even) { background: #f1f5f9; }
.sdash__row-item:hover { background: #e2e8f0; }
.sdash__row-left { min-width: 0; flex: 1; }
.sdash__row-name { font-weight: 600; font-size: 0.88rem; color: #0f172a; }
.sdash__row-meta { font-size: 0.76rem; color: #94a3b8; margin-top: 2px; }
.sdash__row-right { text-align: right; flex-shrink: 0; }
.sdash__row-amount { font-size: 0.88rem; font-weight: 700; color: #0f172a; margin-top: 3px; }
.sdash__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* ── Proof Items ── */
.sdash__proof {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  background: #fffbeb;
}
.sdash__proof-bar { width: 4px; background: #f59e0b; flex-shrink: 0; }
.sdash__proof-body { padding: 10px 14px; flex: 1; min-width: 0; }
.sdash__proof-title { font-weight: 600; font-size: 0.88rem; color: #0f172a; }
.sdash__proof-meta { font-size: 0.76rem; color: #94a3b8; margin-top: 3px; }
.sdash__proof-time { font-size: 0.72rem; color: #d97706; margin-top: 3px; font-weight: 600; }

/* ── Lead Items ── */
.sdash__lead {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
  cursor: pointer;
}
.sdash__lead:hover { background: #f1f5f9; }
.sdash__lead-bar { width: 4px; background: var(--indigo-light); flex-shrink: 0; }
.sdash__lead-body { padding: 10px 14px; flex: 1; min-width: 0; }
.sdash__lead-title { font-weight: 600; font-size: 0.88rem; color: #0f172a; }
.sdash__lead-meta { font-size: 0.76rem; color: #94a3b8; margin-top: 3px; }
.sdash__lead-msg {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdash__lead-time { font-size: 0.72rem; color: var(--indigo-light); margin-top: 3px; font-weight: 600; }

/* ── Needs Grid ── */
.sdash__needs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 12px 20px 16px;
}
.sdash__need {
  padding: 14px 16px;
  background: #f8fafc;
  border-radius: 10px;
  border-left: 4px solid #8b5cf6;
  cursor: pointer;
}
.sdash__need:hover { background: #f1f5f9; }
.sdash__need-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sdash__need-title { font-weight: 700; font-size: 0.92rem; color: #0f172a; flex: 1; }
.sdash__need-cat {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: #ede9fe;
  color: var(--accent);
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
}
.sdash__need-desc {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdash__need-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 0.76rem;
  color: #94a3b8;
}
.sdash__need-location { font-size: 0.76rem; color: #94a3b8; }
.sdash__need-budget { font-size: 0.76rem; color: #0f172a; font-weight: 600; }
.sdash__need-time { font-size: 0.72rem; color: #8b5cf6; font-weight: 600; }
.sdash__need-responses { font-size: 0.72rem; color: #94a3b8; }

/* ── Earnings Grid ── */
.sdash__earn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 20px;
}
.sdash__earn-cell {
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  border: 1px solid #e2e8f0;
}
.sdash__earn-cell--green  { background: #f0fdf4; border-color: #bbf7d0; }
.sdash__earn-cell--indigo { background: #eef2ff; border-color: #c7d2fe; }
.sdash__earn-cell--amber  { background: #fffbeb; border-color: #fde68a; }
.sdash__earn-label {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 6px;
}
.sdash__earn-value {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
}
.sdash__earn-cell--green  .sdash__earn-value { color: #16a34a; }
.sdash__earn-cell--indigo .sdash__earn-value { color: var(--indigo); }
.sdash__earn-cell--amber  .sdash__earn-value { color: #d97706; }

/* ── Error / Empty State ── */
.sdash__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}
.sdash__empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.sdash__empty-text {
  font-size: 1rem;
  color: #94a3b8;
  margin: 0 0 16px;
}
.sdash__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-bright);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  cursor: pointer;
  font-family: inherit;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .sdash__stats-grid { grid-template-columns: repeat(2, 1fr); }
  .sdash__quick-row  { grid-template-columns: repeat(3, 1fr); }
  .sdash__two-col    { grid-template-columns: 1fr; }
  .sdash__earn-grid  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .sdash__hero { padding: 40px 16px 72px; }
  .sdash__hero-title { font-size: 1.5rem; }
  .sdash__stats-bar { margin-top: -40px; padding: 0 10px; }
  .sdash__stats-card { padding: 14px 12px; }
  .sdash__stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sdash__stat-value { font-size: 1.1rem; }
  .sdash__stat-icon  { width: 38px; height: 38px; }
  .sdash__quick-row  { grid-template-columns: repeat(2, 1fr); }
  .sdash__content    { padding: 20px 10px 40px; }
  .sdash__earn-grid  { grid-template-columns: 1fr; }
  .sdash__hero-actions { flex-direction: column; }
}


/* ============================================================
   SELLER SUBSCRIPTION — ssub__*  (premium, matches sdash)
   ============================================================ */

/* ── Current plan floating bar row ── */
.ssub__current-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ssub__current-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-right: 20px;
  border-right: 1px solid #e2e8f0;
}
.ssub__current-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ssub__current-label {
  display: block;
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ssub__current-name {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}
.ssub__cancel-btn {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: 10px;
  border: 1px solid #fca5a5;
  background: #fff;
  color: #dc2626;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.ssub__cancel-btn:hover { background: #fef2f2; border-color: #dc2626; }
.ssub__cancel-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Banner ── */
.ssub__banner {
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
}
.ssub__banner--success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.ssub__banner--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* ── Plans Grid ── */
.ssub__plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.ssub__plan {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: all 0.2s;
}
.ssub__plan:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
  transform: translateY(-4px);
  border-color: var(--plan-color, #e2e8f0);
}
.ssub__plan--active {
  border-width: 2px;
  border-color: var(--plan-color, var(--primary-bright));
  background: color-mix(in srgb, var(--plan-color, var(--primary-bright)) 4%, #fff);
}
.ssub__plan-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 20px;
  letter-spacing: 0.06em;
}

/* ── Plan Icon ── */
.ssub__plan-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.ssub__plan-icon svg { width: 28px; height: 28px; }

/* ── Plan Name / Price ── */
.ssub__plan-name {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.ssub__plan-price {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 18px;
  line-height: 1.1;
}
.ssub__plan-period {
  font-size: 0.875rem;
  font-weight: 400;
  color: #94a3b8;
}

/* ── Features ── */
.ssub__plan-features {
  flex: 1;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
}
.ssub__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.4;
}
.ssub__feature-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ── Plan CTA Button ── */
.ssub__plan-btn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 10px;
  border: 2px solid transparent;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
}
.ssub__plan-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.ssub__plan-btn:disabled { cursor: not-allowed; }
.ssub__plan-btn--current {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  opacity: 0.7;
}
.ssub__plan-btn--current:hover { opacity: 0.7; transform: none; }

/* ── Info Box ── */
.ssub__info-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  font-size: 0.875rem;
  color: #1e40af;
}
.ssub__info-icon {
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
}
.ssub__info-box strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
}
.ssub__info-box p {
  margin: 0;
  line-height: 1.6;
  color: var(--primary-bright);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ssub__current-row { flex-wrap: wrap; }
  .ssub__current-info { border-right: none; padding-right: 0; }
  .sdash__stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ssub__plans-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ssub__current-row { flex-direction: column; align-items: stretch; }
  .ssub__current-info { justify-content: center; }
  .sdash__stats-grid { grid-template-columns: 1fr 1fr; }
  .ssub__plans-grid { grid-template-columns: 1fr; }
  .ssub__plan { padding: 24px 20px 20px; }
}

/* ============================================================
   SELLER ANALYTICS — sana__*  (fresh rebuild, matches design)
   ============================================================ */

.sana { display: block; }

.sana__wrap {
  width: var(--shell-width);
  max-width: 100%;
  margin: 0 auto;
  padding: 4px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- Hero ---- */
.sana__hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 26px 30px;
  background: linear-gradient(120deg, #1e1b4b 0%, #322b7c 46%, #5b21b6 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 132px;
}
.sana__hero::after {
  content: "";
  position: absolute;
  right: -40px; top: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle at center, rgba(124,58,237,0.45), transparent 62%);
  pointer-events: none;
}
.sana__hero-text { position: relative; z-index: 1; max-width: 60%; }
.sana__hero-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin: 0 0 6px;
}
.sana__hero-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.1;
}
.sana__hero-sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.82);
  margin: 0;
}
.sana__hero-art {
  position: relative;
  z-index: 1;
  width: 210px;
  max-width: 40%;
  flex-shrink: 0;
}
.sana__hero-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 22px rgba(0,0,0,0.28)); }

/* ---- Section container ---- */
.sana__section {
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,0.05);
  padding: 20px 22px;
}
.sana__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sana__section-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin: 0 0 16px;
}
.sana__section-head .sana__section-title { margin: 0; }

/* ---- Date range picker ---- */
.sana__daterange { position: relative; }
.sana__date-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sana__date-btn:hover { border-color: #c4b5fd; box-shadow: 0 2px 8px rgba(124,58,237,0.12); }
.sana__date-btn svg { color: var(--accent); }
.sana__date-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 240px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16,24,40,0.16);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sana__date-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sana__date-preset {
  flex: 1 1 auto;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.sana__date-preset:hover { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
.sana__date-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 600; color: #64748b; }
.sana__date-field input {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 0.82rem;
  color: #0f172a;
}
.sana__date-apply {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.sana__date-apply:hover { background: #6d28d9; }

/* ---- Revenue grid ---- */
.sana__revenue-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 14px;
}
.sana__rev-main {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, #9333ea 55%, #a78bfa 100%);
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sana__rev-main::after {
  content: "";
  position: absolute;
  left: -30px; bottom: -70px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
}
.sana__rev-main-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; }
.sana__rev-label { font-size: 0.82rem; font-weight: 600; opacity: 0.9; }
.sana__rev-coin { color: rgba(255,255,255,0.85); }
.sana__rev-value { font-size: 1.9rem; font-weight: 800; line-height: 1; position: relative; z-index: 1; }
.sana__rev-card {
  background: #fbfbfe;
  border: 1px solid #eceaf5;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 116px;
}
.sana__rev-card-top { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; font-weight: 600; color: #64748b; }
.sana__rev-card-ic { color: #8b5cf6; display: inline-flex; }
.sana__rev-card-value { font-size: 1.55rem; font-weight: 800; color: #0f172a; line-height: 1; }
.sana__rev-trend { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; color: #16a34a; }
.sana__rev-trend svg { flex-shrink: 0; }
.sana__rev-trend.is-down { color: #ef4444; }
.sana__rev-trend.is-down svg { transform: scaleY(-1); }
.sana__rev-trend.is-muted { color: #94a3b8; }
.sana__rev-trend.is-muted svg { display: none; }

/* ---- Performance metrics ---- */
.sana__metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.sana__metric {
  background: #fbfbfe;
  border: 1px solid #eceaf5;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sana__metric-top { display: flex; align-items: center; gap: 10px; }
.sana__metric-chip {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ede9fe; color: var(--accent);
  flex-shrink: 0;
}
.sana__metric-label { font-size: 0.8rem; font-weight: 600; color: #475569; flex: 1; line-height: 1.2; }
.sana__metric-pct { font-size: 0.95rem; font-weight: 800; }
.sana__metric-track { background: #ece9f5; height: 8px; border-radius: 99px; overflow: hidden; }
.sana__metric-fill {
  height: 100%; border-radius: 99px; min-width: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, #a78bfa 100%);
  transition: width 0.4s ease;
}

/* ---- Activity + Reach stat cards ---- */
.sana__activity-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.sana__reach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sana__stat {
  background: #fbfbfe;
  border: 1px solid #eceaf5;
  border-radius: 14px;
  padding: 15px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sana__stat-chip {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sana__stat-chip--purple { background: #ede9fe; color: var(--accent); }
.sana__stat-chip--blue   { background: #e0f2fe; color: #0284c7; }
.sana__stat-chip--green  { background: #dcfce7; color: #16a34a; }
.sana__stat-chip--orange { background: #ffedd5; color: #ea580c; }
.sana__stat-chip--pink   { background: #fce7f3; color: #db2777; }
.sana__stat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sana__stat-value { font-size: 1.3rem; font-weight: 800; color: #0f172a; line-height: 1.1; }
.sana__stat-label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600; color: #64748b; }
.sana__stat-note { font-size: 0.7rem; font-weight: 600; color: #94a3b8; margin-top: 1px; }

/* ---- Info tooltip ---- */
.sana__tip { position: relative; display: inline-flex; align-items: center; color: #cbd5e1; cursor: help; }
.sana__tip:hover, .sana__tip:focus-visible { color: var(--accent); outline: none; }
.sana__tip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 190px;
  background: #1e293b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.35;
  padding: 7px 9px;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(16,24,40,0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 40;
}
.sana__tip-bubble::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
}
.sana__tip:hover .sana__tip-bubble,
.sana__tip:focus-visible .sana__tip-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .sana__metric-grid { grid-template-columns: repeat(2, 1fr); }
  .sana__activity-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .sana__hero { padding: 22px; }
  .sana__hero-title { font-size: 1.55rem; }
  .sana__hero-text { max-width: 100%; }
  .sana__hero-art { width: 120px; }
  .sana__revenue-grid { grid-template-columns: 1fr 1fr; }
  .sana__rev-main { grid-column: 1 / -1; }
  .sana__activity-grid { grid-template-columns: repeat(2, 1fr); }
  .sana__reach-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sana__hero-art { display: none; }
  .sana__hero-text { max-width: 100%; }
  .sana__metric-grid { grid-template-columns: 1fr; }
  .sana__revenue-grid { grid-template-columns: 1fr; }
  .sana__activity-grid { grid-template-columns: 1fr; }
  .sana__section-head { align-items: flex-start; }
  .sana__daterange { width: 100%; }
  .sana__date-btn { width: 100%; justify-content: space-between; }
  .sana__date-pop { right: auto; left: 0; width: 100%; }
}

/* ============================================================
   SELLER SCREENS (Profile, Gigs, Editor) — seller-page__*
   ============================================================ */

/* Page wrapper */
.seller-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Standard card sections */
.seller-page__card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
}

.seller-page__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
}

.seller-page__card-header--clickable {
  cursor: pointer;
}

.seller-page__card-body {
  padding: 20px 24px;
}

.seller-page__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--indigo-light);
  margin: 0 0 4px;
}

.seller-page__title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.seller-page__section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.seller-page__header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Email bar */
.seller-page__email-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  margin: 0 24px 16px;
  background: #f0f4ff;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  color: #1e40af;
}
.seller-page__email-text {
  font-size: 0.9375rem;
  font-weight: 500;
  word-break: break-all;
}
@media (max-width: 600px) {
  .seller-page__email-bar {
    margin: 0 12px 12px;
    padding: 10px 14px;
    gap: 8px;
  }
  .seller-page__email-text {
    font-size: 0.8125rem;
  }
}

/* Avatar upload section */
.seller-page__avatar-section {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}

.seller-page__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.seller-page__avatar-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e2e8f0;
  background: #f8fafc;
}

.seller-page__avatar-img--clickable {
  cursor: pointer;
}

.seller-page__avatar-info {
  flex: 1;
  min-width: 0;
}

.seller-page__avatar-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
}

.seller-page__avatar-hint {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0 0 10px;
}

/* Profile completion progress */
.seller-page__progress {
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 14px 16px;
  margin: 0 24px 16px;
}

.seller-page__progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.seller-page__progress-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
}

.seller-page__progress-track {
  background: #e2e8f0;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
}

.seller-page__progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--indigo-light) 0%, #8b5cf6 100%);
  min-width: 2px;
}

.seller-page__progress-fill--done {
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.seller-page__progress-remaining {
  font-size: 0.75rem;
  color: #64748b;
  margin: 6px 0 0;
  line-height: 1.5;
}

/* Availability panel */
.seller-page__availability {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0 0;
}

/* ── Open to Work panel ── */
.seller-otw .seller-page__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.seller-otw__countdown {
  font-size: 0.85em;
  color: var(--text-secondary, #475569);
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.seller-otw__countdown strong { color: #16a34a; }
.seller-otw__warn {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.9em;
}
.seller-otw__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 0 12px;
}
.seller-otw__switch {
  --otw-w: 52px;
  position: relative;
  width: var(--otw-w);
  height: 30px;
  border-radius: 999px;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
  padding: 0;
}
.seller-otw__switch:disabled { opacity: 0.5; cursor: not-allowed; }
.seller-otw__switch--on { background: #22c55e; }
.seller-otw__switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.seller-otw__switch--on .seller-otw__switch-knob { transform: translateX(22px); }
.seller-otw__switch:focus-visible { outline: 2px solid var(--accent, var(--primary-bright)); outline-offset: 2px; }
.seller-otw__label {
  display: block;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #64748b);
  margin: 12px 0 6px;
}
.seller-otw__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.seller-otw__chip {
  min-width: 48px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-secondary, #f8fafc);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.seller-otw__chip:hover { border-color: var(--accent, var(--primary-bright)); }
.seller-otw__chip--active {
  background: var(--accent, var(--primary-bright));
  border-color: var(--accent, var(--primary-bright));
  color: #fff;
}
.seller-otw__chip:focus-visible { outline: 2px solid var(--accent, var(--primary-bright)); outline-offset: 2px; }
.seller-otw__msg {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.9em;
}
.seller-otw__msg--ok { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.seller-otw__msg--err { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.seller-otw__msg--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
@media (prefers-reduced-motion: reduce) {
  .seller-otw__switch, .seller-otw__switch-knob, .seller-otw__chip { transition: none; }
}

/* ── Seller permanent schedule (Availability & Slots, read-only) ── */
.seller-schedule__badge {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent, var(--primary-bright));
  background: color-mix(in srgb, var(--accent, var(--primary-bright)) 12%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.seller-schedule__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 16px 0 4px;
}
.seller-schedule__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--bg-secondary, #f8fafc);
}
.seller-schedule__stat-label {
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #64748b);
}
.seller-schedule__stat-value { font-size: 1.05em; font-weight: 700; color: var(--text-primary, #0f172a); }
.seller-schedule__section { margin-top: 8px; }
.seller-schedule__days { display: flex; gap: 8px; flex-wrap: wrap; }
.seller-schedule__day {
  min-width: 44px;
  text-align: center;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-secondary, #f8fafc);
  font-weight: 600;
  font-size: 0.86em;
  color: var(--text-secondary, #94a3b8);
}
.seller-schedule__day--on {
  background: var(--accent, var(--primary-bright));
  border-color: var(--accent, var(--primary-bright));
  color: #fff;
}
.seller-schedule__slots { display: flex; gap: 8px; flex-wrap: wrap; }
.seller-schedule__slot {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  background: color-mix(in srgb, #22c55e 8%, var(--bg-primary, #fff));
  font-size: 0.82em;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}
.seller-schedule__slot--break {
  background: color-mix(in srgb, #f59e0b 14%, var(--bg-primary, #fff));
  border-color: color-mix(in srgb, #f59e0b 40%, transparent);
  color: #92400e;
}

/* ── Seller live-location share indicator ── */
.seller-otw__live {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.85em;
  font-weight: 600;
}
.seller-otw__live::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.seller-otw__live--sharing { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.seller-otw__live--sharing::before { background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); animation: seller-otw-pulse 1.8s infinite; }
.seller-otw__live--denied { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.seller-otw__live--denied::before { background: #ef4444; }
.seller-otw__live--error { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.seller-otw__live--error::before { background: #f59e0b; }
.seller-otw__live--idle { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.seller-otw__live--idle::before { background: #94a3b8; }
@keyframes seller-otw-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ── Buyer-facing seller live-location map card ── */
.sd-live__pulse {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: seller-otw-pulse 1.8s infinite;
  vertical-align: middle;
}
.sd-live__map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border, #e2e8f0);
  background: #eef2f7;
}
.sd-live__map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sd-live__meta { margin: 10px 0 0; font-size: 0.85em; color: var(--text-secondary, #475569); }
.sd-live--locked .sd-live__meta { color: #64748b; }
@media (prefers-reduced-motion: reduce) {
  .sd-live__pulse, .seller-otw__live--sharing::before { animation: none; }
}

/* ══ Available Sellers (buyer page) ══════════════════════════════════ */
/* ── Refresh button ── */
.avs-refresh {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-secondary, #fff);
  color: var(--text-primary, #0f172a);
  font-size: 0.9em; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .1s ease;
  white-space: nowrap;
}
.avs-refresh:hover:not(:disabled) { border-color: #86efac; box-shadow: 0 4px 14px rgba(16, 185, 129, .12); transform: translateY(-1px); }
.avs-refresh:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }
.avs-refresh:disabled { opacity: .7; cursor: default; }
.avs-refresh__icon { display: inline-flex; color: #16a34a; }
.avs-refresh.is-loading .avs-refresh__icon,
.avs-refresh__icon.is-loading { animation: avsSpin .8s linear infinite; }

/* ── Sellers grid ── */
.avs-count {
  margin: 16px 0 12px; font-size: 0.85em; font-weight: 600;
  color: var(--text-secondary, #475569);
}
.avs-grid {
  display: grid;
  /* Auto-fill fixed-width tracks so 1-2 results stay a comfortable size and
     left-align instead of stretching/shrinking into the corner. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 340px));
  justify-content: start;
  gap: 18px;
  margin-top: 6px;
}
@media (max-width: 560px) {
  .avs-grid { grid-template-columns: 1fr; }
}

.avs-scard {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 260px; max-width: 340px;
  padding: 20px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  background: var(--bg-secondary, #fff);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
@media (max-width: 560px) { .avs-scard { max-width: none; } }
.avs-scard:hover { border-color: #86efac; box-shadow: 0 8px 22px rgba(16, 185, 129, .14); transform: translateY(-3px); }
.avs-scard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.avs-scard__avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid #d1fae5; background: #f1f5f9;
}
.avs-scard__name {
  margin: 0; font-size: 1.02em; font-weight: 700; color: var(--text-primary, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avs-scard__biz {
  margin: 0; font-size: 0.82em; color: var(--text-secondary, #64748b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avs-scard__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.avs-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.74em; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  background: var(--bg-primary, #f1f5f9); color: var(--text-secondary, #475569);
  border: 1px solid var(--border, #e2e8f0);
}
.avs-chip--service { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.avs-chip--rem { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.avs-chip--live { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.avs-scard__foot { display: flex; align-items: stretch; gap: 8px; margin-top: auto; padding-top: 4px; }
.avs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; white-space: nowrap;
  font-size: 0.82em; font-weight: 600; cursor: pointer;
  padding: 9px 14px; border-radius: 10px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.avs-btn:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }
.avs-btn--primary { flex: 1; background: #16a34a; color: #fff; }
.avs-btn--primary:hover { background: #15803d; box-shadow: 0 4px 12px rgba(22, 163, 74, .28); }
.avs-btn--ghost { flex-shrink: 0; background: var(--bg-secondary, #fff); color: var(--text-primary, #0f172a); border-color: var(--border, #e2e8f0); }
.avs-btn--ghost:hover { border-color: #cbd5e1; background: var(--bg-primary, #f8fafc); }

/* ── Empty state ── */
.avs-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 48px 20px; margin-top: 12px;
  border: 1px dashed var(--border, #e2e8f0); border-radius: 18px;
  background: var(--bg-primary, #f8fafc);
}
.avs-empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: #f0fdf4; color: #16a34a; margin-bottom: 4px;
}
.avs-empty__title { margin: 0; font-size: 1.1em; font-weight: 700; color: var(--text-primary, #0f172a); }
.avs-empty__body { margin: 0 0 8px; font-size: 0.9em; color: var(--text-secondary, #64748b); max-width: 420px; }

/* ── Pagination ── */
.avs-pager {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 22px; flex-wrap: wrap;
}
.avs-pager__btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0); background: var(--bg-secondary, #fff);
  color: var(--text-primary, #0f172a); font-size: 0.85em; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.avs-pager__btn:hover:not(:disabled) { border-color: #86efac; background: var(--bg-primary, #f8fafc); }
.avs-pager__btn:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }
.avs-pager__btn:disabled { opacity: .45; cursor: default; }
.avs-pager__pages { display: inline-flex; align-items: center; gap: 4px; }
.avs-pager__num {
  min-width: 36px; height: 36px; padding: 0 8px; border-radius: 9px;
  border: 1px solid var(--border, #e2e8f0); background: var(--bg-secondary, #fff);
  color: var(--text-secondary, #475569); font-size: 0.85em; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.avs-pager__num:hover { border-color: #86efac; }
.avs-pager__num:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }
.avs-pager__num.is-current {
  background: #16a34a; border-color: #16a34a; color: #fff; cursor: default;
  box-shadow: 0 3px 10px rgba(22, 163, 74, .25);
}
.avs-pager__gap { padding: 0 4px; color: var(--text-secondary, #94a3b8); }
.avs-pager__compact { display: none; font-size: 0.85em; font-weight: 600; color: var(--text-secondary, #475569); }
@media (max-width: 520px) {
  .avs-pager__pages { display: none; }
  .avs-pager__compact { display: inline; }
  .avs-pager__btn-label { display: none; }
}

/* ── Live-map modal ── */
.avs-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  animation: avsFade .18s ease;
}
.avs-modal__panel {
  position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
  border-radius: 18px; background: var(--bg-secondary, #fff);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
  animation: avsPop .2s ease;
}
.avs-modal__panel .avs-map { border: 0; border-radius: 18px; }
.avs-modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #e2e8f0); background: var(--bg-secondary, #fff);
  color: var(--text-secondary, #475569); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.avs-modal__close:hover { background: var(--bg-primary, #f1f5f9); color: var(--text-primary, #0f172a); }
.avs-modal__close:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }
@keyframes avsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes avsPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── Skeleton cards ── */
.avs-scard--skeleton { pointer-events: none; }
.avs-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%); background-size: 400% 100%; animation: avsShimmer 1.3s ease infinite; }
.avs-skel--avatar { width: 56px; height: 56px; border-radius: 50%; }
.avs-skel--pill { width: 74px; height: 22px; border-radius: 999px; }
.avs-skel--name { width: 70%; height: 15px; margin-top: 4px; }
.avs-skel--line { width: 90%; height: 11px; }
.avs-skel--short { width: 55%; }
.avs-skel--btn { flex: 1; height: 34px; border-radius: 10px; }
@keyframes avsShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .avs-skel, .avs-refresh.is-loading .avs-refresh__icon, .avs-refresh__icon.is-loading,
  .avs-modal, .avs-modal__panel { animation: none; }
}
.avs-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72em; font-weight: 700; line-height: 1; white-space: nowrap; flex-shrink: 0;
  padding: 5px 10px; border-radius: 999px;
  background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
}
.avs-status--available { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.avs-status--busy { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.avs-status--away { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.avs-status--offline { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; }
.avs-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #cbd5e1; }
.avs-dot--available { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: avsPulse 2s infinite; }
.avs-dot--busy { background: #f59e0b; }
.avs-dot--away { background: #94a3b8; }
@keyframes avsPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.avs-detail { position: sticky; top: 84px; align-self: start; }
@media (max-width: 860px) { .avs-detail { position: static; } }
.avs-map {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 16px;
  background: var(--bg-secondary, #fff);
}
.avs-map--placeholder { display: flex; align-items: center; justify-content: center; min-height: 240px; }
.avs-map__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.avs-map__title { margin: 0; font-size: 1.05em; display: inline-flex; align-items: center; gap: 8px; }
.avs-map__badge {
  font-size: 0.72em; font-weight: 700; color: #166534; background: #f0fdf4;
  border: 1px solid #bbf7d0; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.avs-map__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--border, #e2e8f0); background: #eef2f7;
}
.avs-map__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.avs-map__meta { margin: 12px 0 0; font-size: 0.85em; color: var(--text-secondary, #475569); }
.avs-map__meta--locked { color: #64748b; }
.avs-map__loading { display: flex; align-items: center; gap: 10px; color: var(--text-secondary, #475569); padding: 28px 0; justify-content: center; }
.avs-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #cbd5e1; border-top-color: #16a34a; display: inline-block;
  animation: avsSpin .7s linear infinite;
}
@keyframes avsSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .avs-dot--available { animation: none; }
  .avs-spinner { animation-duration: 1.6s; }
}

/* ── Buyer-facing availability badge (Available Now / Busy / Away) ── */
.market-availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.market-availability-badge--md { font-size: 0.72rem; }
.market-availability-badge--sm { font-size: 0.66rem; padding: 2px 7px; }
.market-availability-badge--clickable {
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.market-availability-badge--clickable:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 3px 10px rgba(34, 197, 94, 0.25); }
.market-availability-badge--clickable:active { transform: translateY(0); }
.market-availability-badge--clickable:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .market-availability-badge--clickable { transition: none; }
  .market-availability-badge--clickable:hover { transform: none; }
}
.market-availability-badge--busy { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.market-availability-badge--away { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.market-availability-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.market-availability-badge--available .market-availability-badge__dot {
  animation: market-avail-pulse 1.8s ease-in-out infinite;
}
@keyframes market-avail-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
  50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

/* ── "Available Now" search filter chip ── */
.search-filters__row--availability {
  display: flex;
  align-items: center;
}
.search-avail-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.search-avail-chip:hover { border-color: #86efac; color: #166534; }
.search-avail-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}
.search-avail-chip__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
  flex: 0 0 auto;
  transition: background 0.15s ease;
}
.search-avail-chip--active {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #166534;
}
.search-avail-chip--active .search-avail-chip__dot {
  background: #22c55e;
  animation: market-avail-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .market-availability-badge--available .market-availability-badge__dot,
  .search-avail-chip--active .search-avail-chip__dot { animation: none; }
  .search-avail-chip { transition: none; }
}

/* Portfolio grid */
/* Portfolio panel — redesigned */
.pf-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pf-panel__header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-panel__count {
  background: #e0e7ff;
  color: #4338ca;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.pf-panel__toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--indigo-light);
  background: #fff;
  color: var(--indigo-light);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 42px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pf-panel__toggle-btn:hover {
  background: var(--indigo-light);
  color: #fff;
}

/* Portfolio add form */
.pf-form {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
}
.pf-form__image-area {
  flex: 0 0 180px;
  height: 160px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
  background: #fff;
}
.pf-form__image-area:hover {
  border-color: var(--indigo-light);
}
.pf-form__image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf-form__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 0.8rem;
}
.pf-form__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pf-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-form__field--half {
  flex: 1 1 0;
  min-width: 0;
}
.pf-form__row {
  display: flex;
  gap: 10px;
}
.pf-form__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.02em;
}
.pf-form__req {
  color: #ef4444;
}
.pf-form__input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.875rem;
  background: #fff;
  color: #0f172a;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.pf-form__input:focus {
  outline: none;
  border-color: var(--indigo-light);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.pf-form__input--textarea {
  resize: vertical;
  min-height: 56px;
}
.pf-form__input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}
.pf-form__error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 8px;
}
.pf-form__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
}
.pf-form__cancel-btn {
  padding: 9px 20px;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 42px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pf-form__cancel-btn:hover {
  background: #f8fafc;
}
.pf-form__cancel-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.pf-form__save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 22px;
  border: none;
  border-radius: 999px;
  background: var(--indigo-light);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 42px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pf-form__save-btn:hover {
  background: var(--indigo);
}
.pf-form__save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Portfolio empty state */
.pf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  text-align: center;
}
.pf-empty__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #334155;
  margin: 12px 0 4px;
}
.pf-empty__desc {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0 0 16px;
}
.pf-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border: 2px dashed var(--indigo-light);
  border-radius: 999px;
  background: #f5f3ff;
  color: var(--indigo-light);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.pf-empty__btn:hover {
  background: var(--indigo-light);
  color: #fff;
  border-style: solid;
}

/* Portfolio item cards */
.seller-page__portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.pf-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.2s, transform 0.2s;
}
.pf-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.pf-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}
.pf-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf-card__no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-card__tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(99, 102, 241, 0.9);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pf-card__body {
  padding: 12px 14px;
}
.pf-card__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-card__desc {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--indigo-light);
  text-decoration: none;
}
.pf-card__link:hover {
  text-decoration: underline;
}
.pf-card__delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: auto;
  transition: color 0.15s, background 0.15s;
}
.pf-card__delete:hover {
  color: #dc2626;
  background: #fef2f2;
}

/* Trust score */
.seller-page__trust-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.seller-page__trust-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  flex-shrink: 0;
}

.seller-page__trust-meta {
  flex: 1;
  min-width: 0;
}

.seller-page__trust-label {
  font-size: 0.78rem;
  color: #64748b;
  margin: 4px 0 0;
  text-align: center;
}

.seller-page__kyc-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 700;
}

.seller-page__trust-info {
  font-size: 0.8rem;
  color: #64748b;
  margin: 8px 0 0;
  line-height: 1.5;
}

.seller-page__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.seller-page__badge-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #f8fafc;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
}

.seller-page__badge-icon {
  font-size: 1rem;
}

/* Gigs list */
/* ---- Gigs page: header banner (matches gigs_page_design.jpg) ---- */
.seller-page__gigs-banner {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(196,181,253,0.28) 0%, rgba(196,181,253,0) 55%),
    linear-gradient(135deg, #faf8ff 0%, #f3f0ff 100%);
  border-color: #e9e3ff;
}

.seller-page__banner-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
}

.seller-page__banner-main {
  min-width: 0;
  flex: 1 1 auto;
}

.seller-page__banner-sub {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 0.95rem;
  max-width: 46ch;
}

.seller-page__banner-empty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  color: #6d5bd0;
  font-weight: 600;
  font-size: 0.95rem;
}
.seller-page__banner-empty svg {
  color: #8b5cf6;
  flex: none;
}

.seller-page__banner-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  flex: none;
}

.seller-page__banner-art {
  width: 168px;
  max-width: 40vw;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

.seller-page__btn-plus {
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1;
}

@media (max-width: 720px) {
  .seller-page__banner-inner {
    flex-direction: column;
    padding: 20px;
  }
  .seller-page__banner-side {
    align-items: flex-start;
    width: 100%;
  }
  .seller-page__banner-art {
    align-self: center;
    width: 140px;
  }
  .seller-page__header-actions {
    width: 100%;
  }
}

/* ---- Gigs page: response metrics section ---- */
.gig-metrics {
  padding: 22px 24px;
}

.gig-metrics__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.gig-metrics__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
}

.gig-metrics__sub {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.9rem;
}

.gig-metrics__head-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gig-metrics__period {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: not-allowed;
}
.gig-metrics__period svg { color: #94a3b8; }

.gig-metrics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 880px) {
  .gig-metrics__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gig-metrics__grid { grid-template-columns: 1fr; }
}

.gig-metric {
  background: #fbfaff;
  border: 1px solid #eceaf6;
  border-radius: 12px;
  padding: 16px 18px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.gig-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(124,58,237,0.10);
  border-color: #ddd6fe;
}

.gig-metric__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gig-metric__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.gig-metric__icon svg { width: 22px; height: 22px; }
.gig-metric__icon--violet { background: #ede9fe; color: var(--accent); }
.gig-metric__icon--emerald { background: #d1fae5; color: #059669; }
.gig-metric__icon--blue { background: #dbeafe; color: var(--primary); }
.gig-metric__icon--amber { background: #fef3c7; color: #d97706; }
.gig-metric__icon--rose { background: #ffe4e6; color: #e11d48; }

.gig-metric__ring { flex: none; }
.gig-metric__ring-text {
  font-size: 13px;
  font-weight: 800;
  fill: #4c1d95;
}

.gig-metric__label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.gig-metric__value {
  margin: 2px 0 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.1;
}
.gig-metric__value--emerald { color: #059669; font-size: 1.25rem; }
.gig-metric__value--rose { color: #e11d48; font-size: 1.25rem; }

.gig-metric__desc {
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.35;
}

.gig-metrics__tip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f5f3ff;
  border: 1px solid #e9e3ff;
}
.gig-metrics__tip-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
}
.gig-metrics__tip-icon svg { width: 17px; height: 17px; }
.gig-metrics__tip-text {
  margin: 0;
  flex: 1 1 auto;
  color: #5b4b8a;
  font-size: 0.88rem;
  font-weight: 500;
}
.gig-metrics__tip-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #8b7fb5;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.gig-metrics__tip-close:hover { background: #ece7fb; color: #5b4b8a; }
.gig-metrics__tip-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .gig-metric,
  .gig-metrics__tip-close { transition: none; }
  .gig-metric:hover { transform: none; }
}

.seller-page__gigs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 20px 24px;
}

.seller-page__gig-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.seller-page__gig-thumb-wrap {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: #f1f5f9;
}

.seller-page__gig-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.seller-page__gig-status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.92);
  color: #475569;
  border: 1px solid #e2e8f0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.seller-page__gig-status-badge[data-status="active"],
.seller-page__gig-status-badge[data-status="approved"] {
  background: rgba(34,197,94,0.9);
  color: #fff;
  border-color: transparent;
}
.seller-page__gig-status-badge[data-status="draft"] {
  background: rgba(100,116,139,0.88);
  color: #fff;
  border-color: transparent;
}
.seller-page__gig-status-badge[data-status="pending"],
.seller-page__gig-status-badge[data-status="pending_review"] {
  background: rgba(245,158,11,0.9);
  color: #fff;
  border-color: transparent;
}
.seller-page__gig-status-badge[data-status="rejected"],
.seller-page__gig-status-badge[data-status="suspended"] {
  background: rgba(239,68,68,0.9);
  color: #fff;
  border-color: transparent;
}

/* AI Verification Badge (clickable button) */
.seller-page__gig-verification-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  border: none;
  outline: none;
  font-family: inherit;
  z-index: 2;
  transition: transform 0.15s, box-shadow 0.15s;
}
.seller-page__gig-verification-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.seller-page__gig-verification-badge[data-verification="verified"] {
  background: rgba(16,185,129,0.9);
  color: #fff;
  border: 1px solid transparent;
}
.seller-page__gig-verification-badge[data-verification="manual_review"] {
  background: rgba(245,158,11,0.9);
  color: #fff;
  border: 1px solid transparent;
}
.seller-page__gig-verification-badge[data-verification="pending"] {
  background: rgba(107,114,128,0.85);
  color: #fff;
  border: 1px solid transparent;
}
.seller-page__gig-verification-badge[data-verification="rejected"] {
  background: rgba(239,68,68,0.9);
  color: #fff;
  border: 1px solid transparent;
}

/* ── AI Verification Results Panel ── */
.gig-verification-panel {
  border-radius: var(--radius, 8px);
  padding: 16px;
  margin-top: 8px;
}
.gig-verification-panel--verified {
  background: #ecfdf5;
  border: 1px solid #10b981;
}
.gig-verification-panel--manual_review {
  background: #fffbeb;
  border: 1px solid #f59e0b;
}
.gig-verification-panel--rejected {
  background: #fef2f2;
  border: 1px solid #ef4444;
}
.gig-verification-panel--pending {
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
}
.gig-verification-panel--modal {
  margin-top: 0;
  border: none;
  padding: 12px 0;
}
.gig-verification-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.gig-verification-panel__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #1e293b);
}
.gig-verification-panel__score {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  background: rgba(0,0,0,0.05);
  padding: 3px 10px;
  border-radius: 12px;
}
.gig-verification-panel__status-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gig-verification-panel__status-tag--verified { background: #10b981; color: #fff; }
.gig-verification-panel__status-tag--manual_review { background: #f59e0b; color: #fff; }
.gig-verification-panel__status-tag--rejected { background: #ef4444; color: #fff; }
.gig-verification-panel__status-tag--pending { background: #6b7280; color: #fff; }

.gig-verification-panel__checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gig-verification-check {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.gig-verification-check--passed {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.2);
}
.gig-verification-check--failed {
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.2);
}
.gig-verification-check__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gig-verification-check__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.gig-verification-check--passed .gig-verification-check__icon {
  background: #10b981;
  color: #fff;
}
.gig-verification-check--failed .gig-verification-check__icon {
  background: #ef4444;
  color: #fff;
}
.gig-verification-check__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  flex: 1;
}
.gig-verification-check__score {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  min-width: 36px;
  text-align: right;
}
.gig-verification-check__reasons {
  margin: 6px 0 0 28px;
  padding: 0;
  list-style: disc;
  font-size: 0.78rem;
  color: #b91c1c;
  line-height: 1.5;
}
.gig-verification-check__reasons li {
  margin-bottom: 2px;
}
.gig-verification-panel__summary {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.5;
  background: rgba(239,68,68,0.06);
  color: #b91c1c;
  border: 1px solid rgba(239,68,68,0.15);
}
.gig-verification-panel__summary--success {
  background: rgba(16,185,129,0.08);
  color: #065f46;
  border-color: rgba(16,185,129,0.2);
}
.gig-verification-panel__admin-notes {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  color: var(--text-primary, #1e293b);
}
.gig-verification-panel__timestamp {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-secondary, #94a3b8);
}

/* Wide modal variant */
.market-modal--wide {
  max-width: 560px;
}
.market-modal__subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
  margin: -4px 0 12px;
  font-weight: 500;
}

/* ── AI Gig Verification popup (gig creation flow) ── */
.gig-verify-modal {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 720px);
}
.gig-verify-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -4px;
  padding: 0 4px;
}
.gig-verify-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.gig-verify-modal__head .market-modal__title {
  margin: 0;
}
.gig-verify-modal__close {
  appearance: none;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-secondary, #64748b);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.gig-verify-modal__close:hover:not(:disabled) {
  background: var(--border, #e2e8f0);
  color: var(--text-primary, #0f172a);
}
.gig-verify-modal__close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.gig-verify-modal__close:focus-visible {
  outline: 2px solid var(--accent, var(--indigo-light));
  outline-offset: 2px;
}
.gig-verify-modal__images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.gig-verify-modal__thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-secondary, #f1f5f9);
}
.market-input__hint {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  margin-top: 4px;
  font-weight: 500;
}
.gig-verify-modal__running {
  padding: 4px 0 4px;
}
.gig-verify-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.gig-verify-progress__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
}
.gig-verify-progress__spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(99, 102, 241, 0.25);
  border-top-color: var(--indigo-light);
  animation: gigVerifySpin 0.7s linear infinite;
}
.gig-verify-progress__label {
  flex: 1;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}
.gig-verify-progress__state {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--indigo-light);
}
.gig-verify-modal__actions {
  margin-top: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border, #e2e8f0);
}
@keyframes gigVerifySpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gig-verify-progress__spinner { animation: none; }
}

/* Delete icon button on gig card */
.seller-page__gig-delete-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239,68,68,0.85);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, transform 0.15s;
  z-index: 3;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.seller-page__gig-thumb-wrap:hover .seller-page__gig-delete-icon,
.seller-page__gig-delete-icon:focus-visible {
  opacity: 1;
}
.seller-page__gig-delete-icon:hover {
  background: rgba(220,38,38,1);
  transform: scale(1.1);
}
.seller-page__gig-delete-icon:active {
  transform: scale(0.95);
}
/* On touch devices, always show delete icon (no hover) */
@media (hover: none) {
  .seller-page__gig-delete-icon {
    opacity: 1;
  }
}

.seller-page__gig-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seller-page__gig-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.seller-page__gig-desc {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.seller-page__gig-meta {
  font-size: 0.74rem;
  color: #94a3b8;
  margin: 4px 0 0;
  font-weight: 500;
}

.seller-page__gig-actions {
  display: flex;
  gap: 6px;
  padding: 10px 16px 14px;
  margin-top: auto;
}

/* Danger button */
.market-button--danger {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
}
.market-button--danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}
.market-button--danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Confirmation modal */
.market-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.15s ease;
}
.market-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.2s ease;
}
.market-modal__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 8px;
}
.market-modal__body {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.5;
  margin: 0 0 20px;
}
.market-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Gig Editor */
.seller-page__editor-hint {
  font-size: 0.84rem;
  color: #64748b;
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 14px;
  border-left: 3px solid var(--indigo-light);
  margin: 0 0 16px;
  line-height: 1.5;
}

.seller-page__editor-warn {
  font-size: 0.84rem;
  color: #92400e;
  background: #fffbeb;
  border-radius: 8px;
  padding: 10px 14px;
  border-left: 3px solid #f59e0b;
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ─── Gig Editor — KYC Warning Banner ─── */
.gig-editor__kyc-wrap {
  margin-bottom: 4px;
}
.gig-editor__kyc-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
}
.gig-editor__kyc-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.gig-editor__kyc-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: #92400e;
  margin: 0 0 4px;
}
.gig-editor__kyc-body {
  font-size: 0.82rem;
  color: #78350f;
  margin: 0 0 10px;
  line-height: 1.45;
}
.gig-editor__kyc-btn {
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════ */
/*  Gig Editor v2 — Create / Edit gig redesign                         */
/* ══════════════════════════════════════════════════════════════════ */
.gig-editor-v2 {
  --ge-accent: var(--accent);
  --ge-accent-soft: #f4f1fe;
  --ge-border: #eceaf6;
  --ge-ok: #16a34a;
  display: block;
}

/* Top bar */
.gig-editor-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 2px;
  color: var(--ge-accent);
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  border-radius: 8px;
  transition: opacity 160ms ease;
}
.gig-editor-back:hover { opacity: 0.75; }
.gig-editor-back:focus-visible { outline: 2px solid var(--ge-accent); outline-offset: 2px; }

.gig-editor-topbar { margin-bottom: 18px; }
.gig-editor-topbar__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.gig-editor-topbar__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.gig-editor-topbar__sub {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 0.9rem;
  max-width: 560px;
}
.gig-editor-topbar__actions { display: flex; gap: 10px; flex-shrink: 0; }
.gig-editor-btn { display: inline-flex; align-items: center; gap: 7px; }

/* Step tracker */
.gig-editor-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--ge-border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  overflow-x: auto;
}
.gig-editor-step {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 1 1 0;
  min-width: max-content;
}
.gig-editor-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 180ms ease, color 180ms ease;
}
.gig-editor-step__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  transition: color 180ms ease;
}
.gig-editor-step__line {
  flex: 1 1 24px;
  height: 2px;
  min-width: 20px;
  background: #e2e8f0;
  border-radius: 2px;
  margin: 0 4px;
}
.gig-editor-step.is-active .gig-editor-step__num {
  background: var(--ge-accent);
  color: #fff;
}
.gig-editor-step.is-active .gig-editor-step__label { color: #0f172a; }
.gig-editor-step.is-done .gig-editor-step__num {
  background: var(--ge-ok);
  color: #fff;
}
.gig-editor-step.is-done .gig-editor-step__label { color: #334155; }

/* Two-column layout */
.gig-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.gig-editor-main { min-width: 0; }
.gig-editor-form { display: block; }

/* Section cards */
.gig-card {
  background: #fff;
  border: 1px solid var(--ge-border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.gig-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.gig-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ge-accent-soft);
  color: var(--ge-accent);
  font-size: 0.82rem;
  font-weight: 800;
  flex-shrink: 0;
}
.gig-card__num.is-done { background: #dcfce7; color: var(--ge-ok); }
.gig-card__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
}
.gig-card--flow > .market-label,
.gig-card--flow > .market-grid { margin-top: 4px; }

/* Publish note banner */
.gig-editor-publishbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ge-accent-soft);
  border: 1px solid #e6def9;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.gig-editor-publishbar__icon { color: var(--ge-accent); display: inline-flex; flex-shrink: 0; }
.gig-editor-publishbar p { margin: 0; font-size: 0.86rem; color: #4c1d95; }

/* Bottom action bar */
.gig-editor-actionbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 4px;
}
.gig-editor-actionbar__primary { margin-left: auto; }

/* Preview column */
.gig-editor-preview__sticky { position: sticky; top: 16px; display: grid; gap: 16px; }
.gig-preview-card {
  background: #fff;
  border: 1px solid var(--ge-border);
  border-radius: 14px;
  overflow: hidden;
}
.gig-preview-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}
.gig-preview-card__heading { margin: 0; font-size: 0.98rem; font-weight: 700; color: #0f172a; }
.gig-preview-card__badge {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}
.gig-preview-card__cover {
  aspect-ratio: 16 / 10;
  background: #f8fafc;
  margin: 0 16px;
  border-radius: 10px;
  overflow: hidden;
}
.gig-preview-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-preview-card__cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 0.78rem;
}
.gig-preview-card__body { padding: 14px 16px 4px; }
.gig-preview-card__title { margin: 0; font-size: 0.98rem; font-weight: 700; color: #0f172a; line-height: 1.3; }
.gig-preview-card__crumb { margin: 6px 0 0; font-size: 0.74rem; color: var(--ge-accent); font-weight: 600; }
.gig-preview-card__desc { margin: 8px 0 0; font-size: 0.8rem; color: #475569; line-height: 1.5; }
.gig-preview-card__desc--muted { color: #cbd5e1; }
.gig-preview-card__price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.gig-preview-card__price { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.gig-preview-card__model { font-size: 0.74rem; color: #64748b; font-weight: 600; }
.gig-preview-card__facts {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #f1f5f9;
  display: grid;
  gap: 9px;
}
.gig-preview-card__facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #475569;
}
.gig-preview-card__fact-icon { color: #94a3b8; display: inline-flex; flex-shrink: 0; }
.gig-preview-card__note {
  margin: 12px 0 0;
  padding: 11px 16px;
  background: var(--ge-accent-soft);
  font-size: 0.76rem;
  color: #6d28d9;
  font-weight: 600;
}

/* Checklist */
.gig-checklist {
  background: #fff;
  border: 1px solid var(--ge-border);
  border-radius: 14px;
  padding: 16px 18px;
}
.gig-checklist__title { margin: 0 0 12px; font-size: 0.9rem; font-weight: 700; color: #0f172a; }
.gig-checklist__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gig-checklist__item { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: #64748b; }
.gig-checklist__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #cbd5e1;
  flex-shrink: 0;
  transition: background 180ms ease, color 180ms ease;
}
.gig-checklist__item.is-ok { color: #0f172a; }
.gig-checklist__item.is-ok .gig-checklist__tick { background: #dcfce7; color: var(--ge-ok); }

@media (max-width: 960px) {
  .gig-editor-layout { grid-template-columns: 1fr; }
  .gig-editor-preview__sticky { position: static; }
  .gig-editor-topbar__actions { width: 100%; }
  .gig-editor-topbar__actions .gig-editor-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 560px) {
  .gig-editor-topbar__title { font-size: 1.35rem; }
  .gig-editor-actionbar { flex-wrap: wrap; }
  .gig-editor-actionbar__primary { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gig-editor-back,
  .gig-editor-step__num,
  .gig-editor-step__label,
  .gig-checklist__tick { transition: none; }
}

/* ─── Gig Editor — Mobile base for desktop-only marketplace classes ─── */
.market-file-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 20px;
}
.market-media-manage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.market-media-manage__item {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(191, 219, 254, 0.62);
  background: rgba(255, 255, 255, 0.76);
  position: relative;
}
.market-media-manage__item--featured {
  border-color: var(--primary, var(--primary-bright));
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  background: rgba(239, 246, 255, 0.8);
}
.market-media-manage__image {
  max-width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(191, 219, 254, 0.72);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: opacity 0.15s;
}
.market-featured-check {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  user-select: none;
  -webkit-user-select: none;
}
.market-featured-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary, var(--primary-bright));
  cursor: pointer;
  margin: 0;
}
.market-media-manage__item--featured .market-featured-check {
  color: var(--primary, var(--primary-bright));
  font-weight: 600;
}
.market-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.market-input-group .market-input {
  flex: 1;
  min-width: 0;
}
.market-input-group__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-strong, rgba(59, 130, 246, 0.18));
  background: var(--primary-soft, rgba(37, 99, 235, 0.12));
  color: var(--primary, var(--primary));
  cursor: pointer;
  transition: background 0.15s ease;
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.market-input-group__spinner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--primary, var(--primary));
}
.market-help--detected {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--success-text, #166534);
  font-weight: 600;
}
.market-suggest-category {
  margin: 0.75rem 0 0.5rem;
}
.market-suggest-category__form {
  margin-top: 0.5rem;
  padding: 12px 14px;
  border: 1px dashed var(--market-border, #cbd5e1);
  border-radius: 8px;
  background: var(--market-surface-muted, #f8fafc);
}

/* Suggest category — numbered step sections */
.suggest-step {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  margin: 10px 0 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  position: relative;
  transition: opacity 0.25s ease;
}
.suggest-step + .suggest-step {
  margin-top: 8px;
}
/* Vertical connector line between steps */
.suggest-step + .suggest-step::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 29px;
  width: 2px;
  height: 9px;
  background: #cbd5e1;
}
.suggest-step__badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--accent) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.suggest-step__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.suggest-step__dep {
  margin: 0;
  padding: 6px 10px;
  background: #f0f4ff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  color: var(--primary-bright);
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 500;
}
/* Hide dependency hint once the parent dropdown has a value */
.suggest-step__content .market-label + .market-label .suggest-step__dep {
  display: none;
}

@media (max-width: 600px) {
  .suggest-step {
    padding: 12px;
    gap: 10px;
    border-radius: 8px;
  }
  .suggest-step__badge {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
  }
  .suggest-step + .suggest-step::before {
    left: 23px;
  }
  .suggest-step__dep {
    font-size: 0.72rem;
    padding: 5px 8px;
  }
  .suggest-step__content .market-label {
    font-size: 0.82rem;
  }
}

.market-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--market-primary, var(--indigo));
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}
.market-link:hover {
  text-decoration: underline;
}
.market-link--sm {
  font-size: 0.82rem;
}
.market-meta {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* Auto-save indicator */
.gig-editor__autosave-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

/* Gig image upload area (Tap to add image) */
.gig-img-upload-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 16px;
}
.gig-img-upload-area:hover {
  border-color: var(--indigo-light);
  background: #faf5ff;
}
.gig-img-upload-area--busy {
  pointer-events: none;
  opacity: 0.7;
  border-color: var(--indigo-light);
  background: #faf5ff;
}
.market-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--indigo-light);
  border-radius: 50%;
  animation: spinMarket 0.6s linear infinite;
}
@keyframes spinMarket {
  to { transform: rotate(360deg); }
}
.gig-img-upload-area--full {
  cursor: default;
  background: #f8fafc;
  border-color: #e2e8f0;
  min-height: 48px;
}
.gig-img-upload-area--full:hover {
  border-color: #e2e8f0;
  background: #f8fafc;
}
.gig-img-upload-area__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 0.85rem;
  padding: 20px;
  text-align: center;
}
.gig-img-upload-area__count {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
}

/* Follower panel */
.seller-page__followers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100%;
}

.seller-page__follower-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--indigo-light);
  color: #fff;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 800;
  margin-left: 8px;
}

.seller-page__follower-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.seller-page__follower-row:last-child {
  border-bottom: none;
}

.seller-page__follower-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8ecf1;
  flex-shrink: 0;
}

.seller-page__follower-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
}

.seller-page__follower-type {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 500;
}

.seller-page__follower-date {
  font-size: 0.74rem;
  color: #94a3b8;
}

/* ============================================================
   SELLER PROFILE — Desktop polish
   ============================================================ */

/* Fill the shared content column (.market-shell / --shell-width) so page
   content aligns with the header edges. The old 820px cap centered every
   `.seller-page` into a narrow column that didn't match the header. */
.seller-page {
  width: 100%;                      /* fill grid cell — prevents CLS from auto-sizing */
  max-width: none;
  margin: 0 auto;
}

/* ============================================================
   SELLER PROFILE — Tablet (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .seller-page {
    max-width: 100%;
    gap: 10px;
  }
  .seller-page__card {
    border-radius: 10px;
  }
  .seller-page__card-header {
    padding: 16px 18px;
  }
  .seller-page__card-body {
    padding: 16px 18px;
  }
  .seller-page__title {
    font-size: 1.2rem;
  }
  .seller-page__avatar-img {
    width: 72px;
    height: 72px;
  }
  .seller-page__avatar-section {
    padding: 16px 18px;
  }
  .seller-page__progress {
    margin: 0 18px 12px;
  }
  .seller-page__trust-circle {
    width: 64px;
    height: 64px;
    font-size: 1.25rem;
  }
  .seller-page__portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  .pf-form {
    flex-direction: column;
    padding: 14px 16px;
  }
  .pf-form__image-area {
    flex: none;
    height: 140px;
    width: 100%;
  }
  .pf-form__row {
    flex-direction: column;
    gap: 10px;
  }
  .seller-page__gigs-grid {
    grid-template-columns: 1fr;
    padding: 16px 18px;
  }
}

/* ============================================================
   SELLER PROFILE — Mobile (max-width: 600px)
   ============================================================ */
@media (max-width: 600px) {
  .seller-page {
    gap: 6px;
  }

  /* Full-width cards — app-style flat sections */
  .seller-page__card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
    border-color: #f1f5f9;
  }

  /* Header compact */
  .seller-page__card-header {
    padding: 14px 16px;
    gap: 8px;
  }
  .seller-page__eyebrow {
    font-size: 0.65rem;
    margin-bottom: 2px;
  }
  .seller-page__title {
    font-size: 1.1rem;
  }
  .seller-page__section-title {
    font-size: 0.9rem;
  }

  /* Card body compact */
  .seller-page__card-body {
    padding: 14px 16px;
  }

  /* Avatar section — centered column on mobile */
  .seller-page__avatar-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    gap: 12px;
  }
  .seller-page__avatar-img {
    width: 80px;
    height: 80px;
    border-width: 2px;
  }
  .seller-page__avatar-name {
    font-size: 1rem;
  }
  .seller-page__avatar-hint {
    font-size: 0.72rem;
    margin-bottom: 8px;
  }

  /* Progress bar compact */
  .seller-page__progress {
    margin: 0 16px 12px;
    padding: 12px 14px;
    border-radius: 8px;
  }
  .seller-page__progress-label {
    font-size: 0.78rem;
  }
  .seller-page__progress-track {
    height: 6px;
  }
  .seller-page__progress-remaining {
    font-size: 0.7rem;
  }

  /* Availability buttons — full-width */
  .seller-page__availability {
    gap: 6px;
  }
  .seller-page__availability .market-button {
    flex: 1 1 0;
    justify-content: center;
    font-size: 0.8rem;
    padding: 10px 8px;
    min-height: 42px;
  }

  /* Portfolio grid */
  .seller-page__portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .pf-card {
    border-radius: 8px;
  }
  .pf-card__body {
    padding: 8px 10px;
  }
  .pf-card__title {
    font-size: 0.8rem;
  }
  .pf-card__desc {
    display: none;
  }
  .pf-card__tag {
    font-size: 0.6rem;
    padding: 2px 7px;
  }
  .pf-card__footer {
    gap: 4px;
  }
  .pf-card__link, .pf-card__delete {
    font-size: 0.68rem;
    padding: 3px 6px;
  }
  .pf-panel__toggle-btn {
    padding: 7px 12px;
    font-size: 0.75rem;
  }
  .pf-form {
    flex-direction: column;
    padding: 12px 14px;
    gap: 10px;
  }
  .pf-form__image-area {
    flex: none;
    width: 100%;
    height: 130px;
  }
  .pf-form__row {
    flex-direction: column;
    gap: 8px;
  }
  .pf-form__input {
    padding: 10px 12px;
    font-size: 0.875rem;
    min-height: 42px;
  }
  .pf-form__actions {
    flex-direction: column-reverse;
  }
  .pf-form__cancel-btn,
  .pf-form__save-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .pf-empty {
    padding: 24px 16px;
  }
  .pf-empty__title {
    font-size: 0.88rem;
  }

  /* Trust score section */
  .seller-page__trust-row {
    gap: 14px;
  }
  .seller-page__trust-circle {
    width: 56px;
    height: 56px;
    font-size: 1.1rem;
    border-width: 3px !important;
  }
  .seller-page__trust-label {
    font-size: 0.7rem;
  }
  .seller-page__kyc-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
  }
  .seller-page__trust-info {
    font-size: 0.75rem;
  }

  /* Badges */
  .seller-page__badge-pill {
    padding: 4px 10px;
    font-size: 0.75rem;
    gap: 4px;
  }
  .seller-page__badge-icon {
    font-size: 0.88rem;
  }

  /* Header actions — stack on mobile */
  .seller-page__header-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }
  .seller-page__header-actions .market-button {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
    min-height: 42px;
    font-size: 0.82rem;
    padding: 10px 8px;
    border-radius: 10px;
  }

  /* Gig cards — vertical card with full image on mobile */
  .seller-page__gigs-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
  }
  .seller-page__gig-card {
    flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
  .seller-page__gig-thumb-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    border-radius: 12px 12px 0 0;
  }
  .seller-page__gig-thumb {
    border-radius: 12px 12px 0 0;
  }
  .seller-page__gig-status-badge {
    top: 8px;
    left: 8px;
    right: auto;
    padding: 4px 10px;
    font-size: 0.68rem;
    border-radius: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .seller-page__gig-status-badge[data-status="active"],
  .seller-page__gig-status-badge[data-status="approved"] {
    background: rgba(34,197,94,0.88);
    color: #fff;
    border-color: transparent;
  }
  .seller-page__gig-status-badge[data-status="draft"] {
    background: rgba(100,116,139,0.85);
    color: #fff;
    border-color: transparent;
  }
  .seller-page__gig-status-badge[data-status="pending"],
  .seller-page__gig-status-badge[data-status="pending_review"] {
    background: rgba(245,158,11,0.88);
    color: #fff;
    border-color: transparent;
  }
  .seller-page__gig-status-badge[data-status="rejected"],
  .seller-page__gig-status-badge[data-status="suspended"] {
    background: rgba(239,68,68,0.88);
    color: #fff;
    border-color: transparent;
  }
  .seller-page__gig-body {
    padding: 12px 14px;
    gap: 4px;
  }
  .seller-page__gig-title {
    font-size: 0.9rem;
  }
  .seller-page__gig-desc {
    font-size: 0.78rem;
    -webkit-line-clamp: 2;
  }
  .seller-page__gig-meta {
    font-size: 0.72rem;
  }
  /* Hide social bar on gigs list mobile — too much clutter */
  .seller-page__gig-body .sw-social-bar {
    display: none;
  }
  .seller-page__gig-actions {
    padding: 0 14px 12px;
    gap: 8px;
  }
  .seller-page__gig-actions .market-button {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
    min-height: 40px;
    font-size: 0.82rem;
    padding: 9px 10px;
    border-radius: 10px;
  }

  /* No tap highlight */
  .seller-page a, .seller-page button, .seller-page [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* Follower rows */
  .seller-page__follower-row {
    gap: 10px;
    padding: 8px 0;
  }
  .seller-page__follower-avatar {
    width: 32px;
    height: 32px;
  }
  .seller-page__follower-name {
    font-size: 0.82rem;
  }

  /* Editor hints */
  .seller-page__editor-hint,
  .seller-page__editor-warn {
    font-size: 0.78rem;
    padding: 8px 12px;
    margin-bottom: 12px;
  }

  /* Buttons */
  .seller-page .market-button {
    font-size: 0.82rem;
    padding: 10px 14px;
  }
  .seller-page .market-button--small {
    font-size: 0.75rem;
    padding: 6px 10px;
  }

  /* Remove tap highlight */
  .seller-page a,
  .seller-page button,
  .seller-page input,
  .seller-page select,
  .seller-page label,
  .seller-page [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* ─── Gig Editor — Mobile (600px) ─── */

  /* KYC banner — stack vertically on mobile */
  .gig-editor__kyc-banner {
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 8px;
  }
  .gig-editor__kyc-icon {
    font-size: 1.3rem;
  }
  .gig-editor__kyc-title {
    font-size: 0.84rem;
  }
  .gig-editor__kyc-body {
    font-size: 0.78rem;
  }
  .gig-editor__kyc-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Category grid — 1 column on mobile */
  .seller-page .market-grid--3,
  .seller-page .market-grid--2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Suggest category — prominent bordered section on mobile */
  .seller-page .market-suggest-category {
    margin: 16px 0 12px;
    background: #fffbeb;
    border: 2px solid #fbbf24;
    border-radius: 12px;
    padding: 14px;
  }
  .seller-page .market-suggest-category .market-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: #92400e;
  }
  .seller-page .market-suggest-category__form {
    margin-top: 12px;
    padding: 14px 12px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fff;
  }
  .seller-page .market-suggest-category__form .market-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: #78350f;
    margin-bottom: 10px;
  }
  .seller-page .market-suggest-category__form .market-input {
    border-color: #fde68a;
    background: #fffef5;
  }
  .seller-page .market-suggest-category__form .market-input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245,158,11,0.15);
  }
  .seller-page .market-suggest-category__form .market-grid {
    grid-template-columns: 1fr;
  }
  .seller-page .market-suggest-category__form .market-muted {
    font-size: 0.8rem;
    color: #92400e;
    background: #fef3c7;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 12px;
  }
  .seller-page .market-suggest-category__form .market-actions {
    margin-top: 12px;
  }
  .seller-page .market-suggest-category__form .market-button {
    background: #f59e0b;
    color: #fff;
    border: none;
    width: 100%;
  }

  /* Media gallery — 2 columns on mobile */
  .seller-page .market-media-manage {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .seller-page .market-media-manage__item {
    padding: 8px;
    border-radius: 8px;
  }
  .seller-page .market-media-manage__image {
    max-height: 140px;
    border-radius: 6px;
  }
  .market-featured-check {
    font-size: 0.72rem;
    gap: 4px;
  }
  .market-featured-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  /* Gig image upload area — mobile */
  .gig-img-upload-area {
    min-height: 110px;
    border-radius: 10px;
    margin-bottom: 12px;
  }
  .gig-img-upload-area__placeholder {
    gap: 6px;
    font-size: 0.8rem;
    padding: 16px;
  }
  .gig-img-upload-area__placeholder svg {
    width: 28px;
    height: 28px;
  }

  /* File pick button — full width on mobile */
  .seller-page .market-file-pick-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    border-radius: 10px;
  }

  /* Pincode input group */
  .seller-page .market-input-group {
    gap: 8px;
  }
  .seller-page .market-input-group__btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  /* Form actions — stacked full-width */
  .seller-page .market-actions {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .seller-page .market-actions .market-button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    text-align: center;
    border-radius: 10px;
  }

  /* Help text compact */
  .seller-page .market-help {
    font-size: 0.72rem;
    line-height: 1.4;
  }
  .seller-page .market-muted {
    font-size: 0.78rem;
  }

  /* Auto-save indicator */
  .gig-editor__autosave-row {
    margin-bottom: 0.25rem;
  }
}

/* ============================================================
   SELLER PROFILE — Small mobile (max-width: 420px)
   ============================================================ */
@media (max-width: 420px) {
  .seller-page__card-header {
    padding: 12px 14px;
  }
  .seller-page__card-body {
    padding: 12px 14px;
  }
  .seller-page__title {
    font-size: 1rem;
  }
  .seller-page__eyebrow {
    font-size: 0.6rem;
  }
  .seller-page__avatar-img {
    width: 64px;
    height: 64px;
  }
  .seller-page__avatar-name {
    font-size: 0.88rem;
  }
  .seller-page__trust-circle {
    width: 48px;
    height: 48px;
    font-size: 0.95rem;
  }
  .seller-page__portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .pf-card__image-wrap {
    aspect-ratio: 1/1;
  }
  .pf-form__image-area {
    height: 110px;
  }
  .pf-form__label {
    font-size: 0.68rem;
  }
  .seller-page__gig-thumb-wrap {
    aspect-ratio: 16/9;
  }
  .seller-page__gig-card {
    border-radius: 10px;
  }
  .seller-page__gig-thumb-wrap,
  .seller-page__gig-thumb {
    border-radius: 10px 10px 0 0;
  }
  .seller-page__gig-title {
    font-size: 0.82rem;
  }
  .seller-page__gig-desc {
    display: none;
  }
  .seller-page__gig-body {
    padding: 10px 12px;
  }
  .seller-page__gig-actions {
    padding: 0 12px 10px;
    gap: 6px;
  }
  .seller-page__gig-actions .market-button {
    min-height: 36px;
    font-size: 0.78rem;
    padding: 7px 8px;
  }

  /* Gig Editor — small phone */
  .gig-editor__kyc-banner {
    padding: 10px 12px;
  }
  .gig-editor__kyc-title {
    font-size: 0.78rem;
  }
  .gig-editor__kyc-body {
    font-size: 0.72rem;
  }
  .seller-page .market-media-manage {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .seller-page .market-media-manage__item {
    padding: 6px;
  }
  .seller-page .market-media-manage__image {
    max-height: 110px;
  }
  .u-px-24 {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ============================================================
   RESPONSIVE — mobile adjustments
   ============================================================ */

@media (max-width: 640px) {
  .seller-dash__primary-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .seller-dash__secondary-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .seller-dash__row {
    grid-template-columns: 1fr;
  }

  .seller-dash__header {
    padding: 16px;
  }

  .seller-dash__title {
    font-size: 1.2rem;
  }

  .seller-page__card-header {
    padding: 16px 18px;
  }

  .seller-page__card-body {
    padding: 16px 18px;
  }

  .seller-page__gigs-grid {
    grid-template-columns: 1fr;
    padding: 16px 18px;
  }

  .seller-page__avatar-section {
    padding: 16px 18px;
  }
}

/* ============================================================
   SHARED PAGE PRIMITIVES — pg-*
   Used by JobPages, DisputeMessages, ReviewsPage, FollowersPage
   ============================================================ */

.pg-shell {
  background: #f8fafc;
  min-height: 60vh;
  padding: 24px 16px;
}

.pg-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.pg-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.pg-card__head-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pg-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--indigo-light);
}

.pg-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  margin: 4px 0 0;
  line-height: 1.2;
}

.pg-subtitle {
  font-size: 0.84rem;
  color: #64748b;
  margin: 4px 0 0;
}

.pg-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 20px 0 12px;
}

.pg-muted {
  color: #94a3b8;
  font-size: 0.88rem;
  padding: 24px 0;
  text-align: center;
}

.pg-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Buttons */
.pg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  font-family: inherit;
}

.pg-btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.pg-btn--sm {
  padding: 5px 11px;
  font-size: 0.78rem;
  border-radius: 6px;
}

.pg-btn--danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.pg-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Pagination */
.pg-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.pg-pagination__info {
  font-size: 0.84rem;
  color: #64748b;
}

/* Form elements */
.pg-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pg-form__autosave-row {
  display: flex;
  justify-content: flex-end;
}

.pg-form__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pg-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #374151;
}

.pg-input {
  padding: 9px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #0f172a;
  background: #fff;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.pg-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.pg-input--textarea {
  resize: vertical;
  min-height: 80px;
}

.pg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============================================================
   JOBS — jobs-*
   ============================================================ */

.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.jobs-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}

.jobs-card--highlight {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.jobs-card__row {
  display: flex;
  gap: 14px;
  padding: 16px;
  align-items: flex-start;
}

.jobs-card__thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f1f5f9;
}

.jobs-card__body {
  flex: 1;
  min-width: 0;
}

.jobs-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
}

.jobs-card__id {
  font-family: monospace;
  font-size: 0.7rem;
  color: #6b7280;
  cursor: pointer;
  margin: 0 0 6px;
  user-select: all;
}

.jobs-card__desc {
  font-size: 0.85rem;
  color: #475569;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jobs-card__meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.jobs-card__seller {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}

.jobs-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.71rem;
  font-weight: 700;
  background: #e5e7eb;
  color: #374151;
}

.jobs-badge--open,
.jobs-badge--active { background: #dbeafe; color: #1e40af; }
.jobs-badge--completed { background: #d1fae5; color: #065f46; }
.jobs-badge--cancelled { background: #fee2e2; color: #991b1b; }
.jobs-badge--pending { background: #fef3c7; color: #92400e; }
.jobs-badge--pay-paid { background: #d1fae5; color: #065f46; }
.jobs-badge--pay-unpaid { background: #fef3c7; color: #92400e; }
.jobs-badge--pay-pending { background: #ede9fe; color: var(--accent); }

.jobs-card__amount {
  font-size: 0.82rem;
  color: #374151;
  margin: 2px 0;
}

.jobs-card__date {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 2px 0;
}

.jobs-card__actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid #f1f5f9;
  flex-wrap: wrap;
}

.jobs-card__warning {
  font-size: 0.82rem;
  color: #dc2626;
  font-weight: 600;
  padding: 0 16px 10px;
  margin: 0;
}

/* Jobs detail expansion */
.jobs-detail {
  margin-top: 12px;
  padding: 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.jobs-detail__field {
  font-size: 0.86rem;
  color: #374151;
  margin: 0 0 8px;
}

.jobs-detail__section-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  margin: 12px 0 8px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.jobs-detail__approved {
  font-size: 0.84rem;
  color: #16a34a;
  font-weight: 600;
  margin: 0;
}

.jobs-detail__pending {
  font-size: 0.84rem;
  color: var(--primary);
  font-weight: 600;
  margin: 0;
}

/* Quote info card */
.jobs-quote-info {
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.jobs-quote-info__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary-dark);
  margin: 0 0 8px;
}

.jobs-quote-info__row {
  font-size: 0.86rem;
  color: #1e3a5f;
  margin: 0 0 4px;
}

/* ============================================================
   DISPUTES — dispute-*
   ============================================================ */

.dispute-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.71rem;
  font-weight: 700;
}

.dispute-badge--open { background: #fef3c7; color: #92400e; }
.dispute-badge--under_review { background: #dbeafe; color: #1e40af; }
.dispute-badge--escalated { background: #fee2e2; color: #991b1b; }
.dispute-badge--resolved { background: #d1fae5; color: #065f46; }
.dispute-badge--closed { background: #f3f4f6; color: #6b7280; }

.dispute-open-trigger {
  margin-bottom: 16px;
}

.dispute-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dispute-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}

.dispute-card__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  flex-wrap: wrap;
}

.dispute-card__info {
  flex: 1;
  min-width: 0;
}

.dispute-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.dispute-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.dispute-card__meta {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0 0 4px;
}

.dispute-card__parties {
  font-size: 0.82rem;
  color: #475569;
  margin: 0 0 6px;
}

.dispute-card__desc {
  font-size: 0.84rem;
  color: #64748b;
  margin: 0;
}

.dispute-card__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Dispute detail panel */
.dispute-detail {
  padding: 0 16px 16px;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
}

.dispute-detail__section-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  margin: 16px 0 10px;
}

.dispute-detail__requested {
  background: #eff6ff;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 10px;
}

.dispute-detail__requested-text {
  font-size: 0.84rem;
  color: #1e40af;
  margin: 0;
}

/* Messages thread */
.dispute-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dispute-msg {
  background: #f9fafb;
  border-radius: 10px;
  padding: 10px 14px;
  border: 1px solid #f1f5f9;
}

.dispute-msg--own {
  background: #f0f7ff;
  border-color: #dbeafe;
}

.dispute-msg__header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 5px;
  font-size: 0.82rem;
}

.dispute-msg__time {
  color: #94a3b8;
  font-size: 0.78rem;
}

.dispute-msg__tag {
  color: #94a3b8;
  font-size: 0.75rem;
  font-style: italic;
}

.dispute-msg__text {
  font-size: 0.88rem;
  color: #334155;
  margin: 0;
  white-space: pre-wrap;
}

.dispute-msg__edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* Compose area */
.dispute-compose {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

/* Resolution banner */
.dispute-resolution-banner {
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  border: 1px solid;
}

.dispute-resolution-banner--resolved {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.dispute-resolution-banner--escalated {
  background: #fef2f2;
  border-color: #fecaca;
}

.dispute-resolution-banner__title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 5px;
}

.dispute-resolution-banner--resolved .dispute-resolution-banner__title { color: #065f46; }
.dispute-resolution-banner--escalated .dispute-resolution-banner__title { color: #991b1b; }

.dispute-resolution-banner__meta {
  font-size: 0.8rem;
  color: #374151;
  margin: 2px 0;
}

.dispute-resolution-banner__desc {
  font-size: 0.84rem;
  color: #374151;
  margin: 5px 0;
}

/* Timeline */
.dispute-timeline {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

.dispute-timeline__title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px;
}

.dispute-timeline__track {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid #e2e8f0;
}

.dispute-timeline__step {
  position: relative;
  padding-bottom: 14px;
}

.dispute-timeline__step--last {
  padding-bottom: 0;
}

.dispute-timeline__dot {
  position: absolute;
  left: -25px;
  top: 4px;
  width: 10px;
  height: 10px;
  background: var(--indigo-light);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #e2e8f0;
}

.dispute-timeline__content {}

.dispute-timeline__row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.dispute-timeline__old {
  font-size: 0.8rem;
  color: #94a3b8;
}

.dispute-timeline__when {
  font-size: 0.78rem;
  color: #94a3b8;
}

.dispute-timeline__by {
  font-size: 0.78rem;
  color: #475569;
}

.dispute-timeline__note {
  font-size: 0.8rem;
  color: #64748b;
  margin: 3px 0 0;
}

/* Evidence */
/* Party responses (Agree / Decline) */
.dispute-response {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

.dispute-response__title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
}

.dispute-response__stance {
  margin: 0 0 8px;
  font-size: 0.86rem;
  color: #334155;
}

.dispute-response__stance--pending {
  color: #64748b;
}

.dispute-response__when {
  color: #94a3b8;
  font-weight: 500;
}

.dispute-response__text {
  margin: 4px 0 0;
  color: #475569;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

.dispute-response__form {
  margin-top: 10px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.dispute-response__prompt {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0f172a;
}

.dispute-evidence {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

.dispute-evidence__title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
}

.dispute-evidence__count {
  font-weight: 500;
  color: #64748b;
}

.dispute-evidence__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dispute-evidence__item {
  background: #fffbeb;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid #fde68a;
}

.dispute-evidence__item--own {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.dispute-evidence__meta {
  font-size: 0.78rem;
  color: #374151;
  margin: 0 0 4px;
}

.dispute-evidence__text {
  font-size: 0.84rem;
  color: #374151;
  margin: 0 0 4px;
  white-space: pre-wrap;
}

.dispute-evidence__link {
  font-size: 0.82rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.dispute-evidence__actions {
  margin-top: 8px;
}

.dispute-evidence__form {
  margin-top: 10px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Open Dispute Form card */
.dispute-form-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dispute-form-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.dispute-form-card__hint {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
}

.dispute-form-card__autosave {
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   REVIEWS — rv-*
   ============================================================ */

.rv-summary {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 16px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}

.rv-summary__avg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
}

.rv-summary__avg-num {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.rv-summary__count {
  font-size: 0.78rem;
  color: #64748b;
}

.rv-stars {
  display: inline-flex;
  gap: 2px;
  color: #f59e0b;
}

.rv-star { flex-shrink: 0; }
.rv-star--filled { color: #f59e0b; }

.rv-summary__dist {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 180px;
}

.rv-dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rv-dist-row__star {
  font-size: 0.8rem;
  color: #64748b;
  width: 10px;
  text-align: right;
  flex-shrink: 0;
}

.rv-dist-row__bar {
  flex: 1;
  background: #e2e8f0;
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}

.rv-dist-row__fill {
  height: 100%;
  border-radius: 99px;
  background: #f59e0b;
  min-width: 2px;
}

.rv-dist-row__count {
  font-size: 0.75rem;
  color: #94a3b8;
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

/* Review list */
.rv-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rv-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}

.rv-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.rv-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo-light), #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.rv-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.rv-card__reviewer {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

.rv-card__date {
  font-size: 0.76rem;
  color: #94a3b8;
  margin-left: auto;
  flex-shrink: 0;
}

.rv-card__comment {
  font-size: 0.88rem;
  color: #374151;
  margin: 0 0 10px;
  line-height: 1.6;
}

.rv-card__response {
  background: #f8fafc;
  border-left: 3px solid var(--indigo-light);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  margin-top: 8px;
}

.rv-card__response-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--indigo-light);
  display: block;
  margin-bottom: 4px;
}

.rv-card__response-text {
  font-size: 0.86rem;
  color: #334155;
  margin: 0;
  line-height: 1.5;
}

/* Respond form */
.rv-respond-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rv-respond-form__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Buyer activity stats */
.rv-stats-row {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.rv-stat-card {
  flex: 1;
  min-width: 130px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rv-stat-card__num {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.rv-stat-card__label {
  font-size: 0.78rem;
  color: #64748b;
}

/* ============================================================
   FOLLOWERS — flw-*
   ============================================================ */

.flw-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
}

.flw-tab {
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.flw-tab--active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.flw-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #e2e8f0;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #374151;
}

.flw-tab--active .flw-tab__count {
  background: #dbeafe;
  color: var(--primary-dark);
}

.flw-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flw-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
}

.flw-item__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e2e8f0;
}

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

.flw-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flw-item__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

.flw-item__type {
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: capitalize;
}

/* ============================================================
   SOCIAL WIDGETS — sw-*
   ============================================================ */

/* Like button */
.sw-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.sw-like-btn--active {
  color: #e11d48;
  border-color: #fecdd3;
  background: #fff1f2;
}

.sw-like-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sw-like-btn__count {
  font-size: 0.82rem;
  font-weight: 700;
}

/* Share button */
.sw-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* Comment button */
.sw-comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* Social bar */
.sw-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Overlay & Sheet */
.sw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: swOverlayIn 0.2s ease;
}

@keyframes swOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes swSheetSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sw-sheet {
  background: #fff;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sw-sheet--ig {
  animation: swSheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.sw-sheet__grab {
  width: 36px;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
}

.sw-sheet__head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px 12px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
  position: relative;
}

.sw-sheet__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
}

.sw-sheet__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  margin-left: 6px;
}

.sw-sheet__close {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.sw-sheet__close:active {
  background: #f1f5f9;
}

.sw-sheet__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Share sheet */
.sw-share-sheet {
  border-radius: 16px 16px 0 0;
}

.sw-share-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 0 0;
}

.sw-share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  font-family: inherit;
}

.sw-share-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: #6b7280;
}

.sw-share-icon--wa { background: #25D366; }
.sw-share-icon--tg { background: #0088cc; }
.sw-share-icon--fb { background: #1877f2; }
.sw-share-icon--tw { background: #000; }
.sw-share-icon--email { background: var(--indigo-light); }
.sw-share-icon--copy { background: #475569; }

/* Comments — Instagram-style */
.sw-comments {
  border-top: 1px solid #f1f5f9;
  margin-top: 8px;
}

.sw-comments--ig {
  border-top: none;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sw-comments__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.sw-comments__chevron {
  margin-left: auto;
  color: #94a3b8;
  transition: transform 0.2s;
}

.sw-comments__chevron--open {
  transform: rotate(180deg);
}

.sw-comments__body {
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Loading spinner */
.sw-comments__loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  flex: 1;
}

.sw-comments__spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid #e2e8f0;
  border-top-color: #64748b;
  border-radius: 50%;
  animation: swSpin 0.7s linear infinite;
}

@keyframes swSpin {
  to { transform: rotate(360deg); }
}

.sw-comments__loading {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
}

/* Empty state */
.sw-comments__empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 40px 20px;
  flex: 1;
}

.sw-comments__empty-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #334155;
  margin: 8px 0 0;
}

.sw-comments__empty-sub {
  font-size: 0.8125rem;
  color: #94a3b8;
  margin: 0;
}

/* Comment list — scrollable area */
.sw-comment-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  min-height: 0;
}

/* Single comment — Instagram-style */
.sw-comment--ig {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 16px;
}
.sw-comment--new {
  animation: commentSlideIn 0.35s ease-out;
  background: #f0fdf4;
}
@keyframes commentSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.sw-comment--ig .sw-comment__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #e2e8f0;
  flex-shrink: 0;
}

.sw-comment__content {
  flex: 1;
  min-width: 0;
}

.sw-comment--ig .sw-comment__text {
  font-size: 0.8125rem;
  color: #262626;
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}

/* @mention chip inside a posted comment */
.sw-comment__mention {
  color: #0095f6;
  font-weight: 600;
}

/* Clickable @mention chip — opens the tagged person's profile */
.sw-comment__mention--link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: #0095f6;
  cursor: pointer;
}
.sw-comment__mention--link:hover {
  text-decoration: underline;
}
.sw-comment__mention--link:focus-visible {
  outline: 2px solid #0095f6;
  outline-offset: 2px;
  border-radius: 3px;
}

.sw-comment--ig .sw-comment__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #262626;
  cursor: pointer;
  display: block;
  margin-bottom: 2px;
}

.sw-comment__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.sw-comment--ig .sw-comment__time {
  font-size: 0.6875rem;
  color: #8e8e8e;
  font-weight: 400;
}

.sw-comment__action {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #8e8e8e;
  cursor: pointer;
  font-family: inherit;
}

.sw-comment__action--del {
  color: #ef4444;
}

.sw-comment__action--del:active {
  opacity: 0.6;
}

/* Infinite scroll sentinel */
.sw-comments__sentinel {
  min-height: 1px;
  padding: 4px 0;
}
.sw-comments__loading-more {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}
.sw-comments__loading-more .sw-comments__spinner {
  width: 22px;
  height: 22px;
}
.sw-comments__end-text {
  text-align: center;
  font-size: 0.75rem;
  color: #8e8e8e;
  padding: 8px 0;
  margin: 0;
}

/* Input bar — Instagram-style (pinned bottom) */
.sw-comment-form--ig {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid #efefef;
  background: #fff;
  flex-shrink: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

.sw-comment-form__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #e2e8f0;
  flex-shrink: 0;
}

.sw-comment-form__input--ig {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: none;
  border-radius: 0;
  font-size: 0.875rem;
  font-family: inherit;
  background: transparent;
  color: #262626;
  resize: none;
  min-height: auto;
  outline: none;
  box-shadow: none;
}

.sw-comment-form__input--ig::placeholder {
  color: #8e8e8e;
}

.sw-comment-form__input--ig:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

/* @mention autocomplete (comment input) */
.sw-mention-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.sw-mention-wrap .sw-comment-form__input--ig {
  flex: 1;
}

.sw-mention-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
}

.sw-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.sw-mention-item--active,
.sw-mention-item:hover {
  background: #f1f5f9;
}

.sw-mention-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: #e2e8f0;
  flex-shrink: 0;
}

.sw-mention-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #262626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-comment-form__post {
  background: none;
  border: none;
  color: #0095f6;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-family: inherit;
}

.sw-comment-form__post:disabled {
  opacity: 0.35;
  cursor: default;
}

.sw-comment-form__post svg {
  fill: #0095f6;
}

.sw-comment-form__post-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #e2e8f0;
  border-top-color: #0095f6;
  border-radius: 50%;
  animation: swSpin 0.7s linear infinite;
}

.sw-comment-form__error {
  font-size: 0.75rem;
  color: #dc2626;
  margin: 0;
  padding: 0 16px 8px;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: #fef2f2;
  text-align: center;
}

.sw-comment-form__notice {
  font-size: 0.75rem;
  color: #92400e;
  margin: 0;
  padding: 6px 16px;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: #fffbeb;
  text-align: center;
  border-top: 1px solid #fde68a;
}

.sw-comment-form--login {
  justify-content: center;
  padding: 14px 16px;
}

.sw-comments__login-hint {
  font-size: 0.8125rem;
  color: #8e8e8e;
  text-align: center;
  margin: 0;
}

/* ---- Comment sheet mobile overrides ---- */
@media (max-width: 768px) {
  .sw-overlay {
    z-index: 10001; /* above mobile bottom tabs (9990) */
  }
  .sw-sheet--ig {
    max-height: 75vh;
    max-height: 75dvh;
    min-height: 40vh;
    border-radius: 14px 14px 0 0;
    margin-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sw-sheet__body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .sw-comment-form--ig {
    padding: 10px 12px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    background: #fff;
  }
  .sw-comment-form__input--ig {
    font-size: 16px; /* prevent iOS zoom */
    min-height: 36px;
  }
  .sw-comment-form__avatar {
    width: 28px;
    height: 28px;
  }
  .sw-comment--ig {
    padding: 8px 12px;
  }
  .sw-comment--ig .sw-comment__avatar {
    width: 28px;
    height: 28px;
  }
  .sw-comments__loading-wrap,
  .sw-comments__empty-wrap {
    padding: 32px 16px;
  }
  .sw-comments__login-hint {
    padding-bottom: 12px;
  }
}

/* Follow button */
.sw-follow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sw-follow__btn {
  padding: 7px 18px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.sw-follow__btn--following {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.sw-follow__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sw-follow__count {
  font-size: 0.8rem;
  color: #64748b;
}

/* ============================================================
   RESPONSIVE for new components
   ============================================================ */

@media (max-width: 640px) {
  .pg-card {
    padding: 16px;
    border-radius: 10px;
  }

  .pg-grid-2 {
    grid-template-columns: 1fr;
  }

  .jobs-card__row {
    flex-direction: column;
  }

  .jobs-card__thumb {
    width: 100%;
    height: 140px;
  }

  .rv-summary {
    flex-direction: column;
    gap: 16px;
  }

  .rv-summary__avg {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .rv-summary__avg-num {
    font-size: 2rem;
  }

  .dispute-card__top {
    flex-direction: column;
  }

  .dispute-card__actions {
    width: 100%;
  }

  .sw-share-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .flw-tabs {
    gap: 0;
  }

  .flw-tab {
    flex: 1;
    justify-content: center;
    padding: 10px 8px;
    font-size: 0.82rem;
  }
}

/* ==========================================================
   BUYER DASHBOARD  (bdash__)  — fresh rebuild
   ========================================================== */

.bdash { background: #f8f9fb; }
.bdash .needs-inner { display: flex; flex-direction: column; gap: 18px; }

.bdash__skeleton {
  padding: 60px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.95rem;
  background: #ffffff;
  border: 1px solid #eceef4;
  border-radius: 16px;
}

/* ---------- Welcome hero ---------- */
.bdash__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 0.95fr);
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, #eef0fb 0%, #f2eefc 55%, #efeaff 100%);
  border: 1px solid #e6e3f7;
  border-radius: 22px;
  padding: 26px 28px;
  overflow: hidden;
}

.bdash__hero-main { min-width: 0; }
.bdash__hero-eyebrow {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.bdash__hero-title {
  margin: 0 0 8px;
  font-size: 1.7rem;
  font-weight: 800;
  color: #14122b;
  line-height: 1.15;
}
.bdash__hero-sub {
  margin: 0 0 18px;
  font-size: 0.92rem;
  color: #55506b;
  line-height: 1.5;
  max-width: 30ch;
}
.bdash__hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.bdash__act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 11px;
  border: 1px solid #e2ddf3;
  background: #ffffff;
  color: #3f3a56;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.bdash__act svg { flex-shrink: 0; }
.bdash__act:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(80,60,160,0.12); }
.bdash__act--primary {
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(109,40,217,0.28);
}
.bdash__act--primary:hover { box-shadow: 0 10px 22px rgba(109,40,217,0.36); }

/* hero illustration */
.bdash__hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.bdash__hero-art-svg { width: 100%; max-width: 300px; height: auto; }

/* hero right side cards */
.bdash__hero-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.bdash__promo {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  padding: 15px 16px;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.bdash__promo--filled {
  justify-content: space-between;
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(109,40,217,0.26);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bdash__promo--filled:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(109,40,217,0.34); }
.bdash__promo--filled > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bdash__promo--filled strong { font-size: 0.98rem; font-weight: 800; }
.bdash__promo--filled span { font-size: 0.8rem; opacity: 0.86; }
.bdash__promo-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; background: rgba(255,255,255,0.2);
}

.bdash__promo--light {
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #ebe8f6;
  box-shadow: 0 2px 8px rgba(20,18,43,0.05);
}
.bdash__promo-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px; background: #f3edff; color: var(--accent);
}
.bdash__promo--light > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bdash__promo--light strong { font-size: 0.9rem; font-weight: 800; color: #1f1b33; }
.bdash__promo--light span { font-size: 0.8rem; color: #6b6683; line-height: 1.4; }
.bdash__promo-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 800; color: var(--accent);
}

/* ---------- Stat cards ---------- */
.bdash__stats { display: grid; gap: 14px; }
.bdash__stats--five { grid-template-columns: repeat(5, 1fr); }
.bdash__stats--three { grid-template-columns: repeat(3, 1fr); }

.bdash__stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #eceef4;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(20,18,43,0.04);
  padding: 16px 16px 18px;
  text-align: left;
  width: 100%;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bdash__stat:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20,18,43,0.09); }
.bdash__stat:disabled { cursor: default; }
.bdash__stat--pink { background: #fff5fa; border-color: #fbe0ee; }

.bdash__stat-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 8px;
}
.bdash__stat-chip svg { width: 20px; height: 20px; }
.bdash__stat-chip--purple { background: #f0ebff; color: var(--accent); }
.bdash__stat-chip--blue   { background: #e8f1ff; color: var(--primary); }
.bdash__stat-chip--green  { background: #e7f8ef; color: #16a34a; }
.bdash__stat-chip--red    { background: #fdecec; color: #ef4444; }
.bdash__stat-chip--orange { background: #fff2e5; color: #f97316; }
.bdash__stat-chip--gray   { background: #eef1f6; color: #64748b; }
.bdash__stat-chip--pink   { background: #fce4f0; color: #ec4899; }

.bdash__stat-value { font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: #14122b; }
.bdash__stat--purple .bdash__stat-value { color: #6d28d9; }
.bdash__stat--blue   .bdash__stat-value { color: var(--primary); }
.bdash__stat--green  .bdash__stat-value { color: #16a34a; }
.bdash__stat--red    .bdash__stat-value { color: #ef4444; }
.bdash__stat--orange .bdash__stat-value { color: #f97316; }
.bdash__stat--pink   .bdash__stat-value { color: #ec4899; }

.bdash__stat-label { font-size: 0.82rem; font-weight: 700; color: #3f3a56; }
.bdash__stat-sub { font-size: 0.72rem; color: #94a3b8; }
.bdash__stat-sub--red { color: #ef4444; font-weight: 600; }

.bdash__stat-bar {
  display: block; margin-top: 10px; height: 4px; border-radius: 999px;
  background: #f0f1f6; overflow: hidden;
}
.bdash__stat-bar i { display: block; height: 100%; width: 45%; border-radius: 999px; }
.bdash__stat--purple .bdash__stat-bar i { width: 55%; background: linear-gradient(90deg, #a78bfa, var(--accent)); }
.bdash__stat--blue   .bdash__stat-bar i { width: 50%; background: linear-gradient(90deg, #93c5fd, var(--primary)); }
.bdash__stat--green  .bdash__stat-bar i { width: 60%; background: linear-gradient(90deg, #86efac, #16a34a); }
.bdash__stat--red    .bdash__stat-bar i { width: 40%; background: linear-gradient(90deg, #fca5a5, #ef4444); }
.bdash__stat--orange .bdash__stat-bar i { width: 65%; background: linear-gradient(90deg, #fdba74, #f97316); }
.bdash__stat--gray   .bdash__stat-bar i { width: 30%; background: linear-gradient(90deg, #cbd5e1, #94a3b8); }
.bdash__stat--pink   .bdash__stat-bar i { width: 50%; background: linear-gradient(90deg, #f9a8d4, #ec4899); }

/* ---------- Cards / panels ---------- */
.bdash__two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.bdash__card {
  background: #ffffff;
  border: 1px solid #eceef4;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(20,18,43,0.05);
  padding: 20px 22px;
}
.bdash__card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.bdash__card-title { margin: 0; font-size: 1rem; font-weight: 800; color: #14122b; }
.bdash__viewall {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--accent);
  padding: 4px 0;
}
.bdash__viewall svg { flex-shrink: 0; }

.bdash__empty { color: #94a3b8; text-align: center; padding: 28px 0; font-size: 0.88rem; }

.bdash__rows { display: flex; flex-direction: column; gap: 8px; }
.bdash__row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 12px;
  background: #f8f9fb; border: 1px solid #f0f1f6;
  cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease;
}
.bdash__row:hover { background: #f3f0fc; border-color: #e6e0f7; }
.bdash__row-thumb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; background: linear-gradient(135deg, #a78bfa, var(--accent));
  color: #ffffff; font-weight: 800; font-size: 1rem;
}
.bdash__row-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
}
.bdash__row-chip svg { width: 20px; height: 20px; }
.bdash__row-chip--blue { background: #e8f1ff; color: var(--primary); }
.bdash__row-chip--green { background: #e7f8ef; color: #16a34a; }

.bdash__row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bdash__row-name {
  font-size: 0.9rem; font-weight: 700; color: #1f1b33;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bdash__row-meta { font-size: 0.76rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdash__row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.bdash__row-amount { font-size: 0.9rem; font-weight: 800; color: #14122b; }

/* status pills */
.bdash__pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.bdash__pill--green  { background: #e7f8ef; color: #16a34a; }
.bdash__pill--red    { background: #fdecec; color: #ef4444; }
.bdash__pill--amber  { background: #fff7e6; color: #d97706; }
.bdash__pill--purple { background: #f0ebff; color: var(--accent); }
.bdash__pill--gray   { background: #eef1f6; color: #64748b; }

/* ---------- Activity timeline ---------- */
.bdash__timeline { display: flex; flex-direction: column; }
.bdash__tl-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 6px 12px 26px;
  cursor: pointer; border-radius: 10px;
  transition: background 0.12s ease;
}
.bdash__tl-row:hover { background: #f8f9fb; }
.bdash__tl-row::before {
  content: ""; position: absolute; left: 9px; top: 0; bottom: 0;
  width: 2px; background: #eef0f6;
}
.bdash__tl-row:first-child::before { top: 50%; }
.bdash__tl-row:last-child::before { bottom: 50%; }
.bdash__tl-dot {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: #ffffff; border: 3px solid #a78bfa; z-index: 1;
}
.bdash__tl-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
}
.bdash__tl-chip svg { width: 18px; height: 18px; }
.bdash__tl-chip--purple { background: #f0ebff; color: var(--accent); }
.bdash__tl-chip--green { background: #e7f8ef; color: #16a34a; }
.bdash__tl-chip--red { background: #fdecec; color: #ef4444; }
.bdash__tl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bdash__tl-name { font-size: 0.88rem; font-weight: 700; color: #1f1b33; }
.bdash__tl-time { font-size: 0.76rem; color: #94a3b8; }
.bdash__tl-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bdash__tl-amount { font-size: 0.85rem; font-weight: 800; color: #14122b; white-space: nowrap; }
.bdash__tl-chevron { display: inline-flex; align-items: center; color: #c3c8d4; }

.bdash__loading-more { text-align: center; color: #94a3b8; padding: 12px 0; font-size: 0.84rem; }
.bdash__more-wrap { display: flex; justify-content: center; margin-top: 14px; }
.bdash__more {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: 999px;
  background: #ffffff; border: 1px solid #e2ddf3; cursor: pointer;
  font-family: inherit; font-size: 0.84rem; font-weight: 700; color: #6d28d9;
  transition: background 0.12s ease;
}
.bdash__more:hover { background: #f5f2fd; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .bdash__hero { grid-template-columns: 1fr 1fr; }
  .bdash__hero-art { grid-row: 1 / 2; grid-column: 2 / 3; }
  .bdash__hero-side { grid-column: 1 / 3; flex-direction: row; }
  .bdash__hero-side > * { flex: 1; }
  .bdash__stats--five { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .bdash__stats--five { grid-template-columns: repeat(2, 1fr); }
  .bdash__two-col { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .bdash__hero { grid-template-columns: 1fr; padding: 20px 18px; border-radius: 18px; }
  .bdash__hero-art { display: none; }
  .bdash__hero-side { grid-column: auto; flex-direction: column; }
  .bdash__hero-title { font-size: 1.4rem; }
  .bdash__hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .bdash__act { justify-content: center; }
  .bdash__stats--three { grid-template-columns: repeat(2, 1fr); }
  .bdash__card { padding: 16px 16px; border-radius: 14px; }
  .bdash__row-right { align-items: flex-end; }
}

@media (max-width: 420px) {
  .bdash__stats--five, .bdash__stats--three { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bdash__hero-title { font-size: 1.2rem; }
  .bdash__stat-value { font-size: 1.3rem; }
  .bdash__tl-right { gap: 6px; }
  .bdash__tl-amount { display: none; }
}

/* ==========================================================
   BUYER ACCOUNT  (buyer-account__)
   ========================================================== */

.buyer-account-page {
  background: #f8fafc;
  min-height: 100vh;
}

.buyer-account {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 52px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.buyer-account__profile-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 28px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.buyer-account__avatar-wrap {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.buyer-account__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e2e8f0;
  display: block;
}

.buyer-account__avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.buyer-account__avatar-wrap:hover .buyer-account__avatar-overlay { opacity: 1; }

.buyer-account__profile-info {
  flex: 1;
  min-width: 0;
}

.buyer-account__name {
  margin: 0 0 4px;
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
}

.buyer-account__uploading {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--indigo-light);
  font-weight: 600;
  margin-bottom: 4px;
}

.buyer-account__upload-hint {
  margin: 0;
  font-size: 0.78rem;
  color: #94a3b8;
}

.buyer-account__tabs {
  display: flex;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 10px 14px;
  flex-wrap: wrap;
}

.buyer-account__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.buyer-account__tab--active {
  background: var(--indigo-light);
  color: #ffffff;
}

.buyer-account__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}

.buyer-account__tab-count--active {
  background: rgba(255,255,255,0.25);
  color: #ffffff;
}

.buyer-account__tab-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.buyer-account__loading {
  padding: 24px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
}

.buyer-account__empty {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 32px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
  margin: 0;
}

.buyer-account__card-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.buyer-account__person-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.buyer-account__person-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e2e8f0;
  flex-shrink: 0;
}

.buyer-account__person-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.buyer-account__person-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buyer-account__person-date {
  font-size: 0.75rem;
  color: #94a3b8;
}

.buyer-account__gig-card,
.buyer-account__comment-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.buyer-account__gig-info,
.buyer-account__comment-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.buyer-account__gig-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

.buyer-account__gig-meta {
  font-size: 0.8rem;
  color: #64748b;
}

.buyer-account__gig-date {
  font-size: 0.74rem;
  color: #94a3b8;
}

.buyer-account__comment-body {
  font-size: 0.84rem;
  color: #334155;
  margin: 2px 0 0;
  line-height: 1.5;
}

.buyer-account__action-btn {
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}

.buyer-account__action-btn--danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

.buyer-account__footer-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.buyer-account__footer-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 600px) {
  .buyer-account__profile-card { flex-direction: column; text-align: center; }
  .buyer-account__tabs { justify-content: center; }
  .buyer-account__person-card,
  .buyer-account__gig-card,
  .buyer-account__comment-card { flex-wrap: wrap; }
}

/* ==========================================================
   BUYER PAYMENTS  (payments__)
   ========================================================== */

.payments-page {
  background: #f6f7fb;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Hero header */
.payments__hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 30px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-light) 55%, var(--accent) 100%);
  box-shadow: 0 12px 30px -12px rgba(79, 70, 229, 0.55);
}

.payments__hero::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -30px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0) 70%);
  pointer-events: none;
}

.payments__hero-text { position: relative; z-index: 1; }

.payments__eyebrow {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.payments__heading {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.payments__subtitle {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
  max-width: 46ch;
}

.payments__hero-mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(255,255,255,0.16);
  color: #ffffff;
  backdrop-filter: blur(2px);
}

/* Segmented tab bar */
.payments__tabs {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  background: #eceef4;
  padding: 5px;
  border-radius: 12px;
  width: fit-content;
}

.payments__tab {
  display: inline-flex;
  align-items: center;
  padding: 9px 22px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.payments__tab:hover { color: var(--indigo); }

.payments__tab--active {
  background: #ffffff;
  color: #4338ca;
  box-shadow: 0 2px 6px rgba(15,23,42,0.1);
}

.payments__tab:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

.payments__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payments__summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.payments__summary-card {
  background: #ffffff;
  border: 1px solid #e9ecf4;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.payments__summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(15,23,42,0.28);
}

.payments__summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}

.payments__summary-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.payments__summary-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.payments__summary-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.payments__filters { margin: 0; }

.payments__filter-select {
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 0.88rem;
  color: #334155;
  cursor: pointer;
  min-width: 170px;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}

.payments__filter-select:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
  border-color: var(--indigo);
}

/* Table card */
.payments__table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid #e9ecf4;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}

.payments__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.payments__th {
  padding: 13px 16px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e9ecf4;
  white-space: nowrap;
}

.payments__th--right { text-align: right; }
.payments__th--center { text-align: center; }

.payments__tr {
  border-bottom: 1px solid #f1f3f9;
  transition: background 0.12s ease;
}
.payments__tr:last-child { border-bottom: none; }
.payments__tr:hover { background: #f9fafe; }

.payments__td {
  padding: 14px 16px;
  vertical-align: middle;
  color: #334155;
}

.payments__td--right { text-align: right; }
.payments__td--center { text-align: center; }

.payments__item-desc {
  font-weight: 600;
  color: #0f172a;
}

.payments__item-ref {
  font-size: 0.8rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.payments__item-date {
  font-size: 0.83rem;
  color: #64748b;
  white-space: nowrap;
}

.payments__amount {
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.payments__amount--credit { color: #16a34a; }

.payments__item-gst {
  font-size: 0.8rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

.payments__item-note {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #94a3b8;
  font-style: italic;
}

.payments__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap;
}

.payments__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.payments__download-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #dfe3ee;
  background: #ffffff;
  color: var(--indigo);
  font-size: 0.79rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.payments__download-btn:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.payments__pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 4px 0;
  flex-wrap: wrap;
}

.payments__page-btn {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.payments__page-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.payments__page-num {
  font-size: 0.84rem;
  color: #64748b;
  font-weight: 600;
}

@media (max-width: 640px) {
  .payments__hero { padding: 20px 18px; }
  .payments__hero-mark { display: none; }
  .payments__heading { font-size: 1.3rem; }
  .payments__tabs { width: 100%; }
  .payments__tab { flex: 1; justify-content: center; padding: 9px 12px; }
  .payments__summary-grid { grid-template-columns: repeat(2, 1fr); }
  .payments__summary-card { padding: 14px; gap: 10px; }
  .payments__summary-icon { width: 38px; height: 38px; }
  .payments__summary-value { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .payments__summary-card,
  .payments__tab,
  .payments__tr,
  .payments__page-btn,
  .payments__download-btn { transition: none; }
  .payments__summary-card:hover { transform: none; }
}

/* ==========================================================
   BUYER NEEDS  (needs__)
   ========================================================== */

.needs-page { background: #f8fafc; }

.needs__header-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 24px 28px 20px;
}

.needs__header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.needs__eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo-light);
}

.needs__heading {
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.needs__subtitle {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: #64748b;
}

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

.needs__card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.needs__card-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.needs__card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.needs__card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
}

.needs__status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap;
  flex-shrink: 0;
}

.needs__category-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #eef2ff;
  color: var(--indigo-light);
  white-space: nowrap;
}

.needs__card-desc {
  margin: 0;
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.55;
}

.needs__card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.needs__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
}

.needs__card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.needs__primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: var(--indigo-light);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}

.needs__secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}

.needs__empty-wrap {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 40px 24px;
}

.needs__empty-text {
  color: #94a3b8;
  font-size: 0.9rem;
  text-align: center;
  margin: 0;
}

.needs__form-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 28px 32px;
}

.needs__form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.needs__autosave-row {
  flex-shrink: 0;
  margin-top: 4px;
}

.needs__form-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.needs__form-section { display: flex; flex-direction: column; }

.needs__label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
}

.needs__input {
  padding: 10px 13px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.9rem;
  color: #0f172a;
  width: 100%;
  font-family: inherit;
  box-sizing: border-box;
}

.needs__input:focus {
  outline: 2px solid var(--indigo-light);
  outline-offset: -1px;
  background: #ffffff;
}

.needs__input--textarea {
  resize: vertical;
  min-height: 100px;
}

.needs__form-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.needs__form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.needs__notify-row {
  padding: 12px 14px;
  background: #fef2f2;
  border-radius: 10px;
  border: 1px solid #fecaca;
}

.needs__notify-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;
}

.needs__checkbox {
  width: 17px;
  height: 17px;
  accent-color: #dc2626;
  cursor: pointer;
  flex-shrink: 0;
}

.needs__notify-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.needs__notify-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: #dc2626;
}

.needs__notify-hint {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-left: 2px;
}

.needs__notified-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
  font-size: 0.85rem;
  font-weight: 700;
}

.needs__form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.needs__detail-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 24px 28px;
}

.needs__detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.needs__detail-title-wrap {
  flex: 1;
  min-width: 0;
}

.needs__detail-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.needs__detail-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
}

.needs__detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.needs__notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 8px;
  border: none;
  background: var(--indigo-light);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.needs__cancel-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.needs__detail-desc {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.65;
  margin: 0 0 16px;
}

.needs__detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.needs__meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.needs__meta-chip--amount {
  background: #f0fdf4;
  color: #16a34a;
  font-weight: 800;
}

.needs__posted-by {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #64748b;
}

.needs__respond-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 22px 26px;
}

.needs__section-title {
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.needs__accepted-card {
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-left: 4px solid #16a34a;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 20px 24px;
}

.needs__accepted-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f0fdf4;
  color: #16a34a;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.needs__accepted-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.needs__accepted-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.needs__accepted-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
}

.needs__accepted-message {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.55;
}

.needs__accepted-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.needs__responses-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 22px 26px;
}

.needs__response-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.needs__response-list--my { gap: 14px; }

.needs__response-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.needs__response-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.needs__response-seller {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.needs__response-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.needs__response-message {
  margin: 0;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.55;
}

.needs__response-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.needs__accept-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 7px;
  border: none;
  background: #16a34a;
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}

.needs__my-response-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.needs__my-response-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.needs__my-response-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.needs__my-response-offer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.needs__offer-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
}

.needs__my-response-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.needs__back-row {
  display: flex;
  align-items: center;
  padding-top: 4px;
}

@media (max-width: 640px) {
  .needs__form-card { padding: 20px 16px; }
  .needs__header-card { padding: 18px 16px; }
  .needs__detail-card { padding: 18px 16px; }
  .needs__form-row-2,
  .needs__form-row-3 { grid-template-columns: 1fr; }
  .needs__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   UTILITY CLASSES — replaces inline styles
   ============================================================ */

/* ── Spacing ── */
.u-mt-0  { margin-top: 0; }
.u-mt-2  { margin-top: 2px; }
.u-mt-4  { margin-top: 4px; }
.u-mt-8  { margin-top: 8px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mb-0  { margin-bottom: 0; }
.u-mb-4  { margin-bottom: 4px; }
.u-mb-8  { margin-bottom: 8px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mb-24 { margin-bottom: 24px; }
.u-mr-4  { margin-right: 4px; }
.u-mr-8  { margin-right: 8px; }
.u-ml-6  { margin-left: 6px; }
.u-ml-auto { margin-left: auto; }
.u-m-0   { margin: 0; }

/* ── Typography ── */
.u-fs-11 { font-size: 11px; }
.u-fs-12 { font-size: 12px; }
.u-fs-13 { font-size: 13px; }
.u-fs-14 { font-size: 14px; }
.u-fs-15 { font-size: 15px; }
.u-fs-16 { font-size: 16px; }
.u-fs-18 { font-size: 18px; }
.u-fs-20 { font-size: 20px; }
.u-fs-40 { font-size: 40px; }
.u-fw-400 { font-weight: 400; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }
.u-ta-center  { text-align: center; }
.u-ta-right   { text-align: right; }
.u-ws-pre-line { white-space: pre-line; }

/* ── Colors ── */
.u-color-muted    { color: #64748b; }
.u-color-dim      { color: #94a3b8; }
.u-color-dark     { color: #1e293b; }
.u-color-heading  { color: var(--text-primary, #0f172a); }
.u-color-blue     { color: var(--primary); }
.u-color-amber    { color: #f59e0b; }
.u-color-amber-dk { color: #92400e; }
.u-color-green    { color: #166534; }

/* ── Layout ── */
.u-flex           { display: flex; }
.u-flex-1         { flex: 1; }
.u-flex-center    { display: flex; align-items: center; justify-content: center; }
.u-flex-col       { display: flex; flex-direction: column; }
.u-flex-wrap      { flex-wrap: wrap; }
.u-items-center   { align-items: center; }
.u-justify-center { justify-content: center; }
.u-justify-end    { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-gap-4  { gap: 4px; }
.u-gap-6  { gap: 6px; }
.u-gap-8  { gap: 8px; }
.u-gap-10 { gap: 10px; }
.u-gap-12 { gap: 12px; }
.u-gap-16 { gap: 16px; }
.u-self-center { align-self: center; }
.u-contents { display: contents; }
.u-d-none  { display: none; }
.u-d-ib    { display: inline-block; }
.u-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.u-va-mid  { vertical-align: middle; }
.u-cursor-default { cursor: default; }
.u-cursor-pointer { cursor: pointer; }
.u-px-24 { padding-left: 24px; padding-right: 24px; }

/* ── Component helpers ── */
.u-section-heading {
  font-size: 16px; font-weight: 600; color: var(--text-primary, #0f172a);
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.u-hint-text {
  font-size: 13px; color: #475569;
}
.u-hint-text--mb { margin-bottom: 8px; }
.u-sub-text {
  font-size: 12px; color: #64748b;
}
.u-sub-text--dim {
  font-size: 12px; font-weight: 400; color: #94a3b8;
}
.u-meta-text {
  font-size: 13px; color: #64748b;
}
.u-label-text {
  font-size: 14px; margin: 0 0 4px;
}
.u-empty-block {
  text-align: center; padding: 32px 0; color: #94a3b8;
}
.u-empty-icon { font-size: 40px; margin-bottom: 8px; }
.u-btn-ghost {
  background: none; border: none; cursor: pointer; padding: 0;
}
.u-pill {
  border-radius: 20px; font-size: 13px; padding: 4px 14px;
}
.u-badge-count {
  margin-left: 6px; min-width: 20px; text-align: center;
}

/* ============================================================
   BUYER NEEDS PAGE — needs__*
   ============================================================ */
.needs-page-bg {
  background: #f8fafc; min-height: 100vh; padding-bottom: 40px;
}
.needs-card {
  background: #fff; border-radius: 16px; border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.needs-card--pad { padding: 28px; margin-bottom: 20px; }
.needs-card--pad-sm { padding: 20px 24px 16px; flex: 1; display: flex; flex-direction: column; }
.needs-hero-grad {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #312e81 70%, #1e40af 100%);
}
.needs-input {
  width: 100%; border-radius: 10px; border: 1.5px solid #e2e8f0;
  padding: 12px 16px; font-size: 15px; color: #0f172a;
  background: #fff; outline: none; box-sizing: border-box; font-family: inherit;
}
.needs-input--pointer { cursor: pointer; }

/* City searchable dropdown */
.needs-city-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
  margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 240px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.needs-city-dropdown__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; cursor: pointer; font-size: 14px; color: #0f172a;
  transition: background .15s;
}
.needs-city-dropdown__item:hover,
.needs-city-dropdown__item.is-selected {
  background: #f1f5f9;
}
.needs-city-dropdown__item.is-selected {
  font-weight: 600; color: var(--primary);
}
.needs-city-dropdown__name { flex: 1; }
.needs-city-dropdown__state {
  font-size: 12px; color: #94a3b8; white-space: nowrap;
}

.needs-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; font-weight: 600; color: #334155;
}
.needs-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; border-radius: 12px; border: none;
  font-size: 15px; font-weight: 600; cursor: pointer;
  text-decoration: none; letter-spacing: 0.2px;
}
.needs-btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; background: #fff; color: #475569;
  border-radius: 10px; border: 1.5px solid #e2e8f0;
  font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none;
}
.needs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; background: #f1f5f9; color: #475569;
  border-radius: 20px; font-size: 13px; font-weight: 500;
}
.needs-chip--sm { font-size: 12px; padding: 5px 10px; }
.needs-chip--xs { font-size: 12px; padding: 4px 10px; }
.needs-chip--md { font-size: 13px; }
.needs-inner { width: var(--shell-width); max-width: 100%; margin: 0 auto; }
.needs-inner--narrow { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.needs-inner--center { width: var(--shell-width); max-width: 100%; margin: 0 auto; }
.needs-inner--narrow-center { max-width: 900px; margin: 0 auto; }
.needs-hero-eyebrow {
  color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; margin: 0 0 8px;
}
.needs-hero-title {
  color: #fff; font-size: 30px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.5px;
}
.needs-hero-subtitle {
  color: rgba(255,255,255,0.55); font-size: 15px; margin: 0;
}
.needs-section-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 16px;
}
.needs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.needs-card-title {
  font-size: 17px; font-weight: 650; color: #0f172a; margin: 0; line-height: 1.35; flex: 1;
}
.needs-card-desc {
  font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 12px;
}
.needs-card-meta { font-size: 13px; color: #64748b; font-weight: 500; margin-top: 2px; }
.needs-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.needs-chip-row--mt-auto { margin-top: auto; margin-bottom: 16px; }
.needs-row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.needs-stat-cell { flex: 1; text-align: center; padding: 20px 24px; border-right: 1px solid #f1f5f9; }
.needs-stat-cell:last-child { border-right: 0; }
.needs-empty-circle {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #eff6ff, #e0e7ff);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.needs-empty-circle--gray { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }
.needs-empty-circle--sm {
  width: 56px; height: 56px; border-radius: 50%; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.needs-required { color: #dc2626; font-weight: 400; }
.needs-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: currentColor; }
.needs-status-pill {
  display: inline-flex; align-items: center; gap: 4;
  padding: 4px 12px; border-radius: 20; font-size: 12px;
  font-weight: 600; text-transform: capitalize; letter-spacing: 0.3px;
  white-space: nowrap;
}
.needs-chip--cat { background: #f0f4ff; color: #4338ca; font-weight: 600; }
.needs-chip--green { background: #f0fdf4; color: #16a34a; font-weight: 600; }
.needs-chip--blue { background: #eff6ff; color: var(--primary); font-weight: 600; }

/* ============================================================
   BROWSE NEEDS (Seller) — bn-* redesign
   ============================================================ */
.bn-page { --bn-accent: var(--accent); --bn-accent-2: #6d28d9; }

/* ---- Hero ---- */
.bn-hero {
  background: linear-gradient(120deg, #4c1d95 0%, #6d28d9 45%, var(--accent) 75%, #8b5cf6 100%);
  border-radius: 0 0 28px 28px;
  padding: 40px 32px 44px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.bn-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 240px at 88% -10%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(420px 220px at 8% 120%, rgba(255,255,255,0.10), transparent 60%);
  pointer-events: none;
}
.bn-hero__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  position: relative; z-index: 1;
}
.bn-hero__text { max-width: 560px; }
.bn-hero__eyebrow {
  color: rgba(255,255,255,0.72); font-size: 12px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 10px;
}
.bn-hero__title {
  color: #fff; font-size: 34px; font-weight: 800; margin: 0 0 10px;
  letter-spacing: -0.6px; line-height: 1.15;
}
.bn-hero__subtitle {
  color: rgba(255,255,255,0.82); font-size: 15.5px; margin: 0; line-height: 1.55;
}
.bn-hero__art {
  width: 210px; height: 180px; flex-shrink: 0;
  filter: drop-shadow(0 22px 34px rgba(23, 8, 60, 0.42));
}
@media (max-width: 720px) {
  .bn-hero { padding: 28px 20px 32px; border-radius: 0 0 20px 20px; }
  .bn-hero__inner { flex-direction: column; align-items: flex-start; }
  .bn-hero__title { font-size: 26px; }
  .bn-hero__art { width: 132px; height: 112px; align-self: flex-end; margin-top: -8px; }
}

/* ---- Filters bar ---- */
.bn-filters {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  background: #fff; border: 1px solid #e9e5f5; border-radius: 16px;
  box-shadow: 0 2px 10px rgba(76, 29, 149, 0.05);
  padding: 12px 14px; margin-bottom: 22px;
}
.bn-filters__group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bn-filter {
  position: relative; display: inline-flex; align-items: center;
  background: #f7f5fd; border: 1px solid #ece8f8; border-radius: 12px;
  padding-left: 12px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.bn-filter:hover { border-color: #d6cdf5; }
.bn-filter:focus-within { border-color: var(--bn-accent); background: #fff; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12); }
.bn-filter__icon { display: inline-flex; color: var(--bn-accent); flex-shrink: 0; }
.bn-select {
  appearance: none; -webkit-appearance: none; border: none; background: transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: #3a2d5a;
  padding: 10px 30px 10px 8px; cursor: pointer; outline: none; max-width: 190px;
}
.bn-select__chevron {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  color: #8b7bb5; pointer-events: none;
}
.bn-view-toggle {
  display: inline-flex; background: #f0ecfa; border: 1px solid #ece8f8;
  border-radius: 12px; padding: 3px; gap: 2px;
}
.bn-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; border: none; background: transparent;
  color: #8b7bb5; border-radius: 9px; cursor: pointer; transition: all .15s;
}
.bn-view-btn:hover { color: var(--bn-accent); }
.bn-view-btn.is-active { background: #fff; color: var(--bn-accent); box-shadow: 0 1px 4px rgba(76,29,149,0.15); }
.bn-view-btn:focus-visible, .bn-select:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .bn-filters { flex-direction: column; align-items: stretch; }
  .bn-filters__group { justify-content: space-between; }
  .bn-filter { flex: 1 1 auto; }
  .bn-select { max-width: none; width: 100%; flex: 1; }
}

/* ---- Cards grid / list ---- */
.bn-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px;
}
.bn-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
@media (max-width: 1024px) { .bn-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 640px) { .bn-grid { grid-template-columns: 1fr; gap: 14px; } }

.bn-card {
  background: #fff; border: 1px solid #e9e5f5; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -16px rgba(76, 29, 149, 0.32);
  border-color: #d6cdf5;
}
.bn-card__body { padding: 18px 20px 14px; display: flex; flex-direction: column; flex: 1; }
.bn-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bn-card__title {
  font-size: 15.5px; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.35;
  flex: 1; min-width: 0;
}
.bn-card__head-tags { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.bn-card__new {
  padding: 3px 9px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
  border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}
.bn-card__cat {
  padding: 3px 10px; background: #f0edfb; color: #6d28d9; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.bn-card__desc {
  font-size: 13.5px; color: #64748b; line-height: 1.55; margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bn-card__budget {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 7px 14px; margin-bottom: 12px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #047857;
  border: 1px solid #a7f3d0; border-radius: 10px;
  font-size: 15px; font-weight: 800; letter-spacing: -0.2px;
}
.bn-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.bn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 20px; font-size: 12px; font-weight: 600;
  max-width: 100%; overflow: hidden;
}
.bn-chip svg { flex-shrink: 0; }
.bn-chip--loc { background: #f1f5f9; color: #475569; }
.bn-chip--loc { white-space: nowrap; }
.bn-chip--resp { background: #eef2ff; color: #4338ca; white-space: nowrap; }
.bn-card__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 20px 18px; padding: 11px 18px;
  background: linear-gradient(135deg, var(--accent), #6d28d9); color: #fff;
  border-radius: 11px; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: filter .15s, box-shadow .15s, transform .15s;
  box-shadow: 0 8px 18px -8px rgba(124, 58, 237, 0.55);
}
.bn-card__cta:hover { filter: brightness(1.06); box-shadow: 0 12px 22px -8px rgba(124, 58, 237, 0.65); }
.bn-card__cta:active { transform: translateY(1px); }
.bn-card__cta:focus-visible { outline: 2px solid #6d28d9; outline-offset: 2px; }
.bn-card__cta svg { transition: transform .18s ease; }
.bn-card:hover .bn-card__cta svg { transform: translateX(3px); }

/* List view: horizontal rows */
.bn-card--list { flex-direction: row; align-items: stretch; }
.bn-card--list .bn-card__body { padding: 18px 22px; }
.bn-card--list .bn-card__budget { margin-bottom: 10px; }
.bn-card--list .bn-card__cta {
  margin: 0; align-self: center; margin-right: 20px; white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 640px) {
  .bn-card--list { flex-direction: column; }
  .bn-card--list .bn-card__cta { margin: 0 20px 18px; align-self: stretch; }
}

/* ---- Empty state ---- */
.bn-empty { padding: 56px 28px; text-align: center; margin-bottom: 24px; }
.bn-empty__title { color: #475569; font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.bn-empty__text { color: #94a3b8; font-size: 14px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .bn-card, .bn-card__cta, .bn-card__cta svg, .bn-view-btn, .bn-filter { transition: none; }
  .bn-card:hover { transform: none; }
  .bn-card:hover .bn-card__cta svg { transform: none; }
}

/* ============================================================
   BUYER MY POSTED NEEDS (redesign) — mn-* classes
   ============================================================ */
.mn-hero {
  background: linear-gradient(115deg, #1e1b4b 0%, #312e81 26%, #4338ca 50%, #6d28d9 80%, var(--accent) 100%);
  border-radius: 24px;
  padding: 34px 36px;
  margin: 24px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(49, 46, 129, 0.55);
}
.mn-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(520px 260px at 90% -20%, rgba(255,255,255,0.20), transparent 62%),
    radial-gradient(360px 220px at 6% 130%, rgba(255,255,255,0.08), transparent 60%);
  pointer-events: none;
}
.mn-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.mn-hero__text { flex: 1 1 auto; min-width: 0; max-width: 620px; }
.mn-hero__title { color: #fff; font-size: 34px; font-weight: 800; margin: 2px 0 8px; letter-spacing: -0.6px; line-height: 1.15; }
.mn-hero__post {
  position: absolute; top: 26px; right: 30px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 12px;
  background: #fff; color: #6d28d9; font-weight: 700; font-size: 14.5px;
  border: 1.5px solid #fff; text-decoration: none;
  box-shadow: 0 6px 18px -6px rgba(15,23,42,0.45);
  white-space: nowrap; transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.mn-hero__post:hover { background: #f3f0ff; box-shadow: 0 10px 24px -8px rgba(15,23,42,0.5); }
.mn-hero__post:active { transform: translateY(1px); }
.mn-hero__post:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mn-hero__art { flex: 0 0 auto; line-height: 0; filter: drop-shadow(0 20px 30px rgba(23, 8, 60, 0.4)); }

.mn-body { position: relative; }

/* Stats strip */
.mn-stats {
  display: flex; align-items: stretch;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin-top: -50px; margin-bottom: 26px; position: relative; z-index: 2;
  overflow: hidden;
}
.mn-stat { flex: 1 1 0; display: flex; align-items: center; gap: 14px; padding: 22px 26px; min-width: 0; }
.mn-stat__sep { width: 1px; background: #eef2f7; align-self: stretch; margin: 14px 0; }
.mn-stat__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
}
.mn-stat__icon--purple { background: #f0f4ff; color: #6d28d9; }
.mn-stat__icon--green { background: #f0fdf4; color: #16a34a; }
.mn-stat__icon--blue { background: #eff6ff; color: var(--primary); }
.mn-stat__num { font-size: 24px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.mn-stat__num--green { color: #16a34a; }
.mn-stat__num--blue { color: var(--primary); }
.mn-stat__label { font-size: 14px; font-weight: 700; color: #1e293b; margin-top: 2px; }
.mn-stat__sub { font-size: 12px; color: #94a3b8; margin-top: 1px; }

.mn-empty {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 56px 32px; text-align: center; margin-top: -40px; position: relative; z-index: 2;
}

/* Filter tabs + sort */
.mn-tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.mn-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.mn-tab {
  padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1.5px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer;
  transition: all .15s ease;
}
.mn-tab:hover { border-color: #cbd5e1; }
.mn-tab--active { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.mn-tab--open { border-color: #bbf7d0; color: #16a34a; }
.mn-tab--on-open { background: #16a34a; border-color: #16a34a; color: #fff; }
.mn-tab--fulfilled { border-color: #bfdbfe; color: var(--primary); }
.mn-tab--on-fulfilled { background: var(--primary); border-color: var(--primary); color: #fff; }
.mn-tab:focus-visible { outline: 2px solid #6d28d9; outline-offset: 2px; }

.mn-sort { display: inline-flex; align-items: center; gap: 8px; }
.mn-sort__label { font-size: 13px; color: #64748b; font-weight: 500; }
.mn-sort__select {
  padding: 8px 12px; border-radius: 10px; border: 1.5px solid #e2e8f0;
  font-size: 14px; color: #0f172a; background: #fff; font-weight: 600; cursor: pointer; font-family: inherit;
}
.mn-sort__select:focus-visible { outline: 2px solid #6d28d9; outline-offset: 1px; }
.mn-sort__filter {
  width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid #e2e8f0;
  display: grid; place-items: center; color: #64748b; background: #fff;
}

/* Cards grid */
.mn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mn-empty-filter {
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 14px;
  padding: 40px; text-align: center; color: #64748b; font-size: 15px;
}
.mn-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex; flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease;
}
.mn-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -14px rgba(15,23,42,0.35); }
.mn-card__strip { height: 4px; width: 100%; border-radius: 16px 16px 0 0; }
.mn-card__body { padding: 18px 18px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.mn-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mn-card__title { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0; line-height: 1.3; }
.mn-card__desc {
  font-size: 13.5px; color: #64748b; line-height: 1.5; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mn-card__posted {
  display: flex; align-items: center; gap: 7px;
  background: #f8fafc; border-radius: 8px; padding: 8px 11px;
  font-size: 12.5px; color: #64748b; font-weight: 500; margin-bottom: 12px;
}
.mn-card__posted svg { color: #94a3b8; flex: 0 0 auto; }
.mn-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  background: #f1f5f9; color: #475569;
}
.mn-chip svg { color: #94a3b8; }
.mn-chip--budget { background: #f0fdf4; color: #15803d; }
.mn-chip--budget svg { color: #16a34a; }
.mn-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid #f1f5f9;
}
.mn-card__view {
  display: inline-flex; align-items: center; gap: 5px;
  color: #6d28d9; font-size: 14px; font-weight: 700; text-decoration: none;
}
.mn-card__view:hover { text-decoration: underline; }
.mn-card__view svg { transition: transform .15s ease; }
.mn-card__view:hover svg { transform: translateX(2px); }

/* 3-dot menu */
.mn-menu { position: relative; }
.mn-menu__trigger {
  width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid #e2e8f0;
  background: #fff; color: #64748b; display: grid; place-items: center; cursor: pointer;
}
.mn-menu__trigger:hover { background: #f8fafc; color: #334155; }
.mn-menu__trigger:focus-visible { outline: 2px solid #6d28d9; outline-offset: 1px; }
.mn-menu__pop {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30;
  min-width: 196px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(15,23,42,0.35); padding: 6px;
  animation: mn-pop .12s ease;
}
@keyframes mn-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.mn-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: 8px; border: none; background: none;
  font-size: 13.5px; font-weight: 600; color: #334155; cursor: pointer; text-align: left;
}
.mn-menu__item svg { color: #94a3b8; flex: 0 0 auto; }
.mn-menu__item:hover { background: #f4f4ff; color: #4338ca; }
.mn-menu__item:hover svg { color: #6d28d9; }
.mn-menu__item--danger { color: #dc2626; }
.mn-menu__item--danger svg { color: #f87171; }
.mn-menu__item--danger:hover { background: #fef2f2; color: #dc2626; }
.mn-menu__item--danger:hover svg { color: #dc2626; }
.mn-menu__divider { height: 1px; background: #f1f5f9; margin: 5px 4px; }

/* Bottom banner */
.mn-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 22px 26px; margin-top: 26px;
}
.mn-banner__left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mn-banner__rocket {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ede9fe, #dbeafe); color: #6d28d9;
}
.mn-banner__title { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0 0 3px; }
.mn-banner__sub { font-size: 13.5px; color: #64748b; margin: 0; max-width: 620px; }
.mn-banner__btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 12px 22px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #6d28d9, #4338ca); color: #fff; font-weight: 700; font-size: 14.5px;
  transition: filter .15s ease, transform .15s ease;
}
.mn-banner__btn:hover { filter: brightness(1.07); }
.mn-banner__btn:active { transform: translateY(1px); }
.mn-banner__btn:focus-visible { outline: 2px solid #4338ca; outline-offset: 2px; }

/* Toast */
.mn-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200;
  background: #0f172a; color: #fff; padding: 12px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 600; box-shadow: 0 16px 40px -10px rgba(0,0,0,0.5);
  animation: mn-toast-in .18s ease;
}
@keyframes mn-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Confirm / analytics modal */
.mn-modal__overlay {
  position: fixed; inset: 0; z-index: 150; background: rgba(15,23,42,0.55);
  display: grid; place-items: center; padding: 20px; animation: mn-fade .15s ease;
}
@keyframes mn-fade { from { opacity: 0; } to { opacity: 1; } }
.mn-modal {
  width: 100%; max-width: 440px; background: #fff; border-radius: 18px;
  padding: 26px; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5); animation: mn-pop .16s ease;
}
.mn-modal--wide { max-width: 560px; }
.mn-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mn-modal__title { font-size: 19px; font-weight: 800; color: #0f172a; margin: 0; }
.mn-modal__title--danger { color: #dc2626; }
.mn-modal__x { border: none; background: none; color: #94a3b8; cursor: pointer; padding: 4px; border-radius: 8px; }
.mn-modal__x:hover { background: #f1f5f9; color: #334155; }
.mn-modal__body { font-size: 14.5px; color: #475569; line-height: 1.55; margin: 12px 0 8px; }
.mn-modal__need { font-size: 14px; color: #0f172a; font-weight: 700; margin: 6px 0 0; }
.mn-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.mn-btn {
  padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
  border: 1.5px solid transparent;
}
.mn-btn:disabled { opacity: 0.6; cursor: default; }
.mn-btn--ghost { background: #fff; border-color: #e2e8f0; color: #475569; }
.mn-btn--ghost:hover:not(:disabled) { background: #f8fafc; }
.mn-btn--primary { background: linear-gradient(135deg, #6d28d9, #4338ca); color: #fff; }
.mn-btn--primary:hover:not(:disabled) { filter: brightness(1.07); }
.mn-btn--danger { background: #dc2626; color: #fff; }
.mn-btn--danger:hover:not(:disabled) { background: #b91c1c; }

.mn-metrics { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0 8px; }
.mn-metric { flex: 1 1 120px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 14px 16px; }
.mn-metric__num { font-size: 20px; font-weight: 800; color: #0f172a; }
.mn-metric__label { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.mn-resp-list { list-style: none; margin: 14px 0 0; padding: 0; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mn-resp { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: #f8fafc; border-radius: 10px; }
.mn-resp__name { font-size: 14px; font-weight: 700; color: #1e293b; }
.mn-resp__meta { font-size: 13px; color: #64748b; font-weight: 600; white-space: nowrap; }

/* Tips drawer */
.mn-drawer { position: fixed; inset: 0; z-index: 160; pointer-events: none; }
.mn-drawer__scrim { position: absolute; inset: 0; background: rgba(15,23,42,0.5); opacity: 0; transition: opacity .22s ease; }
.mn-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw;
  background: #fff; box-shadow: -20px 0 60px -20px rgba(0,0,0,0.4);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; padding: 24px;
}
.mn-drawer--open { pointer-events: auto; }
.mn-drawer--open .mn-drawer__scrim { opacity: 1; }
.mn-drawer--open .mn-drawer__panel { transform: translateX(0); }
.mn-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mn-drawer__title { font-size: 19px; font-weight: 800; color: #0f172a; margin: 0; }
.mn-drawer__x { border: none; background: none; color: #94a3b8; cursor: pointer; padding: 4px; border-radius: 8px; }
.mn-drawer__x:hover { background: #f1f5f9; color: #334155; }
.mn-drawer__section { padding: 18px 0; border-top: 1px solid #f1f5f9; }
.mn-drawer__section:first-of-type { border-top: none; }
.mn-drawer__h { font-size: 14px; font-weight: 800; color: #1e293b; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.mn-drawer__scored { font-size: 13px; color: #64748b; margin: 0 0 12px; }
.mn-tip-list, .mn-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mn-tip { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #334155; line-height: 1.4; }
.mn-tip svg { flex: 0 0 auto; margin-top: 2px; }
.mn-quality { display: flex; align-items: flex-start; gap: 18px; }
.mn-ring { flex: 0 0 auto; }
.mn-ring__pct { font-size: 15px; font-weight: 800; fill: #0f172a; }
.mn-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.35; }
.mn-check svg { flex: 0 0 auto; margin-top: 1px; }
.mn-check--pass { color: #334155; }
.mn-check--fail { color: #94a3b8; }
.mn-ai-box { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 16px; }
.mn-ai-box__text { font-size: 13.5px; color: #64748b; margin: 0 0 12px; line-height: 1.5; }

/* Responsive */
@media (max-width: 1024px) {
  .mn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .mn-stats { flex-wrap: wrap; }
  .mn-stat { flex: 1 1 45%; }
  .mn-stat__sep { display: none; }
}
@media (max-width: 720px) {
  .mn-hero { padding: 22px 20px 24px; margin: 16px 0; border-radius: 18px; display: flex; flex-direction: column; }
  .mn-hero__title { font-size: 26px; }
  .mn-hero__art { display: none; }
  .mn-hero__post { position: static; order: 2; margin-top: 18px; width: 100%; justify-content: center; }
  .mn-hero__inner { order: 1; flex-direction: column; align-items: flex-start; }
  .mn-grid { grid-template-columns: 1fr; }
  .mn-stat { flex: 1 1 100%; }
  .mn-tabs-row { align-items: stretch; }
  .mn-banner { flex-direction: column; align-items: flex-start; }
  .mn-banner__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mn-card, .mn-card__view svg, .mn-hero__post, .mn-banner__btn, .mn-drawer__panel, .mn-drawer__scrim { transition: none; }
  .mn-menu__pop, .mn-modal, .mn-toast, .mn-modal__overlay { animation: none; }
  .mn-card:hover { transform: none; }
}

/* ============================================================
   SELLER NEED DETAIL (redesign) — nd2-* classes
   ============================================================ */
.nd2 { --nd2-purple: var(--accent); --nd2-purple-2: #6d28d9; --nd2-ink: #1e1b4b; }
.nd2-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 16px;
  color: #64748b; font-size: 14px; font-weight: 600; text-decoration: none;
  transition: color .16s ease;
}
.nd2-back:hover { color: var(--nd2-purple); }

/* Hero */
.nd2-hero {
  position: relative; overflow: hidden; border-radius: 20px; margin-bottom: 24px;
  padding: 30px 34px;
  background: linear-gradient(135deg, var(--accent) 0%, #6d28d9 45%, #4c1d95 100%);
  color: #fff; display: flex; align-items: center; gap: 20px;
  box-shadow: 0 20px 44px -20px rgba(76, 29, 149, 0.75);
}
.nd2-hero::before {
  content: ''; position: absolute; top: -60px; right: 120px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 68%); pointer-events: none;
}
.nd2-hero__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.nd2-hero__eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.nd2-hero__eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: #e9d5ff;
}
.nd2-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; text-transform: capitalize;
}
.nd2-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nd2-status--open { background: rgba(220,252,231,0.95); color: #16a34a; }
.nd2-status--closed { background: rgba(241,245,249,0.9); color: #64748b; }
.nd2-hero__title { font-size: 30px; font-weight: 800; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.5px; }
.nd2-hero__subtitle { font-size: 15px; color: rgba(255,255,255,0.86); margin: 0 0 16px; max-width: 620px; line-height: 1.5; }
.nd2-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.nd2-hchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.16); color: #fff; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(4px);
}
.nd2-hchip svg { opacity: 0.9; }
.nd2-hero__buyer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nd2-hero__avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.25); color: #fff; font-weight: 700; font-size: 13px;
}
.nd2-hero__buyer-name { font-size: 14px; color: rgba(255,255,255,0.92); }
.nd2-hero__buyer-name strong { color: #fff; }
.nd2-verified {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  background: rgba(220,252,231,0.95); color: #16a34a; font-size: 12px; font-weight: 700;
}
.nd2-verified--sm { padding: 2px 8px; font-size: 11px; margin-top: 4px; }
.nd2-hero__art { position: relative; z-index: 1; flex-shrink: 0; }
@media (max-width: 640px) { .nd2-hero__art { display: none; } .nd2-hero { padding: 24px 20px; } .nd2-hero__title { font-size: 24px; } }

/* Layout */
.nd2-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .nd2-layout { grid-template-columns: 1fr; } }
.nd2-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.nd2-side { display: flex; flex-direction: column; gap: 18px; }

/* Cards */
.nd2-card {
  background: #fff; border: 1px solid #eef1f6; border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 6px 18px -12px rgba(30, 27, 75, 0.2);
}
.nd2-card__title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: #1e293b; margin: 0 0 14px; }
.nd2-desc { font-size: 14.5px; color: #475569; line-height: 1.65; margin: 0 0 14px; white-space: pre-line; }
.nd2-metarow { display: flex; flex-wrap: wrap; gap: 8px; }
.nd2-tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #ede9fe; color: #6d28d9; }
.nd2-tag--soft { background: #f1f5f9; color: #475569; }
.nd2-tag--green { background: #dcfce7; color: #16a34a; }
.nd2-card--note { display: flex; align-items: center; gap: 12px; color: #475569; font-size: 14px; }
.nd2-card--note p { margin: 0; }

/* Proposal form */
.nd2-field { display: flex; flex-direction: column; gap: 6px; position: relative; margin-bottom: 14px; }
.nd2-field__label { font-size: 13px; font-weight: 600; color: #334155; }
.nd2-input {
  width: 100%; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 11px 13px;
  font-size: 14px; color: #1e293b; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
.nd2-input:focus-visible { outline: none; border-color: var(--nd2-purple); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
.nd2-textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.nd2-counter { position: absolute; right: 4px; bottom: -18px; font-size: 11.5px; color: #94a3b8; }
.nd2-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .nd2-field-grid { grid-template-columns: 1fr; } }
.nd2-submit {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 6px; border: none; cursor: pointer; padding: 13px 20px; border-radius: 11px;
  font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  box-shadow: 0 12px 24px -10px rgba(124,58,237,0.7); transition: filter .16s ease, transform .12s ease;
}
.nd2-submit:hover { filter: brightness(1.06); }
.nd2-submit:active { transform: translateY(1px); }
.nd2-submit:focus-visible { outline: 2px solid #4c1d95; outline-offset: 2px; }

/* Responses */
.nd2-empty { text-align: center; padding: 30px 16px; }
.nd2-empty__icon { width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 50%; background: #f5f3ff; display: grid; place-items: center; }
.nd2-empty__text { color: #94a3b8; font-size: 14px; margin: 0; max-width: 320px; margin: 0 auto; line-height: 1.5; }
.nd2-responses { display: flex; flex-direction: column; gap: 12px; }
.nd2-response { border: 1px solid #eef1f6; border-radius: 12px; padding: 14px 16px; }
.nd2-response--accepted { border-color: #bbf7d0; background: #f0fdf4; }
.nd2-response__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.nd2-response__avatar { width: 30px; height: 30px; border-radius: 50%; background: #ede9fe; color: #6d28d9; font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.nd2-response__name { font-size: 14px; font-weight: 700; color: #1e293b; flex: 1; min-width: 0; }
.nd2-response__status { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.nd2-response__msg { font-size: 14px; color: #475569; line-height: 1.55; margin: 0 0 10px; }

/* Sidebar */
.nd2-side__title { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0 0 14px; }
.nd2-buyer { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.nd2-buyer__avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,var(--accent),#6d28d9); color: #fff; font-weight: 700; font-size: 16px; display: grid; place-items: center; flex-shrink: 0; }
.nd2-buyer__name { font-size: 15px; font-weight: 700; color: #1e293b; }
.nd2-stats { display: flex; flex-direction: column; }
.nd2-stat { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid #f1f5f9; font-size: 13.5px; }
.nd2-stat:first-child { border-top: none; }
.nd2-stat span { color: #64748b; }
.nd2-stat strong { color: #1e293b; font-weight: 700; text-align: right; }
.nd2-thumbs { display: inline-flex; align-items: center; gap: 4px; color: #16a34a; }
.nd2-thumbs strong { color: #16a34a; }
.nd2-thumbs__count { color: #94a3b8; font-weight: 600; font-size: 12px; }
.nd2-tips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.nd2-tips li { position: relative; padding-left: 22px; font-size: 13.5px; color: #475569; line-height: 1.45; }
.nd2-tips li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--nd2-purple); }
.nd2-tip-highlight { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 10px; background: #fef3c7; color: #92400e; font-size: 13px; font-weight: 600; line-height: 1.4; }
.nd2-tip-highlight svg { flex-shrink: 0; margin-top: 1px; color: #f59e0b; }
.nd2-safety { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nd2-safety li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #475569; }
.nd2-safety__ic { width: 20px; height: 20px; border-radius: 50%; background: #dcfce7; color: #16a34a; font-weight: 800; font-size: 12px; display: grid; place-items: center; flex-shrink: 0; }
.nd2-safety__link { font-size: 13.5px; font-weight: 600; color: var(--nd2-purple); text-decoration: none; }
.nd2-safety__link:hover { text-decoration: underline; }

/* Similar needs */
.nd2-similar { margin-top: 26px; }
.nd2-similar__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.nd2-similar__title { font-size: 19px; font-weight: 800; color: #1e293b; margin: 0; }
.nd2-similar__all { font-size: 14px; font-weight: 600; color: var(--nd2-purple); text-decoration: none; white-space: nowrap; }
.nd2-similar__all:hover { text-decoration: underline; }
.nd2-similar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .nd2-similar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .nd2-similar__grid { grid-template-columns: 1fr; } }
.nd2-sim-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid #eef1f6; border-radius: 14px; padding: 18px 18px 16px;
  text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.nd2-sim-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(30,27,75,0.4); border-color: #ddd6fe; }
.nd2-sim-card__new { position: absolute; top: 12px; right: 12px; background: #16a34a; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 6px; }
.nd2-sim-card__title { font-size: 14.5px; font-weight: 700; color: #1e293b; margin: 0; padding-right: 44px; line-height: 1.3; }
.nd2-sim-card__desc { font-size: 12.5px; color: #94a3b8; margin: 0; line-height: 1.45; min-height: 18px; }
.nd2-sim-card__cta { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--nd2-purple); }

@media (prefers-reduced-motion: reduce) {
  .nd2-back, .nd2-submit, .nd2-sim-card { transition: none; }
  .nd2-sim-card:hover { transform: none; }
}

/* ============================================================
   NEED DETAIL PAGE — nd-* classes
   ============================================================ */
/* Skeleton — CLS-safe placeholders matching actual page structure */
.nd-hero--skeleton { min-height: 120px; }
.nd-skel {
  background: #e2e8f0; border-radius: 8px; height: 14px; margin-bottom: 12px;
  animation: ndShimmer 1.4s ease-in-out infinite;
}
.nd-skel--sm { height: 12px; }
.nd-skel--hero-eyebrow { width: 30%; height: 12px; background: rgba(255,255,255,0.15); margin-bottom: 14px; border-radius: 6px; animation: ndShimmer 1.4s ease-in-out infinite; }
.nd-skel--hero-title { width: 70%; height: 24px; background: rgba(255,255,255,0.2); border-radius: 8px; animation: ndShimmer 1.4s ease-in-out infinite; }
.nd-skel--w25 { width: 25%; }
.nd-skel--w35 { width: 35%; }
.nd-skel--w60 { width: 60%; }
.nd-skel--w85 { width: 85%; }
.nd-skel--w100 { width: 100%; }
.nd-skel--textarea { width: 100%; height: 80px; border-radius: 10px; }
.nd-skel--input { height: 44px; border-radius: 10px; }
.nd-skel--btn { height: 48px; width: 160px; border-radius: 12px; margin-top: 8px; }
.nd-skel__chips-row { display: flex; gap: 8px; flex-wrap: wrap; }
.nd-skel__chip {
  width: 100px; height: 32px; border-radius: 20px; background: #e2e8f0;
  animation: ndShimmer 1.4s ease-in-out infinite;
}
.nd-skel__grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
@keyframes ndShimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Hero */
.nd-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #312e81 70%, #1e40af 100%);
  border-radius: 0 0 24px 24px;
  padding: 36px 32px 32px;
  margin-bottom: 24px;
}
.nd-hero__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 16px;
}
.nd-hero__text { flex: 1; min-width: 0; }
.nd-hero__eyebrow-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.nd-hero__eyebrow {
  color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; margin: 0;
}
.nd-hero__title {
  color: #fff; font-size: 28px; font-weight: 700; margin: 0;
  letter-spacing: -0.3px; line-height: 1.3;
}
.nd-hero__actions {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.nd-hero__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; background: rgba(255,255,255,0.15);
  color: #fff; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25);
  font-size: 14px; font-weight: 500; cursor: pointer;
  font-family: inherit; transition: background 0.15s;
}
.nd-hero__btn:hover { background: rgba(255,255,255,0.25); }
.nd-hero__btn--danger {
  background: rgba(220,38,38,0.2); color: #fca5a5;
  border-color: rgba(220,38,38,0.3);
}
.nd-hero__btn--danger:hover { background: rgba(220,38,38,0.35); }

/* Cards */
.nd-card {
  background: #fff; border-radius: 16px; border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 20px;
}
.nd-card--pad { padding: 28px; }
.nd-chips-card {
  padding: 20px 28px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.nd-textarea { resize: vertical; min-height: 80px; }

/* Buyer card */
.nd-buyer-card {
  padding: 16px 28px; display: flex; align-items: center; gap: 10px;
}
.nd-buyer-card__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  display: flex; align-items: center; justify-content: center;
  color: #4338ca; font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.nd-buyer-card__name { color: #0f172a; margin-left: 6px; font-size: 15px; }

/* Accepted card */
.nd-accepted-card { padding: 0; overflow: hidden; border-color: #bbf7d0; }
.nd-accepted-card__header {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  padding: 14px 24px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #bbf7d0;
}
.nd-accepted-card__icon {
  width: 28px; height: 28px; border-radius: 50%; background: #16a34a;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nd-accepted-card__body {
  padding: 24px; display: flex; justify-content: space-between;
  align-items: flex-start; flex-wrap: wrap; gap: 16px;
}

/* Response articles */
.nd-responses__list { display: flex; flex-direction: column; gap: 14px; }
.nd-responses__empty-text { color: #94a3b8; font-size: 15px; margin: 0; }
.nd-response {
  background: #f8fafc; border-radius: 14px; border: 1px solid #e2e8f0; padding: 20px 24px;
}
.nd-response--accepted { background: #f0fdf4; border: 1.5px solid #bbf7d0; }
.nd-response__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 10px;
}
.nd-response__seller-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nd-response__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  display: flex; align-items: center; justify-content: center;
  color: #64748b; font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.nd-response__avatar--accepted {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a;
}
.nd-response__name {
  font-size: 16px; font-weight: 600; color: #0f172a; margin: 0;
}
.nd-response__status {
  padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
/* Accept button — prominent CTA */
.nd-accept-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; background: #16a34a; color: #fff;
  border-radius: 12px; border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(22,163,74,0.25);
}
.nd-accept-btn:hover {
  background: #15803d; box-shadow: 0 4px 14px rgba(22,163,74,0.35);
}
.nd-accept-btn:active {
  transform: scale(0.97); background: #14532d;
}
.nd-accept-btn__icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.2); flex-shrink: 0;
}

/* ============================================================
   NEED DETAIL — Mobile responsive
   ============================================================ */
@media (max-width: 768px) {
  .nd-hero {
    border-radius: 0; padding: 24px 16px 20px; margin-bottom: 16px;
  }
  .nd-hero__head { flex-direction: column; gap: 12px; }
  .nd-hero__title { font-size: 22px; }
  .nd-hero__actions {
    flex-direction: row; flex-wrap: wrap; gap: 8px; width: 100%;
  }
  .nd-hero__btn {
    flex: 1 1 0; justify-content: center; padding: 10px 14px; font-size: 13px;
    min-width: 0;
  }

  .nd-card {
    border-radius: 12px; margin-bottom: 12px;
  }
  .nd-card--pad { padding: 20px 16px; }
  .nd-chips-card { padding: 16px; gap: 8px; }

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

  .nd-buyer-card { padding: 14px 16px; gap: 8px; }
  .nd-buyer-card__avatar { width: 32px; height: 32px; font-size: 13px; }
  .nd-buyer-card__name { font-size: 14px; }

  .needs-inner--narrow { padding: 0 12px; }
  .needs-grid-2 { grid-template-columns: 1fr; gap: 12px; }

  .nd-accepted-card__header { padding: 12px 16px; }
  .nd-accepted-card__body { padding: 16px; flex-direction: column; }

  .nd-response { padding: 16px; border-radius: 12px; }
  .nd-response__header { flex-direction: column; gap: 8px; }
  .nd-response__seller-info { gap: 8px; }
  .nd-response__avatar { width: 32px; height: 32px; font-size: 13px; }
  .nd-response__name { font-size: 14px; }
  .nd-accept-btn {
    width: 100%; justify-content: center; padding: 12px 20px;
    font-size: 14px; border-radius: 10px;
  }
  .nd-accept-btn__icon { width: 24px; height: 24px; }
  .nd-responses__list { gap: 10px; }

  .needs-btn-primary { padding: 11px 20px; font-size: 14px; width: 100%; justify-content: center; }
  .needs-btn-secondary { padding: 10px 16px; font-size: 13px; }

  .needs-input { padding: 10px 14px; font-size: 14px; }
  .nd-textarea { min-height: 70px; }

  /* Skeleton mobile */
  .nd-skel__chip { width: 80px; height: 28px; }
  .nd-skel__grid-2 { grid-template-columns: 1fr; gap: 12px; }
  .nd-skel--btn { width: 100%; }
  .nd-hero--skeleton { min-height: 90px; }
}

@media (max-width: 480px) {
  .nd-hero { padding: 18px 12px 16px; margin-bottom: 12px; }
  .nd-hero__eyebrow { font-size: 11px; }
  .nd-hero__title { font-size: 18px; line-height: 1.35; }
  .nd-hero__btn { padding: 8px 12px; font-size: 12px; border-radius: 8px; }

  .nd-card { border-radius: 10px; margin-bottom: 10px; }
  .nd-card--pad { padding: 16px 12px; }
  .nd-chips-card { padding: 12px; }

  .needs-chip { font-size: 11px; padding: 4px 8px; gap: 4px; }

  .nd-buyer-card { padding: 12px; }

  .nd-response { padding: 14px 12px; }
  .nd-response__status { font-size: 11px; padding: 2px 8px; }

  .needs-inner--narrow { padding: 0 8px; }
}

/* ============================================================
   SELLER DASHBOARD — PREMIUM REDESIGN (scoped .sdash-x)
   Layers on top of base .sdash__* without affecting Earnings/
   Subscription pages (which reuse .sdash__* globally).
   Native CSS keyframes + inline SVG — no external libs.
   ============================================================ */

.sdash-x {
  --sx-indigo: var(--indigo-light);
  --sx-cyan: #22d3ee;
  --sx-ink: #0f172a;
  --sx-radius: 18px;
  --sx-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
  --sx-shadow-lift: 0 22px 48px -18px rgba(79, 70, 229, 0.30);
  --sx-border: 1px solid rgba(226, 232, 240, 0.9);
}

/* ── Entrance animations ── */
.sdash-x .sdash-x__enter {
  opacity: 0;
  animation: sdashUp 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sdash-x .sdash-x__row {
  opacity: 0;
  animation: sdashRow 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sdashUp {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes sdashRow {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── Premium hero ── */
.sdash-x .sdash__hero {
  background:
    radial-gradient(1200px 380px at 15% -10%, rgba(99, 102, 241, 0.55), transparent 60%),
    radial-gradient(900px 340px at 90% 0%, rgba(34, 211, 238, 0.30), transparent 55%),
    linear-gradient(135deg, #0b1020 0%, #16213e 48%, #1e3a8a 100%);
  overflow: hidden;
  isolation: isolate;
}
.sdash-x .sdash__hero-inner { position: relative; z-index: 3; }
.sdash-x .sdash__hero-title {
  background: linear-gradient(120deg, #ffffff 0%, #e0e7ff 45%, #a5f3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.35rem;
}
.sdash-x .sdash__hero-btn { transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; position: relative; overflow: hidden; }
.sdash-x .sdash__hero-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.5); }
.sdash-x .sdash__hero-btn--solid:hover { box-shadow: 0 16px 32px -14px rgba(165, 243, 252, 0.6); }

/* Floating background blobs */
.sdash-x__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.sdash-x__blob--1 {
  width: 320px; height: 320px;
  top: -90px; left: -60px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.9), transparent 70%);
  animation: sdashFloat 14s ease-in-out infinite;
}
.sdash-x__blob--2 {
  width: 260px; height: 260px;
  bottom: -110px; right: -40px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.75), transparent 70%);
  animation: sdashFloat 18s ease-in-out infinite reverse;
}
@keyframes sdashFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(24px, -28px, 0) scale(1.08); }
}
.sdash-x__grid-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
}

/* ── Glassy stat card + hover ── */
.sdash-x .sdash__stats-card {
  border-radius: var(--sx-radius);
  border: var(--sx-border);
  box-shadow: var(--sx-shadow);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}
.sdash-x .sdash__stat { transition: transform 0.18s ease, background 0.18s ease; }
.sdash-x .sdash__stat:hover { transform: translateY(-3px); background: #f5f7ff; }
.sdash-x .sdash__stat-icon { color: #fff; box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.4); }
.sdash-x__stat-icon--green { background: linear-gradient(135deg, #22c55e, #15803d); }
.sdash-x__stat-icon--amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.sdash-x__stat-icon--star  { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.sdash-x__stat-icon--red   { background: linear-gradient(135deg, #f87171, #dc2626); }

/* ── Quick cards hover lift/glow ── */
.sdash-x .sdash__quick {
  border-radius: 14px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sdash-x .sdash__quick:hover {
  transform: translateY(-4px);
  border-color: var(--sx-indigo);
  box-shadow: var(--sx-shadow-lift);
}
.sdash-x .sdash__quick-icon {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  color: var(--sx-indigo);
  transition: transform 0.2s ease;
}
.sdash-x .sdash__quick:hover .sdash__quick-icon { transform: scale(1.1) rotate(-4deg); }

/* ── Premium panels ── */
.sdash-x .sdash__panel {
  border-radius: var(--sx-radius);
  border: var(--sx-border);
  box-shadow: var(--sx-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sdash-x .sdash__panel:hover { box-shadow: var(--sx-shadow-lift); }
.sdash-x .sdash__row-item,
.sdash-x .sdash__lead { transition: transform 0.16s ease, background 0.16s ease; }
.sdash-x .sdash__row-item:hover,
.sdash-x .sdash__lead:hover { transform: translateX(3px); }
.sdash-x .sdash__badge { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }

/* ── Revenue analytics panel ── */
.sdash-x__analytics { background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%); }
.sdash-x__analytics-grid {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  gap: 28px;
  align-items: center;
  padding: 22px 24px 26px;
}
.sdash-x__analytics-donut { display: flex; justify-content: center; }
.sdash-x__analytics-total { margin-bottom: 16px; }
.sdash-x__analytics-total-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}
.sdash-x__analytics-total-num {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--sx-ink);
  letter-spacing: -0.02em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ── Donut ── */
.sdash-x__donut-wrap { position: relative; width: 150px; height: 150px; }
.sdash-x__donut { width: 150px; height: 150px; transform: rotate(-90deg); }
.sdash-x__donut-track { fill: none; stroke: #eef2f7; stroke-width: 12; }
.sdash-x__donut-val {
  fill: none;
  stroke: url(#sdashDonutGrad);
  stroke-width: 12;
  stroke-linecap: round;
  animation: sdashDonut 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sdashDonut {
  from { stroke-dashoffset: var(--sdash-donut-c); }
}
.sdash-x__donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sdash-x__donut-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sx-ink);
  font-variant-numeric: tabular-nums;
}
.sdash-x__donut-cap {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

/* ── Bars ── */
.sdash-x__bars { display: flex; flex-direction: column; gap: 14px; }
.sdash-x__bar-head { display: flex; justify-content: space-between; margin-bottom: 5px; }
.sdash-x__bar-label { font-size: 0.8rem; color: #64748b; font-weight: 500; }
.sdash-x__bar-val { font-size: 0.82rem; font-weight: 700; color: var(--sx-ink); font-variant-numeric: tabular-nums; }
.sdash-x__bar-track {
  height: 10px;
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
}
.sdash-x__bar-fill {
  height: 100%;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: sdashBar 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sdashBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sdash-x__bar-fill--green  { background: linear-gradient(90deg, #22c55e, #4ade80); }
.sdash-x__bar-fill--indigo { background: linear-gradient(90deg, var(--indigo-light), #818cf8); }
.sdash-x__bar-fill--amber  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* ── Sparkline ── */
.sdash-x__analytics-spark { display: flex; flex-direction: column; gap: 6px; }
.sdash-x__spark-cap {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}
.sdash-x__spark { width: 100%; height: 68px; overflow: visible; }
.sdash-x__spark-area { fill: url(#sdashSparkFill); opacity: 0; animation: sdashFade 0.8s ease 0.5s forwards; }
.sdash-x__spark-line {
  fill: none;
  stroke: var(--sx-indigo);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sdashDraw 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
@keyframes sdashDraw { to { stroke-dashoffset: 0; } }
@keyframes sdashFade { to { opacity: 1; } }
.sdash-x__spark-dot { fill: #fff; stroke: var(--sx-indigo); stroke-width: 2; opacity: 0; animation: sdashPop 0.4s ease both; }
@keyframes sdashPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

/* ── Inline empty states ── */
.sdash-x__empty-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 0 30px;
}
.sdash-x__empty-inline-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color: #94a3b8;
}
.sdash-x__empty-inline .sdash__panel-empty { padding: 0; }

/* ── Ripple ── */
.sdash-x__ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  animation: sdashRipple 0.6s ease-out;
  pointer-events: none;
}
@keyframes sdashRipple { to { transform: scale(2.4); opacity: 0; } }

/* ── Skeleton loading ── */
.sdash-x__skel { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 20px; }
.sdash-x__skel > *, .sdash-x__skel-card, .sdash-x__skel-quickcard, .sdash-x__skel-panel {
  background: linear-gradient(100deg, #eef2f7 30%, #f8fafc 50%, #eef2f7 70%);
  background-size: 200% 100%;
  border-radius: 16px;
  animation: sdashShimmer 1.4s ease-in-out infinite;
}
.sdash-x__skel-hero { height: 200px; border-radius: 20px; }
.sdash-x__skel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: none; animation: none; }
.sdash-x__skel-card { height: 84px; }
.sdash-x__skel-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; background: none; animation: none; }
.sdash-x__skel-quickcard { height: 96px; }
.sdash-x__skel-panel { height: 220px; }
.sdash-x__skel-panel--tall { height: 260px; }
.sdash-x__skel-two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; background: none; animation: none; }
@keyframes sdashShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sdash-x__analytics-grid { grid-template-columns: 1fr; gap: 22px; }
  .sdash-x__analytics-donut { justify-content: flex-start; }
  .sdash-x__skel-stats { grid-template-columns: repeat(2, 1fr); }
  .sdash-x__skel-quick { grid-template-columns: repeat(3, 1fr); }
  .sdash-x__skel-two { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sdash-x .sdash__hero-title { font-size: 1.6rem; }
  .sdash-x__analytics-grid { padding: 18px 16px 22px; }
  .sdash-x__skel-quick { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sdash-x .sdash-x__enter,
  .sdash-x .sdash-x__row,
  .sdash-x__blob,
  .sdash-x__donut-val,
  .sdash-x__bar-fill,
  .sdash-x__spark-line,
  .sdash-x__spark-area,
  .sdash-x__spark-dot,
  .sdash-x__skel,
  .sdash-x__skel-card,
  .sdash-x__skel-quickcard,
  .sdash-x__skel-panel {
    animation: none !important;
  }
  .sdash-x .sdash-x__enter,
  .sdash-x .sdash-x__row { opacity: 1; transform: none; }
  .sdash-x__bar-fill { transform: scaleX(1); }
  .sdash-x__spark-line { stroke-dashoffset: 0; }
  .sdash-x__spark-area, .sdash-x__spark-dot { opacity: 1; }
  .sdash-x .sdash__stat:hover,
  .sdash-x .sdash__quick:hover,
  .sdash-x .sdash__row-item:hover,
  .sdash-x .sdash__lead:hover,
  .sdash-x .sdash__hero-btn:hover { transform: none; }
}

/* ============================================================
   SELLER DASHBOARD — FROM-SCRATCH BENTO REDESIGN (scoped .sdx)
   Layers over .sdash-x primitives. Distinct topbar + bento grid
   + dark spotlight tile aesthetic (Vercel / Arc / Linear).
   Native CSS keyframes + inline SVG — no external libs.
   ============================================================ */

.sdash-x.sdx {
  --sdx-bg: #f6f7fb;
  --sdx-card: #ffffff;
  --sdx-ink: #0b1120;
  --sdx-muted: #64748b;
  --sdx-faint: #94a3b8;
  --sdx-line: rgba(226, 232, 240, 0.85);
  --sdx-radius: 22px;
  --sdx-radius-sm: 15px;
  --sdx-shadow: 0 12px 34px -18px rgba(15, 23, 42, 0.28);
  --sdx-shadow-lift: 0 26px 60px -22px rgba(79, 70, 229, 0.35);
  --sdx-indigo: var(--indigo-light);
  --sdx-violet: #8b5cf6;
  --sdx-cyan: #06b6d4;
  --sdx-emerald: #10b981;
  --sdx-amber: #f59e0b;
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 18px 64px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(99, 102, 241, 0.07), transparent 60%),
    radial-gradient(760px 380px at 6% 4%, rgba(6, 182, 212, 0.06), transparent 58%);
}

/* ── Topbar ── */
.sdx .sdx__topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 4px 2px 2px;
}
.sdx .sdx__topbar-l { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sdx .sdx__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sdx-muted);
}
.sdx .sdx__live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sdx-emerald);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  animation: sdxPulse 2s ease-out infinite;
}
@keyframes sdxPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.sdx .sdx__hello {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sdx-ink);
}
.sdx .sdx__hello-name {
  background: linear-gradient(120deg, var(--indigo-light), #8b5cf6 45%, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sdx .sdx__topbar-r { display: flex; align-items: center; gap: 10px; }
.sdx .sdx__ghost, .sdx .sdx__solid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 13px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.sdx .sdx__ghost {
  background: var(--sdx-card);
  color: var(--sdx-ink);
  border: 1px solid var(--sdx-line);
  box-shadow: 0 2px 10px -6px rgba(15, 23, 42, 0.2);
}
.sdx .sdx__ghost:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(15, 23, 42, 0.28); }
.sdx .sdx__solid {
  background: linear-gradient(120deg, var(--indigo), var(--accent));
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 12px 26px -12px rgba(79, 70, 229, 0.6);
}
.sdx .sdx__solid:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(124, 58, 237, 0.7); }
.sdx .sdx__ghost svg, .sdx .sdx__solid svg { flex: 0 0 auto; }

/* ── Bento hero grid ── */
.sdx .sdx__bento {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.sdx .sdx__tile {
  border-radius: var(--sdx-radius);
  background: var(--sdx-card);
  border: 1px solid var(--sdx-line);
  box-shadow: var(--sdx-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}
.sdx .sdx__tile--spotlight { grid-column: 1; grid-row: 1 / span 2; padding: 26px 26px 20px; display: flex; flex-direction: column; }
.sdx .sdx__tile--donut { grid-column: 2; grid-row: 1 / span 2; padding: 22px; display: flex; flex-direction: column; align-items: center; }
.sdx .sdx__tile--kpi { grid-column: 3; padding: 20px; display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: left; width: 100%; }
.sdx button.sdx__tile { font: inherit; color: inherit; }
.sdx .sdx__tile--kpi:hover, .sdx .sdx__tile--donut:hover { transform: translateY(-3px); box-shadow: var(--sdx-shadow-lift); }

/* Spotlight (dark) */
.sdx .sdx__tile--spotlight {
  background:
    radial-gradient(760px 300px at 12% -20%, rgba(99, 102, 241, 0.5), transparent 60%),
    radial-gradient(600px 320px at 108% 120%, rgba(6, 182, 212, 0.32), transparent 58%),
    linear-gradient(150deg, #0b1020 0%, #131a33 52%, #1b1246 100%);
  border-color: rgba(99, 102, 241, 0.28);
  color: #e2e8f0;
  isolation: isolate;
}
.sdx .sdx__aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.55;
  z-index: 0;
  animation: sdxFloat 16s ease-in-out infinite;
  pointer-events: none;
}
.sdx .sdx__aurora--1 { width: 240px; height: 240px; top: -70px; right: -50px; background: radial-gradient(circle, var(--indigo-light), transparent 70%); }
.sdx .sdx__aurora--2 { width: 200px; height: 200px; bottom: -60px; left: -40px; background: radial-gradient(circle, #06b6d4, transparent 70%); animation-delay: -5s; }
.sdx .sdx__aurora--3 { width: 160px; height: 160px; top: 40%; right: 20%; background: radial-gradient(circle, #a855f7, transparent 70%); opacity: 0.35; animation-delay: -9s; }
@keyframes sdxFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -18px, 0) scale(1.08); }
}
.sdx .sdx__spot-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.sdx .sdx__spot-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #a5b4fc;
}
.sdx .sdx__spot-eyebrow svg { color: #818cf8; }
.sdx .sdx__spot-chip {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
}
.sdx .sdx__spot-num {
  position: relative; z-index: 2;
  margin-top: 18px;
  font-size: 3rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #ffffff 0%, #e0e7ff 55%, #a5f3fc 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sdx .sdx__spot-cur { font-size: 1.7rem; font-weight: 700; margin-right: 2px; -webkit-text-fill-color: #c7d2fe; }
.sdx .sdx__spot-pills {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
.sdx .sdx__pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.76rem; font-weight: 600;
  padding: 7px 11px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}
.sdx .sdx__pill b { color: #fff; font-weight: 800; }
.sdx .sdx__pill svg { width: 15px; height: 15px; }
.sdx .sdx__pill--green svg { color: #34d399; }
.sdx .sdx__pill--indigo svg { color: #818cf8; }
.sdx .sdx__pill--amber svg { color: #fbbf24; }
.sdx .sdx__spot-spark {
  position: relative; z-index: 2;
  margin-top: auto; padding-top: 22px;
}
.sdx .sdx__spot-spark-empty {
  font-size: 0.78rem; color: #94a3b8; line-height: 1.5;
  padding: 14px 0 6px; border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Donut tile */
.sdx .sdx__tile-cap {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--sdx-muted);
}
.sdx .sdx__tile-cap svg { color: var(--sdx-indigo); }
.sdx .sdx__tile--donut .sdash-x__donut-wrap { margin: 16px 0 6px; }
.sdx .sdx__donut-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto;
  padding: 10px 16px; border-radius: 999px;
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border: 1px solid rgba(245, 158, 11, 0.25);
  cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.sdx .sdx__donut-foot:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(245, 158, 11, 0.5); }
.sdx .sdx__donut-foot-star { display: inline-flex; color: #f59e0b; }
.sdx .sdx__donut-foot-star svg { width: 16px; height: 16px; }
.sdx .sdx__donut-foot-num { font-size: 0.95rem; font-weight: 800; color: #92400e; font-variant-numeric: tabular-nums; }
.sdx .sdx__donut-foot-cap { font-size: 0.72rem; font-weight: 600; color: #b45309; }

/* KPI tiles */
.sdx .sdx__kpi-icon {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.sdx .sdx__kpi-icon--amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.sdx .sdx__kpi-icon--star { background: linear-gradient(135deg, #f43f5e, #fb7185); }
.sdx .sdx__kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sdx .sdx__kpi-num { font-size: 1.35rem; font-weight: 800; color: var(--sdx-ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sdx .sdx__kpi-cap { font-size: 0.76rem; font-weight: 600; color: var(--sdx-muted); }
.sdx .sdx__kpi-arrow { color: var(--sdx-faint); flex: 0 0 auto; transition: transform 0.18s ease, color 0.18s ease; }
.sdx .sdx__tile--kpi:hover .sdx__kpi-arrow { transform: translateX(3px); color: var(--sdx-indigo); }

/* ── Metric strip ── */
.sdx .sdx__strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.sdx .sdx__metric {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-radius: var(--sdx-radius-sm);
  background: var(--sdx-card);
  border: 1px solid var(--sdx-line);
  box-shadow: var(--sdx-shadow);
  cursor: pointer; text-align: left; width: 100%;
  position: relative; overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.sdx .sdx__metric::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--sdx-mcol, var(--sdx-indigo));
  opacity: 0.9;
}
.sdx .sdx__metric:hover { transform: translateY(-3px); box-shadow: var(--sdx-shadow-lift); }
.sdx .sdx__metric--indigo  { --sdx-mcol: var(--indigo-light); }
.sdx .sdx__metric--violet  { --sdx-mcol: #8b5cf6; }
.sdx .sdx__metric--cyan    { --sdx-mcol: #06b6d4; }
.sdx .sdx__metric--emerald { --sdx-mcol: #10b981; }
.sdx .sdx__metric--amber   { --sdx-mcol: #f59e0b; }
.sdx .sdx__metric-icon {
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--sdx-mcol);
  background: color-mix(in srgb, var(--sdx-mcol) 12%, #fff);
}
.sdx .sdx__metric-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sdx .sdx__metric-num { font-size: 1.35rem; font-weight: 800; color: var(--sdx-ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
.sdx .sdx__metric-cap { font-size: 0.74rem; font-weight: 600; color: var(--sdx-muted); }
.sdx .sdx__metric-arrow { color: var(--sdx-faint); flex: 0 0 auto; opacity: 0; transform: translateX(-4px); transition: opacity 0.18s ease, transform 0.18s ease; }
.sdx .sdx__metric:hover .sdx__metric-arrow { opacity: 1; transform: translateX(0); }

/* ── Modules ── */
.sdx .sdx__modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.sdx .sdx__module {
  background: var(--sdx-card);
  border: 1px solid var(--sdx-line);
  border-radius: var(--sdx-radius);
  box-shadow: var(--sdx-shadow);
  padding: 20px 22px 22px;
  transition: box-shadow 0.22s ease;
}
.sdx .sdx__module:hover { box-shadow: var(--sdx-shadow-lift); }
.sdx .sdx__module--wide { grid-column: 1 / -1; }
.sdx .sdx__module--full { grid-column: 1 / -1; }
.sdx .sdx__mod-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.sdx .sdx__mod-title {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0; font-size: 1rem; font-weight: 800; color: var(--sdx-ink); letter-spacing: -0.01em;
}
.sdx .sdx__mod-title svg { color: var(--sdx-indigo); }
.sdx .sdx__mod-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8rem; font-weight: 700; color: var(--sdx-indigo);
  background: none; border: none; cursor: pointer; padding: 5px 8px; border-radius: 9px;
  transition: background 0.16s ease, gap 0.16s ease;
}
.sdx .sdx__mod-link:hover { background: rgba(99, 102, 241, 0.09); gap: 8px; }
.sdx .sdx__mod-body { display: flex; flex-direction: column; gap: 4px; }

/* Rows */
.sdx .sdx__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; border-radius: 13px; cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}
.sdx .sdx__row:hover { background: #f6f7fb; transform: translateX(3px); }
.sdx .sdx__row-l { min-width: 0; }
.sdx .sdx__row-name { font-size: 0.88rem; font-weight: 700; color: var(--sdx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdx .sdx__row-meta { font-size: 0.75rem; color: var(--sdx-muted); margin-top: 2px; }
.sdx .sdx__row-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sdx .sdx__badge {
  font-size: 0.68rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  text-transform: capitalize; white-space: nowrap;
}
.sdx .sdx__row-amount { font-size: 0.86rem; font-weight: 800; color: var(--sdx-ink); font-variant-numeric: tabular-nums; }

/* Soft cards (proofs / leads) */
.sdx .sdx__soft {
  padding: 13px 15px; border-radius: 14px;
  border: 1px solid var(--sdx-line);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.sdx .sdx__soft--amber { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: rgba(245, 158, 11, 0.22); }
.sdx .sdx__soft--indigo { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-color: rgba(99, 102, 241, 0.22); cursor: pointer; }
.sdx .sdx__soft--indigo:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(99, 102, 241, 0.4); }
.sdx .sdx__soft-title { font-size: 0.86rem; font-weight: 700; color: var(--sdx-ink); }
.sdx .sdx__soft-meta { font-size: 0.76rem; color: #475569; margin-top: 3px; }
.sdx .sdx__soft-msg { font-size: 0.78rem; color: #334155; margin-top: 6px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sdx .sdx__soft-time { font-size: 0.7rem; color: var(--sdx-faint); margin-top: 6px; font-weight: 600; }

/* Buyer needs grid */
.sdx .sdx__needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sdx .sdx__need {
  padding: 16px; border-radius: 16px; cursor: pointer;
  background: #fbfcfe; border: 1px solid var(--sdx-line);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.sdx .sdx__need:hover { transform: translateY(-3px); box-shadow: var(--sdx-shadow-lift); border-color: rgba(99, 102, 241, 0.35); }
.sdx .sdx__need-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sdx .sdx__need-title { font-size: 0.9rem; font-weight: 700; color: var(--sdx-ink); line-height: 1.3; }
.sdx .sdx__need-cat { font-size: 0.66rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(99, 102, 241, 0.1); color: #4338ca; white-space: nowrap; flex: 0 0 auto; }
.sdx .sdx__need-desc { font-size: 0.78rem; color: #475569; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sdx .sdx__need-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.73rem; }
.sdx .sdx__need-loc { color: var(--sdx-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdx .sdx__need-budget { color: var(--sdx-emerald); font-weight: 800; white-space: nowrap; }
.sdx .sdx__need-time { color: var(--sdx-faint); font-weight: 600; }
.sdx .sdx__need-resp { color: var(--sdx-indigo); font-weight: 700; }

/* Inline empty */
.sdx .sdx__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 0 26px; }
.sdx .sdx__empty-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #94a3b8;
}
.sdx .sdx__empty-text { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--sdx-faint); }

/* Spark variants */
.sdx .sdx__spark--dark .sdash-x__spark-line { stroke: #a5b4fc; stroke-width: 2.4; }
.sdx .sdx__spark--dark .sdash-x__spark-dot { fill: #131a33; stroke: #a5b4fc; }
.sdx .sdx__spark--light .sdash-x__spark-line { stroke: var(--sdx-indigo); }

/* ── Skeleton ── */
.sdx .sdx__skel { display: flex; flex-direction: column; gap: 22px; }
.sdx .sdx__skel-topbar { height: 54px; width: 320px; max-width: 70%; border-radius: 14px; }
.sdx .sdx__skel-bento { display: grid; grid-template-columns: 1.55fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.sdx .sdx__skel-tile { border-radius: var(--sdx-radius); }
.sdx .sdx__skel-tile--spot { grid-column: 1; grid-row: 1 / span 2; height: 280px; }
.sdx .sdx__skel-tile--donut { grid-column: 2; grid-row: 1 / span 2; }
.sdx .sdx__skel-tile--kpi { grid-column: 3; height: 86px; }
.sdx .sdx__skel-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.sdx .sdx__skel-metric { height: 74px; border-radius: var(--sdx-radius-sm); }
.sdx .sdx__skel-mods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sdx .sdx__skel-mod { height: 220px; border-radius: var(--sdx-radius); }
.sdx .sdx__skel-topbar,
.sdx .sdx__skel-tile,
.sdx .sdx__skel-metric,
.sdx .sdx__skel-mod {
  background: linear-gradient(100deg, #eef2f7 30%, #f8fafc 50%, #eef2f7 70%);
  background-size: 200% 100%;
  animation: sdashShimmer 1.4s ease-in-out infinite;
}

/* ── Fatal / error ── */
.sdx .sdx__fatal {
  max-width: 460px; margin: 60px auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 40px 28px; border-radius: var(--sdx-radius);
  background: var(--sdx-card); border: 1px solid var(--sdx-line); box-shadow: var(--sdx-shadow);
}
.sdx .sdx__fatal-icon {
  width: 76px; height: 76px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}
.sdx .sdx__fatal-text { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--sdx-muted); }

/* ── Responsive ── */
@media (max-width: 1000px) {
  .sdx .sdx__bento { grid-template-columns: 1fr 1fr; }
  .sdx .sdx__tile--spotlight { grid-column: 1 / -1; grid-row: auto; }
  .sdx .sdx__tile--donut { grid-column: 1; grid-row: auto; }
  .sdx .sdx__tile--kpi { grid-column: 2; }
  .sdx .sdx__skel-bento { grid-template-columns: 1fr 1fr; }
  .sdx .sdx__skel-tile--spot { grid-column: 1 / -1; grid-row: auto; height: 200px; }
  .sdx .sdx__skel-tile--donut { grid-column: 1; grid-row: auto; height: 180px; }
  .sdx .sdx__skel-tile--kpi { grid-column: 2; }
  .sdx .sdx__strip { grid-template-columns: repeat(3, 1fr); }
  .sdx .sdx__skel-strip { grid-template-columns: repeat(3, 1fr); }
  .sdx .sdx__modules { grid-template-columns: 1fr; }
  .sdx .sdx__skel-mods { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sdash-x.sdx { padding: 18px 12px 48px; gap: 18px; }
  .sdx .sdx__hello { font-size: 1.5rem; }
  .sdx .sdx__topbar-r { width: 100%; }
  .sdx .sdx__ghost, .sdx .sdx__solid { flex: 1; justify-content: center; }
  .sdx .sdx__bento { grid-template-columns: 1fr; }
  .sdx .sdx__tile--spotlight, .sdx .sdx__tile--donut, .sdx .sdx__tile--kpi { grid-column: 1; }
  .sdx .sdx__spot-num { font-size: 2.4rem; }
  .sdx .sdx__strip { grid-template-columns: repeat(2, 1fr); }
  .sdx .sdx__skel-strip { grid-template-columns: repeat(2, 1fr); }
  .sdx .sdx__skel-bento { grid-template-columns: 1fr; }
  .sdx .sdx__needs { grid-template-columns: 1fr; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sdx .sdx__live,
  .sdx .sdx__aurora,
  .sdx .sdx__skel-topbar,
  .sdx .sdx__skel-tile,
  .sdx .sdx__skel-metric,
  .sdx .sdx__skel-mod { animation: none !important; }
  .sdx .sdx__ghost:hover,
  .sdx .sdx__solid:hover,
  .sdx .sdx__tile--kpi:hover,
  .sdx .sdx__tile--donut:hover,
  .sdx .sdx__metric:hover,
  .sdx .sdx__row:hover,
  .sdx .sdx__soft--indigo:hover,
  .sdx .sdx__need:hover,
  .sdx .sdx__donut-foot:hover { transform: none; }
}

/* ==================================================================== */
/*  Seller Profile — reference redesign (.spro)                          */
/* ==================================================================== */
.spro {
  --spro-border: #e8ecf3;
  --spro-ink: #0f172a;
  --spro-muted: #64748b;
  --spro-faint: #94a3b8;
  --spro-indigo: var(--indigo-light);
  --spro-card-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 4px 40px;
}
.spro * { box-sizing: border-box; }

/* Topbar */
.spro-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.spro-crumbs { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--spro-faint); margin-bottom: 6px; }
.spro-crumbs__sep { color: #cbd5e1; }
.spro-crumbs__current { color: var(--spro-muted); }
.spro-title { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--spro-ink); }
.spro-subtitle { margin: 4px 0 0; font-size: 0.9rem; color: var(--spro-muted); }

/* Buttons */
.spro-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.85rem; font-weight: 600; line-height: 1;
  padding: 9px 14px; border-radius: 10px; border: 1px solid var(--spro-border);
  background: #fff; color: var(--spro-ink); cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.spro-btn:hover { border-color: #cbd5e1; }
.spro-btn:active { transform: translateY(1px); }
.spro-btn:focus-visible { outline: 2px solid var(--spro-indigo); outline-offset: 2px; }
.spro-btn--primary { background: var(--spro-indigo); border-color: var(--spro-indigo); color: #fff; }
.spro-btn--primary:hover { background: #5457e6; border-color: #5457e6; }
.spro-btn--outline { background: #fff; }
.spro-btn--ghost { padding: 7px 12px; font-size: 0.8rem; color: var(--spro-muted); }
.spro-btn--ghost:hover { background: #f8fafc; color: var(--spro-ink); }

.spro-link { background: none; border: 0; padding: 0; margin-left: 8px; color: var(--spro-indigo); font-weight: 600; font-size: 0.82rem; cursor: pointer; text-decoration: underline; }
.spro-link:hover { color: var(--indigo); }

/* Pills / dots */
.spro-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.spro-pill .spro-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.spro-pill--green { background: #dcfce7; color: #15803d; }
.spro-pill--amber { background: #fef3c7; color: #b45309; }
.spro-pill--muted { background: #f1f5f9; color: #64748b; }
.spro-dot { display: inline-block; }

/* Discoverability alert (shown while seller is hidden from buyers) */
.spro-vis-alert {
  display: flex; align-items: center; gap: 14px;
  background: #fff7ed; border: 1px solid #fed7aa;
  border-left: 4px solid #f97316;
  border-radius: var(--spro-card-radius); padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.spro-vis-alert__icon { flex-shrink: 0; color: #ea580c; display: flex; }
.spro-vis-alert__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.spro-vis-alert__title { font-size: 0.95rem; font-weight: 700; color: #9a3412; }
.spro-vis-alert__sub { font-size: 0.82rem; color: #b45309; line-height: 1.4; }
.spro-vis-alert__err { font-size: 0.78rem; color: #b91c1c; font-weight: 600; margin-top: 2px; }
.spro-vis-alert__cta { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .spro-vis-alert { flex-wrap: wrap; }
  .spro-vis-alert__cta { width: 100%; justify-content: center; }
}

/* Direct discoverability toggle (profile location card) */
.spro-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 0.75rem; font-weight: 600;
}
.spro-toggle:disabled { opacity: 0.6; cursor: default; }
.spro-toggle__track {
  position: relative; width: 38px; height: 22px; border-radius: 999px;
  background: #cbd5e1; transition: background 0.18s ease; flex-shrink: 0;
}
.spro-toggle__knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,0.25);
  transition: transform 0.18s ease;
}
.spro-toggle--on .spro-toggle__track { background: var(--accent, #6366f1); }
.spro-toggle--on .spro-toggle__knob { transform: translateX(16px); }
.spro-toggle--on .spro-toggle__label { color: #15803d; }
.spro-toggle--off .spro-toggle__label { color: #64748b; }
@media (prefers-reduced-motion: reduce) {
  .spro-toggle__track, .spro-toggle__knob { transition: none; }
}

/* Hero */
.spro-hero {
  display: flex; gap: 22px; align-items: center;
  background: #fff; border: 1px solid var(--spro-border);
  border-radius: var(--spro-card-radius); padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.spro-hero__avatar-wrap { position: relative; flex-shrink: 0; }
.spro-hero__avatar {
  width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 0 0 3px #eef2ff; cursor: zoom-in; background: #f1f5f9;
}
.spro-hero__avatar-cam {
  position: absolute; right: 2px; bottom: 2px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--spro-indigo); color: #fff; border-radius: 50%;
  border: 2px solid #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(99,102,241,0.4);
}
.spro-hero__avatar-cam:hover { background: #5457e6; }
.spro-hero__avatar-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; animation: spro-spin 0.7s linear infinite; }
@keyframes spro-spin { to { transform: rotate(360deg); } }
.spro-hero__body { flex: 1; min-width: 0; }
.spro-hero__name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spro-hero__name { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--spro-ink); letter-spacing: -0.01em; }
.spro-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; font-weight: 700; color: #15803d; background: #dcfce7; padding: 4px 10px; border-radius: 999px; }
.spro-hero__tagline { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: 0.9rem; color: var(--spro-muted); }
.spro-hero__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.spro-hero__meta-item { display: flex; align-items: center; gap: 10px; min-width: 0; position: relative; }
.spro-hero__meta-item + .spro-hero__meta-item::before { content: ""; position: absolute; left: -8px; top: 3px; bottom: 3px; width: 1px; background: var(--spro-border); }
.spro-hero__meta-item > div { display: flex; flex-direction: column; min-width: 0; }
.spro-hero__meta-val { font-size: 0.9rem; font-weight: 700; color: var(--spro-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spro-hero__meta-label { font-size: 0.74rem; color: var(--spro-faint); }

/* Progress */
.spro-progress { background: #fff; border: 1px solid var(--spro-border); border-radius: var(--spro-card-radius); padding: 18px 24px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.spro-progress__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.spro-progress__info { flex: 1; min-width: 240px; }
.spro-progress__label { font-size: 0.9rem; font-weight: 700; color: var(--spro-ink); }
.spro-progress__track { height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden; margin: 10px 0; }
.spro-progress__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--indigo-light)); transition: width 0.4s ease; }
.spro-progress__fill--done { background: linear-gradient(90deg, #22c55e, #16a34a); }
.spro-progress__remaining { margin: 0; font-size: 0.8rem; color: var(--spro-faint); }

/* Two-column grid */
.spro-grid { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.spro-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Cards */
.spro-card, .spro .seller-page__card {
  background: #fff; border: 1px solid var(--spro-border);
  border-radius: var(--spro-card-radius); box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  overflow: hidden;
}
.spro-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.spro-card__head-left { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.spro-card__icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.spro-card__icon--indigo { background: #eef2ff; color: var(--indigo-light); }
.spro-card__icon--rose { background: #ffe4ec; color: #e11d67; }
.spro-card__icon--sky { background: #e0f2fe; color: #0284c7; }
.spro-card__icon--violet { background: #f3e8ff; color: #9333ea; }
.spro-card__icon--emerald { background: #dcfce7; color: #059669; }
.spro-card__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--spro-ink); }
.spro-card__sub { margin: 2px 0 0; font-size: 0.8rem; color: var(--spro-faint); }
.spro-card__body { padding: 16px 20px 20px; }

/* Field rows */
.spro-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.spro-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spro-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.spro-field--full { margin-top: 16px; }
.spro-field__label { font-size: 0.76rem; color: var(--spro-faint); }
.spro-field__value { font-size: 0.92rem; font-weight: 600; color: var(--spro-ink); word-break: break-word; }
.spro-field__value--inline { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Map preview */
.spro-locbox { margin-top: 18px; }
.spro-map { position: relative; height: 300px; border-radius: 12px 12px 0 0; overflow: hidden; border: 1px solid var(--spro-border); border-bottom: none; }
.spro-locinfo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--spro-border, #e5e9f0);
  border-radius: 0 0 12px 12px;
  background: var(--bg-secondary, #f8fafc);
}
.spro-locinfo__ico {
  flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: #ede9fe; color: var(--accent);
}
.spro-locinfo__ico--live { background: #dcfce7; color: #16a34a; }
.spro-locinfo__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.spro-locinfo__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--spro-muted, #64748b); }
.spro-locinfo__primary { font-size: 0.98rem; font-weight: 700; color: var(--spro-ink, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spro-locinfo__secondary { font-size: 0.83rem; color: var(--spro-muted, #64748b); }
.spro-locinfo__pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; color: #15803d; background: #dcfce7; padding: 5px 10px; border-radius: 999px; }
.spro-map__bg { width: 100%; height: 100%; display: block; }
.spro-map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
.spro-map__label { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,0.92); color: var(--spro-ink); font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.spro-map--live { border-color: #86efac; }
.spro-map__livebadge { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.94); color: #15803d; font-size: 0.72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.spro-map__livedot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: spro-map-blink 1.6s ease-in-out infinite; }
@keyframes spro-map-blink { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }
.spro-map__pin--live { z-index: 2; }
.spro-map__pulse { position: absolute; left: 50%; top: 100%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(34,197,94,0.35); animation: spro-map-pulse 1.8s ease-out infinite; }
@keyframes spro-map-pulse { 0% { transform: scale(0.4); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }
.spro-map__note { position: absolute; right: 12px; bottom: 12px; background: rgba(255,247,237,0.95); color: #9a3412; font-size: 0.72rem; font-weight: 600; padding: 4px 9px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
@media (prefers-reduced-motion: reduce) { .spro-map__livedot, .spro-map__pulse { animation: none; } }

/* Availability & slots */
.spro-sched-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 14px 16px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; }
.spro-sched-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spro-sched-stat__label { font-size: 0.74rem; color: var(--spro-faint); }
.spro-sched-stat__value { font-size: 0.9rem; font-weight: 700; color: var(--spro-ink); }
.spro-sched-heading { margin: 20px 0 10px; font-size: 0.9rem; font-weight: 700; color: var(--spro-ink); }
.spro-week { display: flex; flex-direction: column; border: 1px solid var(--spro-border); border-radius: 12px; overflow: hidden; }
.spro-week__row { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr 0.8fr; align-items: center; gap: 10px; padding: 11px 14px; font-size: 0.85rem; }
.spro-week__row:nth-child(odd) { background: #f8fafc; }
.spro-week__row--off { color: var(--spro-faint); }
.spro-week__day { font-weight: 600; color: var(--spro-ink); }
.spro-week__row--off .spro-week__day { color: var(--spro-muted); }
.spro-week__status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.spro-week__status--on { color: #16a34a; }
.spro-week__status--on .spro-dot { background: #22c55e; }
.spro-week__status--off { color: #ef4444; }
.spro-week__status--off .spro-dot { background: #ef4444; }
.spro-week__time { color: var(--spro-muted); }
.spro-week__slots { text-align: right; color: var(--spro-muted); font-weight: 600; }
.spro-week__row--off .spro-week__slots { color: #cbd5e1; }
.spro-sched-foot { display: flex; justify-content: center; margin-top: 16px; }
.spro-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.spro-slot { font-size: 0.75rem; font-weight: 600; color: #334155; background: #eef2f7; padding: 5px 9px; border-radius: 7px; }
.spro-slot--break { background: #fef3c7; color: #b45309; }

/* Open to work */
.spro-otw__body { padding-top: 18px; }
.spro-otw__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.spro-otw__head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.spro-otw__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: #cbd5e1; }
.spro-otw__dot--available { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.spro-otw__dot--busy { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.spro-otw__dot--away { background: #94a3b8; }
.spro-otw__dot--offline { background: #cbd5e1; }
.spro-otw__state { margin: 2px 0 0; font-size: 0.8rem; color: var(--spro-muted); }
.spro-otw__group { margin-top: 20px; }
.spro-otw__label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--spro-muted); margin-bottom: 9px; }
.spro-otw__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.spro-otw__chip { padding: 9px 0; border-radius: 10px; border: 1px solid var(--spro-border); background: #fff; font-size: 0.85rem; font-weight: 700; color: var(--spro-ink); cursor: pointer; transition: all 0.15s ease; }
.spro-otw__chip:hover:not(:disabled) { border-color: var(--spro-indigo); }
.spro-otw__chip--active { background: var(--spro-indigo); border-color: var(--spro-indigo); color: #fff; }
.spro-otw__chip:disabled { opacity: 0.55; cursor: not-allowed; }
.spro-otw__statuses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.spro-otw__status-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; border-radius: 10px; border: 1px solid var(--spro-border); background: #fff; font-size: 0.82rem; font-weight: 600; color: var(--spro-muted); cursor: pointer; text-transform: capitalize; transition: all 0.15s ease; }
.spro-otw__status-btn .spro-dot { width: 8px; height: 8px; border-radius: 50%; }
.spro-otw__status-btn--available .spro-dot { background: #22c55e; }
.spro-otw__status-btn--busy .spro-dot { background: #f59e0b; }
.spro-otw__status-btn--away .spro-dot { background: #94a3b8; }
.spro-otw__status-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.spro-otw__status-btn--available.spro-otw__status-btn--active { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.spro-otw__status-btn--busy.spro-otw__status-btn--active { background: #fffbeb; border-color: #fcd34d; color: #b45309; }
.spro-otw__status-btn--away.spro-otw__status-btn--active { background: #f8fafc; border-color: #cbd5e1; color: #475569; }
.spro-otw__hint { margin: 16px 0 0; font-size: 0.78rem; color: var(--spro-faint); line-height: 1.5; }
.spro-otw__warn { margin-top: 14px; padding: 10px 12px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; }
.spro-otw__warn p { margin: 0; font-size: 0.8rem; color: #9a3412; }

/* Switch */
.spro-switch { position: relative; width: 46px; height: 26px; border-radius: 999px; border: 0; background: #cbd5e1; cursor: pointer; flex-shrink: 0; transition: background 0.2s ease; padding: 0; }
.spro-switch--on { background: var(--indigo-light); }
.spro-switch__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s ease; }
.spro-switch--on .spro-switch__knob { transform: translateX(20px); }
.spro-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.spro-switch:focus-visible { outline: 2px solid var(--spro-indigo); outline-offset: 2px; }

/* Trust */
.spro-trust__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.spro-trust__ring { position: relative; width: 140px; height: 140px; }
.spro-trust__ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.spro-trust__score { font-size: 2.1rem; font-weight: 800; color: var(--spro-ink); line-height: 1; }
.spro-trust__score-label { font-size: 0.76rem; color: var(--spro-muted); margin-top: 2px; }
.spro-trust__kyc { margin: 18px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--spro-ink); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.spro-trust__info { margin: 12px 0 0; font-size: 0.8rem; color: var(--spro-muted); line-height: 1.55; max-width: 280px; }
.spro-trust__badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }

/* CTA */
.spro-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, #faf5ff, #eef2ff); border: 1px solid #e9d5ff; border-radius: var(--spro-card-radius); padding: 18px 22px; }
.spro-cta__left { display: flex; align-items: center; gap: 14px; }
.spro-cta__icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; color: var(--accent); box-shadow: 0 2px 6px rgba(124,58,237,0.18); }
.spro-cta__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--spro-ink); }
.spro-cta__sub { margin: 3px 0 0; font-size: 0.83rem; color: var(--spro-muted); }

.spro-extra { display: flex; flex-direction: column; gap: 18px; }

/* ---- Edit modal popup (fixed header + scroll body + sticky footer) ---- */
.spro-modal-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  overflow-y: auto;
  animation: spro-modal-fade 0.16s ease;
}
@keyframes spro-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.spro-modal {
  width: 100%; max-width: 720px; margin: auto;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
  background: var(--bg-primary, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  animation: spro-modal-rise 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes spro-modal-rise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.spro-modal__header {
  flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--spro-border, #e5e9f0);
  background: var(--bg-primary, #fff);
}
.spro-modal__title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--spro-ink, #0f172a); }
.spro-modal__subtitle { margin: 4px 0 0; font-size: 0.83rem; color: var(--spro-muted, #64748b); }
.spro-modal__close {
  flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--spro-border, #e5e9f0); border-radius: 9px; background: #fff;
  color: var(--spro-muted, #64748b); cursor: pointer; transition: all 0.15s ease;
}
.spro-modal__close:hover { background: #f1f5f9; color: var(--spro-ink, #0f172a); }
.spro-modal__close:focus-visible { outline: 2px solid var(--spro-indigo, var(--indigo-light)); outline-offset: 2px; }
/* Body scrolls; the embedded form's action row is pinned to the bottom. */
.spro-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 24px 0; }
.spro-modal__body .market-form { display: block; }
.spro-modal__body .market-actions {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 16px -24px 0; padding: 14px 24px;
  border-top: 1px solid var(--spro-border, #e5e9f0);
  background: var(--bg-primary, #fff);
}
/* Explicit fixed footer (Save/Cancel always visible) for modals that pass one. */
.spro-modal__footer {
  flex-shrink: 0;
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 24px;
  border-top: 1px solid var(--spro-border, #e5e9f0);
  background: var(--bg-primary, #fff);
}
.spro-modal__body .spro-avail-edit,
.spro-modal__body .spro-contact-edit { padding-bottom: 8px; }
/* Availability builder needs more room than the standard profile modal. */
.spro-modal:has(.spro-avail-edit) { max-width: 940px; }
.spro-avail-edit .availx { padding: 8px 0 0; }
.spro-avail-edit .availx-gridwrap { overflow-x: auto; }

/* Responsive */
@media (max-width: 640px) {
  .spro-modal-backdrop { padding: 0; }
  .spro-modal { max-width: 100%; max-height: 100vh; border-radius: 0; min-height: 100vh; }
}
@media (max-width: 960px) {
  .spro-grid { grid-template-columns: 1fr; }
  .spro-hero__meta { grid-template-columns: repeat(2, 1fr); }
  .spro-hero__meta-item + .spro-hero__meta-item::before { display: none; }
}
@media (max-width: 640px) {
  .spro-hero { flex-direction: column; text-align: center; align-items: center; }
  .spro-hero__name-row { justify-content: center; }
  .spro-hero__tagline { justify-content: center; }
  .spro-hero__meta { grid-template-columns: 1fr; text-align: left; }
  .spro-fields, .spro-fields--3, .spro-sched-summary { grid-template-columns: 1fr; }
  .spro-week__row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .spro-week__time, .spro-week__slots { grid-column: span 1; }
  .spro-title { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .spro-btn, .spro-switch, .spro-switch__knob, .spro-otw__chip, .spro-progress__fill, .spro-hero__avatar-spin { transition: none; animation: none; }
}

/* ==================================================================
 *  Account Details page (.acc-*) — redesigned hero + two columns
 * ================================================================== */
.seller-page.acc-shell { max-width: 1120px; }
.acc-page { max-width: none; margin: 0 auto; padding: 4px 4px 40px; }
.acc-form__note { margin: 4px 0 0; font-size: 0.82rem; color: #94a3b8; line-height: 1.4; }
.acc-loading { text-align: center; padding: 60px 0; color: #94a3b8; }

.acc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.acc-head__title { font-size: 1.75rem; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.02em; }
.acc-head__sub { margin: 4px 0 0; color: #64748b; font-size: 0.9rem; }

/* Buttons */
.acc-btn-primary {
  display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  padding: 10px 18px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--indigo-light));
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.28); transition: transform .15s ease, box-shadow .15s ease;
}
.acc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(124, 58, 237, 0.34); }
.acc-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.acc-btn-primary:focus-visible { outline: 2px solid #4338ca; outline-offset: 2px; }

.acc-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; cursor: pointer;
  padding: 7px 13px; border-radius: 10px; font-size: 0.82rem; font-weight: 600; color: #6d28d9;
  background: #fff; transition: background .15s ease, border-color .15s ease;
}
.acc-btn-ghost:hover { background: #f5f3ff; border-color: #ddd6fe; }
.acc-btn-ghost:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }

.acc-btn-cancel {
  border: 1px solid #e5e7eb; background: #fff; color: #475569; cursor: pointer;
  padding: 10px 18px; border-radius: 12px; font-size: 0.9rem; font-weight: 600;
}
.acc-btn-cancel:hover { background: #f8fafc; }

.acc-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  border: 1px solid #ddd6fe; background: #f5f3ff; color: #6d28d9; font-weight: 600;
  padding: 11px 16px; border-radius: 12px; font-size: 0.88rem; width: 100%;
}
.acc-btn-outline:hover { background: #ede9fe; }
.acc-btn-outline:disabled { opacity: 0.6; cursor: not-allowed; }

/* Avatar */
.acc-avatar { position: relative; width: 72px; height: 72px; border-radius: 50%; cursor: pointer; flex: 0 0 auto; }
.acc-avatar--lg { width: 128px; height: 128px; }
.acc-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12); background: #eef2f7; }
.acc-avatar__cam {
  position: absolute; right: 2px; bottom: 2px; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--indigo-light)); border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}
.acc-avatar--lg .acc-avatar__cam { width: 36px; height: 36px; }

/* Hero */
.acc-hero {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: center;
  background: #fff; border: 1px solid #eef2f7; border-radius: 20px; padding: 24px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05); margin-bottom: 20px;
}
.acc-hero__left { display: flex; align-items: center; gap: 22px; min-width: 0; }
.acc-hero__info { min-width: 0; }
.acc-hero__nameline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-hero__name { font-size: 1.4rem; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.01em; }
.acc-hero__meta { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.acc-hero__meta li { display: flex; align-items: center; gap: 10px; color: #475569; font-size: 0.9rem; min-width: 0; }
.acc-hero__meta li svg { color: #94a3b8; flex: 0 0 auto; }
.acc-hero__meta li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-hero__right { display: flex; flex-direction: column; gap: 16px; padding-left: 24px; border-left: 1px solid #f1f5f9; }

/* Progress ring */
.acc-progress { display: flex; align-items: center; gap: 16px; }
.acc-progress__ring { flex: 0 0 auto; }
.acc-progress__pct { font-size: 13px; font-weight: 800; fill: #6d28d9; }
.acc-progress__label { display: block; font-size: 0.95rem; font-weight: 700; color: #0f172a; }
.acc-progress__cta { display: inline-block; margin-top: 4px; background: none; border: none; padding: 0; cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.85rem; }
.acc-progress__cta:hover { text-decoration: underline; }

/* Verification chips */
.acc-vstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.acc-vstat {
  display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 12px;
  background: #f8fafc; border: 1px solid #eef2f7;
}
.acc-vstat__ico {
  width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #94a3b8; flex: 0 0 auto;
}
.acc-vstat--ok { background: #f0fdf4; border-color: #dcfce7; }
.acc-vstat--ok .acc-vstat__ico { background: #dcfce7; color: #16a34a; }
.acc-vstat__text { display: flex; flex-direction: column; min-width: 0; }
.acc-vstat__label { font-size: 0.82rem; font-weight: 700; color: #0f172a; }
.acc-vstat__state { font-size: 0.72rem; color: #64748b; }
.acc-vstat--ok .acc-vstat__state { color: #16a34a; }

/* Flash message */
.acc-flash { border-radius: 12px; padding: 11px 14px; font-size: 0.86rem; margin-bottom: 16px; }
.acc-flash--ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.acc-flash--err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* Two-column grid */
.acc-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: start; }
.acc-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Cards */
.acc-card {
  background: #fff; border: 1px solid #eef2f7; border-radius: 18px; padding: 20px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04); max-width: none; margin: 0;
}
.acc-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.acc-card__ico {
  width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: #f5f3ff; color: var(--accent); flex: 0 0 auto;
}
.acc-card__ico--gift { background: #ede9fe; color: var(--accent); }
.acc-card__ico--clock { background: #eff6ff; color: var(--primary); }
.acc-card__titles { flex: 1; min-width: 0; }
.acc-card__title { font-size: 1.02rem; font-weight: 800; color: #0f172a; margin: 0; }
.acc-card__sub { margin: 2px 0 0; color: #94a3b8; font-size: 0.8rem; }
.acc-card__body { }

/* Info rows */
.acc-inforow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.acc-inforow:last-child { border-bottom: none; }
.acc-inforow__ico { color: #a78bfa; flex: 0 0 auto; }
.acc-inforow__label { color: #64748b; font-size: 0.86rem; width: 110px; flex: 0 0 auto; }
.acc-inforow__value { color: #0f172a; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.acc-inforow__badge { font-size: 0.68rem; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 2px 8px; }
.acc-inforow__action { margin-left: auto; flex: 0 0 auto; }
.acc-btn-ghost--sm { padding: 5px 10px; font-size: 0.76rem; border-radius: 9px; }

/* Location map */
.acc-map { }
.acc-map__canvas {
  position: relative; height: 300px; border-radius: 14px; overflow: hidden; border: 1px solid #e2e8f0;
}
.acc-map__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.acc-map__badge {
  position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.95); color: #16a34a; font-size: 0.74rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(15,23,42,0.12);
}
.acc-map__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); animation: acc-pulse 1.8s ease-out infinite; }
.acc-map__pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); }
.acc-map__pulse {
  position: absolute; left: 50%; top: 62%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgba(34,197,94,0.28); animation: acc-pulse-ring 1.8s ease-out infinite;
}
.acc-map__live-btn {
  position: absolute; right: 12px; bottom: 12px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.96); color: #6d28d9; font-weight: 600; font-size: 0.78rem;
  padding: 8px 12px; border-radius: 10px; box-shadow: 0 2px 8px rgba(15,23,42,0.14);
}
.acc-map__live-btn:hover { background: #f5f3ff; }
.acc-map__live-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.acc-map__note {
  position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,0.96); color: #64748b;
  font-size: 0.74rem; padding: 6px 10px; border-radius: 8px; max-width: 60%;
}
.acc-map__details {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 14px;
  background: #eef2f7; border: 1px solid #eef2f7; border-radius: 12px; overflow: hidden;
}
.acc-map__cell { background: #fff; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.acc-map__cell-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; font-weight: 600; }
.acc-map__cell-val { font-size: 0.86rem; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-map__update { margin-top: 12px; width: 100%; border: 1px dashed #ddd6fe; background: #faf9ff; color: #6d28d9; font-weight: 600; font-size: 0.84rem; padding: 10px; border-radius: 10px; cursor: pointer; }
.acc-map__update:hover { background: #f5f3ff; }

@keyframes acc-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }
@keyframes acc-pulse-ring { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }

/* ── Referral card (reuses .acc-card) ── */
.referral-card.acc-card { max-width: none; margin: 0; }
.acc-ref-share {
  background: #f7f5ff; border: 1px solid #ece9fe; border-radius: 14px; padding: 16px; margin-bottom: 18px;
}
.acc-ref-share__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-ref-share__divider { height: 1px; background: #e9e5fb; margin: 14px 0; }
.acc-ref-share__field { min-width: 0; flex: 1; }
.acc-ref-share__label { display: block; font-size: 0.74rem; color: #7c6bb8; font-weight: 600; margin-bottom: 4px; }
.acc-ref-share__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.08em; color: #6d28d9; }
.acc-ref-share__link { display: block; font-size: 0.82rem; color: #6d28d9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-ref-copy {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #fff; border: 1px solid #ddd6fe; color: #6d28d9; font-weight: 600; font-size: 0.82rem;
  padding: 9px 13px; border-radius: 10px; transition: background .15s ease;
}
.acc-ref-copy:hover { background: #f5f3ff; }
.acc-ref-copy:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }

.acc-ref-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.acc-ref-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 14px 8px; }
.acc-ref-stat__ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.acc-ref-stat__ico--blue { background: #eff6ff; color: var(--primary); }
.acc-ref-stat__ico--green { background: #f0fdf4; color: #16a34a; }
.acc-ref-stat__ico--amber { background: #fffbeb; color: #d97706; }
.acc-ref-stat__ico--violet { background: #f5f3ff; color: var(--accent); }
.acc-ref-stat__num { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.acc-ref-stat__lbl { font-size: 0.68rem; color: #64748b; line-height: 1.3; }

.acc-ref-claim {
  display: flex; align-items: center; gap: 14px; background: #fff5f5; border: 1px solid #fee2e2;
  border-radius: 14px; padding: 14px 16px;
}
.acc-ref-claim__ico { width: 38px; height: 38px; border-radius: 10px; background: #fee2e2; color: #ef4444; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.acc-ref-claim__info { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; color: #334155; min-width: 0; }
.acc-ref-claim__info strong { color: #dc2626; font-size: 1.02rem; }
.acc-ref-claim__min { color: #94a3b8; font-size: 0.78rem; }
.acc-ref-claim__btn { flex: 0 0 auto; border: none; border-radius: 11px; padding: 11px 18px; font-size: 0.86rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--accent), var(--indigo-light)); cursor: pointer; }
.acc-ref-claim__btn:disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; }

.acc-ref-empty { display: flex; align-items: center; gap: 18px; padding: 18px 6px; }
.acc-ref-empty__art { flex: 0 0 auto; }
.acc-ref-empty__text { display: flex; flex-direction: column; gap: 4px; }
.acc-ref-empty__title { font-size: 1rem; font-weight: 800; color: #0f172a; }
.acc-ref-empty__sub { font-size: 0.86rem; color: #94a3b8; max-width: 300px; }

/* ── Account modal (fixed header + scrollable body + fixed footer) ── */
.acc-modal-backdrop {
  position: fixed; inset: 0; z-index: 3000; background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  backdrop-filter: blur(2px);
}
.acc-modal {
  width: 100%; max-width: 520px; max-height: calc(100vh - 40px); background: #fff;
  border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  display: flex; flex-direction: column; overflow: hidden;
}
.acc-modal__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid #f1f5f9; flex: 0 0 auto;
}
.acc-modal__title { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin: 0; }
.acc-modal__subtitle { margin: 3px 0 0; color: #94a3b8; font-size: 0.82rem; }
.acc-modal__close { border: none; background: #f8fafc; color: #64748b; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.acc-modal__close:hover { background: #f1f5f9; color: #0f172a; }
.acc-modal__body { padding: 20px; overflow-y: auto; flex: 1 1 auto; }
.acc-modal__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #f1f5f9; flex: 0 0 auto; background: #fff; }

/* Modal form */
.acc-form { display: flex; flex-direction: column; gap: 16px; }
.acc-form__avatar { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.acc-form__avatar-hint { font-size: 0.78rem; color: #64748b; }
.acc-form__field { display: flex; flex-direction: column; gap: 6px; }
.acc-form__label { font-size: 0.82rem; font-weight: 600; color: #334155; }
.acc-req { color: #ef4444; }
.acc-form__input {
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 11px 13px; font-size: 0.9rem; color: #0f172a;
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease; width: 100%;
}
.acc-form__input:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25); }
.acc-form__input:disabled { background: #f8fafc; color: #94a3b8; }
.acc-form__hint { font-size: 0.74rem; color: #94a3b8; }

.acc-locbox { display: flex; flex-direction: column; gap: 12px; }
.acc-locbox__current { display: flex; align-items: center; gap: 8px; color: #334155; font-size: 0.9rem; font-weight: 600; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 11px 13px; }
.acc-locbox__current svg { color: #a78bfa; flex: 0 0 auto; }
.acc-locbox__or { text-align: center; color: #94a3b8; font-size: 0.78rem; }
.acc-locbox__row { display: flex; gap: 8px; }
.acc-locbox__row .acc-form__input { flex: 1; }
.acc-locbox__msg { font-size: 0.82rem; color: #6d28d9; }

/* Responsive */
@media (max-width: 960px) {
  .acc-hero { grid-template-columns: 1fr; }
  .acc-hero__right { padding-left: 0; border-left: none; border-top: 1px solid #f1f5f9; padding-top: 16px; }
  .acc-grid { grid-template-columns: 1fr; }
  .acc-ref-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .acc-head__title { font-size: 1.4rem; }
  .acc-hero__left { flex-direction: column; text-align: center; align-items: center; }
  .acc-hero__meta li { justify-content: center; }
  .acc-hero__nameline { justify-content: center; }
  .acc-vstats { grid-template-columns: 1fr; }
  .acc-ref-stats { grid-template-columns: repeat(2, 1fr); }
  .acc-map__details { grid-template-columns: repeat(2, 1fr); }
  .acc-ref-share__row { flex-direction: column; align-items: stretch; }
  .acc-ref-copy { justify-content: center; }
  .acc-ref-claim { flex-wrap: wrap; }
  .acc-ref-empty { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-map__dot, .acc-map__pulse, .acc-btn-primary { animation: none; transition: none; }
}


/* ============================================================
   SELLER DASHBOARD — mockup redesign (scoped .sdb)
   Purple gradient welcome banner + colored stat cards +
   earnings line chart + recent orders/leads/messages +
   performance summary. Real data only. Maps mockup purple to
   the app accent (--accent/--primary). No new palette tokens.
   ============================================================ */
.sdb {
  --sdb-accent: var(--accent, var(--accent));
  --sdb-accent-2: var(--primary, #6d28d9);
  --sdb-grad: linear-gradient(135deg, #6d28d9 0%, var(--accent) 55%, #a855f7 100%);
  --sdb-surface: #ffffff;
  --sdb-border: #e8eaf1;
  --sdb-text: #1f2430;
  --sdb-muted: #6b7280;
  --sdb-radius: 16px;
  --sdb-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 24px 56px;
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
  color: var(--sdb-text);
}

/* Enter animation */
.sdb-enter { opacity: 0; transform: translateY(12px); animation: sdbIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes sdbIn { to { opacity: 1; transform: translateY(0); } }

/* ---------- Welcome banner ---------- */
.sdb-hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: var(--sdb-grad);
  color: #fff;
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 24px 50px -26px rgba(124, 58, 237, 0.7);
}
.sdb-hero__glow { position: absolute; border-radius: 50%; filter: blur(46px); opacity: 0.55; pointer-events: none; }
.sdb-hero__glow--1 { width: 260px; height: 260px; background: rgba(255, 255, 255, 0.28); top: -120px; right: 12%; }
.sdb-hero__glow--2 { width: 220px; height: 220px; background: rgba(168, 85, 247, 0.5); bottom: -140px; left: -40px; }
.sdb-hero__text { position: relative; z-index: 2; min-width: 0; }
.sdb-hero__title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; line-height: 1.15; }
.sdb-hero__wave { display: inline-block; animation: sdbWave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes sdbWave { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } }
.sdb-hero__sub { font-size: 0.95rem; opacity: 0.92; margin: 0 0 18px; font-weight: 500; }
.sdb-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.sdb-hero__art { position: relative; z-index: 1; flex: 0 0 auto; width: 220px; }
.sdb-hero__art svg { width: 100%; height: auto; }

/* Buttons */
.sdb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; cursor: pointer; font-weight: 700; font-size: 0.9rem;
  padding: 11px 18px; border-radius: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.sdb-btn svg { width: 17px; height: 17px; }
.sdb-btn--light { background: #fff; color: var(--sdb-accent-2); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.4); }
.sdb-btn--light:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -16px rgba(0, 0, 0, 0.5); }
.sdb-btn--outline { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.sdb-btn--outline:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }
.sdb-btn--solid { background: var(--sdb-grad); color: #fff; box-shadow: 0 12px 24px -14px var(--sdb-accent); }
.sdb-btn--solid:hover { transform: translateY(-2px); }

/* ---------- Stat cards ---------- */
.sdb-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sdb-stat {
  text-align: left; cursor: pointer;
  background: var(--sdb-surface);
  border: 1px solid var(--sdb-border);
  border-radius: var(--sdb-radius);
  padding: 18px;
  box-shadow: var(--sdb-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex; flex-direction: column; gap: 4px;
}
.sdb-stat:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -20px rgba(15, 23, 42, 0.32); border-color: color-mix(in srgb, var(--sdb-accent) 30%, var(--sdb-border)); }
.sdb-stat__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sdb-stat__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.sdb-stat__icon svg { width: 22px; height: 22px; }
.sdb-stat--violet .sdb-stat__icon { background: linear-gradient(135deg, var(--accent), #a855f7); }
.sdb-stat--blue .sdb-stat__icon { background: linear-gradient(135deg, var(--primary), var(--primary-bright)); }
.sdb-stat--amber .sdb-stat__icon { background: linear-gradient(135deg, #d97706, #f59e0b); }
.sdb-stat--green .sdb-stat__icon { background: linear-gradient(135deg, #059669, #10b981); }
.sdb-stat--cyan .sdb-stat__icon { background: linear-gradient(135deg, #0891b2, #06b6d4); }
.sdb-stat__delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.sdb-stat__delta svg { width: 13px; height: 13px; }
.sdb-stat__delta--up { color: #059669; background: #ecfdf5; }
.sdb-stat__delta--down { color: #dc2626; background: #fef2f2; }
.sdb-stat__value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sdb-stat__label { font-size: 0.85rem; font-weight: 700; color: #374151; }
.sdb-stat__sub { font-size: 0.75rem; color: var(--sdb-muted); font-weight: 500; }

/* ---------- Cards / grids ---------- */
.sdb-grid { display: grid; gap: 18px; }
.sdb-grid--main { grid-template-columns: 1.7fr 1fr; }
.sdb-grid--tri { grid-template-columns: repeat(3, 1fr); }
.sdb-card {
  background: var(--sdb-surface);
  border: 1px solid var(--sdb-border);
  border-radius: var(--sdb-radius);
  box-shadow: var(--sdb-shadow);
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; min-width: 0;
}
.sdb-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sdb-card__title { display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.sdb-card__title svg { width: 18px; height: 18px; color: var(--sdb-accent); }
.sdb-card__link {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer;
  font-size: 0.8rem; font-weight: 700; color: var(--sdb-accent); padding: 4px 6px; border-radius: 8px; transition: background 0.15s ease;
}
.sdb-card__link svg { width: 13px; height: 13px; }
.sdb-card__link:hover { background: color-mix(in srgb, var(--sdb-accent) 10%, transparent); }

/* Segmented period control */
.sdb-seg { display: inline-flex; background: #f1f2f8; border-radius: 10px; padding: 3px; gap: 2px; }
.sdb-seg__btn { border: 0; background: transparent; cursor: pointer; font-size: 0.78rem; font-weight: 700; color: var(--sdb-muted); padding: 5px 12px; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; }
.sdb-seg__btn.is-active { background: #fff; color: var(--sdb-accent); box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.2); }

/* ---------- Earnings chart ---------- */
.sdb-chart { position: relative; width: 100%; }
.sdb-chart__svg { width: 100%; height: 240px; display: block; overflow: visible; }
.sdb-chart__grid { stroke: #eef0f6; stroke-width: 1; }
.sdb-chart__area { opacity: 0; animation: sdbFade 0.7s ease 0.2s forwards; }
.sdb-chart__line { fill: none; stroke: url(#sdbLineGrad); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sdbDraw 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes sdbDraw { to { stroke-dashoffset: 0; } }
@keyframes sdbFade { to { opacity: 1; } }
.sdb-chart__dot { fill: #fff; stroke: var(--sdb-accent); stroke-width: 2.4; transition: r 0.12s ease; }
.sdb-chart__dot.is-active { fill: var(--sdb-accent); }
.sdb-chart__cursor { stroke: var(--sdb-accent); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.55; }
.sdb-chart__xaxis { position: relative; height: 16px; margin-top: 2px; }
.sdb-chart__xaxis span { position: absolute; transform: translateX(-50%); font-size: 10.5px; font-weight: 600; color: #9aa1af; white-space: nowrap; }
.sdb-chart__tip {
  position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none;
  background: #1f2430; color: #fff; border-radius: 10px; padding: 7px 11px; z-index: 4;
  display: flex; flex-direction: column; gap: 1px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); white-space: nowrap;
}
.sdb-chart__tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #1f2430; border-radius: 2px; }
.sdb-chart__tip-label { font-size: 10.5px; opacity: 0.75; font-weight: 600; }
.sdb-chart__tip-val { font-size: 13.5px; font-weight: 800; }
.sdb-chart__empty, .sdb-chart__skel { height: 240px; display: grid; place-items: center; border-radius: 12px; }
.sdb-chart__empty { flex-direction: column; text-align: center; color: var(--sdb-muted); gap: 10px; background: #fafbff; border: 1px dashed var(--sdb-border); padding: 20px; }
.sdb-chart__empty { display: flex; }
.sdb-chart__empty-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--sdb-accent) 10%, transparent); color: var(--sdb-accent); }
.sdb-chart__empty-icon svg { width: 22px; height: 22px; }
.sdb-chart__empty p { max-width: 340px; font-size: 0.85rem; margin: 0; }
.sdb-chart__skel { background: linear-gradient(100deg, #f3f4f8 30%, #eceef5 50%, #f3f4f8 70%); background-size: 200% 100%; animation: sdbShimmer 1.3s linear infinite; }

/* ---------- List rows (orders / leads / messages) ---------- */
.sdb-list { display: flex; flex-direction: column; gap: 4px; }
.sdb-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; padding: 10px; border-radius: 12px;
  transition: background 0.14s ease, transform 0.14s ease;
}
.sdb-row:hover { background: #f6f7fb; transform: translateX(2px); }
.sdb-row__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.sdb-row__ic svg { width: 18px; height: 18px; }
.sdb-row__ic--indigo { background: color-mix(in srgb, var(--indigo-light) 14%, transparent); color: var(--indigo); }
.sdb-row__ic--amber { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.sdb-row__avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.sdb-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sdb-row__title { font-size: 0.88rem; font-weight: 700; color: #1f2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdb-row__meta { font-size: 0.76rem; color: var(--sdb-muted); font-weight: 500; }
.sdb-row__meta--snippet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sdb-row__end { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sdb-row__amount { font-size: 0.9rem; font-weight: 800; color: #1f2430; }
.sdb-row__unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sdb-accent); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }

/* Status chips */
.sdb-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: capitalize; white-space: nowrap; }
.sdb-chip--green { background: #ecfdf5; color: #15803d; }
.sdb-chip--red { background: #fef2f2; color: #b91c1c; }
.sdb-chip--amber { background: #fffbeb; color: #a16207; }
.sdb-chip--indigo { background: #eef2ff; color: #4338ca; }
.sdb-chip--new { background: var(--sdb-accent); color: #fff; }

/* ---------- Performance summary ---------- */
.sdb-perf { display: flex; flex-direction: column; gap: 16px; padding-top: 2px; }
.sdb-perf__row { display: flex; flex-direction: column; gap: 7px; }
.sdb-perf__head { display: flex; align-items: baseline; justify-content: space-between; }
.sdb-perf__label { font-size: 0.83rem; font-weight: 600; color: #374151; }
.sdb-perf__value { font-size: 0.95rem; font-weight: 800; color: #1f2430; }
.sdb-perf__value--muted { color: #9aa1af; }
.sdb-perf__track { height: 8px; border-radius: 999px; background: #eef0f6; overflow: hidden; }
.sdb-perf__fill { display: block; height: 100%; border-radius: 999px; transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.sdb-perf__fill--violet { background: linear-gradient(90deg, var(--accent), #a855f7); }
.sdb-perf__fill--blue { background: linear-gradient(90deg, var(--primary), var(--primary-bright)); }
.sdb-perf__fill--green { background: linear-gradient(90deg, #059669, #10b981); }
.sdb-perf__fill--cyan { background: linear-gradient(90deg, #0891b2, #06b6d4); }
.sdb-perf__note { font-size: 0.74rem; color: #9aa1af; font-style: italic; }

/* ---------- Empty inline ---------- */
.sdb-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 12px; text-align: center; color: var(--sdb-muted); }
.sdb-empty__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #f3f4f8; color: #9aa1af; }
.sdb-empty__icon svg { width: 20px; height: 20px; }
.sdb-empty p { margin: 0; font-size: 0.85rem; font-weight: 500; }

/* ---------- Fatal / skeleton ---------- */
.sdb-fatal { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 60px 20px; }
.sdb-fatal__icon { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: #f3f4f8; }
.sdb-fatal p { margin: 0; color: var(--sdb-muted); font-weight: 600; }
.sdb-skel { display: flex; flex-direction: column; gap: 20px; }
.sdb-skel__banner { height: 148px; border-radius: 22px; }
.sdb-skel__stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sdb-skel__stat { height: 132px; border-radius: 16px; }
.sdb-skel__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; }
.sdb-skel__chart, .sdb-skel__side { height: 300px; border-radius: 16px; }
.sdb-skel__banner, .sdb-skel__stat, .sdb-skel__chart, .sdb-skel__side {
  background: linear-gradient(100deg, #f3f4f8 30%, #eceef5 50%, #f3f4f8 70%); background-size: 200% 100%; animation: sdbShimmer 1.3s linear infinite;
}
@keyframes sdbShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .sdb-stats { grid-template-columns: repeat(3, 1fr); }
  .sdb-grid--main { grid-template-columns: 1fr; }
  .sdb-grid--tri { grid-template-columns: 1fr 1fr; }
  .sdb-skel__stats { grid-template-columns: repeat(3, 1fr); }
  .sdb-skel__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sdb { padding: 16px 14px 44px; gap: 16px; }
  .sdb-hero { flex-direction: column; align-items: flex-start; padding: 24px; }
  .sdb-hero__art { display: none; }
  .sdb-hero__title { font-size: 1.4rem; }
  .sdb-stats { grid-template-columns: 1fr 1fr; }
  .sdb-grid--tri { grid-template-columns: 1fr; }
  .sdb-skel__stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
  .sdb-stats { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sdb-enter { opacity: 1; transform: none; animation: none; }
  .sdb-hero__wave { animation: none; }
  .sdb-chart__line { stroke-dashoffset: 0; animation: none; }
  .sdb-chart__area { opacity: 1; animation: none; }
  .sdb-btn:hover, .sdb-stat:hover, .sdb-row:hover { transform: none; }
  .sdb-perf__fill { transition: none; }
  .sdb-skel__banner, .sdb-skel__stat, .sdb-skel__chart, .sdb-skel__side, .sdb-chart__skel { animation: none; }
}

/* ============================================================
   BUYER NEED DETAIL (4-tab redesign) — nd3-* classes
   ============================================================ */
.nd3 { --nd3-purple: var(--accent); --nd3-purple-2: #6d28d9; --nd3-ink: #1e1b4b; --nd3-line: #e2e8f0; }

/* Top bar */
.nd3-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 14px; flex-wrap: wrap; }
.nd3-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: #64748b; font-size: 14px; font-weight: 600; text-decoration: none; transition: color .16s ease;
}
.nd3-back:hover { color: var(--nd3-purple); }
.nd3-topbar__actions { display: flex; align-items: center; gap: 10px; }
.nd3-sharebtn, .nd3-morebtn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  background: #fff; color: #475569; border: 1.5px solid var(--nd3-line); border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.nd3-sharebtn:hover, .nd3-morebtn:hover { border-color: #c4b5fd; color: var(--nd3-purple); box-shadow: 0 4px 12px -6px rgba(124,58,237,0.4); }
.nd3-more { position: relative; }
.nd3-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 210px;
  background: #fff; border: 1px solid var(--nd3-line); border-radius: 14px; padding: 8px;
  box-shadow: 0 18px 44px -14px rgba(15,23,42,0.32);
}
.nd3-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; background: transparent; border: none; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: #334155; cursor: pointer; transition: background .14s ease, color .14s ease;
}
.nd3-menu__item:hover:not(:disabled) { background: #f5f3ff; color: var(--nd3-purple); }
.nd3-menu__item:disabled { opacity: .5; cursor: not-allowed; }
.nd3-menu__item--danger { color: #dc2626; }
.nd3-menu__item--danger:hover:not(:disabled) { background: #fef2f2; color: #dc2626; }
.nd3-menu__divider { height: 1px; background: var(--nd3-line); margin: 6px 4px; }

/* Hero */
.nd3-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px;
  padding: 30px 34px; border-radius: 24px; margin-bottom: 18px; color: #fff;
  background: linear-gradient(130deg, #1e1b4b 0%, #312e81 38%, #4338ca 62%, #6d28d9 82%, var(--accent) 100%);
  box-shadow: 0 24px 50px -22px rgba(49, 46, 129, 0.6);
}
.nd3-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 220px at 92% -10%, rgba(167,139,250,0.36), transparent 60%),
              radial-gradient(420px 200px at 8% 120%, rgba(99,102,241,0.32), transparent 60%);
}
.nd3-hero__body { position: relative; z-index: 1; flex: 1; min-width: 0; }
.nd3-hero__eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.nd3-hero__eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: #ddd6fe; background: rgba(255,255,255,0.12); padding: 5px 11px; border-radius: 999px;
}
.nd3-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.nd3-status__dot { width: 8px; height: 8px; border-radius: 50%; }
.nd3-hero__title { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; margin: 0 0 10px; }
.nd3-hero__desc { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.86); margin: 0 0 16px; max-width: 640px; }
.nd3-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.nd3-hchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,0.13); color: #fff; font-size: 13px; font-weight: 600;
}
.nd3-hero__poster { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nd3-hero__avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.9); color: var(--nd3-purple-2); font-weight: 800; font-size: 14px;
}
.nd3-hero__poster-name { font-size: 14px; font-weight: 600; color: #fff; }
.nd3-verified {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: rgba(34,197,94,0.22); color: #bbf7d0; font-size: 12px; font-weight: 700;
}
.nd3-hero__art { position: relative; z-index: 1; flex-shrink: 0; line-height: 0; filter: drop-shadow(0 18px 26px rgba(23,8,60,0.4)); }

/* Tabs */
.nd3-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--nd3-line); margin-bottom: 18px; overflow-x: auto; }
.nd3-tab {
  position: relative; padding: 12px 18px; background: transparent; border: none; cursor: pointer;
  font-size: 14.5px; font-weight: 600; color: #64748b; white-space: nowrap; transition: color .16s ease;
}
.nd3-tab:hover { color: var(--nd3-purple); }
.nd3-tab--active { color: var(--nd3-purple-2); }
.nd3-tab--active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 3px;
  background: var(--nd3-purple); border-radius: 3px 3px 0 0;
}

/* Layout */
.nd3-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; margin-bottom: 18px; }
.nd3-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nd3-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }

/* Cards */
.nd3-card { background: #fff; border: 1px solid var(--nd3-line); border-radius: 16px; padding: 22px; box-shadow: 0 1px 3px rgba(15,23,42,0.05); }
.nd3-card__title { font-size: 17px; font-weight: 700; color: #0f172a; margin: 0 0 14px; }
.nd3-card__titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nd3-card__titlerow .nd3-card__title { margin: 0; }
.nd3-viewall { background: none; border: none; color: var(--nd3-purple); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.nd3-viewall:hover { text-decoration: underline; }
.nd3-desc { font-size: 15px; line-height: 1.6; color: #334155; white-space: pre-line; margin: 0 0 18px; }

/* Meta grid */
.nd3-metagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.nd3-meta { display: flex; flex-direction: column; gap: 3px; }
.nd3-meta__lbl { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #94a3b8; }
.nd3-meta__val { font-size: 14.5px; font-weight: 600; color: #1e293b; }

/* Attachments */
.nd3-attachments { display: flex; flex-wrap: wrap; gap: 10px; }
.nd3-attach {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px;
  background: #f8fafc; border: 1px solid var(--nd3-line); color: #475569; font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: border-color .16s ease, color .16s ease;
}
.nd3-attach:hover { border-color: #c4b5fd; color: var(--nd3-purple); }
.nd3-attach--sm { padding: 6px 11px; font-size: 12.5px; }

/* Responses */
.nd3-resp-list { display: flex; flex-direction: column; gap: 14px; }
.nd3-resp { border: 1px solid var(--nd3-line); border-radius: 14px; padding: 16px 18px; transition: box-shadow .16s ease, border-color .16s ease; }
.nd3-resp:hover { box-shadow: 0 8px 22px -14px rgba(15,23,42,0.28); }
.nd3-resp--short { border-color: #c4b5fd; box-shadow: 0 0 0 1px #c4b5fd inset; background: #faf5ff; }
.nd3-resp--hired { border-color: #86efac; background: #f0fdf4; }
.nd3-resp__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.nd3-resp__avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #4338ca); color: #fff; font-weight: 800; font-size: 15px; }
.nd3-resp__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nd3-resp__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: #0f172a; }
.nd3-vseller { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #eff6ff; color: var(--primary); font-size: 11px; font-weight: 700; }
.nd3-resp__ago { font-size: 12.5px; color: #94a3b8; flex-shrink: 0; }
.nd3-resp__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nd3-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12.5px; font-weight: 600; }
.nd3-chip--green { background: #f0fdf4; color: #16a34a; }
.nd3-resp__msg { font-size: 14px; line-height: 1.55; color: #334155; margin: 0 0 12px; }
.nd3-readmore { display: inline; margin-left: 6px; padding: 0; background: none; border: none; color: var(--nd3-purple); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.nd3-readmore:hover { text-decoration: underline; }
.nd3-resp__attach { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nd3-resp__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nd3-rbtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px;
  background: #fff; border: 1.5px solid var(--nd3-line); color: #475569; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.nd3-rbtn:hover:not(:disabled) { border-color: #c4b5fd; color: var(--nd3-purple); }
.nd3-rbtn:disabled { opacity: .55; cursor: not-allowed; }
.nd3-rbtn--active { border-color: var(--nd3-purple); color: var(--nd3-purple); background: #f5f3ff; }
.nd3-rbtn--hire { background: linear-gradient(135deg, var(--primary), var(--accent)); border-color: transparent; color: #fff; }
.nd3-rbtn--hire:hover:not(:disabled) { color: #fff; filter: brightness(1.05); }
.nd3-hired-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; background: #dcfce7; color: #16a34a; font-size: 13px; font-weight: 700; }

/* Empty state */
.nd3-empty { text-align: center; padding: 30px 16px; }
.nd3-empty__icon { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: #f5f3ff; }
.nd3-empty__title { font-size: 16px; font-weight: 700; color: #334155; margin: 0 0 6px; }
.nd3-empty__text { font-size: 14px; color: #64748b; line-height: 1.55; max-width: 380px; margin: 0 auto 16px; }
.nd3-empty__btn { padding: 10px 20px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }

/* Responses header controls */
.nd3-resp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.nd3-resp-head .nd3-card__title { margin: 0; }
.nd3-resp-controls { display: flex; gap: 10px; }
.nd3-select { padding: 8px 12px; border-radius: 9px; border: 1.5px solid var(--nd3-line); background: #fff; font-size: 13.5px; font-weight: 600; color: #475569; cursor: pointer; }
.nd3-select:focus-visible { outline: 2px solid var(--nd3-purple); outline-offset: 1px; }

/* Timeline */
.nd3-timeline { list-style: none; margin: 0; padding: 0; }
.nd3-tl { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.nd3-tl:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--nd3-line); }
.nd3-tl__dot { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #f5f3ff; color: var(--nd3-purple); z-index: 1; }
.nd3-tl__body { padding-top: 4px; }
.nd3-tl__label { font-size: 14.5px; font-weight: 600; color: #1e293b; }
.nd3-tl__time { font-size: 12.5px; color: #94a3b8; margin-top: 2px; }

/* Analytics */
.nd3-analytics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.nd3-metric { text-align: center; padding: 18px 12px; border-radius: 14px; background: #f8fafc; border: 1px solid var(--nd3-line); }
.nd3-metric__num { display: block; font-size: 24px; font-weight: 800; color: var(--nd3-purple-2); }
.nd3-metric__lbl { display: block; font-size: 12.5px; font-weight: 600; color: #64748b; margin-top: 4px; }
.nd3-analytics__empty { text-align: center; font-size: 14px; color: #64748b; margin: 16px 0 0; }

/* Sidebar */
.nd3-side__title { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0 0 14px; }
.nd3-statusblock { display: flex; flex-direction: column; gap: 12px; }
.nd3-statuspill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.nd3-statuspill__dot { width: 9px; height: 9px; border-radius: 50%; }
.nd3-quickbtn { padding: 9px 14px; border-radius: 9px; border: 1.5px solid var(--nd3-line); background: #fff; color: #475569; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .16s ease, color .16s ease; }
.nd3-quickbtn:hover:not(:disabled) { border-color: #c4b5fd; color: var(--nd3-purple); }
.nd3-quickbtn:disabled { opacity: .55; cursor: not-allowed; }
.nd3-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nd3-insight { text-align: center; padding: 12px 6px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--nd3-line); }
.nd3-insight__num { display: block; font-size: 20px; font-weight: 800; color: #0f172a; }
.nd3-insight__lbl { display: block; font-size: 11.5px; font-weight: 600; color: #64748b; margin-top: 2px; }
.nd3-tips { background: linear-gradient(160deg, #faf5ff, #fff); }
.nd3-tiplist { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.nd3-tiplist li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: #475569; }
.nd3-tiplist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #16a34a; font-weight: 800; }
.nd3-improve { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.nd3-improve:hover { filter: brightness(1.05); }
.nd3-actions { display: flex; flex-direction: column; gap: 8px; }
.nd3-action { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--nd3-line); background: #fff; color: #334155; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.nd3-action:hover:not(:disabled) { border-color: #c4b5fd; color: var(--nd3-purple); background: #faf5ff; }
.nd3-action:disabled { opacity: .55; cursor: not-allowed; }
.nd3-action--danger { color: #dc2626; }
.nd3-action--danger:hover:not(:disabled) { border-color: #fecaca; color: #dc2626; background: #fef2f2; }

/* Boost banner */
.nd3-boost { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border-radius: 18px; background: #fff; border: 1px solid var(--nd3-line); box-shadow: 0 1px 3px rgba(15,23,42,0.05); margin-bottom: 20px; flex-wrap: wrap; }
.nd3-boost__title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: #0f172a; }
.nd3-boost__title svg { color: var(--nd3-purple); }
.nd3-boost__sub { font-size: 14px; color: #64748b; margin: 6px 0 0; line-height: 1.5; max-width: 560px; }
.nd3-boost__btn { flex-shrink: 0; padding: 12px 22px; border-radius: 11px; border: none; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.nd3-boost__btn:hover { filter: brightness(1.05); }

/* Responsive */
@media (max-width: 960px) {
  .nd3-layout { grid-template-columns: 1fr; }
  .nd3-side { position: static; }
}
@media (max-width: 640px) {
  .nd3-hero { flex-direction: column; align-items: flex-start; padding: 24px 20px; border-radius: 18px; }
  .nd3-hero__art { display: none; }
  .nd3-hero__title { font-size: 24px; }
  .nd3-metagrid { grid-template-columns: 1fr; }
  .nd3-boost { flex-direction: column; align-items: flex-start; }
  .nd3-boost__btn { width: 100%; }
  .nd3-resp__actions .nd3-rbtn, .nd3-resp__actions .nd3-hired-badge { flex: 1 1 auto; justify-content: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nd3-back, .nd3-tab, .nd3-sharebtn, .nd3-morebtn, .nd3-menu__item, .nd3-resp,
  .nd3-rbtn, .nd3-action, .nd3-quickbtn, .nd3-attach, .nd3-improve, .nd3-boost__btn { transition: none; }
}

/* ==================================================================
 *  Post a Need — pn-* design system (pixel-perfect redesign)
 * ================================================================== */
.pn-page { background: #f8f9fb; }
.pn-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px 48px; }

/* Hero */
.pn-hero {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: linear-gradient(120deg, #2e1065 0%, #4c1d95 42%, #6d28d9 78%, var(--accent) 100%);
  border-radius: 20px;
  padding: 30px 36px;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(76, 29, 149, 0.55);
}
.pn-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 220px at 88% -10%, rgba(167,139,250,0.35), transparent 60%);
  pointer-events: none;
}
.pn-hero__text { position: relative; z-index: 1; }
.pn-hero__eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #c4b5fd; }
.pn-hero__title { margin: 0 0 8px; font-size: 32px; line-height: 1.1; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.pn-hero__sub { margin: 0; font-size: 15px; color: #ddd6fe; max-width: 560px; }
.pn-hero__art { position: relative; z-index: 1; flex-shrink: 0; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.28)); }

/* Stepper */
.pn-stepper-card {
  background: #fff; border: 1px solid #ecebf3; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
  padding: 18px 24px; margin-top: 18px;
}
.pn-stepper { display: flex; align-items: flex-start; }
.pn-step-cell { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.pn-step-cell:last-child { flex: 0 0 auto; }
.pn-step { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pn-step__num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #94a3b8;
  background: #f1f5f9; border: 2px solid #e2e8f0;
}
.pn-step.is-active .pn-step__num { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 10px -2px rgba(124,58,237,0.5); }
.pn-step.is-done .pn-step__num { background: #ede9fe; border-color: #c4b5fd; color: var(--accent); }
.pn-step__body { display: flex; flex-direction: column; min-width: 0; }
.pn-step__title { font-size: 14px; font-weight: 700; color: #475569; line-height: 1.2; white-space: nowrap; }
.pn-step.is-active .pn-step__title { color: #4c1d95; }
.pn-step__sub { font-size: 12px; color: #94a3b8; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-step__connector { flex: 1 1 auto; height: 0; margin: 0 14px; border-top: 2px dashed #dbdae7; min-width: 18px; }

/* Grid */
.pn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; margin-top: 22px; align-items: start; }
.pn-main { min-width: 0; }
.pn-card { background: #fff; border: 1px solid #ecebf3; border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,0.05); padding: 28px; }
.pn-card__top { display: flex; justify-content: flex-end; margin-bottom: 4px; }

/* Fields */
.pn-field { margin-bottom: 22px; }
.pn-field:last-of-type { margin-bottom: 0; }
.pn-label { display: block; font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
.pn-req { color: #ef4444; }
.pn-optional { color: #94a3b8; font-weight: 500; font-size: 13px; }
.pn-help { margin: -2px 0 10px; font-size: 13px; color: #64748b; }
.pn-input, .pn-textarea, .pn-select {
  width: 100%; box-sizing: border-box; font-family: inherit;
  border: 1.5px solid #e2e8f0; border-radius: 10px;
  padding: 12px 14px; font-size: 14.5px; color: #0f172a; background: #fff; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pn-textarea { resize: vertical; min-height: 118px; line-height: 1.5; }
.pn-select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px;
}
.pn-input:focus, .pn-textarea:focus, .pn-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,58,237,0.14); }
.pn-input::placeholder, .pn-textarea::placeholder { color: #9aa3b2; }
.pn-input--error, .pn-input--error:focus { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }
.pn-field-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; min-height: 16px; }
.pn-error { font-size: 12.5px; color: #dc2626; font-weight: 500; }
.pn-counter { font-size: 12px; color: #94a3b8; margin-left: auto; }

/* Attachments drop zone */
.pn-drop {
  border: 1.8px dashed #cbb9f2; border-radius: 12px; background: #faf9ff;
  padding: 26px 20px; text-align: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pn-drop:hover { border-color: #a78bfa; background: #f5f2ff; }
.pn-drop--over { border-color: var(--accent); background: #f0ebff; }
.pn-drop__icon { color: #8b5cf6; margin-bottom: 8px; }
.pn-drop__text { margin: 0 0 4px; font-size: 14px; color: #475569; }
.pn-drop__note { margin: 0; font-size: 12.5px; color: #94a3b8; }
.pn-browse {
  border: 1.5px solid var(--accent); color: var(--accent); background: #fff;
  border-radius: 8px; padding: 4px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 0.15s;
}
.pn-browse:hover { background: #f3f0ff; }
.pn-file-input { display: none; }
.pn-files { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pn-file { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid #ecebf3; border-radius: 10px; background: #fff; }
.pn-file__thumb { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #f1f5f9; }
.pn-file__thumb--doc { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #dc2626; background: #fef2f2; }
.pn-file__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pn-file__name { font-size: 13.5px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-file__size { font-size: 12px; color: #94a3b8; }
.pn-file__x { flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; border: none; background: #f1f5f9; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.pn-file__x:hover { background: #fee2e2; color: #dc2626; }

/* Budget row */
.pn-budget-row { display: grid; grid-template-columns: 1fr auto 1fr 150px; align-items: center; gap: 12px; }
.pn-dash { text-align: center; color: #94a3b8; font-weight: 600; }
.pn-select--currency { width: 150px; }
.pn-select--static { display: inline-flex; align-items: center; justify-content: center; background: var(--pn-muted-bg, #f1f5f9); color: var(--pn-text, #334155); font-weight: 600; cursor: default; pointer-events: none; }

/* Location row */
.pn-loc-row { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 12px; }
.pn-loc-city { position: relative; }
.pn-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; display: inline-flex; }
.pn-input--search { padding-left: 38px; }

/* Notify */
.pn-notify { margin-top: 22px; padding: 16px 18px; border: 1px solid #e9d5ff; background: #faf5ff; border-radius: 12px; }
.pn-notify__head { display: flex; align-items: center; gap: 14px; }
.pn-notify__title { display: block; font-size: 14px; font-weight: 700; color: #1e293b; }
.pn-notify__sub { display: block; font-size: 13px; color: #64748b; }
.pn-toggle { flex-shrink: 0; width: 46px; height: 26px; border-radius: 14px; border: none; background: #cbd5e1; position: relative; cursor: pointer; padding: 0; transition: background 0.2s; }
.pn-toggle--on { background: var(--accent); }
.pn-toggle__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left 0.2s; }
.pn-toggle--on .pn-toggle__knob { left: 23px; }
.pn-radius { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-left: 60px; }
.pn-radius__label { font-size: 13px; font-weight: 600; color: #475569; }
.pn-radius__select { border: 1px solid #d8b4fe; background: #f3e8ff; color: #6b21a8; border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 600; cursor: pointer; outline: none; }

/* Actions */
.pn-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid #f1f0f7; }
.pn-btn-cancel { border: 1.5px solid #e2e8f0; background: #fff; color: #475569; border-radius: 10px; padding: 12px 26px; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.pn-btn-cancel:hover { background: #f8fafc; border-color: #cbd5e1; }
.pn-btn-primary { display: inline-flex; align-items: center; gap: 8px; border: none; background: linear-gradient(135deg, var(--accent), #6d28d9); color: #fff; border-radius: 10px; padding: 12px 26px; font-size: 14.5px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px -6px rgba(124,58,237,0.6); transition: filter 0.15s, transform 0.1s; }
.pn-btn-primary:hover { filter: brightness(1.05); }
.pn-btn-primary:active { transform: translateY(1px); }
.pn-btn-primary:disabled { opacity: 0.7; cursor: default; }

/* Sidebar */
.pn-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 18px; }
.pn-side-card { background: #fff; border: 1px solid #ecebf3; border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,0.05); padding: 20px; }
.pn-side-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.pn-side-card__title { font-size: 15px; font-weight: 700; color: #1e293b; }
.pn-info { color: #b6bdc9; flex-shrink: 0; }

/* Quality score */
.pn-score { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pn-ring { flex-shrink: 0; }
.pn-ring__num { font-size: 22px; font-weight: 800; fill: #4c1d95; }
.pn-ring__den { font-size: 10px; font-weight: 600; fill: #94a3b8; }
.pn-score__text { display: flex; flex-direction: column; gap: 4px; }
.pn-score__label { font-size: 14px; font-weight: 700; }
.pn-score__hint { font-size: 12.5px; color: #64748b; line-height: 1.4; }
.pn-check-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pn-check { display: flex; align-items: flex-start; gap: 10px; }
.pn-check__icon { flex-shrink: 0; margin-top: 1px; }
.pn-check__body { display: flex; flex-direction: column; }
.pn-check__label { font-size: 13.5px; font-weight: 600; color: #334155; }
.pn-check.is-done .pn-check__label { color: #16a34a; }
.pn-check__hint { font-size: 12px; color: #94a3b8; line-height: 1.4; }
.pn-improve { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 10px; padding: 11px; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 8px 18px -8px rgba(109,40,217,0.6); transition: filter 0.15s; }
.pn-improve:hover { filter: brightness(1.06); }

/* Live preview */
.pn-preview { border: 1px solid #eef0f4; border-radius: 12px; padding: 16px; background: #fcfcfe; }
.pn-preview__badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: #16a34a; background: #dcfce7; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; }
.pn-preview__title { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; color: #1e293b; line-height: 1.35; }
.pn-preview__cat { display: inline-block; font-size: 12px; font-weight: 600; color: #6d28d9; background: #f3e8ff; border-radius: 6px; padding: 2px 8px; margin-bottom: 10px; }
.pn-preview__row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #64748b; margin-bottom: 12px; }
.pn-preview__row svg { color: #94a3b8; flex-shrink: 0; }
.pn-preview__budget { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #f8fafc; border-radius: 9px; margin-bottom: 12px; }
.pn-preview__budget-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.pn-preview__budget-val { font-size: 15px; font-weight: 700; color: #0f172a; }
.pn-preview__time { font-size: 12px; color: #94a3b8; }

.pn-notified { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; color: #16a34a; font-size: 13.5px; font-weight: 600; }

/* Responsive */
@media (max-width: 980px) {
  .pn-grid { grid-template-columns: 1fr; }
  .pn-side { position: static; order: 2; }
}
@media (max-width: 760px) {
  .pn-wrap { padding: 16px 14px 40px; }
  .pn-hero { padding: 24px 22px; }
  .pn-hero__art { display: none; }
  .pn-hero__title { font-size: 26px; }
  .pn-stepper { overflow-x: auto; gap: 0; padding-bottom: 4px; }
  .pn-step__sub { display: none; }
  .pn-step__connector { min-width: 12px; margin: 0 8px; }
  .pn-card { padding: 20px 16px; }
  .pn-budget-row { grid-template-columns: 1fr; }
  .pn-budget-row .pn-dash { display: none; }
  .pn-select--currency { width: 100%; }
  .pn-loc-row { grid-template-columns: 1fr; }
  .pn-radius { padding-left: 0; }
  .pn-actions { flex-direction: column-reverse; align-items: stretch; }
  .pn-actions .pn-btn-primary { justify-content: center; }
  .pn-actions .pn-btn-cancel { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pn-input, .pn-textarea, .pn-select, .pn-toggle, .pn-toggle__knob, .pn-btn-primary, .pn-improve, .pn-drop, .pn-browse, .pn-file__x { transition: none; }
  .pn-ring circle { transition: none !important; }
}

/* ============================================================
 *  My Responses (seller) — mr-*
 * ============================================================ */
.mr-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #312e81 70%, #4c1d95 100%);
  border-radius: 24px;
  padding: 36px 40px;
  margin: 20px 0 24px;
}
.mr-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mr-hero__text { min-width: 0; }
.mr-hero__aside { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.mr-hero__browse {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(15, 23, 42, 0.55); color: #fff; font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: 12px; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.mr-hero__browse:hover { background: rgba(15, 23, 42, 0.8); transform: translateY(-1px); }
.mr-hero__art { flex-shrink: 0; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.35)); }

/* Toolbar: filter tabs + sort */
.mr-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.mr-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mr-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
  font-size: 13px; font-weight: 600; cursor: pointer; background: #f1f5f9; color: #475569;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.mr-tab:hover { background: #e2e8f0; }
.mr-tab__badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(15,23,42,0.14); color: inherit;
}
.mr-tab--green { background: #f0fdf4; color: #16a34a; }
.mr-tab--amber { background: #fffbeb; color: #d97706; }
.mr-tab--red { background: #fef2f2; color: #dc2626; }
.mr-tab--gray { background: #f1f5f9; color: #64748b; }
.mr-tab.is-active { background: #ede9fe; color: #6d28d9; box-shadow: inset 0 0 0 1px #ddd6fe; }
.mr-tab.is-active .mr-tab__badge { background: #1e293b; color: #fff; }
.mr-sort { display: inline-flex; align-items: center; gap: 8px; }
.mr-sort__label { font-size: 13px; color: #64748b; font-weight: 500; white-space: nowrap; }
.mr-sort__select {
  appearance: none; -webkit-appearance: none;
  padding: 8px 32px 8px 12px; border-radius: 10px; border: 1px solid #e2e8f0;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13px; font-weight: 600; color: #334155; cursor: pointer;
}
.mr-sort__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Response cards */
.mr-list { display: flex; flex-direction: column; gap: 16px; }
.mr-card {
  position: relative; display: flex; background: #fff; border: 1px solid #eef0f4;
  border-radius: 14px; box-shadow: 0 1px 3px rgba(15,23,42,0.05); overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mr-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,0.08); transform: translateY(-1px); }
.mr-card__accent { width: 4px; background: #f97316; flex-shrink: 0; }
.mr-card__body { flex: 1; min-width: 0; padding: 18px 20px; }
.mr-card__head { display: flex; align-items: flex-start; gap: 12px; }
.mr-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; background: #f3f0ff; flex-shrink: 0;
}
.mr-card__headmain { flex: 1; min-width: 0; }
.mr-card__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.mr-card__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: #f8fafc; border: 1px solid #eef0f4; font-size: 12px; font-weight: 600; color: #475569;
}
.mr-card__headright { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.mr-card__badges { display: flex; align-items: center; gap: 8px; }
.mr-statuspill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.mr-card__responded { margin: 0; font-size: 12px; color: #94a3b8; white-space: nowrap; }

/* 3-dot menu */
.mr-menu { position: relative; }
.mr-menu__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; border: none; background: transparent; color: #94a3b8; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mr-menu__btn:hover { background: #f1f5f9; color: #475569; }
.mr-menu__pop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 168px;
  background: #fff; border: 1px solid #eef0f4; border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 32px rgba(15,23,42,0.16); display: flex; flex-direction: column;
}
.mr-menu__item {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: transparent;
  border-radius: 8px; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; text-decoration: none;
}
.mr-menu__item:hover { background: #f5f3ff; color: #6d28d9; }
.mr-menu__item--danger { color: #dc2626; }
.mr-menu__item--danger:hover { background: #fef2f2; color: #dc2626; }

/* Detail grid */
.mr-card__grid {
  display: grid; grid-template-columns: 1fr 1fr 2fr auto; align-items: center; gap: 16px;
  background: #f8fafc; border: 1px solid #eef0f4; border-radius: 12px; padding: 14px 16px; margin: 14px 0 12px;
}
.mr-metric { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mr-metric__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.mr-metric__value { font-size: 15px; font-weight: 700; color: #0f172a; }
.mr-metric__value--offer { color: #6d28d9; font-size: 18px; }
.mr-metric--msg { min-width: 0; }
.mr-metric__msg { font-size: 13px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-viewdetails {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px;
  background: #fff; border: 1.5px solid #ddd6fe; color: #6d28d9; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease;
}
.mr-viewdetails:hover { background: #f5f3ff; border-color: #c4b5fd; }
.mr-viewneed {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: #6d28d9; text-decoration: underline; text-underline-offset: 3px;
}
.mr-viewneed:hover { color: #5b21b6; }

/* Empty / end state */
.mr-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: #fff; border: 1.5px dashed #ddd6fe; border-radius: 16px; padding: 44px 24px;
}
.mr-empty--end { margin-top: 16px; padding: 32px 24px; }
.mr-empty__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px;
  border-radius: 999px; background: #f3f0ff; margin-bottom: 4px;
}
.mr-empty__title { margin: 0; font-size: 16px; font-weight: 700; color: #0f172a; }
.mr-empty__body { margin: 0 0 8px; font-size: 14px; color: #64748b; max-width: 380px; }

/* Buttons */
.mr-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; border: 1.5px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.mr-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.mr-btn--outline { background: #fff; border-color: #ddd6fe; color: #6d28d9; }
.mr-btn--outline:hover { background: #f5f3ff; border-color: #c4b5fd; }
.mr-btn--primary { background: #6d28d9; color: #fff; }
.mr-btn--primary:hover { background: #5b21b6; }
.mr-btn--ghost { background: #fff; border-color: #e2e8f0; color: #475569; }
.mr-btn--ghost:hover { background: #f8fafc; }
.mr-btn--danger { background: #dc2626; color: #fff; }
.mr-btn--danger:hover { background: #b91c1c; }

/* Modal */
.mr-modal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px);
}
.mr-modal__card {
  width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; background: #fff;
  border-radius: 18px; padding: 24px; box-shadow: 0 24px 64px rgba(15,23,42,0.28);
}
.mr-modal__card--sm { max-width: 420px; }
.mr-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mr-modal__title { margin: 0; font-size: 18px; font-weight: 700; color: #0f172a; }
.mr-modal__close {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; border: none; background: #f1f5f9; color: #64748b; cursor: pointer; flex-shrink: 0;
}
.mr-modal__close:hover { background: #e2e8f0; color: #334155; }
.mr-modal__badges { display: flex; gap: 8px; margin-bottom: 16px; }
.mr-modal__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: #f8fafc; border: 1px solid #eef0f4; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.mr-modal__section { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.mr-modal__message { margin: 0; font-size: 14px; line-height: 1.6; color: #334155; white-space: pre-wrap; }
.mr-modal__responded { margin: 0 0 18px; font-size: 12px; color: #94a3b8; }
.mr-modal__confirmtext { margin: 8px 0 20px; font-size: 14px; line-height: 1.6; color: #475569; }
.mr-modal__actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 860px) {
  .mr-card__grid { grid-template-columns: 1fr 1fr; }
  .mr-metric--msg { grid-column: 1 / -1; }
  .mr-viewdetails { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 640px) {
  .mr-hero { padding: 24px 20px; margin: 14px 0 20px; }
  .mr-hero__art { display: none; }
  .mr-toolbar { flex-direction: column; align-items: stretch; }
  .mr-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .mr-tab { flex-shrink: 0; }
  .mr-sort { justify-content: space-between; }
  .mr-card__head { flex-wrap: wrap; }
  .mr-card__headright { align-items: flex-start; width: 100%; }
  .mr-card__grid { grid-template-columns: 1fr; }
  .mr-modal__meta { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-card, .mr-hero__browse, .mr-tab, .mr-menu__btn, .mr-viewdetails, .mr-btn { transition: none; }
}


/* ============================================================
   SELLER EARNINGS & COMMISSIONS — searn__*  (fresh rebuild)
   Fully self-contained; scoped under .searn (no sdash coupling)
   ============================================================ */
.searn { background: #f8f9fb; }
.searn__wrap {
  width: var(--shell-width);
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 0 48px;
}

/* ── Hero (contained rounded card) ── */
.searn__hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 40px;
  border-radius: 20px;
  background: linear-gradient(120deg, #1e1b4b 0%, #312e81 45%, #4338ca 100%);
  box-shadow: 0 14px 40px -18px rgba(49, 46, 129, 0.6);
}
.searn__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(124, 58, 237, 0.45), transparent 60%),
    radial-gradient(80% 120% at 0% 100%, rgba(59, 130, 246, 0.25), transparent 55%);
  pointer-events: none;
}
.searn__hero > * { position: relative; z-index: 1; }
.searn__hero-text { flex: 1 1 auto; min-width: 0; }
.searn__hero-eyebrow {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c7d2fe;
}
.searn__hero-title {
  margin: 0 0 10px;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.01em;
}
.searn__hero-sub {
  margin: 0 0 22px;
  max-width: 520px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #c7cbe8;
}
.searn__hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.searn__hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.searn__hero-btn svg { width: 18px; height: 18px; }
.searn__hero-btn:hover { transform: translateY(-1px); }
.searn__hero-btn--solid { background: #fff; color: #1e1b4b; }
.searn__hero-btn--solid:hover { background: #f1f5ff; }
.searn__hero-btn--ghost { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.55); color: #fff; }
.searn__hero-btn--ghost:hover { background: rgba(255,255,255,0.18); border-color: #fff; }
.searn__hero-art { flex: 0 0 auto; line-height: 0; }

/* ── Stats: 4 separate floating cards ── */
.searn__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 18px;
  padding: 0;
}
.searn__stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 20px;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  box-shadow: 0 10px 30px -20px rgba(15, 23, 42, 0.35);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.searn__stat-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(15, 23, 42, 0.4); }
.searn__stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  margin-bottom: 10px;
}
.searn__stat-value { font-size: 1.5rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; }
.searn__stat-label { font-size: 0.86rem; font-weight: 600; color: #64748b; }
.searn__stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #16a34a;
}
.searn__stat-trend svg { width: 13px; height: 13px; }
.searn__stat-trend--down { color: #dc2626; }
.searn__trend-flip { display: inline-flex; transform: scaleY(-1); }

/* ── Content ── */
.searn__content { margin-top: 28px; }

/* ── Toolbar: tabs (underline) + date range ── */
.searn__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e9ecf2;
  margin-bottom: 24px;
}
.searn__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.searn__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 6px;
  margin-right: 12px;
  background: none;
  border: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.searn__tab:hover { color: #4c1d95; }
.searn__tab--active { color: #6d28d9; border-bottom-color: #6d28d9; }
.searn__tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 0.7rem;
  font-weight: 700;
}
.searn__daterange { position: relative; padding-bottom: 8px; }
.searn__date-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.searn__date-btn svg { width: 15px; height: 15px; color: var(--accent); }
.searn__date-btn:hover { border-color: #c4b5fd; }
.searn__date-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: 14px;
  box-shadow: 0 20px 44px -20px rgba(15, 23, 42, 0.4);
}
.searn__date-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.searn__date-preset {
  padding: 6px 11px;
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6d28d9;
  cursor: pointer;
}
.searn__date-preset:hover { background: #ede9fe; }
.searn__date-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; font-weight: 600; color: #64748b; }
.searn__date-field input {
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #0f172a;
}
.searn__date-field input:focus-visible { outline: 2px solid #a78bfa; outline-offset: 1px; border-color: #a78bfa; }
.searn__date-apply {
  padding: 9px;
  background: #6d28d9;
  border: none;
  border-radius: 9px;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}
.searn__date-apply:hover { background: #5b21b6; }

/* ── Panels ── */
.searn__panel {
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  box-shadow: 0 10px 30px -22px rgba(15, 23, 42, 0.3);
  overflow: hidden;
}
.searn__panel + .searn__panel { margin-top: 20px; }
.searn__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #f1f5f9;
}
.searn__panel-title { margin: 0; font-size: 1.02rem; font-weight: 700; color: #0f172a; }
.searn__panel-link { font-size: 0.82rem; font-weight: 600; color: #94a3b8; }
.searn__panel-body { padding: 20px 22px; }
.searn__panel-body--flush { padding: 0; }

/* ── Overview grid ── */
.searn__overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 22px;
  align-items: start;
}

/* ── Earnings breakdown ── */
.searn__breakdown { display: flex; flex-direction: column; }
.searn__breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 22px;
  border-bottom: 1px solid #f1f5f9;
}
.searn__breakdown-row:last-child { border-bottom: none; }
.searn__breakdown-row--highlight { background: #f5f3ff; border-radius: 12px; margin: 8px; padding: 15px 18px; }
.searn__breakdown-label {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
}
.searn__breakdown-row--highlight .searn__breakdown-label { color: #4c1d95; font-weight: 700; }
.searn__breakdown-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
.searn__breakdown-icon svg { width: 16px; height: 16px; }
.searn__breakdown-value { font-size: 0.98rem; font-weight: 700; color: #0f172a; }
.searn__breakdown-value--green  { color: #16a34a; }
.searn__breakdown-value--amber  { color: #d97706; }
.searn__breakdown-value--red    { color: #ef4444; }
.searn__breakdown-value--indigo { color: #6d28d9; font-size: 1.05rem; }

/* ── Transaction drill-down links (open scoped earnings line-item list) ── */
.searn__txn-links { padding: 12px 18px 16px; border-top: 1px solid #f1f5f9; }
.searn__txn-links-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin-bottom: 9px;
}
.searn__txn-links-row { display: flex; flex-wrap: wrap; gap: 8px; }
.searn__txn-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4c1d95;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.searn__txn-link:hover { background: #f5f3ff; border-color: #ddd6fe; }
.searn__txn-link:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.searn__txn-link svg { width: 13px; height: 13px; }

@media (prefers-reduced-motion: reduce) { .searn__txn-link { transition: none; } }

/* ── Chart ── */
.searn__chart-head { display: flex; align-items: center; justify-content: space-between; }
.searn__chart-menu { position: relative; }
.searn__chart-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}
.searn__chart-select svg { width: 13px; height: 13px; }
.searn__chart-select:hover { border-color: #c4b5fd; }
.searn__chart-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 150px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: 11px;
  box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.4);
}
.searn__chart-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 11px;
  background: none;
  border: none;
  border-radius: 7px;
  font-size: 0.83rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.searn__chart-option:hover { background: #f5f3ff; color: #6d28d9; }
.searn__chart-option.is-active { background: #ede9fe; color: #6d28d9; }
.searn__chart-svg { width: 100%; height: auto; display: block; }
.searn__chart-axis { font-size: 11px; fill: #94a3b8; font-weight: 500; }

/* ── List rows (commissions / leads) ── */
.searn__row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
}
.searn__row-item:last-child { border-bottom: none; }
.searn__row-left { min-width: 0; }
.searn__row-name { font-size: 0.92rem; font-weight: 700; color: #0f172a; text-transform: capitalize; }
.searn__row-meta { font-size: 0.8rem; color: #94a3b8; margin-top: 2px; }
.searn__row-right { text-align: right; flex: 0 0 auto; }
.searn__amount { display: block; font-size: 0.95rem; font-weight: 700; }
.searn__amount--debit  { color: #ef4444; }
.searn__amount--credit { color: #16a34a; font-size: 0.78rem; margin-top: 2px; }

/* ── Pagination ── */
.searn__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 22px;
  border-top: 1px solid #f1f5f9;
}
.searn__page-btn {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.searn__page-btn:hover { background: #f5f3ff; border-color: #c4b5fd; }
.searn__page-info { font-size: 0.84rem; font-weight: 600; color: #94a3b8; }

/* ── Empty states ── */
.searn__empty { padding: 40px 20px; text-align: center; }
.searn__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #f5f3ff;
  color: var(--accent);
  margin-bottom: 14px;
}
.searn__empty-title { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: #0f172a; }
.searn__empty-body { margin: 0; font-size: 0.86rem; color: #94a3b8; }

/* ── Payment proofs ── */
.searn__proofs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.searn__proof-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  transition: box-shadow 0.15s ease;
}
.searn__proof-card:hover { box-shadow: 0 14px 30px -20px rgba(15, 23, 42, 0.35); }
.searn__proof-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.searn__proof-id { margin: 0; font-size: 0.9rem; font-weight: 700; color: #0f172a; }
.searn__proof-meta { margin: 2px 0 0; font-size: 0.76rem; color: #94a3b8; }
.searn__proof-amount { font-size: 1.05rem; font-weight: 800; color: #6d28d9; }
.searn__proof-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.searn__proof-tag {
  padding: 4px 10px;
  background: #ede9fe;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #6d28d9;
  text-transform: capitalize;
}
.searn__proof-ref { padding: 4px 10px; background: #f1f5f9; border-radius: 7px; font-size: 0.74rem; font-weight: 600; color: #64748b; }
.searn__proof-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.searn__proof-link svg { width: 15px; height: 15px; }
.searn__proof-link:hover { color: var(--primary-dark); }
.searn__proof-text { margin: 0; font-size: 0.84rem; color: #475569; line-height: 1.5; }
.searn__proof-actions { display: flex; gap: 10px; margin-top: 2px; }
.searn__proof-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  border-radius: 9px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.searn__proof-btn svg { width: 15px; height: 15px; }
.searn__proof-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.searn__proof-btn--approve { background: #16a34a; color: #fff; }
.searn__proof-btn--approve:hover:not(:disabled) { background: #15803d; }
.searn__proof-btn--reject { background: #fff; border-color: #fecaca; color: #dc2626; }
.searn__proof-btn--reject:hover:not(:disabled) { background: #fef2f2; }

/* ── Bottom info bar ── */
.searn__infobar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 18px 22px;
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  border-radius: 16px;
}
.searn__infobar-left { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; font-weight: 500; color: #4c1d95; }
.searn__infobar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #ede9fe;
  color: var(--accent);
  flex: 0 0 auto;
}
.searn__infobar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid #e9d5ff;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #6d28d9;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.searn__infobar-btn svg { width: 14px; height: 14px; }
.searn__infobar-btn:hover { background: #faf5ff; border-color: #d8b4fe; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .searn__stats { grid-template-columns: repeat(2, 1fr); }
  .searn__overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .searn__wrap { padding: 16px 0 40px; }
  .searn__hero { flex-direction: column; align-items: flex-start; text-align: left; padding: 26px 22px; }
  .searn__hero-art svg { width: 150px; height: auto; }
  .searn__hero-sub { max-width: none; }
  .searn__toolbar { flex-direction: column; align-items: stretch; }
  .searn__daterange { align-self: flex-end; }
}
@media (max-width: 520px) {
  .searn__stats { grid-template-columns: 1fr; margin-top: 16px; }
  .searn__infobar { flex-direction: column; align-items: flex-start; }
  .searn__proof-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .searn__hero-btn, .searn__stat-card, .searn__date-btn, .searn__chart-select, .searn__infobar-btn, .searn__proof-card { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
 *  SELLER · MY GIGS — premium management dashboard (sgigs)
 *  UI-only redesign. Uses existing data + design tokens.
 * ══════════════════════════════════════════════════════════════════ */
.sgigs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Workspace header ── */
.sgigs__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.sgigs__header-text { min-width: 0; }
.sgigs__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.sgigs__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14);
}
.sgigs__title {
  margin: 0;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.08;
}
.sgigs__subtitle {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 1rem;
  max-width: 58ch;
}
.sgigs__header-actions {
  display: flex;
  gap: 10px;
  flex: none;
}

/* ── Buttons ── */
.sgigs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
  white-space: nowrap;
}
.sgigs__btn:active { transform: translateY(1px); }
.sgigs__btn--primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}
.sgigs__btn--primary:hover { box-shadow: 0 12px 26px rgba(37, 99, 235, 0.34); transform: translateY(-1px); }
.sgigs__btn--ghost {
  background: var(--card-solid);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}
.sgigs__btn--ghost:hover { border-color: var(--border-strong); transform: translateY(-1px); }

/* ── Summary stat cards ── */
.sgigs__stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.sgigs-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 13px 15px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.sgigs-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); border-color: var(--border-strong); }
.sgigs-stat__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  flex: none;
}
.sgigs-stat[data-tone="brand"] .sgigs-stat__icon { background: #eff6ff; color: var(--primary); }
.sgigs-stat[data-tone="green"] .sgigs-stat__icon { background: #ecfdf5; color: #059669; }
.sgigs-stat[data-tone="amber"] .sgigs-stat__icon { background: #fffbeb; color: #d97706; }
.sgigs-stat[data-tone="slate"] .sgigs-stat__icon { background: #f1f5f9; color: #475569; }
.sgigs-stat[data-tone="violet"] .sgigs-stat__icon { background: #f5f3ff; color: var(--accent); }
.sgigs-stat[data-tone="blue"] .sgigs-stat__icon { background: #ecfeff; color: #0891b2; }
.sgigs-stat__meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sgigs-stat__label {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sgigs-stat__value { font-size: 1.75rem; font-weight: 800; line-height: 1.12; color: var(--text); letter-spacing: -0.02em; }
.sgigs-stat__desc { font-size: 0.72rem; font-weight: 550; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Panel ── */
.sgigs__panel {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* ── Toolbar ── */
.sgigs__toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: #ffffff;
  border-bottom: 1px solid #eef2f7;
}
.sgigs__tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.sgigs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.sgigs__tab:hover { color: var(--text); }
.sgigs__tab[data-active="true"] {
  background: #ffffff;
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.sgigs__tab[data-active="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}
.sgigs__tab-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.16);
  color: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.sgigs__tab[data-active="true"] .sgigs__tab-count { background: var(--primary-soft); color: var(--primary); }

.sgigs__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sgigs__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 40px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--muted);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  min-width: 220px;
}
.sgigs__search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.sgigs__search-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  width: 100%;
}
.sgigs__search-clear {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: none; background: rgba(100,116,139,0.14);
  border-radius: 50%; color: var(--muted); cursor: pointer;
  flex: none;
  transition: background 0.16s ease, color 0.16s ease;
}
.sgigs__search-clear:hover { background: rgba(239,68,68,0.14); color: #ef4444; }

.sgigs__sort {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sgigs__sort select {
  appearance: none;
  -webkit-appearance: none;
  height: 40px;
  padding: 0 34px 0 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--card-solid);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.sgigs__sort select:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.sgigs__sort-caret { position: absolute; right: 12px; pointer-events: none; color: var(--muted); }
.sgigs__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sgigs__view {
  display: inline-flex;
  padding: 4px;
  gap: 3px;
  background: #f1f5f9;
  border-radius: 11px;
}
.sgigs__view-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: none; background: transparent;
  border-radius: 8px; color: var(--muted); cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.sgigs__view-btn:hover { color: var(--text); }
.sgigs__view-btn[data-active="true"] { background: var(--card-solid); color: var(--primary); box-shadow: 0 2px 6px rgba(15,23,42,0.12); }

/* ── Shared badges & chips ── */
.sgigs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.sgigs-badge::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}
.sgigs-badge[data-tone="published"], .sgigs-badge[data-tone="verified"] { background: #ecfdf5; color: #047857; border-color: rgba(16,185,129,0.28); }
.sgigs-badge[data-tone="pending"] { background: #fffbeb; color: #b45309; border-color: rgba(245,158,11,0.28); }
.sgigs-badge[data-tone="review"] { background: #fff7ed; color: #c2410c; border-color: rgba(234,88,12,0.26); }
.sgigs-badge[data-tone="draft"] { background: #f1f5f9; color: #475569; border-color: rgba(100,116,139,0.24); }
.sgigs-badge[data-tone="paused"] { background: #eef2ff; color: #4338ca; border-color: rgba(79,70,229,0.24); }
.sgigs-badge[data-tone="rejected"] { background: #fef2f2; color: #b91c1c; border-color: rgba(239,68,68,0.26); }
.sgigs-badge--btn {
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.sgigs-badge--btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,0.12); }
.sgigs-badge--float {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.14);
}
.sgigs-badge--float-r { left: auto; right: 12px; }

.sgigs-chip {
  display: inline-block;
  vertical-align: middle;
  padding: 4px 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--primary);
  border: 1px solid rgba(37, 99, 235, 0.2);
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Icon action buttons ── */
.sgigs-actions { display: inline-flex; align-items: center; gap: 4px; }
.sgigs-iconbtn {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.sgigs-iconbtn:hover { background: #f1f5f9; color: var(--primary); border-color: var(--border); transform: translateY(-1px); }
.sgigs-iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.sgigs-iconbtn--view { border-color: var(--border); background: var(--card-solid); }
.sgigs-iconbtn--view:hover { background: var(--primary-soft); color: var(--primary); border-color: rgba(37,99,235,0.28); }

/* ── Overflow menu ── */
.sgigs-menu { position: relative; display: inline-flex; }
.sgigs-menu__pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 168px;
  padding: 6px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  animation: sgigsPop 0.14s ease;
}
/* Portal-rendered variant — fixed to viewport, never clipped by the panel's overflow */
.sgigs-menu__pop--portal { position: fixed; right: auto; top: auto; z-index: 2000; }
.sgigs-menu__pop--portal[data-placement="up"] { animation-name: sgigsPopUp; transform-origin: bottom right; }
@keyframes sgigsPop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sgigsPopUp { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }
.sgigs-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease, color 0.14s ease;
}
.sgigs-menu__item:hover { background: #f1f5f9; }
.sgigs-menu__item--danger { color: #dc2626; }
.sgigs-menu__item--danger:hover { background: #fef2f2; }
.sgigs-menu__sep { height: 1px; margin: 5px 4px; background: var(--border); }

/* ── List view ── */
.sgigs-list { display: flex; flex-direction: column; }
.sgigs-list__head,
.sgigs-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(134px, 1.1fr) minmax(78px, 0.62fr) minmax(118px, 0.95fr) minmax(62px, 0.5fr) minmax(62px, 0.5fr) minmax(62px, 0.5fr) minmax(96px, 0.78fr) minmax(92px, auto);
  align-items: stretch;
  gap: 14px;
}
/* Subtle vertical dividers — light right border on every column but the last */
.sgigs-list__head span:not(:last-child),
.sgigs-row > *:not(:last-child) {
  border-right: 1px solid #eef2f7;
}
.sgigs-row > * { display: flex; align-items: center; min-width: 0; }
.sgigs-list__head {
  min-height: 48px;
  padding: 14px 20px;
  border-bottom: 1px solid #eef2f7;
  background: #f8fafc;
}
.sgigs-list__head span {
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
}
.sgigs-list__head-c { justify-content: center; text-align: center; }
.sgigs-list__head span:last-child { justify-content: flex-end; text-align: right; }
.sgigs-row {
  min-height: 90px;
  padding: 15px 20px;
  border-bottom: 1px solid #eef2f7;
  transition: background 0.15s ease;
}
.sgigs-row:last-child { border-bottom: none; }
.sgigs-row:hover { background: #fafbff; }
.sgigs-row__gig { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sgigs-row__thumb {
  flex: none;
  width: 60px; height: 60px;
  padding: 0; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  background: #f1f5f9; cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.sgigs-row__thumb:hover { transform: scale(1.04); box-shadow: 0 6px 16px rgba(15,23,42,0.16); }
.sgigs-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgigs-row__info { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.sgigs-row__title {
  margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.sgigs-row__desc {
  margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.sgigs-row__category { min-width: 0; }
.sgigs-row__status { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; }
.sgigs-row__actions-cell { display: flex; justify-content: flex-end; }

/* Price cell — model (bold) over amount (muted) */
.sgigs-price { display: inline-flex; flex-direction: column; gap: 2px; }
.sgigs-price__model { font-size: 0.85rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.sgigs-price__amount { font-size: 0.8rem; font-weight: 550; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Last-updated cell — relative (top) over absolute date (muted) */
.sgigs-updated { display: inline-flex; flex-direction: column; gap: 2px; }
.sgigs-updated__rel { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.sgigs-updated__abs { font-size: 0.74rem; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* ── Metric cells (views / leads / orders) ── */
.sgigs-row__metric { display: flex; justify-content: center; }
.sgigs-metric { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.sgigs-metric__num {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.sgigs-metric__num[data-accent="violet"] { color: var(--accent); }
.sgigs-metric__num[data-accent="green"] { color: #059669; }
.sgigs-metric__delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sgigs-metric__delta[data-dir="up"] { color: #059669; }
.sgigs-metric__delta[data-dir="down"] { color: #dc2626; }
.sgigs-metric__delta[data-dir="flat"] { color: var(--muted); }

/* ── Grid-card metric strip ── */
.sgigs-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--border);
}
.sgigs-cardmetric { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sgigs-cardmetric__num { font-size: 1.02rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.sgigs-cardmetric__lbl { font-size: 0.68rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* ── Grid view ── */
.sgigs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 18px;
}
.sgigs-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-solid);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sgigs-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15,23,42,0.12); border-color: var(--border-strong); }
.sgigs-card__media { position: relative; height: 168px; background: #f1f5f9; }
.sgigs-card__media-btn { display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.sgigs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgigs-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.sgigs-card__title {
  margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.sgigs-card__desc {
  margin: 0; font-size: 0.83rem; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sgigs-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.sgigs-card__price { font-weight: 700; color: var(--text); font-size: 0.85rem; white-space: nowrap; }
.sgigs-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  background: #fafbff;
}
.sgigs-card__updated { font-size: 0.76rem; color: var(--muted); }

/* ── Pagination ── */
.sgigs-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: #fafbff;
}
.sgigs-pagination__pages { display: inline-flex; align-items: center; gap: 6px; }
.sgigs-pagination__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--card-solid);
  border-radius: 10px;
  font-family: inherit; font-size: 0.85rem; font-weight: 650; color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.sgigs-pagination__btn:hover:not(:disabled) { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.sgigs-pagination__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sgigs-pagination__btn--icon { width: 36px; height: 36px; padding: 0; }
.sgigs-pagination__num {
  min-width: 36px; height: 36px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--card-solid);
  border-radius: 10px;
  font-family: inherit; font-size: 0.85rem; font-weight: 700; color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sgigs-pagination__num:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.sgigs-pagination__num[data-active="true"] {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}
.sgigs-pagination__gap { padding: 0 4px; color: var(--muted); font-weight: 700; }
.sgigs-pagination__info { font-size: 0.85rem; font-weight: 600; color: var(--muted); }

/* ── Empty / no-results ── */
.sgigs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 56px 24px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}
.sgigs-empty__art img { width: 168px; max-width: 60vw; height: auto; margin-bottom: 8px; }
.sgigs-empty__title { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.sgigs-empty__body { margin: 0 0 8px; color: var(--muted); max-width: 42ch; }
.sgigs-noresults {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 52px 24px; text-align: center; color: var(--muted);
}
.sgigs-noresults__title { margin: 0; font-size: 1rem; font-weight: 650; color: var(--text); }

/* ── Responsive: tablet ──
   Column order: 1 Gig · 2 Category · 3 Price · 4 Status · 5 Views · 6 Leads · 7 Orders · 8 Updated · 9 Actions */
@media (max-width: 1240px) {
  .sgigs__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Drop the Last-updated column first to preserve the metric columns. */
  .sgigs-list__head,
  .sgigs-row { grid-template-columns: minmax(0, 2.1fr) minmax(90px, 0.85fr) minmax(74px, 0.6fr) minmax(114px, 0.95fr) minmax(58px, 0.5fr) minmax(58px, 0.5fr) minmax(58px, 0.5fr) minmax(84px, auto); }
  .sgigs-row__updated, .sgigs-list__head span:nth-child(8) { display: none; }
}
@media (max-width: 1040px) {
  /* Then drop Category to reclaim width for the metric columns. */
  .sgigs-list__head,
  .sgigs-row { grid-template-columns: minmax(0, 2.1fr) minmax(74px, 0.6fr) minmax(114px, 0.95fr) minmax(58px, 0.5fr) minmax(58px, 0.5fr) minmax(58px, 0.5fr) minmax(84px, auto); }
  .sgigs-row__category, .sgigs-list__head span:nth-child(2) { display: none; }
}
@media (max-width: 900px) {
  /* Then drop Views to keep Leads + Orders (the money metrics). */
  .sgigs-list__head,
  .sgigs-row { grid-template-columns: minmax(0, 2.1fr) minmax(72px, 0.6fr) minmax(112px, 0.95fr) minmax(58px, 0.5fr) minmax(58px, 0.5fr) minmax(84px, auto); }
  .sgigs-row__metric.sgigs-row__metric--views, .sgigs-list__head span:nth-child(5) { display: none; }
}

/* ── Responsive: mobile ── */
@media (max-width: 720px) {
  .sgigs__header-actions { width: 100%; }
  .sgigs__header-actions .sgigs__btn { flex: 1 1 auto; justify-content: center; }
  .sgigs__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgigs__toolbar { position: static; flex-direction: column; align-items: stretch; }
  .sgigs__tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sgigs__tabs::-webkit-scrollbar { display: none; }
  .sgigs__tools { justify-content: space-between; }
  .sgigs__search { flex: 1 1 auto; min-width: 0; }

  .sgigs-list__head { display: none; }
  .sgigs-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    margin: 12px;
    box-shadow: var(--shadow-soft);
  }
  .sgigs-row:hover { background: var(--card-solid); }
  .sgigs-row > *:not(:last-child) { border-right: none; }
  .sgigs-row__gig { grid-column: 1 / -1; }
  .sgigs-row__actions-cell { grid-column: 1 / -1; }
  .sgigs-row__cell { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sgigs-row__metric { justify-content: space-between; }
  .sgigs-row__cell[data-label]::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .sgigs-row__metric.sgigs-row__metric--views, .sgigs-row__updated { display: flex; }
  .sgigs-row__actions-cell { justify-content: flex-start; }
}
@media (max-width: 460px) {
  .sgigs__stats { grid-template-columns: 1fr; }
  .sgigs-row { grid-template-columns: 1fr; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sgigs__btn, .sgigs-stat, .sgigs-iconbtn, .sgigs-card, .sgigs-row__thumb,
  .sgigs-badge--btn, .sgigs-pagination__btn, .sgigs-menu__pop, .sgigs__tab, .sgigs__view-btn {
    transition: none;
    animation: none;
  }
}

/* ============================================================
 * SELLER PRODUCTS — extends the .sgigs design system (.sprods)
 * The Products page renders with `class="... sgigs sprods"`, so it
 * reuses every .sgigs primitive and only layers product-specific
 * columns, badges, bulk bar and the timeline log below.
 * ============================================================ */

/* Seven compact KPI widgets — icon-left, tight text stack */
.sprods__stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 2px;
}
.sprods-stat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-height: 110px;
  padding: 20px;
  background: #fff;
  border: 1px solid #eaecef;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sprods-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}
.sprods-stat__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: filter 0.18s ease;
}
.sprods-stat:hover .sprods-stat__icon { filter: saturate(1.3) brightness(0.98); }
.sprods-stat__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.sprods-stat__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sprods-stat__value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: #0f172a;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.sprods-stat__desc {
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sprods-stat__meter { display: flex; flex-direction: column; gap: 6px; }
.sprods-stat__bar { display: flex; align-items: center; gap: 8px; }
.sprods-stat__bar-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}
.sprods-stat__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.sprods-stat__bar-pct { font-size: 12px; font-weight: 600; color: var(--accent); }
.sprods-stat[data-tone="brand"] .sprods-stat__icon { background: #eff6ff; color: var(--primary); }
.sprods-stat[data-tone="green"] .sprods-stat__icon { background: #ecfdf5; color: #059669; }
.sprods-stat[data-tone="amber"] .sprods-stat__icon { background: #fffbeb; color: #d97706; }
.sprods-stat[data-tone="slate"] .sprods-stat__icon { background: #f1f5f9; color: #475569; }
.sprods-stat[data-tone="violet"] .sprods-stat__icon { background: #f5f3ff; color: var(--accent); }
.sprods-stat[data-tone="rose"] .sprods-stat__icon { background: #fff1f2; color: #e11d48; }
.sprods-stat[data-tone="orange"] .sprods-stat__icon { background: #fff7ed; color: #ea580c; }
/* KPI responsive: 7-up desktop → 4-up laptop → 2-up tablet → horizontal scroll on mobile */
@media (max-width: 1240px) {
  .sprods__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sprods__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sprods__stats {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 168px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
}

/* Horizontal-scroll wrapper — only the table scrolls, never the page */
.sprods-tablewrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.sprods-tablewrap::-webkit-scrollbar { height: 9px; }
.sprods-tablewrap::-webkit-scrollbar-thumb { background: #dbe2ea; border-radius: 999px; }
.sprods-tablewrap::-webkit-scrollbar-track { background: transparent; }
.sprods-tablewrap .sprods-list { min-width: 1300px; }

/* 10-column management grid (content-aware widths): check · product · category ·
   price · stock · fulfillment · status · verification · updated · actions.
   Product stays widest and flexible; the rest use compact minmax tracks that
   expand to fill wide screens and shrink toward their floor before scrolling. */
.sprods .sgigs-list__head,
.sprods .sgigs-row {
  grid-template-columns:
    40px                  /* check */
    minmax(260px, 1.6fr)  /* product */
    minmax(120px, 0.8fr)  /* category */
    minmax(96px, 0.68fr)  /* price */
    minmax(118px, 0.8fr)  /* stock */
    minmax(128px, 0.85fr) /* fulfillment */
    minmax(116px, 0.78fr) /* status */
    minmax(116px, 0.78fr) /* verification */
    minmax(112px, 0.75fr) /* updated */
    78px;                 /* actions */
  gap: 10px;
}
/* Tighter table edge / cell padding (was 20px) */
.sprods .sgigs-list__head { padding: 12px 14px; }
.sprods .sgigs-row { padding: 14px; }
/* Reset any base .sgigs responsive column-hides — .sprods manages its own */
.sprods .sgigs-list__head span,
.sprods .sgigs-row > * { display: flex; }

/* Subtle vertical separators between columns; soft bottom border per row */
.sprods .sgigs-list__head span:not(:last-child),
.sprods .sgigs-row > *:not(:last-child) {
  border-right: 1px solid #eef2f7;
}

/* SKU line inside the product cell */
.sprods .sgigs-row__info .sprods-sku { margin-top: 5px; }

/* Products tabs: underline-only active state (no pill / no filled background) */
.sprods .sgigs__tab { border-radius: 0; padding: 10px 4px; margin: 0 12px 0 0; }
.sprods .sgigs__tab[data-active="true"] {
  background: transparent;
  box-shadow: none;
  color: var(--primary);
}
.sprods .sgigs__tab[data-active="true"]::after {
  left: 0; right: 0; transform: none; width: auto; bottom: -1px; height: 2px;
}

/* Rows-per-page selector in the footer */
.sprods-perpage {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 4px;
  font-size: 0.82rem; color: var(--muted, #6b7280); font-weight: 600;
}
.sprods-perpage select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: #1e293b;
  padding: 6px 26px 6px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 9px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
  cursor: pointer;
}
.sprods-perpage select:focus-visible { outline: 2px solid var(--primary, var(--accent)); outline-offset: 1px; }

/* Row checkbox */
.sprods-check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sprods-check input { width: 17px; height: 17px; accent-color: var(--primary, var(--accent)); cursor: pointer; }
.sprods-check--lg input { width: 18px; height: 18px; }
.sprods-check-cell { justify-content: center; }
.sprods-row--selected { background: #f7f5ff !important; }
.sprods-row--selected:hover { background: #f3efff !important; }

/* SKU cell */
.sprods-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem; font-weight: 600; color: #475569;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 7px;
  padding: 2px 7px; letter-spacing: 0.01em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sprods-muted { color: #cbd5e1; font-weight: 600; }

/* Price + offer */
.sprods-offer {
  display: inline-flex; align-items: center;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.03em;
  color: #be123c; background: #fff1f2; border: 1px solid rgba(225,29,72,0.22);
  border-radius: 6px; padding: 2px 6px; margin-top: 3px; text-transform: uppercase;
  width: max-content;
}
.sprods-offer--float {
  position: absolute; left: 10px; bottom: 10px;
  background: #fff1f2; box-shadow: 0 2px 6px rgba(15,23,42,0.12); margin: 0;
}

/* Stock badge (two-line: label + sub) */
.sprods-stock {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 10px; border-radius: 9px; border: 1px solid transparent;
  line-height: 1.15; width: max-content; max-width: 100%;
}
.sprods-stock__label { font-size: 0.78rem; font-weight: 700; }
.sprods-stock__sub { font-size: 0.68rem; font-weight: 600; opacity: 0.8; }
.sprods-stock[data-tone="in"]        { background: #ecfdf5; color: #047857; border-color: rgba(16,185,129,0.22); }
.sprods-stock[data-tone="low"]       { background: #fff7ed; color: #c2410c; border-color: rgba(234,88,12,0.24); }
.sprods-stock[data-tone="out"]       { background: #fef2f2; color: #b91c1c; border-color: rgba(239,68,68,0.24); }
.sprods-stock[data-tone="unlimited"] { background: #eff6ff; color: var(--primary-dark); border-color: rgba(37,99,235,0.20); }
.sprods-stock[data-tone="mto"]       { background: #f5f3ff; color: #6d28d9; border-color: rgba(124,58,237,0.20); }

/* Fulfillment badge */
.sprods-fulfil {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.74rem; font-weight: 650; padding: 4px 10px;
  border-radius: 999px; border: 1px solid transparent; width: max-content; max-width: 100%;
  white-space: nowrap;
}
.sprods-fulfil[data-tone="pickup"]   { background: #f0fdfa; color: #0f766e; border-color: rgba(13,148,136,0.22); }
.sprods-fulfil[data-tone="delivery"] { background: #eef2ff; color: #4338ca; border-color: rgba(79,70,229,0.22); }
.sprods-fulfil[data-tone="both"]     { background: #f8fafc; color: #475569; border-color: rgba(100,116,139,0.22); }

/* Grid-view card extras */
.sprods-card { position: relative; }
.sprods-card--selected { border-color: var(--primary, var(--accent)); box-shadow: 0 10px 26px rgba(124,58,237,0.14); }
.sprods-card__check {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,0.92); box-shadow: 0 2px 6px rgba(15,23,42,0.14); cursor: pointer;
}
.sprods-card__check input { width: 16px; height: 16px; accent-color: var(--primary, var(--accent)); cursor: pointer; }
.sprods-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ── Bulk action bar ── */
.sprods-bulk {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid #eef2f7;
  background: linear-gradient(180deg, #fbfaff, #f8fafc);
}
.sprods-bulk__left { display: flex; align-items: center; gap: 10px; }
.sprods-bulk__count { font-size: 0.84rem; font-weight: 650; color: #334155; }
.sprods-bulk__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sprods-bulk__field { display: inline-flex; }
.sprods-bulk__select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 0.84rem; font-weight: 600; color: #1e293b;
  padding: 8px 30px 8px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  cursor: pointer;
}
.sprods-bulk__select:focus-visible { outline: 2px solid var(--primary, var(--accent)); outline-offset: 1px; }
.sprods-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; overflow: hidden; background: #fff; }
.sprods-stepper__btn {
  width: 34px; border: none; background: #f8fafc; color: #334155;
  font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.14s ease;
}
.sprods-stepper__btn:hover { background: #eef2f7; }
.sprods-stepper__input {
  width: 58px; border: none; border-left: 1px solid var(--border, #e2e8f0); border-right: 1px solid var(--border, #e2e8f0);
  text-align: center; font: inherit; font-size: 0.86rem; font-weight: 700; color: #1e293b;
  -moz-appearance: textfield;
}
.sprods-stepper__input::-webkit-outer-spin-button,
.sprods-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sprods-bulk__apply { padding: 9px 20px; }

/* ── Bulk update log — timeline ── */
.sprods-log { border-top: 1px solid #eef2f7; padding: 8px 20px 16px; }
.sprods-log__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 12px 4px; border: none; background: none; cursor: pointer;
  font-size: 0.9rem; font-weight: 700; color: #1e293b;
}
.sprods-log__toggle-main { display: inline-flex; align-items: center; gap: 9px; }
.sprods-log__chevron { color: #94a3b8; transition: transform 0.2s ease; }
.sprods-log__toggle--open .sprods-log__chevron { transform: rotate(180deg); }
.sprods-log__empty { padding: 10px 4px; color: var(--muted, #6b7280); font-size: 0.85rem; }
.sprods-timeline { list-style: none; margin: 4px 0 0; padding: 6px 0 0 6px; position: relative; }
.sprods-timeline::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: #eef2f7; }
.sprods-timeline__item { position: relative; padding: 0 0 4px 30px; }
.sprods-timeline__dot {
  position: absolute; left: 5px; top: 15px; width: 13px; height: 13px; border-radius: 50%;
  background: #94a3b8; border: 2.5px solid #fff; box-shadow: 0 0 0 1px #e2e8f0; z-index: 1;
}
.sprods-timeline__dot[data-action="add"]      { background: #10b981; }
.sprods-timeline__dot[data-action="remove"]   { background: #f59e0b; }
.sprods-timeline__dot[data-action="set_zero"] { background: #ef4444; }
.sprods-timeline__entry { border: 1px solid #eef2f7; border-radius: 12px; background: #fff; overflow: hidden; }
.sprods-timeline__entry[open] { box-shadow: 0 6px 18px rgba(15,23,42,0.06); }
.sprods-timeline__summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; cursor: pointer; list-style: none;
}
.sprods-timeline__summary::-webkit-details-marker { display: none; }
.sprods-timeline__action { font-size: 0.86rem; font-weight: 750; color: #0f172a; }
.sprods-timeline__meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sprods-timeline__pill { font-size: 0.72rem; font-weight: 700; color: #4338ca; background: #eef2ff; border-radius: 999px; padding: 2px 9px; }
.sprods-timeline__date { font-size: 0.75rem; color: #64748b; }
.sprods-timeline__by { font-size: 0.75rem; color: #94a3b8; }
.sprods-timeline__caret { color: #94a3b8; transition: transform 0.2s ease; }
.sprods-timeline__entry[open] .sprods-timeline__caret { transform: rotate(180deg); }
.sprods-timeline__table { width: 100%; border-collapse: collapse; border-top: 1px solid #eef2f7; }
.sprods-timeline__table th, .sprods-timeline__table td { padding: 8px 14px; text-align: left; font-size: 0.78rem; }
.sprods-timeline__table th { color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; background: #fafbfc; }
.sprods-timeline__table td { color: #334155; border-top: 1px solid #f4f6fa; }
.sprods-timeline__up { color: #059669; font-weight: 700; }
.sprods-timeline__down { color: #dc2626; font-weight: 700; }

/* ── Responsive (products has its own column-drop order) ── */
/* KPI cards stay a horizontally-scrollable flex row at every width (never shrink) */
/* Tablet/laptop: table keeps full width and scrolls horizontally (no column drops) */
@media (max-width: 720px) {
  /* Stack rows into cards — release the min-width so nothing scrolls sideways */
  .sprods-tablewrap { overflow-x: visible; }
  .sprods-tablewrap .sprods-list { min-width: 0; }
  .sprods .sgigs-list__head { display: none; }
  .sprods .sgigs-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px; padding: 16px; margin: 12px;
    border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-soft);
  }
  .sprods .sgigs-row > *:not(:last-child) { border-right: none; }
  /* Re-show every product cell in the stacked card */
  .sprods .sgigs-row > * { display: flex; }
  .sprods .sprods-check-cell { display: none; }
  .sprods .sgigs-row__gig { grid-column: 1 / -1; }
  .sprods .sgigs-row__actions-cell { grid-column: 1 / -1; justify-content: flex-start; }
  .sprods .sgigs-row__cell { align-items: center; justify-content: space-between; gap: 12px; }
  .sprods .sgigs-row__cell[data-label]::before {
    content: attr(data-label);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted);
  }
  .sprods-bulk { padding: 12px 16px; }
  .sprods-bulk__controls { width: 100%; }
  .sprods-bulk__apply { margin-left: auto; }
}
@media (max-width: 460px) {
  .sprods .sgigs-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sprods-card, .sprods-stepper__btn, .sprods-log__chevron, .sprods-timeline__caret { transition: none; }
}

/* =========================================================================
   SELLER REVIEWS — premium reproduction (scoped under .srev)
   Design tokens: card #fff / radius 18px / border #eef2f7 / soft shadow.
   Tier colours: exceeded #16a34a · met #f59e0b · below #ef4444.
   Accent gradient var(--accent) → #6d28d9.
   ========================================================================= */
.srev {
  --srev-card-bg: #ffffff;
  --srev-border: #eef2f7;
  --srev-radius: 18px;
  --srev-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
  --srev-shadow-hover: 0 16px 44px rgba(15, 23, 42, 0.09);
  --srev-exceeded: #16a34a;
  --srev-met: #f59e0b;
  --srev-below: #ef4444;
  --srev-accent: var(--accent);
  --srev-accent-dark: #6d28d9;
  --srev-ink: #0f172a;
  --srev-muted: #64748b;
  --srev-faint: #94a3b8;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.srev * { box-sizing: border-box; }

/* ---- Hero header ---- */
.srev-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.srev-hero__eyebrow { color: var(--srev-accent); }
.srev-hero__title {
  margin: 6px 0 4px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--srev-ink);
}
.srev-hero__sub { margin: 0; font-size: 15px; color: var(--srev-muted); }
.srev-hero__actions { display: flex; gap: 12px; }

/* ---- Buttons ---- */
.srev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.srev-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.srev-btn--primary {
  height: 48px;
  padding: 0 22px;
  color: #fff;
  background: linear-gradient(180deg, var(--srev-accent) 0%, var(--srev-accent-dark) 100%);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28);
}
.srev-btn--primary:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(124, 58, 237, 0.36); }
.srev-btn--outline {
  color: var(--srev-ink);
  background: #fff;
  border-color: var(--srev-border);
  box-shadow: var(--srev-shadow);
}
.srev-btn--outline:not(:disabled):hover { transform: translateY(-2px); border-color: #d9def0; }
.srev-btn--ghost { color: var(--srev-muted); background: transparent; border-color: var(--srev-border); }
.srev-btn--ghost:not(:disabled):hover { background: #f8fafc; color: var(--srev-ink); }

/* ---- Top summary band — 3 cards ---- */
.srev-summary {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr 1.2fr;
  gap: 20px;
  align-items: stretch;
}
.srev-scard--outcomes,
.srev-scard--total,
.srev-scard--overview { justify-content: flex-start; }
.srev-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.srev-outcome {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid var(--srev-border);
}
.srev-outcome__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  border-radius: 10px;
  margin-bottom: 2px;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}
.srev-outcome__num { font-size: 26px; font-weight: 800; line-height: 1; }
.srev-outcome__lbl { font-size: 13px; font-weight: 600; color: var(--srev-muted); }
.srev-outcome--exceeded { background: #f0fdf4; border-color: #dcfce7; }
.srev-outcome--exceeded .srev-outcome__icon { background: #dcfce7; color: var(--srev-exceeded); }
.srev-outcome--exceeded .srev-outcome__num { color: var(--srev-exceeded); }
.srev-outcome--met { background: #fffbeb; border-color: #fef3c7; }
.srev-outcome--met .srev-outcome__icon { background: #fef3c7; color: var(--srev-met); }
.srev-outcome--met .srev-outcome__num { color: var(--srev-met); }
.srev-outcome--below { background: #fef2f2; border-color: #fee2e2; }
.srev-outcome--below .srev-outcome__icon { background: #fee2e2; color: var(--srev-below); }
.srev-outcome--below .srev-outcome__num { color: var(--srev-below); }
/* Your Reviews card */
.srev-total__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.srev-total__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f3e8ff;
  color: var(--srev-accent);
  flex-shrink: 0;
}
.srev-total__num { font-size: 42px; font-weight: 800; line-height: 1; color: var(--srev-ink); margin-top: 4px; }
.srev-total__stars { display: flex; align-items: center; gap: 10px; }
.srev-total__avg { font-size: 13px; font-weight: 600; color: var(--srev-muted); }
/* Rating Overview card */
.srev-overview { display: flex; align-items: center; gap: 18px; }
.srev-overview .srev-donut { margin: 0; flex-shrink: 0; }
.srev-overview .srev-legend { flex: 1; }

/* ---- Two-column grid ---- */
.srev-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.srev-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.srev-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }

/* ---- Toolbar ---- */
.srev-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--srev-card-bg);
  border: 1px solid var(--srev-border);
  border-radius: var(--srev-radius);
  box-shadow: var(--srev-shadow);
  padding: 16px 20px;
}
.srev-toolbar__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--srev-ink); }
.srev-toolbar__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.srev-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--srev-border);
  background: #f8fafc;
  color: var(--srev-faint);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.srev-search:focus-within { border-color: var(--srev-accent); background: #fff; }
.srev-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--srev-ink);
  width: 180px;
}
.srev-select {
  height: 42px;
  padding: 0 34px 0 14px;
  border-radius: 12px;
  border: 1px solid var(--srev-border);
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: 14px;
  font-weight: 500;
  color: var(--srev-ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.srev-select:focus-visible { outline: 2px solid var(--srev-accent); outline-offset: 1px; }

/* ---- Review list + cards ---- */
.srev-list { display: flex; flex-direction: column; gap: 16px; transition: opacity 0.2s ease; }
.srev-list--loading { opacity: 0.55; pointer-events: none; }
.srev-noresults {
  padding: 40px;
  text-align: center;
  color: var(--srev-muted);
  background: var(--srev-card-bg);
  border: 1px dashed var(--srev-border);
  border-radius: var(--srev-radius);
}
.srev-card {
  background: var(--srev-card-bg);
  border: 1px solid var(--srev-border);
  border-radius: var(--srev-radius);
  box-shadow: var(--srev-shadow);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: srev-fade 0.15s ease both;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.srev-card:hover { transform: translateY(-2px); box-shadow: var(--srev-shadow-hover); }
.srev-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.srev-card__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.srev-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.srev-card__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--srev-accent) 0%, var(--srev-accent-dark) 100%);
}
.srev-card__whotext { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.srev-card__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--srev-ink);
}
.srev-card__meta { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.srev-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--srev-exceeded);
}
.srev-card__profile {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--srev-accent);
  cursor: pointer;
}
.srev-card__profile:hover { text-decoration: underline; }
.srev-card__badges { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.srev-tier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.srev-tier__ico { display: inline-flex; align-items: center; line-height: 0; }
.srev-tier--exceeded { color: var(--srev-exceeded); background: #f0fdf4; }
.srev-tier--met { color: #b45309; background: #fffbeb; }
.srev-tier--below { color: var(--srev-below); background: #fef2f2; }
.srev-status {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.srev-status--replied { color: #166534; background: #dcfce7; }
.srev-status--pending { color: #92400e; background: #fef3c7; }
.srev-card__ratingrow { display: flex; align-items: center; gap: 12px; }
.srev-card__date { font-size: 13px; color: var(--srev-faint); }
.srev-card__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--srev-ink); }
.srev-card__comment { margin: 0; font-size: 14px; line-height: 1.6; color: #334155; }
.srev-card__images { display: flex; gap: 10px; flex-wrap: wrap; }
.srev-card__thumb {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--srev-border);
}
.srev-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srev-card__thumb:hover { border-color: var(--srev-accent); }

/* Seller response block */
.srev-response {
  border-left: 3px solid var(--srev-accent);
  background: #faf5ff;
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
}
.srev-response__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--srev-accent-dark);
  margin-bottom: 6px;
}
.srev-response__when { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--srev-faint); }
.srev-response__text { margin: 0; font-size: 14px; line-height: 1.6; color: #334155; }

/* Respond form */
.srev-respond { display: flex; flex-direction: column; gap: 10px; }
.srev-textarea {
  width: 100%;
  min-height: 88px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--srev-border);
  background: #f8fafc;
  font: inherit;
  font-size: 14px;
  color: var(--srev-ink);
  resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.srev-textarea:focus { outline: none; border-color: var(--srev-accent); background: #fff; }
.srev-respond__actions { display: flex; align-items: center; gap: 10px; }
.srev-respond__actions > :first-child { margin-right: auto; }
.srev-card__respondbtn { align-self: flex-start; }

/* ---- Pagination ---- */
.srev-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 4px 0;
}
.srev-pagination__info { font-size: 13px; color: var(--srev-muted); }
.srev-pagination__pages { display: flex; align-items: center; gap: 6px; }
.srev-page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--srev-border);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--srev-ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.srev-page-btn:not(:disabled):hover { border-color: var(--srev-accent); color: var(--srev-accent); }
.srev-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.srev-page-btn--active {
  color: #fff;
  background: linear-gradient(180deg, var(--srev-accent) 0%, var(--srev-accent-dark) 100%);
  border-color: transparent;
}
.srev-page-gap { padding: 0 4px; color: var(--srev-faint); }

/* ---- Sidebar cards ---- */
.srev-scard {
  background: var(--srev-card-bg);
  border: 1px solid var(--srev-border);
  border-radius: var(--srev-radius);
  box-shadow: var(--srev-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.srev-scard__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--srev-ink); }

/* Donut */
.srev-donut { position: relative; width: 132px; height: 132px; margin: 4px auto 2px; }
.srev-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.srev-donut__num { font-size: 26px; font-weight: 800; color: var(--srev-ink); }
.srev-donut__lbl { font-size: 11px; font-weight: 600; color: var(--srev-faint); }
.srev-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.srev-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--srev-muted); }
.srev-legend__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.srev-legend__ico { display: inline-flex; align-items: center; line-height: 0; }
.srev-legend__dot--exceeded { background: var(--srev-exceeded); }
.srev-legend__dot--met { background: var(--srev-met); }
.srev-legend__dot--below { background: var(--srev-below); }
.srev-legend__val { margin-left: auto; font-weight: 700; color: var(--srev-ink); }

/* Metric rows */
.srev-metric { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.srev-metric--bar { flex-direction: column; align-items: stretch; gap: 8px; }
.srev-metric__barhead { display: flex; align-items: center; justify-content: space-between; }
.srev-metric__label { font-size: 13px; font-weight: 500; color: var(--srev-muted); }
.srev-metric__value { font-size: 15px; font-weight: 700; color: var(--srev-ink); }
.srev-metric__value--ok { color: var(--srev-exceeded); }
.srev-metric__value--warn { color: var(--srev-met); }
.srev-bar { height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.srev-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--srev-accent) 0%, var(--srev-accent-dark) 100%);
  transition: width 0.4s ease;
}

/* Quick actions */
.srev-quick {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--srev-border);
  background: #f8fafc;
  font-size: 14px;
  font-weight: 600;
  color: var(--srev-ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.srev-quick:not(:disabled):hover { background: #fff; border-color: var(--srev-accent); transform: translateY(-2px); }
.srev-quick:disabled { opacity: 0.5; cursor: not-allowed; }
.srev-quick span { flex: 1; }
.srev-quick svg:first-child { color: var(--srev-accent); }
.srev-quick__chev { color: var(--srev-faint); }

/* Need help card */
.srev-help {
  background: linear-gradient(160deg, var(--accent) 0%, #6d28d9 100%);
  border-radius: var(--srev-radius);
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.3);
  padding: 22px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.srev-help__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  margin-bottom: 4px;
}
.srev-help__title { margin: 0; font-size: 16px; font-weight: 700; }
.srev-help__text { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
.srev-help__btn {
  margin-top: 8px;
  height: 42px;
  border-radius: 12px;
  border: none;
  background: #fff;
  color: var(--srev-accent-dark);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.srev-help__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); }

@keyframes srev-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .srev-grid { grid-template-columns: 1fr 280px; }
  .srev-side { top: 16px; }
}
@media (max-width: 1100px) {
  .srev-summary { grid-template-columns: 1fr 1fr; }
  .srev-scard--overview { grid-column: 1 / -1; }
}
@media (max-width: 992px) {
  .srev-grid { grid-template-columns: 1fr; }
  .srev-side { position: static; }
}
@media (max-width: 640px) {
  .srev-summary { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .srev-hero__title { font-size: 28px; }
  .srev-toolbar { flex-direction: column; align-items: stretch; }
  .srev-toolbar__controls { justify-content: space-between; }
  .srev-search input { width: 100%; }
  .srev-search { flex: 1; }
}
@media (max-width: 480px) {
  .srev-outcomes { grid-template-columns: 1fr; }
  .srev-card { padding: 18px; }
  .srev-card__top { flex-direction: column; }
  .srev-card__badges { align-self: flex-start; }
  .srev-hero__actions { width: 100%; }
  .srev-hero__actions .srev-btn { flex: 1; }
  .srev-toolbar__controls { flex-direction: column; align-items: stretch; }
  .srev-select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .srev-card, .srev-btn, .srev-quick, .srev-help__btn, .srev-page-btn, .srev-bar__fill { transition: none; animation: none; }
}

/* ==========================================================================
   Field assist (gig editor): info tooltip beside labels + voice-input mic.
   Scoped to .pdf-* classes; only rendered when the fieldAssist prop is on.
   ========================================================================== */
.pdf-label-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pdf-label-row__text { display: inline; }

.pdf-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.pdf-hint__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg-secondary, #eef2ff);
  color: var(--primary, #2563eb);
  cursor: pointer;
  line-height: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.pdf-hint__btn:hover { background: var(--primary, #2563eb); color: #fff; }
.pdf-hint__btn:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }
.pdf-hint__pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 40;
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.pdf-hint__pop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #0f172a;
}
.pdf-hint:hover .pdf-hint__pop,
.pdf-hint:focus-within .pdf-hint__pop,
.pdf-hint.is-open .pdf-hint__pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.pdf-control {
  position: relative;
  display: block;
  width: 100%;
}
.pdf-title-prefix {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
/* Two-class specificity so these beat the base `.market-input { width:100% }`
   rule regardless of stylesheet load order (keeps the select compact and lets
   the title input fill the remaining width instead of collapsing to a sliver). */
.pdf-title-prefix .pdf-title-prefix__select {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  max-width: 160px;
}
.pdf-title-prefix .pdf-title-prefix__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
@media (max-width: 480px) {
  .pdf-title-prefix { flex-direction: column; gap: 6px; }
  .pdf-title-prefix .pdf-title-prefix__select { width: 100%; max-width: none; }
  .pdf-title-prefix .pdf-title-prefix__input { width: 100%; }
}
.pdf-control--textarea { display: block; }
.pdf-input--mic { padding-right: 44px !important; }
.pdf-control--textarea .pdf-input--mic { padding-right: 44px !important; }
.pdf-mic {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  color: var(--primary, #2563eb);
  cursor: pointer;
  line-height: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.pdf-control:not(.pdf-control--textarea) .pdf-mic { top: 50%; transform: translateY(-50%); }
.pdf-mic:hover { border-color: var(--primary, #2563eb); background: var(--bg-secondary, #eef2ff); }
.pdf-mic:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }
.pdf-mic--on {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
  animation: pdf-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes pdf-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); }
  50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.28); }
}
.pdf-mic-status {
  position: absolute;
  top: 8px;
  right: 44px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
  pointer-events: none;
  animation: pdf-mic-status-in 0.18s ease;
}
.pdf-control:not(.pdf-control--textarea) .pdf-mic-status { top: 50%; transform: translateY(-50%); }
.pdf-mic-status__bars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}
.pdf-mic-status__bars i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  animation: pdf-mic-bar 1s ease-in-out infinite;
}
.pdf-mic-status__bars i:nth-child(2) { animation-delay: 0.15s; }
.pdf-mic-status__bars i:nth-child(3) { animation-delay: 0.3s; }
.pdf-mic-status__bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes pdf-mic-bar {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
@keyframes pdf-mic-status-in {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}
.pdf-control:not(.pdf-control--textarea) .pdf-mic-status { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .pdf-hint__pop, .pdf-hint__btn, .pdf-mic { transition: none; }
  .pdf-mic--on { animation: none; }
  .pdf-mic-status, .pdf-mic-status__bars i { animation: none; }
}