@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --ocean: #0a7ea4;
  --ocean-dark: #065f7c;
  --ocean-light: #e0f4fb;
  --sand: #f5efe6;
  --sand-dark: #e8ddd0;
  --spice: #c45c1a;
  --spice-light: #fdf0e8;
  --coral: #e05a4e;
  --green: #2d7a4f;
  --green-light: #e8f5ee;
  --text: #1a1a1a;
  --text-muted: #666;
  --text-light: #999;
  --white: #ffffff;
  --border: #e5ddd4;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--sand);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

/* ── NAV ── */
nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 120px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

.nav-logo-img {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  object-fit: contain;
  display: block;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--ocean-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.logo-dot { width:8px;height:8px;background:var(--spice);border-radius:50%;display:inline-block;flex-shrink:0; }
.logo-text { display:flex;flex-direction:column;line-height:1; }
.logo-sub { font-family:'DM Sans',sans-serif;font-size:9px;font-weight:400;color:var(--text-muted);letter-spacing:.04em;margin-top:2px; }

.nav-search { flex:1;max-width:480px;position:relative; }
.nav-search input {
  width:100%;padding:9px 16px 9px 40px;
  border:1.5px solid var(--border);border-radius:24px;
  font-size:14px;font-family:'DM Sans',sans-serif;
  background:var(--sand);color:var(--text);outline:none;transition:border-color .2s;
}
.nav-search input:focus { border-color:var(--ocean);background:var(--white); }
.nav-search-icon { position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:15px; }

.nav-links { display:flex;align-items:center;gap:8px;margin-left:auto; }

.nav-lang {
  font-size:13px;color:var(--text-muted);padding:6px 10px;
  border-radius:var(--radius-sm);cursor:pointer;
  border:1px solid var(--border);background:none;font-family:'DM Sans',sans-serif;
}
.nav-lang.active { background:var(--ocean-light);color:var(--ocean-dark);border-color:var(--ocean); }

.nav-user { display:flex;align-items:center;gap:6px;cursor:pointer; }
.nav-avatar {
  width:32px;height:32px;border-radius:50%;background:var(--ocean-light);
  color:var(--ocean-dark);font-weight:500;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ocean);
}

.btn {
  padding:8px 18px;border-radius:24px;font-size:14px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;border:none;transition:all .2s;
}
.btn-outline { background:none;border:1.5px solid var(--border);color:var(--text); }
.btn-outline:hover { border-color:var(--ocean);color:var(--ocean); }
.btn-primary { background:var(--spice);color:var(--white); }
.btn-primary:hover { background:#a84d14; }
.btn-sm { padding:6px 14px;font-size:13px; }

.hero-logo-mobile { display:none; }

/* ── HERO ── */
.hero {
  background:linear-gradient(135deg,var(--ocean-dark) 0%,var(--ocean) 60%,#1a9bbf 100%);
  padding:56px 24px 48px;text-align:center;position:relative;overflow:hidden;
}
.hero::before {
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:40px;
  background:var(--sand);clip-path:ellipse(55% 100% at 50% 100%);
}
.hero-pattern {
  position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 50%,rgba(255,255,255,.05) 0%,transparent 50%),
                   radial-gradient(circle at 80% 20%,rgba(255,255,255,.04) 0%,transparent 40%);
}
.hero h1 {
  font-family:'Playfair Display',serif;font-size:clamp(28px,5vw,46px);
  color:var(--white);margin-bottom:8px;position:relative;
}
.hero-sub { font-size:16px;color:rgba(255,255,255,.8);margin-bottom:28px;position:relative; }

.hero-search {
  max-width:580px;margin:0 auto 20px;display:flex;
  background:var(--white);border-radius:32px;overflow:hidden;
  box-shadow:var(--shadow-lg);position:relative;
}
.hero-search select {
  padding:14px 16px;border:none;border-right:1.5px solid var(--border);
  background:var(--sand);font-size:14px;font-family:'DM Sans',sans-serif;
  color:var(--text);outline:none;flex-shrink:0;cursor:pointer;
}
.hero-search input {
  flex:1;padding:14px 20px;border:none;font-size:15px;
  font-family:'DM Sans',sans-serif;color:var(--text);outline:none;background:transparent;
}
.hero-search button {
  padding:10px 24px;margin:6px;background:var(--spice);color:var(--white);
  border:none;border-radius:24px;font-size:14px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;white-space:nowrap;
}

.hero-tags { display:flex;flex-wrap:wrap;gap:8px;justify-content:center;position:relative; }
.hero-tag {
  padding:5px 14px;background:rgba(255,255,255,.15);color:rgba(255,255,255,.9);
  border-radius:20px;font-size:13px;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);transition:background .2s;
}
.hero-tag:hover { background:rgba(255,255,255,.25); }

