/* ============================================================
   新派英语 · 销售展示台  style.css  (v4)
   品牌色：teal #023036 / orange #FF8F2E
   目标设备：iPad 横屏（销售外带演示）· 首页一屏无滚动 · PWA · 演示锁（全屏 + 密码退出）
   ============================================================ */

:root{
  --teal-900:#023036;
  --teal-800:#06414C;
  --teal-700:#0A5462;
  --teal-500:#12798C;
  --teal-200:#B9DCDD;
  --teal-050:#EDF5F5;
  --orange:#FF8F2E;
  --orange-600:#F07812;
  --orange-100:#FFEBD6;
  --cream:#FFFBF6;
  --ink:#0E2A2E;
  --ink-2:#3C5A5E;
  --muted:#7E9698;
  --line:#E3EDED;
  --white:#fff;
  --radius:20px;
  --radius-sm:13px;
  --shadow:0 10px 30px rgba(2,48,54,.08);
  --shadow-lg:0 22px 60px rgba(2,48,54,.16);
  --rail-w:236px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
[hidden]{display:none!important}

html{background:#023036}
html,body{height:100%}
body{
  margin:0;
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--teal-050);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
h1,h2,h3,h4{margin:0;line-height:1.25}
p{margin:0;line-height:1.75;color:var(--ink-2)}
b{color:var(--teal-800)}
small{font-size:12.5px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.app{display:flex;height:100vh;height:100dvh;padding-top:env(safe-area-inset-top);box-sizing:border-box}

/* ================= 左侧导航 ================= */
.rail{
  width:var(--rail-w);flex:0 0 var(--rail-w);
  background:linear-gradient(168deg,#023036 0%,#06414C 52%,#0A5462 100%);
  color:#E9F5F4;display:flex;flex-direction:column;
  padding:22px 16px 16px;position:relative;z-index:20;
}
.rail::after{
  content:"";position:absolute;right:-1px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,143,46,.35),transparent);
}
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{
  width:44px;height:44px;border-radius:13px;flex:0 0 44px;overflow:hidden;
  box-shadow:0 8px 18px rgba(255,143,46,.3);
}
.brand-logo img{width:100%;height:100%;display:block;object-fit:cover}
.brand-text strong{display:block;font-size:16.5px;letter-spacing:.5px;color:#fff}
.brand-text small{display:block;font-size:9.5px;letter-spacing:1.6px;color:#7FB3B4;margin-top:1px}

.brand-slogan{
  margin:16px 0 14px;padding:9px 12px;border-radius:11px;
  background:rgba(255,143,46,.14);border:1px dashed rgba(255,143,46,.4);
  font-size:12.5px;color:#FFD6AB;letter-spacing:1.4px;text-align:center;
}

.nav{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px}
.nav::-webkit-scrollbar{width:0}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:12px 13px;border-radius:12px;color:#B6D4D4;
  font-size:15px;font-weight:500;text-align:left;
  transition:background .22s var(--ease),color .22s var(--ease),transform .18s var(--ease);
  position:relative;
}
.nav-item .ico{width:20px;height:20px;flex:0 0 20px;display:block;opacity:.85}
.nav-item .ico svg{width:100%;height:100%;display:block}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.is-active{
  background:linear-gradient(100deg,rgba(255,143,46,.92),rgba(255,143,46,.72));
  color:#3A1A00;font-weight:700;box-shadow:0 10px 22px rgba(255,143,46,.28);
}
.nav-item.is-active .ico{opacity:1}
.nav-item.is-active::before{
  content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--orange);
}

/* 侧栏翻页器（桌面端） */
.rail-pager{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:12px 0 10px;padding:9px 10px;border-radius:13px;
  background:rgba(255,255,255,.07);
}
.pg-btn{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#CFEAEA;font-size:17px;line-height:1;
  transition:background .2s,color .2s,transform .15s;
}
.pg-btn:hover{background:var(--orange);color:#fff}
.pg-btn:active{transform:scale(.92)}
.pg-btn:disabled{opacity:.35;cursor:default}
.pg-btn:disabled:hover{background:rgba(255,255,255,.1);color:#CFEAEA}
.pg-dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.pg-dot{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.28);transition:all .24s var(--ease);cursor:pointer}
.pg-dot.is-active{background:var(--orange);width:16px}

.rail-foot{
  padding:11px 12px;border-radius:13px;
  background:rgba(255,255,255,.07);display:flex;align-items:center;gap:10px;
}
.fs-btn{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#CFEAEA;transition:background .2s,color .2s;
}
.fs-btn svg{width:17px;height:17px}
.fs-btn:hover{background:var(--orange);color:#fff}
.rf-txt small{display:block;font-size:10.5px;color:#87B5B6;letter-spacing:.6px}
.rf-txt strong{display:block;font-size:14px;color:#fff;letter-spacing:.4px}

/* ================= 内容舞台 ================= */
.stage{
  flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;
  padding:26px 32px 96px;scroll-behavior:smooth;
}
.stage::-webkit-scrollbar{width:9px}
.stage::-webkit-scrollbar-thumb{background:#C9DEDE;border-radius:9px;border:3px solid var(--teal-050)}

/* 首页：一屏，不出滚动条 */
.stage.is-home{overflow:hidden;padding-bottom:26px}

.view{display:none}
.view.is-active{display:block;animation:viewIn .42s var(--ease) both}
#view-home.is-active{height:100%}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.page-head{margin-bottom:22px}
.page-head h2{font-size:29px;letter-spacing:-.5px;color:var(--teal-900);position:relative;padding-left:16px}
.page-head h2::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:26px;border-radius:4px;background:linear-gradient(180deg,var(--orange),var(--orange-600));
}
.page-head p{margin-top:8px;font-size:15px;padding-left:16px}

.sub-head{font-size:18.5px;color:var(--teal-900);margin:30px 0 15px;display:flex;align-items:center;gap:10px}
.sub-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* ================= 通用网格 ================= */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.panel{
  background:var(--white);border-radius:var(--radius);padding:22px 22px;
  box-shadow:var(--shadow);border:1px solid rgba(227,237,237,.9);
}
.panel h4.ph{font-size:16.5px;color:var(--teal-900);margin-bottom:10px}
.panel-lead{grid-column:span 2;font-size:16px}
.panel-lead.center{text-align:center;margin-top:20px;grid-column:auto}
.panel-lead.center p{font-size:17px;color:var(--teal-800)}
.personal{margin-top:14px}
.muted{color:var(--muted);font-size:13.5px}

/* ================= 首页布局 ================= */
.home-wrap{
  height:100%;min-height:0;display:grid;gap:16px;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
}
.hero-compact{grid-column:1;grid-row:1;min-height:0}
.finder{grid-column:2;grid-row:1;min-height:0}
.tiles{grid-column:1 / -1;grid-row:2}

/* ---------- Hero（紧凑版） ---------- */
.hero{
  position:relative;border-radius:26px;overflow:hidden;
  background:linear-gradient(150deg,#023036 0%,#064450 48%,#0A5462 100%);
  padding:30px 32px;color:#fff;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;justify-content:center;
}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5}
.b1{width:300px;height:300px;background:#12798C;top:-110px;right:120px}
.b2{width:240px;height:240px;background:rgba(255,143,46,.55);bottom:-120px;right:-40px}
.b3{width:180px;height:180px;background:rgba(255,143,46,.28);top:-60px;left:-60px}
.hero-lines{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;z-index:2;max-width:66%}
.hero-tag{
  display:inline-block;padding:5px 13px;border-radius:99px;font-size:12px;letter-spacing:.6px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#CFEAEA;margin-bottom:13px;
}
.hero h1{font-size:36px;letter-spacing:-1px;line-height:1.14;color:#fff;font-weight:800}
.hero h1 .hl{
  display:block;background:linear-gradient(96deg,var(--orange),#FFC07A);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-sub{margin-top:11px;font-size:14px;color:#BFDEDD;max-width:460px;line-height:1.75}
.hero-sub b{color:#fff}

.hero-stats{display:flex;gap:22px;margin-top:18px;flex-wrap:wrap}
.hs b{display:block;font-size:22px;color:var(--orange);font-weight:800;letter-spacing:-.5px}
.hs small{color:#9CC6C6;font-size:12px}

.hero-actions{display:flex;gap:11px;margin-top:20px;flex-wrap:wrap}
.btn{
  padding:11px 20px;border-radius:99px;font-size:14px;font-weight:700;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;display:inline-block;
}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(100deg,var(--orange),var(--orange-600));color:#fff;box-shadow:0 12px 26px rgba(255,143,46,.34)}
.btn-primary:hover{box-shadow:0 16px 32px rgba(255,143,46,.44)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.26)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}

.hero-photo{
  position:absolute;right:0;top:0;bottom:0;width:36%;
  background-size:cover;background-position:center;
  background-image:linear-gradient(140deg,rgba(255,143,46,.22),rgba(18,121,140,.35)),url('assets/img/hero.jpg');
  background-blend-mode:overlay;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%);
  mask-image:linear-gradient(90deg,transparent,#000 42%);
}

/* ---------- 年级选班型 ---------- */
.finder{
  background:var(--white);border-radius:26px;padding:20px;
  border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:13px;min-height:0;overflow:auto;
}
.finder::-webkit-scrollbar{width:0}
.finder-head{display:flex;align-items:center;gap:11px}
.fh-ico{
  width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(140deg,var(--orange),var(--orange-600));box-shadow:0 8px 18px rgba(255,143,46,.3);
}
.finder-head b{display:block;font-size:16.5px;color:var(--teal-900)}
.finder-head small{display:block;font-size:12px;color:var(--muted);margin-top:1px}

.grades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.grade{
  padding:11px 6px;border-radius:14px;text-align:center;
  background:var(--teal-050);color:var(--teal-800);
  font-size:13.5px;font-weight:700;border:1.5px solid transparent;
  transition:all .2s var(--ease);
}
.grade small{display:block;font-size:10.5px;color:var(--muted);font-weight:500;margin-top:2px}
.grade:hover{border-color:var(--teal-200);transform:translateY(-2px)}
.grade:active{transform:scale(.95)}
.grade.is-on{
  background:linear-gradient(120deg,var(--orange),var(--orange-600));color:#fff;
  border-color:transparent;box-shadow:0 10px 22px rgba(255,143,46,.3);
}
.grade.is-on small{color:rgba(255,255,255,.88)}

.finder-result{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(120deg,#FFF6EC,#FFEBD6);border:1px solid #FFDCB8;
  border-radius:16px;padding:12px 14px;animation:frIn .32s var(--ease) both;
}
@keyframes frIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fr-info small{display:block;font-size:11px;color:#B8792F;letter-spacing:.5px}
.fr-info b{display:block;font-size:15.5px;color:var(--teal-900);margin-top:2px}
.fr-info .fr-price{display:inline-block;margin-top:3px;font-size:14px;font-weight:800;color:var(--orange-600)}
.finder-result .btn{padding:9px 15px;font-size:13px;white-space:nowrap}

/* ---------- APP 式功能图标（9 宫格 × 3 行，保持首页一屏） ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{
  background:var(--white);border-radius:16px;padding:10px 8px 9px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
  animation:tIn .45s var(--ease) both;
}
.tile:nth-child(1){animation-delay:.03s}
.tile:nth-child(2){animation-delay:.06s}
.tile:nth-child(3){animation-delay:.09s}
.tile:nth-child(4){animation-delay:.12s}
.tile:nth-child(5){animation-delay:.15s}
.tile:nth-child(6){animation-delay:.18s}
.tile:nth-child(7){animation-delay:.21s}
.tile:nth-child(8){animation-delay:.24s}
.tile:nth-child(9){animation-delay:.27s}
@keyframes tIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.tile:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(2,48,54,.14);border-color:var(--teal-200)}
.tile:active{transform:scale(.94)}
.t-ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:21px;
  background:linear-gradient(150deg,var(--teal-050),#E0F0F0);
}
.tile b{font-size:12.5px;color:var(--teal-900);font-weight:700}

/* ================= 简介 ================= */
.motto{
  margin:20px 0;padding:24px 26px;border-radius:var(--radius);position:relative;
  background:linear-gradient(120deg,#FFF6EC,#FFEBD6);border:1px solid #FFDCB8;
}
.motto-mark{position:absolute;top:6px;left:20px;font-size:56px;color:rgba(255,143,46,.3);font-family:Georgia,serif;line-height:1}
.motto p{font-size:24px;font-weight:800;color:var(--teal-900);letter-spacing:2px;position:relative;z-index:1;padding-left:34px}
.motto small{display:block;margin-top:6px;padding-left:34px;color:#B8792F;letter-spacing:3px;font-size:12px}

.feat{
  background:var(--white);border-radius:var(--radius);padding:22px;border:1px solid var(--line);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.feat::after{
  content:"";position:absolute;right:-30px;bottom:-30px;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,121,140,.09),transparent 70%);
}
.feat-ico{font-size:26px;margin-bottom:10px}
.feat-num{
  font-size:30px;font-weight:800;font-style:italic;letter-spacing:-1px;
  background:linear-gradient(120deg,var(--teal-500),var(--teal-200));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;
}
.feat h4{font-size:17px;color:var(--teal-900);margin-bottom:8px}
.feat p{font-size:14px}
.feat-soft{background:linear-gradient(160deg,#fff,#FAFDFD)}

.scoreboard{margin-top:4px}
.score{
  background:linear-gradient(150deg,#fff,#F7FBFB);border-radius:var(--radius);padding:20px;
  border:1px solid var(--line);text-align:center;box-shadow:var(--shadow);
}
.score b{display:block;font-size:22px;color:var(--teal-800);letter-spacing:-.5px}
.score small{color:var(--muted);font-size:12.5px}

/* ================= 课程体系 ================= */
.stage-cards{display:flex;flex-direction:column;gap:13px}
.stage-card{
  background:var(--white);border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:var(--shadow);overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.stage-card.is-open{border-color:var(--teal-200);box-shadow:0 16px 40px rgba(2,48,54,.12)}
.sc-head{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;
  padding:17px 20px;width:100%;text-align:left;
}
.sc-dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px;box-shadow:0 0 0 5px var(--tint,rgba(18,121,140,.1))}
.sc-name{font-size:17.5px;font-weight:700;color:var(--teal-900)}
.sc-grade{font-size:13px;color:var(--muted);margin-top:2px}
.sc-price{text-align:right;white-space:nowrap}
.sc-price b{font-size:21px;color:var(--orange-600);font-weight:800;letter-spacing:-.5px}
.sc-price b i{font-size:13px;font-style:normal;font-weight:600;color:var(--muted)}
.sc-price small{display:block;color:var(--muted);font-size:11.5px}
.sc-arrow{
  width:28px;height:28px;border-radius:50%;background:var(--teal-050);display:grid;place-items:center;
  color:var(--teal-700);font-size:13px;transition:transform .3s var(--ease),background .2s;
}
.stage-card.is-open .sc-arrow{transform:rotate(180deg);background:var(--orange-100);color:var(--orange-600)}
.sc-body{max-height:0;overflow:hidden;transition:max-height .36s var(--ease)}
.sc-body-in{padding:0 20px 18px}

.sc-goal{
  display:flex;gap:10px;align-items:flex-start;
  background:#FFF6EC;border:1px solid #FFE0BE;border-radius:12px;padding:11px 14px;
  font-size:14px;color:#8A5A18;font-weight:600;line-height:1.6;
}
.sc-goal em{font-style:normal;font-weight:800;color:var(--orange-600);flex:0 0 auto}

.sc-points{
  margin:13px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;
}
.sc-points li{position:relative;padding-left:19px;font-size:14px;color:var(--ink-2);line-height:1.6}
.sc-points li::before{
  content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(140deg,var(--orange),var(--orange-600));
}
.sc-meta{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);display:grid;gap:8px}

.kv{display:flex;gap:12px;font-size:14px;align-items:baseline}
.kv span{color:var(--muted);flex:0 0 76px;font-size:13px}
.kv b{font-weight:600;color:var(--teal-800);font-size:14px}

.special{
  background:linear-gradient(120deg,#FFF8F0,#fff);border:1px solid #FFE0BE;border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);
}
.special-main{display:flex;gap:15px;align-items:flex-start}
.special-ico{
  width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(140deg,var(--orange),var(--orange-600));box-shadow:0 8px 18px rgba(255,143,46,.3);
}
.special h4{font-size:17px;color:var(--teal-900);margin-bottom:4px}
.special p{font-size:14px}
.expand-body{max-height:0;overflow:hidden;transition:max-height .36s var(--ease)}
.expand-body .kv,.expand-body .tip{margin-top:10px}
.expand-body-open{padding:6px 0 0 61px}
.expand-toggle{
  margin-top:14px;margin-left:61px;font-size:13.5px;font-weight:700;color:var(--orange-600);
  padding:8px 16px;border-radius:99px;background:var(--orange-100);transition:background .2s;
}
.expand-toggle:hover{background:#FFDCB8}
.tip{
  background:#FFF9E8;border:1px dashed #F0D08A;border-radius:12px;padding:11px 14px;
  font-size:13px;color:#8A6A22;
}
.note{
  margin-top:18px;background:var(--teal-050);border-left:3px solid var(--teal-500);
  border-radius:0 12px 12px 0;padding:13px 16px;font-size:14px;color:var(--teal-800);
}

/* ================= 上课安排 ================= */
.kpi{
  background:var(--white);border-radius:var(--radius);padding:20px;border:1px solid var(--line);
  box-shadow:var(--shadow);text-align:center;position:relative;overflow:hidden;
}
.kpi::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--teal-500));
}
.kpi b{display:block;font-size:36px;font-weight:800;color:var(--teal-900);letter-spacing:-1.5px;line-height:1.1}
.kpi b small{font-size:14px;font-weight:600;color:var(--muted);margin-left:3px;letter-spacing:0}
.kpi span{display:block;margin-top:6px;font-size:13px;color:var(--muted)}

.term-chart{display:flex;gap:18px;align-items:flex-end;height:210px;padding:8px 4px 0}
.term{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:8px;cursor:pointer}
.term-bar{
  width:100%;height:var(--h);border-radius:14px 14px 8px 8px;position:relative;
  background:linear-gradient(180deg,#12798C,#023036);
  display:grid;place-items:center;transition:transform .24s var(--ease),background .24s,box-shadow .24s;
  box-shadow:inset 0 -20px 30px rgba(0,0,0,.16);
}
.term-bar span{font-size:17px;opacity:.92}
.term:hover .term-bar{transform:translateY(-5px)}
.term.is-active .term-bar{
  background:linear-gradient(180deg,var(--orange),var(--orange-600));
  box-shadow:0 14px 30px rgba(255,143,46,.36);
}
.term b{font-size:20px;color:var(--teal-900);font-weight:800}
.term small{color:var(--muted);font-size:12.5px}
.term-read{
  margin-top:14px;text-align:center;font-size:14px;color:var(--teal-700);
  background:var(--white);border-radius:99px;padding:11px 18px;box-shadow:var(--shadow);border:1px solid var(--line);
}

.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.sched-table{width:100%;border-collapse:collapse;min-width:420px}
.sched-table th{
  background:linear-gradient(100deg,var(--teal-800),var(--teal-700));color:#fff;
  font-size:14px;font-weight:700;padding:14px 20px;text-align:left;letter-spacing:.4px;
}
.sched-table td{padding:14px 20px;font-size:14.5px;color:var(--ink-2);border-top:1px solid var(--line)}
.sched-table tbody tr:nth-child(even) td{background:#FAFDFD}
.sched-table td b{color:var(--teal-900);font-size:15.5px}

/* ================= APP 页 ================= */
.app-hero{
  display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:center;
  background:linear-gradient(140deg,#023036,#0A5462 60%,#12798C);
  border-radius:26px;padding:30px 32px;box-shadow:var(--shadow-lg);color:#fff;
}
.tag-orange{
  display:inline-block;padding:5px 13px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.5px;
  background:rgba(255,143,46,.18);border:1px solid rgba(255,143,46,.45);color:#FFC793;margin-bottom:12px;
}
.app-hero h3{font-size:27px;color:#fff;letter-spacing:-.4px}
.app-lead{margin-top:11px;font-size:14.5px;color:#BFDEDD;line-height:1.8}
.app-lead b{color:#fff}
.app-feats{margin-top:20px;display:grid;gap:10px}
.af{display:flex;gap:10px;align-items:flex-start}
.af i{font-style:normal;font-size:14px;line-height:1.5}
.af b{display:block;font-size:14.5px;color:#fff;font-weight:700}
.af small{display:block;color:#9CC6C6;font-size:12.5px;line-height:1.55;margin-top:1px}
.app-actions{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.app-url{font-size:13px;color:#9CC6C6}

.phone{
  width:250px;height:480px;margin:0 auto;border-radius:34px;position:relative;
  background:linear-gradient(160deg,#0B3B44,#062A32);
  border:7px solid #0A2E36;box-shadow:0 26px 60px rgba(0,0,0,.4);
  padding:12px;display:flex;flex-direction:column;
}
.phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:74px;height:6px;border-radius:99px;background:rgba(255,255,255,.16);z-index:3}
.phone-screen{
  flex:1;border-radius:24px;background:linear-gradient(170deg,#F2FAFA,#E7F3F3);
  padding:30px 14px 14px;display:flex;flex-direction:column;gap:11px;overflow:hidden;
}
.ps-head{display:flex;align-items:center;gap:9px}
.ps-logo{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-style:italic;
  background:linear-gradient(140deg,var(--orange),var(--orange-600));color:#fff;font-size:16px;
}
.ps-head b{display:block;font-size:13px;color:var(--teal-900)}
.ps-head small{display:block;font-size:10px;color:var(--muted)}
.ps-card{
  border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:5px;
  background:linear-gradient(130deg,#FF9E45,#F07812);box-shadow:0 10px 20px rgba(240,120,18,.3);
}
.ps-card small{font-size:10px;color:rgba(255,255,255,.85)}
.ps-card b{font-size:13px;color:#fff;line-height:1.4}
.ps-btn{align-self:flex-start;margin-top:4px;padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.92);font-size:10.5px;font-weight:700;color:var(--orange-600)}
.ps-row{display:flex;gap:6px;flex-wrap:wrap}
.ps-chip{padding:4px 9px;border-radius:99px;background:#fff;border:1px solid var(--teal-200);font-size:10px;color:var(--teal-700)}
.ps-bar{height:7px;border-radius:99px;background:#D6E7E7;overflow:hidden;margin-top:4px}
.ps-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal-500),#3FD0A8)}
.ps-hint{font-size:10px;color:var(--muted)}
.ps-list{display:grid;gap:7px;margin-top:2px}
.ps-list span{display:block;height:26px;border-radius:9px;background:#fff;border:1px solid #E1EFEF}

.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  padding:9px 17px;border-radius:99px;background:var(--white);border:1px solid var(--teal-200);
  font-size:14px;color:var(--teal-800);font-weight:600;box-shadow:var(--shadow);
}
.chip-lg{padding:11px 22px;font-size:15px}

/* ================= 家校服务 / 总结条 ================= */
.family-card{
  background:var(--white);border-radius:var(--radius);padding:24px 22px;border:1px solid var(--line);
  box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.family-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(2,48,54,.13)}
.fc-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:25px;background:var(--teal-050);margin-bottom:14px}
.family-card h4{font-size:17px;color:var(--teal-900);margin-bottom:7px}
.family-card p{font-size:14px}

.band{
  margin-top:22px;border-radius:26px;padding:28px 32px;
  background:linear-gradient(130deg,#023036,#0A5462 60%,#12798C);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  box-shadow:var(--shadow-lg);
}
.band h3{color:#fff;font-size:23px;letter-spacing:-.4px}
.band p{color:#BFDEDD;margin-top:8px;font-size:14.5px;max-width:640px}
.band .btn{flex:0 0 auto}

/* ================= 校区 · 报名 ================= */
.campus-tabs{display:flex;gap:10px;margin-bottom:18px}
.ctab{
  padding:12px 22px;border-radius:99px;font-size:15px;font-weight:700;color:var(--teal-700);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);
  transition:all .2s var(--ease);
}
.ctab.is-active{background:linear-gradient(100deg,var(--teal-800),var(--teal-700));color:#fff;border-color:transparent;box-shadow:0 12px 26px rgba(2,48,54,.24)}

.campus-panel{
  background:var(--white);border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:var(--shadow);padding:24px;display:grid;grid-template-columns:1.15fr .85fr;gap:26px;
  animation:viewIn .34s var(--ease) both;
}
.cp-name{font-size:21px;color:var(--teal-900);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.cp-name em{font-style:normal;font-size:11.5px;padding:3px 9px;border-radius:99px;background:var(--orange-100);color:var(--orange-600);font-weight:700}
.cp-addr{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.7;padding:11px 0;border-top:1px dashed var(--line)}
.cp-addr:first-of-type{border-top:none}
.cp-addr i{font-style:normal;font-size:17px;flex:0 0 20px;text-align:center;line-height:1.5}
.cp-addr b{font-weight:700;color:var(--teal-900)}
.cp-tel{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:12px 20px;border-radius:99px;
  background:linear-gradient(100deg,var(--orange),var(--orange-600));color:#fff;font-weight:700;font-size:16px;
  box-shadow:0 12px 26px rgba(255,143,46,.32);text-decoration:none;
}
.cp-map{
  border-radius:var(--radius-sm);min-height:190px;position:relative;overflow:hidden;
  background:linear-gradient(140deg,#E9F5F5,#D8ECEC);border:1px solid var(--teal-200);
  display:grid;place-items:center;text-align:center;padding:20px;
}
.cp-map::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(18,121,140,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(18,121,140,.09) 1px,transparent 1px);
  background-size:26px 26px;
}
.cp-map-in{position:relative;z-index:1}
.cp-map-in .pin{font-size:30px;display:block;margin-bottom:6px}
.cp-map-in b{display:block;font-size:14px;color:var(--teal-800)}
.cp-map-in small{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}

.steps{margin:0;padding-left:20px;display:grid;gap:9px}
.steps li{font-size:14px;color:var(--ink-2);line-height:1.65}
.pay-grid{margin-bottom:18px}

.qr-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.qr-slot{
  background:var(--white);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);
  padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.qr-slot:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(2,48,54,.14)}
.qr-box{
  width:168px;height:168px;border-radius:16px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(45deg,#F4FAFA 0 10px,#EAF4F4 10px 20px);
  border:2px dashed var(--teal-200);display:grid;place-items:center;text-align:center;
  background-size:cover;background-position:center;
}
.qr-box img{width:100%;height:100%;object-fit:cover;display:block}
.qr-ph{display:grid;gap:4px;place-items:center;color:var(--teal-700)}
.qr-ph span{font-size:30px}
.qr-ph b{font-size:13.5px}
.qr-ph small{font-size:11px;color:var(--muted)}
.qr-slot h4{font-size:15px;color:var(--teal-900);text-align:center}
.qr-slot p{font-size:12.5px;color:var(--muted);text-align:center}

.contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.contact{
  display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:17px 20px;box-shadow:var(--shadow);text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);cursor:pointer;
}
.contact:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(2,48,54,.13)}
.contact:active{transform:translateY(-1px)}
.c-ico{width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:grid;place-items:center;font-size:21px;background:var(--teal-050)}
.contact small{display:block;font-size:12px;color:var(--muted)}
.contact b{display:block;font-size:16px;color:var(--teal-900);margin-top:2px;letter-spacing:.2px}

.cta-close{
  margin-top:20px;border-radius:26px;padding:24px 30px;
  background:linear-gradient(120deg,#FFF6EC,#FFEBD6);border:1px solid #FFDCB8;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.cta-close p{font-size:18px;color:var(--teal-900);font-weight:700}
.cta-close .cta-sub{font-size:15px;color:#8A5A18;font-weight:500;margin-top:4px}

/* ================= 移动端翻页条 / 浮层 ================= */
.pager{display:none}

.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(2,32,38,.86);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:40px;animation:lbIn .24s var(--ease) both;
}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-close{
  position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:19px;display:grid;place-items:center;
}
.lb-close:hover{background:rgba(255,255,255,.24)}
.lb-body{display:grid;gap:16px;place-items:center;max-width:92vw}
.lb-body .qr-box{width:min(400px,58vh);height:min(400px,58vh);background:#fff;border:6px solid #fff}
.lb-body h4{color:#fff;font-size:19px}
.lb-body p{color:#9CC6C6;font-size:13.5px;text-align:center}
.lb-img{
  max-width:min(1200px,92vw);max-height:78vh;border-radius:16px;display:block;
  background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.5);
}

.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(10px);
  background:var(--teal-900);color:#fff;padding:12px 22px;border-radius:99px;font-size:14px;
  z-index:120;box-shadow:0 14px 34px rgba(0,0,0,.3);opacity:0;transition:opacity .24s,transform .24s;
}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

.install-tip{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:260; /* 高于启动页(200)，安装时机在演示前 */
  background:var(--teal-900);color:#fff;padding:10px 12px 10px 18px;border-radius:99px;
  display:flex;align-items:center;gap:12px;font-size:13.5px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);animation:viewIn .3s var(--ease) both;
}
.install-tip #installBtn{background:var(--orange);color:#fff;font-weight:700;padding:7px 16px;border-radius:99px}
.install-tip #installBtn:hover{background:var(--orange-600)}
.install-tip #installDismiss{color:#9CC6C6;padding:4px 8px;font-size:14px}

/* ---------- iOS 安装引导弹层（Safari 不触发原生安装事件） ---------- */
.ios-guide{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:22px; /* 高于启动页，演示前也能装 */
  background:rgba(2,32,36,.66);backdrop-filter:blur(6px);animation:viewIn .22s var(--ease) both;
}
.ios-guide[hidden]{display:none}
.ig-card{
  position:relative;width:min(430px,94vw);background:var(--white);border-radius:26px;
  padding:26px 24px 20px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.42);
  animation:igPop .3s var(--ease) both;
}
@keyframes igPop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.ig-close{
  position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;
  color:var(--teal-600);font-size:15px;line-height:1;
}
.ig-close:hover{background:var(--teal-050)}
.ig-ico{font-size:38px;line-height:1}
.ig-card h3{margin:8px 0 6px;font-size:20px;color:var(--teal-900)}
.ig-sub{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.6}
.ig-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:11px;text-align:left}
.ig-steps li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--teal-900);line-height:1.55}
.ig-n{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--orange);color:#fff;font-weight:800;font-size:13px;margin-top:1px;
}
.ig-glyph{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 4px;
  border-radius:6px;background:var(--teal-050);color:var(--teal-700);font-weight:700;vertical-align:-4px;
}
.ig-note{
  margin:0 0 14px;padding:9px 12px;border-radius:12px;background:var(--teal-050,#EAF3F3);
  font-size:12.5px;color:var(--teal-700);line-height:1.6;text-align:left;
}
.ig-ok{
  width:100%;padding:13px;border-radius:14px;background:var(--teal-900);color:#fff;
  font-size:15px;font-weight:700;transition:background .2s var(--ease);
}
.ig-ok:hover{background:var(--teal-700)}
body.kiosk .ios-guide{display:none!important}

/* ================= 平板竖屏 / 中屏 ================= */
@media (max-width:1100px){
  .stage.is-home{overflow:auto;padding-bottom:110px}
  .home-wrap{height:auto;grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .hero-compact{grid-column:1;grid-row:1;min-height:300px}
  .finder{grid-column:1;grid-row:2;min-height:0;overflow:visible}
  .tiles{grid-column:1;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-inner{max-width:100%}
  .hero-photo{display:none}
  .app-hero{grid-template-columns:1fr;gap:24px}
  .phone{width:220px;height:430px}
  .campus-panel{grid-template-columns:1fr}
}

/* ================= 手机 ================= */
@media (max-width:900px){
  body{overflow:auto}
  .app{flex-direction:column;height:auto;min-height:100dvh;overflow:visible}
  .rail{
    width:100%;flex:none;flex-direction:column;padding:12px 12px 10px;
    position:sticky;top:0;z-index:40;gap:0;
  }
  .rail::after{display:none}
  .brand-slogan{display:none}
  .brand{justify-content:center}
  .nav{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:8px;margin-top:11px;padding-bottom:2px;flex:none;-webkit-overflow-scrolling:touch}
  .nav-item{flex:none;padding:9px 14px;font-size:13.5px;border-radius:99px;white-space:nowrap}
  .nav-item.is-active::before{display:none}
  .rail-pager,.rail-foot{display:none}

  .stage{padding:16px 14px 110px;overflow:visible}
  .stage.is-home{overflow:visible;padding-bottom:110px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}

  .hero{padding:24px 20px;border-radius:20px}
  .hero h1{font-size:30px}
  .hero-stats{gap:16px}
  .hs b{font-size:20px}

  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .tile{padding:11px 6px 10px;border-radius:15px}
  .t-ico{width:44px;height:44px;font-size:22px;border-radius:13px}
  .tile b{font-size:12px}

  .grades{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .finder-result{flex-direction:column;align-items:stretch;text-align:center}
  .finder-result .btn{width:100%}

  .term-chart{height:170px;gap:10px}
  .qr-row,.contacts{grid-template-columns:1fr}
  .campus-tabs{flex-wrap:wrap}
  .ctab{flex:1;text-align:center;padding:11px 12px;font-size:14px}
  .page-head h2{font-size:23px}
  .sc-head{grid-template-columns:auto 1fr auto;gap:11px;padding:15px 16px}
  .sc-arrow{display:none}
  .sc-price b{font-size:18px}
  .sc-points{grid-template-columns:1fr}
  .expand-toggle{margin-left:0}
  .expand-body-open{padding-left:0}
  .band{padding:22px 20px;border-radius:20px}
  .band h3{font-size:19px}
  .cta-close{padding:20px;border-radius:20px}
  .cta-close p{font-size:16px}

  .pager{
    display:flex;position:fixed;left:14px;right:14px;bottom:12px;z-index:30;
    align-items:center;justify-content:space-between;gap:10px;
    background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
    border:1px solid var(--line);border-radius:99px;padding:7px 9px;
    box-shadow:0 12px 32px rgba(2,48,54,.18);
  }
  .pg{padding:9px 14px;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--teal-800);background:var(--teal-050)}
  .pg:disabled{opacity:.4}
  .pg-dots{gap:5px}
  .pg-dot{width:6px;height:6px;background:#CFE2E2}
  .pg-dot.is-active{background:var(--orange);width:16px}

  .lightbox{padding:18px}
  .install-tip{bottom:76px;font-size:12.5px;max-width:92vw;flex-wrap:wrap;justify-content:center;border-radius:20px}
}

/* ============================================================
   真实素材模块（v5）：照片墙 / 书架 / 绘本条 / 学员卡 / 视频卡 / 升学规划
   ============================================================ */

/* ---------- 校区环境照片墙 ---------- */
.photo-wall{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
}
.pw-item{
  margin:0;border-radius:16px;overflow:hidden;background:#E7F1F1;cursor:zoom-in;
  aspect-ratio:4/3;box-shadow:var(--shadow);border:1px solid var(--line);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.pw-item img{width:100%;height:100%;object-fit:cover;display:block}
.pw-item:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(2,48,54,.16)}

/* ---------- 教材书架 ---------- */
.book-shelf{
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px;
  padding:18px 14px;border-radius:var(--radius);
  background:linear-gradient(160deg,#FFF9F2,#FFF);border:1px solid #FFE3C2;box-shadow:var(--shadow);
}
.bk{margin:0;text-align:center;cursor:zoom-in}
.bk img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:8px;
  box-shadow:0 8px 18px rgba(2,48,54,.18);border:1px solid rgba(2,48,54,.08);
  transition:transform .2s var(--ease);
}
.bk:hover img{transform:translateY(-4px) scale(1.03)}
.bk figcaption{margin-top:7px;font-size:11.5px;line-height:1.35;color:var(--ink-2);font-weight:600}

/* ---------- 绘本横条 ---------- */
.pic-row{
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;margin-top:14px;
}
.pr-item{
  margin:0;border-radius:12px;overflow:hidden;background:#F2F8F8;cursor:zoom-in;
  aspect-ratio:3/4;border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .2s var(--ease);
}
.pr-item img{width:100%;height:100%;object-fit:cover;display:block}
.pr-item:hover{transform:translateY(-3px)}

/* ---------- 大图展示（图表/海报） ---------- */
.plan-media{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:#fff;
}
.plan-media img{display:block;width:100%;max-height:520px;object-fit:contain;background:#fff;cursor:zoom-in}

/* ---------- 学员风采 ---------- */
.star-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;
}
.st{
  margin:0;background:var(--white);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);cursor:zoom-in;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.st img{width:100%;aspect-ratio:3/3.4;object-fit:cover;display:block}
.st.st-wide img{object-position:70% 50%}
.st:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(2,48,54,.14)}
.st figcaption{padding:13px 14px 15px}
.st figcaption b{display:block;font-size:16.5px;color:var(--teal-900)}
.st figcaption span{display:block;margin-top:3px;font-size:12.5px;color:var(--orange-600);font-weight:600;line-height:1.5}

/* ---------- 白云鹏卡片 ---------- */
.by-card{
  display:flex;gap:20px;align-items:stretch;
  background:linear-gradient(130deg,#023036,#0A5462 60%,#12798C);
  border-radius:26px;padding:22px;box-shadow:var(--shadow-lg);
}
.by-card > img{
  width:150px;flex:0 0 150px;border-radius:16px;object-fit:cover;display:block;cursor:zoom-in;
  aspect-ratio:9/14;
}
.by-info{color:#fff;display:flex;flex-direction:column;justify-content:center}
.by-info b{font-size:24px;letter-spacing:1px}
.by-info ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.by-info li{position:relative;padding-left:20px;font-size:14.5px;color:#CFEAEA;line-height:1.6}
.by-info li::before{
  content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(140deg,var(--orange),var(--orange-600));
}

/* ---------- 视频卡片 ---------- */
.video-card{
  margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:26px;
  padding:20px;box-shadow:var(--shadow);
}
.vc-frame{width:210px;flex:0 0 210px}
.vc-frame video{
  width:100%;aspect-ratio:544/960;height:auto;display:block;border-radius:16px;
  background:#062A32;box-shadow:0 14px 34px rgba(2,48,54,.24);
}
.vc-txt b{display:block;font-size:17.5px;color:var(--teal-900);line-height:1.55}
.vc-txt p{margin-top:8px;font-size:13.5px;color:var(--muted)}
.video-card.no-video .vc-frame::after{
  content:"视频文件缺失：请将 baiyunpeng.mp4 放入 assets/video/";
  display:block;margin-top:8px;font-size:12px;color:#C0392B;
}

/* ---------- 升学规划 ---------- */
.score-line{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sl{
  background:linear-gradient(150deg,#FFF6EC,#FFEBD6);border:1px solid #FFDCB8;border-radius:16px;
  text-align:center;padding:16px 8px;
}
.sl b{display:block;font-size:27px;font-weight:800;color:var(--orange-600);letter-spacing:-.5px}
.sl span{display:block;margin-top:4px;font-size:12.5px;color:#8A5A18;font-weight:600}

.vocab-bars{display:grid;gap:13px;max-width:640px}
.vb-head{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink-2)}
.vb-head b{font-size:17px;color:var(--teal-800)}
.vb.is-hi .vb-head b{color:var(--orange-600)}
.vb-bar{height:16px;border-radius:99px;background:var(--teal-050);overflow:hidden;margin-top:6px}
.vb-bar i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--teal-500),var(--teal-700));
}
.vb.is-hi .vb-bar i{background:linear-gradient(90deg,var(--orange),var(--orange-600))}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .photo-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .book-shelf{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pic-row{grid-template-columns:repeat(5,minmax(0,1fr))}
  .star-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .photo-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .book-shelf{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 10px}
  .pic-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .star-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .by-card{flex-direction:row;padding:18px}
  .by-card > img{width:110px;flex:0 0 110px}
  .by-info b{font-size:20px}
  .video-card{grid-template-columns:1fr}
  .vc-frame{width:180px;margin:0 auto}
  .score-line{grid-template-columns:1fr;gap:9px}
  .sl{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
  .sl b{font-size:22px}
  .sl span{margin-top:0}
  .plan-media img{max-height:300px}
}


/* ============================================================
   演示锁 Kiosk（v4）：启动页 + 全屏锁定 + 密码退出
   ============================================================ */

/* ---------- 1. 启动页 ---------- */
.splash{
  position:fixed;inset:0;z-index:200;overflow:hidden;
  display:grid;place-items:center;padding:28px;
  background:radial-gradient(1100px 680px at 18% 8%,#0A5462 0%,#023036 55%,#011B20 100%);
  color:#fff;
  transition:opacity .46s var(--ease),visibility .46s var(--ease);
}
.splash.is-out{opacity:0;visibility:hidden;pointer-events:none}
.sp-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sp-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.sb1{width:460px;height:460px;background:#12798C;top:-160px;right:-60px}
.sb2{width:380px;height:380px;background:rgba(255,143,46,.55);bottom:-170px;left:-80px}
.sb3{width:260px;height:260px;background:rgba(255,143,46,.25);top:38%;right:22%}

.sp-inner{position:relative;z-index:2;text-align:center;max-width:560px;animation:spIn .7s var(--ease) both}
@keyframes spIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}

.sp-logo{
  position:relative;width:104px;height:104px;margin:0 auto 22px;border-radius:30px;overflow:hidden;
  background:linear-gradient(145deg,#FFA24D,#F07812);
  box-shadow:0 22px 50px rgba(255,143,46,.42),inset 0 0 0 1px rgba(255,255,255,.28);
  display:grid;place-items:center;
}
.sp-logo span{font-size:52px;font-weight:800;font-style:italic;color:#fff;letter-spacing:-2px;text-shadow:0 4px 12px rgba(0,0,0,.22)}
.sp-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.sp-inner h1{font-size:38px;letter-spacing:4px;font-weight:800;color:#fff}
.sp-en{margin-top:9px;font-size:11.5px;letter-spacing:5px;color:#7FB3B4}
.sp-slogan{
  display:inline-block;margin-top:20px;padding:8px 20px;border-radius:99px;
  background:rgba(255,143,46,.14);border:1px dashed rgba(255,143,46,.42);
  font-size:14px;letter-spacing:2.5px;color:#FFD6AB;
}

.sp-start{
  display:block;margin:38px auto 0;padding:17px 54px;border-radius:99px;
  font-size:18px;font-weight:800;letter-spacing:3px;color:#fff;
  background:linear-gradient(100deg,var(--orange),var(--orange-600));
  box-shadow:0 18px 42px rgba(255,143,46,.42);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  animation:spPulse 2.6s ease-in-out infinite;
}
@keyframes spPulse{0%,100%{box-shadow:0 18px 42px rgba(255,143,46,.42)}50%{box-shadow:0 18px 54px rgba(255,143,46,.66)}}
.sp-start:hover{transform:translateY(-2px)}
.sp-start:active{transform:scale(.96)}
.sp-install{
  display:block;margin:14px auto 0;padding:10px 22px;border-radius:99px;
  font-size:13.5px;font-weight:600;color:#CFE7E7;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.sp-install:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-1px)}
.sp-install:active{transform:scale(.97)}
.sp-hint{margin-top:16px;font-size:13px;color:#9CC6C6;letter-spacing:.6px}

.sp-foot{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));z-index:2;text-align:center;font-size:12px;letter-spacing:2px;color:#5E8C8D}

/* ---------- 2. 退出入口（低调） ---------- */
.kiosk-lock{
  position:fixed;z-index:120;
  top:calc(12px + env(safe-area-inset-top));
  right:calc(12px + env(safe-area-inset-right));
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(2,48,54,.42);color:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
  opacity:.38;transition:opacity .22s,background .22s,transform .16s;
  animation:viewIn .4s var(--ease) both;
}
.kiosk-lock svg{width:19px;height:19px}
.kiosk-lock:hover,.kiosk-lock:focus-visible{opacity:1;background:rgba(2,48,54,.78)}
.kiosk-lock:active{transform:scale(.9)}

/* ---------- 3. 密码盘 ---------- */
.pinmask{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;
  background:rgba(1,22,26,.82);backdrop-filter:blur(10px);
  animation:lbIn .22s var(--ease) both;
}
.pinbox{
  width:100%;max-width:360px;border-radius:26px;padding:30px 26px 24px;text-align:center;
  background:linear-gradient(168deg,#06414C,#023036 70%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  color:#fff;
}
.pinbox.shake{animation:pinShake .42s var(--ease)}
@keyframes pinShake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-11px)}36%{transform:translateX(9px)}
  54%{transform:translateX(-6px)}72%{transform:translateX(4px)}
}
.pin-lock{
  width:52px;height:52px;margin:0 auto 15px;border-radius:16px;display:grid;place-items:center;font-size:24px;
  background:rgba(255,143,46,.16);border:1px solid rgba(255,143,46,.35);
}
.pinbox h3{font-size:20px;color:#fff;letter-spacing:.8px}
.pinbox > p{margin-top:7px;font-size:13.5px;color:#9CC6C6}

.pin-dots{display:flex;justify-content:center;gap:15px;margin:22px 0 6px}
.pin-dots i{
  width:15px;height:15px;border-radius:50%;display:block;
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.3);
  transition:all .18s var(--ease);
}
.pin-dots i.on{background:var(--orange);border-color:var(--orange);transform:scale(1.14);box-shadow:0 0 16px rgba(255,143,46,.7)}

.pin-err{margin-top:12px;font-size:13px;color:#FF9C7A;font-weight:600}

.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:20px}
.pin-pad button{
  height:58px;border-radius:17px;font-size:23px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.1);
  transition:background .16s,transform .12s;
  -webkit-user-select:none;user-select:none;
}
.pin-pad button:hover{background:rgba(255,255,255,.16)}
.pin-pad button:active{transform:scale(.94);background:rgba(255,143,46,.32)}
.pin-pad .pk-soft{font-size:14px;font-weight:600;color:#9CC6C6;background:rgba(255,255,255,.04)}
.pin-pad .pk-soft:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---------- 4. 锁定状态下的页面约束 ---------- */
body.kiosk{
  overscroll-behavior:none;
  touch-action:manipulation;          /* 禁双击缩放 */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
body.kiosk .fs-btn{display:none}       /* 全屏由演示锁接管 */
body.kiosk .install-tip{display:none!important}
body.kiosk .app{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
body.kiosk .stage{padding-bottom:max(26px,calc(26px + env(safe-area-inset-bottom)))}

@media (max-width:900px){
  body.kiosk .pager{bottom:calc(12px + env(safe-area-inset-bottom))}
  body.kiosk .stage{padding-bottom:120px}
  .sp-inner h1{font-size:31px;letter-spacing:3px}
  .sp-logo{width:88px;height:88px;border-radius:26px}
  .sp-logo span{font-size:44px}
  .sp-start{margin-top:30px;padding:15px 40px;font-size:16.5px;letter-spacing:2px}
  .sp-hint{font-size:12px}
  .pinbox{padding:26px 20px 20px}
  .pin-pad button{height:52px;font-size:21px}
  .pin-dots{gap:12px}
  .pin-dots i{width:13px;height:13px}
  .kiosk-lock{width:34px;height:34px}
}


/* ============================================================
   决策链路组件：入学流程条 + 复习节奏时间轴
   （让页面从"好看"变成"能决定"）
   ============================================================ */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 6px}
.pstep{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:17px 17px 16px;box-shadow:0 1px 2px rgba(2,48,54,.04);
}
.pstep::after{
  content:'\203A';position:absolute;right:-11px;top:50%;transform:translateY(-50%);
  font-size:26px;line-height:1;color:var(--teal-500);opacity:.42;z-index:2;
}
.pstep:last-child::after{display:none}
.pstep .pnum{
  width:27px;height:27px;border-radius:50%;background:var(--teal-500);color:#fff;
  display:grid;place-items:center;font-size:13.5px;font-weight:700;margin-bottom:10px;
}
.pstep h4{margin:0 0 6px;font-size:15.5px;color:var(--teal-900)}
.pstep p{margin:0;font-size:13px;color:var(--muted);line-height:1.75}
.pstep .pwho{
  display:inline-block;margin-top:9px;font-size:11.5px;color:var(--teal-500);
  background:var(--teal-050);border-radius:20px;padding:3px 10px;font-weight:600;
}

.timeline{display:flex;flex-wrap:wrap;margin:18px 0 8px}
.tl-node{flex:1;min-width:92px;text-align:center;position:relative;padding:0 4px 6px}
.tl-node::before{
  content:'';position:absolute;left:0;right:0;top:11px;height:2px;background:var(--teal-200);
}
.tl-node:first-child::before{left:50%}
.tl-node:last-child::before{right:50%}
.tl-dot{
  position:relative;width:22px;height:22px;border-radius:50%;background:#fff;
  border:2px solid var(--teal-500);margin:0 auto 9px;z-index:1;
}
.tl-node.key .tl-dot{
  background:var(--orange);border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(255,143,46,.18);
}
.tl-node b{display:block;font-size:14.5px;color:var(--teal-900);line-height:1.4}
.tl-node small{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.55}
.tl-node.key b{color:var(--orange-600)}

/* 决策快链：首页四个最常问的问题 */
.quick-ask{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 4px}
.qa{
  display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:12px 13px;cursor:pointer;transition:.18s;
  font:inherit;text-align:left;
}
.qa:hover{border-color:var(--teal-500);box-shadow:0 6px 18px rgba(2,48,54,.09);transform:translateY(-1px)}
.qa i{font-style:normal;font-size:20px;line-height:1;flex:0 0 auto}
.qa b{display:block;font-size:14px;color:var(--teal-900);line-height:1.35}
.qa small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

@media (max-width:1280px){
  .process{grid-template-columns:repeat(2,1fr)}
  .pstep::after{display:none}
  .quick-ask{grid-template-columns:repeat(2,1fr)}
}

/* 价格与教材一览卡（数据来自 ③ stages，与课程卡片联动） */
.price-card{display:flex;flex-direction:column}
.price-card .feat-num{
  font-size:32px;color:var(--orange-600);line-height:1;margin-bottom:10px;
  display:flex;align-items:baseline;gap:3px;
}
.price-card .feat-num small{font-size:13px;color:var(--muted);font-weight:600}
.price-card h4{font-size:16.5px}
.price-card .pc-grade{font-size:12.5px;color:var(--muted);margin:0 0 12px}
.price-card .kv{
  display:flex;gap:10px;font-size:12.5px;padding:8px 0;border-top:1px dashed var(--line);
  line-height:1.6;margin:0;
}
.price-card .kv span{color:var(--muted);flex:0 0 62px}
.price-card .kv b{flex:1;font-weight:600;color:var(--ink)}

/* 通用要点列表 */
.tick-list{margin:10px 0 0;padding-left:20px;font-size:13.5px;line-height:1.95;color:var(--ink-2)}
.tick-list li{margin:0;padding-left:2px}
.tick-list li::marker{color:var(--teal-500)}