/* ============================================================
   Scrapify Playground — Professional Design System
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --bg: #f7f8fc;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-soft: #f0f2f8;
  --bg-hover: #e8ebf4;
  --border: #e2e6ef;
  --border-strong: #c9d0de;
  --text: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;
  --accent: #4f46e5;
  --accent-soft: rgba(79, 70, 229, 0.1);
  --accent-strong: #3730a3;
  --secondary: #0ea5e9;
  --secondary-soft: rgba(14, 165, 233, 0.1);
  --coral: #4f46e5;
  --coral-soft: rgba(79, 70, 229, 0.1);
  --amber: #d97706;
  --amber-soft: rgba(217, 119, 6, 0.12);
  --green: #059669;
  --green-soft: rgba(5, 150, 105, 0.12);
  --red: #dc2626;
  --red-soft: rgba(220, 38, 38, 0.1);
  --purple: #7c3aed;
  --purple-soft: rgba(124, 58, 237, 0.1);
  --pink: #db2777;
  --discord: #5865f2;
  --discord-hover: #4752c4;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.08);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --max: 1140px;
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent-strong); }
code, .mono { font-family: var(--mono); font-size: 0.9em; }

.container { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
.container-wide { width: min(100% - 2.5rem, 1280px); margin-inline: auto; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid rgba(226, 230, 239, 0.9);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-sm);
}

.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.02rem;
}
.logo:hover { color: var(--text); }

.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #6366f1 0%, #4f46e5 55%, #3730a3 100%);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}

.logo-text span {
  background: linear-gradient(90deg, var(--accent), #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: 0.15s ease;
  border: 1px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  background: var(--bg-soft);
}

.nav-cta {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25), 0 4px 12px rgba(79, 70, 229, 0.2);
  font-weight: 600 !important;
}
.nav-cta:hover {
  background: var(--accent-strong) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3);
}

.nav-discord {
  background: rgba(88, 101, 242, 0.1) !important;
  color: var(--discord) !important;
  border-color: rgba(88, 101, 242, 0.22) !important;
  font-weight: 600 !important;
}
.nav-discord:hover {
  background: var(--discord) !important;
  color: #fff !important;
  border-color: var(--discord) !important;
}
.nav-discord svg { width: 16px; height: 16px; flex-shrink: 0; }

.nav-toggle {
  display: none;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}

/* ---- Hero ---- */
.hero {
  padding: 5rem 0 4rem;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(79, 70, 229, 0.1), transparent 55%),
    radial-gradient(700px 360px at 100% 0%, rgba(14, 165, 233, 0.08), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 3rem;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(79, 70, 229, 0.18);
  background: rgba(79, 70, 229, 0.06);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.15rem;
}

.hero h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2.2rem, 4.6vw, 3.35rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--text);
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #4f46e5, #0ea5e9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  margin: 0 0 1.85rem;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.85rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.hero-meta strong { color: var(--text); font-weight: 700; }

/* Hero scrape panel */
.hero-scrape {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.hero-scrape-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fafbff, #f4f6fb);
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: var(--mono);
}

.hero-scrape-top .live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}
.hero-scrape-top .live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

.hero-scrape-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 280px;
}

.hero-source {
  position: relative;
  padding: 1rem;
  border-right: 1px solid var(--border);
  background: #fbfcfe;
  overflow: hidden;
}
.hero-source h3 {
  margin: 0 0 0.65rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
}

