/* ═══════════════════════════════════════════════
   年轮·晨露 v3.0 — 统一样式表（从零重写）
   封面 / 认证 / 仪式8步 / 对话 / 共育 / 我的
   ═══════════════════════════════════════════════ */

/* ═══ 1. 主题变量 ═══ */
:root {
  --bg:#0c1a0f; --bg2:#122018; --bg3:#1a2d1e;
  --tx:#e0ede2; --tx2:#9dbfa1; --tx3:rgba(255,255,255,.4);
  --ac:#3dba6a; --ac2:#52d47f; --ac-dim:rgba(61,186,106,.15);
  --gd:linear-gradient(135deg,#3dba6a,#52d47f);
  --bd:rgba(255,255,255,.06);
  --radius:14px;
  /* ceremony */
  --c-bg:#0A1628; --c-bg2:#162840;
  --c-green:rgba(61,186,106,.15); --c-gm:#3dba6a; --c-gd:#2da85c;
  --c-tx:#ECF0F5; --c-tx2:#8A9BB5; --c-tx3:#6B7D99;
}

/* ═══ 2. Reset & Base ═══ */
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;max-width:480px;margin:0 auto;overflow-x:hidden}
a{color:var(--ac);text-decoration:none}
button{font-family:inherit}
.view{display:none}
.view.active{display:block}
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.85);color:#fff;padding:14px 24px;border-radius:12px;font-size:14px;opacity:0;transition:opacity .3s;z-index:9999;pointer-events:none;text-align:center;max-width:80%}
.toast.show{opacity:1}
.hidden-input{display:none}

