/* ============================================================
   STEP TO TOPPERS — SHARED STUDENT CANVAS v2026.10.05
   Fixed neutral shell requested for every student-facing page.
   Theme-selected accent/gradients still control active buttons,
   icons and highlights through the existing theme variables.
   ============================================================ */
:root{
  --stt-app-bg:#F8F9FE;
  --stt-surface:#FFFFFF;
  --stt-soft:#F1F5F9;
  --stt-line:#E2E8F0;
  --stt-line-strong:#CFD8E3;
  --stt-ink:#111827;
  --stt-muted:#64748B;
  --stt-safe-bottom:env(safe-area-inset-bottom,0px);
  --stt-clean-shadow:0 5px 16px rgba(15,23,42,.055);
  --stt-clean-shadow-strong:0 7px 22px rgba(15,23,42,.075);
  color-scheme:light;
}

html{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  background:#F8F9FE!important;
}
body,
body[class*="page-"]{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  background:#F8F9FE!important;
}
.app-container,
body[class*="page-"] .app-container{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  background:#F8F9FE!important;
  border-color:var(--stt-line)!important;
}
body[class*="page-"] main{background:transparent!important}

/* Live CBT also uses the exact same neutral canvas without changing exam logic. */
.page-exam .exam-body,
.page-exam .app-container{background:#F8F9FE!important}
.page-exam .exam-header,
.page-exam .exam-sticky-stack,
.page-exam .exam-footer{background:#F8F9FE!important}

/* ------------------------------------------------------------
   Auth-modal-inspired form controls: white field, crisp line,
   compact radius, theme-aware focus. Geometry remains owned by
   site-ui-standard.css so page logic/layout is not disturbed.
   ------------------------------------------------------------ */
body[class*="page-"] main :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,
  textarea
){
  background:#fff!important;
  color:var(--stt-ink)!important;
  border:1px solid var(--stt-line-strong)!important;
  border-radius:8px!important;
  box-shadow:none!important;
  outline:none!important;
}
body[class*="page-"] main :is(input,select,textarea)::placeholder{
  color:#94A3B8!important;
  font-weight:500!important;
}
body[class*="page-"] main :is(input,select,textarea):focus{
  border-color:var(--theme-accent,var(--brand-blue,#007bff))!important;
  background:#fff!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,var(--brand-blue,#007bff)) 10%,transparent)!important;
}
body[class*="page-"] main .field:focus-within label,
body[class*="page-"] main .form-group:focus-within label{
  color:var(--theme-accent,var(--brand-blue,#007bff))!important;
}

/* Neutral dividers and card outlines use one clean line system. */
body[class*="page-"] main hr{
  border:0!important;
  border-top:1px solid var(--stt-line)!important;
}
body[class*="page-"] main :is(
  .feature-strip,.class-overview,.class-card,.feature-card,.learning-card,.support-card,
  .review-card,.review-slide,.review-empty,.review-empty-rich,
  .stats,.quick a,.subject,.next-test,
  .batch,.test-card,.test-row,.auth-gate,.subject-panel-card,.chapter-focus-card,
  .card,.section-card,.action-card,.edit-card,.history-card,.result-card,
  .snapshot-card,.weak-topic-card,.question-card,.trend-card,.type-card
){
  border-color:var(--stt-line)!important;
  box-shadow:var(--stt-clean-shadow)!important;
}

/* Do not recolor themed hero/gradient surfaces; only normalize plain white cards. */
body[class*="page-"] main :is(
  .feature-strip,.class-overview,.class-card,.feature-card,.learning-card,.support-card,
  .review-card,.review-slide,.review-empty,.review-empty-rich,
  .stats,.quick a,.subject,.next-test,
  .batch,.test-card,.test-row,.auth-gate,.subject-panel-card,.chapter-focus-card,
  .card,.section-card,.action-card,.edit-card,.history-card,.result-card,
  .snapshot-card,.weak-topic-card,.question-card,.trend-card,.type-card
):not(.active):not(.selected):not(.focus){
  border-radius:max(8px,var(--stt-control-radius,8px))!important;
}

/* ------------------------------------------------------------
   Tabs: same clean rail + white inactive button language used by
   auth_modal.php. Active tab continues to use the admin theme.
   ------------------------------------------------------------ */
body[class*="page-"] main :is(
  .tabs,.series-tabs,.journey-tabs,.library-tabs,.subject-tabs,.cat-tabs,.filter-tabs
){
  background:var(--stt-soft)!important;
  border:1px solid var(--stt-line)!important;
  border-radius:12px!important;
  padding:5px!important;
  gap:6px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}
body[class*="page-"] main :is(
  .tab,.cat-tab,.series-tab,.journey-tab,.library-tab,.subject-tab,.filter-tab,
  .tabs>a
):not(.active){
  background:#fff!important;
  color:var(--stt-muted)!important;
  border:1px solid var(--stt-line)!important;
  border-radius:var(--stt-control-radius,8px)!important;
  box-shadow:0 2px 6px rgba(15,23,42,.06)!important;
}
body[class*="page-"] main :is(
  .tab,.cat-tab,.series-tab,.journey-tab,.library-tab,.subject-tab,.filter-tab,
  .tabs>a
).active,
body[class*="page-"] main :is(
  .tab.active,.cat-tab.active,.series-tab.active,.journey-tab.active,.library-tab.active,.subject-tab.active,.filter-tab.active,
  .tabs>a.active
){
  color:#fff!important;
  border:2px solid #fff!important;
  background-image:var(--blue-grad-vert,linear-gradient(to bottom,var(--theme-start,#0084ff),var(--theme-end,#0013b3)))!important;
  box-shadow:0 5px 12px rgba(15,23,42,.15)!important;
}

/* Shared button finish: geometry/color stay contextual, finish becomes consistent. */
body[class*="page-"] main :is(
  button,.btn,[class$="-btn"],[class*=" btn-"],
  a[class*="btn"],a[class*="cta"]
):not(.tm-menu-btn):not(.tm-bell-btn):not(.detail-close):not(.camera){
  border-radius:var(--stt-control-radius,8px)!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease!important;
}
body[class*="page-"] main :is(
  .btn:not(.secondary):not(.btn-outline):not(.light),
  .class-cta,.view-batches,.support-cta,.dash-btn,.test-btn,.subject-open-btn,.request-btn,.submit
){
  box-shadow:0 4px 10px rgba(15,23,42,.14);
}
body[class*="page-"] main :is(
  .secondary,.btn-outline,.auth-register,.back
){
  background:#fff!important;
  border-color:var(--stt-line-strong)!important;
  box-shadow:0 2px 6px rgba(15,23,42,.045)!important;
}

/* Labels that sit on field borders must blend with the white field surface. */
body[class*="page-"] main :is(.field,.form-group) > label{
  background:#fff;
}

/* Keep motion restrained and app-like. */
@media (prefers-reduced-motion:reduce){
  body[class*="page-"] main *{scroll-behavior:auto!important}
}