/* ═══════════════════════════════════════════════════════
   MockImg — Shared CSS
   ═══════════════════════════════════════════════════════ */

/* ── Base & Variables ── */
:root{
  --accent:#6366f1;
  --accent-hover:#4f46e5;
  --accent-soft:#eef2ff;
  --accent-glow:rgba(99,102,241,.25);
  --purple:#a855f7;
  --pink:#ec4899;
  --max-w:1200px;
  --pad-x:2rem;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'SF Mono','Cascadia Code','Fira Code',Consolas,monospace;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 12px 40px rgba(0,0,0,.08);
  --shadow-xl:0 20px 60px rgba(0,0,0,.1);
  --shadow-accent:0 8px 30px rgba(99,102,241,.2);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --transition:all .3s cubic-bezier(.4,0,.2,1);
}
*{scroll-behavior:smooth;box-sizing:border-box}
body{
  font-family:var(--font);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;transition:background .5s ease,color .5s ease;
}

/* ── Dark Theme (Shared) ── */
[data-bs-theme="dark"]{
  color-scheme:dark;background:#09090b;color:#e4e4e7;
}
[data-bs-theme="dark"] .site-nav{background:rgba(9,9,11,.82);border-color:rgba(63,63,70,.4)}
[data-bs-theme="dark"] .site-nav.scrolled{background:rgba(9,9,11,.95);box-shadow:0 1px 24px rgba(0,0,0,.3)}
[data-bs-theme="dark"] .site-nav .logo{color:#fafafa}
[data-bs-theme="dark"] .site-nav .links a{color:#a1a1aa}
[data-bs-theme="dark"] .site-nav .links a:hover{color:#fafafa}
[data-bs-theme="dark"] .section-title{color:#fafafa}
[data-bs-theme="dark"] .section-desc{color:#a1a1aa}
[data-bs-theme="dark"] .section-line{background:linear-gradient(90deg,var(--accent),var(--purple))}
[data-bs-theme="dark"] .ctrl-input{background:rgba(24,24,27,.6);border-color:rgba(63,63,70,.5);color:#e4e4e7}
[data-bs-theme="dark"] .ctrl-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
[data-bs-theme="dark"] .ctrl-label{color:#71717a}
[data-bs-theme="dark"] .gen-output-bar{background:#0f0f11;border-color:rgba(63,63,70,.4)}
[data-bs-theme="dark"] .gen-output-bar code{color:#d4d4d8}
[data-bs-theme="dark"] .copy-btn{background:rgba(39,39,42,.5);border-color:rgba(63,63,70,.5);color:#a1a1aa}
[data-bs-theme="dark"] .copy-btn:hover{border-color:var(--accent);color:#fafafa;background:rgba(99,102,241,.1)}
[data-bs-theme="dark"] .site-footer{background:rgba(9,9,11,.9);border-color:rgba(63,63,70,.4)}
[data-bs-theme="dark"] .site-footer .brand{color:#a1a1aa}
[data-bs-theme="dark"] .site-footer .copyright{color:#71717a}
[data-bs-theme="dark"] .site-footer .license{color:#52525b}
[data-bs-theme="dark"] .theme-toggle{border-color:rgba(63,63,70,.5);color:#a1a1aa}
[data-bs-theme="dark"] .theme-toggle:hover{border-color:var(--accent);color:#fafafa}

/* ── Nav ── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid rgba(229,231,235,.6);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  transition:all .4s ease;
}
.site-nav.scrolled{
  background:rgba(255,255,255,.95);
  box-shadow:0 1px 16px rgba(0,0,0,.06);
}
.site-nav .inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);display:flex;align-items:center;height:64px;gap:2rem}
.site-nav .logo{font-size:1.35rem;font-weight:800;color:#18181b;text-decoration:none;letter-spacing:-.03em;font-family:var(--font);transition:var(--transition)}
.site-nav .logo:hover{opacity:.8}
.site-nav .logo span{background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.site-nav .links{display:flex;gap:2rem;margin-left:1rem}
.site-nav .links a{
  color:#71717a;text-decoration:none;font-size:.875rem;font-weight:500;
  transition:var(--transition);position:relative;padding:.25rem 0;
}
.site-nav .links a:hover{color:#18181b}
.site-nav .links a::after{
  content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--purple));border-radius:1px;
  transition:all .3s var(--ease-out);transform:translateX(-50%);
}
.site-nav .links a:hover::after{width:100%}
.site-nav .links a.current{color:var(--accent)}
.nav-spacer{flex:1}
.theme-toggle{
  background:none;border:1px solid rgba(229,231,235,.8);border-radius:10px;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#71717a;transition:var(--transition);
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);transform:rotate(15deg)}
.theme-toggle svg{transition:transform .4s var(--ease-spring)}

/* ── Section Common ── */
.sec{max-width:var(--max-w);margin:0 auto;padding:5rem var(--pad-x)}
.sec-head{text-align:center;margin-bottom:3.5rem}
.section-title{
  font-size:2rem;font-weight:800;color:#18181b;
  letter-spacing:-.03em;margin:0;font-family:var(--font);
  opacity:0;transform:translateY(16px);
  transition:all .6s var(--ease-out);
}
.section-title.visible{opacity:1;transform:translateY(0)}
.section-desc{
  color:#71717a;margin:.75rem auto 0;font-size:1.05rem;
  line-height:1.7;max-width:660px;
  opacity:0;transform:translateY(12px);
  transition:all .6s var(--ease-out) .1s;
}
.section-desc.visible{opacity:1;transform:translateY(0)}
.section-line{
  width:48px;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--purple));
  border-radius:2px;margin:1rem auto 0;
  opacity:0;transform:scaleX(0);transition:all .6s var(--ease-out) .15s;
}
.section-line.visible{opacity:1;transform:scaleX(1)}
.section-divider{
  border:none;height:1px;
  background:linear-gradient(90deg,transparent,rgba(229,231,235,.6) 30%,rgba(229,231,235,.6) 70%,transparent);
  margin:0;
}

/* ── Controls (Shared) ── */
.ctrl-group{display:flex;flex-direction:column;gap:.375rem}
.ctrl-label{font-size:.7rem;font-weight:700;color:#a1a1aa;text-transform:uppercase;letter-spacing:.08em}
.ctrl-input{
  height:40px;border:1.5px solid rgba(229,231,235,.8);border-radius:var(--radius-sm);
  padding:0 .75rem;font-size:.875rem;font-family:var(--font);
  outline:none;transition:all .25s var(--ease-out);width:100%;
  background:#fff;color:#18181b;
}
.ctrl-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.ctrl-color-row{display:flex;gap:.5rem;align-items:center}
.ctrl-color-row input[type=color]{
  width:40px;height:40px;border:1.5px solid rgba(229,231,235,.8);border-radius:var(--radius-sm);
  padding:3px;cursor:pointer;flex-shrink:0;transition:all .25s var(--ease-out);
}
.ctrl-color-row input[type=color]:hover{border-color:var(--accent);transform:scale(1.05)}
.ctrl-color-row input[type=text]{flex:1}
.ctrl-color-row.disabled input[type=color],.ctrl-color-row.disabled input[type=text]{opacity:.35;pointer-events:none}
.size-row{display:flex;align-items:center;gap:.5rem}
.size-row input[type=number]{flex:1}
.size-row .sep{color:#d4d4d8;font-weight:600;font-size:1.1rem}

/* ── Output Bar & Copy ── */
.gen-output-bar{
  background:#18181b;border-radius:var(--radius-sm);
  padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;
  border:1px solid rgba(63,63,70,.3);
  transition:var(--transition);
}
.gen-output-bar:focus-within{border-color:rgba(99,102,241,.4)}
.gen-output-bar code{
  flex:1;color:#e4e4e7 !important;background:transparent !important;
  font-family:var(--mono);font-size:.82rem;
  white-space:nowrap;overflow-x:auto;letter-spacing:.01em;
}
.gen-output-bar .copy-actions{display:flex;gap:.5rem;flex-shrink:0}
.copy-btn{
  font-size:.75rem;padding:.375rem .75rem;font-weight:500;
  border:1px solid #3f3f46;border-radius:8px;
  background:transparent;color:#a1a1aa;cursor:pointer;
  transition:all .25s var(--ease-out);font-family:var(--font);
  position:relative;overflow:hidden;
}
.copy-btn:hover{border-color:var(--accent);color:#fff;transform:translateY(-1px)}
.copy-btn.copied{
  border-color:#22c55e;color:#22c55e;
  background:rgba(34,197,94,.08);
  animation:successPulse .4s var(--ease-spring);
}

/* ── Footer ── */
.site-footer{
  background:#fafafa;border-top:1px solid rgba(229,231,235,.6);
  padding:3rem var(--pad-x);text-align:center;
  position:relative;
}
.site-footer::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:200px;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--purple),transparent);
}
.site-footer p{margin:0;line-height:1.7}
.site-footer .brand{font-size:.9rem;font-weight:700;color:#71717a;font-family:var(--font)}
.site-footer .brand span{color:var(--accent)}
.site-footer .copyright{font-size:.8125rem;color:#a1a1aa;margin-top:.375rem}
.site-footer .license{font-size:.75rem;color:#d4d4d8;margin-top:.25rem}

/* ── Language Switcher ── */
.lang-switcher{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:.75rem auto 0;
}
.lang-switcher svg{color:#a1a1aa;flex-shrink:0}
.lang-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23a1a1aa' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right .6rem center;
  border:1.5px solid rgba(229,231,235,.8);border-radius:8px;
  padding:.35rem 1.8rem .35rem .65rem;
  font-size:.8rem;font-weight:500;font-family:var(--font);color:#52525b;
  cursor:pointer;outline:none;transition:all .25s var(--ease-out);
  min-width:130px;
}
.lang-select:hover{border-color:var(--accent);color:var(--accent)}
.lang-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.lang-select option{color:#18181b;background:#fff}
[data-bs-theme="dark"] .lang-select{
  background:rgba(24,24,27,.6);border-color:rgba(63,63,70,.5);color:#a1a1aa;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' stroke-width='2.5' stroke='%2371717a' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .lang-select:hover{border-color:var(--accent);color:#fafafa}
[dir="rtl"] .lang-switcher svg{order:1}
[dir="rtl"] .lang-select{padding-left:1.8rem;padding-right:.65rem;background-position:left .6rem center}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes successPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.06)}
  100%{transform:scale(1)}
}

/* ── Responsive (Shared) ── */
@media(max-width:960px){
  :root{--max-w:960px;--pad-x:1.5rem}
  .site-nav .links{display:none}
  .section-title{font-size:1.5rem}
  .sec{padding:3rem 1.25rem}
}
@media(max-width:760px){
  :root{--max-w:760px;--pad-x:1.25rem}
  .site-nav .inner{height:56px}
  .gen-output-bar{flex-direction:column;align-items:stretch}
  .gen-output-bar .copy-actions{justify-content:flex-end}
  .sec{padding:3rem 1.25rem}
  .sec-head{margin-bottom:2.5rem}
}


/* ═══════════════════════════════════════════════════════
   Home Page — Exclusive CSS
   ═══════════════════════════════════════════════════════ */

/* ── Dark Theme (Home) ── */
[data-bs-theme="dark"] .hero h1{color:#fafafa}
[data-bs-theme="dark"] .hero p{color:#a1a1aa}
[data-bs-theme="dark"] .gen-card{background:rgba(24,24,27,.8);border-color:rgba(63,63,70,.5)}
[data-bs-theme="dark"] .gen-preview-area{background:rgba(39,39,42,.5);border-color:rgba(63,63,70,.3)}
[data-bs-theme="dark"] .feat-card{background:rgba(24,24,27,.5);border-color:rgba(63,63,70,.4)}
[data-bs-theme="dark"] .feat-card:hover{border-color:rgba(99,102,241,.4);background:rgba(24,24,27,.8)}
[data-bs-theme="dark"] .feat-card h3{color:#fafafa}
[data-bs-theme="dark"] .feat-card p{color:#a1a1aa}
[data-bs-theme="dark"] .uc-card{background:rgba(24,24,27,.5);border-color:rgba(63,63,70,.4)}
[data-bs-theme="dark"] .uc-card:hover{border-color:rgba(99,102,241,.4);background:rgba(24,24,27,.8)}
[data-bs-theme="dark"] .uc-card h3{color:#fafafa}
[data-bs-theme="dark"] .uc-card p{color:#a1a1aa}
[data-bs-theme="dark"] .uc-card .uc-num{color:rgba(99,102,241,.15)}
[data-bs-theme="dark"] .qs-card{background:rgba(24,24,27,.5);border-color:rgba(63,63,70,.4)}
[data-bs-theme="dark"] .qs-card:hover{border-color:rgba(99,102,241,.4)}
[data-bs-theme="dark"] .qs-card h3{color:#fafafa}
[data-bs-theme="dark"] .qs-card .thumb{background:rgba(39,39,42,.5);border-color:rgba(63,63,70,.2)}
[data-bs-theme="dark"] .qs-url{background:rgba(39,39,42,.5);border-color:rgba(63,63,70,.3)}
[data-bs-theme="dark"] .qs-url code{color:#d4d4d8}
[data-bs-theme="dark"] .adv-card{background:rgba(24,24,27,.6);border-color:rgba(63,63,70,.4)}
[data-bs-theme="dark"] .adv-card:hover{border-color:rgba(99,102,241,.4);box-shadow:0 16px 48px rgba(0,0,0,.4)}
[data-bs-theme="dark"] .adv-card-preview{background:rgba(39,39,42,.5)}
[data-bs-theme="dark"] .adv-card-body h3{color:#fafafa}
[data-bs-theme="dark"] .adv-card-body p{color:#a1a1aa}
[data-bs-theme="dark"] .badge-tag{background:rgba(99,102,241,.12);color:#a5b4fc}
[data-bs-theme="dark"] .preset-btn{background:rgba(39,39,42,.5);border-color:rgba(63,63,70,.4);color:#a1a1aa}
[data-bs-theme="dark"] .preset-btn:hover{border-color:var(--accent);color:#c7d2fe;background:rgba(99,102,241,.1)}
[data-bs-theme="dark"] .hero-stat{border-color:rgba(63,63,70,.4);background:rgba(39,39,42,.6)}
[data-bs-theme="dark"] .hero-stat .num{color:#c7d2fe}
[data-bs-theme="dark"] .hero-stat .label{color:#d4d4d8}
[data-bs-theme="dark"] .adv-badge-outline{border-color:rgba(99,102,241,.5);color:#a5b4fc}
[data-bs-theme="dark"] .adv-badge-gray{background:rgba(39,39,42,.6);color:#a1a1aa}
[data-bs-theme="dark"] .adv-desc{color:#71717a}
[data-bs-theme="dark"] .adv-edit-btn{border-color:rgba(99,102,241,.5);color:#a5b4fc}
[data-bs-theme="dark"] .adv-edit-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 16px rgba(99,102,241,.4)}

/* ── Hero ── */
.hero{
  max-width:var(--max-w);margin:0 auto;
  padding:9rem var(--pad-x) 4rem;
  text-align:center;position:relative;overflow:hidden;
}
.hero>*{position:relative;z-index:1}
.hero .badge-tag{
  display:inline-flex;align-items:center;gap:.375rem;
  background:var(--accent-soft);color:var(--accent);
  font-size:.8rem;font-weight:600;
  padding:.45rem 1.1rem;border-radius:99px;
  margin-bottom:1.75rem;letter-spacing:.01em;
  border:1px solid rgba(99,102,241,.12);
  transition:var(--transition);
}
.hero .badge-tag:hover{
  box-shadow:0 0 0 4px rgba(99,102,241,.08);
  border-color:rgba(99,102,241,.25);
}
.hero .badge-tag svg{width:14px;height:14px}
.hero h1{
  font-size:3.75rem;font-weight:900;color:#18181b;
  letter-spacing:-.04em;line-height:1.08;margin:0;
  font-family:var(--font);
}
.hero h1 .gradient-text{
  background:linear-gradient(135deg,var(--accent) 0%,var(--purple) 50%,var(--pink) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:200% 200%;
  animation:gradientShift 4s ease infinite;
}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.hero p{
  font-size:1.15rem;color:#71717a;
  margin:1.5rem auto 0;max-width:600px;line-height:1.8;
}
.hero-stats{
  display:flex;justify-content:center;gap:1.25rem;margin-top:3rem;
  flex-wrap:wrap;
}
.hero-stat{
  text-align:center;padding:1.25rem 1.75rem;
  border:1px solid rgba(229,231,235,.6);border-radius:var(--radius);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
  transition:var(--transition);min-width:120px;
}
.hero-stat:hover{
  border-color:rgba(99,102,241,.25);
  box-shadow:0 4px 20px rgba(99,102,241,.08);
  transform:translateY(-2px);
}
.hero-stat .num{
  font-size:1.75rem;font-weight:800;color:var(--accent);
  letter-spacing:-.03em;font-family:var(--font);line-height:1;
}
.hero-stat .label{font-size:.75rem;color:#a1a1aa;margin-top:.375rem;font-weight:500;letter-spacing:.02em}

/* ── Generator ── */
.gen-section{max-width:var(--max-w);margin:0 auto;padding:1.5rem var(--pad-x) 5rem;position:relative}
.gen-card{
  background:#fff;border:1px solid rgba(229,231,235,.6);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-xl);
  transition:box-shadow .4s ease;
  position:relative;
}
.gen-card::before{
  content:'';position:absolute;inset:-1px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(99,102,241,.15),transparent 40%,transparent 60%,rgba(168,85,247,.15));
  z-index:-1;opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.gen-card:hover::before{opacity:1}
.gen-card:hover{box-shadow:0 24px 64px rgba(0,0,0,.1),0 0 0 1px rgba(99,102,241,.08)}
.gen-preview-area{
  background:
    linear-gradient(135deg,#fafafa 0%,#f5f3ff 50%,#faf5ff 100%);
  border-bottom:1px solid rgba(229,231,235,.5);
  display:flex;align-items:center;justify-content:center;
  padding:2.5rem;min-height:260px;position:relative;overflow:hidden;
}
.gen-preview-area img{
  max-width:100%;max-height:420px;display:block;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  transition:all .4s var(--ease-out);
}
.gen-preview-area:hover img{transform:scale(1.01);box-shadow:var(--shadow-xl)}
.gen-body{padding:1.5rem 2rem 2rem}
.gen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
.presets-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem}
.presets-row .presets-label{font-size:.7rem;font-weight:700;color:#a1a1aa;text-transform:uppercase;letter-spacing:.08em;margin-right:.25rem}
.preset-btn{
  font-size:.75rem;padding:.35rem .75rem;font-weight:500;
  border:1.5px solid rgba(229,231,235,.8);border-radius:8px;
  background:#fff;color:#71717a;cursor:pointer;
  transition:all .25s var(--ease-out);font-family:var(--font);
  position:relative;overflow:hidden;
}
.preset-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  opacity:0;transition:opacity .25s ease;
}
.preset-btn:hover{
  border-color:var(--accent);color:#fff;
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(99,102,241,.2);
}
.preset-btn:active{transform:translateY(0)}
.check-row label{display:flex;align-items:center;gap:.375rem;font-size:.875rem;color:#52525b;cursor:pointer;font-weight:500}
.check-row input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}

/* ── Quick Start ── */
.qs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.qs-card{
  background:#fff;border:1px solid rgba(229,231,235,.6);
  border-radius:var(--radius);overflow:hidden;
  transition:all .35s var(--ease-out);cursor:default;
  opacity:0;transform:translateY(24px);
}
.qs-card.visible{opacity:1;transform:translateY(0)}
.qs-card:hover{
  border-color:rgba(99,102,241,.3);
  box-shadow:0 12px 36px rgba(99,102,241,.08);
  transform:translateY(-3px);
}
.qs-card.visible:hover{transform:translateY(-3px)}
.qs-card .thumb{
  width:100%;aspect-ratio:16/10;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#fafafa;border-bottom:1px solid rgba(229,231,235,.3);
  padding:.75rem;position:relative;
}
.qs-card .thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(255,255,255,.4));
  pointer-events:none;
}
.qs-card .thumb img{
  max-width:100%;max-height:100%;display:block;border-radius:6px;
  transition:transform .5s var(--ease-out);
}
.qs-card:hover .thumb img{transform:scale(1.05)}
.qs-card .qs-body{padding:1rem 1.25rem 1.25rem}
.qs-card h3{font-size:.9375rem;font-weight:700;color:#18181b;margin:0 0 .75rem;font-family:var(--font)}
.qs-url{
  background:#fafafa;border:1px solid rgba(229,231,235,.6);
  border-radius:8px;padding:.5rem .75rem;
  display:flex;align-items:center;gap:.5rem;overflow:hidden;
  transition:var(--transition);
}
.qs-card:hover .qs-url{border-color:rgba(99,102,241,.15)}
.qs-url code{
  flex:1;min-width:0;font-family:var(--mono);
  font-size:.75rem;color:#52525b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:transparent !important;letter-spacing:.01em;
}
.qs-edit-btn,.qs-adv-btn{
  flex-shrink:0;font-size:.7rem;padding:.25rem .6rem;font-weight:500;
  border:1px solid rgba(99,102,241,.3);border-radius:6px;
  background:var(--accent-soft);color:var(--accent);cursor:pointer;
  transition:all .25s var(--ease-out);font-family:var(--font);
  text-decoration:none;
}
.qs-edit-btn:hover,.qs-adv-btn:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 2px 10px rgba(99,102,241,.25);
}
.qs-adv-btn{
  background:#fef3c7;color:#92400e;border-color:#fcd34d;
}
.qs-adv-btn:hover{
  background:#f59e0b;color:#fff;border-color:#f59e0b;
  box-shadow:0 2px 10px rgba(245,158,11,.25);
}

/* ── Advanced Usage Cards ── */
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.adv-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(229,231,235,.6);
  border-radius:20px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:all .35s cubic-bezier(.16,1,.3,1);
  opacity:0;transform:translateY(20px);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.adv-card.visible{opacity:1;transform:translateY(0)}
.adv-card:hover{
  border-color:rgba(99,102,241,.35);
  box-shadow:0 16px 48px rgba(99,102,241,.12);
  transform:translateY(-6px);
}
.adv-card-preview{
  width:100%;aspect-ratio:4/3;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#fafafa;position:relative;padding:.75rem;
}
.adv-card-preview img{
  max-width:100%;max-height:100%;display:block;
  border-radius:10px;object-fit:contain;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.adv-card:hover .adv-card-preview img{transform:scale(1.04)}
.adv-card-lang{
  position:absolute;top:.5rem;right:.5rem;
  background:rgba(99,102,241,.85);color:#fff;
  font-size:.65rem;font-weight:700;font-family:var(--mono);
  padding:.2rem .5rem;border-radius:6px;
  letter-spacing:.05em;backdrop-filter:blur(4px);
}
.adv-card-body{
  padding:1rem 1.25rem 1.25rem;
  display:flex;flex-direction:column;flex:1;
}
.adv-card-body h3{
  font-size:.9rem;font-weight:700;color:#18181b;
  font-family:var(--font);
}
.adv-card-body p{
  font-size:.75rem;color:#a1a1aa;margin:0 0 .5rem;
  font-family:var(--mono);letter-spacing:.02em;
}
.adv-card-cta{
  font-size:.75rem;color:var(--accent);font-weight:600;
  margin-top:.5rem;transition:all .25s;
}
.adv-card:hover .adv-card-cta{color:var(--accent-hover);letter-spacing:.03em}

/* ── adv-meta & badges ── */
.adv-meta{
  display:flex;align-items:center;gap:.4rem;
  margin-bottom:.5rem;
  min-height:0;
}
.adv-badge{
  font-size:.6rem;font-weight:700;
  padding:.2rem .5rem;border-radius:5px;
  font-family:var(--mono);letter-spacing:.04em;
  text-transform:uppercase;
}
.adv-badge-purple{background:#ede9fe;color:#7c3aed}
.adv-badge-blue{background:#dbeafe;color:#1d4ed8}
.adv-badge-green{background:#dcfce7;color:#15803d}
.adv-badge-yellow{background:#fef9c3;color:#a16207}
.adv-badge-pink{background:#fce7f3;color:#db2777}
.adv-badge-outline{border:1.5px solid rgba(99,102,241,.3);color:#6366f1;background:transparent}
.adv-badge-gray{background:#f4f4f5;color:#71717a}
.adv-desc{font-size:.68rem;color:#a1a1aa;font-family:var(--mono)}

/* ── adv-edit-btn ── */
.adv-edit-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  margin-top:auto;padding-top:1rem;
  font-size:.72rem;padding:.4rem 1rem;
  border-radius:10px;border:1.5px solid rgba(99,102,241,.35);
  background:transparent;color:var(--accent);font-weight:600;
  cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);
  font-family:var(--font);width:100%;
}
.adv-edit-btn:hover{
  background:var(--accent);color:#fff;
  border-color:var(--accent);
  box-shadow:0 4px 16px rgba(99,102,241,.25);
  transform:translateY(-1px);
}

.adv-all-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 2rem;border-radius:50px;
  background:var(--accent);color:#fff;
  font-size:.9rem;font-weight:600;font-family:var(--font);
  text-decoration:none;letter-spacing:.02em;
  transition:all .3s cubic-bezier(.16,1,.3,1);
  box-shadow:0 4px 20px rgba(99,102,241,.3);
}
.adv-all-btn:hover{
  background:var(--accent-hover);
  box-shadow:0 8px 32px rgba(99,102,241,.4);
  transform:translateY(-2px);
  color:#fff;
}

/* ── Features ── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feat-card{
  background:#fff;border:1px solid rgba(229,231,235,.6);
  border-radius:var(--radius);padding:2rem 1.5rem;
  transition:all .35s var(--ease-out);
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(24px);
}
.feat-card.visible{opacity:1;transform:translateY(0)}
.feat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--purple));
  opacity:0;transition:opacity .35s ease;
}
.feat-card:hover::before{opacity:1}
.feat-card:hover{
  border-color:rgba(99,102,241,.25);
  box-shadow:0 12px 36px rgba(99,102,241,.08);
  transform:translateY(-4px);
}
.feat-card.visible:hover{transform:translateY(-4px)}
.feat-card .feat-icon{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;
  transition:all .35s var(--ease-spring);
}
.feat-card:hover .feat-icon{transform:scale(1.1) rotate(-3deg)}
.feat-card h3{font-size:1rem;font-weight:700;color:#18181b;margin:0 0 .5rem;font-family:var(--font);transition:color .3s ease}
.feat-card:hover h3{color:var(--accent)}
.feat-card p{font-size:.85rem;color:#71717a;line-height:1.65;margin:0}

/* ── Use Cases ── */
.uc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.uc-card{
  background:#fff;border:1px solid rgba(229,231,235,.6);
  border-radius:var(--radius);padding:2rem 1.5rem;
  text-align:center;transition:all .35s var(--ease-out);
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(24px);
}
.uc-card.visible{opacity:1;transform:translateY(0)}
.uc-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--purple));
  opacity:0;transition:opacity .35s ease;
}
.uc-card:hover::after{opacity:1}
.uc-card:hover{
  border-color:rgba(99,102,241,.25);
  box-shadow:0 12px 36px rgba(99,102,241,.08);
  transform:translateY(-5px);
}
.uc-card.visible:hover{transform:translateY(-5px)}
.uc-card .uc-num{
  position:absolute;top:.75rem;right:1.25rem;
  font-size:3.5rem;font-weight:900;color:rgba(99,102,241,.04);
  line-height:1;font-family:var(--font);
  transition:color .35s ease;
}
.uc-card:hover .uc-num{color:rgba(99,102,241,.08)}
.uc-card .uc-icon{
  width:52px;height:52px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
  margin-bottom:1rem;
  transition:all .35s var(--ease-spring);
}
.uc-card:hover .uc-icon{
  transform:scale(1.1) rotate(-5deg);
  box-shadow:0 4px 16px rgba(99,102,241,.15);
}
.uc-card h3{font-size:.9375rem;font-weight:700;color:#18181b;margin:0 0 .5rem;font-family:var(--font);transition:color .3s ease}
.uc-card:hover h3{color:var(--accent)}
.uc-card p{font-size:.8125rem;color:#71717a;line-height:1.6;margin:0}

/* ── Home Entrance Animations ── */
.hero .badge-tag{animation:fadeUp .7s var(--ease-out) both}
.hero h1{animation:fadeUp .7s var(--ease-out) .12s both}
.hero p{animation:fadeUp .7s var(--ease-out) .24s both}
.hero-stats{animation:fadeUp .7s var(--ease-out) .36s both}
.gen-section{animation:fadeUp .7s var(--ease-out) .48s both}

/* ── Home Responsive ── */
@media(max-width:1100px){
  .adv-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:800px){
  .adv-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:500px){
  .adv-grid{grid-template-columns:1fr}
}
@media(max-width:960px){
  .hero{padding:7.5rem 1.5rem 3rem}
  .hero h1{font-size:2.75rem}
  .hero p{font-size:1.05rem}
  .hero-stats{gap:.75rem}
  .hero-stat{padding:1rem 1.25rem;min-width:100px}
  .hero-stat .num{font-size:1.35rem}
  .gen-grid{grid-template-columns:repeat(3,1fr)}
  .qs-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .uc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .hero{padding:6.5rem 1.25rem 2.5rem}
  .hero h1{font-size:2rem}
  .hero p{font-size:.95rem}
  .hero-stats{gap:.5rem}
  .hero-stat{padding:.875rem 1rem;min-width:auto;flex:1}
  .hero-stat .num{font-size:1.2rem}
  .gen-section{padding:.5rem 1.25rem 3rem}
  .gen-preview-area{padding:1.5rem;min-height:180px}
  .gen-preview-area img{max-height:280px}
  .gen-body{padding:1.25rem}
  .gen-grid{grid-template-columns:1fr 1fr;gap:.75rem}
  .qs-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr;gap:1rem}
  .uc-grid{grid-template-columns:1fr 1fr;gap:.75rem}
  .uc-card{padding:1.5rem 1rem}
}
@media(max-width:480px){
  .hero h1{font-size:1.65rem}
  .gen-grid{grid-template-columns:1fr}
  .uc-grid{grid-template-columns:1fr}
  .hero-stats{flex-direction:column;gap:.5rem}
  .hero-stat{display:flex;align-items:center;gap:.75rem;text-align:left;padding:.75rem 1rem}
  .hero-stat .num{font-size:1.1rem}
  .hero-stat .label{margin-top:0}
}


/* ═══════════════════════════════════════════════════════
   Advanced Page — Exclusive CSS
   ═══════════════════════════════════════════════════════ */

/* ── Advanced Hero ── */
.adv-hero{max-width:var(--max-w);margin:0 auto;padding:8.5rem var(--pad-x) 3rem;text-align:center}
.adv-hero h1{font-size:2.5rem;font-weight:900;color:#18181b;letter-spacing:-.04em;line-height:1.1;margin:0;font-family:var(--font)}
.adv-hero p{font-size:1.1rem;color:#71717a;margin:1rem auto 0;max-width:560px;line-height:1.7}
.adv-hero h1{animation:fadeUp .7s var(--ease-out) both}
.adv-hero p{animation:fadeUp .7s var(--ease-out) .1s both}

/* ── Dark Theme (Advanced) ── */
[data-bs-theme="dark"] .adv-hero h1{color:#fafafa}
[data-bs-theme="dark"] .adv-hero p{color:#a1a1aa}
[data-bs-theme="dark"] .playground-card{background:rgba(24,24,27,.8);border-color:rgba(63,63,70,.5)}
[data-bs-theme="dark"] .playground-preview{background:rgba(39,39,42,.5);border-color:rgba(63,63,70,.3)}
[data-bs-theme="dark"] .toggle-btn{background:rgba(39,39,42,.5);border-color:rgba(63,63,70,.4);color:#a1a1aa}
[data-bs-theme="dark"] .toggle-btn:hover{border-color:var(--accent);color:#c7d2fe}
[data-bs-theme="dark"] .toggle-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
[data-bs-theme="dark"] .ctrl-color-row input[type=color]{border-color:rgba(63,63,70,.5);background:rgba(24,24,27,.6)}
[data-bs-theme="dark"] .icon-tab{background:rgba(24,24,27,.6);border-color:rgba(63,63,70,.4);color:#a1a1aa}
[data-bs-theme="dark"] .icon-tab:hover{color:#fafafa;border-color:rgba(99,102,241,.3)}
[data-bs-theme="dark"] .icon-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
[data-bs-theme="dark"] .icon-cell{background:rgba(24,24,27,.5);border-color:rgba(63,63,70,.3)}
[data-bs-theme="dark"] .icon-cell:hover{border-color:rgba(99,102,241,.4);background:rgba(24,24,27,.8)}
[data-bs-theme="dark"] .icon-cell.active{border-color:var(--accent);background:rgba(99,102,241,.1)}
[data-bs-theme="dark"] .icon-cell .icon-name{color:#a1a1aa}
[data-bs-theme="dark"] .ref-row{border-color:rgba(63,63,70,.3)}
[data-bs-theme="dark"] .ref-row:hover{background:rgba(24,24,27,.5)}
[data-bs-theme="dark"] .ref-row .ref-param{color:#a5b4fc}
[data-bs-theme="dark"] .ref-row .ref-name{color:#fafafa}
[data-bs-theme="dark"] .ref-row .ref-desc{color:#a1a1aa}
[data-bs-theme="dark"] .ref-row .ref-val{color:#d4d4d8}
[data-bs-theme="dark"] .ref-row .ref-default{color:#71717a}
[data-bs-theme="dark"] .ref-row code{background:rgba(99,102,241,.1);color:#a5b4fc}
[data-bs-theme="dark"] .icon-search{background:rgba(24,24,27,.6);border-color:rgba(63,63,70,.5);color:#e4e4e7}
[data-bs-theme="dark"] .icon-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
[data-bs-theme="dark"] .icon-preview-box{background:rgba(39,39,42,.5);border-color:rgba(63,63,70,.3)}
[data-bs-theme="dark"] .docs-tab{background:rgba(24,24,27,.6);border-color:rgba(63,63,70,.4);color:#a1a1aa}
[data-bs-theme="dark"] .docs-tab:hover{color:#fafafa;border-color:rgba(99,102,241,.3)}
[data-bs-theme="dark"] .docs-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── Playground ── */
.playground-section{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x) 4rem;animation:fadeUp .7s var(--ease-out) .2s both}
.playground-card{background:#fff;border:1px solid rgba(229,231,235,.6);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-xl)}
.playground-preview{background:linear-gradient(135deg,#fafafa 0%,#f5f3ff 50%,#faf5ff 100%);border-bottom:1px solid rgba(229,231,235,.5);display:flex;align-items:center;justify-content:center;padding:2rem;min-height:240px}
.playground-preview.transparent-mode{background:linear-gradient(135deg,#1e1e2e 0%,#2d2d44 50%,#1a1a2e 100%);border-bottom-color:rgba(63,63,70,.5)}
.playground-preview img{max-width:100%;max-height:380px;display:block;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);transition:all .4s var(--ease-out)}
.playground-controls{padding:2rem 2rem 2.5rem}
.ctrl-section{margin-bottom:1.75rem}
.ctrl-section-title{font-size:.75rem;font-weight:700;color:#a1a1aa;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid rgba(229,231,235,.4)}
.ctrl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem;align-items:center}
.ctrl-grid-2{grid-template-columns:repeat(2,1fr)}
.ctrl-grid-3{grid-template-columns:repeat(3,1fr)}
.ctrl-grid-4{grid-template-columns:repeat(4,1fr)}
.ctrl-group-full{grid-column:span 4}
.toggle-row{display:flex;flex-wrap:wrap;gap:.5rem}
.toggle-btn{font-size:.75rem;padding:.35rem .7rem;font-weight:500;border:1.5px solid rgba(229,231,235,.8);border-radius:8px;background:#fff;color:#71717a;cursor:pointer;transition:all .25s var(--ease-out);font-family:var(--font)}
.toggle-btn:hover{border-color:var(--accent);color:var(--accent)}
.toggle-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.range-row{display:flex;align-items:center;gap:.5rem}
.range-row input[type=range]{flex:1;accent-color:var(--accent)}
.range-val{font-size:.75rem;color:#a1a1aa;min-width:36px;text-align:right;font-weight:500}
.grad-field.disabled select,.grad-field.disabled input{opacity:.35;pointer-events:none}
.range-row input[type=range]:disabled{opacity:.35;cursor:not-allowed}
.playground-extras{display:flex;gap:1rem;align-items:flex-end;margin-bottom:1rem}
.playground-extras .extra-field{display:flex;flex-direction:column;gap:.375rem}

/* ── Icon Gallery ── */
.icon-tabs{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem;align-items:center}
.icon-subtabs{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap;justify-content:center}
.icon-tab{font-size:.8rem;padding:.45rem 1rem;font-weight:600;border:1.5px solid rgba(229,231,235,.8);border-radius:99px;background:#fff;color:#71717a;cursor:pointer;transition:all .25s var(--ease-out);font-family:var(--font)}
.icon-tab:hover{border-color:var(--accent);color:var(--accent)}
.icon-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 10px rgba(99,102,241,.25)}
.icon-toolbar{display:flex;gap:1rem;align-items:center;margin-bottom:1.25rem}
.icon-search{flex:1;height:40px;border:1.5px solid rgba(229,231,235,.8);border-radius:var(--radius-sm);padding:0 1rem;font-size:.875rem;font-family:var(--font);outline:none;transition:all .25s var(--ease-out);background:#fff;color:#18181b}
.icon-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.icon-style-toggle{display:flex;border:1.5px solid rgba(229,231,235,.8);border-radius:var(--radius-sm);overflow:hidden}
.icon-style-toggle button{font-size:.8rem;padding:.45rem 1.2rem;border:none;background:#fff;color:#71717a;cursor:pointer;transition:all .2s;font-family:var(--font);font-weight:500}
.icon-style-toggle button:not(:last-child){border-right:1px solid rgba(229,231,235,.6)}
.icon-style-toggle button.active{background:var(--accent);color:#fff}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem;margin-bottom:1.5rem;max-height:420px;overflow-y:auto;padding:.25rem}
.icon-grid::-webkit-scrollbar{width:4px}
.icon-grid::-webkit-scrollbar-thumb{background:rgba(99,102,241,.2);border-radius:4px}
.icon-cell{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.75rem .5rem;border:1px solid rgba(229,231,235,.6);border-radius:var(--radius-sm);background:#fff;cursor:pointer;transition:all .25s var(--ease-out)}
.icon-cell:hover{border-color:rgba(99,102,241,.3);box-shadow:0 4px 16px rgba(99,102,241,.06);transform:translateY(-2px)}
.icon-cell.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 4px 16px rgba(99,102,241,.1)}
.icon-cell .icon-preview{width:28px;height:28px;transition:opacity .2s;object-fit:contain}
.icon-cell:hover .icon-preview{opacity:.8}
.icon-cell.active .icon-preview{filter:none}
.icon-cell .icon-name{font-size:.65rem;color:#a1a1aa;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:color .2s}
.icon-cell.active .icon-name{color:var(--accent);font-weight:600}
.icon-preview-bar{display:flex;gap:1rem;align-items:center}
.icon-preview-box{flex-shrink:0;width:300px;height:140px;background:linear-gradient(135deg,#fafafa,#f5f3ff);border:1px solid rgba(229,231,235,.6);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.icon-preview-box img{max-width:100%;max-height:120px;display:block;border-radius:6px}

/* ── Reference Table ── */
.ref-table{display:flex;flex-direction:column;gap:.5rem}
.ref-row{display:grid;grid-template-columns:140px 1fr 100px 2fr;gap:1rem;align-items:center;padding:1rem 1.25rem;border:1px solid rgba(229,231,235,.6);border-radius:var(--radius-sm);background:#fff;transition:all .25s var(--ease-out)}
.ref-row:hover{border-color:rgba(99,102,241,.2);box-shadow:0 2px 10px rgba(99,102,241,.04)}
.ref-row .ref-param code{font-family:var(--mono);font-size:.8rem;background:var(--accent-soft);color:var(--accent);padding:.2rem .5rem;border-radius:4px;white-space:nowrap}
.ref-row .ref-name{font-size:.875rem;font-weight:600;color:#18181b}
.ref-row .ref-val{font-size:.8125rem;color:#71717a}
.ref-row .ref-default{font-size:.8125rem;color:#a1a1aa}
.ref-row .ref-desc{font-size:.8125rem;color:#71717a;line-height:1.5}

/* ── Documentation Tabs ── */
.docs-tabs{display:flex;gap:.5rem;justify-content:center;margin-bottom:2rem;flex-wrap:wrap}
.docs-tab{font-size:.875rem;padding:.55rem 1.35rem;font-weight:600;border:1.5px solid rgba(229,231,235,.8);border-radius:99px;background:#fff;color:#71717a;cursor:pointer;transition:all .25s var(--ease-out);font-family:var(--font)}
.docs-tab:hover{border-color:var(--accent);color:var(--accent)}
.docs-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 10px rgba(99,102,241,.25)}
.docs-panels{position:relative}
.docs-panel{display:none;animation:tabFadeIn .35s var(--ease-out)}
.docs-panel.active{display:block}
@keyframes tabFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Advanced Responsive ── */
@media(max-width:960px){
  .adv-hero{padding:7.5rem 1.5rem 2.5rem}
  .ctrl-grid,.ctrl-grid-2,.ctrl-grid-3,.ctrl-grid-4{grid-template-columns:repeat(2,1fr)}
  .ctrl-group-full{grid-column:span 2}
  .ref-row{grid-template-columns:120px 1fr 80px 1.5fr}
  .icon-preview-bar{flex-direction:column}
  .icon-preview-box{width:100%}
}
@media(max-width:760px){
  .adv-hero{padding:6.5rem 1.25rem 2rem}
  .adv-hero h1{font-size:1.75rem}
  .docs-tab{font-size:.8rem;padding:.45rem 1rem}
  .ctrl-grid,.ctrl-grid-2,.ctrl-grid-3,.ctrl-grid-4{grid-template-columns:1fr;gap:.75rem}
  .ctrl-group-full{grid-column:span 1}
  .playground-controls{padding:1.25rem}
  .playground-preview{padding:1.5rem;min-height:160px}
  .playground-preview img{max-height:240px}
  .playground-extras{flex-direction:column;gap:.75rem}
  .ref-row{grid-template-columns:1fr 1fr;gap:.5rem}
  .ref-row .ref-desc{grid-column:span 2}
  .icon-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
}
@media(max-width:480px){
  .adv-hero h1{font-size:1.5rem}
  .ctrl-grid,.ctrl-grid-2,.ctrl-grid-3,.ctrl-grid-4{grid-template-columns:1fr}
  .ref-row{grid-template-columns:1fr}
  .ref-row .ref-desc{grid-column:auto}
}


/* ═══════════════════════════════════════════════════════
   RTL Overrides (Arabic / Urdu)
   ═══════════════════════════════════════════════════════ */
[dir="rtl"] .site-nav .links{margin-left:0;margin-right:1rem}
[dir="rtl"] .nav-spacer{order:-1}
[dir="rtl"] .size-row .sep{margin:0}
[dir="rtl"] .hero h1{direction:rtl}
[dir="rtl"] .section-title,[dir="rtl"] .section-desc{text-align:right}
[dir="rtl"] .section-line{margin-left:auto;margin-right:auto}
[dir="rtl"] .sec-head{text-align:right}
[dir="rtl"] .gen-grid,[dir="rtl"] .ctrl-grid,[dir="rtl"] .ctrl-grid-2,[dir="rtl"] .ctrl-grid-3,[dir="rtl"] .ctrl-grid-4{direction:rtl}
[dir="rtl"] .qs-url,[dir="rtl"] .gen-output-bar{direction:ltr}
[dir="rtl"] .qs-edit-btn,[dir="rtl"] .adv-edit-btn{direction:rtl}
[dir="rtl"] .ref-row{direction:rtl}
[dir="rtl"] .ref-row .ref-param{direction:ltr;text-align:right}
[dir="rtl"] .ref-row .ref-val,[dir="rtl"] .ref-row .ref-default{direction:ltr;text-align:right}
[dir="rtl"] .ref-row .ref-desc{direction:rtl;text-align:right}
[dir="rtl"] .icon-subtabs{direction:rtl}
[dir="rtl"] .icon-toolbar{direction:rtl}
[dir="rtl"] .icon-search{direction:ltr;text-align:right}
[dir="rtl"] .icon-cell{direction:ltr}
[dir="rtl"] .icon-preview-bar{direction:ltr}
[dir="rtl"] .gen-output-bar code{direction:ltr;text-align:left}
[dir="rtl"] .copy-btn,[dir="rtl"] .preset-btn{direction:rtl}
[dir="rtl"] .toggle-row{direction:rtl}
[dir="rtl"] .toggle-btn{direction:rtl}
[dir="rtl"] .ctrl-color-row{direction:ltr}
[dir="rtl"] .playground-controls{direction:rtl}
[dir="rtl"] .ctrl-section-title{direction:rtl;text-align:right}
[dir="rtl"] .gen-output-bar{direction:ltr}
[dir="rtl"] .adv-hero{text-align:right}
[dir="rtl"] .hero{text-align:right}
[dir="rtl"] .badge-tag{direction:rtl}
[dir="rtl"] .feat-grid,[dir="rtl"] .uc-grid,[dir="rtl"] .qs-grid,[dir="rtl"] .adv-grid{direction:rtl}
[dir="rtl"] .feat-card,[dir="rtl"] .uc-card,[dir="rtl"] .qs-card,[dir="rtl"] .adv-card{direction:rtl}
[dir="rtl"] .icon-tabs{direction:rtl}
[dir="rtl"] .icon-style-toggle{direction:ltr}
[dir="rtl"] .icon-grid{direction:ltr}
[dir="rtl"] .docs-tabs{direction:rtl}