body{
font-family:'Inter',sans-serif;
margin:0;
background:linear-gradient(180deg,#eef2f7,#f7f8fb);
color:#111;
}

.header{
padding:20px 60px;
border-bottom:1px solid #e5e7eb;
background:white;
}

.header-left{
display:flex;
align-items:center;
gap:14px;
}

.logo-icon{
width:36px;
height:36px;
background:#2563eb;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:18px;
}

.header h1{
font-size:18px;
margin:0;
font-weight:600;
}

.header p{
font-size:13px;
margin:0;
color:#6b7280;
}

.page{
display:flex;
justify-content:center;
padding:60px 20px;
}

.form-card{
width:520px;
background:white;
padding:32px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.form-card h2{
font-size:18px;
margin-bottom:20px;
}

label{
display:block;
font-size:13px;
font-weight:500;
margin-top:16px;
margin-bottom:6px;
}

input,select,textarea{
width:100%;
padding:11px 12px;
border:1px solid #e5e7eb;
border-radius:8px;
font-size:14px;
}

textarea{
height:70px;
resize:none;
}

.grid3{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:12px;
}

.photo-row{
display:flex;
align-items:center;
gap:16px;
margin-bottom:10px;
}

.photo-box{
width:110px;
height:130px;
border:2px dashed #d1d5db;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
background:#f9fafb;
overflow:hidden;
}
.photo-placeholder{
display:flex;
align-items:center;
justify-content:center;
}
.photo-box img{
width:100%;
height:100%;
object-fit:cover;
}


.upload-btn{
display:flex;
align-items:center;
gap:8px;
background:linear-gradient(90deg,#0f172a,#111827);
color:white;
padding:10px 18px;
border-radius:10px;
font-size:14px;
cursor:pointer;
}

.submit-btn{
margin-top:20px;
width:100%;
padding:13px;
border:none;
border-radius:10px;
background:linear-gradient(90deg,#2563eb,#3b82f6);
color:white;
font-size:14px;
font-weight:500;
cursor:pointer;
}

footer{
text-align:center;
font-size:12px;
color:#6b7280;
margin-top:30px;
margin-bottom:20px;
}


.success-card{
max-width:420px;
margin:auto;
background:white;
padding:35px;
border-radius:14px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
text-align:center;
}

.success-title{
color:#16a34a;
margin-bottom:10px;
}

.success-message{
font-size:14px;
color:#555;
margin-bottom:25px;
}

.student-summary{
text-align:left;
margin-bottom:25px;
}

.summary-row{
display:flex;
justify-content:space-between;
margin-bottom:8px;
font-size:14px;
}

.submit-again-btn{
display:inline-block;
background:#2563eb;
color:white;
padding:12px 18px;
border-radius:8px;
text-decoration:none;
font-size:14px;
}

.submit-again-btn:hover{
background:#1e4fd1;
}

.page{
display:flex;
justify-content:center;
padding:50px;
}

.preview-container{
background:white;
padding:30px;
border-radius:12px;
width:420px;
box-shadow:0 8px 30px rgba(0,0,0,0.08);
}

.preview-container h2{
margin-bottom:20px;
font-size:18px;
}

.id-card{
width:260px;
margin:auto;
background:white;
border-radius:14px;
box-shadow:0 8px 20px rgba(0,0,0,0.12);
overflow:hidden;
}

.card-header{
background:#0c3b6d;
color:white;
padding:10px;
display:flex;
align-items:center;
gap:10px;
border-bottom:4px solid #4a90e2;
}

.school-logo{
width:40px;
}

.school-text h3{
margin:0;
font-size:13px;
}

.school-text p{
margin:0;
font-size:10px;
opacity:0.8;
}

.photo-area{
text-align:center;
padding:15px 10px;
}

.student-photo{
width:70px;
height:80px;
object-fit:cover;
border:2px solid #ddd;
}

.student-name{
color:#c60000;
margin:8px 0 2px;
font-size:14px;
}

.student-role{
font-size:11px;
color:#777;
}

.details{
font-size:11px;
padding:0 18px;
}

.details .row{
display:flex;
gap:4px;
margin-top:4px;
color:#555;
}
.details .row span:first-child{
min-width:110px;
}
.value{
margin-bottom:5px;

}

.card-footer{
display:flex;
justify-content:space-between;
align-items:flex-end;
padding:10px 15px;
font-size:9px;
color:#777;
}

/* LEFT SIDE */
.academicyear p{
margin:0;
line-height:1.2;
}

.principal{
display:flex;
flex-direction:column;
align-items:flex-end;
width:100px;
}

.signature-img{
width:80px;        /* reduced width */
height:25px;       /* reduced height */
object-fit:contain;
margin-bottom:2px;
}

/* LINE */
.principal .line{
width:100%;
border-bottom:2px solid #4a90e2;
margin-bottom:3px;
}

/* TEXT */
.principal span{
white-space:nowrap;
font-size:9px;
}


.buttons{
display:flex;
justify-content:center;
gap:10px;
margin-top:20px;
}

.btn-light{
background:#f3f4f6;
padding:10px 15px;
border-radius:8px;
text-decoration:none;
color:#333;
font-size:13px;
}

.btn-dark{
background:#020617;
color:white;
border:none;
padding:10px 15px;
border-radius:8px;
font-size:13px;
cursor:pointer;
}

.note-box{
background:#eef4ff;
border:1px solid #c7d7ff;
padding:12px;
margin-top:20px;
border-radius:8px;
font-size:12px;
color:#4a5b73;
}

.actions{
display:flex;
gap:10px;
justify-content:center;
margin-top:20px;
}

.download-btn{
background:#2563eb;
color:white;
padding:12px 18px;
border-radius:8px;
text-decoration:none;
font-size:14px;
}

.download-btn:hover{
background:#1d4ed8;
}