/* ═══ Phase 1 本地预览 · 共享样式（和风卡其，与现有课程页同源） ═══ */
:root{
  --ink:#33302A; --ink-2:#6B6459; --ink-3:#A39B8B;
  --paper:#FFFEFB; --bg:#F5F2EA; --tint:#F7F4EC;
  --line:#E8E2D4; --line-2:#DCD4C2;
  --brand:#5C6B4E; --brand-deep:#46543A; --brand-tint:#EDEFE6; --brand-tint-2:#DDE2D0;
  --ochre:#B98A3E; --ochre-deep:#8A6526; --ochre-tint:#F6F0E1; --ochre-line:#E9DDBE;
  --moss:#5F7F63; --moss-deep:#48644D; --moss-tint:#EDF2EC; --moss-line:#CFDDD0;
  --shu:#A85B50; --shu-deep:#84443B; --shu-tint:#F6EDEA; --shu-line:#E6CFC9;
  --sand:#C5B08A; --sand-tint:#F2EDE1;
  --r-lg:16px; --r-md:12px; --r-sm:10px;
  --sh-1:0 1px 2px rgba(51,48,42,.04);
  --sh-2:0 8px 24px -12px rgba(51,48,42,.14);
  --sh-3:0 22px 50px -24px rgba(51,48,42,.30);
  --ease:cubic-bezier(.25,.6,.3,1);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  background-image:
    radial-gradient(900px 300px at 15% -4%, rgba(185,138,62,.07), transparent 60%),
    radial-gradient(800px 260px at 88% -6%, rgba(92,107,78,.08), transparent 60%);
  background-repeat:no-repeat;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; font-size:inherit;}
button:focus-visible,a:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:8px;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ═══ 顶栏 ═══ */
.hud{position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:12px; padding:12px 24px;
  background:rgba(245,242,234,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(51,48,42,.07);}
.hud .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.01em;}
.hud .brand .fox{width:34px; height:34px; border-radius:10px; background:var(--ochre-tint); border:1px solid var(--ochre-line);
  display:grid; place-items:center; font-size:19px; line-height:1;}
.hud .brand small{display:block; font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.14em;}
.hud .right{margin-left:auto; display:flex; align-items:center; gap:10px;}
.chip{display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-2); transition:all .2s var(--ease);}
.chip:hover{border-color:var(--line-2); color:var(--ink); box-shadow:var(--sh-1);}

/* ═══ 按钮 ═══ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px;
  padding:11px 20px; font-weight:700; letter-spacing:.01em; transition:all .2s var(--ease); user-select:none;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 10px 22px -12px rgba(70,84,58,.55);}
.btn-primary:hover{background:var(--brand-deep);}
.btn-ochre{background:var(--ochre); color:#fff; box-shadow:0 10px 22px -12px rgba(138,101,38,.5);}
.btn-ochre:hover{background:var(--ochre-deep);}
.btn-ghost{background:var(--paper); border:1px solid var(--line-2); color:var(--ink);}
.btn-ghost:hover{border-color:var(--sand); background:#fff;}
.btn-sm{padding:7px 14px; font-size:13.5px;}
.btn-lg{padding:15px 30px; font-size:17px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none;}

/* ═══ 标签 / 徽章 ═══ */
.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap;}
.pill-brand{background:var(--brand-tint); color:var(--brand-deep);}
.pill-free{background:var(--moss-tint); color:var(--moss-deep);}
.pill-lock{background:var(--sand-tint); color:var(--ochre-deep);}
.pill-ok{background:var(--moss-tint); color:var(--moss-deep);}
.pill-shu{background:var(--shu-tint); color:var(--shu-deep);}

/* ═══ 卡片 ═══ */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2);}
.note{display:flex; gap:8px; align-items:flex-start; background:var(--ochre-tint); border:1px solid var(--ochre-line);
  border-radius:var(--r-sm); padding:10px 14px; font-size:13.5px; color:var(--ochre-deep);}

