/* 橙果学堂 · 课程外壳（每节课页面都会加载）：顶部品牌条、片头、通关卡、演示模式。 */
:root{--cg-bg:#FFFCF8;--cg-ink:#24170D;--cg-ink2:#6E5A4A;--cg-line:#EEE3D6;--cg-or:#F27B12;--cg-or2:#FFB300;--cg-chip:#FFF2E4;--cg-chip-ink:#9A4A0B;
  --cg-f:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif}

.cg-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;height:54px;padding:0 max(16px,env(safe-area-inset-left,0px));
  background:rgba(255,252,248,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--cg-line);font-family:var(--cg-f);color:var(--cg-ink)}
.cg-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;flex:0 0 auto}
.cg-brand img{width:30px;height:30px;border-radius:9px}
.cg-brand b{font-size:16px;font-weight:900;letter-spacing:.04em}
.cg-brand span{font-size:12px;font-weight:700;color:var(--cg-chip-ink);background:var(--cg-chip);padding:2px 8px;border-radius:99px}
.cg-pills{display:flex;gap:6px;margin:0 auto;overflow-x:auto;scrollbar-width:none;min-width:0}
.cg-pills::-webkit-scrollbar{display:none}
.cg-pills a{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;font-size:14px;font-weight:700;color:var(--cg-ink2);text-decoration:none;border:1px solid transparent;white-space:nowrap}
.cg-pills a i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.cg-pills a:hover{background:#fff;border-color:var(--cg-line);color:var(--cg-ink)}
.cg-pills a[aria-current="page"]{background:var(--cg-ink);color:#fff}
.cg-tools{display:flex;gap:8px;flex:0 0 auto}
.cg-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:99px;border:1px solid var(--cg-line);background:#fff;color:var(--cg-ink);font:700 14px var(--cg-f);cursor:pointer;text-decoration:none;white-space:nowrap}
.cg-btn:hover{border-color:var(--cg-or);color:var(--cg-or)}
.cg-btn.pri{background:linear-gradient(135deg,var(--cg-or),#FF9A1F);border-color:transparent;color:#fff}
.cg-btn.pri:hover{filter:brightness(1.06);color:#fff}
.cg-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.cg-brand span,.cg-hide-sm{display:none}.cg-bar{gap:8px}.cg-btn{padding:0 10px}.cg-pills a{padding:6px 9px}}
@media (max-width:460px){.cg-brand b{display:none}}


/* 通关卡 */
.cg-end{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px;background:#24170Dcc;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:var(--cg-f);animation:cgFade .3s ease-out}
.cg-end[hidden]{display:none}
.cg-end .box{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--cg-bg);color:var(--cg-ink);border-radius:24px;padding:28px 26px 22px;box-shadow:0 30px 80px -20px #000a;text-align:center;animation:cgPop2 .5s cubic-bezier(.2,1.4,.4,1)}
.cg-end .medal{width:110px;height:110px;margin:-4px auto 6px;position:relative}
.cg-end .medal img{width:100%;height:100%;animation:cgBob 2.4s ease-in-out infinite}
.cg-end .k{font-size:13px;font-weight:700;letter-spacing:.3em;color:var(--cg-or)}
.cg-end h2{margin:4px 0 6px;font-size:32px;font-weight:900;letter-spacing:.04em}
.cg-end .st{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.cg-end .st span{font-size:13px;font-weight:700;background:var(--cg-chip);color:var(--cg-chip-ink);padding:4px 10px;border-radius:99px}
.cg-end ul{list-style:none;margin:0 0 18px;padding:14px 16px;text-align:left;background:#fff;border:1px solid var(--cg-line);border-radius:16px;display:flex;flex-direction:column;gap:8px}
.cg-end li{display:flex;gap:10px;font-size:15px;line-height:1.6}
.cg-end li b{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;background:var(--cg-or);margin-top:2px}
.cg-end .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cg-end .acts .cg-btn{height:42px;padding:0 20px;font-size:15px}
.cg-conf{position:fixed;inset:0;pointer-events:none;z-index:160;overflow:hidden}
.cg-conf i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:cgFall linear forwards}
@keyframes cgFall{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes cgFade{from{opacity:0}}
@keyframes cgPop2{from{transform:translateY(30px) scale(.94);opacity:0}}
@keyframes cgBob{50%{transform:translateY(-6px) rotate(3deg)}}

/* 快捷键提示 */
.cg-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;background:#24170Dee;color:#fff;font:600 14px var(--cg-f);padding:10px 16px;border-radius:99px;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.cg-toast.on{opacity:1}

/* 演示模式：全屏、去掉课程自己的大标题、一屏放下 */
html.cg-theater .cg-bar{height:44px}
html.cg-theater .wrap>header{display:none!important}
html.cg-theater .wrap{max-width:none!important;padding-top:10px!important;padding-bottom:12px!important;gap:10px!important}
html.cg-theater .screen svg{max-height:calc(100vh - 300px);width:auto!important;margin:0 auto}
html.cg-theater .mapbox svg{max-height:calc(100vh - 300px)!important}
html.cg-theater .txt{font-size:20px}
@media (prefers-reduced-motion:reduce){.cg-end .box,.cg-end .medal img{animation-duration:.01s!important}}