/* ===== 认知OS · 共享样式 ===== */
/* 每页需在 :root 中定义：--bg, --surface, --surface2, --border, --text, --muted, --accent, --accent2, --scrollbar, --formula-hover */

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif; }

/* scrollbar */
.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--scrollbar, #2a3340); border-radius: 2px; }

/* animations */
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.slide-in { animation: slideIn .3s ease-out; }
@keyframes slideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.stagger-1 { animation: slideIn .3s ease-out .05s both; }
.stagger-2 { animation: slideIn .3s ease-out .15s both; }
.stagger-3 { animation: slideIn .3s ease-out .25s both; }
.stagger-4 { animation: slideIn .3s ease-out .35s both; }
.stagger-5 { animation: slideIn .3s ease-out .45s both; }
.stagger-6 { animation: slideIn .3s ease-out .55s both; }

/* cards */
.formula-card { transition: all .2s ease; }
.formula-card:hover { border-color: var(--formula-hover, #3dd68c); transform: translateY(-2px); }
.problem-card { transition: all .2s ease; }
.problem-card:hover { transform: translateX(4px); }
.welcome-badge { background: linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 88%), color-mix(in srgb, var(--accent), transparent 96%)); }

/* modal */
.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:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px; }

/* lecture content */
.lec-content { flex:1; min-height:0; overflow-y:auto; padding-right:8px; }
.lec-content::-webkit-scrollbar { width: 4px; }
.lec-content::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 2px; }

/* mic button */
.mic-btn { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); font-size: 18px; cursor: pointer; transition: all .15s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; user-select: none; -webkit-user-select: none; }
.mic-btn:hover { border-color: var(--accent); color: var(--accent2); }
.mic-btn.recording { background: rgba(240,80,80,0.15); border-color: rgba(240,80,80,0.4); color: #f05050; animation: mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse { 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); } }

/* article selector */
.article-card { transition: all .15s ease; }
.article-card:hover { border-color: color-mix(in srgb, var(--accent), transparent 40%); }
.article-modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 90%; max-width: 560px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }

/* reading panel */
#reading-panel { transition: all .2s ease; }

/* tts speak button */
.tts-speak-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.tts-speak-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 92%); }
.tts-speak-btn.speaking { border-color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 88%); color: var(--accent2); animation: mic-pulse 1s ease-in-out infinite; }
#lecture-speak-btn.speaking { opacity: 0.75; animation: mic-pulse 1s ease-in-out infinite; }