/* =========================================================================
   SellShare — Polish Layer
   Loaded after app.css. Adds premium effects: gradients, glassmorphism,
   micro-animations, refined motion, and finer typographic touches.
   ========================================================================= */

/* ---------- Refined token additions ---------- */
:root {
  /* Subtle layered gradients used across the UI */
  --grad-emerald:   linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%);
  --grad-emerald-soft: linear-gradient(135deg, #ECFDF5 0%, #F0FDFA 100%);
  --grad-orange:    linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  --grad-sunset:    linear-gradient(135deg, #F97316 0%, #EF4444 100%);
  --grad-aurora:    linear-gradient(135deg, #10B981 0%, #06B6D4 50%, #6366F1 100%);
  --grad-mesh:
      radial-gradient(at 27% 37%, hsla(160, 84%, 39%, 0.18) 0px, transparent 50%),
      radial-gradient(at 97% 21%, hsla(24,  95%, 53%, 0.10) 0px, transparent 50%),
      radial-gradient(at 52% 99%, hsla(189, 94%, 43%, 0.12) 0px, transparent 50%),
      radial-gradient(at 10% 80%, hsla(160, 84%, 39%, 0.15) 0px, transparent 50%);

  /* Ring focus styles */
  --ring-emerald: 0 0 0 4px rgba(16, 185, 129, 0.18);
  --ring-orange:  0 0 0 4px rgba(249, 115, 22, 0.18);

  /* Soft inner glow used by glass panels */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 8px 32px rgba(2, 44, 34, 0.10);

  /* Refined typography scale */
  --display:    clamp(36px, 4.8vw, 56px);
  --display-sm: clamp(28px, 3.2vw, 38px);
}

/* ---------- Smoother base ---------- */
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-feature-settings: "ss01" on, "cv11" on, "cv02" on;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(16,185,129,0.06), transparent 60%),
    radial-gradient(900px  500px at -10% 110%, rgba(249,115,22,0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: rgba(16,185,129,.22); color: var(--text); }

/* ---------- Page entry animation ---------- */
main { animation: page-in .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger cards on grids */
.listing-grid > * {
  animation: card-in .42s cubic-bezier(.2,.7,.2,1) both;
}
.listing-grid > *:nth-child(1)  { animation-delay: .00s; }
.listing-grid > *:nth-child(2)  { animation-delay: .04s; }
.listing-grid > *:nth-child(3)  { animation-delay: .08s; }
.listing-grid > *:nth-child(4)  { animation-delay: .12s; }
.listing-grid > *:nth-child(5)  { animation-delay: .16s; }
.listing-grid > *:nth-child(6)  { animation-delay: .20s; }
.listing-grid > *:nth-child(7)  { animation-delay: .22s; }
.listing-grid > *:nth-child(8)  { animation-delay: .24s; }
.listing-grid > *:nth-child(n+9){ animation-delay: .26s; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  main, .listing-grid > * { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Navbar: subtle glass on scroll ---------- */
.site-nav {
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(229, 231, 235, 0.7);
  transition: background .2s, box-shadow .25s, border-bottom-color .2s;
}
.site-nav:hover { background: rgba(255,255,255,0.92); }
.nav-brand .brand-logo {
  box-shadow:
    0 6px 14px rgba(16,185,129,.32),
    inset 0 1px 0 rgba(255,255,255,.35);
  background: var(--grad-emerald);
  position: relative;
  overflow: hidden;
}
.nav-brand .brand-logo::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 50%);
}
.nav-brand:hover .brand-logo { transform: rotate(-3deg) scale(1.05); transition: transform .25s cubic-bezier(.4,1.4,.5,1); }

.nav-search input { transition: background .2s, border-color .2s, box-shadow .2s, transform .15s; }
.nav-search input:focus { box-shadow: var(--ring-emerald); }

.nav-cta {
  background: var(--grad-emerald) !important;
  box-shadow: 0 4px 14px rgba(16,185,129,.32), inset 0 1px 0 rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.nav-cta:hover::before { transform: translateX(100%); }
.nav-cta:hover {
  box-shadow: 0 6px 22px rgba(16,185,129,.42), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-1px);
}

.nav-avatar {
  background: var(--grad-emerald);
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(16,185,129,.32), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .2s, box-shadow .2s;
}
.nav-avatar:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(16,185,129,.42), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---------- HERO — richer mesh, animated accents ---------- */
.hero {
  background:
    radial-gradient(1000px 600px at 85% 0%,  rgba(249,115,22,0.22), transparent 55%),
    radial-gradient(800px  500px at 5%  100%, rgba(52,211,153,0.30), transparent 55%),
    radial-gradient(700px  400px at 50% 50%, rgba(6,182,212,0.16),  transparent 60%),
    linear-gradient(135deg, #052e26 0%, #064E3B 35%, #047857 75%, #059669 100%);
  position: relative;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 22% 30%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(1px 1px at 42% 60%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 25%, rgba(255,255,255,.45), transparent 50%),
    radial-gradient(1px 1px at 88% 70%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,.35), transparent 50%);
  background-size: 100% 100%;
  pointer-events: none;
  animation: stars 8s ease-in-out infinite alternate;
}
@keyframes stars {
  from { opacity: .35; }
  to   { opacity: .85; }
}
.hero::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  right: -200px; top: -250px;
  background: radial-gradient(circle, rgba(249,115,22,.25), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  animation: float 12s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-30px, 20px); }
}

.hero h1 {
  font-size: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.hero h1 .accent {
  background: linear-gradient(135deg, #FED7AA 0%, #FDBA74 50%, #FB923C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}
.hero p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  opacity: .94;
}

.hero-search {
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(10px);
  box-shadow:
    0 20px 60px -10px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.15) inset;
  transition: transform .2s, box-shadow .25s;
}
.hero-search:focus-within {
  transform: translateY(-1px);
  box-shadow:
    0 24px 70px -10px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.2) inset,
    0 0 0 6px rgba(255,255,255,.16);
}
.hero-search button {
  background: var(--grad-sunset);
  box-shadow: 0 4px 14px rgba(249,115,22,.36), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .15s, box-shadow .2s;
}
.hero-search button:hover {
  background: linear-gradient(135deg, #EA580C 0%, #DC2626 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249,115,22,.5);
}
.hero-search button:active { transform: translateY(0); }

.hero-stats { margin-top: 36px; }
.hero-stat strong {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FFFFFF 0%, #D1FAE5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Section headers — sharper rhythm ---------- */
.section-header h2 {
  font-size: 24px;
  letter-spacing: -0.025em;
  position: relative;
  display: inline-block;
}
.section-header .section-link {
  color: var(--emerald-dark);
  background: var(--emerald-bg);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  transition: gap .2s, background .15s, transform .15s;
}
.section-header .section-link:hover {
  background: var(--emerald-border);
  transform: translateX(2px);
}

/* ---------- Category chips — glass + tilt ---------- */
.category-strip { padding-bottom: 18px; }
.category-chip {
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-color: rgba(229,231,235,.7);
  transition:
    transform .25s cubic-bezier(.2,.7,.2,1),
    box-shadow .25s,
    border-color .2s,
    background .2s;
  position: relative;
  overflow: hidden;
}
.category-chip::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(16,185,129,.06) 100%);
  opacity: 0;
  transition: opacity .25s;
}
.category-chip:hover::before { opacity: 1; }
.category-chip:hover {
  transform: translateY(-4px) rotate(-0.6deg);
  box-shadow:
    0 12px 30px -8px rgba(16,185,129,.28),
    0 0 0 1px var(--emerald-border);
  background: #fff;
}
.category-chip .chip-icon {
  transition: transform .3s cubic-bezier(.4,1.4,.5,1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.category-chip:hover .chip-icon { transform: scale(1.12) rotate(-6deg); }

/* ---------- Listing cards — refined depth & hover ---------- */
.listing-card {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(229,231,235,.7);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition:
    transform .25s cubic-bezier(.2,.7,.2,1),
    box-shadow .25s,
    border-color .2s;
  position: relative;
}
.listing-card::after {
  /* Outer glow ring on hover */
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(16,185,129,0);
  transition: box-shadow .3s;
}
.listing-card:hover {
  transform: translateY(-5px);
  border-color: rgba(167,243,208,.9);
  box-shadow:
    0 18px 36px -12px rgba(16,185,129,.18),
    0 4px 12px -4px rgba(0,0,0,.05);
}
.listing-card:hover::after {
  box-shadow: 0 0 0 4px rgba(16,185,129,.08);
}

.listing-thumb {
  background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
}
.listing-thumb img { transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s; }
.listing-card:hover .listing-thumb img { transform: scale(1.07); filter: saturate(1.05); }

.listing-fav {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  transition: transform .15s cubic-bezier(.4,1.6,.5,1), color .15s, background .15s;
}
.listing-fav:hover { transform: scale(1.15); background: #fff; }
.listing-fav:active { transform: scale(.95); }
.listing-fav.active {
  background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 100%);
  animation: pop .3s cubic-bezier(.4,1.6,.5,1);
}
@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.badge-tag {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}
.badge-tag.featured {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  box-shadow: 0 2px 10px rgba(245,158,11,.45);
}
.badge-tag.donate  { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); }
.badge-tag.service { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); }
.badge-tag.sell    { background: linear-gradient(135deg, #10B981 0%, #047857 100%); }

.listing-price {
  font-size: 18px;
  letter-spacing: -0.02em;
}
.price-free {
  background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ---------- Buttons — sharper, more tactile ---------- */
.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
  transition:
    transform .12s,
    box-shadow .2s,
    background .15s,
    border-color .15s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--grad-emerald);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(16,185,129,.32), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary::before {
  /* Shimmer sweep on hover */
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transition: left .5s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 6px 18px rgba(16,185,129,.42), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.btn-primary:hover::before { left: 100%; }

.btn-orange {
  background: var(--grad-orange);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(249,115,22,.32), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-orange:hover {
  box-shadow: 0 6px 18px rgba(249,115,22,.42), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-1px);
}

.btn-outline:hover {
  border-color: var(--emerald);
  color: var(--emerald-dark);
  background: var(--emerald-bg);
  box-shadow: 0 2px 8px rgba(16,185,129,.12);
}

.btn-lg { font-size: 15px; padding: 14px 26px; }

/* ---------- Forms — refined focus state ---------- */
.form-control, .form-select, textarea.form-control {
  border-radius: 10px;
  background: var(--surface);
  border-color: var(--border);
  transition: border-color .15s, box-shadow .2s, transform .1s;
}
.form-control:focus, .form-select:focus, textarea.form-control:focus {
  border-color: var(--emerald);
  box-shadow: var(--ring-emerald);
}
.form-control:hover:not(:focus), .form-select:hover:not(:focus) {
  border-color: var(--border-strong);
}

/* ---------- Auth shell — gradient mesh background, glass card ---------- */
.auth-shell {
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(16,185,129,.16), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(249,115,22,.12), transparent 60%),
    var(--grad-mesh),
    linear-gradient(135deg, #ECFDF5 0%, #F0FDFA 50%, #FEF3C7 100%);
  position: relative;
  overflow: hidden;
}
.auth-shell::before {
  /* Animated orb in the background */
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  top: -200px; right: -150px;
  background: radial-gradient(circle, rgba(16,185,129,.22), transparent 60%);
  border-radius: 50%;
  animation: orb-drift 14s ease-in-out infinite;
  pointer-events: none;
}
.auth-shell::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  bottom: -150px; left: -100px;
  background: radial-gradient(circle, rgba(249,115,22,.18), transparent 60%);
  border-radius: 50%;
  animation: orb-drift 16s ease-in-out infinite reverse;
  pointer-events: none;
}
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.1); }
}

