/* ============================================
   一建AI私教 v2.0 - 对话优先主题
   ============================================ */
:root {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-tertiary: #0f3460;
  --bg-card: #1f2940;
  --accent-primary: #e94560;
  --accent-secondary: #ff6b6b;
  --accent-glow: rgba(233, 69, 96, 0.3);
  --text-primary: #eaeaea;
  --text-secondary: #a0a0a0;
  --text-muted: #6b7280;
  --text-accent: #e94560;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(233, 69, 96, 0.5);
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --shadow-card: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-hover: 0 8px 30px rgba(233,69,96,0.15);
  --shadow-glow: 0 0 20px var(--accent-glow);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --header-height: 56px;
  --footer-height: 44px;
}

/* 浅色模式 */
body.light-theme {
  --bg-primary: #f5f7fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e8ecf1;
  --bg-card: #ffffff;
  --accent-primary: #e94560;
  --accent-secondary: #ff6b6b;
  --accent-glow: rgba(233, 69, 96, 0.15);
  --text-primary: #1a1a2e;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --text-accent: #e94560;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-active: rgba(233, 69, 96, 0.5);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 30px rgba(233,69,96,0.1);
}
body.light-theme .app-header { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
body.light-theme .tab-btn { color: var(--text-secondary); }
body.light-theme .tab-btn.active { color: var(--text-primary); border-bottom-color: var(--accent-primary); }
body.light-theme .chat-messages { background: var(--bg-primary); }
body.light-theme .chat-bubble.bot { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-subtle); }
body.light-theme .chat-bubble.user { background: var(--accent-primary); color: #fff; }
body.light-theme .chat-input-area { background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); }
body.light-theme #chatInput { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border-subtle); }
body.light-theme .quick-q { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
body.light-theme .quick-q:hover { background: var(--bg-tertiary); color: var(--text-primary); }
body.light-theme .welcome-icon svg { fill: var(--accent-primary); }
body.light-theme .browse-item { background: var(--bg-card); border: 1px solid var(--border-subtle); }
body.light-theme .browse-item:hover { background: var(--bg-tertiary); }
body.light-theme .knowledge-card { background: var(--bg-card); border: 1px solid var(--border-subtle); }
body.light-theme .mode-toggle { border-color: var(--border-subtle); color: var(--text-secondary); }
body.light-theme .theme-toggle { border-color: var(--border-subtle); color: var(--text-secondary); }
body.light-theme .left-panel { border-right-color: var(--border-subtle); }
body.light-theme .quiz-entry-btn { border-color: var(--border-subtle); }

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family: 'Microsoft YaHei','PingFang SC','Hiragino Sans GB',sans-serif;
  background: var(--bg-primary); color: var(--text-primary);
  line-height:1.6; min-height:100vh; overflow-x:hidden;
}

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-secondary); }
::-webkit-scrollbar-thumb { background:var(--bg-tertiary); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent-primary); }

/* ===== App Container ===== */
.app-container { display:flex; flex-direction:column; min-height:100vh; }

