/* ═══════════════════════════════════════════════════════════
   dash3.css — خانه‌ی تازه‌ی معلم

   ⚠️ «کیپ تا کیپ»: بخشِ صفحه از هر طرف حاشیه دارد (اندازه گرفته
   شد: ۲۸.۸۷ پیکسل روی گوشیِ ۳۷۵). خودِ dash3.js آن اندازه را از
   صفحه می‌خواند و در --bx / --bt می‌گذارد؛ اینجا با margin منفی
   خنثی می‌شود. عددِ ثابت ننویس — با تم و پهنا فرق می‌کند.
   ═══════════════════════════════════════════════════════════ */

.d3{
  --bl: 0px; --br: 0px; --bt: 0px;          /*  جاوااسکریپت پرشان می‌کند  */
  --gut: 12px;                     /*  حاشیه‌ی داخلیِ تازه، به‌جای ۲۹  */
  --r: 18px;
  --blue:#4E8BFF; --violet:#7C6BFF; --pink:#FF3D71;
  --orange:#FF9A2B; --green:#24C98A; --cyan:#35C6E8;
  margin-left: calc(-1 * var(--bl));
  margin-right: calc(-1 * var(--br));
  margin-top: calc(-1 * var(--bt));
  display:block;
}
.d3-body{ padding: 0 var(--gut) 10px; display:flex; flex-direction:column; gap:14px; }

