/* Auto-generated by scripts/extract-broadside-runtime.py daisy-days — DO NOT hand-edit.
 * Source: html_gen_prompt.py _DAISY_DAYS_EXTRA_TOKENS + _DAISY_DAYS_STAT_CARD_CSS
 * Loaded by editor.html so editor + viewer render daisy-days decks
 * even when the saved markup lost the prompt-injected <style> block.
 * (Rainy 2026-05-29 — AI gen for these 4 templates dropped prompt CSS.)
 */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@400;500;600;700&display=swap');

  

[data-template="daisy-days"] {

  /* ─────────────────────────────────────────────────────────
     Daisy Days — design tokens
     Source of truth: design-specs/daisy-days.html (:root block)
     Coordinate system: 1920×1080 design canvas (NOT 100vw/vh).
     Visual identity: cream + pastel rainbow + 3px ink borders +
                      6px offset shadows + hand-drawn SVG decorations.
     ───────────────────────────────────────────────────────── */
  /* ── PASTEL RAINBOW PALETTE ── */
  --dd-cream: #F5F0E6 !important;

  --dd-turquoise: #7ECDC0 !important;

  --dd-soft-pink: #F7C8D4 !important;

  --dd-butter: #FDE68A !important;

  --dd-mint: #A8E6CF !important;

  --dd-lavender: #D4A5E8 !important;

  --dd-peach: #FFCBA4 !important;

  --dd-sky: #A8D8F0 !important;

  --dd-coral: #F8635F !important;

  --dd-ink: #2D2D2D !important;

  --dd-text-muted: #6B6B6B !important;


  /* ── BORDERS / SHADOWS / RADII (neo-brutalist) ── */
  --dd-border-width: 3px !important;

  --dd-border: 3px solid #2D2D2D !important;

  --dd-radius: 20px !important;

  --dd-radius-lg: 28px !important;

  --dd-shadow: 6px 6px 0 #2D2D2D !important;

  --dd-shadow-sm: 4px 4px 0 #2D2D2D !important;


  /* ── TYPOGRAPHY ── */
  --dd-font-display: 'Fredoka One', cursive !important;

  --dd-font-body: 'Quicksand', sans-serif !important;

  /* Alias --font-heading / --font-body so any cross-template rule that
     reads those (inherited from default :root) resolves to dd fonts. */
  --font-heading: 'Fredoka One', cursive !important;

  --font-body: 'Quicksand', sans-serif !important;

}


/* ═══════════════════════════════════════════════════════════════════════════
   DAISY DAYS — Slide-production component CSS
   Canvas: 1920×1080. All sizes in canvas pixels.
   Source of truth: design-specs/daisy-days.html
   ALL selectors scoped under [data-template="daisy-days"] — never bare.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ROOT / BASE ─────────────────────────────────────────────────────── */
[data-template="daisy-days"].slide,
[data-template="daisy-days"] .slide {
  /* Cream painted on .slide-scale-inner instead of .slide. In the editor
     .slide is sized to fill the slide viewport — painting cream here makes
     the cream BLEED past .slide-scale-inner's visible rect into the
     editor's gray work area. (Rainy 2026-05-29: "daisy 的 editor 依旧有
     米色 ... 把这两个 bg 的 !important 关掉就 OK 了" — same fix as cobalt-grid:
     .slide stays transparent, only .slide-scale-inner paints cream.) */
  background: transparent !important;

  font-family: var(--dd-font-body) !important;

  color: var(--dd-ink) !important;

  position: relative !important;

  overflow: hidden !important;

}
/* Cream now painted on the wrapper that matches the visible slide rect. */
[data-template="daisy-days"] .slide > .slide-scale-inner,
[data-template="daisy-days"].slide > .slide-scale-inner {
  background: var(--dd-cream) !important;

}
/* Generate-modal build canvas ONLY (see cobalt-grid for rationale). */
#genStudioCanvas [data-template="daisy-days"] .slide > .slide-scale-inner,
#genStudioCanvas [data-template="daisy-days"].slide > .slide-scale-inner,
.gen-studio-slide-thumb [data-template="daisy-days"] .slide > .slide-scale-inner,
.gen-studio-slide-thumb [data-template="daisy-days"].slide > .slide-scale-inner {
  height: 100% !important;

}
[data-template="daisy-days"] h1,
[data-template="daisy-days"] h2,
[data-template="daisy-days"] h3,
[data-template="daisy-days"] h4 {
  font-family: var(--dd-font-display) !important;

  font-weight: 400 !important;

  letter-spacing: 0.02em !important;

  color: var(--dd-ink) !important;

}
[data-template="daisy-days"] p,
[data-template="daisy-days"] li {
  font-family: var(--dd-font-body) !important;

  font-weight: 600 !important;

  color: var(--dd-ink) !important;

}

