/* V40 SIDEBAR LAYOUT */
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif; background: #f1f5f9; min-width: 1024px; margin: 0; color: #0f172a; }
.sidebar { width: var(--sidebar-width, 240px); background: var(--sidebar-bg, #1B3A5C); min-height: 100vh; position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; overflow-y: auto; }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.sidebar-logo { padding: 24px 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar-logo h1 { color: #fff; font-size: 16px; font-weight: 700; margin: 0; letter-spacing: 0.5px; }
.sidebar-logo span { color: rgba(148,163,184,0.8); font-size: 11px; margin-top: 4px; display: block; }
.sidebar-nav { padding: 12px 0 24px; }
.nav-section-title { padding: 16px 20px 6px; font-size: 11px; color: rgba(148,163,184,0.6); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.nav-item { display: flex; align-items: center; padding: 10px 20px; color: rgba(148,163,184,0.85); font-size: 13.5px; cursor: pointer; transition: all 0.15s; border-left: 3px solid transparent; gap: 10px; user-select: none; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
.nav-item.active { background: rgba(59,130,246,0.12); color: #60a5fa; border-left-color: #3b82f6; font-weight: 600; }
.nav-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-badge { margin-left: auto; font-size: 11px; font-weight: 600; background: rgba(59,130,246,0.2); color: #60a5fa; padding: 1px 7px; border-radius: 10px; }
.main-wrap { margin-left: var(--sidebar-width, 240px); min-height: 100vh; }
.v40-header { background: #fff; padding: 16px 32px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50; }
.v40-header .breadcrumb { font-size: 14px; color: #64748b; }
.v40-header .breadcrumb span { color: #3b82f6; font-weight: 500; }
.v40-content { padding: 24px 32px; }
.section { display: none; }
.section.active { display: block; }
.books-grid-wrapper { padding: 20px 24px; }
.footer { padding: 20px 32px 32px; text-align: center; }

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#1B3A5C;--blue:#3b82f6;--green:#10b981;--orange:#f59e0b;--red:#ef4444;
  --bg:#f3f5f8;--card:#fff;--text:#1e293b;--text2:#64748b;--text3:#94a3b8;
  --border:#e2e8f0;--shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.07);--shadow-lg:0 8px 24px rgba(0,0,0,.1);--radius:10px;
}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;width:100%;overflow-x:hidden}
a{color:var(--blue);text-decoration:none}




.section-title{font-size:15px;font-weight:700;color:var(--primary);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.section-title::before{content:'';width:3px;height:16px;background:var(--blue);border-radius:2px}

/* KPI */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.kpi-card{background:var(--card);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:16px;transition:.2s;border:1px solid var(--border)}
.kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kpi-chart{width:68px;height:68px;flex-shrink:0}
.kpi-info{flex:1;min-width:0}
.kpi-label{font-size:12.5px;color:var(--text2);margin-bottom:2px}
.kpi-value{font-size:24px;font-weight:800;color:var(--primary);line-height:1.2}
.kpi-sub{font-size:11.5px;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:6px}
.kpi-trend{font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px}
.kpi-trend.up{color:var(--green);background:rgba(16,185,129,.1)}
.kpi-trend.down{color:var(--red);background:rgba(239,68,68,.1)}

/* CONTINUE LEARNING BANNER */
.continue-banner{background:linear-gradient(135deg,#1B3A5C 0%,#2563eb 100%);border-radius:var(--radius);padding:20px 28px;margin-bottom:18px;display:flex;align-items:center;gap:20px;color:#fff;box-shadow:var(--shadow-md)}
.continue-info{flex:1}
.continue-label{font-size:12px;color:rgba(255,255,255,.7);margin-bottom:4px;font-weight:500}
.continue-book{font-size:16px;font-weight:700;margin-bottom:2px}
.continue-chapter{font-size:13px;color:rgba(255,255,255,.85)}
.continue-progress{display:flex;align-items:center;gap:12px}
.continue-pct{font-size:28px;font-weight:800}
.continue-bar{width:200px;height:6px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden}
.continue-bar-fill{height:100%;background:#fff;border-radius:3px;transition:width .6s}
.continue-btn{padding:10px 28px;background:#fff;color:var(--primary);border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;white-space:nowrap}
.continue-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}

/* TIMELINE */
.timeline-section{background:var(--card);border-radius:var(--radius);padding:22px 28px;box-shadow:var(--shadow);margin-bottom:18px;border:1px solid var(--border)}
.timeline-track{display:flex;gap:0;position:relative;margin-top:8px}
.timeline-stage{flex:1;text-align:center;position:relative;padding:0 6px;cursor:pointer}
.timeline-stage::before{content:'';position:absolute;top:18px;left:0;right:0;height:3px;background:var(--border);z-index:0}
.timeline-stage:first-child::before{left:50%}
.timeline-stage:last-child::before{right:50%}
.stage-dot{width:36px;height:36px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;position:relative;z-index:1;transition:.2s}
.stage-dot.completed{background:var(--green)}
.stage-dot.in-progress{background:var(--blue);box-shadow:0 0 0 4px rgba(59,130,246,.2)}
.stage-dot.locked{background:var(--text3)}
.timeline-stage:hover .stage-dot{transform:scale(1.1)}
.stage-name{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:2px}
.stage-pct{font-size:11.5px;color:var(--text2)}
.stage-hours{font-size:10.5px;color:var(--text3);margin-top:1px}
.stage-status{font-size:11px;margin-top:3px;font-weight:500}
.stage-status.done{color:var(--green)}
.stage-status.active{color:var(--blue)}
.stage-status.pending{color:var(--text3)}

/* TEXTBOOK SECTION */
.textbook-section{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;border:1px solid var(--border);overflow:hidden}
.textbook-header{padding:18px 24px 0;display:flex;align-items:center;justify-content:space-between}
.search-filter-bar{padding:12px 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.search-box{flex:1;max-width:360px;position:relative}
.search-box input{width:100%;padding:8px 12px 8px 36px;border:1px solid var(--border);border-radius:8px;font-size:13px;outline:none;transition:.2s;background:#f8fafc}
.search-box input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.search-box .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);display:flex;align-items:center}
.filter-btns{display:flex;gap:4px}
.filter-btn{padding:6px 14px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;background:#fff;transition:.15s}
.filter-btn:hover{border-color:#cbd5e1;background:#f8fafc}
.filter-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.tab-bar{display:flex;background:#f8fafc;border-bottom:1px solid var(--border)}
.tab-btn{padding:13px 24px;font-size:13.5px;font-weight:500;color:var(--text2);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap}
.tab-btn:hover{color:var(--primary);background:rgba(0,0,0,.02)}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;background:#fff}
.tab-content{display:none;padding:20px 24px}
.tab-content.active{display:block}
.books-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:1280px){.books-grid{grid-template-columns:repeat(3,1fr)}}

/* BOOK CARD with COVER */
.book-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.25s;background:#fff}
.book-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:#cbd5e1}
.book-card.hidden{display:none}
.book-cover{height:80px;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;position:relative;cursor:pointer}
.book-cover-title{font-size:15px;font-weight:700;color:#fff;line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.15)}
.book-cover-id{position:absolute;top:10px;right:12px;font-size:11px;font-weight:600;color:rgba(255,255,255,.8);background:rgba(255,255,255,.15);padding:2px 8px;border-radius:4px}
.book-cover-tags{display:flex;gap:6px;margin-top:6px}
.book-tag{font-size:10px;font-weight:600;padding:1px 7px;border-radius:3px;background:rgba(255,255,255,.2);color:rgba(255,255,255,.9)}
.book-body{padding:12px 16px}
.book-stats{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.book-progress-label{font-size:12px;color:var(--text2)}
.book-progress-pct{font-size:13px;font-weight:700;color:var(--primary)}
.book-progress-bar{height:6px;background:#f1f5f9;border-radius:3px;overflow:hidden;margin-bottom:10px}
.book-progress-fill{height:100%;border-radius:3px;transition:width .4s ease}
.book-expand-btn{width:100%;padding:6px;border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--text2);cursor:pointer;background:#fafbfc;transition:.15s;display:flex;align-items:center;justify-content:center;gap:4px}
.book-expand-btn:hover{background:#f1f5f9;color:var(--text)}

/* Chapter list */
.chapter-list{padding:0;border-top:1px solid var(--border);background:#fafbfc;max-height:0;overflow:hidden;transition:max-height .3s ease}
.chapter-list.open{max-height:2000px;padding:8px 0}
.chapter-item{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:12.5px;line-height:1.5;cursor:pointer;transition:.1s}
.chapter-item:hover{background:#f1f5f9}
.ch-status{flex-shrink:0;width:18px;text-align:center;font-size:12px}
.ch-status.done{color:var(--green)}
.ch-status.current{color:var(--blue)}
.ch-status.locked{color:var(--text3)}
.ch-text{flex:1;color:var(--text)}
.chapter-item .ch-status.locked~.ch-text{color:var(--text3)}
.ch-action{font-size:11px;font-weight:600;padding:2px 10px;border-radius:4px;white-space:nowrap;flex-shrink:0;opacity:0;transition:.15s}
.chapter-item:hover .ch-action{opacity:1}
.ch-action.start{color:var(--blue);background:rgba(59,130,246,.08)}
.ch-action.continue{color:var(--orange);background:rgba(245,158,11,.08)}
.ch-action.review{color:var(--green);background:rgba(16,185,129,.08)}

/* Cover gradients by category */
.cover-core{background:linear-gradient(135deg,#1B3A5C 0%,#2563eb 100%)}
.cover-manual{background:linear-gradient(135deg,#065f46 0%,#10b981 100%)}
.cover-regulation{background:linear-gradient(135deg,#7c2d12 0%,#f59e0b 100%)}
.cover-tool{background:linear-gradient(135deg,#4c1d95 0%,#8b5cf6 100%)}
.cover-case{background:linear-gradient(135deg,#9f1239 0%,#f43f5e 100%)}
.cover-platform{background:linear-gradient(135deg,#0e7490 0%,#06b6d4 100%)}

/* DUAL COLUMNS */
.dual-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.dual-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden}
.dual-card-header{padding:16px 20px 0;font-size:14px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:8px}
.dual-card-header::before{content:'';width:3px;height:14px;background:var(--blue);border-radius:2px}
.radar-chart{width:100%;height:340px;padding:8px}

/* Tasks */
.task-list{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.task-card{border:1px solid var(--border);border-radius:8px;padding:14px 16px;display:flex;align-items:center;gap:14px;transition:.15s}
.task-card:hover{border-color:#cbd5e1;box-shadow:var(--shadow)}
.task-icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.task-info{flex:1;min-width:0}
.task-title{font-size:13px;font-weight:600;color:var(--text)}
.task-desc{font-size:11.5px;color:var(--text2);margin-top:2px}
.task-btn{padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;border:none;cursor:pointer;transition:.15s;white-space:nowrap}
.task-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* Weak chapters */
.weak-list{padding:12px 20px 16px}
.weak-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:.1s;border-radius:4px}
.weak-item:hover{background:#f8fafc;padding-left:4px}
.weak-item:last-child{border-bottom:none}
.weak-rank{width:22px;height:22px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text2);flex-shrink:0}
.weak-item:nth-child(1) .weak-rank,.weak-item:nth-child(2) .weak-rank,.weak-item:nth-child(3) .weak-rank{background:rgba(239,68,68,.1);color:var(--red)}
.weak-info{flex:1;min-width:0}
.weak-chapter{font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weak-book{font-size:11px;color:var(--text3);margin-top:1px}
.weak-bar-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0;width:130px}
.weak-bar{flex:1;height:6px;background:#f1f5f9;border-radius:3px;overflow:hidden}
.weak-bar-fill{height:100%;border-radius:3px;transition:width .4s}
.weak-score{font-size:12px;font-weight:700;color:var(--text);width:36px;text-align:right}

/* Activities */
.activity-list{padding:12px 20px 16px}
.activity-item{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px solid #f1f5f9}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0}
.activity-content{flex:1;min-width:0}
.activity-type{font-size:11px;font-weight:700;margin-right:6px}
.activity-text{font-size:12.5px;color:var(--text)}
.activity-time{font-size:11px;color:var(--text3);white-space:nowrap;flex-shrink:0;margin-top:2px}

/* MODAL */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:200;justify-content:center;align-items:center;backdrop-filter:blur(2px)}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:12px;width:560px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between}
.modal-title{font-size:16px;font-weight:700;color:var(--primary)}
.modal-subtitle{font-size:12.5px;color:var(--text2);margin-top:4px}
.modal-close{width:28px;height:28px;border:none;background:#f1f5f9;border-radius:6px;cursor:pointer;font-size:14px;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:.15s}
.modal-close:hover{background:#e2e8f0;color:var(--text)}
.modal-body{padding:20px 24px}
.modal-section{margin-bottom:16px}
.modal-section-title{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.modal-tags{display:flex;gap:8px;flex-wrap:wrap}
.modal-tag{padding:4px 10px;border-radius:4px;font-size:12px;font-weight:500}
.modal-kp-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.modal-kp-item{display:flex;gap:10px;font-size:13px;color:var(--text);padding:10px 12px;background:#f8fafc;border-radius:8px;border-left:3px solid var(--border)}
.modal-kp-item.mastered{border-left-color:var(--green);background:#f0fdf4}
.modal-kp-item .kp-check{color:var(--green);font-size:13px;flex-shrink:0;margin-top:1px}
.modal-kp-item .kp-uncheck{color:var(--text3);font-size:13px;flex-shrink:0;margin-top:1px}
.modal-kp-content{flex:1;min-width:0}
.modal-kp-title{font-weight:600;font-size:13px;color:var(--text);margin-bottom:2px}
.modal-kp-desc{font-size:12px;color:var(--text2);line-height:1.5}
.modal-chapter-summary{background:linear-gradient(135deg,#eff6ff,#f0fdf4);border-radius:8px;padding:14px 16px;margin-bottom:16px;border:1px solid #e0f2fe}
.modal-chapter-summary .summary-label{font-size:11px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.modal-chapter-summary .summary-text{font-size:13px;color:var(--text);line-height:1.6}
.modal-progress{display:flex;align-items:center;gap:12px;margin-top:12px}
.modal-progress-bar{flex:1;height:8px;background:#f1f5f9;border-radius:4px;overflow:hidden}
.modal-progress-fill{height:100%;border-radius:4px}
.modal-progress-text{font-size:14px;font-weight:700;color:var(--primary);white-space:nowrap}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
.modal-btn{padding:8px 24px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;border:none}
.modal-btn-primary{background:var(--blue);color:#fff}
.modal-btn-primary:hover{background:#2563eb}
.modal-btn-secondary{background:#f1f5f9;color:var(--text2);border:1px solid var(--border)}
.modal-btn-secondary:hover{background:#e2e8f0}


/* TEXTBOOK DETAIL OVERLAY */
.textbook-detail-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:250;flex-direction:row}
.textbook-detail-overlay.show{display:flex}

/* Left sidebar */
.td-sidebar{width:280px;min-width:280px;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;overflow:hidden}
.td-sidebar-header{padding:20px;border-bottom:1px solid var(--border);flex-shrink:0}
.td-sidebar-close{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text2);transition:.15s;margin-bottom:12px}
.td-sidebar-close:hover{background:var(--bg);color:var(--text)}
.td-sidebar-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:4px}
.td-sidebar-code{font-size:11px;font-weight:600;color:var(--text3);margin-bottom:8px}
.td-sidebar-tags{display:flex;gap:6px;flex-wrap:wrap}
.td-sidebar-tag{padding:2px 8px;border-radius:4px;font-size:10.5px;font-weight:600}
.td-sidebar-desc{padding:14px 20px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text2);line-height:1.6;flex-shrink:0;max-height:80px;overflow-y:auto}

/* Chapter search in sidebar */
.td-chapter-search{padding:10px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.td-chapter-search input{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:12px;outline:none;background:var(--bg);color:var(--text);transition:.2s}
.td-chapter-search input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(59,130,246,.1)}
.td-chapter-search input::placeholder{color:var(--text3)}

/* Chapter list in sidebar */
.td-chapter-list{flex:1;overflow-y:auto;padding:8px 0}
.td-chapter-list::-webkit-scrollbar{width:4px}
.td-chapter-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.td-ch-item{display:flex;align-items:center;gap:10px;padding:9px 20px;cursor:pointer;transition:.12s;border-left:3px solid transparent;font-size:12.5px}
.td-ch-item:hover{background:var(--bg)}
.td-ch-item.active{background:rgba(59,130,246,.06);border-left-color:var(--blue)}
.td-ch-item.active .td-ch-title{color:var(--blue);font-weight:600}
.td-ch-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;background:var(--bg);color:var(--text2);border:1px solid var(--border)}
.td-ch-item.done .td-ch-num{background:rgba(16,185,129,.1);color:var(--green);border-color:rgba(16,185,129,.2)}
.td-ch-item.current .td-ch-num{background:rgba(59,130,246,.1);color:var(--blue);border-color:rgba(59,130,246,.2)}
.td-ch-body{flex:1;min-width:0}
.td-ch-title{color:var(--text);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-ch-meta{display:flex;gap:6px;margin-top:2px;align-items:center}
.td-ch-kp-count{font-size:10px;color:var(--text3);background:var(--bg);padding:1px 6px;border-radius:3px;border:1px solid var(--border)}
.td-ch-status-badge{font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px}
.td-ch-status-badge.done{color:var(--green);background:rgba(16,185,129,.08)}
.td-ch-status-badge.current{color:var(--blue);background:rgba(59,130,246,.08)}

/* Right content area */
.td-main{flex:1;overflow-y:auto;height:100vh;display:flex;flex-direction:column}
.td-main-inner{max-width:860px;width:100%;margin:0 auto;padding:28px 36px 60px}

/* Top info card */
.td-info-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin-bottom:24px;box-shadow:var(--shadow)}
.td-info-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.td-info-name{font-size:20px;font-weight:800;color:var(--text);line-height:1.3}
.td-info-code{font-size:12px;color:var(--text3);margin-top:2px}
.td-info-stats{display:flex;gap:16px;margin-top:12px}
.td-info-stat{text-align:center;padding:10px 16px;background:var(--bg);border-radius:8px;border:1px solid var(--border);min-width:80px}
.td-info-stat-val{font-size:20px;font-weight:800;color:var(--primary)}
.td-info-stat-label{font-size:11px;color:var(--text2);margin-top:2px}
.td-info-progress{margin-top:16px}
.td-info-progress-bar{height:8px;background:var(--bg);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
.td-info-progress-fill{height:100%;border-radius:4px;transition:width .4s}
.td-info-progress-text{font-size:12px;color:var(--text2);margin-top:6px;display:flex;justify-content:space-between}

/* Chapter detail section */
.td-chapter-detail{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin-bottom:24px;box-shadow:var(--shadow)}
.td-chapter-detail-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.td-chapter-detail-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:linear-gradient(135deg,#1B3A5C,#2563eb);color:#fff;flex-shrink:0}
.td-chapter-detail-title{font-size:17px;font-weight:700;color:var(--text);flex:1}
.td-chapter-detail-status{font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px}
.td-kp-section-title{font-size:13px;font-weight:700;color:var(--primary);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.td-kp-section-title::before{content:'';width:3px;height:12px;background:var(--blue);border-radius:2px}
.td-kp-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.td-kp-item{padding:12px 14px;background:var(--bg);border-radius:8px;border-left:3px solid var(--border);transition:.15s}
.td-kp-item:hover{border-left-color:var(--blue)}
.td-kp-item.mastered{border-left-color:var(--green);background:rgba(16,185,129,.04)}
.td-kp-item-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px;display:flex;align-items:center;gap:6px}
.td-kp-item-check{font-size:11px}
.td-kp-item-check.done{color:var(--green)}
.td-kp-item-check.undone{color:var(--text3)}
.td-kp-code{font-family:"SF Mono","Fira Code","Consolas",monospace;font-size:11px;color:#64748b;letter-spacing:0.02em;white-space:nowrap;flex-shrink:0}
.td-kp-title-text{flex:1;min-width:0}
.td-kp-item-desc{font-size:12px;color:var(--text2);line-height:1.5}
.td-chapter-desc{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:16px;padding:12px 14px;background:var(--bg);border-radius:8px}

/* Action buttons */
.td-actions{display:flex;gap:10px;margin-top:8px}
.td-btn{padding:10px 24px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;border:none;display:inline-flex;align-items:center;gap:6px}
.td-btn-primary{background:var(--blue);color:#fff}
.td-btn-primary:hover{background:#2563eb;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.td-btn-secondary{background:var(--card);color:var(--text2);border:1px solid var(--border)}
.td-btn-secondary:hover{background:var(--bg);color:var(--text)}

/* Keyboard hint */
.td-kbd-hints{position:fixed;bottom:16px;right:16px;display:flex;gap:8px;opacity:.5;transition:.2s}
.td-kbd-hints:hover{opacity:1}
.td-kbd{padding:3px 8px;background:var(--card);border:1px solid var(--border);border-radius:4px;font-size:10px;color:var(--text3);font-family:monospace}

/* Dark mode for textbook detail */
[data-theme="dark"] .textbook-detail-overlay{background:#0f1724}
[data-theme="dark"] .td-sidebar{background:#1e293b;border-right-color:#334155}
[data-theme="dark"] .td-sidebar-header{border-bottom-color:#334155}
[data-theme="dark"] .td-sidebar-close{background:#1e293b;border-color:#475569;color:#94a3b8}
[data-theme="dark"] .td-sidebar-close:hover{background:#334155;color:#e2e8f0}
[data-theme="dark"] .td-sidebar-title{color:#e2e8f0}
[data-theme="dark"] .td-sidebar-code{color:#64748b}
[data-theme="dark"] .td-sidebar-desc{border-bottom-color:#334155;color:#94a3b8}
[data-theme="dark"] .td-chapter-search{border-bottom-color:#334155}
[data-theme="dark"] .td-chapter-search input{background:#0f1724;border-color:#475569;color:#e2e8f0}
[data-theme="dark"] .td-chapter-search input:focus{border-color:#3b82f6}
[data-theme="dark"] .td-ch-item:hover{background:#162032}
[data-theme="dark"] .td-ch-item.active{background:rgba(59,130,246,.1);border-left-color:#60a5fa}
[data-theme="dark"] .td-ch-item.active .td-ch-title{color:#60a5fa}
[data-theme="dark"] .td-ch-num{background:#0f1724;color:#94a3b8;border-color:#475569}
[data-theme="dark"] .td-ch-title{color:#e2e8f0}
[data-theme="dark"] .td-ch-kp-count{background:#0f1724;color:#64748b;border-color:#475569}
[data-theme="dark"] .td-info-card{background:#1e293b;border-color:#334155}
[data-theme="dark"] .td-info-name{color:#e2e8f0}
[data-theme="dark"] .td-info-code{color:#64748b}
[data-theme="dark"] .td-info-stat{background:#0f1724;border-color:#334155}
[data-theme="dark"] .td-info-stat-val{color:#60a5fa}
[data-theme="dark"] .td-info-stat-label{color:#94a3b8}
[data-theme="dark"] .td-info-progress-bar{background:#0f1724;border-color:#334155}
[data-theme="dark"] .td-chapter-detail{background:#1e293b;border-color:#334155}
[data-theme="dark"] .td-chapter-detail-header{border-bottom-color:#334155}
[data-theme="dark"] .td-chapter-detail-title{color:#e2e8f0}
[data-theme="dark"] .td-chapter-detail-num{background:linear-gradient(135deg,#2a5a8c,#3b82f6)}
[data-theme="dark"] .td-kp-item{background:#0f1724;border-left-color:#334155}
[data-theme="dark"] .td-kp-item:hover{border-left-color:#3b82f6}
[data-theme="dark"] .td-kp-item.mastered{border-left-color:#10b981;background:rgba(16,185,129,.06)}
[data-theme="dark"] .td-kp-code{color:#94a3b8}
[data-theme="dark"] .td-kp-item-title{color:#e2e8f0}
[data-theme="dark"] .td-kp-item-desc{color:#94a3b8}
[data-theme="dark"] .td-chapter-desc{background:#0f1724;color:#94a3b8}
[data-theme="dark"] .td-btn-secondary{background:#1e293b;color:#94a3b8;border-color:#475569}
[data-theme="dark"] .td-btn-secondary:hover{background:#334155;color:#e2e8f0}
[data-theme="dark"] .td-kbd{background:#1e293b;border-color:#475569;color:#64748b}

/* FOOTER */





/* No results */
.no-results{text-align:center;padding:40px;color:var(--text3);font-size:13px;display:none}
.no-results.show{display:block}

@media(max-width:1200px){.kpi-row{grid-template-columns:repeat(2,1fr)}}


/* LEARNING MODE - Individual knowledge point learning */
.learning-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:300;flex-direction:column}
.learning-overlay.show{display:flex}
.learning-topbar{height:52px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0}
.learning-back{width:32px;height:32px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#374151;transition:.15s}
.learning-back:hover{background:#f9fafb}
.learning-breadcrumb{font-size:12px;color:#6b7280;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learning-breadcrumb span{color:#1b3a5c;font-weight:600}
.learning-counter{font-size:12px;color:#6b7280;background:#f3f4f6;padding:4px 10px;border-radius:12px;white-space:nowrap}
.learning-progress-wrap{width:120px;height:4px;background:#e5e7eb;border-radius:2px;overflow:hidden}
.learning-progress-fill{height:100%;background:#3b82f6;border-radius:2px;transition:width .3s}
.learning-body{flex:1;overflow-y:auto;background:#fafafa}
.learning-card{max-width:720px;margin:0 auto;padding:32px 24px 60px}
.learning-kp-header{margin-bottom:24px}
.learning-kp-num{font-size:11px;font-weight:700;color:#3b82f6;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.learning-kp-title{font-size:22px;font-weight:700;color:#111827;line-height:1.3}
.learning-kp-content{font-size:15px;color:#374151;line-height:1.85}
.learning-kp-content h3{font-size:17px;font-weight:700;color:#1b3a5c;margin:28px 0 12px;padding-left:10px;border-left:3px solid #3b82f6}
.learning-kp-content h4{font-size:15px;font-weight:600;color:#374151;margin:20px 0 8px}
.learning-kp-content p{margin:0 0 14px;text-align:justify}
.learning-kp-content ul,.learning-kp-content ol{margin:0 0 14px;padding-left:22px}
.learning-kp-content li{margin-bottom:5px;line-height:1.7}
.learning-kp-content table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
.learning-kp-content th{background:#f1f5f9;padding:8px 10px;text-align:left;font-weight:600;border:1px solid #e2e8f0}
.learning-kp-content td{padding:8px 10px;border:1px solid #e2e8f0}
.learning-kp-content code{background:#f1f5f9;padding:2px 5px;border-radius:3px;font-size:13px;color:#1b3a5c}
.learning-callout{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:14px 18px;margin:16px 0}
.learning-callout-warn{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:14px 18px;margin:16px 0}
.learning-callout-tip{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:14px 18px;margin:16px 0}
.learning-callout-title{font-size:12px;font-weight:700;margin-bottom:4px}
.learning-callout p{font-size:13px;margin:0 0 6px}
.learning-callout p:last-child{margin:0}
.learning-key-points{background:linear-gradient(135deg,#1b3a5c,#2563eb);color:#fff;border-radius:8px;padding:16px 20px;margin:20px 0}
.learning-key-points h4{font-size:13px;font-weight:700;margin:0 0 8px;opacity:.9}
.learning-key-points ul{list-style:none;padding:0;margin:0}
.learning-key-points li{font-size:13px;line-height:1.6;margin-bottom:4px;padding-left:16px;position:relative}
.learning-key-points li::before{content:"\2713";position:absolute;left:0;opacity:.7}
.learning-example{background:#fafafa;border:1px solid #e5e7eb;border-radius:8px;padding:16px 18px;margin:16px 0}
.learning-example-title{font-size:13px;font-weight:700;color:#1b3a5c;margin-bottom:6px}
.learning-example p{font-size:13px;margin:0 0 6px}
.learning-example p:last-child{margin:0}
.learning-bottombar{height:56px;background:#fff;border-top:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;gap:12px}
.learning-nav-btn{padding:8px 20px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;font-size:13px;color:#374151;transition:.15s;display:flex;align-items:center;gap:6px}
.learning-nav-btn:hover{background:#f9fafb;border-color:#d1d5db}
.learning-nav-btn:disabled{opacity:.3;cursor:not-allowed}
.learning-nav-btn.primary{background:#3b82f6;color:#fff;border-color:#3b82f6}
.learning-nav-btn.primary:hover{background:#2563eb}
.learning-done-btn{padding:8px 20px;border:none;border-radius:8px;background:#10b981;color:#fff;cursor:pointer;font-size:13px;font-weight:600;transition:.15s}
.learning-done-btn:hover{background:#059669}
.learning-done-btn.done{background:#6b7280}

/* NOTES SECTION */
.learning-notes{max-width:720px;margin:0 auto;padding:0 24px 40px}
.notes-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.notes-title{font-size:15px;font-weight:700;color:#1b3a5c;display:flex;align-items:center;gap:8px}
.notes-title::before{content:'';width:3px;height:16px;background:#3b82f6;border-radius:2px}
.notes-actions{display:flex;gap:8px}
.notes-save-btn{padding:7px 18px;border:none;border-radius:8px;background:#1b3a5c;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.notes-save-btn:hover{background:#2563eb}
.notes-save-btn:disabled{opacity:.5;cursor:not-allowed}
.notes-delete-btn{padding:7px 14px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#6b7280;font-size:13px;cursor:pointer;transition:.15s}
.notes-delete-btn:hover{border-color:#ef4444;color:#ef4444;background:#fef2f2}
.notes-textarea{width:100%;min-height:160px;padding:14px 16px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;line-height:1.7;color:#374151;background:#f8fafc;resize:vertical;outline:none;transition:.2s;font-family:inherit;box-sizing:border-box}
.notes-textarea:focus{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.notes-textarea::placeholder{color:#9ca3af}
.notes-toast{position:fixed;top:20px;right:20px;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;color:#fff;z-index:500;opacity:0;transform:translateY(-10px);transition:all .3s;pointer-events:none}
.notes-toast.show{opacity:1;transform:translateY(0)}
.notes-toast.success{background:#10b981}
.notes-toast.error{background:#ef4444}
.notes-char-count{font-size:11px;color:#9ca3af;text-align:right;margin-top:4px}

/* QUIZ / KNOWLEDGE CHECK */
.quiz-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:400;justify-content:center;align-items:center}
.quiz-overlay.show{display:flex}
.quiz-container{background:#fff;border-radius:16px;width:90%;max-width:560px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.quiz-header{padding:20px 24px;border-bottom:1px solid #e5e7eb}
.quiz-title{font-size:16px;font-weight:700;color:#1b3a5c}
.quiz-progress{font-size:12px;color:#6b7280;margin-top:4px}
.quiz-body{padding:24px;overflow-y:auto;flex:1}
.quiz-question{font-size:15px;font-weight:600;color:#111827;margin-bottom:16px;line-height:1.5}
.quiz-options{display:flex;flex-direction:column;gap:8px}
.quiz-option{padding:12px 16px;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;font-size:14px;color:#374151;transition:.15s;display:flex;align-items:center;gap:10px}
.quiz-option:hover{border-color:#3b82f6;background:#eff6ff}
.quiz-option.selected{border-color:#3b82f6;background:#eff6ff;font-weight:600}
.quiz-option.correct{border-color:#10b981;background:#f0fdf4;color:#065f46}
.quiz-option.wrong{border-color:#ef4444;background:#fef2f2;color:#991b1b}
.quiz-option-letter{width:24px;height:24px;border-radius:50%;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#6b7280;flex-shrink:0}
.quiz-option.selected .quiz-option-letter{background:#3b82f6;color:#fff}
.quiz-option.correct .quiz-option-letter{background:#10b981;color:#fff}
.quiz-option.wrong .quiz-option-letter{background:#ef4444;color:#fff}
.quiz-footer{padding:16px 24px;border-top:1px solid #e5e7eb;display:flex;gap:8px;justify-content:flex-end}
.quiz-btn{padding:8px 20px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;font-size:13px;color:#374151;transition:.15s}
.quiz-btn:hover{background:#f9fafb}
.quiz-btn-primary{background:#3b82f6;color:#fff;border-color:#3b82f6}
.quiz-btn-primary:hover{background:#2563eb}
.quiz-btn-success{background:#10b981;color:#fff;border-color:#10b981}
.quiz-btn-success:hover{background:#059669}
.quiz-btn:disabled{opacity:.4;cursor:not-allowed}
.quiz-result{text-align:center;padding:32px 24px}
.quiz-result-score{font-size:48px;font-weight:800;color:#1b3a5c;margin-bottom:8px}
.quiz-result-label{font-size:14px;color:#6b7280;margin-bottom:16px}
.quiz-result-msg{font-size:15px;color:#374151;margin-bottom:20px}



/* PRACTICE CENTER */
.pc-header{padding:24px 0;border-bottom:1px solid var(--border);margin-bottom:24px}
.pc-header h2{font-size:20px;font-weight:700;color:var(--text1);margin:0 0 4px}
.pc-header p{font-size:13px;color:var(--text3);margin:0}
.pc-categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:32px}
.pc-cat-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:20px;cursor:pointer;transition:.2s}
.pc-cat-card:hover{border-color:var(--primary);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.pc-cat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}
.pc-cat-name{font-size:15px;font-weight:600;color:var(--text1);margin-bottom:4px}
.pc-cat-desc{font-size:12px;color:var(--text3);line-height:1.5;margin-bottom:8px}
.pc-cat-count{font-size:11px;color:var(--primary);font-weight:600}
.pc-scenario-list{display:none;margin-top:24px}
.pc-scenario-list.open{display:block}
.pc-scenario-title{font-size:16px;font-weight:600;color:var(--text1);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.pc-scenario-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.pc-scenario-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:16px;cursor:pointer;transition:.15s}
.pc-scenario-card:hover{border-color:var(--primary)}
.pc-scenario-name{font-size:14px;font-weight:600;color:var(--text1);margin-bottom:4px}
.pc-scenario-meta{display:flex;gap:8px;margin-bottom:6px}
.pc-diff-badge{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}
.pc-diff-badge.basic{background:#f0fdf4;color:#065f46}
.pc-diff-badge.intermediate{background:#fef3c7;color:#92400e}
.pc-diff-badge.advanced{background:#fef2f2;color:#991b1b}
.pc-scenario-desc{font-size:12px;color:var(--text3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Practice Session Overlay */
.ps-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:600;justify-content:center;align-items:center}
.ps-overlay.show{display:flex}
.ps-container{background:#fff;border-radius:16px;width:92%;max-width:720px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2)}
[data-theme="dark"] .ps-container{background:#1e293b}
.ps-header{padding:20px 24px;border-bottom:1px solid var(--border);background:var(--bg)}
.ps-title{font-size:16px;font-weight:700;color:var(--text1)}
.ps-step-info{font-size:12px;color:var(--text3);margin-top:4px}
.ps-body{padding:24px;overflow-y:auto;flex:1}
.ps-context{background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:16px;margin-bottom:16px;font-size:13px;color:#0c4a6e;line-height:1.7;white-space:pre-line}
[data-theme="dark"] .ps-context{background:#0c2a3e;border-color:#1e4d6e;color:#7dd3fc}
.ps-question{font-size:15px;font-weight:600;color:var(--text1);margin-bottom:16px;line-height:1.6}
.ps-options{display:flex;flex-direction:column;gap:8px}
.ps-option{padding:12px 16px;border:2px solid var(--border);border-radius:10px;cursor:pointer;font-size:13px;color:var(--text2);transition:.15s;display:flex;gap:10px;line-height:1.5}
.ps-option:hover{border-color:var(--primary);background:rgba(59,130,246,.04)}
.ps-option.selected{border-color:var(--primary);background:rgba(59,130,246,.06);font-weight:600}
.ps-option.correct{border-color:#10b981;background:#f0fdf4;color:#065f46}
.ps-option.wrong{border-color:#ef4444;background:#fef2f2;color:#991b1b}
.ps-option-letter{width:22px;height:22px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text3);flex-shrink:0;margin-top:1px}
.ps-option.selected .ps-option-letter{background:var(--primary);color:#fff}
.ps-option.correct .ps-option-letter{background:#10b981;color:#fff}
.ps-option.wrong .ps-option-letter{background:#ef4444;color:#fff}
.ps-feedback{margin-top:16px;padding:14px 18px;border-radius:10px;font-size:13px;line-height:1.7;white-space:pre-line}
.ps-feedback.correct{background:#f0fdf4;border:1px solid #bbf7d0;color:#065f46}
.ps-feedback.wrong{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.ps-fill-group{margin-bottom:16px}
.ps-fill-label{font-size:13px;font-weight:600;color:var(--text1);margin-bottom:4px}
.ps-fill-hint{font-size:11px;color:var(--text3);margin-bottom:6px}
.ps-fill-input{width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:8px;font-size:14px;outline:none;background:var(--card-bg);color:var(--text1);transition:.15s}
.ps-fill-input:focus{border-color:var(--primary)}
.ps-fill-input.correct{border-color:#10b981;background:#f0fdf4}
.ps-fill-input.wrong{border-color:#ef4444;background:#fef2f2}
.ps-fill-result{font-size:12px;margin-top:4px;line-height:1.5}
.ps-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
.ps-btn{padding:8px 20px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);cursor:pointer;font-size:13px;color:var(--text2);transition:.15s}
.ps-btn:hover{background:var(--bg)}
.ps-btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.ps-btn-primary:hover{background:#2563eb}
.ps-btn:disabled{opacity:.4;cursor:not-allowed}
.ps-result{text-align:center;padding:32px 24px}
.ps-result-score{font-size:48px;font-weight:800;color:var(--primary);margin-bottom:8px}
.ps-result-label{font-size:14px;color:var(--text3);margin-bottom:16px}
.ps-result-msg{font-size:14px;color:var(--text2);margin-bottom:20px;line-height:1.6}
.ps-summary{text-align:left;margin:0 16px 16px}
.ps-summary-item{padding:10px 14px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;font-size:12px;line-height:1.5}
.ps-summary-item.correct-item{border-left:3px solid #10b981}
.ps-summary-item.wrong-item{border-left:3px solid #ef4444}
[data-theme="dark"] .pc-cat-card{background:#1e293b;border-color:#334155}
[data-theme="dark"] .pc-cat-card:hover{border-color:#3b82f6}
[data-theme="dark"] .ps-option{border-color:#475569;color:#cbd5e1}
[data-theme="dark"] .ps-option.correct{background:#052e16;border-color:#10b981;color:#a7f3d0}
[data-theme="dark"] .ps-option.wrong{background:#2a1215;border-color:#ef4444;color:#fca5a5}
[data-theme="dark"] .ps-feedback.correct{background:#052e16;border-color:#065f46;color:#a7f3d0}
[data-theme="dark"] .ps-feedback.wrong{background:#2a1215;border-color:#991b1b;color:#fca5a5}


/* EXAM SYSTEM */
.exam-header{padding:24px 0;border-bottom:1px solid var(--border);margin-bottom:24px}
.exam-header h2{font-size:20px;font-weight:700;color:var(--text1);margin:0 0 4px}
.exam-header p{font-size:13px;color:var(--text3);margin:0}
.exam-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.exam-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:24px;transition:.2s}
.exam-card:hover{border-color:var(--primary);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.exam-level{display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600;margin-bottom:12px}
.exam-level.basic{background:#f0fdf4;color:#065f46}
.exam-level.intermediate{background:#fef3c7;color:#92400e}
.exam-level.advanced{background:#fef2f2;color:#991b1b}
.exam-card-title{font-size:16px;font-weight:700;color:var(--text1);margin-bottom:6px}
.exam-card-desc{font-size:12px;color:var(--text3);line-height:1.5;margin-bottom:12px}
.exam-card-meta{display:flex;gap:12px;font-size:11px;color:var(--text3);margin-bottom:16px}
.exam-card-meta span{display:flex;align-items:center;gap:4px}
.exam-start-btn{width:100%;padding:10px;border:none;border-radius:8px;background:var(--primary);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.exam-start-btn:hover{background:#2563eb}
.exam-start-btn:disabled{opacity:.4;cursor:not-allowed}
/* Exam Session */
.exam-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:700;justify-content:center;align-items:center}
.exam-overlay.show{display:flex}
.exam-container{background:#fff;border-radius:16px;width:92%;max-width:680px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25)}
[data-theme="dark"] .exam-container{background:#1e293b}
.exam-top{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg)}
.exam-top-title{font-size:15px;font-weight:700;color:var(--text1)}
.exam-timer{font-size:14px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.exam-timer.warning{color:#f59e0b}
.exam-timer.danger{color:#ef4444;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.exam-progress-bar{height:3px;background:var(--border);width:100%}
.exam-progress-fill{height:100%;background:var(--primary);transition:width .3s}
.exam-body{padding:24px;overflow-y:auto;flex:1}
.exam-q-num{font-size:12px;color:var(--text3);margin-bottom:8px}
.exam-q-text{font-size:15px;font-weight:600;color:var(--text1);margin-bottom:16px;line-height:1.6}
.exam-opts{display:flex;flex-direction:column;gap:8px}
.exam-opt{padding:12px 16px;border:2px solid var(--border);border-radius:10px;cursor:pointer;font-size:13px;color:var(--text2);transition:.15s;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.exam-opt:hover{border-color:var(--primary)}
.exam-opt.selected{border-color:var(--primary);background:rgba(59,130,246,.06)}
.exam-opt-letter{width:22px;height:22px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text3);flex-shrink:0;margin-top:1px}
.exam-opt.selected .exam-opt-letter{background:var(--primary);color:#fff}
.exam-nav{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.exam-nav-btn{padding:8px 20px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);cursor:pointer;font-size:13px;color:var(--text2)}
.exam-nav-btn:hover{background:var(--bg)}
.exam-nav-btn.submit{background:var(--primary);color:#fff;border-color:var(--primary)}
.exam-nav-btn.submit:hover{background:#2563eb}
.exam-question-map{display:flex;flex-wrap:wrap;gap:4px;padding:8px 24px;border-bottom:1px solid var(--border);max-height:60px;overflow-y:auto}
.exam-q-dot{width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;cursor:pointer;border:1px solid var(--border);color:var(--text3);background:var(--card-bg)}
.exam-q-dot.answered{background:var(--primary);color:#fff;border-color:var(--primary)}
.exam-q-dot.current{border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,.3)}
[data-theme="dark"] .exam-card{background:#1e293b;border-color:#334155}
[data-theme="dark"] .exam-card:hover{border-color:#3b82f6}
[data-theme="dark"] .exam-opt{border-color:#475569;color:#cbd5e1}
[data-theme="dark"] .exam-opt.selected{border-color:#3b82f6;background:rgba(59,130,246,.15)}

/* PRACTICE EXERCISE */
.practice-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:500;justify-content:center;align-items:center}
.practice-overlay.show{display:flex}
.practice-container{background:#fff;border-radius:16px;width:90%;max-width:640px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.practice-header{padding:20px 24px;border-bottom:1px solid #e5e7eb;background:#f8fafc}
.practice-title{font-size:16px;font-weight:700;color:#1b3a5c;display:flex;align-items:center;gap:8px}
.practice-title::before{content:"";display:inline-block;width:20px;height:20px;background:#1b3a5c;border-radius:4px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.practice-step{font-size:12px;color:#6b7280;margin-top:4px}
.practice-body{padding:24px;overflow-y:auto;flex:1}
.practice-scenario{background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:16px;margin-bottom:16px}
.practice-scenario h4{font-size:13px;font-weight:700;color:#0369a1;margin-bottom:6px}
.practice-scenario p{font-size:13px;color:#0c4a6e;line-height:1.6;margin:0}
.practice-task{font-size:15px;font-weight:600;color:#111827;margin-bottom:16px;line-height:1.5}
.practice-options{display:flex;flex-direction:column;gap:8px}
.practice-option{padding:12px 16px;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;font-size:14px;color:#374151;transition:.15s}
.practice-option:hover{border-color:#1b3a5c;background:#f8fafc}
.practice-option.selected{border-color:#1b3a5c;background:#eff6ff;font-weight:600}
.practice-option.correct{border-color:#10b981;background:#f0fdf4}
.practice-option.wrong{border-color:#ef4444;background:#fef2f2}
.practice-input{width:100%;padding:10px 14px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;outline:none;transition:.15s}
.practice-input:focus{border-color:#3b82f6}
.practice-input.correct{border-color:#10b981;background:#f0fdf4}
.practice-input.wrong{border-color:#ef4444;background:#fef2f2}
.practice-feedback{margin-top:12px;padding:12px 16px;border-radius:8px;font-size:13px;line-height:1.6}
.practice-feedback.correct{background:#f0fdf4;border:1px solid #bbf7d0;color:#065f46}
.practice-feedback.wrong{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.practice-footer{padding:16px 24px;border-top:1px solid #e5e7eb;display:flex;gap:8px;justify-content:flex-end}
.practice-btn{padding:8px 20px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;font-size:13px;color:#374151;transition:.15s}
.practice-btn:hover{background:#f9fafb}
.practice-btn:disabled{opacity:.4;cursor:not-allowed}
.practice-btn-next{background:#3b82f6;color:#fff;border-color:#3b82f6}
.practice-btn-next:hover{background:#2563eb}
.practice-btn-done{background:#10b981;color:#fff;border-color:#10b981}
.practice-btn-done:hover{background:#059669}
.practice-result{text-align:center;padding:32px 24px}
.practice-result-score{font-size:20px;font-weight:700;margin-bottom:8px}
.practice-result-detail{font-size:13px;color:#6b7280;margin-bottom:16px}
.practice-result-msg{font-size:14px;color:#374151;margin-bottom:20px;line-height:1.6}


/* ========== LOGIN PAGE STYLES ========== */

/* ===== Role Selection Cards ===== */
.role-select-group { margin-bottom: 16px; }
.role-select-group .role-group-label { font-size: 12.5px; color: #64748b; margin-bottom: 8px; font-weight: 500; }
.role-cards { display: flex; gap: 10px; }
.role-card {
  flex: 1; padding: 14px 10px 12px; border: 2px solid var(--border); border-radius: 10px;
  background: var(--card); cursor: pointer; transition: all 0.2s; text-align: center; position: relative;
}
.role-card:hover { border-color: #93c5fd; background: #f0f7ff; }
.role-card.selected { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
.role-card-icon { width: 36px; height: 36px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.role-card-icon svg { width: 22px; height: 22px; }
.role-card[data-role="student"] .role-card-icon { background: #dbeafe; color: #2563eb; }
.role-card[data-role="teacher"] .role-card-icon { background: #d1fae5; color: #059669; }
.role-card[data-role="enterprise"] .role-card-icon { background: #fef3c7; color: #d97706; }
.role-card-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.role-card-desc { font-size: 11px; color: var(--text3); line-height: 1.4; }
.role-card-check { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: #3b82f6; display: none; align-items: center; justify-content: center; }
.role-card.selected .role-card-check { display: flex; }

/* Role card dark mode */
[data-theme="dark"] .role-select-group .role-group-label { color: #94a3b8; }
[data-theme="dark"] .role-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .role-card:hover { border-color: #60a5fa; background: #1a2744; }
[data-theme="dark"] .role-card.selected { border-color: #3b82f6; background: #172554; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
[data-theme="dark"] .role-card[data-role="student"] .role-card-icon { background: #1e3a5f; color: #60a5fa; }
[data-theme="dark"] .role-card[data-role="teacher"] .role-card-icon { background: #14332a; color: #34d399; }
[data-theme="dark"] .role-card[data-role="enterprise"] .role-card-icon { background: #3b2a0a; color: #fbbf24; }
[data-theme="dark"] .role-card-title { color: #e2e8f0; }
[data-theme="dark"] .role-card-desc { color: #64748b; }

#login-page{display:none;position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#0f1d2f 0%,#1B3A5C 40%,#1a365d 100%);overflow:hidden}
#login-page.show{display:flex;align-items:center;justify-content:center}
.login-bg-pattern{position:absolute;inset:0;opacity:.04;background-image:radial-gradient(circle at 20% 50%,#3b82f6 1px,transparent 1px),radial-gradient(circle at 80% 20%,#3b82f6 1px,transparent 1px);background-size:60px 60px}
.login-container{display:flex;width:880px;min-height:480px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.3);position:relative;z-index:1}
.login-left{width:380px;background:linear-gradient(160deg,#1B3A5C 0%,#1e4976 50%,#1a4a7a 100%);padding:48px 36px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-left::before{content:'';position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(59,130,246,.1)}
.login-left::after{content:'';position:absolute;left:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:rgba(59,130,246,.06)}
.login-brand-icon{width:56px;height:56px;background:rgba(59,130,246,.2);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.login-brand-icon svg{width:28px;height:28px;stroke:#60a5fa;fill:none;stroke-width:2}
.login-left h2{color:#fff;font-size:24px;font-weight:700;margin:0 0 8px;letter-spacing:.5px}
.login-left p{color:rgba(148,163,184,.85);font-size:13.5px;line-height:1.7;margin:0 0 24px}
.login-features{list-style:none;padding:0;margin:0}
.login-features li{color:rgba(203,213,225,.9);font-size:13px;padding:6px 0;display:flex;align-items:center;gap:10px}
.login-features li::before{content:'';width:6px;height:6px;background:#3b82f6;border-radius:50%;flex-shrink:0}
.login-right{flex:1;padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
.login-tabs{display:flex;gap:0;margin-bottom:28px;border-bottom:2px solid #e2e8f0}
.login-tab{padding:10px 24px;font-size:15px;font-weight:600;color:#94a3b8;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;user-select:none}
.login-tab.active{color:#1B3A5C;border-bottom-color:#3b82f6}
.login-tab:hover{color:#1B3A5C}
.login-form{display:none}
.login-form.active{display:block}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:6px}
.form-group input{width:100%;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;background:#f9fafb}
.form-group input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);background:#fff}
.form-group input::placeholder{color:#9ca3af}
.login-submit{width:100%;padding:11px;background:linear-gradient(135deg,#1B3A5C,#2563eb);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:4px}
.login-submit:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.3)}
.login-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.login-msg{font-size:13px;padding:8px 12px;border-radius:6px;margin-top:12px;display:none}
.login-msg.error{display:block;background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.login-msg.success{display:block;background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
.login-demo{margin-top:20px;padding:12px 16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;font-size:12.5px;color:#64748b;line-height:1.6}
.login-demo strong{color:#374151;font-weight:600}

/* Auth-aware header user area */
.header-user-area{display:flex;align-items:center;gap:8px}
.header-avatar{width:32px;height:32px;border-radius:50%;background:#3b82f6;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0}
.header-user-name{font-size:13px;font-weight:600;color:#0f172a}
.header-user-role{font-size:11px;color:#94a3b8}
.header-logout-btn{padding:4px 12px;background:transparent;border:1px solid #e2e8f0;border-radius:6px;font-size:12px;color:#64748b;cursor:pointer;transition:all .15s;margin-left:8px}
.header-logout-btn:hover{background:#fef2f2;color:#dc2626;border-color:#fecaca}

/* Hide platform when not authed */
#platform-wrapper{display:none}
#platform-wrapper.show{display:block}



/* ==================== TEACHER MANAGEMENT ==================== */
.tm-container { padding: 0; }
.tm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tm-title { font-size: 18px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; }
.tm-title::before { content: ''; width: 4px; height: 20px; background: var(--blue); border-radius: 2px; }

/* Teacher cards grid */
.tm-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 24px; }
.tm-class-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: all 0.2s; cursor: pointer; position: relative; overflow: hidden; }
.tm-class-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--blue); }
.tm-class-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--primary)); }
.tm-card-name { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tm-card-textbook { font-size: 12.5px; color: var(--text2); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.tm-card-stats { display: flex; gap: 16px; }
.tm-card-stat { display: flex; flex-direction: column; }
.tm-card-stat-val { font-size: 20px; font-weight: 800; color: var(--primary); }
.tm-card-stat-label { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* Teacher buttons */
.tm-btn { padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; border: none; display: inline-flex; align-items: center; gap: 6px; }
.tm-btn-primary { background: var(--blue); color: #fff; }
.tm-btn-primary:hover { background: #2563eb; transform: translateY(-1px); }
.tm-btn-secondary { background: var(--card); color: var(--text2); border: 1px solid var(--border); }
.tm-btn-secondary:hover { background: var(--bg); color: var(--text); }
.tm-btn-danger { background: var(--red); color: #fff; }
.tm-btn-danger:hover { background: #dc2626; }
.tm-btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 6px; }

/* Class detail layout */
.tm-detail-layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; }
.tm-member-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tm-member-header { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--primary); display: flex; align-items: center; justify-content: space-between; }
.tm-member-list { max-height: 500px; overflow-y: auto; }
.tm-member-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
.tm-member-item:hover { background: var(--bg); }
.tm-member-item:last-child { border-bottom: none; }
.tm-member-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--primary)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.tm-member-info { flex: 1; min-width: 0; }
.tm-member-name { font-size: 13px; font-weight: 600; color: var(--text); }
.tm-member-meta { font-size: 11px; color: var(--text3); }
.tm-member-progress { width: 48px; text-align: right; }
.tm-member-pct { font-size: 13px; font-weight: 700; color: var(--blue); }
.tm-member-pct-label { font-size: 10px; color: var(--text3); }

/* Right panel */
.tm-right-panel { display: flex; flex-direction: column; gap: 16px; }
.tm-stats-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tm-stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
.tm-stat-value { font-size: 24px; font-weight: 800; color: var(--primary); }
.tm-stat-label { font-size: 11.5px; color: var(--text2); margin-top: 4px; }

/* Assignment list */
.tm-assignment-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tm-assignment-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.tm-assignment-header-title { font-size: 13px; font-weight: 700; color: var(--primary); }
.tm-assignment-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.tm-assignment-item:hover { background: var(--bg); }
.tm-assignment-item:last-child { border-bottom: none; }
.tm-assignment-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(59,130,246,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tm-assignment-info { flex: 1; min-width: 0; }
.tm-assignment-title { font-size: 13px; font-weight: 600; color: var(--text); }
.tm-assignment-meta { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.tm-assignment-actions { display: flex; gap: 6px; }

/* Forms */
.tm-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.tm-form-group { margin-bottom: 16px; }
.tm-form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.tm-form-input, .tm-form-select, .tm-form-textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--bg); color: var(--text); outline: none; transition: border-color 0.2s; }
.tm-form-input:focus, .tm-form-select:focus, .tm-form-textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.tm-form-textarea { min-height: 80px; resize: vertical; }

/* Chapter score bar chart */
.tm-bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding: 12px 16px; }
.tm-bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tm-bar { width: 100%; max-width: 40px; border-radius: 4px 4px 0 0; transition: height 0.5s; min-height: 2px; }
.tm-bar-label { font-size: 10px; color: var(--text3); text-align: center; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-bar-value { font-size: 10px; font-weight: 600; color: var(--text2); }

/* Student report */
.tm-report-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 300; justify-content: center; align-items: center; }
.tm-report-overlay.show { display: flex; }
.tm-report-modal { background: var(--card); border-radius: 12px; width: 700px; max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.tm-report-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.tm-report-title { font-size: 16px; font-weight: 700; color: var(--text); }
.tm-report-body { padding: 20px 24px; }
.tm-report-section { margin-bottom: 20px; }
.tm-report-section-title { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.tm-report-section-title::before { content: ''; width: 3px; height: 14px; background: var(--blue); border-radius: 2px; }

/* Progress timeline */
.tm-timeline { position: relative; padding-left: 24px; }
.tm-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.tm-timeline-item { position: relative; margin-bottom: 12px; padding: 8px 12px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); }
.tm-timeline-dot { position: absolute; left: -20px; top: 12px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--blue); background: var(--card); }
.tm-timeline-dot.done { background: var(--green); border-color: var(--green); }
.tm-timeline-dot.locked { background: var(--text3); border-color: var(--text3); }
.tm-timeline-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.tm-timeline-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* Submission grading */
.tm-submission-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.tm-submission-item:last-child { border-bottom: none; }
.tm-submission-content { flex: 1; }
.tm-submission-user { font-size: 13px; font-weight: 600; color: var(--text); }
.tm-submission-time { font-size: 11px; color: var(--text3); margin-top: 2px; }
.tm-submission-text { font-size: 12.5px; color: var(--text2); margin-top: 6px; line-height: 1.5; max-height: 60px; overflow: hidden; }
.tm-grade-input { width: 60px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; text-align: center; background: var(--bg); color: var(--text); }
.tm-grade-input:focus { border-color: var(--blue); }

/* Empty state */
.tm-empty { text-align: center; padding: 40px; color: var(--text3); font-size: 13px; }
.tm-empty-icon { margin-bottom: 12px; opacity: 0.5; }

/* Breadcrumb in teacher view */
.tm-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: var(--text2); }
.tm-breadcrumb a { color: var(--blue); cursor: pointer; font-weight: 500; }
.tm-breadcrumb a:hover { text-decoration: underline; }

/* Dark mode teacher styles */
[data-theme="dark"] .tm-class-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tm-class-card:hover { border-color: #3b82f6; }
[data-theme="dark"] .tm-member-panel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tm-member-item:hover { background: #162032; }
[data-theme="dark"] .tm-stat-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tm-assignment-panel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tm-assignment-item:hover { background: #162032; }
[data-theme="dark"] .tm-form { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tm-form-input,
[data-theme="dark"] .tm-form-select,
[data-theme="dark"] .tm-form-textarea { background: #0f1724; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .tm-report-modal { background: #1e293b; }
[data-theme="dark"] .tm-timeline-item { background: #0f1724; border-color: #334155; }
[data-theme="dark"] .tm-submission-item { border-bottom-color: #334155; }
[data-theme="dark"] .tm-grade-input { background: #0f1724; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .tm-member-header { border-bottom-color: #334155; }
[data-theme="dark"] .tm-assignment-header { border-bottom-color: #334155; }
[data-theme="dark"] .tm-report-header { border-bottom-color: #334155; }

/* ==================== DARK MODE ==================== */
/* Theme transition */
[data-theme="dark"] body,
[data-theme="dark"] .v40-header,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .dual-card,
[data-theme="dark"] .textbook-section,
[data-theme="dark"] .modal,
[data-theme="dark"] .book-card {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark theme toggle button */
.theme-toggle-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: all 0.2s; flex-shrink: 0; padding: 0;
}
.theme-toggle-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.theme-toggle-btn svg { width: 18px; height: 18px; transition: transform 0.3s; }
.theme-toggle-btn:hover svg { transform: rotate(15deg); }
[data-theme="dark"] .theme-toggle-btn { border-color: #475569; background: #1e293b; }
[data-theme="dark"] .theme-toggle-btn:hover { background: #334155; border-color: #64748b; }
[data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }
.theme-toggle-btn .icon-sun { display: none; }
.theme-toggle-btn .icon-moon { display: block; }

/* Dark variables override */
[data-theme="dark"] {
  --bg: #0f1724;
  --card: #1e293b;
  --text: #e2e8f0;
  --text2: #94a3b8;
  --text3: #64748b;
  --border: #334155;
  --primary: #2a5a8c;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4);
  --blue: #3b82f6;
  --green: #10b981;
  --orange: #f59e0b;
  --red: #ef4444;
}

/* Body dark */
[data-theme="dark"] body,
[data-theme="dark"] {
  background: #0f1724;
  color: #e2e8f0;
}

/* Header dark */
[data-theme="dark"] .v40-header {
  background: #1e293b;
  border-bottom-color: #334155;
}
[data-theme="dark"] .v40-header .breadcrumb { color: #94a3b8; }
[data-theme="dark"] .v40-header .breadcrumb span { color: #60a5fa; }
[data-theme="dark"] #header-date { color: #64748b !important; }

/* Sidebar dark - keep dark (already dark branded) */
[data-theme="dark"] .sidebar {
  background: #0c1829;
}
[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .nav-item.active { background: rgba(59,130,246,0.15); }
[data-theme="dark"] .sidebar-logo { border-bottom-color: rgba(255,255,255,0.06); }

/* Content area dark */
[data-theme="dark"] .v40-content { background: #0f1724; }

/* KPI cards dark */
[data-theme="dark"] .kpi-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-theme="dark"] .kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.4); }
[data-theme="dark"] .kpi-value { color: #60a5fa; }
[data-theme="dark"] .kpi-label { color: #94a3b8; }
[data-theme="dark"] .kpi-sub { color: #64748b; }

/* Continue banner dark */
[data-theme="dark"] .continue-banner {
  background: linear-gradient(135deg, #1a3550 0%, #1e4976 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* Timeline dark */
[data-theme="dark"] .timeline-section {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-theme="dark"] .timeline-stage::before { background: #334155; }
[data-theme="dark"] .stage-name { color: #e2e8f0; }
[data-theme="dark"] .stage-pct { color: #94a3b8; }
[data-theme="dark"] .stage-hours { color: #64748b; }

/* Textbook section dark */
[data-theme="dark"] .textbook-section {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-theme="dark"] .search-filter-bar { border-bottom-color: #334155; }
[data-theme="dark"] .search-box input {
  background: #0f1724;
  border-color: #475569;
  color: #e2e8f0;
}
[data-theme="dark"] .search-box input:focus {
  border-color: #3b82f6;
  background: #1a2332;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
[data-theme="dark"] .search-box input::placeholder { color: #64748b; }
[data-theme="dark"] .filter-btn {
  background: #1e293b;
  border-color: #475569;
  color: #94a3b8;
}
[data-theme="dark"] .filter-btn:hover { background: #334155; border-color: #64748b; }
[data-theme="dark"] .filter-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }

/* Tab bar dark */
[data-theme="dark"] .tab-bar { background: #162032; border-bottom-color: #334155; }
[data-theme="dark"] .tab-btn { color: #94a3b8; }
[data-theme="dark"] .tab-btn:hover { color: #e2e8f0; background: rgba(255,255,255,.03); }
[data-theme="dark"] .tab-btn.active { color: #60a5fa; border-bottom-color: #3b82f6; background: #1e293b; }

/* Section title dark */
[data-theme="dark"] .section-title { color: #60a5fa; }

/* Book card dark */
[data-theme="dark"] .book-card {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .book-card:hover { border-color: #475569; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
[data-theme="dark"] .book-body { background: #1e293b; }
[data-theme="dark"] .book-progress-label { color: #94a3b8; }
[data-theme="dark"] .book-progress-pct { color: #60a5fa; }
[data-theme="dark"] .book-progress-bar { background: #0f1724; }
[data-theme="dark"] .book-expand-btn {
  background: #162032;
  border-color: #334155;
  color: #94a3b8;
}
[data-theme="dark"] .book-expand-btn:hover { background: #1e293b; color: #e2e8f0; }

/* Chapter list dark */
[data-theme="dark"] .chapter-list { background: #162032; border-top-color: #334155; }
[data-theme="dark"] .chapter-item:hover { background: #1e293b; }
[data-theme="dark"] .ch-text { color: #e2e8f0; }
[data-theme="dark"] .chapter-item .ch-status.locked ~ .ch-text { color: #64748b; }
[data-theme="dark"] .ch-action.start { color: #60a5fa; background: rgba(59,130,246,.12); }
[data-theme="dark"] .ch-action.continue { color: #fbbf24; background: rgba(245,158,11,.12); }
[data-theme="dark"] .ch-action.review { color: #34d399; background: rgba(16,185,129,.12); }

/* Dual cards dark */
[data-theme="dark"] .dual-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-theme="dark"] .dual-card-header { color: #60a5fa; }

/* Task cards dark */
[data-theme="dark"] .task-card { border-color: #334155; }
[data-theme="dark"] .task-card:hover { border-color: #475569; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
[data-theme="dark"] .task-title { color: #e2e8f0; }
[data-theme="dark"] .task-desc { color: #94a3b8; }

/* Weak list dark */
[data-theme="dark"] .weak-item { border-bottom-color: #1a2332; }
[data-theme="dark"] .weak-item:hover { background: #1a2332; }
[data-theme="dark"] .weak-rank { background: #0f1724; color: #94a3b8; }
[data-theme="dark"] .weak-item:nth-child(1) .weak-rank,
[data-theme="dark"] .weak-item:nth-child(2) .weak-rank,
[data-theme="dark"] .weak-item:nth-child(3) .weak-rank { background: rgba(239,68,68,.15); }
[data-theme="dark"] .weak-chapter { color: #e2e8f0; }
[data-theme="dark"] .weak-book { color: #64748b; }
[data-theme="dark"] .weak-bar { background: #0f1724; }
[data-theme="dark"] .weak-score { color: #e2e8f0; }

/* Activity list dark */
[data-theme="dark"] .activity-item { border-bottom-color: #1a2332; }
[data-theme="dark"] .activity-text { color: #e2e8f0; }
[data-theme="dark"] .activity-time { color: #64748b; }

/* Modal dark */
[data-theme="dark"] .modal { background: #1e293b; }
[data-theme="dark"] .modal-header { border-bottom-color: #334155; }
[data-theme="dark"] .modal-title { color: #60a5fa; }
[data-theme="dark"] .modal-subtitle { color: #94a3b8; }
[data-theme="dark"] .modal-close { background: #0f1724; color: #94a3b8; }
[data-theme="dark"] .modal-close:hover { background: #334155; color: #e2e8f0; }
[data-theme="dark"] .modal-section-title { color: #94a3b8; }
[data-theme="dark"] .modal-kp-item { background: #162032; border-left-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .modal-kp-item.mastered { border-left-color: #10b981; background: #0f2a1e; }
[data-theme="dark"] .modal-kp-title { color: #e2e8f0; }
[data-theme="dark"] .modal-kp-desc { color: #94a3b8; }
[data-theme="dark"] .modal-chapter-summary { background: linear-gradient(135deg,#162032,#0f2a1e); border-color: #334155; }
[data-theme="dark"] .modal-chapter-summary .summary-label { color: #60a5fa; }
[data-theme="dark"] .modal-chapter-summary .summary-text { color: #e2e8f0; }
[data-theme="dark"] .modal-progress-bar { background: #0f1724; }
[data-theme="dark"] .modal-progress-text { color: #60a5fa; }
[data-theme="dark"] .modal-footer { border-top-color: #334155; }
[data-theme="dark"] .modal-btn-secondary { background: #0f1724; color: #94a3b8; border-color: #475569; }
[data-theme="dark"] .modal-btn-secondary:hover { background: #334155; }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.7); }

/* Footer dark */
[data-theme="dark"] .footer { color: #64748b; }
[data-theme="dark"] .footer-divider { border-color: #334155; background: #334155; }

/* No results dark */
[data-theme="dark"] .no-results { color: #64748b; }

/* ===== Learning overlay dark ===== */
[data-theme="dark"] .learning-overlay { background: #0f1724; }
[data-theme="dark"] .learning-topbar { background: #1e293b; border-bottom-color: #334155; }
[data-theme="dark"] .learning-back { background: #1e293b; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .learning-back:hover { background: #334155; }
[data-theme="dark"] .learning-breadcrumb { color: #94a3b8; }
[data-theme="dark"] .learning-breadcrumb span { color: #60a5fa; }
[data-theme="dark"] .learning-counter { color: #94a3b8; background: #0f1724; }
[data-theme="dark"] .learning-progress-wrap { background: #334155; }
[data-theme="dark"] .learning-body { background: #0f1724; }
[data-theme="dark"] .learning-kp-num { color: #60a5fa; }
[data-theme="dark"] .learning-kp-title { color: #f1f5f9; }
[data-theme="dark"] .learning-kp-content { color: #cbd5e1; }
[data-theme="dark"] .learning-kp-content h3 { color: #60a5fa; }
[data-theme="dark"] .learning-kp-content h4 { color: #e2e8f0; }
[data-theme="dark"] .learning-kp-content th { background: #162032; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .learning-kp-content td { border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .learning-kp-content code { background: #162032; color: #60a5fa; }
[data-theme="dark"] .learning-callout { background: #162032; border-color: #1e3a5f; }
[data-theme="dark"] .learning-callout p { color: #cbd5e1; }
[data-theme="dark"] .learning-callout-warn { background: #1f1a0e; border-color: #92400e; }
[data-theme="dark"] .learning-callout-warn p { color: #fde68a; }
[data-theme="dark"] .learning-callout-tip { background: #0f2a1e; border-color: #065f46; }
[data-theme="dark"] .learning-callout-tip p { color: #a7f3d0; }
[data-theme="dark"] .learning-callout-title { color: inherit; }
[data-theme="dark"] .learning-key-points { background: linear-gradient(135deg,#1a3550,#1e4976); }
[data-theme="dark"] .learning-example { background: #162032; border-color: #334155; }
[data-theme="dark"] .learning-example-title { color: #60a5fa; }
[data-theme="dark"] .learning-example p { color: #cbd5e1; }
[data-theme="dark"] .learning-bottombar { background: #1e293b; border-top-color: #334155; }
[data-theme="dark"] .learning-nav-btn { background: #1e293b; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .learning-nav-btn:hover { background: #334155; border-color: #64748b; }
[data-theme="dark"] .learning-nav-btn.primary { background: #3b82f6; color: #fff; border-color: #3b82f6; }

/* ===== Notes dark ===== */
[data-theme="dark"] .notes-title { color: #60a5fa; }
[data-theme="dark"] .notes-textarea { background: #162032; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .notes-textarea:focus { border-color: #3b82f6; background: #1e293b; }
[data-theme="dark"] .notes-textarea::placeholder { color: #475569; }
[data-theme="dark"] .notes-save-btn { background: #3b82f6; }
[data-theme="dark"] .notes-save-btn:hover { background: #2563eb; }
[data-theme="dark"] .notes-delete-btn { background: #1e293b; border-color: #475569; color: #94a3b8; }
[data-theme="dark"] .notes-delete-btn:hover { border-color: #ef4444; color: #ef4444; background: #1e1215; }
[data-theme="dark"] .notes-char-count { color: #475569; }

/* ===== Quiz overlay dark ===== */
[data-theme="dark"] .quiz-container { background: #1e293b; }
[data-theme="dark"] .quiz-header { border-bottom-color: #334155; }
[data-theme="dark"] .quiz-title { color: #60a5fa; }
[data-theme="dark"] .quiz-progress { color: #94a3b8; }
[data-theme="dark"] .quiz-question { color: #f1f5f9; }
[data-theme="dark"] .quiz-option { border-color: #475569; color: #cbd5e1; background: #1e293b; }
[data-theme="dark"] .quiz-option:hover { border-color: #3b82f6; background: #162032; }
[data-theme="dark"] .quiz-option.selected { border-color: #3b82f6; background: #1a2744; }
[data-theme="dark"] .quiz-option.correct { border-color: #10b981; background: #0f2a1e; color: #a7f3d0; }
[data-theme="dark"] .quiz-option.wrong { border-color: #ef4444; background: #2a1215; color: #fca5a5; }
[data-theme="dark"] .quiz-option-letter { background: #0f1724; color: #94a3b8; }
[data-theme="dark"] .quiz-option.selected .quiz-option-letter { background: #3b82f6; color: #fff; }
[data-theme="dark"] .quiz-option.correct .quiz-option-letter { background: #10b981; color: #fff; }
[data-theme="dark"] .quiz-option.wrong .quiz-option-letter { background: #ef4444; color: #fff; }
[data-theme="dark"] .quiz-footer { border-top-color: #334155; }
[data-theme="dark"] .quiz-btn { background: #1e293b; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .quiz-btn:hover { background: #334155; }
[data-theme="dark"] .quiz-result-score { color: #60a5fa; }
[data-theme="dark"] .quiz-result-label { color: #94a3b8; }
[data-theme="dark"] .quiz-result-msg { color: #cbd5e1; }

/* ===== Practice overlay dark ===== */
[data-theme="dark"] .practice-container { background: #1e293b; }
[data-theme="dark"] .practice-header { background: #162032; border-bottom-color: #334155; }
[data-theme="dark"] .practice-title { color: #60a5fa; }
[data-theme="dark"] .practice-step { color: #94a3b8; }
[data-theme="dark"] .practice-scenario { background: #162032; border-color: #1e3a5f; }
[data-theme="dark"] .practice-scenario h4 { color: #60a5fa; }
[data-theme="dark"] .practice-scenario p { color: #cbd5e1; }
[data-theme="dark"] .practice-task { color: #f1f5f9; }
[data-theme="dark"] .practice-option { border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .practice-option:hover { border-color: #3b82f6; background: #162032; }
[data-theme="dark"] .practice-option.selected { border-color: #3b82f6; background: #1a2744; }
[data-theme="dark"] .practice-option.correct { border-color: #10b981; background: #0f2a1e; }
[data-theme="dark"] .practice-option.wrong { border-color: #ef4444; background: #2a1215; }
[data-theme="dark"] .practice-input { background: #0f1724; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .practice-input:focus { border-color: #3b82f6; }
[data-theme="dark"] .practice-input.correct { border-color: #10b981; background: #0f2a1e; }
[data-theme="dark"] .practice-input.wrong { border-color: #ef4444; background: #2a1215; }
[data-theme="dark"] .practice-feedback.correct { background: #0f2a1e; border-color: #065f46; color: #a7f3d0; }
[data-theme="dark"] .practice-feedback.wrong { background: #2a1215; border-color: #991b1b; color: #fca5a5; }
[data-theme="dark"] .practice-footer { border-top-color: #334155; }
[data-theme="dark"] .practice-btn { background: #1e293b; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .practice-btn:hover { background: #334155; }
[data-theme="dark"] .practice-result-score { color: #e2e8f0; }
[data-theme="dark"] .practice-result-detail { color: #94a3b8; }
[data-theme="dark"] .practice-result-msg { color: #cbd5e1; }
[data-theme="dark"] .practice-overlay { background: rgba(0,0,0,.7); }

/* ===== Login page dark adjustments ===== */
[data-theme="dark"] .login-container { background: #1e293b; }
[data-theme="dark"] .login-right { background: #1e293b; }
[data-theme="dark"] .login-tabs { border-bottom-color: #334155; }
[data-theme="dark"] .login-tab { color: #64748b; }
[data-theme="dark"] .login-tab.active { color: #60a5fa; }
[data-theme="dark"] .login-tab:hover { color: #60a5fa; }
[data-theme="dark"] .form-group label { color: #e2e8f0; }
[data-theme="dark"] .form-group input { background: #0f1724; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .form-group input:focus { border-color: #3b82f6; background: #1a2332; }
[data-theme="dark"] .form-group input::placeholder { color: #64748b; }
[data-theme="dark"] .login-demo { background: #162032; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .login-demo strong { color: #e2e8f0; }
[data-theme="dark"] .login-msg.error { background: #2a1215; color: #fca5a5; border-color: #991b1b; }
[data-theme="dark"] .login-msg.success { background: #0f2a1e; color: #a7f3d0; border-color: #065f46; }

/* ===== Header user area dark ===== */
[data-theme="dark"] .header-user-name { color: #e2e8f0 !important; }
[data-theme="dark"] .header-user-role { color: #64748b !important; }
[data-theme="dark"] .header-logout-btn { border-color: #475569 !important; color: #94a3b8 !important; }
[data-theme="dark"] .header-logout-btn:hover { background: #2a1215 !important; color: #fca5a5 !important; border-color: #991b1b !important; }

/* ===== Path recommendation dark ===== */
[data-theme="dark"] #path-recommendation { background: #1e293b !important; border-color: #334155 !important; }

/* ===== Scrollbar dark ===== */
[data-theme="dark"] ::-webkit-scrollbar { background: #0f1724; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ===== Inline styles override for v41-enhance generated content ===== */
[data-theme="dark"] [style*="background:#dbeafe"] { background: #1a2744 !important; color: #60a5fa !important; }
[data-theme="dark"] [style*="background:#fef3c7"] { background: #1f1a0e !important; color: #fbbf24 !important; }
[data-theme="dark"] [style*="color:#2563eb"] { color: #60a5fa !important; }
[data-theme="dark"] [style*="color:#d97706"] { color: #fbbf24 !important; }
[data-theme="dark"] [style*="color:#0f172a"] { color: #e2e8f0 !important; }
[data-theme="dark"] [style*="color:#374151"] { color: #cbd5e1 !important; }
[data-theme="dark"] [style*="color:#6b7280"] { color: #94a3b8 !important; }
[data-theme="dark"] [style*="background:#fff"] { background: #1e293b !important; }
[data-theme="dark"] [style*="background:#f1f5f9"] { background: #0f1724 !important; }
[data-theme="dark"] [style*="background:#f8fafc"] { background: #162032 !important; }
[data-theme="dark"] [style*="background:#fafbfc"] { background: #162032 !important; }
[data-theme="dark"] [style*="border:1px solid #e2e8f0"] { border-color: #334155 !important; }
[data-theme="dark"] [style*="border:1px solid #e5e7eb"] { border-color: #334155 !important; }
[data-theme="dark"] [style*="border:1px solid #d1d5db"] { border-color: #475569 !important; }

/* ===== Quiz explanation box dark ===== */
[data-theme="dark"] .quiz-body [style*="background:#f8fafc"] { background: #162032 !important; color: #94a3b8 !important; }



/* === Foreign Trade Toolkit Styles === */
.toolkit-tabs{display:flex;gap:0;margin:20px 0 0;border-bottom:2px solid var(--border);flex-wrap:wrap}
.toolkit-tab{padding:12px 24px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s}
.toolkit-tab:hover{color:var(--blue)}
.toolkit-tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
.toolkit-search{margin:20px 0;display:flex;gap:12px;align-items:center}
.toolkit-search input{flex:1;padding:10px 16px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-size:14px;outline:none}
.toolkit-search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.toolkit-search button{padding:10px 20px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:14px;cursor:pointer;font-weight:500;transition:background .2s}
.toolkit-search button:hover{background:#1B3A5C}
.toolkit-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}
.toolkit-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:box-shadow .2s}
.toolkit-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.toolkit-card-code{font-size:18px;font-weight:700;color:var(--blue);margin-bottom:6px;font-family:'Courier New',monospace}
.toolkit-card-name{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}
.toolkit-card-desc{font-size:13px;color:var(--text2);line-height:1.5}
.toolkit-card-tag{display:inline-block;padding:2px 8px;background:rgba(59,130,246,.1);color:var(--blue);border-radius:4px;font-size:12px;margin-top:8px}
.exchange-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-top:20px;max-width:560px}
.exchange-row{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.exchange-row label{font-size:14px;color:var(--text2);min-width:70px}
.exchange-row input,.exchange-row select{padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-size:14px}
.exchange-row input{flex:1;min-width:120px}
.exchange-result{margin-top:20px;padding:20px;background:var(--bg);border-radius:10px;border:1px solid var(--border)}
.exchange-result .amount{font-size:28px;font-weight:700;color:var(--blue)}
.exchange-result .rate-info{font-size:12px;color:var(--text2);margin-top:8px}
.exchange-btn{padding:10px 24px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:14px;cursor:pointer;font-weight:500}
.exchange-btn:hover{background:#1B3A5C}
.freight-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-top:20px;max-width:600px}
.freight-row{display:flex;gap:12px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.freight-row label{font-size:14px;color:var(--text2);min-width:80px}
.freight-row input,.freight-row select{padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-size:14px}
.freight-row input{flex:1;min-width:100px}
.freight-result{margin-top:20px;padding:20px;background:var(--bg);border-radius:10px;border:1px solid var(--border)}
.freight-result .cost{font-size:24px;font-weight:700;color:var(--blue)}
.freight-result .note{font-size:12px;color:var(--text2);margin-top:8px;font-style:italic}
.freight-btn{padding:10px 24px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:14px;cursor:pointer;font-weight:500}
.incoterms-group{margin-top:24px}
.incoterms-group-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.incoterms-group-badge{display:inline-block;padding:2px 10px;border-radius:4px;font-size:12px;font-weight:600;color:#fff}
.incoterms-group-badge.e-group{background:#ef4444}
.incoterms-group-badge.f-group{background:#f59e0b}
.incoterms-group-badge.c-group{background:#3b82f6}
.incoterms-group-badge.d-group{background:#10b981}
.incoterms-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:12px}
.incoterms-card-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.incoterms-card-code{font-size:20px;font-weight:800;color:var(--blue)}
.incoterms-card-fullname{font-size:14px;color:var(--text2)}
.incoterms-card-cn{font-size:15px;font-weight:600;color:var(--text);margin-bottom:8px}
.incoterms-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px}
.incoterms-detail-grid dt{color:var(--text2);font-weight:500}
.incoterms-detail-grid dd{color:var(--text)}
.toolkit-empty{text-align:center;padding:40px;color:var(--text2);font-size:14px}
@media(max-width:768px){.toolkit-cards{grid-template-columns:1fr}.incoterms-detail-grid{grid-template-columns:1fr}.exchange-row,.freight-row{flex-direction:column;align-items:stretch}.exchange-row label,.freight-row label{min-width:auto}}
/* Dark mode toolkit */
[data-theme="dark"] .toolkit-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.3)}
[data-theme="dark"] .toolkit-search input::placeholder,[data-theme="dark"] .freight-row input::placeholder,[data-theme="dark"] .exchange-row input::placeholder{color:#64748b}
[data-theme="dark"] .exchange-btn:hover,[data-theme="dark"] .freight-btn:hover,[data-theme="dark"] .toolkit-search button:hover{background:#2a5a8c}
[data-theme="dark"] .toolkit-card-tag{background:rgba(59,130,246,.15)}

/* ===== Certificate Template Library Styles ===== */
.cert-header { margin-bottom: 20px; }
.cert-header h2 { font-size: 20px; font-weight: 700; color: var(--primary); margin: 0 0 6px 0; }
.cert-header p { font-size: 13.5px; color: var(--text2); margin: 0; }
.cert-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.cert-tab { padding: 6px 16px; border-radius: 20px; font-size: 13px; cursor: pointer; background: var(--card-bg, #fff); border: 1px solid var(--border); color: var(--text2); transition: all 0.2s; user-select: none; }
.cert-tab:hover { border-color: var(--blue); color: var(--blue); }
.cert-tab.active { background: #1B3A5C; color: #fff; border-color: #1B3A5C; }
.cert-search-row { margin-bottom: 18px; }
.cert-search-row input { width: 100%; max-width: 360px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--card-bg, #fff); color: var(--text); outline: none; }
.cert-search-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(59,130,246,0.12); }
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cert-card { background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 18px; transition: all 0.2s; display: flex; flex-direction: column; }
.cert-card:hover { border-color: var(--blue); box-shadow: 0 4px 16px rgba(59,130,246,0.08); transform: translateY(-2px); }
.cert-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.cert-card-title { font-size: 14.5px; font-weight: 700; color: var(--primary); line-height: 1.3; }
.cert-card-title-en { font-size: 11.5px; color: var(--text2); margin-top: 2px; font-weight: 400; }
.cert-card-code { font-size: 11px; color: var(--blue); background: rgba(59,130,246,0.08); padding: 2px 8px; border-radius: 10px; white-space: nowrap; font-weight: 600; }
.cert-card-desc { font-size: 12.5px; color: var(--text2); line-height: 1.6; margin-bottom: 12px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cert-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cert-tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(59,130,246,0.06); color: var(--blue); }
.cert-card-actions { display: flex; gap: 8px; margin-top: auto; }
.cert-btn { padding: 6px 14px; border-radius: 6px; font-size: 12px; cursor: pointer; border: 1px solid var(--border); background: var(--card-bg, #fff); color: var(--text); transition: all 0.15s; }
.cert-btn:hover { border-color: var(--blue); color: var(--blue); }
.cert-btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.cert-btn-primary:hover { background: #2563eb; }
/* Certificate Preview Modal */
.cert-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.cert-modal { background: var(--card-bg, #fff); border-radius: 12px; width: 90%; max-width: 860px; max-height: 88vh; overflow-y: auto; padding: 28px; position: relative; }
.cert-modal-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--bg); color: var(--text2); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.cert-modal-close:hover { background: rgba(239,68,68,0.1); color: #ef4444; }
.cert-modal-title { font-size: 18px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.cert-modal-subtitle { font-size: 13px; color: var(--text2); margin-bottom: 18px; }
.cert-template-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 18px; }
.cert-template-table th, .cert-template-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.cert-template-table th { background: rgba(27,58,92,0.06); font-weight: 600; color: var(--primary); white-space: nowrap; width: 120px; }
.cert-template-table td { color: var(--text); }
.cert-template-table .tmpl-header { background: #1B3A5C; color: #fff; text-align: center; font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.cert-template-table .tmpl-subheader { background: rgba(27,58,92,0.1); text-align: center; font-weight: 600; color: var(--primary); font-size: 12px; }
.cert-template-table .tmpl-note { font-size: 11px; color: var(--text2); font-style: italic; }
.cert-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
[data-theme="dark"] .cert-tab.active { background: #3b82f6; border-color: #3b82f6; }
[data-theme="dark"] .cert-template-table .tmpl-header { background: #1e3a5f; }
[data-theme="dark"] .cert-template-table th { background: rgba(59,130,246,0.1); }
[data-theme="dark"] .cert-template-table .tmpl-subheader { background: rgba(59,130,246,0.08); }


/* ===== Case Library Styles ===== */
.case-lib-header{margin-bottom:28px}
.case-lib-header h2{font-size:22px;font-weight:700;color:var(--text);margin-bottom:6px}
.case-lib-header p{font-size:13.5px;color:var(--text2)}
.case-tab-filters{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.case-tab-pill{padding:7px 18px;border-radius:100px;font-size:12.5px;font-weight:500;cursor:pointer;transition:all .2s;background:var(--bg);color:var(--text2);border:1px solid var(--border);outline:none}
.case-tab-pill:hover{border-color:var(--blue);color:var(--blue)}
.case-tab-pill.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.case-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md,12px);padding:22px;transition:all .25s;display:flex;flex-direction:column}
.case-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--blue)}
.case-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.case-card-id{font-size:11px;font-weight:600;color:var(--blue);background:rgba(59,130,246,.1);padding:2px 10px;border-radius:100px;letter-spacing:.5px}
.case-card-diff{font-size:11px;font-weight:600;padding:2px 10px;border-radius:100px}
.case-diff-beginner{background:rgba(34,197,94,.1);color:#22c55e}
.case-diff-intermediate{background:rgba(249,115,22,.1);color:#f97316}
.case-diff-advanced{background:rgba(239,68,68,.1);color:#ef4444}
[data-theme="dark"] .case-diff-beginner{background:rgba(34,197,94,.15);color:#4ade80}
[data-theme="dark"] .case-diff-intermediate{background:rgba(249,115,22,.15);color:#fb923c}
[data-theme="dark"] .case-diff-advanced{background:rgba(239,68,68,.15);color:#f87171}
.case-card-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.4}
.case-card-cat{display:inline-block;font-size:11px;font-weight:500;color:var(--blue);background:rgba(59,130,246,.08);padding:2px 8px;border-radius:4px;margin-bottom:8px}
.case-card-desc{font-size:12.5px;color:var(--text2);line-height:1.7;margin-bottom:12px;flex:1}
.case-card-meta{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.case-meta-item{font-size:12px;color:var(--text3)}
.case-meta-item strong{color:var(--text);font-weight:600}
.case-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--border)}
.case-card-parties{font-size:12px;color:var(--text3)}
.btn-start-case{padding:7px 18px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s}
.btn-start-case:hover{background:var(--primary);box-shadow:0 2px 8px rgba(59,130,246,.3)}
/* Case Modal */
.case-modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:2000;justify-content:center;align-items:center;padding:20px}
.case-modal-overlay.show{display:flex}
.case-modal-box{width:100%;max-width:1100px;height:85vh;background:var(--card);border-radius:16px;overflow:hidden;display:flex;box-shadow:0 25px 50px rgba(0,0,0,.25)}
.case-modal-left{width:340px;min-width:340px;background:#1B3A5C;color:#fff;padding:24px;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}
.case-modal-left h3{font-size:17px;font-weight:700;margin-bottom:4px;color:#fff}
.case-modal-left .cml-id{font-size:11px;color:rgba(255,255,255,.5);margin-bottom:14px}
.case-modal-left .cml-section-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.4);margin:16px 0 6px}
.case-modal-left .cml-text{font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.8)}
.case-modal-party{display:flex;align-items:center;gap:8px;padding:6px 0}
.case-modal-party-dot{width:7px;height:7px;border-radius:50%;background:#3b82f6;flex-shrink:0}
.case-modal-party-name{font-size:12.5px;font-weight:600;color:#fff}
.case-modal-party-role{font-size:11px;color:rgba(255,255,255,.5)}
.case-modal-right{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--card)}
.case-modal-right-header{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.case-modal-right-header h4{font-size:15px;font-weight:600;color:var(--text)}
.btn-close-case-modal{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:.15s}
.btn-close-case-modal:hover{background:var(--bg);color:var(--danger,#ef4444)}
.case-modal-body{flex:1;overflow-y:auto;padding:24px}
.cm-step-progress{display:flex;align-items:center;gap:4px;margin-bottom:20px}
.cm-step-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;background:var(--bg);color:var(--text3);flex-shrink:0;border:1px solid var(--border)}
.cm-step-dot.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.cm-step-dot.completed{background:#22c55e;color:#fff;border-color:#22c55e}
.cm-step-dot.wrong{background:#ef4444;color:#fff;border-color:#ef4444}
.cm-step-line{flex:1;height:2px;background:var(--border)}
.cm-step-line.completed{background:#22c55e}
.cm-question-label{font-size:11px;font-weight:600;color:var(--blue);margin-bottom:4px}
.cm-question-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:16px;line-height:1.5}
.cm-options{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.cm-option-btn{padding:12px 16px;border:2px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-size:13px;cursor:pointer;transition:.15s;text-align:left;line-height:1.5}
.cm-option-btn:hover:not(.cm-disabled){border-color:var(--blue);background:rgba(59,130,246,.05)}
.cm-option-btn.cm-correct{border-color:#22c55e;background:rgba(34,197,94,.1);color:#22c55e;font-weight:600}
.cm-option-btn.cm-wrong{border-color:#ef4444;background:rgba(239,68,68,.08);color:#ef4444;font-weight:600}
.cm-option-btn.cm-show-correct{border-color:#22c55e;background:rgba(34,197,94,.08)}
.cm-option-btn.cm-disabled{cursor:default;opacity:.8}
.cm-feedback{padding:14px 16px;border-radius:8px;margin-top:14px;font-size:12.5px;line-height:1.7}
.cm-feedback.cm-fb-correct{background:rgba(34,197,94,.08);border:1px solid #22c55e;color:#166534}
.cm-feedback.cm-fb-wrong{background:rgba(239,68,68,.08);border:1px solid #ef4444;color:#991b1b}
[data-theme="dark"] .cm-feedback.cm-fb-correct{color:#86efac}
[data-theme="dark"] .cm-feedback.cm-fb-wrong{color:#fca5a5}
.cm-feedback strong{display:block;margin-bottom:4px;font-size:13px}
.cm-next-btn{padding:9px 24px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;margin-top:14px}
.cm-next-btn:hover{background:var(--primary)}
.cm-restart-btn{padding:9px 24px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;margin-top:8px}
.cm-restart-btn:hover{background:var(--border)}
.cm-score-wrap{text-align:center;padding:16px 0}
.cm-score-circle{width:110px;height:110px;border-radius:50%;margin:0 auto 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:#fff}
.cm-score-circle span{font-size:11px;font-weight:400;opacity:.8}
.cm-score-circle.cm-excellent{background:linear-gradient(135deg,#22c55e,#16a34a)}
.cm-score-circle.cm-good{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.cm-score-circle.cm-pass{background:linear-gradient(135deg,#f97316,#ea580c)}
.cm-score-circle.cm-fail{background:linear-gradient(135deg,#ef4444,#dc2626)}
.cm-score-wrap h4{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px}
.cm-score-wrap p{font-size:13px;color:var(--text2);margin-bottom:4px}
.cm-score-detail{text-align:left;margin:16px auto;max-width:480px}
.cm-score-detail-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.cm-score-detail-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;flex-shrink:0}
.cm-score-detail-icon.cm-ic-correct{background:#22c55e}
.cm-score-detail-icon.cm-ic-wrong{background:#ef4444}
@media(max-width:1200px){.cases-grid{grid-template-columns:1fr}}
@media(max-width:900px){.case-modal-box{flex-direction:column;height:90vh}.case-modal-left{width:100%;min-width:100%;max-height:180px}}


/* ==================== Training Center ==================== */
.tc-container{padding:24px 32px;max-width:1400px;margin:0 auto}
.tc-header{margin-bottom:24px}
.tc-header h2{font-size:22px;font-weight:800;color:var(--primary);margin:0 0 6px}
.tc-header p{font-size:13px;color:var(--text2);margin:0}
.tc-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.tc-stat-card{background:var(--card);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);border:1px solid var(--border);display:flex;align-items:center;gap:14px;transition:.2s}
.tc-stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.tc-stat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tc-stat-icon.blue{background:#dbeafe;color:#2563eb}
.tc-stat-icon.green{background:#d1fae5;color:#059669}
.tc-stat-icon.orange{background:#fef3c7;color:#d97706}
.tc-stat-icon.purple{background:#ede9fe;color:#7c3aed}
.tc-stat-value{font-size:26px;font-weight:800;color:var(--primary);line-height:1.2}
.tc-stat-label{font-size:12px;color:var(--text2);margin-top:2px}
.tc-main-row{display:flex;gap:20px;align-items:flex-start}
.tc-left-col{flex:0 0 60%;min-width:0}
.tc-right-col{flex:1;min-width:0}
.tc-panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden}
.tc-panel-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.tc-panel-title{font-size:14px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:8px}
.tc-panel-title::before{content:'';width:3px;height:14px;background:var(--blue);border-radius:2px}
.tc-btn{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text);transition:.15s;display:inline-flex;align-items:center;gap:5px}
.tc-btn:hover{background:var(--bg)}
.tc-btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.tc-btn-primary:hover{opacity:.9;background:var(--blue)}
.tc-btn-sm{padding:4px 10px;font-size:11px}
.tc-btn-danger{color:var(--red);border-color:rgba(239,68,68,.3)}
.tc-btn-danger:hover{background:rgba(239,68,68,.06)}
.tc-table{width:100%;border-collapse:collapse}
.tc-table th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border);cursor:pointer;user-select:none;white-space:nowrap}
.tc-table th:hover{color:var(--text)}
.tc-table th .sort-icon{font-size:10px;margin-left:3px;opacity:.4}
.tc-table td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--border);color:var(--text)}
.tc-table tr:nth-child(even){background:rgba(241,245,249,.5)}
.tc-table tr:hover{background:rgba(59,130,246,.04)}
.tc-progress-bar{width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden;position:relative}
.tc-progress-fill{height:100%;border-radius:4px;transition:width .5s}
.tc-progress-fill.high{background:linear-gradient(90deg,#10b981,#059669)}
.tc-progress-fill.mid{background:linear-gradient(90deg,#f59e0b,#d97706)}
.tc-progress-fill.low{background:linear-gradient(90deg,#ef4444,#dc2626)}
.tc-progress-text{font-size:11px;font-weight:700;color:var(--text2);margin-top:3px}
.tc-priority{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10.5px;font-weight:700}
.tc-priority.high{background:rgba(239,68,68,.1);color:#dc2626}
.tc-priority.mid{background:rgba(245,158,11,.1);color:#d97706}
.tc-priority.low{background:rgba(16,185,129,.1);color:#059669}
.tc-task-list{padding:12px 16px}
.tc-task-item{padding:12px 0;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px}
.tc-task-item:last-child{border-bottom:none}
.tc-task-info{flex:1;min-width:0}
.tc-task-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}
.tc-task-meta{font-size:11px;color:var(--text3);display:flex;gap:12px;flex-wrap:wrap}
.tc-task-progress{flex:0 0 80px;text-align:right}
.tc-modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:500;justify-content:center;align-items:center;backdrop-filter:blur(2px)}
.tc-modal-overlay.show{display:flex}
.tc-modal-box{background:var(--card);border-radius:12px;width:720px;max-width:90vw;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.tc-modal-header{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--card);z-index:1}
.tc-modal-header h3{font-size:16px;font-weight:700;color:var(--primary);margin:0}
.tc-modal-close{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text2);transition:.15s}
.tc-modal-close:hover{background:var(--bg);color:var(--text)}
.tc-modal-body{padding:20px 24px}
.tc-report-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.tc-report-info-item{padding:10px 14px;background:var(--bg);border-radius:8px;border:1px solid var(--border)}
.tc-report-info-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.tc-report-info-value{font-size:14px;font-weight:700;color:var(--text)}
.tc-report-section{margin-bottom:20px}
.tc-report-section-title{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.tc-report-section-title::before{content:'';width:3px;height:12px;background:var(--blue);border-radius:2px}
.tc-course-list{list-style:none;padding:0;margin:0}
.tc-course-list li{padding:8px 12px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:6px;margin-bottom:6px;font-size:13px}
.tc-course-score{font-weight:700;color:var(--blue);font-size:13px}
.tc-weak-tag{display:inline-block;padding:4px 10px;background:rgba(239,68,68,.08);color:var(--red);border-radius:4px;font-size:12px;font-weight:600;margin:0 6px 6px 0}
.tc-study-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tc-study-stat-card{padding:14px;background:var(--bg);border-radius:8px;border:1px solid var(--border);text-align:center}
.tc-study-stat-num{font-size:22px;font-weight:800;color:var(--primary)}
.tc-study-stat-label{font-size:11px;color:var(--text3);margin-top:2px}
.tc-radar-container{width:100%;height:280px}
.tc-form-group{margin-bottom:16px}
.tc-form-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px}
.tc-form-input,.tc-form-select,.tc-form-textarea{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:var(--card);color:var(--text);outline:none;transition:.15s;box-sizing:border-box}
.tc-form-input:focus,.tc-form-select:focus,.tc-form-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.tc-form-textarea{resize:vertical;min-height:80px;font-family:inherit}
.tc-checkbox-list{max-height:180px;overflow-y:auto;border:1px solid var(--border);border-radius:6px;padding:8px}
.tc-checkbox-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;cursor:pointer;transition:.1s;font-size:13px}
.tc-checkbox-item:hover{background:var(--bg)}
.tc-checkbox-item input{accent-color:var(--blue)}
.tc-import-area{width:100%;min-height:120px;padding:12px;border:2px dashed var(--border);border-radius:8px;font-size:12px;font-family:monospace;color:var(--text2);resize:vertical;background:var(--bg);outline:none;box-sizing:border-box}
.tc-import-area:focus{border-color:var(--blue)}
.tc-import-hint{font-size:11px;color:var(--text3);margin-top:8px;line-height:1.6}
[data-theme="dark"] .tc-stat-icon.blue{background:#1e3a5f;color:#60a5fa}
[data-theme="dark"] .tc-stat-icon.green{background:#14332a;color:#34d399}
[data-theme="dark"] .tc-stat-icon.orange{background:#3b2a0a;color:#fbbf24}
[data-theme="dark"] .tc-stat-icon.purple{background:#2e1065;color:#a78bfa}
[data-theme="dark"] .tc-table tr:nth-child(even){background:rgba(30,41,59,.3)}
[data-theme="dark"] .tc-table tr:hover{background:rgba(59,130,246,.06)}
[data-theme="dark"] .tc-stat-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.3)}
[data-theme="dark"] .tc-modal-box{background:#1e293b;border:1px solid #334155}
[data-theme="dark"] .tc-modal-header{background:#1e293b;border-bottom-color:#334155}
[data-theme="dark"] .tc-checkbox-item:hover{background:#1e293b}


/* ============ MY CERTIFICATES MODULE ============ */
.my-certs-header{margin-bottom:24px}
.my-certs-header h2{font-size:18px;font-weight:700;color:var(--text);margin:0 0 6px}
.my-certs-header p{font-size:13px;color:var(--text2);margin:0}
.my-certs-stats{display:flex;gap:16px;margin-bottom:28px}
.my-certs-stat-card{flex:1;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px 24px;display:flex;align-items:center;gap:16px}
.my-certs-stat-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.my-certs-stat-icon.acquired{background:rgba(16,185,129,.1)}
.my-certs-stat-icon.target{background:rgba(59,130,246,.1)}
.my-certs-stat-val{font-size:26px;font-weight:700;color:var(--text);line-height:1}
.my-certs-stat-label{font-size:12px;color:var(--text2);margin-top:4px}
.my-certs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.my-cert-card{background:var(--card);border-radius:12px;border:1px solid var(--border);overflow:hidden;transition:all .2s;position:relative}
.my-cert-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
.my-cert-card.acquired{border-width:2px}
.my-cert-card.locked{opacity:.7}
.my-cert-card.locked:hover{opacity:.85}
.my-cert-preview{height:180px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.my-cert-preview-inner{width:90%;height:85%;border-radius:6px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.my-cert-preview-bg{position:absolute;inset:0;opacity:.06}
.my-cert-preview-title{font-family:Georgia,'Times New Roman',serif;font-size:13px;font-weight:700;text-align:center;line-height:1.4;margin-bottom:6px;position:relative;z-index:1}
.my-cert-preview-sub{font-size:10px;color:var(--text2);text-align:center;position:relative;z-index:1}
.my-cert-preview-seal{position:absolute;bottom:12px;right:16px;width:48px;height:48px;opacity:.6}
.my-cert-lock-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;opacity:.3}
.my-cert-info{padding:16px 18px}
.my-cert-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.my-cert-name-en{font-size:11px;color:var(--text3);margin-bottom:10px}
.my-cert-date{font-size:11px;color:var(--text2);margin-bottom:10px;display:flex;align-items:center;gap:4px}
.my-cert-progress-wrap{margin-bottom:10px}
.my-cert-progress-bar{height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.my-cert-progress-fill{height:100%;border-radius:3px;transition:width .4s}
.my-cert-progress-label{font-size:11px;color:var(--text3);margin-top:4px;display:flex;justify-content:space-between}
.my-cert-actions{display:flex;gap:8px}
.my-cert-btn{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text2);transition:all .15s}
.my-cert-btn:hover{background:var(--bg);color:var(--text)}
.my-cert-btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.my-cert-btn.primary:hover{opacity:.9}

/* Certificate Detail Modal */
.cert-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.cert-modal-overlay.show{display:flex}
.cert-modal-box{width:90%;max-width:880px;max-height:90vh;overflow-y:auto;background:#1a1a2e;border-radius:16px;padding:32px;position:relative}
.cert-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;z-index:10}
.cert-modal-close:hover{background:rgba(255,255,255,.2)}

/* Certificate Body (always light for print) */
.cert-body{background:#fff;border-radius:8px;padding:0;position:relative;overflow:hidden}
.cert-outer-border{border:4px solid var(--cert-color,#1B3A5C);padding:6px;margin:16px}
.cert-inner-border{border:2px solid var(--cert-color,#1B3A5C);padding:40px 48px;position:relative;background:#fff}
.cert-pattern{position:absolute;inset:0;opacity:.03;pointer-events:none;background-image:repeating-linear-gradient(45deg,transparent,transparent 20px,var(--cert-color,#1B3A5C) 20px,var(--cert-color,#1B3A5C) 21px)}
.cert-top-ornament{text-align:center;margin-bottom:8px;position:relative;z-index:1}
.cert-top-ornament svg{width:60px;height:24px}
.cert-title{text-align:center;font-family:Georgia,'Times New Roman',serif;font-size:26px;font-weight:700;color:var(--cert-color,#1B3A5C);margin-bottom:6px;position:relative;z-index:1;letter-spacing:2px}
.cert-subtitle{text-align:center;font-family:Georgia,'Times New Roman',serif;font-size:14px;color:#666;margin-bottom:28px;position:relative;z-index:1;letter-spacing:1px}
.cert-divider{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--cert-color,#1B3A5C),transparent);margin:0 auto 28px}
.cert-recipient{text-align:center;font-size:13px;color:#444;margin-bottom:8px;position:relative;z-index:1}
.cert-recipient-name{font-family:Georgia,'Times New Roman',serif;font-size:28px;font-weight:700;color:#1a1a2e;margin-bottom:24px;position:relative;z-index:1;text-decoration:underline;text-decoration-color:var(--cert-color,#1B3A5C);text-underline-offset:6px}
.cert-body-text{text-align:center;font-size:14px;color:#444;line-height:2;margin-bottom:28px;position:relative;z-index:1}
.cert-body-text strong{color:var(--cert-color,#1B3A5C);font-size:16px}
.cert-meta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:20px;position:relative;z-index:1}
.cert-meta-left{text-align:left}
.cert-meta-label{font-size:10px;color:#999;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.cert-meta-value{font-size:13px;color:#333;font-weight:600}
.cert-meta-right{text-align:center}
.cert-seal-svg{width:90px;height:90px}
.cert-modal-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}
.cert-modal-btn{padding:10px 28px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;transition:.15s}
.cert-modal-btn:hover{background:rgba(255,255,255,.2)}
.cert-modal-btn.primary{background:var(--blue);border-color:var(--blue)}

/* Dark mode adjustments for cert cards */
[data-theme="dark"] .my-cert-card{background:#1e293b;border-color:#334155}
[data-theme="dark"] .my-cert-card.acquired{border-width:2px}
[data-theme="dark"] .my-certs-stat-card{background:#1e293b;border-color:#334155}


/* V61: Wrong book & Analytics styles */
#wrong-book-container .kpi-card { background: var(--card); border-radius: 10px; padding: 14px 16px; text-align: center; border: 1px solid var(--border); }
#analytics-container .kpi-card { background: var(--card); border-radius: 10px; padding: 14px 16px; text-align: center; border: 1px solid var(--border); }
#diagnostic-overlay .quiz-option:hover { border-color: #3b82f6; background: #eff6ff; }


/* CC GLOBAL SEARCH */
.cc-global-search{margin-bottom:20px;position:relative}
.cc-global-search input{width:100%;padding:12px 16px 12px 42px;border:1px solid var(--border);border-radius:10px;font-size:14px;outline:none;transition:.2s;background:#fff;box-shadow:var(--shadow)}
.cc-global-search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.cc-global-search .cc-gs-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text3)}
.cc-global-search .cc-gs-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;display:none}
.cc-search-results{margin-top:12px;max-height:400px;overflow-y:auto}
.cc-sr-item{padding:12px 16px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;cursor:pointer;transition:.15s;background:#fff}
.cc-sr-item:hover{border-color:var(--blue);background:rgba(59,130,246,.02);box-shadow:var(--shadow)}
.cc-sr-breadcrumb{font-size:11px;color:var(--text3);margin-bottom:4px;display:flex;align-items:center;gap:4px}
.cc-sr-breadcrumb span{color:var(--blue);font-weight:500}
.cc-sr-title{font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:3px}
.cc-sr-excerpt{font-size:12px;color:var(--text2);line-height:1.5}
.cc-sr-excerpt mark,.cc-sr-title mark{background:rgba(245,158,11,.2);color:var(--text);padding:0 2px;border-radius:2px}
.cc-sr-count{font-size:12px;color:var(--text3);padding:8px 0}

/* CC GROUP TAG on cards */
.cc-card-group-tag{position:absolute;top:12px;right:12px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;background:rgba(27,58,92,.08);color:var(--primary)}
.cc-card-supplement-tag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;background:rgba(245,158,11,.1);color:#d97706;margin-left:6px;display:inline-block}

/* CC CHAPTER GUIDE */
.cc-chapter-guide{background:#f8fafc;border:1px solid #e8ecf1;border-radius:6px;padding:8px 12px;margin:4px 0 8px;font-size:12px;color:var(--text2);line-height:1.5}
.cc-chapter-guide::before{content:'导读 ';font-weight:700;color:var(--blue);font-size:11px}

/* CC REVIEW BUTTON */
.learning-review-btn{padding:8px 16px;border:none;border-radius:8px;background:#f59e0b;color:#fff;cursor:pointer;font-size:13px;font-weight:600;transition:.15s;margin-left:8px}
.learning-review-btn:hover{background:#d97706}
.learning-review-btn.reviewed{background:#6b7280}

/* CC RELATED KPs in learning */
.learning-related-kps{margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}
.learning-related-title{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.learning-related-title::before{content:'';width:3px;height:12px;background:var(--orange);border-radius:2px}
.learning-related-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;margin-bottom:6px;cursor:pointer;transition:.15s;font-size:12.5px}
.learning-related-item:hover{border-color:var(--blue);background:rgba(59,130,246,.03)}
.learning-related-course{font-size:11px;font-weight:600;color:var(--blue);background:rgba(59,130,246,.08);padding:2px 8px;border-radius:4px;white-space:nowrap}
.learning-related-kptitle{color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* CC REVIEW COUNT in overview */
.overview-review-banner{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:1px solid #f59e0b;border-radius:var(--radius);padding:14px 20px;margin-bottom:14px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:.15s}
.overview-review-banner:hover{box-shadow:var(--shadow-md)}
.overview-review-icon{width:36px;height:36px;border-radius:8px;background:#f59e0b;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.overview-review-info{flex:1}
.overview-review-title{font-size:14px;font-weight:700;color:#92400e}
.overview-review-desc{font-size:12px;color:#a16207;margin-top:2px}
.overview-review-btn{padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;background:#f59e0b;color:#fff;border:none;cursor:pointer}

/* COURSE CENTER */
.cc-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.cc-stat-card{background:var(--card);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);border:1px solid var(--border);text-align:center}
.cc-stat-num{font-size:32px;font-weight:800;color:var(--primary);line-height:1.2}
.cc-stat-label{font-size:13px;color:var(--text2);margin-top:4px}
.cc-group-title{font-size:13px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.6px;padding:8px 0 12px;margin-top:8px;border-bottom:1px solid var(--border);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.cc-group-title::before{content:'';width:3px;height:14px;background:var(--blue);border-radius:2px}
.cc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
@media(max-width:1440px){.cc-grid{grid-template-columns:repeat(3,1fr)}}
.cc-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:.25s;position:relative}
.cc-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:#cbd5e1}
.cc-card-header{padding:18px 18px 14px;display:flex;align-items:flex-start;gap:12px}
.cc-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,#1B3A5C 0%,#2563eb 100%);color:#fff}
.cc-card-icon svg{width:20px;height:20px}
.cc-card-info{flex:1;min-width:0}
.cc-card-name{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:4px}
.cc-card-desc{font-size:12px;color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-card-footer{padding:10px 18px 14px;border-top:1px solid var(--border);background:#fafbfc}
.cc-card-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cc-card-pts{font-size:12px;color:var(--text2)}
.cc-card-pts b{color:var(--primary);font-weight:700}
.cc-card-books{font-size:11px;color:var(--text3)}
.cc-card-bar{height:4px;background:#f1f5f9;border-radius:2px;overflow:hidden}
.cc-card-bar-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#10b981);border-radius:2px;transition:width .4s}
.cc-detail-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:250;align-items:center;justify-content:center}
.cc-detail-overlay.show{display:flex}
.cc-detail-panel{background:#fff;border-radius:14px;width:90%;max-width:960px;max-height:85vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.2);display:flex;flex-direction:column}
.cc-detail-header{padding:20px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;flex-shrink:0}
.cc-detail-header-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1B3A5C 0%,#2563eb 100%);color:#fff;flex-shrink:0}
.cc-detail-header-info{flex:1;min-width:0}
.cc-detail-header-name{font-size:18px;font-weight:700;color:var(--text)}
.cc-detail-header-desc{font-size:13px;color:var(--text2);margin-top:2px}
.cc-detail-close{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:.15s;flex-shrink:0}
.cc-detail-close:hover{background:#f1f5f9;color:var(--text)}
.cc-detail-body{flex:1;overflow-y:auto;padding:20px 28px}
.cc-detail-books{margin-bottom:20px}
.cc-detail-books-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px}
.cc-detail-book-tags{display:flex;flex-wrap:wrap;gap:8px}
.cc-detail-book-tag{padding:5px 12px;border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--text);background:#fafbfc;cursor:pointer;transition:.15s}
.cc-detail-book-tag:hover{border-color:var(--blue);color:var(--blue);background:rgba(59,130,246,.04)}
.cc-kp-chapter{margin-bottom:16px}
.cc-kp-chapter-title{font-size:14px;font-weight:700;color:var(--primary);padding:10px 0 8px;border-bottom:1px solid var(--border);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.cc-kp-chapter-title .cc-book-label{font-size:11px;font-weight:600;color:var(--blue);background:rgba(59,130,246,.08);padding:2px 8px;border-radius:4px}
.cc-kp-item{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:.15s;border:1px solid transparent}
.cc-kp-item:hover{background:#f8fafc;border-color:var(--border)}
.cc-kp-num{width:24px;height:24px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text2);flex-shrink:0;margin-top:2px}
.cc-kp-info{flex:1;min-width:0}
.cc-kp-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.4}
.cc-kp-excerpt{font-size:12px;color:var(--text3);line-height:1.5;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-kp-action{flex-shrink:0;opacity:0;transition:.15s}
.cc-kp-item:hover .cc-kp-action{opacity:1}
.cc-kp-action-btn{padding:4px 12px;border-radius:5px;font-size:11px;font-weight:600;color:var(--blue);background:rgba(59,130,246,.08);border:none;cursor:pointer;transition:.15s;white-space:nowrap}
.cc-kp-action-btn:hover{background:rgba(59,130,246,.15)}
.cc-detail-search{padding:12px 0;margin-bottom:8px}
.cc-detail-search input{width:100%;padding:9px 14px 9px 36px;border:1px solid var(--border);border-radius:8px;font-size:13px;outline:none;transition:.2s;background:#f8fafc}
.cc-detail-search input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.cc-detail-search{position:relative}
.cc-detail-search .cc-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3)}
/* ========== Exam Center ========== */
.exam-page-header { margin-bottom: 24px; }
.exam-page-header h2 { font-size: 22px; font-weight: 700; color: var(--text1); margin-bottom: 6px; }
.exam-page-header p { font-size: 14px; color: var(--text3); }
.exam-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.exam-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.exam-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px; transition: .2s; }
.exam-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.exam-level { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; margin-bottom: 12px; }
.exam-level.basic { background: #f0fdf4; color: #065f46; }
.exam-level.intermediate { background: #fef3c7; color: #92400e; }
.exam-level.advanced { background: #fef2f2; color: #991b1b; }
.exam-card-title { font-size: 16px; font-weight: 700; color: var(--text1); margin-bottom: 6px; }
.exam-card-desc { font-size: 12px; color: var(--text3); line-height: 1.5; margin-bottom: 12px; }
.exam-card-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text3); margin-bottom: 16px; }
.exam-card-meta span { display: flex; align-items: center; gap: 4px; }
.exam-start-btn { width: 100%; padding: 10px; border: none; border-radius: 8px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; }
.exam-start-btn:hover { background: #2563eb; }
.exam-start-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Exam overlay */
.exam-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 9998; display: none; align-items: center; justify-content: center; }
.exam-overlay.show { display: flex; }
.exam-container { background: #fff; border-radius: 16px; width: 720px; max-width: 95vw; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.exam-top { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.exam-top-title { font-size: 16px; font-weight: 600; }
.exam-timer { font-size: 14px; font-weight: 600; color: #ef4444; background: #fef2f2; padding: 4px 12px; border-radius: 6px; }
.exam-progress-bar { height: 4px; background: #f0f0f0; }
.exam-progress-fill { height: 100%; background: var(--primary); transition: width .3s; }
.exam-question-map { padding: 12px 24px; display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--border); max-height: 80px; overflow-y: auto; }
.exam-question-map .q-dot { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--text2); }
.exam-question-map .q-dot.current { border-color: var(--primary); background: #eff6ff; color: var(--primary); font-weight: 600; }
.exam-question-map .q-dot.answered { background: var(--primary); color: #fff; border-color: var(--primary); }
.exam-body { padding: 24px; overflow-y: auto; flex: 1; }
.exam-nav { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.exam-nav-btn { padding: 8px 20px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; }
.exam-nav-btn:hover { background: #f5f5f5; }
.exam-nav-btn.submit { background: var(--primary); color: #fff; border-color: var(--primary); }
.exam-nav-btn.submit:hover { background: #2563eb; }