/* ═══════════════════════════════════════════════════════
   Zelmora Studio — Public Frontend CSS
   Premium dark mode · Poppins · Purple/Lavender palette
═══════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────── */
:root {
  --bg:        #1E1D23;
  --bg2:       #16151C;
  --surface:   #25232B;
  --surface2:  #2D2B36;
  --border:    #3D3849;
  --purple:    #4B3F58;
  --purple2:   #5c4e6e;
  --lavender:  #8A7FA2;
  --soft:      #D9D5E6;
  --white:     #F5F4F8;
  --beige:     #E5D6CC;
  --gold:      #C9A96E;
  --green:     #5a9f6a;
  --glow:      rgba(75,63,88,.4);
  --glow2:     rgba(138,127,162,.15);

  --font:      'Poppins', system-ui, sans-serif;
  --nav-h:     68px;
  --radius:    14px;
  --radius-sm: 8px;
  --transition: .22s ease;
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--soft);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ── Typography ──────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  color: var(--white);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p  { color: var(--soft); line-height: 1.8; }
small { font-size: .8rem; color: var(--lavender); }

/* ── Layout helpers ──────────────────────────────────── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.text-center { text-align: center; }
.text-lavender { color: var(--lavender); }
.text-gold { color: var(--gold); }

/* ── Section label ───────────────────────────────────── */
.section-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lavender);
  background: rgba(138,127,162,.1);
  border: 1px solid rgba(138,127,162,.2);
  padding: .35rem .9rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}
.section-title { margin-bottom: .6rem; }
.section-desc { color: var(--lavender); max-width: 560px; margin: 0 auto; font-size: .97rem; }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.6rem;
  border-radius: 50px;
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1;
}
.btn-primary {
  background: var(--purple);
  color: var(--white);
  box-shadow: 0 4px 24px rgba(75,63,88,.4);
}
.btn-primary:hover {
  background: var(--purple2);
  box-shadow: 0 6px 30px rgba(75,63,88,.6);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--soft);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--lavender);
  color: var(--white);
  transform: translateY(-1px);
}
.btn-gold {
  background: var(--gold);
  color: #1a1920;
  font-weight: 700;
}
.btn-gold:hover { opacity: .88; transform: translateY(-1px); }
.btn-sm { padding: .5rem 1.1rem; font-size: .8rem; }
.btn-lg { padding: .9rem 2.2rem; font-size: .95rem; }

/* ── Cards ───────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  border-color: rgba(138,127,162,.3);
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
  transform: translateY(-3px);
}
.card-body { padding: 1.5rem; }
.card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card-img-square { aspect-ratio: 1; }

/* ── Glass card ──────────────────────────────────────── */
.card-glass {
  background: rgba(37,35,43,.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(138,127,162,.15);
  border-radius: var(--radius);
}

/* ── Navbar ──────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(30,29,35,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.nav-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .03em;
  text-decoration: none;
}
.nav-brand span { color: var(--lavender); }
.nav-links {
  display: flex;
  align-items: center;
  gap: .15rem;
}
.nav-link {
  padding: .5rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  color: var(--lavender);
  font-weight: 500;
  transition: all var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--white); background: var(--surface); }
.nav-cta { margin-left: .75rem; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--soft);
  padding: .4rem;
}

/* Mobile nav overrides consolidated below in the main RESPONSIVE section (~line 990) to avoid duplicate/conflicting rules. */

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  background: radial-gradient(ellipse 80% 60% at 50% -5%, rgba(75,63,88,.45) 0%, transparent 70%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(138,127,162,.06) 0%, transparent 60%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 660px;
}
.hero-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: 1.1rem;
}
.hero h1 { margin-bottom: 1.1rem; }
.hero-sub {
  font-size: 1.08rem;
  color: var(--lavender);
  margin-bottom: 2.25rem;
  max-width: 520px;
  line-height: 1.75;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(201,169,110,.1);
  border: 1px solid rgba(201,169,110,.25);
  color: var(--gold);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

/* ── Grid layouts ────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }
  .section { padding: 3.5rem 0; }
  .hero { min-height: auto; padding: 3.5rem 0; }
}

/* ── Blog card ───────────────────────────────────────── */
.blog-card .card-img-wrap {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--surface2);
}
.blog-card .card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-card:hover .card-img-wrap img { transform: scale(1.04); }
.blog-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  color: var(--lavender);
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.blog-meta .cat-badge {
  background: rgba(75,63,88,.4);
  color: var(--soft);
  padding: .2rem .7rem;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 600;
}
.blog-card h3 { margin-bottom: .5rem; font-size: 1.05rem; }
.blog-card h3 a { color: var(--white); transition: color var(--transition); }
.blog-card h3 a:hover { color: var(--lavender); }
.blog-card p { font-size: .88rem; color: var(--lavender); line-height: 1.65; }
.blog-card .read-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--lavender);
  margin-top: 1rem;
  transition: color var(--transition);
}
.blog-card .read-more:hover { color: var(--white); }

