*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif;}

body{
    background: linear-gradient(135deg,#cfd9df,#e2ebf0);
    min-height:100vh;
    overflow-x:hidden;
    padding-bottom:80px;
}

/* Background blobs */
body::before, body::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter: blur(70px);
    z-index:0;
}
body::before{width:280px;height:280px;background:#a1c4fd;top:5%;left:5%;}
body::after{width:280px;height:280px;background:#c2e9fb;bottom:5%;right:5%;}

/* Container */
.container{padding:20px;position:relative;z-index:1;}

/* Glass Card */
.card{
    backdrop-filter: blur(25px);
    background: rgba(255,255,255,0.25);
    border-radius:20px;
    padding:18px;
    border:1px solid rgba(255,255,255,0.3);
    box-shadow:0 8px 32px rgba(0,0,0,0.1);
    margin-bottom:15px;
}

/* Child Scroll */
.child-scroll{
    display:flex;
    gap:10px;
    overflow-x:auto;
    margin-bottom:15px;
}

.child-card{
    min-width:120px;
    padding:10px;
    border-radius:15px;
    backdrop-filter: blur(20px);
    background: rgba(255,255,255,0.3);
    text-align:center;
    font-size:13px;
    cursor:pointer;
    border:1px solid rgba(255,255,255,0.3);
}

.child-card span{
    display:block;
    font-size:11px;
    color:#555;
}

.child-card.active{
    background:#ffffff80;
    font-weight:600;
}

/* Greeting */
.greeting h2{font-size:18px;color:#333;}
.time{font-size:13px;margin-top:5px;color:#555;}
.child{font-size:13px;color:#666;margin-top:5px;}

/* Grid */
.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.small-card{
    text-align:center;
    padding:20px 10px;
}

.small-card i{
    font-size:22px;
    margin-bottom:6px;
    color:#333;
}

.small-card .value{
    font-weight:bold;
    font-size:16px;
}

.small-card .label{
    font-size:13px;
    color:#555;
}


/* ID Card */
.id-card{
    width:100%;
    backdrop-filter: blur(25px);
    background: rgba(255,255,255,0.25);
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.3);
    box-shadow:0 8px 32px rgba(0,0,0,0.1);
    overflow:hidden;
    margin-bottom: 20px;
}

/* Header */
.id-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 15px;
    background: linear-gradient(90deg,#007bff,#ffd43b);
    color:#fff;
}

.id-header img{
    width:35px;
}

.school-info h3{
    font-size:14px;
    margin:0;
}

.school-info span{
    font-size:11px;
}

/* Body */
.id-body{
    display:flex;
    align-items:center;
    padding:15px;
    gap:15px;
}

/* Left (Image) */
.left img{
    width:70px;
    height:70px;
    border-radius:12px;
    object-fit:cover;
    border:3px solid #ffd43b;
}

/* Right */
.right h2{
    font-size:16px;
    margin-bottom:5px;
    color:#007bff;
}

.right p{
    font-size:13px;
    margin:3px 0;
}

.right span{
    font-weight:600;
}

/* Mobile */
@media(max-width:480px){
    .id-body{
        flex-direction:row;
    }
}