<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#6C5CE7;--primary-light:#A29BFE;--primary-dark:#5A4BD1;
  --accent:#FF6B6B;--accent-light:#FF8E8E;
  --gold:#FDCB6E;--gold-dark:#E6B84D;
  --green:#00B894;--green-light:#55EFC4;
  --bg:#F8F9FD;--card:#FFFFFF;
  --text:#2D3436;--text-secondary:#636E72;--text-light:#B2BEC3;
  --border:#E8ECF1;
  --shadow:0 2px 12px rgba(108,92,231,.08);
  --shadow-lg:0 8px 32px rgba(108,92,231,.12);
  --radius:16px;--radius-sm:10px;--radius-xs:6px;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;padding-bottom:80px}
a{color:var(--primary);text-decoration:none}
button{border:none;cursor:pointer;font-family:inherit;font-size:inherit;transition:all .2s}
button:active{transform:scale(.97)}
input,select{font-family:inherit;font-size:inherit;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;outline:none;transition:border .2s;width:100%;background:#fff}
input:focus,select:focus{border-color:var(--primary)}
input::placeholder{color:var(--text-light)}

.page{display:none;min-height:100vh;animation:fadeIn .3s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== LOGIN ===== */
/* ===== VIDEO SPLASH (开屏动画) ===== */
.splash-page{position:fixed;inset:0;z-index:9999;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center}
.splash-page.hidden{display:none}
.splash-video{width:100%;height:100%;object-fit:cover}
.splash-skip{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.25);backdrop-filter:blur(8px);color:#fff;border:none;border-radius:20px;padding:8px 18px;font-size:13px;font-weight:500;cursor:pointer;z-index:10;transition:all .2s}
.splash-skip:active{transform:scale(.95)}
.splash-progress{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:12px}
.splash-progress-bar{width:120px;height:3px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.splash-progress-fill{height:100%;background:#fff;border-radius:2px;transition:width .1s linear;width:0}

/* ===== LOGIN MODAL (登录弹窗) ===== */
.login-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:500;padding:24px}
.login-modal-overlay.active{display:flex}
.login-modal{background:#fff;border-radius:20px;padding:32px 24px 36px;width:100%;max-width:380px;position:relative;animation:popIn .3s ease;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-modal .lm-close{position:absolute;top:14px;right:16px;background:none;font-size:20px;color:var(--text-light);cursor:pointer;z-index:1;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}
.login-modal .lm-close:hover{background:var(--bg);color:var(--text-secondary)}
.login-modal .lm-brand{text-align:center;margin-bottom:16px}
.login-modal .lm-brand img{width:56px;height:56px;object-fit:contain;border-radius:14px;margin-bottom:8px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.login-modal .lm-brand-name{font-size:20px;font-weight:800;color:var(--primary);letter-spacing:1px}
.login-modal h3{font-size:18px;font-weight:700;margin-bottom:4px;text-align:center}
.login-modal .lm-subtitle{font-size:13px;color:var(--text-secondary);text-align:center;margin-bottom:16px}
.login-modal .lm-bonus{background:linear-gradient(135deg,#667eea15,#764ba215);border:1px solid rgba(108,92,231,.2);border-radius:10px;padding:10px 14px;margin-bottom:18px;text-align:center;font-size:13px;color:#5A4BD1;font-weight:500}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:6px;font-weight:500}
.btn-primary{width:100%;padding:14px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-radius:var(--radius-sm);font-size:16px;font-weight:600;margin-top:8px}
.btn-primary:hover{box-shadow:0 4px 16px rgba(108,92,231,.4)}
.login-switch{text-align:center;margin-top:14px;font-size:13px;color:var(--text-secondary)}
.login-switch span{color:var(--primary);cursor:pointer;font-weight:600}
.lm-footer{text-align:center;font-size:12px;color:var(--text-light);margin-top:16px}

/* ===== LOGIN GATE OVERLAY (内容上的登录门槛) ===== */
.login-gate-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);display:none;align-items:flex-end;justify-content:center;z-index:500}
.login-gate-overlay.active{display:flex}

/* ===== CHILD INFO ===== */
.child-info-page{background:linear-gradient(180deg,#6C5CE7 0%,var(--bg) 40%);padding:40px 24px 24px}
.child-info-card{background:#fff;border-radius:var(--radius);padding:28px 20px;max-width:420px;margin:0 auto;box-shadow:var(--shadow-lg)}
.child-info-card h3{font-size:20px;margin-bottom:4px}
.child-info-card>p{font-size:13px;color:var(--text-secondary);margin-bottom:20px}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tag{padding:8px 18px;border-radius:20px;background:var(--bg);color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.tag.selected{background:var(--primary);color:#fff}
.tag.interest{padding:6px 14px;border-radius:16px;font-size:13px}
.tag.interest.selected{background:var(--accent);color:#fff}

/* ===== APP HEADER ===== */
.app-header{background:#fff;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border)}
.header-left{display:flex;align-items:center;gap:10px}
.header-logo{font-size:24px}
.header-title{font-size:18px;font-weight:700}
.header-right{display:flex;align-items:center;gap:12px}
.member-badge{padding:4px 12px;border-radius:12px;font-size:11px;font-weight:600}
.badge-explorer{background:#DFE6E9;color:#636E72}
.badge-reader{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff}
.badge-leader{background:linear-gradient(135deg,#FDCB6E,#E6B84D);color:#5A4BD1}

/* ===== BOTTOM NAV ===== */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom,0)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 0;color:var(--text-light);font-size:10px;gap:3px;background:none}
.nav-item .nav-icon{font-size:22px}
.nav-item.active{color:var(--primary)}

/* ===== HOME ===== */
.home-content{padding:20px;max-width:480px;margin:0 auto}
.welcome-banner{background:linear-gradient(135deg,var(--primary),#74B9FF);border-radius:var(--radius);padding:24px 20px;color:#fff;margin-bottom:20px}
.welcome-banner h2{font-size:18px;margin-bottom:4px}
.welcome-banner p{font-size:13px;opacity:.9}
.welcome-banner .streak{margin-top:12px;display:flex;gap:12px}
.streak-item{background:rgba(255,255,255,.2);border-radius:8px;padding:6px 12px;font-size:12px}
.trial-banner{background:linear-gradient(135deg,#FF6B6B,#FF8E53);border-radius:var(--radius);padding:16px 20px;color:#fff;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}
.trial-banner .trial-info h4{font-size:15px}
.trial-banner .trial-info p{font-size:12px;opacity:.9;margin-top:2px}
.trial-btn{background:#fff;color:var(--accent);padding:8px 18px;border-radius:20px;font-size:13px;font-weight:600;white-space:nowrap}
.usage-card{background:#fff;border-radius:var(--radius);padding:16px 20px;margin-bottom:20px;box-shadow:var(--shadow)}
.usage-card h4{font-size:13px;color:var(--text-secondary);margin-bottom:10px}
.usage-bar-bg{height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.usage-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green),var(--green-light));transition:width .5s}
.usage-bar-fill.warning{background:linear-gradient(90deg,var(--gold),var(--gold-dark))}
.usage-bar-fill.danger{background:linear-gradient(90deg,var(--accent),var(--accent-light))}
.usage-text{font-size:12px;color:var(--text-secondary);margin-top:6px;display:flex;justify-content:space-between}
.upgrade-hint{color:var(--primary);font-weight:500;cursor:pointer}
.section-title{font-size:17px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.agent-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.agent-card{background:#fff;border-radius:var(--radius);padding:20px 16px;text-align:center;box-shadow:var(--shadow);cursor:pointer;transition:all .2s;position:relative}
.agent-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.agent-card .agent-icon{font-size:36px;margin-bottom:8px}
.agent-card .agent-name{font-size:14px;font-weight:600}
.agent-card .agent-desc{font-size:11px;color:var(--text-secondary);margin-top:4px}
.lock-overlay{position:absolute;inset:0;background:rgba(255,255,255,.85);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.lock-overlay .lock-icon{font-size:24px}
.lock-overlay .lock-text{font-size:11px;color:var(--primary);font-weight:600}

/* ===== CHAT ===== */
.chat-page{background:var(--bg);display:flex;flex-direction:column;height:100vh}
.chat-header{background:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.chat-back{font-size:20px;background:none;color:var(--text)}
.chat-agent-icon{font-size:28px}
.chat-agent-info{flex:1}
.chat-agent-name{font-size:15px;font-weight:600}
.chat-agent-status{font-size:11px;color:var(--green)}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:80%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.6;animation:msgIn .3s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-ai{background:#fff;align-self:flex-start;border-bottom-left-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.msg-user{background:var(--primary);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg-system{background:#FFF3CD;align-self:center;font-size:12px;color:#856404;border-radius:8px;text-align:center;max-width:90%}
.quick-questions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.quick-q{background:#fff;border:1px solid var(--border);border-radius:16px;padding:6px 14px;font-size:12px;color:var(--primary)}
.chat-input-bar{background:#fff;padding:12px 16px;display:flex;gap:10px;align-items:center;border-top:1px solid var(--border);padding-bottom:calc(12px + env(safe-area-inset-bottom,0))}
.chat-input{flex:1;border:1.5px solid var(--border);border-radius:24px;padding:10px 18px;font-size:14px}
.chat-send{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}

/* ===== CHAT: 头像 & 删除按钮 ===== */
.chat-header-btns{display:flex;gap:8px;margin-left:auto}
.chat-del-btn{background:none;border:1.5px solid #e74c3c;color:#e74c3c;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:all .2s}
.chat-del-btn:hover{background:#e74c3c;color:#fff}
.msg-row{display:flex;align-items:flex-end;gap:8px;max-width:80%;animation:msgIn .3s ease}
.msg-row.user{align-self:flex-end;flex-direction:row-reverse}
.msg-row.ai{align-self:flex-start}
.msg-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.msg-row.ai .msg-avatar{background:linear-gradient(135deg,#667eea,#764ba8);color:#fff}
.msg-row.user .msg-avatar{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff}
.msg-bubble{padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.6;overflow-wrap:break-word;max-width:100%}
.msg-row.ai .msg-bubble{background:#fff;border-bottom-left-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.msg-row.user .msg-bubble{background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.msg-system{max-width:90%;background:#FFF3CD;align-self:center;font-size:12px;color:#856404;border-radius:8px;text-align:center;padding:8px 14px;animation:msgIn .3s ease}

/* ===== MEMBER ===== */
.member-page{padding:20px;max-width:480px;margin:0 auto}
.member-header{text-align:center;padding:30px 0 20px}
.member-header h2{font-size:22px;margin-bottom:4px}
.member-header p{color:var(--text-secondary);font-size:14px}
.plan-cards{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.plan-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:2px solid transparent;cursor:pointer;transition:all .2s;position:relative}
.plan-card.selected{border-color:var(--primary);box-shadow:var(--shadow-lg)}
.plan-card.recommended::before{content:'推荐';position:absolute;top:-1px;right:16px;background:var(--accent);color:#fff;font-size:11px;padding:2px 10px;border-radius:0 0 8px 8px;font-weight:600}
.plan-card .plan-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.plan-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px}
.plan-card.selected .plan-radio{border-color:var(--primary)}
.plan-card.selected .plan-radio::after{content:'';width:12px;height:12px;border-radius:50%;background:var(--primary)}
.plan-top-row{display:flex;align-items:center}
.benefit-card{background:#fff;border-radius:var(--radius);padding:16px 20px;margin-bottom:12px;box-shadow:var(--shadow);border-left:4px solid var(--primary)}
.benefit-card.gold{border-left-color:var(--gold-dark)}
.benefit-card h4{font-size:14px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.benefit-card p{font-size:13px;color:var(--text-secondary);line-height:1.6}
.benefit-card .detail{margin-top:8px;padding:10px;background:var(--bg);border-radius:8px;font-size:12px;color:var(--text-secondary);line-height:1.7}
.resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.resource-card{background:#fff;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);cursor:pointer;text-align:center;transition:all .2s}
.resource-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.resource-card .rc-icon{font-size:32px;margin-bottom:6px}
.resource-card .rc-title{font-size:13px;font-weight:600;margin-bottom:3px}
.resource-card .rc-desc{font-size:11px;color:var(--text-secondary)}
.resource-card.locked{opacity:.6;position:relative}
.resource-card.locked::after{content:'🔒';position:absolute;top:8px;right:8px;font-size:14px}
.lecture-item{background:#fff;border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer}
.lecture-item h5{font-size:14px;font-weight:600;margin-bottom:4px}
.lecture-item p{font-size:12px;color:var(--text-secondary);line-height:1.5}
.lecture-item .meta{font-size:11px;color:var(--text-light);margin-top:6px;display:flex;gap:12px}
.plan-name{font-size:17px;font-weight:700}
.plan-price{font-size:22px;font-weight:800;color:var(--primary)}
.plan-price span{font-size:13px;font-weight:400;color:var(--text-secondary)}
.plan-current{background:var(--bg);padding:4px 12px;border-radius:8px;font-size:12px;color:var(--text-secondary)}
.plan-features{list-style:none}
.plan-features li{font-size:13px;color:var(--text-secondary);padding:4px 0;display:flex;align-items:center;gap:6px}
.plan-features li::before{content:'✓';color:var(--green);font-weight:700}
.subscribe-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-radius:var(--radius-sm);font-size:16px;font-weight:600;margin-top:8px}
.subscribe-btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--primary-dark)}
.compare-table{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:24px}
.compare-table table{width:100%;border-collapse:collapse;font-size:12px}
.compare-table th{background:var(--primary);color:#fff;padding:10px 8px;text-align:center;font-weight:600}
.compare-table td{padding:8px;text-align:center;border-bottom:1px solid var(--border)}
.compare-table td:first-child{text-align:left;font-weight:500}
.compare-table tr:last-child td{border-bottom:none}

/* ===== PAYMENT MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:flex-end;justify-content:center;z-index:200}
.modal-overlay.active{display:flex}
.modal-content{background:#fff;border-radius:var(--radius) var(--radius) 0 0;padding:24px;width:100%;max-width:480px;animation:slideUp .3s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-content h3{font-size:18px;margin-bottom:16px;text-align:center}
.pay-summary{text-align:center;padding:12px 0;margin-bottom:12px;border-bottom:1px solid var(--border)}
.pay-amount{font-size:36px;font-weight:800;color:var(--primary)}
.pay-amount span{font-size:16px}
.pay-desc{font-size:13px;color:var(--text-secondary);margin-top:2px}
.pay-options{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.pay-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}
.pay-option.selected{border-color:var(--primary);background:#F8F6FF}
.pay-option .pay-icon{font-size:28px}
.pay-option .pay-name{font-weight:600;font-size:15px}
.pay-radio{margin-left:auto;width:20px;height:20px;border:2px solid var(--border);border-radius:50%;position:relative}
.pay-option.selected .pay-radio{border-color:var(--primary)}
.pay-option.selected .pay-radio::after{content:'';width:10px;height:10px;background:var(--primary);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.pay-confirm-btn{width:100%;padding:14px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);font-size:16px;font-weight:600}

/* ===== CONVERSION POPUP ===== */
.conv-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:300;padding:24px}
.conv-popup-overlay.active{display:flex}
.conv-popup{background:#fff;border-radius:var(--radius);padding:28px 24px;max-width:360px;width:100%;text-align:center;animation:popIn .3s ease}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.conv-popup .conv-icon{font-size:48px;margin-bottom:12px}
.conv-popup h3{font-size:18px;margin-bottom:6px}
.conv-popup p{font-size:13px;color:var(--text-secondary);line-height:1.5;margin-bottom:16px}
.conv-popup .conv-price{font-size:13px;color:var(--accent);font-weight:600;margin-bottom:16px}

/* ===== DASHBOARD ===== */
.dash-content{padding:20px;max-width:480px;margin:0 auto}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.stat-card{background:#fff;border-radius:var(--radius);padding:16px 12px;text-align:center;box-shadow:var(--shadow)}
.stat-num{font-size:24px;font-weight:800;color:var(--primary)}
.stat-label{font-size:11px;color:var(--text-secondary);margin-top:2px}
.calendar-card{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:20px;box-shadow:var(--shadow)}
.calendar-card h4{font-size:14px;margin-bottom:12px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-header{font-size:11px;color:var(--text-light);padding:4px 0}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;color:var(--text-secondary)}
.cal-day.checked{background:var(--green);color:#fff}
.cal-day.read-day{background:rgba(102,126,234,0.15);color:var(--primary);font-weight:600}
.cal-day.today{border:2px solid var(--primary);font-weight:700}
.cal-day.empty{visibility:hidden}
.checkin-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:12px;border:none;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;width:100%}
.checkin-btn.active{background:linear-gradient(135deg,#00b894,#00cec9);color:#fff;box-shadow:0 4px 15px rgba(0,184,148,0.3)}
.checkin-btn.active:active{transform:scale(0.97)}
.checkin-btn.done{background:#f0f0f0;color:#999;cursor:default}
.report-card{background:#fff;border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}
.report-card h4{font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.report-chart{display:flex;align-items:flex-end;gap:8px;height:100px;margin-bottom:12px}
.chart-bar{flex:1;border-radius:4px 4px 0 0;min-height:8px;position:relative;transition:height .5s}
.chart-bar .bar-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--text-light);white-space:nowrap}
.chart-bar .bar-value{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:600;color:var(--text-secondary)}
.report-summary{font-size:13px;color:var(--text-secondary);line-height:1.6}
.report-locked{background:rgba(108,92,231,.05);border-radius:8px;padding:16px;text-align:center;margin-top:12px}
.report-locked p{font-size:13px;color:var(--text-secondary);margin-bottom:8px}
.report-locked button{background:var(--primary);color:#fff;padding:8px 20px;border-radius:16px;font-size:13px;font-weight:500}

/* ===== READING PLAN ===== */
.plan-content{padding:12px 16px;max-width:480px;margin:0 auto}
.plan-hero{background:linear-gradient(135deg,#6C5CE7,#A29BFE 60%,#74B9FF);border-radius:16px;padding:20px 20px 16px;color:#fff;margin-bottom:0;position:relative;overflow:hidden}
.plan-hero::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;background:rgba(255,255,255,.12);border-radius:50%}
.plan-hero::after{content:'';position:absolute;bottom:-20px;left:30px;width:60px;height:60px;background:rgba(255,255,255,.08);border-radius:50%}
.plan-hero h3{font-size:17px;margin-bottom:4px;position:relative;z-index:1}
.plan-hero p{font-size:12px;opacity:.85;position:relative;z-index:1}
.plan-locked-overlay{background:#fff;border-radius:12px;padding:28px 20px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,.06);margin:12px 16px 16px}
.plan-locked-overlay .lock-big{font-size:48px;margin-bottom:12px}
.plan-locked-overlay h4{font-size:16px;margin-bottom:6px}
.plan-locked-overlay p{font-size:13px;color:var(--text-secondary);margin-bottom:16px;line-height:1.5}
.plan-list{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.plan-item{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,.06);display:flex;align-items:center;gap:14px}
.plan-item-icon{font-size:36px;flex-shrink:0}
.plan-item-info{flex:1}
.plan-item-title{font-size:15px;font-weight:600}
.plan-item-desc{font-size:12px;color:var(--text-secondary);margin-top:2px}
.plan-item-progress{margin-top:6px}
.plan-item-progress .usage-bar-bg{height:6px}
.plan-item-meta{font-size:11px;color:var(--text-light);margin-top:4px}
.plan-create-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-radius:var(--radius-sm);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}

/* ===== EVENTS ===== */
.events-content{padding:20px;max-width:480px;margin:0 auto}
.event-tabs{display:flex;gap:8px;margin-bottom:16px}
.event-tab{padding:6px 16px;border-radius:16px;background:#fff;color:var(--text-secondary);font-size:13px;font-weight:500;border:1px solid var(--border)}
.event-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.event-list{display:flex;flex-direction:column;gap:12px}
.event-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.event-img{height:140px;background:linear-gradient(135deg,var(--primary-light),#74B9FF);display:flex;align-items:center;justify-content:center;font-size:48px;position:relative}
.event-badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:8px;font-size:11px;font-weight:600}
.event-badge.vip{background:var(--gold);color:var(--primary-dark)}
.event-badge.free{background:var(--green);color:#fff}
.event-info{padding:14px 16px}
.event-info h4{font-size:15px;font-weight:600;margin-bottom:4px}
.event-info p{font-size:12px;color:var(--text-secondary);margin-bottom:8px}
.event-meta{display:flex;justify-content:space-between;align-items:center}
.event-date{font-size:12px;color:var(--text-light)}
.event-join-btn{padding:6px 16px;border-radius:14px;font-size:12px;font-weight:600}
.event-join-btn.open{background:var(--primary);color:#fff}
.event-join-btn.vip-only{background:var(--bg);color:var(--primary);border:1px solid var(--primary-light)}
.event-join-btn.signed{background:var(--green);color:#fff}

/* ===== PROFILE ===== */
.profile-content{padding:20px;max-width:480px;margin:0 auto}
.profile-card{background:#fff;border-radius:var(--radius);padding:24px 20px;text-align:center;box-shadow:var(--shadow);margin-bottom:20px}
.profile-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 10px}
.profile-name{font-size:18px;font-weight:700}
.profile-phone{font-size:13px;color:var(--text-secondary)}
.profile-member-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.profile-member-card h4{font-size:14px;margin-bottom:12px}
.pmc-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;border-bottom:1px solid var(--border)}
.pmc-row:last-child{border-bottom:none}

/* ===== CREDIT CARD (积分显示卡) ===== */
.credit-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;padding:20px;color:#fff;box-shadow:0 4px 16px rgba(102,126,234,0.35);margin-bottom:16px;position:relative;overflow:hidden}
.credit-card::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,0.1)}
.credit-card::after{content:'';position:absolute;bottom:-20px;left:-20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,0.06)}
.credit-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;position:relative;z-index:1}
.credit-card-label{font-size:13px;opacity:0.85}
.credit-card-badge{font-size:11px;background:rgba(255,255,255,0.2);padding:3px 10px;border-radius:10px}
.credit-card-balance{font-size:36px;font-weight:800;line-height:1;margin-bottom:4px;position:relative;z-index:1}
.credit-card-unit{font-size:14px;font-weight:400;opacity:0.8;margin-left:4px}
.credit-card-sub{font-size:12px;opacity:0.7;position:relative;z-index:1}
.credit-card-actions{display:flex;gap:8px;margin-top:14px;position:relative;z-index:1}
.credit-card-btn{flex:1;padding:10px;border-radius:10px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.credit-card-btn.primary{background:#fff;color:#667eea}
.credit-card-btn.primary:active{transform:scale(0.97)}
.credit-card-btn.secondary{background:rgba(255,255,255,0.2);color:#fff;border:1px solid rgba(255,255,255,0.3)}

/* ===== CREDIT PACKAGES (积分包) ===== */
.pkg-list{display:flex;flex-direction:column;gap:12px;padding:0 16px}
.pkg-item{background:#fff;border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:2px solid transparent;cursor:pointer;transition:all .2s}
.pkg-item:active{transform:scale(0.98)}
.pkg-item.hot{border-color:#ef4444}
.pkg-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.pkg-icon.small{background:linear-gradient(135deg,#a8edea,#fed6e3)}
.pkg-icon.medium{background:linear-gradient(135deg,#fbc2eb,#a6c1ee)}
.pkg-icon.large{background:linear-gradient(135deg,#ff9a9e,#fecfef)}
.pkg-icon.mega{background:linear-gradient(135deg,#667eea,#764ba2)}
.pkg-info{flex:1}
.pkg-name{font-size:15px;font-weight:700}
.pkg-desc{font-size:12px;color:var(--text-secondary);margin-top:2px}
.pkg-price{font-size:18px;font-weight:800;color:var(--primary);white-space:nowrap}
.pkg-price .unit{font-size:11px;font-weight:400;color:var(--text-secondary)}
.pkg-tag{font-size:10px;background:#ef4444;color:#fff;padding:2px 6px;border-radius:4px;margin-left:6px}

/* ===== CHAT CREDIT BADGE ===== */
.chat-credit-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2px 8px;border-radius:10px;margin-left:6px;cursor:pointer}
.msg-credit-info{text-align:center;font-size:11px;color:var(--text-muted);padding:2px 0;animation:msgIn .3s ease}
.pmc-label{color:var(--text-secondary)}
.pmc-value{font-weight:600}
.menu-list{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.menu-item{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);gap:12px;font-size:14px;cursor:pointer;background:none;width:100%;text-align:left;color:var(--text)}
.menu-item:last-child{border-bottom:none}
.menu-item .menu-icon{font-size:20px}
.menu-item .menu-arrow{margin-left:auto;color:var(--text-light)}
.logout-btn{width:100%;padding:14px;background:none;color:var(--accent);font-size:15px;font-weight:600;margin-top:20px;border-radius:var(--radius-sm);border:1px solid var(--accent)}

/* ===== TOAST ===== */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:var(--text);color:#fff;padding:12px 24px;border-radius:var(--radius-sm);font-size:14px;z-index:500;transition:transform .3s;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.success{background:var(--green)}
.toast.error{background:var(--accent)}
.loading-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes typing-dots{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-8px);opacity:1}}
.typing-dots{display:flex;gap:4px;padding:4px 0}
.typing-dots span{width:8px;height:8px;border-radius:50%;background:var(--text-light);animation:typing-dots 1.4s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
::-webkit-scrollbar{width:0}
@media(min-width:768px){body{max-width:480px;margin:0 auto;box-shadow:0 0 40px rgba(0,0,0,.1)}.bottom-nav{max-width:480px;left:50%;transform:translateX(-50%)}}

/* ===== ROLE SELECT ===== */
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.role-card{background:#fff;border-radius:var(--radius);padding:24px 16px;text-align:center;box-shadow:var(--shadow);cursor:pointer;transition:all .2s;border:2.5px solid transparent}
.role-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.role-card.selected{border-color:var(--primary);background:#F8F6FF}
.role-card .role-icon{font-size:40px;margin-bottom:8px}
.role-card .role-name{font-size:15px;font-weight:700}
.role-card .role-desc{font-size:11px;color:var(--text-secondary);margin-top:4px}

/* ===== ACHIEVEMENTS ===== */
.badge-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.badge-card{background:#fff;border-radius:var(--radius);padding:16px 10px;text-align:center;box-shadow:var(--shadow);transition:all .2s;cursor:pointer}
.badge-card.locked{opacity:.45;filter:grayscale(80%)}
.badge-card .badge-icon{font-size:32px;margin-bottom:6px}
.badge-card .badge-name{font-size:11px;font-weight:600}
.badge-card .badge-desc{font-size:9px;color:var(--text-secondary);margin-top:2px}
.badge-unlock-anim{animation:badgePop .6s ease}
@keyframes badgePop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ===== NOTIFICATIONS ===== */
.notif-bell{position:relative;background:none;font-size:20px;padding:4px}
.notif-bell .notif-dot{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--accent);display:none}
.notif-bell .notif-dot.show{display:block}
.notif-item{background:#fff;border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:8px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start}
.notif-item.unread{border-left:3px solid var(--primary);background:#FAFAFF}
.notif-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:var(--bg)}
.notif-content{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:600;margin-bottom:2px}
.notif-text{font-size:12px;color:var(--text-secondary);line-height:1.5}
.notif-time{font-size:10px;color:var(--text-light);margin-top:4px}

/* ===== READING NOTES ===== */
.note-card{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:10px;box-shadow:var(--shadow);border-left:3px solid var(--primary)}
.note-card .note-source{font-size:11px;color:var(--text-light);margin-bottom:6px}
.note-card .note-content{font-size:13px;line-height:1.6}
.note-card .note-time{font-size:10px;color:var(--text-light);margin-top:6px}
.note-save-btn{background:none;border:none;font-size:14px;cursor:pointer;padding:2px 4px;opacity:.5;transition:opacity .2s}
.note-save-btn:hover{opacity:1}
.note-save-btn.saved{opacity:1;color:var(--gold-dark)}

/* ===== MULTI-CHILD ===== */
.child-switcher{display:flex;gap:8px;overflow-x:auto;padding:4px 0;margin-bottom:12px}
.child-chip{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:#fff;border:1.5px solid var(--border);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s}
.child-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.child-chip .chip-avatar{width:22px;height:22px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:11px}
.child-chip.active .chip-avatar{background:rgba(255,255,255,.25)}
.child-add-btn{padding:6px 14px;border-radius:20px;background:none;border:1.5px dashed var(--primary-light);color:var(--primary);font-size:13px;cursor:pointer;white-space:nowrap}

/* ===== WORKS WALL ===== */
.work-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:12px}
.work-card .work-preview{padding:16px;min-height:80px;background:linear-gradient(135deg,#F8F6FF,#EEF0FF);font-size:13px;line-height:1.7;color:var(--text)}
.work-card .work-footer{padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border)}
.work-card .work-meta{font-size:11px;color:var(--text-light)}
.work-card .work-actions{display:flex;gap:8px}
.work-action-btn{background:none;border:none;font-size:14px;cursor:pointer;padding:4px;opacity:.6;transition:all .2s}
.work-action-btn:hover{opacity:1}

/* ===== SHARE CARD ===== */
.share-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:400;padding:24px}
.share-modal.active{display:flex}
.share-card-preview{background:#fff;border-radius:var(--radius);padding:20px;max-width:340px;width:100%;text-align:center}
.share-card-preview canvas{border-radius:12px;margin-bottom:12px;width:100%;max-width:300px}

/* ===== ADD BOOK MODAL ===== */
.isbn-modal{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;display:none;flex-direction:column;align-items:center;justify-content:center}
.isbn-modal.active{display:flex}
.isbn-modal video{width:100%;max-width:400px;border-radius:12px}
.isbn-modal .close-btn{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none}

/* ===== VOICE INTERACTION ===== */
.chat-mic-btn{width:40px;height:40px;border-radius:50%;background:none;border:1.5px solid var(--border);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:all .2s;flex-shrink:0}
.chat-mic-btn.recording{background:var(--accent);color:#fff;border-color:var(--accent);animation:micPulse 1s infinite;transform:scale(1.1)}
.chat-mic-btn:active:not(.recording){background:var(--bg);transform:scale(0.95)}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,.4)}50%{box-shadow:0 0 0 8px rgba(255,107,107,0)}}
.tts-btn{background:none;border:none;font-size:14px;cursor:pointer;padding:2px 4px;opacity:.5;transition:opacity .2s}
.tts-btn:hover{opacity:1}
.tts-btn.speaking{opacity:1;color:var(--primary)}
.voice-status{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;z-index:500;display:none;align-items:center;gap:8px}
.voice-status.show{display:flex}
.voice-wave{display:flex;gap:2px;align-items:center;height:16px}
.voice-wave span{width:3px;background:#fff;border-radius:2px;animation:wave .8s ease-in-out infinite}
.voice-wave span:nth-child(1){animation-delay:0s;height:6px}
.voice-wave span:nth-child(2){animation-delay:.1s;height:12px}
.voice-wave span:nth-child(3){animation-delay:.2s;height:8px}
.voice-wave span:nth-child(4){animation-delay:.3s;height:14px}
.voice-wave span:nth-child(5){animation-delay:.15s;height:10px}
@keyframes wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.2)}}

/* ===== CO-READING SESSION ===== */
.coread-session{background:#fff;border-radius:var(--radius);padding:20px;margin-bottom:14px;box-shadow:var(--shadow)}
.coread-timer{font-size:48px;font-weight:800;color:var(--primary);text-align:center;font-variant-numeric:tabular-nums;padding:20px 0}
.coread-timer-label{text-align:center;font-size:13px;color:var(--text-secondary);margin-bottom:16px}
.coread-controls{display:flex;gap:10px;justify-content:center}
.coread-btn{padding:12px 28px;border-radius:24px;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .2s}
.coread-btn.start{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff}
.coread-btn.stop{background:var(--accent);color:#fff}
.coread-btn.pause{background:var(--gold);color:var(--primary-dark)}
.coread-btn.resume{background:var(--green);color:#fff}
.coread-history-item{background:#fff;border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:8px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}
.coread-history-item .ch-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6C5CE7,#74B9FF);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;color:#fff}

/* ===== CHILD MANAGE ===== */
.child-manage-card{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:center;position:relative}
.child-manage-card.active-child{border:2px solid var(--primary)}
.child-manage-card .cm-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.child-manage-card .cm-info{flex:1;min-width:0}
.child-manage-card .cm-name{font-size:15px;font-weight:700}
.child-manage-card .cm-meta{font-size:12px;color:var(--text-secondary);margin-top:2px}
.child-manage-card .cm-actions{display:flex;gap:6px}
.child-manage-card .cm-btn{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .2s}
.child-manage-card .cm-btn:hover{background:var(--bg)}
.child-manage-card .cm-btn.switch{border-color:var(--primary);color:var(--primary)}
.child-manage-card .cm-btn.switch:hover{background:var(--primary);color:#fff}
.child-manage-card .cm-current{position:absolute;top:8px;right:12px;font-size:10px;color:var(--primary);font-weight:600}

/* ===== WISHLIST & BOOKSHELF ===== */
.book-card{background:#fff;border-radius:var(--radius);padding:14px;margin-bottom:10px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start}
.book-cover{width:60px;height:80px;border-radius:8px;background:linear-gradient(135deg,#f5f5f5,#e0e0e0);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;overflow:hidden}
.book-cover img{width:100%;height:100%;object-fit:cover}
.book-info{flex:1;min-width:0}
.book-title{font-size:14px;font-weight:600;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-author{font-size:12px;color:var(--text-secondary);margin-bottom:6px}
.book-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11px}
.book-tag{padding:2px 8px;border-radius:10px;background:var(--bg);color:var(--text-secondary)}
.book-tag.status-unread{background:#e3f2fd;color:#1976d2}
.book-tag.status-reading{background:#fff3e0;color:#f57c00}
.book-tag.status-read{background:#e8f5e9;color:#388e3c}
.book-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.book-action-btn{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid var(--border);background:#fff;color:var(--text-secondary);cursor:pointer;transition:all .2s}
.book-action-btn:hover{border-color:var(--primary);color:var(--primary)}
.book-action-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.book-action-btn.primary:hover{background:var(--primary-dark)}
.book-action-btn.danger{color:var(--accent);border-color:var(--accent)}
.book-action-btn.danger:hover{background:var(--accent);color:#fff}

.bookshelf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.bookshelf-stat{background:#fff;border-radius:var(--radius-sm);padding:12px;text-align:center;box-shadow:var(--shadow)}
.bookshelf-stat .num{font-size:24px;font-weight:700;color:var(--primary);margin-bottom:4px}
.bookshelf-stat .label{font-size:11px;color:var(--text-secondary)}

.book-filter-tabs{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px}
.book-filter-tab{padding:6px 14px;border-radius:16px;font-size:13px;font-weight:600;background:#fff;color:var(--text-secondary);border:1px solid var(--border);cursor:pointer;white-space:nowrap;transition:all .2s}
.book-filter-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}

.recommendation-card{background:linear-gradient(135deg,#fff,#f8f9ff);border:2px solid var(--primary-light);border-radius:var(--radius);padding:16px;margin-bottom:12px;position:relative}
.recommendation-card::before{content:'推荐';position:absolute;top:-1px;right:16px;background:var(--primary);color:#fff;font-size:11px;padding:2px 10px;border-radius:0 0 8px 8px;font-weight:600}
.recommendation-reason{font-size:12px;color:var(--primary);margin-top:8px;line-height:1.5;font-style:italic}


/* ===== PUBLIC LIBRARY ===== */
.pub-lib-search{display:flex;gap:8px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--border)}
.pub-lib-search input{flex:1;padding:9px 16px;border:1.5px solid var(--border);border-radius:20px;font-size:14px;outline:none;background:var(--bg);transition:border .2s}
.pub-lib-search input:focus{border-color:var(--primary);background:#fff}
.pub-lib-stats{display:flex;gap:8px;padding:10px 16px;justify-content:center;font-size:12px;color:var(--text-secondary)}
.pub-lib-stats span{background:var(--bg);padding:4px 12px;border-radius:12px;font-weight:500}
.lib-cat-scroll{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 6px;-webkit-overflow-scrolling:touch}
.lib-cat-scroll::-webkit-scrollbar{display:none}
.lib-cat-btn{white-space:nowrap;padding:6px 14px;border-radius:16px;font-size:12px;border:1.5px solid var(--border);background:#fff;color:var(--text-secondary);cursor:pointer;flex-shrink:0;transition:all .2s;font-weight:500}
.lib-cat-btn:active{transform:scale(.95)}
.lib-cat-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600;box-shadow:0 2px 8px rgba(108,92,231,.25)}
.lib-book-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px;grid-auto-rows:1fr}
.lib-book-card{background:#fff;border-radius:10px;padding:14px;box-shadow:0 1px 6px rgba(0,0,0,.06);cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;border:1px solid var(--border)}
.lib-book-card:active{transform:scale(.97);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.lib-book-cat{font-size:11px;margin-bottom:6px;font-weight:600;letter-spacing:.3px}
.lib-book-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.lib-book-author{font-size:11px;color:var(--text-secondary);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-book-desc{font-size:11px;color:var(--text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:auto;padding-bottom:8px}
.lib-book-desc:empty{display:none}
.lib-book-age{font-size:10px;color:var(--primary);background:rgba(108,92,231,.08);padding:2px 8px;border-radius:8px;display:inline-block;margin-bottom:6px;font-weight:500}
.lib-book-actions{display:flex;gap:6px;margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.lib-book-actions button{flex:1;padding:7px 0;border-radius:8px;font-size:12px;border:none;cursor:pointer;font-weight:600;transition:all .2s}
.lib-add-btn{background:var(--primary);color:#fff}
.lib-add-btn:active{opacity:.85}
.lib-add-btn.added{background:var(--bg);color:var(--text-light)}
.lib-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 16px}
.lib-cat-card{background:#fff;border-radius:10px;padding:18px 8px 14px;text-align:center;box-shadow:0 1px 6px rgba(0,0,0,.06);cursor:pointer;transition:transform .15s,box-shadow .15s;border:1px solid var(--border);position:relative;overflow:hidden}
.lib-cat-card:active{transform:scale(.96);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.lib-cat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--cat-accent,var(--border))}
.lib-cat-card .cat-icon{font-size:30px;margin-bottom:6px;line-height:1}
.lib-cat-card .cat-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.lib-cat-card .cat-count{font-size:11px;color:var(--text-secondary);font-weight:500}
.lib-detail-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.lib-detail-sheet{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;padding:20px;position:relative}
.lib-detail-close{position:absolute;top:12px;right:16px;font-size:20px;background:none;border:none;cursor:pointer;color:var(--text-secondary)}
.lib-empty{text-align:center;padding:60px 20px;color:var(--text-secondary)}
.lib-empty .empty-icon{font-size:48px;margin-bottom:12px}
/* ===== LIBRARY PAGINATION ===== */
.lib-pagination{display:flex;justify-content:center;align-items:center;gap:10px;padding:16px 16px 24px;margin-top:8px}
.lib-page-btn{background:#fff;color:var(--primary);border:1.5px solid var(--primary);border-radius:10px;padding:9px 18px;font-size:13px;cursor:pointer;transition:all .2s;font-weight:600}
.lib-page-btn:active:not(:disabled){background:var(--primary);color:#fff;transform:scale(.96)}
.lib-page-btn:disabled,.lib-page-btn.disabled{opacity:.35;cursor:not-allowed;border-color:var(--border);color:var(--text-light)}
.lib-page-info{font-size:13px;color:var(--text-secondary);min-width:90px;text-align:center;font-weight:500;background:var(--bg);padding:4px 12px;border-radius:8px}

/* ===== ONBOARDING V2 ===== */
.onboard-page{background:linear-gradient(180deg,#6C5CE7 0%,var(--bg) 35%);padding:40px 20px 30px;min-height:100vh}
.onboard-card{background:#fff;border-radius:var(--radius);padding:28px 22px;max-width:420px;margin:0 auto;box-shadow:var(--shadow-lg)}
.onboard-progress{display:flex;gap:6px;margin-bottom:24px}
.onboard-progress .dot{flex:1;height:4px;border-radius:2px;background:var(--border);transition:background .3s}
.onboard-progress .dot.active{background:var(--primary)}
.onboard-progress .dot.done{background:var(--green)}
.onboard-step{display:none;animation:fadeIn .4s ease}
.onboard-step.active{display:block}
.onboard-step h3{font-size:20px;margin-bottom:6px}
.onboard-step>p{font-size:13px;color:var(--text-secondary);margin-bottom:20px;line-height:1.5}
.pain-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border);margin-bottom:10px;cursor:pointer;transition:all .2s;background:#fff}
.pain-option:hover{border-color:var(--primary-light);background:#f8f6ff}
.pain-option.selected{border-color:var(--primary);background:rgba(108,92,231,0.06)}
.pain-option .pain-icon{font-size:24px;flex-shrink:0;width:36px;text-align:center}
.pain-option .pain-text{font-size:14px;font-weight:500;flex:1}
.pain-option .pain-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-size:12px}
.pain-option.selected .pain-check{background:var(--primary);border-color:var(--primary);color:#fff}
.suggest-card{background:#fff;border-radius:var(--radius);padding:18px 16px;margin-bottom:12px;border:1.5px solid var(--border);cursor:pointer;transition:all .2s;text-align:left;width:100%}
.suggest-card:hover{border-color:var(--primary-light);box-shadow:var(--shadow);transform:translateY(-1px)}
.suggest-card .suggest-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.suggest-card .suggest-icon{font-size:28px}
.suggest-card .suggest-title{font-size:15px;font-weight:600}
.suggest-card .suggest-desc{font-size:12px;color:var(--text-secondary);line-height:1.5}
.suggest-card .suggest-action{font-size:12px;color:var(--primary);font-weight:600;margin-top:8px}
.micro-lesson-card{background:var(--bg);border-radius:var(--radius-sm);padding:16px;margin-bottom:12px}
.micro-lesson-card .step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:700;margin-bottom:8px}
.micro-lesson-card .step-title{font-size:14px;font-weight:600;margin-bottom:4px}
.micro-lesson-card .step-content{font-size:13px;color:var(--text-secondary);line-height:1.6}
.micro-lesson-card .step-example{font-size:12px;color:var(--primary);background:rgba(108,92,231,0.06);border-radius:8px;padding:10px 12px;margin-top:8px;line-height:1.5}
.task-card{background:linear-gradient(135deg,#f8f6ff,#eef0ff);border-radius:var(--radius);padding:20px;border:1.5px solid rgba(108,92,231,0.15);margin-bottom:16px}
.task-card .task-label{font-size:11px;color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.task-card .task-title{font-size:16px;font-weight:700;margin-bottom:6px}
.task-card .task-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}
.onboard-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-radius:var(--radius-sm);font-size:15px;font-weight:600;margin-top:16px;border:none;cursor:pointer}
.onboard-btn:hover{box-shadow:0 4px 16px rgba(108,92,231,.4)}
.onboard-btn:disabled{opacity:.5;cursor:not-allowed}
.onboard-btn-secondary{width:100%;padding:12px;background:#fff;color:var(--text-secondary);border-radius:var(--radius-sm);font-size:13px;font-weight:500;margin-top:8px;border:1px solid var(--border);cursor:pointer}
.onboard-skip{text-align:center;margin-top:12px;font-size:12px;color:var(--text-light);cursor:pointer}
.onboard-skip:hover{color:var(--text-secondary)}

/* ===== BADGE/COIN/PET WIDGETS ===== */
.coin-widget{background:linear-gradient(135deg,#FDCB6E,#F8B739);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;color:#fff;position:relative;overflow:hidden}
.coin-widget::after{content:'💰';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:36px;opacity:.2}
.coin-balance{font-size:20px;font-weight:700}.coin-sub{font-size:12px;opacity:.85;margin-top:2px}.coin-mult{display:inline-block;background:rgba(255,255,255,.25);padding:1px 8px;border-radius:10px;font-size:10px;margin-top:4px}
.task-panel{background:#fff;border-radius:var(--radius);padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.task-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.task-header h4{font-size:15px;margin:0}.task-progress-text{font-size:11px;color:var(--text-secondary)}
.task-bar-bg{height:6px;background:#f0f0f0;border-radius:6px;overflow:hidden;margin-bottom:10px}
.task-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:6px;transition:width .5s}
.task-list{max-height:200px;overflow-y:auto}
.task-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:all .2s}
.task-item:hover{background:#fafafa}.task-item:last-child{border-bottom:none}
.task-item.task-done{opacity:.5}.task-item.task-done .task-icon{filter:grayscale(1)}
.task-icon{font-size:22px;flex-shrink:0;width:30px;text-align:center}
.task-info{flex:1;min-width:0}.task-name{font-size:13px;font-weight:600}.task-desc{font-size:11px;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-coins{font-size:12px;font-weight:700;color:var(--primary);flex-shrink:0}
.pet-widget{background:#fff;border-radius:var(--radius);padding:14px;margin-bottom:12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px}
.pet-face{font-size:40px}.pet-info{flex:1}.pet-name{font-size:14px;font-weight:700}.pet-level{font-size:12px;color:var(--primary)}.pet-mood{font-size:11px;color:var(--text-secondary)}
.pet-hunger{background:var(--accent);color:#fff;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* ===== DAILY HUB ===== */
.daily-card{background:#fff;border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow);cursor:default}
.daily-card[onclick]{cursor:pointer}
.daily-card[onclick]:active{transform:scale(.98)}
.daily-card-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.daily-card-icon{font-size:18px}
.daily-card-title{font-size:15px;font-weight:600;flex:1}
.daily-card-badge{font-size:11px;font-weight:600;color:var(--primary);background:rgba(108,92,231,.1);padding:2px 8px;border-radius:10px}
.daily-card-badge.done{background:var(--green);color:#fff}
.daily-card-tag{font-size:10px;color:#fff;background:var(--primary);padding:1px 8px;border-radius:10px}
.daily-progress-bar{height:6px;background:#f0f0f0;border-radius:6px;overflow:hidden;margin-top:4px}
.daily-progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-light));border-radius:6px;transition:width .5s}
.daily-task-list{margin-top:10px;max-height:280px;overflow-y:auto}
.daily-task-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:all .2s}
.daily-task-item:last-child{border-bottom:none}
.daily-task-item:hover{background:var(--bg);border-radius:8px;padding:8px}
.daily-task-item:active{transform:scale(.98)}
.daily-task-done{opacity:.5}
.daily-task-done .daily-task-icon{filter:grayscale(1)}
.daily-task-icon{font-size:22px;flex-shrink:0;width:30px;text-align:center}
.daily-task-info{flex:1;min-width:0}
.daily-task-name{font-size:13px;font-weight:600}
.daily-task-desc{font-size:11px;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.daily-task-coins{font-size:12px;font-weight:700;color:var(--primary);flex-shrink:0}
.daily-book-title{font-size:15px;font-weight:700;margin:4px 0 2px}
.daily-book-author{font-size:12px;color:var(--text-secondary)}
.daily-book-desc{font-size:12px;color:var(--text-secondary);margin-top:4px;line-height:1.5}
.daily-book-reason{font-size:11px;color:var(--primary);margin-top:4px;background:rgba(108,92,231,.06);padding:4px 8px;border-radius:6px;display:inline-block}
.daily-questions{margin-top:8px}
.daily-question-item{display:flex;gap:8px;padding:6px 0;font-size:13px;line-height:1.5;color:var(--text)}
.daily-question-item .q-num{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px}
.daily-action-btn{padding:10px 14px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;text-align:center}
.daily-action-btn.secondary{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.daily-action-btn:active{transform:scale(.97)}
.record-time-btn{padding:8px 12px;background:var(--bg);color:var(--text);border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;flex:1}
.record-time-btn:active{transform:scale(.95)}
.rank-tab{flex:1;padding:8px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-weight:500;background:#fff;cursor:pointer;text-align:center;transition:all .2s}
.rank-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
/* ===== DAILY REC (今日推荐 v2) ===== */
.daily-rec-card{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:20px;box-shadow:var(--shadow)}
.daily-rec-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.daily-rec-tabs{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.daily-rec-tabs::-webkit-scrollbar{display:none}
.daily-rec-pill{display:flex;align-items:center;gap:4px;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;border:1.5px solid var(--border);background:#fff;color:var(--text-secondary);transition:all .2s;flex-shrink:0}
.daily-rec-pill.active{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600}
.daily-rec-pill-icon{font-size:15px;line-height:1}
.daily-rec-pill-label{font-size:13px}
.daily-rec-body{padding:2px 0}
.daily-rec-cat{display:inline-block;font-size:10px;color:#fff;background:var(--primary);padding:2px 10px;border-radius:10px;margin-bottom:4px}
.daily-rec-title{font-size:16px;font-weight:700;margin:4px 0 2px;line-height:1.4}
.daily-rec-author{font-size:12px;color:var(--text-secondary)}
.daily-rec-desc{font-size:12px;color:var(--text-secondary);margin-top:6px;line-height:1.6}
.daily-rec-reason{font-size:11px;color:var(--primary);margin-top:6px;background:rgba(108,92,231,.06);padding:4px 10px;border-radius:6px;display:inline-block}
.daily-rec-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.daily-rec-btn{flex:1;min-width:80px;padding:10px 8px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;text-align:center;white-space:nowrap;transition:all .2s}
.daily-rec-btn:active{transform:scale(.97)}
.daily-rec-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.daily-rec-btn.accent{background:var(--green);color:#fff;border-color:var(--green)}

/* ===== P2: 开屏动画优化 ===== */

/* 淡出过渡 */
.splash-fadeout {
  opacity: 0 !important;
  transition: opacity 0.6s ease-out !important;
  pointer-events: none !important;
}

/* CSS 动画覆盖层 */
.splash-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(135deg, #1a1040 0%, #2d1b69 30%, #6C5CE7 70%, #A29BFE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease;
}
.splash-overlay.animate {
  animation: splashOverlayFade 2s ease 3s forwards;
}
@keyframes splashOverlayFade {
  to { opacity: 0; pointer-events: none; }
}

/* 品牌区域 */
.splash-brand {
  text-align: center;
  position: relative;
  z-index: 3;
  animation: splashBrandIn 0.8s ease-out both;
}
@keyframes splashBrandIn {
  from { opacity: 0; transform: translateY(30px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Logo 光环 */
.splash-logo-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -90px 0 0 -60px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.3);
  animation: splashRingPulse 2s ease-in-out infinite;
}
@keyframes splashRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* Logo 图片 */
.splash-logo-img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: contain;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  margin-bottom: 16px;
  animation: splashLogoFloat 3s ease-in-out infinite;
}
@keyframes splashLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* 品牌文字 */
.splash-brand-text {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 3px;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
  animation: splashTextIn 0.6s ease-out 0.3s both;
}
.splash-brand-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin-top: 8px;
  letter-spacing: 1px;
  animation: splashTextIn 0.6s ease-out 0.5s both;
}
@keyframes splashTextIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 漂浮粒子 */
.splash-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.particle {
  position: absolute;
  font-size: 24px;
  opacity: 0;
  animation: particleFloat 4s ease-in-out infinite;
}
.p1 { left: 15%; top: 20%; animation-delay: 0s; }
.p2 { left: 75%; top: 15%; animation-delay: 0.6s; font-size: 28px; }
.p3 { left: 85%; top: 55%; animation-delay: 1.2s; font-size: 18px; }
.p4 { left: 10%; top: 65%; animation-delay: 1.8s; }
.p5 { left: 55%; top: 75%; animation-delay: 0.8s; font-size: 20px; }
.p6 { left: 30%; top: 80%; animation-delay: 1.5s; font-size: 22px; }
@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(20px) scale(0.5); }
  20% { opacity: 0.7; }
  50% { opacity: 0.9; transform: translateY(-30px) scale(1); }
  80% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-60px) scale(0.6); }
}

/* 倒计时 */
.splash-countdown {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  color: #fff;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
}

/* 跳过按钮增强 */
.splash-skip {
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.2s;
}
.splash-skip.fade-in {
  opacity: 1;
}

/* 视频层 */
.splash-video {
  z-index: 1;
}