/* ── Tool card ───────────────────────────────────────── */
.tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.tool-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--lavender));
  opacity: 0;
  transition: opacity var(--transition);
}
.tool-card:hover { border-color: rgba(138,127,162,.3); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.tool-card:hover::before { opacity: 1; }
.tool-icon {
  width: 52px;
  height: 52px;
  background: rgba(75,63,88,.3);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
}
.tool-status {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: 20px;
  margin-bottom: .75rem;
}
.status-active    { background: rgba(90,159,106,.15); color: #7ec98f; }
.status-coming_soon { background: rgba(201,169,110,.12); color: var(--gold); }
.status-beta      { background: rgba(138,127,162,.15); color: var(--soft); }
.tool-card h3 { margin-bottom: .5rem; }
.tool-card p  { font-size: .87rem; color: var(--lavender); margin-bottom: 1.25rem; }
.tool-features { list-style: none; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: .4rem; }
.tool-features li {
  font-size: .82rem;
  color: var(--soft);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.tool-features li::before { content: '✦'; color: var(--lavender); font-size: .65rem; margin-top: .3rem; flex-shrink: 0; }

/* ── Product card ────────────────────────────────────── */
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}
.product-card:hover { border-color: rgba(138,127,162,.3); transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0,0,0,.25); }
.product-img {
  aspect-ratio: 4/3;
  background: var(--surface2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-img img { transform: scale(1.04); }
.product-img-placeholder {
  font-size: 2.5rem;
  opacity: .3;
}
.product-body { padding: 1.25rem; }
.product-cat {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: .4rem;
}
.product-card h3 { font-size: .98rem; margin-bottom: .4rem; }
.product-card p  { font-size: .83rem; color: var(--lavender); margin-bottom: 1rem; line-height: 1.6; }
.product-footer  { display: flex; align-items: center; justify-content: space-between; }
.product-price   { font-size: .9rem; font-weight: 700; color: var(--gold); }

/* ── FAQ accordion ───────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item.open { border-color: rgba(138,127,162,.3); }
.faq-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--white);
  font-size: .92rem;
  font-weight: 500;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition);
}
.faq-btn:hover { color: var(--soft); }
.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(138,127,162,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  color: var(--lavender);
  transition: transform var(--transition), background var(--transition);
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: rgba(138,127,162,.25); }
.faq-body {
  display: none;
  padding: 0 1.5rem 1.25rem;
  color: var(--lavender);
  font-size: .9rem;
  line-height: 1.75;
}
.faq-item.open .faq-body { display: block; }

/* ── Forms ───────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: .45rem;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  background: rgba(22,21,28,.8);
  border: 1px solid var(--border);
  color: var(--white);
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: .9rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input::placeholder, .form-textarea::placeholder { color: rgba(138,127,162,.5); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--lavender);
  box-shadow: 0 0 0 3px rgba(138,127,162,.12);
}
.form-textarea { resize: vertical; min-height: 130px; }

/* ── Newsletter section ──────────────────────────────── */
.newsletter-section {
  background: linear-gradient(135deg, rgba(75,63,88,.3) 0%, rgba(30,29,35,0) 100%);
  border: 1px solid rgba(138,127,162,.15);
  border-radius: var(--radius);
  padding: 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(75,63,88,.25), transparent 70%);
  pointer-events: none;
}
.newsletter-form {
  display: flex;
  gap: .75rem;
  max-width: 480px;
  margin: 1.75rem auto 0;
}
.newsletter-form .form-input { flex: 1; border-radius: 50px; }
@media (max-width: 560px) { .newsletter-form { flex-direction: column; } }

/* ── Breadcrumbs ─────────────────────────────────────── */
.breadcrumbs { margin-bottom: 2rem; }
.breadcrumbs ol { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; list-style: none; }
.breadcrumbs li { font-size: .8rem; color: var(--lavender); }
.breadcrumbs li a { color: var(--lavender); transition: color var(--transition); }
.breadcrumbs li a:hover { color: var(--white); }
.breadcrumbs li + li::before { content: '/'; margin-right: .5rem; opacity: .4; }
.breadcrumbs li.current { color: var(--soft); }

/* ── Single post ─────────────────────────────────────── */
.post-content {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--soft);
}
.post-content h2 { margin: 2.25rem 0 .9rem; font-size: 1.45rem; }
.post-content h3 { margin: 1.75rem 0 .7rem; font-size: 1.15rem; }
.post-content p  { margin-bottom: 1.25rem; }
.post-content ul, .post-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: .5rem; color: var(--soft); }
.post-content a  { color: var(--lavender); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--white); }
.post-content blockquote {
  border-left: 3px solid var(--purple);
  padding: .9rem 1.5rem;
  background: rgba(75,63,88,.15);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--lavender);
}
.post-content code {
  background: var(--surface2);
  padding: .15rem .45rem;
  border-radius: 4px;
  font-size: .88em;
  color: var(--beige);
}
.post-content pre {
  background: var(--surface2);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 1.5rem 0;
}
.post-content img {
  border-radius: var(--radius-sm);
  margin: 1.5rem 0;
  width: 100%;
}