.mock-product {
  border: 1px solid var(--border);
  background: #fff;
  padding: 0.8rem;
  position: relative;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.mock-product .thumb {
  height: 72px;
  background: linear-gradient(135deg, #e0e7ff, #e0f2fe);
  border: 1px solid var(--border);
  margin-bottom: 0.6rem;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  border-radius: var(--radius-sm);
}
.mock-product .field {
  padding: 0.22rem 0.35rem;
  margin-bottom: 0.25rem;
  font-size: 0.82rem;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.mock-product .field.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.12);
}
.mock-product .field-title { font-weight: 700; color: var(--text); }
.mock-product .field-price { color: var(--accent); font-weight: 700; font-family: var(--mono); }
.mock-product .field-rating { color: var(--amber); font-size: 0.78rem; }
.mock-product .field-stock { color: var(--green); font-size: 0.78rem; }

.scan-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.85; pointer-events: none;
  animation: scan-y 3.2s ease-in-out infinite;
}
@keyframes scan-y {
  0% { top: 12%; opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { top: 88%; opacity: 0; }
}

.hero-output {
  padding: 1rem;
  background: #0b1220;
  color: #e5e7eb;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.65;
}
.hero-output h3 {
  margin: 0 0 0.65rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a5b4fc;
  font-family: var(--font);
  font-weight: 600;
}
.hero-output .json-line {
  opacity: 0.25;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hero-output .json-line.visible { opacity: 1; transform: none; }
.hero-output .c-key { color: #a5b4fc; }
.hero-output .c-str { color: #86efac; }
.hero-output .c-num { color: #fcd34d; }
.hero-output .c-pun { color: #9ca3af; }

.hero-scrape-footer {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.hero-chip {
  font-size: 0.72rem;
  font-family: var(--mono);
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-muted);
  border-radius: 999px;
}
.hero-chip.on {
  border-color: rgba(79, 70, 229, 0.35);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.72rem 1.2rem;
  border-radius: 9px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.94rem;
  cursor: pointer;
  transition: 0.15s ease;
  text-decoration: none;
  font-family: inherit;
}
.btn-primary {
  background: linear-gradient(180deg, #5b54f0, var(--accent));
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2), 0 6px 16px rgba(79, 70, 229, 0.22);
}
.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
}
.btn-secondary {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}
.btn-sm { padding: 0.42rem 0.85rem; font-size: 0.85rem; }

/* ---- Sections ---- */
.section { padding: 4rem 0; }
.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.85rem;
  flex-wrap: wrap;
}
.section-header h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  letter-spacing: -0.025em;
  font-weight: 750;
}
.section-header p {
  margin: 0;
  color: var(--text-muted);
  max-width: 36rem;
  font-size: 0.98rem;
}
.section-muted {
  border-block: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #f9fafd);
}

/* ---- Cards ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 1.3rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: var(--shadow-sm);
}
a.card { color: inherit; display: block; }
a.card:hover {
  border-color: rgba(79, 70, 229, 0.35);
  background: #fff;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: inherit;
}
.card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  margin-bottom: 0.95rem;
  border: 1px solid var(--border);
}
.card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.card-footer {
  margin-top: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge-easy { background: var(--green-soft); color: var(--green); border: 1px solid rgba(5, 150, 105, 0.22); }
.badge-medium { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(217, 119, 6, 0.22); }
.badge-hard { background: var(--red-soft); color: var(--red); border: 1px solid rgba(220, 38, 38, 0.2); }
.badge-static { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(79, 70, 229, 0.22); }
.badge-js { background: var(--purple-soft); color: var(--purple); border: 1px solid rgba(124, 58, 237, 0.22); }
.badge-api { background: rgba(219, 39, 119, 0.1); color: var(--pink); border: 1px solid rgba(219, 39, 119, 0.2); }
.badge-ecom { background: var(--secondary-soft); color: #0369a1; border: 1px solid rgba(14, 165, 233, 0.25); }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }

/* ---- Page header ---- */
.page-hero {
  padding: 2.85rem 0 1.85rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #f7f8fc);
}
.page-hero .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  color: var(--text-dim);
  font-size: 0.86rem;
  margin-bottom: 0.9rem;
}
.page-hero .breadcrumb a { color: var(--text-muted); }
.page-hero .breadcrumb a:hover { color: var(--accent); }
.page-hero h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  letter-spacing: -0.025em;
  font-weight: 800;
}
.page-hero p {
  margin: 0;
  color: var(--text-muted);
  max-width: 46rem;
  font-size: 1.02rem;
}
.page-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

/* ---- Playground chrome ---- */
.playground { padding: 2rem 0 3.5rem; }
.playground-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.playground-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 1rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
.playground-sidebar h3 {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 700;
}
.playground-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.playground-nav a {
  display: block;
  padding: 0.48rem 0.65rem;
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.playground-nav a:hover,
.playground-nav a.active {
  background: var(--bg-soft);
  color: var(--text);
}

.scrape-hint {
  border: 1px solid rgba(79, 70, 229, 0.2);
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.06), rgba(79, 70, 229, 0.03));
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
}
.scrape-hint h2, .scrape-hint h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--accent);
}
.scrape-hint p, .scrape-hint li {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.scrape-hint ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.scrape-hint code {
  font-size: 0.85em;
  color: var(--accent-strong);
  background: #fff;
  padding: 0.08rem 0.3rem;
  border: 1px solid rgba(79, 70, 229, 0.15);
  border-radius: 4px;
}

.challenge-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.05rem 1.2rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.challenge-banner h2 { margin: 0 0 0.25rem; font-size: 1rem; }
.challenge-banner p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }

.surface {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.surface-header h2 { margin: 0; font-size: 1rem; }
.surface-body { padding: 1.1rem; }

/* product / tables / forms shared */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.product-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.product-image {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #eef2ff, #e0f2fe);
  display: grid;
  place-items: center;
  font-size: 2rem;
  border-bottom: 1px solid var(--border);
}
.product-body { padding: 0.9rem; }
.product-category {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.product-title { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 700; }
.product-price { color: var(--accent); font-weight: 700; font-family: var(--mono); }
.product-rating { color: var(--amber); font-size: 0.85rem; margin-top: 0.3rem; }
.product-stock { margin-top: 0.45rem; font-size: 0.8rem; color: var(--text-muted); }

.blog-list { display: grid; gap: 1rem; }
.blog-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.blog-item h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.blog-item h3 a { color: var(--text); }
.blog-item h3 a:hover { color: var(--accent); }
.blog-meta {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.5rem;
}
.blog-excerpt { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.data-table th, .data-table td {
  padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border);
}
.data-table th {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-soft);
  font-weight: 700;
}
.data-table tr:hover td { background: rgba(79, 70, 229, 0.04); }
.data-table .num { font-family: var(--mono); color: var(--amber); }

.pagination {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: center; justify-content: center; padding: 1.25rem 0 0.25rem;
}
.pagination a, .pagination span {
  min-width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-muted);
  font-size: 0.9rem; padding: 0 0.65rem;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700;
}

.form-panel { max-width: 420px; margin: 0 auto; }
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block; margin-bottom: 0.35rem; font-size: 0.88rem; color: var(--text-muted); font-weight: 500;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.7rem 0.85rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff; color: var(--text); font: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-note { margin-top: 0.75rem; font-size: 0.85rem; color: var(--text-dim); }
.alert { border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; margin-bottom: 1rem; font-size: 0.92rem; }
.alert-error { background: var(--red-soft); border: 1px solid rgba(220, 38, 38, 0.25); color: var(--red); }
.alert-success { background: var(--green-soft); border: 1px solid rgba(5, 150, 105, 0.25); color: var(--green); }
.protected-content { display: none; }
.protected-content.visible { display: block; }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.toolbar input, .toolbar select {
  padding: 0.55rem 0.75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff; color: var(--text); font: inherit;
}

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.step {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); padding: 1.15rem; box-shadow: var(--shadow-sm);
}
.step-num {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 0.85rem; margin-bottom: 0.75rem;
}
.step h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.step p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); padding: 1.2rem; text-align: center; box-shadow: var(--shadow-sm);
}
.stat-value {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--accent); font-family: var(--mono);
}
.stat-label { color: var(--text-dim); font-size: 0.88rem; margin-top: 0.25rem; font-weight: 500; }

