:root{
  --bg:#EBEEEA; --ink:#17201E; --teal:#0C4F45; --teal-700:#0A4239;
  --teal-tint:#E3ECE8; --border:#D3E0DA; --card:#FFFFFF; --amber:#C58A2D; --muted:#5C6A66;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans CN",sans-serif;
  --mono:ui-monospace,"SF Mono","Menlo","Consolas","Courier New",monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{background:#cdd5cf;font-family:var(--sans);color:var(--ink);
  -webkit-user-select:none;user-select:none;}

.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);
  display:flex;flex-direction:column;position:relative;box-shadow:0 0 40px rgba(20,40,35,.12);}

/* appbar */
.appbar{height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:sticky;top:0;
  background:var(--bg);border-bottom:1px solid var(--border);z-index:20;}
.appbar .title{font-size:17px;font-weight:700;}
.appbar .back{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  display:none;align-items:center;justify-content:center;font-size:22px;color:var(--ink);background:none;border:none;cursor:pointer;}
.appbar .back.show{display:flex;}
.appbar .person{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:18px;}

.body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;}
.view{display:none;}
.view.active{display:block;animation:fade .2s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* hero */
.hero{padding:20px 18px 14px;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--teal);font-weight:600;}
.hero h1{font-size:24px;line-height:1.18;font-weight:800;margin-top:8px;}
.hero h1 em{font-style:normal;color:var(--teal);}
.hero p{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5;}

/* knowledge section list */
.kb-list{padding:4px 14px 24px;}
.kb-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:11px;
  display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform .12s,box-shadow .12s;}
