@font-face{
  font-family:Quran;
  src:url('/fonts/Quran.ttf') format('truetype');
  font-display:swap;
}

/* =========================================================
   Story Maker V15 — page-scoped only
   لا توجد أي قواعد عامة للهيدر أو الفوتر المركزيين.
   ========================================================= */
.story-maker-page{
  width:100%;
  padding:24px 0 54px;
}

#storyMakerApp{
  --story-bg:#f6f7f4;
  --story-surface:#ffffff;
  --story-surface-2:#f2f5f1;
  --story-ink:#17221e;
  --story-muted:#69766f;
  --story-line:#dbe3dd;
  --story-brand:#153f35;
  --story-brand-2:#0f3029;
  --story-brand-soft:#e7efeb;
  --story-gold:#b88b3e;
  --story-gold-2:#d8ba75;
  --story-gold-soft:#f6eddc;
  --story-danger:#9b3434;
  --story-shadow:0 18px 48px rgba(21,63,53,.09);
  --story-shadow-soft:0 8px 24px rgba(21,63,53,.07);
  --story-radius:24px;
  width:min(1450px,calc(100% - 28px));
  margin-inline:auto;
  color:var(--story-ink);
  font-family:Tahoma,Arial,"Segoe UI",sans-serif;
  line-height:1.75;
}

html[data-theme="dark"] #storyMakerApp,
html[data-eq-theme="dark"] #storyMakerApp,
html.dark #storyMakerApp,
html.dark-mode #storyMakerApp,
body.dark-mode #storyMakerApp,
body.night-mode #storyMakerApp{
  --story-bg:#0e1512;
  --story-surface:#151f1b;
  --story-surface-2:#1b2924;
  --story-ink:#edf4f0;
  --story-muted:#a4b3ac;
  --story-line:#2c3b35;
  --story-brand:#d7bd7f;
  --story-brand-2:#b99048;
  --story-brand-soft:#1b3029;
  --story-gold:#d8b66e;
  --story-gold-2:#ecd395;
  --story-gold-soft:#30291e;
  --story-danger:#ef8e8e;
  --story-shadow:0 18px 48px rgba(0,0,0,.24);
  --story-shadow-soft:0 8px 24px rgba(0,0,0,.18);
}

@media(prefers-color-scheme:dark){
  html:not([data-theme="light"]):not([data-eq-theme="light"]) #storyMakerApp{
    --story-bg:#0e1512;
    --story-surface:#151f1b;
    --story-surface-2:#1b2924;
    --story-ink:#edf4f0;
    --story-muted:#a4b3ac;
    --story-line:#2c3b35;
    --story-brand:#d7bd7f;
    --story-brand-2:#b99048;
    --story-brand-soft:#1b3029;
    --story-gold:#d8b66e;
    --story-gold-2:#ecd395;
    --story-gold-soft:#30291e;
    --story-shadow:0 18px 48px rgba(0,0,0,.24);
    --story-shadow-soft:0 8px 24px rgba(0,0,0,.18);
  }
}

#storyMakerApp *,
#storyMakerApp *::before,
#storyMakerApp *::after{box-sizing:border-box}
#storyMakerApp button,
#storyMakerApp select,
#storyMakerApp input,
#storyMakerApp output{font:inherit}
#storyMakerApp button,
#storyMakerApp a{touch-action:manipulation}
#storyMakerApp .hidden{display:none!important}

.story-maker-page{
  background:var(--story-bg,#f6f7f4);
}

#storyMakerApp .panel{
  background:var(--story-surface);
  border:1px solid var(--story-line);
  border-radius:var(--story-radius);
  box-shadow:var(--story-shadow);
}

/* Hero */
#storyMakerApp .story-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  overflow:hidden;
  padding:34px 36px;
  margin-bottom:22px;
  border:1px solid rgba(211,180,107,.48);
  border-radius:28px;
  color:#fff;
  background:
    radial-gradient(circle at 12% 0%,rgba(229,211,158,.16),transparent 33%),
    radial-gradient(circle at 90% 115%,rgba(211,180,107,.14),transparent 35%),
    linear-gradient(135deg,#183f36 0%,#102f29 58%,#0a241f 100%);
  box-shadow:0 18px 50px rgba(20,58,49,.16);
}
#storyMakerApp .story-hero::before{
  content:"۞";
  position:absolute;
  inset:auto -32px -88px auto;
  z-index:-1;
  font-family:Quran,serif;
  font-size:250px;
  line-height:1;
  color:rgba(230,210,157,.055);
}
#storyMakerApp .story-hero::after{
  content:"";
  position:absolute;
  inset:12px;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(231,215,166,.12);
  border-radius:20px;
}
#storyMakerApp .story-hero-copy{max-width:850px}
#storyMakerApp .story-eyebrow,
#storyMakerApp .step-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#dec88c;
  font-size:.82rem;
  font-weight:900;
}
#storyMakerApp .story-hero h1{
  margin:6px 0 9px;
  font-family:Quran,Tahoma,Arial,sans-serif;
  font-size:clamp(2.1rem,4vw,4rem);
  line-height:1.35;
  font-weight:700;
}
#storyMakerApp .story-hero p{
  margin:0;
  max-width:820px;
  color:#dce8e1;
  font-size:1rem;
}
#storyMakerApp .hero-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:18px;
  color:#cddbd3;
  font-size:.82rem;
}
#storyMakerApp .hero-actions{
  display:grid;
  gap:10px;
  min-width:200px;
}

