/* =====================================================================
   سبزشهر - استایل اصلی
   از خاصیت‌های منطقی (inline-start / inline-end) استفاده شده تا
   نسخه‌ی انگلیسی (LTR) بدون تغییر درست نمایش داده شود.
   ===================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--zy-font);
  background: var(--zy-bg);
  color: var(--zy-text);
  font-feature-settings: "ss01";
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--zy-primary); text-decoration: none; }
a:hover { color: var(--zy-primary-hover); }
img { max-width: 100%; }
.text-muted, .form-text { color: var(--zy-muted) !important; }
.fw-black { font-weight: 900; }
.fs-7 { font-size: .85rem; }
.fs-8 { font-size: .75rem; }

/* ---------------- دکمه‌ها و فرم ---------------- */
.btn { border-radius: 14px; font-weight: 600; padding: .6rem 1.2rem; }
.btn-sm { border-radius: 10px; padding: .35rem .8rem; }
.btn-primary, .btn-success {
  --bs-btn-bg: var(--zy-primary); --bs-btn-border-color: var(--zy-primary);
  --bs-btn-hover-bg: var(--zy-primary-hover); --bs-btn-hover-border-color: var(--zy-primary-hover);
  --bs-btn-active-bg: var(--zy-primary-hover); --bs-btn-disabled-bg: var(--zy-primary); --bs-btn-disabled-border-color: var(--zy-primary);
  box-shadow: 0 6px 16px rgba(42, 157, 75, .25);
}
.btn-outline-primary {
  --bs-btn-color: var(--zy-primary); --bs-btn-border-color: var(--zy-primary);
  --bs-btn-hover-bg: var(--zy-primary); --bs-btn-hover-border-color: var(--zy-primary);
  --bs-btn-active-bg: var(--zy-primary-hover);
}
.btn-soft { background: var(--zy-primary-soft); color: var(--zy-primary); border: 0; }
.btn-soft:hover { background: var(--zy-primary); color: #fff; }
.btn-white { background: var(--zy-surface); color: var(--zy-text); border: 1px solid var(--zy-border); }
.btn-white:hover { border-color: var(--zy-primary); color: var(--zy-primary); }

.form-control, .form-select {
  border-radius: 14px; border-color: var(--zy-border); padding: .7rem 1rem;
  background-color: var(--zy-surface); color: var(--zy-text);
}
.form-control:focus, .form-select:focus { border-color: var(--zy-primary); box-shadow: 0 0 0 .2rem rgba(42, 157, 75, .15); background-color: var(--zy-surface); color: var(--zy-text); }
.form-label, .control-label { font-weight: 600; margin-bottom: .4rem; }
.form-check-input:checked { background-color: var(--zy-primary); border-color: var(--zy-primary); }
.input-icon { position: relative; }
.input-icon > i { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--zy-primary-soft); color: var(--zy-primary); display: grid; place-items: center; pointer-events: none; }
.input-icon .form-control { padding-inline-end: 3.6rem; height: 56px; border-radius: 18px; }
.invalid-feedback, .help-block-error { color: var(--zy-danger); font-size: .82rem; }

/* ---------------- کارت‌ها ---------------- */
.zy-card {
  background: var(--zy-surface); border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius); box-shadow: var(--zy-shadow-sm); padding: 1.25rem;
}
.zy-card-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.zy-card-title .bi { color: var(--zy-primary); }
.zy-section-title { display: flex; justify-content: space-between; align-items: center; margin: 1.6rem 0 .9rem; }
.zy-section-title h2, .zy-section-title h3 { font-size: 1.1rem; font-weight: 800; margin: 0; display: flex; gap: .5rem; align-items: center; }
.zy-section-title a { font-size: .85rem; font-weight: 600; }

