:root{--bg:#060816;--card:#0f172a;--border:rgba(255,255,255,.08);--primary:#38bdf8;--primary2:#0ea5e9;--text:#fff;--muted:#94a3b8;}

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

body{font-family:'Inter',sans-serif;background:#060816;color:#fff;overflow-x:hidden;}

a{text-decoration:none;}

.container{width:100%;max-width:1240px;margin:auto;padding:0 24px;}

header{border-bottom:1px solid rgba(255,255,255,.05);}

.nav{height:82px;display:flex;align-items:center;justify-content:space-between;}

.logo{font-size:34px;font-weight:800;color:#fff;padding:5px;}

.logo span{color:#38bdf8;}

.top-actions{display:flex;gap:12px;align-items:center;}

.top-btn{height:44px;padding:10px 10px;border:none;border-radius:14px;background:#0f172a;border:1px solid rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:14px;}

.hero{padding:50px 0;}

.hero-grid{display:grid;grid-template-columns:1fr 480px;gap:60px;align-items:start;}

.hero-left h1{font-size:60px;line-height:1.02;letter-spacing:-3px;margin-bottom:28px;font-weight:800;}

.hero-left p{font-size:20px;line-height:1.8;color:#cbd5e1;margin-bottom:36px;max-width:700px;}

.badges{display:flex;flex-wrap:wrap;gap:14px;}

.badge{padding:14px 20px;background:#0f172a;border:1px solid rgba(255,255,255,.06);border-radius:16px;color:#fff;font-size:15px;}

.upload-card,.form-box,.vip-card{background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(2,6,23,.98));border:1px solid rgba(255,255,255,.06);border-radius:28px;padding:20px;}

.dropzone{border:2px dashed #334155;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:.25s;}

.dropzone:hover{border-color:#38bdf8;}

.dropzone svg{width:82px;fill:#38bdf8;margin-bottom:18px;}

.dropzone h2{font-size:34px;margin-bottom:12px;}

.dropzone p{color:#94a3b8;font-size:17px;}

.btn{margin-top:10px;margin-bottom:10px;height:56px;padding:16px 20px; border:none;border-radius:18px;background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#fff;font-size:17px;font-weight:700;cursor:pointer;}

.full{width:100%;}

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

.action-buttons{margin-top:22px;display:flex;gap:14px;}

.switch-btn{flex:1;height:50px;border:none;border-radius:16px;background:#111827;color:#fff;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.06);}

.switch-btn.primary{background:linear-gradient(135deg,#38bdf8,#0ea5e9);}

.form-box{margin-top:22px;display:none;}

.form-box.active{display:block;}

.form-box h3{margin-bottom:22px;font-size:28px;}

.form-box input,.vip-card select{width:100%;height:54px;margin-bottom:16px;border:none;border-radius:16px;background:#0b1220;border:1px solid rgba(255,255,255,.06);padding:0 18px;color:#fff;font-size:15px;}

.vip-card{margin-top:22px;}

.vip-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px;}

.vip-title{font-size:28px;font-weight:700;margin-bottom:10px;}

.vip-desc{color:#94a3b8;line-height:1.7;}

.vip-badge{background:#facc15;color:#111827;padding:1px 10px;border-radius:6px;font-weight:700;}

.processing,.success,.error{padding:18px;border-radius:16px;text-align:center;font-weight:600;}

.processing{background:rgba(245,158,11,.12);color:#fbbf24;}

.success{background:rgba(34,197,94,.12);color:#4ade80;}

.error{background:rgba(239,68,68,.12);color:#f87171;}

.download-btn{margin-top:18px;display:flex;align-items:center;justify-content:center;width:100%;height:56px;border-radius:16px;background:#22c55e;color:#fff;font-weight:700;}

.top-user{color:#fff;font-weight:600;}

.top-role{background: #facc15;color: #111827;padding:2px 5px;border-radius: 4px;font-weight: 700;}

.top-role.vip{background:#facc15;color:#111827;}

footer{padding:40px 0;text-align:center;color:#64748b;border-top:1px solid rgba(255,255,255,.06);margin-top:60px;}

.payment-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:999;}

.payment-content{width:100%;max-width:420px;background:#111827;border-radius:24px;padding:30px;position:relative;text-align:center;}

.payment-content img{width:260px;margin:20px auto;display:block;border-radius:12px;}

.payment-close{position:absolute;top:14px;right:18px;font-size:30px;cursor:pointer;}

.payment-status{margin-top:18px;color:#fbbf24;font-weight:700;}

@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;}.hero-left h1{font-size:52px;}}

@media(max-width:768px){.hero{padding:50px 0;}.hero-left h1{font-size:42px;line-height:1.08;}.hero-left p{font-size:17px;}.action-buttons{flex-direction:column;}}

.auth-message{padding:16px;border-radius:14px;margin-top:20px;margin-bottom:20px;font-weight:600;text-align:center;}

.auth-success{background:rgba(34,197,94,.12);color:#4ade80;}

.auth-error{background:rgba(239,68,68,.12);color:#f87171;}

.auth-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;}

.auth-modal.active{display:flex;}

.auth-overlay{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);}

.auth-popup{position:relative;width:100%;max-width:460px;background:#111827;border-radius:28px;padding:32px;border:1px solid rgba(255,255,255,.06);z-index:2;animation:popupShow .25s ease;}

.auth-close{position:absolute;top:14px;right:18px;font-size:34px;line-height:1;cursor:pointer;color:#94a3b8;}

.auth-close:hover{color:#fff;}

@keyframes popupShow{from{opacity:0;transform:translateY(20px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}

a {text-decoration: none;color: #fff;}

.popup-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.75);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
padding:20px;
}

.popup-overlay.active{
display:flex;
}

.popup-box{
width:100%;
max-width:420px;
background:#111827;
border-radius:24px;
padding:30px;
position:relative;
border:1px solid rgba(255,255,255,.08);
}

.popup-close{
position:absolute;
top:14px;
right:18px;
font-size:28px;
cursor:pointer;
color:#fff;
}

.popup-box h3{
font-size:28px;
margin-bottom:22px;
}

.popup-box input{
width:100%;
height:54px;
border:none;
border-radius:16px;
background:#0b1220;
border:1px solid rgba(255,255,255,.06);
padding:0 18px;
color:#fff;
font-size:15px;
margin-bottom:18px;
}

.forgot-password{
margin-top:-5px;
margin-bottom:18px;
text-align:right;
}

.forgot-password a{
color:#38bdf8;
font-size:14px;
}

.popup-message{
margin-top:18px;
padding:16px;
border-radius:14px;
text-align:center;
font-weight:600;
display:none;
}

.popup-message.success{
background:rgba(34,197,94,.12);
color:#4ade80;
display:block;
}

.popup-message.error{
background:rgba(239,68,68,.12);
color:#f87171;
display:block;
}

.footer{
    margin-top:20px;
    border-top:1px solid rgba(255,255,255,.06);
    background:#0b1220;
}

.footer-container{
    max-width:1280px;
    margin:0 auto;
    padding:60px 20px 30px;
}

.footer-top{
    display:flex;
    justify-content:space-between;
    gap:60px;
    margin-bottom:40px;
}

.footer-brand{
    max-width:420px;
}

.footer-logo{
    font-size:34px;
    font-weight:800;
    margin-bottom:18px;
}

.footer-desc{
    color:#94a3b8;
    line-height:1.8;
    font-size:15px;
}

.footer-links{
    display:flex;
    gap:70px;
}

.footer-col{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.footer-title{
    font-size:16px;
    font-weight:700;
    margin-bottom:8px;
}

.footer-col a{
    color:#94a3b8;
    font-size:14px;
    transition:.2s;
}

.footer-col a:hover{
    color:#38bdf8;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.06);
    padding-top:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#64748b;
    font-size:14px;
}

.footer-powered{
    color:#38bdf8;
}

@media(max-width:900px){

    .footer-top{
        flex-direction:column;
    }

    .footer-links{
        flex-wrap:wrap;
        gap:40px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:12px;
        text-align:center;
    }
}