:root,html[data-theme=light]{--bg: #eef2f6;--card: #ffffff;--primary: #4a5a6b;--primary-text: #ffffff;--tab-idle: #dfe6ee;--idle-text: #66788a;--line: #e3e8ee;--text: #2f3a46;--text-sub: #8a96a3;--input-bg: #f2f5f8;--shadow: 0 2px 10px rgba(74, 90, 107, .08);--radius: 14px}html[data-theme=dark]{--bg: #171c21;--card: #22282e;--primary: #3a4654;--primary-text: #f0f3f6;--tab-idle: #2b333b;--idle-text: #9aa6b3;--line: #303a44;--text: #e3e8ee;--text-sub: #8a96a3;--input-bg: #2b333b;--shadow: 0 2px 10px rgba(0, 0, 0, .3)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,PingFang SC,Microsoft YaHei,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}#app{max-width:520px;margin:0 auto;min-height:100vh;position:relative}.top-nav{position:sticky;top:0;z-index:20;background:var(--bg);padding:12px 16px 8px;display:flex;gap:8px}.tab-btn{flex:1;padding:9px 0;text-align:center;border:none;border-radius:999px;cursor:pointer;font-size:15px;font-weight:500;background:var(--tab-idle);color:var(--idle-text);transition:all .18s ease}.tab-btn.active{background:var(--primary);color:var(--primary-text)}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:0 16px 14px}.bottom-bar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:520px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}.capsule-input{flex:1;display:flex;align-items:center;gap:6px;background:var(--input-bg);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 14px}.capsule-input input{flex:1;border:none;outline:none;background:transparent;color:var(--text);font-size:15px;padding:6px 0}.icon-btn{width:34px;height:34px;flex:none;border:none;border-radius:50%;background:var(--tab-idle);color:var(--idle-text);font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.icon-btn.primary{background:var(--primary);color:var(--primary-text);border-radius:999px;padding:0 16px;width:auto;font-size:14px}.list-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.list-item:last-child{border-bottom:none}.avatar{width:44px;height:44px;border-radius:50%;background:var(--tab-idle);flex:none;display:flex;align-items:center;justify-content:center;color:var(--idle-text);font-size:18px;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.item-main{flex:1;min-width:0}.item-title{font-size:15px;color:var(--text)}.item-sub{font-size:12px;color:var(--text-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-time{font-size:12px;color:var(--text-sub);flex:none}.empty{text-align:center;color:var(--text-sub);padding:40px 20px;font-size:14px}.btn-block{width:100%;padding:12px;border:none;border-radius:999px;background:var(--primary);color:var(--primary-text);font-size:15px;cursor:pointer}.text-input{width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-size:15px;outline:none;margin-bottom:10px}