/* ==========================================================================
   Riyazi-Bazi v5.3 — قالب‌ها (پوسته‌ها) برای هر سن، جنسیت و نقش
   هر قالب روی <html data-skin="..."> اعمال می‌شود و با تم روشن/تاریک/کنتراست‌بالا سازگار است.
   ترتیب بارگذاری: style.css ← skins.css (پس پوسته بر پایه غلبه می‌کند)
   ========================================================================== */

/* ================= ۱) کلاسیک (پیش‌فرض) ================= */
/* بدون تغییر — همان style.css */

/* ================= ۲) کودکانهٔ شاد (پایهٔ ۱ تا ۳) ================= */
html[data-theme="light"][data-skin="kid"] {
  --bg: linear-gradient(160deg, #fff8ec 0%, #ffe9d6 55%, #e6fbf4 100%);
  --bg-solid: #fff8ec;
  --card: #fffdf8;
  --card-hover: #fff6e8;
  --text: #3b2a17;
  --text-soft: #6b5540;
  --muted: #97805f;
  --border: #f6d9b0;
  --primary: #f97316;
  --primary-dark: #c2560a;
  --primary-light: #ffe8cf;
  --secondary: #14b8a6;
  --secondary-light: #d5f7f1;
  --success: #16a34a;
  --success-light: #dcfce7;
  --warn: #f59e0b;
  --warn-light: #fef3c7;
  --danger: #ef4444;
  --danger-light: #fee2e2;
  --info: #0ea5e9;
  --info-light: #e0f2fe;
  --gradient-1: linear-gradient(135deg, #ff9f1c 0%, #ff5e78 100%);
  --gradient-2: linear-gradient(135deg, #2ec4b6 0%, #7bd389 100%);
  --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --radius: 24px;
  --radius-sm: 16px;
  --radius-lg: 32px;
  --shadow-sm: 0 3px 10px rgba(214,133,25,.10);
  --shadow: 0 10px 26px rgba(214,133,25,.16);
}
html[data-theme="light"][data-skin="kid"] body {
  background-image: radial-gradient(#ffd8a8 2.5px, transparent 2.6px), radial-gradient(#bff0e4 2.5px, transparent 2.6px);
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
}
html[data-theme="dark"][data-skin="kid"] {
  --bg-solid: #231a10; --card: #2c2116; --card-hover: #35281a;
  --text: #fdeedd; --text-soft: #e3cdb2; --muted: #a98f6f; --border: #4a3826;
  --primary: #ffa446; --primary-dark: #ffbe76; --primary-light: #43301b;
  --secondary: #2ee6c8; --secondary-light: #14352f;
  --info-light: #14303f; --success-light: #16331f; --warn-light: #3a2c14; --danger-light: #3a1a1a;
}
html[data-skin="kid"] .grade-card, html[data-skin="kid"] .card { border-width: 2px; }
html[data-skin="kid"] .btn { border-radius: 18px; font-weight: 800; }
html[data-skin="kid"] h1 { font-size: 34px; }

/* ================= ۳) آبنباتی (کلاس اولی‌ها) ================= */
html[data-theme="light"][data-skin="candy"] {
  --bg: linear-gradient(150deg, #fff0f6 0%, #fdeaff 50%, #e8fbff 100%);
  --bg-solid: #fff4f9;
  --card: #fffafc;
  --card-hover: #fff0f7;
  --text: #46273a;
  --text-soft: #6f4a63;
  --muted: #9c7a90;
  --border: #f7d3e4;
  --primary: #ec4899;
  --primary-dark: #be2f77;
  --primary-light: #ffe1ef;
  --secondary: #8b5cf6;
  --secondary-light: #ece4ff;
  --success: #10b981;
  --success-light: #d8f7ec;
  --warn: #f59e0b;
  --warn-light: #fdf0cf;
  --danger: #f43f5e;
  --danger-light: #ffe4e8;
  --info: #38bdf8;
  --info-light: #dff3ff;
  --gradient-1: linear-gradient(135deg, #f78fb3 0%, #a29bfe 100%);
  --gradient-2: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
  --gradient-4: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
  --radius: 26px;
  --radius-sm: 18px;
  --radius-lg: 34px;
}
html[data-theme="light"][data-skin="candy"] body {
  background-image: radial-gradient(circle at 12% 18%, #ffe0ef 0 70px, transparent 71px),
                    radial-gradient(circle at 88% 72%, #e2f5ff 0 90px, transparent 91px);
}
html[data-theme="dark"][data-skin="candy"] {
  --bg-solid: #241722; --card: #2d1c2b; --card-hover: #361f33;
  --text: #fdeaf4; --text-soft: #e6c9db; --muted: #a98ba0; --border: #4b2c45;
  --primary: #ff8ac4; --primary-dark: #ffa8d4; --primary-light: #45233c;
  --secondary: #b79bff; --secondary-light: #2f2450;
}
html[data-skin="candy"] .btn { border-radius: 20px; }
html[data-skin="candy"] .card { border-style: dashed; }

/* ================= ۳٫۵) جنگل حیوانات (کلاس اولی‌ها) ================= */
html[data-theme="light"][data-skin="jungle"] {
  --bg: linear-gradient(160deg, #eef9e7 0%, #e4f5d8 50%, #fff3e0 100%);
  --bg-solid: #eef9e7;
  --card: #fdfef9;
  --card-hover: #f4fbe9;
  --text: #22401f;
  --text-soft: #4c6b45;
  --muted: #7d9773;
  --border: #cfe6bd;
  --primary: #43a047;
  --primary-dark: #2e7032;
  --primary-light: #dff1d2;
  --secondary: #fb8c00;
  --secondary-light: #ffecce;
  --success: #2e7d32;
  --success-light: #ddf2dd;
  --warn: #ef6c00;
  --warn-light: #fdeccf;
  --danger: #e53935;
  --danger-light: #ffe2e2;
  --info: #1e88e5;
  --info-light: #e0eefb;
  --gradient-1: linear-gradient(135deg, #43a047 0%, #fb8c00 100%);
  --gradient-2: linear-gradient(135deg, #66bb6a 0%, #ffca28 100%);
  --gradient-4: linear-gradient(135deg, #81c784 0%, #fff176 100%);
  --radius: 24px;
  --radius-sm: 16px;
  --radius-lg: 32px;
}
html[data-theme="light"][data-skin="jungle"] body {
  background-image: radial-gradient(circle at 10% 15%, rgba(129,199,132,.45) 0 52px, transparent 53px),
                    radial-gradient(circle at 90% 20%, rgba(255,202,40,.4) 0 46px, transparent 47px),
                    radial-gradient(circle at 82% 84%, rgba(129,199,132,.4) 0 60px, transparent 61px);
}
html[data-theme="dark"][data-skin="jungle"] {
  --bg-solid: #121b10; --card: #1a2518; --card-hover: #212e1e;
  --text: #eaf6e4; --text-soft: #cbe0c0; --muted: #8fa786; --border: #2c3f27;
  --primary: #7ed957; --primary-dark: #a5e887; --primary-light: #1e3a1c;
  --secondary: #ffb74d; --secondary-light: #3a2c15;
}
html[data-skin="jungle"] .btn { border-radius: 20px; font-weight: 800; }
html[data-skin="jungle"] .card { border-style: solid; border-width: 2px; }
html[data-skin="jungle"] .brand strong::after { content: ' 🦁'; }

/* ================= ۴) دخترانهٔ گل‌گلی ================= */
html[data-theme="light"][data-skin="girl"] {
  --bg: linear-gradient(140deg, #fff5f9 0%, #ffe9f3 45%, #f3eaff 100%);
  --bg-solid: #fff6fa;
  --card: #fffdfd;
  --card-hover: #fff2f8;
  --text: #3d1f31;
  --text-soft: #6a4257;
  --muted: #9a7285;
  --border: #f4cfe0;
  --primary: #db2777;
  --primary-dark: #a91a5c;
  --primary-light: #ffdfec;
  --secondary: #9333ea;
  --secondary-light: #f0e2ff;
  --success: #059669;
  --success-light: #d6f5e8;
  --warn: #ea8c00;
  --warn-light: #fdeccd;
  --danger: #e11d48;
  --danger-light: #ffe2e8;
  --info: #6366f1;
  --info-light: #e5e6ff;
  --gradient-1: linear-gradient(135deg, #e84393 0%, #a29bfe 100%);
  --gradient-2: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  --gradient-4: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  --radius: 20px;
}
html[data-theme="light"][data-skin="girl"] body {
  background-image: radial-gradient(circle at 8% 12%, #ffe3f0 0 60px, transparent 61px),
                    radial-gradient(circle at 92% 22%, #ece0ff 0 74px, transparent 75px),
                    radial-gradient(circle at 78% 88%, #ffe9f4 0 66px, transparent 67px);
}
html[data-theme="dark"][data-skin="girl"] {
  --bg-solid: #241420; --card: #2d1a28; --card-hover: #371f31;
  --text: #fde8f2; --text-soft: #e8c8da; --muted: #ad88a0; --border: #4d2a42;
  --primary: #ff7ab8; --primary-dark: #ff9dcb; --primary-light: #46223a;
  --secondary: #c39bff; --secondary-light: #322150;
}
html[data-skin="girl"] .brand strong::after { content: ' 🌸'; }
html[data-skin="girl"] .btn { border-radius: 16px; }

/* ================= ۵) پسرانهٔ کهکشانی ================= */
html[data-theme="light"][data-skin="boy"] {
  --bg: linear-gradient(150deg, #eef6ff 0%, #e2f4ff 50%, #eafffb 100%);
  --bg-solid: #f0f7ff;
  --card: #fdfeff;
  --card-hover: #f2f9ff;
  --text: #10243a;
  --text-soft: #3b5a78;
  --muted: #6b8299;
  --border: #cfe3f5;
  --primary: #0284c7;
  --primary-dark: #075985;
  --primary-light: #d8ecfb;
  --secondary: #0891b2;
  --secondary-light: #d3f4fa;
  --success: #059669;
  --success-light: #d5f5e8;
  --warn: #d97706;
  --warn-light: #fdeecd;
  --danger: #dc2626;
  --danger-light: #ffe1e1;
  --info: #2563eb;
  --info-light: #dfe9ff;
  --gradient-1: linear-gradient(135deg, #0984e3 0%, #00cec9 100%);
  --gradient-2: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
  --gradient-4: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --radius: 14px;
}
html[data-theme="light"][data-skin="boy"] body {
  background-image: radial-gradient(#cfe6fb 2px, transparent 2.5px), radial-gradient(#d7f3f7 2px, transparent 2.5px);
  background-size: 60px 60px, 60px 60px;
  background-position: 0 0, 30px 30px;
}
html[data-theme="dark"][data-skin="boy"] {
  --bg-solid: #0d1620; --card: #14202c; --card-hover: #1a2836;
  --text: #e6f1fb; --text-soft: #c1d6e8; --muted: #7f9bb3; --border: #26394c;
  --primary: #4bb3f0; --primary-dark: #7ccbf7; --primary-light: #1a3348;
  --secondary: #38d9d0; --secondary-light: #123a3a;
}
html[data-skin="boy"] .brand strong::after { content: ' 🚀'; }

/* ================= ۶) نوجوان نئون (پایهٔ ۵ و ۶) ================= */
html[data-skin="teen"] {
  --bg: linear-gradient(140deg, #12131c 0%, #191a2b 55%, #12202a 100%);
  --bg-solid: #12131c;
  --card: #1a1b29;
  --card-hover: #212336;
  --text: #eef0ff;
  --text-soft: #c3c6e4;
  --muted: #8388ab;
  --border: #2b2d44;
  --primary: #a78bfa;
  --primary-dark: #c4b5fd;
  --primary-light: #2a2350;
  --secondary: #22d3ee;
  --secondary-light: #10323c;
  --success: #00e5a0;
  --success-light: #0f3a2e;
  --warn: #fbbf24;
  --warn-light: #3a2e14;
  --danger: #ff6b81;
  --danger-light: #3d1a22;
  --info: #60a5fa;
  --info-light: #16283f;
  --gradient-1: linear-gradient(135deg, #7c4dff 0%, #00e5a0 100%);
  --gradient-2: linear-gradient(135deg, #ff5f9e 0%, #7c4dff 100%);
  --gradient-3: linear-gradient(135deg, #22d3ee 0%, #7c4dff 100%);
  --gradient-4: linear-gradient(135deg, #00e5a0 0%, #22d3ee 100%);
  --gradient-5: linear-gradient(135deg, #fbbf24 0%, #ff5f9e 100%);
  --gradient-6: linear-gradient(135deg, #12131c 0%, #7c4dff 100%);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.45);
  --shadow: 0 8px 26px rgba(0,0,0,.5);
  --shadow-lg: 0 14px 40px rgba(124,77,255,.28);
  --radius: 12px;
  --radius-sm: 8px;
}
html[data-skin="teen"] body {
  background-image: radial-gradient(circle at 15% 10%, rgba(124,77,255,.18) 0 120px, transparent 121px),
                    radial-gradient(circle at 85% 80%, rgba(0,229,160,.14) 0 140px, transparent 141px);
}
html[data-skin="teen"] .topbar { background: rgba(20,21,34,.92); }
html[data-skin="teen"] .btn.primary,
html[data-skin="teen"] .btn.secondary { box-shadow: 0 0 18px rgba(124,77,255,.35); }
html[data-skin="teen"] .card:hover { box-shadow: 0 0 0 1px var(--primary), 0 12px 30px rgba(0,0,0,.5); }
html[data-skin="teen"] h1, html[data-skin="teen"] h2 { letter-spacing: -.3px; }
html[data-skin="teen"] .grade-num { text-shadow: 0 0 22px rgba(124,77,255,.5); }
html[data-theme="light"][data-skin="teen"] .worksheet-paper { border-color: var(--border); }

/* ================= ۷) طبیعت آرام ================= */
html[data-theme="light"][data-skin="nature"] {
  --bg: linear-gradient(150deg, #f6fbf3 0%, #eef7e6 55%, #f4fbf8 100%);
  --bg-solid: #f6fbf3;
  --card: #fdfffb;
  --card-hover: #f4fbef;
  --text: #1f3320;
  --text-soft: #46603f;
  --muted: #7a9070;
  --border: #d6e8cb;
  --primary: #2f9e44;
  --primary-dark: #237032;
  --primary-light: #e0f3da;
  --secondary: #a9c46c;
  --secondary-light: #f0f6e2;
  --success: #2b8a3e;
  --success-light: #ddf2dd;
  --warn: #e08b00;
  --warn-light: #fdf0d6;
  --danger: #c92a2a;
  --danger-light: #ffe3e3;
  --info: #1971c2;
  --info-light: #e0eefb;
  --gradient-1: linear-gradient(135deg, #2f9e44 0%, #a9c46c 100%);
  --gradient-2: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
  --gradient-4: linear-gradient(135deg, #43e97b 0%, #a9c46c 100%);
  --radius: 18px;
}
html[data-theme="dark"][data-skin="nature"] {
  --bg-solid: #121a12; --card: #182218; --card-hover: #1e2a1e;
  --text: #eaf4e6; --text-soft: #c8dcc0; --muted: #87a07e; --border: #2b3a2a;
  --primary: #69db7c; --primary-dark: #8ce99a; --primary-light: #1d3a22;
  --secondary: #c0d98a; --secondary-light: #2c3a1c;
}

/* ================= ۷٫۵) زمستانی برفی ================= */
html[data-theme="light"][data-skin="winter"] {
  --bg: linear-gradient(160deg, #f0f7ff 0%, #e3f0ff 50%, #f5faff 100%);
  --bg-solid: #f0f7ff;
  --card: #fdfeff;
  --card-hover: #f3f9ff;
  --text: #16324f;
  --text-soft: #3d5a78;
  --muted: #7d94ad;
  --border: #cfe3f7;
  --primary: #3a86ff;
  --primary-dark: #1f5fd0;
  --primary-light: #dcebff;
  --secondary: #64dfdf;
  --secondary-light: #d8f7f7;
  --success: #2f9e77;
  --success-light: #ddf3ea;
  --warn: #f59e0b;
  --warn-light: #fdf0d0;
  --danger: #e63946;
  --danger-light: #ffe3e5;
  --info: #4361ee;
  --info-light: #e2e8ff;
  --gradient-1: linear-gradient(135deg, #3a86ff 0%, #a0c4ff 100%);
  --gradient-2: linear-gradient(135deg, #64dfdf 0%, #a0c4ff 100%);
  --gradient-4: linear-gradient(135deg, #c8f7ff 0%, #a0c4ff 100%);
  --radius: 18px;
}
html[data-theme="light"][data-skin="winter"] body {
  background-image: radial-gradient(#cfe4ff 2.5px, transparent 2.6px), radial-gradient(#dff4ff 2.5px, transparent 2.6px);
  background-size: 52px 52px, 52px 52px;
  background-position: 0 0, 26px 26px;
}
html[data-theme="dark"][data-skin="winter"] {
  --bg-solid: #0e1622; --card: #14202f; --card-hover: #1a2839;
  --text: #eaf2fb; --text-soft: #c5d7ea; --muted: #85a0bd; --border: #263c55;
  --primary: #6ba6ff; --primary-dark: #9cc2ff; --primary-light: #1a3352;
  --secondary: #6ce3e3; --secondary-light: #123c40;
}
html[data-skin="winter"] .brand strong::after { content: ' ❄️'; }
html[data-skin="winter"] .card { border-width: 2px; }

/* ================= ۷٫۷۵) بهاری گل‌گلی ================= */
html[data-theme="light"][data-skin="spring"] {
  --bg: linear-gradient(160deg, #f2fff4 0%, #e9fbee 50%, #fff4f7 100%);
  --bg-solid: #f2fff4;
  --card: #fdfffd;
  --card-hover: #f2fcf5;
  --text: #1f3d2c;
  --text-soft: #46705a;
  --muted: #86a495;
  --border: #cdeeda;
  --primary: #2ec4b6;
  --primary-dark: #188a80;
  --primary-light: #dcf7f2;
  --secondary: #ff6f91;
  --secondary-light: #ffe4ec;
  --success: #3fa34d;
  --success-light: #e0f5e3;
  --warn: #f5a623;
  --warn-light: #fdf1d6;
  --danger: #e6395f;
  --danger-light: #ffe4ea;
  --info: #38b6ff;
  --info-light: #e0f3ff;
  --gradient-1: linear-gradient(135deg, #2ec4b6 0%, #ff6f91 100%);
  --gradient-2: linear-gradient(135deg, #a8e063 0%, #ff6f91 100%);
  --gradient-4: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
  --radius: 22px;
}
html[data-theme="light"][data-skin="spring"] body {
  background-image: radial-gradient(circle at 10% 14%, #ffe4ec 0 60px, transparent 61px),
                    radial-gradient(circle at 90% 18%, #dff7e8 0 70px, transparent 71px),
                    radial-gradient(circle at 80% 86%, #fff0d6 0 56px, transparent 57px);
}
html[data-theme="dark"][data-skin="spring"] {
  --bg-solid: #101d15; --card: #17241b; --card-hover: #1d2c22;
  --text: #ecf9ef; --text-soft: #cae3d1; --muted: #8cac97; --border: #29402f;
  --primary: #4fd8cb; --primary-dark: #8aede3; --primary-light: #163a32;
  --secondary: #ff8fae; --secondary-light: #3d2130;
}
html[data-skin="spring"] .brand strong::after { content: ' 🌷'; }
html[data-skin="spring"] .card { border-width: 2px; }

/* ================= ۸) معلم / مدیر (حرفه‌ای و فشرده) ================= */
html[data-theme="light"][data-skin="teacher"] {
  --bg: linear-gradient(180deg, #f7f8fa 0%, #eef1f6 100%);
  --bg-solid: #f7f8fa;
  --card: #ffffff;
  --card-hover: #fafbfd;
  --text: #14213d;
  --text-soft: #3f4d68;
  --muted: #7b879c;
  --border: #dbe1ea;
  --primary: #1d3557;
  --primary-dark: #12233c;
  --primary-light: #e2e9f3;
  --secondary: #b58900;
  --secondary-light: #fdf3d7;
  --success: #2a9d8f;
  --success-light: #dcf3f0;
  --warn: #e9c46a;
  --warn-light: #fdf6e3;
  --danger: #c1121f;
  --danger-light: #fde3e5;
  --info: #457b9d;
  --info-light: #e4eef5;
  --gradient-1: linear-gradient(135deg, #1d3557 0%, #457b9d 100%);
  --gradient-2: linear-gradient(135deg, #b58900 0%, #e9c46a 100%);
  --gradient-4: linear-gradient(135deg, #2a9d8f 0%, #8ac926 100%);
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 4px rgba(20,33,61,.06);
  --shadow: 0 4px 14px rgba(20,33,61,.09);
}
html[data-theme="dark"][data-skin="teacher"] {
  --bg-solid: #10151d; --card: #161d27; --card-hover: #1c242f;
  --text: #e8edf5; --text-soft: #c2ccdb; --muted: #8291a5; --border: #26313f;
  --primary: #7aa2d8; --primary-dark: #a4c1e8; --primary-light: #1c2b3f;
  --secondary: #e9c46a; --secondary-light: #3a3220;
}
html[data-skin="teacher"] .topbar { background: linear-gradient(90deg, #1d3557, #2a4a73); }
html[data-skin="teacher"] .topbar .brand,
html[data-skin="teacher"] .topbar .nav a { color: #eaf0f8; }
html[data-skin="teacher"] .topbar .nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
html[data-skin="teacher"] .topbar .nav a.active { background: rgba(255,255,255,.2); color: #fff; }
html[data-skin="teacher"] .theme-toggle { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
html[data-theme="dark"][data-skin="teacher"] .topbar { background: linear-gradient(90deg, #10151d, #1c2735); }
html[data-skin="teacher"] h1 { font-size: 26px; }
html[data-skin="teacher"] h2 { font-size: 19px; margin-top: 22px; border-bottom-width: 2px; }
html[data-skin="teacher"] .btn { border-radius: 8px; }

/* ================= ۹) والدین (خوانا و درشت) ================= */
html[data-theme="light"][data-skin="parent"] {
  --bg: linear-gradient(180deg, #ffffff 0%, #f2fbf9 100%);
  --bg-solid: #ffffff;
  --card: #ffffff;
  --card-hover: #f7fdfb;
  --text: #0f172a;
  --text-soft: #334155;
  --muted: #5b6b7d;
  --border: #cfdbe4;
  --primary: #0f766e;
  --primary-dark: #0b5a54;
  --primary-light: #d9f2ee;
  --secondary: #b45309;
  --secondary-light: #fdecd8;
  --success: #15803d;
  --success-light: #dcf3e2;
  --warn: #b45309;
  --warn-light: #fdecd8;
  --danger: #b91c1c;
  --danger-light: #fbdfdf;
  --info: #1d4ed8;
  --info-light: #e0e9fd;
  --gradient-1: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  --gradient-2: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
  --gradient-4: linear-gradient(135deg, #15803d 0%, #4ade80 100%);
  --radius: 14px;
}
html[data-theme="dark"][data-skin="parent"] {
  --bg-solid: #0e1518; --card: #141d21; --card-hover: #1a252a;
  --text: #f1f7f8; --text-soft: #d3e0e3; --muted: #9db0b5; --border: #2b3a40;
  --primary: #4fd1c5; --primary-dark: #86e5db; --primary-light: #14352f;
  --secondary: #f6c177; --secondary-light: #3a2c17;
}
html[data-skin="parent"] body { font-size: 17px; line-height: 1.95; }
html[data-skin="parent"] h1 { font-size: 34px; }
html[data-skin="parent"] h2 { font-size: 25px; }
html[data-skin="parent"] .btn { padding: 15px 26px; font-size: 17px; }
html[data-skin="parent"] .stat strong { font-size: 30px; }
html[data-skin="parent"] input, html[data-skin="parent"] select, html[data-skin="parent"] textarea { font-size: 17px; }

/* ================= ابزارهای پوسته ================= */
/* فشرده (معلم/مدیر) */
body.skin-dense .card { padding: 16px; margin-bottom: 12px; }
body.skin-dense h1 { font-size: 25px; margin-bottom: 10px; }
body.skin-dense h2 { font-size: 19px; margin-top: 20px; margin-bottom: 12px; }
body.skin-dense .container { max-width: 1320px; }
body.skin-dense table td, body.skin-dense table th { padding: 7px 9px; }
body.skin-dense .stat { min-width: 110px; padding: 10px 12px; }
body.skin-dense .btn { padding: 9px 16px; font-size: 14px; }
body.skin-dense .nav a { padding: 6px 10px; font-size: 13.5px; }

/* درشت (کودک/والدین) */
body.skin-big .btn { padding: 14px 24px; font-size: 16.5px; }
body.skin-big .topic { padding: 22px; }
body.skin-big .grade-card { padding: 34px 20px; }
body.skin-big input, body.skin-big select, body.skin-big textarea { padding: 14px 16px; font-size: 16.5px; }
body.skin-big .chat-msg { font-size: 16px; }

/* ================= انتخاب‌گر قالب در نوار بالا ================= */
.skin-wrap { position: relative; }
.skin-toggle {
  background: var(--card); border: 1px solid var(--border); border-radius: 50%;
  width: 42px; height: 42px; cursor: pointer; font-size: 18px; transition: all .25s;
}
.skin-toggle:hover { transform: scale(1.08); background: var(--primary-light); }
.skin-pop {
  position: absolute; top: 52px; left: 0; z-index: 200; width: 300px; max-height: 72vh; overflow: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 12px; display: none;
}
.skin-pop.open { display: block; animation: msgIn .18s ease-out; }
.skin-pop h4 { margin: 2px 0 8px; font-size: 14px; color: var(--text-soft); }
.skin-item {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: right;
  padding: 8px; border-radius: 10px; border: 1px solid transparent; background: transparent;
  cursor: pointer; font-family: inherit; color: var(--text);
}
.skin-item:hover { background: var(--bg-solid); }
.skin-item.on { border-color: var(--primary); background: var(--primary-light); }
.skin-item .sw { display: flex; gap: 2px; }
.skin-item .sw i { width: 12px; height: 20px; border-radius: 4px; display: block; }
.skin-item .tx { flex: 1 1 auto; min-width: 0; }
.skin-item .tx strong { display: block; font-size: 13.5px; }
.skin-item .tx small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.skin-pop .foot { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--muted); }

/* کارت‌های انتخاب قالب در پروفایل */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
.skin-card {
  border: 2px solid var(--border); border-radius: 14px; padding: 12px; cursor: pointer;
  background: var(--card); transition: all .2s; display: block;
}
.skin-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.skin-card.on { border-color: var(--primary); background: var(--primary-light); }
.skin-card .sw { display: flex; gap: 4px; margin-bottom: 8px; }
.skin-card .sw i { flex: 1 1 0; height: 26px; border-radius: 6px; }
.skin-card strong { display: block; font-size: 14.5px; }
.skin-card small { display: block; color: var(--text-soft); font-size: 12px; line-height: 1.6; margin-top: 3px; }
.skin-card .tag { display: inline-block; margin-top: 6px; font-size: 11px; background: var(--bg-solid);
  border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; color: var(--muted); }

/* در چاپ، هیچ پوسته‌ای رنگ پس‌زمینه اضافه نکند */
@media print {
  html[data-skin] body { background: #fff !important; background-image: none !important; }
  .skin-pop, .skin-wrap { display: none !important; }
}

/* ==========================================================================
   منوی همبرگری برای موبایل (v5.3.1)
   دکمهٔ ☰ فقط در صفحه‌های باریک دیده می‌شود؛ روی میز ناپدید است.
   نوار بالا برای پین‌کردن، و فهرست به‌صورت کشویی زیر آن باز می‌شود.
   ========================================================================== */
.nav-toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  gap: 5px; transition: background .2s, transform .15s;
}
.nav-toggle:hover { background: var(--primary-light); }
.nav-toggle:active { transform: scale(.94); }
.nav-toggle span { display: block; width: 22px; height: 3px; border-radius: 3px; background: var(--text-soft); transition: transform .25s, opacity .2s, background .2s; }
.topbar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); background: var(--primary); }
.topbar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.topbar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: var(--primary); }

@media (max-width: 920px) {
  .topbar .row { flex-wrap: nowrap; }
  .topbar .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
    flex-direction: column; gap: 2px; padding: 8px 12px 12px;
    background: var(--card); border-top: 1px solid var(--border);
    border-bottom: 3px solid var(--primary);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .topbar.nav-open .nav { display: flex; animation: navDrop .16s ease-out; }
  @keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  /* رنگ‌ها را برای پس‌زمینهٔ روشنِ کشو بازنشانی می‌کنیم تا روی همهٔ قالب‌ها خوانا باشد */
  .topbar .nav a { color: var(--text) !important; padding: 13px 16px; border-radius: 10px; font-size: 15px; border: 1px solid transparent; }
  .topbar .nav a:hover, .topbar .nav a.active { background: var(--primary-light) !important; color: var(--primary-dark) !important; border-color: var(--primary); }
  .topbar .nav a.active { font-weight: 800; }
  .topbar .nav a.logout { color: var(--danger) !important; }
  .topbar .nav a.logout:hover { background: var(--danger-light) !important; }
  .nav-toggle { display: flex; }
}
@media (min-width: 921px) { .nav-toggle { display: none !important; } }

/* موبایل: قالب‌های انتخابی در نوار بالا، تمام‌عرضِ مفید شوند */
@media (max-width: 480px) {
  .skin-pop { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; }
  .topbar .brand strong { font-size: 18px; }
  .skin-toggle, .theme-toggle { width: 40px; height: 40px; }
}

@media print {
  .nav-toggle, .topbar.nav-open .nav { display: none !important; }
}

/* ==========================================================================
   هویت بصری هر قالب: تصویر/گرادینت/حاشیه (v5.3.1)
   تا قالب‌ها فقط «رنگ» عوض نکنند؛ هر کدام حال‌وهوای تصویری و حاشیهٔ مخصوص
   خودش را دارد. کلاسیک (پیش‌فرضِ تمیز) عمداً دست‌نخورده می‌ماند.
   ========================================================================== */

/* ---------- ۱) نوار بالای گرادینتی + متن سفید (کودک، آبنباتی، دختر، پسر، طبیعت، والدین) ---------- */
html[data-skin="kid"] .topbar,
html[data-skin="candy"] .topbar,
html[data-skin="jungle"] .topbar,
html[data-skin="girl"] .topbar,
html[data-skin="boy"] .topbar,
html[data-skin="nature"] .topbar,
html[data-skin="winter"] .topbar,
html[data-skin="spring"] .topbar,
html[data-skin="parent"] .topbar {
  background: var(--gradient-1);
  border-bottom: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
html[data-skin="kid"] .topbar .brand, html[data-skin="kid"] .topbar .brand strong,
html[data-skin="candy"] .topbar .brand, html[data-skin="candy"] .topbar .brand strong,
html[data-skin="jungle"] .topbar .brand, html[data-skin="jungle"] .topbar .brand strong,
html[data-skin="girl"] .topbar .brand, html[data-skin="girl"] .topbar .brand strong,
html[data-skin="boy"] .topbar .brand, html[data-skin="boy"] .topbar .brand strong,
html[data-skin="nature"] .topbar .brand, html[data-skin="nature"] .topbar .brand strong,
html[data-skin="winter"] .topbar .brand, html[data-skin="winter"] .topbar .brand strong,
html[data-skin="spring"] .topbar .brand, html[data-skin="spring"] .topbar .brand strong,
html[data-skin="parent"] .topbar .brand, html[data-skin="parent"] .topbar .brand strong { color: #fff; }
html[data-skin="kid"] .topbar .nav a,
html[data-skin="candy"] .topbar .nav a,
html[data-skin="jungle"] .topbar .nav a,
html[data-skin="girl"] .topbar .nav a,
html[data-skin="boy"] .topbar .nav a,
html[data-skin="nature"] .topbar .nav a,
html[data-skin="winter"] .topbar .nav a,
html[data-skin="spring"] .topbar .nav a,
html[data-skin="parent"] .topbar .nav a { color: rgba(255,255,255,.93); }
html[data-skin="kid"] .topbar .nav a:hover,
html[data-skin="candy"] .topbar .nav a:hover,
html[data-skin="jungle"] .topbar .nav a:hover,
html[data-skin="girl"] .topbar .nav a:hover,
html[data-skin="boy"] .topbar .nav a:hover,
html[data-skin="nature"] .topbar .nav a:hover,
html[data-skin="winter"] .topbar .nav a:hover,
html[data-skin="spring"] .topbar .nav a:hover,
html[data-skin="kid"] .topbar .nav a.active,
html[data-skin="candy"] .topbar .nav a.active,
html[data-skin="jungle"] .topbar .nav a.active,
html[data-skin="girl"] .topbar .nav a.active,
html[data-skin="boy"] .topbar .nav a.active,
html[data-skin="nature"] .topbar .nav a.active,
html[data-skin="winter"] .topbar .nav a.active,
html[data-skin="spring"] .topbar .nav a.active,
html[data-skin="parent"] .topbar .nav a.active { background: rgba(255,255,255,.22); color: #fff; }
html[data-skin="kid"] .theme-toggle, html[data-skin="kid"] .skin-toggle, html[data-skin="kid"] .nav-toggle,
html[data-skin="candy"] .theme-toggle, html[data-skin="candy"] .skin-toggle, html[data-skin="candy"] .nav-toggle,
html[data-skin="jungle"] .theme-toggle, html[data-skin="jungle"] .skin-toggle, html[data-skin="jungle"] .nav-toggle,
html[data-skin="girl"] .theme-toggle, html[data-skin="girl"] .skin-toggle, html[data-skin="girl"] .nav-toggle,
html[data-skin="boy"] .theme-toggle, html[data-skin="boy"] .skin-toggle, html[data-skin="boy"] .nav-toggle,
html[data-skin="nature"] .theme-toggle, html[data-skin="nature"] .skin-toggle, html[data-skin="nature"] .nav-toggle,
html[data-skin="winter"] .theme-toggle, html[data-skin="winter"] .skin-toggle, html[data-skin="winter"] .nav-toggle,
html[data-skin="spring"] .theme-toggle, html[data-skin="spring"] .skin-toggle, html[data-skin="spring"] .nav-toggle,
html[data-skin="parent"] .theme-toggle, html[data-skin="parent"] .skin-toggle, html[data-skin="parent"] .nav-toggle {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); color: #fff;
}
html[data-skin="kid"] .nav-toggle span,
html[data-skin="candy"] .nav-toggle span,
html[data-skin="jungle"] .nav-toggle span,
html[data-skin="girl"] .nav-toggle span,
html[data-skin="boy"] .nav-toggle span,
html[data-skin="nature"] .nav-toggle span,
html[data-skin="winter"] .nav-toggle span,
html[data-skin="spring"] .nav-toggle span,
html[data-skin="parent"] .nav-toggle span { background: #fff; }
/* در حالت کشوی موبایل، نوار بالا گرادینتی است ولی فهرست کشویی پس‌زمینهٔ روشن دارد —
   بلوک «منوی همبرگری» در همین فایل رنگ متن کشو را بازنشانی می‌کند (با !important). */

/* ---------- ۲) زیرِ عنوان‌ها یک خطِ گرادینتی (حاشیهٔ تزئینی) ---------- */
html[data-skin="kid"] h1, html[data-skin="kid"] h2,
html[data-skin="candy"] h1, html[data-skin="candy"] h2,
html[data-skin="jungle"] h1, html[data-skin="jungle"] h2,
html[data-skin="girl"] h1, html[data-skin="girl"] h2,
html[data-skin="boy"] h1, html[data-skin="boy"] h2,
html[data-skin="nature"] h1, html[data-skin="nature"] h2,
html[data-skin="winter"] h1, html[data-skin="winter"] h2,
html[data-skin="spring"] h1, html[data-skin="spring"] h2,
html[data-skin="parent"] h1, html[data-skin="parent"] h2 {
  padding-bottom: 8px;
  position: relative;
}
html[data-skin="kid"] h1::after, html[data-skin="kid"] h2::after,
html[data-skin="candy"] h1::after, html[data-skin="candy"] h2::after,
html[data-skin="jungle"] h1::after, html[data-skin="jungle"] h2::after,
html[data-skin="girl"] h1::after, html[data-skin="girl"] h2::after,
html[data-skin="boy"] h1::after, html[data-skin="boy"] h2::after,
html[data-skin="nature"] h1::after, html[data-skin="nature"] h2::after,
html[data-skin="winter"] h1::after, html[data-skin="winter"] h2::after,
html[data-skin="spring"] h1::after, html[data-skin="spring"] h2::after,
html[data-skin="parent"] h1::after, html[data-skin="parent"] h2::after {
  content: ""; display: block; height: 4px; width: 74px; margin-top: 6px;
  border-radius: 4px; background: var(--gradient-1);
}
html[data-skin="kid"] h2::after, html[data-skin="candy"] h2::after,
html[data-skin="jungle"] h2::after, html[data-skin="girl"] h2::after,
html[data-skin="boy"] h2::after, html[data-skin="nature"] h2::after,
html[data-skin="winter"] h2::after, html[data-skin="spring"] h2::after,
html[data-skin="parent"] h2::after { width: 52px; height: 3px; }

/* ---------- ۳) کارت‌های بازی‌وار: قابِ رنگیِ دور + نوار بالا ---------- */
html[data-skin="kid"] .card, html[data-skin="candy"] .card,
html[data-skin="jungle"] .card, html[data-skin="girl"] .card,
html[data-skin="boy"] .card, html[data-skin="nature"] .card,
html[data-skin="winter"] .card, html[data-skin="spring"] .card {
  border: 2px solid var(--border);
  box-shadow: 0 0 0 1px rgba(255,255,255,.4), var(--shadow-sm);
  position: relative;
}
html[data-skin="candy"] .card { border-style: dashed !important; }
/* ---------- ۴) پیش‌نمایشِ «تصویری» در انتخاب‌گر قالب ---------- */
/* پروفایل: هر کارت یک بنرِ مینیاتوری با «آسمان» و ردیفِ رنگیِ تپه‌مانند دارد */
.skin-card .sw { height: 50px; align-items: flex-end; gap: 0; margin-bottom: 9px;
  border: 1px solid rgba(127,127,127,.35); border-radius: 8px; overflow: hidden; position: relative; }
.skin-card .sw i { height: 46%; border-radius: 0; }
.skin-card .sw i:nth-child(1) { height: 56%; }
.skin-card .sw i:nth-child(2) { height: 92%; }
.skin-card .sw i:nth-child(3) { height: 70%; }
.skin-card .sw::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 52%);
  border-radius: 6px; pointer-events: none; }
/* نوار بالا: ریزبرچسبِ گرادینتیِ همان قالب */
.skin-item .sw { padding: 3px; border-radius: 7px; background: linear-gradient(160deg, rgba(0,0,0,.05), rgba(255,255,255,.5)); }
.skin-item .sw i { box-shadow: 0 0 0 1px rgba(0,0,0,.06); }

/* ==========================================================================
   پالت‌های رنگیِ قابل‌شخصی‌سازی (تُنِ قالب) — فقط در تم روشن
   ========================================================================== */
html[data-theme="light"][data-skin-tone="sunny"][data-skin] {
  --primary: #f97316; --primary-dark: #c2560a; --primary-light: #ffe8cf;
  --gradient-1: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
  --gradient-2: linear-gradient(135deg, #fb923c 0%, #facc15 100%);
}
html[data-theme="light"][data-skin-tone="ocean"][data-skin] {
  --primary: #0ea5e9; --primary-dark: #0369a1; --primary-light: #e0f2fe;
  --gradient-1: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);
  --gradient-2: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
}
html[data-theme="light"][data-skin-tone="berry"][data-skin] {
  --primary: #e11d48; --primary-dark: #9f1239; --primary-light: #ffe4e6;
  --gradient-1: linear-gradient(135deg, #e11d48 0%, #a855f7 100%);
  --gradient-2: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
}

/* ==========================================================================
   مجموعهٔ استیکرهای تشویقی (پروفایل و داشبورد)
   ========================================================================== */
.sticker-collection { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.sticker-tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 74px; padding: 8px 4px; border-radius: 12px;
  background: var(--card); border: 1.5px solid var(--border);
}
.sticker-tile .sticker-svg { width: 46px; height: 46px; }
.sticker-tile .count {
  font-size: 12px; font-weight: 800; color: var(--text-soft);
  background: var(--bg-solid); border-radius: 20px; padding: 0 8px; line-height: 1.7;
}
.sticker-tile.new { border-color: var(--warn); animation: bubblePop .4s ease-out; }
@media print { .sticker-collection { display: none !important; } }

/* ==========================================================================
   انتخاب‌گر پالت رنگ در پروفایل
   ========================================================================== */
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 10px 0; }
.palette-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 2px solid var(--border); border-radius: 14px; background: var(--card);
  cursor: pointer; font-family: inherit; text-align: right; color: var(--text); transition: all .18s;
}
.palette-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.palette-card.on { border-color: var(--primary); background: var(--primary-light); }
.palette-card .dot { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(from 180deg, #f97316, #fbbf24, #f97316); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.palette-card .dot[data-tone="ocean"] { background: conic-gradient(from 180deg, #0ea5e9, #22d3ee, #0ea5e9); }
.palette-card .dot[data-tone="berry"] { background: conic-gradient(from 180deg, #e11d48, #a855f7, #e11d48); }
.palette-card .dot[data-tone="auto"] { background: conic-gradient(from 180deg, #5b6cff, #ff6b9d, #10b981, #f59e0b, #5b6cff); }
.palette-card .tx { flex: 1 1 auto; min-width: 0; }
.palette-card .tx strong { font-size: 13.5px; }
@media print { .palette-grid { display: none !important; } }