/* ── Table of contents ───────────────────────────────── */
.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.toc-title {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: .75rem;
}
.toc ol { list-style: decimal; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.toc li { font-size: .88rem; }
.toc a { color: var(--lavender); transition: color var(--transition); }
.toc a:hover { color: var(--white); }

/* ── Share buttons ───────────────────────────────────── */
.share-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .5rem 1rem;
  border-radius: 50px;
  border: 1px solid var(--border);
  color: var(--lavender);
  transition: all var(--transition);
  background: none;
}
.share-btn:hover { border-color: var(--lavender); color: var(--white); }

/* ── Footer ──────────────────────────────────────────── */
.footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-brand { font-size: 1.15rem; font-weight: 700; color: var(--white); margin-bottom: .6rem; }
.footer-brand span { color: var(--lavender); }
.footer-tagline { color: var(--lavender); font-size: .85rem; line-height: 1.65; }
.footer-heading { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: .45rem; }
.footer-links a { font-size: .85rem; color: var(--lavender); transition: color var(--transition); }
.footer-links a:hover { color: var(--white); }
.footer-social { display: flex; gap: .75rem; margin-top: 1.25rem; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  color: var(--lavender);
  transition: all var(--transition);
}
.footer-social a:hover { border-color: var(--lavender); color: var(--white); background: var(--surface); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8rem;
  color: var(--lavender);
}
.footer-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-legal a { color: var(--lavender); transition: color var(--transition); }
.footer-legal a:hover { color: var(--white); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── Alert / flash ───────────────────────────────────── */
.alert {
  padding: .9rem 1.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-size: .88rem;
  line-height: 1.5;
}
.alert-success { background: rgba(90,159,106,.12); border: 1px solid rgba(90,159,106,.35); color: #7ec98f; }
.alert-error   { background: rgba(192,84,95,.12);  border: 1px solid rgba(192,84,95,.35);  color: #e89; }
.alert-info    { background: rgba(138,127,162,.1);  border: 1px solid rgba(138,127,162,.3);  color: var(--soft); }

/* ── Badges ──────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
}

/* ── Pagination ──────────────────────────────────────── */
.pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.page-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  color: var(--lavender);
  transition: all var(--transition);
}
.page-link:hover { border-color: var(--lavender); color: var(--white); }
.page-link.active { background: var(--purple); border-color: var(--purple); color: var(--white); }

/* ── Divider with glow ───────────────────────────────── */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 4rem 0;
}

/* ── Why section features ────────────────────────────── */
.feature-item { display: flex; gap: 1rem; align-items: flex-start; }
.feature-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(75,63,88,.25);
  border: 1px solid rgba(138,127,162,.15);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.feature-item h4 { margin-bottom: .25rem; font-size: .97rem; }
.feature-item p  { font-size: .85rem; color: var(--lavender); line-height: 1.6; }

/* ── Founder section ─────────────────────────────────── */
.founder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem;
  display: flex;
  gap: 2.5rem;
  align-items: center;
}
.founder-avatar {
  width: 100px; height: 100px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface2);
  border: 2px solid var(--border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
}
.founder-name { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: .25rem; }
.founder-role { font-size: .8rem; color: var(--lavender); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .85rem; }
.founder-bio  { color: var(--lavender); font-size: .9rem; line-height: 1.75; }
@media (max-width: 640px) { .founder-card { flex-direction: column; gap: 1.5rem; text-align: center; } }