/* Buttons */
#storyMakerApp .story-btn,
#storyMakerApp .text-btn,
#storyMakerApp .quick-tab{
  border:0;
  cursor:pointer;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease;
}
#storyMakerApp .story-btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 15px;
  border-radius:12px;
  font-weight:800;
}
#storyMakerApp .story-btn:hover,
#storyMakerApp .template-card:hover,
#storyMakerApp .quick-verse-card:hover{transform:translateY(-1px)}
#storyMakerApp .story-btn:focus-visible,
#storyMakerApp .template-card:focus-visible,
#storyMakerApp .quick-tab:focus-visible,
#storyMakerApp .quick-verse-card button:focus-visible,
#storyMakerApp select:focus-visible,
#storyMakerApp input:focus-visible,
#storyMakerApp summary:focus-visible{
  outline:3px solid rgba(184,139,62,.35);
  outline:3px solid color-mix(in srgb,var(--story-gold) 35%,transparent);
  outline-offset:2px;
}
#storyMakerApp .story-btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#c39a4f,#9d7736);
  box-shadow:0 10px 24px rgba(157,119,54,.25);
}
#storyMakerApp .story-hero .story-btn-primary{color:#17372f;background:linear-gradient(135deg,#eed9a0,#d5b66c)}
#storyMakerApp .story-btn-secondary{
  color:var(--story-ink);
  background:var(--story-surface);
  border:1px solid var(--story-line);
}
#storyMakerApp .story-hero .story-btn-secondary{color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.23)}
#storyMakerApp .story-btn-ghost{color:var(--story-ink);background:var(--story-surface-2);border:1px solid var(--story-line)}
#storyMakerApp .story-btn-accent{color:#fff;background:linear-gradient(135deg,#1a5144,#123a31);border:1px solid rgba(211,180,107,.38)}
#storyMakerApp .story-btn.small{min-height:38px;padding:7px 11px;font-size:.82rem}
#storyMakerApp .story-btn.large{min-width:235px;min-height:52px;padding:14px 22px;font-size:1rem}
#storyMakerApp .story-btn:disabled{cursor:not-allowed;opacity:.55;transform:none}
#storyMakerApp .text-btn{padding:7px 8px;background:transparent;color:var(--story-brand);font-size:.84rem;font-weight:900}
#storyMakerApp .text-btn.muted{color:var(--story-muted)}
#storyMakerApp .text-btn.danger{color:var(--story-danger)}

/* Quick verses */
#storyMakerApp .quick-verses{padding:22px;margin-bottom:22px}
#storyMakerApp .section-heading,
#storyMakerApp .quick-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
#storyMakerApp .section-heading h2{margin:3px 0 2px;font-size:1.32rem}
#storyMakerApp .section-heading p{margin:0;color:var(--story-muted);font-size:.9rem}
#storyMakerApp .quick-tabs{display:flex;gap:6px;padding:4px;border:1px solid var(--story-line);border-radius:13px;background:var(--story-surface-2)}
#storyMakerApp .quick-tab{min-height:38px;padding:7px 13px;border-radius:9px;color:var(--story-muted);background:transparent;font-weight:800}
#storyMakerApp .quick-tab.active{color:#fff;background:var(--story-brand);box-shadow:var(--story-shadow-soft)}
#storyMakerApp .quick-verse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:17px}
#storyMakerApp .quick-verse-card{
  position:relative;
  min-width:0;
  display:grid;
  gap:9px;
  padding:14px;
  border:1px solid var(--story-line);
  border-radius:16px;
  background:linear-gradient(145deg,var(--story-surface),var(--story-surface-2));
  transition:.18s ease;
}
#storyMakerApp .quick-verse-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;border-radius:16px 0 0 16px;background:linear-gradient(var(--story-gold-2),var(--story-brand))}
#storyMakerApp .quick-verse-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
#storyMakerApp .quick-verse-title strong{font-size:.94rem;color:var(--story-ink)}
#storyMakerApp .quick-verse-title span{flex:0 0 auto;padding:2px 7px;border-radius:999px;background:var(--story-gold-soft);color:var(--story-gold);font-size:.7rem;font-weight:900}
#storyMakerApp .quick-verse-meta{color:var(--story-muted);font-size:.78rem}
#storyMakerApp .quick-card-actions{display:flex;gap:7px;margin-top:auto}
#storyMakerApp .quick-card-actions button{flex:1;min-height:36px;border:1px solid var(--story-line);border-radius:9px;background:var(--story-surface);color:var(--story-ink);cursor:pointer;font-weight:800;font-size:.78rem}
#storyMakerApp .quick-card-actions button:first-child{color:#fff;background:var(--story-brand);border-color:var(--story-brand)}
#storyMakerApp .quick-listen-note{margin-top:10px;color:var(--story-muted);font-size:.78rem}
#storyMakerApp .inline-audio{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(260px,1.3fr) auto;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border:1px solid var(--story-line);border:1px solid color-mix(in srgb,var(--story-gold) 34%,var(--story-line));border-radius:15px;background:var(--story-gold-soft)}
#storyMakerApp .inline-audio>div{display:grid;gap:2px}
#storyMakerApp .inline-audio span{color:var(--story-muted);font-size:.8rem}
#storyMakerApp .inline-audio audio{width:100%;height:40px}

/* Main maker */
#storyMakerApp .maker-grid{display:grid;grid-template-columns:minmax(390px,1.08fr) minmax(350px,.92fr);gap:22px;align-items:start}
#storyMakerApp .controls-panel{padding:22px}
#storyMakerApp .panel-head,
#storyMakerApp .preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px}
#storyMakerApp .panel-head>div:first-child,
#storyMakerApp .preview-toolbar>div:first-child{display:flex;align-items:center;gap:10px}
#storyMakerApp .panel-head h2,
#storyMakerApp .preview-toolbar h2,
#storyMakerApp .export-panel h2{margin:0;font-size:1.15rem}
#storyMakerApp .compact-head{align-items:center}
#storyMakerApp .step-number{display:inline-grid;place-items:center;flex:0 0 auto;width:31px;height:31px;border:1px solid var(--story-line);border:1px solid color-mix(in srgb,var(--story-gold) 35%,var(--story-line));border-radius:10px;background:var(--story-gold-soft);color:var(--story-gold);font-weight:900}
#storyMakerApp .head-actions{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
#storyMakerApp .status-pill,
#storyMakerApp .mini-badge{padding:4px 9px;border:1px solid var(--story-line);border-radius:999px;background:var(--story-surface-2);color:var(--story-muted);font-size:.74rem;font-weight:800}

