/* ===================================================
   SCB BONUS HARIAN CHECKER
   CYBER NEON EDITION
=================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    min-height:100%;

    overflow-x:hidden;

}

body{

    font-family:'Segoe UI',sans-serif;

    background:#030712;

    color:white;

    position:relative;

}

/* ======================================
   CYBER BACKGROUND
====================================== */

body::before{

    content:"";

    position:fixed;

    width:200%;

    height:200%;

    top:-50%;

    left:-50%;

    background:

    radial-gradient(
        circle,
        rgba(0,255,255,.08),
        transparent 60%
    );

    animation:
    rotateBackground 40s linear infinite;

    z-index:-5;

}

@keyframes rotateBackground{

    from{

        transform:
        rotate(0deg);

    }

    to{

        transform:
        rotate(360deg);

    }

}

/* ======================================
   GRID
====================================== */

.background-grid{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:-4;

    background:

    linear-gradient(
        rgba(0,255,255,.05) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(0,255,255,.05) 1px,
        transparent 1px
    );

    background-size:40px 40px;

    animation:
    moveGrid 15s linear infinite;

}

@keyframes moveGrid{

    from{

        transform:
        translateY(0);

    }

    to{

        transform:
        translateY(40px);

    }

}

/* ======================================
   CYBER RAIN
====================================== */

.cyber-lines{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:-3;

    overflow:hidden;

}

.cyber-lines span{

    position:absolute;

    width:2px;

    height:250px;

    background:

    linear-gradient(
        transparent,
        #00ffff,
        transparent
    );

    opacity:.4;

    animation:
    rain 6s linear infinite;

}

@keyframes rain{

    from{

        transform:
        translateY(-300px);

    }

    to{

        transform:
        translateY(120vh);

    }

}

/* ======================================
   GLOW ORB
====================================== */

.background-glow{

    position:fixed;

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(0,255,255,.25),
        transparent 70%
    );

    filter:blur(60px);

    top:-200px;
    left:-200px;

    animation:
    glowMove 15s ease-in-out infinite alternate;

    z-index:-2;

}

@keyframes glowMove{

    from{

        transform:
        translate(0,0);

    }

    to{

        transform:
        translate(600px,300px);

    }

}

/* ======================================
   CONTAINER
====================================== */

.container{

    width:95%;

    max-width:1600px;

    margin:auto;

    padding:30px 0;

}

/* ======================================
   GLASS CARD
====================================== */

.header-card,
.upload-card,
.table-card{

    background:
    rgba(255,255,255,.05);

    backdrop-filter:
    blur(15px);

    border:

    1px solid
    rgba(255,255,255,.08);

    border-radius:20px;

    padding:25px;

    margin-bottom:25px;

    position:relative;

    overflow:hidden;

    transition:.4s;

}

.header-card:hover,
.upload-card:hover,
.table-card:hover{

    box-shadow:

    0 0 20px #00ffff,
    0 0 40px rgba(0,255,255,.2),
    0 0 80px rgba(138,43,226,.2);

}

/* ======================================
   RUNNING BORDER
====================================== */

.table-card::before,
.upload-card::before,
.header-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:2px;

    background:

    linear-gradient(
        90deg,
        transparent,
        #00ffff,
        #8a2be2,
        transparent
    );

    animation:
    borderRun 4s linear infinite;

}

@keyframes borderRun{

    from{

        left:-100%;

    }

    to{

        left:100%;

    }

}

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

.header-card{

    text-align:center;

}

.header-card h1{

    font-size:48px;

    color:#00ffff;

    animation:
    pulse 2s ease-in-out infinite;

}

.header-card p{

    margin-top:10px;

    color:#bbb;

}

@keyframes pulse{

    0%{

        text-shadow:

        0 0 10px #00ffff;

    }

    50%{

        text-shadow:

        0 0 20px #00ffff,
        0 0 40px #00ffff,
        0 0 60px #00ffff;

    }

    100%{

        text-shadow:

        0 0 10px #00ffff;

    }

}

