:root{
    --primary:#12b3a6; --primary-d:#0e9488; --primary-l:#e6f7f5;
    --accent:#ff7a45; --gold:#f5a623;
    --bg:#f4f6f8; --card:#ffffff; --line:#eceef1;
    --t1:#1b2733; --t2:#5b6b7a; --t3:#97a4b0;
    --danger:#ef4444; --ok:#12b3a6;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:#dfe4ea;color:var(--t1);
    display:flex;flex-wrap:wrap;gap:28px;justify-content:center;padding:28px 16px 60px}
  .stage-title{width:100%;text-align:center;color:#39485a;font-size:15px;letter-spacing:1px;margin-bottom:-6px}
  /* phone frame */
  .phone{width:390px;height:844px;background:var(--bg);border-radius:44px;position:relative;overflow:hidden;
    box-shadow:0 20px 50px rgba(20,40,60,.18);border:10px solid #0d1620}
  .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:28px;background:#0d1620;
    border-radius:0 0 18px 18px;z-index:60}
  .statusbar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:13px;
    font-weight:600;color:var(--t1);position:relative;z-index:50}
  .screen{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;background:var(--bg)}
  .screen.active{display:flex}
  .body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .body::-webkit-scrollbar{display:none}
  /* 随堂课件内联滚动框：细滚动条，内含于灰框 */
  #cwPanel{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}
  #cwPanel::-webkit-scrollbar{width:6px}
  #cwPanel::-webkit-scrollbar-track{background:transparent}
  #cwPanel::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px}
  /* nav header */
  .nav{height:50px;display:flex;align-items:center;padding:0 16px;background:var(--card);border-bottom:1px solid var(--line);
    gap:10px;position:sticky;top:0;z-index:20}
  .nav .title{font-size:17px;font-weight:700;flex:1}
  .nav .back{width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#000}
  .nav .back svg{width:26px;height:26px}
  .nav .rt{color:var(--primary);font-size:14px;font-weight:600;cursor:pointer}
  /* tabbar */
  .tabbar{height:80px;background:var(--card);border-top:1px solid var(--line);display:flex;padding-bottom:6px}
  .tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--t3);font-size:11px;cursor:pointer;font-weight:600}
  .tabbar .tab.on{color:var(--primary)}
  .tabbar .tab svg{width:24px;height:24px}
  /* subject switch bar (sticky) */
  .subbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:flex-start;gap:6px;
    padding:11px 18px;background:var(--card);border-bottom:1px solid var(--line)}
  .subback{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--t1);margin-left:-6px}
  .chopt{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px;color:var(--primary);font-size:12px;font-weight:600}
  .chopt svg{width:26px;height:26px}
  .subswitch{display:inline-flex;align-items:center;gap:2px;color:var(--t2);font-size:13px;font-weight:600;
    background:var(--bg);padding:5px 12px;border-radius:16px}
  .subswitch svg{width:16px;height:16px;transform:rotate(90deg)}
  /* generic */
  .card{background:var(--card);border-radius:16px;padding:16px;margin:12px 16px;box-shadow:0 2px 10px rgba(30,50,70,.04)}
  .card.tall4{padding:22px 16px}  /* 考试题库/章节练习卡片：高度 +8px（累计，在默认 16px 基础上再 +4px） */
  .row{display:flex;align-items:center}
  .between{justify-content:space-between}
  /* settings list rows — unified indent / line-height / icon size */
  .setrow{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:14px;line-height:1.5}
  .setico{width:20px;height:20px;flex-shrink:0;color:var(--primary);display:flex;align-items:center;justify-content:center}
  .setico svg{width:20px;height:20px}
  .pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
  .pill.pri{background:var(--primary-l);color:var(--primary-d)}
  .pill.free{background:#eaf6ee;color:#1a9f4b}
  .pill.vip{background:#fff2e0;color:#d98209}
  .btn{background:var(--primary);color:#fff;border:none;border-radius:24px;padding:12px;font-size:15px;font-weight:700;
    width:100%;cursor:pointer}
  .btn.ghost{background:var(--primary-l);color:var(--primary-d)}
  .btn.gold{background:linear-gradient(135deg,#ffb347,#ff7a45)}
  .muted{color:var(--t2);font-size:13px}
  .tiny{color:var(--t3);font-size:11px}
  .prog{height:6px;background:#edf0f2;border-radius:6px;overflow:hidden}
  .prog>i{display:block;height:100%;background:var(--primary);border-radius:6px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  .ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .ico svg{width:24px;height:24px}
  .clickable{cursor:pointer;transition:transform .08s}
  .clickable:active{transform:scale(.97)}
  /* modal */
  .mask{position:absolute;inset:0;background:rgba(15,25,35,.5);z-index:200;display:none;align-items:flex-end}
  .mask.on{display:flex}
  .sheet{background:#fff;width:100%;border-radius:24px 24px 0 0;padding:22px 20px 30px;animation:up .25s ease}
  @keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(20,30,40,.86);color:#fff;
    padding:12px 20px;border-radius:12px;font-size:13px;z-index:300;display:none}
  h4{font-size:16px}
  /* ===== 登录 / 注册 ===== */
  .auth{max-width:340px;margin:0 auto;padding:30px 8px 24px;flex:1;display:flex;flex-direction:column;overflow-y:auto}
  .auth-logo{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--primary);font-size:22px;font-weight:800}
  .auth-logo svg{width:28px;height:28px}
  .auth-title{text-align:center;font-size:22px;margin-top:0;font-weight:800}
  .auth-sub{text-align:center;color:var(--t3);font-size:13px;margin-top:4px;margin-bottom:12px}
  .acard{background:var(--card);border-radius:18px;padding:20px 18px;box-shadow:0 6px 20px rgba(30,50,70,.06)}
  .afield{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:0 12px;height:48px;margin-bottom:14px}
  .afield:focus-within{border-color:var(--primary)}
  .afield .aico{width:20px;height:20px;color:var(--t3);flex-shrink:0}
  .afield .aico svg{width:20px;height:20px}
  .afield input{flex:1;border:none;outline:none;font-size:15px;background:transparent;color:var(--t1);min-width:0}
  .afield .aeye,.afield .acode{cursor:pointer;color:var(--primary);font-size:13px;font-weight:700;flex-shrink:0}
  .afield .acode{background:var(--primary-l);color:var(--primary-d);border:none;border-radius:8px;padding:6px 10px}
  .arow{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:-4px 2px 16px}
  .acheck{display:flex;align-items:center;gap:6px;color:var(--t2)}
  .alink{color:var(--primary);cursor:pointer;font-weight:600}
  .asep{display:flex;align-items:center;gap:12px;color:var(--t3);font-size:12px;margin:16px 0}
  .asep:before,.asep:after{content:'';flex:1;height:1px;background:var(--line)}
  .auth-tip{text-align:center;color:var(--t3);font-size:12px;margin-top:22px;line-height:1.6}
  .qp-refresh{display:inline-flex;opacity:.85}