.auth-card {
  /*background: var(--glass-bg);*/
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 30px 80px -20px rgba(2,44,34,.25),
    0 0 0 1px rgba(255,255,255,.6) inset,
    0 1px 0 rgba(255,255,255,.8) inset;
  position: relative;
  z-index: 1;
}
.auth-card h1 {
  font-size: 30px;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #064E3B 0%, #047857 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Panels — softer borders, hover lift ---------- */
.panel {
  border-color: rgba(229,231,235,.7);
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
  transition: box-shadow .2s, border-color .2s;
}
.panel:hover { box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.panel-header {
  background: linear-gradient(180deg, #FAFBFC, var(--surface));
}

/* ---------- Pills — slightly tinted gradients ---------- */
.pill {
  letter-spacing: 0.5px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
.pill-active   { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); }
.pill-sold     { background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%); }
.pill-pending  { background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); }
.pill-featured { background: linear-gradient(135deg, #FEF3C7 0%, #FCD34D 100%); }
.pill-donate   { background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); }
.pill-service  { background: linear-gradient(135deg, #FFF7ED 0%, #FED7AA 100%); }

/* ---------- Dashboard sidebar — refined active state ---------- */
.dash-sidebar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-color: rgba(229,231,235,.7);
  box-shadow: 0 4px 14px rgba(0,0,0,.03);
}
.dash-sidebar a {
  position: relative;
  transition: background .15s, transform .15s, color .15s;
}
.dash-sidebar a:hover { transform: translateX(2px); }
.dash-sidebar a.active {
  background: var(--grad-emerald-soft);
  color: var(--emerald-dark);
  box-shadow: inset 0 0 0 1px rgba(167,243,208,.6);
}
.dash-sidebar a.active::before {
  content: '';
  position: absolute;
  left: -14px; top: 50%;
  width: 3px; height: 22px;
  background: var(--grad-emerald);
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
}

/* Stat tiles in dashboard */
.dash-layout main .panel:has(> .panel-body > div[style*="font-size:28px"]) {
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(16,185,129,.05), transparent 60%),
    var(--surface);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.dash-layout main .panel:has(> .panel-body > div[style*="font-size:28px"]):hover {
  transform: translateY(-2px);
  border-color: var(--emerald-border);
  box-shadow: 0 10px 24px -8px rgba(16,185,129,.15);
}

/* ---------- Browse filter sidebar — sticky glass ---------- */
.filters-sidebar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-color: rgba(229,231,235,.7);
  box-shadow: 0 4px 14px rgba(0,0,0,.03);
}
.filters-sidebar label {
  transition: color .15s;
  border-radius: 6px;
  padding-left: 4px; padding-right: 4px;
}
.filters-sidebar label:hover { color: var(--emerald-dark); background: rgba(16,185,129,.04); }

/* ---------- Toast — refined slide-in with bounce ---------- */
.toast {
  border-radius: 12px;
  padding: 14px 20px;
  font-weight: 500;
  box-shadow:
    0 20px 40px -10px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.08) inset;
  animation: toast-bounce .35s cubic-bezier(.4,1.4,.5,1);
}
.toast.success {
  background: linear-gradient(135deg, #10B981 0%, #047857 100%);
  box-shadow: 0 20px 40px -10px rgba(16,185,129,.32);
}
.toast.error {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  box-shadow: 0 20px 40px -10px rgba(239,68,68,.32);
}
.toast.info {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
}
@keyframes toast-bounce {
  0%   { opacity: 0; transform: translateY(20px) scale(.95); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Modal — refined entry ---------- */
.modal-backdrop {
  background: rgba(2, 44, 34, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-box {
  border-radius: 18px;
  box-shadow:
    0 32px 80px -20px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.05) inset;
  animation: modal-bounce .35s cubic-bezier(.4,1.4,.5,1);
}
@keyframes modal-bounce {
  0%   { opacity: 0; transform: translateY(30px) scale(.92); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
  .modal-box { border-radius: 14px; }
}

/* ---------- Gallery — premium feel ---------- */
.gallery {
  border-radius: 18px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.12);
  overflow: hidden;
}
.gallery-main {
  background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
}
.gallery-thumbs { background: var(--surface); }
.gallery-thumb {
  border-radius: 8px;
  transition: border-color .2s, transform .15s;
  flex: 0 0 72px;
  height: 72px;
}
.gallery-thumb:hover { transform: translateY(-2px); }
.gallery-thumb.active {
  border-color: var(--emerald);
  box-shadow: 0 4px 12px rgba(16,185,129,.32);
}

/* ---------- Listing detail price panel ---------- */
.detail-side > .panel:first-child {
  background:
    radial-gradient(500px 200px at 100% 0%, rgba(16,185,129,.04), transparent 60%),
    var(--surface);
}

/* Seller avatar in detail page */
.seller-avatar {
  background: var(--grad-emerald);
  color: #fff !important;
  box-shadow:
    0 8px 20px rgba(16,185,129,.28),
    inset 0 1px 0 rgba(255,255,255,.2);
}

/* ---------- Chat — refined bubbles ---------- */
.chat-layout {
  border-radius: 18px;
  box-shadow:
    0 10px 30px -12px rgba(0,0,0,.10),
    0 0 0 1px rgba(229,231,235,.5);
}
.chat-msg {
  border-radius: 18px;
  padding: 10px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  animation: msg-in .25s cubic-bezier(.4,1.4,.5,1);
}
.chat-msg.sent {
  background: var(--grad-emerald);
  box-shadow: 0 2px 10px rgba(16,185,129,.32);
  border-bottom-right-radius: 4px;
}
.chat-msg.received {
  background: #fff;
  border-bottom-left-radius: 4px;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.chat-form button {
  background: var(--grad-emerald);
  box-shadow: 0 4px 12px rgba(16,185,129,.32), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .12s, box-shadow .2s;
}
.chat-form button:hover {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 6px 16px rgba(16,185,129,.42);
}
.chat-form button:active { transform: scale(.95); }
.chat-item-avatar {
  background: var(--grad-emerald);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(16,185,129,.24);
}
.chat-item.active {
  background: var(--grad-emerald-soft);
  position: relative;
}
.chat-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--grad-emerald);
}
.unread-dot {
  background: var(--grad-emerald);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(16,185,129,.08); }
}

/* ---------- Mobile bottom nav — glass ---------- */
.bottom-nav {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top-color: rgba(229,231,235,.5);
  box-shadow: 0 -8px 30px rgba(0,0,0,.06);
}
.bottom-nav a.cta .bi {
  background: var(--grad-emerald);
  box-shadow:
    0 8px 20px rgba(16,185,129,.42),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .2s cubic-bezier(.4,1.4,.5,1);
}
.bottom-nav a.cta:active .bi { transform: scale(.92); }
.bottom-nav a.cta:hover .bi  { transform: scale(1.08) rotate(90deg); }

/* ---------- Pagination — pill style ---------- */
.pagination a, .pagination span {
  border-radius: 10px;
  border-color: rgba(229,231,235,.7);
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.pagination a:hover {
  background: var(--emerald-bg);
  color: var(--emerald-dark);
  border-color: var(--emerald-border);
  transform: translateY(-1px);
}
.pagination .current {
  background: var(--grad-emerald);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(16,185,129,.32);
}

/* ---------- Empty state — softer illustration vibe ---------- */
.empty .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px; height: 96px;
  background: var(--grad-emerald-soft);
  color: var(--emerald-dark);
  border-radius: 50%;
  font-size: 40px;
  margin: 0 auto 18px;
  box-shadow: 0 8px 20px rgba(16,185,129,.12);
  animation: float-icon 3s ease-in-out infinite;
}
@keyframes float-icon {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---------- Flash messages — slide in ---------- */
.flash {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  animation: flash-in .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes flash-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.flash.success {
  background: linear-gradient(135deg, rgba(236,253,245,.95), rgba(255,255,255,1));
  color: var(--emerald-darker);
}
.flash.error, .flash.danger {
  background: linear-gradient(135deg, rgba(254,242,242,.95), rgba(255,255,255,1));
  color: #991B1B;
}

/* ---------- Skeleton — better shimmer ---------- */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(243,244,246,.6) 0%,
    rgba(229,231,235,.9) 50%,
    rgba(243,244,246,.6) 100%
  );
  background-size: 200% 100%;
  border-radius: 10px;
}

/* ---------- Footer — softer top divider ---------- */
.site-footer {
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(16,185,129,.04), transparent 60%),
    var(--surface);
  border-top: 1px solid rgba(229,231,235,.7);
}
.footer-brand .brand-logo { background: var(--grad-emerald); box-shadow: 0 4px 10px rgba(16,185,129,.32); }

/* ---------- User dropdown menu — refined ---------- */
.user-menu {
  border-radius: 14px !important;
  box-shadow:
    0 20px 40px -10px rgba(0,0,0,.18),
    0 0 0 1px rgba(229,231,235,.6) !important;
  border: none !important;
  animation: dropdown-in .2s cubic-bezier(.4,1.4,.5,1);
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.dropdown-link {
  border-radius: 8px;
  transition: background .12s, transform .1s, padding-left .12s;
}
.dropdown-link:hover {
  background: var(--emerald-bg) !important;
  color: var(--emerald-dark) !important;
  padding-left: 14px !important;
}

/* ---------- Dropzone (sell.php) — animated ---------- */
#dropzone {
  border-style: dashed;
  border-width: 2px;
  background:
    radial-gradient(400px 200px at 50% 50%, rgba(16,185,129,.04), transparent 60%),
    var(--surface-alt);
  transition: all .2s cubic-bezier(.2,.7,.2,1);
}
#dropzone:hover {
  border-color: var(--emerald) !important;
  background:
    radial-gradient(400px 200px at 50% 50%, rgba(16,185,129,.08), transparent 60%),
    var(--emerald-bg);
  transform: scale(1.01);
}
#dropzone.drag-over {
  border-color: var(--emerald) !important;
  background: var(--emerald-bg) !important;
  transform: scale(1.02);
  box-shadow: 0 0 0 8px rgba(16,185,129,.08);
}
#dropzone .bi-cloud-arrow-up {
  transition: transform .3s cubic-bezier(.4,1.4,.5,1);
}
#dropzone:hover .bi-cloud-arrow-up { transform: translateY(-4px) scale(1.1); }