/* ── سرصفحه ───────────────────────────────────────────── */
.d3-hero{
  position:relative; overflow:hidden;
  border-radius: 0 0 26px 26px;
  margin-bottom:14px;
  /*  نسبتِ خودِ بنرها ۲۰۴۸×۷۶۸ است. روی گوشی کمی بلندتر می‌گیریم
      تا جای نوشته و دکمه‌ها باشد.  */
  aspect-ratio: 20/9;
  min-height: 190px;
  background: linear-gradient(135deg,#4E8BFF,#7C6BFF 58%,#A05CFF);
}
.d3-hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/*  لایه‌ی تیرگی فقط بالای تصویر، تا نوشته خوانا بماند و خودِ
    نقاشی هم دیده شود.  */
.d3-hero.img::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,22,54,.62) 0%, rgba(10,22,54,.22) 46%, rgba(10,22,54,0) 70%);
  pointer-events:none;
}
.d3-hero.noimg{ background: linear-gradient(135deg,#4E8BFF,#7C6BFF 58%,#A05CFF); }

/*  سلام روی زمینه‌ی صفحه — برای بنرهای عکسی که خودشان نوشته دارند. */
.d3-hi-bar{ padding: 14px var(--gut) 10px; }
.d3-hi-bar .d3-hi b{ color:var(--text,#1e293b); text-shadow:none; }
.d3-hi-bar .d3-meta{ color:var(--text2,#64748b); text-shadow:none; }
/*  بنرِ عکسی دیگر لایه‌ی تیرگی لازم ندارد و گوشه‌دار می‌نشیند. */
.d3-hero.img::after{ display:none }
.d3-hero.img{ aspect-ratio:8/3; min-height:0; border-radius:18px; margin-inline:var(--gut); }

.d3-hero-top{ position:absolute; top:0; right:0; left:0; padding:14px var(--gut) 0; z-index:2; }
.d3-hi b{
  display:block; color:#fff; font-size:1.35rem; font-weight:800;
  letter-spacing:-.2px; text-shadow:0 2px 10px rgba(6,16,40,.45);
}
.d3-meta{
  display:flex; align-items:center; gap:7px; margin-top:4px;
  color:rgba(255,255,255,.92); font-size:.76rem; font-weight:600;
  text-shadow:0 1px 6px rgba(6,16,40,.5);
}
.d3-meta i{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.7; }

/*  دکمه‌ها؛ روی بنرِ عکسی داخلِ همان تکه‌ی خالیِ نقاشی می‌نشینند.
    ⚠️ left عمداً فیزیکی است (نه inset-inline-start): مختصات از
    روی خودِ تصویر خوانده شده و تصویر آینه نمی‌شود.  */
/*  ردیفِ دکمه‌ها زیرِ تصویر — با هر بنری کار می‌کند، حتی بنری که
    معلم بعداً می‌فرستد و «جای خالیِ» ثبت‌شده ندارد.  */
.d3-acts{ display:flex; gap:9px; align-items:stretch; }
.d3-hero-go, .d3-hero-code{
  border:0; cursor:pointer; font:inherit; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 14px; white-space:nowrap;
}
.d3-hero-go{
  flex:1 1 auto; min-width:0; gap:7px;
  background:linear-gradient(135deg,#4E8BFF,#7C6BFF); color:#fff;
  font-weight:800; font-size:.88rem; box-shadow:0 8px 18px rgba(78,120,255,.26);
}
.d3-hero-go span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.d3-hero-code{
  flex:0 0 auto; flex-direction:column; gap:0; line-height:1.2;
  background:var(--card,#fff); color:var(--text,#334155);
  border:1px solid var(--border,rgba(15,23,42,.14));
}
.d3-hero-code small{ font-size:.62rem; opacity:.7 }
.d3-hero-code b{ font-family:ui-monospace,monospace; font-size:.92rem; letter-spacing:.5px; color:#3550C8 }

.d3-hero-dino{
  position:absolute; z-index:1; left:-6px; bottom:-8px;
  width:42%; max-width:170px; pointer-events:none;
  filter: drop-shadow(0 10px 18px rgba(8,18,46,.3));
}

/* ── قدمِ بعدی ─────────────────────────────────────────── */
.d3-next{
  display:block; width:100%; text-align:start; cursor:pointer; font:inherit;
  border:0; border-radius:var(--r); padding:15px 16px;
  background:linear-gradient(135deg,#FF9A2B,#FF7A3D);
  color:#fff; box-shadow:0 10px 24px rgba(255,138,45,.28);
}
.d3-next-tag{
  display:inline-block; font-size:.68rem; font-weight:700;
  background:rgba(255,255,255,.22); padding:3px 10px; border-radius:99px;
}
.d3-next b{ display:block; font-size:1.05rem; font-weight:800; margin-top:9px; line-height:1.5 }
.d3-next small{ display:block; font-size:.78rem; opacity:.92; margin-top:2px }
.d3-next-cta{
  display:inline-flex; align-items:center; gap:5px; margin-top:12px;
  background:#fff; color:#C25708; font-weight:800; font-size:.82rem;
  padding:9px 16px; border-radius:99px;
}
.d3-next-cta svg{ opacity:.9 }

/* ── بخش‌ها ───────────────────────────────────────────── */
.d3-sec-h{ display:flex; align-items:center; gap:7px; margin:0 2px 8px }
.d3-sec-h b{ font-size:.95rem; font-weight:800 }
.d3-count{
  font-size:.7rem; font-weight:800; color:#fff; background:var(--pink);
  padding:1px 8px; border-radius:99px;
}
.d3-list{
  background:var(--card,#fff); border:1px solid var(--border,rgba(15,23,42,.09));
  border-radius:var(--r); overflow:hidden;
}
.d3-row{
  display:flex; width:100%; align-items:center; gap:11px; cursor:pointer;
  padding:13px 14px; background:none; border:0; border-bottom:1px solid var(--border,rgba(15,23,42,.07));
  font:inherit; color:inherit; text-align:start; min-height:44px;
}
.d3-row:last-child{ border-bottom:0 }
.d3-row-ic{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.d3-row-ic.g{ background:rgba(36,201,138,.14); color:#0E9A67 }
.d3-row-ic.p{ background:rgba(124,107,255,.14); color:#5B49E0 }
.d3-row-ic.b{ background:rgba(78,139,255,.14); color:#2B66D9 }
.d3-row-txt{ flex:1 1 auto; min-width:0 }
.d3-row-txt b{ display:block; font-size:.88rem; font-weight:700 }
.d3-row-txt small{ display:block; font-size:.74rem; color:var(--text2,#64748b); margin-top:1px }
.d3-row-arrow{ flex:0 0 auto; color:var(--text2,#94a3b8); display:flex }
.d3-row-arrow svg{ opacity:.8 }

/* ── کارت‌های تحلیلی (همان‌های طرحِ قبلی) ───────────────── */
.d3-cards{ display:flex; flex-direction:column; gap:14px }
.d3-cards .d2-card{ margin:0 }

/* ── پاورقی: برگشت به طرحِ قبلی ─────────────────────────── */
.d3-foot{ text-align:center; padding:6px 0 14px }
.d3-foot button{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; font:inherit;
  min-height:44px; padding:0 18px; border-radius:99px;
  border:1px solid var(--border,rgba(15,23,42,.14));
  background:var(--card,#fff); color:var(--text,#334155); font-weight:700; font-size:.84rem;
}
.d3-foot small{ display:block; margin-top:7px; font-size:.7rem; color:var(--text2,#94a3b8) }

/* ── دعوتِ امتحانِ طرحِ تازه (روی طرحِ قبلی) ─────────────── */
.d3-offer{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:13px 15px; margin-bottom:14px; border-radius:18px;
  background:linear-gradient(135deg,#4E8BFF,#7C6BFF); color:#fff;
  box-shadow:0 10px 24px rgba(78,120,255,.26);
}
.d3-offer img{ width:46px; height:46px; object-fit:contain; flex:0 0 auto }
.d3-offer-txt{ flex:1 1 150px; min-width:0 }
.d3-offer-txt b{ display:block; font-size:.92rem; font-weight:800 }
.d3-offer-txt span{ display:block; font-size:.75rem; opacity:.92; margin-top:2px; line-height:1.7 }
.d3-offer-btns{ display:flex; gap:8px; flex:1 1 100% }
.d3-offer-btns button{
  flex:1 1 auto; min-height:42px; border-radius:12px; cursor:pointer; font:inherit;
  font-weight:800; font-size:.83rem; border:0;
}
.d3-btn-y{ background:#fff; color:#3550C8 }
.d3-btn-n{ background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.38) !important }

/* ── صفحه‌ی بزرگ‌تر ───────────────────────────────────── */
@media (min-width:760px){
  .d3{ --gut:18px }
  .d3-hero{ aspect-ratio:auto; height:260px; border-radius:0 0 30px 30px }
  .d3-hi b{ font-size:1.7rem }
  .d3-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start }
  .d3-cards.ins-row{ display:block }
}
@media (prefers-reduced-motion:reduce){ .d3 *{ transition:none !important } }

/* ── راهِ همیشگیِ امتحانِ طرحِ تازه (وقتی دعوت رد شده) ───── */
.d3-tail{ text-align:center; padding:10px 0 4px }
.d3-tail button{
  cursor:pointer; font:inherit; font-size:.8rem; font-weight:700;
  min-height:44px; padding:0 16px; border-radius:99px;
  border:1px dashed var(--border,rgba(15,23,42,.2));
  background:none; color:var(--p,#4E8BFF);
}