/* ============================================================
   情绪小怪兽 v2（重建）样式
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #3a3340; background: #f3eee8; user-select: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; outline: none; }
.hidden, [hidden] { display: none !important; }
.screen { position: fixed; inset: 0; overflow-y: auto; }
.primary { background: #4f8a5f; color: #fff; padding: 13px 20px; border-radius: 14px; font-size: 15px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(79,138,95,.3); transition: transform .12s; }
.primary:active { transform: scale(.97); }
.primary:disabled { background: #c8d8cc; box-shadow: none; }

/* ============ 封面 ============ */
.cover { background: linear-gradient(160deg, #f6f2ec, #e7ddd2); display: flex; align-items: center; justify-content: center; }
.cover-inner { text-align: center; padding: 30px 26px; max-width: 420px; }
.cover-monster { width: 150px; height: 165px; margin: 0 auto 10px; }
.cover-monster .mon-svg { width: 100%; height: 100%; animation: floatY 3s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.cover h1 { font-size: 26px; margin: 8px 0; letter-spacing: 1px; color: #2d2733; }
.cover p { font-size: 14px; line-height: 1.7; color: #7a7280; margin: 12px 0 28px; }

/* ============ 问卷 ============ */
.quiz { background: #f3eee8; }
.quiz-wrap { max-width: 460px; margin: 0 auto; padding: 24px 18px 60px; }
.quiz-title { font-size: 17px; font-weight: 700; color: #2d2733; text-align: center; margin-bottom: 18px; }
.q-card { background: #fff; border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.q-label { font-size: 14px; font-weight: 600; color: #2d2733; margin-bottom: 10px; }
.q-card input { width: 100%; padding: 11px 14px; border: 1.5px solid #e2dccf; border-radius: 10px; font-size: 14px; background: #faf8f4; }
.q-hint { font-size: 12px; color: #a89ea0; margin-top: 8px; text-align: right; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { padding: 9px 14px; border-radius: 999px; background: #f3eee8; color: #5a5460; font-size: 13px; font-weight: 500;
  border: 1.5px solid transparent; transition: all .12s; }
.opt.sel { background: #e8f0ea; color: #4f8a5f; border-color: #4f8a5f; font-weight: 600; }
.opt:active { transform: scale(.96); }

/* ============ 聊天主页（小怪兽的家） ============ */
.chat { background: #e9ddcb; overflow: hidden; }
.room { position: absolute; inset: 0; }
.room-wall { position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient(180deg, #cfe0ec, #e7d9c6); }
.room-window { position: absolute; top: 12%; left: 10%; width: 90px; height: 110px; border-radius: 10px; background:
  linear-gradient(180deg,#1b2a4a,#2c3f6b); box-shadow: 0 0 22px rgba(120,150,220,.5) inset, 0 3px 8px rgba(0,0,0,.12);
  border: 5px solid #efe7da; cursor: pointer; }
.room-window::before, .room-window::after { content:''; position:absolute; background:#efe7da; }
.room-window::before { left:50%; top:6px; bottom:6px; width:4px; margin-left:-2px; }
.room-window::after { top:50%; left:6px; right:6px; height:4px; margin-top:-2px; }
.room-bed { position: absolute; bottom: 16%; right: 8%; width: 130px; height: 70px; border-radius: 12px;
  background: #d9a06a; box-shadow: 0 4px 10px rgba(0,0,0,.12); cursor: pointer; }
.room-bed::after { content:''; position:absolute; top:-14px; left:10px; width:48px; height:26px; border-radius:10px; background:#f6efe6; }
.room-desk { position: absolute; bottom: 16%; left: 8%; width: 96px; height: 60px; border-radius: 8px;
  background: #b3815c; box-shadow: 0 4px 10px rgba(0,0,0,.12); cursor: pointer; }
.room-desk::after { content:'📝'; position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-size:20px; }
.room-rug { position: absolute; bottom: 0; left: 0; right: 0; height: 26%; background: radial-gradient(ellipse at center bottom, #e7c79a, #d9b483); }

/* HUD */
.hud { position: absolute; top: 0; left: 0; right: 0; padding: 12px 14px 6px;
  display: flex; align-items: center; justify-content: space-between; z-index: 10;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); }
.hud-left { display: flex; align-items: center; gap: 9px; }
.lv-badge { width: 36px; height: 36px; border-radius: 50%; background: #4f8a5f; color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.exp-wrap { display: flex; flex-direction: column; gap: 3px; }
.exp-name { font-size: 11px; color: #2d2733; font-weight: 600; }
.exp-bar { width: 120px; height: 6px; background: rgba(255,255,255,.6); border-radius: 999px; overflow: hidden; }
.exp-fill { height: 100%; background: linear-gradient(90deg,#5b6fb0,#4f8a5f); width: 0%; transition: width .4s; }
.exp-num { font-size: 10px; color: #6a6470; }
.hud-right { display: flex; align-items: center; gap: 8px; }
.mood-pill, .oreo-pill { padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.mood-pill { background: #fff6da; color: #9a7a1a; cursor: pointer; user-select: none; transition: transform .12s ease, box-shadow .12s ease; }
.mood-pill:active { transform: scale(.94); }
.hud-left .lv-badge, .hud-left .exp-wrap { cursor: pointer; }
.lv-badge, .exp-wrap { transition: transform .12s ease; }
.lv-badge:active, .exp-wrap:active { transform: scale(.96); }
.oreo-pill.open { background: #d6f0d6; color: #2c7a2c; }
.oreo-pill.closed { background: #eee; color: #888; }

/* 奥利奥横幅 */
.oreo-banner { position: absolute; top: 56px; left: 14px; right: 14px; z-index: 9; display: flex; align-items: center; gap: 8px;
  background: #d6f0d6; border: 1px solid #b6e0b6; border-radius: 12px; padding: 8px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: #46c46c; box-shadow: 0 0 0 3px rgba(70,196,108,.25); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.ob-text { flex: 1; font-size: 13px; color: #2c7a2c; font-weight: 600; }
.ob-btn { padding: 6px 12px; border-radius: 999px; background: #2c7a2c; color: #fff; font-size: 12px; font-weight: 600; }

/* 怪兽舞台 */
.monster-stage { position: absolute; left: 0; right: 0; top: 30%; bottom: 32%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer; z-index: 5; }
#monsterHolder { width: 180px; height: 198px; }
#monsterHolder .mon-svg { width: 100%; height: 100%; animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} }
.monster-name { margin-top: 4px; font-size: 14px; font-weight: 700; color: #2d2733; }
.oreo-svg { animation: none !important; }
.speech { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); background: #fff; padding: 8px 13px;
  border-radius: 14px; font-size: 13px; max-width: 80%; box-shadow: 0 4px 14px rgba(0,0,0,.12); z-index: 7; animation: pop .2s ease; }
.speech::after { content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); width:0; height:0;
  border:7px solid transparent; border-top-color:#fff; border-bottom:0; }
@keyframes pop { from{transform:translateX(-50%) translateY(8px); opacity:0} to{transform:translateX(-50%) translateY(0); opacity:1} }

/* 聊天面板 */
.chat-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: #fbf9f6;
  border-top-left-radius: 20px; border-top-right-radius: 20px; display: flex; flex-direction: column;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1); z-index: 8; }
.chat-head { padding: 10px 16px; font-size: 13px; color: #7a7280; border-bottom: 1px solid #ece6dd; display: flex; justify-content: space-between; align-items: center; }
.chat-head b { color: #2d2733; }
.oreo-action { font-size: 11px; color: #2c7a2c; font-weight: 600; cursor: pointer; text-decoration: underline dotted; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px 14px 4px; }
.msg { max-width: 80%; margin: 6px 0; font-size: 14px; line-height: 1.5; }
.msg-user { margin-left: auto; background: #4f8a5f; color: #fff; padding: 9px 13px; border-radius: 16px; border-bottom-right-radius: 4px; }
.msg-mon { display: flex; gap: 8px; align-items: flex-start; }
.msg-mon .msg-avatar { width: 34px; height: 37px; flex: 0 0 auto; }
.msg-mon .msg-avatar .mon-svg { width: 100%; height: 100%; }
.msg-mon .msg-bubble { background: #fff; color: #2d2733; padding: 9px 13px; border-radius: 16px; border-bottom-left-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.05); white-space: pre-wrap; }
.msg-oreo .msg-bubble { background: #eaf0fb; }
.msg-sys { text-align: center; color: #a89ea0; font-size: 12px; background: none; max-width: 100%; margin: 10px 0; }
.chat-typing { display: flex; align-items: center; gap: 5px; padding: 0 16px 6px; color: #a89ea0; font-size: 12px; }
.dot { width: 5px; height: 5px; background: #b0a8ac; border-radius: 50%; display: inline-block; animation: dotJump 1.2s infinite; }
.dot:nth-child(2){animation-delay:.15s} .dot:nth-child(3){animation-delay:.3s}
@keyframes dotJump { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1} }
.oreo-suggest { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 12px 8px; }
.suggest-chip { background: #fff; border: 1.5px solid #cdd9ff; color: #2c3f80; border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; }
.suggest-chip:active { transform: scale(.96); }
.chat-input-wrap { position: relative; display: flex; gap: 8px; align-items: flex-end; padding: 8px 14px 16px; border-top: 1px solid #ece6dd; }
.chat-input-wrap textarea { flex: 1; padding: 10px 14px; border-radius: 16px; border: 1.5px solid #e2dccf; background: #fff; font-size: 14px; resize: none; line-height: 1.4; max-height: 120px; }
.chat-input-wrap button { padding: 10px 16px; border-radius: 16px; background: #4f8a5f; color: #fff; font-size: 14px; font-weight: 600; }

/* 浮动按钮 */
.float-btns { position: absolute; right: 12px; top: 48%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 11; }
.float-btn { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); font-size: 19px; display: flex; align-items: center; justify-content: center; }
.float-btn:active { transform: scale(.92); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.modal-body { position: relative; width: 100%; max-width: 460px; max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fbf9f6; border-top-left-radius: 18px; border-top-right-radius: 18px; padding: 18px 18px 22px; animation: up .25s ease; }
@keyframes up { from{transform:translateY(100%)} to{transform:translateY(0)} }
.crisis { text-align: center; }
.crisis-title { font-size: 17px; font-weight: 700; color: #c44b4b; margin-bottom: 8px; }
.crisis-text { font-size: 14px; color: #5a5460; line-height: 1.6; margin-bottom: 14px; }
.crisis-res { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.res-row { display: block; padding: 12px; background: #fff; border-radius: 12px; font-size: 14px; color: #2d2733; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.crisis-btns { display: flex; gap: 10px; }
.crisis-btns .primary, .crisis-btns .ghost { flex: 1; }
.ghost { background: #f3eee8; color: #5a5460; padding: 13px 20px; border-radius: 14px; font-size: 14px; font-weight: 600; }

/* 设置 / 案主 */
.set h3 { margin: 0 0 14px; font-size: 16px; }
.set-row { display: block; width: 100%; text-align: left; padding: 13px; background: #fff; border-radius: 12px; font-size: 14px; color: #2d2733; font-weight: 600; margin-bottom: 8px; }
.set-tip { font-size: 12px; color: #a89ea0; margin: 4px 0 10px; }
.set-close { width: 100%; padding: 12px; border-radius: 12px; background: #f3eee8; color: #5a5460; font-size: 14px; font-weight: 600; }
.owner-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; background: #fff; border-radius: 10px; margin-bottom: 8px; font-size: 13px; }
.owner-row input { width: 100px; padding: 6px 8px; border: 1px solid #e2dccf; border-radius: 6px; font-size: 13px; text-align: right; }
.owner-toggle { padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.owner-toggle.open { background: #d6f0d6; color: #2c7a2c; }
.owner-toggle.closed { background: #eee; color: #888; }
.set .primary { margin-top: 6px; }

/* 升级卡 / toast */
.toast-card { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); background: #fff; padding: 16px 26px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.2); text-align: center; z-index: 70; animation: pop .3s ease; }
.toast-emoji { font-size: 30px; }
.toast-title { font-size: 16px; font-weight: 700; color: #2d2733; margin-top: 4px; }
.toast-desc { font-size: 12px; color: #a89ea0; margin-top: 4px; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: rgba(45,39,51,.92); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 13px; z-index: 80; }

/* 顶部回首页按钮 */
.hud-home { width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
.hud-home:active { transform: scale(.92); }

/* ============ 卡通场景背景 ============ */
.room-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.room-scene svg { width: 100%; height: 100%; display: block; }

/* 舞台提示 */
.stage-hint { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #5a5460;
  background: rgba(255,255,255,.72); padding: 4px 11px; border-radius: 999px; animation: pulseHint 2s infinite; pointer-events: none; }
@keyframes pulseHint { 0%,100%{opacity:.55} 50%{opacity:1} }

/* 小怪兽反应动画 */
.react-shake { animation: rShake .5s ease; }
@keyframes rShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.react-bounce { animation: rBounce .8s ease; }
@keyframes rBounce { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-26px)} 60%{transform:translateY(-10px)} }
.react-spin { animation: rSpin 1s ease; }
@keyframes rSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.react-dance { animation: rDance .8s ease; }
@keyframes rDance { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-12deg)} 50%{transform:rotate(8deg) translateY(-10px)} 75%{transform:rotate(-6deg)} }
.react-float { animation: rFloat .9s ease; }
@keyframes rFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} }
.react-wiggle { animation: rWiggle .6s ease; }
@keyframes rWiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-6deg)} 75%{transform:rotate(6deg)} }
.react-nod { animation: rNod .7s ease; }
@keyframes rNod { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
.react-smile { animation: rSmile 1s ease; }
@keyframes rSmile { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-16px)} 60%{transform:translateY(-12px)} }
.react-worry { animation: rWorry 1s ease; }
@keyframes rWorry { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }

/* ============ 互动面板 ============ */
.interact { padding-bottom: 26px; }
.interact-handle { width: 40px; height: 5px; border-radius: 999px; background: #e0d8cd; margin: 4px auto 10px; }
.interact-title { text-align: center; font-size: 15px; font-weight: 700; color: #2d2733; margin-bottom: 12px; }
.interact-title b { color: #4f8a5f; }
.interact-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.itab { flex: 1; padding: 9px 0; border-radius: 12px; background: #f3eee8; color: #5a5460; font-size: 14px; font-weight: 600; transition: all .12s; }
.itab.sel { background: #e8f0ea; color: #4f8a5f; }
.interact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.interact-item { display: flex; align-items: center; gap: 8px; padding: 12px; background: #fff; border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05); text-align: left; transition: transform .1s; }
.interact-item:active { transform: scale(.96); }
.ii-emoji { font-size: 22px; }
.ii-label { flex: 1; font-size: 14px; font-weight: 600; color: #2d2733; }
.ii-exp { font-size: 11px; color: #4f8a5f; background: #e8f0ea; padding: 2px 7px; border-radius: 999px; }

/* ============ 表情 / 表情包 ============ */
.emoji-btn { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.1);
  font-size: 18px; display: flex; align-items: center; justify-content: center; }
.emoji-btn:active { transform: scale(.92); }
.emoji-panel { position: absolute; left: 8px; right: 8px; bottom: 100%; margin-bottom: 8px; background: #fff;
  border-radius: 16px; box-shadow: 0 -2px 18px rgba(0,0,0,.15); padding: 10px; z-index: 12; max-height: 232px; display: flex; flex-direction: column; }
.emoji-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.etab { padding: 6px 12px; border-radius: 999px; background: #f3eee8; color: #5a5460; font-size: 12px; font-weight: 600; }
.etab.sel { background: #e8f0ea; color: #4f8a5f; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; overflow-y: auto; }
.emoji-cell { font-size: 20px; padding: 4px; border-radius: 8px; }
.emoji-cell:active { background: #f0ece4; }
.sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow-y: auto; padding: 2px; }
.sticker-cell { background: #f7f4ef; border-radius: 10px; padding: 4px; aspect-ratio: 1; overflow: hidden; }
.sticker-cell img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.sticker-upload { background: #e8f0ea; color: #4f8a5f; border-radius: 10px; font-size: 13px; font-weight: 600;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.sticker-empty { grid-column: 1 / -1; text-align: center; color: #a89ea0; font-size: 12px; padding: 16px 8px; line-height: 1.6; }

/* 贴纸消息 */
.msg-sticker { background: none; padding: 0; max-width: 56%; }
.msg-sticker .sticker-img { max-width: 140px; max-height: 140px; border-radius: 14px; display: block; box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* ============ 登录 ============ */
.login { background: linear-gradient(160deg, #f6f2ec, #e3ecf0); display: flex; align-items: center; justify-content: center; }
.login-inner { text-align: center; padding: 30px 26px; max-width: 420px; width: 100%; }
.login-monster { width: 140px; height: 154px; margin: 0 auto 6px; }
.login-monster .mon-svg { width: 100%; height: 100%; animation: floatY 3s ease-in-out infinite; }
.login h1 { font-size: 25px; margin: 6px 0; letter-spacing: 1px; color: #2d2733; }
.login p { font-size: 14px; color: #7a7280; margin: 8px 0 24px; }
.login-methods { display: flex; flex-direction: column; gap: 12px; }
.login-btn { padding: 14px; border-radius: 14px; font-size: 15px; font-weight: 600; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform .12s; }
.login-btn:active { transform: scale(.97); }
.login-btn.phone { background: #4f8a5f; }
.login-btn.qq { background: #4a90d9; }
.login-btn.wechat { background: #51b345; }
.login-phone { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.login-phone input { width: 100%; padding: 12px 14px; border: 1.5px solid #e2dccf; border-radius: 12px; font-size: 15px; background: #faf8f4; text-align: center; }
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; }
.code-btn { padding: 0 14px; border-radius: 12px; background: #e8f0ea; color: #4f8a5f; font-size: 13px; font-weight: 600; white-space: nowrap; }
.code-btn:disabled { opacity: .5; }
.login-submit { background: #4f8a5f; color: #fff; padding: 13px; border-radius: 14px; font-size: 15px; font-weight: 600; }
.login-back { background: none; color: #a89ea0; font-size: 13px; padding: 6px; }
.login-tip { font-size: 12px; color: #a89ea0; margin-top: 22px; line-height: 1.6; }
/* 登录 / 注册 双 tab */
.tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.tab { flex: 1; max-width: 130px; padding: 10px 0; border-radius: 12px; font-size: 15px; font-weight: 600;
  background: #efeae1; color: #8a8088; transition: all .15s; }
.tab.active { background: #4f8a5f; color: #fff; box-shadow: 0 4px 12px rgba(79,138,95,.35); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form input { width: 100%; padding: 13px 14px; border: 1.5px solid #e2dccf; border-radius: 12px;
  font-size: 15px; background: #faf8f4; text-align: center; box-sizing: border-box; }
.auth-form input:focus { outline: none; border-color: #4f8a5f; }
.auth-form .primary { background: #4f8a5f; color: #fff; padding: 13px; border-radius: 14px; font-size: 15px; font-weight: 600; }
.auth-hint { font-size: 12px; color: #a89ea0; margin-top: 2px; line-height: 1.5; }
.reg-result { margin-top: 16px; padding: 14px; border-radius: 12px; background: #eaf4ec; color: #3c6b48;
  font-size: 14px; line-height: 1.6; border: 1px solid #cfe6d4; }
.reg-result b { font-size: 16px; letter-spacing: 1px; }

/* HUD：金币 + 我的 */
.coin-pill { padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #fff6da; color: #b8860b; }
.my-btn { width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); font-size: 16px; display: flex; align-items: center; justify-content: center; }
.my-btn:active { transform: scale(.92); }

/* ============ 双页面滑动 ============ */
.swipe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; width: 200%; height: 100%; transition: transform .32s ease; z-index: 1; }
.swipe.show-home { transform: translateX(-50%); }
.page { width: 50%; height: 100%; position: relative; flex: 0 0 50%; overflow: hidden; }
.page-chat { } /* 沿用 .room / .chat-panel 绝对定位 */

/* 家页面 */
.page-home { background: #e9ddcb; }
.home-room { position: absolute; inset: 0; overflow: hidden; }
.home-room .room-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.home-room .room-scene svg { width: 100%; height: 100%; display: block; }
.home-furniture .hf-item { position: absolute; transform: translate(-50%, -50%); font-size: 26px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)); animation: bob 2.6s ease-in-out infinite; z-index: 3; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.home-furniture .hf-item:active { cursor: grabbing; }
.home-furniture .hf-item.dragging { animation: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); z-index: 10; }
/* 房屋框架：一直显示，作为装饰的底 */
.home-house { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); width: 80%; aspect-ratio: 3 / 4; z-index: 1; }
.home-house svg { width: 100%; height: 100%; display: block; }
.home-empty { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center; color: #7a7280; font-size: 12px; line-height: 1.7; width: 64%; background: rgba(255,255,255,.72); padding: 12px 14px; border-radius: 14px; z-index: 4; pointer-events: none; }
.home-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: #fbf9f6; border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 -4px 20px rgba(0,0,0,.1); display: flex; flex-direction: column; padding: 10px 14px 14px; z-index: 4; }
.home-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.home-tabs .itab { flex: 1; padding: 9px 0; border-radius: 12px; background: #f3eee8; color: #5a5460; font-size: 14px; font-weight: 600; }
.home-tabs .itab.sel { background: #e8f0ea; color: #4f8a5f; }
.home-list { flex: 1; overflow-y: auto; }
.home-row, .shop-row, .task-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: #fff; border-radius: 12px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.shop-emoji, .hf-item-no { font-size: 24px; }
.shop-info { flex: 1; }
.shop-name { font-size: 14px; font-weight: 600; color: #2d2733; }
.shop-price { font-size: 12px; color: #b8860b; }
.shop-buy, .task-btn { padding: 8px 14px; border-radius: 999px; background: #4f8a5f; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.shop-section-head { display: flex; align-items: baseline; gap: 8px; margin: 14px 4px 8px; padding-bottom: 6px; border-bottom: 2px dashed #e3d8c5; }
.shop-section-title { font-size: 15px; font-weight: 700; color: #4f8a5f; }
.shop-section-hint  { font-size: 11px; color: #a89888; flex: 1; text-align: right; }
.shop-buy:disabled { background: #d8ded6; color: #9aa39e; }
.task-btn:disabled { background: #e8e3da; color: #a89ea0; }
.task-btn.can { background: #f0a93a; }
.task-info { flex: 1; }
.task-title { font-size: 14px; font-weight: 600; color: #2d2733; }
.task-sub { font-size: 12px; color: #a89ea0; margin-top: 2px; }
.task-tip, .shop-tip { font-size: 11px; color: #a89ea0; text-align: center; margin-top: 4px; }
.shop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.shop-coins { font-size: 14px; font-weight: 700; color: #b8860b; }

/* 浮动按钮：新增任务/商店/切换 */
.float-btns { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 11; }
.float-btn { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); font-size: 19px; display: flex; align-items: center; justify-content: center; }
.float-btn:active { transform: scale(.92); }

/* ============ 我的账户 ============ */
.my-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.my-avatar { width: 54px; height: 54px; border-radius: 50%; background: #e8f0ea; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.my-name { font-size: 17px; font-weight: 700; color: #2d2733; }
.my-id { font-size: 12px; color: #a89ea0; margin-top: 2px; word-break: break-all; }
.my-rows { background: #fff; border-radius: 12px; padding: 4px 12px; margin-bottom: 12px; }
.my-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0ece4; font-size: 13px; color: #5a5460; }
.my-row:last-child { border-bottom: none; }
.my-row b { color: #2d2733; font-weight: 600; }
.set-row.danger { color: #c44b4b; }

/* ============ 2.0：情绪选择网格 ============ */
.mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 14px; }
.mood-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; background: #fbf7f1; border: 2px solid transparent; font-size: 13px; color: #5a5460; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.mood-opt:active { transform: scale(.93); }
.mood-opt:hover { border-color: #ffd76b; }
.mood-opt .mo-emoji { font-size: 26px; line-height: 1; }
.mood-opt .mo-label { font-weight: 600; }

/* ============ 2.0：成长图鉴 ============ */
.growth-tip { font-size: 12px; color: #a89ea0; margin: 2px 0 12px; }
.growth-list { max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 6px; }
.growth-card { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: #fbf7f1; border: 2px solid transparent; }
.growth-card.cur { border-color: #4f8a5f; background: #eef6ef; box-shadow: 0 2px 10px rgba(79,138,95,.18); }
.growth-card .gc-lv { width: 56px; flex: 0 0 56px; font-size: 13px; font-weight: 700; color: #4f8a5f; text-align: center; }
.growth-card.cur .gc-lv { color: #2c7a2c; }
.growth-card .gc-mon { width: 92px; flex: 0 0 92px; }
.growth-card .gc-mon .mon-svg { width: 100%; height: auto; }
.growth-card .gc-body { flex: 1; min-width: 0; }
.growth-card .gc-name { font-size: 14px; font-weight: 700; color: #2d2733; margin-bottom: 3px; }
.growth-card .gc-note { font-size: 12px; color: #6a6470; line-height: 1.5; }

/* ============ 2.0：好友 ============ */
.friend-myid { font-size: 13px; color: #6a6470; margin: 4px 2px 10px; display: flex; align-items: center; gap: 8px; }
.friend-myid b { color: #2d2733; font-family: monospace; }
.mini-btn { border: 1px solid #e3dcd2; background: #fff; color: #6a6470; border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; }
.mini-btn:active { background: #f2ede6; }
.friend-search { display: flex; gap: 8px; margin-bottom: 10px; }
.friend-search input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #e3dcd2; border-radius: 12px; font-size: 14px; background: #fffdfb; }
.friend-search-result:empty { display: none; }
.friend-search-result { margin-bottom: 6px; }
.friend-result { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 16px; background: #fbf7f1; border: 1px solid #efe7dc; }
.friend-result .fr-head { width: 96px; }
.friend-result .fr-head .mon-svg { width: 100%; height: auto; }
.friend-result .fr-name { font-size: 15px; font-weight: 700; color: #2d2733; }
.friend-result .fr-lv { font-size: 12px; color: #4f8a5f; font-weight: 600; margin-left: 4px; }
.friend-result .fr-actions { display: flex; gap: 8px; }
.friend-result .fr-view, .friend-result .fr-add { border: none; border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.friend-result .fr-view { background: #eef6ef; color: #3c7a4c; }
.friend-result .fr-add { background: #ffe9c7; color: #b9791f; }
.friend-divider { font-size: 13px; font-weight: 700; color: #8a7f86; margin: 12px 2px 8px; }
.friend-list { display: flex; flex-direction: column; gap: 10px; }
.friend-empty { font-size: 13px; color: #a89ea0; text-align: center; padding: 14px 0; }
.friend-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: #fbf7f1; border: 1px solid #efe7dc; }
.friend-item .fi-ava { width: 52px; flex: 0 0 52px; }
.friend-item .fi-ava .mon-svg { width: 100%; height: auto; }
.friend-item .fi-meta { flex: 1; min-width: 0; }
.friend-item .fi-name { font-size: 14px; font-weight: 700; color: #2d2733; }
.friend-item .fi-sub { font-size: 11px; color: #a89ea0; margin-top: 2px; }
.friend-item .fi-acts { display: flex; flex-direction: column; gap: 6px; }
.friend-item .fi-chat { border: none; background: #e7f0e8; color: #3c7a4c; border-radius: 10px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.friend-item .fi-del { border: 1px solid #f0dada; background: #fff; color: #c46868; border-radius: 10px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.friend-import { margin-top: 14px; }
.friend-import .fi-title { font-size: 12px; color: #8a7f86; margin-bottom: 6px; }
.friend-import textarea { width: 100%; box-sizing: border-box; min-height: 56px; border: 1px solid #e3dcd2; border-radius: 12px; padding: 8px 10px; font-size: 12px; resize: vertical; background: #fffdfb; }
.friend-import .primary { margin-top: 8px; }

/* 好友聊天 */
.friendchat { padding: 0; display: flex; flex-direction: column; max-height: 88vh; }
.fc-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid #efe7dc; position: relative; }
.fc-head .fc-mon { width: 84px; flex: 0 0 84px; }
.fc-head .fc-mon .mon-svg { width: 100%; height: auto; }
.fc-head .fc-info { flex: 1; min-width: 0; }
.fc-head .fc-name { font-size: 16px; font-weight: 700; color: #2d2733; }
.fc-head .fc-sub { font-size: 12px; color: #a89ea0; margin-top: 3px; }
.set-close-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: none; background: #f2ede6; color: #8a7f86; font-size: 15px; cursor: pointer; }
.friend-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; max-height: 52vh; }
.friend-log .msg { max-width: 78%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.friend-log .msg-user { align-self: flex-end; background: #9ed99e; color: #173d17; border-bottom-right-radius: 4px; }
.friend-log .msg-mon { align-self: flex-start; background: #fff; color: #2d2733; border: 1px solid #eee3d6; border-bottom-left-radius: 4px; }
.friend-log .msg-sys { align-self: center; background: transparent; color: #a89ea0; font-size: 12px; max-width: 90%; text-align: center; }
.friend-input { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid #efe7dc; }
.friend-input textarea { flex: 1; min-width: 0; resize: none; height: 44px; max-height: 100px; padding: 10px 12px; border: 1px solid #e3dcd2; border-radius: 14px; font-size: 14px; background: #fffdfb; }
.friend-typing { font-size: 12px; color: #a89ea0; padding: 0 16px 8px; }