#storyMakerApp .field-grid{display:grid;gap:12px;margin-top:15px}
#storyMakerApp .field-grid.two{grid-template-columns:1fr 1fr}
#storyMakerApp .field{display:grid;gap:7px;min-width:0}
#storyMakerApp .field>span{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--story-muted);font-size:.84rem;font-weight:800}
#storyMakerApp .field output{color:var(--story-gold);font-weight:900}
#storyMakerApp select,
#storyMakerApp input[type="text"],
#storyMakerApp input[type="color"]{border:1px solid var(--story-line);background:var(--story-surface);color:var(--story-ink)}
#storyMakerApp select{width:100%;min-height:45px;padding:8px 11px;border-radius:11px;outline:0}
#storyMakerApp input[type="range"]{width:100%;accent-color:var(--story-gold)}
#storyMakerApp .range-field{align-content:start}
#storyMakerApp .divider{height:1px;margin:20px 0;background:var(--story-line)}
#storyMakerApp .content-actions{display:flex;align-items:center;gap:11px;margin-top:13px}
#storyMakerApp .selection-hint{color:var(--story-muted);font-size:.78rem;line-height:1.6}

/* Templates */
#storyMakerApp .template-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
#storyMakerApp .template-card{
  position:relative;
  aspect-ratio:1/1.18;
  overflow:hidden;
  padding:0;
  border:2px solid transparent;
  border-radius:13px;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:.18s ease;
}
#storyMakerApp .template-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.22);border-radius:9px;pointer-events:none}
#storyMakerApp .template-card::after{content:"۞";position:absolute;inset:13% 0 auto;text-align:center;color:rgba(255,255,255,.28);font-family:Quran,serif;font-size:2rem}
#storyMakerApp .template-card[aria-pressed="true"]{border-color:var(--story-gold);box-shadow:0 0 0 3px rgba(184,139,62,.18);box-shadow:0 0 0 3px color-mix(in srgb,var(--story-gold) 18%,transparent)}
#storyMakerApp .template-card span{position:absolute;inset:auto 5px 5px;padding:4px;border-radius:7px;background:rgba(0,0,0,.48);color:#fff;font-size:.62rem;line-height:1.35;backdrop-filter:blur(5px);z-index:2}

/* Font and uploads */
#storyMakerApp .color-controls{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
#storyMakerApp #fontColor{width:52px;height:42px;padding:3px;border-radius:10px;cursor:pointer}
#storyMakerApp .color-swatches{display:flex;gap:7px;flex-wrap:wrap}
#storyMakerApp .color-swatch{width:30px;height:30px;padding:0;border:2px solid var(--story-surface);border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px var(--story-line);cursor:pointer}
#storyMakerApp .color-swatch.active{box-shadow:0 0 0 2px var(--story-gold)}
#storyMakerApp .upload-box{display:grid;gap:3px;margin-top:14px;padding:13px 14px;border:1px dashed var(--story-line);border:1px dashed color-mix(in srgb,var(--story-brand) 40%,var(--story-line));border-radius:13px;background:var(--story-surface-2);cursor:pointer}
#storyMakerApp .upload-box input{display:none}
#storyMakerApp .upload-title{font-weight:900}
#storyMakerApp .upload-sub{color:var(--story-muted);font-size:.78rem}
#storyMakerApp .toggle-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
#storyMakerApp .toggle-row label{display:flex;align-items:center;gap:7px;padding:8px 9px;border:1px solid var(--story-line);border-radius:10px;background:var(--story-surface-2);cursor:pointer;font-size:.84rem}
#storyMakerApp .toggle-row input{accent-color:var(--story-gold)}
#storyMakerApp .rights-box{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px;border:1px solid var(--story-line);border:1px solid color-mix(in srgb,var(--story-gold) 32%,var(--story-line));border-radius:14px;background:linear-gradient(135deg,var(--story-surface-2),var(--story-gold-soft))}
#storyMakerApp .rights-icon{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border:1px solid var(--story-line);border:1px solid color-mix(in srgb,var(--story-gold) 42%,var(--story-line));border-radius:50%;color:var(--story-gold);font-weight:900;font-size:1.15rem}
#storyMakerApp .rights-box>div:last-child{display:grid;gap:2px}
#storyMakerApp .rights-box span{color:var(--story-muted);font-size:.84rem;font-weight:700}

/* Preview */
#storyMakerApp .preview-column{position:sticky;top:86px}
#storyMakerApp .preview-toolbar{margin-bottom:12px}
#storyMakerApp .preview-toolbar .step-kicker{color:var(--story-gold)}
#storyMakerApp .preview-actions{display:flex;align-items:center;gap:7px}
#storyMakerApp .preview-counter{min-width:56px;text-align:center;color:var(--story-muted);font-size:.82rem;font-weight:900}
#storyMakerApp .phone-stage{display:grid;place-items:center;padding:18px;border:1px solid var(--story-line);border-radius:var(--story-radius);background:var(--story-surface);background:radial-gradient(circle at top,color-mix(in srgb,var(--story-gold) 10%,transparent),transparent 48%),var(--story-surface);box-shadow:var(--story-shadow)}
#storyMakerApp .phone-frame{width:min(420px,100%);aspect-ratio:9/16;padding:9px;border-radius:31px;background:#080a09;box-shadow:0 22px 62px rgba(0,0,0,.23)}
#storyMakerApp #storyCanvas{display:block;width:100%;height:100%;border-radius:23px;background:#153f35}
#storyMakerApp .quick-actions,
#storyMakerApp .result-actions{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:12px}

