/* ===== HARD RESET ===== */
html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

/* ===== BACKGROUND (ONLY PLACE IT HERE) ===== */
body{
    font-family:"Poppins",sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;

    background:url("licencebgm.png")
               no-repeat center center fixed;
    background-size:cover;
}

/* ===== TABLE LAYOUT ===== */
.table-row{
    display:flex;
    gap:30px;
    align-items:flex-start;
    justify-content:space-between;
}
.table-box{
    flex:1;
    min-width:0;
}
@media(max-width:900px){
    .table-row{
        flex-direction:column;
    }
}

/* ===== STATUS COLORS ===== */
.pred-good{color:#2ecc71}
.pred-warn{color:#f1c40f}
.pred-bad{color:#ff4d4d}

/* ===== GLASS CARD ===== */
.wrapper{
    width:380px;
    padding:30px;
    border-radius:16px;
    text-align:center;
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.25);
    box-shadow:0 0 35px rgba(0,180,255,0.45);
}

/* ===== HEADING ===== */
h2{
    font-family:"Orbitron",sans-serif;
    letter-spacing:1px;
    margin-bottom:25px;
    text-shadow:0 0 10px rgba(0,180,255,0.85);
}

/* ===== INPUT ===== */
.input-field{
    position:relative;
    margin:24px 0;
    border-bottom:2px solid rgba(255,255,255,0.4);
}

.input-field input{
    width:100%;
    height:42px;
    background:transparent;
    border:none;
    outline:none;
    font-size:16px;
    color:#fff;
}

.input-field label{
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    color:rgba(255,255,255,0.7);
    pointer-events:none;
    transition:.2s ease;
}

.input-field input:focus~label,
.input-field input:valid~label{
    top:8px;
    font-size:12px;
    color:#9bdcff;
}

/* ===== BUTTON ===== */
button{
    width:100%;
    padding:12px;
    margin-top:12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.35);
    background:rgba(255,255,255,0.9);
    color:#000;
    font-weight:600;
    cursor:pointer;
    transition:.25s ease;
}

button:hover{
    background:rgba(255,255,255,0.15);
    color:#fff;
    box-shadow:0 0 20px rgba(0,180,255,0.75);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
    *{transition:none!important}
}