/* ============================================================
   来源：views/learn/my.html 内联 <style> 第 1 块（原位抽离，66 行）
   说明：在原位置以 <link rel="stylesheet"> 引入，来源顺序不变，
        层叠结果与抽离前逐字一致，不会引起样式变化。
   ============================================================ */
.my-tab { background:none;border:none;font-size:1rem;padding:10px 16px;cursor:pointer;color:#888;border-bottom:3px solid transparent;transition:all .2s; }
.my-tab.active { color:#eb1313;border-bottom-color:#eb1313;font-weight:600; }
.my-item { display:flex;align-items:center;gap:14px;padding:14px;background:#fff;border:1px solid #f0ece6;border-radius:12px;margin-bottom:12px;transition:all .2s; }
.my-item:hover { box-shadow:0 4px 16px rgba(0,0,0,.06); }
.my-item .cover { width:64px;height:64px;border-radius:8px;background:#f5f0ea;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;overflow:hidden; }
.my-item .cover img { width:100%;height:100%;object-fit:cover; }
.my-item .info { flex:1;min-width:0; }
.my-item .title { font-size:.98rem;color:#333;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.my-item .meta { font-size:.8rem;color:#999;margin-top:4px;display:flex;gap:10px;flex-wrap:wrap; }
.my-item .op a, .my-item .op button { font-size:.82rem; }
.empty-state { text-align:center;padding:60px 0;color:var(--text-muted); }
.empty-state .icon { font-size:3rem;display:block;margin-bottom:12px; }
/* 我的课程：概览条 + 响应式卡片网格 */
.course-summary { display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem;color:#8a837c;background:#faf8f5;border:1px solid #f0ece6;border-radius:10px;padding:9px 16px;margin-bottom:16px; }
.course-summary strong { color:#c81010;font-size:.95rem; }
.course-summary .cs-sep { color:#ddd; }
.course-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px; }
.course-card { display:flex;flex-direction:column;background:#fff;border:1px solid #f0ece6;border-radius:14px;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s; }
.course-card:hover { box-shadow:0 12px 30px rgba(0,0,0,.1); transform:translateY(-3px); border-color:#f3d9c0; }
.course-cover { position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16 / 9;background:linear-gradient(135deg,#f7efe6,#efe3d5);overflow:hidden;text-decoration:none; }
.course-cover img { width:100%;height:100%;object-fit:cover; }
.course-cover .course-ph { font-size:2.6rem;opacity:.7; }
.course-badge { position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.62);color:#fff;font-size:.72rem;padding:2px 8px;border-radius:10px; }
.course-play { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);width:46px;height:46px;border-radius:50%;background:rgba(235,19,19,.92);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.05rem;opacity:0;transition:all .22s;padding-left:3px; }
.course-card:hover .course-play { opacity:1;transform:translate(-50%,-50%) scale(1); }
.course-body { padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1; }
.course-title { font-size:.96rem;font-weight:600;color:#2c2b28;text-decoration:none;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em; }
.course-title:hover { color:#eb1313; }
.course-meta { display:flex;gap:10px;flex-wrap:wrap;font-size:.78rem;color:#9a938b; }
.course-meta .course-cont { color:#b47a2a; }
.course-progress { height:6px;background:#f0ece6;border-radius:4px;overflow:hidden;margin-top:auto; }
.course-progress .cp-bar { height:100%;background:linear-gradient(90deg,#eb1313,#e0952e);border-radius:4px;transition:width .3s; }
.course-foot { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.course-status { font-size:.76rem;padding:1px 9px;border-radius:10px; }
.course-status.new { background:#f1efec;color:#8a837c; }
.course-status.doing { background:#fdeee6;color:#c81010; }
.course-status.done { background:#e9f7ef;color:#22a65e; }
.course-watch { font-size:.82rem;padding:6px 14px;background:#eb1313;color:#fff;border-radius:8px;text-decoration:none;white-space:nowrap;transition:background .2s; }
.course-watch:hover { background:#c81010;color:#fff; }
@media (max-width:640px){ .course-grid { grid-template-columns:1fr; } }
.btn { display:inline-flex;align-items:center;gap:4px;height:34px;padding:5px 16px;border:1px solid #e0d8d0;border-radius:30px;background:#fff;color:#666;cursor:pointer;text-decoration:none;font-size:.85rem;font-weight:600;transition:all .2s;white-space:nowrap; }
.btn:hover { border-color:var(--sun-red);color:var(--sun-red); }
.btn-primary { background:#eb1313;color:#fff;border-color:#eb1313; }
.btn-primary:hover { background:#c81010;color:#fff; }
/* 收藏 / 点赞 列表项（按内容类型区分：工具教程 / 康熙字典） */
.mc-item { display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid #f0ece6;border-radius:12px;margin-bottom:12px;transition:all .2s; }
.mc-item:hover { box-shadow:0 6px 20px rgba(0,0,0,.07); transform:translateY(-1px); }
.mc-item.tool { border-left:4px solid #eb1313; }
.mc-item.kangxi { border-left:4px solid #b8860b; }
.mc-cover { width:56px;height:56px;border-radius:10px;background:#f5f0ea;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;overflow:hidden; }
.mc-cover img { width:100%;height:100%;object-fit:cover; }
.mc-body { flex:1;min-width:0; }
.mc-title { font-size:.98rem;color:#333;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none; }
.mc-title:hover { color:#eb1313; }
.mc-meta { display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:.78rem;color:#999; }
.mc-badge { padding:1px 9px;border-radius:10px;font-size:.72rem;font-weight:500; }
.mc-badge.tool { background:#fdecec;color:#c81010; }
.mc-badge.kangxi { background:#faf3e0;color:#9a6b0a; }
.mc-tag { color:#aaa; }
.mc-time { color:#b5aea6; }
.mc-ops { display:flex;gap:8px;align-items:center;flex-shrink:0; }
.mc-btn { padding:5px 14px;border-radius:30px;font-size:.82rem;text-decoration:none;cursor:pointer;border:1px solid #e0d8d0;background:#fff;color:#666;transition:all .2s;display:inline-flex;align-items:center;white-space:nowrap; }
.mc-btn:hover { border-color:#eb1313;color:#eb1313; }
.mc-btn.danger { color:#eb1313; }
.mc-btn.danger:hover { background:#fdecec; }
@media (max-width:640px){ .mc-item { flex-wrap:wrap; } .mc-ops { width:100%; justify-content:flex-end; } }