/* piano.css —— 钢琴 / 声乐陪练课程页的少量补充样式
   其余一律沿用 /css/poly.css（与复调课程共用同一套 pl-* / ev3-* 视觉体系） */
.pl-frame{display:block;width:100%;height:min(80vh,900px);border:1px solid #E4E8F0;
  border-radius:14px;background:#fff;box-shadow:0 18px 44px rgba(10,16,24,.08);}
.pl-result{margin-top:14px;}
.pl-stage-sub{display:block;margin-top:5px;color:#55627A;font-size:13.4px;line-height:1.75;
  font-weight:400;max-width:920px;}
.pl-stage-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.pl-chapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.pl-chapcard{display:block;background:#fff;border:1px solid #E4E8F0;border-radius:14px;
  padding:16px 18px;text-decoration:none;transition:.22s;box-shadow:0 10px 26px rgba(10,16,24,.05);}
.pl-chapcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(10,16,24,.12);border-color:#C9D2E2;}
.pl-chapcard .cc-no{font-size:12.6px;letter-spacing:.14em;color:#7A6BD6;font-weight:700;}
.pl-chapcard h4{margin:6px 0 6px;font-size:17px;color:#0A1018;}
.pl-chapcard p{margin:0;font-size:13.4px;color:#55627A;line-height:1.75;}
.pl-chapcard .cc-go{display:inline-block;margin-top:10px;font-size:13px;color:#2F6FB0;font-weight:600;}
@media (max-width:720px){ .pl-frame{height:min(86vh,720px);} }

/* ══════════ 章节页：练习台撑满屏幕（iframe + 评分并排） ══════════ */
body.ch-page{display:flex;flex-direction:column;min-height:100vh}
body.ch-page>section.pl-stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ch-page .pl-stage-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ch-page .pl-stage-head{flex:0 0 auto}
.ch-page #trainer{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
.ch-page #trainer>.pl-stage-head{flex:0 0 auto}
.ch-page #trainer>.pl-frame{flex:1 1 auto;width:100%;
  min-height:max(320px,calc(100vh - 340px))}
.ch-page #trainer>.pl-result{flex:0 0 auto;margin:0;padding:12px 16px;
  border:1px solid #E4E8F0;border-radius:14px;background:#fff;box-shadow:0 10px 26px rgba(10,16,24,.05)}
/* 通栏：陪练系统撑满屏宽（不受 .pl-stage-wrap 的 max-width/padding 限制） */
.ch-page .pl-stage-wrap{max-width:none;padding:0 12px}
@media (max-width:720px){ .ch-page .pl-stage-wrap{padding:0 8px} }
/* ══════════ 折叠块：节约页面空间 ══════════ */
.fold-sum{cursor:pointer;list-style:none;display:block;padding:15px 24px;max-width:1240px;margin:0 auto;
  font-weight:700;color:#0F1B2B;font-size:16px}
.fold-sum::-webkit-details-marker{display:none}
.fold-sum::before{content:'＋';display:inline-block;width:22px;color:#8A94A6;font-weight:700}
.fold[open]>.fold-sum::before{content:'－'}
.fold-sum em{font-style:normal;font-weight:400;font-size:13px;color:#8A94A6;margin-left:8px}
.fold .reveal{opacity:1 !important;transform:none !important}
/* 章节卡密集排布（课程页一屏看到全部章节） */
.chapters .unit-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.chapters .unit{padding:12px 14px;min-height:0}
.chapters .unit h4{font-size:15px;margin:4px 0 2px}
.chapters .unit p{font-size:12.6px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chapters .link-band{margin-top:16px !important}

/* ── 章节页：紧凑 HERO，把纵向空间让给练习台 ── */
body.ch-page .phero{padding:24px 0 18px}
body.ch-page .phero .crumb{margin-bottom:7px;font-size:12px}
body.ch-page .phero h1{font-size:clamp(20px,2.4vw,26px);margin:3px 0 2px}
body.ch-page .phero .chip{margin-bottom:2px}
body.ch-page .phero .pen{font-size:11px;letter-spacing:.18em;margin-bottom:2px}
body.ch-page .phero .desc{margin-top:4px;font-size:13px;line-height:1.55}

/* 章节页：练习台头部常显「评分维度」（不必展开折叠块也能看到评分口径） */
.pl-dimtag{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;
  background:#F2F5FA;color:#3F4C63;font-size:12.4px;font-weight:600;border:1px solid #E4E8F0}

/* ══════════ 每章「AI 评测」（2026-10-11 新增；类名一律 ai- 前缀，避免撞通用类） ══════════ */
.ai-band{background:linear-gradient(180deg,#F6F4FD,#EEF1FA);border-top:1px solid #E4E8F0;
  border-bottom:1px solid #E4E8F0;padding:34px 0 40px}
.ai-band-head{max-width:900px;margin:0 0 18px}
.ai-band-head .eyebrow{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.2em;color:#7A6BD6;text-transform:uppercase;margin-bottom:10px;
  padding-bottom:6px;border-bottom:1px solid rgba(122,107,214,.32)}
.ai-band-head h2{font-size:clamp(20px,2.2vw,27px);margin:0 0 8px;color:#0F1B2B}
.ai-band-head p{margin:0;color:#55627A;font-size:14.6px;line-height:1.85}

.ai-card{background:#fff;border:1px solid #E4E8F0;border-radius:16px;padding:20px 22px 18px;
  box-shadow:0 12px 32px rgba(10,16,24,.06)}
.ai-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ai-head h3{margin:0;font-size:17px;color:#0A1018;font-weight:800}
.ai-sub{font-size:12.8px;color:#7A879C;line-height:1.7;flex:1 1 260px;min-width:200px}
.ai-tag{display:inline-block;font-size:12px;font-weight:800;padding:3px 11px;border-radius:999px;
  white-space:nowrap;border:1px solid transparent}
.ai-tag.none{background:#F0F2F6;color:#7A879C;border-color:#E2E6F0}
.ai-tag.ready{background:#EEF0FE;color:#4B3FC0;border-color:#DCDffA}
.ai-tag.loading{background:#FFF7E6;color:#9A6B12;border-color:#F2E1B8}
.ai-tag.ai{background:#EDEAFB;color:#4B3FC0;border-color:#D6D0F5}
.ai-tag.local{background:#EAF7F2;color:#1F7A66;border-color:#C9E7DC}

.ai-sum{margin-top:14px;background:#0A1018;color:#fff;border-radius:12px;padding:14px 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ai-sum-t{font-size:13px;color:#9FAAC2;letter-spacing:.04em}
.ai-sum-n{font-size:26px;font-weight:800;color:#E8B755;line-height:1}
.ai-sum-n em{font-style:normal;font-size:14px;color:#8E9AB4;font-weight:600}
.ai-sum-b{font-size:13.4px;color:#C6D0E4}
.ai-chips{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.ai-chip{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:3px 12px;font-size:12.8px;color:#DDE4F2}
.ai-chip.weak{background:rgba(192,80,77,.22);border-color:rgba(232,150,140,.34);color:#FFD9D4}
.ai-chip.good{background:rgba(79,166,145,.22);border-color:rgba(140,214,192,.32);color:#CDF3E6}

.ai-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.ai-acts .btn{cursor:pointer}
.ai-acts .btn[disabled]{opacity:.6;cursor:default}

.ai-out{margin-top:16px}
.ai-loading{background:#FFFDF5;border:1px dashed #E9D7A9;border-radius:12px;padding:18px 20px;
  font-size:15px;color:#8A5B12;font-weight:600}
.ai-dots i{font-style:normal;animation:aibl 1.1s infinite}
.ai-dots i:nth-child(2){animation-delay:.18s}
.ai-dots i:nth-child(3){animation-delay:.36s}
@keyframes aibl{0%,60%,100%{opacity:.2}30%{opacity:1}}

.ai-head-line{background:#FFFBEF;border-left:6px solid #C8952E;border-radius:0 10px 10px 0;
  padding:14px 18px;font-size:15.4px;line-height:1.95;color:#7A5410;font-weight:600}
.ai-sec{background:#F7F9FC;border-left:6px solid #7A6BD6;border-radius:0 10px 10px 0;
  padding:14px 18px;margin-top:12px}
.ai-sec-t{font-size:15.4px;font-weight:800;color:#3E32A8;margin-bottom:7px}
.ai-sec ul{margin:0;padding-left:20px;line-height:2.05;font-size:14.8px;color:#2A3446}
.ai-sec ul li{margin:0}
.ai-foot{margin-top:14px;padding-top:12px;border-top:1px solid #EEF1F6;
  font-size:12.6px;color:#8A94A6;line-height:1.9}
@media (max-width:720px){
  .ai-band{padding:26px 0 30px}
  .ai-card{padding:16px 14px 14px}
  .ai-sum{padding:12px 14px;gap:10px}
  .ai-sum-n{font-size:22px}
}