@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root{
    --bg:#070b14;
    --card:rgba(255,255,255,.08);
    --line:rgba(255,255,255,.12);
    --text:#eef3ff;
    --muted:#9fb1d1;
    --blue:#00d4ff;
    --purple:#8b5cf6;
    --green:#00e08f;
    --red:#ff5d7a;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Rajdhani,sans-serif;
    background:
        radial-gradient(circle at 20% 0%,rgba(139,92,246,.25),transparent 30%),
        radial-gradient(circle at 90% 20%,rgba(0,212,255,.2),transparent 30%),
        linear-gradient(180deg,#060812,#0b1221 40%,#071018);
    color:var(--text);
    min-height:100vh;
}

.bg{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.orb{
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:.35;
    animation:float 12s ease-in-out infinite;
}

.orb.one{
    width:260px;
    height:260px;
    background:#00d4ff;
    top:5%;
    left:-4%;
}

.orb.two{
    width:320px;
    height:320px;
    background:#8b5cf6;
    right:-8%;
    top:15%;
    animation-delay:-4s;
}

.orb.three{
    width:260px;
    height:260px;
    background:#00e08f;
    left:40%;
    bottom:-8%;
    animation-delay:-8s;
}

@keyframes float{
    50%{
        transform:translateY(20px) translateX(20px);
    }
}

.container{
    max-width:1150px;
    margin:0 auto;
    padding:32px 20px 48px;
}

.hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:22px;
}

.brand{
    display:flex;
    gap:16px;
    align-items:center;
}

/* ===== LOGO GAMING ANIMATION ===== */
.logo{
    width:80px;
    height:80px;
    border-radius:22px;
    position:relative;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,rgba(0,212,255,.18),rgba(139,92,246,.22));
    border:1px solid rgba(255,255,255,.16);
    font-size:36px;
    color:#dffaff;
    box-shadow:
        0 0 12px rgba(0,212,255,.35),
        0 0 24px rgba(139,92,246,.22),
        0 10px 30px rgba(0,0,0,.28);
    overflow:visible;
    animation:logoFloat 3.2s ease-in-out infinite;
    transition:.35s ease;
    isolation:isolate;
}

.logo i{
    position:relative;
    z-index:3;
    filter:
        drop-shadow(0 0 6px rgba(0,212,255,.9))
        drop-shadow(0 0 14px rgba(0,212,255,.45));
    animation:shieldPulse 2.2s ease-in-out infinite;
}

.logo::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:26px;
    padding:2px;
    background:conic-gradient(
        from 0deg,
        rgba(0,212,255,0) 0deg,
        rgba(0,212,255,.95) 55deg,
        rgba(139,92,246,.95) 130deg,
        rgba(0,224,143,.85) 200deg,
        rgba(0,212,255,0) 300deg,
        rgba(0,212,255,0) 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation:ringSpin 2.8s linear infinite;
    z-index:1;
    filter:
        drop-shadow(0 0 10px rgba(0,212,255,.8))
        drop-shadow(0 0 20px rgba(139,92,246,.45));
}

.logo::after{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:30px;
    background:
        radial-gradient(circle at 50% 50%, rgba(0,212,255,.22), transparent 45%),
        radial-gradient(circle at 30% 20%, rgba(139,92,246,.18), transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(0,224,143,.15), transparent 35%);
    z-index:0;
    animation:energyPulse 1.9s ease-in-out infinite;
    filter:blur(8px);
}

.logo:hover{
    transform:translateY(-4px) scale(1.08);
    box-shadow:
        0 0 18px rgba(0,212,255,.48),
        0 0 34px rgba(139,92,246,.3),
        0 14px 36px rgba(0,0,0,.34);
}

.logo:hover i{
    filter:
        drop-shadow(0 0 10px rgba(0,212,255,1))
        drop-shadow(0 0 22px rgba(0,212,255,.75));
}

.brand h1{
    margin:0;
    font:900 28px Orbitron,sans-serif;
    letter-spacing:.03em;
}

.brand p{
    margin:6px 0 0;
    color:var(--muted);
}

/* ===== ADMIN BUTTON POSITION ===== */
.top-actions{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:999;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* ===== GLOWING ADMIN BUTTON ===== */
.pill{
    padding:10px 16px;
    border-radius:999px;
    background:rgba(10,20,35,.55);
    border:1px solid rgba(0,212,255,.35);
    color:#ffffff;
    text-decoration:none;
    font-weight:700;
    backdrop-filter:blur(12px);
    box-shadow:
        0 0 8px rgba(0,212,255,.25),
        0 0 18px rgba(0,212,255,.18),
        inset 0 0 12px rgba(0,212,255,.08);
    transition:.3s ease;
    position:relative;
    overflow:hidden;
    animation:adminGlow 2.2s ease-in-out infinite;
}

.pill::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        rgba(0,212,255,0) 0%,
        rgba(0,212,255,.45) 50%,
        rgba(0,212,255,0) 100%
    );
    transform:translateX(-120%);
    transition:transform .6s ease;
}

.pill:hover{
    transform:translateY(-2px);
    border-color:rgba(0,212,255,.7);
    box-shadow:
        0 0 12px rgba(0,212,255,.45),
        0 0 26px rgba(0,212,255,.35),
        0 0 42px rgba(0,212,255,.2),
        inset 0 0 14px rgba(0,212,255,.12);
}

.pill:hover::before{
    transform:translateX(120%);
}

.grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:18px;
}

.card{
    background:var(--card);
    border:1px solid var(--line);
    backdrop-filter:blur(16px);
    border-radius:26px;
    padding:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.25);
}

.card h2,
.card h3{
    margin:0 0 10px;
}

