/* 蓝色展台背景 + 右上角背景开关/颜色弹层 + 「底座」材质面板。
   移植自 pyridine-pyrrole-basicity-cloud-v2/styles.css（同一套配色与毛玻璃），改为本课件的流式布局：
   地平线与光池跟随 main.js 写入的 --floor / --cx（底座顶面位置、分子中心），16:9 与 4:3 都对齐。 */

/* ── 背景开关 + 颜色弹层（v2） ── */
.bg-tools{position:relative;display:flex;gap:12px;align-items:center}
.top-tools .bg-switch{gap:10px;padding:0 10px 0 16px;font-size:1em}
.bg-switch>i{width:48px;height:28px;border-radius:20px;background:#ffffff40;position:relative;box-shadow:inset 0 1px 4px #00143a55;transition:background .15s}
.bg-switch>i:after{content:"";width:20px;height:20px;border-radius:50%;position:absolute;top:4px;left:4px;background:#fff;box-shadow:0 1px 5px #09266f44;transition:transform .15s}
.bg-switch[aria-checked=true]>i{background:linear-gradient(100deg,#1262ff,#008fea)}
.bg-switch[aria-checked=true]>i:after{transform:translateX(20px)}
.top-tools #bg-color{width:46px;justify-content:center;padding:0;--swatch:#0b1e3f}
.bg-dot{display:block;width:24px;height:24px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 2px #fff,0 0 0 3px #00000030}
.bg-pop{position:absolute;right:0;top:calc(100% + 12px);width:340px;padding:18px;border-radius:22px;border:1px solid #cae9ffa0;background:#082c5ce8;color:#eaf6ff;box-shadow:0 18px 50px #00123a66,inset 0 0 0 1px #ffffff22;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:6}
.bg-pop>p{margin:0 0 12px;font-size:16px;letter-spacing:1px;font-weight:600;color:#bfe3ff}
.bg-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.top-tools .bg-swatch{flex-direction:column;gap:6px;padding:10px 4px 8px;border-radius:14px;font-size:14px;background:#ffffff10;border:1px solid #ffffff26;box-shadow:none;backdrop-filter:none}
.bg-swatch>i{width:34px;height:34px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #ffffff80,inset 0 0 0 1px #00000026}
.top-tools .bg-swatch[aria-pressed=true]{background:#1a6fdc66;border-color:#9fd6ff}
.top-tools .bg-swatch[aria-pressed=true]>i{box-shadow:0 0 0 3px #7fd0ff,inset 0 0 0 1px #00000026}
.bg-custom{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #ffffff22;font-size:15px}
.bg-custom input{width:46px;height:34px;padding:0;border:1px solid #ffffff60;border-radius:9px;background:none;cursor:pointer}
.bg-custom output{margin-left:auto;font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace;color:#bfe3ff}
.top-tools .bg-restore{width:100%;justify-content:center;margin-top:14px;padding:10px;font-size:15px;border-radius:14px;background:#ffffff14;box-shadow:none;backdrop-filter:none}
.bg-pictures{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.top-tools .bg-picture{flex-direction:column;gap:7px;padding:8px 8px 7px;border-radius:14px;font-size:14px;background:#ffffff10;border:1px solid #ffffff26;box-shadow:none;backdrop-filter:none}
.bg-picture>i{display:block;width:100%;aspect-ratio:16/9;border-radius:9px;background:center/cover no-repeat;box-shadow:0 0 0 1px #ffffff80}
.bg-picture-podium>i{background:
 radial-gradient(ellipse 17% 6% at 33% 66%,#dff4ff,#7cc8ff 45%,#9fb0c8 62%,transparent 72%),
 radial-gradient(ellipse 17% 6% at 68% 66%,#dff4ff,#7cc8ff 45%,#9fb0c8 62%,transparent 72%),
 linear-gradient(180deg,transparent 64%,#c9d5e6 64.5%,#7c8aa0 74%,transparent 74.5%) 33% 0/34% 100% no-repeat,
 linear-gradient(180deg,transparent 64%,#c9d5e6 64.5%,#7c8aa0 74%,transparent 74.5%) 68% 0/34% 100% no-repeat,
 radial-gradient(ellipse 45% 55% at 50% 0,#6fb8ff,transparent 75%),
 linear-gradient(180deg,#245eb3,#1b4f9c 68%,#2d66b3 70%,#123c7c)}
.top-tools .bg-picture[aria-pressed=true]{background:#1a6fdc66;border-color:#9fd6ff}
.top-tools .bg-picture[aria-pressed=true]>i{box-shadow:0 0 0 3px #7fd0ff}
.bg-picture-space>i{background:radial-gradient(ellipse 60% 70% at 42% 52%,#1c468c8c,#0a204840 55%,transparent 100%),linear-gradient(180deg,#071328,#020611)}

/* ── 蓝色展台：CSS 天空 + 光面地板（v2），真 3D 镀铬底座在 #podium-canvas（podium.js） ── */
/* Background layer only: studio sky + glossy floor gradient. The chrome podiums are real 3D (podium.js) in #podium-canvas on top of it. */
.stage-bg{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;
 background:
  radial-gradient(ellipse 34% 62% at var(--cx,50%) -6%,#62b2ffd9,#3a80d6a0 30%,#2463b450 58%,transparent 82%),
  radial-gradient(ellipse 70% 70% at var(--cx,50%) 30%,#1d56a5 0%,#16478f 55%,transparent 100%),
  linear-gradient(90deg,#0c3473 0%,#103d80 18%,transparent 40%,transparent 60%,#103d80 82%,#0c3473 100%),
  linear-gradient(180deg,#123f85 0%,#164890 50%,#17498f 62%)}
#course.bg-podium .stage-bg{display:block}
/* foreground floor: soft horizon (no hard line), brighter glossy pool in the middle, darker toward the edges/bottom */
.stage-bg .sb-floor{position:absolute;left:0;right:0;top:var(--floor,59%);bottom:0;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%);mask-image:linear-gradient(180deg,transparent 0,#000 16%);
 background:
  radial-gradient(ellipse 42% 30% at var(--cx,50%) 26%,#4d93e6b0,transparent 80%),
  radial-gradient(ellipse 60% 90% at var(--cx,50%) 30%,#3a7ed1 0%,#3378cb 30%,#2a66b6 55%,#1d4f98 78%,transparent 100%),
  linear-gradient(90deg,#123b7a 0%,#1a4890 22%,transparent 45%,transparent 55%,#1a4890 78%,#123b7a 100%),
  linear-gradient(180deg,#1d559f 0%,#1a4d94 40%,#143f7e 100%)}
/* faint horizontal sheen just under the horizon = glossy floor reflection */
.stage-bg .sb-haze{position:absolute;left:calc(var(--cx,50%) - 42%);width:84%;top:calc(var(--floor,59%) + 5.5%);height:7%;background:radial-gradient(ellipse 50% 50% at 50% 50%,#7cbcff40,transparent 75%);filter:blur(8px)}
/* ultra-fine noise to kill gradient banding */
.stage-bg .sb-noise{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;background-size:220px 220px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#podium-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#course{background:#030914}
#course.bg-podium{background:#14468f}
#course.bg-space{background:radial-gradient(ellipse 55% 55% at var(--cx,42%) 52%,#1c468c8c,#0a204840 55%,transparent 100%),linear-gradient(180deg,#071328,#020611)}
#course.bg-solid{background:radial-gradient(ellipse 70% 62% at var(--cx,50%) 44%,color-mix(in srgb,var(--bg-solid) 92%,#fff 8%),var(--bg-solid) 72%)}

/* ── 「底座」材质面板（v2） ── */
.pd-tools{position:relative;display:flex;align-items:center}
.pd-tools[hidden],#course:not(.bg-podium) .pd-tools{display:none}
.top-tools #pd-toggle{gap:8px;padding:0 1em 0 .8em;font-size:1em}
.top-tools #pd-toggle svg{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.6}
.top-tools #pd-toggle[aria-expanded=true]{background:#1a6fdccc;border-color:#9fd6ff}
.pd-pop{position:absolute;right:0;top:calc(100% + 12px);width:380px;max-height:calc(100vh - 120px);overflow:auto;padding:18px 18px 16px;border-radius:22px;border:1px solid #cae9ffa0;background:#082c5ce8;color:#eaf6ff;box-shadow:0 18px 50px #00123a66,inset 0 0 0 1px #ffffff22;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:6;overscroll-behavior:contain;scrollbar-width:thin}
.pd-pop section+section{margin-top:16px;padding-top:14px;border-top:1px solid #ffffff1f}
.pd-pop p{margin:0 0 10px;font-size:16px;letter-spacing:1px;font-weight:600;color:#bfe3ff}
.pd-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}
.top-tools .pd-chip,.pd-pick{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:0;padding:8px 2px 6px;border-radius:12px;font-size:13px;line-height:1.1;color:#eaf6ff;background:#ffffff10;border:1px solid #ffffff26;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;white-space:nowrap;cursor:pointer}
.pd-chip>i,.pd-pick:before{content:"";width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #00000030,0 0 10px color-mix(in srgb,var(--c) 55%,transparent)}
.pd-pick:before{background:conic-gradient(from 90deg,#ff5a5a,#ffd84a,#5dff8a,#47d0ff,#6a6bff,#ff5ae0,#ff5a5a)}
.pd-pick.on:before{background:var(--c);box-shadow:0 0 0 3px #7fd0ff}
.pd-pick{position:relative}.pd-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.top-tools .pd-chip[aria-pressed=true],.pd-pick.on{background:#1a6fdc66;border-color:#9fd6ff}
.top-tools .pd-chip[aria-pressed=true]>i{box-shadow:0 0 0 3px #7fd0ff,inset 0 0 0 1px #00000026}
.pd-row{display:grid;grid-template-columns:88px 1fr 58px;align-items:center;gap:10px;min-height:36px;font-size:15px;color:#dff1ff}
.pd-row output{font-size:13px;text-align:right;color:#9fd6ff;font-variant-numeric:tabular-nums}
.pd-row input[type=range]{--f:50%;-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:0;border-radius:6px;background:linear-gradient(90deg,#4fb6ff var(--f),#ffffff26 var(--f));cursor:pointer}
.pd-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #2f9bff;box-shadow:0 2px 8px #00123a88}
.pd-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #2f9bff}
.pd-switch{position:relative;grid-template-columns:88px 1fr;cursor:pointer}
.pd-switch input{position:absolute;opacity:0;pointer-events:none}
.pd-switch i{justify-self:end;position:relative;width:48px;height:28px;border-radius:14px;background:#ffffff26;border:1px solid #ffffff33;transition:background .2s}
.pd-switch i:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.pd-switch input:checked+i{background:#2f9bff}.pd-switch input:checked+i:after{transform:translateX(20px)}
.pd-switch input:focus-visible+i{outline:3px solid #ffd84a;outline-offset:2px}
.pd-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.top-tools .pd-actions button{justify-content:center;min-height:0;padding:10px;font-size:15px;border-radius:14px;background:#ffffff14;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.top-tools .pd-actions [data-act=copy]{background:#1a6fdc88;border-color:#9fd6ff}
.pd-copied{width:100%;margin-top:10px;padding:8px 10px;border-radius:10px;border:1px solid #ffffff33;background:#00123a66;color:#cfeaff;font:12px/1.4 ui-monospace,Menlo,monospace}

/* ── 蓝色展台下的标题/提示/标签（看板与按钮的磨砂玻璃见 glass.css） ── */
#course.bg-podium .top-tools .bg-pop button,#course.bg-podium .top-tools .pd-pop button{backdrop-filter:none;-webkit-backdrop-filter:none}
#course.bg-podium .eyebrow{color:#e9f6ff}#course.bg-podium .subtitle{color:#f0f9ff}
#course.bg-podium h1{text-shadow:0 3px 18px #042a5999}
#course.bg-podium .hint{color:#d4eaff;text-shadow:0 1px 5px #0e367f}
#course.bg-podium .atom-label.tag{background:rgba(4,24,62,.82);border-color:rgba(202,233,255,.5)}

/* 浅色纯色背景：顶部文字改深色 */
#course.bg-light header,#course.bg-light .eyebrow,#course.bg-light .subtitle{color:#163a66}
#course.bg-light h1{color:#06265a;text-shadow:none}
#course.bg-light .hint{color:#3d5a78}
#course.bg-light .top-tools>button,#course.bg-light .bg-tools>button,#course.bg-light .pd-tools>button{background:#0b4a8eeb;border-color:#0b4a8e;color:#fff}

body:has(#course.bg-podium){background:#14468f}