/* ── Related posts ───────────────────────────────────── */
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
@media (max-width: 768px) { .related-grid { grid-template-columns: 1fr; } }

/* ── Search bar ──────────────────────────────────────── */
.search-bar {
  display: flex;
  gap: .5rem;
  max-width: 420px;
}
.search-bar input { flex: 1; border-radius: 50px; }
.search-bar button { border-radius: 50px; padding: .75rem 1.4rem; }

/* ── Animations ──────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .fade-in { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; will-change: opacity, transform; }
  .js .fade-in.visible { opacity: 1; transform: none; }
  .js .fade-up { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
  .js .fade-up.visible { opacity: 1; transform: none; }
}

/* ── 404 ─────────────────────────────────────────────── */
.page-404 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
}
.page-404 .code { font-size: 7rem; font-weight: 800; color: var(--surface2); line-height: 1; margin-bottom: 1rem; }

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple2); }

/* ── Utility ─────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.gap-1 { gap: .5rem; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

/* ── HP field (honeypot) ─────────────────────────────── */
.hp-field { display: none !important; visibility: hidden; position: absolute; left: -9999px; }

/* ═══════════════════════════════════════════════════════
   Custom WYSIWYG Editor — ZEditor
═══════════════════════════════════════════════════════ */
.ze-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}
.ze-toolbar {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: .4rem .6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: center;
}
.ze-toolbar-row { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; width: 100%; }
.ze-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--lavender);
  padding: .3rem .55rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: .82rem;
  font-family: inherit;
  transition: all .15s;
  line-height: 1;
  min-width: 28px;
}
.ze-btn:hover { background: var(--surface); border-color: var(--border); color: var(--white); }
.ze-btn:active { background: var(--purple); color: var(--white); }
.ze-sep { width: 1px; height: 18px; background: var(--border); margin: 0 .15rem; }
.ze-select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--soft);
  padding: .28rem .5rem;
  border-radius: 5px;
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.ze-editor {
  min-height: 420px;
  max-height: 700px;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  outline: none;
  color: var(--soft);
  font-size: .95rem;
  line-height: 1.8;
  font-family: var(--font);
}
.ze-editor:focus { box-shadow: inset 0 0 0 2px rgba(138,127,162,.2); }
.ze-editor h2 { font-size: 1.35rem; color: var(--white); margin: 1.5rem 0 .6rem; }
.ze-editor h3 { font-size: 1.1rem;  color: var(--white); margin: 1.25rem 0 .5rem; }
.ze-editor h4 { font-size: .98rem;  color: var(--white); margin: 1rem 0 .4rem; }
.ze-editor p  { margin-bottom: .9rem; }
.ze-editor a  { color: var(--lavender); text-decoration: underline; }
.ze-editor ul, .ze-editor ol { padding-left: 1.4rem; margin-bottom: .9rem; }
.ze-editor li { margin-bottom: .35rem; }
.ze-editor blockquote { border-left: 3px solid var(--purple); padding: .75rem 1.25rem; background: rgba(75,63,88,.15); margin: 1rem 0; font-style: italic; color: var(--lavender); }
.ze-editor pre { background: var(--surface2); padding: 1rem 1.25rem; border-radius: 6px; overflow-x: auto; font-family: monospace; font-size: .87rem; margin: 1rem 0; }
.ze-editor img { max-width: 100%; border-radius: 8px; margin: .75rem 0; }
.ze-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}
.ze-fullscreen .ze-toolbar { flex-shrink: 0; }
.ze-fullscreen .ze-editor  { flex: 1; max-height: none; }

/* ═══════════════════════════════════════════════════════
   SEO Analyzer Panel
═══════════════════════════════════════════════════════ */
.seo-panel { padding: 1rem 0 0; }
.seo-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--white);
}
.seo-score-badge {
  padding: .2rem .75rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  transition: all .3s;
}
.seo-checks { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .75rem; }
.seo-check-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8rem;
  line-height: 1.5;
}
.seo-check-item span:first-child { flex-shrink: 0; font-weight: 700; width: 14px; }
.seo-tips { display: flex; flex-direction: column; gap: .35rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.seo-tip-row { display: flex; justify-content: space-between; font-size: .78rem; }
.seo-tip-row span { color: var(--lavender); }
.seo-tip-row strong { color: var(--white); }

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

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Properly tested breakpoints
═══════════════════════════════════════════════════════ */

/* ── Large tablets / small laptops ── */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .hero h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
  .newsletter-section { padding: 2.5rem 2rem; }
}

