/* ─────────────────────────────────────────────────────────────────────
   تم «بازی‌گونه» برای دانش‌آموزان ~۱۲ ساله: رنگ‌های شاد، دکمه‌های
   سه‌بعدیِ قابل‌فشردن، قاب‌های ضخیمِ گرد، کاشی‌های رنگیِ آمار و پس‌زمینهٔ
   نقش‌دار. فقط روی توکن‌ها و کلاس‌های مشترک اعمال می‌شود (بدون تغییر منطق)؛
   برای برگرداندن طراحی قبلی کافی است <link> این فایل از index.html حذف شود.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --cp-bg: #fff8ec;
  --cp-surface: #ffffff;
  --cp-card: #ffffff;
  --cp-card-2: #f3eeff;
  --cp-text: #2a2250;
  --cp-muted: #6b6490;
  --cp-line: #ebe4fb;

  --cp-accent: #7048e8;
  --cp-accent-hi: #8a68ff;
  --cp-accent-soft: #eee8ff;
  --cp-accent-ink: #3b2a8c;
  --cp-accent-600: #5f3bd6;
  --cp-accent-700: #4f2fc4;

  --cp-ok: #3f9a05;
  --cp-ok-soft: #e3f8d0;
  --cp-warn: #c96f00;
  --cp-warn-soft: #fff0cc;
  --cp-err: #e2394a;
  --cp-err-soft: #ffe2e6;
  --cp-sage: #ff9600;

  --kid-press: #4f2fc4;
  --kid-edge: #e6defa;
  --kid-drop: #e2d9f8;

  --kid-blue: #1cb0f6;   --kid-blue-soft: #ddf3ff;   --kid-blue-deep: #1487c2;
  --kid-orange: #ff9600; --kid-orange-soft: #fff0da; --kid-orange-deep: #d67a00;
  --kid-green: #58cc02;  --kid-green-soft: #e6f9d4;  --kid-green-deep: #3f9a05;
  --kid-pink: #ff4b8b;   --kid-pink-soft: #ffe4ef;   --kid-pink-deep: #d6336f;
  --kid-yellow: #ffc800; --kid-yellow-soft: #fff6c9; --kid-yellow-deep: #c79a00;

  --shadow-sm: 0 2px 0 var(--kid-drop);
  --shadow-md: 0 4px 0 var(--kid-drop);
  --shadow-lg: 0 10px 30px rgba(80, 50, 170, .18);

  --kid-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' opacity='.22'%3E%3Cpath d='M38 34l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z' stroke='%23ffc800'/%3E%3Ccircle cx='200' cy='48' r='13' stroke='%231cb0f6'/%3E%3Cpath d='M128 128h22M139 117v22' stroke='%23ff4b8b'/%3E%3Cpath d='M196 186q11-13 22 0t22 0' stroke='%2358cc02'/%3E%3Crect x='40' y='190' width='24' height='24' rx='7' stroke='%237048e8' transform='rotate(15 52 202)'/%3E%3Cpath d='M112 244l11-20 11 20z' stroke='%231cb0f6'/%3E%3Cpath d='M244 112l4 8 9 1-6 6 1 9-8-4-8 4 1-9-6-6 9-1z' stroke='%23ff9600'/%3E%3C/g%3E%3Cg opacity='.22'%3E%3Ccircle cx='250' cy='250' r='6' fill='%23ff9600'/%3E%3Ccircle cx='90' cy='90' r='5' fill='%23ff4b8b'/%3E%3Ccircle cx='24' cy='140' r='4' fill='%2358cc02'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  --cp-bg: #17153a;
  --cp-surface: #211e4c;
  --cp-card: #242152;
  --cp-card-2: #2e2a63;
  --cp-text: #f6f3ff;
  --cp-muted: #b5aedb;
  --cp-line: #363278;

  --cp-accent: #8f73ff;
  --cp-accent-hi: #a891ff;
  --cp-accent-soft: #332d73;
  --cp-accent-ink: #ebe6ff;
  --cp-accent-600: #a891ff;
  --cp-accent-700: #5a3fd1;

  --cp-ok: #8fe35a;
  --cp-ok-soft: #22402a;
  --cp-warn: #ffc94d;
  --cp-warn-soft: #463a1e;
  --cp-err: #ff7a86;
  --cp-err-soft: #4a2230;
  --cp-sage: #ff9f2e;

  --kid-press: #3b289e;
  --kid-edge: #3a357f;
  --kid-drop: #0f0d2c;

  --kid-blue-soft: #193a5c;   --kid-blue-deep: #0b5d86;
  --kid-orange-soft: #4a3219; --kid-orange-deep: #8a4d00;
  --kid-green-soft: #203f1c;  --kid-green-deep: #2d6b04;
  --kid-pink-soft: #4a1f36;   --kid-pink-deep: #8f1f4a;
  --kid-yellow-soft: #463c14; --kid-yellow-deep: #7d6200;

  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .45);
}

/* ── پس‌زمینه: کرمیِ گرم با نقش‌های کوچکِ رنگی ── */
html, body { background-color: var(--cp-bg); }
body { background-image: var(--kid-pattern); background-attachment: fixed; }
#app { background: transparent; }
#app.login-bg {
  background: var(--kid-pattern), linear-gradient(155deg, #8a68ff 0%, #ff7eb3 55%, #ffc56b 100%);
  background-attachment: fixed;
}

