:root{
    --bg:#FAF7F2; --surface:#FFFFFF;
    --primary:#2F6B4F; --primary-2:#3B8566; --primary-press:#265A41;
    --warm:#C8A06A; --warm-2:#D9B780;
    --blue:#3F6FAA; --pink:#C8546F; --purple:#7A5BAA; --orange:#D87A3D; --red:#C2453E;
    --text:#2B2B2B; --text-sub:#7A7268; --text-faint:#B5AFA4;
    --icon-bg:#E7EFE9; --icon-fg:#2F6B4F;
    --border:#ECE6DB; --border-soft:#F2EDE3;
    --shadow-sm:0 1px 2px rgba(28,40,32,.05), 0 1px 4px rgba(28,40,32,.06);
    --shadow-md:0 2px 6px rgba(28,40,32,.06), 0 8px 18px rgba(28,40,32,.08);
    --shadow-lg:0 8px 24px rgba(28,40,32,.14), 0 24px 60px rgba(28,40,32,.18);
    --r:16px; --r-lg:22px; --r-track:6px;
    --btn-h:58px; --btn-h-lg:66px;
    --pad:20px; --gap:14px;
    --font:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Heiti SC",sans-serif;
    --fs-base:17px; --fs-teach:21px; --fs-large:25px; --fs-title:20px; --fs-hero:30px;
  }
  body.large-font{ --fs-base:21px; --fs-teach:25px; --fs-large:29px; --fs-title:23px; --fs-hero:34px; }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    min-height:100vh; min-height:100dvh;
    background:
      radial-gradient(1200px 600px at 50% -10%, #EAF1EC 0%, transparent 60%),
      linear-gradient(180deg,#EFEAE0,#FAF7F2);
    color:var(--text); font-family:var(--font);
    font-size:var(--fs-base); line-height:1.62;
    display:flex; align-items:center; justify-content:center;
    padding:0;
  }

  /* ===== App frame (centered phone on desktop, full on mobile) ===== */
  #app{
    position:relative; width:100%; height:100vh; height:100dvh;
    max-width:440px; background:var(--bg); overflow:hidden;
    display:flex; flex-direction:column;
  }
  @media (min-width:560px){
    body{padding:22px;}
    #app{ height:min(940px,94vh); border-radius:38px; box-shadow:var(--shadow-lg);
          border:1px solid rgba(255,255,255,.6); }
  }

  /* ===== Screens ===== */
  .screen{
    position:absolute; inset:0; display:none; flex-direction:column;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:104px; /* leave room for shared #globalTab (84px) + breathing space */
  }
  .screen.active{display:flex;}
  .screen.no-tab{padding-bottom:24px;}

  /* ===== Top bar ====== */
  .topbar{display:flex; align-items:center; gap:12px; padding:calc(env(safe-area-inset-top) + 16px) 20px 8px; flex:0 0 auto;}
  .topbar h1{font-size:var(--fs-title); font-weight:800; margin:0; flex:1;}
  .topbar .back{width:44px; height:44px; border-radius:13px; background:var(--surface);
                box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center;
                cursor:pointer; color:var(--primary); border:none;}
  .topbar .back svg{width:24px; height:24px;}

  /* ===== Buttons ====== */
  .btn{display:flex; align-items:center; justify-content:center; gap:10px;
       height:var(--btn-h); min-width:120px; padding:0 24px;
       border-radius:var(--r); font-family:var(--font); font-size:var(--fs-base);
       font-weight:800; cursor:pointer; border:none; text-decoration:none;
       user-select:none; transition:background .12s, transform .06s;}
  .btn:active{transform:scale(.98);}
  .btn-primary{background:var(--primary); color:#fff; box-shadow:0 6px 16px rgba(47,107,79,.28);}
  .btn-primary:active{background:var(--primary-press);}
  .btn-secondary{background:var(--surface); color:var(--primary); border:2px solid var(--primary); box-shadow:var(--shadow-sm);}
  .btn-secondary:active{background:var(--icon-bg);}
  .btn-danger{background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(194,69,62,.28);}
  .btn-lg{height:var(--btn-h-lg); font-size:var(--fs-large); border-radius:18px;}
  .btn-block{width:100%;}
  .btn .ico{width:26px; height:26px; flex:0 0 26px; display:inline-flex;}
  .btn-primary .ico{background:rgba(255,255,255,.2); border-radius:50%; padding:4px;}
  .btn-secondary .ico{background:var(--icon-bg); border-radius:50%; padding:4px;}
  .btn .ico svg{width:100%; height:100%; display:block;}
  .btn-row{display:flex; gap:12px;}
  .btn-row .btn{flex:1;}

  /* ===== Tab bar (shared, sits at bottom of #app) ===== */
  .tabbar{position:absolute; left:0; right:0; bottom:0; padding:6px 12px 4px;
          background:#FFFFFF; box-shadow:0 -4px 18px rgba(0,0,0,.08);
          border-top:1px solid var(--border-soft); display:flex; gap:4px;
          padding-bottom:max(6px,env(safe-area-inset-bottom));
          z-index:50; /* float above .screen content */
          transition:transform .22s ease;}
  .tabbar.hidden{transform:translateY(100%); pointer-events:none;}
  .tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
       padding:5px 4px 3px; border-radius:14px; cursor:pointer; background:transparent; border:none;
       color:var(--text-sub); font-family:var(--font); font-size:13px; font-weight:700;}
  .tab .ti{width:26px; height:26px; display:flex; align-items:center; justify-content:center;}
  .tab .ti svg{width:24px; height:24px;}
  .tab.active{color:var(--primary);}
  .tab.active .ti{background:var(--icon-bg); border-radius:10px; width:42px; height:28px;}
  .tab.fab{flex:0 0 60px; margin-top:-18px; align-self:flex-start;}
  .tab.fab .ti{width:56px; height:56px; border-radius:50%;
               background:linear-gradient(135deg,#C8A06A,#D9B780);
               box-shadow:0 6px 18px rgba(200,160,106,.5); color:#fff;}
  .tab.fab .ti svg{width:28px; height:28px;}

  /* ===== Layout ====== */
  .stack{display:flex; flex-direction:column; gap:var(--gap);}
  .scroll-pad{padding:16px 20px 28px;}
  .section-title{font-size:19px; font-weight:800; margin:6px 0 14px; display:flex; align-items:center; gap:8px;}
  .section-title .more{margin-left:auto; font-size:13px; color:var(--text-sub); font-weight:700; cursor:pointer;}

  /* ===== Hero header ====== */
  .hero-header{position:relative; padding:calc(env(safe-area-inset-top) + 14px) 22px 50px;
               background:linear-gradient(135deg,#2F6B4F 0%,#438D6E 55%,#5E9E7E 100%);
               color:#fff; flex:0 0 auto;}
  .hero-header::after{content:""; position:absolute; left:0; right:0; bottom:0; height:40px;
                      background:linear-gradient(180deg,transparent,var(--bg));}
  .hh-row{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
  .hh-row .logo{width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.18);
                display:flex;align-items:center;justify-content:center;}
  .hh-row .logo svg{width:22px; height:22px; color:#fff;}
  .hh-row .name{flex:1; font-size:17px; font-weight:800;}
  .hh-row .badge{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.18);
                padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700;}
  .hh-row .badge .dot{width:6px;height:6px;border-radius:50%;background:#FFCB6B; box-shadow:0 0 8px #FFCB6B;}
  .hh-title{font-size:22px; font-weight:800; line-height:1.3;}
  .hh-sub{font-size:13px; opacity:.88; margin-top:4px;}

  /* ===== Card ====== */
  .card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:18px;}
  .card-flat{background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:14px;}

  /* ===== Continue card ====== */
  .continue-card{display:flex; align-items:center; gap:12px; margin-top:-38px; position:relative; z-index:2;
                 background:linear-gradient(135deg,#FFFFFF,#F4F8F5); border:1px solid var(--border-soft);
                 border-radius:var(--r-lg); padding:12px 14px; box-shadow:var(--shadow-md); cursor:pointer;}
  .continue-card .thumb{width:48px; height:48px; border-radius:14px; flex:0 0 48px;
                        background:linear-gradient(135deg,#2F6B4F,#438D6E); color:#fff;
                        display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(47,107,79,.3);}
  .continue-card .thumb svg{width:26px; height:26px;}
  .continue-card .ct{flex:1;}
  .continue-card .ctt{font-size:17px; font-weight:800;}
  .continue-card .cts{font-size:12px; color:var(--text-sub); margin-top:2px;}
  .continue-card .cta{width:32px; height:32px; border-radius:10px; background:var(--icon-bg); color:var(--primary);
                      display:flex; align-items:center; justify-content:center; flex:0 0 32px;}
  .continue-card .cta svg{width:20px; height:20px;}

  /* ===== Progress / stats ====== */
  .progress{height:9px; background:var(--icon-bg); border-radius:var(--r-track); overflow:hidden;}
  .progress > i{display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-2)); border-radius:var(--r-track);}
  .progress-row{display:flex; justify-content:space-between; font-size:13px; color:var(--text-sub); margin-bottom:7px; font-weight:600;}
  .stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px;}
  .stat{text-align:center; background:var(--icon-bg); border-radius:13px; padding:9px 4px;}
  .stat .sv{font-size:22px; font-weight:800; color:var(--primary);}
  .stat .sl{font-size:11px; color:var(--text-sub); margin-top:2px;}

  /* ===== Category cards ====== */
  .cat-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
  .cat{position:relative; background:var(--surface); border-radius:var(--r-lg);
       padding:13px 14px; box-shadow:var(--shadow-sm); cursor:pointer; overflow:hidden; transition:transform .12s, box-shadow .12s;}
  .cat:active{transform:scale(.98); box-shadow:var(--shadow-md);}
  .cat .ci{width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:8px;}
  .cat .ci svg{width:24px; height:24px;}
  .cat .cn{font-size:17px; font-weight:800; line-height:1.3;}
  .cat .cs{font-size:12px; color:var(--text-sub); margin-top:3px; line-height:1.35;}
  .cat .ct{position:absolute; right:10px; top:10px; font-size:11px; font-weight:800; padding:3px 8px; border-radius:99px; background:var(--icon-bg); color:var(--primary);}
  .cat.green .ci{background:linear-gradient(135deg,#2F6B4F,#438D6E);}
  .cat.warm  .ci{background:linear-gradient(135deg,#C8A06A,#D9B780);}
  .cat.blue  .ci{background:linear-gradient(135deg,#3F6FAA,#5A8AC9);}
  .cat.pink  .ci{background:linear-gradient(135deg,#C8546F,#E07B92);}
  .cat.purple .ci{background:linear-gradient(135deg,#7A5BAA,#9C7BC8);}
  .cat.orange .ci{background:linear-gradient(135deg,#D87A3D,#E59660);}

  /* ===== Category card cover (图文示意) ====== */
  .cat .cover{height:64px; border-radius:12px; margin-bottom:9px; overflow:hidden;
              display:flex; align-items:center; justify-content:center;
              background:var(--icon-bg);}
  .cat .cover svg{width:100%; height:100%; display:block;}
  .cat.green  .cover{background:#EAF3EE;}
  .cat.warm   .cover{background:#F7F0E4;}
  .cat.blue   .cover{background:#E9F0F8;}
  .cat.pink   .cover{background:#FBEAF0;}
  .cat.purple .cover{background:#F1EBF8;}
  .cat.orange .cover{background:#FBEDE2;}

  /* ===== Achievement ====== */
  .achv{display:flex; align-items:center; gap:12px; background:var(--surface); border-radius:var(--r); padding:13px 15px; box-shadow:var(--shadow-sm);}
  .achv .ai{width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,#F0E2C8,#E6CFA0); color:#9A6A1E; display:flex; align-items:center; justify-content:center; flex:0 0 46px;}
  .achv .ai svg{width:26px; height:26px;}
  .achv .at{font-size:16px; font-weight:800;}
  .achv .as{font-size:13px; color:var(--text-sub); margin-top:2px;}
  .achv .ap{margin-left:auto; font-size:16px; font-weight:800; color:var(--warm);}

  /* ===== Ask screen ====== */
  .ask-box{display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:var(--r); padding:6px 8px 6px 18px; box-shadow:var(--shadow-sm);}
  .ask-box input{flex:1; border:none; outline:none; font-size:var(--fs-base); font-family:var(--font); background:transparent; color:var(--text);}
  .ask-box .mic{flex:0 0 48px; width:48px; height:48px; border-radius:14px; border:none; cursor:pointer;
                background:linear-gradient(135deg,#C8A06A,#D9B780); color:#fff; display:flex; align-items:center; justify-content:center;}
  .ask-box .mic svg{width:24px; height:24px;}
  .chip{display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1.5px solid var(--border); border-radius:99px; padding:10px 16px; font-size:15px; font-weight:700; cursor:pointer; color:var(--text);}
  .chip:active{background:var(--icon-bg); border-color:var(--primary);}
  .chip .dot{width:8px; height:8px; border-radius:50%; background:var(--primary);}

  /* ===== Confirm / candidate ====== */
  .cand{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:20px; text-align:center;}
  .cand .big{width:96px; height:96px; border-radius:26px; margin:0 auto 14px; background:linear-gradient(135deg,#E7EFE9,#D4E5DC); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(47,107,79,.16);}
  .cand .big svg{width:56px; height:56px; color:var(--primary);}
  .cand h2{font-size:var(--fs-large); margin:0 0 6px; font-weight:800;}
  .cand p{color:var(--text-sub); margin:0 0 18px;}

  /* ===== Brand tiles ====== */
  .brand-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .brand{display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 4px; border-radius:var(--r);
         border:2px solid transparent; background:var(--surface); cursor:pointer; box-shadow:var(--shadow-sm); transition:all .12s;}
  .brand:active{transform:scale(.97);}
  .brand.sel{border-color:var(--primary); background:var(--icon-bg);}
  .brand .bi{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; overflow:hidden;}
  .brand .bi svg{width:34px; height:34px;}
  .brand .bn{font-size:13px; font-weight:700; text-align:center; line-height:1.25;}

  /* ===== Device type ====== */
  .dtype{display:flex; gap:10px; background:var(--surface); border-radius:var(--r); padding:8px; box-shadow:var(--shadow-sm); margin-bottom:14px;}
  .dtype button{flex:1; border:none; background:transparent; border-radius:12px; padding:12px 4px; font-size:15px; font-weight:800; color:var(--text-sub); cursor:pointer; font-family:var(--font); display:flex; flex-direction:column; align-items:center; gap:6px;}
  .dtype button svg{width:26px; height:26px;}
  .dtype button.active{background:var(--primary); color:#fff; box-shadow:0 4px 10px rgba(47,107,79,.25);}

  /* ===== Teach ====== */
  .teach-head{padding:calc(env(safe-area-inset-top) + 14px) 20px 10px; flex:0 0 auto;}
  .teach-title{font-size:var(--fs-title); font-weight:800; display:flex; align-items:center; gap:10px;}
  .teach-title .n{width:34px; height:34px; border-radius:10px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 34px;}
  .teach-sub{font-size:14px; color:var(--text-sub); margin-top:8px;}
  .teach-body{padding:0 16px 12px; flex:1;}
  .three{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:16px; margin-bottom:14px;}
  .three .row{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--border-soft);}
  .three .row:last-child{border-bottom:none;}
  .three .k{width:30px; height:30px; border-radius:9px; background:var(--icon-bg); color:var(--primary); flex:0 0 30px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;}
  .three .k svg{width:18px; height:18px;}
  .three .vt{font-size:13px; color:var(--text-sub); font-weight:700;}
  .three .vv{font-size:var(--fs-teach); font-weight:800; line-height:1.4; margin-top:2px;}

  /* phone mock */
  .dev-tag{text-align:center; font-size:13px; font-weight:800; color:var(--primary); margin:0 0 8px;}
  .phone{position:relative; margin:4px auto 0; width:268px; height:540px; border-radius:34px;
         background:#11140F; padding:10px; box-shadow:0 14px 34px rgba(20,30,20,.32);}
  .phone .screen-in{position:relative; width:100%; height:100%; border-radius:26px; overflow:hidden; background:#fff;}
  .phone .notch{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:90px; height:18px; background:#11140F; border-radius:0 0 14px 14px; z-index:6;}
  .phone .crown{display:none;}
  .phone.is-apple .notch{width:96px;}
  .phone.is-huawei .notch,.phone.is-mi .notch{width:14px; height:14px; border-radius:50%; top:16px;}
  .phone.is-watch{width:214px; height:248px; border-radius:52px; padding:14px;}
  .phone.is-watch .notch{display:none;}
  .phone.is-watch .crown{display:block; position:absolute; right:-10px; top:78px; width:10px; height:42px; border-radius:6px; background:#8A8478; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}
  .phone.is-watch .screen-in{border-radius:40px;}
  .phone.is-watch .p-content{inset:22px 8px 8px;}
  .phone.is-tablet{width:320px; height:430px; border-radius:22px; padding:8px;}
  .phone.is-tablet .notch{width:12px; height:12px; border-radius:50%; top:14px;}
  .phone.is-tablet .screen-in{border-radius:16px;}
  .phone.is-old{width:236px; height:500px; border-radius:18px; padding:12px 12px 18px; background:#2A241C;}
  .phone.is-old .notch{display:none;}
  .phone.is-old .screen-in{border-radius:8px;}
  .p-status{display:flex; justify-content:space-between; align-items:center; padding:7px 10px 3px; font-size:11px; font-weight:800; color:#1c1c1c;}
  .p-status .r{display:flex; align-items:center; gap:4px;}
  .p-status svg{width:13px; height:13px;}
  .p-status #teachBrandMini{font-size:9px; font-weight:800; opacity:.7; max-width:52px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .p-content{position:absolute; inset:24px 0 0 0; overflow:hidden;}
  .desk-grid{display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; justify-content:center; gap:12px 14px; padding:14px 10px; height:auto;}
  .app-cell{display:flex; flex-direction:column; align-items:center; gap:3px; width:52px; flex:0 0 52px; height:auto;}
  .app-ico{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; flex:0 0 42px;}
  .wx-bar{display:flex; align-items:center; gap:6px; padding:6px; box-sizing:border-box; width:100%; background:#fff; border-top:1px solid #eee;}
  .wx-input{flex:1 1 0; min-width:0; border:1px solid #ddd; border-radius:8px; padding:8px 10px; font-size:13px; outline:none; box-sizing:border-box;}
  .wx-send{flex:0 0 auto; white-space:nowrap; background:#2F9E5A; color:#fff; font-weight:800; padding:8px 10px; border-radius:8px; font-size:13px; line-height:1.2;}
  .phone.is-watch .wx-bar{padding:4px; gap:4px;}
  .phone.is-watch .wx-input{padding:6px 7px; font-size:12px;}
  .phone.is-watch .wx-send{padding:6px 8px; font-size:12px;}
  .hl{outline:2px solid var(--warm); outline-offset:1px; box-shadow:0 0 0 3px rgba(200,160,106,.28); border-radius:10px; animation:hlpulse 1.4s ease-in-out infinite; position:relative; z-index:5; align-self:flex-start; max-width:100%; box-sizing:border-box;}
  @keyframes hlpulse{0%,100%{box-shadow:0 0 0 3px rgba(200,160,106,.28);}50%{box-shadow:0 0 0 6px rgba(200,160,106,.12);}}
  .hl-tag{position:absolute; top:-30px; left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--warm); color:#fff; font-size:12px; font-weight:800; padding:4px 10px; border-radius:8px; box-shadow:0 4px 10px rgba(200,160,106,.4); z-index:7;}
  .hl-tag::after{content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--warm);}

  /* voice bar */
  .voicebar{display:flex; gap:10px; align-items:center; justify-content:center; padding:6px 12px;}
  .vb{flex:1; max-width:150px; height:54px; border-radius:16px; border:2px solid var(--primary); background:var(--surface); color:var(--primary); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:800; font-family:var(--font);}
  .vb .vi{width:34px; height:34px; border-radius:50%; background:var(--icon-bg); display:flex; align-items:center; justify-content:center; flex:0 0 34px;}
  .vb .vi svg{width:20px; height:20px;}
  .vb.play{background:var(--primary); color:#fff; border-color:var(--primary);}
  .vb.play .vi{background:rgba(255,255,255,.2);}
  .vb.active{background:var(--primary); color:#fff; border-color:var(--primary);}
  .vb.active .vi{background:rgba(255,255,255,.22);}

  /* 视频教程按钮 + 播放条 */
  .teach-video-btn{margin-top:12px; width:100%; height:50px; border-radius:14px; border:none;
    background:linear-gradient(135deg,#2F6B4F,#438D6E); color:#fff; font-size:16px; font-weight:800;
    font-family:var(--font); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 6px 16px rgba(47,107,79,.28);}
  .teach-video-btn svg{width:22px; height:22px; color:#FFCB6B;}
  .videobar{display:none; align-items:center; gap:10px; margin-top:12px; padding:10px 14px;
    background:linear-gradient(135deg,#2F6B4F,#438D6E); border-radius:14px; color:#fff;
    box-shadow:0 6px 16px rgba(47,107,79,.28);}
  .videobar .vb-info{display:flex; align-items:center; gap:8px; flex:1; font-size:14px; font-weight:800; min-width:0;}
  .videobar .vb-info svg{width:20px; height:20px; color:#FFCB6B; flex:0 0 20px;}
  .videobar .vb-info span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .videobar .vb-ctrls{display:flex; gap:8px; flex:0 0 auto;}
  .videobar .vb-ctrls button{height:38px; padding:0 14px; border-radius:10px; border:none; font-size:14px; font-weight:800; font-family:var(--font); cursor:pointer;}
  .videobar .vb-ctrls .pause{background:rgba(255,255,255,.22); color:#fff;}
  .videobar .vb-ctrls .exit{background:#fff; color:var(--primary);}
  /* 视频模式下高亮处模拟"点击"动效 */
  @keyframes vtap{0%,100%{box-shadow:0 0 0 5px rgba(200,160,106,.4); transform:scale(1);}
                  50%{box-shadow:0 0 0 11px rgba(200,160,106,.12); transform:scale(.95);}}
  .video-on .hl{animation:vtap 1.2s ease-in-out infinite;}

  /* ===== Quiz ====== */
  .quiz-q{font-size:var(--fs-large); font-weight:800; line-height:1.45; margin:6px 0 18px;}
  .opt{display:flex; align-items:center; gap:14px; background:var(--surface); border:2px solid var(--border); border-radius:var(--r); padding:16px 18px; margin-bottom:12px; cursor:pointer; box-shadow:var(--shadow-sm); transition:all .12s;}
  .opt:active{transform:scale(.99);}
  .opt.sel{border-color:var(--primary); background:var(--icon-bg);}
  .opt .lk{width:38px; height:38px; border-radius:11px; flex:0 0 38px; background:var(--icon-bg); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px;}
  .opt.sel .lk{background:var(--primary); color:#fff;}
  .opt .lt{font-size:var(--fs-base); font-weight:700; line-height:1.4;}

  /* ===== Result ====== */
  .ring-wrap{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 0 4px;}
  .ring{position:relative; width:150px; height:150px;}
  .ring svg{transform:rotate(-90deg);}
  .ring .num{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
  .ring .num b{font-size:42px; font-weight:800; color:var(--primary); line-height:1;}
  .ring .num span{font-size:13px; color:var(--text-sub); margin-top:4px;}
  .medal{display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#FBF3E2,#F4E6CC); border:1px solid #EAD9B6; border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow-sm);}
  .medal .mi{width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#C8A06A,#D9B780); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 48px;}
  .medal .mi svg{width:28px; height:28px;}
  .medal .mt{font-size:17px; font-weight:800;}
  .medal .ms{font-size:13px; color:var(--text-sub); margin-top:2px;}
  .medal-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;}
  .medal-grid .medal{padding:12px 12px; gap:10px;}
  .medal-grid .medal .mi{width:42px; height:42px; border-radius:12px; flex:0 0 42px;}
  .medal-grid .medal .mi svg{width:22px; height:22px;}
  .medal-grid .medal .mn{font-size:15px; font-weight:800; line-height:1.2;}
  .medal-grid .medal .md{font-size:12px; color:var(--text-sub); margin-top:2px; line-height:1.2;}
  .medal-grid .medal .mp{margin-left:auto; font-size:14px; font-weight:800; color:var(--warm); align-self:flex-end;}
  .medal.locked{background:var(--surface); border-color:var(--border-soft); filter:grayscale(.6); opacity:.65;}
  .medal.locked .mi{background:#C9C0B0; color:#fff;}
  .pocket{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:16px;}
  .step-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-soft);}
  .step-row:last-child{border-bottom:none;}
  .step-row .sn{width:26px; height:26px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex:0 0 26px;}
  .step-row .st{font-size:15px; line-height:1.4;}

  /* ===== Favorites ====== */
  .fav{display:flex; align-items:center; gap:14px; background:var(--surface); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow-sm); cursor:pointer; transition:all .12s;}
  .fav:active{transform:scale(.99);}
  .fav .fi{width:52px; height:52px; border-radius:15px; flex:0 0 52px; display:flex; align-items:center; justify-content:center; color:#fff;}
  .fav .fi svg{width:28px; height:28px;}
  .fav .ft{flex:1;}
  .fav .ftc{font-size:18px; font-weight:800;}
  .fav .fts{font-size:13px; color:var(--text-sub); margin-top:2px;}
  .fav .fa{width:34px; height:34px; border-radius:10px; background:var(--icon-bg); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:0 0 34px;}
  .fav .fa svg{width:20px; height:20px;}
  .fav.review{border:2px solid var(--warm);}
  .group-label{font-size:14px; font-weight:800; color:var(--warm); margin:18px 0 10px; display:flex; align-items:center; gap:7px;}
  .group-label svg{width:18px; height:18px;}
  .empty{text-align:center; color:var(--text-sub); padding:40px 20px; font-size:15px;}

  /* ===== Settings ====== */
  .set-group{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:6px 16px; margin-bottom:14px;}
  .set-row{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border-soft); cursor:pointer;}
  .set-row:last-child{border-bottom:none;}
  .set-row .si{width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; flex:0 0 42px;}
  .set-row .si svg{width:24px; height:24px;}
  .set-row .st{font-size:17px; font-weight:700; flex:1;}
  .set-row .sv{font-size:15px; color:var(--text-sub); font-weight:700;}
  .set-row .sa{color:var(--text-faint);}

  .hint{font-size:13px; color:var(--text-sub); text-align:center; padding:8px 0;}

  /* ===== Welcome ====== */
  .welcome{display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; height:100%; padding:40px 28px;}
  .welcome .big{width:130px; height:130px; border-radius:34px; background:linear-gradient(135deg,#E7EFE9,#D4E5DC); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(47,107,79,.18); margin-bottom:26px;}
  .welcome .big svg{width:78px; height:78px; color:var(--primary);}
  .welcome h1{font-size:34px; font-weight:800; margin:0 0 12px;}
  .welcome p{color:var(--text-sub); font-size:16px; margin:0 0 30px; max-width:300px; line-height:1.6;}
  .welcome .safe{display:flex; align-items:center; gap:8px; margin-top:22px; font-size:14px; color:var(--text-sub); background:var(--icon-bg); padding:10px 16px; border-radius:99px;}

  /* level */
  .level-card{display:flex; align-items:center; gap:14px; background:var(--surface); border:2px solid var(--border); border-radius:var(--r-lg); padding:18px; margin-bottom:14px; cursor:pointer; box-shadow:var(--shadow-sm); transition:all .12s;}
  .level-card:active{transform:scale(.99);}
  .level-card.sel{border-color:var(--primary); background:var(--icon-bg);}
  .level-card .li{width:54px; height:54px; border-radius:16px; flex:0 0 54px; background:linear-gradient(135deg,#2F6B4F,#438D6E); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800;}
  .level-card .lt{font-size:19px; font-weight:800;}
  .level-card .ls{font-size:13px; color:var(--text-sub); margin-top:3px;}

  /* ===== Who / name ===== */
  .name-input{width:100%; border:2px solid var(--border); border-radius:var(--r); padding:16px 18px;
              font-size:var(--fs-teach); font-family:var(--font); background:var(--surface); color:var(--text);}
  .name-input:focus{outline:none; border-color:var(--primary);}
  .who-skip{margin-top:12px;}

  /* ===== Practice / live camera ===== */
  .live-cam{position:relative; background:#111; border-radius:22px; overflow:hidden; min-height:360px;}
  .live-cam video{width:100%; height:360px; object-fit:cover; display:block; background:#1a2330;}
  .live-tools{display:flex; gap:10px; padding:12px;}
  .live-tools .btn{flex:1;}
  .live-shot{width:100%; max-height:220px; object-fit:cover; display:block;}
  .photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
  .photo-grid img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; background:#E7EFE9; display:block;}
  .photo-cell{position:relative;}
  .photo-del{position:absolute; top:6px; right:6px; border:none; background:rgba(194,69,62,.92); color:#fff;
    font-size:13px; font-weight:800; font-family:var(--font); padding:6px 10px; border-radius:9px; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.28); line-height:1;}
  .dial-pad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0;}
  .dial-key{height:56px; border:none; border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm);
            font-size:22px; font-weight:800; font-family:var(--font); color:var(--text); cursor:pointer;}
  .dial-key:active{background:var(--icon-bg);}
  .preview-line{font-size:var(--fs-teach); line-height:1.6; background:var(--icon-bg); border-radius:16px; padding:16px;}