/* ======================================
   UPLOAD
====================================== */

.upload-group{

    margin-bottom:20px;

}

.upload-group label{

    display:block;

    margin-bottom:8px;

    color:#00ffff;

}

input[type=file]{

    width:100%;

    padding:12px;

    border-radius:10px;

    background:
    rgba(255,255,255,.05);

    border:

    1px solid
    rgba(255,255,255,.1);

    color:white;

}

/* ======================================
   BUTTON
====================================== */

.process-btn{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:18px;

    font-weight:bold;

    color:white;

    background:

    linear-gradient(
        90deg,
        #00ffff,
        #8a2be2
    );

    transition:.3s;

}

.process-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 0 20px #00ffff,
    0 0 40px #8a2be2;

}

/* ======================================
   SUMMARY
====================================== */

.summary{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-bottom:25px;

}

.box{

    padding:25px;

    border-radius:20px;

    text-align:center;

    transition:.3s;

}

.box:hover{

    transform:
    translateY(-5px);

}

.box h3{

    margin-bottom:10px;

}

.box span{

    font-size:40px;

    font-weight:bold;

}

.blue{

    background:
    linear-gradient(
        135deg,
        #0066ff,
        #00ffff
    );

}

.green{

    background:
    linear-gradient(
        135deg,
        #00c853,
        #69f0ae
    );

}

.red{

    background:
    linear-gradient(
        135deg,
        #ff1744,
        #ff5252
    );

}

.orange{

    background:
    linear-gradient(
        135deg,
        #ff9100,
        #ffd180
    );

}

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

.table-card h2{

    margin-bottom:15px;

    color:#00ffff;

}

table{

    width:100%;

    border-collapse:collapse;

}

thead{

    background:
    rgba(0,255,255,.1);

}

th{

    padding:15px;

    border:
    1px solid rgba(255,255,255,.08);

}

td{

    padding:12px;

    border:
    1px solid rgba(255,255,255,.05);

}

tbody tr{

    position:relative;

    overflow:hidden;

}

tbody tr::after{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(0,255,255,.12),
        transparent
    );

    animation:
    rowScan 5s linear infinite;

}

@keyframes rowScan{

    from{

        left:-100%;

    }

    to{

        left:100%;

    }

}

tbody tr:hover{

    background:
    rgba(0,255,255,.08);

}

/* ======================================
   SCROLLBAR
====================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#00ffff;

    border-radius:20px;

}

/* ======================================
   MOBILE
====================================== */

@media(max-width:768px){

    .header-card h1{

        font-size:28px;

    }

    .box span{

        font-size:28px;

    }

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

.footer{

    margin-top:60px;

    position:relative;

    text-align:center;

    padding:40px 20px;

}

.footer-line{

    width:100%;

    height:2px;

    background:

    linear-gradient(
        90deg,
        transparent,
        #00ffff,
        #8a2be2,
        transparent
    );

    margin-bottom:25px;

    animation:
    footerGlow 4s linear infinite;

}

@keyframes footerGlow{

    0%{

        filter:
        drop-shadow(0 0 5px #00ffff);

    }

    50%{

        filter:
        drop-shadow(0 0 20px #8a2be2);

    }

    100%{

        filter:
        drop-shadow(0 0 5px #00ffff);

    }

}

.footer-content{

    background:
    rgba(255,255,255,.03);

    backdrop-filter:
    blur(12px);

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:25px;

    max-width:700px;

    margin:auto;

}

.footer-content h3{

    color:#00ffff;

    margin-bottom:10px;

    font-size:22px;

    text-shadow:

    0 0 10px #00ffff,
    0 0 20px #00ffff;

}

.footer-content p{

    color:#bdbdbd;

    margin-bottom:10px;

    letter-spacing:1px;

}

.footer-content span{

    color:#777;

    font-size:14px;

}