/* ============================================
   Rusminlab 学习模块 v2 样式
   ============================================ */

/* 通用模态框 */
.lm-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9990;opacity:0;transition:opacity .3s; }
.lm-overlay.show { opacity:1; }
.lm-modal { position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);background:#fff;border-radius:20px;width:92%;max-width:640px;max-height:85vh;z-index:9991;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25);opacity:0;transition:all .3s; }
.lm-modal.show { opacity:1;transform:translate(-50%,-50%) scale(1); }
.lm-modal-header { display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #eee;flex-shrink:0; }
.lm-modal-title { font-size:18px;font-weight:700;color:#2c3e50; }
.lm-modal-close { width:34px;height:34px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;color:#999;transition:all .2s; }
.lm-modal-close:hover { background:#e0e0e0;color:#333; }
.lm-modal-body { padding:18px 22px;overflow-y:auto;flex:1; }

/* 空状态 */
.lm-empty { text-align:center;padding:50px 20px; }
.lm-empty-icon { font-size:44px;margin-bottom:10px; }
.lm-empty-text { font-size:15px;color:#666;font-weight:600; }
.lm-empty-hint { font-size:13px;color:#999;margin-top:6px; }

/* 按钮 */
.lm-btn-sm { padding:6px 14px;border:none;border-radius:8px;font-size:12px;cursor:pointer;font-family:inherit;transition:all .2s;display:inline-flex;align-items:center;gap:3px; }
.lm-btn-sm:hover { transform:translateY(-1px); }
.lm-btn-success { background:#d5f5e3;color:#27ae60; }
.lm-btn-danger { background:#fde2e2;color:#e74c3c; }
.lm-btn-info { background:#e3f2fd;color:#1976d2; }
.lm-btn-outline { background:transparent;border:1px solid #ddd;color:#999; }
.lm-btn-outline:hover { border-color:#e74c3c;color:#e74c3c; }
.lm-select { padding:6px 10px;border:1px solid #ddd;border-radius:6px;font-size:13px;font-family:inherit;outline:none; }

/* ============================
   模块1: 学习空间
   ============================ */
.lm-space-list { display:flex;flex-direction:column;gap:10px; }
.lm-space-card { display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #eee;border-radius:12px;cursor:pointer;transition:all .2s; }
.lm-space-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.06);border-color:#667eea; }
.lm-space-card-main { flex:1;min-width:0; }
.lm-space-name { font-size:15px;font-weight:600;color:#2c3e50;margin-bottom:3px; }
.lm-space-path { font-size:11px;color:#999;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lm-space-progress { display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:#667eea;font-weight:600; }

/* ============================
   模块2: 学习进度
   ============================ */
.lm-progress-panel { width:100%;max-width:1200px;margin:0 auto 20px;padding:12px 20px;background:#f8f9fa;border-radius:10px;border:1px solid rgba(102,126,234,.12); }
.lm-progress-summary { display:flex;align-items:center;gap:10px;cursor:pointer; }
.lm-progress-label { font-size:13px;color:#667eea;font-weight:600;white-space:nowrap; }
.lm-progress-bar-mini { height:8px;background:#e8ecf5;border-radius:4px;overflow:hidden;flex:1;min-width:60px; }
.lm-progress-fill-mini { height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:4px;transition:width .5s; }
.lm-progress-pct { font-size:13px;font-weight:700;color:#667eea;min-width:32px;text-align:right; }
.lm-progress-expand { font-size:10px;color:#aaa; }

/* 进度详情弹窗 */
.lm-pd-total { text-align:center;padding:16px 0 20px;border-bottom:1px solid #f0f0f0;margin-bottom:18px; }
.lm-pd-total-label { font-size:13px;color:#888;margin-bottom:8px; }
.lm-pd-total-bar { height:14px;background:#eee;border-radius:7px;overflow:hidden;margin:0 auto;max-width:400px; }
.lm-pd-total-fill { height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:7px;transition:width .5s; }
.lm-pd-total-pct { font-size:28px;font-weight:800;color:#2c3e50;margin-top:8px; }
.lm-pd-section { margin-bottom:18px; }
.lm-pd-row { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px; }
.lm-pd-name { font-size:14px;font-weight:600;color:#333; }
.lm-pd-weight { font-size:12px;color:#888; }
.lm-weight-input { width:42px;padding:2px 4px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:12px;font-family:inherit; }
.lm-pd-slider-row { display:flex;align-items:center;gap:10px; }
.lm-slider { flex:1;-webkit-appearance:none;height:6px;background:#e8ecf5;border-radius:3px;outline:none; }
.lm-slider::-webkit-slider-thumb { -webkit-appearance:none;width:20px;height:20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(102,126,234,.4); }
.lm-slider::-moz-range-thumb { width:20px;height:20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;cursor:pointer;border:none; }
.lm-slider-val { font-size:14px;font-weight:700;color:#667eea;min-width:40px;text-align:right; }
.lm-pd-hint { font-size:12px;color:#aaa;text-align:center;margin-top:8px; }

/* ============================
   模块3: 复习单词
   ============================ */
.lm-review-settings { display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff8e1;border:1px solid #ffd54f;border-radius:10px;margin-bottom:16px;font-size:13px;color:#666;flex-wrap:wrap; }
.lm-review-count { margin-left:auto;font-size:13px; }
.lm-review-list { display:flex;flex-direction:column;gap:10px; }
.lm-review-card { border:1px solid #eee;border-radius:12px;padding:14px 16px;transition:all .2s; }
.lm-review-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.05); }
.lm-review-word-row { display:flex;align-items:center;gap:8px;margin-bottom:4px; }
.lm-review-word { font-size:17px;font-weight:700;color:#2c3e50; }
.lm-review-type { font-size:11px;background:#f0f0f0;color:#888;padding:2px 8px;border-radius:6px; }
.lm-review-meta { display:flex;align-items:center;gap:12px;margin-bottom:8px; }
.lm-review-stars { font-size:14px;color:#f5a623; }
.lm-review-stats { font-size:12px;color:#999; }
.lm-review-actions { display:flex;gap:6px;flex-wrap:wrap; }

/* 单词卡 */
.lm-wordcard { padding:20px;text-align:center; }
.lm-wc-word { font-size:28px;font-weight:800;color:#2c3e50;margin-bottom:8px; }
.lm-wc-trans { font-size:16px;color:#666;margin-bottom:12px; }
.lm-wc-info { font-size:13px;color:#888;margin-bottom:4px; }
.lm-wc-examples { margin-top:14px;text-align:left;border-top:1px solid #f0f0f0;padding-top:12px; }
.lm-wc-ex { font-size:13px;color:#555;padding:4px 0;border-bottom:1px solid #f8f8f8; }

/* ============================
   沉浸式复习模式
   ============================ */
.lm-review-start-btn { display:block;width:100%;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:14px;font-size:18px;font-weight:700;cursor:pointer;margin-bottom:16px;transition:all .3s;font-family:inherit;letter-spacing:1px; }
.lm-review-start-btn:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(102,126,234,.4); }
.lm-review-start-btn:active { transform:translateY(0); }

.lm-immersive { position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;animation:lmFadeIn .4s; }
@keyframes lmFadeIn { from { opacity:0 } to { opacity:1 } }
.lm-imm-progress { position:absolute;top:0;left:0;width:100%;height:4px;background:rgba(255,255,255,.1); }
.lm-imm-progress-fill { height:100%;background:linear-gradient(90deg,#667eea,#a78bfa);transition:width .5s;border-radius:0 2px 2px 0; }
.lm-imm-close { position:absolute;top:20px;right:24px;font-size:28px;cursor:pointer;color:rgba(255,255,255,.5);background:none;border:none;transition:color .2s; }
.lm-imm-close:hover { color:#fff; }
.lm-imm-counter { position:absolute;top:22px;left:24px;font-size:14px;color:rgba(255,255,255,.5); }
.lm-imm-card { text-align:center;max-width:560px;width:90%;padding:40px 30px;animation:lmCardIn .4s; }
@keyframes lmCardIn { from { opacity:0;transform:translateY(30px) } to { opacity:1;transform:translateY(0) } }
.lm-imm-word { font-size:48px;font-weight:800;color:#fff;margin-bottom:8px;text-shadow:0 2px 20px rgba(102,126,234,.5); }
.lm-imm-type { font-size:14px;color:rgba(255,255,255,.4);margin-bottom:6px;letter-spacing:1px; }
.lm-imm-stars { font-size:20px;color:#fbbf24;margin-bottom:8px; }
.lm-imm-stats { font-size:13px;color:rgba(255,255,255,.35);margin-bottom:30px; }
.lm-imm-sound { width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;margin:0 auto 30px;transition:all .3s; }
.lm-imm-sound:hover { background:rgba(255,255,255,.2);transform:scale(1.1); }
.lm-imm-sound.playing { background:rgba(102,126,234,.4);border-color:#667eea;animation:lmPulse 1s infinite; }
@keyframes lmPulse { 0%,100% { box-shadow:0 0 0 0 rgba(102,126,234,.4) } 50% { box-shadow:0 0 0 14px rgba(102,126,234,0) } }
.lm-imm-detail { background:rgba(255,255,255,.06);border-radius:16px;padding:20px;margin-bottom:30px;text-align:left;max-height:0;overflow:hidden;transition:max-height .4s,padding .4s;padding:0 20px; }
.lm-imm-detail.open { max-height:300px;padding:20px;overflow-y:auto; }
.lm-imm-detail-title { font-size:13px;color:rgba(255,255,255,.5);margin-bottom:8px; }
.lm-imm-detail-trans { font-size:18px;color:#fff;font-weight:600;margin-bottom:8px; }
.lm-imm-detail-info { font-size:13px;color:rgba(255,255,255,.5);margin-bottom:4px; }
.lm-imm-detail-ex { font-size:13px;color:rgba(255,255,255,.4);padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06); }
.lm-imm-actions { display:flex;gap:16px;justify-content:center;flex-wrap:wrap; }
.lm-imm-btn { padding:14px 32px;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s;font-family:inherit;min-width:130px; }
.lm-imm-btn:hover { transform:translateY(-2px); }
.lm-imm-btn-ok { background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 4px 16px rgba(5,150,105,.3); }
.lm-imm-btn-fail { background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;box-shadow:0 4px 16px rgba(220,38,38,.3); }
.lm-imm-btn-card { background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2); }
.lm-imm-btn-card:hover { background:rgba(255,255,255,.2); }
.lm-imm-result { text-align:center;animation:lmCardIn .4s; }
.lm-imm-result-icon { font-size:64px;margin-bottom:16px; }
.lm-imm-result-title { font-size:28px;font-weight:800;margin-bottom:12px; }
.lm-imm-result-stats { font-size:16px;color:rgba(255,255,255,.6);margin-bottom:30px;line-height:1.8; }
.lm-imm-result-btn { padding:14px 40px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit; }

/* 收藏按钮 */
.lm-fav-btn { transition:all .2s; }
.lm-fav-active { background:#fff8e1 !important;border-color:#ffd54f !important;color:#f5a623 !important; }

/* 加入复习按钮 */
.lm-add-review-btn { background:#fff8e1!important;color:#f59e0b!important;border:1px solid #fbbf24!important;font-weight:600!important; }
.lm-add-review-btn:hover { background:#fef3c7!important; }
.lm-add-review-done { background:#ecfdf5!important;color:#059669!important;border-color:#6ee7b7!important; }

/* 响应式 */
@media (max-width:600px) {
    .lm-modal { width:98%;max-height:92vh;border-radius:16px; }
    .lm-modal-body { padding:14px; }
    .lm-review-settings { font-size:12px; }
}

/* 场景评价按钮组 */
.scene-rating-group { display:inline-flex; gap:8px; margin-left:12px; vertical-align:middle; }
.scene-rating-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 14px!important; border-radius:20px!important; font-size:13px!important; font-weight:500!important; cursor:pointer; transition:all .2s; border:1px solid #e5e7eb!important; background:#fff!important; color:#6b7280!important; }
.scene-rating-btn:hover { border-color:#d1d5db!important; background:#f9fafb!important; }
.scene-like-btn.rating-active { background:#eff6ff!important; border-color:#93c5fd!important; color:#2563eb!important; }
.scene-dislike-btn.rating-active { background:#fef2f2!important; border-color:#fca5a5!important; color:#dc2626!important; }
.scene-suggest-btn { background:#fffbeb!important; border-color:#fcd34d!important; color:#d97706!important; }
.scene-suggest-btn:hover { background:#fef3c7!important; }
.rating-count { font-size:12px; min-width:14px; text-align:center; }
/* 建议弹窗 */
.scene-suggest-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.45); z-index:10002; display:flex; align-items:center; justify-content:center; }
.scene-suggest-modal { background:#fff; border-radius:16px; width:90%; max-width:480px; box-shadow:0 20px 60px rgba(0,0,0,.2); overflow:hidden; }
.scene-suggest-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #f3f4f6; font-size:16px; font-weight:600; }
.scene-suggest-close { font-size:24px; cursor:pointer; color:#9ca3af; line-height:1; }
.scene-suggest-close:hover { color:#374151; }
.scene-suggest-body { padding:20px; }
.scene-suggest-scene-info { padding:8px 12px; background:#f0f4ff; border-radius:8px; font-size:13px; color:#4f46e5; margin-bottom:16px; }
.scene-suggest-field { margin-bottom:14px; }
.scene-suggest-field label { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px; }
.scene-suggest-field input, .scene-suggest-field textarea, .scene-suggest-field select { width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; font-family:inherit; box-sizing:border-box; }
.scene-suggest-field input:focus, .scene-suggest-field textarea:focus, .scene-suggest-field select:focus { outline:none; border-color:#667eea; box-shadow:0 0 0 3px rgba(102,126,234,.1); }
.scene-suggest-actions { display:flex; gap:10px; margin-top:16px; }
.scene-suggest-cancel { flex:1; padding:10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; font-size:14px; font-family:inherit; }
.scene-suggest-cancel:hover { background:#f9fafb; }
.scene-suggest-submit { flex:1; padding:10px; border:none; border-radius:8px; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; cursor:pointer; font-size:14px; font-weight:600; font-family:inherit; }
.scene-suggest-submit:hover { opacity:.9; }
.scene-suggest-submit:disabled { opacity:.5; cursor:not-allowed; }
.scene-suggest-note { margin-top:12px; padding:8px 12px; background:#f0fdf4; border-radius:8px; font-size:12px; color:#059669; text-align:center; }
@media (max-width:768px) {
  .scene-rating-group { display:flex; gap:6px; margin-left:0; margin-top:8px; width:100%; justify-content:center; }
  .scene-rating-btn { padding:5px 10px!important; font-size:12px!important; }
  .scene-suggest-modal { width:95%; max-height:90vh; overflow-y:auto; }
}