:root{--primary:#4D96FF;--primary-dark:#3d76cc;--secondary:#6BCB77;--secondary-dark:#56a260;--dark:#334257;--light:#F9F9F9;--gray:#EEEEEE;--text:#484848;--border-radius:12px;--shadow:0 4px 15px rgba(0,0,0,0.08);--transition:all 0.3s ease}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',sans-serif;background-color:var(--light);color:var(--text);line-height:1.6;padding:20px;max-width:800px;margin:0 auto}
.container{background-color:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow);padding:30px;margin-top:20px}
h1{display:none}
.form-group{margin-bottom:20px}
label{font-weight:500;display:block;margin-bottom:8px;color:var(--dark)}
.input-group{display:flex;gap:10px;align-items:center}
input[type="text"]{
    width:100%;
    padding:12px 16px;
    border:2px solid var(--gray);
    border-radius:var(--border-radius);
    font-size:16px;
    transition:var(--transition);
    font-family:'Poppins',sans-serif;
    height:48px; /* Menyamakan tinggi dengan tombol */
    box-sizing:border-box;
}
input[type="text"]:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(77,150,255,0.2);
}
.btn{
    background-color:var(--secondary);
    color:#fff;
    border:none;
    border-radius:var(--border-radius);
    padding:12px 24px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    text-align:center;
    height:48px; /* Menyamakan tinggi dengan input */
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:80px;
    box-sizing:border-box;
}
.btn:hover:not(:disabled){
    background-color:var(--secondary-dark);
    transform:translateY(-2px);
}
.btn:disabled{
    background-color:var(--secondary);
    cursor:not-allowed;
    opacity:0.7;
}
#result{
    margin-top:20px;
    background-color:#fff;
    border:1px solid var(--gray);
    border-radius:var(--border-radius);
    padding:20px;
    white-space:pre-wrap;
    font-family:'Poppins',monospace;
    font-size:14px;
    line-height:1.6;
    max-height:500px;
    overflow-y:auto;
    display:none;
}
.loading{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}
.loading-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:1000;
}
.loading-spinner{
    width:40px;
    height:40px;
    border:4px solid rgba(77,150,255,0.2);
    border-radius:50%;
    border-top-color:var(--primary);
    animation:spin 1s ease-in-out infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.footer{
    text-align:center;
    margin-top:30px;
    color:#888;
    font-size:14px;
}

/* Updated responsive styles */
@media (max-width:600px){
    .container{padding:20px}
    .input-group{
        display:flex;
        flex-direction:row;
        gap:10px;
        align-items:center;
    }
    input[type="text"]{
        flex:1;
        height:48px; /* Konsisten di mobile */
    }
    .btn{
        width:auto;
        white-space:nowrap;
        height:48px; /* Konsisten di mobile */
    }
    .label-content{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap:8px;
    }
    .label-content img{
        height:18px;
        width:auto;
    }
    #result{
        font-size:13px;
        padding:15px;
    }
}