/* Xinglin login gate — the particle-meadow cover only.
   The logged-in app keeps its original stylesheet untouched; every rule here
   is scoped to the gate, the field canvas, or gate-state body classes. */
:root{--f-mono:ui-monospace,'SF Mono',Consolas,'PingFang SC','Noto Sans SC',monospace;--f-serif:'Instrument Serif',Georgia,'Times New Roman','Noto Serif SC','Songti SC',SimSun,serif;--f-gutter:clamp(1.4rem,4.6vw,6.5rem)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #e8c37a;outline-offset:3px}
/* --- field canvas, fixed under the gate -------------------------------- */
#fieldCanvas{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
/* 海报层：真实场景的一帧静态图（66KB WebP）。
   作用有二：① 首帧就是成品画面，不必等 WebGPU 建好，也不会先黑屏；
   ② 套壳浏览器（360 等）不加载 3D 时，它就是最终背景，而不是一片渐变。 */
.field-poster{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:#0b1a12 url('/course-assets/vendor/editorial/field-poster-1600.webp?v=20260913-1') center/cover no-repeat;
  opacity:1;transition:opacity .9s cubic-bezier(.16,1,.3,1)}
body.field-live .field-poster{opacity:0}
/* 登录门关闭（进入平台）后，登录页的装饰层必须整体撤下：
   场景在门关掉后会"停车"（field-live 被移除），若只靠 opacity 淡出，
   海报会重新显形、留在里面的界面上。 */
body:not(.gate-on) .field-poster,
body:not(.gate-on) .field-atmosphere,
body:not(.gate-on) #fieldCanvas{display:none!important}
body.field-live #fieldCanvas{opacity:1}
body:not(.field-live) #fieldCanvas,body:not(.field-live) .field-atmosphere{display:none}
.field-atmosphere{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 78% at 50% 8%,transparent 42%,rgba(0,0,0,.36) 100%),linear-gradient(to bottom,rgba(0,0,0,.42),transparent 22%,transparent 70%,rgba(0,0,0,.5));opacity:0;transition:opacity 2s cubic-bezier(.16,1,.3,1)}
body.field-live .field-atmosphere{opacity:1}
/* 首帧背景：WebGPU 场景要等模块下载+编译才淡入，这里先用同色系渐变顶上，
   浏览器解析完 CSS 就能画出来，因此登录页不会出现纯黑屏（原来是 #05070a）。 */