/* ═══ 3. 封面 Cover ═══ */
.cover{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.cover::before{content:'';position:fixed;inset:0;background:linear-gradient(160deg,#071a0d,#0c2a15 25%,#0f3520 50%,#0a2812 75%,#061208);z-index:-3}
.cover::after{content:'';position:fixed;top:-20%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(61,186,106,.25),transparent 70%);border-radius:50%;z-index:-2}
.cover .glow1{position:fixed;bottom:-10%;left:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(61,186,106,.15),transparent 70%);border-radius:50%;z-index:-2}
.cover .glow2{position:fixed;top:30%;left:50%;transform:translateX(-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(45,165,93,.12),transparent 70%);z-index:-2}
.cover-inner{text-align:center;padding:40px 30px;max-width:420px;width:100%;position:relative;z-index:1}
.cover-icon{margin-bottom:24px;animation:floatY 4s ease-in-out infinite}
.cover-icon svg{width:56px;height:72px;filter:drop-shadow(0 6px 24px rgba(255,200,60,.35))}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.cover-en{font-size:13px;letter-spacing:8px;color:rgba(255,255,255,.55);margin-bottom:20px;font-weight:300;text-transform:uppercase}
.cover-title{font-size:34px;font-weight:800;margin-bottom:12px;letter-spacing:4px;text-shadow:0 2px 20px rgba(61,186,106,.4)}
.cover-sub{font-size:18px;color:rgba(255,255,255,.9);margin-bottom:18px;font-weight:500;letter-spacing:1px}
.cover-formula{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:44px;line-height:1.8;letter-spacing:.5px}
.cover-dots{margin-bottom:12px;display:flex;justify-content:center;gap:6px}
.cover-dots span{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.25)}
.cover-dots span:nth-child(2){background:rgba(255,255,255,.45);width:5px;height:5px}
#subtitleText{font-size:15px;color:rgba(255,255,255,.9);line-height:1.8;text-align:center;letter-spacing:.5px;min-height:28px;margin-bottom:12px}
.listen-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 40px;background:rgba(61,186,106,.18);border:1.5px solid rgba(61,186,106,.4);border-radius:30px;color:rgba(255,255,255,.9);font-size:15px;cursor:pointer;transition:all .35s;backdrop-filter:blur(12px);margin-bottom:22px;letter-spacing:1px}
.listen-btn:hover{background:rgba(61,186,106,.28);border-color:rgba(61,186,106,.6)}
.listen-btn.playing{background:rgba(61,186,106,.32);border-color:rgba(61,186,106,.7);box-shadow:0 0 24px rgba(61,186,106,.2)}
.enter-btn{display:block;width:100%;padding:17px;background:linear-gradient(135deg,#3dba6a,#4ed880 50%,#3dba6a);background-size:200% 100%;border:none;border-radius:30px;color:#fff;font-size:17px;font-weight:700;cursor:pointer;transition:all .4s;box-shadow:0 8px 32px rgba(61,186,106,.3);letter-spacing:2px;margin-bottom:28px;position:relative;overflow:hidden}
.enter-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(61,186,106,.4);background-position:100% 0}
.cover-footer{font-size:13px;color:rgba(255,255,255,.5);line-height:1.6;letter-spacing:.5px}

/* ═══ 4. 认证 Auth ═══ */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(170deg,#0c1a0f,#122018 40%,#1a3020)}
.auth-inner{width:90%;max-width:400px;margin:20px}
.auth-logo{text-align:center;margin-bottom:30px;color:#fff}
.auth-logo .icon{font-size:48px;margin-bottom:12px}
.auth-logo .title{font-size:22px;font-weight:700}
.auth-logo .desc{font-size:13px;opacity:.8;margin-top:6px}
.auth-card{background:#1a2e20;border-radius:20px;padding:30px 24px;box-shadow:0 10px 40px rgba(0,0,0,.3);border:1px solid rgba(61,186,106,.1)}
.auth-tabs{display:flex;margin-bottom:24px;background:rgba(255,255,255,.06);border-radius:10px;padding:4px}
.auth-tab{flex:1;text-align:center;padding:10px;font-size:14px;font-weight:600;color:rgba(255,255,255,.4);cursor:pointer;border-radius:8px;transition:all .2s;border:none;background:none}
.auth-tab.active{background:var(--ac-dim);color:var(--ac)}
.auth-form{display:none}
.auth-form.active{display:block}
.fg{margin-bottom:16px}
.fg label{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:6px;display:block}
.fg input,.fg select{width:100%;padding:13px 16px;border:1px solid rgba(255,255,255,.1);border-radius:10px;font-size:14px;outline:none;transition:border .2s;background:rgba(255,255,255,.06);color:#e0f0e4}
.fg input:focus{border-color:var(--ac)}
.fg input::placeholder{color:rgba(255,255,255,.45)}
.auth-submit{width:100%;padding:14px;background:var(--gd);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;margin-top:8px}
.auth-submit:active{opacity:.9}
.auth-agree{text-align:center;margin-top:20px;font-size:12px;color:rgba(255,255,255,.35)}
.auth-agree a{color:var(--ac)}
.pwd-wrap{position:relative}
.pwd-wrap input{padding-right:40px}
.pwd-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:18px;opacity:.5}

/* ═══ 5. 仪式 Ceremony ═══ */
.ceremony{min-height:100vh;background:linear-gradient(180deg,var(--c-bg),#0F1E33 50%,var(--c-bg));color:var(--c-tx);overflow-x:hidden;position:relative;padding:30px 20px}
.cer-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cer-bg .c1{position:absolute;width:300px;height:300px;background:var(--c-green);top:-100px;right:-100px;border-radius:50%;opacity:.3}
.cer-bg .c2{position:absolute;width:100px;height:100px;background:rgba(56,189,248,.2);bottom:10%;left:-50px;border-radius:50%;opacity:.3}
.cer-back{position:fixed;top:25px;left:20px;background:var(--c-bg2);border:1px solid var(--c-green);color:var(--c-tx2);font-size:13px;padding:8px 14px;border-radius:20px;cursor:pointer;z-index:10;display:flex;align-items:center;gap:6px}
.cer-back:hover{background:var(--c-green);color:var(--c-gd)}
.cer-dots{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}
.pdot{width:8px;height:8px;border-radius:50%;background:var(--c-green);transition:all .3s}
.pdot.active{background:var(--c-gm);transform:scale(1.3)}
.pdot.done{background:var(--c-gd)}
.cer-container{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:10px 0}
.stage{display:none;width:100%;max-width:500px;text-align:center;animation:fadeUp .8s ease}
.stage.active{display:flex;flex-direction:column;align-items:center}
@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.cer-title{font-size:22px;font-weight:600;letter-spacing:4px;margin-bottom:8px;color:var(--c-gd)}
.cer-sub{font-size:13px;color:var(--c-tx2);letter-spacing:3px;margin-bottom:30px}
.cer-guide{font-size:14px;color:var(--c-tx2);line-height:1.8;margin:16px 0}
.cer-btn{background:var(--c-bg2);border:2px solid var(--c-green);color:var(--c-gd);padding:14px 36px;font-size:15px;letter-spacing:2px;border-radius:25px;cursor:pointer;transition:all .3s;margin:8px;font-weight:500}
.cer-btn:hover{background:var(--c-green);border-color:var(--c-gm)}
.cer-btn.pri{background:linear-gradient(135deg,var(--c-gm),var(--c-gd));border:none;color:#fff}
.cer-btn.pri:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(61,186,106,.4)}
.cer-btn:disabled{opacity:.4;cursor:not-allowed}
.cer-btn:disabled:hover{transform:none;box-shadow:none}
/* Camera */
.cam-wrap{margin:5px auto 20px}
.cam-box{width:140px;height:140px;margin:5px auto;border-radius:50%;overflow:hidden;border:4px solid var(--c-green);position:relative;background:linear-gradient(135deg,#0F1E33,#162840);box-shadow:0 8px 30px rgba(61,186,106,.15)}
.cam-box.lg{width:220px;height:220px}
.cam-box video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--c-gm)}
.scan-line{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--c-gm),transparent);opacity:0;z-index:10}
.scan-line.on{opacity:1;animation:scanY 2s linear infinite}
@keyframes scanY{0%{top:0}50%{top:calc(100% - 3px)}100%{top:0}}
.scan-border{position:absolute;inset:0;border:3px solid transparent;border-radius:50%;z-index:9}
.scan-border.on{border-color:var(--c-gm);animation:borderPulse 1s infinite}
.scan-border.ok{border-color:var(--c-gd);animation:none}
@keyframes borderPulse{0%,100%{box-shadow:0 0 15px rgba(61,186,106,.4)}50%{box-shadow:0 0 30px rgba(61,186,106,.7)}}
.scan-status{text-align:center;margin-top:12px;font-size:13px;color:var(--c-tx2);min-height:20px}
.scan-status.ok{color:var(--c-gd);font-weight:500}
.cap-bar-wrap{width:180px;height:4px;background:var(--c-green);border-radius:2px;margin:12px auto;overflow:hidden}
.cap-bar{height:100%;width:0;background:linear-gradient(90deg,var(--c-gm),var(--c-gd));border-radius:2px;transition:width .3s}
/* Oath */
.oath-scroll{width:100%;height:280px;overflow:hidden;margin:15px 0;position:relative}
.oath-inner{position:absolute;top:0;left:0;right:0;transition:top .1s linear}
.oath-box{background:var(--c-bg2);border:1px solid var(--c-green);border-radius:16px;padding:25px 20px;text-align:left;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.oath-title{font-size:14px;color:var(--c-gd);text-align:center;margin-bottom:12px;letter-spacing:2px;font-weight:500}
.oath-sec{margin-bottom:10px}
.oath-sec-title{font-size:13px;color:var(--c-tx3);margin-bottom:4px;letter-spacing:1px}
.oath-line{font-size:16px;line-height:1.9;color:var(--c-tx);font-weight:400}
.oath-line.hl{color:var(--c-gd);font-weight:500}
.confirm-text{font-size:28px;font-weight:300;letter-spacing:4px;color:var(--c-gd);animation:breathe 3s infinite}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
/* Name & Role */
.cer-input{padding:6px 12px;font-size:14px;background:var(--c-bg2);border:2px solid var(--c-green);color:var(--c-tx);text-align:center;width:200px;border-radius:12px;outline:none;transition:all .3s}
.cer-input:focus{border-color:var(--c-gm);box-shadow:0 0 0 3px rgba(61,186,106,.2)}
.cer-input::placeholder{color:var(--c-tx3)}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.role-btn{background:rgba(255,255,255,.04);border:1px solid rgba(61,186,106,.15);border-radius:14px;padding:14px 8px;color:var(--c-tx);cursor:pointer;transition:all .2s;text-align:center}
.role-btn:hover{border-color:rgba(61,186,106,.3)}
.role-btn.active{background:rgba(61,186,106,.12);border-color:var(--c-gm);box-shadow:0 0 12px rgba(61,186,106,.15)}
/* Read modes */
.read-modes{display:flex;gap:8px;margin-bottom:12px;justify-content:center}
.read-mode{flex:1;padding:12px 8px;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.1);border-radius:12px;text-align:center;cursor:pointer}
.read-mode.active{background:rgba(61,186,106,.12);border-color:var(--c-gm)}
/* Age btns */
.age-btns{display:flex;gap:6px;margin-bottom:12px;justify-content:center}
.age-btn{padding:8px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);font-size:12px;cursor:pointer}
.age-btn.active{border-color:var(--c-gm);background:var(--ac-dim);color:var(--ac);font-weight:600}
/* Celebration */
.confetti{position:fixed;width:8px;height:8px;border-radius:2px;animation:confettiFall linear forwards;pointer-events:none;z-index:1000}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}
@media(max-width:480px){
  .cam-box.lg{width:180px;height:180px}
  .oath-scroll{height:200px}
  .oath-line{font-size:15px}
  .confirm-text{font-size:22px}
}

/* ═══ 6. 主界面 Main ═══ */
.main-wrap{display:flex;flex-direction:column;min-height:100vh;padding-bottom:60px}
/* Header */
.main-header{background:linear-gradient(135deg,#0c2a14,#081a0c);border-bottom:1px solid rgba(61,186,106,.15);padding:14px 16px;display:flex;align-items:center}
.main-header .brand{flex:1;text-align:center}
.main-header h1{font-size:20px;font-weight:600;color:var(--tx)}
.main-header .subtitle{font-size:11px;color:var(--tx2)}
.hdr-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tx2);flex-shrink:0}
.hdr-btn:hover{background:var(--ac-dim);color:var(--ac)}
/* Tab panels */
.tab-panel{display:none;flex:1;overflow-y:auto}
.tab-panel.active{display:flex;flex-direction:column}
/* Bottom nav */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:480px;width:100%;background:var(--bg2);display:flex;justify-content:space-around;padding:5px 0;border-top:1px solid var(--bd);box-shadow:0 -2px 10px rgba(0,0,0,.3);z-index:990}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 0;color:var(--tx2);cursor:pointer;transition:color .2s;background:none;border:none;font-family:inherit}
.nav-item.active{color:var(--ac)}
.nav-item .ni{font-size:22px;margin-bottom:4px}
.nav-item .nt{font-size:12px}

