.school-shell {
  --school-primary: var(--orange, #f97316);
  --school-accent: var(--cyan, #00c8cc);
  --school-ink: #101828;
  --school-muted: #667085;
  --school-line: rgba(15, 23, 42, .09);
  --school-card: rgba(255, 255, 255, .86);
  --school-soft: #f8fafc;
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.25rem 1.25rem 6rem;
  position: relative;
}

[dir='rtl'] .school-shell {
  font-family: 'IRANYekanXFaNum', 'IRANYekanX', sans-serif;
}

.school-shell::before {
  content: "";
  position: absolute;
  inset: 1.5rem 0 auto;
  height: 260px;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 200, 204, .20), transparent 34%),
    radial-gradient(circle at 85% 10%, rgba(249, 115, 22, .20), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(248, 250, 252, .70));
  z-index: -1;
}

.narrow-shell { max-width: 820px; }

.school-heading {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding: 1.35rem;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 1.75rem;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
  backdrop-filter: blur(12px);
  position: relative;
}

.school-portal-shell::before {
  height: 330px;
  background:
    radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--school-accent) 24%, transparent), transparent 36%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--school-primary) 26%, transparent), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 245, 249, .78));
}

.school-manager-shell {
  max-width: 1360px;
}

.school-manager-shell::before {
  inset: .75rem 0 auto;
  height: 390px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .88)),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--school-accent) 30%, transparent), transparent 32%),
    radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--school-primary) 34%, transparent), transparent 30%);
}

.school-manager-hero {
  background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .80));
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
}

.school-manager-hero p,
.school-manager-hero .school-kicker {
  color: rgba(255, 255, 255, .78);
}

.school-portal-hero,
.student-profile-hero {
  overflow: hidden;
}

.school-portal-hero::after,
.student-profile-hero::after,
.school-manager-hero::after {
  content: "";
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--school-accent) 28%, transparent), transparent 68%);
  position: absolute;
  inset-inline-end: 4%;
  top: -40px;
  pointer-events: none;
}

.hero-feature-strip {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.hero-feature-strip span {
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: inherit;
  font-size: .82rem;
  font-weight: 900;
  padding: .48rem .78rem;
}

.school-kicker {
  color: var(--school-primary);
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: .04em;
}

.school-logo {
  display: block;
  max-height: 96px;
  max-width: 190px;
  object-fit: contain;
  margin: .75rem 0;
}

.school-heading h1 {
  margin: .45rem 0;
  font-size: clamp(2rem, 5vw, 3.45rem);
  letter-spacing: -.04em;
}

.school-heading p,
.class-card p,
.class-card small,
.content-row p,
.content-row small,
.muted { color: var(--school-muted); }

.school-role,
.badge {
  border: 1px solid var(--school-line);
  border-radius: 999px;
  padding: .6rem 1rem;
  color: var(--school-muted);
  background: rgba(255, 255, 255, .70);
  white-space: nowrap;
}

.badge {
  font-size: .84rem;
  font-weight: 800;
}

.school-back,
.school-card-link {
  display: inline-block;
  color: var(--school-primary);
  font-weight: 900;
  text-decoration: none;
}

.school-back { margin-bottom: 1.25rem; }
.school-card-link { margin-top: 1rem; }

.school-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: -.5rem 0 2rem;
  padding: .6rem;
  border: 1px solid var(--school-line);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 40px rgba(15, 23, 42, .05);
}

.school-tabs a {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--school-ink);
  padding: .65rem 1rem;
  text-decoration: none;
  background: rgba(255, 255, 255, .65);
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}

.school-tabs a:hover {
  border-color: color-mix(in srgb, var(--school-accent) 45%, transparent);
  color: var(--school-accent);
  transform: translateY(-1px);
}

.school-admin-tabs {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.school-admin-tablist {
  display: grid;
  gap: .65rem;
  position: sticky;
  top: 1rem;
  padding: .8rem;
  border: 1px solid var(--school-line);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .80);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .07);
  backdrop-filter: blur(12px);
}

.school-admin-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 1rem;
  color: var(--school-muted);
  cursor: pointer;
  font-weight: 900;
  padding: .85rem 1rem;
  text-align: start;
}

.school-admin-tab.active {
  background: linear-gradient(135deg, var(--school-primary), color-mix(in srgb, var(--school-primary) 72%, #fff));
  color: #111827;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--school-primary) 25%, transparent);
}

.school-admin-tabs.js-enabled .school-tab-panel { display: none; }
.school-admin-tabs.js-enabled .school-tab-panel.active { display: block; }
.school-tab-panel { min-width: 0; }

.school-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 3rem;
}

.school-portal-shell .school-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.student-profile-stats,
.manager-top-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.manager-overview-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 0;
}

.school-stats article,
.class-card,
.empty-card,
.form-card,
.class-panel {
  background: var(--school-card);
  border: 1px solid var(--school-line);
  border-radius: 1.35rem;
  padding: 1.25rem;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
  backdrop-filter: blur(10px);
}

.school-manager-shell .class-panel,
.school-manager-shell .class-card,
.school-manager-shell .school-stats article {
  border-color: rgba(148, 163, 184, .20);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
}

.school-stats article {
  background: linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .72));
}

.school-stats strong {
  display: block;
  font-size: 2.15rem;
  color: var(--school-primary);
  line-height: 1;
}

.school-stats span {
  color: var(--school-muted);
  font-size: .88rem;
}

.school-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 0 1rem;
}

.school-section-title h2,
.class-panel h2,
.class-card h3,
.content-row h3 {
  margin-top: 0;
  letter-spacing: -.02em;
}