/* Export */
#storyMakerApp .export-panel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;margin-top:22px;padding:24px}
#storyMakerApp .export-copy{display:flex;align-items:flex-start;gap:12px}
#storyMakerApp .export-copy p{margin:4px 0 0;color:var(--story-muted)}
#storyMakerApp .browser-export-options{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,.75fr) minmax(180px,.55fr) minmax(300px,1.1fr);gap:12px;align-items:stretch}
#storyMakerApp .compact-field{margin:0;padding:12px;border:1px solid var(--story-line);border-radius:14px;background:var(--story-surface-2)}
#storyMakerApp .format-card{display:grid;align-content:center;gap:3px;padding:12px 14px;border:1px solid var(--story-line);border-radius:14px;background:var(--story-surface-2)}
#storyMakerApp .format-card span{color:var(--story-muted);font-size:.8rem}
#storyMakerApp .server-save-option{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--story-line);border-radius:14px;background:var(--story-surface-2);cursor:pointer}
#storyMakerApp .server-save-option input{margin-top:5px;accent-color:var(--story-gold)}
#storyMakerApp .server-save-option span{display:grid;gap:2px}
#storyMakerApp .server-save-option small{color:var(--story-muted);font-size:.75rem;line-height:1.55}
#storyMakerApp .browser-note{grid-column:1/-1;padding:10px 12px;border:1px solid var(--story-line);border:1px solid color-mix(in srgb,var(--story-gold) 28%,var(--story-line));border-radius:12px;background:var(--story-gold-soft);font-size:.82rem}
#storyMakerApp .job,
#storyMakerApp .result,
#storyMakerApp .error-box{grid-column:1/-1}
#storyMakerApp .job{padding-top:5px}
#storyMakerApp .job-top{display:flex;justify-content:space-between;gap:20px;margin-bottom:7px}
#storyMakerApp .job-track{height:9px;overflow:hidden;border:1px solid var(--story-line);border-radius:999px;background:var(--story-surface-2)}
#storyMakerApp .job-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--story-brand),var(--story-gold));transition:width .3s ease}
#storyMakerApp .result{display:grid;gap:13px;padding-top:5px}
#storyMakerApp .result-badge{color:var(--story-brand);font-weight:900}
#storyMakerApp .result video{width:min(390px,100%);aspect-ratio:9/16;border:1px solid var(--story-line);border-radius:17px;background:#000}
#storyMakerApp .expiry-note{margin:0;color:var(--story-muted);font-size:.86rem}
#storyMakerApp .error-box{padding:12px 14px;border:1px solid #c98282;border:1px solid color-mix(in srgb,#c84242 42%,var(--story-line));border-radius:13px;background:#fff5f5;background:color-mix(in srgb,#c84242 10%,var(--story-surface));color:var(--story-danger);white-space:pre-line}

/* Features + SEO */
#storyMakerApp .feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
#storyMakerApp .feature-strip article{display:grid;gap:5px;padding:16px;border:1px solid var(--story-line);border-radius:16px;background:var(--story-surface)}
#storyMakerApp .feature-strip strong{color:var(--story-brand);font-size:.9rem}
#storyMakerApp .feature-strip span{color:var(--story-muted);font-size:.8rem}
#storyMakerApp .seo-content{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:22px;padding:24px}
#storyMakerApp .seo-content h2{margin:3px 0 8px;font-size:1.28rem}
#storyMakerApp .seo-content p{margin:0;color:var(--story-muted);font-size:.9rem}
#storyMakerApp .seo-content .step-kicker{color:var(--story-gold)}
#storyMakerApp .faq-list{display:grid;gap:8px}
#storyMakerApp .faq-list details{border:1px solid var(--story-line);border-radius:12px;background:var(--story-surface-2)}
#storyMakerApp .faq-list summary{padding:11px 13px;cursor:pointer;font-weight:900;font-size:.88rem}
#storyMakerApp .faq-list p{padding:0 13px 12px;margin:0}

@media(max-width:1180px){
  #storyMakerApp .quick-verse-grid{grid-template-columns:repeat(3,1fr)}
  #storyMakerApp .template-list{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:1050px){
  #storyMakerApp .maker-grid{grid-template-columns:1fr}
  #storyMakerApp .preview-column{position:static;max-width:690px;width:100%;margin-inline:auto}
  #storyMakerApp .feature-strip{grid-template-columns:1fr 1fr}
  #storyMakerApp .export-panel{grid-template-columns:1fr}
  #storyMakerApp .export-panel>.story-btn-primary{justify-self:start}
  #storyMakerApp .browser-export-options{grid-template-columns:1fr 1fr}
  #storyMakerApp .server-save-option{grid-column:1/-1}
}

