*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; background: #0b0f14; color: #e2e6ec; }
.hidden { display: none !important; }

/* 动画 */
.slide-in { animation: slideIn .35s cubic-bezier(0.16,1,0.3,1); }
@keyframes slideIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.stagger-1 { animation: slideIn .35s cubic-bezier(0.16,1,0.3,1) .04s both; }
.stagger-2 { animation: slideIn .35s cubic-bezier(0.16,1,0.3,1) .08s both; }
.stagger-3 { animation: slideIn .35s cubic-bezier(0.16,1,0.3,1) .12s both; }
.stagger-4 { animation: slideIn .35s cubic-bezier(0.16,1,0.3,1) .16s both; }
.stagger-5 { animation: slideIn .35s cubic-bezier(0.16,1,0.3,1) .20s both; }
.stagger-6 { animation: slideIn .35s cubic-bezier(0.16,1,0.3,1) .24s both; }
.stagger-7 { animation: slideIn .35s cubic-bezier(0.16,1,0.3,1) .28s both; }
.stagger-8 { animation: slideIn .35s cubic-bezier(0.16,1,0.3,1) .32s both; }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* 聊天气泡 — 双层阴影 */
.chat-bubble { max-width: 85%; word-break: break-word; }
.chat-bubble.user { background: rgba(255,123,123,0.1); border: 1px solid rgba(255,123,123,0.2); border-radius: 16px 4px 16px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08); }
.chat-bubble.ai { background: rgba(28,36,48,1); border: 1px solid #2a3340; border-radius: 4px 16px 16px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08); }

/* 模态框 */
.modal-backdrop { position: fixed; inset:0; background: rgba(0,0,0,.6); z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal-box { background: #141921; border: 1px solid #2a3340; border-radius: 14px; max-height: 90vh; overflow-y: auto; box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 16px 48px rgba(0,0,0,0.15); }

/* 按钮 — 按压缩放反馈 */
.btn-primary { background: #ff7b7b; color: #0b0f14; font-weight: 700; border: none; cursor: pointer; border-radius: 10px; padding: 10px 20px; transition: transform .1s ease, background .2s ease, box-shadow .2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); }
.btn-primary:hover { background: #ff9e9e; box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.1); }
.btn-primary:active { transform: scale(0.96); }
.btn-primary:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

/* 卡片 — 双层阴影 + 同心圆角 */
.card { background: #1c2430; border: 1px solid #2a3340; border-radius: 14px; padding: 20px; transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06); }
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1); }

/* 语音播报按钮 — 触控区域 ≥ 44px */
.voice-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(212,168,83,0.12); border: 1px solid rgba(212,168,83,0.25); color: #d4a853; border-radius: 8px; padding: 8px 14px; font-size: 12px; cursor: pointer; transition: transform .1s ease, background .2s ease, border-color .2s ease; margin-top: 6px; min-height: 44px; }
.voice-btn:hover { background: rgba(212,168,83,0.22); border-color: rgba(212,168,83,0.5); }
.voice-btn:active { transform: scale(0.95); }
.voice-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.voice-btn.playing { background: rgba(212,168,83,0.28); border-color: #d4a853; animation: voicePulse 1.2s infinite; }
.voice-btn.playing:active { transform: none; }
.voice-btn .voice-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
@keyframes voicePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,168,83,0.3); } 50% { box-shadow: 0 0 0 6px rgba(212,168,83,0); } }
.chat-bubble.ai .voice-row { display: flex; justify-content: flex-start; margin-top: 2px; }

/* 等宽数字 */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* 标题平衡换行 */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* 语音输入按钮 — 按住录音，松开识别 */
.mic-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #2a3340; background: #1c2430; color: #7b8393; cursor: pointer; transition: transform .1s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; flex-shrink: 0; font-size: 18px; }
.mic-btn:hover { background: #242d3a; border-color: #3dc9b0; color: #3dc9b0; }
.mic-btn:active { transform: scale(0.92); }
.mic-btn.recording { background: rgba(240,80,80,0.15); border-color: #f05050; color: #f05050; animation: micPulse 1.2s infinite; box-shadow: 0 0 0 0 rgba(240,80,80,0.4); }
.mic-btn.recording:active { transform: none; }
.mic-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,80,80,0.3); } 50% { box-shadow: 0 0 0 8px rgba(240,80,80,0); } }

/* 页面过渡 — 尊重用户减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
