:root{
  --bg:#f6f8ff;
  --surface:#ffffff;
  --surface-soft:#f0f4ff;
  --surface-dark:#10162f;
  --surface-dark-2:#182245;
  --text:#15203b;
  --muted:#6b7592;
  --primary:#5b6cff;
  --primary-dark:#4354e0;
  --accent:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --border:#dde4ff;
  --shadow:0 24px 60px rgba(44,67,146,.12);
  --radius:24px;
  --radius-sm:16px;
  --container:min(1180px, calc(100% - 32px));
  --font:'Vazirmatn', 'IRANSansX', 'Tahoma', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(circle at top right, rgba(91,108,255,.15), transparent 24%),
    radial-gradient(circle at left top, rgba(34,197,94,.12), transparent 18%),
    var(--bg);
  color:var(--text);
  line-height:1.7;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
code{
  background:#0f172a;
  color:#fff;
  padding:.15rem .45rem;
  border-radius:10px;
  font-size:.92rem
}

.container{width:var(--container);margin-inline:auto}
.page-main{min-height:60vh}
.section{padding:48px 0}
.section-top{padding:40px 0 16px}
.section-soft{padding:56px 0;background:rgba(255,255,255,.55);backdrop-filter:blur(8px)}
.section-dark{
  padding:56px 0;
  background:linear-gradient(135deg, var(--surface-dark), var(--surface-dark-2));
  color:#fff;
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
}
.section-head.tight{margin-bottom:18px}
.section-head.centered{justify-content:center;text-align:center}
.section-head.light h2,
.section-head.light p{color:#fff}
.section-head h1,
.section-head h2,
.section-head h3{
  margin:0;
  line-height:1.18;
}
.section-head h1{font-size:clamp(1.9rem, 4vw, 3rem)}
.section-head h2{font-size:clamp(1.45rem, 2.5vw, 2.2rem)}
.section-head p{margin:.5rem 0 0;color:var(--muted);max-width:70ch}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.35rem .8rem;
  border-radius:999px;
  background:rgba(91,108,255,.12);
  color:var(--primary-dark);
  font-weight:700;
  font-size:.9rem;
  margin-bottom:14px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(246,248,255,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(221,228,255,.9);
}
.header-inner{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand img{width:54px;height:54px}
.brand strong{
  display:block;
  font-size:1.15rem;
}
.brand span{
  color:var(--muted);
  font-size:.9rem;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.site-nav>a{
  padding:.65rem .95rem;
  border-radius:999px;
  font-weight:600;
  color:var(--muted);
  transition:.2s ease;
}
.site-nav>a:hover,
.site-nav>a.active{
  color:var(--text);
  background:#fff;
  box-shadow:0 8px 24px rgba(17,24,39,.06);
}
.nav-cta-group{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:8px;
}

.mobile-menu-button{
  display:none;
  width:46px;height:46px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:10px;
}
.mobile-menu-button span{
  display:block;
  height:2px;background:var(--text);
  border-radius:2px;
  margin:5px 0;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:.8rem 1.2rem;
  border:none;
  border-radius:16px;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  font-weight:700;
  box-shadow:0 18px 36px rgba(91,108,255,.24);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.button:hover{transform:translateY(-1px);box-shadow:0 22px 40px rgba(91,108,255,.28)}
.button.ghost{
  background:#fff;
  color:var(--primary-dark);
  box-shadow:0 12px 24px rgba(15,23,42,.08);
  border:1px solid var(--border);
}
.button.small{min-height:42px;padding:.62rem 1rem;border-radius:14px}
.button.full{width:100%}

.card{
  background:var(--surface);
  border:1px solid rgba(221,228,255,.85);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.subtle{
  background:rgba(255,255,255,.75);
  border:1px dashed var(--border);
  box-shadow:none;
}

.flash-stack{padding-top:16px}
.flash{
  padding:14px 18px;
  border-radius:18px;
  margin-bottom:12px;
  font-weight:600;
}
.flash-success{background:rgba(34,197,94,.12);color:#126636;border:1px solid rgba(34,197,94,.2)}
.flash-error{background:rgba(239,68,68,.12);color:#a12626;border:1px solid rgba(239,68,68,.18)}

.hero{padding:44px 0 28px}
.hero.compact{padding-top:30px}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:center;
}
.hero-copy h1{
  font-size:clamp(2.4rem, 5vw, 4.3rem);
  line-height:1.05;
  margin:0 0 16px;
}
.hero-copy p{
  margin:0 0 22px;
  color:var(--muted);
  font-size:1.06rem;
  max-width:60ch;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:24px;
}
.metric-box{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:20px;
  padding:16px;
}
.metric-box strong{
  display:block;
  font-size:1.15rem;
}
.metric-box span{color:var(--muted);font-size:.9rem}

.hero-art-card{
  position:relative;
  min-height:420px;
  padding:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(236,241,255,.95));
  border-radius:32px;
  border:1px solid rgba(221,228,255,.9);
  box-shadow:0 30px 80px rgba(66,95,194,.18);
  overflow:hidden;
}
.hero-art-card img{width:100%;height:100%;object-fit:contain}
.floating-card{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border-radius:18px;
  max-width:230px;
}
.floating-card span{font-size:.85rem;color:var(--muted)}
.floating-card strong{font-size:.94rem}
.floating-card.one{left:24px;bottom:28px}
.floating-card.two{right:18px;top:28px}

.feature-grid{
  display:grid;
  gap:18px;
}
.feature-grid.three{grid-template-columns:repeat(3,1fr)}
.feature-card{padding:24px}
.feature-card .icon{width:56px;height:56px;margin-bottom:16px}
.feature-card h3{margin:0 0 8px;font-size:1.18rem}
.feature-card p{margin:0;color:var(--muted)}

.grade-book-stack{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.grade-column{padding:18px}
.grade-column-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.grade-column-head strong{font-size:1.12rem}
.grade-column-head span{color:var(--muted);font-size:.92rem}
.grade-book-list{display:grid;gap:12px}
.subject-tile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  transition:transform .2s ease;
}
.subject-tile:hover{transform:translateY(-2px)}
.subject-tile img{width:42px;height:42px}
.subject-tile strong{display:block}
.subject-tile span{color:var(--muted);font-size:.88rem}

.theme-blue{background:linear-gradient(135deg, rgba(91,108,255,.12), rgba(141,198,255,.18))}
.theme-rose{background:linear-gradient(135deg, rgba(244,114,182,.12), rgba(251,191,188,.16))}
.theme-emerald{background:linear-gradient(135deg, rgba(16,185,129,.12), rgba(134,239,172,.18))}
.theme-amber{background:linear-gradient(135deg, rgba(245,158,11,.12), rgba(253,224,71,.18))}
.theme-indigo{background:linear-gradient(135deg, rgba(99,102,241,.12), rgba(165,180,252,.2))}
.theme-purple{background:linear-gradient(135deg, rgba(168,85,247,.12), rgba(216,180,254,.18))}
.theme-cyan{background:linear-gradient(135deg, rgba(6,182,212,.12), rgba(165,243,252,.18))}
.theme-pink{background:linear-gradient(135deg, rgba(236,72,153,.12), rgba(251,207,232,.2))}
.theme-neutral{background:var(--surface-soft)}

.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.product-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.product-cover{
  width:100%;
  aspect-ratio:1.35/1;
  object-fit:cover;
  background:#eef2ff;
}
.product-card-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
}
.product-card h3{margin:0;font-size:1.14rem}
.product-card p{margin:0;color:var(--muted)}
.product-actions{display:flex;gap:10px;margin-top:auto}
.price-line{
  font-size:1.1rem;
  font-weight:800;
  color:var(--primary-dark);
}
.price-line.large{font-size:1.6rem}
.price-line small{display:block;color:var(--muted);font-weight:500}

.lesson-showcase-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.lesson-mini{
  padding:16px;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}
.lesson-mini h3{margin:10px 0 8px;font-size:1rem}
.lesson-mini p{margin:0 0 12px;color:rgba(255,255,255,.78)}
.lesson-meta,.meta-inline{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  color:var(--muted);
  font-size:.92rem;
}
.lesson-meta{color:rgba(255,255,255,.78)}
.mini-top,.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.wrap{flex-wrap:wrap}
.chip,.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:.25rem .72rem;
  border-radius:999px;
  background:rgba(91,108,255,.1);
  color:var(--primary-dark);
  font-size:.84rem;
  font-weight:700;
  border:1px solid rgba(91,108,255,.15);
}
.chip-hot{background:rgba(245,158,11,.12);color:#a15c00;border-color:rgba(245,158,11,.18)}
.chip-success{background:rgba(34,197,94,.14);color:#126636;border-color:rgba(34,197,94,.2)}
.filter-chip.active{background:var(--primary);color:#fff}

.banner-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.marketing-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px;
}
.marketing-banner img{width:170px;max-width:40%}
.marketing-banner h3{margin:10px 0 8px;font-size:1.35rem}
.marketing-banner p{margin:0;color:var(--muted)}

.cta-panel{
  padding:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.cta-panel h2{margin:8px 0}
.cta-panel p{margin:0;color:var(--muted)}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

.filter-bar,
.form-card,
.auth-card,
.auth-side,
.side-panel,
.rich-card,
.quiz-card{
  padding:22px;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.form-grid .field,
.otp-inline-form .field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-grid .span-2{grid-column:1 / -1}
label{font-weight:700;font-size:.95rem}
input,select,textarea{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:16px;
  padding:.9rem 1rem;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(91,108,255,.7);
  box-shadow:0 0 0 4px rgba(91,108,255,.12);
}
textarea{resize:vertical}
.checkbox-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:500;
}
.checkbox-line input{width:18px;height:18px;min-width:18px;margin-top:2px}
.divider{
  display:flex;
  align-items:center;
  gap:16px;
  margin:18px 0;
  color:var(--muted);
}
.divider::before,.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}
.inline-note{font-size:.9rem;color:var(--muted)}
.otp-inline-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:end;
}
.otp-inline-form .field{min-width:0}
.otp-inline-form .inline-note{grid-column:1 / -1}

.two-col-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:20px;
}
.two-col-layout > .content-column{order:2}
.two-col-layout > .side-column{order:1}
.auth-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:20px;
}
.auth-grid.wide{grid-template-columns:minmax(0, 1fr) 320px}
.install-notice{display:grid;grid-template-columns:1fr 320px;gap:18px;padding:24px}

.sidebar-book-list{padding:18px;position:sticky;top:100px;height:max-content}
.sidebar-head{margin-bottom:12px}
.book-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:16px;
  margin-bottom:10px;
  border:1px solid transparent;
  background:var(--surface-soft);
}
.book-row.active{border-color:rgba(91,108,255,.22);background:#fff}
.book-row img{width:42px;height:42px}
.book-row strong{display:block}
.book-row span{color:var(--muted);font-size:.88rem}

.book-hero,
.lesson-hero,
.product-hero,
.school-hero{
  padding:24px;
  display:grid;
  grid-template-columns:1fr 260px;
  gap:22px;
  align-items:center;
}
.book-hero img,
.lesson-hero img,
.school-hero img,
.product-hero-cover{
  width:100%;
  max-height:260px;
  object-fit:contain;
}
.unit-list{display:grid;gap:18px;margin-top:18px}
.unit-card{padding:20px}
.unit-card-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.unit-card-head h3{margin:.5rem 0}
.unit-card-head p{margin:0;color:var(--muted);max-width:60ch}
.unit-meta{text-align:left}
.unit-meta strong{display:block}
.unit-meta span{color:var(--muted)}

.lesson-list-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.lesson-card-mini{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  border-radius:18px;
  background:var(--surface-soft);
  border:1px solid var(--border);
}
.lesson-card-mini strong{line-height:1.35}
.lesson-card-mini small{color:var(--muted)}
.lesson-card-mini-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.lesson-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:20px;
}
.question-box{
  padding:16px;
  border-radius:18px;
  background:var(--surface-soft);
  border:1px solid var(--border);
  margin-bottom:14px;
}
.option-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:12px;
}
.option-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
}
.option-pill input{width:18px;min-width:18px;height:18px;padding:0}
.checklist{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.checklist > div{
  padding:12px 14px;
  border-radius:16px;
  background:var(--surface-soft);
}
.progress-meter{
  width:100%;
  height:12px;
  border-radius:999px;
  background:#e9eeff;
  overflow:hidden;
  margin:14px 0;
}
.progress-fill{
  height:100%;
  background:linear-gradient(135deg,var(--primary),#22c55e);
}

.admin-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:20px;
}
.dashboard-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px;
}
.dashboard-header h1{margin:8px 0 10px;font-size:clamp(1.8rem,3vw,2.6rem)}
.dashboard-header p{margin:0;color:var(--muted)}
.dashboard-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.metric-card{
  padding:20px;
}
.metric-card strong{
  display:block;
  font-size:1.6rem;
  line-height:1.1;
  margin-bottom:8px;
}
.metric-card span{color:var(--muted)}

