.pa-course-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:30px 0; }
.pa-course-card { display:block; padding:22px; border:1px solid var(--line); border-radius:10px; color:var(--text); text-decoration:none; background:var(--card); }
.pa-course-card>span { color:var(--accent); font-weight:700; font-size:12px; }
.pa-course-card h3 { font-size:18px; line-height:1.6; margin:8px 0; }
.pa-course-card p { font-size:13px; color:var(--sub); }
.pa-workflow { padding-left:22px; margin:24px 0; }
.pa-workflow li { margin:18px 0; }
.pa-replay { border:1px solid var(--line); padding:22px; border-radius:12px; background:var(--card); }
.pa-replay .tl-button-group { flex-wrap:wrap; }
.pa-controls { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.pa-controls button { padding:9px 13px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--text); cursor:pointer; }
.pa-controls [data-pa-play] { background:var(--accent); color:white; }
.pa-controls span { width:100%; font-size:12px; color:var(--sub); }
.pa-commentary { min-height:100px; padding:16px; background:var(--bg); border-left:3px solid var(--accent); font-size:15px; line-height:1.8; }
.pa-commentary b { display:block; margin-bottom:8px; }
.pa-frame>svg { width:100%; color:var(--sub); }
.pa-frame>svg text { fill:var(--sub); font-size:11px; }
.pa-reference { border-top:1px solid var(--line); margin-top:36px; padding-top:24px; }
.pa-reference h2 { font-size:18px; }
.pa-reference p { font-size:12px; color:var(--sub); }
.pa-bottom { display:flex; justify-content:space-between; margin:30px 0; }
@media(max-width:600px){ .pa-course-grid { grid-template-columns:1fr; } .pa-replay { padding:14px; } .pa-commentary { min-height:160px; } }
/* 图文精读：保持案例顺序，图像独立放大，长段落适应手机阅读。 */
.pa-study { margin:28px 0 42px; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.pa-study h2 { font-size:23px; line-height:1.5; margin:0 0 16px; }
.pa-study h3 { font-size:15px; margin:0 0 9px; }
.pa-plain { font-size:17px; line-height:1.9; }
.pa-process { margin:20px 0; overflow-x:auto; }
.pa-process svg { display:block; width:100%; min-width:510px; }
.pa-process figcaption,.pa-reading-order { font-size:12px; color:var(--sub); }
.pa-example { padding:18px; border-left:3px solid var(--accent); background:var(--accent-soft); margin:20px 0; }
.pa-example p { margin:0; }
.pa-study-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pa-study-grid p { font-size:14px; }
.pa-reader h3 { font-size:23px; padding-top:30px; margin-top:40px; border-top:1px solid var(--line); scroll-margin-top:80px; }
.pa-reader h4 { font-size:18px; margin:28px 0 12px; scroll-margin-top:80px; }
.pa-reader p { line-height:2; margin:14px 0; }
.pa-reading-toc { padding:16px 20px; background:var(--card); border:1px solid var(--line); border-radius:8px; }
.pa-reading-toc summary { cursor:pointer; color:var(--accent-deep); }
.pa-reading-toc nav { display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; padding-top:16px; }
.pa-reading-toc a { font-size:13px; }
.pa-article-figure { margin:26px 0; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.pa-image-open { display:block; cursor:zoom-in; }
.pa-article-figure img { display:block; width:100%; height:auto; border-radius:5px; }
.pa-article-figure figcaption { padding:12px 4px 3px; font-size:12px; color:var(--sub); }
.pa-article-figure figcaption span { display:block; margin-top:5px; }
.pa-to-demo { display:block; padding:20px; margin:28px 0 48px; border:1px solid var(--line); border-radius:8px; }
.pa-image-dialog { width:96vw; max-width:1600px; height:92vh; max-height:92vh; border:1px solid var(--line); border-radius:12px; padding:0; background:var(--card); color:var(--text); }
.pa-image-dialog::backdrop { background:rgba(0,0,0,.75); }
.pa-image-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--line); }
.pa-image-toolbar strong { flex:1 1 240px; font-size:14px; }
.pa-image-toolbar button { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:8px 12px; }
.pa-image-viewport { height:calc(100% - 100px); overflow:auto; padding:16px; background:#f6f6f6; touch-action:pan-x pan-y; }
.pa-image-viewport img { display:block; max-width:none; height:auto; }
@media(max-width:600px){ .pa-study { padding:18px; } .pa-study-grid,.pa-reading-toc nav { grid-template-columns:1fr; } .pa-reader h3 { font-size:21px; } .pa-image-toolbar { gap:6px; } .pa-image-toolbar strong { flex-basis:100%; } .pa-image-viewport { padding:8px; height:calc(100% - 125px); } }
.pa-process-mobile { display:none; }
@media(max-width:600px){
  .pa-process svg { display:none; }
  .pa-process-mobile { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0; margin:10px 0 16px; }
  .pa-process-mobile li { padding:13px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
  .pa-process-mobile b { display:block; font-size:11px; color:var(--accent); margin-bottom:7px; }
  .pa-process-mobile span { font-size:14px; }
}