/* ==========================================================
   Tuition page — book hero, subject tiles, class groups,
   Quick Quiz and Solar System Explorer.
   Shared bits live in course-page.css.
   ========================================================== */

/* ---------- Hero ---------- */
.tu-hero{ width:100%; max-width:500px; display:block; margin:0 auto; overflow:visible; filter: drop-shadow(0 26px 34px rgba(60,20,0,.3)); }
.tu-hero .sub-badge{ font-family: var(--font-display); font-weight:800; font-size:20px; text-anchor:middle; }
.tu-hero .rc-title{ font-family: var(--font-display); font-weight:800; font-size:11px; letter-spacing:.08em; fill: var(--navy); text-anchor:middle; }
.tu-hero .rc-sub{ font-family: var(--font-body); font-weight:600; font-size:10px; fill: var(--slate); }
.tu-hero .rc-grade{ font-family: var(--font-display); font-weight:800; font-size:26px; fill: var(--study-accent); text-anchor:middle; }

/* ---------- Subjects + groups ---------- */
.subject-tile{ padding:1rem .5rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.subject-tile i{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff; background: var(--sub); }
.subject-tile span{ font-weight:700; font-size:.82rem; color: var(--navy); line-height:1.2; }
.group-card h3{ font-size:1.3rem; }
.group-classes{ font-size:.82rem; font-weight:700; color: var(--coaching-accent); }
.group-list{ list-style:none; padding:0; margin:0; }
.group-list li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.9rem; color: var(--slate); margin-bottom:.5rem; }
.group-list .bi{ color: var(--study-accent); margin-top:.15rem; }

/* ---------- Quick quiz ---------- */
.qz-pickers{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.qz-progress{ display:flex; gap:.35rem; margin-bottom:.8rem; }
.qz-dot{ flex:1; height:7px; border-radius:999px; background: var(--paper-dim); transition: background .3s ease; }
.qz-dot.is-current{ background: var(--gold); }
.qz-dot.is-right{ background: var(--study-accent); }
.qz-dot.is-wrong{ background:#D9412C; }
.qz-text{ font-family: var(--font-display); font-weight:700; font-size:1.2rem; color: var(--navy); min-height:2.8em; margin-bottom:.8rem; }
.qz-stars{ display:block; color: var(--gold); font-size:1.6rem; letter-spacing:.15em; margin-bottom:.3rem; }
.qz-opts{ display:grid; grid-template-columns: 1fr 1fr; gap:.55rem; }
.qz-opt{
  border:2px solid var(--line); background:#fff; border-radius: var(--radius-sm); padding:.7rem .7rem; font-weight:600; color: var(--ink);
  text-align:left; transition: border-color .15s ease, background .15s ease;
}
.qz-opt:hover:not(:disabled){ border-color: var(--coaching-accent); }
.qz-opt.is-right{ border-color: var(--study-accent); background: rgba(31,122,99,.08); color: var(--study-accent); }
.qz-opt.is-wrong{ border-color:#D9412C; background: rgba(217,65,44,.06); color:#B8422E; }
.qz-why{ display:none; margin:.9rem 0; padding:.7rem .9rem; border-radius: var(--radius-sm); background: var(--paper); font-size:.88rem; color: var(--ink); }
.qz-why.is-shown{ display:block; animation: qzIn .3s ease; }
.qz-why.ok{ border-left:4px solid var(--study-accent); }
.qz-why.err{ border-left:4px solid #D9412C; }
@keyframes qzIn{ from{ opacity:0; transform: translateY(5px); } to{ opacity:1; transform:none; } }
.qz-why + .btn{ margin-top:0; }
#qzNext{ margin-top:.9rem; }

/* ---------- Solar system ---------- */
.solar{ width:100%; max-width:440px; display:block; margin:0 auto; background: radial-gradient(circle at 50% 50%, #1B2A50, #0B1328 70%); border-radius: var(--radius-md); }
.solar .orbit{ fill:none; stroke: rgba(255,255,255,.14); stroke-width:1; transition: stroke .3s ease; }
.solar .orbit.is-on{ stroke: var(--gold); stroke-width:2; }
.solar .body{ cursor:pointer; outline:none; }
.solar .body:focus-visible circle:last-of-type{ stroke: var(--gold); stroke-width:2; }
.solar-chips{ display:flex; flex-wrap:wrap; gap:.3rem; justify-content:center; margin:.8rem 0; }
.solar-chip{ border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.2rem .65rem; font-size:.75rem; font-weight:700; color: var(--slate); transition:.2s; }
.solar-chip:hover{ border-color: var(--coaching-accent); color: var(--coaching-accent); }
.solar-chip.is-active{ background: var(--navy); border-color: var(--navy); color:#fff; }
.solar-info{ background: var(--paper); border-radius: var(--radius-md); padding:1rem 1.1rem; border-left:4px solid var(--gold); font-size:.88rem; color: var(--slate); min-height:96px; }
.solar-info h5{ margin:.15rem 0 .3rem; }
.solar-info h5 span{ font-family: var(--font-body); font-weight:600; font-size:.95rem; color: var(--slate); }
.solar-info.is-filled{ animation: qzIn .3s ease; color: var(--ink); }
.solar-tag{ font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-deep); }

@media (max-width: 575.98px){ .qz-opts{ grid-template-columns: 1fr; } }