/* ===== Header ===== */
.app-header {
  height:var(--header-height); background:var(--bg-secondary);
  border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-lg); position:sticky; top:0; z-index:100;
}
.header-brand { display:flex; align-items:center; gap:var(--space-sm); }
.brand-logo {
  width:36px; height:36px;
  border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-glow);
  transition: transform 0.2s ease;
}
.brand-logo:hover { transform: scale(1.08); }
.brand-logo svg { display:block; }
.brand-title {
  font-size:1.2rem; font-weight:700;
  background:linear-gradient(90deg,var(--text-primary),var(--accent-primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.header-actions {
  display:flex; align-items:center; gap:var(--space-sm);
}
.quiz-entry-btn {
  display:flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:20px;
  color:#fff; text-decoration:none;
  font-size:0.9rem; font-weight:600;
  transition:all 0.25s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.quiz-entry-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.quiz-entry-btn.btn-study {
  background:linear-gradient(135deg,#4ecca3,#36b37e);
}
.quiz-entry-btn.btn-study:hover {
  background:linear-gradient(135deg,#5dddb5,#45c98f);
}
.quiz-entry-btn.btn-quiz {
  background:linear-gradient(135deg,#e94560,#c23152);
}
.quiz-entry-btn.btn-quiz:hover {
  background:linear-gradient(135deg,#f05672,#d44263);
}
.header-tabs {
  display:flex; gap:2px; background:var(--bg-card);
  padding:3px; border-radius:var(--radius-md);
  overflow-x:auto; flex-shrink:1; min-width:0;
  scrollbar-width:none;
}
.header-tabs::-webkit-scrollbar { display:none; }
.tab-btn {
  padding:6px 12px; border:none; background:transparent;
  color:var(--text-secondary); font-size:0.82rem; font-weight:500;
  cursor:pointer; border-radius:var(--radius-sm); transition:var(--transition-fast);
  white-space:nowrap; flex-shrink:0;
}
.tab-btn:hover { color:var(--text-primary); background:rgba(255,255,255,0.05); }
.tab-btn.active {
  background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
  color:#fff; box-shadow:var(--shadow-glow);
}
.mode-toggle {
  width:36px; height:36px; border:1px solid var(--border-subtle);
  background:var(--bg-card); border-radius:var(--radius-sm);
  color:var(--text-secondary); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition-fast);
}
.mode-toggle:hover { border-color:var(--accent-primary); color:var(--accent-primary); }
.mode-toggle .icon-chat { display:block; }
.mode-toggle .icon-list { display:none; }
.mode-toggle.active .icon-chat { display:none; }
.mode-toggle.active .icon-list { display:block; }
.theme-toggle {
  width:36px; height:36px; border:1px solid var(--border-subtle);
  background:var(--bg-card); border-radius:var(--radius-sm);
  color:var(--text-secondary); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition-fast);
}
.theme-toggle:hover { border-color:var(--accent-primary); color:var(--accent-primary); }
.theme-toggle .icon-moon { display:block; }
.theme-toggle .icon-sun { display:none; }
body.light-theme .theme-toggle .icon-moon { display:none; }
body.light-theme .theme-toggle .icon-sun { display:block; }
/* 顶部圆形分享按钮 */
.share-btn {
  width:36px; height:36px; border:1px solid var(--border-subtle);
  background:var(--bg-card); border-radius:var(--radius-sm);
  color:var(--text-secondary); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition-fast);
}
.share-btn:hover { border-color:var(--accent-primary); color:var(--accent-primary); }
body.light-theme .share-btn { border-color:var(--border-subtle); color:var(--text-secondary); }

/* 视频下方分享操作区 */
.video-share-area {
  display:flex; flex-direction:column; gap:10px;
  margin-top:12px; padding:0 4px;
}
.video-share-area .share-title {
  font-size:13px; color:var(--text-muted); font-weight:500;
}
.video-share-area .share-buttons {
  display:flex; gap:10px; flex-wrap:wrap;
}
.video-share-area .share-btn {
  width:auto; height:auto; min-width:160px;
  padding:10px 14px; border-radius:10px;
  border:1px solid var(--border-subtle);
  background:var(--bg-secondary);
  color:var(--text-primary);
  display:flex; align-items:center; gap:8px;
  font-size:13px; cursor:pointer;
  transition:all 0.2s ease;
}
.video-share-area .share-btn:hover {
  border-color:var(--accent-primary);
  background:var(--bg-tertiary);
  transform:translateY(-1px);
}
.video-share-area .share-btn .btn-text {
  white-space:nowrap;
}
.video-share-area .share-btn svg {
  flex-shrink:0;
}

/* Toast 通知 */
.toast-container {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.toast {
  background:rgba(0,0,0,0.8); color:#fff; padding:10px 20px;
  border-radius:8px; font-size:14px; opacity:0;
  transition:opacity 0.3s ease, transform 0.3s ease;
  transform:translateY(10px);
}
.toast.show { opacity:1; transform:translateY(0); }
body.light-theme .toast { background:rgba(0,0,0,0.75); }

/* 分享弹窗 */
.share-modal-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.5); z-index:10000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.2s ease;
  pointer-events:none;
}
.share-modal-overlay.active { opacity:1; pointer-events:auto; }
.share-modal {
  background:var(--bg-card, #1f2940); border-radius:16px;
  padding:24px; width:320px; max-width:90vw;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  transform:translateY(20px); transition:transform 0.2s ease;
}
.share-modal-overlay.active .share-modal { transform:translateY(0); }
.share-modal h3 {
  color:var(--text-primary, #eaeaea); font-size:16px;
  margin-bottom:16px; text-align:center;
}
.share-modal-actions {
  display:flex; flex-direction:column; gap:10px;
}
.share-modal-btn {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:10px;
  border:1px solid var(--border-subtle, rgba(255,255,255,0.08));
  background:var(--bg-secondary, #16213e);
  color:var(--text-primary, #eaeaea);
  font-size:14px; cursor:pointer;
  transition:var(--transition-fast);
}
.share-modal-btn:hover {
  border-color:var(--accent-primary, #e94560);
  background:var(--bg-tertiary, #0f3460);
}
.share-modal-btn svg { flex-shrink:0; }
.share-modal-close {
  margin-top:12px; width:100%; padding:10px;
  border:none; border-radius:8px;
  background:transparent; color:var(--text-muted, #6b7280);
  font-size:13px; cursor:pointer;
}
.share-modal-close:hover { color:var(--text-primary, #eaeaea); }
body.light-theme .share-modal {
  background:#fff; box-shadow:0 20px 60px rgba(0,0,0,0.15);
}
body.light-theme .share-modal-btn {
  background:#f5f7fa; border-color:#e2e8f0; color:#1a1a2e;
}
body.light-theme .share-modal-btn:hover {
  background:#e8ecf1; border-color:#e94560;
}
body.light-theme .video-share-area .share-btn {
  background:#f5f7fa; border-color:#e2e8f0; color:#1a1a2e;
}
body.light-theme .video-share-area .share-btn:hover {
  background:#e8ecf1; border-color:#e94560;
}

/* 分享渠道按钮 */
.share-channels {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  margin-bottom:8px;
}
.share-channel-btn {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 8px; border-radius:12px;
  border:1px solid var(--border-subtle, rgba(255,255,255,0.08));
  background:var(--bg-secondary, #16213e);
  color:var(--text-primary, #eaeaea);
  font-size:13px; cursor:pointer;
  transition:all 0.2s ease;
}
.share-channel-btn:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.share-channel-btn:active { transform:scale(0.96); }
.share-channel-icon {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff;
}
.share-channel-icon.wechat { background:#07C160; }
.share-channel-icon.moments { background:linear-gradient(135deg,#07C160,#2DB84D); }
.share-channel-icon.douyin { background:#111; border:1px solid #333; }
.share-channel-icon.xiaohongshu { background:#FF2442; }
.share-channel-name { font-weight:500; }
body.light-theme .share-channel-btn {
  background:#f5f7fa; border-color:#e2e8f0; color:#1a1a2e;
}
body.light-theme .share-channel-btn:hover {
  background:#eef1f5; box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

/* ===== Main Content ===== */
.main-content {
  flex:1; display:flex;
  height:calc(100vh - var(--header-height) - var(--footer-height));
}

/* ===== Left Panel ===== */
.left-panel {
  width:45%; min-width:360px;
  background:var(--bg-secondary); border-right:1px solid var(--border-subtle);
  display:flex; flex-direction:column; overflow:hidden;
}
.panel-mode { display:none; flex-direction:column; flex:1; overflow:hidden; }
.panel-mode.active { display:flex; }

/* ===== Chat Panel ===== */
.chat-messages {
  flex:1; overflow-y:auto; padding:var(--space-md);
  display:flex; flex-direction:column; gap:var(--space-md);
}

/* Welcome */
.chat-welcome {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:var(--space-xl);
}
.welcome-icon {
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-lg); opacity:0.9;
}
.welcome-icon svg { fill:#fff; }
.chat-welcome h3 {
  font-size:1.3rem; color:var(--text-primary); margin-bottom:var(--space-sm);
}
.chat-welcome p {
  color:var(--text-secondary); font-size:0.95rem; margin-bottom:var(--space-lg);
  max-width:320px;
}
.quick-questions {
  display:flex; flex-wrap:wrap; gap:var(--space-sm);
  justify-content:center; max-width:380px;
}
.quick-q {
  padding:8px 14px; border:1px solid var(--border-subtle);
  background:var(--bg-card); border-radius:20px;
  color:var(--text-secondary); font-size:0.82rem;
  cursor:pointer; transition:var(--transition-fast);
  white-space:nowrap;
}
.quick-q:hover {
  border-color:var(--accent-primary); color:var(--accent-primary);
  background:rgba(233,69,96,0.1);
}

/* Messages */
.chat-message {
  display:flex; gap:var(--space-sm); max-width:100%;
  animation:msgIn 0.3s ease;
}
@keyframes msgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.chat-message.user { flex-direction:row-reverse; }

.message-avatar {
  flex-shrink:0; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.user-avatar { background:var(--bg-tertiary); }
.user-avatar svg { fill:var(--text-secondary); }
.ai-avatar { background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary)); }
.ai-avatar svg { fill:#fff; }

.message-bubble {
  max-width:85%; padding:var(--space-md);
  border-radius:var(--radius-md); line-height:1.7; font-size:0.92rem;
}
.user-bubble {
  background:var(--accent-primary); color:#fff;
  border-bottom-right-radius:4px;
}
.chat-message.user .message-bubble { border-bottom-right-radius:4px; border-bottom-left-radius:var(--radius-md); }
.chat-message.assistant .message-bubble {
  background:var(--bg-card); color:var(--text-primary);
  border-bottom-left-radius:4px;
}

.message-content { word-break:break-word; }
.message-content br { display:block; margin-bottom:4px; }
.message-content strong { color:var(--accent-secondary); }
.message-content code {
  background:rgba(233,69,96,0.15); padding:1px 6px; border-radius:3px;
  font-size:0.88em; color:var(--accent-secondary);
}
.message-content pre {
  background:var(--bg-primary); padding:var(--space-md);
  border-radius:var(--radius-sm); overflow-x:auto; margin:var(--space-sm) 0;
}
.message-content pre code { background:none; padding:0; }
.message-content .mnemonic {
  background:rgba(233,69,96,0.2); padding:2px 8px; border-radius:4px;
  color:var(--accent-secondary); font-weight:500;
}

/* Typing indicator */
.typing-indicator {
  display:flex; gap:4px; padding:4px 0;
}
.typing-indicator span {
  width:8px; height:8px; border-radius:50%; background:var(--text-muted);
  animation:typingBounce 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay:0.2s; }
.typing-indicator span:nth-child(3) { animation-delay:0.4s; }
@keyframes typingBounce {
  0%,60%,100% { transform:translateY(0) } 30% { transform:translateY(-6px) }
}

/* Message actions */
.message-actions { margin-top:var(--space-sm); display:flex; gap:var(--space-sm); }
.video-gen-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border:1px solid var(--accent-primary);
  background:rgba(233,69,96,0.1); border-radius:20px;
  color:var(--accent-primary); font-size:0.82rem;
  cursor:pointer; transition:var(--transition-fast);
}
.video-gen-btn:hover { background:rgba(233,69,96,0.2); }
.video-gen-btn:disabled { opacity:0.7; cursor:wait; }
.video-gen-btn.ready {
  background:var(--accent-primary); color:#fff;
  border-color:var(--accent-primary);
}
.mini-spinner {
  width:14px; height:14px; border:2px solid var(--border-subtle);
  border-top-color:var(--accent-primary); border-radius:50%;
  animation:spin 0.8s linear infinite; display:inline-block;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* Chat input */
.chat-input-area {
  padding:var(--space-md); border-top:1px solid var(--border-subtle);
  background:var(--bg-secondary);
}
.input-wrapper {
  display:flex; align-items:flex-end; gap:var(--space-sm);
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:8px 12px;
  transition:border-color var(--transition-fast);
}
.input-wrapper:focus-within { border-color:var(--accent-primary); }
.input-wrapper textarea {
  flex:1; border:none; background:none; color:var(--text-primary);
  font-size:0.95rem; line-height:1.5; resize:none; outline:none;
  max-height:120px; font-family:inherit;
}
.input-wrapper textarea::placeholder { color:var(--text-muted); }
.send-btn {
  flex-shrink:0; width:36px; height:36px; border:none;
  background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
  border-radius:50%; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  transition:var(--transition-fast);
}
.send-btn svg { fill:#fff; }
.send-btn:hover { box-shadow:var(--shadow-glow); transform:scale(1.05); }
.send-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.input-hint {
  font-size:0.75rem; color:var(--text-muted); margin-top:6px; padding-left:4px;
}

/* Error message */
.error-msg { color:var(--text-secondary); }
.error-hint { font-size:0.82rem; color:var(--text-muted); margin-top:4px; }
.retry-btn {
  margin-top:8px; padding:6px 16px; border:1px solid var(--accent-primary);
  background:transparent; color:var(--accent-primary); border-radius:var(--radius-sm);
  cursor:pointer; font-size:0.85rem;
}
.retry-btn:hover { background:rgba(233,69,96,0.1); }

/* ===== Browse Panel ===== */
.panel-header {
  padding:var(--space-md); border-bottom:1px solid var(--border-subtle);
}
.panel-title {
  font-size:1rem; color:var(--text-secondary);
  display:flex; align-items:center; gap:var(--space-sm);
}
.panel-title svg { width:18px; height:18px; fill:var(--accent-primary); }
.knowledge-list {
  flex:1; overflow-y:auto; padding:var(--space-sm);
  display:flex; flex-direction:column; gap:var(--space-xs);
}
.knowledge-item {
  background:var(--bg-card); border-radius:var(--radius-sm);
  padding:var(--space-md); cursor:pointer;
  transition:var(--transition-fast); border:1px solid transparent;
  border-left:3px solid transparent;
}
.knowledge-item:hover { background:var(--bg-tertiary); border-left-color:var(--accent-primary); }
.knowledge-item.active {
  background:var(--bg-tertiary); border-color:var(--border-active);
  border-left-color:var(--accent-primary); box-shadow:var(--shadow-glow);
}
.item-header { display:flex; justify-content:space-between; margin-bottom:4px; }
.item-id {
  font-size:0.7rem; color:var(--accent-primary); font-weight:600;
  background:rgba(233,69,96,0.15); padding:1px 6px; border-radius:3px;
}
.item-duration { font-size:0.7rem; color:var(--text-muted); }
.item-title { font-size:0.92rem; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
.item-chapter { font-size:0.78rem; color:var(--text-muted); }
.item-summary {
  font-size:0.82rem; color:var(--text-secondary); margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.knowledge-item.active .item-title { color:var(--accent-primary); }

/* ===== Right Panel ===== */
.right-panel {
  flex:1; background:var(--bg-primary);
  display:flex; flex-direction:column; overflow:hidden;
}
.video-section {
  flex:0 0 auto; padding:var(--space-md);
  background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);
}
.video-container {
  position:relative; width:100%; max-width:800px; margin:0 auto;
  aspect-ratio:16/9; background:var(--bg-card);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card);
}
.video-container video, .video-placeholder {
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:contain; background:#000;
}
.video-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--bg-card),var(--bg-secondary));
}
.video-placeholder-icon {
  width:64px; height:64px; background:var(--accent-primary); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-md); opacity:0.8;
}
.video-placeholder-icon svg { width:32px; height:32px; fill:#fff; }
.video-placeholder-text { font-size:0.9rem; color:var(--text-muted); }

/* Detail */
.detail-section { flex:1; overflow-y:auto; padding:var(--space-lg); }
.detail-header { margin-bottom:var(--space-lg); padding-bottom:var(--space-md); border-bottom:1px solid var(--border-subtle); }
.detail-chapter { font-size:0.82rem; color:var(--accent-primary); margin-bottom:4px; }
.detail-title { font-size:1.4rem; font-weight:700; margin-bottom:var(--space-sm); }
.detail-summary { font-size:0.95rem; color:var(--text-secondary); line-height:1.7; }
.key-points-card {
  background:var(--bg-card); border-radius:var(--radius-md);
  padding:var(--space-lg); border:1px solid var(--border-subtle);
}
.key-points-header { margin-bottom:var(--space-md); }
.key-points-title { font-size:1rem; font-weight:600; }
.key-points-list { list-style:none; display:flex; flex-direction:column; gap:var(--space-sm); }
.key-point-item {
  display:flex; gap:var(--space-md); padding:var(--space-md);
  background:var(--bg-secondary); border-radius:var(--radius-sm);
  border-left:3px solid transparent; transition:var(--transition-fast);
}
.key-point-item:hover { background:var(--bg-tertiary); border-left-color:var(--accent-primary); }
.point-number {
  flex-shrink:0; width:24px; height:24px;
  background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:700; color:#fff;
}
.point-text { flex:1; font-size:0.9rem; color:var(--text-secondary); line-height:1.6; }

/* ===== Footer ===== */
.app-footer {
  height:var(--footer-height); background:var(--bg-secondary);
  border-top:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-lg); font-size:0.8rem;
}
.footer-left { display:flex; align-items:center; gap:var(--space-md); }
.progress-info { display:flex; align-items:center; gap:var(--space-sm); color:var(--text-secondary); }
.progress-bar { width:150px; height:5px; background:var(--bg-card); border-radius:3px; overflow:hidden; }
.progress-fill {
  height:100%; background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));
  border-radius:3px; transition:width 0.4s ease; width:0%;
}
.footer-right { display:flex; align-items:center; gap:var(--space-md); }
.status-badge { display:flex; align-items:center; gap:4px; color:var(--text-muted); }
.status-dot { width:6px; height:6px; background:#10b981; border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ===== Loading ===== */
.loading-overlay {
  position:fixed; inset:0; background:rgba(26,26,46,0.95);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:1000; transition:opacity 0.3s;
}
.loading-overlay.hidden { opacity:0; pointer-events:none; }
.loading-spinner {
  width:48px; height:48px; border:3px solid var(--bg-card);
  border-top-color:var(--accent-primary); border-radius:50%;
  animation:spin 0.8s linear infinite;
}
.loading-text { margin-top:var(--space-md); color:var(--text-secondary); }

/* ===== Empty State ===== */
.empty-state {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:var(--space-xl);
}
.empty-icon {
  width:80px; height:80px; background:var(--bg-card); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-lg); opacity:0.6;
}
.empty-icon svg { width:40px; height:40px; fill:var(--text-muted); }
.empty-title { font-size:1.1rem; color:var(--text-primary); margin-bottom:var(--space-xs); }
.empty-desc { color:var(--text-muted); font-size:0.9rem; }

/* ===== Responsive ===== */
@media (max-width:768px) {
  :root {
    --header-height: 52px;
  }
  
  /* header 允许换行 */
  .app-header {
    padding: 0 var(--space-sm);
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-height);
  }
  
  .brand-title {
    font-size: 1rem;
  }
  
  .header-brand {
    flex: 1;
    min-width: 0;
  }
  
  .header-actions {
    flex-shrink: 0;
  }
  
  /* 科目 tab 独立一行，确保移动端可见 */
  .header-tabs {
    order: 3;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 6px var(--space-sm);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }
  
  .header-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .tab-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  /* 移动端隐藏header里的导航按钮，底部栏已有 */
  .quiz-entry-btn {
    display: none;
  }
  
  .header-actions {
    gap: 4px;
  }
  
  /* 布局调整 */
  .left-panel { width:100%; min-width:0; }
  .main-content { flex-direction:column; }
  .right-panel { min-height:50vh; }
  .video-container { max-width:100%; }
  .video-share-area .share-buttons {
    flex-direction:column;
  }
  .video-share-area .share-btn {
    min-width:100%;
  }
  
  /* 隐藏桌面footer，显示移动端底部导航 */
  .app-footer {
    display: none;
  }
  
  .mobile-bottom-nav {
    display: flex;
  }
  
  .main-content {
    padding-bottom: 60px;
  }
}

/* 桌面端隐藏移动端底部导航 */
@media (min-width: 769px) {
  .mobile-bottom-nav {
    display: none;
  }
}

/* ===== 移动端底部导航栏 ===== */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 99;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--text-secondary);
  transition: var(--transition-fast);
  border-radius: var(--radius-sm);
  position: relative;
}

.mobile-nav-item:hover {
  color: var(--accent-primary);
  background: rgba(233, 69, 96, 0.1);
}

.mobile-nav-item.active {
  color: var(--accent-primary);
}

.mobile-nav-item svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.mobile-nav-item span {
  font-size: 0.75rem;
  font-weight: 500;
}

.mobile-nav-item .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  background: var(--accent-primary);
  color: #fff;
  border-radius: 8px;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ===== 新用户引导弹窗 ===== */
.guide-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
  padding: var(--space-md);
}

.guide-modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 500px;
  width: 100%;
  animation: slideUp 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.guide-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.guide-header h2 {
  font-size: 1.5rem;
  color: var(--accent-primary);
  margin-bottom: var(--space-sm);
}

.guide-header p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.guide-step {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-primary);
}

.guide-step-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.guide-step-content {
  flex: 1;
}

.guide-step-content h3 {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.guide-step-content p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.guide-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.guide-btn {
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  flex: 1;
}

.guide-btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: #fff;
  box-shadow: 0 4px 12px rgba(233, 69, 96, 0.3);
}

.guide-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(233, 69, 96, 0.4);
}

.guide-btn-secondary {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.guide-btn-secondary:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
/* ===== 统计面板样式 ===== */
.stats-toggle {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-fast);
  opacity: 0.7;
}
.stats-toggle:hover {
  opacity: 1;
  border-color: var(--accent-primary);
  background: rgba(233, 69, 96, 0.1);
}

.stats-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.stats-modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 300px;
  max-width: 400px;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}

.stats-header h3 {
  font-size: 1.2rem;
  color: var(--text-primary);
}

.stats-close-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.stats-close-btn:hover {
  color: var(--accent-primary);
}

.stats-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stats-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
}

.stats-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.stats-value {
  color: var(--text-primary);
  font-weight: 500;
}

.source-value {
  color: var(--accent-primary);
  font-weight: bold;
}

.stats-footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.stats-footer small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ============================================
   VIP会员系统样式
   ============================================ */

/* VIP按钮 */
.vip-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid #e94560;
  background: transparent;
  color: #e94560;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vip-btn:hover {
  background: #e94560;
  color: #fff;
}

.vip-btn.is-vip {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border-color: #ffd700;
  color: #1a1a2e;
  font-weight: 600;
}

.vip-btn.is-vip:hover {
  opacity: 0.9;
}

/* VIP弹窗 */
.vip-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.vip-modal-overlay.active {
  display: flex;
}

.vip-modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  max-height: 95vh;
  overflow-y: auto;
  position: relative;
  padding: 20px 20px;
  border: 1px solid rgba(233, 69, 96, 0.3);
}

.vip-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1;
}

.vip-modal-close:hover {
  color: var(--text-primary);
}

.vip-modal-header {
  text-align: center;
  margin-bottom: 14px;
}

.vip-modal-header h2 {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.vip-modal-header p {
  color: var(--text-secondary);
  font-size: 0.82rem;
  margin: 0;
}

/* 权益对比 */
.vip-benefits {
  margin-bottom: 14px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.benefit-item:last-child {
  border-bottom: none;
}

.benefit-icon {
  font-size: 1.2rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.benefit-text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.benefit-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.benefit-tag.free {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.benefit-tag.vip {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-weight: 600;
}

/* 套餐选择 */
.vip-plans {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.vip-plan {
  flex: 1;
  background: var(--bg-secondary);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.vip-plan:hover {
  border-color: var(--accent-primary);
}

.vip-plan.selected {
  border-color: #e94560;
  background: rgba(233, 69, 96, 0.08);
}

.vip-plan.popular {
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.06);
}

.vip-plan.popular.selected {
  border-color: #e94560;
  background: rgba(233, 69, 96, 0.08);
}

.plan-badge {
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  display: inline-block;
  margin-bottom: 4px;
}

.plan-badge.hot {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-weight: 600;
}

.plan-badge.save {
  background: #4ecca3;
  color: #1a1a2e;
  font-weight: 600;
}

.plan-name {
  font-size: 0.82rem;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 4px;
}

.plan-price {
  color: #e94560;
  font-weight: 700;
}

.price-symbol {
  font-size: 0.9rem;
}

.price-num {
  font-size: 1.6rem;
}

.plan-unit {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* 支付区域 */
.vip-payment {
  margin-bottom: 12px;
  padding: 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.payment-qr-area {
  text-align: center;
}

.qr-placeholder {
  width: 200px;
  height: 200px;
  margin: 0 auto 8px;
  background: #fff;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #333;
  overflow: hidden;
}

.qr-code-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.qr-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.qr-placeholder p {
  font-size: 0.8rem;
  margin: 2px 0;
}

.qr-hint {
  color: #666;
  font-size: 0.7rem !important;
}

.payment-wechat-id {
  margin-top: 6px;
}

.payment-wechat-id p {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin: 4px 0;
}

.payment-wechat-id strong {
  color: #07c160;
}

.payment-note {
  color: var(--text-secondary) !important;
  font-size: 0.78rem !important;
}

/* 激活码 */
.vip-activate {
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.activate-title {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.activate-input-row {
  display: flex;
  gap: 8px;
  max-width: 300px;
  margin: 0 auto;
}

.activate-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
}

.activate-input:focus {
  border-color: var(--accent-primary);
}

.activate-btn {
  padding: 8px 16px;
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.activate-btn:hover {
  background: #d63a54;
}

/* 用量限制弹窗 */
.limit-modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  max-width: 380px;
  width: 100%;
  position: relative;
  padding: 32px 24px;
  text-align: center;
  border: 1px solid rgba(233, 69, 96, 0.3);
}

.limit-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.limit-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.limit-modal h3 {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.limit-modal p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 16px;
}

.limit-benefits-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.limit-benefits-mini span {
  font-size: 0.8rem;
  color: var(--text-primary);
  background: var(--bg-secondary);
  padding: 4px 10px;
  border-radius: 12px;
}

.limit-cta-btn {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #e94560, #ff6b6b);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 12px;
}

.limit-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
}

.limit-free-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* VIP状态指示 */
.vip-usage-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  margin-left: 8px;
}

.vip-usage-badge.warning {
  background: rgba(255, 152, 0, 0.15);
  color: #ff9800;
}

.vip-usage-badge.exhausted {
  background: rgba(233, 69, 96, 0.15);
  color: #e94560;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .vip-modal {
    padding: 14px 14px;
    max-height: 90vh;
  }

  .vip-plans {
    flex-direction: row;
    gap: 6px;
  }

  .vip-plan {
    padding: 8px 4px;
  }

  .price-num {
    font-size: 1.2rem;
  }

  .benefit-item {
    gap: 6px;
    padding: 6px 0;
  }

  .benefit-text {
    font-size: 0.82rem;
  }

  .benefit-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  .qr-placeholder {
    width: 180px;
    height: 180px;
  }
}

/* ===== AI学习教练按钮样式 ===== */
.quiz-entry-btn.btn-coach {
  background: linear-gradient(135deg, #e94560, #533483);
}
.quiz-entry-btn.btn-coach:hover {
  background: linear-gradient(135deg, #f05672, #6a45a3);
}

/* 移动端5个导航项适配 */
@media (max-width: 768px) {
  .mobile-nav-item {
    padding: 6px 4px;
    gap: 2px;
  }
  .mobile-nav-item span {
    font-size: 0.62rem;
    letter-spacing: 0;
  }
  .mobile-nav-item svg {
    width: 19px;
    height: 19px;
  }
}

/* 超小屏手机适配 (iPhone SE等 <=375px) */
@media (max-width: 375px) {
  .mobile-nav-item span {
    font-size: 0.58rem;
  }
  .mobile-nav-item svg {
    width: 18px;
    height: 18px;
  }
  .tab-btn {
    padding: 6px 10px;
    font-size: 0.78rem;
  }
}