/* Student Bazaar - marketplace theme.
   Presentation only; layered on top of Bootstrap 5. */

:root {
  --sb-bg: #f7f9fb;
  --sb-card-radius: 1rem;
  --sb-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --sb-shadow-hover: 0 10px 24px rgba(16, 24, 40, 0.12);
  --sb-topbar-h: 60px;
  --sb-sidebar-w: 260px;

  /* Unify the app palette with the landing page / design reference so custom
     CSS and Bootstrap components render the same brand blue everywhere. */
  --sb-primary: #2563eb;
  --sb-primary-hover: #1d4ed8;
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: #2563eb;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #1d4ed8;
  --bs-link-hover-color-rgb: 29, 78, 216;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: var(--sb-bg);
  color: #1f2933;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings: subtle premium tracking, consistent with the landing page. */
h1, h2, h3, .h1, .h2, .h3 {
  letter-spacing: -0.02em;
}

/* Bootstrap component colours compile to hardcoded values, so re-point the
   primary button / link / pagination variables to the unified brand blue. */
.btn-primary {
  --bs-btn-bg: #2563eb;
  --bs-btn-border-color: #2563eb;
  --bs-btn-hover-bg: #1d4ed8;
  --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-active-bg: #1d4ed8;
  --bs-btn-active-border-color: #1d4ed8;
  --bs-btn-disabled-bg: #2563eb;
  --bs-btn-disabled-border-color: #2563eb;
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-outline-primary {
  --bs-btn-color: #2563eb;
  --bs-btn-border-color: #2563eb;
  --bs-btn-hover-bg: #2563eb;
  --bs-btn-hover-border-color: #2563eb;
  --bs-btn-active-bg: #2563eb;
  --bs-btn-active-border-color: #2563eb;
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-link {
  --bs-btn-color: #2563eb;
  --bs-btn-hover-color: #1d4ed8;
}
.pagination {
  --bs-pagination-color: #2563eb;
  --bs-pagination-hover-color: #1d4ed8;
  --bs-pagination-focus-color: #1d4ed8;
  --bs-pagination-active-bg: #2563eb;
  --bs-pagination-active-border-color: #2563eb;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

/* ---- App shell: full-height sidebar + main column ------------------- */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.app-content { flex: 1 1 auto; }
.app-content-inner { padding: 1.25rem; }

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: var(--sb-topbar-h);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

/* Brand (in the sidebar) — compact, professional; matches the Stitch header. */
.app-brand {
  display: block;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 24px 20px;
  white-space: nowrap;
}
.app-brand.d-lg-flex { display: flex; }
.app-brand-logo {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bs-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.app-brand-text { min-width: 0; }
.app-brand-name {
  display: block;
  font-weight: 700;
  font-size: 1.125rem;     /* 18px */
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #2563eb;
}
.app-brand-sub {
  display: block;
  font-size: 0.75rem;      /* 12px */
  font-weight: 500;
  line-height: 1.3;
  color: #64748b;
}

/* Sidebar */
.app-sidebar-body { display: flex; flex-direction: column; height: 100%; padding: 0 0 20px; }

/* Sell Item button — pill, centered, gradient. order:-1 lifts it above the nav
   links (matching Stitch) without reordering the template. */
.sidebar-sell {
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 200px;
  height: 50px;
  margin: 0 auto 24px;
  font-weight: 600;
  border: 0;
  border-radius: 9999px;
  color: #fff;
  background: linear-gradient(90deg, #004ac6 0%, #2563eb 100%);
  box-shadow: 0 8px 20px -6px rgba(0, 74, 198, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.sidebar-sell:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(0, 74, 198, 0.45);
  filter: brightness(1.03);
  color: #fff;
}

/* Navigation items */
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 18px;
  margin: 6px 16px;
  border-radius: 14px;
  color: #475467;
  font-weight: 500;
  font-size: 17px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar-nav .nav-link:hover { background: #eef1f5; color: var(--bs-primary); }
.sidebar-nav .nav-link.active {
  position: relative;
  background: #e8edff;
  color: var(--bs-primary);
  font-weight: 600;
}
.sidebar-nav .nav-link.active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: var(--bs-primary);
  border-radius: 0 4px 4px 0;
}
.sidebar-nav .nav-link i { font-size: 22px; width: 22px; text-align: center; flex: 0 0 22px; }

/* Section label (e.g. Administration) grouping related nav links */
.sidebar-heading {
  margin: 18px 24px 6px;
  padding-top: 14px;
  border-top: 1px solid #e4e7ec;
  color: #98a2b3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Footer: sponsor card sits above Logout, pinned to the bottom. */
.sidebar-footer { display: flex; flex-direction: column; }
.sidebar-logout-form { margin: 0; }
.sidebar-footer .sidebar-logout {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 18px;
  margin: 4px 16px 0;
  border: 0;
  background: transparent;
  border-radius: 14px;
  color: #d6336c;
  font-weight: 500;
  font-size: 17px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar-footer .sidebar-logout i { font-size: 22px; width: 22px; text-align: center; }
.sidebar-footer .sidebar-logout:hover { background: #fdecef; color: #c2255c; }

@media (min-width: 992px) {
  .app-content-inner { padding: 1.5rem 2rem; }
  .app-sidebar {
    flex: 0 0 var(--sb-sidebar-w);
    width: var(--sb-sidebar-w);
    min-width: var(--sb-sidebar-w);
    max-width: var(--sb-sidebar-w);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: visible;
    background: #FBFBFF !important;
    border-right: 1px solid #E5E7EB;
  }
}

/* Top bar: search */
.app-search { max-width: 560px; }
.app-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: #eef1f5;
  border-radius: 999px;
  padding-right: 0.5rem;
}
.app-search-icon { position: absolute; left: 0.95rem; color: #98a2b3; }
.app-search-box .form-control {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-left: 2.4rem;
}
.app-search-box .form-control:focus { box-shadow: none; }
.app-search-kbd {
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 6px;
  color: #98a2b3;
  font-size: 0.72rem;
  padding: 2px 6px;
  white-space: nowrap;
}

/* Top bar: icon buttons + avatar */
.app-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: transparent;
  color: #475467;
  border-radius: 0.6rem;
  padding: 0.4rem 0.55rem;
  font-size: 1.1rem;
}
.app-icon-btn:hover { background: #eef1f5; color: var(--bs-primary); }
.app-bell-dot {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
}
.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex: 0 0 auto;
  overflow: hidden;
}
.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.profile-card {
  overflow: hidden;
}

.profile-header-card,
.stat-card,
.info-card,
.action-card {
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 1.25rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.05);
}

.profile-header-card {
  background: #fff;
}

.profile-avatar-img,
.profile-avatar-large {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  background: var(--bs-primary);
  border: 4px solid #fff;
  box-shadow: var(--sb-shadow);
}

.profile-avatar-img {
  object-fit: cover;
  background: #fff;
}

.profile-page,
.security-page {
  max-width: 1240px;
  margin: 0 auto;
}

.profile-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

@media (min-width: 992px) {
  .profile-header-actions {
    align-items: flex-end;
  }
}

.profile-progress {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.15);
}

.profile-progress .progress-bar {
  min-width: 1rem;
  background: #2563eb;
}

.profile-avatar-wrap {
  position: relative;
}

.profile-avatar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
}

.profile-avatar-button:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.45);
  outline-offset: 3px;
}

.profile-avatar-overlay {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 1rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}

.profile-avatar-button:hover .profile-avatar-overlay,
.profile-avatar-button:focus-visible .profile-avatar-overlay {
  transform: scale(1.05);
}

.profile-avatar-button:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.12);
}

/* Upload loading spinner overlay */
.profile-avatar-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  z-index: 2;
}
.profile-avatar-spinner[hidden] { display: none; }
/* While uploading, keep the camera overlay hidden behind the spinner. */
.profile-avatar-button.is-uploading .profile-avatar-overlay { opacity: 0; }
/* Animate the avatar swap after a successful upload. */
@keyframes profileAvatarPop {
  0% { transform: scale(0.9); opacity: 0.4; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.profile-avatar-updated { animation: profileAvatarPop 0.35s ease; }

.profile-avatar-img,
.profile-avatar-large {
  width: 112px;
  height: 112px;
}

.badge-verified {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  font-weight: 600;
}

.stat-card,
.info-card,
.action-card {
  background: #fff;
}

.stat-card-icon,
.action-card-icon {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  font-size: 1.2rem;
}

..stat-card {
  min-height: 180px;
}

.stat-card-body {
  min-height: 180px;
}

.stat-card-icon {
  width: 3.5rem;              /* 56px */
  height: 3.5rem;
  min-width: 3.5rem;
  border-radius: 1rem;       /* 16px */
  font-size: 1.7rem;         /* ~27px glyph */
  color: #fff;               /* white icon on the coloured tile */
  box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.25);
  transition: transform 0.2s ease;
}
/* Gradient colour variants — icon is the visual focal point. */
.stat-icon-blue  { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 8px 18px -6px rgba(37, 99, 235, 0.5); }
.stat-icon-green { background: linear-gradient(135deg, #34d399 0%, #16a34a 100%); box-shadow: 0 8px 18px -6px rgba(22, 163, 74, 0.45); }
.stat-icon-amber { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); box-shadow: 0 8px 18px -6px rgba(245, 158, 11, 0.45); }
.stat-icon-cyan  { background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%); box-shadow: 0 8px 18px -6px rgba(6, 182, 212, 0.45); }

/* Card hover: lift + deeper shadow, icon tile scales up. */
.stat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
}
.stat-card:hover .stat-card-icon { transform: scale(1.05); }

.stat-card-label {
  font-size: 0.95rem;
  color: #667085;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 0;
}

.stat-card-value {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0f172a;
}

.info-card .card-header,
.action-card .card-body {
  min-height: auto;
}

.info-list {
  margin: 0;
  padding: 0;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

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

.info-row dt {
  font-size: 0.9rem;
  color: #68728a;
  margin: 0;
}

.info-row dd {
  margin: 0;
  font-weight: 600;
  color: #0f172a;
  text-align: right;
  max-width: 55%;
}

.profile-bio {
  white-space: pre-line;
  color: #475467;
}

.action-card-icon {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

@media (max-width: 991.98px) {
  .info-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .info-row dd {
    max-width: 100%;
    text-align: left;
  }
}

/* ---- Category chips -------------------------------------------------- */
.category-chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
}
.category-chip {
  white-space: nowrap;
  border: 1px solid rgba(16, 24, 40, 0.12);
  background: #fff;
  color: #384150;
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.12s ease;
}
.category-chip:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.category-chip.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }

/* ---- Cards ----------------------------------------------------------- */
.card {
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: var(--sb-card-radius);
  box-shadow: var(--sb-shadow);
}
.listing-card {
  border-radius: 1.5rem;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(16, 24, 40, 0.10);
}
.listing-thumb-wrap { position: relative; display: block; }
.listing-card .listing-thumb {
  height: 200px;
  object-fit: cover;
  width: 100%;
  transition: transform 0.35s ease;
}
.listing-card:hover .listing-thumb {
  transform: scale(1.03);
}
.listing-thumb-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef1f5, #e2e6ec);
  color: #9aa5b1;
}
/* Single top overlay: badges on the left, favorite on the right. Flex
   space-between guarantees the two clusters can never overlap (no margin hacks);
   children size to their content and the heart is a fixed, non-shrinking circle. */
.listing-overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 0.8rem;
  pointer-events: none; /* let clicks fall through to the image link… */
}
.listing-overlay-left,
.listing-overlay-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.listing-overlay-left { align-items: flex-start; }
.listing-overlay-right { align-items: flex-end; flex-shrink: 0; }
/* …except the interactive controls, which stay clickable. */
.listing-overlay-top a,
.listing-overlay-top button,
.listing-overlay-top .listing-fav-form { pointer-events: auto; }

.listing-cat-badge {
  width: fit-content;
  max-width: 100%;
  background: rgba(37, 99, 235, 0.96);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}
.listing-status-badge {
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}
.listing-card .card-body { padding: 1.1rem 1.2rem 1.3rem; }
.listing-title a {
  color: #111827;
  text-decoration: none;
}
.listing-title a:hover {
  color: var(--bs-primary);
}
.listing-price {
  font-weight: 800;
  font-size: 1.18rem;
  color: var(--bs-primary);
}
.my-listings-page .my-listings-hero {
  padding-bottom: 0.4rem;
}
.my-listings-page .page-title {
  font-size: 2.5rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.my-listings-toolbar { border-radius: 1.5rem; }
.my-listings-toolbar .card-body {
  padding: 1.75rem 1.75rem 1.5rem;
}
.my-listings-search .form-control { min-height: 3.5rem; }
.my-listings-search .input-group-text { border: 0; }
.my-listings-sidebar { border-radius: 1.5rem; }
.my-listings-stat-card {
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 1.25rem;
  box-shadow: 0 10px 25px rgba(16, 24, 40, 0.05);
}
.my-listings-stat-card p,
.my-listings-stat-card .text-secondary {
  color: #6b7280;
  letter-spacing: 0.05em;
}
.my-listings-stat-card .h3 { margin-bottom: 0; }
.empty-state-premium {
  border: 1px solid rgba(16, 24, 40, 0.08);
  background: #ffffff;
  box-shadow: 0 20px 45px rgba(16, 24, 40, 0.06);
  border-radius: 1.5rem;
}
.my-listings-filter-panel {
  background: #f8fbff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 1.75rem;
}
.filter-search .form-control {
  height: 3.5rem;
  border-radius: 999px;
  padding-left: 1rem;
}
.filter-search .input-group-text {
  border: 0;
  background: transparent;
  padding-left: 1rem;
  color: #475467;
}
.sort-select {
  height: 3.5rem;
  border-radius: 999px;
  padding-left: 1.5rem;
  padding-right: 2.5rem;
}
.sort-arrow {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #98a2b3;
  pointer-events: none;
}
.my-listings-chip-row .category-chip {
  border: 1px solid rgba(16, 24, 40, 0.12);
  background: #fff;
  color: #475467;
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  border-radius: 999px;
}
.my-listings-chip-row .category-chip.active {
  background: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}
.create-listing-card {
  border-style: dashed;
  background: #fff;
  border-radius: 1.5rem;
}
.create-listing-card:hover {
  transform: translateY(-2px);
}
.create-listing-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.25rem;
  background: #f8fbff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  color: var(--bs-primary);
}
/* ============ My Listings — seller control center ============ */
.my-listings-page .page-title { font-size: 2rem; }