.loading { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 2.5rem; color: var(--text-muted); }
.spinner {
  width: 18px; height: 18px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 0.85rem 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.note strong { color: var(--text); }
.prose { max-width: 48rem; }
.prose h2 { margin: 2rem 0 0.75rem; font-size: 1.35rem; }
.prose p, .prose li { color: var(--text-muted); }
.prose ul { padding-left: 1.2rem; }

.faq-list { display: grid; gap: 0.75rem; max-width: 48rem; }
.faq-item { border: 1px solid var(--border); background: var(--bg-elevated); border-radius: var(--radius); padding: 0; box-shadow: var(--shadow-sm); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 0.95rem 1.1rem; font-weight: 700; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--accent); font-weight: 700; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0; padding: 0 1.1rem 1rem; color: var(--text-muted); font-size: 0.95rem; }

.uc-shell { border: 1px solid var(--border); background: #fff; padding: 1.15rem; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.uc-item { border: 1px solid var(--border); padding: 0.95rem; background: var(--bg-elevated); border-radius: var(--radius-sm); }
.rate-banner { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; padding: 0.85rem 1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); }
.cookie-banner {
  position: sticky; bottom: 0; left: 0; right: 0; background: #0f172a; color: #fff;
  padding: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
  border-radius: var(--radius) var(--radius) 0 0;
}
.cookie-banner button {
  border: 0; padding: 0.5rem 0.9rem; font-weight: 700; cursor: pointer;
  background: var(--accent); color: #fff; border-radius: 8px;
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.75rem 0 2rem;
  margin-top: 2rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  background: #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 1.75rem;
  margin-bottom: 2rem;
}
.footer-grid h4 { margin: 0 0 0.75rem; color: var(--text); font-size: 0.88rem; font-weight: 700; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.footer-grid a { color: var(--text-muted); }
.footer-grid a:hover { color: var(--accent); }
.footer-brand p { margin: 0.55rem 0 0; max-width: 26rem; line-height: 1.55; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
}
.footer-discord {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--discord) !important;
  font-weight: 600;
}
.footer-discord:hover { color: var(--discord-hover) !important; }

/* category tree leftover */
.category-tree { list-style: none; margin: 0; padding: 0; }
.category-tree > li {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elevated); margin-bottom: 0.75rem; padding: 0.85rem 1rem;
}
.category-tree .category-name { font-weight: 700; color: var(--accent); }
.category-tree ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.category-tree .item-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.35rem 0; border-bottom: 1px dashed var(--border);
  color: var(--text-muted); font-size: 0.92rem;
}
.category-tree .item-row:last-child { border-bottom: none; }

.lazy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.lazy-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-elevated); }
.lazy-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #e2e8f0; }
.lazy-card .caption { padding: 0.7rem 0.8rem; font-size: 0.88rem; color: var(--text-muted); }

.dl-grid { display: grid; grid-template-columns: 140px 1fr; gap: 0.4rem 1rem; font-size: 0.92rem; }
.dl-grid dt { color: var(--text-dim); }
.dl-grid dd { margin: 0; color: var(--text); }

/* Responsive core */
@media (max-width: 960px) {
  .hero-grid, .playground-layout, .footer-grid { grid-template-columns: 1fr; }
  .hero-scrape-body { grid-template-columns: 1fr; }
  .hero-source { border-right: 0; border-bottom: 1px solid var(--border); }
  .card-grid, .steps, .stats { grid-template-columns: 1fr 1fr; }
  .playground-sidebar { position: static; }
}
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 0.85rem;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    gap: 0.25rem;
  }
  .nav-links.open { display: flex; }
  .card-grid, .steps, .stats { grid-template-columns: 1fr; }
  .hero { padding-top: 2.75rem; }
}

/* ============================================================
   ShopForge marketplace shell
   ============================================================ */
