/* 聚光台 Spotlumen · D 学院讲堂：黑板深绿底、粉笔米白字、粉笔黄强调、木框；Nunito + Caveat 手写
   版式：竖排三块带木框的黑板，左边粉笔示意图（随填写变），右边填写；按钮像实体按键 */
:root{
  --radius:8px;--radius-ctl:8px;--radius-pill:10px;
  --bg:#162a20;--panel:#1f3b2d;--panel-2:#183024;--line:#f1eee21f;--line-2:#f1eee23d;
  --gold:#ffd84d;--gold-bright:#ffd84d;--gold-deep:#b8952a;--gold-soft:#2c3a1e;
  --ink:#f1eee2;--ink-dim:#c7d6cc;--ink-faint:#8fa89a;--warn:#ff9f6b;
  --glow-1:transparent;--glow-2:transparent;--glow-3:transparent;
  --font-display:"Nunito",system-ui,"PingFang SC","Microsoft YaHei","Noto Sans Thai","Leelawadee UI","Noto Sans Arabic",sans-serif;
  --font-body:"Nunito",system-ui,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans Thai","Leelawadee UI","Noto Sans Arabic",sans-serif;
  --hand:"Caveat","Nunito",cursive;
}
html,body{overflow-x:clip}
body{background:var(--bg);font-size:15px}
body::before{background:radial-gradient(60% 50% at 50% -10%,#ffd84d14,transparent 70%)}

/* ---------- 顶栏：黑板色 + 粉笔虚线 ---------- */
header{background:#162a20f0;border-bottom:2px dashed #f1eee247}
.tb{height:70px}
.logo{border-radius:50%;background:var(--gold);color:#1f3b2d;font-family:var(--font-display);font-weight:800;font-size:20px;box-shadow:0 0 0 4px #ffd84d33}
.brand .nm{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:.01em}
.brand .sub{font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.2em;color:var(--ink-faint)}
.pill-btn,.lang-select{border-radius:10px;background:#f1eee20f;border:1.5px solid #f1eee233;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  font-weight:700;font-size:13px;color:var(--ink)}
.pill-btn:hover,.lang-select:hover{background:#f1eee21f;transform:none}
.field select option,.lang-select option{background:#1f3b2d}
.avatar{background:#8a6a43}
.avatar:empty{display:none}
.banner{border-radius:10px}

/* ---------- 首屏 ---------- */
#view-new{max-width:1180px;padding:52px 40px 72px}
.sp-hero{margin-bottom:38px}
.sp-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4.6vw,58px);line-height:1.08;margin:0 0 16px;letter-spacing:-.01em;white-space:nowrap}
.sp-hero h1 em{font-family:var(--hand);font-style:normal;font-weight:700;color:var(--gold);font-size:1.25em;position:relative;display:inline-block}
.sp-hero h1 em::after{content:"";position:absolute;inset-inline:2px;bottom:.06em;height:6px;border-radius:6px;background:#ffd84d55;transform:rotate(-1.2deg)}
.sp-hero p{color:var(--ink-dim);font-size:18px;max-width:700px;margin:0;line-height:1.6}

/* ---------- 三块黑板 ---------- */
.form-grid{display:flex;flex-direction:column;gap:30px}
.fcard.sp-seg{display:grid;grid-template-columns:380px minmax(0,1fr);gap:0;align-items:stretch;padding:0;overflow:hidden;
  background:#1f3b2d;border:10px solid #8a6a43;border-radius:8px;
  box-shadow:inset 0 0 60px #0006,inset 0 0 0 1px #00000040,0 3px 0 #6b5133,0 18px 34px #0007}
.fcard.sp-seg:hover{border-color:#8a6a43}
.sp-fig{background:radial-gradient(120% 90% at 30% 20%,#24453a,#183024);border-inline-end:2px dashed #f1eee233;padding:20px 18px 18px;display:flex;flex-direction:column;justify-content:center}
.sp-fig svg{display:block;width:100%;height:auto}
.sp-cap{margin-top:6px;font-family:var(--hand);font-size:21px;color:#ffd84dcc;text-align:center;line-height:1.1}
.sp-body{display:flex;flex-direction:column;gap:16px;padding:26px 30px 28px;min-width:0}
.sp-body h3{font-family:var(--font-display);font-weight:800;font-size:24px;margin:0;display:flex;align-items:baseline;gap:10px}
.sp-body h3 .code{display:none}
.sp-no{font-family:var(--hand);font-weight:700;font-size:44px;line-height:.8;color:var(--gold)}
.field label{font-weight:700;font-size:14px;letter-spacing:0;color:var(--ink-dim)}
.field textarea,.field input,.field select{background:#152a20;border:1.5px dashed #f1eee247;border-radius:8px;font-size:15px;color:var(--ink)}
.field textarea:hover,.field input:hover,.field select:hover{background:#152a20;border-color:#f1eee280}
.field textarea:focus,.field input:focus,.field select:focus{background:#152a20;border-style:solid;border-color:var(--gold);box-shadow:0 0 0 3px #ffd84d33}
.field textarea::placeholder,.field input::placeholder{color:#8fa89a}
.uploader{border-radius:8px;background:#152a20;border:1.5px dashed #f1eee247;font-size:14px}
.uploader.set{border-style:solid;border-color:var(--gold);color:var(--gold)}
.row2{gap:16px}

/* 粉笔示意图 */
.sp-fig text{font-family:"Caveat","Nunito",cursive}
.c-h{font-size:27px;font-weight:700;fill:#f1eee2}
.c-t{font-size:22px;font-weight:600;fill:#f1eee2}
.c-t.sm{font-size:18px}
.c-t.dim{fill:#f1eee266}
.c-y{font-size:22px;font-weight:700;fill:#ffd84d}
.c-note{font-size:19px;font-weight:600;fill:#ffd84d}
.c-ul{fill:none;stroke:#ffd84d;stroke-width:3;stroke-linecap:round}
.c-ring{fill:none;stroke:#ffd84d;stroke-width:2.2}
.c-dot{fill:#f1eee2}
.c-line{fill:none;stroke:#f1eee2;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.c-line.dash{stroke-dasharray:7 7;stroke-width:2}
.c-line.thin{stroke-width:1.6;stroke:#f1eee299}
.c-y-line{fill:none;stroke:#ffd84d;stroke-width:3;stroke-linecap:round}
.c-arrow{fill:none;stroke:#ffd84d;stroke-width:2;stroke-linecap:round;marker-end:none}
.c-beam{fill:#ffd84d1c}
.c-pool{fill:#ffd84d2b}
.c-spot{fill:#ffd84d2e;stroke:#ffd84d;stroke-width:2}
.sp-sight{transition:stroke .3s}
.sp-sight0{animation:spSight 4.8s infinite 0s}
.sp-sight1{animation:spSight 4.8s infinite 1.6s}
.sp-sight2{animation:spSight 4.8s infinite 3.2s}
@keyframes spSight{0%,33%{stroke:#ffd84d;stroke-dasharray:none;stroke-width:2.4}34%,100%{stroke:#f1eee299}}
@media (prefers-reduced-motion:reduce){.sp-sight{animation:none}}

/* 开始：实体按键 */
.start-row{margin-top:34px;gap:18px}
.start-row .btn,.btn{border-radius:12px;background:var(--gold);border:0;color:#1f3b2d;box-shadow:0 5px 0 #b8952a;font-weight:800}
.start-row .btn{font-size:19px;padding:15px 34px}
.btn:hover{background:#ffe066;transform:translateY(-1px);box-shadow:0 6px 0 #b8952a}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #b8952a}

/* ---------- 页脚 ---------- */
.sp-foot{position:relative;z-index:1;border-top:2px dashed #f1eee22e;padding:22px 16px;text-align:center;font-family:var(--hand);font-size:20px;color:var(--ink-faint)}

/* ---------- 窄屏 ---------- */
@media (max-width:980px){
  .fcard.sp-seg{grid-template-columns:minmax(0,1fr)}
  .sp-fig{border-inline-end:0;border-bottom:2px dashed #f1eee233}
  .sp-fig svg{max-width:420px;margin:0 auto}
}
@media (max-width:640px){
  #view-new{padding:30px 16px 56px}
  .tb{height:auto;min-height:60px;flex-wrap:wrap;padding:10px 16px;row-gap:10px}
  .tb-right{flex-wrap:wrap;gap:8px;width:100%;justify-content:flex-start}
  .sp-hero h1{white-space:normal;font-size:36px}
  .fcard.sp-seg{border-width:7px}
  .sp-body{padding:20px 18px 22px}
  .row2{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 制作页：课程表 ---------- */
.run-top{max-width:900px;margin:0 auto;padding:30px 24px 0}
.run-top .rt-title{font-family:var(--hand);font-weight:700;font-size:42px;color:var(--gold);line-height:1}
.pkg-btn{border-radius:12px;background:var(--gold);color:#1f3b2d;border:0;box-shadow:0 4px 0 #b8952a;font-weight:800;font-size:14px}
.run-layout{display:block;max-width:900px;margin:0 auto;padding:10px 24px 150px}
.step-nav{display:none}
.steps{gap:0;counter-reset:sp;position:relative}
.sp-chapter{display:flex;align-items:baseline;gap:12px;margin:26px 0 12px;padding-inline-start:64px}
.sp-chapter:first-child{margin-top:8px}
.sp-ch-no{font-family:var(--hand);font-weight:700;font-size:22px;color:var(--gold)}
.sp-ch-nm{font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.step{counter-increment:sp;position:relative;margin:0 0 16px 64px;border-radius:10px;background:#1b3427;border:1.5px dashed #f1eee23d;box-shadow:none;scroll-margin-top:96px}
.step::before{content:counter(sp);position:absolute;inset-inline-start:-58px;top:14px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--hand);font-weight:700;font-size:26px;
  border:2px solid #f1eee280;color:var(--ink);background:var(--bg)}
.step::after{content:"";position:absolute;inset-inline-start:-39px;top:58px;bottom:-18px;border-inline-start:2px dashed #f1eee233}
.step.locked{opacity:.6}
.step.doing,.step.await{border-style:solid;border-color:var(--gold);box-shadow:0 0 0 4px #ffd84d1a}
.step.doing::before,.step.await::before{border-color:var(--gold);color:var(--gold);box-shadow:0 0 18px #ffd84d55}
.step:has(.state.done)::before{content:"✓";background:var(--gold);color:#1f3b2d;border-color:var(--gold)}
.step-head h3{font-weight:800;font-size:21px}
.step-head .code{display:none}
.step-head .state{font-family:var(--hand);font-size:21px;font-weight:700}
.step-sub{font-size:14px}
.scriptbox{background:#152a20;border:1.5px dashed #f1eee233;border-radius:8px;font-size:14px}
.locked-note{background:#152a20;border-radius:8px}
.out,.clip,.final-video{border-radius:8px;border:6px solid #f1eee2;box-shadow:0 8px 18px #0006}
.out:nth-child(odd){transform:rotate(-1deg)}
.out:nth-child(even){transform:rotate(1deg)}
.out:hover{transform:rotate(0) scale(1.03)}
.gate-hint{font-family:var(--hand);font-size:19px}
.btn.ghost,.btn.gold-line{border-radius:12px;background:#f1eee214;border:1.5px solid #f1eee247;color:var(--ink);box-shadow:none}
.btn.ghost:hover,.btn.gold-line:hover{background:#f1eee224;color:var(--ink)}
/* 粉笔槽：底部固定，木头横档 */
.sp-tray{position:fixed;inset-inline:0;bottom:0;z-index:20;display:flex;justify-content:center;pointer-events:none}
.sp-tray .info-panel{pointer-events:auto;position:static;flex-direction:row;align-items:center;gap:18px;width:min(900px,calc(100% - 32px));
  background:linear-gradient(#9a7a50,#7a5c37);border-radius:10px 10px 0 0;padding:12px 18px;box-shadow:0 -8px 24px #0007,inset 0 2px 0 #b8996c}
.sp-tray .ip-card{border:0;background:none;padding:0;gap:2px;flex-direction:column}
.sp-tray .ip-card:first-child{flex:1;min-width:0}
.sp-tray .ip-card h4{font-family:var(--hand);font-size:22px;font-weight:700;letter-spacing:0;color:#fff8e6}
.sp-tray .kv{justify-content:flex-start;color:#fff8e6}
.sp-tray .kv .k{color:#f1e3c4}
.sp-tray .kv .v{color:#fff;font-weight:700}
.sp-tray .shotlist{display:none}
.sp-tray .ip-actions .btn{width:auto;margin:0;background:#f1eee2;color:#1f3b2d;border:0;box-shadow:0 3px 0 #5e4528}
@media (max-width:640px){
  .run-top{padding:22px 16px 0}
  .run-layout{padding:10px 16px 170px}
  .step{margin-inline-start:44px}
  .step::before{inset-inline-start:-44px;width:32px;height:32px;font-size:21px}
  .step::after{inset-inline-start:-29px;top:50px}
  .sp-chapter{padding-inline-start:44px}
  .sp-tray .info-panel{flex-wrap:wrap;gap:8px}
}
.step:last-child::after{display:none}