:root{
    --primary:#0b3d2c;
    --accent:#16a085;
}

*{box-sizing:border-box;}
body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:linear-gradient(135deg,#e8f5f1,#ffffff);
}

/* HEADER */
.header{
    background:var(--primary);
    color:white;
    padding:15px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

/* LOGO */
.logo-box{
    position:absolute;
    left:20px;
    border:3px solid white;
    padding:6px;
    border-radius:10px;
    animation:floatLogo 4s infinite ease-in-out;
}
.logo-box img{
    width:65px;
}
@keyframes floatLogo{
    0%{transform:translateY(0)}
    50%{transform:translateY(-5px)}
    100%{transform:translateY(0)}
}

/* TITLE */
.title{text-align:center;}
.title h1{margin:0;font-weight:600;}
.title p{margin:4px 0;opacity:.9;}

/* MENU BUTTON */
.menu-btn{position:absolute;right:20px;font-size:24px;cursor:pointer;}

/* SIDE MENU */
.side-menu{
    position:fixed;
    right:-260px;
    top:0;
    width:250px;
    height:100%;
    background:#06281e;
    color:white;
    padding:20px;
    transition:0.4s;
}
.side-menu.open{right:0;}
.side-menu a{display:block;color:white;text-decoration:none;margin:15px 0;}

/* CARD */
.card{
    background:white;
    max-width:600px;
    margin:40px auto;
    padding:30px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* FORM INPUT */
input{width:100%;padding:12px;margin:8px 0;border-radius:8px;border:1px solid #ccc;}

/* BUTTON */
button{
    padding:12px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
}
.btn{
    background:var(--primary);
    color:white;
    width:100%;
    margin-top:10px;
}
.btn:hover{background:var(--accent);}
.logout-btn{background:#888;margin-top:10px;}
.hidden{display:none;}

/* RESULT SHEET */
.result-sheet{
    margin-top:20px;
    padding:30px;
    border:1px solid #ccc;
    border-radius:10px;
    background:white;
}
.center{text-align:center;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.btn-group{display:flex;gap:10px;margin-top:20px;}


/* Footer */
footer{
    text-align:center;
    padding:15px;
    background:var(--primary);
    color:white;
}


/* PRINT A4 */
@media print{
    body{background:white;}
    .card{box-shadow:none;margin:0;}
    .result-sheet{width:210mm;min-height:297mm;padding:30mm;}
    button{display:none;}
}