* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --green:#1f7a5c; --green-d:#17634b; --bg:#f4f6f3; --card:#fff; --ink:#1c2420; --sub:#6b7a72; --line:#e2e8e3; --orange:#f39c4a; }
html,body { height: 100%; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: var(--bg); color: var(--ink); }
#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
/* 顶栏 */
#topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { width:38px; height:38px; aspect-ratio:1/1; border-radius:9px; object-fit:cover; display:block; flex:none; }
.brand-name { font-weight:800; font-size:19px; line-height:1.1; }
.brand-sub { font-size:11px; color:var(--sub); letter-spacing:.5px; }
.top-actions { display:flex; align-items:center; gap:8px; }
.icon-btn { position:relative; border:1px solid var(--line); background:#fff; border-radius:10px; padding:6px 10px; font-size:14px; cursor:pointer; }
.badge { position:absolute; top:-6px; right:-6px; background:#e86a4e; color:#fff; border-radius:9px; font-size:10px; padding:1px 5px; }
.lang-switch { display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.lang-btn { border:0; background:#fff; padding:6px 10px; font-size:13px; cursor:pointer; color:var(--sub); }
.lang-btn.active { background:var(--green); color:#fff; font-weight:700; }
/* 首屏 */
#hero { text-align:center; padding:26px 16px 8px; }
.mascot { width:92px; height:92px; aspect-ratio:1/1; margin:0 auto 10px; border-radius:50%; object-fit:cover; display:block; }
.slogan { font-size:21px; font-weight:800; }
.hint { margin-top:8px; color:var(--sub); font-size:14px; }
#hero.compact { padding:10px 16px 0; }
#hero.compact .mascot { width:44px; height:44px; }
#hero.compact .slogan { font-size:16px; }
#hero.compact .hint { display:none; }
/* 主区域 */
#main { flex:1; padding:14px; display:flex; flex-direction:column; gap:12px; }
#log { display:flex; flex-direction:column; gap:8px; }
.msg { max-width:88%; padding:9px 12px; border-radius:14px; font-size:15px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.msg.me { align-self:flex-end; background:var(--green); color:#fff; border-bottom-right-radius:4px; }
.msg.sys { align-self:flex-start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:4px; }
.msg.note { align-self:center; background:#fdf3e3; color:#8a5a12; font-size:13px; border:1px solid #f3dfba; }
#stage { display:flex; flex-direction:column; gap:12px; }
.qcard, .datacard { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; }
.qcard h3, .datacard h3 { font-size:16px; margin-bottom:10px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:8px 14px; font-size:14px; cursor:pointer; }
.chip.sel { border-color:var(--green); background:#e7f4ee; color:var(--green-d); font-weight:700; }
.chip.big { font-size:16px; padding:12px 18px; }
.qinput { width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:12px; font-size:16px; margin-bottom:10px; }
.btn { border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 16px; font-size:15px; cursor:pointer; }
.btn.primary { background:var(--green); border-color:var(--green); color:#fff; font-weight:700; }
.btn.danger { color:#b3392c; border-color:#ecc5bf; }
.btn:disabled { opacity:.45; cursor:default; }
.btn.small { padding:4px 12px; font-size:13px; border-radius:9px; }
.btnrow { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.kv:last-child { border-bottom:0; }
.kv b { font-weight:600; text-align:right; }
.tag { display:inline-block; font-size:11px; padding:2px 7px; border-radius:8px; background:#e7f4ee; color:var(--green-d); margin-left:6px; vertical-align:1px; }
.tag.off { background:#eef0ee; color:var(--sub); }
.tag.champ { background:#fdf3e3; color:#8a5a12; border:1px solid #f3dfba; font-weight:700; }
.tag.verified { background:#e7f4ee; color:var(--green-d); border:1px solid #bfe3d2; font-weight:700; }
.score { color:var(--orange); font-weight:700; }
/* 页脚法务链接 */
#legal-links { text-align:center; padding:4px 0 8px; font-size:12px; color:var(--sub); }
#legal-links a { color:var(--sub); text-decoration:none; }
/* 底部输入栏 */
#composer { position:sticky; bottom:0; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); }
#input-text { flex:1; border:1.5px solid var(--line); border-radius:999px; padding:11px 16px; font-size:16px; min-width:0; }
.mic-btn { width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:19px; cursor:pointer; flex:none; }
.mic-btn.rec { background:#fdeceb; border-color:#e86a4e; animation:pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(232,106,78,.18); } }
.send-btn { background:var(--green); color:#fff; border:0; border-radius:999px; padding:0 18px; font-size:15px; font-weight:700; cursor:pointer; flex:none; }
/* 面板 */
.panel { position:fixed; inset:0; background:var(--bg); z-index:20; display:flex; flex-direction:column; }
.panel.hidden, .hidden { display:none !important; }
.panel-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--card); border-bottom:1px solid var(--line); font-weight:800; font-size:17px; }
.panel-close { border:0; background:none; font-size:18px; cursor:pointer; }
.panel-body { padding:14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.panel-body h3 { margin-top:10px; font-size:15px; }
.panel-body form { display:flex; flex-direction:column; gap:8px; }
.panel-body label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--sub); }
.panel-body input { padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; font-size:15px; color:var(--ink); }
.row { display:flex; gap:8px; } .row input { flex:1; min-width:0; }
.note { font-size:13px; color:var(--sub); line-height:1.5; }
.note.warn { color:#b3392c; }
.sess-item { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; text-align:left; width:100%; font-size:14px; }
/* toast */
.toast { position:fixed; left:50%; bottom:92px; transform:translateX(-50%); background:#233029; color:#fff; padding:10px 16px; border-radius:999px; font-size:14px; z-index:50; max-width:88vw; text-align:center; }
.chatbox { display:flex; flex-direction:column; gap:8px; max-height:46dvh; overflow-y:auto; }