/* ---------- Reduce motion fallback ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .site-nav, .bottom-nav, .site-footer,
  .listing-fav, #userMenuWrap, .toast-stack { display: none !important; }
  body { background: #fff !important; }
}

/* =========================================================================
   Dark theme overrides — polish layer
   Targets hardcoded rgba/hex values that aren't driven by CSS variables.
   ========================================================================= */

[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(16,185,129,0.04), transparent 60%),
    radial-gradient(900px  500px at -10% 110%, rgba(249,115,22,0.04), transparent 60%),
    var(--bg);
}

/* Links — emerald-dark (#047857) is near-invisible on dark backgrounds.
   Promote all bare text links to emerald-light (#34D399) in dark mode.
   Named classes (nav, buttons, pills) already override this through their
   own more-specific rules, so they are unaffected. */
[data-theme="dark"] a { color: var(--emerald-light); }
[data-theme="dark"] a:hover { color: #6EE7B7; }

/* Navbar */
[data-theme="dark"] .site-nav {
  background: rgba(7,16,30,.90);
  border-bottom-color: rgba(45,58,79,.8);
}
[data-theme="dark"] .site-nav:hover { background: rgba(7,16,30,.98); }

/* Hero search bar */
[data-theme="dark"] .hero-search {
  background: rgba(7,16,30,.94);
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
}
[data-theme="dark"] .hero-search input { color: var(--text); }

/* Auth */
[data-theme="dark"] .auth-shell {
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(16,185,129,.10), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(249,115,22,.08), transparent 60%),
    var(--bg);
}
[data-theme="dark"] .auth-shell::before {
  background: radial-gradient(circle, rgba(16,185,129,.14), transparent 60%);
}
[data-theme="dark"] .auth-shell::after {
  background: radial-gradient(circle, rgba(249,115,22,.12), transparent 60%);
}
[data-theme="dark"] .auth-card {
  /* Strip the light-mode white inner-glow rings; use a dark-appropriate shadow */
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.65),
    0 0 0 1px rgba(45,58,79,.9) inset,
    0 0 60px -20px rgba(16,185,129,.10);
}

