/* =====================================================
   课件啦 kejianla.com · 会员制 v2
   学院墨绿 + 金 · PC 门户 / H5 App 双端
   ===================================================== */
:root {
  --brand: #0d5c4d;
  --brand-2: #12866f;
  --brand-3: #1ba98a;
  --gold: #f0a431;
  --gold-2: #ffc95e;
  --bg: #f4f7f6;
  --card: #ffffff;
  --text: #22332d;
  --text-sub: #6b7f78;
  --border: #e4ece9;
  --shadow: 0 3px 14px rgba(13, 92, 77, .08);
  --shadow-h: 0 10px 28px rgba(13, 92, 77, .16);
  --r: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(1200px 400px at 50% -80px, rgba(18, 134, 111, .05), transparent 70%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; cursor: pointer; }
button { font-family: inherit; cursor: pointer; }
img { display: block; }

/* ================= PC 顶部导航 ================= */
.pc-nav { display: none; }

/* ================= Hero ================= */
.hero {
  position: relative;
  background: linear-gradient(158deg, #0d5c4d 0%, #12866f 74%, #1ba98a 100%);
  color: #fff;
  padding: 18px 20px 46px;
  border-radius: 0 0 22px 22px;
  overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; right: -70px; top: -70px;
  width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.hero-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; position: relative; z-index: 1; }
.brand-m { display: flex; align-items: center; gap: 9px; font-size: 18px; }
.brand-m b { font-weight: 800; letter-spacing: 1px; }
.brand-me { font-size: 20px; opacity: .92; }
.pn-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), #e8922a);
  color: #fff; font-size: 17px; font-weight: 800;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}
.hero h1 { font-size: 30px; font-weight: 800; letter-spacing: 1px; text-align: center; position: relative; z-index: 1; }
.hero-sub { font-size: 13.5px; opacity: .88; text-align: center; margin: 9px 0 20px; position: relative; z-index: 1; }
.hero-search {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 999px;
  padding: 6px 6px 6px 18px; max-width: 560px; margin: 0 auto;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .16);
  position: relative; z-index: 1;
}
.hero-search input { flex: 1; min-width: 0; border: none; outline: none; font-size: 14.5px; color: var(--text); background: transparent; }
.hero-search button {
  border: none; background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff; font-size: 14px; font-weight: 600;
  border-radius: 999px; padding: 10px 20px; white-space: nowrap;
}
.hero-deco { position: absolute; pointer-events: none; display: none; opacity: .12; z-index: 0; }
.hd1 { right: 6%; bottom: 14%; font-size: 92px; transform: rotate(-8deg); }
.hd2 { right: 18%; top: 12%; font-size: 58px; transform: rotate(12deg); }
.hd3 { left: 4%; bottom: 12%; font-size: 78px; transform: rotate(6deg); }
.hot-kw { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 15px; position: relative; z-index: 1; }
.hot-kw a {
  font-size: 12px; color: #dff3ec; background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 4px 12px; border-radius: 999px;
}