/* ═══ 平台首页 ═══ */
.hero{padding:46px 0 26px; text-align:center;}
.hero .kicker{font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--ochre-deep); text-transform:uppercase;}
.hero h1{margin:10px 0 8px; font-size:40px; line-height:1.25; letter-spacing:.01em; text-wrap:balance;}
.hero p{margin:0 auto; max-width:620px; color:var(--ink-2); font-size:16px; text-wrap:balance;}
.sec-title{display:flex; align-items:baseline; gap:10px; margin:34px 0 16px;}
.sec-title h2{margin:0; font-size:22px;}
.sec-title span{color:var(--ink-3); font-size:13.5px;}
.course-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; padding-bottom:8px;}
.course-card{overflow:hidden; display:flex; flex-direction:column; transition:all .25s var(--ease);}
.course-card:hover{transform:translateY(-3px); box-shadow:var(--sh-3);}
.course-card .cover{height:150px; background:var(--sand-tint) center/cover no-repeat; position:relative;}
.course-card .cover .badge{position:absolute; left:12px; top:12px;}
.course-card .body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1;}
.course-card h3{margin:0; font-size:19px;}
.course-card .desc{margin:0; color:var(--ink-2); font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.course-card .meta{display:flex; flex-wrap:wrap; gap:6px;}
.course-card .foot{margin-top:auto; display:flex; align-items:center; gap:10px; padding-top:6px;}
.course-card .price{font-weight:800; color:var(--ochre-deep); font-size:18px;}
.course-card .price small{font-weight:600; color:var(--ink-3); font-size:12px; margin-left:4px;}
.course-card.placeholder{border-style:dashed; box-shadow:none; background:transparent;}
.course-card.placeholder .body{align-items:center; justify-content:center; text-align:center; color:var(--ink-3); min-height:210px;}
.course-card.placeholder .body .big{font-size:34px;}

/* ═══ 课程页 ═══ */
.crumb{padding:18px 0 0; font-size:13.5px; color:var(--ink-3);}
.crumb a:hover{color:var(--brand);}
.course-hero{margin:12px 0 22px; padding:26px 28px; display:flex; flex-wrap:wrap; gap:20px; align-items:center;}
.course-hero .txt{flex:1; min-width:260px;}
.course-hero h1{margin:0 0 8px; font-size:30px; line-height:1.3;}
.course-hero .desc{margin:0 0 12px; color:var(--ink-2); font-size:15px;}
.course-hero .meta{display:flex; flex-wrap:wrap; gap:6px;}
.course-hero .side{display:flex; flex-direction:column; gap:10px; align-items:stretch; min-width:220px;}
.trial-strip{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; margin-bottom:22px;
  background:linear-gradient(120deg, var(--moss-tint), #F4F7F0 65%); border:1px solid var(--moss-line); border-radius:var(--r-md);}
.trial-strip .t{font-weight:700;}
.trial-strip .s{color:var(--ink-2); font-size:13.5px;}
.trial-strip .grow{flex:1;}
.unlock-banner{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 22px; margin-bottom:22px;
  background:linear-gradient(120deg, var(--ochre-tint), #FBF6EA 60%); border:1px solid var(--ochre-line); border-radius:var(--r-lg); box-shadow:var(--sh-1);}
.unlock-banner .grow{flex:1; min-width:220px;}
.unlock-banner b{font-size:17px;}
.unlock-banner .sub{color:var(--ink-2); font-size:13.5px;}
.lesson-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); gap:14px;}
.lesson-card{position:relative; display:flex; gap:12px; align-items:flex-start; padding:15px 17px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1); cursor:pointer; transition:all .22s var(--ease);}
.lesson-card:hover{transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--line-2);}
.lesson-card .ic{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; font-size:22px; background:var(--tint); border:1px solid var(--line); flex:none;}
.lesson-card .lc-body{flex:1; min-width:0;}
.lesson-card .nm{font-weight:700; font-size:15.5px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lesson-card .lc-row{display:flex; align-items:center; gap:8px; margin-top:5px;}
.lesson-card .sb{flex:1; min-width:0; color:var(--ink-3); font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lesson-card .st{flex:none;}
.lesson-card.locked .ic{filter:grayscale(.35); opacity:.8;}
.lesson-card.locked .nm{color:var(--ink-2);}

/* ═══ 购买页 ═══ */
.buy-wrap{max-width:760px; margin:0 auto; padding:10px 0 40px;}
.buy-card{padding:26px 28px; margin-bottom:18px;}
.order-line{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px dashed var(--line-2); font-size:14.5px;}
.order-line:last-child{border-bottom:0;}
.order-line .k{color:var(--ink-2); min-width:86px;}
.order-line .v{font-weight:600;}
.price-row{display:flex; align-items:baseline; gap:12px; margin:8px 0 4px;}
.price-big{font-size:46px; font-weight:800; color:var(--ochre-deep); line-height:1;}
.price-big .cur{font-size:22px; margin-right:2px;}
.price-sub{color:var(--ink-3); font-size:13px;}
.pay-btns{display:grid; gap:10px; margin-top:16px;}
.divider{display:flex; align-items:center; gap:12px; color:var(--ink-3); font-size:12.5px; margin:20px 0 12px;}
.divider::before,.divider::after{content:""; height:1px; background:var(--line); flex:1;}
.redeem{display:flex; gap:10px;}
.redeem .input{flex:1;}

/* ═══ 表单 ═══ */
.field{margin-bottom:14px;}
.field label{display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:6px;}
.input{width:100%; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff;
  font-size:15px; color:var(--ink); outline:none; transition:border .2s var(--ease);}
.input:focus{border-color:var(--brand);}
.input-row{display:flex; gap:10px;}

/* ═══ 弹层 ═══ */
.mask{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(51,48,42,.42); backdrop-filter:blur(3px);}
.mask.show{display:flex;}
.modal{width:100%; max-width:420px; background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:26px 26px 22px; animation:pop .22s var(--ease);}
@keyframes pop{from{transform:translateY(10px) scale(.98); opacity:0;} to{transform:none; opacity:1;}}
.modal h3{margin:0 0 8px; font-size:19px;}
.modal p{margin:0 0 16px; color:var(--ink-2); font-size:14.5px;}
.modal .acts{display:flex; gap:10px; justify-content:flex-end;}

/* ═══ 成功态 ═══ */
.success{ text-align:center; padding:26px 20px;}
.success .ok{width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:var(--moss-tint); border:1px solid var(--moss-line);
  display:grid; place-items:center; font-size:30px;}
.success h3{margin:0 0 6px; font-size:21px;}
.success p{margin:0 0 16px; color:var(--ink-2); font-size:14.5px;}

/* ═══ 我的 ═══ */
.me-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; padding:18px 0 40px;}
@media (max-width:820px){.me-grid{grid-template-columns:1fr;}}
.me-card{padding:22px 24px; margin-bottom:16px;}
.me-card h3{margin:0 0 14px; font-size:17px;}
.mycourse{display:flex; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--tint);}
.mycourse .ic{width:52px; height:52px; border-radius:13px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; font-size:26px; flex:none;}
.mycourse .grow{flex:1; min-width:0;}
.mycourse .nm{font-weight:700;}
.mycourse .sb{color:var(--ink-3); font-size:12.5px; font-weight:600;}
.empty{padding:22px; text-align:center; color:var(--ink-3); border:1px dashed var(--line-2); border-radius:var(--r-md); font-size:14px;}
.kv{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14px;}
.kv:last-child{border-bottom:0;}
.kv .k{color:var(--ink-2);}
.kv .v{font-weight:600;}

/* ═══ 页脚 ═══ */
.foot{padding:30px 0 44px; text-align:center; color:var(--ink-3); font-size:12.5px; line-height:2;}
.foot a{color:var(--ink-3); text-decoration:underline; text-underline-offset:3px;}

/* ═══ 预览工具条 ═══ */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:300; opacity:0; pointer-events:none;
  background:rgba(51,48,42,.92); color:#F5F2EA; padding:11px 20px; border-radius:999px; font-size:14px; font-weight:600;
  box-shadow:var(--sh-3); transition:all .26s var(--ease); max-width:88vw; text-align:center;}
