编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小布咕 - 儿童音频启蒙APP原型</title>
<link rel="stylesheet" href="https://miaoda.feishu.cn/fonts/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap">
<style>
:root{
  --primary:#52C41A;--primary-dark:#389E0D;--primary-light:#F6FFED;
  --accent:#FF7A45;--warning:#FAAD14;--danger:#FF4D4F;--info:#1890FF;
  --purple:#722ED1;--pink:#EB2F96;--teal:#13C2C2;
  --bg:#F7F8FA;--bg-card:#FFF;--text-1:#1F2329;--text-2:#646A73;--text-3:#8F959E;
  --border:#E5E6EB;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 12px rgba(0,0,0,.08);
  --nav-h:56px;--mini-h:56px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{font-family:'Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;background:linear-gradient(135deg,#E8F5E9,#FFF8E1,#FCE4EC);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;color:var(--text-1)}
.phone{width:375px;height:812px;background:#1a1a1a;border-radius:44px;padding:12px;box-shadow:0 25px 60px rgba(0,0,0,.3);position:relative;flex-shrink:0}
.screen{width:100%;height:100%;background:var(--bg);border-radius:32px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:28px;background:#1a1a1a;border-radius:0 0 18px 18px;z-index:100}
.statusbar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 28px;font-size:14px;font-weight:600;flex-shrink:0;z-index:50}
.statusbar .icons{display:flex;gap:5px;align-items:center}
.statusbar svg{width:16px;height:16px}
.content{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;-webkit-overflow-scrolling:touch}
.content::-webkit-scrollbar{display:none}
.view{display:none;min-height:100%;padding-bottom:calc(var(--nav-h) + var(--mini-h) + 16px)}
.view.active{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.bottomnav{position:absolute;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;z-index:40;padding-bottom:4px}
.navitem{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:6px 12px;color:var(--text-3);transition:color .2s;font-size:10px;font-weight:500}
.navitem svg{width:24px;height:24px;transition:transform .2s}
.navitem.active{color:var(--primary)}
.navitem.active svg{transform:scale(1.1)}
.miniplayer{position:absolute;bottom:var(--nav-h);left:8px;right:8px;height:var(--mini-h);background:#fff;border-radius:var(--r-md);display:flex;align-items:center;padding:0 10px;gap:10px;z-index:39;box-shadow:var(--shadow-md);cursor:pointer}
.miniplayer .cover{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.miniplayer .info{flex:1;min-width:0}
.miniplayer .tag{font-size:10px;color:var(--text-3)}
.miniplayer .title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.miniplayer .ctrls{display:flex;align-items:center;gap:6px}
.miniplayer .cbtn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:transparent;color:var(--text-2)}
.miniplayer .cbtn svg{width:20px;height:20px}
.pagehead{padding:8px 16px 12px;display:flex;align-items:center;gap:12px}
.pagetitle{font-size:18px;font-weight:700}
.backbtn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-1)}
.backbtn svg{width:22px;height:22px}
.sectiontitle{font-size:16px;font-weight:700;padding:14px 16px 8px;display:flex;align-items:center;justify-content:space-between}
.sectiontitle .more{font-size:12px;color:var(--text-3);font-weight:400;cursor:pointer}
.home-top{padding:4px 16px 10px;display:flex;align-items:center;gap:10px}
.home-top .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#FFD54F,#FF8A65);display:flex;align-items:center;justify-content:center;font-size:18px;position:relative;cursor:pointer}
.home-top .avatar .age{position:absolute;bottom:-4px;right:-8px;background:var(--primary);color:#fff;font-size:9px;padding:1px 6px;border-radius:8px;font-weight:600;white-space:nowrap}
.searchbar{flex:1;height:36px;background:#fff;border-radius:18px;display:flex;align-items:center;padding:0 14px;gap:8px;box-shadow:var(--shadow-sm);cursor:pointer}
.searchbar svg{width:16px;height:16px;color:var(--text-3);flex-shrink:0}
.searchbar input{border:none;outline:none;flex:1;font-size:13px;background:transparent;font-family:inherit}
.searchbar input::placeholder{color:var(--text-3)}
.home-top .msgicon{width:32px;height:32px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);position:relative;font-size:16px}
.home-top .msgicon .dot{position:absolute;top:6px;right:8px;width:6px;height:6px;background:var(--danger);border-radius:50%}
.hometabs{display:flex;padding:0 16px;gap:18px;overflow-x:auto;margin-bottom:10px}
.hometabs::-webkit-scrollbar{display:none}
.htab{font-size:15px;font-weight:500;color:var(--text-2);padding:6px 0;cursor:pointer;white-space:nowrap;transition:all .2s}
.htab.active{color:var(--text-1);font-weight:800;font-size:18px}
.htab.active::after{content:'';display:block;width:18px;height:3px;background:var(--primary);border-radius:2px;margin:2px auto 0}
.htab.red{color:var(--danger)}
.htab.red.active{color:var(--danger)}
.banner{margin:0 16px 14px;height:120px;border-radius:var(--r-lg);position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:center;padding:0 16px}
.banner .bcontent{position:relative;z-index:2;color:#fff}
.banner .bcontent .btag{display:inline-block;background:rgba(255,255,255,.25);padding:2px 8px;border-radius:8px;font-size:10px;font-weight:600;margin-bottom:6px}
.banner .bcontent h3{font-size:18px;font-weight:800;margin-bottom:2px}
.banner .bcontent p{font-size:11px;opacity:.85}
.banner .bicon{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:56px;z-index:1}
.quickgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:0 16px 14px}
.qentry{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:6px 0}
.qentry .qicon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;transition:transform .2s}
.qentry:active .qicon{transform:scale(.92)}
.qentry .qicon .newbadge{position:absolute;top:-4px;right:-6px;background:var(--danger);color:#fff;font-size:9px;padding:1px 5px;border-radius:6px;font-weight:700}
.qentry .qicon .dlbadge{position:absolute;bottom:-2px;right:-4px;background:var(--info);color:#fff;font-size:8px;padding:1px 4px;border-radius:5px;font-weight:600}
.qentry .qlabel{font-size:11px;color:var(--text-2);font-weight:500}
.recentplay{margin:0 16px 14px;background:#fff;border-radius:var(--r-lg);padding:12px;box-shadow:var(--shadow-sm)}
.recentplay .rptitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.recentplay .rptitle span{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.recentplay .rptitle .arrow{font-size:12px;color:var(--text-3);cursor:pointer}
.recentplay .rpitems{display:flex;gap:10px}
.recentplay .rpitem{flex:1;cursor:pointer}
.recentplay .rpitem .rpcover{width:100%;aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:4px}
.recentplay .rpitem .rpname{font-size:11px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hothscroll{padding:0 16px 14px;display:flex;gap:10px;overflow-x:auto}
.hothscroll::-webkit-scrollbar{display:none}
.hscard{flex-shrink:0;width:130px;cursor:pointer}
.hscard .hscover{width:130px;height:130px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;overflow:hidden}
.hscard .hscover .newtag{position:absolute;top:6px;right:6px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px}
.hscard .hsname{font-size:12px;font-weight:600;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hscard .hsmeta{font-size:10px;color:var(--text-3);margin-top:2px}
.filterrow{display:flex;gap:8px;padding:0 16px 10px;overflow-x:auto}
.filterrow::-webkit-scrollbar{display:none}
.filterchip{padding:6px 14px;border-radius:16px;font-size:12px;font-weight:500;background:#fff;color:var(--text-2);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm);transition:all .2s}
.filterchip.active{background:var(--primary);color:#fff}
.albumlist{padding:0 16px}
.alistitem{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #F0F0F0;cursor:pointer;align-items:center}
.alistitem:last-child{border-bottom:none}
.alistitem .acover{width:64px;height:64px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;position:relative}
.alistitem .acover .plays{position:absolute;bottom:2px;left:4px;font-size:9px;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.alistitem .ainfo{flex:1;min-width:0}
.alistitem .aname{font-size:14px;font-weight:600;margin-bottom:4px}
.alistitem .adesc{font-size:11px;color:var(--text-3)}
.alistitem .adevice{font-size:10px;color:var(--primary);background:var(--primary-light);padding:2px 6px;border-radius:4px;display:inline-block;margin-top:4px}
.device-empty{padding:20px 16px;text-align:center}
.device-empty .dtitle{font-size:24px;font-weight:900;margin:16px 0 8px;background:linear-gradient(135deg,var(--primary),var(--info));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.device-empty .dsubtitle{font-size:13px;color:var(--text-2);margin-bottom:24px}
.device-empty .dfeatures{position:relative;height:180px;margin-bottom:24px}
.device-empty .dpen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:140px;background:linear-gradient(180deg,#4FC3F7,#0288D1);border-radius:30px 30px 20px 20px;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 8px 24px rgba(2,136,209,.3)}
.device-empty .dfeat{position:absolute;width:80px;text-align:center}
.device-empty .dfeat .ficon{width:44px;height:44px;border-radius:50%;background:#E3F2FD;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-size:20px}
.device-empty .dfeat .fname{font-size:12px;font-weight:600}
.device-empty .dfeat .fdesc{font-size:10px;color:var(--text-3)}
.device-empty .addbtn{width:100%;padding:14px;background:linear-gradient(135deg,#4FC3F7,#0288D1);color:#fff;border:none;border-radius:24px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(2,136,209,.3)}
.device-empty .helplink{font-size:12px;color:var(--text-3);margin-top:12px;cursor:pointer;text-decoration:underline}
.device-topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px 12px}
.device-topbar .dleft{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-2);cursor:pointer}
.device-topbar .dright{width:32px;height:32px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);font-size:16px}
.device-bound{margin:0 16px 16px;background:linear-gradient(135deg,#263238,#37474F);border-radius:var(--r-xl);padding:20px;color:#fff;position:relative;overflow:hidden}
.device-bound::before{content:'';position:absolute;right:-40px;top:-40px;width:140px;height:140px;background:radial-gradient(circle,rgba(82,196,26,.3),transparent 70%);border-radius:50%}
.device-bound .db-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.device-bound .db-name{font-size:17px;font-weight:700}
.device-bound .db-status{display:flex;align-items:center;gap:5px;font-size:11px;background:rgba(82,196,26,.2);padding:4px 10px;border-radius:10px;color:#B9F6CA}
.device-bound .db-status .dot{width:6px;height:6px;background:#69F0AE;border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.device-bound .db-icon{width:64px;height:64px;background:linear-gradient(135deg,#66BB6A,#43A047);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 12px;box-shadow:0 8px 24px rgba(82,196,26,.4)}
.device-bound .db-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.7);margin-top:8px}
.device-bound .db-bar{flex:1;height:6px;background:rgba(255,255,255,.15);border-radius:3px;margin:0 10px;overflow:hidden}
.device-bound .db-fill{height:100%;width:75%;background:linear-gradient(90deg,#69F0AE,#00E676);border-radius:3px}
.dctrl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 16px 16px}
.dctrl-item{background:#fff;border-radius:var(--r-md);padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;box-shadow:var(--shadow-sm)}
.dctrl-item:active{transform:scale(.93)}
.dctrl-item .dci{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px}
.dctrl-item .dcl{font-size:11px;color:var(--text-2);font-weight:500;text-align:center}
.mall-top{padding:8px 16px 10px;display:flex;align-items:center;gap:10px}
.mall-top .msearch{flex:1;height:36px;background:#F5F5F5;border-radius:18px;display:flex;align-items:center;padding:0 14px;gap:8px}
.mall-top .msearch input{border:none;outline:none;flex:1;font-size:13px;background:transparent;font-family:inherit}
.mall-top .msearchbtn{background:var(--primary);color:#fff;border:none;padding:8px 16px;border-radius:18px;font-size:13px;font-weight:600;cursor:pointer}
.mall-top .mcart{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;font-size:18px}
.mall-top .mcart .badge{position:absolute;top:-2px;right:-2px;background:var(--danger);color:#fff;font-size:9px;padding:1px 5px;border-radius:8px}
.mall-guarantee{display:flex;justify-content:center;gap:20px;padding:0 16px 10px;font-size:11px;color:var(--text-2)}
.mall-banner{margin:0 16px 14px;height:130px;border-radius:var(--r-lg);position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:center;padding:0 16px}
.mall-age{display:flex;justify-content:space-around;padding:0 16px 14px}
.mall-age .ageitem{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.mall-age .ageicon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;background:#fff;box-shadow:var(--shadow-sm)}
.mall-age .agelabel{font-size:11px;color:var(--text-2);font-weight:500}
.mall-tabs{display:flex;padding:0 16px 12px;gap:8px;overflow-x:auto}
.mall-tabs::-webkit-scrollbar{display:none}
.mall-tab{padding:6px 14px;border-radius:16px;font-size:12px;font-weight:600;background:#fff;color:var(--text-2);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm)}
.mall-tab.active{background:var(--danger);color:#fff}
.mall-float{position:absolute;right:10px;bottom:140px;display:flex;flex-direction:column;gap:10px;z-index:30}
.mall-float .mfbtn{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow-md);cursor:pointer}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px 16px}
.pcard{background:#fff;border-radius:var(--r-md);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm)}
.pcard:active{transform:scale(.97)}
.pcard .pcover{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative}
.pcard .pcover .ptag{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;color:#fff}
.pcard .pcover .pcombo{position:absolute;top:6px;right:6px;font-size:9px;background:rgba(0,0,0,.5);color:#fff;padding:2px 6px;border-radius:4px}
.pcard .pinfo{padding:8px 10px}
.pcard .pname{font-size:12px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
.pcard .pprice{font-size:16px;font-weight:800;color:var(--danger);margin-top:4px}
.pcard .pprice span{font-size:11px;font-weight:400}
.pcard .psales{font-size:10px;color:var(--text-3);margin-top:2px}
.profile-head{background:linear-gradient(135deg,#E8F5E9,#C8E6C9);padding:40px 16px 20px;position:relative}
.profile-user{display:flex;align-items:center;gap:12px}
.profile-user .pavatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#FFD54F,#FF8A65);display:flex;align-items:center;justify-content:center;font-size:26px;border:3px solid #fff}
.profile-user .pinfo{flex:1}
.profile-user .pname{font-size:16px;font-weight:700}
.profile-user .preward{font-size:12px;color:var(--text-2);margin-top:3px;display:flex;align-items:center;gap:4px;cursor:pointer}
.vipbanner{margin:14px 16px 0;background:linear-gradient(135deg,#FFF8E1,#FFECB3);border-radius:var(--r-md);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.vipbanner .vleft{display:flex;align-items:center;gap:8px}
.vipbanner .vleft .vicon{font-size:22px}
.vipbanner .vleft .vtext{font-size:14px;font-weight:700;color:#FF8F00}
.vipbanner .vbtn{background:linear-gradient(135deg,#FFD700,#FFA000);color:#5D4037;font-size:12px;font-weight:700;padding:6px 14px;border-radius:12px}
.pfunc-row{display:flex;justify-content:space-around;padding:16px;background:#fff;margin:12px 16px;border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.pfunc-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.pfunc-item .pf-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.pfunc-item .pf-label{font-size:11px;color:var(--text-2);font-weight:500}
.pmenu{margin:0 16px 16px;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.pmenu .pmenu-title{font-size:13px;font-weight:700;color:var(--text-3);padding:12px 16px 4px}
.pmenu-item{display:flex;align-items:center;padding:13px 16px;cursor:pointer;border-bottom:1px solid #F8F8F8}
.pmenu-item:last-child{border-bottom:none}
.pmenu-item:active{background:#FAFAFA}
.pmenu-item .pm-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-right:12px}
.pmenu-item .pm-label{flex:1;font-size:14px;font-weight:500}
.pmenu-item .pm-switch{width:44px;height:26px;background:#E0E0E0;border-radius:13px;position:relative;cursor:pointer;transition:background .3s}
.pmenu-item .pm-switch.on{background:var(--primary)}
.pmenu-item .pm-switch::after{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:var(--shadow-sm)}
.pmenu-item .pm-switch.on::after{transform:translateX(18px)}
.pmenu-item .pm-arrow{color:var(--text-3);font-size:18px}
.overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:150;display:none;flex-direction:column;overflow:hidden;animation:slideUp .3s ease}
.overlay.show{display:flex}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.fullplayer{background:linear-gradient(180deg,#43A047,#1B5E20);color:#fff;padding:0 24px;z-index:200}
.fp-header{padding-top:52px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.fp-header .fp-back{cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.fp-header .fp-back svg{width:24px;height:24px}
.fp-header .fp-title{text-align:center;flex:1}
.fp-header .fp-title .song{font-size:16px;font-weight:700}
.fp-header .fp-title .artist{font-size:12px;opacity:.7;margin-top:2px}
.fp-cover{flex:1;display:flex;align-items:center;justify-content:center}
.fp-cover-inner{width:220px;height:220px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:90px;box-shadow:0 16px 48px rgba(0,0,0,.4)}
.fp-progress{margin-bottom:16px}
.fp-pbar{height:4px;background:rgba(255,255,255,.2);border-radius:2px;position:relative;cursor:pointer}
.fp-pfill{height:100%;width:35%;background:#fff;border-radius:2px;position:relative}
.fp-pfill::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.fp-time{display:flex;justify-content:space-between;font-size:11px;opacity:.7;margin-top:6px}
.fp-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.fp-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.8}
.fp-btn svg{width:22px;height:22px}
.fp-play{width:60px;height:60px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--primary-dark);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.fp-play svg{width:26px;height:26px}
.fp-actions{display:flex;justify-content:space-around;padding-bottom:36px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
.fp-action{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;opacity:.7;font-size:10px}
.fp-action svg{width:20px;height:20px}
.fp-action.active{opacity:1;color:#FFD54F}
.vippage{background:linear-gradient(180deg,#1A1A2E,#0F3460);color:#fff;overflow-y:auto;z-index:200}
.vippage::-webkit-scrollbar{display:none}
.vip-hero{padding:52px 24px 20px;text-align:center;position:relative}
.vip-hero .crown{font-size:44px;margin-bottom:6px}
.vip-hero h2{font-size:22px;font-weight:900;background:linear-gradient(135deg,#FFD700,#FFA000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.vip-hero p{font-size:12px;opacity:.7;margin-top:4px}
.vip-close{position:absolute;top:50px;right:16px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}
.vip-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 20px 16px}
.vip-benefit{background:rgba(255,255,255,.06);border:1px solid rgba(255,215,0,.2);border-radius:var(--r-md);padding:12px}
.vip-benefit .vbi{font-size:22px;margin-bottom:4px}
.vip-benefit .vbt{font-size:12px;font-weight:700}
.vip-benefit .vbd{font-size:10px;opacity:.6;margin-top:2px;line-height:1.3}
.vip-plans{padding:0 20px 16px}
.vip-plan{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:14px;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;position:relative;transition:all .2s}
.vip-plan.active{border-color:#FFD700;background:rgba(255,215,0,.08)}
.vip-plan .rtag{position:absolute;top:-1px;right:14px;background:linear-gradient(135deg,#FFD700,#FFA000);color:#5D4037;font-size:10px;font-weight:700;padding:3px 8px;border-radius:0 0 8px 8px}
.vip-plan .pname{font-size:14px;font-weight:700}
.vip-plan .pdesc{font-size:11px;opacity:.6;margin-top:2px}
.vip-plan .pprice{font-size:20px;font-weight:900;color:#FFD700}
.vip-plan .pprice span{font-size:11px;font-weight:400;opacity:.7}
.vip-subscribe{margin:0 20px 32px;padding:14px;background:linear-gradient(135deg,#FFD700,#FFA000);border-radius:var(--r-lg);text-align:center;cursor:pointer;font-size:16px;font-weight:800;color:#5D4037;box-shadow:0 6px 20px rgba(255,193,7,.4)}
.albumdetail{background:var(--bg)}
.ad-header{height:260px;position:relative;display:flex;flex-direction:column;padding:50px 20px 20px;color:#fff}
.ad-header .ad-back{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:14px}
.ad-header .ad-row{display:flex;gap:14px;align-items:flex-start}
.ad-header .ad-cover{width:96px;height:96px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:44px;box-shadow:0 6px 20px rgba(0,0,0,.3);flex-shrink:0}
.ad-header .ad-info{flex:1;min-width:0;padding-top:2px}
.ad-header .ad-title{font-size:17px;font-weight:800;margin-bottom:5px}
.ad-header .ad-meta{font-size:11px;opacity:.85;line-height:1.6}
.ad-content{flex:1;background:var(--bg);border-radius:24px 24px 0 0;margin-top:-18px;padding:16px 16px 90px;overflow-y:auto;position:relative;z-index:2}
.ad-content::-webkit-scrollbar{display:none}
.ad-actions{display:flex;gap:10px;margin-bottom:14px}
.ad-abtn{flex:1;padding:11px;border-radius:var(--r-md);text-align:center;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.ad-abtn.primary{background:var(--primary);color:#fff}
.ad-abtn.secondary{background:#fff;color:var(--text-1);box-shadow:var(--shadow-sm)}
.tracklist{display:flex;flex-direction:column;gap:2px}
.trackitem{display:flex;align-items:center;gap:10px;padding:11px 8px;border-radius:8px;cursor:pointer;transition:background .2s}
.trackitem:active{background:#F0F0F0}
.trackitem.playing{background:var(--primary-light)}
.trackitem .tnum{width:22px;font-size:13px;font-weight:700;color:var(--text-3);text-align:center}
.trackitem.playing .tnum{color:var(--primary)}
.trackitem .tinfo{flex:1;min-width:0}
.trackitem .tname{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trackitem.playing .tname{color:var(--primary-dark);font-weight:600}
.trackitem .tdur{font-size:11px;color:var(--text-3)}
.trackitem .tfree{font-size:9px;color:var(--warning);background:#FFFBE6;padding:2px 5px;border-radius:3px}
.trackitem .tvip{font-size:9px;color:#FFA000;background:#FFF8E1;padding:2px 5px;border-radius:3px}
.searchpage{background:var(--bg)}
.search-top{padding:50px 16px 12px;display:flex;align-items:center;gap:10px;background:#fff}
.search-top .siw{flex:1;height:36px;background:#F5F5F5;border-radius:18px;display:flex;align-items:center;padding:0 14px;gap:8px}
.search-top .siw svg{width:16px;height:16px;color:var(--text-3)}
.search-top .siw input{border:none;outline:none;flex:1;font-size:14px;background:transparent;font-family:inherit}
.search-top .scancel{font-size:14px;color:var(--primary);cursor:pointer;font-weight:500}
.search-body{flex:1;overflow-y:auto;padding:16px}
.search-body::-webkit-scrollbar{display:none}
.hs-title{font-size:14px;font-weight:700;margin-bottom:10px}
.hs-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.hs-tag{padding:6px 14px;background:#fff;border-radius:16px;font-size:12px;color:var(--text-2);cursor:pointer;box-shadow:var(--shadow-sm)}
.hs-tag.hot{color:var(--danger)}
.pdetail{background:var(--bg)}
.pd-body{flex:1;overflow-y:auto;padding-bottom:80px}
.pd-body::-webkit-scrollbar{display:none}
.pd-hero{background:#fff;padding:16px}
.pd-hero .pd-tags{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.pd-hero .pd-tag{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;text-align:center;flex:1;min-width:80px}
.pd-hero .pd-img{width:100%;aspect-ratio:1.2;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:80px;position:relative}
.pd-hero .pd-img .pager{position:absolute;bottom:8px;right:12px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;padding:2px 8px;border-radius:8px}
.pd-price{background:#fff;padding:12px 16px;border-top:1px solid #F5F5F5}
.pd-price .price{font-size:24px;font-weight:900;color:var(--danger)}
.pd-price .price span{font-size:14px}
.pd-price .pricetag{display:inline-block;background:linear-gradient(135deg,#FF7043,#E64A19);color:#fff;font-size:11px;padding:2px 8px;border-radius:4px;margin-left:8px;font-weight:600}
.pd-title{background:#fff;padding:0 16px 12px}
.pd-title h3{font-size:15px;font-weight:700;line-height:1.4;margin-bottom:8px}
.pd-title .pddesc{font-size:12px;color:var(--text-2);line-height:1.6}
.pd-title .pddesc li{margin-bottom:4px;list-style:none;display:flex;gap:6px}
.pd-title .pddesc li::before{content:'✓';color:var(--primary);font-weight:700}
.pd-bottom{position:absolute;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:10px;z-index:10}
.pd-bottom .pd-iconbtn{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;color:var(--text-2);font-size:9px}
.pd-bottom .pd-iconbtn svg{width:20px;height:20px}
.pd-bottom .pd-addcart{flex:1;padding:12px;background:#FF9500;color:#fff;border:none;border-radius:22px;font-size:14px;font-weight:700;cursor:pointer}
.pd-bottom .pd-buy{flex:1;padding:12px;background:linear-gradient(135deg,#FF5722,#E64A19);color:#fff;border:none;border-radius:22px;font-size:14px;font-weight:700;cursor:pointer}
.reward-page{background:linear-gradient(180deg,#FFF8E1,#FFFDE7);overflow-y:auto}
.reward-page::-webkit-scrollbar{display:none}
.reward-hero{padding:50px 20px 16px}
.reward-hero .rbalance{display:flex;align-items:center;gap:8px}
.reward-hero .rbalance .coin{font-size:32px}
.reward-hero .rbalance .amount{font-size:36px;font-weight:900;color:#FF8F00}
.reward-hero .rbalance .unit{font-size:13px;color:var(--text-2)}
.reward-hero .rdesc{font-size:12px;color:var(--text-2);margin-top:4px}
.signin-card{margin:0 16px 16px;background:#fff;border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm)}
.signin-card .sc-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.signin-card .sc-title span{font-size:16px;font-weight:800}
.signin-card .sc-title .sgift{font-size:12px;color:var(--danger);background:#FFF0F0;padding:4px 10px;border-radius:10px;cursor:pointer}
.signin-days{display:flex;justify-content:space-between;margin-bottom:12px}
.signin-day{text-align:center;flex:1}
.signin-day .sday{font-size:11px;color:var(--text-3);margin-bottom:4px}
.signin-day .scoin{width:36px;height:36px;border-radius:50%;background:#FFF8E1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#FF8F00;margin:0 auto;position:relative}
.signin-day.today .scoin{background:linear-gradient(135deg,#FFD700,#FFA000);color:#fff;box-shadow:0 2px 8px rgba(255,193,7,.4)}
.signin-day.today .scoin::after{content:'加赠20';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--danger);color:#fff;font-size:9px;padding:1px 5px;border-radius:6px;white-space:nowrap}
.signin-btn{width:100%;padding:12px;background:linear-gradient(135deg,#FF9800,#F57C00);color:#fff;border:none;border-radius:20px;font-size:15px;font-weight:700;cursor:pointer}
.reward-tabs{display:flex;padding:0 16px 12px;gap:8px}
.reward-tab{flex:1;padding:10px;text-align:center;font-size:13px;font-weight:600;color:var(--text-2);background:#fff;border-radius:var(--r-md);cursor:pointer;box-shadow:var(--shadow-sm)}
.reward-tab.active{background:var(--warning);color:#fff}
.coupon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px 20px}
.coupon-card{background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer}
.coupon-card .ctop{padding:16px;text-align:center;background:linear-gradient(135deg,#E3F2FD,#BBDEFB)}
.coupon-card .ctop .camount{font-size:28px;font-weight:900;color:#1565C0}
.coupon-card .ctop .camount span{font-size:14px}
.coupon-card .ctop .ccond{font-size:10px;color:var(--text-2);margin-top:2px}
.coupon-card .cbtn{padding:8px;text-align:center;font-size:12px;font-weight:600;color:var(--primary);border-top:1px dashed #E0E0E0}
.scene-page{color:#fff;overflow:hidden}
.scene-tabs{display:flex;gap:12px;padding:50px 16px 10px;overflow-x:auto}
.scene-tabs::-webkit-scrollbar{display:none}
.scene-tab{flex-shrink:0;text-align:center;cursor:pointer;opacity:.6;transition:all .2s}
.scene-tab .sticon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 4px;background:rgba(255,255,255,.15)}
.scene-tab .stlabel{font-size:11px;font-weight:500}
.scene-tab.active{opacity:1;transform:scale(1.1)}
.scene-tab.active .sticon{background:rgba(255,255,255,.3);box-shadow:0 0 20px rgba(255,255,255,.2)}
.scene-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;text-align:center}
.scene-body .stitle{font-size:22px;font-weight:800;margin-bottom:8px}
.scene-body .sdesc{font-size:13px;opacity:.8;line-height:1.5;margin-bottom:30px;max-width:280px}
.scene-cover{width:200px;height:200px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:80px;box-shadow:0 12px 40px rgba(0,0,0,.3);margin-bottom:16px;border:6px solid rgba(255,255,255,.2)}
.scene-song{font-size:18px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.scene-song .fav{cursor:pointer;opacity:.7}
.scene-song .fav.active{opacity:1;color:#FFD700}
.scene-ctrls{display:flex;align-items:center;gap:40px;margin-bottom:20px}
.scene-ctrls .sbtn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.15)}
.scene-ctrls .sbtn.play{width:60px;height:60px;background:#fff;color:inherit}
.scene-ctrls .sbtn.play svg{width:28px;height:28px}
.scene-ctrls .sbtn svg{width:22px;height:22px}
.scene-actions{display:flex;gap:12px}
.scene-actions .sabtn{padding:10px 20px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2)}
.zone-page{background:var(--bg)}
.zone-body{flex:1;overflow-y:auto;padding-bottom:calc(var(--nav-h) + var(--mini-h))}
.zone-body::-webkit-scrollbar{display:none}
.zone-cats{display:flex;justify-content:space-around;padding:16px;background:#fff}
.zone-cat{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.zone-cat .zicon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}
.zone-cat .zlabel{font-size:12px;color:var(--text-2);font-weight:500}
.zone-banner{margin:12px 16px;height:100px;border-radius:var(--r-lg);display:flex;align-items:center;padding:0 16px;position:relative;overflow:hidden;cursor:pointer;color:#fff}
.zone-subtabs{display:flex;gap:8px;padding:0 16px 10px;overflow-x:auto}
.zone-subtabs::-webkit-scrollbar{display:none}
.zone-subtab{padding:5px 12px;border-radius:14px;font-size:12px;font-weight:500;background:#fff;color:var(--text-2);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm)}
.zone-subtab.active{background:var(--primary-light);color:var(--primary-dark);font-weight:600}
.zone-list{padding:0 16px}
.zlist-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #F0F0F0;cursor:pointer;align-items:center}
.zlist-item:last-child{border-bottom:none}
.zlist-item .zcover{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;position:relative}
.zlist-item .zcover .zbadge{position:absolute;bottom:2px;left:2px;font-size:8px;color:#fff;background:rgba(0,0,0,.5);padding:1px 4px;border-radius:3px}
.zlist-item .zinfo{flex:1;min-width:0}
.zlist-item .zname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zlist-item .zdesc{font-size:11px;color:var(--text-3);margin-top:3px}
.zone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 14px}
.zgrid-card{cursor:pointer}
.zgrid-card .zgcover{width:100%;aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:32px;position:relative}
.zgrid-card .zgcover .zgnew{position:absolute;top:4px;left:4px;font-size:9px;background:var(--danger);color:#fff;padding:1px 5px;border-radius:3px;font-weight:700}
.zgrid-card .zgname{font-size:12px;font-weight:600;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listen-top{display:flex;gap:10px;padding:0 16px 12px}
.listen-card{flex:1;background:#fff;border-radius:var(--r-md);padding:14px;text-align:center;box-shadow:var(--shadow-sm);cursor:pointer}
.listen-card .lnum{font-size:22px;font-weight:800;color:var(--text-3)}
.listen-card .llabel{font-size:12px;color:var(--text-2);margin-top:2px}
.listen-guide{margin:0 16px 14px;background:#FFF8E1;border-radius:var(--r-md);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.listen-guide .gl{font-size:13px;font-weight:600;color:#FF8F00;display:flex;align-items:center;gap:6px}
.listen-guide .gr{font-size:12px;color:var(--text-2)}
.listen-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px 14px}
.lgcard{background:#fff;border-radius:var(--r-md);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm)}
.lgcard .lgcover{width:100%;aspect-ratio:1.4;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative}
.lgcard .lgcover .lgtag{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;color:#fff}
.lgcard .lginfo{padding:8px 10px}
.lgcard .lgname{font-size:13px;font-weight:600}
.lgcard .lgmeta{font-size:10px;color:var(--text-3);margin-top:2px}
.listen-plan-card{margin:0 16px 14px;background:#fff;border-radius:var(--r-lg);padding:14px;display:flex;gap:12px;box-shadow:var(--shadow-sm);cursor:pointer}
.listen-plan-card .lpcover{width:80px;height:80px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:36px;flex-shrink:0}
.listen-plan-card .lpinfo{flex:1;min-width:0}
.listen-plan-card .lpname{font-size:14px;font-weight:700;margin-bottom:4px}
.listen-plan-card .lpdesc{font-size:11px;color:var(--text-3);line-height:1.4;margin-bottom:8px}
.listen-plan-card .lpbtn{display:inline-block;padding:4px 12px;background:var(--primary);color:#fff;font-size:11px;font-weight:600;border-radius:10px}
.listen-plan-card .lppeople{font-size:10px;color:var(--text-3);margin-left:8px}
.doll-nfc{margin:16px;background:#fff;border-radius:var(--r-xl);padding:24px;text-align:center;box-shadow:var(--shadow-sm)}
.doll-nfc .nfctitle{font-size:18px;font-weight:800;margin-bottom:6px}
.doll-nfc .nfcdesc{font-size:12px;color:var(--text-2);margin-bottom:20px}
.doll-nfc .nfcicon{width:120px;height:140px;margin:0 auto 20px;position:relative}
.doll-nfc .nfcicon .phone{width:80px;height:120px;border:3px solid #B0BEC5;border-radius:12px;position:absolute;right:0;top:10px;background:#FAFAFA;display:flex;align-items:center;justify-content:center}
.doll-nfc .nfcicon .phone .nfcsymbol{font-size:20px;color:#90A4AE;font-weight:700}
.doll-nfc .nfcicon .hand{position:absolute;left:0;bottom:0;font-size:50px}
.doll-nfc .addbtn{padding:10px 32px;background:var(--primary);color:#fff;border:none;border-radius:20px;font-size:14px;font-weight:700;cursor:pointer}
.doll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 20px}
.doll-card{background:#fff;border-radius:var(--r-md);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm);text-align:center}
.doll-card .dcover{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative}
.doll-card .dcover .dbadge{position:absolute;top:6px;right:6px;font-size:9px;background:var(--purple);color:#fff;padding:2px 6px;border-radius:4px;font-weight:600}
.doll-card .dname{font-size:12px;font-weight:600;padding:6px 4px 8px}
.wifi-page{background:#fff;z-index:200}
.wifi-steps{display:flex;align-items:center;padding:50px 40px 20px;gap:4px}
.wifi-step{flex:1;height:4px;background:#E0E0E0;border-radius:2px;position:relative}
.wifi-step.active{background:var(--info)}
.wifi-step .sdot{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:#E0E0E0;border:3px solid #fff;box-shadow:var(--shadow-sm)}
.wifi-step.active .sdot{background:var(--info)}
.wifi-body{flex:1;padding:20px 24px}
.wifi-body h3{font-size:20px;font-weight:800;margin-bottom:24px}
.wifi-product{width:100%;padding:20px;border-radius:var(--r-lg);margin-bottom:14px;cursor:pointer;display:flex;align-items:center;gap:16px;transition:transform .2s;border:2px solid transparent}
.wifi-product:active{transform:scale(.98)}
.wifi-product.selected{border-color:var(--info)}
.wifi-product .wpicon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0}
.wifi-product .wpname{font-size:18px;font-weight:700}
.recent-group{padding:0 16px}
.recent-group .rglabel{font-size:13px;font-weight:700;color:var(--text-3);padding:12px 0 8px}
.recent-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #F0F0F0;cursor:pointer}
.recent-item:last-child{border-bottom:none}
.recent-item .ricover{width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.recent-item .riinfo{flex:1;min-width:0}
.recent-item .riname{font-size:14px;font-weight:600}
.recent-item .riprogress{font-size:11px;color:var(--text-3);margin-top:3px}
.modaloverlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:300;display:none;align-items:flex-end;justify-content:center}
.modaloverlay.show{display:flex;animation:fadeIn .2s ease}
.modalsheet{width:100%;background:#fff;border-radius:24px 24px 0 0;padding:20px 16px 32px;max-height:80%;overflow-y:auto;animation:slideSheet .3s ease;position:relative}
@keyframes slideSheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modalsheet::-webkit-scrollbar{display:none}
.modaltitle{font-size:17px;font-weight:800;text-align:center;margin-bottom:14px}
.modalclose{position:absolute;top:14px;right:16px;width:28px;height:28px;border-radius:50%;background:#F5F5F5;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--text-3)}
.switchrow{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #F5F5F5}
.switchrow:last-child{border-bottom:none}
.switchrow .swl{font-size:14px;font-weight:500}
.switchrow .swd{font-size:11px;color:var(--text-3);margin-top:2px}
.switch{width:44px;height:26px;background:#E0E0E0;border-radius:13px;position:relative;cursor:pointer;transition:background .3s;flex-shrink:0}
.switch.on{background:var(--primary)}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:var(--shadow-sm)}
.switch.on::after{transform:translateX(18px)}
.toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);color:#fff;padding:10px 20px;border-radius:var(--r-md);font-size:13px;z-index:999;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap;max-width:80%;text-align:center}
.toast.show{opacity:1}
@media(max-width:420px){body{padding:0;background:var(--bg)}.phone{width:100vw;height:100vh;border-radius:0;padding:0;box-shadow:none}.screen{border-radius:0}.notch{display:none}}
</style>
</head>
<body>
<div class="phone">
  <div class="notch"></div>
  <div class="screen">
    <div class="statusbar">
      <span class="time" id="statusTime">13:38</span>
      <div class="icons">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"/></svg>
      </div>
    </div>
    <div class="content" id="appContent">
      <!-- 首页 -->
      <section class="view active" data-route="home">
        <div class="home-top">
          <div class="avatar" onclick="switchTab('profile')">👶<span class="age">2-4岁</span></div>
          <div class="searchbar" onclick="openSearch()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
            <input type="text" placeholder="经典儿歌" readonly>
          </div>
          <div class="msgicon" onclick="showToast('消息中心')"><span class="dot"></span>🔔</div>
        </div>
        <div class="hometabs" id="homeTabs">
          <div class="htab active" data-cat="recommend">推荐</div>
          <div class="htab" data-cat="song">儿歌</div>
          <div class="htab" data-cat="sleep">哄睡</div>
          <div class="htab red" data-cat="safety">安全教育</div>
          <div class="htab" data-cat="music">音乐</div>
          <div class="htab" data-cat="guoxue">国学</div>
        </div>
        <div class="banner" style="background:linear-gradient(135deg,#4FC3F7,#0288D1)" onclick="showToast('安全警长啦咘啦哆·守护泡泡岛')">
          <div class="bcontent"><span class="btag">安全警长啦咘啦哆</span><h3>守护泡泡岛</h3><p>学习安全知识，守护儿童健康成长</p></div>
          <div class="bicon">🐶</div>
        </div>
        <div class="quickgrid">
          <div class="qentry" onclick="showToast('电台功能')"><div class="qicon" style="background:#E8F5E9">📻</div><span class="qlabel">电台</span></div>
          <div class="qentry" onclick="openZone('new')"><div class="qicon" style="background:#FFF3E0"><span class="newbadge">NEW</span>✨</div><span class="qlabel">新品</span></div>
          <div class="qentry" onclick="openZone('story')"><div class="qicon" style="background:#F3E5F5">📖</div><span class="qlabel">故事</span></div>
          <div class="qentry" onclick="openZone('english')"><div class="qicon" style="background:#E3F2FD;font-size:16px;font-weight:700;color:#1565C0">En</div><span class="qlabel">英文</span></div>
          <div class="qentry" onclick="openPage('category')"><div class="qicon" style="background:#FFF8E1">🗂️</div><span class="qlabel">分类</span></div>
          <div class="qentry" onclick="openPage('bookplaylist')"><div class="qicon" style="background:#E8F5E9">📚</div><span class="qlabel">童书歌单</span></div>
          <div class="qentry" onclick="showToast('设备专享内容')"><div class="qicon" style="background:#E0F7FA"><span class="dlbadge">可下载</span>🎧</div><span class="qlabel">设备专享</span></div>
          <div class="qentry" onclick="openPage('listening')"><div class="qicon" style="background:#FFF8E1">⏰</div><span class="qlabel">设备熏听</span></div>
          <div class="qentry" onclick="openPage('doll')"><div class="qicon" style="background:#FCE4EC">🧸</div><span class="qlabel">公仔馆</span></div>
          <div class="qentry" onclick="openPage('wifi')"><div class="qicon" style="background:#E3F2FD">📶</div><span class="qlabel">设备连网</span></div>
        </div>
        <div class="recentplay">
          <div class="rptitle"><span>🕐 最近播放</span><span class="arrow" onclick="openPage('recent')">查看更多 ›</span></div>
          <div class="rpitems">
            <div class="rpitem" onclick="openAlbum(1)"><div class="rpcover" style="background:#A5D6A7">🚗</div><div class="rpname">交通工具认知</div></div>
            <div class="rpitem" onclick="openAlbum(2)"><div class="rpcover" style="background:#90CAF9">🐶</div><div class="rpname">常见的动物</div></div>
          </div>
        </div>
        <div class="sectiontitle"><span>🔥 热门精选</span><span class="more" onclick="showToast('查看更多')">查看更多 ›</span></div>
        <div class="hothscroll" id="hotScroll"></div>
        <div class="sectiontitle"><span>📚 本月更新</span></div>
        <div class="hothscroll" id="newScroll"></div>
      </section>
      <!-- 全部分类 -->
      <section class="view" data-route="category">
        <div class="pagehead">
          <div class="backbtn" onclick="switchTab('home')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
          <div class="pagetitle">全部分类</div>
        </div>
        <div class="filterrow" id="ageFilter"><div class="filterchip">0-2岁</div><div class="filterchip active">2-4岁</div><div class="filterchip">4岁+</div></div>
        <div class="filterrow" id="typeFilter"><div class="filterchip active">全部类型</div><div class="filterchip">儿歌</div><div class="filterchip">故事</div><div class="filterchip">音乐</div><div class="filterchip">小知识</div></div>
        <div class="filterrow" id="catFilter"><div class="filterchip active">全部分类</div><div class="filterchip">听觉开发</div><div class="filterchip">乐感培养</div><div class="filterchip">国学启蒙</div><div class="filterchip">认知</div></div>
        <div class="albumlist" id="categoryList"></div>
      </section>
      <!-- 设备 -->
      <section class="view" data-route="device">
        <div class="device-topbar">
          <div class="dleft" onclick="showToast('录音备份')">🎙️ 录音备份</div>
          <div class="dright" onclick="showToast('设备设置')">⚙️</div>
        </div>
        <div id="deviceEmptyState">
          <div class="device-empty">
            <div class="dtitle">快乐启蒙<br>宝宝巴士点读笔</div>
            <div class="dsubtitle">十万音频 · 熏听计划 · 设备管理</div>
            <div class="dfeatures">
              <div class="dfeat" style="left:0;top:0"><div class="ficon">🎵</div><div class="fname">畅听</div><div class="fdesc">十万音频</div></div>
              <div class="dfeat" style="right:0;top:20px"><div class="ficon">📋</div><div class="fname">订阅</div><div class="fdesc">熏听计划</div></div>
              <div class="dfeat" style="left:50%;transform:translateX(-50%);bottom:0"><div class="ficon">📊</div><div class="fname">管理</div><div class="fdesc">设备状态</div></div>
              <div class="dpen">🖊️</div>
            </div>
            <button class="addbtn" onclick="openPage('wifi')">添加设备</button>
            <div class="helplink" onclick="showToast('查看联网解决方法')">无法联网？点击查看解决方法</div>
          </div>
        </div>
        <div id="deviceBoundState" style="display:none">
          <div class="device-bound">
            <div class="db-top"><div class="db-name">小布咕点读笔 G4</div><div class="db-status"><span class="dot"></span>已连接</div></div>
            <div class="db-icon">🖊️</div>
            <div class="db-row"><span>电量</span><div class="db-bar"><div class="db-fill"></div></div><span>75%</span></div>
            <div class="db-row" style="margin-top:8px"><span>Wi-Fi</span><span style="color:#B9F6CA">已连接 · 信号良好</span></div>
          </div>
          <div class="dctrl-grid">
            <div class="dctrl-item" onclick="showToast('灯光已开启')"><div class="dci" style="background:#FFF8E1">💡</div><span class="dcl">灯光</span></div>
            <div class="dctrl-item" onclick="toggleChildLock(this)"><div class="dci" style="background:#FFEBEE">🔒</div><span class="dcl">童锁</span></div>
            <div class="dctrl-item" onclick="showToast('正在查找设备...')"><div class="dci" style="background:#E3F2FD">🔍</div><span class="dcl">查找设备</span></div>
            <div class="dctrl-item" onclick="showToast('固件已是最新')"><div class="dci" style="background:#F3E5F5">⚙️</div><span class="dcl">固件升级</span></div>
          </div>
          <div class="sectiontitle">推送歌单到设备</div>
          <div style="padding:0 16px" id="devicePlaylists"></div>
        </div>
        <div style="text-align:center;padding:16px"><span style="font-size:12px;color:var(--text-3);cursor:pointer;text-decoration:underline" onclick="toggleDeviceState()">切换：已绑定设备状态演示</span></div>
      </section>
      <!-- 商城 -->
      <section class="view" data-route="mall">
        <div class="mall-top">
          <div class="msearch"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;color:var(--text-3)"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg><input type="text" placeholder="国学启蒙" readonly></div>
          <button class="msearchbtn" onclick="showToast('搜索商品')">搜索</button>
          <div class="mcart" onclick="showToast('购物车')">🛒<span class="badge">3</span></div>
        </div>
        <div class="mall-guarantee"><span>✅ 宝宝巴士直营</span><span>✅ 正品保障</span><span>✅ 15天无忧退换</span></div>
        <div class="mall-banner" style="background:linear-gradient(135deg,#FFCC80,#FF8A65)" onclick="showToast('养成生活好习惯专区')">
          <div class="bcontent"><h3 style="font-size:22px">养成生活好习惯</h3><p style="margin-top:4px">首发上新价 <span style="font-size:24px;font-weight:900">52</span> 元</p></div>
          <div class="bicon" style="font-size:64px">📚</div>
        </div>
        <div class="mall-age">
          <div class="ageitem" onclick="filterMallAge(this)"><div class="ageicon">👶</div><span class="agelabel">1-2岁</span></div>
          <div class="ageitem" onclick="filterMallAge(this)"><div class="ageicon">🧒</div><span class="agelabel">2-3岁</span></div>
          <div class="ageitem" onclick="filterMallAge(this)"><div class="ageicon">👧</div><span class="agelabel">3-4岁</span></div>
          <div class="ageitem" onclick="filterMallAge(this)"><div class="ageicon">🧑</div><span class="agelabel">4-6岁</span></div>
        </div>
        <div class="mall-tabs" id="mallTabs"><div class="mall-tab active">新人专享</div><div class="mall-tab">进阶拓展</div><div class="mall-tab">双语启蒙</div><div class="mall-tab">新品送</div></div>
        <div class="product-grid" id="mallProducts"></div>
        <div class="mall-float"><div class="mfbtn" onclick="showToast('购物车')">🛒</div><div class="mfbtn" onclick="switchTab('profile')">👤</div></div>
      </section>
      <!-- 我的 -->
      <section class="view" data-route="profile">
        <div class="profile-head">
          <div style="position:absolute;top:12px;right:16px;cursor:pointer" onclick="showToast('设置')">⚙️</div>
          <div class="profile-user">
            <div class="pavatar">👶</div>
            <div class="pinfo"><div class="pname">布咕小朋友</div><div class="preward" onclick="openPage('reward')">🪙 0 奖励金 ›</div></div>
          </div>
        </div>
        <div class="vipbanner" onclick="openVIP()"><div class="vleft"><span class="vicon">👑</span><div class="vtext">VIP 声音陪伴成长</div></div><div class="vbtn">开通会员</div></div>
        <div class="pfunc-row">
          <div class="pfunc-item" onclick="openPage('recent')"><div class="pf-icon" style="background:#E8F5E9">🕐</div><span class="pf-label">最近播放</span></div>
          <div class="pfunc-item" onclick="showToast('我的收藏')"><div class="pf-icon" style="background:#FFF3E0">⭐</div><span class="pf-label">收藏</span></div>
          <div class="pfunc-item" onclick="showToast('下载管理')"><div class="pf-icon" style="background:#E3F2FD">⬇️</div><span class="pf-label">下载</span></div>
          <div class="pfunc-item" onclick="openPage('doll')"><div class="pf-icon" style="background:#FCE4EC">🧸</div><span class="pf-label">公仔</span></div>
          <div class="pfunc-item" onclick="showToast('已购商品')"><div class="pf-icon" style="background:#F3E5F5">🛍️</div><span class="pf-label">已购</span></div>
        </div>
        <div class="pmenu">
          <div class="pmenu-title">其他</div>
          <div class="pmenu-item"><div class="pm-icon" style="background:#E3F2FD">👁️</div><span class="pm-label">护眼模式</span><div class="pm-switch" onclick="this.classList.toggle('on')"></div></div>
          <div class="pmenu-item"><div class="pm-icon" style="background:#FFF8E1">👋</div><span class="pm-label">启动欢迎语</span><div class="pm-switch on" onclick="this.classList.toggle('on')"></div></div>
          <div class="pmenu-item" onclick="showToast('播放与下载设置')"><div class="pm-icon" style="background:#E8F5E9">🎧</div><span class="pm-label">播放与下载</span><span class="pm-arrow">›</span></div>
          <div class="pmenu-item" onclick="openParentControl()"><div class="pm-icon" style="background:#FFEBEE">🛡️</div><span class="pm-label">家长守护</span><span class="pm-arrow">›</span></div>
          <div class="pmenu-item" onclick="showToast('帮助与反馈')"><div class="pm-icon" style="background:#F3E5F5">❓</div><span class="pm-label">帮助与反馈</span><span class="pm-arrow">›</span></div>
          <div class="pmenu-item" onclick="showToast('联系客服')"><div class="pm-icon" style="background:#E0F7FA">🎧</div><span class="pm-label">联系客服</span><span class="pm-arrow">›</span></div>
          <div class="pmenu-item" onclick="showToast('分享App给好友')"><div class="pm-icon" style="background:#FFF3E0">📤</div><span class="pm-label">分享App</span><span class="pm-arrow">›</span></div>
        </div>
      </section>
    </div>

    <!-- 迷你播放栏 -->
    <div class="miniplayer" id="miniPlayer" onclick="openFullPlayer()">
      <div class="cover" style="background:#A5D6A7">🚗</div>
      <div class="info"><div class="tag">APP播放：</div><div class="title" id="miniTitle">守护安全的警车</div></div>
      <div class="ctrls">
        <button class="cbtn" onclick="event.stopPropagation();togglePlay()"><svg viewBox="0 0 24 24" fill="currentColor" id="miniPlayIcon"><path d="M8 5v14l11-7z"/></svg></button>
        <button class="cbtn" onclick="event.stopPropagation();showToast('播放列表')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg></button>
      </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottomnav">
      <div class="navitem active" data-tab="home" onclick="switchTab('home')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg><span>发现</span></div>
      <div class="navitem" data-tab="device" onclick="switchTab('device')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg><span>设备</span></div>
      <div class="navitem" data-tab="mall" onclick="switchTab('mall')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg><span>商城</span></div>
      <div class="navitem" data-tab="profile" onclick="switchTab('profile')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg><span>我的</span></div>
    </div>

    <!-- 全屏播放 -->
    <div class="overlay fullplayer" id="fullPlayer">
      <div class="fp-header">
        <div class="fp-back" onclick="closeFullPlayer()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
        <div class="fp-title"><div class="song" id="fpTitle">守护安全的警车</div><div class="artist">交通工具认知 · 适合2-4岁</div></div>
        <div class="fp-back" onclick="showToast('更多操作')"><svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></div>
      </div>
      <div class="fp-cover"><div class="fp-cover-inner" style="background:linear-gradient(135deg,#A5D6A7,#66BB6A)">🚗</div></div>
      <div class="fp-progress"><div class="fp-pbar" onclick="seekProgress(event)"><div class="fp-pfill" id="fpProgressFill"></div></div><div class="fp-time"><span id="fpCurrent">05:23</span><span>15:30</span></div></div>
      <div class="fp-controls">
        <div class="fp-btn" onclick="showToast('循环模式')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg></div>
        <div class="fp-btn" onclick="prevTrack()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg></div>
        <div class="fp-play" onclick="togglePlay()"><svg viewBox="0 0 24 24" fill="currentColor" id="fpPlayIcon"><path d="M8 5v14l11-7z"/></svg></div>
        <div class="fp-btn" onclick="nextTrack()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg></div>
        <div class="fp-btn" onclick="showToast('播放列表')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 10h11v2H3zm0-4h11v2H3zm0 8h7v2H3zm13-4v8l6-4z"/></svg></div>
      </div>
      <div class="fp-actions">
        <div class="fp-action" onclick="toggleFav(this)"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg><span>收藏</span></div>
        <div class="fp-action" onclick="showToast('已开始下载')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg><span>下载</span></div>
        <div class="fp-action" onclick="showToast('已推送到点读笔')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg><span>推送设备</span></div>
        <div class="fp-action" onclick="showToast('定时15分钟后关闭')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg><span>定时</span></div>
        <div class="fp-action" onclick="showToast('倍速 1.0x')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 8v8l6-4-6-4zm2-6C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg><span>倍速</span></div>
      </div>
    </div>

    <!-- VIP -->
    <div class="overlay vippage" id="vipPage">
      <div class="vip-close" onclick="closeVIP()">✕</div>
      <div class="vip-hero"><div class="crown">👑</div><h2>小布咕超级VIP</h2><p>10万+音频畅听 · 专属内容 · 多端同步</p></div>
      <div class="vip-benefits">
        <div class="vip-benefit"><div class="vbi">🎧</div><div class="vbt">海量内容</div><div class="vbd">10万+分龄音频免费听</div></div>
        <div class="vip-benefit"><div class="vbi">⭐</div><div class="vbt">独家IP</div><div class="vbd">热门IP系列抢先听</div></div>
        <div class="vip-benefit"><div class="vbi">📥</div><div class="vbt">无限下载</div><div class="vbd">离线畅听不受限</div></div>
        <div class="vip-benefit"><div class="vbi">🖥️</div><div class="vbt">多端同步</div><div class="vbd">手机/点读笔/故事机</div></div>
      </div>
      <div class="vip-plans" id="vipPlans">
        <div class="vip-plan active"><div class="rtag">最划算</div><div><div class="pname">连续包年</div><div class="pdesc">每天仅需0.24元</div></div><div class="pprice">¥88<span>/年</span></div></div>
        <div class="vip-plan"><div><div class="pname">连续包月</div><div class="pdesc">随时可取消</div></div><div class="pprice">¥9<span>/月</span></div></div>
        <div class="vip-plan"><div><div class="pname">季度会员</div><div class="pdesc">3个月畅听</div></div><div class="pprice">¥38<span>/季</span></div></div>
      </div>
      <div class="vip-subscribe" onclick="showToast('开通成功！欢迎加入小布咕VIP')">立即开通 VIP</div>
    </div>

    <!-- 专辑详情 -->
    <div class="overlay albumdetail" id="albumDetail">
      <div class="ad-header" id="adHeader" style="background:linear-gradient(135deg,#66BB6A,#2E7D32)">
        <div class="ad-back" onclick="closeAlbumDetail()"><svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
        <div class="ad-row">
          <div class="ad-cover" id="adCover" style="background:linear-gradient(135deg,#FFCC80,#FF8A65)">🐵</div>
          <div class="ad-info"><div class="ad-title" id="adTitle">猴子警长探案记</div><div class="ad-meta" id="adMeta">科学探案 · 逻辑推理<br>共120集 · 播放量5.2亿<br>适合5-8岁</div></div>
        </div>
      </div>
      <div class="ad-content">
        <div class="ad-actions">
          <div class="ad-abtn primary" onclick="playAlbum()"><svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M8 5v14l11-7z"/></svg>播放全部</div>
          <div class="ad-abtn secondary" onclick="showToast('已下载全部剧集')"><svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>下载</div>
        </div>
        <div class="tracklist" id="trackList"></div>
      </div>
    </div>

    <!-- 搜索 -->
    <div class="overlay searchpage" id="searchPage">
      <div class="search-top">
        <div class="siw"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg><input type="text" placeholder="搜索故事、儿歌、国学..." id="searchInput"></div>
        <div class="scancel" onclick="closeSearch()">取消</div>
      </div>
      <div class="search-body">
        <div class="hs-title">🔥 热门搜索</div>
        <div class="hs-tags">
          <span class="hs-tag hot" onclick="doSearch('猴子警长')">猴子警长</span>
          <span class="hs-tag hot" onclick="doSearch('睡前故事')">睡前故事</span>
          <span class="hs-tag" onclick="doSearch('三字经')">三字经</span>
          <span class="hs-tag" onclick="doSearch('英文儿歌')">英文儿歌</span>
          <span class="hs-tag" onclick="doSearch('安全警长')">安全警长</span>
          <span class="hs-tag" onclick="doSearch('古诗')">古诗</span>
          <span class="hs-tag" onclick="doSearch('恐龙')">恐龙</span>
          <span class="hs-tag" onclick="doSearch('西游记')">西游记</span>
        </div>
        <div class="hs-title">🕐 搜索历史</div>
        <div class="hs-tags"><span class="hs-tag" onclick="doSearch('哄睡白噪音')">哄睡白噪音</span><span class="hs-tag" onclick="doSearch('弟子规')">弟子规</span></div>
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="overlay pdetail" id="productDetail">
      <div class="pd-body">
        <div style="position:sticky;top:0;background:#fff;z-index:10;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #F5F5F5">
          <div class="backbtn" onclick="closeProductDetail()" style="padding:0"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
          <span style="font-size:16px;font-weight:700">商品详情</span>
          <div style="cursor:pointer" onclick="showToast('分享商品')">↗️</div>
        </div>
        <div class="pd-hero">
          <div class="pd-tags">
            <div class="pd-tag" style="background:#E3F2FD;color:#1565C0">学会辨别与分类</div>
            <div class="pd-tag" style="background:#FFF3E0;color:#E65100">培养收纳习惯</div>
            <div class="pd-tag" style="background:#FFEBEE;color:#C62828">20个安全故事</div>
          </div>
          <div class="pd-img" style="background:linear-gradient(135deg,#FFCC80,#FFAB91)">📚<span class="pager">1/5</span></div>
        </div>
        <div class="pd-price"><span class="price"><span>¥</span>29.9</span><span class="pricetag">超值换购</span></div>
        <div class="pd-title">
          <h3>【1-3岁】好习惯+安全力双启蒙包赳赳收玩具+啦咘啦哆有声安全故事卡</h3>
          <ul class="pddesc">
            <li>习惯安全双启蒙，行为养成避险认知同步学</li>
            <li>啦咘啦哆故事卡正反可点，海量安全知识趣味输入</li>
            <li>跟着赳赳学习收纳整理，培养自主收玩具好习惯</li>
            <li>趣味故事沉浸式引导，提升孩子专注力与规则意识</li>
            <li>贴合低龄宝宝需求，养成良好生活习惯+助力自我保护</li>
          </ul>
        </div>
        <div style="background:#fff;padding:16px;margin-top:8px">
          <div style="font-size:14px;font-weight:700;margin-bottom:10px">商品参数</div>
          <div style="font-size:12px;color:var(--text-2);line-height:2">适用年龄：1-3岁<br>包含：赳赳收玩具绘本1册 + 安全故事卡20张<br>材质：铜版纸 / 环保大豆油墨<br>尺寸：210×210mm<br>配套：支持小布咕点读笔点读</div>
        </div>
      </div>
      <div class="pd-bottom">
        <div class="pd-iconbtn" onclick="switchTab('home')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>首页</div>
        <div class="pd-iconbtn" onclick="showToast('客服咨询')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>客服</div>
        <div class="pd-iconbtn" onclick="showToast('购物车')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>购物车</div>
        <button class="pd-addcart" onclick="showToast('已加入购物车')">加入购物车</button>
        <button class="pd-buy" onclick="showToast('立即抢购')">立即抢购</button>
      </div>
    </div>

    <!-- 奖励金 -->
    <div class="overlay reward-page" id="rewardPage">
      <div style="position:sticky;top:0;background:transparent;z-index:10;padding:12px 16px;display:flex;align-items:center;justify-content:space-between">
        <div class="backbtn" onclick="closePage('reward')" style="padding:0"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
        <span style="font-size:16px;font-weight:700">奖励金当钱花</span>
        <div style="cursor:pointer" onclick="showToast('分享')">↗️</div>
      </div>
      <div class="reward-hero">
        <div class="rbalance"><span class="coin">🪙</span><span class="amount">0</span><span class="unit">奖励金</span></div>
        <div class="rdesc">奖励金可当钱花，100金=1元</div>
      </div>
      <div class="signin-card">
        <div class="sc-title"><span>签到领奖励</span><span class="sgift">连签得好礼</span></div>
        <div class="signin-days">
          <div class="signin-day today"><div class="sday">今天</div><div class="scoin">+20</div></div>
          <div class="signin-day"><div class="sday">明天</div><div class="scoin">+20</div></div>
          <div class="signin-day"><div class="sday">09.06</div><div class="scoin">+20</div></div>
          <div class="signin-day"><div class="sday">09.07</div><div class="scoin">+20</div></div>
          <div class="signin-day"><div class="sday">09.08</div><div class="scoin">+20</div></div>
          <div class="signin-day"><div class="sday">09.09</div><div class="scoin">+20</div></div>
          <div class="signin-day"><div class="sday">09.10</div><div class="scoin">+20</div></div>
        </div>
        <div style="font-size:11px;color:var(--text-3);text-align:center;margin-bottom:10px">按下签到，开启30天连签挑战，成功即可得1000奖励金</div>
        <button class="signin-btn" onclick="showToast('签到成功！获得20奖励金')">立即签到</button>
      </div>
      <div class="reward-tabs"><div class="reward-tab active">0元兑换</div><div class="reward-tab">实物换购</div><div class="reward-tab">免费VIP</div><div class="reward-tab">购物加抵</div></div>
      <div class="coupon-grid">
        <div class="coupon-card" onclick="showToast('兑换成功')"><div class="ctop"><div class="camount"><span>¥</span>20</div><div class="ccond">满99元可用</div></div><div class="cbtn">🪙 299 兑换</div></div>
        <div class="coupon-card" onclick="showToast('兑换成功')"><div class="ctop" style="background:linear-gradient(135deg,#FFE0B2,#FFCC80)"><div class="camount" style="color:#E65100"><span>¥</span>50</div><div class="ccond">满300元立减</div></div><div class="cbtn">🪙 499 兑换</div></div>
        <div class="coupon-card" onclick="showToast('兑换成功')"><div class="ctop" style="background:linear-gradient(135deg,#C8E6C9,#A5D6A7)"><div class="camount" style="color:#2E7D32"><span>¥</span>100</div><div class="ccond">满500元可用</div></div><div class="cbtn">🪙 899 兑换</div></div>
        <div class="coupon-card" onclick="showToast('兑换成功')"><div class="ctop" style="background:linear-gradient(135deg,#F8BBD0,#F48FB1)"><div class="camount" style="color:#AD1457">9.5折</div><div class="ccond">全场通用</div></div><div class="cbtn">🪙 399 兑换</div></div>
      </div>
    </div>

    <!-- 场景播放 -->
    <div class="overlay scene-page" id="scenePage" style="background:linear-gradient(180deg,#6A1B9A,#4A148C)">
      <div style="position:absolute;top:12px;left:16px;z-index:10;cursor:pointer" onclick="closePage('scene')"><svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
      <div class="scene-tabs">
        <div class="scene-tab" onclick="switchScene(this,'活力唤醒','#FF6F00','#E65100')"><div class="sticon">☀️</div><span class="stlabel">活力唤醒</span></div>
        <div class="scene-tab" onclick="switchScene(this,'公主','#E91E63','#C2185B')"><div class="sticon">👸</div><span class="stlabel">公主</span></div>
        <div class="scene-tab active" onclick="switchScene(this,'身体律动','#7B1FA2','#4A148C')"><div class="sticon">💃</div><span class="stlabel">身体律动</span></div>
        <div class="scene-tab" onclick="switchScene(this,'睡前故事','#1565C0','#0D47A1')"><div class="sticon">🌙</div><span class="stlabel">睡前故事</span></div>
        <div class="scene-tab" onclick="switchScene(this,'学说话','#00897B','#004D40')"><div class="sticon">🗣️</div><span class="stlabel">学说话</span></div>
      </div>
      <div class="scene-body">
        <div class="stitle" id="sceneTitle">身体律动</div>
        <div class="sdesc" id="sceneDesc">精选韵律感强且押韵的儿童歌曲，培养节奏感的同时，加强手脑协调！</div>
        <div class="scene-cover" style="background:linear-gradient(135deg,#CE93D8,#AB47BC)">🐼</div>
        <div class="scene-song">娃哈哈 <span class="fav" onclick="this.classList.toggle('active')">☆</span></div>
        <div class="scene-ctrls">
          <div class="sbtn" onclick="showToast('定时关闭')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg></div>
          <div class="sbtn play" onclick="togglePlay()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></div>
          <div class="sbtn" onclick="showToast('投屏到设备')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/></svg></div>
        </div>
        <div class="scene-actions">
          <div class="sabtn" onclick="showToast('已用设备播放')">📱 用设备播放</div>
          <div class="sabtn" onclick="showToast('已收藏至设备')">❤️ 收藏至设备</div>
        </div>
      </div>
    </div>

    <!-- 专区页（新品/故事/英文共用） -->
    <div class="overlay zone-page" id="zonePage">
      <div style="background:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #F5F5F5">
        <div class="backbtn" onclick="closePage('zone')" style="padding:0"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
        <span style="font-size:17px;font-weight:700" id="zoneTitle">新品专区</span>
      </div>
      <div class="zone-body">
        <div class="zone-cats" id="zoneCats"></div>
        <div class="zone-banner" id="zoneBanner" style="background:linear-gradient(135deg,#FFCC80,#FF8A65)">
          <div class="bcontent"><h3 style="font-size:18px">安全警长啦咘啦哆</h3><p style="font-size:12px;opacity:.85">轻松探索 趣味冒险</p></div>
          <div class="bicon">🐶</div>
        </div>
        <div id="zoneContent"></div>
      </div>
    </div>

    <!-- 童书歌单 -->
    <div class="overlay zone-page" id="bookPlaylistPage">
      <div style="background:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #F5F5F5">
        <div class="backbtn" onclick="closePage('bookplaylist')" style="padding:0"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
        <span style="font-size:17px;font-weight:700">童书歌单</span>
      </div>
      <div class="zone-body">
        <div style="margin:12px 16px;height:90px;border-radius:var(--r-lg);background:linear-gradient(135deg,#7E57C2,#5E35B1);display:flex;align-items:center;padding:0 16px;position:relative;overflow:hidden;color:#fff">
          <div><h3 style="font-size:18px;font-weight:800">睡前故事</h3><p style="font-size:11px;opacity:.85;margin-top:2px">枕边好梦精选</p></div>
          <div style="position:absolute;right:12px;font-size:48px;opacity:.8">🌙</div>
        </div>
        <div style="display:flex;justify-content:space-around;padding:0 16px 14px">
          <div class="qentry" onclick="showToast('认知童书')"><div class="qicon" style="background:#E8F5E9">💡</div><span class="qlabel">认知童书</span></div>
          <div class="qentry" onclick="showToast('习惯童书')"><div class="qicon" style="background:#E3F2FD">🪥</div><span class="qlabel">习惯童书</span></div>
          <div class="qentry" onclick="showToast('安全童书')"><div class="qicon" style="background:#FFEBEE">🛡️</div><span class="qlabel">安全童书</span></div>
          <div class="qentry" onclick="showToast('国学童书')"><div class="qicon" style="background:#FFF3E0">✏️</div><span class="qlabel">国学童书</span></div>
          <div class="qentry" onclick="showToast('科学童书')"><div class="qicon" style="background:#F3E5F5">⚗️</div><span class="qlabel">科学童书</span></div>
        </div>
        <div style="padding:0 16px 14px">
          <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px"><span style="background:var(--danger);color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;font-weight:700">NEW</span><span style="font-size:15px;font-weight:700">你好，植物朋友</span></div>
          <p style="font-size:12px;color:var(--text-2);margin-bottom:10px">读故事、看自然、做手工，5200+音频搞定自然探索</p>
          <div class="zone-grid">
            <div class="zgrid-card" onclick="openAlbum(6)"><div class="zgcover" style="background:#A5D6A7">🌳</div><div class="zgname">树木生长的秘密</div></div>
            <div class="zgrid-card" onclick="openAlbum(6)"><div class="zgcover" style="background:#FFE082">🍂</div><div class="zgname">叶子生病了吗</div></div>
            <div class="zgrid-card" onclick="openAlbum(6)"><div class="zgcover" style="background:#F8BBD0">🌸</div><div class="zgname">花粉节特别任务</div></div>
            <div class="zgrid-card" onclick="openAlbum(6)"><div class="zgcover" style="background:#80CBC4">🌿</div><div class="zgname">迷雾森林大危机</div></div>
            <div class="zgrid-card" onclick="openAlbum(6)"><div class="zgcover" style="background:#FFCC80">🌻</div><div class="zgname">谁是草木之王</div></div>
            <div class="zgrid-card" onclick="openAlbum(6)"><div class="zgcover" style="background:#CE93D8">🍄</div><div class="zgname">树林里的神秘</div></div>
          </div>
        </div>
        <div class="sectiontitle"><span>🎓 宝宝启蒙认知大百科</span><span class="more">查看更多 ›</span></div>
        <p style="padding:0 16px;font-size:12px;color:var(--text-2);margin-bottom:10px">24个主题，2100+点读语音，经典启蒙书</p>
      </div>
    </div>

    <!-- 歌单库 -->
    <div class="overlay zone-page" id="playlistLibPage">
      <div style="background:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #F5F5F5">
        <div class="backbtn" onclick="closePage('playlistlib')" style="padding:0"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
        <span style="font-size:17px;font-weight:700">歌单库</span>
      </div>
      <div class="zone-body">
        <div style="margin:12px 16px;background:linear-gradient(135deg,#E3F2FD,#BBDEFB);border-radius:var(--r-lg);padding:16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer">
          <div><div style="font-size:15px;font-weight:700;color:#1565C0">添加歌单到设备</div><div style="font-size:11px;color:var(--text-2);margin-top:3px">自定义设备的歌单列表</div></div>
          <div style="font-size:36px">🎵</div>
        </div>
        <div class="sectiontitle" style="padding-top:0"><span><span style="background:var(--danger);color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;margin-right:6px">NEW</span>热门歌单</span></div>
        <p style="padding:0 16px;font-size:12px;color:var(--text-2);margin-bottom:10px">精选在线歌单，下载到设备随时听</p>
        <div class="zone-grid" style="padding-bottom:14px">
          <div class="zgrid-card" onclick="showToast('音乐剧场')"><div class="zgcover" style="background:#FFCC80">🎭</div><div class="zgname">音乐剧场</div></div>
          <div class="zgrid-card" onclick="showToast('枕边小狐狸')"><div class="zgcover" style="background:#CE93D8">🦊</div><div class="zgname">枕边小狐狸</div></div>
          <div class="zgrid-card" onclick="showToast('疯狂怪兽车')"><div class="zgcover" style="background:#EF5350">🚗</div><div class="zgname">疯狂怪兽车</div></div>
        </div>
        <div class="sectiontitle" style="padding-top:0">🔥 必备歌单榜</div>
        <div class="zone-subtabs" style="padding:0 16px 10px"><div class="zone-subtab active">必备经典歌单</div><div class="zone-subtab">新品童书歌单</div><div class="zone-subtab">VIP精选</div><div class="zone-subtab">必备童书</div></div>
        <div class="zone-list">
          <div class="zlist-item" onclick="showToast('律动儿歌')"><div class="zcover" style="background:#81D4FA">🎵</div><div class="zinfo"><div class="zname">律动儿歌</div><div class="zdesc">跟随音乐舞动身体 · 638.5万播放</div></div></div>
          <div class="zlist-item" onclick="showToast('枕边故事纯享')"><div class="zcover" style="background:#B39DDB">🌙</div><div class="zinfo"><div class="zname">枕边故事纯享①</div><div class="zdesc">无结尾音乐人声纯享版 · 127.7万播放</div></div></div>
          <div class="zlist-item" onclick="showToast('好情绪好品格')"><div class="zcover" style="background:#A5D6A7">😊</div><div class="zinfo"><div class="zname">好情绪好品格养成</div><div class="zdesc">品格情绪培养 · 35.0万播放</div></div></div>
        </div>
        <div class="sectiontitle">👑 VIP专享歌单</div>
        <p style="padding:0 16px;font-size:12px;color:var(--text-2);margin-bottom:10px">精选付费歌单内容，VIP用户免费畅享</p>
        <div class="zone-grid">
          <div class="zgrid-card" onclick="openVIP()"><div class="zgcover" style="background:#FFE082"><span style="position:absolute;top:4px;right:4px;font-size:9px;background:var(--purple);color:#fff;padding:1px 5px;border-radius:3px;font-weight:700">VIP</span>🎵</div><div class="zgname">枕边故事</div></div>
          <div class="zgrid-card" onclick="openVIP()"><div class="zgcover" style="background:#FFAB91"><span style="position:absolute;top:4px;right:4px;font-size:9px;background:var(--purple);color:#fff;padding:1px 5px;border-radius:3px;font-weight:700">VIP</span>🎶</div><div class="zgname">音乐中的故事</div></div>
          <div class="zgrid-card" onclick="openVIP()"><div class="zgcover" style="background:#CE93D8"><span style="position:absolute;top:4px;right:4px;font-size:9px;background:var(--purple);color:#fff;padding:1px 5px;border-radius:3px;font-weight:700">VIP</span>🌙</div><div class="zgname">枕边故事</div></div>
        </div>
      </div>
    </div>

    <!-- 熏听馆 -->
    <div class="overlay zone-page" id="listeningPage">
      <div style="background:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #F5F5F5">
        <div class="backbtn" onclick="closePage('listening')" style="padding:0"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
        <span style="font-size:17px;font-weight:700">熏听馆</span>
      </div>
      <div class="zone-body">
        <div class="listen-top">
          <div class="listen-card" onclick="showToast('我的熏听计划')"><div class="lnum">0</div><div class="llabel">我的计划</div></div>
          <div class="listen-card" onclick="showToast('我的收藏')"><div class="lnum">0</div><div class="llabel">我的收藏</div></div>
        </div>
        <div class="listen-guide" onclick="showToast('新手指南')"><div class="gl">📢 新手指南</div><div class="gr">点击查看：如何添加熏听计划 ›</div></div>
        <div class="sectiontitle" style="padding-top:0">🎯 启蒙第一步</div>
        <div class="listen-grid2">
          <div class="lgcard" onclick="showToast('古诗欢唱入门')"><div class="lgcover" style="background:#FFCC80"><span class="lgtag" style="background:var(--danger)">热</span>📜</div><div class="lginfo"><div class="lgname">古诗欢唱·入门听</div><div class="lgmeta">5天熟悉7首古诗 · 7万</div></div></div>
          <div class="lgcard" onclick="showToast('乐赏古诗')"><div class="lgcover" style="background:#A5D6A7"><span class="lgtag" style="background:var(--info)">新</span>🎵</div><div class="lginfo"><div class="lgname">乐赏古诗（一）</div><div class="lgmeta">跟着音乐学古诗 · 2589</div></div></div>
          <div class="lgcard" onclick="showToast('航天百科')"><div class="lgcover" style="background:#90CAF9"><span class="lgtag" style="background:var(--info)">新</span>🚀</div><div class="lginfo"><div class="lgname">航天百科</div><div class="lgmeta">15个航天科普 · 2364</div></div></div>
          <div class="lgcard" onclick="showToast('成语故事')"><div class="lgcover" style="background:#FFAB91">🦊</div><div class="lginfo"><div class="lgname">成语故事（五）</div><div class="lgmeta">中文表达成语故事 · 2228</div></div></div>
        </div>
        <div class="sectiontitle">🌙 养成良好作息</div>
        <div class="listen-plan-card" onclick="showToast('添加熏听计划')">
          <div class="lpcover" style="background:#CE93D8">🐱</div>
          <div class="lpinfo"><div class="lpname">枕边故事·养成好习惯</div><div class="lpdesc">精选14个伴着舒缓音乐的温馨睡前故事，为孩子营造安心的睡眠氛围。</div><span class="lpbtn">去添加</span><span class="lppeople">5442个小朋友已参与</span></div>
        </div>
        <div class="sectiontitle">🔬 认知百科</div>
        <p style="padding:0 16px;font-size:12px;color:var(--text-2);margin-bottom:10px">帮助孩子建立认知与探秘大千世界</p>
      </div>
    </div>

    <!-- 公仔馆 -->
    <div class="overlay zone-page" id="dollPage">
      <div style="background:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #F5F5F5">
        <div class="backbtn" onclick="closePage('doll')" style="padding:0"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
        <span style="font-size:17px;font-weight:700">公仔馆</span>
        <span style="margin-left:auto;font-size:13px;color:var(--text-2);cursor:pointer" onclick="showToast('帮助')">帮助</span>
      </div>
      <div class="zone-body">
        <div class="doll-nfc">
          <div class="nfctitle">碰一碰添加公仔</div>
          <div class="nfcdesc">添加后可永久播放独家的公仔歌单</div>
          <div class="nfcicon"><div class="hand">✋</div><div class="phone"><div class="nfcsymbol">NFC</div></div></div>
          <button class="addbtn" onclick="showToast('请将公仔贴近手机NFC区域')">立即添加</button>
        </div>
        <div style="padding:0 16px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px"><span style="font-size:15px;font-weight:700">所有公仔</span><span style="font-size:12px;color:var(--primary);cursor:pointer">+ 立即添加</span></div>
        <div class="doll-grid">
          <div class="doll-card" onclick="showToast('启蒙小甜椒')"><div class="dcover" style="background:#FFAB91"><span class="dbadge">公仔臻享</span>👧</div><div class="dname">启蒙小甜椒</div></div>
          <div class="doll-card" onclick="showToast('启蒙小太阳')"><div class="dcover" style="background:#FFE082"><span class="dbadge">公仔臻享</span>👶</div><div class="dname">启蒙小太阳</div></div>
          <div class="doll-card" onclick="showToast('安全警长')"><div class="dcover" style="background:#90CAF9"><span class="dbadge">公仔臻享</span>🐶</div><div class="dname">安全警长</div></div>
          <div class="doll-card" onclick="showToast('安全警员')"><div class="dcover" style="background:#B0BEC5"><span class="dbadge">公仔臻享</span>🐱</div><div class="dname">安全警员</div></div>
          <div class="doll-card" onclick="showToast('快乐小太阳')"><div class="dcover" style="background:#FFCC80"><span class="dbadge">公仔臻享</span>🧒</div><div class="dname">快乐小太阳</div></div>
          <div class="doll-card" onclick="showToast('枕边奇奇')"><div class="dcover" style="background:#E1BEE7"><span class="dbadge">公仔臻享</span>🐼</div><div class="dname">枕边奇奇</div></div>
        </div>
      </div>
    </div>

    <!-- 配网 -->
    <div class="overlay wifi-page" id="wifiPage">
      <div style="padding:14px 16px;display:flex;align-items:center;justify-content:space-between">
        <div style="cursor:pointer;font-size:22px" onclick="closePage('wifi')">✕</div>
        <span style="font-size:16px;font-weight:700">配置网络</span>
        <div style="width:22px"></div>
      </div>
      <div class="wifi-steps">
        <div class="wifi-step active"><div class="sdot"></div></div>
        <div class="wifi-step"><div class="sdot"></div></div>
        <div class="wifi-step"><div class="sdot"></div></div>
        <div class="wifi-step"><div class="sdot"></div></div>
        <div class="wifi-step"><div class="sdot"></div></div>
      </div>
      <div class="wifi-body">
        <h3>请先选择配网的产品</h3>
        <div class="wifi-product selected" style="background:#E8F5E9" onclick="selectWifiProduct(this)">
          <div class="wpicon" style="background:#B2DFDB">🖊️</div>
          <div class="wpname">点读笔</div>
        </div>
        <div class="wifi-product" style="background:#FFF8E1" onclick="selectWifiProduct(this)">
          <div class="wpicon" style="background:#FFE0B2">🔊</div>
          <div class="wpname">故事机</div>
        </div>
        <div style="text-align:center;margin-top:30px"><button onclick="showToast('进入下一步：输入WiFi密码')" style="padding:12px 48px;background:var(--primary);color:#fff;border:none;border-radius:24px;font-size:15px;font-weight:700;cursor:pointer">下一步</button></div>
      </div>
    </div>

    <!-- 最近播放 -->
    <div class="overlay zone-page" id="recentPage">
      <div style="background:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #F5F5F5">
        <div class="backbtn" onclick="closePage('recent')" style="padding:0"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
        <span style="font-size:17px;font-weight:700">最近播放</span>
        <span style="margin-left:auto;font-size:14px;color:var(--text-2);cursor:pointer" onclick="showToast('编辑播放记录')">编辑</span>
      </div>
      <div class="zone-body">
        <div class="recent-group">
          <div class="rglabel">昨天</div>
          <div class="recent-item" onclick="openAlbum(1)"><div class="ricover" style="background:#A5D6A7">🚗</div><div class="riinfo"><div class="riname">交通工具认知</div><div class="riprogress">共20集 听到第1集</div></div></div>
          <div class="recent-item" onclick="openAlbum(2)"><div class="ricover" style="background:#90CAF9">🐶</div><div class="riinfo"><div class="riname">常见的动物</div><div class="riprogress">共40集 听到第1集</div></div></div>
          <div class="recent-item" onclick="openAlbum(4)"><div class="ricover" style="background:#CE93D8">📜</div><div class="riinfo"><div class="riname">古诗词 | 欢唱版</div><div class="riprogress">共115首 听到第2首</div></div></div>
          <div class="recent-item" onclick="openAlbum(3)"><div class="ricover" style="background:#FFCC80">🐥</div><div class="riinfo"><div class="riname">小鸡敦敦·三字儿歌学说话</div><div class="riprogress">共97首 听到第1首</div></div></div>
        </div>
      </div>
    </div>

    <!-- 家长守护 -->
    <div class="modaloverlay" id="parentModal">
      <div class="modalsheet">
        <div class="modalclose" onclick="closeParentControl()">✕</div>
        <div class="modaltitle">🛡️ 家长守护中心</div>
        <div class="switchrow"><div><div class="swl">每日收听时长限制</div><div class="swd">超过时长自动暂停播放</div></div><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
        <div class="switchrow"><div><div class="swl">夜间禁用模式</div><div class="swd">22:00 - 06:00 禁止使用</div></div><div class="switch" onclick="this.classList.toggle('on')"></div></div>
        <div class="switchrow"><div><div class="swl">内容适龄过滤</div><div class="swd">自动屏蔽不适龄内容</div></div><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
        <div class="switchrow"><div><div class="swl">跳过片头片尾</div><div class="swd">自动跳过每集开头和结尾</div></div><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
        <div class="switchrow"><div><div class="swl">收听数据报告</div><div class="swd">每周生成孩子收听分析</div></div><div class="switch" onclick="this.classList.toggle('on')"></div></div>
      </div>
    </div>

    <div class="toast" id="toast"></div>
  </div>
</div>

<script>
const albums=[
  {id:1,name:'猴子警长探案记',icon:'🐵',color:'linear-gradient(135deg,#FFCC80,#FF8A65)',meta:'120集·5.2亿播放',age:'5-8',desc:'科学探案·逻辑推理'},
  {id:2,name:'安全警长啦咘啦哆',icon:'🐶',color:'linear-gradient(135deg,#90CAF9,#42A5F5)',meta:'80集·3.8亿播放',age:'3-6',desc:'安全教育·生活常识'},
  {id:3,name:'宝宝巴士儿歌大全',icon:'🎵',color:'linear-gradient(135deg,#F48FB1,#EC407A)',meta:'500首·12亿播放',age:'0-3',desc:'儿歌启蒙·磨耳朵'},
  {id:4,name:'国学启蒙·三字经',icon:'📖',color:'linear-gradient(135deg,#A5D6A7,#66BB6A)',meta:'60集·2.1亿播放',age:'3-6',desc:'国学经典·启蒙诵读'},
  {id:5,name:'睡前哄睡故事',icon:'🌙',color:'linear-gradient(135deg,#B39DDB,#7E57C2)',meta:'200集·8.6亿播放',age:'0-3',desc:'哄睡安抚·美梦陪伴'},
  {id:6,name:'恐龙百科大探险',icon:'🦕',color:'linear-gradient(135deg,#80CBC4,#26A69A)',meta:'45集·1.5亿播放',age:'6-12',desc:'科普百科·自然探索'},
];
const hotAlbums=[
  {name:'经典儿歌新唱',icon:'👧',color:'linear-gradient(135deg,#FFCC80,#FF8A65)',tag:'新',meta:'儿歌·200首'},
  {name:'乐引诗意',icon:'📜',color:'linear-gradient(135deg,#A5D6A7,#66BB6A)',tag:'新',meta:'古诗·30首'},
  {name:'音乐剧场',icon:'🎭',color:'linear-gradient(135deg,#90CAF9,#42A5F5)',tag:'新',meta:'音乐故事'},
  {name:'安全警长',icon:'🐶',color:'linear-gradient(135deg,#FFE082,#FFCA28)',tag:'',meta:'安全教育'},
];
const newAlbums=[
  {name:'安全警长·黄金沙漠',icon:'🐶',color:'linear-gradient(135deg,#FFCC80,#FF8A65)',tag:'新',meta:'冒险故事'},
  {name:'乐引诗意',icon:'📜',color:'linear-gradient(135deg,#A5D6A7,#66BB6A)',tag:'新',meta:'古诗唱诵'},
  {name:'晚安小熊',icon:'🐻',color:'linear-gradient(135deg,#D7CCC8,#BCAAA4)',tag:'',meta:'哄睡故事'},
];
const catList=[
  {name:'睡前故事',icon:'🐼',color:'#B39DDB',plays:'3.5亿',desc:'轻松哄睡，伴宝贝入眠',device:false},
  {name:'我是兔一一',icon:'🐰',color:'#F8BBD0',plays:'1.2亿',desc:'好听有趣的儿童生活体验',device:false},
  {name:'宝宝三字儿歌',icon:'👶',color:'#81D4FA',plays:'9920万',desc:'抓住宝宝语言敏感期',device:false},
  {name:'超级赳赳故事会',icon:'🧒',color:'#FFCC80',plays:'9920万',desc:'经典童话，亲子伴读',device:false},
  {name:'枕边故事',icon:'👩',color:'#CE93D8',plays:'2070万',desc:'独家原创睡前故事',device:false},
  {name:'三字经',icon:'🐼',color:'#A5D6A7',plays:'188万',desc:'家喻户晓的国学',device:true},
  {name:'点心幼儿园',icon:'🧁',color:'#F8BBD0',plays:'2615万',desc:'和分离焦虑说再见',device:true},
  {name:'恐龙世界',icon:'🦕',color:'#80CBC4',plays:'1.5亿',desc:'探秘恐龙时代',device:false},
];
const products=[
  {name:'【1-3岁】好习惯+安全力双启蒙包',icon:'📚',color:'#FFCC80',price:29.9,sales:'已售1.2万',tag:'热销',combo:'组合'},
  {name:'【1-3岁】JoJo英语启蒙Level 0',icon:'🎈',color:'#FFE082',price:59,sales:'已售8900',tag:'新品',combo:'15册'},
  {name:'小布咕点读笔G4 标准版',icon:'🖊️',color:'#A5D6A7',price:299,sales:'已售2.3万',tag:'热销',combo:''},
  {name:'宝宝巴士绘本套装(20册)',icon:'📚',color:'#FFAB91',price:168,sales:'已售5.6万',tag:'',combo:'20册'},
  {name:'小布咕智能故事机',icon:'🎙️',color:'#90CAF9',price:199,sales:'已售1.8万',tag:'',combo:''},
  {name:'猴子警长公仔套装',icon:'🧸',color:'#F8BBD0',price:89,sales:'已售3.2万',tag:'限量',combo:''},
];
const tracks=[
  {name:'第1集：神秘的盗窃案',dur:'15:30',free:true},
  {name:'第2集：脚印里的秘密',dur:'14:20',free:true},
  {name:'第3集：谁偷了彩虹糖',dur:'16:05',free:false},
  {name:'第4集：图书馆迷案',dur:'15:45',free:false},
  {name:'第5集：消失的证据',dur:'14:50',free:false},
  {name:'第6集：科学实验风波',dur:'16:20',free:false},
  {name:'第7集：森林里的怪声',dur:'15:10',free:false},
  {name:'第8集：真相只有一个',dur:'17:00',free:false},
];
const devicePlaylists=[
  {name:'睡前安抚歌单',count:'25首',icon:'🌙',color:'#B39DDB'},
  {name:'晨起活力儿歌',count:'18首',icon:'☀️',color:'#FFD54F'},
  {name:'出门磨耳朵',count:'32首',icon:'🚗',color:'#81D4FA'},
];
let state={tab:'home',playing:false,track:0,deviceBound:false};

function init(){
  renderHotScroll();renderNewScroll();renderCategoryList();renderMallProducts();renderTracks();renderDevicePlaylists();
  updateTime();setInterval(updateTime,30000);
  document.querySelectorAll('#homeTabs .htab').forEach(t=>t.onclick=function(){
    document.querySelectorAll('#homeTabs .htab').forEach(x=>x.classList.remove('active'));this.classList.add('active');
    if(this.dataset.cat==='safety')openPage('scene');
  });
  document.querySelectorAll('.filterrow').forEach(row=>{
    row.querySelectorAll('.filterchip').forEach(c=>c.onclick=function(){
      row.querySelectorAll('.filterchip').forEach(x=>x.classList.remove('active'));this.classList.add('active');
    });
  });
  document.querySelectorAll('#mallTabs .mall-tab').forEach(t=>t.onclick=function(){
    document.querySelectorAll('#mallTabs .mall-tab').forEach(x=>x.classList.remove('active'));this.classList.add('active');
  });
  document.querySelectorAll('#vipPlans .vip-plan').forEach(p=>p.onclick=function(){
    document.querySelectorAll('#vipPlans .vip-plan').forEach(x=>x.classList.remove('active'));this.classList.add('active');
  });
}
function updateTime(){const n=new Date();document.getElementById('statusTime').textContent=`${String(n.getHours()).padStart(2,'0')}:${String(n.getMinutes()).padStart(2,'0')}`}
function renderHotScroll(){document.getElementById('hotScroll').innerHTML=hotAlbums.map(a=>`<div class="hscard" onclick="openAlbum(1)"><div class="hscover" style="background:${a.color}">${a.icon}${a.tag?`<span class="newtag">${a.tag}</span>`:''}</div><div class="hsname">${a.name}</div><div class="hsmeta">${a.meta}</div></div>`).join('')}
function renderNewScroll(){document.getElementById('newScroll').innerHTML=newAlbums.map(a=>`<div class="hscard" onclick="openAlbum(1)"><div class="hscover" style="background:${a.color}">${a.icon}${a.tag?`<span class="newtag">${a.tag}</span>`:''}</div><div class="hsname">${a.name}</div><div class="hsmeta">${a.meta}</div></div>`).join('')}
function renderCategoryList(){document.getElementById('categoryList').innerHTML=catList.map(a=>`<div class="alistitem" onclick="openAlbum(1)"><div class="acover" style="background:${a.color}">${a.icon}<span class="plays">▶${a.plays}</span></div><div class="ainfo"><div class="aname">${a.name}</div><div class="adesc">${a.desc}</div>${a.device?'<span class="adevice">可添加到设备</span>':''}</div></div>`).join('')}
function renderMallProducts(){document.getElementById('mallProducts').innerHTML=products.map(p=>`<div class="pcard" onclick="openProductDetail()"><div class="pcover" style="background:${p.color}">${p.tag?`<span class="ptag" style="background:var(--danger)">${p.tag}</span>`:''}${p.combo?`<span class="pcombo">${p.combo}</span>`:''}${p.icon}</div><div class="pinfo"><div class="pname">${p.name}</div><div class="pprice"><span>¥</span>${p.price}</div><div class="psales">${p.sales}</div></div></div>`).join('')}
function renderTracks(){document.getElementById('trackList').innerHTML=tracks.map((t,i)=>`<div class="trackitem ${i===0?'playing':''}" onclick="playTrack(${i})"><div class="tnum">${i+1}</div><div class="tinfo"><div class="tname">${t.name}</div></div>${t.free?'<span class="tfree">免费</span>':'<span class="tvip">VIP</span>'}<span class="tdur">${t.dur}</span></div>`).join('')}
function renderDevicePlaylists(){document.getElementById('devicePlaylists').innerHTML=devicePlaylists.map(p=>`<div style="display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:12px;margin-bottom:8px;box-shadow:var(--shadow-sm);cursor:pointer"><div style="width:44px;height:44px;border-radius:10px;background:${p.color};display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0">${p.icon}</div><div style="flex:1"><div style="font-size:14px;font-weight:600">${p.name}</div><div style="font-size:11px;color:var(--text-3);margin-top:2px">${p.count} · 已同步到设备</div></div><button style="padding:6px 14px;border-radius:14px;background:var(--primary-light);color:var(--primary-dark);font-size:12px;font-weight:600;border:none;cursor:pointer" onclick="event.stopPropagation();showToast('已推送至点读笔')">推送</button></div>`).join('')}

function switchTab(tab){
  state.tab=tab;
  document.querySelectorAll('.view').forEach(v=>v.classList.remove('active'));
  document.querySelector(`.view[data-route="${tab}"]`).classList.add('active');
  document.querySelectorAll('.navitem').forEach(n=>n.classList.remove('active'));
  document.querySelector(`.navitem[data-tab="${tab}"]`).classList.add('active');
  document.getElementById('appContent').scrollTop=0;
  closeAllOverlays();
}
function openPage(page){
  const map={category:()=>switchTab('category'),reward:'rewardPage',scene:'scenePage',bookplaylist:'bookPlaylistPage',playlistlib:'playlistLibPage',listening:'listeningPage',doll:'dollPage',wifi:'wifiPage',recent:'recentPage'};
  if(typeof map[page]==='function')map[page]();
  else document.getElementById(map[page]).classList.add('show');
}
function closePage(page){
  const map={reward:'rewardPage',scene:'scenePage',bookplaylist:'bookPlaylistPage',playlistlib:'playlistLibPage',listening:'listeningPage',doll:'dollPage',wifi:'wifiPage',recent:'recentPage',zone:'zonePage'};
  document.getElementById(map[page]).classList.remove('show');
}
function closeAllOverlays(){['fullPlayer','vipPage','albumDetail','searchPage','productDetail','rewardPage','scenePage','zonePage','bookPlaylistPage','playlistLibPage','listeningPage','dollPage','wifiPage','recentPage','parentModal'].forEach(id=>document.getElementById(id).classList.remove('show'))}

function openZone(type){
  const cats={new:[{icon:'📊',label:'排行榜',color:'#E3F2FD'},{icon:'🎵',label:'儿歌',color:'#FFF3E0'},{icon:'📖',label:'故事',color:'#F3E5F5'},{icon:'📜',label:'国学',color:'#E8F5E9'}],story:[{icon:'🏫',label:'校园',color:'#FFF3E0'},{icon:'🔍',label:'推理',color:'#E3F2FD'},{icon:'🗺️',label:'冒险',color:'#FCE4EC'},{icon:'💡',label:'百科',color:'#FFF8E1'}],english:[{icon:'🔤',label:'字母',color:'#E3F2FD'},{icon:'🎵',label:'童谣',color:'#F3E5F5'},{icon:'📖',label:'绘本',color:'#E8F5E9'},{icon:'🗣️',label:'对话',color:'#FFF3E0'}]};
  const titles={new:'新品专区',story:'故事专区',english:'英文专区'};
  document.getElementById('zoneTitle').textContent=titles[type];
  document.getElementById('zoneCats').innerHTML=cats[type].map(c=>`<div class="zone-cat" onclick="showToast('${c.label}')"><div class="zicon" style="background:${c.color}">${c.icon}</div><span class="zlabel">${c.label}</span></div>`).join('');
  let content='';
  if(type==='new'){
    content=`<div class="sectiontitle" style="padding-top:0">三字儿歌</div><div class="zone-subtabs" style="padding:0 16px 10px"><div class="zone-subtab active">激发表达欲</div><div class="zone-subtab">发音更准确</div><div class="zone-subtab">词汇大爆炸</div><div class="zone-subtab">连词成句</div></div><div class="zone-list"><div class="zlist-item" onclick="openAlbum(3)"><div class="zcover" style="background:#FFCC80"><span class="zbadge">补录</span>👩</div><div class="zinfo"><div class="zname">叫妈妈</div><div class="zdesc">学说：妈妈</div></div></div><div class="zlist-item" onclick="openAlbum(3)"><div class="zcover" style="background:#FFAB91"><span class="zbadge">补录</span>👨</div><div class="zinfo"><div class="zname">找爸爸</div><div class="zdesc">学说：爸爸</div></div></div><div class="zlist-item" onclick="openAlbum(3)"><div class="zcover" style="background:#A5D6A7"><span class="zbadge">补录</span>👵</div><div class="zinfo"><div class="zname">外婆好</div><div class="zdesc">学说：外婆</div></div></div></div><div class="sectiontitle">本月更新</div><div class="hothscroll" style="padding:0 16px 14px">${newAlbums.map(a=>`<div class="hscard" onclick="openAlbum(1)"><div class="hscover" style="background:${a.color}">${a.icon}${a.tag?`<span class="newtag">${a.tag}</span>`:''}</div><div class="hsname">${a.name}</div></div>`).join('')}</div>`;
  }else if(type==='story'){
    content=`<div class="sectiontitle" style="padding-top:0">姓氏故事</div><div class="zone-subtabs" style="padding:0 16px 10px"><div class="zone-subtab active">吴姓</div><div class="zone-subtab">赵姓</div><div class="zone-subtab">蔡姓</div><div class="zone-subtab">陈姓</div><div class="zone-subtab">黄姓</div><div class="zone-subtab">林姓</div></div><div class="zone-list"><div class="zlist-item" onclick="openAlbum(1)"><div class="zcover" style="background:#FFE082">🐥</div><div class="zinfo"><div class="zname">【吴姓·故事】智·吴道子日画嘉...</div><div class="zdesc">吴带当风</div></div></div><div class="zlist-item" onclick="openAlbum(1)"><div class="zcover" style="background:#FFCC80">🐥</div><div class="zinfo"><div class="zname">【吴姓·故事】义·吴兢不改史</div><div class="zdesc">唐朝史官秉笔直书</div></div></div><div class="zlist-item" onclick="openAlbum(1)"><div class="zcover" style="background:#FFAB91">🐥</div><div class="zinfo"><div class="zname">【吴姓·故事】信·吴隐之饮贪泉</div><div class="zdesc">试使夷齐饮，终当不易心</div></div></div></div><div class="sectiontitle">成长中的故事 <span class="more">查看更多 ›</span></div><div class="zone-grid"><div class="zgrid-card" onclick="openAlbum(1)"><div class="zgcover" style="background:#F8BBD0">🦎</div><div class="zgname">斑点龙朋友们</div></div><div class="zgrid-card" onclick="openAlbum(1)"><div class="zgcover" style="background:#A5D6A7">🥦</div><div class="zgname">蔬菜超人2</div></div><div class="zgrid-card" onclick="openAlbum(1)"><div class="zgcover" style="background:#FFE082">🐭</div><div class="zgname">三只老鼠</div></div></div>`;
  }else{
    content=`<div class="sectiontitle" style="padding-top:0">英文童谣</div><div class="zone-list"><div class="zlist-item" onclick="openAlbum(7)"><div class="zcover" style="background:#FFCC80"><span class="zbadge">一起唱经典</span>👶</div><div class="zinfo"><div class="zname">Are You Sleeping</div><div class="zdesc">来自童书《欢唱英文童谣》</div></div></div><div class="zlist-item" onclick="openAlbum(7)"><div class="zcover" style="background:#FFE082"><span class="zbadge">一起唱经典</span>👨</div><div class="zinfo"><div class="zname">Baby,Baby.Yes,Papa?</div><div class="zdesc">来自童书《欢唱英文童谣》</div></div></div><div class="zlist-item" onclick="openAlbum(7)"><div class="zcover" style="background:#A5D6A7"><span class="zbadge">一起认知</span>🐤</div><div class="zinfo"><div class="zname">Five Little Ducks</div><div class="zdesc">来自童书《欢唱英文童谣》</div></div></div></div><div class="sectiontitle"><span style="background:var(--danger);color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;margin-right:6px">NEW</span>中英双语</div><div class="zone-grid"><div class="zgrid-card" onclick="openAlbum(2)"><div class="zgcover" style="background:#90CAF9"><span class="zgnew">新品</span>🐶</div><div class="zgname">安全警长啦...</div></div><div class="zgrid-card" onclick="openAlbum(1)"><div class="zgcover" style="background:#A5D6A7">🥦</div><div class="zgname">蔬菜超人</div></div><div class="zgrid-card" onclick="openAlbum(1)"><div class="zgcover" style="background:#FFCC80">🐵</div><div class="zgname">猴子警长探...</div></div></div>`;
  }
  document.getElementById('zoneContent').innerHTML=content;
  document.getElementById('zonePage').classList.add('show');
}

function togglePlay(){
  state.playing=!state.playing;
  const icon=state.playing?'<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>':'<path d="M8 5v14l11-7z"/>';
  document.getElementById('miniPlayIcon').innerHTML=icon;
  document.getElementById('fpPlayIcon').innerHTML=icon;
  showToast(state.playing?'开始播放':'已暂停');
}
function prevTrack(){state.track=(state.track-1+tracks.length)%tracks.length;updateNowPlaying();showToast('上一首')}
function nextTrack(){state.track=(state.track+1)%tracks.length;updateNowPlaying();showToast('下一首')}
function updateNowPlaying(){const t=tracks[state.track];document.getElementById('miniTitle').textContent=t.name;document.getElementById('fpTitle').textContent=t.name}
function playTrack(i){state.track=i;document.querySelectorAll('.trackitem').forEach((el,idx)=>el.classList.toggle('playing',idx===i));updateNowPlaying();if(!state.playing)togglePlay()}
function playAlbum(){state.track=0;document.querySelectorAll('.trackitem').forEach((el,i)=>el.classList.toggle('playing',i===0));updateNowPlaying();closeAlbumDetail();if(!state.playing)togglePlay()}

function openFullPlayer(){document.getElementById('fullPlayer').classList.add('show')}
function closeFullPlayer(){document.getElementById('fullPlayer').classList.remove('show')}
function openVIP(){document.getElementById('vipPage').classList.add('show')}
function closeVIP(){document.getElementById('vipPage').classList.remove('show')}
function openSearch(){document.getElementById('searchPage').classList.add('show');setTimeout(()=>document.getElementById('searchInput').focus(),100)}
function closeSearch(){document.getElementById('searchPage').classList.remove('show')}
function doSearch(t){document.getElementById('searchInput').value=t;showToast(`搜索：${t}`);setTimeout(closeSearch,800)}
function openAlbum(id){
  const a=albums.find(x=>x.id===id)||albums[0];
  document.getElementById('adCover').textContent=a.icon;
  document.getElementById('adCover').style.background=a.color;
  document.getElementById('adTitle').textContent=a.name;
  document.getElementById('adMeta').innerHTML=`${a.desc}<br>${a.meta}<br>适合${a.age}岁`;
  document.getElementById('adHeader').style.background=a.color;
  document.getElementById('albumDetail').classList.add('show');
}
function closeAlbumDetail(){document.getElementById('albumDetail').classList.remove('show')}
function openProductDetail(){document.getElementById('productDetail').classList.add('show')}
function closeProductDetail(){document.getElementById('productDetail').classList.remove('show')}
function openParentControl(){document.getElementById('parentModal').classList.add('show')}
function closeParentControl(){document.getElementById('parentModal').classList.remove('show')}

function toggleChildLock(el){const icon=el.querySelector('.dci'),label=el.querySelector('.dcl');if(icon.textContent==='🔒'){icon.textContent='🔓';label.textContent='已解锁';showToast('童锁已关闭')}else{icon.textContent='🔒';label.textContent='童锁';showToast('童锁已开启')}}
function toggleFav(el){el.classList.toggle('active');showToast(el.classList.contains('active')?'已收藏':'已取消收藏')}
function toggleDeviceState(){state.deviceBound=!state.deviceBound;document.getElementById('deviceEmptyState').style.display=state.deviceBound?'none':'block';document.getElementById('deviceBoundState').style.display=state.deviceBound?'block':'none';showToast(state.deviceBound?'已切换到：已绑定设备状态':'已切换到：未绑定设备状态')}
function filterMallAge(el){document.querySelectorAll('.mall-age .ageitem').forEach(a=>a.style.opacity='1');el.style.opacity='0.6';showToast('筛选年龄：'+el.querySelector('.agelabel').textContent)}
function selectWifiProduct(el){document.querySelectorAll('.wifi-product').forEach(p=>p.classList.remove('selected'));el.classList.add('selected')}
function switchScene(el,title,c1,c2){document.querySelectorAll('.scene-tab').forEach(t=>t.classList.remove('active'));el.classList.add('active');document.getElementById('sceneTitle').textContent=title;document.getElementById('scenePage').style.background=`linear-gradient(180deg,${c1},${c2})`}
function seekProgress(e){const rect=e.currentTarget.getBoundingClientRect();const pct=Math.max(0,Math.min(100,Math.round((e.clientX-rect.left)/rect.width*100)));document.getElementById('fpProgressFill').style.width=pct+'%';const total=930,cur=Math.round(total*pct/100);document.getElementById('fpCurrent').textContent=`${String(Math.floor(cur/60)).padStart(2,'0')}:${String(cur%60).padStart(2,'0')}`}

let toastTimer=null;
function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');clearTimeout(toastTimer);toastTimer=setTimeout(()=>t.classList.remove('show'),1600)}
init();
</script>
</body>
</html>