/* Unified visual layer for the high-school math one-to-one pages. */
:root{
  --math-ink:#162033;
  --math-text:#435369;
  --math-muted:#788697;
  --math-line:#d9e5ea;
  --math-paper:#ffffff;
  --math-soft:#f6fafb;
  --math-teal:#0f8f8d;
  --math-teal-deep:#077173;
  --math-blue:#315fbd;
  --math-green:#137453;
  --math-amber:#ad6818;
  --math-shadow:0 12px 30px rgba(22,32,51,.055);
}
body{
  background:
    linear-gradient(90deg,rgba(15,143,141,.035) 1px,transparent 1px),
    linear-gradient(180deg,#ffffff 0%,#f6fafb 100%) !important;
  background-size:32px 32px,auto !important;
  color:var(--math-ink) !important;
}
.page{
  width:min(100%,1244px) !important;
  padding:18px !important;
}
.topbar{
  min-height:56px !important;
  padding:10px 0 !important;
  margin-bottom:12px !important;
  border-bottom:1px solid rgba(22,32,51,.06) !important;
  position:sticky !important;
  top:0 !important;
  z-index:20 !important;
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(10px) !important;
  justify-content:flex-start !important;
}
.brand,.brand-link{text-decoration:none !important}
.brand{margin-right:auto !important}
.brand b{color:var(--math-ink) !important;font-weight:950 !important}
.brand span{color:var(--math-muted) !important}
.mark{
  border-radius:10px !important;
  background:#eaf7f6 !important;
  border-color:#c3e4e3 !important;
  color:var(--math-teal-deep) !important;
}
.global-nav,.topbar .global-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.global-nav a,.topbar .global-nav a{
  min-height:26px !important;
  padding:4px 8px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:#6c7a8d !important;
  font-size:12px !important;
  font-weight:850 !important;
  text-decoration:none !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
.global-nav a + a::before,.topbar .global-nav a + a::before{
  content:"/" !important;
  margin-right:8px !important;
  color:#b4c1cc !important;
  font-weight:700 !important;
}
.global-nav a:hover,.topbar .global-nav a:hover{
  background:#f1f8f8 !important;
  color:var(--math-teal-deep) !important;
}
.global-nav a.active,.topbar .global-nav a.active{
  background:#effbfa !important;
  color:var(--math-teal-deep) !important;
  font-weight:950 !important;
}
.top-pills .pill{
  min-height:30px !important;
  padding:6px 10px !important;
  border:1px solid var(--math-line) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#526174 !important;
  font-size:12px !important;
  font-weight:900 !important;
}
.top-pills .pill.active{
  border-color:var(--math-teal) !important;
  background:#effbfa !important;
  color:var(--math-teal-deep) !important;
}
.card,.hero,.lesson-head,.main-card,.side-card,.section,.today,.mission,details,.status-panel,.today-action{
  border-color:var(--math-line) !important;
  border-radius:16px !important;
  box-shadow:var(--math-shadow) !important;
}
.hero,.today,.lesson-head{
  background:linear-gradient(145deg,#ffffff 0%,#f4fbfa 62%,#f7faff 100%) !important;
}
h1,h2,h3{letter-spacing:0 !important;color:var(--math-ink) !important}
.kicker,.pill,.task-label,.state-pill,.lesson-id,.num,.answer-main{
  color:var(--math-teal-deep) !important;
}
.btn,.download-link,.qchip,.step,.route-btn,.toggle{
  border-radius:11px !important;
}
.btn.primary,.submit-current,.download-link.submit-current{
  background:var(--math-teal) !important;
  border-color:var(--math-teal) !important;
  color:#fff !important;
}
.layout{gap:14px !important}
.flow{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:8px !important;
}
.step{
  min-height:54px !important;
  background:#fff !important;
}
.step.active{
  border-color:#a9dcd9 !important;
  background:#effbfa !important;
}
.minimum-line{
  border-color:#c1e8e5 !important;
  background:#effbfa !important;
  border-radius:14px !important;
}
.task-board{
  display:none !important;
}
.side details.tool-block{
  display:none !important;
}
.question-wrap{padding:14px !important}
.image-box{
  min-height:460px !important;
  background:#fff !important;
}
.question-img{
  max-height:720px !important;
}
.media-panel{
  border-radius:14px !important;
  background:#fbfdfd !important;
}
.lesson-video{
  width:100% !important;
  min-height:360px !important;
  background:#0c1722 !important;
  border-radius:10px !important;
}
.segment-summary{
  font-size:12px !important;
}
.side{
  gap:12px !important;
}
.side-card:nth-of-type(n+6){
  display:none !important;
}
.top-actions .btn{
  min-height:28px !important;
  padding:4px 8px !important;
  border-radius:8px !important;
  font-size:12px !important;
  font-weight:850 !important;
  background:transparent !important;
  color:#5e6c7d !important;
}
.top-actions .btn:hover{
  background:#f1f8f8 !important;
  color:var(--math-teal-deep) !important;
}
.top-actions{
  margin-left:10px !important;
}
.resource-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.quick-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.lesson-list .lesson{
  border-radius:13px !important;
}
@media(max-width:980px){
  .layout,.hero,.today{grid-template-columns:1fr !important}
  .side{position:static !important}
  .flow{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media(max-width:680px){
  .page{padding:12px !important}
  .topbar{align-items:flex-start !important;flex-direction:column !important}
  .brand{margin-right:0 !important}
  .top-actions{margin-left:0 !important}
  .global-nav,.topbar .global-nav{justify-content:flex-start !important;overflow-x:auto !important;width:100% !important}
  .flow,.resource-grid,.quick-grid,.question-nav,.student-review-actions{grid-template-columns:1fr !important}
  .lesson-video{min-height:240px !important}
}