/* =============================================================================
   SnapBG — DESIGN SYSTEM  "Light Table"
   -----------------------------------------------------------------------------
   Soch: photo studio ki light table. Photo tools thande neutral grey par rehte
   hain taake images ka asli rang nazar aaye. Alpha-channel ka checkerboard (jo
   is product ki apni nishani hai) poori site ka structural motif hai.

     accent  #FF3B5C  — "cut line", selection ka rang
     indigo  #17123A  — gehri ink, dark bands aur footer
     mint    #00C48C  — credits / success

   Mobile-first: base styles chhoti screen ke liye, phir media queries se bara.
============================================================================= */

/* ---- TOKENS -------------------------------------------------------------- */
:root {
  --ink:        #0E1116;
  --ink-soft:   #3A4250;
  --ink-muted:  #6B7686;
  --table:      #EEF1F5;
  --table-deep: #E2E7EE;
  --surface:    #FFFFFF;
  --line:       #D8DEE7;
  --accent:     #FF3B5C;
  --accent-hov: #E82348;
  --accent-soft:#FFE8EC;
  --indigo:     #17123A;
  --indigo-soft:#2A2260;
  --mint:       #00C48C;
  --mint-soft:  #E0FBF2;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  --shadow:    0 1px 2px rgba(14,17,22,.04), 0 12px 32px -12px rgba(14,17,22,.14);
  --shadow-lg: 0 2px 4px rgba(14,17,22,.05), 0 28px 60px -20px rgba(23,18,58,.28);

  --wrap: 1140px;
  --gap:  clamp(56px, 9vw, 104px);

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ---- RESET --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--table);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- SIGNATURE MOTIF: transparency checkerboard -------------------------- */
.checker {
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg,  var(--table-deep) 25%, transparent 25%),
    linear-gradient(-45deg, var(--table-deep) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, var(--table-deep) 75%),
    linear-gradient(-45deg, transparent 75%, var(--table-deep) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

/* ---- TYPOGRAPHY ---------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; }
.display  { font-size: clamp(2.35rem, 6.5vw, 4.4rem); line-height: .98; letter-spacing: -.035em; }
.headline { font-size: clamp(1.75rem, 4.2vw, 2.85rem); }
.title    { font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -.02em; }
.lede  { font-size: clamp(1.03rem, 1.7vw, 1.2rem); color: var(--ink-soft); line-height: 1.55; }
.muted { color: var(--ink-muted); }
.small { font-size: .875rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--accent); }

/* ---- LAYOUT -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: var(--gap); }
.section--tight { padding-block: calc(var(--gap) * .55); }

.grid { display: grid; gap: 20px; }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.stack  { display: flex; flex-direction: column; gap: 14px; }
.row    { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-center { max-width: 62ch; margin-inline: auto; }

/* ---- BUTTONS ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: .96rem; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  min-height: 48px;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px -6px rgba(255,59,92,.55); }
.btn-primary:hover { background: var(--accent-hov); }
.btn-dark  { background: var(--indigo); color: #fff; }
.btn-dark:hover { background: var(--indigo-soft); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-muted); }
.btn-light { background: #fff; color: var(--indigo); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; min-height: 40px; font-size: .88rem; }

/* ---- CARDS --------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.card-lift { box-shadow: var(--shadow); border-color: transparent; }

/* ---- HEADER -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(238,241,245,.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.22rem;
  letter-spacing: -.03em; text-decoration: none; color: var(--ink);
}
.logo-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background-color: var(--accent);
  background-image:
    linear-gradient(45deg,  #fff 25%, transparent 25%),
    linear-gradient(-45deg, #fff 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, #fff 75%),
    linear-gradient(-45deg, transparent 75%, #fff 75%);
  background-size: 13px 13px;
  background-position: 0 0, 0 6.5px, 6.5px -6.5px, -6.5px 0;
}
.nav { display: none; gap: 4px; align-items: center; }
.nav a {
  padding: 9px 14px; border-radius: 999px; text-decoration: none;
  font-size: .93rem; font-weight: 500; color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--surface); color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.credit-pill {
  display: none; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  background: var(--mint-soft); color: #007A56;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
}
.nav-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
}
.nav-toggle span { display: block; width: 17px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 2px; background: var(--ink);
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after  { top: 5.5px; }

.mobile-nav {
  display: none; flex-direction: column; gap: 2px;
  padding: 10px 20px 22px; background: var(--table); border-bottom: 1px solid var(--line);
}
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 13px 12px; border-radius: 10px; text-decoration: none; font-weight: 500; color: var(--ink-soft); }
.mobile-nav a:hover { background: var(--surface); color: var(--ink); }
.mobile-nav .btn { margin-top: 12px; }

@media (min-width: 940px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
  .credit-pill { display: inline-flex; }
}

/* ---- HERO ---------------------------------------------------------------- */
.hero { padding-block: clamp(46px, 8vw, 88px) var(--gap); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.hero .display { margin-bottom: 20px; }
.hero .lede { margin-bottom: 30px; max-width: 46ch; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.hero-proof div { display: flex; flex-direction: column; }
.hero-proof b { font-family: var(--font-mono); font-size: 1.28rem; letter-spacing: -.02em; }
.hero-proof span { font-size: .78rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }

/* Before/after slider — page ka signature element */
.compare {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; user-select: none; background: var(--surface);
}
.compare-before, .compare-after { position: absolute; inset: 0; }
.compare-before img, .compare-after img { width: 100%; height: 100%; object-fit: cover; }
.compare-after { clip-path: inset(0 0 0 50%); }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: #fff; box-shadow: 0 0 0 1px rgba(14,17,22,.16); cursor: ew-resize;
}
.compare-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; transform: translate(-50%, -50%);
  background: #fff; border-radius: 50%; box-shadow: 0 3px 14px rgba(14,17,22,.28);
}
.compare-tag {
  position: absolute; bottom: 14px; padding: 5px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  background: rgba(14,17,22,.72); color: #fff; backdrop-filter: blur(4px);
}
.compare-tag.l { left: 14px; }
.compare-tag.r { right: 14px; }

/* ---- TRUST BAR ----------------------------------------------------------- */
.trust {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
@media (min-width: 760px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust > div { background: var(--surface); padding: 22px 20px; }
.trust b { display: block; font-family: var(--font-mono); font-size: 1.35rem; letter-spacing: -.02em; }
.trust span { font-size: .78rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---- STEPS --------------------------------------------------------------- */
.step { position: relative; padding-top: 30px; }
.step-num { position: absolute; top: 0; left: 0; font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--accent); letter-spacing: .1em; }
.step h3 { font-size: 1.14rem; margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: .95rem; }

/* ---- TILES --------------------------------------------------------------- */
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; text-decoration: none; color: inherit; display: block;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
a.tile:hover { border-color: var(--ink-muted); transform: translateY(-2px); box-shadow: var(--shadow); }
.tile h3 { font-size: 1.08rem; margin-bottom: 9px; }
.tile p { color: var(--ink-soft); font-size: .94rem; }
.tile-link { display: inline-block; margin-top: 14px; font-size: .88rem; font-weight: 600; color: var(--accent); }

/* ---- PRICING ------------------------------------------------------------- */
.plans { display: grid; gap: 20px; align-items: start; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 26px;
  display: flex; flex-direction: column; height: 100%;
}
.plan--featured { border-color: var(--indigo); box-shadow: var(--shadow-lg); }
@media (min-width: 860px) { .plan--featured { transform: scale(1.035); z-index: 2; } }
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 5px 15px; border-radius: 999px; white-space: nowrap;
  background: var(--indigo); color: #fff;
  font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .11em;
}
.plan h3 { font-size: 1.3rem; margin-bottom: 4px; }
.plan-tagline { font-size: .88rem; color: var(--ink-muted); margin-bottom: 22px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; }
.plan-price b { font-family: var(--font-display); font-size: 3rem; letter-spacing: -.04em; line-height: 1; }
.plan-pkr { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-muted); margin-top: 7px; }
.plan-credits {
  margin: 18px 0 22px; padding: 11px 15px; background: var(--table);
  border-radius: var(--r-sm); font-family: var(--font-mono); font-size: .88rem; font-weight: 600;
}
.plan-credits em { font-style: normal; color: var(--accent); }
.plan-features { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan-features li { display: flex; gap: 10px; font-size: .92rem; color: var(--ink-soft); }
.plan-features li::before {
  content: ''; flex: none; width: 17px; height: 17px; margin-top: 3px; border-radius: 50%;
  background: var(--mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2300A36C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---- FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; gap: 20px; align-items: flex-start;
  padding: 20px 2px; cursor: pointer; font-weight: 600; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex: none; font-family: var(--font-mono); font-size: 1.3rem;
  line-height: 1; color: var(--accent); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 2px 22px; color: var(--ink-soft); max-width: 68ch; }

/* ---- TESTIMONIALS -------------------------------------------------------- */
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; }
.quote p { font-size: 1rem; color: var(--ink-soft); margin-bottom: 18px; }
.quote footer { display: flex; align-items: center; gap: 11px; }
.quote-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--indigo); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .88rem; }
.quote-name { font-weight: 600; font-size: .92rem; }
.quote-role { font-size: .8rem; color: var(--ink-muted); }
.stars { color: var(--accent); font-size: .8rem; letter-spacing: 2px; margin-bottom: 12px; }