/* ================= 主体 ================= */
.app { max-width: 100%; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
.view { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.section { background: var(--card); border: 1px solid var(--border); border-radius: 18px; margin: 14px 14px 0; padding: 20px 18px; box-shadow: 0 4px 20px rgba(13, 92, 77, .05); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.sec-head h2 { font-size: 19px; font-weight: 800; letter-spacing: .5px; }
.sec-head h2::before { content: ''; display: inline-block; width: 4px; height: 15px; border-radius: 2px; background: linear-gradient(var(--gold), var(--brand-3)); margin-right: 8px; vertical-align: -2px; }
.sec-head a { font-size: 12.5px; color: var(--text-sub); }

/* 会员横幅 */
.vip-banner {
  margin: 14px 14px 0; border-radius: var(--r);
  background: linear-gradient(120deg, #243b34 0%, #0d5c4d 55%, #12866f 100%);
  color: #fff; padding: 16px 18px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: var(--shadow); cursor: pointer;
  position: relative; overflow: hidden;
}
.vip-banner::after { content: '👑'; position: absolute; right: 86px; top: -12px; font-size: 64px; opacity: .1; }
.vb-left { display: flex; align-items: center; gap: 12px; }
.vb-crown { font-size: 30px; }
.vip-banner b { font-size: 16px; letter-spacing: .5px; }
.vip-banner p { font-size: 11.5px; opacity: .82; margin-top: 3px; }
.vb-btn {
  background: linear-gradient(135deg, var(--gold), #e8922a);
  color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

/* 快捷分类 */
.entry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.entry { text-align: center; padding: 13px 4px 11px; border-radius: 13px; background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(15, 70, 58, .05); transition: transform .18s, box-shadow .18s; cursor: pointer; }
.entry:active { transform: scale(.96); }
.eicon { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 23px; }
.i1 { background: #e8f1ff; } .i2 { background: #fff6e0; } .i3 { background: #ffecec; } .i4 { background: #e6f8f6; }
.i5 { background: #f1ecff; } .i6 { background: #e9f7ea; } .i7 { background: #ffeef5; } .i8 { background: #eef2f5; }
.ename { font-size: 12.5px; color: #2c3e38; margin-top: 7px; font-weight: 500; }

/* 资源卡网格 */
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cell { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(15, 70, 58, .06); transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s; cursor: pointer; }
.cell:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(13, 92, 77, .18); border-color: #cfe4dd; }
.thumb { position: relative; aspect-ratio: 3/4; background: #fff; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.thumb i { position: absolute; left: 8px; top: 8px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; padding: 3px 8px; border-radius: 999px; }
.tag-free { background: #18b26f; }
.tag-vip { background: linear-gradient(135deg, var(--gold), #e8922a); }
.info { padding: 12px 13px 14px; }
.info h4 { font-size: 13.5px; font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; }
.info p { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-sub); margin-top: 8px; padding-top: 8px; border-top: 1px dashed #edf3f0; }
.info p b { color: var(--brand-2); font-weight: 700; }

/* 列表页 */
.list-head { margin: 14px 14px 0; background: var(--card); border-radius: var(--r); padding: 16px 16px 12px; box-shadow: var(--shadow); }
.lh-back { font-size: 13px; color: var(--text-sub); }
.list-head h1 { font-size: 20px; font-weight: 800; margin: 6px 0 10px; }
.f-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.f-chip { font-size: 12.5px; padding: 6px 14px; border-radius: 999px; background: #f1f6f4; color: #45564f; border: 1px solid transparent; }
.f-chip.on { background: #e6f4ef; color: var(--brand); font-weight: 700; border-color: #bcdccd; }
.f-chip.sm { font-size: 11.5px; padding: 4px 11px; }
.pager { display: flex; gap: 8px; justify-content: center; padding: 18px 0 6px; }
.pager a { min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; border: 1px solid var(--border); font-size: 13px; }
.pager a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.empty { text-align: center; color: var(--text-sub); font-size: 13.5px; padding: 40px 20px; }

/* ================= 会员中心（尊享黑金绿） ================= */
.member-hero {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(240, 164, 49, .18) 0%, rgba(240, 164, 49, 0) 55%),
    linear-gradient(160deg, #0b2b24 0%, #0d3f34 45%, #0d5c4d 100%);
  color: #fff; text-align: center; padding: 40px 20px 34px;
  border-radius: 0 0 26px 26px; position: relative; overflow: hidden;
}
.mh-deco { position: absolute; border-radius: 50%; pointer-events: none; }
.mh-deco1 { width: 220px; height: 220px; right: -70px; top: -80px; background: radial-gradient(circle, rgba(255, 201, 94, .16), transparent 70%); }
.mh-deco2 { width: 160px; height: 160px; left: -50px; bottom: -60px; background: radial-gradient(circle, rgba(255, 255, 255, .08), transparent 70%); }
.mh-crown {
  font-size: 34px; display: inline-block; padding: 14px 16px; border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 201, 94, .18), rgba(255, 201, 94, .05));
  border: 1px solid rgba(255, 201, 94, .35); box-shadow: 0 8px 24px rgba(240, 164, 49, .25);
}
.mh-eyebrow { margin-top: 12px; font-size: 10.5px; letter-spacing: 5px; color: var(--gold-2); font-weight: 700; opacity: .9; }
.member-hero h1 {
  font-size: 27px; font-weight: 900; margin: 6px 0 8px; letter-spacing: 3px;
  background: linear-gradient(180deg, #fff 30%, #ffe7b3 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.member-hero .mh-slogan { font-size: 12.5px; opacity: .78; letter-spacing: 1px; }
.mh-status { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mh-pill {
  display: inline-flex; align-items: center; font-size: 12.5px; padding: 7px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #d9efe8; font-weight: 600;
}
.mh-pill.on { background: linear-gradient(135deg, var(--gold), #e8922a); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(232, 146, 42, .4); }

/* 权益九宫格 */
.vip-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 16px 14px 0; }
.vp-item {
  background: var(--card); border: 1px solid var(--border); border-radius: 13px;
  padding: 13px 6px 11px; text-align: center; box-shadow: 0 2px 8px rgba(13, 92, 77, .05);
}
.vp-item span { display: block; font-size: 21px; }
.vp-item b { display: block; font-size: 12px; margin-top: 5px; color: var(--text); }
.vp-item i { display: block; font-style: normal; font-size: 10px; color: var(--text-sub); margin-top: 2px; }

/* 会员档位卡 */
.tier-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px 14px; }
.tier {
  position: relative; background: var(--card); border-radius: 18px; padding: 24px 20px 18px;
  border: 1.5px solid var(--border); box-shadow: 0 6px 20px rgba(13, 92, 77, .08); overflow: hidden;
}
.tier::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-2); }
.tier.hot {
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--gold-2), #e8922a) border-box;
  box-shadow: 0 10px 28px rgba(232, 146, 42, .18);
}
.tier.hot::before { background: linear-gradient(180deg, var(--gold-2), #e8922a); }
.tier-tag {
  position: absolute; right: 14px; top: 14px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--gold), #e8922a); padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(232, 146, 42, .4);
}
.tier-tag.ghost { background: #eef5f2; color: var(--brand); box-shadow: none; }
.tier h4 { font-size: 17px; font-weight: 800; display: flex; align-items: baseline; gap: 8px; }
.tier-en { font-size: 10px; letter-spacing: 3px; color: var(--text-sub); font-weight: 600; }
.tier-price { margin: 12px 0 12px; display: flex; align-items: baseline; gap: 3px; color: #b4701a; }
.tier-price i { font-style: normal; font-size: 17px; font-weight: 700; }
.tier-price b { font-size: 40px; font-weight: 900; letter-spacing: -1px; }
.tier-price span { font-size: 13px; color: var(--text-sub); font-weight: 500; }
.tier-dl {
  display: block; font-style: normal; font-size: 12.5px; color: #1f8a5f; background: linear-gradient(135deg, #eaf7f0, #f2faf6);
  border: 1px solid #d5eee2; border-radius: 9px; padding: 7px 10px; margin: 0 0 12px; font-weight: 700;
}
.tier ul { list-style: none; margin-bottom: 14px; }
.tier li { font-size: 13px; color: #45564f; padding: 4.5px 0; }
.tier li::before { content: '✓'; color: #18b26f; font-weight: 800; margin-right: 8px; }
.tier button {
  width: 100%; border: none; border-radius: 999px; padding: 13px 0;
  font-size: 15.5px; font-weight: 800; letter-spacing: 1px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: 0 6px 16px rgba(13, 92, 77, .28); transition: transform .15s, box-shadow .15s;
}
.tier button:active { transform: scale(.98); }
.tier.hot button { background: linear-gradient(135deg, var(--gold-2), #e8922a); box-shadow: 0 8px 20px rgba(232, 146, 42, .4); }
.tier-note { display: block; text-align: center; font-size: 11px; color: var(--text-sub); margin-top: 9px; }
.faq-box { background: var(--card); border-radius: var(--r); margin: 0 14px 16px; padding: 18px 16px; box-shadow: var(--shadow); }
.faq-box h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.faq-box details { border-bottom: 1px solid var(--border); padding: 11px 0; }
.faq-box summary { font-size: 14px; font-weight: 600; cursor: pointer; }
.faq-box details p { font-size: 13px; color: var(--text-sub); line-height: 1.75; margin-top: 8px; }

/* ================= 我的（尊享会员卡） ================= */
.me-card {
  background:
    radial-gradient(120% 100% at 90% -10%, rgba(240, 164, 49, .22) 0%, rgba(240, 164, 49, 0) 55%),
    linear-gradient(160deg, #0b2b24 0%, #0d3f34 50%, #0d5c4d 100%);
  color: #fff; margin: 14px; border-radius: 20px; padding: 22px 20px 18px;
  box-shadow: 0 10px 26px rgba(11, 43, 36, .35); position: relative; overflow: hidden;
}
.me-deco {
  position: absolute; right: -46px; top: -46px; width: 150px; height: 150px; border-radius: 50%;
  border: 22px solid rgba(255, 201, 94, .1); pointer-events: none;
}
.me-top { display: flex; align-items: center; gap: 13px; position: relative; }
.me-avatar {
  width: 54px; height: 54px; border-radius: 50%; font-size: 26px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(255, 201, 94, .25), rgba(255, 255, 255, .08));
  border: 1.5px solid rgba(255, 201, 94, .45); flex: none;
}
.me-id b { display: block; font-size: 17px; font-weight: 800; letter-spacing: .5px; }
.me-id i { display: block; font-style: normal; font-size: 11px; opacity: .55; margin-top: 3px; letter-spacing: 1px; }
.me-ops { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.me-ops a { color: var(--gold-2); font-size: 12px; font-weight: 600; }
.me-vip { margin-top: 15px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.me-vip-badge {
  font-size: 12.5px; font-weight: 800; padding: 5px 14px; border-radius: 999px; color: #7a4d08;
  background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 3px 10px rgba(232, 146, 42, .35);
}
.me-vip-badge.ghost { background: rgba(255, 255, 255, .12); color: #d9efe8; box-shadow: none; border: 1px solid rgba(255, 255, 255, .2); }
.me-vip i { font-style: normal; font-size: 12px; opacity: .75; }
.me-vip a { color: var(--gold-2); font-size: 12.5px; font-weight: 700; }
.me-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.me-stat {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 11px 4px 9px; text-align: center; cursor: pointer;
}
.me-stat b { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; }
.me-stat span { display: block; font-size: 10.5px; opacity: .65; margin-top: 2px; }
.me-tabs { display: flex; gap: 8px; padding: 14px 14px 0; overflow-x: auto; scrollbar-width: none; }
.me-tabs::-webkit-scrollbar { display: none; }
.me-tabs button { flex: 1; border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 10px 0; font-size: 13.5px; color: var(--text-sub); font-weight: 600; white-space: nowrap; }
.me-tabs button.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(13, 92, 77, .25); }
.me-item { background: var(--card); margin: 10px 14px 0; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(15, 70, 58, .05); cursor: pointer; }
.me-item img { width: 68px; height: 50px; object-fit: cover; border-radius: 8px; flex: none; background: #eef4f1; }
.mi-info { flex: 1; min-width: 0; }
.mi-info h4 { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-info p { font-size: 11.5px; color: var(--text-sub); margin-top: 4px; }
.mi-go { color: #b9ccc5; font-size: 18px; flex: none; }
/* 教师资料卡 */
.me-profile { background: var(--card); margin: 10px 14px 0; border-radius: 14px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(15, 70, 58, .05); }
.mp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 6px; }
.mp-head b { font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; }
.mp-head a { margin-left: auto; color: var(--brand-2); font-size: 12.5px; font-weight: 600; }
.mp-fill { font-size: 11px; color: #0f8a5f; background: #eef7f2; border-radius: 999px; padding: 3px 10px; }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 12px; }
.mp-item { background: #f4f9f6; border-radius: 10px; padding: 9px 12px; min-width: 0; }
.mp-item span { display: block; font-size: 10.5px; color: var(--text-sub); }
.mp-item b { display: block; font-size: 12.5px; font-weight: 600; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-item b i { font-style: normal; font-weight: 400; color: #a9bcb4; }
/* 激活码面板 */
.me-codebox { background: var(--card); border-radius: 14px; padding: 16px 16px 18px; box-shadow: 0 2px 8px rgba(15, 70, 58, .05); }
.me-codebox h4 { font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.me-codebox h4 i { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--text-sub); }
.me-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f4f9f6; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.me-code b { font-size: 14px; letter-spacing: 1px; }
.me-code span { display: block; font-size: 11px; color: var(--text-sub); margin-top: 3px; }
.me-code i { font-style: normal; font-size: 10.5px; color: #a9bcb4; text-align: right; flex: none; max-width: 40%; }

/* ================= 页脚 ================= */
.site-footer { background: #0b3d33; color: #9fc4ba; margin-top: 26px; padding: 34px 24px calc(26px + env(safe-area-inset-bottom)); }
.sf-inner { max-width: 1520px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 32px; }
.sf-brand { flex: 1 1 240px; }
.sf-brand b { display: block; font-size: 21px; color: #fff; letter-spacing: 2px; }
.sf-brand span { font-size: 10.5px; color: #6fa297; letter-spacing: 3px; }
.sf-brand p { margin-top: 10px; font-size: 12.5px; line-height: 1.8; }
.sf-col { flex: 0 0 140px; }
.sf-col b { display: block; color: #fff; font-size: 13.5px; margin-bottom: 9px; }
.sf-col a { display: block; font-size: 12.5px; padding: 4px 0; }
.sf-copy { text-align: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 11.5px; color: #6fa297; }

/* ================= H5 底部 Tab ================= */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex; background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(14px); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar div { flex: 1; text-align: center; font-size: 10.5px; color: #8a9a94; padding: 7px 0 6px; cursor: pointer; }
.tabbar div span { display: block; font-size: 20px; margin-bottom: 1px; }
.tabbar div.active { color: var(--brand); font-weight: 700; }

/* ================= 弹层 ================= */
.mask { position: fixed; inset: 0; background: rgba(10, 30, 25, .55); backdrop-filter: blur(3px); z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.detail-card, .member-card, .deliver-card {
  position: relative; width: 100%; max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 20px 20px 0 0; padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
}
.m-close { position: absolute; right: 14px; top: 12px; border: none; background: #f1f6f4; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; color: var(--text-sub); }
.dt-cover { border-radius: 14px; overflow: hidden; background: #eef4f2; }
.dt-cover img { width: 100%; max-height: 44vh; object-fit: contain; }
.dt-body h2 { font-size: 17px; font-weight: 800; line-height: 1.5; margin: 14px 0 8px; }
.dt-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.dt-meta span { font-size: 11px; color: var(--text-sub); background: #f1f6f4; padding: 4px 10px; border-radius: 999px; }
.dt-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.p-free { color: #18b26f; font-size: 18px; }
.p-vip { color: #e8922a; font-size: 18px; }
.p-single { font-size: 12.5px; color: var(--text-sub); }
.dt-dl { width: 100%; border: none; border-radius: 999px; padding: 14px 0; font-size: 15.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--gold), #e8922a); box-shadow: 0 6px 16px rgba(232, 146, 42, .35); }
.dt-dl:disabled { opacity: .6; }
.dt-btns { display: flex; gap: 10px; margin-top: 12px; }
.dt-btns .dt-dl { flex: 1; width: auto; }
.dt-fav { flex: none; border: 1.5px solid var(--border); background: #fff; color: var(--text-sub); border-radius: 999px; padding: 0 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.dt-fav.on { border-color: #e8922a; color: #c77700; background: #fdf3e2; }
.dt-tip { text-align: center; font-size: 11.5px; color: var(--text-sub); margin-top: 9px; }

.member-card h3 { font-size: 17px; font-weight: 800; text-align: center; margin-bottom: 16px; }
.mc-crown { margin-right: 4px; }
.tier-row { display: flex; flex-direction: column; gap: 10px; }
.mini-tier { display: flex; align-items: center; gap: 12px; border: 2px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.mini-tier.hot { border-color: var(--gold); background: #fffdf5; }
.mini-tier b { font-size: 15px; width: 52px; }
.mini-tier span { flex: 1; font-size: 19px; font-weight: 800; color: #e8922a; }
.mini-tier button { border: none; border-radius: 999px; padding: 9px 22px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--gold), #e8922a); }
.mc-note { text-align: center; font-size: 11px; color: var(--text-sub); margin-top: 14px; }

.deliver-card { text-align: center; }
.dv-ok { font-size: 40px; }
.deliver-card h3 { font-size: 16.5px; font-weight: 800; margin: 10px 0 16px; line-height: 1.5; }
.dv-link { text-align: left; background: #f5faf8; border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; margin-bottom: 10px; }
.dv-link b { font-size: 13.5px; color: var(--brand); }
.dv-link p { font-size: 12.5px; word-break: break-all; margin: 7px 0 4px; color: #33473f; }
.dv-link span { font-size: 12px; color: #e8922a; font-weight: 700; }
.dv-link button { float: right; border: none; border-radius: 999px; padding: 6px 16px; font-size: 12px; font-weight: 700; color: #fff; background: var(--brand-2); margin-top: -26px; }
.dv-tip { font-size: 11px; color: var(--text-sub); margin-top: 4px; }

/* AI 客服 */
.float-btn { position: fixed; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(13, 92, 77, .35); z-index: 130; cursor: pointer; }
.chat-mask { align-items: flex-end; }
.chat-panel { width: 100%; height: 78vh; background: #fff; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px 12px; border-bottom: 1px solid var(--border); font-size: 15px; }
.chat-head .m-close { position: static; }
.chat-body { flex: 1; overflow-y: auto; padding: 14px; background: #f7faf9; }
.cmsg { max-width: 82%; font-size: 13.5px; line-height: 1.65; padding: 10px 13px; border-radius: 14px; margin-bottom: 10px; word-break: break-word; }
.cmsg.ai { background: #fff; border: 1px solid var(--border); border-top-left-radius: 4px; }
.cmsg.me { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; margin-left: auto; border-top-right-radius: 4px; }
.chat-input { display: flex; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.chat-input input { flex: 1; border: 1px solid var(--border); border-radius: 999px; padding: 10px 16px; font-size: 14px; outline: none; }
.chat-input button { border: none; border-radius: 999px; padding: 0 22px; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-2), var(--brand)); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%) translateY(20px); background: rgba(20, 40, 34, .92); color: #fff; font-size: 13px; padding: 11px 20px; border-radius: 999px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 300; max-width: 80vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =====================================================
   PC 宽屏（≥992px）：教育门户布局
   ===================================================== */
@media (min-width: 992px) {
  html, body { height: auto; overflow: visible; }

  /* 顶部导航 */
  .pc-nav {
    display: block; position: sticky; top: 0; z-index: 160;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 14px rgba(13, 92, 77, .07);
  }
  .pn-inner { max-width: 1520px; margin: 0 auto; display: flex; align-items: center; gap: 22px; height: 66px; padding: 0 44px; }
  .pn-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; }
  .pn-logo b { font-size: 21px; font-weight: 800; color: var(--brand); letter-spacing: 1px; }
  .pn-logo i { font-style: normal; font-size: 11px; color: #93b3aa; letter-spacing: .5px; }
  .pc-nav .pn-mark { width: 38px; height: 38px; font-size: 19px; }
  .pn-links { display: flex; gap: 2px; flex: 1; }
  .pn-links a { padding: 8px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: #3a4f48; white-space: nowrap; }
  .pn-links a:hover { background: #eef7f3; color: var(--brand); }
  .pn-links a.active { color: var(--brand); font-weight: 700; background: #e8f4ef; }
  .pn-search { display: flex; align-items: center; flex-shrink: 0; background: #f2f7f5; border: 1px solid var(--border); border-radius: 999px; padding: 4px 4px 4px 16px; width: 300px; }
  .pn-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 13px; }
  .pn-search button { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border: none; border-radius: 999px; padding: 7px 20px; font-size: 13px; font-weight: 600; }
  .pn-me { font-size: 14px; color: #3a4f48; cursor: pointer; flex-shrink: 0; }
  .pn-me:hover { color: var(--brand); }

  .app { max-width: 1520px; margin: 0 auto; padding: 0 0 56px; }
  .tabbar { display: none; }

  /* Hero：门户级大气首屏 */
  .hero { padding: 66px 72px 84px; border-radius: 0 0 30px 30px; }
  .hero::after { width: 340px; height: 340px; right: -90px; top: -110px; }
  .hero-deco { display: block; }
  .hd1 { font-size: 120px; } .hd2 { font-size: 76px; } .hd3 { font-size: 100px; }
  .hero h1 { font-size: 58px; letter-spacing: 4px; text-shadow: 0 4px 24px rgba(0,0,0,.14); }
  .hero-sub { font-size: 18px; letter-spacing: 1.5px; margin: 14px 0 28px; }
  .hero-search { max-width: 880px; padding: 10px 10px 10px 28px; box-shadow: 0 14px 44px rgba(0, 0, 0, .22); }
  .hero-search input { font-size: 16px; }
  .hero-search button { font-size: 16px; padding: 14px 36px; }
  .hot-kw { margin-top: 20px; }
  .hot-kw a { font-size: 13.5px; padding: 6px 16px; }
  .hero .brand-m, .hero .hero-top { display: none; }

  /* 区块 */
  .section { margin: 30px 44px 0; padding: 32px 36px; border-radius: 20px; }
  .sec-head { margin-bottom: 20px; }
  .sec-head h2 { font-size: 24px; letter-spacing: 1px; }
  .sec-head h2::before { height: 18px; width: 5px; }
  .sec-head a { font-size: 13.5px; }

  .vip-banner { margin: 30px 44px 0; padding: 26px 32px; border-radius: 20px; }
  .vip-banner b { font-size: 20px; letter-spacing: .5px; }
  .vip-banner p { font-size: 13.5px; margin-top: 5px; }
  .vb-crown { font-size: 36px; }
  .vb-btn { font-size: 14px; padding: 10px 20px; }

  .entry-grid { grid-template-columns: repeat(8, 1fr); gap: 18px; }
  .entry { padding: 22px 6px 18px; border-radius: 18px; }
  .entry:hover { transform: translateY(-5px); box-shadow: var(--shadow-h); }
  .eicon { width: 60px; height: 60px; font-size: 30px; border-radius: 17px; }
  .ename { font-size: 14px; margin-top: 9px; }

  /* 资源网格：3:4 大图 4 列 */
  .res-grid { grid-template-columns: repeat(4, 1fr); gap: 26px; }
  .res-grid .cell { border-radius: 18px; }
  .info { padding: 14px 16px 16px; }
  .info h4 { font-size: 15px; min-height: 45px; }
  .info p { font-size: 12px; }
  .thumb i { font-size: 11.5px; padding: 4px 10px; }

  .list-head { margin: 30px 44px 0; padding: 26px 30px 16px; border-radius: 20px; }
  .list-head h1 { font-size: 28px; letter-spacing: .5px; }
  .f-chip { font-size: 13.5px; padding: 7px 16px; }
  .f-chip.sm { font-size: 12.5px; padding: 5px 13px; }
  .f-row { gap: 10px; }

  /* 会员中心 */
  .member-hero { padding: 72px 20px 58px; border-radius: 0 0 34px 34px; }
  .mh-eyebrow { font-size: 12px; letter-spacing: 7px; margin-top: 14px; }
  .member-hero h1 { font-size: 42px; letter-spacing: 5px; }
  .member-hero .mh-slogan { font-size: 15px; }
  .mh-pill { font-size: 13.5px; padding: 8px 20px; }
  .mh-crown { font-size: 42px; padding: 18px 20px; }
  .vip-perks { grid-template-columns: repeat(6, 1fr); gap: 16px; padding: 26px 44px 0; max-width: 1520px; margin: 0 auto; }
  .vp-item { padding: 20px 8px 16px; border-radius: 16px; }
  .vp-item span { font-size: 27px; }
  .vp-item b { font-size: 13.5px; margin-top: 8px; }
  .vp-item i { font-size: 11px; margin-top: 3px; }
  .tier-wrap { grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 30px 44px 24px; max-width: 1520px; margin: 0 auto; }
  .tier { padding: 30px 26px 24px; border-radius: 22px; }
  .tier h4 { font-size: 20px; }
  .tier-price b { font-size: 46px; }
  .tier li { font-size: 13.5px; padding: 5.5px 0; }
  .tier button { padding: 15px 0; font-size: 16px; }
  .tier:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(13, 92, 77, .16); }
  .faq-box { margin: 0 44px 30px; padding: 26px 30px; border-radius: 20px; }
  .faq-box h3 { font-size: 18px; }
  .faq-box details { padding: 14px 0; }
  .faq-box summary { font-size: 15px; }

  /* 我的（与会员中心同宽 1520 容器） */
  .me-card {
    margin: 30px auto 0; max-width: 1520px; padding: 36px 44px 32px; border-radius: 24px;
    display: grid; grid-template-columns: 1fr 400px; grid-template-areas: "top stats" "vip stats";
    column-gap: 44px; align-items: center;
  }
  .me-top { grid-area: top; }
  .me-vip { grid-area: vip; margin-top: 16px; }
  .me-stats { grid-area: stats; margin-top: 0; gap: 14px; }
  .me-stat { padding: 16px 8px 14px; border-radius: 14px; }
  .me-avatar { width: 64px; height: 64px; font-size: 31px; }
  .me-id b { font-size: 20px; }
  .me-stat b { font-size: 16px; }
  .me-stat span { font-size: 11.5px; }
  .me-tabs { max-width: 1520px; margin: 18px auto 0; padding: 0 44px; }
  .me-tabs button { padding: 13px 0; font-size: 15px; }
  #meList { max-width: 1520px; margin: 0 auto; padding: 0 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  #meList .me-item { margin: 0; padding: 12px 14px; border-radius: 14px; }
  #meList .me-item img { width: 96px; height: 66px; }
  #meList .mi-info h4 { font-size: 14.5px; }
  #meList .points-box, #meList .empty, #meList .me-codebox { grid-column: 1 / -1; }
  #meList .empty { margin-top: 10px; }
  .me-profile { max-width: 1520px; margin: 14px auto 0; padding: 20px 26px; border-radius: 16px; }
  .mp-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .mp-item { padding: 12px 14px; }
  .mp-item span { font-size: 11.5px; }
  .mp-item b { font-size: 13.5px; }
  .me-ops a { font-size: 13px; }

  /* 弹层居中卡片式（详情大图更大） */
  .mask { align-items: center !important; }
  .detail-card, .member-card, .deliver-card {
    width: 760px; max-width: 92vw; border-radius: 22px !important;
    padding: 24px 24px 26px;
    box-shadow: 0 24px 80px rgba(10, 40, 32, .3);
  }
  .dt-cover { border-radius: 16px; }
  .dt-cover img { max-height: 66vh; }
  .dt-body { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 't p' 'm p' 'b b' 'tip tip'; gap: 6px 24px; align-items: center; }
  .dt-body h2 { grid-area: t; font-size: 19px; }
  .dt-meta { grid-area: m; }
  .dt-price { grid-area: p; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; }
  .dt-btns { grid-area: b; margin-top: 12px; }
  .dt-btns .dt-dl { padding: 16px 0; font-size: 16.5px; }
  .dt-btns .dt-fav { padding: 0 26px; font-size: 14.5px; }
  .dt-tip { grid-area: tip; }
  .chat-mask { align-items: center !important; }
  .chat-panel { width: 520px; height: 72vh; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 80px rgba(10, 40, 32, .3); }

  .float-btn { width: 62px; height: 62px; right: 34px; bottom: 34px; font-size: 25px; }
  .site-footer { padding: 54px 64px 44px; }
  .sf-inner { gap: 64px; }
  .sf-brand b { font-size: 24px; }
}

/* PC hover 细节 */
@media (hover: hover) and (min-width: 992px) {
  .cell .thumb img { transition: transform .35s ease; }
  .cell:hover .thumb img { transform: scale(1.04); }
  .vip-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }
  .vip-banner { transition: transform .2s, box-shadow .2s; }
  .pn-links a, .sf-col a, .hot-kw a { transition: all .15s; }
  .sf-col a:hover { color: #fff; }
}


/* 超宽屏（≥1600px）：保持 4 列，图更大 */
@media (min-width: 1600px) {
  .app { max-width: 1680px; }
  .pn-inner { max-width: 1680px; }
  .res-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
  .hero h1 { font-size: 62px; }
}


/* =====================================================
   列表页 v2：分类筛选与资源网格同容器对齐
   ===================================================== */
.list-shell {
  margin: 14px 14px 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 12px 18px;
  box-shadow: var(--shadow);
}
.list-head {
  margin: 0;
  padding: 4px 4px 12px;
  background: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.list-head h1 { font-size: 19px; font-weight: 800; margin: 6px 0 10px; letter-spacing: .5px; }

/* =====================================================
   详情页（左右结构，参照门户详情版式）
   ===================================================== */
.dt-wrap { padding: 14px 14px 0; }
.dt-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--text-sub); padding: 2px 2px 10px; }
.dt-crumb a { color: var(--text-sub); cursor: pointer; }
.dt-crumb i { font-style: normal; color: #b9c8c2; }
.dt-crumb b { color: var(--text); font-weight: 600; max-width: 56%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-main { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* 左：封面大图 */
.dt-gallery {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 14px;
}
.dt-gallery img { display: block; width: 100%; max-width: 620px; border-radius: 8px; }
.dt-badge {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-style: normal; font-size: 12px; font-weight: 800; color: #fff;
  padding: 5px 14px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.dt-badge.b-free { background: linear-gradient(135deg, #18b26f, #0f8a5f); }
.dt-badge.b-vip { background: linear-gradient(135deg, var(--gold), #e8922a); }

/* 右：信息栏 */
.dt-side {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 16px 20px;
  box-shadow: var(--shadow);
}
.dt-side h1 { font-size: 18px; font-weight: 800; line-height: 1.6; letter-spacing: .3px; }
.dt-side .dt-meta { margin: 12px 0 0; }
.dt-side .dt-meta span { font-size: 11.5px; background: #f1f6f4; color: #45564f; border-radius: 999px; padding: 4px 12px; }
.dt-side .dt-price {
  margin: 10px 0 0;
  padding: 9px 12px;
  /* 旧版弹窗详情的 PC 规则（.dt-price{flex-direction:column}）会波及这里，必须显式拉回横排 */
  display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: #fbf7ee;
  border: 1px dashed #ecd9b0;
  border-radius: 12px;
}
.dt-side .p-free { color: #0f8a5f; font-size: 18px; }
.dt-side .p-vip { color: #c77700; font-size: 18px; }
.dt-side .p-single { font-size: 12.5px; color: var(--text-sub); }
.dt-buy {
  width: 100%; margin-top: 10px;
  border: 1.5px solid var(--gold); background: #fffdf6; color: #b06e00;
  border-radius: 999px; padding: 11px 0; font-size: 14px; font-weight: 600;
}
.dt-guar { list-style: none; margin: 14px 0 0; padding: 12px 2px 0; border-top: 1px dashed var(--border); }
.dt-guar li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #55685f; padding: 4px 0; }
.dt-guar span { flex-shrink: 0; }

/* 相关推荐 */
.dt-related { margin-top: 26px; }
.dt-related .sec-head { margin-bottom: 14px; }

/* =====================================================
   PC 适配
   ===================================================== */
@media (min-width: 992px) {
  .list-shell { margin: 30px 44px 0; padding: 26px 32px 32px; border-radius: 20px; }
  .list-head h1 { font-size: 26px; margin: 8px 0 14px; }
  .dt-wrap { padding: 22px 44px 0; max-width: 1560px; margin: 0 auto; }
  .dt-crumb { font-size: 13px; padding-bottom: 14px; }
  .dt-main {
    grid-template-columns: minmax(0, 1fr) 400px;   /* 右栏宽度统一在这里定义，加宽档位见「详情图」注释块下方 */
    gap: 24px;
    align-items: start;
  }
  .dt-gallery { padding: 22px; border-radius: 20px; }
  .dt-gallery img { max-width: 680px; }
  .dt-badge { font-size: 13px; padding: 6px 16px; }
  .dt-side { position: sticky; top: 84px; padding: 26px 26px 28px; border-radius: 20px; }
  .dt-side h1 { font-size: 22px; }
  .dt-side .dt-meta span { font-size: 12px; padding: 5px 14px; }
  .dt-side .dt-price { padding: 10px 14px; }
  .dt-side .p-free, .dt-side .p-vip { font-size: 19px; }
  .dt-dl { padding: 15px 0; font-size: 16px; }
  .dt-buy { padding: 12px 0; font-size: 14.5px; }
  .dt-guar li { font-size: 13px; padding: 5px 0; }
  .dt-related { margin-top: 34px; }
}


/* =====================================================
   免费下载 · 微信激活码门
   ===================================================== */
.gate-code { width: 420px; max-width: 94vw; }
.gate-code h3 { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.cg-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.cg-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #12866f, #0d5c4d); color: #fff;
  font-size: 13px; font-weight: 800; font-style: normal;
  display: flex; align-items: center; justify-content: center; margin-top: 4px;
}
.cg-wx-card {
  flex: 1; background: #f2f9f6; border: 1px dashed #b9dcd1;
  border-radius: 12px; padding: 12px 14px;
}
.cg-wx-card p { font-size: 14px; font-weight: 600; color: #23453c; }
.cg-wx-card p b { color: var(--brand-2); font-size: 15px; }
.cg-wx-sub { font-size: 12px !important; font-weight: 400 !important; color: #6b8179 !important; margin-top: 3px; }
.cg-copy {
  margin-top: 9px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #12866f, #0d5c4d); color: #fff;
  border-radius: 999px; padding: 7px 18px; font-size: 12.5px; font-weight: 600;
}
.cg-input-row { flex: 1; display: flex; gap: 8px; }
.cg-input-row input {
  flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: 14px; outline: none; letter-spacing: 1px;
}
.cg-input-row input:focus { border-color: var(--brand); }
.cg-input-row button {
  border: none; cursor: pointer; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), #e8922a); color: #fff;
  border-radius: 10px; padding: 0 18px; font-size: 13.5px; font-weight: 700;
}
.cg-err { color: #d33; font-size: 12.5px; margin: 2px 0 8px 36px; }
.cg-vip-link { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--brand-2); font-weight: 600; cursor: pointer; }

/* 详情图：宽度铺满左栏容器，高度自适应图片原始比例
   注意：这里只保留「大图铺满左栏」的覆盖 —— 旧版本这块还把右栏压到 340px（与上面的 400px 冲突），
   右栏被挤窄后「文件类型 Word（.docx）· 可直接编辑修改」等文案被迫折成两行。左右两栏宽度请只看 .dt-main。 */
@media (min-width: 992px) {
  .dt-gallery { padding: 0; background: none; border-radius: 0; }
  .dt-gallery img { max-width: 100%; width: 100%; height: auto; border-radius: 14px; }
}

/* 屏幕越宽，右栏越宽、左栏越窄（信息栏是主转化区，优先给宽度） */
@media (min-width: 1280px) {
  .dt-main { grid-template-columns: minmax(0, 1fr) 420px; gap: 26px; }
  .dt-side { padding: 24px 24px 26px; }
}
@media (min-width: 1600px) {
  .dt-main { grid-template-columns: minmax(0, 1fr) 470px; gap: 30px; }
  .dt-wrap { max-width: 1680px; }
}

/* =====================================================
   PC 导航分类下拉
   ===================================================== */
.pn-drop { position: relative; }
.pn-drop-btn i { font-style: normal; font-size: 11px; color: #93b3aa; margin-left: 2px; }
.pn-drop-panel {
  display: none; position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  width: 620px; background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(10, 40, 32, .18); padding: 22px 24px; z-index: 200;
  grid-template-columns: 1.6fr 1fr; gap: 26px; cursor: default;
}
.pn-drop:hover .pn-drop-panel, .pn-drop-panel:hover { display: grid; }
.pn-drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.pnd-col h5 { font-size: 13px; color: #93a8a0; font-weight: 700; margin-bottom: 10px; letter-spacing: 1px; }
.pnd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pnd-grid.pnd-types { grid-template-columns: repeat(2, 1fr); }
.pnd-grid a { padding: 7px 8px; border-radius: 9px; font-size: 13.5px; color: #3a4f48; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnd-grid a:hover { background: #eef7f3; color: var(--brand); font-weight: 600; }

/* =====================================================
   列表筛选：行标签
   ===================================================== */
.f-label { flex-shrink: 0; font-style: normal; font-size: 12.5px; color: #93a8a0; font-weight: 700; padding: 6px 10px 0 0; }
.f-row { align-items: flex-start; }

/* =====================================================
   啦啦币面板（会员中心）
   ===================================================== */
.points-box {
  margin: 26px 14px 0; background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px 16px 18px; box-shadow: var(--shadow);
}
.pt-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.pt-balance { display: flex; align-items: center; gap: 12px; }
.pt-coin { font-size: 34px; }
.pt-balance b { display: block; font-size: 30px; font-weight: 800; color: var(--brand); line-height: 1.1; }
.pt-balance span { font-size: 12px; color: var(--text-sub); }
.pt-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pt-sign, .pt-redeem { border: none; cursor: pointer; border-radius: 999px; padding: 10px 20px; font-size: 13.5px; font-weight: 700; }
.pt-sign { background: linear-gradient(135deg, var(--gold), #e8922a); color: #fff; }
.pt-sign.done { background: #eef2f0; color: #9ab0a8; cursor: default; }
.pt-redeem { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; }
.pt-task-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pt-task { background: #f4f9f6; border: 1px solid var(--border); border-radius: 14px; padding: 14px 12px; cursor: pointer; transition: all .15s; }
.pt-task:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); border-color: #bfe0d5; }
.pt-ticon { font-size: 24px; }
.pt-task b { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 6px; }
.pt-task b i { font-style: normal; font-size: 12px; color: #c77700; font-weight: 800; background: #fdf3e2; border-radius: 999px; padding: 2px 8px; }
.pt-task p { font-size: 11.5px; color: var(--text-sub); margin-top: 5px; line-height: 1.5; }
.pt-codes { margin-top: 16px; }
.pt-codes h4, .pt-history h4 { font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.pt-codes h4 i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--text-sub); }
.pt-code { display: flex; align-items: center; gap: 12px; background: #fbf7ee; border: 1px dashed #ecd9b0; border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.pt-code b { font-size: 15px; letter-spacing: 1.5px; color: #b06e00; flex: 1; }
.pt-code span { font-size: 12px; color: var(--text-sub); }
.pt-code button { border: none; cursor: pointer; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border-radius: 999px; padding: 6px 16px; font-size: 12px; font-weight: 600; }
.pt-none { font-size: 12.5px; color: var(--text-sub); }

/* ===== 会员激活码兑换弹窗（重设计） ===== */
.redeem-card { width: min(400px, 92vw); background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: 0 18px 50px rgba(15, 70, 58, .25); }
.rd-hero { position: relative; background: linear-gradient(135deg, #f7c86a 0%, #e8a93c 55%, #d18f1f 100%); padding: 26px 20px 22px; text-align: center; color: #fff; }
.rd-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px; background: var(--card); border-radius: 14px 14px 0 0; }
.rd-crown { width: 54px; height: 54px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: rgba(255, 255, 255, .22); border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 50%; box-shadow: 0 4px 12px rgba(160, 100, 0, .25); }
.rd-hero h3 { font-size: 17px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 1px 3px rgba(140, 85, 0, .3); }
.rd-hero p { margin-top: 6px; font-size: 12px; line-height: 1.6; opacity: .95; }
.rd-close { position: absolute; right: 10px; top: 10px; background: rgba(255, 255, 255, .25); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; cursor: pointer; z-index: 2; }
.rd-body { padding: 18px 18px 16px; }
.rd-input-wrap { position: relative; }
.rd-input-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: .8; }
.rd-input-wrap input { width: 100%; box-sizing: border-box; padding: 13px 14px 13px 40px; border: 1.5px solid #e3d3ae; border-radius: 14px; background: #fffdf6; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: #7a5410; outline: none; transition: border-color .15s, box-shadow .15s; }
.rd-input-wrap input:focus { border-color: #e0a63a; box-shadow: 0 0 0 3px rgba(232, 169, 60, .18); }
.rd-input-wrap input::placeholder { color: #c4b18a; font-weight: 400; letter-spacing: 0; }
.rd-err { color: #d33; font-size: 12.5px; margin: 8px 2px 0; }
.rd-btn { width: 100%; margin-top: 12px; border: none; cursor: pointer; padding: 13px; border-radius: 14px; font-size: 15px; font-weight: 800; letter-spacing: 2px; color: #fff; background: linear-gradient(135deg, #f0b445, #d18f1f); box-shadow: 0 6px 16px rgba(209, 143, 31, .35); transition: transform .12s, box-shadow .12s; }
.rd-btn:active { transform: scale(.97); }
.rd-note { margin-top: 14px; background: #faf7ef; border: 1px solid #f0e6cd; border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.rd-tip-row { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; line-height: 1.65; color: #6b6046; }
.rd-tip-row b { color: #8a6414; }
.rd-tip-ico, .rd-tip-uni { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 12px; }
.rd-tip-ico { background: linear-gradient(135deg, #f7dc9e, #eec25f); }
.rd-tip-uni { background: #e3eef7; }
.rd-foot { margin-top: 12px; font-size: 11.5px; color: var(--text-sub); line-height: 1.7; text-align: center; }
.rd-foot a { color: var(--gold-2); font-weight: 700; }

/* ===== 「我的激活码」板块 ===== */
.me-codebox .me-redeem-box { margin-bottom: 16px; background: linear-gradient(135deg, #fdf6e4, #fbefd2); border: 1px solid #eeddb2; border-radius: 14px; padding: 14px; }
.me-redeem-box h4 { color: #8a6414; }
.me-redeem-row { display: flex; gap: 8px; margin-top: 4px; }
.me-redeem-row input { flex: 1; min-width: 0; padding: 11px 12px; border: 1.5px solid #e3d3ae; border-radius: 12px; background: #fff; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; outline: none; }
.me-redeem-row input:focus { border-color: #e0a63a; box-shadow: 0 0 0 3px rgba(232, 169, 60, .15); }
.me-redeem-row button { flex: none; border: none; cursor: pointer; padding: 0 18px; border-radius: 12px; font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f0b445, #d18f1f); box-shadow: 0 4px 10px rgba(209, 143, 31, .3); }
.me-redeem-err { color: #d33; font-size: 12px; margin: 8px 2px 0; display: none; }
.me-codeguide { margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.me-guide-card { border-radius: 12px; padding: 11px 12px; font-size: 11px; line-height: 1.65; }
.me-guide-card b { display: block; font-size: 12.5px; margin-bottom: 4px; }
.me-guide-card.vip { background: #fdf6e4; border: 1px solid #eeddb2; color: #6b6046; }
.me-guide-card.vip b { color: #a0741a; }
.me-guide-card.uni { background: #eef5fb; border: 1px solid #cfe2f0; color: #4c5c68; }
.me-guide-card.uni b { color: #2d6a96; }
.pt-history { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 14px; }
.pt-hrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px dashed #eef2f0; }
.pt-hrow b { font-size: 13.5px; flex-shrink: 0; }
.pt-hrow span { font-size: 12px; color: var(--text-sub); text-align: right; }
.pt-ok { font-style: normal; color: #0f8a5f; }
.pt-wait { font-style: normal; color: #c77700; }
.pt-no { font-style: normal; color: #c0392b; }

/* 我的页 · 啦啦币 */
.me-coin { margin-top: 10px; font-size: 13.5px; color: #55685f; }
.me-coin b { color: var(--brand); font-weight: 800; }
.me-coin a { color: var(--brand-2); font-weight: 600; cursor: pointer; }
.pt-me-top span a { color: var(--brand-2); font-weight: 600; cursor: pointer; }
.pt-me-top { flex-wrap: wrap; }
.pt-me-bal { font-style: normal; font-size: 18px; font-weight: 800; color: var(--brand); }

/* =====================================================
   详情页 · 万能激活码解锁行
   ===================================================== */
.dt-ucode { display: flex; gap: 8px; margin-top: 10px; }
.dt-ucode input { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 999px; padding: 9px 16px; font-size: 13px; outline: none; letter-spacing: 1px; }
.dt-ucode input:focus { border-color: var(--brand); }
.dt-ucode button { flex-shrink: 0; border: none; cursor: pointer; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border-radius: 999px; padding: 0 20px; font-size: 13px; font-weight: 700; }
.dt-earn-link { display: block; margin-top: 10px; font-size: 12.5px; color: var(--brand-2); font-weight: 600; cursor: pointer; }
.dt-earn-link:hover { text-decoration: underline; }

/* =====================================================
   个人资料 / 扫码登录 弹层
   ===================================================== */
.pf-intro { font-size: 12.5px; color: var(--text-sub); line-height: 1.7; margin-bottom: 14px; }
.pf-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pf-row label { flex: 0 0 92px; font-size: 13px; font-weight: 600; color: var(--text); }
.pf-row label i { font-style: normal; font-size: 10.5px; color: #a9bcb4; font-weight: 400; display: block; }
.pf-row input, .pf-row select { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 999px; padding: 10px 16px; font-size: 13px; outline: none; }
.pf-row input:focus, .pf-row select:focus { border-color: var(--brand); }
.pf-save { display: block; width: 100%; border: none; cursor: pointer; border-radius: 999px; padding: 13px 0; font-size: 14.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-2), var(--brand)); margin-top: 6px; }
.pf-save.ghost { background: #eef2f0; color: var(--text-sub); }
.qr-card { text-align: center; }
.qr-card h3 { justify-content: center; }
#qrBox { display: flex; justify-content: center; padding: 10px 0 4px; }
#qrBox img { border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: #fff; }
.qr-tip { font-size: 11.5px; color: var(--text-sub); margin-top: 8px; line-height: 1.7; }
.qr-state { font-size: 13px; font-weight: 700; color: var(--brand); margin-top: 6px; }
.qr-ok-btns { display: flex; gap: 10px; margin-top: 14px; }
.qr-ok-btns .pf-save { flex: 1; }

/* PC 适配新模块 */
@media (min-width: 992px) {
  .points-box { margin: 30px 44px 0; padding: 30px 34px 26px; border-radius: 20px; }
  .pt-balance b { font-size: 38px; }
  .pt-task-grid { gap: 16px; }
  .pt-task { padding: 20px 16px; border-radius: 16px; }
  .pt-task b { font-size: 15px; }
  .dt-ucode { margin-top: 12px; }
  .dt-ucode input { padding: 11px 18px; font-size: 13.5px; }
}
@media (max-width: 991px) {
  .pt-task-grid { grid-template-columns: repeat(2, 1fr); }
  .pn-drop { display: none; }
}

/* =====================================================
   v3 · 纯图卡片 hover 悬浮层（好课件式）
   ===================================================== */
.cell.pure .thumb { position: relative; }
/* 资源载体类型角标（PPT / Word / PDF / 资源包）—— 类型由后端按真实文件判定 */
.doc-badge { position: absolute; left: 8px; top: 8px; z-index: 2; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: rgba(31, 138, 95, .92); padding: 3px 9px; border-radius: 6px; letter-spacing: .5px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.doc-badge.k-ppt  { background: rgba(216, 100, 34, .94); }   /* PPT：橙 */
.doc-badge.k-doc  { background: rgba(31, 138, 95, .92); }    /* Word：绿 */
.doc-badge.k-pdf  { background: rgba(199, 48, 48, .92); }    /* PDF：红 */
.doc-badge.k-pack { background: rgba(90, 84, 200, .92); }    /* 资源包：紫 */
.cell.pure .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; cursor: pointer; }
.thumb-ov {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px;
  display: flex; gap: 8px; justify-content: center;
  background: linear-gradient(180deg, transparent, rgba(6, 30, 24, .55));
  opacity: 0; transform: translateY(8px); transition: all .22s ease; pointer-events: none;
}
.cell.pure:hover .thumb-ov, .cell.pure:focus-within .thumb-ov { opacity: 1; transform: translateY(0); pointer-events: auto; }
.thumb-ov button { border: none; cursor: pointer; border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700; }
.thumb-ov .ov-dl { background: linear-gradient(135deg, #ff5f52, #e5322a); color: #fff; box-shadow: 0 6px 18px rgba(229, 50, 42, .45); }
.thumb-ov .ov-info { background: rgba(255, 255, 255, .94); color: #123f34; }
.thumb-ov .ov-dl:hover { filter: brightness(1.08); }
.thumb-ov .ov-info:hover { background: #fff; }

/* =====================================================
   v3 · 顶部导航（大分类 + 下拉对齐）
   ===================================================== */
.pn-links { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.pn-links > a, .pn-drop-btn {
  display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: #1f3d34; cursor: pointer; white-space: nowrap;
  background: transparent; border: none; font-family: inherit; transition: all .15s;
}
.pn-links > a:hover, .pn-drop-btn:hover { background: #eef7f3; color: var(--brand); }
.pn-links > a.active { background: #e8f4ef; color: var(--brand); font-weight: 700; }
.pn-drop { position: relative; }
.pn-drop-btn i { font-style: normal; font-size: 10px; margin-left: 3px; opacity: .55; }
.pn-drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.pn-drop-panel {
  display: none; position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  width: 660px; background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(10, 40, 32, .18); padding: 22px 24px; z-index: 300; cursor: default;
}
.pn-drop:hover .pn-drop-panel, .pn-drop-panel:hover { display: block; }
.pnd-col h5 { font-size: 13px; color: #93a8a0; font-weight: 700; margin-bottom: 10px; letter-spacing: 1px; }
.pnd-grid { display: grid; gap: 6px; }
.pnd-grid a { padding: 7px 8px; border-radius: 9px; font-size: 13.5px; color: #3a4f48; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnd-grid a:hover { background: #eef7f3; color: var(--brand); font-weight: 600; }

/* =====================================================
   v3 · 通用页头
   ===================================================== */
.page-head { text-align: center; padding: 34px 16px 8px; }
.page-head h2 { font-size: 26px; font-weight: 800; color: #123f34; }
.page-head p { font-size: 13.5px; color: var(--text-sub); margin-top: 8px; }

/* =====================================================
   v3 · AI 教学工作台
   ===================================================== */
.ai-panel { max-width: 980px; margin: 18px auto 40px; padding: 0 14px; }
.ai-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.ai-tabs button { border: 1.5px solid var(--border); background: var(--card); border-radius: 999px; padding: 10px 22px; font-size: 14.5px; font-weight: 700; color: #3a4f48; cursor: pointer; transition: all .15s; }
.ai-tabs button.on { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(18, 134, 111, .3); }
.ai-form { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.ai-row { display: flex; gap: 10px; margin-bottom: 10px; }
.ai-row input { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 16px; font-size: 15px; outline: none; }
.ai-row input:focus { border-color: var(--brand); }
.ai-go { flex-shrink: 0; border: none; cursor: pointer; border-radius: 12px; padding: 0 26px; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--gold), #e8922a); box-shadow: 0 8px 20px rgba(240, 164, 49, .35); }
.ai-go:disabled { opacity: .6; }
.ai-picks { flex-wrap: wrap; align-items: center; gap: 6px; }
.ai-pick-label { font-size: 12px; color: #93a8a0; font-weight: 700; margin-right: 2px; }
.ai-picks a { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; background: #f2f7f4; color: #4a5f57; cursor: pointer; }
.ai-picks a.on { background: var(--brand); color: #fff; font-weight: 700; }
.ai-form textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-family: inherit; resize: vertical; outline: none; }
.ai-form textarea:focus { border-color: var(--brand); }
.ai-limit { font-size: 12px; color: #9ab0a8; margin-top: 8px; }
.ai-out { margin-top: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.ai-out-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: #f2f9f5; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ai-out-head b { font-size: 15px; color: #123f34; }
.ai-out-ops { display: flex; gap: 8px; }
.ai-out-ops button { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 16px; font-size: 12.5px; cursor: pointer; font-weight: 600; }
.ai-out-ops button:hover { border-color: var(--brand); color: var(--brand); }
.ai-out pre { margin: 0; padding: 18px 20px; max-height: 620px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: Consolas, 'Courier New', monospace; font-size: 13.5px; line-height: 1.75; color: #2c4239; }
.ai-history { margin-top: 18px; }
.ai-history h4 { font-size: 14px; color: #123f34; margin-bottom: 8px; }
.ai-hrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 16px; margin-bottom: 8px; cursor: pointer; }
.ai-hrow:hover { border-color: var(--brand); }
.ai-hrow b { font-size: 13.5px; color: #2c4239; }
.ai-hrow span { font-size: 12px; color: var(--text-sub); }

/* =====================================================
   v3 · 教学资源库（四库）
   ===================================================== */
.lib-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 14px auto 18px; padding: 0 14px; }
.lib-tabs button { border: 1.5px solid var(--border); background: var(--card); border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 700; color: #3a4f48; cursor: pointer; }
.lib-tabs button.on { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border-color: transparent; }
.lib-tabs button i { font-style: normal; font-size: 12px; opacity: .85; }
.lib-body { max-width: 980px; margin: 0 auto 46px; padding: 0 14px; }
.lib-search { display: flex; gap: 10px; margin-bottom: 14px; }
.lib-search input { flex: 1; border: 1.5px solid var(--border); border-radius: 12px; padding: 11px 16px; font-size: 14px; outline: none; }
.lib-search input:focus { border-color: var(--brand); }
.lib-search button { border: none; cursor: pointer; border-radius: 12px; padding: 0 22px; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-2), var(--brand)); }
.lib-item { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
.lib-item.q { align-items: flex-start; }
.li-main { flex: 1; min-width: 0; }
.li-main h4 { font-size: 14.5px; color: #23413a; line-height: 1.5; }
.li-main p { font-size: 12.5px; color: var(--text-sub); margin-top: 5px; }
.q-ans { background: #f4f9f6; border-radius: 8px; padding: 7px 10px !important; color: #4a5f57 !important; margin-top: 8px !important; line-height: 1.6; }
.li-tag { flex-shrink: 0; font-size: 11.5px; font-weight: 800; color: #b06e00; background: #fdf3e2; border-radius: 999px; padding: 3px 10px; }
.li-tag.free { color: #0f8a5f; background: #e6f5ee; }
.li-btn { flex-shrink: 0; border: none; cursor: pointer; border-radius: 999px; padding: 8px 18px; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #ff5f52, #e5322a); }
.ch-kids { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ch-kids a { font-size: 12.5px; background: #f2f7f4; color: #4a5f57; border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.ch-kids a:hover { background: #e3f2ec; color: var(--brand); }

/* =====================================================
   v3 · 推广分销中心
   ===================================================== */
#promoBody { max-width: 760px; margin: 18px auto 46px; padding: 0 14px; }
.promo-hero { background: linear-gradient(150deg, #0d5c4d, #14806b); border-radius: 22px; color: #fff; padding: 30px 26px; box-shadow: 0 18px 50px rgba(13, 92, 77, .35); }
.promo-hero h3 { font-size: 21px; margin-top: 16px; }
.promo-hero p { font-size: 13.5px; line-height: 1.8; opacity: .92; margin-top: 10px; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.promo-card .ph-grid { grid-template-columns: repeat(4, 1fr); margin: 14px 0; }
.ph-grid > div { background: rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px 8px; text-align: center; }
.ph-grid b { display: block; font-size: 21px; font-weight: 800; }
.ph-grid span { font-size: 11.5px; opacity: .85; }
.ph-apply { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ph-apply input { flex: 1; min-width: 200px; border: none; border-radius: 999px; padding: 13px 18px; font-size: 14px; outline: none; }
.ph-apply button { flex-shrink: 0; border: none; cursor: pointer; border-radius: 999px; padding: 0 28px; font-size: 15px; font-weight: 800; color: #b06e00; background: linear-gradient(135deg, #ffe0a3, var(--gold)); }
.promo-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pc-head b { font-size: 16px; color: #123f34; display: block; }
.pc-head span { font-size: 12px; color: var(--text-sub); }
.pc-code { font-size: 22px !important; color: var(--brand) !important; letter-spacing: 2px; }
.pc-copy { width: 100%; margin-top: 12px; border: none; cursor: pointer; border-radius: 999px; padding: 11px; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-2), var(--brand)); }
.pc-link { display: flex; gap: 8px; margin-top: 12px; }
.pc-link input { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: #4a5f57; background: #f7fbf9; }
.pc-link button { flex-shrink: 0; border: none; cursor: pointer; border-radius: 10px; padding: 0 16px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--gold); }
.pc-tip { font-size: 12.5px; color: var(--text-sub); line-height: 1.7; margin-top: 10px; }
.promo-actions { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.promo-actions button { flex: 1; min-width: 120px; border: 1.5px solid var(--border); background: var(--card); border-radius: 14px; padding: 13px; font-size: 14px; font-weight: 700; color: #23413a; cursor: pointer; }
.promo-actions button:hover { border-color: var(--brand); color: var(--brand); }
.ps-title { font-size: 15px; color: #123f34; margin-bottom: 10px; }

/* =====================================================
   v3 · 响应式
   ===================================================== */
@media (max-width: 991px) {
  .pn-links > a, .pn-drop-btn { padding: 8px 9px; font-size: 13px; }
  .ai-panel, .lib-body { padding: 0 12px; }
  .promo-card .ph-grid { grid-template-columns: repeat(2, 1fr); }
  .me-tabs button { flex: 0 0 auto; padding: 10px 16px; font-size: 13px; }
  .mp-fill { max-width: 100%; }

  /* 页脚：品牌一行 + 热门分类/会员服务/增值服务同一行 + 版权备案收尾（与电脑端同格局） */
  .site-footer { padding: 24px 18px calc(86px + env(safe-area-inset-bottom)); margin-top: 20px; }
  .sf-inner { gap: 14px 12px; }
  .sf-brand { flex: 1 1 100%; }
  .sf-brand b { font-size: 18px; letter-spacing: 1.5px; }
  .sf-brand p { margin-top: 6px; font-size: 11.5px; line-height: 1.6; }
  .sf-col { flex: 1 1 0; min-width: 0; }
  .sf-col b { font-size: 12.5px; margin-bottom: 6px; }
  .sf-col a { font-size: 12px; padding: 3px 0; }
  .sf-copy { margin-top: 16px; padding-top: 12px; font-size: 10.5px; line-height: 1.7; }
}
@media (min-width: 992px) {
  .page-head h2 { font-size: 30px; }
  .ai-panel { padding: 0; }
  .lib-body { padding: 0; }
}

/* =====================================================
   v3.2 · 资源包：多文件预览缩略条 + 文件清单
   ===================================================== */
.dt-thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 6px; }
.dt-thumbs img {
  flex-shrink: 0; width: 74px; height: 98px; object-fit: cover; object-position: top;
  border-radius: 10px; border: 2px solid var(--border); cursor: pointer; opacity: .72;
  transition: all .15s; background: #fff;
}
.dt-thumbs img:hover { opacity: 1; transform: translateY(-2px); }
.dt-thumbs img.on { border-color: var(--brand); opacity: 1; box-shadow: 0 4px 14px rgba(18, 134, 111, .25); }

/* 预览说明：预览只放首页效果图，务必写明「以实际页数为准」，避免买家误以为只有 1 页 */
.dt-pv-tip {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: #6b7d74;
  background: #f6faf8; border: 1px dashed #d8e6df; border-radius: 12px; padding: 9px 12px;
}
@media (max-width: 991px) {
  .dt-pv-tip { font-size: 12px; margin-top: 8px; padding: 9px 11px; }
}

.dt-files { margin-top: 16px; background: #f7fbf9; border: 1px solid var(--border); border-radius: 16px; padding: 16px 16px 12px; }
.dtf-head { font-size: 14px; font-weight: 800; color: #123f34; margin-bottom: 12px; }
.dtf-head b { color: var(--brand-2); font-size: 16px; }
.dtf-group { margin-bottom: 10px; }
.dtf-gname { font-size: 12.5px; font-weight: 800; color: #3a5f54; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.dtf-gname i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--brand); background: #e2f2ec; border-radius: 999px; padding: 1px 8px; }
.dtf-file { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #4a625a; padding: 3px 0 3px 6px; }
.dtf-file b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtf-file span { flex-shrink: 0; font-size: 13px; }
.dtf-demo { flex-shrink: 0; font-style: normal; font-size: 10.5px; color: #b06e00; background: #fdf3e2; border-radius: 999px; padding: 1px 7px; }

@media (min-width: 992px) {
  .dt-gallery { display: flex; flex-direction: column; }
  .dt-gallery > img { flex-shrink: 0; }
  .dt-thumbs img { width: 84px; height: 112px; }
  .dt-files { padding: 20px 20px 16px; }
  .dtf-file { font-size: 13px; }
}

/* =====================================================
   v3.3 · 圈子页 / 登录态 / 代做课件 / PWA 引导
   ===================================================== */

/* —— 顶部右上角头像：换成明亮品牌配色（原灰色 emoji 与整体不搭） —— */
.brand-me {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; opacity: 1;
  background: linear-gradient(135deg, #ffeab0 0%, #f5bd4d 55%, #e9a323 100%);
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 3px 10px rgba(233, 163, 35, .38);
  transition: transform .15s;
}
.brand-me:active { transform: scale(.94); }

/* —— 我的：未登录引导 —— */
.me-login-cta { margin-top: 15px; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; padding: 13px 14px; }
.ml-txt { flex: 1; min-width: 0; }
.ml-txt b { display: block; font-size: 14px; color: #fff; margin-bottom: 3px; }
.ml-txt span { font-size: 11.5px; color: #cfe6de; line-height: 1.55; }
.ml-btn { flex: none; border: none; cursor: pointer; padding: 10px 16px; border-radius: 11px; font-size: 13.5px; font-weight: 800; color: #7a4b00; background: linear-gradient(135deg, #ffe9b0, #f3b53c); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.me-stat.hot b { color: #ffd98a; }
.me-stat.hot { background: rgba(255, 204, 102, .16); border: 1px solid rgba(255, 204, 102, .34); }

/* —— 代做课件营销卡 —— */
.me-biz { margin-top: 16px; background: linear-gradient(160deg, #fff9ec, #fdf1d8); border: 1px solid #f0e0b8; border-radius: 18px; padding: 18px 18px 16px; }
.mb-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mb-tag { font-size: 10.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff9a3c, #f0672b); border-radius: 999px; padding: 3px 10px; }
.mb-head b { font-size: 16px; color: #6b4a10; }
.mb-slogan { margin-top: 9px; font-size: 13.5px; color: #7c6432; line-height: 1.6; }
.mb-slogan em { font-style: normal; font-weight: 800; color: #d0761b; }
.mb-points { margin-top: 12px; display: grid; gap: 9px; }
.mb-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; }
.mb-points i { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 15px; background: #fff; border-radius: 9px; box-shadow: 0 2px 6px rgba(190, 150, 60, .18); }
.mb-points b { display: block; font-size: 13px; color: #6b4a10; }
.mb-points span { color: #8d7a4f; }
.mb-btns { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mb-wx { border: none; cursor: pointer; flex: 1; min-width: 190px; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #22b573, #12866f); box-shadow: 0 6px 16px rgba(18, 134, 111, .3); }
.mb-wx:active { transform: scale(.98); }
.mb-more { font-size: 12.5px; font-weight: 700; color: #b06e00; }
.mb-foot { margin-top: 10px; font-size: 11px; color: #a08a5c; text-align: center; }

/* —— 圈子页 —— */
.circle-wrap { max-width: 720px; margin: 0 auto; padding: 0 14px 30px; display: grid; gap: 14px; }
.ci-hero { background: linear-gradient(135deg, #12866f, #0b5c4d); color: #fff; border-radius: 18px; padding: 20px; box-shadow: 0 8px 22px rgba(11, 92, 77, .22); }
.ci-hero b { display: block; font-size: 17px; margin-bottom: 7px; }
.ci-hero p { font-size: 12.5px; line-height: 1.75; color: #d6ece4; }
.ci-hero em { font-style: normal; font-weight: 800; color: #ffd98a; }
.ci-card { background: var(--card); border-radius: 16px; padding: 16px; box-shadow: 0 2px 10px rgba(15, 70, 58, .06); }
.ci-card > b { display: block; font-size: 14px; color: #123f34; margin-bottom: 11px; }
.ci-qr { display: block; width: min(240px, 68vw); margin: 0 auto; border-radius: 14px; border: 1px solid var(--border); background: #fff; cursor: zoom-in; }
.ci-qr.sm { width: min(180px, 52vw); margin-top: 12px; }
.ci-sub { margin-top: 10px; text-align: center; font-size: 11.5px; color: var(--text-sub); line-height: 1.65; }
.ci-empty { text-align: center; font-size: 13px; color: var(--text-sub); background: #f6faf8; border: 1px dashed var(--border); border-radius: 12px; padding: 22px 14px; line-height: 1.8; }
.ci-empty i { font-style: normal; font-size: 11.5px; color: #9bb0a8; }
.ci-wx { display: flex; align-items: center; gap: 10px; background: #f4f9f6; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.ci-wx-id { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; letter-spacing: .5px; color: #12866f; word-break: break-all; }
.ci-btn { flex: none; border: none; cursor: pointer; border-radius: 11px; padding: 10px 15px; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #22b573, #12866f); }
.ci-btn.ghost { display: block; margin: 12px auto 0; width: fit-content; color: #12866f; background: #e6f5ef; text-decoration: none; }
.ci-list { display: grid; gap: 7px; font-size: 12.5px; color: #4a625a; line-height: 1.6; }
.ci-list li { padding-left: 16px; position: relative; }
.ci-list li::before { content: '·'; position: absolute; left: 4px; color: var(--brand); font-weight: 900; }
.ci-foot { text-align: center; font-size: 12.5px; color: var(--text-sub); }
.ci-foot a { color: var(--gold-2); font-weight: 800; }

/* —— 登录弹窗 / iOS 指引 —— */
.login-modal { width: min(370px, 92vw); background: var(--card); border-radius: 20px; padding: 24px 20px 20px; text-align: center; position: relative; box-shadow: 0 18px 50px rgba(15, 70, 58, .25); }
.lg-hero { width: 60px; height: 60px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 30px; border-radius: 50%; background: linear-gradient(135deg, #e6f5ef, #cfeade); }
.login-modal h3 { font-size: 17px; font-weight: 800; color: #123f34; }
.lg-tip { margin-top: 7px; font-size: 12.5px; color: var(--text-sub); line-height: 1.7; }
.lg-pc { margin-top: 14px; }
.lg-qr { font-size: 40px; margin-bottom: 6px; }
.lg-pc b { display: block; font-size: 15px; color: #123f34; margin-bottom: 6px; }
.lg-pc p { font-size: 12.5px; color: var(--text-sub); line-height: 1.7; }
.lg-btn { width: 100%; margin-top: 14px; border: none; cursor: pointer; padding: 13px; border-radius: 13px; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #22b573, #12866f); box-shadow: 0 6px 16px rgba(18, 134, 111, .3); }
.lg-sub { margin-top: 9px !important; font-size: 11.5px !important; color: #a2b3ac !important; }
.ios-steps { margin-top: 14px; display: grid; gap: 10px; text-align: left; }
.ios-step { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: #4a625a; line-height: 1.65; background: #f6faf8; border-radius: 12px; padding: 11px 12px; }
.ios-step b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.ios-ico { display: inline-block; background: #e6f5ef; border-radius: 6px; padding: 0 5px; }
.ios-note { margin-top: 12px; font-size: 11.5px; color: #b0895c; line-height: 1.7; }

/* —— 二维码放大 —— */
.img-modal { width: min(360px, 90vw); background: #fff; border-radius: 18px; padding: 20px; text-align: center; position: relative; }
.img-modal img { width: 100%; max-width: 300px; margin: 0 auto; border-radius: 12px; }
.img-modal p { margin-top: 12px; font-size: 12px; color: var(--text-sub); }

/* —— PWA 顶部引导条 —— */
.pwa-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 70; display: flex; align-items: center; gap: 9px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  background: linear-gradient(135deg, #12866f, #0b5c4d); color: #fff;
  box-shadow: 0 6px 18px rgba(11, 92, 77, .28);
  animation: pwaDrop .35s ease;
}
@keyframes pwaDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
body.has-pwa { padding-top: 60px; }
.pwa-ico { font-size: 20px; }
.pwa-txt { flex: 1; min-width: 0; }
.pwa-txt b { display: block; font-size: 13px; }
.pwa-txt i { font-style: normal; font-size: 10.5px; color: #bfe0d7; }
.pwa-go { flex: none; border: none; cursor: pointer; padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 800; color: #0b5c4d; background: linear-gradient(135deg, #ffe6a1, #f3b53c); }
.pwa-x { flex: none; width: 24px; text-align: center; font-size: 15px; color: #bfe0d7; cursor: pointer; }

/* —— 详情页：文件说明 + 原创版权声明 —— */
/* 文件信息：精简两行（旧版是四行大卡片，把价格/下载按钮挤出首屏，已废弃）。
   「预览仅提供 N 页，以实际页数为准」必须保留——预览图只有首页一张，防止买家误以为只有 1 页 */
.dt-fileinfo { margin: 12px 0 0; padding: 11px 2px 0; border-top: 1px dashed var(--border); }
.dt-fileinfo p { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; font-size: 12.5px; line-height: 1.7; color: #55685f; }
.dt-fileinfo p:last-child { margin-bottom: 0; }
.dt-fileinfo .fi-ico { flex: none; font-size: 12px; }
.dt-fileinfo b { font-weight: 700; color: #33544a; }
.dt-fileinfo i { font-style: normal; color: #b9c8c2; }
/* 原创声明：底部一行小字，威慑盗版但不抢视线 */
.dt-copyline {
  margin-top: 12px; font-size: 11px; line-height: 1.7; color: #a05a45;
  background: #fdf6f3; border: 1px dashed #ecd2c8; border-radius: 10px; padding: 7px 10px;
}
.dt-copyline b { font-weight: 700; }

/* —— 底部 Tab：5 项收紧 —— */
.tabbar div { font-size: 10px; padding: 7px 0 6px; }
.tabbar div span { font-size: 19px; }

@media (min-width: 992px) {
  .pwa-bar { display: none !important; }
  .circle-wrap { max-width: 900px; grid-template-columns: 1fr 1fr; align-items: start; }
  .ci-hero, .ci-foot { grid-column: 1 / -1; }
  .me-biz { max-width: 1520px; margin: 14px auto 0; }
}