.table-card{padding:18px}
.table-wrap{overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
}
th,td{
  text-align:right;
  padding:12px 10px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
th{font-size:.92rem;color:var(--muted)}
tbody tr:hover{background:rgba(91,108,255,.04)}

.meta-list,
.ordered-list,
.footer-links{
  margin:0;padding:0;list-style:none;
  display:grid;
  gap:10px;
}
.meta-list li,
.footer-links li{
  color:var(--muted);
}
.meta-list.compact{gap:8px}
.muted{color:var(--muted)}

.classroom-list,
.side-link-list,
.achievement-grid,
.child-card-grid{
  display:grid;
  gap:14px;
}
.classroom-item,
.achievement-card,
.child-summary{
  padding:14px;
  border-radius:18px;
  background:var(--surface-soft);
  border:1px solid var(--border);
}
.child-summary-head{
  display:flex;align-items:center;gap:12px;margin-bottom:14px
}
.child-summary-head img{width:54px;height:54px;border-radius:18px}
.metric-inline{
  display:flex;align-items:baseline;gap:10px;margin-bottom:12px
}
.metric-inline strong{font-size:1.5rem}
.metric-inline span{color:var(--muted)}
.side-link-list a{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  background:#fff;
  border-radius:14px;
  border:1px solid var(--border);
}
.side-link-list a strong{font-size:.96rem}
.side-link-list a span{color:var(--muted);font-size:.88rem}

.ai-form{
  display:grid;
  gap:14px;
}
.ai-result{
  padding:16px;
  white-space:pre-wrap;
  min-height:90px;
}
.achievement-grid{
  grid-template-columns:repeat(2,1fr);
}
.achievement-card img{
  width:54px;height:54px;margin-bottom:10px
}
.achievement-card strong{display:block}
.achievement-card span{color:var(--muted);font-size:.92rem}

.comparison-table{padding:22px}
.content-page{padding:24px}
.empty-state{
  padding:28px;
  text-align:center;
}
.empty-state h1,.empty-state h3{margin:0 0 10px}
.empty-state p{margin:0 0 18px;color:var(--muted)}

.footer-grid{
  display:grid;
  grid-template-columns:1.2fr repeat(3,1fr);
  gap:20px;
  padding:30px 0;
}
.site-footer{
  border-top:1px solid var(--border);
  margin-top:40px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
}
.site-footer h3,.site-footer h4{margin:0 0 10px}
.site-footer p{margin:0;color:var(--muted)}
.footer-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.footer-bottom{
  padding:16px 0 24px;
  border-top:1px solid rgba(221,228,255,.7);
}
.footer-bottom small{color:var(--muted)}

@media (max-width: 1100px){
  .hero-grid,
  .product-hero,
  .school-hero,
  .book-hero,
  .lesson-hero,
  .install-notice,
  .auth-grid,
  .lesson-layout,
  .two-col-layout,
  .admin-grid{
    grid-template-columns:1fr;
  }
  .two-col-layout>.content-column,
  .two-col-layout>.side-column{order:initial}
  .dashboard-metrics,
  .grade-book-stack,
  .product-grid,
  .lesson-showcase-grid,
  .banner-grid,
  .feature-grid.three{
    grid-template-columns:repeat(2,1fr);
  }
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .lesson-list-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .sidebar-book-list{position:static}
}

@media (max-width: 820px){
  .mobile-menu-button{display:block}
  .site-nav{
    position:fixed;
    inset:82px 16px auto 16px;
    flex-direction:column;
    align-items:stretch;
    background:rgba(255,255,255,.96);
    border:1px solid var(--border);
    border-radius:24px;
    padding:16px;
    box-shadow:var(--shadow);
    opacity:0;
    pointer-events:none;
    transform:translateY(-12px);
    transition:.2s ease;
  }
  .site-nav.is-open{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
  .site-nav>a,.nav-cta-group{width:100%}
  .nav-cta-group{margin:8px 0 0}
  .nav-cta-group .button{flex:1}
  .product-grid,
  .lesson-showcase-grid,
  .grade-book-stack,
  .banner-grid,
  .feature-grid.three,
  .pricing-grid,
  .dashboard-metrics,
  .footer-grid,
  .achievement-grid,
  .lesson-list-grid,
  .option-list{
    grid-template-columns:1fr;
  }
  .hero-copy h1{font-size:2.3rem}
  .hero-art-card{min-height:320px}
  .form-grid{grid-template-columns:1fr}
  .form-grid .span-2{grid-column:1}
  .otp-inline-form{grid-template-columns:1fr}
  .cta-panel,
  .dashboard-header,
  .unit-card-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .unit-meta{text-align:right}
  .header-inner{min-height:76px}
}

@media (max-width: 560px){
  .container{width:min(100% - 20px, 1180px)}
  .card,
  .hero-art-card{border-radius:22px}
  .metric-box,
  .subject-tile,
  .lesson-card-mini,
  .button,
  input,select,textarea{border-radius:14px}
  .hero{padding-top:24px}
  .section{padding:36px 0}
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.pricing-card{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pricing-card.is-featured{
  border-color:rgba(91,108,255,.32);
  box-shadow:0 28px 68px rgba(91,108,255,.18);
}
.pricing-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.metric-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:18px;
}
.metric-strip>div{
  padding:14px;
  border-radius:18px;
  background:var(--surface-soft);
  border:1px solid var(--border);
}
.metric-strip strong{display:block;font-size:1.15rem}
.metric-strip span{color:var(--muted);font-size:.9rem}
.ordered-list{
  list-style:decimal;
  padding-right:1.1rem;
}
.ordered-list li{
  color:var(--muted);
}
.auth-side{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-copy{min-width:0}
.classroom-item strong{display:block;margin-bottom:6px}
.classroom-item span{display:block;color:var(--muted);font-size:.92rem}
.install-notice .hero-art{
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (max-width: 820px){
  .metric-strip{grid-template-columns:1fr}
}


/* --- Ultimate upgrade additions --- */
.inline-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.feature-grid.four{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.hero-art-ultimate .floating-card{
  position:absolute;
  padding:16px 18px;
  max-width:220px;
  border-radius:22px;
}
.hero-art-ultimate .floating-card.one{top:18px;left:18px}
.hero-art-ultimate .floating-card.two{bottom:110px;right:24px}
.hero-art-ultimate .floating-card.three{bottom:24px;left:22px}
.hero-art-ultimate .floating-card span{
  display:block;
  color:var(--muted);
  font-size:.88rem;
  margin-bottom:6px;
}
.hero-art-ultimate .floating-card strong{
  display:block;
  line-height:1.45;
  font-size:.97rem;
}
.lesson-mini-rich .lesson-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  color:var(--muted);
  font-size:.86rem;
}
.subject-badge-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.subject-badge{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}
.subject-badge img{width:58px;height:58px}
.subject-badge span{color:var(--muted);font-size:.92rem}

.curriculum-toolbar{
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr auto;
  gap:16px;
  padding:20px;
  margin-top:20px;
}
.toolbar-actions{
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.grade-overview-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.grade-overview-card{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.grade-overview-card span,.grade-overview-card small{color:var(--muted)}
.book-catalog-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}
.book-catalog-card{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.book-catalog-head{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:20px;
  align-items:flex-start;
}
.book-cover-wrap{
  width:120px;
  height:150px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(239,243,255,.9));
  border:1px solid var(--border);
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.book-copy h3{margin:10px 0 8px}
.book-copy p{margin:0;color:var(--muted)}
.book-stats{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:12px;
  color:var(--muted);
  font-size:.92rem;
}
.unit-accordion-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.unit-accordion{
  border:1px solid var(--border);
  border-radius:22px;
  background:rgba(255,255,255,.72);
  overflow:hidden;
}
.unit-accordion summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.unit-accordion summary::-webkit-details-marker{display:none}
.unit-accordion summary strong{display:block}
.unit-accordion summary span,
.unit-accordion summary small{color:var(--muted)}
.unit-accordion-body{
  padding:0 18px 18px;
}
.lesson-mini-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}
.lesson-line-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  border-radius:18px;
  background:var(--surface);
  border:1px solid rgba(221,228,255,.8);
}
.lesson-line-card strong{display:block;margin-bottom:4px}
.lesson-line-card span{display:block;color:var(--muted);font-size:.92rem}
.lesson-line-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  color:var(--muted);
  min-width:260px;
  font-size:.85rem;
}
.empty-state-card{
  padding:28px;
  text-align:center;
}

.lesson-hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:22px;
  align-items:stretch;
}
.lesson-hero-copy,
.lesson-hero-art{
  min-width:0;
}
.lesson-hero-copy h1{
  margin:12px 0 10px;
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1.1;
}
.lesson-hero-copy>p{
  margin:0;
  color:var(--muted);
  font-size:1.05rem;
}
.lesson-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0;
}
.lesson-hero-meta span{
  padding:.48rem .8rem;
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  color:var(--muted);
  font-size:.9rem;
}
.lesson-hero-art{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.lesson-hero-art img{
  width:100%;
  height:250px;
  object-fit:contain;
}
.lesson-hero-side-note{
  padding:16px;
  border-radius:18px;
  background:var(--surface-soft);
  border:1px solid var(--border);
}
.lesson-hero-side-note p{margin:8px 0 0;color:var(--muted)}
.lesson-metric-strip{
  grid-template-columns:repeat(3,1fr);
}
.rich-lesson-layout .content-column{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.lesson-sections-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.lesson-section-card{
  padding:20px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,247,255,.95));
  border:1px solid var(--border);
}
.lesson-section-card h3{margin:10px 0}
.lesson-html-body{
  color:var(--text);
}
.lesson-html-body p{margin:.3rem 0 .7rem}
.lesson-html-body ul{
  margin:0;
  padding-right:1.1rem;
}
.lesson-html-body li{margin-bottom:.35rem}
.quiz-card-pro{
  padding:22px;
}
.quiz-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
}
.quiz-timer{
  min-width:88px;
  padding:.55rem .85rem;
  text-align:center;
  border-radius:999px;
  background:#0f172a;
  color:#fff;
  font-weight:700;
}
.question-box-rich{
  padding:18px;
  border-radius:22px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.84);
  margin-bottom:16px;
}
.question-box-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.question-box-head strong{line-height:1.8}
.option-list-rich{
  grid-template-columns:repeat(2,1fr);
}
.option-pill-rich span{
  display:flex;
  align-items:center;
  gap:8px;
}
.option-pill-rich em{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  border-radius:10px;
  background:var(--surface-soft);
  color:var(--primary-dark);
  font-style:normal;
  font-weight:700;
}