.toast.show{opacity:1; transform:translate(-50%,0);}
.lock-note{display:flex; gap:10px; align-items:center; background:var(--sand-tint); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:11px 14px; font-size:13.5px; color:var(--ochre-deep); margin-bottom:14px;}
.devbar{position:fixed; left:16px; bottom:16px; z-index:200; display:flex; align-items:center; gap:8px;
  background:rgba(51,48,42,.9); color:#F5F2EA; border-radius:12px; padding:9px 12px; font-size:12.5px;
  box-shadow:var(--sh-3); backdrop-filter:blur(6px);}
.devbar button{background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:8px; padding:5px 10px; font-size:12.5px; font-weight:600;}
.devbar button:hover{background:rgba(255,255,255,.24);}
@media (max-width:520px){.devbar{left:8px; bottom:8px; transform:scale(.92); transform-origin:left bottom;}}

/* 未解锁：小型圆形锁标，避免与文案抢位 */
.lockdot{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px;
  background:var(--sand-tint); border:1px solid var(--line-2); color:var(--ochre-deep); flex:none; line-height:1;}

/* ═══ 窄屏适配（平板/手机）═══ */
@media (max-width:680px){
  .hud{padding:10px 14px; gap:8px;}
  .hud .brand{font-size:15px;}
  .hud .brand .fox{width:30px; height:30px; font-size:17px; border-radius:9px;}
  .hud .brand small{display:none;}
  .chip{font-size:12.5px; padding:6px 12px;}
  .hide-sm{display:none;}
  .wrap{padding:0 16px;}
  .hero{padding:30px 0 18px;}
  .hero h1{font-size:27px;}
  .hero p{font-size:15px;}
  .sec-title{flex-direction:column; align-items:flex-start; gap:2px;}
  .course-hero{padding:20px 18px;}
  .course-hero h1{font-size:23px;}
  .lesson-grid{grid-template-columns:1fr;}
  .price-big{font-size:38px;}
  .buy-card{padding:20px 18px;}
  .auth-card{padding:24px 20px;}
  .me-hero{padding:18px;}
  .me-card{padding:18px;}
  .trial-strip,.unlock-banner{padding:14px 16px;}
}

