/* تم تمرین (دولینگو‌مانند). فقط چیزهایی که با Tailwind راحت نمی‌شود: متغیر رنگ هر فصل،
   متن درسنامه، و کلاس‌هایی که JS می‌سازد (چون Tailwind کلاس‌های داخل JS را نمی‌بیند). */

[x-cloak] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* رنگ هر فصل در نقشه */
[data-tone="green"]  { --tone: #58cc02; --tone-dark: #58a700; }
[data-tone="blue"]   { --tone: #1cb0f6; --tone-dark: #1899d6; }
[data-tone="purple"] { --tone: #ce82ff; --tone-dark: #a568cc; }
[data-tone="orange"] { --tone: #ff9600; --tone-dark: #d97f00; }

/* شماره‌ی جفت در سؤال جورکردنی */
.duo-match[data-pair]::after { content: attr(data-pair); margin-inline-start: .5rem; font-size: .75rem; opacity: .8; }

/* متن درسنامه / صورت سؤال */
.duo-prose { line-height: 2; color: #dce6ec; overflow-wrap: anywhere; }
.duo-prose p { margin: 0 0 1rem; }
.duo-prose h1, .duo-prose h2, .duo-prose h3 { margin: 1.5rem 0 .75rem; font-weight: 700; color: #fff; }
.duo-prose ul, .duo-prose ol { margin: 0 0 1rem; padding-inline-start: 1.5rem; }
.duo-prose ul { list-style: disc; } .duo-prose ol { list-style: decimal; }
.duo-prose a { color: #1cb0f6; text-decoration: underline; }
.duo-prose code { direction: ltr; unicode-bidi: embed; background: #37464f; border-radius: .375rem; padding: .1rem .4rem; font-size: .9em; }
.duo-prose pre { direction: ltr; text-align: left; margin: 0 0 1rem; padding: 1rem; overflow-x: auto; border-radius: 1rem; background: #1e1e1e; }
.duo-prose pre code { background: none; padding: 0; }
.duo-prose img { max-width: 100%; border-radius: 1rem; }

/* نتیجه‌ی تست‌های کد (ساخته‌شده با JS) */
.duo-result { border: 2px solid #37464f; border-radius: 1rem; padding: .75rem 1rem; font-size: .875rem; }
.duo-result[data-ok="true"]  { border-color: #58cc02; color: #58cc02; }
.duo-result[data-ok="false"] { border-color: #ff4b4b; color: #ff4b4b; }
.duo-result pre { direction: ltr; text-align: left; margin: .5rem 0 0; padding: .5rem .75rem; border-radius: .75rem;
                  background: #202f36; color: #dce6ec; white-space: pre-wrap; font-size: .8rem; }
.duo-result small { display: block; margin-top: .5rem; color: #8b9ca6; }

@media (prefers-reduced-motion: no-preference) {
  [data-current="true"] > div > a:last-of-type { animation: duo-pulse 1.8s ease-in-out infinite; }
}
@keyframes duo-pulse { 50% { transform: scale(1.06); } }