/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; position: relative; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary) !important; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.15); transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; z-index: 1; }
.btn:before { content: ''; position: absolute; inset: 0; left: -120%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); transition: left .3s ease; z-index: 0; }
.btn:hover:before { left: 100%; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.btn-primary { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: #fff !important; border-color: transparent; }
.btn-primary:hover { color: #fff !important; }
.btn-secondary { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); color: var(--text-primary) !important; }
.btn-secondary:hover { color: var(--primary-color) !important; }
.btn-outline { background: transparent; color: var(--primary-color) !important; border-color: var(--primary-color); }
.btn-outline:hover { background: var(--primary-color); color: #fff !important; }

/* Cards */
.course-card, .option-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.25rem; position: relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.12); cursor: pointer; overflow: hidden; }
/* legacy top accent bar like before */
.course-card::before, .option-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.course-card:hover, .option-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.20); border-color: var(--primary-light); }
.course-card:hover::before, .option-card:hover::before { transform: scaleX(1); }
.course-card:hover .course-icon, .option-card:hover .option-icon { transform: translateY(-8px) scale(1.1); box-shadow: 0 16px 48px rgba(99, 102, 241, 0.4); }
.option-card h3 { font-size: 1.2rem; margin: .5rem 0; }
.option-card p { color: var(--text-secondary); margin: 0 0 .5rem 0; }
.start-btn { background: var(--primary-color); color: #fff; border: none; padding: .6rem 1rem; border-radius: var(--radius-md); cursor: pointer; }
.start-btn:hover { background: var(--primary-dark); }