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

body{
    background:#070b18;
    color:#fff;
    transition:.25s;
}


/* ================= APP ================= */

.app{
    min-height:100vh;
}


/* ================= CONTENT ================= */

.content{
    padding:20px;
    overflow:auto;
}

/* ================= SELECT2 ================= */

.select2-container{
    width:100% !important;
}


/* BOX */

.select2-selection{

    height:58px !important;

    display:flex !important;

    align-items:center !important;

    background:#111827 !important;

    border:1px solid #1e293b !important;

    border-radius:16px !important;

    color:white !important;

    padding:0 14px !important;
}


/* TEXT */

.select2-selection__rendered{

    color:white !important;

    line-height:normal !important;
}


/* ARROW */

.select2-selection__arrow b{

    border-top-color:white !important;
}


/* DROPDOWN */

.select2-dropdown{

    background:#111827 !important;

    border:1px solid #1e293b !important;

    border-radius:16px !important;

    overflow:hidden;
}


/* SEARCH */

.select2-search__field{

    background:#0f172a !important;

    color:white !important;

    border:none !important;

    outline:none !important;

    border-radius:12px !important;

    padding:12px !important;
}


/* RESULT */

.select2-results__option{

    color:white !important;

    padding:14px !important;
}


.select2-results__option--highlighted{

    background:#00e5ff !important;

    color:black !important;
}

/* ================= LOADER ================= */

.loader-wrap{

    position:fixed;

    inset:0;

    z-index:999999;

    display:none;

    justify-content:center;
    align-items:center;

    background:
    rgba(0,0,0,.45);

    backdrop-filter:
    blur(8px);
}


.spinner {

    position: relative;

    width: 80px;
    height: 80px;
}


.spinner div {

    transform-origin:
    40px 40px;

    animation:
    fadeSpin 1.2s linear infinite;
}


.spinner div:after {

    content: "";

    display: block;

    position: absolute;

    top: 3px;
    left: 37px;

    width: 6px;
    height: 18px;

    border-radius: 20%;

    background:#00e5ff;
}


.spinner div:nth-child(1){transform:rotate(0deg);animation-delay:-1.1s;}
.spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s;}
.spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-0.9s;}
.spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-0.8s;}
.spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-0.7s;}
.spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-0.6s;}
spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-0.5s;}
.spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-0.4s;}
.spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-0.3s;}
.spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-0.2s;}
.spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-0.1s;}
.spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s;}


@keyframes fadeSpin {

    0%{
        opacity:1;
    }

    100%{
        opacity:0;
    }

}
/* ================= SKELETON ================= */

.skeleton{

    position:relative !important;

    overflow:hidden !important;

    pointer-events:none;
}


.skeleton *{

    opacity:0 !important;
}


.skeleton::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    border-radius:inherit;

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

    backdrop-filter:
    blur(10px);

    -webkit-backdrop-filter:
    blur(10px);

}


.skeleton::after{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:70%;

    height:100%;

    z-index:3;

    background:
    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

    animation:
    skeletonMove 1.2s infinite;

}


@keyframes skeletonMove{

    100%{

        left:200%;

    }

}

/* ================= LIGHT MODE ================= */

.light-theme .select2-selection{

    background:white !important;

    color:black !important;

    border-color:#ddd !important;
}


.light-theme .select2-selection__rendered{

    color:black !important;
}


.light-theme .select2-selection__arrow b{

    border-top-color:black !important;
}


.light-theme .select2-dropdown{

    background:white !important;

    border-color:#ddd !important;
}


.light-theme .select2-search__field{

    background:#f5f7fb !important;

    color:black !important;
}


.light-theme .select2-results__option{

    color:black !important;
}

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

.app-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:30px;
}

.header-left{
    flex:1;
}

.header-left h1{
    font-size:34px;
    font-weight:bold;
    line-height:1.1;
    margin-bottom:8px;
}

.header-left p{
    opacity:.65;
    font-size:16px;
}

.header-right{
    display:flex;
    gap:12px;
}

.landing{
    min-height:100vh;
    padding:20px;
}

.landing-body{
    margin-top:100px;
}

.landing-body h2{
    font-size:42px;
    margin-bottom:20px;
}

.landing-body p{
    opacity:.7;
    line-height:1.6;
}

.landing-btns{
    display:flex;
    gap:12px;
    margin-top:30px;
}

.btn-outline{
    flex:1;
    text-decoration:none;
    color:white;
    padding:16px;
    text-align:center;
    border-radius:16px;
    border:1px solid #334155;
}

.landing-stats{
    margin-top:60px;
}

.auth-page{

    display:flex;

    min-height:100vh;

    justify-content:center;

    align-items:center;

    padding:20px;
}


