/* ── 磨砂玻璃看板（右侧面板、底部控制栏、小卡片、弹层、模块标签、底座材质面板）──
   半透明亮白玻璃 + 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)}
}