/* 高中地理 3D 教学系统 · 公共样式
 * 布局：顶栏 + 内容；配色以"夜空中的地球"为基调，课堂投影时深色舞台、浅/深两种界面主题 */
:root{
  --bg:#eef2f1; --panel:#fafcfb; --ink:#16212b; --muted:#56646e; --line:#d3dbd9; --chip:#e4eae8;
  --accent:#1f6f8b; --accent-ink:#ffffff; --sun:#b37806; --obs:#c94a27; --vip:#9a6b12; --vip-bg:#f6ecd4; --free:#2f7a4f; --free-bg:#e1f1e7;
  --stage:#0b1d3c; --stage-ink:#e7edf5; --stage-veil:rgba(8,14,26,.84); --stage-line:rgba(231,237,245,.18);
  --font:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif;
  --font-num:Consolas,"SFMono-Regular",Menlo,"Courier New",monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e151c; --panel:#141d26; --ink:#e4eaee; --muted:#93a1ab; --line:#26333f; --chip:#1d2833;
  --accent:#4fb3d4; --accent-ink:#06202b; --sun:#f0b43c; --obs:#ff7a52; --vip:#f0c35a; --vip-bg:#3a2e12; --free:#6fd39a; --free-bg:#16301f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e151c; --panel:#141d26; --ink:#e4eaee; --muted:#93a1ab; --line:#26333f; --chip:#1d2833;
  --accent:#4fb3d4; --accent-ink:#06202b; --sun:#f0b43c; --obs:#ff7a52; --vip:#f0c35a; --vip-bg:#3a2e12; --free:#6fd39a; --free-bg:#16301f; color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6}
a{color:var(--accent)}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1440px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.topbar{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding-block:10px}
.brand{font-weight:700;font-size:17px;letter-spacing:.04em;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px}
.brand i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7cc4e0,#1f6f8b 60%,#0b2a3a);box-shadow:inset -5px -3px 0 rgba(0,0,0,.35)}
.spacer{flex:1}
.btn{background:var(--chip);border:1px solid transparent;border-radius:8px;padding:6px 12px;cursor:pointer;text-decoration:none;color:var(--ink);font-size:14px;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--line)}
.btn.primary{background:var(--accent);color:var(--accent-ink);font-weight:700}
.btn[aria-pressed="true"]{border-color:var(--ink)}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;letter-spacing:.04em;white-space:nowrap}
.badge.free{color:var(--free);background:var(--free-bg)}
.badge.vip{color:var(--vip);background:var(--vip-bg)}
.badge.plan{color:var(--muted);background:var(--chip)}
.muted{color:var(--muted)}
.acct{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acct-name{font-weight:700}
.toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}

/* 讲解视频：把播放器锁成 16:9，并且保证整块能在一屏里放下。
 * 原来只写 width:100% + max-height:78vh —— 高度被卡住、宽度没卡，框就比 16:9 更扁，
 * 画面两侧多出黑边（加封面图之前整块是纯黑，看不出来）。
 * 这里用 aspect-ratio 定死比例，再把最大宽度由"可用高度"反推出来，
 * 比例永远对，也不会把页面顶出一屏之外。230px ≈ 顶栏+标题+标签栏+下边距。 */
#tab-video{padding-bottom:32px}
#tab-video video{
  display:block;margin:0 auto;
  width:100%;height:auto;aspect-ratio:16/9;
  max-width:calc((100vh - 230px) * 16 / 9);
  object-fit:contain;background:#000;border-radius:12px;
}
@media (max-width:960px){
  /* 窄屏上标题和标签栏会折行占更多高度，这时交给宽度决定，别再按高度反推 */
  #tab-video video{max-width:100%}
}

/* 「排版 左右/左中右」只对讲解演示生效，停在别的标签页时收起来，
 * 免得老师以为点了会变。lesson-layout.js 里也做了一次（sw.hidden），
 * 这里再用 :has() 兜一道：那个文件带 ?v= 版本号，旧缓存拿不到新脚本。 */
.tabs:has(button[data-tab="demo"][aria-selected="false"]) .layout-switch{display:none}