/* ── Tablets ── */
@media (max-width: 768px) {
  :root { --nav-h: 60px; }

  /* Typography */
  h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  h2 { font-size: clamp(1.3rem, 4vw, 1.75rem); }

  /* Layout */
  .container, .container-sm { padding: 0 1.1rem; }
  .section    { padding: 3rem 0; }
  .section-sm { padding: 2rem 0; }
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }

  /* Hero */
  .hero { padding: 3rem 0; min-height: auto; }
  .hero-actions { gap: .75rem; }
  .hero-actions .btn { flex: 1; justify-content: center; }

  /* Nav — mobile open state */
  .nav-links {
    display: none !important;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    /* Fix: .navbar has backdrop-filter, which makes it the containing block
       for this position:fixed drawer. With bottom:0 the height collapsed to
       the navbar height (~0 visible), so the menu never opened fully.
       Use an explicit viewport-based height so it fills the screen. */
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    background: rgba(16,15,22,.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    padding: 1.25rem 1rem;
    gap: .2rem;
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--border);
    width: 100vw;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
  }
  .nav-links.open { display: flex !important; animation: navFadeIn .2s ease; }
  @media (prefers-reduced-motion: reduce) { .nav-links.open { animation: none; } }
  .nav-link {
    padding: 1rem 1.1rem;
    font-size: .95rem;
    border-radius: var(--radius-sm);
    border-left: none;
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-link:hover { background: var(--surface2); }
  .nav-cta {
    margin-left: 0;
    margin-top: .75rem;
    justify-content: center;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-sm) !important;
    min-height: 44px;
  }
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
  }
  .nav-toggle:hover { background: var(--surface); }

  /* Cards */
  .tool-card { padding: 1.5rem; }
  .founder-card { flex-direction: column; gap: 1.5rem; text-align: center; padding: 1.75rem; }

  /* Blog */
  .related-grid { grid-template-columns: 1fr; }
  .blog-meta { gap: .5rem; }

  /* Newsletter */
  .newsletter-section { padding: 2rem 1.25rem; }
  .newsletter-form { flex-direction: column; }

  /* Share bar */
  .share-bar { gap: .5rem; }
  .share-btn { font-size: .75rem; padding: .4rem .8rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .75rem; }
  .footer-legal { justify-content: center; }

  /* TOC */
  .toc { padding: 1rem; }

  /* Single post */
  .post-content { font-size: .95rem; }
  .post-content h2 { font-size: 1.25rem; }

  /* Search bar */
  .search-bar { max-width: 100%; }

  /* Blog sidebar — stack below on mobile */
  .blog-sidebar-wrap { flex-direction: column !important; }
  .blog-sidebar-wrap aside { width: 100% !important; }
}

/* ── Small phones ── */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.5rem; }
  .hero-sub { font-size: .9rem; }
  .hero-badge { font-size: .68rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .btn-lg { padding: .8rem 1.5rem; font-size: .88rem; }
  .section-label { font-size: .68rem; }
  .tool-card { padding: 1.25rem; }
  .product-body { padding: 1rem; }
  .pagination { gap: .3rem; }
  .page-link { width: 35px; height: 35px; font-size: .8rem; }
  .toc ol { padding-left: 1rem; }
  .newsletter-section { padding: 1.75rem 1rem; }
  h2 { font-size: 1.25rem; }
}

/* ── Very small ── */
@media (max-width: 360px) {
  .container, .container-sm { padding: 0 .85rem; }
  .hero h1 { font-size: 1.35rem; }
}