@media(max-width:760px){
  .story-maker-page{padding-top:12px}
  #storyMakerApp{width:min(100% - 18px,1450px)}
  #storyMakerApp .story-hero{align-items:flex-start;flex-direction:column;padding:22px 19px;border-radius:20px}
  #storyMakerApp .story-hero h1{font-size:clamp(2rem,10vw,3rem)}
  #storyMakerApp .hero-actions{display:flex;min-width:0;width:100%;flex-wrap:wrap}
  #storyMakerApp .hero-actions .story-btn{flex:1 1 160px}
  #storyMakerApp .quick-heading{align-items:stretch;flex-direction:column}
  #storyMakerApp .quick-tabs{width:100%}
  #storyMakerApp .quick-tab{flex:1}
  #storyMakerApp .quick-verse-grid{grid-template-columns:1fr 1fr}
  #storyMakerApp .inline-audio{grid-template-columns:1fr}
  #storyMakerApp .field-grid.two{grid-template-columns:1fr}
  #storyMakerApp .template-list{grid-template-columns:repeat(4,1fr)}
  #storyMakerApp .content-actions{align-items:stretch;flex-direction:column}
  #storyMakerApp .selection-hint{text-align:center}
  #storyMakerApp .panel-head{align-items:flex-start}
  #storyMakerApp .head-actions{justify-content:flex-start}
  #storyMakerApp .preview-toolbar{align-items:flex-start;flex-direction:column}
  #storyMakerApp .preview-actions{width:100%;justify-content:space-between}
  #storyMakerApp .controls-panel,
  #storyMakerApp .quick-verses,
  #storyMakerApp .export-panel,
  #storyMakerApp .seo-content{padding:16px}
  #storyMakerApp .browser-export-options{grid-template-columns:1fr}
  #storyMakerApp .server-save-option{grid-column:auto}
  #storyMakerApp .feature-strip{grid-template-columns:1fr}
  #storyMakerApp .seo-content{grid-template-columns:1fr}
}

@media(max-width:470px){
  #storyMakerApp .quick-verse-grid{grid-template-columns:1fr}
  #storyMakerApp .template-list{grid-template-columns:repeat(3,1fr)}
  #storyMakerApp .story-btn.large{width:100%;min-width:0}
  #storyMakerApp .export-panel>.story-btn-primary{justify-self:stretch}
  #storyMakerApp .quick-actions .story-btn{flex:1 1 100%}
  #storyMakerApp .color-controls{align-items:flex-start;flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  #storyMakerApp *,#storyMakerApp *::before,#storyMakerApp *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* =========================================================
   V4 polish — richer templates, smart text fit, performance
   ========================================================= */
#storyMakerApp .smart-fit-card{
  min-height:45px;
  display:flex;
  align-items:center;
  padding:9px 11px;
  border:1px solid var(--story-line);
  border-radius:11px;
  background:var(--story-surface-2);
  color:var(--story-muted);
  font-size:.76rem;
  line-height:1.55;
}
#storyMakerApp .quick-listen-note{
  padding:9px 11px;
  border-radius:10px;
  background:var(--story-surface-2);
  border:1px solid var(--story-line);
}
#storyMakerApp .rights-box strong{font-size:.94rem}
#storyMakerApp .rights-box span{font-size:.9rem;font-weight:800}
#storyMakerApp .template-card{contain:layout paint}
#storyMakerApp .template-card.template-mihrab::after{content:"۩";font-size:2.35rem}
#storyMakerApp .template-card.template-midnight::after{content:"✦";font-family:serif;font-size:2.2rem}
#storyMakerApp .template-card.template-noor::after{content:"✧";font-family:serif;font-size:2.4rem}
#storyMakerApp .template-card.template-mosque::after{content:"◜◝";font-family:serif;letter-spacing:-.18em;font-size:2rem}
#storyMakerApp .template-card.template-blackgold::after{content:"۞";color:rgba(226,188,97,.5)}
#storyMakerApp .template-card.template-parchment::after,
#storyMakerApp .template-card.template-ivory::after{color:rgba(90,63,28,.3)}
#storyMakerApp .template-card.template-dawn::after{content:"☼";font-family:serif}
#storyMakerApp .template-card.template-sky::after{content:"☾";font-family:serif}
#storyMakerApp .template-card[aria-pressed="true"]::before{
  border-color:rgba(255,255,255,.48);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
#storyMakerApp .feature-strip,
#storyMakerApp .seo-content{
  content-visibility:auto;
  contain-intrinsic-size:500px;
}
@media(max-width:470px){
  #storyMakerApp .template-card span{font-size:.66rem}
  #storyMakerApp .quick-card-actions{flex-direction:column}
}

/* =========================================================
   V5 compact workflow — dropdown picks, grouped controls
   ========================================================= */
#storyMakerApp .maker-guide{
  display:grid;
  gap:3px;
  margin-bottom:13px;
  padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--story-gold) 24%,var(--story-line));
  border-radius:13px;
  background:linear-gradient(135deg,var(--story-gold-soft),var(--story-surface));
}
#storyMakerApp .maker-guide strong{color:var(--story-brand);font-size:.9rem}
#storyMakerApp .maker-guide span{color:var(--story-muted);font-size:.76rem;line-height:1.6}

#storyMakerApp .controls-panel{display:grid;gap:12px}
#storyMakerApp .control-group{
  position:relative;
  padding:15px;
  border:1px solid var(--story-line);
  border-radius:16px;
  background:linear-gradient(145deg,var(--story-surface),var(--story-surface-2));
}
#storyMakerApp .control-group::before{
  content:"";
  position:absolute;
  inset:13px 0 13px auto;
  width:3px;
  border-radius:3px 0 0 3px;
  background:linear-gradient(var(--story-gold-2),var(--story-brand));
  opacity:.55;
}
#storyMakerApp .control-group-primary{
  border-color:color-mix(in srgb,var(--story-gold) 28%,var(--story-line));
  box-shadow:0 8px 24px rgba(20,58,49,.055);
}
#storyMakerApp .step-number{
  width:25px;
  height:25px;
  border-radius:8px;
  font-size:.72rem;
  line-height:1;
}
#storyMakerApp .panel-head h2,
#storyMakerApp .preview-toolbar h2,
#storyMakerApp .export-panel h2{font-size:1.07rem}