/* ── کارت‌ها: سفید، قاب ضخیم، سایهٔ پایینیِ سه‌بعدی ── */
.card, .dialog, .notif-panel, .login-form {
  background: var(--cp-card);
  border: 2.5px solid var(--kid-edge);
  box-shadow: 0 5px 0 var(--kid-drop);
  border-radius: 26px;
}
.empty-state { background: var(--cp-card); border: 3px dashed var(--kid-edge); border-radius: 26px; }
.dialog { border-radius: 28px; }
.login-form { position: relative; overflow: hidden; border: 3px solid #fff; box-shadow: 0 10px 0 rgba(70, 30, 150, .25), 0 20px 50px rgba(70, 30, 150, .25); }
.login-form::before {
  content: ""; position: absolute; top: 0; right: 0; left: 0; height: 8px;
  background: linear-gradient(90deg, var(--kid-blue), var(--kid-green), var(--kid-yellow), var(--kid-orange), var(--kid-pink), var(--cp-accent));
}

/* ── کاشی‌های آمار: هرکدام یک رنگ ── */
.stat-card {
  border-radius: 22px; border: 2.5px solid var(--kid-edge);
  box-shadow: 0 5px 0 var(--kid-drop);
  transition: transform .15s ease;
}
.stat-card:hover { transform: translateY(-3px) rotate(-.4deg); }
.stat-grid > .stat-card:nth-child(5n+1) { background: var(--kid-blue-soft);   border-color: var(--kid-blue);   box-shadow: 0 5px 0 var(--kid-blue-deep); }
.stat-grid > .stat-card:nth-child(5n+2) { background: var(--kid-orange-soft); border-color: var(--kid-orange); box-shadow: 0 5px 0 var(--kid-orange-deep); }
.stat-grid > .stat-card:nth-child(5n+3) { background: var(--kid-green-soft);  border-color: var(--kid-green);  box-shadow: 0 5px 0 var(--kid-green-deep); }
.stat-grid > .stat-card:nth-child(5n+4) { background: var(--kid-pink-soft);   border-color: var(--kid-pink);   box-shadow: 0 5px 0 var(--kid-pink-deep); }
.stat-grid > .stat-card:nth-child(5n+5) { background: var(--kid-yellow-soft); border-color: var(--kid-yellow); box-shadow: 0 5px 0 var(--kid-yellow-deep); }
.stat-card .k { font-weight: 700; }

/* ── ساختار ── */
.sidebar { background: var(--cp-surface); border-left: 2.5px solid var(--kid-edge); }
.topbar { background: var(--cp-surface); border-bottom: 2.5px solid var(--kid-edge); }
.topbar .title { color: var(--cp-accent-ink); }
.bottom-nav { background: var(--cp-surface); border-top: 2.5px solid var(--kid-edge); }
.bn-item { font-weight: 600; }
.bn-item.on { color: var(--cp-accent); font-weight: 800; }
.drawer, .notif-panel { background: var(--cp-surface); }

.nav-item { border-radius: 16px; font-weight: 600; margin-bottom: 2px; transition: background .12s ease, transform .12s ease; }
.nav-item:not(.on):hover { background: var(--cp-accent-soft); transform: translateX(-3px); }
.nav-item.on { background: var(--cp-accent); color: #fff; box-shadow: 0 4px 0 var(--kid-press); }

.user-pill { background: var(--cp-card); border: 2.5px solid var(--kid-edge); box-shadow: 0 3px 0 var(--kid-drop); font-weight: 600; }
.section-title { color: var(--cp-accent-ink); }
.section-title::before { content: "★"; color: var(--kid-yellow); margin-inline-end: 6px; font-family: var(--cp-body); font-size: .85em; }

/* ── دکمه‌های سه‌بعدی: با فشار واقعاً پایین می‌روند ── */
.btn { font-weight: 700; border-radius: 16px; transition: transform .08s ease, box-shadow .08s ease, background .12s ease; }
.btn-primary { background: var(--cp-accent); color: #fff; box-shadow: 0 4px 0 var(--kid-press); }
.btn-primary:hover:not(:disabled) { background: var(--cp-accent-hi); }
.btn-primary:active:not(:disabled) { background: var(--cp-accent); transform: translateY(3px); box-shadow: 0 1px 0 var(--kid-press); }
.btn-secondary { background: var(--cp-card); border: 2.5px solid var(--kid-edge); color: var(--cp-accent-ink); box-shadow: 0 3px 0 var(--kid-drop); }
.btn-secondary:hover:not(:disabled) { background: var(--cp-accent-soft); }
.btn-secondary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--kid-drop); }
.btn-ghost { font-weight: 700; }

.pillbtn { border: 2.5px solid var(--kid-edge); font-weight: 600; box-shadow: 0 3px 0 var(--kid-drop); background: var(--cp-card); }
.pillbtn.danger { border-color: color-mix(in srgb, var(--cp-err) 45%, transparent); background: var(--cp-err-soft); color: var(--cp-err); box-shadow: 0 3px 0 color-mix(in srgb, var(--cp-err) 35%, transparent); }

/* ── چیپ‌ها و سگمنت‌ها ── */
.chip { border: 2.5px solid var(--kid-edge); background: var(--cp-card); font-weight: 600; box-shadow: 0 3px 0 var(--kid-drop); transition: transform .08s ease; }
.chip:not(.on):hover { background: var(--cp-accent-soft); }
.chip:active { transform: translateY(2px); }
.chip.on { background: var(--cp-accent); border-color: var(--kid-press); color: #fff; box-shadow: 0 3px 0 var(--kid-press); }
.chip-row { padding-bottom: 6px; }

.seg { border: 2.5px solid var(--kid-edge); background: var(--cp-card); border-radius: 18px; padding: 3px; gap: 3px; overflow: visible; box-shadow: 0 3px 0 var(--kid-drop); }
.seg-opt { border-radius: 13px; font-weight: 600; white-space: nowrap; }
.seg-opt + .seg-opt { border-right: none; }
.seg-opt:not(.on):hover { background: var(--cp-accent-soft); }
.seg-opt.on { background: var(--cp-accent); color: #fff; box-shadow: 0 3px 0 var(--kid-press); }

/* ── فیلدها (فقط background-color، تا فلشِ select بماند) ── */
.input { background-color: var(--cp-card); border: 2.5px solid var(--kid-edge); border-radius: 16px; min-height: 46px; }
.input:hover { border-color: var(--cp-accent-hi); }
.input:focus-visible { border-color: var(--cp-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kid-yellow) 55%, transparent); }
textarea.input { border-radius: 18px; }

.tag { font-weight: 700; }
.toast { border-radius: 18px; font-weight: 700; box-shadow: 0 5px 0 rgba(0, 0, 0, .18), var(--shadow-lg); }

/* ── نوار پیشرفت: راه‌راهِ شاد ── */
.progress-track { height: 10px; background: var(--cp-card-2); }
.progress-fill { background: repeating-linear-gradient(-45deg, var(--kid-green) 0 10px, #74dd24 10px 20px); }
.skeleton { background: linear-gradient(90deg, var(--cp-card-2) 25%, var(--cp-accent-soft) 50%, var(--cp-card-2) 75%); background-size: 200% 100%; }

.row-item { border-top: 2px dashed var(--kid-edge); }
.row-item:first-child { border-top: none; }
.empty-state .ico { background: var(--cp-accent-soft); color: var(--cp-accent); }

@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .nav-item, .stat-card { transition: none; }
  .stat-card:hover, .nav-item:not(.on):hover { transform: none; }
}