.dashboard-grid-ultimate{
  grid-template-columns:repeat(3,1fr);
}
.span-2{
  grid-column:span 2;
}
.lesson-card-mini-strong{
  border:1px solid rgba(91,108,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(242,245,255,.95));
}
.progress-subject-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.subject-progress-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  background:var(--surface-soft);
  border:1px solid var(--border);
}
.subject-progress-card span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
}
.score-pill{
  min-width:78px;
  padding:.45rem .8rem;
  border-radius:999px;
  text-align:center;
  background:rgba(91,108,255,.14);
  color:var(--primary-dark);
  font-weight:700;
}
.performance-bars{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.performance-row{
  display:grid;
  grid-template-columns:minmax(160px, 240px) 1fr 62px;
  gap:14px;
  align-items:center;
}
.performance-label span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
}
.performance-track{
  height:16px;
  border-radius:999px;
  background:rgba(221,228,255,.9);
  overflow:hidden;
}
.performance-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
}
.child-card-grid-wide{
  grid-template-columns:repeat(2,1fr);
}
.child-summary-ultimate{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.parent-child-block h4{
  margin:0 0 10px;
  font-size:1rem;
}
.compact-two{
  grid-template-columns:repeat(2,1fr);
}
.heatmap-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.heatmap-card{
  padding:16px;
  border-radius:20px;
  color:#fff;
}
.heatmap-card strong{display:block;margin-bottom:6px}
.heatmap-card span,
.heatmap-card small{display:block;opacity:.92}
.heatmap-card.score-high{background:linear-gradient(135deg, #16a34a, #22c55e)}
.heatmap-card.score-mid{background:linear-gradient(135deg, #f59e0b, #fbbf24); color:#241504}
.heatmap-card.score-low{background:linear-gradient(135deg, #dc2626, #ef4444)}
.classroom-item-rich{
  padding:16px;
  border-radius:18px;
  background:var(--surface-soft);
  border:1px solid var(--border);
}
.lesson-list-grid .lesson-card-mini{
  min-height:100%;
}

@media (max-width: 1080px){
  .feature-grid.four,
  .subject-badge-grid,
  .grade-overview-grid,
  .heatmap-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .dashboard-grid-ultimate{
    grid-template-columns:1fr;
  }
  .span-2{
    grid-column:auto;
  }
  .book-catalog-head,
  .lesson-hero-grid{
    grid-template-columns:1fr;
  }
  .curriculum-toolbar{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 820px){
  .curriculum-toolbar,
  .feature-grid.four,
  .subject-badge-grid,
  .grade-overview-grid,
  .child-card-grid-wide,
  .heatmap-grid,
  .option-list-rich{
    grid-template-columns:1fr;
  }
  .toolbar-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .lesson-line-card{
    flex-direction:column;
    align-items:flex-start;
  }
  .lesson-line-meta{
    justify-content:flex-start;
    min-width:0;
  }
  .performance-row{
    grid-template-columns:1fr;
  }
  .question-box-head,
  .quiz-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .lesson-metric-strip,
  .compact-two{
    grid-template-columns:1fr;
  }
}