/* ============ 基础 ============ */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --pink:#f06292; --pink-soft:#fce4ec;
  --indigo:#5c6bc0; --indigo-soft:#e8eaf6;
  --amber:#f9a825; --amber-soft:#fff8e1;
  --green:#43a047; --green-soft:#e8f5e9;
  --ink:#37324a; --ink-2:#6b6680; --ink-3:#9e99b0;
  --bg:#faf7f5; --card:#ffffff; --line:#efe9e4;
  --radius:16px;
  --shadow:0 2px 12px rgba(120,90,110,.08);
}
html{ scroll-behavior:smooth; scroll-padding-top:72px; }
body{
  font-family:"Hiragino Sans GB","Hiragino Kaku Gothic ProN","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7;
  padding-bottom:108px;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
b{ font-weight:700; }

/* ============ 导航 ============ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1080px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:24px;
}
.brand{ font-size:17px; font-weight:800; white-space:nowrap; }
.nav-links{ display:flex; gap:20px; margin-right:auto; font-size:14px; color:var(--ink-2); }
.nav-links a:hover{ color:var(--pink); }
.level-tabs{ display:flex; gap:6px; }
.lv{
  padding:6px 14px; border-radius:999px; font-size:13px; font-weight:700;
  background:#f1edf0; color:var(--ink-2); transition:.15s;
}
.lv.active{ background:var(--pink); color:#fff; }
.lv.soon{ opacity:.55; cursor:not-allowed; font-weight:500; font-size:12px; }

/* ============ 首屏 ============ */
.hero{
  background:
    radial-gradient(700px 300px at 85% -40%, #e8eaf6 0%, transparent 60%),
    radial-gradient(600px 280px at 10% 0%, #fce4ec 0%, transparent 55%);
  padding:64px 20px 56px;
}
.hero-inner{ max-width:1080px; margin:0 auto; }
.hero h1{ font-size:38px; line-height:1.3; letter-spacing:.5px; }
.hero-sub{ margin-top:14px; color:var(--ink-2); font-size:16px; }
.hero-stats{ display:flex; gap:12px; margin:28px 0; flex-wrap:wrap; }
.hero-stats .hs{
  background:var(--card); border-radius:14px; padding:12px 20px; box-shadow:var(--shadow);
  font-size:14px; color:var(--ink-2);
}
.hero-stats .hs b{ font-size:22px; color:var(--ink); margin-right:4px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:11px 22px; border-radius:999px; font-weight:700; font-size:14px;
  transition:.15s;
}
.btn.primary{ background:var(--pink); color:#fff; box-shadow:0 6px 18px rgba(240,98,146,.35); }
.btn.primary:hover{ transform:translateY(-1px); }
.btn.ghost{ background:#fff; border:1px solid var(--line); color:var(--ink-2); }
.btn.ted{ background:var(--green); color:#fff; box-shadow:0 6px 18px rgba(67,160,71,.3); }
.btn.ted:hover{ transform:translateY(-1px); background:#388e3c; }
.btn.small{ padding:8px 16px; background:var(--indigo); color:#fff; font-size:13px; }

/* 卷首「兴趣拓展」入口（窄屏也始终可见） */
.ted-entry{
  padding:6px 14px; border-radius:999px; font-size:13px; font-weight:700;
  background:var(--green-soft); color:var(--green); border:1px solid #c8e6c9;
  white-space:nowrap; transition:.15s;
}
.ted-entry:hover{ background:var(--green); color:#fff; }

/* ============ 通用 section ============ */
.section{ max-width:1080px; margin:0 auto; padding:48px 20px 8px; }
.sec-title{ font-size:25px; margin-bottom:8px; }
.sec-desc{ color:var(--ink-2); font-size:14.5px; margin-bottom:24px; }
.sub-title{ font-size:18px; margin:34px 0 14px; }

/* ============ 五步法 ============ */
.steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
}
.step{
  background:var(--card); border-radius:var(--radius); padding:20px 16px; box-shadow:var(--shadow);
  position:relative; border-top:3px solid var(--pink);
}
.step:nth-child(2){ border-top-color:#ab47bc; }
.step:nth-child(3){ border-top-color:var(--indigo); }
.step:nth-child(4){ border-top-color:var(--amber); }
.step:nth-child(5){ border-top-color:var(--green); }
.step-no{
  width:30px; height:30px; border-radius:50%; background:var(--pink-soft); color:var(--pink);
  font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.step:nth-child(2) .step-no{ background:#f3e5f5; color:#ab47bc; }
.step:nth-child(3) .step-no{ background:var(--indigo-soft); color:var(--indigo); }
.step:nth-child(4) .step-no{ background:var(--amber-soft); color:#f57f17; }
.step:nth-child(5) .step-no{ background:var(--green-soft); color:var(--green); }
.step h3{ font-size:15px; margin-bottom:6px; }
.step p{ font-size:13px; color:var(--ink-2); }

.tips{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.tip{
  background:var(--card); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
  display:flex; gap:12px; align-items:flex-start;
}
.tip span{ font-size:22px; line-height:1.4; }
.tip b{ font-size:14.5px; }
.tip p{ font-size:13px; color:var(--ink-2); }

.qtypes{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.qtype{
  background:var(--card); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
  border-left:4px solid var(--indigo);
}
.qtype b{ display:block; font-size:15px; margin-bottom:6px; }
.qtype b span{ font-size:12.5px; color:var(--ink-3); font-weight:500; margin-left:6px; }
.qtype p{ font-size:13px; color:var(--ink-2); }
.qtype.wide{ grid-column:span 4; border-left-color:var(--pink); }

/* ============ 打卡 ============ */
.section.warm{ }
.checkin-wrap{
  display:grid; grid-template-columns:380px 1fr; gap:16px;
}
.checkin-main,.heatmap-box{
  background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);
}
.name-row{ display:flex; gap:8px; }
.name-row input{
  flex:1; padding:9px 14px; border-radius:10px; border:1px solid var(--line);
  font-size:14px; font-family:inherit; background:#fafafa;
}
.name-row input:focus{ outline:2px solid var(--pink-soft); border-color:var(--pink); }
.greet{ font-size:14px; color:var(--ink-2); margin:12px 0 4px; min-height:22px; }
.checkin-btn{
  width:100%; margin:10px 0 6px; padding:16px; border-radius:14px;
  background:linear-gradient(135deg,#ff8a65,#f06292); color:#fff;
  font-size:17px; font-weight:800; letter-spacing:2px;
  box-shadow:0 8px 22px rgba(240,98,146,.3); transition:.15s;
}
.checkin-btn:hover{ transform:translateY(-1px); }
.checkin-btn.done{ background:linear-gradient(135deg,#66bb6a,#43a047); box-shadow:0 8px 22px rgba(67,160,71,.3); }
.checkin-hint{ font-size:12.5px; color:var(--ink-3); text-align:center; min-height:18px; }
.streak-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.streak-card{
  background:#faf7f5; border-radius:12px; text-align:center; padding:12px 4px;
}
.streak-card span{ display:block; font-size:24px; font-weight:800; color:var(--pink); }
.streak-card label{ font-size:11.5px; color:var(--ink-2); }
.recent{ margin-top:14px; font-size:12.5px; color:var(--ink-3); }
.recent b{ color:var(--ink-2); }
.heatmap-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.heatmap-head span{ font-size:12px; color:var(--ink-3); }
.heatmap{ display:grid; grid-template-rows:repeat(7,14px); grid-auto-flow:column; grid-auto-columns:14px; gap:4px; overflow-x:auto; padding-bottom:4px; }
.heatmap i{
  border-radius:3px; background:#f0ebe7; position:relative;
}
.heatmap i[data-lv="1"]{ background:#f8bbd0; }
.heatmap i[data-lv="2"]{ background:#f48fb1; }
.heatmap i[data-lv="3"]{ background:#ec407a; }
.heatmap i[data-lv="4"]{ background:#c2185b; }
.heatmap i.today{ outline:2px solid var(--indigo); outline-offset:1px; }
.heatmap-legend{ display:flex; align-items:center; gap:3px; font-size:11.5px; color:var(--ink-3); margin-top:10px; justify-content:flex-end; }
.heatmap-legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.heatmap-legend i:nth-child(2){ background:#f0ebe7; }
.heatmap-legend i:nth-child(3){ background:#f8bbd0; }
.heatmap-legend i:nth-child(4){ background:#f48fb1; }
.heatmap-legend i:nth-child(5){ background:#ec407a; }

/* ============ 真题 ============ */
.exam-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.filter-chips{ display:flex; gap:8px; }
.chip{
  padding:7px 16px; border-radius:999px; background:#fff; border:1px solid var(--line);
  font-size:13px; color:var(--ink-2); transition:.15s;
}
.chip.active{ background:var(--indigo); border-color:var(--indigo); color:#fff; font-weight:700; }
#examSearch{
  padding:8px 14px; border-radius:999px; border:1px solid var(--line); font-size:13px;
  font-family:inherit; width:180px; background:#fff;
}
.missing-banner{
  background:var(--amber-soft); border:1px solid #ffe082; border-radius:12px;
  padding:12px 16px; font-size:13.5px; color:#8d6e00; margin-bottom:18px; display:none;
}
.missing-banner.show{ display:block; }
.missing-banner b{ color:#6d5600; }
.exam-group{ margin-bottom:30px; }
.group-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.group-head h3{ font-size:18px; }
.group-head .prog{ font-size:12.5px; color:var(--ink-3); }
.group-bar{ height:6px; background:#efe9e4; border-radius:99px; overflow:hidden; flex:1; max-width:160px; }
.group-bar i{ display:block; height:100%; background:linear-gradient(90deg,#f48fb1,#ec407a); border-radius:99px; }
.exam-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.exam-card{
  background:var(--card); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px; border:1px solid transparent;
}
.exam-card.done{ border-color:#a5d6a7; background:#f7fcf7; }
.ec-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ec-title{ font-size:16.5px; font-weight:800; }
.ec-title .done-flag{ font-size:12.5px; color:var(--green); font-weight:700; margin-left:6px; }
.ec-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.tag{
  font-size:11.5px; padding:2px 9px; border-radius:999px; font-weight:600;
}
.tag.audio{ background:var(--indigo-soft); color:var(--indigo); }
.tag.script{ background:var(--green-soft); color:var(--green); }
.tag.paper{ background:var(--pink-soft); color:#d8447a; }
.tag.answer{ background:#f3e5f5; color:#8e24aa; }
.tag.note{ background:var(--amber-soft); color:#8d6e00; }
.tag.noaudio{ background:#fff3e0; color:#e65100; }
.ec-desc{ font-size:12.5px; color:var(--ink-3); }
.ec-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ec-play{
  padding:8px 16px; border-radius:10px; background:var(--indigo); color:#fff;
  font-size:13px; font-weight:700; transition:.15s;
}
.ec-play:hover{ background:#3f51b5; }
.ec-play.playing{ background:var(--pink); }
.ec-link{
  font-size:12.5px; padding:7px 12px; border-radius:10px; background:#f4f1f6; color:var(--ink-2);
}
.ec-link:hover{ background:#e9e4ee; }
.ec-link.doc{ background:#fff8e1; color:#8d6e00; }
.ec-done{
  margin-left:auto; font-size:12.5px; padding:7px 12px; border-radius:10px;
  border:1px solid #c8e6c9; color:var(--green);
}
.ec-done.on{ background:var(--green); color:#fff; }
.tracks{ display:none; border-top:1px dashed var(--line); padding-top:10px; margin-top:2px; }
.tracks.open{ display:block; }
.tracks summary{
  font-size:12.5px; color:var(--indigo); cursor:pointer; font-weight:700; list-style:none;
}
.tracks summary::before{ content:"▸ "; }
.tracks[open] summary::before{ content:"▾ "; }
.track-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:10px; }
.track-btn{
  padding:6px 0; border-radius:8px; background:#f4f1f6; font-size:12.5px; color:var(--ink-2);
  text-align:center;
}
.track-btn:hover{ background:var(--indigo-soft); color:var(--indigo); }
.track-btn.playing{ background:var(--pink); color:#fff; font-weight:700; }

.coming-soon{ padding:60px 0; }
.cs-inner{
  text-align:center; background:#fff; border:2px dashed #ddd4cc; border-radius:var(--radius);
  padding:48px 20px; color:var(--ink-2);
}
.cs-inner span{ font-size:40px; }
.cs-inner h3{ margin:10px 0 6px; color:var(--ink); }

.footer{ text-align:center; color:var(--ink-3); font-size:12.5px; padding:48px 20px 20px; }

/* ============ 底部播放器 ============ */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(120,90,110,.10);
  padding:10px 20px;
}
.player>audio{ display:none; }
.p-track{ max-width:1080px; margin:0 auto 6px; }
.p-title{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-sub{ font-size:11.5px; color:var(--ink-3); }
.p-ctrl{ max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:12px; }
.p-btn{
  font-size:12.5px; color:var(--ink-2); background:#f4f1f6; border-radius:8px; padding:7px 10px;
  white-space:nowrap;
}
.p-btn:hover{ background:#e9e4ee; }
.p-play{
  width:40px; height:40px; border-radius:50%; background:var(--pink); color:#fff;
  font-size:15px; flex:none;
}
.p-progress{ flex:1; }
#pSeek{ width:100%; accent-color:var(--pink); height:4px; }
.p-time{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.p-btn.speed{ min-width:52px; font-weight:700; color:var(--indigo); }

/* ============ 兴趣拓展 TED ============ */
#ted{ background:linear-gradient(180deg,#fff 0%,var(--bg) 100%); }
.ted-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ted-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; display:flex; gap:12px; align-items:flex-start;
  border:1px solid transparent; transition:.15s;
}
.ted-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(120,90,110,.14); }
.ted-card.done{ border-color:#c8e6c9; background:#fbfefb; }
.ted-no{
  flex:none; width:38px; height:38px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:13px; color:#fff;
  background:linear-gradient(135deg,var(--pink),#ff8a65);
}
.ted-card.done .ted-no{ background:linear-gradient(135deg,var(--green),#66bb6a); }
.ted-main{ min-width:0; flex:1; }
.ted-title{ font-weight:700; font-size:14.5px; line-height:1.5; margin-bottom:7px; }
.ted-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.ted-tags .tag{ font-size:11px; padding:2px 9px; border-radius:999px; }
.ted-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ted-play{
  padding:7px 14px; border-radius:10px; background:var(--indigo); color:#fff;
  font-size:12.5px; font-weight:700; transition:.15s;
}
.ted-play:hover{ background:#3f51b5; }
.ted-play.video{ background:#7e57c2; }
.ted-play.video:hover{ background:#6a45b0; }
.ted-play.playing{ background:var(--pink); }
.ted-wait{ font-size:12px; color:#e65100; }
#ted .ec-link{ font-size:12px; }

/* ============ 视频弹层 ============ */
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; }
.modal[hidden]{ display:none; }
.modal-mask{ position:absolute; inset:0; background:rgba(40,30,45,.55); backdrop-filter:blur(4px); }
.modal-box{
  position:relative; width:min(720px,92vw); background:#1d1822; border-radius:18px;
  padding:14px; box-shadow:0 24px 80px rgba(0,0,0,.45);
  animation:pop .18s ease-out;
}
@keyframes pop{ from{ transform:scale(.94); opacity:0; } to{ transform:scale(1); opacity:1; } }
.modal-box video{ width:100%; max-height:72vh; border-radius:12px; background:#000; display:block; }
.vm-bar{ display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.vm-title{ color:#fff; font-size:14px; font-weight:700; flex:1; min-width:120px; }
.vm-bar .ec-link{ background:rgba(255,255,255,.14); color:#fff; }
.vm-bar .ec-link:hover{ background:rgba(255,255,255,.24); }
.vm-bar .p-btn{ background:rgba(255,255,255,.14); color:#fff; }
.vm-bar .p-btn:hover{ background:rgba(255,255,255,.24); }
.vm-close{
  position:absolute; top:-13px; right:-13px; width:34px; height:34px; border-radius:50%;
  background:var(--pink); color:#fff; font-size:15px; box-shadow:0 4px 14px rgba(0,0,0,.3);
}

/* ============ 进入密码门 ============ */
.gate{
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(160deg,#fdeef3 0%,#eef0fd 55%,#e9f7ee 100%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.gate.hidden{ display:none; }
.gate-box{
  background:#fff; border-radius:22px; padding:38px 34px 30px;
  width:100%; max-width:340px; text-align:center;
  box-shadow:0 24px 60px rgba(80,60,110,.18);
  display:flex; flex-direction:column; gap:12px;
}
.gate-emoji{ font-size:44px; }
.gate-box h2{ font-size:21px; color:var(--ink); }
.gate-tip{ font-size:13.5px; color:var(--ink-3); margin-top:-4px; }
.gate-box input{
  padding:12px 16px; border-radius:12px; border:1.5px solid var(--line);
  font-size:16px; text-align:center; letter-spacing:2px;
}
.gate-box input:focus{ outline:none; border-color:var(--pink); }
.gate-box .btn{ margin-top:4px; }
.gate-err{ font-size:13px; color:#d33; min-height:18px; }
.gate.shake .gate-box{ animation:shake .35s; }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-8px); }
  75%{ transform:translateX(8px); }
}

/* ============ 笔试真题板块 ============ */
.written-list{ display:flex; flex-direction:column; gap:8px; }
.wrow{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:11px 16px; flex-wrap:wrap;
}
.w-title{ font-weight:700; font-size:14px; color:var(--ink); white-space:nowrap; }
.w-links{ display:flex; gap:8px; flex-wrap:wrap; flex:1; justify-content:flex-end; }

/* ============ 响应式 ============ */
@media (max-width:900px){
  .steps{ grid-template-columns:1fr 1fr; }
  .tips{ grid-template-columns:1fr; }
  .qtypes{ grid-template-columns:1fr 1fr; }
  .qtype.wide{ grid-column:span 2; }
  .checkin-wrap{ grid-template-columns:1fr; }
  .exam-grid{ grid-template-columns:1fr; }
  .ted-grid{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .nav-inner{ gap:8px; padding:10px 12px; }
  .brand{ font-size:15px; }
  .lv, .ted-entry{ padding:5px 10px; font-size:12px; }
  .hero h1{ font-size:28px; }
  .track-grid{ grid-template-columns:repeat(5,1fr); }
}
@media (max-width:560px){
  .lv{ padding:5px 8px; font-size:12px; }
  .level-tabs{ gap:4px; }
  .ted-entry{ padding:4px 8px; font-size:11.5px; }
  .w-title{ white-space:normal; }
  .w-links{ justify-content:flex-start; }
}