body.gate-on{background:
  radial-gradient(125% 85% at 50% 14%,rgba(120,164,102,.42) 0%,rgba(46,88,62,.55) 34%,rgba(14,34,24,.88) 66%,#050a08 100%),
  linear-gradient(180deg,#0d2117 0%,#08160f 55%,#040806 100%)}
/* the app chrome must not bleed through the cover */
body.gate-on .topbar{display:none!important}
/* --- gate layout: hero bottom-left, glass card right, mono corner brand - */
.gate{position:relative;z-index:5;background:transparent;overflow:auto}
.gate-card{position:relative;display:block;width:100%;min-height:100dvh;background:transparent;border:0;box-shadow:none;border-radius:0;color:#f8f5ec}
.fnav{position:absolute;top:clamp(1.1rem,2.4vw,2.1rem);left:var(--f-gutter);z-index:3;display:inline-flex;align-items:center;gap:.65rem;font-family:var(--f-mono);font-weight:400;font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;color:#f6f3ec;text-shadow:0 1px 10px #0a160a80;pointer-events:none}
.fnav__mark{width:7px;height:7px;border-radius:50%;background:#e8c37a;box-shadow:0 0 14px 2px #e8c37ab3}
.gate-hero{position:absolute;left:var(--f-gutter);bottom:clamp(5.5rem,15vh,9.5rem);z-index:2;max-width:44rem;pointer-events:none}
.fhero-eyebrow{margin:0 0 clamp(1.1rem,2.4vh,2rem);font-family:var(--f-mono);font-size:.68rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:rgba(246,243,236,.78);text-shadow:0 1px 8px #0a160a80}
/* 标题分两行，每行都不许再折断——否则第二行末尾的"学。"会被挤到第三行。
   同时把字号上限压到 4.6rem：最长的第二行是 9 个汉字，9.14em 必须装得进
   .gate-hero 的 44rem 上限（4.6rem×9.14≈42rem）。 */
.fhero-display{margin:0;font-family:var(--f-serif);font-weight:400;font-size:min(clamp(2.6rem,5vw,4.3rem),calc((100vw - 3.2rem)/9.4));line-height:1.16;letter-spacing:.015em;color:#f8f5ea;text-shadow:0 6px 40px rgba(8,20,8,.5)}
.fhero-line{display:block;white-space:nowrap}
.fhero-display em{font-style:normal;color:#e8c37a;text-shadow:0 4px 28px #6b4d1255}
/* --- frosted glass login card, smaller and vertically centered --------- */
.gate-form{position:absolute;right:clamp(28px,6vw,110px);top:50vh;transform:translateY(-50%);width:min(352px,calc(100vw - 56px));padding:32px 32px 24px;border-radius:12px;color:#22301f;background:linear-gradient(160deg,rgba(252,250,243,.55),rgba(243,241,231,.42));backdrop-filter:blur(30px) saturate(1.35) brightness(1.03);-webkit-backdrop-filter:blur(30px) saturate(1.35) brightness(1.03);border:1px solid rgba(255,255,255,.62);box-shadow:0 6px 18px rgba(15,30,16,.10),0 28px 70px rgba(15,30,16,.26),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.18);animation:formArrive .9s .16s cubic-bezier(.19,1,.22,1) both}
@keyframes formArrive{from{opacity:0;transform:translate(22px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
.gate-form .form-kicker{margin:0 0 12px;font-family:var(--f-mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#7a6a2e}
.gate-form h2{margin:0;font-family:var(--f-serif);font-size:24px;font-weight:500;letter-spacing:.04em;color:#22301f}
.gate-form .sub{margin:7px 0 0;font-size:11.5px;color:#5c6852}
.gate-form .roles{margin:20px 0 8px;gap:0;border-bottom:1px solid #22301f2b}
.gate-form .role{background:transparent!important;border:0;border-bottom:2px solid transparent;border-radius:0;padding:11px 8px 12px;text-align:center;color:#4b573f}
.gate-form .role .ri{display:none}
.gate-form .role b{font-size:13px;font-weight:500;margin:0}
.gate-form .role span:not(.ri){font-size:9.5px;margin-top:4px;color:#69745c}
.gate-form .role.on{border-color:#607638;background:transparent}
.gate-form .role.on b{color:#43592d}
.gate-form .gi{margin-top:14px}
.gate-form .gi label{font-size:10.5px;font-weight:400;letter-spacing:.14em;color:#4a573e}
.gate-form .gi input{border:0;border-bottom:1px solid #22301f33;border-radius:0;background:transparent;padding:9px 0;font-size:13.5px;color:#22301f}
.gate-form .gi input:focus{box-shadow:none;border-color:#5d7434}
.gate-form .gi input::placeholder{color:#8a917d;font-size:11.5px}
.gate-form .gerr{font-size:11px}
.gate-form .btn-login{margin-top:22px;min-height:46px;font-size:12.5px;letter-spacing:.22em;border-radius:8px;background:linear-gradient(165deg,#4a6a41,#374f2f);color:#f8f6ea;box-shadow:0 10px 24px -10px #2c421f88,inset 0 1px 0 rgba(255,255,255,.14);transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s,filter .35s}
.gate-form .btn-login:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 14px 30px -10px #2c421f99,inset 0 1px 0 rgba(255,255,255,.18)}
.gate-form .demo-tip{margin-top:12px;font-size:10px;line-height:1.75;color:#5f6b53}
.gate-form .form-footer{margin-top:18px;padding-top:12px;border-top:1px solid #22301f26;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.16em;color:#6d795f}
/* --- responsive --------------------------------------------------------- */
@media(max-width:880px){.fnav{left:1.6rem}.gate-hero{left:1.6rem;right:1.6rem;bottom:clamp(4.5rem,10vh,6rem);max-width:none}.fhero-display{font-size:clamp(2rem,7.4vw,3rem)}.gate-form{right:34px;padding:28px 26px 20px}}
@media(max-width:680px){.gate-hero{position:relative;left:auto;right:auto;bottom:auto;margin:24vh 6px 34px;padding:0}.gate-card{display:flex;flex-direction:column;justify-content:space-between;min-height:100dvh;padding:1.2rem 0 0}.gate-form{position:relative;right:auto;top:auto;transform:none;width:100%;margin:0 20px 24px;padding:26px 22px 20px;border-radius:14px;animation:none}}
@media(prefers-reduced-motion:reduce){.gate-form{animation:none!important}}

/* ===== 精简模式（360/2345 等老内核，或 ?lite=1 强制）=====
   老内核常常没有硬件加速，登录卡片的 backdrop-filter:blur(30px) 会退化成
   软件高斯模糊，在整屏渐变上逐帧计算，直接把渲染进程拖死。
   这里换成不透明底 + 取消入场动画与阴影堆叠。 */
html.legacy-shell #fieldCanvas,
html.legacy-shell .field-atmosphere{display:none!important}
html.legacy-shell .gate-form{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(250,248,242,.95);
  animation:none!important;
  box-shadow:0 10px 30px rgba(15,30,16,.20);
}
html.legacy-shell .gate-form .btn-login{transition:none!important;box-shadow:none!important}
html.legacy-shell .gate-form .btn-login:hover{transform:none!important;filter:none!important}
html.legacy-shell .gate-hero,
html.legacy-shell .gate-hero *{animation:none!important}