#storyMakerApp .quick-verses{padding:18px 20px}
#storyMakerApp .quick-heading{align-items:center}
#storyMakerApp .quick-dropdowns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
#storyMakerApp .quick-dropdown{
  overflow:hidden;
  border:1px solid var(--story-line);
  border-radius:15px;
  background:var(--story-surface-2);
}
#storyMakerApp .quick-dropdown[open]{
  border-color:color-mix(in srgb,var(--story-gold) 36%,var(--story-line));
  box-shadow:0 9px 24px rgba(20,58,49,.07);
}
#storyMakerApp .quick-dropdown summary{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  min-height:62px;
  padding:10px 12px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
#storyMakerApp .quick-dropdown summary::-webkit-details-marker{display:none}
#storyMakerApp .quick-dropdown summary>span:nth-child(2){display:grid;gap:1px}
#storyMakerApp .quick-dropdown summary strong{color:var(--story-ink);font-size:.91rem}
#storyMakerApp .quick-dropdown summary small{color:var(--story-muted);font-size:.7rem;font-weight:700}
#storyMakerApp .quick-dropdown summary>b{color:var(--story-gold);font-size:1rem;transition:transform .18s ease}
#storyMakerApp .quick-dropdown[open] summary>b{transform:rotate(180deg)}
#storyMakerApp .quick-dropdown-icon{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:11px;
  color:var(--story-brand);
  background:var(--story-gold-soft);
  font-family:Quran,Tahoma,Arial,sans-serif;
  font-size:1.15rem;
  font-weight:900;
}
#storyMakerApp .quick-dropdown-featured .quick-dropdown-icon{color:var(--story-gold);font-family:Tahoma,Arial,sans-serif}
#storyMakerApp .quick-dropdown-list{
  display:grid;
  gap:6px;
  max-height:355px;
  overflow:auto;
  padding:0 9px 9px;
  border-top:1px solid var(--story-line);
}
#storyMakerApp .quick-verse-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid var(--story-line);
  border-radius:11px;
  background:var(--story-surface);
}
#storyMakerApp .quick-verse-row-copy{display:grid;gap:1px;min-width:0}
#storyMakerApp .quick-verse-row-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--story-ink);font-size:.82rem}
#storyMakerApp .quick-verse-row-copy span{color:var(--story-muted);font-size:.68rem}
#storyMakerApp .quick-verse-row>em{
  padding:2px 6px;
  border-radius:999px;
  color:var(--story-gold);
  background:var(--story-gold-soft);
  font-size:.64rem;
  font-style:normal;
  font-weight:900;
}
#storyMakerApp .quick-verse-row .quick-card-actions{display:flex;gap:5px;margin:0}
#storyMakerApp .quick-verse-row .quick-card-actions button{
  min-height:31px;
  padding:5px 7px;
  font-size:.68rem;
}

#storyMakerApp .template-list{grid-template-columns:repeat(6,1fr)}
#storyMakerApp .template-more{
  margin-top:9px;
  border:1px dashed color-mix(in srgb,var(--story-gold) 32%,var(--story-line));
  border-radius:12px;
  background:var(--story-surface-2);
}
#storyMakerApp .template-more summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 11px;
  cursor:pointer;
  list-style:none;
  color:var(--story-brand);
  font-size:.78rem;
  font-weight:900;
}
#storyMakerApp .template-more summary::-webkit-details-marker{display:none}
#storyMakerApp .template-more summary::after{content:"⌄";color:var(--story-gold);font-size:.95rem;margin-inline-start:auto}
#storyMakerApp .template-more[open] summary::after{transform:rotate(180deg)}
#storyMakerApp .template-more summary small{color:var(--story-muted);font-size:.68rem;font-weight:700}
#storyMakerApp .template-more.has-selected summary{color:var(--story-gold)}
#storyMakerApp .template-list-more{grid-template-columns:repeat(5,1fr);margin:0;padding:0 9px 9px}

#storyMakerApp .export-panel{gap:14px}
#storyMakerApp .job{
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--story-gold) 30%,var(--story-line));
  border-radius:13px;
  background:var(--story-surface-2);
}
#storyMakerApp .job-top{font-size:.82rem}
#storyMakerApp .job-track{height:7px}

@media(max-width:1180px){
  #storyMakerApp .template-list{grid-template-columns:repeat(3,1fr)}
  #storyMakerApp .template-list-more{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){
  #storyMakerApp .quick-dropdowns{grid-template-columns:1fr}
  #storyMakerApp .control-group{padding:13px}
  #storyMakerApp .template-list{grid-template-columns:repeat(3,1fr)}
  #storyMakerApp .template-list-more{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:470px){
  #storyMakerApp .quick-verse-row{grid-template-columns:minmax(0,1fr) auto}
  #storyMakerApp .quick-verse-row>em{display:none}
  #storyMakerApp .quick-verse-row .quick-card-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  #storyMakerApp .template-list,#storyMakerApp .template-list-more{grid-template-columns:repeat(3,1fr)}
}

/* =========================================================
   V15.7 — Image + animated video templates / text motion
   ========================================================= */