/* Auth text contrast — boost muted and label colours against the dark card */
[data-theme="dark"] .auth-card .auth-sub,
[data-theme="dark"] .auth-card .auth-footer { color: #CBD5E1; }
[data-theme="dark"] .auth-card .form-label  { color: #E2E8F0; font-weight: 600; }
[data-theme="dark"] .auth-card .form-help   { color: #94A3B8; }
[data-theme="dark"] .auth-card .form-error  { color: #FCA5A5; }

/* Form inputs — darker inset bg so they sit below the card surface,
   border bright enough to pass 3:1 non-text contrast against that bg */
[data-theme="dark"] .auth-card .form-control,
[data-theme="dark"] .auth-card .form-select,
[data-theme="dark"] .auth-card textarea.form-control {
  background: var(--bg);
  border-color: #5A7090;   /* #5A7090 on #0F172A ≈ 3.5:1 — passes WCAG 1.4.11 */
  color: var(--text);
}
[data-theme="dark"] .auth-card .form-control:hover,
[data-theme="dark"] .auth-card .form-select:hover {
  border-color: #7090B0;
}
[data-theme="dark"] .auth-card .form-control:focus,
[data-theme="dark"] .auth-card .form-select:focus,
[data-theme="dark"] .auth-card textarea.form-control:focus {
  border-color: var(--emerald-light);
  box-shadow: 0 0 0 3px rgba(52,211,153,.22);
  outline: none;
}
[data-theme="dark"] .auth-card .form-control::placeholder,
[data-theme="dark"] .auth-card textarea.form-control::placeholder {
  color: #94A3B8;   /* bumped from text-faint to text-muted for legibility */
  opacity: 1;
}
[data-theme="dark"] .auth-card .form-control:-webkit-autofill,
[data-theme="dark"] .auth-card .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  -webkit-text-fill-color: var(--text);
}

/* Dev demo box (small 12px text on surface-alt — bump past 4.5:1) */
[data-theme="dark"] .auth-demo-hint { color: #CBD5E1; }

[data-theme="dark"] .auth-card h1 {
  background: linear-gradient(135deg, #34D399 0%, #6EE7B7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Panel headers */
[data-theme="dark"] .panel-header {
  background: linear-gradient(180deg, var(--surface-alt), var(--surface));
}

/* Sidebars */
[data-theme="dark"] .dash-sidebar,
[data-theme="dark"] .filters-sidebar {
  background: rgba(30,41,59,.92);
  border-color: rgba(45,58,79,.7);
}
[data-theme="dark"] .dash-sidebar a.active {
  background: rgba(5,46,28,.5);
}

/* Category chips */
[data-theme="dark"] .category-chip {
  background: rgba(30,41,59,.85);
  border-color: rgba(45,58,79,.7);
}
[data-theme="dark"] .category-chip:hover { background: var(--surface); }
[data-theme="dark"] .category-chip:nth-child(3n) .chip-icon { background: rgba(30,58,138,.35); color: #93C5FD; }
[data-theme="dark"] .category-chip:nth-child(5n) .chip-icon { background: rgba(131,24,67,.35);  color: #F9A8D4; }
[data-theme="dark"] .category-chip:nth-child(7n) .chip-icon { background: rgba(76,29,149,.35);  color: #C4B5FD; }

/* Listing cards */
[data-theme="dark"] .listing-thumb {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
}
[data-theme="dark"] .listing-fav {
  background: rgba(30,41,59,.90);
  color: var(--text-muted);
}
[data-theme="dark"] .listing-fav:hover { background: var(--surface); }
[data-theme="dark"] .listing-fav.active {
  background: linear-gradient(135deg, rgba(127,29,29,.55) 0%, rgba(153,27,27,.45) 100%);
}

/* Pill badges */
[data-theme="dark"] .pill-sell,
[data-theme="dark"] .pill-active   { background: linear-gradient(135deg, rgba(5,46,28,.6) 0%, rgba(6,95,70,.5) 100%); color: #34D399; }
[data-theme="dark"] .pill-donate,
[data-theme="dark"] .pill-rejected { background: rgba(127,29,29,.4);  color: #FCA5A5; }
[data-theme="dark"] .pill-service  { background: rgba(67,20,7,.45);   color: #FED7AA; }
[data-theme="dark"] .pill-pending,
[data-theme="dark"] .pill-featured { background: rgba(120,53,15,.4);  color: #FDE68A; }
[data-theme="dark"] .pill-sold     { background: rgba(30,58,138,.4);  color: #BFDBFE; }
[data-theme="dark"] .pill-archived { background: var(--surface-alt);  color: var(--text-muted); }

/* Gallery */
[data-theme="dark"] .gallery-main {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
}

/* Chat */
[data-theme="dark"] .chat-msg.received {
  background: var(--surface-alt);
  border-color: var(--border);
}

/* User dropdown */
[data-theme="dark"] .user-menu {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.45), 0 0 0 1px rgba(45,58,79,.7) !important;
}
[data-theme="dark"] .dropdown-link:hover {
  background: var(--surface-alt) !important;
  color: var(--text) !important;
}

/* Mobile bottom nav */
[data-theme="dark"] .bottom-nav {
  background: rgba(7,16,30,.94);
  border-top-color: rgba(45,58,79,.7);
}

/* Footer */
[data-theme="dark"] .site-footer {
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(16,185,129,.03), transparent 60%),
    var(--surface);
  border-top-color: rgba(45,58,79,.7);
}
[data-theme="dark"] .footer-col a      { color: var(--text-muted); }
[data-theme="dark"] .footer-col a:hover { color: var(--emerald-light); }

/* Section links */
[data-theme="dark"] .section-header .section-link {
  color: var(--emerald-light);
  background: var(--emerald-bg);
}
[data-theme="dark"] .section-header .section-link:hover {
  background: rgba(5,46,28,.7);
}

/* Flash messages */
[data-theme="dark"] .flash {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .flash.success {
  background: linear-gradient(135deg, rgba(5,46,28,.9), var(--surface));
  color: #34D399;
}
[data-theme="dark"] .flash.error,
[data-theme="dark"] .flash.danger {
  background: linear-gradient(135deg, rgba(127,29,29,.4), var(--surface));
  color: #FCA5A5;
}

/* Skeleton shimmer */
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(36,50,72,.6) 0%,
    rgba(45,58,79,.9) 50%,
    rgba(36,50,72,.6) 100%
  );
  background-size: 200% 100%;
}

/* Theme toggle icon */
.theme-toggle { transition: transform .3s cubic-bezier(.4,1.4,.5,1), background .15s; }
.theme-toggle:hover { transform: rotate(20deg) scale(1.1); }

/* Native form elements — colour-scheme lets browser render checkboxes,
   radios, selects, scrollbars, and date pickers in dark mode */
[data-theme="dark"] { color-scheme: dark; }

/* Form controls — explicit colour + placeholder tint */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea.form-control::placeholder {
  color: var(--text-faint);
  opacity: 1;
}
[data-theme="dark"] .form-select option {
  background: var(--surface);
  color: var(--text);
}

/* Kill browser autofill yellow/blue wash */
[data-theme="dark"] .form-control:-webkit-autofill,
[data-theme="dark"] .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}

/* Type-selector cards on sell page (unchecked state uses var(--surface) inline,
   but also override any other card-style whites that slip through) */
[data-theme="dark"] .listing-card {
  border-color: var(--border);
}

/* Modals */
[data-theme="dark"] .modal-content {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--border);
}

/* Inline notification unread icon ring (colour stays emerald, bg is now surface) */
[data-theme="dark"] .notif-icon-ring {
  background: var(--surface);
}

/* ============================================================
   Static / prose pages (About, Help, Terms, Privacy, Cookies)
   ============================================================ */
.static-hero {
  background: var(--grad-emerald);
  color: #fff;
  padding: 56px 0 48px;
  text-align: center;
}
.static-hero h1 { font-size: clamp(26px, 4vw, 42px); margin: 0 0 10px; }
.static-hero p  { font-size: 17px; opacity: .88; margin: 0; }

.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  color: var(--text);
  line-height: 1.75;
  font-size: 15px;
}
.prose h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 40px 0 12px;
  color: var(--text);
}
.prose h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 28px 0 8px;
  color: var(--text);
}
.prose p  { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose a  { color: var(--emerald-dark); text-decoration: underline; }
.prose strong { font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 36px 0; }
.prose .lead { font-size: 17px; color: var(--text-muted); margin-bottom: 32px; }

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.contact-info h2  { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.contact-info p   { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin: 0 0 28px; }
.contact-method   { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.contact-method .cm-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--emerald-bg); color: var(--emerald-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.contact-method .cm-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 2px; }
.contact-method .cm-value { font-size: 14px; font-weight: 500; color: var(--text); }

@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .static-hero  { padding: 40px 0 32px; }
}