/* ── Decorations container (every layout) ── */
[data-template="daisy-days"] .dd-deco {
  position: absolute !important;

  pointer-events: none !important;

  z-index: 1 !important;

}
[data-template="daisy-days"] .dd-deco svg {
  width: 100% !important;

  height: 100% !important;

  display: block !important;

}

/* ─── LAYOUT 1: COVER ─────────────────────────────────────────────────────
   4-corner daisies (220 / 180 / 200 / 210 px) + 3 stars (90 / 70 / 80 px).
   Title + subtitle centered in dd-title-box. Title <= 3 words.            */
[data-template="daisy-days"][data-layout="cover"] > .slide-scale-inner {
  background: var(--dd-cream) !important;

}
[data-template="daisy-days"] .dd-title-box {
  position: absolute !important;

  left: 50% !important;

  top: 50% !important;

  transform: translate(-50%, -50%) !important;

  text-align: center !important;

  z-index: 2 !important;

  width: 1500px !important;

  max-width: 1500px !important;

}
[data-template="daisy-days"] .dd-title-box h1 {
  font-size: 220px !important;

  line-height: 1.0 !important;

  margin-bottom: 24px !important;

}
[data-template="daisy-days"] .dd-title-box .dd-subtitle {
  font-family: var(--dd-font-body) !important;

  font-weight: 600 !important;

  font-size: 36px !important;

  color: var(--dd-text-muted) !important;

  margin-top: 24px !important;

}

/* Cover decoration positions (1920×1080 px) */
[data-template="daisy-days"][data-layout="cover"] .dd-daisy-tl { top: -60px;  left: -60px;  width: 360px; height: 360px; }
[data-template="daisy-days"][data-layout="cover"] .dd-daisy-tr { top: 30px;   right: -40px; width: 300px; height: 300px; }
[data-template="daisy-days"][data-layout="cover"] .dd-daisy-bl { bottom: -70px; left: 30px;  width: 320px; height: 320px; }
[data-template="daisy-days"][data-layout="cover"] .dd-daisy-br { bottom: 10px; right: -60px; width: 340px; height: 340px; }
[data-template="daisy-days"][data-layout="cover"] .dd-star-1   { top: 100px;   left: 110px;  width: 130px; height: 130px; }
[data-template="daisy-days"][data-layout="cover"] .dd-star-2   { bottom: 180px; left: 180px; width: 100px; height: 100px; }
[data-template="daisy-days"][data-layout="cover"] .dd-star-3   { top: 180px;  right: 150px;  width: 120px; height: 120px; }

/* ─── LAYOUT 2: WELCOME ───────────────────────────────────────────────────
   Sun (top-left) + rainbow (bot-right) + 2 stars · mint header frame +
   white body with butter-dot bullet list. Bullets <= 8 words each.        */
