.roadmap-container{margin-top:8px}.roadmap-item{background:var(--card);border-radius:var(--radius);padding:14px;margin-bottom:15px;box-shadow:var(--shadow);border:1px solid var(--border);cursor:pointer;transition:all .3s;position:relative;overflow:hidden}.roadmap-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}.roadmap-item.completed{border-left:4px solid var(--success)}.roadmap-item.pending{border-left:4px solid var(--warning)}.course-progress{margin-top:12px;padding:12px;background:rgba(255,255,255,.5);border-radius:8px}.progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.progress-label{font-size:12px;color:var(--muted);font-weight:500}.progress-value{font-size:14px;color:var(--text);font-weight:600}.progress-bar{height:8px;background:var(--border-soft);border-radius:4px;overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,var(--success) 0,var(--success-2) 100%);border-radius:4px;transition:width .5s ease}.roadmap-item.pending .progress-fill{background:linear-gradient(90deg,var(--warning) 0,var(--warning-2) 100%)}.progress-percentage{text-align:right;font-size:12px;color:var(--muted);margin-top:4px;font-weight:500}.roadmap-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.roadmap-title{font-size:16px;font-weight:600;color:var(--text);flex:1}.roadmap-status{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500}.status-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px}.status-icon.completed{background:var(--success-bg);color:var(--success)}.status-icon.pending{background:rgba(245,158,11,.72);color:#fff}.roadmap-meta{font-size:13px;color:var(--muted);margin-top:8px}.roadmap-meta span{margin-right:15px}.course-detail{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:200;overflow-y:auto;animation:fadeInUp .25s ease both}.detail-header{background:linear-gradient(135deg,var(--brand) 0,var(--brand-2) 100%);color:#fff;padding:20px;display:flex;align-items:center;justify-content:space-between}.detail-header h2{font-size:18px;font-weight:600}.detail-header .close-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:18px}.detail-content{padding:20px}.detail-item{background:var(--surface);border-radius:8px;padding:15px;margin-bottom:10px}.detail-label{font-size:13px;color:var(--muted);margin-bottom:5px}.detail-value{font-size:15px;color:var(--text);font-weight:500}.empty-roadmap{text-align:center;padding:60px 20px;color:#999}.empty-roadmap .empty-icon{font-size:64px;margin-bottom:20px}.empty-roadmap p{font-size:15px}