/* ===================================
   SMART TIMETABLE - GCC STYLE UI
=================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(135deg,#003973,#005AA7,#00B4DB);

    min-height:100vh;

    overflow-x:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}

.bg{

position:fixed;

width:100%;

height:100%;

top:0;

left:0;

background:

radial-gradient(circle at top right,
rgba(255,255,255,.25),
transparent 40%),

radial-gradient(circle at bottom left,
rgba(255,255,255,.18),
transparent 35%);

z-index:-1;

}

.container{

width:100%;

max-width:900px;

}

.card{

display:none;

background:rgba(255,255,255,.12);

backdrop-filter:blur(18px);

border-radius:25px;

padding:40px;

box-shadow:0 20px 50px rgba(0,0,0,.25);

color:white;

animation:fade .5s;

}

.card.active{

display:block;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.logo{

font-size:70px;

text-align:center;

margin-bottom:20px;

}

h1,h2{

text-align:center;

margin-bottom:15px;

font-weight:700;

}

.subtitle{

text-align:center;

margin-bottom:30px;

opacity:.85;

}

.form{

display:grid;

gap:18px;

}

input{

padding:16px;

border:none;

border-radius:14px;

font-size:16px;

outline:none;

background:white;

color:#333;

}

button{

border:none;

cursor:pointer;

padding:16px;

border-radius:14px;

font-size:17px;

font-weight:600;

transition:.3s;

background:linear-gradient(45deg,#FFD54F,#FFC107);

color:#222;

}

button:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

.cameraBox{

margin-top:20px;

display:flex;

justify-content:center;

align-items:center;

}

video{

width:100%;

max-width:600px;

border-radius:20px;

border:5px solid rgba(255,255,255,.25);

background:black;

}

#preview{

width:100%;

max-width:600px;

border-radius:20px;

border:5px solid white;

}

.cameraButtons{

display:flex;

gap:15px;

justify-content:center;

margin-top:25px;

flex-wrap:wrap;

}

.loader{

margin:auto;

width:90px;

height:90px;

border-radius:50%;

border:8px solid rgba(255,255,255,.25);

border-top:8px solid gold;

animation:spin 1s linear infinite;

margin-bottom:30px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

#timetable{

background:white;

padding:25px;

border-radius:20px;

color:#222;

position:relative;

overflow:auto;

}

.photoArea{

position:absolute;

top:20px;

right:20px;

width:150px;

height:180px;

border:4px dashed #0b63ce;

border-radius:15px;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

background:#eef5ff;

}

.photoArea img{

width:100%;

height:100%;

object-fit:cover;

}

table{

width:100%;

border-collapse:collapse;

margin-top:220px;

}

th{

background:#0b63ce;

color:white;

padding:12px;

}

td{

border:1px solid #ccc;

height:60px;

text-align:center;

}

.downloadButtons{

display:flex;

gap:15px;

justify-content:center;

margin-top:30px;

flex-wrap:wrap;

}

.downloadButtons button{

min-width:170px;

}

@media(max-width:768px){

.card{

padding:25px;

}

.photoArea{

position:relative;

margin:auto;

top:0;

right:0;

margin-bottom:20px;

}

table{

margin-top:20px;

font-size:13px;

}

button{

width:100%;

}

.cameraButtons{

flex-direction:column;

}

.downloadButtons{

flex-direction:column;

}

}