/* Story templates render at native 1080x1920 internally and scale visually via the canvas wrapper.
   Use cqw units so html-to-image captures crisp typography at any export resolution.
   Use CSS logical properties (margin-inline, padding-inline, text-align: start/end)
   so RTL works automatically when the canvas has dir="rtl". */

.story-canvas {
  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tmpl-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--story-font, var(--font-sans));
  color: #f5f5f7;
  overflow: hidden;
  letter-spacing: -0.005em;
}

/* All template titles share a default base size token so title-scale effect can multiply it */
.tmpl-root .tmpl-title { --story-title-base: 6cqw; }

[dir="rtl"] .tmpl-root,
.story-canvas[dir="rtl"] .tmpl-root {
  font-family: var(--story-font, var(--font-arabic));
}

/* ============================================================
   1. FULL IMAGE — flagship template
   Image fills the canvas, dark gradient from bottom, content overlay.
   ============================================================ */
.tmpl-full-image {
  background: #0a0a0c;
}
.tmpl-full-image .tmpl-bg {
  position: absolute; inset: 0;
  overflow: hidden;
}
.tmpl-full-image .tmpl-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: bg-zoom 16s ease-out forwards;
}
@keyframes bg-zoom {
  from { transform: scale(1.04); }
  to { transform: scale(1); }
}
.tmpl-full-image .tmpl-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.15) 35%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.92) 88%,
    rgba(0, 0, 0, 0.98) 100%
  );
  z-index: 1;
}
.tmpl-full-image .tmpl-content {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 8% 6.5% 7%;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
}
.tmpl-full-image .tmpl-platform-row {
  display: inline-flex;
  align-items: center;
  gap: 1.5cqw;
  font-size: 1.7cqw;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  padding: 1cqw 2.2cqw;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  border: 0.15cqw solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  align-self: flex-start;
}
.tmpl-full-image .tmpl-platform-icon {
  width: 2.6cqw; height: 2.6cqw;
  display: inline-grid; place-items: center;
}
.tmpl-full-image .tmpl-platform-icon svg { width: 100%; height: 100%; }
.tmpl-full-image .tmpl-title {
  font-size: 7.2cqw;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0;
  color: #ffffff;
  text-shadow: 0 0.4cqw 1.4cqw rgba(0, 0, 0, 0.45);
  text-align: start;
  display: block;
  max-height: calc(1.28em * 4 + 0.35em);
  padding-bottom: 0.2em;
  box-sizing: content-box;
  overflow: hidden;
}
.tmpl-full-image .tmpl-author-row {
  display: flex;
  align-items: center;
  gap: 2.5cqw;
  margin-top: 1cqw;
}
.tmpl-full-image .tmpl-avatar {
  width: 7cqw; height: 7cqw;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3a45, #1c1c22);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 3cqw;
  color: #ffffff;
  border: 0.3cqw solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  overflow: hidden;
}
.tmpl-full-image .tmpl-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tmpl-full-image .tmpl-author-meta { display: flex; flex-direction: column; gap: 0.4cqw; }
.tmpl-full-image .tmpl-author-name { font-size: 2.6cqw; font-weight: 700; color: rgba(255, 255, 255, 0.98); }
.tmpl-full-image .tmpl-author-handle { font-size: 2.1cqw; color: rgba(255, 255, 255, 0.6); }

/* ============================================================
   2. MINIMAL YOUTUBE (refactored for RTL via logical properties)
   ============================================================ */
.tmpl-minimal-youtube {
  background: #0a0a0c;
  padding: 6.5% 6%;
  justify-content: space-between;
}
.tmpl-minimal-youtube .tmpl-bg-blur {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  filter: blur(80px) saturate(140%);
  opacity: 0.55;
  z-index: 0;
  transform: scale(1.2);
}
.tmpl-minimal-youtube .tmpl-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 10, 12, 0.4) 0%,
    rgba(10, 10, 12, 0.65) 50%,
    rgba(10, 10, 12, 0.92) 100%);
  z-index: 1;
}
.tmpl-minimal-youtube .tmpl-top,
.tmpl-minimal-youtube .tmpl-middle,
.tmpl-minimal-youtube .tmpl-bottom { position: relative; z-index: 2; }