.auth-box{

    width:100%;

    max-width:420px;

    padding:30px;

    border-radius:28px;

    background:#0f172a;

    border:1px solid #1e293b;

    box-shadow:
    0 0 40px rgba(0,229,255,.08);
}


.auth-box h1{

    font-size:28px;

    margin-bottom:8px;
}


.auth-box p{

    opacity:.6;

    margin-bottom:25px;
}


.auth-box input{

    margin-bottom:16px;
}


.auth-link{

    display:block;

    text-align:center;

    margin-top:20px;

    text-decoration:none;

    color:#00e5ff;
}


.auth-msg{

    text-align:center;

    margin-top:18px;

    color:#ff6b6b;
}

.profile-avatar{

    display:flex;

    justify-content:center;

    margin-bottom:25px;

}


.profile-avatar img{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #00e5ff;

}


.logout-btn{

    display:block;

    text-align:center;

    text-decoration:none;

    color:white;

    padding:16px;

    border-radius:16px;

    background:#ef4444;

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

.menu-btn,
.theme-btn{
    width:54px;
    height:54px;

    border:none;
    cursor:pointer;

    border-radius:50%;
    font-size:24px;

    color:white;
    background:#0f172a;

    border:1px solid #1e293b;

    box-shadow:
    0 0 20px rgba(0,229,255,.08);

    transition:.25s;
}

.menu-btn:hover,
.theme-btn:hover{
    transform:scale(1.05);
}


/* ================= DRAWER ================= */
/* ================= DRAWER OVERLAY ================= */

.drawer-overlay{

    position:fixed;

    inset:0;

    z-index:9998;

    opacity:0;

    visibility:hidden;

    transition:.25s;

    background:
    rgba(0,0,0,.25);

    backdrop-filter:
    blur(8px);

    -webkit-backdrop-filter:
    blur(8px);
}


.drawer-overlay.show{

    opacity:1;

    visibility:visible;
}



/* PANEL */

.sidebar-drawer{
    position:fixed;

    top:0;
    left:0;

    width:280px;
    height:100vh;

    z-index:9999;

    padding:25px;

    background:#162033;

    border-right:1px solid #1e293b;

    transform:translateX(-100%);

    transition:.25s;

    box-shadow:
    0 0 40px rgba(0,0,0,.35);
}

.sidebar-open{
    transform:translateX(0);
}


/* HEADER */

.drawer-head{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;
}

.drawer-head h2{
    font-size:20px;
    font-weight:bold;
}

.drawer-head button{
    border:none;

    background:none;

    color:white;

    font-size:24px;

    cursor:pointer;
}


/* MENU */

.sidebar-drawer a{
    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:#cbd5e1;

    padding:16px 18px;

    margin-bottom:12px;

    border-radius:16px;

    transition:.25s;
}


/* ICON */

.sidebar-drawer i{
    width:20px;

    font-size:18px;

    opacity:.9;
}


/* HOVER */

.sidebar-drawer a:hover{
    background:#1e293b;

    color:#00e5ff;

    transform:translateX(4px);

    box-shadow:
    0 0 20px rgba(0,229,255,.08);
}


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

.card,
.order-box,
.glass-card,
.stat-box{
    width:100%;

    padding:24px;

    margin-bottom:20px;

    border-radius:24px;

    background:#0f172a;

    border:1px solid #1e293b;

    box-shadow:
    0 0 30px rgba(0,229,255,.07);

    transition:.25s;
}

.card:hover,
.glass-card:hover,
.stat-box:hover{
    transform:translateY(-2px);
}


/* ================= DASHBOARD ================= */

.stats-grid{
    display:grid;

    grid-template-columns:
    repeat(2,minmax(0,1fr));

    gap:16px;

    margin-bottom:22px;
}

.stat-box{
    min-height:95px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.stat-box span{
    opacity:.6;
    font-size:12px;
    letter-spacing:1px;
}

.stat-box h2{
    margin-top:10px;
    font-size:20px;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}


.dashboard-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}


.card-title{
    font-weight:bold;
    margin-bottom:20px;
}

.auth-overlay{

    position:fixed;
    inset:0;

    backdrop-filter:blur(10px);

    background:rgba(0,0,0,.45);

}


.auth-modal{

    position:fixed;

    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%);

    width:92%;
    max-width:420px;

    padding:30px;

    border-radius:30px;

    background:white;

    color:black;

    z-index:99999;

}


.auth-close{

    position:absolute;

    right:25px;
    top:25px;

    color:#666;

    font-size:28px;

    text-decoration:none;

}


.auth-modal h1{

    margin-bottom:8px;

    font-size:32px;

}


.auth-modal p{

    opacity:.7;

    margin-bottom:25px;

}


