.tls-card{max-width:900px;margin:auto;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.05);}
input,button{padding:10px;margin:5px 0;border-radius:6px;}
button{background:#0073aa;color:#fff;border:none;cursor:pointer;}
.tls-user-card{border:1px solid #eee;padding:10px;margin-bottom:10px;border-radius:6px;}
.generate-code{background:#28a745;}
@media(max-width:768px){.tls-card{padding:15px;}}

/* ===== TLS Referral Form ===== */

.tls-ref-form{
max-width:600px;
margin:50px auto;
background:#ffffff;
padding:35px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
font-family:inherit;
}

.tls-ref-form h2{
text-align:center;
margin-bottom:25px;
font-size:26px;
font-weight:600;
color:#222;
}

#tls-ref-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}

#tls-ref-form input{
width:100%;
padding:12px 14px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
transition:all .2s ease;
background:#fafafa;
}

#tls-ref-form input:focus{
border-color:#0073ff;
outline:none;
background:#fff;
box-shadow:0 0 0 2px rgba(0,115,255,0.1);
}

/* Full width fields */
#tls-ref-form input[name="name"],
#tls-ref-form input[name="email"],
#tls-ref-form input[name="earn"]{
grid-column:1 / -1;
}

/* Submit Button */
#tls-ref-form button{
grid-column:1 / -1;
padding:14px;
background:#0073ff;
color:#fff;
border:none;
border-radius:6px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:all .2s ease;
}

#tls-ref-form button:hover{
background:#005ed1;
transform:translateY(-1px);
}

/* Success Message */
#tls-ref-msg{
margin-top:15px;
text-align:center;
font-weight:600;
color:green;
}

/* Mobile Responsive */
@media(max-width:600px){

#tls-ref-form{
grid-template-columns:1fr;
}

}

/* Training Buttons Layout */

.tls-training-grid{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:30px;
}

/* Unlocked Training */

.tls-training-btn{
padding:12px 24px;
background:#007bff;
color:#ffffff !important;
border-radius:6px;
text-decoration:none;
font-weight:600;
display:inline-block;
}

/* Active Training */

.tls-training-btn.active{
background:#004aad;
color:#ffffff !important;
}

/* Locked Training */

.tls-training-btn.locked{
background:#e0e0e0;
color:#666 !important;
cursor:not-allowed;
}

/* Hover */

.tls-training-btn:hover{
background:#0056b3;
color:#fff !important;
}
.complete-btn{
margin-top:20px;
padding:10px 25px;
background:#28a745;
color:#fff;
border:none;
border-radius:5px;
cursor:pointer;
}
.tls-training-videos{
margin-top:40px;
clear:both;
}
.tls-training-grid a{
color:#fff !important;
}

.tls-video-grid{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.tls-video-box{
position:relative;
}

.video-done{
position:absolute;
top:8px;
right:8px;
background:#28a745;
color:#fff;
font-size:16px;
width:26px;
height:26px;
border-radius:50%;
display:none;   /* default hidden */
align-items:center;
justify-content:center;
}

.video-done.show{
display:flex;
}