[data-template="daisy-days"][data-layout="welcome"] > .slide-scale-inner {
  background: var(--dd-cream) !important;

}
[data-template="daisy-days"] .dd-welcome-frame {
  position: absolute !important;

  left: 210px !important;

  top: 200px !important;

  width: 1500px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-welcome-header {
  background: var(--dd-mint) !important;

  border: var(--dd-border) !important;

  border-bottom: none !important;

  border-radius: 28px 28px 0 0 !important;

  padding: 32px 56px !important;

  text-align: center !important;

}
[data-template="daisy-days"] .dd-welcome-header h2 {
  font-size: 52px !important;

  color: var(--dd-ink) !important;

}
[data-template="daisy-days"] .dd-welcome-body {
  background: #ffffff !important;

  border: var(--dd-border) !important;

  border-radius: 0 0 28px 28px !important;

  padding: 60px 80px !important;

  box-shadow: var(--dd-shadow) !important;

}
[data-template="daisy-days"] .dd-welcome-list {
  list-style: none !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 32px !important;

  margin: 0 !important;

  padding: 0 !important;

}
[data-template="daisy-days"] .dd-welcome-list li {
  font-size: 32px !important;

  font-weight: 600 !important;

  padding-left: 60px !important;

  position: relative !important;

  line-height: 1.5 !important;

}
[data-template="daisy-days"] .dd-welcome-list li::before {
  content: '' !important;

  position: absolute !important;

  left: 0 !important;

  top: 12px !important;

  width: 32px !important;

  height: 32px !important;

  background: var(--dd-butter) !important;

  border: 3px solid var(--dd-ink) !important;

  border-radius: 50% !important;

}
[data-template="daisy-days"][data-layout="welcome"] .dd-sun     { top: 60px;  left: 60px;  width: 220px; height: 220px; }
[data-template="daisy-days"][data-layout="welcome"] .dd-rainbow { bottom: 60px; right: 50px; width: 280px; height: 200px; }
[data-template="daisy-days"][data-layout="welcome"] .dd-star-1  { top: 150px; right: 130px; width: 110px; height: 110px; }
[data-template="daisy-days"][data-layout="welcome"] .dd-star-2  { bottom: 180px; left: 110px; width: 90px;  height: 90px; }

/* ─── LAYOUT 3: GRID-WEEK ─────────────────────────────────────────────────
   Turquoise bg · h2 (white text-shadow) · 5-column grid of dd-day-cards.
   EXACTLY 5 day-cards. Each header uses one of: pink/green/coral/yellow/lavender.
   3-5 bullets per card; each bullet <= 3 words.                            */
[data-template="daisy-days"][data-layout="grid-week"] > .slide-scale-inner {
  background: var(--dd-turquoise) !important;

}
[data-template="daisy-days"][data-layout="grid-week"] .dd-grid-week-title {
  position: absolute !important;

  left: 0 !important;

  right: 0 !important;

  top: 80px !important;

  text-align: center !important;

  color: #ffffff !important;

  text-shadow: 5px 5px 0 var(--dd-ink) !important;

  font-size: 88px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-week-grid {
  position: absolute !important;

  left: 130px !important;

  top: 260px !important;

  right: 130px !important;

  display: grid !important;

  grid-template-columns: repeat(5, 1fr) !important;

  gap: 28px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-day-card {
  background: #ffffff !important;

  border: var(--dd-border) !important;

  border-radius: 20px !important;

  overflow: hidden !important;

  box-shadow: var(--dd-shadow-sm) !important;

  display: flex !important;

  flex-direction: column !important;

}
[data-template="daisy-days"] .dd-day-header {
  padding: 22px 16px !important;

  text-align: center !important;

  font-family: var(--dd-font-display) !important;

  font-size: 30px !important;

  border-bottom: var(--dd-border) !important;

}
[data-template="daisy-days"] .dd-day-header.dd-pink     { background: var(--dd-soft-pink); }
[data-template="daisy-days"] .dd-day-header.dd-green    { background: var(--dd-mint); }
[data-template="daisy-days"] .dd-day-header.dd-coral    { background: var(--dd-coral); color: #ffffff; }
[data-template="daisy-days"] .dd-day-header.dd-yellow   { background: var(--dd-butter); }
[data-template="daisy-days"] .dd-day-header.dd-lavender { background: var(--dd-lavender); }
[data-template="daisy-days"] .dd-day-body {
  padding: 28px 28px 32px !important;

  flex: 1 !important;

}
[data-template="daisy-days"] .dd-day-body ul {
  list-style: none !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 16px !important;

  margin: 0 !important;

  padding: 0 !important;

}
[data-template="daisy-days"] .dd-day-body li {
  font-size: 22px !important;

  font-weight: 600 !important;

  padding-left: 22px !important;

  position: relative !important;

  line-height: 1.4 !important;

}
[data-template="daisy-days"] .dd-day-body li::before {
  content: '–' !important;

  position: absolute !important;

  left: 0 !important;

  color: var(--dd-text-muted) !important;

}
[data-template="daisy-days"][data-layout="grid-week"] .dd-daisy-tl { top: -40px; left: -50px; width: 260px; height: 260px; }
[data-template="daisy-days"][data-layout="grid-week"] .dd-daisy-br { bottom: -50px; right: -40px; width: 280px; height: 280px; }
[data-template="daisy-days"][data-layout="grid-week"] .dd-star-1   { bottom: 110px; left: 60px;  width: 130px; height: 130px; }
[data-template="daisy-days"][data-layout="grid-week"] .dd-star-2   { bottom: 60px;  left: 200px; width: 80px;  height: 80px; }

/* ─── LAYOUT 4: TIMELINE ──────────────────────────────────────────────────
   Soft-pink bg · vertical list of numbered dot + content cards · 3-5 rows. */
[data-template="daisy-days"][data-layout="timeline"] > .slide-scale-inner {
  background: var(--dd-soft-pink) !important;

}
[data-template="daisy-days"][data-layout="timeline"] .dd-timeline-title {
  position: absolute !important;

  left: 0 !important;

  right: 0 !important;

  top: 80px !important;

  text-align: center !important;

  color: #ffffff !important;

  text-shadow: 5px 5px 0 rgba(0,0,0,0.2) !important;

  font-size: 88px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-timeline-wrap {
  position: absolute !important;

  left: 50% !important;

  top: 240px !important;

  transform: translateX(-50%) !important;

  width: 1240px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 32px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-timeline-row {
  display: flex !important;

  align-items: center !important;

  gap: 36px !important;

}
[data-template="daisy-days"] .dd-timeline-dot {
  width: 88px !important;

  height: 88px !important;

  border-radius: 50% !important;

  border: var(--dd-border) !important;

  flex-shrink: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-family: var(--dd-font-display) !important;

  font-size: 36px !important;

  color: #ffffff !important;

}
[data-template="daisy-days"] .dd-timeline-dot.dd-d1 { background: var(--dd-coral); }
[data-template="daisy-days"] .dd-timeline-dot.dd-d2 { background: var(--dd-mint); }
[data-template="daisy-days"] .dd-timeline-dot.dd-d3 { background: var(--dd-sky); }
[data-template="daisy-days"] .dd-timeline-dot.dd-d4 { background: var(--dd-lavender); }
[data-template="daisy-days"] .dd-timeline-dot.dd-d5 { background: var(--dd-butter); color: var(--dd-ink); }
[data-template="daisy-days"] .dd-timeline-card {
  flex: 1 !important;

  background: #ffffff !important;

  border: var(--dd-border) !important;

  border-radius: 20px !important;

  padding: 24px 36px !important;

  box-shadow: var(--dd-shadow-sm) !important;

}
[data-template="daisy-days"] .dd-timeline-card h4 {
  font-size: 32px !important;

  margin-bottom: 6px !important;

}
[data-template="daisy-days"] .dd-timeline-card p {
  font-size: 22px !important;

  color: var(--dd-text-muted) !important;

  font-weight: 500 !important;

}
[data-template="daisy-days"][data-layout="timeline"] .dd-cloud   { top: 60px;  right: 60px; width: 240px; height: 240px; }
[data-template="daisy-days"][data-layout="timeline"] .dd-cloud-2 { bottom: 100px; left: 50px; width: 200px; height: 200px; }
[data-template="daisy-days"][data-layout="timeline"] .dd-star-1  { top: 150px; left: 90px;  width: 110px; height: 110px; }
[data-template="daisy-days"][data-layout="timeline"] .dd-daisy   { bottom: 50px; right: 60px; width: 180px; height: 180px; }

/* ─── LAYOUT 5: CHART-BAR (Chart.js) ──────────────────────────────────────
   Butter background · h2 · centered chart-card with <canvas>. Use Chart.js. */
[data-template="daisy-days"][data-layout="chart-bar"] > .slide-scale-inner {
  background: var(--dd-butter) !important;

}
[data-template="daisy-days"][data-layout="chart-bar"] .dd-chart-title {
  position: absolute !important;

  left: 0 !important;

  right: 0 !important;

  top: 80px !important;

  text-align: center !important;

  font-size: 88px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-chart-card {
  position: absolute !important;

  left: 50% !important;

  top: 50% !important;

  transform: translate(-50%, -50%) !important;

  width: 1320px !important;

  height: 700px !important;

  background: #ffffff !important;

  border: var(--dd-border) !important;

  border-radius: 28px !important;

  padding: 56px 72px !important;

  box-shadow: var(--dd-shadow) !important;

  z-index: 2 !important;

  display: flex !important;

  flex-direction: column !important;

  box-sizing: border-box !important;

}
[data-template="daisy-days"] .dd-chart-card .dd-chart-wrap {
  position: relative !important;

  flex: 1 !important;

  min-height: 0 !important;

}
[data-template="daisy-days"] .dd-chart-card canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
[data-template="daisy-days"][data-layout="chart-bar"] .dd-star-1 { top: 80px;  left: 90px;  width: 130px; height: 130px; }
[data-template="daisy-days"][data-layout="chart-bar"] .dd-star-2 { top: 130px; right: 130px; width: 100px; height: 100px; }
[data-template="daisy-days"][data-layout="chart-bar"] .dd-daisy  { bottom: 60px; left: 60px; width: 220px; height: 220px; }
[data-template="daisy-days"][data-layout="chart-bar"] .dd-cloud  { bottom: 90px; right: 60px; width: 220px; height: 220px; }

/* ─── LAYOUT 6: CARDS (2x2 generic info grid) ─────────────────────────────
   Cream bg · h2 · 4 cards in 2x2 grid · each card has colored circle icon
   + h4 + p. Card body <= 14 words.                                          */
[data-template="daisy-days"][data-layout="cards"] > .slide-scale-inner {
  background: var(--dd-cream) !important;

}
[data-template="daisy-days"][data-layout="cards"] .dd-cards-title {
  position: absolute !important;

  left: 0 !important;

  right: 0 !important;

  top: 90px !important;

  text-align: center !important;

  font-size: 88px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-cards-grid {
  position: absolute !important;

  left: 50% !important;

  top: 50% !important;

  transform: translate(-50%, -50%) !important;

  margin-top: 60px !important;

  width: 1340px !important;

  display: grid !important;

  grid-template-columns: repeat(2, 1fr) !important;

  gap: 44px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-info-card {
  background: #ffffff !important;

  border: var(--dd-border) !important;

  border-radius: 20px !important;

  padding: 48px 52px !important;

  box-shadow: var(--dd-shadow-sm) !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 16px !important;

}
[data-template="daisy-days"] .dd-info-card .dd-card-icon {
  width: 80px !important;

  height: 80px !important;

  border-radius: 50% !important;

  border: var(--dd-border) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-family: var(--dd-font-display) !important;

  font-size: 32px !important;

  margin-bottom: 8px !important;

}
[data-template="daisy-days"] .dd-info-card .dd-card-icon.dd-i1 { background: var(--dd-soft-pink); }
[data-template="daisy-days"] .dd-info-card .dd-card-icon.dd-i2 { background: var(--dd-mint); }
[data-template="daisy-days"] .dd-info-card .dd-card-icon.dd-i3 { background: var(--dd-sky); }
[data-template="daisy-days"] .dd-info-card .dd-card-icon.dd-i4 { background: var(--dd-lavender); }
[data-template="daisy-days"] .dd-info-card h4 {
  font-size: 30px !important;

}
[data-template="daisy-days"] .dd-info-card p {
  font-size: 22px !important;

  color: var(--dd-text-muted) !important;

  font-weight: 500 !important;

  line-height: 1.5 !important;

}
[data-template="daisy-days"][data-layout="cards"] .dd-rainbow  { top: 60px; right: 50px; width: 250px; height: 180px; }
[data-template="daisy-days"][data-layout="cards"] .dd-daisy-tl { top: -30px; left: -30px; width: 220px; height: 220px; }
[data-template="daisy-days"][data-layout="cards"] .dd-star-1   { bottom: 130px; left: 80px; width: 110px; height: 110px; }
[data-template="daisy-days"][data-layout="cards"] .dd-sun      { bottom: 70px; right: 70px; width: 200px; height: 200px; }

/* ─── LAYOUT 7: QUOTE ─────────────────────────────────────────────────────
   Lavender bg · centered white quote-box with quote-mark glyph + author.
   Quote <= 22 words. Author <= 5 words.                                    */
[data-template="daisy-days"][data-layout="quote"] > .slide-scale-inner {
  background: var(--dd-lavender) !important;

}
[data-template="daisy-days"] .dd-quote-box {
  position: absolute !important;

  left: 50% !important;

  top: 50% !important;

  transform: translate(-50%, -50%) !important;

  width: 1240px !important;

  background: #ffffff !important;

  border: var(--dd-border) !important;

  border-radius: 28px !important;

  padding: 80px 96px !important;

  box-shadow: var(--dd-shadow) !important;

  text-align: center !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-quote-mark {
  font-family: var(--dd-font-display) !important;

  font-size: 130px !important;

  line-height: 1 !important;

  color: var(--dd-soft-pink) !important;

  margin-bottom: 16px !important;

}
[data-template="daisy-days"] .dd-quote-text {
  font-family: var(--dd-font-display) !important;

  font-size: 56px !important;

  line-height: 1.35 !important;

  color: var(--dd-ink) !important;

  margin-bottom: 28px !important;

}
[data-template="daisy-days"] .dd-quote-author {
  font-weight: 700 !important;

  font-size: 28px !important;

  color: var(--dd-text-muted) !important;

}
[data-template="daisy-days"][data-layout="quote"] .dd-daisy-tl { top: 60px; left: 60px; width: 240px; height: 240px; }
[data-template="daisy-days"][data-layout="quote"] .dd-daisy-br { bottom: 60px; right: 60px; width: 250px; height: 250px; }
[data-template="daisy-days"][data-layout="quote"] .dd-star-1   { top: 140px; right: 200px; width: 110px; height: 110px; }
[data-template="daisy-days"][data-layout="quote"] .dd-star-2   { bottom: 200px; left: 130px; width: 90px;  height: 90px; }
[data-template="daisy-days"][data-layout="quote"] .dd-rainbow  { top: 80px;  right: 60px; width: 220px; height: 160px; }

/* ─── LAYOUT 8: TEAM ──────────────────────────────────────────────────────
   Mint bg · h2 · grid of 3-4 team members (avatar + name + role).          */
[data-template="daisy-days"][data-layout="team"] > .slide-scale-inner {
  background: var(--dd-mint) !important;

}
[data-template="daisy-days"][data-layout="team"] .dd-team-title {
  position: absolute !important;

  left: 0 !important;

  right: 0 !important;

  top: 80px !important;

  text-align: center !important;

  color: #ffffff !important;

  text-shadow: 5px 5px 0 rgba(0,0,0,0.15) !important;

  font-size: 88px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-team-grid {
  position: absolute !important;

  left: 50% !important;

  top: 50% !important;

  transform: translate(-50%, -50%) !important;

  margin-top: 50px !important;

  width: 1500px !important;

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 56px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-team-member {
  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  gap: 22px !important;

}
[data-template="daisy-days"] .dd-team-avatar {
  width: 200px !important;

  height: 200px !important;

  border-radius: 50% !important;

  border: var(--dd-border) !important;

  background: #ffffff !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  box-shadow: var(--dd-shadow-sm) !important;

  overflow: hidden !important;

  font-family: var(--dd-font-display) !important;

  font-size: 72px !important;

  color: var(--dd-ink) !important;

}
[data-template="daisy-days"] .dd-team-name {
  font-family: var(--dd-font-display) !important;

  font-size: 30px !important;

  text-align: center !important;

}
[data-template="daisy-days"] .dd-team-role {
  font-size: 22px !important;

  font-weight: 600 !important;

  color: var(--dd-text-muted) !important;

  text-align: center !important;

}
[data-template="daisy-days"][data-layout="team"] .dd-daisy-tl { top: -20px; left: -20px; width: 240px; height: 240px; }
[data-template="daisy-days"][data-layout="team"] .dd-daisy-tr { top: 20px;  right: -30px; width: 220px; height: 220px; }
[data-template="daisy-days"][data-layout="team"] .dd-star-1   { bottom: 110px; left: 90px;  width: 110px; height: 110px; }
[data-template="daisy-days"][data-layout="team"] .dd-star-2   { bottom: 70px;  right: 110px; width: 90px;  height: 90px; }

/* ─── LAYOUT 9: PROCESS ───────────────────────────────────────────────────
   Peach bg · EXACTLY 3 numbered colored circles (coral / turquoise / lavender)
   with title + desc, separated by arrows.                                  */
[data-template="daisy-days"][data-layout="process"] > .slide-scale-inner {
  background: var(--dd-peach) !important;

}
[data-template="daisy-days"][data-layout="process"] .dd-process-title {
  position: absolute !important;

  left: 0 !important;

  right: 0 !important;

  top: 80px !important;

  text-align: center !important;

  font-size: 88px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-process-flow {
  position: absolute !important;

  left: 50% !important;

  top: 50% !important;

  transform: translate(-50%, -50%) !important;

  margin-top: 40px !important;

  width: 1600px !important;

  display: flex !important;

  align-items: flex-start !important;

  justify-content: center !important;

  gap: 32px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-process-step {
  flex: 1 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  text-align: center !important;

  gap: 24px !important;

}
[data-template="daisy-days"] .dd-process-arrow {
  font-family: var(--dd-font-display) !important;

  font-size: 64px !important;

  color: var(--dd-ink) !important;

  margin-top: 70px !important;

  flex-shrink: 0 !important;

}
[data-template="daisy-days"] .dd-step-circle {
  width: 180px !important;

  height: 180px !important;

  border-radius: 50% !important;

  border: var(--dd-border) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-family: var(--dd-font-display) !important;

  font-size: 64px !important;

  color: #ffffff !important;

  box-shadow: var(--dd-shadow-sm) !important;

  flex-shrink: 0 !important;

}
[data-template="daisy-days"] .dd-step-circle.dd-s1 { background: var(--dd-coral); }
[data-template="daisy-days"] .dd-step-circle.dd-s2 { background: var(--dd-turquoise); }
[data-template="daisy-days"] .dd-step-circle.dd-s3 { background: var(--dd-lavender); }
[data-template="daisy-days"] .dd-step-title {
  font-family: var(--dd-font-display) !important;

  font-size: 32px !important;

}
[data-template="daisy-days"] .dd-step-desc {
  font-size: 22px !important;

  font-weight: 600 !important;

  color: var(--dd-text-muted) !important;

  line-height: 1.5 !important;

  max-width: 360px !important;

}
[data-template="daisy-days"][data-layout="process"] .dd-cloud   { top: 60px;  left: 60px;  width: 240px; height: 240px; }
[data-template="daisy-days"][data-layout="process"] .dd-cloud-2 { top: 100px; right: 80px; width: 200px; height: 200px; }
[data-template="daisy-days"][data-layout="process"] .dd-star-1  { bottom: 110px; left: 110px; width: 110px; height: 110px; }
[data-template="daisy-days"][data-layout="process"] .dd-daisy   { bottom: 50px;  right: 60px;  width: 240px; height: 240px; }

/* ─── LAYOUT 10: CHART-DONUT (Chart.js) ───────────────────────────────────
   Sky bg · donut chart-box with side legend. 3-5 segments.                 */
[data-template="daisy-days"][data-layout="chart-donut"] > .slide-scale-inner {
  background: var(--dd-sky) !important;

}
[data-template="daisy-days"] .dd-donut-wrap {
  position: absolute !important;

  left: 50% !important;

  top: 50% !important;

  transform: translate(-50%, -50%) !important;

  width: 1500px !important;

  display: flex !important;

  align-items: center !important;

  gap: 100px !important;

  z-index: 2 !important;

}
[data-template="daisy-days"] .dd-donut-chart-box {
  flex-shrink: 0 !important;

  width: 540px !important;

  height: 540px !important;

  position: relative !important;

}
[data-template="daisy-days"] .dd-donut-chart-box canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
[data-template="daisy-days"] .dd-donut-legend-side {
  display: flex !important;

  flex-direction: column !important;

  gap: 24px !important;

  flex: 1 !important;

}
[data-template="daisy-days"] .dd-donut-legend-side h3 {
  margin-bottom: 16px !important;

  font-size: 56px !important;

}
[data-template="daisy-days"] .dd-donut-legend-side .dd-legend-item {
  display: flex !important;

  align-items: center !important;

  gap: 22px !important;

  font-weight: 600 !important;

  font-size: 28px !important;

}
[data-template="daisy-days"] .dd-donut-legend-side .dd-legend-swatch {
  width: 40px !important;

  height: 40px !important;

  border: 3px solid var(--dd-ink) !important;

  border-radius: 8px !important;

  flex-shrink: 0 !important;

}
[data-template="daisy-days"][data-layout="chart-donut"] .dd-daisy-tl { top: -20px; left: -20px; width: 280px; height: 280px; }
[data-template="daisy-days"][data-layout="chart-donut"] .dd-daisy-br { bottom: -20px; right: -20px; width: 290px; height: 290px; }
[data-template="daisy-days"][data-layout="chart-donut"] .dd-star-1   { top: 130px; right: 130px; width: 110px; height: 110px; }
[data-template="daisy-days"][data-layout="chart-donut"] .dd-star-2   { bottom: 180px; left: 90px; width: 90px;  height: 90px; }

/* ─── LAYOUT 11: CLOSING ──────────────────────────────────────────────────
   Same chrome as cover (4 daisies + 3 stars), title typically "Thank you". */
[data-template="daisy-days"][data-layout="closing"] > .slide-scale-inner {
  background: var(--dd-cream) !important;

}
[data-template="daisy-days"][data-layout="closing"] .dd-daisy-tl { top: -60px;  left: -60px;  width: 360px; height: 360px; }
[data-template="daisy-days"][data-layout="closing"] .dd-daisy-tr { top: 30px;   right: -40px; width: 300px; height: 300px; }
[data-template="daisy-days"][data-layout="closing"] .dd-daisy-bl { bottom: -70px; left: 30px;  width: 320px; height: 320px; }
[data-template="daisy-days"][data-layout="closing"] .dd-daisy-br { bottom: 10px; right: -60px; width: 340px; height: 340px; }
[data-template="daisy-days"][data-layout="closing"] .dd-star-1   { top: 100px;   left: 110px;  width: 130px; height: 130px; }
[data-template="daisy-days"][data-layout="closing"] .dd-star-2   { bottom: 180px; left: 180px; width: 100px; height: 100px; }
[data-template="daisy-days"][data-layout="closing"] .dd-star-3   { top: 180px;  right: 150px;  width: 120px; height: 120px; }


/* ═══════════════════════════════════════════════════════════════════════════
   D-form fallback — section-level bg
   ───────────────────────────────────────────────────────────────────────────
   Layout bg rules above target `> .slide-scale-inner`, but D-form decks
   (AI-gen via generate-modal → JsonRenderer.renderSlide) render slide
   section's direct child as `.obj-html` instead of `.slide-scale-inner`,
   so the bg selector misses and falls back to thumbWrap's inline white.
   Mirror each layout bg directly to the section element so D-form preview
   renders correct bg. Editor path (section > .slide-scale-inner) is
   unaffected because inner has inset:0 fully covering section bg paint.
   (Rainy 2026-06-22: batch fix after retro-modern proof-of-fix.)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="daisy-days"][data-layout="cards"],
[data-template="daisy-days"][data-layout="closing"],
[data-template="daisy-days"][data-layout="cover"],
[data-template="daisy-days"][data-layout="welcome"] {
  background: var(--dd-cream) !important;
}
[data-template="daisy-days"][data-layout="grid-week"] {
  background: var(--dd-turquoise) !important;
}
[data-template="daisy-days"][data-layout="timeline"] {
  background: var(--dd-soft-pink) !important;
}
[data-template="daisy-days"][data-layout="chart-bar"] {
  background: var(--dd-butter) !important;
}
[data-template="daisy-days"][data-layout="quote"] {
  background: var(--dd-lavender) !important;
}
[data-template="daisy-days"][data-layout="team"] {
  background: var(--dd-mint) !important;
}
[data-template="daisy-days"][data-layout="process"] {
  background: var(--dd-peach) !important;
}
[data-template="daisy-days"][data-layout="chart-donut"] {
  background: var(--dd-sky) !important;
}