/* ---- DARK BAND ----------------------------------------------------------- */
.band { background: var(--indigo); color: #fff; }
.band .lede { color: rgba(255,255,255,.78); }
.band .eyebrow { color: #FF8A9F; }
.band .eyebrow::before { background: #FF8A9F; }

/* ---- BLOG ---------------------------------------------------------------- */
.post-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; height: 100%;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.post-card:hover { border-color: var(--ink-muted); transform: translateY(-2px); box-shadow: var(--shadow); }
.post-meta { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-muted); margin-bottom: 12px; }
.post-card h3 { font-size: 1.14rem; margin-bottom: 10px; }
.post-card p { color: var(--ink-soft); font-size: .93rem; flex: 1; }

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 42px 0 14px; }
.prose h3 { font-size: 1.15rem; margin: 30px 0 10px; }
.prose p  { margin-bottom: 18px; color: var(--ink-soft); }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; color: var(--ink-soft); }
.prose li { margin-bottom: 9px; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }

/* ---- BREADCRUMBS --------------------------------------------------------- */
.crumbs { font-size: .84rem; color: var(--ink-muted); margin-bottom: 22px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 7px; opacity: .5; }

/* ---- FORMS --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 17px; }
.field label { font-size: .88rem; font-weight: 600; }
.field input, .field textarea, .field select {
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: .96rem; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height: 140px; resize: vertical; }
.field-hint { font-size: .8rem; color: var(--ink-muted); }

.alert { padding: 14px 17px; border-radius: var(--r-sm); margin-bottom: 20px; font-size: .93rem; }
.alert-ok    { background: var(--mint-soft); color: #00694B; border-left: 3px solid var(--mint); }
.alert-error { background: var(--accent-soft); color: #A8102F; border-left: 3px solid var(--accent); }

/* ---- FOOTER -------------------------------------------------------------- */
.site-footer { background: var(--indigo); color: rgba(255,255,255,.72); padding-block: 56px 30px; }
.footer-grid { display: grid; gap: 34px; }
@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); } }
.site-footer .logo { color: #fff; margin-bottom: 14px; }
.footer-about { font-size: .9rem; max-width: 34ch; }
.footer-col h4 { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; color: #fff; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col a { text-decoration: none; font-size: .9rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .84rem;
}

/* ---- UTILITIES ----------------------------------------------------------- */
.mono { font-family: var(--font-mono); }
.mt-3 { margin-top: 26px; } .mt-4 { margin-top: 38px; }
.mb-3 { margin-bottom: 26px; } .mb-4 { margin-bottom: 38px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 20px; background: var(--indigo); color: #fff; border-radius: 0 0 var(--r-sm) 0; }
.skip-link:focus { left: 0; }
.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; }

/* =============================================================================
   IMAGE EDITOR
   -----------------------------------------------------------------------------
   Mobile par sidebar canvas ke NEECHE aati hai (upar nahi), taake image hamesha
   pehle nazar aaye. Desktop par saath mein.
============================================================================= */

.ed-grid { display: grid; gap: 20px; }
@media (min-width: 1000px) {
  .ed-grid { grid-template-columns: 1fr 320px; align-items: start; }
}

/* ---- Top bar ---- */
.ed-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}