/* KPI cards */
.seller-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.seller-kpi-card { background: #fff; border: 1px solid #eef0f4; border-radius: 18px; box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05); padding: 22px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.seller-kpi-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16, 24, 40, 0.10); }
.seller-kpi-ico { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 14px; }
.seller-kpi-value { font-size: 28px; font-weight: 800; line-height: 1; color: #131b2e; }
.seller-kpi-label { font-size: 13px; color: #667085; margin-top: 4px; }
.seller-kpi-ico--primary { background: #e0e7ff; color: #3730a3; }
.seller-kpi-ico--info { background: #e0f2fe; color: #0369a1; }
.seller-kpi-ico--danger { background: #fee2e2; color: #b42318; }
.seller-kpi-ico--success { background: #dcfce7; color: #15803d; }

/* Weekly insights */
.seller-insights { background: linear-gradient(135deg, #f5f8ff, #fbf9ff); border: 1px solid #e6ebff; border-radius: 20px; padding: 22px 24px; }
.seller-insights-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.seller-insights-ico { width: 44px; height: 44px; border-radius: 13px; background: #fff; box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08); display: inline-flex; align-items: center; justify-content: center; color: #4338ca; font-size: 1.3rem; flex: 0 0 auto; }
.seller-insights-title { font-size: 18px; font-weight: 800; margin: 0; }
.seller-insights-sub { font-size: 14px; color: #667085; }
.seller-insights-metrics { display: flex; flex-wrap: wrap; gap: 14px; }
.seller-insight { flex: 1 1 130px; min-width: 120px; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.05); display: flex; flex-direction: column; gap: 2px; }
.seller-insight-value { font-size: 22px; font-weight: 800; color: #15803d; line-height: 1; }
.seller-insight-label { font-size: 12px; color: #667085; }
.seller-insight--top { flex: 2 1 220px; }
.seller-insight-top-name { font-size: 16px; font-weight: 700; color: #131b2e; text-decoration: none; }
.seller-insight-top-name:hover { text-decoration: underline; }

/* ---- Premium Seller Analytics (Premium Insights) — compact, subtle ---- */
.seller-analytics { background: #fff; border: 1px solid #e6ebff; border-radius: 20px; padding: 22px 24px; }
.seller-insights-ico--premium { color: #b45309; }

/* Free upgrade card */
.sa-upgrade { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between;
  background: linear-gradient(135deg, #f5f8ff, #fbf9ff); border: 1px solid #e6ebff; border-radius: 16px; padding: 1.1rem 1.35rem; }
.sa-upgrade-title { font-size: 1rem; font-weight: 800; color: #131b2e; margin: 0 0 0.15rem; }
.sa-upgrade-text { font-size: 0.85rem; color: #667085; margin: 0 0 0.6rem; }
.sa-upgrade-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; padding: 0; }
.sa-upgrade-list li { font-size: 0.82rem; font-weight: 600; color: #475569; display: inline-flex; align-items: center; gap: 0.35rem; }
.sa-upgrade-list li i { color: #16a34a; }
.sa-upgrade-btn { flex: 0 0 auto; }

/* Premium empty state */
.sa-empty { text-align: center; padding: 1.5rem 1rem; }
.sa-empty-icon { width: 48px; height: 48px; margin: 0 auto 0.6rem; display: grid; place-items: center; border-radius: 50%; background: #f1f5f9; color: #94a3b8; font-size: 1.3rem; }

/* Summary metric grid */
.sa-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; margin-bottom: 1rem; }
.sa-metric { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 0.7rem 0.8rem; }
.sa-metric-value { font-size: 1.2rem; font-weight: 800; color: #0f172a; line-height: 1.1; }
.sa-metric-label { font-size: 0.72rem; color: #64748b; margin-top: 0.15rem; }

/* Weekly trends strip */
.sa-week { background: #f5f8ff; border: 1px solid #e6ebff; border-radius: 14px; padding: 0.85rem 1rem; }
.sa-week-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #4338ca; }
.sa-week-metrics { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.5rem; }
.sa-week-item { display: flex; flex-direction: column; }
.sa-week-value { font-size: 1.1rem; font-weight: 800; color: #15803d; line-height: 1; }
.sa-week-label { font-size: 0.72rem; color: #64748b; }

/* Best performer */
.sa-best { height: 100%; border: 1px solid #fde68a; background: #fffbeb; border-radius: 14px; padding: 0.85rem 1rem; }
.sa-best-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: #b45309; }
.sa-best-body { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.sa-best-thumb { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: #f1f5f9; display: grid; place-items: center; color: #cbd5e1; }
.sa-best-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sa-best-title { font-size: 0.9rem; font-weight: 700; color: #0f172a; margin: 0 0 0.25rem; }
.sa-best-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0 0 0.5rem; padding: 0; font-size: 0.76rem; color: #64748b; }

/* Recommendations */
.sa-recs { height: 100%; border: 1px solid #eef2f7; border-radius: 14px; padding: 0.85rem 1rem; }
.sa-recs-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; }
.sa-recs-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.sa-recs-list li { font-size: 0.85rem; color: #334155; display: flex; align-items: flex-start; gap: 0.25rem; padding: 0.2rem 0; }
.sa-recs-list li i { color: #2563eb; font-size: 1.1rem; flex: 0 0 auto; }

/* Performance table */
.sa-table-wrap { border: 1px solid #eef2f7; border-radius: 14px; overflow: hidden; }
.sa-table-head { font-size: 0.78rem; font-weight: 700; color: #475569; padding: 0.6rem 0.9rem; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
.sa-table { font-size: 0.84rem; }
.sa-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #94a3b8; font-weight: 700; border-bottom: 1px solid #eef2f7; }
.sa-table-title { color: #0f172a; text-decoration: none; font-weight: 600; display: inline-block; max-width: 200px; }
.sa-table-title:hover { color: #2563eb; }

/* Filter chips with counts */
.seller-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(16, 24, 40, 0.12); background: #fff; color: #475467; padding: 0.55rem 0.9rem; font-size: 0.85rem; font-weight: 600; border-radius: 999px; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; }
.seller-chip:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.seller-chip.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.seller-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 6px; border-radius: 999px; background: rgba(16, 24, 40, 0.06); color: #475467; font-size: 12px; font-weight: 700; }
.seller-chip.active .seller-chip-count { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* Seller listing card */
.seller-card { border: 1px solid #eef0f4; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 22px rgba(16, 24, 40, 0.05); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.seller-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12); }
.seller-card.is-featured { border-color: #fcd980; box-shadow: 0 8px 26px rgba(251, 191, 36, 0.22); }
.seller-card-thumb { position: relative; aspect-ratio: 4 / 3; background: #f2f3ff; overflow: hidden; }
.seller-card-thumb a { display: block; width: 100%; height: 100%; }
.seller-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.seller-card:hover .seller-card-thumb img { transform: scale(1.05); }
.seller-card-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #98a2b3; font-size: 1.8rem; }
.seller-card-status { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; color: #fff; padding: 4px 10px; border-radius: 999px; }
.seller-card-featured { position: absolute; top: 12px; right: 12px; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.16); }
.seller-card .card-body { padding: 16px 18px 18px; }
.seller-card-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; line-height: 1.3; }
.seller-card-title a { color: #131b2e; text-decoration: none; }
.seller-card-title a:hover { color: var(--bs-primary); }
.seller-card-price { font-size: 18px; font-weight: 800; color: #131b2e; }
.seller-card-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 0 0; margin: 12px 0 0; border-top: 1px solid #f1f3f7; }
.seller-card-stats li { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: #344054; }
.seller-card-stats i { color: #98a2b3; font-size: 0.95em; }
.seller-card-stat-label { font-size: 12px; font-weight: 500; color: #98a2b3; }
.seller-card-featured-expiry { font-size: 12.5px; color: #b45309; margin: 12px 0 0; }
.seller-card-actions { display: flex; gap: 8px; margin-top: 16px; }
.seller-card-primary { flex: 1 1 auto; }
.seller-card-more { flex: 0 0 auto; width: 44px; }

/* Improved Create Listing card */
.create-listing-card { border-style: dashed; border-width: 2px; border-color: rgba(16, 24, 40, 0.14); background: #fbfcff; border-radius: 18px; transition: transform 0.18s ease, border-color 0.15s ease, background-color 0.15s ease; }
.create-listing-card:hover { transform: translateY(-4px); border-color: var(--bs-primary); background: #f5f8ff; }
.create-listing-icon { width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: #eef4ff; border: 1px solid rgba(16, 24, 40, 0.06); color: var(--bs-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }

@media (max-width: 575.98px) {
  .seller-kpi-value { font-size: 24px; }
  .seller-insight { flex: 1 1 100%; }
  .my-listings-page .page-title { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .seller-kpi-card, .seller-card, .seller-card-thumb img, .create-listing-card { transition: none !important; }
  .seller-kpi-card:hover, .seller-card:hover, .create-listing-card:hover { transform: none; }
  .seller-card:hover .seller-card-thumb img { transform: none; }
}

.max-w-640 { max-width: 640px !important; }
.no-scrollbar {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1199.98px) {
  .my-listings-toolbar .category-chips { justify-content: flex-start; }
}

/* ---- Auth pages ------------------------------------------------------ */
/* Chrome-free, centered layout for login/register (reuses .form-card). */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--sb-bg);
}
.auth-card-wrap { width: 100%; max-width: 28rem; }
.auth-brand {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-bottom: 1.25rem;
}
.auth-brand-name {
  display: block;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--bs-primary);
}
.auth-brand-sub { display: block; font-size: 0.8rem; color: #98a2b3; }

/* ---- Forms ----------------------------------------------------------- */
.form-card {
  border-radius: var(--sb-card-radius);
}
.form-control, .form-select {
  border-radius: 0.65rem;
}
.form-control:focus, .form-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

/* ---- Buttons --------------------------------------------------------- */
.btn {
  border-radius: 0.65rem;
  font-weight: 500;
  transition: transform 0.15s ease, box-shadow 0.2s ease,
    background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-lg { border-radius: 0.8rem; }
.btn-primary {
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}
.btn-primary:hover {
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.26);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
}

/* ---- Empty state ----------------------------------------------------- */
.empty-state {
  border: 1px dashed rgba(16, 24, 40, 0.15);
  border-radius: var(--sb-card-radius);
  background: #fff;
  padding: 3rem 1.5rem;
}
.empty-state-icon {
  font-size: 2.5rem;
  line-height: 1;
}

/* ---- Shared dashboard page wrapper (Phase 10.3) --------------------- */
/* One layout container for every sidebar/list page (My Listings, Saved Items,
   Messages, Notifications). It spans the full content column — exactly like the
   reference Saved Items page — so the page header, subtitle and content start at
   the same left edge with identical spacing on every page. Spacing between the
   header, subtitle and content is inherited from the shared page_header
   (mb-4) + the content components, never redefined per page. */
.dashboard-page { width: 100%; }

/* ---- Unified empty-state component (Phase 10.2) --------------------- */
.empty-state-card {
  max-width: 740px;
  margin: 2.5rem auto;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.06);
  padding: 3rem 2rem;
  animation: emptyStateIn 0.3s ease both;
}
.empty-state-ico {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4ff;
  color: var(--bs-primary);
  font-size: 2rem;
  line-height: 1;
}
.empty-state-figure { margin-bottom: 1.25rem; }
.empty-state-figure:empty { display: none; }
.empty-state-title { font-size: 1.35rem; font-weight: 800; color: #131b2e; margin: 0 0 0.5rem; }
.empty-state-desc { color: #667085; font-size: 0.975rem; line-height: 1.5; max-width: 46ch; margin: 0 auto; }
.empty-state-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }
.empty-state-cta { border-radius: 12px; }

/* Compact variant — sits inside a card body or a table cell (no card chrome). */
.empty-state-card--compact { max-width: none; margin: 0; padding: 2.75rem 1rem; background: transparent; border: 0; box-shadow: none; }
.empty-state-card--compact .empty-state-figure { margin-bottom: 0.85rem; }
.empty-state-card--compact .empty-state-ico { width: 56px; height: 56px; border-radius: 16px; font-size: 1.55rem; background: #f2f4f7; color: #98a2b3; }
.empty-state-card--compact .empty-state-title { font-size: 1.05rem; }
.empty-state-card--compact .empty-state-desc { font-size: 0.9rem; }
.empty-state-card--compact .empty-state-actions { margin-top: 1rem; }

@keyframes emptyStateIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
  .empty-state-card { padding: 2rem 1.25rem; margin: 1.5rem auto; }
  .empty-state-actions { flex-direction: column; }
  .empty-state-actions .empty-state-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .empty-state-card { animation: none; }
}

/* ---- Image uploader -------------------------------------------------- */
.uploader-dropzone {
  border: 2px dashed #c7cdd6;
  border-radius: var(--sb-card-radius);
  background: #fbfcfe;
  padding: 2.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.uploader-cloud {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e7efff;
  color: var(--bs-primary);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.85rem;
}
.uploader-dropzone:hover,
.uploader-dropzone:focus-visible {
  border-color: var(--bs-primary);
  background: #f5f8ff;
  outline: none;
}
.uploader-dropzone.dragover {
  border-color: var(--bs-primary);
  background: #eef3ff;
}
.uploader-dropzone.is-full {
  opacity: 0.6;
  cursor: not-allowed;
}
.uploader-dropzone.limit-hit {
  border-color: #dc3545;
  background: #fdf0f1;
  animation: uploader-shake 0.3s;
}
@keyframes uploader-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.uploader-icon { font-size: 1.75rem; line-height: 1; }

.uploader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.uploader-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, 0.1);
  background: #fff;
  cursor: grab;
  box-shadow: var(--sb-shadow);
}
.uploader-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.uploader-thumb.dragging { opacity: 0.5; }
.uploader-thumb.drop-target { outline: 2px dashed var(--bs-primary); outline-offset: -2px; }
.uploader-cover-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: var(--bs-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.uploader-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.uploader-remove:hover { background: #dc3545; }
.image-uploader.is-invalid .uploader-dropzone { border-color: #dc3545; }


/* Status badge color variants */
.status-available { background-color: #16a34a; }
.status-reserved  { background-color: #d97706; }
.status-sold      { background-color: #475467; }
.status-draft     { background-color: #6b7280; }
.status-expired   { background-color: #64748b; }
.status-removed   { background-color: #dc2626; }

/* Meta rows under the price */
.listing-meta-list {
  list-style: none;
  padding: 0;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.listing-meta-list li { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.listing-meta-list i { color: #98a2b3; }

.listing-actions { flex-wrap: wrap; }

/* Visible keyboard focus for custom (non-.btn) interactive elements */
.category-chip:focus-visible,
.condition-btn:focus-visible,
.listing-thumb-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* ---- Quick View modal ------------------------------------------------ */
.qv-image { width: 100%; height: 100%; min-height: 260px; max-height: 430px; object-fit: cover; }
@media (max-width: 767.98px) { .qv-image { max-height: 240px; min-height: 200px; } }
.qv-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}

/* ---- Sell Item: step headers --------------------------------------- */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  flex: 0 0 auto;
}

/* ---- Sell Item: condition segmented control ------------------------- */
.condition-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.condition-btn {
  border: 1px solid rgba(16, 24, 40, 0.15);
  background: #fff;
  color: #475467;
  border-radius: 0.6rem;
  padding: 0.45rem 1.25rem;
  font-weight: 500;
  transition: all 0.12s ease;
}
.condition-btn:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.condition-btn.active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* ---- Sell Item: summary + safety panels ----------------------------- */
@media (min-width: 992px) {
  .summary-col { position: sticky; top: calc(var(--sb-topbar-h) + 1.5rem); }
}
.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(16, 24, 40, 0.06);
}
.summary-row:last-of-type { border-bottom: 0; }
.summary-info {
  display: flex;
  gap: 0.6rem;
  background: #eff4ff;
  color: #1e40af;
  border-radius: 0.6rem;
  padding: 0.75rem 0.85rem;
  font-size: 0.85rem;
  margin-top: 0.75rem;
}
.summary-info i { margin-top: 1px; }
.safety-card { background: #fef2f3; border: 1px solid #fbd5da; }
.safety-card h2 { color: #be123c; }
.safety-list { padding-left: 1.1rem; color: #9f1239; font-size: 0.88rem; }
.safety-list li { margin-bottom: 0.35rem; }
.safety-list li::marker { color: #ef4444; }

/* ---- Item view — "Apex Modernist" (Stitch listing-detail spec) ------- */
.item-view {
  --iv-primary: #004ac6;
  --iv-primary-2: #2563eb;
  --iv-on-surface: #131b2e;
  --iv-on-variant: #434655;
  --iv-outline: #c3c6d7;
  --iv-surface-low: #f2f3ff;
  --iv-surface-high: #e2e7ff;
  --iv-green: #16a34a;
  --iv-radius-card: 24px;
  --iv-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  color: var(--iv-on-surface);
}
.item-view .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.item-view .no-scrollbar::-webkit-scrollbar { display: none; }

.iv-card {
  background: #fff;
  border: 1px solid var(--iv-outline);
  border-radius: var(--iv-radius-card);
  box-shadow: var(--iv-shadow);
}
.iv-gallery { padding: 16px; }
.iv-desc-card { padding: 32px; }
.iv-info, .iv-seller { padding: 24px; }

/* Gallery hero + favourite */
.iv-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  /* Barely-there gradient (white → existing surface token) reads as an
     intentional product backdrop rather than unused space when a contained
     image is letterboxed/pillarboxed. */
  background: linear-gradient(180deg, #fff 0%, var(--iv-surface-low) 100%);
  aspect-ratio: 4 / 3;
  /* Thin neutral inner ring + faint inset shadow frame the photo so it feels
     deliberately placed. Applied to the container only — never the image, so
     the contain behaviour and full-image visibility are unchanged. */
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06),
              inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.25s ease;
}
/* Hover: lift the frame (stronger primary-tinted ring + soft outer shadow).
   The image is never scaled, so nothing is re-cropped. */
.iv-hero:hover {
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.35),
              inset 0 1px 3px rgba(15, 23, 42, 0.06),
              0 10px 28px -14px rgba(15, 23, 42, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .iv-hero { transition: none; }
}
/* Show the ENTIRE uploaded photo (letterbox/pillarbox against the gallery
   background) rather than cropping it to fill the 4:3 box. `contain` preserves
   the original aspect ratio and scales down when needed; the fixed container
   size is unchanged so there is no layout shift. No hover-zoom — scaling inside
   the overflow-hidden box would re-crop the image. */
.iv-hero > img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.iv-hero-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #98a2b3; font-size: 2.4rem; }
.iv-fav {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #475467;
  font-size: 1.4rem;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, color 0.2s ease;
}
.iv-fav:hover { transform: scale(1.08); color: #e8517a; }
.iv-fav.is-saved { color: #e8517a; }

/* Thumbnails */
.iv-thumbs { display: flex; gap: 16px; overflow-x: auto; padding: 16px 2px 4px; }
.iv-thumb {
  width: 90px;
  height: 90px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--iv-outline);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.iv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-thumb:hover { border-color: var(--iv-primary-2); transform: translateY(-2px); }
.iv-thumb.active { border: 3px solid var(--iv-primary-2); }

/* Section titles + description */
.iv-section-title { font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.01em; color: var(--iv-on-surface); margin: 0 0 24px; }
.iv-desc { font-size: 18px; line-height: 1.7; color: var(--iv-on-variant); white-space: pre-line; overflow-wrap: anywhere; margin: 0; }

/* Sticky sidebar */
.iv-sticky { display: flex; flex-direction: column; }
@media (min-width: 992px) {
  .iv-sticky { position: sticky; top: calc(var(--sb-topbar-h) + 1.5rem); }
}

/* Product info card */
.iv-info-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.iv-cat-badge { display: inline-block; padding: 6px 16px; background: var(--iv-surface-high); color: #38485d; font-size: 14px; font-weight: 500; border-radius: 9999px; }
.iv-posted { display: inline-flex; align-items: center; gap: 6px; color: var(--iv-on-variant); font-size: 14px; white-space: nowrap; }
.iv-title { font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--iv-on-surface); margin: 0 0 8px; }
.iv-price { font-size: 24px; font-weight: 700; color: var(--iv-primary); margin: 0 0 24px; }

/* Condition / location tiles */
.iv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.iv-tile { padding: 16px; border-radius: 12px; background: var(--iv-surface-low); border: 1px solid var(--iv-outline); }
.iv-tile-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--iv-on-variant); margin-bottom: 6px; }
.iv-tile-value { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--iv-on-surface); overflow-wrap: anywhere; }
.iv-tile-value i { font-size: 1.1rem; flex: 0 0 auto; }
.iv-ico-green { color: var(--iv-green); }
.iv-ico-blue { color: var(--iv-primary); }

/* Action buttons */
.iv-actions { display: flex; flex-direction: column; gap: 12px; }
.iv-actions form { margin: 0; }
.iv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.iv-btn i { font-size: 1.05rem; }
.iv-btn-primary { background: linear-gradient(135deg, #2563eb 0%, #004ac6 100%); color: #fff; box-shadow: 0 8px 20px -6px rgba(0, 74, 198, 0.4); }
.iv-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -6px rgba(0, 74, 198, 0.5); color: #fff; }
.iv-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.iv-btn-secondary { background: #fff; color: var(--iv-on-surface); border: 2px solid var(--iv-outline); }
.iv-btn-secondary:hover { background: var(--iv-surface-low); color: var(--iv-on-surface); }
.iv-btn-success { background: #fff; color: #16a34a; border: 2px solid #86efac; }
.iv-btn-success:hover { background: #f0fdf4; color: #15803d; }
.iv-note { text-align: center; font-size: 12px; color: var(--iv-on-variant); margin: 16px 0 0; }

/* ---- Reviews (Trust System Phase 2) ---- */
.review-card { max-width: 560px; }
.review-stars { display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.review-star-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.review-stars label { font-size: 2rem; line-height: 1; color: #cbd5e1; cursor: pointer; margin: 0; transition: color 0.12s ease; }
.review-stars label i { pointer-events: none; }
.review-star-input:checked ~ label,
.review-stars label:hover,
.review-stars label:hover ~ label { color: #f59e0b; }
.review-star-input:focus-visible + label { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
/* Inline "Review submitted" confirmation on the listing detail page */
.iv-review-done { display: inline-flex; align-items: center; gap: 0.4rem; color: #15803d; font-weight: 600; font-size: 0.9rem; }

/* ---- Reputation display (Trust System Phase 3) — subtle, muted ---- */
.rep-stars { display: inline-flex; gap: 1px; color: #f59e0b; font-size: 0.8rem; line-height: 1; }
.rep-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; }
.rep-score { font-weight: 700; color: #0f172a; }
.rep-count { color: #94a3b8; }
.rep-new { display: inline-block; font-size: 0.76rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 2px 10px; }
.listing-rep { min-height: 1.05rem; }

/* Seller reputation block on the listing detail seller panel */
.rep-detail { margin: 0.75rem 0; padding: 0.8rem 0; border-top: 1px solid #e6ecf5; border-bottom: 1px solid #e6ecf5; }
.rep-detail-title { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; margin: 0 0 0.5rem; }
.rep-detail-head { display: flex; align-items: center; gap: 0.5rem; }
.rep-detail-head .rep-stars { font-size: 1rem; }
.rep-detail-score { font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.rep-detail-stats { list-style: none; display: flex; gap: 1.25rem; margin: 0.5rem 0 0; padding: 0; font-size: 0.82rem; color: #64748b; }
.rep-detail-stats strong { color: #0f172a; }
.rep-detail-empty { margin: 0.35rem 0 0; font-size: 0.82rem; color: #94a3b8; }

/* Recent reviews list (public seller profile) */
.review-list { list-style: none; margin: 0; padding: 0; }
.review-item { padding: 0.85rem 0; border-bottom: 1px solid #eef2f7; }
.review-item:last-child { border-bottom: 0; padding-bottom: 0; }
.review-item-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.review-item-head .rep-stars { font-size: 0.9rem; }
.review-item-meta { font-size: 0.78rem; color: #94a3b8; }
.review-item-comment { margin-top: 0.35rem; font-size: 0.9rem; color: #334155; overflow-wrap: anywhere; }

/* Seller link in the chat header */
.ct-listing-seller { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: #475569; text-decoration: none; margin-bottom: 0.4rem; }
.ct-listing-seller:hover { color: #2563eb; }

/* ---- Trust badges (Trust System Phase 4) — small, subtle pill chips ---- */
.trust-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600; line-height: 1.3;
  background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; white-space: nowrap;
}
.trust-badge-icon { font-size: 0.82rem; line-height: 1; }
.trust-badge--sm { padding: 0.1rem 0.5rem; font-size: 0.72rem; }
/* Muted, badge-specific tints — never bright. */
.trust-badge--top_seller { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.trust-badge--trusted_seller { background: #eff6ff; color: #1d4ed8; border-color: #dbe6fb; }
.trust-badge--quick_responder { background: #f5f3ff; color: #6d28d9; border-color: #e9e5fb; }
.trust-badge--great_communicator { background: #ecfdf3; color: #15803d; border-color: #c9f0d8; }
.trust-badge--popular_seller { background: #fff1f2; color: #be123c; border-color: #fecdd3; }

/* ---- Listing Tools panel (owner control-center on the detail page) ---- */
.iv-tools { padding: 20px 22px; }
.iv-tools-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.iv-tools-title { font-size: 16px; font-weight: 700; color: var(--iv-on-surface); }
.iv-tools-group { display: flex; flex-direction: column; gap: 10px; }
.iv-tools-group form { margin: 0; }
.iv-tools-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--iv-on-variant); margin: 0 0 2px; }
.iv-tools-divider { margin: 18px 0; border: 0; border-top: 1px solid var(--iv-outline); opacity: 1; }
.iv-tools-hint { font-size: 12px; color: var(--iv-on-variant); display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; }
.iv-tools-hint i { color: #d97706; margin-top: 2px; }

/* Full-width, vertically-stacked tool button (shared by <a>, <button>, disabled <span>) */
.iv-tool-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--iv-outline);
  color: var(--iv-on-surface); font-size: 14px; font-weight: 600;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.iv-tool-btn > i:first-child { font-size: 1.05rem; flex: 0 0 auto; }
.iv-tool-btn:hover { background: var(--iv-surface-low); border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.35); color: var(--iv-on-surface); }
.iv-tool-btn .iv-tool-note { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--iv-on-variant); white-space: nowrap; }
.iv-tool-lock { margin-left: auto; color: var(--iv-on-variant); font-size: 0.85rem; }

.iv-tool-warning { border-color: #fcd34d; background: #fffbeb; color: #b45309; }
.iv-tool-warning:hover { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.iv-tool-success { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.iv-tool-success:hover { background: #dcfce7; border-color: #22c55e; color: #166534; }
.iv-tool-danger { border-color: #fecaca; background: #fff5f5; color: #dc2626; }
.iv-tool-danger:hover { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
.iv-tool-locked { color: var(--iv-on-variant); }
.iv-tool-locked:hover { color: var(--iv-on-surface); }
.iv-tool-btn.is-disabled { opacity: 0.55; cursor: not-allowed; background: var(--iv-surface-low); box-shadow: none; transform: none; }

/* Sectioned overflow menu on the My Listings seller cards */
.seller-card-menu { min-width: 12rem; }
.seller-card-menu .dropdown-item.disabled { opacity: 0.55; }

/* Seller trust card */
.iv-seller { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.iv-seller:hover { box-shadow: 0 14px 32px -12px rgba(15, 23, 42, 0.18); transform: translateY(-2px); }
.iv-seller-title { font-size: 16px; font-weight: 700; color: var(--iv-on-surface); margin: 0 0 16px; }
.iv-seller-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.iv-seller-avatar-wrap { position: relative; flex: 0 0 auto; }
.iv-seller-avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  background: var(--iv-surface-high); color: #38485d;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
}
.iv-seller-check {
  position: absolute; bottom: 0; right: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--iv-green); border: 2px solid #fff; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.iv-seller-name { font-size: 18px; font-weight: 700; color: var(--iv-on-surface); overflow-wrap: anywhere; }
.iv-seller-sub { font-size: 14px; color: var(--iv-on-variant); }
.iv-seller-link { margin-left: auto; color: var(--iv-primary); font-weight: 700; font-size: 14px; text-decoration: none; flex: 0 0 auto; }
.iv-seller-link:hover { color: var(--iv-primary); }
.iv-seller-meta { padding-top: 16px; border-top: 1px solid var(--iv-outline); display: flex; flex-direction: column; gap: 12px; }
.iv-seller-meta-row { display: flex; justify-content: space-between; font-size: 14px; }
.iv-seller-meta-row .k { color: var(--iv-on-variant); }
.iv-seller-meta-row .v { font-weight: 600; color: var(--iv-on-surface); }

/* Safety card */
.iv-safety { padding: 20px; border-radius: var(--iv-radius-card); background: rgba(37, 99, 235, 0.05); border: 1px solid rgba(0, 74, 198, 0.2); }
.iv-safety-head { display: flex; align-items: center; gap: 10px; color: var(--iv-primary); font-weight: 700; margin-bottom: 8px; }
.iv-safety p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--iv-on-variant); }

/* Related listings */
.iv-related { margin-top: 48px; }
.iv-related-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.iv-related-link { color: var(--iv-primary); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.iv-related-link:hover { text-decoration: underline; color: var(--iv-primary); }
.iv-related .marketplace-catalog { max-width: none; gap: 0; }

/* Focus rings for the custom gallery controls */
.iv-fav:focus-visible,
.iv-thumb:focus-visible { outline: 2px solid var(--iv-primary); outline-offset: 2px; }

@media (max-width: 767.98px) {
  .iv-desc-card { padding: 24px; }
  .iv-title { font-size: 26px; }
  .iv-desc { font-size: 16px; }
}

/* ---- Chat inbox — "Apex Modernist" (Stitch messages spec) ------------ */
.min-w-0 { min-width: 0; }
.messages-inbox {
  --mi-primary: #004ac6;
  --mi-on-surface: #131b2e;
  --mi-on-variant: #434655;
  --mi-outline: #c3c6d7;
  --mi-surface-high: #e2e7ff;
  --mi-surface-low: #f2f3ff;
  --mi-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  --mi-shadow-hover: 0 14px 32px -10px rgba(15, 23, 42, 0.18);
  /* Width/alignment now come from the shared .dashboard-page wrapper so this
     page lines up pixel-for-pixel with Saved Items / My Listings. */
}

.messages-head { margin-bottom: 28px; }
.messages-title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mi-on-surface);
  margin: 0;
}
.messages-subtitle {
  font-size: 18px;
  line-height: 28px;
  color: var(--mi-on-variant);
  margin: 10px 0 0;
}

/* Toolbar: search (grows) + sort control (right) */
.messages-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.messages-toolbar .messages-search { flex: 1 1 auto; margin-bottom: 0; }

/* Sort control (matches the search field's visual language) */
.messages-sort { flex: 0 0 auto; }
.messages-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--mi-outline);
  border-radius: 12px;
  color: var(--mi-on-surface);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.messages-sort-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.15);
  border-color: var(--mi-active-border);
}
.messages-sort-btn:focus-visible {
  outline: none;
  border-color: var(--mi-primary);
  box-shadow: 0 0 0 4px rgba(0, 74, 198, 0.08);
}
.messages-sort-btn > .bi-arrow-down-up { font-size: 16px; color: var(--mi-accent); }
.messages-sort-caret { font-size: 12px; color: var(--mi-muted); transition: transform 0.2s ease; }
.messages-sort-btn[aria-expanded="true"] .messages-sort-caret { transform: rotate(180deg); }

.messages-sort-menu {
  --bs-dropdown-min-width: 244px;
  border: 1px solid var(--mi-outline);
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.25);
  padding: 8px;
  margin-top: 8px;
}
.messages-sort-menu.show { animation: miSortIn 0.16s ease; }
@keyframes miSortIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.messages-sort-heading {
  display: block;
  padding: 6px 12px 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mi-muted);
}
.messages-sort-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mi-on-surface);
  white-space: nowrap;
}
.messages-sort-item:hover,
.messages-sort-item:focus {
  background: var(--mi-active-bg);
  color: var(--mi-primary);
}
.messages-sort-item.is-selected { color: var(--mi-primary); font-weight: 600; }
.messages-sort-check { font-size: 16px; opacity: 0; color: var(--mi-accent); flex: 0 0 auto; }
.messages-sort-item.is-selected .messages-sort-check { opacity: 1; }

/* Search field (rounded pill, icon + ⌘K badge, focus glow) */
.messages-search { position: relative; margin-bottom: 24px; }
.messages-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mi-on-variant);
  font-size: 18px;
  line-height: 0;
  pointer-events: none;
}
.messages-search-input {
  width: 100%;
  height: 46px;
  padding: 0 58px 0 44px;
  background: #fff;
  border: 1px solid var(--mi-outline);
  border-radius: 9999px;
  font-size: 16px;
  color: var(--mi-on-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.messages-search-input::placeholder { color: var(--mi-on-variant); opacity: 0.8; }
.messages-search-input:focus {
  outline: none;
  border-color: var(--mi-primary);
  box-shadow: 0 0 0 4px rgba(0, 74, 198, 0.08);
}
.messages-search-kbd {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--mi-on-variant);
  background: var(--mi-surface-high);
  border: 1px solid rgba(115, 118, 134, 0.35);
  padding: 3px 6px;
  border-radius: 6px;
  pointer-events: none;
}

/* Conversation cards */
.conversation-list { display: flex; flex-direction: column; gap: 16px; }
.conversation-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--mi-outline);
  border-radius: 20px;
  box-shadow: var(--mi-shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.conversation-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mi-shadow-hover);
  border-color: rgba(0, 74, 198, 0.35);
  background: #fcfdff;
}
.conversation-card:focus-visible {
  outline: 2px solid var(--mi-primary);
  outline-offset: 2px;
}
.conversation-thumb-wrap { position: relative; flex: 0 0 auto; }
.conversation-thumb {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(195, 198, 215, 0.6);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  background: var(--mi-surface-low);
  display: block;
}
.conversation-thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
  font-size: 1.35rem;
}
.conversation-unread-dot {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mi-primary);
  border: 2px solid #fff;
}
.conversation-body { flex: 1 1 auto; min-width: 0; }
.conversation-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.conversation-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mi-on-surface);
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversation-time {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--mi-on-variant);
}
.conversation-with {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--mi-on-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Unread emphasis */
.conversation-card.is-unread .conversation-time { color: var(--mi-primary); font-weight: 700; }
.conversation-card.is-unread .conversation-with { color: var(--mi-primary); font-weight: 600; }

.messages-no-results {
  text-align: center;
  color: var(--mi-on-variant);
  padding: 24px;
  margin: 0;
}

@media (max-width: 767.98px) {
  .messages-title { font-size: 32px; line-height: 40px; }
  .conversation-card { padding: 16px; gap: 12px; border-radius: 18px; }
  .conversation-thumb { width: 56px; height: 56px; border-radius: 14px; }
}

/* ---- Chat thread ----------------------------------------------------- */
.chat-shell { align-items: flex-start; }
.chat-panel { overflow: hidden; }
.chat-message-stack { display: flex; flex-direction: column; gap: 0.35rem; max-width: min(75%, 32rem); }
.chat-row { width: 100%; }
.chat-bubble {
  max-width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.chat-bubble-other {
  background: #f0fdf4;
  color: #14532d;
  border-bottom-left-radius: 0.3rem;
}
.chat-bubble-own {
  background: #eff6ff;
  color: #1d4ed8;
  border-bottom-right-radius: 0.3rem;
}
.chat-bubble-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.chat-bubble-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.chat-bubble-avatar-own { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.chat-bubble-avatar-other { background: linear-gradient(135deg, #15803d, #22c55e); }
.chat-bubble-name {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}
.chat-bubble-role { font-weight: 600; opacity: 0.95; }
.chat-text { white-space: pre-line; overflow-wrap: anywhere; font-size: 0.96rem; line-height: 1.45; color: #111827; }
.chat-time { display: block; font-size: 0.72rem; opacity: 0.8; margin-top: 0.25rem; color: #475467; }
.chat-composer-wrap { border-top: 1px solid rgba(16, 24, 40, 0.08); padding: 1rem; background: #fcfcfd; }
.chat-composer .form-control { resize: vertical; }
.chat-thread {
  max-height: 60vh;
  min-height: 24rem;
  overflow-y: auto;
  padding: 1rem;
  background: #fff;
}
.chat-summary-card {
  padding: 1rem 1rem 1.05rem;
  margin: 1rem 1rem 0;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
  background: linear-gradient(135deg, #f8fbff, #f6fff8);
}
.participant-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  width: fit-content;
  border: 1px solid transparent;
}
.participant-buyer {
  color: #0f4c81;
  background: rgba(37, 99, 235, 0.10);
  border-color: rgba(37, 99, 235, 0.16);
}
.participant-seller {
  color: #166534;
  background: rgba(22, 163, 74, 0.10);
  border-color: rgba(22, 163, 74, 0.16);
}
.participant-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.participant-buyer .participant-avatar { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.participant-seller .participant-avatar { background: linear-gradient(135deg, #15803d, #22c55e); }
.participant-copy { min-width: 0; }
.participant-name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
}
.participant-role {
  font-weight: 600;
  opacity: 0.95;
  margin-left: 0.2rem;
}
.negotiation-sidebar { position: sticky; top: 1rem; }
.negotiation-card { border-radius: 1rem; overflow: hidden; }
.negotiation-shell { display: flex; flex-direction: column; gap: 1.5rem; padding: 1rem; }
.negotiation-summary-card,
.negotiation-actions-card,
.negotiation-history-card,
.negotiation-counter-card {
  background: #fcfdff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 1rem;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  padding: 1rem 1rem 1.05rem;
}
.negotiation-counter-card {
  transition: max-height 0.25s ease, opacity 0.25s ease, margin-top 0.25s ease;
  overflow: hidden;
}
.negotiation-counter-card.collapsing {
  opacity: 0;
}
.negotiation-counter-card.show {
  opacity: 1;
}
.negotiation-counter-form {
  margin-top: 0.25rem;
}
.negotiation-counter-cancel { white-space: nowrap; }
.negotiation-section-header {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.8rem;
}
.section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #64748b; margin-bottom: 0.45rem; }
.offer-amount {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
}
.offer-history-amount {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}
.offer-message {
  font-size: 0.9rem;
  color: #475467;
  line-height: 1.45;
}
.history-stack { display: grid; gap: 0.7rem; }
.history-item {
  padding: 0.8rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(16, 24, 40, 0.06);
  background: #fff;
}
.history-item.participant-buyer { background: #f8fbff; }
.history-item.participant-seller { background: #f5fff8; }
.history-meta { font-size: 0.78rem; color: #64748b; }
.listing-status-row { padding: 0.7rem 0.8rem; border-radius: 0.8rem; background: #f8fafc; }
.negotiation-page-card {
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

/* ---- Negotiation page redesign ------------------------------------ */
.negotiation-page-shell { display: flex; flex-direction: column; gap: 1rem; }
.negotiation-back-link { color: #2563eb; font-weight: 600; }
.negotiation-header-card,
.negotiation-summary-card,
.negotiation-current-card,
.negotiation-actions-card,
.negotiation-insights-card,
.negotiation-tips-card,
.negotiation-counter-card,
.negotiation-history-card {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.negotiation-header-card:hover,
.negotiation-summary-card:hover,
.negotiation-current-card:hover,
.negotiation-actions-card:hover,
.negotiation-insights-card:hover,
.negotiation-tips-card:hover,
.negotiation-counter-card:hover,
.negotiation-history-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.07);
}
.negotiation-listing-thumb-link { display: inline-flex; }
.negotiation-listing-thumb {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
}
.negotiation-listing-thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  color: #64748b;
  font-size: 1.35rem;
}
.negotiation-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
}
.negotiation-status-badge {
  background: #dcfce7;
  color: #166534;
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font-weight: 600;
}
.negotiation-meta-row { margin-top: 0.4rem; }
.negotiation-meta-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.negotiation-meta-value,
.negotiation-original-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}
.negotiation-original-price { font-size: 1.15rem; color: #2563eb; }
.negotiation-view-link { border-radius: 999px; padding-inline: 1.1rem; }
.negotiation-summary-card { background: #f8fafc; }
.negotiation-summary-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.35rem;
}
.negotiation-summary-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}
.negotiation-summary-difference { font-size: 1.05rem; font-weight: 700; color: #22c55e; }
.negotiation-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.9rem;
}
.negotiation-current-card { border-top: 4px solid #2563eb; }
.negotiation-price {
  font-size: 2.25rem;
  font-weight: 700;
  color: #2563eb;
  line-height: 1;
}
.negotiation-badge-row { margin: 0.65rem 0 0.6rem; }
.negotiation-live-badge {
  background: #eff6ff;
  color: #2563eb;
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
}
.negotiation-offer-meta {
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 1rem;
}
.negotiation-status-panel {
  background: #f8fbff;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 0.95rem 1rem;
}
.negotiation-status-title { font-weight: 700; color: #1d4ed8; }
.negotiation-status-subtitle { font-size: 0.85rem; color: #64748b; margin-top: 0.2rem; }
.negotiation-empty-copy { color: #475569; }
.negotiation-actions-card .btn,
.negotiation-current-card .btn,
.negotiation-counter-card .btn {
  border-radius: 999px;
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.status-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
}
.status-dot-available { background: #22c55e; }
.negotiation-tip-copy { color: #475569; line-height: 1.6; }
.negotiation-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
  color: #334155;
}
.negotiation-tips-list i { color: #22c55e; margin-right: 0.45rem; }
.negotiation-counter-card { background: #f8fafc; }
.negotiation-timeline { position: relative; padding-left: 1.15rem; }
.negotiation-timeline::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 2px;
  background: #e5e7eb;
}
.negotiation-timeline-item { position: relative; padding-left: 1rem; padding-bottom: 1rem; }
.negotiation-timeline-item:last-child { padding-bottom: 0; }
.negotiation-timeline-dot {
  position: absolute;
  left: -0.15rem;
  top: 0.2rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #2563eb;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #dbeafe;
}
.negotiation-timeline-dot-start { background: #22c55e; box-shadow: 0 0 0 2px #dcfce7; }
.negotiation-timeline-content {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.negotiation-history-title { font-weight: 700; color: #0f172a; }
.negotiation-history-meta { color: #64748b; font-size: 0.88rem; margin-top: 0.25rem; }
.negotiation-history-badge {
  background: #eff6ff;
  color: #2563eb;
  border-radius: 999px;
}
.negotiation-timeline-item-start .negotiation-timeline-content { background: #f8fafc; }

@media (max-width: 991.98px) {
  .negotiation-summary-card .row > .col { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 767.98px) {
  .negotiation-listing-thumb { width: 92px; height: 92px; }
  .negotiation-page-title { font-size: 1.25rem; }
  .negotiation-summary-card .row > .col { flex: 0 0 100%; max-width: 100%; }
  .negotiation-view-link { width: 100%; }
  .negotiation-actions-card .btn,
  .negotiation-current-card .btn,
  .negotiation-counter-card .btn { width: 100%; }
  .negotiation-timeline { padding-left: 1rem; }
}

/* Keyboard focus for the scrollable chat thread. */
.chat-thread:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Mobile: tighter chat padding and roomier bubbles on narrow screens. */
@media (max-width: 575.98px) {
  .chat-thread { max-height: 65vh; padding: 0.5rem; }
  .chat-bubble { max-width: 85%; }
}

/* ---- Advertisements (reusable, non-intrusive) ----------------------- */
.ad-sponsored-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  background: rgba(100, 116, 139, 0.1);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}
.ad-sponsored-badge i { font-size: 0.7rem; }

/* Horizontal banner (landing + marketplace) */
.ad-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.4rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(37, 99, 235, 0.14);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(255, 255, 255, 0.9));
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
.ad-banner .ad-sponsored-badge {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
}
.ad-banner-media {
  flex: 0 0 auto;
}
.ad-banner-media img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 1rem;
}
.ad-banner-icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  font-size: 1.6rem;
}
.ad-banner-body { flex: 1 1 auto; min-width: 0; padding-right: 5rem; }
.ad-banner-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.25rem; color: #0f172a; }
.ad-banner-desc { margin: 0; color: #52606d; font-size: 0.95rem; line-height: 1.5; }
.ad-banner-cta { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }

@media (max-width: 575.98px) {
  .ad-banner { flex-direction: column; align-items: flex-start; text-align: left; }
  .ad-banner-body { padding-right: 0; }
  .ad-banner-cta { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------------ *
 * Sponsored SaaS showcase (.spon-hero) — the single reusable two-column
 * promo card shared by the landing page AND the marketplace. Left: copy
 * (badge, headline, description, CTA). Right: a floating product preview.
 * Content-driven, so any advertisement reuses it by swapping title /
 * description / image / URL. Values are self-contained (concrete colours,
 * not scoped tokens) so it renders identically wherever it's placed. Text
 * lives in its own column (never behind the preview) for clean contrast.
 * ------------------------------------------------------------------ */
.spon-hero {
  position: relative;
  width: 88%;
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
  gap: 1.75rem;
  min-height: 224px;
  padding: 1.75rem clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 1.75rem;
  border: 1px solid rgba(37, 99, 235, 0.12);
  background:
    radial-gradient(120% 140% at 82% 18%, rgba(37, 99, 235, 0.1), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f7faff 45%, #eef4ff 100%);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

/* Left column — copy, vertically centered */
.spon-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 500px;
}
.spon-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  margin-bottom: 0.7rem;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
}
.spon-hero-title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.spon-hero-accent { color: #2563eb; }
.spon-hero-desc {
  margin: 0 0 1.1rem;
  max-width: 500px;
  font-size: 1rem;
  line-height: 1.55;
  color: #52606d;
}
.spon-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 1.3rem;
  background: linear-gradient(135deg, #2563eb 0%, #004ac6 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 26px -8px rgba(0, 74, 198, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.spon-hero-cta:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(0, 74, 198, 0.55);
}
.spon-hero-cta i { font-size: 0.95em; transition: transform 0.25s ease; }
.spon-hero-cta:hover i { transform: translateX(3px); }

/* Right column — floating product preview */
.spon-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.spon-hero-img {
  width: 100%;
  max-height: 185px;
  object-fit: cover;
  object-position: top center;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.35);
  transform: perspective(1200px) rotateY(-6deg) translateY(-2px);
  transition: transform 0.4s ease;
}
.spon-hero:hover .spon-hero-img {
  transform: perspective(1200px) rotateY(-3deg) translateY(-6px);
}
.spon-hero-img--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: radial-gradient(120% 140% at 80% 20%, #b4c5ff 0%, #dbe1ff 45%, #eef0ff 100%);
  color: #2563eb;
  font-size: 2.5rem;
}

/* Tablet — keep two columns, ease the preview down a size */
@media (max-width: 900px) {
  .spon-hero {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    padding: 1.4rem;
    min-height: 0;
  }
  .spon-hero-img {
    max-height: 150px;
    transform: perspective(1200px) rotateY(-4deg);
  }
}

/* Mobile — stack: headline, description, button, then preview */
@media (max-width: 640px) {
  .spon-hero {
    grid-template-columns: 1fr;
    width: 92%;
    gap: 1.1rem;
    padding: 1.3rem 1.25rem;
  }
  .spon-hero-copy { max-width: none; }
  .spon-hero-img {
    max-height: 155px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spon-hero-img,
  .spon-hero-cta,
  .spon-hero-cta i {
    transition: none;
  }
  .spon-hero:hover .spon-hero-img {
    transform: perspective(1200px) rotateY(-6deg);
  }
}

/* Compact sidebar promotion card (Stitch: soft lavender, left-aligned) */
.ad-sidebar-card {
  position: relative;
  margin: 8px 16px 4px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(0, 74, 198, 0.14);
  background: linear-gradient(160deg, #e2e7ff 0%, #dae2fd 100%);
  text-align: left;
}
.ad-sidebar-card .ad-sponsored-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.55);
}
.ad-sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 0 12px;
  border-radius: 10px;
  background: #ffffff;
  color: var(--bs-primary);
  font-size: 20px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.ad-sidebar-icon img { width: 100%; height: 100%; object-fit: cover; }
.ad-sidebar-title { font-weight: 700; font-size: 0.9rem; color: #131b2e; line-height: 1.3; }
.ad-sidebar-desc { margin: 6px 0 12px; color: #434655; font-size: 0.8rem; line-height: 1.5; }

/* Rewarded advertisement card (chat) */
.ad-rewarded-card {
  position: relative;
  text-align: center;
  padding: 1.5rem 1.25rem;
  border-radius: 1rem;
  border: 1px dashed rgba(37, 99, 235, 0.35);
  background: linear-gradient(160deg, rgba(37, 99, 235, 0.07), #ffffff);
}
.ad-rewarded-card .ad-sponsored-badge { position: absolute; top: 0.85rem; right: 0.95rem; }
.ad-rewarded-icon {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.65rem;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  font-size: 1.7rem;
}
.ad-rewarded-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin: 0 0 0.35rem; letter-spacing: -0.01em; }
.ad-rewarded-copy { color: #52606d; font-size: 0.92rem; margin: 0 0 1rem; }
.ad-rewarded-note { color: #667085; font-size: 0.85rem; }

/* Redesigned limit-reached empty state */
.ad-rewarded-illus {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0.25rem auto 1rem;
}
.ad-rewarded-illus-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.04) 70%);
}
.ad-rewarded-illus-ico {
  position: absolute; inset: 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff; font-size: 1.6rem;
  box-shadow: 0 12px 26px -8px rgba(37, 99, 235, 0.55);
}
.ad-rewarded-illus-spark {
  position: absolute;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 9px;
  background: #fff; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
  font-size: 0.85rem;
  animation: adSparkFloat 2.6s ease-in-out infinite;
}
.ad-rewarded-illus-spark--1 { top: -6px; right: -4px; color: #f59e0b; }
.ad-rewarded-illus-spark--2 { bottom: -4px; left: -6px; color: #22c55e; animation-delay: 0.9s; }
@keyframes adSparkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.ad-rewarded-reward {
  display: flex; flex-direction: column; gap: 0.15rem;
  margin: 0 auto 1rem; padding: 0.85rem 1rem; max-width: 320px;
  border-radius: 14px;
  background: #eff4ff; border: 1px solid #dbe6ff;
}
.ad-rewarded-reward-text { font-size: 0.82rem; color: #64748b; }
.ad-rewarded-reward-amount { font-size: 1.35rem; font-weight: 800; color: #2563eb; letter-spacing: -0.01em; }
.ad-rewarded-cta { padding: 0.7rem 1rem; font-weight: 700; border-radius: 12px; }

/* Trust list */
.ad-trust {
  list-style: none; margin: 0.9rem auto 0; padding: 0;
  display: inline-flex; flex-direction: column; gap: 0.4rem; text-align: left;
}
.ad-trust li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: #475569; }
.ad-trust li i { color: #22c55e; font-size: 0.95rem; }

/* ---- Admin advertisement dashboard ---------------------------------- */
.admin-page { max-width: 1320px; }

/* Page header: title / subtitle with generous breathing room, then a hairline
   divider before the content — the SaaS-dashboard rhythm. */
.admin-page-head { margin-bottom: 1.25rem; }
.admin-divider {
  margin: 0 0 1.75rem;
  border: 0;
  border-top: 1px solid rgba(16, 24, 40, 0.08);
  opacity: 1;
}

/* Shared surface card — one radius / shadow / background for every section
   (filters, bulk actions, table, empty state) so the page reads as one system. */
.admin-card {
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
.admin-card > .card-body { padding: 1.5rem 1.75rem; }

/* Section toolbar: "All Advertisements" heading + the single set of actions. */
.ad-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ad-toolbar-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}
.ad-toolbar-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---- Filters card -------------------------------------------------- */
.admin-filter-card .form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #52606d;
  margin-bottom: 0.4rem;
}
.ad-filter-form { display: flex; flex-direction: column; gap: 1.25rem; }
.ad-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.ad-filter-grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ad-search-field { position: relative; }
.ad-search-field i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.ad-search-field .form-control {
  height: 3rem;
  border-radius: 999px;
  padding-left: 2.6rem;
}
.ad-filter-grid .form-select,
.ad-filter-grid .form-control {
  height: 3rem;
  border-radius: 0.75rem;
}
.ad-filter-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

@media (max-width: 767.98px) {
  .ad-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-filter-grid--trio { grid-template-columns: 1fr; }
}

/* ---- Bulk action bar (sticky, revealed on selection) --------------- */
.ad-bulk-region { position: relative; }
.ad-bulkbar {
  position: sticky;
  top: calc(var(--sb-topbar-h, 60px) + 12px);
  z-index: 20;
  margin-bottom: 1rem;
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: linear-gradient(0deg, #ffffff, #f4f8ff);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}
.ad-bulkbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  padding: 0.85rem 1.35rem;
}
.ad-bulkbar-count {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #1d4ed8;
  white-space: nowrap;
}
.ad-bulkbar-count i { color: #2563eb; font-size: 1.05rem; }
.ad-bulkbar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.ad-bulkbar-controls .form-select,
.ad-bulkbar-controls .form-control {
  height: 2.6rem;
  border-radius: 0.65rem;
  width: auto;
  min-width: 11rem;
}
.ad-bulkbar-controls .btn { white-space: nowrap; }
.ad-bulkbar-clear {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: #64748b;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ad-bulkbar-clear:hover { background: #eef2f7; color: #0f172a; }
.ad-bulkbar-clear i { font-size: 0.8rem; }

/* Selected-row emphasis: light blue wash + blue left accent + blue checkbox. */
.admin-table tbody tr.is-selected > td { background: #eff5ff; }
.admin-table tbody tr.is-selected > td:first-child { box-shadow: inset 3px 0 0 #2563eb; }
.admin-table .form-check-input:checked { background-color: #2563eb; border-color: #2563eb; }
.admin-table .form-check-input:focus {
  border-color: #93b4f5;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .ad-bulkbar-clear { transition: none; }
}

/* Status badges: green / blue / orange / gray */
.ad-status-badge {
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 0.7rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
}
.ad-status-active { background: #dcfce7; color: #166534; }
.ad-status-scheduled { background: #dbeafe; color: #1d4ed8; }
.ad-status-expired { background: #ffedd5; color: #c2410c; }
.ad-status-disabled { background: #f1f5f9; color: #475569; }

/* Type / placement pill tags — consistent, polished, one style with colour
   variants keyed off the enum value. */
.ad-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.ad-tag--banner { background: #eef2ff; color: #4338ca; }
.ad-tag--rewarded { background: #fef3c7; color: #b45309; }
.ad-tag--landing { background: #f3e8ff; color: #7e22ce; }
.ad-tag--marketplace { background: #d1fae5; color: #047857; }
.ad-tag--chat { background: #dbeafe; color: #1d4ed8; }
.ad-tag--sidebar { background: #f1f5f9; color: #475569; }
.ad-tag--on { background: #dcfce7; color: #166534; }
.ad-tag--off { background: #f1f5f9; color: #64748b; }

/* Table thumbnails */
.admin-thumb {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-size: 1.3rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-thumb-lg { width: 72px; height: 72px; }

/* Breathable table rows */
.admin-table { --bs-table-hover-bg: #f8fbff; }
.admin-table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #667085;
  white-space: nowrap;
  padding: 1rem 1.1rem;
  background: #f8fafc;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}
.admin-table tbody td { vertical-align: middle; padding: 1rem 1.1rem; }
.admin-table tbody tr + tr td { border-top: 1px solid rgba(16, 24, 40, 0.05); }

/* Title cell hierarchy: name / descriptor / url */
.admin-title-cell { max-width: 240px; }
.ad-title-name {
  display: block;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
  line-height: 1.3;
}
.ad-title-name:hover { color: #2563eb; }
.ad-title-sub { font-size: 0.78rem; color: #64748b; margin-top: 0.1rem; }
.ad-title-url {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.15rem;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row actions — clean icon button with hover elevation */
.ad-action-btn {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  background: transparent;
  color: #52606d;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.ad-action-btn:hover,
.ad-action-btn[aria-expanded="true"] {
  background: #f1f5f9;
  color: #2563eb;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* Empty state as a full card */
.ad-empty {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 3.5rem 2rem;
}
.ad-empty .empty-state-icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 1.25rem;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-size: 2.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .ad-action-btn { transition: none; }
}

/* ==================================================================== *
 * Advertisement dashboard — analytics console (KPIs, charts, drawer)
 * ==================================================================== */
/* KPI cards */
.ad-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ad-kpi {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ad-kpi:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1); }
.ad-kpi-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 13px; font-size: 1.3rem;
}
.ad-kpi--blue .ad-kpi-ico { background: #eff4ff; color: #2563eb; }
.ad-kpi--green .ad-kpi-ico { background: #ecfdf3; color: #16a34a; }
.ad-kpi--violet .ad-kpi-ico { background: #f3e8ff; color: #7e22ce; }
.ad-kpi--amber .ad-kpi-ico { background: #fffaeb; color: #b45309; }
.ad-kpi-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; line-height: 1.1; }
.ad-kpi-label { font-size: 0.78rem; font-weight: 600; color: #64748b; margin-top: 0.15rem; }

/* Charts */
.ad-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ad-chart-card { padding: 1.25rem 1.35rem; }
.ad-chart-card--wide:nth-of-type(3) { grid-column: 1 / -1; }
.ad-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; }
.ad-chart-head h3 { margin: 0; font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; color: #0f172a; }
.ad-chart-head span { font-size: 0.78rem; color: #94a3b8; white-space: nowrap; }
/* Ad-dashboard skeleton/fade modifier layered on .chart-container (which supplies
   position + height). Only adds the loading shimmer + fade-in; height comes from
   the shared container via --chart-h. */
.ad-chart-box { --chart-h: 300px; opacity: 0; transition: opacity 0.4s ease; }
.ad-chart-box.is-ready { opacity: 1; }
.ad-chart-box--short { --chart-h: 220px; }
/* Skeleton shimmer while Chart.js draws / JS boots. */
.ad-chart-box::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(100deg, #f1f5f9 30%, #e9eef5 50%, #f1f5f9 70%);
  background-size: 200% 100%; animation: adShimmer 1.3s infinite;
}
.ad-chart-box.is-ready::before { display: none; }
@keyframes adShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Placement summary cards */
.ad-placements {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ad-place {
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-left: 3px solid #94a3b8;
  border-radius: 0.9rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ad-place:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08); }
.ad-place--landing { border-left-color: #7e22ce; }
.ad-place--marketplace { border-left-color: #16a34a; }
.ad-place--chat { border-left-color: #2563eb; }
.ad-place--sidebar { border-left-color: #64748b; }
.ad-place--rewarded { border-left-color: #f59e0b; }
.ad-place-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.ad-place-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f1f5f9; color: #475569; font-size: 0.9rem; }
.ad-place--rewarded .ad-place-ico { background: #fffaeb; color: #b45309; }
.ad-place-name { font-weight: 700; font-size: 0.9rem; color: #0f172a; flex: 1 1 auto; }
.ad-place-count { padding: 1px 9px; border-radius: 999px; background: #eef4ff; color: #2563eb; font-size: 0.72rem; font-weight: 800; }
.ad-place-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.ad-place-stats > div { display: flex; flex-direction: column; }
.ad-place-stats strong { font-size: 0.95rem; font-weight: 800; color: #0f172a; }
.ad-place-stats span { font-size: 0.68rem; color: #94a3b8; }

/* Larger table preview thumbnail (64px) */
.admin-thumb--lg { width: 64px; height: 64px; font-size: 1.5rem; }

/* Priority badge */
.ad-prio { display: inline-flex; align-items: center; padding: 0.28rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.ad-prio--high { background: #fef2f2; color: #b91c1c; }
.ad-prio--med { background: #fffaeb; color: #b45309; }
.ad-prio--low { background: #f1f5f9; color: #64748b; }

/* CTR cell: mini progress bar + value */
.ad-ctr { display: flex; align-items: center; gap: 0.5rem; min-width: 110px; }
.ad-ctr-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.ad-ctr-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2563eb, #1d4ed8); transition: width 0.6s ease; }
.ad-ctr-val { font-size: 0.8rem; font-weight: 700; color: #0f172a; white-space: nowrap; }

/* Campaign title trigger (opens the drawer) */
button.ad-title-name { border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; }

/* ---- Details drawer ------------------------------------------------- */
body.ad-drawer-lock { overflow: hidden; }
.ad-drawer { position: fixed; inset: 0; z-index: 1090; visibility: hidden; }
.ad-drawer.is-open { visibility: visible; }
.ad-drawer-scrim {
  position: absolute; inset: 0; background: rgba(15, 23, 42, 0.4);
  opacity: 0; transition: opacity 0.28s ease;
}
.ad-drawer.is-open .ad-drawer-scrim { opacity: 1; }
.ad-drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(440px, 92vw);
  display: flex; flex-direction: column;
  background: #f8fafc;
  box-shadow: -30px 0 70px -20px rgba(15, 23, 42, 0.4);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}
.ad-drawer.is-open .ad-drawer-panel { transform: translateX(0); }
.ad-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.35rem; background: #fff; border-bottom: 1px solid rgba(16, 24, 40, 0.06); }
.ad-drawer-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; }
.ad-drawer-x { border: 0; background: transparent; color: #64748b; font-size: 1.05rem; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; transition: background-color 0.15s ease; }
.ad-drawer-x:hover { background: #f1f5f9; color: #0f172a; }
.ad-drawer-banner { height: 150px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #1e3a8a, #2563eb 60%, #3b82f6); color: rgba(255, 255, 255, 0.92); font-size: 2.5rem; }
.ad-drawer-banner img { width: 100%; height: 100%; object-fit: cover; }
.ad-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 1.35rem; }
.ad-drawer-title { margin: 0 0 0.35rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: #0f172a; }
.ad-drawer-desc { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.55; color: #475569; }
.ad-drawer-desc.is-muted { color: #94a3b8; font-style: italic; }
.ad-drawer-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.15rem; }
.ad-drawer-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
.ad-drawer-metric { padding: 0.85rem; text-align: center; background: #fff; border: 1px solid rgba(16, 24, 40, 0.06); border-radius: 0.85rem; }
.ad-drawer-metric span { display: block; font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.ad-drawer-metric small { font-size: 0.7rem; color: #94a3b8; }
.ad-drawer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; margin: 0; }
.ad-drawer-meta > div { min-width: 0; }
.ad-drawer-meta-full { grid-column: 1 / -1; }
.ad-drawer-meta dt { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 0.15rem; }
.ad-drawer-meta dd { margin: 0; font-size: 0.9rem; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }
.ad-drawer-meta dd a { color: #2563eb; text-decoration: none; }
.ad-drawer-meta dd a:hover { text-decoration: underline; }
.ad-drawer-meta dd a.is-muted { color: #94a3b8; pointer-events: none; }
.ad-drawer-actions { display: flex; gap: 0.6rem; padding: 1.1rem 1.35rem; background: #fff; border-top: 1px solid rgba(16, 24, 40, 0.06); }
.ad-drawer-actions .btn { flex: 1 1 auto; }

/* Responsive */
@media (max-width: 1199.98px) {
  .ad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-charts { grid-template-columns: 1fr; }
  .ad-chart-card--wide:nth-of-type(3) { grid-column: auto; }
  .ad-placements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .ad-kpis { grid-template-columns: 1fr; }
  .ad-placements { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-kpi, .ad-place, .ad-drawer-panel, .ad-drawer-scrim, .ad-ctr-bar span, .ad-chart-box { transition: none; }
  .ad-chart-box::before { animation: none; }
}

/* ==================================================================== *
 * Advertisement dashboard — premium refinement pass
 * ==================================================================== */
/* Hero header */
.ad-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  padding: 1.75rem 1.9rem;
  margin-bottom: 1.75rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(37, 99, 235, 0.1);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(37, 99, 235, 0.1), transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
.ad-hero-left { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.ad-hero-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 60px; height: 60px; border-radius: 18px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; font-size: 1.7rem;
  box-shadow: 0 14px 30px -8px rgba(37, 99, 235, 0.55);
}
.ad-hero-title { margin: 0 0 0.2rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; }
.ad-hero-sub { margin: 0; max-width: 52ch; font-size: 0.92rem; line-height: 1.5; color: #64748b; }
.ad-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ad-hero-btn { height: 44px; display: inline-flex; align-items: center; border-radius: 12px; font-weight: 700; }
.ad-soon { margin-left: 0.35rem; font-size: 0.68rem; font-weight: 700; color: #cbd5e1; }

/* KPI refinements: top accent, circular icon, trend row */
.ad-kpi { position: relative; overflow: hidden; align-items: flex-start; }
.ad-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.ad-kpi--blue::before { background: #2563eb; }
.ad-kpi--green::before { background: #22c55e; }
.ad-kpi--violet::before { background: #8b5cf6; }
.ad-kpi--amber::before { background: #f59e0b; }
.ad-kpi-ico { border-radius: 50%; margin-top: 2px; }
.ad-kpi-trend { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.35rem; font-size: 0.72rem; font-weight: 600; color: #94a3b8; }

/* Chart period selector + empty placeholder */
.ad-period {
  height: 32px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
  color: #475569; font-size: 0.78rem; font-weight: 600; padding: 0 0.5rem; cursor: pointer;
}
.ad-chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; height: 220px; color: #cbd5e1; }
.ad-chart-empty i { font-size: 2.2rem; }
.ad-chart-empty p { margin: 0; font-size: 0.85rem; font-weight: 600; color: #94a3b8; }

/* Table: taller rows + inline metrics under the campaign title */
.admin-table tbody td { padding-top: 1.15rem; padding-bottom: 1.15rem; }
.ad-title-metrics { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.35rem; font-size: 0.76rem; color: #64748b; }
.ad-title-metrics span { display: inline-flex; align-items: center; gap: 0.25rem; }
.ad-title-metrics i { color: #94a3b8; }

/* Banner hover preview (single shared floating card) */
.admin-thumb--lg[data-thumb-preview] { cursor: zoom-in; }
.ad-thumb-pop {
  position: fixed; z-index: 1200; width: 240px; transform: translateY(-50%) scale(0.96);
  padding: 6px; border-radius: 14px; background: #fff;
  box-shadow: 0 24px 60px -14px rgba(15, 23, 42, 0.4); border: 1px solid rgba(16, 24, 40, 0.08);
  opacity: 0; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease;
}
.ad-thumb-pop.is-show { opacity: 1; transform: translateY(-50%) scale(1); }
.ad-thumb-pop img { width: 100%; height: 150px; object-fit: cover; border-radius: 9px; display: block; }
.ad-thumb-pop-ico { display: grid; place-items: center; height: 150px; border-radius: 9px; background: #eff4ff; color: #2563eb; font-size: 3rem; }

/* Clickable media thumbnail (image enlarge / video player) */
.ad-thumb-btn { position: relative; border: 0; padding: 0; cursor: zoom-in; }
.ad-thumb-btn[disabled] { cursor: default; }
.ad-thumb-btn--video { cursor: pointer; }
.ad-thumb-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(11, 18, 32, 0.35); color: #fff; font-size: 1.35rem;
  opacity: 0.92; transition: background 0.15s ease;
}
.ad-thumb-btn--video:hover .ad-thumb-play { background: rgba(11, 18, 32, 0.5); }
.ad-thumb-dur {
  position: absolute; right: 3px; bottom: 3px; z-index: 1;
  padding: 0 5px; border-radius: 6px; background: rgba(11, 18, 32, 0.82);
  color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 1.4;
}

/* Image/Video badge in the Type column */
.ad-media-badge {
  display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.3rem;
  padding: 1px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700;
}
.ad-media-badge--image { background: #eff4ff; color: #2563eb; }
.ad-media-badge--video { background: #fef3f2; color: #b42318; }

/* Rewarded metric chips in the title cell */
.ad-rw-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0 7px; border-radius: 999px; background: #ecfdf3; color: #15803d;
  font-size: 0.68rem; font-weight: 700;
}
.ad-rw-chip--warn { background: #fef3f2; color: #b42318; }

/* Media preview modal */
.ad-media-frame {
  display: grid; place-items: center; background: #0b1220;
  min-height: 240px; max-height: 70vh; overflow: hidden;
}
.ad-media-img { max-width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.ad-media-video { width: 100%; max-height: 70vh; background: #0b1220; display: block; }

/* Advertisement form drag-and-drop uploader (reuses .uploader-dropzone) */
.ad-dropzone { padding: 1.4rem 1rem; }
.ad-uploader-file { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.55rem; max-width: 100%; }
.ad-uploader-file .text-truncate { max-width: 260px; }

/* Short muted video preview inside the hover popover */
.ad-thumb-pop-vid { width: 100%; height: 150px; object-fit: cover; border-radius: 9px; display: block; background: #0b1220; }

/* Thumbnail fade-in (Phase 6 polish) */
@keyframes adThumbFade { from { opacity: 0; } to { opacity: 1; } }
.admin-thumb img { animation: adThumbFade 0.35s ease both; }

/* Subtle content entrance for cards on load — CSS-only (no JS dependency, so it
   never risks hiding content); charts keep their real async shimmer skeleton. */
@keyframes adRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ad-kpi, .admin-metric-card, .ad-place { animation: adRise 0.4s ease both; }

/* Consistent, visible keyboard focus across advertisement controls (Phase 3) */
.ad-thumb-btn:focus-visible,
.ad-title-name:focus-visible,
.ad-action-btn:focus-visible,
.ad-hero-btn:focus-visible,
.ad-bulkbar-clear:focus-visible,
.ad-period:focus-visible,
.ad-drawer-x:focus-visible,
.ad-kpi:focus-visible,
.ad-place:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Respect reduced motion for the polish-pass animations */
@media (prefers-reduced-motion: reduce) {
  .admin-thumb img,
  .ad-kpi, .admin-metric-card, .ad-place { animation: none; }
  .ad-chart-box::before { animation: none; }
  .ad-thumb-play, .ad-thumb-btn img { transition: none; }
}

/* Status badge dots */
.ad-status-badge { display: inline-flex; align-items: center; gap: 0.4rem; }
.ad-status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Rewarded chip: blue emphasis + larger padding (gift icon added in markup) */
.ad-tag--rewarded { background: #dbeafe; color: #1d4ed8; padding: 0.34rem 0.75rem; }

/* Drawer refinements + lifecycle timeline */
.ad-drawer-banner { height: 180px; }
.ad-drawer-subhead { margin: 1.4rem 0 0.85rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.ad-timeline { list-style: none; margin: 0; padding: 0; }
.ad-timeline li { position: relative; display: flex; gap: 0.85rem; padding: 0 0 1.1rem; }
.ad-timeline li:last-child { padding-bottom: 0; }
.ad-timeline-dot { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: #e2e8f0; box-shadow: 0 0 0 3px #f8fafc; z-index: 1; }
.ad-timeline li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 2px; background: #e2e8f0; }
.ad-timeline li:last-child::before { display: none; }
.ad-timeline li.is-done .ad-timeline-dot,
.ad-timeline li.is-done::before { background: #22c55e; }
.ad-timeline li.is-current .ad-timeline-dot { background: #2563eb; box-shadow: 0 0 0 3px #f8fafc, 0 0 0 6px rgba(37, 99, 235, 0.2); }
.ad-timeline strong { display: block; font-size: 0.85rem; font-weight: 700; color: #64748b; }
.ad-timeline li.is-current strong { color: #0f172a; }
.ad-timeline small { font-size: 0.75rem; color: #94a3b8; }

/* Button micro-interactions (scoped to admin) */
.admin-page .btn { transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.admin-page .btn:active { transform: translateY(1px); }

/* ======== Report detail: professional moderation console ======== */
.report-detail-page .card { border-radius: 16px; }
.report-assignee { font-size: 0.85rem; color: #475569; margin-bottom: 0.25rem; }

/* ---- Report summary (understand the report at a glance) ---- */
.report-summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem 1.25rem;
}
.report-stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.report-stat-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; }
.report-stat-value { font-size: 0.9rem; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; }
.report-stat-value a { text-decoration: none; }
.report-stat-num { font-size: 1.15rem; font-weight: 800; color: #2563eb; }
.report-description {
  background: #f8fafc; border: 1px solid #e6ecf5; border-radius: 0.7rem;
  padding: 0.65rem 0.85rem; font-size: 0.9rem; color: #334155;
}

/* ---- Conversation subheader (counts + parties) ---- */
.convo-subhead { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.8rem; color: #64748b; }
.convo-subhead i { color: #94a3b8; margin-right: 0.15rem; }

/* ---- Conversation panel — read-only, styled like the real chat ---- */
.admin-convo-scroll { max-height: 62vh; overflow-y: auto; padding: 1rem 1.1rem; scroll-behavior: smooth; background: #fcfdff; }
.admin-convo-scroll:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.admin-convo-group + .admin-convo-group { border-top: 1px dashed #e2e8f0; margin-top: 0.85rem; padding-top: 0.85rem; }
.admin-convo-group-head {
  position: sticky; top: -1rem; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.35rem;
  align-items: center; justify-content: space-between;
  background: #eef4ff; border: 1px solid #dbe6fb; border-radius: 0.6rem;
  padding: 0.4rem 0.75rem; margin-bottom: 0.85rem; font-size: 0.8rem; font-weight: 600; color: #0f172a;
}
/* Offer / counter-offer chips — clearly distinct from chat bubbles. */
.admin-offer-chip {
  max-width: 82%; border-radius: 1rem; padding: 0.6rem 0.85rem;
  border: 1px solid #dbe6fb; border-left: 4px solid #2563eb; background: #f0f6ff;
}
.admin-offer-chip.is-counter { border-color: #fde68a; border-left-color: #d97706; background: #fffbeb; }
.admin-offer-chip-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.admin-offer-chip-kind { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: #2563eb; }
.admin-offer-chip.is-counter .admin-offer-chip-kind { color: #b45309; }
.admin-offer-chip-amount { font-size: 1.2rem; font-weight: 800; color: #0f172a; margin-top: 0.1rem; }
.admin-offer-chip-note { font-size: 0.82rem; color: #475569; font-style: italic; margin-top: 0.15rem; }
.admin-offer-chip .chat-time { opacity: 1; color: #94a3b8; }

/* ---- Sticky moderation action center ---- */
.report-actions-sticky { position: sticky; top: 1rem; }
.report-action-group-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; margin: 0 0 0.5rem; }
.report-action-form { margin: 0; }
.report-action-hint { font-size: 0.72rem; color: #94a3b8; margin: 0.2rem 0 0; }
.report-resolve-form { border-top: 1px solid #eef2f7; margin-top: 0.35rem; padding-top: 0.35rem; }

/* Notification delivery panel */
.report-delivery { background: #f8fafc; border: 1px solid #e6ecf5; border-radius: 0.7rem; padding: 0.75rem 0.85rem; }
.report-delivery-list { list-style: none; margin: 0; padding: 0; }
.report-delivery-list li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; padding: 0.15rem 0; }
.report-delivery-list li.is-ok { color: #15803d; }
.report-delivery-list li.is-off { color: #64748b; }
.report-delivery-reason { margin: 0.3rem 0 0; font-size: 0.76rem; color: #94a3b8; }
.report-delivery-time { margin: 0.35rem 0 0; font-size: 0.72rem; color: #94a3b8; }

/* ---- Seller moderation history ---- */
.seller-history-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 0.6rem; }
.seller-history-stat {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  background: #f8fafc; border: 1px solid #e6ecf5; border-radius: 0.7rem; padding: 0.6rem 0.4rem;
}
.seller-history-num { font-size: 1.25rem; font-weight: 800; color: #0f172a; line-height: 1; }
.seller-history-lbl { font-size: 0.68rem; color: #64748b; text-align: center; }

/* ---- Timeline / audit (compact, consistent icons, light timestamps) ---- */
.report-timeline { list-style: none; margin: 0; padding: 0.25rem 0 0; position: relative; }
.report-timeline-item { display: flex; gap: 0.7rem; padding-bottom: 0.9rem; position: relative; }
.report-timeline-item:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: #e6ecf5;
}
.report-timeline-ico {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: #eef4ff; color: #2563eb; font-size: 0.8rem; z-index: 1;
}
.report-timeline-text { font-size: 0.85rem; font-weight: 600; color: #1e293b; }
.report-timeline-time { font-size: 0.72rem; color: #94a3b8; font-weight: 400; }

/* ---- Empty states ---- */
.report-empty { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; color: #64748b; }
.report-empty.text-start { flex-direction: row; align-items: center; text-align: left; gap: 0.6rem; }
.report-empty i { font-size: 1.4rem; color: #cbd5e1; }
.report-empty p { font-size: 0.86rem; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .report-actions-sticky { position: static; }
}
@media (max-width: 575.98px) {
  .chat-bubble, .admin-offer-chip { max-width: 100%; }
  .report-action-form .btn, .report-actions-sticky .btn { width: 100%; }
}

/* Mobile: full-screen drawer + compact hero */
@media (max-width: 575.98px) {
  .ad-drawer-panel { width: 100vw; }
  .ad-hero { padding: 1.35rem; }
  .ad-hero-title { font-size: 1.4rem; }
  .ad-hero-actions { width: 100%; }
  .ad-hero-actions .dropdown, .ad-hero-actions > .btn { flex: 1 1 auto; }
  .ad-hero-actions .dropdown .btn, .ad-hero-actions > .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-thumb-pop, .admin-page .btn { transition: none; }
  .admin-page .btn:active { transform: none; }
}

/* Metric cards */
.admin-metric-card { border-radius: 1rem; }
.admin-metric-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.admin-metric-value { font-size: 1.9rem; font-weight: 700; color: #0f172a; line-height: 1.1; }
.admin-metric-label { color: #667085; font-size: 0.85rem; }


/* Live preview (create/edit) — full-width, placement-aware */
.live-preview-mb { margin-bottom: 1.5rem; }
.live-preview-shell { border-radius: 1rem; }
.live-pane { padding: 1.25rem; }

/* Marketplace mock: skeleton listing cards surrounding the banner */
.preview-mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.preview-skel-card {
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 0.9rem;
  padding: 0.75rem;
}
.preview-skel-thumb {
  height: 90px;
  border-radius: 0.6rem;
  background: #e9edf2;
  margin-bottom: 0.65rem;
}
.preview-skel-line {
  height: 0.6rem;
  border-radius: 999px;
  background: #e9edf2;
  margin-bottom: 0.4rem;
}
.preview-skel-line.short { width: 60%; }
.preview-mp-banner { margin: 1.25rem 0; }
/* WYSIWYG placement previews: each ad partial is rendered inside a container
   that reproduces its real page context so it appears at natural size. */
.wysiwyg-block { margin-bottom: 2.25rem; }
.wysiwyg-block:last-child { margin-bottom: 0; }
.wysiwyg-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #667085;
  margin-bottom: 0.65rem;
}
.wysiwyg-stage {
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 1rem;
  overflow: hidden;
}
/* Previews are illustrative — nothing inside is clickable. */
.wysiwyg-stage a,
.wysiwyg-stage button { pointer-events: none; }

/* Landing: reproduce the landing surface + container width. */
.wysiwyg-stage-landing {
  padding: 3rem 1.5rem;
  background:
    radial-gradient(circle at 18% 20%, rgba(37, 99, 235, 0.06), transparent 26%),
    #f8fbff;
}
.wysiwyg-landing-container { width: min(1180px, 100%); margin: 0 auto; }

/* Marketplace: app surface; banner spans the full catalog content width. */
.wysiwyg-stage-marketplace { padding: 2rem 1.5rem; background: var(--sb-bg); }

/* Sidebar + chat sit on the neutral page backdrop, left-aligned like the app. */
.wysiwyg-stage-rail { padding: 1.75rem; background: #eef1f5; }
.wysiwyg-sidebar-rail {
  width: var(--sb-sidebar-w);
  max-width: 100%;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 0.9rem;
}
/* The real sidebar card carries a top margin (it follows the nav); drop it so
   the isolated preview isn't gapped at the top of the rail. */
.wysiwyg-sidebar-rail .ad-sidebar-card { margin-top: 0; }
.wysiwyg-chat-panel { width: 100%; border-radius: 1rem; overflow: hidden; }

.upload-spinner { display: none; }
.upload-spinner:not(.d-none) { display: inline-flex; }

/* ---- Misc ------------------------------------------------------------ */
.page-link { border-radius: 0.5rem; margin: 0 2px; }
/* ---- Flash notifications (global) ----------------------------------- */
.flash-stack {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.flash-stack .alert {
  /* success palette by default; variants override the custom props below. */
  --flash-accent: #12b76a;
  --flash-bg: #ecfdf3;
  --flash-border: #a6f4c5;
  --flash-text: #05603a;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--flash-border);
  background: var(--flash-bg);
  color: var(--flash-text);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  animation: flashIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.flash-stack .alert-success { --flash-accent: #12b76a; --flash-bg: #ecfdf3; --flash-border: #a6f4c5; --flash-text: #05603a; }
.flash-stack .alert-danger  { --flash-accent: #f04438; --flash-bg: #fef3f2; --flash-border: #fecdca; --flash-text: #b42318; }
.flash-stack .alert-warning { --flash-accent: #f79009; --flash-bg: #fffaeb; --flash-border: #fedf89; --flash-text: #b54708; }
.flash-stack .alert-info    { --flash-accent: #2e90fa; --flash-bg: #eff8ff; --flash-border: #b2ddff; --flash-text: #175cd3; }
.flash-icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-right: 0.65rem;
  color: var(--flash-accent);
  font-size: 1.2rem;
  line-height: 1;
}
.flash-body { font-weight: 600; line-height: 1.4; }
.flash-stack .alert .btn-close {
  position: static; /* override Bootstrap's absolute so ms-auto flex-aligns it */
  flex: 0 0 auto;
  padding: 0.55rem;
  margin-left: 0.75rem;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.flash-stack .alert .btn-close:hover { opacity: 1; }

/* Smooth fade + slide for both auto-dismiss and the manual close button:
   Bootstrap toggles `.show`; these rules animate opacity and translate. */
.flash-stack .alert.fade { transition: opacity 0.35s ease, transform 0.35s ease; }
.flash-stack .alert.fade:not(.show) { opacity: 0; transform: translateY(-10px); }

@keyframes flashIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .flash-stack .alert { animation: none; }
  .flash-stack .alert.fade { transition: opacity 0.2s ease; }
  .flash-stack .alert.fade:not(.show) { transform: none; }
}

/* =====================================================================
   Marketplace — "Apex Modernist" (Stitch design spec)
   Scoped to .marketplace-catalog so other pages keep their existing look.
   Design tokens mirror design_reference/marketplace/image 3.markdown.
   ===================================================================== */
.marketplace-catalog {
  /* Palette */
  --mk-surface: #faf8ff;
  --mk-surface-lowest: #ffffff;
  --mk-surface-low: #f2f3ff;
  --mk-surface-container: #eaedff;
  --mk-surface-high: #e2e7ff;
  --mk-surface-highest: #dae2fd;
  --mk-on-surface: #131b2e;
  --mk-on-surface-variant: #434655;
  --mk-outline: #737686;
  --mk-outline-variant: #c3c6d7;
  --mk-primary: #004ac6;
  --mk-primary-container: #2563eb;
  --mk-on-primary: #ffffff;
  --mk-success-bg: #f0fdf4;
  --mk-success-border: #bbf7d0;
  --mk-success-icon: #22c55e;
  --mk-success-text: #166534;
  --mk-error: #ba1a1a;

  /* Radii (8px system) */
  --mk-r-md: 0.75rem;   /* inputs / small cards: 12px */
  --mk-r-lg: 1rem;      /* standard containers: 16px */
  --mk-r-card: 1.25rem; /* product cards: 20px */
  --mk-r-panel: 1.5rem; /* filter panel: 24px */
  --mk-r-hero: 2rem;    /* hero ad: 32px */
  --mk-r-full: 9999px;

  /* Spacing */
  --mk-gutter: 24px;

  /* Elevation */
  --mk-shadow-1: 0 4px 20px rgba(15, 23, 42, 0.05);
  --mk-shadow-card-hover: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --mk-shadow-btn-lift: 0 10px 25px -5px rgba(0, 74, 198, 0.3);

  color: var(--mk-on-surface);
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1700px;
  margin-inline: auto;
}

/* Shared lift interaction for actionable elements (buttons). */
.marketplace-catalog .mk-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.marketplace-catalog .mk-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--mk-shadow-btn-lift);
}
.marketplace-catalog .mk-lift:active { transform: scale(0.98); }

/* ---- Welcome banner (success alert) --------------------------------- */
.mk-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--mk-success-bg);
  border: 1px solid var(--mk-success-border);
  border-radius: var(--mk-r-card);
  padding: 16px;
  box-shadow: var(--mk-shadow-1);
  transition: opacity 0.3s ease;
}
.mk-welcome-content { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mk-welcome-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--mk-r-full);
  background: var(--mk-success-icon);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.mk-welcome-text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--mk-success-text);
}
.mk-welcome-close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #16a34a;
  width: 32px;
  height: 32px;
  border-radius: var(--mk-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.mk-welcome-close:hover { background: #dcfce7; }

/* ---- Sponsored hero ad ---------------------------------------------- */
.mk-hero-ad {
  /* Self-contained palette so this shared component renders identically outside
     the .marketplace-catalog scope (e.g. on the landing page). */
  --mk-primary: #004ac6;
  --mk-on-surface: #131b2e;
  --mk-on-surface-variant: #434655;
  --mk-outline-variant: #c3c6d7;
  --mk-shadow-btn-lift: 0 10px 25px -5px rgba(0, 74, 198, 0.3);
  --mk-r-hero: 2rem;
  --mk-r-full: 9999px;
  position: relative;
  width: 100%;
  min-height: 188px;
  border-radius: var(--mk-r-hero);
  overflow: hidden;
  border: 1px solid var(--mk-outline-variant);
  box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.22);
  isolation: isolate;
}
.mk-hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease;
  z-index: -2;
}
.mk-hero-ad:hover .mk-hero-media { transform: scale(1.05); }
.mk-hero-ad::after { /* readability wash: strong on the left, clear on the right */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(250, 248, 255, 0.94) 0%, rgba(250, 248, 255, 0.55) 40%, rgba(250, 248, 255, 0) 75%);
  z-index: -1;
}
.mk-hero-ad.mk-hero-plain .mk-hero-media {
  background: radial-gradient(120% 140% at 85% 20%, #b4c5ff 0%, #dbe1ff 45%, #eef0ff 100%);
}
.mk-hero-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 30px 56px;
  max-width: 42rem;
}
.mk-hero-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 12px;
  background: rgba(0, 74, 198, 0.1);
  color: var(--mk-primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-radius: var(--mk-r-full);
  margin-bottom: 12px;
}
.mk-hero-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mk-on-surface);
  margin: 0 0 10px;
}
.mk-hero-title .mk-accent { color: var(--mk-primary); }
.mk-hero-desc {
  font-size: 18px;
  line-height: 28px;
  color: var(--mk-on-surface-variant);
  max-width: 28rem;
  margin: 0 0 18px;
}
.mk-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 14px 32px;
  background: var(--mk-primary);
  color: #fff;
  font-weight: 700;
  border-radius: var(--mk-r-full);
  text-decoration: none;
  border: 0;
}
.mk-hero-cta:hover { color: #fff; }
/* CTA lift interaction — mirrors .marketplace-catalog .mk-lift so the hero button
   behaves identically wherever the shared component is used (landing + browse). */
.mk-hero-ad .mk-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.mk-hero-ad .mk-lift:hover { transform: translateY(-2px); box-shadow: var(--mk-shadow-btn-lift); }
.mk-hero-ad .mk-lift:active { transform: scale(0.98); }

/* ---- Marketplace heading -------------------------------------------- */
.mk-heading-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: -0.02em;
  color: var(--mk-on-surface);
  margin: 0;
}
.mk-heading-sub {
  font-size: 16px;
  line-height: 24px;
  color: var(--mk-on-surface-variant);
  max-width: 42rem;
  margin: 8px 0 0;
}

/* ---- Filter panel (glassmorphic) ------------------------------------ */
.mk-filter-panel {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--mk-outline-variant);
  border-radius: var(--mk-r-panel);
  padding: 24px;
  box-shadow: var(--mk-shadow-1);
}
.mk-filter-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--mk-gutter);
}
.mk-field { display: flex; flex-direction: column; gap: 8px; }
.mk-col-5 { grid-column: span 5; }
.mk-col-3 { grid-column: span 3; }
.mk-col-2 { grid-column: span 2; }
.mk-col-6 { grid-column: span 6; }
.mk-field-actions { justify-content: flex-end; align-items: flex-end; flex-direction: row; gap: 12px; }

/* ---- Smart Search Phase 1 additions (compact, chip-based) ---- */
/* Trusted-only checkbox field */
.mk-field-check { justify-content: flex-end; }
.mk-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: #475569; cursor: pointer; padding-bottom: 8px; }
.mk-check input { width: 1rem; height: 1rem; accent-color: #2563eb; }

/* Search suggestions dropdown */
.mk-input-search { position: relative; }
.mk-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.6rem;
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.35); overflow: hidden; padding: 4px;
}
.mk-suggestion {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
  padding: 0.5rem 0.65rem; border: 0; background: transparent; border-radius: 0.45rem;
  font-size: 0.88rem; color: #1e293b; cursor: pointer;
}
.mk-suggestion::before { content: "\F52A"; font-family: "bootstrap-icons"; color: #94a3b8; font-size: 0.85rem; }
.mk-suggestion:hover, .mk-suggestion:focus { background: #f1f5f9; }

/* Active filter chips (above results) */
.mk-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.25rem 0 1rem; }
.mk-chip-active {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.35rem 0.25rem 0.7rem; border-radius: 999px;
  background: #eff6ff; border: 1px solid #dbe6fb; color: #1d4ed8;
  font-size: 0.8rem; font-weight: 600; text-decoration: none;
}
.mk-chip-active:hover { background: #dbe6fb; color: #1d4ed8; }
.mk-chip-x { display: inline-flex; width: 1.05rem; height: 1.05rem; align-items: center; justify-content: center; border-radius: 50%; background: rgba(37, 99, 235, 0.15); font-size: 0.7rem; }
.mk-chip-clear { font-size: 0.8rem; font-weight: 600; color: #64748b; text-decoration: none; padding: 0.25rem 0.5rem; }
.mk-chip-clear:hover { color: #dc2626; }

/* Filtered empty state */
.mk-empty-search { max-width: 460px; margin: 0 auto; }
.mk-empty-icon { width: 56px; height: 56px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; background: #f1f5f9; color: #94a3b8; font-size: 1.5rem; }
.mk-empty-tips li { padding: 0.15rem 0; }
.mk-empty-tips li::before { content: "•"; color: #cbd5e1; margin-right: 0.4rem; }
.mk-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--mk-on-surface-variant);
  margin-left: 4px;
}
.mk-input,
.mk-select {
  width: 100%;
  height: 48px;
  background: #fff;
  border: 1px solid var(--mk-outline-variant);
  border-radius: var(--mk-r-md);
  padding: 0 16px;
  font-size: 16px;
  color: var(--mk-on-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
}
.mk-input::placeholder { color: var(--mk-on-surface-variant); opacity: 0.7; }
.mk-input:focus,
.mk-select:focus {
  outline: none;
  border-color: var(--mk-primary);
  box-shadow: 0 0 0 4px rgba(0, 74, 198, 0.15);
}
.mk-input-search { position: relative; }
.mk-input-search .mk-input { padding-left: 42px; }
.mk-input-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mk-on-surface-variant);
  font-size: 20px;
  pointer-events: none;
  line-height: 0;
}
.mk-select-wrap { position: relative; }
.mk-select { padding-right: 40px; }
.mk-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mk-on-surface-variant);
  pointer-events: none;
  line-height: 0;
}
.mk-btn-apply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 32px;
  background: var(--mk-primary);
  color: #fff;
  font-weight: 700;
  border: 0;
  border-radius: var(--mk-r-md);
  cursor: pointer;
}
.mk-btn-apply:hover { color: #fff; }
.mk-btn-clear {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  background: #fff;
  color: var(--mk-on-surface-variant);
  font-weight: 600;
  border: 1px solid var(--mk-outline-variant);
  border-radius: var(--mk-r-md);
  text-decoration: none;
}
.mk-btn-clear:hover { color: var(--mk-primary); border-color: var(--mk-primary); }

/* ---- Listing count -------------------------------------------------- */
.mk-count {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mk-on-surface-variant);
  font-weight: 600;
}
.mk-count i { font-size: 20px; }

/* ---- Compact catalog section (Browse all listings) ------------------ */
/* A subtle top border + moderate spacing makes the catalog read as another
   homepage section rather than a second page. */
.mk-catalog { border-top: 1px solid var(--mk-outline-variant); margin-top: 28px; padding-top: 24px; }
.mk-catalog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
/* .mk-catalog-title styling is shared with .discovery-title (see discovery
   section) so every marketplace heading uses one definition. */
.mk-catalog-sub { font-size: 14px; line-height: 20px; color: var(--mk-on-surface-variant); margin: 4px 0 0; }
.mk-catalog-count { flex: 0 0 auto; align-self: center; font-size: 13px; font-weight: 700; color: var(--mk-on-surface-variant); background: var(--mk-surface-low, #f2f4f7); border: 1px solid var(--mk-outline-variant); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }

/* Browse-categories chips (moved here, compact) */
.mk-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mk-cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--mk-outline-variant); color: var(--mk-on-surface-variant); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; }
.mk-cat-chip:hover { border-color: var(--mk-primary); color: var(--mk-primary); }
.mk-cat-chip.active { background: var(--mk-primary); color: #fff; border-color: var(--mk-primary); }
.mk-cat-chip-count { font-size: 12px; font-weight: 700; color: #98a2b3; }
.mk-cat-chip.active .mk-cat-chip-count { color: rgba(255, 255, 255, 0.85); }
.mk-cat-chip--more { color: var(--mk-primary); }
.mk-cat-chip--more i { transition: transform 0.15s ease; }
.mk-cat-chip--more:hover i { transform: translateX(2px); }

/* Compact filter toolbar — reuses .mk-filter-grid layout with tighter chrome and
   visually-hidden labels (kept in the DOM for screen readers). */
.mk-filter-bar { background: #fff; border: 1px solid var(--mk-outline-variant); border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); gap: 12px; margin-bottom: 20px; }
.mk-filter-bar .mk-field { gap: 0; }
.mk-filter-bar .mk-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mk-filter-bar .mk-input,
.mk-filter-bar .mk-select { height: 42px; font-size: 14px; padding: 0 12px; border-radius: 10px; }
.mk-filter-bar .mk-input-search .mk-input { padding-left: 38px; }
.mk-filter-bar .mk-input-search-icon { left: 12px; font-size: 17px; }
.mk-filter-bar .mk-select { padding-right: 34px; }
.mk-filter-bar .mk-btn-apply { height: 42px; padding: 0 22px; border-radius: 10px; }
.mk-filter-bar .mk-btn-clear { height: 42px; padding: 0 16px; border-radius: 10px; }

@media (max-width: 575.98px) {
  .mk-catalog { margin-top: 20px; padding-top: 18px; }
  .mk-catalog-count { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-cat-chip, .mk-cat-chip--more i { transition: none !important; }
  .mk-cat-chip--more:hover i { transform: none; }
}

/* ---- Product grid + cards ------------------------------------------- */
/* Fixed two-up grid, exactly like the Stitch reference: 1 column on mobile,
   2 equal columns from 768px up. minmax(0, 1fr) keeps the columns even and
   prevents wide media/titles from blowing the track out. */
/* Multi-column grid sized to match the discovery cards (same width, ratio and
   spacing) so the catalog reads as another homepage section, not a second page. */
.marketplace-catalog .mk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 0;
}
.marketplace-catalog .mk-grid > .col {
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  margin: 0;
  flex: initial;
}
@media (max-width: 575.98px) {
  .marketplace-catalog .mk-grid {
      grid-template-columns: 1fr;
      gap: 16px;
  }
}

.marketplace-catalog .listing-card {
  background: var(--mk-surface-lowest);
  border: 1px solid var(--mk-outline-variant);
  border-radius: var(--mk-r-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.marketplace-catalog .listing-card:hover {
  transform: none;
  border-color: var(--mk-outline-variant);
  box-shadow: var(--mk-shadow-card-hover);
}
.marketplace-catalog .listing-thumb-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mk-surface-low);
}
.marketplace-catalog .listing-thumb-link { display: block; width: 100%; height: 100%; }
.marketplace-catalog .listing-thumb,
.marketplace-catalog .listing-thumb-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.marketplace-catalog .listing-card:hover .listing-thumb { transform: scale(1.05); }
.marketplace-catalog .listing-overlay-top { padding: 16px; }
.marketplace-catalog .listing-cat-badge {
  background: var(--mk-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: var(--mk-r-full);
  box-shadow: 0 8px 16px -6px rgba(0, 74, 198, 0.5);
}

/* Favorite (save) control — a fixed circular button, right side of the overlay. */
.listing-fav-form { margin: 0; }
.listing-fav-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--mk-r-full);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--mk-on-surface-variant);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.listing-fav-btn:hover { color: var(--mk-error); transform: scale(1.08); }
.listing-fav-btn i { font-size: 20px; }

.marketplace-catalog .listing-card .card-body { padding: 28px; }
.marketplace-catalog .listing-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 64px;
}
.marketplace-catalog .listing-title a { color: var(--mk-on-surface); }
.marketplace-catalog .listing-title a:hover { color: var(--mk-primary); }
.marketplace-catalog .listing-price {
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  color: var(--mk-primary);
  margin-top: 8px;
}
.marketplace-catalog .listing-meta-list {
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--mk-outline-variant);
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}
.marketplace-catalog .listing-meta-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mk-on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.marketplace-catalog .listing-meta-list i { color: var(--mk-on-surface-variant); font-size: 18px; }

/* Full-width "View Details" outline button */
.marketplace-catalog .listing-actions { margin-top: 24px; }
.mk-btn-view {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  background: #fff;
  border: 2px solid var(--mk-primary);
  color: var(--mk-primary);
  font-weight: 700;
  border-radius: var(--mk-r-md);
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.mk-btn-view:hover {
  background: var(--mk-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--mk-shadow-btn-lift);
}
.mk-btn-view i { font-size: 20px; }

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 1199.98px) {
  /* Tablet: filter fields reflow to a simpler grid. */
  .mk-filter-grid .mk-col-5 { grid-column: span 12; }
  .mk-filter-grid .mk-col-3 { grid-column: span 6; }
  .mk-filter-grid .mk-col-2 { grid-column: span 6; }
  .mk-filter-grid .mk-col-6 { grid-column: span 12; }
}
@media (max-width: 767.98px) {
  .marketplace-catalog { gap: 24px; }
  .mk-hero-inner { padding: 24px 24px; max-width: 100%; }
  .mk-hero-title { font-size: 30px; line-height: 38px; }
  .mk-hero-desc { font-size: 16px; line-height: 24px; margin-bottom: 16px; }
  .mk-heading-title { font-size: 32px; line-height: 40px; }
  .mk-filter-grid { gap: 16px; }
  .mk-filter-grid .mk-col-2,
  .mk-filter-grid .mk-col-3,
  .mk-filter-grid .mk-col-5,
  .mk-filter-grid .mk-col-6 { grid-column: span 12; }
  .mk-field-actions { justify-content: stretch; }
  .mk-field-actions .mk-btn-apply,
  .mk-field-actions .mk-btn-clear { flex: 1; justify-content: center; }
  .mk-welcome-text { font-size: 14px; line-height: 20px; }
}

/* ---- Public marketplace profile ------------------------------------- */
.public-profile-meta { color: #667085; font-size: 0.95rem; }
.public-profile-meta i { color: var(--bs-primary); margin-right: 4px; }
.public-profile-bio { max-width: 62ch; line-height: 1.6; }
.stat-card-value.stat-card-value-text { font-size: 1.5rem; }
.review-stars { color: #f5b301; font-size: 1.3rem; letter-spacing: 3px; }
/* The reused marketplace grid sits inside the profile page's own padding. */
.public-profile-catalog { gap: 0; }

@media (max-width: 575.98px) {

    .profile-header-card .d-flex.flex-column.flex-md-row{
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .profile-avatar-wrap{
        flex: 0 0 72px;
    }

    .profile-header-card .flex-grow-1{
        flex: 1 1 auto;
        min-width: 0;
    }

    .profile-header-card .flex-shrink-0{
        width: 100%;
        margin-top: 1rem;
    }
}

/* =====================================================================
   Notifications — "Apex Modernist" (Stitch spec)
   ===================================================================== */
.notif-page {
  --nf-primary: #004ac6;
  --nf-primary-2: #2563eb;
  --nf-on-surface: #131b2e;
  --nf-on-variant: #434655;
  --nf-muted: #64748b;
  --nf-outline: #c3c6d7;
  --nf-surface-low: #f2f3ff;
  --nf-unread-bg: #f4f7ff;
  --nf-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  --nf-shadow-hover: 0 12px 28px -8px rgba(15, 23, 42, 0.16);
  /* Width/alignment come from the shared .dashboard-page wrapper. */
  color: var(--nf-on-surface);
}

/* Header */
.notif-head { margin-bottom: 28px; }
.notif-title { font-size: 48px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.notif-subtitle { font-size: 18px; line-height: 28px; color: var(--nf-on-variant); margin: 10px 0 0; }

/* Toolbar */
.notif-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.notif-search { position: relative; flex: 1 1 240px; min-width: 200px; }
.notif-search-ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--nf-on-variant); font-size: 16px; line-height: 0; pointer-events: none; }
.notif-search-input {
  width: 100%; height: 46px; padding: 0 20px 0 44px;
  background: #fff; border: 1px solid var(--nf-outline); border-radius: 9999px;
  font-size: 15px; color: var(--nf-on-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.notif-search-input::placeholder { color: var(--nf-on-variant); opacity: 0.8; }
.notif-search-input:focus { outline: none; border-color: var(--nf-primary); box-shadow: 0 0 0 4px rgba(0, 74, 198, 0.08); }

.notif-tool { flex: 0 0 auto; }
.notif-tool-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 16px;
  background: #fff; border: 1px solid var(--nf-outline); border-radius: 12px;
  color: var(--nf-on-surface); font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.notif-tool-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.15); border-color: rgba(0, 74, 198, 0.35); }
.notif-caret { font-size: 11px; color: var(--nf-muted); transition: transform 0.2s ease; }
.notif-tool-btn[aria-expanded="true"] .notif-caret { transform: rotate(180deg); }

.notif-menu { --bs-dropdown-min-width: 210px; border: 1px solid var(--nf-outline); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.25); padding: 8px; margin-top: 8px; }
.notif-menu.show { animation: nfMenuIn 0.16s ease; }
@keyframes nfMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.notif-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: transparent; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--nf-on-surface); text-align: left; cursor: pointer; }
.notif-menu-item:hover, .notif-menu-item:focus { background: var(--nf-unread-bg); color: var(--nf-primary); }
.notif-menu-item.is-active { color: var(--nf-primary); font-weight: 600; }
.notif-check { font-size: 15px; opacity: 0; color: var(--nf-primary-2); flex: 0 0 auto; }
.notif-menu-item.is-active .notif-check { opacity: 1; }

.notif-markall-form { margin: 0; flex: 0 0 auto; }
.notif-markall {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 18px;
  background: #fff; border: 1px solid var(--nf-outline); border-radius: 9999px;
  color: var(--nf-primary); font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.notif-markall:hover { transform: translateY(-2px); background: var(--nf-unread-bg); border-color: rgba(0, 74, 198, 0.35); box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.15); }

/* Feed + cards */
.notif-feed { display: flex; flex-direction: column; gap: 16px; }
.notif-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--nf-outline);
  border-radius: 20px;
  box-shadow: var(--nf-shadow);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.notif-card:hover { transform: translateY(-2px); box-shadow: var(--nf-shadow-hover); border-color: rgba(0, 74, 198, 0.35); background: #fcfdff; }
.notif-card:focus-visible { outline: 2px solid var(--nf-primary); outline-offset: 2px; }
.notif-card.is-unread { background: var(--nf-unread-bg); border-color: rgba(0, 74, 198, 0.2); }
.notif-card.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--nf-primary); }

/* Icon tile */
.notif-ico { flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 1.4rem; }
.notif-ico--blue { background: rgba(0, 74, 198, 0.1); color: var(--nf-primary); }
.notif-ico--green { background: #dcfce7; color: #16a34a; }
.notif-ico--red { background: #ffe4e6; color: #ba1a1a; }
.notif-ico--amber { background: #fef3c7; color: #d97706; }
.notif-ico--neutral { background: #eef1f5; color: #64748b; }

/* Body */
.notif-body { flex: 1 1 auto; min-width: 0; }
.notif-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.notif-card-title { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--nf-on-surface); margin: 0; overflow-wrap: anywhere; }
.notif-card.is-unread .notif-card-title { font-weight: 700; }
.notif-time { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--nf-muted); white-space: nowrap; padding-top: 2px; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nf-primary-2); }
.notif-card-msg { font-size: 14px; line-height: 20px; color: var(--nf-on-variant); margin: 6px 0 0; overflow-wrap: anywhere; }

/* Action buttons */
.notif-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.notif-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 9999px;
  font-size: 14px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.notif-btn-primary { background: linear-gradient(135deg, #2563eb 0%, #004ac6 100%); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }
.notif-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -4px rgba(37, 99, 235, 0.3); color: #fff; }
.notif-btn-outline { background: #fff; color: var(--nf-primary); border: 2px solid var(--nf-primary); }
.notif-btn-outline:hover { background: rgba(0, 74, 198, 0.05); color: var(--nf-primary); }

.notif-no-results { text-align: center; color: var(--nf-on-variant); padding: 24px; margin: 8px 0 0; }
.notif-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(115, 118, 134, 0.2); text-align: center; font-size: 14px; color: var(--nf-muted); }

/* Empty state */
.notif-empty { text-align: center; max-width: 460px; margin: 40px auto; padding: 48px 24px; }
.notif-empty-ico { width: 88px; height: 88px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; border-radius: 24px; background: var(--nf-surface-low); color: var(--nf-primary); font-size: 2.4rem; }
.notif-empty-title { font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.notif-empty-text { font-size: 15px; line-height: 1.6; color: var(--nf-on-variant); margin: 0 0 24px; }
.notif-empty-btn { padding: 12px 26px; }

@media (max-width: 767.98px) {
  .notif-title { font-size: 32px; }
  .notif-subtitle { font-size: 16px; }
  .notif-card { padding: 18px; gap: 12px; border-radius: 18px; }
  .notif-ico { width: 44px; height: 44px; font-size: 1.25rem; }
  .notif-actions .notif-btn { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================
   Chat thread — "Apex Modernist" (Stitch conversation spec)
   Two-pane: left details panel + right conversation pane.
   ===================================================================== */
.ct-page {
  --ct-primary: #004ac6;
  --ct-primary-2: #2563eb;
  --ct-on-surface: #131b2e;
  --ct-on-variant: #434655;
  --ct-muted: #64748b;
  --ct-outline: #c3c6d7;
  --ct-surface-low: #f2f3ff;
  --ct-surface: #eaedff;
  --ct-surface-high: #e2e7ff;
  --ct-green: #16a34a;
  --ct-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  --ct-radius: 20px;
  color: var(--ct-on-surface);
  display: flex;
  flex-direction: column;
}

/* Two-pane layout */
.ct-layout {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  height: calc(100vh - var(--sb-topbar-h) - 72px);
  min-height: 480px;
}
/* Left panel: compact, pinned alongside the conversation. It fills the pane
   height and only scrolls internally when the viewport genuinely can't fit the
   cards (short laptops / mobile) — on a standard desktop nothing scrolls. */
.ct-details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding-right: 4px;
}
.ct-details::-webkit-scrollbar { width: 8px; }
.ct-details::-webkit-scrollbar-thumb { background: var(--ct-outline); border-radius: 8px; }
.ct-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ct-outline);
  border-radius: 24px;
  box-shadow: var(--ct-shadow);
  overflow: hidden;
}

/* Listing card — product-showcase proportions: hero image dominates (~65-70%),
   info section complements beneath it. */
.ct-listing { background: #fff; border: 1px solid var(--ct-outline); border-radius: var(--ct-radius); box-shadow: var(--ct-shadow); padding: 12px; }
.ct-listing-media { position: relative; display: block; height: 200px; border-radius: 14px; overflow: hidden; background: var(--ct-surface-low); }
.ct-listing-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ct-listing-media:hover img { transform: scale(1.05); }
.ct-listing-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #98a2b3; font-size: 2.25rem; }
.ct-listing-badge {
  position: absolute; top: 10px; right: 10px;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px);
  color: var(--ct-primary); font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; border: 1px solid rgba(0, 74, 198, 0.2);
}
.ct-listing-body { padding: 16px 6px 6px; }
.ct-listing-title { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--ct-on-surface); margin: 0; overflow-wrap: anywhere; }
.ct-listing-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 12px; }
.ct-listing-price { font-size: 22px; font-weight: 800; color: var(--ct-primary); }
.ct-listing-link { color: var(--ct-primary); font-size: 14px; font-weight: 700; text-decoration: none; flex: 0 0 auto; }
.ct-listing-link:hover { text-decoration: underline; color: var(--ct-primary); }

/* Safety banner */
.ct-safety { display: flex; gap: 12px; padding: 14px; border-radius: var(--ct-radius); background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(0, 74, 198, 0.18); }
.ct-safety-ico { flex: 0 0 auto; color: var(--ct-primary); font-size: 1.15rem; line-height: 1.35; }
.ct-safety-title { font-size: 14px; font-weight: 700; color: var(--ct-on-surface); margin: 0 0 3px; }
.ct-safety-text { font-size: 12.5px; line-height: 1.45; color: var(--ct-on-variant); margin: 0; }
.ct-safety-link { display: inline-block; margin-top: 6px; color: var(--ct-primary); font-size: 12px; font-weight: 700; text-decoration: none; }
.ct-safety-link:hover { text-decoration: underline; color: var(--ct-primary); }

/* Negotiation summary bar — pinned at the top of the conversation pane,
   above the scrolling messages (relocated from the sidebar). */
.ct-negbar {
  flex: 0 0 auto; padding: 16px 24px 18px;
  border-bottom: 1px solid var(--ct-outline);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.07) 0%, rgba(0, 74, 198, 0.03) 100%);
}
.ct-negbar-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ct-negbar-ico {
  flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: #dcfce7; color: var(--ct-green); font-size: 1.05rem;
}
.ct-negbar-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ct-on-variant); }
.ct-negbar-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ct-negbar-stats { display: flex; align-items: flex-start; gap: 40px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.ct-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ct-muted); }
.ct-stat-value { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--ct-on-surface); overflow-wrap: anywhere; }
.ct-stat-value--price { color: var(--ct-primary); font-size: 20px; font-weight: 800; }
.ct-stat-value--muted { font-size: 15px; font-weight: 600; color: var(--ct-on-variant); }
.ct-negbar-empty { flex: 1 1 auto; margin: 0; font-size: 14px; color: var(--ct-on-variant); }
.ct-neg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ct-primary); animation: ctPulse 1.6s ease-in-out infinite; }
@keyframes ctPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ct-negbar-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; border-radius: 9999px; white-space: nowrap;
  background: linear-gradient(135deg, #2563eb 0%, #004ac6 100%); color: #fff;
  font-weight: 700; text-decoration: none; box-shadow: 0 6px 16px -6px rgba(0, 74, 198, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ct-negbar-btn:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 10px 22px -6px rgba(0, 74, 198, 0.5); }
@media (max-width: 767.98px) {
  .ct-negbar { padding: 14px 16px; }
  .ct-negbar-stats { gap: 20px 28px; }
  .ct-negbar-btn { width: 100%; }
}

/* Conversation pane */
.ct-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; background: #fff; }
.cm-daysep { align-self: center; margin: 2px 0; }
.cm-daysep span { display: inline-block; padding: 5px 16px; background: var(--ct-surface); color: var(--ct-on-variant); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 9999px; }
.cm-event { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; background: var(--ct-surface-high); color: #38485d; border: 1px solid var(--ct-outline); border-radius: 9999px; font-size: 13px; font-weight: 600; }

.cm-row { display: flex; align-items: flex-start; gap: 12px; max-width: 68%; animation: cmFade 0.25s ease; }
.cm-row--own { flex-direction: row-reverse; align-self: flex-end; }
@keyframes cmFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.cm-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; background: var(--ct-surface-high); color: #38485d; border: 1px solid var(--ct-outline); }
.cm-avatar--own { background: var(--ct-primary); color: #fff; border-color: var(--ct-primary); }
.cm-group { display: flex; flex-direction: column; min-width: 0; }
.cm-row--own .cm-group { align-items: flex-end; }
.cm-bubble { padding: 12px 18px; font-size: 16px; line-height: 1.5; border-radius: 18px; overflow-wrap: anywhere; white-space: pre-line; }
.cm-bubble--other { background: var(--ct-surface-low); color: var(--ct-on-surface); border: 1px solid rgba(195, 198, 215, 0.5); border-top-left-radius: 6px; }
.cm-bubble--own { background: linear-gradient(135deg, #2563eb 0%, #004ac6 100%); color: #fff; border-top-right-radius: 6px; box-shadow: 0 6px 16px -6px rgba(0, 74, 198, 0.45); }
.cm-time { font-size: 11px; color: var(--ct-muted); margin-top: 6px; padding: 0 6px; }

/* Empty state */
.cm-empty { margin: auto; text-align: center; max-width: 360px; padding: 24px; }
.cm-empty-ico { width: 76px; height: 76px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 22px; background: var(--ct-surface-low); color: var(--ct-primary); font-size: 2rem; }
.cm-empty-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--ct-on-surface); }
.cm-empty-text { font-size: 14px; line-height: 1.6; color: var(--ct-on-variant); margin: 0; }

/* Composer.
   flex:0 0 auto keeps the footer at its natural content height so the input never
   gets squashed by a tall message thread. max-height + overflow-y:auto still lets
   the region scroll internally when its content is genuinely tall (the rewarded-ad
   + Premium card at the message limit) instead of being clipped by .ct-main's
   overflow. A normal composer is far shorter than the cap, so no scrollbar shows. */
.ct-composer-wrap { flex: 0 0 auto; max-height: 66vh; overflow-y: auto; border-top: 1px solid var(--ct-outline); padding: 18px 24px 24px; background: #fff; }
/* Message-limit state: the footer holds the tall rewarded + Premium card instead
   of the input, so there's no input to protect from shrinking. Let the footer
   shrink (flex-shrink:1) so its own overflow:auto scrolls the card fully into view
   — otherwise flex-shrink:0 keeps it at content height and the overflow spills past
   .ct-main (overflow:hidden) and clips the bottom. The thread yields most of its
   space (flex-shrink:8) so the card needs as little scrolling as possible. */
.ct-main--limit .ct-composer-wrap { flex-shrink: 1; max-height: none; }
.ct-main--limit .ct-thread { flex-shrink: 8; }
.ct-composer-wrap::-webkit-scrollbar { width: 8px; }
.ct-composer-wrap::-webkit-scrollbar-thumb { background: var(--ct-outline); border-radius: 8px; }
.ct-remaining { font-size: 12px; color: var(--ct-muted); margin: 0 0 10px; }
.ct-composer { display: flex; align-items: center; gap: 8px; margin: 0; }
.ct-composer-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; background: transparent;
  border-radius: 50%; color: var(--ct-muted); font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ct-composer-icon:hover,
.ct-composer-icon.is-active { background: var(--ct-surface-high); color: var(--ct-primary); }

/* Emoji picker */
.ct-emoji { position: relative; flex: 0 0 auto; }
.ct-emoji-picker {
  position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 30;
  width: 320px; max-width: min(320px, calc(100vw - 32px));
  background: #fff; border: 1px solid #e5e7eb; border-radius: 18px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
  padding: 10px; opacity: 0; transform: translateY(8px) scale(0.98);
  transform-origin: bottom left; pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.ct-emoji-picker.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ct-emoji-tabs {
  display: flex; gap: 2px; padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid #eef0f5;
}
.ct-emoji-tab {
  flex: 1 1 auto; border: 0; background: transparent; border-radius: 10px;
  padding: 6px 0; font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: background-color 0.15s ease;
}
.ct-emoji-tab:hover { background: var(--ct-surface-low); }
.ct-emoji-tab.is-active { background: var(--ct-surface-high); }
.ct-emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  max-height: 216px; overflow-y: auto; padding: 2px;
}
.ct-emoji-grid::-webkit-scrollbar { width: 8px; }
.ct-emoji-grid::-webkit-scrollbar-thumb { background: var(--ct-outline); border-radius: 8px; }
.ct-emoji-btn {
  border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  aspect-ratio: 1 / 1; font-size: 1.35rem; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.ct-emoji-btn:hover { background: var(--ct-surface-high); transform: scale(1.12); }

.ct-composer-field { position: relative; flex: 1 1 auto; min-width: 0; }
.ct-composer-input {
  width: 100%; min-height: 50px; max-height: 140px; resize: none;
  padding: 13px 56px 13px 20px;
  background: #fff; border: 1px solid var(--ct-outline); border-radius: 9999px;
  font-size: 16px; line-height: 1.4; color: var(--ct-on-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ct-composer-input::placeholder { color: var(--ct-muted); }
.ct-composer-input:focus { outline: none; border-color: var(--ct-primary); box-shadow: 0 0 0 4px rgba(0, 74, 198, 0.1); }
.ct-send {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #004ac6 100%); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  box-shadow: 0 6px 16px -4px rgba(0, 74, 198, 0.45); cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ct-send:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 8px 20px -4px rgba(0, 74, 198, 0.55); }
.ct-send:active { transform: translateY(-50%) scale(0.95); }
.ct-composer-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--ct-muted); margin: 10px 0 0; }
.ct-closed { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 14px; border-radius: 12px; background: var(--ct-surface-low); color: var(--ct-on-variant); font-size: 14px; }

/* Tablet: narrow the sidebar proportionally, keep the two-pane layout. */
@media (max-width: 1199.98px) {
  .ct-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .cm-row { max-width: 74%; }
}
/* Small laptop / tablet: stack the panel above the conversation. */
@media (max-width: 991.98px) {
  .ct-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .ct-details { width: 100%; overflow: visible; padding-right: 0; }
  .ct-main { min-height: 65vh; }
}
@media (max-width: 767.98px) {
  .ct-thread { padding: 16px; gap: 14px; }
  .cm-row { max-width: 88%; }
  .cm-bubble { font-size: 15px; }
  .ct-composer-wrap { padding: 12px 16px 24px; }
}

/* =====================================================================
   Premium subscription pages
   ===================================================================== */
.premium-page { max-width: 1080px; margin: 0 auto; }
.premium-page--narrow { max-width: 720px; }

.premium-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px;
  color: #434655; font-weight: 600; font-size: 14px; text-decoration: none;
}
.premium-back:hover { color: #004ac6; }

.premium-hero {
  position: relative; overflow: hidden; border-radius: 20px; padding: 32px 32px 30px;
  background: linear-gradient(135deg, #2563eb 0%, #004ac6 100%); color: #fff;
  box-shadow: 0 18px 50px rgba(0, 74, 198, 0.25);
}
.premium-hero-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px;
}
.premium-hero-title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.premium-hero-sub { font-size: 16px; line-height: 1.55; margin: 0; max-width: 560px; color: rgba(255, 255, 255, 0.9); }

.premium-status {
  display: flex; align-items: center; gap: 14px; margin-top: 20px;
  padding: 16px 20px; border-radius: 16px; border: 1px solid transparent;
}
.premium-status-ico { font-size: 1.6rem; flex: 0 0 auto; }
.premium-status-title { font-weight: 700; margin: 0 0 2px; }
.premium-status-text { font-size: 14px; }
.premium-status--active { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.25); color: #14532d; }
.premium-status--active .premium-status-ico { color: #16a34a; }
.premium-status--pending { background: rgba(245, 158, 11, 0.09); border-color: rgba(245, 158, 11, 0.3); color: #7c4a03; }
.premium-status--pending .premium-status-ico { color: #d97706; }

.premium-card {
  border: 1px solid rgba(16, 24, 40, 0.08); border-radius: 1.25rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.05); overflow: hidden;
}

.premium-benefits li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
.premium-benefits li + li { border-top: 1px solid rgba(16, 24, 40, 0.06); }
.premium-benefit-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
  background: linear-gradient(135deg, #e2e7ff, #dbe1ff); color: #004ac6;
}

.premium-plans { display: flex; flex-direction: column; gap: 12px; }
.premium-plan {
  border: 1px solid rgba(16, 24, 40, 0.1); border-radius: 14px; padding: 14px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.premium-plan:hover { border-color: rgba(0, 74, 198, 0.4); box-shadow: 0 8px 20px -10px rgba(0, 74, 198, 0.35); }
.premium-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.premium-plan-name { font-weight: 700; }
.premium-plan-tag { font-size: 11px; font-weight: 600; color: #16a34a; }
.premium-plan-price { font-size: 24px; font-weight: 800; color: #004ac6; margin-top: 4px; }
.premium-plan-per { font-size: 13px; font-weight: 600; color: #64748b; }

.premium-pay-note {
  display: flex; align-items: flex-start; padding: 14px 16px; border-radius: 12px;
  background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(0, 74, 198, 0.15); color: #434655;
}
.premium-pay-note i { color: #004ac6; }

.premium-admin-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; }
.premium-admin-table code { font-size: 12px; }

.premium-hero-cta { border-radius: 9999px; font-weight: 700; color: #004ac6; }

/* Sections */
.premium-section { margin-top: 40px; }
.premium-section-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; }
.premium-section-sub { color: #64748b; margin: 0 0 20px; }

/* ---- Premium member dashboard (Phase 10) ---- */
.premium-dash-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.premium-dash-title { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.premium-active-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, #fde68a, #fbbf24); color: #7c4a03; font-weight: 700; font-size: 13px; }
.premium-dash-meta { display: flex; gap: 12px; }
.premium-dash-meta-item { display: flex; flex-direction: column; text-align: right; }
.premium-dash-meta-value { font-size: 18px; font-weight: 800; color: #131b2e; }
.premium-dash-meta-label { font-size: 12px; color: #667085; }

.premium-renew-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: #fff8eb; border: 1px solid #fde68a; margin-bottom: 20px; }
.premium-renew-ico { font-size: 1.4rem; color: #b45309; }

/* Featured listing card */
.premium-featured-card { display: flex; flex-wrap: wrap; gap: 20px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06); border: 1px solid #f0e3c7; }
.premium-featured-thumb { position: relative; width: 200px; max-width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #f2f3ff; display: flex; align-items: center; justify-content: center; color: #98a2b3; font-size: 2rem; flex: 0 0 auto; }
.premium-featured-thumb img { width: 100%; height: 100%; object-fit: cover; }
.premium-featured-flag { position: absolute; top: 10px; left: 10px; }
.premium-featured-body { flex: 1 1 260px; min-width: 0; }
.premium-featured-title { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.premium-featured-stats { display: flex; flex-wrap: wrap; gap: 14px; color: #475467; font-size: 14px; margin-bottom: 10px; }
.premium-featured-until { color: #667085; font-size: 14px; }

/* Empty states */
.premium-empty { text-align: center; padding: 2rem 1rem; border: 1px dashed #e2e6ef; border-radius: 16px; background: #fafbff; }
.premium-empty-ico { display: inline-flex; font-size: 2rem; color: #98a2b3; margin-bottom: 6px; }
.premium-empty-title { font-weight: 700; color: #131b2e; }
.premium-empty-text { color: #667085; max-width: 44ch; margin-inline: auto; }

/* Discovery benefits checklist */
.premium-benefit-status { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(16, 24, 40, 0.05); height: 100%; }
.premium-benefit-status-ico { font-size: 1.3rem; line-height: 1; }

/* Choose-featured picker cards */
.premium-pick-thumb { aspect-ratio: 4 / 3; background: #f2f3ff; border-radius: 0.75rem 0.75rem 0 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #98a2b3; font-size: 1.6rem; }
.premium-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.premium-pick-stats { display: flex; gap: 14px; color: #475467; font-size: 13px; }

/* Marketplace premium nudge (dismissible) */
.mk-premium-nudge { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(135deg, #fff8eb, #fffdf7); border: 1px solid #fde68a; margin-bottom: 16px; }
.mk-premium-nudge-ico { font-size: 1.3rem; color: #b45309; }
.mk-premium-nudge-text { flex: 1 1 auto; font-weight: 600; color: #7c4a03; }
.mk-premium-nudge-close { border: 0; background: transparent; color: #b45309; padding: 4px; line-height: 1; cursor: pointer; border-radius: 8px; }
.mk-premium-nudge-close:hover { background: rgba(180, 83, 9, 0.1); }

/* ============ Premium member hub — SaaS dashboard (Phase 10 redesign) ============ */
/* One shared card style across the page: soft border, soft shadow, hover lift. */
.premium-card { background: #fff; border: 1px solid #eef0f4; border-radius: 18px; box-shadow: 0 6px 24px rgba(16, 24, 40, 0.05); padding: 22px; }

/* Hero header */
.premium-hub-hero { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; margin-bottom: 36px; }
.premium-hub-hero-text { flex: 1 1 320px; min-width: 0; }
.premium-hub-title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.premium-hub-hero-text .premium-active-pill { margin-bottom: 14px; }
.premium-hub-subtitle { color: #667085; font-size: 16px; margin: 0; max-width: 52ch; }

/* Floating status card (replaces the old floating numbers) */
.premium-status-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #eef0f4; border-radius: 18px; box-shadow: 0 8px 30px rgba(16, 24, 40, 0.07); padding: 18px 22px; flex: 0 0 auto; }
.premium-status-card-ico { font-size: 1.9rem; line-height: 1; }
.premium-status-card-value { font-size: 18px; font-weight: 800; color: #131b2e; margin: 0; }
.premium-status-card-label { font-size: 12px; color: #98a2b3; margin: 3px 0 0; }
.premium-status-card-date { font-size: 15px; font-weight: 700; color: #475467; margin: 1px 0 0; }

/* Section headings + inline link */
.premium-hub-section-title { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 16px; }
.premium-hub-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.premium-hub-section-head .premium-hub-section-title { margin-bottom: 0; }
.premium-section-link { font-weight: 600; font-size: 14px; text-decoration: none; color: var(--bs-primary); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.premium-section-link i { transition: transform 0.15s ease; }
.premium-section-link:hover i { transform: translateX(3px); }

/* Featured listing: thumbnail · details · info card */
.premium-featured-grid { display: grid; grid-template-columns: 220px 1fr 240px; gap: 24px; align-items: center; }
.premium-featured-grid .premium-featured-thumb { width: 100%; }
.premium-featured-main { min-width: 0; }
.premium-featured-info { align-self: stretch; background: linear-gradient(135deg, #fff8eb, #fffdf7); border: 1px solid #fdecc8; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.premium-featured-info-ico { font-size: 1.6rem; }
.premium-featured-info-title { font-weight: 800; margin: 6px 0 0; color: #7c4a03; }
.premium-featured-info-text { font-size: 13px; color: #98701f; margin: 0; }
.premium-featured-info-link { font-weight: 600; font-size: 13px; color: #b45309; text-decoration: none; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.premium-featured-info-link:hover { text-decoration: underline; }
.premium-featured-info-link i { transition: transform 0.15s ease; }
.premium-featured-info-link:hover i { transform: translateX(3px); }

/* Analytics metric cards: colored icon circle, hover elevation */
.premium-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.premium-metric-card { background: #fff; border: 1px solid #eef0f4; border-radius: 16px; box-shadow: 0 4px 16px rgba(16, 24, 40, 0.04); padding: 20px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.premium-metric-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16, 24, 40, 0.10); }
.premium-metric-card:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 3px; }
.premium-metric-ico { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 14px; }
.premium-metric-value { font-size: 25px; font-weight: 800; color: #131b2e; line-height: 1.1; }
.premium-metric-label { font-size: 13px; color: #667085; margin-top: 3px; }
.premium-metric-ico--info { background: #e0f2fe; color: #0369a1; }
.premium-metric-ico--danger { background: #fee2e2; color: #b42318; }
.premium-metric-ico--secondary { background: #eef1f5; color: #475467; }
.premium-metric-ico--primary { background: #e0e7ff; color: #3730a3; }
.premium-metric-ico--success { background: #dcfce7; color: #15803d; }
.premium-metric-ico--warning { background: #fef3c7; color: #92400e; }

/* Top-listing highlight card */
.premium-top-listing { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px 20px; border-radius: 14px; background: linear-gradient(135deg, #fffbeb, #fff7ed); border: 1px solid #fde68a; }
.premium-top-listing-ico { font-size: 1.7rem; }
.premium-top-listing-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #b45309; font-weight: 700; margin: 0; }
.premium-top-listing-name { font-size: 18px; font-weight: 800; color: #131b2e; margin: 1px 0 0; }

/* Benefits — compact rows */
.premium-benefits-list { padding: 6px 10px; }
.premium-benefit-row { display: flex; align-items: center; gap: 14px; padding: 14px 12px; }
.premium-benefit-row + .premium-benefit-row { border-top: 1px solid #f1f3f7; }
.premium-benefit-row-ico { font-size: 1.2rem; line-height: 1; flex: 0 0 auto; }
.premium-benefit-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.premium-benefit-row-title { font-weight: 600; color: #131b2e; }
.premium-benefit-row-note { font-size: 13px; color: #98a2b3; }
.premium-benefit-row-badge { flex: 0 0 auto; }

/* What's Next — three equal, clickable gradient cards */
.premium-next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.premium-next-card { display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: 18px; text-decoration: none; color: inherit; border: 1px solid #eef0f4; box-shadow: 0 6px 24px rgba(16, 24, 40, 0.05); transition: transform 0.18s ease, box-shadow 0.18s ease; height: 100%; }
.premium-next-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(16, 24, 40, 0.12); }
.premium-next-card:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 3px; }
.premium-next-ico { font-size: 1.9rem; }
.premium-next-title { font-size: 17px; font-weight: 800; margin: 6px 0 0; color: #131b2e; }
.premium-next-text { font-size: 14px; color: #667085; margin: 0; flex: 1 1 auto; }
.premium-next-cta { font-weight: 700; color: var(--bs-primary); display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.premium-next-cta i { transition: transform 0.15s ease; }
.premium-next-card:hover .premium-next-cta i { transform: translateX(4px); }
.premium-next-card--amber { background: linear-gradient(135deg, #fffdf7, #fff6e6); }
.premium-next-card--blue { background: linear-gradient(135deg, #f7faff, #eef4ff); }
.premium-next-card--violet { background: linear-gradient(135deg, #fbf9ff, #f3eeff); }

/* Responsive: stack the hub on smaller screens */
@media (max-width: 767.98px) {
  .premium-hub-hero { gap: 16px; }
  .premium-status-card { width: 100%; }
  .premium-hub-title { font-size: 26px; }
  .premium-featured-grid { grid-template-columns: 1fr; }
}

/* Reduced motion: no hover transforms/animations */
@media (prefers-reduced-motion: reduce) {
  .premium-metric-card, .premium-next-card, .premium-section-link i, .premium-next-cta i,
  .premium-featured-info-link i { transition: none !important; }
  .premium-metric-card:hover, .premium-next-card:hover { transform: none; }
}

/* Pricing cards */
.premium-pricing {
  position: relative; background: #fff; border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 18px; padding: 26px 24px; height: 100%;
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.premium-pricing:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(0, 74, 198, 0.35); }
.premium-pricing--featured { border-color: rgba(0, 74, 198, 0.5); box-shadow: 0 18px 44px -18px rgba(0, 74, 198, 0.35); }
.premium-pricing-ribbon {
  position: absolute; top: 16px; right: 16px; padding: 4px 12px; border-radius: 9999px;
  background: linear-gradient(135deg, #2563eb, #004ac6); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.premium-pricing-name { font-size: 16px; font-weight: 700; color: #434655; margin: 0 0 8px; }
.premium-pricing-price { font-size: 40px; font-weight: 800; color: #004ac6; line-height: 1; }
.premium-pricing-per { font-size: 15px; font-weight: 600; color: #64748b; }
.premium-pricing-tag { color: #16a34a; font-size: 13px; font-weight: 600; margin: 8px 0 16px; }
.premium-pricing-list { list-style: none; padding: 0; margin: 0 0 20px; }
.premium-pricing-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: #131b2e; }
.premium-pricing-list li i { color: #16a34a; }

/* Benefit cards */
.premium-benefit-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px;
  background: #fff; border: 1px solid rgba(16, 24, 40, 0.08); border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.premium-benefit-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(15, 23, 42, 0.3); }
.premium-benefit-card.is-soon { background: #faf8ff; }
.premium-benefit-title { font-size: 15px; font-weight: 700; color: #131b2e; }
.premium-benefit-desc { font-size: 13px; line-height: 1.5; color: #64748b; margin-top: 4px; }
.premium-soon-badge { background: rgba(245, 158, 11, 0.15); color: #b45309; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }

/* ---- Activity Feed (timeline, muted, subtle hover) ---- */
.activity-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
.activity-typefilter { min-width: 170px; }
.activity-actions { margin-left: auto; display: flex; gap: 0.5rem; }
.activity-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.activity-item { display: flex; gap: 0.85rem; padding: 0.85rem 0.5rem; border-radius: 12px; position: relative; transition: background 0.12s ease; }
.activity-item:hover { background: #f8fafc; }
.activity-item:not(:last-child)::before { content: ""; position: absolute; left: 22px; top: 44px; bottom: -0.85rem; width: 2px; background: #eef2f7; }
.activity-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #f1f5f9; color: #64748b; font-size: 0.85rem; z-index: 1; }
.activity-item.is-unread .activity-ico { background: #eff6ff; color: #2563eb; }
.activity-body { flex: 1 1 auto; min-width: 0; }
.activity-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.activity-title { font-size: 0.9rem; font-weight: 600; color: #0f172a; }
.activity-item.is-unread .activity-title::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2563eb; margin-left: 0.4rem; vertical-align: middle; }
.activity-count { font-size: 0.72rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 0 0.4rem; }
.activity-message { font-size: 0.82rem; color: #475569; overflow-wrap: anywhere; }
.activity-message--sm { font-size: 0.78rem; }
.activity-time { font-size: 0.72rem; color: #94a3b8; white-space: nowrap; }
.activity-item-actions { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.3rem; }
.activity-link { font-size: 0.78rem; font-weight: 600; color: #2563eb; text-decoration: none; }
.activity-link:hover { text-decoration: underline; }
.activity-markread { border: 0; background: transparent; color: #94a3b8; font-size: 0.75rem; cursor: pointer; padding: 0; }
.activity-markread:hover { color: #64748b; }
.activity-timeline--compact .activity-item { padding: 0.55rem 0.35rem; }
.activity-timeline--compact .activity-item::before { left: 19px; top: 38px; }
.activity-empty-ico { width: 52px; height: 52px; margin: 0 auto 0.8rem; display: grid; place-items: center; border-radius: 50%; background: #f1f5f9; color: #94a3b8; font-size: 1.4rem; }

/* ---- Premium request status timeline (v2) ---- */
.premium-timeline { list-style: none; margin: 0; padding: 0; }
.premium-timeline-step { display: flex; gap: 0.85rem; padding-bottom: 1.1rem; position: relative; }
.premium-timeline-step:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: #e6ecf5; }
.premium-timeline-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #f1f5f9; color: #94a3b8; font-size: 0.9rem; z-index: 1; }
.premium-timeline-step.is-done .premium-timeline-ico { background: #eff6ff; color: #2563eb; }
.premium-timeline-step.is-current .premium-timeline-ico { background: #fffbeb; color: #b45309; }
.premium-timeline-step.is-success .premium-timeline-ico { background: #ecfdf3; color: #15803d; }
.premium-timeline-step.is-danger .premium-timeline-ico { background: #fff1f2; color: #be123c; }
.premium-timeline-step.is-info .premium-timeline-ico { background: #eff6ff; color: #2563eb; }
.premium-timeline-title { font-size: 0.95rem; font-weight: 700; color: #0f172a; margin: 0.2rem 0 0.1rem; }
.premium-timeline-sub { font-size: 0.8rem; color: #64748b; }

/* ---- Premium checkout payment-method details (v2) ---- */
.pc-plan-hint { list-style: none; padding: 0; }
.pc-method { background: #f8fafc; border: 1px solid #e6ecf5; border-radius: 12px; padding: 1rem 1.1rem; margin-top: 0.5rem; }
.pc-method-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.pc-method-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; display: block; margin-bottom: 0.15rem; }
.pc-copy { display: inline-flex; align-items: center; gap: 0.5rem; }
.pc-copy code { font-size: 0.95rem; color: #0f172a; }
.pc-copy-btn { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid #dbe6fb; background: #eff6ff; color: #2563eb; border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.pc-copy-btn:hover { background: #dbe6fb; }
.pc-qr { text-align: center; }
.pc-qr img { border: 1px solid #e2e8f0; border-radius: 10px; }
.pc-qr-cap { display: block; font-size: 0.7rem; color: #94a3b8; margin-top: 0.2rem; }
.pc-bank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.pc-bank-grid > div > div { font-size: 0.9rem; color: #0f172a; font-weight: 600; }
.premium-benefit-note {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 10px;
  font-size: 11.5px; line-height: 1.45; color: #64748b;
  border-top: 1px dashed rgba(16, 24, 40, 0.1); padding-top: 8px; cursor: help;
}
.premium-benefit-note i { color: #94a3b8; margin-top: 1px; flex-shrink: 0; }

/* How it works */
.premium-step {
  background: #fff; border: 1px solid rgba(16, 24, 40, 0.08); border-radius: 16px;
  padding: 22px; height: 100%; text-align: center;
}
.premium-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 50%; background: linear-gradient(135deg, #2563eb, #004ac6); color: #fff;
  font-weight: 800; font-size: 1.1rem; margin-bottom: 12px;
}
.premium-step-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.premium-step-text { font-size: 14px; color: #64748b; margin: 0; }

/* FAQ */
.premium-faq .accordion-item { border: 1px solid rgba(16, 24, 40, 0.08); border-radius: 14px !important; margin-bottom: 10px; overflow: hidden; }
.premium-faq .accordion-button { font-weight: 600; }
.premium-faq .accordion-button:not(.collapsed) { background: rgba(37, 99, 235, 0.06); color: #004ac6; box-shadow: none; }
.premium-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(0, 74, 198, 0.15); }

/* Final CTA */
.premium-cta {
  margin-top: 44px; text-align: center; padding: 40px 24px; border-radius: 20px;
  background: linear-gradient(135deg, #2563eb 0%, #004ac6 100%); color: #fff;
  box-shadow: 0 18px 50px rgba(0, 74, 198, 0.25);
}
.premium-cta-title { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.premium-cta-text { color: rgba(255, 255, 255, 0.9); margin: 0 0 18px; }
.premium-cta .btn-light { border-radius: 9999px; font-weight: 700; color: #004ac6; }

/* Profile premium status card */
.premium-profile-card .premium-profile-ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: linear-gradient(135deg, #2563eb, #004ac6); color: #fff;
}
.premium-profile-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.premium-profile-meta > div { min-width: 0; }
.premium-profile-meta dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.premium-profile-meta dd { font-size: 15px; font-weight: 600; color: #131b2e; margin: 2px 0 0; }
@media (max-width: 575.98px) {
  .premium-profile-action { width: 100%; }
  .premium-profile-action .btn { width: 100%; }
}

/* Request status / success */
.premium-result { max-width: 640px; margin: 0 auto; text-align: center; }
.premium-result-ico {
  width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
}
.premium-result-ico--success { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.premium-result-ico--pending { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.premium-result-title { font-size: 24px; font-weight: 800; margin: 0 0 8px; }
.premium-result-text { color: #64748b; font-size: 15px; line-height: 1.6; margin: 0 auto 20px; max-width: 480px; }
.premium-result-meta {
  display: inline-flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center;
  padding: 16px 24px; border-radius: 14px; background: #f2f3ff; margin-bottom: 24px;
}
.premium-result-meta dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.premium-result-meta dd { font-size: 14px; font-weight: 600; color: #131b2e; margin: 2px 0 0; }

/* Early access banner */
.premium-early-access {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px;
  padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(0, 74, 198, 0.04));
  border: 1px solid rgba(0, 74, 198, 0.18);
}
.premium-early-access-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: linear-gradient(135deg, #2563eb, #004ac6); color: #fff;
}
.premium-early-access-title { font-size: 15px; font-weight: 800; color: #004ac6; margin: 0 0 2px; }
.premium-early-access-text { font-size: 13.5px; line-height: 1.55; color: #434655; }

/* Roadmap */
.premium-roadmap {
  height: 100%; padding: 22px 24px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(16, 24, 40, 0.08);
}
.premium-roadmap--now { border-left: 4px solid #16a34a; }
.premium-roadmap--soon { border-left: 4px solid #d97706; background: #faf8ff; }
.premium-roadmap-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.premium-roadmap-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.premium-roadmap--now .premium-roadmap-dot { background: #16a34a; }
.premium-roadmap--soon .premium-roadmap-dot { background: #d97706; }
.premium-roadmap-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #434655; margin: 0; }
.premium-roadmap-list { list-style: none; padding: 0; margin: 0; }
.premium-roadmap-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15px; font-weight: 600; color: #131b2e; }
.premium-roadmap--now .premium-roadmap-list li i { color: #16a34a; }
.premium-roadmap--soon .premium-roadmap-list li { color: #64748b; }
.premium-roadmap--soon .premium-roadmap-list li i { color: #d97706; }
.premium-roadmap-note {
  display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0;
  font-size: 12px; line-height: 1.5; color: #64748b;
}
.premium-roadmap-note i { color: #94a3b8; margin-top: 2px; flex-shrink: 0; }

/* Reusable premium badge */
.premium-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 9999px;
  background: linear-gradient(135deg, #2563eb, #004ac6); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; vertical-align: middle;
  box-shadow: 0 4px 12px -5px rgba(0, 74, 198, 0.55);
}
.premium-badge i { font-size: 0.85em; color: #ffd54a; }
.premium-badge--sm { padding: 2px 8px; font-size: 11px; }

/* Featured badge — gold, intentionally distinct from the blue premium badge */
.featured-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 9999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #442c00;
  font-size: 12px; font-weight: 800; line-height: 1.4; white-space: nowrap; vertical-align: middle;
  box-shadow: 0 4px 12px -5px rgba(245, 158, 11, 0.6);
}
.featured-badge i { font-size: 0.85em; color: #7c4a03; }
.featured-badge--sm { padding: 2px 8px; font-size: 11px; }
.premium-required-badge { background: rgba(0, 74, 198, 0.12); color: #004ac6; font-size: 10px; font-weight: 700; }

/* Featured banner on the listing detail page */
.iv-featured-banner {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
  padding: 5px 12px; border-radius: 9999px;
  background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e;
  font-size: 12px; font-weight: 700; border: 1px solid rgba(245, 158, 11, 0.35);
}
.iv-featured-until { font-weight: 600; opacity: 0.9; }
.featured-expiry { font-size: 11px; line-height: 1.2; }

/* =====================================================================
   Premium analytics dashboard
   ===================================================================== */
.analytics-summary {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.analytics-stat {
  background: #fff; border: 1px solid rgba(16, 24, 40, 0.08); border-radius: 16px;
  padding: 18px; box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.2);
}
.analytics-stat-ico {
  width: 40px; height: 40px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.15rem; color: #fff; margin-bottom: 12px;
}
.analytics-tone-blue { background: linear-gradient(135deg, #2563eb, #004ac6); }
.analytics-tone-green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.analytics-tone-gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.analytics-tone-cyan { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.analytics-tone-pink { background: linear-gradient(135deg, #f472b6, #db2777); }
.analytics-tone-amber { background: linear-gradient(135deg, #fbbf24, #d97706); }
.analytics-tone-purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.analytics-stat-value { font-size: 26px; font-weight: 800; color: #131b2e; line-height: 1.1; }
.analytics-stat-label { font-size: 13px; color: #64748b; font-weight: 600; margin-top: 2px; }

.analytics-featured-media { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 14px; overflow: hidden; background: var(--ct-surface-low, #f2f3ff); }
.analytics-featured-media img { width: 100%; height: 100%; object-fit: cover; }
.analytics-featured-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #98a2b3; font-size: 2rem; }
.analytics-featured-price { font-size: 20px; font-weight: 800; color: #004ac6; }
.analytics-metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; border-top: 1px solid rgba(16, 24, 40, 0.06); padding-top: 14px; }
.analytics-metric { text-align: center; }
.analytics-metric .v { display: block; font-size: 18px; font-weight: 800; color: #131b2e; }
.analytics-metric .k { display: block; font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

.analytics-empty-ico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: #fef3c7; color: #d97706; font-size: 1.8rem; }

.analytics-compare-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.analytics-compare-label { font-size: 13px; color: #64748b; font-weight: 600; }
.analytics-compare-value { font-size: 24px; font-weight: 800; color: #131b2e; }
.analytics-compare-bar { height: 8px; border-radius: 9999px; background: #e2e7ff; overflow: hidden; margin-top: 6px; }
.analytics-compare-bar span { display: block; height: 100%; background: #c3c6d7; }
.analytics-compare-bar--featured span { background: linear-gradient(90deg, #2563eb, #004ac6); }
.analytics-multiplier { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 12px; border-radius: 9999px; background: rgba(22, 163, 74, 0.1); color: #16a34a; font-weight: 700; font-size: 14px; }

.analytics-top-list { display: flex; flex-direction: column; }
.analytics-top-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; text-decoration: none; color: inherit; }
.analytics-top-row:hover { background: var(--ct-surface-low, #f2f3ff); }
.analytics-top-rank { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #e2e7ff; color: #004ac6; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.analytics-top-thumb { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: #f2f3ff; display: flex; align-items: center; justify-content: center; color: #98a2b3; }
.analytics-top-thumb img { width: 100%; height: 100%; object-fit: cover; }
.analytics-top-main { flex: 1 1 auto; min-width: 0; }
.analytics-top-title { display: block; font-weight: 700; color: #131b2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analytics-top-sub { display: block; font-size: 12px; color: #64748b; margin-top: 2px; }
.analytics-top-badges { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

.analytics-timeline { list-style: none; margin: 0; padding: 0; }
.analytics-timeline-item { display: flex; gap: 12px; padding: 10px 6px; }
.analytics-timeline-item + .analytics-timeline-item { border-top: 1px solid rgba(16, 24, 40, 0.06); }
.analytics-timeline-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #e2e7ff; color: #004ac6; }
.analytics-timeline-text { font-size: 14px; font-weight: 600; color: #131b2e; }
.analytics-timeline-time { font-size: 12px; color: #94a3b8; }

/* Traffic insights */
.analytics-traffic { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.analytics-traffic > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.analytics-traffic dt { font-size: 13px; color: #64748b; font-weight: 600; }
.analytics-traffic dd { margin: 0; font-size: 15px; font-weight: 700; color: #131b2e; max-width: 60%; }

/* Visitor split */
.analytics-visitor-figure { font-size: 34px; font-weight: 800; color: #004ac6; line-height: 1; }
.analytics-visitor-bar { display: flex; height: 12px; border-radius: 9999px; overflow: hidden; background: #eef0f5; }
.analytics-visitor-bar .new { background: linear-gradient(90deg, #2563eb, #004ac6); }
.analytics-visitor-bar .ret { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.analytics-visitor-split .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.analytics-visitor-split .dot-new { background: #004ac6; }
.analytics-visitor-split .dot-ret { background: #f59e0b; }

/* Conversion funnel */
.analytics-funnel-stage { margin-bottom: 14px; }
.analytics-funnel-stage:last-child { margin-bottom: 0; }
.analytics-funnel-label { font-size: 13px; font-weight: 600; color: #64748b; }
.analytics-funnel-value { font-size: 15px; font-weight: 800; color: #131b2e; }
.analytics-funnel-pct { font-size: 12px; font-weight: 700; color: #16a34a; margin-left: 4px; }
.analytics-funnel-bar { height: 10px; border-radius: 9999px; background: #eef0f5; overflow: hidden; margin-top: 5px; }
.analytics-funnel-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #004ac6); }

/* Insights */
.analytics-insights { list-style: none; margin: 0; padding: 0; }
.analytics-insights li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; font-size: 14px; color: #131b2e; }
.analytics-insights li + li { border-top: 1px solid rgba(16, 24, 40, 0.06); }
.analytics-insights li i { color: #16a34a; margin-top: 2px; }

/* Admin analytics dashboard */
.admin-section-title { font-size: 16px; font-weight: 800; color: #131b2e; margin: 8px 0 12px; }

/* Chart.js responsive container: a relatively-positioned box with a definite
   height. Charts run responsive + maintainAspectRatio:false, so their height is
   governed by this box (stable) and only the width tracks the viewport — which
   prevents the width↔height resize feedback loop that made Seller Scores flicker
   when its column was stretched by the taller Top-sellers table beside it. */
/* =====================================================================
   CampusCart chart container standard — pair with CampusChart.create()
   (see main.js). A DEFINITE height (never percentage/auto/content-driven)
   gives Chart.js a stable box to size into; that is what prevents the
   responsive ResizeObserver feedback loop that makes charts flicker and
   continuously resize while idle. Every Chart.js chart in the project uses
   this container.

   Height is a CSS variable so a chart can be sized without a new one-off
   wrapper class — either a named size variant or an inline override:
     <div class="chart-container">                     (320px default)
     <div class="chart-container chart-container-sm">   (220px)
     <div class="chart-container" style="--chart-h: 180px">
   ===================================================================== */
.chart-container { position: relative; width: 100%; height: var(--chart-h, 320px); }
.chart-container > canvas { display: block; }
.chart-container-sm { --chart-h: 220px; }
.chart-container-md { --chart-h: 280px; }
.chart-container-lg { --chart-h: 360px; }
.admin-top-thumb { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: #f2f3ff; display: inline-flex; align-items: center; justify-content: center; color: #98a2b3; flex: 0 0 auto; }
.admin-top-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Actionable dashboard: clickable / disabled cards + rows */
.admin-metric-clickable { cursor: pointer; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.admin-metric-clickable:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(15, 23, 42, 0.35) !important; }
.admin-metric-clickable:focus-visible { outline: 3px solid rgba(0, 74, 198, 0.4); outline-offset: 2px; }
.admin-metric-arrow { font-size: 0.8em; opacity: 0.45; transition: transform 0.18s ease, opacity 0.18s ease; }
.admin-metric-clickable:hover .admin-metric-arrow { opacity: 1; transform: translateX(3px); }
.admin-metric-disabled { opacity: 0.62; cursor: not-allowed; }
.admin-metric-disabled:focus-visible { outline: 2px solid rgba(100, 116, 139, 0.55); outline-offset: 2px; }
.admin-metric-lock { font-size: 0.75em; opacity: 0.5; }
.admin-row-clickable { cursor: pointer; transition: background-color 0.12s ease; }
.admin-row-clickable:hover { background: var(--ct-surface-low, #f2f3ff); }

/* User management */
.admin-user-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--bs-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; overflow: hidden; }
.admin-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-user-avatar-lg { width: 72px; height: 72px; font-size: 1.6rem; border-radius: 20px; }
.admin-filters { position: sticky; top: calc(var(--sb-topbar-h, 60px) + 8px); z-index: 5; }
.admin-listing-thumb { height: 92px; background: #f2f3ff; display: flex; align-items: center; justify-content: center; color: #98a2b3; overflow: hidden; border-radius: 0.5rem 0.5rem 0 0; font-size: 1.5rem; }
.admin-listing-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Compact square thumbnail for the listing-management table rows. */
.admin-listing-thumb-sm { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 0.5rem; font-size: 1.1rem; }

/* Listing-detail gallery (admin). */
.admin-gallery-main { aspect-ratio: 4 / 3; background: #f2f3ff; border-radius: 0.75rem; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.admin-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.admin-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.admin-gallery-thumb { width: 52px; height: 52px; border-radius: 0.5rem; overflow: hidden; background: #f2f3ff; flex: 0 0 auto; }
.admin-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Bulk-action toolbar shown when listings are selected. */
.admin-bulk-bar { position: sticky; top: calc(var(--sb-topbar-h, 60px) + 8px); z-index: 4; }

/* ---- Discovery homepage sections (Phase 8 data · Phase 9 polish) ---- */
.discovery-home { margin-bottom: 2.5rem; }
.discovery-section { margin-bottom: 2.5rem; }
.discovery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
/* Shared marketplace section-heading style (discovery rows + "Browse all
   listings"), defined once so every section reads as a distinct content block. */
.discovery-title,
.mk-catalog-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #131b2e;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Emoji/icon a touch smaller than the text, optically centred. */
.discovery-emoji { font-size: 0.9em; line-height: 1; display: inline-flex; align-items: center; }
/* "View all" aligned to the heading; neutral by default, blue on hover. */
.discovery-viewall { font-size: 0.9rem; font-weight: 600; text-decoration: none; color: var(--mk-on-surface-variant, #667085); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s ease; }
.discovery-viewall:hover { color: var(--bs-primary); }
.discovery-viewall i { transition: transform 0.15s ease; }
.discovery-viewall:hover i { transform: translateX(3px); }
/* Responsive: scale the shared headings down on tablet / mobile. */
@media (max-width: 991.98px) { .discovery-title, .mk-catalog-title { font-size: 1.4rem; } }
@media (max-width: 575.98px) { .discovery-title, .mk-catalog-title { font-size: 1.2rem; } }
@media (prefers-reduced-motion: reduce) {
  .discovery-viewall, .discovery-viewall i { transition: none !important; }
  .discovery-viewall:hover i { transform: none; }
}

/* Horizontal scroller: CSS scroll-snap, momentum, and a hidden-but-usable
   scrollbar. listing_card emits a `.col`, pinned to a fixed width. */
.discovery-scroll {
  display: flex; gap: 1rem; overflow-x: auto; padding: 4px 2px 14px;
  scroll-snap-type: x proximity; scroll-behavior: smooth; scroll-padding-left: 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.discovery-scroll:hover { scrollbar-color: #cdd3e0 transparent; }
.discovery-scroll::-webkit-scrollbar { height: 6px; }
.discovery-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.discovery-scroll:hover::-webkit-scrollbar-thumb { background: #cdd3e0; }
.discovery-scroll.is-dragging { scroll-behavior: auto; cursor: grabbing; scroll-snap-type: none; }
.discovery-scroll > .col { flex: 0 0 auto; width: min(74vw, 236px); scroll-snap-align: start; }
.discovery-scroll:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 4px; border-radius: 12px; }

/* Card micro-interactions (scoped to discovery so the catalog grid is untouched).
   transform/opacity only — cheap to composite, no layout thrash. Kept < 200ms. */
.discovery-scroll .listing-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.discovery-scroll .listing-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14); }
.discovery-scroll .listing-thumb-wrap { overflow: hidden; }
.discovery-scroll .listing-thumb { position: relative; z-index: 1; transition: transform 0.18s ease; }
.discovery-scroll .listing-card:hover .listing-thumb { transform: scale(1.06); }
.discovery-scroll .mk-btn-view { transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.discovery-scroll .listing-card:hover .mk-btn-view { transform: translateY(-1px); }

/* Image skeleton shimmer → fades to the loaded image (no layout shift). */
.discovery-scroll .listing-thumb-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, #eef1f5 30%, #f7f9fc 50%, #eef1f5 70%);
  background-size: 200% 100%; animation: mkShimmer 1.3s ease-in-out infinite;
}
.discovery-scroll .listing-thumb-wrap.is-loaded::before,
.discovery-scroll .listing-thumb-wrap.is-error::before { display: none; }
.discovery-scroll .listing-thumb.mk-fade { opacity: 0; transition: opacity 0.35s ease; }
.discovery-scroll .listing-thumb.mk-fade.is-loaded { opacity: 1; }

.discovery-cat-tile { flex: 0 0 auto; width: 170px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 18px 20px; border-radius: 14px; background: linear-gradient(135deg, #eef1ff, #f6f8ff); border: 1px solid #e4e7ff; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.discovery-cat-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08); }
.discovery-cat-name { font-weight: 700; color: #131b2e; }
.discovery-cat-count { font-size: 0.8rem; color: #667085; }

/* Polished empty states — never blank whitespace. */
.discovery-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 2rem 1rem; border: 1px dashed #dfe3ea; border-radius: 16px; background: #fafbff; }
.discovery-empty-icon { font-size: 1.9rem; color: #98a2b3; }
.discovery-empty-text { margin: 0; color: #475467; font-weight: 500; max-width: 34ch; }
.discovery-empty-cta { font-weight: 600; text-decoration: none; color: var(--bs-primary); display: inline-flex; align-items: center; gap: 4px; }
.discovery-empty-cta i { transition: transform 0.15s ease; }
.discovery-empty-cta:hover i { transform: translateX(3px); }

/* ---- Reusable badges (Phase 9) — one base + a colour modifier per kind ---- */
.mk-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.45; letter-spacing: 0.01em; white-space: nowrap; }
.mk-badge-ico { font-size: 0.95em; line-height: 1; }
.mk-badge-overlay { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 2; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.16); }
.mk-badge-trending { background: #fff1e6; color: #c2410c; }
.mk-badge-featured { background: #fef3c7; color: #92400e; }
.mk-badge-new { background: #e0f2fe; color: #075985; }
.mk-badge-popular { background: #fdecec; color: #b42318; }
.mk-badge-premium { background: linear-gradient(135deg, #fde68a, #fbbf24); color: #7c4a03; }
.mk-badge-reported { background: #fdecec; color: #b42318; }
.mk-badge-sold { background: #eef1f5; color: #475467; }
.mk-badge-reserved { background: #fff7ed; color: #b45309; }

/* ---- Skeleton loading cards (Phase 9) ---- */
.discovery-skeletons { display: none; }
html.is-loading .discovery-skeletons { display: block; }
html.is-loading .discovery-real { display: none; }
.mk-skeleton { position: relative; overflow: hidden; background: #eceff4; border-radius: 8px; }
.mk-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%); background-size: 200% 100%; animation: mkShimmer 1.3s ease-in-out infinite; }
.mk-skeleton-card { flex: 0 0 auto; width: min(74vw, 236px); border-radius: 1.5rem; overflow: hidden; background: #fff; box-shadow: 0 4px 16px rgba(16, 24, 40, 0.06); }
.mk-skeleton-img { height: 200px; border-radius: 0; }
.mk-skeleton-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 10px; }
.mk-skeleton-line { height: 12px; }
.mk-skeleton-title { width: 80%; }
.mk-skeleton-price { width: 45%; height: 16px; }
.mk-skeleton-meta { width: 60%; }
.mk-skeleton-heading { width: 180px; height: 20px; margin-bottom: 12px; }

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

/* ---- Mobile tuning ---- */
@media (max-width: 575.98px) {
  .discovery-scroll > .col, .mk-skeleton-card { width: 82vw; }
  .discovery-title { font-size: 1.05rem; }
  .discovery-scroll .listing-title a { font-size: 1.02rem; }
  .discovery-scroll .listing-thumb, .discovery-scroll .listing-thumb-placeholder, .mk-skeleton-img { height: 210px; }
  .discovery-cat-tile { width: 150px; }
}

/* ---- Reduced-motion: disable hover/scroll animations ---- */
@media (prefers-reduced-motion: reduce) {
  .discovery-scroll { scroll-behavior: auto; }
  .discovery-scroll .listing-card, .discovery-scroll .listing-thumb, .discovery-scroll .mk-btn-view,
  .discovery-cat-tile, .discovery-viewall i, .discovery-empty-cta i { transition: none !important; }
  .discovery-scroll .listing-card:hover { transform: none; }
  .discovery-scroll .listing-card:hover .listing-thumb { transform: none; }
  .discovery-cat-tile:hover { transform: none; }
  .mk-skeleton::after, .discovery-scroll .listing-thumb-wrap::before { animation: none; }
  .discovery-scroll .listing-thumb.mk-fade { opacity: 1; transition: none; }
}

/* "Reported" badge (Trust & Safety) — mirrors the featured badge shape. */
.reported-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #fdecec; color: #b42318; }
.reported-badge i { font-size: 0.85em; }

/* Student "Report Listing" link on the public listing detail page. */
.iv-report-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0; border: 0; background: none; color: #98a2b3; font-size: 0.85rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.iv-report-link:hover { color: #b42318; }
.iv-report-note { margin-top: 12px; }

/* Audit-log expandable rows. */
.admin-audit-row { cursor: pointer; }
.admin-audit-caret { transition: transform 0.15s ease; color: #98a2b3; }
.admin-audit-row[aria-expanded="true"] .admin-audit-caret { transform: rotate(90deg); }
.admin-audit-detail { background: #f8f9fc; border-top: 1px solid #e4e7ec; }
.admin-audit-detail-row > td { background: #f8f9fc; }
.admin-audit-json { background: #0f172a; color: #e2e8f0; border-radius: 0.5rem; padding: 12px 14px; font-size: 12px; line-height: 1.5; max-height: 320px; overflow: auto; white-space: pre; }

/* Chat limit: dual options (watch ad / upgrade) */
.ad-rewarded-options { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; text-align: left; }
.ad-rewarded-option { padding: 14px; border: 1px solid var(--ct-outline, #c3c6d7); border-radius: 14px; background: #fff; }
.ad-rewarded-option--premium { border-color: rgba(0, 74, 198, 0.35); background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(0, 74, 198, 0.02)); }
.ad-rewarded-or { position: relative; text-align: center; }
.ad-rewarded-or span { position: relative; z-index: 1; background: #fff; padding: 0 12px; font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.ad-rewarded-or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(16, 24, 40, 0.1); }

/* Subtle upsells */
.ct-remaining-upsell { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--ct-primary, #004ac6); text-decoration: none; }
.ct-remaining-upsell:hover { text-decoration: underline; }
/* Quota row: "messages remaining" line + an always-available Watch-Ad button. */
.ct-quota { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.ct-reward-inline { margin: 0; }
.ct-reward-inline-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--ct-primary, #004ac6); border-radius: 999px; background: rgba(0, 74, 198, 0.06); color: var(--ct-primary, #004ac6); font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; }
.ct-reward-inline-btn:hover { background: rgba(0, 74, 198, 0.12); }
.ct-reward-inline-plus { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ct-reward-inline-btn { transition: none; } }
.ct-reward-inline-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ====================================================================
   Rewarded-advertisement modal (placeholder flow) — production-style UI.
   Colours: brand #2563eb, success #22c55e, surface #f8fafc.
   ==================================================================== */
.rad-dialog { max-width: 520px; }
.rad-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 40px 90px -20px rgba(15, 23, 42, 0.45);
}

/* Header */
.rad-top { position: relative; padding: 1.9rem 1.9rem 1.1rem; text-align: center; background: #fff; }
.rad-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #2563eb;
}
.rad-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); }
.rad-title { margin: 0.6rem 0 0.35rem; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: #0f172a; }
.rad-subtitle { margin: 0; font-size: 15px; line-height: 1.5; color: #64748b; }
.rad-close { position: absolute; top: 1.1rem; right: 1.1rem; margin: 0; }

/* Ad body */
.rad-body { padding: 1.4rem 1.9rem 0; }
.rad-ad {
  position: relative;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eef2f7;
  padding: 1.25rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

/* Loading skeleton shimmer */
.rad-skeleton { text-align: center; }
.rad-sk { position: relative; overflow: hidden; background: #e9eef5; border-radius: 8px; }
.rad-sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: radShimmer 1.15s infinite;
}
.rad-sk-badge { width: 82px; height: 18px; margin-bottom: 14px; }
.rad-sk-banner { height: 132px; margin-bottom: 16px; border-radius: 12px; }
.rad-sk-line { height: 14px; margin: 0 auto 11px; }
.rad-sk-btn { width: 122px; height: 38px; margin: 10px auto 0; border-radius: 999px; }
.rad-loading-text { margin: 1rem 0 0; font-size: 0.85rem; font-weight: 500; color: #94a3b8; }

/* Simulated advertisement creative */
.rad-ad-live { text-align: center; animation: radFadeIn 0.4s ease both; }
.rad-ad-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 0.24rem 0.55rem; border-radius: 6px;
  background: #fef3c7; color: #b45309;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.rad-ad-banner {
  position: relative; overflow: hidden;
  height: 134px; margin-bottom: 1rem; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
  color: rgba(255, 255, 255, 0.95); font-size: 2.7rem;
  animation: radBannerGlow 2.8s ease-in-out infinite;
}
.rad-ad-banner::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.22), transparent 42%),
              radial-gradient(circle at 14% 88%, rgba(255, 255, 255, 0.14), transparent 38%);
}
.rad-ad-illus { position: relative; z-index: 1; }
.rad-ad-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }

/* Video creative (rewarded). Full width, aspect ratio preserved, capped height. */
.rad-ad-banner-video { height: auto; min-height: 134px; padding: 0; background: #0b1220; }
.rad-ad-video {
  position: relative; z-index: 1; display: block;
  width: 100%; height: auto; max-height: 300px;
  object-fit: contain; background: #0b1220;
}
.rad-video-spinner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.92);
}
.rad-video-error {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 1rem; text-align: center;
  background: rgba(11, 18, 32, 0.92); color: #fca5a5; font-size: 0.85rem;
}
.rad-video-error i { font-size: 1.6rem; }
.rad-ad-shine {
  position: absolute; top: 0; bottom: 0; width: 40%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg); animation: radBannerShine 3.4s ease-in-out infinite;
}
.rad-ad-brand { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.rad-ad-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #eff6ff; color: #2563eb; font-size: 0.85rem; }
.rad-ad-brandname { font-size: 0.8rem; font-weight: 700; color: #475569; }
.rad-ad-headline { margin: 0 0 0.25rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; color: #0f172a; }
.rad-ad-copy { margin: 0 0 0.95rem; font-size: 0.9rem; line-height: 1.4; color: #64748b; }
.rad-ad-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.15rem; border-radius: 999px;
  background: #2563eb; color: #fff; font-weight: 700; font-size: 0.85rem;
  box-shadow: 0 8px 18px -6px rgba(37, 99, 235, 0.6);
  /* Smooth grey→colour / faded→solid transition should the state ever toggle. */
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}
/* Locked during playback: clearly not clickable until the ad completes. */
.rad-ad-cta.is-locked {
  background: #e2e8f0; color: #64748b; box-shadow: none; cursor: not-allowed; opacity: 0.7;
}
.rad-ad-cta-hint {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin: 0.5rem 0 0; font-size: 0.72rem; color: #94a3b8;
}

/* Progress + live countdown */
.rad-progress-wrap { padding: 1.35rem 1.9rem 0.25rem; }
.rad-watching { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 0 0 0.3rem; font-size: 0.85rem; font-weight: 600; color: #475569; }
.rad-watching-dot { width: 8px; height: 8px; border-radius: 50%; background: #2563eb; animation: radBlink 1s ease-in-out infinite; }
.rad-watching-hint { margin: 0 0 0.85rem; text-align: center; font-size: 0.78rem; color: #94a3b8; }
.rad-progress { height: 8px; border-radius: 999px; background: #e3ecfb; overflow: hidden; }
.rad-progress-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2563eb, #1d4ed8); }
.rad-remaining { margin: 0.65rem 0 0; text-align: center; font-size: 14px; color: #64748b; }
.rad-countdown { font-weight: 800; color: #2563eb; }

/* Circular animated countdown ring */
.rad-ring-wrap { position: relative; width: 120px; height: 120px; margin: 0 auto 0.75rem; }
.rad-ring { width: 100%; height: 100%; display: block; }
.rad-ring-track { stroke: #e3ecfb; stroke-width: 8; }
.rad-ring-fill {
  stroke: #2563eb; stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear;
}
.rad-ring-num {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rad-ring-num .rad-countdown { font-size: 2rem; line-height: 1; }
.rad-ring-unit { margin-top: 0.15rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; }
.rad-progress-wrap .rad-progress { max-width: 240px; margin: 0 auto; }

/* Completion success animation */
.rad-done { padding: 1.4rem 1.9rem 0.25rem; text-align: center; animation: radFadeScale 0.4s ease both; }
.rad-done-check { display: inline-block; width: 64px; height: 64px; }
.rad-check-svg { width: 64px; height: 64px; }
.rad-check-circle { stroke: #22c55e; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: radDraw 0.5s ease forwards; }
.rad-check-mark { stroke: #22c55e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: radDraw 0.35s 0.45s ease forwards; }
.rad-done-title { margin: 0.8rem 0 0.25rem; font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.rad-done-text { margin: 0; font-size: 0.9rem; color: #64748b; }
.rad-ad-visit {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.85rem; padding: 0.5rem 1.1rem; max-width: 100%;
  border-radius: 999px; border: 1px solid #dbe6ff; background: #eff4ff;
  color: #2563eb; font-weight: 700; font-size: 0.85rem; text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.rad-ad-visit:hover { background: #dbe6ff; color: #1d4ed8; transform: translateY(-1px); }
.rad-ad-visit i { font-size: 0.8rem; }
/* Unlock: fade in from grey/small with a subtle pop when the CTA becomes active. */
.rad-ad-visit { animation: radCtaUnlock 280ms ease-out both; }
@keyframes radCtaUnlock {
  0% { opacity: 0; transform: scale(0.92); background: #e2e8f0; }
  60% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
/* Popup-blocker hint (shown only when a repeat click is blocked). */
.rad-popup-blocked {
  margin: 0.75rem auto 0; max-width: 22rem;
  font-size: 0.76rem; line-height: 1.35; color: #b45309;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.6rem; padding: 0.5rem 0.7rem;
}
@media (prefers-reduced-motion: reduce) {
  .rad-ad-visit { transition: none; animation: none; }
}

/* Reward card */
.rad-reward {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 1.35rem 1.9rem 0; padding: 1rem 1.15rem;
  border-radius: 14px; background: #eef4ff; border: 1px solid #dbe6ff;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.rad-reward.is-ready { background: #ecfdf3; border-color: #bbf7d0; }
.rad-reward-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 12px; background: #fff; font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.rad-reward.is-ready .rad-reward-ico { color: #16a34a; }
.rad-reward-body { min-width: 0; }
.rad-reward-title { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #2563eb; }
.rad-reward.is-ready .rad-reward-title { color: #16a34a; }
.rad-reward-amount { margin: 0.1rem 0; font-size: 16px; font-weight: 800; color: #0f172a; }
.rad-reward-note { margin: 0; font-size: 0.8rem; color: #64748b; }

/* Footer / Continue button */
.rad-footer { padding: 1.35rem 1.9rem 1.9rem; }
.rad-claim-form { width: 100%; margin: 0; }
.rad-continue {
  width: 100%; padding: 0.9rem 1rem; border: 0; border-radius: 12px;
  font-size: 1rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 12px 26px -8px rgba(37, 99, 235, 0.5);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.rad-continue:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(37, 99, 235, 0.62); }
.rad-continue:active:not(:disabled) { transform: translateY(0); }
.rad-continue:disabled { background: #e2e8f0; color: #94a3b8; box-shadow: none; cursor: not-allowed; }

/* Animations */
@keyframes radShimmer { 100% { transform: translateX(100%); } }
@keyframes radFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes radFadeScale { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes radDraw { to { stroke-dashoffset: 0; } }
@keyframes radBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes radBannerGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
@keyframes radBannerShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }

/* Responsive */
@media (max-width: 768px) { .rad-dialog { max-width: 460px; } }
@media (max-width: 575.98px) {
  .rad-dialog { max-width: none; margin: 0.6rem; }
  .rad-top, .rad-body, .rad-progress-wrap, .rad-done { padding-left: 1.25rem; padding-right: 1.25rem; }
  .rad-reward { margin-left: 1.25rem; margin-right: 1.25rem; }
  .rad-footer { padding: 1.35rem 1.25rem 1.5rem; }
}

/* Reduced motion: keep the timer, drop the decorative motion. */
@media (prefers-reduced-motion: reduce) {
  .rad-ad-live, .rad-done, .rad-watching-dot, .rad-ad-banner, .rad-ad-shine, .rad-sk::after { animation: none; }
  .rad-check-circle, .rad-check-mark { animation: none; stroke-dashoffset: 0; }
  .rad-ad-shine { display: none; }
  .rad-continue { transition: none; }
  .rad-ring-fill { transition: none; }
}

/* Smooth modal close: Continue success flash + fade/scale before the redirect. */
.rad-continue.is-success { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 12px 26px -8px rgba(34, 197, 94, 0.55); }
.rad-modal.rad-closing .rad-content { animation: radClose 0.42s ease forwards; }
@keyframes radClose { to { opacity: 0; transform: scale(0.94); } }

/* ---- Reward extras (counter, history, cooldown, celebration) -------- */
/* Animated message counter */
[data-remaining-count].is-counting { color: #22c55e; }

/* Watch-Ad slot / cooldown chip */
.ct-reward-slot { display: inline-flex; align-items: center; }
.ct-cooldown {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: #f1f5f9; color: #64748b; font-size: 12px; font-weight: 600;
}
.ct-cooldown i { color: #94a3b8; }
.ct-cooldown strong { color: #2563eb; font-variant-numeric: tabular-nums; }

/* Temporary reward success banner (slides/fades in, holds ~4.5s, slides away).
   `hidden` by default and re-hidden after it plays, so it only occupies layout
   space transiently — the chat history is never permanently reduced. */
.ct-reward-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 0; padding: 10px 14px;
  border-radius: 14px; background: #ecfdf3; border: 1px solid #bbf7d0;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ct-reward-banner.is-show { opacity: 1; transform: translateY(0); }
.ct-reward-banner.is-hide { opacity: 0; transform: translateY(-8px); }
.ct-reward-banner-emoji {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 11px;
  background: #fff; font-size: 1.2rem; line-height: 1;
}
.ct-reward-banner-body { min-width: 0; flex: 1 1 auto; }
.ct-reward-banner-title { margin: 0; font-size: 0.95rem; font-weight: 800; color: #14532d; }
.ct-reward-banner-text { margin: 0.05rem 0 0; font-size: 0.78rem; color: #16794c; }

/* Celebration overlay (fades in, holds ~2s, shrinks away) */
.ct-reward-celebrate {
  position: fixed; inset: 0; z-index: 1085;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
.ct-reward-celebrate.is-show { opacity: 1; }
.ct-reward-celebrate.is-hide { opacity: 0; }
.ct-reward-celebrate-card {
  text-align: center; padding: 2rem 2.5rem;
  background: #fff; border-radius: 20px;
  box-shadow: 0 30px 70px -18px rgba(15, 23, 42, 0.4);
  transform: scale(0.85); transition: transform 0.35s cubic-bezier(0.18, 1.2, 0.4, 1);
}
.ct-reward-celebrate.is-show .ct-reward-celebrate-card { transform: scale(1); }
.ct-reward-celebrate.is-hide .ct-reward-celebrate-card { transform: scale(0.6); }
.ct-reward-celebrate-emoji { display: block; font-size: 3rem; line-height: 1; animation: radPop 0.5s ease; }
.ct-reward-celebrate-title { margin: 0.75rem 0 0.25rem; font-size: 1.3rem; font-weight: 800; color: #0f172a; }
.ct-reward-celebrate-text { margin: 0; font-size: 0.95rem; color: #64748b; }
@keyframes radPop { 0% { transform: scale(0.2); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

/* Floating "+N Messages" reward badge (Duolingo-style rise + fade) */
.ct-reward-badge {
  position: fixed; left: 50%; bottom: 30%; z-index: 1086;
  transform: translate(-50%, 20px);
  padding: 0.55rem 1.15rem; border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
  font-weight: 800; font-size: 1rem;
  box-shadow: 0 14px 30px -8px rgba(34, 197, 94, 0.6);
  opacity: 0; pointer-events: none;
}
.ct-reward-badge.is-fly { animation: radBadgeFly 1.6s ease forwards; }
@keyframes radBadgeFly {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(0.8); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  70% { opacity: 1; transform: translate(-50%, -60px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -110px) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .ct-reward-celebrate-emoji, .ad-rewarded-illus-spark { animation: none; }
  .rad-modal.rad-closing .rad-content { animation: none; opacity: 0; }
  .ct-reward-badge.is-fly { animation: none; opacity: 0; }
  .ct-reward-celebrate, .ct-reward-celebrate-card { transition: opacity 0.2s ease; }
  .ct-reward-banner { transition: opacity 0.2s ease; transform: none; }
  .ct-reward-banner.is-show, .ct-reward-banner.is-hide { transform: none; }
}

.ad-premium-upsell { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 11px; font-weight: 600; color: #64748b; text-decoration: none; }
.ad-premium-upsell i { color: #d4a017; }
.ad-premium-upsell:hover { color: #004ac6; }

/* Admin request detail */
.premium-detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.premium-detail-meta dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; margin-bottom: 2px; }
.premium-detail-meta dd { font-size: 15px; color: #131b2e; margin: 0; word-break: break-word; }
@media (max-width: 575.98px) { .premium-detail-meta { grid-template-columns: 1fr; } }

/* --- Email verification (OTP) page --- */
.verify-email-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 28px;
}
.verify-code-input {
  letter-spacing: 0.6em; font-weight: 700; font-size: 1.5rem; padding-left: 0.6em;
}
.verify-code-input::placeholder { letter-spacing: 0.4em; color: #cbd5e1; }

/* --- Verification success page --- */
.verify-success-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-size: 36px;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.35);
}

/* --- Authentication timeline (Profile > Security) --- */
.auth-timeline { display: flex; flex-direction: column; gap: 4px; }
.auth-timeline-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.auth-timeline-item:last-child { border-bottom: 0; }
.auth-timeline-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; flex: 0 0 40px; font-size: 18px; }
.auth-timeline-ico--success { background: #dcfce7; color: #059669; }
.auth-timeline-ico--warning { background: #fef3c7; color: #b45309; }
.auth-timeline-ico--primary { background: #e0e7ff; color: #4f46e5; }
.auth-timeline-ico--secondary { background: #f1f5f9; color: #475569; }
.auth-timeline-ico--info { background: #cffafe; color: #0e7490; }
.auth-timeline-ico--danger { background: #fee2e2; color: #dc2626; }

/* --- Security dashboard --- */
.security-score { display: flex; align-items: baseline; justify-content: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.security-score-value { font-size: 3rem; font-weight: 800; line-height: 1; }
.security-score-max { color: #6b7280; font-weight: 600; }
.security-score--success .security-score-value { color: #16a34a; }
.security-score--warning .security-score-value { color: #d97706; }
.security-score--danger .security-score-value { color: #dc2626; }
.pw-strength-bar { height: 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin-bottom: 0.35rem; }
.pw-strength-bar span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.25s ease, background 0.25s ease; }
.pw-reqs li { display: flex; align-items: center; gap: 0.45rem; color: #6b7280; margin-bottom: 0.2rem; transition: color 0.2s ease; }
.pw-reqs li i { color: #cbd5e1; }
.pw-reqs li.is-met, .pw-reqs li.is-met i { color: #16a34a; }
.security-table td { border-color: rgba(17, 24, 39, 0.06); padding-top: 0.6rem; padding-bottom: 0.6rem; }
.security-table tr:first-child td { border-top: 0; }

.auth-timeline-body { display: flex; flex-direction: column; }
.auth-timeline-label { font-weight: 600; color: #131b2e; font-size: 14px; }
.auth-timeline-time { font-size: 13px; color: #64748b; }

/* --- OTP 6-box input --- */
.otp-hidden-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.otp-input-group { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; }
.otp-box {
  width: 48px; height: 56px; text-align: center; font-size: 1.5rem; font-weight: 700;
  border: 1.5px solid #d7dbe7; border-radius: 12px; background: #fff; color: #131b2e;
  transition: border-color .15s, box-shadow .15s; -moz-appearance: textfield;
}
.otp-box:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.2); }
.otp-box::-webkit-outer-spin-button, .otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 400px) { .otp-box { width: 40px; height: 50px; font-size: 1.25rem; } .otp-input-group { gap: 6px; } }

/* ---- Activity Page redesign (modern notification-center cards) ---- */
.activity-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.activity-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600;
  color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 0.35rem 0.85rem;
  text-decoration: none; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.activity-pill:hover { background: #f8fafc; color: #4f46e5; border-color: #c7d2fe; }
.activity-pill.is-active { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.activity-pill--toggle.is-active { background: #0f172a; border-color: #0f172a; }
.activity-search { position: relative; }
.activity-search .bi { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.85rem; pointer-events: none; }
.activity-search input { padding-left: 2rem; border-radius: 999px; min-width: 210px; }

.activity-section { margin-bottom: 1.5rem; }
.activity-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; margin: 0 0 0.65rem; }
.activity-cards { display: flex; flex-direction: column; gap: 0.6rem; }

.activity-card { position: relative; display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.1rem;
  background: #fff; border: 1px solid #eef0f6; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.activity-card.is-clickable { cursor: pointer; }
.activity-card.is-clickable:hover { box-shadow: 0 8px 24px rgba(15,23,42,.10); transform: translateY(-1px); border-color: #e2e8f0; }
.activity-card:focus-within { box-shadow: 0 0 0 3px rgba(99,102,241,.25); border-color: #c7d2fe; outline: none; }
.activity-card.is-unread { background: #f7f8ff; border-color: #e5e7ff; }

.activity-card-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; }
.activity-card.tone-primary .activity-card-ico { background: #eef2ff; color: #4f46e5; }
.activity-card.tone-success .activity-card-ico { background: #dcfce7; color: #059669; }
.activity-card.tone-danger  .activity-card-ico { background: #fee2e2; color: #dc2626; }
.activity-card.tone-warning .activity-card-ico { background: #fef3c7; color: #b45309; }
.activity-card.tone-info    .activity-card-ico { background: #e0f2fe; color: #0284c7; }
.activity-card.tone-muted   .activity-card-ico { background: #f1f5f9; color: #64748b; }

.activity-card-main { flex: 1 1 auto; min-width: 0; }
.activity-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.activity-card-title { font-size: 0.95rem; font-weight: 700; color: #131b2e; }
.activity-card-count { font-size: 0.72rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 0 0.4rem; }
.activity-card-msg { font-size: 0.85rem; color: #4a5169; margin-top: 0.15rem; overflow-wrap: anywhere; }
.activity-card-time { display: block; font-size: 0.75rem; color: #94a3b8; margin-top: 0.35rem; }

.activity-badge-new { background: #4f46e5; color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; padding: 0.15rem 0.45rem; border-radius: 999px; }
.activity-status { font-size: 0.66rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.activity-status--success { background: #dcfce7; color: #059669; }
.activity-status--danger  { background: #fee2e2; color: #dc2626; }
.activity-status--warning { background: #fef3c7; color: #b45309; }
.activity-status--info    { background: #e0f2fe; color: #0284c7; }
.activity-status--primary { background: #eef2ff; color: #4f46e5; }

.activity-card-markread { position: relative; z-index: 2; flex: 0 0 auto; }
.activity-markread-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; color: #94a3b8;
  display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.activity-markread-btn:hover { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }

@media (max-width: 575.98px) {
  .activity-header-actions { width: 100%; }
  .activity-toolbar { flex-direction: column; align-items: stretch; }
  .activity-filters { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; }
  .activity-search, .activity-search input { width: 100%; }
  .activity-card { padding: 0.85rem 0.9rem; }
  .activity-card-ico { width: 38px; height: 38px; font-size: 1rem; }
}

/* ---- Verification timeline (admin detail + student history) ---- */
.verify-timeline { position: relative; margin: 0; padding: 0; }
.verify-timeline-item { position: relative; display: flex; gap: 0.9rem; padding: 0 0 1.1rem 0; }
.verify-timeline-item:last-child { padding-bottom: 0; }
.verify-timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -0.2rem; width: 2px; background: #e6ecf5; }
.verify-timeline-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; background: #94a3b8; box-shadow: 0 0 0 3px #fff; z-index: 1; }
.verify-timeline-dot--success { background: #16a34a; }
.verify-timeline-dot--danger  { background: #dc2626; }
.verify-timeline-dot--warning { background: #d97706; }
.verify-timeline-dot--info    { background: #0284c7; }
.verify-timeline-dot--secondary { background: #94a3b8; }
.verify-timeline-body { flex: 1 1 auto; min-width: 0; }

/* ---- Active university highlight (University Analytics tables) ---- */
tr.is-active-university > td { background: #eff6ff; }
tr.is-active-university > td:first-child { border-left: 3px solid #2563eb; font-weight: 700; }

/* ---- Payments module (admin dashboard + user history + receipt) ---- */
.admin-metric-sub { margin-top: 2px; }

/* Status badges — high-contrast, colour + text (never colour alone). */
.pay-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 700;
  line-height: 1.4; border: 1px solid transparent; white-space: nowrap;
}
.pay-badge--captured  { background: #dcfce7; color: #166534; border-color: #86efac; }
.pay-badge--authorized{ background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
.pay-badge--created   { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.pay-badge--failed    { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.pay-badge--refunded  { background: #e5e7eb; color: #374151; border-color: #d1d5db; }

/* Copy-to-clipboard rows in the drawer. */
.pay-copy { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.pay-copy code { font-size: 12px; }
.pay-copy-btn {
  flex: 0 0 auto; border: 1px solid var(--iv-outline, #c3c6d7); background: #fff;
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer; color: #475467;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.pay-copy-btn:hover { background: #f2f3ff; color: #131b2e; }
.pay-copy-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Derived lifecycle timeline (reuses .ad-timeline container). */
.ad-timeline-item {
  position: relative; padding: 0 0 14px 22px; list-style: none;
  color: #64748b; font-size: 13px;
}
.ad-timeline-item::before {
  content: ""; position: absolute; left: 4px; top: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid #cbd5e1;
}
.ad-timeline-item:not(:last-child)::after {
  content: ""; position: absolute; left: 8px; top: 15px; bottom: 0;
  width: 2px; background: #e2e8f0;
}
.ad-timeline-item.is-done { color: #0f172a; }
.ad-timeline-item.is-done::before { background: #16a34a; border-color: #16a34a; }
.ad-timeline-label { font-weight: 600; display: block; }
.ad-timeline-at { font-size: 12px; color: #94a3b8; }

/* Polished empty states. */
.admin-empty { color: #475467; }
.admin-empty-ico { font-size: 2.6rem; color: #cbd5e1; }

/* User payment-history + receipt cards. */
.pay-history-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px; border: 1px solid var(--iv-outline, #e2e8f0); border-radius: 14px;
  background: #fff; margin-bottom: 12px; flex-wrap: wrap;
}
.pay-history-amount { font-weight: 700; font-size: 1.1rem; color: #0f172a; }
.pay-receipt {
  max-width: 640px; margin: 24px auto; background: #fff; border-radius: 16px;
  border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05); padding: 32px;
}
.pay-receipt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 2px solid #0f172a; padding-bottom: 16px; margin-bottom: 20px; }
.pay-receipt-rows { width: 100%; border-collapse: collapse; }
.pay-receipt-rows th, .pay-receipt-rows td { text-align: left; padding: 8px 0; vertical-align: top; }
.pay-receipt-rows th { color: #64748b; font-weight: 600; width: 45%; }
@media print {
  .app-sidebar, .app-topbar, .sidebar-footer, .no-print { display: none !important; }
  .pay-receipt { box-shadow: none; border: none; margin: 0; }
  body, .app-body, .app-content { background: #fff !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pay-copy-btn { transition: none; }
}