*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:Noto Sans SC,system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif;background:#f5f0eb;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}:root{--primary: #FF6B8A;--primary-light: #FF8FA7;--primary-dark: #E85A7A;--gradient: linear-gradient(135deg, #FF6B8A 0%, #C850C0 100%);--gradient-soft: linear-gradient(135deg, #FFEBF0 0%, #F5E6FF 100%);--gold: #FFD700;--bg-warm: #F5F0EB;--bg-card: #FFFFFF;--text-primary: #2D2D2D;--text-secondary: #8C8C8C;--text-light: #BFBFBF;--border-light: #F0ECF0;--shadow: 0 2px 16px rgba(255, 107, 138, .12);--shadow-hover: 0 8px 32px rgba(255, 107, 138, .2);--radius: 16px;--radius-sm: 10px;--radius-lg: 24px}.serif-title{font-family:"Noto Serif SC",serif;font-weight:700}.app-container{width:375px;height:100vh;background:var(--bg-warm);position:relative;display:flex;flex-direction:column}@media(max-width:420px){.app-container{width:100%}body{background:var(--bg-warm)}}.header{height:52px;background:transparent;display:flex;align-items:center;justify-content:center;position:relative;padding:0 16px;z-index:20;flex-shrink:0}.header-title{font-family:"Noto Serif SC",serif;font-size:18px;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-back{position:absolute;left:12px;width:36px;height:36px;border:none;background:#0000000a;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);font-size:20px;transition:all .2s}.header-back:active{transform:scale(.9)}.header-action{position:absolute;right:16px;font-size:14px;color:var(--primary);border:none;background:none;cursor:pointer;font-weight:500}.tab-bar{height:72px;background:#fff;display:flex;justify-content:space-around;align-items:center;border-top:1px solid var(--border-light);z-index:20;flex-shrink:0;padding-bottom:8px}.tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s;position:relative;cursor:pointer;padding:4px 12px}.tab-item.active{color:var(--primary)}.tab-icon{font-size:24px;margin-bottom:2px;transition:all .2s}.tab-item.active .tab-icon{transform:scale(1.1)}.tab-text{font-size:10px;font-weight:500}.tab-badge{position:absolute;top:0;right:6px;min-width:16px;height:16px;background:var(--primary);color:#fff;font-size:9px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:700}.content-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}.content-scroll::-webkit-scrollbar{display:none}.content-scroll{-ms-overflow-style:none;scrollbar-width:none}.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin:0 12px 12px}.btn-primary{background:var(--gradient);color:#fff;border:none;border-radius:50px;padding:12px 32px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden}.btn-primary:after{content:"";position:absolute;inset:0;background:#fff3;transform:translate(-100%);transition:transform .6s}.btn-primary:active:after{transform:translate(100%)}.btn-primary:active{transform:scale(.96);box-shadow:var(--shadow-hover)}.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary);border-radius:50px;padding:10px 24px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.btn-outline:active{transform:scale(.96);background:#ff6b8a14}.input-field{width:100%;padding:14px 16px;border:1.5px solid var(--border-light);border-radius:var(--radius-sm);font-size:15px;background:#fafafa;transition:all .2s;color:var(--text-primary);outline:none}.input-field::placeholder{color:var(--text-light)}.input-field:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px #ff6b8a14}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:flex-end;justify-content:center;z-index:100;animation:overlayIn .25s ease}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.modal-bottom{width:375px;background:#fff;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:24px 20px 32px;animation:slideUp .35s cubic-bezier(.32,.72,0,1)}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:50px;font-size:12px;font-weight:500}.tag-pink{background:#ffebf0;color:var(--primary)}.tag-purple{background:#f3e8ff;color:#7c3aed}.tag-gold{background:#fff8e1;color:#b8860b}.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--gradient-soft);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0;position:relative}.avatar-sm{width:36px;height:36px}.avatar-lg{width:72px;height:72px}.avatar-xl{width:96px;height:96px}.avatar-vip{border:2px solid var(--gold)}.avatar-vip:after{content:"👑";position:absolute;top:-6px;right:-4px;font-size:12px}.divider{height:1px;background:var(--border-light);margin:12px 0}.loading-dots:after{content:"";animation:dots 1.5s infinite}@keyframes dots{0%{content:""}33%{content:"."}66%{content:".."}to{content:"..."}}.fade-in-up{animation:fadeInUp .4s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.snackbar{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);background:#000c;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;z-index:200;animation:toastInOut 1.8s ease forwards;pointer-events:none}@keyframes toastInOut{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-60%) scale(.9)}}