/* ── LOCATION STRIP ── */
.location-strip {
  background:var(--white);border-bottom:1px solid var(--border);
  padding:12px 24px;display:flex;align-items:center;gap:8px;
  overflow-x:auto;scrollbar-width:none;
}
.location-strip::-webkit-scrollbar { display:none; }
.location-label {
  font-size:12px;font-weight:500;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;margin-right:4px;
}
.location-chip {
  padding:5px 14px;border-radius:20px;font-size:13px;font-weight:500;
  cursor:pointer;flex-shrink:0;border:1.5px solid var(--border);
  background:var(--white);color:var(--text-muted);transition:all .2s;
}
.location-chip:hover,.location-chip.active {
  border-color:var(--ocean);background:var(--ocean-light);color:var(--ocean-dark);
}

/* ── MAIN LAYOUT ── */
.main {
  max-width:1200px;margin:0 auto;padding:32px 24px;
  display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start;
}

/* ── SIDEBAR ── */
.sidebar {
  background:var(--white);border-radius:var(--radius);
  border:1px solid var(--border);padding:20px;
  position:sticky;top:76px;
}
.sidebar-title {
  font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-light);margin-bottom:12px;
}
.cat-item {
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;
  color:var(--text);font-size:14px;
}
.cat-item:hover { background:var(--sand); }
.cat-item.active { background:var(--ocean-light);color:var(--ocean-dark);font-weight:500; }
.cat-icon { font-size:18px;width:28px;text-align:center; }
.cat-count {
  margin-left:auto;font-size:12px;color:var(--text-light);
  background:var(--sand);padding:2px 7px;border-radius:10px;
}
.cat-item.active .cat-count { background:rgba(10,126,164,.15);color:var(--ocean); }
.sidebar-divider { border:none;border-top:1px solid var(--border);margin:16px 0; }
.filter-label { font-size:13px;font-weight:500;color:var(--text);margin-bottom:8px;display:block; }
.price-inputs { display:flex;gap:8px;margin-bottom:12px; }
.price-inputs input {
  flex:1;padding:8px 10px;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);font-size:13px;font-family:'DM Sans',sans-serif;
  outline:none;color:var(--text);background:var(--sand);
}
.price-inputs input:focus { border-color:var(--ocean);background:var(--white); }
.condition-btns { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px; }
.cond-btn {
  padding:5px 12px;border-radius:20px;font-size:12px;
  border:1.5px solid var(--border);background:none;color:var(--text-muted);
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;
}
.cond-btn:hover,.cond-btn.active {
  border-color:var(--ocean);background:var(--ocean-light);color:var(--ocean-dark);
}
.apply-btn {
  width:100%;padding:10px;background:var(--ocean);color:var(--white);
  border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;transition:background .2s;
}
.apply-btn:hover { background:var(--ocean-dark); }

/* ── LISTINGS ── */
.listings-header {
  display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;
}
.listings-title { font-size:18px;font-weight:500; }
.listings-count { font-size:13px;color:var(--text-muted);margin-top:2px; }
.sort-select {
  padding:8px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:13px;font-family:'DM Sans',sans-serif;background:var(--white);
  color:var(--text);outline:none;cursor:pointer;
}

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

.listing-card {
  background:var(--white);border-radius:var(--radius);border:1px solid var(--border);
  overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;
}
.listing-card:hover { transform:translateY(-3px);box-shadow:var(--shadow-lg); }

.card-img {
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--sand-dark);
}
.card-img-placeholder {
  width:100%;aspect-ratio:4/3;display:flex;align-items:center;
  justify-content:center;font-size:40px;background:var(--sand);
}
.card-badge {
  position:absolute;top:10px;left:10px;padding:3px 9px;
  border-radius:20px;font-size:11px;font-weight:500;
}
.badge-new { background:var(--green);color:var(--white); }
.badge-used { background:var(--spice-light);color:var(--spice); }
.badge-featured { background:var(--spice);color:var(--white); }