/* ═══ 7. 对话 Chat ═══ */
/* Growth pulse */
.growth-pulse{display:flex;gap:8px;margin:12px 16px}
.gp-item{flex:1;background:rgba(18,32,24,.85);border:1px solid var(--bd);border-radius:10px;padding:8px 0;text-align:center}
.gp-val{font-size:18px;font-weight:700;color:var(--ac);line-height:1.2}
.gp-lbl{font-size:12px;color:var(--tx2);margin-top:2px}
/* Ceremony reminder */
.cer-remind{margin:12px 16px;padding:16px;background:linear-gradient(135deg,rgba(61,186,106,.15),rgba(61,186,106,.08));border:1px solid rgba(61,186,106,.3);border-radius:14px;cursor:pointer;display:flex;align-items:center;gap:10px}
.cer-remind:hover{background:linear-gradient(135deg,rgba(61,186,106,.2),rgba(61,186,106,.12))}
/* Onboarding */
.ob-card{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--radius);padding:16px;margin:0 16px 12px}
.ob-step{cursor:pointer;padding:10px 12px;background:rgba(61,186,106,.08);border:1px solid rgba(61,186,106,.15);border-radius:10px;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ob-step:hover{background:rgba(61,186,106,.12)}
/* Chat area */
.chat-area{flex:1;display:flex;flex-direction:column;padding:0 16px 8px}
.chat-msgs{flex:1;min-height:120px;max-height:50vh;overflow-y:auto;padding:12px 0;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
/* Welcome */
.welcome-msg{padding:16px;margin:auto}
.welcome-msg h3{font-size:15px;font-weight:500;text-align:center;margin-bottom:8px}
.quick-q{padding:5px 10px;background:var(--ac-dim);border:1px solid rgba(61,186,106,.2);border-radius:14px;font-size:12px;color:var(--ac);cursor:pointer;display:inline-block;margin:2px}
.quick-q:hover{background:rgba(61,186,106,.2)}
/* Messages */
.message{margin-bottom:12px;display:flex;animation:fadeUp .3s ease}
.message.user{justify-content:flex-end}
.message.assistant{flex-direction:column;align-items:flex-start}
.msg-bubble{max-width:80%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.6;word-break:break-word}
.message.user .msg-bubble{background:var(--gd);color:#fff;border-bottom-right-radius:4px}
.message.assistant .msg-bubble{background:var(--bg3);color:var(--tx);border:1px solid var(--bd);border-bottom-left-radius:4px;max-width:95%}
.msg-actions{display:flex;gap:2px;margin:4px 0 0 4px;opacity:.4;transition:opacity .2s}
.message.assistant:hover .msg-actions{opacity:1}
.msg-actions button{background:none;border:none;color:#b0b0b0;cursor:pointer;padding:5px 7px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.msg-actions button:hover{background:var(--bg3);color:var(--tx)}
.msg-actions svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Typing */
.typing-dots{display:flex;gap:4px;padding:4px 0}
.typing-dots span{width:8px;height:8px;background:var(--ac);border-radius:50%;animation:typing 1.4s infinite ease-in-out}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-8px);opacity:1}}
/* Feed panel — 与v2.0一致：横排三卡片在对话区上方展开 */
.feed-panel{background:var(--bg2);border-radius:12px;margin:4px 0;padding:10px;border:1px solid rgba(61,186,106,.1);display:none}
.feed-panel.show{display:block}
.feed-header{text-align:center;margin-bottom:6px}
.feed-title{font-size:14px;font-weight:600;color:var(--tx)}
.feed-hint{font-size:12px;color:var(--tx2);margin-top:2px}
.feed-entries{display:flex;flex-direction:row;gap:8px}
.feed-entry{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:10px;cursor:pointer;transition:all .2s;flex:1;color:var(--tx)}
.feed-entry:hover{border-color:rgba(61,186,106,.35);background:var(--bg3)}
.feed-entry-top{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.feed-entry-icon{font-size:20px}
.feed-entry-name{font-size:14px;font-weight:600;color:var(--tx)}
.feed-entry-desc{font-size:12px;color:var(--tx2)}
.feed-back{background:none;border:none;color:var(--ac);font-size:13px;cursor:pointer;padding:0;margin-bottom:8px}
.feed-sub{display:none}
.ftxt textarea{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 40px 10px 12px;font-size:14px;font-family:inherit;resize:none;outline:none;background:var(--bg3);color:var(--tx);box-sizing:border-box}
.ftxt textarea::placeholder{color:var(--tx2)}
.ftxt{position:relative}
.ftxt .voice-btn{position:absolute;right:8px;top:8px;background:var(--ac-dim);border:1px solid rgba(61,186,106,.25);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:var(--ac)}
.fsubmit{text-align:center;margin-top:8px}
.fsubmit button{background:var(--ac);color:#fff;border:none;border-radius:20px;padding:8px 24px;font-size:14px;cursor:pointer}
.fsubmit button:disabled{background:rgba(255,255,255,.08);color:rgba(255,255,255,.3);cursor:default}
/* Micro */
.micro-chip{display:inline-block;padding:6px 12px;border-radius:16px;font-size:12px;cursor:pointer;margin:3px;border:1px solid rgba(61,186,106,.2);color:rgba(255,255,255,.7);background:rgba(61,186,106,.05)}
.micro-chip.sel{background:rgba(61,186,106,.2);border-color:var(--ac);color:var(--ac)}
/* Input area */
.chat-input-wrap{background:var(--bg3);border:1px solid var(--bd);border-radius:16px;padding:10px 14px;margin:0 16px 8px}
.input-row{display:flex;align-items:center;gap:8px}
.chat-textarea{flex:1;border:none;background:transparent;padding:5px 0;font-size:15px;outline:none;resize:none;min-height:24px;max-height:120px;line-height:1.5;color:var(--tx);font-family:inherit}
.chat-textarea::placeholder{color:var(--tx2)}
.send-btn{width:40px;height:40px;border-radius:50%;background:var(--gd);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.send-btn:disabled{opacity:.4;cursor:not-allowed}
.feed-trigger{background:none;border:1px solid rgba(61,186,106,.3);border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ac)}
.model-btn{width:40px;height:40px;border-radius:50%;background:var(--bg2);border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ac)}
.upload-hints{display:flex;justify-content:center;gap:10px;padding:6px 0 2px;font-size:12px;color:var(--tx2)}
.upload-hints span{cursor:pointer;padding:2px 4px;border-radius:6px}
.upload-hints span:hover{background:var(--ac-dim);color:var(--ac)}
/* File preview */
.file-preview{display:none;padding:4px 0 8px;flex-wrap:wrap;gap:4px}
.file-preview.show{display:flex}
.preview-item{display:flex;align-items:center;background:var(--bg2);border-radius:6px;padding:3px 8px;font-size:12px;color:var(--tx2);gap:4px}
.preview-item .rm{cursor:pointer;color:#999;font-size:14px}
.preview-item .rm:hover{color:#e53e3e}

/* ═══ 8. 侧栏 Sidebar ═══ */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s}
.sidebar-overlay.open{opacity:1;pointer-events:auto}
.sidebar{position:fixed;top:0;left:-280px;width:280px;height:100%;background:var(--bg2);z-index:1001;transition:left .3s;display:flex;flex-direction:column;border-right:1px solid var(--bd);overflow-y:auto;-webkit-overflow-scrolling:touch}
.sidebar.open{left:0}
.sb-header{padding:20px 16px;border-bottom:1px solid var(--bd)}
.sb-new-chat{width:100%;padding:10px;background:var(--ac-dim);border:1px solid rgba(61,186,106,.2);border-radius:10px;color:var(--ac);font-size:14px;font-weight:500;cursor:pointer;text-align:center;margin-top:12px;display:block}
.sb-new-chat:hover{background:rgba(61,186,106,.2)}
.sb-history{flex:1;overflow-y:auto;padding:8px 0;min-height:60px}
.sb-item{padding:10px 16px;font-size:13px;color:var(--tx2);cursor:pointer;border-left:3px solid transparent;transition:all .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-item:hover{background:rgba(255,255,255,.04);color:var(--tx)}
.sb-item.active{border-left-color:var(--ac);color:var(--ac);background:var(--ac-dim)}
.sb-footer{padding:12px 16px;border-top:1px solid var(--bd)}
.sb-link{display:block;padding:8px 12px;font-size:13px;color:var(--tx2);cursor:pointer;border-radius:8px}
.sb-link:hover{background:rgba(255,255,255,.04);color:var(--tx)}
.sb-link.danger{color:#e74c3c}
.sb-link.danger:hover{background:rgba(231,76,60,.1)}

/* ═══ 9. 共育 Tab ═══ */
.gy-section{margin:12px 16px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--radius);padding:16px;overflow:hidden}
.gy-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gy-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.gy-title{font-size:14px;font-weight:600;color:var(--tx)}
.gy-desc{font-size:12px;color:var(--tx2);margin-top:2px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gy-feed-card{padding:12px 8px;background:rgba(61,186,106,.06);border:1px solid rgba(61,186,106,.12);border-radius:10px;text-align:center;cursor:pointer}
.gy-feed-card:hover{background:rgba(61,186,106,.12);border-color:rgba(61,186,106,.25)}
.gy-feed-card .fc-icon{font-size:24px;margin-bottom:4px}
.gy-feed-card .fc-name{font-size:12px;font-weight:600;color:var(--ac)}
.gy-feed-card .fc-desc{font-size:12px;color:var(--tx2);margin-top:2px}
/* Plugin groups */
.pg-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;border-radius:10px;color:var(--tx);border-bottom:1px solid var(--bd);user-select:none}
.pg-header:active{transform:scale(.98)}
.pg-header .left{display:flex;align-items:center;gap:8px}
.pg-header .gi{font-size:20px}
.pg-header .gn{font-size:16px;font-weight:700;color:#fff}
.pg-header .gc{font-size:12px;color:#fff;background:rgba(255,255,255,.25);padding:3px 10px;border-radius:10px;font-weight:600}
.pg-header .arrow{font-size:12px;color:rgba(255,255,255,.8);transition:transform .3s}
.pg.collapsed .arrow{transform:rotate(-90deg)}
.pg-body{max-height:1200px;overflow:hidden;transition:max-height .4s,opacity .3s,padding .3s;opacity:1;padding:6px 4px 4px}
.pg.collapsed .pg-body{max-height:0;opacity:0;padding:0}
.pg-sub{display:flex;align-items:flex-start;margin-bottom:8px}
.pg-sub-label{font-size:12px;color:rgba(255,255,255,.5);width:32px;min-width:32px;text-align:center;flex-shrink:0;padding-top:12px}
.pg-cards{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.p-card{background:var(--bg3);border-radius:12px;padding:12px 4px;text-align:center;cursor:pointer;transition:all .2s;border:1px solid var(--bd);position:relative;color:var(--tx)}
.p-card:hover{border-color:rgba(61,186,106,.35);background:#1e3524}
.p-card .pi{font-size:28px;margin-bottom:4px}
.p-card .pn{font-size:13px;font-weight:600;color:var(--tx)}
.p-card .pd{font-size:12px;color:var(--tx2);margin-top:2px}
.p-card .dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%}
.p-card .dot.ready{background:var(--ac)}
.p-card .dot.dev{background:#888}
.p-card .dot.plan{background:#CBD5E0}
.pg-header.bg-mind{background:linear-gradient(135deg,#1a5c3a,#3dba6a)}
.pg-header.bg-ability{background:linear-gradient(135deg,#3dba6a,#2d9f6f)}
.pg-header.bg-study{background:linear-gradient(135deg,#2d9f6f,#43b581)}
.pg-header.bg-workshop{background:linear-gradient(135deg,#43b581,#6fcf97)}
.pg-header.bg-growth{background:linear-gradient(135deg,#6fcf97,#a8e6cf)}
/* Index tabs */
.idx-section{margin-bottom:12px}
.idx-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.idx-tab{flex:1;min-width:calc(20% - 6px);padding:10px 6px;min-height:44px;background:var(--bg3);border:none;border-radius:8px;font-size:13px;color:var(--tx2);cursor:pointer;text-align:center}
.idx-tab:hover{background:var(--ac-dim);color:var(--ac)}
.idx-tab.active{background:var(--gd);color:#fff}
.idx-content{display:none;padding:10px;background:var(--bg3);border-radius:8px;margin-top:8px}
.idx-content.active{display:block}
.idx-items{display:flex;flex-wrap:wrap;gap:6px}
.idx-item{padding:6px 12px;background:var(--bg3);border:1px solid var(--bd);border-radius:20px;font-size:12px;color:var(--tx2);cursor:pointer;transition:all .2s}
.idx-item:hover{background:var(--ac);color:#fff;border-color:var(--ac)}
/* Stats bar */
.stats-bar{display:flex;gap:8px;margin:0 16px 12px}
.stats-bar>div{flex:1;border-radius:12px;padding:12px 8px;text-align:center;background:var(--bg2);border:1px solid var(--bd)}
.stats-bar .sv{font-size:22px;font-weight:900;color:var(--ac);line-height:1.2}
.stats-bar .sl{font-size:13px;color:var(--tx);margin-top:4px;font-weight:500}
/* Twin voice card */
.tv-card{margin:0 16px 12px;background:linear-gradient(135deg,rgba(61,186,106,.08),rgba(93,196,169,.04));border:1px solid rgba(61,186,106,.2);border-radius:14px;padding:16px;position:relative;overflow:hidden}

/* ═══ 10. 我的 Tab ═══ */
.mine-card{margin:12px 16px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--radius);padding:16px}
.mine-user{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mine-avatar{width:52px;height:52px;border-radius:50%;background:var(--ac-dim);display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden;flex-shrink:0}
.mine-avatar img{width:100%;height:100%;object-fit:cover}
.mine-name{font-size:15px;font-weight:600}
.mine-id{font-size:12px;color:var(--tx2);margin-top:2px}
.mine-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:rgba(255,255,255,.03);border-radius:10px;padding:10px 0}
.mine-stat{text-align:center}
.mine-stat-val{font-size:16px;font-weight:500;color:var(--ac)}
.mine-stat-lbl{font-size:12px;color:var(--tx2);margin-top:2px}
.mine-links{border:1px solid var(--bd);border-radius:var(--radius);overflow:hidden;margin:12px 16px}
.mine-link{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--bd);font-size:14px;color:var(--tx);background:var(--bg2)}
.mine-link:last-child{border-bottom:none}
.mine-link:hover{background:rgba(255,255,255,.03)}
.mine-link .ml-icon{font-size:18px;width:24px;text-align:center}
.mine-link .ml-arrow{margin-left:auto;color:var(--tx2);font-size:14px}

/* ═══ 11. 通用 ═══ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}