/* ── Prefers reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .fade-in, .fade-up { opacity: 1 !important; transform: none !important; }
}

/* ── Page-builder image control bar (Phase 4) ── */
.ze-imgbar{position:absolute;display:flex;gap:.25rem;align-items:center;background:#16151C;border:1px solid #3D3849;border-radius:8px;padding:.3rem;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.ze-imgbar button{background:#2D2B36;color:#F5F4F8;border:1px solid #3D3849;border-radius:5px;padding:.2rem .45rem;font-size:.72rem;cursor:pointer;line-height:1}
.ze-imgbar button:hover{background:#4B3F58}
.ze-imgbar i{width:1px;height:16px;background:#3D3849;display:inline-block;margin:0 .15rem}
.ze-editor img{max-width:100%;height:auto}
.nav-brand img{max-width:100%;height:auto}
/* ── Responsive 2-col split (Phase 3) ── */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:768px){.split-2{grid-template-columns:1fr}}

/* ── Premium media fallback + skeleton shimmer ── */
.media-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface2),rgba(75,63,88,.45));position:relative;overflow:hidden}
.media-fallback svg{width:38px;height:38px;color:var(--lavender);opacity:.6}
.media-fallback::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(217,213,230,.07) 50%,transparent 65%);background-size:220% 100%;animation:ze-shimmer 1.8s ease-in-out infinite}
.product-img-placeholder.media-fallback{font-size:0;opacity:1}
.blog-card h3, .product-card h3{letter-spacing:-.01em}
@keyframes ze-shimmer{0%{background-position:220% 0}100%{background-position:-220% 0}}
@media (prefers-reduced-motion: reduce){.media-fallback::after{animation:none}}

/* ====================================================================
   SUBSCRIPTION ECOSYSTEM — shop / auth / dashboard / tools
   Pure-CSS, hardware-accelerated (transform/opacity only). No libs.
   ==================================================================== */
.container{max-width:1140px;margin:0 auto;padding:0 1.25rem}
.muted{color:#6b6478}.muted-sm{color:#8a8398;font-size:.85rem}
.ta-r{text-align:right}

/* fade-in only animates when JS present (.js gate set in <head>) */
.fade-in{opacity:1;transform:none}
.js .fade-in{opacity:0;transform:translateY(10px);animation:zsFade .5s ease forwards}
@keyframes zsFade{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .fade-in{animation:none;opacity:1;transform:none}}

/* responsive auto grid */
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;margin:1.25rem 0 2.5rem}