.muted{
    color:var(--muted);
}

.field{
    margin-top:18px;
}

.label{
    display:block;
    margin-bottom:10px;
    color:#b9cbec;
    font-weight:600;
}

.input-wrap{
    position:relative;
}

.input-wrap i{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--blue);
}

input[type=text]{
    width:100%;
    padding:16px 18px 16px 48px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.25);
    color:#fff;
    font-size:18px;
}

input[type=text]:focus{
    outline:none;
    border-color:rgba(0,212,255,.75);
    box-shadow:0 0 0 4px rgba(0,212,255,.12);
}

.actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:18px;
}

.btn{
    border:none;
    border-radius:16px;
    padding:14px 18px;
    color:#fff;
    background:linear-gradient(135deg,#00b5ff,#7c3aed);
    cursor:pointer;
    font:700 16px Rajdhani,sans-serif;
    min-width:155px;
    box-shadow:0 12px 24px rgba(124,58,237,.25);
}

.btn.secondary{
    background:rgba(255,255,255,.06);
    border:1px solid var(--line);
    box-shadow:none;
}

.btn.green{
    background:linear-gradient(135deg,#00c972,#00a6d7);
}

.btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.status{
    margin-top:16px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid transparent;
    display:none;
}

.status.show{
    display:block;
}

.status.success{
    background:rgba(0,224,143,.1);
    border-color:rgba(0,224,143,.25);
}

.status.error{
    background:rgba(255,93,122,.1);
    border-color:rgba(255,93,122,.25);
}

.status.info{
    background:rgba(0,212,255,.08);
    border-color:rgba(0,212,255,.2);
}

.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:18px;
}

.stat{
    padding:16px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.stat .k{
    font-size:13px;
    color:var(--muted);
}

.stat .v{
    font-size:19px;
    font-weight:700;
    margin-top:6px;
    word-break:break-word;
}

.keybox{
    display:none;
}

.keybox.show{
    display:block;
}

.apk-list{
    display:grid;
    gap:12px;
    margin-top:14px;
}

.apk-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.apk-meta{
    min-width:0;
}

.apk-name{
    font-weight:700;
    font-size:18px;
    word-break:break-word;
}

.apk-sub{
    color:var(--muted);
    font-size:14px;
}

.mini-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:14px;
    background:rgba(0,212,255,.12);
    border:1px solid rgba(0,212,255,.2);
    color:#fff;
    text-decoration:none;
    font-weight:700;
}

.empty{
    padding:18px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px dashed rgba(255,255,255,.12);
    color:var(--muted);
    text-align:center;
}

.hint{
    margin-top:16px;
    font-size:14px;
    color:var(--muted);
}

@keyframes logoFloat{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0px);
    }
}

@keyframes ringSpin{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

@keyframes shieldPulse{
    0%,100%{
        transform:scale(1);
        opacity:1;
    }
    50%{
        transform:scale(1.08);
        opacity:.92;
    }
}

@keyframes energyPulse{
    0%,100%{
        transform:scale(1);
        opacity:.65;
    }
    50%{
        transform:scale(1.12);
        opacity:1;
    }
}

@keyframes adminGlow{
    0%,100%{
        box-shadow:
            0 0 8px rgba(0,212,255,.25),
            0 0 18px rgba(0,212,255,.18),
            inset 0 0 12px rgba(0,212,255,.08);
    }
    50%{
        box-shadow:
            0 0 14px rgba(0,212,255,.5),
            0 0 30px rgba(0,212,255,.35),
            0 0 46px rgba(0,212,255,.18),
            inset 0 0 16px rgba(0,212,255,.14);
    }
}

@media (max-width:900px){
    .grid{
        grid-template-columns:1fr;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .container{
        padding:18px 14px 32px;
    }

    .card{
        padding:18px;
    }

    .brand h1{
        font-size:22px;
    }

    .logo{
        width:72px;
        height:72px;
        font-size:32px;
    }

    .top-actions{
        right:16px;
        bottom:16px;
    }

    .pill{
        padding:10px 14px;
        font-size:14px;
    }
}







.shop-btn{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:12px;
padding:12px 20px;
border-radius:14px;
font-weight:700;
text-decoration:none;
color:#fff;
background:linear-gradient(135deg,#00d4ff,#8b5cf6);
box-shadow:
0 0 12px rgba(0,212,255,.5),
0 0 25px rgba(139,92,246,.4);
position:relative;
overflow:hidden;
transition:.3s;
animation:shopPulse 2s infinite;
}

.shop-btn:hover{
transform:translateY(-3px);
box-shadow:
0 0 20px rgba(0,212,255,.9),
0 0 40px rgba(139,92,246,.7);
}

.shop-btn::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:120%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.4),
transparent
);
animation:shopLight 2.5s infinite;
}

@keyframes shopPulse{
0%,100%{
box-shadow:
0 0 12px rgba(0,212,255,.5),
0 0 25px rgba(139,92,246,.4);
}
50%{
box-shadow:
0 0 18px rgba(0,212,255,.8),
0 0 40px rgba(139,92,246,.6);
}
}

@keyframes shopLight{
0%{left:-120%;}
100%{left:120%;}
}



.contact-btn{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:10px;
padding:12px 20px;
border-radius:14px;
font-weight:700;
text-decoration:none;
color:#fff;
background:linear-gradient(135deg,#00e08f,#00d4ff);
box-shadow:
0 0 10px rgba(0,224,143,.5),
0 0 25px rgba(0,212,255,.3);
transition:.3s;
}

.contact-btn:hover{
transform:translateY(-2px);
box-shadow:
0 0 18px rgba(0,224,143,.8),
0 0 30px rgba(0,212,255,.5);
}