/* ═══ 加载态 ═══ */
.loading{position:fixed; inset:0; z-index:180; display:none; align-items:center; justify-content:center; gap:12px;
  background:rgba(245,242,234,.72); backdrop-filter:blur(2px); color:var(--ink-2); font-size:14.5px; font-weight:600;}
.loading.show{display:flex;}
.spin{width:26px; height:26px; border-radius:50%; border:3px solid var(--line-2); border-top-color:var(--brand); animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.err-box{display:flex; gap:10px; align-items:flex-start; background:var(--shu-tint); border:1px solid var(--shu-line);
  border-radius:var(--r-sm); padding:12px 14px; font-size:14px; color:var(--shu-deep); margin-bottom:16px;}
.skeleton{background:linear-gradient(90deg,var(--tint) 25%,#EFEBE1 37%,var(--tint) 63%); background-size:400% 100%;
  animation:sk 1.3s ease infinite; border-radius:var(--r-md); height:86px;}
@keyframes sk{0%{background-position:100% 50%;} 100%{background-position:0 50%;}}

/* ══════════════════════════════════════════════════════════
   条款 / 协议 / 政策 文档页
   ══════════════════════════════════════════════════════════ */
.doc{max-width:780px; margin:0 auto; padding:6px 0 50px;}
.doc-hd{margin:10px 0 20px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.doc-hd h1{margin:0 0 8px; font-size:30px; line-height:1.3; letter-spacing:.01em;}
.doc-hd .sub{color:var(--ink-3); font-size:13px; line-height:1.9;}
.doc .lead{margin:0 0 18px; padding:16px 18px; border-radius:var(--r-md);
  background:var(--brand-tint); border:1px solid var(--brand-tint-2); color:var(--brand-deep); font-size:14.5px; line-height:1.9;}
.doc h2{margin:30px 0 10px; padding-left:11px; border-left:3px solid var(--brand);
  font-size:16.5px; line-height:1.55; letter-spacing:.01em;}
.doc h3{margin:18px 0 6px; font-size:14.5px; color:var(--ink);}
.doc p{margin:8px 0; font-size:14.5px; line-height:1.95; color:var(--ink-2);}
.doc ul,.doc ol{margin:8px 0; padding-left:20px;}
.doc li{margin:5px 0; font-size:14.5px; line-height:1.9; color:var(--ink-2);}
.doc b,.doc strong{color:var(--ink); font-weight:700;}
.doc a{color:var(--brand); text-decoration:underline; text-underline-offset:3px;}
.doc .kv{display:block; margin:10px 0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.doc .kv div{display:flex; align-items:flex-start; gap:12px; padding:9px 14px; font-size:14px; border-top:1px solid var(--line);}
.doc .kv div:first-child{border-top:0;}
.doc .kv div:nth-child(odd){background:var(--tint);}
.doc .kv span:first-child{flex:none; width:96px; color:var(--ink-3); font-weight:600;}
.doc .kv span:last-child{flex:1; min-width:0; color:var(--ink-2); line-height:1.75;}
.doc .callout{margin:14px 0; padding:14px 16px; border-radius:var(--r-md);
  background:var(--shu-tint); border:1px solid var(--shu-line); color:var(--shu-deep); font-size:14px; line-height:1.9;}
.doc .no-list{list-style:none; padding-left:0;}
.doc .no-list li{padding-left:24px; position:relative;}
.doc .no-list li::before{content:'✕'; position:absolute; left:0; top:5px; font-size:12px; color:var(--shu); font-weight:700;}
.doc .footnote{margin-top:30px; padding-top:16px; border-top:1px solid var(--line); color:var(--ink-3); font-size:12.5px; line-height:1.9;}
.doc .back{margin-top:24px;}
@media (max-width:640px){
  .doc-hd h1{font-size:24px;}
  .doc .kv span:first-child{width:88px;}
}

/* ══ 定位说明（给学习者 / 给老师）══ */
.positioning{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin:26px 0 8px;}
.positioning .pos-card{padding:22px 24px; border-radius:var(--r-lg); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh-1);}
.positioning .pos-card .ico{font-size:22px; line-height:1;}
.positioning .pos-card h3{margin:10px 0 6px; font-size:15.5px; letter-spacing:.01em;}
.positioning .pos-card p{margin:0; color:var(--ink-2); font-size:13.5px; line-height:1.9;}
.positioning .pos-card .tag{display:inline-block; margin-top:10px; padding:3px 10px; border-radius:999px;
  background:var(--brand-tint); color:var(--brand-deep); font-size:11.5px; font-weight:700;}

/* ══ 常见问题 ══ */
.faq{display:grid; gap:10px; margin:4px 0 34px;}
.faq details{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:0 18px; box-shadow:var(--sh-1);}
.faq summary{cursor:pointer; list-style:none; padding:15px 30px 15px 0; position:relative;
  font-size:14.5px; font-weight:700; color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; position:absolute; right:0; top:12px; color:var(--brand);
  font-size:17px; font-weight:700; line-height:1.4;}
.faq details[open] summary::after{content:'−';}
.faq details[open] summary{border-bottom:1px solid var(--line);}
.faq p{margin:12px 0 14px; font-size:13.8px; line-height:1.95; color:var(--ink-2);}
.faq p:last-child{margin-bottom:16px;}