/* ---- Shop ---- */
.shop-hero{padding:3rem 0 1rem;text-align:center}
.shop-h1{font-size:2.25rem;margin:0 0 .5rem}
.shop-lead{color:#6b6478;max-width:560px;margin:0 auto}
.shop-section{margin-top:1.5rem}
.shop-section-head{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid #ece9f1;padding-bottom:.5rem}
.shop-section-head h2{margin:0;font-size:1.4rem}
.shop-tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#8a7fa2;background:#f3f0f8;padding:.2rem .55rem;border-radius:999px}
.shop-card{display:flex;flex-direction:column;background:#fff;border:1px solid #ece9f1;border-radius:16px;padding:1.1rem;transition:transform .25s ease,box-shadow .25s ease}
.shop-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(75,63,88,.12)}
.shop-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.shop-card-media{aspect-ratio:4/3;border-radius:12px;overflow:hidden;margin-bottom:.75rem;background:#f3f0f8}
.shop-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.shop-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:#f3f0f8;color:#4B3F58}
.shop-icon svg,.shop-card-media .media-fallback svg,.product-img-placeholder.media-fallback svg{width:24px;height:24px}
.shop-card-media .media-fallback,.product-img-placeholder.media-fallback{display:grid;place-items:center;width:100%;height:100%;min-height:120px;color:#b7afc4;background:linear-gradient(110deg,#f3f0f8 30%,#ebe7f2 50%,#f3f0f8 70%);background-size:200% 100%;animation:zsShimmer 1.4s infinite}
@keyframes zsShimmer{to{background-position:-200% 0}}
.badge{font-size:.68rem;font-weight:600;padding:.18rem .5rem;border-radius:999px}
.badge-app{background:#efeafc;color:#6a4fb0}
.shop-card-title{font-size:1.08rem;margin:.1rem 0 .25rem}
.shop-card-sub{color:#6b6478;font-size:.9rem;flex:1}
.shop-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.9rem;gap:.5rem}
.price{font-weight:700;color:#2c2535}.price small{font-weight:500;color:#8a8398}
.soft-lock{margin:1.5rem 0}

/* ---- Buttons (extend existing) ---- */
.btn-gold{background:#C9A96E;color:#2c2535;border:none}
.btn-gold:hover{filter:brightness(1.05)}

/* ---- Auth (login / register) ---- */
.auth-wrap{min-height:60vh;display:grid;place-items:center;padding:3rem 1rem}
.auth-card{width:100%;max-width:420px;background:#fff;border:1px solid #ece9f1;border-radius:18px;padding:2rem;box-shadow:0 16px 40px rgba(75,63,88,.08)}
.auth-card h1{margin:0 0 .35rem;font-size:1.6rem}
.auth-sub{color:#6b6478;margin:0 0 1.4rem}
.auth-form .fld{margin-bottom:1rem}
.auth-form label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem;color:#2c2535}
.auth-form input{width:100%;padding:.7rem .85rem;border:1px solid #ddd6e6;border-radius:10px;font-size:.95rem;transition:border-color .2s ease,box-shadow .2s ease}
.auth-form input:focus{outline:none;border-color:#8a7fa2;box-shadow:0 0 0 3px rgba(138,127,162,.18)}
.btn-block{width:100%;justify-content:center}
.auth-alt{text-align:center;margin-top:1.1rem;color:#6b6478;font-size:.9rem}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Dashboard ---- */
.dash{padding:2.5rem 1.25rem}
.dash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.dash-title{margin:0;font-size:1.7rem}.dash-sub{color:#6b6478;margin:.2rem 0 0}
.dash-section{margin-top:2rem}
.dash-h2{font-size:1.25rem;border-bottom:1px solid #ece9f1;padding-bottom:.5rem}
.dash-card{background:#fff;border:1px solid #ece9f1;border-radius:16px;padding:1.25rem;transition:transform .25s ease,box-shadow .25s ease}
.dash-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(75,63,88,.1)}
.dash-card.is-locked{background:#faf9fc;border-style:dashed}
.dash-card-title{margin:0 0 .25rem;font-size:1.1rem}
.dash-card-sub{color:#6b6478;font-size:.9rem;margin:0 0 .9rem}
.dash-meta{font-size:.82rem;color:#8a8398;margin:0 0 .75rem}
.renew-barrier{background:#fff7ec;border:1px solid #f0e0c4;border-radius:12px;padding:.9rem;text-align:center}
.renew-barrier p{margin:.4rem 0 .75rem;font-size:.9rem;color:#7a5e1e}
.renew-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#C9A96E;box-shadow:0 0 0 0 rgba(201,169,110,.6);animation:zsPulse 1.8s infinite}
@keyframes zsPulse{70%{box-shadow:0 0 0 8px rgba(201,169,110,0)}100%{box-shadow:0 0 0 0 rgba(201,169,110,0)}}
.dash-table{width:100%;border-collapse:collapse}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:480px}
.dash-table th,.dash-table td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid #ece9f1;font-size:.9rem}

/* chips */
.chip{font-size:.72rem;font-weight:600;padding:.18rem .55rem;border-radius:999px;display:inline-block}
.chip-paid{background:#e4f5e9;color:#2f7d45}
.chip-pending{background:#fdf4e3;color:#9a6f1e}
.chip-failed,.chip-refunded{background:#fbe6e8;color:#b23845}

/* ---- Interactive tools ---- */
.tool{padding:2.5rem 1.25rem}
.tool-head{margin-bottom:1.5rem}
.tool-back{font-size:.85rem;color:#8a7fa2;text-decoration:none}
.tool-title{margin:.3rem 0 0;font-size:1.7rem}
.stat-row{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.25rem}
.stat-pill{flex:1;min-width:140px;background:#fff;border:1px solid #ece9f1;border-radius:14px;padding:1rem 1.1rem;display:flex;flex-direction:column}
.stat-pill span{font-size:.78rem;color:#8a8398;text-transform:uppercase;letter-spacing:.05em}
.stat-pill strong{font-size:1.45rem;margin-top:.2rem}
.stat-pill.income strong{color:#2f7d45}.stat-pill.expense strong{color:#b23845}.stat-pill.balance strong{color:#4B3F58}
.progress{height:8px;background:#ece9f1;border-radius:999px;overflow:hidden;margin-bottom:1.5rem}
.progress-bar{height:100%;background:linear-gradient(90deg,#8a7fa2,#C9A96E);border-radius:999px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.tool-form{display:flex;flex-wrap:wrap;gap:.6rem;background:#fff;border:1px solid #ece9f1;border-radius:14px;padding:1rem;margin-bottom:1.5rem}
.tool-form input,.tool-form select{flex:1;min-width:120px;padding:.6rem .7rem;border:1px solid #ddd6e6;border-radius:10px;font-size:.9rem}
.tool-form input:focus,.tool-form select:focus{outline:none;border-color:#8a7fa2;box-shadow:0 0 0 3px rgba(138,127,162,.18)}
.tool-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #ece9f1;border-radius:14px;overflow:hidden}
.tool-table th,.tool-table td{padding:.7rem .8rem;border-bottom:1px solid #f0edf4;font-size:.9rem;text-align:left}
.tool-table th{background:#faf9fc;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#8a8398}
.row-done td{opacity:.55;text-decoration:line-through}
.chk{width:26px;height:26px;border-radius:8px;border:1.5px solid #ddd6e6;background:#fff;cursor:pointer;color:#2f7d45;font-weight:700;transition:background .2s ease,border-color .2s ease}
.chk.on{background:#e4f5e9;border-color:#7bc497}
@media(max-width:640px){.stat-row{flex-direction:column}.shop-card-foot{flex-direction:column;align-items:stretch}}


/* ============================================================
   THEME COHESION + MEDIA GALLERIES  (appended 2026-06)
   Unifies auth/shop cards with the dark site theme and adds the
   front-end blog/product gallery layouts (grid / carousel / single).
   ============================================================ */

/* ---- Auth (login / register) ---- */
.auth-wrap{min-height:70vh;display:grid;place-items:center;padding:3rem 1rem}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:2.25rem;box-shadow:0 18px 50px rgba(0,0,0,.45);width:min(420px,100%)}
.auth-card h1,.auth-title{color:var(--white)}
.auth-sub{color:var(--lavender)}
.auth-form label,.auth-form .fld label,.auth-form .fld span{color:var(--soft)}
.auth-form input,.auth-form select,.auth-form textarea{background:var(--surface2);border:1px solid var(--border);color:var(--white);border-radius:10px}
.auth-form input::placeholder{color:rgba(217,213,230,.4)}
.auth-form input:focus,.auth-form select:focus,.auth-form textarea:focus{border-color:var(--lavender);box-shadow:0 0 0 3px rgba(138,127,162,.18);outline:none}
.auth-alt{color:var(--lavender)}
.auth-alt a{color:var(--beige)}

/* ---- Shop / web-app / product cards ---- */
.shop-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;color:var(--soft)}
.shop-card:hover{border-color:var(--purple2,#5c4e6e);box-shadow:0 14px 36px rgba(0,0,0,.4)}
.shop-card-media{background:var(--surface2)}
.shop-icon{background:var(--surface2);color:var(--soft)}
.shop-card-media .media-fallback,.product-img-placeholder.media-fallback{color:var(--lavender);background:linear-gradient(110deg,var(--surface2) 30%,var(--purple) 50%,var(--surface2) 70%)}
.badge-app{background:rgba(138,127,162,.18);color:var(--soft)}
.shop-card-title{color:var(--white)}
.shop-card-title a{color:inherit;text-decoration:none}
.shop-card-title a:hover{color:var(--beige)}
.shop-card-sub{color:var(--lavender)}
.shop-card .price{color:var(--white)}
.shop-card .price small{color:var(--lavender)}
.muted,.muted-sm{color:var(--lavender)}

/* ---- Product detail ---- */
.product-detail{padding:3rem 0 4rem}
.product-detail .price-tag{font-size:1.6rem;color:var(--white);font-weight:600}

/* ---- Front media gallery (blog + product) ---- */
.zs-gallery{margin:2rem 0}
.zs-gallery-heading{font-size:1.05rem;color:var(--white);margin:0 0 .9rem}
.zs-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.85rem}
.zs-gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface2)}
.zs-gallery-single img{width:100%;border-radius:var(--radius);border:1px solid var(--border);object-fit:cover;max-height:560px}
.zs-carousel{position:relative}
.zs-carousel-track{display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
.zs-carousel-track::-webkit-scrollbar{height:8px}
.zs-carousel-track::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.zs-carousel-track img{flex:0 0 88%;max-width:88%;scroll-snap-align:center;border-radius:var(--radius);border:1px solid var(--border);object-fit:cover;aspect-ratio:16/10;background:var(--surface2)}
.zs-carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:rgba(20,19,26,.85);color:var(--white);cursor:pointer;font-size:1.3rem;display:flex;align-items:center;justify-content:center}
.zs-carousel-btn:hover{background:var(--purple)}
.zs-carousel-prev{left:.5rem}
.zs-carousel-next{right:.5rem}
@media(min-width:768px){.zs-carousel-track img{flex-basis:60%;max-width:60%}}