.tmpl-minimal-youtube .tmpl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.6cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.7);
  font-weight: 600;
}
.tmpl-minimal-youtube .tmpl-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0.5em 1em;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 1.4cqw;
}
.tmpl-minimal-youtube .tmpl-platform-icon { display: inline-grid; place-items: center; width: 2cqw; height: 2cqw; color: #ff0033; }
.tmpl-minimal-youtube .tmpl-platform-icon svg { width: 100%; height: 100%; }
.tmpl-minimal-youtube .tmpl-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 2.5cqw;
  overflow: hidden;
  background: #1c1c22;
  box-shadow: 0 4cqw 8cqw rgba(0, 0, 0, 0.6);
  margin-bottom: 4cqw;
}
.tmpl-minimal-youtube .tmpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tmpl-minimal-youtube .tmpl-title {
  font-size: 5.6cqw;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 3cqw;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmpl-minimal-youtube .tmpl-channel-row {
  display: flex;
  align-items: center;
  gap: 2.5cqw;
}
.tmpl-minimal-youtube .tmpl-avatar {
  width: 8cqw; height: 8cqw;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3a45, #1c1c22);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 3.4cqw;
  color: #f5f5f7;
  border: 0.3cqw solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  flex-shrink: 0;
}
.tmpl-minimal-youtube .tmpl-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tmpl-minimal-youtube .tmpl-channel-meta { display: flex; flex-direction: column; gap: 0.3cqw; }
.tmpl-minimal-youtube .tmpl-channel-name { font-size: 2.8cqw; font-weight: 600; color: rgba(245, 245, 247, 0.95); }
.tmpl-minimal-youtube .tmpl-channel-handle { font-size: 2.2cqw; color: rgba(245, 245, 247, 0.55); letter-spacing: 0.02em; }
.tmpl-minimal-youtube .tmpl-bottom { display: flex; flex-direction: column; gap: 4cqw; }
.tmpl-minimal-youtube .tmpl-watch-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5cqw;
  padding: 2.4cqw 3cqw;
  background: rgba(255, 255, 255, 0.95);
  color: #0a0a0c;
  border-radius: 999px;
  font-weight: 700;
  font-size: 2.6cqw;
  letter-spacing: 0.04em;
}
.tmpl-minimal-youtube .tmpl-watch-cta svg { width: 3cqw; height: 3cqw; color: #ff0033; }

/* ============================================================
   3. CINEMATIC YOUTUBE — large rounded thumbnail, color-rich background
   ============================================================ */
.tmpl-cinematic-youtube {
  background: radial-gradient(ellipse at top, #2a1a3e 0%, #0a0a0c 70%);
  padding: 8% 6%;
  justify-content: center;
  gap: 5cqw;
}
.tmpl-cinematic-youtube .tmpl-bg-color {
  position: absolute; inset: -20%;
  background-size: cover;
  background-position: center;
  filter: blur(120px) saturate(180%);
  opacity: 0.7;
  z-index: 0;
}
.tmpl-cinematic-youtube .tmpl-bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.85) 100%);
  z-index: 1;
}
.tmpl-cinematic-youtube .tmpl-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  gap: 5cqw;
  margin-top: auto; margin-bottom: auto;
}
.tmpl-cinematic-youtube .tmpl-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4cqw;
  overflow: hidden;
  box-shadow: 0 6cqw 12cqw rgba(0, 0, 0, 0.7);
  border: 0.3cqw solid rgba(255, 255, 255, 0.08);
}
.tmpl-cinematic-youtube .tmpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tmpl-cinematic-youtube .tmpl-platform-row {
  display: inline-flex; align-items: center; gap: 1.4cqw;
  font-size: 1.7cqw; text-transform: uppercase; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.7); font-weight: 700;
  align-self: flex-start;
}
.tmpl-cinematic-youtube .tmpl-platform-icon { width: 2.4cqw; height: 2.4cqw; color: #ff0033; }
.tmpl-cinematic-youtube .tmpl-title {
  font-size: 6.4cqw;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmpl-cinematic-youtube .tmpl-channel-row { display: flex; align-items: center; gap: 2.5cqw; }
.tmpl-cinematic-youtube .tmpl-avatar {
  width: 7cqw; height: 7cqw; border-radius: 50%;
  background: linear-gradient(135deg, #d4a574, #8b6f4d);
  display: grid; place-items: center;
  font-weight: 700; font-size: 3cqw; color: #fff;
  overflow: hidden; flex-shrink: 0;
}
.tmpl-cinematic-youtube .tmpl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tmpl-cinematic-youtube .tmpl-channel-name { font-size: 2.8cqw; font-weight: 700; }
.tmpl-cinematic-youtube .tmpl-channel-handle { font-size: 2.2cqw; color: rgba(255, 255, 255, 0.55); }

/* ============================================================
   4. EDITORIAL YOUTUBE — magazine-style: thin top rule, serif feel, separator
   ============================================================ */
.tmpl-editorial-youtube {
  background: #f5f5f0;
  color: #0a0a0c;
  padding: 8% 7%;
  justify-content: space-between;
  font-family: Georgia, "Times New Roman", var(--story-font, var(--font-sans));
}
[dir="rtl"] .tmpl-editorial-youtube { font-family: var(--story-font, var(--font-arabic)); }
.tmpl-editorial-youtube .tmpl-top-rule {
  height: 0.3cqw;
  background: #0a0a0c;
  width: 12cqw;
  margin-bottom: 3cqw;
}
.tmpl-editorial-youtube .tmpl-eyebrow {
  font-size: 1.6cqw;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 700;
  color: #6c6c78;
  font-family: var(--story-font, var(--font-sans));
}
.tmpl-editorial-youtube .tmpl-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 6cqw 0;
  overflow: hidden;
}
.tmpl-editorial-youtube .tmpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tmpl-editorial-youtube .tmpl-title {
  font-size: 7cqw;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmpl-editorial-youtube .tmpl-divider {
  height: 0.15cqw;
  background: #0a0a0c;
  margin: 4cqw 0;
}
.tmpl-editorial-youtube .tmpl-meta {
  display: flex; align-items: center; gap: 2cqw;
  font-family: var(--story-font, var(--font-sans));
  font-size: 2cqw;
  color: #6c6c78;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.tmpl-editorial-youtube .tmpl-meta-platform { display: inline-flex; align-items: center; gap: 0.8cqw; color: #ff0033; }
.tmpl-editorial-youtube .tmpl-meta-platform svg { width: 2.4cqw; height: 2.4cqw; }
.tmpl-editorial-youtube .tmpl-meta-channel { color: #0a0a0c; font-weight: 700; }
.tmpl-editorial-youtube .tmpl-meta-dot { width: 0.4cqw; height: 0.4cqw; background: #6c6c78; border-radius: 50%; }

/* ============================================================
   5. DARK YOUTUBE — pure black, refined Apple-style
   ============================================================ */
.tmpl-dark-youtube {
  background: #000000;
  padding: 9% 7%;
  justify-content: space-between;
}
.tmpl-dark-youtube .tmpl-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1.6cqw;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}
.tmpl-dark-youtube .tmpl-platform-icon { width: 3.5cqw; height: 3.5cqw; color: #ff0033; }
.tmpl-dark-youtube .tmpl-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1cqw;
  overflow: hidden;
  border: 0.1cqw solid rgba(255, 255, 255, 0.08);
  margin: 6cqw 0;
}
.tmpl-dark-youtube .tmpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tmpl-dark-youtube .tmpl-title {
  font-size: 5.8cqw;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmpl-dark-youtube .tmpl-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 4cqw;
  border-top: 0.1cqw solid rgba(255, 255, 255, 0.1);
}
.tmpl-dark-youtube .tmpl-channel-name { font-size: 2.4cqw; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.tmpl-dark-youtube .tmpl-channel-handle { font-size: 1.8cqw; color: rgba(255, 255, 255, 0.4); margin-top: 0.4cqw; }
.tmpl-dark-youtube .tmpl-watch-arrow {
  font-size: 2.4cqw; color: rgba(255, 255, 255, 0.5); font-weight: 500;
}

/* ============================================================
   6. MINIMAL TWEET — refactored for RTL
   ============================================================ */
.tmpl-minimal-tweet {
  background: #f5f5f7;
  color: #0a0a0c;
  padding: 8% 6%;
  justify-content: center;
  gap: 4cqw;
}
.tmpl-minimal-tweet .tmpl-platform-icon-wrap {
  align-self: flex-start;
  width: 5cqw; height: 5cqw;
  color: #0a0a0c;
}
.tmpl-minimal-tweet .tmpl-tweet-text {
  font-size: 5cqw;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  text-align: start;
}
.tmpl-minimal-tweet .tmpl-author { display: flex; flex-direction: column; gap: 0.4cqw; margin-top: 4cqw; }
.tmpl-minimal-tweet .tmpl-display-name { font-weight: 700; font-size: 3.2cqw; }
.tmpl-minimal-tweet .tmpl-handle { font-size: 2.6cqw; color: #6c6c78; }

/* ============================================================
   7. GLASSMORPHISM TWEET — frosted card on colorful gradient
   ============================================================ */
.tmpl-glassmorphism-tweet {
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f59e0b 100%);
  padding: 10% 7%;
  justify-content: center;
}
.tmpl-glassmorphism-tweet::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.3), transparent 50%);
  z-index: 0;
}
.tmpl-glassmorphism-tweet .tmpl-glass-card {
  position: relative; z-index: 1;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 0.2cqw solid rgba(255, 255, 255, 0.3);
  border-radius: 4cqw;
  padding: 7cqw 5cqw;
  display: flex; flex-direction: column;
  gap: 4cqw;
  box-shadow: 0 4cqw 12cqw rgba(0, 0, 0, 0.25);
}
.tmpl-glassmorphism-tweet .tmpl-platform-icon-wrap {
  align-self: flex-start;
  width: 5cqw; height: 5cqw;
  color: #ffffff;
}
.tmpl-glassmorphism-tweet .tmpl-tweet-text {
  font-size: 4.8cqw;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-align: start;
  text-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.2);
}
.tmpl-glassmorphism-tweet .tmpl-author {
  display: flex; align-items: center; gap: 2.5cqw;
  padding-top: 3cqw;
  border-top: 0.1cqw solid rgba(255, 255, 255, 0.25);
}
.tmpl-glassmorphism-tweet .tmpl-avatar {
  width: 7cqw; height: 7cqw; border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #cbd5e1);
  display: grid; place-items: center;
  font-weight: 700; font-size: 3cqw; color: #7c3aed;
  flex-shrink: 0;
}
.tmpl-glassmorphism-tweet .tmpl-display-name { font-weight: 700; font-size: 2.8cqw; color: #fff; }
.tmpl-glassmorphism-tweet .tmpl-handle { font-size: 2.2cqw; color: rgba(255, 255, 255, 0.75); }

/* ============================================================
   8. QUOTE CUSTOM — large quote marks, attribution below
   ============================================================ */
.tmpl-quote-custom {
  background: linear-gradient(135deg, #1a1a22 0%, #0a0a0c 100%);
  padding: 12% 8%;
  justify-content: center;
  gap: 5cqw;
}
.tmpl-quote-custom .tmpl-quote-mark {
  font-size: 18cqw;
  line-height: 0.8;
  font-family: Georgia, serif;
  color: rgba(255, 255, 255, 0.18);
  font-weight: 700;
  margin-bottom: -4cqw;
  align-self: flex-start;
}
.tmpl-quote-custom .tmpl-quote-text {
  font-size: 5.8cqw;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmpl-quote-custom .tmpl-author-line {
  display: flex; align-items: center; gap: 2.5cqw;
  margin-top: 4cqw;
}
.tmpl-quote-custom .tmpl-author-line .tmpl-divider-line {
  width: 6cqw; height: 0.2cqw; background: rgba(255, 255, 255, 0.4);
}
.tmpl-quote-custom .tmpl-author-name {
  font-size: 2.4cqw;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   PALETTE OVERRIDES — accent variations applied on the canvas root
   ============================================================ */
.story-canvas[data-palette="cinematic"] .tmpl-cinematic-youtube { background: radial-gradient(ellipse at top, #4a3017 0%, #0a0805 70%); }
.story-canvas[data-palette="cinematic"] .tmpl-quote-custom { background: linear-gradient(135deg, #3a2410 0%, #0a0805 100%); }
.story-canvas[data-palette="cinematic"] .tmpl-quote-custom .tmpl-quote-mark { color: rgba(212, 165, 116, 0.3); }

.story-canvas[data-palette="vibrant"] .tmpl-cinematic-youtube { background: radial-gradient(ellipse at top, #ff5e57 0%, #7c3aed 100%); }
.story-canvas[data-palette="vibrant"] .tmpl-quote-custom { background: linear-gradient(135deg, #ff5e57 0%, #7c3aed 100%); }
.story-canvas[data-palette="vibrant"] .tmpl-quote-custom .tmpl-quote-mark { color: rgba(255, 255, 255, 0.3); }

.story-canvas[data-palette="editorial"] .tmpl-cinematic-youtube { background: linear-gradient(180deg, #2a2a32 0%, #0a0a0c 100%); }

.story-canvas[data-palette="light"] .tmpl-quote-custom { background: linear-gradient(135deg, #ffffff 0%, #d8d8e0 100%); color: #0a0a0c; }
.story-canvas[data-palette="light"] .tmpl-quote-custom .tmpl-quote-text { color: #0a0a0c; }
.story-canvas[data-palette="light"] .tmpl-quote-custom .tmpl-quote-mark { color: rgba(10, 10, 12, 0.18); }
.story-canvas[data-palette="light"] .tmpl-quote-custom .tmpl-author-name { color: rgba(10, 10, 12, 0.85); }
.story-canvas[data-palette="light"] .tmpl-quote-custom .tmpl-divider-line { background: rgba(10, 10, 12, 0.4); }

/* ============================================================
   9. APPLE-STYLE YOUTUBE — clean, light, big rounded thumb, refined typography
   ============================================================ */
.tmpl-apple-youtube {
  background: #fbfbfd;
  color: #1d1d1f;
  padding: 9% 7%;
  justify-content: space-between;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, var(--story-font, var(--font-sans));
}
[dir="rtl"] .tmpl-apple-youtube { font-family: var(--story-font, var(--font-arabic)); }
.tmpl-apple-youtube .tmpl-eyebrow {
  font-size: 1.5cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #86868b;
}
.tmpl-apple-youtube .tmpl-title {
  font-size: 6.4cqw;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #1d1d1f;
  text-align: start;
  margin-top: 2cqw;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmpl-apple-youtube .tmpl-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 3.5cqw;
  overflow: hidden;
  margin: 5cqw 0;
  box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, 0.08);
}
.tmpl-apple-youtube .tmpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tmpl-apple-youtube .tmpl-bottom {
  display: flex; align-items: center; justify-content: space-between;
}
.tmpl-apple-youtube .tmpl-channel {
  font-size: 2.2cqw; font-weight: 600; color: #1d1d1f;
}
.tmpl-apple-youtube .tmpl-watch-pill {
  display: inline-flex; align-items: center; gap: 1.2cqw;
  padding: 1.8cqw 3cqw;
  background: #1d1d1f;
  color: #fff;
  border-radius: 999px;
  font-size: 2cqw;
  font-weight: 600;
}
.tmpl-apple-youtube .tmpl-watch-pill svg { width: 2.4cqw; height: 2.4cqw; }

/* ============================================================
   10. ARABIC TECH YOUTUBE — RTL-first, deep tech gradient, large Arabic typography
   ============================================================ */
.tmpl-arabic-tech-youtube {
  background: linear-gradient(135deg, #0d1f3c 0%, #1a0b2e 50%, #2d0a3e 100%);
  padding: 8% 6.5%;
  justify-content: space-between;
  font-family: var(--story-font, var(--font-arabic));
  direction: rtl;
}
.tmpl-arabic-tech-youtube .tmpl-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
}
.tmpl-arabic-tech-youtube .tmpl-bg-glow {
  position: absolute;
  top: -10%; right: -10%;
  width: 60%; height: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.25) 0%, transparent 70%);
  z-index: 0;
}
.tmpl-arabic-tech-youtube .tmpl-top,
.tmpl-arabic-tech-youtube .tmpl-middle,
.tmpl-arabic-tech-youtube .tmpl-bottom { position: relative; z-index: 1; }
.tmpl-arabic-tech-youtube .tmpl-top {
  display: flex; align-items: center; justify-content: space-between;
}
.tmpl-arabic-tech-youtube .tmpl-eyebrow-ar {
  display: inline-flex; align-items: center; gap: 1.2cqw;
  font-size: 1.8cqw;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  padding: 1cqw 2.4cqw;
  background: rgba(255, 255, 255, 0.06);
  border: 0.15cqw solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(20px);
}
.tmpl-arabic-tech-youtube .tmpl-eyebrow-ar svg { width: 2.4cqw; height: 2.4cqw; color: #ff0033; }
.tmpl-arabic-tech-youtube .tmpl-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 2.5cqw;
  overflow: hidden;
  margin: 5cqw 0;
  border: 0.2cqw solid rgba(124, 58, 237, 0.4);
  box-shadow: 0 0 6cqw rgba(124, 58, 237, 0.3), 0 4cqw 10cqw rgba(0, 0, 0, 0.5);
}
.tmpl-arabic-tech-youtube .tmpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tmpl-arabic-tech-youtube .tmpl-title {
  font-size: 6cqw;
  font-weight: 800;
  line-height: 1.32;
  color: #ffffff;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmpl-arabic-tech-youtube .tmpl-bottom {
  display: flex; align-items: center; gap: 2.5cqw;
  padding-top: 4cqw;
  border-top: 0.15cqw solid rgba(255, 255, 255, 0.12);
  margin-top: 4cqw;
}
.tmpl-arabic-tech-youtube .tmpl-avatar {
  width: 7cqw; height: 7cqw; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: grid; place-items: center;
  font-weight: 800; font-size: 3cqw; color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.tmpl-arabic-tech-youtube .tmpl-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tmpl-arabic-tech-youtube .tmpl-channel-name { font-size: 2.6cqw; font-weight: 700; color: #fff; }
.tmpl-arabic-tech-youtube .tmpl-channel-handle { font-size: 2cqw; color: rgba(255, 255, 255, 0.55); margin-top: 0.4cqw; }

/* ============================================================
   11. NEWS STYLE TWITTER — newspaper-feel, BREAKING badge, strong dividers
   ============================================================ */
.tmpl-news-tweet {
  background: #ffffff;
  color: #0a0a0c;
  padding: 8% 7%;
  justify-content: space-between;
  font-family: Georgia, "Times New Roman", var(--story-font, var(--font-sans));
}
[dir="rtl"] .tmpl-news-tweet { font-family: var(--story-font, var(--font-arabic)); }
.tmpl-news-tweet .tmpl-news-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 2cqw;
  border-bottom: 0.4cqw solid #0a0a0c;
}
.tmpl-news-tweet .tmpl-breaking-badge {
  background: #d12c2c;
  color: #fff;
  padding: 1cqw 2.4cqw;
  font-size: 1.8cqw;
  font-weight: 800;
  letter-spacing: 0.18em;
  font-family: var(--story-font, var(--font-sans));
}
.tmpl-news-tweet .tmpl-news-source {
  font-size: 1.6cqw; font-weight: 700; letter-spacing: 0.2em;
  color: #6c6c78; text-transform: uppercase;
  font-family: var(--story-font, var(--font-sans));
}
.tmpl-news-tweet .tmpl-news-source svg { width: 2cqw; height: 2cqw; vertical-align: middle; margin-inline-end: 0.6cqw; }
.tmpl-news-tweet .tmpl-tweet-text {
  font-size: 5.4cqw;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-align: start;
  margin: 6cqw 0;
}
.tmpl-news-tweet .tmpl-news-divider { height: 0.15cqw; background: #0a0a0c; margin: 3cqw 0; }
.tmpl-news-tweet .tmpl-byline {
  font-family: var(--story-font, var(--font-sans));
  font-size: 1.8cqw;
  letter-spacing: 0.06em;
  color: #6c6c78;
}
.tmpl-news-tweet .tmpl-byline strong { color: #0a0a0c; font-weight: 700; }

/* ============================================================
   12. ARABIC EDITORIAL TWITTER — magazine feel, large Arabic, refined
   ============================================================ */
.tmpl-arabic-editorial-tweet {
  background: linear-gradient(180deg, #f5f0e8 0%, #e8dfd0 100%);
  color: #2a1810;
  padding: 9% 7%;
  justify-content: center;
  gap: 5cqw;
  font-family: var(--story-font, var(--font-arabic));
  direction: rtl;
}
.tmpl-arabic-editorial-tweet .tmpl-quote-mark-ar {
  font-size: 14cqw;
  line-height: 0.7;
  color: rgba(42, 24, 16, 0.18);
  font-weight: 700;
  align-self: flex-start;
  margin-bottom: -2cqw;
  font-family: Georgia, serif;
}
.tmpl-arabic-editorial-tweet .tmpl-tweet-text {
  font-size: 5.4cqw;
  font-weight: 700;
  line-height: 1.45;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmpl-arabic-editorial-tweet .tmpl-flourish {
  width: 12cqw; height: 0.3cqw;
  background: #2a1810;
  margin: 2cqw 0;
}
.tmpl-arabic-editorial-tweet .tmpl-author { display: flex; flex-direction: column; gap: 0.6cqw; }
.tmpl-arabic-editorial-tweet .tmpl-display-name { font-weight: 700; font-size: 3cqw; color: #2a1810; }
.tmpl-arabic-editorial-tweet .tmpl-handle { font-size: 2.2cqw; color: rgba(42, 24, 16, 0.55); }

/* ============================================================
   13. BRAND STORY — logo + bold tagline + CTA, customizable colors
   ============================================================ */
.tmpl-brand-story {
  background: linear-gradient(135deg, #0a0a0c 0%, #1a1a22 100%);
  color: #ffffff;
  padding: 10% 7%;
  justify-content: space-between;
}
.tmpl-brand-story .tmpl-logo-area {
  width: 16cqw; height: 16cqw;
  border-radius: 4cqw;
  background: rgba(255, 255, 255, 0.08);
  border: 0.2cqw solid rgba(255, 255, 255, 0.18);
  display: grid; place-items: center;
  overflow: hidden;
  font-size: 6cqw;
  font-weight: 800;
  color: #fff;
}
.tmpl-brand-story .tmpl-logo-area img { width: 70%; height: 70%; object-fit: contain; }
.tmpl-brand-story .tmpl-content { display: flex; flex-direction: column; gap: 3cqw; }
.tmpl-brand-story .tmpl-eyebrow {
  font-size: 1.8cqw; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); font-weight: 700;
}
.tmpl-brand-story .tmpl-title {
  font-size: 8cqw;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmpl-brand-story .tmpl-subtitle {
  font-size: 3cqw;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  text-align: start;
}
.tmpl-brand-story .tmpl-cta {
  display: inline-flex; align-self: flex-start;
  align-items: center; gap: 1.2cqw;
  padding: 2.4cqw 4cqw;
  background: #ffffff;
  color: #0a0a0c;
  border-radius: 999px;
  font-size: 2.4cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ============================================================
   14. TECH STORY — code-block aesthetic, monospace, neon accents
   ============================================================ */
.tmpl-tech-story {
  background: #0a0e1a;
  color: #e2e8f0;
  padding: 9% 7%;
  justify-content: space-between;
  font-family: "SF Mono", "Cascadia Code", ui-monospace, Consolas, monospace;
}
[dir="rtl"] .tmpl-tech-story { font-family: var(--story-font, var(--font-arabic)); }
.tmpl-tech-story::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent 40%, rgba(56, 189, 248, 0.06) 60%, transparent 80%),
    radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.12), transparent 40%);
  z-index: 0;
}
.tmpl-tech-story > * { position: relative; z-index: 1; }
.tmpl-tech-story .tmpl-window-bar {
  display: flex; align-items: center; gap: 1.2cqw;
  padding-bottom: 3cqw;
  border-bottom: 0.15cqw solid rgba(255, 255, 255, 0.08);
}
.tmpl-tech-story .tmpl-window-dot {
  width: 1.4cqw; height: 1.4cqw; border-radius: 50%;
}
.tmpl-tech-story .tmpl-window-dot.r { background: #ff5f57; }
.tmpl-tech-story .tmpl-window-dot.y { background: #febc2e; }
.tmpl-tech-story .tmpl-window-dot.g { background: #28c940; }
.tmpl-tech-story .tmpl-window-name {
  margin-inline-start: 2cqw;
  font-size: 1.6cqw;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.tmpl-tech-story .tmpl-content { display: flex; flex-direction: column; gap: 3cqw; }
.tmpl-tech-story .tmpl-prompt {
  font-size: 2cqw; color: #38bdf8; font-weight: 600; letter-spacing: 0.04em;
}
.tmpl-tech-story .tmpl-prompt::before { content: "$ "; color: #a855f7; }
.tmpl-tech-story .tmpl-title {
  font-size: 6cqw;
  font-weight: 700;
  line-height: 1.18;
  color: #e2e8f0;
  text-align: start;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, var(--story-font, var(--font-sans));
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[dir="rtl"] .tmpl-tech-story .tmpl-title { font-family: var(--story-font, var(--font-arabic)); }
.tmpl-tech-story .tmpl-subtitle {
  font-size: 2.4cqw;
  color: #94a3b8;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, var(--story-font, var(--font-sans));
  text-align: start;
  line-height: 1.5;
}
[dir="rtl"] .tmpl-tech-story .tmpl-subtitle { font-family: var(--story-font, var(--font-arabic)); }
.tmpl-tech-story .tmpl-tags {
  display: flex; flex-wrap: wrap; gap: 1.2cqw;
  margin-top: 2cqw;
}
.tmpl-tech-story .tmpl-tag {
  font-size: 1.6cqw;
  padding: 0.8cqw 1.8cqw;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 0.1cqw solid rgba(56, 189, 248, 0.3);
  border-radius: 0.6cqw;
}
.tmpl-tech-story .tmpl-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 3cqw;
  border-top: 0.15cqw solid rgba(255, 255, 255, 0.08);
  font-size: 1.6cqw;
  color: #64748b;
}
.tmpl-tech-story .tmpl-author { color: #cbd5e1; font-weight: 600; }
.tmpl-tech-story .tmpl-cursor { display: inline-block; width: 0.4cqw; height: 1.6cqw; background: #38bdf8; vertical-align: middle; margin-inline-start: 0.4cqw; }

/* ============================================================
   USER-DEFINED EFFECTS (applied via canvas root inline styles via JS)
   The following lets the lite editor adjust blur, overlay, title scale
   ============================================================ */
.story-canvas[data-effect-blur] .tmpl-bg-blur,
.story-canvas[data-effect-blur] .tmpl-bg-color {
  filter: blur(calc(var(--effect-blur, 80) * 1px)) saturate(140%);
}
.story-canvas[data-effect-overlay] .tmpl-gradient,
.story-canvas[data-effect-overlay] .tmpl-overlay {
  opacity: var(--effect-overlay, 1);
}
/* Title scale must beat per-template font-size; use !important deliberately */
.story-canvas[data-effect-title-scale="true"] .tmpl-title {
  font-size: calc(var(--story-title-base, 6cqw) * var(--effect-title-scale, 1)) !important;
}

/* Custom gradient layer (when user picks colors in custom builder) */
.tmpl-root[data-custom-bg="gradient"] {
  background: linear-gradient(
    var(--gradient-angle, 135deg),
    var(--gradient-from, #0a0a0c) 0%,
    var(--gradient-to, #1a1a22) 100%
  ) !important;
}

/* Custom badge shown over Full-Image template */
.tmpl-full-image .tmpl-custom-badge {
  display: inline-flex; align-self: flex-start;
  padding: 1cqw 2.4cqw;
  background: var(--badge-bg, #ff5e57);
  color: var(--badge-color, #ffffff);
  font-size: 1.8cqw;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 0.6cqw;
  margin-bottom: 2cqw;
  text-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.35);
}

/* Arabic titles need a taller line box so descenders are not clipped by line clamps. */
.story-canvas[dir="rtl"] .tmpl-title,
[dir="rtl"] .tmpl-title {
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  padding-bottom: 0.18em;
}

.story-canvas[dir="rtl"] .tmpl-full-image .tmpl-title,
[dir="rtl"] .tmpl-full-image .tmpl-title {
  line-height: 1.24 !important;
  padding-bottom: 0.22em;
}