#storyMakerApp .template-section-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  color:var(--story-brand);
  font-size:.8rem;
  font-weight:900;
}
#storyMakerApp .template-section-label small{color:var(--story-muted);font-size:.67rem;font-weight:700}
#storyMakerApp .template-section-label.compact{margin:10px 9px 7px}
#storyMakerApp .template-section-label.video-label{
  margin-top:14px;
  padding-top:11px;
  border-top:1px solid var(--story-line);
  color:var(--story-gold);
}
#storyMakerApp .template-more-body{padding-bottom:9px}
#storyMakerApp .template-type-badge{
  position:absolute;
  top:6px;
  inset-inline-start:6px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 6px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(7,23,20,.72);
  color:#f7e4a8;
  font:800 .56rem/1.2 Tahoma,Arial,sans-serif;
  backdrop-filter:blur(5px);
}
#storyMakerApp .template-type-badge.image{color:#fff;background:rgba(0,0,0,.42)}
#storyMakerApp .template-card.is-video-template::after{
  content:"▶";
  font-family:Arial,sans-serif;
  font-size:1.55rem;
  color:rgba(255,255,255,.72);
  inset:30% 0 auto;
  text-shadow:0 3px 12px rgba(0,0,0,.45);
}
#storyMakerApp .template-card.is-video-template::before{
  border-color:rgba(234,207,139,.42);
  box-shadow:inset 0 0 24px rgba(255,255,255,.06);
}
#storyMakerApp .template-card.is-video-template{
  isolation:isolate;
}
#storyMakerApp .template-card.is-video-template > span{background:rgba(3,16,15,.67)}
#storyMakerApp .template-card.is-video-template:not([aria-pressed="true"]){animation:storyVideoTemplateGlow 3.2s ease-in-out infinite}
@keyframes storyVideoTemplateGlow{
  0%,100%{filter:brightness(.96)}
  50%{filter:brightness(1.12)}
}
@media(prefers-reduced-motion:reduce){
  #storyMakerApp .template-card.is-video-template{animation:none!important}
}

/* V15.12 — real stock-video template preview (only the selected video is loaded) */
#storyMakerApp .template-card .template-live-video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  pointer-events:none;
  background:#081713;
}
#storyMakerApp .template-card.has-live-video::after{display:none}
#storyMakerApp .template-card.has-live-video::before{z-index:1;border-color:rgba(255,255,255,.28)}
#storyMakerApp .template-card.has-live-video .template-type-badge,
#storyMakerApp .template-card.has-live-video > span{z-index:3}
#storyMakerApp .template-card.has-live-video > span{background:rgba(3,16,15,.72)}

/* =========================================================
   V15.13 — stronger quick picks + organized 9-item template browser
   ========================================================= */
#storyMakerApp .quick-verses{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--story-gold) 28%,var(--story-line));
  background:
    radial-gradient(circle at 8% 10%,color-mix(in srgb,var(--story-gold) 10%,transparent),transparent 34%),
    var(--story-surface);
}
#storyMakerApp .quick-verses::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--story-brand),var(--story-gold),var(--story-brand));
  opacity:.78;
}
#storyMakerApp .quick-heading .step-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  background:var(--story-gold-soft);
  color:var(--story-gold);
  font-weight:900;
}
#storyMakerApp .quick-dropdown-popular{
  border-color:color-mix(in srgb,var(--story-brand) 36%,var(--story-line));
}
#storyMakerApp .quick-dropdown-featured{
  border-color:color-mix(in srgb,var(--story-gold) 48%,var(--story-line));
}
#storyMakerApp .quick-dropdown-popular summary{
  background:linear-gradient(135deg,color-mix(in srgb,var(--story-brand) 10%,var(--story-surface-2)),var(--story-surface-2));
}
#storyMakerApp .quick-dropdown-featured summary{
  background:linear-gradient(135deg,color-mix(in srgb,var(--story-gold) 13%,var(--story-surface-2)),var(--story-surface-2));
}
#storyMakerApp .quick-dropdown-popular .quick-dropdown-icon{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--story-brand) 8%,transparent);
}
#storyMakerApp .quick-dropdown-featured .quick-dropdown-icon{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--story-gold) 10%,transparent);
}
#storyMakerApp .quick-dropdown-list{
  max-height:430px;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#storyMakerApp .quick-verse-row:hover{
  border-color:color-mix(in srgb,var(--story-gold) 35%,var(--story-line));
  background:color-mix(in srgb,var(--story-gold) 4%,var(--story-surface));
}

#storyMakerApp .template-more-body{
  padding:9px;
  overflow:hidden;
}
#storyMakerApp .template-more-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-bottom:8px;
  padding:4px;
  border:1px solid var(--story-line);
  border-radius:11px;
  background:var(--story-surface);
}
#storyMakerApp .template-more-tabs button{
  min-height:36px;
  padding:6px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--story-muted);
  font:900 .75rem/1.2 inherit;
  cursor:pointer;
}
#storyMakerApp .template-more-tabs button.active{
  background:var(--story-brand);
  color:#fff;
  box-shadow:0 5px 14px rgba(15,58,49,.14);
}
#storyMakerApp .template-tab-panel{
  min-width:0;
}
#storyMakerApp .template-tab-panel.hidden{display:none!important}
#storyMakerApp .template-tab-panel .template-section-label.compact{
  margin:7px 2px 8px;
}
#storyMakerApp .template-list-more{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px;
  margin:0;
  padding:0 1px 1px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scroll-behavior:smooth;
}
#storyMakerApp .template-list-more .template-card{
  aspect-ratio:1.42/1;
  min-height:0;
}
#storyMakerApp .template-list-more .template-card::before{inset:6px}
#storyMakerApp .template-list-more .template-card span{
  font-size:.61rem;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#storyMakerApp .template-list-more::-webkit-scrollbar,
#storyMakerApp .quick-dropdown-list::-webkit-scrollbar{width:7px}
#storyMakerApp .template-list-more::-webkit-scrollbar-thumb,
#storyMakerApp .quick-dropdown-list::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:color-mix(in srgb,var(--story-gold) 55%,var(--story-line));
}
#storyMakerApp .template-list-more::-webkit-scrollbar-track,
#storyMakerApp .quick-dropdown-list::-webkit-scrollbar-track{background:transparent}

#storyMakerApp .background-upload{
  border-color:color-mix(in srgb,var(--story-gold) 42%,var(--story-line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--story-brand) 5%,var(--story-surface-2)),var(--story-surface-2));
}
#storyMakerApp .background-upload .upload-title{font-weight:900;color:var(--story-brand)}
#storyMakerApp .background-upload .upload-sub{line-height:1.7}

