:root {
--blue: #1A4FD6;
--blue-light: #EEF3FF;
--blue-mid: #3B6EF5;
--ink: #0F1729;
--ink-mid: #334060;
--muted: #7A8BAA;
--border: #E3E9F4;
--surface: #F7F9FC;
--white: #ffffff;
--gold: #F59E0B;
--success: #059669;
}

.video-section { background: var(--light); }
.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.video-card {
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.07);
transition: transform 0.2s, box-shadow 0.2s;
}
.video-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
.video-thumb {
position: relative;
height: 180px;
background: linear-gradient(135deg, var(--navy), var(--blue));
display: flex; align-items: center; justify-content: center;
cursor: pointer;
overflow: hidden;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; position: absolute; }
.play-btn {
width: 54px; height: 54px;
background: rgba(255,255,255,0.95);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
position: relative; z-index: 2;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
transition: transform 0.2s;
}
.video-thumb:hover .play-btn { transform: scale(1.1); }
.play-btn::after { content: '▶'; color: var(--accent); font-size: 18px; margin-left: 3px; }
.video-duration {
position: absolute; bottom: 10px; right: 12px;
background: rgba(0,0,0,0.7); color: #fff;
font-size: 11px; padding: 2px 7px; border-radius: 4px; z-index: 2;
}
.video-info { padding: 18px; }
.stars { color: var(--gold); font-size: 13px; margin-bottom: 8px; }
.video-info p { font-size: 13px; color: #475569; line-height: 1.6; margin-bottom: 14px; }
.student-meta { display: flex; align-items: center; gap: 10px; }
.avatar {
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #7c3aed) !important;
display: flex; align-items: center; justify-content: center;
color: white; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
/*.avatar.orange { background: linear-gradient(135deg, var(--orange), #dc2626) !important; }
.avatar.green { background: linear-gradient(135deg, #059669, #0891b2) !important; }
.avatar.purple { background: linear-gradient(135deg, #7c3aed, #db2777) !important; }*/
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.student-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.student-role { font-size: 11px; color: #64748b; }
.badge {
margin-left: auto;
background: #eff6ff;
color: var(--accent);
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 20px;
white-space: nowrap;
}
.badge.hired { background: #f0fdf4; color: #16a34a; }

/*  */
.video-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.9);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.video-modal.active{
display:flex;
}

.modal-content{
width:80%;
max-width:900px;
position:relative;
}

.close-btn{
position:absolute;
top:-40px;
right:0;
color:#fff;
font-size:40px;
cursor:pointer;
}

.play-btn{
width:50px;
height:50px;
background:rgba(255,255,255,0.95);
border-radius:50%;
position:relative;
z-index:2;
}

.play-btn::before{
content:'';
position:absolute;
top:50%;
left:55%;
transform:translate(-50%,-50%);
/*border-left:20px solid #000;*/
border-top:12px solid transparent;
border-bottom:12px solid transparent;
}