/* ===========================================================
   数学乐园 · 学习阶段与上下册进阶引导系统样式（stage-guide.css）
   =========================================================== */

.sg-card{
  position:relative;
  z-index:3;
  width:min(1160px,100%);
  margin:0 auto 18px;
  padding:22px 24px 20px;
  border:2px solid #9BD9B0;
  border-radius:26px;
  background:
    radial-gradient(circle at 92% 14%,rgba(167,243,208,.45) 0 120px,transparent 121px),
    linear-gradient(135deg,#ECFDF3 0%,#F7FEE7 52%,#FFFDF5 100%);
  box-shadow:0 14px 32px rgba(34,112,67,.12),inset 0 1px 0 rgba(255,255,255,.9);
  color:#1E3F2B;
}

.sg-card-top{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.sg-pal{
  flex:0 0 72px;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:#FFFFFF;
  border:2px solid #BDE8CA;
  box-shadow:0 6px 14px rgba(34,112,67,.1);
  font-size:38px;
  overflow:hidden;
}
.sg-pal svg{width:62px;height:62px;display:block}

.sg-copy{flex:1 1 auto;min-width:0}

.sg-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 11px;
  border-radius:999px;
  background:#D1FAE5;
  color:#065F46;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.02em;
}

.sg-copy h2{
  margin:8px 0 6px;
  font-size:clamp(20px,2.4vw,25px);
  line-height:1.3;
  color:#143824;
}

.sg-copy p{
  margin:0;
  color:#3B5E49;
  font-size:14.5px;
  line-height:1.6;
  font-weight:650;
}

.sg-units-box{
  margin-top:16px;
  padding:13px 15px;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  border:1.5px solid #CBEBD5;
}

.sg-units-label{
  display:block;
  margin-bottom:9px;
  font-size:13.5px;
  font-weight:900;
  color:#1E4E32;
}

.sg-unit-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.sg-unit-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 12px;
  border:2px solid #D5E9DC;
  border-radius:13px;
  background:#FFFFFF;
  color:#2C523B;
  font:inherit;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,background-color .14s ease;
}
.sg-unit-pill:hover{border-color:#74C693;transform:translateY(-1px)}
.sg-unit-pill.is-on{
  border-color:#1F7A46;
  background:#1F7A46;
  color:#FFFFFF;
  box-shadow:0 5px 12px rgba(31,122,70,.22);
}
.sg-unit-pill:focus-visible{outline:3px solid #2E7D46;outline-offset:2px}

.sg-highlights{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}

.sg-highlights li{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  border:1px solid #D7EFE0;
  font-size:12.8px;
  line-height:1.45;
  color:#355944;
  font-weight:750;
}
.sg-highlights li b{display:block;color:#18452B;font-size:13.5px;margin-bottom:2px}

.sg-acts{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.sg-btn-main{
  background:linear-gradient(180deg,#259655 0%,#1B7A43 100%)!important;
  color:#FFF!important;
  box-shadow:0 5px 0 #135830,0 10px 20px rgba(27,122,67,.22)!important;
}

.sg-link{
  margin-left:auto;
  padding:6px 10px;
  border:0;
  background:none;
  color:#4B6B58;
  font:inherit;
  font-size:13px;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.sg-link:hover{color:#1E4E32}

.sg-later{
  padding:6px 8px;
  border:0;
  background:none;
  color:#6A8474;
  font:inherit;
  font-size:12.5px;
  font-weight:750;
  cursor:pointer;
}

/* 弹窗：学习阶段与学期切换 & 3 步导览 */
.sg-modal{
  text-align:left;
  color:#233B2E;
}
.sg-modal h3{
  margin:0 0 6px;
  font-size:21px;
  color:#173826;
}
.sg-modal-sub{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.55;
  color:#526B5D;
}

.sg-stage-choices{
  display:grid;
  gap:10px;
}

.sg-stage-opt{
  width:100%;
  display:grid;
  gap:4px;
  padding:14px 16px;
  text-align:left;
  border:2px solid #D6E6DC;
  border-radius:18px;
  background:#FAFCFA;
  color:#243E30;
  font:inherit;
  cursor:pointer;
}
.sg-stage-opt:hover{border-color:#84C89E}
.sg-stage-opt.is-on{
  border-color:#1F7A46;
  background:linear-gradient(135deg,#ECFDF3 0%,#F8FEEB 100%);
  box-shadow:0 6px 16px rgba(31,122,70,.12);
}
.sg-stage-opt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:16px;
  font-weight:950;
}
.sg-stage-tag{
  padding:2px 9px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:900;
  background:#D1FAE5;
  color:#065F46;
}
.sg-stage-opt small{
  font-size:13px;
  line-height:1.5;
  color:#4E6859;
  font-weight:700;
}

.sg-modal-units{
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  background:#F4FBF6;
  border:1.5px solid #CBEAD5;
}
.sg-modal-units[hidden]{display:none}

.sg-modal-foot{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

/* 3 步微导览弹窗 */
.sg-tour{
  text-align:center;
  padding:6px 2px 2px;
}
.sg-tour-emo{
  width:72px;
  height:72px;
  margin:0 auto 10px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(135deg,#DCFCE7,#FEF9C3);
  font-size:38px;
}
.sg-tour-step{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:#E2F5EA;
  color:#1B653A;
  font-size:12px;
  font-weight:900;
}
.sg-tour h3{
  margin:8px 0 8px;
  font-size:21px;
  color:#173826;
}
.sg-tour p{
  margin:0 auto 14px;
  max-width:26em;
  font-size:15px;
  line-height:1.65;
  color:#425D4D;
  font-weight:700;
}
.sg-tour-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-bottom:16px;
}
.sg-tour-dots i{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#CFE3D5;
}
.sg-tour-dots i.is-on{
  width:24px;
  background:#1F7A46;
}
.sg-tour-acts{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width:680px){
  .sg-card{padding:18px 16px 16px;border-radius:22px}
  .sg-card-top{gap:12px}
  .sg-pal{flex:0 0 56px;width:56px;height:56px;font-size:30px}
  .sg-pal svg{width:48px;height:48px}
  .sg-highlights{grid-template-columns:1fr;gap:7px}
  .sg-link{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .sg-unit-pill,.sg-stage-opt{transition:none!important;transform:none!important}
}