@media(max-width:760px){
  #storyMakerApp .quick-dropdown-list{max-height:390px}
  #storyMakerApp .template-more-body{padding:8px}
  #storyMakerApp .template-list-more{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* =========================================================
   V15.14 — 100 real images + 100 real videos + AI library
   ========================================================= */
#storyMakerApp .template-more-tabs-wide{
  grid-template-columns:repeat(5,minmax(105px,1fr));
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
#storyMakerApp .template-more-tabs-wide button{white-space:nowrap}
#storyMakerApp .template-section-label.ai-label{color:#8b5fc8}
#storyMakerApp .template-type-badge.ai{
  color:#fff;
  background:linear-gradient(135deg,rgba(94,47,145,.94),rgba(140,78,190,.92));
  border-color:rgba(232,212,255,.42);
  box-shadow:0 4px 12px rgba(76,38,118,.22);
}
#storyMakerApp .template-type-badge.real{
  color:#f7fff9;
  background:rgba(16,82,66,.86);
  border-color:rgba(202,239,225,.30);
}
#storyMakerApp .template-card.is-ai-template[aria-pressed="true"]{
  border-color:#9a6bd0;
  box-shadow:0 0 0 3px rgba(133,83,184,.17);
}
#storyMakerApp .template-card.has-preview-image{
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
#storyMakerApp .template-card.is-ai-template.is-video-template.has-preview-image[aria-pressed="true"]{
  animation:storyAiVideoPan 8s ease-in-out infinite alternate!important;
  background-size:118%!important;
}
@keyframes storyAiVideoPan{
  0%{background-position:42% 46%;filter:brightness(.95)}
  100%{background-position:58% 54%;filter:brightness(1.08)}
}
#storyMakerApp .template-tab-panel .template-list-more{
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
#storyMakerApp .template-more summary small{max-width:68%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){
  #storyMakerApp .template-more-tabs-wide{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:4px;
    scroll-snap-type:x proximity;
  }
  #storyMakerApp .template-more-tabs-wide button{
    flex:0 0 auto;
    min-width:112px;
    scroll-snap-align:start;
  }
}
@media(prefers-reduced-motion:reduce){
  #storyMakerApp .template-card.is-ai-template.is-video-template.has-preview-image[aria-pressed="true"]{animation:none!important}
}

/* =========================================================
   V15.15 — stable 3x3 library + strict filters
   ========================================================= */
#storyMakerApp .template-more{
  max-width:100%;
  min-width:0;
  overflow:hidden;
}
#storyMakerApp .template-more-body{
  max-width:100%;
  min-width:0;
  overflow:hidden;
  contain:layout;
}
#storyMakerApp .template-library-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:9px;
  padding:9px;
  border:1px solid var(--story-line);
  border-radius:12px;
  background:var(--story-surface);
}
#storyMakerApp .template-library-controls label{
  display:grid;
  gap:5px;
  min-width:0;
}
#storyMakerApp .template-library-controls label>span{
  color:var(--story-muted);
  font-size:.66rem;
  font-weight:900;
}
#storyMakerApp .template-library-controls select{
  min-width:0;
  width:100%;
  min-height:36px;
  padding:5px 8px;
  border-radius:9px;
  font-size:.72rem;
  font-weight:800;
}
#storyMakerApp .template-library-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:2px 1px 8px;
  color:var(--story-muted);
  font-size:.68rem;
}
#storyMakerApp .template-library-meta strong{
  color:var(--story-brand);
  font-size:.76rem;
}
#storyMakerApp .template-library-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:104px;
  max-height:328px;
  gap:8px;
  margin:0!important;
  padding:0 2px 0 1px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  align-content:start;
  touch-action:pan-y;
  contain:layout paint;
}
#storyMakerApp .template-library-grid .template-card{
  width:100%;
  height:104px;
  min-width:0;
  min-height:0;
  aspect-ratio:auto!important;
}
#storyMakerApp .template-theme-badge{
  position:absolute;
  top:6px;
  inset-inline-end:6px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 6px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  font:800 .54rem/1.2 Tahoma,Arial,sans-serif;
  backdrop-filter:blur(5px);
}
#storyMakerApp .template-theme-badge.islamic{background:rgba(116,84,30,.84)}
#storyMakerApp .template-theme-badge.nature{background:rgba(24,76,61,.84)}
#storyMakerApp .template-safety-note{
  margin:9px 2px 0;
  padding:8px 10px;
  border-radius:10px;
  background:color-mix(in srgb,var(--story-brand) 5%,var(--story-surface-2));
  color:var(--story-muted);
  font-size:.67rem;
  line-height:1.65;
}
#storyMakerApp .template-library-grid:empty::before{
  content:"لا توجد قوالب مطابقة لهذه الفلاتر";
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:96px;
  padding:12px;
  border:1px dashed var(--story-line);
  border-radius:11px;
  color:var(--story-muted);
  font-size:.75rem;
  font-weight:800;
}
@media(max-width:760px){
  #storyMakerApp .template-library-controls{gap:6px;padding:7px}
  #storyMakerApp .template-library-controls select{font-size:.67rem;padding-inline:5px}
  #storyMakerApp .template-library-grid{grid-auto-rows:88px;max-height:280px}
  #storyMakerApp .template-library-grid .template-card{height:88px}
  #storyMakerApp .template-library-meta{align-items:flex-start;flex-direction:column;gap:2px}
}
@media(max-width:430px){
  #storyMakerApp .template-library-controls{grid-template-columns:1fr 1fr}
  #storyMakerApp .template-library-controls label:last-child{grid-column:1/-1}
  #storyMakerApp .template-library-grid{grid-auto-rows:82px;max-height:262px}
  #storyMakerApp .template-library-grid .template-card{height:82px}
  #storyMakerApp .template-type-badge,#storyMakerApp .template-theme-badge{font-size:.5rem;padding-inline:5px}
}