/* ── 磨砂玻璃看板（右侧面板、底部控制栏、小卡片、弹层、模块标签、底座材质面板）──
   半透明亮白玻璃 + backdrop-filter 模糊/提饱和，透出蓝色舞台；1px 亮边 + 顶部高光 + 柔和阴影 + 极细噪点。
   --glass-a：玻璃白度（「底座」面板里的「看板透明度」可调，默认 .16）。文字统一白色 + 轻阴影，强调色提亮以保证对比度。 */
:root{
 --glass-a:.16;
 --glass-blur:blur(24px) saturate(140%);
 --g-bg:linear-gradient(180deg,rgba(255,255,255,calc(var(--glass-a) + .07)) 0,rgba(255,255,255,var(--glass-a)) 120px,rgba(255,255,255,calc(var(--glass-a) - .03)) 100%);
 --g-tint:rgba(18,56,120,.16);
 --g-edge:rgba(255,255,255,.42);
 --g-hi:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.07);
 --g-shadow:0 22px 50px rgba(3,22,66,.30),0 2px 8px rgba(3,22,66,.16);
 --g-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 --chip-bg:rgba(255,255,255,.12);--chip-edge:rgba(255,255,255,.26);
 --ink:#ffffff;--text:#f3f8ff;--muted:#dbe8f7;--line:rgba(255,255,255,.26);
 --t-red:#ffbcb2;--t-gold:#ffe0a0;--t-blue:#c4e8ff;
}
#panel,#controls,.tabs button,.top-tools>button,.top-tools .bg-tools>button,.top-tools .pd-tools>button,.bg-pop,.pd-pop,dialog,.qr .qr-card,.qr .qr-pill{
 background:var(--g-bg),var(--g-noise),var(--g-tint);
 border:1px solid var(--g-edge);
 backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
 box-shadow:var(--g-hi),var(--g-shadow);
 color:var(--ink);
}
#panel,#controls{border-radius:24px}
#panel,#controls,dialog,.bg-pop,.pd-pop{text-shadow:0 1px 2px rgba(4,26,70,.35)}
#panel h2,#panel h3{color:#fff}
#panel p,#controls label,#knowledge-body p,#knowledge-body li{color:var(--text)}
#panel .note,.kcards small,.kcards i,.pick-list button small,.stage-list.opts button small,table.vals th{color:var(--muted)}
#panel .note{opacity:1}
/* 小卡片：选项、列表、解析框、数值卡 */
.stage-list button,.pick-list button,.callout,.kcards div,.chip{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));border:1px solid var(--chip-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);color:var(--text)}
.stage-list button{border-radius:14px}
.stage-list button i{background:rgba(255,255,255,.22);color:#fff}
.stage-list button.active,.pick-list button.active{background:linear-gradient(180deg,rgba(255,206,110,.34),rgba(255,180,60,.18));border-color:rgba(255,222,150,.95);color:#fff;box-shadow:inset 0 1px 0 rgba(255,240,200,.45),0 0 0 1px rgba(255,200,90,.25),0 6px 18px rgba(255,170,40,.18)}
.stage-list button.active i{background:var(--gold);color:#2a1700;text-shadow:none}
.stage-list button.done i{background:rgba(255,206,110,.45)}
.stage-list.opts button.active small{color:#fff1cf}
.callout{border-radius:14px;border-left:4px solid var(--gold)}
.callout.blue{border-left-color:#7fd0ff;background:linear-gradient(90deg,rgba(90,190,255,.24),rgba(255,255,255,.08) 70%)}
.callout.red{border-left-color:#ff7a6c;background:linear-gradient(90deg,rgba(255,96,80,.26),rgba(255,255,255,.08) 70%)}
.callout:not(.blue):not(.red){background:linear-gradient(90deg,rgba(255,196,80,.22),rgba(255,255,255,.08) 70%)}
.kcards div{border-radius:14px}
.kcards b{color:#fff}
table.vals td,table.vals th{border-bottom-color:rgba(255,255,255,.2)}
.pair-bars div{color:var(--text)}
.pair-bars span{background:rgba(255,255,255,.2);box-shadow:inset 0 1px 2px rgba(0,20,60,.25)}
.colorbar .ticks{color:var(--muted)}
.colorbar .means span:first-child{color:var(--t-red)}.colorbar .means span:last-child{color:var(--t-blue)}
/* 按钮 */
#controls button,.top-tools>button,.top-tools .bg-tools>button,.top-tools .pd-tools>button,.dialog-head button{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.10));border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(3,22,66,.16);color:#fff;text-shadow:0 1px 2px rgba(4,26,70,.35)}
#controls button:hover,.top-tools>button:hover,.tabs button:hover{background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.16))}
#controls button[aria-pressed=true],.top-tools #pd-toggle[aria-expanded=true]{background:linear-gradient(180deg,rgba(120,205,255,.55),rgba(40,140,240,.42));border-color:rgba(210,240,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 14px rgba(90,190,255,.35)}
#controls button.primary{background:linear-gradient(180deg,#ffd77e,#f5a02a);color:#2a1700;text-shadow:none;border-color:rgba(255,240,200,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(245,150,30,.35)}
#controls .sep{background:rgba(255,255,255,.3)}
#controls output{color:#fff}
/* 模块标签 */
.tabs button{border-radius:999px;color:#fff;text-shadow:0 1px 2px rgba(4,26,70,.4)}
.tabs button b{background:rgba(255,255,255,.22);color:#fff}
.tabs button[aria-selected=true]{background:linear-gradient(180deg,rgba(130,205,255,.62),rgba(40,130,235,.5)),var(--g-noise);border-color:rgba(225,245,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 18px rgba(90,180,255,.4),var(--g-shadow)}
.tabs button[aria-selected=true] b{background:var(--gold);color:#2a1700;text-shadow:none}
/* 滑块：玻璃轨道 + 金色填充（--f 由 main.js 同步） */
#controls input[type=range]{-webkit-appearance:none;appearance:none;height:30px;background:transparent;cursor:pointer}
#controls input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#ffc95e,#ffe3a0 var(--f,50%),rgba(255,255,255,.24) var(--f,50%));box-shadow:inset 0 1px 2px rgba(0,20,60,.3),0 0 0 1px rgba(255,255,255,.25)}
#controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#eef6ff);border:3px solid #ffbf4d;box-shadow:0 2px 8px rgba(3,22,66,.4)}
#controls input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:rgba(255,255,255,.24)}
#controls input[type=range]::-moz-range-progress{height:8px;border-radius:8px;background:#ffc95e}
#controls input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #ffbf4d}
#controls input[type=range]:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px}
/* 弹层与对话框：内容更多，玻璃稍厚 */
.bg-pop,.pd-pop{--glass-a:.2;border-radius:22px;color:#fff}
.bg-pop>p,.pd-pop p{color:#fff}
.pd-row{color:var(--text)}.pd-row output{color:#e6f4ff}
dialog{--glass-a:.18;--g-tint:rgba(18,52,110,.5);border-radius:24px}
dialog::backdrop{background:rgba(2,14,40,.45);backdrop-filter:blur(6px)}
#knowledge-body h3{color:var(--t-gold)}
.dialog-head button{border-radius:50%}
/* 看板透明度（底座面板） */
.pd-glass .pd-row output{min-width:3em}
/* 浅色纯色背景下玻璃透出的是白色：加深底色保证白字可读 */
#course.bg-light{--g-tint:rgba(14,44,96,.72);--g-edge:rgba(14,44,96,.35)}
#course.bg-light dialog{--g-tint:rgba(14,44,96,.82)}
/* 不支持 backdrop-filter：退回不透明的蓝色玻璃色 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 #panel,#controls,.tabs button,.top-tools>button,.top-tools .bg-tools>button,.top-tools .pd-tools>button,.bg-pop,.pd-pop,dialog,.qr .qr-card,.qr .qr-pill{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),rgba(34,78,146,.94)}
}
/* 问答场景（?m=1，1103 铺满宽度）：标签行下方整块玻璃问答区；本模块隐藏 3D、右侧看板、底栏 */
#course[data-module="1"] #stage,#course[data-module="1"] #labels{visibility:hidden}
#course[data-module="1"] #panel,#course[data-module="1"] #controls,#course[data-module="1"] .hint{display:none!important}
#qa-stage{position:absolute;z-index:1;left:calc(var(--gap) + var(--safe-l,0px));right:calc(var(--gap) + var(--safe-r,0px));top:var(--qa-top,calc(var(--gap)*.8 + clamp(98px,10.5vh,132px) + 56px));bottom:calc(var(--gap)*.8 + var(--safe-b,0px));display:flex;flex-direction:column;gap:clamp(10px,1.2vh,16px);padding:clamp(16px,1.6vw,28px) clamp(18px,2vw,36px);border-radius:24px;
 background:var(--g-bg),var(--g-noise),var(--g-tint);border:1px solid var(--g-edge);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--g-hi),var(--g-shadow);color:var(--ink);text-shadow:0 1px 2px rgba(4,26,70,.35);
 --qa-fs:clamp(17px,1.32vw,26px);font-size:var(--qa-fs)}
.qa-head{flex:none;display:flex;align-items:center;gap:.4em 1em;flex-wrap:wrap;padding:.15em 0 .6em .9em;border-left:5px solid var(--gold);border-bottom:1px solid rgba(255,255,255,.18)}
.qa-badge{padding:.1em .6em;border-radius:999px;background:rgba(255,206,110,.3);border:1px solid rgba(255,222,150,.7);color:#fff;font-size:.72em;letter-spacing:.06em;white-space:nowrap}
.qa-head h2{margin:0;font-size:1.25em;line-height:1.3;color:#fff}
.qa-routes{margin:0 0 0 auto;display:flex;gap:.5em;font-size:.72em}
.qa-routes span{padding:.15em .7em;border-radius:999px;border:1px solid var(--chip-edge);background:rgba(255,255,255,.1);color:var(--text);white-space:nowrap}
.qa-log{flex:1;min-height:4em;overflow:auto;display:flex;flex-direction:column;gap:.7em;padding:.3em .6em .3em .1em;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent;overscroll-behavior:contain}
.qa-log::-webkit-scrollbar{width:8px}.qa-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:8px}.qa-log::-webkit-scrollbar-track{background:transparent}
.qa-msg{display:flex;gap:.6em;align-items:flex-start;line-height:1.65}
.qa-msg>div{max-width:72%;padding:.55em .9em;border-radius:16px;color:var(--text)}
.qa-msg.bot>i{flex:none;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--gold);color:#2a1700;font-style:normal;font-weight:700;font-size:.8em;text-shadow:none;margin-top:.25em}
.qa-msg.bot>div{background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.08));border:1px solid var(--chip-edge);border-top-left-radius:4px}
.qa-msg.bot b{color:var(--t-gold)}
.qa-msg.user{justify-content:flex-end}
.qa-msg.user>div{background:linear-gradient(180deg,rgba(120,205,255,.5),rgba(40,130,235,.42));border:1px solid rgba(210,240,255,.7);border-top-right-radius:4px;color:#fff}
.qa-src{display:block;margin-top:.3em;font-size:.68em;color:var(--muted);opacity:.8}
.qa-dots{display:inline-flex;gap:5px;padding:.35em 0}.qa-dots b{width:7px;height:7px;border-radius:50%;background:#fff;animation:qa-dot 1s infinite}.qa-dots b:nth-child(2){animation-delay:.15s}.qa-dots b:nth-child(3){animation-delay:.3s}
@keyframes qa-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.qa-chips{flex:none;display:flex;gap:10px}
.qa-chips button{flex:1 1 0;min-width:0;text-align:left;min-height:48px;padding:.4em .9em;border-radius:14px;font-size:.82em;line-height:1.35;background:linear-gradient(180deg,rgba(255,206,110,.24),rgba(255,180,60,.1));border:1px solid rgba(255,222,150,.65);color:#fff;text-shadow:0 1px 2px rgba(4,26,70,.35)}
.qa-chips button:hover{background:linear-gradient(180deg,rgba(255,206,110,.38),rgba(255,180,60,.2))}
.qa-form{flex:none;display:flex;gap:10px}
.qa-form input{flex:1;min-width:0;min-height:52px;padding:0 1em;border-radius:14px;border:1px solid rgba(255,255,255,.45);background:rgba(4,24,62,.35);color:#fff;font:inherit;font-size:.9em;outline:none}
.qa-form input::placeholder{color:rgba(230,242,255,.7)}
.qa-form input:focus{border-color:rgba(255,222,150,.95)}
.qa-form button{flex:none;min-height:52px;padding:0 1.6em;border-radius:14px;border:1px solid rgba(255,240,200,.9);background:linear-gradient(180deg,#ffd77e,#f5a02a);color:#2a1700;font:inherit;font-size:.9em;font-weight:700}
.qa-form.busy button{opacity:.5;pointer-events:none}
.tabs button.tab-qa b{background:rgba(255,206,110,.45)}
/* 16:9 桌面：右下扫码卡片会压住问答区 → 本模块收起 */
#course[data-module="1"] .qr .qr-card,#course[data-module="1"] .qr[data-state=pill] .qr-pill{display:none!important}/* 反馈 1104：16:9 与 4:3 都收起，改在问答标题行右侧显示 */
.qa-qr{margin-left:auto;flex:none;display:flex;align-items:center;gap:.55em;padding:.3em .7em .3em .3em;border-radius:14px;border:1px solid var(--chip-edge);background:rgba(255,255,255,.1);color:#fff;font:inherit;cursor:zoom-in}
.qa-qr-box{width:clamp(56px,4.6vw,84px);height:clamp(56px,4.6vw,84px);display:grid;place-items:center;border-radius:8px;border:2px dashed rgba(255,255,255,.7);background:rgba(255,255,255,.08);box-sizing:border-box;overflow:hidden}
.qa-qr.ready .qa-qr-box{border:0;background:#fff;padding:3px}.qa-qr-box svg{width:100%;height:100%;display:block;stroke:none}.qa-qr-box .qr-ph{font-size:10px;line-height:1.25;text-align:center}
.qa-qr-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2}.qa-qr-text b{font-size:.78em}.qa-qr-text small{font-size:.62em;color:var(--muted)}
/* 4:3：其它模块标签在左下角两列；问答模块把标签放回标题下方一行（可换行） */
@media (max-aspect-ratio:3/2) and (orientation:landscape) and (min-height:521px){#course[data-module="1"] .tabs{top:var(--tabs-y,calc(var(--gap)*.8 + clamp(98px,10.5vh,132px) + var(--safe-t,0px)));bottom:auto;display:flex;flex-direction:row;align-items:center;pointer-events:auto;flex-wrap:wrap;min-height:0;max-width:calc(100vw - var(--gap)*2)}}
/* 16:9 桌面：6 个模块标签放不下时换行，不钻到看板下面（问答模块无看板，可用满宽） */
@media (min-aspect-ratio:3/2) and (min-height:521px){.tabs{flex-wrap:wrap;max-width:calc(100vw - var(--panel-w) - var(--gap)*3)}#course[data-module="1"] .tabs{max-width:calc(100vw - var(--gap)*2)}
 .tabs{gap:6px}.tabs button{padding:.35em .72em .35em .6em;font-size:.9em}}
/* 手机竖屏 / 横屏 */
@media (orientation:portrait) and (max-width:1024px),(orientation:landscape) and (max-height:520px){
 #qa-stage{left:calc(8px + var(--sa-l,0px));right:calc(8px + var(--sa-r,0px));bottom:calc(8px + var(--sa-b,0px));padding:12px 12px;border-radius:20px;--qa-fs:16px;gap:8px}
 .qa-head{padding:0 0 .4em .6em;border-left-width:4px}.qa-badge,.qa-routes,.qa-qr{display:none}.qa-head h2{font-size:1.02em}
 .qa-msg>div{max-width:86%}
 .qa-chips{overflow-x:auto;scrollbar-width:none;gap:6px}.qa-chips::-webkit-scrollbar{display:none}
 .qa-chips button{flex:none;white-space:nowrap;min-height:40px;font-size:.88em;padding:.3em .75em}
 .qa-form input,.qa-form button{min-height:44px}
}
@media (orientation:portrait) and (max-width:1024px){#course[data-module="1"] .tabs{right:0!important}}
/* iOS Safari 聚焦字号 <16px 的输入框会自动放大页面 → 触屏/窄屏上文本输入框统一 16px（不禁用双指缩放） */
@media (pointer:coarse),(hover:none),(max-width:1024px),(max-height:520px){
 .qa-form input,input:not([type]),input[type=text],input[type=search],input[type=email],input[type=number],input[type=tel],input[type=url],input[type=password],textarea,select{font-size:16px!important}
}