.zy-soft { background: var(--zy-primary-softer); border: 1px solid var(--zy-primary-soft); }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; background: var(--zy-primary-soft); color: var(--zy-primary);
}
.chip-gray { background: var(--zy-surface-2); color: var(--zy-muted); border: 1px solid var(--zy-border); }
.chip-warning { background: #fff4dc; color: #b26b00; }
.chip-danger { background: #fde8e8; color: #c62828; }
.chip-info { background: #e6f0ff; color: #1d4ed8; }
.chip-purple { background: #f1ebff; color: #6d28d9; }
:root[data-theme="dark"] .chip-warning { background: #3a2b0c; color: #fbbf24; }
:root[data-theme="dark"] .chip-danger { background: #3b1414; color: #f87171; }
:root[data-theme="dark"] .chip-info { background: #10213f; color: #93c5fd; }
:root[data-theme="dark"] .chip-purple { background: #24183f; color: #c4b5fd; }

/* آیکون رنگی گرد */
.ico {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.5rem; background: var(--zy-primary-soft); color: var(--zy-primary); flex-shrink: 0;
}
.ico-sm { width: 40px; height: 40px; font-size: 1.15rem; border-radius: 12px; }
.ico-lg { width: 64px; height: 64px; font-size: 1.9rem; border-radius: 20px; }
.ico-orange { background: #fff1e6; color: #f97316; }
.ico-blue { background: #e7f0ff; color: #2563eb; }
.ico-purple { background: #f1ebff; color: #7c3aed; }
.ico-red { background: #ffe9e9; color: #ef4444; }
.ico-yellow { background: #fff7d6; color: #d97706; }
:root[data-theme="dark"] .ico-orange { background: #3a2210; }
:root[data-theme="dark"] .ico-blue { background: #11233f; }
:root[data-theme="dark"] .ico-purple { background: #241843; }
:root[data-theme="dark"] .ico-red { background: #3b1717; }
:root[data-theme="dark"] .ico-yellow { background: #3a2f0c; }

/* کارت آمار */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; }
.stat {
  background: var(--zy-surface); border: 1px solid var(--zy-border); border-radius: var(--zy-radius-sm);
  padding: 1rem .75rem; text-align: center; box-shadow: var(--zy-shadow-sm);
}
.stat .ico { margin: 0 auto .5rem; }
.stat b { display: block; font-size: 1.35rem; font-weight: 900; }
.stat span { font-size: .8rem; color: var(--zy-muted); }

/* نوار پیشرفت */
.zy-progress { height: 10px; border-radius: 99px; background: var(--zy-primary-soft); overflow: hidden; }
.zy-progress > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--zy-accent), var(--zy-primary)); transition: width .4s; }

/* ---------------- هدر سایت ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--zy-surface) 92%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--zy-border);
}
.site-header .navbar { padding: .55rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--zy-text); }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand b { display: block; font-size: 1.25rem; font-weight: 900; color: var(--zy-primary); line-height: 1.1; }
.brand small { display: block; font-size: .72rem; color: var(--zy-muted); }
.site-header .nav-link { font-weight: 600; color: var(--zy-text); padding: .5rem .9rem !important; border-radius: 12px; }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--zy-primary); background: var(--zy-primary-soft); }
.header-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: var(--zy-surface); border: 1px solid var(--zy-border); color: var(--zy-text); box-shadow: var(--zy-shadow-sm);
}
.icon-btn:hover { color: var(--zy-primary); border-color: var(--zy-primary); }
.icon-btn .dot { position: absolute; top: 8px; inset-inline-end: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--zy-danger); }
.theme-toggle .bi-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .bi-sun { display: inline; }
:root[data-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }

/* منوی همبرگری موبایل */
.offcanvas { background: var(--zy-surface); color: var(--zy-text); }
.offcanvas .nav-link { padding: .8rem 1rem; border-radius: 14px; color: var(--zy-text); font-weight: 600; display: flex; gap: .7rem; align-items: center; }
.offcanvas .nav-link .bi { color: var(--zy-primary); font-size: 1.2rem; }
.offcanvas .nav-link:hover { background: var(--zy-primary-soft); }

/* ---------------- اسلایدر / Hero ---------------- */
.hero {
  position: relative; border-radius: 0 0 36px 36px; overflow: hidden;
  background: linear-gradient(180deg, #bfe3f7 0%, #e6f4fb 100%);
}
.hero .carousel-item { height: clamp(380px, 56vw, 560px); }
.hero .carousel-item img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.hero-caption {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; padding: 2.2rem 1rem; background: linear-gradient(180deg, rgba(232, 246, 252, .92) 0%, rgba(232, 246, 252, .55) 32%, transparent 55%);
}
.hero-caption h1 { font-weight: 900; font-size: clamp(1.6rem, 4.5vw, 2.8rem); color: #10341f; }
.hero-caption h1 .bi { color: var(--zy-primary); }
.hero-caption p { color: #33493b; font-size: clamp(.95rem, 2.2vw, 1.15rem); max-width: 560px; }
.hero .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; background: var(--zy-primary); }
.hero-stats { margin-top: -3.2rem; position: relative; z-index: 3; }
.hero-stats .stat-grid { background: var(--zy-surface); border-radius: 26px; padding: 1rem; box-shadow: var(--zy-shadow); }
.hero-stats .stat { box-shadow: none; }

/* ---------------- کارت خبر ---------------- */
.news-item { display: flex; gap: 1rem; align-items: center; padding: .8rem; border-radius: 16px; border: 1px solid var(--zy-border); background: var(--zy-surface); margin-bottom: .7rem; color: var(--zy-text); transition: .2s; }
.news-item:hover { border-color: var(--zy-primary); color: var(--zy-text); transform: translateY(-2px); }
.news-item img { width: 92px; height: 72px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.news-item h4 { font-size: .98rem; font-weight: 800; margin: 0 0 .3rem; }
.news-item p { font-size: .82rem; color: var(--zy-muted); margin: 0; }
.news-item time { font-size: .75rem; color: var(--zy-muted); white-space: nowrap; margin-inline-start: auto; align-self: flex-start; }
.news-card { border-radius: var(--zy-radius); overflow: hidden; background: var(--zy-surface); border: 1px solid var(--zy-border); height: 100%; display: flex; flex-direction: column; color: var(--zy-text); }
.news-card:hover { color: var(--zy-text); box-shadow: var(--zy-shadow); }
.news-card img { height: 170px; object-fit: cover; width: 100%; }
.news-card .body { padding: 1rem; }
.news-card h4 { font-size: 1rem; font-weight: 800; }

/* ---------------- کارت درس ---------------- */
.course-card { background: var(--zy-surface); border: 1px solid var(--zy-border); border-radius: var(--zy-radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; color: var(--zy-text); box-shadow: var(--zy-shadow-sm); transition: .2s; }
.course-card:hover { transform: translateY(-3px); color: var(--zy-text); box-shadow: var(--zy-shadow); }
.course-card .thumb { position: relative; height: 140px; background: var(--zy-primary-soft); }
.course-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-card .thumb .pct { position: absolute; top: 10px; inset-inline-end: 10px; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--zy-primary); font-weight: 800; font-size: .8rem; display: grid; place-items: center; box-shadow: var(--zy-shadow-sm); border: 3px solid var(--zy-primary); }
.course-card .body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.course-card h4 { font-size: .98rem; font-weight: 800; margin: 0; }
.featured {
  border-radius: 26px; overflow: hidden; background: linear-gradient(135deg, #e9f7ef 0%, #f6fbf2 100%);
  border: 1px solid var(--zy-primary-soft); display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; min-height: 260px;
}
:root[data-theme="dark"] .featured { background: linear-gradient(135deg, #16301f 0%, #13241a 100%); }
.featured .txt { padding: 1.6rem; }
.featured h3 { font-weight: 900; font-size: 1.5rem; }
.featured img { height: 100%; width: 100%; object-fit: cover; }

/* دسته‌ها (چیپ‌های آیکونی) */
.cat-row { display: flex; gap: .7rem; overflow-x: auto; padding: .3rem .1rem .7rem; scrollbar-width: none; }
.cat-row::-webkit-scrollbar { display: none; }
.cat {
  min-width: 92px; background: var(--zy-surface); border: 1px solid var(--zy-border); border-radius: 18px;
  padding: .8rem .5rem; text-align: center; color: var(--zy-text); font-size: .82rem; font-weight: 600; box-shadow: var(--zy-shadow-sm);
}
.cat .bi { display: block; font-size: 1.7rem; margin-bottom: .3rem; }
.cat.active { border: 2px solid var(--zy-primary); background: var(--zy-primary-softer); color: var(--zy-primary); }

/* ---------------- مأموریت ---------------- */
.mission-card {
  position: relative; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #eaf7ee, #f7fcf4);
  border: 1px solid var(--zy-primary-soft); display: grid; grid-template-columns: 1.4fr 1fr; align-items: stretch; min-height: 200px; color: var(--zy-text);
}
:root[data-theme="dark"] .mission-card { background: linear-gradient(135deg, #16301f, #122219); }
.mission-card:hover { color: var(--zy-text); box-shadow: var(--zy-shadow); }
.mission-card .ribbon { position: absolute; top: 0; inset-inline-start: 0; background: var(--zy-primary); color: #fff; font-weight: 700; font-size: .8rem; padding: .4rem 1rem; border-end-end-radius: 18px; display: flex; gap: .4rem; align-items: center; }
.mission-card .txt { padding: 2.6rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.mission-card h3 { font-weight: 900; font-size: 1.15rem; margin: 0; }
.mission-card p { font-size: .88rem; color: var(--zy-muted); margin: 0; }
.mission-card img { width: 100%; height: 100%; object-fit: cover; }
.mission-row { display: flex; gap: .9rem; align-items: center; padding: .9rem; border-radius: 18px; background: var(--zy-surface); border: 1px solid var(--zy-border); margin-bottom: .7rem; color: var(--zy-text); }
.mission-row:hover { border-color: var(--zy-primary); color: var(--zy-text); }
.mission-row img { width: 74px; height: 74px; object-fit: cover; border-radius: 14px; }
.mission-row h4 { font-size: .98rem; font-weight: 800; margin: 0 0 .35rem; }

.content-step { display: flex; gap: .8rem; align-items: center; padding: .9rem; border-radius: 16px; border: 1px solid var(--zy-border); background: var(--zy-surface); margin-bottom: .6rem; color: var(--zy-text); }
.content-step:hover { color: var(--zy-text); border-color: var(--zy-primary); }
.content-step.done { background: var(--zy-primary-softer); border-color: var(--zy-primary-soft); }
.content-step .state { margin-inline-start: auto; font-size: 1.4rem; color: var(--zy-border); }
.content-step.done .state { color: var(--zy-primary); }

.video-box { border-radius: 20px; overflow: hidden; background: #000; }
.video-box video { width: 100%; display: block; max-height: 70vh; }
.article-body { font-size: 1.02rem; line-height: 2.1; }

/* امتیاز ستاره */
.stars { color: #f5b301; letter-spacing: 1px; white-space: nowrap; }
.stars .bi-star { color: #d9dfdb; }

/* ---------------- رتبه‌بندی ---------------- */
.podium { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: .8rem; align-items: end; }
.podium .p { text-align: center; border-radius: 22px; padding: 1rem .6rem; background: var(--zy-surface); border: 1px solid var(--zy-border); box-shadow: var(--zy-shadow-sm); }
.podium .p img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin-bottom: .5rem; border: 3px solid #fff; box-shadow: var(--zy-shadow-sm); }
.podium .p b { display: block; font-size: .9rem; }
.podium .p strong { display: block; font-size: 1.3rem; color: var(--zy-primary); font-weight: 900; }
.podium .p1 { background: linear-gradient(180deg, #fff8dc, #fffdf3); border-color: #f5d76e; padding-top: 1.6rem; }
.podium .p2 { background: linear-gradient(180deg, #eef2f8, #fafbfd); border-color: #c9d3e1; }
.podium .p3 { background: linear-gradient(180deg, #fbece4, #fdf8f5); border-color: #ecc1a6; }
:root[data-theme="dark"] .podium .p1, :root[data-theme="dark"] .podium .p2, :root[data-theme="dark"] .podium .p3 { background: var(--zy-surface-2); }
.medal { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--zy-primary-soft); color: var(--zy-primary); }
.medal-1 { background: #fde68a; color: #92400e; }
.medal-2 { background: #e2e8f0; color: #334155; }
.medal-3 { background: #fbcfb3; color: #9a3412; }
.rank-table thead th { background: var(--zy-dark); color: #fff; font-weight: 700; border: 0; }
.rank-table thead th:first-child { border-start-start-radius: 16px; }
.rank-table thead th:last-child { border-start-end-radius: 16px; }
.rank-table tr.me td { background: var(--zy-primary-softer); font-weight: 700; }

.levels { display: flex; justify-content: space-between; position: relative; gap: .3rem; }
.levels::before { content: ""; position: absolute; top: 26px; inset-inline: 30px; border-top: 2px dashed var(--zy-border); }
.levels .lv { position: relative; text-align: center; flex: 1; font-size: .72rem; color: var(--zy-muted); }
.levels .lv .ico { margin: 0 auto .35rem; background: var(--zy-surface); border: 2px solid var(--zy-border); color: var(--zy-muted); }
.levels .lv.reached .ico { border-color: var(--zy-primary); color: var(--zy-primary); background: var(--zy-primary-soft); }
.levels .lv.current .ico { transform: scale(1.15); box-shadow: 0 0 0 5px var(--zy-primary-soft); }
.levels .lv.current { color: var(--zy-primary); font-weight: 800; }

/* ---------------- پروفایل ---------------- */
.profile-hero { display: grid; grid-template-columns: 220px 1fr; gap: 1.2rem; align-items: center; }
.profile-hero .avatar-big { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 24px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--zy-primary-soft); color: var(--zy-primary); display: inline-grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.badge-hex { text-align: center; font-size: .75rem; }
.badge-hex img { width: 72px; height: 72px; object-fit: cover; border-radius: 18px; margin-bottom: .3rem; }
.badge-hex.locked img { filter: grayscale(1); opacity: .45; }

/* ---------------- فوتر ---------------- */
.site-footer { background: var(--zy-dark); color: #d7e8de; margin-top: 3rem; padding: 3rem 0 1.5rem; border-radius: 36px 36px 0 0; }
.site-footer h5 { color: #fff; font-weight: 800; font-size: 1rem; margin-bottom: 1rem; }
.site-footer a { color: #d7e8de; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; display: flex; gap: .5rem; }
.site-footer .bi { color: var(--zy-accent); }
.site-footer .copy { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.2rem; font-size: .82rem; color: #a9c4b3; }
.footer-logo { background: #fff; border-radius: 18px; padding: .4rem; width: 70px; height: 70px; object-fit: contain; }

/* ---------------- منوی پایین موبایل ---------------- */
.bottom-nav {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 1040; padding: 0 10px calc(10px + env(safe-area-inset-bottom));
  display: none;
}
.bottom-nav .bar {
  background: var(--zy-surface); border: 1px solid var(--zy-border); border-radius: 26px; box-shadow: 0 -4px 24px rgba(16,74,50,.12);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: 72px; padding: 0 .3rem;
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--zy-muted); font-size: .72rem; font-weight: 600; padding-bottom: 10px; }
.bottom-nav a .bi { font-size: 1.45rem; }
.bottom-nav a.active { color: var(--zy-primary); }
.bottom-nav a.center { position: relative; }
.bottom-nav a.center span.circle {
  width: 66px; height: 66px; border-radius: 50%; background: var(--zy-primary); color: #fff; display: grid; place-items: center;
  margin-top: -30px; box-shadow: 0 8px 20px rgba(42,157,75,.4), 0 0 0 6px var(--zy-surface);
}
.bottom-nav a.center span.circle .bi { font-size: 1.7rem; }
.bottom-nav a.center small { color: var(--zy-primary); }
@media (max-width: 991.98px) {
  .bottom-nav { display: block; }
  body.has-bottom-nav { padding-bottom: 100px; }
}

/* ---------------- صفحه ورود ---------------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem;
  background: linear-gradient(180deg, #e4f3fb 0%, var(--zy-bg) 45%); }
:root[data-theme="dark"] .auth-wrap { background: linear-gradient(180deg, #102318 0%, var(--zy-bg) 45%); }
.auth-box { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; background: var(--zy-surface); border-radius: 32px; overflow: hidden; box-shadow: var(--zy-shadow); }
.auth-art { background: linear-gradient(180deg, #dff1fa, #effaf2); padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; }
:root[data-theme="dark"] .auth-art { background: linear-gradient(180deg, #12291c, #0f1f16); }
.auth-art img.school { width: 100%; border-radius: 22px; }
.auth-form { padding: 2.4rem 2rem; }
.auth-form h1 { font-weight: 900; font-size: 1.6rem; display: flex; gap: .5rem; align-items: center; }
.otp-input { letter-spacing: 1.2rem; text-align: center; font-size: 1.8rem; font-weight: 800; direction: ltr; height: 64px; }
@media (max-width: 767.98px) {
  .auth-box { grid-template-columns: 1fr; }
  .auth-art { padding: 1.2rem; }
  .auth-art img.school { max-height: 180px; object-fit: cover; }
  .auth-form { padding: 1.6rem 1.2rem; }
}

/* ---------------- پنل مدیریت ---------------- */
.panel { display: flex; min-height: 100vh; }
.sidebar {
  width: 270px; background: var(--zy-dark); color: #cfe3d6; position: fixed; inset-block: 0; inset-inline-start: 0;
  display: flex; flex-direction: column; padding: 1.2rem .9rem; z-index: 1045; overflow-y: auto;
}
.sidebar .brand b { color: #fff; }
.sidebar .brand small { color: #9fc2ac; }
.sidebar .brand img { background: #fff; border-radius: 14px; padding: 3px; }
.sidebar nav { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .2rem; }
.sidebar nav a { display: flex; align-items: center; gap: .75rem; color: #cfe3d6; padding: .72rem 1rem; border-radius: 14px; font-weight: 600; font-size: .93rem; }
.sidebar nav a .bi { font-size: 1.15rem; }
.sidebar nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar nav a.active { background: var(--zy-primary); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.sidebar nav .sep { font-size: .72rem; color: #86ac95; margin: 1rem 1rem .3rem; }
.sidebar nav a .badge { margin-inline-start: auto; }
.sidebar .logout { margin-top: auto; background: rgba(255,255,255,.06); }
.panel-main { flex: 1; margin-inline-start: 270px; min-width: 0; }
.topbar {
  background: var(--zy-surface); border-bottom: 1px solid var(--zy-border); padding: .75rem 1.5rem; display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 1020;
}
.topbar .today { color: var(--zy-muted); font-size: .88rem; }
.topbar .who { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
.topbar .who b { font-size: .9rem; display: block; }
.topbar .who small { font-size: .75rem; color: var(--zy-muted); }
.panel-content { padding: 1.5rem; }
.page-head { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.page-head h1 { font-size: 1.35rem; font-weight: 900; margin: 0; }
.kpi { background: var(--zy-surface); border: 1px solid var(--zy-border); border-radius: 20px; padding: 1.1rem 1.2rem; box-shadow: var(--zy-shadow-sm); height: 100%; }
.kpi .top { display: flex; justify-content: space-between; align-items: center; }
.kpi .top span { font-weight: 700; color: var(--zy-muted); font-size: .9rem; }
.kpi b { display: block; font-size: 1.9rem; font-weight: 900; margin: .6rem 0 .2rem; }
.kpi small { color: var(--zy-muted); }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(100%); transition: transform .25s; }
  [dir="ltr"] .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; }
  .panel-main { margin-inline-start: 0; }
  .panel-content { padding: 1rem; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1044; display: none; }
  .sidebar.open + .sidebar-backdrop { display: block; }
}

/* جدول‌ها و GridView */
.table { --bs-table-bg: transparent; --bs-table-color: var(--zy-text); vertical-align: middle; }
.table > :not(caption) > * > * { padding: .8rem .75rem; border-color: var(--zy-border); }
.table thead th { color: var(--zy-muted); font-size: .82rem; font-weight: 700; background: var(--zy-surface-2); white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--zy-primary-softer); }
.grid-view .summary { color: var(--zy-muted); font-size: .82rem; margin-bottom: .5rem; }
.pagination { gap: .3rem; }
.pagination .page-link, .pagination li > a, .pagination li > span { border-radius: 10px !important; border: 1px solid var(--zy-border); color: var(--zy-text); background: var(--zy-surface); padding: .35rem .75rem; display: block; }
.pagination .active .page-link, .pagination li.active > a { background: var(--zy-primary); border-color: var(--zy-primary); color: #fff; }

.alert { border-radius: 16px; border: 0; }
.alert-success { background: var(--zy-primary-soft); color: var(--zy-primary-hover); }
:root[data-theme="dark"] .alert-success { color: #86efac; }

/* اپ دانش‌آموز */
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0 .4rem; }
.app-head h1 { font-size: 1.45rem; font-weight: 900; margin: 0; display: flex; gap: .4rem; align-items: center; }
.app-head h1 .bi { color: var(--zy-primary); }
.score-pill { background: var(--zy-surface); border: 1px solid var(--zy-border); border-radius: 18px; padding: .45rem .9rem; display: flex; align-items: center; gap: .5rem; box-shadow: var(--zy-shadow-sm); }
.score-pill b { font-size: 1.1rem; font-weight: 900; }
.score-pill small { display: block; font-size: .7rem; color: var(--zy-muted); }
.app-hero { position: relative; border-radius: 28px; overflow: hidden; min-height: 260px; background: #cdeaf7; }
.app-hero img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.app-hero .over { position: relative; padding: 1.4rem; text-align: center; background: linear-gradient(180deg, rgba(232,246,252,.95) 0%, rgba(232,246,252,.6) 45%, transparent 75%); min-height: 260px; }
.app-hero h2 { font-weight: 900; color: #10341f; font-size: 1.5rem; }
.app-hero p { color: #33493b; }
.quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.quick a { background: var(--zy-surface); border: 1px solid var(--zy-border); border-radius: 18px; padding: .9rem .3rem; text-align: center; color: var(--zy-text); font-size: .8rem; font-weight: 700; box-shadow: var(--zy-shadow-sm); }
.quick a .ico { margin: 0 auto .4rem; }
@media (max-width: 575.98px) {
  .featured, .mission-card { grid-template-columns: 1fr; }
  .featured img, .mission-card img { height: 170px; order: -1; }
  .mission-card .txt { padding-top: 1.2rem; }
  .mission-card .ribbon { position: static; border-radius: 0; }
  .profile-hero { grid-template-columns: 1fr; }
  .profile-hero .avatar-big { max-width: 180px; margin: 0 auto; }
  .quick { grid-template-columns: repeat(3, 1fr); }
  .podium .p img { width: 56px; height: 56px; }
}

/* نوار نصب PWA */
.install-bar { position: fixed; bottom: 100px; inset-inline: 12px; z-index: 1050; display: none; }
.install-bar.show { display: flex; }
@media (min-width: 992px) { .install-bar { bottom: 20px; inset-inline-start: auto; width: 380px; } }

/* چاپ */
@media print { .sidebar, .topbar, .bottom-nav, .site-header, .site-footer, .btn { display: none !important; } .panel-main { margin: 0; } }