.card-fav {
  position:absolute;top:10px;right:10px;width:30px;height:30px;
  background:rgba(255,255,255,.9);border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:15px;
  cursor:pointer;border:none;transition:transform .2s;
}
.card-fav:hover { transform:scale(1.15); }

.card-body { padding:12px 14px 14px; }
.card-price { font-size:17px;font-weight:500;color:var(--spice);margin-bottom:4px; }
.card-title {
  font-size:14px;color:var(--text);margin-bottom:6px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-meta { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-light);flex-wrap:wrap; }
.card-dot { width:3px;height:3px;background:var(--border);border-radius:50%; }
.card-views { color:var(--ocean);font-weight:500; }

.empty-state {
  grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-muted);
}
.empty-state-icon { font-size:48px;margin-bottom:12px; }
.empty-state h3 { font-size:18px;margin-bottom:8px;color:var(--text); }

/* ── FEATURED BANNER ── */
.featured-banner {
  background:linear-gradient(135deg,var(--green) 0%,#3a9460 100%);
  border-radius:var(--radius);padding:20px 24px;color:var(--white);
  margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.featured-banner h3 { font-family:'Playfair Display',serif;font-size:18px;margin-bottom:4px; }
.featured-banner p { font-size:13px;opacity:.85; }
.featured-banner-btn {
  padding:9px 20px;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.4);
  color:var(--white);border-radius:24px;font-size:13px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;white-space:nowrap;transition:background .2s;
}
.featured-banner-btn:hover { background:rgba(255,255,255,.3); }

/* ── FAB ── */
.sell-fab {
  position:fixed;bottom:28px;right:28px;padding:14px 24px;background:var(--spice);
  color:var(--white);border:none;border-radius:32px;font-size:15px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;box-shadow:0 4px 20px rgba(196,92,26,.4);
  display:flex;align-items:center;gap:8px;transition:all .2s;z-index:50;
}
.sell-fab:hover { background:#a84d14;transform:translateY(-2px);box-shadow:0 6px 24px rgba(196,92,26,.5); }

/* ── MODALS ── */
.modal-overlay {
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:200;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--white);border-radius:16px;width:100%;max-width:520px;
  max-height:90vh;overflow-y:auto;padding:28px;position:relative;
}
.modal-close {
  position:absolute;top:16px;right:16px;background:var(--sand);border:none;
  border-radius:50%;width:32px;height:32px;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
}
.modal-title { font-family:'Playfair Display',serif;font-size:22px;color:var(--text);margin-bottom:4px; }
.modal-sub { font-size:13px;color:var(--text-muted);margin-bottom:24px; }

/* ── FORMS ── */
.form-group { margin-bottom:16px; }
.form-label { font-size:13px;font-weight:500;color:var(--text);display:block;margin-bottom:6px; }
.form-input {
  width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:14px;font-family:'DM Sans',sans-serif;color:var(--text);background:var(--sand);
  outline:none;transition:border-color .2s;
}
.form-input:focus { border-color:var(--ocean);background:var(--white); }
textarea.form-input { resize:vertical;min-height:90px; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }

.photo-upload {
  border:2px dashed var(--border);border-radius:var(--radius);padding:24px;
  text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:var(--sand);
}
.photo-upload:hover { border-color:var(--ocean);background:var(--ocean-light); }
.photo-upload-icon { font-size:28px;margin-bottom:8px; }
.photo-upload-text { font-size:13px;color:var(--text-muted); }
.photo-upload-sub { font-size:11px;color:var(--text-light);margin-top:4px; }

.photo-previews {
  display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;
}
.photo-preview-item {
  position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;
  border:1.5px solid var(--border);
}
.photo-preview-item img { width:100%;height:100%;object-fit:cover; }
.photo-preview-item button {
  position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;
  border:none;border-radius:50%;width:20px;height:20px;font-size:11px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}

.submit-btn {
  width:100%;padding:13px;background:var(--spice);color:var(--white);border:none;
  border-radius:var(--radius-sm);font-size:15px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;margin-top:8px;transition:background .2s;
}
.submit-btn:hover { background:#a84d14; }

.form-divider {
  display:flex;align-items:center;gap:12px;margin:16px 0;font-size:12px;color:var(--text-light);
}
.form-divider::before,.form-divider::after { content:'';flex:1;border-top:1px solid var(--border); }

/* ── TOAST ── */
.toast {
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1a1a1a;color:#fff;padding:12px 24px;border-radius:32px;font-size:14px;
  z-index:500;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;
}
.toast.show { opacity:1;transform:translateX(-50%) translateY(0); }

/* ── LISTING DETAIL VIEW ── */
.detail-overlay {
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;
  align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;
}
.detail-overlay.open { display:flex; }
.detail-modal {
  background:var(--white);border-radius:16px;width:100%;max-width:800px;
  margin:auto;position:relative;overflow:hidden;
}
.carousel {
  position:relative;background:#000;overflow:hidden;
}
.carousel-img {
  width:100%;height:320px;object-fit:contain;display:block;
}
.carousel-btn {
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.45);
  color:#fff;border:none;font-size:32px;width:44px;height:44px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;
  line-height:1;padding:0;
}
.carousel-prev { left:10px; }
.carousel-next { right:10px; }
.carousel-dots {
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;
}
.carousel-dot {
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.45);
  cursor:pointer;transition:background .2s;
}
.carousel-dot.active { background:#fff; }
.carousel-count {
  position:absolute;top:10px;right:12px;background:rgba(0,0,0,0.5);
  color:#fff;font-size:12px;padding:3px 8px;border-radius:10px;
}
.detail-body { padding:28px; }
.detail-price { font-size:28px;font-weight:500;color:var(--spice);margin-bottom:8px; }
.detail-title { font-size:20px;font-weight:500;margin-bottom:12px; }
.detail-meta { display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px; }
.detail-meta-item { display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted); }
.detail-desc { font-size:14px;line-height:1.7;color:var(--text);margin-bottom:24px; }
.detail-seller {
  background:var(--sand);border-radius:var(--radius);padding:16px 20px;
  display:flex;align-items:center;gap:16px;margin-bottom:20px;
}
.seller-avatar {
  width:48px;height:48px;border-radius:50%;background:var(--ocean-light);
  color:var(--ocean-dark);font-size:20px;font-weight:500;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.seller-name { font-weight:500;margin-bottom:2px; }
.seller-since { font-size:12px;color:var(--text-muted); }
.detail-actions { display:flex;gap:12px;flex-wrap:wrap; }
.btn-share-whatsapp {
  width:100%;margin-bottom:10px;padding:11px;
  background:none;border:1.5px solid #25d366;color:#1a9e4f;
  border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;display:flex;
  align-items:center;justify-content:center;gap:8px;transition:all .2s;
}
.btn-share-whatsapp:hover { background:#f0fff6; }
.btn-whatsapp {
  flex:1;padding:13px 20px;background:#25d366;color:#fff;border:none;
  border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;transition:background .2s;
}
.btn-whatsapp:hover { background:#1ebe5d; }
.btn-call {
  padding:13px 20px;background:var(--ocean-light);color:var(--ocean-dark);border:none;
  border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;display:flex;align-items:center;
  gap:8px;transition:background .2s;
}
.btn-call:hover { background:#c5e9f5; }
.btn-mark-sold {
  width:100%;margin-top:10px;padding:11px;background:none;border:1.5px dashed var(--border);
  border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--text-muted);
  font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s;
}
.btn-mark-sold:hover { border-color:var(--coral);color:var(--coral);background:var(--spice-light); }
.card-expiry-warn {
  font-size:11px;color:#c45c1a;font-weight:500;margin-top:4px;
}
.detail-meta-item.expiry-warn { color:#c45c1a;font-weight:600; }
.btn-delete-listing {
  width:100%;margin-top:8px;padding:10px;background:none;border:1.5px dashed #f5c6c3;
  border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:#c0392b;
  font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s;
}
.btn-delete-listing:hover { background:#fdf0ef;border-color:#c0392b; }
.sold-banner {
  background:#e8f5ee;border:1.5px solid #2d7a4f;border-radius:var(--radius-sm);
  padding:14px;text-align:center;font-weight:600;font-size:15px;color:#2d7a4f;
  margin-top:4px;
}

/* ── STATS BAR ── */
.stats-bar {
  background:var(--white);border-bottom:1px solid var(--border);
  padding:10px 24px;display:flex;align-items:center;gap:24px;
  font-size:13px;color:var(--text-muted);
}
.stat-item { display:flex;align-items:center;gap:6px; }
.stat-num { font-weight:500;color:var(--text); }

/* ── MOBILE ── */
@media (max-width:768px) {
  .main { grid-template-columns:1fr; }
  .sidebar { display:none; }
  nav { padding:0 12px; gap:8px; min-height:64px; overflow:hidden; }
  .nav-links { display:none; }
  .logo { display:none; }
  .logo-page { display:flex !important; position:relative; left:auto; top:auto; transform:none; flex-shrink:0; }
  .logo-page .nav-logo-img { height:48px; width:48px; }
  nav:has(.logo-page) { overflow:visible; }
  .nav-search { max-width:none; flex:1; }
  .hero { padding:24px 16px 44px; }
  .hero-logo-mobile { display:flex; justify-content:center; margin-bottom:12px; }
  .stats-bar { gap:16px;overflow-x:auto; }
  .carousel-img { height:240px; }
}

/* ── LOADING SKELETON ── */
.skeleton {
  background:linear-gradient(90deg,var(--sand) 25%,var(--sand-dark) 50%,var(--sand) 75%);
  background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:8px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── AUTH TABS ── */
.auth-tabs { display:flex;gap:4px;margin-bottom:20px;background:var(--sand);border-radius:10px;padding:4px; }
.auth-tab {
  flex:1;padding:8px;text-align:center;font-size:14px;font-weight:500;
  cursor:pointer;border-radius:8px;transition:all .2s;border:none;background:none;
  font-family:'DM Sans',sans-serif;color:var(--text-muted);
}
.auth-tab.active { background:var(--white);color:var(--text);box-shadow:var(--shadow); }

/* ── NAV SECONDARY LINK ── */
.nav-page-link {
  font-size:14px;font-weight:500;color:var(--text-muted);text-decoration:none;
  padding:6px 12px;border-radius:var(--radius-sm);transition:all .2s;
  border:1.5px solid transparent;white-space:nowrap;
}
.nav-page-link:hover { color:var(--ocean);border-color:var(--ocean-light);background:var(--ocean-light); }
.nav-page-link.active { color:var(--ocean-dark);border-color:var(--ocean);background:var(--ocean-light); }

/* ── SKILLS HERO ── */
.skills-hero {
  background:linear-gradient(135deg,#1a4731 0%,var(--green) 55%,#3a9460 100%);
  padding:56px 24px 48px;text-align:center;position:relative;overflow:hidden;
}
.skills-hero::before {
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:40px;
  background:var(--sand);clip-path:ellipse(55% 100% at 50% 100%);
}
.skills-hero .hero-pattern {
  background-image:radial-gradient(circle at 20% 50%,rgba(255,255,255,.06) 0%,transparent 50%),
                   radial-gradient(circle at 80% 20%,rgba(255,255,255,.04) 0%,transparent 40%);
}
.skills-hero h1 {
  font-family:'Playfair Display',serif;font-size:clamp(26px,4.5vw,42px);
  color:var(--white);margin-bottom:8px;position:relative;
}
.skills-hero .hero-sub { font-size:16px;color:rgba(255,255,255,.8);margin-bottom:28px;position:relative; }
.skills-hero .hero-search button { background:var(--ocean);color:var(--white); }
.skills-hero .hero-search button:hover { background:var(--ocean-dark); }

/* ── TRADE CHIPS ── */
.trade-strip {
  background:var(--white);border-bottom:1px solid var(--border);
  padding:12px 24px;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;
}
.trade-strip::-webkit-scrollbar { display:none; }
.trade-chip {
  padding:6px 16px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;
  flex-shrink:0;border:1.5px solid var(--border);background:var(--white);
  color:var(--text-muted);transition:all .2s;display:flex;align-items:center;gap:6px;
}
.trade-chip:hover,.trade-chip.active {
  border-color:var(--green);background:var(--green-light);color:var(--green);
}

/* ── WORKER CARD ── */
.worker-card {
  background:var(--white);border-radius:var(--radius);border:1px solid var(--border);
  overflow:hidden;transition:transform .2s,box-shadow .2s;position:relative;
}
.worker-card:hover { transform:translateY(-3px);box-shadow:var(--shadow-lg); }

.worker-portfolio {
  display:grid;grid-template-columns:1fr 1fr;gap:2px;height:160px;background:var(--sand-dark);overflow:hidden;
}
.worker-portfolio img,.worker-portfolio .portfolio-placeholder {
  width:100%;height:100%;object-fit:cover;display:flex;align-items:center;
  justify-content:center;font-size:32px;background:var(--sand);
}
.worker-portfolio.single { grid-template-columns:1fr; }
.worker-portfolio.single img,.worker-portfolio.single .portfolio-placeholder { height:160px; }

.worker-available-badge {
  position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:500;background:var(--green);color:var(--white);
}
.worker-available-badge.busy { background:var(--coral);color:var(--white); }

.worker-body { padding:14px 16px 16px; }
.worker-trade {
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;
  color:var(--green);margin-bottom:4px;
}
.worker-name { font-size:16px;font-weight:500;margin-bottom:4px; }
.worker-meta {
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);margin-bottom:10px;flex-wrap:wrap;
}
.worker-stars { color:#f5a623;letter-spacing:1px; }
.worker-desc {
  font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.worker-skills { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px; }
.skill-tag {
  padding:3px 10px;background:var(--green-light);color:var(--green);
  border-radius:20px;font-size:11px;font-weight:500;
}
.worker-cta {
  width:100%;padding:10px;background:var(--ocean);color:var(--white);
  border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;transition:background .2s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.worker-cta:hover { background:var(--ocean-dark); }

/* ── HOW IT WORKS BANNER ── */
.how-it-works {
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;margin-bottom:24px;
}
.how-it-works h3 {
  font-family:'Playfair Display',serif;font-size:18px;margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.how-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.how-step { text-align:center;padding:12px 8px; }
.how-step-num {
  width:36px;height:36px;background:var(--ocean-light);color:var(--ocean-dark);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;margin:0 auto 10px;
}
.how-step h4 { font-size:14px;font-weight:500;margin-bottom:4px; }
.how-step p { font-size:12px;color:var(--text-muted);line-height:1.5; }

/* ── WORKER DETAIL MODAL ── */
.worker-detail-modal {
  background:var(--white);border-radius:16px;width:100%;max-width:680px;
  max-height:90vh;overflow-y:auto;position:relative;
}
.worker-detail-header {
  padding:28px 28px 20px;border-bottom:1px solid var(--border);
  display:flex;gap:20px;align-items:flex-start;
}
.worker-detail-avatar {
  width:72px;height:72px;border-radius:50%;flex-shrink:0;
  background:var(--green-light);color:var(--green);font-size:28px;font-weight:600;
  display:flex;align-items:center;justify-content:center;border:3px solid var(--green-light);
  overflow:hidden;
}
.worker-detail-avatar img { width:100%;height:100%;object-fit:cover; }
.worker-detail-info { flex:1; }
.worker-detail-trade { font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--green);margin-bottom:4px; }
.worker-detail-name { font-size:22px;font-weight:500;margin-bottom:6px; }
.worker-detail-meta { display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--text-muted); }

.worker-detail-body { padding:20px 28px; }
.worker-detail-section { margin-bottom:20px; }
.worker-detail-section h4 { font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);margin-bottom:10px; }

.portfolio-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  border-radius:var(--radius-sm);overflow:hidden;
}
.portfolio-grid img,.portfolio-grid .portfolio-ph {
  width:100%;aspect-ratio:1;object-fit:cover;background:var(--sand);
  display:flex;align-items:center;justify-content:center;font-size:24px;
}

.request-form-section {
  background:var(--ocean-light);border-radius:var(--radius);padding:20px;margin-top:4px;
}
.request-form-section h4 {
  font-family:'Playfair Display',serif;font-size:17px;margin-bottom:4px;color:var(--ocean-dark);
}
.request-form-section p { font-size:13px;color:var(--ocean-dark);opacity:.8;margin-bottom:16px; }

.btn-request {
  width:100%;padding:13px;background:var(--green);color:var(--white);border:none;
  border-radius:var(--radius-sm);font-size:15px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;margin-top:4px;transition:background .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-request:hover { background:#1a5e3a; }

/* ── REGISTER AS WORKER MODAL ── */
.worker-type-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;
}
.worker-type-btn {
  padding:10px 8px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:13px;
  color:var(--text-muted);transition:all .15s;text-align:center;
}
.worker-type-btn:hover,.worker-type-btn.active {
  border-color:var(--green);background:var(--green-light);color:var(--green);
}
.worker-type-btn span { display:block;font-size:22px;margin-bottom:4px; }

/* ── SIDEBAR STATS ── */
.skill-sidebar-card {
  background:var(--white);border-radius:var(--radius);border:1px solid var(--border);
  padding:20px;margin-bottom:16px;
}
.skill-sidebar-card h4 { font-size:13px;font-weight:500;margin-bottom:12px;color:var(--text); }
.stat-row { display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border); }
.stat-row:last-child { border-bottom:none; }
.stat-row-label { font-size:13px;color:var(--text-muted);display:flex;align-items:center;gap:6px; }
.stat-row-val { font-size:14px;font-weight:500;color:var(--text); }

.register-worker-btn {
  width:100%;padding:11px;background:var(--green);color:var(--white);border:none;
  border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;transition:background .2s;margin-top:4px;
}
.register-worker-btn:hover { background:#1a5e3a; }

/* ── FREE SELL BANNER ── */
.free-sell-banner {
  background:linear-gradient(135deg,#065f7c 0%,var(--ocean) 60%,#1a9bbf 100%);
  border-radius:var(--radius);padding:18px 24px;color:var(--white);
  margin-bottom:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.free-sell-icon { font-size:32px;flex-shrink:0; }
.free-sell-title { font-family:'Playfair Display',serif;font-size:17px;font-weight:700;margin-bottom:3px; }
.free-sell-sub { font-size:13px;opacity:.88; }
.free-sell-btn {
  margin-left:auto;padding:10px 22px;background:var(--white);color:var(--ocean-dark);
  border:none;border-radius:24px;font-size:13px;font-weight:600;
  font-family:'DM Sans',sans-serif;cursor:pointer;white-space:nowrap;
  transition:all .2s;flex-shrink:0;
}
.free-sell-btn:hover { background:var(--sand);transform:translateY(-1px); }

/* ── STAR PICKER ── */
.star-picker { display:flex;gap:6px;margin:8px 0 14px;flex-direction:row-reverse;justify-content:flex-end; }
.star-picker input { display:none; }
.star-picker label {
  font-size:28px;cursor:pointer;color:#ddd;transition:color .15s;line-height:1;
}
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label { color:#f5a623; }

/* ── REVIEW CARDS ── */
.reviews-list { display:flex;flex-direction:column;gap:12px;margin-bottom:16px; }
.review-card {
  background:var(--sand);border-radius:var(--radius-sm);padding:14px 16px;
  border:1px solid var(--border);
}
.review-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:6px; }
.review-author { font-size:14px;font-weight:500;color:var(--text); }
.review-stars { color:#f5a623;font-size:14px;letter-spacing:1px; }
.review-date { font-size:11px;color:var(--text-light); }
.review-text { font-size:13px;color:var(--text-muted);line-height:1.6;margin-top:4px; }
.review-empty { text-align:center;padding:20px;color:var(--text-light);font-size:13px; }

.write-review-toggle {
  width:100%;padding:10px;background:none;border:1.5px dashed var(--border);
  border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--text-muted);
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;margin-bottom:4px;
}
.write-review-toggle:hover { border-color:var(--ocean);color:var(--ocean);background:var(--ocean-light); }

.review-form-wrap {
  background:var(--ocean-light);border-radius:var(--radius-sm);padding:16px;margin-top:8px;
  border:1px solid rgba(10,126,164,.2);
}
.review-form-wrap h5 { font-size:14px;font-weight:500;color:var(--ocean-dark);margin-bottom:12px; }
.star-picker-label { font-size:12px;color:var(--ocean-dark);font-weight:500;margin-bottom:2px;display:block; }

/* ── FOOTER ── */
.site-footer {
  background:var(--ocean-dark);color:rgba(255,255,255,.8);
  padding:48px 24px 24px;margin-top:48px;
}
.footer-inner {
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:36px;
}
.footer-logo {
  display:flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:14px;
}
.footer-logo-text {
  font-family:'Playfair Display',serif;font-size:20px;color:#fff;
  display:flex;flex-direction:column;line-height:1;
}
.footer-logo-sub {
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:400;
  color:rgba(255,255,255,.55);letter-spacing:.04em;margin-top:3px;
}
.footer-about {
  font-size:13px;line-height:1.7;color:rgba(255,255,255,.6);max-width:280px;
}
.footer-heading {
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.4);margin-bottom:14px;
}
.footer-link {
  display:block;font-size:13px;color:rgba(255,255,255,.7);text-decoration:none;
  margin-bottom:10px;transition:color .2s;
}
.footer-link:hover { color:#fff; }
.footer-bottom {
  max-width:1200px;margin:0 auto;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:8px;
}

@media (max-width:768px) {
  .footer-inner { grid-template-columns:1fr;gap:28px; }
  .footer-bottom { justify-content:center;text-align:center; }
  .site-footer { padding-bottom:80px; }
}

/* ── MY LISTINGS ── */
.my-listing-row {
  display:flex;align-items:center;gap:12px;padding:12px;
  background:var(--surface);border-radius:10px;border:1px solid var(--border);
}
.my-listing-thumb {
  width:64px;height:64px;border-radius:8px;object-fit:cover;flex-shrink:0;
}
.my-listing-no-img {
  background:var(--surface-alt);display:flex;align-items:center;
  justify-content:center;font-size:22px;
}
.my-listing-info { flex:1;min-width:0; }
.my-listing-title { font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.my-listing-price { font-weight:700;font-size:13px;color:var(--ocean);margin-top:2px; }
.my-listing-meta { font-size:11px;color:var(--text-muted);margin-top:3px; }
.my-listing-actions { display:flex;flex-direction:column;gap:6px;flex-shrink:0; }

#my-listings-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;
}
#my-listings-modal {
  position:fixed;inset:0;z-index:1001;display:flex;align-items:center;
  justify-content:center;padding:16px;
}

/* ── BOTTOM NAV ── */
.bottom-nav {
  display:none;
  position:fixed;top:auto;bottom:0;left:0;right:0;z-index:150;
  background:var(--white);border-top:1px solid var(--border);
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-inner {
  display:flex;align-items:stretch;height:60px;
}
.bn-item {
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;cursor:pointer;text-decoration:none;color:var(--text-muted);
  font-size:10px;font-weight:500;font-family:'DM Sans',sans-serif;
  transition:color .15s;border:none;background:none;padding:0;
  position:relative;
}
.bn-item .bn-icon { font-size:20px;line-height:1; }
.bn-item.active { color:var(--ocean-dark); }
.bn-item.active .bn-icon { transform:scale(1.1); }
.bn-item:active { opacity:.7; }

.bn-center {
  flex:1;display:flex;align-items:center;justify-content:center;padding:0;
}
.bn-center-btn {
  width:48px;height:48px;background:var(--spice);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--white);border:none;cursor:pointer;
  box-shadow:0 4px 14px rgba(196,92,26,.4);transition:all .2s;
  font-weight:400;line-height:1;
}
.bn-center-btn:active { transform:scale(.93); }
.bn-center-btn.green { background:var(--green);box-shadow:0 4px 14px rgba(45,122,79,.4); }

.bn-badge {
  position:absolute;top:6px;right:calc(50% - 14px);
  background:var(--coral);color:#fff;font-size:9px;font-weight:700;
  width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--white);
}

/* ── SAVED LISTINGS PANEL ── */
.saved-overlay {
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:160;
  align-items:flex-end;justify-content:center;
}
.saved-overlay.open { display:flex; }
.saved-panel {
  background:var(--white);border-radius:20px 20px 0 0;width:100%;
  max-height:80vh;overflow-y:auto;padding:20px 20px 32px;
}
.saved-panel-handle {
  width:36px;height:4px;background:var(--border);border-radius:4px;
  margin:0 auto 16px;
}
.saved-panel h3 { font-size:18px;font-weight:500;margin-bottom:16px; }

@media (max-width:768px) {
  .how-steps { grid-template-columns:1fr; }
  .worker-detail-header { flex-direction:column; }
  .portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .worker-type-grid { grid-template-columns:1fr 1fr; }
  /* show bottom nav, hide FAB */
  .bottom-nav { display:block; }
  .sell-fab { display:none; }
  /* pad page content so bottom nav doesn't cover it */
  body { padding-bottom:60px; }
}