.school-section-title span {
  color: var(--school-muted);
  font-size: .85rem;
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.class-card { transition: transform .18s ease, box-shadow .18s ease; }

.class-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(15, 23, 42, .10);
}

.feature-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.feature-tile,
.student-profile-card {
  position: relative;
  overflow: hidden;
}

.feature-tile {
  border: 1px solid var(--school-line);
  border-radius: 1.45rem;
  padding: 1.35rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .78)),
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--school-accent) 20%, transparent), transparent 34%);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
}

.feature-tile span {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .9rem;
  background: color-mix(in srgb, var(--school-primary) 18%, #fff);
  color: var(--school-primary);
  font-weight: 1000;
  margin-bottom: 1rem;
}

.feature-tile h3 {
  margin: 0 0 .5rem;
}

.feature-tile p {
  color: var(--school-muted);
  margin-bottom: 0;
}

.track-card {
  isolation: isolate;
}

.track-card::before {
  content: "";
  position: absolute;
  inset: auto -22px -32px auto;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--school-accent) 18%, transparent);
  z-index: -1;
}

.track-category {
  display: inline-block;
  border-radius: 999px;
  color: var(--school-primary);
  background: color-mix(in srgb, var(--school-primary) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--school-primary) 22%, transparent);
  font-size: .78rem;
  font-weight: 1000;
  padding: .42rem .72rem;
  margin-bottom: .85rem;
}

.track-scratch { --school-primary: #f59e0b; --school-accent: #fb7185; }
.track-python { --school-primary: #2563eb; --school-accent: #facc15; }
.track-ai { --school-primary: #7c3aed; --school-accent: #22d3ee; }
.track-robotics { --school-primary: #0f766e; --school-accent: #f97316; }
.track-languages { --school-primary: #db2777; --school-accent: #60a5fa; }
.track-game_design { --school-primary: #16a34a; --school-accent: #a855f7; }
.track-stem { --school-primary: #0891b2; --school-accent: #84cc16; }

.progress-track {
  height: .55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  overflow: hidden;
  margin-top: .75rem;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--school-primary), var(--school-accent));
}

.attendance-pill-grid {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
}

.attendance-pill {
  border: 1px solid var(--school-line);
  border-radius: 999px;
  padding: .6rem .85rem;
  background: #fff;
  color: var(--school-muted);
  font-size: .86rem;
  font-weight: 800;
}

.attendance-present { color: #166534; background: rgba(34, 197, 94, .10); border-color: rgba(34, 197, 94, .24); }
.attendance-absent { color: #991b1b; background: rgba(239, 68, 68, .10); border-color: rgba(239, 68, 68, .24); }
.attendance-late { color: #92400e; background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .28); }

.school-gallery-image {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.school-rich-text {
  color: var(--school-muted);
  line-height: 1.95;
}

.empty-card {
  grid-column: 1 / -1;
  color: var(--school-muted);
}

.class-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  border: 0;
  border-radius: 999px;
  display: inline-block;
  font-weight: 900;
  padding: .76rem 1.16rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--school-primary), color-mix(in srgb, var(--school-primary) 74%, #fff));
  color: #111827;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--school-primary) 24%, transparent);
}

.btn-secondary {
  background: color-mix(in srgb, var(--school-accent) 12%, #fff);
  color: var(--school-accent);
  border: 1px solid color-mix(in srgb, var(--school-accent) 30%, transparent);
}

.btn-primary:hover,
.btn-secondary:hover { transform: translateY(-1px); }

.class-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.content-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--school-line);
  padding: 1rem 0;
}

.content-row:first-of-type { border-top: 0; }
.content-row h3 { margin-bottom: .35rem; }

.form-card form p,
.class-panel form p {
  display: grid;
  gap: .35rem;
}

.form-card input,
.form-card textarea,
.form-card select,
.class-panel input,
.class-panel textarea,
.class-panel select {
  border: 1px solid var(--school-line);
  border-radius: .9rem;
  padding: .8rem;
  width: 100%;
  background: rgba(255, 255, 255, .82);
}

.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus,
.class-panel input:focus,
.class-panel textarea:focus,
.class-panel select:focus {
  outline: 3px solid color-mix(in srgb, var(--school-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--school-accent) 45%, transparent);
}

.errorlist {
  background: rgba(239, 68, 68, .08);
  border: 1px solid rgba(239, 68, 68, .25);
  border-radius: .9rem;
  color: #b91c1c;
  list-style: none;
  margin: .5rem 0;
  padding: .75rem;
}

.school-messages { margin: 0 0 1.5rem; }
.alert { border-radius: 1rem; padding: .95rem 1rem; }
.alert-success { background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .3); color: #166534; }
.management-lists { align-items: start; }
.inline-form { margin-top: 1rem; }

@media (max-width: 960px) {
  .school-admin-tabs { grid-template-columns: 1fr; }
  .school-admin-tablist {
    position: static;
    display: flex;
    overflow-x: auto;
  }
  .school-admin-tab { flex: 0 0 auto; }
  .manager-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .school-portal-shell .school-stats,
  .student-profile-stats,
  .manager-top-stats,
  .feature-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .school-shell { padding-top: 2rem; }
  .school-heading { display: block; }
  .school-role { display: inline-block; margin-top: 1rem; }
  .school-stats,
  .school-portal-shell .school-stats,
  .student-profile-stats,
  .manager-top-stats,
  .feature-showcase-grid,
  .class-columns { grid-template-columns: 1fr; }
  .school-section-title { display: block; }
  .school-section-title span { display: block; margin-top: .35rem; }
  .content-row { display: block; }
}