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


body {

    min-height:100vh;

    background:
    radial-gradient(circle at top,#17395c,#050a12 70%);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

}



/* TABLET */

.tablet {

    width:95%;

    height:92vh;

    background:#081321;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 0 40px black,
    inset 0 0 30px rgba(0,0,0,.5);

    border:2px solid #1e5d91;

}





/* HEADER */


.topbar {

    height:90px;

    background:
    linear-gradient(
        90deg,
        #071522,
        #10345b
    );

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px 35px;

    border-bottom:2px solid #2175bb;

}



.brand {

    display:flex;

    align-items:center;

    gap:20px;

}



.logo {

    width:60px;

    height:60px;

    border-radius:50%;

    background:#0d2945;

    border:2px solid #3c9bea;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:bold;

}



.brand h1 {

    font-size:26px;

}



.brand span {

    color:#9bb8d3;

    font-size:14px;

}





.status {

    display:flex;

    gap:30px;

    align-items:center;

}



.status div {

    display:flex;

    flex-direction:column;

}



.status span {

    color:#8da7c1;

    font-size:12px;

}



.online {

    color:#4cff88;

}



#clock {

    font-size:22px;

    font-weight:bold;

}





/* NAV */


.navbar {

    display:flex;

    background:#050d18;

    border-bottom:1px solid #18395c;

}



.navbar button {

    flex:1;

    padding:15px;

    background:none;

    color:#bcd0e5;

    border:none;

    cursor:pointer;

    font-size:15px;

    transition:.25s;

}



.navbar button:hover,
.navbar .active {

    background:#174b7a;

    color:white;

}





/* MAIN */


main {

    padding:25px;

    height:calc(100% - 160px);

    overflow-y:auto;

}





/* SEARCH */


.search-panel {

    display:flex;

    gap:15px;

}



.search-panel input,
.search-panel select {


    flex:1;

    padding:15px;

    background:#050d18;

    color:white;

    border:1px solid #285b8c;

    border-radius:8px;

    outline:none;

    font-size:15px;

}


.search-panel input:focus {

    border-color:#3ca8ff;

}





/* FILTER */

.filters {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:20px 0;

}



.filters button {


    padding:10px 18px;

    background:#102b49;

    color:#d5e8ff;

    border:1px solid #235e91;

    border-radius:20px;

    cursor:pointer;

    transition:.2s;

}



.filters button:hover {

    background:#1c6cad;

}





/* INFO */


.info {

    display:flex;

    gap:20px;

    margin-bottom:20px;

}



.info div {

    background:#0d1c2e;

    padding:15px 25px;

    border-radius:10px;

    border-left:4px solid #2686d1;

}



.info span {

    display:block;

    color:#8ea8c0;

    font-size:13px;

}



.info b {

    font-size:22px;

}





/* CARDS */


.cards {

    display:grid;

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

    gap:20px;

}



.card {


    background:

    linear-gradient(
        145deg,
        #101e30,
        #07101c
    );


    padding:20px;

    border-radius:14px;

    border-left:

    5px solid #2285d1;


    box-shadow:

    0 8px 20px black;


    transition:.25s;

    animation:

    fade .3s ease;


}



.card:hover {

    transform:translateY(-5px);

}



@keyframes fade {

from {

    opacity:0;

    transform:translateY(10px);

}

to {

    opacity:1;

}

}




.category {

    display:inline-block;

    background:#1b5d94;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

}



.card h2 {

    margin-top:12px;

    font-size:20px;

}



.paragraph {

    margin-top:8px;

    color:#5bb8ff;

}



.description {

    margin-top:12px;

    color:#b8c7d8;

}



.details {

    margin-top:15px;

    display:flex;

    justify-content:space-between;

}



.price {

    color:#4cff8c;

    font-size:22px;

    font-weight:bold;

}


.points {

    color:#ffd34d;

}





/* FOOTER */


footer {

    height:70px;

    background:#050c16;

    border-top:1px solid #193b60;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 35px;

    color:#7f9ab3;

    font-size:13px;

}





/* SCROLLBAR */


::-webkit-scrollbar {

    width:8px;

}


::-webkit-scrollbar-track {

    background:#050d18;

}


::-webkit-scrollbar-thumb {

    background:#21639b;

    border-radius:10px;

}