.ed-icon {
  min-width: 40px; height: 38px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ed-icon:hover:not(:disabled) { border-color: var(--ink-muted); }
.ed-icon:disabled { opacity: .35; cursor: not-allowed; }

/* ---- Canvas stage ---- */
.ed-stage {
  position: relative;
  display: grid; place-items: center;
  padding: 16px;
  background: var(--table-deep);
  border: 1px solid var(--line); border-radius: var(--r);
  min-height: 300px; overflow: hidden;
}
.ed-stage canvas {
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 4px 20px -6px rgba(14,17,22,.28);
  cursor: grab;
  touch-action: none;          /* touch drag ko browser scroll na samjhe */
}
.ed-stage canvas:active { cursor: grabbing; }
.ed-stage img {
  position: absolute; object-fit: contain; border-radius: 4px;
  box-shadow: 0 4px 20px -6px rgba(14,17,22,.28);
}

.ed-download {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 18px;
}

/* ---- Sidebar ---- */
.ed-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
@media (min-width: 1000px) {
  .ed-panel { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
}

.ed-sec { padding: 18px 18px 20px; border-bottom: 1px solid var(--line); }
.ed-sec:last-child { border-bottom: 0; }
.ed-sec h3 {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted);
  margin-bottom: 12px;
}

.ed-hint { font-size: .78rem; color: var(--ink-muted); margin-top: 9px; line-height: 1.45; }

/* ---- Tabs ---- */
.ed-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.ed-tab {
  flex: 1; min-width: 58px; padding: 8px 10px;
  background: var(--table); border: 1px solid transparent; border-radius: 8px;
  font-size: .8rem; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: background .15s, color .15s;
}
.ed-tab:hover { background: var(--table-deep); }
.ed-tab.on { background: var(--indigo); color: #fff; }

/* ---- Colour swatches ---- */
.ed-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 11px; }
.ed-swatches button {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 7px;
  cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.ed-swatches button:hover { transform: scale(1.12); box-shadow: 0 3px 10px rgba(14,17,22,.2); }

/* ---- Rows, sliders, toggles ---- */
.ed-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 11px;
}
.ed-row label { font-size: .82rem; font-weight: 600; }
.ed-row input[type="color"] {
  width: 46px; height: 34px; padding: 2px; flex: none;
  border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer;
}
.ed-row select {
  flex: 1; max-width: 170px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 7px; font-size: .84rem; background: var(--surface);
}

.ed-slider {
  display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft);
  margin-top: 12px;
}
.ed-slider input[type="range"] {
  width: 100%; margin-top: 7px; accent-color: var(--accent);
  height: 26px;                 /* mobile par ungli ke liye kaafi */
}

