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

body{
    min-height:100vh;
    padding:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:
    radial-gradient(circle at top left,#00e5ff22,transparent 30%),
    radial-gradient(circle at bottom right,#8b5cf622,transparent 30%),
    #050816;
    color:#fff;
}

.container{
    width:100%;
    max-width:1100px;
}

.app{
    background:rgba(15,23,42,.95);
    border:1px solid rgba(255,255,255,.08);
    border-radius:32px;
    padding:35px;
    box-shadow:0 25px 60px rgba(0,0,0,.5);
}

.header{
    text-align:center;
}

.logo{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    background:linear-gradient(135deg,#00e5ff,#7c3aed);
    box-shadow:
    0 0 25px rgba(0,229,255,.4),
    0 0 50px rgba(124,58,237,.3);
}

h1{
    margin-top:20px;
    font-size:3rem;
}

.subtitle{
    margin-top:10px;
    color:#94a3b8;
    font-size:1.05rem;
}

.upload-wrapper{
    margin-top:35px;
}

.upload-box{
    height:170px;
    border:2px dashed rgba(0,229,255,.45);
    border-radius:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    cursor:pointer;
    background:rgba(255,255,255,.03);
    transition:.3s;
}

.upload-box:hover{
    border-color:#00e5ff;
    box-shadow:0 0 30px rgba(0,229,255,.2);
    transform:translateY(-2px);
}

.upload-icon{
    font-size:48px;
    margin-bottom:12px;
}

.upload-title{
    font-size:1.4rem;
    font-weight:700;
}

.upload-subtitle{
    margin-top:8px;
    color:#94a3b8;
}

input[type=file]{
    display:none;
}

.file-name{
    margin-top:15px;
    text-align:center;
    color:#22c55e;
    min-height:24px;
}

.button-area{
    margin-top:28px;
}

.validate-btn{
    width:100%;
    border:none;
    padding:18px;
    border-radius:20px;
    font-size:1.15rem;
    font-weight:700;
    color:white;
    cursor:pointer;
    background:linear-gradient(135deg,#00d4ff,#7c3aed);
    transition:.3s;
}

.validate-btn:hover{
    transform:translateY(-3px);
    box-shadow:
    0 15px 35px rgba(0,212,255,.25);
}

.results{
    display:none;
    margin-top:35px;
}

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:18px;
}

.stat-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:22px;
    text-align:center;
}

.stat-card h2{
    color:#00e5ff;
    font-size:2rem;
}

.stat-card p{
    margin-top:8px;
    color:#94a3b8;
}

.card{
    margin-top:18px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:22px;
}

.card h3{
    color:#00e5ff;
    margin-bottom:12px;
}

.valid{
    color:#22c55e;
    font-weight:700;
}

.invalid{
    color:#ef4444;
    font-weight:700;
}

.error-list{
    max-height:260px;
    overflow:auto;
    padding-left:20px;
}

.error-list li{
    margin-bottom:10px;
    color:#d1d5db;
}

@media(max-width:768px){

    .app{
        padding:22px;
    }

    h1{
        font-size:2.2rem;
    }

    .upload-box{
        height:150px;
    }

    .upload-title{
        font-size:1.1rem;
    }

}