.auth-alert{

    background:#eaf8ff;

    color:#0f5f7a;

    padding:18px;

    border-radius:20px;

    margin-bottom:20px;

}


.auth-input{

    width:100%;

    padding:18px;

    margin-bottom:15px;

    border-radius:18px;

    border:1px solid #ddd;

    outline:none;

}


.auth-btn{

    width:100%;

    border:none;

    color:white;

    font-weight:bold;

    cursor:pointer;

    padding:18px;

    border-radius:50px;

    background:
    linear-gradient(
    90deg,
    #56d5ff,
    #27b3ff
    );

}


.auth-bottom{

    text-align:center;

    margin-top:25px;

}

/* ================= LIST ================= */

.scroll-list{
    max-height:220px;
    overflow-y:auto;
    padding-right:6px;
}

.scroll-list::-webkit-scrollbar{
    width:4px;
}

.scroll-list::-webkit-scrollbar-thumb{
    background:#00e5ff;
    border-radius:20px;
}

.list-item{
    padding:14px 0;
    border-bottom:1px solid #1e293b;
}

.list-item small{
    opacity:.6;
}


/* ================= FORM ================= */

.order-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.order-select,
.order-input,
.order-service,
.premium-input{
    width:100%;

    padding:16px 18px;

    border:none;
    outline:none;

    color:white;
    font-size:15px;

    border-radius:16px;

    background:#111827;

    border:1px solid #1e293b;
}

.order-service{
    height:320px;
}

.order-input::placeholder,
.premium-input::placeholder{
    color:#64748b;
}

.menu-group{

    margin-bottom:12px;

}


.menu-arrow{

    margin-left:auto;

    font-size:13px;

    transition:.25s;

}


.submenu{

    display:none;

    padding-left:18px;

    margin-top:8px;

}


.submenu a{

    padding:13px 16px;

    font-size:14px;

}


.submenu.show{

    display:block;

}


.menu-arrow.rotate{

    transform:rotate(180deg);

}


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

.buy-btn,
.btn-primary,
.popup-btn{
    width:100%;

    border:none;

    cursor:pointer;

    color:black;

    font-weight:bold;

    font-size:15px;

    padding:16px;

    border-radius:16px;

    background:
    linear-gradient(
    90deg,
    #00e5ff,
    #009dff
    );
}


/* ================= POPUP ================= */

.popup,
.modal{
    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.7);
}

.popup-box,
.modal-box{
    width:92%;
    max-width:420px;

    padding:28px;

    border-radius:24px;

    background:#0f172a;

    border:1px solid #1e293b;
}


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

.footer-bar{
    margin-top:30px;
    opacity:.5;
    text-align:center;
    font-size:13px;
}


/* ================= LIGHT ================= */

.light-theme{
    background:#f5f7fb;
    color:#111;
}

.light-theme .card,
.light-theme .glass-card,
.light-theme .stat-box,
.light-theme .popup-box,
.light-theme .sidebar-drawer{
    background:white;
    color:black;
    border-color:#ddd;
}

.light-theme .sidebar-drawer a{
    color:black;
}

.light-theme .menu-btn,
.light-theme .theme-btn{
    background:white;
    color:black;
    border-color:#ddd;
}
/* ================= INBOX ================= */

.tab-box{

    display:flex;

    gap:12px;

    margin-bottom:20px;
}


.tab-btn{

    border:none;

    cursor:pointer;

    padding:14px 22px;

    border-radius:14px;

    background:#111827;

    color:white;
}


.tab-btn.active{

    background:#00e5ff;

    color:black;

    font-weight:bold;
}



.inbox-item{

    padding:18px;

    margin-bottom:14px;

    border-radius:16px;

    background:#111827;
}



.action-row{

    display:flex;

    gap:10px;

    margin-top:15px;
}



.cancel-btn,
.done-btn{

    border:none;

    cursor:pointer;

    padding:10px 16px;

    border-radius:12px;
}


.cancel-btn{

    background:#334155;

    color:white;
}


.done-btn{

    background:#00e5ff;

    color:black;
}

.admin-table{

    width:100%;

    border-collapse:collapse;

}


.admin-table th{

    opacity:.6;

    font-size:13px;

    text-align:left;

    padding-bottom:18px;

}


.admin-table td{

    padding:18px 0;

    border-top:1px solid #1e293b;

}


.admin-table tr{

    cursor:pointer;

}


.admin-table tr:hover{

    opacity:.7;

}


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

@media(max-width:768px){

    .content{
        padding:12px;
    }

    .header-left h1{
        font-size:28px;
    }

    .header-left p{
        font-size:14px;
    }

    .menu-btn,
    .theme-btn{
        width:48px;
        height:48px;
        font-size:20px;
    }

    .sidebar-drawer{
        width:260px;
    }

}