.ed-toggle {
  display: flex; align-items: center; gap: 9px;
  font-size: .84rem; font-weight: 600; cursor: pointer;
}
.ed-toggle input { width: auto; accent-color: var(--accent); }

.ed-panel .field label { font-size: .82rem; }
.ed-panel textarea {
  font-size: .88rem; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; width: 100%; resize: vertical;
}

/* =============================================================================
   BATCH QUEUE
============================================================================= */

.batch-head {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  padding: 18px 20px;
}
.batch-head strong { font-size: 1.05rem; }
.batch-head p { margin-top: 3px; }

.batch-progress { height: 4px; background: var(--table-deep); overflow: hidden; }
.batch-progress > div {
  height: 100%; width: 0%; background: var(--accent);
  transition: width .35s ease;
}

.batch-list { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; }

.batch-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; border-top: 1px solid var(--line);
}
.batch-item:hover { background: var(--table); }

/* Status icons */
.bi { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
      font-size: .78rem; font-weight: 700; }
.bi-wait { background: var(--table-deep); color: var(--ink-muted); }
.bi-ok   { background: var(--mint-soft);  color: #00694B; }
.bi-bad  { background: var(--accent-soft); color: #A8102F; }
.bi-skip { background: var(--table-deep); color: var(--ink-muted); }
.bi-run  {
  background: transparent;
  border: 2px solid var(--table-deep); border-top-color: var(--accent);
  animation: bi-spin .7s linear infinite;
}
@keyframes bi-spin { to { transform: rotate(360deg); } }

.bi-thumb {
  flex: none; width: 40px; height: 40px; object-fit: cover;
  border-radius: 7px; border: 1px solid var(--line);
}
.bi-thumb.checker { object-fit: contain; background-size: 10px 10px; }
.bi-dim { opacity: .45; }

.bi-name {
  flex: 1; min-width: 0; font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bi-right { flex: none; display: flex; gap: 7px; align-items: center; }

.batch-foot {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-top: 1px solid var(--line); background: var(--table);
}

/* Mobile: file name upar, buttons neeche */
@media (max-width: 560px) {
  .batch-item { flex-wrap: wrap; }
  .bi-name { flex: 1 1 100%; order: 3; margin-top: -4px; padding-left: 34px; }
  .bi-right { order: 2; margin-left: auto; }
}

/* =============================================================================
   WHATSAPP FLOATING BUTTON
   -----------------------------------------------------------------------------
   AHEM: is button ki bunyadi shakl (position, rang, gol pan) SEEDHA element par
   inline likhi hui hai — footer.php mein. Yahan sirf khoobsurti hai.

   Wajah: agar kabhi yeh stylesheet purani reh jaye ya load na ho, to button
   nangi haalat mein footer ke neeche nahi girega. Yeh sabaq tab mila jab ek
   dafa asli site par yehi hua tha.
============================================================================= */

.wa-float {
  /* inline styles se overlap hai — yeh backup hai agar inline kabhi hat jaye */
  position: fixed;
  right: 20px; bottom: 20px; z-index: 80;
  display: inline-flex; align-items: center;
  height: 58px; padding: 0 15px;
  border-radius: 999px;
  background: #25D366; color: #fff;
  text-decoration: none;

  /* Do parton wali chhaya — neeche gehri, gird halki hari */
  box-shadow:
    0 8px 26px -8px rgba(37,211,102,.75),
    0 2px 10px rgba(14,17,22,.2);

  transition: gap .25s cubic-bezier(.22,1,.36,1),
              padding .25s cubic-bezier(.22,1,.36,1),
              transform .18s ease,
              box-shadow .18s ease,
              background .18s ease;
}

.wa-float:hover {
  background: #1EBE5A;
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 14px 34px -8px rgba(37,211,102,.9),
    0 3px 12px rgba(14,17,22,.24);
}
.wa-float:active { transform: translateY(-1px) scale(.99); }

.wa-float:focus-visible { outline: 3px solid #17123A; outline-offset: 3px; }

/* ---- Icon ---- */
.wa-icon { position: relative; display: grid; place-items: center; flex: none; }

/* Halka sa pulse — nazar khinchta hai lekin pareshan nahi karta */
.wa-icon::before {
  content: '';
  position: absolute; inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  opacity: 0;
  animation: wa-pulse 2.8s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(.75); opacity: .65; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.wa-float:hover .wa-icon::before { animation-play-state: paused; opacity: 0; }

/* "Online" wala chhota nuqta */
.wa-dot {
  position: absolute; top: -1px; right: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #ffffff; border: 2.5px solid #25D366;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.9);
}

/* ---- Label ---- */
.wa-label {
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0; margin-left: 0;
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  transition: max-width .25s cubic-bezier(.22,1,.36,1),
              opacity .2s ease, margin-left .25s ease;
}

/* Desktop par hover karte hi poora label khul jata hai */
@media (hover: hover) and (min-width: 760px) {
  .wa-float:hover  .wa-label,
  .wa-float:focus-visible .wa-label { max-width: 190px; opacity: 1; margin-left: 10px; }
  .wa-float:hover, .wa-float:focus-visible { padding-right: 22px; }
}

/* ---- Mobile: sirf gol icon ---- */
@media (max-width: 759px) {
  .wa-float {
    width: 56px; height: 56px; padding: 0;
    justify-content: center;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .wa-label { display: none; }
}

/* Jinhon ne motion kam karne ki setting on ki hai */
@media (prefers-reduced-motion: reduce) {
  .wa-icon::before { animation: none; opacity: 0; }
  .wa-float:hover { transform: none; }
}

@media print { .wa-float { display: none; } }

/* ---- Editor toolbar buttons (icon + label) -------------------------------- */
.ed-icon {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  font-size: .85rem; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.ed-icon:hover:not(:disabled) { border-color: var(--ink-muted); color: var(--ink); }
.ed-icon:disabled { opacity: .35; cursor: not-allowed; }
.ed-icon svg { flex: none; }

@media (max-width: 560px) {
  .ed-icon span { display: none; }      /* mobile par sirf icon */
  .ed-icon { padding: 0 11px; }
  #ed-reset span, #ed-back { display: inline; }
}

/* ---- Batch list: edited badge aur active row ------------------------------ */
.bi-edited {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  background: var(--accent-soft); color: #A8102F;
  border-radius: 99px; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; vertical-align: middle;
}
.batch-item.bi-active { background: var(--accent-soft); }
.batch-item.bi-active .bi-name { font-weight: 600; }
.bi-edited.bi-warn { background: #FFF0D9; color: #8A5A00; }

/* =============================================================================
   RECENT RESULTS — tile with pencil
============================================================================= */
.recent-tile {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; aspect-ratio: 1;
  background-size: 12px 12px;
}
.recent-tile > a { display: block; width: 100%; height: 100%; }
.recent-tile img { width: 100%; height: 100%; object-fit: contain; }

.recent-badge { position: absolute; top: 7px; left: 7px; }

.recent-edit {
  position: absolute; top: 7px; right: 7px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--indigo); color: #fff;
  border: 0; border-radius: 9px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(14,17,22,.3);
  transition: background .15s, transform .15s;
}
.recent-edit:hover  { background: var(--accent); transform: scale(1.08); }
.recent-edit:active { transform: scale(.96); }
.recent-edit.is-loading { opacity: .5; cursor: wait; }

/* File ka naam — neeche, halki si patti par */
.recent-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 9px 6px;
  background: linear-gradient(to top, rgba(14,17,22,.82), transparent);
  color: #fff; font-size: .7rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}

/* Touch devices par pencil hamesha nazar aaye */
@media (hover: none) {
  .recent-edit { opacity: 1; }
}

/* Recent results: bohat si images hon to scroll — page lamba na ho jaye */
.recent-grid { max-height: 620px; overflow-y: auto; padding-right: 4px; }
@media (min-width: 1000px) { .recent-grid { grid-template-columns: repeat(5, 1fr); } }

/* ===== FULL-WIDTH LAYOUT (v21) ===== */
:root { --wrap: 100%; }

.wrap {
  max-width: 100%;
  padding-inline: clamp(16px, 3.5vw, 64px);
}

/* pages jahan inline style="max-width:..." laga hua hai, unhein bhi full karo */
.wrap[style] { max-width: 100% !important; }

/* lambi text lines aankhon ko chubhti hain — reading width thori barha di */
.prose   { max-width: 90ch; }
.measure { max-width: 80ch; }