.kb-card:active{transform:scale(.985);box-shadow:0 6px 16px rgba(12,79,69,.10);}
.kb-no{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:var(--teal-tint);color:var(--teal);
  font-size:21px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.kb-meta{flex:1;min-width:0;}
.kb-meta .nm{font-size:16px;font-weight:700;}
.kb-meta .sb{font-size:12.5px;color:var(--muted);margin-top:3px;}
.kb-count{font-family:var(--mono);font-size:12px;color:var(--muted);flex-shrink:0;display:flex;align-items:center;gap:3px;}
.kb-count .chev{color:var(--border);font-size:16px;}

/* article list */
.alist{padding:6px 14px 26px;}
.alist .sechd{padding:12px 4px 10px;display:flex;align-items:baseline;gap:9px;}
.alist .sechd .n{font-family:var(--mono);font-size:20px;color:var(--amber);font-weight:700;}
.alist .sechd .t{font-size:18px;font-weight:800;}
.arow{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 15px;margin-bottom:9px;
  cursor:pointer;display:flex;gap:11px;align-items:flex-start;transition:transform .12s;}
.arow:active{transform:scale(.985);}
.arow .ix{font-family:var(--mono);font-size:13px;color:var(--teal);font-weight:700;flex-shrink:0;width:18px;padding-top:1px;}
.arow .tt{flex:1;font-size:14.5px;line-height:1.5;font-weight:500;}
.arow .tag{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:5px;}
.arow .doc{color:#9AA8A3;font-size:17px;flex-shrink:0;}

/* reader (anti-copy) */
.reader{padding:20px 20px 40px;position:relative;}
.reader,.reader *{-webkit-user-select:none;user-select:none;}
.reader img{pointer-events:none;-webkit-user-drag:none;user-drag:none;max-width:100%;border-radius:8px;}
.reader .src{font-family:var(--mono);font-size:11px;color:var(--teal);background:var(--teal-tint);
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;letter-spacing:.04em;}
.reader h1{font-size:22px;line-height:1.3;font-weight:800;margin:14px 0 6px;}
.reader .by{font-size:12px;color:var(--muted);margin-bottom:18px;font-family:var(--mono);}
.reader h2{font-size:16px;font-weight:800;color:var(--teal-700);margin:22px 0 8px;}
.reader p{font-size:14.5px;line-height:1.75;color:#26302D;margin-bottom:12px;}
.reader blockquote{background:var(--teal-tint);border-left:3px solid var(--teal);border-radius:0 8px 8px 0;
  padding:12px 14px;font-size:13.5px;line-height:1.6;color:var(--teal-700);margin:16px 0;}
.reader li{font-size:14.5px;line-height:1.7;color:#26302D;margin:0 0 6px 20px;}
.reader .pager{display:flex;gap:10px;margin-top:28px;}
.reader .pager div{flex:1;border:1px solid var(--border);border-radius:10px;padding:11px 13px;background:var(--card);cursor:pointer;}
.reader .pager .lb{font-family:var(--mono);font-size:10px;color:var(--muted);}
.reader .pager .nm{font-size:13px;font-weight:600;margin-top:3px;}

/* video category pills */
.vcat{display:flex;gap:8px;overflow-x:auto;padding:12px 14px 6px;position:sticky;top:0;background:var(--bg);z-index:5;}
.vcat::-webkit-scrollbar{display:none;}
.pill{flex-shrink:0;font-size:13.5px;font-weight:600;padding:7px 15px;border-radius:999px;background:var(--card);
  border:1px solid var(--border);color:var(--muted);cursor:pointer;white-space:nowrap;}
.pill.on{background:var(--teal);border-color:var(--teal);color:#fff;}

/* now playing */
.nowplay{margin:6px 14px 4px;border-radius:14px;overflow:hidden;background:#0d1916;position:relative;}
.nowplay .scr{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;
  background:radial-gradient(120% 120% at 50% 30%,#16332b 0%,#0d1916 70%);}
.nowplay .play{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:22px;padding-left:4px;}
.nowplay .vodtag{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:10px;color:#cfe4dc;
  background:rgba(0,0,0,.35);padding:4px 8px;border-radius:6px;letter-spacing:.04em;}
.nowplay video{width:100%;display:block;aspect-ratio:16/9;background:#000;}
.nowplay .cap{padding:11px 14px;color:#dceae4;}
.nowplay .cap .t{font-size:14px;font-weight:700;}
.nowplay .cap .m{font-size:11.5px;color:#8fb0a6;margin-top:3px;font-family:var(--mono);}

/* video cards */
.vlist{padding:10px 14px 26px;}
.vlist .lbl{font-size:13px;font-weight:700;color:var(--muted);margin:8px 4px 10px;display:flex;align-items:center;gap:7px;}
.vlist .lbl::before{content:"";width:3px;height:13px;background:var(--amber);border-radius:2px;}
.vcard{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:14px;margin-bottom:10px;cursor:pointer;transition:transform .12s;}
.vcard:active{transform:scale(.99);}
.vcard .top{display:flex;gap:12px;}
.vthumb{width:96px;height:62px;flex-shrink:0;border-radius:9px;background:linear-gradient(135deg,#0f5e50,#0a3a31);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:18px;position:relative;}
.vthumb .dur{position:absolute;right:5px;bottom:4px;font-family:var(--mono);font-size:9px;color:#fff;background:rgba(0,0,0,.45);padding:1px 5px;border-radius:4px;}
.vcard .ti{font-size:15px;font-weight:700;line-height:1.35;}
.vcard .tch{font-size:12px;color:var(--teal);margin-top:5px;font-weight:600;}
.vcard .bl{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5;}
.vcard .go{margin-top:11px;display:flex;justify-content:space-between;align-items:center;}
.vcard .go .ep{font-family:var(--mono);font-size:11px;color:var(--muted);}
.vcard .go .btn{font-size:12.5px;font-weight:700;color:#fff;background:var(--teal);padding:6px 14px;border-radius:999px;}

/* video detail */
.vd{padding-bottom:34px;}
.vd .chapters{padding:14px 16px;}
.vd .chapters h3{font-size:15px;font-weight:800;margin-bottom:4px;}
.vd .chapters .vdintro{font-size:14px;line-height:1.7;color:#26302D;margin:4px 0 18px;}
.vd .chapters .relhd{font-size:13px;font-weight:800;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:7px;}
.vd .chapters .relhd::before{content:"";width:3px;height:13px;background:var(--amber);border-radius:2px;}
.ch{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;}
.ch:last-child{border-bottom:none;}
.ch .ci{width:26px;height:26px;border-radius:7px;background:var(--teal-tint);color:var(--teal);
  font-family:var(--mono);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ch .cn{flex:1;font-size:14px;font-weight:500;}
.ch .cd{font-family:var(--mono);font-size:11px;color:var(--muted);}
.ch.cur .cn{color:var(--teal);font-weight:700;}
.ch.cur .ci{background:var(--teal);color:#fff;}

/* profile */
.pf{padding:18px 16px 30px;}
.mcard{background:var(--teal);border-radius:18px;padding:20px;color:#eaf2ee;position:relative;overflow:hidden;}
.mcard::after{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.06);}
.mcard .row1{display:flex;align-items:center;gap:13px;}
.mcard .av{width:50px;height:50px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:700;flex-shrink:0;}
.mcard .nm{font-size:18px;font-weight:800;color:#fff;}
.mcard .lv{font-size:12px;color:#bcd6cd;margin-top:3px;font-family:var(--mono);}
.mcard .meta{display:flex;gap:22px;margin-top:18px;}
.mcard .meta .k{font-family:var(--mono);font-size:10px;color:#9fc3b8;letter-spacing:.05em;}
.mcard .meta .v{font-size:15px;font-weight:700;color:#fff;margin-top:3px;}
.prows{margin-top:18px;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.prow{display:flex;align-items:center;gap:13px;padding:15px 16px;border-bottom:1px solid var(--border);cursor:pointer;}
.prow:last-child{border-bottom:none;}
.prow .ic{width:30px;height:30px;border-radius:8px;background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.prow .nm{flex:1;font-size:14.5px;font-weight:600;}
.prow .ar{color:var(--border);font-size:18px;}
.pnote{font-size:11.5px;color:var(--muted);text-align:center;margin-top:18px;line-height:1.6;font-family:var(--mono);}

/* tabbar */
.tabbar{height:62px;flex-shrink:0;display:flex;border-top:1px solid var(--border);background:#fff;position:sticky;bottom:0;z-index:20;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--muted);}
.tab .ic{font-size:20px;line-height:1;}
.tab .lb{font-size:11px;font-weight:600;}
.tab.on{color:var(--teal);}

/* watermark overlay (per-member, traceable) */
.wm{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.08;background-repeat:repeat;}

/* gate notice */
.gate{margin:40px 20px;padding:24px;background:var(--card);border:1px solid var(--border);border-radius:14px;text-align:center;}
.gate h3{font-size:16px;margin-bottom:8px;}
.gate p{font-size:13px;color:var(--muted);line-height:1.6;}
.loading{padding:40px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:13px;}

/* 首次激活/绑定屏 */
#bindScreen{display:none;position:fixed;inset:0;z-index:50;background:var(--bg);align-items:center;justify-content:center;padding:24px;}
.bindcard{width:100%;max-width:360px;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:30px 24px;box-shadow:0 12px 40px rgba(20,40,35,.10);text-align:center;}
.bindlogo{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--teal);font-weight:600;}
.bindwelcome{font-size:22px;font-weight:800;margin:14px 0 6px;}
.bindtip{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:20px;}
.bindtip b{color:var(--teal-700);}
#bindPhone{width:100%;padding:13px 15px;border:1px solid var(--border);border-radius:11px;font-size:16px;text-align:center;letter-spacing:.04em;}
#bindPhone:focus{outline:none;border-color:var(--teal);}
.binderr{color:#A32D2D;font-size:12.5px;min-height:18px;margin:8px 0;}
.bindbtn{width:100%;background:var(--teal);color:#fff;border:none;border-radius:11px;padding:13px;font-size:15px;font-weight:700;cursor:pointer;}
.bindbtn:active{opacity:.9;}
.bindfoot{font-size:11.5px;color:var(--muted);margin-top:16px;}