.sf-shell { border: 1px solid #ddd; background: #eaeded; color: #0f1111; font-family: Arial, "Segoe UI", sans-serif; border-radius: 12px; overflow: hidden; }
.sf-shell a { color: #007185; }
.sf-shell a:hover { color: #c7511f; text-decoration: underline; }
.sf-nav-row { display:flex; flex-wrap:wrap; align-items:center; gap:0.65rem 0.85rem; padding:0.55rem 0.85rem; background:#131921; color:#fff; }
.sf-brand { font-weight:800; letter-spacing:-0.03em; color:#fff !important; font-size:1.35rem; text-decoration:none !important; padding:0.25rem 0.35rem; white-space:nowrap; }
.sf-brand:hover { color:#fff !important; text-decoration:none !important; }
.sf-brand span { color:#febd69; }
.sf-deliver { font-size:0.75rem; line-height:1.2; color:#ccc; padding:0.2rem 0.4rem; min-width:100px; }
.sf-deliver strong { display:block; color:#fff; font-size:0.88rem; }
.sf-search { flex:1 1 280px; display:flex; min-width:200px; height:40px; border-radius:4px; overflow:hidden; }
.sf-search-dept { border:0; background:#e6e6e6; color:#0f1111; font-size:0.75rem; padding:0 0.5rem; max-width:120px; border-right:1px solid #cdcdcd; }
.sf-search input { flex:1; border:0; padding:0 0.7rem; font:inherit; font-size:0.95rem; min-width:0; }
.sf-search button { border:0; background:#febd69; color:#131921; font-weight:700; padding:0 0.95rem; cursor:pointer; font-size:0.95rem; }
.sf-search button:hover { background:#f3a847; }
.sf-nav-link { font-size:0.78rem; color:#ccc; line-height:1.15; padding:0.25rem 0.35rem; text-decoration:none !important; }
.sf-nav-link:hover { color:#fff !important; text-decoration:none !important; }
.sf-nav-link strong { display:block; color:#fff; font-size:0.88rem; }
.sf-cart { font-size:0.85rem; font-weight:700; color:#fff !important; text-decoration:none !important; position:relative; padding:0.25rem 0.4rem; }
.sf-cart .sf-cart-count { position:absolute; top:-2px; left:14px; color:#f08804; font-weight:800; font-size:1rem; }
.sf-subnav { display:flex; flex-wrap:wrap; gap:0.15rem 0.85rem; padding:0.4rem 0.85rem; background:#232f3e; color:#fff; font-size:0.85rem; align-items:center; }
.sf-subnav a { color:#fff !important; text-decoration:none !important; padding:0.2rem 0.15rem; }
.sf-subnav a:hover { text-decoration:underline !important; }
.sf-subnav .sf-all { font-weight:700; }
.sf-layout { display:grid; grid-template-columns:250px 1fr; gap:0; background:#fff; border-top:1px solid #ddd; }
.sf-filters { border-right:1px solid #ddd; padding:0.85rem 1rem 1.5rem; background:#fff; font-size:0.88rem; }
.sf-filters h3 { margin:0 0 0.75rem; font-size:1rem; color:#0f1111; }
.sf-filter-group { margin-bottom:1rem; padding-bottom:0.85rem; border-bottom:1px solid #eee; }
.sf-filter-group:last-child { border-bottom:0; }
.sf-filter-group h4 { margin:0 0 0.45rem; font-size:0.88rem; font-weight:700; color:#0f1111; text-transform:none; letter-spacing:0; }
.sf-filter-group label { display:flex; align-items:center; gap:0.4rem; font-size:0.85rem; color:#0f1111; margin-bottom:0.28rem; cursor:default; }
.sf-filter-group .count { color:#565959; font-size:0.8rem; }
.sf-results { padding:0.75rem 1rem 1.25rem; background:#fff; min-width:0; }
.sf-results-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.65rem; align-items:center; margin-bottom:0.65rem; padding-bottom:0.55rem; border-bottom:1px solid #ddd; }
.sf-results-meta h2 { margin:0; font-size:0.95rem; font-weight:400; color:#0f1111; }
.sf-results-meta .query { color:#c45500; font-weight:700; }
.sf-related { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.85rem; font-size:0.82rem; align-items:center; }
.sf-related a { border:1px solid #d5d9d9; border-radius:16px; padding:0.2rem 0.65rem; background:#fff; color:#0f1111 !important; text-decoration:none !important; }
.sf-brand-ad { display:grid; grid-template-columns:1fr auto; gap:1rem; padding:0.85rem 1rem; border:1px solid #d5d9d9; border-radius:8px; margin-bottom:0.85rem; background:linear-gradient(90deg,#fff 0%,#f7f8fa 100%); }
.sf-brand-ad .sf-ad-label { font-size:0.72rem; color:#565959; margin-bottom:0.25rem; }
.sf-brand-ad h3 { margin:0 0 0.25rem; font-size:1.1rem; color:#0f1111; }
.sf-brand-ad p { margin:0; color:#565959; font-size:0.88rem; }
.sf-brand-ad .sf-ad-cta { align-self:center; background:#ffd814; border:1px solid #fcd200; border-radius:20px; padding:0.45rem 1rem; font-weight:700; font-size:0.85rem; color:#0f1111 !important; text-decoration:none !important; white-space:nowrap; }
.sf-result { display:grid; grid-template-columns:180px 1fr 160px; gap:1rem; padding:1rem 0; border-bottom:1px solid #e7e7e7; background:#fff; }
/* Must beat display:grid above — otherwise [hidden] alone does not hide results */
.sf-result[hidden], .sf-result.is-hidden { display:none !important; }
.sf-result.is-sponsored { background:#fff; }
.sf-result-image { width:180px; height:180px; background:#fff; display:grid; place-items:center; font-size:3.2rem; position:relative; }
.sf-result-main { min-width:0; }
.sf-sponsored-label { font-size:0.75rem; color:#565959; margin-bottom:0.15rem; }
.sf-result-title { margin:0 0 0.25rem; font-size:1.05rem; font-weight:400; line-height:1.35; }
.sf-result-title a { color:#0f1111 !important; text-decoration:none !important; }
.sf-result-title a:hover { color:#c7511f !important; }
.sf-badge-row { display:flex; flex-wrap:wrap; gap:0.35rem; margin:0.3rem 0 0.4rem; }
.sf-choice { background:#232f3e; color:#fff; font-size:0.7rem; font-weight:700; padding:0.15rem 0.4rem; display:inline-flex; align-items:center; }
.sf-choice em { font-style:normal; background:#e47911; padding:0.1rem 0.3rem; margin-left:0.15rem; }
.sf-bestseller { background:#e47911; color:#fff; font-size:0.7rem; font-weight:700; padding:0.15rem 0.4rem; }
.sf-coupon { border:1px solid #067d62; color:#067d62; font-size:0.72rem; font-weight:700; padding:0.1rem 0.35rem; background:#fff; }
.sf-limited { background:#cc0c39; color:#fff; font-size:0.7rem; font-weight:700; padding:0.15rem 0.4rem; }
.sf-stars { color:#de7921; font-size:0.9rem; margin-bottom:0.15rem; letter-spacing:-0.04em; }
.sf-stars .reviews { color:#007185 !important; margin-left:0.35rem; letter-spacing:0; font-size:0.85rem; text-decoration:none !important; }
.sf-bought { font-size:0.8rem; color:#0f1111; margin-bottom:0.25rem; }
.sf-attr-line { font-size:0.82rem; color:#565959; margin:0.15rem 0; }
.sf-price-block { display:flex; flex-direction:column; align-items:flex-start; gap:0.2rem; min-width:140px; }
.sf-price { color:#0f1111; font-weight:400; line-height:1; }
.sf-price .symbol { font-size:0.78rem; vertical-align:super; }
.sf-price .whole { font-size:1.65rem; font-family:Arial,sans-serif; }
.sf-price .fraction { font-size:0.78rem; vertical-align:super; }
.sf-list-price { font-size:0.82rem; color:#565959; }
.sf-list-price s { text-decoration:line-through; }
.sf-save { font-size:0.8rem; color:#cc0c39; }
.sf-badge-fast { display:inline-block; font-size:0.78rem; font-weight:800; color:#00a8e1; background:transparent; padding:0; }
.sf-badge-fast::before { content:"✓ "; }
.sf-delivery { font-size:0.82rem; color:#0f1111; margin-top:0.25rem; line-height:1.35; }
.sf-delivery strong { font-weight:700; }
.sf-ships { font-size:0.8rem; color:#565959; }
.sf-add-btn { margin-top:0.45rem; background:#ffd814; border:1px solid #fcd200; border-radius:20px; padding:0.35rem 0.85rem; font-size:0.82rem; font-weight:500; cursor:pointer; color:#0f1111; width:100%; max-width:140px; }
.sf-add-btn:hover { background:#f7ca00; }
.sf-strip { margin-top:1.25rem; padding-top:0.85rem; border-top:1px solid #ddd; }
.sf-strip h3 { margin:0 0 0.75rem; font-size:1.15rem; font-weight:700; color:#0f1111; }
.sf-carousel { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(140px,1fr); gap:0.75rem; overflow-x:auto; padding-bottom:0.35rem; }
.sf-mini-card { border:1px solid #d5d9d9; border-radius:8px; padding:0.65rem; background:#fff; min-width:140px; }
.sf-mini-card .thumb { height:90px; display:grid; place-items:center; font-size:2rem; margin-bottom:0.4rem; background:#f7f8f8; }
.sf-mini-card .title { font-size:0.82rem; color:#0f1111; line-height:1.3; margin:0 0 0.25rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sf-mini-card .price { font-size:0.9rem; font-weight:700; color:#0f1111; }
.sf-pagination-amazon { display:flex; justify-content:center; gap:0.35rem; margin-top:1.25rem; padding:0.75rem 0; }
.sf-pagination-amazon a, .sf-pagination-amazon span { min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d5d9d9; border-radius:8px; background:#fff; color:#0f1111 !important; text-decoration:none !important; font-size:0.9rem; padding:0 0.55rem; }
.sf-pagination-amazon .current { border-color:#e77600; box-shadow:0 0 0 1px #e77600; font-weight:700; }
.sf-crumb { padding:0.55rem 1rem; font-size:0.8rem; color:#565959; border-bottom:1px solid #ddd; background:#fff; }
.sf-pdp { display:grid; grid-template-columns:1.05fr 1.2fr 0.85fr; gap:1.25rem; padding:1.1rem 1.15rem 1.5rem; background:#fff; }
.sf-thumbs { display:flex; flex-direction:column; gap:0.4rem; float:left; margin-right:0.65rem; }
.sf-thumbs button { width:40px; height:40px; border:1px solid #d5d9d9; background:#fff; cursor:pointer; font-size:1.1rem; border-radius:4px; }
.sf-thumbs button.selected { border-color:#e77600; box-shadow:0 0 0 1px #e77600; }
.sf-pdp-gallery { border:1px solid #d5d9d9; background:#fff; min-height:360px; display:grid; place-items:center; font-size:5.5rem; border-radius:4px; }
.sf-pdp-info h1 { margin:0 0 0.35rem; font-size:1.4rem; line-height:1.3; font-weight:400; color:#0f1111; }
.sf-brand-link { font-size:0.9rem; margin-bottom:0.35rem; }
.sf-rating-row { display:flex; flex-wrap:wrap; gap:0.65rem; align-items:center; padding-bottom:0.65rem; border-bottom:1px solid #e7e7e7; margin-bottom:0.65rem; font-size:0.88rem; }
.sf-pdp-price-row { padding:0.35rem 0 0.75rem; }
.sf-overview-icons { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; margin:0.85rem 0; padding:0.65rem 0; border-block:1px solid #e7e7e7; text-align:center; font-size:0.72rem; }
.sf-bullets { margin:0.5rem 0 0; padding-left:1.15rem; color:#0f1111; font-size:0.92rem; }
.sf-bullets li { margin-bottom:0.4rem; }
.sf-buybox { border:1px solid #d5d9d9; border-radius:8px; padding:1rem; background:#fff; align-self:start; }
.sf-buybox .availability { color:#007600; font-size:1.05rem; margin-bottom:0.35rem; }
.sf-buybox .availability.out { color:#b12704; }
.sf-seller { font-size:0.85rem; color:#0f1111; margin:0.65rem 0; line-height:1.4; }
.sf-qty { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; font-size:0.9rem; }
.sf-qty select { padding:0.35rem 0.5rem; border:1px solid #d5d9d9; border-radius:8px; background:#f0f2f2; font:inherit; }
.sf-buybox .btn { width:100%; margin-bottom:0.5rem; border-radius:20px; border:1px solid transparent; }
.sf-btn-cart { background:#ffd814 !important; border-color:#fcd200 !important; color:#0f1111 !important; }
.sf-btn-buy { background:#ffa41c !important; border-color:#ff8f00 !important; color:#0f1111 !important; }
.sf-section { padding:1.15rem; border-top:1px solid #ddd; background:#fff; }
.sf-section h2 { margin:0 0 0.85rem; font-size:1.35rem; font-weight:700; color:#0f1111; }
.sf-specs { width:100%; border-collapse:collapse; font-size:0.9rem; }
.sf-specs th, .sf-specs td { text-align:left; padding:0.55rem 0.65rem; border-bottom:1px solid #e7e7e7; vertical-align:top; }
.sf-specs th { width:32%; background:#fff; color:#0f1111; font-weight:700; }
.sf-review { border-top:1px solid #e7e7e7; padding:1rem 0; background:#fff; }
.sf-variant-row { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.45rem; }
.sf-variant { border:1px solid #8d9096; padding:0.4rem 0.7rem; font-size:0.85rem; color:#0f1111; background:#fff; border-radius:8px; }
.sf-variant.selected { border-color:#e77600; box-shadow:0 0 0 1px #e77600; }
.sf-fbt { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0.75rem; align-items:center; }
.sf-fbt-item { border:1px solid #d5d9d9; border-radius:8px; padding:0.75rem; text-align:center; }
.sf-histogram { display:grid; grid-template-columns:120px 1fr 48px; gap:0.35rem 0.65rem; align-items:center; max-width:420px; margin-bottom:1rem; font-size:0.85rem; }
.sf-histogram .bar { height:16px; background:#f0f2f2; border-radius:2px; overflow:hidden; }
.sf-histogram .bar > i { display:block; height:100%; background:#de7921; }
.sf-cart-toast { position:fixed; right:1rem; bottom:1rem; z-index:9999; background:#067d62; color:#fff; padding:0.75rem 1rem; border-radius:8px; font-size:0.9rem; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,0.18); opacity:0; transform:translateY(12px); pointer-events:none; transition:0.2s ease; }
.sf-cart-toast.visible { opacity:1; transform:none; }
.sf-cart-layout { display:grid; grid-template-columns:1fr 320px; gap:1rem; padding:1rem; background:#eaeded; }
.sf-cart-main { background:#fff; border-radius:8px; padding:1rem 1.15rem 1.25rem; }
.sf-cart-line { display:grid; grid-template-columns:100px 1fr auto; gap:0.85rem; padding:1rem 0; border-top:1px solid #e7e7e7; }
.sf-cart-aside { background:#fff; border-radius:8px; padding:1rem; align-self:start; border:1px solid #d5d9d9; }
.sf-checkout-grid { display:grid; grid-template-columns:1fr 340px; gap:1rem; padding:1rem; background:#eaeded; }
.sf-checkout-panel { background:#fff; border-radius:8px; padding:1rem 1.15rem; margin-bottom:0.85rem; border:1px solid #d5d9d9; }
.sf-confirm { max-width:640px; margin:0 auto; background:#fff; border:1px solid #d5d9d9; border-radius:8px; padding:1.5rem; }

/* CareerMesh */
.cm-shell { background:#f3f2ef; border:1px solid var(--border); color:#000000e6; border-radius:12px; overflow:hidden; }
.cm-nav { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem; padding:0.55rem 1rem; background:#fff; border-bottom:1px solid #e0e0e0; }
.cm-logo { font-weight:800; font-size:1.25rem; color:#0a66c2 !important; text-decoration:none !important; letter-spacing:-0.03em; }
.cm-logo span { color:#004182; }
.cm-search { flex:1; min-width:180px; display:flex; }
.cm-search input { width:100%; border:0; background:#edf3f8; padding:0.55rem 0.75rem; border-radius:4px; font:inherit; }
.cm-nav-links { display:flex; gap:0.85rem; flex-wrap:wrap; font-size:0.82rem; }
.cm-nav-links a { color:#666 !important; text-decoration:none !important; }
.cm-nav-links a:hover { color:#0a66c2 !important; }
.cm-layout { display:grid; grid-template-columns:240px 1fr 280px; gap:1rem; padding:1rem; }
.cm-card { background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:1rem; margin-bottom:0.75rem; }
.cm-card h2, .cm-card h3 { margin:0 0 0.5rem; font-size:1rem; }
.cm-person, .cm-job { display:grid; grid-template-columns:64px 1fr auto; gap:0.75rem; padding:0.85rem 0; border-top:1px solid #eee; align-items:start; }
/* Must beat display:grid above — otherwise [hidden] alone does not hide cards */
.cm-person[hidden], .cm-job[hidden],
.cm-person.is-hidden, .cm-job.is-hidden { display:none !important; }
.cm-person:first-of-type, .cm-job:first-of-type { border-top:0; }
.cm-avatar { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#0a66c2,#70b5f9); color:#fff; display:grid; place-items:center; font-weight:700; font-size:1.1rem; }
.cm-name { margin:0; font-size:1rem; font-weight:650; }
.cm-name a { color:rgba(0,0,0,0.9) !important; text-decoration:none !important; }
.cm-name a:hover { color:#0a66c2 !important; text-decoration:underline !important; }
.cm-headline { margin:0.15rem 0; font-size:0.9rem; color:rgba(0,0,0,0.6); }
.cm-meta { font-size:0.8rem; color:rgba(0,0,0,0.5); }
.cm-badge { display:inline-block; font-size:0.7rem; font-weight:700; padding:0.15rem 0.4rem; border-radius:4px; background:#eaf3ff; color:#0a66c2; margin-right:0.25rem; }
.cm-btn { border:1px solid #0a66c2; color:#0a66c2 !important; background:#fff; border-radius:999px; padding:0.35rem 0.9rem; font-weight:650; font-size:0.85rem; cursor:pointer; text-decoration:none !important; }
.cm-btn.primary { background:#0a66c2; color:#fff !important; }
.cm-btn:hover { background:#eaf3ff; }
.cm-profile-banner { height:120px; background:linear-gradient(90deg,#0a66c2,#378fe9 50%,#b6d4f2); border-radius:8px 8px 0 0; }
.cm-profile-head { display:grid; grid-template-columns:110px 1fr; gap:1rem; margin-top:-40px; padding:0 1rem 1rem; }
.cm-profile-avatar { width:110px; height:110px; border-radius:50%; border:4px solid #fff; background:linear-gradient(135deg,#0a66c2,#70b5f9); color:#fff; display:grid; place-items:center; font-size:2rem; font-weight:800; }
.cm-exp-item, .cm-edu-item { display:grid; grid-template-columns:48px 1fr; gap:0.75rem; padding:0.75rem 0; border-top:1px solid #eee; }
.cm-skill { display:inline-block; border:1px solid #e0e0e0; border-radius:999px; padding:0.25rem 0.65rem; margin:0.2rem; font-size:0.85rem; background:#fff; }
.cm-filters label { display:flex; gap:0.4rem; align-items:center; font-size:0.88rem; margin-bottom:0.35rem; color:rgba(0,0,0,0.7); cursor:pointer; }
.cm-criteria { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:0.5rem; margin:0.75rem 0; }
.cm-criteria div { background:#f3f2ef; border-radius:6px; padding:0.55rem 0.65rem; font-size:0.85rem; }
.cm-sidebar-list { list-style:none; margin:0; padding:0; }
.cm-sidebar-list li { padding:0.4rem 0; border-top:1px solid #eee; font-size:0.88rem; }
.cm-sidebar-list li:first-child { border-top:0; }

/* LocalFind */
.lf-shell { background:#fff; border:1px solid var(--border); color:#222; border-radius:12px; overflow:hidden; }
.lf-top { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; padding:0.85rem 1rem; background:#d32323; color:#fff; }
.lf-logo { font-weight:800; font-size:1.35rem; color:#fff !important; text-decoration:none !important; }
.lf-logo span { color:#ffcfcf; }
.lf-top .lf-search { flex:1; display:flex; min-width:220px; gap:0.35rem; }
.lf-top input { flex:1; border:0; padding:0.6rem 0.75rem; font:inherit; border-radius:4px; }
.lf-top button { border:0; background:#1877f2; color:#fff; font-weight:700; padding:0 1rem; border-radius:4px; cursor:pointer; }
.lf-layout { display:grid; grid-template-columns:260px 1fr; gap:0; }
.lf-filters { border-right:1px solid #e6e6e6; padding:1rem; background:#fafafa; }
.lf-filters h3 { margin:0 0 0.65rem; font-size:1rem; }
.lf-filters h4 { margin:0.85rem 0 0.4rem; font-size:0.85rem; color:#666; }
.lf-filters label { display:flex; gap:0.4rem; font-size:0.88rem; margin-bottom:0.3rem; color:#333; }
.lf-results { padding:1rem; }
.lf-results-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.85rem; }
.lf-biz { display:grid; grid-template-columns:120px 1fr auto; gap:1rem; padding:1rem 0; border-bottom:1px solid #eee; }
/* Must beat display:grid above — otherwise [hidden] alone does not hide listings */
.lf-biz[hidden], .lf-biz.is-hidden { display:none !important; }
.lf-filters label { cursor:pointer; align-items:center; }
.lf-filter-note { font-size:0.8rem; color:#666; margin:0 0 0.65rem; }
.lf-count { color:#888; font-size:0.8rem; }
.lf-clear-btn { margin-top:0.85rem; width:100%; border:1px solid #d32323; background:#fff; color:#d32323; font-weight:700; padding:0.45rem 0.75rem; border-radius:4px; cursor:pointer; font:inherit; }
.lf-clear-btn:hover { background:#fde8e8; }
.lf-empty { padding:1rem 0; color:#666; font-size:0.95rem; }
.lf-results-meta select { font:inherit; border:1px solid #ccc; border-radius:4px; padding:0.25rem 0.4rem; }
.lf-biz-img { width:120px; height:120px; border-radius:4px; background:linear-gradient(135deg,#f0f0f0,#e0e7ff); display:grid; place-items:center; font-size:2.4rem; border:1px solid #eee; }
.lf-biz-name { margin:0 0 0.25rem; font-size:1.15rem; font-weight:700; }
.lf-biz-name a { color:#0073bb !important; text-decoration:none !important; }
.lf-biz-name a:hover { text-decoration:underline !important; }
.lf-stars { color:#f15c4f; font-size:0.9rem; margin-bottom:0.25rem; }
.lf-stars .count { color:#0073bb; }
.lf-cats { font-size:0.85rem; color:#666; margin-bottom:0.25rem; }
.lf-addr { font-size:0.88rem; color:#333; }
.lf-meta-row { font-size:0.82rem; color:#666; margin-top:0.2rem; }
.lf-price { color:#0a0; font-weight:700; letter-spacing:0.05em; }
.lf-badge { display:inline-block; font-size:0.72rem; font-weight:700; padding:0.12rem 0.4rem; border-radius:3px; margin-right:0.25rem; background:#f5f5f5; color:#333; border:1px solid #e0e0e0; }
.lf-badge.open { background:#e6f4ea; color:#137333; border-color:#ceead6; }
.lf-badge.closed { background:#fce8e6; color:#c5221f; border-color:#f5c6c2; }
.lf-biz-side { text-align:right; min-width:120px; font-size:0.85rem; color:#333; }
.lf-phone { font-weight:700; color:#0073bb; display:block; margin-bottom:0.35rem; }
.lf-detail-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:1.25rem; padding:1.25rem; border-bottom:1px solid #eee; }
.lf-hours { width:100%; border-collapse:collapse; font-size:0.9rem; }
.lf-hours th, .lf-hours td { text-align:left; padding:0.4rem 0.5rem; border-bottom:1px solid #eee; }
.lf-map { height:180px; background:linear-gradient(135deg,#dbeafe,#e2e8f0); border:1px solid #ddd; display:grid; place-items:center; color:#475569; border-radius:4px; margin:0.75rem 0; }
.lf-review { border-top:1px solid #eee; padding:0.85rem 0; }
.lf-amenity { display:inline-block; border:1px solid #e0e0e0; border-radius:999px; padding:0.25rem 0.6rem; margin:0.2rem; font-size:0.82rem; background:#fafafa; }

/* Nestly */
.nl-shell { border:1px solid #d1d5db; background:#fff; color:#2a2a33; font-family:Arial,"Segoe UI",sans-serif; border-radius:12px; overflow:hidden; }
.nl-top { display:flex; flex-wrap:wrap; align-items:center; gap:0.65rem; padding:0.65rem 1rem; background:#fff; border-bottom:1px solid #e5e7eb; }
.nl-logo { font-weight:800; font-size:1.45rem; color:#006aff !important; text-decoration:none !important; letter-spacing:-0.04em; }
.nl-search-bar { flex:1; display:flex; min-width:220px; gap:0; border:1px solid #a7b0be; border-radius:8px; overflow:hidden; }
.nl-search-bar input { flex:1; border:0; padding:0.7rem 0.85rem; font:inherit; font-size:0.95rem; min-width:0; }
.nl-search-bar button { border:0; background:#006aff; color:#fff; font-weight:700; padding:0 1.1rem; cursor:pointer; }
.nl-top-links { display:flex; gap:0.85rem; flex-wrap:wrap; font-size:0.88rem; }
.nl-top-links a { color:#2a2a33 !important; text-decoration:none !important; font-weight:600; }
.nl-layout { display:grid; grid-template-columns:280px 1fr 1fr; min-height:640px; }
.nl-filters { border-right:1px solid #e5e7eb; padding:0.9rem 1rem 1.25rem; background:#fff; overflow:auto; }
.nl-filters h3 { margin:0 0 0.65rem; font-size:1rem; }
.nl-filters h4 { margin:0.85rem 0 0.4rem; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280; }
.nl-filters label { display:flex; gap:0.4rem; align-items:center; font-size:0.88rem; margin-bottom:0.3rem; color:#374151; cursor:pointer; }
.nl-price-row { display:flex; gap:0.4rem; align-items:center; }
.nl-price-row input, .nl-filters select { width:100%; padding:0.45rem 0.5rem; border:1px solid #c5cbd5; border-radius:6px; font:inherit; font-size:0.88rem; }
.nl-btn { border:1px solid #006aff; background:#006aff; color:#fff !important; border-radius:8px; padding:0.55rem 0.85rem; font-weight:700; font-size:0.9rem; cursor:pointer; text-align:center; text-decoration:none !important; }
.nl-btn.ghost { background:#fff; color:#006aff !important; }
.nl-list { border-right:1px solid #e5e7eb; background:#f9fafb; overflow:auto; max-height:720px; }
.nl-list-header { position:sticky; top:0; z-index:2; background:#f9fafb; padding:0.75rem 1rem; border-bottom:1px solid #e5e7eb; display:flex; justify-content:space-between; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.nl-list-header h2 { margin:0; font-size:1rem; font-weight:700; }
.nl-card { display:grid; grid-template-columns:140px 1fr; gap:0.75rem; padding:0.85rem 1rem; border-bottom:1px solid #e5e7eb; background:#fff; }
.nl-card:hover { background:#f0f7ff; }
.nl-card.is-hidden, .nl-card[hidden] { display:none !important; }
.nl-card-img { width:140px; height:110px; border-radius:8px; background:linear-gradient(135deg,#dbeafe,#e2e8f0); display:grid; place-items:center; font-size:2.2rem; position:relative; }
.nl-card-img .nl-badge { position:absolute; left:6px; top:6px; background:#006aff; color:#fff; font-size:0.68rem; font-weight:800; padding:0.15rem 0.4rem; border-radius:4px; }
.nl-card-img .nl-badge.sale { background:#111827; }
.nl-card-img .nl-badge.pending { background:#b45309; }
.nl-price { font-size:1.25rem; font-weight:800; color:#111827; margin:0 0 0.2rem; }
.nl-facts { font-size:0.9rem; color:#374151; margin:0 0 0.25rem; }
.nl-addr { font-size:0.85rem; color:#4b5563; margin:0; line-height:1.35; }
.nl-addr a { color:#006aff !important; text-decoration:none !important; }
.nl-meta { font-size:0.78rem; color:#6b7280; margin-top:0.3rem; }
.nl-broker { font-size:0.75rem; color:#9ca3af; margin-top:0.2rem; }
.nl-map { background:linear-gradient(0deg,rgba(0,106,255,0.06),rgba(0,106,255,0.06)), #e8eef5; position:relative; min-height:640px; overflow:hidden; }
.nl-map-pin { position:absolute; transform:translate(-50%,-100%); background:#fff; border:2px solid #006aff; color:#006aff; font-weight:800; font-size:0.78rem; padding:0.28rem 0.45rem; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,0.12); white-space:nowrap; text-decoration:none !important; }
.nl-map-pin:hover, .nl-map-pin.active { background:#006aff; color:#fff !important; }
.nl-map-label { position:absolute; left:12px; top:12px; background:rgba(255,255,255,0.95); border:1px solid #d1d5db; border-radius:8px; padding:0.5rem 0.7rem; font-size:0.8rem; color:#374151; }
.nl-detail-top { display:flex; flex-wrap:wrap; gap:0.75rem; justify-content:space-between; padding:1rem 1.15rem; border-bottom:1px solid #e5e7eb; }
.nl-detail-price { font-size:1.85rem; font-weight:800; margin:0; }
.nl-gallery { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:160px 160px; gap:0.4rem; padding:0.75rem 1rem; }
.nl-gallery .main { grid-row:1 / span 2; background:linear-gradient(135deg,#bfdbfe,#e2e8f0); border-radius:10px; display:grid; place-items:center; font-size:4rem; }
.nl-gallery .thumb { background:linear-gradient(135deg,#e2e8f0,#f1f5f9); border-radius:8px; display:grid; place-items:center; font-size:1.8rem; }
.nl-detail-grid { display:grid; grid-template-columns:1.4fr 0.8fr; gap:1rem; padding:1rem 1.15rem 1.5rem; }
.nl-panel { border:1px solid #e5e7eb; border-radius:10px; padding:1rem; background:#fff; }
.nl-kv { display:grid; grid-template-columns:1fr 1fr; gap:0.55rem 1rem; font-size:0.9rem; }
.nl-contact { border:1px solid #e5e7eb; border-radius:10px; padding:1rem; background:#f8fafc; position:sticky; top:0.75rem; }
.nl-tag { display:inline-block; background:#eff6ff; color:#1d4ed8; border-radius:999px; padding:0.2rem 0.55rem; font-size:0.78rem; font-weight:700; margin:0.15rem; }

@media (max-width:1100px) { .nl-layout { grid-template-columns:240px 1fr; } .nl-map { display:none; } }
@media (max-width:960px) {
  .sf-layout, .sf-pdp, .cm-layout, .lf-layout, .lf-detail-hero, .sf-cart-layout, .sf-checkout-grid, .nl-detail-grid { grid-template-columns:1fr; }
  .sf-result { grid-template-columns:120px 1fr; }
  .sf-result-image { width:120px; height:120px; font-size:2.2rem; }
  .lf-biz { grid-template-columns:80px 1fr; }
  .lf-biz-side { grid-column:1/-1; text-align:left; display:flex; flex-wrap:wrap; gap:0.75rem; }
}
@media (max-width:800px) {
  .nl-layout { grid-template-columns:1fr; }
  .nl-filters { border-right:0; border-bottom:1px solid #e5e7eb; }
  .nl-card { grid-template-columns:110px 1fr; }
  .sf-result { grid-template-columns:1fr; }
  .sf-result-image { width:100%; height:160px; }
}