/* ===========================
   GENERAL
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#edf1f5;
}

.container{
    width:760px;
    max-width:95%;
    margin:40px auto;
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
}

/* ===========================
   HEADER
=========================== */

.header{
    background:#158545;
    color:white;
    text-align:center;
    padding:25px;
}

.header img{
    width:70px;
    margin-bottom:10px;
}

.header h1{
    font-size:28px;
}

.header p{
    margin-top:5px;
    font-size:15px;
}

/* ===========================
   CHECK ICON
=========================== */

.check{
    text-align:center;
    font-size:80px;
    color:#18a64d;
    margin-top:35px;
}

.success{
    text-align:center;
    color:#158545;
    font-size:34px;
    font-weight:bold;
    margin-bottom:25px;
}

/* ===========================
   TABLE
=========================== */

table{
    width:90%;
    margin:auto;
    border-collapse:collapse;
}

td{
    border:1px solid #e6e6e6;
    padding:14px;
}

td:first-child{
    width:35%;
    background:#f7f7f7;
    font-weight:bold;
}

/* ===========================
   FOOTER
=========================== */

.footer{

    text-align:center;

    color:#666;

    padding:35px;

    font-size:14px;

}

.reference{

    font-weight:bold;

    margin-top:15px;

}

/* ===========================
   NOT FOUND
=========================== */

.not-found{

    width:700px;

    max-width:95%;

    margin:100px auto;

    background:white;

    padding:50px;

    border-radius:10px;

    text-align:center;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.not-found h1{

    color:red;

    margin-bottom:20px;

}

.not-found p{

    font-size:18px;

}

/* ===========================
   ADMIN PAGE
=========================== */

.admin{

    width:800px;

    max-width:95%;

    margin:40px auto;

    background:white;

    padding:30px;

    border-radius:8px;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

}

.admin h2{

    text-align:center;

    margin-bottom:30px;

    color:#158545;

}

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:bold;

}

.form-group input{

    width:100%;

    padding:12px;

    border:1px solid #ccc;

    border-radius:5px;

    font-size:15px;

}

button{

    background:#158545;

    color:white;

    border:none;

    padding:13px 20px;

    border-radius:5px;

    cursor:pointer;

    font-size:16px;

}

button:hover{

    background:#106c38;

}

.output{

    margin-top:30px;

    padding:20px;

    background:#f7f7f7;

    border-radius:6px;

    word-wrap:break-word;

}

select{

width:100%;

padding:12px;

border:1px solid #ccc;

border-radius:5px;

font-size:15px;

background:white;

}

input[readonly]{

background:#f2f2f2;

font-weight:bold;

}

/* =======================================
   ADMIN PAGE
======================================= */

.admin{

    max-width:700px;

    margin:40px auto;

    background:#ffffff;

    padding:30px;

    border-radius:10px;

    box-shadow:0 0 15px rgba(0,0,0,.1);

}

.subtitle{

    text-align:center;

    color:#666;

    margin-bottom:25px;

}

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;

    margin-bottom:6px;

    font-weight:bold;

}

.form-group input,

.form-group select{

    width:100%;

    padding:12px;

    border:1px solid #ccc;

    border-radius:5px;

    font-size:15px;

    box-sizing:border-box;

}

button{

    background:#0a7a33;

    color:white;

    border:none;

    padding:12px 18px;

    border-radius:5px;

    cursor:pointer;

    font-size:15px;

}

button:hover{

    background:#075d27;

}

hr{

    margin:30px 0;

}

.button-row{

    display:flex;

    gap:10px;

    margin-top:15px;

    flex-wrap:wrap;

}

#generatedUrl{

    width:100%;

    padding:12px;

    margin-top:10px;

    margin-bottom:10px;

    box-sizing:border-box;

    background:#f5f5f5;

}

@media (max-width:600px){

    .container{
        width:85%;
        margin:8px auto;
        border-radius:4px;
    }

    .header{
        padding:16px;
    }

    .header img{
        width:45px;
        margin-bottom:6px;
    }

    .header h1{
        font-size:16px;
    }

    .header p{
        font-size:10px;
    }

    .check{
        font-size:45px;
        margin-top:15px;
    }

    .success{
        font-size:18px;
        margin-bottom:15px;
    }

    table{
        width:98%;
    }

    td{
        padding:6px;
        font-size:11px;
    }

    td:first-child{
        width:42%;
    }

    .footer{
        font-size:10px;
        padding:18px;
    }

    .reference{
        font-size:11px;
    }

    #originalReport{
        font-size:11px;
        padding:8px 14px;
    }

}